From b99222e176f42f9edf3f73e52fc189d8cc4b0392 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Fri, 7 Apr 2023 17:28:45 +0800
Subject: [PATCH] fix: the setting form of the preview theme page may not be
 rendered (#3706)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### What type of PR is this?

/kind bug

#### What this PR does / why we need it:

修复预览主题页面的设置表单可能因为接口请求速度导致无法正常渲染表单的问题。

<img width="1226" alt="image" src="https://user-images.githubusercontent.com/21301288/230562109-0858098f-c67e-4d93-bebd-a85400de9285.png">

#### Which issue(s) this PR fixes:

Fixes https://github.com/halo-dev/halo/issues/3705

#### Special notes for your reviewer:

测试方式：

1. 在主题管理页面点击预览按钮，检查设置表单是否可以正常渲染即可。

#### Does this PR introduce a user-facing change?

```release-note
修复 Console 端预览主题页面的设置表单可能出现无法渲染的问题。
```
---
 .../components/preview/ThemePreviewModal.vue  | 48 ++++++++-----------
 1 file changed, 21 insertions(+), 27 deletions(-)

diff --git a/console/src/modules/interface/themes/components/preview/ThemePreviewModal.vue b/console/src/modules/interface/themes/components/preview/ThemePreviewModal.vue
index ce06256f6..204876ef1 100644
--- a/console/src/modules/interface/themes/components/preview/ThemePreviewModal.vue
+++ b/console/src/modules/interface/themes/components/preview/ThemePreviewModal.vue
@@ -129,7 +129,7 @@ const settingTabs = ref<SettingTab[]>([] as SettingTab[]);
 const activeSettingTab = ref("");
 const settingsVisible = ref(false);
 
-const { data: setting, refetch: handleFetchSettings } = useQuery<Setting>({
+const { data: setting } = useQuery<Setting>({
   queryKey: ["theme-setting", selectedTheme],
   queryFn: async () => {
     const { data } = await apiClient.theme.fetchThemeSetting({
@@ -139,7 +139,22 @@ const { data: setting, refetch: handleFetchSettings } = useQuery<Setting>({
     return data;
   },
   refetchOnWindowFocus: false,
-  enabled: computed(() => !!selectedTheme.value?.spec.settingName),
+  onSuccess(data) {
+    if (data) {
+      const { forms } = data.spec;
+      settingTabs.value = forms.map((item: SettingForm) => {
+        return {
+          id: item.group,
+          label: item.label || "",
+        };
+      });
+    }
+
+    activeSettingTab.value = settingTabs.value[0].id;
+  },
+  enabled: computed(
+    () => props.visible && !!selectedTheme.value?.spec.settingName
+  ),
 });
 
 const { data: configMap, refetch: handleFetchConfigMap } = useQuery<ConfigMap>({
@@ -151,7 +166,9 @@ const { data: configMap, refetch: handleFetchConfigMap } = useQuery<ConfigMap>({
     return data;
   },
   refetchOnWindowFocus: false,
-  enabled: computed(() => !!selectedTheme.value?.spec.configMapName),
+  enabled: computed(
+    () => !!setting.value && !!selectedTheme.value?.spec.configMapName
+  ),
 });
 
 const { formSchema, configMapFormData, convertToSave } = useSettingFormConvert(
@@ -177,7 +194,6 @@ const handleSaveConfigMap = async () => {
 
   Toast.success(t("core.common.toast.save_success"));
 
-  await handleFetchSettings();
   await handleFetchConfigMap();
 
   saving.value = false;
@@ -185,28 +201,6 @@ const handleSaveConfigMap = async () => {
   handleRefresh();
 };
 
-watch(
-  () => selectedTheme.value,
-  async () => {
-    if (selectedTheme.value) {
-      await handleFetchSettings();
-      await handleFetchConfigMap();
-
-      if (setting.value) {
-        const { forms } = setting.value.spec;
-        settingTabs.value = forms.map((item: SettingForm) => {
-          return {
-            id: item.group,
-            label: item.label || "",
-          };
-        });
-      }
-
-      activeSettingTab.value = settingTabs.value[0].id;
-    }
-  }
-);
-
 const handleOpenSettings = (theme?: Theme) => {
   if (theme) {
     selectedTheme.value = theme;
@@ -348,7 +342,7 @@ const iframeClasses = computed(() => {
                   <FormKit
                     v-if="
                       tab.id === activeSettingTab &&
-                      configMapFormData &&
+                      configMapFormData[tab.id] &&
                       formSchema
                     "
                     :id="`preview-setting-${tab.id}`"