更新进度

This commit is contained in:
2026-01-22 22:06:38 +08:00
parent 9e64df5e33
commit 066637c1fa

View File

@@ -1,46 +1,125 @@
# 模块状态总览(重写) # 模块状态总览(重写)
总体完成度(粗略):约 75% ## 📊 项目完成度总览
## 1. 画布LogicFlow — 完成度75% **总体完成度82%** | **愿景一完成度70%** (步骤1-7/10已完成)
### 核心模块完成度
| 模块 | 完成度 | 状态 | 关键缺失 |
|------|--------|------|----------|
| 🎨 画布LogicFlow | 85% | ✅ 良好 | 单步前移/后移、撤销重做 |
| 📦 左侧组件库 | 65% | ⚠️ 可用 | textNode未注册、缩略图 |
| ⚙️ 右侧属性面板 | 85% | ✅ 良好 | textNode富文本编辑 |
| 🔧 工具栏 | 85% | ✅ 良好 | 导出命名优化 |
| 💬 弹窗系统 | 75% | ✅ 可用 | i18n完善、性能优化 |
| 💾 状态与持久化 | 90% | ✅ 优秀 | 重命名UI |
| 🌐 数据与国际化 | 60% | ⚠️ 基础 | UTF-8统一、日文覆盖 |
| 📁 项目资源面板 | 30% | ❌ 未集成 | 布局集成 |
| 🏗️ 构建与质量 | 40% | ⚠️ 基础 | 测试、CI |
### 愿景一实施进度(基础排版功能)
| 步骤 | 任务 | 状态 | 说明 |
|------|------|------|------|
| 1 | 节点最小化打通 | ✅ 完成 | imageNode可用textNode待注册 |
| 2 | 截图修复 | ✅ 完成 | LogicFlow Snapshot + 水印 |
| 3 | 图层命令MVP | ⚠️ 部分 | 置顶/置底✅,**前移/后移❌** |
| 4 | 多选/对齐/吸附 | ✅ 完成 | 6种对齐 + 2种分布 |
| 5 | 快捷键与微调 | ✅ 完成 | 8种快捷键全部工作 |
| 6 | 样式模型补齐 | ✅ 完成 | 11个样式属性统一 |
| 7 | 扩展与控制 | ✅ 完成 | MiniMap/Control + 开关 |
| 8 | 矢量节点MVP | ❌ 未开始 | vectorNode + SVG导入 |
| 9 | 资源与导出增强 | ❌ 未开始 | 资源弹窗 + SVG/PDF导出 |
| 10 | 历史与撤销重做 | ❌ 未开始 | Action + HistoryService |
## 🎯 下一步行动计划
### 🔴 高优先级(立即行动)
1. **补全图层命令** - 实现 `bringForward`/`sendBackward`
- 位置:[FlowEditor.vue:631-674](../src/components/flow/FlowEditor.vue#L631-L674)
- 影响解除步骤3阻塞完善右键菜单
- 预期调用LogicFlow层级API或自定义z-index管理
2. **注册textNode** - 取消注释并验证基本功能
- 位置:[FlowEditor.vue:76](../src/components/flow/FlowEditor.vue#L76)
- 影响完成步骤1启用文本节点
- 预期:基本渲染工作,富文本编辑可延后
### 🟡 中优先级(短期目标)
3. **实现撤销重做系统** - 步骤10
- 设计Action接口 + HistoryService
- 范围:记录增删改/移动/层级操作
- 快捷键Ctrl+Z/Y
4. **textNode富文本编辑** - 完善TextPanel
- 位置:[TextPanel.vue](../src/components/flow/panels/TextPanel.vue)
- 需求集成富文本编辑器TipTap/Quill
- 功能:内容编辑、字体、颜色、格式化
### 🟢 低优先级(长期规划)
5. **矢量节点MVP** - 步骤8
- 定义vectorNode类型
- 支持SVG path/rect/ellipse/polygon
- 属性面板编辑path/stroke/fill
6. **导出增强** - 步骤9
- 图片资源选择/上传弹窗
- 导出SVG/PDF格式
---
## 📋 详细模块状态
## 1. 画布LogicFlow — 完成度85%
- 已完成: - 已完成:
- 初始化与销毁LogicFlow 实例、网格/缩放/旋转、节点选中/空白取消src/components/flow/FlowEditor.vue - 初始化与销毁LogicFlow 实例、网格/缩放/旋转、节点选中/空白取消src/components/flow/FlowEditor.vue
- 自定义节点注册:`shikigamiSelect``yuhunSelect``propertySelect``imageNode` - 自定义节点注册:`shikigamiSelect``yuhunSelect``propertySelect``imageNode`src/components/flow/FlowEditor.vue:567-574
- 与 Store 联动:读取/写入 `graphRawData``transform`(缩放/位移src/ts/useStore.ts, src/ts/useLogicFlow.ts - 与 Store 联动:读取/写入 `graphRawData``transform`(缩放/位移src/ts/useStore.ts, src/ts/useLogicFlow.ts
- DnD 接入:由组件库触发拖拽放置 - DnD 接入:由组件库触发拖拽放置
- 右键菜单:节点置顶/置底与删除、边删除、画布添加节点(基于 LogicFlow Menu + `setElementZIndex` - 右键菜单:节点置顶/置底与删除、边删除、画布添加节点(基于 LogicFlow Menu + `setElementZIndex`src/components/flow/FlowEditor.vue:631-674
- 多选/框选、对齐线、吸附网格;左/右/上/下/水平/垂直居中与横/纵等距分布SelectionSelect + snapline + 自定义对齐分布指令) - 多选/框选、对齐线、吸附网格;左/右/上/下/水平/垂直居中与横/纵等距分布SelectionSelect + snapline + 自定义对齐分布指令)src/components/flow/FlowEditor.vue:450-564
- 扩展与控制:接入 MiniMap + Control 插件;吸附/对齐线/框选开关共享到 Toolbar 与 FlowEditor新增清空画布入口 - 扩展与控制:接入 MiniMap + Control 插件;吸附/对齐线/框选开关共享到 Toolbar 与 FlowEditor新增清空画布入口src/components/flow/FlowEditor.vue:588,682; src/components/Toolbar.vue:14-34
- **组合/锁定/隐藏**Ctrl+G/U 组/解组、Ctrl+L 锁定、Ctrl+Shift+H 隐藏src/components/flow/FlowEditor.vue:337-366, 283-313
- **快捷键系统**Del/Backspace 删除、方向键微移2px/10px、Ctrl+C/V 复制粘贴、Ctrl+G/U 组/解组、Ctrl+L 锁定、Ctrl+Shift+H 隐藏src/components/flow/FlowEditor.vue:611-629
- **节点元数据管理**meta.visible、meta.locked、meta.groupId 支持与规范化src/components/flow/FlowEditor.vue:133-209
- 未完成: - 未完成:
- 右键菜单层级命令:已接通置顶/置底,单步前移/后移(`bringForward`/`sendBackward`)未实现 - 右键菜单层级命令:已接通置顶/置底,单步前移/后移(`bringForward`/`sendBackward`)未实现
- 撤销重做、组合/锁定/隐藏、快捷键Del/Ctrl+C/V、方向键微移、Ctrl+Z/Y - **撤销重做**Ctrl+Z/Y 历史栈与操作回放
- **textNode 注册**:已在 ComponentsPanel 定义但 FlowEditor.vue:76 中被注释未注册
## 2. 左侧组件库Palette — 完成度60% ## 2. 左侧组件库Palette — 完成度65%
- 已完成: - 已完成:
- 分组展示:基础组件、阴阳师、其他(占位src/components/flow/ComponentsPanel.vue - 分组展示:基础组件rect/ellipse/image/text、阴阳师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
- 未完成: - 未完成:
- `textNode` 在画布侧未注册`imageNode` 已可用但无缩略图 - `textNode` 在画布侧未注册ComponentsPanel 已定义但 FlowEditor 未注册)
- 点击快速创建、组件预览缩略图、搜索与分组折叠 - 组件预览缩略图、搜索与分组折叠
- 点击快速创建(当前仅支持拖拽)
- 外置配置JSON与动态加载便于扩展 - 外置配置JSON与动态加载便于扩展
## 3. 右侧属性面板Inspector — 完成度80% ## 3. 右侧属性面板Inspector — 完成度85%
- 已完成: - 已完成:
- 按节点类型切换 UI显示基本信息ID/类型src/components/flow/PropertyPanel.vue面板按节点类型拆分子组件 - 按节点类型切换 UI显示基本信息ID/类型src/components/flow/PropertyPanel.vue面板按节点类型拆分子组件ShikigamiPanel/YuhunPanel/PropertyRulePanel/ImagePanel/TextPanel/StylePanel
- 打开式神/御魂/属性弹窗,并通过 `lf.setProperties` 回写到节点 - 打开式神/御魂/属性弹窗,并通过 `lf.setProperties` 回写到节点src/components/flow/panels/ShikigamiPanel.vue, YuhunPanel.vue, PropertyRulePanel.vue
- `imageNode` 属性编辑URL/本地上传、fit、宽高与预览写回 `properties` 同步渲染 - **imageNode 属性编辑**URL/本地上传Base64、fitcontain/cover/fill、宽高40-1000px与预览写回 `properties` 同步渲染src/components/flow/panels/ImagePanel.vue
- 样式模型:统一 `properties.style`,属性面板支持填充/描边/圆角/阴影/透明度/文字对齐/行高/字重,节点渲染消费样式 - **样式模型完整实现**:统一 `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
- 未完成: - 未完成:
- `textNode` 富文本编辑与同步 - **textNode 富文本编辑**TextPanel.vue 当前仅为 stub只显示内容不支持编辑
- 字段校验/联动、常用模板一键填充 - 字段校验/联动、常用模板一键填充
## 4. 工具栏Toolbar — 完成度80% ## 4. 工具栏Toolbar — 完成度85%
- 已完成: - 已完成:
- 导入/导出(走 store、更新日志、问题反馈src/components/Toolbar.vue - 导入/导出(走 store、更新日志、问题反馈、重置工作区src/components/Toolbar.vue:3-10
- 水印设置(文本/字号/颜色/角度/行列)并持久化到 localStorage - 水印设置(文本/字号/颜色/角度/行列)并持久化到 localStoragesrc/components/Toolbar.vue:70-97
- 截图预览与导出:基于 LogicFlow Snapshot 获取 PNG叠加自定义水印预览/下载 - 截图预览与导出:基于 LogicFlow Snapshot 获取 PNG叠加自定义水印预览/下载src/components/Toolbar.vue:58-67
- **画布控制开关**:框选开/关、吸附开/关、对齐线开/关src/components/Toolbar.vue:14-34
- **清空画布**handleClearCanvas 入口src/components/Toolbar.vue:11
- 未完成: - 未完成:
- 导出文件命名/版本号与 `schemaVersion`,导入时的校验与迁移提示 - 导出文件命名优化(当前固定为 yys-editor-files.json
- 导入时的 schemaVersion 校验与迁移提示(迁移逻辑已在 schema.ts 实现,但 UI 无提示)
## 5. 弹窗系统Dialogs — 完成度75% ## 5. 弹窗系统Dialogs — 完成度75%
- 已完成: - 已完成:
@@ -56,9 +135,17 @@
## 支撑模块 ## 支撑模块
### A. 状态与持久化Pinia + localStorage — 完成度:80% ### A. 状态与持久化Pinia + localStorage — 完成度:90%
- 已完成:多标签(新增/删除/切换)、自动保存(防抖 + 30s 定时)、`graphRawData`/`transform` 同步、导入兼容旧格式,`schemaVersion` 与数据迁移Root Document + 迁移器src/ts/useStore.ts, src/ts/schema.ts - 已完成:
- 未完成:重命名/删除等文件管理与 UI 全链路校验、失败兜底与错误提示 - **多标签管理**:新增/删除/切换,双 ID 系统activeFileId + activeFile namesrc/ts/useStore.ts:240-282
- **自动保存**:防抖 1s + 30s 定时器syncLogicFlowDataToStore 同步 graphRawData/transformsrc/ts/useStore.ts:232-238, 313-336
- **数据迁移系统**migrateToV1() 处理多种遗留格式schemaVersion="1.0.0"src/ts/schema.ts:128-224
- **导入导出**:兼容旧格式,自动迁移,双 ID 导出确保兼容性src/ts/useStore.ts:133-187
- **Root Document 架构**fileList/activeFileId/schemaVersion 顶层结构src/ts/schema.ts:1-30
- **错误处理**localStorage 配额超限时 clear 重试JSON 解析错误捕获src/ts/useStore.ts:74-96
- 未完成:
- 文件重命名 UIstore 有 findByName 但无 rename 方法)
- 导入失败时的用户友好提示(当前仅 console.warn
### B. 数据与国际化 — 完成度60% ### B. 数据与国际化 — 完成度60%
- 已完成:式神/御魂数据与图片src/data/*.json, public/assets/*i18n自动选 zh/jafallback zhsrc/locales/*.json, src/main.js - 已完成:式神/御魂数据与图片src/data/*.json, public/assets/*i18n自动选 zh/jafallback zhsrc/locales/*.json, src/main.js
@@ -103,16 +190,16 @@
- 截图约定FlowEditor 暴露 `getCanvasEl()`Toolbar 基于该容器调用 html2canvas`src/components/Toolbar.vue`)。 - 截图约定FlowEditor 暴露 `getCanvasEl()`Toolbar 基于该容器调用 html2canvas`src/components/Toolbar.vue`)。
- 推荐开发顺序(每步可独立验收) - 推荐开发顺序(每步可独立验收)
1) 节点最小化打通:已注册并可用 `imageNode`(上传/URL/fit/宽高);`textNode` 待注册 + 富文本/样式PropertyPanel 已按类型拆分子组件(`src/components/flow/FlowEditor.vue`, `src/components/flow/PropertyPanel.vue`)。 1) **节点最小化打通**imageNode 已注册并可用(上传/URL/fit/宽高textNode 已在 ComponentsPanel 定义但 FlowEditor 未注册PropertyPanel 已按类型拆分子组件ShikigamiPanel/YuhunPanel/PropertyRulePanel/ImagePanel/TextPanel/StylePanel
2) 截图修复:改为基于 LogicFlow 容器导出 PNG沿用水印配置`src/components/Toolbar.vue`)。已完成 2) **截图修复**:已改为基于 LogicFlow Snapshot 导出 PNG沿用水印配置src/components/Toolbar.vue:prepareCapture
3) 图层命令 MVP:基于 LogicFlow 的层级/前后置 API 封装 bringToFront/sendToBack/bringForward/sendBackward + 右键菜单,如需持久化仅同步引擎提供的层级信息(`src/components/flow/FlowEditor.vue`)。已完成:置顶/置底 + 右键菜单;待补:单步前移/后移。 3) ⚠️ **图层命令 MVP**:已完成置顶/置底 + 右键菜单src/components/flow/FlowEditor.vue:631-674**待补:单步前移/后移bringForward/sendBackward**
4) 多选/对齐/吸附:框选、对齐线、吸附网格;左/右/上/下/水平/垂直居中与横/纵等距分布FlowEditor/extension。已完成 4) **多选/对齐/吸附**框选SelectionSelect、对齐线snapline、吸附网格6 种对齐(左/右/上/下/水平居中/垂直居中+ 2 种等距分布(横/纵src/components/flow/FlowEditor.vue:450-564
5) 快捷键与微调Del 删除、方向键微移、Ctrl+C/V 复制粘贴、Ctrl+G/U 组/解组(简单组:父 meta id + 同步移动)、锁定/隐藏(`properties.locked`/`visible`)。 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.style` 字段并在 PropertyPanel 全量编辑(填充/描边/圆角/阴影/透明度/文字对齐/行高/字重)。【已完成】 6) **样式模型补齐**:统一 properties.styleNodeStyle 接口),PropertyPanel 全量编辑 11 个样式属性(填充/描边/描边宽度/圆角/阴影 4 项/透明度/文字对齐/行高/字重)src/components/flow/panels/StylePanel.vue, src/ts/nodeStyle.ts
7) 扩展与控制:接入 MiniMap/Control/SnapshotToolbar 增加吸附/对齐开关与清空画布。【已完成MiniMap + Control 接入Toolbar/FlowEditor 共享开关 + 清空画布Snapshot 已有】 7) **扩展与控制**MiniMap + Control 插件接入src/components/flow/FlowEditor.vue:588,682Toolbar 增加框选/吸附/对齐线开关src/components/Toolbar.vue:14-34清空画布入口src/components/Toolbar.vue:11
8) 矢量节点 MVP`vectorNode`SVG path/rect/ellipse/polygon属性面板支持 path/stroke/fill/strokeWidth新增 SVG 导入弹窗 8) **矢量节点 MVP**vectorNodeSVG path/rect/ellipse/polygon属性面板支持 path/stroke/fill/strokeWidth新增 SVG 导入弹窗
9) 资源与导出增强:图片资源选择/上传弹窗(base64 或预留 `assetId`),导出 SVG/PDFPDF 可延后)。 9) **资源与导出增强**:图片资源选择/上传弹窗(当前仅支持单个上传),导出 SVG/PDF当前仅 PNG
10) 历史与撤销重做:抽象 Action + HistoryService记录增删改/移动/层级Ctrl+Z/Y 10) **历史与撤销重做**:抽象 Action + HistoryService记录增删改/移动/层级Ctrl+Z/Y 快捷键
- 依赖关系 - 依赖关系
- 图层命令3依赖 节点/截图1/2并为 对齐/组/快捷键4/5的前置。 - 图层命令3依赖 节点/截图1/2并为 对齐/组/快捷键4/5的前置。
@@ -126,10 +213,39 @@
- 截图基于 DOM 选择器易漂移;由 FlowEditor 提供 `getCanvasEl()`Toolbar 仅依赖该接口。 - 截图基于 DOM 选择器易漂移;由 FlowEditor 提供 `getCanvasEl()`Toolbar 仅依赖该接口。
- 验收停靠点 - 验收停靠点
- 1/2 结束:冻结顶层导出结构 v1Root Document + LogicFlow GraphData与截图容器约定filesStore 开始写入 `schemaVersion`当前已完成Root Document + GraphData + schemaVersion 持久化截图容器约定已完成LogicFlow Snapshot + 水印 - **1/2 结束**Root Document + LogicFlow GraphData 结构已冻结src/ts/schema.tsschemaVersion="1.0.0" 持久化src/ts/useStore.ts截图基于 LogicFlow Snapshot + 水印src/components/Toolbar.vue
- 3/4 结束:冻结 CanvasService API层级/对齐操作均能回放。 - ⚠️ **3/4 结束**:层级操作部分完成(置顶/置底✅,前移/后移❌),对齐/分布操作已完成src/components/flow/FlowEditor.vue:485-564但无操作回放历史栈未实现
- 6 结束:统一样式模型,三类节点在 UI 中可一致编辑。 - **6 结束**样式模型已统一NodeStyle 接口imageNode/shikigamiSelect/yuhunSelect/propertySelect 四类节点均可通过 StylePanel 一致编辑 11 个样式属性
- 8 结束:确认 SVG 导入/导出链路稳定。 - **8 结束**vectorNode 未开始,SVG 导入/导出链路未实现
---
## 当前状态总结2026-01-22
### 已完成的愿景一核心功能(步骤 1-7约 70%
- ✅ 节点系统imageNode 完整可用textNode 定义但未注册
- ✅ 截图导出LogicFlow Snapshot + 自定义水印
- ✅ 图层命令:置顶/置底(待补:前移/后移)
- ✅ 多选对齐6 种对齐 + 2 种等距分布
- ✅ 快捷键8 种快捷键全部工作Del/方向键/Ctrl+C/V/G/U/L/Shift+H
- ✅ 样式模型11 个样式属性统一编辑
- ✅ 扩展控制MiniMap/Control/Snapshot 插件 + Toolbar 开关
### 待完成的愿景一功能(步骤 3/8/9/10约 30%
- ⚠️ **高优先级(阻塞)**
- 单步前移/后移bringForward/sendBackward- 步骤 3 残留
- 撤销重做Ctrl+Z/Y- 步骤 10依赖历史栈
- ⚠️ **中优先级(功能完整性)**
- textNode 注册与富文本编辑 - 步骤 1 残留
- ⚠️ **低优先级(增强功能)**
- vectorNode MVP - 步骤 8
- SVG/PDF 导出 - 步骤 9
### 建议的下一步行动
1. **立即行动**:补全 bringForward/sendBackward解除步骤 3 阻塞)
2. **短期目标**:注册 textNode取消 FlowEditor.vue:76 注释)
3. **中期目标**实现撤销重做Action + HistoryService
4. **长期目标**vectorNode + SVG 导出(步骤 8-9
### 愿景二:联动 wiki/攻略站(浏览/复刻/继续编辑) ### 愿景二:联动 wiki/攻略站(浏览/复刻/继续编辑)
- 工具栏 - 工具栏
- 导入/导出增加元信息title/tags/lang/version/schemaVersion“发布/上传”“打开攻略”“复刻编辑”入口 - 导入/导出增加元信息title/tags/lang/version/schemaVersion“发布/上传”“打开攻略”“复刻编辑”入口