From 46a67e09f1005345bfa375a926e08f69e6a809fa Mon Sep 17 00:00:00 2001
From: "Apple\\Apple" <zeraturing@foxmail.com>
Date: Sun, 25 May 2025 23:35:59 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20style:=20adjust=20table=20column?=
 =?UTF-8?q?=20widths=20for=20better=20layout?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This commit adjusts the column widths in multiple table components to optimize the layout and improve visual consistency:

- TokensTable:
  - Reduce ID width from 80px to 50px
  - Reduce name width from 160px to 80px
  - Reduce group width from 200px to 180px
  - Reduce balance width from 200px to 120px
  - Reduce operation width from 400px to 350px

- RedemptionsTable:
  - Add fixed widths for all columns:
    - ID: 50px
    - Name: 120px
    - Status: 100px
    - Quota: 100px
    - Created time: 180px
    - User ID: 100px
    - Operation: 300px

- TaskLogsTable:
  - Add fixed widths for all columns:
    - Submit time: 180px
    - Finish time: 180px
    - Duration: 120px
    - Channel: 100px
    - Platform: 120px
    - Type: 120px
    - Task ID: 200px
    - Status: 120px
    - Progress: 160px
    - Fail reason: 160px

- UsersTable:
  - Add fixed widths for all columns:
    - ID: 50px
    - Username: 100px
    - Group: 100px
    - Stats info: 280px
    - Invite info: 250px
    - Role: 120px
    - Status: 100px
    - Operation: 150px

These adjustments ensure better space utilization and consistent column sizing across all table components.
---
 web/src/components/ChannelsTable.js    | 10 ++++++++++
 web/src/components/LogsTable.js        | 13 +++++++++++++
 web/src/components/MjLogsTable.js      | 25 ++++++++++++++++---------
 web/src/components/RedemptionsTable.js |  7 +++++++
 web/src/components/TaskLogsTable.js    | 10 ++++++++++
 web/src/components/TokensTable.js      |  7 +++++++
 web/src/components/UsersTable.js       |  8 ++++++++
 7 files changed, 71 insertions(+), 9 deletions(-)

