fix: ui (#3302)

Author: shaohuzhang1

ui/src/assets/404.png

@@ -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/main.ts

@@ -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/views/application/component/TTSModeParamSettingDialog.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/common/NodeContainer.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/ai-chat-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/application-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/base-node/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-generate/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,17 +172,19 @@ 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 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
+  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() {