67df60e76c
- 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.
99 lines
2.2 KiB
JavaScript
99 lines
2.2 KiB
JavaScript
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;
|