Archived
ChaiHaoandClaude Opus 5
da8ac8f9bc
三条毛病一次改净:
**① 名字被截断**。用途名是活动里声明的那个名,看不全等于没显示 —— 卡面改成
40px 图标 + **名字独占一行、折行也不截**(overflow-wrap: anywhere),
厂商与型号退到第二行小字。
**② 「已绑定」是谎**。种子从前塞一个 `sk-placeholder` 冒充密钥,卡上写着「已绑定」,
一自检就是 `api key ... is invalid`;抽屉里那格也照「是不是新建」写占位,
于是没钥匙的实例也显示「已绑定 · 留空保持原值」。现在:
· 种子**读不到环境密钥就不绑**,如实显示未绑定;
· 抽屉的占位与判词改看 `keyBound` —— 没绑就写「还没有密钥 —— 不填这条实例调不动」。
**界面撒谎比缺功能更坏**:缺功能人会去补,撒谎的人会照着假状态做决定。
**③ 不可用还摆一排统计**。没密钥连调都调不起来,「系统用途/端点」那些格没有意义 ——
未绑定时卡上只剩一句判词 +「去配置」;绑好了才谈端点与「测试」。
系统用途从卡面撤了(用户:不要管是不是系统用途,两条都能用)。
**只留两条实例**:`deepseek-v4-flash` 与 `deepseek-v4-pro`,都不预设系统用途。
配套两件:
· `pickSystemUse` 加**回落** —— 没人勾就取第一条能用的(启用且已绑密钥);
从前非勾不可,没勾那天系统叙述整条哑掉,那是配置疏忽不该变成功能缺失(补了三条测试);
· 六个活动包里声明的用途名 `quote-extractor` 改指 `deepseek-v4-flash`,各升一个补丁版。
顺带补 `DELETE /api/gov/llm/:id`(卡上 ⋯ 菜单):还有活动声明着这个用途名就拒(409)——
删了那些活动一调模型就是「用途名未绑定」,而人当时以为只是清一条没用的记录。
实测:用它把库里遗留的 quote-extractor 删掉,现在库里就是那两条,卡上如实写「未绑定密钥 · 不可用」。
五闸绿。
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01KeDBx2PHLavbURXB8LJJ7m
584 lines
22 KiB
TypeScript
584 lines
22 KiB
TypeScript
/**
|
|
* feature `gov-system` —— 系统管理:LLM 实例四元绑定、通道实例
|
|
*
|
|
* 自 `~/coding/JCAI_PRD/governance/_components/Governance.tsx` 平移:
|
|
* DOM 结构、类名(`g-*` + 色调 `t-*`)与文案原样保留,mock 常量换成服务端投影(README 平移规则 1/2/4)。
|
|
* 区首页只负责导航,治理动作一律落在下钻详情页的**就地确认带**(影响预览三必答)。
|
|
*/
|
|
import { useEffect, useState } from 'react';
|
|
import { createPortal } from 'react-dom';
|
|
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
|
import type { LlmInstanceView, LlmProvider } from '@contracts';
|
|
import { deleteLlmInstanceRoute, probeLlmDraftRoute, probeLlmInstanceRoute, upsertLlmInstanceRoute } from '@contracts';
|
|
import { call } from '@web-shared/typed-fetch.ts';
|
|
import { Ico } from '@web-shared/Ico.tsx';
|
|
import { Card, Chip, NList, NRow, Note, PageHead, QueryGate, Rows, St } from '@web-shared/gov/primitives.tsx';
|
|
import type { Nav } from '@web-shared/gov/gov-route.ts';
|
|
import { useGovChannels, useGovLlm, useGovLlmProviders } from '@web-shared/gov/gov-api.ts';
|
|
|
|
export type HomeProps = { tab: string; nav: Nav };
|
|
|
|
/**
|
|
* Provider 的人读名 —— **只是标签**:默认端点、结构化出参口径、推理回包这些
|
|
* 由服务端的 provider-profile 说了算(那份是唯一真相,前端不复制一份 URL 表来漂移)。
|
|
*/
|
|
const PROVIDER_LABEL: Readonly<Record<LlmProvider, string>> = {
|
|
'openai-compatible': 'OpenAI 兼容端点',
|
|
openai: 'OpenAI',
|
|
deepseek: 'DeepSeek',
|
|
anthropic: 'Anthropic',
|
|
qwen: '通义千问',
|
|
};
|
|
|
|
/** 端点只显示主机名 —— 卡上要的是「连的是哪家」,不是整条 URL */
|
|
const hostOf = (url: string): string => {
|
|
try {
|
|
return new URL(url).host;
|
|
} catch {
|
|
return url === '' ? '—' : url;
|
|
}
|
|
};
|
|
|
|
/** 表单草稿:apiKey 是**只写字段**,留空 = 保持原值(服务端永不回显密钥) */
|
|
type LlmDraft = {
|
|
id?: string;
|
|
/** 这条实例**当前**有没有密钥 —— 占位文案与判词照它写,不照「是不是新建」写 */
|
|
keyBound: boolean;
|
|
name: string;
|
|
provider: LlmProvider;
|
|
baseUrl: string;
|
|
model: string;
|
|
apiKey: string;
|
|
systemUse: boolean;
|
|
enabled: boolean;
|
|
};
|
|
|
|
const draftOf = (i: LlmInstanceView): LlmDraft => ({
|
|
id: i.id,
|
|
keyBound: i.apiKeyBound,
|
|
name: i.name,
|
|
provider: i.provider,
|
|
baseUrl: i.baseUrl,
|
|
model: i.model,
|
|
apiKey: '',
|
|
systemUse: i.systemUse,
|
|
enabled: i.enabled,
|
|
});
|
|
|
|
const EMPTY_DRAFT: LlmDraft = {
|
|
keyBound: false,
|
|
name: '',
|
|
provider: 'deepseek',
|
|
baseUrl: '',
|
|
model: '',
|
|
apiKey: '',
|
|
systemUse: false,
|
|
enabled: true,
|
|
};
|
|
|
|
/**
|
|
* 接入模型 —— **右侧抽屉**,照模型接入面的通行做法排:
|
|
* ① 先挑供应商(一排可点的牌子,选中即预填它的默认端点)
|
|
* ② 再填连接(端点 + 密钥,密钥旁边就是「测试连接」—— 填完当场知道通不通)
|
|
* ③ 最后是型号与用途。底部一条固定动作栏。
|
|
*
|
|
* 为什么是抽屉不是页内卡:配置是**一次性的岔路**,做完就该回到货架。
|
|
* 从前那版把表单摊在页面上,输入框拉到 1100px 宽、动作钮掉出屏幕 —— 那不是表单,是把字段倒在地上。
|
|
*/
|
|
function LlmDrawer({
|
|
draft,
|
|
onCancel,
|
|
onSaved,
|
|
}: {
|
|
draft: LlmDraft;
|
|
onCancel: () => void;
|
|
onSaved: (saved: LlmInstanceView) => void;
|
|
}) {
|
|
const [d, setD] = useState<LlmDraft>(draft);
|
|
const [showKey, setShowKey] = useState(false);
|
|
const [err, setErr] = useState<string | undefined>(undefined);
|
|
const [probed, setProbed] = useState<{ ok: boolean; latencyMs?: number; error?: string } | undefined>(undefined);
|
|
const providers = useGovLlmProviders();
|
|
const isNew = draft.id === undefined;
|
|
// Esc 关抽屉 —— 抽屉盖住整屏,不给一条键盘出路是把人关在里面
|
|
useEffect(() => {
|
|
const onKey = (e: KeyboardEvent) => {
|
|
if (e.key === 'Escape') onCancel();
|
|
};
|
|
window.addEventListener('keydown', onKey);
|
|
return () => window.removeEventListener('keydown', onKey);
|
|
}, [onCancel]);
|
|
const profile = (providers.data?.providers ?? []).find((p) => p.provider === d.provider);
|
|
// openai-compatible 没有默认端点:不自填就连不上,这条闸前端先拦一道(服务端也拦)
|
|
const urlNeeded = (profile?.defaultBaseUrl ?? '') === '' && d.baseUrl.trim() === '';
|
|
const invalid = d.name.trim() === '' || d.model.trim() === '' || urlNeeded;
|
|
|
|
/** 换供应商时把端点跟着换成它的默认值 —— 除非用户已经手填过别的 */
|
|
const pickProvider = (next: string, nextDefault: string) => {
|
|
const prevDefault = profile?.defaultBaseUrl ?? '';
|
|
const untouched = d.baseUrl.trim() === '' || d.baseUrl.trim() === prevDefault;
|
|
setD({ ...d, provider: next as LlmProvider, ...(untouched ? { baseUrl: nextDefault } : {}) });
|
|
setProbed(undefined);
|
|
};
|
|
|
|
const save = useMutation({
|
|
mutationFn: () =>
|
|
call<LlmInstanceView>(upsertLlmInstanceRoute, {
|
|
body: {
|
|
...(d.id === undefined ? {} : { id: d.id }),
|
|
name: d.name.trim(),
|
|
provider: d.provider,
|
|
baseUrl: d.baseUrl.trim(),
|
|
model: d.model.trim(),
|
|
...(d.apiKey === '' ? {} : { apiKey: d.apiKey }),
|
|
systemUse: d.systemUse,
|
|
enabled: d.enabled,
|
|
},
|
|
}),
|
|
onSuccess: onSaved,
|
|
onError: (e: unknown) => setErr((e as { message?: string }).message ?? '存不下'),
|
|
});
|
|
|
|
/**
|
|
* 测试连接 —— **只测不存**:拿表单上正填的四元去试,一个字节不落库。
|
|
* 密钥留空就用这条实例已存的那把(改端点、换型号不必重打钥匙)。
|
|
*/
|
|
const test = useMutation({
|
|
mutationFn: () =>
|
|
call<{ ok: boolean; latencyMs?: number; error?: string }>(probeLlmDraftRoute, {
|
|
body: {
|
|
...(d.id === undefined ? {} : { id: d.id }),
|
|
name: d.name.trim(),
|
|
provider: d.provider,
|
|
baseUrl: d.baseUrl.trim(),
|
|
model: d.model.trim(),
|
|
...(d.apiKey === '' ? {} : { apiKey: d.apiKey }),
|
|
},
|
|
}),
|
|
onSuccess: setProbed,
|
|
onError: (e: unknown) => setProbed({ ok: false, error: (e as { message?: string }).message ?? '测试失败' }),
|
|
});
|
|
|
|
/*
|
|
* **挂到 body 上**(2026-07-30 实测踩到):抽屉是 `position: fixed`,而详情页容器
|
|
* `.g-detail` 带着入场动画的 `transform` —— 带 transform 的祖先会成为 fixed 的包含块,
|
|
* 于是抽屉被钉进那张卡的盒子里,量出来只有 520×129:头尾一挤,输入框整片没了。
|
|
* 走 portal 就与 DOM 位置解绑,谁在祖先上加动画都影响不到它。
|
|
*/
|
|
return createPortal(
|
|
/*
|
|
* `gov-root` 这个类必须跟着一起挂:整套令牌(--card / --cline / --ink …)
|
|
* 定义在 `.gov-root` 上,而 portal 把节点挂到了 body —— 出了那个作用域,
|
|
* `var(--card)` 解析为空,面板背景直接变透明(实测 rgba(0,0,0,0),
|
|
* 顶栏与页面内容从抽屉里透出来)。挂上它,portal 与令牌两头都成立。
|
|
*/
|
|
<div className="gov-root g-drawer" role="dialog" aria-modal="true" aria-label={isNew ? '接入模型' : `配置 ${draft.name}`}>
|
|
<button className="g-drawer-veil" aria-label="关闭" onClick={onCancel} />
|
|
<div className="g-drawer-p">
|
|
<header>
|
|
<div>
|
|
<b>{isNew ? '接入模型' : `配置 ${draft.name}`}</b>
|
|
<span>活动只声明用途名 —— 换厂商换型号不动活动一行代码</span>
|
|
</div>
|
|
<button className="x" aria-label="关闭" onClick={onCancel}>
|
|
<Ico name="x" s={15} />
|
|
</button>
|
|
</header>
|
|
|
|
<div className="g-drawer-b">
|
|
{/*
|
|
* 排布按「决定性」从大到小,且**一屏装得下** —— 上一版把 118px 的供应商牌子摆在最前,
|
|
* 结果「模型」「用途名」这两个定义身份的字段掉到折线以下:点开看不见输入框。
|
|
* 现在:供应商收成一行小签 → 身份两栏并排 → 连接 → 开关。
|
|
*/}
|
|
<section>
|
|
<h4>供应商</h4>
|
|
<div className="g-chiprow">
|
|
{(providers.data?.providers ?? []).map((p) => (
|
|
<button
|
|
key={p.provider}
|
|
className={'g-chip' + (p.provider === d.provider ? ' on' : '')}
|
|
title={p.defaultBaseUrl === '' ? '没有默认端点,须自填' : p.defaultBaseUrl}
|
|
onClick={() => pickProvider(p.provider, p.defaultBaseUrl)}
|
|
>
|
|
{p.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<h4>身份</h4>
|
|
<div className="g-fld2">
|
|
<label className="g-fld">
|
|
<span>用途名</span>
|
|
<input className="g-input" value={d.name} placeholder="如:deepseek-v4-flash" onChange={(e) => setD({ ...d, name: e.target.value })} />
|
|
<small>活动里声明的就是这个名</small>
|
|
</label>
|
|
<label className="g-fld">
|
|
<span>模型</span>
|
|
<input className="g-input mono" value={d.model} placeholder="如:deepseek-chat" onChange={(e) => setD({ ...d, model: e.target.value })} />
|
|
<small>厂商侧型号名</small>
|
|
</label>
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<h4>连接</h4>
|
|
<label className="g-fld">
|
|
<span>API 端点</span>
|
|
<input
|
|
className="g-input mono"
|
|
value={d.baseUrl}
|
|
placeholder={urlNeeded ? '必填,如 https://your-gateway/v1' : '留空取默认端点'}
|
|
onChange={(e) => setD({ ...d, baseUrl: e.target.value })}
|
|
/>
|
|
{urlNeeded && <small className="warn">这家没有默认端点 —— 不填连不上</small>}
|
|
</label>
|
|
<label className="g-fld">
|
|
<span>API Key</span>
|
|
<span className="g-inwrap">
|
|
<input
|
|
className="g-input mono"
|
|
type={showKey ? 'text' : 'password'}
|
|
autoComplete="off"
|
|
value={d.apiKey}
|
|
placeholder={d.keyBound ? '已绑定 · 留空保持原值' : 'sk-…'}
|
|
onChange={(e) => setD({ ...d, apiKey: e.target.value })}
|
|
/>
|
|
<button className="eye" aria-label={showKey ? '隐藏' : '显示'} onClick={() => setShowKey(!showKey)}>
|
|
<Ico name={showKey ? 'eye-off' : 'eye'} s={13} />
|
|
</button>
|
|
</span>
|
|
{/* 没绑就直说没绑:没有钥匙这条实例一次也调不动,不该让人以为只是「可留空」 */}
|
|
<small className={d.keyBound ? '' : 'warn'}>
|
|
{d.keyBound ? '密文存治理台,永不回显' : '还没有密钥 —— 不填这条实例调不动'}
|
|
</small>
|
|
</label>
|
|
<div className="g-testrow">
|
|
<button className="g-btn xs" disabled={test.isPending || d.model.trim() === '' || urlNeeded} onClick={() => test.mutate()}>
|
|
<Ico name={test.isPending ? 'hourglass' : 'zap'} s={11} />
|
|
{test.isPending ? '测试中…' : '测试连接'}
|
|
</button>
|
|
{probed !== undefined && (
|
|
<span className={'r' + (probed.ok ? ' ok' : ' bad')}>
|
|
{probed.ok ? `连通 · ${probed.latencyMs ?? '—'} ms` : (probed.error ?? '不通')}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</section>
|
|
|
|
<section className="tight">
|
|
<div className="g-swrow">
|
|
<label>
|
|
<input type="checkbox" checked={d.enabled} onChange={(e) => setD({ ...d, enabled: e.target.checked })} />
|
|
启用
|
|
</label>
|
|
<label>
|
|
<input type="checkbox" checked={d.systemUse} onChange={(e) => setD({ ...d, systemUse: e.target.checked })} />
|
|
系统用途
|
|
</label>
|
|
<small>系统用途:叙述性小结 / 汇报生成 / 蒸馏钩子走它</small>
|
|
</div>
|
|
</section>
|
|
|
|
{err !== undefined && <Note tone="warn">{err}</Note>}
|
|
</div>
|
|
|
|
<footer>
|
|
<button className="g-btn" onClick={onCancel}>
|
|
取消
|
|
</button>
|
|
<button className="g-btn primary" disabled={save.isPending || invalid} onClick={() => save.mutate()}>
|
|
{save.isPending ? '保存中…' : isNew ? '接入' : '保存'}
|
|
</button>
|
|
</footer>
|
|
</div>
|
|
</div>,
|
|
document.body,
|
|
);
|
|
}
|
|
|
|
/**
|
|
* 一张实例卡(2026-07-30 重做)—— 卡面只回答一句话:**这条模型现在能不能用**。
|
|
*
|
|
* 三处旧毛病一并改掉:
|
|
* · 名字被一行截断 —— 名字是这条实例的身份,宁可折行也不许截;
|
|
* · 「已绑定」是谎:种子塞过一个占位密钥,卡上写着已绑定,一自检就是 key invalid。
|
|
* 现在没钥匙就**不绑**,卡上如实写「未绑定密钥 · 不可用」;
|
|
* · 没钥匙的实例还摆一排统计格(系统用途、端点…)—— 连调都调不起来,那些数没意义。
|
|
* 未绑定时卡上只留一句判词与一枚「去配置」,绑好了才谈端点与自检。
|
|
*/
|
|
function LlmCard({ i, nav, onEdit, onDropped }: { i: LlmInstanceView; nav: Nav; onEdit: () => void; onDropped: () => void }) {
|
|
const [out, setOut] = useState<{ ok: boolean; latencyMs?: number; error?: string } | undefined>(undefined);
|
|
const [menu, setMenu] = useState<'none' | 'open' | 'drop'>('none');
|
|
const probe = useMutation({
|
|
mutationFn: () => call<{ ok: boolean; latencyMs?: number; error?: string }>(probeLlmInstanceRoute, { params: { id: i.id } }),
|
|
onSuccess: setOut,
|
|
onError: (e: unknown) => setOut({ ok: false, error: (e as { message?: string }).message ?? '自检失败' }),
|
|
});
|
|
const drop = useMutation({
|
|
mutationFn: () => call<{ ok: boolean }>(deleteLlmInstanceRoute, { params: { id: i.id } }),
|
|
onSuccess: () => {
|
|
setMenu('none');
|
|
onDropped();
|
|
},
|
|
onError: (e: unknown) => {
|
|
setOut({ ok: false, error: (e as { message?: string }).message ?? '删不掉' });
|
|
setMenu('none');
|
|
},
|
|
});
|
|
const usable = i.apiKeyBound && i.enabled;
|
|
|
|
return (
|
|
<div className={'g-mcard' + (usable ? '' : ' idle')}>
|
|
<button className="hit" aria-label={`打开 ${i.name}`} onClick={() => nav.push({ k: 'llm', id: i.id })} />
|
|
<div className="hd">
|
|
<span className="ico">
|
|
<Ico name="cpu" s={18} />
|
|
</span>
|
|
{/* 名字折行也不截 —— 它是活动里声明的那个名,看不全等于没显示 */}
|
|
<b className="nm">{i.name}</b>
|
|
<button
|
|
className={'mbtn' + (menu !== 'none' ? ' on' : '')}
|
|
aria-label="更多"
|
|
onClick={() => setMenu(menu === 'none' ? 'open' : 'none')}
|
|
>
|
|
<Ico name="more-horizontal" s={14} />
|
|
</button>
|
|
</div>
|
|
<div className="meta">
|
|
<span className="prov">{PROVIDER_LABEL[i.provider]}</span>
|
|
<span className="mdl">{i.model}</span>
|
|
</div>
|
|
|
|
{usable ? (
|
|
<div className="bar">
|
|
<span className="host" title={i.baseUrl}>
|
|
{hostOf(i.baseUrl)}
|
|
</span>
|
|
<button className="tbtn" disabled={probe.isPending} onClick={() => probe.mutate()}>
|
|
<Ico name={probe.isPending ? 'hourglass' : 'zap'} s={11} />
|
|
{probe.isPending ? '测试中' : '测试'}
|
|
</button>
|
|
</div>
|
|
) : (
|
|
/* 不可用就别摆统计:一句判词 + 一条去路,比四个假数字有用 */
|
|
<div className="bar todo">
|
|
<span>{i.apiKeyBound ? '已停用' : '未绑定密钥 · 不可用'}</span>
|
|
<button className="tbtn go" onClick={onEdit}>
|
|
去配置
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{out !== undefined && (
|
|
<div className={'probe' + (out.ok ? ' ok' : ' bad')}>
|
|
<Ico name={out.ok ? 'circle-check' : 'alert-circle'} s={12} />
|
|
{out.ok ? `连通 · ${out.latencyMs ?? '—'} ms` : (out.error ?? '不通')}
|
|
</div>
|
|
)}
|
|
|
|
{menu !== 'none' && (
|
|
<div className="menu">
|
|
{menu === 'drop' ? (
|
|
<>
|
|
<span className="q">删掉这条实例?活动里声明了它的名就删不掉</span>
|
|
<button onClick={() => setMenu('open')}>算了</button>
|
|
<button className="bad" disabled={drop.isPending} onClick={() => drop.mutate()}>
|
|
删除
|
|
</button>
|
|
</>
|
|
) : (
|
|
<>
|
|
<button
|
|
onClick={() => {
|
|
setMenu('none');
|
|
onEdit();
|
|
}}
|
|
>
|
|
<Ico name="pen-line" s={12} /> 配置
|
|
</button>
|
|
<button className="bad" onClick={() => setMenu('drop')}>
|
|
<Ico name="trash-2" s={12} /> 删除
|
|
</button>
|
|
</>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function ModelsHome({ nav }: HomeProps) {
|
|
return <SystemHome tab="llm" nav={nav} />;
|
|
}
|
|
|
|
export function SystemHome({ tab, nav }: HomeProps) {
|
|
const channels = useGovChannels();
|
|
|
|
if (tab === 'chan') {
|
|
return (
|
|
<>
|
|
<NList>
|
|
{(channels.data?.channels ?? []).map((ch) => (
|
|
<NRow
|
|
key={ch.id}
|
|
tone={ch.enabled ? 'brand' : 'mute'}
|
|
ico="mail"
|
|
title={ch.name}
|
|
sub={ch.address}
|
|
cols={[
|
|
{ k: '归属键规则', v: ch.extractCount },
|
|
{ k: '载荷映射', v: ch.mappingCount },
|
|
{ k: '地址窗口', v: <span className="g-mono">{Math.round(ch.addressWindowMs / 3600_000)}h</span> },
|
|
{ k: '默认认领岗位', v: ch.fallbackPosition ?? '—' },
|
|
]}
|
|
right={
|
|
<St tone={ch.enabled ? 'ok' : 'mute'} ico={ch.enabled ? 'circle-check' : 'power'}>
|
|
{ch.enabled ? '已启用' : '已停用'}
|
|
</St>
|
|
}
|
|
onClick={() => nav.push({ k: 'chan', id: ch.id })}
|
|
/>
|
|
))}
|
|
</NList>
|
|
</>
|
|
);
|
|
}
|
|
|
|
return <LlmShelf nav={nav} />;
|
|
}
|
|
|
|
/**
|
|
* 模型实例货架 —— **能配**:卡上直接改四元绑定、开关与密钥,还能当场自检连通。
|
|
* 从前这一屏只读:进来只看得见「密钥已绑定」,却没有一处能绑 —— 那不叫配置面。
|
|
*/
|
|
function LlmShelf({ nav }: { nav: Nav }) {
|
|
const llm = useGovLlm();
|
|
const queryClient = useQueryClient();
|
|
const [editing, setEditing] = useState<LlmDraft | null>(null);
|
|
const instances = llm.data?.instances ?? [];
|
|
|
|
return (
|
|
<QueryGate query={llm}>
|
|
<>
|
|
{editing !== null && (
|
|
<LlmDrawer
|
|
draft={editing}
|
|
onCancel={() => setEditing(null)}
|
|
onSaved={() => {
|
|
void queryClient.invalidateQueries({ queryKey: ['gov', 'llm'] });
|
|
setEditing(null);
|
|
}}
|
|
/>
|
|
)}
|
|
<div className="g-shelf">
|
|
{instances.map((i) => (
|
|
<LlmCard
|
|
key={i.id}
|
|
i={i}
|
|
nav={nav}
|
|
onEdit={() => setEditing(draftOf(i))}
|
|
onDropped={() => void queryClient.invalidateQueries({ queryKey: ['gov', 'llm'] })}
|
|
/>
|
|
))}
|
|
<button className="g-mcard ghost" onClick={() => setEditing({ ...EMPTY_DRAFT })}>
|
|
<Ico name="plus" s={18} />
|
|
接入模型
|
|
</button>
|
|
</div>
|
|
</>
|
|
</QueryGate>
|
|
);
|
|
}
|
|
|
|
export function LlmPage({ id }: { id: string }) {
|
|
const q = useGovLlm();
|
|
const queryClient = useQueryClient();
|
|
const [editing, setEditing] = useState(false);
|
|
const i = (q.data?.instances ?? []).find((x) => x.id === id);
|
|
if (i === undefined) return <Note>实例不存在。</Note>;
|
|
return (
|
|
<>
|
|
<PageHead
|
|
ico="cpu"
|
|
kicker={`LLM 实例 · ${i.provider}`}
|
|
title={i.name}
|
|
chips={
|
|
<>
|
|
<Chip ico="hash">{i.model}</Chip>
|
|
<Chip tone={i.apiKeyBound ? 'ok' : 'warn'}>{i.apiKeyBound ? '密钥已绑定' : '密钥未绑定'}</Chip>
|
|
{i.systemUse && <Chip tone="brand">系统用途</Chip>}
|
|
</>
|
|
}
|
|
desc="名称间接层:活动只声明自定义模型名,四元绑定在系统侧。换厂商、换端点、换密钥都不动活动一行代码。"
|
|
/>
|
|
{editing ? (
|
|
<LlmDrawer
|
|
draft={draftOf(i)}
|
|
onCancel={() => setEditing(false)}
|
|
onSaved={() => {
|
|
void queryClient.invalidateQueries({ queryKey: ['gov', 'llm'] });
|
|
setEditing(false);
|
|
}}
|
|
/>
|
|
) : (
|
|
<Card
|
|
ico="settings"
|
|
title="四元绑定"
|
|
extra={
|
|
<button className="g-btn xs" onClick={() => setEditing(true)}>
|
|
<Ico name="pen-line" s={11} /> 配置
|
|
</button>
|
|
}
|
|
>
|
|
<Rows
|
|
items={[
|
|
{ k: 'Provider', v: `${PROVIDER_LABEL[i.provider]} · ${i.provider}` },
|
|
{ k: 'Base URL', v: i.baseUrl, mono: true },
|
|
{ k: 'Model', v: i.model, mono: true },
|
|
{ k: 'API-Key', v: i.apiKeyBound ? '已绑定(密文存储,永不回显)' : '未绑定' },
|
|
{ k: '启用', v: i.enabled ? '启用中' : '已停用' },
|
|
{ k: '系统用途', v: i.systemUse ? '是 —— 叙述性小结 / 汇报生成 / 蒸馏钩子走它' : '否' },
|
|
]}
|
|
/>
|
|
</Card>
|
|
)}
|
|
</>
|
|
);
|
|
}
|
|
|
|
export function ChanPage({ id }: { id: string }) {
|
|
const q = useGovChannels();
|
|
const ch = (q.data?.channels ?? []).find((x) => x.id === id);
|
|
if (ch === undefined) return <Note>通道不存在。</Note>;
|
|
return (
|
|
<>
|
|
<PageHead
|
|
ico="mail"
|
|
kicker={`通道实例 · ${ch.kind}`}
|
|
title={ch.name}
|
|
chips={
|
|
<>
|
|
<Chip ico="at-sign">{ch.address}</Chip>
|
|
<Chip tone={ch.enabled ? 'ok' : 'mute'}>{ch.enabled ? '已启用' : '已停用'}</Chip>
|
|
</>
|
|
}
|
|
desc="归属解析三级逐级短路:会话线程 → 监听键 → 地址窗口;歧义或失败一律判无主——宁交人,不错投。"
|
|
/>
|
|
<Card ico="settings" title="归属与映射">
|
|
<Rows
|
|
items={[
|
|
{ k: '归属键规则', v: `${ch.extractCount} 条` },
|
|
{ k: '载荷映射', v: `${ch.mappingCount} 条` },
|
|
{ k: '地址窗口', v: `${Math.round(ch.addressWindowMs / 3600_000)} 小时`, mono: true },
|
|
{ k: '默认认领岗位', v: ch.fallbackPosition ?? '—' },
|
|
]}
|
|
/>
|
|
</Card>
|
|
</>
|
|
);
|
|
}
|
|
|