perf: improve the layout of post tags (#869)

#### 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 端文章管理的标签布局
```
pull/873/head^2
Ryan Wang 2023-02-21 11:46:10 +08:00 committed by GitHub
parent 43702ed126
commit cf34b86540
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 66 additions and 62 deletions

View File

@ -347,17 +347,8 @@ 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>
<div class="flex flex-col gap-1.5">
<VSpace class="flex-wrap !gap-y-1">
<p
v-if="post.categories.length"
@ -378,6 +369,15 @@ function handleClearKeyword() {
评论 {{ 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>

View File

@ -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,6 +795,7 @@ const hasFilters = computed(() => {
</VSpace>
</template>
<template #description>
<div class="flex flex-col gap-1.5">
<VSpace class="flex-wrap !gap-y-1">
<p
v-if="post.categories.length"
@ -830,6 +825,15 @@ const hasFilters = computed(() => {
已置顶
</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>