feat: complete device onboarding and mobile binding workflows

2026-09-12 08:57:29 +08:00
parent 7846f30d0b
commit 98fb2965d0
116 changed files with 15669 additions and 64 deletions
@@ -0,0 +1,27 @@
+# 用户端手机适配
+
+适配范围为 `CustomerPortal` 的全部 11 个页面：首页、聊天记录、故事与记忆、长者资料、提醒与待办、家庭管理、陪伴设备、内容分享、数据与授权、服务用量、设置与权限，以及这些页面的资料编辑、邀请、设备配置、审核和授权弹窗。
+
+- 900px 及以下使用抽屉导航，支持搜索、遮罩关闭、Escape、关闭后恢复焦点和窗口尺寸变化。桌面仍使用侧栏。
+- 600px 及以下将表单、列表操作和详情改为单列，长名称和资源编号可换行。家庭切换、年度活动日历与权限表在各自区域内横向滚动，手机日历默认定位到最近日期。
+- 聊天采用列表与摘要上下排列，选中后定位摘要，可返回聊天列表；手机上的“更多筛选”保留语音方式和起止日期筛选。
+- 表单控件使用适合触屏的尺寸，手机输入文字至少为 16px；年度日历日期格为 24px。弹窗使用动态视口高度和安全区域边距，长表单可以滚动到底部。
+- 手机覆盖规则集中在 `web/src/customer-responsive.css`，在现有主题之后加载，限定于用户端。
+
+## 回归检查
+
+在 `web` 目录执行 `npm run dev -- --host 127.0.0.1`。在项目根目录使用已安装的 Playwright 运行：
+
+```powershell
+$env:PLAYWRIGHT_REQUIRE_FROM = '包含 Playwright 依赖的目录/package.json'
+$env:VISUAL_WEB_URL = 'http://127.0.0.1:5173'
+node test/e2e/visual-customer-mobile.mjs
+```
+
+默认使用本机 Google Chrome；可通过 `CHROME_PATH` 指定浏览器可执行文件。未安装 Playwright 时，可先用 `npm install --prefix .tmp-mobile-qa --no-audit --no-fund playwright` 安装到忽略的临时目录，再把 `PLAYWRIGHT_REQUIRE_FROM` 设置为该目录下 `package.json` 的绝对路径。
+
+脚本覆盖 320、375、390、430、768、900、1024、1440px 的所有页面，以及横屏、登录、空数据、加载失败、短视口表单、导航交互和主要操作弹窗。`MOBILE_WIDTHS` 可指定逗号分隔的宽度；`MOBILE_INTERACTIONS_ONLY=1` 只执行对应宽度的交互检查。截图和检查结果保存在 `.design-evidence/customer-mobile/`。
+
+测试使用合成家庭数据拦截全部业务 API，非 GET 请求会直接失败，不依赖后端或修改业务数据。该检查验证布局和前端交互，不代替真实身份认证、后端业务验收或 iPhone Safari / Android 真机软键盘测试。
+
+构建检查：在 `web` 目录执行 `npm run build`。