29 lines
3.2 KiB
Markdown
29 lines
3.2 KiB
Markdown
# 账户工具栏、毛玻璃底栏和手机日历
|
||
|
||
完成时间：2026-10-08 13:02（UTC+8）。
|
||
|
||
继续采用原作者 emilkowalski/skills 的 apple-design、emil-design-eng、mobile-native、review-animations 和 break-ui 适用规范，来源和读取版本见 [设计规范说明](update-mobile-navigation-2026-10-07.md)。本次沿用现有 React/CSS 与浏览器原生控件，无新增依赖，无数据库结构和金额计算变更。
|
||
|
||
## 改动
|
||
|
||
| Before | After | Why |
|
||
| ------------------------------------------ | ------------------------------------------------------------------ | ------------------------------------ |
|
||
| 快速记账、全宽分组选择框、分组排序各占一行 | 桌面工具栏单行：模式按钮、紧凑选择框、右侧排序；手机按可用宽度换行 | 减少空白与纵向堆叠 |
|
||
| 手机底栏贴满屏幕底边 | 四入口悬浮圆角胶囊，半透明背景、24px 毛玻璃、细描边和柔和阴影 | 参考用户图二，保留内容层次与入口辨识 |
|
||
| 手机日期格子显示完整金额并任意断行 | 手机日期格子仅显示日期、收入/支出小点；选中日期在下方显示完整收支 | 七列布局保持稳定，金额不丢失 |
|
||
| 重复日历标题与常驻长说明 | 月份选择与可展开的计算说明，隐藏日历页通用副标题 | 更快看到整月日期 |
|
||
|
||
底栏使用安全区距离，页面预留滚动空间；深色模式使用深色透明背景。减少透明度或高对比度时回退实色，系统强制颜色时使用系统背景/边框。底栏保留四个入口、当前页状态与键盘焦点。未增加折射装饰或导航切换动画。
|
||
|
||
手机日历的今天以蓝色字标识、选中日期以蓝底标识；绿/红点对应收入/支出，灰点对应缺少汇率。屏幕阅读器可读完整日期、收支和缺少汇率状态；点击后显示完整金额，桌面仍保留格内金额。原有月份范围、未来日期禁用、隐藏资产范围和收支计算规则不变。日期选择为高频操作，立即响应，无额外位移动效。
|
||
|
||
## 验证与边界
|
||
|
||
- 前端 TypeScript 检查与生产构建通过。
|
||
- 多语言和快速记账相关单元测试 7 项通过。
|
||
- 复用并扩展 scripts/check-mobile-ui.cjs，以虚构数据验证桌面工具栏单行、手机日历大额收支、点击日期后的完整金额、毛玻璃背景，以及 320/390/430px 日历、浅色/深色、200% 文字；保留原有六种尺寸和空/单条/1,000 条账户回归。
|
||
- 减少透明度、高对比度、键盘、原生弹窗和 Toast 回归通过；无横向溢出或浏览器脚本错误。截图仅存本地预览目录，docs 无图片。
|
||
- review-animations：**Approve（代码与浏览器范围）**。仅增加静态布局和视觉材料，日期按钮无过渡。实体 iOS Safari 的模糊渲染、安全区及软键盘仍需硬件验证。
|
||
|
||
保留可复用浏览器回归脚本，没有新增临时脚本。仅本地提交，不推送、不部署。
|