mirror of https://github.com/halo-dev/halo-admin
perf: improve the layout of the post list (#789)
#### What type of PR is this? /kind improvement #### What this PR does / why we need it: 优化文章管理列表的布局,修复当分类设置过多时的样式问题。 #### Which issue(s) this PR fixes: Fixes https://github.com/halo-dev/halo/issues/2963 #### Screenshots: <img width="717" alt="image" src="https://user-images.githubusercontent.com/21301288/208836747-c6f97d7f-487a-4984-aa54-ee0d3c5b535a.png"> #### Special notes for your reviewer: 测试方式: 1. 添加若干个文字数量较多的分类。 2. 观察文章列表的样式是否有问题。 #### Does this PR introduce a user-facing change? ```release-note 优化 Console 端文章管理列表的布局,修复当分类设置过多时的样式问题。 ```pull/791/head^2
parent
c6a0f2d0ac
commit
9c29538c7a
|
@ -23,8 +23,11 @@ const emit = defineEmits<{
|
|||
|
||||
const wrapperStyles = computed(() => {
|
||||
if (props.width) {
|
||||
const width =
|
||||
typeof props.width === "string" ? props.width : `${props.width}px`;
|
||||
return {
|
||||
width: typeof props.width === "string" ? props.width : `${props.width}px`,
|
||||
width,
|
||||
maxWidth: width,
|
||||
};
|
||||
}
|
||||
return {};
|
||||
|
|
|
@ -346,7 +346,7 @@ function handleClearKeyword() {
|
|||
/>
|
||||
</template>
|
||||
<template #start>
|
||||
<VEntityField :title="post.post.spec.title">
|
||||
<VEntityField :title="post.post.spec.title" width="27rem">
|
||||
<template #extra>
|
||||
<VSpace class="mt-1 sm:mt-0">
|
||||
<PostTag
|
||||
|
@ -358,7 +358,7 @@ function handleClearKeyword() {
|
|||
</VSpace>
|
||||
</template>
|
||||
<template #description>
|
||||
<VSpace>
|
||||
<VSpace class="flex-wrap !gap-y-1">
|
||||
<p
|
||||
v-if="post.categories.length"
|
||||
class="inline-flex flex-wrap gap-1 text-xs text-gray-500"
|
||||
|
|
|
@ -803,6 +803,7 @@ const hasFilters = computed(() => {
|
|||
name: 'PostEditor',
|
||||
query: { name: post.post.metadata.name },
|
||||
}"
|
||||
width="27rem"
|
||||
>
|
||||
<template #extra>
|
||||
<VSpace class="mt-1 sm:mt-0">
|
||||
|
@ -835,7 +836,7 @@ const hasFilters = computed(() => {
|
|||
</VSpace>
|
||||
</template>
|
||||
<template #description>
|
||||
<VSpace>
|
||||
<VSpace class="flex-wrap !gap-y-1">
|
||||
<p
|
||||
v-if="post.categories.length"
|
||||
class="inline-flex flex-wrap gap-1 text-xs text-gray-500"
|
||||
|
|
Loading…
Reference in New Issue