cmbuyer/docs/tasks/T-005.md

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

id	title	phase	deps	status	created	vikunja_task_id	context_ref	work_branch	needs_device	needs_human_review	write_paths
T-005	网页端 MVP 交互原型	0		DONE	2026-08-03	12	79a2767	task/t-005-web-brand-name	false	true	docs/tasks/T-005.md docs/00-ai-start-here.md docs/02-requirements.md docs/04-architecture.md docs/06-tasks.md docs/07-user-stories.md docs/08-interaction-checklist.md docs/api.md docs/routes.md docs/current-state.md docs/design/README.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 与原型。

2026-08-03 人工评审修订

第一轮三泳道卡片不符合采购人员熟悉的数据工作台习惯。人工评审已确认改成传统表格： 列表内完成批量选择、建单和筛选，任务详情用路由驱动的右侧抽屉保留列表现场。该变化还 确认了“创建”和“开始试选”是两个动作：新任务先保存为 DRAFT，只有管理员勾选后才进入 PENDING 第一趟试选队列。原型与需求、状态机、管理端接口必须同步，不能只在 HTML 中发明 一个后端不存在的按钮。

2026-08-03 人工评审第三轮品牌命名

人工评审确认网页端用户可见产品名改为“采购服务”，桌面端继续使用“采购工具”。本轮只统一 四个 Web 原型的文档标题、页头品牌和无障碍名称；cmbuyer 仍是仓库与系统内部标识，不改 路由、接口、状态机、数据字段或现有交互。

关联需求与交互

• 功能：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 与终态。每种业务状态只有一个主动作。

第二轮修订方案

1. 把 web-task-workbench.html 整页重新生成为传统数据表，不在旧三泳道卡片上增量修补。
2. 表格列固定为：选择、标题、颜色、尺码、价格上限、数量、采购结果、状态、创建时间； 不设置操作列。标题打开拼多多商品假链接，任务编号打开内部详情。
3. 表格上方第一行放“导入”“创建”：导入为有原因说明的禁用占位；创建打开模态表单， 保存后生成 DRAFT 假任务并按创建时间倒序插到第一行。
4. 第二行默认显示标题关键词、筛选、清除；状态和创建时间收进默认折叠的“更多条件”，不 放弃 F-004 查询范围。勾选可开始的 DRAFT 后切换为上下文批量栏，统一执行“开始试选”。 动作只模拟 DRAFT → PENDING，固定说明不会创建订单或付款。
5. 双击行的非控件区域，或聚焦行后按 Enter，打开右侧详情抽屉；复选框、标题外链、任务 编号链接不误触发行双击。原型用 #/tasks/{id} 演示生产路由 /tasks/{id}，关闭抽屉恢复 原筛选、选择和滚动现场；直接访问详情仍由完整页兜底。
6. “采购结果”只由结构化假数据在展示层拼成“阶段：颜色 | 尺码 | 单价 | 数量”，不把 拼接字符串定义成存储字段；待开始 / 执行中显示 —，避免把试选结果误写成已下单。
7. 同步需求、用户故事、交互清单、路由、架构状态机、管理端 API 与路线图：MVP 只增加 “批量开始第一趟试选”，批量排序、暂停 / 继续和人工接管仍留在 V2。

视觉与交互基线

• 冷静、紧凑的运营工作台；系统无衬线字体，优先 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，等待人确认布局、信息层级、主动作和安全文案。
• 第二轮表格中没有操作列；默认按创建时间倒序，新建任务保存后成为第一行。
• 导入按钮不可操作且说明尚未实现；创建表单校验错误保留输入，成功后关闭弹窗并刷新表格。
• 只有 DRAFT 可勾选开始；批量栏明确是“开始试选”，不得使用可能被理解为直接下单的 “开始采购”。全选只覆盖当前筛选结果中的可开始任务。
• 标题外链在新标签打开；双击行和 Enter 打开详情抽屉；关闭、Esc、浏览器返回均恢复原行 焦点，直接打开详情链接仍有完整页兜底。
• 采购结果的颜色、尺码、单价、数量保持结构化来源，金额显示两位小数；页面仅负责用 | 格式化展示。

边界

