story/web/design-qa.md

# 陪伴设备操作简化验收 — 2026-10-06

final result: blocked

## 当前范围与证据

- 用户选定设计：E:/Codex/story/design/companion-device-simplified-20261006/companion-device-simplified.png。
- 源图实际像素：1487 × 1058。计划按相同 CSS 视口、设备像素比 1 验收桌面；另检查 390 × 844、320px 手机和 1024px 平板。
- 实现入口：http://127.0.0.1:5191/portal-preview.html?section=devices&state=device-design。
- 本地预览使用 DEV 专用示例数据，不连接或控制真实设备；模拟代码未进入正式构建。
- 实现截图：尚未取得。浏览器访问 127.0.0.1:5191 被权限策略拒绝，工具说明为用户拒绝。没有通过其他端口、其他浏览器或浏览器替代工具绕过限制。
- 全图并排比较：尚未完成。
- 控件局部比较：尚未完成；待取得相同视口截图后比较音量、待机、联网、更新和设置抽屉。
- 当前状态：代码已修改、类型检查和正式构建通过；尚未完成浏览器视觉、点击和控制台验收，未发布。

## 已实现

1. 设备状态、音量、待机集中在同一页，缩小现有设备插画。
2. 音量在松开滑杆、完成键盘调整或离开控件后自动保存；保留版本匹配检查，写入失败后先读取核验，保留草稿供明确重试。
3. 只有设备实际上报的音量和配置版本匹配后显示“已生效”。离线显示等待连接或上次已生效，未知状态不会声称准备完成。
4. 待机与唤醒保留简短确认，显示等待设备执行；状态使用设备上报值。
5. 网络和更新采用简洁行入口，版本与日志收进展开区；名称、技术信息、诊断和解绑进入设置抽屉。
6. 设置抽屉提供关闭、Escape、键盘焦点约束和关闭后焦点恢复；配网复用现有协议、设备认证与归属检查。
7. 保留现有权限、升级确认、使用人变更检查和解绑确认。

## 自动检查

- TypeScript：通过。
- Vite 正式构建：通过。仍有现有的大 bundle 提示；本轮没有引入新的依赖。
- 相关测试：29 项通过，0 失败。覆盖新音量及待机状态模型、现有设备实际值与版本确认、家庭操作权限策略、蓝牙发现与取消、Wi-Fi 数据校验、仅更新网络、恢复出厂的独立命令以及安全协议；补查首页状态反馈回归。
- 正式 JS 产物搜索 DEV 模拟标识：无匹配。
- 浏览器主要交互测试：尚未完成，不能以自动检查替代。
- 应用控制台错误：尚未检查。

## 五项视觉验收

- 字体与排版：实现沿用现有 Noto Sans SC，设备名、控制区和帮助文字设置了相应层级；实际字重、换行、截断待浏览器验收。
- 间距与布局：实现单一操作区和手机断点；实际首屏密度、控件尺寸、长名称、横向溢出待验收。
- 颜色：实现沿用深绿、浅灰绿和白色；实际状态色及对比度待验收。
- 图片与图标：复用现有设备插画与 Phosphor/Ant 图标；实际裁切和清晰度待验收。
- 文案与状态：自动检查确认不会把提交成功当成设备已生效；实际提示位置、错误、等待、只读和未知态待浏览器核验。生产文案“设备已连接，可在下方调整陪伴设置”避免仅依据联网推断通话已准备好。

## 发现与迭代记录

- 阻塞项：浏览器访问权限。当前未完成设计与实现在同一图像输入中的比较，不能判定视觉一致或通过。
- 第一轮代码检查发现类型未收窄、模拟数据缺少必需字段及移除旧流程后残留导入，均已修复；类型检查和构建复跑通过。
- 尚无可依据截图判定的 P0/P1/P2/P3 视觉结果，不以源码推测代替。

## 后续验收清单

