add splash screen
This commit is contained in:
Julian Freeman
12
splashscreen.html
Normal file
12
splashscreen.html
Normal file
@@ -0,0 +1,12 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>StreamCapture Loading</title>
|
||||
</head>
|
||||
<body class="font-sans antialiased">
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/splash/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -2,7 +2,7 @@
|
||||
"$schema": "../gen/schemas/desktop-schema.json",
|
||||
"identifier": "default",
|
||||
"description": "Capability for the main window",
|
||||
"windows": ["main"],
|
||||
"windows": ["main", "splashscreen"],
|
||||
"permissions": [
|
||||
"core:default",
|
||||
"opener:default",
|
||||
|
||||
@@ -111,6 +111,16 @@ pub fn delete_history_item(app: AppHandle, id: String) -> Result<(), String> {
|
||||
storage::delete_history_item(&app, &id).map_err(|e| e.to_string())
|
||||
}
|
||||
|
||||
#[tauri::command]
|
||||
pub async fn close_splash(app: AppHandle) {
|
||||
if let Some(splash) = app.get_webview_window("splashscreen") {
|
||||
splash.close().unwrap();
|
||||
}
|
||||
if let Some(main) = app.get_webview_window("main") {
|
||||
main.show().unwrap();
|
||||
}
|
||||
}
|
||||
|
||||
#[tauri::command]
|
||||
pub fn open_in_explorer(app: AppHandle, path: String) -> Result<(), String> {
|
||||
let path_to_open = if Path::new(&path).exists() {
|
||||
|
||||
@@ -24,6 +24,7 @@ pub fn run() {
|
||||
commands::get_history,
|
||||
commands::clear_history,
|
||||
commands::delete_history_item,
|
||||
commands::close_splash,
|
||||
commands::open_in_explorer
|
||||
])
|
||||
.run(tauri::generate_context!())
|
||||
|
||||
@@ -12,9 +12,22 @@
|
||||
"app": {
|
||||
"windows": [
|
||||
{
|
||||
"label": "main",
|
||||
"title": "流萤 - 视频下载 v1.0.0",
|
||||
"width": 1300,
|
||||
"height": 900
|
||||
"height": 900,
|
||||
"visible": false
|
||||
},
|
||||
{
|
||||
"label": "splashscreen",
|
||||
"title": "StreamCapture Loading",
|
||||
"url": "splashscreen.html",
|
||||
"width": 400,
|
||||
"height": 300,
|
||||
"decorations": false,
|
||||
"center": true,
|
||||
"resizable": false,
|
||||
"alwaysOnTop": true
|
||||
}
|
||||
],
|
||||
"security": {
|
||||
|
||||
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>
|
||||
5
src/splash/main.ts
Normal file
5
src/splash/main.ts
Normal file
@@ -0,0 +1,5 @@
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
import '../style.css'
|
||||
|
||||
createApp(App).mount('#app')
|
||||
@@ -1,5 +1,6 @@
|
||||
import { defineConfig } from "vite";
|
||||
import vue from "@vitejs/plugin-vue";
|
||||
import { resolve } from "path";
|
||||
|
||||
// @ts-expect-error process is a nodejs global
|
||||
const host = process.env.TAURI_DEV_HOST;
|
||||
@@ -29,4 +30,12 @@ export default defineConfig(async () => ({
|
||||
ignored: ["**/src-tauri/**"],
|
||||
},
|
||||
},
|
||||
build: {
|
||||
rollupOptions: {
|
||||
input: {
|
||||
main: resolve(__dirname, 'index.html'),
|
||||
splashscreen: resolve(__dirname, 'splashscreen.html'),
|
||||
},
|
||||
},
|
||||
},
|
||||
}));
|
||||
|
||||
Reference in New Issue
Block a user