acf6ec9349
Refactor the monolithic LogsTable component (1453 lines) into a modular, maintainable architecture following the channels table pattern. ## What Changed ### 🏗️ Architecture - Split single large file into focused, single-responsibility components - Introduced custom hook `useLogsData` for centralized state management - Created dedicated column definitions file for better organization - Implemented modal components for user interactions ### 📁 New Structure ``` web/src/components/table/usage-logs/ ├── index.jsx # Main page component orchestrator ├── LogsTable.jsx # Pure table rendering component ├── LogsActions.jsx # Actions area (stats + compact mode) ├── LogsFilters.jsx # Search form component ├── LogsColumnDefs.js # Column definitions and renderers └── modals/ ├── ColumnSelectorModal.jsx # Column visibility settings └── UserInfoModal.jsx # User information display web/src/hooks/logs/ └── useLogsData.js # Custom hook for state & logic ``` ### 🎯 Key Improvements - **Maintainability**: Clear separation of concerns, easier to understand - **Reusability**: Modular components can be reused independently - **Performance**: Optimized with `useMemo` for column rendering - **Testing**: Single-responsibility components easier to test - **Developer Experience**: Better code organization and readability ### 🔧 Technical Details - Preserved all existing functionality and user experience - Maintained backward compatibility through existing import path - Centralized all business logic in `useLogsData` custom hook - Extracted column definitions to separate module with render functions - Split complex UI into focused components (table, actions, filters, modals) ### 🐛 Fixes - Fixed Semi UI component import issues (`Typography.Paragraph`) - Resolved module export dependencies - Maintained consistent prop passing patterns ## Breaking Changes None - all existing imports and functionality preserved.
107 lines
2.6 KiB
JavaScript
107 lines
2.6 KiB
JavaScript
import React, { useMemo } from 'react';
|
|
import { Table, Empty, Descriptions } from '@douyinfe/semi-ui';
|
|
import {
|
|
IllustrationNoResult,
|
|
IllustrationNoResultDark,
|
|
} from '@douyinfe/semi-illustrations';
|
|
import { getLogsColumns } from './UsageLogsColumnDefs.js';
|
|
|
|
const LogsTable = (logsData) => {
|
|
const {
|
|
logs,
|
|
expandData,
|
|
loading,
|
|
activePage,
|
|
pageSize,
|
|
logCount,
|
|
compactMode,
|
|
visibleColumns,
|
|
handlePageChange,
|
|
handlePageSizeChange,
|
|
copyText,
|
|
showUserInfoFunc,
|
|
hasExpandableRows,
|
|
isAdminUser,
|
|
t,
|
|
COLUMN_KEYS,
|
|
} = logsData;
|
|
|
|
// Get all columns
|
|
const allColumns = useMemo(() => {
|
|
return getLogsColumns({
|
|
t,
|
|
COLUMN_KEYS,
|
|
copyText,
|
|
showUserInfoFunc,
|
|
isAdminUser,
|
|
});
|
|
}, [
|
|
t,
|
|
COLUMN_KEYS,
|
|
copyText,
|
|
showUserInfoFunc,
|
|
isAdminUser,
|
|
]);
|
|
|
|
// Filter columns based on visibility settings
|
|
const getVisibleColumns = () => {
|
|
return allColumns.filter((column) => visibleColumns[column.key]);
|
|
};
|
|
|
|
const visibleColumnsList = useMemo(() => {
|
|
return getVisibleColumns();
|
|
}, [visibleColumns, allColumns]);
|
|
|
|
const tableColumns = useMemo(() => {
|
|
return compactMode
|
|
? visibleColumnsList.map(({ fixed, ...rest }) => rest)
|
|
: visibleColumnsList;
|
|
}, [compactMode, visibleColumnsList]);
|
|
|
|
const expandRowRender = (record, index) => {
|
|
return <Descriptions data={expandData[record.key]} />;
|
|
};
|
|
|
|
return (
|
|
<Table
|
|
columns={tableColumns}
|
|
{...(hasExpandableRows() && {
|
|
expandedRowRender: expandRowRender,
|
|
expandRowByClick: true,
|
|
rowExpandable: (record) =>
|
|
expandData[record.key] && expandData[record.key].length > 0,
|
|
})}
|
|
dataSource={logs}
|
|
rowKey='key'
|
|
loading={loading}
|
|
scroll={compactMode ? undefined : { x: 'max-content' }}
|
|
className='rounded-xl overflow-hidden'
|
|
size='middle'
|
|
empty={
|
|
<Empty
|
|
image={
|
|
<IllustrationNoResult style={{ width: 150, height: 150 }} />
|
|
}
|
|
darkModeImage={
|
|
<IllustrationNoResultDark style={{ width: 150, height: 150 }} />
|
|
}
|
|
description={t('搜索无结果')}
|
|
style={{ padding: 30 }}
|
|
/>
|
|
}
|
|
pagination={{
|
|
currentPage: activePage,
|
|
pageSize: pageSize,
|
|
total: logCount,
|
|
pageSizeOptions: [10, 20, 50, 100],
|
|
showSizeChanger: true,
|
|
onPageSizeChange: (size) => {
|
|
handlePageSizeChange(size);
|
|
},
|
|
onPageChange: handlePageChange,
|
|
}}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default LogsTable;
|