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>
This commit is contained in:
@@ -2,28 +2,27 @@ import type { Identity } from "../lib/api";
|
||||
import { useHealth } from "../lib/health";
|
||||
|
||||
function Light({ on, label, unknown }: { on?: boolean; label: string; unknown?: boolean }) {
|
||||
const color = unknown ? "bg-gray-300" : on ? "bg-emerald-500" : "bg-rose-500";
|
||||
const dot = unknown ? "bg-slate-600" : on ? "bg-emerald-400 shadow-[0_0_8px_rgba(52,211,153,0.7)]" : "bg-rose-500";
|
||||
return (
|
||||
<span className="flex items-center gap-1 text-[11px] text-gray-500" title={label}>
|
||||
<span className={`h-2 w-2 rounded-full ${color}`} />
|
||||
<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}`} />
|
||||
{label}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
// 顶栏:垂直切换 · 健康灯 · 身份/会话。
|
||||
export function TopBar({
|
||||
identity,
|
||||
setIdentity,
|
||||
}: {
|
||||
identity: Identity;
|
||||
setIdentity: (id: Identity) => void;
|
||||
}) {
|
||||
// 顶栏:品牌 · 垂直切换 · 健康灯 · 身份/会话(深色 + 毛玻璃)。
|
||||
export function TopBar({ identity, setIdentity }: { identity: Identity; setIdentity: (id: Identity) => void }) {
|
||||
const h = useHealth();
|
||||
return (
|
||||
<header className="flex h-11 shrink-0 items-center gap-3 border-b bg-white px-3">
|
||||
<span className="font-semibold text-gray-800">sundynix-agentix</span>
|
||||
<select className="rounded border px-2 py-0.5 text-xs text-gray-700" defaultValue="通用版">
|
||||
<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">
|
||||
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>
|
||||
@@ -37,13 +36,13 @@ export function TopBar({
|
||||
</div>
|
||||
<div className="ml-auto flex items-center gap-2">
|
||||
<input
|
||||
className="w-20 rounded border px-2 py-0.5 text-xs"
|
||||
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 border px-2 py-0.5 text-xs"
|
||||
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"
|
||||
value={identity.sessionId}
|
||||
onChange={(e) => setIdentity({ ...identity, sessionId: e.target.value })}
|
||||
title="会话"
|
||||
|
||||
Reference in New Issue
Block a user