diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue index 28b0c31b..7f9f3c64 100644 --- a/src/views/dashboard/index.vue +++ b/src/views/dashboard/index.vue @@ -114,7 +114,7 @@
- {{ visitStatsData.todayUvCount }} + {{ Math.round(transitionUvCount) }} 总访客数 - {{ visitStatsData.totalUvCount }} + {{ Math.round(transitionTotalUvCount) }}
@@ -174,7 +174,7 @@
- {{ visitStatsData.todayPvCount }} + {{ Math.round(transitionPvCount) }} 总浏览量 - {{ visitStatsData.totalPvCount }} + {{ Math.round(transitionTotalPvCount) }}
@@ -288,6 +288,7 @@ import { dayjs } from "element-plus"; import LogAPI, { VisitStatsVO, VisitTrendVO } from "@/api/system/log.api"; import { useUserStore } from "@/store/modules/user.store"; import { formatGrowthRate } from "@/utils"; +import { useTransition } from "@vueuse/core"; interface VersionItem { id: string; @@ -360,6 +361,39 @@ const visitStatsData = ref({ totalPvCount: 0, }); +// 数字过渡动画 +const transitionUvCount = useTransition( + computed(() => visitStatsData.value.todayUvCount), + { + duration: 1000, + transition: [0.25, 0.1, 0.25, 1.0], // CSS cubic-bezier + } +); + +const transitionTotalUvCount = useTransition( + computed(() => visitStatsData.value.totalUvCount), + { + duration: 1200, + transition: [0.25, 0.1, 0.25, 1.0], + } +); + +const transitionPvCount = useTransition( + computed(() => visitStatsData.value.todayPvCount), + { + duration: 1000, + transition: [0.25, 0.1, 0.25, 1.0], + } +); + +const transitionTotalPvCount = useTransition( + computed(() => visitStatsData.value.totalPvCount), + { + duration: 1200, + transition: [0.25, 0.1, 0.25, 1.0], + } +); + // 访问趋势日期范围(单位:天) const visitTrendDateRange = ref(7); // 访问趋势图表配置