From 28adab83b0f40fbcda29f7bd531a86b5f2bfe369 Mon Sep 17 00:00:00 2001 From: 18628386721 <18628386721@163.com> Date: Tue, 28 Jul 2026 15:00:24 +0800 Subject: [PATCH] =?UTF-8?q?=E7=89=88=E6=9C=AC=E5=8D=A1=E6=94=B9=E5=9B=BE?= =?UTF-8?q?=E7=BA=B8=E9=A3=8E=20=E2=80=94=E2=80=94=20=E4=B8=8E=E5=8F=B3?= =?UTF-8?q?=E4=BE=A7=E6=B5=81=E7=A8=8B=E5=9B=BE=E5=90=8C=E4=B8=80=E5=A5=97?= =?UTF-8?q?=E8=A7=86=E8=A7=89=E8=AF=AD=E8=A8=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 版本卡原是治理台的圆角卡,跟旁边的图(flow-canvas 的图纸风)是两套语言。 改成同一张图纸的构件: · 白纸同影同角(10px 圆角、同一串投影,与 g-canvas 里的 process-doc 逐项相同) · 题头 mono 小字距大写:「VER — 版本记录」对图的「FIG — xx流程」 · 行是细线方框(方角,同图例 legend 的画法),左侧 3px 色条: 钢青 = 普通版,黄铜 + 米色底 = 生效版 —— 一眼可辨 · 「新建版本 / 激活 / 停用」按钮同为细线方框小件,黄铜色标激活类动作 · 卡尾说明也落 mono 小字,像图纸的备注栏 实测(计算样式逐项比对):背景 #fff=#fff、圆角 10px=10px、投影同串、 题头字体/字号/字距(SF Mono / 9.5px / 1.33px)全同,与图等高不变。 typecheck ✓ lint ✓ 498 测试 ✓ Co-Authored-By: Claude Opus 5 (1M context) Claude-Session: https://claude.ai/code/session_01KeDBx2PHLavbURXB8LJJ7m --- apps/web/src/app/styles/console.css | 39 +++++++++++++++---- .../features/gov-process/internal/panel.tsx | 27 ++++--------- 2 files changed, 39 insertions(+), 27 deletions(-) diff --git a/apps/web/src/app/styles/console.css b/apps/web/src/app/styles/console.css index 60eb626..e5d2a7e 100644 --- a/apps/web/src/app/styles/console.css +++ b/apps/web/src/app/styles/console.css @@ -508,14 +508,37 @@ 版本收在流程内部:左列是这条流的全部版本(恰一个生效),点谁看谁的图; 属性区从右侧窄栏挪到图下整行(g-wide),声明式契约细节再往下。 */ .g-flowlab { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 2.2fr); gap: 12px; align-items: stretch; } -/* 版本卡:与右侧的图**等高**(grid stretch),版本多了在卡内滚,不把页面撑长 */ -.g-vercard { display: flex; flex-direction: column; min-height: 0; background: var(--card); border: 1px solid var(--cline); border-radius: 13px; box-shadow: var(--cshadow); overflow: hidden; } -.g-vercard-h { flex: none; display: flex; align-items: center; gap: 8px; padding: 11px 13px; border-bottom: 1px solid var(--line-soft); font-size: 12.5px; font-weight: 800; color: var(--ink-2); } -.g-vercard-h svg { color: var(--ink-4); } -.g-vercard-h .n { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--ink-4); } -.g-vercard-h .g-ver-act { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; } -.g-vercard-list { flex: 1; min-height: 0; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; } -.g-vercard-f { flex: none; padding: 9px 13px; border-top: 1px dashed var(--line-soft); font-size: 11px; line-height: 1.6; color: var(--ink-3); } +/* 版本卡:与右侧的图**等高**(grid stretch),版本多了在卡内滚,不把页面撑长。 + 形制取**图纸风**,与右边的流程图同一套语言(flow-canvas.css 的 process-doc): + 白纸同影同角、mono 小字距大写题头(VER — 前缀对 FIG — 前缀)、钢青/黄铜色系、 + 细线方框行(方角,同图例 legend 的画法)—— 生效版行用黄铜左线 + 米色底,一眼可辨。 */ +.g-vercard { + --sh-ink: #161b22; --sh-steel: #46586a; --sh-muted: #6a7686; + --sh-line: #d8dee6; --sh-brass: #8a5f1c; --sh-brass-wash: #f7f0e0; + --sh-mono: "SF Mono", "JetBrains Mono", "Menlo", "Roboto Mono", ui-monospace, monospace; + display: flex; flex-direction: column; min-height: 0; + background: #fff; border-radius: 10px; box-shadow: var(--cshadow); overflow: hidden; +} +.g-vercard-h { flex: none; display: flex; align-items: center; gap: 10px; padding: 13px 16px 11px; border-bottom: 1px solid var(--sh-line); font-family: var(--sh-mono); font-size: 9.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--sh-steel); } +.g-vercard-h .n { color: var(--sh-muted); letter-spacing: .08em; } +.g-ver-new { margin-left: auto; font: inherit; letter-spacing: .1em; border: 1px solid var(--sh-line); border-left: 3px solid var(--sh-steel); background: #fff; color: var(--sh-steel); padding: 3px 9px; cursor: pointer; white-space: nowrap; } +.g-ver-new:hover { border-color: var(--sh-steel); } +.g-ver-new:disabled { opacity: .5; cursor: default; } +.g-vercard-list { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; } +.g-ver { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border: 1px solid var(--sh-line); border-left: 3px solid var(--sh-steel); background: #fff; cursor: pointer; font-family: var(--sh-mono); font-size: 11px; color: #3a4452; } +.g-ver:hover { border-color: #aeb9c6; } +.g-ver.on { background: #f2f5f8; border-color: #9fb0c0; } +.g-ver.live { border-left-color: var(--sh-brass); background: var(--sh-brass-wash); } +.g-ver.live.on { border-color: #cbb98d; } +.g-ver > b { font-size: 12.5px; font-weight: 700; color: var(--sh-ink); } +.g-ver .st { font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--sh-muted); } +.g-ver .st.live { color: var(--sh-brass); font-weight: 700; } +.g-ver .m { margin-left: auto; display: flex; align-items: center; gap: 8px; } +.g-ver .cnt { font-size: 9.5px; color: var(--sh-muted); white-space: nowrap; } +.g-ver-act { border: 1px solid var(--sh-line); background: #fff; padding: 2px 8px; font-family: inherit; font-size: 9.5px; letter-spacing: .1em; color: #3a4452; cursor: pointer; } +.g-ver-act:hover { border-color: #aeb9c6; } +.g-ver-act.t-go { color: var(--sh-brass); border-color: #d9c9a4; } +.g-vercard-f { flex: none; padding: 10px 16px; border-top: 1px solid var(--sh-line); font-family: var(--sh-mono); font-size: 9.5px; line-height: 1.8; color: var(--sh-muted); } .g-ver { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--card); border: 1px solid var(--cline); border-radius: 11px; cursor: pointer; font: inherit; text-align: left; transition: border-color var(--t-fast), box-shadow var(--t-fast); } .g-ver:hover { border-color: #c9d6e6; } .g-ver.on { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-wash); } diff --git a/apps/web/src/features/gov-process/internal/panel.tsx b/apps/web/src/features/gov-process/internal/panel.tsx index 20246c2..2d60ffa 100644 --- a/apps/web/src/features/gov-process/internal/panel.tsx +++ b/apps/web/src/features/gov-process/internal/panel.tsx @@ -632,11 +632,10 @@ function FlowLab({