📌 feat(table): add fixed right column to all data tables

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.
2025-06-07 02:45:07 +08:00
parent b4be218af8
commit 2100d32bab
7 changed files with 230 additions and 269 deletions
--- 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>

      {/* 批量设置标签模态框 */}
--- 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>
    </>
  );
--- 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
--- 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>
    </>
  );
--- 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
--- 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>
    </>
  );
--- 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>
    </>
  );