mirror of https://github.com/halo-dev/halo
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
parent
c02911ce01
commit
0102f7a227
|
@ -330,7 +330,6 @@ onMounted(() => {
|
|||
flex
|
||||
flex-auto
|
||||
flex-col
|
||||
overflow-x-hidden
|
||||
md:ml-64;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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 }"
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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]"
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -295,7 +295,6 @@ onMounted(() => {
|
|||
flex
|
||||
flex-auto
|
||||
flex-col
|
||||
overflow-x-hidden
|
||||
md:ml-64;
|
||||
}
|
||||
</style>
|
||||
|
|
Loading…
Reference in New Issue