diff --git a/web/src/components/ChannelsTable.js b/web/src/components/ChannelsTable.js
index 4b9ba9e8..ddf64631 100644
--- a/web/src/components/ChannelsTable.js
+++ b/web/src/components/ChannelsTable.js
@@ -245,16 +245,19 @@ const ChannelsTable = () => {
       key: COLUMN_KEYS.ID,
       title: t('ID'),
       dataIndex: 'id',
+      width: 50,
     },
     {
       key: COLUMN_KEYS.NAME,
       title: t('名称'),
       dataIndex: 'name',
+      width: 80,
     },
     {
       key: COLUMN_KEYS.GROUP,
       title: t('分组'),
       dataIndex: 'group',
+      width: 180,
       render: (text, record, index) => (
         <div>
           <Space spacing={2}>
@@ -274,6 +277,7 @@ const ChannelsTable = () => {
       key: COLUMN_KEYS.TYPE,
       title: t('类型'),
       dataIndex: 'type',
+      width: 120,
       render: (text, record, index) => {
         if (record.children === undefined) {
           return <>{renderType(text)}</>;
@@ -286,6 +290,7 @@ const ChannelsTable = () => {
       key: COLUMN_KEYS.STATUS,
       title: t('状态'),
       dataIndex: 'status',
+      width: 120,
       render: (text, record, index) => {
         if (text === 3) {
           if (record.other_info === '') {
@@ -312,6 +317,7 @@ const ChannelsTable = () => {
       key: COLUMN_KEYS.RESPONSE_TIME,
       title: t('响应时间'),
       dataIndex: 'response_time',
+      width: 120,
       render: (text, record, index) => (
         <div>{renderResponseTime(text)}</div>
       ),
@@ -320,6 +326,7 @@ const ChannelsTable = () => {
       key: COLUMN_KEYS.BALANCE,
       title: t('已用/剩余'),
       dataIndex: 'expired_time',
+      width: 120,
       render: (text, record, index) => {
         if (record.children === undefined) {
           return (
@@ -359,6 +366,7 @@ const ChannelsTable = () => {
       key: COLUMN_KEYS.PRIORITY,
       title: t('优先级'),
       dataIndex: 'priority',
+      width: 100,
       render: (text, record, index) => {
         if (record.children === undefined) {
           return (
@@ -411,6 +419,7 @@ const ChannelsTable = () => {
       key: COLUMN_KEYS.WEIGHT,
       title: t('权重'),
       dataIndex: 'weight',
+      width: 100,
       render: (text, record, index) => {
         if (record.children === undefined) {
           return (
@@ -463,6 +472,7 @@ const ChannelsTable = () => {
       key: COLUMN_KEYS.OPERATE,
       title: '',
       dataIndex: 'operate',
+      width: 350,
       render: (text, record, index) => {
         if (record.children === undefined) {
           // 创建更多操作的下拉菜单项
diff --git a/web/src/components/LogsTable.js b/web/src/components/LogsTable.js
index b7d12a0c..49c6bb5d 100644
--- a/web/src/components/LogsTable.js
+++ b/web/src/components/LogsTable.js
@@ -372,11 +372,13 @@ const LogsTable = () => {
       key: COLUMN_KEYS.TIME,
       title: t('时间'),
       dataIndex: 'timestamp2string',
+      width: 180,
     },
     {
       key: COLUMN_KEYS.CHANNEL,
       title: t('渠道'),
       dataIndex: 'channel',
+      width: 80,
       className: isAdmin() ? 'tableShow' : 'tableHiddle',
       render: (text, record, index) => {
         return isAdminUser ? (
@@ -407,6 +409,7 @@ const LogsTable = () => {
       key: COLUMN_KEYS.USERNAME,
       title: t('用户'),
       dataIndex: 'username',
+      width: 150,
       className: isAdmin() ? 'tableShow' : 'tableHiddle',
       render: (text, record, index) => {
         return isAdminUser ? (
@@ -433,6 +436,7 @@ const LogsTable = () => {
       key: COLUMN_KEYS.TOKEN,
       title: t('令牌'),
       dataIndex: 'token_name',
+      width: 160,
       render: (text, record, index) => {
         return record.type === 0 || record.type === 2 || record.type === 5 ? (
           <div>
@@ -458,6 +462,7 @@ const LogsTable = () => {
       key: COLUMN_KEYS.GROUP,
       title: t('分组'),
       dataIndex: 'group',
+      width: 120,
       render: (text, record, index) => {
         if (record.type === 0 || record.type === 2 || record.type === 5) {
           if (record.group) {
@@ -490,6 +495,7 @@ const LogsTable = () => {
       key: COLUMN_KEYS.TYPE,
       title: t('类型'),
       dataIndex: 'type',
+      width: 100,
       render: (text, record, index) => {
         return <>{renderType(text)}</>;
       },
@@ -498,6 +504,7 @@ const LogsTable = () => {
       key: COLUMN_KEYS.MODEL,
       title: t('模型'),
       dataIndex: 'model_name',
+      width: 160,
       render: (text, record, index) => {
         return record.type === 0 || record.type === 2 || record.type === 5 ? (
           <>{renderModelName(record)}</>
@@ -510,6 +517,7 @@ const LogsTable = () => {
       key: COLUMN_KEYS.USE_TIME,
       title: t('用时/首字'),
       dataIndex: 'use_time',
+      width: 160,
       render: (text, record, index) => {
         if (record.is_stream) {
           let other = getLogOther(record.other);
@@ -538,6 +546,7 @@ const LogsTable = () => {
       key: COLUMN_KEYS.PROMPT,
       title: t('提示'),
       dataIndex: 'prompt_tokens',
+      width: 100,
       render: (text, record, index) => {
         return record.type === 0 || record.type === 2 || record.type === 5 ? (
           <>{<span> {text} </span>}</>
@@ -550,6 +559,7 @@ const LogsTable = () => {
       key: COLUMN_KEYS.COMPLETION,
       title: t('补全'),
       dataIndex: 'completion_tokens',
+      width: 100,
       render: (text, record, index) => {
         return parseInt(text) > 0 &&
           (record.type === 0 || record.type === 2 || record.type === 5) ? (
@@ -563,6 +573,7 @@ const LogsTable = () => {
       key: COLUMN_KEYS.COST,
       title: t('花费'),
       dataIndex: 'quota',
+      width: 120,
       render: (text, record, index) => {
         return record.type === 0 || record.type === 2 || record.type === 5 ? (
           <>{renderQuota(text, 6)}</>
@@ -575,6 +586,7 @@ const LogsTable = () => {
       key: COLUMN_KEYS.RETRY,
       title: t('重试'),
       dataIndex: 'retry',
+      width: 160,
       className: isAdmin() ? 'tableShow' : 'tableHiddle',
       render: (text, record, index) => {
         let content = t('渠道') + `：${record.channel}`;
@@ -603,6 +615,7 @@ const LogsTable = () => {
       key: COLUMN_KEYS.DETAILS,
       title: t('详情'),
       dataIndex: 'content',
+      width: 200,
       render: (text, record, index) => {
         let other = getLogOther(record.other);
         if (other == null || record.type !== 2) {
diff --git a/web/src/components/MjLogsTable.js b/web/src/components/MjLogsTable.js
index f44f712f..08c47e7d 100644
--- a/web/src/components/MjLogsTable.js
+++ b/web/src/components/MjLogsTable.js
@@ -374,6 +374,7 @@ const LogsTable = () => {
       key: COLUMN_KEYS.SUBMIT_TIME,
       title: t('提交时间'),
       dataIndex: 'submit_time',
+      width: 180,
       render: (text, record, index) => {
         return <div>{renderTimestamp(text / 1000)}</div>;
       },
@@ -381,9 +382,9 @@ const LogsTable = () => {
     {
       key: COLUMN_KEYS.DURATION,
       title: t('花费时间'),
-      dataIndex: 'finish_time', // 以finish_time作为dataIndex
+      dataIndex: 'finish_time',
+      width: 120,
       render: (finish, record) => {
-        // 假设record.start_time是存在的，并且finish是完成时间的时间戳
         return renderDuration(record.submit_time, finish);
       },
     },
@@ -391,6 +392,7 @@ const LogsTable = () => {
       key: COLUMN_KEYS.CHANNEL,
       title: t('渠道'),
       dataIndex: 'channel_id',
+      width: 100,
       className: isAdmin() ? 'tableShow' : 'tableHiddle',
       render: (text, record, index) => {
         return isAdminUser ? (
@@ -400,7 +402,7 @@ const LogsTable = () => {
               size='large'
               shape='circle'
               onClick={() => {
-                copyText(text); // 假设copyText是用于文本复制的函数
+                copyText(text);
               }}
             >
               {' '}
@@ -416,6 +418,7 @@ const LogsTable = () => {
       key: COLUMN_KEYS.TYPE,
       title: t('类型'),
       dataIndex: 'action',
+      width: 120,
       render: (text, record, index) => {
         return <div>{renderType(text)}</div>;
       },
@@ -424,6 +427,7 @@ const LogsTable = () => {
       key: COLUMN_KEYS.TASK_ID,
       title: t('任务ID'),
       dataIndex: 'mj_id',
+      width: 200,
       render: (text, record, index) => {
         return <div>{text}</div>;
       },
@@ -432,6 +436,7 @@ const LogsTable = () => {
       key: COLUMN_KEYS.SUBMIT_RESULT,
       title: t('提交结果'),
       dataIndex: 'code',
+      width: 120,
       className: isAdmin() ? 'tableShow' : 'tableHiddle',
       render: (text, record, index) => {
         return isAdminUser ? <div>{renderCode(text)}</div> : <></>;
@@ -441,6 +446,7 @@ const LogsTable = () => {
       key: COLUMN_KEYS.TASK_STATUS,
       title: t('任务状态'),
       dataIndex: 'status',
+      width: 120,
       className: isAdmin() ? 'tableShow' : 'tableHiddle',
       render: (text, record, index) => {
         return <div>{renderStatus(text)}</div>;
@@ -450,11 +456,11 @@ const LogsTable = () => {
       key: COLUMN_KEYS.PROGRESS,
       title: t('进度'),
       dataIndex: 'progress',
+      width: 160,
       render: (text, record, index) => {
         return (
           <div>
             {
-              // 转换例如100%为数字100，如果text未定义，返回0
               <Progress
                 stroke={
                   record.status === 'FAILURE'
@@ -474,6 +480,7 @@ const LogsTable = () => {
       key: COLUMN_KEYS.IMAGE,
       title: t('结果图片'),
       dataIndex: 'image_url',
+      width: 120,
       render: (text, record, index) => {
         if (!text) {
           return t('无');
@@ -481,8 +488,8 @@ const LogsTable = () => {
         return (
           <Button
             onClick={() => {
-              setModalImageUrl(text); // 更新图片URL状态
-              setIsModalOpenurl(true); // 打开模态框
+              setModalImageUrl(text);
+              setIsModalOpenurl(true);
             }}
           >
             {t('查看图片')}
@@ -494,8 +501,8 @@ const LogsTable = () => {
       key: COLUMN_KEYS.PROMPT,
       title: 'Prompt',
       dataIndex: 'prompt',
+      width: 200,
       render: (text, record, index) => {
-        // 如果text未定义，返回替代文本，例如空字符串''或其他
         if (!text) {
           return t('无');
         }
@@ -518,8 +525,8 @@ const LogsTable = () => {
       key: COLUMN_KEYS.PROMPT_EN,
       title: 'PromptEn',
       dataIndex: 'prompt_en',
+      width: 200,
       render: (text, record, index) => {
-        // 如果text未定义，返回替代文本，例如空字符串''或其他
         if (!text) {
           return t('无');
         }
@@ -542,8 +549,8 @@ const LogsTable = () => {
       key: COLUMN_KEYS.FAIL_REASON,
       title: t('失败原因'),
       dataIndex: 'fail_reason',
+      width: 160,
       render: (text, record, index) => {
-        // 如果text未定义，返回替代文本，例如空字符串''或其他
         if (!text) {
           return t('无');
         }
diff --git a/web/src/components/RedemptionsTable.js b/web/src/components/RedemptionsTable.js
index 08b7f199..f9fd344a 100644
--- a/web/src/components/RedemptionsTable.js
+++ b/web/src/components/RedemptionsTable.js
@@ -78,15 +78,18 @@ const RedemptionsTable = () => {
     {
       title: t('ID'),
       dataIndex: 'id',
+      width: 50,
     },
     {
       title: t('名称'),
       dataIndex: 'name',
+      width: 120,
     },
     {
       title: t('状态'),
       dataIndex: 'status',
       key: 'status',
+      width: 100,
       render: (text, record, index) => {
         return <div>{renderStatus(text)}</div>;
       },
@@ -94,6 +97,7 @@ const RedemptionsTable = () => {
     {
       title: t('额度'),
       dataIndex: 'quota',
+      width: 100,
       render: (text, record, index) => {
         return <div>{renderQuota(parseInt(text))}</div>;
       },
@@ -101,6 +105,7 @@ const RedemptionsTable = () => {
     {
       title: t('创建时间'),
       dataIndex: 'created_time',
+      width: 180,
       render: (text, record, index) => {
         return <div>{renderTimestamp(text)}</div>;
       },
@@ -108,6 +113,7 @@ const RedemptionsTable = () => {
     {
       title: t('兑换人ID'),
       dataIndex: 'used_user_id',
+      width: 100,
       render: (text, record, index) => {
         return <div>{text === 0 ? t('无') : text}</div>;
       },
@@ -115,6 +121,7 @@ const RedemptionsTable = () => {
     {
       title: '',
       dataIndex: 'operate',
+      width: 300,
       render: (text, record, index) => {
         // 创建更多操作的下拉菜单项
         const moreMenuItems = [
diff --git a/web/src/components/TaskLogsTable.js b/web/src/components/TaskLogsTable.js
index e9de9f0f..c4a8414b 100644
--- a/web/src/components/TaskLogsTable.js
+++ b/web/src/components/TaskLogsTable.js
@@ -289,6 +289,7 @@ const LogsTable = () => {
       key: COLUMN_KEYS.SUBMIT_TIME,
       title: t('提交时间'),
       dataIndex: 'submit_time',
+      width: 180,
       render: (text, record, index) => {
         return <div>{text ? renderTimestamp(text) : '-'}</div>;
       },
@@ -297,6 +298,7 @@ const LogsTable = () => {
       key: COLUMN_KEYS.FINISH_TIME,
       title: t('结束时间'),
       dataIndex: 'finish_time',
+      width: 180,
       render: (text, record, index) => {
         return <div>{text ? renderTimestamp(text) : '-'}</div>;
       },
@@ -305,6 +307,7 @@ const LogsTable = () => {
       key: COLUMN_KEYS.DURATION,
       title: t('花费时间'),
       dataIndex: 'finish_time',
+      width: 120,
       render: (finish, record) => {
         return <>{finish ? renderDuration(record.submit_time, finish) : '-'}</>;
       },
@@ -313,6 +316,7 @@ const LogsTable = () => {
       key: COLUMN_KEYS.CHANNEL,
       title: t('渠道'),
       dataIndex: 'channel_id',
+      width: 100,
       className: isAdminUser ? 'tableShow' : 'tableHiddle',
       render: (text, record, index) => {
         return isAdminUser ? (
@@ -337,6 +341,7 @@ const LogsTable = () => {
       key: COLUMN_KEYS.PLATFORM,
       title: t('平台'),
       dataIndex: 'platform',
+      width: 120,
       render: (text, record, index) => {
         return <div>{renderPlatform(text)}</div>;
       },
@@ -345,6 +350,7 @@ const LogsTable = () => {
       key: COLUMN_KEYS.TYPE,
       title: t('类型'),
       dataIndex: 'action',
+      width: 120,
       render: (text, record, index) => {
         return <div>{renderType(text)}</div>;
       },
@@ -353,6 +359,7 @@ const LogsTable = () => {
       key: COLUMN_KEYS.TASK_ID,
       title: t('任务ID'),
       dataIndex: 'task_id',
+      width: 200,
       render: (text, record, index) => {
         return (
           <Typography.Text
@@ -371,6 +378,7 @@ const LogsTable = () => {
       key: COLUMN_KEYS.TASK_STATUS,
       title: t('任务状态'),
       dataIndex: 'status',
+      width: 120,
       render: (text, record, index) => {
         return <div>{renderStatus(text)}</div>;
       },
@@ -379,6 +387,7 @@ const LogsTable = () => {
       key: COLUMN_KEYS.PROGRESS,
       title: t('进度'),
       dataIndex: 'progress',
+      width: 160,
       render: (text, record, index) => {
         return (
           <div>
@@ -406,6 +415,7 @@ const LogsTable = () => {
       key: COLUMN_KEYS.FAIL_REASON,
       title: t('失败原因'),
       dataIndex: 'fail_reason',
+      width: 160,
       render: (text, record, index) => {
         if (!text) {
           return t('无');
diff --git a/web/src/components/TokensTable.js b/web/src/components/TokensTable.js
index 8c801fc7..2a6fd857 100644
--- a/web/src/components/TokensTable.js
+++ b/web/src/components/TokensTable.js
@@ -98,11 +98,13 @@ const TokensTable = () => {
     {
       title: t('名称'),
       dataIndex: 'name',
+      width: 180,
     },
     {
       title: t('状态'),
       dataIndex: 'status',
       key: 'status',
+      width: 200,
       render: (text, record, index) => {
         return (
           <div>
@@ -117,6 +119,7 @@ const TokensTable = () => {
     {
       title: t('已用额度'),
       dataIndex: 'used_quota',
+      width: 120,
       render: (text, record, index) => {
         return <div>{renderQuota(parseInt(text))}</div>;
       },
@@ -124,6 +127,7 @@ const TokensTable = () => {
     {
       title: t('剩余额度'),
       dataIndex: 'remain_quota',
+      width: 120,
       render: (text, record, index) => {
         return (
           <div>
@@ -143,6 +147,7 @@ const TokensTable = () => {
     {
       title: t('创建时间'),
       dataIndex: 'created_time',
+      width: 180,
       render: (text, record, index) => {
         return <div>{renderTimestamp(text)}</div>;
       },
@@ -150,6 +155,7 @@ const TokensTable = () => {
     {
       title: t('过期时间'),
       dataIndex: 'expired_time',
+      width: 180,
       render: (text, record, index) => {
         return (
           <div>
@@ -161,6 +167,7 @@ const TokensTable = () => {
     {
       title: '',
       dataIndex: 'operate',
+      width: 320,
       render: (text, record, index) => {
         let chats = localStorage.getItem('chats');
         let chatsArray = [];
diff --git a/web/src/components/UsersTable.js b/web/src/components/UsersTable.js
index 25447a2e..e5085212 100644
--- a/web/src/components/UsersTable.js
+++ b/web/src/components/UsersTable.js
@@ -88,14 +88,17 @@ const UsersTable = () => {
     {
       title: 'ID',
       dataIndex: 'id',
+      width: 50,
     },
     {
       title: t('用户名'),
       dataIndex: 'username',
+      width: 100,
     },
     {
       title: t('分组'),
       dataIndex: 'group',
+      width: 100,
       render: (text, record, index) => {
         return <div>{renderGroup(text)}</div>;
       },
@@ -103,6 +106,7 @@ const UsersTable = () => {
     {
       title: t('统计信息'),
       dataIndex: 'info',
+      width: 280,
       render: (text, record, index) => {
         return (
           <div>
@@ -124,6 +128,7 @@ const UsersTable = () => {
     {
       title: t('邀请信息'),
       dataIndex: 'invite',
+      width: 250,
       render: (text, record, index) => {
         return (
           <div>
@@ -145,6 +150,7 @@ const UsersTable = () => {
     {
       title: t('角色'),
       dataIndex: 'role',
+      width: 120,
       render: (text, record, index) => {
         return <div>{renderRole(text)}</div>;
       },
@@ -152,6 +158,7 @@ const UsersTable = () => {
     {
       title: t('状态'),
       dataIndex: 'status',
+      width: 100,
       render: (text, record, index) => {
         return (
           <div>
@@ -167,6 +174,7 @@ const UsersTable = () => {
     {
       title: '',
       dataIndex: 'operate',
+      width: 150,
       render: (text, record, index) => {
         if (record.DeletedAt !== null) {
           return <></>;