From beab2f672fa20c04b0b481d081cf68817035a5ab Mon Sep 17 00:00:00 2001
From: li-shengren-123456 <lishengren@h-partners.com>
Date: Tue, 11 Mar 2025 20:28:24 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E6=AF=94=E4=BE=8B=E5=B0=BA?=
 =?UTF-8?q?=E7=9B=B8=E5=85=B3=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../createapp/components/CustomControl.vue    |  5 ++-
 src/views/createapp/components/types.ts       |  4 ++
 src/views/createapp/components/workFlow.vue   | 37 +++++++++++++++----
 3 files changed, 37 insertions(+), 9 deletions(-)

diff --git a/src/views/createapp/components/CustomControl.vue b/src/views/createapp/components/CustomControl.vue
index 19dcf06..3d0cbea 100644
--- a/src/views/createapp/components/CustomControl.vue
+++ b/src/views/createapp/components/CustomControl.vue
@@ -38,16 +38,17 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue';
 import { IconChevronDown, IconChevronUp, IconSearch } from '@computing/opendesign-icons';
+import { DefaultViewPortZoom } from './types';
 interface ControlProps {
   handleChangeZoom: any;
   flowZoom: number;
   layoutGraph: any;
 }
 const props = withDefaults(defineProps<ControlProps>(), {});
-const zommChangeValue = ref(1);
+const zommChangeValue = ref(DefaultViewPortZoom);
 const dropDownVisible = ref(false);
 const handleSacl = zoomValue => {
-  zommChangeValue.value = Number(zoomValue.toFixed(0));
+  zommChangeValue.value = Number(zoomValue.toFixed(2));
   props.handleChangeZoom(zoomValue);
 };
 const handleVisibleChange = visible => {
diff --git a/src/views/createapp/components/types.ts b/src/views/createapp/components/types.ts
index a521125..b325750 100644
--- a/src/views/createapp/components/types.ts
+++ b/src/views/createapp/components/types.ts
@@ -35,6 +35,7 @@ export enum BranchSourceIdType {
   SOURCEB = "source_b",
 }
 
+// 这里配置的是各节点运行状态
 export const StatusInfoTitle = {
   default: '',
   success: '运行成功',
@@ -43,6 +44,9 @@ export const StatusInfoTitle = {
   pending: '运行中',
 };
 
+// 这里配置工作流画布默认的viewPort缩放级别
+export const DefaultViewPortZoom = 0.8;
+
 // 这里是对应的图标
 export const nodeTypeToIcon = {
   // 系统相关图标
diff --git a/src/views/createapp/components/workFlow.vue b/src/views/createapp/components/workFlow.vue
index 60b9fe1..fce652f 100644
--- a/src/views/createapp/components/workFlow.vue
+++ b/src/views/createapp/components/workFlow.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import '../../styles/workFlowArrange.scss';
-import { onMounted, ref, watch } from 'vue';
+import { onMounted, ref, watch, onUnmounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { ElTooltip, ElMessage } from 'element-plus';
 import { VueFlow, useVueFlow, Panel, Position } from '@vue-flow/core';
@@ -20,7 +20,7 @@ import EditYamlDrawer from './workFlowConfig/yamlEditDrawer.vue';
 import { api } from 'src/apis';
 import { BranchSourceIdType, StatusInfoTitle } from './types';
 import { useRoute } from 'vue-router';
-import { nodeTypeToIcon, iconTypeList, getSrcIcon } from './types';
+import { nodeTypeToIcon, iconTypeList, getSrcIcon, DefaultViewPortZoom } from './types';
 import yaml from 'js-yaml';
 import $bus from 'src/bus/index';
 
@@ -110,13 +110,21 @@ const initNodes = ref([
 const edges = ref([]);
 
 const handleChangeZoom = zoomValue => {
+  const viewPortX = Number(sessionStorage.getItem('workflowViewPortX')) || 0;
+  const viewPortY = Number(sessionStorage.getItem('workflowViewPortY')) || 20;
   setViewport({
     zoom: zoomValue,
-    x: 0,
-    y: 0,
+    x: viewPortX,
+    y: viewPortY,
   });
 };
 
+// 监听viewPort变化
+const viewportChangeEndFunc = (e) => {
+  sessionStorage.setItem('workflowViewPortX', e.x);
+  sessionStorage.setItem('workflowViewPortY', e.y);
+}
+
 watch(
   props,
   () => {
@@ -196,11 +204,16 @@ const closeDrawer = () => {
 
 const handleZommOnScroll = () => {
   const zoomObj = getViewport();
-  flowZoom.value = Number(zoomObj.zoom.toFixed(1));
+  flowZoom.value = Number(zoomObj.zoom.toFixed(2));
 };
 
 async function layoutGraph(direction) {
   nodes.value = layout(getNodes.value, getEdges.value, direction);
+  setViewport({
+    zoom: DefaultViewPortZoom,
+    x: 0,
+    y: 20,
+  });
 }
 
 const nodeAndLineConnection = () => {
@@ -260,7 +273,16 @@ onMounted(() => {
       activeName.value = [res[1]?.result.services[0]?.serviceId];
       activeNames.value = [res[1]?.result.services[0]?.serviceId];
     });
-});
+    handleChangeZoom(DefaultViewPortZoom);
+})
+
+
+
+onUnmounted(() => {
+  // 组件销毁时，清空sessionStorage的veiwport位置
+  sessionStorage.setItem('workflowViewPortX', '');
+  sessionStorage.setItem('workflowViewPortY', '');
+})
 
 // 过滤工作流接口返回的可拖拽节点
 const searchApiList = () => {
@@ -699,7 +721,7 @@ defineExpose({
       <VueFlow
         :nodes="nodes"
         :edges="edges"
-        :default-viewport="{ zoom: 0.8 }"
+        :default-viewport="{ zoom: DefaultViewPortZoom }"
         :min-zoom="0.5"
         :max-zoom="4"
         class="my-diagram-class"
@@ -708,6 +730,7 @@ defineExpose({
         @edges-change="edgesChange"
         @nodes-change="nodesChange"
         @paneScroll="handleZommOnScroll"
+        @viewportChangeEnd="viewportChangeEndFunc"
       >
         <Background pattern-color="#aaa" :gap="8" />
         <MiniMap :width="220" mask-color="#f4f6fa" :mask-stroke-width="250" />
-- 
Gitee