响应式前端交互体系执行计划

Scope

本任务只实现可评审的单文件 HTML 原型，并完成目标 layout 架构设计；不改生产 React 页面、路由或后端。原型选型后的生产迁移另开任务。

Ordered Checklist

1. 建立原型骨架

新增 zhixing-web/prototypes/responsive-workbench.html，顶部注释明确标注 THROWAWAY PROTOTYPE 与验证问题。
定义颜色、字体、间距、圆角、控件密度、触控尺寸和安全区 CSS variables。
加入 ?variant=a|b|c 路由状态、浮动方案切换器和 Desktop/Mobile 预览切换。
让真实 viewport media query 与强制预览模式得到相同行为。

2. 实现三个结构方案

A「紧凑工作台」：完整侧栏、工具栏、分区卡片与分页表格。
B「数据账本」：图标 rail、吸顶筛选、以表格为主画布。
C「主从研究台」：结果列表与详情面板并置。
验证三者在信息层级、主操作位置和数据钻取方式上有实质差异。
三个方案的移动端均使用 4 项底部导航 + 更多 sheet，并留出 safe-area 空间。

3. 补齐组件和交互状态

展示按钮、表单、badge、card、feedback、overlay 和 data patterns。
使用 mock signals 实现搜索、筛选、分页、每页数量与记录范围。
桌面呈现 table，移动端呈现优先级重排后的记录卡及折叠详情。
实现确认 dialog、更多 sheet、toast 和 loading/disabled/empty/error 示例。
支持键盘方向键切换 variant，且输入框聚焦时不劫持按键。

4. 可访问性与响应式检查

使用 nav/main/table/button/dialog 等语义元素和清晰 aria label。
键盘可完成导航、筛选、分页、开关弹层与关闭弹层。
检查 1440×900、1280×800、768×1024、390×844、375×812。
移动端无页面级水平溢出，底部导航不遮挡内容，触控目标 ≥44px。
验证 reduced-motion 下关闭非必要动画。

5. 评审交付

输出三个可分享 URL：?variant=a、?variant=b、?variant=c。
截取三种方案的桌面与移动端画面作为视觉验证证据。
记录每个方案的适用场景和明确取舍，等待用户选择或混合方案。
不把原型代码直接迁入生产模块。

Validation Commands

在 zhixing-web/ 下执行：

pnpm exec prettier --check prototypes/responsive-workbench.html
pnpm check
pnpm build

浏览器验证：

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

原型三个方案均可运行且结构差异明显。
PRD 中所有验收标准均有对应验证证据。
design.md 的 layout seam 与现有 feature 依赖方向一致。
检查未修改现有未提交变更或扩大到生产重构。
用户看过最终规划摘要并在后续消息中明确批准开始实现。

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

将默认方案调整为 A 工作台壳 + C 研究详情面板。
删除内容区大标题、眉题和说明模块，仅保留紧凑操作行。
验证桌面与移动端内容均直接从操作、指标和业务数据开始。

Follow-up validation：默认无 query 时渲染 variant-ac；桌面 1440px 与移动 390px 均不存在 .page-header 或 main h1，内容顺序为 action row → metrics → A+C master-detail data；移动端无水平溢出，浏览器控制台 0 error / 0 warning。

4.9 KiB Raw Permalink Blame History Unescape Escape