页面模板与示例

仓库的 examples/apps/templates/ 保存可以重新打包的多文件应用。它们不是固定页面，也不是产品能力上限；使用前先阅读 UI 设计原则 和 应用设计清单，再根据数据结构和用户任务修改。

列表与详情

列表承担浏览和选择，详情承担完整阅读与编辑。不要把所有字段、所有操作和编辑表单都放进列表行。

仓库模板的多文件预览结构如下；完整源码保存在 examples/apps/templates/reading/，可以用同样的结构替换为自己的数据。

统计面板

统计只回答一个范围内的重要问题。数字需要说明口径，不要把不完整分页的结果说成全量统计。

仓库中的 examples/apps/templates/weight/ 是同一类统计面板的多文件版本，趋势图只使用已经读取的记录，并明确展示统计范围。

记账录入

录入表单把名称、金额和分类放在一起，成功后保留当前范围并明确说明发生了什么。金额需要在写入前转换为 number 并处理无效值。

仓库中的 examples/apps/templates/ledger/ 是可重新打包的记账多文件包，页面把录入和最近账目分成两个逻辑区域。

习惯与日程

习惯适合表达今天的完成状态，日程适合按照时间或日期分组。两者都应提供空状态和正在读取状态，并且让用户知道当前查看的日期范围。

仓库中的 examples/apps/templates/habits/ 是每日状态的多文件版本；状态保存日期，而不是永久修改一个布尔值。

分组表单

较长表单按真实主题分组；保存按钮只承担一个主要动作，失败时不清空用户已经填写的内容。

仓库中的 examples/apps/templates/profile/ 是分组表单的多文件版本；表单失败时保留输入内容，成功后用轻提示说明结果。

仓库中的模板可以使用下面的命令重新打包：

node examples/apps/scripts/package.mjs ledger
node examples/apps/scripts/package.mjs habits
node examples/apps/scripts/package.mjs planner
node examples/apps/scripts/package.mjs profile