feat(w05): 三张工单件视图层重设计 —— 电路板夜景 hero + 精密检测报告版面,功能绑定逐项保留

用户定:中央工作区不要后台管理端的样子,按 C 端界面重设计,可加主题 SVG 与动画,
只保留功能。三张件换成「精密检测报告」语言:
· 题头深色电路板 hero,三张各一幕 —— 建档台(两颗料的芯片铭牌,由 mine:sub_eval.part
  铺行,不在库虚线描边)/ 对决量尺(原 PN → 候选 PN + 推荐等级徽章)/ 落账席(慢转
  印章环 + 一句话结论);信号点流动、晶粒呼吸、入场浮起,全部 transform/opacity,
  prefers-reduced-motion 全静。
· 正文瓷白报告版面:丝印小标 + 简报卡 + 报告表格;比对光谱(四态分布带 + 刻度)、
  落账三卡(大数)、四态计数丸。验收两件仍是用户定的验收绿 #0aa294,数据工单数据蓝。
· 设计系统收进 views/style.ts;目标件时代的 target-style.ts 退役(报表样式只此一处真源);
  report.ts 里与 badge.ts 重复的 vtok/badgeCss 收归一处(销一笔 debt)。

功能一个不动:可编辑表的 DOM 结构逐字节保留(data-rows/data-edit/data-col/编辑闸/
种子行/主键钥匙/thead 后置/红带),机制规则(序号计数器、jc-row-static 显隐、
gate-bar :has(:empty)、overflow-x)逐字保留并仍被包内测试钉着。

修掉三个自审逮到的洞:kv 占位破折号只认直接子级(嵌套徽标被「—」盖掉)、光谱条里
不渗计数字、加行钮补 base display:none(从前没开编辑就露着)。

104 包内测 + 2516 全仓测绿;两条新锚(主题色/hero 外壳)变异验证各红过一次;
2.6.0 已装库并 SQL 核过(hero/主题色/种子行/vtok/零脚本逐件中)。

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LKMZDwMbyKzjw6Hembwvet
This commit is contained in:
xcs
2026-08-31 13:03:36 +08:00
co-authored by Claude Fable 5
parent 1e3e5d40c6
commit e18611006b
5 changed files with 580 additions and 895 deletions
@@ -486,12 +486,17 @@ describe('报告模版:编辑面与只读面各就各位', () => {
await expect(host.base.interaction.pushHtml('<div><script>x()</script></div>')).rejects.toThrow(/无脚本执行权/);
});
/* 解封(2026-08-29,Task 9):`landing-confirm` 补齐,三张全能验了 —— 都走同一个 `doc()` 壳。 */
it('三张模版的外壳都是搬自目标件的 page/card,不再含 E04/I01 那套视觉底(.proto-root)的痕迹', () => {
/*
* 解封(2026-08-29,Task 9):三张全走同一个 `doc()` 壳。2026-08-31 视图层重设计后,
* 壳不再「搬自目标件」而是活动自己的设计系统(style.ts),但骨架类名不变:
* card-head 是电路板夜景 hero,card-foot 是丝印条;E04/I01 那套视觉底(.proto-root)仍不许出现。
*/
it('三张模版共用同一个 page/card 外壳(card-head hero + card-foot),不含 E04/I01 视觉底(.proto-root)', () => {
for (const view of VIEWS) {
const html = viewHtml(view);
expect(html, view).toContain('class="card-head"');
expect(html, view).toContain('class="card-foot"');
expect(html, view).toContain('class="hero-title"');
expect(html, view).not.toContain('proto-root');
}
});
@@ -1039,19 +1044,25 @@ const CONTRACT = {
discretion: [],
} as const;
/* 验收件题头是验收绿(2026-08-27 用户定:与对话区验收卡同色,不再是目标件的红) */
describe('两张验收件的主题色', () => {
it('ACC1 / ACC2 的 --ledger 是验收绿 #0aa294,题头渐变不再带红;CONDITIONAL 徽标保留语义红', async () => {
const { ACC1_CSS, ACC2_CSS } = await import('../src/views/target-style.ts');
for (const css of [ACC1_CSS, ACC2_CSS]) {
expect(css).toContain('--ledger:#0aa294');
expect(css).not.toContain('--ledger:#b23a2e');
expect(css).not.toContain('#fdf3f1');
expect(css).toContain('rgba(10,162,148,.25)');
/*
* 验收件的强调色是验收绿(2026-08-27 用户定:与对话区验收卡同色,不再是目标件的红)。
* 2026-08-31 视图层重设计后,样式真源从 target-style.ts(逐字节抽自目标件,随重设计退役)
* 换成 style.ts 的强调色令牌 —— 这条钉的用户口径不变:验收两件 #0aa294、数据工单数据蓝、
* CONDITIONAL 保持独立语义色(第四态,不与 MATCH 绿 / MISMATCH 红 / UNKNOWN 琥珀混用)、
* 目标件时代的题头红 #b23a2e 不再出现。
*/
describe('三张件的主题锚', () => {
it('验收两件强调色 #0aa294;数据工单数据蓝;CONDITIONAL 独立语义色;目标件的红不再出现', () => {
const review = viewHtml('difference-review');
const landing = viewHtml('landing-confirm');
for (const html of [review, landing]) {
expect(html).toContain('--acc:#0aa294');
expect(html).toContain('--ledger:#0aa294');
expect(html).not.toContain('#b23a2e');
}
// ACC2 的 CONDITIONAL 徽标保留目标件的语义红;ACC1 目标件 2026-08-27 改版把它改成了品牌蓝,照抄
expect(ACC2_CSS).toContain('.st.cond{color:#b23a2e');
expect(ACC1_CSS).toContain('.st.cond{color:var(--brand-deep)');
expect(viewHtml('input-supplement')).toContain('--acc:#2e6bff');
expect(review).toContain('--cond:#5661f0');
expect(review).toContain('.st.v-conditional');
});
});