From 2100d32babac1303a65c7dfb5e696ecfc6d13756 Mon Sep 17 00:00:00 2001
From: "Apple\\Apple" <zeraturing@foxmail.com>
Date: Sat, 7 Jun 2025 02:45:07 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=8C=20feat(table):=20add=20fixed=20rig?=
 =?UTF-8?q?ht=20column=20to=20all=20data=20tables?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fix the last column (operation/detail columns) to the right side across all table components to improve user experience and ensure important actions remain visible during horizontal scrolling.

Changes:
- ChannelsTable.js: Fix operation column to right
- UsersTable.js: Fix operation column to right
- TokensTable.js: Fix operation column to right
- RedemptionsTable.js: Fix operation column to right
- LogsTable.js: Fix details column to right
- MjLogsTable.js: Fix fail reason column to right
- TaskLogsTable.js: Fix fail reason column to right

All tables now have their rightmost column fixed using Semi Design's `fixed: 'right'` property, ensuring critical information and actions are always accessible regardless of table scroll position.
---
 web/src/components/table/ChannelsTable.js    | 84 +++++++++-----------
 web/src/components/table/LogsTable.js        | 73 ++++++++---------
 web/src/components/table/MjLogsTable.js      | 68 +++++++---------
 web/src/components/table/RedemptionsTable.js | 77 +++++++++---------
 web/src/components/table/TaskLogsTable.js    | 66 +++++++--------
 web/src/components/table/TokensTable.js      | 67 ++++++++--------
 web/src/components/table/UsersTable.js       | 64 +++++++--------
 7 files changed, 230 insertions(+), 269 deletions(-)

