create-vela-workflow 1.0.0

package/templates/.workflow/stages/s4_simulator.md

@@ -0,0 +1,259 @@
+# S4: 模拟器调试
+
+**⚠️ 重要：仅对 S4 模拟器调试阶段执行。**
+
+S4 阶段的目标是在 S3 代码生成完成后，使用 VelaJS MCP 自动打开模拟器运行快应用，通过截图、DOM 树、日志等方式验证应用运行效果，并根据发现的问题自动修复代码。
+
+> **VelaJS MCP 简介**：VelaJS MCP 为 AI 提供了接触 VelaJS 运行时的能力，包括开启调试、截图、点击交互、查看 DOM 树、抓 log 等，使 AI 可以像人类工程师一样通过查看应用的 UI 界面、点击交互、调试 log 信息等方式进行调试。
+
+---
+
+## 阶段概要
+
+| 属性 | 值 |
+|------|-----|
+| 阶段 ID | S4 |
+| 阶段名称 | 模拟器调试 |
+| 依赖工具 | VelaJS MCP（由 AIoT IDE 插件内置提供） |
+| 前置条件 | S3 已完成（代码已写入项目工程目录） |
+| 产出物 | 调试报告（可选）+ 修复后的代码 |
+
+---
+
+## 执行步骤
+
+### Step 1: 前置校验与用户确认
+
+S3 完成后，询问用户是否进入模拟器调试阶段。
+
+**1.1 检查 S3 完成状态**
+
+```javascript
+const session = resumeSession(sessionId)
+const s3Status = session.stages.S3.status
+```
+
+若 S3 未完成，阻止执行：
+
+```
+❌ 无法进入 S4 模拟器调试阶段
+   S3 功能研发尚未完成（当前状态: {s3Status}）
+   请先完成 S3 阶段后再进入 S4。
+```
+
+**1.2 询问用户是否启动模拟器调试**
+
+```
+🚀 S3 功能研发已完成，是否自动打开模拟器运行快应用？
+
+   VelaJS MCP 可以帮你：
+   • 🖥️ 自动启动模拟器并加载应用
+   • 📸 截取应用 UI 截图进行视觉检查
+   • 🔍 查看 DOM 树结构验证页面布局
+   • 📋 抓取运行日志排查错误
+   • 👆 模拟点击交互验证功能逻辑
+   • 🔧 发现问题后自动修复代码
+
+❓ 请选择:
+   [y] 启动模拟器调试 — 使用 VelaJS MCP 自动运行和调试应用
+   [s] 跳过 — 跳过模拟器调试，直接完成工作流
+```
+
+- 用户输入 `y` → 继续 Step 2
+- 用户输入 `s` → 将 S4 状态标记为 `skipped`，直接输出工作流完成总结
+
+**1.3 检测 VelaJS MCP 可用性**
+
+检查当前环境中 VelaJS MCP 工具是否已注册可用。
+
+> VelaJS MCP 由 AIoT IDE 插件内置提供，插件安装后会自动在项目根目录下写入 mcp.json 配置。
+
+| 情况 | 处理方式 |
+|------|---------|
+| VelaJS MCP 工具可用 | ✅ 继续 Step 2 |
+| VelaJS MCP 工具不可用 | ⚠️ 提示用户安装 AIoT IDE 插件 |
+
+若 MCP 不可用：
+
+```
+⚠️ 未检测到 VelaJS MCP 工具
+
+   VelaJS MCP 需要安装 AIoT IDE 插件才能使用。请按以下步骤操作：
+   1. 安装 aiot-core 插件（aiot-core-1.7.20-beta.8.vsix）
+   2. 安装 aiot-emulator 插件（aiot-emulator-1.7.20-beta.8.vsix）
+   3. 安装 aiot-devtools 插件（vela.aiot-devtools-1.7.12.vsix）
+   4. 重启 IDE 后重新进入 S4 阶段
+
+   📖 详细说明: https://mi.feishu.cn/wiki/Nhlownm9UiMQs3kH263cfkStn5g
+
+❓ 请选择:
+   [r] 已安装，重试检测
+   [s] 跳过模拟器调试
+```
+
+**1.4 更新 Session 状态**
+
+```javascript
+updateStageStatus(sessionId, 'S4', 'in_progress')
+```
+
+---
+
+### Step 2: 启动模拟器
+
+使用 VelaJS MCP 启动模拟器并加载项目。
+
+```
+🖥️ 正在启动模拟器...
+```
+
+**2.1 使用 VelaJS MCP 开始调试**
+
+通过 VelaJS MCP 工具启动模拟器调试会话。提示词格式：
+
+```
+使用 velajs mcp 开始调试项目
+```
+
+若用户在 Session 中指定了屏幕规格，可以指定对应的模拟器：
+
+```
+使用 velajs mcp 开始调试项目选择 {screen_width}x{screen_height} 模拟器
+```
+
+**2.2 等待模拟器就绪**
+
+等待 VelaJS MCP 返回模拟器启动成功的信号。
+
+| 情况 | 处理方式 |
+|------|---------|
+| 模拟器启动成功 | ✅ 继续 Step 3 |
+| 模拟器启动失败 | ⚠️ 提示错误信息，提供 [r] 重试 / [s] 跳过 选项 |
+| 启动超时（>30s） | ⚠️ 提示超时，提供 [r] 重试 / [s] 跳过 选项 |
+
+```
+✅ 模拟器已启动
+📱 模拟器: {simulator_name}
+📂 项目: {project_path}
+```
+
+---
+
+### Step 3: 自动化调试循环
+
+模拟器启动后，进入自动化调试循环，通过截图、DOM 树、日志等方式检查应用运行状态。
+
+```
+🔍 正在进行自动化调试检查...
+```
+
+**3.1 截取应用 UI 截图**
+
+使用 VelaJS MCP 截取当前应用界面截图，进行视觉检查：
+
+- 检查页面布局是否符合设计规格
+- 检查文字是否正常显示（无溢出、截断）
+- 检查图标/图片是否正确加载
+- 检查圆屏裁切区域是否有内容被遮挡
+
+**3.2 查看 DOM 树**
+
+使用 VelaJS MCP 获取当前页面的 DOM 树结构：
+
+- 验证组件层级是否与技术方案一致
+- 检查 list/list-item 结构是否正确
+- 检查数据绑定是否生效
+
+**3.3 抓取运行日志**
+
+使用 VelaJS MCP 获取应用运行日志：
+
+- 检查是否有 JS 错误或异常
+- 检查 API 调用是否正常
+- 检查生命周期钩子是否按预期触发
+
+**3.4 模拟交互测试**
+
+使用 VelaJS MCP 模拟用户交互：
+
+- 点击按钮验证事件响应
+- 滑动列表验证滚动行为
+- 页面跳转验证路由导航
+
+**3.5 问题诊断与自动修复**
+
+若在上述检查中发现问题：
+
+1. 分析问题原因（UI 布局错误、JS 逻辑错误、样式问题等）
+2. 自动修改项目工程目录中的代码文件
+3. 使用 VelaJS MCP 重新加载应用
+4. 再次截图验证修复效果
+5. 重复直到所有检查通过或达到最大修复轮次（5 轮）
+
+```
+🔧 发现 {issue_count} 个问题，正在自动修复...
+   ❌ {issue_1_description}
+   ❌ {issue_2_description}
+
+🔄 修复轮次: {round}/{max_rounds}
+```
+
+---
+
+### Step 4: 调试结果展示
+
+调试完成后，展示调试结果摘要。
+
+```
+📋 模拟器调试结果:
+   📱 模拟器: {simulator_name}
+   📸 截图检查: {pass/fail}
+   🔍 DOM 结构: {pass/fail}
+   📋 运行日志: {error_count} 个错误
+   👆 交互测试: {pass_count}/{total_count} 通过
+   🔧 自动修复: {fix_count} 个问题已修复
+```
+
+---
+
+### Step 5: Checkpoint 交互
+
+```
+❓ 请选择操作:
+   [y] 确认 — 调试通过，标记 S4 完成，工作流结束
+   [e] 继续调试 — 提供额外的调试指令或修改意见
+   [n] 重新调试 — 重新启动模拟器从头调试
+
+⏳ 等待您的输入...
+```
+
+| 命令 | 处理逻辑 |
+|------|---------|
+| `y` | `updateStageStatus(sessionId, 'S4', 'completed')`，工作流完成 |
+| `e` | 接收用户的调试指令，继续使用 VelaJS MCP 进行针对性调试 |
+| `n` | 重新启动模拟器，返回 Step 2 |
+
+---
+
+## 推荐模型说明
+
+由于 VelaJS MCP 可提供应用 UI 截图，推荐使用有图像理解能力的 AI 大模型（如 Claude、Gemini、GPT-5 等）以获得最佳的视觉检查效果。
+
+---
+
+## 使用的工具
+
+| 工具 | 来源 | 用途 |
+|------|------|------|
+| VelaJS MCP | AIoT IDE 插件内置 | 启动模拟器、截图、DOM 树、日志、交互模拟 |
+| `updateStageStatus` | `session_manager.js` | 更新阶段状态 |
+| `resumeSession` | `session_manager.js` | 恢复 Session |
+
+---
+
+## 文件引用
+
+| 文件 | 用途 |
+|------|------|
+| `.workflow/stages/commands.md` | 快捷命令处理逻辑 |
+| `.workflow/scripts/session_manager.js` | Session 管理器 |

