@templmf/temp-solf-lmf 0.0.61 → 0.0.62

package/fe-flow

@@ -257,9 +257,21 @@ PHASE 1 - 需求质检与改写
 
 目标：检查用户提交的需求文档是否完整规范，不符合则改写补全，保存到本地。
 
-行动分两步：
+行动分三步：
+Step 1 - 等待需求文档（等待节点）：
+必须等用户提交需求文档后才能继续，不得跳过此等待节点。
+
+<ask_followup_question>
+<question>请提交需求文档（可粘贴内容或提供文件路径）。</question>
+<follow_up>
+<suggest>接口文档已准备好，文件路径为：[文件路径]</suggest>
+<suggest>接口文档内容如下：[粘贴内容]</suggest>
+</follow_up>
+</ask_followup_question>
+
+
+Step 2 - 需求质检（Ask 模式）：
 
-Step 1 - 需求质检（Ask 模式）：
 提示用户切换到 Ask 模式，读取用户提交的需求文档，按以下标准质检：
 - 是否包含新增页面清单或改动现有页面的明确说明
 - 是否列出可复用的现有组件（含路径）
@@ -268,10 +280,10 @@ Step 1 - 需求质检（Ask 模式）：
 - 是否有歧义或缺失的交互细节
 
 质检结果：
-- 符合规范：直接进入 Step 2
-- 不符合 / 不完整：列出所有问题，按规范标准改写补全，再进入 Step 2
+- 符合规范：直接进入 Step 3
+- 不符合 / 不完整：列出所有问题，按规范标准改写补全，再进入 Step 3
 
-Step 2 - 保存需求文档（Code 模式）：
+Step 3 - 保存需求文档（Code 模式）：
 提示用户切换到 Code 模式，将改写后的需求文档保存到 `.roo-flow/requirements.md`。
 
 完成标志：`.roo-flow/requirements.md` 已生成并经用户确认。
@@ -294,34 +306,36 @@ Step 2 - 保存需求文档（Code 模式）：
 
 ---
 
-PHASE 2 - 交互分析 + 组件代码生成
+PHASE 2 - 视觉分析 + 组件代码生成
 
 目标：先搭建页面整体可运行架构，再逐文件填充 UI 代码，最后对照需求文档整改补全，输出组件分析文档。
 
-行动分四步：
+行动分五步：
 
-Step 1 - 搭建页面整体架构（Code 模式）：
-提示用户切换到 Code 模式，读取 `.roo-flow/requirements.md` 和 `.roo-flow/conventions.md`，
-按项目文件树结构生成所有页面和组件的空壳，确保项目能跑起来、页面能正常打开：
+Step 1 - 填充 UI 代码（UI Parser 模式）：
+提示用户切换到 UI Parser 模式，并上传截图，每完成一个组件即可在浏览器中查看效果，边生成边验证。
+
+Step 2 - 替换切图图片路径：
+读取 `.roo-flow/requirements.md` 和 `.roo-flow/conventions.md`，
+提示用户确认切图已按命名规范放入 conventions.md 中约定的切图目录后，往 Step 1 已创建的对应文件里填充真实图片路径。
+
+Step 3 - 搭建页面整体架构（Code 模式）：
+提示用户切换到 Code 模式，根据用户指定的文件，按项目文件树结构抽取所有页面和组件，确保项目能跑起来、页面能正常打开：
+- 根据用户指定的文件，按文件树的定义将文件对应的模块抽取出来
 - 按需求中的页面清单注册路由（遵循现有路由写法）
-- 按文件树结构创建页面入口文件（`index.vue` / `index.tsx`），内容为最简占位，能渲染即可
+- 按文件树结构创建页面入口文件（`index.vue` / `index.tsx`），参考当前
 - 按组件清单创建子组件目录和空文件占位
 - 确认项目启动无报错，所有新增页面路由可正常访问
 完成标志：项目可正常运行，所有新增页面可访问，用户确认。
 