1. 经用户重新授权后打开上述本地预览。
2. 桌面同尺寸捕获、归一化并排比较，修复所有 P0/P1/P2。
3. 检查手机和平板，以及设置抽屉和键盘操作。
4. 通过 deviceScenario 参数验证 offline、standby、pending、error、conflict、uncertain、read-only、unknown、update 场景；确认音量自动保存、失败重试、设备回传、待机确认与升级确认。
5. 检查控制台，保存实际浏览器截图与比较证据，将本轮 final result 更新为 passed 后再作为完整验收交付。


---

# 历史验收记录（不代表本轮设备改版已通过）

# 电脑端注册入口调整与验收 — 2026-10-04

final result: passed

用户确认注册入口放在登录按钮下方，并明确要求电脑端。保留现有左右布局、品牌、家庭插图与登录业务规则；本轮只调整入口结构、样式、键盘焦点及低高度电脑视口留白。

## 视觉依据与截图

- 源设计：E:/Codex/story/deliverables/registration-entry-redesign-20261004/registration-entry-v2.png（833 × 1888）。
- 实现：E:/Codex/story/deliverables/registration-entry-redesign-20261004/desktop-1440-login.jpg。
- 注册态：E:/Codex/story/deliverables/registration-entry-redesign-20261004/desktop-1440-register.jpg。
- 同屏对照：E:/Codex/story/deliverables/registration-entry-redesign-20261004/comparison.html 与 comparison.jpg；包含已选设计、电脑登录面板局部和电脑整页。
- CSS 视口：1366 × 768、1440 × 900、1920 × 1080；另检查 375 × 850 共享组件回归。
- 浏览器 JPEG 实际像素分别为 1351 × 760、1425 × 891、1905 × 1072；移动截图为 375 × 850。捕获像素与 CSS 视口有轻微差异，对照采用等比显示并检查 DOM 实际边界，不将其视为逐像素复刻。用户明确要求从手机图适配电脑端，因此桌面两列结构和面板宽度是预期差异。

## 检查与修复记录

1. P2：1366 × 768 初始布局的顶部留白将注册行推至首屏底边。证据 desktop-1366-before-spacing.jpg。仅在宽度大于 1000px 且高度不超过 900px 时，调整组合区域上边距为 32px、面板上下内边距为 30px。复查 desktop-1366-login.jpg：scrollY=0 时注册行底部约 719px、面板底部约 750px，均在 768px 视口内。
2. P2：全局非 Ant 按钮 hover 规则可能覆盖注册入口透明背景。增加更高权重的 hover 和 disabled 透明背景规则，沿用深绿色文字。
3. 入口移到表单后，切换成功时聚焦手机号输入，保留 preventScroll，方便键盘用户继续填写。浏览器确认活动元素为 customer-phone。

## 五项视觉检查

- 字体：沿用 Noto Sans SC 与现有桌面字号，注册提示 16px，操作文字加粗；未出现截断。
- 间距：按钮下方 24px 间距、1px 分隔线、44px 最小操作高度，登录方法只保留一排；桌面左右布局保持。
- 颜色：沿用 #244f40、灰绿色文字及现有米白背景。空表单登录按钮保持真实禁用样式，区别于概念图的深绿按钮是业务状态要求。
- 图片与图标：保留原有家庭插图与品牌心形，箭头采用现有 Ant Design 图标库。
- 文案：使用“还没有账号？注册账号”和“已有账号？返回登录”；保留首次验证码登录自动创建账号及设置密码说明。

## 验证范围

在完整 LoginPage 的本地 DEV fixtures 中检查：登录/注册往返、注册态隐藏登录方法、标题与提交按钮同步、手机号焦点、密码登录、忘记密码、恢复验证码登录。各视口无横向溢出；控制台无错误。未发送真实短信、创建真实账号或修改真实密码。

注册仅在 session.signup_enabled 且非 deviceSetup 时显示的条件保持原样；API、验证码与注册密码设置业务代码未改。相关权限条件经源码复核，本轮未重新执行后端集成测试。

