MUD6 推广移动统一设计
这个提交包含在：
@@ -86,6 +86,7 @@ AGENTS.md 只放硬约束和入口，不复制长规则。
|
||||
|
||||
- 改移动页面前先读 `docs/product-design-rules.md`，确认是否属于底部一级 Tab、首页图标宫格、卡片列表、深层 Push 页、顶部返回、吸底主操作或安全区问题。
|
||||
- 新移动页默认纳入统一响应式 token 和跨视口视觉矩阵，覆盖 320、360、375、390、393、414、430px；不得只按某一台手机打补丁。
|
||||
- 专用 `/mobile` 路由默认使用统一移动槽位、`mobile-card`、移动列表卡片和吸底操作；不得把桌面 `card-std p-4` 作为手机主容器，也不得为单个页面自造另一套间距、卡片或图标布局。
|
||||
- 角色差异采用“同框架、按角色裁剪内容和动作”：员工、审批人、财务、管理员、负责人看到不同入口和动作，但不创建互不一致的角色专属移动 UI。
|
||||
- 真机验证暂停时记录为 `PAUSED`；自动化通过不能替代代表性真机确认，也不能关闭仍待人工确认的移动阻断。
|
||||
|
||||
|
||||
@@ -100,6 +100,7 @@ R6 之后的 PC、移动和审批体验参考国内主流协同/OA 产品的共
|
||||
## 移动统一页面范式
|
||||
|
||||
- 所有 `/mobile` 页面默认复用同一套移动 Shell、响应式 token、底部导航、安全区和视觉矩阵；不允许单页自造布局体系解决局部拥挤。
|
||||
- 专用 `/mobile` 页面包括移动首页、审批、报销列表、报销详情、我的、个人设置、通知、票据上传、请假和资产扫码；这些页面必须先使用统一移动组件和样式，再按业务差异裁剪内容。
|
||||
- 手机端默认隐藏 PC 侧边栏和顶栏，使用移动首页、底部导航和轻量卡片。
|
||||
- 菜单不应占用大量空间；常用入口放底部导航，更多入口放“我的”。
|
||||
- 移动底部导航固定为“首页、审批、报销、我的”；票据上传作为首页快捷入口和报销页内操作，不作为底部一级 Tab。
|
||||
@@ -117,6 +118,8 @@ R6 之后的 PC、移动和审批体验参考国内主流协同/OA 产品的共
|
||||
- 企业微信入口应尽量免登录；绑定失败或权限不足时显示明确下一步，而不是让用户反复登录。
|
||||
- 头像 fallback 遵循国内中文习惯：中文/CJK 姓名默认取首个可见字符，英文或拼音姓名保留两段首字母。
|
||||
- “我的”页和更多入口使用组件级自适应槽位：头像/图标槽固定，文字槽使用 `minmax(0, 1fr)` 可收缩，间距使用移动 token 或 `clamp()`；不按具体 iPhone/Android 机型写补丁，不通过放大字号、放大卡片或改成单列来规避图文拥挤。
|
||||
- 所有专用 `/mobile` 页面统一使用移动槽位和移动卡片：图标/头像/状态槽固定，文字槽可收缩，列表项使用移动列表卡片，提示、空状态和表单分组使用移动 token；不得把桌面 `card-std p-4` 当作移动主容器重新引入。
|
||||
- 移动卡片保持白底、浅边框、轻阴影，不显示 PC 端 `SectionPanel` 的蓝青色顶边装饰线。
|
||||
- 移动角色差异采用“同框架、按角色裁剪内容和动作”：员工、审批人、财务、管理员、负责人看到不同入口、摘要、动作和敏感信息，但不做多套角色专属移动 UI。
|
||||
- 移动验收必须包含跨视口自动化和代表性真机确认；若真机验证暂缓，只能记为 `PAUSED`，不能把相关移动阻断标为完成。
|
||||
|
||||
|
||||
@@ -60,10 +60,12 @@
|
||||
|
||||
| ID | 级别 | 角色 | 入口/设备 | 流程 | 复现步骤 | 当前处理 | 负责人 | 状态 | 关联 Issue |
|
||||
| --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
|
||||
| R6-ISSUE-001 | 阻断 | 审批人 / 员工 | iPhone 12 / iOS 14.1 / 企业微信 WebView | 移动底部导航、审批入口、首页快捷卡 | 旧记录误写为 iPhone 11；用户更正为 iPhone 12 / iOS 14.1。真机截图显示首页快捷卡和底部 Tab 的字体图标漂移、重影、挤压，底部“审批”体验不稳定；自动化 Chromium UA 截图与真实 iOS 企业微信 WebView 存在差异 | `PAUSED`：WCM6 已部署公网并完成自动复检，移动核心图标改 SVG，补企业微信 WebView viewport/字号/safe-area，底部角标独立定位；公网 WCM6 视觉专项 8 passed，live smoke readiness PASS，截图 `output/playwright/r6-wecom-mobile-rendering-hardening/`；待 iPhone 12 / iOS 14.1 / 企业微信和 Redmi K60 真机确认后关闭或降级 | Codex / 待指派 | open | `issues/2026-05-11_20-38-33-r6-wecom-mobile-rendering-hardening.csv` |
|
||||
| R6-ISSUE-001 | 阻断 | 审批人 / 员工 | iPhone 12 / iOS 14.1 / 企业微信 WebView | 移动底部导航、审批入口、首页快捷卡 | 旧记录误写为 iPhone 11；用户更正为 iPhone 12 / iOS 14.1。真机截图显示首页快捷卡和底部 Tab 的字体图标漂移、重影、挤压，底部“审批”体验不稳定；自动化 Chromium UA 截图与真实 iOS 企业微信 WebView 存在差异 | 已关闭：WCM6/MME6 已部署公网并完成自动复检，移动核心图标改 SVG，补企业微信 WebView viewport/字号/safe-area，底部角标独立定位，`/mobile/me` 图文槽位和卡片顶边完成自适应收口；用户确认“看过了，可以没问题”。后续若出现移动回归，另建新 Issue 处理。 | Codex | closed | `issues/2026-05-11_20-38-33-r6-wecom-mobile-rendering-hardening.csv`; `issues/2026-05-11_22-42-11-r6-mobile-me-adaptive-visual-polish.csv`; `issues/2026-05-11_23-26-00-r6-mobile-unified-design-rollout.csv` |
|
||||
| R6-ISSUE-002 | 一般 | 自动化 / 员工与财务测试账号 | 本地隔离 E2E / PC | 报销审批进度、报销支付批次 | `BUSINESS_FLOW_GROUPS=reimbursement bash scripts/qa/run-business-flow-gates.sh local` 中 2 条用例曾失败，失败点为 Playwright 查找旧导航入口 `票据中心`；当前正式员工路径应从报销详情添加 PDF 发票 | 已关闭：测试已改为报销详情页“添加发票”路径，不恢复普通员工“票据中心”入口；支付批次用例同步按业务编号定位待办，并按金额选择财务或财务主管二级审批；报销业务流 gate 10 passed、1 skipped | Codex | closed | `issues/2026-05-11_15-50-00-r6-reimbursement-e2e-nav-alignment.csv` |
|
||||
|
||||
MME6 补充（2026-05-11）：针对用户补充的 iPhone 12 / iOS 14.1 图文贴近与 iPhone 14 / iOS 16.2 卡片顶边观感，已把 `/mobile/me` 改为固定头像/图标槽 + `minmax(0, 1fr)` 文字槽，移动卡片顶边装饰线仅在 `/mobile` 作用域禁用，并将该规则写入产品设计规约。本地 `client typecheck`、`client build`、WCM6 视觉专项 8 passed、R5/R6/R124 移动相关回归 10 passed；部署后 `/ready` 正常、public bundle `findings=0`、live smoke readiness PASS、真实 OCR 样票返回重复发票可解释终态且测试通过，公网 WCM6 视觉专项 8 passed，报告 `artifacts/qa-flow/live-smoke-readiness-20260511-230918`。三台代表性真机确认前，`R6-ISSUE-001` 继续 `open/PAUSED`。
|
||||
MME6 补充（2026-05-11）：针对用户补充的 iPhone 12 / iOS 14.1 图文贴近与 iPhone 14 / iOS 16.2 卡片顶边观感，已把 `/mobile/me` 改为固定头像/图标槽 + `minmax(0, 1fr)` 文字槽，移动卡片顶边装饰线仅在 `/mobile` 作用域禁用，并将该规则写入产品设计规约。本地 `client typecheck`、`client build`、WCM6 视觉专项 8 passed、R5/R6/R124 移动相关回归 10 passed；部署后 `/ready` 正常、public bundle `findings=0`、live smoke readiness PASS、真实 OCR 样票返回重复发票可解释终态且测试通过，公网 WCM6 视觉专项 8 passed，报告 `artifacts/qa-flow/live-smoke-readiness-20260511-230918`。用户已确认当前设计可接受，`R6-ISSUE-001` 关闭；MUD6 继续把该设计推广到所有专用 `/mobile` 页面。
|
||||
|
||||
MUD6 收口（2026-05-11）：已将 MME6 槽位自适应方案推广到专用 `/mobile` 路由：移动首页、审批、报销列表、报销详情、我的、个人设置、通知、票据上传、请假和资产扫码。通用移动样式固定图标/头像槽、`minmax(0, 1fr)` 文本槽、`clamp()` 间距、`mobile-card`、移动列表卡片、空状态和深层页吸底操作；业务角色差异继续按权限裁剪入口和动作，不拆多套 UI。本地 `client typecheck`、`client build`、MUD6 全移动页视觉专项 7 passed、WCM6/RS6/R124 回归 16 passed；已部署到 `https://oa.hyinda.com`，`/ready` 正常、public bundle `findings=0`、live smoke readiness PASS、真实 OCR 样票为重复发票可解释终态且通过，公网 MUD6 视觉专项 7 passed，报告 `artifacts/qa-flow/live-smoke-readiness-20260511-235918`。R6-3 可恢复执行试运行前检查，建议仍抽查 iPhone 12 / iOS 14、iPhone 14 / iOS 16.2、Redmi K60 的企业微信首页、审批、报销详情、我的和通知。
|
||||
|
||||
级别定义：
|
||||
|
||||
|
||||
@@ -98,7 +98,7 @@
|
||||
| 工作台入口与免登录 | `oa_smoke_01` | `SMOKE002` | 从企业微信工作台进入 OA，已绑定后免登录 | 通过 | 用户确认；截图/录屏不提交仓库 |
|
||||
| 提交人移动报销体验 | `oa_smoke_01` | `SMOKE002` | 移动首页、报销页、详情页、PDF 发票入口可用 | 公网自动视觉通过；真机核心链路通过 | `output/playwright/r5-live-mobile-wecom-visual/` |
|
||||
| 审批人移动待办体验 | `oa_smoke_02` | `SMOKE101` | 移动审批待办、审批详情、结果反馈可用 | 公网自动视觉通过；真机审批与消息回流通过 | `output/playwright/r5-live-mobile-wecom-visual/` |
|
||||
| 移动底部导航与深层页 | `oa_smoke_01` / `oa_smoke_02` | `SMOKE002` / `SMOKE101` | 首页、审批、报销、我的固定可见；报销详情隐藏底部 Tab，吸底双按钮不遮挡 | `PAUSED`：WCM6 已部署公网且自动视觉通过；代表性真机确认待补 | `output/playwright/r6-wecom-mobile-rendering-hardening/` |
|
||||
| 移动底部导航与深层页 | `oa_smoke_01` / `oa_smoke_02` | `SMOKE002` / `SMOKE101` | 首页、审批、报销、我的固定可见；报销详情隐藏底部 Tab，吸底双按钮不遮挡 | 通过：WCM6/MME6 已部署公网且自动视觉通过；用户确认当前设计可接受，MUD6 继续推广统一设计 | `output/playwright/r6-wecom-mobile-rendering-hardening/` |
|
||||
| 通知与 deeplink | `oa_smoke_01` / `oa_smoke_02` | `SMOKE002` / `SMOKE101` | 通知能回到移动待办或详情页 | 真机通过：收到个人应用消息，点击后首次需点进入工作台，后续可直达移动审批 | `output/playwright/r5-wecom-app-message-live/` |
|
||||
|
||||
自动化补充证据（用于审批链业务验收）：
|
||||
@@ -113,8 +113,9 @@
|
||||
- `2026-05-11` 公网自动视觉补充：部署 `795e976` 后，Playwright 企业微信 UA 覆盖 iPhone 近似视口与 Redmi K60 视口；`SMOKE002` 移动首页、报销列表、报销详情、PDF-only 上传入口通过，`SMOKE101` 移动审批列表通过；截图目录 `output/playwright/r5-live-mobile-wecom-visual/`。用户已确认真实企业微信工作台入口和免登录通过。
|
||||
- `2026-05-11` 通知与 deeplink 自动视觉补充：`SMOKE101` 现有两条未读报销待办站内通知，iPhone 近似视口与 Redmi K60 近似视口、企业微信 UA 下通知页无横向溢出，通知卡片和“查看”按钮可见；点击后进入 `/mobile/approvals?taskId=177b3a9e-67fe-447d-92f4-96a652a06841` 移动审批详情，无 PC 壳混入，截图目录 `output/playwright/r5-notification-deeplink-live/`。该历史待办已处理，因此本证据只证明站内通知和移动 deeplink，不证明新待办审批按钮；通知投递审计显示渠道 `R50-MOCK-007334` 为 `mock_sent`，真实企业微信外发应用消息仍待通道确认或真机记录。
|
||||
- `2026-05-11` 个人企微应用消息补充：部署 `b1ae41f` 后启用 `R5-WECOM-APP-PERSONAL / wecom_app_message`，停用旧 mock 渠道；`SMOKE002` 创建请假测试单据并生成 `SMOKE101` 待办 `936362d8-c4e0-454f-a589-9c9653bcbfda`，通知 `9ee0602e-66a5-4a6e-81e5-04d41908c782` 投递审计为 `wecom_app_sent`、`errcode=0`、无 `invaliduser`。iPhone 近似视口与 Redmi K60 企业微信 UA 自动视觉验证通知列表和审批详情均无横向溢出，截图目录 `output/playwright/r5-wecom-app-message-live/`。用户确认手机企业微信 `oa_smoke_02` 收到“海音达工作台”应用消息，标题正确；点击后首次进入会提示进入工作台，进入后可看到移动审批，后续再次进入可直接看到移动审批；存在消息通知但未观察到系统弹窗。
|
||||
- `2026-05-11` R6 移动体验补充：RS6 响应式体系修复已完成公网自动化，320/360/375/390/393/414/430px 视觉矩阵通过；用户补充真实设备为 iPhone 12 / iOS 14.1 / 企业微信，截图显示字体图标漂移、重影和首页/底部导航视觉拥挤。当前记录为 `PAUSED`，不得将 `RS6-7`、`UI6-6` 或 `R6-ISSUE-001` 置为完成；WCM6 已部署公网并完成自动复检，移动核心 SVG 图标、企业微信 WebView 基线、多手机视口和字体失败场景均已覆盖，公网 WCM6 视觉专项 8 passed，截图目录 `output/playwright/r6-wecom-mobile-rendering-hardening/`；R6-3 继续等待代表性真机确认。
|
||||
- `2026-05-11` MME6 我的页自适应补充：针对 iPhone 12 / iOS 14.1 企业微信中图文贴近和 iPhone 14 / iOS 16.2 企业微信中卡片顶边观感，`/mobile/me` 已改为固定头像/图标槽 + 可收缩文字槽，移动卡片顶边装饰线仅在 `/mobile` 作用域禁用。本地 WCM6 视觉专项 8 passed，R5/R6/R124 移动相关回归 10 passed；部署后 `/ready` 正常、public bundle `findings=0`、live smoke readiness PASS、真实 OCR 样票返回重复发票可解释终态且测试通过，公网 WCM6 视觉专项 8 passed，报告 `artifacts/qa-flow/live-smoke-readiness-20260511-230918`。iPhone 12 / iPhone 14 / Redmi K60 真机确认前，`R6-ISSUE-001` 继续 `PAUSED`。
|
||||
- `2026-05-11` R6 移动体验补充：RS6 响应式体系修复已完成公网自动化，320/360/375/390/393/414/430px 视觉矩阵通过；用户补充真实设备为 iPhone 12 / iOS 14.1 / 企业微信，截图显示字体图标漂移、重影和首页/底部导航视觉拥挤。该阶段曾记录为 `PAUSED`，不得仅凭自动化关闭；随后 WCM6/MME6 已部署公网并完成自动复检，移动核心 SVG 图标、企业微信 WebView 基线、多手机视口、字体失败场景和 `/mobile/me` 自适应均已覆盖，公网 WCM6 视觉专项 8 passed，截图目录 `output/playwright/r6-wecom-mobile-rendering-hardening/`。用户已确认当前设计可接受，`R6-ISSUE-001` 关闭；后续移动回归另建新 Issue。
|
||||
- `2026-05-11` MME6 我的页自适应补充：针对 iPhone 12 / iOS 14.1 企业微信中图文贴近和 iPhone 14 / iOS 16.2 企业微信中卡片顶边观感，`/mobile/me` 已改为固定头像/图标槽 + 可收缩文字槽，移动卡片顶边装饰线仅在 `/mobile` 作用域禁用。本地 WCM6 视觉专项 8 passed，R5/R6/R124 移动相关回归 10 passed；部署后 `/ready` 正常、public bundle `findings=0`、live smoke readiness PASS、真实 OCR 样票返回重复发票可解释终态且测试通过，公网 WCM6 视觉专项 8 passed，报告 `artifacts/qa-flow/live-smoke-readiness-20260511-230918`。用户已确认当前设计可接受，`R6-ISSUE-001` 关闭；MUD6 继续把该设计推广到所有专用 `/mobile` 页面，后续若有移动回归另建新 Issue。
|
||||
- `2026-05-11` MUD6 全移动页统一补充：专用 `/mobile` 路由已统一使用固定图标/头像槽、可收缩文字槽、`mobile-card`、移动列表卡片、空状态、安全区和吸底操作。覆盖 `/mobile`、审批、报销列表、报销详情、我的、个人设置、通知、票据上传、请假和资产扫码；不改后端、审批链、权限模型、PDF-only 规则或企业微信个人应用消息通道。本地 MUD6 视觉专项 7 passed，WCM6/RS6/R124 回归 16 passed；部署到 `https://oa.hyinda.com` 后 `/ready` 正常、public bundle `findings=0`、live smoke readiness PASS、真实 OCR 样票为重复发票可解释终态且通过，公网 MUD6 视觉专项 7 passed，报告 `artifacts/qa-flow/live-smoke-readiness-20260511-235918`。R6-3 可恢复试运行前检查，仍建议抽查 iPhone 12 / iOS 14、iPhone 14 / iOS 16.2、Redmi K60 企业微信。
|
||||
|
||||
- 经理账号可在移动端看到审批待办。
|
||||
- 审批详情可查看申请摘要、附件、发票、审批记录。
|
||||
|
||||
在新工单中引用
屏蔽一个用户