💄 refactor: Users table UI & state handling
Summary of changes
1. UI clean-up
• Removed all `prefixIcon` props from `Tag` components in `UsersColumnDefs.js`.
• Corrected i18n string in invite info (`${t('邀请人')}: …`).
2. “Statistics” column overhaul
• Added a Switch (enable / disable) and quota Progress bar, mirroring the Tokens table design.
• Moved enable / disable action out of the “More” dropdown; user status is now toggled directly via the Switch.
• Disabled the Switch for deleted (注销) users.
• Restored column title to “Statistics” to avoid duplication.
3. State consistency / refresh
• Updated `manageUser` in `useUsersData.js` to:
– set `loading` while processing actions;
– update users list immutably (new objects & array) to trigger React re-render.
4. Imports / plumbing
• Added `Progress` and `Switch` to UI imports in `UsersColumnDefs.js`.
These changes streamline the user table’s appearance, align interaction patterns with the token table, and ensure immediate visual feedback after user status changes.
This commit is contained in:
@@ -121,30 +121,36 @@ export const useUsersData = () => {
|
||||
|
||||
// Manage user operations (promote, demote, enable, disable, delete)
|
||||
const manageUser = async (userId, action, record) => {
|
||||
// Trigger loading state to force table re-render
|
||||
setLoading(true);
|
||||
|
||||
const res = await API.post('/api/user/manage', {
|
||||
id: userId,
|
||||
action,
|
||||
});
|
||||
|
||||
const { success, message } = res.data;
|
||||
if (success) {
|
||||
showSuccess('操作成功完成!');
|
||||
let user = res.data.data;
|
||||
let newUsers = [...users];
|
||||
if (action === 'delete') {
|
||||
// Mark as deleted
|
||||
const index = newUsers.findIndex(u => u.id === userId);
|
||||
if (index > -1) {
|
||||
newUsers[index].DeletedAt = new Date();
|
||||
const user = res.data.data;
|
||||
|
||||
// Create a new array and new object to ensure React detects changes
|
||||
const newUsers = users.map((u) => {
|
||||
if (u.id === userId) {
|
||||
if (action === 'delete') {
|
||||
return { ...u, DeletedAt: new Date() };
|
||||
}
|
||||
return { ...u, status: user.status, role: user.role };
|
||||
}
|
||||
} else {
|
||||
// Update status and role
|
||||
record.status = user.status;
|
||||
record.role = user.role;
|
||||
}
|
||||
return u;
|
||||
});
|
||||
|
||||
setUsers(newUsers);
|
||||
} else {
|
||||
showError(message);
|
||||
}
|
||||
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
// Handle page change
|
||||
|
||||
Reference in New Issue
Block a user