• 只修改 frontmatter write_paths 所列文件；第二轮允许同步共享产品文档，但不修改生产目录。
• 不实现 Go、SSR、数据库、真实鉴权、CSRF 或 HTTP 调用。
• 不发明拼多多页面字段、选择器、App 版本或真机结论；截图区域只用明显的假数据占位。
• 不实现 Excel、ERP、图搜、多候选对照台、自动订单回读或自动付款。
• 原型代码不得复制到生产实现。
• 导入仍是禁用占位，不实现 Excel；批量能力只到“开始第一趟试选”，不实现顺序编排、 暂停 / 继续、运行中接管或多设备调度。
• 本任务不触及真机页面判据，不创建订单，不执行下单或付款动作。

执行记录

2026-08-03 · 网页端名称统一为“采购服务”

• 四个 Web 原型的浏览器标题、页头品牌和品牌链接无障碍名称统一为“采购服务”；紧凑宽度继续 只显示品牌标记，但标记由旧 CM 改为“采”，链接的可访问名称仍完整读作“采购服务原型 工作台”。登录页原“采购管理端”描述也同步为“采购服务”。
• cmbuyer 保留为仓库和系统内部标识，不扩大为仓库重命名；桌面端独立名称“采购工具”不变。 路由、接口、业务状态、数据字段和现有交互均未修改。
• ui-ux-pro-max 的品牌一致性和无障碍名称规则使本轮不仅替换可见文字，也补齐了窄屏隐藏完整 品牌文字时的稳定 aria-label；其颜色、字体和布局建议不在本次纯命名范围内，未引入改版。
• & .\init.ps1：上下文清单通过；因 Phase 0 尚无 web/、desk/ 目录，按既定基线返回 退出码 3 并列出 T-001 / T-002，没有误报生产代码可运行。
• Node 静态检查确认四页 id 唯一、脚本可编译、相对链接存在，Web 原型中不再出现旧可见品牌 cmbuyer、CM 或“采购管理端”。
• Playwright 检查四页 × 375 / 768 / 1024 / 1440 px：标题和品牌名称正确、无页面级水平溢出、 无外部资源请求，控制台 0 error / 0 warning；375 px 下四页品牌链接均可按完整名称识别。
• python scripts/validate_agent_context.py 与 git diff --check：提交前运行并记录最终结果。
• 任务继续保持 DOING，等待整体 Web 原型人工确认；本轮不构成生产 Go 页面验收。

2026-08-03 · 第二轮表格工作台实现

• 任务继续保持 DOING：本轮自动验证已完成，但 needs_human_review: true，仍需人工确认 表格信息密度、上下文批量栏、创建弹窗与详情抽屉。
• 整页重做 web-task-workbench.html：传统表格固定九列且无操作列；标题为拼多多商品假链接， 任务编号为内部详情链接；默认按创建时间倒序，采购结果由结构化假数据在展示层用 | 格式化，并区分试选、已下单和结果待核查。
• 第一工具行实现禁用的导入占位和创建按钮；创建弹窗覆盖必填、商品链接、金额字符串与数量 校验，失败保留输入，保存成功后生成 DRAFT 假任务、清除筛选并聚焦表格第一行。
• 第二工具行默认是标题关键词、筛选、清除；状态和创建时间在“更多条件”中；勾选后切换成 上下文批量栏。只有 DRAFT 可选，全选只覆盖当前筛选结果，开始试选后模拟整批 DRAFT → PENDING，固定提示不授权、不下单、不付款。
• 双击行非控件区域、任务编号链接和聚焦行按 Enter 均打开右侧详情抽屉；原型地址同步为 #/tasks/{id}，用来演示生产 /tasks/{id}。关闭按钮、Esc 和浏览器返回均关闭抽屉并把焦点 还给原行；直接带 hash 打开也能恢复抽屉，完整详情页继续作为兜底。
• 同步 00-ai-start-here.md、需求、用户故事、交互清单、架构状态机、管理端 API、路线图、 路由、当前状态和原型约定。新增的 MVP 能力仅为批量开始第一趟试选；排序、暂停 / 继续、 运行中接管仍保留在 V2。web-task-create.html 的成功态同步为 DRAFT。
• ui-ux-pro-max 影响了可见焦点、键盘等价操作、原生 dialog 焦点约束、路由深链接、 抽屉关闭后的焦点恢复和窄屏表格容器滚动。其自动生成的夸张字体、深色主题和横向旅程模式 不适合运营表格，继续沿用第一轮的 Segoe UI、蓝色主动作与低动效基线。

