yuxuanhui
97 lines
4.9 KiB
Markdown
97 lines
4.9 KiB
Markdown
# 响应式前端交互体系执行计划
|
||
|
||
## Scope
|
||
|
||
本任务只实现可评审的单文件 HTML 原型，并完成目标 layout 架构设计；不改生产 React 页面、路由或后端。原型选型后的生产迁移另开任务。
|
||
|
||
## Ordered Checklist
|
||
|
||
### 1. 建立原型骨架
|
||
|
||
- [x] 新增 `zhixing-web/prototypes/responsive-workbench.html`，顶部注释明确标注 THROWAWAY PROTOTYPE 与验证问题。
|
||
- [x] 定义颜色、字体、间距、圆角、控件密度、触控尺寸和安全区 CSS variables。
|
||
- [x] 加入 `?variant=a|b|c` 路由状态、浮动方案切换器和 Desktop/Mobile 预览切换。
|
||
- [x] 让真实 viewport media query 与强制预览模式得到相同行为。
|
||
|
||
### 2. 实现三个结构方案
|
||
|
||
- [x] A「紧凑工作台」：完整侧栏、工具栏、分区卡片与分页表格。
|
||
- [x] B「数据账本」：图标 rail、吸顶筛选、以表格为主画布。
|
||
- [x] C「主从研究台」：结果列表与详情面板并置。
|
||
- [x] 验证三者在信息层级、主操作位置和数据钻取方式上有实质差异。
|
||
- [x] 三个方案的移动端均使用 4 项底部导航 + 更多 sheet，并留出 safe-area 空间。
|
||
|
||
### 3. 补齐组件和交互状态
|
||
|
||
- [x] 展示按钮、表单、badge、card、feedback、overlay 和 data patterns。
|
||
- [x] 使用 mock signals 实现搜索、筛选、分页、每页数量与记录范围。
|
||
- [x] 桌面呈现 table，移动端呈现优先级重排后的记录卡及折叠详情。
|
||
- [x] 实现确认 dialog、更多 sheet、toast 和 loading/disabled/empty/error 示例。
|
||
- [x] 支持键盘方向键切换 variant，且输入框聚焦时不劫持按键。
|
||
|
||
### 4. 可访问性与响应式检查
|
||
|
||
- [x] 使用 nav/main/table/button/dialog 等语义元素和清晰 aria label。
|
||
- [x] 键盘可完成导航、筛选、分页、开关弹层与关闭弹层。
|
||
- [x] 检查 1440×900、1280×800、768×1024、390×844、375×812。
|
||
- [x] 移动端无页面级水平溢出，底部导航不遮挡内容，触控目标 ≥44px。
|
||
- [x] 验证 reduced-motion 下关闭非必要动画。
|
||
|
||
### 5. 评审交付
|
||
|
||
- [x] 输出三个可分享 URL：`?variant=a`、`?variant=b`、`?variant=c`。
|
||
- [x] 截取三种方案的桌面与移动端画面作为视觉验证证据。
|
||
- [x] 记录每个方案的适用场景和明确取舍，等待用户选择或混合方案。
|
||
- [x] 不把原型代码直接迁入生产模块。
|
||
|
||
## Validation Commands
|
||
|
||
在 `zhixing-web/` 下执行：
|
||
|
||
```bash
|
||
pnpm exec prettier --check prototypes/responsive-workbench.html
|
||
pnpm check
|
||
pnpm build
|
||
```
|
||
|
||
浏览器验证：
|
||
|
||
```bash
|
||
python3 -m http.server 4173 -d zhixing-web
|
||
```
|
||
|
||
随后使用真实浏览器逐一检查三个 variant 的桌面/移动截图、URL 刷新稳定性、分页、page size、dialog、更多 sheet、键盘切换和水平溢出。
|
||
|
||
## Risky Files and Rollback Points
|
||
|
||
- `zhixing-web/prototypes/responsive-workbench.html` 是唯一产品目录新增物；删除该文件即可完全回滚运行时影响。
|
||
- `.trellis/tasks/08-09-responsive-frontend-design/` 只记录规划与验证，不进入生产 bundle。
|
||
- 本任务不得修改 `src/routes/route-tree.tsx`、`HomeShell`、shared UI 或 API 类型；若实现中发现必须修改，应回到规划并请求扩展范围。
|
||
|
||
## Review Gates
|
||
|
||
- [x] 原型三个方案均可运行且结构差异明显。
|
||
- [x] PRD 中所有验收标准均有对应验证证据。
|
||
- [x] `design.md` 的 layout seam 与现有 feature 依赖方向一致。
|
||
- [x] 检查未修改现有未提交变更或扩大到生产重构。
|
||
- [x] 用户看过最终规划摘要并在后续消息中明确批准开始实现。
|
||
|
||
## Validation Results
|
||
|
||
- `pnpm exec prettier --check prototypes/responsive-workbench.html`：通过。
|
||
- `pnpm lint`：通过。
|
||
- `pnpm typecheck`：通过。
|
||
- `pnpm test`：通过，3 个测试文件、16 项测试。
|
||
- `pnpm build`：通过。
|
||
- `pnpm check`：未完整运行；在第一步被用户新增且未格式化的 `zhixing-web/DESIGN.md` 拦截，本任务未修改该文件。其余子门禁已分别通过。
|
||
- Playwright：A/B/C 三方案在 1440×900、1280×800、768×1024、390×844、375×812 下检查通过；移动端 `body.scrollWidth === viewport width`，底部导航命中高度 50px。
|
||
- Playwright：分页 1–5 → 6–10、page size、搜索空状态、移动记录展开、更多 sheet、确认 dialog、toast、URL variant、方向键切换、Esc 关闭、Tab/Shift+Tab 焦点循环均验证通过；浏览器控制台 0 error / 0 warning。
|
||
|
||
## Selected Direction Follow-up
|
||
|
||
- [x] 将默认方案调整为 A 工作台壳 + C 研究详情面板。
|
||
- [x] 删除内容区大标题、眉题和说明模块，仅保留紧凑操作行。
|
||
- [x] 验证桌面与移动端内容均直接从操作、指标和业务数据开始。
|
||
|
||
Follow-up validation：默认无 query 时渲染 `variant-ac`；桌面 1440px 与移动 390px 均不存在 `.page-header` 或 `main h1`，内容顺序为 action row → metrics → A+C master-detail data；移动端无水平溢出，浏览器控制台 0 error / 0 warning。
|