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