feat(admin-v2): wire Accounts table search to API params

- Add searchParams state connected to useQuery queryKey/queryFn
- Enable role and status columns as searchable select dropdowns
- Map username search field to backend 'search' param
- Add onSubmit/onReset callbacks on ProTable
This commit is contained in:
iven
2026-03-31 16:29:30 +08:00
parent 4b9698034c
commit 721451f6a7

View File

@@ -40,10 +40,11 @@ export default function Accounts() {
const [form] = Form.useForm()
const [modalOpen, setModalOpen] = useState(false)
const [editingId, setEditingId] = useState<string | null>(null)
const [searchParams, setSearchParams] = useState<Record<string, string>>({})
const { data, isLoading } = useQuery({
queryKey: ['accounts'],
queryFn: ({ signal }) => accountService.list(signal),
queryKey: ['accounts', searchParams],
queryFn: ({ signal }) => accountService.list(searchParams, signal),
})
const updateMutation = useMutation({
@@ -68,21 +69,31 @@ export default function Accounts() {
})
const columns: ProColumns<AccountPublic>[] = [
{ title: '用户名', dataIndex: 'username', width: 120 },
{ title: '用户名', dataIndex: 'username', width: 120, tooltip: '搜索用户名、邮箱或显示名' },
{ title: '显示名', dataIndex: 'display_name', width: 120, hideInSearch: true },
{ title: '邮箱', dataIndex: 'email', width: 180 },
{
title: '角色',
dataIndex: 'role',
width: 120,
hideInSearch: true,
valueType: 'select',
valueEnum: {
super_admin: { text: '超级管理员' },
admin: { text: '管理员' },
user: { text: '用户' },
},
render: (_, record) => <Tag color={roleColors[record.role]}>{roleLabels[record.role] || record.role}</Tag>,
},
{
title: '状态',
dataIndex: 'status',
width: 100,
hideInSearch: true,
valueType: 'select',
valueEnum: {
active: { text: '正常', status: 'Success' },
disabled: { text: '已禁用', status: 'Default' },
suspended: { text: '已封禁', status: 'Error' },
},
render: (_, record) => <Tag color={statusColors[record.status]}>{statusLabels[record.status] || record.status}</Tag>,
},
{
@@ -154,6 +165,21 @@ export default function Accounts() {
rowKey="id"
search={{}}
toolBarRender={() => []}
onSubmit={(values) => {
const filtered: Record<string, string> = {}
for (const [k, v] of Object.entries(values)) {
if (v !== undefined && v !== null && v !== '') {
// Map 'username' search field to backend 'search' param
if (k === 'username') {
filtered.search = String(v)
} else {
filtered[k] = String(v)
}
}
}
setSearchParams(filtered)
}}
onReset={() => setSearchParams({})}
pagination={{
total: data?.total ?? 0,
pageSize: data?.page_size ?? 20,