From 9c29538c7a850b90e26e246312f0ab1547dc05a9 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Thu, 22 Dec 2022 16:42:30 +0800
Subject: [PATCH] perf: improve the layout of the post list (#789)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### 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 端文章管理列表的布局，修复当分类设置过多时的样式问题。
```
---
 packages/components/src/components/entity/EntityField.vue | 5 ++++-
 src/modules/contents/posts/DeletedPostList.vue            | 4 ++--
 src/modules/contents/posts/PostList.vue                   | 3 ++-
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/components/src/components/entity/EntityField.vue b/packages/components/src/components/entity/EntityField.vue
index 5ab9abfdc..c0842107c 100644
--- a/packages/components/src/components/entity/EntityField.vue
+++ b/packages/components/src/components/entity/EntityField.vue
@@ -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 {};
diff --git a/src/modules/contents/posts/DeletedPostList.vue b/src/modules/contents/posts/DeletedPostList.vue
index 273f956f1..7e8022b09 100644
--- a/src/modules/contents/posts/DeletedPostList.vue
+++ b/src/modules/contents/posts/DeletedPostList.vue
@@ -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"
diff --git a/src/modules/contents/posts/PostList.vue b/src/modules/contents/posts/PostList.vue
index 596421fd9..9876a6ae8 100644
--- a/src/modules/contents/posts/PostList.vue
+++ b/src/modules/contents/posts/PostList.vue
@@ -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"