♻️ refactor: modularize TokensTable component into maintainable architecture

- Split monolithic 922-line TokensTable.js into modular components:
  * useTokensData.js: Custom hook for centralized state and logic management
  * TokensColumnDefs.js: Column definitions and rendering functions
  * TokensTable.jsx: Pure table component for rendering
  * TokensActions.jsx: Actions area (add, copy, delete tokens)
  * TokensFilters.jsx: Search form component with keyword and token filters
  * TokensDescription.jsx: Description area with compact mode toggle
  * index.jsx: Main orchestrator component

- Features preserved:
  * Token status management with switch controls
  * Quota progress bars and visual indicators
  * Model limitations display with vendor avatars
  * IP restrictions handling and display
  * Chat integrations with dropdown menu
  * Batch operations (copy, delete) with confirmations
  * Key visibility toggle and copy functionality
  * Compact mode for responsive layouts
  * Search and filtering capabilities
  * Pagination and loading states

- Improvements:
  * Better separation of concerns
  * Enhanced reusability and testability
  * Simplified maintenance and debugging
  * Consistent modular architecture pattern
  * Performance optimizations with useMemo
  * Backward compatibility maintained

This refactoring follows the same successful pattern used for LogsTable, MjLogsTable, and TaskLogsTable, significantly improving code maintainability while preserving all existing functionality.

web/src/components/table/tokens/TokensActions.jsx

+import React from 'react';
+import { Button, Modal, Space } from '@douyinfe/semi-ui';
+import { showError } from '../../../helpers';
+
+const TokensActions = ({
+  selectedKeys,
+  setEditingToken,
+  setShowEdit,
+  batchCopyTokens,
+  batchDeleteTokens,
+  copyText,
+  t,
+}) => {
+  // Handle copy selected tokens with options
+  const handleCopySelectedTokens = () => {
+    if (selectedKeys.length === 0) {
+      showError(t('请至少选择一个令牌！'));
+      return;
+    }
+
+    Modal.info({
+      title: t('复制令牌'),
+      icon: null,
+      content: t('请选择你的复制方式'),
+      footer: (
+        <Space>
+          <Button
+            type='tertiary'
+            onClick={async () => {
+              let content = '';
+              for (let i = 0; i < selectedKeys.length; i++) {
+                content +=
+                  selectedKeys[i].name + '    sk-' + selectedKeys[i].key + '\n';
+              }
+              await copyText(content);
+              Modal.destroyAll();
+            }}
+          >
+            {t('名称+密钥')}
+          </Button>
+          <Button
+            onClick={async () => {
+              let content = '';
+              for (let i = 0; i < selectedKeys.length; i++) {
+                content += 'sk-' + selectedKeys[i].key + '\n';
+              }
+              await copyText(content);
+              Modal.destroyAll();
+            }}
+          >
+            {t('仅密钥')}
+          </Button>
+        </Space>
+      ),
+    });
+  };
+
+  // Handle delete selected tokens with confirmation
+  const handleDeleteSelectedTokens = () => {
+    if (selectedKeys.length === 0) {
+      showError(t('请至少选择一个令牌！'));
+      return;
+    }
+
+    Modal.confirm({
+      title: t('批量删除令牌'),
+      content: (
+        <div>
+          {t('确定要删除所选的 {{count}} 个令牌吗？', { count: selectedKeys.length })}
+        </div>
+      ),
+      onOk: () => batchDeleteTokens(),
+    });
+  };
+
+  return (
+    <div className="flex flex-wrap gap-2 w-full md:w-auto order-2 md:order-1">
+      <Button
+        type="primary"
+        className="flex-1 md:flex-initial"
+        onClick={() => {
+          setEditingToken({
+            id: undefined,
+          });
+          setShowEdit(true);
+        }}
+        size="small"
+      >
+        {t('添加令牌')}
+      </Button>
+
+      <Button
+        type='tertiary'
+        className="flex-1 md:flex-initial"
+        onClick={handleCopySelectedTokens}
+        size="small"
+      >
+        {t('复制所选令牌')}
+      </Button>
+
+      <Button
+        type='danger'
+        className="w-full md:w-auto"
+        onClick={handleDeleteSelectedTokens}
+        size="small"
+      >
+        {t('删除所选令牌')}
+      </Button>
+    </div>
+  );
+};
+
+export default TokensActions; 
\ No newline at end of file

