feat(desktop): 工作台重做为实时仪表盘 + /stats/overview 聚合端点（Tier1 UI 升级）

桌面端首屏原是静态宣传页（stat 全硬编码、唯一活数据是网关在线），"太单调"。重做为活的驾驶舱：后端 GET /api/v1/stats/overview（聚合，几条轻量查询）： - 任务今日/累计、7 日趋势、近 7 天终态分布（实例级，Task 无 owner） - 评测均分 + 忠实度均值 + 计数；知识库文档/库数（owner 级） - token 今日 + 7 日趋势（Redis 日计数）、近期运行 feed、服务健康（复用 health 口径） - store.StatsOverview + RecentTasks。前端 Home 重写为仪表盘：4 指标卡（今日任务/Token/评测均分/知识库）带 SVG 火花线、近期运行 feed（状态点+相对时间，点进运行观测）、7 日任务量柱图、服务健康灯带、能力入口、快捷动作。5s 轮询刷新。配色沿用现有 ink 暗底 + brand/accent。 live（vite dev + 预览截图）：登录后仪表盘渲染真实活数据（今日任务/Token/评测 1.00/近期运行/ 服务全绿），无控制台报错。tsc+vite 构建通过，gateway 全绿。 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-26 16:13:54 +08:00
parent a5fd251fc0
commit 1344bf98a0
5 changed files with 297 additions and 50 deletions
@@ -457,3 +457,29 @@ export async function deleteMemory(id: Identity, key: string): Promise<void> {
    throw new Error(d.error ?? `delete memory failed: ${res.status}`);
  }
 }
+
+// ── 工作台仪表盘聚合（GET /stats/overview）──
+export interface KeyCount { key: string; count: number }
+export interface RecentRun { task_id: string; status: string; detail: string; at: string }
+export interface Overview {
+  tasks_today: number;
+  tasks_total: number;
+  status_count: KeyCount[];
+  task_trend: KeyCount[];
+  token_trend: KeyCount[];
+  eval_avg: number;
+  faithful_avg: number;
+  eval_count: number;
+  kb_docs: number;
+  kb_count: number;
+  tokens_today: number;
+  daily_budget: number;
+  recent_runs: RecentRun[];
+  services: Record<string, boolean>;
+}
+
+export async function statsOverview(): Promise<Overview> {
+  const res = guard401(await fetch(`${GATEWAY}/api/v1/stats/overview`, { headers: bearer() }));
+  if (!res.ok) throw new Error(`stats failed: ${res.status}`);
+  return res.json() as Promise<Overview>;
+}
@@ -1,84 +1,187 @@
-import { Workflow, Database, Bookmark, FileText, Plus, Upload, ArrowRight, type LucideIcon } from "lucide-react";
-import { useHealth } from "../lib/health";
+import { useEffect, useState } from "react";
+import { Workflow, Database, Bookmark, FileText, Plus, Upload, Activity, Coins, Gauge, ArrowRight, type LucideIcon } from "lucide-react";
+import { statsOverview, type Overview, type RecentRun } from "../lib/api";
 import type { ViewKey } from "../shell/LeftNav";
 import { Button, cn } from "../ui";

