105 lines
2.8 KiB
Vue
105 lines
2.8 KiB
Vue
<template>
|
|
<div class="label-list">
|
|
<div class="container">
|
|
<div class="top-value item" v-if="props.basicBlog?.topValue > 1">
|
|
<i class="fa-solid fa-thumbtack"></i>
|
|
</div>
|
|
|
|
<div v-if="props.basicBlog?.topValue > 1" class="item">|</div>
|
|
|
|
<div class="great item" v-if="props.basicBlog?.isGreat">
|
|
<i class="fa-regular fa-newspaper"></i>
|
|
</div>
|
|
|
|
<div v-if="props.basicBlog?.isGreat" class="item">|</div>
|
|
|
|
<el-tooltip content="创建日期">
|
|
<div class="item">
|
|
<i class="fa-regular fa-calendar"></i>
|
|
<span class="date">{{ formatDate(props.basicBlog.createTime) }}</span>
|
|
</div>
|
|
</el-tooltip>
|
|
|
|
<div class="item">|</div>
|
|
|
|
<el-tooltip content="修改日期">
|
|
<div class="item">
|
|
<i class="fa-regular fa-calendar-check"></i>
|
|
<span class="date">{{ formatDate(props.basicBlog.updateTime) }}</span>
|
|
</div>
|
|
</el-tooltip>
|
|
|
|
<div class="item">|</div>
|
|
|
|
<el-tooltip content="分类">
|
|
<div class="item">
|
|
<i class="fa-regular fa-folder"></i>
|
|
<span class="category" @click="viewBlogCategoryClick">
|
|
{{ props.basicBlog.category }}
|
|
</span>
|
|
</div>
|
|
</el-tooltip>
|
|
|
|
<div class="item">|</div>
|
|
|
|
<el-tooltip content="访问次数">
|
|
<div class="item">
|
|
<i class="fa-solid fa-eye"></i>
|
|
<span>{{ props.basicBlog.visitCount }} 次</span>
|
|
</div>
|
|
</el-tooltip>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<el-tooltip content="字数统计">
|
|
<div class="item">
|
|
<i class="fa-regular fa-file-word"></i>
|
|
<span>{{ props.basicBlog.wordCount }} 字</span>
|
|
</div>
|
|
</el-tooltip>
|
|
|
|
<div class="item">|</div>
|
|
|
|
<el-tooltip content="阅读时长">
|
|
<div class="item">
|
|
<i class="fa-regular fa-clock"></i>
|
|
<span>{{ props.basicBlog.readDuration.toFixed(0) }} 分钟</span>
|
|
</div>
|
|
</el-tooltip>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { defineProps, PropType } from 'vue'
|
|
import { IBasicBlog } from '@/types/blog.ts'
|
|
import { useBlogStore } from '@/store/blog.ts'
|
|
import { useRouter } from 'vue-router'
|
|
import { formatDate } from 'vue3-common/utils/dateUtil'
|
|
|
|
const blogStore = useBlogStore()
|
|
const router = useRouter()
|
|
|
|
const props = defineProps({
|
|
basicBlog: {
|
|
required: true,
|
|
type: Object as PropType<IBasicBlog>
|
|
}
|
|
})
|
|
|
|
/**
|
|
* 点击查看博客分类按钮
|
|
*/
|
|
const viewBlogCategoryClick = async () => {
|
|
const category = props.basicBlog?.category as string
|
|
await blogStore.queryBlogByCondition({
|
|
category
|
|
})
|
|
await router.push({ name: 'CategoriesBlog', params: { name: category } })
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@use "@/styles/blog/blog.label.module.scss";
|
|
</style>
|