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(() => {
|
const wrapperStyles = computed(() => {
|
||||||
if (props.width) {
|
if (props.width) {
|
||||||
|
const width =
|
||||||
|
typeof props.width === "string" ? props.width : `${props.width}px`;
|
||||||
return {
|
return {
|
||||||
width: typeof props.width === "string" ? props.width : `${props.width}px`,
|
width,
|
||||||
|
maxWidth: width,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
return {};
|
return {};
|
||||||
|
|
|
@ -346,7 +346,7 @@ function handleClearKeyword() {
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
<template #start>
|
<template #start>
|
||||||
<VEntityField :title="post.post.spec.title">
|
<VEntityField :title="post.post.spec.title" width="27rem">
|
||||||
<template #extra>
|
<template #extra>
|
||||||
<VSpace class="mt-1 sm:mt-0">
|
<VSpace class="mt-1 sm:mt-0">
|
||||||
<PostTag
|
<PostTag
|
||||||
|
@ -358,7 +358,7 @@ function handleClearKeyword() {
|
||||||
</VSpace>
|
</VSpace>
|
||||||
</template>
|
</template>
|
||||||
<template #description>
|
<template #description>
|
||||||
<VSpace>
|
<VSpace class="flex-wrap !gap-y-1">
|
||||||
<p
|
<p
|
||||||
v-if="post.categories.length"
|
v-if="post.categories.length"
|
||||||
class="inline-flex flex-wrap gap-1 text-xs text-gray-500"
|
class="inline-flex flex-wrap gap-1 text-xs text-gray-500"
|
||||||
|
|
|
@ -803,6 +803,7 @@ const hasFilters = computed(() => {
|
||||||
name: 'PostEditor',
|
name: 'PostEditor',
|
||||||
query: { name: post.post.metadata.name },
|
query: { name: post.post.metadata.name },
|
||||||
}"
|
}"
|
||||||
|
width="27rem"
|
||||||
>
|
>
|
||||||
<template #extra>
|
<template #extra>
|
||||||
<VSpace class="mt-1 sm:mt-0">
|
<VSpace class="mt-1 sm:mt-0">
|
||||||
|
@ -835,7 +836,7 @@ const hasFilters = computed(() => {
|
||||||
</VSpace>
|
</VSpace>
|
||||||
</template>
|
</template>
|
||||||
<template #description>
|
<template #description>
|
||||||
<VSpace>
|
<VSpace class="flex-wrap !gap-y-1">
|
||||||
<p
|
<p
|
||||||
v-if="post.categories.length"
|
v-if="post.categories.length"
|
||||||
class="inline-flex flex-wrap gap-1 text-xs text-gray-500"
|
class="inline-flex flex-wrap gap-1 text-xs text-gray-500"
|
||||||
|
|
Loading…
Reference in New Issue