UPDATE: VERSION-20260326

This commit is contained in:
libertyspy
2026-03-26 22:05:31 +08:00
parent 18ccf490e4
commit 6656479327
8 changed files with 43 additions and 18 deletions

View File

@@ -46,6 +46,7 @@
<script lang="ts"> <script lang="ts">
import { defineComponent, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'; import { defineComponent, nextTick, onBeforeUnmount, onMounted, ref } from 'vue';
import {useRouter} from 'vue-router';
import { message } from 'ant-design-vue'; import { message } from 'ant-design-vue';
import { getTeleport } from '@antv/x6-vue-shape'; import { getTeleport } from '@antv/x6-vue-shape';
import { Graph, Node, type NodeProperties } from '@antv/x6'; import { Graph, Node, type NodeProperties } from '@antv/x6';
@@ -54,8 +55,9 @@ import { Wrapper } from '@/components/wrapper';
import { safePreventDefault, safeStopPropagation } from '@/utils/event'; import { safePreventDefault, safeStopPropagation } from '@/utils/event';
import Header from '../header.vue'; import Header from '../header.vue';
import type { PlatformWithComponents, Scenario } from './types'; import type { Scenario } from './types';
import { createGraphTaskElement, createLineOptions, type GraphContainer, type GraphTaskElement, resolveGraph, useGraphCanvas } from '../graph'; import type { PlatformWithComponents } from '../types';
import { createLineOptions, type GraphContainer, type GraphTaskElement, resolveGraph, useGraphCanvas } from '../graph';
import { registerScenarioElement } from './register'; import { registerScenarioElement } from './register';
import { createGraphScenarioElement, createGraphTaskElementFromScenario } from './utils'; import { createGraphScenarioElement, createGraphTaskElementFromScenario } from './utils';
@@ -63,7 +65,7 @@ import { createGraphScenarioElement, createGraphTaskElementFromScenario } from '
import PlatformCard from './platform-card.vue'; import PlatformCard from './platform-card.vue';
import NodesCard from './nodes-card.vue'; import NodesCard from './nodes-card.vue';
import { saveScenario } from './api'; import { saveScenario } from './api';
import {resolveConnectionRelation} from './relation' import { resolveConnectionRelation } from './relation';
const TeleportContainer = defineComponent(getTeleport()); const TeleportContainer = defineComponent(getTeleport());
@@ -82,6 +84,7 @@ export default defineComponent({
TeleportContainer, TeleportContainer,
}, },
setup() { setup() {
const router = useRouter();
const canvas = ref<HTMLDivElement | null>(null); const canvas = ref<HTMLDivElement | null>(null);
const graph = ref<Graph | null>(null); const graph = ref<Graph | null>(null);
const currentZoom = ref<number>(1); const currentZoom = ref<number>(1);
@@ -105,6 +108,19 @@ export default defineComponent({
resizeCanvas, resizeCanvas,
} = useGraphCanvas(); } = useGraphCanvas();
const destroy = ()=> {
window.removeEventListener('resize', handleResize);
if (graph.value) {
try {
graph.value.clearCells();
} catch (error) {
console.warn('销毁画布时出错:', error);
}
graph.value = null;
console.log('画布已销毁');
}
}
// 处理拖动开始 // 处理拖动开始
const handleDragStart = (nm: PlatformWithComponents) => { const handleDragStart = (nm: PlatformWithComponents) => {
draggedNodeData.value = nm; draggedNodeData.value = nm;
@@ -293,6 +309,14 @@ export default defineComponent({
currentScenarioEditing.value = null !== currentScenario.value; currentScenarioEditing.value = null !== currentScenario.value;
}); });
handleGraphEvent('node:dblclick', () => {
destroy()
window.location.href = '/app/decision/designer'
// router.push({
// path: '/app/decision/designer'
// })
});
handleGraphEvent('node:click', (args: any) => { handleGraphEvent('node:click', (args: any) => {
const node = args.node as Node<NodeProperties>; const node = args.node as Node<NodeProperties>;
const newElement = node.getData() as GraphTaskElement; const newElement = node.getData() as GraphTaskElement;
@@ -382,18 +406,7 @@ export default defineComponent({
}); });
// 清理 // 清理
onBeforeUnmount(() => { onBeforeUnmount(() => destroy());
window.removeEventListener('resize', handleResize);
if (graph.value) {
try {
graph.value.clearCells();
} catch (error) {
console.warn('销毁画布时出错:', error);
}
graph.value = null;
console.log('画布已销毁');
}
});
return { return {
scenariosCardRef, scenariosCardRef,

View File

@@ -8,7 +8,7 @@
*/ */
import type { ApiDataResponse, NullableString, PageableResponse } from '@/types'; import type { NullableString, PageableResponse } from '@/types';
import type { GraphContainer } from '../graph'; import type { GraphContainer } from '../graph';
import type { Platform, PlatformComponent } from '../types'; import type { Platform, PlatformComponent } from '../types';

View File

@@ -9,7 +9,7 @@
import type { GraphRect, GraphTaskElement } from '../graph'; import type { GraphRect, GraphTaskElement } from '../graph';
import { generateKey } from '@/utils/strings'; import { generateKey } from '@/utils/strings';
import type { PlatformWithComponents } from './types'; import type { PlatformWithComponents } from '../types';
export const createGraphTaskElementFromScenario = ( export const createGraphTaskElementFromScenario = (
platform: PlatformWithComponents, platform: PlatformWithComponents,
@@ -28,6 +28,7 @@ export const createGraphTaskElementFromScenario = (
template: 0, template: 0,
templateType: null, templateType: null,
category: null, category: null,
multiable: false,
group: null, group: null,
description: platform.description, description: platform.description,
order: 0, order: 0,

View File

@@ -69,11 +69,12 @@
</a-tabs> </a-tabs>
<a-tabs v-if="currentElement" v-model:activeKey="activeBottomTabsKey" class="ks-model-builder-tabs parameters-tabs"> <a-tabs v-if="currentElement?.multiable === true" v-model:activeKey="activeBottomTabsKey" class="ks-model-builder-tabs parameters-tabs">
<template #leftExtra> <template #leftExtra>
<span class="ks-model-builder-title-icon icon-input"></span> <span class="ks-model-builder-title-icon icon-input"></span>
</template> </template>
<a-tab-pane key="1" tab="节点变量"> <a-tab-pane key="1" tab="节点变量">
<a-form <a-form
v-if="currentElement.parameters && currentElement.parameters.length > 0" v-if="currentElement.parameters && currentElement.parameters.length > 0"
autocomplete="off" autocomplete="off"
@@ -217,6 +218,7 @@ export default defineComponent({
}; };
const updateNode = () => { const updateNode = () => {
console.error('currentElement.value',currentElement.value)
if (currentNode.value && currentElement.value) { if (currentNode.value && currentElement.value) {
// 深拷贝当前元素数据 // 深拷贝当前元素数据
const newElement = JSON.parse(JSON.stringify(currentElement.value)) as GraphTaskElement; const newElement = JSON.parse(JSON.stringify(currentElement.value)) as GraphTaskElement;

View File

@@ -19,6 +19,7 @@ export interface NodeTemplate {
templateType: NullableString; templateType: NullableString;
englishName: NullableString; englishName: NullableString;
parameters: ElementParameter[], parameters: ElementParameter[],
multiable?: boolean,
} }
export interface NodeDragTemplate extends NodeTemplate { export interface NodeDragTemplate extends NodeTemplate {

View File

@@ -27,6 +27,7 @@ export const createGraphTaskElementFromTemplate = (
category: template.type, category: template.type,
group: template.group, group: template.group,
description: template.description, description: template.description,
multiable: template.multiable === true,
order: 0, order: 0,
position: { position: {
x: realRect.x ?? 0, x: realRect.x ?? 0,

View File

@@ -67,6 +67,7 @@ export interface ElementParameter {
defaultValue: NullableString, defaultValue: NullableString,
description: NullableString, description: NullableString,
templateType: NullableString, templateType: NullableString,
groupIndex: number,
} }
@@ -84,6 +85,7 @@ export interface GraphTaskElement extends GraphBaseElement {
inputs: any; inputs: any;
outputs: any; outputs: any;
order: number; order: number;
multiable:boolean,
variables: ElementVariable[]; variables: ElementVariable[];
parameters: ElementParameter[]; parameters: ElementParameter[];
children?: GraphTaskElement[], children?: GraphTaskElement[],

View File

@@ -183,6 +183,11 @@ export const useGraphCanvas = (readonly: boolean = false): UseGraphCanvas => {
emitGraphEvent('node:click', ctx); emitGraphEvent('node:click', ctx);
}); });
graph.value.on('node:dblclick', (ctx: NodeViewPositionEventArgs<Dom.ClickEvent>) => {
console.info('node:dblclick', ctx);
emitGraphEvent('node:dblclick', ctx);
});
// 监听节点选中事件 // 监听节点选中事件
graph.value.on('node:selected', ({ node }) => { graph.value.on('node:selected', ({ node }) => {
console.info('node select', node); console.info('node select', node);