Bläddra i källkod

🏗️ 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.
t0ng7u 7 månader sedan
förälder
incheckning
be16ad26b5

+ 0 - 2
web/src/components/table/ChannelsTable.js

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

+ 0 - 2
web/src/components/table/MjLogsTable.js

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

+ 0 - 2
web/src/components/table/RedemptionsTable.js

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

+ 0 - 2
web/src/components/table/TaskLogsTable.js

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

+ 0 - 2
web/src/components/table/TokensTable.js

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

+ 0 - 2
web/src/components/table/UsageLogsTable.js

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

+ 1 - 1
web/src/components/table/users/index.jsx

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

+ 5 - 5
web/src/components/table/users/modals/DeleteUserModal.jsx

@@ -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);

+ 7 - 7
web/src/components/table/users/modals/EnableDisableUserModal.jsx

@@ -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 - 1
web/src/pages/Channel/index.js

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

+ 1 - 1
web/src/pages/Log/index.js

@@ -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 - 1
web/src/pages/Midjourney/index.js

@@ -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 - 1
web/src/pages/Redemption/index.js

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

+ 1 - 1
web/src/pages/Task/index.js

@@ -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 - 1
web/src/pages/Token/index.js

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

+ 2 - 2
web/src/pages/User/index.js

@@ -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>
   );
 };