流程图图例收进图框下沿 —— 删掉「责任」那两格

图例本来是画布下面一个带边框、带钢青左线、带灰底的独立盒子,读起来像图之外
又摆了一块内容。工程图的图例画在图框**里**,不另起一张纸 —— 挪进 .hero,
做成与顶部图签(.cap)对称的一条框内小字:细线横贯整框(负外边距抵掉框内距),
左右 16px 与图签的字对齐同一竖线,mono 9.5px 同一记法。展示态与编辑态共用。

「责任 · 右上角标 责任人」删了:编排**不带岗位**(负责人是运营时分配的),
图上早就不画责任人角标 —— 图例里留着是指着一件不存在的东西。

顺带两处对账:
  · 图签右格原本写「蓝 = 活动点 · 琥珀 = 审批点 · 线标 = 边号」——
    图例进框后这就是同一框内说两遍(蓝/琥珀本来就由图例的图标自己带);
    改成说这张图**是什么**:「顺序与条件 —— 数据按字段名流动」,
    边号那句并进图例的「顺序流 · 线标即边号」。
  · oneLiner 的兜底文案还写着「活动 · 网关 · 顺序流」—— 网关早已去节点化,改掉。

图例小图标从 vertical-align + translateY(-1px) 的手抬改成 flex 居中(行已是 inline-flex)。

五闸绿。

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

@@ -3,7 +3,7 @@
  *
  * `FlowFigureBlock` 自原型 `HostExample` 平移:区块小标题右侧「编辑」芯片进手绘编辑器
  * (FlowEditor,画布内工具栏含 取消/保存绘图);展示态 hero/cap 框 + FlowDiagram
- * (单击节点下钻/选中、双击活动就地改文字);图例贴在流程图正下方。
+ * (单击节点下钻/选中、双击活动就地改文字);图例收在**图框下沿**(见 `Legend`)。
  * 必须包在 `.process-desk > .process-doc` 纸面容器内(flow-canvas.css 规则 scoped 到它)。
  *
  * `FlowFigure` 保留为只读便捷壳(任务页的流程图用它)。
@@ -78,12 +78,13 @@ export function FlowFigureBlock({
             }}
             onCancel={() => setEditing(false)}
           />
+          <Legend />
         </div>
       ) : (
         <div className="hero">
           <div className="cap">
             <span>FIG — {title}流程</span>
-            <span>{oneLiner ?? '活动 · 网关 · 顺序流'}</span>
+            <span>{oneLiner ?? '活动点 · 审批点 · 顺序流'}</span>
           </div>
           <div className="fig-body">
             <FlowDiagram
@@ -96,30 +97,37 @@ export function FlowFigureBlock({
               ariaLabel={`${title}业务流程图`}
             />
           </div>
+          <Legend />
         </div>
       )}
-
-      {/* 图例贴在流程图正下方,图标与绘图工具(元素盘)同款 SVG */}
-      <div className="legend">
-        <span>
-          <b>图例</b>
-        </span>
-        <span><i className="lg-i fe-pi-start" aria-hidden /> 起始</span>
-        <span><i className="lg-i fe-pi-end" aria-hidden /> 结束</span>
-        {/* 节点只分活动点/审批点 —— 标准/案例是实现方式,不进编排面的词汇表 */}
-        <span><i className="lg-i fe-pi-sop" aria-hidden /> 活动点</span>
-        <span><i className="lg-i fe-pi-approval" aria-hidden /> 审批点</span>
-        <span><i className="lg-i lg-flow" aria-hidden /> 顺序流</span>
-        <span className="sep">|</span>
-        <span>
-          <b>责任</b>
-        </span>
-        <span>右上角标 责任人</span>
-      </div>
     </>
   );
 }
 