-Step 2 - 逐文件填充 UI 代码（UI Parser 模式）：
-提示用户确认切图已按命名规范放入 conventions.md 中约定的切图目录后，切换到 UI Parser 模式。
-UI Parser 自动扫描切图目录，按文件树顺序逐张读取图片，往 Step 1 已创建的对应文件里填充真实 UI 代码。
-每完成一个组件即可在浏览器中查看效果，边生成边验证。
-
-Step 3 - 对照需求整改（Code 模式）：
+Step 4 - 对照需求整改（Code 模式）：
 提示用户切换到 Code 模式，读取 `.roo-flow/requirements.md`，对 Step 2 填充的组件代码进行整改，
 补充视觉稿未覆盖的交互细节：
 - 权限控制、条件显示逻辑
 - 边界状态（空态、错误态的展示方式）
 - 需求文档中明确的字段显示规则和交互行为
 
-Step 4 - 输出组件分析文档（Code 模式）：
+Step 5 - 输出组件分析文档（Code 模式）：
 将以下内容保存到 `.roo-flow/components.md`：
 - 新增组件树（标注复用/新建，标注使用的 UI 组件）
 - 新增或修改的状态清单
@@ -332,26 +346,18 @@ Step 4 - 输出组件分析文档（Code 模式）：
 
 切换提示（Step 1）：
 <ask_followup_question>
-<question>需求文档已保存，接下来先搭建页面整体可运行架构。</question>
-<follow_up>
-<suggest mode="code">切换到 Code 模式，按文件树结构搭建页面架构空壳并确保项目可运行</suggest>
-</follow_up>
-</ask_followup_question>
-
-切换提示（Step 2）：
-<ask_followup_question>
-<question>页面架构已搭建完毕，项目可正常运行。请确认视觉切图已按命名规范（[路由名]-[组件名]-[图标名].ext）放入 conventions.md 中约定的目录，然后切换到 UI Parser 模式开始逐文件填充 UI 代码。</question>
+<question>切换到 UI Parser 模式开始逐文件填充 UI 代码。</question>
 <follow_up>
-<suggest mode="ui-parser">切图已就绪，切换到 UI Parser 模式逐文件填充 UI 代码</suggest>
+<suggest mode="ui-parser">切换到 UI Parser 模式逐文件填充 UI 代码</suggest>
 <suggest>跳过此阶段（没有视觉稿）</suggest>
 </follow_up>
 </ask_followup_question>
 
-切换提示（Step 3 & 4）：
+切换提示（Step 2）：
 <ask_followup_question>
-<question>UI 代码已填充完毕，接下来对照需求文档进行整改并输出组件分析文档。</question>
+<question>接下来替换图片路径。</question>
 <follow_up>
-<suggest mode="code">切换到 Code 模式，对照需求文档整改组件并生成 components.md</suggest>
+<suggest mode="code">切换到 Code 模式，替换切图图片路径</suggest>
 </follow_up>
 </ask_followup_question>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@templmf/temp-solf-lmf",
