From 0102f7a2273328c3ff2c238e4c605a35c869c517 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Mon, 27 Nov 2023 17:04:08 +0800
Subject: [PATCH] fix: overflow issue of card component (#4922)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### 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   |  1 -
 .../modules/interface/themes/ThemeDetail.vue  |  2 +-
 .../modules/interface/themes/ThemeSetting.vue | 34 +++++++++----------
 .../interface/themes/layouts/ThemeLayout.vue  |  4 +--
 .../modules/system/plugins/PluginDetail.vue   |  4 +--
 .../modules/system/plugins/tabs/Detail.vue    |  2 +-
 .../modules/system/plugins/tabs/Setting.vue   |  2 +-
 .../components/src/components/card/Card.vue   | 12 ++++---
 console/uc-src/layouts/BasicLayout.vue        |  1 -
 9 files changed, 31 insertions(+), 31 deletions(-)

diff --git a/console/console-src/layouts/BasicLayout.vue b/console/console-src/layouts/BasicLayout.vue
index 9b5c659b4c..86a20311ee 100644
--- a/console/console-src/layouts/BasicLayout.vue
+++ b/console/console-src/layouts/BasicLayout.vue
@@ -330,7 +330,6 @@ onMounted(() => {
   flex
   flex-auto
   flex-col
-  overflow-x-hidden
   md:ml-64;
 }
 </style>
diff --git a/console/console-src/modules/interface/themes/ThemeDetail.vue b/console/console-src/modules/interface/themes/ThemeDetail.vue
index d0b66cf1e6..c50eab8a2a 100644
--- a/console/console-src/modules/interface/themes/ThemeDetail.vue
+++ b/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">
diff --git a/console/console-src/modules/interface/themes/ThemeSetting.vue b/console/console-src/modules/interface/themes/ThemeSetting.vue
index 840e1eccd1..f0f6179199 100644
--- a/console/console-src/modules/interface/themes/ThemeSetting.vue
+++ b/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>
-        <FormKit
-          v-if="group && formSchema && configMapFormData?.[group]"
-          :id="group"
-          v-model="configMapFormData[group]"
-          :name="group"
-          :actions="false"
-          :preserve="true"
-          type="form"
-          @submit="handleSaveConfigMap"
-        >
-          <FormKitSchema
-            :schema="toRaw(formSchema)"
-            :data="configMapFormData[group]"
-          />
-        </FormKit>
-      </div>
+    <div class="p-4">
+      <FormKit
+        v-if="group && formSchema && configMapFormData?.[group]"
+        :id="group"
+        v-model="configMapFormData[group]"
+        :name="group"
+        :actions="false"
+        :preserve="true"
+        type="form"
+        @submit="handleSaveConfigMap"
+      >
+        <FormKitSchema
+          :schema="toRaw(formSchema)"
+          :data="configMapFormData[group]"
+        />
+      </FormKit>
       <div v-permission="['system:themes:manage']" class="pt-5">
         <div class="flex justify-start">
           <VButton
diff --git a/console/console-src/modules/interface/themes/layouts/ThemeLayout.vue b/console/console-src/modules/interface/themes/layouts/ThemeLayout.vue
index afb872bf6a..fd5c1bc290 100644
--- a/console/console-src/modules/interface/themes/layouts/ThemeLayout.vue
+++ b/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 }"
diff --git a/console/console-src/modules/system/plugins/PluginDetail.vue b/console/console-src/modules/system/plugins/PluginDetail.vue
index d17a55f823..5d18cb0e57 100644
--- a/console/console-src/modules/system/plugins/PluginDetail.vue
+++ b/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>
diff --git a/console/console-src/modules/system/plugins/tabs/Detail.vue b/console/console-src/modules/system/plugins/tabs/Detail.vue
index 310e27bd65..bf587efa85 100644
--- a/console/console-src/modules/system/plugins/tabs/Detail.vue
+++ b/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">
diff --git a/console/console-src/modules/system/plugins/tabs/Setting.vue b/console/console-src/modules/system/plugins/tabs/Setting.vue
index dd54b9caf0..3a0a535db6 100644
--- a/console/console-src/modules/system/plugins/tabs/Setting.vue
+++ b/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]"
diff --git a/console/packages/components/src/components/card/Card.vue b/console/packages/components/src/components/card/Card.vue
index b17f8e2515..b22b99cbed 100644
--- a/console/packages/components/src/components/card/Card.vue
+++ b/console/packages/components/src/components/card/Card.vue
@@ -32,13 +32,15 @@ defineProps<{
   flex-col
   bg-white
   shadow-sm
-  overflow-hidden
-  rounded-base;
-  border: 1px solid #eaecf0;
+  rounded-base
+  ring-1
+  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;
   }
diff --git a/console/uc-src/layouts/BasicLayout.vue b/console/uc-src/layouts/BasicLayout.vue
index 995ff4ddec..19156b8b16 100644
--- a/console/uc-src/layouts/BasicLayout.vue
+++ b/console/uc-src/layouts/BasicLayout.vue
@@ -295,7 +295,6 @@ onMounted(() => {
   flex
   flex-auto
   flex-col
-  overflow-x-hidden
   md:ml-64;
 }
 </style>