feat(desktop): 深色 AI 控制台视觉改造 + 工作台仪表盘

桌面端从扁平 dev 工具风改为深色高端 AI 控制台:分层表面 + 紫青强调 + 微光 +
首页仪表盘，提升第一印象与吸引力。

- 设计 tokens: tailwind ink 分层调色板 + glow/card 阴影; index.css 深色基底 +
  品牌渐变 + 深色滚动条
- shell: TopBar(品牌渐变+毛玻璃+发光健康灯) / LeftNav(激活态紫色高亮+左光条) /
  BottomDrawer(深色+状态色)
- 新 views/Home 工作台仪表盘: 渐变 hero + 4 状态卡 + 3 能力卡 + 快速开始(默认首页)
- 画布: TypedNode 深色节点卡; StudioView ReactFlow colorMode=dark + 深色工具栏/面板/
  MiniMap; Inspector 深色表单
- KbView/MemoryView/MemoryPanel/Placeholder 全深色化; 进度条改紫青渐变
- 纯前端改造, npm build✓; 浏览器验证: 仪表盘 + 编排画布深色呈现

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

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

@@ -17,43 +17,39 @@ interface Item {
 }
 
 const ITEMS: Item[] = [
-  { key: "home", label: "工作台", icon: "■" },
+  { 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" },
+  { key: "report", label: "报告", icon: "▦", group: "BUILD" },
   { key: "runs", label: "运行", icon: "▸", group: "RUN" },
   { key: "memory", label: "记忆", icon: "◇", group: "MANAGE", ready: true },
   { key: "market", label: "市场", icon: "⌧", group: "MANAGE" },
   { key: "admin", label: "管理", icon: "⚙", group: "MANAGE" },
 ];
 
-// 左导航栏：模块切换，分组 BUILD / RUN / MANAGE；未就绪模块灰显（规划中）。
+// 左导航：深色，激活态紫色高亮 + 左侧光条。
 export function LeftNav({ active, onSelect }: { active: ViewKey; onSelect: (v: ViewKey) => void }) {
   let lastGroup: string | undefined;
   return (
-    <nav className="flex w-20 shrink-0 flex-col border-r bg-gray-50 py-2">
+    <nav className="flex w-[72px] 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;
         return (
           <div key={it.key}>
-            {header && (
-              <div className="mt-2 px-2 text-[9px] font-semibold tracking-wider text-gray-300">
-                {header}
-              </div>
-            )}
+            {header && <div className="mt-3 px-2 text-[9px] font-semibold tracking-widest text-slate-600">{header}</div>}
             <button
               onClick={() => onSelect(it.key)}
-              className={`flex w-full flex-col items-center gap-0.5 py-2 text-[11px] ${
-                active === it.key
-                  ? "bg-violet-50 font-medium text-violet-700"
-                  : "text-gray-500 hover:bg-gray-100"
+              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"
               }`}
               title={it.ready === false ? `${it.label}（规划中）` : it.label}
             >
-              <span className="text-base leading-none">{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-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>
               {it.label}
-              {it.ready === false && <span className="text-[8px] text-gray-300">规划</span>}
+              {it.ready === false && <span className="text-[8px] text-slate-600">规划</span>}
             </button>
           </div>
         );