feat: 右侧点击展示菜单 (#1171)

apps/application/flow/default_workflow.json

@@ -4,23 +4,28 @@
             "id": "base-node",
             "type": "base-node",
             "x": 440,
-            "y": 3350,
+            "y": 3040,
             "properties": {
-                "config": {},
+                "config": {
-                "height": 517,
+
+                },
+                "height": 825.6,
                 "stepName": "基本信息",
                 "node_data": {
                     "desc": "",
-                    "name": "",
+                    "name": "maxkbapplication",
                     "prologue": "您好，我是 MaxKB 小助手，您可以向我提出 MaxKB 使用问题。\n- MaxKB 主要功能有什么？\n- MaxKB 支持哪些大语言模型？\n- MaxKB 支持哪些文档类型？"
-                }
+                },
+                "input_field_list": [
+
+                ]
             }
         },
         {
             "id": "start-node",
             "type": "start-node",
-            "x": 440,
+            "x": 430,
-            "y": 3710,
+            "y": 3660,
             "properties": {
                 "config": {
                     "fields": [
@@ -31,8 +36,8 @@
                     ],
                     "globalFields": [
                         {
-                            "value": "time",
+                            "label": "当前时间",
-                            "label": "当前时间"
+                            "value": "time"
                         }
                     ]
                 },
@@ -42,7 +47,7 @@
                         "value": "question"
                     }
                 ],
-                "height": 268.533,
+                "height": 276,
                 "stepName": "开始",
                 "globalFields": [
                     {
@@ -55,8 +60,8 @@
         {
             "id": "b931efe5-5b66-46e0-ae3b-0160cb18eeb5",
             "type": "search-dataset-node",
-            "x": 830,
+            "x": 840,
-            "y": 3470,
+            "y": 3210,
             "properties": {
                 "config": {
                     "fields": [
@@ -78,10 +83,12 @@
                         }
                     ]
                 },
-                "height": 754.8,
+                "height": 794,
                 "stepName": "知识库检索",
                 "node_data": {
-                    "dataset_id_list": [],
+                    "dataset_id_list": [
+
+                    ],
                     "dataset_setting": {
                         "top_n": 3,
                         "similarity": 0.6,
@@ -91,6 +98,9 @@
                     "question_reference_address": [
                         "start-node",
                         "question"
+                    ],
+                    "source_dataset_id_list": [
+
                     ]
                 }
             }
@@ -98,8 +108,8 @@
         {
             "id": "fc60863a-dec2-4854-9e5a-7a44b7187a2b",
             "type": "condition-node",
-            "x": 1380,
+            "x": 1490,
-            "y": 3470,
+            "y": 3210,
             "properties": {
                 "width": 600,
                 "config": {
@@ -110,7 +120,7 @@
                         }
                     ]
                 },
-                "height": 524.6669999999999,
+                "height": 543.675,
                 "stepName": "判断器",
                 "node_data": {
                     "branch": [
@@ -148,24 +158,26 @@
                             "id": "161",
                             "type": "ELSE",
                             "condition": "and",
-                            "conditions": []
+                            "conditions": [
+
+                            ]
                         }
                     ]
                 },
                 "branch_condition_list": [
                     {
                         "index": 0,
-                        "height": 116.133,
+                        "height": 121.225,
                         "id": "1009"
                     },
                     {
                         "index": 1,
-                        "height": 116.133,
+                        "height": 121.225,
                         "id": "4908"
                     },
                     {
                         "index": 2,
-                        "height": 40,
+                        "height": 44,
                         "id": "161"
                     }
                 ]
@@ -174,8 +186,8 @@
         {
             "id": "4ffe1086-25df-4c85-b168-979b5bbf0a26",
             "type": "reply-node",
-            "x": 2090,
+            "x": 2170,
-            "y": 2820,
+            "y": 2480,
             "properties": {
                 "config": {
                     "fields": [
@@ -185,7 +197,7 @@
                         }
                     ]
                 },
-                "height": 312.267,
+                "height": 378,
                 "stepName": "指定回复",
                 "node_data": {
                     "fields": [
@@ -193,15 +205,16 @@
                         "directly_return"
                     ],
                     "content": "",
-                    "reply_type": "referencing"
+                    "reply_type": "referencing",
+                    "is_result": true
                 }
             }
         },
         {
             "id": "f1f1ee18-5a02-46f6-b4e6-226253cdffbb",
             "type": "ai-chat-node",
-            "x": 2090,
+            "x": 2160,
-            "y": 3460,
+            "y": 3200,
             "properties": {
                 "config": {
                     "fields": [
@@ -211,21 +224,22 @@
                         }
                     ]
                 },
-                "height": 681.4,
+                "height": 763,
                 "stepName": "AI 对话",
                 "node_data": {
                     "prompt": "已知信息：\n{{知识库检索.data}}\n问题：\n{{开始.question}}",
                     "system": "",
                     "model_id": "",
-                    "dialogue_number": 0
+                    "dialogue_number": 0,
+                    "is_result": true
                 }
             }
         },
         {
             "id": "309d0eef-c597-46b5-8d51-b9a28aaef4c7",
             "type": "ai-chat-node",
-            "x": 2090,
+            "x": 2160,
-            "y": 4180,
+            "y": 3970,
             "properties": {
                 "config": {
                     "fields": [
@@ -235,13 +249,14 @@
                         }
                     ]
                 },
-                "height": 681.4,
+                "height": 763,
                 "stepName": "AI 对话1",
                 "node_data": {
                     "prompt": "{{开始.question}}",
                     "system": "",
                     "model_id": "",
-                    "dialogue_number": 0
+                    "dialogue_number": 0,
+                    "is_result": true
                 }
             }
         }
