feat: refine account toolbar and mobile glass calendar UI
This commit is contained in:
1 parent
79e24f7ae3
commit
b23a1c1e43
9 files changed
+361
-17
No files matched your search
@@ -0,0 +1,28 @@
|
||||
# 账户工具栏、毛玻璃底栏和手机日历
|
||||
|
||||
完成时间: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 的模糊渲染、安全区及软键盘仍需硬件验证。
|
||||
|
||||
保留可复用浏览器回归脚本,没有新增临时脚本。仅本地提交,不推送、不部署。
|
||||
Reference in new issue
Block a user