497 lines
22 KiB
TypeScript
497 lines
22 KiB
TypeScript
import { useEffect, useMemo, useState } from 'react';
|
||
import axios from 'axios';
|
||
import { ChevronLeft, ChevronRight, Pencil, Plus, RefreshCw, Search, Trash2, UserRound, X } from 'lucide-react';
|
||
import { APP_ENDPOINTS } from '../../../config/env';
|
||
import { LucentDrawer } from '../../../components/lucent/LucentDrawer';
|
||
import { LucentIconButton } from '../../../components/lucent/LucentIconButton';
|
||
import { useLucentPrompt } from '../../../components/lucent/LucentPromptProvider';
|
||
import type { BotState } from '../../../types/bot';
|
||
import type { SysRoleSummary, SysUserSummary } from '../../../types/sys';
|
||
import { normalizePlatformPageSize, readCachedPlatformPageSize, writeCachedPlatformPageSize } from '../../../utils/platformPageSize';
|
||
|
||
interface UserManagementPageProps {
|
||
isZh: boolean;
|
||
}
|
||
|
||
interface UserDraft {
|
||
username: string;
|
||
display_name: string;
|
||
password: string;
|
||
role_id: number;
|
||
is_active: boolean;
|
||
bot_ids: string[];
|
||
}
|
||
|
||
const emptyDraft: UserDraft = {
|
||
username: '',
|
||
display_name: '',
|
||
password: '',
|
||
role_id: 0,
|
||
is_active: true,
|
||
bot_ids: [],
|
||
};
|
||
|
||
function formatLastLogin(value: string | null | undefined, isZh: boolean) {
|
||
if (!value) return isZh ? '从未登录' : 'Never logged in';
|
||
const parsed = new Date(value);
|
||
if (Number.isNaN(parsed.getTime())) return value;
|
||
return parsed.toLocaleString(isZh ? 'zh-CN' : 'en-US', {
|
||
hour12: false,
|
||
month: '2-digit',
|
||
day: '2-digit',
|
||
hour: '2-digit',
|
||
minute: '2-digit',
|
||
});
|
||
}
|
||
|
||
export function UserManagementPage({ isZh }: UserManagementPageProps) {
|
||
const { notify, confirm } = useLucentPrompt();
|
||
const [items, setItems] = useState<SysUserSummary[]>([]);
|
||
const [roles, setRoles] = useState<SysRoleSummary[]>([]);
|
||
const [bots, setBots] = useState<BotState[]>([]);
|
||
const [loading, setLoading] = useState(false);
|
||
const [saving, setSaving] = useState(false);
|
||
const [togglingUserId, setTogglingUserId] = useState<number | null>(null);
|
||
const [search, setSearch] = useState('');
|
||
const [page, setPage] = useState(1);
|
||
const [pageSize, setPageSize] = useState(() => readCachedPlatformPageSize(10));
|
||
const [editorOpen, setEditorOpen] = useState(false);
|
||
const [editingUserId, setEditingUserId] = useState<number | null>(null);
|
||
const [draft, setDraft] = useState<UserDraft>(emptyDraft);
|
||
|
||
const roleOptions = useMemo(
|
||
() => roles.filter((role) => role.is_active).sort((a, b) => a.sort_order - b.sort_order || a.id - b.id),
|
||
[roles],
|
||
);
|
||
|
||
const loadAll = async () => {
|
||
setLoading(true);
|
||
try {
|
||
const [usersRes, rolesRes, botsRes, settingsRes] = await Promise.all([
|
||
axios.get<{ items: SysUserSummary[] }>(`${APP_ENDPOINTS.apiBase}/sys/users`),
|
||
axios.get<{ items: SysRoleSummary[] }>(`${APP_ENDPOINTS.apiBase}/sys/roles`),
|
||
axios.get<BotState[]>(`${APP_ENDPOINTS.apiBase}/bots`),
|
||
axios.get<{ page_size?: number }>(`${APP_ENDPOINTS.apiBase}/platform/settings`),
|
||
]);
|
||
setItems(Array.isArray(usersRes.data?.items) ? usersRes.data.items : []);
|
||
setRoles(Array.isArray(rolesRes.data?.items) ? rolesRes.data.items : []);
|
||
setBots(Array.isArray(botsRes.data) ? botsRes.data : []);
|
||
const normalized = normalizePlatformPageSize(settingsRes.data?.page_size, readCachedPlatformPageSize(10));
|
||
writeCachedPlatformPageSize(normalized);
|
||
setPageSize(normalized);
|
||
} catch (error: any) {
|
||
notify(error?.response?.data?.detail || (isZh ? '读取用户管理失败。' : 'Failed to load user management.'), { tone: 'error' });
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
useEffect(() => {
|
||
void loadAll();
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
setPage(1);
|
||
}, [search, pageSize, items.length]);
|
||
|
||
const filteredItems = useMemo(() => {
|
||
const keyword = search.trim().toLowerCase();
|
||
if (!keyword) return items;
|
||
return items.filter((item) =>
|
||
[item.username, item.display_name, item.role?.name, item.role?.role_key].some((value) =>
|
||
String(value || '').toLowerCase().includes(keyword),
|
||
),
|
||
);
|
||
}, [items, search]);
|
||
|
||
const pageCount = Math.max(1, Math.ceil(filteredItems.length / pageSize));
|
||
const currentPage = Math.min(page, pageCount);
|
||
const pagedItems = useMemo(
|
||
() => filteredItems.slice((currentPage - 1) * pageSize, currentPage * pageSize),
|
||
[currentPage, filteredItems, pageSize],
|
||
);
|
||
|
||
const openCreate = () => {
|
||
setEditingUserId(null);
|
||
setDraft({
|
||
...emptyDraft,
|
||
role_id: roleOptions[0]?.id || 0,
|
||
bot_ids: [],
|
||
});
|
||
setEditorOpen(true);
|
||
};
|
||
|
||
const openEdit = (item: SysUserSummary) => {
|
||
setEditingUserId(item.id);
|
||
setDraft({
|
||
username: item.username,
|
||
display_name: item.display_name || item.username,
|
||
password: '',
|
||
role_id: Number(item.role?.id || roleOptions[0]?.id || 0),
|
||
is_active: item.is_active !== false,
|
||
bot_ids: [...(item.bot_ids || [])],
|
||
});
|
||
setEditorOpen(true);
|
||
};
|
||
|
||
const handleSave = async () => {
|
||
const payload = {
|
||
display_name: draft.display_name.trim(),
|
||
password: draft.password,
|
||
role_id: Number(draft.role_id || 0),
|
||
is_active: draft.is_active,
|
||
bot_ids: [...draft.bot_ids],
|
||
};
|
||
if (!payload.display_name) {
|
||
notify(isZh ? '请填写显示名称。' : 'Display name is required.', { tone: 'warning' });
|
||
return;
|
||
}
|
||
if (!payload.role_id) {
|
||
notify(isZh ? '请选择角色。' : 'Select a role.', { tone: 'warning' });
|
||
return;
|
||
}
|
||
if (editingUserId == null) {
|
||
if (!draft.username.trim()) {
|
||
notify(isZh ? '请填写用户名。' : 'Username is required.', { tone: 'warning' });
|
||
return;
|
||
}
|
||
if (draft.password.trim().length < 6) {
|
||
notify(isZh ? '初始化密码至少 6 位。' : 'Initial password must be at least 6 characters.', { tone: 'warning' });
|
||
return;
|
||
}
|
||
}
|
||
setSaving(true);
|
||
try {
|
||
if (editingUserId == null) {
|
||
await axios.post(`${APP_ENDPOINTS.apiBase}/sys/users`, {
|
||
username: draft.username.trim().toLowerCase(),
|
||
...payload,
|
||
});
|
||
notify(isZh ? '用户已创建。' : 'User created.', { tone: 'success' });
|
||
} else {
|
||
await axios.put(`${APP_ENDPOINTS.apiBase}/sys/users/${editingUserId}`, payload);
|
||
notify(isZh ? '用户已更新。' : 'User updated.', { tone: 'success' });
|
||
}
|
||
setEditorOpen(false);
|
||
setDraft(emptyDraft);
|
||
setEditingUserId(null);
|
||
await loadAll();
|
||
} catch (error: any) {
|
||
notify(error?.response?.data?.detail || (isZh ? '保存用户失败。' : 'Failed to save user.'), { tone: 'error' });
|
||
} finally {
|
||
setSaving(false);
|
||
}
|
||
};
|
||
|
||
const handleToggleActive = async (item: SysUserSummary, checked: boolean) => {
|
||
const roleId = Number(item.role?.id || 0);
|
||
if (!roleId) {
|
||
notify(isZh ? '当前用户未绑定有效角色，无法修改启停状态。' : 'This user has no valid role assigned.', { tone: 'warning' });
|
||
return;
|
||
}
|
||
setTogglingUserId(item.id);
|
||
try {
|
||
await axios.put(`${APP_ENDPOINTS.apiBase}/sys/users/${item.id}`, {
|
||
display_name: String(item.display_name || item.username || '').trim() || item.username,
|
||
password: '',
|
||
role_id: roleId,
|
||
is_active: checked,
|
||
bot_ids: [...(item.bot_ids || [])],
|
||
});
|
||
setItems((prev) => prev.map((entry) => (entry.id === item.id ? { ...entry, is_active: checked } : entry)));
|
||
notify(checked ? (isZh ? '用户已启用。' : 'User enabled.') : (isZh ? '用户已停用。' : 'User disabled.'), { tone: 'success' });
|
||
} catch (error: any) {
|
||
notify(error?.response?.data?.detail || (isZh ? '更新用户状态失败。' : 'Failed to update user status.'), { tone: 'error' });
|
||
await loadAll();
|
||
} finally {
|
||
setTogglingUserId(null);
|
||
}
|
||
};
|
||
|
||
const handleDelete = async (item: SysUserSummary) => {
|
||
const ok = await confirm({
|
||
title: isZh ? '删除用户' : 'Delete User',
|
||
message: isZh ? `确认删除用户 ${item.display_name || item.username}？` : `Delete user ${item.display_name || item.username}?`,
|
||
tone: 'warning',
|
||
});
|
||
if (!ok) return;
|
||
try {
|
||
await axios.delete(`${APP_ENDPOINTS.apiBase}/sys/users/${item.id}`);
|
||
notify(isZh ? '用户已删除。' : 'User deleted.', { tone: 'success' });
|
||
await loadAll();
|
||
} catch (error: any) {
|
||
notify(error?.response?.data?.detail || (isZh ? '删除用户失败。' : 'Failed to delete user.'), { tone: 'error' });
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div className="platform-page-stack">
|
||
<section className="panel stack skill-market-page-shell admin-management-shell">
|
||
<div className="skill-market-admin-toolbar">
|
||
<div className="ops-searchbar platform-searchbar skill-market-search">
|
||
<input
|
||
className="input ops-search-input ops-search-input-with-icon"
|
||
type="search"
|
||
value={search}
|
||
onChange={(event) => setSearch(event.target.value)}
|
||
placeholder={isZh ? '搜索用户名、显示名或角色...' : 'Search username, display name, or role...'}
|
||
aria-label={isZh ? '搜索用户' : 'Search users'}
|
||
/>
|
||
<button
|
||
type="button"
|
||
className="ops-search-inline-btn"
|
||
onClick={() => setSearch('')}
|
||
title={search.trim() ? (isZh ? '清空搜索' : 'Clear search') : (isZh ? '搜索用户' : 'Search users')}
|
||
aria-label={search.trim() ? (isZh ? '清空搜索' : 'Clear search') : (isZh ? '搜索用户' : 'Search users')}
|
||
>
|
||
{search.trim() ? <X size={14} /> : <Search size={14} />}
|
||
</button>
|
||
</div>
|
||
<div className="skill-market-admin-actions">
|
||
<button className="btn btn-secondary btn-sm" type="button" disabled={loading} onClick={() => void loadAll()}>
|
||
{loading ? <RefreshCw size={14} className="animate-spin" /> : <RefreshCw size={14} />}
|
||
<span style={{ marginLeft: 6 }}>{isZh ? '刷新' : 'Refresh'}</span>
|
||
</button>
|
||
<button className="btn btn-primary btn-sm" type="button" onClick={openCreate}>
|
||
<Plus size={14} />
|
||
<span style={{ marginLeft: 6 }}>{isZh ? '新增用户' : 'Add User'}</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="admin-table-shell">
|
||
<table className="admin-table">
|
||
<thead>
|
||
<tr>
|
||
<th>{isZh ? '用户' : 'User'}</th>
|
||
<th>{isZh ? '角色' : 'Role'}</th>
|
||
<th>{isZh ? 'Bot 绑定' : 'Bot Binding'}</th>
|
||
<th>{isZh ? '最近登录' : 'Last Login'}</th>
|
||
<th>{isZh ? '状态' : 'Status'}</th>
|
||
<th>{isZh ? '操作' : 'Actions'}</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{pagedItems.length === 0 ? (
|
||
<tr>
|
||
<td className="admin-table-empty" colSpan={6}>
|
||
{filteredItems.length === 0
|
||
? (isZh ? '当前没有可展示的用户。' : 'No users available right now.')
|
||
: (isZh ? '当前页没有用户。' : 'No users on this page.')}
|
||
</td>
|
||
</tr>
|
||
) : (
|
||
pagedItems.map((item) => {
|
||
const busy = togglingUserId === item.id;
|
||
return (
|
||
<tr key={item.id}>
|
||
<td>
|
||
<div className="admin-table-name">
|
||
<strong>{item.display_name || item.username}</strong>
|
||
<span className="mono">{item.username}</span>
|
||
</div>
|
||
</td>
|
||
<td>
|
||
<div className="admin-table-secondary">
|
||
<strong>{item.role?.name || (isZh ? '未分配角色' : 'No role')}</strong>
|
||
<span className="mono">{item.role?.role_key || '-'}</span>
|
||
</div>
|
||
</td>
|
||
<td>
|
||
<div className="admin-table-secondary">
|
||
<strong>{isZh ? `已绑定 ${item.bot_ids?.length || 0} 个` : `${item.bot_ids?.length || 0} bound`}</strong>
|
||
<span className="mono">{(item.bot_ids || []).slice(0, 2).join(', ') || '-'}</span>
|
||
</div>
|
||
</td>
|
||
<td>{formatLastLogin(item.last_login_at, isZh)}</td>
|
||
<td>
|
||
<div className="admin-status-cell">
|
||
<label className="admin-switch" title={item.is_active ? (isZh ? '停用' : 'Disable') : (isZh ? '启用' : 'Enable')}>
|
||
<input
|
||
type="checkbox"
|
||
checked={item.is_active}
|
||
disabled={busy}
|
||
onChange={(event) => void handleToggleActive(item, event.target.checked)}
|
||
/>
|
||
<span className="admin-switch-track" />
|
||
</label>
|
||
<span>{item.is_active ? (isZh ? '启用' : 'Active') : (isZh ? '停用' : 'Disabled')}</span>
|
||
</div>
|
||
</td>
|
||
<td>
|
||
<div className="admin-table-actions">
|
||
<LucentIconButton
|
||
className="btn btn-secondary btn-sm icon-btn"
|
||
onClick={() => openEdit(item)}
|
||
tooltip={isZh ? '编辑用户' : 'Edit user'}
|
||
aria-label={isZh ? '编辑用户' : 'Edit user'}
|
||
>
|
||
<Pencil size={14} />
|
||
</LucentIconButton>
|
||
<LucentIconButton
|
||
className="btn btn-danger btn-sm icon-btn"
|
||
onClick={() => void handleDelete(item)}
|
||
tooltip={isZh ? '删除用户' : 'Delete user'}
|
||
aria-label={isZh ? '删除用户' : 'Delete user'}
|
||
>
|
||
<Trash2 size={14} />
|
||
</LucentIconButton>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
);
|
||
})
|
||
)}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<div className="skill-market-pager">
|
||
<span className="pager-status">
|
||
{isZh ? `第 ${currentPage} / ${pageCount} 页，共 ${filteredItems.length} 个用户` : `Page ${currentPage} / ${pageCount}, ${filteredItems.length} users`}
|
||
</span>
|
||
<div className="platform-usage-pager-actions">
|
||
<LucentIconButton
|
||
className="btn btn-secondary btn-sm icon-btn pager-icon-btn"
|
||
type="button"
|
||
disabled={currentPage <= 1}
|
||
onClick={() => setPage((value) => Math.max(1, value - 1))}
|
||
tooltip={isZh ? '上一页' : 'Previous'}
|
||
aria-label={isZh ? '上一页' : 'Previous'}
|
||
>
|
||
<ChevronLeft size={16} />
|
||
</LucentIconButton>
|
||
<LucentIconButton
|
||
className="btn btn-secondary btn-sm icon-btn pager-icon-btn"
|
||
type="button"
|
||
disabled={currentPage >= pageCount}
|
||
onClick={() => setPage((value) => Math.min(pageCount, value + 1))}
|
||
tooltip={isZh ? '下一页' : 'Next'}
|
||
aria-label={isZh ? '下一页' : 'Next'}
|
||
>
|
||
<ChevronRight size={16} />
|
||
</LucentIconButton>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<LucentDrawer
|
||
open={editorOpen}
|
||
size="default"
|
||
title={editingUserId == null ? (isZh ? '新增用户' : 'Add User') : (isZh ? '编辑用户' : 'Edit User')}
|
||
description={isZh ? '统一使用 Drawer 管理账号、角色和启停状态。' : 'Use the same Drawer interaction to manage account profile, role, and status.'}
|
||
onClose={() => setEditorOpen(false)}
|
||
bodyClassName="admin-management-drawer-body"
|
||
closeLabel={isZh ? '关闭面板' : 'Close panel'}
|
||
footer={(
|
||
<div className="row-between">
|
||
<div className="field-label">
|
||
{editingUserId == null
|
||
? (isZh ? '创建后可继续在列表中修改密码、角色和启停状态。' : 'After creation, password, role, and status can be updated from the list.')
|
||
: (isZh ? '留空密码表示保持原密码不变。' : 'Leave password empty to keep the existing password.')}
|
||
</div>
|
||
<button className="btn btn-primary" type="button" onClick={() => void handleSave()} disabled={saving}>
|
||
{saving ? <RefreshCw size={14} className="animate-spin" /> : <UserRound size={14} />}
|
||
<span style={{ marginLeft: 6 }}>{saving ? (isZh ? '保存中...' : 'Saving...') : (editingUserId == null ? (isZh ? '创建用户' : 'Create User') : (isZh ? '保存修改' : 'Save Changes'))}</span>
|
||
</button>
|
||
</div>
|
||
)}
|
||
>
|
||
<section className="platform-node-native-panel">
|
||
<div className="platform-node-native-panel-title">{isZh ? '账户信息' : 'Account Details'}</div>
|
||
<div className="platform-node-editor-grid">
|
||
<label className="field">
|
||
<span className="field-label">{isZh ? '用户名' : 'Username'}</span>
|
||
<input
|
||
className="input mono"
|
||
value={draft.username}
|
||
disabled={editingUserId != null}
|
||
onChange={(event) => setDraft((prev) => ({ ...prev, username: event.target.value.trim().toLowerCase() }))}
|
||
placeholder={isZh ? '例如 admin_ops' : 'For example: admin_ops'}
|
||
/>
|
||
</label>
|
||
<label className="field">
|
||
<span className="field-label">{isZh ? '显示名称' : 'Display Name'}</span>
|
||
<input
|
||
className="input"
|
||
value={draft.display_name}
|
||
onChange={(event) => setDraft((prev) => ({ ...prev, display_name: event.target.value }))}
|
||
placeholder={isZh ? '例如 运维管理员' : 'For example: Ops Admin'}
|
||
/>
|
||
</label>
|
||
<label className="field">
|
||
<span className="field-label">{editingUserId == null ? (isZh ? '初始化密码' : 'Initial Password') : (isZh ? '重置密码' : 'Reset Password')}</span>
|
||
<input
|
||
className="input"
|
||
type="password"
|
||
value={draft.password}
|
||
onChange={(event) => setDraft((prev) => ({ ...prev, password: event.target.value }))}
|
||
placeholder={editingUserId == null ? (isZh ? '至少 6 位' : 'At least 6 characters') : (isZh ? '留空则不修改' : 'Leave empty to keep unchanged')}
|
||
/>
|
||
</label>
|
||
<label className="field">
|
||
<span className="field-label">{isZh ? '所属角色' : 'Role'}</span>
|
||
<select
|
||
className="input"
|
||
value={draft.role_id || ''}
|
||
onChange={(event) => setDraft((prev) => ({ ...prev, role_id: Number(event.target.value || 0) }))}
|
||
>
|
||
<option value="">{isZh ? '请选择角色' : 'Select role'}</option>
|
||
{roleOptions.map((role) => (
|
||
<option key={role.id} value={role.id}>
|
||
{role.name}
|
||
</option>
|
||
))}
|
||
</select>
|
||
</label>
|
||
<label className="field platform-node-editor-span-2">
|
||
<span className="field-label">{isZh ? 'Bot 绑定' : 'Bot Bindings'}</span>
|
||
<div className="admin-user-bot-grid">
|
||
{bots.length === 0 ? (
|
||
<div className="field-label">{isZh ? '暂无可绑定 Bot。' : 'No bots available for binding.'}</div>
|
||
) : bots.map((bot) => {
|
||
const checked = draft.bot_ids.includes(bot.id);
|
||
return (
|
||
<label key={bot.id} className={`admin-user-bot-option ${checked ? 'is-active' : ''}`}>
|
||
<input
|
||
type="checkbox"
|
||
checked={checked}
|
||
onChange={(event) => {
|
||
setDraft((prev) => ({
|
||
...prev,
|
||
bot_ids: event.target.checked
|
||
? Array.from(new Set([...prev.bot_ids, bot.id]))
|
||
: prev.bot_ids.filter((item) => item !== bot.id),
|
||
}));
|
||
}}
|
||
/>
|
||
<span className="admin-user-bot-option-copy">
|
||
<strong>{bot.name || bot.id}</strong>
|
||
<small className="mono">{bot.id}</small>
|
||
</span>
|
||
</label>
|
||
);
|
||
})}
|
||
</div>
|
||
</label>
|
||
<label className="field platform-node-editor-span-2">
|
||
<span className="field-label">{isZh ? '启停状态' : 'Status'}</span>
|
||
<div className="admin-switch-row">
|
||
<label className="admin-switch" title={draft.is_active ? (isZh ? '停用' : 'Disable') : (isZh ? '启用' : 'Enable')}>
|
||
<input
|
||
type="checkbox"
|
||
checked={draft.is_active}
|
||
onChange={(event) => setDraft((prev) => ({ ...prev, is_active: event.target.checked }))}
|
||
/>
|
||
<span className="admin-switch-track" />
|
||
</label>
|
||
<span>{draft.is_active ? (isZh ? '启用' : 'Active') : (isZh ? '停用' : 'Disabled')}</span>
|
||
</div>
|
||
</label>
|
||
</div>
|
||
</section>
|
||
</LucentDrawer>
|
||
</div>
|
||
);
|
||
}
|