fix: 公开链接显示接口输入类型的变量

--bug=1047029 --user=刘瑞斌 【应用编排】- 公开访问连接中未自动生成 接口传参的变量 https://www.tapd.cn/57709429/s/1584536

ui/src/views/application-overview/component/EmbedDialog.vue

@@ -52,14 +52,15 @@
   </el-dialog>
 </template>
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { copyClick } from '@/utils/clipboard'
 import useStore from '@/stores'
 
 const { application } = useStore()
 
 const props = defineProps({
-  data: Object
+  data: Object,
+  apiInputParams: String
 })
 
 const emit = defineEmits(['addData'])
@@ -70,7 +71,9 @@ const source1 = ref('')
 
 const source2 = ref('')
 
-const apiInputParams = ref([])
+const urlParams1 = computed(() => props.apiInputParams ? '?' + props.apiInputParams : '')
+const urlParams2 = computed(() => props.apiInputParams ? '&' + props.apiInputParams : '')
+
 
 watch(dialogVisible, (bool) => {
   if (!bool) {
@@ -81,7 +84,7 @@ watch(dialogVisible, (bool) => {
 
 const open = (val: string) => {
   source1.value = `<iframe
-src="${application.location + val}?${mapToUrlParams(apiInputParams.value)}"
+src="${application.location + val + urlParams1.value}"
 style="width: 100%; height: 100%;"
 frameborder="0"
 allow="microphone">
@@ -94,42 +97,12 @@ defer
 src="${window.location.origin}/api/application/embed?protocol=${window.location.protocol.replace(
     ':',
     ''
-  )}&host=${window.location.host}&token=${val}&${mapToUrlParams(apiInputParams.value)}">
+  )}&host=${window.location.host}&token=${val}${urlParams2.value}">
 <\/script>
 `
   dialogVisible.value = true
 }
 
-function mapToUrlParams(map: any[]) {
-    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>

ui/src/views/application-overview/index.vue

@@ -153,7 +153,7 @@
         </div>
       </div>
     </el-scrollbar>
-    <EmbedDialog ref="EmbedDialogRef" :data="detail" />
+    <EmbedDialog ref="EmbedDialogRef" :data="detail" :api-input-params="mapToUrlParams(apiInputParams)"/>
     <APIKeyDialog ref="APIKeyDialogRef" />
     <LimitDialog ref="LimitDialogRef" @refresh="refresh" />
     <EditAvatarDialog ref="EditAvatarDialogRef" @refresh="refreshIcon" />
@@ -161,7 +161,7 @@
   </LayoutContainer>
 </template>
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, onMounted, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import EmbedDialog from './component/EmbedDialog.vue'
 import APIKeyDialog from './component/APIKeyDialog.vue'
@@ -199,7 +199,8 @@ const detail = ref<any>(null)
 
 const loading = ref(false)
 
-const shareUrl = computed(() => application.location + accessToken.value.access_token)
+const urlParams = computed(() => mapToUrlParams(apiInputParams.value) ? '?' + mapToUrlParams(apiInputParams.value) : '')
+const shareUrl = computed(() => application.location + accessToken.value.access_token + urlParams.value)
 
 const dayOptions = [
   {
@@ -240,6 +241,7 @@ const statisticsLoading = ref(false)
 const statisticsData = ref([])
 
 const showEditIcon = ref(false)
+const apiInputParams = ref([])
 
 function toUrl(url: string) {
   window.open(url, '_blank')
@@ -326,6 +328,19 @@ function getAccessToken() {
 function getDetail() {
   application.asyncGetApplicationDetail(id, loading).then((res: any) => {
     detail.value = res.data
+    detail.value.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
+              }
+            })
+          : []
+      })
   })
 }
 
@@ -337,6 +352,17 @@ function refreshIcon() {
   getDetail()
 }
 
+
+function mapToUrlParams(map: any[]) {
+    const params = new URLSearchParams();
+
+    map.forEach((item: any) => {
+        params.append(encodeURIComponent(item.name), encodeURIComponent(item.value));
+    });
+
+    return params.toString(); // 返回 URL 查询字符串
+}
+
 onMounted(() => {
   getDetail()
   getAccessToken()