TypeScript 检查和生产构建通过；保留既有打包体积警告。构建日志与 browser-checks.json 位于同一交付目录。随后按用户要求发布至现有线上站点，Web 版本为 0.99.36-rc.auth-desktop1，基于当时线上 0.99.35-rc.privacy-progress1 合入三个前端文件。准确发布包的 9 项检查、公开 JS/CSS/HTML 哈希、家庭端与维护端注册开关及线上登录/注册切换均通过。API 与其他服务的容器 ID、启动时间和重启次数保持不变，未执行迁移。发布回执位于 E:/Codex/story/deliverables/registration-entry-redesign-20261004/production-receipt.json；线上截图为同目录 online-desktop-login.jpg。发布验证创建了短期匿名登录会话，未发送真实短信或修改业务账号。

最终对照未发现本次范围内未修复的 P0/P1/P2 问题。现有页面在较矮桌面上仍可纵向滚动以查看左侧功能说明/页脚，登录与注册入口已在首屏内；这是保留原页面布局的预期行为。

---

# 管理端五个页面实现与验收 — 2026-09-21

final result: passed

## 本轮范围与依据

按用户最新要求，仅显示设备管理、固件管理、大模型管理、验证码配置、用量与费用。默认进入设备管理，原总览、内容质量、告警、诊断入口隐藏，旧 area 链接归一到设备管理。运行配置仅展示验证码，不再展示版本、灰度、资源或设备组子菜单。账户安全保留在右上角账户菜单。

设计来源：`E:/Codex/story/deliverables/online-redesign-20260920/admin/designs/` 中的 `02-devices.png`、`03-firmware.png`、`05-models.png`、`14-config-captcha.png`、`07-billing.png`，并参照创建与上传流程稿。五个页面保留现有业务 API，预览入口使用独立的本地示例数据。

## 视觉验收

通过 `http://127.0.0.1:5173/admin-qa.html` 把参考图与实时实现置于同一个浏览器截图中比较。桌面 iframe 的 CSS 视口为 1487 × 1058，匹配设计稿尺寸，再等比缩小并排展示；手机为 390 × 844。浏览器工具已显示并检查对照截图，本轮未另外导出 PNG 文件。

- 字体：沿用项目 Noto Sans SC，统一页面标题、正文、表头与辅助文字；手机调整为可读字号。
- 布局：白色侧栏、暖白背景、绿色主要操作；设备统计、固件列表与展开详情、当前模型、验证码双渠道、用量图表和费用页签均已复查。
- 颜色：主要操作使用深绿，状态分别表达正常、待处理、错误、禁用；未计费和读取失败不显示为零费用。
- 图标与图片：使用已有 Phosphor / Ant Design 图标，不将整张设计稿当作页面背景。
- 内容：导航精简、去除验证码之外的配置内容属于用户明确要求；保留权限提示、版本信息和必要操作说明。

已检查五页桌面和手机首屏，固件详情展开状态，以及手机导航展开、选择后收起。表格在容器内横向滚动，保留操作列。修复后重新检查模型手机布局，不再因网格最小内容宽度导致整页溢出。

## 交互验收（隔离示例数据）

- 设备：搜索、创建必填校验、创建成功与烧录 JSON 结果；空设备列表显示真实空状态。
- 固件：详情、重新校验发布、选择本地测试 bin、计算 SHA256、上传并展示新版本。
- 模型：添加配置、连接测试、测试通过后激活、当前模型更新；错误信息在详情与创建面板内可见。
- 验证码：未修改时禁用保存，修改、取消、保存反馈；只读角色四个单选项全部禁用且没有保存按钮，未配置腾讯云的渠道不可启用。
- 用量：设备筛选从 50 分钟 / 4 次变为 20 分钟 / 2 次；同型号设备通过出厂编号区分；读取失败显示错误和不可用统计，最近记录不误报为空记录。
- 费用：新建价格草稿、自己的草稿不可自行审批、另一创建人的草稿需要依据和勾选确认才能发布；额度保存后显示新活动版本与已退役旧版本。价格币种改为 USD 后，额度币种仍为独立 CNY。
- 导航：仅五项菜单；访问旧 `area=alerts` 自动进入 `area=devices`。

