From 1d4fce96323d81d47fb3943bf13a6d450006ee6a Mon Sep 17 00:00:00 2001
From: Fine <fanxue0830@gmail.com>
Date: Tue, 3 Jan 2023 12:11:27 +0800
Subject: [PATCH] feat: add config

---
 .../dashboard/configuration/ThirdPartyApp.vue | 20 +++++++++++--------
 .../dashboard/controls/ThirdPartyApp.vue      |  4 +++-
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/views/dashboard/configuration/ThirdPartyApp.vue b/src/views/dashboard/configuration/ThirdPartyApp.vue
index 9e09fa9f..c731b236 100644
--- a/src/views/dashboard/configuration/ThirdPartyApp.vue
+++ b/src/views/dashboard/configuration/ThirdPartyApp.vue
@@ -13,7 +13,7 @@ limitations under the License. -->
 <template>
   <div class="item">
     <span class="label">{{ t("textUrl") }}</span>
-    <el-input class="input" v-model="url" size="small" @change="changeConfig({ url })" />
+    <el-input class="input" v-model="url" size="small" @change="changeConfig({ url: encodeURIComponent(url) })" />
   </div>
   <div class="footer">
     <el-button size="small" @click="cancelConfig">
@@ -31,15 +31,19 @@ limitations under the License. -->
   const { t } = useI18n();
   const dashboardStore = useDashboardStore();
   const originConfig = dashboardStore.selectedGrid;
-  const graph = originConfig.graph || {};
-  const url = ref(graph.url || "");
-  function changeConfig(param: { [key: string]: unknown }) {
+  const widget = originConfig.widget || {};
+  const url = ref(widget.url || "");
+  function changeConfig(param: { [key: string]: string }) {
+    const key = Object.keys(param)[0];
+    if (!key) {
+      return;
+    }
     const { selectedGrid } = dashboardStore;
-    const graph = {
-      ...selectedGrid.graph,
-      ...param,
+    const widget = {
+      ...dashboardStore.selectedGrid.widget,
+      [key]: decodeURIComponent(param[key]),
     };
-    dashboardStore.selectWidget({ ...selectedGrid, graph });
+    dashboardStore.selectWidget({ ...selectedGrid, widget });
   }
   function applyConfig() {
     dashboardStore.setConfigPanel(false);
diff --git a/src/views/dashboard/controls/ThirdPartyApp.vue b/src/views/dashboard/controls/ThirdPartyApp.vue
index 18fa2751..c9b55060 100644
--- a/src/views/dashboard/controls/ThirdPartyApp.vue
+++ b/src/views/dashboard/controls/ThirdPartyApp.vue
@@ -30,11 +30,12 @@ limitations under the License. -->
       </el-popover>
     </div>
     <div class="body">
-      <iframe src="/general" width="100%" height="100%" scrolling="no"></iframe>
+      <iframe :src="widget.url" width="100%" height="100%" scrolling="no" style="border: none"></iframe>
     </div>
   </div>
 </template>
 <script lang="ts" setup>
+  import { computed } from "vue";
   import type { PropType } from "vue";
   import { useI18n } from "vue-i18n";
   import { useDashboardStore } from "@/store/modules/dashboard";
@@ -49,6 +50,7 @@ limitations under the License. -->
   });
   const { t } = useI18n();
   const dashboardStore = useDashboardStore();
+  const widget = computed(() => props.data.widget || {});
 
   function removeTopo() {
     dashboardStore.removeControls(props.data);