fix: ui (#3302)

ui/src/main.ts

@@ -28,21 +28,21 @@ import 'highlight.js/styles/atom-one-dark.css'
 config({
   editorExtensions: {
     highlight: {
-      instance: highlight
+      instance: highlight,
     },
     screenfull: {
-      instance: screenfull
+      instance: screenfull,
     },
     katex: {
-      instance: katex
+      instance: katex,
     },
     cropper: {
-      instance: Cropper
+      instance: Cropper,
     },
     mermaid: {
-      instance: mermaid
-    }
-  }
+      instance: mermaid,
+    },
+  },
 })
 const app = createApp(App)
 app.use(createPinia())
@@ -62,4 +62,3 @@ app.use(router)
 app.use(i18n)
 app.use(Components)
 app.mount('#app')
-export { app }

ui/src/views/application/component/TTSModeParamSettingDialog.vue

@@ -46,13 +46,11 @@ import type { FormField } from '@/components/dynamics-form/type'
 import modelAPi from '@/api/model/model'
 import applicationApi from '@/api/application/application'
 import DynamicsForm from '@/components/dynamics-form/index.vue'
-import { keys } from 'lodash'
-import { app } from '@/main'
-import { MsgError } from '@/utils/message'
-
+import { useRoute } from 'vue-router'
+const route = useRoute()
 const {
-  params: { id }
-} = app.config.globalProperties.$route as any
+  params: { id },
+} = route as any
 
 const tts_model_id = ref('')
 const model_form_field = ref<Array<FormField>>([])
