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 组件中使用下拉组件无法完整显示的问题。
```
pull/4919/head
Ryan Wang 2023-11-27 17:04:08 +08:00 committed by GitHub
parent c02911ce01
commit 0102f7a227
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 31 additions and 31 deletions

View File

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

View File

@ -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">

View File

@ -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

View File

@ -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 }"

View File

@ -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>

View File

@ -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">

View File

@ -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]"

View File

@ -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;
}

View File

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