feat: add system governance pages
This commit is contained in:
hailin
256
frontend/src/features/system/SystemUsersPage.tsx
Normal file
256
frontend/src/features/system/SystemUsersPage.tsx
Normal file
@@ -0,0 +1,256 @@
|
||||
import * as React from 'react'
|
||||
|
||||
import { AppDataTable, type AppDataTableColumn } from '@/components/app/AppDataTable'
|
||||
import { AppEmptyState } from '@/components/app/AppEmptyState'
|
||||
import { AppFilterBar } from '@/components/app/AppFilterBar'
|
||||
import { AppPageHeader } from '@/components/app/AppPageHeader'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Checkbox } from '@/components/ui/checkbox'
|
||||
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Switch } from '@/components/ui/switch'
|
||||
|
||||
import { createUser, listRoles, listUserGroups, listUsers, setUserGroups, setUserRoles, updateUser } from './api'
|
||||
import type { RoleDetail, SystemUser, UserGroup } from './types'
|
||||
|
||||
type UserForm = {
|
||||
username: string
|
||||
display_name: string
|
||||
email: string
|
||||
password: string
|
||||
}
|
||||
|
||||
const emptyForm: UserForm = {
|
||||
username: '',
|
||||
display_name: '',
|
||||
email: '',
|
||||
password: ''
|
||||
}
|
||||
|
||||
export function SystemUsersPage() {
|
||||
const [users, setUsers] = React.useState<SystemUser[]>([])
|
||||
const [roles, setRoles] = React.useState<RoleDetail[]>([])
|
||||
const [groups, setGroups] = React.useState<UserGroup[]>([])
|
||||
const [query, setQuery] = React.useState('')
|
||||
const [form, setForm] = React.useState<UserForm>(emptyForm)
|
||||
const [editingUser, setEditingUser] = React.useState<SystemUser | null>(null)
|
||||
const [error, setError] = React.useState('')
|
||||
|
||||
const load = React.useCallback(async () => {
|
||||
try {
|
||||
const [nextUsers, nextRoles, nextGroups] = await Promise.all([listUsers(), listRoles(), listUserGroups()])
|
||||
setUsers(nextUsers)
|
||||
setRoles(nextRoles)
|
||||
setGroups(nextGroups)
|
||||
setError('')
|
||||
} catch (reason) {
|
||||
setError(reason instanceof Error ? reason.message : '加载失败')
|
||||
}
|
||||
}, [])
|
||||
|
||||
React.useEffect(() => {
|
||||
void load()
|
||||
}, [load])
|
||||
|
||||
const filteredUsers = users.filter((user) => {
|
||||
const keyword = query.trim().toLowerCase()
|
||||
if (!keyword) return true
|
||||
return `${user.username} ${user.display_name} ${user.email}`.toLowerCase().includes(keyword)
|
||||
})
|
||||
|
||||
async function handleCreateUser(event: React.FormEvent<HTMLFormElement>) {
|
||||
event.preventDefault()
|
||||
await createUser({ ...form, is_active: true })
|
||||
setForm(emptyForm)
|
||||
await load()
|
||||
}
|
||||
|
||||
async function toggleUserActive(user: SystemUser, checked: boolean) {
|
||||
await updateUser(user.id, { is_active: checked })
|
||||
await load()
|
||||
}
|
||||
|
||||
const columns: AppDataTableColumn<SystemUser>[] = [
|
||||
{
|
||||
key: 'user',
|
||||
header: '用户',
|
||||
cell: (user) => (
|
||||
<div>
|
||||
<p className="font-medium text-foreground">{user.display_name || user.username}</p>
|
||||
<p className="mt-1 text-sm text-muted-foreground">{user.username}</p>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
{
|
||||
key: 'email',
|
||||
header: '邮箱',
|
||||
cell: (user) => <span className="text-muted-foreground">{user.email || '-'}</span>
|
||||
},
|
||||
{
|
||||
key: 'roles',
|
||||
header: '角色',
|
||||
cell: (user) => (
|
||||
<div className="flex max-w-[260px] flex-wrap gap-1">
|
||||
{user.roles.length ? user.roles.map((role) => <Badge key={role.id} variant="secondary">{role.name}</Badge>) : '-'}
|
||||
</div>
|
||||
)
|
||||
},
|
||||
{
|
||||
key: 'groups',
|
||||
header: '用户组',
|
||||
cell: (user) => (
|
||||
<div className="flex max-w-[260px] flex-wrap gap-1">
|
||||
{user.user_groups.length
|
||||
? user.user_groups.map((group) => <Badge key={group.id} variant="info">{group.name}</Badge>)
|
||||
: '-'}
|
||||
</div>
|
||||
)
|
||||
},
|
||||
{
|
||||
key: 'active',
|
||||
header: '状态',
|
||||
cell: (user) => (
|
||||
<Switch
|
||||
checked={user.is_active}
|
||||
onClick={(event) => event.stopPropagation()}
|
||||
onCheckedChange={(checked) => void toggleUserActive(user, checked)}
|
||||
/>
|
||||
)
|
||||
},
|
||||
{
|
||||
key: 'actions',
|
||||
header: '操作',
|
||||
cell: (user) => (
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={(event) => {
|
||||
event.stopPropagation()
|
||||
setEditingUser(user)
|
||||
}}
|
||||
>
|
||||
授权
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
]
|
||||
|
||||
return (
|
||||
<main className="min-h-screen bg-background p-6 text-foreground">
|
||||
<div className="mx-auto flex max-w-7xl flex-col gap-4">
|
||||
<AppPageHeader title="用户管理" description="维护平台账号、启用状态、角色和业务用户组。" />
|
||||
|
||||
<form className="grid gap-3 rounded-lg border border-border bg-surface p-3 md:grid-cols-[1fr_1fr_1fr_1fr_auto]" onSubmit={handleCreateUser}>
|
||||
<Input placeholder="账号" value={form.username} onChange={(event) => setForm({ ...form, username: event.target.value })} required />
|
||||
<Input placeholder="显示名称" value={form.display_name} onChange={(event) => setForm({ ...form, display_name: event.target.value })} />
|
||||
<Input placeholder="邮箱" value={form.email} onChange={(event) => setForm({ ...form, email: event.target.value })} />
|
||||
<Input placeholder="初始密码" type="password" value={form.password} onChange={(event) => setForm({ ...form, password: event.target.value })} required />
|
||||
<Button type="submit">创建用户</Button>
|
||||
</form>
|
||||
|
||||
<AppFilterBar>
|
||||
<Input placeholder="搜索账号、姓名或邮箱" value={query} onChange={(event) => setQuery(event.target.value)} />
|
||||
</AppFilterBar>
|
||||
|
||||
{error ? <AppEmptyState title="无法加载用户" description={error} /> : null}
|
||||
{!error ? (
|
||||
<AppDataTable
|
||||
columns={columns}
|
||||
rows={filteredUsers}
|
||||
getRowKey={(user) => user.id}
|
||||
emptyTitle="暂无用户"
|
||||
emptyDescription="创建账号后会显示在这里。"
|
||||
footer={<p className="text-sm text-muted-foreground">当前显示 {filteredUsers.length} 个用户</p>}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
<UserAccessDialog
|
||||
user={editingUser}
|
||||
roles={roles}
|
||||
groups={groups}
|
||||
onClose={() => setEditingUser(null)}
|
||||
onSaved={load}
|
||||
/>
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
|
||||
function UserAccessDialog({
|
||||
user,
|
||||
roles,
|
||||
groups,
|
||||
onClose,
|
||||
onSaved
|
||||
}: {
|
||||
user: SystemUser | null
|
||||
roles: RoleDetail[]
|
||||
groups: UserGroup[]
|
||||
onClose: () => void
|
||||
onSaved: () => Promise<void>
|
||||
}) {
|
||||
const [roleIds, setRoleIds] = React.useState<number[]>([])
|
||||
const [groupIds, setGroupIds] = React.useState<number[]>([])
|
||||
|
||||
React.useEffect(() => {
|
||||
setRoleIds(user?.roles.map((role) => role.id) ?? [])
|
||||
setGroupIds(user?.user_groups.map((group) => group.id) ?? [])
|
||||
}, [user])
|
||||
|
||||
async function handleSave() {
|
||||
if (!user) return
|
||||
await Promise.all([setUserRoles(user.id, roleIds), setUserGroups(user.id, groupIds)])
|
||||
await onSaved()
|
||||
onClose()
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={Boolean(user)} onOpenChange={(open) => !open && onClose()}>
|
||||
<DialogContent className="sm:max-w-xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>用户授权</DialogTitle>
|
||||
<DialogDescription>为 {user?.display_name || user?.username} 分配角色和用户组。</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<div className="grid gap-2">
|
||||
<Label>角色</Label>
|
||||
<div className="grid max-h-64 gap-2 overflow-auto rounded-md border border-border p-3">
|
||||
{roles.map((role) => (
|
||||
<label key={role.id} className="flex items-center gap-2 text-sm">
|
||||
<Checkbox
|
||||
checked={roleIds.includes(role.id)}
|
||||
onCheckedChange={(checked) =>
|
||||
setRoleIds((current) => checked ? [...current, role.id] : current.filter((id) => id !== role.id))
|
||||
}
|
||||
/>
|
||||
<span>{role.name}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label>用户组</Label>
|
||||
<div className="grid max-h-64 gap-2 overflow-auto rounded-md border border-border p-3">
|
||||
{groups.map((group) => (
|
||||
<label key={group.id} className="flex items-center gap-2 text-sm">
|
||||
<Checkbox
|
||||
checked={groupIds.includes(group.id)}
|
||||
onCheckedChange={(checked) =>
|
||||
setGroupIds((current) => checked ? [...current, group.id] : current.filter((id) => id !== group.id))
|
||||
}
|
||||
/>
|
||||
<span>{group.name}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={onClose}>取消</Button>
|
||||
<Button onClick={() => void handleSave()}>保存授权</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user