From e9db3a598c0d9d2ebf9f85e1afd59f64a6d8ffcf Mon Sep 17 00:00:00 2001
From: wxg0103 <727495428@qq.com>
Date: Tue, 28 Oct 2025 15:11:04 +0800
Subject: [PATCH] feat: add generate prompt button and improve code formatting
 in index.vue

---
 .../workflow/nodes/image-understand/index.vue | 73 +++++++++++++------
 .../workflow/nodes/video-understand/index.vue | 73 +++++++++++++------
 2 files changed, 98 insertions(+), 48 deletions(-)

diff --git a/ui/src/workflow/nodes/image-understand/index.vue b/ui/src/workflow/nodes/image-understand/index.vue
index e1abe83b0..2da2fb0c6 100644
--- a/ui/src/workflow/nodes/image-understand/index.vue
+++ b/ui/src/workflow/nodes/image-understand/index.vue
@@ -26,7 +26,8 @@
             <div class="flex-between w-full">
               <div>
                 <span
-                  >{{ t('views.applicationWorkflow.nodes.imageUnderstandNode.model.label')
+                >{{
+                    t('views.applicationWorkflow.nodes.imageUnderstandNode.model.label')
                   }}<span class="color-danger">*</span></span
                 >
               </div>
@@ -68,6 +69,14 @@
                   <AppIcon iconName="app-warning" class="app-warning-icon ml-4"></AppIcon>
                 </el-tooltip>
               </div>
+              <el-button
+                type="primary"
+                link
+                @click="openGeneratePromptDialog(form_data.model_id)"
+                :disabled="!form_data.model_id"
+              >
+                <AppIcon iconName="app-generate-star"></AppIcon>
+              </el-button>
             </div>
           </template>
           <MdEditorMagnify
@@ -91,12 +100,13 @@
             <div class="flex align-center">
               <div class="mr-4">
                 <span
-                  >{{ $t('views.application.form.prompt.label')
+                >{{
+                    $t('views.application.form.prompt.label')
                   }}<span class="color-danger">*</span></span
                 >
               </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>
@@ -115,8 +125,8 @@
             <div class="flex-between">
               <div>{{ $t('views.application.form.historyRecord.label') }}</div>
               <el-select v-model="form_data.dialogue_type" type="small" style="width: 100px">
-                <el-option :label="$t('views.applicationWorkflow.node')" value="NODE" />
-                <el-option :label="$t('views.applicationWorkflow.workflow')" value="WORKFLOW" />
+                <el-option :label="$t('views.applicationWorkflow.node')" value="NODE"/>
+                <el-option :label="$t('views.applicationWorkflow.workflow')" value="WORKFLOW"/>
               </el-select>
             </div>
           </template>
@@ -142,7 +152,8 @@
           }"
         >
           <template #label
-            >{{ $t('views.applicationWorkflow.nodes.imageUnderstandNode.image.label')
+          >{{
+              $t('views.applicationWorkflow.nodes.imageUnderstandNode.image.label')
             }}<span class="color-danger">*</span></template
           >
           <NodeCascader
@@ -163,8 +174,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>
@@ -174,29 +185,32 @@
               </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"/>
+    <GeneratePromptDialog @replace="replace" ref="GeneratePromptDialogRef"/>
   </NodeContainer>
 </template>
 
 <script setup lang="ts">
 import NodeContainer from '@/workflow/common/NodeContainer.vue'
-import { computed, onMounted, ref, inject } from 'vue'
-import { groupBy, set } from 'lodash'
+import {computed, onMounted, ref, inject} from 'vue'
+import {groupBy, set} from 'lodash'
 import NodeCascader from '@/workflow/common/NodeCascader.vue'
-import type { FormInstance } from 'element-plus'
+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 GeneratePromptDialog from "@/views/application/component/GeneratePromptDialog.vue";
+
 const getApplicationDetail = inject('getApplicationDetail') as any
 const route = useRoute()
 
 const {
-  params: { id },
+  params: {id},
 } = route as any
 
 const apiType = computed(() => {
@@ -218,7 +232,7 @@ const validate = () => {
     nodeCascaderRef.value ? nodeCascaderRef.value.validate() : Promise.resolve(''),
     aiChatNodeFormRef.value?.validate(),
   ]).catch((err: any) => {
-    return Promise.reject({ node: props.nodeModel, errMessage: err })
+    return Promise.reject({node: props.nodeModel, errMessage: err})
   })
 }
 
@@ -261,17 +275,18 @@ const form_data = computed({
 })
 
 const application = getApplicationDetail()
+
 function getSelectModel() {
   const obj =
     apiType.value === 'systemManage'
       ? {
-          model_type: 'IMAGE',
-          workspace_id: application.value?.workspace_id,
-        }
+        model_type: 'IMAGE',
+        workspace_id: application.value?.workspace_id,
+      }
       : {
-          model_type: 'IMAGE',
-        }
-  loadSharedApi({ type: 'model', systemType: apiType.value })
+        model_type: 'IMAGE',
+      }
+  loadSharedApi({type: 'model', systemType: apiType.value})
     .getSelectModelList(obj)
     .then((res: any) => {
       modelOptions.value = groupBy(res?.data, 'provider')
@@ -296,6 +311,16 @@ function refreshParam(data: any) {
   set(props.nodeModel.properties.node_data, 'model_params_setting', data)
 }
 
+const GeneratePromptDialogRef = ref<InstanceType<typeof GeneratePromptDialog>>()
+const openGeneratePromptDialog = (modelId: string) => {
+  if (modelId) {
+    GeneratePromptDialogRef.value?.open(modelId, id)
+  }
+}
+const replace = (v: any) => {
+  set(props.nodeModel.properties.node_data, 'system', v)
+}
+
 onMounted(() => {
   getSelectModel()
 
diff --git a/ui/src/workflow/nodes/video-understand/index.vue b/ui/src/workflow/nodes/video-understand/index.vue
index d02c8e890..4a014647f 100644
--- a/ui/src/workflow/nodes/video-understand/index.vue
+++ b/ui/src/workflow/nodes/video-understand/index.vue
@@ -26,7 +26,8 @@
             <div class="flex-between w-full">
               <div>
                 <span
-                  >{{ t('views.applicationWorkflow.nodes.videoUnderstandNode.model.label')
+                >{{
+                    t('views.applicationWorkflow.nodes.videoUnderstandNode.model.label')
                   }}<span class="color-danger">*</span></span
                 >
               </div>
@@ -68,6 +69,14 @@
                   <AppIcon iconName="app-warning" class="app-warning-icon ml-4"></AppIcon>
                 </el-tooltip>
               </div>
+              <el-button
+                type="primary"
+                link
+                @click="openGeneratePromptDialog(form_data.model_id)"
+                :disabled="!form_data.model_id"
+              >
+                <AppIcon iconName="app-generate-star"></AppIcon>
+              </el-button>
             </div>
           </template>
           <MdEditorMagnify
@@ -91,15 +100,17 @@
             <div class="flex align-center">
               <div class="mr-4">
                 <span
-                  >{{ $t('views.application.form.prompt.label')
+                >{{
+                    $t('views.application.form.prompt.label')
                   }}<span class="color-danger">*</span></span
                 >
               </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>
+
           </template>
           <MdEditorMagnify
             @wheel="wheel"
@@ -115,8 +126,8 @@
             <div class="flex-between">
               <div>{{ $t('views.application.form.historyRecord.label') }}</div>
               <el-select v-model="form_data.dialogue_type" type="small" style="width: 100px">
-                <el-option :label="$t('views.applicationWorkflow.node')" value="NODE" />
-                <el-option :label="$t('views.applicationWorkflow.workflow')" value="WORKFLOW" />
+                <el-option :label="$t('views.applicationWorkflow.node')" value="NODE"/>
+                <el-option :label="$t('views.applicationWorkflow.workflow')" value="WORKFLOW"/>
               </el-select>
             </div>
           </template>
@@ -142,7 +153,8 @@
           }"
         >
           <template #label
-            >{{ $t('views.applicationWorkflow.nodes.videoUnderstandNode.image.label')
+          >{{
+              $t('views.applicationWorkflow.nodes.videoUnderstandNode.image.label')
             }}<span class="color-danger">*</span></template
           >
           <NodeCascader
@@ -163,8 +175,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>
@@ -174,29 +186,32 @@
               </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"/>
+    <GeneratePromptDialog @replace="replace" ref="GeneratePromptDialogRef"/>
   </NodeContainer>
 </template>
 
 <script setup lang="ts">
 import NodeContainer from '@/workflow/common/NodeContainer.vue'
-import { computed, onMounted, ref, inject } from 'vue'
-import { groupBy, set } from 'lodash'
+import {computed, onMounted, ref, inject} from 'vue'
+import {groupBy, set} from 'lodash'
 import NodeCascader from '@/workflow/common/NodeCascader.vue'
-import type { FormInstance } from 'element-plus'
+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 GeneratePromptDialog from "@/views/application/component/GeneratePromptDialog.vue";
+
 const getApplicationDetail = inject('getApplicationDetail') as any
 const route = useRoute()
 
 const {
-  params: { id },
+  params: {id},
 } = route as any
 
 const apiType = computed(() => {
@@ -218,7 +233,7 @@ const validate = () => {
     nodeCascaderRef.value ? nodeCascaderRef.value.validate() : Promise.resolve(''),
     aiChatNodeFormRef.value?.validate(),
   ]).catch((err: any) => {
-    return Promise.reject({ node: props.nodeModel, errMessage: err })
+    return Promise.reject({node: props.nodeModel, errMessage: err})
   })
 }
 
@@ -261,17 +276,18 @@ const form_data = computed({
 })
 
 const application = getApplicationDetail()
+
 function getSelectModel() {
   const obj =
     apiType.value === 'systemManage'
       ? {
-          model_type: 'IMAGE',
-          workspace_id: application.value?.workspace_id,
-        }
+        model_type: 'IMAGE',
+        workspace_id: application.value?.workspace_id,
+      }
       : {
-          model_type: 'IMAGE',
-        }
-  loadSharedApi({ type: 'model', systemType: apiType.value })
+        model_type: 'IMAGE',
+      }
+  loadSharedApi({type: 'model', systemType: apiType.value})
     .getSelectModelList(obj)
     .then((res: any) => {
       modelOptions.value = groupBy(res?.data, 'provider')
@@ -291,6 +307,15 @@ const openAIParamSettingDialog = (modelId: string) => {
     AIModeParamSettingDialogRef.value?.open(modelId, id, form_data.value.model_params_setting)
   }
 }
+const GeneratePromptDialogRef = ref<InstanceType<typeof GeneratePromptDialog>>()
+const openGeneratePromptDialog = (modelId: string) => {
+  if (modelId) {
+    GeneratePromptDialogRef.value?.open(modelId, id)
+  }
+}
+const replace = (v: any) => {
+  set(props.nodeModel.properties.node_data, 'system', v)
+}
 
 function refreshParam(data: any) {
   set(props.nodeModel.properties.node_data, 'model_params_setting', data)