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
Ryan Wang 2022-12-22 16:42:30 +08:00 committed by GitHub
parent c6a0f2d0ac
commit 9c29538c7a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 8 additions and 4 deletions

View File

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

View File

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

View File

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