## 已修复与剩余差异

P2 修复：表格测量行出现额外空白；固件日期换行；手机模型网格溢出；手机费用页签容不下；收起菜单仍能被辅助技术访问；只读验证码的单个选项覆盖了组禁用状态；额度输入 step 与 min 不匹配导致正常数值无法提交；价格与额度共用币种状态；请求失败显示空记录。

P3 差异：图标、状态标签、部分行高与设计稿不逐像素相同；生产所需校验与说明使部分页面高于设计稿。静态 Modal/message 的既有 Ant Design 上下文提示仍在，未出现未捕获运行异常。未围绕这些非阻塞差异继续扩展范围。

## 构建与边界

`tsc -b --pretty false` 与 Vite production build 通过；日志见 `E:/Codex/story/deliverables/admin-implementation-20260921/build.log`。保留既有大包提示，主 JS gzip 约 544 KB。DEV 预览与对照页不是生产构建入口，管理端示例 fixture 不进入生产 JS。

本轮 passed 表示设计对照、前端构建与本地示例交互验收通过。没有部署线上，也未使用真实账户执行设备写入、固件上传、验证码修改或价格审批；真实后端联调不在本轮验收结论内。示例用量日期为固定演示数据。

---

# 历史：全页面设计与功能验收 — 2026-09-20

final result: passed

## 范围

家庭端 18 个设计目标：11 个主页面、登录、设备列表与设置引导、资料编辑、设备详情、新建分享、绑定设备。维护中心 9 个现有业务区统一导航、字体、配色、卡片和响应式布局，保留原有业务能力。

家庭端设计来源：`E:/Codex/story/deliverables/online-redesign-20260920/customer/designs/` 的 18 张 1487 × 1058 设计稿。维护端本轮是整体视觉统一，不宣称有一套已经逐像素复刻的独立设计稿。

## 五项设计检查

- 字体：Noto Sans SC；标题、正文、标签层级统一，清除旧标题字体和黑色主按钮对新页面的覆盖。
- 布局：家庭端共用 62px 顶栏、228px 桌面导航、暖白内容区；详情使用页内布局。宽屏内容延伸到右侧 36px 边距，保持首页已确认的修复。
- 颜色：深绿主操作、浅绿提示、暖白背景与陶土色辅助图标；错误、危险操作和未知状态有独立表达。
- 图片：登录家庭、长者头像、设备场景、连接恢复均使用独立插画。没有把整张设计图当作页面背景。
- 内容：生产组件接真实接口；聊天摘要标明系统整理及需核对，不从空记录推断心情；开通、绑定、在线状态分别显示。前端读取失败不冒充零用量。

P3 差异：重新生成的插画细节和图标与原稿不逐像素相同；为保留现有后端权限模型，每项分享授权单独设置一种权限，界面有明确说明；资料编辑保留陪伴方向与版本确认，页面高度略大于纯设计稿。

## 已修复问题

- P1：用量请求失败时显示零值，已改为不可用标记及重试；设备状态未知不再当成离线。
- P1：分享录音选项可能引用上一段聊天媒体，已限定为当前所选聊天的媒体。
- P2：旧主题覆盖新按钮、输入、容器宽度；已限定作用域并在末尾加载新样式。
- P2：维护总览与固件页面手机横向溢出；已调整网格、工具栏换行及表格内部滚动。
- P2：编辑资料标签布局被旧规则覆盖；桌面横排、手机竖排已复查。
- P2：手机打开详情保留旧滚动位置；详情和分享步骤切换回到页面顶部。
- P2：900px 聊天列表过窄，已调整栏宽、条目与阅读标签布局。

## 证据与交互

截图目录：`design/all-pages/`，首页原证据在 `design/home-redesign/`。已实际查看桌面各主页面、四个详情/流程及登录/引导截图；复查资料编辑、设备详情、分享第二步和绑定页。维护端 9 个页面均检查桌面/手机布局；预览数据结构不完整导致的用量/诊断空白已经修复后重新截图。

