From b7c8ebd045240d09b4ff98b4cf1924b5dbff1639 Mon Sep 17 00:00:00 2001
From: ccbikai <ccbikai@gmail.com>
Date: Tue, 24 Dec 2024 12:43:35 +0800
Subject: [PATCH] feat: replace counters with animated number flows

Integrates @number-flow/vue for smoother counter animations
Improves visibility state with opacity and blur adjustments
Removes unused static increment comments
---
 components/dashboard/Counters.vue | 31 ++++---------------------------
 package.json                      |  1 +
 pnpm-lock.yaml                    | 26 ++++++++++++++++++++++++++
 3 files changed, 31 insertions(+), 27 deletions(-)

diff --git a/components/dashboard/Counters.vue b/components/dashboard/Counters.vue
index d3924a8..e0b4a1e 100644
--- a/components/dashboard/Counters.vue
+++ b/components/dashboard/Counters.vue
@@ -1,5 +1,6 @@
 <script setup>
 import { Flame, MousePointerClick, Users } from 'lucide-vue-next'
+import NumberFlow from '@number-flow/vue'
 
 const defaultData = Object.freeze({
   visits: 0,
@@ -46,15 +47,7 @@ onBeforeUnmount(() => {
         <MousePointerClick class="w-4 h-4 text-muted-foreground" />
       </CardHeader>
       <CardContent>
-        <div
-          class="text-2xl font-bold"
-          :class="{ 'blur-lg': !counters.visits }"
-        >
-          {{ formatNumber(counters.visits) }}
-        </div>
-        <!-- <p class="text-xs text-muted-foreground">
-          +90
-        </p> -->
+        <NumberFlow class="text-2xl font-bold" :class="{ 'blur-md opacity-60': !counters.visits }" :value="counters.visits" />
       </CardContent>
     </Card>
     <Card>
@@ -65,15 +58,7 @@ onBeforeUnmount(() => {
         <Users class="w-4 h-4 text-muted-foreground" />
       </CardHeader>
       <CardContent>
-        <div
-          class="text-2xl font-bold"
-          :class="{ 'blur-lg': !counters.visitors }"
-        >
-          {{ formatNumber(counters.visitors) }}
-        </div>
-        <!-- <p class="text-xs text-muted-foreground">
-          +90
-        </p> -->
+        <NumberFlow class="text-2xl font-bold" :class="{ 'blur-md opacity-60': !counters.visitors }" :value="counters.visitors" />
       </CardContent>
     </Card>
     <Card>
@@ -84,15 +69,7 @@ onBeforeUnmount(() => {
         <Flame class="w-4 h-4 text-muted-foreground" />
       </CardHeader>
       <CardContent>
-        <div
-          class="text-2xl font-bold"
-          :class="{ 'blur-lg': !counters.referers }"
-        >
-          {{ formatNumber(counters.referers) }}
-        </div>
-        <!-- <p class="text-xs text-muted-foreground">
-          -20
-        </p> -->
+        <NumberFlow class="text-2xl font-bold" :class="{ 'blur-md opacity-60': !counters.referers }" :value="counters.referers" />
       </CardContent>
     </Card>
   </div>
diff --git a/package.json b/package.json
index 15a0bde..9111841 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "lint-staged": "lint-staged"
   },
   "dependencies": {
+    "@number-flow/vue": "^0.3.3",
     "@unovis/ts": "^1.4.4",
     "@unovis/vue": "^1.4.4",
     "@vee-validate/zod": "^4.13.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6f5b733..6f3b912 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,6 +8,9 @@ importers:
 
   .:
     dependencies:
+      '@number-flow/vue':
+        specifier: ^0.3.3
+        version: 0.3.3(vue@3.4.38(typescript@5.4.5))
       '@unovis/ts':
         specifier: ^1.4.4
         version: 1.4.4
@@ -1228,6 +1231,11 @@ packages:
     resolution: {integrity: sha512-54voNDBobGdMl3BUXSu7UaDh1P85PGHWlJ5e0XhPugo1JulOyCtp2I+5ri4wplGDJ8QGwPEQW7/x3yTLU7yF1A==}
     engines: {node: '>=16.14.0'}
 
+  '@number-flow/vue@0.3.3':
+    resolution: {integrity: sha512-yjuTRzwBUqh4rMZYSXG3/0Bv3YuLLUD3TIh7y7qXYCtorUyYP4/fPocVfrCh2TBlAu/jgci7BtvwC0IFnbNUtw==}
+    peerDependencies:
+      vue: ^3
+
   '@nuxt/devalue@2.0.2':
     resolution: {integrity: sha512-GBzP8zOc7CGWyFQS6dv1lQz8VVpz5C2yRszbXufwG/9zhStTIH50EtD87NmWbTMwXDvZLNg8GIpb1UFdH93JCA==}
 
@@ -3245,6 +3253,9 @@ packages:
       jiti:
         optional: true
 
+  esm-env@1.2.1:
+    resolution: {integrity: sha512-U9JedYYjCnadUlXk7e1Kr+aENQhtUaoaV9+gZm1T8LC/YBAPJx3NSPIAurFOC0U5vrdSevnUJS2/wUVxGwPhng==}
+
   espree@10.1.0:
     resolution: {integrity: sha512-M1M6CpiE6ffoigIOWYO9UDP8TMUw9kqb21tf+08IgDYjCsOvCuDt4jQcZmoYxx+w7zlKw9/N0KXfto+I8/FrXA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -4265,6 +4276,9 @@ packages:
   nth-check@2.1.1:
     resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
 
+  number-flow@0.4.2:
+    resolution: {integrity: sha512-YLN73/m8BUU4r/6mq9zqLdpFKt3LSPPRectOECheA9jtNWF4PP8EIz0+Z1giqu/x9nS86KnKwwouLXXiqnjhQQ==}
+
   nuxi@3.12.0:
     resolution: {integrity: sha512-6vRdiXTw9SajEQOUi6Ze/XaIXzy1q/sD5UqHQSv3yqTu7Pot5S7fEihNXV8LpcgLz+9HzjVt70r7jYe7R99c2w==}
     engines: {node: ^16.10.0 || >=18.0.0}
@@ -6800,6 +6814,12 @@ snapshots:
       '@nodelib/fs.scandir': 3.0.0
       fastq: 1.17.1
 
+  '@number-flow/vue@0.3.3(vue@3.4.38(typescript@5.4.5))':
+    dependencies:
+      esm-env: 1.2.1
+      number-flow: 0.4.2
+      vue: 3.4.38(typescript@5.4.5)
+
   '@nuxt/devalue@2.0.2': {}
 
   '@nuxt/devtools-kit@1.3.9(magicast@0.3.4)(rollup@4.18.0)(vite@5.4.1(@types/node@20.12.11)(terser@5.31.0))':
@@ -9364,6 +9384,8 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  esm-env@1.2.1: {}
+
   espree@10.1.0:
     dependencies:
       acorn: 8.12.1
@@ -10498,6 +10520,10 @@ snapshots:
     dependencies:
       boolbase: 1.0.0
 
+  number-flow@0.4.2:
+    dependencies:
+      esm-env: 1.2.1
+
   nuxi@3.12.0:
     optionalDependencies:
       fsevents: 2.3.3