56 lines
7.6 KiB
Markdown
56 lines
7.6 KiB
Markdown
# 移动端导航与当天记录筛选
|
||
|
||
完成时间：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` 覆盖。
|
||
|
||
本次完成本地代码和文档更新，未推送或部署线上。移动端检查为浏览器模拟尺寸，未在实体手机验证安全区和软键盘。
|