Merge branch 'master-nj' of http://192.168.0.200/knowledge-base-bj/deerflow-code into master-nj

frontend-web/src/components/page-sidebar.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 import { useNavigate, useLocation } from "react-router-dom";
 import {
   Bell,
+  Cpu,
   ChevronLeft,
   ChevronRight,
   ChevronsUpDown,
@@ -252,6 +253,14 @@ function SecondaryNavSidebar({ headerHidden }: { headerHidden: boolean }) {
                       白名单管理
                     </DropdownMenuItem>
                   )}
+                  {isAdmin && (
+                    <DropdownMenuItem
+                      onClick={() => navigate("/page/workspace/admin/models")}
+                    >
+                      <Cpu className="size-4" />
+                      模型配置
+                    </DropdownMenuItem>
+                  )}
                   {isAdmin && (
                     <DropdownMenuItem
                       onClick={() => navigate("/page/strategy/settings/model-concurrency")}
@@ -555,6 +564,12 @@ function LegacyAccordionSidebar({
                   岗位角色配置
                 </DropdownMenuItem>
               )}
+              {isAdmin && (
+                <DropdownMenuItem onClick={() => navigate("/page/workspace/admin/models")}>
+                  <Cpu className="size-4" />
+                  模型配置
+                </DropdownMenuItem>
+              )}
               {isAdmin && (
                 <DropdownMenuItem onClick={() => navigate("/page/strategy/admin/login-whitelist")}>
                   <ShieldCheck className="size-4" />

frontend-web/src/core/model-management/api.ts

@@ -0,0 +1,107 @@
+import { apiFetch } from "@/core/api";
+import { getBackendBaseURL } from "@/core/config";
+
+export interface ManagedModel {
+  name: string;
+  display_name: string | null;
+  description: string | null;
+  use: string;
+  model: string;
+  base_url: string | null;
+  request_timeout: number | null;
+  max_retries: number | null;
+  max_tokens: number | null;
+  temperature: number | null;
+  stream_usage: boolean | null;
+  supports_thinking: boolean;
+  supports_reasoning_effort: boolean;
+  supports_vision: boolean;
+  when_thinking_enabled: Record<string, unknown> | null;
+  when_thinking_disabled: Record<string, unknown> | null;
+  thinking: Record<string, unknown> | null;
+  use_responses_api: boolean | null;
+  output_version: string | null;
+  extra_settings: Record<string, unknown>;
+  api_key_configured: boolean;
+  api_key_source: string | null;
+  source: "config.yaml";
+}
+
+export interface ManagedModelsResponse {
+  models: ManagedModel[];
+  config_path: string;
+  updated_at: string | null;
+}
+
+export interface ModelSavePayload {
+  name: string;
+  display_name?: string | null;
+  description?: string | null;
+  use: string;
+  model: string;
+  api_key?: string;
+  clear_api_key?: boolean;
+  base_url?: string | null;
+  request_timeout?: number | null;
+  max_retries?: number | null;
+  max_tokens?: number | null;
+  temperature?: number | null;
+  stream_usage?: boolean | null;
+  supports_thinking: boolean;
+  supports_reasoning_effort: boolean;
+  supports_vision: boolean;
+  when_thinking_enabled?: Record<string, unknown> | null;
+  when_thinking_disabled?: Record<string, unknown> | null;
+  thinking?: Record<string, unknown> | null;
+  use_responses_api?: boolean | null;
+  output_version?: string | null;
+  extra_settings: Record<string, unknown>;
+}
+
+export interface ModelConnectionTestResult {
+  success: boolean;
+  latency_ms: number;
+  message: string;
+  preview?: string | null;
+}
+
+async function readError(response: Response, fallback: string): Promise<never> {
+  const payload = await response.json().catch(() => null) as { detail?: string } | null;
+  throw new Error(payload?.detail || fallback);
+}
+
+export async function loadManagedModels(): Promise<ManagedModelsResponse> {
+  const response = await apiFetch(`${getBackendBaseURL()}/api/admin/models`);
+  if (!response.ok) return readError(response, "加载模型配置失败");
+  return response.json() as Promise<ManagedModelsResponse>;
+}
+
+export async function createManagedModel(payload: ModelSavePayload): Promise<ManagedModel> {
+  const response = await apiFetch(`${getBackendBaseURL()}/api/admin/models`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(payload),
+  });
+  if (!response.ok) return readError(response, "创建模型失败");
+  return response.json() as Promise<ManagedModel>;
+}
+
+export async function updateManagedModel(name: string, payload: ModelSavePayload): Promise<ManagedModel> {
+  const response = await apiFetch(`${getBackendBaseURL()}/api/admin/models/${encodeURIComponent(name)}`, {
+    method: "PUT",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(payload),
+  });
+  if (!response.ok) return readError(response, "保存模型配置失败");
+  return response.json() as Promise<ManagedModel>;
+}
+
+export async function testManagedModel(model: ModelSavePayload): Promise<ModelConnectionTestResult> {
+  const response = await apiFetch(`${getBackendBaseURL()}/api/admin/models/test`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ model }),
+  });
+  if (!response.ok) return readError(response, "模型连接测试失败");
+  return response.json() as Promise<ModelConnectionTestResult>;
+}

