接入模型抽屉:输入框一屏装得下 —— 供应商收成一行小签,身份两栏并排

上一版量出来是真看不见:视口 577 高、抽屉身只有 442px,而「模型」落在 y=557、
「用途名」落在 y=649 —— **定义这条实例是什么的两个字段全在折线以下**,点开只看得见
供应商牌子和端点。病根是把最不决定性的东西摆得最大:5 枚 146px 宽的大牌子一个人吃掉 118px。

重排(按决定性从大到小,且一屏装得下):
  · 供应商 → **一行小签**(圆角 chip,默认端点挂 title),118px → 30px;
  · 身份 → **用途名 + 模型两栏并排**(短字段不该各占一整行);
  · 连接 → 端点 + 密钥 + 测试连接;
  · 开关收进末段,说明并进同一行。
  段距 16→13、头尾 padding 各收 3–4px,长句说明砍短。

实测同一视口:四个输入框底边 258 / 258 / 366 / 450,**全部落在可视区(≤520)**;
「测试连接」487 也在;编辑态整屏不用滚(scrollHeight ≤ clientHeight)。
保存往返、密钥留空保持原值、Esc 与遮罩关闭,全部复核过。五闸绿。

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

@@ -324,33 +324,34 @@
 @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 { flex: none; display: flex; align-items: flex-start; gap: 12px; padding: 14px 20px 12px; border-bottom: 1px solid var(--line-soft); }
+.g-drawer-p > header b { display: block; font-size: 15.5px; font-weight: 700; color: var(--ink); }
+.g-drawer-p > header span { display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.5; 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 { padding: 13px 0 3px; }
+.g-drawer-b section.tight { padding: 11px 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-b h4 { margin: 0 0 9px; 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-drawer-p > footer { flex: none; display: flex; justify-content: flex-end; gap: 8px; padding: 11px 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); }
+/* 供应商:一行小签 —— 挑一个即预填它的默认端点。
+   从前是 146px 宽的大牌子,一个人吃掉 118px 高,把下面的输入框全顶出屏幕。 */
+.g-chiprow { display: flex; flex-wrap: wrap; gap: 6px; }
+.g-chip { padding: 6px 11px; border: 1px solid var(--cline); border-radius: 15px; background: #fff; font: 500 12px/1.2 var(--sans); color: var(--ink-3); cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast); }
+.g-chip:hover { border-color: #aebdcd; color: var(--ink); }
+.g-chip.on { border-color: var(--brand); background: var(--brand-wash); color: var(--brand-deep); font-weight: 600; }
 
 /* 竖排字段:标签在上、输入居中、说明在下 —— 抽屉里一列到底,不做两栏 */
-.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-fld { display: block; margin-bottom: 11px; }
+.g-fld > span { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 600; color: var(--ink-2, var(--ink)); }
+.g-fld small { display: block; margin-top: 4px; font-size: 10.5px; line-height: 1.5; color: var(--ink-4); }
+.g-fld small.warn { color: #a83a3a; }
+/* 两栏:短字段并排 —— 一屏装得下才叫表单 */
+.g-fld2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
 .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; }
@@ -364,7 +365,8 @@
 .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 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; }
+.g-swrow small { flex: 1 1 100%; font-size: 10.5px; line-height: 1.5; color: var(--ink-4); }
 .g-swrow label { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2, var(--ink)); cursor: pointer; }
 .g-swrow input { width: 14px; height: 14px; accent-color: var(--brand); cursor: pointer; }
 

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

@@ -161,7 +161,7 @@ function LlmDrawer({
         <header>
           <div>
             <b>{isNew ? '接入模型' : `配置 ${draft.name}`}</b>
-            <span>活动只声明用途名 —— 换厂商、换型号、换密钥都不动活动一行代码</span>
+            <span>活动只声明用途名 —— 换厂商换型号不动活动一行代码</span>
           </div>
           <button className="x" aria-label="关闭" onClick={onCancel}>
             <Ico name="x" s={15} />
@@ -169,24 +169,43 @@ function LlmDrawer({
         </header>
 
         <div className="g-drawer-b">
+          {/*
+           * 排布按「决定性」从大到小,且**一屏装得下** —— 上一版把 118px 的供应商牌子摆在最前,
+           * 结果「模型」「用途名」这两个定义身份的字段掉到折线以下:点开看不见输入框。
+           * 现在:供应商收成一行小签 → 身份两栏并排 → 连接 → 开关。
+           */}
           <section>
             <h4>供应商</h4>
-            {/* 一排牌子:挑一个,端点自动填它的默认值 —— 接入面的第一步本来就是「谁家的」 */}
-            <div className="g-picktiles">
+            <div className="g-chiprow">
               {(providers.data?.providers ?? []).map((p) => (
                 <button
                   key={p.provider}
-                  className={'g-picktile' + (p.provider === d.provider ? ' on' : '')}
+                  className={'g-chip' + (p.provider === d.provider ? ' on' : '')}
+                  title={p.defaultBaseUrl === '' ? '没有默认端点,须自填' : p.defaultBaseUrl}
                   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} />}
+                  {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="如:quote-extractor" 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">
@@ -197,7 +216,7 @@ function LlmDrawer({
                 placeholder={urlNeeded ? '必填,如 https://your-gateway/v1' : '留空取默认端点'}
                 onChange={(e) => setD({ ...d, baseUrl: e.target.value })}
               />
-              <small>{urlNeeded ? '这家没有默认端点 —— 不填连不上' : '一般不用改;自建网关或代理时填你自己的地址'}</small>
+              {urlNeeded && <small className="warn">这家没有默认端点 —— 不填连不上</small>}
             </label>
             <label className="g-fld">
               <span>API Key</span>
@@ -214,7 +233,7 @@ function LlmDrawer({
                   <Ico name={showKey ? 'eye-off' : 'eye'} s={13} />
                 </button>
               </span>
-              <small>密文存治理台,永不回显、不入包、不入留痕</small>
+              <small>密文存治理台,永不回显</small>
             </label>
             <div className="g-testrow">
               <button className="g-btn xs" disabled={test.isPending || d.model.trim() === '' || urlNeeded} onClick={() => test.mutate()}>
@@ -229,18 +248,7 @@ function LlmDrawer({
             </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>
+          <section className="tight">
             <div className="g-swrow">
               <label>
                 <input type="checkbox" checked={d.enabled} onChange={(e) => setD({ ...d, enabled: e.target.checked })} />
@@ -250,8 +258,8 @@ function LlmDrawer({
                 <input type="checkbox" checked={d.systemUse} onChange={(e) => setD({ ...d, systemUse: e.target.checked })} />
                 系统用途
               </label>
+              <small>系统用途:叙述性小结 / 汇报生成 / 蒸馏钩子走它</small>
             </div>
-            <small className="g-hint">系统用途:叙述性小结 / 汇报生成 / 蒸馏钩子走它,计量入系统账</small>
           </section>
 
           {err !== undefined && <Note tone="warn">{err}</Note>}