已运行验证

• & .\init.ps1：按当前 Phase 0 基线运行；上下文校验通过，因 web/、desk/ 尚未初始化 按设计返回退出码 3 并提示 T-001 / T-002，未误报可运行生产代码。
• python scripts/validate_agent_context.py：通过（6 个任务路由，18 个有效仓库路径）。
• Node 内联静态检查：4 个 web-*.html 均有 doctype、viewport、原型横幅、 prefers-reduced-motion；id 无重复，内联脚本可编译，相对 HTML 链接存在，无外部脚本、 字体或图片资源；工作台必需字段齐全且没有“操作”表头。
• Playwright 浏览器交互：标题筛选得到正确单行；创建表单空标题错误保留弹窗，修正保存后 新任务为第一行并获焦点；全选两条 DRAFT 后上下文栏显示 2 条，开始后均转待领取且安全 提示正确；双击和 Enter 均写入详情路由并打开抽屉，关闭和 Esc 清空路由并恢复原行焦点； 直接访问 #/tasks/{id} 能打开相应抽屉及完整页链接。
• Playwright 响应式回归：登录、建单、工作台、详情四页在 375 / 768 / 1024 / 1440 px 共 16 个组合均无页面级水平溢出；工作台窄屏只在表格容器内横向滚动。浏览器累计 0 error / 0 warning，未发生外部资源请求。
• git diff --check：通过。

未验证与待人工确认

• 没有生产 Go / SSR / 数据库代码，因此未运行 go test ./... 或 go vet ./...；本轮也不 证明 POST /tasks/start-trials 的事务、CSRF 或幂等实现。
• 原型只使用 .invalid 商品假链接，不访问真实拼多多；不证明真机字段、选择器或 App 版本。
• 待人确认：九列表格的列宽与信息密度、采购结果阶段前缀、选择后替换筛选栏的方式、 720 px 创建弹窗、860 px 详情抽屉，以及 375 px 下表格横向滚动是否符合实际使用习惯。

2026-08-03 · 第二轮人工评审修订计划

• 人工评审已确认：工作台改为传统表格；创建改为列表内模态表单；去掉操作列；标题链接 打开拼多多商品页；双击行打开路由化详情抽屉；关闭后保留列表现场。
• 为保证批量“开始试选”不是无后端语义的装饰按钮，本轮把新任务初始态明确为 DRAFT， 统一开始后进入 PENDING。该动作只放入第一趟试选队列，不签发授权、不创建订单、不付款。
• 本轮沿用 T-005：它已经是 DOING 且独占 Web 原型文件；另建重叠任务会违反单任务单写入者 约束。任务继续保持 DOING，完成自动验证后等待第二轮人工确认。

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。

2026-08-03 · 任务所有者独立复核

• 在 main 合入子任务提交后重新检查全部四页，而不是以子 agent 自报结果作为完成证据。
• 独立 Node 检查确认：四页 id 无重复、内联脚本可编译、相对 HTML 链接均存在、无外部资源， 固定原型横幅齐全。
• 独立 Playwright 检查 375 / 768 / 1024 / 1440 px：无页面级水平溢出、无外部资源请求； 关闭旧会话后四页控制台 0 error / 0 warning。逐项切换详情页 11 个业务状态，确认围栏后只有 人工核查 / 保存核查记录，未出现重试、再次提交或放弃授权动作。
• 目视复核详情页 1440 px 与 375 px 全页截图，主信息、试选证据占位和主 / 次动作未截断。
• 复核时补上四页 data:, favicon，消除 HTTP 打开时浏览器自动请求 /favicon.ico 的 404； 同时把失败态的「新建重试任务」改为「由人工决定重新试选或结束任务」，避免发明 API。
• 自动验证已完成，仍未获得人工设计确认，任务继续保持 DOING。
• 2026-08-03 人工确认：6 个原型（web 登录 / 建单 / 工作台 / 详情，desk 执行 / 设备参数） 已由人浏览确认，布局、信息层级、主动作与安全文案通过。needs_human_review 满足， 状态改为 DONE。Vikunja 对应任务 #12。
• 本任务未迁入导出区块：内容已冻结，转换只增加往返风险而无收益；仅回填 vikunja_task_id 作为连接键。门禁对无导出区块的文件豁免检查 4。