Blizzard
72bd43965f
把"手搓内联 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>
65 lines
2.9 KiB
TypeScript
65 lines
2.9 KiB
TypeScript
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-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={unknown ? `${label}（状态未透出）` : label}>
|
|
<span className={cn("h-1.5 w-1.5 rounded-full", dot)} />
|
|
{label}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
// 顶栏：品牌 · 垂直切换 · 健康灯 · 身份/会话（深色 + 毛玻璃）。
|
|
export function TopBar({ identity, setIdentity }: { identity: Identity; setIdentity: (id: Identity) => void }) {
|
|
const h = useHealth();
|
|
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-brand to-accent text-xs font-bold text-white">
|
|
S
|
|
</div>
|
|
<span className="brand-gradient text-sm font-semibold">sundynix-agentix</span>
|
|
</div>
|
|
<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" />
|
|
<Light unknown label="NATS" />
|
|
<Light unknown label="Milvus" />
|
|
<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-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="会话"
|
|
/>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|