60 lines
5.0 KiB
Markdown
60 lines
5.0 KiB
Markdown
# B04 交付 01：图片地址首帧闪现
|
||
|
||
日期：2026-10-21（Asia/Shanghai）。任务 YC-008。状态：**已实现、SSR/DOM 回归与构建通过；真实 Windows 连续帧待验**。
|
||
|
||
- 基线：`0b613e522d444cbd8cd44ca17e9b1be498517978`。
|
||
- **受测代码 SHA：`342820690f644fb1cb3b0a76b143dbcd41aac8c4`**。
|
||
- 需求：[B04-需求](B04-需求.md)。产品只改 `MarkdownImage.tsx`；未改 CompletedFold、动画、URL 安全 helper、预览/下载实现、历史数据或用户配置。
|
||
|
||
## 修复
|
||
|
||
1. 安全且不需要宿主解析的 src 首次渲染就进入 img，不再等 effect 后从文本切换。
|
||
2. 异步未完成显示 alt 或“图片加载中…”；失败显示 alt 或“图片加载失败”。任何 fallback 都不使用 src，不泄露整个 data/blob/文件地址。
|
||
3. src 作为内部组件生命周期 key，切换地址及 A→B→A 都有新的图片与失败状态。
|
||
4. 解析状态绑定 src/resolver/宿主偏好/回调的请求身份；在提交前清除不匹配状态，保留取消与过期结果隔离。旧解析、旧图片 error 不覆盖新图；即时 image error 也不会被被动 effect 的重置吞掉。
|
||
5. 原预览选图和点击回调保留；URL allowlist、宿主优先解析和下载失败处理仍走原路径。
|
||
|
||
## 实测
|
||
|
||
[DOM 报告](evidence/B04-delivery-01/dom-lifecycle.json)、[命令证据](evidence/B04-delivery-01/verification.txt)。Node 24.19.0/npm 11.9.0、Linux x64、jsdom 30.1.3，无新增依赖。
|
||
|
||
- `test:image-lifecycle`：**159 项断言 / 85 个 DOM 样本通过**。包括合成约 25KB Base64/空 alt，布局 effect 前与同步提交探针、错误/无 host/非法地址、同 src resolver 切换、host 偏好切换、立即 error、A→B→A、过期成功/失败、卸载取消、预览；真实 MessageBubble/CompletedFold 在多个合成会话里反复开关并确认图片重挂载。
|
||
- 基线负对照：同一新夹具只替换回基线 MarkdownImage，冷挂载失败，证明测试能捕获旧行为。负对照执行器退出 0 表示预期失败被确认，不代表旧产品通过。
|
||
- `npm run test:media`：Mermaid、图片 SSR/URL 安全/预览及下载错误处理、23 项路径回归通过。修正旧的“fallback 包含源路径”断言，新增直接安全图片 SSR 断言。
|
||
- `npm test`、指定 DOM 依赖后的 `test:alignment:dom`、`npm run build`：均退出 0。
|
||
- `test-image-lifecycle.mjs --build-only` 与原生 CJS 脚本语法检查：通过，仅证明夹具打包/语法，不是浏览器执行。
|
||
- 独立复审重跑 media 和 159/85 生命周期回归，无阻塞发现；`git diff --check` 通过。
|
||
- `check:tokens`：仍退出 1，同样六项既存失败及计数；本轮无 CSS 改动或 baseline 放宽。
|
||
|
||
**没有执行真实浏览器/Electron 连续帧**：当前图形环境此前已确认不可用，本轮没有重复绕过或禁用 sandbox。报告中的 jsdom height=0 不是正常布局高度，不能据此宣布需求 AC3 通过。真实图片解码、Windows 帧高度、预览窗口与实际下载仍需验收。
|
||
|
||
## 验收标准对照
|
||
|
||
- AC1：SSR、首次 DOM 提交到稳定态无 URI 文本，通过；真实首帧待验。
|
||
- AC2：实际 MessageBubble/CompletedFold 多次开关与跨合成会话重挂载无 URI 文本，通过 DOM；实际视觉闪现待验。
|
||
- AC3：提供 MutationObserver + 连续 rAF 夹具，**未执行原生高度验收**，不能只用稳定截图关闭。
|
||
- AC4/5：失败短占位与快速切换/取消/过期结果覆盖通过离线回归；浏览器实际加载事件矩阵待验。
|
||
- AC6：既有 URL/预览/下载错误回归通过，产品相关代码未改；真正下载与系统预览窗口未在本环境执行。
|
||
|
||
## Windows 连续帧复跑
|
||
|
||
固定代码 SHA 的独立检出安装构建，不使用用户会话或图片。以下只生成/运行受控组件夹具：
|
||
|
||
```powershell
|
||
npm ci --legacy-peer-deps
|
||
npm run build
|
||
npm install --prefix .tmp/b04-dom --ignore-scripts --no-audit --no-fund jsdom@30.1.3
|
||
$env:YCODE_TEST_DOM_MODULE = Join-Path $PWD '.tmp/b04-dom/node_modules/jsdom'
|
||
npm run test:image-lifecycle
|
||
npm run test:media
|
||
node scripts/test-image-lifecycle.mjs --build-only
|
||
# 用上一条输出的 output 绝对目录替换 <fixture目录>
|
||
node node_modules/electron/cli.js scripts/verify-b04-image-native.cjs <fixture目录>
|
||
```
|
||
|
||
原生 wrapper 使用 CJS、临时 userData、sandbox:true，阻止网络请求；只加载合成图片和本地夹具，20 秒超时。输出 `native-report.json`，连续帧记录在 report.samples 中。夹具验证图片 complete/naturalWidth=320、出现非零图片尺寸，以及无 URI 文本/异常数千像素增高；探针结果写在采样根之外，避免采到报告自身。
|
||
|
||
可以在获准浏览器打开 build-only 目录的 index.html 观察相同夹具；这仍不是完整安装应用或同版本 WorkBuddy 像素对照。验收端另用隔离历史夹具复核真正对话详情，不修改正式历史数据。
|
||
|
||
远端推送并核对 SHA 后才完成 Git 交接；本轮不改变 B01/B02/B03 的验收结论。
|