- {{ 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);
// 访问趋势图表配置