@@ -253,30 +268,32 @@
             "sourceNodeId": "start-node",
             "targetNodeId": "b931efe5-5b66-46e0-ae3b-0160cb18eeb5",
             "startPoint": {
-                "x": 600,
+                "x": 590,
-                "y": 3710
+                "y": 3660
             },
             "endPoint": {
-                "x": 670,
+                "x": 680,
-                "y": 3470
+                "y": 3210
+            },
+            "properties": {
+
             },
-            "properties": {},
             "pointsList": [
                 {
-                    "x": 600,
+                    "x": 590,
-                    "y": 3710
+                    "y": 3660
                 },
                 {
-                    "x": 710,
+                    "x": 700,
-                    "y": 3710
+                    "y": 3660
                 },
                 {
-                    "x": 560,
+                    "x": 570,
-                    "y": 3470
+                    "y": 3210
                 },
                 {
-                    "x": 670,
+                    "x": 680,
-                    "y": 3470
+                    "y": 3210
                 }
             ],
             "sourceAnchorId": "start-node_right",
@@ -288,30 +305,32 @@
             "sourceNodeId": "b931efe5-5b66-46e0-ae3b-0160cb18eeb5",
             "targetNodeId": "fc60863a-dec2-4854-9e5a-7a44b7187a2b",
             "startPoint": {
-                "x": 990,
+                "x": 1000,
-                "y": 3470
+                "y": 3210
             },
             "endPoint": {
-                "x": 1090,
+                "x": 1200,
-                "y": 3470
+                "y": 3210
+            },
+            "properties": {
+
             },
-            "properties": {},
             "pointsList": [
                 {
-                    "x": 990,
+                    "x": 1000,
-                    "y": 3470
+                    "y": 3210
                 },
                 {
-                    "x": 1100,
+                    "x": 1110,
-                    "y": 3470
+                    "y": 3210
-                },
-                {
-                    "x": 980,
-                    "y": 3470
                 },
                 {
                     "x": 1090,
-                    "y": 3470
+                    "y": 3210
+                },
+                {
+                    "x": 1200,
+                    "y": 3210
                 }
             ],
             "sourceAnchorId": "b931efe5-5b66-46e0-ae3b-0160cb18eeb5_right",
@@ -323,30 +342,32 @@
             "sourceNodeId": "fc60863a-dec2-4854-9e5a-7a44b7187a2b",
             "targetNodeId": "4ffe1086-25df-4c85-b168-979b5bbf0a26",
             "startPoint": {
-                "x": 1670,
+                "x": 1780,
-                "y": 3340.733
+                "y": 3073.775
             },
             "endPoint": {
-                "x": 1930,
+                "x": 2010,
-                "y": 2820
+                "y": 2480
+            },
+            "properties": {
+
             },