frontend-web/src/core/model-management/hooks.ts

@@ -0,0 +1,38 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+
+import {
+  createManagedModel,
+  loadManagedModels,
+  testManagedModel,
+  updateManagedModel,
+  type ModelSavePayload,
+} from "./api";
+
+export const MANAGED_MODELS_QUERY_KEY = ["admin", "model-config"] as const;
+
+export function useManagedModels() {
+  return useQuery({
+    queryKey: MANAGED_MODELS_QUERY_KEY,
+    queryFn: loadManagedModels,
+    staleTime: 10_000,
+    refetchOnWindowFocus: false,
+  });
+}
+
+export function useSaveManagedModel() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({ name, payload, isNew }: { name: string; payload: ModelSavePayload; isNew: boolean }) =>
+      isNew ? createManagedModel(payload) : updateManagedModel(name, payload),
+    onSuccess: async () => {
+      await Promise.all([
+        queryClient.invalidateQueries({ queryKey: MANAGED_MODELS_QUERY_KEY }),
+        queryClient.invalidateQueries({ queryKey: ["models"] }),
+      ]);
+    },
+  });
+}
+
+export function useTestManagedModel() {
+  return useMutation({ mutationFn: testManagedModel });
+}

frontend-web/src/core/model-management/index.ts

@@ -0,0 +1,2 @@
+export * from "./api";
+export * from "./hooks";

frontend-web/src/pages/ModelManagementPage.tsx

