perf: improve usage of the card component in some pages (halo-dev/con…

…sole#839)

#### What type of PR is this?

/kind improvement

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

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

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

Fixes halo-dev#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 端主题详情、插件详情、系统设置中卡片组件的样式。
```

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>
 

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>

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>