feat(roles): role management pages (super-admin)
- /roles — role table with create dialog and a permission-matrix sheet: collapsible per-module sections (selected/total counts, role's own modules start expanded) and a key/description filter that force- expands matches; super-admin role is read-only - /admin-users — user search (Enter to run) with role assignment dialog; editing your own roles is blocked Both nav items gate on auth:role:* keys, which only super-admin holds. Co-Authored-By: Claude Fable 5 <[email protected]>
This commit is contained in:
Claude Fable 5
@@ -0,0 +1,189 @@
|
||||
import { createFileRoute } from '@tanstack/react-router'
|
||||
import { PERM, requirePermission } from '@/auth/permissions'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { useEffect, useState } from 'react'
|
||||
import type { ColumnDef } from '@tanstack/react-table'
|
||||
import { toast } from 'sonner'
|
||||
import type { RoleUser } from '@/api/types'
|
||||
import { fetchRoles, searchRoleUsers, syncUserRoles } from '@/api/modules/roles'
|
||||
import { useAuthStore } from '@/auth/store'
|
||||
import { handleApiError } from '@/lib/errors'
|
||||
import { DataTable } from '@/components/data-table/data-table'
|
||||
import { PageHeader } from '@/components/page-header'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Checkbox } from '@/components/ui/checkbox'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog'
|
||||
import { Input } from '@/components/ui/input'
|
||||
|
||||
export const Route = createFileRoute('/_authed/admin-users')({
|
||||
beforeLoad: () => requirePermission(PERM.ROLE_ASSIGN),
|
||||
component: AdminUsersPage,
|
||||
})
|
||||
|
||||
function AdminUsersPage() {
|
||||
const myUid = useAuthStore((s) => s.user?.uid)
|
||||
// search applies on Enter to avoid a request per keystroke
|
||||
const [queryInput, setQueryInput] = useState('')
|
||||
const [query, setQuery] = useState('')
|
||||
const [editing, setEditing] = useState<RoleUser | null>(null)
|
||||
|
||||
const results = useQuery({
|
||||
queryKey: ['role-users', query],
|
||||
queryFn: () => searchRoleUsers(query),
|
||||
enabled: query.length > 0,
|
||||
})
|
||||
|
||||
const columns: ColumnDef<RoleUser>[] = [
|
||||
{
|
||||
header: '用户',
|
||||
cell: ({ row }) => (
|
||||
<div>
|
||||
<div className="font-medium">{row.original.display_name ?? row.original.username ?? '—'}</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
{row.original.email}
|
||||
<code className="ml-2 font-mono">{row.original.uid}</code>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
header: '角色',
|
||||
cell: ({ row }) =>
|
||||
row.original.roles.length > 0 ? (
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{row.original.roles.map((role) => (
|
||||
<Badge key={role} variant="secondary">
|
||||
{role}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
'—'
|
||||
),
|
||||
},
|
||||
{
|
||||
header: '操作',
|
||||
cell: ({ row }) =>
|
||||
row.original.uid === myUid ? (
|
||||
<span className="text-xs text-muted-foreground">不能修改自己</span>
|
||||
) : (
|
||||
<Button size="sm" variant="outline" onClick={() => setEditing(row.original)}>
|
||||
分配角色
|
||||
</Button>
|
||||
),
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<div>
|
||||
<PageHeader
|
||||
title="用户角色"
|
||||
description="搜索用户并分配角色（不能修改自己的角色）"
|
||||
actions={
|
||||
<Input
|
||||
value={queryInput}
|
||||
onChange={(e) => setQueryInput(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') setQuery(queryInput.trim())
|
||||
}}
|
||||
placeholder="邮箱 / 用户名 / UID，回车搜索"
|
||||
className="h-8 w-64"
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<DataTable
|
||||
columns={columns}
|
||||
data={results.data?.data ?? []}
|
||||
loading={query.length > 0 && results.isPending}
|
||||
emptyText={query ? '没有匹配的用户' : '输入关键字并回车搜索'}
|
||||
/>
|
||||
<AssignRolesDialog
|
||||
user={editing}
|
||||
onClose={() => setEditing(null)}
|
||||
onSaved={() => void results.refetch()}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function AssignRolesDialog({
|
||||
user,
|
||||
onClose,
|
||||
onSaved,
|
||||
}: {
|
||||
user: RoleUser | null
|
||||
onClose: () => void
|
||||
onSaved: () => void
|
||||
}) {
|
||||
const roles = useQuery({ queryKey: ['roles'], queryFn: fetchRoles, enabled: user !== null })
|
||||
const [selected, setSelected] = useState<Set<string>>(new Set())
|
||||
const [busy, setBusy] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
setSelected(new Set(user?.roles ?? []))
|
||||
}, [user])
|
||||
|
||||
const toggle = (name: string, checked: boolean) => {
|
||||
setSelected((prev) => {
|
||||
const next = new Set(prev)
|
||||
if (checked) next.add(name)
|
||||
else next.delete(name)
|
||||
return next
|
||||
})
|
||||
}
|
||||
|
||||
const save = async () => {
|
||||
if (!user) return
|
||||
setBusy(true)
|
||||
try {
|
||||
await syncUserRoles(user.uid, [...selected])
|
||||
toast.success(`已更新 ${user.display_name ?? user.email} 的角色`)
|
||||
onSaved()
|
||||
onClose()
|
||||
} catch (error) {
|
||||
handleApiError(error)
|
||||
} finally {
|
||||
setBusy(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={user !== null} onOpenChange={(open) => !open && onClose()}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>分配角色：{user?.display_name ?? user?.email}</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="flex flex-col gap-2">
|
||||
{(roles.data?.data ?? []).map((role) => (
|
||||
<label key={role.name} className="flex items-center gap-2 text-sm">
|
||||
<Checkbox
|
||||
checked={selected.has(role.name)}
|
||||
onCheckedChange={(checked) => toggle(role.name, checked === true)}
|
||||
/>
|
||||
<span className="font-medium">{role.name}</span>
|
||||
{role.builtin && <Badge variant="secondary">内建</Badge>}
|
||||
<span className="ml-auto text-xs text-muted-foreground">
|
||||
{role.name === 'super-admin' ? '全部权限' : `${role.permissions.length} 项权限`}
|
||||
</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={onClose}>
|
||||
取消
|
||||
</Button>
|
||||
<Button onClick={save} disabled={busy}>
|
||||
{busy ? '保存中…' : '保存'}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user