🏗️ 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} visible={showAddUser}
handleClose={closeAddUser} handleClose={closeAddUser}
/> />
<EditUserModal <EditUserModal
refresh={refresh} refresh={refresh}
visible={showEditUser} visible={showEditUser}

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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