refactor(admin): 控制台改为路由表驱动的动态路由 (react-router)
控制台从 useState 切 tab + 硬编码条件渲染，改为路由注册表驱动 + 真实 URL 路由， 加页面只需在 routes.tsx 加一条，不动外壳。 - 依赖 react-router-dom v7；App=HashRouter（静态托管/桌面内嵌都能深链） - routes.tsx：路由注册表（单一事实源，导航+内容都派生）；real 页面 lazy 懒加载(代码分割) - shell/AppShell：NavLink 分组导航(配置/平台) + Routes + Suspense + 健康灯，全从注册表派生 - 页面归入 pages/（ModelsPage 移入），components/Soon 占位复用 - 验证：npm build✓(ModelsPage 独立 chunk=懒加载生效)；真实浏览器——默认重定向 #/models、 nav 切换改 URL hash、深链 #/guardrails 直达、浏览器后退回 #/datasources、active 高亮 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Blizzard
@@ -0,0 +1,179 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import {
|
||||
listModels,
|
||||
saveModel,
|
||||
setActive,
|
||||
deleteModel,
|
||||
testModel,
|
||||
type Model,
|
||||
type ModelInput,
|
||||
} from "../api";
|
||||
|
||||
const EMPTY: ModelInput = {
|
||||
provider: "openai-compatible",
|
||||
base_url: "",
|
||||
api_key: "",
|
||||
model: "",
|
||||
};
|
||||
|
||||
// 模型配置页：登记/激活/删除 + 测试连接。激活后经 NATS 热更新到 Dispatcher。
|
||||
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user