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:
@@ -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">登记(开发期:第三方在线 API,OpenAI 兼容)</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>
|
||||
);
|
||||
}
|
||||
@@ -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">登记模型(开发期:第三方在线 API,OpenAI 兼容)</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"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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",
|
||||
|
||||
Reference in New Issue
Block a user