From c986713d84c52c93aa68e6b4f28f24bfa35cc38d Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Thu, 6 Jun 2024 16:36:03 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=B7=A5=E4=BD=9C=E7=BC=96=E6=8E=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/components/workflow/index.vue          | 237 -------------
 ui/src/views/application-workflow/index.vue   |   7 +-
 ui/src/workflow/common/NodeCascader.vue       |  10 +
 .../common/NodeContainer.vue}                 |   2 +-
 .../workflow/common/NodeControl.vue           |   0
 .../index.ts => workflow/common/app-node.ts}  |   2 +-
 .../menu-data.ts => workflow/common/data.ts}  |  64 +++-
 .../edge/index.ts => workflow/common/edge.ts} |   0
 .../workflow/icons/ai-chat-node-icon.vue      |   0
 .../workflow/icons/base-node-icon.vue         |   0
 .../workflow/icons/condition-node-icon.vue    |   0
 .../icons/search-dataset-node-icon.vue        |   0
 .../workflow/icons/start-node-icon.vue        |   0
 ui/src/workflow/icons/utils.ts                |   5 +
 ui/src/workflow/index.vue                     | 322 ++++++++++++++++++
 .../workflow/nodes/ai-chat-node/index.ts      |   2 +-
 .../workflow/nodes/ai-chat-node/index.vue     |   8 +-
 .../workflow/nodes/base-node/index.ts         |   2 +-
 .../workflow/nodes/base-node/index.vue        |   8 +-
 .../workflow/nodes/condition-node/index.ts    |   2 +-
 .../workflow/nodes/condition-node/index.vue   |  16 +-
 .../nodes/search-dataset-node/index.ts        |   2 +-
 .../nodes/search-dataset-node/index.vue       |   2 +-
 .../workflow/nodes/start-node/index.ts        |   2 +-
 .../workflow/nodes/start-node/index.vue       |   4 +-
 25 files changed, 420 insertions(+), 277 deletions(-)
 delete mode 100644 ui/src/components/workflow/index.vue
 create mode 100644 ui/src/workflow/common/NodeCascader.vue
 rename ui/src/{components/workflow/common/node-container/index.vue => workflow/common/NodeContainer.vue} (98%)
 rename ui/src/{components => }/workflow/common/NodeControl.vue (100%)
 rename ui/src/{components/workflow/common/app-node/index.ts => workflow/common/app-node.ts} (99%)
 rename ui/src/{components/workflow/menu-data.ts => workflow/common/data.ts} (53%)
 rename ui/src/{components/workflow/common/edge/index.ts => workflow/common/edge.ts} (100%)
 rename ui/src/{components => }/workflow/icons/ai-chat-node-icon.vue (100%)
 rename ui/src/{components => }/workflow/icons/base-node-icon.vue (100%)
 rename ui/src/{components => }/workflow/icons/condition-node-icon.vue (100%)
 rename ui/src/{components => }/workflow/icons/search-dataset-node-icon.vue (100%)
 rename ui/src/{components => }/workflow/icons/start-node-icon.vue (100%)
 create mode 100644 ui/src/workflow/icons/utils.ts
 create mode 100644 ui/src/workflow/index.vue
 rename ui/src/{components => }/workflow/nodes/ai-chat-node/index.ts (72%)
 rename ui/src/{components => }/workflow/nodes/ai-chat-node/index.vue (89%)
 rename ui/src/{components => }/workflow/nodes/base-node/index.ts (71%)
 rename ui/src/{components => }/workflow/nodes/base-node/index.vue (91%)
 rename ui/src/{components => }/workflow/nodes/condition-node/index.ts (73%)
 rename ui/src/{components => }/workflow/nodes/condition-node/index.vue (93%)
 rename ui/src/{components => }/workflow/nodes/search-dataset-node/index.ts (75%)
 rename ui/src/{components => }/workflow/nodes/search-dataset-node/index.vue (98%)
 rename ui/src/{components => }/workflow/nodes/start-node/index.ts (72%)
 rename ui/src/{components => }/workflow/nodes/start-node/index.vue (87%)

