接入模型改成右侧抽屉:先挑供应商、再填连接、当场测连通(且只测不存)

上一版是把字段倒在地上:整页宽的内联卡、输入框拉到 1100px、动作钮掉出屏幕。
照模型接入面的通行做法重排 —— 520px 右侧抽屉,头固定 / 身滚动 / 底动作栏常驻:

  ① **供应商**:一排可点的牌子,挑中即预填它的默认端点(没有默认的标「端点自填」);
  ② **连接**:API 端点 + API Key(密码框带显示切换),下面就是「测试连接」;
  ③ **型号与用途**:模型(厂商侧型号名)+ 用途名(活动里声明的那个)+ 两枚开关。
  遮罩点击与 Esc 都关得掉 —— 抽屉盖住整屏,不给键盘出路是把人关在里面。

**默认端点从服务端取**(新 `GET /api/gov/llm/providers`):前端不自带一份 URL 表 ——
那种表迟早与 provider 档案漂移,而漂移那天没人会发现(端点错了只表现为「连不上」)。

**「测试连接」只测不存**(新 `POST /api/gov/llm/probe` + `llm.probeDraft`):
拿表单上正填的四元真发一次最小调用,一个字节不落库;密钥留空则取该实例已存的密文,
改端点、换型号不必重打钥匙。上一版是「先存再试」—— 人只想知道钥匙对不对,
结果端点被改了、实例被建了,点取消也收不回来。实测:改错端点后测试,
库里 instances 逐字节未变(测过 before/after 全等)。

顺带补 `eye-off` 图标。五闸绿。

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01KeDBx2PHLavbURXB8LJJ7m

apps/web/src/app/styles/console.css

