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

<template>
  <a-dropdown :trigger="['contextmenu']" @openChange="handleVisibleChange">
    <a-card
      :class="[
        'ks-designer-node',
        `ks-designer-${element?.category ?? 'model'}-node`
      ]"
      hoverable
    >
      <template #title>
        <a-space>
          <span class="ks-designer-node-icon"></span>
          <span class="ks-designer-node-title">{{ element?.name ?? '-' }}</span>
        </a-space>
      </template>

      <!-- 节点内容区域 -->
      <div class="w-full">
        <div class="ks-designer-node-content">
          <div
            v-for="(item, index) in element?.children || []"
            :key="item.id || index"
            class="ks-designer-node-row"
          >
            <div
              :data-port="`in-${item.id || index}`"
              :title="`入桩: ${item.name}`"
              class="port port-in"
              magnet="passive"
            ></div>

            <!-- child名称 -->
            <div class="ks-designer-node-name">
              {{ item.name }}
            </div>

            <!-- 右侧出桩：只能作为连线源 -->
            <div
              :data-port="`out-${item.id || index}`"
              :title="`出桩: ${item.name}`"
              class="port port-out"
              magnet="active"
            ></div>
          </div>

          <div v-if="!(element?.children && element?.children?.length > 0)" class="ks-designer-node-row">
            <div class="port port-in" data-port="in-0" magnet="passive"></div>
            <div class="ks-designer-node-name" v-if="element?.category !== 'component'">
              {{ element?.name ?? '-' }}
            </div>
            <div class="ks-designer-node-name" v-else>
              <p>隐藏纬度: {{ element?.parameters?.hiddenLatitude ?? '-' }}</p>
              <p>激活函数: {{ element?.parameters?.activationFunction ?? '-' }}</p>
            </div>
            <div class="port port-out" data-port="out-0" magnet="active"></div>
          </div>
        </div>
      </div>

<!--      <div class="w-full" v-else>-->
<!--        <div class="ks-designer-node-content">-->
<!--        <div class="port port-in" data-port="in-0" magnet="passive"></div>-->
<!--          <div class="ks-designer-node-name">-->
<!--            <p>隐藏纬度: {{ element?.parameters?.hiddenLatitude ?? '-' }}</p>-->
<!--            <p>激活函数: {{ element?.parameters?.activationFunction ?? '-' }}</p>-->
<!--          </div>-->
<!--        <div class="port port-out" data-port="out-0" magnet="active"></div>-->
<!--        </div>-->
<!--      </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 { ModelElement } from './element';
import { DeleteOutlined, SettingOutlined } from '@ant-design/icons-vue';
import type { Graph } from '@antv/x6';

export default defineComponent({
  name: 'ModelElement',
  components: {
    SettingOutlined,
    DeleteOutlined,
  },
  props: elementProps,
  setup(_props) {
    const element = ref<ModelElement | null>(
      _props.node ? (_props.node.getData() as ModelElement) : 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 ModelElement;
      } else {
        element.value = null;
      }
      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);
        }
      }
      isMenuVisible.value = false;
    };

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

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

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

<style lang="less">
.ks-designer-node {
  background: linear-gradient(150deg, #093866 1%, #1f69b3 55%);
  border: 0;
  border-radius: 8px;
  width: 100%;
  height: 100%;
  cursor: pointer;
  position: relative; 

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

  .ks-designer-node-icon {
    width: 15px;
    height: 15px;
    display: block;
    position: absolute;
    left: 8px;
    top: 13px;
    background: url('@/assets/icons/model-4.svg') center / 100% 100%;
  }

  .ks-designer-node-title {
    font-size: 13px;
  }

  .ant-card-body {
    color: #fff;
    height: calc(100% - 38px);
    border-radius: 0;
    font-size: 12px;
    padding: 8px 15px;
    overflow-y: auto;
    border-top: 1px solid #195693;
  }

  &.ks-designer-task-node {
    background: linear-gradient(150deg, #20421b 1%, #4a6646 55%);

    .ant-card-body {
      border-top: 1px solid #466741;
    }

    .ks-designer-node-icon {
      background: url('@/assets/icons/m-02.png') center / 100% 100%;
    }
  }
  &.ks-designer-input-node {
    background: linear-gradient(150deg, #083058 1%, #1e5d9b 55%);

    .ant-card-body {
      border-top: 1px solid #105ca7;
    }

    .ks-designer-node-icon {
      background: url('@/assets/icons/icon-model-input.png') center / 100% 100%;
    }
  }

  &.ks-designer-action-node {
    background: linear-gradient(150deg, #343207 1%, #485010 55%);

    .ant-card-body {
      border-top: 1px solid #59550e;
    }

    .ks-designer-node-icon {
      background: url('@/assets/icons/bg-fk-point.png') center / 100% 100%;
    }
  }
  &.ks-designer-component-node {
    background: linear-gradient(150deg, #06226b 1%, #1a43a7 55%);

    .ant-card-body {
      border-top: 1px solid #26448c;
    }
  }

  &.ks-designer-control-node {
    background: linear-gradient(150deg, #1d4f32 1%, #326a5d 55%);

    .ant-card-body {
      border-top: 1px solid #326a5d;
    }

    .ks-designer-node-icon {
      background: url('@/assets/icons/bg-model-builder-card-title.png') center / 100% 100%;
    }
  }

  // 连接桩容器样式
  .ks-designer-node-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px; // 每个child行之间的间距
  }

  // 每个child行（包含左右桩+文本）
  .ks-designer-node-row {
    width: 100%;
    display: flex;
    align-items: center;
    position: relative;
    min-height: 24px; // 固定行高，保证桩对齐
  }

  // 连接桩基础样式
  .port {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    cursor: crosshair;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgb(74 114 214 / 80%);
    z-index: 10; // 确保桩在最上层
    // X6 标记为可连线的磁体
    magnet: true;
  }

  // 左侧入桩样式
  .port-in {
    background-color: #093866; // 青色：入桩
    margin-right: 8px; // 与文本的间距
    //border: 1px solid #093866;
    // X6 只能作为连线目标（入）
    magnet: passive;
    box-shadow: none;
    width: 20px;
    height: 20px;
    display: block;
    background: url('@/assets/icons/point.svg') center / 100% 100%;
  }

  // 右侧出桩样式
  .port-out {
    margin-left: 8px; // 与文本的间距
    margin-right: 5px;
    // X6 只能作为连线源（出）
    magnet: active;
    box-shadow: none;
    width: 20px;
    height: 20px;
    display: block;
    background: url('@/assets/icons/arrow-right.svg') center / 100% 100%;
  }

  // 节点文本样式
  .ks-designer-node-name {
    flex: 1; // 占满中间空间
    line-height: 24px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>