mirror of
https://github.com/Aexiar/c.git
synced 2024-10-22 14:05:45 +02:00
82 lines
1.8 KiB
Vue
82 lines
1.8 KiB
Vue
<template>
|
||
<div class="word">
|
||
<p>
|
||
<span>🔥更新：{{ dayjs(date.toLocaleDateString()).format("YYYY-MM-DD") }}</span>
|
||
<span>📝字数: {{ wordCount }} 字</span>
|
||
<span>⏱时长: {{ readTime }} 分钟</span>
|
||
</p>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import dayjs from "dayjs"
|
||
import { useData } from "vitepress"
|
||
import { computed, ref, onMounted, watch } from "vue"
|
||
import { countWord } from "../utils/functions"
|
||
import { useRoute } from "vitepress"
|
||
|
||
const route = useRoute() // 使用 vitepress 提供的 useRoute
|
||
|
||
const { page } = useData()
|
||
const date = computed(() => new Date(page.value.lastUpdated!))
|
||
|
||
const wordCount = ref(0)
|
||
const imageCount = ref(0)
|
||
|
||
const wordTime = computed(() => {
|
||
return (wordCount.value / 275) * 60
|
||
});
|
||
|
||
const imageTime = computed(() => {
|
||
const n = imageCount.value
|
||
if (imageCount.value <= 10) {
|
||
// 等差数列求和
|
||
return n * 13 + (n * (n - 1)) / 2
|
||
}
|
||
return 175 + (n - 10) * 3
|
||
});
|
||
|
||
// 阅读时间
|
||
const readTime = computed(() => {
|
||
return Math.ceil((wordTime.value + imageTime.value) / 60)
|
||
});
|
||
|
||
function analyze() {
|
||
document.querySelectorAll(".meta-des").forEach((v) => v.remove())
|
||
const docDomContainer = window.document.querySelector("#VPContent")
|
||
const imgs = docDomContainer?.querySelectorAll<HTMLImageElement>(
|
||
".content-container .main img"
|
||
);
|
||
imageCount.value = imgs?.length || 0
|
||
const words =
|
||
docDomContainer?.querySelector(".content-container .main")?.textContent || ""
|
||
wordCount.value = countWord(words)
|
||
}
|
||
|
||
onMounted(() => {
|
||
// 初始化时执行一次
|
||
analyze()
|
||
});
|
||
|
||
// 监听路由变化，当路径变化时重新检查
|
||
watch(
|
||
() => route.path,
|
||
() => {
|
||
analyze()
|
||
}
|
||
);
|
||
</script>
|
||
|
||
<style>
|
||
.word {
|
||
color: var(--vp-c-text-2);
|
||
font-size: 15px;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.icon {
|
||
display: inline-block;
|
||
transform: translate(0px, 2px);
|
||
}
|
||
</style>
|