修改拖拽实现

src/App.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import Toolbar from './components/Toolbar.vue';
 import ProjectExplorer from './components/ProjectExplorer.vue';
-import { computed, ref, onMounted, onUnmounted } from "vue";
+import ComponentsPanel from './components/flow/ComponentsPanel.vue';
+import { computed, ref, onMounted, onUnmounted, onBeforeUpdate, reactive, provide, inject } from "vue";
 import { useFilesStore } from "@/ts/files";
 import Vue3DraggableResizable from 'vue3-draggable-resizable';
 import { TabPaneName, TabsPaneContext } from "element-plus";
@@ -10,6 +11,7 @@ import ShikigamiSelect from './components/flow/nodes/yys/ShikigamiSelect.vue';
 import YuhunSelect from './components/flow/nodes/yys/YuhunSelect.vue';
 import PropertySelect from './components/flow/nodes/yys/PropertySelect.vue';
 import { useVueFlow } from '@vue-flow/core';
+import DialogManager from './components/DialogManager.vue';
 
 const filesStore = useFilesStore();
 const { updateNode } = useVueFlow();
@@ -20,49 +22,8 @@ const toolbarHeight = 48; // 工具栏的高度
 const windowHeight = ref(window.innerHeight);
 const contentHeight = computed(() => `${windowHeight.value - toolbarHeight}px`);
 
-// Dialogs and Selected Node Management
-const showShikigamiDialog = ref(false);
-const showYuhunDialog = ref(false);
-const showPropertyDialog = ref(false);
-
-const currentShikigami = ref({ name: '未选择式神', avatar: '', rarity: '' });
-const currentYuhun = ref({ name: '未选择御魂', avatar: '', type: '' });
-const currentProperty = ref({ type: '未选择属性', priority: 'optional', description: '' });
-
-const selectedNode = ref(null);
 const flowEditorRef = ref(null);
