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

· **头线对齐**:左右卡的头底线与中卡的**图框上边**同一水平(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/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,
-  onEditingChange,
+  canEdit,
   onNodeClick,
   onEdgeClick,
   onEditNodeText,
@@ -33,12 +34,8 @@ export function FlowFigureBlock({
   graph: FlowGraph | null;
   /** 已建立下钻内容的节点 id(删除这些节点时编辑器会二次确认) */
   drilledIds: string[];
-  /**
-   * 编辑态**受控**(2026-07-30):「编辑」钮住版本卡顶部的动作条,不在图题上 ——
-   * 编辑与否是整个工作区的状态(版本行的按钮语义都跟着变),不是图卡的私事。
-   */
-  editing: boolean;
-  onEditingChange: (editing: boolean) => void;
+  /** 可否手绘 —— 「编辑」钮住**本卡自己的标题栏右端**(画布的事归画布) */
+  canEdit: boolean;
   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>