feat: 优化web
This commit is contained in:
@@ -0,0 +1,22 @@
|
||||
'use client';
|
||||
|
||||
import { IamSectionCard } from '@/components/iam/IamSectionCard';
|
||||
import { MenuTreeView } from '@/components/iam/MenuTreeView';
|
||||
import { useApi } from '@/lib/hooks/use-api';
|
||||
import { iamMenu } from '@/lib/api/iam';
|
||||
import type { MenuNode } from '@/lib/api/types/menu';
|
||||
|
||||
export default function IamResourcePage() {
|
||||
const { data, loading, error } = useApi<MenuNode[]>(() => iamMenu.tree());
|
||||
|
||||
return (
|
||||
<IamSectionCard
|
||||
title="资源(菜单)"
|
||||
description="全局菜单树,对接 GET /api/v1/iam/menu/tree;与侧栏 nav 数据源一致(nav 会按角色过滤)。"
|
||||
>
|
||||
{loading ? <p className="text-sm text-neutral-500">加载中…</p> : null}
|
||||
{error ? <p className="text-sm text-red-600">{error}</p> : null}
|
||||
{!loading && !error && data ? <MenuTreeView tree={data} /> : null}
|
||||
</IamSectionCard>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
'use client';
|
||||
|
||||
import { IamSectionCard } from '@/components/iam/IamSectionCard';
|
||||
import { useApi } from '@/lib/hooks/use-api';
|
||||
import { iamTenant } from '@/lib/api/iam';
|
||||
import type { IamTenant } from '@/lib/api/types/tenant';
|
||||
|
||||
export default function IamTenantPage() {
|
||||
const { data, loading, error } = useApi(() => iamTenant.list({ page: '1', page_size: '100' }));
|
||||
const rows = data?.items ?? [];
|
||||
|
||||
return (
|
||||
<IamSectionCard
|
||||
title="租户管理"
|
||||
description="对接 GET /api/v1/iam/tenant/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.tenant_name ?? '—'}</td>
|
||||
<td className="py-2 pr-2 font-mono text-xs">{r.tenant_code ?? '—'}</td>
|
||||
<td className="py-2 pr-2">{r.status ?? '—'}</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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
'use client';
|
||||
|
||||
import { DeptTreeView } from '@/components/iam/DeptTreeView';
|
||||
import { IamSectionCard } from '@/components/iam/IamSectionCard';
|
||||
import { useApi } from '@/lib/hooks/use-api';
|
||||
import { iamDept } from '@/lib/api/iam';
|
||||
import type { DeptNode } from '@/lib/api/types/dept';
|
||||
|
||||
export default function IamDeptPage() {
|
||||
const { data, loading, error } = useApi<DeptNode[]>(() => iamDept.tree());
|
||||
|
||||
return (
|
||||
<IamSectionCard title="部门管理" description="对接 GET /api/v1/iam/dept/tree。">
|
||||
{loading ? <p className="text-sm text-neutral-500">加载中…</p> : null}
|
||||
{error ? <p className="text-sm text-red-600">{error}</p> : null}
|
||||
{!loading && !error && data ? <DeptTreeView tree={data} /> : null}
|
||||
</IamSectionCard>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
'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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
'use client';
|
||||
|
||||
import { IamSectionCard } from '@/components/iam/IamSectionCard';
|
||||
import { useApi } from '@/lib/hooks/use-api';
|
||||
import { iamUser } from '@/lib/api/iam';
|
||||
import type { IamUser } from '@/lib/api/types/user';
|
||||
|
||||
export default function IamUserPage() {
|
||||
const { data, loading, error } = useApi(() => iamUser.list({ page: '1', page_size: '20' }));
|
||||
const rows = data?.items ?? [];
|
||||
|
||||
return (
|
||||
<IamSectionCard title="用户管理" description="对接 GET /api/v1/iam/user/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-[520px] 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.user_name ?? '—'}</td>
|
||||
<td className="py-2 pr-2">{r.real_name ?? '—'}</td>
|
||||
<td className="py-2 pr-2">{r.status ?? '—'}</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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
export default function AccountPage() {
|
||||
return (
|
||||
<div className="w-full rounded-lg bg-white p-4 text-neutral-700 shadow-sm">
|
||||
<h1 className="text-lg font-medium">个人中心</h1>
|
||||
<p className="mt-2 text-sm text-neutral-500">资料与密码修改等功能可在此页对接 IAM。</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
export default function DashboardPage() {
|
||||
return (
|
||||
<div className="w-full rounded-lg bg-white p-4 text-neutral-700 shadow-sm">
|
||||
<h1 className="text-lg font-medium">概览</h1>
|
||||
<p className="mt-2 text-sm text-neutral-500">后续在此接 Tabs + 业务页。</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import { AuthenticatedLayout } from '@/components/layout/AuthenticatedLayout';
|
||||
|
||||
/**
|
||||
* 单一布局包裹 /dashboard 与 /user 等路由,避免 Tab 在二者间切换时卸载布局、
|
||||
* 导致 AppChrome 重挂载并重复请求侧栏菜单。
|
||||
*/
|
||||
export default function MainLayout({ children }: { children: React.ReactNode }) {
|
||||
return <AuthenticatedLayout>{children}</AuthenticatedLayout>;
|
||||
}
|
||||
Reference in New Issue
Block a user