sync: 新增PNG格式验证检查、逐页独立任务、设计文件同步阶段 #37
@@ -178,7 +178,7 @@ Story 验证全部通过 ≠ 用户能正常使用系统。旅程模式弥补这
|
||||
### 验收标准
|
||||
- [ ] {具体可量化的断言1}
|
||||
- [ ] {具体可量化的断言2}
|
||||
- [ ] {全程使用自然导航路径}
|
||||
- [ ] 全程使用自然导航路径
|
||||
```
|
||||
|
||||
### 旅程来源优先级
|
||||
@@ -505,10 +505,10 @@ Story 验证全部通过 ≠ 用户能正常使用系统。旅程模式弥补这
|
||||
- 修复失败 → 标记 journey-step-fail → 继续下一步骤
|
||||
- 步骤 4（修复阶段）仅处理功能断言 FAIL，不处理视觉验证 FAIL
|
||||
f. 如涉及数据变化 → browser_evaluate 或 curl 验证数据（✅ 允许 curl 补充）
|
||||
|
||||
|
||||
6. ⛔ **旅程步骤原型/Pencil 视觉对比验证**（⛔ 强制 — 针对操作时产生的动态状态）
|
||||
目的: 捕获并验证操作时才会出现的视觉状态（hover、选中、弹窗、展开、加载中、错误提示等），这些状态在静态原型对比中无法覆盖
|
||||
|
||||
|
||||
触发条件（满足任一即执行）:
|
||||
- 当前步骤操作后出现了弹窗/Modal/对话框
|
||||
- 下拉菜单/Select/日期选择器展开
|
||||
@@ -519,14 +519,14 @@ Story 验证全部通过 ≠ 用户能正常使用系统。旅程模式弥补这
|
||||
- 页面切换/跳转后的首屏渲染完成
|
||||
- 出现了错误提示/Toast/Notification
|
||||
- 折叠面板展开/收起状态变化
|
||||
|
||||
|
||||
执行流程:
|
||||
a. 等待状态稳定（动画/过渡完成）:
|
||||
- browser_wait_for → time=1-2s（等待动画完成）
|
||||
|
||||
|
||||
b. 捕获实际状态截图:
|
||||
- browser_take_screenshot → 保存为 journey-epic{N}-{M}-step{S}-state.png
|
||||
|
||||
|
||||
c. 搜索匹配的设计帧（双模式支持）:
|
||||
**Pencil MCP 模式（优先）**:
|
||||
- 读取 pipeline-context.md 获取设计文件路径（如 VividSpark1.2.pen）
|
||||
@@ -534,33 +534,33 @@ Story 验证全部通过 ≠ 用户能正常使用系统。旅程模式弥补这
|
||||
- 搜索关键词: "{Page}-{State}" 如 "Dashboard-Modal", "Login-Error", "Upload-Loading"
|
||||
- 或按 frame 类型和名称模式匹配
|
||||
- 如找到匹配帧 → mcp__pencil__export_nodes 导出设计截图
|
||||
|
||||
|
||||
**HTML 原型模式（回退）**:
|
||||
- 检查 prototype/pages/{group}/{page}-{state}.html 是否存在
|
||||
- 如存在 → 启动原型服务 → Playwright 截图
|
||||
|
||||
|
||||
设计帧未找到处理:
|
||||
- 标记 prototype_found: false
|
||||
- 记录 actual_screenshot 路径
|
||||
- 不阻断旅程，但记录到 pipeline-report.md 建议补充设计帧
|
||||
|
||||
|
||||
d. 执行视觉对比（如找到设计帧）:
|
||||
- ui_diff_check:
|
||||
- expected_image_source: 设计帧截图（或原型截图）
|
||||
- actual_image_source: 当前状态截图 (journey-epic{N}-{M}-step{S}-state.png)
|
||||
- prompt: "对比设计原型和实际实现。这是用户操作后出现的动态交互状态（如弹窗、hover、选中、加载中、错误提示等）。
|
||||
|
||||
|
||||
重点关注：
|
||||
1) 组件布局和结构是否一致（弹窗位置、按钮排列等）
|
||||
2) 颜色/样式是否匹配（背景色、边框、阴影等）
|
||||
3) 文字内容是否正确（标题、提示信息、按钮文字等）
|
||||
4) 交互状态是否准确（hover 效果、选中状态、focus 样式等）
|
||||
5) 图标和装饰元素是否一致
|
||||
|
||||
|
||||
注意：忽略动态数据（如用户名、时间戳等），只关注 UI 结构和样式。
|
||||
|
||||
|
||||
按严重程度列出所有视觉差异："
|
||||
|
||||
|
||||
e. 差异分级与处理:
|
||||
记录到 pipeline-state.yaml:
|
||||
```yaml
|
||||
@@ -593,14 +593,14 @@ Story 验证全部通过 ≠ 用户能正常使用系统。旅程模式弥补这
|
||||
auto_fix_type: "AUTO-FIX" # 修复类型
|
||||
auto_fix_result: "PASS" # 修复结果
|
||||
```
|
||||
|
||||
|
||||
差异处理规则:
|
||||
- 🔴 严重差异（布局错误、关键组件缺失、文字错误）→ 立即触发 AUTO-FIX
|
||||
- 🟡 中等差异（颜色、间距偏差）→ 记录到 pipeline-report.md，建议修复
|
||||
- 🟢 轻微差异（微小像素偏移）→ 记录但不阻断旅程
|
||||
- ✅ 无差异 → 标记状态正常
|
||||
|
||||
f. 自动修复与重测（如触发）:
|
||||
|
||||
f. 自动修复与重测（如触发）:
|
||||
- AUTO-FIX 触发后:
|
||||
1. 定位相关源码文件（根据差异类型确定）
|
||||
2. 执行修复（如调整 CSS、修改组件样式等）
|
||||
@@ -608,7 +608,7 @@ Story 验证全部通过 ≠ 用户能正常使用系统。旅程模式弥补这
|
||||
4. 重新对比: ui_diff_check
|
||||
5. 修复成功 → 标记 auto_fix_result: "PASS"
|
||||
6. 修复失败 → 标记 auto_fix_result: "FAIL"，记录原因
|
||||
|
||||
|
||||
6. ⛔ **源码 SVG data URI 扫描**（视觉验证关卡内 — 每次 snapshot 后强制执行）:
|
||||
g. ⛔ **约束一致性检查**（每个用户步骤首次执行时 — R7 执行时强制检测）:
|
||||
触发条件（操作被拦截 + 声明方说"可选"）:
|
||||
|
||||
@@ -168,13 +168,25 @@ visual_diff_pencil_mapping:
|
||||
mkdir -p tests/e2e/screenshots/visual-diff-pencil
|
||||
```
|
||||
|
||||
### 0.7 创建任务清单
|
||||
|
||||
为每个 `status: active` 的映射页面**创建独立的 Task 任务**，使用 `TaskCreate` 工具：
|
||||
- 每个任务记录：页面名称、设计帧ID、实际页面路径
|
||||
- 便于独立追踪每个页面的验证进度
|
||||
- 避免单个 agent 上下文过大导致污染或遗漏
|
||||
|
||||
### 0.8 启动逐个任务验证
|
||||
|
||||
对**每个任务**启动一个**独立的 agent**，按照 Phase PVD-1 流程执行验证。独立 agent 避免上下文污染，执行更精准。
|
||||
|
||||
---
|
||||
|
||||
## Phase PVD-1: 逐页门禁对比循环
|
||||
|
||||
⛔ **核心原则：逐页执行，每页必须通过门禁才能继续下一页。禁止全量截图后批量对比。**
|
||||
**最佳实践：每个页面启动一个独立 agent，避免上下文污染，执行更精准。**
|
||||
|
||||
对映射表中每个 `status: active` 的页面，依次执行以下完整循环：
|
||||
对映射表中每个 `status: active` 的页面，依次执行以下完整循环（每个页面由独立 agent 处理）：
|
||||
|
||||
```
|
||||
PVD-1 PER-PAGE LOOP:
|
||||
|
||||
@@ -51,6 +51,7 @@ progress_file: '{planning_artifacts}/.pipeline-progress.md'
|
||||
| 2-规划 | 2.1 | `bmad-create-prd` | `*prd*.md` | 产品简报 |
|
||||
| 2-规划 | 2.2 | `bmad-validate-prd` | 验证报告（内嵌） | PRD |
|
||||
| 2-规划 | 2.3 | `bmad-create-ux-design` | `*ux*.md` | PRD |
|
||||
| 2-规划 | 2.4 | (流水线内置) | `.pen` 设计文件同步 | PRD, UX, 已有 .pen |
|
||||
| 3-解决方案 | 3.1 | `bmad-create-architecture` | `*arch*.md` | PRD, UX |
|
||||
| 3-解决方案 | 3.2 | `bmad-create-epics-and-stories` | `*epic*.md` | PRD, 架构 |
|
||||
| 3-解决方案 | 3.3 | `bmad-check-implementation-readiness` | 就绪报告 | 全部 |
|
||||
@@ -96,7 +97,8 @@ phase-01 → 预读上下文 → bmad-product-brief → 验证 → 三文件更
|
||||
phase-02 →
|
||||
2.1: 预读产品简报 → bmad-create-prd → 验证 → 三文件更新
|
||||
2.2: 预读PRD → bmad-validate-prd → 读取结果 → 如Critical自动修复循环
|
||||
2.3: 预读PRD+设计 → bmad-create-ux-design → 验证 → 三文件更新 → 自动继续
|
||||
2.3: 预读PRD+设计 → bmad-create-ux-design → 验证 → 三文件更新
|
||||
2.4: 检测 UX 设计文档是否新增页面规范 → 如果需要，调用 Pencil MCP 在 .pen 中创建对应页面 → 截图验证设计效果 → 如视觉效果不佳，自动进入优化循环（调整布局配色直到满意）→ 更新设计上下文 → 三文件更新 → 自动继续
|
||||
phase-03 →
|
||||
3.1: 预读PRD+UX → bmad-create-architecture → 验证 → 三文件更新
|
||||
3.2: 预读PRD+架构+UX → bmad-create-epics-and-stories → 验证 → 三文件更新
|
||||
@@ -206,8 +208,9 @@ phases:
|
||||
status: in_progress
|
||||
steps:
|
||||
prd: done
|
||||
prd-validation: in_progress
|
||||
ux-design: pending
|
||||
prd-validation: done
|
||||
ux-design: done
|
||||
design-sync: pending
|
||||
phase-03:
|
||||
status: pending
|
||||
steps:
|
||||
@@ -245,6 +248,7 @@ phases:
|
||||
| create-prd | 页面导航流程 + 功能区域 + 组件概览 |
|
||||
| validate-prd | （不注入，验证已有PRD） |
|
||||
| create-ux-design | 完整设计系统：变量、组件、页面布局 |
|
||||
| **design-sync (built-in)** | 检查 UX 文档是否新增页面 → 创建页面 → **截图验证 + 自动优化循环** → 更新设计上下文 |
|
||||
| create-architecture | 组件层级 + 数据流模式 |
|
||||
| create-epics | 页面级功能分解 |
|
||||
| check-readiness | （不注入，验证已有产物） |
|
||||
@@ -260,6 +264,7 @@ phases:
|
||||
✅ 2.1 PRD done
|
||||
✅ 2.2 PRD验证 Pass
|
||||
✅ 2.3 UX设计 done
|
||||
✅ 2.4 设计文件同步 done
|
||||
✅ 3.1 架构 done
|
||||
✅ 3.2 史诗与故事 done
|
||||
✅ 3.3 就绪检查 Pass
|
||||
|
||||
Reference in New Issue
Block a user