From 72bd43965fff0434dba4be4e934b4e06d91d5c83 Mon Sep 17 00:00:00 2001
From: Blizzard <blizzardzhang@icloud.com>
Date: Fri, 12 Jun 2026 16:39:42 +0800
Subject: [PATCH] =?UTF-8?q?feat(desktop):=20=E5=B7=A5=E4=B8=9A=E5=8C=96?=
 =?UTF-8?q?=E5=8D=87=E7=BA=A7=20A=20=E2=80=94=E2=80=94=20=E8=AE=BE?=
 =?UTF-8?q?=E8=AE=A1=E7=B3=BB=E7=BB=9F=E5=9C=B0=E5=9F=BA=EF=BC=88primitive?=
 =?UTF-8?q?s=20+=20lucide=20+=20=E8=AF=AD=E4=B9=89=E4=BB=A4=E7=89=8C?=
 =?UTF-8?q?=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

把"手搓内联 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/package-lock.json   |  10 ++
 sundynix-desktop/frontend/package.json        |  13 +-
 sundynix-desktop/frontend/src/App.tsx         |   3 +
 .../frontend/src/components/ExecTrace.tsx     |  81 ++++++------
 .../frontend/src/panels/MemoryPanel.tsx       |  28 +++--
 .../frontend/src/shell/BottomDrawer.tsx       |  66 +++++-----
 .../frontend/src/shell/LeftNav.tsx            |  62 ++++++----
 .../frontend/src/shell/TopBar.tsx             |  43 ++++---
 .../frontend/src/studio/StudioView.tsx        |  25 ++--
 sundynix-desktop/frontend/src/ui/Badge.tsx    |  38 ++++++
 sundynix-desktop/frontend/src/ui/Button.tsx   |  37 ++++++
 sundynix-desktop/frontend/src/ui/Card.tsx     |  36 ++++++
 sundynix-desktop/frontend/src/ui/Dialog.tsx   |  51 ++++++++
 sundynix-desktop/frontend/src/ui/Feedback.tsx |  34 +++++
 sundynix-desktop/frontend/src/ui/Input.tsx    |  32 +++++
 sundynix-desktop/frontend/src/ui/Tabs.tsx     |  44 +++++++
 sundynix-desktop/frontend/src/ui/Toast.tsx    |  64 ++++++++++
 sundynix-desktop/frontend/src/ui/cn.ts        |   4 +
 sundynix-desktop/frontend/src/ui/index.ts     |  10 ++
 sundynix-desktop/frontend/src/views/Home.tsx  |  81 ++++++------
 .../frontend/src/views/KbView.tsx             | 116 +++++++-----------
 .../frontend/src/views/Placeholder.tsx        |  12 +-
 .../frontend/src/views/ReportView.tsx         | 114 ++++++++---------
 .../frontend/src/views/RunsView.tsx           |  48 ++++----
 sundynix-desktop/frontend/tailwind.config.js  |  11 ++
 25 files changed, 715 insertions(+), 348 deletions(-)
 create mode 100644 sundynix-desktop/frontend/src/ui/Badge.tsx
 create mode 100644 sundynix-desktop/frontend/src/ui/Button.tsx
 create mode 100644 sundynix-desktop/frontend/src/ui/Card.tsx
 create mode 100644 sundynix-desktop/frontend/src/ui/Dialog.tsx
 create mode 100644 sundynix-desktop/frontend/src/ui/Feedback.tsx
 create mode 100644 sundynix-desktop/frontend/src/ui/Input.tsx
 create mode 100644 sundynix-desktop/frontend/src/ui/Tabs.tsx
 create mode 100644 sundynix-desktop/frontend/src/ui/Toast.tsx
 create mode 100644 sundynix-desktop/frontend/src/ui/cn.ts
 create mode 100644 sundynix-desktop/frontend/src/ui/index.ts

diff --git a/sundynix-desktop/frontend/package-lock.json b/sundynix-desktop/frontend/package-lock.json
index 8bdbeb3..10c467d 100644
--- a/sundynix-desktop/frontend/package-lock.json
+++ b/sundynix-desktop/frontend/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "@xyflow/react": "^12.3.0",
+        "lucide-react": "^1.17.0",
         "react": "^19.0.0",
         "react-dom": "^19.0.0"
       },
@@ -2054,6 +2055,15 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "1.17.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-1.17.0.tgz",
+      "integrity": "sha512-9FA9evdox/JQL5PT57fdA1x/yg8T7knJ98+zjTL3UfKza6pflQUUh3XtaQIHKvnsJw1lmsEyHVlt5jchYxOQ5w==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
diff --git a/sundynix-desktop/frontend/package.json b/sundynix-desktop/frontend/package.json
index edd59aa..e1cba83 100644
--- a/sundynix-desktop/frontend/package.json
+++ b/sundynix-desktop/frontend/package.json
@@ -9,18 +9,19 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@xyflow/react": "^12.3.0",
+    "lucide-react": "^1.17.0",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "@xyflow/react": "^12.3.0"
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "@vitejs/plugin-react": "^4.3.0",
-    "typescript": "^5.6.0",
-    "vite": "^5.4.0",
-    "tailwindcss": "^3.4.0",
     "autoprefixer": "^10.4.0",
-    "postcss": "^8.4.0"
+    "postcss": "^8.4.0",
+    "tailwindcss": "^3.4.0",
+    "typescript": "^5.6.0",
+    "vite": "^5.4.0"
   }
 }
diff --git a/sundynix-desktop/frontend/src/App.tsx b/sundynix-desktop/frontend/src/App.tsx
index 3dc1514..fa0ea33 100644
--- a/sundynix-desktop/frontend/src/App.tsx
+++ b/sundynix-desktop/frontend/src/App.tsx
@@ -13,6 +13,7 @@ import { Placeholder } from "./views/Placeholder";
 import { submitTask, streamTokens, streamExec, type Identity } from "./lib/api";
 import type { TaskDsl } from "./lib/dsl";
 import { emptyRun, type RunState } from "./lib/run";
