🎨 style: adjust table column widths for better layout

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.
2025-05-25 23:35:59 +08:00
parent 59de8e11ac
commit 46a67e09f1
7 changed files with 71 additions and 9 deletions
--- 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) {
          // 创建更多操作的下拉菜单项
--- 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) {
--- 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('无');
        }
--- 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 = [
--- 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('无');
--- 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 = [];
--- 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 <></>;