diff --git a/web/src/components/table/ChannelsTable.js b/web/src/components/table/ChannelsTable.js
index e1c89acf..00d20339 100644
--- a/web/src/components/table/ChannelsTable.js
+++ b/web/src/components/table/ChannelsTable.js
@@ -243,19 +243,16 @@ 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}>
@@ -275,7 +272,6 @@ const ChannelsTable = () => {
       key: COLUMN_KEYS.TYPE,
       title: t('类型'),
       dataIndex: 'type',
-      width: 120,
       render: (text, record, index) => {
         if (record.children === undefined) {
           return <>{renderType(text)}</>;
@@ -288,7 +284,6 @@ const ChannelsTable = () => {
       key: COLUMN_KEYS.STATUS,
       title: t('状态'),
       dataIndex: 'status',
-      width: 120,
       render: (text, record, index) => {
         if (text === 3) {
           if (record.other_info === '') {
@@ -315,7 +310,6 @@ const ChannelsTable = () => {
       key: COLUMN_KEYS.RESPONSE_TIME,
       title: t('响应时间'),
       dataIndex: 'response_time',
-      width: 120,
       render: (text, record, index) => (
         <div>{renderResponseTime(text)}</div>
       ),
@@ -324,7 +318,6 @@ const ChannelsTable = () => {
       key: COLUMN_KEYS.BALANCE,
       title: t('已用/剩余'),
       dataIndex: 'expired_time',
-      width: 120,
       render: (text, record, index) => {
         if (record.children === undefined) {
           return (
@@ -364,7 +357,6 @@ const ChannelsTable = () => {
       key: COLUMN_KEYS.PRIORITY,
       title: t('优先级'),
       dataIndex: 'priority',
-      width: 100,
       render: (text, record, index) => {
         if (record.children === undefined) {
           return (
@@ -417,7 +409,6 @@ const ChannelsTable = () => {
       key: COLUMN_KEYS.WEIGHT,
       title: t('权重'),
       dataIndex: 'weight',
-      width: 100,
       render: (text, record, index) => {
         if (record.children === undefined) {
           return (
@@ -470,7 +461,7 @@ const ChannelsTable = () => {
       key: COLUMN_KEYS.OPERATE,
       title: '',
       dataIndex: 'operate',
-      width: 350,
+      fixed: 'right',
       render: (text, record, index) => {
         if (record.children === undefined) {
           // 创建更多操作的下拉菜单项
@@ -1636,45 +1627,48 @@ const ChannelsTable = () => {
       />
 
       <Card
-        className="!rounded-2xl overflow-hidden"
+        className="!rounded-2xl"
         title={renderHeader()}
         shadows='always'
         bordered={false}
       >
-        <Table
-          columns={getVisibleColumns()}
-          dataSource={pageData}
-          pagination={{
-            currentPage: activePage,
-            pageSize: pageSize,
-            total: channelCount,
-            pageSizeOpts: [10, 20, 50, 100],
-            showSizeChanger: true,
-            formatPageText: (page) => t('第 {{start}} - {{end}} 条，共 {{total}} 条', {
-              start: page.currentStart,
-              end: page.currentEnd,
-              total: channels.length,
-            }),
-            onPageSizeChange: (size) => {
-              handlePageSizeChange(size);
-            },
-            onPageChange: handlePageChange,
-          }}
-          expandAllRows={false}
-          onRow={handleRow}
-          rowSelection={
-            enableBatchDelete
-              ? {
-                onChange: (selectedRowKeys, selectedRows) => {
-                  setSelectedChannels(selectedRows);
-                },
-              }
-              : null
-          }
-          className="rounded-xl overflow-hidden"
-          size="middle"
-          loading={loading}
-        />
+        <div style={{ overflow: 'auto' }}>
+          <Table
+            columns={getVisibleColumns()}
+            dataSource={pageData}
+            scroll={{ x: 'max-content' }}
+            pagination={{
+              currentPage: activePage,
+              pageSize: pageSize,
+              total: channelCount,
+              pageSizeOpts: [10, 20, 50, 100],
+              showSizeChanger: true,
+              formatPageText: (page) => t('第 {{start}} - {{end}} 条，共 {{total}} 条', {
+                start: page.currentStart,
+                end: page.currentEnd,
+                total: channels.length,
+              }),
+              onPageSizeChange: (size) => {
+                handlePageSizeChange(size);
+              },
+              onPageChange: handlePageChange,
+            }}
+            expandAllRows={false}
+            onRow={handleRow}
+            rowSelection={
+              enableBatchDelete
+                ? {
+                  onChange: (selectedRowKeys, selectedRows) => {
+                    setSelectedChannels(selectedRows);
+                  },
+                }
+                : null
+            }
+            className="rounded-xl overflow-hidden"
+            size="middle"
+            loading={loading}
+          />
+        </div>
       </Card>
 
       {/* 批量设置标签模态框 */}
diff --git a/web/src/components/table/LogsTable.js b/web/src/components/table/LogsTable.js
index aedee1ac..793f324c 100644
--- a/web/src/components/table/LogsTable.js
+++ b/web/src/components/table/LogsTable.js
@@ -345,13 +345,11 @@ 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 ? (
@@ -382,7 +380,6 @@ const LogsTable = () => {
       key: COLUMN_KEYS.USERNAME,
       title: t('用户'),
       dataIndex: 'username',
-      width: 150,
       className: isAdmin() ? 'tableShow' : 'tableHiddle',
       render: (text, record, index) => {
         return isAdminUser ? (
@@ -409,7 +406,6 @@ 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>
@@ -435,7 +431,6 @@ 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) {
@@ -468,7 +463,6 @@ const LogsTable = () => {
       key: COLUMN_KEYS.TYPE,
       title: t('类型'),
       dataIndex: 'type',
-      width: 100,
       render: (text, record, index) => {
         return <>{renderType(text)}</>;
       },
@@ -477,7 +471,6 @@ 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)}</>
@@ -490,7 +483,6 @@ 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);
@@ -519,7 +511,6 @@ 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>}</>
@@ -532,7 +523,6 @@ 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) ? (
@@ -546,7 +536,6 @@ 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)}</>
@@ -559,7 +548,6 @@ 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}`;
@@ -588,7 +576,7 @@ const LogsTable = () => {
       key: COLUMN_KEYS.DETAILS,
       title: t('详情'),
       dataIndex: 'content',
-      width: 200,
+      fixed: 'right',
       render: (text, record, index) => {
         let other = getLogOther(record.other);
         if (other == null || record.type !== 2) {
@@ -1100,7 +1088,7 @@ const LogsTable = () => {
     <>
       {renderColumnSelector()}
       <Card
-        className="!rounded-2xl overflow-hidden mb-4"
+        className="!rounded-2xl mb-4"
         title={
           <div className="flex flex-col w-full">
             <Spin spinning={loadingStat}>
@@ -1262,33 +1250,36 @@ const LogsTable = () => {
         shadows='always'
         bordered={false}
       >
-        <Table
-          columns={getVisibleColumns()}
-          expandedRowRender={expandRowRender}
-          expandRowByClick={true}
-          dataSource={logs}
-          rowKey='key'
-          loading={loading}
-          className="rounded-xl overflow-hidden"
-          size="middle"
-          pagination={{
-            formatPageText: (page) =>
-              t('第 {{start}} - {{end}} 条，共 {{total}} 条', {
-                start: page.currentStart,
-                end: page.currentEnd,
-                total: logCount,
-              }),
-            currentPage: activePage,
-            pageSize: pageSize,
-            total: logCount,
-            pageSizeOptions: [10, 20, 50, 100],
-            showSizeChanger: true,
-            onPageSizeChange: (size) => {
-              handlePageSizeChange(size);
-            },
-            onPageChange: handlePageChange,
-          }}
-        />
+        <div style={{ overflow: 'auto' }}>
+          <Table
+            columns={getVisibleColumns()}
+            expandedRowRender={expandRowRender}
+            expandRowByClick={true}
+            dataSource={logs}
+            rowKey='key'
+            loading={loading}
+            scroll={{ x: 'max-content' }}
+            className="rounded-xl overflow-hidden"
+            size="middle"
+            pagination={{
+              formatPageText: (page) =>
+                t('第 {{start}} - {{end}} 条，共 {{total}} 条', {
+                  start: page.currentStart,
+                  end: page.currentEnd,
+                  total: logCount,
+                }),
+              currentPage: activePage,
+              pageSize: pageSize,
+              total: logCount,
+              pageSizeOptions: [10, 20, 50, 100],
+              showSizeChanger: true,
+              onPageSizeChange: (size) => {
+                handlePageSizeChange(size);
+              },
+              onPageChange: handlePageChange,
+            }}
+          />
+        </div>
       </Card>
     </>
   );
diff --git a/web/src/components/table/MjLogsTable.js b/web/src/components/table/MjLogsTable.js
index b0890533..d6898cb0 100644
--- a/web/src/components/table/MjLogsTable.js
+++ b/web/src/components/table/MjLogsTable.js
@@ -374,7 +374,6 @@ const LogsTable = () => {
       key: COLUMN_KEYS.SUBMIT_TIME,
       title: t('提交时间'),
       dataIndex: 'submit_time',
-      width: 180,
       render: (text, record, index) => {
         return <div>{renderTimestamp(text / 1000)}</div>;
       },
@@ -383,7 +382,6 @@ const LogsTable = () => {
       key: COLUMN_KEYS.DURATION,
       title: t('花费时间'),
       dataIndex: 'finish_time',
-      width: 120,
       render: (finish, record) => {
         return renderDuration(record.submit_time, finish);
       },
@@ -392,7 +390,6 @@ const LogsTable = () => {
       key: COLUMN_KEYS.CHANNEL,
       title: t('渠道'),
       dataIndex: 'channel_id',
-      width: 100,
       className: isAdmin() ? 'tableShow' : 'tableHiddle',
       render: (text, record, index) => {
         return isAdminUser ? (
@@ -418,7 +415,6 @@ const LogsTable = () => {
       key: COLUMN_KEYS.TYPE,
       title: t('类型'),
       dataIndex: 'action',
-      width: 120,
       render: (text, record, index) => {
         return <div>{renderType(text)}</div>;
       },
@@ -427,7 +423,6 @@ const LogsTable = () => {
       key: COLUMN_KEYS.TASK_ID,
       title: t('任务ID'),
       dataIndex: 'mj_id',
-      width: 200,
       render: (text, record, index) => {
         return <div>{text}</div>;
       },
@@ -436,7 +431,6 @@ 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> : <></>;
@@ -446,7 +440,6 @@ 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>;
@@ -456,7 +449,6 @@ const LogsTable = () => {
       key: COLUMN_KEYS.PROGRESS,
       title: t('进度'),
       dataIndex: 'progress',
-      width: 160,
       render: (text, record, index) => {
         return (
           <div>
@@ -480,7 +472,6 @@ const LogsTable = () => {
       key: COLUMN_KEYS.IMAGE,
       title: t('结果图片'),
       dataIndex: 'image_url',
-      width: 120,
       render: (text, record, index) => {
         if (!text) {
           return t('无');
@@ -501,7 +492,6 @@ const LogsTable = () => {
       key: COLUMN_KEYS.PROMPT,
       title: 'Prompt',
       dataIndex: 'prompt',
-      width: 200,
       render: (text, record, index) => {
         if (!text) {
           return t('无');
@@ -525,7 +515,6 @@ const LogsTable = () => {
       key: COLUMN_KEYS.PROMPT_EN,
       title: 'PromptEn',
       dataIndex: 'prompt_en',
-      width: 200,
       render: (text, record, index) => {
         if (!text) {
           return t('无');
@@ -549,7 +538,7 @@ const LogsTable = () => {
       key: COLUMN_KEYS.FAIL_REASON,
       title: t('失败原因'),
       dataIndex: 'fail_reason',
-      width: 160,
+      fixed: 'right',
       render: (text, record, index) => {
         if (!text) {
           return t('无');
@@ -771,7 +760,7 @@ const LogsTable = () => {
       {renderColumnSelector()}
       <Layout>
         <Card
-          className="!rounded-2xl overflow-hidden mb-4"
+          className="!rounded-2xl mb-4"
           title={
             <div className="flex flex-col w-full">
               <div className="flex flex-col md:flex-row justify-between items-center">
@@ -867,31 +856,34 @@ const LogsTable = () => {
           shadows='always'
           bordered={false}
         >
-          <Table
-            columns={getVisibleColumns()}
-            dataSource={pageData}
-            rowKey='key'
-            loading={loading}
-            className="rounded-xl overflow-hidden"
-            size="middle"
-            pagination={{
-              formatPageText: (page) =>
-                t('第 {{start}} - {{end}} 条，共 {{total}} 条', {
-                  start: page.currentStart,
-                  end: page.currentEnd,
-                  total: logCount,
-                }),
-              currentPage: activePage,
-              pageSize: pageSize,
-              total: logCount,
-              pageSizeOptions: [10, 20, 50, 100],
-              showSizeChanger: true,
-              onPageSizeChange: (size) => {
-                handlePageSizeChange(size);
-              },
-              onPageChange: handlePageChange,
-            }}
-          />
+          <div style={{ overflow: 'auto' }}>
+            <Table
+              columns={getVisibleColumns()}
+              dataSource={pageData}
+              rowKey='key'
+              loading={loading}
+              scroll={{ x: 'max-content' }}
+              className="rounded-xl overflow-hidden"
+              size="middle"
+              pagination={{
+                formatPageText: (page) =>
+                  t('第 {{start}} - {{end}} 条，共 {{total}} 条', {
+                    start: page.currentStart,
+                    end: page.currentEnd,
+                    total: logCount,
+                  }),
+                currentPage: activePage,
+                pageSize: pageSize,
+                total: logCount,
+                pageSizeOptions: [10, 20, 50, 100],
+                showSizeChanger: true,
+                onPageSizeChange: (size) => {
+                  handlePageSizeChange(size);
+                },
+                onPageChange: handlePageChange,
+              }}
+            />
+          </div>
         </Card>
 
         <Modal
diff --git a/web/src/components/table/RedemptionsTable.js b/web/src/components/table/RedemptionsTable.js
index 61369f75..66d7a2d8 100644
--- a/web/src/components/table/RedemptionsTable.js
+++ b/web/src/components/table/RedemptionsTable.js
@@ -78,18 +78,15 @@ 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>;
       },
@@ -97,7 +94,6 @@ const RedemptionsTable = () => {
     {
       title: t('额度'),
       dataIndex: 'quota',
-      width: 100,
       render: (text, record, index) => {
         return <div>{renderQuota(parseInt(text))}</div>;
       },
@@ -105,7 +101,6 @@ const RedemptionsTable = () => {
     {
       title: t('创建时间'),
       dataIndex: 'created_time',
-      width: 180,
       render: (text, record, index) => {
         return <div>{renderTimestamp(text)}</div>;
       },
@@ -113,7 +108,6 @@ const RedemptionsTable = () => {
     {
       title: t('兑换人ID'),
       dataIndex: 'used_user_id',
-      width: 100,
       render: (text, record, index) => {
         return <div>{text === 0 ? t('无') : text}</div>;
       },
@@ -121,7 +115,7 @@ const RedemptionsTable = () => {
     {
       title: '',
       dataIndex: 'operate',
-      width: 300,
+      fixed: 'right',
       render: (text, record, index) => {
         // 创建更多操作的下拉菜单项
         const moreMenuItems = [
@@ -499,43 +493,46 @@ const RedemptionsTable = () => {
       ></EditRedemption>
 
       <Card
-        className="!rounded-2xl overflow-hidden"
+        className="!rounded-2xl"
         title={renderHeader()}
         shadows='always'
         bordered={false}
       >
-        <Table
-          columns={columns}
-          dataSource={pageData}
-          pagination={{
-            currentPage: activePage,
-            pageSize: pageSize,
-            total: tokenCount,
-            showSizeChanger: true,
-            pageSizeOptions: [10, 20, 50, 100],
-            formatPageText: (page) =>
-              t('第 {{start}} - {{end}} 条，共 {{total}} 条', {
-                start: page.currentStart,
-                end: page.currentEnd,
-                total: tokenCount,
-              }),
-            onPageSizeChange: (size) => {
-              setPageSize(size);
-              setActivePage(1);
-              if (searchKeyword === '') {
-                loadRedemptions(1, size).then();
-              } else {
-                searchRedemptions(searchKeyword, 1, size).then();
-              }
-            },
-            onPageChange: handlePageChange,
-          }}
-          loading={loading}
-          rowSelection={rowSelection}
-          onRow={handleRow}
-          className="rounded-xl overflow-hidden"
-          size="middle"
-        ></Table>
+        <div style={{ overflow: 'auto' }}>
+          <Table
+            columns={columns}
+            dataSource={pageData}
+            scroll={{ x: 'max-content' }}
+            pagination={{
+              currentPage: activePage,
+              pageSize: pageSize,
+              total: tokenCount,
+              showSizeChanger: true,
+              pageSizeOptions: [10, 20, 50, 100],
+              formatPageText: (page) =>
+                t('第 {{start}} - {{end}} 条，共 {{total}} 条', {
+                  start: page.currentStart,
+                  end: page.currentEnd,
+                  total: tokenCount,
+                }),
+              onPageSizeChange: (size) => {
+                setPageSize(size);
+                setActivePage(1);
+                if (searchKeyword === '') {
+                  loadRedemptions(1, size).then();
+                } else {
+                  searchRedemptions(searchKeyword, 1, size).then();
+                }
+              },
+              onPageChange: handlePageChange,
+            }}
+            loading={loading}
+            rowSelection={rowSelection}
+            onRow={handleRow}
+            className="rounded-xl overflow-hidden"
+            size="middle"
+          ></Table>
+        </div>
       </Card>
     </>
   );
diff --git a/web/src/components/table/TaskLogsTable.js b/web/src/components/table/TaskLogsTable.js
index 607fa4d1..82c38b07 100644
--- a/web/src/components/table/TaskLogsTable.js
+++ b/web/src/components/table/TaskLogsTable.js
@@ -289,7 +289,6 @@ const LogsTable = () => {
       key: COLUMN_KEYS.SUBMIT_TIME,
       title: t('提交时间'),
       dataIndex: 'submit_time',
-      width: 180,
       render: (text, record, index) => {
         return <div>{text ? renderTimestamp(text) : '-'}</div>;
       },
@@ -298,7 +297,6 @@ const LogsTable = () => {
       key: COLUMN_KEYS.FINISH_TIME,
       title: t('结束时间'),
       dataIndex: 'finish_time',
-      width: 180,
       render: (text, record, index) => {
         return <div>{text ? renderTimestamp(text) : '-'}</div>;
       },
@@ -307,7 +305,6 @@ const LogsTable = () => {
       key: COLUMN_KEYS.DURATION,
       title: t('花费时间'),
       dataIndex: 'finish_time',
-      width: 120,
       render: (finish, record) => {
         return <>{finish ? renderDuration(record.submit_time, finish) : '-'}</>;
       },
@@ -316,7 +313,6 @@ const LogsTable = () => {
       key: COLUMN_KEYS.CHANNEL,
       title: t('渠道'),
       dataIndex: 'channel_id',
-      width: 100,
       className: isAdminUser ? 'tableShow' : 'tableHiddle',
       render: (text, record, index) => {
         return isAdminUser ? (
@@ -341,7 +337,6 @@ const LogsTable = () => {
       key: COLUMN_KEYS.PLATFORM,
       title: t('平台'),
       dataIndex: 'platform',
-      width: 120,
       render: (text, record, index) => {
         return <div>{renderPlatform(text)}</div>;
       },
@@ -350,7 +345,6 @@ const LogsTable = () => {
       key: COLUMN_KEYS.TYPE,
       title: t('类型'),
       dataIndex: 'action',
-      width: 120,
       render: (text, record, index) => {
         return <div>{renderType(text)}</div>;
       },
@@ -359,7 +353,6 @@ const LogsTable = () => {
       key: COLUMN_KEYS.TASK_ID,
       title: t('任务ID'),
       dataIndex: 'task_id',
-      width: 200,
       render: (text, record, index) => {
         return (
           <Typography.Text
@@ -378,7 +371,6 @@ const LogsTable = () => {
       key: COLUMN_KEYS.TASK_STATUS,
       title: t('任务状态'),
       dataIndex: 'status',
-      width: 120,
       render: (text, record, index) => {
         return <div>{renderStatus(text)}</div>;
       },
@@ -387,7 +379,6 @@ const LogsTable = () => {
       key: COLUMN_KEYS.PROGRESS,
       title: t('进度'),
       dataIndex: 'progress',
-      width: 160,
       render: (text, record, index) => {
         return (
           <div>
@@ -415,7 +406,7 @@ const LogsTable = () => {
       key: COLUMN_KEYS.FAIL_REASON,
       title: t('失败原因'),
       dataIndex: 'fail_reason',
-      width: 160,
+      fixed: 'right',
       render: (text, record, index) => {
         if (!text) {
           return t('无');
@@ -613,7 +604,7 @@ const LogsTable = () => {
       {renderColumnSelector()}
       <Layout>
         <Card
-          className="!rounded-2xl overflow-hidden mb-4"
+          className="!rounded-2xl mb-4"
           title={
             <div className="flex flex-col w-full">
               <div className="flex flex-col md:flex-row justify-between items-center">
@@ -705,31 +696,34 @@ const LogsTable = () => {
           shadows='always'
           bordered={false}
         >
-          <Table
-            columns={getVisibleColumns()}
-            dataSource={pageData}
-            rowKey='key'
-            loading={loading}
-            className="rounded-xl overflow-hidden"
-            size="middle"
-            pagination={{
-              formatPageText: (page) =>
-                t('第 {{start}} - {{end}} 条，共 {{total}} 条', {
-                  start: page.currentStart,
-                  end: page.currentEnd,
-                  total: logCount,
-                }),
-              currentPage: activePage,
-              pageSize: pageSize,
-              total: logCount,
-              pageSizeOptions: [10, 20, 50, 100],
-              showSizeChanger: true,
-              onPageSizeChange: (size) => {
-                handlePageSizeChange(size);
-              },
-              onPageChange: handlePageChange,
-            }}
-          />
+          <div style={{ overflow: 'auto' }}>
+            <Table
+              columns={getVisibleColumns()}
+              dataSource={pageData}
+              rowKey='key'
+              loading={loading}
+              scroll={{ x: 'max-content' }}
+              className="rounded-xl overflow-hidden"
+              size="middle"
+              pagination={{
+                formatPageText: (page) =>
+                  t('第 {{start}} - {{end}} 条，共 {{total}} 条', {
+                    start: page.currentStart,
+                    end: page.currentEnd,
+                    total: logCount,
+                  }),
+                currentPage: activePage,
+                pageSize: pageSize,
+                total: logCount,
+                pageSizeOptions: [10, 20, 50, 100],
+                showSizeChanger: true,
+                onPageSizeChange: (size) => {
+                  handlePageSizeChange(size);
+                },
+                onPageChange: handlePageChange,
+              }}
+            />
+          </div>
         </Card>
 
         <Modal
diff --git a/web/src/components/table/TokensTable.js b/web/src/components/table/TokensTable.js
index 4e9b7b45..fb5e5e1f 100644
--- a/web/src/components/table/TokensTable.js
+++ b/web/src/components/table/TokensTable.js
@@ -91,13 +91,11 @@ const TokensTable = () => {
     {
       title: t('名称'),
       dataIndex: 'name',
-      width: 180,
     },
     {
       title: t('状态'),
       dataIndex: 'status',
       key: 'status',
-      width: 200,
       render: (text, record, index) => {
         return (
           <div>
@@ -112,7 +110,6 @@ const TokensTable = () => {
     {
       title: t('已用额度'),
       dataIndex: 'used_quota',
-      width: 120,
       render: (text, record, index) => {
         return <div>{renderQuota(parseInt(text))}</div>;
       },
@@ -120,7 +117,6 @@ const TokensTable = () => {
     {
       title: t('剩余额度'),
       dataIndex: 'remain_quota',
-      width: 120,
       render: (text, record, index) => {
         return (
           <div>
@@ -140,7 +136,6 @@ const TokensTable = () => {
     {
       title: t('创建时间'),
       dataIndex: 'created_time',
-      width: 180,
       render: (text, record, index) => {
         return <div>{renderTimestamp(text)}</div>;
       },
@@ -148,7 +143,6 @@ const TokensTable = () => {
     {
       title: t('过期时间'),
       dataIndex: 'expired_time',
-      width: 180,
       render: (text, record, index) => {
         return (
           <div>
@@ -160,7 +154,7 @@ const TokensTable = () => {
     {
       title: '',
       dataIndex: 'operate',
-      width: 320,
+      fixed: 'right',
       render: (text, record, index) => {
         let chats = localStorage.getItem('chats');
         let chatsArray = [];
@@ -630,38 +624,41 @@ const TokensTable = () => {
       ></EditToken>
 
       <Card
-        className="!rounded-2xl overflow-hidden"
+        className="!rounded-2xl"
         title={renderHeader()}
         shadows='always'
         bordered={false}
       >
-        <Table
-          columns={columns}
-          dataSource={pageData}
-          pagination={{
-            currentPage: activePage,
-            pageSize: pageSize,
-            total: tokenCount,
-            showSizeChanger: true,
-            pageSizeOptions: [10, 20, 50, 100],
-            formatPageText: (page) =>
-              t('第 {{start}} - {{end}} 条，共 {{total}} 条', {
-                start: page.currentStart,
-                end: page.currentEnd,
-                total: tokens.length,
-              }),
-            onPageSizeChange: (size) => {
-              setPageSize(size);
-              setActivePage(1);
-            },
-            onPageChange: handlePageChange,
-          }}
-          loading={loading}
-          rowSelection={rowSelection}
-          onRow={handleRow}
-          className="rounded-xl overflow-hidden"
-          size="middle"
-        ></Table>
+        <div style={{ overflow: 'auto' }}>
+          <Table
+            columns={columns}
+            dataSource={pageData}
+            scroll={{ x: 'max-content' }}
+            pagination={{
+              currentPage: activePage,
+              pageSize: pageSize,
+              total: tokenCount,
+              showSizeChanger: true,
+              pageSizeOptions: [10, 20, 50, 100],
+              formatPageText: (page) =>
+                t('第 {{start}} - {{end}} 条，共 {{total}} 条', {
+                  start: page.currentStart,
+                  end: page.currentEnd,
+                  total: tokens.length,
+                }),
+              onPageSizeChange: (size) => {
+                setPageSize(size);
+                setActivePage(1);
+              },
+              onPageChange: handlePageChange,
+            }}
+            loading={loading}
+            rowSelection={rowSelection}
+            onRow={handleRow}
+            className="rounded-xl overflow-hidden"
+            size="middle"
+          ></Table>
+        </div>
       </Card>
     </>
   );
diff --git a/web/src/components/table/UsersTable.js b/web/src/components/table/UsersTable.js
index 027b69be..69278e16 100644
--- a/web/src/components/table/UsersTable.js
+++ b/web/src/components/table/UsersTable.js
@@ -87,17 +87,14 @@ 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>;
       },
@@ -105,7 +102,6 @@ const UsersTable = () => {
     {
       title: t('统计信息'),
       dataIndex: 'info',
-      width: 280,
       render: (text, record, index) => {
         return (
           <div>
@@ -127,7 +123,6 @@ const UsersTable = () => {
     {
       title: t('邀请信息'),
       dataIndex: 'invite',
-      width: 250,
       render: (text, record, index) => {
         return (
           <div>
@@ -149,7 +144,6 @@ const UsersTable = () => {
     {
       title: t('角色'),
       dataIndex: 'role',
-      width: 120,
       render: (text, record, index) => {
         return <div>{renderRole(text)}</div>;
       },
@@ -157,7 +151,6 @@ const UsersTable = () => {
     {
       title: t('状态'),
       dataIndex: 'status',
-      width: 100,
       render: (text, record, index) => {
         return (
           <div>
@@ -173,7 +166,7 @@ const UsersTable = () => {
     {
       title: '',
       dataIndex: 'operate',
-      width: 150,
+      fixed: 'right',
       render: (text, record, index) => {
         if (record.DeletedAt !== null) {
           return <></>;
@@ -549,36 +542,39 @@ const UsersTable = () => {
       ></EditUser>
 
       <Card
-        className="!rounded-2xl overflow-hidden"
+        className="!rounded-2xl"
         title={renderHeader()}
         shadows='always'
         bordered={false}
       >
-        <Table
-          columns={columns}
-          dataSource={users}
-          pagination={{
-            formatPageText: (page) =>
-              t('第 {{start}} - {{end}} 条，共 {{total}} 条', {
-                start: page.currentStart,
-                end: page.currentEnd,
-                total: userCount,
-              }),
-            currentPage: activePage,
-            pageSize: pageSize,
-            total: userCount,
-            pageSizeOpts: [10, 20, 50, 100],
-            showSizeChanger: true,
-            onPageSizeChange: (size) => {
-              handlePageSizeChange(size);
-            },
-            onPageChange: handlePageChange,
-          }}
-          loading={loading}
-          onRow={handleRow}
-          className="rounded-xl overflow-hidden"
-          size="middle"
-        />
+        <div style={{ overflow: 'auto' }}>
+          <Table
+            columns={columns}
+            dataSource={users}
+            scroll={{ x: 'max-content' }}
+            pagination={{
+              formatPageText: (page) =>
+                t('第 {{start}} - {{end}} 条，共 {{total}} 条', {
+                  start: page.currentStart,
+                  end: page.currentEnd,
+                  total: userCount,
+                }),
+              currentPage: activePage,
+              pageSize: pageSize,
+              total: userCount,
+              pageSizeOpts: [10, 20, 50, 100],
+              showSizeChanger: true,
+              onPageSizeChange: (size) => {
+                handlePageSizeChange(size);
+              },
+              onPageChange: handlePageChange,
+            }}
+            loading={loading}
+            onRow={handleRow}
+            className="rounded-xl overflow-hidden"
+            size="middle"
+          />
+        </div>
       </Card>
     </>
   );