add splash screen
This commit is contained in:
44
src/splash/App.vue
Normal file
44
src/splash/App.vue
Normal 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>
|
||||
Reference in New Issue
Block a user