cmbuyer/docs/tasks/T-005.md

id, title, phase, deps, status, created, context_ref, work_branch, needs_device, needs_human_review, write_paths

id	title	phase	deps	status	created	context_ref	work_branch	needs_device	needs_human_review	write_paths
T-005	网页端 MVP 交互原型	0		TODO	2026-08-03	dfe3d56	task/t-005-web-prototype	false	true	docs/tasks/T-005.md docs/design/web-login.html docs/design/web-task-create.html docs/design/web-task-workbench.html docs/design/web-task-detail.html

问题 / 背景

web 端尚无生产代码。若直接实现 SSR 页面，登录、建单、三泳道工作台、试选确认、授权围栏、 结果调和与待付款收口容易在代码阶段反复改布局，也可能把高风险状态遗漏。先用一页一文件的 自包含 HTML 假数据原型确认信息架构、主动作与异常恢复，再开始 T-201 及后续生产页面。

本任务是第一阶段原型：确认流程和信息架构，不证明拼多多 App 里能读取哪些字段。T-103 真机取证若改变字段，生产页面开工前必须先同步 IX 与原型。

关联需求与交互

• 功能：F-001、F-004、F-007、F-008、F-009、F-010、F-011、F-013、F-017
• 用户故事：US-001、US-002、US-004、US-005、US-006、US-007、US-008
• 交互：IX-001～IX-006、IX-010、IX-011
• 路由：/login、/tasks/new、/tasks、/tasks/{id}
• 架构 / API：04-architecture.md 第四、五节；api.md 第一、二节
• 原型约定：docs/design/README.md

方案

文件与页面

1. web-login.html：登录、站内返回提示、默认 / 校验错误 / 提交中状态。
2. web-task-create.html：任务名称、商品链接、颜色分类、尺码、数量、价格上限；逐字段错误、 保留输入、成功反馈。只模拟，不发送表单。
3. web-task-workbench.html：按「等你决定 / 机器在跑 / 已结束」分泳道；第一条待决策任务 展开；关键词、泳道、时间范围、加载 / 空 / 错误状态可切换。
4. web-task-detail.html：以原型状态切换器演示 WAITING_CONFIRMATION、围栏前 AUTHORIZED/ORDERING、围栏后 ORDERING、RECONCILIATION_REQUIRED、 WAITING_PAYMENT、NEEDS_MANUAL 与终态。每种业务状态只有一个主动作。

视觉与交互基线

• 冷静、紧凑的运营工作台；系统无衬线字体，优先 Segoe UI。主操作用蓝色，红色仅用于 危险 / 错误，黄色用于结果不明；不使用装饰性渐变、外部字体或 emoji 图标。
• 每个文件 CSS / JS 全内联、零构建、双击可打开；可用相对链接在四页间导航。
• 顶部固定显示 PROTOTYPE - 仅供枚举交互，非实现依据。
• 全部为可复位假数据；不得调用 API、加载 CDN / 外链图片、保存凭据或触发真实业务动作。
• 使用语义化 header/nav/main/form/button/table/dialog；Tab 顺序符合视觉顺序，焦点清晰； 错误靠近字段并用 role="alert" / aria-live 宣告；不只靠颜色表达状态。
• 适配 375 / 768 / 1024 / 1440 px；窄屏不出现页面级水平滚动；遵守 prefers-reduced-motion。

资金安全表达

• 授权主动作统一写「确认下单（不付款）」，同时展示授权上限与「系统不会付款」。
• 围栏前可以放弃，但文案明确「将重新试选取价」，不是回到旧确认卡。
• 围栏成功后不出现重试、再次提交或放弃按钮；只显示唯一 submission_id 和人工核查入口。
• RECONCILIATION_REQUIRED 明确提示「订单可能已创建、请勿再次提交」，并展示证据与下一步。
• 待付款不是成功；截图缺失或核对不一致时不能标记完成。

验收要点

• 四个 HTML 均可从本地直接打开，控制台无 error，除本地文档导航外无网络请求。
• 四页之间的主要入口可通过相对链接到达；所有演示按钮均为原型状态切换，不发送真实请求。
• 建单字段、三泳道、试选确认、围栏前放弃、围栏后调和、待付款核对全部有可观察页面状态。
• 加载、空、错误、禁用与成功反馈均可演示；禁用动作旁有原因，失败旁有恢复路径。
• 键盘可完成全部演示；375 / 768 / 1024 / 1440 px 无内容截断或页面级水平滚动。
• 运行：python scripts/validate_agent_context.py、git diff --check，并用浏览器逐页检查 accessibility snapshot、控制台与网络请求。
• 完成自动验证后任务保持 DOING，等待人确认布局、信息层级、主动作和安全文案。

边界

• 只修改 frontmatter write_paths 所列文件，不改共享路线图、需求、IX、API 或生产目录。
• 不实现 Go、SSR、数据库、真实鉴权、CSRF 或 HTTP 调用。
• 不发明拼多多页面字段、选择器、App 版本或真机结论；截图区域只用明显的假数据占位。
• 不实现 Excel、ERP、图搜、多候选对照台、自动订单回读或自动付款。
• 原型代码不得复制到生产实现。

执行记录

开工后记录修改文件、浏览器检查尺寸、控制台 / 网络 / 可访问性结果、未验证范围和人工确认项。