web/src/components/table/tokens/TokensDescription.jsx

+import React from 'react';
+import { Button, Typography } from '@douyinfe/semi-ui';
+import { Key } from 'lucide-react';
+
+const { Text } = Typography;
+
+const TokensDescription = ({ compactMode, setCompactMode, t }) => {
+  return (
+    <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-2 w-full">
+      <div className="flex items-center text-blue-500">
+        <Key size={16} className="mr-2" />
+        <Text>{t('令牌用于API访问认证，可以设置额度限制和模型权限。')}</Text>
+      </div>
+
+      <Button
+        type="tertiary"
+        className="w-full md:w-auto"
+        onClick={() => setCompactMode(!compactMode)}
+        size="small"
+      >
+        {compactMode ? t('自适应列表') : t('紧凑列表')}
+      </Button>
+    </div>
+  );
+};
+
+export default TokensDescription; 
\ No newline at end of file

web/src/components/table/tokens/TokensFilters.jsx

+import React from 'react';
+import { Form, Button } from '@douyinfe/semi-ui';
+import { IconSearch } from '@douyinfe/semi-icons';
+
+const TokensFilters = ({
+  formInitValues,
+  setFormApi,
+  searchTokens,
+  loading,
+  searching,
+  t,
+}) => {
+  // Handle form reset and immediate search
+  const handleReset = (formApi) => {
+    if (formApi) {
+      formApi.reset();
+      // Reset and search immediately
+      setTimeout(() => {
+        searchTokens();
+      }, 100);
+    }
+  };
+
+  return (
+    <Form
+      initValues={formInitValues}
+      getFormApi={(api) => setFormApi(api)}
+      onSubmit={searchTokens}
+      allowEmpty={true}
+      autoComplete="off"
+      layout="horizontal"
+      trigger="change"
+      stopValidateWithError={false}
+      className="w-full md:w-auto order-1 md:order-2"
+    >
+      <div className="flex flex-col md:flex-row items-center gap-2 w-full md:w-auto">
+        <div className="relative w-full md:w-56">
+          <Form.Input
+            field="searchKeyword"
+            prefix={<IconSearch />}
+            placeholder={t('搜索关键字')}
+            showClear
+            pure
+            size="small"
+          />
+        </div>
+
+        <div className="relative w-full md:w-56">
+          <Form.Input
+            field="searchToken"
+            prefix={<IconSearch />}
+            placeholder={t('密钥')}
+            showClear
+            pure
+            size="small"
+          />
+        </div>
+
+        <div className="flex gap-2 w-full md:w-auto">
+          <Button
+            type="tertiary"
+            htmlType="submit"
+            loading={loading || searching}
+            className="flex-1 md:flex-initial md:w-auto"
+            size="small"
+          >
+            {t('查询')}
+          </Button>
+
+          <Button
+            type='tertiary'
+            onClick={(_, formApi) => handleReset(formApi)}
+            className="flex-1 md:flex-initial md:w-auto"
+            size="small"
+          >
+            {t('重置')}
+          </Button>
+        </div>
+      </div>
+    </Form>
+  );
+};
+
+export default TokensFilters; 
\ No newline at end of file

web/src/components/table/tokens/TokensTable.jsx

