# `input-supplement` 换版面 —— 照新目标件重做数据工单那一屏

> **状态**:设计已定、**已获用户批准**(2026-08-30)。这份文档是**为上下文压缩而写的交接件** ——
> 压缩之后照它直接开工,不必重新 brainstorm、不必再问用户。
>
> **分类**:bounded(要改的流程仓里已经有;换版面、功能不变)。按 brainstorming 技能的 bounded 路径,
> **不写 spec、不走 writing-plans**;这份文档只是上下文的替身,不是流程意义上的实施计划。

---

## 一句话

把 `input-supplement`(S1 派的那张数据工单)的**视图层**换成
`docs/ss02-act-05-new/ACT-WORK-05-数据工单-PN主数据创建.html` 的版面,**绑定面与功能一个不动**。

用户原话:「功能应该是一样的」「注意页面样式要和这个模版html几乎一样」。

---

## 用户已定的三件事(不要再问)

| # | 问题 | 用户的选择 |
|---|---|---|
| 1 | 目标件是单颗 PN 三步向导,而 W05 天生两颗料 | **每颗料一条轨道(两条并列)** |
| 2 | 目标件的新增类型面板只收参数名,而 W05 的硬/软约束必填 | **面板里每行扩成四格**(参数名/说明/硬软约束/单位),**独立的「核心参数字段」表去掉** |
| 3 | 目标件是一道总闸切整页,平台的闸按台账地址走 | **不动平台:每个步骤卡自带一道闸** |

**第 1 条我提过风险**(类型要在两条轨道各选一次、而它们必须相同,容易选出不一致再被判据拦下),
用户仍选了它 —— 按他的决定走,但**加一道无脚本护栏**(见下)。

**第 2 条的连带代价**(要在实现时留意):独立字段表去掉之后,**已有类型的字段清单在件上看不到也改不了**。
现有件那张表的第二个用途是「在库但当年参数没录全 → 给已有类型补一个字段」。
**缓解**:把新增类型那个 `<details>` 面板对**已有类型**也开放(标题写「类型库里没有?或要给这个类型补一个字段」),
同一个面板兼两用,版面不变而能力不丢。**这一条是我在设计里补的,用户没有单独批,但它属于「功能一样」的承诺范围。**

---

## 现场事实(已逐条核实,不必重查)

### 目标件
`docs/ss02-act-05-new/ACT-WORK-05-数据工单-PN主数据创建.html` —— 444 行 / 26KB。
同目录另有 `SS02_ACT-WORK-05_差异评估_E04-I01架构版_V1.2.html` 等,**不在本次范围**。
旧目标件在 `docs/SS02-ACT-WORK-05-html/ACT-WORK-05-数据工单-01-芯片主数据创建.html`(现有件是照它平移的)。

目标件结构:
- `.card-head`(`.badge`「数据」· `.kick`/`h1`/`.sub` · `.side` 里 tag/step/deadline)
- 【触发原因】`.zone` + `.note`(流程 / AI 预填情况)
- **`.jc-editgate` 带 `.gateprog` 进度条**(`.track`/`.fill`/`.pct` = `0 / 3 项`)
- **渲染态 `.viewarea`**:`.idcard` 两格(PN 名称 / PN 类型,大号 mono 值)+ 核心参数表 `.tbl-wrap`
- **编辑态 `.editarea`**:`.steps` 步骤轨道(`.stepbox` / `.sdot` / `.scard` / `.fld`)
  - ① PN 名称 ② PN 类型(select 首行 `＋新增类型`)+ `.newtype` 面板 ③ 核心参数值 `.pvgrid` 瓷贴(2 列)
- `.flow` 底部说明 + `.card-foot`
- 尾部 `<script>` 驱动:类型库 `PN_TYPES` → 选类型即时加载参数框、新增类型面板、进度条

**目标件的闸结构与平台逐字一样**(`.jc-editgate` / `.eg-open` / `.eg-cancel` / `.eg-save` / `.on`)——
它本来就是照平台做的,只有「一道 vs 四道」这一处对不上。

### 现有件
`activities/part-substitution-assessment/src/views/report.ts`(953 行):

