feat(gateway,admin-web): 面板可编辑 provider 推理形状 / 角色级路由 / multimodal 真语义(裁决 03.4.2/03.4.1)
CI / Backend (build / vet / test / cross-compile) (push) Has been cancelled
CI / Frontend (tsc + vite build) (push) Has been cancelled

- 后端:AdminLlmProvider 暴露 reasoning{kind}(恒下发,""=未声明=auto)、personaModels、personaProviders;
  顶层新增 reasoningKinds / personaProviderOptions 两个**取值域**(唯一来源= runtimeconfig 导出枚举,
  校验错误文案也由枚举拼接 ⇒ 不可能漂移)
- 读写共用同一映射(admin_llm_provider.go),避免「读侧少一个键 ⇒ 面板一保存就抹掉」
- 写侧语义:缺失=保留、给出=整块/整表替换;非法值一律 runtimeconfig.Group.Validate() ⇒ 400 bad_request
  (实测非法 kind 返回 400 且 models.json 完全不动,而非 500 静默失败)
- 前端:新增 LlmProviderRouting(推理形状下拉 + multimodal 开关 + 按角色路由编辑器);
  目录能力位改三态(true/false/未标注),「未标注」不再谎称「不支持」;目录/角色清单不可用时
  **不阻塞编辑**且与「字段为空」是不同状态;绝无 mock/sample 回退
- 复核:build/vet 绿 + gateway/config 包测试绿 + tsc 0 错 + vite build 成功;2 条变异反证(删 reasoning
  补丁 → 2 例红;删 Group.Validate → 该 400 用例红)已还原
- 注意(主会话已知):npm run build 把新 SPA 写进 frontend/web/dist,而运行中的二进制优先从磁盘读该目录
  ⇒ :10942 目前是「新面板 + 旧后端」,等阶段 5 全绿后按红线「先 build 到位、再一次 restart」切换
This commit is contained in:
AskaEth committed 2026-10-04 13:06:54 +08:00
1 parent 8890c30bb5
commit 1ac02bd77e
12 files changed
+998 -85

No files matched your search

