fix: overflow issue of card component (#4922)

#### What type of PR is this?

/area console
/kind bug
/milestone 2.11.x

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

修复在 Card 组件中使用下拉组件无法完整显示的问题。

before:

<img width="898" alt="图片" src="https://github.com/halo-dev/halo/assets/21301288/8381ab18-fe48-4e14-9ac2-2c7da5b22556">

after:

<img width="900" alt="图片" src="https://github.com/halo-dev/halo/assets/21301288/517622e8-f507-4ce8-89be-1e47380be3a3">


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

Fixes #4921 

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

```release-note
修复在 Card 组件中使用下拉组件无法完整显示的问题。
```

console/console-src/layouts/BasicLayout.vue

@@ -330,7 +330,6 @@ onMounted(() => {
   flex
   flex-auto
   flex-col
-  overflow-x-hidden
   md:ml-64;
 }
 </style>

console/console-src/modules/interface/themes/ThemeDetail.vue

@@ -62,7 +62,7 @@ const handleReloadTheme = async () => {
 
 <template>
   <Transition mode="out-in" name="fade">
-    <div>
+    <div class="overflow-hidden rounded-b-base">
       <div class="bg-white px-4 py-4 sm:px-6">
         <div class="group flex items-center justify-between">
           <div class="flex flex-row items-center gap-3">

console/console-src/modules/interface/themes/ThemeSetting.vue

@@ -70,24 +70,22 @@ await suspense();
 </script>
 <template>
   <Transition mode="out-in" name="fade">
-    <div class="bg-white p-4">
+    <div class="p-4">
-      <div>
+      <FormKit
-        <FormKit
+        v-if="group && formSchema && configMapFormData?.[group]"
-          v-if="group && formSchema && configMapFormData?.[group]"
+        :id="group"
-          :id="group"
+        v-model="configMapFormData[group]"
-          v-model="configMapFormData[group]"
+        :name="group"
-          :name="group"
+        :actions="false"
-          :actions="false"
+        :preserve="true"
-          :preserve="true"
+        type="form"
-          type="form"
+        @submit="handleSaveConfigMap"
-          @submit="handleSaveConfigMap"
+      >
-        >
+        <FormKitSchema
-          <FormKitSchema
+          :schema="toRaw(formSchema)"
-            :schema="toRaw(formSchema)"
+          :data="configMapFormData[group]"
-            :data="configMapFormData[group]"
+        />
-          />
+      </FormKit>
-        </FormKit>
-      </div>
       <div v-permission="['system:themes:manage']" class="pt-5">
         <div class="flex justify-start">
           <VButton

console/console-src/modules/interface/themes/layouts/ThemeLayout.vue

@@ -239,7 +239,7 @@ onMounted(() => {
       </VEmpty>
 
       <div v-else>
-        <VCard :body-class="['!p-0']">
+        <VCard :body-class="['!p-0', '!overflow-visible']">
           <template #header>
             <VTabbar
               v-model:active-id="activeTab"
@@ -249,7 +249,7 @@ onMounted(() => {
               @change="handleTabChange"
             ></VTabbar>
           </template>
-          <div class="bg-white">
+          <div class="rounded-b-base bg-white">
             <RouterView
               :key="`${selectedTheme?.metadata.name}-${activeTab}`"
               v-slot="{ Component }"

console/console-src/modules/system/plugins/PluginDetail.vue

@@ -135,7 +135,7 @@ function getTabsFromExtensions(): PluginTab[] {
   </VPageHeader>
 
   <div class="m-0 md:m-4">
-    <VCard :body-class="['!p-0']">
+    <VCard :body-class="['!p-0', '!overflow-visible']">
       <template #header>
         <VTabbar
           v-model:active-id="activeTab"
@@ -144,7 +144,7 @@ function getTabsFromExtensions(): PluginTab[] {
           type="outline"
         ></VTabbar>
       </template>
-      <div class="bg-white">
+      <div class="rounded-b-base bg-white">
         <template v-for="tab in tabs" :key="tab.id">
           <component :is="tab.component" v-if="activeTab === tab.id" />
         </template>

console/console-src/modules/system/plugins/tabs/Detail.vue

@@ -64,7 +64,7 @@ const pluginRoleTemplateGroups = computed<RoleTemplateGroup[]>(() => {
 
 <template>
   <Transition mode="out-in" name="fade">
-    <div>
+    <div class="overflow-hidden rounded-b-base">
       <div class="flex items-center justify-between bg-white px-4 py-4 sm:px-6">
         <div>
           <h3 class="text-lg font-medium leading-6 text-gray-900">

console/console-src/modules/system/plugins/tabs/Setting.vue

@@ -64,7 +64,7 @@ const handleSaveConfigMap = async () => {
 </script>
 <template>
   <Transition mode="out-in" name="fade">
-    <div class="bg-white p-4">
+    <div class="rounded-b-base bg-white p-4">
       <div>
         <FormKit
           v-if="group && formSchema && configMapFormData?.[group]"

console/packages/components/src/components/card/Card.vue

@@ -32,13 +32,15 @@ defineProps<{
   flex-col
   bg-white
   shadow-sm
-  overflow-hidden
+  rounded-base
-  rounded-base;
+  ring-1
-  border: 1px solid #eaecf0;
+  ring-[#eaecf0];
 
   .card-header {
     @apply flex
-    justify-between;
+    justify-between
+    rounded-t-base
+    overflow-hidden;
     border-bottom: 1px solid #eaecf0;
 
     .card-header-title {
@@ -54,10 +56,12 @@ defineProps<{
   }
 
   .card-body {
+    @apply rounded-base overflow-hidden;
     padding: 12px 16px;
   }
 
   .card-footer {
+    @apply rounded-b-base overflow-hidden;
     border-top: 1px solid #eaecf0;
     padding: 12px 16px;
   }

console/uc-src/layouts/BasicLayout.vue

@@ -295,7 +295,6 @@ onMounted(() => {
   flex
   flex-auto
   flex-col
-  overflow-x-hidden
   md:ml-64;
 }
 </style>