@@ -0,0 +1,246 @@
+import {
+  BotIcon,
+  ChevronDownIcon,
+  CircleAlertIcon,
+  CpuIcon,
+  EyeIcon,
+  KeyRoundIcon,
+  LoaderCircleIcon,
+  PlusIcon,
+  RefreshCwIcon,
+  Settings2Icon,
+  SparklesIcon,
+  WrenchIcon,
+} from "lucide-react";
+import { useMemo, useState, type ReactNode } from "react";
+import {
+  Button as TButton,
+  Dialog,
+  Input,
+  InputNumber,
+  MessagePlugin,
+  Select,
+  Switch,
+  Tag,
+  Textarea,
+} from "tdesign-react";
+
+import {
+  type ManagedModel,
+  type ModelSavePayload,
+  useManagedModels,
+  useSaveManagedModel,
+  useTestManagedModel,
+} from "@/core/model-management";
+import {
+  WorkspaceBody,
+  WorkspaceContainer,
+  WorkspaceHeader,
+} from "@/components/workspace/workspace-container";
+
+type ModelDraft = ModelSavePayload & {
+  api_key: string;
+  keep_existing_key: boolean;
+  extra_settings_text: string;
+};
+
+const PROVIDER_OPTIONS = [
+  { label: "OpenAI 兼容接口", value: "langchain_openai:ChatOpenAI" },
+  { label: "Anthropic", value: "langchain_anthropic:ChatAnthropic" },
+  { label: "Google Gemini", value: "langchain_google_genai:ChatGoogleGenerativeAI" },
+  { label: "Groq", value: "langchain_groq:ChatGroq" },
+  { label: "Ollama", value: "langchain_ollama:ChatOllama" },
+];
+
+const emptyDraft = (): ModelDraft => ({
+  name: "",
+  display_name: "",
+  description: "",
+  use: "langchain_openai:ChatOpenAI",
+  model: "",
+  api_key: "",
+  keep_existing_key: false,
+  clear_api_key: false,
+  base_url: "",
+  request_timeout: 30,
+  max_retries: 2,
+  max_tokens: undefined,
+  temperature: undefined,
+  stream_usage: true,
+  supports_thinking: false,
+  supports_reasoning_effort: false,
+  supports_vision: false,
+  when_thinking_enabled: null,
+  when_thinking_disabled: null,
+  thinking: null,
+  use_responses_api: null,
+  output_version: null,
+  extra_settings: {},
+  extra_settings_text: "{}",
+});
+
+function draftFromModel(model: ManagedModel): ModelDraft {
+  return {
+    ...model,
+    api_key: "",
+    keep_existing_key: model.api_key_configured,
+    clear_api_key: false,
+    extra_settings_text: JSON.stringify(model.extra_settings ?? {}, null, 2),
+  };
+}
+
+function optionalString(value: string | null | undefined): string | null {
+  const normalized = (value ?? "").trim();
+  return normalized || null;
+}
+
+function toNumber(value: number | string | null | undefined): number | undefined {
+  if (value === "" || value === null || value === undefined) return undefined;
+  const parsed = Number(value);
+  return Number.isFinite(parsed) ? parsed : undefined;
+}
+
+function buildPayload(draft: ModelDraft): ModelSavePayload {
+  let extraSettings: Record<string, unknown> = {};
+  try {
+    const parsed = JSON.parse(draft.extra_settings_text || "{}") as unknown;
+    if (!parsed || Array.isArray(parsed) || typeof parsed !== "object") {
+      throw new Error("额外参数必须是 JSON 对象");
+    }
+    extraSettings = parsed as Record<string, unknown>;
+  } catch (error) {
+    throw error instanceof Error ? error : new Error("额外参数不是有效 JSON");
+  }
+  const payload: ModelSavePayload = {
+    name: draft.name.trim(),
+    display_name: optionalString(draft.display_name),
+    description: optionalString(draft.description),
+    use: draft.use.trim(),
+    model: draft.model.trim(),
+    clear_api_key: Boolean(draft.clear_api_key),
+    base_url: optionalString(draft.base_url),
+    request_timeout: toNumber(draft.request_timeout),
+    max_retries: toNumber(draft.max_retries),
+    max_tokens: toNumber(draft.max_tokens),
+    temperature: toNumber(draft.temperature),
+    stream_usage: draft.stream_usage,
+    supports_thinking: draft.supports_thinking,
+    supports_reasoning_effort: draft.supports_reasoning_effort,
+    supports_vision: draft.supports_vision,
+    when_thinking_enabled: draft.when_thinking_enabled,
+    when_thinking_disabled: draft.when_thinking_disabled,
+    thinking: draft.thinking,
+    use_responses_api: draft.use_responses_api,
+    output_version: optionalString(draft.output_version),
+    extra_settings: extraSettings,
+  };
+  if (draft.api_key.trim()) payload.api_key = draft.api_key.trim();
+  return payload;
+}
+
+function StatCard({ icon: Icon, label, value }: { icon: typeof CpuIcon; label: string; value: number }) {
+  return (
+    <div className="flex items-center gap-3 rounded-lg border border-border bg-card px-4 py-3 shadow-sm">
+      <span className="flex size-10 items-center justify-center rounded-lg bg-primary/10 text-primary"><Icon className="size-5" /></span>
+      <div><div className="text-xl font-semibold tabular-nums">{value}</div><div className="text-xs text-muted-foreground">{label}</div></div>
+    </div>
+  );
+}
+
+function Field({ label, required = false, children }: { label: string; required?: boolean; children: ReactNode }) {
+  return <label className="space-y-1.5 text-sm font-medium">{label}{required && <span className="ml-1 text-destructive">*</span>}{children}</label>;
+}
+
+function ModelEditor({ model, onClose }: { model: ManagedModel | null; onClose: () => void }) {
+  const isNew = model === null;
+  const [draft, setDraft] = useState<ModelDraft>(() => model ? draftFromModel(model) : emptyDraft());
+  const [advanced, setAdvanced] = useState(false);
+  const [testResult, setTestResult] = useState<{ success: boolean; latency: number; message: string; preview?: string | null } | null>(null);
+  const save = useSaveManagedModel();
+  const test = useTestManagedModel();
+  const patch = (next: Partial<ModelDraft>) => setDraft((current) => ({ ...current, ...next }));
+
+  const handleTest = async () => {
+    try {
+      const payload = buildPayload(draft);
+      const result = await test.mutateAsync(payload);
+      setTestResult({ success: result.success, latency: result.latency_ms, message: result.message, preview: result.preview });
+      if (!result.success) return void MessagePlugin.error(`连接失败：${result.message}`);
+      MessagePlugin.success(`连接成功${result.latency_ms ? `，${result.latency_ms} ms` : ""}`);
+    } catch (error) {
+      MessagePlugin.error(error instanceof Error ? error.message : "连接测试失败");
+    }
+  };
+
+  const handleSave = async () => {
+    try {
+      const payload = buildPayload(draft);
+      if (!payload.name || !payload.use || !payload.model) {
+        return void MessagePlugin.warning("请填写模型标识、驱动与实际模型名");
+      }
+      await save.mutateAsync({ name: model?.name ?? payload.name, payload, isNew });
+      MessagePlugin.success(isNew ? "模型已添加，所有页面的模型选择器已刷新" : "模型配置已保存并立即生效");
+      onClose();
+    } catch (error) {
+      MessagePlugin.error(error instanceof Error ? error.message : "保存模型配置失败");
+    }
+  };
+
+  return (
+    <Dialog
+      visible
+      header={isNew ? "添加模型" : `编辑模型：${model?.display_name || model?.name}`}
+      placement="center"
+      width={860}
+      zIndex={3200}
+      confirmBtn={{ content: isNew ? "添加并启用" : "保存配置", theme: "primary" }}
+      cancelBtn="取消"
+      confirmLoading={save.isPending}
+      onClose={onClose}
+      onConfirm={() => void handleSave()}
+      onCancel={onClose}
+    >
+      <div className="max-h-[70vh] space-y-5 overflow-y-auto px-1 py-1 pr-3">
+        <div className="rounded-lg border border-primary/20 bg-primary/5 px-3 py-2 text-sm text-muted-foreground">
+          保存会直接更新当前部署的 <code className="rounded bg-background px-1 py-0.5">config.yaml</code> 模型段，自动备份并热刷新；不会中断已开始的会话。
+        </div>
+        <section className="grid gap-4 md:grid-cols-2">
+          <Field label="稳定标识" required><Input value={draft.name} disabled={!isNew} placeholder="例如 deepseek-chat" tips={isNew ? "保存后不可修改，用于智能体和运行配置引用。" : "稳定标识不可修改，避免已有配置失效。"} onChange={(value) => patch({ name: String(value) })} /></Field>
+          <Field label="显示名称"><Input value={draft.display_name ?? ""} placeholder="例如 DeepSeek Chat" onChange={(value) => patch({ display_name: String(value) })} /></Field>
+          <Field label="模型驱动" required><Select value={draft.use} options={PROVIDER_OPTIONS} filterable creatable inputProps={{ placeholder: "选择或输入 use 类路径" }} onChange={(value) => patch({ use: String(value) })} /></Field>
+          <Field label="实际模型名" required><Input value={draft.model} placeholder="例如 deepseek-chat" onChange={(value) => patch({ model: String(value) })} /></Field>
+          <Field label="Base URL"><Input value={draft.base_url ?? ""} type="url" placeholder="https://api.example.com/v1" onChange={(value) => patch({ base_url: String(value) })} /></Field>
+          <Field label="API Key"><Input value={draft.api_key} type="password" placeholder={draft.keep_existing_key && !draft.clear_api_key ? "已配置，留空则保持不变" : "可填写密钥或 $ENVIRONMENT_VARIABLE"} onChange={(value) => patch({ api_key: String(value), clear_api_key: false })} /></Field>
+          {draft.keep_existing_key && !draft.api_key && <div className="md:col-span-2 flex items-center gap-2 text-xs text-muted-foreground"><KeyRoundIcon className="size-3.5" />已配置密钥{model?.api_key_source ? `（环境变量 ${model.api_key_source}）` : ""}，不会回显。<TButton theme="default" variant="text" size="small" onClick={() => patch({ clear_api_key: !draft.clear_api_key })}>{draft.clear_api_key ? "撤销清除" : "清除密钥"}</TButton></div>}
+          <div className="md:col-span-2"><Field label="描述"><Textarea value={draft.description ?? ""} autosize={{ minRows: 2, maxRows: 4 }} placeholder="说明模型适用的任务与限制" onChange={(value) => patch({ description: String(value) })} /></Field></div>
+        </section>
+        <section className="rounded-lg border border-border p-4">
+          <div className="mb-2"><h3 className="font-medium">能力声明</h3><p className="mt-1 text-xs text-muted-foreground">这些标识决定哪些页面会向模型提供思考、视觉或工具调用入口。</p></div>
+          <div className="flex flex-wrap gap-x-5 gap-y-3 text-sm"><span className="flex items-center gap-2"><Switch value={draft.supports_thinking} onChange={(value) => patch({ supports_thinking: Boolean(value) })} />支持思考</span><span className="flex items-center gap-2"><Switch value={draft.supports_vision} onChange={(value) => patch({ supports_vision: Boolean(value) })} />支持视觉</span><span className="flex items-center gap-2"><Switch value={draft.supports_reasoning_effort} onChange={(value) => patch({ supports_reasoning_effort: Boolean(value) })} />推理档位</span></div>
+        </section>
+        <div className="flex items-center justify-between border-t pt-4"><TButton theme="default" variant="outline" loading={test.isPending} onClick={() => void handleTest()}><WrenchIcon className="mr-1.5 size-4" />测试连接</TButton><TButton theme="default" variant="text" onClick={() => setAdvanced((value) => !value)}><Settings2Icon className="mr-1.5 size-4" />高级配置 <ChevronDownIcon className={`ml-1 size-4 transition-transform ${advanced ? "rotate-180" : ""}`} /></TButton></div>
+        {testResult && <div className={`rounded-lg border px-3 py-2 text-sm ${testResult.success ? "border-primary/20 bg-primary/5 text-foreground" : "border-destructive/25 bg-destructive/5 text-destructive"}`}><div className="font-medium">{testResult.success ? "连接成功" : "连接失败"}{testResult.success && testResult.latency ? ` · ${testResult.latency} ms` : ""}</div><p className="mt-1 break-words text-xs opacity-80">{testResult.preview || testResult.message}</p></div>}
+        {advanced && <section className="space-y-4 rounded-lg border border-dashed border-border bg-muted/10 p-4"><div className="grid gap-4 md:grid-cols-3"><Field label="请求超时（秒）"><InputNumber value={draft.request_timeout ?? ""} min={1} max={600} onChange={(value) => patch({ request_timeout: toNumber(value) })} /></Field><Field label="最大重试次数"><InputNumber value={draft.max_retries ?? ""} min={0} max={20} onChange={(value) => patch({ max_retries: toNumber(value) })} /></Field><Field label="最大输出 Token"><InputNumber value={draft.max_tokens ?? ""} min={1} max={1_000_000} onChange={(value) => patch({ max_tokens: toNumber(value) })} /></Field><Field label="温度"><InputNumber value={draft.temperature ?? ""} min={0} max={2} step={0.1} decimalPlaces={1} onChange={(value) => patch({ temperature: toNumber(value) })} /></Field><span className="flex items-end gap-2 pb-1 text-sm font-medium"><Switch value={draft.stream_usage ?? true} onChange={(value) => patch({ stream_usage: Boolean(value) })} />流式 Token 统计</span></div><Field label="额外参数 JSON"><Textarea value={draft.extra_settings_text} autosize={{ minRows: 4, maxRows: 10 }} placeholder={'{\n  "extra_body": {}\n}'} onChange={(value) => patch({ extra_settings_text: String(value) })} /><p className="text-xs font-normal text-muted-foreground">保留并编辑配置文件中未在基础表单展示的兼容参数。必须为 JSON 对象。</p></Field></section>}
+      </div>
+    </Dialog>
+  );
+}
+
+export default function ModelManagementPage() {
+  const { data, isLoading, error, refetch, isFetching } = useManagedModels();
+  const [search, setSearch] = useState("");
+  const [filter, setFilter] = useState<"all" | "thinking" | "vision">("all");
+  const [editor, setEditor] = useState<ManagedModel | null | "new">(null);
+  const models = useMemo(() => {
+    const keyword = search.trim().toLowerCase();
+    return (data?.models ?? []).filter((model) => {
+      const matchesFilter = filter === "all" || (filter === "thinking" ? model.supports_thinking : model.supports_vision);
+      const matchesSearch = !keyword || [model.name, model.display_name, model.model, model.use].filter(Boolean).join(" ").toLowerCase().includes(keyword);
+      return matchesFilter && matchesSearch;
+    });
+  }, [data?.models, filter, search]);
+  const stats = useMemo(() => ({ total: data?.models.length ?? 0, thinking: data?.models.filter((item) => item.supports_thinking).length ?? 0, vision: data?.models.filter((item) => item.supports_vision).length ?? 0 }), [data?.models]);
+  return (
+    <WorkspaceContainer><WorkspaceHeader /><WorkspaceBody><main className="flex size-full min-h-0 flex-col overflow-y-auto bg-background px-6 py-5 md:px-8"><div className="mx-auto flex w-full max-w-7xl flex-col gap-5"><header className="flex flex-wrap items-start justify-between gap-4"><div><div className="flex items-center gap-2"><span className="flex size-9 items-center justify-center rounded-lg bg-primary/10 text-primary"><CpuIcon className="size-5" /></span><h1 className="text-2xl font-semibold tracking-tight">模型配置</h1></div><p className="mt-2 max-w-3xl text-sm leading-6 text-muted-foreground">管理当前部署 <code className="rounded bg-muted px-1 py-0.5">config.yaml</code> 中的对话模型。保存后所有页面立即可选；密钥仅可写入，永不回显。</p></div><div className="flex flex-wrap items-center gap-2"><TButton theme="default" variant="outline" loading={isFetching} onClick={() => void refetch()}><RefreshCwIcon className="mr-1.5 size-4" />刷新</TButton><TButton theme="primary" onClick={() => setEditor("new")}><PlusIcon className="mr-1.5 size-4" />添加模型</TButton></div></header><div className="grid gap-3 sm:grid-cols-3"><StatCard icon={BotIcon} label="已配置模型" value={stats.total} /><StatCard icon={SparklesIcon} label="支持思考" value={stats.thinking} /><StatCard icon={EyeIcon} label="支持视觉" value={stats.vision} /></div><section className="rounded-xl border border-border bg-card shadow-sm"><div className="flex flex-wrap items-center justify-between gap-3 border-b px-4 py-3"><div className="flex flex-wrap items-center gap-2">{([ ["all", "全部"], ["thinking", "支持思考"], ["vision", "支持视觉"] ] as const).map(([value, label]) => <TButton key={value} theme={filter === value ? "primary" : "default"} variant={filter === value ? "base" : "text"} size="small" onClick={() => setFilter(value)}>{label}</TButton>)}</div><Input value={search} placeholder="搜索名称、模型或驱动" clearable className="w-full sm:w-72" onChange={(value) => setSearch(String(value))} /></div>{isLoading && <div className="flex h-52 items-center justify-center gap-2 text-sm text-muted-foreground"><LoaderCircleIcon className="size-4 animate-spin" />加载模型配置…</div>}{error && <div className="m-4 flex items-start gap-2 rounded-lg border border-destructive/25 bg-destructive/5 p-3 text-sm text-destructive"><CircleAlertIcon className="mt-0.5 size-4" />{error.message}</div>}{!isLoading && !error && models.length === 0 && <div className="flex h-52 flex-col items-center justify-center gap-2 text-sm text-muted-foreground"><CpuIcon className="size-7" />没有匹配的模型配置</div>}{!isLoading && !error && models.length > 0 && <div className="grid gap-3 p-4 lg:grid-cols-2">{models.map((model) => <article key={model.name} className="rounded-lg border border-border bg-background p-4 transition-colors hover:border-primary/35"><div className="flex items-start justify-between gap-3"><div className="min-w-0"><div className="flex flex-wrap items-center gap-2"><h2 className="truncate font-semibold">{model.display_name || model.name}</h2><Tag theme="success" variant="light" size="small">config.yaml</Tag></div><p className="mt-1 truncate font-mono text-xs text-muted-foreground">{model.name}</p></div><TButton theme="default" variant="outline" size="small" onClick={() => setEditor(model)}>配置</TButton></div>{model.description ? <p className="mt-3 line-clamp-2 min-h-10 text-sm leading-5 text-muted-foreground">{model.description}</p> : <p className="mt-3 min-h-10 text-sm leading-5 text-muted-foreground">未填写描述</p>}<div className="mt-3 grid gap-2 border-t pt-3 text-xs text-muted-foreground sm:grid-cols-2"><span className="truncate" title={model.use}>驱动：{model.use}</span><span className="truncate" title={model.model}>模型：{model.model}</span></div><div className="mt-3 flex flex-wrap gap-1.5">{model.api_key_configured && <Tag size="small" variant="light"><KeyRoundIcon className="mr-1 size-3" />已配置密钥</Tag>}{model.supports_thinking && <Tag theme="primary" size="small" variant="light"><SparklesIcon className="mr-1 size-3" />思考</Tag>}{model.supports_vision && <Tag theme="warning" size="small" variant="light"><EyeIcon className="mr-1 size-3" />视觉</Tag>}{model.supports_reasoning_effort && <Tag size="small" variant="light">推理档位</Tag>}</div></article>)}</div>}</section>{data?.config_path && <p className="text-xs text-muted-foreground">当前配置文件：<code>{data.config_path}</code>{data.updated_at ? ` · 最近更新 ${new Date(data.updated_at).toLocaleString()}` : ""}</p>}</div></main></WorkspaceBody>{editor !== null && <ModelEditor key={editor === "new" ? "new" : editor.name} model={editor === "new" ? null : editor} onClose={() => setEditor(null)} />}</WorkspaceContainer>
+  );
+}

frontend-web/src/pages/WorkspaceRoutes.tsx

@@ -43,6 +43,7 @@ import MemoryPage from './MemoryPage';
 import PromptPrefixSettingsPage from './PromptPrefixSettingsPage';
 import PrivateSquareSettingsPage from './PrivateSquareSettingsPage';
 import ModelConcurrencySettingsPage from './ModelConcurrencySettingsPage';
+import ModelManagementPage from './ModelManagementPage';
 import PublishSquaresSettingsPage from './PublishSquaresSettingsPage';
 import SkillCompressionSettingsPage from './SkillCompressionSettingsPage';
 import SkillEvolutionPage from './SkillEvolutionPage';
@@ -786,6 +787,18 @@ export default function WorkspaceRoutes({
             )
           }
         />
+        <Route
+          path="admin/models"
+          element={
+            getStoredAuth()?.system_role === 'admin' ? (
+              <WorkspaceLayout {...layoutProps}>
+                <ModelManagementPage />
+              </WorkspaceLayout>
+            ) : (
+              <Navigate to="/page/workspace/chats/new" replace />
+            )
+          }
+        />
         <Route
           path="settings/model-concurrency"
           element={