响应式：390px 检查家庭 11 个主页面及维护 9 个业务区，320px 复查资料、故事、设备、授权、用量、设置；390px 复查资料编辑、设备详情、分享、绑定；900px 聊天阅读；2560px 资料页右边距 36px，根节点 scrollWidth = clientWidth = 2560。表格保留区域内部横向滚动。

已操作：聊天选择与阅读切换、资料编辑到真实受控确认差异、分享选内容→权限→确认、绑定码误填设备 UUID 的拦截、昵称保存后重新读取展示（浏览器使用隔离示例数据）。生产危险操作未用真实账户执行。

无未解决的 P0/P1/P2 设计问题。此处 passed 表示上述设计和本地组件验收通过，不代表真实短信、实物蓝牙和线上全流程验收通过。

## 构建与后端

- `npm run build`：通过（包含 TypeScript）；保留既有大包体积提示，主 JS gzip 约 532 KB。
- 首页统计/时区/空心情/设备状态 6 项测试：通过。
- OpenAPI 类型生成、contractgovernance/HTTP/identity/webevents 检查：通过。
- 14 个服务模块在临时 PostgreSQL + Redis 环境通过集成测试，全部迁移及种子数据成功应用；详见 `../docs/customer-portal-redesign-20260920.md`。
- 生产 dist 检查不含 portal-preview 入口或示例数据代码；本地验收入口不进入生产构建。

## 线上抽查（2026-09-20）

已发布 Web `0.99.1-rc.portal-display1`、API `0.99.0-rc.portal1`，数据库迁移 73 完成且 dirty=false。API/worker 就绪检查、公开页面和静态资源校验通过；匿名访问新增接口受到认证保护。

在已有真实登录会话下刷新并查看首页、聊天记录、提醒与待办、陪伴设备、服务用量和设置与权限。新版加载真实家庭数据，宽屏内容占满可用区域，未出现右侧大块空白。发现设置页手机号登录账户标识空行，补充标识回退及掩码后发布并复查通过。此次浏览器复查期间无新增 warning/error。

线上抽查未写入真实昵称、修改权限或创建分享；维护中心真实角色全流程、短信及实物蓝牙未执行。发布与回滚记录见 `../docs/portal-redesign-release-20260920.md`。历史首页验收保存在 `design-qa-before-all-pages.md`。


# 添加长者授权界面设计验收 — 2026-10-05

final result: passed

选择依据：用户认可样式并要求直接修改，沿用最近展示的第一款居中列表弹窗。来源为 exec-73415b3c-3a62-4a4f-969b-25e2732f9ea7.png。现有品牌、导航与资料页保留。

证据：desktop-final.jpg、mobile-clip.jpg、comparison.jpg 和 comparison-detail.jpg 位于 E:/Codex/story/.local-evidence/elder-consent-redesign-20261005。桌面 1440×1024，手机 390×844（截图排除浏览器滚动条）；参考图保持完整比例对齐比较，同时比较弹窗局部。

视觉检查：居中白色圆角弹窗、墨绿色强调色、资料/授权步骤、五项图标列表、右侧复选框和关闭按钮符合选定方向。小字改为未授权的后果。修复全局主题覆盖复选框颜色的问题。标题/正文清晰，手机弹窗内部滚动，操作栏固定可见，最后一项可选择。

合理适配：沿用真实产品导航和字体；底部“暂不开通”单独一行避免窄屏误触；家庭分享说明按实际独立资源授权规则表达，不宣称自动分享全部内容；个性化记忆标注生成新记忆才需要文字。

功能检查：资料页移除固定普通话、不可选陪伴方式与下一步授权说明；空白默认授权为零；返回保留资料；Escape 关闭；依赖提示不自动勾选；本地隔离请求验收“暂不开通”提交 types=[]、confirmed=true，正常提交只包含 transcript_storage 和 raw_audio_storage；提交中按钮与复选框禁用。未向生产写入测试长者或授权。

