From 62bb085b8b6c4a25045c0bb47aa36c236429bd21 Mon Sep 17 00:00:00 2001
From: CaptainB <bin@fit2cloud.com>
Date: Fri, 20 Sep 2024 21:38:18 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E5=B5=8C=E5=85=A5=E7=AC=AC?=
 =?UTF-8?q?=E4=B8=89=E6=96=B9=E5=A2=9E=E5=8A=A0url=E5=8F=82=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../component/EmbedDialog.vue                 | 41 ++++++++++++++++++-
 ui/src/views/application-overview/index.vue   |  2 +-
 2 files changed, 40 insertions(+), 3 deletions(-)

diff --git a/ui/src/views/application-overview/component/EmbedDialog.vue b/ui/src/views/application-overview/component/EmbedDialog.vue
index 2bf5b250a..74c613558 100644
--- a/ui/src/views/application-overview/component/EmbedDialog.vue
+++ b/ui/src/views/application-overview/component/EmbedDialog.vue
@@ -58,6 +58,10 @@ import useStore from '@/stores'
 
 const { application } = useStore()
 
+const props = defineProps({
+  data: Object
+})
+
 const emit = defineEmits(['addData'])
 
 const dialogVisible = ref<boolean>(false)
@@ -66,6 +70,8 @@ const source1 = ref('')
 
 const source2 = ref('')
 
+const apiInputParams = ref({})
+
 watch(dialogVisible, (bool) => {
   if (!bool) {
     source1.value = ''
@@ -75,7 +81,7 @@ watch(dialogVisible, (bool) => {
 
 const open = (val: string) => {
   source1.value = `<iframe
-src="${application.location + val}"
+src="${application.location + val}?${mapToUrlParams(apiInputParams.value)}"
 style="width: 100%; height: 100%;"
 frameborder="0"
 allow="microphone">
@@ -88,12 +94,43 @@ defer
 src="${window.location.origin}/api/application/embed?protocol=${window.location.protocol.replace(
     ':',
     ''
-  )}&host=${window.location.host}&token=${val}">
+  )}&host=${window.location.host}&token=${val}&${mapToUrlParams(apiInputParams.value)}">
 <\/script>
 `
   dialogVisible.value = true
 }
 
+function mapToUrlParams(map) {
+    const params = new URLSearchParams();
+
+    map.forEach((item: any) => {
+        params.append(encodeURIComponent(item.name), encodeURIComponent(item.value));
+    });
+
+    return params.toString(); // 返回 URL 查询字符串
+}
+
+watch(() => props.data,
+  (val) => {
+    if (val) {
+      val.work_flow?.nodes
+        ?.filter((v: any) => v.id === 'base-node')
+        .map((v: any) => {
+          apiInputParams.value = v.properties.input_field_list
+            ? v.properties.input_field_list
+              .filter((v: any) => v.assignment_method === 'api_input')
+              .map((v: any) => {
+                return {
+                  name: v.variable,
+                  value: v.default_value
+                }
+              })
+            : []
+        })
+    }
+  }
+)
+
 defineExpose({ open })
 </script>
 <style lang="scss" scope>
diff --git a/ui/src/views/application-overview/index.vue b/ui/src/views/application-overview/index.vue
index 2c2c9682c..6801027f2 100644
--- a/ui/src/views/application-overview/index.vue
+++ b/ui/src/views/application-overview/index.vue
@@ -153,7 +153,7 @@
         </div>
       </div>
     </el-scrollbar>
-    <EmbedDialog ref="EmbedDialogRef" />
+    <EmbedDialog ref="EmbedDialogRef" :data="detail" />
     <APIKeyDialog ref="APIKeyDialogRef" />
     <LimitDialog ref="LimitDialogRef" @refresh="refresh" />
     <EditAvatarDialog ref="EditAvatarDialogRef" @refresh="refreshIcon" />