github
/
halo
mirror of https://github.com/halo-dev/halo
1
0
Fork 0
Code Issues Releases Wiki Activity

perf: improve the layout of post tags (halo-dev/console#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/3445/head
Ryan Wang 2023-02-21 11:46:10 +08:00 committed by GitHub
parent 76bbe52dde
commit c23e659b79
2 changed files with 66 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
src/modules/contents/posts/DeletedPostList.vue
View File

@ -347,37 +347,37 @@ function handleClearKeyword() {
</template> </template>
<template #start> <template #start>
<VEntityField :title="post.post.spec.title" width="27rem"> <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> <template #description>
<VSpace class="flex-wrap !gap-y-1"> <div class="flex flex-col gap-1.5">
<p <VSpace class="flex-wrap !gap-y-1">
v-if="post.categories.length" <p
class="inline-flex flex-wrap gap-1 text-xs text-gray-500" 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"
> >
{{ 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> </span>
</p> <span class="text-xs text-gray-500">
<span class="text-xs text-gray-500"> 评论 {{ post.stats.totalComment || 0 }}
访问量 {{ post.stats.visit || 0 }} </span>
</span> </VSpace>
<span class="text-xs text-gray-500"> <VSpace v-if="post.tags.length" class="flex-wrap">
评论 {{ post.stats.totalComment || 0 }} <PostTag
</span> v-for="(tag, tagIndex) in post.tags"
</VSpace> :key="tagIndex"
:tag="tag"
route
></PostTag>
</VSpace>
</div>
</template> </template>
</VEntityField> </VEntityField>
</template> </template>

72
src/modules/contents/posts/PostList.vue
View File

@ -783,12 +783,6 @@ const hasFilters = computed(() => {
> >
<VStatusDot state="success" animate /> <VStatusDot state="success" animate />
</RouterLink> </RouterLink>
<PostTag
v-for="(tag, tagIndex) in post.tags"
:key="tagIndex"
:tag="tag"
route
></PostTag>
<a <a
v-if="post.post.status?.permalink" v-if="post.post.status?.permalink"
target="_blank" target="_blank"
@ -801,35 +795,45 @@ const hasFilters = computed(() => {
</VSpace> </VSpace>
</template> </template>
<template #description> <template #description>
<VSpace class="flex-wrap !gap-y-1"> <div class="flex flex-col gap-1.5">
<p <VSpace class="flex-wrap !gap-y-1">
v-if="post.categories.length" <p
class="inline-flex flex-wrap gap-1 text-xs text-gray-500" 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"
> >
{{ category.spec.displayName }} 分类：<a
</a> v-for="(category, categoryIndex) in post.categories"
</p> :key="categoryIndex"
<span class="text-xs text-gray-500"> :href="category.status?.permalink"
访问量 {{ post.stats.visit || 0 }} :title="category.status?.permalink"
</span> target="_blank"
<span class="text-xs text-gray-500"> class="cursor-pointer hover:text-gray-900"
评论 {{ post.stats.totalComment || 0 }} >
</span> {{ category.spec.displayName }}
<span </a>
v-if="post.post.spec.pinned" </p>
class="text-xs text-gray-500" <span class="text-xs text-gray-500">
> 访问量 {{ post.stats.visit || 0 }}
已置顶 </span>
</span> <span class="text-xs text-gray-500">
</VSpace> 评论 {{ 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> </template>
</VEntityField> </VEntityField>
</template> </template>