refactor: 嵌入第三方增加url参数

Author: liuruibin

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>

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" />