44 lines
1.8 KiB
TypeScript
44 lines
1.8 KiB
TypeScript
'use client';
|
|
|
|
import { IamSectionCard } from '@/components/iam/IamSectionCard';
|
|
import { useApi } from '@/lib/hooks/use-api';
|
|
import { iamRole } from '@/lib/api/iam';
|
|
import type { IamRole } from '@/lib/api/types/role';
|
|
|
|
export default function IamRolePage() {
|
|
const { data, loading, error } = useApi(() => iamRole.list({ page: '1', page_size: '50' }));
|
|
const rows = data?.items ?? [];
|
|
|
|
return (
|
|
<IamSectionCard title="角色管理" description="对接 GET /api/v1/iam/role/list。">
|
|
{loading ? <p className="text-sm text-neutral-500">加载中…</p> : null}
|
|
{error ? <p className="text-sm text-red-600">{error}</p> : null}
|
|
{!loading && !error ? (
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full min-w-[480px] border-collapse text-sm">
|
|
<thead>
|
|
<tr className="border-b border-neutral-200 text-left text-neutral-600">
|
|
<th className="py-2 pr-2">角色名</th>
|
|
<th className="py-2 pr-2">编码</th>
|
|
<th className="py-2 pr-2">数据范围</th>
|
|
<th className="py-2">ID</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{rows.map((r) => (
|
|
<tr key={r.id} className="border-b border-neutral-100">
|
|
<td className="py-2 pr-2">{r.role_name ?? '—'}</td>
|
|
<td className="py-2 pr-2 font-mono text-xs">{r.role_code ?? '—'}</td>
|
|
<td className="py-2 pr-2">{r.data_scope ?? '—'}</td>
|
|
<td className="py-2 font-mono text-xs text-neutral-500">{r.id}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
{!rows.length ? <p className="mt-2 text-neutral-500">暂无角色</p> : null}
|
|
</div>
|
|
) : null}
|
|
</IamSectionCard>
|
|
);
|
|
}
|