R67 A1-A6：官网风格前端 UI 刷新

client/src/components/navigation/NavLinks.tsx

@@ -75,10 +75,10 @@ function renderNavItem(item: ResolvedNavItem, onNavigate?: () => void) {
       onClick={() => onNavigate?.()}
       className={({ isActive }) =>
         cn(
-          "group flex items-center gap-3 rounded-2xl px-3 py-2.5 text-sm transition-colors",
+          "group flex items-center gap-3 rounded-2xl px-3 py-2.5 text-sm transition duration-200",
           isActive
-            ? "bg-zinc-900 text-white shadow-sm"
-            : "text-zinc-600 hover:bg-zinc-50 hover:text-zinc-900",
+            ? "bg-primary text-white shadow-sm"
+            : "text-[var(--color-text-secondary)] hover:-translate-y-0.5 hover:bg-white/70 hover:text-[var(--color-text-primary)] hover:shadow-sm",
         )
       }
     >
@@ -88,8 +88,8 @@ function renderNavItem(item: ResolvedNavItem, onNavigate?: () => void) {
             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",
+                ? "border-white/15 bg-white/15 text-white"
+                : "border-slate-200 bg-white text-[var(--color-text-tertiary)] group-hover:border-slate-300 group-hover:text-primary",
             )}
           >
             <span className="material-symbols-outlined text-[20px]">{item.icon}</span>
@@ -109,8 +109,8 @@ function renderSection(title: string, description: string, items: ResolvedNavIte
   return (
     <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 className="text-[11px] font-bold uppercase tracking-[0.2em] text-primary/70">{title}</div>
+        <div className="mt-1 text-xs leading-5 text-[var(--color-text-tertiary)]">{description}</div>
       </div>
       <div className="space-y-1.5">{items.map((item) => renderNavItem(item, onNavigate))}</div>
     </section>
@@ -123,13 +123,13 @@ function renderBackupSection(items: ResolvedNavItem[], onNavigate?: () => void)
   }
 
   return (
-    <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">
+    <details className="rounded-2xl border border-slate-200 bg-slate-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-[var(--color-text-primary)]">
         <div>
           <div>备用模块</div>
-          <div className="mt-0.5 text-xs font-normal text-zinc-500">默认收起，不干扰主路径</div>
+          <div className="mt-0.5 text-xs font-normal text-[var(--color-text-secondary)]">默认收起，不干扰主路径</div>
         </div>
-        <span className="text-xs font-medium text-zinc-400">按需展开</span>
+        <span className="text-xs font-medium text-[var(--color-text-tertiary)]">按需展开</span>
       </summary>
       <div className="mt-3 space-y-1.5 pb-1">{items.map((item) => renderNavItem(item, onNavigate))}</div>
     </details>