构建检查：TypeScript/Vite 生产构建成功，浏览器错误日志为空。绑定入口复用同一授权组件和明确确认请求结构。没有新增生产依赖、后端迁移或业务数据变更。

P0/P1/P2: none remaining.
P3: 与生成参考相比，小字采用实际产品字号，背景资料和导航保持现有产品内容。


线上验收补充（2026-10-05）：用户明确授权发布后已上线 0.99.41-rc.consent-design1。124 个静态文件完整校验、API/worker 健康检查通过；其他服务 ID 与启动时间保留。真实线上页面已显示简化表单和授权后果文案，默认五项不选，浏览器错误日志为空。线上截图：E:/Codex/story/.local-evidence/elder-consent-redesign-20261005/production.jpg。final result: passed。


# 长者切换第 2 版验收 — 2026-10-05

final result: passed

用户选择：第 2 版，左侧长者名单，右侧对应资料。参考图 exec-1fbae53e-2e3a-4daf-8ce8-a0b1663d8d99.png。用户要求“直接上线”后已发布 0.99.43-rc.elder-roster2。

实现范围：SaaSWorkspace 的 SubjectPanel 布局、ElderRoster.tsx、elder-roster.css。沿用原选择状态、资料编辑和授权读取逻辑。其他页面的 SubjectPicker 保留。本次没有后端、固件或数据迁移。

参考与实际同屏对比：E:/Codex/story/.local-evidence/elder-switcher-design-20261005/comparison-full.jpg 和 comparison-detail.jpg，已逐一查看完整画面与内容局部。最终截图 desktop-final.jpg、mobile-final.jpg、mobile-long-name.jpg 位于同一目录。

五类检查表面：
1. 桌面 1440×1024：名单与资料两栏、浅绿选中状态、头像与称呼、编辑入口、三项横排陪伴准备和底部资料提示符合选定方案；页面无横向溢出。
2. 长者切换：奶奶、爷爷、外婆显示对应兴趣、话题、语速；模拟授权数量分别 5、1、0，随选择更新。方向键、Home、End 更新选中并聚焦对应按钮。
3. 详情入口：爷爷基本资料编辑显示爷爷资料，外婆数据授权入口打开现有资料与授权面板；退出后继续保持对应选择。未提交测试授权或业务写入。
4. 手机 390×844：名单横向滚动，点击第三位自动进入可视区域，资料区与准备项纵向排布；document.scrollWidth=clientWidth=375（排除滚动条）。
5. 边界状态：15 位长者、长名字、1 位长者、0 位长者。End 到末位时完整资料名称换行，名单省略但保留完整 accessible name/title；页面不溢出；空状态仍提供添加长者。

迭代记录：第一轮桌面与手机确认布局和交互；模拟头像重复，补充两张仅限隔离预览的生成头像；Windows 预览文件监听出现 EBUSY、依赖字体不在允许目录，修复仅预览的 Vite watch/fs 配置，恢复字体与头像加载；第二轮复查全部状态、完整画面与重点局部，无残留 P0/P1/P2。

合理适配 / P3：沿用现有产品导航、字体和图标；手机采用横向名单而非窄屏两栏；头像来自现有资料字段，未设置头像的真实用户沿用原默认头像，不依据名字推断老人形象。隔离预览中爷爷/外婆头像和多长者数据均为演示内容，不写入项目生产资料，不用于生产发布。

验证：隔离候选 npm run build 通过，实际工作区 npm run typecheck 通过；新预览页 console warn/error 为空，3 个名单头像加载成功。Vite 仍有现有大 bundle 的构建提示，不影响本次功能验收。桌面和手机截图均以实际浏览器为准。

