From 52790a6c10a228fa15250c59ca32701cbd87a816 Mon Sep 17 00:00:00 2001
From: "Ray.Hao" <1490493387@qq.com>
Date: Tue, 15 Apr 2025 09:38:41 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20:sparkles:=20=E9=A6=96=E9=A1=B5?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E7=BB=9F=E8=AE=A1=E4=BD=BF=E7=94=A8vueuse?=
 =?UTF-8?q?=E7=9A=84useTransition=E5=87=BD=E6=95=B0=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E8=BF=87=E6=B8=A1=E5=8A=A8=E6=95=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/dashboard/index.vue | 42 +++++++++++++++++++++++++++++++----
 1 file changed, 38 insertions(+), 4 deletions(-)

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 @@
 
               <div class="flex-x-between mt-2">
                 <div class="flex-y-center">
-                  <span class="text-lg">{{ visitStatsData.todayUvCount }}</span>
+                  <span class="text-lg">{{ Math.round(transitionUvCount) }}</span>
                   <span
                     :class="[
                       'text-xs',
@@ -134,7 +134,7 @@
 
               <div class="flex-x-between mt-2 text-sm text-gray">
                 <span>总访客数</span>
-                <span>{{ visitStatsData.totalUvCount }}</span>
+                <span>{{ Math.round(transitionTotalUvCount) }}</span>
               </div>
             </el-card>
           </template>
@@ -174,7 +174,7 @@
 
               <div class="flex-x-between mt-2">
                 <div class="flex-y-center">
-                  <span class="text-lg">{{ visitStatsData.todayPvCount }}</span>
+                  <span class="text-lg">{{ Math.round(transitionPvCount) }}</span>
                   <span
                     :class="[
                       'text-xs',
@@ -194,7 +194,7 @@
 
               <div class="flex-x-between mt-2 text-sm text-gray">
                 <span>总浏览量</span>
-                <span>{{ visitStatsData.totalPvCount }}</span>
+                <span>{{ Math.round(transitionTotalPvCount) }}</span>
               </div>
             </el-card>
           </template>
@@ -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<VisitStatsVO>({
   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);
 // 访问趋势图表配置