From 5ede3901321f367870459cd7815b9a0522fc0b60 Mon Sep 17 00:00:00 2001
From: rookie4show <rookie4show@gmail.com>
Date: Thu, 17 Jul 2025 16:37:29 +0800
Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E6=96=B0=E5=AE=9E=E7=8E=B0=E6=8B=96?=
 =?UTF-8?q?=E5=8A=A8=E5=8A=9F=E8=83=BD=EF=BC=8C=E5=85=B6=E4=BB=96=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E9=80=82=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/flow/ComponentsPanel.vue       |  48 ++++-----
 src/components/flow/FlowEditor.vue            |  26 ++---
 src/components/flow/PropertyPanel.vue         | 102 ++++++++----------
 .../flow/nodes/yys/ShikigamiSelectNode.vue    |   1 +
 .../flow/nodes/yys/YuhunSelectNode.vue        |   1 +
 src/ts/useLogicFlow.ts                        |  16 +++
 6 files changed, 100 insertions(+), 94 deletions(-)
 create mode 100644 src/ts/useLogicFlow.ts

diff --git a/src/components/flow/ComponentsPanel.vue b/src/components/flow/ComponentsPanel.vue
index 99d23be..3268cc3 100644
--- a/src/components/flow/ComponentsPanel.vue
+++ b/src/components/flow/ComponentsPanel.vue
@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue';
-import useDragAndDrop from '@/ts/useDnD';
-
-const { onDragStart } = useDragAndDrop();
+import { getLogicFlowInstance } from '@/ts/useLogicFlow';
 
 // 使用嵌套结构定义组件分组
 const componentGroups = [
@@ -107,25 +105,28 @@ const componentGroups = [
         }
       }
     ]
-  }
+  },
   // 可以轻松添加新的游戏组件组
-  // {
-  //   id: 'other-game',
-  //   title: '其他游戏',
-  //   components: []
-  // }
+  {
+    id: 'other-game',
+    title: '其他游戏',
+    components: []
+  }
 ];
 
-// 处理组件点击 - 直接使用 onDragStart 的数据格式
+// 处理组件点击 - 可选：可直接创建节点
 const handleComponentClick = (component) => {
-  const nodeData = {
+  // 可选：实现点击直接添加节点到画布
+};
+
+const handleMouseDown = (e, component) => {
+  e.preventDefault(); // 阻止文字选中
+  const lf = getLogicFlowInstance();
+  if (!lf) return;
+  lf.dnd.startDrag({
     type: component.type,
-    label: component.name,
-    position: { x: 100, y: 100 },
-    data: component.data
-  };
-  
-  onDragStart({ dataTransfer: { setData: () => {} } } as DragEvent, nodeData);
+    properties: component.data
+  });
 };
 </script>
 
@@ -140,17 +141,12 @@ const handleComponentClick = (component) => {
     >
       <div class="group-title">{{ group.title }}</div>
       <div class="components-list">
-        <div 
-          v-for="component in group.components" 
-          :key="component.id" 
+        <div
+          v-for="component in group.components"
+          :key="component.id"
           class="component-item"
           @click="handleComponentClick(component)"
-          draggable="true"
-          @dragstart="(e) => onDragStart(e, {
-            type: component.type,
-            label: component.name,
-            data: component.data
-          })"
+          @mousedown="(e) => handleMouseDown(e, component)"
         >
           <div class="component-icon">
             <i class="el-icon-plus"></i>
diff --git a/src/components/flow/FlowEditor.vue b/src/components/flow/FlowEditor.vue
index 68672d9..705f4f9 100644
--- a/src/components/flow/FlowEditor.vue
+++ b/src/components/flow/FlowEditor.vue
@@ -32,7 +32,8 @@ import PropertySelectNode from './nodes/yys/PropertySelectNode.vue';
 // import ImageNode from './nodes/common/ImageNode.vue';
 // import TextNode from './nodes/common/TextNode.vue';
 import PropertyPanel from './PropertyPanel.vue';
