cents/docs/原型图/原型说明.md

原型说明

这些原型用于评审信息架构和移动端交互，不是最终视觉稿。

页面

• 账本列表
• 账本流水
• 条目明细：开发环境访问 /prototype/entry-detail，用于评审查看、编辑与常规分类选择流程。
• 分类轮盘步骤
• 成员邀请

快速记账

快速记账不再作为单独页面，而是账本流水页内的底部抽屉。

当前交互方向：

• 点击账本流水页右下角记账入口，打开底部抽屉。
• 抽屉内输入金额、备注、日期时间，并使用数字键盘确认。
• 金额与日期时间位于抽屉顶部；关闭按钮取消，点击抽屉外部关闭。
• 点击日期时间后直接打开系统日期时间选择器，不再展开额外输入行或二次确认按钮。
• 信息行仅保留备注和分类按钮，完整分类路径合并显示为 支出>餐饮>外卖，初始显示 支出。
• 加减键用于连续计算；发生运算时金额下方显示完整算式，金额区实时显示结果，退格同时更新算式和结果。
• 点击键盘右上角的收支/分类按钮后，分类选择器覆盖原数字键盘区域，其他界面进入模糊的非交互状态。
• 分类键原位变为圆形“确定”坐标原点，已选路径使用圆形按钮向左延伸；横轴节点可点击返回对应层。
• 纵轴同时使用正负区域：原点上方最多放置两个候选，其余候选从原点下方排列并可纵向滚动。
• 坐标节点均使用带轻阴影的圆形“图标 + 小文字”按钮；横纵轴容器保持透明，不绘制面板底色。
• 坐标按钮为 72px，轴容器预留阴影安全区；纵轴上下端使用渐隐遮罩提示仍可继续滚动。
• “确定”上下是同一分类序列的同步滚动视口，拖动任意一端时另一端同步位移，分类可连续经过原点上下区域。
• Y 轴使用受边界约束的自定义拖动，不启用浏览器原生弹性滚动；触达首尾后继续拖动不会产生过度位移或回弹虚影。
• 松手后根据拖动速度提供短距离减速惯性，惯性同样受首尾边界约束，触边立即停止。
• 圆形按钮仅使用柔和投影表达悬浮层级，不使用拟物厚度或透视高光；靠近原点的阴影使用渐隐收尾，避免硬裁切。
• 横轴减少上下内边距；圆形节点使用更清晰的 2px 分类色边框区分按钮边界。
• 横轴已选路径使用分类色实底与白色前景，和未选择的浅色圆形候选形成明确区分。
• “确定”使用方形按钮并建立独立前景层，Y 轴按钮与原点保留安全间距，滚动时不会被原点矩形覆盖。
• 选择器关闭时保留当前层级和选择状态，再次打开时从上一次状态继续，不重置到收支类型层。
• 横轴每一级均可点击并返回对应层重新选择；例如点击 支出 重新选择支出或收入，点击 餐饮 重新选择一级分类。
• 横轴固定占满抽屉可用宽度，纵轴固定覆盖完整键盘高度；候选数量只影响滚动，不改变坐标轴尺寸。
• 数字键盘不再放置分类键，右列为加、减和占据下面两格的整笔确认键。
• 点击选择器外部确认当前层级；选择到最后一级分类时自动确认并收起选择器。
• 备注为可选项，不自动获得焦点；用户手动点击备注后隐藏数字键盘，抽屉随内容收缩并交由系统键盘输入。
• 分类选择步骤 用分步骤画面表达交互状态（文件名暂时保留旧称）。
• 收入后续可复用同一套二维选择器，二期再承载 普通收入 / 报销 / 退款。

快速记账 仅保留为旧版独立页参考，不再作为主原型入口。

参考来源

参考了 legacy-cent-app 中的旧版方向：

• 账本卡片列表。
• 账本内顶部收入、结余、支出三栏。
• 按日期分组的流水。
• 底部快捷记账面板。
• 数字键盘式金额输入。