🏗️ 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:
@@ -1,2 +0,0 @@
|
||||
// 重构后的 ChannelsTable - 使用新的模块化架构
|
||||
export { default } from './channels/index.jsx';
|
||||
@@ -1,2 +0,0 @@
|
||||
// 重构后的 MjLogsTable - 使用新的模块化架构
|
||||
export { default } from './mj-logs/index.jsx';
|
||||
@@ -1,2 +0,0 @@
|
||||
// 重构后的 RedemptionsTable - 使用新的模块化架构
|
||||
export { default } from './redemptions/index.jsx';
|
||||
@@ -1,2 +0,0 @@
|
||||
// 重构后的 TaskLogsTable - 使用新的模块化架构
|
||||
export { default } from './task-logs/index.jsx';
|
||||
@@ -1,2 +0,0 @@
|
||||
// 重构后的 TokensTable - 使用新的模块化架构
|
||||
export { default } from './tokens/index.jsx';
|
||||
@@ -1,2 +0,0 @@
|
||||
// 重构后的 UsageLogsTable - 使用新的模块化架构
|
||||
export { default } from './usage-logs/index.jsx';
|
||||
@@ -47,7 +47,7 @@ const UsersPage = () => {
|
||||
visible={showAddUser}
|
||||
handleClose={closeAddUser}
|
||||
/>
|
||||
|
||||
|
||||
<EditUserModal
|
||||
refresh={refresh}
|
||||
visible={showEditUser}
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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('确定要启用此用户吗?')}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import ChannelsTable from '../../components/table/ChannelsTable';
|
||||
import ChannelsTable from '../../components/table/channels';
|
||||
|
||||
const File = () => {
|
||||
return (
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import RedemptionsTable from '../../components/table/RedemptionsTable';
|
||||
import RedemptionsTable from '../../components/table/redemptions';
|
||||
|
||||
const Redemption = () => {
|
||||
return (
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import TokensTable from '../../components/table/TokensTable';
|
||||
import TokensTable from '../../components/table/tokens';
|
||||
|
||||
const Token = () => {
|
||||
return (
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user