From cae4dbcb7609d922644b2e81fdf4196a4d0bccf1 Mon Sep 17 00:00:00 2001 From: 18628386721 <18628386721@163.com> Date: Wed, 29 Jul 2026 21:11:51 +0800 Subject: [PATCH] =?UTF-8?q?=E4=B8=89=E5=8D=A1=E5=A4=B4=E7=BA=BF=E5=AF=B9?= =?UTF-8?q?=E9=BD=90=20=C2=B7=20=E9=A2=98=E5=AD=97=E8=B0=83=E5=A4=A7=20?= =?UTF-8?q?=C2=B7=20=E5=9B=9B=E9=92=AE=E5=90=84=E5=BD=92=E5=85=B6=E4=BD=8D?= =?UTF-8?q?=20=E2=80=94=E2=80=94=20=E4=B8=A4=E4=B8=AA=E3=80=8C=E7=BC=96?= =?UTF-8?q?=E8=BE=91=E3=80=8D=E5=88=86=E5=B7=A5=E5=88=92=E6=B8=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit · **头线对齐**:左右卡的头底线与中卡的**图框上边**同一水平(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) Claude-Session: https://claude.ai/code/session_01KeDBx2PHLavbURXB8LJJ7m --- apps/web/src/app/styles/console.css | 23 +++--- .../features/gov-process/internal/panel.tsx | 78 ++++++++++--------- apps/web/src/shared/gov/flow/FlowFigure.tsx | 37 ++++++--- 3 files changed, 83 insertions(+), 55 deletions(-) diff --git a/apps/web/src/app/styles/console.css b/apps/web/src/app/styles/console.css index 8734e51..153ca58 100644 --- a/apps/web/src/app/styles/console.css +++ b/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); } diff --git a/apps/web/src/features/gov-process/internal/panel.tsx b/apps/web/src/features/gov-process/internal/panel.tsx index b7a068f..102b038 100644 --- a/apps/web/src/features/gov-process/internal/panel.tsx +++ b/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(null); const nodes = graph?.nodes ?? []; @@ -668,41 +671,47 @@ function FlowLab({ * (v几 · 状态 · 点边计数)—— 完整显示,不在行内再展开一排小钮。 */}