动态分组

@@ -115,6 +115,11 @@ const router = createRouter({
       name: 'snapshot',
       component: () => import('../views/snapshot/index.vue')
     },
+    {
+      path: '/dynamic-group',
+      name: 'dynamic-group',
+      component: () => import('../views/dynamic-group/index.vue')
+    },
   ]
 })
 

+<template>
+  <div class="container">
+    <div ref="container" class="flow-container"></div>
+    <div class="control-panel">
+      <el-button @click="openSelectionSelect">选区</el-button>
+      <div v-for="item in dndConfig" :key="item.type" class="dnd-item">
+        <img :src="item.icon" :alt="item.label" />
+        <span>{{ item.label }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import LogicFlow from "@logicflow/core";
+import { DynamicGroup } from "@logicflow/extension";
+
+const container = ref(null);
+let lf = null;
+
+// 拖拽面板配置
+const dndConfig = [
+  {
+    type: 'dynamic-group',
+    label: '内置动态分组',
+    text: 'DynamicGroup',
+    icon: 'https://cdn.jsdelivr.net/gh/Logic-Flow/static@latest/docs/examples/extension/group/group.png',
+  },
+  {
+    type: 'circle',
+    label: '圆形',
+    text: 'Circle',
+    icon: 'https://cdn.jsdelivr.net/gh/Logic-Flow/static@latest/docs/examples/extension/group/circle.png',
+  },
+  {
+    type: 'rect',
+    label: '矩形',
+    text: 'Rect',
+    icon: 'https://cdn.jsdelivr.net/gh/Logic-Flow/static@latest/docs/examples/extension/group/rect.png',
+  },
+];
+
+// 选区功能
+const openSelectionSelect = () => {
+  if (lf) {
+    lf.openSelectionSelect();
+    lf.once('selection:selected', () => {
+      lf.closeSelectionSelect();
+    });
+  }
+};
+
+onMounted(() => {
+  lf = new LogicFlow({
+    container: container.value,
+    grid: true,
+    multipleSelectKey: "alt",
+    autoExpand: false,
+    allowResize: true,
+    allowRotate: true,
+    nodeTextDraggable: false,
+    keyboard: {
+      enabled: true,
+    },
+    plugins: [DynamicGroup],
+  });
+
+  // 设置拖拽面板
+  const dndPanelConfig = [
+    {
+      label: '选区',
+      icon: 'https://cdn.jsdelivr.net/gh/Logic-Flow/static@latest/docs/examples/extension/bpmn/select.png',
+      callback: openSelectionSelect,
+    },
+    ...dndConfig,
+  ];
+  lf.setPatternItems(dndPanelConfig);
+
+  // 渲染数据
+  const graphData = {
+    nodes: [
+      {
+        id: 'circle_2',
+        type: 'circle',
+        x: 800,
+        y: 140,
+        text: {
+          value: 'circle_2',
+          x: 800,
+          y: 140,
+          editable: false,
+          draggable: true,
+        },
+      },
+      {
+        id: 'dynamic-group_1',
+        type: 'dynamic-group',
+        x: 500,
+        y: 140,
+        text: 'dynamic-group_1',
+        resizable: true,
+        properties: {
+          collapsible: true,
+          width: 420,
+          height: 250,
+          radius: 5,
+          isCollapsed: true,
+        },
+      },
+      {
+        id: 'dynamic-group_2',
+        type: 'dynamic-group',
+        x: 500,
+        y: 220,
+        text: 'dynamic-group_2',
+        resizable: true,
+        properties: {
+          width: 420,
+          height: 250,
+          radius: 5,
+          collapsible: false,
+          isCollapsed: false,
+        },
+      },
+    ],
+    edges: [],
+  };
+
+  lf.render(graphData);
+});
+</script>
+
+<style scoped>
+.container {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.flow-container {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+}
+
+.control-panel {
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+
+.dnd-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  cursor: pointer;
+  padding: 8px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+}
+
+.dnd-item img {
+  width: 24px;
+  height: 24px;
+  margin-bottom: 4px;
+}
+</style>

 <!--
  * @Date: 2025-03-10 14:37:31
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-03-13 23:00:31
+ * @LastEditTime: 2025-03-14 13:53:06
  * @FilePath: /logic-flow2/src/views/home.vue
  * @Description: 文件描述
 -->
@@ -27,6 +27,7 @@
   <el-button type="primary" @click="goTo('mini-map')">mini-map</el-button>
   <el-button type="primary" @click="goTo('selection-select')">selection-select</el-button>
   <el-button type="primary" @click="goTo('snapshot')">snapshot</el-button>
+  <el-button type="primary" @click="goTo('dynamic-group')">dynamic-group</el-button>
 </template>
 
 <script setup>