Add favicon SVG with gradient background and letter "R"
This commit is contained in:
251
packages/distribute/app.vue
Normal file
251
packages/distribute/app.vue
Normal file
@@ -0,0 +1,251 @@
|
||||
<script setup lang="ts">
|
||||
import type { DownloadStats } from '~/types'
|
||||
|
||||
const { t, locale, setLocale } = useI18n()
|
||||
const colorMode = useColorMode()
|
||||
const { platform, isIOS, isAndroid } = usePlatformDetection()
|
||||
|
||||
// 版本数据
|
||||
const { data: versionData } = await useFetch('/api/version')
|
||||
const version = computed(() => versionData.value || {
|
||||
version: '1.0.0',
|
||||
buildNumber: '100',
|
||||
releaseDate: '2025-12-30',
|
||||
releaseNotes: { 'zh-CN': [], 'en-US': [] },
|
||||
downloads: { ios: '', android: '', h5: '' },
|
||||
})
|
||||
|
||||
// 下载统计
|
||||
const { data: stats, refresh: refreshStats } = await useFetch<DownloadStats>('/api/stats')
|
||||
|
||||
// 切换语言
|
||||
function toggleLanguage() {
|
||||
setLocale(locale.value === 'zh-CN' ? 'en-US' : 'zh-CN')
|
||||
}
|
||||
|
||||
// 下载处理
|
||||
async function handleDownload(type: 'ios' | 'android' | 'h5') {
|
||||
const url = version.value.downloads[type]
|
||||
|
||||
if (type === 'h5') {
|
||||
navigateTo(url, { external: true, open: { target: '_blank' } })
|
||||
}
|
||||
else {
|
||||
navigateTo(url, { external: true })
|
||||
}
|
||||
|
||||
await $fetch(`/api/track/${type}`, { method: 'POST' })
|
||||
await refreshStats()
|
||||
}
|
||||
|
||||
const isDark = computed(() => colorMode.value === 'dark')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UApp>
|
||||
<div class="min-h-screen">
|
||||
<!-- Header -->
|
||||
<UContainer>
|
||||
<header class="sticky top-0 z-50 border-b border-gray-200 dark:border-gray-800 bg-white/80 dark:bg-gray-900/80 backdrop-blur-md">
|
||||
<div class="flex items-center justify-between py-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="size-10 rounded-xl bg-linear-to-br from-primary-500 to-primary-600 flex items-center justify-center text-white font-bold text-xl">
|
||||
R
|
||||
</div>
|
||||
<h1 class="text-xl font-bold text-gray-900 dark:text-white">
|
||||
{{ t('appName') }}
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
<UButton
|
||||
:label="locale === 'zh-CN' ? 'EN' : '中文'"
|
||||
color="neutral"
|
||||
variant="ghost"
|
||||
@click="toggleLanguage"
|
||||
/>
|
||||
<UButton
|
||||
:icon="isDark ? 'i-heroicons-sun' : 'i-heroicons-moon'"
|
||||
color="neutral"
|
||||
variant="ghost"
|
||||
@click="colorMode.preference = isDark ? 'light' : 'dark'"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</UContainer>
|
||||
|
||||
<!-- Main Content -->
|
||||
<UContainer class="py-12">
|
||||
<!-- Hero Section -->
|
||||
<div class="text-center mb-16">
|
||||
<div class="size-24 mx-auto mb-6 rounded-3xl bg-linear-to-br from-primary-500 to-primary-600 flex items-center justify-center shadow-xl">
|
||||
<span class="text-white font-bold text-4xl">R</span>
|
||||
</div>
|
||||
<h2 class="text-4xl font-bold mb-4 text-gray-900 dark:text-white">
|
||||
{{ t('downloadTitle') }}
|
||||
</h2>
|
||||
<div class="flex items-center justify-center gap-4 text-sm text-gray-600 dark:text-gray-400">
|
||||
<span>{{ t('version') }} {{ version.version }}</span>
|
||||
<span>•</span>
|
||||
<span>{{ t('updateDate') }} {{ version.releaseDate }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Download Buttons -->
|
||||
<div class="grid md:grid-cols-3 gap-4 mb-16">
|
||||
<UCard
|
||||
:class="isIOS && 'ring-2 ring-primary-500'"
|
||||
class="cursor-pointer hover:shadow-xl transition-all hover:scale-105"
|
||||
@click="handleDownload('ios')"
|
||||
>
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<UIcon name="i-heroicons-device-phone-mobile" class="size-8" />
|
||||
<div>
|
||||
<h3 class="font-semibold text-lg">
|
||||
iOS
|
||||
</h3>
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400">
|
||||
iPhone & iPad
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-sm font-medium text-primary-500">
|
||||
{{ t('downloadIOS') }}
|
||||
</p>
|
||||
</UCard>
|
||||
|
||||
<UCard
|
||||
:class="isAndroid && 'ring-2 ring-primary-500'"
|
||||
class="cursor-pointer hover:shadow-xl transition-all hover:scale-105"
|
||||
@click="handleDownload('android')"
|
||||
>
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<UIcon name="i-heroicons-device-tablet" class="size-8" />
|
||||
<div>
|
||||
<h3 class="font-semibold text-lg">
|
||||
Android
|
||||
</h3>
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400">
|
||||
APK Package
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-sm font-medium text-primary-500">
|
||||
{{ t('downloadAndroid') }}
|
||||
</p>
|
||||
</UCard>
|
||||
|
||||
<UCard
|
||||
class="cursor-pointer hover:shadow-xl transition-all hover:scale-105"
|
||||
@click="handleDownload('h5')"
|
||||
>
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<UIcon name="i-heroicons-globe-alt" class="size-8" />
|
||||
<div>
|
||||
<h3 class="font-semibold text-lg">
|
||||
Web
|
||||
</h3>
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400">
|
||||
H5 Version
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-sm font-medium text-primary-500">
|
||||
{{ t('openH5') }}
|
||||
</p>
|
||||
</UCard>
|
||||
</div>
|
||||
|
||||
<!-- Download Stats -->
|
||||
<div v-if="stats" class="grid md:grid-cols-4 gap-4 mb-16">
|
||||
<UCard>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 mb-2">
|
||||
{{ t('totalDownloads') }}
|
||||
</p>
|
||||
<p class="text-3xl font-bold text-gray-900 dark:text-white">
|
||||
{{ stats.total.toLocaleString() }}
|
||||
</p>
|
||||
</UCard>
|
||||
<UCard>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 mb-2">
|
||||
{{ t('todayDownloads') }}
|
||||
</p>
|
||||
<p class="text-3xl font-bold text-primary-500">
|
||||
{{ stats.today.toLocaleString() }}
|
||||
</p>
|
||||
</UCard>
|
||||
<UCard>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 mb-2">
|
||||
{{ t('iosDownloads') }}
|
||||
</p>
|
||||
<p class="text-3xl font-bold text-gray-900 dark:text-white">
|
||||
{{ stats.ios.toLocaleString() }}
|
||||
</p>
|
||||
</UCard>
|
||||
<UCard>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 mb-2">
|
||||
{{ t('androidDownloads') }}
|
||||
</p>
|
||||
<p class="text-3xl font-bold text-gray-900 dark:text-white">
|
||||
{{ stats.android.toLocaleString() }}
|
||||
</p>
|
||||
</UCard>
|
||||
</div>
|
||||
|
||||
<!-- What's New -->
|
||||
<UCard class="mb-16">
|
||||
<h3 class="text-2xl font-bold mb-6 text-gray-900 dark:text-white">
|
||||
{{ t('whatsNew') }}
|
||||
</h3>
|
||||
<ul class="space-y-3">
|
||||
<li
|
||||
v-for="(note, index) in version.releaseNotes[locale]"
|
||||
:key="index"
|
||||
class="flex items-start gap-3 text-gray-700 dark:text-gray-300"
|
||||
>
|
||||
<span class="text-primary-500 mt-1">•</span>
|
||||
<span>{{ note }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</UCard>
|
||||
|
||||
<!-- Install Guide -->
|
||||
<div class="grid md:grid-cols-2 gap-6">
|
||||
<UCard>
|
||||
<h3 class="text-xl font-bold mb-4 text-gray-900 dark:text-white">
|
||||
{{ t('iosGuideTitle') }}
|
||||
</h3>
|
||||
<ol class="space-y-3 text-gray-700 dark:text-gray-300">
|
||||
<li>{{ t('iosGuideStep1') }}</li>
|
||||
<li>{{ t('iosGuideStep2') }}</li>
|
||||
<li>{{ t('iosGuideStep3') }}</li>
|
||||
<li>{{ t('iosGuideStep4') }}</li>
|
||||
</ol>
|
||||
</UCard>
|
||||
|
||||
<UCard>
|
||||
<h3 class="text-xl font-bold mb-4 text-gray-900 dark:text-white">
|
||||
{{ t('androidGuideTitle') }}
|
||||
</h3>
|
||||
<ol class="space-y-3 text-gray-700 dark:text-gray-300">
|
||||
<li>{{ t('androidGuideStep1') }}</li>
|
||||
<li>{{ t('androidGuideStep2') }}</li>
|
||||
<li>{{ t('androidGuideStep3') }}</li>
|
||||
<li>{{ t('androidGuideStep4') }}</li>
|
||||
</ol>
|
||||
</UCard>
|
||||
</div>
|
||||
</UContainer>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="mt-20 py-8 border-t border-gray-200 dark:border-gray-800">
|
||||
<UContainer>
|
||||
<div class="text-center text-sm text-gray-600 dark:text-gray-500">
|
||||
<p>© 2025 Riwa. All rights reserved.</p>
|
||||
</div>
|
||||
</UContainer>
|
||||
</footer>
|
||||
</div>
|
||||
</UApp>
|
||||
</template>
|
||||
Reference in New Issue
Block a user