From 4cd14d7849f3168b307a7b2fdb4f09e0fd944f0d Mon Sep 17 00:00:00 2001 From: 18628386721 <18628386721@163.com> Date: Wed, 29 Jul 2026 19:05:16 +0800 Subject: [PATCH] =?UTF-8?q?=E7=89=88=E6=9C=AC=E6=A0=8F=E4=B8=8E=E8=8A=82?= =?UTF-8?q?=E7=82=B9=E5=B1=9E=E6=80=A7=E5=86=8D=E8=B0=83:=E6=AF=94?= =?UTF-8?q?=E4=BE=8B=20=C2=B7=20=E5=9B=9B=E9=92=AE=E5=90=8C=E6=AC=BE?= =?UTF-8?q?=E5=90=8C=E6=8E=92=20=C2=B7=20=E3=80=8C=E5=AE=9E=E7=8E=B0?= =?UTF-8?q?=E3=80=8D=E6=94=B9=E6=88=90=E7=9C=8B=E5=BE=97=E5=87=BA=E8=83=BD?= =?UTF-8?q?=E7=82=B9=E7=9A=84=E7=9C=9F=E9=80=89=E6=8B=A9=E5=99=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit · 比例:左栏 196–224 → 228–268(版本行整行排满),右栏 320–1.25fr → 264–1fr(节点属性收窄)。 · 四枚按键(新建 · 激活/停用 · 改名 · 删除)**同款同排**收进顶部动作条 —— 新建不再另作一枚蓝芯片挂在头上;白字不换行,右端 v 号去掉(选中行自己亮着)。 右栏头顺带收掉闲置提示「点节点就地填写」(空态文案已交代),只留脏态。 · 「实现」下拉从无框文字改成**真控件**:有边、有底、有箭头、焦点有落点 —— 无框下拉在窄轨里读成一行普通文字,人不知道能点,这是可用性缺陷不是审美偏好。 实测:7 个选项、换选即入脏态,保存路径原样。 五闸绿。 Co-Authored-By: Claude Opus 5 (1M context) Claude-Session: https://claude.ai/code/session_01KeDBx2PHLavbURXB8LJJ7m --- apps/web/src/app/styles/console.css | 16 ++++++++++++---- .../src/features/gov-process/internal/panel.tsx | 17 +++++++---------- 2 files changed, 19 insertions(+), 14 deletions(-) diff --git a/apps/web/src/app/styles/console.css b/apps/web/src/app/styles/console.css index 40cdfc0..56e8a91 100644 --- a/apps/web/src/app/styles/console.css +++ b/apps/web/src/app/styles/console.css @@ -521,7 +521,7 @@ 属性区从右侧窄栏挪到图下整行(g-wide),声明式契约细节再往下。 */ /* 三栏(2026-07-30):左**窄**版本条 · 中流程图 · 右节点属性。 右栏用包壳绝对定位 —— 行高由中栏的图定,属性长了在卡内滚,不把图拉长。 */ -.g-flowlab { display: grid; grid-template-columns: minmax(196px, 224px) minmax(0, 2.5fr) minmax(320px, 1.25fr); gap: 12px; align-items: stretch; } +.g-flowlab { display: grid; grid-template-columns: minmax(228px, 268px) minmax(0, 2.8fr) minmax(264px, 1fr); gap: 12px; align-items: stretch; } .g-nodewrap { position: relative; min-height: 0; } .g-nodewrap > .g-nodecard { position: absolute; inset: 0; height: auto; } /* 版本卡:与右侧的图**等高**(grid stretch),版本多了在卡内滚,不把页面撑长。 @@ -548,9 +548,11 @@ /* ── 版本条:**动作统一住顶部**(作用于正看的这一版),行里只放事实、单行排满 ── */ .g-verslim .g-vercard-h { padding: 30px 14px 16px; gap: 4px; } .g-verslim .g-vercard-list { padding: 10px 12px; gap: 6px; } -/* 动作条:一排小钮 + 右端注明作用对象(v几)—— 换版看,条上的钮跟着换语义 */ -.g-veracts { flex: none; display: flex; align-items: center; gap: 5px; padding: 9px 14px; border-bottom: 1px solid var(--sh-line); background: #f9fafc; } -.g-veracts .g-ver-act { padding: 4px 10px; letter-spacing: .06em; } +/* 动作条:**四枚同款同排**(新建 · 激活/停用 · 改名 · 删除),右端注明作用对象(v几)—— + 换版看,条上的钮跟着换语义;新建不再另作一枚蓝芯片挂在头上 */ +.g-veracts { flex: none; display: flex; align-items: center; gap: 6px; padding: 9px 14px; border-bottom: 1px solid var(--sh-line); background: #f9fafc; } +.g-veracts { flex-wrap: nowrap; } +.g-veracts .g-ver-act { flex: none; display: inline-flex; align-items: center; gap: 3px; padding: 5px 9px; letter-spacing: .02em; white-space: nowrap; } .g-veracts .who { margin-left: auto; font: 600 9.5px/1 var(--sh-mono); letter-spacing: .1em; color: var(--sh-muted); } .g-verrow { display: flex; align-items: baseline; gap: 8px; width: 100%; padding: 9px 11px; border: 1px solid var(--sh-line); border-left: 3px solid var(--sh-steel); background: #fff; font-family: var(--sh-mono); font-size: 10px; color: #3a4452; text-align: left; cursor: pointer; transition: border-color var(--t-fast); } .g-verrow:hover { border-color: #aeb9c6; } @@ -662,6 +664,12 @@ .g-tbin:focus { outline: 0; } .g-tbrow:focus-within, .g-tbedge:focus-within { border-bottom-color: #4e7daf; } .g-tbin.sel { appearance: none; padding-right: 18px; background: transparent url('data:image/svg+xml;utf8,') no-repeat right 2px center; cursor: pointer; } +/* 「实现」选择器:**真控件** —— 无框下拉在窄轨里读成一行普通文字,人不知道能点。 + 有边有底有箭头,一眼是个选择框;这是节点属性里唯一要「选东西」的控件,就它带框。 */ +.g-tbsel { width: 100%; box-sizing: border-box; height: 32px; padding: 0 26px 0 10px; border: 1px solid #b9c4d2; border-radius: 6px; background: #fff url('data:image/svg+xml;utf8,') no-repeat right 9px center; appearance: none; color: var(--sh-ink); font: inherit; font-size: 12.5px; cursor: pointer; transition: border-color var(--t-fast), box-shadow var(--t-fast); } +.g-tbsel:hover { border-color: #8fa3b8; } +.g-tbsel:focus-visible { outline: 0; border-color: #4e7daf; box-shadow: 0 0 0 2px rgba(78, 125, 175, .18); } + .g-tblink { display: inline-flex; align-items: center; gap: 4px; border: 0; background: transparent; padding: 0; font-size: 11px; color: #23507e; cursor: pointer; } .g-tblink:hover { text-decoration: underline; } .g-tbrow .g-seg { align-self: center; } diff --git a/apps/web/src/features/gov-process/internal/panel.tsx b/apps/web/src/features/gov-process/internal/panel.tsx index a4504bb..49b14e6 100644 --- a/apps/web/src/features/gov-process/internal/panel.tsx +++ b/apps/web/src/features/gov-process/internal/panel.tsx @@ -666,14 +666,12 @@ function FlowLab({ * (v几 · 状态 · 点边计数)—— 完整显示,不在行内再展开一排小钮。 */}