🤯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

web/src/components/LogsTable.js

@@ -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

web/src/components/MjLogsTable.js

@@ -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 (

web/src/components/TaskLogsTable.js

@@ -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) {

web/src/i18n/locales/en.json

@@ -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"
 }

web/src/index.css

@@ -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;
-}
+}

web/src/pages/Channel/index.js

@@ -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 />
     </>
   );
 };