From 8a1506ff4aab7887f7422bb5632852ef54c8507b Mon Sep 17 00:00:00 2001
From: wxg0103 <727495428@qq.com>
Date: Tue, 23 Sep 2025 14:23:57 +0800
Subject: [PATCH] fix: add focus event to ModelSelect for dynamic model
 fetching
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

--bug=1062087 --user=王孝刚 【应用编排】在图片生成节点-选择模型下拉框中添加模型后，没有及时回显 https://www.tapd.cn/62980211/s/1777730
---
 .../workflow/nodes/image-to-video/index.vue   | 62 +++++++++++--------
 ui/src/workflow/nodes/text-to-video/index.vue |  1 +
 2 files changed, 36 insertions(+), 27 deletions(-)

diff --git a/ui/src/workflow/nodes/image-to-video/index.vue b/ui/src/workflow/nodes/image-to-video/index.vue
index 0d7e0a4e4..0665524fd 100644
--- a/ui/src/workflow/nodes/image-to-video/index.vue
+++ b/ui/src/workflow/nodes/image-to-video/index.vue
@@ -24,7 +24,8 @@
             <div class="flex-between w-full">
               <div>
                 <span
-                  >{{ $t('views.applicationWorkflow.nodes.imageToVideoGenerate.model.label')
+                >{{
+                    $t('views.applicationWorkflow.nodes.imageToVideoGenerate.model.label')
                   }}<span class="color-danger">*</span></span
                 >
               </div>
@@ -45,6 +46,7 @@
             @wheel="wheel"
             :teleported="false"
             v-model="form_data.model_id"
+            @focus="getSelectModel"
             :placeholder="
               $t('views.applicationWorkflow.nodes.imageToVideoGenerate.model.requiredMessage')
             "
@@ -67,13 +69,14 @@
             <div class="flex align-center">
               <div class="mr-4">
                 <span
-                  >{{ $t('views.applicationWorkflow.nodes.imageToVideoGenerate.prompt.label')
+                >{{
+                    $t('views.applicationWorkflow.nodes.imageToVideoGenerate.prompt.label')
                   }}<span class="color-danger">*</span></span
                 >
               </div>
               <el-tooltip effect="dark" placement="right" popper-class="max-w-200">
                 <template #content
-                  >{{ $t('views.applicationWorkflow.nodes.imageToVideoGenerate.prompt.tooltip') }}
+                >{{ $t('views.applicationWorkflow.nodes.imageToVideoGenerate.prompt.tooltip') }}
                 </template>
                 <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
               </el-tooltip>
@@ -100,12 +103,12 @@
             <div class="flex align-center">
               <div class="mr-4">
                 <span>{{
-                  $t('views.applicationWorkflow.nodes.imageToVideoGenerate.negative_prompt.label')
-                }}</span>
+                    $t('views.applicationWorkflow.nodes.imageToVideoGenerate.negative_prompt.label')
+                  }}</span>
               </div>
               <el-tooltip effect="dark" placement="right" popper-class="max-w-200">
                 <template #content
-                  >{{
+                >{{
                     $t('views.applicationWorkflow.nodes.imageToVideoGenerate.negative_prompt.tooltip')
                   }}
                 </template>
@@ -136,7 +139,8 @@
           }"
         >
           <template #label
-            >{{ $t('views.applicationWorkflow.nodes.imageToVideoGenerate.first_frame.label')
+          >{{
+              $t('views.applicationWorkflow.nodes.imageToVideoGenerate.first_frame.label')
             }}<span class="color-danger">*</span></template
           >
           <NodeCascader
@@ -161,8 +165,10 @@
           }"
         >
           <template #label
-            >{{ $t('views.applicationWorkflow.nodes.imageToVideoGenerate.last_frame.label')
-            }}</template
+          >{{
+              $t('views.applicationWorkflow.nodes.imageToVideoGenerate.last_frame.label')
+            }}
+          </template
           >
           <NodeCascader
             ref="nodeCascaderRef"
@@ -183,8 +189,8 @@
             <div class="flex align-center">
               <div class="mr-4">
                 <span>{{
-                  $t('views.applicationWorkflow.nodes.aiChatNode.returnContent.label')
-                }}</span>
+                    $t('views.applicationWorkflow.nodes.aiChatNode.returnContent.label')
+                  }}</span>
               </div>
               <el-tooltip effect="dark" placement="right" popper-class="max-w-200">
                 <template #content>
@@ -194,29 +200,30 @@
               </el-tooltip>
             </div>
           </template>
-          <el-switch size="small" v-model="form_data.is_result" />
+          <el-switch size="small" v-model="form_data.is_result"/>
         </el-form-item>
       </el-form>
     </el-card>
-    <AIModeParamSettingDialog ref="AIModeParamSettingDialogRef" @refresh="refreshParam" />
+    <AIModeParamSettingDialog ref="AIModeParamSettingDialogRef" @refresh="refreshParam"/>
   </NodeContainer>
 </template>
 
 <script setup lang="ts">
 import NodeContainer from '@/workflow/common/NodeContainer.vue'
-import { computed, nextTick, onMounted, ref, inject } from 'vue'
-import { groupBy, set } from 'lodash'
-import type { FormInstance } from 'element-plus'
+import {computed, nextTick, onMounted, ref, inject} from 'vue'
+import {groupBy, set} from 'lodash'
+import type {FormInstance} from 'element-plus'
 import AIModeParamSettingDialog from '@/views/application/component/AIModeParamSettingDialog.vue'
-import { t } from '@/locales'
-import { useRoute } from 'vue-router'
-import { loadSharedApi } from '@/utils/dynamics-api/shared-api'
+import {t} from '@/locales'
+import {useRoute} from 'vue-router'
+import {loadSharedApi} from '@/utils/dynamics-api/shared-api'
 import NodeCascader from "@/workflow/common/NodeCascader.vue";
+
 const getApplicationDetail = inject('getApplicationDetail') as any
 const route = useRoute()
 
 const {
-  params: { id },
+  params: {id},
 } = route as any
 
 const apiType = computed(() => {
@@ -234,7 +241,7 @@ const AIModeParamSettingDialogRef = ref<InstanceType<typeof AIModeParamSettingDi
 const aiChatNodeFormRef = ref<FormInstance>()
 const validate = () => {
   return aiChatNodeFormRef.value?.validate().catch((err) => {
-    return Promise.reject({ node: props.nodeModel, errMessage: err })
+    return Promise.reject({node: props.nodeModel, errMessage: err})
   })
 }
 
@@ -279,17 +286,18 @@ const form_data = computed({
 })
 
 const application = getApplicationDetail()
+
 function getSelectModel() {
   const obj =
     apiType.value === 'systemManage'
       ? {
-          model_type: 'ITV',
-          workspace_id: application.value?.workspace_id,
-        }
+        model_type: 'ITV',
+        workspace_id: application.value?.workspace_id,
+      }
       : {
-          model_type: 'ITV',
-        }
-  loadSharedApi({ type: 'model', systemType: apiType.value })
+        model_type: 'ITV',
+      }
+  loadSharedApi({type: 'model', systemType: apiType.value})
     .getSelectModelList(obj)
     .then((res: any) => {
       modelOptions.value = groupBy(res?.data, 'provider')
diff --git a/ui/src/workflow/nodes/text-to-video/index.vue b/ui/src/workflow/nodes/text-to-video/index.vue
index 21413733b..f0def5ec4 100644
--- a/ui/src/workflow/nodes/text-to-video/index.vue
+++ b/ui/src/workflow/nodes/text-to-video/index.vue
@@ -43,6 +43,7 @@
           <ModelSelect
             @change="model_change"
             @wheel="wheel"
+             @focus="getSelectModel"
             :teleported="false"
             v-model="form_data.model_id"
             :placeholder="