UPDATE: VERSION-20260314

modeler/src/views/decision/designer/api.ts

@@ -0,0 +1,40 @@
+/*
+ * This file is part of the kernelstudio package.
+ *
+ * (c) 2014-2025 zlin <admin@kernelstudio.com>
+ *
+ * For the full copyright and license information, please view the LICENSE file
+ * that was distributed with this source code.
+ */
+
+import { HttpRequestClient } from '@/utils/request';
+import type { BehaviorTree, BehaviorTreeDetailsResponse, BehaviorTreePageResponse, BehaviorTreeRequest, NodeTemplatesResponse } from '../types';
+import type { BasicResponse } from '@/types';
+
+const req = HttpRequestClient.create<BasicResponse>({
+  baseURL: '/api',
+});
+
+export const findNodeTemplates = (): Promise<NodeTemplatesResponse> => {
+  return req.get('/system/nodetemplate/all');
+};
+
+export const findTreesByQuery = (query: Partial<BehaviorTreeRequest> = {}): Promise<BehaviorTreePageResponse> => {
+  return req.get<BehaviorTreePageResponse>('/system/behaviortree/list', query);
+};
+
+export const findOneTreeById = (id: number): Promise<BehaviorTreeDetailsResponse> => {
+  return req.get(`/system/behaviortree/${id}`);
+};
+
+export const deleteOneTreeById = (id: number): Promise<BehaviorTreeDetailsResponse> => {
+  return req.delete(`/system/behaviortree/${id}`);
+};
+
+export const updateTree = (rt: Partial<BehaviorTree>): Promise<BasicResponse> => {
+  return req.postJson(`/system/behaviortree`, rt);
+};
+
+export const createTree = (rt: Partial<BehaviorTree>): Promise<BasicResponse> => {
+  return req.putJson(`/system/behaviortree`, rt);
+};

modeler/src/views/decision/designer/designer.vue

