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:
@@ -1,13 +1,11 @@
|
||||
// 规划中模块占位 —— 让信息架构可见,同时说明该模块的定位与依赖。
|
||||
// 规划中模块占位 —— 深色,露出信息架构与定位。
|
||||
export function Placeholder({ title, desc }: { title: string; desc: string }) {
|
||||
return (
|
||||
<div className="flex h-full items-center justify-center">
|
||||
<div className="max-w-md rounded-lg border border-dashed bg-gray-50 p-6 text-center">
|
||||
<div className="mb-1 text-sm font-semibold text-gray-600">{title}</div>
|
||||
<p className="text-xs leading-relaxed text-gray-400">{desc}</p>
|
||||
<span className="mt-3 inline-block rounded bg-gray-200 px-2 py-0.5 text-[10px] text-gray-500">
|
||||
规划中
|
||||
</span>
|
||||
<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="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>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user