auto-solution/modeler/src/views/decision/builder/node.vue

<template>
  <a-dropdown :trigger="['contextmenu']" @openChange="handleVisibleChange">
    <a-card :class="['ks-designer-node', `ks-designer-node-${element?.type}`]" hoverable>
      <template #title>
        {{ element?.name ?? '-' }}
      </template>
      <div class="w-full">
        <p>{{ element?.description ?? '-' }}</p>
      </div>
    </a-card>
    <template #overlay>
      <a-menu @click="handleMenuClick">
        <a-menu-item key="delete">
          <template #icon>
            <DeleteOutlined />
          </template>
          删除
        </a-menu-item>
      </a-menu>
    </template>
  </a-dropdown>
</template>

<script lang="ts">
import { defineComponent, onMounted, onUnmounted, ref } from 'vue';
import { elementProps } from './props';
import type { SettingTaskNodeElement } from '../types';
import { DeleteOutlined, SettingOutlined } from '@ant-design/icons-vue';
import type { Graph } from '@antv/x6';

export default defineComponent({
  name: 'SettingTaskNodeElement',
  components: {
    SettingOutlined,
    DeleteOutlined,
  },
  props: elementProps,
  setup(_props) {
    // 初始化 element，保证类型是 SettingTaskNodeElement 或 null
    const element = ref<SettingTaskNodeElement | null>(
      _props.node ? (_props.node.getData() as SettingTaskNodeElement) : null,
    );
    const updateKey = ref(0);
    const isMenuVisible = ref(false);

    // 获取节点所在的画布实例
    const getGraph = (): Graph | null => {
      return _props.graph as Graph || null;
    };

    const handleDataChange = () => {
      if (_props.node) {
        element.value = _props.node.getData() as SettingTaskNodeElement;
      } else {
        element.value = null;
      }
      console.info('handleDataChange', element.value);
      updateKey.value++;
    };

    const handleVisibleChange = (visible: boolean) => {
      isMenuVisible.value = visible;
    };

    const handleMenuClick = ({ key }: { key: string }) => {
      if (key === 'delete') {
        handleDelete();
      }
    };

    const handleDelete = () => {
      if (!_props.node) return;

      const graph = getGraph();
      if (graph) {
        try {
          // 获取与该节点关联的所有边
          const connectedEdges = graph.getConnectedEdges(_props.node);

          // 先移除关联的边
          connectedEdges.forEach(edge => {
            graph.removeEdge(edge);
          });

          // 再移除节点本身
          graph.removeNode(_props.node);

          console.info(`节点 ${_props.node.id} 已删除`);
        } catch (error) {
          console.error('删除节点失败:', error);
        }
      } else {
        console.error('无法获取 Graph 实例');
      }

      // 关闭右键菜单
      isMenuVisible.value = false;
    };

    onMounted(() => {
      console.info('node onMounted');
      _props.node?.on('change:data', handleDataChange);
    });

    onUnmounted(() => {
      console.info('node onUnmounted');
      _props.node?.off('change:data', handleDataChange);
    });

    return {
      element,
      handleMenuClick,
      handleVisibleChange,
    };
  },
});
</script>

<style lang="less">
.x6-widget-selection-box {
  border: 1px dashed #7a6986;
  box-shadow: 2px 2px 5px #000000;
}

.ks-designer-node {
  background: #1b3875;
  //background: url('@/assets/icons/bg-node.png') center / 100% 100%;
  border: 0;
  border-radius: 2px;
  width: 100%;
  height: 100%;
  cursor: pointer;

  &:hover {
    box-shadow: 0 1px 2px -2px rgb(0 0 0), 0 3px 6px 0 rgb(0 0 0 / 60%), 0 5px 12px 4px rgb(0 0 0 / 30%);
  }

  .ant-card-head {
    border: 0;
    height: 30px;
    min-height: 30px;
    border-radius: 0;
    color: #ddd;
    font-size: 12px;
    font-weight: normal;
    padding: 0 15px;
  }

  .ant-card-body {
    color: #fff;
    height: calc(100% - 30px);
    background: #24417e;
    border-radius: 0;
    font-size: 12px;
    padding: 15px !important;
    //overflow: hidden;
    //white-space: nowrap;
    //text-overflow: ellipsis;
  }

  //&.ks-designer-node-root{
  //background: #645525;
  //.ant-card-body{
  //  background: #726334;
  //}
  //}
  &.ks-designer-node-select {
    background: #255464;

    .ant-card-body {
      background: #1c4654;
    }
  }

  &.ks-designer-node-precondition,
  &.ks-designer-node-parallel,
  &.ks-designer-node-sequence {
    background: #4c5a9d;

    .ant-card-body {
      background: #3f4d8d;
    }
  }

  &.ks-designer-node-action {
    background: #645525;

    .ant-card-body {
      background: #726334;
    }
  }
}

</style>