Skip to content

Commit

Permalink
fix: overflow issue of card component (#4922)
Browse files Browse the repository at this point in the history
#### 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 组件中使用下拉组件无法完整显示的问题。
```
  • Loading branch information
ruibaby authored Nov 27, 2023
1 parent c02911c commit 0102f7a
Show file tree
Hide file tree
Showing 9 changed files with 31 additions and 31 deletions.
1 change: 0 additions & 1 deletion console/console-src/layouts/BasicLayout.vue
Original file line number Diff line number Diff line change
Expand Up @@ -330,7 +330,6 @@ onMounted(() => {
flex
flex-auto
flex-col
overflow-x-hidden
md:ml-64;
}
</style>
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
34 changes: 16 additions & 18 deletions console/console-src/modules/interface/themes/ThemeSetting.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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 }"
Expand Down
4 changes: 2 additions & 2 deletions console/console-src/modules/system/plugins/PluginDetail.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion console/console-src/modules/system/plugins/tabs/Detail.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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]"
Expand Down
12 changes: 8 additions & 4 deletions console/packages/components/src/components/card/Card.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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;
}
Expand Down
1 change: 0 additions & 1 deletion console/uc-src/layouts/BasicLayout.vue
Original file line number Diff line number Diff line change
Expand Up @@ -295,7 +295,6 @@ onMounted(() => {
flex
flex-auto
flex-col
overflow-x-hidden
md:ml-64;
}
</style>

0 comments on commit 0102f7a

Please sign in to comment.