| 片段 | 行 | 绑定 |
|---|---|---|
| `PART_TABLE` | :298 | `<tbody data-rows="mine:sub_eval.part" data-edit="parts.profile">` |
| `CHIP_TYPE_TABLE` | :398 | `<table data-edit="parts.chip_type">` + `<tbody data-rows="mine:parts.chip_type" data-edit="parts.chip_type">`(**两处都写**,见下)+ `addrow` |
| `TYPE_PARAM_TABLE` | :447 | `<table data-edit="parts.type_param">` + `<tbody data-rows="mine:parts.type_param" …>` + `addrow` |
| `PARAMETER_TABLE` | :496 | `<tbody data-rows="mine:parts.parameter" data-edit="parts.parameter">` |
| `INPUT_SUPPLEMENT` | :515 | `doc({ css: P08_CSS, alias: BIND_P08, badge:'数据', … })` |

四道 `editGate` + 两处 `addrow`(`parts.chip_type` / `parts.type_param`)。

只读态查类型人读名的写法(已验证可用):
`<span data-rows="parts.chip_type" data-by="type_id=chip_type_id"><i data-slot="type_name" data-blank></i></span>`

### 样式
`activities/part-substitution-assessment/src/views/target-style.ts`:
`P08_CSS`(:34,数据工单)· `ACC1_CSS`(:144,结论审核)· `ACC2_CSS`(:241,落账确认)。
**本次只换 `P08_CSS`**,另两段不动。

### 平台机制(会影响怎么写)
- `ViewContainer.tsx:548` —— `documentElement.classList.toggle('editable', editable)`;
  **`editable` 只让闸现身**,开不开由人按闸,开了给那张表的宿主挂 `.on`(`table.on td>.jc-vcell{display:none}`)。
- **`bodyOf` 是单个 `querySelector`**(`ViewContainer.tsx:164-167`)——**一个地址只找得到一个宿主**。
  这是终审 C1 与 Task 7b 的教训来源,**本次版面成立与否就卡在这一条**(见风险)。
- `addRow` 靠克隆 `tr:last-of-type`,**零行时返回 false**(Task 7b 的旧账,已由种子行绕开)。
- 件是**零脚本沙箱**;交互靠 CSS(`:has` / `<details>` / `:focus-within`)与外层容器。

### 当前版本与闸的名单
- `packageVersion: '2.1.9'`(`manifest.ts:57`)→ 本次改完升 **2.2.0**。
- S1 卡的 `gateLedgers`(`case-model.ts:592`):
  `['parts.chip_type', 'parts.type_param', 'parts.profile', 'parts.parameter']` —— **四张,不要动**。
- 现有自测:`__tests__/activity.test.ts` 共 70 条 `it(`。

---

## 设计

### 版面

```
卡头(数据 badge · kick/h1/sub · 右侧 tag/step/deadline)
【触发原因】zone + note(流程 / AI 预填情况)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  原 PN 轨道                 候选 PN 轨道
  ① 名称·在库·品牌·生命周期     ① 同左          ← 一道闸(parts.profile)
  ② 芯片类型 [下拉]            ② 芯片类型 [下拉]
     ▸ 类型库里没有?在这里新建 / 补字段          ← 一道闸(chip_type + type_param)
       类型名 + 逐行四格(参数名/说明/硬软约束/单位)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  ③ 核心参数值:左右两组瓷贴,按料分              ← 一道闸(parts.parameter)
.flow 说明 + 页脚
```

**两条并列轨道怎么出来的**:`<div class="tracks" data-rows="mine:sub_eval.part" data-edit="parts.profile">`
里放 `<section class="track">…</section>`,`.tracks{display:grid;grid-template-columns:1fr 1fr}`。
`data-rows` 逐项复制内部结构,CSS 把它们排成两栏 —— 这是 A2 已验证的写法
(「`<article data-rows>` 包 `<section class="cand">`」逐颗料一张卡)。

**行容器的坑**:行展开按**第一个同名闭合标签**截行内容 —— 行模版里不许再出现同名标签。
用 `<section>` / `<tbody>` 这类行内不会重复的标签。