@@ -75,7 +73,7 @@ const open = (model_id: string, application_id?: string, model_setting_data?: an
     model_form_field.value = ok.data
     const resp = ok.data
       .map((item: any) => ({
-        [item.field]: item.show_default_value !== false ? item.default_value : undefined
+        [item.field]: item.show_default_value !== false ? item.default_value : undefined,
       }))
       .reduce((x, y) => ({ ...x, ...y }), {})
     // 删除不存在的字段
@@ -99,7 +97,7 @@ const reset_default = (model_id: string, application_id?: string) => {
     model_form_field.value = ok.data
     const model_setting_data = ok.data
       .map((item) => ({
-        [item.field]: item.show_default_value !== false ? item.default_value : undefined
+        [item.field]: item.show_default_value !== false ? item.default_value : undefined,
       }))
       .reduce((x, y) => ({ ...x, ...y }), {})
 
@@ -118,7 +116,7 @@ const audioPlayer = ref<HTMLAudioElement | null>(null)
 const testPlay = () => {
   const data = {
     ...form_data.value,
-    tts_model_id: tts_model_id.value
+    tts_model_id: tts_model_id.value,
   }
   // applicationApi
   //   .playDemoText(id as string, data, playLoading)

ui/src/workflow/common/NodeContainer.vue

@@ -166,7 +166,6 @@
 </template>
 <script setup lang="ts">
 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'
@@ -175,9 +174,11 @@ import { WorkflowType } from '@/enums/application'
 import { MsgError, MsgConfirm } from '@/utils/message'
 import type { FormInstance } from 'element-plus'
 import { t } from '@/locales'
+import { useRoute } from 'vue-router'
+const route = useRoute()
 const {
   params: { id },
-} = app.config.globalProperties.$route as any
+} = route as any
 
 const height = ref<{
   stepContainerHeight: number

ui/src/workflow/nodes/ai-chat-node/index.vue

@@ -170,7 +170,6 @@
 </template>
 <script setup lang="ts">
 import { cloneDeep, set, groupBy } from 'lodash'
-import { app } from '@/main'
 import NodeContainer from '@/workflow/common/NodeContainer.vue'
 import type { FormInstance } from 'element-plus'
 import { ref, computed, onMounted } from 'vue'
@@ -182,6 +181,8 @@ import AIModeParamSettingDialog from '@/views/application/component/AIModeParamS
 import { t } from '@/locales'
 import ReasoningParamSettingDialog from '@/views/application/component/ReasoningParamSettingDialog.vue'
 import McpServersDialog from '@/views/application/component/McpServersDialog.vue'
+import { useRoute } from 'vue-router'
+const route = useRoute()
 const { model } = useStore()
 
 const wheel = (e: any) => {
@@ -211,7 +212,7 @@ const model_change = (model_id?: string) => {
 }
 const {
   params: { id },
-} = app.config.globalProperties.$route as any
+} = route as any
 
 // @ts-ignore
 const defaultPrompt = `${t('views.applicationWorkflow.nodes.aiChatNode.defaultPrompt')}：

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

@@ -15,10 +15,10 @@
           prop="question_reference_address"
           :rules="{
             message: $t(
-              'views.applicationWorkflow.nodes.searchKnowledgeNode.searchQuestion.requiredMessage'
+              'views.applicationWorkflow.nodes.searchKnowledgeNode.searchQuestion.requiredMessage',
             ),
             trigger: 'blur',
-            required: true
+            required: true,
           }"
         >
           <NodeCascader
@@ -39,7 +39,7 @@
           :rules="{
             message: $t('views.chatLog.documentPlaceholder'),
             trigger: 'blur',
-            required: false
+            required: false,
           }"
         >
           <NodeCascader
@@ -57,10 +57,10 @@
           prop="image_list"
           :rules="{
             message: $t(
-              'views.applicationWorkflow.nodes.imageUnderstandNode.image.requiredMessage'
+              'views.applicationWorkflow.nodes.imageUnderstandNode.image.requiredMessage',
             ),
             trigger: 'blur',
-            required: false
+            required: false,
           }"
         >
           <NodeCascader
@@ -81,7 +81,7 @@
           :rules="{
             message: $t('views.applicationWorkflow.nodes.speechToTextNode.audio.placeholder'),
             trigger: 'blur',
-            required: false
+            required: false,
           }"
         >
           <NodeCascader
@@ -100,8 +100,8 @@
               {
                 required: field.is_required,
                 message: `${$t('common.inputPlaceholder')}${field.variable}`,
-                trigger: 'blur'
-              }
+                trigger: 'blur',
+              },
             ]"
           >
             <NodeCascader
@@ -124,8 +124,8 @@
               {
                 required: field.required,
                 message: `${$t('common.inputPlaceholder')}${field.label}`,
-                trigger: 'blur'
-              }
+                trigger: 'blur',
+              },
             ]"
           >
             <NodeCascader
@@ -167,26 +167,26 @@
 
 <script setup lang="ts">
 import { set, groupBy, create, cloneDeep } from 'lodash'
-import { app } from '@/main'
 import NodeContainer from '@/workflow/common/NodeContainer.vue'
 import { ref, computed, onMounted, onActivated } from 'vue'
 import NodeCascader from '@/workflow/common/NodeCascader.vue'
 import type { FormInstance } from 'element-plus'
 import applicationApi from '@/api/application/application'
 import { isWorkFlow } from '@/utils/application'
-
+import { useRoute } from 'vue-router'
+const route = useRoute()
 const form = {
   question_reference_address: ['start-node', 'question'],
   api_input_field_list: [],
   user_input_field_list: [],
   document_list: ['start-node', 'document'],
   image_list: ['start-node', 'image'],
-  audio_list: ['start-node', 'audio']
+  audio_list: ['start-node', 'audio'],
 }
 
 const {
-  params: { id }
-} = app.config.globalProperties.$route as any
+  params: { id },
+} = route as any
 
 const applicationNodeFormRef = ref<FormInstance>()
 
@@ -201,7 +201,7 @@ const form_data = computed({
   },
   set: (value) => {
     set(props.nodeModel.properties, 'node_data', value)
-  }
+  },
 })
 
 function handleFileUpload(type: string, isEnabled: boolean) {

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

@@ -167,7 +167,6 @@
   </NodeContainer>
 </template>
 <script setup lang="ts">
-import { app } from '@/main'
 import { groupBy, set } from 'lodash'
 import NodeContainer from '@/workflow/common/NodeContainer.vue'
 import type { FormInstance } from 'element-plus'
@@ -180,10 +179,11 @@ import TTSModeParamSettingDialog from '@/views/application/component/TTSModePara
 import ApiInputFieldTable from './component/ApiInputFieldTable.vue'
 import UserInputFieldTable from './component/UserInputFieldTable.vue'
 import FileUploadSettingDialog from '@/workflow/nodes/base-node/component/FileUploadSettingDialog.vue'
-
+import { useRoute } from 'vue-router'
+const route = useRoute()
 const {
   params: { id },
-} = app.config.globalProperties.$route as any
+} = route as any
 
 const props = defineProps<{ nodeModel: any }>()
 

ui/src/workflow/nodes/image-generate/index.vue

@@ -156,16 +156,18 @@ import NodeContainer from '@/workflow/common/NodeContainer.vue'
 import { computed, onMounted, ref } from 'vue'
 import { groupBy, set } from 'lodash'
 import applicationApi from '@/api/application/application'
-import { app } from '@/main'
+
 import useStore from '@/stores'
 import type { FormInstance } from 'element-plus'
 import AIModeParamSettingDialog from '@/views/application/component/AIModeParamSettingDialog.vue'
 import { t } from '@/locales'
 const { model } = useStore()
 
+import { useRoute } from 'vue-router'
+const route = useRoute()
 const {
   params: { id },
-} = app.config.globalProperties.$route as any
+} = route as any
 
 const props = defineProps<{ nodeModel: any }>()
 const modelOptions = ref<any>(null)

ui/src/workflow/nodes/image-understand/index.vue

@@ -17,9 +17,9 @@
           :rules="{
             required: true,
             message: $t(
-              'views.applicationWorkflow.nodes.imageUnderstandNode.model.requiredMessage'
+              'views.applicationWorkflow.nodes.imageUnderstandNode.model.requiredMessage',
             ),
-            trigger: 'change'
+            trigger: 'change',
           }"
         >
           <template #label>
@@ -70,7 +70,7 @@
           :rules="{
             required: true,
             message: $t('views.application.form.prompt.requiredMessage'),
-            trigger: 'blur'
+            trigger: 'blur',
           }"
         >
           <template #label>
@@ -82,9 +82,7 @@
                 >
               </div>
               <el-tooltip effect="dark" placement="right" popper-class="max-w-200">
-                <template #content
-                  >{{ $t('views.application.form.prompt.tooltip') }}
-                </template>
+                <template #content>{{ $t('views.application.form.prompt.tooltip') }} </template>
                 <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
               </el-tooltip>
             </div>
@@ -123,9 +121,9 @@
             type: 'array',
             required: true,
             message: $t(
-              'views.applicationWorkflow.nodes.imageUnderstandNode.image.requiredMessage'
+              'views.applicationWorkflow.nodes.imageUnderstandNode.image.requiredMessage',
             ),
-            trigger: 'change'
+            trigger: 'change',
           }"
         >
           <template #label
@@ -149,10 +147,9 @@
           <template #label>
             <div class="flex align-center">
               <div class="mr-4">
-                <span
-                  >{{ $t('views.applicationWorkflow.nodes.aiChatNode.returnContent.label')
-                  }}</span
-                >
+                <span>{{
+                  $t('views.applicationWorkflow.nodes.aiChatNode.returnContent.label')
+                }}</span>
               </div>
               <el-tooltip effect="dark" placement="right" popper-class="max-w-200">
                 <template #content>
@@ -175,7 +172,7 @@ import NodeContainer from '@/workflow/common/NodeContainer.vue'
 import { computed, onMounted, ref } from 'vue'
 import { groupBy, set } from 'lodash'
 import applicationApi from '@/api/application/application'
-import { app } from '@/main'
+
 import useStore from '@/stores'
 import NodeCascader from '@/workflow/common/NodeCascader.vue'
 import type { FormInstance } from 'element-plus'
@@ -183,9 +180,11 @@ import AIModeParamSettingDialog from '@/views/application/component/AIModeParamS
 import { t } from '@/locales'
 const { model } = useStore()
 
+import { useRoute } from 'vue-router'
+const route = useRoute()
 const {
-  params: { id }
-} = app.config.globalProperties.$route as any
+  params: { id },
+} = route as any
 
 const props = defineProps<{ nodeModel: any }>()
 const modelOptions = ref<any>(null)
@@ -196,7 +195,7 @@ const nodeCascaderRef = ref()
 const validate = () => {
   return Promise.all([
     nodeCascaderRef.value ? nodeCascaderRef.value.validate() : Promise.resolve(''),
-    aiChatNodeFormRef.value?.validate()
+    aiChatNodeFormRef.value?.validate(),
   ]).catch((err: any) => {
     return Promise.reject({ node: props.nodeModel, errMessage: err })
   })
@@ -223,7 +222,7 @@ const form = {
   is_result: true,
   temperature: null,
   max_tokens: null,
-  image_list: ['start-node', 'image']
+  image_list: ['start-node', 'image'],
 }
 
 const form_data = computed({
@@ -237,7 +236,7 @@ const form_data = computed({
   },
   set: (value) => {
     set(props.nodeModel.properties, 'node_data', value)
-  }
+  },
 })
 
 function getModel() {

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

@@ -133,7 +133,7 @@
 </template>
 <script setup lang="ts">
 import { set, groupBy } from 'lodash'
-import { app } from '@/main'
+
 import NodeContainer from '@/workflow/common/NodeContainer.vue'
 import AIModeParamSettingDialog from '@/views/application/component/AIModeParamSettingDialog.vue'
 import type { FormInstance } from 'element-plus'
@@ -142,6 +142,11 @@ import applicationApi from '@/api/application/application'
 import useStore from '@/stores'
 import { isLastNode } from '@/workflow/common/data'
 import { t } from '@/locales'
+import { useRoute } from 'vue-router'
+const route = useRoute()
+const {
+  params: { id },
+} = route as any
 const { model } = useStore()
 const AIModeParamSettingDialogRef = ref<InstanceType<typeof AIModeParamSettingDialog>>()
 
@@ -169,9 +174,6 @@ function submitDialog(val: string) {
 function submitSystemDialog(val: string) {
   set(props.nodeModel.properties.node_data, 'system', val)
 }
-const {
-  params: { id },
-} = app.config.globalProperties.$route as any
 
 // @ts-ignore
 const defaultPrompt = `${t('views.applicationWorkflow.nodes.questionNode.defaultPrompt1')}{{${t('views.applicationWorkflow.nodes.startNode.label')}.question}}

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

@@ -69,10 +69,14 @@
             </el-col>
           </el-row>
         </el-form-item>
-        <el-form-item :label="$t('views.applicationWorkflow.nodes.searchKnowledgeNode.searchParam')">
+        <el-form-item
+          :label="$t('views.applicationWorkflow.nodes.searchKnowledgeNode.searchParam')"
+        >
           <template #label>
             <div class="flex-between">
-              <span>{{ $t('views.applicationWorkflow.nodes.searchKnowledgeNode.searchParam') }}</span>
+              <span>{{
+                $t('views.applicationWorkflow.nodes.searchKnowledgeNode.searchParam')
+              }}</span>
               <el-button type="primary" link @click="openParamSettingDialog">
                 <el-icon><Setting /></el-icon>
               </el-button>
@@ -175,15 +179,17 @@ import { ref, computed, onMounted } from 'vue'
 
 import applicationApi from '@/api/application/application'
 import useStore from '@/stores'
-import { app } from '@/main'
 
+import { useRoute } from 'vue-router'
+const route = useRoute()
+const {
+  params: { id },
+} = route as any
 const { model } = useStore()
 const props = defineProps<{ nodeModel: any }>()
 
 const ParamSettingDialogRef = ref<InstanceType<typeof ParamSettingDialog>>()
-const {
-  params: { id },
-} = app.config.globalProperties.$route as any
+
 const form = {
   reranker_reference_list: [[]],
   reranker_model_id: '',

ui/src/workflow/nodes/search-knowledge-node/index.vue

@@ -39,10 +39,14 @@
             </template>
           </div>
         </el-form-item>
-        <el-form-item :label="$t('views.applicationWorkflow.nodes.searchknowledgeNode.searchParam')">
+        <el-form-item
+          :label="$t('views.applicationWorkflow.nodes.searchknowledgeNode.searchParam')"
+        >
           <template #label>
             <div class="flex-between">
-              <span>{{ $t('views.applicationWorkflow.nodes.searchknowledgeNode.searchParam') }}</span>
+              <span>{{
+                $t('views.applicationWorkflow.nodes.searchknowledgeNode.searchParam')
+              }}</span>
               <el-button type="primary" link @click="openParamSettingDialog">
                 <el-icon><Setting /></el-icon>
               </el-button>
@@ -112,7 +116,7 @@
 </template>
 <script setup lang="ts">
 import { set } from 'lodash'
-import { app } from '@/main'
+
 import NodeContainer from '@/workflow/common/NodeContainer.vue'
 import NodeCascader from '@/workflow/common/NodeCascader.vue'
 import AddknowledgeDialog from '@/views/application/component/AddKnowledgeDialog.vue'
@@ -123,9 +127,6 @@ import { relatedObject } from '@/utils/utils'
 import { SearchMode } from '@/enums/application'
 import useStore from '@/stores'
 const { knowledge, application, user } = useStore()
-const {
-  params: { id },
-} = app.config.globalProperties.$route as any
 
 const props = defineProps<{ nodeModel: any }>()
 const nodeCascaderRef = ref()

ui/src/workflow/nodes/speech-to-text-node/index.vue

@@ -17,7 +17,7 @@
           :rules="{
             required: true,
             message: $t('views.application.form.voiceInput.placeholder'),
-            trigger: 'change'
+            trigger: 'change',
           }"
         >
           <template #label>
@@ -46,7 +46,7 @@
           :rules="{
             message: $t('views.applicationWorkflow.nodes.speechToTextNode.audio.label'),
             trigger: 'change',
-            required: true
+            required: true,
           }"
         >
           <template #label>
@@ -75,10 +75,9 @@
           <template #label>
             <div class="flex align-center">
               <div class="mr-4">
-                <span
-                  >{{ $t('views.applicationWorkflow.nodes.aiChatNode.returnContent.label')
-                  }}</span
-                >
+                <span>{{
+                  $t('views.applicationWorkflow.nodes.aiChatNode.returnContent.label')
+                }}</span>
               </div>
               <el-tooltip effect="dark" placement="right" popper-class="max-w-200">
                 <template #content>
@@ -100,16 +99,16 @@ import NodeContainer from '@/workflow/common/NodeContainer.vue'
 import { computed, onMounted, ref } from 'vue'
 import { groupBy, set } from 'lodash'
 import applicationApi from '@/api/application/application'
-import { app } from '@/main'
+
 import useStore from '@/stores'
 import NodeCascader from '@/workflow/common/NodeCascader.vue'
 import type { FormInstance } from 'element-plus'
-
-const { model } = useStore()
-
+import { useRoute } from 'vue-router'
+const route = useRoute()
 const {
-  params: { id }
-} = app.config.globalProperties.$route as any
+  params: { id },
+} = route as any
+const { model } = useStore()
 
 const props = defineProps<{ nodeModel: any }>()
 const modelOptions = ref<any>(null)
@@ -119,7 +118,7 @@ const nodeCascaderRef = ref()
 const validate = () => {
   return Promise.all([
     nodeCascaderRef.value ? nodeCascaderRef.value.validate() : Promise.resolve(''),
-    aiChatNodeFormRef.value?.validate()
+    aiChatNodeFormRef.value?.validate(),
   ]).catch((err: any) => {
     return Promise.reject({ node: props.nodeModel, errMessage: err })
   })
@@ -138,7 +137,7 @@ const wheel = (e: any) => {
 const form = {
   stt_model_id: '',
   is_result: true,
-  audio_list: []
+  audio_list: [],
 }
 
 const form_data = computed({
@@ -152,7 +151,7 @@ const form_data = computed({
   },
   set: (value) => {
     set(props.nodeModel.properties, 'node_data', value)
-  }
+  },
 })
 
 function getModel() {

ui/src/workflow/nodes/text-to-speech-node/index.vue

@@ -17,7 +17,7 @@
           :rules="{
             required: true,
             message: $t('views.application.form.voicePlay.placeholder'),
-            trigger: 'change'
+            trigger: 'change',
           }"
         >
           <template #label>
@@ -55,7 +55,7 @@
           :rules="{
             message: $t('views.applicationWorkflow.nodes.textToSpeechNode.content.label'),
             trigger: 'blur',
-            required: true
+            required: true,
           }"
         >
           <template #label>
@@ -109,21 +109,21 @@ import NodeContainer from '@/workflow/common/NodeContainer.vue'
 import { computed, onMounted, ref } from 'vue'
 import { groupBy, set } from 'lodash'
 import applicationApi from '@/api/application/application'
-import { app } from '@/main'
 import useStore from '@/stores'
 import NodeCascader from '@/workflow/common/NodeCascader.vue'
 import type { FormInstance } from 'element-plus'
 import { MsgSuccess } from '@/utils/message'
 import { t } from '@/locales'
+import { useRoute } from 'vue-router'
+const route = useRoute()
+const {
+  params: { id },
+} = route as any
 import TTSModeParamSettingDialog from '@/views/application/component/TTSModeParamSettingDialog.vue'
 
 const TTSModeParamSettingDialogRef = ref<InstanceType<typeof TTSModeParamSettingDialog>>()
 const { model } = useStore()
 
-const {
-  params: { id }
-} = app.config.globalProperties.$route as any
-
 const props = defineProps<{ nodeModel: any }>()
 const modelOptions = ref<any>(null)
 
@@ -132,7 +132,7 @@ const nodeCascaderRef = ref()
 const validate = () => {
   return Promise.all([
     nodeCascaderRef.value ? nodeCascaderRef.value.validate() : Promise.resolve(''),
-    aiChatNodeFormRef.value?.validate()
+    aiChatNodeFormRef.value?.validate(),
   ]).catch((err: any) => {
     return Promise.reject({ node: props.nodeModel, errMessage: err })
   })
@@ -152,7 +152,7 @@ const form = {
   tts_model_id: '',
   is_result: true,
   content_list: [],
-  model_params_setting: {}
+  model_params_setting: {},
 }
 
 const form_data = computed({
@@ -166,7 +166,7 @@ const form_data = computed({
   },
   set: (value) => {
     set(props.nodeModel.properties, 'node_data', value)
-  }
+  },
 })
 
 // todo

ui/src/workflow/nodes/tool-lib-node/index.vue

@@ -22,7 +22,7 @@
                   item.source === 'reference'
                     ? $t('views.tool.functionForm.form.param.selectPlaceholder')
                     : $t('views.tool.functionForm.form.param.inputPlaceholder'),
-                trigger: 'blur'
+                trigger: 'blur',
               }"
             >
               <template #label>
@@ -64,10 +64,9 @@
         <template #label>
           <div class="flex align-center">
             <div class="mr-4">
-              <span
-                >{{ $t('views.applicationWorkflow.nodes.aiChatNode.returnContent.label')
-                }}</span
-              >
+              <span>{{
+                $t('views.applicationWorkflow.nodes.aiChatNode.returnContent.label')
+              }}</span>
             </div>
             <el-tooltip effect="dark" placement="right" popper-class="max-w-200">
               <template #content>
@@ -90,16 +89,14 @@ import type { FormInstance } from 'element-plus'
 import { ref, computed, onMounted } from 'vue'
 import { isLastNode } from '@/workflow/common/data'
 import applicationApi from '@/api/application/application'
-import { app } from '@/main'
+
 const props = defineProps<{ nodeModel: any }>()
 
 const nodeCascaderRef = ref()
-const {
-  params: { id }
-} = app.config.globalProperties.$route as any
+
 const form = {
   input_field_list: [],
-  is_result: false
+  is_result: false,
 }
 
 const chat_data = computed({
@@ -113,7 +110,7 @@ const chat_data = computed({
   },
   set: (value) => {
     set(props.nodeModel.properties, 'node_data', value)
-  }
+  },
 })
 
 const FunctionNodeFormRef = ref<FormInstance>()