三卡头线对齐 · 题字调大 · 四钮各归其位 —— 两个「编辑」分工划清

· **头线对齐**:左右卡的头底线与中卡的**图框上边**同一水平(308/308/308)——
    中卡题下不再另画一条线,画布顶边就是它的分割线(几何:14 纸内距 + 26 题行 + 12)。
  · **题字**:9.5px → 11px,疏排大写照旧。
  · **四钮全部住标题栏右端**、同一族(图纸方钮 26 高):
      版本 → 新建 · 编辑    流程图 → 编辑    节点 · 属性 → 保存 v4
    左卡那条独立动作条(.g-veracts)整条撤掉。
  · **两个「编辑」划清**(用户定「标题栏的编辑只作用于版本记录」):
      · 版本卡的编辑 = **版本记录**:开着才出改名条、行尾钮换成删除;不碰画布。
      · 流程图卡的编辑 = 手绘画布;编辑态升为工作区级的做法就此回退 ——
        FlowFigureBlock 收回内部 state(canEdit 回来),两者互不相干。
    停用/激活照旧长在版本行尾(那是某一版的运行时开关)。

实测:头线 308/308/308;头钮 左[新建·编辑] 中[编辑] 右[保存 v4];
点版本卡「编辑」→ 行钮变删除 + 出改名条,画布进手绘 = false;点「完成」还原。
五闸绿。

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

@@ -342,11 +342,14 @@
 .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 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; }
+/* 中卡的分割线**就是画布上边**(2026-07-30 用户定):题下不再另画一条线,
+   图框顶边即那条线 —— 与左右卡头的底线同一水平(几何:14 纸内距 + 26 题行 + 11 = 51)。 */
+.g-canvas .process-doc > .view-lbl { margin: 0 0 12px; padding: 0; border-bottom: 0; height: auto; min-height: 26px; align-items: center; font-size: 11px; }
+.g-canvas .process-doc > .view-lbl > .g-ver-act { margin-left: auto; }
 .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; }