### 无脚本翻译

| 目标件(靠 `<script>`) | 平台等价物 |
|---|---|
| 选类型 → 即时加载参数输入框 | **保存即铺格**(配方按类型的字段清单铺出参数行,已实现且走查验过) |
| `＋新增类型` 选中才显示面板 | **`<details>` 常驻折叠条**(A2 方法论条同款,零脚本) |
| `.stepbox.done` 点亮 | `data-class-of` 投影 + 样式表判断(**模版不许算、不许判**) |
| 进度条 `n / m 项` | 分母**必须是真数**:由配方算进 `sub_eval.case` 两列(如 `fill_done`/`fill_total`);<br>**算不出就只摆「还差 N 项」+ 二态条,不许编分母**(界面不撒谎) |
| `body.editing` 整页切 | 平台的 `editable` + 每卡 `.on` —— 用户选了「每步骤卡一道闸」 |

### 加的一道护栏(方案 1 的风险缓解)

两条轨道各选一次类型、而它们必须相同(`distinct = 1` 那条判据)。
基座本来就出 `sub_eval_part_distinct_chip_type_id` —— 把它投出来,
**两处选得不一样时件上直接出红带点名**,不必等提交才被判据拦。
用 `data-class-of` 投影 + 样式表出显隐(`v-1` 那档 `display:none`),**模版不算不判**。

---

## ⚠️ 要先验证再往下写的一条(这版面成立的前提)

步骤③ 的两组瓷贴要共用**一个** `data-edit="parts.parameter"` 宿主
——因为 **`bodyOf` 只找得到一个宿主**(终审 C1 / Task 7b 的教训:同一地址挂两处,
`querySelector` 只命中第一个,后面那组的值**一格都收不上去,而且不报错**)。

宿主内部靠**嵌套 `data-rows` + `data-by` 父键过滤**按料分栏。

**必须先钉住的是收值归行**:`cellsOf` 按宿主内所有 `[data-col]` 取格子,`rowOf` 按行容器归行。
嵌套之后 `rowOf` 认的是内层瓷贴组还是外层?**认错就会把两颗料的参数值混成一行**。

**做法**:先写一条测试跑真实的 `cellsOf`/`rowOf`(或经 `resolveRowKey` 走一遍),
**证明两颗料的瓷贴各归各行**。
- 成立 → 按上面的版面写;
- **不成立 → 退回「③ 单独一块、内部分两栏」的形状**(轨道只到 ②),并**告诉用户这一处与目标件的差别**。

顺带留意 `data-by` 的已知缺陷(终审 I3,已记 debt 未修):
**行内没有该键时会落回外层同名字段** —— `internal_pn` 在多张表上撞名,分栏过滤要用真有值的键。

---

## 动的文件

| 文件 | 改什么 |
|---|---|
| `src/views/target-style.ts` | `P08_CSS` 整段换成从新目标件**机械抽取**的样式(数值不改;`ACC1_CSS`/`ACC2_CSS` 不动) |
| `src/views/report.ts` | 重写 `INPUT_SUPPLEMENT` 与它的片段(`PART_TABLE`/`CHIP_TYPE_TABLE`/`TYPE_PARAM_TABLE`/`PARAMETER_TABLE`) |
| `src/manifest.ts` | `packageVersion` → `2.2.0` |
| `__tests__/activity.test.ts` | 断言跟着新版面走(**不许放松**) |

**不动**:平台(`ViewContainer` / `view-render` / `desk.ts`)· 配方(`case-model.ts`)· `gateLedgers` · 另两张件。

---

## 必须留着的东西(动了就是回归)

1. **`<input class="jc-cell mono" data-col="type_id" placeholder="由系统生成" disabled>`**(`report.ts:407` 一带)
   —— 这是**终审 C1 的修复**:没有它,人新建的类型会被「全表一致」认成既有行、**把既有字典行改名并落进共享主数据**。
   新版面里这一格换了位置也**必须带着走**,并保留「由系统生成」那句占位
   (2026-08-02 立的规矩:自增列不问人,但**不能一声不吭地拿掉**)。