+import { ToastProvider } from "./ui";
 
 const PLACEHOLDERS: Partial<Record<ViewKey, { title: string; desc: string }>> = {
   home: { title: "工作台", desc: "概览：知识库 / 文档 / 近期运行 / 待办报告 / 配额计费 + 快捷入口。" },
@@ -77,6 +78,7 @@ export default function App() {
   );
 
   return (
+    <ToastProvider>
     <div className="relative flex h-screen w-screen flex-col bg-ink-950 text-slate-200">
       {/* 顶部柔光，增加纵深 */}
       <div
@@ -106,5 +108,6 @@ export default function App() {
       </div>
       <BottomDrawer run={run} />
     </div>
+    </ToastProvider>
   );
 }
diff --git a/sundynix-desktop/frontend/src/components/ExecTrace.tsx b/sundynix-desktop/frontend/src/components/ExecTrace.tsx
index 0cab1ea..a07eebb 100644
--- a/sundynix-desktop/frontend/src/components/ExecTrace.tsx
+++ b/sundynix-desktop/frontend/src/components/ExecTrace.tsx
@@ -1,47 +1,53 @@
+import {
+  Cpu,
+  Bookmark,
+  Wrench,
+  MessageSquareText,
+  Sparkles,
+  ListTree,
+  FileText,
+  FileOutput,
+  CheckCircle2,
+  XCircle,
+  Loader2,
+  Circle,
+  type LucideIcon,
+} from "lucide-react";
 import { deriveNodes, type NodeTrace, type RunPhase } from "../lib/run";
 import type { ExecEvent } from "../lib/api";
+import { cn } from "../ui";
 
 // 各节点类别的图标与配色（与后端 ExecEvent.kind 对应）。
-const KIND: Record<string, { icon: string; cls: string; name: string }> = {
-  system: { icon: "▸", cls: "text-slate-400", name: "系统" },
-  memory: { icon: "◇", cls: "text-violet-300", name: "记忆召回" },
-  tool: { icon: "⚙", cls: "text-amber-300", name: "工具调用" },
-  prompt: { icon: "▤", cls: "text-sky-300", name: "提示词" },
-  model: { icon: "✦", cls: "text-emerald-300", name: "模型推理" },
-  plan: { icon: "◷", cls: "text-cyan-300", name: "规划" },
-  section: { icon: "¶", cls: "text-indigo-300", name: "章节" },
-  render: { icon: "▦", cls: "text-rose-300", name: "渲染" },
+const KIND: Record<string, { icon: LucideIcon; cls: string; name: string }> = {
+  system: { icon: Cpu, cls: "text-slate-400", name: "系统" },
+  memory: { icon: Bookmark, cls: "text-brand-400", name: "记忆召回" },
+  tool: { icon: Wrench, cls: "text-warn", name: "工具调用" },
+  prompt: { icon: MessageSquareText, cls: "text-sky-300", name: "提示词" },
+  model: { icon: Sparkles, cls: "text-success", name: "模型推理" },
+  plan: { icon: ListTree, cls: "text-accent-400", name: "规划" },
+  section: { icon: FileText, cls: "text-indigo-300", name: "章节" },
+  render: { icon: FileOutput, cls: "text-danger", name: "渲染" },
 };
 
 function meta(kind: string) {
-  return KIND[kind] ?? { icon: "•", cls: "text-slate-400", name: kind };
+  return KIND[kind] ?? { icon: Circle, cls: "text-slate-400", name: kind };
 }
 
 function StatusDot({ status }: { status: NodeTrace["status"] }) {
-  if (status === "running")
-    return <span className="h-2.5 w-2.5 animate-pulse rounded-full bg-cyan-400 shadow-[0_0_8px_rgba(34,211,238,0.8)]" />;
-  if (status === "done") return <span className="h-2.5 w-2.5 rounded-full bg-emerald-400" />;
-  if (status === "error") return <span className="h-2.5 w-2.5 rounded-full bg-rose-500" />;
-  return <span className="h-2.5 w-2.5 rounded-full bg-slate-600" />;
+  if (status === "running") return <Loader2 className="h-4 w-4 animate-spin text-accent-400" strokeWidth={2.4} />;
+  if (status === "done") return <CheckCircle2 className="h-4 w-4 text-success" strokeWidth={2.2} />;
+  if (status === "error") return <XCircle className="h-4 w-4 text-danger" strokeWidth={2.2} />;
+  return <Circle className="h-4 w-4 text-slate-600" strokeWidth={2} />;
 }
 
 // ExecTrace 把执行事件流渲染为竖向轨道：每个节点一颗灯，实时点亮 + 耗时 + 入参/产出。
-export function ExecTrace({
-  events,
-  phase,
-  compact,
-}: {
-  events: ExecEvent[];
-  phase?: RunPhase;
-  compact?: boolean;
-}) {
+export function ExecTrace({ events, phase, compact }: { events: ExecEvent[]; phase?: RunPhase; compact?: boolean }) {
   const nodes = deriveNodes(events);
   if (nodes.length === 0) {
     return (
-      <div className="flex h-full items-center justify-center px-4 py-8 text-center text-xs text-slate-600">
-        运行后，这里会逐节点点亮执行轨迹：记忆召回 → 工具调用（入参/产出）→ 提示词组装 → 模型推理。
-        <br />
-        报告任务则显示：规划大纲 → 各章并行检索撰写 → 渲染 Word。
+      <div className="flex h-full flex-col items-center justify-center gap-1 px-4 py-8 text-center text-xs text-slate-600">
+        <span>运行后逐节点点亮执行轨迹</span>
+        <span className="text-slate-700">记忆召回 → 工具调用 → 提示词 → 模型推理 / 报告：规划 → 各章并行 → 渲染</span>
       </div>
     );
   }
@@ -53,28 +59,27 @@ export function ExecTrace({
           <span>{nodes.length} 个节点</span>
           <span>·</span>
           <span>累计 {total} ms</span>
-          {phase === "streaming" && <span className="text-cyan-400">● 执行中</span>}
-          {phase === "done" && <span className="text-emerald-400">✓ 完成</span>}
-          {phase === "error" && <span className="text-rose-400">✗ 出错</span>}
+          {phase === "streaming" && <span className="text-accent-400">● 执行中</span>}
+          {phase === "done" && <span className="text-success">✓ 完成</span>}
+          {phase === "error" && <span className="text-danger">✗ 出错</span>}
         </div>
       )}
       <ol className="relative ml-2 space-y-2 border-l border-line pl-4">
         {nodes.map((n) => {
           const m = meta(n.kind);
+          const Icon = m.icon;
           return (
             <li key={n.node} className="relative">
               <span className="absolute -left-[22px] top-1.5 flex h-4 w-4 items-center justify-center rounded-full bg-ink-900">
                 <StatusDot status={n.status} />
               </span>
-              <div className="rounded-lg border border-line bg-ink-950/60 px-3 py-2">
+              <div className="rounded-md border border-line bg-ink-950/60 px-3 py-2">
                 <div className="flex items-center gap-2">
-                  <span className={`text-sm leading-none ${m.cls}`}>{m.icon}</span>
+                  <Icon className={cn("h-3.5 w-3.5 shrink-0", m.cls)} strokeWidth={2} />
                   <span className="text-xs font-medium text-slate-200">{n.label}</span>
-                  <span className={`rounded px-1.5 py-0.5 text-[9px] ${m.cls} bg-white/5`}>{m.name}</span>
-                  {n.ms != null && n.ms > 0 && (
-                    <span className="ml-auto font-mono text-[10px] text-slate-500">{n.ms} ms</span>
-                  )}
-                  {n.status === "running" && <span className="ml-auto text-[10px] text-cyan-400">运行中…</span>}
+                  <span className={cn("rounded bg-white/5 px-1.5 py-0.5 text-[9px]", m.cls)}>{m.name}</span>
+                  {n.ms != null && n.ms > 0 && <span className="ml-auto font-mono text-[10px] text-slate-500">{n.ms} ms</span>}
+                  {n.status === "running" && <span className="ml-auto text-[10px] text-accent-400">运行中…</span>}
                 </div>
                 {n.detail && <p className="mt-1 break-words text-[11px] leading-relaxed text-slate-400">{n.detail}</p>}
                 {n.notes.map((note, i) => (
diff --git a/sundynix-desktop/frontend/src/panels/MemoryPanel.tsx b/sundynix-desktop/frontend/src/panels/MemoryPanel.tsx
index 2ccb3cb..4e0aa12 100644
--- a/sundynix-desktop/frontend/src/panels/MemoryPanel.tsx
+++ b/sundynix-desktop/frontend/src/panels/MemoryPanel.tsx
@@ -1,40 +1,44 @@
 import { useState } from "react";
+import { Check } from "lucide-react";
 import { setMemory, type Identity } from "../lib/api";
+import { Button, Input, Textarea, Field, useToast } from "../ui";
 
 // 偏好记忆面板 —— 让用户显式登记/纠正模型对自己的记忆（→ PUT /api/v1/memory）。
 export function MemoryPanel({ identity }: { identity: Identity }) {
+  const toast = useToast();
   const [key, setKey] = useState("回答偏好");
   const [value, setValue] = useState("简洁、中文、多给要点");
   const [saved, setSaved] = useState<Array<{ key: string; value: string }>>([]);
-  const [msg, setMsg] = useState("");
 
   const save = async () => {
     if (!key.trim()) return;
     try {
       const m = await setMemory(identity, key.trim(), value.trim());
       setSaved((s) => [{ key: key.trim(), value: value.trim() }, ...s.filter((x) => x.key !== key.trim())]);
-      setMsg(m);
+      toast.push("success", m);
     } catch (e) {
-      setMsg(`✗ ${(e as Error).message}`);
+      toast.push("error", (e as Error).message);
     }
   };
 
-  const inputCls = "rounded-md border border-line bg-ink-800 px-2 py-1 text-sm text-slate-200 focus:border-violet-500/60 focus:outline-none";
   return (
     <section className="border-b border-line p-4">
-      <h2 className="mb-2 text-sm font-semibold text-slate-300">偏好记忆（让模型知道是我）</h2>
-      <div className="flex flex-col gap-2">
-        <input className={inputCls} value={key} onChange={(e) => setKey(e.target.value)} placeholder="键，如 称呼 / 回答偏好" />
-        <textarea className={`${inputCls} h-16 resize-none`} value={value} onChange={(e) => setValue(e.target.value)} placeholder="值" />
-        <button onClick={save} className="self-end rounded-md bg-emerald-600 px-3 py-1 text-sm text-white hover:bg-emerald-500">
+      <h2 className="mb-3 text-sm font-semibold text-slate-300">偏好记忆（让模型知道是我）</h2>
+      <div className="flex flex-col gap-3">
+        <Field label="键">
+          <Input value={key} onChange={(e) => setKey(e.target.value)} placeholder="如 称呼 / 回答偏好" />
+        </Field>
+        <Field label="值">
+          <Textarea className="h-16 resize-none" value={value} onChange={(e) => setValue(e.target.value)} placeholder="值" />
+        </Field>
+        <Button variant="primary" size="sm" icon={Check} className="self-end" onClick={save}>
           记住
-        </button>
+        </Button>
       </div>
-      {msg && <p className="mt-2 text-xs text-emerald-400">{msg}</p>}
       {saved.length > 0 && (
         <ul className="mt-3 space-y-1">
           {saved.map((s) => (
-            <li key={s.key} className="rounded-md bg-ink-800 px-2 py-1 text-xs text-slate-400">
+            <li key={s.key} className="rounded-md bg-ink-800 px-2 py-1.5 text-xs text-slate-400">
               <span className="font-medium text-slate-200">{s.key}</span>：{s.value}
             </li>
           ))}
diff --git a/sundynix-desktop/frontend/src/shell/BottomDrawer.tsx b/sundynix-desktop/frontend/src/shell/BottomDrawer.tsx
index bbf5441..af4b093 100644
--- a/sundynix-desktop/frontend/src/shell/BottomDrawer.tsx
+++ b/sundynix-desktop/frontend/src/shell/BottomDrawer.tsx
@@ -1,46 +1,46 @@
 import { useState } from "react";
+import { ChevronDown, ChevronUp, Wrench } from "lucide-react";
 import { deriveNodes, type RunState } from "../lib/run";
 import { ExecTrace } from "../components/ExecTrace";
+import { Tabs, Badge, cn, type TabDef } from "../ui";
 
 type Tab = "output" | "trace" | "tools" | "cite" | "eval";
-const TABS: Array<{ key: Tab; label: string }> = [
-  { key: "output", label: "输出" },
-  { key: "trace", label: "轨迹" },
-  { key: "tools", label: "工具调用" },
-  { key: "cite", label: "引用" },
-  { key: "eval", label: "评测" },
-];
 
 // 底部抽屉：运行输出 / 轨迹 / 工具调用 / 引用 / 评测（深色，全局常驻）。
 export function BottomDrawer({ run }: { run: RunState }) {
   const [open, setOpen] = useState(true);
   const [tab, setTab] = useState<Tab>("output");
 
-  const status =
-    run.phase === "streaming" ? "text-cyan-400" : run.phase === "done" ? "text-emerald-400" : run.phase === "error" ? "text-rose-400" : "text-slate-500";
+  const nodes = deriveNodes(run.exec);
+  const toolCount = nodes.filter((n) => n.kind === "tool").length;
+  const tabs: TabDef<Tab>[] = [
+    { key: "output", label: "输出" },
+    { key: "trace", label: "轨迹", count: nodes.length },
+    { key: "tools", label: "工具调用", count: toolCount },
+    { key: "cite", label: "引用" },
+    { key: "eval", label: "评测" },
+  ];
+
+  const statusCls =
+    run.phase === "streaming" ? "text-accent-400" : run.phase === "done" ? "text-success" : run.phase === "error" ? "text-danger" : "text-slate-500";
   const statusText =
     run.phase === "streaming" ? "流式中…" : run.phase === "done" ? "完成 ✓" : run.phase === "error" ? `✗ ${run.error ?? "出错"}` : run.phase === "submitting" ? "提交中…" : "就绪";
 
   return (
     <div className="shrink-0 border-t border-line bg-ink-900">
-      <div className="flex items-center gap-1 border-b border-line px-2">
-        {TABS.map((t) => (
-          <button
-            key={t.key}
-            onClick={() => {
-              setTab(t.key);
-              setOpen(true);
-            }}
-            className={`px-3 py-2 text-xs transition ${
-              tab === t.key && open ? "border-b-2 border-violet-500 font-medium text-violet-300" : "text-slate-500 hover:text-slate-300"
-            }`}
-          >
-            {t.label}
-          </button>
-        ))}
-        <span className={`ml-2 text-[11px] ${status}`}>{statusText}</span>
-        <button onClick={() => setOpen((o) => !o)} className="ml-auto px-2 text-xs text-slate-500 hover:text-slate-300">
-          {open ? "▾ 收起" : "▴ 展开"}
+      <div className="flex items-center border-b border-line px-2">
+        <Tabs
+          tabs={tabs}
+          value={tab}
+          onChange={(t) => {
+            setTab(t);
+            setOpen(true);
+          }}
+        />
+        <span className={cn("ml-2 text-[11px]", statusCls)}>{statusText}</span>
+        <button onClick={() => setOpen((o) => !o)} className="ml-auto flex items-center gap-1 px-2 py-2 text-xs text-slate-500 hover:text-slate-300">
+          {open ? <ChevronDown className="h-3.5 w-3.5" /> : <ChevronUp className="h-3.5 w-3.5" />}
+          {open ? "收起" : "展开"}
         </button>
       </div>
       {open && (
@@ -69,17 +69,13 @@ function ToolCalls({ run }: { run: RunState }) {
   return (
     <ul className="space-y-1.5">
       {tools.map((t) => (
-        <li key={t.node} className="rounded-lg border border-line bg-ink-950/60 px-3 py-2">
+        <li key={t.node} className="rounded-md border border-line bg-ink-950/60 px-3 py-2">
           <div className="flex items-center gap-2">
-            <span className="text-amber-300">⚙</span>
+            <Wrench className="h-3.5 w-3.5 text-warn" strokeWidth={2} />
             <span className="font-mono text-[11px] text-slate-200">{t.node.replace(/^tool:/, "")}</span>
-            <span
-              className={`rounded px-1.5 py-0.5 text-[9px] ${
-                t.status === "error" ? "bg-rose-500/15 text-rose-300" : t.status === "running" ? "bg-cyan-500/15 text-cyan-300" : "bg-emerald-500/15 text-emerald-300"
-              }`}
-            >
+            <Badge tone={t.status === "error" ? "danger" : t.status === "running" ? "accent" : "success"}>
               {t.status === "error" ? "失败" : t.status === "running" ? "调用中" : "成功"}
-            </span>
+            </Badge>
             {t.ms != null && t.ms > 0 && <span className="ml-auto font-mono text-[10px] text-slate-500">{t.ms} ms</span>}
           </div>
           {t.detail && <p className="mt-1 break-words text-[11px] leading-relaxed text-slate-400">{t.detail}</p>}
diff --git a/sundynix-desktop/frontend/src/shell/LeftNav.tsx b/sundynix-desktop/frontend/src/shell/LeftNav.tsx
index abb7b47..98beac8 100644
--- a/sundynix-desktop/frontend/src/shell/LeftNav.tsx
+++ b/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>
diff --git a/sundynix-desktop/frontend/src/shell/TopBar.tsx b/sundynix-desktop/frontend/src/shell/TopBar.tsx
index 39d3c1c..e4b08f9 100644
--- a/sundynix-desktop/frontend/src/shell/TopBar.tsx
+++ b/sundynix-desktop/frontend/src/shell/TopBar.tsx
@@ -1,11 +1,13 @@
+import { User, ChevronDown } from "lucide-react";
 import type { Identity } from "../lib/api";
 import { useHealth } from "../lib/health";
+import { cn } from "../ui";
 
 function Light({ on, label, unknown }: { on?: boolean; label: string; unknown?: boolean }) {
-  const dot = unknown ? "bg-slate-600" : on ? "bg-emerald-400 shadow-[0_0_8px_rgba(52,211,153,0.7)]" : "bg-rose-500";
+  const dot = unknown ? "bg-slate-600" : on ? "bg-success shadow-[0_0_8px_rgba(52,211,153,0.7)]" : "bg-danger";
   return (
-    <span className="flex items-center gap-1.5 text-[11px] text-slate-500" title={label}>
-      <span className={`h-1.5 w-1.5 rounded-full ${dot}`} />
+    <span className="flex items-center gap-1.5 text-[11px] text-slate-500" title={unknown ? `${label}（状态未透出）` : label}>
+      <span className={cn("h-1.5 w-1.5 rounded-full", dot)} />
       {label}
     </span>
   );
@@ -17,16 +19,22 @@ export function TopBar({ identity, setIdentity }: { identity: Identity; setIdent
   return (
     <header className="flex h-12 shrink-0 items-center gap-3 border-b border-line bg-ink-900/80 px-3 backdrop-blur">
       <div className="flex items-center gap-2">
-        <div className="flex h-6 w-6 items-center justify-center rounded-md bg-gradient-to-br from-violet-500 to-cyan-500 text-xs font-bold text-white">
+        <div className="flex h-6 w-6 items-center justify-center rounded-md bg-gradient-to-br from-brand to-accent text-xs font-bold text-white">
           S
         </div>
         <span className="brand-gradient text-sm font-semibold">sundynix-agentix</span>
       </div>
-      <select className="rounded-md border border-line bg-ink-800 px-2 py-0.5 text-xs text-slate-300" defaultValue="通用版">
-        <option>通用版</option>
-        <option>法律版</option>
-        <option>医疗版</option>
-      </select>
+      <div className="relative">
+        <select
+          className="appearance-none rounded-md border border-line bg-ink-800 py-1 pl-2.5 pr-7 text-xs text-slate-300 focus:border-brand focus:outline-none"
+          defaultValue="通用版"
+        >
+          <option>通用版</option>
+          <option>法律版</option>
+          <option>医疗版</option>
+        </select>
+        <ChevronDown className="pointer-events-none absolute right-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-slate-500" />
+      </div>
       <div className="ml-2 flex items-center gap-3">
         <Light on={h.gateway} label="Gateway" />
         <Light on={h.persisted} label="DB" />
@@ -35,14 +43,17 @@ export function TopBar({ identity, setIdentity }: { identity: Identity; setIdent
         <Light unknown label="Neo4j" />
       </div>
       <div className="ml-auto flex items-center gap-2">
+        <div className="relative">
+          <User className="pointer-events-none absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-slate-500" />
+          <input
+            className="w-24 rounded-md border border-line bg-ink-800 py-1 pl-7 pr-2 text-xs text-slate-200 focus:border-brand focus:outline-none"
+            value={identity.userId}
+            onChange={(e) => setIdentity({ ...identity, userId: e.target.value })}
+            title="用户"
+          />
+        </div>
         <input
-          className="w-20 rounded-md border border-line bg-ink-800 px-2 py-1 text-xs text-slate-200 focus:border-violet-500/60 focus:outline-none"
-          value={identity.userId}
-          onChange={(e) => setIdentity({ ...identity, userId: e.target.value })}
-          title="用户"
-        />
-        <input
-          className="w-24 rounded-md border border-line bg-ink-800 px-2 py-1 text-xs text-slate-200 focus:border-violet-500/60 focus:outline-none"
+          className="w-24 rounded-md border border-line bg-ink-800 px-2 py-1 text-xs text-slate-200 focus:border-brand focus:outline-none"
           value={identity.sessionId}
           onChange={(e) => setIdentity({ ...identity, sessionId: e.target.value })}
           title="会话"
diff --git a/sundynix-desktop/frontend/src/studio/StudioView.tsx b/sundynix-desktop/frontend/src/studio/StudioView.tsx
index b579337..942bd7c 100644
--- a/sundynix-desktop/frontend/src/studio/StudioView.tsx
+++ b/sundynix-desktop/frontend/src/studio/StudioView.tsx
@@ -13,11 +13,13 @@ import {
 } from "@xyflow/react";
 import "@xyflow/react/dist/style.css";
 
+import { Play, ShieldCheck } from "lucide-react";
 import { nodeTypes, type NodeStatus } from "./TypedNode";
 import { Inspector } from "./Inspector";
 import { NODE_KINDS, NODE_ORDER } from "./nodeCatalog";
 import { exportDsl, validate, type Issue, type TaskDsl } from "../lib/dsl";
 import type { RunPhase } from "../lib/run";
+import { Button } from "../ui";
 
 let seq = 0;
 
@@ -113,28 +115,21 @@ export function StudioView({
       {/* 中画布 */}
       <div className="relative flex-1 bg-ink-950">
         <div className="absolute left-0 right-0 top-0 z-10 flex items-center gap-2 border-b border-line bg-ink-900/90 px-2 py-1.5 backdrop-blur">
-          <button
-            onClick={run}
-            disabled={running || nodes.length === 0}
-            className="rounded-md bg-violet-600 px-3 py-1 text-xs font-medium text-white hover:bg-violet-500 disabled:opacity-40"
-          >
-            {running ? "运行中…" : "▶ 运行"}
-          </button>
-          <button
-            onClick={() => setIssues(validate(nodes, edges))}
-            className="rounded-md border border-line px-3 py-1 text-xs text-slate-300 hover:bg-ink-800"
-          >
+          <Button variant="primary" size="sm" icon={Play} onClick={run} disabled={running || nodes.length === 0}>
+            {running ? "运行中…" : "运行"}
+          </Button>
+          <Button size="sm" icon={ShieldCheck} onClick={() => setIssues(validate(nodes, edges))}>
             校验
-          </button>
+          </Button>
           <span className="ml-1 text-[11px] text-slate-500">
             {nodes.length} 节点 · {edges.length} 连线
           </span>
           {issues && (
             <span className="ml-auto text-[11px]">
               {issues.length === 0 ? (
-                <span className="text-emerald-400">✓ 校验通过</span>
+                <span className="text-success">✓ 校验通过</span>
               ) : (
-                <span className="text-amber-400">{issues.length} 项提示</span>
+                <span className="text-warn">{issues.length} 项提示</span>
               )}
             </span>
           )}
@@ -160,7 +155,7 @@ export function StudioView({
         {issues && issues.length > 0 && (
           <div className="absolute bottom-2 left-2 max-w-md rounded-lg border border-line bg-ink-850 p-2 text-[11px] shadow-card">
             {issues.map((i, idx) => (
-              <div key={idx} className={i.level === "error" ? "text-rose-400" : "text-amber-400"}>
+              <div key={idx} className={i.level === "error" ? "text-danger" : "text-warn"}>
                 {i.level === "error" ? "✗" : "⚠"} {i.msg}
               </div>
             ))}
diff --git a/sundynix-desktop/frontend/src/ui/Badge.tsx b/sundynix-desktop/frontend/src/ui/Badge.tsx
new file mode 100644
index 0000000..40f5ccc
--- /dev/null
+++ b/sundynix-desktop/frontend/src/ui/Badge.tsx
@@ -0,0 +1,38 @@
+import type { ReactNode } from "react";
+import { cn } from "./cn";
+
+type Tone = "neutral" | "brand" | "accent" | "success" | "warn" | "danger";
+
+const tones: Record<Tone, string> = {
+  neutral: "bg-white/5 text-slate-400",
+  brand: "bg-brand/15 text-brand-400",
+  accent: "bg-accent/15 text-accent-400",
+  success: "bg-success/15 text-success",
+  warn: "bg-warn/15 text-warn",
+  danger: "bg-danger/15 text-danger",
+};
+
+export function Badge({ tone = "neutral", className, children }: { tone?: Tone; className?: string; children: ReactNode }) {
+  return (
+    <span className={cn("inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-[9px] font-medium leading-none", tones[tone], className)}>
+      {children}
+    </span>
+  );
+}
+
+// Dot 状态小圆点（可脉冲）。
+export function Dot({ tone = "neutral", pulse }: { tone?: Tone | "running"; pulse?: boolean }) {
+  const color =
+    tone === "success"
+      ? "bg-success"
+      : tone === "danger"
+        ? "bg-danger"
+        : tone === "warn"
+          ? "bg-warn"
+          : tone === "running" || tone === "accent"
+            ? "bg-accent"
+            : tone === "brand"
+              ? "bg-brand"
+              : "bg-slate-600";
+  return <span className={cn("h-2 w-2 shrink-0 rounded-full", color, pulse && "animate-pulse")} />;
+}
diff --git a/sundynix-desktop/frontend/src/ui/Button.tsx b/sundynix-desktop/frontend/src/ui/Button.tsx
new file mode 100644
index 0000000..7123a13
--- /dev/null
+++ b/sundynix-desktop/frontend/src/ui/Button.tsx
@@ -0,0 +1,37 @@
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+import { type LucideIcon } from "lucide-react";
+import { cn } from "./cn";
+
+type Variant = "primary" | "secondary" | "ghost" | "danger";
+type Size = "sm" | "md";
+
+const base =
+  "inline-flex items-center justify-center gap-1.5 rounded-md font-medium transition select-none disabled:cursor-not-allowed disabled:opacity-40 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand/50";
+
+const variants: Record<Variant, string> = {
+  primary: "bg-brand text-white hover:bg-brand-500 active:bg-brand-600 shadow-glow",
+  secondary: "border border-line bg-ink-800 text-slate-200 hover:bg-ink-700 hover:border-ink-600",
+  ghost: "text-slate-400 hover:bg-ink-800 hover:text-slate-200",
+  danger: "border border-danger/50 text-danger hover:bg-danger/10",
+};
+
+const sizes: Record<Size, string> = {
+  sm: "h-8 px-3 text-xs",
+  md: "h-9 px-4 text-sm",
+};
+
+interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: Variant;
+  size?: Size;
+  icon?: LucideIcon;
+  children?: ReactNode;
+}
+
+export function Button({ variant = "secondary", size = "md", icon: Icon, className, children, ...rest }: Props) {
+  return (
+    <button className={cn(base, variants[variant], sizes[size], className)} {...rest}>
+      {Icon && <Icon className={size === "sm" ? "h-3.5 w-3.5" : "h-4 w-4"} strokeWidth={2} />}
+      {children}
+    </button>
+  );
+}
diff --git a/sundynix-desktop/frontend/src/ui/Card.tsx b/sundynix-desktop/frontend/src/ui/Card.tsx
new file mode 100644
index 0000000..4749ba1
--- /dev/null
+++ b/sundynix-desktop/frontend/src/ui/Card.tsx
@@ -0,0 +1,36 @@
+import type { ReactNode } from "react";
+import { type LucideIcon } from "lucide-react";
+import { cn } from "./cn";
+
+// Card 基础卡片容器。
+export function Card({ className, children }: { className?: string; children: ReactNode }) {
+  return <div className={cn("rounded-lg border border-line bg-ink-900 shadow-card", className)}>{children}</div>;
+}
+
+// Panel 带表头的分区面板（表头 icon+标题+右侧动作，主体可滚动）。
+export function Panel({
+  title,
+  icon: Icon,
+  actions,
+  className,
+  bodyClassName,
+  children,
+}: {
+  title: ReactNode;
+  icon?: LucideIcon;
+  actions?: ReactNode;
+  className?: string;
+  bodyClassName?: string;
+  children: ReactNode;
+}) {
+  return (
+    <section className={cn("flex min-h-0 flex-col rounded-lg border border-line bg-ink-900 shadow-card", className)}>
+      <div className="flex items-center gap-2 border-b border-line px-4 py-2.5">
+        {Icon && <Icon className="h-3.5 w-3.5 text-slate-500" strokeWidth={2} />}
+        <span className="text-[11px] font-medium text-slate-400">{title}</span>
+        {actions && <div className="ml-auto flex items-center gap-2">{actions}</div>}
+      </div>
+      <div className={cn("min-h-0 flex-1 overflow-y-auto p-4", bodyClassName)}>{children}</div>
+    </section>
+  );
+}
diff --git a/sundynix-desktop/frontend/src/ui/Dialog.tsx b/sundynix-desktop/frontend/src/ui/Dialog.tsx
new file mode 100644
index 0000000..3b86ccf
--- /dev/null
+++ b/sundynix-desktop/frontend/src/ui/Dialog.tsx
@@ -0,0 +1,51 @@
+import type { ReactNode } from "react";
+import { X } from "lucide-react";
+import { Button } from "./Button";
+
+// Dialog 轻量模态：遮罩 + 居中卡片。open=false 不渲染。
+export function Dialog({
+  open,
+  onClose,
+  title,
+  children,
+  footer,
+}: {
+  open: boolean;
+  onClose: () => void;
+  title: string;
+  children: ReactNode;
+  footer?: ReactNode;
+}) {
+  if (!open) return null;
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/55 p-6" onClick={onClose}>
+      <div
+        className="w-full max-w-md rounded-lg border border-line bg-ink-900 shadow-card"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="flex items-center border-b border-line px-4 py-3">
+          <h3 className="text-sm font-medium text-slate-100">{title}</h3>
+          <button onClick={onClose} className="ml-auto text-slate-500 hover:text-slate-300">
+            <X className="h-4 w-4" />
+          </button>
+        </div>
+        <div className="px-4 py-4 text-sm text-slate-300">{children}</div>
+        {footer && <div className="flex justify-end gap-2 border-t border-line px-4 py-3">{footer}</div>}
+      </div>
+    </div>
+  );
+}
+
+// ConfirmFooter 常用的取消/确认按钮组。
+export function ConfirmFooter({ onCancel, onConfirm, confirmLabel = "确认", danger }: { onCancel: () => void; onConfirm: () => void; confirmLabel?: string; danger?: boolean }) {
+  return (
+    <>
+      <Button variant="ghost" size="sm" onClick={onCancel}>
+        取消
+      </Button>
+      <Button variant={danger ? "danger" : "primary"} size="sm" onClick={onConfirm}>
+        {confirmLabel}
+      </Button>
+    </>
+  );
+}
diff --git a/sundynix-desktop/frontend/src/ui/Feedback.tsx b/sundynix-desktop/frontend/src/ui/Feedback.tsx
new file mode 100644
index 0000000..cd506eb
--- /dev/null
+++ b/sundynix-desktop/frontend/src/ui/Feedback.tsx
@@ -0,0 +1,34 @@
+import type { ReactNode } from "react";
+import { type LucideIcon } from "lucide-react";
+import { cn } from "./cn";
+
+// Skeleton 占位骨架（加载态）。
+export function Skeleton({ className }: { className?: string }) {
+  return <div className={cn("animate-pulse rounded-md bg-ink-800", className)} />;
+}
+
+// EmptyState 空状态：图标 + 标题 + 说明 + 可选动作。
+export function EmptyState({
+  icon: Icon,
+  title,
+  desc,
+  action,
+  className,
+}: {
+  icon: LucideIcon;
+  title: string;
+  desc?: ReactNode;
+  action?: ReactNode;
+  className?: string;
+}) {
+  return (
+    <div className={cn("flex h-full flex-col items-center justify-center gap-3 px-6 py-10 text-center", className)}>
+      <div className="flex h-12 w-12 items-center justify-center rounded-xl border border-line bg-ink-850 text-slate-500">
+        <Icon className="h-6 w-6" strokeWidth={1.5} />
+      </div>
+      <div className="text-sm font-medium text-slate-300">{title}</div>
+      {desc && <div className="max-w-sm text-xs leading-relaxed text-slate-500">{desc}</div>}
+      {action && <div className="mt-1">{action}</div>}
+    </div>
+  );
+}
diff --git a/sundynix-desktop/frontend/src/ui/Input.tsx b/sundynix-desktop/frontend/src/ui/Input.tsx
new file mode 100644
index 0000000..ab4ae96
--- /dev/null
+++ b/sundynix-desktop/frontend/src/ui/Input.tsx
@@ -0,0 +1,32 @@
+import type { InputHTMLAttributes, TextareaHTMLAttributes, SelectHTMLAttributes, ReactNode } from "react";
+import { cn } from "./cn";
+
+const fieldBase =
+  "w-full rounded-md border border-line bg-ink-950 text-sm text-slate-200 placeholder:text-slate-600 transition focus:border-brand focus:outline-none focus:ring-1 focus:ring-brand/40 disabled:opacity-50";
+
+export function Input({ className, ...rest }: InputHTMLAttributes<HTMLInputElement>) {
+  return <input className={cn(fieldBase, "h-9 px-3", className)} {...rest} />;
+}
+
+export function Textarea({ className, ...rest }: TextareaHTMLAttributes<HTMLTextAreaElement>) {
+  return <textarea className={cn(fieldBase, "px-3 py-2 leading-relaxed", className)} {...rest} />;
+}
+
+export function Select({ className, children, ...rest }: SelectHTMLAttributes<HTMLSelectElement>) {
+  return (
+    <select className={cn(fieldBase, "h-9 cursor-pointer px-3", className)} {...rest}>
+      {children}
+    </select>
+  );
+}
+
+// Field 包一层标签 + 控件，统一表单纵向节奏。
+export function Field({ label, hint, children }: { label: string; hint?: string; children: ReactNode }) {
+  return (
+    <label className="flex flex-col gap-1.5">
+      <span className="text-[11px] font-medium text-slate-400">{label}</span>
+      {children}
+      {hint && <span className="text-[10px] text-slate-600">{hint}</span>}
+    </label>
+  );
+}
diff --git a/sundynix-desktop/frontend/src/ui/Tabs.tsx b/sundynix-desktop/frontend/src/ui/Tabs.tsx
new file mode 100644
index 0000000..aaf3e7f
--- /dev/null
+++ b/sundynix-desktop/frontend/src/ui/Tabs.tsx
@@ -0,0 +1,44 @@
+import { cn } from "./cn";
+
+export interface TabDef<T extends string> {
+  key: T;
+  label: string;
+  count?: number;
+}
+
+// Tabs 受控标签条（下划线高亮）。
+export function Tabs<T extends string>({
+  tabs,
+  value,
+  onChange,
+  className,
+}: {
+  tabs: TabDef<T>[];
+  value: T;
+  onChange: (v: T) => void;
+  className?: string;
+}) {
+  return (
+    <div className={cn("flex items-center gap-1", className)}>
+      {tabs.map((t) => {
+        const active = t.key === value;
+        return (
+          <button
+            key={t.key}
+            onClick={() => onChange(t.key)}
+            className={cn(
+              "relative px-3 py-2 text-xs transition",
+              active ? "font-medium text-brand-400" : "text-slate-500 hover:text-slate-300",
+            )}
+          >
+            {t.label}
+            {t.count != null && t.count > 0 && (
+              <span className="ml-1 rounded bg-white/5 px-1 text-[9px] text-slate-400">{t.count}</span>
+            )}
+            {active && <span className="absolute inset-x-2 -bottom-px h-0.5 rounded bg-brand" />}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/sundynix-desktop/frontend/src/ui/Toast.tsx b/sundynix-desktop/frontend/src/ui/Toast.tsx
new file mode 100644
index 0000000..ffe1d4e
--- /dev/null
+++ b/sundynix-desktop/frontend/src/ui/Toast.tsx
@@ -0,0 +1,64 @@
+import { createContext, useCallback, useContext, useRef, useState, type ReactNode } from "react";
+import { CheckCircle2, AlertTriangle, Info, X } from "lucide-react";
+import { cn } from "./cn";
+
+type ToastTone = "success" | "error" | "info";
+interface Toast {
+  id: number;
+  tone: ToastTone;
+  msg: string;
+}
+
+interface ToastCtx {
+  push: (tone: ToastTone, msg: string) => void;
+}
+
+const Ctx = createContext<ToastCtx>({ push: () => {} });
+
+// useToast 在任意组件里弹出全局通知。
+export function useToast() {
+  return useContext(Ctx);
+}
+
+const icons = { success: CheckCircle2, error: AlertTriangle, info: Info };
+const accent = {
+  success: "text-success",
+  error: "text-danger",
+  info: "text-accent-400",
+};
+
+export function ToastProvider({ children }: { children: ReactNode }) {
+  const [toasts, setToasts] = useState<Toast[]>([]);
+  const seq = useRef(0);
+
+  const push = useCallback((tone: ToastTone, msg: string) => {
+    const id = ++seq.current;
+    setToasts((t) => [...t, { id, tone, msg }]);
+    setTimeout(() => setToasts((t) => t.filter((x) => x.id !== id)), 4200);
+  }, []);
+
+  const dismiss = (id: number) => setToasts((t) => t.filter((x) => x.id !== id));
+
+  return (
+    <Ctx.Provider value={{ push }}>
+      {children}
+      <div className="pointer-events-none fixed bottom-4 right-4 z-50 flex w-80 flex-col gap-2">
+        {toasts.map((t) => {
+          const Icon = icons[t.tone];
+          return (
+            <div
+              key={t.id}
+              className="pointer-events-auto flex items-start gap-2.5 rounded-lg border border-line bg-ink-850 px-3 py-2.5 shadow-card"
+            >
+              <Icon className={cn("mt-0.5 h-4 w-4 shrink-0", accent[t.tone])} strokeWidth={2} />
+              <span className="flex-1 text-xs leading-relaxed text-slate-200">{t.msg}</span>
+              <button onClick={() => dismiss(t.id)} className="text-slate-600 hover:text-slate-300">
+                <X className="h-3.5 w-3.5" />
+              </button>
+            </div>
+          );
+        })}
+      </div>
+    </Ctx.Provider>
+  );
+}
diff --git a/sundynix-desktop/frontend/src/ui/cn.ts b/sundynix-desktop/frontend/src/ui/cn.ts
new file mode 100644
index 0000000..5836b53
--- /dev/null
+++ b/sundynix-desktop/frontend/src/ui/cn.ts
@@ -0,0 +1,4 @@
+// cn 合并 className —— 过滤掉 falsy，空格连接（零依赖的轻量 clsx）。
+export function cn(...parts: Array<string | false | null | undefined>): string {
+  return parts.filter(Boolean).join(" ");
+}
diff --git a/sundynix-desktop/frontend/src/ui/index.ts b/sundynix-desktop/frontend/src/ui/index.ts
new file mode 100644
index 0000000..674a972
--- /dev/null
+++ b/sundynix-desktop/frontend/src/ui/index.ts
@@ -0,0 +1,10 @@
+// UI primitives 桶文件 —— 统一从 "../ui" 引入。
+export { cn } from "./cn";
+export { Button } from "./Button";
+export { Input, Textarea, Select, Field } from "./Input";
+export { Card, Panel } from "./Card";
+export { Badge, Dot } from "./Badge";
+export { Tabs, type TabDef } from "./Tabs";
+export { Skeleton, EmptyState } from "./Feedback";
+export { Dialog, ConfirmFooter } from "./Dialog";
+export { ToastProvider, useToast } from "./Toast";
diff --git a/sundynix-desktop/frontend/src/views/Home.tsx b/sundynix-desktop/frontend/src/views/Home.tsx
index fe22a99..13b34a7 100644
--- a/sundynix-desktop/frontend/src/views/Home.tsx
+++ b/sundynix-desktop/frontend/src/views/Home.tsx
@@ -1,20 +1,23 @@
+import { Workflow, Database, Bookmark, FileText, Plus, Upload, ArrowRight, type LucideIcon } from "lucide-react";
 import { useHealth } from "../lib/health";
 import type { ViewKey } from "../shell/LeftNav";
+import { Button, cn } from "../ui";
 
 function Stat({ label, value, sub, accent }: { label: string; value: string; sub: string; accent: string }) {
   return (
-    <div className="rounded-xl border border-line bg-ink-850 p-4">
+    <div className="rounded-lg border border-line bg-ink-850 p-4">
       <div className="text-xs text-slate-500">{label}</div>
-      <div className={`mt-1 text-2xl font-semibold ${accent}`}>{value}</div>
+      <div className={cn("mt-1 text-2xl font-semibold", accent)}>{value}</div>
       <div className="mt-0.5 text-[11px] text-slate-500">{sub}</div>
     </div>
   );
 }
 
-const CAPS = [
-  { icon: "◆", title: "Agent 编排", desc: "React Flow 画布 → Eino 动态图 → 流式执行", to: "studio" as ViewKey, color: "text-violet-400" },
-  { icon: "▣", title: "RAG 知识库", desc: "多文件入库 + 向量/全文/图谱 三路混合检索", to: "kb" as ViewKey, color: "text-cyan-400" },
-  { icon: "◇", title: "偏好记忆", desc: "画像 + 多轮历史，让模型“知道是你”", to: "memory" as ViewKey, color: "text-emerald-400" },
+const CAPS: { icon: LucideIcon; title: string; desc: string; to: ViewKey; color: string }[] = [
+  { icon: Workflow, title: "Agent 编排", desc: "React Flow 画布 → Eino 动态图 → 流式执行", to: "studio", color: "text-brand-400" },
+  { icon: Database, title: "RAG 知识库", desc: "多文件入库 + 向量/全文/图谱 三路混合检索", to: "kb", color: "text-accent-400" },
+  { icon: FileText, title: "报告生成", desc: "规划大纲 → 各章并行检索撰写 → 渲染 Word", to: "report", color: "text-indigo-300" },
+  { icon: Bookmark, title: "偏好记忆", desc: "画像 + 多轮历史，让模型“知道是你”", to: "memory", color: "text-success" },
 ];
 
 // 工作台：平台概览 + 快捷入口（深色 AI 控制台首页）。
@@ -24,49 +27,57 @@ export function Home({ onSelect }: { onSelect: (v: ViewKey) => void }) {
     <div className="h-full overflow-auto p-8">
       <div className="mx-auto max-w-5xl">
         <div className="flex items-center gap-3">
-          <div className="flex h-11 w-11 items-center justify-center rounded-xl bg-gradient-to-br from-violet-500 to-cyan-500 text-lg font-bold text-white shadow-glow">
+          <div className="flex h-11 w-11 items-center justify-center rounded-xl bg-gradient-to-br from-brand to-accent text-lg font-bold text-white shadow-glow">
             S
           </div>
           <div>
             <h1 className="brand-gradient text-2xl font-bold leading-tight">sundynix-agentix</h1>
-            <p className="text-sm text-slate-500">分层式 AI Agent 平台 · 编排 / 知识库 / 记忆</p>
+            <p className="text-sm text-slate-500">分层式 AI Agent 平台 · 编排 / 知识库 / 报告 / 记忆</p>
           </div>
         </div>
 
         <div className="mt-6 grid grid-cols-2 gap-3 md:grid-cols-4">
-          <Stat label="对话模型" value="DeepSeek" sub="chat · 控制面" accent="text-violet-300" />
-          <Stat label="向量模型" value="百炼 v3" sub="embedding · 1024维" accent="text-cyan-300" />
-          <Stat label="混合检索" value="3 路" sub="向量+全文+图谱" accent="text-emerald-300" />
-          <Stat label="网关" value={h.gateway ? "在线" : "离线"} sub={h.persisted ? "持久化就绪" : "降级"} accent={h.gateway ? "text-emerald-300" : "text-rose-300"} />
+          <Stat label="对话模型" value="DeepSeek" sub="chat · 控制面" accent="text-brand-400" />
+          <Stat label="向量模型" value="百炼 v3" sub="embedding · 1024维" accent="text-accent-400" />
+          <Stat label="混合检索" value="3 路" sub="向量+全文+图谱" accent="text-success" />
+          <Stat label="网关" value={h.gateway ? "在线" : "离线"} sub={h.persisted ? "持久化就绪" : "降级"} accent={h.gateway ? "text-success" : "text-danger"} />
         </div>
 
-        <div className="mt-8 grid grid-cols-1 gap-4 md:grid-cols-3">
-          {CAPS.map((c) => (
-            <button
-              key={c.to}
-              onClick={() => onSelect(c.to)}
-              className="group rounded-xl border border-line bg-ink-850 p-5 text-left transition hover:border-violet-500/50 hover:bg-ink-800"
-            >
-              <div className={`text-2xl ${c.color}`}>{c.icon}</div>
-              <div className="mt-3 font-medium text-slate-100">{c.title}</div>
-              <div className="mt-1 text-xs leading-relaxed text-slate-500">{c.desc}</div>
-              <div className="mt-3 text-xs text-violet-400 opacity-0 transition group-hover:opacity-100">进入 →</div>
-            </button>
-          ))}
+        <div className="mt-8 grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
+          {CAPS.map((c) => {
+            const Icon = c.icon;
+            return (
+              <button
+                key={c.to}
+                onClick={() => onSelect(c.to)}
+                className="group rounded-lg border border-line bg-ink-850 p-5 text-left transition hover:border-brand/50 hover:bg-ink-800"
+              >
+                <Icon className={cn("h-6 w-6", c.color)} strokeWidth={1.8} />
+                <div className="mt-3 font-medium text-slate-100">{c.title}</div>
+                <div className="mt-1 text-xs leading-relaxed text-slate-500">{c.desc}</div>
+                <div className="mt-3 flex items-center gap-1 text-xs text-brand-400 opacity-0 transition group-hover:opacity-100">
+                  进入 <ArrowRight className="h-3 w-3" />
+                </div>
+              </button>
+            );
+          })}
         </div>
 
-        <div className="mt-8 rounded-xl border border-line bg-ink-900 p-5">
+        <div className="mt-8 rounded-lg border border-line bg-ink-900 p-5">
           <div className="mb-3 text-sm font-medium text-slate-300">快速开始</div>
           <div className="flex flex-wrap gap-2">
-            <button onClick={() => onSelect("studio")} className="rounded-lg bg-violet-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-violet-500">
-              ＋ 新建 Agent 编排
-            </button>
-            <button onClick={() => onSelect("kb")} className="rounded-lg border border-line px-3 py-1.5 text-sm text-slate-300 hover:bg-ink-800">
-              ⬆ 入库知识
-            </button>
-            <button onClick={() => onSelect("memory")} className="rounded-lg border border-line px-3 py-1.5 text-sm text-slate-300 hover:bg-ink-800">
-              ◇ 管理记忆
-            </button>
+            <Button variant="primary" size="sm" icon={Plus} onClick={() => onSelect("studio")}>
+              新建 Agent 编排
+            </Button>
+            <Button size="sm" icon={Upload} onClick={() => onSelect("kb")}>
+              入库知识
+            </Button>
+            <Button size="sm" icon={FileText} onClick={() => onSelect("report")}>
+              生成报告
+            </Button>
+            <Button size="sm" icon={Bookmark} onClick={() => onSelect("memory")}>
+              管理记忆
+            </Button>
           </div>
         </div>
       </div>
diff --git a/sundynix-desktop/frontend/src/views/KbView.tsx b/sundynix-desktop/frontend/src/views/KbView.tsx
index 76b6da1..8ee5f72 100644
--- a/sundynix-desktop/frontend/src/views/KbView.tsx
+++ b/sundynix-desktop/frontend/src/views/KbView.tsx
@@ -1,5 +1,7 @@
 import { useRef, useState } from "react";
+import { Upload, Search, Network, FileUp } from "lucide-react";
 import { ingestKb, ingestFile, streamIngest, searchKb, graphKb, type IngestEvent, type KbHit, type Triple } from "../lib/api";
+import { Button, Input, Textarea, Badge, cn, useToast } from "../ui";
 
 interface IngestLog {
   t: string;
@@ -18,6 +20,7 @@ interface Progress {
 
 // 知识库管理：实时入库监控（解析→切块→向量化→写入 + 拆分可视化）+ 检索调试台。
 export function KbView() {
+  const toast = useToast();
   const [kb, setKb] = useState("docs");
   const [text, setText] = useState("");
   const [logs, setLogs] = useState<IngestLog[]>([]);
@@ -28,21 +31,19 @@ export function KbView() {
   const [topK, setTopK] = useState(5);
   const [hits, setHits] = useState<KbHit[] | null>(null);
   const [searching, setSearching] = useState(false);
-  const [err, setErr] = useState("");
   const [graph, setGraph] = useState<Triple[] | null>(null);
 
   const onGraph = async () => {
     try {
       setGraph(await graphKb(kb));
     } catch (e) {
-      setErr((e as Error).message);
+      toast.push("error", (e as Error).message);
     }
   };
 
   const stamp = () => new Date().toLocaleTimeString();
   const ingesting = prog?.active ?? false;
 
-  // 订阅某入库 job 的进度流。
   const follow = (job: string, label: string) => {
     setProg({ active: true, stage: "提交", chunks: [] });
     streamIngest(
@@ -59,10 +60,8 @@ export function KbView() {
       () =>
         setProg((p) => {
           const ok = p?.stage !== "失败";
-          setLogs((l) => [
-            { t: stamp(), msg: ok ? `${label}：${p?.total ?? 0} 块入库完成` : `${label}：${p?.error ?? "失败"}`, ok },
-            ...l,
-          ]);
+          setLogs((l) => [{ t: stamp(), msg: ok ? `${label}：${p?.total ?? 0} 块入库完成` : `${label}：${p?.error ?? "失败"}`, ok }, ...l]);
+          toast.push(ok ? "success" : "error", ok ? `${label} 入库完成` : `${label} 入库失败`);
           return p ? { ...p, active: false } : null;
         }),
       () => setProg((p) => (p ? { ...p, active: false, stage: "连接中断" } : null)),
@@ -95,11 +94,10 @@ export function KbView() {
   const onSearch = async () => {
     if (!q.trim()) return;
     setSearching(true);
-    setErr("");
     try {
       setHits(await searchKb(kb, q, topK));
     } catch (e) {
-      setErr((e as Error).message);
+      toast.push("error", (e as Error).message);
       setHits(null);
     } finally {
       setSearching(false);
@@ -112,13 +110,7 @@ export function KbView() {
     <div className="flex h-full flex-col">
       <div className="flex items-center gap-2 border-b border-line bg-ink-900 px-4 py-2">
         <span className="text-sm font-semibold text-slate-300">知识库</span>
-        <input
-          className="w-40 rounded-md border border-line bg-ink-800 px-2 py-1 text-sm text-slate-200 focus:border-violet-500/60 focus:outline-none"
-          value={kb}
-          onChange={(e) => setKb(e.target.value)}
-          placeholder="知识库名"
-          title="知识库（Milvus kb 字段分区）"
-        />
+        <Input className="h-8 w-40" value={kb} onChange={(e) => setKb(e.target.value)} placeholder="知识库名" title="知识库（Milvus kb 字段分区）" />
         <span className="text-[11px] text-slate-500">入库 → 解析 / 切块 / 向量化 / 写入；检索 → 混合召回</span>
       </div>
 
@@ -126,28 +118,22 @@ export function KbView() {
         {/* 左：入库 + 实时监控 */}
         <section className="flex w-1/2 flex-col border-r border-line p-4">
           <h3 className="mb-2 text-xs font-semibold text-slate-400">入库</h3>
-          <textarea
-            className="h-24 w-full resize-none rounded-md border border-line bg-ink-800 p-2 text-sm text-slate-200 focus:border-violet-500/60 focus:outline-none"
-            value={text}
-            onChange={(e) => setText(e.target.value)}
-            placeholder={"每行一条知识，或上传文件"}
-          />
+          <Textarea className="h-24 resize-none" value={text} onChange={(e) => setText(e.target.value)} placeholder="每行一条知识，或上传文件" />
           <div className="mt-2 flex items-center gap-2">
-            <button
-              onClick={onIngest}
-              disabled={ingesting || !text.trim()}
-              className="rounded-md bg-emerald-600 px-3 py-1 text-sm text-white hover:bg-emerald-500 disabled:opacity-40"
-            >
-              {ingesting ? "入库中…" : "⬆ 入库文本"}
-            </button>
+            <Button variant="primary" size="sm" icon={Upload} onClick={onIngest} disabled={ingesting || !text.trim()}>
+              {ingesting ? "入库中…" : "入库文本"}
+            </Button>
             <span className="text-[11px] text-slate-500">或</span>
+            <Button size="sm" icon={FileUp} onClick={() => fileRef.current?.click()} disabled={ingesting}>
+              选择文件
+            </Button>
             <input
               ref={fileRef}
               type="file"
               accept=".txt,.md,.csv,.docx,.xlsx,.pdf"
               onChange={(e) => onFile(e.target.files?.[0])}
               disabled={ingesting}
-              className="text-xs text-slate-400 file:mr-2 file:rounded file:border-0 file:bg-ink-700 file:px-2 file:py-1 file:text-xs file:text-slate-300"
+              className="hidden"
             />
           </div>
           <span className="mt-1 text-[10px] text-slate-500">支持 txt/md/csv/docx/xlsx/pdf（docx/xlsx/pdf 经 mcp-py 解析）</span>
@@ -155,35 +141,38 @@ export function KbView() {
           {/* 实时流水线进度 */}
           {prog && (
             <div className="mt-3 rounded-lg border border-line bg-ink-850 p-2.5">
-              <div className="flex flex-wrap items-center gap-1.5 text-xs">
+              <div className="flex flex-wrap items-center gap-1.5">
                 {["解析", "切块", "向量化", "写Milvus", "写Bleve", "完成"].map((s) => {
                   const active = prog.stage.startsWith(s) || (s === "完成" && prog.stage === "完成");
                   const passed = stageOrder(prog.stage) > stageOrder(s);
                   return (
                     <span
                       key={s}
-                      className={`rounded px-1.5 py-0.5 text-[10px] ${
+                      className={cn(
+                        "rounded px-1.5 py-0.5 text-[10px]",
                         prog.stage === "失败"
                           ? "bg-ink-800 text-slate-600"
                           : active
-                            ? "bg-violet-600 text-white shadow-glow"
+                            ? "bg-brand text-white shadow-glow"
                             : passed
-                              ? "bg-emerald-500/15 text-emerald-400"
-                              : "bg-ink-800 text-slate-600"
-                      }`}
+                              ? "bg-success/15 text-success"
+                              : "bg-ink-800 text-slate-600",
+                      )}
                     >
                       {s}
                     </span>
                   );
                 })}
               </div>
-              {prog.error && <p className="mt-1 text-[11px] text-rose-400">✗ {prog.error}</p>}
+              {prog.error && <p className="mt-1 text-[11px] text-danger">✗ {prog.error}</p>}
               {prog.total ? (
                 <div className="mt-2">
                   <div className="h-1.5 w-full overflow-hidden rounded-full bg-ink-700">
-                    <div className="h-full rounded-full bg-gradient-to-r from-violet-500 to-cyan-400 transition-all" style={{ width: `${pct}%` }} />
+                    <div className="h-full rounded-full bg-gradient-to-r from-brand to-accent transition-all" style={{ width: `${pct}%` }} />
+                  </div>
+                  <div className="mt-1 text-[10px] text-slate-500">
+                    向量化 {prog.done ?? 0}/{prog.total} 块（{pct}%）
                   </div>
-                  <div className="mt-1 text-[10px] text-slate-500">向量化 {prog.done ?? 0}/{prog.total} 块（{pct}%）</div>
                 </div>
               ) : null}
               {prog.chunks.length > 0 && (
@@ -205,7 +194,7 @@ export function KbView() {
           <ul className="flex-1 space-y-1 overflow-auto">
             {logs.length === 0 && <li className="text-xs text-slate-600">尚无入库记录。</li>}
             {logs.map((l, i) => (
-              <li key={i} className={`text-xs ${l.ok ? "text-emerald-400" : "text-rose-400"}`}>
+              <li key={i} className={cn("text-xs", l.ok ? "text-success" : "text-danger")}>
                 <span className="text-slate-600">{l.t}</span> {l.ok ? "✓" : "✗"} {l.msg}
               </li>
             ))}
@@ -216,42 +205,21 @@ export function KbView() {
         <section className="flex w-1/2 flex-col p-4">
           <h3 className="mb-2 text-xs font-semibold text-slate-400">检索调试台（混合召回 + rerank）</h3>
           <div className="flex gap-2">
-            <input
-              className="flex-1 rounded-md border border-line bg-ink-800 px-2 py-1 text-sm text-slate-200 focus:border-violet-500/60 focus:outline-none"
-              value={q}
-              onChange={(e) => setQ(e.target.value)}
-              onKeyDown={(e) => e.key === "Enter" && onSearch()}
-              placeholder="输入查询，语义召回相关片段…"
-            />
-            <input
-              type="number"
-              className="w-16 rounded-md border border-line bg-ink-800 px-2 py-1 text-sm text-slate-200 focus:border-violet-500/60 focus:outline-none"
-              value={topK}
-              min={1}
-              max={20}
-              onChange={(e) => setTopK(Number(e.target.value))}
-              title="TopK"
-            />
-            <button
-              onClick={onSearch}
-              disabled={searching || !q.trim()}
-              className="rounded-md bg-violet-600 px-3 py-1 text-sm text-white hover:bg-violet-500 disabled:opacity-40"
-            >
+            <Input className="flex-1" value={q} onChange={(e) => setQ(e.target.value)} onKeyDown={(e) => e.key === "Enter" && onSearch()} placeholder="输入查询，语义召回相关片段…" />
+            <Input type="number" className="w-16" value={topK} min={1} max={20} onChange={(e) => setTopK(Number(e.target.value))} title="TopK" />
+            <Button variant="primary" size="md" icon={Search} onClick={onSearch} disabled={searching || !q.trim()}>
               {searching ? "检索中…" : "检索"}
-            </button>
+            </Button>
           </div>
-          {err && <p className="mt-2 text-xs text-rose-400">✗ {err}</p>}
           <ul className="mt-3 max-h-[40%] space-y-2 overflow-auto">
             {hits === null && <li className="text-xs text-slate-600">输入查询后展示命中片段与分数。</li>}
-            {hits !== null && hits.length === 0 && (
-              <li className="text-xs text-slate-600">无命中（知识库为空或 RAG 未配置）。</li>
-            )}
+            {hits !== null && hits.length === 0 && <li className="text-xs text-slate-600">无命中（知识库为空或 RAG 未配置）。</li>}
             {hits?.map((h, i) => (
               <li key={i} className="rounded-lg border border-line bg-ink-850 p-2">
                 <div className="mb-1 flex items-center gap-2 text-[10px]">
-                  <span className="rounded bg-sky-500/15 px-1.5 py-0.5 text-sky-400">混合检索</span>
+                  <Badge tone="accent">混合检索</Badge>
                   <span className="text-slate-600">#{i + 1}</span>
-                  <span className="ml-auto font-mono text-violet-400">{h.score.toFixed(3)}</span>
+                  <span className="ml-auto font-mono text-brand-400">{h.score.toFixed(3)}</span>
                 </div>
                 <div className="text-xs text-slate-300">{h.text}</div>
               </li>
@@ -261,20 +229,18 @@ export function KbView() {
           {/* 知识图谱（Neo4j / GraphRAG） */}
           <div className="mt-3 flex items-center justify-between border-t border-line pt-2">
             <h3 className="text-xs font-semibold text-slate-400">知识图谱（Neo4j）</h3>
-            <button onClick={onGraph} className="rounded-md border border-line px-2 py-0.5 text-xs text-slate-300 hover:bg-ink-800">
+            <Button size="sm" icon={Network} onClick={onGraph}>
               查看图谱
-            </button>
+            </Button>
           </div>
           <ul className="mt-2 flex-1 space-y-1 overflow-auto">
             {graph === null && <li className="text-[11px] text-slate-600">点「查看图谱」展示入库抽取的实体关系。</li>}
-            {graph !== null && graph.length === 0 && (
-              <li className="text-[11px] text-slate-600">该库暂无图谱（需配置 chat 模型 + 入库触发抽取）。</li>
-            )}
+            {graph !== null && graph.length === 0 && <li className="text-[11px] text-slate-600">该库暂无图谱（需配置 chat 模型 + 入库触发抽取）。</li>}
             {graph?.map((t, i) => (
               <li key={i} className="flex items-center gap-1 text-[11px]">
-                <span className="rounded bg-amber-500/15 px-1.5 py-0.5 text-amber-300">{t.s}</span>
+                <Badge tone="warn">{t.s}</Badge>
                 <span className="text-slate-500">—{t.p}→</span>
-                <span className="rounded bg-emerald-500/15 px-1.5 py-0.5 text-emerald-300">{t.o}</span>
+                <Badge tone="success">{t.o}</Badge>
               </li>
             ))}
           </ul>
diff --git a/sundynix-desktop/frontend/src/views/Placeholder.tsx b/sundynix-desktop/frontend/src/views/Placeholder.tsx
index 4ff66c8..b875084 100644
--- a/sundynix-desktop/frontend/src/views/Placeholder.tsx
+++ b/sundynix-desktop/frontend/src/views/Placeholder.tsx
@@ -1,11 +1,19 @@
+import { Hammer } from "lucide-react";
+import { Badge } from "../ui";
+
 // 规划中模块占位 —— 深色，露出信息架构与定位。
 export function Placeholder({ title, desc }: { title: string; desc: string }) {
   return (
     <div className="flex h-full items-center justify-center p-8">
-      <div className="max-w-md rounded-xl border border-dashed border-line bg-ink-900 p-8 text-center">
+      <div className="max-w-md rounded-lg border border-dashed border-line bg-ink-900 p-8 text-center">
+        <div className="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-xl border border-line bg-ink-850 text-slate-500">
+          <Hammer className="h-6 w-6" strokeWidth={1.5} />
+        </div>
         <div className="mb-2 text-base font-medium text-slate-200">{title}</div>
         <p className="text-sm leading-relaxed text-slate-500">{desc}</p>
-        <span className="mt-4 inline-block rounded-md bg-ink-800 px-2.5 py-1 text-[11px] text-slate-400">规划中</span>
+        <div className="mt-4">
+          <Badge tone="warn">规划中</Badge>
+        </div>
       </div>
     </div>
   );
diff --git a/sundynix-desktop/frontend/src/views/ReportView.tsx b/sundynix-desktop/frontend/src/views/ReportView.tsx
index a1cdd85..096cb91 100644
--- a/sundynix-desktop/frontend/src/views/ReportView.tsx
+++ b/sundynix-desktop/frontend/src/views/ReportView.tsx
@@ -1,19 +1,21 @@
 import { useRef, useState } from "react";
+import { Play, Download, FileText } from "lucide-react";
 import { generateReport, streamTokens, streamExec, reportDownloadUrl, type Identity, type ExecEvent } from "../lib/api";
 import { ExecTrace } from "../components/ExecTrace";
+import { Button, Input, Field, Panel, Dot, EmptyState, useToast } from "../ui";
 
 type Phase = "idle" | "running" | "done" | "error";
 
 // 报告生成：输入主题(+可选知识库) → 触发后端专用编排
 // （规划大纲 → 各章并行检索+撰写 → 渲染 Word），实时看进度与正文，完成后下载 .docx。
 export function ReportView({ identity }: { identity: Identity }) {
+  const toast = useToast();
   const [topic, setTopic] = useState("");
   const [kb, setKb] = useState("");
   const [phase, setPhase] = useState<Phase>("idle");
   const [out, setOut] = useState("");
   const [exec, setExec] = useState<ExecEvent[]>([]);
   const [taskId, setTaskId] = useState("");
-  const [err, setErr] = useState("");
   const closeRef = useRef<(() => void) | null>(null);
   const execCloseRef = useRef<(() => void) | null>(null);
 
@@ -26,7 +28,6 @@ export function ReportView({ identity }: { identity: Identity }) {
     setPhase("running");
     setOut("");
     setExec([]);
-    setErr("");
     setTaskId("");
     try {
       const id = await generateReport(identity, topic.trim(), kb.trim() || undefined);
@@ -40,20 +41,25 @@ export function ReportView({ identity }: { identity: Identity }) {
       closeRef.current = streamTokens(
         id,
         (tok) => setOut((o) => o + tok),
-        () => setPhase("done"),
         () => {
-          setErr("连接中断");
+          setPhase("done");
+          toast.push("success", "报告已生成，可下载 Word");
+        },
+        () => {
           setPhase("error");
+          toast.push("error", "报告流连接中断");
         },
       );
     } catch (e) {
-      setErr((e as Error).message);
       setPhase("error");
+      toast.push("error", (e as Error).message);
     }
   };
 
+  const tracePhase = running ? "streaming" : phase === "done" ? "done" : phase === "error" ? "error" : "idle";
+
   return (
-    <div className="flex h-full min-h-0 flex-col gap-4 overflow-y-auto p-6">
+    <div className="flex h-full min-h-0 flex-col gap-4 overflow-hidden p-6">
       <header>
         <h1 className="text-lg font-semibold text-slate-100">报告生成</h1>
         <p className="mt-1 text-xs text-slate-500">
@@ -61,75 +67,53 @@ export function ReportView({ identity }: { identity: Identity }) {
         </p>
       </header>
 
-      {/* 输入区 */}
-      <div className="grid grid-cols-[1fr_220px] gap-3 rounded-xl border border-line bg-ink-900 p-4 shadow-card">
-        <div className="flex flex-col gap-2">
-          <label className="text-[11px] font-medium text-slate-400">报告主题</label>
-          <input
+      <div className="grid grid-cols-[1fr_220px_auto_auto] items-end gap-3 rounded-lg border border-line bg-ink-900 p-4 shadow-card">
+        <Field label="报告主题">
+          <Input
             value={topic}
             onChange={(e) => setTopic(e.target.value)}
             onKeyDown={(e) => e.key === "Enter" && onGenerate()}
             placeholder="如：2026 年国产大模型产业现状与趋势分析"
-            className="rounded-lg border border-line bg-ink-950 px-3 py-2 text-sm text-slate-200 outline-none placeholder:text-slate-600 focus:border-violet-500"
           />
-        </div>
-        <div className="flex flex-col gap-2">
-          <label className="text-[11px] font-medium text-slate-400">知识库（可选）</label>
-          <input
-            value={kb}
-            onChange={(e) => setKb(e.target.value)}
-            placeholder="如 docs，留空则不挂检索"
-            className="rounded-lg border border-line bg-ink-950 px-3 py-2 text-sm text-slate-200 outline-none placeholder:text-slate-600 focus:border-violet-500"
-          />
-        </div>
-        <div className="col-span-2 flex items-center gap-3">
-          <button
-            onClick={onGenerate}
-            disabled={running || !topic.trim()}
-            className="rounded-lg bg-gradient-to-r from-violet-500 to-cyan-500 px-4 py-2 text-sm font-medium text-white shadow-glow transition disabled:cursor-not-allowed disabled:opacity-40"
+        </Field>
+        <Field label="知识库（可选）">
+          <Input value={kb} onChange={(e) => setKb(e.target.value)} placeholder="如 docs，留空则不挂检索" />
+        </Field>
+        <Button variant="primary" icon={Play} onClick={onGenerate} disabled={running || !topic.trim()}>
+          {running ? "生成中…" : "生成报告"}
+        </Button>
+        {phase === "done" && taskId ? (
+          <a
+            href={reportDownloadUrl(taskId)}
+            className="inline-flex h-9 items-center gap-1.5 rounded-md border border-brand/60 px-4 text-sm font-medium text-brand-400 transition hover:bg-brand/10"
           >
-            {running ? "生成中…" : "生成报告"}
-          </button>
-          {phase === "done" && taskId && (
-            <a
-              href={reportDownloadUrl(taskId)}
-              className="rounded-lg border border-violet-500/60 px-4 py-2 text-sm font-medium text-violet-300 transition hover:bg-violet-500/10"
-            >
-              ⬇ 下载 Word
-            </a>
-          )}
-          <span className="text-xs text-slate-500">
-            {running && "正在编排，实时进度见下方…"}
-            {phase === "done" && "已完成"}
-            {phase === "error" && <span className="text-rose-400">出错：{err}</span>}
-          </span>
-        </div>
+            <Download className="h-4 w-4" />
+            下载 Word
+          </a>
+        ) : (
+          <span className="h-9" />
+        )}
       </div>
 
-      {/* 执行轨迹 + 报告正文 */}
       <div className="grid min-h-0 flex-1 grid-cols-[340px_1fr] gap-4">
-        <section className="flex min-h-0 flex-col rounded-xl border border-line bg-ink-900 shadow-card">
-          <div className="border-b border-line px-4 py-2.5 text-[11px] font-medium text-slate-400">执行轨迹</div>
-          <div className="min-h-0 flex-1 overflow-y-auto p-4">
-            <ExecTrace events={exec} phase={running ? "streaming" : phase === "done" ? "done" : phase === "error" ? "error" : "idle"} />
-          </div>
-        </section>
+        <Panel title="执行轨迹" icon={FileText}>
+          <ExecTrace events={exec} phase={tracePhase} />
+        </Panel>
 
-        <section className="flex min-h-0 flex-col rounded-xl border border-line bg-ink-900 shadow-card">
-          <div className="flex items-center gap-2 border-b border-line px-4 py-2.5 text-[11px] text-slate-500">
-            <span className={`h-2 w-2 rounded-full ${running ? "animate-pulse bg-cyan-400" : phase === "done" ? "bg-emerald-400" : "bg-slate-600"}`} />
-            报告正文 · {taskId || "未开始"}
-          </div>
-          <div className="min-h-0 flex-1 overflow-y-auto p-4">
-            {out ? (
-              <pre className="whitespace-pre-wrap break-words font-sans text-sm leading-relaxed text-slate-300">{out}</pre>
-            ) : (
-              <div className="flex h-full items-center justify-center text-sm text-slate-600">
-                输入主题并点击「生成报告」，这里将实时显示规划与撰写过程。
-              </div>
-            )}
-          </div>
-        </section>
+        <Panel
+          title={
+            <span className="flex items-center gap-2">
+              <Dot tone={running ? "running" : phase === "done" ? "success" : "neutral"} pulse={running} />
+              报告正文 · {taskId || "未开始"}
+            </span>
+          }
+        >
+          {out ? (
+            <pre className="whitespace-pre-wrap break-words font-sans text-sm leading-relaxed text-slate-300">{out}</pre>
+          ) : (
+            <EmptyState icon={FileText} title="尚未生成报告" desc="输入主题并点击「生成报告」，这里将实时显示规划与撰写过程。" />
+          )}
+        </Panel>
       </div>
     </div>
   );
diff --git a/sundynix-desktop/frontend/src/views/RunsView.tsx b/sundynix-desktop/frontend/src/views/RunsView.tsx
index d02093f..3520ad3 100644
--- a/sundynix-desktop/frontend/src/views/RunsView.tsx
+++ b/sundynix-desktop/frontend/src/views/RunsView.tsx
@@ -1,5 +1,7 @@
+import { Activity, FileText } from "lucide-react";
 import { ExecTrace } from "../components/ExecTrace";
 import { deriveNodes, type RunState } from "../lib/run";
+import { Panel, Dot, EmptyState } from "../ui";
 
 // 运行·观测：把最近一次运行的执行轨迹实时可视化（节点逐个点亮 + 工具入参/产出 + 耗时），
 // 右侧并列模型输出。数据来自 Studio 运行时订阅的 sundynix.exec.<id> 事件流。
@@ -8,8 +10,7 @@ export function RunsView({ run }: { run: RunState }) {
   const tools = nodes.filter((n) => n.kind === "tool");
   const phaseText =
     run.phase === "streaming" ? "执行中" : run.phase === "done" ? "完成" : run.phase === "error" ? "出错" : run.phase === "submitting" ? "提交中" : "就绪";
-  const phaseCls =
-    run.phase === "streaming" ? "text-cyan-400" : run.phase === "done" ? "text-emerald-400" : run.phase === "error" ? "text-rose-400" : "text-slate-500";
+  const tone = run.phase === "streaming" ? "running" : run.phase === "done" ? "success" : run.phase === "error" ? "danger" : "neutral";
 
   return (
     <div className="flex h-full min-h-0 flex-col gap-4 overflow-hidden p-6">
@@ -24,33 +25,32 @@ export function RunsView({ run }: { run: RunState }) {
           <span className="text-slate-500">
             任务 <span className="font-mono text-slate-300">{run.taskId ?? "—"}</span>
           </span>
-          <span className={phaseCls}>● {phaseText}</span>
-          <span className="text-slate-500">{nodes.length} 节点 · {tools.length} 次工具调用</span>
+          <span className="flex items-center gap-1.5 text-slate-400">
+            <Dot tone={tone} pulse={run.phase === "streaming"} />
+            {phaseText}
+          </span>
+          <span className="text-slate-500">
+            {nodes.length} 节点 · {tools.length} 次工具调用
+          </span>
         </div>
       </header>
 
       <div className="grid min-h-0 flex-1 grid-cols-[1.2fr_1fr] gap-4">
-        {/* 执行轨迹 */}
-        <section className="flex min-h-0 flex-col rounded-xl border border-line bg-ink-900 shadow-card">
-          <div className="border-b border-line px-4 py-2.5 text-[11px] font-medium text-slate-400">执行轨迹</div>
-          <div className="min-h-0 flex-1 overflow-y-auto p-4">
-            <ExecTrace events={run.exec} phase={run.phase} />
-          </div>
-        </section>
+        <Panel title="执行轨迹" icon={Activity}>
+          <ExecTrace events={run.exec} phase={run.phase} />
+        </Panel>
 
-        {/* 模型输出 */}
-        <section className="flex min-h-0 flex-col rounded-xl border border-line bg-ink-900 shadow-card">
-          <div className="border-b border-line px-4 py-2.5 text-[11px] font-medium text-slate-400">模型输出</div>
-          <div className="min-h-0 flex-1 overflow-y-auto p-4">
-            {run.output ? (
-              <pre className="whitespace-pre-wrap break-words font-sans text-sm leading-relaxed text-slate-300">{run.output}</pre>
-            ) : (
-              <div className="flex h-full items-center justify-center text-center text-xs text-slate-600">
-                在「编排」页搭图并运行，或在「报告」页生成报告，<br />执行轨迹与输出会实时出现在这里。
-              </div>
-            )}
-          </div>
-        </section>
+        <Panel title="模型输出" icon={FileText}>
+          {run.output ? (
+            <pre className="whitespace-pre-wrap break-words font-sans text-sm leading-relaxed text-slate-300">{run.output}</pre>
+          ) : (
+            <EmptyState
+              icon={Activity}
+              title="尚无运行"
+              desc="在「编排」页搭图并运行，或在「报告」页生成报告，执行轨迹与输出会实时出现在这里。"
+            />
+          )}
+        </Panel>
       </div>
     </div>
   );
diff --git a/sundynix-desktop/frontend/tailwind.config.js b/sundynix-desktop/frontend/tailwind.config.js
index 54226ea..a90131b 100644
--- a/sundynix-desktop/frontend/tailwind.config.js
+++ b/sundynix-desktop/frontend/tailwind.config.js
@@ -14,6 +14,17 @@ export default {
           600: "#323a4f",
         },
         line: "#242b3c",
+        // 语义令牌 —— 强调色统一从这里取，便于整体换肤（紫=brand，青=accent）。
+        brand: { DEFAULT: "#7c5cf6", 400: "#a78bfa", 500: "#8b5cf6", 600: "#6d28d9" },
+        accent: { DEFAULT: "#22d3ee", 400: "#22d3ee", 500: "#06b6d4" },
+        success: { DEFAULT: "#34d399", 500: "#10b981" },
+        warn: { DEFAULT: "#fbbf24", 500: "#f59e0b" },
+        danger: { DEFAULT: "#fb7185", 500: "#f43f5e" },
+      },
+      borderRadius: {
+        // 统一圆角档位
+        lg: "0.625rem", // 10px —— 卡片/面板
+        md: "0.5rem", // 8px —— 控件
       },
       boxShadow: {
         glow: "0 0 0 1px rgba(139,92,246,0.45), 0 0 18px rgba(139,92,246,0.28)",