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:
@@ -5,4 +5,5 @@ use (
|
||||
./sundynix-gateway
|
||||
./sundynix-mcp-go
|
||||
./sundynix-shared
|
||||
./sundynix-desktop
|
||||
)
|
||||
|
||||
+10
-1
@@ -22,7 +22,6 @@ github.com/inconshreveable/mousetrap v1.1.0 h1:wN+x4NVGpMsO7ErUn/mUI3vEoE6Jt13X2
|
||||
github.com/inconshreveable/mousetrap v1.1.0/go.mod h1:vpF70FUmC8bwa3OWnCshd2FqLfsEA9PFc4w1p2J65bw=
|
||||
github.com/knz/go-libedit v1.10.1 h1:0pHpWtx9vcvC0xGZqEQlQdfSQs7WRlAjuPvk3fOZDCo=
|
||||
github.com/kr/pty v1.1.1 h1:VkoXIwSboBpnk99O/KFauAEILuNHv5DVFKZMBN/gUgw=
|
||||
github.com/neo4j/neo4j-go-driver/v5 v5.24.0 h1:7MAFoB7L6f9heQUo/tJ5EnrrpVzm9ZBHgH8ew03h6Eo=
|
||||
github.com/pelletier/go-toml v1.2.0 h1:T5zMGML61Wp+FlcbWjRDT7yAxhJNAiPPLOFECq181zc=
|
||||
github.com/spf13/cobra v1.7.0 h1:hyqWnYt1ZQShIddO5kBpj3vu05/++x6tJ6dg8EC572I=
|
||||
github.com/spf13/cobra v1.7.0/go.mod h1:uLxZILRyS/50WlhOIKD7W6V5bgeIt+4sICxh6uRMrb0=
|
||||
@@ -34,25 +33,35 @@ github.com/x448/float16 v0.8.4 h1:qLwI1I70+NjRFUR3zs1JPUCgaCXSh3SW62uAKT1mSBM=
|
||||
github.com/x448/float16 v0.8.4/go.mod h1:14CWIYCyZA/cWjXOioeEpHeN/83MdbZDRQHoFcYsOfg=
|
||||
github.com/yuin/goldmark v1.4.13 h1:fVcFKWvrslecOb/tg+Cc05dkeYx540o0FuFt3nUVDoE=
|
||||
github.com/yuin/goldmark v1.4.13/go.mod h1:6yULJ656Px+3vBD8DxQVa3kxgyrAnzto9xy5taEt/CY=
|
||||
github.com/yuin/goldmark v1.7.4/go.mod h1:uzxRWxtg69N339t3louHJ7+O03ezfj6PlliRlaOzY1E=
|
||||
go.uber.org/automaxprocs v1.5.3 h1:kWazyxZUrS3Gs4qUpbwo5kEIMGe/DAvi5Z4tl2NW4j8=
|
||||
go.uber.org/automaxprocs v1.5.3/go.mod h1:eRbA25aqJrxAbsLO0xy5jVwPt7FQnRgjW+efnwa1WM0=
|
||||
golang.org/x/crypto v0.23.0/go.mod h1:CKFgDieR+mRhux2Lsu27y0fO304Db0wZe70UKqHu0v8=
|
||||
golang.org/x/crypto v0.33.0/go.mod h1:bVdXmD7IV/4GdElGPozy6U7lWdRXA4qyRVGJV57uQ5M=
|
||||
golang.org/x/mod v0.17.0 h1:zY54UmvipHiNd+pm+m0x9KhZ9hl1/7QNMyxXbc6ICqA=
|
||||
golang.org/x/mod v0.17.0/go.mod h1:hTbmBsO62+eylJbnUtE2MGJUyE7QWk4xUqPFrRgJ+7c=
|
||||
golang.org/x/mod v0.23.0/go.mod h1:6SkKJ3Xj0I0BrPOZoBy3bdMptDDU9oJrpohJ3eWZ1fY=
|
||||
golang.org/x/net v0.35.0/go.mod h1:EglIi67kWsHKlRzzVMUD93VMSWGFOMSZgxFjparz1Qk=
|
||||
golang.org/x/sync v0.8.0 h1:3NFvSEYkUoMifnESzZl15y791HH1qU2xm6eCJU5ZPXQ=
|
||||
golang.org/x/sync v0.8.0/go.mod h1:Czt+wKu1gCyEFDUtn0jG5QVvpJ6rzVqr5aXyt9drQfk=
|
||||
golang.org/x/sync v0.11.0/go.mod h1:Czt+wKu1gCyEFDUtn0jG5QVvpJ6rzVqr5aXyt9drQfk=
|
||||
golang.org/x/sys v0.20.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
|
||||
golang.org/x/sys v0.22.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
|
||||
golang.org/x/sys v0.28.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
|
||||
golang.org/x/telemetry v0.0.0-20240228155512-f48c80bd79b2 h1:IRJeR9r1pYWsHKTRe/IInb7lYvbBVIqOgsX/u0mbOWY=
|
||||
golang.org/x/telemetry v0.0.0-20240228155512-f48c80bd79b2/go.mod h1:TeRTkGYfJXctD9OcfyVLyj2J3IxLnKwHJR8f4D8a3YE=
|
||||
golang.org/x/telemetry v0.0.0-20240521205824-bda55230c457/go.mod h1:pRgIJT+bRLFKnoM1ldnzKoxTIn14Yxz928LQRYYgIN0=
|
||||
golang.org/x/term v0.20.0/go.mod h1:8UkIAJTvZgivsXaD6/pH6U9ecQzZ45awqEOzuCvwpFY=
|
||||
golang.org/x/term v0.24.0 h1:Mh5cbb+Zk2hqqXNO7S1iTjEphVL+jb8ZWaqh/g+JWkM=
|
||||
golang.org/x/term v0.24.0/go.mod h1:lOBK/LVxemqiMij05LGJ0tzNr8xlmwBRJ81PX6wVLH8=
|
||||
golang.org/x/term v0.27.0/go.mod h1:iMsnZpn0cago0GOrHO2+Y7u7JPn5AylBrcoWkElMTSM=
|
||||
golang.org/x/term v0.29.0/go.mod h1:6bl4lRlvVuDgSf3179VpIxBF0o10JUpXWOnI7nErv7s=
|
||||
golang.org/x/text v0.15.0/go.mod h1:18ZOQIKpY8NJVqYksKHtTdi31H5itFRjB5/qKTNYzSU=
|
||||
golang.org/x/text v0.22.0/go.mod h1:YRoo4H8PVmsu+E3Ou7cqLVH8oXWIHVoX0jqUWALQhfY=
|
||||
golang.org/x/tools v0.13.0/go.mod h1:HvlwmtVNQAhOuCjW7xxvovg8wbNq7LwfXh/k7wXUl58=
|
||||
golang.org/x/tools v0.21.1-0.20240508182429-e35e4ccd0d2d h1:vU5i/LfpvrRCpgM/VPfJLg5KjxD3E+hfT1SH+d9zLwg=
|
||||
golang.org/x/tools v0.21.1-0.20240508182429-e35e4ccd0d2d/go.mod h1:aiJjzUbINMkxbQROHiO6hDPo2LHcIPhhQsa9DLh0yGk=
|
||||
golang.org/x/tools v0.30.0/go.mod h1:c347cR/OJfw5TI+GfX7RUPNMdDRRbjvYTS0jPyvsVtY=
|
||||
gopkg.in/errgo.v2 v2.1.0 h1:0vLT13EuvQ0hNvakwLuFZ/jYrLp5F3kcWHXdRggjCE8=
|
||||
nullprogram.com/x/optparse v1.0.0 h1:xGFgVi5ZaWOnYdac2foDT3vg0ZZC9ErXFV57mr4OHrI=
|
||||
rsc.io/pdf v0.1.1 h1:k1MczvYDUvJBe93bYd7wrZLLUEcLZAuF824/I4e5Xr4=
|
||||
|
||||
@@ -6,6 +6,7 @@ import { BottomDrawer } from "./shell/BottomDrawer";
|
||||
import { StudioView } from "./studio/StudioView";
|
||||
import { MemoryView } from "./views/MemoryView";
|
||||
import { KbView } from "./views/KbView";
|
||||
import { Home } from "./views/Home";
|
||||
import { Placeholder } from "./views/Placeholder";
|
||||
import { submitTask, streamTokens, type Identity } from "./lib/api";
|
||||
import type { TaskDsl } from "./lib/dsl";
|
||||
@@ -21,7 +22,7 @@ const PLACEHOLDERS: Partial<Record<ViewKey, { title: string; desc: string }>> =
|
||||
};
|
||||
|
||||
export default function App() {
|
||||
const [view, setView] = useState<ViewKey>("studio");
|
||||
const [view, setView] = useState<ViewKey>("home");
|
||||
const [identity, setIdentity] = useState<Identity>({ userId: "wt", sessionId: "sess-ui" });
|
||||
const [run, setRun] = useState<RunState>(emptyRun);
|
||||
const closeRef = useRef<(() => void) | null>(null);
|
||||
@@ -64,12 +65,19 @@ export default function App() {
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="flex h-screen w-screen flex-col text-gray-900">
|
||||
<div className="relative flex h-screen w-screen flex-col bg-ink-950 text-slate-200">
|
||||
{/* 顶部柔光,增加纵深 */}
|
||||
<div
|
||||
className="pointer-events-none absolute inset-x-0 top-0 h-64 opacity-60"
|
||||
style={{ background: "radial-gradient(60% 100% at 50% 0%, rgba(124,92,246,0.10), transparent 70%)" }}
|
||||
/>
|
||||
<TopBar identity={identity} setIdentity={setIdentity} />
|
||||
<div className="flex min-h-0 flex-1">
|
||||
<div className="relative flex min-h-0 flex-1">
|
||||
<LeftNav active={view} onSelect={setView} />
|
||||
<main className="min-w-0 flex-1 overflow-hidden">
|
||||
{view === "studio" ? (
|
||||
{view === "home" ? (
|
||||
<Home onSelect={setView} />
|
||||
) : view === "studio" ? (
|
||||
<StudioView onRun={onRun} phase={run.phase} />
|
||||
) : view === "kb" ? (
|
||||
<KbView />
|
||||
|
||||
@@ -8,3 +8,45 @@ body,
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #0b0d12;
|
||||
color: #cbd2de;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
/* 深色滚动条 */
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #242b3c;
|
||||
border-radius: 8px;
|
||||
border: 2px solid transparent;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #323a4f;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* 紫→青品牌渐变文字 */
|
||||
.brand-gradient {
|
||||
background: linear-gradient(90deg, #a78bfa, #22d3ee);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
/* 输入控件深色统一 */
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
@@ -19,32 +19,23 @@ export function MemoryPanel({ identity }: { identity: Identity }) {
|
||||
}
|
||||
};
|
||||
|
||||
const inputCls = "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";
|
||||
return (
|
||||
<section className="border-b p-4">
|
||||
<h2 className="mb-2 text-sm font-semibold text-gray-700">偏好记忆(让模型知道是我)</h2>
|
||||
<section className="border-b border-line p-4">
|
||||
<h2 className="mb-2 text-sm font-semibold text-slate-300">偏好记忆(让模型知道是我)</h2>
|
||||
<div className="flex flex-col gap-2">
|
||||
<input
|
||||
className="rounded border px-2 py-1 text-sm"
|
||||
value={key}
|
||||
onChange={(e) => setKey(e.target.value)}
|
||||
placeholder="键,如 称呼 / 回答偏好"
|
||||
/>
|
||||
<textarea
|
||||
className="h-16 resize-none rounded border px-2 py-1 text-sm"
|
||||
value={value}
|
||||
onChange={(e) => setValue(e.target.value)}
|
||||
placeholder="值"
|
||||
/>
|
||||
<button onClick={save} className="self-end rounded bg-emerald-600 px-3 py-1 text-sm text-white">
|
||||
<input className={inputCls} value={key} onChange={(e) => setKey(e.target.value)} placeholder="键,如 称呼 / 回答偏好" />
|
||||
<textarea className={`${inputCls} h-16 resize-none`} value={value} onChange={(e) => setValue(e.target.value)} placeholder="值" />
|
||||
<button onClick={save} className="self-end rounded-md bg-emerald-600 px-3 py-1 text-sm text-white hover:bg-emerald-500">
|
||||
记住
|
||||
</button>
|
||||
</div>
|
||||
{msg && <p className="mt-2 text-xs text-emerald-700">{msg}</p>}
|
||||
{msg && <p className="mt-2 text-xs text-emerald-400">{msg}</p>}
|
||||
{saved.length > 0 && (
|
||||
<ul className="mt-3 space-y-1">
|
||||
{saved.map((s) => (
|
||||
<li key={s.key} className="rounded bg-gray-50 px-2 py-1 text-xs text-gray-600">
|
||||
<span className="font-medium">{s.key}</span>:{s.value}
|
||||
<li key={s.key} className="rounded-md bg-ink-800 px-2 py-1 text-xs text-slate-400">
|
||||
<span className="font-medium text-slate-200">{s.key}</span>:{s.value}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
@@ -10,14 +10,19 @@ const TABS: Array<{ key: Tab; label: string }> = [
|
||||
{ key: "eval", label: "评测" },
|
||||
];
|
||||
|
||||
// 底部抽屉:运行输出 / 轨迹 / 工具调用 / 引用 / 评测(全局常驻)。
|
||||
// 底部抽屉:运行输出 / 轨迹 / 工具调用 / 引用 / 评测(深色,全局常驻)。
|
||||
export function BottomDrawer({ run }: { run: RunState }) {
|
||||
const [open, setOpen] = useState(true);
|
||||
const [tab, setTab] = useState<Tab>("output");
|
||||
|
||||
const status =
|
||||
run.phase === "streaming" ? "text-cyan-400" : run.phase === "done" ? "text-emerald-400" : run.phase === "error" ? "text-rose-400" : "text-slate-500";
|
||||
const statusText =
|
||||
run.phase === "streaming" ? "流式中…" : run.phase === "done" ? "完成 ✓" : run.phase === "error" ? `✗ ${run.error ?? "出错"}` : run.phase === "submitting" ? "提交中…" : "就绪";
|
||||
|
||||
return (
|
||||
<div className="shrink-0 border-t bg-white">
|
||||
<div className="flex items-center gap-1 border-b px-2">
|
||||
<div className="shrink-0 border-t border-line bg-ink-900">
|
||||
<div className="flex items-center gap-1 border-b border-line px-2">
|
||||
{TABS.map((t) => (
|
||||
<button
|
||||
key={t.key}
|
||||
@@ -25,61 +30,39 @@ export function BottomDrawer({ run }: { run: RunState }) {
|
||||
setTab(t.key);
|
||||
setOpen(true);
|
||||
}}
|
||||
className={`px-3 py-1.5 text-xs ${
|
||||
tab === t.key && open
|
||||
? "border-b-2 border-violet-500 font-medium text-violet-700"
|
||||
: "text-gray-500"
|
||||
className={`px-3 py-2 text-xs transition ${
|
||||
tab === t.key && open ? "border-b-2 border-violet-500 font-medium text-violet-300" : "text-slate-500 hover:text-slate-300"
|
||||
}`}
|
||||
>
|
||||
{t.label}
|
||||
</button>
|
||||
))}
|
||||
<span className="ml-2 text-[11px] text-gray-400">
|
||||
{run.phase === "streaming"
|
||||
? "流式中…"
|
||||
: run.phase === "done"
|
||||
? "完成 ✓"
|
||||
: run.phase === "error"
|
||||
? `✗ ${run.error ?? "出错"}`
|
||||
: run.phase === "submitting"
|
||||
? "提交中…"
|
||||
: "就绪"}
|
||||
</span>
|
||||
<button onClick={() => setOpen((o) => !o)} className="ml-auto px-2 text-xs text-gray-400">
|
||||
<span className={`ml-2 text-[11px] ${status}`}>{statusText}</span>
|
||||
<button onClick={() => setOpen((o) => !o)} className="ml-auto px-2 text-xs text-slate-500 hover:text-slate-300">
|
||||
{open ? "▾ 收起" : "▴ 展开"}
|
||||
</button>
|
||||
</div>
|
||||
{open && (
|
||||
<div className="h-40 overflow-auto p-3 text-xs">
|
||||
{tab === "output" && (
|
||||
<pre className="whitespace-pre-wrap leading-relaxed text-gray-800">
|
||||
<pre className="whitespace-pre-wrap font-mono leading-relaxed text-emerald-300">
|
||||
{run.output || "在编排页搭图 → 运行,模型注入画像与历史后流式作答,token 在此呈现。"}
|
||||
</pre>
|
||||
)}
|
||||
{tab === "trace" && (
|
||||
<ul className="space-y-1 text-gray-600">
|
||||
{run.events.length === 0 && <li className="text-gray-400">尚无运行。</li>}
|
||||
<ul className="space-y-1 text-slate-400">
|
||||
{run.events.length === 0 && <li className="text-slate-600">尚无运行。</li>}
|
||||
{run.events.map((e, i) => (
|
||||
<li key={i}>
|
||||
<span className="text-gray-400">+{e.t}ms</span> · {e.label}
|
||||
<span className="text-slate-600">+{e.t}ms</span> · {e.label}
|
||||
</li>
|
||||
))}
|
||||
<li className="mt-2 text-[11px] text-gray-400">
|
||||
(节点级轨迹待后端回流节点事件后逐节点点亮)
|
||||
</li>
|
||||
{run.events.length > 0 && <li className="mt-2 text-[11px] text-slate-600">(节点级轨迹待后端回流节点事件后逐节点点亮)</li>}
|
||||
</ul>
|
||||
)}
|
||||
{tab === "tools" && (
|
||||
<p className="text-gray-400">
|
||||
工具调用日志:每次 sundynix.tools.* 的请求/响应。需后端把工具事件回流到流通道。
|
||||
</p>
|
||||
)}
|
||||
{tab === "cite" && (
|
||||
<p className="text-gray-400">引用列表:RAG 答案的来源块(源文档 + 分数 + 来源徽标)。需 RAG 链路就绪。</p>
|
||||
)}
|
||||
{tab === "eval" && (
|
||||
<p className="text-gray-400">评测:忠实度 / 完整度质量门结果。需 harness eval 接入。</p>
|
||||
)}
|
||||
{tab === "tools" && <p className="text-slate-600">工具调用日志:每次 sundynix.tools.* 的请求/响应(需后端回流工具事件)。</p>}
|
||||
{tab === "cite" && <p className="text-slate-600">引用列表:RAG 答案的来源块(源文档 + 分数 + 来源徽标)。</p>}
|
||||
{tab === "eval" && <p className="text-slate-600">评测:忠实度 / 完整度质量门结果(需 harness eval)。</p>}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -17,43 +17,39 @@ interface Item {
|
||||
}
|
||||
|
||||
const ITEMS: Item[] = [
|
||||
{ key: "home", label: "工作台", icon: "■" },
|
||||
{ key: "home", label: "工作台", icon: "▤", ready: true },
|
||||
{ key: "studio", label: "编排", icon: "◆", group: "BUILD", ready: true },
|
||||
{ key: "kb", label: "知识库", icon: "▣", group: "BUILD", ready: true },
|
||||
{ key: "report", label: "报告", icon: "▤", group: "BUILD" },
|
||||
{ key: "report", label: "报告", icon: "▦", group: "BUILD" },
|
||||
{ key: "runs", label: "运行", icon: "▸", group: "RUN" },
|
||||
{ key: "memory", label: "记忆", icon: "◇", group: "MANAGE", ready: true },
|
||||
{ key: "market", label: "市场", icon: "⌧", group: "MANAGE" },
|
||||
{ key: "admin", label: "管理", icon: "⚙", group: "MANAGE" },
|
||||
];
|
||||
|
||||
// 左导航栏:模块切换,分组 BUILD / RUN / MANAGE;未就绪模块灰显(规划中)。
|
||||
// 左导航:深色,激活态紫色高亮 + 左侧光条。
|
||||
export function LeftNav({ active, onSelect }: { active: ViewKey; onSelect: (v: ViewKey) => void }) {
|
||||
let lastGroup: string | undefined;
|
||||
return (
|
||||
<nav className="flex w-20 shrink-0 flex-col border-r bg-gray-50 py-2">
|
||||
<nav className="flex w-[72px] shrink-0 flex-col gap-0.5 border-r border-line bg-ink-900 py-2">
|
||||
{ITEMS.map((it) => {
|
||||
const header = it.group && it.group !== lastGroup ? it.group : null;
|
||||
lastGroup = it.group ?? lastGroup;
|
||||
const isActive = active === it.key;
|
||||
return (
|
||||
<div key={it.key}>
|
||||
{header && (
|
||||
<div className="mt-2 px-2 text-[9px] font-semibold tracking-wider text-gray-300">
|
||||
{header}
|
||||
</div>
|
||||
)}
|
||||
{header && <div className="mt-3 px-2 text-[9px] font-semibold tracking-widest text-slate-600">{header}</div>}
|
||||
<button
|
||||
onClick={() => onSelect(it.key)}
|
||||
className={`flex w-full flex-col items-center gap-0.5 py-2 text-[11px] ${
|
||||
active === it.key
|
||||
? "bg-violet-50 font-medium text-violet-700"
|
||||
: "text-gray-500 hover:bg-gray-100"
|
||||
className={`relative flex w-full flex-col items-center gap-1 py-2.5 text-[11px] transition ${
|
||||
isActive ? "text-violet-300" : "text-slate-500 hover:bg-ink-800 hover:text-slate-300"
|
||||
}`}
|
||||
title={it.ready === false ? `${it.label}(规划中)` : it.label}
|
||||
>
|
||||
<span className="text-base leading-none">{it.icon}</span>
|
||||
{isActive && <span className="absolute left-0 top-1/2 h-6 w-0.5 -translate-y-1/2 rounded-r bg-gradient-to-b from-violet-400 to-cyan-400" />}
|
||||
<span className={`text-lg leading-none ${isActive ? "drop-shadow-[0_0_6px_rgba(139,92,246,0.6)]" : ""}`}>{it.icon}</span>
|
||||
{it.label}
|
||||
{it.ready === false && <span className="text-[8px] text-gray-300">规划</span>}
|
||||
{it.ready === false && <span className="text-[8px] text-slate-600">规划</span>}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -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="会话"
|
||||
|
||||
@@ -1,7 +1,10 @@
|
||||
import type { Node } from "@xyflow/react";
|
||||
import { NODE_KINDS } from "./nodeCatalog";
|
||||
|
||||
// 右检查器:按选中节点的类型渲染配置表单;空选时显示图级提示。
|
||||
const inputCls =
|
||||
"mt-1 w-full 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";
|
||||
|
||||
// 右检查器:按选中节点的类型渲染配置表单;空选时显示图级提示(深色)。
|
||||
export function Inspector({
|
||||
node,
|
||||
onChange,
|
||||
@@ -13,7 +16,7 @@ export function Inspector({
|
||||
}) {
|
||||
if (!node) {
|
||||
return (
|
||||
<div className="p-4 text-xs text-gray-400">
|
||||
<div className="p-4 text-xs leading-relaxed text-slate-500">
|
||||
选中一个节点查看/编辑配置。
|
||||
<br />
|
||||
从左侧面板添加节点,拖动连线编排。
|
||||
@@ -23,66 +26,49 @@ export function Inspector({
|
||||
const data = node.data as { kind: string; label?: string; config?: Record<string, unknown> };
|
||||
const k = NODE_KINDS[data.kind] ?? NODE_KINDS.output;
|
||||
const config = data.config ?? {};
|
||||
|
||||
const setConfig = (key: string, value: unknown) =>
|
||||
onChange(node.id, { config: { ...config, [key]: value } });
|
||||
const setConfig = (key: string, value: unknown) => onChange(node.id, { config: { ...config, [key]: value } });
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col">
|
||||
<div className="flex items-center justify-between border-b p-3">
|
||||
<div className="flex items-center justify-between border-b border-line p-3">
|
||||
<span className={`rounded px-1.5 py-0.5 text-[11px] font-medium ${k.badge}`}>{k.label}</span>
|
||||
<button onClick={() => onDelete(node.id)} className="text-xs text-rose-500 hover:underline">
|
||||
<button onClick={() => onDelete(node.id)} className="text-xs text-rose-400 hover:underline">
|
||||
删除
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex flex-col gap-3 overflow-auto p-3">
|
||||
<label className="text-xs text-gray-500">
|
||||
<label className="text-xs text-slate-500">
|
||||
标签
|
||||
<input
|
||||
className="mt-1 w-full rounded border px-2 py-1 text-sm text-gray-900"
|
||||
value={data.label ?? ""}
|
||||
onChange={(e) => onChange(node.id, { label: e.target.value })}
|
||||
/>
|
||||
<input className={inputCls} value={data.label ?? ""} onChange={(e) => onChange(node.id, { label: e.target.value })} />
|
||||
</label>
|
||||
{k.fields.map((f) => {
|
||||
const v = config[f.key];
|
||||
return (
|
||||
<label key={f.key} className="text-xs text-gray-500">
|
||||
<label key={f.key} className="text-xs text-slate-500">
|
||||
{f.label}
|
||||
{f.required && <span className="text-rose-500"> *</span>}
|
||||
{f.required && <span className="text-rose-400"> *</span>}
|
||||
{f.type === "select" ? (
|
||||
<select
|
||||
className="mt-1 w-full rounded border px-2 py-1 text-sm text-gray-900"
|
||||
value={String(v ?? "")}
|
||||
onChange={(e) => setConfig(f.key, e.target.value)}
|
||||
>
|
||||
<select className={inputCls} value={String(v ?? "")} onChange={(e) => setConfig(f.key, e.target.value)}>
|
||||
{f.options?.map((o) => (
|
||||
<option key={o}>{o}</option>
|
||||
))}
|
||||
</select>
|
||||
) : f.type === "textarea" ? (
|
||||
<textarea
|
||||
className="mt-1 h-16 w-full resize-none rounded border px-2 py-1 text-sm text-gray-900"
|
||||
className={`${inputCls} h-16 resize-none`}
|
||||
value={String(v ?? "")}
|
||||
placeholder={f.placeholder}
|
||||
onChange={(e) => setConfig(f.key, e.target.value)}
|
||||
/>
|
||||
) : f.type === "checkbox" ? (
|
||||
<input
|
||||
type="checkbox"
|
||||
className="ml-2 align-middle"
|
||||
checked={Boolean(v)}
|
||||
onChange={(e) => setConfig(f.key, e.target.checked)}
|
||||
/>
|
||||
<input type="checkbox" className="ml-2 align-middle accent-violet-500" checked={Boolean(v)} onChange={(e) => setConfig(f.key, e.target.checked)} />
|
||||
) : (
|
||||
<input
|
||||
type={f.type === "number" ? "number" : "text"}
|
||||
className="mt-1 w-full rounded border px-2 py-1 text-sm text-gray-900"
|
||||
className={inputCls}
|
||||
value={String(v ?? "")}
|
||||
placeholder={f.placeholder}
|
||||
onChange={(e) =>
|
||||
setConfig(f.key, f.type === "number" ? Number(e.target.value) : e.target.value)
|
||||
}
|
||||
onChange={(e) => setConfig(f.key, f.type === "number" ? Number(e.target.value) : e.target.value)}
|
||||
/>
|
||||
)}
|
||||
</label>
|
||||
|
||||
@@ -93,15 +93,15 @@ export function StudioView({
|
||||
return (
|
||||
<div className="flex h-full">
|
||||
{/* 左节点面板 */}
|
||||
<div className="w-40 shrink-0 overflow-auto border-r bg-gray-50 p-2">
|
||||
<div className="mb-1 px-1 text-[11px] font-semibold text-gray-500">节点</div>
|
||||
<div className="w-40 shrink-0 overflow-auto border-r border-line bg-ink-900 p-2">
|
||||
<div className="mb-1 px-1 text-[11px] font-semibold text-slate-500">节点</div>
|
||||
{NODE_ORDER.map((kind) => {
|
||||
const k = NODE_KINDS[kind];
|
||||
return (
|
||||
<button
|
||||
key={kind}
|
||||
onClick={() => addNode(kind)}
|
||||
className={`mb-1 flex w-full items-center gap-2 rounded border border-l-4 bg-white px-2 py-1.5 text-left text-xs hover:bg-gray-50 ${k.accent}`}
|
||||
className={`mb-1 flex w-full items-center gap-2 rounded-md border border-l-[3px] border-line bg-ink-800 px-2 py-1.5 text-left text-xs text-slate-300 hover:bg-ink-700 ${k.accent}`}
|
||||
title={k.desc}
|
||||
>
|
||||
{k.label}
|
||||
@@ -111,36 +111,37 @@ export function StudioView({
|
||||
</div>
|
||||
|
||||
{/* 中画布 */}
|
||||
<div className="relative flex-1">
|
||||
<div className="absolute left-0 right-0 top-0 z-10 flex items-center gap-2 border-b bg-white/90 px-2 py-1.5">
|
||||
<div className="relative flex-1 bg-ink-950">
|
||||
<div className="absolute left-0 right-0 top-0 z-10 flex items-center gap-2 border-b border-line bg-ink-900/90 px-2 py-1.5 backdrop-blur">
|
||||
<button
|
||||
onClick={run}
|
||||
disabled={running || nodes.length === 0}
|
||||
className="rounded bg-violet-600 px-3 py-1 text-xs font-medium text-white disabled:opacity-40"
|
||||
className="rounded-md bg-violet-600 px-3 py-1 text-xs font-medium text-white hover:bg-violet-500 disabled:opacity-40"
|
||||
>
|
||||
{running ? "运行中…" : "▶ 运行"}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setIssues(validate(nodes, edges))}
|
||||
className="rounded border px-3 py-1 text-xs hover:bg-gray-50"
|
||||
className="rounded-md border border-line px-3 py-1 text-xs text-slate-300 hover:bg-ink-800"
|
||||
>
|
||||
校验
|
||||
</button>
|
||||
<span className="ml-1 text-[11px] text-gray-400">
|
||||
<span className="ml-1 text-[11px] text-slate-500">
|
||||
{nodes.length} 节点 · {edges.length} 连线
|
||||
</span>
|
||||
{issues && (
|
||||
<span className="ml-auto text-[11px]">
|
||||
{issues.length === 0 ? (
|
||||
<span className="text-emerald-600">✓ 校验通过</span>
|
||||
<span className="text-emerald-400">✓ 校验通过</span>
|
||||
) : (
|
||||
<span className="text-amber-600">{issues.length} 项提示</span>
|
||||
<span className="text-amber-400">{issues.length} 项提示</span>
|
||||
)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<ReactFlow
|
||||
colorMode="dark"
|
||||
nodes={nodes}
|
||||
edges={edges}
|
||||
nodeTypes={nodeTypes}
|
||||
@@ -151,15 +152,15 @@ export function StudioView({
|
||||
onPaneClick={() => setSelId(null)}
|
||||
fitView
|
||||
>
|
||||
<Background />
|
||||
<Background color="#242b3c" gap={18} />
|
||||
<Controls />
|
||||
<MiniMap zoomable pannable className="!bg-white" />
|
||||
<MiniMap zoomable pannable className="!bg-ink-850" />
|
||||
</ReactFlow>
|
||||
|
||||
{issues && issues.length > 0 && (
|
||||
<div className="absolute bottom-2 left-2 max-w-md rounded border bg-white p-2 text-[11px] shadow">
|
||||
<div className="absolute bottom-2 left-2 max-w-md rounded-lg border border-line bg-ink-850 p-2 text-[11px] shadow-card">
|
||||
{issues.map((i, idx) => (
|
||||
<div key={idx} className={i.level === "error" ? "text-rose-600" : "text-amber-600"}>
|
||||
<div key={idx} className={i.level === "error" ? "text-rose-400" : "text-amber-400"}>
|
||||
{i.level === "error" ? "✗" : "⚠"} {i.msg}
|
||||
</div>
|
||||
))}
|
||||
@@ -168,7 +169,7 @@ export function StudioView({
|
||||
</div>
|
||||
|
||||
{/* 右检查器 */}
|
||||
<div className="w-72 shrink-0 border-l bg-white">
|
||||
<div className="w-72 shrink-0 border-l border-line bg-ink-900">
|
||||
<Inspector node={selected} onChange={patchNode} onDelete={deleteNode} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -19,20 +19,20 @@ export function TypedNode({ data, selected }: NodeProps) {
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`min-w-[160px] rounded-md border border-l-4 bg-white shadow-sm ${k.accent} ${
|
||||
selected ? "ring-2 ring-violet-400" : ""
|
||||
className={`min-w-[170px] rounded-lg border border-l-[3px] bg-ink-800 shadow-card ${k.accent} ${
|
||||
selected ? "ring-2 ring-violet-500/70" : "border-line"
|
||||
}`}
|
||||
>
|
||||
<Handle type="target" position={Position.Left} className="!h-2 !w-2 !bg-gray-400" />
|
||||
<Handle type="target" position={Position.Left} className="!h-2 !w-2 !border-0 !bg-slate-500" />
|
||||
<div className="flex items-center justify-between gap-2 px-3 py-2">
|
||||
<span className={`rounded px-1.5 py-0.5 text-[10px] font-medium ${k.badge}`}>{k.label}</span>
|
||||
<span className={`h-2 w-2 rounded-full ${dot}`} />
|
||||
</div>
|
||||
<div className="px-3 pb-2">
|
||||
<div className="text-xs font-medium text-gray-800">{d.label || k.desc}</div>
|
||||
{d.summary && <div className="mt-0.5 truncate text-[10px] text-gray-400">{d.summary}</div>}
|
||||
<div className="text-xs font-medium text-slate-200">{d.label || k.desc}</div>
|
||||
{d.summary && <div className="mt-0.5 truncate text-[10px] text-slate-500">{d.summary}</div>}
|
||||
</div>
|
||||
<Handle type="source" position={Position.Right} className="!h-2 !w-2 !bg-gray-400" />
|
||||
<Handle type="source" position={Position.Right} className="!h-2 !w-2 !border-0 !bg-slate-500" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,75 @@
|
||||
import { useHealth } from "../lib/health";
|
||||
import type { ViewKey } from "../shell/LeftNav";
|
||||
|
||||
function Stat({ label, value, sub, accent }: { label: string; value: string; sub: string; accent: string }) {
|
||||
return (
|
||||
<div className="rounded-xl border border-line bg-ink-850 p-4">
|
||||
<div className="text-xs text-slate-500">{label}</div>
|
||||
<div className={`mt-1 text-2xl font-semibold ${accent}`}>{value}</div>
|
||||
<div className="mt-0.5 text-[11px] text-slate-500">{sub}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const CAPS = [
|
||||
{ icon: "◆", title: "Agent 编排", desc: "React Flow 画布 → Eino 动态图 → 流式执行", to: "studio" as ViewKey, color: "text-violet-400" },
|
||||
{ icon: "▣", title: "RAG 知识库", desc: "多文件入库 + 向量/全文/图谱 三路混合检索", to: "kb" as ViewKey, color: "text-cyan-400" },
|
||||
{ icon: "◇", title: "偏好记忆", desc: "画像 + 多轮历史,让模型“知道是你”", to: "memory" as ViewKey, color: "text-emerald-400" },
|
||||
];
|
||||
|
||||
// 工作台:平台概览 + 快捷入口(深色 AI 控制台首页)。
|
||||
export function Home({ onSelect }: { onSelect: (v: ViewKey) => void }) {
|
||||
const h = useHealth();
|
||||
return (
|
||||
<div className="h-full overflow-auto p-8">
|
||||
<div className="mx-auto max-w-5xl">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex h-11 w-11 items-center justify-center rounded-xl bg-gradient-to-br from-violet-500 to-cyan-500 text-lg font-bold text-white shadow-glow">
|
||||
S
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="brand-gradient text-2xl font-bold leading-tight">sundynix-agentix</h1>
|
||||
<p className="text-sm text-slate-500">分层式 AI Agent 平台 · 编排 / 知识库 / 记忆</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 grid grid-cols-2 gap-3 md:grid-cols-4">
|
||||
<Stat label="对话模型" value="DeepSeek" sub="chat · 控制面" accent="text-violet-300" />
|
||||
<Stat label="向量模型" value="百炼 v3" sub="embedding · 1024维" accent="text-cyan-300" />
|
||||
<Stat label="混合检索" value="3 路" sub="向量+全文+图谱" accent="text-emerald-300" />
|
||||
<Stat label="网关" value={h.gateway ? "在线" : "离线"} sub={h.persisted ? "持久化就绪" : "降级"} accent={h.gateway ? "text-emerald-300" : "text-rose-300"} />
|
||||
</div>
|
||||
|
||||
<div className="mt-8 grid grid-cols-1 gap-4 md:grid-cols-3">
|
||||
{CAPS.map((c) => (
|
||||
<button
|
||||
key={c.to}
|
||||
onClick={() => onSelect(c.to)}
|
||||
className="group rounded-xl border border-line bg-ink-850 p-5 text-left transition hover:border-violet-500/50 hover:bg-ink-800"
|
||||
>
|
||||
<div className={`text-2xl ${c.color}`}>{c.icon}</div>
|
||||
<div className="mt-3 font-medium text-slate-100">{c.title}</div>
|
||||
<div className="mt-1 text-xs leading-relaxed text-slate-500">{c.desc}</div>
|
||||
<div className="mt-3 text-xs text-violet-400 opacity-0 transition group-hover:opacity-100">进入 →</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-8 rounded-xl border border-line bg-ink-900 p-5">
|
||||
<div className="mb-3 text-sm font-medium text-slate-300">快速开始</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<button onClick={() => onSelect("studio")} className="rounded-lg bg-violet-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-violet-500">
|
||||
+ 新建 Agent 编排
|
||||
</button>
|
||||
<button onClick={() => onSelect("kb")} className="rounded-lg border border-line px-3 py-1.5 text-sm text-slate-300 hover:bg-ink-800">
|
||||
⬆ 入库知识
|
||||
</button>
|
||||
<button onClick={() => onSelect("memory")} className="rounded-lg border border-line px-3 py-1.5 text-sm text-slate-300 hover:bg-ink-800">
|
||||
◇ 管理记忆
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
@@ -5,11 +5,11 @@ import type { Identity } from "../lib/api";
|
||||
export function MemoryView({ identity }: { identity: Identity }) {
|
||||
return (
|
||||
<div className="flex h-full">
|
||||
<div className="w-96 border-r">
|
||||
<div className="w-96 border-r border-line bg-ink-900">
|
||||
<MemoryPanel identity={identity} />
|
||||
</div>
|
||||
<div className="flex-1 p-6 text-xs leading-relaxed text-gray-400">
|
||||
<div className="mb-1 text-sm font-semibold text-gray-600">模型记得我什么 / 会话历史</div>
|
||||
<div className="flex-1 p-6 text-xs leading-relaxed text-slate-500">
|
||||
<div className="mb-1 text-sm font-semibold text-slate-300">模型记得我什么 / 会话历史</div>
|
||||
规划:长期画像逐条列出可改/删(含来源),会话列表 + 多轮历史浏览与清空,注入开关。
|
||||
<br />
|
||||
当前左侧可登记偏好(→ memory_upsert → sundynix_user_profile)。
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
@@ -1,6 +1,26 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: ["./index.html", "./src/**/*.{ts,tsx}"],
|
||||
theme: { extend: {} },
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
// 深色 AI 控制台分层表面
|
||||
ink: {
|
||||
950: "#0b0d12",
|
||||
900: "#0f121a",
|
||||
850: "#141824",
|
||||
800: "#1a1f2d",
|
||||
700: "#232a3b",
|
||||
600: "#323a4f",
|
||||
},
|
||||
line: "#242b3c",
|
||||
},
|
||||
boxShadow: {
|
||||
glow: "0 0 0 1px rgba(139,92,246,0.45), 0 0 18px rgba(139,92,246,0.28)",
|
||||
"glow-cyan": "0 0 0 1px rgba(34,211,238,0.4), 0 0 16px rgba(34,211,238,0.22)",
|
||||
card: "0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.25)",
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
};
|
||||
|
||||
@@ -2,4 +2,9 @@ module github.com/sundynix/sundynix-desktop
|
||||
|
||||
go 1.23
|
||||
|
||||
require github.com/wailsapp/wails/v2 v2.9.2
|
||||
require github.com/wailsapp/wails/v2 v2.12.0
|
||||
|
||||
require (
|
||||
github.com/leaanthony/slicer v1.6.0 // indirect
|
||||
github.com/leaanthony/u v1.1.1 // indirect
|
||||
)
|
||||
|
||||
@@ -1 +1,9 @@
|
||||
github.com/wailsapp/wails/v2 v2.9.2/go.mod h1:uehvlCwJSFcBq7rMCGfk4rxca67QQGsbg5Nm4m9UnBs=
|
||||
github.com/leaanthony/slicer v1.6.0 h1:1RFP5uiPJvT93TAHi+ipd3NACobkW53yUiBqZheE/Js=
|
||||
github.com/leaanthony/slicer v1.6.0/go.mod h1:o/Iz29g7LN0GqH3aMjWAe90381nyZlDNquK+mtH2Fj8=
|
||||
github.com/leaanthony/u v1.1.1 h1:TUFjwDGlNX+WuwVEzDqQwC2lOv0P4uhTQw7CMFdiK7M=
|
||||
github.com/leaanthony/u v1.1.1/go.mod h1:9+o6hejoRljvZ3BzdYlVL0JYCwtnAsVuN9pVTQcaRfI=
|
||||
github.com/matryer/is v1.4.0/go.mod h1:8I/i5uYgLzgsgEloJE1U6xx5HkBQpAZvepWuujKwMRU=
|
||||
github.com/matryer/is v1.4.1 h1:55ehd8zaGABKLXQUe2awZ99BD/PTc2ls+KV/dXphgEQ=
|
||||
github.com/matryer/is v1.4.1/go.mod h1:8I/i5uYgLzgsgEloJE1U6xx5HkBQpAZvepWuujKwMRU=
|
||||
github.com/wailsapp/wails/v2 v2.12.0 h1:BHO/kLNWFHYjCzucxbzAYZWUjub1Tvb4cSguQozHn5c=
|
||||
github.com/wailsapp/wails/v2 v2.12.0/go.mod h1:mo1bzK1DEJrobt7YrBjgxvb5Sihb1mhAY09hppbibQg=
|
||||
|
||||
Reference in New Issue
Block a user