2. **主键列必挂 `data-col`** —— 它不是编辑面,是**行的钥匙**;不挂,服务端按「全表一致」猜,会把两行对到同一行上互相覆盖。
3. `CHIP_TYPE_TABLE` 那个「`data-edit` 外层 `<table>` 与内层 `<tbody>` 两处都写」的写法有原文注释解释原因
   (`bodyOf` 要同时收到「已有行」与「加一行」出来的行)—— 换版面时**读那段注释再决定怎么摆**。
4. `gateLedgers` 四张表与件上的可编辑面**同源** —— 闸盯的表,件上必须给得出填的手段
   (Task 7 那颗「按不下去的确认钮」就是这么来的)。

---

## 验收

**现有断言继续绿,一条都不许放松**:可改面只有哪几列 · 三份件用到的 class 必须都能在自己那段 CSS 里找到定义 ·
零脚本(`not.toContain('<script')`)· 主键挂 `data-col` · 编辑闸外壳那六个属性 · `gateLedgers` 与件同源。

**新增**:
- 两条轨道各出一颗料(`mine:sub_eval.part` 两行 → 两个 `.track`);
- **步骤③ 瓷贴按料归行正确**(上面那条风险的钉子);
- 类型不一致时红带现身(`distinct > 1` → `data-class-of` 投影命中)。

**每条新断言都要做变异验证**(拿掉修复/改坏一处 → 测试必须真红;复原 → 绿),两段输出贴进报告。
本轮已连吃三次「测试测的是副本」「变异测试本身是空的」「夹具替被测系统干了活」的亏。

**门禁**:`pnpm gates` **以退出码验,不许接管道**(`cmd | tail` 的退出码是 `tail` 的)。

**最后必须做的两步**:
1. `pnpm activities:install` 装包,**用 SQL 核库里那一行**(版本号 / 视图 HTML)—— 装完看库,不看脚本的话;
2. **浏览器走一遍**(起单 → 数据工单 → 新建类型 → 保存即铺格 → 填参数 → 提交)——
   **版面对不对只有真看一眼才算数**;脚本 e2e 逮不到「一个图标 946 像素高」这类事。
   跑试跑要用 AI 服务账号或用户授权的账号,跑完 `pnpm --filter @app/api reset-runs` 清运行数据。

---

## 环境备忘(压缩后会用到)

- 开发后端 `:8787`、前端 `:5173`;**稳定版 `:8790` 目前是停着的**(用户授权,大改期间不动它)。
- 起后端要先 `set -a; . .stable/env; set +a`,否则「缺 KEYCLOAK_URL…」起不来。
- **长跑的 dev 进程可能在跑几小时前的代码** —— 本轮踩过三次;`tsup --watch` 监视进程本身也可能已死,
  `touch` 无效,要**完整重启** `pnpm dev:api`;杀进程要杀到 `--onSuccess` 拉起的那个 node(否则 `EADDRINUSE`)。
- 查库:`docker exec jcai-postgres psql -U jcai -d jcai_wos -c "…"`(`.stable/env` 里的 `DATABASE_URL` 指向 5432,
  而 docker 映的是 54329,直接进容器最省事)。
- 浏览器登录走 Keycloak 用户名密码;**密码那一格我不能替用户输**,要他自己登。

---

## 上下文:这条分支此刻的状态

`feat/w05-rewrite`,HEAD `45cec82`,**工作树干净,`pnpm gates` 退出码 0(2476 测)**。
ACT-WORK-05 重写(Task 1–12 + 7b + 全分支终审 + 修复波 + 定向复审)**已全部完成**,
**未合并、未推送** —— 合并方式等用户定(选项已摆给他:本地合进 `mvp-foundation` / 推送开 PR / 先放着)。
`feat/deterministic-steps`(第一份计划)**已并在这条分支里**,合它即合两者。

逐任务账本与全部裁定:`.superpowers/sdd/2026-08-29-act-work-05-rewrite/progress.md`(用户尚未决定删留)。

**本次换版面是这之后的新活,与上面那条分支的收尾是两件事。**