🏗️ refactor: complete table module architecture unification and cleanup

BREAKING CHANGE: Removed standalone user edit routes and intermediate export files

## Major Refactoring
- Decompose 673-line monolithic UsersTable.js into 8 specialized components
- Extract column definitions to UsersColumnDefs.js with render functions
- Create dedicated UsersActions.jsx for action buttons
- Create UsersFilters.jsx for search and filtering logic
- Create UsersDescription.jsx for description area
- Extract all data management logic to useUsersData.js hook
- Move AddUser.js and EditUser.js to users/modals/ folder as modal components
- Create 4 new confirmation modal components (Promote, Demote, EnableDisable, Delete)
- Implement pure UsersTable.jsx component for table rendering only
- Create main container component users/index.jsx to compose all subcomponents

## Import Path Optimization
- Remove 6 intermediate re-export files: ChannelsTable.js, TokensTable.js, RedemptionsTable.js, UsageLogsTable.js, MjLogsTable.js, TaskLogsTable.js
- Update all pages to import directly from module folders (e.g., '../../components/table/tokens')
- Standardize naming convention: all pages import as XxxTable while internal components use XxxPage

## Route Cleanup
- Remove obsolete EditUser imports and routes from App.js (/console/user/edit, /console/user/edit/:id)
- Delete original monolithic files: UsersTable.js, AddUser.js, EditUser.js

## Architecture Benefits
- Unified modular pattern across all table modules (tokens, redemptions, users, channels, logs)
- Consistent file organization and naming conventions
- Better separation of concerns and maintainability
- Enhanced reusability and testability
- Eliminated unnecessary intermediate layers
- Improved import clarity and performance

All existing functionality preserved with significantly improved code organization.
This commit is contained in:
t0ng7u
2025-07-19 00:44:09 +08:00
parent d762da9141
commit be16ad26b5
16 changed files with 21 additions and 33 deletions

View File

@@ -1,2 +0,0 @@
// 重构后的 ChannelsTable - 使用新的模块化架构
export { default } from './channels/index.jsx';

View File

@@ -1,2 +0,0 @@
// 重构后的 MjLogsTable - 使用新的模块化架构
export { default } from './mj-logs/index.jsx';

View File

@@ -1,2 +0,0 @@
// 重构后的 RedemptionsTable - 使用新的模块化架构
export { default } from './redemptions/index.jsx';

View File

@@ -1,2 +0,0 @@
// 重构后的 TaskLogsTable - 使用新的模块化架构
export { default } from './task-logs/index.jsx';

View File

@@ -1,2 +0,0 @@
// 重构后的 TokensTable - 使用新的模块化架构
export { default } from './tokens/index.jsx';

View File

@@ -1,2 +0,0 @@
// 重构后的 UsageLogsTable - 使用新的模块化架构
export { default } from './usage-logs/index.jsx';

View File

@@ -47,7 +47,7 @@ const UsersPage = () => {
visible={showAddUser}
handleClose={closeAddUser}
/>
<EditUserModal
refresh={refresh}
visible={showEditUser}

View File

@@ -1,16 +1,16 @@
import React from 'react';
import { Modal } from '@douyinfe/semi-ui';
const DeleteUserModal = ({
visible,
onCancel,
onConfirm,
const DeleteUserModal = ({
visible,
onCancel,
onConfirm,
user,
users,
activePage,
refresh,
manageUser,
t
t
}) => {
const handleConfirm = async () => {
await manageUser(user.id, 'delete', user);

View File

@@ -1,16 +1,16 @@
import React from 'react';
import { Modal } from '@douyinfe/semi-ui';
const EnableDisableUserModal = ({
visible,
onCancel,
onConfirm,
user,
const EnableDisableUserModal = ({
visible,
onCancel,
onConfirm,
user,
action,
t
t
}) => {
const isDisable = action === 'disable';
return (
<Modal
title={isDisable ? t('确定要禁用此用户吗?') : t('确定要启用此用户吗?')}

View File

@@ -1,5 +1,5 @@
import React from 'react';
import ChannelsTable from '../../components/table/ChannelsTable';
import ChannelsTable from '../../components/table/channels';
const File = () => {
return (

View File

@@ -1,5 +1,5 @@
import React from 'react';
import UsageLogsTable from '../../components/table/UsageLogsTable';
import UsageLogsTable from '../../components/table/usage-logs';
const Token = () => (
<div className="mt-[60px] px-2">

View File

@@ -1,5 +1,5 @@
import React from 'react';
import MjLogsTable from '../../components/table/MjLogsTable';
import MjLogsTable from '../../components/table/mj-logs';
const Midjourney = () => (
<div className="mt-[60px] px-2">

View File

@@ -1,5 +1,5 @@
import React from 'react';
import RedemptionsTable from '../../components/table/RedemptionsTable';
import RedemptionsTable from '../../components/table/redemptions';
const Redemption = () => {
return (

View File

@@ -1,5 +1,5 @@
import React from 'react';
import TaskLogsTable from '../../components/table/TaskLogsTable.js';
import TaskLogsTable from '../../components/table/task-logs';
const Task = () => (
<div className="mt-[60px] px-2">

View File

@@ -1,5 +1,5 @@
import React from 'react';
import TokensTable from '../../components/table/TokensTable';
import TokensTable from '../../components/table/tokens';
const Token = () => {
return (

View File

@@ -1,10 +1,10 @@
import React from 'react';
import UsersPage from '../../components/table/users';
import UsersTable from '../../components/table/users';
const User = () => {
return (
<div className="mt-[60px] px-2">
<UsersPage />
<UsersTable />
</div>
);
};