add splash screen

This commit is contained in:
Julian Freeman
2025-12-08 18:59:48 -04:00
parent dde9ed7718
commit 36bd5061a4
8 changed files with 96 additions and 2 deletions

44
src/splash/App.vue Normal file
View File

@@ -0,0 +1,44 @@
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { invoke } from '@tauri-apps/api/core'
import { Loader2, DownloadCloud, CheckCircle2, AlertCircle } from 'lucide-vue-next'
const status = ref('正在初始化...')
const isError = ref(false)
onMounted(async () => {
try {
status.value = '正在检查运行环境...'
// This command checks and downloads binaries if missing
await invoke('init_ytdlp')
status.value = '准备就绪'
setTimeout(async () => {
await invoke('close_splash')
}, 800)
} catch (e: any) {
status.value = '启动错误: ' + (e.toString() || '未知错误')
isError.value = true
}
})
</script>
<template>
<div class="h-screen w-screen bg-white dark:bg-zinc-900 flex flex-col items-center justify-center select-none cursor-default p-8 text-center overflow-hidden" data-tauri-drag-region>
<div class="mb-6 relative w-20 h-20 bg-blue-600 rounded-2xl shadow-xl flex items-center justify-center text-white">
<DownloadCloud v-if="!isError" class="w-10 h-10" />
<AlertCircle v-else class="w-10 h-10" />
</div>
<h1 class="text-xl font-bold text-zinc-900 dark:text-white mb-6">流萤 - 视频下载</h1>
<div class="flex flex-col items-center gap-3 w-full max-w-xs">
<div class="flex items-center gap-2.5 text-sm font-medium transition-colors duration-300"
:class="isError ? 'text-red-500' : 'text-gray-600 dark:text-gray-300'">
<Loader2 v-if="!isError && status !== '准备就绪'" class="animate-spin w-4 h-4" />
<CheckCircle2 v-if="status === '准备就绪'" class="w-4 h-4 text-green-500" />
<span>{{ status }}</span>
</div>
</div>
</div>
</template>