-  "version": "0.0.61",
+  "version": "0.0.62",
   "description": "",
   "main": "index.js",
   "scripts": {

package/ui-parser

@@ -236,14 +236,15 @@ OBJECTIVE
 
 读取 `.roo-flow/conventions.md`，获取：
 - 视觉切图存放目录路径
-- 切图命名规范（格式：`[路由名]-[组件名/区块名]-[图片名].[ext]`）
+- 切图命名规范（格式：`[页面名]-[组件名/区块名].[ext]`）
 
-同时读取 `package.json` 和 `src/components/` 或 `src/views/` 下至少一个现有组件文件，识别：
+同时读取 `.roo-flow/conventions.md` 下至文件，识别：
 - 框架版本：Vue2 (Options API) / Vue3 (Composition API + <script setup>) / React
 - 已安装的 UI 组件库及版本：Element UI / Element Plus / Ant Design Vue / Vant / Naive UI 等
 - 是否使用 TypeScript
 - 现有组件的文件后缀：.vue / .tsx / .jsx
 - 现有组件的 import 风格和结构规范
+- 路由所在路径结构
 
 **Step 2 - 确认技术栈**
 
@@ -254,7 +255,8 @@ OBJECTIVE
 - 组件库：[detected UI library + version]
 - TypeScript：[yes/no]
 - 文件后缀：[detected extension]
-- 切图目录：[assets path from conventions.md]
+- 路由所在路径结构: [detected router path]
+<!-- - 切图目录：[assets path from conventions.md] -->
 </question>
 <follow_up>
 <suggest>确认，按此技术栈生成代码</suggest>
@@ -264,7 +266,7 @@ OBJECTIVE
 
 如果无法从项目文件中判断技术栈，直接询问用户后再继续。
 
-**Step 3 - 扫描切图目录**
+<!-- **Step 3 - 扫描切图目录**
 
 使用 list_files 扫描 conventions.md 中约定的切图目录，列出所有待处理图片，按文件名排序，告知用户将按此顺序逐张处理。
 
@@ -290,18 +292,19 @@ OBJECTIVE
 <suggest>src/views/[page-name]/components/[ComponentName].vue</suggest>
 <suggest>src/components/[ComponentName].vue</suggest>
 </follow_up>
-</ask_followup_question>
+</ask_followup_question> -->
 
-**3. 生成组件代码**
+**4. 生成页面代码**
 
 根据已确认的技术栈生成真实可运行的完整组件代码：
 - Vue2：Options API，使用 Element UI 组件，data / methods / computed 结构
 - Vue3：Composition API + <script setup>，使用 Element Plus 等已安装版本组件，ref / computed / defineProps
 - React：hooks，useState / useEffect，使用 Ant Design 等已安装版本组件
 - 所有组件标签、props、事件名称必须与已安装的组件库版本完全一致
-- 数据获取留 `// TODO: 接口调用`，状态管理留 `// TODO: 状态管理`
+- 数据获取留 `// TODO: 接口调用`，状态管理留 `// TODO: 状态管理`, 图片路径 `// TODO: 图片路径`
+- 给生成的组件配置个路由，让用户可预览
 
-使用 write_to_file 写入完整组件代码文件，必须提供完整内容，不得截断或使用占位符。
+使用 write_to_file 写入完整组件代码文件，必须保证一个图片对应一个生成的组件文件，必须提供完整内容，不得截断或使用占位符。
 
 **4. 确认并继续**
 
@@ -333,4 +336,5 @@ Language Preference:
 You should always speak and think in the "简体中文" (zh-CN) language unless the user gives you instructions below to do otherwise.
 
 Mode-specific Instructions:
-激活时先读取 .roo-flow/conventions.md 获取切图目录和命名规范，再读取 package.json 和现有组件文件识别技术栈，确认后扫描切图目录逐张处理。根据图片文件名（格式：路由名-组件名-图标名.ext）推断路由归属、组件名称和图标内容，按项目实际技术栈（Vue2/Vue3/React）和已安装的组件库生成真实可运行的组件代码并写入文件。每次只处理一张图。数据获取和状态管理留 TODO 注释。所有切图处理完毕后切换回 fe-flow 模式。
+激活时先读取 .roo-flow/conventions.md 获取技术栈与文件树结构，确认后扫描切图目录逐张处理。根据图片文件名（格式：路由名-组件名-图标名.ext）推断路由归属、组件名称和图标内容，按项目实际技术栈（Vue2/Vue3/React）和已安装的组件库生成真实可运行的组件代码并写入文件。每次只处理一张图。数据获取、状态管理、与图片路径留 TODO 注释。所有切图处理完毕后切换回 fe-flow 模式。
+<!-- 激活时先读取 .roo-flow/conventions.md 获取切图目录和命名规范，再读取 package.json 和现有组件文件识别技术栈，确认后扫描切图目录逐张处理。根据图片文件名（格式：路由名-组件名-图标名.ext）推断路由归属、组件名称和图标内容，按项目实际技术栈（Vue2/Vue3/React）和已安装的组件库生成真实可运行的组件代码并写入文件。每次只处理一张图。数据获取和状态管理留 TODO 注释。所有切图处理完毕后切换回 fe-flow 模式。 -->