-import {useFilesStore} from "@/ts/useStore";
+import { useFilesStore } from "@/ts/useStore";
+import { setLogicFlowInstance, destroyLogicFlowInstance } from '@/ts/useLogicFlow';
 
 const props = defineProps<{
   nodes: any[];
@@ -74,7 +75,7 @@ onMounted(() => {
   });
   registerNodes(lf.value);
   renderFlow();
-  filesStore.setLogicFlowInstance(lf.value);
+  setLogicFlowInstance(lf.value);
 
   // 监听节点点击事件，更新 selectedNode
   lf.value.on(EventType.NODE_CLICK, ({ data }) => {
@@ -88,18 +89,16 @@ onMounted(() => {
 
   // 节点属性改变，如果当前节点是选中节点，则同步更新 selectedNode
   lf.value.on(EventType.NODE_PROPERTIES_CHANGE, (data) => {
-  const nodeId = data.id || (data.value && data.value.id);
-  if (selectedNode.value && nodeId === selectedNode.value.id) {
-    if (data.value) {
-      selectedNode.value = data.value;
-    } else if (data.properties) {
-      selectedNode.value = {
-        ...selectedNode.value,
-        properties: data.properties
-      };
+    const nodeId = data.id;
+    if (selectedNode.value && nodeId === selectedNode.value.id) {
+      if (data.properties) {
+        selectedNode.value = {
+          ...selectedNode.value,
+          properties: data.properties
+        };
+      }
     }
-  }
-});
+  });
 
   // 右键事件
   lf.value.on('node:contextmenu', handleNodeContextMenu);
@@ -110,6 +109,7 @@ onMounted(() => {
 onBeforeUnmount(() => {
   lf.value?.destroy();
   lf.value = null;
+  destroyLogicFlowInstance();
 });
 
 // 响应式更新 nodes/edges
diff --git a/src/components/flow/PropertyPanel.vue b/src/components/flow/PropertyPanel.vue
index bae29ef..18e1451 100644
--- a/src/components/flow/PropertyPanel.vue
+++ b/src/components/flow/PropertyPanel.vue
@@ -1,38 +1,31 @@
 <script setup lang="ts">
-import { ref, computed, watch } from 'vue';
-import { useVueFlow } from '@vue-flow/core';
+import { computed } from 'vue';
+import type LogicFlow from '@logicflow/core';
+// import { useVueFlow } from '@vue-flow/core';
 import { QuillEditor } from '@vueup/vue-quill';
 import '@vueup/vue-quill/dist/vue-quill.snow.css';
 import { useDialogs } from '../../ts/useDialogs';
+import { useFilesStore } from '@/ts/useStore';
+import { getLogicFlowInstance } from '@/ts/useLogicFlow';
 
 const props = defineProps({
   height: {
     type: String,
     default: '100%'
+  },
+  node: {
+    type: Object,
+    default: null
   }
 });
 
-// 使用VueFlow的store获取当前选中的节点
-const { findNode, getNodes, updateNode } = useVueFlow();
+const filesStore = useFilesStore();
 const { openDialog } = useDialogs();
 
-// getNodes是一个ref对象，而不是函数
-const nodes = getNodes;
+const selectedNode = computed(() => props.node);
 
-// 当前选中的节点
-const selectedNode = ref(null);
-
-// 监听节点变化
-watch(nodes, (newNodes) => {
-  // 查找选中的节点
-  const selected = newNodes.find(node => node.selected);
-  selectedNode.value = selected || null;
-}, { deep: true });
-
-// 计算属性：节点是否选中
 const hasNodeSelected = computed(() => !!selectedNode.value);
 
-// 计算属性：节点类型
 const nodeType = computed(() => {
   if (!selectedNode.value) return '';
   return selectedNode.value.type || 'default';
@@ -40,16 +33,21 @@ const nodeType = computed(() => {
 
 // 通用的弹窗处理方法
 const handleOpenDialog = (type: 'shikigami' | 'yuhun' | 'property') => {
-  if (selectedNode.value) {
+  const lf = getLogicFlowInstance();
+  if (selectedNode.value && lf) {
     const node = selectedNode.value;
-    const currentData = node.data && node.data[type] ? node.data[type] : undefined;
+    // 取 properties 下的 type 字段
+    const currentData = node.properties && node.properties[type] ? node.properties[type] : undefined;
 
     openDialog(
       type,
       currentData,
       node,
-      (updatedData, nodeToUpdate) => {
-        updateNode(nodeToUpdate.id, { data: { ...nodeToUpdate.data, [type]: updatedData } });
+      (updatedData) => {
+        lf.setProperties(node.id, {
+          ...node.properties,
+          [type]: updatedData
+        });
       }
     );
   }
@@ -60,18 +58,11 @@ const handleImageUpload = (e) => {
   if (!file) return;
   const reader = new FileReader();
   reader.onload = (evt) => {
-    updateNodeData('url', evt.target.result);
+    // updateNodeData('url', evt.target.result);
   };
   reader.readAsDataURL(file);
 };
 
-const updateNodeData = (key, value) => {
-  if (!selectedNode.value) return;
-  const node = findNode(selectedNode.value.id);
-  if (node) {
-    node.data = { ...node.data, [key]: value };
-  }
-};
 
 const quillToolbar = [
   [{ header: 1 }, { header: 2 }],
@@ -88,11 +79,11 @@ const quillToolbar = [
     <div class="panel-header">
       <h3>属性编辑</h3>
     </div>
-    
+
     <div v-if="!hasNodeSelected" class="no-selection">
       <p>请选择一个节点以编辑其属性</p>
     </div>
-    
+
     <div v-else class="property-content">
       <div class="property-section">
         <div class="section-header">基本信息</div>
@@ -105,42 +96,43 @@ const quillToolbar = [
           <div class="property-value">{{ nodeType }}</div>
         </div>
       </div>
-      
+
       <!-- 式神选择节点的特定属性 -->
       <div v-if="nodeType === 'shikigamiSelect'" class="property-section">
         <div class="section-header">式神属性</div>
         <div class="property-item">
-          <el-button 
-            type="primary" 
-            @click="handleOpenDialog('shikigami')" 
+          <span>当前选择式神：{{ selectedNode.properties?.shikigami?.name || '未选择' }}</span>
+          <el-button
+            type="primary"
+            @click="handleOpenDialog('shikigami')"
             style="width: 100%"
           >
             选择式神
           </el-button>
         </div>
       </div>
-      
+
       <!-- 御魂选择节点的特定属性 -->
       <div v-if="nodeType === 'yuhunSelect'" class="property-section">
         <div class="section-header">御魂属性</div>
         <div class="property-item">
-          <el-button 
-            type="primary" 
-            @click="handleOpenDialog('yuhun')" 
+          <el-button
+            type="primary"
+            @click="handleOpenDialog('yuhun')"
             style="width: 100%"
           >
             选择御魂
           </el-button>
         </div>
       </div>
-      
+
       <!-- 属性选择节点的特定属性 -->
       <div v-if="nodeType === 'propertySelect'" class="property-section">
         <div class="section-header">属性设置</div>
         <div class="property-item">
-          <el-button 
-            type="primary" 
-            @click="handleOpenDialog('property')" 
+          <el-button
+            type="primary"
+            @click="handleOpenDialog('property')"
             style="width: 100%"
           >
             设置属性
@@ -153,8 +145,8 @@ const quillToolbar = [
         <div class="section-header">图片设置</div>
         <div class="property-item">
           <input type="file" accept="image/*" @change="handleImageUpload" />
-          <div v-if="selectedNode.data && selectedNode.data.url" style="margin-top:8px;">
-            <img :src="selectedNode.data.url" alt="预览" style="max-width:100%;max-height:100px;" />
+          <div v-if="selectedNode.value.properties && selectedNode.value.properties.url" style="margin-top:8px;">
+            <img :src="selectedNode.value.properties.url" alt="预览" style="max-width:100%;max-height:100px;" />
           </div>
         </div>
       </div>
@@ -163,14 +155,14 @@ const quillToolbar = [
       <div v-if="nodeType === 'textNode'" class="property-section">
         <div class="section-header">文本编辑</div>
         <div class="property-item">
-          <QuillEditor
-            v-model:content="selectedNode.data.html"
-            contentType="html"
-            :toolbar="quillToolbar"
-            theme="snow"
-            style="height:120px;"
-            @update:content="val => updateNodeData('html', val)"
-          />
+<!--          <QuillEditor-->
+<!--            v-model:content="selectedNode.value.properties.html"-->
+<!--            contentType="html"-->
+<!--            :toolbar="quillToolbar"-->
+<!--            theme="snow"-->
+<!--            style="height:120px;"-->
+<!--            @update:content="val => updateNodeData('html', val)"-->
+<!--          />-->
         </div>
       </div>
     </div>
@@ -248,4 +240,4 @@ const quillToolbar = [
   font-size: 14px;
   word-break: break-all;
 }
-</style> 
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/src/components/flow/nodes/yys/ShikigamiSelectNode.vue b/src/components/flow/nodes/yys/ShikigamiSelectNode.vue
index 8bbf590..c11cb81 100644
--- a/src/components/flow/nodes/yys/ShikigamiSelectNode.vue
+++ b/src/components/flow/nodes/yys/ShikigamiSelectNode.vue
@@ -41,6 +41,7 @@ onMounted(() => {
       :src="currentShikigami.avatar"
       :alt="currentShikigami.name"
       class="shikigami-image"
+      draggable="false"
     />
     <div v-else class="placeholder-text">点击选择式神</div>
     <div class="name-text">{{ currentShikigami.name }}</div>
diff --git a/src/components/flow/nodes/yys/YuhunSelectNode.vue b/src/components/flow/nodes/yys/YuhunSelectNode.vue
index 5f595fc..c07d488 100644
--- a/src/components/flow/nodes/yys/YuhunSelectNode.vue
+++ b/src/components/flow/nodes/yys/YuhunSelectNode.vue
@@ -32,6 +32,7 @@ onMounted(() => {
       :src="currentYuhun.avatar"
       :alt="currentYuhun.name"
       class="yuhun-image"
+      draggable="false"
     />
     <div v-else class="placeholder-text">点击选择御魂</div>
     <div class="name-text">{{ currentYuhun.name }}</div>
diff --git a/src/ts/useLogicFlow.ts b/src/ts/useLogicFlow.ts
new file mode 100644
index 0000000..01fe6c1
--- /dev/null
+++ b/src/ts/useLogicFlow.ts
@@ -0,0 +1,16 @@
+import type LogicFlow from '@logicflow/core';
+
+let logicFlowInstance: LogicFlow | null = null;
+
+export function setLogicFlowInstance(lf: LogicFlow) {
+  logicFlowInstance = lf;
+}
+
+export function getLogicFlowInstance(): LogicFlow | null {
+  return logicFlowInstance;
+}
+
+export function destroyLogicFlowInstance() {
+  logicFlowInstance?.destroy();
+  logicFlowInstance = null;
+} 
\ No newline at end of file