-            "properties": {},
             "pointsList": [
-                {
-                    "x": 1670,
-                    "y": 3340.733
-                },
                 {
                     "x": 1780,
-                    "y": 3340.733
+                    "y": 3073.775
                 },
                 {
-                    "x": 1820,
+                    "x": 1890,
-                    "y": 2820
+                    "y": 3073.775
                 },
                 {
-                    "x": 1930,
+                    "x": 1900,
-                    "y": 2820
+                    "y": 2480
+                },
+                {
+                    "x": 2010,
+                    "y": 2480
                 }
             ],
             "sourceAnchorId": "fc60863a-dec2-4854-9e5a-7a44b7187a2b_1009_right",
@@ -358,30 +379,32 @@
             "sourceNodeId": "fc60863a-dec2-4854-9e5a-7a44b7187a2b",
             "targetNodeId": "f1f1ee18-5a02-46f6-b4e6-226253cdffbb",
             "startPoint": {
-                "x": 1670,
+                "x": 1780,
-                "y": 3464.866
+                "y": 3203
             },
             "endPoint": {
-                "x": 1930,
+                "x": 2000,
-                "y": 3460
+                "y": 3200
+            },
+            "properties": {
+
             },
-            "properties": {},
             "pointsList": [
-                {
-                    "x": 1670,
-                    "y": 3464.866
-                },
                 {
                     "x": 1780,
-                    "y": 3464.866
+                    "y": 3203
                 },
                 {
-                    "x": 1820,
+                    "x": 1890,
-                    "y": 3460
+                    "y": 3203
                 },
                 {
-                    "x": 1930,
+                    "x": 1890,
-                    "y": 3460
+                    "y": 3200
+                },
+                {
+                    "x": 2000,
+                    "y": 3200
                 }
             ],
             "sourceAnchorId": "fc60863a-dec2-4854-9e5a-7a44b7187a2b_4908_right",
@@ -393,30 +416,32 @@
             "sourceNodeId": "fc60863a-dec2-4854-9e5a-7a44b7187a2b",
             "targetNodeId": "309d0eef-c597-46b5-8d51-b9a28aaef4c7",
             "startPoint": {
-                "x": 1670,
+                "x": 1780,
-                "y": 3550.9325000000003
+                "y": 3293.6124999999997
             },
             "endPoint": {
-                "x": 1930,
+                "x": 2000,
-                "y": 4180
+                "y": 3970
+            },
+            "properties": {
+
             },
-            "properties": {},
             "pointsList": [
-                {
-                    "x": 1670,
-                    "y": 3550.9325000000003
-                },
                 {
                     "x": 1780,
-                    "y": 3550.9325000000003
+                    "y": 3293.6124999999997
                 },
                 {
-                    "x": 1820,
+                    "x": 1890,
-                    "y": 4180
+                    "y": 3293.6124999999997
                 },
                 {
-                    "x": 1930,
+                    "x": 1890,
-                    "y": 4180
+                    "y": 3970
+                },
+                {
+                    "x": 2000,
+                    "y": 3970
                 }
             ],
             "sourceAnchorId": "fc60863a-dec2-4854-9e5a-7a44b7187a2b_161_right",

ui/src/views/application-workflow/component/DropdownMenu.vue

