Blizzard
63 lines
2.2 KiB
TypeScript
63 lines
2.2 KiB
TypeScript
import { useState } from "react";
|
||
import { ModelManager } from "../components/ModelManager";
|
||
|
||
// 模型配置页：Chat / Embedding 双 Tab 统一管理。
|
||
export function ModelsPage() {
|
||
const [tab, setTab] = useState<"chat" | "embedding">("chat");
|
||
|
||
return (
|
||
<div className="space-y-6">
|
||
{/* 头部标题与 Tab 切换 */}
|
||
<div className="flex flex-wrap items-center justify-between gap-4 border-b border-gray-150 pb-4">
|
||
<div>
|
||
<h3 className="text-base font-semibold text-gray-800">模型管理</h3>
|
||
<p className="text-xs text-gray-400">配置全平台的对话模型（LLM）与向量化模型（Embedding）</p>
|
||
</div>
|
||
|
||
<div className="flex rounded-lg border border-gray-200 bg-gray-50/50 p-1">
|
||
<button
|
||
onClick={() => setTab("chat")}
|
||
className={`rounded-md px-4 py-1.5 text-xs font-medium transition-all ${
|
||
tab === "chat"
|
||
? "bg-white text-violet-700 shadow-sm"
|
||
: "text-gray-500 hover:text-gray-700"
|
||
}`}
|
||
>
|
||
对话模型 (Chat)
|
||
</button>
|
||
<button
|
||
onClick={() => setTab("embedding")}
|
||
className={`rounded-md px-4 py-1.5 text-xs font-medium transition-all ${
|
||
tab === "embedding"
|
||
? "bg-white text-violet-700 shadow-sm"
|
||
: "text-gray-500 hover:text-gray-700"
|
||
}`}
|
||
>
|
||
向量化模型 (Embedding)
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 模型管理组件 */}
|
||
<div className="rounded-xl border border-gray-100 bg-white p-5 shadow-sm">
|
||
{tab === "chat" ? (
|
||
<ModelManager
|
||
kind="chat"
|
||
title="对话模型配置 (chat → Dispatcher)"
|
||
baseUrlHint="https://api.deepseek.com"
|
||
modelHint="deepseek-chat"
|
||
/>
|
||
) : (
|
||
<ModelManager
|
||
kind="embedding"
|
||
title="向量化模型配置 (embedding → mcp-go RAG)"
|
||
baseUrlHint="https://dashscope.aliyuncs.com/compatible-mode/v1"
|
||
modelHint="text-embedding-v3"
|
||
/>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|