🤯feat(channels): enhance channel management UI and model testing
This commit improves the ChannelsTable component with enhanced UI and functionality: UI Improvements: - Refactor operation column layout with primary actions exposed - Move secondary actions (delete, copy) to dropdown menu - Unify button styles with theme='light' and size="small" - Add !rounded-full design to all buttons - Add appropriate icons (IconStop, IconPlay etc.) Column Settings Modal: - Replace inline styles with Tailwind CSS - Add rounded corners design - Optimize button layout and styling - Improve responsive design Batch Operations: - Unify dropdown button styles with !rounded-full - Replace inline styles with Tailwind w-full - Maintain semantic button types (warning/secondary/danger) - Improve visual hierarchy Model Testing Enhancement: - Add comprehensive model testing modal - Implement batch testing functionality - Add model search and filtering - Add real-time test status indicators - Show response time for successful tests - Add test queue management system - Implement graceful test cancellation Other Improvements: - Optimize responsive layout for mobile devices - Add i18n support for all new features - Improve error handling and user feedback - Enhance performance with optimized state management
This commit is contained in:
Apple\Apple
File diff suppressed because it is too large
Load Diff
@@ -715,6 +715,7 @@ const LogsTable = () => {
|
||||
</div>
|
||||
<div
|
||||
className="flex flex-wrap max-h-96 overflow-y-auto rounded-lg p-4"
|
||||
style={{ border: '1px solid var(--semi-color-border)' }}
|
||||
>
|
||||
{allColumns.map((column) => {
|
||||
// Skip admin-only columns for non-admin users
|
||||
|
||||
@@ -730,7 +730,7 @@ const LogsTable = () => {
|
||||
{t('全选')}
|
||||
</Checkbox>
|
||||
</div>
|
||||
<div className="flex flex-wrap max-h-96 overflow-y-auto rounded-lg p-4">
|
||||
<div className="flex flex-wrap max-h-96 overflow-y-auto rounded-lg p-4" style={{ border: '1px solid var(--semi-color-border)' }}>
|
||||
{allColumns.map((column) => {
|
||||
// 为非管理员用户跳过管理员专用列
|
||||
if (
|
||||
|
||||
@@ -573,7 +573,7 @@ const LogsTable = () => {
|
||||
{t('全选')}
|
||||
</Checkbox>
|
||||
</div>
|
||||
<div className="flex flex-wrap max-h-96 overflow-y-auto rounded-lg p-4">
|
||||
<div className="flex flex-wrap max-h-96 overflow-y-auto rounded-lg p-4" style={{ border: '1px solid var(--semi-color-border)' }}>
|
||||
{allColumns.map((column) => {
|
||||
// 为非管理员用户跳过管理员专用列
|
||||
if (!isAdminUser && column.key === COLUMN_KEYS.CHANNEL) {
|
||||
|
||||
@@ -1480,5 +1480,17 @@
|
||||
"删除账户确认": "Delete Account Confirmation",
|
||||
"请输入您的用户名以确认删除": "Please enter your username to confirm deletion",
|
||||
"接受未设置价格模型": "Accept models without price settings",
|
||||
"当模型没有设置价格时仍接受调用，仅当您信任该网站时使用，可能会产生高额费用": "Accept calls even if the model has no price settings, use only when you trust the website, which may incur high costs"
|
||||
"当模型没有设置价格时仍接受调用，仅当您信任该网站时使用，可能会产生高额费用": "Accept calls even if the model has no price settings, use only when you trust the website, which may incur high costs",
|
||||
"批量操作": "Batch Operations",
|
||||
"未开始": "Not Started",
|
||||
"测试中": "Testing",
|
||||
"请求时长: ${time}s": "Request time: ${time}s",
|
||||
"搜索模型...": "Search models...",
|
||||
"批量测试${count}个模型": "Batch test ${count} models",
|
||||
"测试中...": "Testing...",
|
||||
"渠道的模型测试": "Channel Model Test",
|
||||
"共": "Total",
|
||||
"确定要测试所有通道吗？": "Are you sure you want to test all channels?",
|
||||
"确定要更新所有已启用通道余额吗？": "Are you sure you want to update the balance of all enabled channels?",
|
||||
"已选择 ${count} 个渠道": "Selected ${count} channels"
|
||||
}
|
||||
@@ -1,10 +1,13 @@
|
||||
@layer tailwind-base,semi,tailwind-components,tailwind-utils;
|
||||
@layer tailwind-base{
|
||||
@layer tailwind-base, semi, tailwind-components, tailwind-utils;
|
||||
|
||||
@layer tailwind-base {
|
||||
@tailwind base;
|
||||
}
|
||||
@layer tailwind-components{
|
||||
|
||||
@layer tailwind-components {
|
||||
@tailwind components;
|
||||
}
|
||||
|
||||
@layer tailwind-utils {
|
||||
@tailwind utilities;
|
||||
}
|
||||
@@ -29,20 +32,7 @@ body {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#root
|
||||
> section
|
||||
> header
|
||||
> section
|
||||
> div
|
||||
> div
|
||||
> div
|
||||
> div.semi-navigation-header-list-outer
|
||||
> div.semi-navigation-list-wrapper
|
||||
> ul
|
||||
> div
|
||||
> a
|
||||
> li
|
||||
> span {
|
||||
#root>section>header>section>div>div>div>div.semi-navigation-header-list-outer>div.semi-navigation-list-wrapper>ul>div>a>li>span {
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
@@ -51,6 +41,7 @@ body {
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767px) {
|
||||
|
||||
/*.semi-navigation-sub-wrap .semi-navigation-sub-title, .semi-navigation-item {*/
|
||||
/* padding: 0 0;*/
|
||||
/*}*/
|
||||
@@ -68,64 +59,24 @@ body {
|
||||
overflow-x: auto;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
#root
|
||||
> section
|
||||
> header
|
||||
> section
|
||||
> div
|
||||
> div
|
||||
> div
|
||||
> div.semi-navigation-footer
|
||||
> div
|
||||
> a
|
||||
> li {
|
||||
|
||||
#root>section>header>section>div>div>div>div.semi-navigation-footer>div>a>li {
|
||||
padding: 0 0;
|
||||
}
|
||||
#root
|
||||
> section
|
||||
> header
|
||||
> section
|
||||
> div
|
||||
> div
|
||||
> div
|
||||
> div.semi-navigation-header-list-outer
|
||||
> div.semi-navigation-list-wrapper
|
||||
> ul
|
||||
> div
|
||||
> a
|
||||
> li {
|
||||
|
||||
#root>section>header>section>div>div>div>div.semi-navigation-header-list-outer>div.semi-navigation-list-wrapper>ul>div>a>li {
|
||||
padding: 0 5px;
|
||||
}
|
||||
#root
|
||||
> section
|
||||
> header
|
||||
> section
|
||||
> div
|
||||
> div
|
||||
> div
|
||||
> div.semi-navigation-footer
|
||||
> div:nth-child(1)
|
||||
> a
|
||||
> li {
|
||||
|
||||
#root>section>header>section>div>div>div>div.semi-navigation-footer>div:nth-child(1)>a>li {
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.semi-navigation-footer {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
.semi-table-tbody,
|
||||
.semi-table-row,
|
||||
.semi-table-row-cell {
|
||||
display: block !important;
|
||||
width: auto !important;
|
||||
padding: 2px !important;
|
||||
}
|
||||
.semi-table-row-cell {
|
||||
border-bottom: 0 !important;
|
||||
}
|
||||
.semi-table-tbody > .semi-table-row {
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.semi-space {
|
||||
/*display: block!important;*/
|
||||
display: flex;
|
||||
@@ -165,16 +116,6 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
.semi-table-tbody > .semi-table-row > .semi-table-row-cell {
|
||||
padding: 16px 14px;
|
||||
}
|
||||
|
||||
.channel-table {
|
||||
.semi-table-tbody > .semi-table-row > .semi-table-row-cell {
|
||||
padding: 16px 8px;
|
||||
}
|
||||
}
|
||||
|
||||
/*.semi-layout {*/
|
||||
/* height: 100%;*/
|
||||
/*}*/
|
||||
@@ -238,6 +179,7 @@ code {
|
||||
from {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateY(0);
|
||||
}
|
||||
@@ -332,4 +274,4 @@ code {
|
||||
|
||||
.semi-datepicker-range-input {
|
||||
border-radius: 9999px;
|
||||
}
|
||||
}
|
||||
@@ -1,20 +1,10 @@
|
||||
import React from 'react';
|
||||
import ChannelsTable from '../../components/ChannelsTable';
|
||||
import { Layout } from '@douyinfe/semi-ui';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
const File = () => {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<>
|
||||
<Layout>
|
||||
<Layout.Header>
|
||||
<h3>{t('管理渠道')}</h3>
|
||||
</Layout.Header>
|
||||
<Layout.Content>
|
||||
<ChannelsTable />
|
||||
</Layout.Content>
|
||||
</Layout>
|
||||
<ChannelsTable />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user