feat(desktop): 工业化升级 A —— 设计系统地基（primitives + lucide + 语义令牌）

把"手搓内联 class + Unicode 字符图标"换成统一组件与真实图标，为后续工业化打底。

- 依赖：装 lucide-react（描线图标，按需 tree-shake）
- 令牌：tailwind.config 加语义色 brand/accent/success/warn/danger + 圆角档位；
  强调色字面量(violet/cyan/emerald…)收敛到令牌，便于整体换肤
- primitives（src/ui，零重依赖自建）：Button/Input/Textarea/Select/Field/Card/Panel/
  Badge/Dot/Tabs/Skeleton/EmptyState/Dialog/Toast(+useToast)/cn，桶文件统一引入
- 迁移：TopBar/LeftNav/BottomDrawer + Home/Report/Runs/Kb/Placeholder/ExecTrace/
  MemoryPanel/StudioView 全部换 primitives + lucide 图标；导航/能力卡/按钮告别
  ▤◆▣▦ 等 Unicode 字符；错误改用全局 Toast；空状态用 EmptyState
- App 包 ToastProvider

验证：tsc + vite build 通过；浏览器(Preview)走查工作台/报告页——真实图标、统一卡片/
按钮/输入；跑报告端到端正常（执行轨迹 lucide 状态图标点亮、章节耗时/字数/检索片段、
完成弹 Toast + 下载 Word）。

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

sundynix-desktop/frontend/src/shell/LeftNav.tsx

@@ -1,53 +1,65 @@
-export type ViewKey =
-  | "home"
-  | "studio"
-  | "kb"
-  | "report"
-  | "runs"
-  | "memory"
-  | "market"
-  | "admin";
+import {
+  LayoutDashboard,
+  Workflow,
+  Database,
+  FileText,
+  Activity,
+  Bookmark,
+  Boxes,
+  Settings,
+  type LucideIcon,
+} from "lucide-react";
+import { cn } from "../ui";
+
+export type ViewKey = "home" | "studio" | "kb" | "report" | "runs" | "memory" | "market" | "admin";
 
 interface Item {
   key: ViewKey;
   label: string;
-  icon: string;
+  icon: LucideIcon;
   group?: string;
   ready?: boolean;
 }
 
 const ITEMS: Item[] = [
-  { key: "home", label: "工作台", icon: "▤", ready: true },
-  { key: "studio", label: "编排", icon: "◆", group: "BUILD", ready: true },
-  { key: "kb", label: "知识库", icon: "▣", group: "BUILD", ready: true },
-  { key: "report", label: "报告", icon: "▦", group: "BUILD", ready: true },
-  { key: "runs", label: "运行", icon: "▸", group: "RUN", ready: true },
-  { key: "memory", label: "记忆", icon: "◇", group: "MANAGE", ready: true },
-  { key: "market", label: "市场", icon: "⌧", group: "MANAGE" },
-  { key: "admin", label: "管理", icon: "⚙", group: "MANAGE" },
+  { key: "home", label: "工作台", icon: LayoutDashboard, ready: true },
+  { key: "studio", label: "编排", icon: Workflow, group: "BUILD", ready: true },
+  { key: "kb", label: "知识库", icon: Database, group: "BUILD", ready: true },
+  { key: "report", label: "报告", icon: FileText, group: "BUILD", ready: true },
+  { key: "runs", label: "运行", icon: Activity, group: "RUN", ready: true },
+  { key: "memory", label: "记忆", icon: Bookmark, group: "MANAGE", ready: true },
+  { key: "market", label: "市场", icon: Boxes, group: "MANAGE" },
+  { key: "admin", label: "管理", icon: Settings, group: "MANAGE" },
 ];
 
-// 左导航：深色，激活态紫色高亮 + 左侧光条。
+// 左导航：深色，激活态紫色高亮 + 左侧光条，描线图标。
 export function LeftNav({ active, onSelect }: { active: ViewKey; onSelect: (v: ViewKey) => void }) {
   let lastGroup: string | undefined;
   return (
-    <nav className="flex w-[72px] shrink-0 flex-col gap-0.5 border-r border-line bg-ink-900 py-2">
+    <nav className="flex w-[68px] shrink-0 flex-col gap-0.5 border-r border-line bg-ink-900 py-2">
       {ITEMS.map((it) => {
         const header = it.group && it.group !== lastGroup ? it.group : null;
         lastGroup = it.group ?? lastGroup;
         const isActive = active === it.key;
+        const Icon = it.icon;
         return (
           <div key={it.key}>
             {header && <div className="mt-3 px-2 text-[9px] font-semibold tracking-widest text-slate-600">{header}</div>}
             <button
               onClick={() => onSelect(it.key)}
-              className={`relative flex w-full flex-col items-center gap-1 py-2.5 text-[11px] transition ${
-                isActive ? "text-violet-300" : "text-slate-500 hover:bg-ink-800 hover:text-slate-300"
-              }`}
+              className={cn(
+                "relative flex w-full flex-col items-center gap-1 py-2.5 text-[11px] transition",
+                isActive ? "text-brand-400" : "text-slate-500 hover:bg-ink-800 hover:text-slate-300",
+              )}
               title={it.ready === false ? `${it.label}（规划中）` : it.label}
             >
-              {isActive && <span className="absolute left-0 top-1/2 h-6 w-0.5 -translate-y-1/2 rounded-r bg-gradient-to-b from-violet-400 to-cyan-400" />}
-              <span className={`text-lg leading-none ${isActive ? "drop-shadow-[0_0_6px_rgba(139,92,246,0.6)]" : ""}`}>{it.icon}</span>
+              {isActive && (
+                <span className="absolute left-0 top-1/2 h-6 w-0.5 -translate-y-1/2 rounded-r bg-gradient-to-b from-brand-400 to-accent-400" />
+              )}
+              <Icon
+                className={cn("h-[18px] w-[18px]", isActive && "drop-shadow-[0_0_6px_rgba(139,92,246,0.6)]")}
+                strokeWidth={isActive ? 2.2 : 1.8}
+              />
               {it.label}
               {it.ready === false && <span className="text-[8px] text-slate-600">规划</span>}
             </button>