字段对接

src/pages/Home/index.vue

@@ -35,7 +35,7 @@
     </div>
 
     <!-- Main Content Container -->
-    <div class="container mx-auto flex flex-col">
+    <div class="container mx-auto flex max-w-[1220px] flex-col">
       <main class="pt-10">
         <!--    module0    -->
         <div class="mb-[80px] flex justify-between">

src/pages/UserCenter/components/DownloadStats/index.vue

@@ -4,7 +4,7 @@
   >
     <div class="mb-2 flex items-center justify-between border-b-1 border-dashed pb-3">
       <div class="relative ml-1 text-base font-bold text-white">各端下载量</div>
-      <div class="mr-1 text-2xl font-bold text-white tabular-nums">{{ totalDownloads }}</div>
+      <div class="mr-1 text-2xl font-bold text-white tabular-nums">{{ info.total }}</div>
     </div>
 
     <div class="flex min-h-[100px] flex-col gap-3">
@@ -17,13 +17,16 @@
           <component :is="item.icon" class="text-white" />
         </div>
         <div class="mr-1 text-base font-semibold tabular-nums">
-          <span v-if="loading" class="inline-block h-4 w-8 animate-pulse rounded bg-white/20"></span>
+          <span
+            v-if="loading"
+            class="inline-block h-4 w-8 animate-pulse rounded bg-white/20"
+          ></span>
           <span v-else>{{ item.visits }}</span>
         </div>
       </div>
     </div>
 
-    <div class="mt-2 text-xs text-white/40">相比前一个月 --</div>
+    <div class="mt-2 text-xs text-white/40">相比前一个月 {{ info.comparison_rate }}</div>
   </div>
 </template>
 
@@ -36,38 +39,33 @@ import AndroidIcon from './Group 232.svg?component'
 import MacIcon from './Group 233.svg?component'
 
 const loading = ref(false)
-const rawStats = ref<any[]>([])
-
+const info = ref({
+  comparison_rate: '--',
+  total: 0,
+  platforms: {},
+})
 const platformList = [
-  { platform: 'iOS', icon: IosIcon, match: ['ios', 'iphone', 'ipad'] },
-  { platform: 'Windows', icon: WinIcon, match: ['win'] },
-  { platform: 'Android', icon: AndroidIcon, match: ['android'] },
-  { platform: 'Mac', icon: MacIcon, match: ['mac'] },
+  { platform: 'ios', icon: IosIcon },
+  { platform: 'windows', icon: WinIcon },
+  { platform: 'android', icon: AndroidIcon },
+  { platform: 'mac', icon: MacIcon },
 ]
 
 const displayStats = computed(() => {
   return platformList.map((p) => {
-    const data = rawStats.value.find((item) =>
-      p.match.some((m) => item.platform.toLowerCase().includes(m))
-    )
+    const visits = info.value?.platforms[p.platform] || 0
     return {
       ...p,
-      visits: data?.visits || 0,
+      visits: visits || 0,
     }
   })
 })
 
-const totalDownloads = computed(() => {
-  return displayStats.value.reduce((acc, item) => acc + (item.visits || 0), 0)
-})
-
 async function fetchDownloads() {
   loading.value = true
   try {
     const res: any = await request.get('/api/v1/public/user/agent/downloads')
-    rawStats.value = res.list || []
-  } catch (error) {
-    console.error('Fetch downloads error:', error)
+    info.value = res
   } finally {
     loading.value = false
   }