-
+const flowEditorRefs = ref({});
-const openDialogForType = (type: string, node: any) => {
-  selectedNode.value = node;
-  switch (type) {
-    case 'shikigami': showShikigamiDialog.value = true; break;
-    case 'yuhun': showYuhunDialog.value = true; break;
-    case 'property': showPropertyDialog.value = true; break;
-  }
-};
-
-// Handle Dialogs Close
-const closeDialogForType = (type: string) => {
-  switch (type) {
-    case 'shikigami': showShikigamiDialog.value = false; break;
-    case 'yuhun': showYuhunDialog.value = false; break;
-    case 'property': showPropertyDialog.value = false; break;
-  }
-};
-
-// 更新式神信息
-const updateNodeData = (type: string, data: any) => {
-  if (selectedNode.value) {
-    updateNode(selectedNode.value.id, {
-      data: {
-        ...selectedNode.value.data,
-        [type]: data
-      }
-    });
-    console.log(`${type.charAt(0).toUpperCase() + type.slice(1)}信息已更新:`, data.name || data.type);
-    closeDialogForType(type);
-  }
-};
 
 const handleTabsEdit = (
     targetName: String | undefined,
@@ -110,6 +71,21 @@ const activeFileGroups = computed(() => {
   const activeFile = filesStore.fileList.find(file => file.name === filesStore.activeFile);
   return activeFile ? activeFile.groups : [];
 });
+
+onBeforeUpdate(() => {
+  flowEditorRefs.value = {};
+});
+
+const handleAddNode = (nodeData) => {
+  const activeEditor = flowEditorRefs.value[filesStore.activeFile];
+  if (activeEditor) {
+    const { x, y, zoom } = activeEditor.getViewport();
+    const position = { x: -x / zoom + 150, y: -y / zoom + 150 };
+    activeEditor.handleAddNode({ ...nodeData, position });
+  }
+};
+
+
 </script>
 
 <template>
@@ -119,7 +95,7 @@ const activeFileGroups = computed(() => {
     <!-- 侧边栏和工作区 -->
     <div class="main-content">
       <!-- 侧边栏 -->
-      <ProjectExplorer />
+      <ComponentsPanel @add-node="handleAddNode" />
       <!-- 工作区 -->
       <div class="workspace">
         <el-tabs
@@ -138,11 +114,9 @@ const activeFileGroups = computed(() => {
             <div id="main-container" :style="{ height: contentHeight, overflow: 'auto' }">
               <!-- 流程图编辑器 -->
               <FlowEditor
-                  ref="flowEditorRef"
+                  :ref="(el) => { if (el) flowEditorRefs[file.name] = el }"
                   :height="contentHeight"
-                  @open-shikigami-select="node => openDialogForType('shikigami', node)"
+
-                  @open-yuhun-select="node => openDialogForType('yuhun', node)"
-                  @open-property-select="node => openDialogForType('property', node)"
               />
             </div>
           </el-tab-pane>
@@ -150,29 +124,7 @@ const activeFileGroups = computed(() => {
       </div>
     </div>
 
-    <!-- 全局式神选择对话框 -->
+    <DialogManager />
-    <ShikigamiSelect
-        :showSelectShikigami="showShikigamiDialog"
-        :currentShikigami="currentShikigami"
-        @closeSelectShikigami="closeDialogForType('shikigami')"
-        @updateShikigami="data => updateNodeData('shikigami', data)"
-    />
-
-    <!-- 全局御魂选择对话框 -->
-    <YuhunSelect
-        :showSelectYuhun="showYuhunDialog"
-        :currentYuhun="currentYuhun"
-        @closeSelectYuhun="closeDialogForType('yuhun')"
-        @updateYuhun="data => updateNodeData('yuhun', data)"
-    />
-
-    <!-- 全局属性选择对话框 -->
-    <PropertySelect
-        :showPropertySelect="showPropertyDialog"
-        :currentProperty="currentProperty"
-        @closePropertySelect="closeDialogForType('property')"
-        @updateProperty="data => updateNodeData('property', data)"
-    />
   </div>
 </template>
 
@@ -197,7 +149,7 @@ const activeFileGroups = computed(() => {
 }
 
 .sidebar {
-  width: 20%; /* 侧边栏宽度 */
+  width: 230px; /* 侧边栏宽度 */
   background-color: #f0f0f0; /* 背景色 */
   flex-shrink: 0; /* 防止侧边栏被压缩 */
   overflow-y: auto; /* 允许侧边栏内容滚动 */

src/components/flow/ComponentsPanel.vue

@@ -1,127 +1,156 @@
 <script setup lang="ts">
 import { ref } from 'vue';
-import ShikigamiSelect from './nodes/yys/ShikigamiSelect.vue';
+import useDragAndDrop from '@/ts/useDnD';
 
-// 定义组件分组
+const { onDragStart } = useDragAndDrop();
-const baseComponents = [
+
+// 使用嵌套结构定义组件分组
+const componentGroups = [
+  {
+    id: 'basic',
+    title: '基础组件',
+    components: [
       {
         id: 'rect',
         name: '长方形',
         type: 'rect',
-    description: '基础长方形节点'
+        description: '基础长方形节点',
+        data: {
+          width: 150,
+          height: 150,
+          style: { background: '#fff', border: '2px solid black' }
+        }
       },
       {
         id: 'ellipse',
         name: '圆形',
         type: 'ellipse',
-    description: '基础圆形节点'
+        description: '基础圆形节点',
+        data: {
+          width: 150,
+          height: 150,
+          style: { background: '#fff', border: '2px solid black', borderRadius: '50%' }
+        }
       },
       {
         id: 'image',
         name: '图片',
         type: 'imageNode',
-    description: '可上传图片的节点'
+        description: '可上传图片的节点',
+        data: {
+          url: '',
+          width: 180,
+          height: 120
+        }
       },
       {
         id: 'text',
         name: '文字编辑框',
         type: 'textNode',
-    description: '可编辑富文本的节点'
+        description: '可编辑富文本的节点',
+        data: {
+          html: '<div>双击右侧可编辑文字</div>',
+          width: 200,
+          height: 120
         }
-  // 可继续添加其他基础图形
+      }
-];
+    ]
-
+  },
-const yysComponents = [
+  {
+    id: 'yys',
+    title: '阴阳师',
+    components: [
       {
         id: 'shikigami-select',
         name: '式神选择器',
         type: 'shikigamiSelect',
-    description: '用于选择式神的组件'
+        description: '用于选择式神的组件',
+        data: {
+          shikigami: { name: '未选择式神', avatar: '', rarity: '' }
+        }
       },
       {
         id: 'yuhun-select',
         name: '御魂选择器',
         type: 'yuhunSelect',
-    description: '用于选择御魂的组件'
+        description: '用于选择御魂的组件',
+        data: {
+          yuhun: { name: '未选择御魂', avatar: '', type: '' }
+        }
       },
       {
         id: 'property-select',
         name: '属性选择器',
         type: 'propertySelect',
-    description: '用于设置属性要求的组件'
+        description: '用于设置属性要求的组件',
+        data: {
+          property: {
+            type: '未选择',
+            priority: 'optional',
+            description: '',
+            value: 0,
+            valueType: '',
+            levelRequired: "40",
+            skillRequiredMode: "all",
+            skillRequired: ["5", "5", "5"],
+            yuhun: {
+              yuhunSetEffect: [],
+              target: "1",
+              property2: ["Attack"],
+              property4: ["Attack"],
+              property6: ["Crit", "CritDamage"],
+            },
+            expectedDamage: 0,
+            survivalRate: 50,
+            damageType: "balanced"
           }
+        }
+      }
+    ]
+  }
+  // 可以轻松添加新的游戏组件组
+  // {
+  //   id: 'other-game',
+  //   title: '其他游戏',
+  //   components: []
+  // }
 ];
 
-const emit = defineEmits(['add-node']);
+// 处理组件点击 - 直接使用 onDragStart 的数据格式
-
-// 处理拖拽开始
-const handleDragStart = (event, component) => {
-  // 设置拖拽数据
-  event.dataTransfer.setData('application/json', JSON.stringify({
-    id: `${component.type}-${Date.now()}`,
-    type: component.type,
-    label: component.name,
-    data: { componentType: component.type }
-  }));
-  
-  // 设置拖拽效果
-  event.dataTransfer.effectAllowed = 'copy';
-};
-
-// 处理组件点击
 const handleComponentClick = (component) => {
-  // 生成唯一ID
+  const nodeData = {
-  const nodeId = `${component.type}-${Date.now()}`;
-  
-  // 创建新节点
-  const newNode = {
-    id: nodeId,
     type: component.type,
     label: component.name,
-    position: { x: 100, y: 100 }, // 默认位置
+    position: { x: 100, y: 100 },
-    data: { componentType: component.type },
+    data: component.data
-    style: { background: '#fff', border: '2px solid black',width: '150px', height: '150px' },
   };
   
-  // 发出添加节点事件
+  onDragStart({ dataTransfer: { setData: () => {} } } as DragEvent, nodeData);
-  emit('add-node', newNode);
 };
 </script>
 
 <template>
   <div class="components-panel">
     <h3>组件库</h3>
-    <div class="components-group">
+    <!-- 使用两层遍历生成界面元素 -->
-      <div class="group-title">基础组件</div>
-      <div class="components-list">
     <div 
-          v-for="component in baseComponents" 
+      v-for="group in componentGroups" 
-          :key="component.id" 
+      :key="group.id"
-          class="component-item"
+      class="components-group"
-          @click="handleComponentClick(component)"
-          draggable="true"
-          @dragstart="handleDragStart($event, component)"
     >
-          <div class="component-icon">
+      <div class="group-title">{{ group.title }}</div>
-            <i class="el-icon-plus"></i>
-          </div>
-          <div class="component-info">
-            <div class="component-name">{{ component.name }}</div>
-            <div class="component-desc">{{ component.description }}</div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="components-group">
-      <div class="group-title">阴阳师</div>
       <div class="components-list">
         <div 
-          v-for="component in yysComponents" 
+          v-for="component in group.components" 
           :key="component.id" 
           class="component-item"
           @click="handleComponentClick(component)"
           draggable="true"
-          @dragstart="handleDragStart($event, component)"
+          @dragstart="(e) => onDragStart(e, {
+            type: component.type,
+            label: component.name,
+            data: component.data
+          })"
         >
           <div class="component-icon">
             <i class="el-icon-plus"></i>
@@ -142,6 +171,9 @@ const handleComponentClick = (component) => {
   background-color: #f5f7fa;
   border-bottom: 1px solid #e4e7ed;
   margin-bottom: 10px;
+  width: 200px;
+  display: flex;
+  flex-direction: column;
 }
 
 .components-list {
@@ -194,6 +226,7 @@ const handleComponentClick = (component) => {
 .components-group {
   margin-bottom: 18px;
 }
+
 .group-title {
   font-weight: bold;
   font-size: 15px;

src/components/flow/FlowEditor.vue

@@ -6,13 +6,13 @@ import { Controls } from '@vue-flow/controls';
 import '@vue-flow/core/dist/style.css';
 import '@vue-flow/core/dist/theme-default.css';
 import '@vue-flow/controls/dist/style.css';
-import ComponentsPanel from './ComponentsPanel.vue';
 import PropertyPanel from './PropertyPanel.vue';
 import ShikigamiSelectNode from './nodes/yys/ShikigamiSelectNode.vue';
 import YuhunSelectNode from './nodes/yys/YuhunSelectNode.vue';
 import PropertySelectNode from './nodes/yys/PropertySelectNode.vue';
 import ImageNode from './nodes/common/ImageNode.vue';
 import TextNode from './nodes/common/TextNode.vue';
+import useDragAndDrop from '@/ts/useDnD';
 
 const props = defineProps({
   height: {
@@ -21,8 +21,6 @@ const props = defineProps({
   }
 });
 
-const emit = defineEmits(['open-shikigami-select', 'open-yuhun-select', 'open-property-select']);
-
 // 设置节点类型
 const nodeTypes = shallowRef({
   shikigamiSelect: markRaw(ShikigamiSelectNode),
@@ -47,6 +45,9 @@ const { nodes, edges, onNodesChange, onEdgesChange, onConnect, addNodes, setTran
   nodeTypes
 });
 
+// 使用拖拽功能
+const { onDragOver, onDrop } = useDragAndDrop();
+
 // 右键菜单相关
 const contextMenu = ref({
   show: false,
@@ -55,138 +56,6 @@ const contextMenu = ref({
   nodeId: null
 });
 
-// 处理拖拽放置
-const handleDrop = (event) => {
-  event.preventDefault();
-
-  try {
-    // 获取拖拽数据
-    const nodeData = JSON.parse(event.dataTransfer.getData('application/json'));
-
-    // 获取画布元素
-    const flowContainer = event.currentTarget;
-    const bounds = flowContainer.getBoundingClientRect();
-
-    // 获取画布的缩放和偏移信息
-    const { x: viewportX, y: viewportY, zoom } = getViewport();
-
-    // 计算相对于画布的位置，并考虑缩放和偏移
-    const position = {
-      x: (event.clientX - bounds.left - viewportX) / zoom,
-      y: (event.clientY - bounds.top - viewportY) / zoom
-    };
-
-    // 创建新节点
-    const newNode = {
-      ...nodeData,
-      position,
-      selected: true // 设置节点为选中状态
-    };
-
-    // 添加节点
-    handleAddNode(newNode);
-  } catch (error) {
-    console.error('拖拽放置处理失败:', error);
-  }
-};
-
-// 处理拖拽悬停
-const handleDragOver = (event) => {
-  event.preventDefault();
-  event.dataTransfer.dropEffect = 'copy';
-};
-
-// 处理添加节点
-const handleAddNode = (newNode) => {
-  // 取消所有现有节点的选中状态
-  nodes.value.forEach(node => {
-    if (node.selected) {
-      updateNode(node.id, { selected: false });
-    }
-  });
-
-  // 根据节点类型设置初始数据
-  let initialData = {};
-  switch (newNode.type) {
-    case 'shikigamiSelect':
-      initialData = {
-        shikigami: { name: '未选择式神', avatar: '', rarity: '' }
-      };
-      break;
-    case 'yuhunSelect':
-      initialData = {
-        yuhun: { name: '未选择御魂', avatar: '', type: '' }
-      };
-      break;
-    case 'propertySelect':
-      initialData = {
-        property: {
-          type: '未选择',
-          priority: 'optional',
-          description: '',
-          value: 0,
-          valueType: '',
-          levelRequired: "40",
-          skillRequiredMode: "all",
-          skillRequired: ["5", "5", "5"],
-          yuhun: {
-            yuhunSetEffect: [],
-            target: "1",
-            property2: ["Attack"],
-            property4: ["Attack"],
-            property6: ["Crit", "CritDamage"],
-          },
-          expectedDamage: 0,
-          survivalRate: 50,
-          damageType: "balanced"
-        }
-      };
-      break;
-    case 'imageNode':
-      initialData = {
-        url: '',
-        width: 180,
-        height: 120
-      };
-      break;
-    case 'textNode':
-      initialData = {
-        html: '<div>双击右侧可编辑文字</div>',
-        width: 200,
-        height: 120
-      };
-      break;
-  }
-
-  // 添加新节点，并设置为选中状态
-  addNodes([{
-    ...newNode,
-    selected: true,
-    data: {
-      ...newNode.data,
-      ...initialData
-    }
-  }]);
-
-  // 重新设置视图，使新节点可见
-  setTransform({ x: 0, y: 0, zoom: 1 });
-};
-
-// 处理从属性面板打开式神选择
-const handleOpenShikigamiSelect = (node) => {
-  emit('open-shikigami-select', node);
-};
-
-// 处理从属性面板打开御魂选择
-const handleOpenYuhunSelect = (node) => {
-  emit('open-yuhun-select', node);
-};
-
-// 处理从属性面板打开属性选择
-const handleOpenPropertySelect = (node) => {
-  emit('open-property-select', node);
-};
-
 // 处理节点右键点击
 const handleNodeContextMenu = (event) => {
   const { event: mouseEvent, node } = event;
@@ -256,26 +125,24 @@ const handleLayerOrder = (action) => {
   contextMenu.value.show = false;
 };
 
+defineExpose({
+  handleAddNode: addNodes,
+  getViewport
+});
+
 onMounted(() => {
   console.log('FlowEditor 组件已挂载');
-  // 添加全局点击事件监听
-  document.addEventListener('click', handleClickOutside);
 });
 
 onUnmounted(() => {
   // 移除事件监听
-  document.removeEventListener('click', handleClickOutside);
+  // document.removeEventListener('click', handleClickOutside);
 });
 </script>
 
 <template>
   <div class="flow-editor" :style="{ height }">
     <div class="editor-layout">
-      <!-- 左侧组件面板 -->
-      <div class="components-sidebar">
-        <ComponentsPanel @add-node="handleAddNode" />
-      </div>
-
       <!-- 中间流程图区域 -->
       <div class="flow-container">
         <VueFlow
@@ -285,8 +152,8 @@ onUnmounted(() => {
             @edges-change="onEdgesChange"
             @connect="onConnect"
             fit-view-on-init
-            @drop="handleDrop"
+            @drop="onDrop"
-            @dragover="handleDragOver"
+            @dragover="onDragOver"
             @node-context-menu="handleNodeContextMenu"
             @pane-context-menu="handlePaneContextMenu"
         >
@@ -314,9 +181,6 @@ onUnmounted(() => {
       <!-- 右侧属性面板 -->
       <PropertyPanel
           :height="height"
-          @open-shikigami-select="handleOpenShikigamiSelect"
-          @open-yuhun-select="handleOpenYuhunSelect"
-          @open-property-select="handleOpenPropertySelect"
       />
     </div>
   </div>
@@ -334,39 +198,12 @@ onUnmounted(() => {
   height: 100%;
 }
 
-.components-sidebar {
-  width: 230px;
-  background-color: #f5f7fa;
-  border-right: 1px solid #e4e7ed;
-  overflow-y: auto;
-}
-
 .flow-container {
   flex: 1;
   position: relative;
   overflow: hidden;
 }
 
-:deep(.vue-flow__node) {
-  padding: 10px;
-  border-radius: 5px;
-  background-color: white;
-  border: 1px solid #1a192b;
-  color: #333;
-  text-align: center;
-}
-
-:deep(.vue-flow__node-input) {
-  background-color: #f6fafd;
-  border: 1px solid #66B1FF;
-}
-
-:deep(.flow-panel) {
-  background-color: white;
-  padding: 10px;
-  border-radius: 5px;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
-}
 
 .context-menu {
   position: fixed;

src/ts/useDnD.ts

@@ -0,0 +1,100 @@
+import { useVueFlow } from '@vue-flow/core'
+import { ref, watch } from 'vue'
+
+let id = 0
+
+function getId() {
+  return `dndnode_${id++}`
+}
+
+const state = {
+  draggedType: ref<string | null>(null),
+  isDragOver: ref(false),
+  isDragging: ref(false),
+}
+
+export default function useDragAndDrop() {
+  const { draggedType, isDragOver, isDragging } = state
+  const { addNodes, screenToFlowCoordinate, onNodesInitialized, updateNode } = useVueFlow()
+
+  watch(isDragging, (dragging) => {
+    document.body.style.userSelect = dragging ? 'none' : ''
+  })
+
+  function onDragStart(event: DragEvent, nodeData: any) {
+    if (event.dataTransfer) {
+      event.dataTransfer.setData('application/json', JSON.stringify(nodeData))
+      event.dataTransfer.effectAllowed = 'move'
+    }
+
+    draggedType.value = nodeData.type
+    isDragging.value = true
+
+    document.addEventListener('drop', onDragEnd)
+  }
+
+  function onDragOver(event: DragEvent) {
+    event.preventDefault()
+
+    if (draggedType.value) {
+      isDragOver.value = true
+
+      if (event.dataTransfer) {
+        event.dataTransfer.dropEffect = 'move'
+      }
+    }
+  }
+
+  function onDragLeave() {
+    isDragOver.value = false
+  }
+
+  function onDragEnd() {
+    isDragging.value = false
+    isDragOver.value = false
+    draggedType.value = null
+    document.removeEventListener('drop', onDragEnd)
+  }
+
+  function onDrop(event: DragEvent) {
+    const position = screenToFlowCoordinate({
+      x: event.clientX,
+      y: event.clientY,
+    })
+
+    try {
+      const nodeData = JSON.parse(event.dataTransfer?.getData('application/json') || '{}')
+      const nodeId = getId()
+
+      const newNode = {
+        id: nodeId,
+        ...nodeData,
+        position,
+      }
+
+      const { off } = onNodesInitialized(() => {
+        updateNode(nodeId, (node) => ({
+          position: { 
+            x: node.position.x - node.dimensions.width / 2, 
+            y: node.position.y - node.dimensions.height / 2 
+          },
+        }))
+        off()
+      })
+
+      addNodes(newNode)
+    } catch (error) {
+      console.error('拖拽放置处理失败:', error)
+    }
+  }
+
+  return {
+    draggedType,
+    isDragOver,
+    isDragging,
+    onDragStart,
+    onDragLeave,
+    onDragOver,
+    onDrop,
+  }
+}