Appearance
系统组件设计目录
PagedList：分页列表
- 每项由主标题、可选副信息、可选前导图标与可选尾部状态／箭头组成。
- Read Pico 当前设置列表主标签 36 px／44 px 行框，副信息 24 px／32 px 行框；首页最近阅读标题 32 px／40 px 行框，元信息 26 px／34 px 行框。整项触摸；设置行当前为 96 px 高、项间 16 px，其他列表按内容计算，不把单页行槽当作通用固定值。
- 默认使用留白划分行，不默认绘制卡片边框。高密度列表若仅靠留白仍难以快速区分相邻完整条目，可按分隔线规则使用 1–2 px 轻分隔线；不要同时叠加灰底、卡片边框和分隔线重复表达同一层级。
- 项目必须完整显示，列表按实际可用高度和字体度量分页，不硬编码每页固定行数。
- 不建议展开／折叠菜单；需要二级设置时打开新的页面。
- 分组标题必须与至少一个条目同页，避免孤立标题。
- 返回列表恢复原页和原选择；内容更新时优先保持用户当前浏览位置。
IconGrid：方形图标加名称宫格
- 基准设备默认 3 列 × 3 行，或 3 列 × 4 行；不能为增加项目缩小字号和热区。
- 上方正方形图标区域，下方名称；Read Pico 应用宫格当前使用 64 × 64 px 图标槽、32 px 名称与 40 px 行框，名称最多两行，同页高度一致。64 px 只适用于此布局，不规定所有应用图标的尺寸。
- 图标和名称构成一个点击单元。
- 补充示例：在完整 612 px 宽内容区内，列 Gap = 24 时，三列单元宽为 (612−48)/3 = 188 px；单元内图标可使用更小的居中方形槽，不要求图标本身铺满 188 px。
- 实际行数必须计入系统栏、分页指示器、行间距、标题和名称高度；放不下 3×4 时退回 3×3 或更少完整行。
CoverGrid：长方形封面宫格
- 以竖向长方形封面为主要内容，不默认在封面下再显示名称。
- 参考设备建议最多 3 列、3–4 行，最终以完整封面比例与触摸区域能否容纳为准，不机械套用方形宫格。
- 保留封面长宽比，默认完整适配，禁止随意拉伸或裁掉书名。
- 无封面时使用干净占位图；若占位图内显示生成的书名，遵守 20 px 最低字号。
- 配置书名语义标签，并提供详情页或列表视图，以便识别文字模糊、相似封面或缺失封面的书籍。
- 封面边缘如需细线用于表示图像边界，可作为内容表达例外；不据此给所有界面区域加框。
建议补充的基础组件
| 组件 | 行为建议 |
|---|---|
| IconButton / TextButton | 可见形状与热区分离；明确禁用、按下、执行中、完成状态 |
| ChoiceRow | 单选／多选使用勾选或形状变化，不只变灰 |
| SettingRow | 简单开关可行内切换；复杂配置进入二级页 |
| PageIndicator | 方向、页数与当前页由组件统一管理 |
| EmptyState | 说明当前无内容，并提供一个明确后续操作 |
| ErrorState | 错误原因、保留的内容与重试入口；禁止仅显示模糊图标 |
| ProgressState | 静态阶段文字或离散更新的进度，不做持续动画 |
| ConfirmationPage | 删除等不可轻易恢复的操作显示对象与后果，确认和取消明确分开 |
| TextInput | 优先调用系统输入界面；输入内容、清除与提交有明确可见入口 |
这些是建议补齐的组件范围，不表示要求立即实现全部组件。页面布局框线与控件自身必要的勾选框、输入范围边界应分开理解；控件形状可以保留，避免成为装饰性“框套框”。
分页容量计算（补充建议）
假设内容区高 1000 px，标题与间隔占 68 px，底部分页指示器占 24 px，实际列表项高 96 px，项间留白 16 px。N 项需满足 N × 96 + (N − 1) × 16 ≤ 908，在这些假设下最多 8 项。字号、内容或容器变化后重新计算，8 不作为固定组件容量。
三列 188 px 宽的示例仅适用于完整 612 px 宽内容区。若右侧预留 24 px 纵向指示器槽，列宽为 (588 − 2 × 24) / 3 = 180 px。图标、名称、热区必须位于各自单元内。
组件规格模板（补充建议）
每个组件注明职责、必选与可选内容、可用矩形、字体度量、热区、正常 / 空 / 加载 / 失败 / 禁用状态、导航与返回、变化区域和验收结果。组件名称表达设计意图，不对应已存在函数。
设置行的推荐行槽、图文间距、宫格容量及交互分页槽见系统组件留白。该页提供完整计算例子；80 px 最低推荐行高与舒适行槽分别理解，不硬编码每页条目数。