@@ -0,0 +1,302 @@
import type { AdminLlmProvider } from "../../../lib/types";
import { Button, Switch, Tag } from "../../../components/primitives";
/* ---------------------------------------------------------------------------
* 阶段 5 新增的字段(multimodal / reasoning.kind / per-persona 路由)的编辑界面。
* 取值域一律由后端下发(GET /admin/llm 的 reasoningKinds / personaProviderOptions),
* 本文件只提供展示文案与本地校验,不硬编码第二套枚举,也不拿任何示例值顶替。
* -------------------------------------------------------------------------*/
/** 一个 persona 路由行的编辑草稿。 */
export interface PersonaRouteDraft {
persona: string;
model: string;
provider: string;
}
/** 从已存分组播种路由行:两张表的键取并集,使「只声明了 provider、没声明模型」
* 的条目也照实显示(面板绝不悄悄丢掉已存配置)。 */
export function initPersonaRoutes(p: AdminLlmProvider | null): PersonaRouteDraft[] {
const models = p?.personaModels ?? {};
const providers = p?.personaProviders ?? {};
const keys = [...new Set([...Object.keys(models), ...Object.keys(providers)])].sort();
return keys.map((persona) => ({
persona,
model: models[persona] ?? "",
provider: providers[persona] ?? "",
}));
}
/** 路由行 → 两张表。空 persona 的行是没填完的行(提交前已被拦下),不编造;
* 「有 provider 没 model」的行按原样保留在后端已有的 schema 语义里
* (它不生效,面板在行上明说),因此绝不把已存配置悄悄变成别的形状。 */
export function routesToMaps(routes: PersonaRouteDraft[]): {
personaModels: Record<string, string>;
personaProviders: Record<string, string>;
} {
const personaModels: Record<string, string> = {};
const personaProviders: Record<string, string> = {};
routes.forEach((r) => {
const persona = r.persona.trim();
if (!persona) return;
const model = r.model.trim();
const provider = r.provider.trim();
if (model) personaModels[persona] = model;
if (provider) personaProviders[persona] = provider;
});
return { personaModels, personaProviders };
}
/** 路由行的本地校验。只拦两类确定会让整张表出错的输入:persona 没填就填了别的
* 东西(后端会 400),以及同一 persona 出现多次(对象键会悄悄合并成一条)。 */
export function personaRouteProblem(routes: PersonaRouteDraft[]): string | null {
const seen = new Set<string>();
for (const r of routes) {
const persona = r.persona.trim();
if (!persona) {
if (r.model.trim() || r.provider.trim()) return "按角色路由:有行的 persona 没填(补上 persona,或删掉该行)";
continue;
}
if (seen.has(persona)) return `按角色路由:persona「${persona}」出现多次——同一 persona 只能有一条`;
seen.add(persona);
}
return null;
}
/** 目录(models.dev)对候选模型的能力标注,用于给面板**建议**。
* attachment 为 undefined = 目录未标注该能力(不是「不支持」)。 */
export interface CatalogHint {
provider: string;
model: string;
attachment?: boolean;
supportsReasoning: boolean;
}
/** multimodal 开关 + 语义说明 + 目录建议。目录只是建议,随时可推翻;
* 目录不可用时这一栏照常可编辑(hint 为 null)。 */
export function MultimodalField({
checked,
hint,
onChange,
}: {
checked: boolean;
hint: CatalogHint | null;
onChange: (next: boolean) => void;
}): React.ReactNode {
return (
<div className="space-y-1">
<Switch checked={checked} onChange={onChange} label="主模型可收图(multimodal)" />
<p className="text-xs text-[var(--mu-text-lo)]">
勾选 = 主模型自己接收图片输入。图片识别 / OCR 工具用的模型由 .env 的 LLM_VISION_MODEL /
LLM_OCR_MODEL 另配,与这里无关。
</p>
{hint ? (
<p className="text-xs text-[var(--mu-text-mid)]">
目录(models.dev)对 {hint.model} 的标注:
{hint.attachment === true
? "接受图片输入"
: hint.attachment === false
? "不接受图片输入"
: "未标注该能力(请按你的端点实际能力填)"}
{hint.supportsReasoning ? " · 支持推理(开关形状仍需按端点选)" : ""} —— 只是建议,可随时推翻。
</p>
) : (
<p className="text-xs text-[var(--mu-text-lo)]">未从目录带入建议(目录不可用或本次是手填),不影响编辑。</p>
)}
</div>
);
}
/** reasoning.kind 的展示文案:键是后端下发的取值,值是**形状说明**。
* 后端将来新增的取值没有文案时原样显示,不编造含义。 */
const REASONING_LABEL: Record<string, string> = {
auto: "auto(按模型名 / baseURL 推断,形状有歧义就不下发)",
deepseek: "deepseek(顶层 thinking:{type} + reasoning_effort)",
openai: "openai(只有 reasoning_effort)",
vllm: "vllm(chat_template_kwargs.enable_thinking)",
dashscope: "dashscope(顶层 enable_thinking)",
};
/** 推理开关形状下拉框。候选值 = 后端下发的 reasoningKinds(外加「未声明」);
* 已存值不在候选里时原样列出并标注,绝不悄悄改成别的值。 */
export function ReasoningField({
value,
kinds,
provider,
onChange,
}: {
value: string;
kinds: string[];
provider: string;
onChange: (next: string) => void;
}): React.ReactNode {
const opts = kinds.map((k) => ({ value: k, label: REASONING_LABEL[k] ?? k }));
if (value && !kinds.includes(value)) {
opts.unshift({ value, label: `${value}(当前值:后端未把它列为可选形状)` });
}
return (
<div className="space-y-1">
<label className="block space-y-1">
<span className="text-xs text-[var(--mu-text-lo)]">推理开关形状 reasoning.kind</span>
<select value={value} onChange={(e) => onChange(e.target.value)} className={`${inputCls} w-full`}>
<option value="">未声明(等同 auto:按模型名 / baseURL 推断)</option>
{opts.map((o) => (
<option key={o.value} value={o.value}>
{o.label}
</option>
))}
</select>
</label>
{kinds.length === 0 ? (
<p className="text-xs text-[var(--mu-warn)]">
后端未下发可选形状(响应缺少 reasoningKinds):这里只能选「未声明」,或按 design/04 §3.2 手填后由后端校验(非法值会 400)。
</p>
) : null}
{provider === "anthropic" && value !== "" && value !== "auto" ? (
<p className="text-xs text-[var(--mu-warn)]">
anthropic 组只接受「未声明 / auto」:这些形状属于 OpenAI 兼容端点,保存时后端会回 400。
</p>
) : null}
</div>
);
}
/** 一行 persona 路由:persona(可手填,已知角色作为候选)+ 模型 + 协议覆盖。 */
function PersonaRouteRow({
route,
index,
providerOptions,
groupProvider,
listId,
onPatch,
onRemove,
}: {
route: PersonaRouteDraft;
index: number;
providerOptions: string[];
groupProvider: string;
listId: string;
onPatch: (index: number, patch: Partial<PersonaRouteDraft>) => void;
onRemove: (index: number) => void;
}): React.ReactNode {
const persona = route.persona.trim();
const hasModel = route.model.trim() !== "";
const providerValue = route.provider.trim();
const providerChoices = providerValue && !providerOptions.includes(providerValue)
? [providerValue, ...providerOptions]
: providerOptions;
const dead = persona !== "" && providerValue !== "" && !hasModel;
return (
<div className="flex flex-wrap items-center gap-2 rounded-[var(--mu-radius)] bg-[var(--mu-surface-2)] px-3 py-2">
<input
value={route.persona}
onChange={(e) => onPatch(index, { persona: e.target.value })}
list={listId}
placeholder="persona id"
className={`${inputCls} w-40`}
aria-label="persona id"
/>
<input
value={route.model}
onChange={(e) => onPatch(index, { model: e.target.value })}
placeholder="模型名(留空 = 不绑定)"
className={`${inputCls} w-56 font-mono text-xs`}
aria-label="该 persona 的模型名"
/>
<select
value={providerValue}
onChange={(e) => onPatch(index, { provider: e.target.value })}
className={`${inputCls} w-56`}
aria-label="该 persona 的协议覆盖"
>
<option value="">跟随本组协议({groupProvider || "未定"})</option>
{providerChoices.map((p) => (
<option key={p} value={p}>
{providerOptions.includes(p) ? p : `${p}(当前值:后端未把它列为可选)`}
</option>
))}
</select>
{dead ? <Tag tone="warn">只有协议没有模型 → 不生效</Tag> : null}
<span className="ml-auto">
<Button size="sm" variant="ghost" onClick={() => onRemove(index)}>
删除
</Button>
</span>
</div>
);
}
/** per-persona 路由编辑器。角色清单只是**候选**(可手填 id):清单取不到时
* 照常手填,绝不阻塞保存;每条路由的含义与生效条件在下方如实说明。 */
export function PersonaRoutesEditor({
routes,
knownIds,
personaListError,
providerOptions,
groupProvider,
onChange,
}: {
routes: PersonaRouteDraft[];
knownIds: string[];
personaListError: string | null;
providerOptions: string[];
groupProvider: string;
onChange: (next: PersonaRouteDraft[]) => void;
}): React.ReactNode {
const listId = "llm-persona-ids";
const patch = (index: number, p: Partial<PersonaRouteDraft>): void =>
onChange(routes.map((r, i) => (i === index ? { ...r, ...p } : r)));
const remove = (index: number): void => onChange(routes.filter((_, i) => i !== index));
return (
<div className="space-y-2">
<div className="flex flex-wrap items-center gap-2">
<span className="text-xs text-[var(--mu-text-lo)]">按角色路由(persona → 模型 / 协议)</span>
<span className="text-xs text-[var(--mu-text-lo)]">
未列出的 persona 一律用本组默认模型(协议 {groupProvider || "未定"})
</span>
<Button
size="sm"
variant="ghost"
className="ml-auto"
onClick={() => onChange([...routes, { persona: "", model: "", provider: "" }])}
>
添加一行
</Button>
</div>
<datalist id={listId}>
{knownIds.map((id) => (
<option key={id} value={id} />
))}
</datalist>
{personaListError ? (
<p className="text-xs text-[var(--mu-warn)]">
角色清单未取到({personaListError}):persona id 仍可手填,不影响保存。
</p>
) : null}
{routes.length === 0 ? (
<p className="text-xs text-[var(--mu-text-lo)]">没有 per-persona 路由:该组所有角色都用本组的 model。</p>
) : (
routes.map((r, i) => (
<PersonaRouteRow
key={i}
route={r}
index={i}
providerOptions={providerOptions}
groupProvider={groupProvider}
listId={listId}
onPatch={patch}
onRemove={remove}
/>
))
)}
{providerOptions.length === 0 ? (
<p className="text-xs text-[var(--mu-warn)]">
后端未下发可选的 persona 协议(响应缺少 personaProviderOptions):这里只能选「跟随本组协议」。
</p>
) : null}
</div>
);
}
const inputCls =
"rounded-[var(--mu-radius)] bg-[var(--mu-surface-2)] px-3 py-2 text-sm outline-none focus:ring-1 focus:ring-[var(--mu-accent)] disabled:opacity-60";