R29-1 R29-6: 重构海音达工作台壳层与高频页面

client/src/components/navigation/NavLinks.tsx

@@ -3,6 +3,11 @@ import { useQuery } from "@tanstack/react-query";
 import { fetchSystemNavigation, type NavigationItem } from "../../api/workspace";
 import { useAuth } from "../../auth/AuthContext";
 import { hasAnyPermission } from "../../auth/permissions";
+import {
+  ADMIN_NAV_ORDER,
+  BACKUP_NAV_ORDER,
+  MAIN_NAV_ORDER,
+} from "../../features/navigation/schema";
 import { cn } from "../../lib/utils";
 
 export type NavItem = {
@@ -38,15 +43,11 @@ export const NAV_ITEMS: NavItem[] = [
   { to: "/invoice-pool", label: "票据中心", icon: "receipt_long", anyOf: ["invoice.upload", "invoice.view_own", "invoice.manage"] },
   { to: "/inventory-checks", label: "资产盘点", icon: "inventory", anyOf: ["asset.inventory"] },
   { to: "/system/cutover", label: "切换控制台", icon: "swap_calls", anyOf: ["system.settings"] },
-  { to: "/system/integrations/erp", label: "ERP 集成", icon: "hub", anyOf: ["integration.manage"] },
+  { to: "/system/integrations/erp", label: "外部系统桥接", icon: "hub", anyOf: ["integration.manage"] },
   { to: "/dashboard", label: "仪表盘", icon: "dashboard", anyOf: ["report.dashboard.view"] },
   { to: "/settings/profile", label: "个人设置", icon: "manage_accounts" },
 ];
 
-const MAIN_NAV_ORDER = ["/portal", "/team", "/leave-requests", "/reimbursements", "/assets", "/weekly-reports", "/todos", "/announcements", "/projects"];
-const ADMIN_NAV_ORDER = ["/system/workspace", "/people", "/system/workflow-definitions", "/system/settings", "/system/feature-flags", "/audit-logs"];
-const BACKUP_NAV_ORDER = ["/workflow/tasks", "/contracts-registry", "/purchase-requests", "/travel-requests", "/budgets", "/payment-batches", "/ap-operations", "/invoice-pool", "/inventory-checks", "/system/cutover", "/system/integrations/erp", "/dashboard", "/settings/profile"];
-
 const LEGACY_ACCESSIBLE_LABELS: Record<string, string> = {
   "/reimbursements": "我的报销",
   "/workflow/tasks": "待我处理",
@@ -61,38 +62,56 @@ type ResolvedNavItem = {
 };
 
 function renderNavItem(item: ResolvedNavItem, onNavigate?: () => void) {
+  const accessibleLabel = LEGACY_ACCESSIBLE_LABELS[item.href] ?? item.label;
+
   return (
     <NavLink
       key={item.key ?? item.href}
       to={item.href}
-      aria-label={LEGACY_ACCESSIBLE_LABELS[item.href] ?? item.label}
-      title={LEGACY_ACCESSIBLE_LABELS[item.href] ?? item.label}
+      aria-label={accessibleLabel}
+      title={accessibleLabel}
       onClick={() => onNavigate?.()}
       className={({ isActive }) =>
         cn(
-          "flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition-colors",
+          "group flex items-center gap-3 rounded-2xl px-3 py-2.5 text-sm transition-colors",
           isActive
-            ? "bg-zinc-100 font-bold text-zinc-900"
-            : "font-medium text-zinc-600 hover:bg-zinc-50 hover:text-zinc-900",
+            ? "bg-zinc-900 text-white shadow-sm"
+            : "text-zinc-600 hover:bg-zinc-50 hover:text-zinc-900",
         )
       }
     >
-      <span className="material-symbols-outlined text-[20px]">{item.icon}</span>
-      <span>{item.label}</span>
+      {({ isActive }) => (
+        <>
+          <span
+            className={cn(
+              "flex size-9 items-center justify-center rounded-xl border text-[20px] transition-colors",
+              isActive
+                ? "border-white/15 bg-white/10 text-white"
+                : "border-zinc-200 bg-white text-zinc-500 group-hover:border-zinc-300 group-hover:text-zinc-900",
+            )}
+          >
+            <span className="material-symbols-outlined text-[20px]">{item.icon}</span>
+          </span>
+          <span className="min-w-0 flex-1 truncate font-medium">{item.label}</span>
+        </>
+      )}
     </NavLink>
   );
 }
 
-function renderSection(title: string, items: ResolvedNavItem[], onNavigate?: () => void) {
+function renderSection(title: string, description: string, items: ResolvedNavItem[], onNavigate?: () => void) {
   if (!items.length) {
     return null;
   }
 
   return (
-    <div className="space-y-1">
-      <div className="px-3 pt-2 text-[11px] font-semibold uppercase tracking-wide text-zinc-400">{title}</div>
-      {items.map((item) => renderNavItem(item, onNavigate))}
-    </div>
+    <section className="space-y-2">
+      <div className="px-3">
+        <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-zinc-400">{title}</div>
+        <div className="mt-1 text-xs text-zinc-500">{description}</div>
+      </div>
+      <div className="space-y-1.5">{items.map((item) => renderNavItem(item, onNavigate))}</div>
+    </section>
   );
 }
 
@@ -102,14 +121,15 @@ function renderBackupSection(items: ResolvedNavItem[], onNavigate?: () => void)
   }
 
   return (
-    <details className="rounded-xl border border-zinc-200 bg-zinc-50/80 px-2 py-2">
-      <summary className="flex cursor-pointer list-none items-center justify-between px-2 py-1 text-sm font-semibold text-zinc-700">
-        <span>备用模块</span>
+    <details className="rounded-2xl border border-zinc-200 bg-zinc-50/80 px-3 py-3">
+      <summary className="flex cursor-pointer list-none items-center justify-between gap-3 rounded-xl px-2 py-1.5 text-sm font-semibold text-zinc-700">
+        <div>
+          <div>备用模块</div>
+          <div className="mt-0.5 text-xs font-normal text-zinc-500">默认收起，不干扰主路径</div>
+        </div>
         <span className="text-xs font-medium text-zinc-400">按需展开</span>
       </summary>
-      <div className="mt-2 space-y-1 pb-1">
-        {items.map((item) => renderNavItem(item, onNavigate))}
-      </div>
+      <div className="mt-3 space-y-1.5 pb-1">{items.map((item) => renderNavItem(item, onNavigate))}</div>
     </details>
   );
 }
@@ -130,6 +150,7 @@ function buildFallbackItems(permissions: string[]) {
 function normalizeSections(sections: { main: NavigationItem[]; admin: NavigationItem[]; backup: NavigationItem[] }) {
   const allItems = [...sections.main, ...sections.admin, ...sections.backup];
   const byHref = new Map<string, ResolvedNavItem>();
+
   for (const item of allItems) {
     if (!byHref.has(item.href)) {
       byHref.set(item.href, item);
@@ -137,38 +158,45 @@ function normalizeSections(sections: { main: NavigationItem[]; admin: Navigation
   }
 
   const used = new Set<string>();
-  const take = (hrefs: string[]) => hrefs
-    .map((href) => {
-      const item = byHref.get(href);
-      if (item) {
-        used.add(href);
-      }
-      return item;
-    })
-    .filter((item): item is ResolvedNavItem => Boolean(item));
+  const take = (hrefs: string[]) =>
+    hrefs
+      .map((href) => {
+        const item = byHref.get(href);
+        if (item) {
+          used.add(href);
+        }
+        return item;
+      })
+      .filter((item): item is ResolvedNavItem => Boolean(item));
 
-  const main = take(MAIN_NAV_ORDER);
-  const admin = take(ADMIN_NAV_ORDER);
-  const backup = [
-    ...take(BACKUP_NAV_ORDER),
-    ...allItems.filter((item) => !used.has(item.href)).map((item) => ({ key: item.key, href: item.href, label: item.label, icon: item.icon })),
-  ];
-
-  return { main, admin, backup };
+  return {
+    main: take(MAIN_NAV_ORDER),
+    admin: take(ADMIN_NAV_ORDER),
+    backup: [
+      ...take(BACKUP_NAV_ORDER),
+      ...allItems
+        .filter((item) => !used.has(item.href))
+        .map((item) => ({ key: item.key, href: item.href, label: item.label, icon: item.icon })),
+    ],
+  };
 }
 
 export function NavLinks({ onNavigate }: { onNavigate?: () => void }) {
   const { permissions } = useAuth();
-  const navigationQuery = useQuery({ queryKey: ["system-navigation"], queryFn: fetchSystemNavigation, staleTime: 60_000 });
+  const navigationQuery = useQuery({
+    queryKey: ["system-navigation"],
+    queryFn: fetchSystemNavigation,
+    staleTime: 60_000,
+  });
 
   const sections = navigationQuery.data?.sections
     ? normalizeSections(navigationQuery.data.sections)
     : buildFallbackItems(permissions);
 
   return (
-    <nav className="space-y-4">
-      {renderSection("主导航", sections.main, onNavigate)}
-      {renderSection("管理入口", sections.admin, onNavigate)}
+    <nav className="space-y-5">
+      {renderSection("主导航", "优先处理今日工作与高频协同。", sections.main, onNavigate)}
+      {renderSection("管理入口", "仅管理员与负责人使用。", sections.admin, onNavigate)}
       {renderBackupSection(sections.backup, onNavigate)}
     </nav>
   );