feat: integrate NumberFlow for animated stats

Replaces static number displays with NumberFlow component to provide smooth animated transitions when stats update.

Refactors stats composable to expose raw numeric values alongside formatted strings, enabling NumberFlow to handle number animations while maintaining formatted displays where needed.

Improves user experience by adding visual feedback when GitHub statistics change.

Author: miantiao-me

app/components/home/Stats.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
-const { stats } = useGithubStats()
+import NumberFlow from '@number-flow/vue'
+
+const { rawStats } = useGithubStats()
 </script>
 
 <template>
@@ -42,9 +44,7 @@ const { stats } = useGithubStats()
             <template #fallback>
               <Skeleton class="mx-auto h-12 w-24" />
             </template>
-            <div class="text-5xl font-bold tabular-nums">
-              {{ stats.stars }}
-            </div>
+            <NumberFlow class="text-5xl font-bold tabular-nums" :value="rawStats.stars" />
           </ClientOnly>
           <p class="text-muted-foreground">
             {{ $t('home.stats.stars') }}
@@ -60,9 +60,7 @@ const { stats } = useGithubStats()
             <template #fallback>
               <Skeleton class="mx-auto h-12 w-24" />
             </template>
-            <div class="text-5xl font-bold tabular-nums">
-              {{ stats.forks }}
-            </div>
+            <NumberFlow class="text-5xl font-bold tabular-nums" :value="rawStats.forks" />
           </ClientOnly>
           <p class="text-muted-foreground">
             {{ $t('home.stats.forks') }}

app/composables/useGithubStats.ts

@@ -24,10 +24,15 @@ export function useGithubStats() {
     },
   )
 
+  const rawStats = computed(() => ({
+    stars: data.value?.stars ?? 6000,
+    forks: data.value?.forks ?? 4000,
+  }))
+
   const formattedStats = computed(() => ({
-    stars: data.value?.stars?.toLocaleString() ?? '6,000',
-    forks: data.value?.forks?.toLocaleString() ?? '4,000',
+    stars: rawStats.value.stars.toLocaleString(),
+    forks: rawStats.value.forks.toLocaleString(),
   }))
 
-  return { stats: formattedStats, status }
+  return { stats: formattedStats, rawStats, status }
 }

app/layouts/default.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
+import NumberFlow from '@number-flow/vue'
 import { Menu, Star, X } from 'lucide-vue-next'
 import { GitHubIcon, TelegramIcon, XIcon } from 'vue3-simple-icons'
 
 const showMenu = ref(false)
 const { title, telegram, twitter, github } = useAppConfig()
-const { stats } = useGithubStats()
+const { rawStats } = useGithubStats()
 </script>
 
 <template>
@@ -105,7 +106,7 @@ const { stats } = useGithubStats()
                   >
                     <GitHubIcon class="size-4" />
                     <Star class="size-3" />
-                    <span class="tabular-nums">{{ stats.stars }}</span>
+                    <NumberFlow class="tabular-nums" :value="rawStats.stars" />
                   </a>
                 </Button>