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

feat(desktop): 深色 AI 控制台视觉改造 + 工作台仪表盘

Browse Source 
桌面端从扁平 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:
Blizzard
2026-06-11 16:56:04 +08:00
parent d623b8590e
commit 2291f60380
18 changed files with 327 additions and 207 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sundynix-desktop/frontend/src/views/KbView.tsx
+48 -50
View File
@@ -110,24 +110,24 @@ export function KbView() {
return (
<div className="flex h-full flex-col">
<div className="flex items-center gap-2 border-b bg-white px-4 py-2">
<span className="text-sm font-semibold text-gray-700">知识库</span>
<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 border px-2 py-1 text-sm"
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 字段分区）"
/>
<span className="text-[11px] text-gray-400">入库 → 解析 / 切块 / 向量化 / 写入；检索 → 混合召回</span>
<span className="text-[11px] text-slate-500">入库 → 解析 / 切块 / 向量化 / 写入；检索 → 混合召回</span>
</div>
<div className="flex min-h-0 flex-1">
{/* 左：入库 + 实时监控 */}
<section className="flex w-1/2 flex-col border-r p-4">
<h3 className="mb-2 text-xs font-semibold text-gray-600">入库</h3>
<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 border p-2 text-sm"
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={"每行一条知识，或上传文件"}
@@ -136,26 +136,26 @@ export function KbView() {
<button
onClick={onIngest}
disabled={ingesting || !text.trim()}
className="rounded bg-emerald-600 px-3 py-1 text-sm text-white disabled:opacity-40"
className="rounded-md bg-emerald-600 px-3 py-1 text-sm text-white hover:bg-emerald-500 disabled:opacity-40"
>
{ingesting ? "入库中…" : "⬆ 入库文本"}
</button>
<span className="text-[11px] text-gray-400">或</span>
<span className="text-[11px] text-slate-500">或</span>
<input
ref={fileRef}
type="file"
accept=".txt,.md,.csv,.docx,.xlsx,.pdf"
onChange={(e) => onFile(e.target.files?.[0])}
disabled={ingesting}
className="text-xs file:mr-2 file:rounded file:border file:bg-gray-50 file:px-2 file:py-1 file:text-xs"
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"
/>
</div>
<span className="mt-1 text-[10px] text-gray-400">支持 txt/md/csv/docx/xlsx/pdf（docx/xlsx/pdf 经 mcp-py 解析）</span>
<span className="mt-1 text-[10px] text-slate-500">支持 txt/md/csv/docx/xlsx/pdf（docx/xlsx/pdf 经 mcp-py 解析）</span>
{/* 实时流水线进度 */}
{prog && (
<div className="mt-3 rounded border bg-gray-50 p-2">
<div className="flex items-center gap-2 text-xs">
<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">
{["解析", "切块", "向量化", "写Milvus", "写Bleve", "完成"].map((s) => {
const active = prog.stage.startsWith(s) || (s === "完成" && prog.stage === "完成");
const passed = stageOrder(prog.stage) > stageOrder(s);
@@ -164,12 +164,12 @@ export function KbView() {
key={s}
className={`rounded px-1.5 py-0.5 text-[10px] ${
prog.stage === "失败"
? "bg-gray-100 text-gray-400"
? "bg-ink-800 text-slate-600"
: active
? "bg-violet-600 text-white"
? "bg-violet-600 text-white shadow-glow"
: passed
? "bg-emerald-100 text-emerald-700"
: "bg-gray-100 text-gray-400"
? "bg-emerald-500/15 text-emerald-400"
: "bg-ink-800 text-slate-600"
}`}
>
{s}
@@ -177,24 +177,22 @@ export function KbView() {
);
})}
</div>
{prog.error && <p className="mt-1 text-[11px] text-rose-600">✗ {prog.error}</p>}
{prog.error && <p className="mt-1 text-[11px] text-rose-400">✗ {prog.error}</p>}
{prog.total ? (
<div className="mt-2">
<div className="h-1.5 w-full overflow-hidden rounded bg-gray-200">
<div className="h-full bg-violet-500 transition-all" style={{ width: `${pct}%` }} />
</div>
<div className="mt-0.5 text-[10px] text-gray-500">
向量化 {prog.done ?? 0}/{prog.total} 块（{pct}%）
<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>
<div className="mt-1 text-[10px] text-slate-500">向量化 {prog.done ?? 0}/{prog.total} 块（{pct}%）</div>
</div>
) : null}
{prog.chunks.length > 0 && (
<div className="mt-2">
<div className="text-[10px] font-medium text-gray-500">拆分 {prog.chunks.length} 块：</div>
<div className="text-[10px] font-medium text-slate-500">拆分 {prog.chunks.length} 块：</div>
<ul className="mt-1 max-h-24 space-y-0.5 overflow-auto">
{prog.chunks.map((c, i) => (
<li key={i} className="truncate rounded bg-white px-1.5 py-0.5 text-[10px] text-gray-600">
<span className="text-gray-400">#{i + 1}</span> {c}
<li key={i} className="truncate rounded bg-ink-800 px-1.5 py-0.5 text-[10px] text-slate-400">
<span className="text-slate-600">#{i + 1}</span> {c}
</li>
))}
</ul>
@@ -203,12 +201,12 @@ export function KbView() {
</div>
)}
<h3 className="mb-1 mt-4 text-xs font-semibold text-gray-600">入库历史</h3>
<h3 className="mb-1 mt-4 text-xs font-semibold text-slate-400">入库历史</h3>
<ul className="flex-1 space-y-1 overflow-auto">
{logs.length === 0 && <li className="text-xs text-gray-400">尚无入库记录。</li>}
{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-700" : "text-rose-600"}`}>
<span className="text-gray-400">{l.t}</span> {l.ok ? "✓" : "✗"} {l.msg}
<li key={i} className={`text-xs ${l.ok ? "text-emerald-400" : "text-rose-400"}`}>
<span className="text-slate-600">{l.t}</span> {l.ok ? "✓" : "✗"} {l.msg}
</li>
))}
</ul>
@@ -216,10 +214,10 @@ export function KbView() {
{/* 右：检索调试台 */}
<section className="flex w-1/2 flex-col p-4">
<h3 className="mb-2 text-xs font-semibold text-gray-600">检索调试台（混合召回 + rerank）</h3>
<h3 className="mb-2 text-xs font-semibold text-slate-400">检索调试台（混合召回 + rerank）</h3>
<div className="flex gap-2">
<input
className="flex-1 rounded border px-2 py-1 text-sm"
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()}
@@ -227,7 +225,7 @@ export function KbView() {
/>
<input
type="number"
className="w-16 rounded border px-2 py-1 text-sm"
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}
@@ -237,46 +235,46 @@ export function KbView() {
<button
onClick={onSearch}
disabled={searching || !q.trim()}
className="rounded bg-violet-600 px-3 py-1 text-sm text-white disabled:opacity-40"
className="rounded-md bg-violet-600 px-3 py-1 text-sm text-white hover:bg-violet-500 disabled:opacity-40"
>
{searching ? "检索中…" : "检索"}
</button>
</div>
{err && <p className="mt-2 text-xs text-rose-600">✗ {err}</p>}
{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-gray-400">输入查询后展示命中片段与分数。</li>}
{hits === null && <li className="text-xs text-slate-600">输入查询后展示命中片段与分数。</li>}
{hits !== null && hits.length === 0 && (
<li className="text-xs text-gray-400">无命中（知识库为空或 RAG 未配置）。</li>
<li className="text-xs text-slate-600">无命中（知识库为空或 RAG 未配置）。</li>
)}
{hits?.map((h, i) => (
<li key={i} className="rounded border bg-gray-50 p-2">
<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-100 px-1.5 py-0.5 text-sky-700">混合检索</span>
<span className="text-gray-400">#{i + 1}</span>
<span className="ml-auto font-mono text-violet-600">{h.score.toFixed(3)}</span>
<span className="rounded bg-sky-500/15 px-1.5 py-0.5 text-sky-400">混合检索</span>
<span className="text-slate-600">#{i + 1}</span>
<span className="ml-auto font-mono text-violet-400">{h.score.toFixed(3)}</span>
</div>
<div className="text-xs text-gray-800">{h.text}</div>
<div className="text-xs text-slate-300">{h.text}</div>
</li>
))}
</ul>
{/* 知识图谱（Neo4j / GraphRAG） */}
<div className="mt-3 flex items-center justify-between border-t pt-2">
<h3 className="text-xs font-semibold text-gray-600">知识图谱（Neo4j）</h3>
<button onClick={onGraph} className="rounded border px-2 py-0.5 text-xs hover:bg-gray-50">
<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>
</div>
<ul className="mt-2 flex-1 space-y-1 overflow-auto">
{graph === null && <li className="text-[11px] text-gray-400">点「查看图谱」展示入库抽取的实体关系。</li>}
{graph === null && <li className="text-[11px] text-slate-600">点「查看图谱」展示入库抽取的实体关系。</li>}
{graph !== null && graph.length === 0 && (
<li className="text-[11px] text-gray-400">该库暂无图谱（需配置 chat 模型 + 入库触发抽取）。</li>
<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-100 px-1.5 py-0.5 text-amber-700">{t.s}</span>
<span className="text-gray-400">—{t.p}→</span>
<span className="rounded bg-emerald-100 px-1.5 py-0.5 text-emerald-700">{t.o}</span>
<span className="rounded bg-amber-500/15 px-1.5 py-0.5 text-amber-300">{t.s}</span>
<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>
</li>
))}
</ul>