@@ -0,0 +1,149 @@
+<template>
+  <div v-show="show" class="workflow-dropdown-menu border border-r-4">
+    <el-tabs v-model="activeName" class="workflow-dropdown-tabs">
+      <el-tab-pane label="基础组件" name="base">
+        <template v-for="(item, index) in menuNodes" :key="index">
+          <div
+            class="workflow-dropdown-item cursor flex p-8-12"
+            @click.stop="clickNodes(item)"
+            @mousedown.stop="onmousedown(item)"
+          >
+            <component :is="iconComponent(`${item.type}-icon`)" class="mr-8 mt-4" :size="32" />
+            <div class="pre-wrap">
+              <div class="lighter">{{ item.label }}</div>
+              <el-text type="info" size="small">{{ item.text }}</el-text>
+            </div>
+          </div>
+        </template>
+      </el-tab-pane>
+      <el-tab-pane label="函数库" name="function">
+        <el-scrollbar max-height="300">
+          <div
+            class="workflow-dropdown-item cursor flex p-8-12"
+            @click.stop="clickNodes(functionNode)"
+            @mousedown.stop="onmousedown(functionNode)"
+          >
+            <component :is="iconComponent(`function-lib-node-icon`)" class="mr-8 mt-4" :size="32" />
+            <div class="pre-wrap">
+              <div class="lighter">{{ functionNode.label }}</div>
+              <el-text type="info" size="small">{{ functionNode.text }}</el-text>
+            </div>
+          </div>
+
+          <template v-for="(item, index) in functionLibList" :key="index">
+            <div
+              class="workflow-dropdown-item cursor flex p-8-12"
+              @click.stop="clickNodes(functionLibNode, item)"
+              @mousedown.stop="onmousedown(functionLibNode, item)"
+            >
+              <component
+                :is="iconComponent(`function-lib-node-icon`)"
+                class="mr-8 mt-4"
+                :size="32"
+              />
+              <div class="pre-wrap">
+                <div class="lighter">{{ item.name }}</div>
+                <el-text type="info" size="small">{{ item.desc }}</el-text>
+              </div>
+            </div>
+          </template>
+        </el-scrollbar>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+<script setup lang="ts">
+import { reactive, ref, watch, onMounted } from 'vue'
+import { menuNodes, functionLibNode, functionNode } from '@/workflow/common/data'
+import { iconComponent } from '@/workflow/icons/utils'
+import applicationApi from '@/api/application'
+
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false
+  },
+  id: {
+    type: String,
+    default: ''
+  },
+  workflowRef: Object
+})
+
+const emit = defineEmits(['clickNodes', 'onmousedown'])
+
+const loading = ref(false)
+const activeName = ref('base')
+
+const functionLibList = ref<any[]>([])
+
+function clickNodes(item: any, data?: any) {
+  if (data) {
+    item['properties']['stepName'] = data.name
+    item['properties']['node_data'] = {
+      ...data,
+      function_lib_id: data.id,
+      input_field_list: data.input_field_list.map((field: any) => ({
+        ...field,
+        value: field.source == 'reference' ? [] : ''
+      }))
+    }
+  }
+  props.workflowRef?.addNode(item)
+
+  emit('clickNodes', item)
+}
+
+function onmousedown(item: any, data?: any) {
+  if (data) {
+    item['properties']['stepName'] = data.name
+    item['properties']['node_data'] = {
+      ...data,
+      function_lib_id: data.id,
+      input_field_list: data.input_field_list.map((field: any) => ({
+        ...field,
+        value: field.source == 'reference' ? [] : ''
+      }))
+    }
+  }
+  props.workflowRef?.onmousedown(item)
+  emit('onmousedown', item)
+}
+
+function getList() {
+  applicationApi.listFunctionLib(props.id, loading).then((res: any) => {
+    functionLibList.value = res.data
+  })
+}
+
+onMounted(() => {
+  getList()
+})
+</script>
+<style lang="scss" scoped>
+.workflow-dropdown-menu {
+  -moz-user-select: none; /* Firefox */
+  -webkit-user-select: none; /* WebKit内核 */
+  -ms-user-select: none; /* IE10及以后 */
+  -khtml-user-select: none; /* 早期浏览器 */
+  -o-user-select: none; /* Opera */
+  user-select: none; /* CSS3属性 */
+  position: absolute;
+  top: 49px;
+  right: 90px;
+  z-index: 99;
+  width: 268px;
+  box-shadow: 0px 4px 8px 0px var(--app-text-color-light-1);
+  background: #ffffff;
+  padding-bottom: 8px;
+
+  .title {
+    padding: 12px 12px 4px;
+  }
+  .workflow-dropdown-item {
+    &:hover {
+      background: var(--app-text-color-light-1);
+    }
+  }
+}
+</style>

ui/src/views/application-workflow/index.vue

@@ -25,66 +25,14 @@
     </div>
     <!-- 下拉框 -->
     <el-collapse-transition>
-      <div
+      <DropdownMenu
-        v-show="showPopover"
+        :show="showPopover"
-        class="workflow-dropdown-menu border border-r-4"
+        :id="id"
         v-click-outside="clickoutside"