@@ -0,0 +1,453 @@
+<template>
+  <Wrapper>
+    <a-layout class="bg-transparent" style="background: transparent">
+      <Header />
+      <a-layout class="ks-layout-body">
+        <div class="ks-model-builder-body">
+          <div class="ks-model-builder-left">
+            <TressCard
+              ref="treesCardRef"
+              @create-tree="handleCreateTree"
+              @select-tree="handleSelectTree"
+            />
+            <NodesCard
+              @drag-item-start="handleDragStart"
+              @drag-item-end="handleDragEnd"
+            />
+          </div>
+
+          <div class="ks-model-builder-content">
+            <div class="ks-model-builder-actions">
+              <a-space>
+<!--                <a-tooltip v-if="graph && currentBehaviorTree" placement="top">-->
+<!--                  <template #title>-->
+<!--                    保存-->
+<!--                  </template>-->
+<!--                  <a-popconfirm-->
+<!--                    title="确定保存?"-->
+<!--                    @confirm="handleSave"-->
+<!--                  >-->
+<!--                    <a-button class="ks-model-builder-save" size="small">-->
+<!--                      <CheckOutlined />-->
+<!--                      <span>保存</span>-->
+<!--                    </a-button>-->
+<!--                  </a-popconfirm>-->
+<!--                </a-tooltip>-->
+                <a-button v-if="graph && currentBehaviorTree" class="ks-model-builder-save" size="small" @click="handleSave">
+                  <CheckOutlined />
+                  <span>保存</span>
+                </a-button>
+              </a-space>
+            </div>
+            <!-- 画布容器，添加拖放事件 -->
+            <div
+              ref="canvas"
+              class="ks-model-builder-canvas"
+              @dragenter="handleDragEnter"
+              @dragleave="handleDragLeave"
+              @drop="handleDrop"
+              @dragover.prevent
+            ></div>
+            <TeleportContainer />
+          </div>
+          <Properties
+            v-if="graph"
+            :element="selectedNodeTaskElement"
+            :graph="graph as any"
+            :node="selectedModelNode as any"
+            :tree="currentBehaviorTree"
+            :tree-editing="currentTreeEditing"
+            @update-element="handleUpdateElement" />
+        </div>
+      </a-layout>
+    </a-layout>
+  </Wrapper>
+</template>
+
+<script lang="ts">
+import { defineComponent, nextTick, onBeforeUnmount, onMounted, ref } from 'vue';
+import { message } from 'ant-design-vue';
+import { getTeleport } from '@antv/x6-vue-shape';
+import { Graph, Node, type NodeProperties } from '@antv/x6';
+import { CheckCircleOutlined, CheckOutlined, RollbackOutlined, SaveOutlined } from '@ant-design/icons-vue';
+import { Wrapper } from '@/components/wrapper';
+import { safePreventDefault, safeStopPropagation } from '@/utils/event';
+import Header from '../header.vue';
+import Properties from './properties.vue';
+import type { BehaviorTree, NodeDragTemplate, NodeTemplate } from '../types';
+import type { GraphTaskElement, NodeGraph } from '../builder/element';
+import { useGraphCanvas } from '../builder/hooks';
+import { registerNodeElement } from '../builder/register';
+import { createLineOptions } from '../builder/line';
+import { createTree, findOneTreeById, updateTree } from './api';
+import { createGraphTaskElement, hasElements, hasRootElementNode, resolveNodeGraph } from '../builder/utils';
+import { createGraphTaskElementFromTemplate } from '../utils/node';
+import TressCard from './trees-card.vue';
+import NodesCard from './nodes-card.vue';
+
+const TeleportContainer = defineComponent(getTeleport());
+
+registerNodeElement();
+
+export default defineComponent({
+  components: {
+    TressCard,
+    NodesCard,
+    Wrapper,
+    Header,
+    Properties,
+    SaveOutlined,
+    CheckCircleOutlined,
+    CheckOutlined,
+    RollbackOutlined,
+    TeleportContainer,
+  },
+  setup() {
+    const canvas = ref<HTMLDivElement | null>(null);
+    const graph = ref<Graph | null>(null);
+    const currentZoom = ref<number>(1);
+    const draggedNodeData = ref<NodeDragTemplate | null>(null);
+    const isDraggingOver = ref(false);
+    const currentTreeEditing = ref<boolean>(false);
+    const currentBehaviorTree = ref<BehaviorTree | null>(null);
+    const currentNodeGraph = ref<NodeGraph | null>(null);
+    const selectedModelNode = ref<Node<NodeProperties> | null>(null);
+    const selectedNodeTaskElement = ref<GraphTaskElement | null>(null);
+    const changed = ref<boolean>(false);
+    const treesCardRef = ref<InstanceType<typeof TressCard> | null>(null);
+
+    const {
+      handleGraphEvent,
+      createCanvas,
+      zoomIn,
+      zoomOut,
+      fitToScreen,
+      centerContent,
+      resizeCanvas,
+    } = useGraphCanvas();
+
+    // 处理拖动开始
+    const handleDragStart = (nm: NodeDragTemplate) => {
+      draggedNodeData.value = nm;
+    };
+
+    // 处理拖动结束
+    const handleDragEnd = () => {
+      isDraggingOver.value = false;
+    };
+
+    // 处理拖动进入
+    const handleDragEnter = (e: DragEvent) => {
+      safePreventDefault(e);
+      safeStopPropagation(e);
+      isDraggingOver.value = true;
+    };
+
+    // 处理拖动离开
+    const handleDragLeave = (e: DragEvent) => {
+      safePreventDefault(e);
+      safeStopPropagation(e);
+
+      if (canvas.value && e.relatedTarget &&
+        typeof e.relatedTarget === 'object' &&
+        'nodeType' in e.relatedTarget) {
+        // 使用 Element 类型而不是 x6 的 Node 类型
+        if (!canvas.value.contains(e.relatedTarget as Element)) {
+          isDraggingOver.value = false;
+        }
+      }
+    };
+
+    // 处理放置
+    const handleDrop = (e: DragEvent) => {
+      console.info('handleDrop', e);
+      safePreventDefault(e);
+      safeStopPropagation(e);
+      isDraggingOver.value = false;
+      currentTreeEditing.value = false;
+
+      if (!currentBehaviorTree.value) {
+        message.error('请先选择或者创建行为树.');
+        return;
+      }
+
+      if (!graph.value || !canvas.value || !draggedNodeData.value) {
+        message.error('无法放置节点,缺少必要数据');
+        return;
+      }
+
+      try {
+        // 获取拖动的数据
+        const template = draggedNodeData.value as NodeDragTemplate;
+
+        if (!hasElements(graph.value as Graph) && template.type !== 'root') {
+          message.error('请先添加根节点.');
+          return;
+        }
+
+        if (hasRootElementNode(graph.value as Graph) && template.type === 'root') {
+          message.error('根节点已经存在.');
+          return;
+        }
+
+        // 计算相对于画布的位置（考虑缩放）
+        const rect = canvas.value.getBoundingClientRect();
+        const scale = currentZoom.value || 1;
+        const x = (e.clientX - rect.left) / scale;
+        const y = (e.clientY - rect.top) / scale;
+
+        console.log('放置节点:', { ...template, x, y });
+
+        // 创建节点数据
+        const settingTaskElement: GraphTaskElement = createGraphTaskElementFromTemplate(template, { x, y });
+        // 创建节点
+        const settingTaskNode = createGraphTaskElement(settingTaskElement);
+        console.info('create settingTaskNode: ', settingTaskElement, settingTaskNode);
+
+        // 将节点添加到画布
+        graph.value?.addNode(settingTaskNode as any);
+        console.log('节点已添加到画布:', settingTaskNode.id);
+
+        // 重置拖动数据
+        draggedNodeData.value = null;
+      } catch (error) {
+        console.error('放置节点时出错:', error);
+      }
+    };
+
+    const handleSelectTree = (tree: BehaviorTree) => {
+      console.info('handleSelectTree', tree);
+      findOneTreeById(tree.id).then(r => {
+        if (r.data) {
+          let nodeGraph: NodeGraph | null = null;
+          try {
+            nodeGraph = JSON.parse(r.data?.xmlContent as unknown as string) as unknown as NodeGraph;
+          } catch (e: any) {
+            console.error('parse error,cause:', e);
+          }
+          if (!nodeGraph) {
+            nodeGraph = {
+              nodes: [],
+              edges: [],
+            };
+          }
+          currentBehaviorTree.value = {
+            ...r.data,
+            graph: nodeGraph,
+          };
+          currentTreeEditing.value = true;
+          createElements();
+        } else {
+          message.error(r.msg ?? '行为树不存在.');
+        }
+      });
+    };
+
+    const createElements = () => {
+      nextTick(() => {
+        try {
+          graph.value?.clearCells();
+        } catch (e: any) {
+          console.error('clear cells error, cause:', e);
+        }
+        setTimeout(() => {
+          if (currentBehaviorTree.value?.graph && graph.value) {
+            if (currentBehaviorTree.value?.graph.nodes) {
+              currentBehaviorTree.value?.graph.nodes.forEach(ele => {
+                const node = createGraphTaskElement(ele as GraphTaskElement);
+                console.info('create node: ', ele);
+                // 将节点添加到画布
+                graph.value?.addNode(node as Node);
+              });
+            }
+            if (currentBehaviorTree.value?.graph.edges) {
+              // 然后添加所有边，确保包含桩点信息
+              setTimeout(() => {
+                currentBehaviorTree.value?.graph.edges.forEach(edgeData => {
+                  graph.value?.addEdge({
+                    ...edgeData,
+                    ...createLineOptions(),
+                  });
+                });
+              }, 100);  // 延迟一会儿,免得连线错位
+            }
+          }
+        }, 100);
+      });
+    };
+
+    const handleCreateTree = () => {
+      currentBehaviorTree.value = {
+        id: 0,
+        name: '行为树',
+        description: null,
+        englishName: null,
+        xmlContent: null,
+        createdAt: null,
+        graph: {
+          edges: [],
+          nodes: [],
+        },
+        updatedAt: null,
+      };
+      currentNodeGraph.value = {
+        edges: [],
+        nodes: [],
+      };
+      selectedModelNode.value = null;
+      selectedNodeTaskElement.value = null;
+
+      createElements();
+    };
+
+    // 初始化X6画布
+    const initGraph = () => {
+      if (!canvas.value) {
+        console.error('画布容器不存在');
+        return;
+      }
+
+      try {
+        graph.value = createCanvas(canvas.value);
+        console.log('画布初始化成功');
+        createElements();
+
+        // 监听缩放变化
+        handleGraphEvent('scale', ({ sx }: { sx: number }) => {
+          currentZoom.value = sx;
+        });
+
+        handleGraphEvent('blank:click', () => {
+          selectedModelNode.value = null;
+          selectedNodeTaskElement.value = null;
+          currentTreeEditing.value = null !== currentBehaviorTree.value;
+        });
+
+        handleGraphEvent('node:click', (args: any) => {
+          const node = args.node as Node<NodeProperties>;
+          const newElement = node.getData() as GraphTaskElement;
+
+          selectedModelNode.value = node;
+          selectedNodeTaskElement.value = JSON.parse(JSON.stringify(newElement || {})) as GraphTaskElement;
+        });
+
+        // 监听节点鼠标事件，显示/隐藏连接点
+        handleGraphEvent('node:mouseenter', (_ctx: any) => {
+        });
+
+        handleGraphEvent('node:mouseleave', (_ctx: any) => {
+        });
+      } catch (error) {
+        console.error('初始化画布失败:', error);
+      }
+    };
+
+    // 监听窗口大小变化
+    const handleResize = () => {
+      nextTick(() => {
+        resizeCanvas();
+      });
+    };
+
+    const init = () => {
+      console.info('init');
+      nextTick(() => {
+        initGraph();
+        window.addEventListener('resize', handleResize);
+        console.log('节点挂载完成');
+      });
+    };
+
+    const handleUpdateElement = (element: GraphTaskElement) => {
+      // 更新选中的节点数据
+      if (selectedModelNode.value) {
+        selectedModelNode.value.replaceData(element);
+      }
+      console.info('handleUpdateElement', element);
+      // 更新本地引用
+      selectedNodeTaskElement.value = element;
+      changed.value = true;
+    };
+
+    const handleSave = () => {
+      const graphData: NodeGraph = resolveNodeGraph(graph.value as Graph);
+      console.info('handleSave', graphData);
+      if (!currentBehaviorTree.value) {
+        message.error('当前决策树不存在');
+        return;
+      }
+      const newTree: BehaviorTree = {
+        ...currentBehaviorTree.value,
+        graph: graphData,
+        xmlContent: JSON.stringify(graphData),
+      };
+      if (!newTree.name) {
+        message.error('行为树名称不能为空.');
+        return;
+      }
+      if (!newTree.englishName) {
+        message.error('行为树英文名称不能为空.');
+        return;
+      }
+      let res = null;
+      if (currentBehaviorTree.value.id > 0) {
+        res = createTree(newTree);
+      } else {
+        res = updateTree(newTree);
+      }
+      res.then(r => {
+        if (r.code === 200) {
+          treesCardRef.value?.refresh();
+          message.success(r.msg ?? '操作成功.');
+        } else {
+          message.error(r.msg ?? '操作失败.');
+        }
+      });
+    };
+
+    // 初始化
+    onMounted(() => {
+      init();
+    });
+
+    // 清理
+    onBeforeUnmount(() => {
+      window.removeEventListener('resize', handleResize);
+      if (graph.value) {
+        try {
+          graph.value.clearCells();
+        } catch (error) {
+          console.warn('销毁画布时出错:', error);
+        }
+        graph.value = null;
+        console.log('画布已销毁');
+      }
+    });
+
+    return {
+      treesCardRef,
+      handleCreateTree,
+      currentTreeEditing,
+      currentBehaviorTree,
+      currentNodeGraph,
+      selectedNodeTaskElement,
+      selectedModelNode,
+      graph,
+      canvas,
+      zoomIn,
+      zoomOut,
+      fitToScreen,
+      centerContent,
+      handleDragStart,
+      handleDragEnd,
+      handleDragEnter,
+      handleDragLeave,
+      handleDrop,
+      isDraggingOver,
+      handleSave,
+      handleUpdateElement,
+      handleSelectTree,
+    };
+  },
+});
+</script>

