c598c9b05b
- Implemented BlueprintPromptModal component to handle blueprint prompt generation and rule synchronization. - Added BlueprintStatusBadge to display the current status of blueprints in ProjectCard. - Integrated blueprint status fetching and synchronization in ProjectCard. - Enhanced SettingsPage with a new section for MCP service configuration and batch sync for blueprint rules. - Updated commands to include new blueprint-related functionalities and types. - Changed application name from "Dev Manager" to "炼境" in various components.
113 lines
5.6 KiB
Markdown
113 lines
5.6 KiB
Markdown
---
|
||
id: blueprint-view
|
||
name: 蓝图可视化
|
||
status: in_progress
|
||
progress: 86
|
||
---
|
||
|
||
## 概述
|
||
读取项目 .blueprint/ 目录中的 manifest.yaml 和 modules/*.md，用 React Flow 渲染项目全景架构图。点击模块节点展示详情和任务卡列表。
|
||
|
||
## 任务卡
|
||
|
||
### ✅ .blueprint/ 数据结构设计
|
||
- status: done
|
||
- complexity: M
|
||
- files: .blueprint/manifest.yaml, .blueprint/CONVENTIONS.md
|
||
- acceptance: 定义 manifest.yaml 格式、模块文件格式、任务卡格式、CONVENTIONS 规则
|
||
|
||
### ✅ 蓝图读取 Command
|
||
- status: done
|
||
- complexity: M
|
||
- files: src-tauri/src/commands/blueprint.rs
|
||
- acceptance: 实现 get_blueprint tauri command，读取指定项目路径下的 .blueprint/manifest.yaml 和 modules/*.md，解析后返回结构化数据
|
||
|
||
### ✅ React Flow 节点图渲染
|
||
- status: done
|
||
- complexity: L
|
||
- files: src/components/dashboard/BlueprintModal.tsx
|
||
- depends: blueprint-reader
|
||
- acceptance: 将 manifest.yaml 的 modules 渲染为自定义节点（带状态色标、进度条），edges 渲染为连线，areas 渲染为分组背景
|
||
|
||
### ✅ 模块详情面板
|
||
- status: done
|
||
- complexity: M
|
||
- files: src/components/dashboard/BlueprintModal.tsx
|
||
- depends: blueprint-reader
|
||
- acceptance: 点击节点后在侧边展示模块描述、决策记录、任务卡列表，任务卡按状态分组显示
|
||
|
||
### ✅ 项目卡片蓝图入口
|
||
- status: done
|
||
- complexity: S
|
||
- files: src/components/dashboard/ProjectCard.tsx
|
||
- acceptance: 项目卡片新增「蓝图」按钮，点击打开 BlueprintModal，检测到无 .blueprint/ 时显示引导提示
|
||
|
||
### ✅ 统计汇总条
|
||
- status: done
|
||
- complexity: S
|
||
- files: src/components/dashboard/BlueprintModal.tsx
|
||
- acceptance: 模态框顶部展示项目完成度统计条（已完成/进行中/规划中/构思中/受阻），含总进度条和可派发任务入口
|
||
|
||
### ✅ 任务卡复制派发
|
||
- status: done
|
||
- complexity: S
|
||
- files: src/components/dashboard/BlueprintModal.tsx
|
||
- acceptance: 可派发任务卡（todo + files + acceptance + complexity S/M）显示「复制派发」按钮，一键复制自包含的任务指令
|
||
|
||
### ✅ 下一步汇总面板
|
||
- status: done
|
||
- complexity: M
|
||
- files: src/components/dashboard/BlueprintModal.tsx
|
||
- acceptance: 统计条「可派发」按钮打开侧边面板，聚合所有 blocked/进行中/可派发任务，按优先级排序
|
||
|
||
### ✅ 边高亮与模块聚焦
|
||
- status: done
|
||
- complexity: M
|
||
- files: src/components/dashboard/BlueprintModal.tsx
|
||
- acceptance: hover 时高亮关联边并淡化无关边；点击模块 pin 住高亮，关联模块保持原色，无关模块和区域淡化；重置视图按钮恢复全貌
|
||
|
||
### ✅ blocked 状态支持
|
||
- status: done
|
||
- complexity: S
|
||
- files: src-tauri/src/commands/blueprint.rs, src/lib/commands.ts, src/components/dashboard/BlueprintModal.tsx, .blueprint/CONVENTIONS.md
|
||
- acceptance: 任务卡支持 🔴 blocked 状态和 blocked_reason 字段，前端红色卡片展示阻塞原因，下一步面板最顶部聚合受阻任务
|
||
|
||
### ✅ 智能连线路由
|
||
- status: done
|
||
- complexity: S
|
||
- files: src/components/dashboard/BlueprintModal.tsx
|
||
- acceptance: 根据模块相对位置自动选择最短路径 handle，避免连线绕远
|
||
|
||
### ✅ 蓝图治理面板
|
||
- status: done
|
||
- complexity: M
|
||
- files: src/components/dashboard/BlueprintModal.tsx, src/lib/commands.ts
|
||
- acceptance: 侧边新增「治理」面板，展示 CONVENTIONS.md 当前版本与 master 版本对比；提供「同步规则」按钮（替代设置页的同步入口）；提供「初始化/同步蓝图」提示词入口（替代卡片徽章弹窗，统一收口）
|
||
|
||
### ✅ 顶部状态行扩展
|
||
- status: done
|
||
- complexity: S
|
||
- files: src/components/dashboard/BlueprintModal.tsx
|
||
- depends: blueprint-governance
|
||
- acceptance: 统计条新增「规则」状态指示（🟢已同步/🟡待更新），点击跳转到治理面板；「AI文档」指示器预留位置但灰显（depends: blueprint-feedback 未完成时不可用，避免跳转到不存在的面板）
|
||
|
||
### ✅ 批量执行提示词入口
|
||
- status: done
|
||
- complexity: S
|
||
- files: src/components/dashboard/BlueprintModal.tsx
|
||
- depends: blueprint-view
|
||
- acceptance: 下一步汇总面板新增「复制批量执行提示词」按钮；点击后将当前项目的批量执行提示词复制到剪贴板；提示词包含项目名称，指示 Claude 自主遍历所有 📋 任务卡依次执行（标记 🔵 加锁 → 实现 → 标记 ✅ 解锁，失败标 🔴 blocked），中途不等用户确认，全部完成后输出执行报告；提示词纯前端生成，无需新增 Tauri command
|
||
|
||
### 💭 AI 文档健康面板
|
||
- status: concept
|
||
- notes: 侧边新增「AI文档」面板，列出项目内所有 AI 相关文档（CLAUDE.md/AGENTS.md/.cursorrules 等）及其使用频率评分；标出休眠文档；提供「归档」操作。依赖 ai-doc-analytics 模块的埋点数据。
|
||
|
||
## 决策记录
|
||
|
||
- 选择 React Flow (@xyflow/react) 而非 D3 或自绘 canvas，因为 React Flow 提供开箱即用的节点拖拽、缩放、连线路由
|
||
- 使用 document-driven 蓝图（.blueprint/ 文件）而非数据库存储，因为 Claude 天然支持文件读写且可版本控制
|
||
- 区域分组用 React Flow 父子节点实现，模块作为子节点自动跟随分组
|
||
- hover 只做边高亮，点击(pin)才做节点淡化，避免 React Flow 节点重建导致的闪烁
|
||
- 飞轮模型分配：Opus 做架构需求和蓝图维护，Sonnet 执行任务卡，.blueprint/ 文件作为模型间共享状态
|
||
- 蓝图弹窗定位为项目蓝图驾驶舱：所有蓝图相关操作（治理、AI文档健康、提示词生成）统一收口到此弹窗，不再分散到设置页和卡片徽章
|