-      >
+        @clickNodes="clickNodes"
-        <el-tabs v-model="activeName" class="workflow-dropdown-tabs">
+        @onmousedown="onmousedown"
-          <el-tab-pane label="基础组件" name="base">
+        :workflowRef="workflowRef"
-            <template v-for="(item, index) in menuNodes" :key="index">
+      />
-              <div
-                class="workflow-dropdown-item cursor flex p-8-12"
-                @click="clickNodes(item)"
-                @mousedown="onmousedown(item)"
-              >
-                <component :is="iconComponent(`${item.type}-icon`)" class="mr-8 mt-4" :size="32" />
-                <div class="pre-wrap">
-                  <div class="lighter">{{ item.label }}</div>
-                  <el-text type="info" size="small">{{ item.text }}</el-text>
-                </div>
-              </div>
-            </template>
-          </el-tab-pane>
-          <el-tab-pane label="函数库" name="function">
-            <el-scrollbar max-height="300">
-              <div
-                class="workflow-dropdown-item cursor flex p-8-12"
-                @click="clickNodes(functionNode)"
-                @mousedown="onmousedown(functionNode)"
-              >
-                <component
-                  :is="iconComponent(`function-lib-node-icon`)"
-                  class="mr-8 mt-4"
-                  :size="32"
-                />
-                <div class="pre-wrap">
-                  <div class="lighter">{{ functionNode.label }}</div>
-                  <el-text type="info" size="small">{{ functionNode.text }}</el-text>
-                </div>
-              </div>
-
-              <template v-for="(item, index) in functionLibList" :key="index">
-                <div
-                  class="workflow-dropdown-item cursor flex p-8-12"
-                  @click="clickNodes(functionLibNode, item)"
-                  @mousedown="onmousedown(functionLibNode, item)"
-                >
-                  <component
-                    :is="iconComponent(`function-lib-node-icon`)"
-                    class="mr-8 mt-4"
-                    :size="32"
-                  />
-                  <div class="pre-wrap">
-                    <div class="lighter">{{ item.name }}</div>
-                    <el-text type="info" size="small">{{ item.desc }}</el-text>
-                  </div>
-                </div>
-              </template>
-            </el-scrollbar>
-          </el-tab-pane>
-        </el-tabs>
-      </div>
     </el-collapse-transition>
     <!-- 主画布 -->
     <div class="workflow-main">
@@ -148,8 +96,7 @@
 import { ref, onMounted, onBeforeUnmount, computed } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import Workflow from '@/workflow/index.vue'
-import { menuNodes, functionLibNode, functionNode } from '@/workflow/common/data'
+import DropdownMenu from '@/views/application-workflow/component/DropdownMenu.vue'
-import { iconComponent } from '@/workflow/icons/utils'
 import applicationApi from '@/api/application'
 import { isAppIcon } from '@/utils/application'
 import { MsgSuccess, MsgConfirm, MsgError } from '@/utils/message'
@@ -179,9 +126,19 @@ const showPopover = ref(false)
 const showDebug = ref(false)
 const enlarge = ref(false)
 const saveTime = ref<any>('')
-const activeName = ref('base')
-const functionLibList = ref<any[]>([])
 
+function clickNodes(item: any) {
+  // workflowRef.value?.addNode(item)
+  showPopover.value = false
+}
+
+function onmousedown(item: any) {
+  // workflowRef.value?.onmousedown(item)
+  showPopover.value = false
+}
+function clickoutside() {
+  showPopover.value = false
+}
 function publicHandle() {
   workflowRef.value
     ?.validate()
@@ -206,9 +163,6 @@ function publicHandle() {
     })
 }
 
-function clickoutside() {
-  showPopover.value = false
-}
 const clickShowDebug = () => {
   workflowRef.value
     ?.validate()
@@ -247,38 +201,6 @@ function clickoutsideDebug(e: any) {
   }
 }
 