modeler/src/views/decision/designer/nodes-card.vue

@@ -0,0 +1,167 @@
+<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-panel key="2">
+        <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 conditionTemplates" :span="12">
+              <div
+                :key="nm.id"
+                :data-type="nm.type"
+                class="ks-model-drag-item"
+                @dragend="handleDragEnd"
+                @dragstart="handleDragStart($event, nm, 'condition')"
+              >
+                <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-panel key="3">
+        <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 actionsTemplates" :span="12">
+              <div
+                :key="nm.id"
+                :data-type="nm.type"
+                class="ks-model-drag-item"
+                @dragend="handleDragEnd"
+                @dragstart="handleDragStart($event, nm, 'action')"
+              >
+                <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 './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>

modeler/src/views/decision/designer/properties.vue

@@ -0,0 +1,270 @@
+<template>
+  <div class="ks-model-builder-right">
+    <template v-if="currentElement || tree">
+
+      <a-tabs v-model:activeKey="activeTopTabsKey" class="ks-model-builder-tabs settings-tab">
+        <template #leftExtra>
+          <span class="ks-model-builder-title-icon icon-input"></span>
+        </template>
+
+        <a-tab-pane v-if="tree" key="1" tab="行为树属性">
+          <a-form
+            autocomplete="off"
+            layout="vertical"
+            name="basic"
+            style="padding-bottom:15px;"
+          >
+            <a-form-item label="行为树名称">
+              <a-input v-model:value="tree.name" placeholder="行为树名称" size="small" />
+            </a-form-item>
+
+            <a-form-item label="行为树英文名称">
+              <a-input v-model:value="tree.englishName" placeholder="行为树英文名称" size="small" />
+            </a-form-item>
+
+            <a-form-item label="行为树说明">
+              <a-textarea v-model:value="tree.description" placeholder="行为树说明" size="small" />
+            </a-form-item>
+
+          </a-form>
+        </a-tab-pane>
+
+        <a-tab-pane v-if="currentElement" key="2" tab="节点属性">
+          <a-form
+            autocomplete="off"
+            layout="vertical"
+            name="basic"
+            style="padding-bottom:15px;"
+          >
+            <a-form-item label="节点名称">
+              <a-input v-model:value="currentElement.name" :placeholder="currentElement.name" size="small" />
+            </a-form-item>
+
+            <a-form-item label="节点介绍">
+              <a-textarea v-model:value="currentElement.description" :placeholder="currentElement.description" size="small" />
+            </a-form-item>
+
+            <a-form-item label="排序">
+              <a-input-number style="width:100%;" v-model:value="currentElement.order" size="small" />
+            </a-form-item>
+
+            <a-divider />
+
+            <a-form-item label="输入">
+              <a-textarea v-model:value="currentElement.inputs" size="small" />
+            </a-form-item>
+
+            <a-form-item label="输出">
+              <a-textarea v-model:value="currentElement.outputs" size="small" />
+            </a-form-item>
+
+<!--            <a-divider v-if="currentElement.settings && currentElement.parameters.length > 0" />-->
+
+<!--            <a-form-item v-for="setting in currentElement.parameters" :label="setting.description">-->
+<!--              <a-input-number v-if="setting.dataType === 'double'" v-model:value="setting.defaultValue" :placeholder="setting.description" size="small" style="width:100%;" />-->
+<!--              <a-input v-else v-model:value="setting.defaultValue" :placeholder="setting.description" size="small" />-->
+<!--            </a-form-item>-->
+          </a-form>
+        </a-tab-pane>
+
+      </a-tabs>
+
+      <a-tabs v-if="currentElement" v-model:activeKey="activeBottomTabsKey" class="ks-model-builder-tabs parameters-tabs">
+        <template #leftExtra>
+          <span class="ks-model-builder-title-icon icon-input"></span>
+        </template>
+        <a-tab-pane key="1" tab="节点变量">
+          <a-form
+            v-if="currentElement.parameters && currentElement.parameters.length > 0"
+            autocomplete="off"
+            layout="vertical"
+            name="basic"
+            style="padding-bottom:15px;"
+          >
+            <a-form-item v-for="setting in currentElement.parameters" :label="setting.description">
+              <a-input-number v-if="setting.dataType === 'double'" v-model:value="setting.defaultValue" :placeholder="setting.description" size="small" style="width:100%;" />
+              <a-input v-else v-model:value="setting.defaultValue" :placeholder="setting.description" size="small" />
+            </a-form-item>
+          </a-form>
+          <a-empty v-else>
+
+          </a-empty>
+<!--          <div class="w-full">-->
+<!--            <a-space>-->
+<!--              <a-button size="small" type="primary" @click="addVariable">添加</a-button>-->
+<!--            </a-space>-->
+<!--            <a-table-->
+<!--              :columns="actionSpaceColumns"-->
+<!--              :dataSource="currentElement.variables"-->
+<!--              :pagination="false"-->
+<!--              :scroll="{ x: 500 }"-->
+<!--              class="mt-1"-->
+<!--              row-key="key"-->
+<!--              size="small"-->
+<!--              style="overflow-y:auto;height:35vh;"-->
+<!--            >-->
+<!--              <template #bodyCell="{column, record, index}">-->
+<!--                <template v-if="column.dataIndex === 'index'">-->
+<!--                  {{ index + 1 }}-->
+<!--                </template>-->
+<!--                <template v-else-if="column.dataIndex === '_actions'">-->
+<!--                  <a-button-->
+<!--                    class="btn-link-delete"-->
+<!--                    danger-->
+<!--                    size="small"-->
+<!--                    type="text"-->
+<!--                    @click="()=> removeVariable(record)"-->
+<!--                  >-->
+<!--                    删除-->
+<!--                  </a-button>-->
+<!--                </template>-->
+<!--                <template v-else>-->
+<!--                  <a-input v-model:value="record[column.dataIndex]" size="small" />-->
+<!--                </template>-->
+<!--              </template>-->
+<!--            </a-table>-->
+<!--          </div>-->
+        </a-tab-pane>
+      </a-tabs>
+
+    </template>
+
+    <a-tabs v-else :activeKey="'0'" class="ks-model-builder-tabs parameters-tabs empty">
+      <template #leftExtra>
+        <span class="ks-model-builder-title-icon icon-input"></span>
+      </template>
+      <a-tab-pane :key="'0'" tab="请选择或者创建决策树">
+        <a-empty>
+          <template #description>
+            请选择或者创建决策树
+          </template>
+        </a-empty>
+      </a-tab-pane>
+    </a-tabs>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted, type PropType, ref, watch } from 'vue';
+import { CheckOutlined } from '@ant-design/icons-vue';
+import type { ElementVariable, GraphTaskElement } from '../builder/element';
+import type { BehaviorTree } from '../types';
+import type { Graph, Node, NodeProperties } from '@antv/x6';
+import { generateKey } from '@/utils/strings';
+
+const actionSpaceColumns = [
+  { title: '序号', dataIndex: 'index', key: 'index', width: 40 },
+  { title: '变量名', dataIndex: 'name', key: 'name', width: 80 },
+  { title: '参数值', dataIndex: 'value', key: 'value', width: 80 },
+  { title: '单位', dataIndex: 'unit', key: 'unit', width: 80 },
+  { title: '操作', dataIndex: '_actions', key: '_actions', width: 60 },
+];
+
+export default defineComponent({
+  components: { CheckOutlined },
+  props: {
+    tree: { type: [Object, null] as PropType<BehaviorTree | null | undefined>, required: false },
+    treeEditing: { type: Boolean as PropType<boolean>, required: true, default: false },
+    node: { type: [Object, null] as PropType<Node<NodeProperties> | null | undefined>, required: false },
+    graph: { type: [Object, null] as PropType<Graph | null | undefined>, required: true },
+  },
+  emits: ['update-element', 'update-tree'],
+  setup(props, { emit }) {
+    const activeTopTabsKey = ref<string>('1');
+    const activeBottomTabsKey = ref<string>('1');
+    const activeBottomTabs2Key = ref<string>('1');
+
+    const currentTree = ref<BehaviorTree | null>(props.tree ?? null);
+    const treeEditing = ref<boolean>(props.treeEditing);
+    const currentNode = ref<Node | null>(props.node ?? null);
+    const currentElement = ref<GraphTaskElement | null>(null);
+
+    const load = () => {
+    };
+
+    const resolveNode = (n?: Node | null | undefined) => {
+      currentNode.value = n ?? null;
+      if (n) {
+        const data = n.getData();
+        currentElement.value = JSON.parse(JSON.stringify(data || {})) as GraphTaskElement;
+      } else {
+        currentElement.value = null;
+      }
+    };
+
+    const addVariable = () => {
+      if (!currentElement.value) {
+        return;
+      }
+
+      if (!currentElement.value.variables) {
+        currentElement.value.variables = [];
+      }
+      currentElement.value?.variables.push({
+        key: generateKey('variable'),
+        name: null,
+        value: null,
+        defaults: null,
+        unit: null,
+      });
+    };
+
+    const removeVariable = (row: ElementVariable) => {
+      if (currentElement.value && currentElement.value.variables) {
+        const filteredVars = currentElement.value.variables.filter(v => v.key !== row.key);
+        currentElement.value.variables = [...filteredVars];
+      }
+    };
+
+    const updateNode = () => {
+      if (currentNode.value && currentElement.value) {
+        // 深拷贝当前元素数据
+        const newElement = JSON.parse(JSON.stringify(currentElement.value)) as GraphTaskElement;
+        // 更新节点数据
+        currentNode.value.replaceData(newElement);
+        // 触发事件通知父组件
+        emit('update-element', newElement);
+      }
+    };
+
+    watch(
+      () => props.node,
+      (n?: Node | null | undefined) => resolveNode(n),
+      { deep: true, immediate: true },
+    );
+
+    watch(
+      () => props.tree,
+      (n?: BehaviorTree | null | undefined) => {
+        currentTree.value = n ?? null;
+      },
+      { deep: true, immediate: true },
+    );
+
+    watch(
+      () => props.treeEditing,
+      (n?: boolean | null | undefined) => {
+        treeEditing.value = n === true;
+      },
+      { deep: true, immediate: true },
+    );
+
+    watch(() => currentElement.value, () => updateNode(), { deep: true });
+
+    onMounted(() => load());
+
+    return {
+      actionSpaceColumns,
+      activeTopTabsKey,
+      activeBottomTabsKey,
+      activeBottomTabs2Key,
+      currentElement,
+      addVariable,
+      removeVariable,
+      currentTree,
+      treeEditing,
+      // currentElementParameters,
+    };
+  },
+});
+</script>

