编排工作区三卡统一:按键一族 · 标题一规 · 顶部留白一档

量出来的病根:三张头三种几何(左 30px 顶距 / 中 0 / 右 13px),按钮两种血统 ——
而且 .g-ver-act 在 CSS 里有**两份定义互相覆盖**(图纸方钮版 + 圆角芯片版),
按钮忽方忽圆的怪样就是它。

  · 按钮:立**唯一规格** —— 图纸方钮,26 高、白底细线、无圆角;主动作 t-go 黄铜、
    危动作 t-bad 赤。中卡「编辑」(原 dc2-addbtn 蓝芯片)与右卡「保存 v4」
    (原 g-ver-new 蓝芯片)全部换族;g-ver-new 与两份旧定义连 CSS 一起清掉。
  · 标题:三条头同一几何 —— 14/16/11 内距 + mono 大写题 + 底缘细线;
    头行内容一律 26 高(= 一枚方钮),没按钮的头也不塌。
    实测三条头底线 308/308/308,按钮顶 270/270,完全同线。
  · 留白:头下内容起点一律 12px(版本列表 / 图框 / 属性明细)。

五闸绿。

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

@@ -340,7 +340,10 @@
 .g-canvas { display: flex; flex-direction: column; min-height: 0; }
 /* 图自身按 aspect-ratio 缩放，整张一定看得全——纸面不再限高、不再内部滚动 */
 .g-canvas .process-desk { flex: 1; min-height: 0; height: auto; max-height: none; overflow: visible; padding: 0; background: transparent; display: flex; flex-direction: column; }
