From 194775bd536dcb223e01d25b890ef6b27e3f76c8 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Wed, 7 Dec 2022 12:26:54 +0800
Subject: [PATCH] perf: optimize the issue of animation when switching setting
 tabs (halo-dev/console#748)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### What type of PR is this?

/kind improvement

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

优化主题和插件详情页面切换 tab 时的页面闪动问题。

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

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

#### Special notes for your reviewer:

测试方式：检查在主题和插件详情页面是否还存在 https://github.com/halo-dev/halo/issues/2856 中提到的问题。

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

```release-note
优化 Console 端的主题和插件详情页面切换选项卡时的页面闪动问题。
```
---
 src/modules/interface/themes/ThemeDetail.vue  |  2 +-
 src/modules/interface/themes/ThemeSetting.vue |  2 +-
 src/modules/system/plugins/PluginDetail.vue   |  2 +-
 src/modules/system/plugins/PluginSetting.vue  |  2 +-
 src/modules/system/settings/SystemSetting.vue | 53 +++++++++----------
 .../settings/layouts/SystemSettingsLayout.vue | 14 ++---
 6 files changed, 36 insertions(+), 39 deletions(-)

diff --git a/src/modules/interface/themes/ThemeDetail.vue b/src/modules/interface/themes/ThemeDetail.vue
index 775a8e80e..c33afc911 100644
--- a/src/modules/interface/themes/ThemeDetail.vue
+++ b/src/modules/interface/themes/ThemeDetail.vue
@@ -55,7 +55,7 @@ const onUpgradeModalClose = () => {
 </script>
 
 <template>
-  <Transition appear mode="out-in" name="fade">
+  <Transition mode="out-in" name="fade">
     <div>
       <div class="bg-white px-4 py-4 sm:px-6">
         <div class="group flex items-center justify-between">
diff --git a/src/modules/interface/themes/ThemeSetting.vue b/src/modules/interface/themes/ThemeSetting.vue
index e94293e69..f1fd12b51 100644
--- a/src/modules/interface/themes/ThemeSetting.vue
+++ b/src/modules/interface/themes/ThemeSetting.vue
@@ -53,7 +53,7 @@ watch(
 );
 </script>
 <template>
-  <Transition appear mode="out-in" name="fade">
+  <Transition mode="out-in" name="fade">
     <div class="bg-white p-4">
       <div>
         <FormKit
diff --git a/src/modules/system/plugins/PluginDetail.vue b/src/modules/system/plugins/PluginDetail.vue
index 25153113b..581471dba 100644
--- a/src/modules/system/plugins/PluginDetail.vue
+++ b/src/modules/system/plugins/PluginDetail.vue
@@ -59,7 +59,7 @@ watchEffect(() => {
 </script>
 
 <template>
-  <Transition appear mode="out-in" name="fade">
+  <Transition mode="out-in" name="fade">
     <div>
       <div class="flex items-center justify-between bg-white px-4 py-4 sm:px-6">
         <div>
diff --git a/src/modules/system/plugins/PluginSetting.vue b/src/modules/system/plugins/PluginSetting.vue
index 62805277e..a4a4287e3 100644
--- a/src/modules/system/plugins/PluginSetting.vue
+++ b/src/modules/system/plugins/PluginSetting.vue
@@ -62,7 +62,7 @@ const handleFetchPlugin = async () => {
 await handleFetchPlugin();
 </script>
 <template>
-  <Transition appear mode="out-in" name="fade">
+  <Transition mode="out-in" name="fade">
     <div class="bg-white p-4">
       <div>
         <FormKit
diff --git a/src/modules/system/settings/SystemSetting.vue b/src/modules/system/settings/SystemSetting.vue
index 5220c3acc..29ef7a68e 100644
--- a/src/modules/system/settings/SystemSetting.vue
+++ b/src/modules/system/settings/SystemSetting.vue
@@ -33,36 +33,31 @@ await handleFetchSettings();
 await handleFetchConfigMap();
 </script>
 <template>
-  <Transition appear mode="out-in" name="fade">
-    <div class="bg-white p-4">
-      <div>
-        <FormKit
-          v-if="group && formSchema && configMapFormData"
-          :id="group"
-          v-model="configMapFormData[group]"
-          :name="group"
-          :actions="false"
-          :preserve="true"
-          type="form"
-          @submit="handleSaveConfigMap"
+  <div class="bg-white p-4">
+    <div>
+      <FormKit
+        v-if="group && formSchema && configMapFormData"
+        :id="group"
+        v-model="configMapFormData[group]"
+        :name="group"
+        :actions="false"
+        :preserve="true"
+        type="form"
+        @submit="handleSaveConfigMap"
+      >
+        <FormKitSchema :schema="formSchema" :data="configMapFormData[group]" />
+      </FormKit>
+    </div>
+    <div v-permission="['system:configmaps:manage']" class="pt-5">
+      <div class="flex justify-start">
+        <VButton
+          :loading="saving"
+          type="secondary"
+          @click="$formkit.submit(group || '')"
         >
-          <FormKitSchema
-            :schema="formSchema"
-            :data="configMapFormData[group]"
-          />
-        </FormKit>
-      </div>
-      <div v-permission="['system:configmaps:manage']" class="pt-5">
-        <div class="flex justify-start">
-          <VButton
-            :loading="saving"
-            type="secondary"
-            @click="$formkit.submit(group || '')"
-          >
-            保存
-          </VButton>
-        </div>
+          保存
+        </VButton>
       </div>
     </div>
-  </Transition>
+  </div>
 </template>
diff --git a/src/modules/system/settings/layouts/SystemSettingsLayout.vue b/src/modules/system/settings/layouts/SystemSettingsLayout.vue
index 479cc4102..9ed0f8b3c 100644
--- a/src/modules/system/settings/layouts/SystemSettingsLayout.vue
+++ b/src/modules/system/settings/layouts/SystemSettingsLayout.vue
@@ -113,12 +113,14 @@ watch([() => route.name, () => route.params], async () => {
       <div class="bg-white">
         <RouterView :key="activeTab" v-slot="{ Component }">
           <template v-if="Component">
-            <Suspense>
-              <component :is="Component"></component>
-              <template #fallback>
-                <VLoading />
-              </template>
-            </Suspense>
+            <Transition appear mode="out-in" name="fade">
+              <Suspense>
+                <component :is="Component"></component>
+                <template #fallback>
+                  <VLoading />
+                </template>
+              </Suspense>
+            </Transition>
           </template>
         </RouterView>
       </div>