modeler/src/views/decision/designer/trees-card.vue

@@ -0,0 +1,141 @@
+<template>
+  <a-collapse v-model:activeKey="activeKey" :accordion="false" class="ks-trees-collapse">
+    <a-collapse-panel key="1" style="position: relative">
+      <template #header>
+        <a-flex>
+          <span class="ks-model-builder-title-icon icon-model"></span>
+          <span style="color: #82c4e9;font-size: 16px;">我的行为树</span>
+          <!--          <span style="position: absolute; right: 15px;"><PlusOutlined @click="$emit('create-tree')"/></span>-->
+        </a-flex>
+      </template>
+      <div class="w-full" style="padding: 5px;">
+        <a-flex>
+          <a-input-search v-model:value="behaviorTreeQuery.name" allowClear placeholder="行为树名称" size="small" @search="loadTress" />
+          <a-button size="small" style="margin-left: 10px;">
+            <PlusOutlined style="margin-top: 0px;display: block;" @click="$emit('create-tree')" />
+          </a-button>
+        </a-flex>
+      </div>
+      <a-list :data-source="behaviorTrees || []" size="small" style="min-height: 25vh">
+        <template #renderItem="{ item }">
+          <a-list-item>
+            <a-flex>
+              <a-tooltip placement="bottom">
+                <template #title>
+                  <p>名称: {{ item.name }}</p>
+                  <p>说明: {{ item.description }}</p>
+                </template>
+                <span>{{ substring(item.name, 15) }}</span>
+              </a-tooltip>
+              <a-flex class="ks-tree-actions">
+                <span style="margin-right: 10px" @click="()=> handleSelect(item)"><EditFilled /></span>
+                <a-popconfirm
+                  title="确定删除?"
+                  @confirm="()=> handleDelete(item)"
+                >
+                  <span class="ks-tree-action ks-tree-action-delete"><DeleteOutlined /></span>
+                </a-popconfirm>
+              </a-flex>
+            </a-flex>
+          </a-list-item>
+        </template>
+      </a-list>
+      <a-pagination
+        v-model:current="behaviorTreeQuery.pageNum"
+        :page-size="behaviorTreeQuery.pageSize"
+        :total="totalTress"
+        simple size="small" @change="handleChange" />
+    </a-collapse-panel>
+  </a-collapse>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted, ref } from 'vue';
+import { CheckOutlined, DeleteOutlined, EditFilled, PlusOutlined } from '@ant-design/icons-vue';
+import type { BehaviorTree, BehaviorTreeRequest } from '../types';
+import { deleteOneTreeById, findTreesByQuery } from './api';
+import { substring } from '@/utils/strings';
+
+export default defineComponent({
+  emits: ['select-tree', 'create-tree'],
+  components: {
+    CheckOutlined,
+    PlusOutlined,
+    DeleteOutlined,
+    EditFilled,
+  },
+  setup(_props, { emit }) {
+    const behaviorTrees = ref<BehaviorTree[]>([]);
+    const behaviorTreeQuery = ref<Partial<BehaviorTreeRequest>>({
+      name: null,
+      pageNum: 1,
+      pageSize: 8,
+    });
+    const activeKey = ref<number>(1);
+    const totalTress = ref<number>(0);
+
+    const loadTress = () => {
+      findTreesByQuery(behaviorTreeQuery.value).then(r => {
+        behaviorTrees.value = r.rows;
+        totalTress.value = r.total ?? 0;
+      });
+    };
+
+    const handleChange = (page: number, pageSize: number) => {
+      behaviorTreeQuery.value.pageNum = page;
+      behaviorTreeQuery.value.pageSize = pageSize;
+      loadTress();
+    };
+
+    const handleDelete = (item: BehaviorTree) => {
+      deleteOneTreeById(item.id).then(r => {
+        if (r.code === 200) {
+          loadTress();
+        }
+      });
+    };
+
+    const columns = [
+      {
+        title: '名称',
+        dataIndex: 'name',
+      },
+    ];
+
+    const handleSelect = (record: BehaviorTree) => {
+      emit('select-tree', record);
+    };
+
+    const customRow = (record: BehaviorTree) => {
+      return {
+        onClick: (event: any) => {
+          emit('select-tree', record, event);
+        },
+      };
+    };
+
+    const refresh = () => loadTress();
+
+    onMounted(() => {
+      loadTress();
+    });
+
+    return {
+      refresh,
+      totalTress,
+      substring,
+      activeKey,
+      behaviorTrees,
+      behaviorTreeQuery,
+      loadTress,
+      columns,
+      customRow,
+      handleSelect,
+      handleChange,
+      handleDelete,
+    };
+  },
+});
+
+
+</script>