-function clickNodes(item: any, data?: any) {
-  if (data) {
-    item['properties']['stepName'] = data.name
-    item['properties']['node_data'] = {
-      ...data,
-      function_lib_id: data.id,
-      input_field_list: data.input_field_list.map((field: any) => ({
-        ...field,
-        value: field.source == 'reference' ? [] : ''
-      }))
-    }
-  }
-  workflowRef.value?.addNode(item)
-  showPopover.value = false
-}
-
-function onmousedown(item: any, data?: any) {
-  if (data) {
-    item['properties']['stepName'] = data.name
-    item['properties']['node_data'] = {
-      ...data,
-      function_lib_id: data.id,
-      input_field_list: data.input_field_list.map((field: any) => ({
-        ...field,
-        value: field.source == 'reference' ? [] : ''
-      }))
-    }
-  }
-  workflowRef.value?.onmousedown(item)
-  showPopover.value = false
-}
-
 function getGraphData() {
   return workflowRef.value?.getGraphData()
 }
@@ -308,12 +230,6 @@ function saveApplication(bool?: boolean) {
   })
 }
 
-function getList() {
-  applicationApi.listFunctionLib(id, loading).then((res: any) => {
-    functionLibList.value = res.data
-  })
-}
-
 /**
  * 定时保存
  */
