mirror of https://github.com/halo-dev/halo-admin
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
GitHub
parent
43702ed126
commit
cf34b86540
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue