UI 评审截图
由 npm run ui:review 生成：真实 Chromium（390×844，2x）加载生产产物，
对着一个替身 API 逐屏截图并测量。
| 截图 | 场景 | 看什么 |
|---|---|---|
01-shelf.png |
书架 | 第一屏：先看到书，再看到控件 |
02-reader.png |
阅读页 | 顶部书名 / 日夜快捷按钮 / 正文 / 本章滑杆与四个底部入口 |
03-reader-no-chrome.png |
阅读页 · 收起工具栏 | 工具栏一起收起，正文保持原位置，底部只留书名、页码与进度 |
04-panel-toc.png |
目录 · 半屏 | 下半屏，上半屏正文仍可见 |
05-panel-settings.png |
阅读设置 · 半屏 | 一行式行：标签在左、控件在右 |
06-reader-paged.png |
阅读页 · 翻页模式 | 分栏后的一页，页数应与可翻次数一致 |
07-reader-sepia.png |
阅读页 · 米黄 | 主题切换后的同一页 |
08-reader-dark.png |
阅读页 · 夜间 | 暗色下的正文与工具栏 |
09-panel-txt.png |
TXT · 正文排版 | 纯文本专属的缩进/段间距/编码三行，且面板仍是半屏 |
10-shelf-paged.png |
书架 · 第二页 | 没有「继续阅读」横排；默认按最近阅读排序（第一个 chip 是填充态）；分页器在封面下方；书库入口在标题右侧 |
11-library.png |
书库 · 浏览 | 书库是读者那一半：约等于商城的布局——搜索框在最上面，封面网格铺满窗口，「加入书架」只画在不在书架的书上，右上角是文件管理入口和封面大小 |
12-library-files.png |
书库 · 文件管理 | 另一半、也是管理员那一页：面包屑 + 文件行、「书籍」徽章、不在书架的书带「不在书架」标记，右上角是上传/新建，左上是回浏览页的入口 |
17-shelf-unshelve.png |
书架 · 从书架拿掉 | 封面右上角的「⋯」打开后的动作菜单，以及「从书架拿掉」的确认框：写清只是从书架拿掉、磁盘上的文件不动 |
15-library-preview-shelve.png |
书库 · 浏览 · 上架 | 点了某本书的「加入书架」之后：报告、目录重读，以及角标消失的那一本 |
16-library-search.png |
书库 · 浏览 · 搜索 | 商城式布局的搜索框：输入之后 URL 带上查询、网格只剩匹配的书，字段两边的留白让控件不贴着封面 |
13-reader-paged-scrub.png |
阅读页 · 滑杆拖到本章第 3 页 | 分栏模式下拖动底部滑杆：读数与画面都停在本章内，不换章 |
14-reader-epub-image.png |
EPUB · 插图 | 章节文档里的图片真的画出来了，而不是浏览器的破图占位符；比页面宽的那张也在栏内 |
自动测量
| 检查 | 结果 | 说明 |
|---|---|---|
| 手机阅读交互回归 | ✅ | reader-regression.mjs: 显隐、翻页、面板、主题、EPUB、漫画、PDF 加载、320px 窄屏 |
| 翻页不再每次都发两次 sync | ✅ | 8 次翻页 + 6 秒静默：2 次 POST / 0 次 GET（共 2 次 sync 请求） |
| EPUB: 章节里的图片真的画出来了 | ✅ | naturalWidth=240 显示 240x160 src="/api/v1/books/review-illustrated/assets?reader-book-resource=1&ref=OEBPS%2FI" |
| EPUB: 插图下面的正文也在 | ✅ | 正文开头="台版 转自 天使动漫 |
插图下面还有正文，这样图片没显示出来的时候，空出来的位置也是看得见的。" | | EPUB: 比页面宽的插图被收进栏内 | ✅ | 出版方写的是 1400px，画出来 342px / 栏宽 342px（布局 342x39，dpr=2） | | EPUB: 收窄插图没有改变它的比例 | ✅ | 原图 8.750 / 画出来 8.752 | | EPUB: 宽插图没有让页面横向溢出 | ✅ | document 溢出 0px / 阅读面溢出 0px | | 搜索框: 两边都从封面列内缩，且左右相等 | ✅ | 左 14px / 右 14px（字段 0 则为贴着封面） | | 搜索框: 放大镜与输入框中线对齐 | ✅ | 放大镜中线 98.1 / 输入框中线 98.1（偏差 0.0px，字形 16.796875px，框高 44.203125px） | | 书架: 第一个排序是「最近阅读」且默认选中 | ✅ | chips=最近阅读* / 最近入库 / 书名 / 作者 | | 书架: 「最近入库」仍然在排序里 | ✅ | chips=最近阅读 / 最近入库 / 书名 / 作者 | | 书架: 排在最前的是最近读过的那本 | ✅ | 前两本：剑来 第1卷 / 剑来 第2卷 | | 书架: 没有「继续阅读」横排 | ✅ | continue-row=false 卡片 0 张 | | 书架: 每张封面有一个「⋯」操作入口，按得着也看得见 | ✅ | 28.0×28.0 在卡片内=true / 开书区覆盖整卡=true / 静止不透明度 0.55 | | 书库: 浏览页是封面网格，没有文件行 | ✅ | 封面 60 张 / 文件行 0 行 | | 书库: 浏览页有搜索框（商城式布局） | ✅ | 搜索框=true label="搜索书库" | | 书库: 搜索框两边留白，不贴着封面 | ✅ | 字段左 12px / 右 12px，封面比字段再内缩 14px | | 书库: 浏览页的网格铺满窗口，而不是被书架的宽度上限截住 | ✅ | 网格 390px / 窗口 390px，封面占 30 行 | | 书库: 浏览页不放「新建文件夹」，只放上传和去文件管理的入口 | ✅ | 头部控件=返回 / 文件管理 / / 上传书籍 / 书架设置 · cozy / 关闭 | | 书库: 浏览页只给不在书架的书画「加入书架」，且不是全给 | ✅ | 角标 1 个 / 卡片 60 张，提示="这一页有 1 本还不在书架上，点封面上的按钮可以加进去" | | 书库: 输入搜索词后 URL 与网格一起变，只剩匹配的书 | ✅ | 前 60 张 → 后 2 张（剑来 第1卷 / 第一卷 插图），hash=#/library?q=%E7%AC%AC1%E5%8D%B7 | | 书库: 搜索词进 URL，成为可以发给别人的链接 | ✅ | hash=#/library?q=%E7%AC%AC1%E5%8D%B7 字段="第1卷" | | 书库: 文件管理页画的是文件行，没有封面网格 | ✅ | view=files 行 4 / 封面 0，hash=#/library/files | | 书库: 文件管理页有上传/新建，没有搜索框 | ✅ | 右上角=返回 / 浏览书籍 / / 上传书籍 / 新建文件夹，搜索框=false | | 书库: 文件管理页的入口是「浏览书籍」，不是页签 | ✅ | 头部控件=返回 / 浏览书籍 / / 上传书籍 / 新建文件夹 | | 书库: 文件管理页没有「下架 / 从书架拿掉 / 加入书架」任何一处 | ✅ | 页面文本命中=无 | | 书库: 文件管理页仍然标出不在书架的书（徽章不是控件） | ✅ | 徽章=true | | 书库: 从文件管理回到浏览是换页，URL 也跟着换 | ✅ | 浏览=true 文件=false hash=#/library 封面 60 张 | | 书架标题栏: 两个图标都画出来了，且不超出各自的按钮 | ✅ | 书库: 18.4×18.4 in 40 box, inside=true | 书架设置 · 适中: 18.4×18.4 in 40 box, inside=true | | 书架标题栏: 图标不比标题大（同一行的视觉重量） | ✅ | 图标 18.4 vs 标题 28 | 图标 18.4 vs 标题 28 |
全部通过。