sundynix/sundynix-agentix
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
把"手搓内联 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>
This commit is contained in:
Blizzard
2026-06-12 16:39:42 +08:00
parent 190c191ce4
commit 72bd43965f
25 changed files with 715 additions and 348 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sundynix-desktop/frontend/src/shell/TopBar.tsx
+27 -16
View File
@@ -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="会话"