测试台与节点属性三改:拆盒 · 收色 · 让三件实物说话

上一轮的病根认下来:暗侧是「盒子摞盒子」—— bed/panel/panel2 三层深蓝几乎同色,
每节各带一条填色题头栏,纸信缩在盒子里像张明信片;磷光、琥珀、青蓝、暖纸四个
色温体系打架。节点属性那条竖格线逐行断裂,类型切换是个外来的灰块。

**测试台 · 拆盒**:台面上只留三件「实物」——纸信(暖白)、抽键读数屏(纯黑凹屏)、
起单钮(磷光);其余全部退成台面排版:
  · 左右两栏不再是描边圆角盒,一道竖细线分栏;节题从填色横栏改成
    疏排大写 + 底缘细线 —— 是标题,不是盒盖。
  · 被测流选中态只亮一道磷光左棱 + 提亮文字,撤掉整块青染 —— 色彩留给读数屏。
  · 读数屏撑满栏宽、值放大;「必填」从描框小徽退成缀在键名后的小字 ——
    屏上的字越少越像屏。
  · 纸信撑满右栏成为主角:内距 22px、主题 14px 半粗、正文行高 2;
    纸上聚焦一律墨色加深 —— 琥珀与磷光都留给机器侧,纸只有纸的颜色。
  · 起单条撤掉渐变毛玻璃,平铺台面 + 一道细线。

**节点属性**:335px 窄轨里逐行断裂的竖格线比没有更乱 —— 改标签在上、值在下的
叠排,行距放足,图签味交给 mono 大写与行线;类型切换从灰色分段控件改成
**两枚迷你节点皮肤**:选活动点就是一小块画布蓝,选审批点就是一小块琥珀 ——
切换器长成它代表的东西。

教训一并修:上一轮一段 CSS 替换因原文不匹配**静默没吃上**(没加 assert),
截图看着旧样还以为改了 —— 这轮逐条 grep 验证每段都落了。

五闸绿。

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-29 18:27:00 +08:00
co-authored by Claude Opus 5
parent f8f208e945
commit 9c947950ce
2 changed files with 69 additions and 49 deletions
@@ -39,7 +39,6 @@ import {
PageHead,
QueryGate,
Sec,
Seg,
St,
} from '@web-shared/gov/primitives.tsx';
import type { Nav } from '@web-shared/gov/gov-route.ts';
@@ -879,14 +878,21 @@ function FlowLab({
{node.kind === 'activity' && (
<div className="g-tbrow">
<em>类型</em>
<Seg
value={node.flavor === 'approval' ? 'approval' : 'act'}
options={[
{ k: 'act', label: '活动点' },
{ k: 'approval', label: '审批点' },
]}
onPick={(k) => patch((n) => ({ ...n, flavor: k === 'approval' ? ('approval' as const) : undefined }))}
/>
{/* 切换器长成它代表的东西:两枚迷你节点皮肤(画布蓝 / 琥珀) */}
<div className="g-ntype">
<button
className={'act' + (node.flavor !== 'approval' ? ' on' : '')}
onClick={() => patch((n) => ({ ...n, flavor: undefined }))}
>
活动点
</button>
<button
className={'apr' + (node.flavor === 'approval' ? ' on' : '')}
onClick={() => patch((n) => ({ ...n, flavor: 'approval' as const }))}
>
审批点
</button>
</div>
</div>
)}
{node.kind === 'activity' && node.flavor !== 'approval' && (