feat(analytics): 添加数字滚动动画并优化数字显示样式

- 新增 CountTo 组件实现平滑数字滚动效果,提升用户体验
- 在统计数字区域应用等宽字体和字体回退方案,防止滚动时宽度抖动
- 替换静态数字显示为动态滚动动画,增强数据展示的视觉吸引力
This commit is contained in:
anghunk
2026-02-05 16:27:52 +08:00
parent 2a8d73dff9
commit 683457cc0b
3 changed files with 78 additions and 5 deletions

View File

@@ -21,12 +21,12 @@
<div class="stats-grid">
<div class="stats-item">
<div class="stats-label">全站总访问量</div>
<div class="stats-value">{{ overview.totalPv }}</div>
<div class="stats-value"><CountTo :end-val="overview.totalPv" /></div>
</div>
<div class="stats-item">
<div class="stats-label">今日访问量</div>
<div class="stats-value">
{{ overview.todayPv }}
<CountTo :end-val="overview.todayPv" />
<span
v-if="overview.yesterdayPv !== undefined"
class="trend"
@@ -41,7 +41,7 @@
<div class="stats-item">
<div class="stats-label">本周访问量</div>
<div class="stats-value">
{{ overview.weekPv }}
<CountTo :end-val="overview.weekPv" />
<span
v-if="overview.lastWeekPv !== undefined"
class="trend"
@@ -56,7 +56,7 @@
<div class="stats-item">
<div class="stats-label">本月访问量</div>
<div class="stats-value">
{{ overview.monthPv }}
<CountTo :end-val="overview.monthPv" />
<span
v-if="overview.lastMonthPv !== undefined"
class="trend"
@@ -70,7 +70,7 @@
</div>
<div class="stats-item">
<div class="stats-label">有访问记录的页面数</div>
<div class="stats-value">{{ overview.totalPages }}</div>
<div class="stats-value"><CountTo :end-val="overview.totalPages" /></div>
</div>
</div>
</div>
@@ -215,6 +215,7 @@
import { onMounted, onBeforeUnmount, ref, nextTick, watch, inject, computed } from "vue";
import type { Ref } from "vue";
import * as echarts from "echarts";
import CountTo from "../../components/CountTo.vue";
import {
fetchVisitOverview,
fetchVisitPages,