# 技术设计

## 1. 边界与输入

本任务是归档任务 `08-05-interaction-pattern-unification` 的验证补充，不改变运行时代码。输入是归档 PRD/实施记录、现有 Playwright spec、前端 Playwright 配置以及当前测试规约。输出是可追溯的浏览器结果、截图和 OpenClaw 执行提词。

验证只在本地 loopback origin 进行。所有 API 响应沿用既有 E2E mock/合成夹具；禁止把真实账号、真实企业微信授权或生产数据带入浏览器上下文。

## 2. 证据分层

| 层级 | 证明内容 | 本任务结论 |
| --- | --- | --- |
| 源码合同 | 共享 resolver、状态映射、共享动作条、差旅 effect 等结构 | 归档任务已有通过记录，本轮只作基线复核 |
| DOM/交互浏览器 | 真实 Chromium 中的路由、文本、按钮、焦点、错误重试、动作条几何 | 本任务主验收 |
| UA 模拟 | iOS/Android 企业微信 UA 下的移动布局和路由 | 单独标注“UA 模拟通过” |
| 代表性真机 WebView | iPhone/Android 企业微信实际安全区、键盘、WebView 行为 | 不在本任务内；缺失时 `PAUSED` |
| 公网/部署 | 公网资源、真实登录态、部署后关键路径 | 不在本任务内 |

浏览器结果记录 `PASS`、`FAIL` 或 `PAUSED`；不得用较低层级证据替代较高层级证据。

## 3. 测试执行边界

### 3.1 浏览器启动

优先使用项目依赖的 Playwright Chromium。启动失败时依次记录：

1. `npx`/Playwright 版本和浏览器安装状态；
2. loopback 页面是否可访问；
3. 失败是浏览器缺失、沙箱权限、服务未就绪还是测试夹具问题；
4. 是否可在不修改产品代码的前提下使用受控的系统 Chromium 或 OpenClaw。

系统 Chromium 只能作为本地执行替代，必须在报告中注明可执行文件和启动参数；不把它写成与 CI/真机等价的环境。

### 3.2 既有 spec 复用

- `login-portal-ux.spec.ts`：Portal 顺序、权限过滤、区域错误重试和键盘焦点。
- `workflow-action-confirm-ui.spec.ts`：审批后果说明、转审理由门槛、焦点顺序。
- `r6-mobile-responsive-system-hotfix.spec.ts`：七个移动视口、无横溢、底部导航和移动报销 sticky action。
- `r111-invoice-reimbursement-guard.spec.ts`：企业微信 UA 移动报销详情、材料区、safe-area 和按钮高度。
- `pc-detail-mobile-visual-wave3.spec.ts`：PC/移动报销与审批详情、断点、返回链路和截图。
- `r89-mobile-login-navigation.spec.ts`：移动首页/审批/报销/我的关键路径，作为可选补充，不替代 R6/R111 主证据。

不重新实现 mock API，不复制业务逻辑。若既有 spec 的截图 helper 固定写入历史目录，执行时使用临时运行副本、受控重定向或等价 OpenClaw 场景，使最终截图只落在当前 task 的证据目录。

## 4. 指标与判定

- 横向溢出：`scrollWidth - clientWidth <= 2`。
- 固定动作条：可见、底部间隙 `<= 2px`，详情最后内容在滚动后不被覆盖。
- 触控尺寸：主动作和底部导航项目高度 `>= 44px`；若既有 R6 断言使用 `43.5px`，报告同时记录实际像素和规范目标。
- 移动页面：无可见桌面表格；深层详情隐藏底部 Tab，使用顶部返回。
- 焦点：`document.activeElement` 命中预期控件，焦点环/`focus-visible` 可见，Tab 顺序符合页面操作模型。
- 文案：普通用户区域不出现错误 code、接口路径、路由栈或原始 payload。
- 失败重试：区域错误持续可见，重试按钮可聚焦；点击后成功内容出现且错误区域消失。

## 5. 证据目录与脱敏

当前 task 目录下的 OpenClaw 提词、执行记录和相对引用保留在 `.trellis/tasks/08-07-interaction-pattern-browser-regression/`。浏览器截图放在 `output/playwright/08-07-interaction-pattern-browser-regression/`。报告只写仓库相对路径和合成标识，不写完整本地路径、密码、token、原始 payload 或真实业务材料。

## 6. 失败与回滚

本任务没有运行时代码回滚。若测试夹具/临时配置被改动，回滚范围仅限临时文件并确认 `git status --short` 无业务代码变化；若发现产品缺陷，保留失败证据和最小复现，回到所属 Trellis 子任务或另建修复 task。Chromium 环境失败只记录 `PAUSED`，不通过删除断言、缩短视口矩阵或关闭安全检查来“修复”。