PaiGramDocs/docs/.vitepress/theme/components/PageInfo.vue
2023-10-21 13:28:21 +08:00

44 lines
1.3 KiB
Vue

<script setup lang="ts">
import { computed, ref } from 'vue'
import { useData } from 'vitepress'
import { getDate, getFromNow } from '../utils'
defineProps<{
readTime: string
words: string
}>()
const defaultAuthor = 'PaigramTeam'
const author = ref(defaultAuthor)
const { frontmatter, page } = useData()
const publishedTime = getDate(frontmatter.value?.date)
if (frontmatter.value?.author)
author.value = frontmatter.value?.author
const lastUpdatedDate = computed(() => new Date(page.value.lastUpdated!))
const isoDatetime = computed(() => lastUpdatedDate.value.toISOString())
const timeFormNow = getFromNow(isoDatetime.value)
</script>
<template>
<div>
<section
class="border-b-1 border-[var(--vp-c-divider)] w-full border-b-solid mt-[24px] pb-[12px] flex gap-[12px] mb-[12px] flex-wrap max-w-[85%]"
>
<div class="flex gap-[4px] items-center">
<radix-icons:update />
更新于:<span>{{ timeFormNow }}</span>
</div>
<div class="flex gap-[4px] items-center">
<bi:file-earmark-word-fill />
字数统计:<span>{{ words }} </span>
</div>
<div class="flex gap-[4px] items-center">
<ooui:clock />
阅读时长:<span>{{ readTime }} 分钟</span>
</div>
</section>
</div>
</template>