From 28b381801129f318778f74f8a06ab7fd205f0cf8 Mon Sep 17 00:00:00 2001 From: rookie4show Date: Fri, 26 Dec 2025 14:10:21 +0800 Subject: [PATCH] =?UTF-8?q?=E5=90=AF=E7=94=A8=E5=AF=8C=E6=96=87=E6=9C=AC?= =?UTF-8?q?=E6=A0=87=E7=AD=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/1management/plan.md | 19 ++++++++++--------- src/components/flow/FlowEditor.vue | 17 ++++++++++++++--- 2 files changed, 24 insertions(+), 12 deletions(-) diff --git a/docs/1management/plan.md b/docs/1management/plan.md index 6b1c5ad..d4b90bb 100644 --- a/docs/1management/plan.md +++ b/docs/1management/plan.md @@ -1,11 +1,11 @@ # 模块状态总览（重写） -总体完成度（粗略）：约 66% +总体完成度（粗略）：约 68% -## 1. 画布（LogicFlow） — 完成度：65% +## 1. 画布（LogicFlow） — 完成度：68% - 已完成： - 初始化与销毁：LogicFlow 实例、网格/缩放/旋转、节点选中/空白取消（src/components/flow/FlowEditor.vue） - - 自定义节点注册：`shikigamiSelect`、`yuhunSelect`、`propertySelect` + - 自定义节点注册：`shikigamiSelect`、`yuhunSelect`、`propertySelect`、`imageNode` - 与 Store 联动：读取/写入 `graphRawData` 与 `transform`（缩放/位移）（src/ts/useStore.ts, src/ts/useLogicFlow.ts） - DnD 接入：由组件库触发拖拽放置 - 右键菜单：节点置顶/置底与删除、边删除、画布添加节点（基于 LogicFlow Menu + `setElementZIndex`） @@ -15,21 +15,22 @@ - 撤销重做、组合/锁定/隐藏、快捷键（Del/Ctrl+C/V、方向键微移、Ctrl+Z/Y） - MiniMap/控制条/Snapshot 等扩展能力 -## 2. 左侧组件库（Palette） — 完成度：55% +## 2. 左侧组件库（Palette） — 完成度：60% - 已完成： - 分组展示：基础组件、阴阳师、其他（占位）（src/components/flow/ComponentsPanel.vue） - 拖拽创建节点：`lf.dnd.startDrag({ type, properties })` - 未完成： - - `imageNode`、`textNode` 在画布侧未注册，基础组件中的“图片/文本”目前不可用 + - `textNode` 在画布侧未注册；`imageNode` 已可用但无缩略图 - 点击快速创建、组件预览缩略图、搜索与分组折叠 - 外置配置（JSON）与动态加载，便于扩展 -## 3. 右侧属性面板（Inspector） — 完成度：65% +## 3. 右侧属性面板（Inspector） — 完成度：70% - 已完成： - - 按节点类型切换 UI，显示基本信息（ID/类型）（src/components/flow/PropertyPanel.vue） + - 按节点类型切换 UI，显示基本信息（ID/类型）（src/components/flow/PropertyPanel.vue），面板按节点类型拆分子组件 - 打开式神/御魂/属性弹窗，并通过 `lf.setProperties` 回写到节点 + - `imageNode` 属性编辑：URL/本地上传、fit、宽高与预览，写回 `properties` 同步渲染 - 未完成： - - `imageNode`/`textNode` 属性编辑未打通（图片上传后属性回写、富文本编辑器启用与同步） + - `textNode` 富文本编辑与同步 - 字段校验/联动、常用模板一键填充、更多样式项（填充/描边/圆角/阴影/透明度） ## 4. 工具栏（Toolbar） — 完成度：70% @@ -102,7 +103,7 @@ - 截图约定：FlowEditor 暴露 `getCanvasEl()`，Toolbar 基于该容器调用 html2canvas（`src/components/Toolbar.vue`）。 - 推荐开发顺序（每步可独立验收） - 1) 节点最小化打通：注册并可用 imageNode/textNode；PropertyPanel 提供基础属性（图片 url/宽高；文本 content/颜色/字号）（`src/components/flow/FlowEditor.vue`, `src/components/flow/PropertyPanel.vue`）。 + 1) 节点最小化打通：已注册并可用 `imageNode`（上传/URL/fit/宽高）；`textNode` 待注册 + 富文本/样式；PropertyPanel 已按类型拆分子组件（`src/components/flow/FlowEditor.vue`, `src/components/flow/PropertyPanel.vue`）。 2) 截图修复：改为基于 LogicFlow 容器导出 PNG，沿用水印配置（`src/components/Toolbar.vue`）。 3) 图层命令 MVP：基于 LogicFlow 的层级/前后置 API 封装 bringToFront/sendToBack/bringForward/sendBackward + 右键菜单，如需持久化仅同步引擎提供的层级信息（`src/components/flow/FlowEditor.vue`）。已完成：置顶/置底 + 右键菜单；待补：单步前移/后移。 4) 多选/对齐/吸附：框选、对齐线、吸附网格；左/右/上/下/水平/垂直居中与横/纵等距分布（FlowEditor/extension）。 diff --git a/src/components/flow/FlowEditor.vue b/src/components/flow/FlowEditor.vue index ea98265..0baac03 100644 --- a/src/components/flow/FlowEditor.vue +++ b/src/components/flow/FlowEditor.vue @@ -13,8 +13,10 @@ import { ref, watch, onMounted, onBeforeUnmount, defineExpose } from 'vue'; import LogicFlow, { EventType } from '@logicflow/core'; import '@logicflow/core/lib/style/index.css'; -import { Menu } from "@logicflow/extension"; +import { Menu,Label } from "@logicflow/extension"; import "@logicflow/extension/lib/style/index.css"; +import '@logicflow/core/es/index.css'; +import '@logicflow/extension/es/index.css'; import { register } from '@logicflow/vue-node-registry'; import ShikigamiSelectNode from './nodes/yys/ShikigamiSelectNode.vue'; @@ -65,8 +67,17 @@ onMounted(() => { grid: true, allowResize: true, allowRotate: true, - plugins: [Menu], - overlapMode:-1 + overlapMode:-1, + plugins: [Menu,Label], + pluginsOptions: { + label: { + isMultiple: true, + maxCount: 3, + labelWidth: 80, + // textOverflowMode -> 'ellipsis' | 'wrap' | 'clip' | 'nowrap' | 'default' + textOverflowMode: 'wrap', + }, + }, }); const lfInstance = lf.value;