@@ -314,6 +314,55 @@
 .g-fcard .probe { position: relative; z-index: 1; display: flex; align-items: flex-start; gap: 6px; padding: 8px 10px; border-radius: 9px; background: #f2f7f4; font: 500 11px/1.5 var(--sans); color: #0c8154; }
 .g-fcard .probe.bad { background: #fdf3f3; color: #a83a3a; }
 .g-fcard .probe svg { flex: none; margin-top: 2px; }
+/* ── 抽屉:一次性的配置岔路(接入模型 / 改绑定)——————————————————
+   右侧 520px 定宽面板 + 遮罩;头固定、身滚动、底动作栏常驻。
+   配置不该把货架顶下去:做完就该回到原地,所以是抽屉不是页内表单。 */
+.g-drawer { position: fixed; inset: 0; z-index: 60; display: flex; justify-content: flex-end; }
+.g-drawer-veil { flex: 1; border: 0; padding: 0; background: rgba(19, 28, 38, .38); backdrop-filter: blur(1.5px); cursor: default; animation: g-fade .16s ease-out; }
+.g-drawer-p { position: relative; display: flex; flex-direction: column; width: min(520px, 100vw); background: var(--card); border-left: 1px solid var(--cline); box-shadow: -18px 0 44px -24px rgba(19, 28, 38, .5); animation: g-slidein .2s cubic-bezier(.2, .8, .2, 1); }
+@keyframes g-fade { from { opacity: 0; } }
+@keyframes g-slidein { from { transform: translateX(24px); opacity: .6; } }
+@media (prefers-reduced-motion: reduce) { .g-drawer-veil, .g-drawer-p { animation: none; } }
+
+.g-drawer-p > header { flex: none; display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px 15px; border-bottom: 1px solid var(--line-soft); }
+.g-drawer-p > header b { display: block; font-size: 16px; font-weight: 700; color: var(--ink); }
+.g-drawer-p > header span { display: block; margin-top: 4px; font-size: 11.5px; line-height: 1.6; color: var(--ink-4); }
+.g-drawer-p > header .x { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--ink-4); cursor: pointer; }
+.g-drawer-p > header .x:hover { border-color: var(--cline); background: #f3f6fa; color: var(--ink); }
+
+.g-drawer-b { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 20px 18px; }
+.g-drawer-b section { padding: 16px 0 4px; }
+.g-drawer-b section + section { border-top: 1px solid var(--line-soft); }
+.g-drawer-b h4 { margin: 0 0 12px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); }
+
+.g-drawer-p > footer { flex: none; display: flex; justify-content: flex-end; gap: 8px; padding: 13px 20px; border-top: 1px solid var(--line-soft); background: #fbfcfd; }
+
+/* 供应商牌子:挑一个即预填它的默认端点 —— 接入面的第一步本来就是「谁家的」 */
+.g-picktiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); gap: 8px; }
+.g-picktile { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 10px 11px; border: 1px solid var(--cline); border-radius: 9px; background: #fff; text-align: left; cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast); }
+.g-picktile:hover { border-color: #aebdcd; }
+.g-picktile.on { border-color: var(--brand); background: var(--brand-wash); }
+.g-picktile .n { font-size: 12.5px; font-weight: 600; color: var(--ink); }
+.g-picktile .s { font: 500 10px/1.3 var(--mono); color: var(--ink-4); }
+.g-picktile.on .s { color: var(--brand-deep); }
+.g-picktile svg { position: absolute; right: 9px; top: 9px; color: var(--brand); }
+
+/* 竖排字段:标签在上、输入居中、说明在下 —— 抽屉里一列到底,不做两栏 */
+.g-fld { display: block; margin-bottom: 14px; }
+.g-fld > span { display: block; margin-bottom: 5px; font-size: 12px; font-weight: 600; color: var(--ink-2, var(--ink)); }
+.g-fld small { display: block; margin-top: 5px; font-size: 10.5px; line-height: 1.6; color: var(--ink-4); }
+.g-inwrap { position: relative; display: block; }
+.g-inwrap .g-input { width: 100%; padding-right: 34px; }
+.g-inwrap .eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; display: grid; place-items: center; border: 0; border-radius: 6px; background: transparent; color: var(--ink-4); cursor: pointer; }
+.g-inwrap .eye:hover { background: #f1f4f8; color: var(--ink); }
+
+/* 测试连接:钮 + 读数同一行 —— 填完密钥当场知道通不通 */
+.g-testrow { display: flex; align-items: center; gap: 10px; margin: 2px 0 6px; }
+.g-testrow .r { min-width: 0; font-size: 11px; line-height: 1.5; color: var(--ink-4); }
+.g-testrow .r.ok { color: #0c8154; font-weight: 600; }
+.g-testrow .r.bad { color: #a83a3a; }
+.g-hint { display: block; margin-top: 8px; font-size: 10.5px; line-height: 1.6; color: var(--ink-4); }
+
 /* 开关行:两枚复选框并排 —— 表单里唯一的横排 */
 .g-swrow { display: flex; align-items: center; gap: 18px; }
 .g-swrow label { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2, var(--ink)); cursor: pointer; }

apps/web/src/features/gov-system/internal/panel.tsx

@@ -5,18 +5,15 @@
  * DOM 结构、类名(`g-*` + 色调 `t-*`)与文案原样保留,mock 常量换成服务端投影(README 平移规则 1/2/4)。
  * 区首页只负责导航,治理动作一律落在下钻详情页的**就地确认带**(影响预览三必答)。
  */
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import type { LlmInstanceView, LlmProvider } from '@contracts';
-import { LLM_PROVIDERS, probeLlmInstanceRoute, upsertLlmInstanceRoute } from '@contracts';
+import { probeLlmDraftRoute, probeLlmInstanceRoute, upsertLlmInstanceRoute } from '@contracts';
 import { call } from '@web-shared/typed-fetch.ts';
 import { Ico } from '@web-shared/Ico.tsx';
-import { Acts, Card, Chip, Field, NList, NRow, Note, PageHead, QueryGate, Rows, St } from '@web-shared/gov/primitives.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,
-} from '@web-shared/gov/gov-api.ts';
+import { useGovChannels, useGovLlm, useGovLlmProviders } from '@web-shared/gov/gov-api.ts';
 
 export type HomeProps = { tab: string; nav: Nav };
 
@@ -75,12 +72,15 @@ const EMPTY_DRAFT: LlmDraft = {
 };
 
 /**
- * 实例配置表单 —— 四元绑定就在这里改(Provider / 端点 / 型号 / 密钥)+ 两枚开关。
+ * 接入模型 —— **右侧抽屉**,照模型接入面的通行做法排:
+ * ① 先挑供应商(一排可点的牌子,选中即预填它的默认端点)
+ * ② 再填连接(端点 + 密钥,密钥旁边就是「测试连接」—— 填完当场知道通不通)
+ * ③ 最后是型号与用途。底部一条固定动作栏。
  *
- * **密钥只写不读**(OS 7.3 凭证隔离):服务端只回「绑没绑」,永不回显明文;
- * 所以这一格留空的意思是「保持原值」,不是「清空」。
+ * 为什么是抽屉不是页内卡:配置是**一次性的岔路**,做完就该回到货架。
+ * 从前那版把表单摊在页面上,输入框拉到 1100px 宽、动作钮掉出屏幕 —— 那不是表单,是把字段倒在地上。
  */
-function LlmForm({
+function LlmDrawer({
   draft,
   onCancel,
   onSaved,
@@ -90,10 +90,32 @@ function LlmForm({
   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 = d.provider === 'openai-compatible' && d.baseUrl.trim() === '';
+  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, {
@@ -112,71 +134,139 @@ function LlmForm({
     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 ?? '测试失败' }),
+  });
+
   return (
-    <Card ico="cpu" title={isNew ? '新建模型实例' : `配置 ${draft.name}`}>
-      <div className="g-newflow">
-        <Field k="自定义模型名" hint="活动只声明这个名 —— 换厂商换型号都不动活动一行代码">
-          <input className="g-input" value={d.name} placeholder="如:quote-extractor" onChange={(e) => setD({ ...d, name: e.target.value })} />
-        </Field>
-        <Field k="Provider" hint="决定端点默认值与结构化出参的口径">
-          <select className="g-tbsel" value={d.provider} onChange={(e) => setD({ ...d, provider: e.target.value as LlmProvider })}>
-            {LLM_PROVIDERS.map((p) => (
-              <option key={p} value={p}>
-                {PROVIDER_LABEL[p]} · {p}
-              </option>
-            ))}
-          </select>
-        </Field>
-        <Field k="Base URL" hint="留空 = 取该 Provider 的默认端点;OpenAI 兼容端点没有默认,必须自填">
-          <input
-            className="g-input mono"
-            value={d.baseUrl}
-            placeholder={d.provider === 'openai-compatible' ? '必填,如 https://your-gateway/v1' : '留空取默认端点'}
-            onChange={(e) => setD({ ...d, baseUrl: e.target.value })}
-          />
-        </Field>
-        <Field k="Model" hint="厂商侧的型号名,如 deepseek-chat">
-          <input className="g-input mono" value={d.model} placeholder="如:deepseek-chat" onChange={(e) => setD({ ...d, model: e.target.value })} />
-        </Field>
-        <Field k="API-Key" hint="只写不读:密文存治理台,永不回显;留空 = 保持原值">
-          <input
-            className="g-input mono"
-            type="password"
-            autoComplete="off"
-            value={d.apiKey}
-            placeholder={isNew ? '粘贴密钥' : '留空保持原值'}
-            onChange={(e) => setD({ ...d, apiKey: e.target.value })}
-          />
-        </Field>
-        <Field k="开关" hint="系统用途:叙述性小结 / 汇报生成 / 蒸馏钩子走它,计量入系统账">
-          <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>
+    <div className="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>
-        </Field>
-        {urlNeeded && <Note tone="warn">OpenAI 兼容端点没有默认地址 —— 不填 Base URL,这个实例连不上。</Note>}
-        {err !== undefined && <Note tone="warn">{err}</Note>}
-        <Acts
-          align="end"
-          items={[
-            { label: '取消', ico: 'x', onClick: onCancel },
-            {
-              label: save.isPending ? '保存中…' : '保存',
-              ico: 'send',
-              primary: true,
-              disabled: save.isPending || d.name.trim() === '' || d.model.trim() === '' || urlNeeded,
-              onClick: () => save.mutate(),
-            },
-          ]}
-        />
+          <button className="x" aria-label="关闭" onClick={onCancel}>
+            <Ico name="x" s={15} />
+          </button>
+        </header>
+
+        <div className="g-drawer-b">
+          <section>
+            <h4>供应商</h4>
+            {/* 一排牌子:挑一个,端点自动填它的默认值 —— 接入面的第一步本来就是「谁家的」 */}
+            <div className="g-picktiles">
+              {(providers.data?.providers ?? []).map((p) => (
+                <button
+                  key={p.provider}
+                  className={'g-picktile' + (p.provider === d.provider ? ' on' : '')}
+                  onClick={() => pickProvider(p.provider, p.defaultBaseUrl)}
+                >
+                  <span className="n">{p.label}</span>
+                  <span className="s">{p.defaultBaseUrl === '' ? '端点自填' : p.provider}</span>
+                  {p.provider === d.provider && <Ico name="circle-check" s={13} />}
+                </button>
+              ))}
+            </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 })}
+              />
+              <small>{urlNeeded ? '这家没有默认端点 —— 不填连不上' : '一般不用改;自建网关或代理时填你自己的地址'}</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={isNew ? '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>密文存治理台,永不回显、不入包、不入留痕</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>
+            <h4>型号与用途</h4>
+            <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>
+            <label className="g-fld">
+              <span>用途名</span>
+              <input className="g-input" value={d.name} placeholder="如:quote-extractor" onChange={(e) => setD({ ...d, name: e.target.value })} />
+              <small>活动里声明的就是这个名 —— 起个说得清用途的名字,不要写型号</small>
+            </label>
+            <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>
+            </div>
+            <small className="g-hint">系统用途:叙述性小结 / 汇报生成 / 蒸馏钩子走它,计量入系统账</small>
+          </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>
-    </Card>
+    </div>
   );
 }
 
@@ -298,7 +388,7 @@ function LlmShelf({ nav }: { nav: Nav }) {
     <QueryGate query={llm}>
       <>
         {editing !== null && (
-          <LlmForm
+          <LlmDrawer
             draft={editing}
             onCancel={() => setEditing(null)}
             onSaved={() => {
@@ -343,7 +433,7 @@ export function LlmPage({ id }: { id: string }) {
         desc="名称间接层:活动只声明自定义模型名,四元绑定在系统侧。换厂商、换端点、换密钥都不动活动一行代码。"
       />
       {editing ? (
-        <LlmForm
+        <LlmDrawer
           draft={draftOf(i)}
           onCancel={() => setEditing(false)}
           onSaved={() => {

apps/web/src/shared/gov/gov-api.ts

@@ -40,6 +40,7 @@ import {
   listGrantsRoute,
   listLedgerObjectsRoute,
   listLlmInstancesRoute,
+  listLlmProvidersRoute,
   listProcessPackagesRoute,
   listStaffRoute,
   listToolsRoute,
@@ -158,6 +159,15 @@ export const useGovMetrics = (): UseQueryResult<GovMetrics> =>
 export const useGovChannels = (): UseQueryResult<GovChannels> =>
   useQuery({ queryKey: ['gov', 'channels'], queryFn: () => call<GovChannels>(listChannelsRoute) });
 
+/** Provider 档案 —— 建实例表单预填默认端点用;一次取,基本不变 */
+export type GovLlmProviders = { providers: ReadonlyArray<{ provider: string; label: string; defaultBaseUrl: string; structuredOutput: string }> };
+export const useGovLlmProviders = (): UseQueryResult<GovLlmProviders> =>
+  useQuery({
+    queryKey: ['gov', 'llm-providers'],
+    queryFn: () => call<GovLlmProviders>(listLlmProvidersRoute),
+    staleTime: 10 * 60_000,
+  });
+
 export const useGovLlm = (): UseQueryResult<GovLlm> =>
   useQuery({ queryKey: ['gov', 'llm'], queryFn: () => call<GovLlm>(listLlmInstancesRoute) });