mirror of
https://github.com/hectorqin/reader.git
synced 2026-11-13 06:20:54 +08:00
hectorqin
29f7f6b56a
现状问题。上一轮把顶栏和底栏做成"一起收放"之后，两个方向都还差一截。显示时 顶栏是"返回箭头 + 书名 + 一个 ☰"，底栏是一条 3px 的进度条加五行图标；参照稿 要的是顶栏一排等重的"图标在上、文字在下"按钮、底栏一行可拖动的滑杆加一行 "上一章 / 阅读进度 / 下一章"。收起时屏幕上什么都不剩：读者收起工具栏是为了 看正文，不是为了不知道自己读到哪儿。 方案依据。顶栏改成 `.top-button`——图标在上、名称在下的等宽按钮，`space-evenly` 排布，按钮只保留这个屏幕真能做到的返回 / 目录 / 设置（参照稿里"首页/书架/书源" 含阅读页内部走不到的目的地，一个点了没处的按钮比少一个按钮更糟）。底栏第一行 换成 `input[type=range]`：滑杆一个手势就能到章末，而进度条只能报告位置，读者 想到一章末尾得连点四十次；原生控件的拇指、拖动惯性、方向键和 `aria-valuenow` 都白得。第二行是两端的上一章/下一章和中间的进度文字。收起态新增 `.reading-indicator`：章节名钉在左上、页码与总进度钉在左下，两个读数 `pointer-events: none`，让点它们的手势落到下面的翻页区，且只在收起时绘制。 放弃方案。把书名留在顶栏：读者找标题时眼睛去的是正文角上，不是工具栏，而且 标题随工具栏一起消失正是当初要一个常驻读数存在的原因。收起态只留侧边快捷列： 那解决了"能操作"，没解决"知道在哪"，而后者是沉浸阅读里更常被问到的那个。 顺带修掉一个真 bug：`chevron-right` 的字形路径与 `chevron-left` 逐字节相同， 所以"下一章"按钮一直指向左边。改路径、重生成字体，并补两条断言——同名字形 不得共用路径、两个 chevron 必须镜像——它们此前一条都没有，所以这个 bug 能在 所有测试全绿时存在。 改动点。`reader-chrome.tsx` 新增 `TopButton`、重写顶栏与底栏、新增 `.reading-indicator` 与 `onScrub` 通道；`reader-screen.tsx` 新增 `scrubTo`； `reader.css` 重写顶栏/底栏/状态药丸定位，新增滑杆与阅读指示样式；`paths.mjs` 修 `chevron-right`；`docs/ui.md` §3.8 补顶栏、底栏滑杆、阅读指示三节；ui:review 新增"保留章节与页码指示 / 阅读指示不吃手势 / 进度是可拖动的滑杆 / 有页码与 阅读进度读数"四条断言。 验证方式。`cd web && npm test`（371 条）、`cd server && npm test`（205 条） 全绿；`npm run build` 通过；`npm run ui:review` 全绿，16 条尺寸断言全过，截图 见 `docs/ui-review/`。曾把 `chevron-right` 的两条新断言逐条还原验证：路径改回 旧值时两条都红。 Ref: #34
79 lines
3.0 KiB
JavaScript
79 lines
3.0 KiB
JavaScript
/**
|
|
* The screens the UI review renders, as data.
|
|
*
|
|
* Each scene is a URL to load plus the interactions that put it into the state
|
|
* worth looking at. They are *declared* here rather than written into the driver so
|
|
* that adding a screen to the review is one entry, and so the list itself can be
|
|
* read as the answer to "what do we actually look at".
|
|
*
|
|
* The distinction that matters: a *functional* test asserts that a tap changes the
|
|
* state, and passes on a screen that is unusable. These scenes exist so a person
|
|
* can see the result — which is the difference the issue asks for ("不要只考虑
|
|
* 功能性").
|
|
*/
|
|
|
|
/** A book the harness serves, so the review never depends on a real library. */
|
|
export const FIXTURE = {
|
|
bookId: 'review-book',
|
|
title: '剑来',
|
|
author: '烽火戏诸侯',
|
|
chapters: [
|
|
{ title: '第一章 惊蛰', body: ['小镇上的人都知道，泥瓶巷住着一个少年。', '他叫陈平安。'] },
|
|
{ title: '第二章 山水', body: ['山上的风很大。', '他站在山顶，看了很久。'] },
|
|
{ title: '第三章 落雨', body: ['雨来了。', '他没有打伞，就这么走回去。'] },
|
|
],
|
|
};
|
|
|
|
/** A long chapter, so pagination has something to paginate. */
|
|
export const LONG_CHAPTER = Array.from({ length: 40 }, (_v, i) =>
|
|
`第 ${i + 1} 段。这一段有足够多的字，用来把这一章撑到好几屏，这样翻页才看得出来。`,
|
|
).join('\n\n');
|
|
|
|
export const SCENES = [
|
|
{
|
|
name: 'reader-light',
|
|
label: '阅读页 · 白',
|
|
note: '顶栏（图标+文字）、正文、底栏滑杆与章节导航、状态药丸',
|
|
steps: [],
|
|
},
|
|
{
|
|
name: 'reader-chrome-hidden',
|
|
label: '阅读页 · 收起工具栏',
|
|
note: '点中间三分之一收起后，正文占满、右侧留快捷列、角上留章节与页码',
|
|
steps: [{ tap: { x: 'center', y: 'center' } }],
|
|
},
|
|
{
|
|
name: 'panel-toc',
|
|
label: '目录 · 半屏',
|
|
note: '打开目录：下半屏，上半屏仍然看得见正文',
|
|
steps: [{ click: 'button[aria-label="目录"]' }],
|
|
},
|
|
{
|
|
name: 'panel-settings',
|
|
label: '阅读设置 · 半屏',
|
|
note: '打开设置：行是「标签在左、控件在右」的一行式',
|
|
steps: [{ click: 'button[aria-label="阅读设置"]' }],
|
|
},
|
|
{
|
|
name: 'panel-settings-dark',
|
|
label: '阅读设置 · 夜间',
|
|
note: '夜间主题下同一张面板',
|
|
steps: [{ click: 'button[aria-label="阅读设置"]' }, { click: 'button:has-text("夜间")' }],
|
|
},
|
|
{
|
|
name: 'reader-paged',
|
|
label: '阅读页 · 翻页模式',
|
|
note: '分栏后的一页；底部的「本章 x/y 页」应当与正文对得上',
|
|
steps: [{ click: 'button[aria-label="阅读设置"]' }, { click: 'button:has-text("翻页")' }, { click: 'button[aria-label="关闭"]' }],
|
|
},
|
|
{
|
|
name: 'reader-txt-settings',
|
|
label: 'TXT · 正文排版',
|
|
note: '段落缩进 / 段间距 / 编码，只在 TXT 上出现',
|
|
note_kind: 'txt',
|
|
steps: [{ click: 'button[aria-label="阅读设置"]' }],
|
|
},
|
|
];
|
|
|
|
export default { FIXTURE, LONG_CHAPTER, SCENES };
|