feat: 优化web

web/components/iam/DeptTreeView.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import type { DeptNode } from '@/lib/api/types/dept';
+
+function DeptNodes({ nodes, depth }: { nodes: DeptNode[]; depth: number }) {
+  return (
+    <ul className={depth === 0 ? 'space-y-1' : 'ml-4 mt-1 space-y-1 border-l border-neutral-200 pl-3'}>
+      {nodes.map((n) => (
+        <li key={n.id} className="text-sm">
+          <span className="text-neutral-800">{n.dept_name}</span>
+          {n.children?.length ? <DeptNodes nodes={n.children} depth={depth + 1} /> : null}
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+export function DeptTreeView(props: { tree: DeptNode[] }) {
+  if (!props.tree.length) {
+    return <p className="text-sm text-neutral-500">暂无数据</p>;
+  }
+  return <DeptNodes nodes={props.tree} depth={0} />;
+}

web/components/iam/IamSectionCard.tsx

@@ -0,0 +1,15 @@
+export function IamSectionCard(props: {
+  title: string;
+  description?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="box-border flex min-h-0 w-full flex-1 flex-col rounded-lg border border-neutral-200 bg-white p-3 shadow-sm">
+      <h1 className="text-lg font-medium text-neutral-900">{props.title}</h1>
+      {props.description ? (
+        <p className="mt-1 text-sm text-neutral-500">{props.description}</p>
+      ) : null}
+      <div className="mt-4 min-h-0 flex-1">{props.children}</div>
+    </div>
+  );
+}

web/components/iam/MenuTreeView.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import type { MenuNode } from '@/lib/api/types/menu';
+
+function MenuNodes({ nodes, depth }: { nodes: MenuNode[]; depth: number }) {
+  return (
+    <ul className={depth === 0 ? 'space-y-1' : 'ml-4 mt-1 space-y-1 border-l border-neutral-200 pl-3'}>
+      {nodes.map((n) => (
+        <li key={n.id} className="text-sm">
+          <span className="font-medium text-neutral-800">{n.menu_name}</span>
+          {n.path ? (
+            <span className="ml-2 font-mono text-xs text-neutral-500">{n.path}</span>
+          ) : null}
+          {n.perms ? (
+            <span className="ml-2 text-xs text-neutral-400">[{n.perms}]</span>
+          ) : null}
+          {n.children?.length ? <MenuNodes nodes={n.children} depth={depth + 1} /> : null}
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+export function MenuTreeView(props: { tree: MenuNode[] }) {
+  if (!props.tree.length) {
+    return <p className="text-sm text-neutral-500">暂无数据</p>;
+  }
+  return <MenuNodes nodes={props.tree} depth={0} />;
+}