-function Stat({ label, value, sub, accent }: { label: string; value: string; sub: string; accent: string }) {
+// 迷你火花线：把一串数值画成 SVG 折线（仪表盘趋势）。
+function Spark({ data, stroke }: { data: number[]; stroke: string }) {
+  if (data.length < 2) return null;
+  const max = Math.max(...data, 1);
+  const min = Math.min(...data, 0);
+  const span = max - min || 1;
+  const w = 60;
+  const h = 18;
+  const pts = data
+    .map((v, i) => `${(i / (data.length - 1)) * w},${h - ((v - min) / span) * (h - 2) - 1}`)
+    .join(" ");
+  return (
+    <svg width={w} height={h} viewBox={`0 0 ${w} ${h}`} aria-hidden>
+      <polyline points={pts} fill="none" stroke={stroke} strokeWidth={1.5} strokeLinejoin="round" />
+    </svg>
+  );
+}
+
+function Metric({ icon: Icon, label, value, sub, spark, sparkColor, accent }: {
+  icon: LucideIcon; label: string; value: string; sub: string;
+  spark?: number[]; sparkColor?: string; accent?: string;
+}) {
  return (
    <div className="rounded-lg border border-line bg-ink-850 p-4">
-      <div className="text-xs text-slate-500">{label}</div>
-      <div className={cn("mt-1 text-2xl font-semibold", accent)}>{value}</div>
-      <div className="mt-0.5 text-[11px] text-slate-500">{sub}</div>
+      <div className="flex items-center justify-between">
+        <span className="text-xs text-slate-500">{label}</span>
+        <Icon className="h-4 w-4 text-slate-600" strokeWidth={1.8} />
+      </div>
+      <div className={cn("mt-1 text-2xl font-semibold tabular-nums", accent ?? "text-slate-100")}>{value}</div>
+      <div className="mt-1.5 flex items-center justify-between gap-2">
+        <span className="text-[11px] text-slate-500">{sub}</span>
+        {spark && spark.some((v) => v > 0) ? <Spark data={spark} stroke={sparkColor ?? "#a78bfa"} /> : null}
+      </div>
    </div>
  );
 }

 const CAPS: { icon: LucideIcon; title: string; desc: string; to: ViewKey; color: string }[] = [
-  { icon: Workflow, title: "Agent 编排", desc: "React Flow 画布 → Eino 动态图 → 流式执行", to: "studio", color: "text-brand-400" },
-  { icon: Database, title: "RAG 知识库", desc: "多文件入库 + 向量/全文/图谱 三路混合检索", to: "kb", color: "text-accent-400" },
-  { icon: FileText, title: "报告生成", desc: "规划大纲 → 各章并行检索撰写 → 渲染 Word", to: "report", color: "text-indigo-300" },
-  { icon: Bookmark, title: "偏好记忆", desc: "画像 + 多轮历史，让模型“知道是你”", to: "memory", color: "text-success" },
+  { icon: Workflow, title: "Agent 编排", desc: "画布 → Eino 动态图 → 流式执行", to: "studio", color: "text-brand-400" },
+  { icon: Database, title: "RAG 知识库", desc: "向量 / 全文 / 图谱 三路混合检索", to: "kb", color: "text-accent-400" },
+  { icon: FileText, title: "报告生成", desc: "规划 → 分章并行 → 渲染 Word", to: "report", color: "text-indigo-300" },
+  { icon: Bookmark, title: "偏好记忆", desc: "画像 + 多轮历史", to: "memory", color: "text-success" },
 ];

-// 工作台：平台概览 + 快捷入口（深色 AI 控制台首页）。
+const STATUS_DOT: Record<string, string> = {
+  done: "bg-success",
+  failed: "bg-danger", timeout: "bg-danger", rejected: "bg-danger",
+  waiting: "bg-warn",
+  running: "bg-brand", submitted: "bg-brand",
+};
+
+const SERVICE_LABEL: Record<string, string> = {
+  gateway: "网关", nats: "总线", db: "PG", redis: "Redis", milvus: "Milvus", neo4j: "Neo4j",
+};
+
+function relTime(iso: string): string {
+  const d = Date.now() - new Date(iso).getTime();
+  if (d < 60_000) return "刚刚";
+  if (d < 3_600_000) return `${Math.floor(d / 60_000)} 分钟前`;
+  if (d < 86_400_000) return `${Math.floor(d / 3_600_000)} 小时前`;
+  return `${Math.floor(d / 86_400_000)} 天前`;
+}
+
+function RunRow({ r }: { r: RecentRun }) {
+  return (
+    <div className="flex items-center gap-3 border-b border-line/60 py-2 last:border-0">
+      <span className={cn("h-1.5 w-1.5 flex-none rounded-full", STATUS_DOT[r.status] ?? "bg-ink-600")} />
+      <span className="flex-1 truncate font-mono text-xs text-slate-300">{r.task_id}</span>
+      <span className="text-[11px] text-slate-500">{r.status}</span>
+      <span className="w-16 text-right text-[11px] text-slate-600">{relTime(r.at)}</span>
+    </div>
+  );
+}
+
+// 工作台：实时驾驶舱（指标 + 趋势 + 近期运行 + 服务健康 + 快捷动作）。
 export function Home({ onSelect }: { onSelect: (v: ViewKey) => void }) {
-  const h = useHealth();
+  const [ov, setOv] = useState<Overview | null>(null);
+  useEffect(() => {
+    let alive = true;
+    const load = () => statsOverview().then((d) => alive && setOv(d)).catch(() => {});
+    load();
+    const id = setInterval(load, 5000);
+    return () => { alive = false; clearInterval(id); };
+  }, []);
+
+  const taskTrend = ov?.task_trend.map((d) => d.count) ?? [];
+  const tokenTrend = ov?.token_trend.map((d) => d.count) ?? [];
+  const maxTask = Math.max(...taskTrend, 1);
+  const fmtTokens = (n: number) => (n >= 1e6 ? `${(n / 1e6).toFixed(1)}M` : n >= 1e3 ? `${(n / 1e3).toFixed(1)}K` : `${n}`);
+
  return (
    <div className="h-full overflow-auto p-8">
-      <div className="mx-auto max-w-5xl">
+      <div className="mx-auto max-w-6xl">
+        {/* 头部 */}
        <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-brand to-accent text-lg font-bold text-white shadow-glow">
-            S
+          <div className="flex h-11 w-11 items-center justify-center rounded-xl bg-gradient-to-br from-brand to-accent text-lg font-bold text-white shadow-glow">S</div>
+          <div className="flex-1">
+            <h1 className="brand-gradient text-2xl font-bold leading-tight">工作台</h1>
+            <p className="text-sm text-slate-500">实时概览 · 编排 / 知识库 / 报告 / 记忆</p>
          </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>
+          <span className="flex items-center gap-1.5 rounded-full border border-line bg-ink-850 px-3 py-1 text-[11px] text-slate-500">
+            <span className={cn("h-1.5 w-1.5 rounded-full", ov?.services.gateway ? "bg-success" : "bg-danger")} />
+            {ov?.services.gateway ? "实时" : "连接中"}
+          </span>
+        </div>
+
+        {/* 指标卡 */}
+        <div className="mt-6 grid grid-cols-2 gap-3 lg:grid-cols-4">
+          <Metric icon={Activity} label="今日任务" value={`${ov?.tasks_today ?? 0}`} sub={`累计 ${ov?.tasks_total ?? 0}`}
+            spark={taskTrend} sparkColor="#34d399" accent="text-brand-400" />
+          <Metric icon={Coins} label="今日 Token" value={fmtTokens(ov?.tokens_today ?? 0)}
+            sub={ov?.daily_budget ? `预算 ${fmtTokens(ov.daily_budget)}` : "未限额"} spark={tokenTrend} sparkColor="#a78bfa" accent="text-accent-400" />
+          <Metric icon={Gauge} label="评测均分" value={(ov?.eval_avg ?? 0).toFixed(2)}
+            sub={`忠实 ${(ov?.faithful_avg ?? 0).toFixed(2)} · ${ov?.eval_count ?? 0} 次`} accent="text-success" />
+          <Metric icon={Database} label="知识库" value={`${ov?.kb_docs ?? 0}`} sub={`${ov?.kb_count ?? 0} 库 · 三路检索`} accent="text-indigo-300" />
+        </div>
+
+        {/* 近期运行 + 7 日趋势 */}
+        <div className="mt-4 grid grid-cols-1 gap-3 lg:grid-cols-[1.6fr_1fr]">
+          <div className="rounded-lg border border-line bg-ink-900 p-4">
+            <div className="mb-2 flex items-center justify-between">
+              <span className="text-sm font-medium text-slate-300">近期运行</span>
+              <button onClick={() => onSelect("runs")} className="flex items-center gap-1 text-xs text-brand-400 transition hover:opacity-80">
+                全部 <ArrowRight className="h-3 w-3" />
+              </button>
+            </div>
+            {ov && ov.recent_runs.length > 0 ? (
+              ov.recent_runs.map((r) => <RunRow key={r.task_id} r={r} />)
+            ) : (
+              <div className="py-8 text-center text-xs text-slate-600">暂无运行记录</div>
+            )}
+          </div>
+          <div className="rounded-lg border border-line bg-ink-900 p-4">
+            <div className="mb-3 text-sm font-medium text-slate-300">7 日任务量</div>
+            <div className="flex h-24 items-end gap-2">
+              {(ov?.task_trend ?? []).map((d, i) => (
+                <div key={i} className="flex flex-1 flex-col items-center gap-1.5">
+                  <div className="w-full rounded-t bg-brand/70 transition-all" style={{ height: `${Math.max((d.count / maxTask) * 100, 4)}%` }} title={`${d.count}`} />
+                  <span className="text-[10px] text-slate-600">{d.key.slice(-2)}</span>
+                </div>
+              ))}
+              {!ov && <div className="flex-1 text-center text-xs text-slate-600">加载中…</div>}
+            </div>
          </div>
        </div>

-        <div className="mt-6 grid grid-cols-2 gap-3 md:grid-cols-4">
-          <Stat label="对话模型" value="DeepSeek" sub="chat · 控制面" accent="text-brand-400" />
-          <Stat label="向量模型" value="百炼 v3" sub="embedding · 1024维" accent="text-accent-400" />
-          <Stat label="混合检索" value="3 路" sub="向量+全文+图谱" accent="text-success" />
-          <Stat label="网关" value={h.gateway ? "在线" : "离线"} sub={h.persisted ? "持久化就绪" : "降级"} accent={h.gateway ? "text-success" : "text-danger"} />
+        {/* 服务健康灯带 */}
+        <div className="mt-4 flex flex-wrap items-center gap-x-5 gap-y-2 rounded-lg border border-line bg-ink-850 px-4 py-2.5">
+          <span className="text-xs text-slate-500">服务</span>
+          {Object.entries(SERVICE_LABEL).map(([k, label]) => (
+            <span key={k} className="flex items-center gap-1.5 text-xs text-slate-400">
+              <span className={cn("h-1.5 w-1.5 rounded-full", ov?.services[k] ? "bg-success" : "bg-ink-600")} />
+              {label}
+            </span>
+          ))}
        </div>

-        <div className="mt-8 grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
+        {/* 能力入口 */}
+        <div className="mt-6 grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-4">
          {CAPS.map((c) => {
            const Icon = c.icon;
            return (
-              <button
-                key={c.to}
-                onClick={() => onSelect(c.to)}
-                className="group rounded-lg border border-line bg-ink-850 p-5 text-left transition hover:border-brand/50 hover:bg-ink-800"
-              >
-                <Icon className={cn("h-6 w-6", c.color)} strokeWidth={1.8} />
-                <div className="mt-3 font-medium text-slate-100">{c.title}</div>
+              <button key={c.to} onClick={() => onSelect(c.to)}
+                className="group rounded-lg border border-line bg-ink-850 p-4 text-left transition hover:border-brand/50 hover:bg-ink-800">
+                <Icon className={cn("h-5 w-5", c.color)} strokeWidth={1.8} />
+                <div className="mt-2.5 text-sm 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 flex items-center gap-1 text-xs text-brand-400 opacity-0 transition group-hover:opacity-100">
-                  进入 <ArrowRight className="h-3 w-3" />
-                </div>
              </button>
            );
          })}
        </div>

-        <div className="mt-8 rounded-lg 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 variant="primary" size="sm" icon={Plus} onClick={() => onSelect("studio")}>
-              新建 Agent 编排
-            </Button>
-            <Button size="sm" icon={Upload} onClick={() => onSelect("kb")}>
-              入库知识
-            </Button>
-            <Button size="sm" icon={FileText} onClick={() => onSelect("report")}>
-              生成报告
-            </Button>
-            <Button size="sm" icon={Bookmark} onClick={() => onSelect("memory")}>
-              管理记忆
-            </Button>
-          </div>
+        {/* 快捷动作 */}
+        <div className="mt-4 flex flex-wrap gap-2">
+          <Button variant="primary" size="sm" icon={Plus} onClick={() => onSelect("studio")}>新建编排</Button>
+          <Button size="sm" icon={Upload} onClick={() => onSelect("kb")}>入库知识</Button>
+          <Button size="sm" icon={FileText} onClick={() => onSelect("report")}>生成报告</Button>
+          <Button size="sm" icon={Bookmark} onClick={() => onSelect("memory")}>管理记忆</Button>
        </div>
      </div>
    </div>