-.g-canvas .process-doc { flex: 1; min-height: 0; box-sizing: border-box; max-width: none; padding: 14px 18px 18px; border-radius: 10px; box-shadow: var(--cshadow); display: flex; flex-direction: column; }
+.g-canvas .process-doc { flex: 1; min-height: 0; box-sizing: border-box; max-width: none; padding: 14px 16px 18px; border-radius: 10px; box-shadow: var(--cshadow); display: flex; flex-direction: column; }
+/* 三卡同一条头线:纸面里的图题行与左右卡头同高同距(14 + 19 + 11 + 底线) */
+.g-canvas .process-doc > .view-lbl { margin: 0 0 12px; padding-bottom: 11px; border-bottom: 1px solid var(--sh-line, #d8dee6); height: auto; min-height: 26px; align-items: center; }
+.g-canvas .process-doc > .view-lbl .g-ver-act { margin-left: auto; }
 /* 图框吃满纸面(纸被栅格拉高时跟着长,不会浮回上面);下沿留白与纸面左右内距同为 18,
    四边等距 —— 三栏改版后左列不再有底栏,原先那条「对齐底栏顶线」的 20px 就没有对齐对象了。 */
 .g-canvas .process-doc > .hero { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin-bottom: 0; }
@@ -539,20 +542,16 @@
    图题距纸顶 30 / 题行高 19 / 题底到 hero 框顶 16(实测)。左边同为 30+19+16,
    于是标题行、按钮、底边界线三样都与右图同一水平线 —— 不是碰巧,是同一组数。 */
 .g-vercard-h { flex: none; display: flex; align-items: center; gap: 8px; height: 19px; box-sizing: content-box; padding: 30px 18px 16px; 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); }
-/* 新建按钮 = 图上「编辑」芯片(dc2-addbtn)完全同款 —— 一对动作一种长相 */
-.g-ver-new { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; border: 1px solid #b9cfe8; border-radius: 6px; background: #edf4fc; color: #23507e; font-size: 11px; line-height: 1; letter-spacing: normal; text-transform: none; padding: 3px 8px; cursor: pointer; transition: border-color .12s, box-shadow .12s; }
-.g-ver-new:hover { border-color: #4e7daf; box-shadow: 0 0 0 2px rgba(78, 125, 175, .14); }
-.g-ver-new:disabled { opacity: .5; cursor: default; box-shadow: none; }
 .g-vercard-list { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
 
 /* ── 版本条:**动作统一住顶部**(作用于正看的这一版),行里只放事实、单行排满 ── */
-.g-verslim .g-vercard-h { padding: 30px 14px 16px; gap: 4px; }
+/* 三卡同厚:头行内容一律 26 高(= 一枚方钮),没按钮的头也不塌 —— 三条底线同一水平 */
-.g-verslim .g-vercard-list { padding: 10px 12px; gap: 6px; }
+.g-verslim .g-vercard-h { height: auto; min-height: 26px; padding: 14px 16px 11px; gap: 4px; }
+.g-verslim .g-vercard-list { padding: 12px; gap: 6px; }
 /* 动作条:**四枚同款同排**(新建 · 激活/停用 · 改名 · 删除),右端注明作用对象(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; }
@@ -564,8 +563,6 @@
 .g-verrow .st { font-size: 9px; letter-spacing: .12em; color: var(--sh-muted); }
 .g-verrow .st.live { color: var(--sh-brass); font-weight: 700; }
 .g-verrow .cnt { margin-left: auto; font-size: 9.5px; color: var(--sh-muted); white-space: nowrap; }
-.g-ver-act.t-bad { color: #b0413e; border-color: #e0bcba; }
-.g-ver-act:disabled { opacity: .45; cursor: default; }
 /* 改名条:紧贴动作条下方(点「改名」就地展开) */
 .g-verrename { flex: none; display: flex; flex-direction: column; gap: 5px; padding: 9px 14px; border-bottom: 1px solid var(--sh-line); background: #f9fafc; }
 .g-verrename .g-input { height: 26px; font-size: 12px; }
@@ -580,18 +577,15 @@
 .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; }
+/* **唯一的卡上按钮规格**(2026-07-30 三卡统一):图纸方钮 —— 26 高、白底细线、
-.g-ver-act:hover { border-color: #aeb9c6; }
+   无圆角;主动作 t-go 走黄铜,危动作 t-bad 走赤。从前这里有两份定义互相覆盖
-.g-ver-act.t-go { color: var(--sh-brass); border-color: #d9c9a4; }
+   (方钮版 + 圆角芯片版),按钮怪样的病根就是它。 */
-.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-act { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px; border: 1px solid var(--sh-line, #d8dee6); background: #fff; font: 600 11px/1 var(--sans); letter-spacing: .02em; color: #3a4452; white-space: nowrap; cursor: pointer; transition: border-color var(--t-fast), color var(--t-fast); }
-.g-ver:hover { border-color: #c9d6e6; }
+.g-ver-act:hover:not(:disabled) { border-color: #aeb9c6; }
-.g-ver.on { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-wash); }
+.g-ver-act.t-go { color: var(--sh-brass, #8a5f1c); border-color: #d9c9a4; }
-.g-ver > b { font-family: var(--mono); font-size: 13px; color: var(--ink); }
+.g-ver-act.t-bad { color: #b0413e; border-color: #e0bcba; }
-.g-ver .m { margin-left: auto; display: flex; align-items: center; gap: 8px; }
+.g-ver-act:disabled { opacity: .45; cursor: default; }
-.g-ver .cnt { font-size: 10.5px; font-family: var(--mono); color: var(--ink-4); white-space: nowrap; }
+.g-ver-act:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
-.g-ver-act { border: 1px solid var(--cline); background: #fff; border-radius: 8px; padding: 3px 9px; font: inherit; font-size: 11px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
-.g-ver-act:hover { border-color: #c9d6e6; }
-.g-ver-act.t-go { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, var(--cline)); }
 /* ══ 下半区重排(2026-07-28):判据卡 = 检验单,属性卡 = 索引栏 + 明细区 ══
    两卡同排 560 定高(行高由属性卡定,判据卡 grid 拉伸补齐),仍是图纸语言;
    检验章(判据面全清的合格章)是唯一的戏眼,其余一律细线纪律。 */
@@ -607,17 +601,16 @@
 
 /* ── 节点 · 属性 → 索引栏(固定)+ 明细区(滚动)────────────────────── */
 .g-nodecard { min-height: 0; }
-.g-nodecard .g-vercard-h { height: auto; padding: 13px 18px 10px; }
+.g-nodecard .g-vercard-h { height: auto; min-height: 26px; padding: 14px 16px 11px; }
 .g-nodecard .g-vercard-h .n { margin-left: auto; letter-spacing: .1em; }
 .g-nodecard .g-vercard-h .n.dirty { color: var(--sh-brass); }
-.g-nodecard .g-vercard-h .g-ver-new { margin-left: 10px; }
+.g-nodecard .g-vercard-h .g-nodecard-b { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 0; padding: 0; overflow: hidden; }
-.g-nodecard-b { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 0; padding: 0; overflow: hidden; }
 .g-nodecard-b > .g-note { flex: none; margin: 10px 14px 0; }
 
 /* 索引栏 = 图框分度带:浅底压一层,行首竖签(节点/边 + 计数),芯片缩成分度块 */
 
 /* 明细区:卡内唯一的滚动层 —— 索引在上钉住,拉表单不丢定位 */
-.g-propsheet { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 14px 14px; }
+.g-propsheet { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 16px 14px; }
 
 /* 空态 = 图纸空页:居中十字规两行说明,不再是一条飘着的灰带 */
 .g-sheetempty { box-sizing: border-box; min-height: 100%; max-width: 480px; margin: 0 auto; padding: 20px 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; text-align: center; }

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

@@ -781,7 +781,7 @@ function FlowLab({
               节点 · 属性
               {dirty && <span className="n dirty">有改动待保存</span>}
               <button
-                className="g-ver-new"
+                className="g-ver-act t-go"
                 disabled={!dirty || save.isPending}
                 onClick={() => {
                   if (graph !== null) save.mutate({ graph, idMap: {} });

apps/web/src/shared/gov/flow/FlowFigure.tsx

@@ -51,7 +51,7 @@ export function FlowFigureBlock({
         {canEdit && onSaveFlowGraph !== undefined && !editing && (
           <button
             type="button"
-            className="dc2-addbtn"
+            className="g-ver-act"
             title="手工绘图(珊格正交:活动点/审批点/起止,拖拽连线);画布内工具栏有 取消/保存绘图"
             onClick={() => setEditing(true)}
           >