+import React, { useMemo } from 'react';
+import { Table, Empty } from '@douyinfe/semi-ui';
+import {
+  IllustrationNoResult,
+  IllustrationNoResultDark,
+} from '@douyinfe/semi-illustrations';
+import { getTokensColumns } from './TokensColumnDefs.js';
+
+const TokensTable = (tokensData) => {
+  const {
+    tokens,
+    loading,
+    activePage,
+    pageSize,
+    tokenCount,
+    compactMode,
+    handlePageChange,
+    handlePageSizeChange,
+    rowSelection,
+    handleRow,
+    showKeys,
+    setShowKeys,
+    copyText,
+    manageToken,
+    onOpenLink,
+    setEditingToken,
+    setShowEdit,
+    refresh,
+    t,
+  } = tokensData;
+
+  // Get all columns
+  const columns = useMemo(() => {
+    return getTokensColumns({
+      t,
+      showKeys,
+      setShowKeys,
+      copyText,
+      manageToken,
+      onOpenLink,
+      setEditingToken,
+      setShowEdit,
+      refresh,
+    });
+  }, [
+    t,
+    showKeys,
+    setShowKeys,
+    copyText,
+    manageToken,
+    onOpenLink,
+    setEditingToken,
+    setShowEdit,
+    refresh,
+  ]);
+
+  // Handle compact mode by removing fixed positioning
+  const tableColumns = useMemo(() => {
+    return compactMode ? columns.map(col => {
+      if (col.dataIndex === 'operate') {
+        const { fixed, ...rest } = col;
+        return rest;
+      }
+      return col;
+    }) : columns;
+  }, [compactMode, columns]);
+
+  return (
+    <Table
+      columns={tableColumns}
+      dataSource={tokens}
+      scroll={compactMode ? undefined : { x: 'max-content' }}
+      pagination={{
+        currentPage: activePage,
+        pageSize: pageSize,
+        total: tokenCount,
+        showSizeChanger: true,
+        pageSizeOptions: [10, 20, 50, 100],
+        onPageSizeChange: handlePageSizeChange,
+        onPageChange: handlePageChange,
+      }}
+      loading={loading}
+      rowSelection={rowSelection}
+      onRow={handleRow}
+      empty={
+        <Empty
+          image={<IllustrationNoResult style={{ width: 150, height: 150 }} />}
+          darkModeImage={<IllustrationNoResultDark style={{ width: 150, height: 150 }} />}
+          description={t('搜索无结果')}
+          style={{ padding: 30 }}
+        />
+      }
+      className="rounded-xl overflow-hidden"
+      size="middle"
+    />
+  );
+};
+
+export default TokensTable; 
\ No newline at end of file

web/src/components/table/tokens/index.jsx

+import React from 'react';
+import CardPro from '../../common/ui/CardPro';
+import TokensTable from './TokensTable.jsx';
+import TokensActions from './TokensActions.jsx';
+import TokensFilters from './TokensFilters.jsx';
+import TokensDescription from './TokensDescription.jsx';
+import EditToken from '../../../pages/Token/EditToken';
+import { useTokensData } from '../../../hooks/tokens/useTokensData';
+
+const TokensPage = () => {
+  const tokensData = useTokensData();
+
+  const {
+    // Edit state
+    showEdit,
+    editingToken,
+    closeEdit,
+    refresh,
+
+    // Actions state
+    selectedKeys,
+    setEditingToken,
+    setShowEdit,
+    batchDeleteTokens,
+    copyText,
+
+    // Filters state
+    formInitValues,
+    setFormApi,
+    searchTokens,
+    loading,
+    searching,
+
+    // Description state
+    compactMode,
+    setCompactMode,
+
+    // Translation
+    t,
+  } = tokensData;
+
+  return (
+    <>
+      <EditToken
+        refresh={refresh}
+        editingToken={editingToken}
+        visiable={showEdit}
+        handleClose={closeEdit}
+      />
+
+      <CardPro
+        type="type1"
+        descriptionArea={
+          <TokensDescription
+            compactMode={compactMode}
+            setCompactMode={setCompactMode}
+            t={t}
+          />
+        }
+        actionsArea={
+          <div className="flex flex-col md:flex-row justify-between items-center gap-2 w-full">
+            <TokensActions
+              selectedKeys={selectedKeys}
+              setEditingToken={setEditingToken}
+              setShowEdit={setShowEdit}
+              batchDeleteTokens={batchDeleteTokens}
+              copyText={copyText}
+              t={t}
+            />
+
+            <div className="w-full md:w-full lg:w-auto order-1 md:order-2">
+              <TokensFilters
+                formInitValues={formInitValues}
+                setFormApi={setFormApi}
+                searchTokens={searchTokens}
+                loading={loading}
+                searching={searching}
+                t={t}
+              />
+            </div>
+          </div>
+        }
+      >
+        <TokensTable {...tokensData} />
+      </CardPro>
+    </>
+  );
+};
+
+export default TokensPage; 
\ No newline at end of file

