feat(ui): [UI7-1] 重构主布局AppShell与导航层

client/src/components/navigation/NavLinks.tsx

@@ -6,72 +6,85 @@ import { cn } from "../../lib/utils";
 export type NavItem = {
   to: string;
   label: string;
+  icon: string;
   anyOf?: string[];
 };
 
 export const NAV_ITEMS: NavItem[] = [
-  { to: "/dashboard", label: "仪表盘" },
+  { to: "/dashboard", label: "仪表盘", icon: "dashboard" },
   {
     to: "/reimbursements",
     label: "我的报销",
+    icon: "request_quote",
     anyOf: ["expense.view_own", "expense.view_all"],
   },
   {
     to: "/workflow/tasks",
     label: "待我处理",
+    icon: "fact_check",
     anyOf: ["expense.approve"],
   },
   {
     to: "/invoice-pool",
     label: "票据中心",
+    icon: "receipt_long",
     anyOf: ["invoice.upload", "invoice.view_own", "invoice.manage"],
   },
   {
     to: "/mobile/capture",
     label: "移动拍照",
+    icon: "document_scanner",
     anyOf: ["invoice.upload", "invoice.manage"],
   },
   {
     to: "/mobile/approvals",
     label: "移动审批",
+    icon: "mobile_friendly",
     anyOf: ["expense.approve"],
   },
   {
     to: "/budgets",
     label: "预算管理",
+    icon: "account_balance",
     anyOf: ["budget.view", "budget.manage"],
   },
   {
     to: "/audit-logs",
     label: "审计工作台",
+    icon: "manage_search",
     anyOf: ["system.audit.view"],
   },
   {
     to: "/delegations",
     label: "委派管理",
+    icon: "swap_horiz",
     anyOf: ["expense.proxy_manage"],
   },
   {
     to: "/system/users",
     label: "用户管理",
+    icon: "group",
     anyOf: ["system.users"],
   },
   {
     to: "/system/departments",
     label: "部门管理",
+    icon: "account_tree",
     anyOf: ["system.users"],
   },
   {
     to: "/system/approval-rules",
     label: "审批规则",
+    icon: "rule",
     anyOf: ["system.settings"],
   },
   {
     to: "/system/feature-flags",
     label: "功能开关",
+    icon: "toggle_on",
     anyOf: ["system.settings"],
   },
-  { to: "/settings/profile", label: "个人设置" },
+  { to: "/settings/profile", label: "个人设置", icon: "manage_accounts" },
 ];
 
 export function NavLinks({ onNavigate }: { onNavigate?: () => void }) {
@@ -94,14 +107,15 @@ export function NavLinks({ onNavigate }: { onNavigate?: () => void }) {
           onClick={() => onNavigate?.()}
           className={({ isActive }) =>
             cn(
-              "block rounded-lg px-3 py-2.5 text-sm font-medium transition-colors",
+              "flex items-center gap-3 px-3 py-2 my-1 rounded-lg text-sm transition-colors",
               isActive
-                ? "bg-primary-50 text-primary"
-                : "text-slate-700 hover:bg-slate-50 hover:text-slate-900",
+                ? "bg-zinc-100 font-bold text-zinc-900"
+                : "font-medium text-zinc-600 hover:bg-zinc-50 hover:text-zinc-900",
             )
           }
         >
-          {item.label}
+          <span className="material-symbols-outlined text-[20px]">{item.icon}</span>
+          <span>{item.label}</span>
         </NavLink>
       ))}
     </nav>