mirror of
https://github.com/QuantumNous/new-api.git
synced 2026-04-20 02:38:38 +00:00
♻️ refactor(users): modularize UsersTable component into microcomponent architecture
BREAKING CHANGE: Removed standalone user edit routes (/console/user/edit, /console/user/edit/:id) - 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 - Update import paths in pages/User/index.js to use new modular structure - Remove obsolete EditUser imports and routes from App.js - Delete original monolithic files: UsersTable.js, AddUser.js, EditUser.js The new architecture follows the same modular pattern as tokens and redemptions modules: - Consistent file organization across all table modules - Better separation of concerns and maintainability - Enhanced reusability and testability - Unified modal management approach All existing functionality preserved with improved code organization.
This commit is contained in:
26
web/src/components/table/users/UsersDescription.jsx
Normal file
26
web/src/components/table/users/UsersDescription.jsx
Normal file
@@ -0,0 +1,26 @@
|
||||
import React from 'react';
|
||||
import { Button, Typography } from '@douyinfe/semi-ui';
|
||||
import { IconUserAdd } from '@douyinfe/semi-icons';
|
||||
|
||||
const { Text } = Typography;
|
||||
|
||||
const UsersDescription = ({ compactMode, setCompactMode, t }) => {
|
||||
return (
|
||||
<div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-2 w-full">
|
||||
<div className="flex items-center text-blue-500">
|
||||
<IconUserAdd className="mr-2" />
|
||||
<Text>{t('用户管理页面,可以查看和管理所有注册用户的信息、权限和状态。')}</Text>
|
||||
</div>
|
||||
<Button
|
||||
type='tertiary'
|
||||
className="w-full md:w-auto"
|
||||
onClick={() => setCompactMode(!compactMode)}
|
||||
size="small"
|
||||
>
|
||||
{compactMode ? t('自适应列表') : t('紧凑列表')}
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default UsersDescription;
|
||||
Reference in New Issue
Block a user