82 lines
1.9 KiB
Vue
82 lines
1.9 KiB
Vue
<template>
|
||
<div v-if="!isMobile()">
|
||
<calendar-heatmap
|
||
:values="heatmapData"
|
||
:end-date="new Date()"
|
||
no-data-text="暂无记录"
|
||
tooltip-unit="篇"
|
||
:round="2"
|
||
:locale="{
|
||
less: '少于',
|
||
more: '多于',
|
||
months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
|
||
days: ['日', '一', '二', '三', '四', '五', '六'],
|
||
}"
|
||
class="blog-heatmap"
|
||
/>
|
||
<div class="heatmap-footer">
|
||
⏱️ 已坚持<span class="highlight">{{ getDaysDifference(new Date(), startBlogDate) }}</span> 天
|
||
| 📝 已创作<span class="highlight">{{ data.length }}</span> 篇
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { CalendarHeatmap } from 'vue3-calendar-heatmap';
|
||
import 'vue3-calendar-heatmap/dist/style.css';
|
||
import { data } from '../../data/posts.data.js'
|
||
import { isMobile, getDaysDifference, startBlogDate } from "../utils";
|
||
|
||
const dateCountMap = new Map<string, number>();
|
||
|
||
// 按日期分组统计
|
||
data.forEach(item => {
|
||
const date = item.date
|
||
|
||
if (dateCountMap.has(date)) {
|
||
dateCountMap.set(date, dateCountMap.get(date)! + 1);
|
||
} else {
|
||
dateCountMap.set(date, 1);
|
||
}
|
||
});
|
||
|
||
// 转换为目标格式
|
||
const heatmapData = Array.from(dateCountMap.entries()).map(([date, count]) => ({
|
||
date,
|
||
count
|
||
}))
|
||
</script>
|
||
|
||
<style scoped>
|
||
.blog-heatmap {
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.blog-heatmap :deep(.vch__wrapper) {
|
||
font-family: 'CustomFont', sans-serif !important;
|
||
}
|
||
|
||
.blog-heatmap :deep(.vch__month__label) {
|
||
font-size: 8px !important;
|
||
}
|
||
|
||
.blog-heatmap :deep(.vch__day__label) {
|
||
font-size: 8px !important;
|
||
}
|
||
|
||
.heatmap-footer {
|
||
font-size: 15px;
|
||
color: #666;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
padding: 6px 12px;
|
||
}
|
||
|
||
.highlight {
|
||
font-weight: 700;
|
||
color: #6366f1;
|
||
margin: 0 2px;
|
||
font-size: 16px;
|
||
}
|
||
</style> |