7.6 KiB
移动端导航与当天记录筛选
完成时间：2026-10-07 18:06（UTC+8）。
页面入口
主导航统一为总览、日历、账号、设置四项，手机底栏不再平铺所有页面。总览内保留变化记录；账号内提供账户、独立资产、债务；设置内提供设置与备份、定时计划、管理员后台。管理员入口仅对管理员显示，隐藏菜单偏好继续作用于子页面；若账户被隐藏但独立资产可见，点击账号会进入第一个可见子页面。设置入口始终保留。
设置的九类内容改用带文字标签的原生选择框，减少按钮堆叠。手机提供退出登录按钮，底部预留安全区，启用 viewport-fit=cover。新增导航显示当前页状态和键盘焦点；手机操作按钮至少 44px 高，底栏入口至少 56px 高。
使用的开源设计 skill
使用原作者 emilkowalski/skills，读取版本 e8a175de22ae1e49370fc144c1f3bb9aeedf988d，项目为 MIT 许可。已读取并应用 apple-design、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覆盖。
本次完成本地代码和文档更新，未推送或部署线上。移动端检查为浏览器模拟尺寸，未在实体手机验证安全区和软键盘。