diff --git a/ui/src/components/workflow/index.vue b/ui/src/components/workflow/index.vue
deleted file mode 100644
index 75222edbb..000000000
--- a/ui/src/components/workflow/index.vue
+++ /dev/null
@@ -1,237 +0,0 @@
-<template>
-  <div className="workflow-app" id="container"></div>
-  <!-- 辅助工具栏 -->
-  <Control class="workflow-control" v-if="lf" :lf="lf"></Control>
-</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 '@logicflow/extension/lib/style/index.css'
-import '@logicflow/core/dist/style/index.css'
-const nodes: any = import.meta.glob('./nodes/**/index.ts', { eager: true })
-
-defineOptions({ name: 'WorkFlow' })
-
-type ShapeItem = {
-  type?: string
-  text?: string
-  icon?: string
-  label?: string
-  className?: string
-  disabled?: boolean
-  properties?: Record<string, any>
-  callback?: (lf: LogicFlow, container?: HTMLElement) => void
-}
-
-const graphData = {
-  nodes: [
-    {
-      id: '92a94b25-453d-4a00-aa26-9fed9b487e08',
-      type: 'base-node',
-      x: 180,
-      y: 250,
-      properties: {
-        height: 200,
-        stepName: '基本信息',
-        // input: [{ key: '输入' }],
-        // output: [{ key: '输出' }],
-        node_data: {
-          name: '2222',
-          desc: '',
-          prologue:
-            '您好，我是 MaxKB 小助手，您可以向我提出 MaxKB 使用问题。\n- MaxKB 主要功能有什么？\n- MaxKB 支持哪些大语言模型？\n- MaxKB 支持哪些文档类型？'
-        }
-      }
-    },
-    {
-      id: '34902d3d-a3ff-497f-b8e1-0c34a44d7dd4',
-      type: 'start-node',
-      x: 180,
-      y: 723,
-      properties: {
-        height: 200,
-        stepName: '开始',
-        input: [{ key: '输入' }],
-        output: [{ key: '输出' }]
-        // node_data: { model: 'shanghai', name: '222222' }
-      }
-    },
-    {
-      id: '34902d3d-a3ff-497f-b8e1-0c34a44d7dd5',
-      type: 'search-dataset-node',
-      x: 600,
-      y: 250,
-      properties: {
-        height: 200,
-        stepName: '知识库检索',
-        input: [{ key: '输入' }],
-        output: [{ key: '输出' }]
-        // node_data: { model: 'shanghai', name: '222222' }
-      }
-    },
-    {
-      id: '34902d3d-a3ff-497f-b8e1-0c34a44d7dd6',
-      type: 'condition-node',
-      x: 600,
-      y: 850,
-      properties: {
-        height: 200,
-        width: 600,
-        stepName: '判断器',
-        input: [{ key: '输入' }],
-        output: [{ key: '输出' }]
-        // node_data: { model: 'shanghai', name: '222222' }
-      }
-    }
-  ]
-  // edges: [
-  //   {
-  //     id: 'bc7297fa-2409-4c85-9a4d-3d74c9c1e30f',
-  //     type: 'app-edge',
-  //     sourceNodeId: '92a94b25-453d-4a00-aa26-9fed9b487e08',
-  //     targetNodeId: '34902d3d-a3ff-497f-b8e1-0c34a44d7dd4',
-  //     startPoint: { x: 230, y: 333.000005 },
-  //     endPoint: { x: -97, y: 596.111105 },
-  //     properties: {},
-  //     pointsList: [
-  //       { x: 230, y: 333.000005 },
-  //       { x: 340, y: 333.000005 },
-  //       { x: -207, y: 596.111105 },
-  //       { x: -97, y: 596.111105 }
-  //     ],
-  //     sourceAnchorId: '92a94b25-453d-4a00-aa26-9fed9b487e08_输出_right',
-  //     targetAnchorId: '34902d3d-a3ff-497f-b8e1-0c34a44d7dd4_输入_left'
-  //   },
-  //   {
-  //     id: '9f5740ce-b55e-42d4-90a2-a06f34d6f5ef',
-  //     type: 'app-edge',
-  //     sourceNodeId: '92a94b25-453d-4a00-aa26-9fed9b487e08',
-  //     targetNodeId: '34902d3d-a3ff-497f-b8e1-0c34a44d7dd4',
-  //     startPoint: { x: 230, y: 333.000005 },
-  //     endPoint: { x: -97, y: 596.111105 },
-  //     properties: {},
-  //     pointsList: [
-  //       { x: 230, y: 333.000005 },
-  //       { x: 340, y: 333.000005 },
-  //       { x: -207, y: 596.111105 },
-  //       { x: -97, y: 596.111105 }
-  //     ],
-  //     sourceAnchorId: '92a94b25-453d-4a00-aa26-9fed9b487e08_输出_right',
-  //     targetAnchorId: '34902d3d-a3ff-497f-b8e1-0c34a44d7dd4_输入_left'
-  //   }
-  // ]
-}
-const lf = ref()
-
-onMounted(() => {
-  const container: any = document.querySelector('#container')
-  if (container) {
-    lf.value = new LogicFlow({
-      textEdit: false,
-      background: {
-        backgroundColor: '#f5f6f7'
-      },
-      grid: {
-        size: 10,
-        type: 'dot',
-        config: {
-          color: '#DEE0E3',
-          thickness: 1
-        }
-      },
-      // keyboard: {
-      //   enabled: true,
-      //   shortcuts: [
-      //     {
-      //       keys: ['backspace'],
-      //       callback: () => {
-      //         const elements = lf.value.getSelectElements(true)
-      //         if (
-      //           (elements.edges && elements.edges.length > 0) ||
-      //           (elements.nodes && elements.nodes.length > 0)
-      //         ) {
-      //           const r = window.confirm('确定要删除吗？')
-      //           if (r) {
-      //             lf.value.clearSelectElements()
-      //             elements.edges.forEach((edge: any) => {
-      //               lf.value.deleteEdge(edge.id)
-      //             })
-      //             elements.nodes.forEach((node: any) => {
-      //               lf.value.deleteNode(node.id)
-      //             })
-      //           }
-      //         }
-      //       }
-      //     }
-      //   ]
-      // },
-      isSilentMode: false,
-      container: container
-    })
-    lf.value.setTheme({
-      bezier: {
-        stroke: '#afafaf',
-        strokeWidth: 1
-      }
-    })
-
-    lf.value.batchRegister([...Object.keys(nodes).map((key) => nodes[key].default), AppEdge])
-    lf.value.setDefaultEdgeType('app-edge')
-
-    lf.value.render(graphData)
-
-    // lf.value.translate(0, 0)
-  }
-})
-const validate = () => {
-  lf.value.graphModel.nodes.forEach((element: any) => {
-    element?.validate?.()
-  })
-}
-const getGraphData = () => {
-  console.log(JSON.stringify(lf.value.getGraphData()))
-}
-
-const onmousedown = (shapeItem: ShapeItem) => {
-  if (shapeItem.type) {
-    lf.value.dnd.startDrag({
-      type: shapeItem.type,
-      properties: shapeItem.properties,
-      icon: shapeItem.icon
-    })
-  }
-  if (shapeItem.callback) {
-    shapeItem.callback(lf.value)
-  }
-}
-
-defineExpose({
-  onmousedown,
-  validate,
-  getGraphData
-})
-</script>
-<style lang="scss">
-.workflow-app {
-  width: 100%;
-  height: 100%;
-  position: relative;
-}
-.workflow-control {
-  position: absolute;
-  bottom: 24px;
-  left: 24px;
-  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/views/application-workflow/index.vue b/ui/src/views/application-workflow/index.vue
index f23839256..8233a0964 100644
--- a/ui/src/views/application-workflow/index.vue
+++ b/ui/src/views/application-workflow/index.vue
@@ -19,7 +19,7 @@
     <el-collapse-transition>
       <div v-show="showPopover" class="workflow-dropdown-menu border border-r-4">
         <h5 class="title">基础组件</h5>
-        <template v-for="(item, index) in shapeList" :key="index">
+        <template v-for="(item, index) in menuNodes" :key="index">
           <div class="workflow-dropdown-item cursor flex p-8-12" @mousedown="onmousedown(item)">
             <component :is="iconComponent(item.icon)" class="mr-8 mt-4" :size="32" />
             <div class="pre-line">
@@ -37,8 +37,9 @@
 </template>
 <script setup lang="ts">
 import { ref, onMounted, onBeforeUnmount, computed } from 'vue'
-import Workflow from '@/components/workflow/index.vue'
-import { shapeList, iconComponent } from '@/components/workflow/menu-data'
+import Workflow from '@/workflow/index.vue'
+import { menuNodes } from '@/workflow/common/data.ts'
+import { iconComponent } from '@/workflow/icons/utils.ts'
 
 const workflowRef = ref()
 
diff --git a/ui/src/workflow/common/NodeCascader.vue b/ui/src/workflow/common/NodeCascader.vue
new file mode 100644
index 000000000..e3bfc3f14
--- /dev/null
+++ b/ui/src/workflow/common/NodeCascader.vue
@@ -0,0 +1,10 @@
+<template>
+  <div></div>
+</template>
+
+<script setup lang="ts">
+// const props = defineProps({
+//   lf: Object || String || null
+// })
+</script>
+<style scoped></style>
diff --git a/ui/src/components/workflow/common/node-container/index.vue b/ui/src/workflow/common/NodeContainer.vue
similarity index 98%
rename from ui/src/components/workflow/common/node-container/index.vue
rename to ui/src/workflow/common/NodeContainer.vue
index 3de0bed6a..e49f4ac61 100644
--- a/ui/src/components/workflow/common/node-container/index.vue
+++ b/ui/src/workflow/common/NodeContainer.vue
@@ -27,7 +27,7 @@
 </template>
 <script setup lang="ts">
 import { ref } from 'vue'
-import { iconComponent } from '../../menu-data'
+import { iconComponent } from '../icons/utils'
 
 const height = ref<{
   stepContainerHeight: number
diff --git a/ui/src/components/workflow/common/NodeControl.vue b/ui/src/workflow/common/NodeControl.vue
similarity index 100%
rename from ui/src/components/workflow/common/NodeControl.vue
rename to ui/src/workflow/common/NodeControl.vue
diff --git a/ui/src/components/workflow/common/app-node/index.ts b/ui/src/workflow/common/app-node.ts
similarity index 99%
rename from ui/src/components/workflow/common/app-node/index.ts
rename to ui/src/workflow/common/app-node.ts
index f00e0a612..8b70a27ca 100644
--- a/ui/src/components/workflow/common/app-node/index.ts
+++ b/ui/src/workflow/common/app-node.ts
@@ -51,7 +51,7 @@ class AppNodeModel extends HtmlNodeModel {
    * 给model自定义添加字段方法
    */
   addField(item: any) {
-    this.properties.fields.unshift(item)
+    this.properties.output.unshift(item)
     this.setAttributes()
     // 为了保持节点顶部位置不变，在节点变化后，对节点进行一个位移,位移距离为添加高度的一半。
     this.move(0, 24 / 2)
diff --git a/ui/src/components/workflow/menu-data.ts b/ui/src/workflow/common/data.ts
similarity index 53%
rename from ui/src/components/workflow/menu-data.ts
rename to ui/src/workflow/common/data.ts
index 768c8374d..e7871c197 100644
--- a/ui/src/components/workflow/menu-data.ts
+++ b/ui/src/workflow/common/data.ts
@@ -1,13 +1,43 @@
-const icons: any = import.meta.glob('./icons/**.vue', { eager: true })
-function iconComponent(name: string) {
-  const url = `./icons/${name}.vue`
-  return icons[url]?.default || null
-}
 /**
  * 说明
  * type 与 nodes 文件对应
  */
-const shapeList = [
+export const baseNodes = [
+  {
+    id: 'base-node',
+    type: 'base-node',
+    x: 200,
+    y: 270,
+    properties: {
+      height: 200,
+      stepName: '基本信息',
+      node_data: {
+        name: '',
+        desc: '',
+        prologue: ''
+      }
+    }
+  },
+  {
+    id: 'start-node',
+    type: 'start-node',
+    x: 180,
+    y: 720,
+    properties: {
+      height: 200,
+      stepName: '开始',
+      output: [{ key: '' }],
+      fields: [
+        {
+          label: '用户问题',
+          value: 'question'
+        }
+      ]
+    }
+  }
+]
+
+export const menuNodes = [
   {
     type: 'ai-chat-node',
     text: '与 AI 大模型进行对话',
@@ -18,12 +48,18 @@ const shapeList = [
       stepName: 'AI 对话',
       input: [
         {
-          key: '输入'
+          key: ''
         }
       ],
       output: [
         {
-          key: '输出'
+          key: ''
+        }
+      ],
+      fields: [
+        {
+          label: 'AI 回答内容',
+          value: 'content'
         }
       ]
     }
@@ -45,6 +81,16 @@ const shapeList = [
         {
           key: '输出'
         }
+      ],
+      fields: [
+        {
+          label: '检索结果',
+          value: 'data'
+        },
+        {
+          label: '满足直接回答的分段内容',
+          value: 'paragraph'
+        }
       ]
     }
   },
@@ -69,5 +115,3 @@ const shapeList = [
     }
   }
 ]
-
-export { shapeList, iconComponent }
diff --git a/ui/src/components/workflow/common/edge/index.ts b/ui/src/workflow/common/edge.ts
similarity index 100%
rename from ui/src/components/workflow/common/edge/index.ts
rename to ui/src/workflow/common/edge.ts
diff --git a/ui/src/components/workflow/icons/ai-chat-node-icon.vue b/ui/src/workflow/icons/ai-chat-node-icon.vue
similarity index 100%
rename from ui/src/components/workflow/icons/ai-chat-node-icon.vue
rename to ui/src/workflow/icons/ai-chat-node-icon.vue
diff --git a/ui/src/components/workflow/icons/base-node-icon.vue b/ui/src/workflow/icons/base-node-icon.vue
similarity index 100%
rename from ui/src/components/workflow/icons/base-node-icon.vue
rename to ui/src/workflow/icons/base-node-icon.vue
diff --git a/ui/src/components/workflow/icons/condition-node-icon.vue b/ui/src/workflow/icons/condition-node-icon.vue
similarity index 100%
rename from ui/src/components/workflow/icons/condition-node-icon.vue
rename to ui/src/workflow/icons/condition-node-icon.vue
diff --git a/ui/src/components/workflow/icons/search-dataset-node-icon.vue b/ui/src/workflow/icons/search-dataset-node-icon.vue
similarity index 100%
rename from ui/src/components/workflow/icons/search-dataset-node-icon.vue
rename to ui/src/workflow/icons/search-dataset-node-icon.vue
diff --git a/ui/src/components/workflow/icons/start-node-icon.vue b/ui/src/workflow/icons/start-node-icon.vue
similarity index 100%
rename from ui/src/components/workflow/icons/start-node-icon.vue
rename to ui/src/workflow/icons/start-node-icon.vue
diff --git a/ui/src/workflow/icons/utils.ts b/ui/src/workflow/icons/utils.ts
new file mode 100644
index 000000000..69e4e9d06
--- /dev/null
+++ b/ui/src/workflow/icons/utils.ts
@@ -0,0 +1,5 @@
+const icons: any = import.meta.glob('./**.vue', { eager: true })
+export function iconComponent(name: string) {
+  const url = `./icons/${name}.vue`
+  return icons[url]?.default || null
+}
diff --git a/ui/src/workflow/index.vue b/ui/src/workflow/index.vue
new file mode 100644
index 000000000..3bf10a876
--- /dev/null
+++ b/ui/src/workflow/index.vue
@@ -0,0 +1,322 @@
+<template>
+  <div className="workflow-app" id="container"></div>
+  <!-- 辅助工具栏 -->
+  <Control class="workflow-control" v-if="lf" :lf="lf"></Control>
+</template>
+<script setup lang="ts">
+import LogicFlow from '@logicflow/core'
+import { ref, onMounted } from 'vue'
+import AppEdge from './common/edge.ts'
+import Control from './common/NodeControl.vue'
+import { baseNodes } from '@/workflow/common/data.ts'
+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 })
+
+defineOptions({ name: 'WorkFlow' })
+
+type ShapeItem = {
+  type?: string
+  text?: string
+  icon?: string
+  label?: string
+  className?: string
+  disabled?: boolean
+  properties?: Record<string, any>
+  callback?: (lf: LogicFlow, container?: HTMLElement) => void
+}
+
+const graphData = {
+  nodes: [
+    ...baseNodes,
+    {
+      id: '34902d3d-a3ff-497f-b8e1-0c34a44d7dd5',
+      type: 'search-dataset-node',
+      x: 600,
+      y: 250,
+      properties: {
+        height: 200,
+        stepName: '知识库检索',
+        input: [{ key: '输入' }],
+        output: [{ key: '输出' }],
+        node_data: {
+          dataset_id_list: [],
+          dataset_setting: {
+            top_n: 3,
+            similarity: 0.6,
+            max_paragraph_char_number: 5000,
+            search_mode: 'embedding'
+          }
+        }
+      }
+    },
+    {
+      id: '34902d3d-a3ff-497f-b8e1-0c34a44d7dd6',
+      type: 'condition-node',
+      x: 810,
+      y: 764,
+      properties: {
+        height: 200,
+        width: 600,
+        stepName: '判断器',
+        input: [{ key: '输入' }],
+        output: [{ key: '9208' }, { key: '1143' }, { key: '输出' }],
+        node_data: {
+          branch: [
+            {
+              conditions: [{ field: { node_id: 'xxx', fields: '' }, compare: '', value: '' }],
+              id: '2391',
+              condition: 'and'
+            },
+            {
+              conditions: [{ field: { node_id: 'xxx', fields: '' }, compare: '', value: '' }],
+              id: '1143',
+              condition: 'and'
+            },
+            {
+              conditions: [{ field: { node_id: 'xxx', fields: '' }, compare: '', value: '' }],
+              id: '9208',
+              condition: 'and'
+            }
+          ]
+        }
+      }
+    },
+    {
+      id: '03597cb0-ed4c-4bcb-b25b-3b358f72b266',
+      type: 'ai-chat-node',
+      x: 1330,
+      y: 690,
+      properties: {
+        height: '',
+        stepName: 'AI 对话',
+        input: [{ key: '输入' }],
+        output: [{ key: '输出' }],
+        node_data: { model: '', name: '' }
+      }
+    },
+    {
+      id: '6649ee86-348c-4d68-9cad-71f0612beb05',
+      type: 'ai-chat-node',
+      x: 1320,
+      y: 990,
+      properties: {
+        height: '',
+        stepName: 'AI 对话',
+        input: [{ key: '输入' }],
+        output: [{ key: '输出' }],
+        node_data: { model: '', name: '' }
+      }
+    },
+    {
+      id: 'ede4a9c9-e2fa-40ac-9215-2e1ad04f09c5',
+      type: 'ai-chat-node',
+      x: 1360,
+      y: 1300,
+      properties: {
+        height: '',
+        stepName: 'AI 对话',
+        input: [{ key: '输入' }],
+        output: [{ key: '输出' }],
+        node_data: { model: '', name: '' }
+      }
+    }
+  ],
+  edges: [
+    {
+      id: '8dde4baf-0965-4999-9d37-f867ab16d638',
+      type: 'app-edge',
+      sourceNodeId: 'start-node',
+      targetNodeId: '34902d3d-a3ff-497f-b8e1-0c34a44d7dd5',
+      startPoint: { x: 340, y: 788 },
+      endPoint: { x: 440, y: 469 },
+      properties: {},
+      pointsList: [
+        { x: 340, y: 788 },
+        { x: 450, y: 788 },
+        { x: 330, y: 469 },
+        { x: 440, y: 469 }
+      ],
+      sourceAnchorId: 'start-node_输出_right',
+      targetAnchorId: '34902d3d-a3ff-497f-b8e1-0c34a44d7dd5_输入_left'
+    },
+    {
+      id: 'b60de7b4-d8d2-4e7d-bba6-3738b9e523b9',
+      type: 'app-edge',
+      sourceNodeId: '34902d3d-a3ff-497f-b8e1-0c34a44d7dd5',
+      targetNodeId: '34902d3d-a3ff-497f-b8e1-0c34a44d7dd6',
+      startPoint: { x: 760, y: 464 },
+      endPoint: { x: 520, y: 973.75 },
+      properties: {},
+      pointsList: [
+        { x: 760, y: 464 },
+        { x: 870, y: 464 },
+        { x: 410, y: 973.75 },
+        { x: 520, y: 973.75 }
+      ],
+      sourceAnchorId: '34902d3d-a3ff-497f-b8e1-0c34a44d7dd5_输出_right',
+      targetAnchorId: '34902d3d-a3ff-497f-b8e1-0c34a44d7dd6_输入_left'
+    },
+    {
+      id: '8de0da85-b5d6-459a-8be9-4d00082baf1c',
+      type: 'app-edge',
+      sourceNodeId: '34902d3d-a3ff-497f-b8e1-0c34a44d7dd6',
+      targetNodeId: '03597cb0-ed4c-4bcb-b25b-3b358f72b266',
+      startPoint: { x: 1100, y: 968.75 },
+      endPoint: { x: 1170, y: 803 },
+      properties: {},
+      pointsList: [
+        { x: 1100, y: 968.75 },
+        { x: 1210, y: 968.75 },
+        { x: 1060, y: 803 },
+        { x: 1170, y: 803 }
+      ],
+      sourceAnchorId: '34902d3d-a3ff-497f-b8e1-0c34a44d7dd6_9208_right',
+      targetAnchorId: '03597cb0-ed4c-4bcb-b25b-3b358f72b266_输入_left'
+    },
+    {
+      id: '3e66821a-ce0a-4ef9-a6cf-ea4095158261',
+      type: 'app-edge',
+      sourceNodeId: '34902d3d-a3ff-497f-b8e1-0c34a44d7dd6',
+      targetNodeId: '6649ee86-348c-4d68-9cad-71f0612beb05',
+      startPoint: { x: 1100, y: 992.75 },
+      endPoint: { x: 1160, y: 1103 },
+      properties: {},
+      pointsList: [
+        { x: 1100, y: 992.75 },
+        { x: 1210, y: 992.75 },
+        { x: 1050, y: 1103 },
+        { x: 1160, y: 1103 }
+      ],
+      sourceAnchorId: '34902d3d-a3ff-497f-b8e1-0c34a44d7dd6_1143_right',
+      targetAnchorId: '6649ee86-348c-4d68-9cad-71f0612beb05_输入_left'
+    },
+    {
+      id: 'cc52ab90-58e7-4f54-9660-d9fb16f776ea',
+      type: 'app-edge',
+      sourceNodeId: '34902d3d-a3ff-497f-b8e1-0c34a44d7dd6',
+      targetNodeId: 'ede4a9c9-e2fa-40ac-9215-2e1ad04f09c5',
+      startPoint: { x: 1100, y: 1016.75 },
+      endPoint: { x: 1200, y: 1413 },
+      properties: {},
+      pointsList: [
+        { x: 1100, y: 1016.75 },
+        { x: 1210, y: 1016.75 },
+        { x: 1090, y: 1413 },
+        { x: 1200, y: 1413 }
+      ],
+      sourceAnchorId: '34902d3d-a3ff-497f-b8e1-0c34a44d7dd6_输出_right',
+      targetAnchorId: 'ede4a9c9-e2fa-40ac-9215-2e1ad04f09c5_输入_left'
+    }
+  ]
+}
+const lf = ref()
+
+onMounted(() => {
+  const container: any = document.querySelector('#container')
+  if (container) {
+    lf.value = new LogicFlow({
+      textEdit: false,
+      background: {
+        backgroundColor: '#f5f6f7'
+      },
+      grid: {
+        size: 10,
+        type: 'dot',
+        config: {
+          color: '#DEE0E3',
+          thickness: 1
+        }
+      },
+      // keyboard: {
+      //   enabled: true,
+      //   shortcuts: [
+      //     {
+      //       keys: ['backspace'],
+      //       callback: () => {
+      //         const elements = lf.value.getSelectElements(true)
+      //         if (
+      //           (elements.edges && elements.edges.length > 0) ||
+      //           (elements.nodes && elements.nodes.length > 0)
+      //         ) {
+      //           const r = window.confirm('确定要删除吗？')
+      //           if (r) {
+      //             lf.value.clearSelectElements()
+      //             elements.edges.forEach((edge: any) => {
+      //               lf.value.deleteEdge(edge.id)
+      //             })
+      //             elements.nodes.forEach((node: any) => {
+      //               lf.value.deleteNode(node.id)
+      //             })
+      //           }
+      //         }
+      //       }
+      //     }
+      //   ]
+      // },
+      isSilentMode: false,
+      container: container
+    })
+    lf.value.setTheme({
+      bezier: {
+        stroke: '#afafaf',
+        strokeWidth: 1
+      }
+    })
+
+    lf.value.batchRegister([...Object.keys(nodes).map((key) => nodes[key].default), AppEdge])
+    lf.value.setDefaultEdgeType('app-edge')
+
+    lf.value.render(graphData)
+  }
+})
+const validate = () => {
+  lf.value.graphModel.nodes.forEach((element: any) => {
+    element?.validate?.()
+  })
+}
+const getGraphData = () => {
+  console.log(JSON.stringify(lf.value.getGraphData()))
+}
+
+const onmousedown = (shapeItem: ShapeItem) => {
+  if (shapeItem.type) {
+    lf.value.dnd.startDrag({
+      type: shapeItem.type,
+      properties: shapeItem.properties,
+      icon: shapeItem.icon
+    })
+  }
+  if (shapeItem.callback) {
+    shapeItem.callback(lf.value)
+  }
+}
+
+defineExpose({
+  onmousedown,
+  validate,
+  getGraphData
+})
+</script>
+<style lang="scss">
+.workflow-app {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+.workflow-control {
+  position: absolute;
+  bottom: 24px;
+  left: 24px;
+  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/ai-chat-node/index.ts b/ui/src/workflow/nodes/ai-chat-node/index.ts
similarity index 72%
rename from ui/src/components/workflow/nodes/ai-chat-node/index.ts
rename to ui/src/workflow/nodes/ai-chat-node/index.ts
index 91a1aba55..648b515e4 100644
--- a/ui/src/components/workflow/nodes/ai-chat-node/index.ts
+++ b/ui/src/workflow/nodes/ai-chat-node/index.ts
@@ -1,5 +1,5 @@
 import ChatNodeVue from './index.vue'
-import { AppNode, AppNodeModel } from '@/components/workflow/common/app-node/index'
+import { AppNode, AppNodeModel } from '@/workflow/common/app-node.ts'
 class ChatNode extends AppNode {
   constructor(props: any) {
     super(props, ChatNodeVue)
diff --git a/ui/src/components/workflow/nodes/ai-chat-node/index.vue b/ui/src/workflow/nodes/ai-chat-node/index.vue
similarity index 89%
rename from ui/src/components/workflow/nodes/ai-chat-node/index.vue
rename to ui/src/workflow/nodes/ai-chat-node/index.vue
index b0b7fe024..324ce55e2 100644
--- a/ui/src/components/workflow/nodes/ai-chat-node/index.vue
+++ b/ui/src/workflow/nodes/ai-chat-node/index.vue
@@ -34,7 +34,7 @@
           }"
           prop="name"
         >
-          <el-input v-model="chat_data.name" @focus="handleFocus" />
+          <el-input v-model="chat_data.name" />
         </el-form-item>
       </el-form>
     </el-card>
@@ -42,7 +42,7 @@
 </template>
 <script setup lang="ts">
 import { set } from 'lodash'
-import NodeContainer from '@/components/workflow/common/node-container/index.vue'
+import NodeContainer from '@/workflow/common/NodeContainer.vue'
 import type { FormInstance } from 'element-plus'
 import { ref, computed, onMounted } from 'vue'
 
@@ -60,9 +60,7 @@ const chat_data = computed({
   }
 })
 const props = defineProps<{ nodeModel: any }>()
-const handleFocus = () => {
-  props.nodeModel.isSelected = false
-}
+
 const aiChatNodeFormRef = ref<FormInstance>()
 
 const validate = () => {
diff --git a/ui/src/components/workflow/nodes/base-node/index.ts b/ui/src/workflow/nodes/base-node/index.ts
similarity index 71%
rename from ui/src/components/workflow/nodes/base-node/index.ts
rename to ui/src/workflow/nodes/base-node/index.ts
index 58ca091e8..f33d61b98 100644
--- a/ui/src/components/workflow/nodes/base-node/index.ts
+++ b/ui/src/workflow/nodes/base-node/index.ts
@@ -1,5 +1,5 @@
 import BaseNodeVue from './index.vue'
-import { AppNode, AppNodeModel } from '@/components/workflow/common/app-node/index'
+import { AppNode, AppNodeModel } from '@/workflow/common/app-node.ts'
 class BaseNode extends AppNode {
   constructor(props: any) {
     super(props, BaseNodeVue)
diff --git a/ui/src/components/workflow/nodes/base-node/index.vue b/ui/src/workflow/nodes/base-node/index.vue
similarity index 91%
rename from ui/src/components/workflow/nodes/base-node/index.vue
rename to ui/src/workflow/nodes/base-node/index.vue
index ca1281073..5f448cf87 100644
--- a/ui/src/components/workflow/nodes/base-node/index.vue
+++ b/ui/src/workflow/nodes/base-node/index.vue
@@ -23,7 +23,6 @@
           maxlength="64"
           placeholder="请输入应用名称"
           show-word-limit
-          @focus="handleFocus"
         />
       </el-form-item>
       <el-form-item label="应用描述">
@@ -34,7 +33,6 @@
           type="textarea"
           maxlength="256"
           show-word-limit
-          @focus="handleFocus"
         />
       </el-form-item>
       <el-form-item label="开场白">
@@ -51,7 +49,7 @@
 </template>
 <script setup lang="ts">
 import { set } from 'lodash'
-import NodeContainer from '@/components/workflow/common/node-container/index.vue'
+import NodeContainer from '@/workflow/common/NodeContainer.vue'
 import type { FormInstance } from 'element-plus'
 import { ref, computed, onMounted } from 'vue'
 import { MdEditor } from 'md-editor-v3'
@@ -76,9 +74,6 @@ const chat_data = computed({
   }
 })
 
-const handleFocus = () => {
-  set(props.nodeModel, 'isSelected', false)
-}
 const baseNodeFormRef = ref<FormInstance>()
 
 const validate = () => {
@@ -86,7 +81,6 @@ const validate = () => {
 }
 
 onMounted(() => {
-  
   set(props.nodeModel, 'validate', validate)
 })
 </script>
diff --git a/ui/src/components/workflow/nodes/condition-node/index.ts b/ui/src/workflow/nodes/condition-node/index.ts
similarity index 73%
rename from ui/src/components/workflow/nodes/condition-node/index.ts
rename to ui/src/workflow/nodes/condition-node/index.ts
index 8f84672c3..db542d5a1 100644
--- a/ui/src/components/workflow/nodes/condition-node/index.ts
+++ b/ui/src/workflow/nodes/condition-node/index.ts
@@ -1,5 +1,5 @@
 import ConditioNodeVue from './index.vue'
-import { AppNode, AppNodeModel } from '@/components/workflow/common/app-node/index'
+import { AppNode, AppNodeModel } from '@/workflow/common/app-node.ts'
 class ConditioNode extends AppNode {
   constructor(props: any) {
     super(props, ConditioNodeVue)
diff --git a/ui/src/components/workflow/nodes/condition-node/index.vue b/ui/src/workflow/nodes/condition-node/index.vue
similarity index 93%
rename from ui/src/components/workflow/nodes/condition-node/index.vue
rename to ui/src/workflow/nodes/condition-node/index.vue
index aef74ae55..12c0c18d4 100644
--- a/ui/src/components/workflow/nodes/condition-node/index.vue
+++ b/ui/src/workflow/nodes/condition-node/index.vue
@@ -6,6 +6,10 @@
       require-asterisk-position="right"
       label-width="auto"
       ref="ConditionNodeFormRef"
+      @keydown.stop
+      @submit.prevent
+      @click.stop
+      @mousedown.stop
     >
       <template v-for="(item, index) in form_data.branch" :key="index">
         <el-card shadow="never" class="card-never mb-8" style="--el-card-padding: 12px">
@@ -26,7 +30,7 @@
                     v-model="condition.field"
                     placeholder="请选择变量"
                     clearable
-                    @visible-change="changeHandle"
+                    @visible-change="changeHandle()"
                   >
                     <el-option label="Zone one" value="shanghai" />
                     <el-option label="Zone two" value="beijing" />
@@ -80,7 +84,7 @@
 </template>
 <script setup lang="ts">
 import { cloneDeep, set } from 'lodash'
-import NodeContainer from '@/components/workflow/common/node-container/index.vue'
+import NodeContainer from '@/workflow/common/NodeContainer.vue'
 import type { FormInstance } from 'element-plus'
 import { ref, computed, onMounted } from 'vue'
 import { randomId } from '@/utils/utils'
@@ -118,7 +122,7 @@ const form_data = computed({
 const ConditionNodeFormRef = ref<FormInstance>()
 
 function changeHandle() {
-  console.log(props.nodeModel)
+  console.log(props.nodeModel.graphModel.getNodeIncomingNode(props.nodeModel.id))
 }
 
 const validate = () => {
@@ -137,7 +141,7 @@ const judgeLabel = (index: number) => {
 
 function addBranch() {
   const list = cloneDeep(props.nodeModel.properties.node_data.branch)
-  list.push({
+  const obj = {
     conditions: [
       {
         field: { node_id: 'xxx', fields: '' },
@@ -147,7 +151,9 @@ function addBranch() {
     ],
     id: randomId(),
     condition: 'and'
-  })
+  }
+  list.push(obj)
+  props.nodeModel.addField({ key: obj.id })
   set(props.nodeModel.properties.node_data, 'branch', list)
 }
 
diff --git a/ui/src/components/workflow/nodes/search-dataset-node/index.ts b/ui/src/workflow/nodes/search-dataset-node/index.ts
similarity index 75%
rename from ui/src/components/workflow/nodes/search-dataset-node/index.ts
rename to ui/src/workflow/nodes/search-dataset-node/index.ts
index 043a6e40a..d0e411055 100644
--- a/ui/src/components/workflow/nodes/search-dataset-node/index.ts
+++ b/ui/src/workflow/nodes/search-dataset-node/index.ts
@@ -1,5 +1,5 @@
 import SearchDatasetVue from './index.vue'
-import { AppNode, AppNodeModel } from '@/components/workflow/common/app-node/index'
+import { AppNode, AppNodeModel } from '@/workflow/common/app-node.ts'
 class SearchDatasetNode extends AppNode {
   constructor(props: any) {
     super(props, SearchDatasetVue)
diff --git a/ui/src/components/workflow/nodes/search-dataset-node/index.vue b/ui/src/workflow/nodes/search-dataset-node/index.vue
similarity index 98%
rename from ui/src/components/workflow/nodes/search-dataset-node/index.vue
rename to ui/src/workflow/nodes/search-dataset-node/index.vue
index 997da655e..0775ec570 100644
--- a/ui/src/components/workflow/nodes/search-dataset-node/index.vue
+++ b/ui/src/workflow/nodes/search-dataset-node/index.vue
@@ -94,7 +94,7 @@
 <script setup lang="ts">
 import { set } from 'lodash'
 import { app } from '@/main'
-import NodeContainer from '@/components/workflow/common/node-container/index.vue'
+import NodeContainer from '@/workflow/common/NodeContainer.vue'
 import AddDatasetDialog from '@/views/application/components/AddDatasetDialog.vue'
 import ParamSettingDialog from '@/views/application/components/ParamSettingDialog.vue'
 import type { FormInstance } from 'element-plus'
diff --git a/ui/src/components/workflow/nodes/start-node/index.ts b/ui/src/workflow/nodes/start-node/index.ts
similarity index 72%
rename from ui/src/components/workflow/nodes/start-node/index.ts
rename to ui/src/workflow/nodes/start-node/index.ts
index 0c7df419b..08698306a 100644
--- a/ui/src/components/workflow/nodes/start-node/index.ts
+++ b/ui/src/workflow/nodes/start-node/index.ts
@@ -1,5 +1,5 @@
 import ChatNodeVue from './index.vue'
-import { AppNode, AppNodeModel } from '@/components/workflow/common/app-node/index'
+import { AppNode, AppNodeModel } from '@/workflow/common/app-node.ts'
 class ChatNode extends AppNode {
   constructor(props: any) {
     super(props, ChatNodeVue)
diff --git a/ui/src/components/workflow/nodes/start-node/index.vue b/ui/src/workflow/nodes/start-node/index.vue
similarity index 87%
rename from ui/src/components/workflow/nodes/start-node/index.vue
rename to ui/src/workflow/nodes/start-node/index.vue
index 383f39598..812c1abfe 100644
--- a/ui/src/components/workflow/nodes/start-node/index.vue
+++ b/ui/src/workflow/nodes/start-node/index.vue
@@ -1,14 +1,14 @@
 <template>
   <NodeContainer :nodeModel="nodeModel" class="start-node">
     <h5 class="title-decoration-1 mb-8">全局变量</h5>
-    <div class="border-r-4 p-8-12 mb-8 layout-bg lighter">当前时 {time}</div>
+    <div class="border-r-4 p-8-12 mb-8 layout-bg lighter">当前时间 {time}</div>
     <h5 class="title-decoration-1 mb-8">参数输出</h5>
     <div class="border-r-4 p-8-12 mb-8 layout-bg lighter">用户问题 {question}</div>
   </NodeContainer>
 </template>
 <script setup lang="ts">
 import { set } from 'lodash'
-import NodeContainer from '@/components/workflow/common/node-container/index.vue'
+import NodeContainer from '@/workflow/common/NodeContainer.vue'
 import type { FormInstance } from 'element-plus'
 import { ref, computed, onMounted } from 'vue'