修改拖拽实现

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 baseComponents = [
+const { onDragStart } = useDragAndDrop();
+
+// 使用嵌套结构定义组件分组
+const componentGroups = [
   {
-    id: 'rect',
-    name: '长方形',
-    type: 'rect',
-    description: '基础长方形节点'
+    id: 'basic',
+    title: '基础组件',
+    components: [
+      {
+        id: 'rect',
+        name: '长方形',
+        type: 'rect',
+        description: '基础长方形节点',
+        data: {
+          width: 150,
+          height: 150,
+          style: { background: '#fff', border: '2px solid black' }
+        }
+      },
+      {
+        id: 'ellipse',
+        name: '圆形',
+        type: 'ellipse',
+        description: '基础圆形节点',
+        data: {
+          width: 150,
+          height: 150,
+          style: { background: '#fff', border: '2px solid black', borderRadius: '50%' }
+        }
+      },
+      {
+        id: 'image',
+        name: '图片',
+        type: 'imageNode',
+        description: '可上传图片的节点',
+        data: {
+          url: '',
+          width: 180,
+          height: 120
+        }
+      },
+      {
+        id: 'text',
+        name: '文字编辑框',
+        type: 'textNode',
+        description: '可编辑富文本的节点',
+        data: {
+          html: '<div>双击右侧可编辑文字</div>',
+          width: 200,
+          height: 120
+        }
+      }
+    ]
   },
   {
-    id: 'ellipse',
-    name: '圆形',
-    type: 'ellipse',
-    description: '基础圆形节点'
-  },
-  {
-    id: 'image',
-    name: '图片',
-    type: 'imageNode',
-    description: '可上传图片的节点'
-  },
-  {
-    id: 'text',
-    name: '文字编辑框',
-    type: 'textNode',
-    description: '可编辑富文本的节点'
+    id: 'yys',
+    title: '阴阳师',
+    components: [
+      {
+        id: 'shikigami-select',
+        name: '式神选择器',
+        type: 'shikigamiSelect',
+        description: '用于选择式神的组件',
+        data: {
+          shikigami: { name: '未选择式神', avatar: '', rarity: '' }
+        }
+      },
+      {
+        id: 'yuhun-select',
+        name: '御魂选择器',
+        type: 'yuhunSelect',
+        description: '用于选择御魂的组件',
+        data: {
+          yuhun: { name: '未选择御魂', avatar: '', type: '' }
+        }
+      },
+      {
+        id: 'property-select',
+        name: '属性选择器',
+        type: 'propertySelect',
+        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 yysComponents = [
-  {
-    id: 'shikigami-select',
-    name: '式神选择器',
-    type: 'shikigamiSelect',
-    description: '用于选择式神的组件'
-  },
-  {
-    id: 'yuhun-select',
-    name: '御魂选择器',
-    type: 'yuhunSelect',
-    description: '用于选择御魂的组件'
-  },
-  {
-    id: 'property-select',
-    name: '属性选择器',
-    type: 'propertySelect',
-    description: '用于设置属性要求的组件'
-  }
-];
-
-const emit = defineEmits(['add-node']);
-
-// 处理拖拽开始
-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';
-};
-
-// 处理组件点击
+// 处理组件点击 - 直接使用 onDragStart 的数据格式
 const handleComponentClick = (component) => {
-  // 生成唯一ID
-  const nodeId = `${component.type}-${Date.now()}`;
-  
-  // 创建新节点
-  const newNode = {
-    id: nodeId,
+  const nodeData = {
     type: component.type,
     label: component.name,
-    position: { x: 100, y: 100 }, // 默认位置
-    data: { componentType: component.type },
-    style: { background: '#fff', border: '2px solid black',width: '150px', height: '150px' },
+    position: { x: 100, y: 100 },
+    data: component.data
   };
   
-  // 发出添加节点事件
-  emit('add-node', newNode);
+  onDragStart({ dataTransfer: { setData: () => {} } } as DragEvent, nodeData);
 };
 </script>
 
 <template>
   <div class="components-panel">
     <h3>组件库</h3>
-    <div class="components-group">
-      <div class="group-title">基础组件</div>
+    <!-- 使用两层遍历生成界面元素 -->
+    <div 
+      v-for="group in componentGroups" 
+      :key="group.id"
+      class="components-group"
+    >
+      <div class="group-title">{{ group.title }}</div>
       <div class="components-list">
         <div 
-          v-for="component in baseComponents" 
+          v-for="component in group.components" 
           :key="component.id" 
           class="component-item"
           @click="handleComponentClick(component)"
           draggable="true"
-          @dragstart="handleDragStart($event, component)"
-        >
-          <div class="component-icon">
-            <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" 
-          :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"
-            @dragover="handleDragOver"
+            @drop="onDrop"
+            @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;