♻️ 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.
2025-07-18 22:56:34 +08:00
parent 3b67759730
commit 42a26f076a
9 changed files with 1244 additions and 923 deletions
--- a/web/src/components/table/tokens/index.jsx
+++ b/web/src/components/table/tokens/index.jsx
@@ -0,0 +1,90 @@
+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;