From b83d3e4279396fafcc169544819b1765500b3fa0 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Wed, 8 Feb 2023 14:24:13 +0800
Subject: [PATCH] perf: improve usage of the card component in some pages
 (#839)
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:

优化部分页面 VCard 组件的用法，修复样式问题。

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

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

#### Screenshots:

before:

<img width="1417" alt="image" src="https://user-images.githubusercontent.com/21301288/217179383-d1dff4f5-4350-4881-aed6-c6bf2cc184c5.png">

after:

<img width="1430" alt="image" src="https://user-images.githubusercontent.com/21301288/217179173-f61cf787-f34f-43a3-88c3-08fac6c31879.png">

#### Special notes for your reviewer:

测试方式：

1. 检查主题详情页面、插件详情页面、系统设置页面的内容区域，底部的圆角是否生效。

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

```release-note
优化 Console 端主题详情、插件详情、系统设置中卡片组件的样式。
```
---
 .../interface/themes/layouts/ThemeLayout.vue  | 24 +++++++++----------
 .../system/plugins/layouts/PluginLayout.vue   | 24 +++++++++----------
 .../settings/layouts/SystemSettingsLayout.vue | 24 +++++++++----------
 3 files changed, 36 insertions(+), 36 deletions(-)

diff --git a/src/modules/interface/themes/layouts/ThemeLayout.vue b/src/modules/interface/themes/layouts/ThemeLayout.vue
index a14c9505..9f5e803e 100644
--- a/src/modules/interface/themes/layouts/ThemeLayout.vue
+++ b/src/modules/interface/themes/layouts/ThemeLayout.vue
@@ -227,19 +227,19 @@ onMounted(() => {
               @change="handleTabChange"
             ></VTabbar>
           </template>
+          <div class="bg-white">
+            <RouterView :key="activeTab" v-slot="{ Component }">
+              <template v-if="Component">
+                <Suspense>
+                  <component :is="Component"></component>
+                  <template #fallback>
+                    <VLoading />
+                  </template>
+                </Suspense>
+              </template>
+            </RouterView>
+          </div>
         </VCard>
-        <div class="bg-white">
-          <RouterView :key="activeTab" v-slot="{ Component }">
-            <template v-if="Component">
-              <Suspense>
-                <component :is="Component"></component>
-                <template #fallback>
-                  <VLoading />
-                </template>
-              </Suspense>
-            </template>
-          </RouterView>
-        </div>
       </div>
     </div>
 
diff --git a/src/modules/system/plugins/layouts/PluginLayout.vue b/src/modules/system/plugins/layouts/PluginLayout.vue
index 36176243..57cd0089 100644
--- a/src/modules/system/plugins/layouts/PluginLayout.vue
+++ b/src/modules/system/plugins/layouts/PluginLayout.vue
@@ -171,19 +171,19 @@ watch([() => route.name, () => route.params], () => {
             @change="handleTabChange"
           ></VTabbar>
         </template>
+        <div class="bg-white">
+          <RouterView :key="activeTab" v-slot="{ Component }">
+            <template v-if="Component">
+              <Suspense>
+                <component :is="Component"></component>
+                <template #fallback>
+                  <VLoading />
+                </template>
+              </Suspense>
+            </template>
+          </RouterView>
+        </div>
       </VCard>
-      <div class="bg-white">
-        <RouterView :key="activeTab" v-slot="{ Component }">
-          <template v-if="Component">
-            <Suspense>
-              <component :is="Component"></component>
-              <template #fallback>
-                <VLoading />
-              </template>
-            </Suspense>
-          </template>
-        </RouterView>
-      </div>
     </div>
   </BasicLayout>
 </template>
diff --git a/src/modules/system/settings/layouts/SystemSettingsLayout.vue b/src/modules/system/settings/layouts/SystemSettingsLayout.vue
index 479cc410..d4dc52b8 100644
--- a/src/modules/system/settings/layouts/SystemSettingsLayout.vue
+++ b/src/modules/system/settings/layouts/SystemSettingsLayout.vue
@@ -109,19 +109,19 @@ watch([() => route.name, () => route.params], async () => {
             @change="handleTabChange"
           ></VTabbar>
         </template>
+        <div class="bg-white">
+          <RouterView :key="activeTab" v-slot="{ Component }">
+            <template v-if="Component">
+              <Suspense>
+                <component :is="Component"></component>
+                <template #fallback>
+                  <VLoading />
+                </template>
+              </Suspense>
+            </template>
+          </RouterView>
+        </div>
       </VCard>
-      <div class="bg-white">
-        <RouterView :key="activeTab" v-slot="{ Component }">
-          <template v-if="Component">
-            <Suspense>
-              <component :is="Component"></component>
-              <template #fallback>
-                <VLoading />
-              </template>
-            </Suspense>
-          </template>
-        </RouterView>
-      </div>
     </div>
   </BasicLayout>
 </template>