线上验收补充：冻结最新 .42 权限提示版本，应用本次三个源文件，重新构建正式候选后上线 .43。128 个静态文件、入口和 runtime-config 哈希全部通过，API/worker 就绪，其他服务和 schema 74 保留。线上隔离验收家庭中两位长者正确切换兴趣、语速和 5/3 项授权。手机名单与资料可操作，页面无横向溢出。生产截图与回执在 E:/Codex/story/.local-evidence/elder-switcher-design-20261005/release。保留 .42 的独立授权影响面板；未新增测试授权或写入业务资料。浏览器有既存扩展告警，未发现应用错误。final result: passed。

# 回忆录三种阅读模式验收 — 2026-10-07

final result: passed

用户要求将三个设计方向同时做成客户可切换的模式。实现于现有 MemoirWorkspace，模式为精装书、画卷阅读和年代浏览，共用 MemoirDocument 与现有鉴权插画接口。选择状态按长者保存在浏览器，只保存模式名称；模式切换不调用生成接口，保留当前章节。此次完成本地实现，尚未发布。

参考图：E:/Codex/story/design/memoir-concepts-20261007/01-heirloom-book.png、02-illustrated-reader.png、03-memory-gallery.png。实际截图、完整同屏比较与重点局部比较均位于同目录 implementation/：book/scroll/timeline-desktop.png、对应 -mobile.png、-comparison.png、-content-comparison.png；另外保留 book-320.png、edge-checks.json 和 comparison-dimensions.json。已逐一查看三组完整画面和三组局部比较。

尺寸与比较：桌面 CSS 视口 1440×1024，截图像素为 1425×1013，浏览器截图排除部分边缘与滚动条；参考图为 1487×1058，保持比例缩放为 1424×1013，再置于实际截图同尺寸画布。完整比较 2866×1013，局部比较 2266×660。手机 CSS 390×844，另查 320×844；平板 834×1194。实际文档宽度在窄屏与 clientWidth 相同，年代条仅在自身容器横向滚动。

五类设计检查：
1. 布局与层级：精装书采用真实生成的绿色布面封面与动态书名；画卷采用目录、完整正文与大幅插画；年代浏览采用年代导航、场景图、摘要及阅读全文。桌面切换器与内容标签并排，移动端单行切换器，目录可展开。
2. 字体与颜色：保留安心陪伴品牌、现有 UI 字体与森林绿，正文使用中文衬线字体，纸色背景；标题、正文和操作层级明确。
3. 图片与内容：装饰书封为透明 PNG，真实插画继续通过现有授权接口获取；缺图或图片加载失败不会阻止阅读。预览人物、正文、院落和车站插画为明确标注的虚构示例，位于开发预览目录，没有进入生产构建。
4. 交互与状态：三模式切换、章节目录、前后章、画卷继续阅读、年代选择、阅读全文、移动端目录开合、原料和日常标签、刷新后偏好保留均可用。实际原生点击验证移动端选定第二章后跨模式继续保持第二章。
5. 响应式与可用性：1440、834、390、320 宽度检查通过，模式按钮高度 44px，键盘按钮与 aria-pressed/aria-current 表达状态，尊重 reduced-motion。空内容、权限不足、生成中、生成失败、只读、长标题和无插画状态均检查；只读仍可切换阅读模式。

迭代与修复：压缩重复页标题、长者选择器和工具说明，避免首屏被工具区挤占；模式条采用正确的全局导航偏移；修复 320px 操作区溢出；切换后在新视图和收起目录完成布局后滚动，避免手机章节定位偏移；画卷观察器读取实时章节位置并忽略已离开模式的回调。最终完整画面与局部复查无未解决 P0/P1/P2。

合理适配：统一保留真实产品导航，未采用参考图中的另一套品牌。静态通用封面采用植物装饰，个性化书名使用真实动态文字。年代标签仅依据 event_time 中明确年份，跨年代范围与未明确年份分别归类，不推断童年、青春或成家等事实。前两章入口采用实际内容文字。生成插画按氛围表达，不宣称真实照片。

