speakeloudest
084bec5f67
All checks were successful
site-dist-deploy / build-and-deploy (push) Successful in 1m16s
80 lines
2.4 KiB
Vue
80 lines
2.4 KiB
Vue
<template>
|
|
<div
|
|
class="lucid-glass-bar flex w-full flex-col justify-between rounded-4xl! border-1 border-white px-6 py-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>
|
|
|
|
<div class="flex min-h-[100px] flex-col gap-3">
|
|
<div
|
|
v-for="item in displayStats"
|
|
:key="item.platform"
|
|
class="flex items-center justify-between text-white/90"
|
|
>
|
|
<div class="flex items-center gap-3">
|
|
<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-else>{{ item.visits }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-2 text-xs text-white/40">相比前一个月 --</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted, computed } from 'vue'
|
|
import request from '@/utils/request'
|
|
import IosIcon from './Group 230.svg?component'
|
|
import WinIcon from './Group 231.svg?component'
|
|
import AndroidIcon from './Group 232.svg?component'
|
|
import MacIcon from './Group 233.svg?component'
|
|
|
|
const loading = ref(false)
|
|
const rawStats = ref<any[]>([])
|
|
|
|
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'] },
|
|
]
|
|
|
|
const displayStats = computed(() => {
|
|
return platformList.map((p) => {
|
|
const data = rawStats.value.find((item) =>
|
|
p.match.some((m) => item.platform.toLowerCase().includes(m))
|
|
)
|
|
return {
|
|
...p,
|
|
visits: data?.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)
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
fetchDownloads()
|
|
})
|
|
</script>
|