8.2 KiB
8.2 KiB
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 | DOING | 2026-08-03 | dfe3d56 |
task/t-005-web-prototype | false | true |
|
问题 / 背景
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
方案
文件与页面
web-login.html：登录、站内返回提示、默认 / 校验错误 / 提交中状态。web-task-create.html：任务名称、商品链接、颜色分类、尺码、数量、价格上限；逐字段错误、 保留输入、成功反馈。只模拟，不发送表单。web-task-workbench.html：按「等你决定 / 机器在跑 / 已结束」分泳道；第一条待决策任务 展开；关键词、泳道、时间范围、加载 / 空 / 错误状态可切换。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、图搜、多候选对照台、自动订单回读或自动付款。
- 原型代码不得复制到生产实现。
执行记录
2026-08-03 · 第一阶段原型实现
- 任务状态保持
DOING：自动检查已完成，但needs_human_review: true，未进行人工设计确认。 - 新增四个自包含页面：登录、手工建单、三泳道工作台、任务详情。四页使用同一套语义颜色、 字体、间距和导航；全部假数据可由页内控件复位，不调用 API，不保存凭据，不加载外部资源。
- 登录页覆盖站内返回、必填错误、提交中、会话过期和成功；建单页覆盖逐字段校验、链接解析 失败后保留输入、提交中和创建成功；工作台覆盖实时筛选、计数规则、第一条待决策展开以及 加载 / 空 / 错误；详情页覆盖试选不一致 / 超额 / 缺证据、授权、围栏前放弃后重新试选、 围栏后调和、结果不明、待付款核对、转人工和终态。
- 安全表达已独立复核：全程固定说明不自动付款；围栏前放弃明确转
PENDING_RETRIAL且不复用 旧价；围栏后只显示唯一submission_id与人工核查入口，没有重试、再次提交或放弃按钮；WAITING_PAYMENT需证据和四项人工核对才能标记完成。 ui-ux-pro-max检索建议被用于焦点、触控尺寸、错误就近、恢复路径与响应式检查。其推荐的 红色主色和外部装饰字体与任务约束冲突，因此未采用；主操作保持蓝色，红色只用于错误或 破坏性动作，字体使用Segoe UI/ 系统字体。
已运行验证
python scripts/validate_agent_context.py：通过（6 个任务路由，18 个有效仓库路径）。- Node 静态脚本：四页均包含 doctype、viewport、固定原型横幅、
aria-live、prefers-reduced-motion；每页唯一内联脚本均可编译；无外部脚本、字体或图片引用。 - Chrome Headless + DevTools Protocol：逐页检查 375 / 768 / 1024 / 1440 px，16 个组合均无 页面级水平溢出、运行时异常或外部网络请求；登录错误、建单链接错误与输入保留、工作台空态 与复位、详情全部业务状态、规格不符禁用确认、核对完成后启用标记等状态切换均通过。
- Chrome accessibility tree / 键盘抽查：可见交互控件都有可访问名称，Tab 顺序可到达页内 原型控件，未发现键盘陷阱；模拟 reduced-motion 时媒体查询生效。原生对话框均有明确的取消 和确认按钮。
- 目视检查 Chrome 截图：1440 px 工作台 / 详情与 375 px 建单 / 详情的信息层级、换行和主操作 未见截断；证据图均明确标为假数据且不代表真实 App 页面。
git diff --check：通过。
未验证与待人工确认
- Playwright MCP 因共享浏览器实例被占用而无法连接；上述浏览器检查改由独立 Chrome Headless 与 DevTools Protocol 完成。未做真实读屏器、高对比度模式或人工键盘全流程验收。
- 原型不证明 Go SSR、真实鉴权 / CSRF、接口并发、PySide6、真机页面字段或真实拼多多流程。 T-103 真机取证后仍需复核实际可读字段，不能把占位图当成页面判据。
- 待人确认：四页整体布局与信息密度、三泳道命名和默认展开、详情页各状态的唯一主动作、
「确认下单（不付款）」与围栏 / 调和文案、375 px 窄屏阅读体验。确认前任务不得标
DONE。