版本卡改图纸风 —— 与右侧流程图同一套视觉语言

版本卡原是治理台的圆角卡,跟旁边的图(flow-canvas 的图纸风)是两套语言。
改成同一张图纸的构件:

  · 白纸同影同角(10px 圆角、同一串投影,与 g-canvas 里的 process-doc 逐项相同)
  · 题头 mono 小字距大写:「VER — 版本记录」对图的「FIG — xx流程」
  · 行是细线方框(方角,同图例 legend 的画法),左侧 3px 色条:
    钢青 = 普通版,黄铜 + 米色底 = 生效版 —— 一眼可辨
  · 「新建版本 / 激活 / 停用」按钮同为细线方框小件,黄铜色标激活类动作
  · 卡尾说明也落 mono 小字,像图纸的备注栏

实测(计算样式逐项比对):背景 #fff=#fff、圆角 10px=10px、投影同串、
题头字体/字号/字距(SF Mono / 9.5px / 1.33px)全同,与图等高不变。

typecheck ✓ lint ✓ 498 测试 ✓

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01KeDBx2PHLavbURXB8LJJ7m
This commit is contained in:
2026-07-28 15:00:24 +08:00
co-authored by Claude Opus 5
parent 8fe9ef8ecb
commit 28adab83b0
2 changed files with 39 additions and 27 deletions
@@ -632,11 +632,10 @@ function FlowLab({
<div className="g-flowlab">
<aside className="g-vercard">
<div className="g-vercard-h">
<Ico name="history" s={13} />
<b>版本</b>
<span className="n">{versions.length}</span>
<button className="g-ver-act t-go" onClick={askClone} disabled={cloneVersion.isPending}>
<Ico name="plus" s={12} /> 新建版本
<span className="t">VER — 版本记录</span>
<span className="n">{versions.length} 版</span>
<button className="g-ver-new" onClick={askClone} disabled={cloneVersion.isPending}>
+ 新建版本
</button>
</div>
<div className="g-vercard-list">
@@ -646,7 +645,7 @@ function FlowLab({
return (
<div
key={v.version}
className={'g-ver' + (isShown ? ' on' : '')}
className={'g-ver' + (isShown ? ' on' : '') + (isActive ? ' live' : '')}
role="button"
tabIndex={0}
onClick={() => onPick(v.version)}
@@ -655,18 +654,10 @@ function FlowLab({
}}
>
<b>v{v.version}</b>
{isActive ? (
<St tone="ok" ico="circle-check">
生效中
</St>
) : (
<St tone="mute" ico="pause">
停用
</St>
)}
<span className={'st' + (isActive ? ' live' : '')}>{isActive ? '生效中' : '停用'}</span>
<span className="m">
<span className="cnt">
{v.nodes.length} 节点 · {v.edges.length} 边
{v.nodes.length}节点·{v.edges.length}边
</span>
{isActive ? (
<button
@@ -694,9 +685,7 @@ function FlowLab({
);
})}
</div>
<div className="g-vercard-f">
恰一个生效版本;在途工作流按启动时的版本跑完,启停与新建都不影响它们。
</div>
<div className="g-vercard-f">恰一个生效版本;在途工作流按启动时的版本跑完,启停与新建都不影响它们。</div>
</aside>
<div className="g-canvas" ref={canvasRef}>