验证：TypeScript 构建检查通过，Vite 生产构建通过，4 项模式偏好/日期归类/数据不变性测试通过。隔离预览中的导入与生成模拟操作分别更新原料数量和版本。浏览器主流程无 console warning/error。dist 主入口代码不包含虚构人物、院落或车站示例资源，公共资源仅包含通用装饰书封。此次未向生产账号写入测试资料，未进行线上发布或真实后端生成验收。

P0/P1/P2: none remaining.
P3: 保留上述品牌、事实和动态内容适配差异。
final result: passed

# 回忆录背景音乐验收 — 2026-10-07

final result: passed

新增三段为本项目新编写并合成的轻音乐：纸页微光（60 秒）、桂香旧院（64 秒）、岁月慢行（56.47 秒）。每段为 44.1 kHz、双声道、128 kbps MP3，约 0.9–1.0 MB。乐谱与生成脚本为 scripts/create-memoir-music.py，乐谱、来源、时长、音频统计、SHA-256 记录在 design/memoir-modes/music/score-manifest.json。未采用第三方歌曲、外部录音或乐器采样；未宣称绝对零风险或独占版权。

音乐默认关闭、音频 preload=none，只有用户主动播放时设置音源；浏览器保存曲目和音量，但不保存自动播放状态。三种阅读模式共用同一播放器，切换模式不重置正在播放的音乐。页面隐藏、pagehide、卸载阅读器时停止，异步播放请求有取消标记，错误可重试。

桌面使用小型选曲浮层，手机使用底部 Drawer，避免窄屏浮层越出可视区。支持曲目单选、音量键盘调节、Escape 关闭及焦点返回，打开面板后聚焦当前选曲。控件保留状态与可访问名称；音量为零有静音状态说明。新增控件不触发真实导入或生成操作。

验证证据：E:/Codex/story/design/memoir-concepts-20261007/music/desktop-controls.png、mobile-controls.png、mobile-320-controls.png。实际浏览器播放三个音源均 readyState=4，时长分别 60、64、56.47059，测试中 currentTime 正常前进。模式切换后音源与进度保留；选曲时切换到新音源，音量滑块及显示值更新；刷新后 paused=true、src=null；进入故事原料标签后播放器卸载，返回回忆录 paused=true、src=null。

响应式：390 和 320 手机宽度下，底部面板的配乐说明底边约 756.6px，处于 844px 视口内；打开 Drawer 时 documentWidth=clientWidth（390 / 320），没有页面横向溢出。桌面面板清晰可读。初次开发热更新遗漏新样式，完整刷新后恢复，最终图像复查采用已加载样式。手机原先浮层空间不足，已改为底部面板并重新验收。

TypeScript 检查与最终 Vite 构建通过，既有回忆录 4 项测试通过。配乐为静态资源，生产入口仍不含虚构示例正文与示例场景图。初次验收完成本地实现与检查，后续发布见下方补充；未做外部曲库版权保证。法律及授权依据已核实官方著作权法与 Creative Commons / Pixabay 授权说明，具体外部曲目仍须单独核实权利与使用范围。

P0/P1/P2: none remaining.
final result: passed

线上发布补充（2026-10-07）：用户明确要求“上线”后，发布 Web `0.99.54-rc.memoir-modes1`。冻结线上 `.53` 源码，只应用 14 个回忆录文件并隔离构建，其他 134 个 Web 源文件与基线一致。154 个线上静态资源哈希、入口与 runtime-config、三段 MP3 的 MIME / Range 206 检查全部通过。API 保持 `.53`，其他服务 ID 与启动时间保留，schema 77、dirty=false；没有迁移或业务写入。实际线上浏览器进入正常登录页，加载新主包 index-DIbSVs-X.js；当前没有登录会话，登录后的真实家庭交互未复查。直接导航 MP3 被浏览器客户端拦截，线上音频交付以 HTTP 检查为准，本地已验证三个相同音源的播放。发布回执与清单位于 E:/Codex/story/.local-evidence/memoir-modes-20261007，发布记录为 ../docs/memoir-modes-release-20261007.md。final result: passed（构建、发布和资源交付；登录后交互沿用本地验收）。