package/templates/.workflow/workflow-config.json

@@ -0,0 +1,46 @@
+{
+    "version": "1.0.0",
+    "name": "Vela 快应用自动开发工作流",
+    "stages": {
+        "S1": {
+            "name": "PRD 生成",
+            "skill": "prd/generate",
+            "output_template": "01-prd.md",
+            "next_stage": "S2",
+            "prerequisites": [],
+            "inputs": ["figma_export", "requirement_description"]
+        },
+        "S2": {
+            "name": "技术方案",
+            "skill": "tech/design",
+            "output_template": "02-tech-design.md",
+            "next_stage": "S3",
+            "prerequisites": ["S1"],
+            "inputs": ["01-prd.md"]
+        },
+        "S3": {
+            "name": "功能研发",
+            "skill": "coding/implement",
+            "output_template": "03-code/",
+            "next_stage": "S4",
+            "prerequisites": ["S2"],
+            "inputs": ["01-prd.md", "02-tech-design.md", "figma_export"]
+        },
+        "S4": {
+            "name": "模拟器调试",
+            "skill": "simulator/debug",
+            "output_template": null,
+            "next_stage": null,
+            "prerequisites": ["S3"],
+            "inputs": ["01-prd.md", "02-tech-design.md"]
+        }
+    },
+    "commands": {
+        "y": "确认通过",
+        "e": "编辑修改",
+        "n": "放弃重新生成",
+        "q": "退出保存进度",
+        "status": "查看进度",
+        "back": "返回上一阶段"
+    }
+}