feat: 优化web

2026-04-23 18:58:13 +08:00
commit 544a2f3428
160 changed files with 27327 additions and 0 deletions
@@ -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>
+  );
+}