+.g-canvas .process-doc > .hero { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin: 0 0 0; }
 .g-canvas .process-doc > .hero > .fig-body { flex: 1 1 auto; min-height: 0; }
 /* 画布上的选中态（外挂类，_flow 复刻件未改）：命中层描边 = 选中框 */
 .g-canvas .flow-node-sel .djs-hit { fill: rgba(51, 112, 255, .09) !important; stroke: #3370ff !important; stroke-width: 2.5px !important; stroke-opacity: 1 !important; rx: 7px; ry: 7px; }
@@ -541,18 +544,15 @@
 /* 题头 = 图纸的 view-lbl 同款,几何**逐段照抄右边**:
    图题距纸顶 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); }
+/* 卡头:题字 11px(比原 9.5 大一档,疏排照旧);**按键一律右端起排** —— 三卡同一手法 */
+.g-vercard-h { flex: none; display: flex; align-items: center; gap: 6px; height: 19px; box-sizing: content-box; padding: 30px 18px 16px; border-bottom: 1px solid var(--sh-line); font-family: var(--sh-mono); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--sh-steel); }
+.g-vercard-h > .g-ver-act:first-of-type { margin-left: auto; }
 .g-vercard-list { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
 
 /* ── 版本条:**动作统一住顶部**(作用于正看的这一版),行里只放事实、单行排满 ── */
 /* 三卡同厚:头行内容一律 26 高(= 一枚方钮),没按钮的头也不塌 —— 三条底线同一水平 */
 .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 .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: center; gap: 8px; width: 100%; padding: 7px 8px 7px 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 .g-ver-act { height: 22px; padding: 0 8px; font-size: 10.5px; }
@@ -566,7 +566,12 @@
 .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-verrow .cnt + .g-ver-act { margin-left: 8px; }
-/* 改名条:紧贴动作条下方(点「改名」就地展开) */
+/* 版本记录编辑态:一条浅带 —— 改名钮与「行尾可删」的交代住这儿 */
+.g-veredit { flex: none; display: flex; align-items: center; gap: 8px; padding: 9px 16px; border-bottom: 1px solid var(--sh-line); background: #f9fafc; }
+.g-veredit .t { font-family: var(--sh-mono); font-size: 9px; line-height: 1.6; color: var(--sh-muted); }
+.g-veredit .g-verrename { flex: 1; padding: 0; border: 0; background: transparent; }
+
+/* 改名条:编辑态里点「改名」就地展开 */
 .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; }
 .g-verrename .t { font-family: var(--sh-mono); font-size: 8.5px; line-height: 1.7; color: var(--sh-muted); }

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

@@ -361,8 +361,11 @@ function FlowLab({
   const [ask, setAsk] = useState<{ spec: AskSpec; danger?: boolean } | undefined>(undefined);
   /** 改名就地开一个输入框(名字改的是整条流,不是某一版) */
   const [renaming, setRenaming] = useState(false);
-  /** 手绘编辑态 —— 工作区级:动作条与版本行的按钮语义都跟着它变 */
+  /**
-  const [editingGraph, setEditingGraph] = useState(false);
+   * **版本记录**的编辑态(2026-07-30):开着才出改名条、行尾钮换成删除 ——
+   * 它只管版本记录这一件事,与画布的手绘编辑(那是流程图卡自己的)互不相干。
+   */
+  const [editingVersions, setEditingVersions] = useState(false);
   const canvasRef = useRef<HTMLDivElement>(null);
 
   const nodes = graph?.nodes ?? [];
@@ -668,41 +671,47 @@ function FlowLab({
            * (v几 · 状态 · 点边计数)—— 完整显示,不在行内再展开一排小钮。
            */}
           <aside className="g-vercard g-verslim">
-            <div className="g-vercard-h">版本</div>
+            <div className="g-vercard-h">
-            {/*
+              版本
-             * 动作条只放**建改类**:新建 · 编辑 · 改名 —— 它们作用于整条流/工作区。
+              <button className="g-ver-act" onClick={askClone} disabled={cloneVersion.isPending} title="以当前版为底克隆一版">
-             * 停用/激活是**某一版**的运行时开关,落在版本行上(编辑态换成删除:
+                <Ico name="plus" s={11} /> 新建
-             * 正在改定义的人,手边该是版本管理,不是启停开关)。
-             */}
-            <div className="g-veracts">
-              <button className="g-ver-act" onClick={askClone} disabled={cloneVersion.isPending || editingGraph} title="以当前版为底克隆一版">
-                <Ico name="plus" s={10} /> 新建
               </button>
+              {/* 这枚「编辑」只作用于**版本记录**:改名与删除 —— 画布的编辑在流程图卡上 */}
               <button
-                className={'g-ver-act' + (editingGraph ? ' t-go' : '')}
+                className={'g-ver-act' + (editingVersions ? ' t-go' : '')}
-                disabled={editingGraph}
+                title={editingVersions ? '完成:行尾钮变回启停' : '编辑版本记录:改名 · 删除'}
-                title={editingGraph ? '正在绘图 —— 用画布里的 保存绘图 / 取消 收尾' : '手工绘图:活动点/审批点/起止,拖拽连线'}
+                onClick={() => {
-                onClick={() => setEditingGraph(true)}
+                  setEditingVersions(!editingVersions);
+                  setRenaming(false);
+                }}
               >
-                <Ico name="pen-line" s={10} /> {editingGraph ? '编辑中' : '编辑'}
+                <Ico name={editingVersions ? 'check' : 'pen-line'} s={11} /> {editingVersions ? '完成' : '编辑'}
-              </button>
-              <button className="g-ver-act" onClick={() => setRenaming(true)} title="改这条流的名字(所有版本同名)">
-                改名
               </button>
             </div>
-            {renaming && (
+            {editingVersions && (
-              <div className="g-verrename">
+              <div className="g-veredit">
-                <input
+                {renaming ? (
-                  className="g-input"
+                  <div className="g-verrename">
-                  autoFocus
+                    <input
-                  defaultValue={pkg.name}
+                      className="g-input"
-                  placeholder="流程名"
+                      autoFocus
-                  onKeyDown={(e) => {
+                      defaultValue={pkg.name}
-                    if (e.key === 'Enter') rename.mutate((e.target as HTMLInputElement).value.trim());
+                      placeholder="流程名"
-                    if (e.key === 'Escape') setRenaming(false);
+                      onKeyDown={(e) => {
-                  }}
+                        if (e.key === 'Enter') rename.mutate((e.target as HTMLInputElement).value.trim());
-                />
+                        if (e.key === 'Escape') setRenaming(false);
-                <span className="t">回车改名 · Esc 取消 —— 名字是这条流的身份,各版本同名</span>
+                      }}
+                    />
+                    <span className="t">回车改名 · Esc 取消 —— 名字是这条流的身份,各版本同名</span>
+                  </div>
+                ) : (
+                  <>
+                    <button className="g-ver-act" onClick={() => setRenaming(true)}>
+                      改名
+                    </button>
+                    <span className="t">行尾可删版本 —— 生效版先停用</span>
+                  </>
+                )}
               </div>
             )}
             <div className="g-vercard-list">
@@ -729,7 +738,7 @@ function FlowLab({
                     <span className="cnt">
                       {v.nodes.length} 节点 · {v.edges.length} 边
                     </span>
-                    {editingGraph ? (
+                    {editingVersions ? (
                       <button
                         className="g-ver-act t-bad"
                         disabled={isActive || dropVersion.isPending}
@@ -786,8 +795,7 @@ function FlowLab({
                    * 图上真正生效可编辑的只有**名字** —— 不传 positions,双击就不出岗位一栏。
                    * 岗位、判据这些闭环要素在**节点属性**里决定;分配到人是运营的事,这里不碰。
                    */
-                  editing={editingGraph}
+                  canEdit
-                  onEditingChange={setEditingGraph}
                   onNodeClick={(nid) => setSel(nid)}
                   /* 边不是可编辑对象 —— 点一条线,选中**发起它的那个节点**(分支归它管) */
                   onEdgeClick={(edge) => setSel(edge.from)}

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

@@ -8,7 +8,9 @@
  *
  * `FlowFigure` 保留为只读便捷壳(任务页的流程图用它)。
  */
+import { useState } from 'react';
 import type { ProcessPackage } from '@contracts';
+import { Ico } from '@ui';
 import { FlowDiagram } from './FlowDiagram.tsx';
 import { FlowEditor } from './FlowEditor.tsx';
 import type { FlowEdge, FlowGraph } from './flow-layout.ts';
@@ -21,8 +23,7 @@ export function FlowFigureBlock({
   oneLiner,
   graph,
   drilledIds,
-  editing,
+  canEdit,
-  onEditingChange,
   onNodeClick,
   onEdgeClick,
   onEditNodeText,
@@ -33,12 +34,8 @@ export function FlowFigureBlock({
   graph: FlowGraph | null;
   /** 已建立下钻内容的节点 id(删除这些节点时编辑器会二次确认) */
   drilledIds: string[];
-  /**
+  /** 可否手绘 —— 「编辑」钮住**本卡自己的标题栏右端**(画布的事归画布) */
-   * 编辑态**受控**(2026-07-30):「编辑」钮住版本卡顶部的动作条,不在图题上 ——
+  canEdit: boolean;
-   * 编辑与否是整个工作区的状态(版本行的按钮语义都跟着变),不是图卡的私事。
-   */
-  editing: boolean;
-  onEditingChange: (editing: boolean) => void;
   onNodeClick: (nodeId: string) => void;
   /** 点击连线选中边(属性卡随之切到该边);不传则边不可点 */
   onEdgeClick?: ((edge: FlowEdge) => void) | undefined;
@@ -47,9 +44,27 @@ export function FlowFigureBlock({
   /** 手工绘图:整图保存(idMap = 本次编辑会话 原id→现id,宿主用它重键下钻内容) */
   onSaveFlowGraph?: ((graph: FlowGraph, idMap: Record<string, string>) => Promise<void>) | undefined;
 }) {
+  /*
+   * 手绘编辑态是**这张卡自己的事**(2026-07-30 定):版本卡那枚「编辑」管的是
+   * 版本记录(改名 / 删除),两者互不相干 —— 所以这里收回内部 state。
+   */
+  const [editing, setEditing] = useState(false);
   return (
     <>
-      <div className="view-lbl">{editing ? '流程图 · 手工绘图' : '流程图 · 顺序'}</div>
+      <div className="view-lbl">
+        {editing ? '流程图 · 手工绘图' : '流程图 · 顺序'}
+        {canEdit && onSaveFlowGraph !== undefined && (
+          <button
+            type="button"
+            className={'g-ver-act' + (editing ? ' t-go' : '')}
+            disabled={editing}
+            title={editing ? '正在绘图 —— 用画布里的 保存绘图 / 取消 收尾' : '手工绘图:活动点/审批点/起止,拖拽连线'}
+            onClick={() => setEditing(true)}
+          >
+            <Ico name="pen-line" s={11} /> {editing ? '绘图中' : '编辑'}
+          </button>
+        )}
+      </div>
       {editing && onSaveFlowGraph !== undefined ? (
         <div className="hero">
           <div className="cap">
@@ -61,9 +76,9 @@ export function FlowFigureBlock({
             drilledIds={drilledIds}
             onSave={async (next, idMap) => {
               await onSaveFlowGraph(next, idMap);
-              onEditingChange(false);
+              setEditing(false);
             }}
-            onCancel={() => onEditingChange(false)}
+            onCancel={() => setEditing(false)}
           />
           <Legend />
         </div>