@@ -334,7 +250,7 @@ const closeInterval = () => {
 
 onMounted(() => {
   getDetail()
-  getList()
+
   // 初始化定时任务
   if (hasPermission(`APPLICATION:MANAGE:${id}`, 'AND')) {
     initInterval()
@@ -358,31 +274,7 @@ onBeforeUnmount(() => {
     height: calc(100vh - 62px);
     box-sizing: border-box;
   }
-  .workflow-dropdown-menu {
-    -moz-user-select: none; /* Firefox */
-    -webkit-user-select: none; /* WebKit内核 */
-    -ms-user-select: none; /* IE10及以后 */
-    -khtml-user-select: none; /* 早期浏览器 */
-    -o-user-select: none; /* Opera */
-    user-select: none; /* CSS3属性 */
-    position: absolute;
-    top: 49px;
-    right: 90px;
-    z-index: 99;
-    width: 268px;
-    box-shadow: 0px 4px 8px 0px var(--app-text-color-light-1);
-    background: #ffffff;
-    padding-bottom: 8px;
 
-    .title {
-      padding: 12px 12px 4px;
-    }
-    .workflow-dropdown-item {
-      &:hover {
-        background: var(--app-text-color-light-1);
-      }
-    }
-  }
   .workflow-dropdown-tabs {
     .el-tabs__nav-wrap {
       padding: 0 16px;

ui/src/workflow/common/NodeContainer.vue

@@ -82,15 +82,35 @@
         </div>
       </div>
     </div>
+    <el-collapse-transition>
+      <DropdownMenu
+        v-if="showAnchor"
+        @mousemove.stop
+        @mousedown.stop
+        @keydown.stop
+        @click.stop
+        :show="showAnchor"
+        :id="id"
+        style="left: 100%; top: 50%; transform: translate(0, -50%)"
+        @clickNodes="clickNodes"
+      />
+    </el-collapse-transition>
   </div>
 </template>
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { ref, computed, onMounted } from 'vue'
+import { app } from '@/main'
+import DropdownMenu from '@/views/application-workflow/component/DropdownMenu.vue'
 import { set } from 'lodash'
 import { iconComponent } from '../icons/utils'
 import { copyClick } from '@/utils/clipboard'
 import { WorkflowType } from '@/enums/workflow'
 import { MsgError, MsgConfirm } from '@/utils/message'
+
+const {
+  params: { id }
+} = app.config.globalProperties.$route as any
+
 const height = ref<{
   stepContainerHeight: number
   inputContainerHeight: number
@@ -100,7 +120,8 @@ const height = ref<{
   inputContainerHeight: 0,
   outputContainerHeight: 0
 })
-
+const showAnchor = ref<boolean>(false)
+const anchorData = ref<any>()
 const node_status = computed(() => {
   if (props.nodeModel.properties.status) {
     return props.nodeModel.properties.status
@@ -152,6 +173,23 @@ const resizeStepContainer = (wh: any) => {
   }
 }
 
+function clickNodes(item: any) {
+  const nodeModel = props.nodeModel.graphModel.addNode({
+    type: item.type,
+    properties: item.properties,
+    x: anchorData.value?.x + props.nodeModel.width + 100,
+    y: anchorData.value?.y - item.height
+  })
+  props.nodeModel.graphModel.addEdge({
+    type: 'app-edge',
+    sourceNodeId: props.nodeModel.id,
+    sourceAnchorId: anchorData.value?.id,
+    targetNodeId: nodeModel.id
+  })
+
+  closeNodeMenu()
+}
+
 const props = defineProps<{
   nodeModel: any
 }>()
@@ -173,6 +211,19 @@ const nodeFields = computed(() => {
 function showOperate(type: string) {
   return type !== WorkflowType.Base && type !== WorkflowType.Start
 }
+const openNodeMenu = (anchorValue: any) => {
+  showAnchor.value = true
+  anchorData.value = anchorValue
+}
+const closeNodeMenu = () => {
+  showAnchor.value = false
+  anchorData.value = undefined
+}
+onMounted(() => {
+  set(props.nodeModel, 'openNodeMenu', (anchorData: any) => {
+    showAnchor.value ? closeNodeMenu() : openNodeMenu(anchorData)
+  })
+})
 </script>
 <style lang="scss" scoped>
 .workflow-node-container {

ui/src/workflow/common/app-node.ts

@@ -18,7 +18,6 @@ class AppNode extends HtmlResize.view {
   constructor(props: any, VueNode: any) {
     super(props)
     this.isMounted = false
-
     this.r = h(VueNode, {
       properties: props.model.properties,
       nodeModel: props.model
@@ -70,6 +69,12 @@ class AppNode extends HtmlResize.view {
       },
       [
         lh('div', {
+          style: { zindex: 0 },
+          onClick: () => {
+            if (!isConnect && type == 'right') {
+              this.props.model.openNodeMenu(anchorData)
+            }
+          },
           dangerouslySetInnerHTML: {
             __html: isConnect
               ? `<svg width="100%" height="100%" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">

ui/src/workflow/common/data.ts

@@ -29,9 +29,11 @@ export const baseNode = {
   type: WorkflowType.Base,
   x: 200,
   y: 270,
+  text: '',
   properties: {
     height: 200,
     stepName: '基本信息',
+    input_field_list: [],
     node_data: {
       name: '',
       desc: '',
@@ -53,6 +55,7 @@ export const aiChatNode = {
   type: WorkflowType.AiChat,
   text: '与 AI 大模型进行对话',
   label: 'AI 对话',
+  height: 340,
   properties: {
     stepName: 'AI 对话',
     config: {
@@ -72,6 +75,7 @@ export const searchDatasetNode = {
   type: WorkflowType.SearchDataset,
   text: '关联知识库，查找与问题相关的分段',
   label: '知识库检索',
+  height: 355,
   properties: {
     stepName: '知识库检索',
     config: {
@@ -94,6 +98,7 @@ export const questionNode = {
   type: WorkflowType.Question,
   text: '根据历史聊天记录优化完善当前问题，更利于匹配知识库分段',
   label: '问题优化',
+  height: 345,
   properties: {
     stepName: '问题优化',
     config: {
@@ -110,6 +115,7 @@ export const conditionNode = {
   type: WorkflowType.Condition,
   text: '根据不同条件执行不同的节点',
   label: '判断器',
+  height: 175,
   properties: {
     width: 600,
     stepName: '判断器',
@@ -127,6 +133,7 @@ export const replyNode = {
   type: WorkflowType.Reply,
   text: '指定回复内容，引用变量会转换为字符串进行输出',
   label: '指定回复',
+  height: 210,
   properties: {
     stepName: '指定回复',
     config: {
@@ -143,6 +150,7 @@ export const rerankerNode = {
   type: WorkflowType.RrerankerNode,
   text: '使用重排模型对多个知识库的检索结果进行二次召回',
   label: '多路召回',
+  height: 252,
   properties: {
     stepName: '多路召回',
     config: {
@@ -171,6 +179,7 @@ export const functionNode = {
   type: WorkflowType.FunctionLibCustom,
   text: '通过执行自定义脚本，实现数据处理',
   label: '自定义函数',
+  height: 260,
   properties: {
     stepName: '自定义函数',
     config: {
@@ -187,6 +196,7 @@ export const functionLibNode = {
   type: WorkflowType.FunctionLib,
   text: '通过执行自定义脚本，实现数据处理',
   label: '自定义函数',
+  height: 170,
   properties: {
     stepName: '自定义函数',
     config: {

ui/src/workflow/nodes/base-node/index.ts

@@ -1,5 +1,6 @@
 import BaseNodeVue from './index.vue'
 import { AppNode, AppNodeModel } from '@/workflow/common/app-node'
+
 class BaseNode extends AppNode {
   constructor(props: any) {
     super(props, BaseNodeVue)

ui/src/workflow/nodes/base-node/index.vue

@@ -116,6 +116,7 @@
             <el-switch size="small" v-model="form_data.stt_model_enable" />
           </div>
         </template>
+
         <el-select
           v-model="form_data.stt_model_id"
           class="w-full"
@@ -182,8 +183,8 @@
           </div>
         </template>
         <el-radio-group v-model="form_data.tts_type">
-          <el-radio value="BROWSER">浏览器播放(免费)</el-radio>
+          <el-radio label="浏览器播放(免费)" value="BROWSER" />
-          <el-radio value="TTS">TTS模型</el-radio>
+          <el-radio label="TTS模型" value="TTS" />
         </el-radio-group>
         <el-select
           v-if="form_data.tts_type === 'TTS'"
@@ -246,6 +247,53 @@
       </el-form-item>
     </el-form>
 
+    <div class="flex-between">
+      全局变量
+      <el-button link type="primary" @click="openAddDialog()">
+        <el-icon class="mr-4"><Plus /></el-icon> 添加
+      </el-button>
+    </div>
+    <el-table :data="props.nodeModel.properties.input_field_list" class="mb-16">
+      <el-table-column prop="name" label="变量名" />
+      <el-table-column prop="variable" label="变量" />
+      <el-table-column label="输入类型">
+        <template #default="{ row }">
+          <el-tag type="info" class="info-tag" v-if="row.type === 'input'">文本框</el-tag>
+          <el-tag type="info" class="info-tag" v-if="row.type === 'date'">日期</el-tag>
+          <el-tag type="info" class="info-tag" v-if="row.type === 'select'">下拉选项</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="必填">
+        <template #default="{ row }">
+          <div @click.stop>
+            <el-switch size="small" v-model="row.is_required" />
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="source" label="赋值方式">
+        <template #default="{ row }">
+          {{ row.source === 'user_input' ? '用户输入' : '接口传参' }}
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="left" width="80">
+        <template #default="{ row, $index }">
+          <span class="mr-4">
+            <el-tooltip effect="dark" content="修改" placement="top">
+              <el-button type="primary" text @click.stop="openAddDialog(row, $index)">
+                <el-icon><EditPen /></el-icon>
+              </el-button>
+            </el-tooltip>
+          </span>
+          <el-tooltip effect="dark" content="删除" placement="top">
+            <el-button type="primary" text @click="deleteField($index)">
+              <el-icon>
+                <Delete />
+              </el-icon>
+            </el-button>
+          </el-tooltip>
+        </template>
+      </el-table-column>
+    </el-table>
     <!-- 回复内容弹出层 -->
     <el-dialog v-model="dialogVisible" title="开场白" append-to-body>
       <MdEditor v-model="cloneContent" :preview="false" :toolbars="[]" :footers="[]"></MdEditor>
@@ -255,8 +303,8 @@
         </div>
       </template>
     </el-dialog>
+    <FieldFormDialog ref="FieldFormDialogRef" @refresh="refreshFieldList" />
   </NodeContainer>
-  <FieldFormDialog ref="FieldFormDialogRef" @refresh="refreshFieldList" />
 </template>
 <script setup lang="ts">
 import { app } from '@/main'

ui/vite.config.ts

@@ -9,6 +9,7 @@ const envDir = './env'
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => {
   const ENV = loadEnv(mode, envDir)
+  const prefix = process.env.VITE_DYNAMIC_PREFIX || ENV.VITE_BASE_PATH;
   const proxyConf: Record<string, string | ProxyOptions> = {}
   proxyConf['/api'] = {
     target: 'http://127.0.0.1:8080',
@@ -18,7 +19,7 @@ export default defineConfig(({ mode }) => {
   return {
     preflight: false,
     lintOnSave: false,
-    base: ENV.VITE_BASE_PATH,
+    base: prefix,
     envDir: envDir,
     plugins: [vue(), DefineOptions()],
     server: {