From 51567d3b3bf10c66306fb082176ebe1958edabd1 Mon Sep 17 00:00:00 2001 From: 18628386721 <18628386721@163.com> Date: Thu, 30 Jul 2026 01:22:57 +0800 Subject: [PATCH] =?UTF-8?q?=E6=8E=A5=E5=85=A5=E6=A8=A1=E5=9E=8B=E6=8A=BD?= =?UTF-8?q?=E5=B1=89:=E8=BE=93=E5=85=A5=E6=A1=86=E4=B8=80=E5=B1=8F?= =?UTF-8?q?=E8=A3=85=E5=BE=97=E4=B8=8B=20=E2=80=94=E2=80=94=20=E4=BE=9B?= =?UTF-8?q?=E5=BA=94=E5=95=86=E6=94=B6=E6=88=90=E4=B8=80=E8=A1=8C=E5=B0=8F?= =?UTF-8?q?=E7=AD=BE,=E8=BA=AB=E4=BB=BD=E4=B8=A4=E6=A0=8F=E5=B9=B6?= =?UTF-8?q?=E6=8E=92?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 上一版量出来是真看不见:视口 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) Claude-Session: https://claude.ai/code/session_01KeDBx2PHLavbURXB8LJJ7m --- apps/web/src/app/styles/console.css | 40 +++++++------- .../features/gov-system/internal/panel.tsx | 52 +++++++++++-------- 2 files changed, 51 insertions(+), 41 deletions(-) diff --git a/apps/web/src/app/styles/console.css b/apps/web/src/app/styles/console.css index 6d8f1cf..459d943 100644 --- a/apps/web/src/app/styles/console.css +++ b/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; } diff --git a/apps/web/src/features/gov-system/internal/panel.tsx b/apps/web/src/features/gov-system/internal/panel.tsx index 62e6e2d..cdfff01 100644 --- a/apps/web/src/features/gov-system/internal/panel.tsx +++ b/apps/web/src/features/gov-system/internal/panel.tsx @@ -161,7 +161,7 @@ function LlmDrawer({
{isNew ? '接入模型' : `配置 ${draft.name}`} - 活动只声明用途名 —— 换厂商、换型号、换密钥都不动活动一行代码 + 活动只声明用途名 —— 换厂商换型号不动活动一行代码
+ {/* + * 排布按「决定性」从大到小,且**一屏装得下** —— 上一版把 118px 的供应商牌子摆在最前, + * 结果「模型」「用途名」这两个定义身份的字段掉到折线以下:点开看不见输入框。 + * 现在:供应商收成一行小签 → 身份两栏并排 → 连接 → 开关。 + */}

供应商

- {/* 一排牌子:挑一个,端点自动填它的默认值 —— 接入面的第一步本来就是「谁家的」 */} -
+
{(providers.data?.providers ?? []).map((p) => ( ))}
+
+

身份

+
+ + +
+
+

连接

-
-

型号与用途

- - +
+ 系统用途:叙述性小结 / 汇报生成 / 蒸馏钩子走它
- 系统用途:叙述性小结 / 汇报生成 / 蒸馏钩子走它,计量入系统账
{err !== undefined && {err}}