+/**
+ * 记号图例 —— 图框自己的**下沿**:与顶部图签(cap)对称的一条框内小字。
+ *
+ * 工程图的图例本来就画在图框里,不另起一张纸;从前它是画布下方一个带边框的独立盒子,
+ * 读起来像图之外的第二块内容 —— 挪进框内,一眼看出它说的就是这张图上的记号。
+ * 图标与绘图工具(元素盘)同款 SVG,蓝/琥珀由图标自己带,不必再写一遍「蓝 = …」。
+ *
+ * 「责任」那两格删了:编排**不带岗位**(负责人是运营时分配的),
+ * 图上早已不画责任人角标 —— 图例里留着就是指着一件不存在的东西。
+ */
+function Legend() {
+  return (
+    <div className="legend">
+      <b>图例</b>
+      <span><i className="lg-i fe-pi-start" aria-hidden /> 起始</span>
+      <span><i className="lg-i fe-pi-end" aria-hidden /> 结束</span>
+      {/* 节点只分活动点/审批点 —— 标准/案例是实现方式,不进编排面的词汇表 */}
+      <span><i className="lg-i fe-pi-sop" aria-hidden /> 活动点</span>
+      <span><i className="lg-i fe-pi-approval" aria-hidden /> 审批点</span>
+      <span><i className="lg-i lg-flow" aria-hidden /> 顺序流 · 线标即边号</span>
+    </div>
+  );
+}
+
 /** 只读壳:流程包 → 图 → 画(任务页 / 工作流实例页用) */
 export function FlowFigure({
   pkg,

apps/web/src/shared/gov/flow/flow-canvas.css

@@ -62,26 +62,35 @@
   color: var(--brass-deep);
 }
 
-/* ---------- 记号图例 ---------- */
-.process-doc .legend {
+/* ---------- 记号图例:图框的下沿 ----------
+   与顶部图签(.cap)对称的一条框内小字 —— 工程图的图例画在图框里,不另起一张纸。
+   细线横贯整个框宽(靠负外边距抵掉 .hero 的左右内距),读起来是这张图的一部分,
+   而不是画布下面又摆了一个盒子。 */
+.process-doc .hero .legend {
   display: flex;
   flex-wrap: wrap;
-  gap: 5px 16px;
+  align-items: center;
+  gap: 4px 15px;
+  margin: 9px -12px 0;
+  /* 左右 16px = 图签的 12(框内距)+ 4(图签自留) —— 两条边沿的字对齐同一竖线 */
+  padding: 7px 16px 2px;
+  border-top: 1px solid var(--grid);
   font-family: var(--mono);
   font-size: 9.5px;
-  color: var(--ink-soft);
-  border: 1px solid var(--line);
-  border-left: 3px solid var(--steel);
-  background: #f7f9fb;
-  padding: 9px 14px;
-  margin: 12px 0 2px;
+  line-height: 1.5;
+  color: var(--muted);
 }
-.process-doc .legend b {
-  color: var(--ink);
+/* 前导墨签「图例」:与图签同一记法(疏排小字),点明这一行说的是记号 */
+.process-doc .hero .legend b {
   font-weight: 600;
+  letter-spacing: 0.1em;
+  color: var(--steel);
 }
-.process-doc .legend .sep {
-  color: var(--line);
+.process-doc .hero .legend span {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  white-space: nowrap;
 }
 
 /* ---------- 框图容器(hero/cap)+ 只读画布(flow-diagram) ---------- */
@@ -556,16 +565,14 @@
   background-size: 14px 14px;
 }
 
-/* 图例小图标:与元素盘同一套 SVG,缩排进文字行(全局垂直居中契约)。 */
+/* 图例小图标:与元素盘同一套 SVG,缩排进文字行(行内由 flex 居中,不必再手抬 1px)。 */
 .process-doc .legend .lg-i {
-  display: inline-block;
+  flex: none;
   width: 20px;
   height: 14px;
   background-repeat: no-repeat;
   background-position: center;
   background-size: auto 12px;
-  vertical-align: middle;
-  transform: translateY(-1px);
 }
 .process-doc .legend .lg-i.fe-pi-sop,
 .process-doc .legend .lg-i.fe-pi-case,