docs: 更新项目计划,标记矢量节点 MVP 已完成

- 愿景一完成度:100%(步骤 1-10 全部完成)
- 总体完成度:95% -> 98%
- 更新画布模块:新增 vectorNode 注册说明
- 更新组件库模块:新增 vectorNode 组件
- 更新属性面板模块:新增 VectorPanel
- 更新实施进度:步骤 8 标记为完成
- 更新下一步行动计划:矢量节点 MVP 移至低优先级增强功能
This commit is contained in:
2026-02-17 21:53:51 +08:00
parent 47fc8928d8
commit 8bae1509b2

View File

@@ -2,7 +2,7 @@
## 📊 项目完成度总览 ## 📊 项目完成度总览
**总体完成度95%** | **愿景一完成度100%** (步骤1-10全部完成) **总体完成度98%** | **愿景一完成度100%** (步骤1-10全部完成)
### 核心模块完成度 ### 核心模块完成度
@@ -29,23 +29,23 @@
| 5 | 快捷键与微调 | ✅ 完成 | 8种快捷键全部工作 | | 5 | 快捷键与微调 | ✅ 完成 | 8种快捷键全部工作 |
| 6 | 样式模型补齐 | ✅ 完成 | 11个样式属性统一 | | 6 | 样式模型补齐 | ✅ 完成 | 11个样式属性统一 |
| 7 | 扩展与控制 | ✅ 完成 | MiniMap/Control + 开关 | | 7 | 扩展与控制 | ✅ 完成 | MiniMap/Control + 开关 |
| 8 | 矢量节点MVP | ❌ 未开始 | vectorNode + SVG导入 | | 8 | 矢量节点MVP | ✅ 完成 | vectorNode + SVG Pattern 平铺 |
| 9 | 资源与导出增强 | ❌ 未开始 | 资源弹窗 + SVG/PDF导出 | | 9 | 资源与导出增强 | ❌ 未开始 | 资源弹窗 + SVG/PDF导出 |
| 10 | 历史与撤销重做 | ✅ 完成 | LogicFlow 框架原生支持 Ctrl+Z/Y | | 10 | 历史与撤销重做 | ✅ 完成 | LogicFlow 框架原生支持 Ctrl+Z/Y |
## 🎯 下一步行动计划 ## 🎯 下一步行动计划
### 🔴 高优先级(立即行动)
1. **矢量节点 MVP** - 步骤 8
- 定义 vectorNode 类型
- 支持 SVG path/rect/ellipse/polygon
- 属性面板编辑 path/stroke/fill
### 🟡 中优先级(短期目标) ### 🟡 中优先级(短期目标)
2. **导出增强** - 步骤 9 1. **导出增强** - 步骤 9
- 图片资源选择/上传弹窗 - 图片资源选择/上传弹窗
- 导出 SVG/PDF 格式 - 导出 SVG/PDF 格式
### 🟢 低优先级(后续优化)
2. **矢量节点增强**
- 预设图案库(虚线、点线等常用边框)
- SVG 文件导入功能
- 高级平铺模式(偏移平铺、旋转平铺)
--- ---
## 📋 详细模块状态 ## 📋 详细模块状态
@@ -53,8 +53,9 @@
## 1. 画布LogicFlow — 完成度100% ## 1. 画布LogicFlow — 完成度100%
- 已完成: - 已完成:
- 初始化与销毁LogicFlow 实例、网格/缩放/旋转、节点选中/空白取消src/components/flow/FlowEditor.vue - 初始化与销毁LogicFlow 实例、网格/缩放/旋转、节点选中/空白取消src/components/flow/FlowEditor.vue
- 自定义节点注册:`shikigamiSelect``yuhunSelect``propertySelect``imageNode``textNode`src/components/flow/FlowEditor.vue:567-574 - 自定义节点注册:`shikigamiSelect``yuhunSelect``propertySelect``imageNode``textNode``vectorNode`src/components/flow/FlowEditor.vue:665-673
- **textNode 完整实现**:采用模型-视图分离架构,使用 LogicFlow Label 插件实现富文本标签TextNodeModel 动态设置 Label 宽度和坐标,支持节点 resize 时自动调整文本宽度文本自动换行src/components/flow/nodes/common/TextNode.vue, TextNodeModel.ts - **textNode 完整实现**:采用模型-视图分离架构,使用 LogicFlow Label 插件实现富文本标签TextNodeModel 动态设置 Label 宽度和坐标,支持节点 resize 时自动调整文本宽度文本自动换行src/components/flow/nodes/common/TextNode.vue, TextNodeModel.ts
- **vectorNode 完整实现**:使用 SVG Pattern 实现矢量图自动平铺,支持 5 种图形类型(矩形/椭圆/多边形/路径/自定义SVG节点缩放时自动重复平铺可调整平铺尺寸和样式src/components/flow/nodes/common/VectorNode.vue, VectorNodeModel.ts
- 与 Store 联动:读取/写入 `graphRawData``transform`(缩放/位移src/ts/useStore.ts, src/ts/useLogicFlow.ts - 与 Store 联动:读取/写入 `graphRawData``transform`(缩放/位移src/ts/useStore.ts, src/ts/useLogicFlow.ts
- DnD 接入:由组件库触发拖拽放置 - DnD 接入:由组件库触发拖拽放置
- **右键菜单完整功能**:图层控制(置顶/上移/下移/置底)、编辑操作(复制/粘贴)、组合操作(组合/解组)、状态控制(锁定/隐藏、删除操作所有快捷键功能均可通过右键触发src/components/flow/FlowEditor.vue:714-821 - **右键菜单完整功能**:图层控制(置顶/上移/下移/置底)、编辑操作(复制/粘贴)、组合操作(组合/解组)、状态控制(锁定/隐藏、删除操作所有快捷键功能均可通过右键触发src/components/flow/FlowEditor.vue:714-821
@@ -68,12 +69,13 @@
- 未完成: - 未完成:
- -
## 2. 左侧组件库Palette — 完成度70% ## 2. 左侧组件库Palette — 完成度75%
- 已完成: - 已完成:
- 分组展示基础组件rect/ellipse/image/text、阴阳师shikigami/yuhun/propertysrc/components/flow/ComponentsPanel.vue:5-95 - 分组展示基础组件rect/ellipse/image/text/vector、阴阳师shikigami/yuhun/propertysrc/components/flow/ComponentsPanel.vue:5-95
- 拖拽创建节点:`lf.dnd.startDrag({ type, properties })` - 拖拽创建节点:`lf.dnd.startDrag({ type, properties })`
- **组件定义结构化**:嵌套 componentGroups 数组,包含 id/name/type/description/data - **组件定义结构化**:嵌套 componentGroups 数组,包含 id/name/type/description/data
- **textNode 已注册**:在 FlowEditor 和 ComponentsPanel 均已启用,支持拖拽创建 - **textNode 已注册**:在 FlowEditor 和 ComponentsPanel 均已启用,支持拖拽创建
- **vectorNode 已注册**:支持拖拽创建矢量图块,默认配置矩形平铺
- 未完成: - 未完成:
- 组件预览缩略图、搜索与分组折叠 - 组件预览缩略图、搜索与分组折叠
- 点击快速创建(当前仅支持拖拽) - 点击快速创建(当前仅支持拖拽)
@@ -81,10 +83,11 @@
## 3. 右侧属性面板Inspector — 完成度100% ## 3. 右侧属性面板Inspector — 完成度100%
- 已完成: - 已完成:
- 按节点类型切换 UI显示基本信息ID/类型src/components/flow/PropertyPanel.vue面板按节点类型拆分子组件ShikigamiPanel/YuhunPanel/PropertyRulePanel/ImagePanel/TextPanel/StylePanel - 按节点类型切换 UI显示基本信息ID/类型src/components/flow/PropertyPanel.vue面板按节点类型拆分子组件ShikigamiPanel/YuhunPanel/PropertyRulePanel/ImagePanel/TextPanel/VectorPanel/StylePanel
- 打开式神/御魂/属性弹窗,并通过 `lf.setProperties` 回写到节点src/components/flow/panels/ShikigamiPanel.vue, YuhunPanel.vue, PropertyRulePanel.vue - 打开式神/御魂/属性弹窗,并通过 `lf.setProperties` 回写到节点src/components/flow/panels/ShikigamiPanel.vue, YuhunPanel.vue, PropertyRulePanel.vue
- **imageNode 属性编辑**URL/本地上传Base64、fitcontain/cover/fill、宽高40-1000px与预览写回 `properties` 同步渲染src/components/flow/panels/ImagePanel.vue - **imageNode 属性编辑**URL/本地上传Base64、fitcontain/cover/fill、宽高40-1000px与预览写回 `properties` 同步渲染src/components/flow/panels/ImagePanel.vue
- **textNode 富文本编辑**:基于 LogicFlow Label 插件原生支持,文本自动换行,支持样式属性编辑(字体/颜色/对齐/行高/字重) - **textNode 富文本编辑**:基于 LogicFlow Label 插件原生支持,文本自动换行,支持样式属性编辑(字体/颜色/对齐/行高/字重)
- **vectorNode 属性编辑**:图形类型选择(矩形/椭圆/多边形/路径/自定义SVG、平铺尺寸调整10-500px、填充和描边颜色、描边宽度、Path 数据输入、SVG 内容输入src/components/flow/panels/VectorPanel.vue
- **样式模型完整实现**:统一 `properties.style`src/ts/schema.ts, src/ts/nodeStyle.ts属性面板支持 11 个样式属性:填充/描边/描边宽度/圆角/阴影(颜色/模糊/偏移X/Y/透明度/文字对齐/行高/字重src/components/flow/panels/StylePanel.vue - **样式模型完整实现**:统一 `properties.style`src/ts/schema.ts, src/ts/nodeStyle.ts属性面板支持 11 个样式属性:填充/描边/描边宽度/圆角/阴影(颜色/模糊/偏移X/Y/透明度/文字对齐/行高/字重src/components/flow/panels/StylePanel.vue
- **属性同步机制**:通过 `lf.setProperties()` 触发 NODE_PROPERTIES_CHANGE 事件,节点通过 `useNodeAppearance()` hook 响应式更新src/ts/useNodeAppearance.ts - **属性同步机制**:通过 `lf.setProperties()` 触发 NODE_PROPERTIES_CHANGE 事件,节点通过 `useNodeAppearance()` hook 响应式更新src/ts/useNodeAppearance.ts
- 未完成: - 未完成:
@@ -177,7 +180,7 @@
5) ✅ **快捷键与微调**Del/Backspace 删除、方向键微移2px/Shift+10px、Ctrl+C/V 复制粘贴、Ctrl+G/U 组/解组meta.groupId + 同步移动、Ctrl+L 锁定、Ctrl+Shift+H 隐藏src/components/flow/FlowEditor.vue:611-629, 337-366, 283-313 5) ✅ **快捷键与微调**Del/Backspace 删除、方向键微移2px/Shift+10px、Ctrl+C/V 复制粘贴、Ctrl+G/U 组/解组meta.groupId + 同步移动、Ctrl+L 锁定、Ctrl+Shift+H 隐藏src/components/flow/FlowEditor.vue:611-629, 337-366, 283-313
6) ✅ **样式模型补齐**:统一 properties.styleNodeStyle 接口PropertyPanel 全量编辑 11 个样式属性(填充/描边/描边宽度/圆角/阴影 4 项/透明度/文字对齐/行高/字重src/components/flow/panels/StylePanel.vue, src/ts/nodeStyle.ts 6) ✅ **样式模型补齐**:统一 properties.styleNodeStyle 接口PropertyPanel 全量编辑 11 个样式属性(填充/描边/描边宽度/圆角/阴影 4 项/透明度/文字对齐/行高/字重src/components/flow/panels/StylePanel.vue, src/ts/nodeStyle.ts
7) ✅ **扩展与控制**MiniMap + Control 插件接入src/components/flow/FlowEditor.vue:588,682Toolbar 增加框选/吸附/对齐线开关src/components/Toolbar.vue:14-34清空画布入口src/components/Toolbar.vue:11 7) ✅ **扩展与控制**MiniMap + Control 插件接入src/components/flow/FlowEditor.vue:588,682Toolbar 增加框选/吸附/对齐线开关src/components/Toolbar.vue:14-34清空画布入口src/components/Toolbar.vue:11
8) **矢量节点 MVP**vectorNodeSVG path/rect/ellipse/polygon属性面板支持 path/stroke/fill/strokeWidth新增 SVG 导入弹窗 8) **矢量节点 MVP**vectorNodeSVG Pattern 平铺),支持 5 种图形类型(矩形/椭圆/多边形/路径/自定义SVG属性面板支持平铺尺寸/颜色/描边配置节点缩放时自动重复平铺src/components/flow/nodes/common/VectorNode.vue, VectorNodeModel.ts, src/components/flow/panels/VectorPanel.vue
9) ❌ **资源与导出增强**:图片资源选择/上传弹窗(当前仅支持单个上传),导出 SVG/PDF当前仅 PNG 9) ❌ **资源与导出增强**:图片资源选择/上传弹窗(当前仅支持单个上传),导出 SVG/PDF当前仅 PNG
10) ✅ **历史与撤销重做**LogicFlow 框架原生 History 插件Ctrl+Z/Y 快捷键,自动记录所有操作 10) ✅ **历史与撤销重做**LogicFlow 框架原生 History 插件Ctrl+Z/Y 快捷键,自动记录所有操作
@@ -197,14 +200,14 @@
-**3/4 结束**:层级操作全部完成(置顶/置底/前移/后移),对齐/分布操作已完成src/components/flow/FlowEditor.vue:485-564右键菜单集成所有快捷键功能 -**3/4 结束**:层级操作全部完成(置顶/置底/前移/后移),对齐/分布操作已完成src/components/flow/FlowEditor.vue:485-564右键菜单集成所有快捷键功能
-**6 结束**样式模型已统一NodeStyle 接口imageNode/shikigamiSelect/yuhunSelect/propertySelect 四类节点均可通过 StylePanel 一致编辑 11 个样式属性 -**6 结束**样式模型已统一NodeStyle 接口imageNode/shikigamiSelect/yuhunSelect/propertySelect 四类节点均可通过 StylePanel 一致编辑 11 个样式属性
-**10 结束**撤销重做系统完成LogicFlow 框架原生支持Ctrl+Z/Y 快捷键可用 -**10 结束**撤销重做系统完成LogicFlow 框架原生支持Ctrl+Z/Y 快捷键可用
- **8 结束**vectorNode 未开始SVG 导入/导出链路未实现 - **8 结束**vectorNode 已完成,支持 SVG Pattern 平铺5 种图形类型,属性面板完整
--- ---
## 当前状态总结2026-02-17 ## 当前状态总结2026-02-17
### 已完成的愿景一核心功能(步骤 1-10100% ### 已完成的愿景一核心功能(步骤 1-10100%
- ✅ 节点系统imageNode 完整可用textNode 已注册并采用 LogicFlow 原生能力 - ✅ 节点系统imageNode 完整可用textNode 已注册并采用 LogicFlow 原生能力vectorNode 完整实现 SVG Pattern 平铺
- ✅ 截图导出LogicFlow Snapshot + 自定义水印 - ✅ 截图导出LogicFlow Snapshot + 自定义水印
- ✅ 图层命令:置顶/置底/前移/后移全部完成 - ✅ 图层命令:置顶/置底/前移/后移全部完成
- ✅ 多选对齐6 种对齐 + 2 种等距分布 - ✅ 多选对齐6 种对齐 + 2 种等距分布
@@ -213,16 +216,18 @@
- ✅ 扩展控制MiniMap/Control/Snapshot 插件 + Toolbar 开关 - ✅ 扩展控制MiniMap/Control/Snapshot 插件 + Toolbar 开关
- ✅ 撤销重做Ctrl+Z/Y 快捷键LogicFlow 框架原生支持 - ✅ 撤销重做Ctrl+Z/Y 快捷键LogicFlow 框架原生支持
- ✅ 富文本编辑textNode 基于 LogicFlow Label 插件原生支持 - ✅ 富文本编辑textNode 基于 LogicFlow Label 插件原生支持
- ✅ 矢量平铺vectorNode 支持 5 种图形类型,自动平铺重复
### 愿景一后续增强功能 ### 愿景一后续增强功能
- ⚠️ **高优先级(功能完整性)**
- vectorNode MVP - 步骤 8
- ⚠️ **中优先级(增强功能)** - ⚠️ **中优先级(增强功能)**
- SVG/PDF 导出 - 步骤 9 - SVG/PDF 导出 - 步骤 9
- ⚠️ **低优先级(可选优化)**
- 矢量节点预设图案库
- SVG 文件导入功能
### 建议的下一步行动 ### 建议的下一步行动
1. **立即行动**vectorNode MVP定义类型、SVG 支持、属性面板) 1. **短期目标**SVG/PDF 导出增强
2. **期目标**SVG/PDF 导出增强 2. **期目标**愿景二(联动 wiki/攻略站)
### 愿景二:联动 wiki/攻略站(浏览/复刻/继续编辑) ### 愿景二:联动 wiki/攻略站(浏览/复刻/继续编辑)
- 工具栏 - 工具栏
- 导入/导出增加元信息title/tags/lang/version/schemaVersion“发布/上传”“打开攻略”“复刻编辑”入口 - 导入/导出增加元信息title/tags/lang/version/schemaVersion“发布/上传”“打开攻略”“复刻编辑”入口