feat: adopt Apple UI and four-tab mobile navigation

This commit is contained in:
陈煜 committed 2026-10-07 18:13:59 +08:00
1 parent daf9b458af
commit fb8cf1c938
20 files changed
+1662 -378

No files matched your search

+1 -1
View File
@@ -54,4 +54,4 @@ User.hiddenMenus 保存受枚举校验的菜单键,settings 不可隐藏;Use
## 快速记账标记与统计开关(2026-10-04)
Position.lastRepaymentMonth 和 lastBookedDate 分别记录 UTC+8 最后已还款月份与已记账日期,可空且仅保存最后一次人工标记。页面根据当前业务年月/日期显示状态,不通过定时任务删除旧值。标记接口使用用户归属、隐藏可见性、行锁及期望状态检查;网页使用 updatedAt 防止覆盖新操作。资产快速统计开关仅修改 included,不覆盖其他项目元数据。ZIP v9 保存新字段,金额历史不受标记影响。详细操作、接口和验收见 [快速记账更新](update-quick-entry-2026-10-04.md)。
Position.lastRepaymentMonth 记录 UTC+8 最后已还款月份,页面按当前业务月份显示,不通过定时任务删除旧值。还款标记接口使用用户归属、隐藏可见性、行锁及期望状态检查;网页使用 updatedAt 防止覆盖新操作。2026-10-07 起当天记账状态使用账号列表的派生 activityDate,从当天有效日期的 Revision 记录查询;lastBookedDate 仅为数据库和 ZIP v9 保留,不再参与筛选,booked-mark 接口已撤下。资产快速统计开关仅修改 included,不覆盖其他项目元数据。详细操作和验收见 [移动端导航与当天记录筛选](update-mobile-navigation-2026-10-07.md)。
@@ -0,0 +1,55 @@
# 移动端导航与当天记录筛选
完成时间:2026-10-07 18:06(UTC+8)。
## 页面入口
主导航统一为总览、日历、账号、设置四项,手机底栏不再平铺所有页面。总览内保留变化记录;账号内提供账户、独立资产、债务;设置内提供设置与备份、定时计划、管理员后台。管理员入口仅对管理员显示,隐藏菜单偏好继续作用于子页面;若账户被隐藏但独立资产可见,点击账号会进入第一个可见子页面。设置入口始终保留。
设置的九类内容改用带文字标签的原生选择框,减少按钮堆叠。手机提供退出登录按钮,底部预留安全区,启用 `viewport-fit=cover`。新增导航显示当前页状态和键盘焦点;手机操作按钮至少 44px 高,底栏入口至少 56px 高。
## 使用的开源设计 skill
使用原作者 [emilkowalski/skills](https://github.com/emilkowalski/skills),读取版本 `e8a175de22ae1e49370fc144c1f3bb9aeedf988d`,项目为 [MIT 许可](https://github.com/emilkowalski/skills/blob/main/LICENSE)。已读取并应用 [apple-design](https://github.com/emilkowalski/skills/blob/main/skills/apple-design/SKILL.md)、emil-design-eng、mobile-native、animate、review-animations(含 STANDARDS)、break-ui(含 CATALOG),并检查 pick-ui-library 的已有依赖原则。设计规范可直接用于本项目的 React/CSS,无需新增运行时依赖或安装全局工具。
Apple 风格落实为系统字体、蓝色主操作、浅灰分组、圆角卡片、半透明导航、明确当前页和浅色/深色主题。保留绿色余额和红色欠款语义;数值等宽,不截断金额。所有悬停效果按精细指针能力启用,触摸输入字号至少 16px,使用 dvh、安全区、原生 dialog 焦点锁定与 Escape 关闭。支持减少动画、减少透明度、高对比度;正文可选中,控制元素不选中。
其他仓库 skill 按适用范围执行:pick-ui-library 要求先复用现有组件,因此保留现有 Toast 并修正动效,不为 Sonner 增加依赖。animate-expo、write-swift 面向本项目未使用的原生技术;ask-sonner 面向未安装的 Sonner;prototype 的多版本原型与本次确定的风格不符;animation-vocabulary 用于动效命名,find-animation-opportunities/improve-animations 为建议或只读评审工作流。它们不作为额外功能、原生迁移或依赖更换要求。
| Before | After | Why |
| ------------------------ | -------------------------------------------------------------------- | ------------------------------ |
| 底栏平铺多个入口、小字号 | 四个主入口、12px 标签、二级导航 | 减少移动端视觉与点击负担 |
| 设置按钮铺满屏幕 | 单个分类选择框 | 渐进展示设置内容 |
| 高频页面切换 | 立即切换,无页面入场动画 | 不阻碍频繁记账 |
| 点击缺少触觉式反馈 | pointerdown 即时反馈,低频按钮 `scale(0.97)`;按下 140ms、释放 100ms | 明确反馈,避免布局动画 |
| 触屏沿用悬停动画 | hover 仅用于精细指针;减少动画时禁用位移,键盘和高频控制无动效 | 尊重输入方式与系统偏好 |
| Toast 不易中断的入场 | transform/opacity 180ms 入场、120ms 同方向离场,精确 ease-out | 可中断、速度不对称,不动画布局 |
| 长名称/极大金额挤在窄列 | 长卡片跨整行、分组文字换行、保留完整金额 | 保护真实内容可读性 |
review-animations 结论:**Approve(本次代码与浏览器范围)**。`apps/web/src/style.css:2951` 为输入反馈,`:3220` 为高频控制禁用过渡,`:1681` 与 Toast 结尾样式为可中断过渡,`apps/web/src/Toast.tsx:19` 为退出生命周期,`apps/web/src/App.tsx:156` 为原生模态框。仅 transform/opacity 动效、时长小于 300ms;实体 iOS/Android 的安全区、软键盘与滑动体验待硬件验收。
## 滚动条
使用细圆角灰色滚动条和透明轨道,浅色/深色各自配置滑块颜色;精细指针悬停加深。高对比度恢复标准宽度并增强颜色,系统强制颜色模式使用浏览器颜色,不隐藏滚动能力。
## 当天记录状态
账号列表接口新增派生字段 `activityDate`:当天有至少一条有效余额历史时返回当天 `YYYY-MM-DD`,否则为 `null`。查询使用用户归属、账户类型、隐藏资产可见性,以及 UTC+8 当天起点(包含)到次日起点(不包含)的 `Revision.effectiveDate` 区间。使用已有索引与关系存在性查询,不把历史记录全部传回浏览器,不增加数据库字段或迁移。
余额调整、初始余额、转账及还款的账户历史均属于记账数据;当天零差额记录也计入。这里与日历的收入支出统计口径不同:日历仍排除初始余额和转账等非收入支出。历史补录按账目有效日期判断,不能按保存时间或项目更新时间判断。
移除当天手动记账模式、其会话撤回类型和 `PATCH /api/positions/:id/booked-mark` 接口及 OpenAPI 声明。`lastBookedDate` 仅为现有数据库和 ZIP v9 保留,不参与状态或筛选;本月还款标记保持现有语义。删除、撤回或修改记录后重新读取状态;午夜/恢复窗口焦点检测日期变化后刷新,日期变化本身不执行到期计划。
快速记账提供“隐藏当天有记录 / 显示当天有记录”,并显示眼睛图标和 `aria-pressed` 状态;隐藏资产、本月未还款筛选也带眼睛图标。
## 验证
- 前后端 TypeScript 检查、前端生产构建通过。
- 项目单元回归 58 项通过,包括子页归属、隐藏菜单回退、管理员可见性、派生状态不读取旧手动标记。
- 在临时 MySQL 数据库运行快速记账集成测试通过:有效日期修改跨天、余额记录删除、转账双方状态和撤回、旧标记不影响实际记录状态、废弃接口返回 404、权限隔离与 ZIP v9 恢复。临时数据库和 API 已自动清理。
- 使用虚构账号数据,在 Edge 浏览器验证 320、375、390、430、768、1440px 布局;四个入口及账号/设置子页可达,当天筛选正常,未发现横向溢出或浏览器错误。
- break-ui 检查 Demo、Worst case、Empty、One、1,000 rows,最坏数据使用接口允许的 100 字名称、超长英文、单字、极大金额/负数/零。检查三种语言、浅色/深色、200% 字体,修正长卡片和放大后的头栏。开发数据选择器仅注入验收浏览器,不进入生产应用。
- 原生模态焦点和 Escape、键盘无动画、减少动画/透明度、高对比度、滚动条偏好与 Toast 实际错误/关闭路径通过。
- 截图仅用于本地视觉检查,未保存到 docs。保留有回归价值的 `scripts/check-mobile-ui.cjs`,删除临时命名脚本。先启动 Vite,再执行 `node scripts/check-mobile-ui.cjs`;需本地 Playwright,可用 `WORTHPATH_PLAYWRIGHT_MODULE` 指定模块路径、`WORTHPATH_UI_URL` 指定开发地址、`WORTHPATH_BROWSER_CHANNEL` 指定已安装浏览器(默认 msedge)。截图默认写入系统临时目录,可用 `WORTHPATH_UI_OUTPUT` 覆盖。
本次完成本地代码和文档更新,未推送或部署线上。移动端检查为浏览器模拟尺寸,未在实体手机验证安全区和软键盘。