web/src/hooks/task-logs/useTaskLogsData.js

@@ -14,7 +14,7 @@ import { useTableCompactMode } from '../common/useTableCompactMode';
 
 
 export const useTaskLogsData = () => {
 export const useTaskLogsData = () => {
   const { t } = useTranslation();
   const { t } = useTranslation();
-  
+
   // Define column keys for selection
   // Define column keys for selection
   const COLUMN_KEYS = {
   const COLUMN_KEYS = {
     SUBMIT_TIME: 'submit_time',
     SUBMIT_TIME: 'submit_time',
@@ -36,10 +36,10 @@ export const useTaskLogsData = () => {
   const [activePage, setActivePage] = useState(1);
   const [activePage, setActivePage] = useState(1);
   const [logCount, setLogCount] = useState(0);
   const [logCount, setLogCount] = useState(0);
   const [pageSize, setPageSize] = useState(ITEMS_PER_PAGE);
   const [pageSize, setPageSize] = useState(ITEMS_PER_PAGE);
-  
+
   // User and admin
   // User and admin
   const isAdminUser = isAdmin();
   const isAdminUser = isAdmin();
-  
+
   // Modal state
   // Modal state
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [modalContent, setModalContent] = useState('');
   const [modalContent, setModalContent] = useState('');
@@ -48,7 +48,7 @@ export const useTaskLogsData = () => {
   const [formApi, setFormApi] = useState(null);
   const [formApi, setFormApi] = useState(null);
   let now = new Date();
   let now = new Date();
   let zeroNow = new Date(now.getFullYear(), now.getMonth(), now.getDate());
   let zeroNow = new Date(now.getFullYear(), now.getMonth(), now.getDate());
-  
+
   const formInitValues = {
   const formInitValues = {
     channel_id: '',
     channel_id: '',
     task_id: '',
     task_id: '',
@@ -239,7 +239,7 @@ export const useTaskLogsData = () => {
     logCount,
     logCount,
     pageSize,
     pageSize,
     isAdminUser,
     isAdminUser,
-    
+
     // Modal state
     // Modal state
     isModalOpen,
     isModalOpen,
     setIsModalOpen,
     setIsModalOpen,

web/src/hooks/tokens/useTokensData.js

+import { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Modal } from '@douyinfe/semi-ui';
+import {
+  API,
+  copy,
+  showError,
+  showSuccess,
+} from '../../helpers';
+import { ITEMS_PER_PAGE } from '../../constants';
+import { useTableCompactMode } from '../common/useTableCompactMode';
+
+export const useTokensData = () => {
+  const { t } = useTranslation();
+
+  // Basic state
+  const [tokens, setTokens] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [activePage, setActivePage] = useState(1);
+  const [tokenCount, setTokenCount] = useState(ITEMS_PER_PAGE);
+  const [pageSize, setPageSize] = useState(ITEMS_PER_PAGE);
+  const [searching, setSearching] = useState(false);
+
+  // Selection state
+  const [selectedKeys, setSelectedKeys] = useState([]);
+
+  // Edit state
+  const [showEdit, setShowEdit] = useState(false);
+  const [editingToken, setEditingToken] = useState({
+    id: undefined,
+  });
+
+  // UI state
+  const [compactMode, setCompactMode] = useTableCompactMode('tokens');
+  const [showKeys, setShowKeys] = useState({});
+
+  // Form state
+  const [formApi, setFormApi] = useState(null);
+  const formInitValues = {
+    searchKeyword: '',
+    searchToken: '',
+  };
+
+  // Get form values helper function
+  const getFormValues = () => {
+    const formValues = formApi ? formApi.getValues() : {};
+    return {
+      searchKeyword: formValues.searchKeyword || '',
+      searchToken: formValues.searchToken || '',
+    };
+  };
+
+  // Close edit modal
+  const closeEdit = () => {
+    setShowEdit(false);
+    setTimeout(() => {
+      setEditingToken({
+        id: undefined,
+      });
+    }, 500);
+  };
+
+  // Sync page data from API response
+  const syncPageData = (payload) => {
+    setTokens(payload.items || []);
+    setTokenCount(payload.total || 0);
+    setActivePage(payload.page || 1);
+    setPageSize(payload.page_size || pageSize);
+  };
+
+  // Load tokens function
+  const loadTokens = async (page = 1, size = pageSize) => {
+    setLoading(true);
+    const res = await API.get(`/api/token/?p=${page}&size=${size}`);
+    const { success, message, data } = res.data;
+    if (success) {
+      syncPageData(data);
+    } else {
+      showError(message);
+    }
+    setLoading(false);
+  };
+
+  // Refresh function
+  const refresh = async (page = activePage) => {
+    await loadTokens(page);
+    setSelectedKeys([]);
+  };
+
+  // Copy text function
+  const copyText = async (text) => {
+    if (await copy(text)) {
+      showSuccess(t('已复制到剪贴板！'));
+    } else {
+      Modal.error({
+        title: t('无法复制到剪贴板，请手动复制'),
+        content: text,
+        size: 'large',
+      });
+    }
+  };
+
+  // Open link function for chat integrations
+  const onOpenLink = async (type, url, record) => {
+    let status = localStorage.getItem('status');
+    let serverAddress = '';
+    if (status) {
+      status = JSON.parse(status);
+      serverAddress = status.server_address;
+    }
+    if (serverAddress === '') {
+      serverAddress = window.location.origin;
+    }
+    if (url.includes('{cherryConfig}') === true) {
+      let cherryConfig = {
+        id: 'new-api',
+        baseUrl: serverAddress,
+        apiKey: 'sk-' + record.key,
+      }
+      let encodedConfig = encodeURIComponent(
+        btoa(JSON.stringify(cherryConfig))
+      );
+      url = url.replaceAll('{cherryConfig}', encodedConfig);
+    } else {
+      let encodedServerAddress = encodeURIComponent(serverAddress);
+      url = url.replaceAll('{address}', encodedServerAddress);
+      url = url.replaceAll('{key}', 'sk-' + record.key);
+    }
+
+    window.open(url, '_blank');
+  };
+
+  // Manage token function (delete, enable, disable)
+  const manageToken = async (id, action, record) => {
+    setLoading(true);
+    let data = { id };
+    let res;
+    switch (action) {
+      case 'delete':
+        res = await API.delete(`/api/token/${id}/`);
+        break;
+      case 'enable':
+        data.status = 1;
+        res = await API.put('/api/token/?status_only=true', data);
+        break;
+      case 'disable':
+        data.status = 2;
+        res = await API.put('/api/token/?status_only=true', data);
+        break;
+    }
+    const { success, message } = res.data;
+    if (success) {
+      showSuccess('操作成功完成！');
+      let token = res.data.data;
+      let newTokens = [...tokens];
+      if (action !== 'delete') {
+        record.status = token.status;
+      }
+      setTokens(newTokens);
+    } else {
+      showError(message);
+    }
+    setLoading(false);
+  };
+
+  // Search tokens function
+  const searchTokens = async () => {
+    const { searchKeyword, searchToken } = getFormValues();
+    if (searchKeyword === '' && searchToken === '') {
+      await loadTokens(1);
+      return;
+    }
+    setSearching(true);
+    const res = await API.get(
+      `/api/token/search?keyword=${searchKeyword}&token=${searchToken}`,
+    );
+    const { success, message, data } = res.data;
+    if (success) {
+      setTokens(data);
+      setTokenCount(data.length);
+      setActivePage(1);
+    } else {
+      showError(message);
+    }
+    setSearching(false);
+  };
+
+  // Sort tokens function
+  const sortToken = (key) => {
+    if (tokens.length === 0) return;
+    setLoading(true);
+    let sortedTokens = [...tokens];
+    sortedTokens.sort((a, b) => {
+      return ('' + a[key]).localeCompare(b[key]);
+    });
+    if (sortedTokens[0].id === tokens[0].id) {
+      sortedTokens.reverse();
+    }
+    setTokens(sortedTokens);
+    setLoading(false);
+  };
+
+  // Page handlers
+  const handlePageChange = (page) => {
+    loadTokens(page, pageSize).then();
+  };
+
+  const handlePageSizeChange = async (size) => {
+    setPageSize(size);
+    await loadTokens(1, size);
+  };
+
+  // Row selection handlers
+  const rowSelection = {
+    onSelect: (record, selected) => { },
+    onSelectAll: (selected, selectedRows) => { },
+    onChange: (selectedRowKeys, selectedRows) => {
+      setSelectedKeys(selectedRows);
+    },
+  };
+
+  // Handle row styling
+  const handleRow = (record, index) => {
+    if (record.status !== 1) {
+      return {
+        style: {
+          background: 'var(--semi-color-disabled-border)',
+        },
+      };
+    } else {
+      return {};
+    }
+  };
+
+  // Batch delete tokens
+  const batchDeleteTokens = async () => {
+    if (selectedKeys.length === 0) {
+      showError(t('请先选择要删除的令牌！'));
+      return;
+    }
+    setLoading(true);
+    try {
+      const ids = selectedKeys.map((token) => token.id);
+      const res = await API.post('/api/token/batch', { ids });
+      if (res?.data?.success) {
+        const count = res.data.data || 0;
+        showSuccess(t('已删除 {{count}} 个令牌！', { count }));
+        await refresh();
+        setTimeout(() => {
+          if (tokens.length === 0 && activePage > 1) {
+            refresh(activePage - 1);
+          }
+        }, 100);
+      } else {
+        showError(res?.data?.message || t('删除失败'));
+      }
+    } catch (error) {
+      showError(error.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // Batch copy tokens
+  const batchCopyTokens = (copyType) => {
+    if (selectedKeys.length === 0) {
+      showError(t('请至少选择一个令牌！'));
+      return;
+    }
+
+    Modal.info({
+      title: t('复制令牌'),
+      icon: null,
+      content: t('请选择你的复制方式'),
+      footer: (
+        <div className="flex gap-2">
+          <button
+            className="px-3 py-1 bg-gray-200 rounded"
+            onClick={async () => {
+              let content = '';
+              for (let i = 0; i < selectedKeys.length; i++) {
+                content +=
+                  selectedKeys[i].name + '    sk-' + selectedKeys[i].key + '\n';
+              }
+              await copyText(content);
+              Modal.destroyAll();
+            }}
+          >
+            {t('名称+密钥')}
+          </button>
+          <button
+            className="px-3 py-1 bg-blue-500 text-white rounded"
+            onClick={async () => {
+              let content = '';
+              for (let i = 0; i < selectedKeys.length; i++) {
+                content += 'sk-' + selectedKeys[i].key + '\n';
+              }
+              await copyText(content);
+              Modal.destroyAll();
+            }}
+          >
+            {t('仅密钥')}
+          </button>
+        </div>
+      ),
+    });
+  };
+
+  // Initialize data
+  useEffect(() => {
+    loadTokens(1)
+      .then()
+      .catch((reason) => {
+        showError(reason);
+      });
+  }, [pageSize]);
+
+  return {
+    // Basic state
+    tokens,
+    loading,
+    activePage,
+    tokenCount,
+    pageSize,
+    searching,
+
+    // Selection state
+    selectedKeys,
+    setSelectedKeys,
+
+    // Edit state
+    showEdit,
+    setShowEdit,
+    editingToken,
+    setEditingToken,
+    closeEdit,
+
+    // UI state
+    compactMode,
+    setCompactMode,
+    showKeys,
+    setShowKeys,
+
+    // Form state
+    formApi,
+    setFormApi,
+    formInitValues,
+    getFormValues,
+
+    // Functions
+    loadTokens,
+    refresh,
+    copyText,
+    onOpenLink,
+    manageToken,
+    searchTokens,
+    sortToken,
+    handlePageChange,
+    handlePageSizeChange,
+    rowSelection,
+    handleRow,
+    batchDeleteTokens,
+    batchCopyTokens,
+    syncPageData,
+
+    // Translation
+    t,
+  };
+}; 
\ No newline at end of file