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

版本卡原是治理台的圆角卡,跟旁边的图(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
2026-07-28 15:00:24 +08:00
parent 8fe9ef8ecb
commit 28adab83b0
2 changed files with 39 additions and 27 deletions
@@ -508,14 +508,37 @@
   版本收在流程内部:左列是这条流的全部版本(恰一个生效),点谁看谁的图;
   属性区从右侧窄栏挪到图下整行(g-wide),声明式契约细节再往下。 */
 .g-flowlab { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 2.2fr); gap: 12px; align-items: stretch; }
-/* 版本卡:与右侧的图**等高**(grid stretch),版本多了在卡内滚,不把页面撑长 */
-.g-vercard { display: flex; flex-direction: column; min-height: 0; background: var(--card); border: 1px solid var(--cline); border-radius: 13px; box-shadow: var(--cshadow); overflow: hidden; }
-.g-vercard-h { flex: none; display: flex; align-items: center; gap: 8px; padding: 11px 13px; border-bottom: 1px solid var(--line-soft); font-size: 12.5px; font-weight: 800; color: var(--ink-2); }
-.g-vercard-h svg { color: var(--ink-4); }
-.g-vercard-h .n { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--ink-4); }
-.g-vercard-h .g-ver-act { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; }
-.g-vercard-list { flex: 1; min-height: 0; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
-.g-vercard-f { flex: none; padding: 9px 13px; border-top: 1px dashed var(--line-soft); font-size: 11px; line-height: 1.6; color: var(--ink-3); }
+/* 版本卡:与右侧的图**等高**(grid stretch),版本多了在卡内滚,不把页面撑长。
+   形制取**图纸风**,与右边的流程图同一套语言(flow-canvas.css 的 process-doc):
+   白纸同影同角、mono 小字距大写题头(VER — 前缀对 FIG — 前缀)、钢青/黄铜色系、
+   细线方框行(方角,同图例 legend 的画法)—— 生效版行用黄铜左线 + 米色底,一眼可辨。 */
+.g-vercard {
+  --sh-ink: #161b22; --sh-steel: #46586a; --sh-muted: #6a7686;
+  --sh-line: #d8dee6; --sh-brass: #8a5f1c; --sh-brass-wash: #f7f0e0;
+  --sh-mono: "SF Mono", "JetBrains Mono", "Menlo", "Roboto Mono", ui-monospace, monospace;
+  display: flex; flex-direction: column; min-height: 0;
+  background: #fff; border-radius: 10px; box-shadow: var(--cshadow); overflow: hidden;
+}
+.g-vercard-h { flex: none; display: flex; align-items: center; gap: 10px; padding: 13px 16px 11px; 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); }
+.g-vercard-h .n { color: var(--sh-muted); letter-spacing: .08em; }
+.g-ver-new { margin-left: auto; font: inherit; letter-spacing: .1em; border: 1px solid var(--sh-line); border-left: 3px solid var(--sh-steel); background: #fff; color: var(--sh-steel); padding: 3px 9px; cursor: pointer; white-space: nowrap; }
+.g-ver-new:hover { border-color: var(--sh-steel); }
+.g-ver-new:disabled { opacity: .5; cursor: default; }
+.g-vercard-list { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
+.g-ver { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border: 1px solid var(--sh-line); border-left: 3px solid var(--sh-steel); background: #fff; cursor: pointer; font-family: var(--sh-mono); font-size: 11px; color: #3a4452; }
+.g-ver:hover { border-color: #aeb9c6; }
+.g-ver.on { background: #f2f5f8; border-color: #9fb0c0; }
+.g-ver.live { border-left-color: var(--sh-brass); background: var(--sh-brass-wash); }
+.g-ver.live.on { border-color: #cbb98d; }
+.g-ver > b { font-size: 12.5px; font-weight: 700; color: var(--sh-ink); }
+.g-ver .st { font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--sh-muted); }
+.g-ver .st.live { color: var(--sh-brass); font-weight: 700; }
+.g-ver .m { margin-left: auto; display: flex; align-items: center; gap: 8px; }
+.g-ver .cnt { font-size: 9.5px; color: var(--sh-muted); white-space: nowrap; }
+.g-ver-act { border: 1px solid var(--sh-line); background: #fff; padding: 2px 8px; font-family: inherit; font-size: 9.5px; letter-spacing: .1em; color: #3a4452; cursor: pointer; }
+.g-ver-act:hover { border-color: #aeb9c6; }
+.g-ver-act.t-go { color: var(--sh-brass); border-color: #d9c9a4; }
+.g-vercard-f { flex: none; padding: 10px 16px; border-top: 1px solid var(--sh-line); font-family: var(--sh-mono); font-size: 9.5px; line-height: 1.8; color: var(--sh-muted); }
 .g-ver { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--card); border: 1px solid var(--cline); border-radius: 11px; cursor: pointer; font: inherit; text-align: left; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
 .g-ver:hover { border-color: #c9d6e6; }
 .g-ver.on { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-wash); }
@@ -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,15 +654,7 @@ 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}边
@@ -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}>