mirror of
https://github.com/hectorqin/reader.git
synced 2026-11-10 21:11:08 +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
9 lines
325 B
TypeScript
9 lines
325 B
TypeScript
/**
|
|
* Declarations for `path.mjs`, following the same convention as `paths.d.mts`:
|
|
* the build scripts stay plain JavaScript and this states the shape the test
|
|
* consumes.
|
|
*/
|
|
|
|
/** Flattens an SVG path string into polylines of `[x, y]` points. */
|
|
export function pathToSubpaths(d: string): Array<Array<[number, number]>>;
|