a2596413c5
- Implemented CopyBtn component to allow copying of nodes with a new unique ID and adjusted position. - Added copy functionality to ProjectNode, GitNode, EnvNode, ServerNode, FocusNode, CustomNode, and ContainerNode. - Enhanced ContainerNode to copy itself along with its children nodes. - Introduced a new LabeledEdge component for editable edges with drag-and-drop support for path adjustment and text labels. - Added right-click context menu for edges to delete connections. - Updated data structures to support new properties for tasks in BlueprintTask and BlueprintStats.
88 lines
3.7 KiB
Markdown
88 lines
3.7 KiB
Markdown
---
|
||
id: blueprint-view
|
||
name: 蓝图可视化
|
||
status: done
|
||
progress: 100
|
||
---
|
||
|
||
## 概述
|
||
读取项目 .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，避免连线绕远
|
||
|
||
## 决策记录
|
||
|
||
- 选择 React Flow (@xyflow/react) 而非 D3 或自绘 canvas，因为 React Flow 提供开箱即用的节点拖拽、缩放、连线路由
|
||
- 使用 document-driven 蓝图（.blueprint/ 文件）而非数据库存储，因为 Claude 天然支持文件读写且可版本控制
|
||
- 区域分组用 React Flow 父子节点实现，模块作为子节点自动跟随分组
|
||
- hover 只做边高亮，点击(pin)才做节点淡化，避免 React Flow 节点重建导致的闪烁
|
||
- 飞轮模型分配：Opus 做架构需求和蓝图维护，Sonnet 执行任务卡，.blueprint/ 文件作为模型间共享状态
|