UPDATE: VERSION-20260314

2026-03-14 21:37:07 +08:00
parent fa0c93044c
commit 0cf4c9b47e
12 changed files with 832 additions and 65 deletions
--- a/modeler/src/views/decision/communication/nodes-card.vue
+++ b/modeler/src/views/decision/communication/nodes-card.vue
@@ -0,0 +1,125 @@
+<template>
+  <div class="w-full">
+    <a-collapse v-model:activeKey="activeKey" :accordion="true">
+      <a-collapse-panel key="1">
+        <template #header>
+          <span class="ks-model-builder-title-icon icon-model"></span>控制节点
+        </template>
+        <div class="w-full h-full">
+          <a-row>
+            <a-col v-for="nm in controlTemplates" :span="12">
+              <div
+                :key="nm.id"
+                :data-type="nm.type"
+                class="ks-model-drag-item"
+                @dragend="handleDragEnd"
+                @dragstart="handleDragStart($event, nm, 'control')"
+              >
+                <img :alt="nm.name ?? ''" class="icon" src="@/assets/icons/model-4.svg" />
+                <span class="desc">{{ nm.name }}</span>
+              </div>
+            </a-col>
+          </a-row>
+        </div>
+      </a-collapse-panel>
+    </a-collapse>
+
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted, ref } from 'vue';
+import type { NodeDragTemplate, NodeTemplate } from '../types';
+import { findNodeTemplates } from '../designer/api';
+import { safePreventDefault, safeStopPropagation } from '@/utils/event';
+
+export default defineComponent({
+  emits: ['drag-item-start', 'drag-item-end'],
+  setup(_props, { emit }) {
+
+    const activeKey = ref<number>(1);
+    const templateData = ref<NodeTemplate[]>([]);
+    const isDraggingOver = ref<boolean>(false);
+    const draggedNodeData = ref<NodeDragTemplate | null>(null);
+    // 控制节点
+    const controlTemplates = ref<NodeTemplate[]>([]);
+    // 条件节点
+    const conditionTemplates = ref<NodeTemplate[]>([]);
+    // 行为节点
+    const actionsTemplates = ref<NodeTemplate[]>([]);
+
+    const loadTress = () => {
+      controlTemplates.value = [];
+      conditionTemplates.value = [];
+      actionsTemplates.value = [];
+
+      findNodeTemplates().then(r => {
+        templateData.value = r.data;
+        if (r.data) {
+          r.data.forEach(tpl => {
+            if (tpl.type === 'action') {
+              actionsTemplates.value.push(tpl);
+            } else if (tpl.type === 'parallel' || tpl.type === 'sequence' || tpl.type === 'select'|| tpl.type === 'root') {
+              controlTemplates.value.push(tpl);
+            } else {
+              conditionTemplates.value.push(tpl);
+            }
+          });
+        }
+      });
+    };
+
+    const handleDragStart = (e: DragEvent, nm: NodeTemplate, group: String) => {
+      let dragNode: NodeDragTemplate = { ...nm, group: group };
+      draggedNodeData.value = dragNode as NodeDragTemplate;
+
+      if (e.dataTransfer) {
+        e.dataTransfer.setData('text/plain', JSON.stringify(draggedNodeData.value));
+        e.dataTransfer.effectAllowed = 'copyMove';
+
+        const dragPreview = document.createElement('div');
+        dragPreview.textContent = dragNode.name || '';
+        dragPreview.style.cssText = `
+          position: absolute;
+          top: -1000px;
+          padding: 6px 12px;
+          background: #3b82f6;
+          color: white;
+          border-radius: 6px;
+          font-size: 12px;
+          font-weight: 500;
+        `;
+        document.body.appendChild(dragPreview);
+        e.dataTransfer.setDragImage(dragPreview, dragPreview.offsetWidth / 2, dragPreview.offsetHeight / 2);
+        emit('drag-item-start', dragNode, group, isDraggingOver.value, e);
+        console.log('开始拖动:', dragNode);
+        setTimeout(() => document.body.removeChild(dragPreview), 0);
+      }
+    };
+
+    const handleDragEnd = (e: DragEvent) => {
+      safePreventDefault(e);
+      safeStopPropagation(e);
+      isDraggingOver.value = false;
+      console.log('拖动结束');
+      emit('drag-item-end', isDraggingOver.value, e);
+    };
+
+    onMounted(() => {
+      loadTress();
+    });
+
+    return {
+      activeKey,
+
+      controlTemplates,
+      conditionTemplates,
+      actionsTemplates,
+
+      handleDragStart,
+      handleDragEnd,
+    };
+  },
+});
+
+</script>