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

上一版量出来是真看不见:视口 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/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>}