From cf34b86540d81bedfcd08810200d6cb5c5ea4564 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Tue, 21 Feb 2023 11:46:10 +0800
Subject: [PATCH] perf: improve the layout of post tags (#869)
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/2926
Fixes https://github.com/halo-dev/halo/issues/3301

#### Screenshots:

<img width="1408" alt="image" src="https://user-images.githubusercontent.com/21301288/220048436-aed6e0b1-8fc7-4365-98c9-db4aef29205e.png">

#### Special notes for your reviewer:

#### Does this PR introduce a user-facing change?

```release-note
优化 Console 端文章管理的标签布局
```
---
 .../contents/posts/DeletedPostList.vue        | 56 +++++++--------
 src/modules/contents/posts/PostList.vue       | 72 ++++++++++---------
 2 files changed, 66 insertions(+), 62 deletions(-)

diff --git a/src/modules/contents/posts/DeletedPostList.vue b/src/modules/contents/posts/DeletedPostList.vue
index 7e8022b0..f81677b4 100644
--- a/src/modules/contents/posts/DeletedPostList.vue
+++ b/src/modules/contents/posts/DeletedPostList.vue
@@ -347,37 +347,37 @@ function handleClearKeyword() {
               </template>
               <template #start>
                 <VEntityField :title="post.post.spec.title" width="27rem">
-                  <template #extra>
-                    <VSpace class="mt-1 sm:mt-0">
-                      <PostTag
-                        v-for="(tag, tagIndex) in post.tags"
-                        :key="tagIndex"
-                        :tag="tag"
-                        route
-                      ></PostTag>
-                    </VSpace>
-                  </template>
                   <template #description>
-                    <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"
-                      >
-                        分类：<span
-                          v-for="(category, categoryIndex) in post.categories"
-                          :key="categoryIndex"
-                          class="cursor-pointer hover:text-gray-900"
+                    <div class="flex flex-col gap-1.5">
+                      <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"
                         >
-                          {{ category.spec.displayName }}
+                          分类：<span
+                            v-for="(category, categoryIndex) in post.categories"
+                            :key="categoryIndex"
+                            class="cursor-pointer hover:text-gray-900"
+                          >
+                            {{ category.spec.displayName }}
+                          </span>
+                        </p>
+                        <span class="text-xs text-gray-500">
+                          访问量 {{ post.stats.visit || 0 }}
                         </span>
-                      </p>
-                      <span class="text-xs text-gray-500">
-                        访问量 {{ post.stats.visit || 0 }}
-                      </span>
-                      <span class="text-xs text-gray-500">
-                        评论 {{ post.stats.totalComment || 0 }}
-                      </span>
-                    </VSpace>
+                        <span class="text-xs text-gray-500">
+                          评论 {{ post.stats.totalComment || 0 }}
+                        </span>
+                      </VSpace>
+                      <VSpace v-if="post.tags.length" class="flex-wrap">
+                        <PostTag
+                          v-for="(tag, tagIndex) in post.tags"
+                          :key="tagIndex"
+                          :tag="tag"
+                          route
+                        ></PostTag>
+                      </VSpace>
+                    </div>
                   </template>
                 </VEntityField>
               </template>
diff --git a/src/modules/contents/posts/PostList.vue b/src/modules/contents/posts/PostList.vue
index 000c596d..4f16a08e 100644
--- a/src/modules/contents/posts/PostList.vue
+++ b/src/modules/contents/posts/PostList.vue
@@ -783,12 +783,6 @@ const hasFilters = computed(() => {
                       >
                         <VStatusDot state="success" animate />
                       </RouterLink>
-                      <PostTag
-                        v-for="(tag, tagIndex) in post.tags"
-                        :key="tagIndex"
-                        :tag="tag"
-                        route
-                      ></PostTag>
                       <a
                         v-if="post.post.status?.permalink"
                         target="_blank"
@@ -801,35 +795,45 @@ const hasFilters = computed(() => {
                     </VSpace>
                   </template>
                   <template #description>
-                    <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"
-                      >
-                        分类：<a
-                          v-for="(category, categoryIndex) in post.categories"
-                          :key="categoryIndex"
-                          :href="category.status?.permalink"
-                          :title="category.status?.permalink"
-                          target="_blank"
-                          class="cursor-pointer hover:text-gray-900"
+                    <div class="flex flex-col gap-1.5">
+                      <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"
                         >
-                          {{ category.spec.displayName }}
-                        </a>
-                      </p>
-                      <span class="text-xs text-gray-500">
-                        访问量 {{ post.stats.visit || 0 }}
-                      </span>
-                      <span class="text-xs text-gray-500">
-                        评论 {{ post.stats.totalComment || 0 }}
-                      </span>
-                      <span
-                        v-if="post.post.spec.pinned"
-                        class="text-xs text-gray-500"
-                      >
-                        已置顶
-                      </span>
-                    </VSpace>
+                          分类：<a
+                            v-for="(category, categoryIndex) in post.categories"
+                            :key="categoryIndex"
+                            :href="category.status?.permalink"
+                            :title="category.status?.permalink"
+                            target="_blank"
+                            class="cursor-pointer hover:text-gray-900"
+                          >
+                            {{ category.spec.displayName }}
+                          </a>
+                        </p>
+                        <span class="text-xs text-gray-500">
+                          访问量 {{ post.stats.visit || 0 }}
+                        </span>
+                        <span class="text-xs text-gray-500">
+                          评论 {{ post.stats.totalComment || 0 }}
+                        </span>
+                        <span
+                          v-if="post.post.spec.pinned"
+                          class="text-xs text-gray-500"
+                        >
+                          已置顶
+                        </span>
+                      </VSpace>
+                      <VSpace v-if="post.tags.length" class="flex-wrap">
+                        <PostTag
+                          v-for="(tag, tagIndex) in post.tags"
+                          :key="tagIndex"
+                          :tag="tag"
+                          route
+                        ></PostTag>
+                      </VSpace>
+                    </div>
                   </template>
                 </VEntityField>
               </template>