From 7f269dc4d01bbd869881f50e8ff61cf698744dcd Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Mon, 3 Jun 2024 19:10:38 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=BC=96=E6=8E=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../workflow/common/NodeControl.vue           | 28 +++++++++++++
 .../workflow/common/node-container/index.vue  |  1 +
 ui/src/components/workflow/index.vue          | 42 +++++++++++++------
 .../workflow/nodes/base-node/index.vue        |  3 +-
 .../workflow/nodes/start-node/index.vue       | 36 ++++++++--------
 ui/src/views/application-workflow/index.vue   |  1 -
 6 files changed, 78 insertions(+), 33 deletions(-)
 create mode 100644 ui/src/components/workflow/common/NodeControl.vue

diff --git a/ui/src/components/workflow/common/NodeControl.vue b/ui/src/components/workflow/common/NodeControl.vue
new file mode 100644
index 000000000..137bcca36
--- /dev/null
+++ b/ui/src/components/workflow/common/NodeControl.vue
@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <el-button-group>
+      <el-button type="plain" size="small" @click="$_zoomIn">放大</el-button>
+      <el-button type="plain" size="small" @click="$_zoomOut">缩小</el-button>
+      <el-button type="plain" size="small" @click="$_reset">还原(大小&定位)</el-button>
+    </el-button-group>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, nextTick, computed, watch, reactive } from 'vue'
+const props = defineProps({
+  lf: Object || String
+})
+
+function $_zoomIn() {
+  props.lf?.zoom(true)
+}
+function $_zoomOut() {
+  props.lf?.zoom(false)
+}
+function $_reset() {
+  props.lf?.resetZoom()
+  props.lf?.resetTranslate()
+}
+</script>
+<style scoped></style>
diff --git a/ui/src/components/workflow/common/node-container/index.vue b/ui/src/components/workflow/common/node-container/index.vue
index 55d42ffe4..af18ac548 100644
--- a/ui/src/components/workflow/common/node-container/index.vue
+++ b/ui/src/components/workflow/common/node-container/index.vue
@@ -28,6 +28,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { iconComponent } from '../../menu-data'
+
 const height = ref<{
   stepContainerHeight: number
   inputContainerHeight: number
diff --git a/ui/src/components/workflow/index.vue b/ui/src/components/workflow/index.vue
index de58d550c..965b66894 100644
--- a/ui/src/components/workflow/index.vue
+++ b/ui/src/components/workflow/index.vue
@@ -1,13 +1,18 @@
 <template>
   <!-- <button @click="validate">点击校验</button>
   <button @click="getGraphData">点击获取流程数据</button> -->
-  <div className="helloworld-app sql" style="height: 100%; width: 100%" id="container"></div>
+  <div className="workflow-app" id="container">
+    <!-- 辅助工具栏 -->
+    <Control class="control" v-if="lf" :lf="lf"></Control>
+  </div>
 </template>
 <script setup lang="ts">
 import LogicFlow from '@logicflow/core'
 import { ref, onMounted } from 'vue'
 import AppEdge from './common/edge/index'
+import Control from './common/NodeControl.vue'
 import { AppMenu } from './common/menu/index'
+
 import '@logicflow/extension/lib/style/index.css'
 import '@logicflow/core/dist/style/index.css'
 const nodes: any = import.meta.glob('./nodes/**/index.ts', { eager: true })
@@ -31,7 +36,7 @@ const graphData = {
     {
       id: '92a94b25-453d-4a00-aa26-9fed9b487e08',
       type: 'base-node',
-      x: 0,
+      x: 180,
       y: 250,
       properties: {
         height: 200,
@@ -49,8 +54,8 @@ const graphData = {
     {
       id: '34902d3d-a3ff-497f-b8e1-0c34a44d7dd4',
       type: 'start-node',
-      x: 0,
-      y: 753,
+      x: 180,
+      y: 623,
       properties: {
         height: 200,
         stepName: '开始',
@@ -155,7 +160,7 @@ onMounted(() => {
 
     lf.value.render(graphData)
 
-    lf.value.translateCenter()
+    // lf.value.translate(0, 0)
   }
 })
 const validate = () => {
@@ -185,13 +190,24 @@ defineExpose({
 })
 </script>
 <style lang="scss">
-.lf-dnd-text {
-  width: 200px;
-}
-.lf-dnd-shape {
-  height: 50px;
-}
-.lf-node-selected {
-  border: 1px solid #000;
+.workflow-app {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  .control {
+    position: absolute;
+    bottom: 50px;
+    right: 50px;
+    z-index: 2;
+  }
 }
+// .lf-dnd-text {
+//   width: 200px;
+// }
+// .lf-dnd-shape {
+//   height: 50px;
+// }
+// .lf-node-selected {
+//   border: 1px solid #000;
+// }
 </style>
diff --git a/ui/src/components/workflow/nodes/base-node/index.vue b/ui/src/components/workflow/nodes/base-node/index.vue
index 40c40ee91..5f6a74774 100644
--- a/ui/src/components/workflow/nodes/base-node/index.vue
+++ b/ui/src/components/workflow/nodes/base-node/index.vue
@@ -52,6 +52,7 @@ import NodeContainer from '@/components/workflow/common/node-container/index.vue
 import type { FormInstance } from 'element-plus'
 import { ref, computed, onMounted } from 'vue'
 import { MdEditor } from 'md-editor-v3'
+const props = defineProps<{ nodeModel: any }>()
 
 const chat_data = computed({
   get: () => {
@@ -71,7 +72,7 @@ const chat_data = computed({
     props.nodeModel.properties.node_data = value
   }
 })
-const props = defineProps<{ nodeModel: any }>()
+
 const handleFocus = () => {
   props.nodeModel.isSelected = false
 }
diff --git a/ui/src/components/workflow/nodes/start-node/index.vue b/ui/src/components/workflow/nodes/start-node/index.vue
index e221b6cfa..341c324a6 100644
--- a/ui/src/components/workflow/nodes/start-node/index.vue
+++ b/ui/src/components/workflow/nodes/start-node/index.vue
@@ -12,24 +12,24 @@ import type { FormInstance } from 'element-plus'
 import { ref, computed, onMounted } from 'vue'
 import { MdEditor } from 'md-editor-v3'
 
-const chat_data = computed({
-  get: () => {
-    if (props.nodeModel.properties.node_data) {
-      return props.nodeModel.properties.node_data
-    } else {
-      props.nodeModel.properties.node_data = {
-        name: '',
-        desc: '',
-        prologue:
-          '您好，我是 MaxKB 小助手，您可以向我提出 MaxKB 使用问题。\n- MaxKB 主要功能有什么？\n- MaxKB 支持哪些大语言模型？\n- MaxKB 支持哪些文档类型？'
-      }
-    }
-    return props.nodeModel.properties.node_data
-  },
-  set: (value) => {
-    props.nodeModel.properties.node_data = value
-  }
-})
+// const chat_data = computed({
+//   get: () => {
+//     if (props.nodeModel.properties.node_data) {
+//       return props.nodeModel.properties.node_data
+//     } else {
+//       props.nodeModel.properties.node_data = {
+//         name: '',
+//         desc: '',
+//         prologue:
+//           '您好，我是 MaxKB 小助手，您可以向我提出 MaxKB 使用问题。\n- MaxKB 主要功能有什么？\n- MaxKB 支持哪些大语言模型？\n- MaxKB 支持哪些文档类型？'
+//       }
+//     }
+//     return props.nodeModel.properties.node_data
+//   },
+//   set: (value) => {
+//     props.nodeModel.properties.node_data = value
+//   }
+// })
 const props = defineProps<{ nodeModel: any }>()
 const handleFocus = () => {
   props.nodeModel.isSelected = false
diff --git a/ui/src/views/application-workflow/index.vue b/ui/src/views/application-workflow/index.vue
index 1ac9e9220..1c1395ebb 100644
--- a/ui/src/views/application-workflow/index.vue
+++ b/ui/src/views/application-workflow/index.vue
@@ -70,7 +70,6 @@ onBeforeUnmount(() => {})
     background: #ffffff;
   }
   .workflow-main {
-    width: 100vw;
     height: calc(100vh - var(--app-header-height) - 70px);
   }
   .workflow-dropdown-menu {