feat: embedding 配置搬上控制面 — 数据源页可视化配置 + 热更新

embedding 从 env 改为控制面驱动(持久化+可视化),复用 chat 模型同套范式:
配置控制面泛化为按 kind(chat/embedding),加 embedding kind。

- shared: 配置 subjects 泛化 sundynix.config.<kind>.get/.updated;bus 方法改 kind 参数
  (RequestConfig/ServeConfig/PublishConfigUpdated/SubscribeConfigUpdated)
- gateway: sundynix_model 加 kind 列(每 kind 唯一激活)+旧行回填 chat;admin 按 kind
  增删改/激活/列表,测试连接 embedding 走 POST /embeddings;main 按 kind ServeConfig;
  变更广播各 kind
- dispatcher: 取 chat 配置(kind 化)
- mcp-go: rag.Engine.SetEmbedding 热更新(RWMutex);main 取/订阅 embedding 控制面配置
  (覆盖 env)
- admin 控制台: api 按 kind;抽出复用 ModelManager;ModelsPage(chat)+新 DatasourcesPage
  (embedding + 向量/图库占位);routes 数据源页就绪
- 验证: 全模块 build✓ + e2e PASS + 控制台 npm build✓;live 全跑通——chat(DeepSeek 回填
  kind 仍工作);mcp-go 不带 EMBED env 启动→控制台配 embedding(百炼)→测试连接✓→激活
  →NATS 热更新 mcp-go→入库+语义检索'存向量的数据库'→Milvus;浏览器数据源页拉到激活配置

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Blizzard
2026-06-10 17:25:54 +08:00
parent e5bbe7318c
commit 3b54e59ecf
15 changed files with 373 additions and 261 deletions
+6 -2
View File
@@ -3,8 +3,11 @@ export const GATEWAY: string =
(import.meta.env.VITE_GATEWAY as string | undefined) ?? "http://localhost:8080";
const ADMIN = `${GATEWAY}/api/v1/admin`;
export type Kind = "chat" | "embedding";
export interface Model {
id: number;
kind: Kind;
provider: string;
base_url: string;
api_key: string; // 列表里是脱敏值
@@ -14,14 +17,15 @@ export interface Model {
export interface ModelInput {
id?: number;
kind: Kind;
provider: string;
base_url: string;
api_key: string;
model: string;
}
export async function listModels(): Promise<Model[]> {
const res = await fetch(`${ADMIN}/models`);
export async function listModels(kind: Kind): Promise<Model[]> {
const res = await fetch(`${ADMIN}/models?kind=${kind}`);
if (!res.ok) throw new Error(`list failed: ${res.status}`);
return ((await res.json()) as { models: Model[] }).models;
}
@@ -0,0 +1,182 @@
import { useEffect, useState } from "react";
import {
listModels,
saveModel,
setActive,
deleteModel,
testModel,
type Kind,
type Model,
type ModelInput,
} from "../api";
// 复用的模型控制面:列表(激活/脱敏key) + 登记表单 + 测试连接 + 激活/删除。
// 按 kind(chat/embedding) 区分,激活后经 NATS 热更新对应消费方。
export function ModelManager({
kind,
title,
baseUrlHint,
modelHint,
}: {
kind: Kind;
title: string;
baseUrlHint: string;
modelHint: string;
}) {
const empty: ModelInput = { kind, provider: "openai-compatible", base_url: "", api_key: "", model: "" };
const [models, setModels] = useState<Model[]>([]);
const [form, setForm] = useState<ModelInput>(empty);
const [msg, setMsg] = useState("");
const [testing, setTesting] = useState(false);
const refresh = () => listModels(kind).then(setModels).catch((e) => setMsg(`${e.message}`));
useEffect(() => {
refresh();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [kind]);
const set = (k: keyof ModelInput, v: string) => setForm((f) => ({ ...f, [k]: v }));
const onSave = async () => {
try {
await saveModel({ ...form, kind });
setMsg("✓ 已保存");
setForm(empty);
refresh();
} catch (e) {
setMsg(`${(e as Error).message}`);
}
};
const onTest = async () => {
setTesting(true);
try {
const r = await testModel({ ...form, kind });
setMsg(r.ok ? `✓ 连接成功(${r.message}` : `✗ 连接失败:${r.message}`);
} catch (e) {
setMsg(`${(e as Error).message}`);
} finally {
setTesting(false);
}
};
return (
<div className="flex flex-col gap-6">
<section>
<h2 className="mb-3 text-sm font-semibold text-gray-700">{title}</h2>
<div className="overflow-hidden rounded border">
<table className="w-full text-sm">
<thead className="bg-gray-50 text-left text-xs text-gray-500">
<tr>
<th className="px-3 py-2"></th>
<th className="px-3 py-2">Provider</th>
<th className="px-3 py-2">Base URL</th>
<th className="px-3 py-2">Model</th>
<th className="px-3 py-2">API Key</th>
<th className="px-3 py-2"></th>
</tr>
</thead>
<tbody>
{models.length === 0 && (
<tr>
<td colSpan={6} className="px-3 py-4 text-center text-xs text-gray-400">
使
</td>
</tr>
)}
{models.map((m) => (
<tr key={m.id} className="border-t">
<td className="px-3 py-2">
{m.active ? (
<span className="rounded bg-emerald-100 px-1.5 py-0.5 text-[10px] text-emerald-700"></span>
) : (
<span className="text-[10px] text-gray-400"></span>
)}
</td>
<td className="px-3 py-2 text-gray-600">{m.provider}</td>
<td className="px-3 py-2 font-mono text-xs text-gray-600">{m.base_url}</td>
<td className="px-3 py-2 text-gray-800">{m.model}</td>
<td className="px-3 py-2 font-mono text-xs text-gray-400">{m.api_key || "—"}</td>
<td className="px-3 py-2">
<div className="flex gap-2">
{!m.active && (
<button
onClick={() => setActive(m.id).then(() => { setMsg("✓ 已激活并热更新"); refresh(); })}
className="rounded border px-2 py-0.5 text-xs text-violet-600 hover:bg-violet-50"
>
</button>
)}
<button
onClick={() => deleteModel(m.id).then(refresh)}
className="rounded border px-2 py-0.5 text-xs text-rose-500 hover:bg-rose-50"
>
</button>
</div>
</td>
</tr>
))}
</tbody>
</table>
</div>
</section>
<section className="max-w-xl">
<h2 className="mb-3 text-sm font-semibold text-gray-700">线 APIOpenAI </h2>
<div className="grid grid-cols-2 gap-3">
<label className="text-xs text-gray-500">
Provider
<select
className="mt-1 w-full rounded border px-2 py-1 text-sm text-gray-900"
value={form.provider}
onChange={(e) => set("provider", e.target.value)}
>
<option value="openai-compatible">openai-compatible</option>
<option value="vllm">vllm</option>
</select>
</label>
<label className="text-xs text-gray-500">
Model
<input
className="mt-1 w-full rounded border px-2 py-1 text-sm"
value={form.model}
onChange={(e) => set("model", e.target.value)}
placeholder={modelHint}
/>
</label>
<label className="col-span-2 text-xs text-gray-500">
Base URL
<input
className="mt-1 w-full rounded border px-2 py-1 text-sm font-mono"
value={form.base_url}
onChange={(e) => set("base_url", e.target.value)}
placeholder={baseUrlHint}
/>
</label>
<label className="col-span-2 text-xs text-gray-500">
API Key
<input
type="password"
className="mt-1 w-full rounded border px-2 py-1 text-sm font-mono"
value={form.api_key}
onChange={(e) => set("api_key", e.target.value)}
placeholder="sk-…"
/>
</label>
</div>
<div className="mt-3 flex items-center gap-2">
<button onClick={onSave} className="rounded bg-violet-600 px-3 py-1 text-sm text-white"></button>
<button
onClick={onTest}
disabled={testing || !form.base_url}
className="rounded border px-3 py-1 text-sm disabled:opacity-40"
>
{testing ? "测试中…" : "测试连接"}
</button>
{msg && <span className="text-xs text-gray-600">{msg}</span>}
</div>
</section>
</div>
);
}
@@ -0,0 +1,20 @@
import { ModelManager } from "../components/ModelManager";
import { Soon } from "../components/Soon";
// 数据源页:Embedding 模型(RAG 向量路,→ mcp-go 热更新)+ 向量库/图库(规划)。
export function DatasourcesPage() {
return (
<div className="flex flex-col gap-8">
<ModelManager
kind="embedding"
title="Embedding 模型(embedding → mcp-go RAG"
baseUrlHint="https://dashscope.aliyuncs.com/compatible-mode/v1"
modelHint="text-embedding-v3"
/>
<Soon
title="向量库 / 图库 / 全文"
desc="Milvus(:19530) / Neo4j(:7687) / Bleve 连接配置 + 测试连接 + 状态。当前经 env,规划同 Embedding 走控制面。"
/>
</div>
);
}
+8 -174
View File
@@ -1,179 +1,13 @@
import { useEffect, useState } from "react";
import {
listModels,
saveModel,
setActive,
deleteModel,
testModel,
type Model,
type ModelInput,
} from "../api";
import { ModelManager } from "../components/ModelManager";
const EMPTY: ModelInput = {
provider: "openai-compatible",
base_url: "",
api_key: "",
model: "",
};
// 模型配置页:登记/激活/删除 + 测试连接。激活后经 NATS 热更新到 Dispatcher。
// 对话模型(chat)配置页 → Dispatcher 经 NATS 热更新。
export function ModelsPage() {
const [models, setModels] = useState<Model[]>([]);
const [form, setForm] = useState<ModelInput>(EMPTY);
const [msg, setMsg] = useState("");
const [testing, setTesting] = useState(false);
const refresh = () => listModels().then(setModels).catch((e) => setMsg(`${e.message}`));
useEffect(() => {
refresh();
}, []);
const set = (k: keyof ModelInput, v: string) => setForm((f) => ({ ...f, [k]: v }));
const onSave = async () => {
try {
await saveModel(form);
setMsg("✓ 已保存");
setForm(EMPTY);
refresh();
} catch (e) {
setMsg(`${(e as Error).message}`);
}
};
const onTest = async () => {
setTesting(true);
try {
const r = await testModel(form);
setMsg(r.ok ? `✓ 连接成功(${r.message}` : `✗ 连接失败:${r.message}`);
} catch (e) {
setMsg(`${(e as Error).message}`);
} finally {
setTesting(false);
}
};
return (
<div className="flex flex-col gap-6">
<section>
<h2 className="mb-3 text-sm font-semibold text-gray-700"></h2>
<div className="overflow-hidden rounded border">
<table className="w-full text-sm">
<thead className="bg-gray-50 text-left text-xs text-gray-500">
<tr>
<th className="px-3 py-2"></th>
<th className="px-3 py-2">Provider</th>
<th className="px-3 py-2">Base URL</th>
<th className="px-3 py-2">Model</th>
<th className="px-3 py-2">API Key</th>
<th className="px-3 py-2"></th>
</tr>
</thead>
<tbody>
{models.length === 0 && (
<tr>
<td colSpan={6} className="px-3 py-4 text-center text-xs text-gray-400">
使
</td>
</tr>
)}
{models.map((m) => (
<tr key={m.id} className="border-t">
<td className="px-3 py-2">
{m.active ? (
<span className="rounded bg-emerald-100 px-1.5 py-0.5 text-[10px] text-emerald-700">
</span>
) : (
<span className="text-[10px] text-gray-400"></span>
)}
</td>
<td className="px-3 py-2 text-gray-600">{m.provider}</td>
<td className="px-3 py-2 font-mono text-xs text-gray-600">{m.base_url}</td>
<td className="px-3 py-2 text-gray-800">{m.model}</td>
<td className="px-3 py-2 font-mono text-xs text-gray-400">{m.api_key || "—"}</td>
<td className="px-3 py-2">
<div className="flex gap-2">
{!m.active && (
<button
onClick={() => setActive(m.id).then(() => { setMsg("✓ 已激活并热更新 Dispatcher"); refresh(); })}
className="rounded border px-2 py-0.5 text-xs text-violet-600 hover:bg-violet-50"
>
</button>
)}
<button
onClick={() => deleteModel(m.id).then(refresh)}
className="rounded border px-2 py-0.5 text-xs text-rose-500 hover:bg-rose-50"
>
</button>
</div>
</td>
</tr>
))}
</tbody>
</table>
</div>
</section>
<section className="max-w-xl">
<h2 className="mb-3 text-sm font-semibold text-gray-700">线 APIOpenAI </h2>
<div className="grid grid-cols-2 gap-3">
<label className="text-xs text-gray-500">
Provider
<select
className="mt-1 w-full rounded border px-2 py-1 text-sm text-gray-900"
value={form.provider}
onChange={(e) => set("provider", e.target.value)}
>
<option value="openai-compatible">openai-compatible</option>
<option value="vllm">vllm</option>
</select>
</label>
<label className="text-xs text-gray-500">
Model
<input
className="mt-1 w-full rounded border px-2 py-1 text-sm"
value={form.model}
onChange={(e) => set("model", e.target.value)}
placeholder="deepseek-chat"
/>
</label>
<label className="col-span-2 text-xs text-gray-500">
Base URL
<input
className="mt-1 w-full rounded border px-2 py-1 text-sm font-mono"
value={form.base_url}
onChange={(e) => set("base_url", e.target.value)}
placeholder="https://api.deepseek.com/v1"
/>
</label>
<label className="col-span-2 text-xs text-gray-500">
API Key
<input
type="password"
className="mt-1 w-full rounded border px-2 py-1 text-sm font-mono"
value={form.api_key}
onChange={(e) => set("api_key", e.target.value)}
placeholder="sk-…"
/>
</label>
</div>
<div className="mt-3 flex items-center gap-2">
<button onClick={onSave} className="rounded bg-violet-600 px-3 py-1 text-sm text-white">
</button>
<button
onClick={onTest}
disabled={testing || !form.base_url}
className="rounded border px-3 py-1 text-sm disabled:opacity-40"
>
{testing ? "测试中…" : "测试连接"}
</button>
{msg && <span className="text-xs text-gray-600">{msg}</span>}
</div>
</section>
</div>
<ModelManager
kind="chat"
title="对话模型(chat → Dispatcher"
baseUrlHint="https://api.deepseek.com"
modelHint="deepseek-chat"
/>
);
}
+3 -6
View File
@@ -4,6 +4,7 @@ import { Soon } from "./components/Soon";
// 路由注册表 —— 控制台的单一事实源:导航 + 内容都从这里派生。
// 新增页面 = 在此加一条;real 页面用 lazy 懒加载(代码分割)。
const ModelsPage = lazy(() => import("./pages/ModelsPage").then((m) => ({ default: m.ModelsPage })));
const DatasourcesPage = lazy(() => import("./pages/DatasourcesPage").then((m) => ({ default: m.DatasourcesPage })));
export interface RouteDef {
path: string;
@@ -25,12 +26,8 @@ export const routes: RouteDef[] = [
path: "/datasources",
label: "数据源",
group: "配置",
element: (
<Soon
title="数据源(向量库 / 图库 / 全文)"
desc="配置 Milvus(:19530) / Neo4j(:7687) / Bleve 连接 + 测试连接 + 状态。复用模型控制面同套路(配置→NATS 下发→mcp-go 热更新)。RAG 核心链。"
/>
),
ready: true,
element: <DatasourcesPage />,
},
{
path: "/tenants",