RS6 修复移动响应式布局体系

这个提交包含在:
2026-05-11 12:52:30 +08:00
父节点 5dd4c96bec
当前提交 e399376e25
共修改 16 个文件,包含 841 行新增和 97 行删除
@@ -4,4 +4,4 @@ UI6-2,补 iPhone 11 企业微信命中测试,补强 Playwright 视觉和命中
UI6-3,修复底部 Tab 固定与点击命中,修复移动 Shell 在 iPhone 11 企业微信 WebView 下底部导航不在真实可点区域或被内容层遮挡的问题。,"1) 底部 Tab 固定在可见视口底部并预留 safe-area;2) 四个 Tab 等宽且触控高度不低于 44px;3) 第二项审批 Tab 可点击进入审批列表;4) 不影响 Redmi K60 和普通手机浏览器。","流程级验证:在 iPhone 11 企业微信 UA 下从 /mobile 点击底部审批,进入 /mobile/approvals 并显示 mobile-approvals-list;重复点击首页、报销、我的均可命中;无横向滚动。",playwright|manual,DONE,DONE,DONE,client/src/*,"[""UI6-2""]",移动审批一级 Tab 已取消前端权限禁用和路由 403;底部导航提升层级、触控区域和 safe-area 预留;iPhone 11 / Redmi K60 E2E 通过。
UI6-4,修复 iPhone 11 页面拥挤和控件挤压,调整移动首页、审批、报销和我的页面的小屏密度,避免文字和控件在 iPhone 11 企业微信 WebView 内相互挤压。,"1) iPhone 11 下核心卡片和按钮不重叠;2) 文字不挤出容器且不遮挡相邻控件;3) 保留报销详情吸底双按钮同行,不降级为单列;4) 移动端不出现 PC 表格或 PC 壳。","流程级验证:Playwright 截图检查 /mobile、/mobile/approvals、/mobile/reimbursements、/mobile/me、/mobile/reimbursements/:id;断言 scrollWidth <= viewportWidth + 2;人工视觉确认控件间距可读可点。",playwright|manual,DONE,DONE,DONE,client/src/*,"[""UI6-2""]",移动 Shell 改为可视视口高度、紧凑小屏 padding 和 overscroll 约束;E2E 断言无横向滚动、无 PC 表格、报销详情吸底双按钮仍同行。
UI6-5,本地构建与移动视觉回归,完成前端类型检查、构建和移动专项 E2E,覆盖 iPhone 11、Redmi K60、企业微信 UA、底部导航、审批入口、报销详情和 PDF 上传入口。,"1) cd client && npm run typecheck 通过;2) cd client && npm run build 通过;3) 移动视觉专项通过;4) 截图证据保存在 output/playwright/r6-iphone11-wecom-mobile-layout-hotfix。","流程级验证:cd client && npm run typecheck;cd client && npm run build;cd client && npm run test:e2e -- r5-real-device-feedback-mobile-ux.spec.ts r124-mobile-entry-matrix.spec.ts --workers=1 --reporter=list。",npm|playwright,DONE,DONE,DONE,client/tests/e2e/*|output/playwright/r6-iphone11-wecom-mobile-layout-hotfix,"[""UI6-3"",""UI6-4""]",已通过 npm run typecheck、npm run build、r5-real-device-feedback-mobile-ux.spec.ts、r124-mobile-entry-matrix.spec.ts;UI6-6 部署与真机复测仍待执行。
UI6-6,部署复测并恢复 R6 Gate,部署修复后做 R4 复检和企业微信真机复测,只有 iPhone 11 底部导航与拥挤问题关闭后才允许继续 R6-3。,"1) 部署后 /ready 正常;2) 公网 bundle findings=0;3) iPhone 11 企业微信底部第二项可点;4) Redmi K60 不回归;5) R6-ISSUE-001 状态关闭或降级为非阻断。","流程级验证:bash deploy/trialrun/deploy.sh;LIVE_SMOKE_BASE_URL=https://oa.hyinda.com bash scripts/qa/run-live-smoke-readiness.sh;人工真机复测 iPhone 11 企业微信打开 OA 并点击底部审批;回填 docs/trialrun/manual-trialrun-report.md。",bash|playwright|manual,DONE,DONE,TODO,deploy/trialrun/*|docs/trialrun/manual-trialrun-report.md,"[""UI6-5""]",已部署 47da709 到 https://oa.hyinda.com;/ready 正常;部署脚本公网 bundle 扫描 findings=0;live smoke readiness PASS,报告 artifacts/qa-flow/live-smoke-readiness-20260511-120413;公网 baseURL 下 iPhone 11 / Redmi K60 移动视觉专项通过,已覆盖首页快捷卡文字和图标间距。仍待用户真机确认 iPhone 11 企业微信底部审批可点、首页快捷卡不拥挤和 Redmi K60 不回归,确认后再置 Regression DONE。
UI6-6,部署复测并恢复 R6 Gate,部署修复后做 R4 复检和企业微信真机复测,只有 iPhone 11 底部导航与拥挤问题关闭后才允许继续 R6-3。,"1) 部署后 /ready 正常;2) 公网 bundle findings=0;3) iPhone 11 企业微信底部第二项可点;4) Redmi K60 不回归;5) R6-ISSUE-001 状态关闭或降级为非阻断。","流程级验证:bash deploy/trialrun/deploy.sh;LIVE_SMOKE_BASE_URL=https://oa.hyinda.com bash scripts/qa/run-live-smoke-readiness.sh;人工真机复测 iPhone 11 企业微信打开 OA 并点击底部审批;回填 docs/trialrun/manual-trialrun-report.md。",bash|playwright|manual,DONE,DONE,TODO,deploy/trialrun/*|docs/trialrun/manual-trialrun-report.md,"[""UI6-5""]",已升级到 RS6 响应式体系修复并部署到 https://oa.hyinda.com;/ready 正常;公网 bundle findings=0;live smoke readiness PASS,报告 artifacts/qa-flow/live-smoke-readiness-20260511-124651;公网移动视觉矩阵 320/360/375/390/393/414/430 全部通过。仍待用户真机确认 iPhone 11 企业微信底部审批可点、首页宫格不拥挤和 Redmi K60 不回归,确认后再置 Regression DONE。
1 ID Title Description Acceptance Test_Method Tools Dev_Status Review1_Status Regression_Status Files Dependencies Notes
4 UI6-3 修复底部 Tab 固定与点击命中 修复移动 Shell 在 iPhone 11 企业微信 WebView 下底部导航不在真实可点区域或被内容层遮挡的问题。 1) 底部 Tab 固定在可见视口底部并预留 safe-area;2) 四个 Tab 等宽且触控高度不低于 44px;3) 第二项审批 Tab 可点击进入审批列表;4) 不影响 Redmi K60 和普通手机浏览器。 流程级验证:在 iPhone 11 企业微信 UA 下从 /mobile 点击底部审批,进入 /mobile/approvals 并显示 mobile-approvals-list;重复点击首页、报销、我的均可命中;无横向滚动。 playwright|manual DONE DONE DONE client/src/* ["UI6-2"] 移动审批一级 Tab 已取消前端权限禁用和路由 403;底部导航提升层级、触控区域和 safe-area 预留;iPhone 11 / Redmi K60 E2E 通过。
5 UI6-4 修复 iPhone 11 页面拥挤和控件挤压 调整移动首页、审批、报销和我的页面的小屏密度,避免文字和控件在 iPhone 11 企业微信 WebView 内相互挤压。 1) iPhone 11 下核心卡片和按钮不重叠;2) 文字不挤出容器且不遮挡相邻控件;3) 保留报销详情吸底双按钮同行,不降级为单列;4) 移动端不出现 PC 表格或 PC 壳。 流程级验证:Playwright 截图检查 /mobile、/mobile/approvals、/mobile/reimbursements、/mobile/me、/mobile/reimbursements/:id;断言 scrollWidth <= viewportWidth + 2;人工视觉确认控件间距可读可点。 playwright|manual DONE DONE DONE client/src/* ["UI6-2"] 移动 Shell 改为可视视口高度、紧凑小屏 padding 和 overscroll 约束;E2E 断言无横向滚动、无 PC 表格、报销详情吸底双按钮仍同行。
6 UI6-5 本地构建与移动视觉回归 完成前端类型检查、构建和移动专项 E2E,覆盖 iPhone 11、Redmi K60、企业微信 UA、底部导航、审批入口、报销详情和 PDF 上传入口。 1) cd client && npm run typecheck 通过;2) cd client && npm run build 通过;3) 移动视觉专项通过;4) 截图证据保存在 output/playwright/r6-iphone11-wecom-mobile-layout-hotfix。 流程级验证:cd client && npm run typecheck;cd client && npm run build;cd client && npm run test:e2e -- r5-real-device-feedback-mobile-ux.spec.ts r124-mobile-entry-matrix.spec.ts --workers=1 --reporter=list。 npm|playwright DONE DONE DONE client/tests/e2e/*|output/playwright/r6-iphone11-wecom-mobile-layout-hotfix ["UI6-3","UI6-4"] 已通过 npm run typecheck、npm run build、r5-real-device-feedback-mobile-ux.spec.ts、r124-mobile-entry-matrix.spec.ts;UI6-6 部署与真机复测仍待执行。
7 UI6-6 部署复测并恢复 R6 Gate 部署修复后做 R4 复检和企业微信真机复测,只有 iPhone 11 底部导航与拥挤问题关闭后才允许继续 R6-3。 1) 部署后 /ready 正常;2) 公网 bundle findings=0;3) iPhone 11 企业微信底部第二项可点;4) Redmi K60 不回归;5) R6-ISSUE-001 状态关闭或降级为非阻断。 流程级验证:bash deploy/trialrun/deploy.sh;LIVE_SMOKE_BASE_URL=https://oa.hyinda.com bash scripts/qa/run-live-smoke-readiness.sh;人工真机复测 iPhone 11 企业微信打开 OA 并点击底部审批;回填 docs/trialrun/manual-trialrun-report.md。 bash|playwright|manual DONE DONE TODO deploy/trialrun/*|docs/trialrun/manual-trialrun-report.md ["UI6-5"] 已部署 47da709 到 https://oa.hyinda.com;/ready 正常;部署脚本公网 bundle 扫描 findings=0;live smoke readiness PASS,报告 artifacts/qa-flow/live-smoke-readiness-20260511-120413;公网 baseURL 下 iPhone 11 / Redmi K60 移动视觉专项通过,已覆盖首页快捷卡文字和图标间距。仍待用户真机确认 iPhone 11 企业微信底部审批可点、首页快捷卡不拥挤和 Redmi K60 不回归,确认后再置 Regression DONE。 已升级到 RS6 响应式体系修复并部署到 https://oa.hyinda.com;/ready 正常;公网 bundle findings=0;live smoke readiness PASS,报告 artifacts/qa-flow/live-smoke-readiness-20260511-124651;公网移动视觉矩阵 320/360/375/390/393/414/430 全部通过。仍待用户真机确认 iPhone 11 企业微信底部审批可点、首页宫格不拥挤和 Redmi K60 不回归,确认后再置 Regression DONE。
@@ -0,0 +1,8 @@
ID,Title,Description,Acceptance,Test_Method,Tools,Dev_Status,Review1_Status,Regression_Status,Files,Dependencies,Notes
RS6-1,建档 R6 移动响应式体系修复,记录 iPhone 11 企业微信真机仍存在控件拥挤和图标文字挤压;本轮改为系统性移动响应式修复,不再按单机型补丁处理。,"1) 本 CSV 存在且校验通过;2) UI6-6 继续保持未完成;3) R6-ISSUE-001 保持阻断或更新为响应式体系修复中;4) 不改变审批链、通知通道、PDF-only 发票或后端接口。","流程级验证:python3 /home/shunli/.codex/skills/plan/scripts/validate_issues_csv.py issues/2026-05-11_12-17-07-r6-mobile-responsive-system-hotfix.csv;人工核对 UI6-6 未被误置 DONE;git diff --check。",python3|git|manual,DONE,DONE,DONE,issues/2026-05-11_12-17-07-r6-mobile-responsive-system-hotfix.csv|docs/trialrun/manual-trialrun-report.md,[],已建档并更新 R6-ISSUE-001 为响应式体系修复中;UI6-6 未置 DONE;回滚路径为还原本 Issue 涉及的 client/docs/tests 变更并重新部署上一版。
RS6-2,建立移动响应式设计基线和共享样式,在产品设计规则和移动全局样式中固定页面边距、卡片间距、底部导航高度、吸底操作高度、安全区和小屏排版策略。,"1) docs/product-design-rules.md 明确移动响应式基线;2) 移动样式使用宽度区间和最小尺寸自动适配,不依赖具体机型;3) 不使用 viewport 缩放字体;4) 触控目标不低于 44px。","流程级验证:阅读 docs/product-design-rules.md 中移动响应式基线;检查 client/src/styles/mobile-touch.css 中移动 token;在 320/360/375/390/393/414/430 宽度下验证无横向滚动和触控尺寸。",manual|playwright,DONE,DONE,DONE,docs/product-design-rules.md|client/src/styles/mobile-touch.css,["RS6-1"],已补移动响应式设计规则和 mobile-touch token;本地视觉矩阵覆盖 320-430 宽度。
RS6-3,重构移动首页快捷入口为图标宫格,将移动首页审批、传票据、报销、我的等快捷入口从刚性两列卡片改为图标宫格,图标在上、短标题在下,小屏不常驻展示长说明。,"1) 首页快捷入口 4 项等宽展示;2) 图标槽和标题槽固定,标题单行省略;3) 不出现图标压文字、文字逐字换行或卡片撑破;4) 每项触控高度不低于 44px。","流程级验证:在 /mobile 的 320/360/375/390/393/414/430 宽度下截图;断言 mobile-action-* 图标、标题、容器不重叠;点击审批/传票据/报销/我的入口能进入对应页面。",playwright|manual,DONE,DONE,DONE,client/src/pages/MobilePortalPage.tsx|client/src/styles/mobile-touch.css,["RS6-2"],首页快捷入口已改为用户确认的图标宫格方案,审批入口固定展示;不改成每行一个按钮。
RS6-4,统一底部导航滚动容器和吸底操作,统一移动 Shell、底部 Tab、内容滚动区和报销详情吸底操作的 safe-area 与高度预留策略。,"1) 底部导航固定为首页/审批/报销/我的;2) 四个 Tab 等宽且中心点 elementFromPoint 命中自身;3) 深层报销详情隐藏底部 Tab;4) 报销详情吸底双按钮保持同行且内容不被遮挡。","流程级验证:Playwright 访问 /mobile、/mobile/approvals、/mobile/reimbursements、/mobile/reimbursements/:id;断言 scrollWidth <= viewportWidth + 2;断言底部 Tab 中心点可点;断言吸底双按钮同行且高度 >=44px。",playwright,DONE,DONE,DONE,client/src/layouts/AppShellLayout.tsx|client/src/components/mobile/MobileBottomNav.tsx|client/src/pages/MobileReimbursementDetailPage.tsx,["RS6-2"],已统一移动 Shell、底部导航和报销详情吸底操作 safe-area;报销详情主按钮仍保持双按钮同行。
RS6-5,巡检 R6 相关移动页刚性布局,巡检移动审批、报销、通知、票据上传、请假、我的等页面,清理小屏刚性两列和文字挤压风险。,"1) R6 相关移动页在窄屏无 PC 壳、无桌面表格、无横向溢出;2) 信息字段可根据最小宽度从两列变一列;3) 核心操作按钮保持可点且无遮挡;4) 不扩大业务功能范围。","流程级验证:Playwright 覆盖 /mobile/approvals、/mobile/reimbursements、/mobile/reimbursements/:id、/mobile/me、/mobile/notifications、/mobile/capture、/mobile/leave;人工检查截图中无挤压和遮挡。",playwright|manual,DONE,DONE,DONE,client/src/pages/Mobile*.tsx,"[""RS6-3"",""RS6-4""]",已巡检并清理 R6 关键移动页刚性布局;只修布局体系,不改审批链、组织关系、通知通道或上传业务规则。
RS6-6,补跨视口视觉自动化矩阵,新增或补强移动视觉 E2E,覆盖 320x568、360x740、375x667、390x844、393x873、414x896、430x932 和企业微信/普通移动 UA。,"1) 新视觉矩阵截图输出到 output/playwright/r6-mobile-responsive-system-hotfix;2) 断言无横向滚动;3) 断言底部 Tab 命中;4) 断言首页图标宫格不重叠;5) 断言报销详情吸底双按钮同行。","流程级验证:cd client && npm run test:e2e -- r6-mobile-responsive-system-hotfix.spec.ts r5-real-device-feedback-mobile-ux.spec.ts r124-mobile-entry-matrix.spec.ts --workers=1 --reporter=list。",playwright,DONE,DONE,DONE,client/tests/e2e/r6-mobile-responsive-system-hotfix.spec.ts|client/tests/e2e/r5-real-device-feedback-mobile-ux.spec.ts,"[""RS6-3"",""RS6-4"",""RS6-5""]",本地 typecheck/build 通过;移动回归组合 10 passed,截图输出到 output/playwright/r6-mobile-responsive-system-hotfix。
RS6-7,部署公网复检并回填 R6 移动阻断,本地验证通过后部署公网,复检 /ready、bundle、live smoke、PDF OCR 和企微个人应用消息,等待真机确认后关闭或降级 R6-ISSUE-001。,"1) 部署后 /ready 正常;2) 公网 bundle findings=0;3) live smoke readiness PASS;4) 公网移动视觉专项通过;5) 用户真机确认 iPhone 11 企业微信不拥挤、审批可点、Redmi K60 不回归后回填 UI6-6 和 R6 问题状态。","流程级验证:bash deploy/trialrun/deploy.sh;LIVE_SMOKE_BASE_URL=https://oa.hyinda.com bash scripts/qa/run-live-smoke-readiness.sh;E2E_MODE=live 或 BASE_URL=https://oa.hyinda.com 运行移动视觉专项;人工真机复测并回填 docs/trialrun/manual-trialrun-report.md。",bash|playwright|manual,DONE,DONE,TODO,deploy/trialrun/*|docs/trialrun/manual-trialrun-report.md,["RS6-6"],已部署到 https://oa.hyinda.com;/ready 正常;公网 bundle findings=0;live smoke readiness PASS,报告 artifacts/qa-flow/live-smoke-readiness-20260511-124651;公网移动视觉专项 7 passed。仍待用户真机确认 iPhone 11 企业微信不拥挤、审批可点、Redmi K60 不回归后再置 Regression DONE。
无法渲染此文件,因为它包含了意外字符,其位于第 3 行和第 756 列。