Initial commit

2026-02-08 17:57:40 +08:00
parent 294e5d687e
commit 82fcedfa97
15 changed files with 548 additions and 290 deletions
--- a/modeler/src/views/decision/builder/node.vue
+++ b/modeler/src/views/decision/builder/node.vue
@@ -1,13 +1,74 @@
 <template>
  <a-dropdown :trigger="['contextmenu']" @openChange="handleVisibleChange">
-    <a-card :class="['ks-designer-node', `ks-designer-node-${element?.type}`]" hoverable>
+    <a-card
+      :class="[
+        'ks-designer-node',
+        `ks-designer-${element?.category ?? 'model'}-node`
+      ]"
+      hoverable
+    >
      <template #title>
-        {{ element?.name ?? '-' }}
+        <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">
-        <p>{{ element?.description ?? '-' }}</p>
+        <div class="ks-designer-node-content">
+          <div
+            v-for="(item, index) in element?.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?.element?.children && element?.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">
@@ -24,37 +85,36 @@
 <script lang="ts">
 import { defineComponent, onMounted, onUnmounted, ref } from 'vue';
 import { elementProps } from './props';
-import type { SettingTaskNodeElement } from '../types';
+import type { ModelElement } from './element';
 import { DeleteOutlined, SettingOutlined } from '@ant-design/icons-vue';
 import type { Graph } from '@antv/x6';

 export default defineComponent({
-  name: 'SettingTaskNodeElement',
+  name: 'ModelElement',
  components: {
    SettingOutlined,
    DeleteOutlined,
  },
  props: elementProps,
  setup(_props) {
-    // 初始化 element，保证类型是 SettingTaskNodeElement 或 null
-    const element = ref<SettingTaskNodeElement | null>(
-      _props.node ? (_props.node.getData() as SettingTaskNodeElement) : null,
+    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 SettingTaskNodeElement;
+        element.value = _props.node.getData() as ModelElement;
      } else {
        element.value = null;
      }
-      console.info('handleDataChange', element.value);
      updateKey.value++;
    };

@@ -74,36 +134,24 @@ export default defineComponent({
      const graph = getGraph();
      if (graph) {
        try {
-          // 获取与该节点关联的所有边
+          // 先删除关联边
          const connectedEdges = graph.getConnectedEdges(_props.node);
-
-          // 先移除关联的边
-          connectedEdges.forEach(edge => {
-            graph.removeEdge(edge);
-          });
-
-          // 再移除节点本身
+          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);
    });

@@ -117,71 +165,168 @@ export default defineComponent({
 </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%;
+  background: linear-gradient(150deg, #093866 1%, #1f69b3 55%);
  border: 0;
-  border-radius: 2px;
+  border-radius: 8px;
  width: 100%;
  height: 100%;
  cursor: pointer;
+  position: relative; 

-  &: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;
+    height: 38px;
+    min-height: 38px;
    border-radius: 0;
    color: #ddd;
    font-size: 12px;
    font-weight: normal;
-    padding: 0 15px;
+    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% - 30px);
-    background: #24417e;
+    height: calc(100% - 38px);
    border-radius: 0;
    font-size: 12px;
-    padding: 15px !important;
-    //overflow: hidden;
-    //white-space: nowrap;
-    //text-overflow: ellipsis;
+    padding: 8px 15px;
+    overflow-y: auto;
+    border-top: 1px solid #195693;
  }

-  //&.ks-designer-node-root{
-    //background: #645525;
-    //.ant-card-body{
-    //  background: #726334;
-    //}
-  //}
-  &.ks-designer-node-select {
-    background: #255464;
-    .ant-card-body{
-      background: #1c4654;
+  &.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-node-precondition,
-  &.ks-designer-node-parallel,
-  &.ks-designer-node-sequence{
-    background: #4c5a9d;
-    .ant-card-body{
-      background: #3f4d8d;
+  &.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-node-action{
-    background: #645525;
-    .ant-card-body{
-      background: #726334;
+
+  &.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>