add splashscreen
This commit is contained in:
@@ -17,7 +17,7 @@ pub struct LogPayload {
|
|||||||
pub timestamp: String,
|
pub timestamp: String,
|
||||||
pub command: String,
|
pub command: String,
|
||||||
pub output: String,
|
pub output: String,
|
||||||
pub status: String, // "info", "success", "error"
|
pub status: String,
|
||||||
}
|
}
|
||||||
|
|
||||||
pub fn emit_log(handle: &AppHandle, command: &str, output: &str, status: &str) {
|
pub fn emit_log(handle: &AppHandle, command: &str, output: &str, status: &str) {
|
||||||
@@ -30,6 +30,14 @@ pub fn emit_log(handle: &AppHandle, command: &str, output: &str, status: &str) {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#[tauri::command]
|
||||||
|
async fn initialize_app(app: AppHandle) -> Result<bool, String> {
|
||||||
|
// 执行耗时的环境配置
|
||||||
|
tokio::task::spawn_blocking(move || {
|
||||||
|
ensure_winget_dependencies(&app).map(|_| true)
|
||||||
|
}).await.unwrap_or(Err("Initialization Task Panicked".to_string()))
|
||||||
|
}
|
||||||
|
|
||||||
#[tauri::command]
|
#[tauri::command]
|
||||||
fn get_essentials(app: AppHandle) -> Vec<Software> {
|
fn get_essentials(app: AppHandle) -> Vec<Software> {
|
||||||
let app_data_dir = app.path().app_data_dir().unwrap_or_default();
|
let app_data_dir = app.path().app_data_dir().unwrap_or_default();
|
||||||
@@ -86,7 +94,6 @@ async fn install_software(id: String, state: State<'_, AppState>) -> Result<(),
|
|||||||
|
|
||||||
#[tauri::command]
|
#[tauri::command]
|
||||||
fn get_logs_history() -> Vec<LogPayload> {
|
fn get_logs_history() -> Vec<LogPayload> {
|
||||||
// 暂时返回空,后续可以考虑存储
|
|
||||||
vec![]
|
vec![]
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -105,15 +112,8 @@ pub fn run() {
|
|||||||
let (tx, mut rx) = mpsc::channel::<String>(100);
|
let (tx, mut rx) = mpsc::channel::<String>(100);
|
||||||
app.manage(AppState { install_tx: tx });
|
app.manage(AppState { install_tx: tx });
|
||||||
|
|
||||||
// 环境初始化逻辑
|
// 移除了在 setup 中直接执行异步 init 的逻辑,改为由前端指令触发
|
||||||
let init_handle = handle.clone();
|
|
||||||
tauri::async_runtime::spawn(async move {
|
|
||||||
let _ = tokio::task::spawn_blocking(move || {
|
|
||||||
let _ = ensure_winget_dependencies(&init_handle);
|
|
||||||
}).await;
|
|
||||||
});
|
|
||||||
|
|
||||||
// 安装队列
|
|
||||||
tauri::async_runtime::spawn(async move {
|
tauri::async_runtime::spawn(async move {
|
||||||
while let Some(id) = rx.recv().await {
|
while let Some(id) = rx.recv().await {
|
||||||
let _ = handle.emit("install-status", InstallProgress {
|
let _ = handle.emit("install-status", InstallProgress {
|
||||||
@@ -161,6 +161,7 @@ pub fn run() {
|
|||||||
Ok(())
|
Ok(())
|
||||||
})
|
})
|
||||||
.invoke_handler(tauri::generate_handler![
|
.invoke_handler(tauri::generate_handler![
|
||||||
|
initialize_app,
|
||||||
get_essentials,
|
get_essentials,
|
||||||
get_all_software,
|
get_all_software,
|
||||||
get_updates,
|
get_updates,
|
||||||
|
|||||||
@@ -26,10 +26,9 @@ struct WingetPackage {
|
|||||||
}
|
}
|
||||||
|
|
||||||
pub fn ensure_winget_dependencies(handle: &AppHandle) -> Result<(), String> {
|
pub fn ensure_winget_dependencies(handle: &AppHandle) -> Result<(), String> {
|
||||||
emit_log(handle, "Check Environment", "Initializing system components...", "info");
|
emit_log(handle, "Check Environment", "Initializing system components and updating sources...", "info");
|
||||||
|
|
||||||
let setup_script = r#"
|
let setup_script = r#"
|
||||||
# 设置容错
|
|
||||||
$ErrorActionPreference = 'SilentlyContinue'
|
$ErrorActionPreference = 'SilentlyContinue'
|
||||||
|
|
||||||
Write-Output "Step 1: Enabling TLS 1.2"
|
Write-Output "Step 1: Enabling TLS 1.2"
|
||||||
@@ -42,23 +41,24 @@ pub fn ensure_winget_dependencies(handle: &AppHandle) -> Result<(), String> {
|
|||||||
Write-Output "Step 3: Checking NuGet provider"
|
Write-Output "Step 3: Checking NuGet provider"
|
||||||
$provider = Get-PackageProvider -Name NuGet -ErrorAction SilentlyContinue
|
$provider = Get-PackageProvider -Name NuGet -ErrorAction SilentlyContinue
|
||||||
if ($null -eq $provider) {
|
if ($null -eq $provider) {
|
||||||
Write-Output "Installing NuGet provider..."
|
Install-PackageProvider -Name NuGet -MinimumVersion 2.8.5.201 -Force -Confirm:$false
|
||||||
Install-PackageProvider -Name NuGet -MinimumVersion 2.8.5.201 -Force -Confirm:$false -ErrorAction SilentlyContinue
|
|
||||||
}
|
}
|
||||||
|
|
||||||
Write-Output "Step 4: Configuring Repository Trust"
|
Write-Output "Step 4: Configuring Repository Trust"
|
||||||
Set-PSRepository -Name 'PSGallery' -InstallationPolicy Trusted -ErrorAction SilentlyContinue
|
Set-PSRepository -Name 'PSGallery' -InstallationPolicy Trusted
|
||||||
|
|
||||||
Write-Output "Step 5: Setting Execution Policy"
|
Write-Output "Step 5: Setting Execution Policy"
|
||||||
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser -Force -ErrorAction SilentlyContinue
|
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser -Force
|
||||||
|
|
||||||
Write-Output "Step 6: Checking Microsoft.WinGet.Client"
|
Write-Output "Step 6: Checking Microsoft.WinGet.Client"
|
||||||
if (-not (Get-Module -ListAvailable Microsoft.WinGet.Client)) {
|
if (-not (Get-Module -ListAvailable Microsoft.WinGet.Client)) {
|
||||||
Write-Output "Installing Winget Client module (this may take 1-2 minutes)..."
|
Write-Output "Installing Winget Client module..."
|
||||||
Install-Module -Name Microsoft.WinGet.Client -Force -AllowClobber -Scope CurrentUser -Confirm:$false
|
Install-Module -Name Microsoft.WinGet.Client -Force -AllowClobber -Scope CurrentUser -Confirm:$false
|
||||||
} else {
|
|
||||||
Write-Output "Winget Client module is already present."
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Write-Output "Step 7: Updating Winget Sources (apt-get update style)"
|
||||||
|
# 这一步非常关键,确保 winget 的本地数据库是最新的
|
||||||
|
winget source update --accept-source-agreements
|
||||||
"#;
|
"#;
|
||||||
|
|
||||||
let output = Command::new("powershell")
|
let output = Command::new("powershell")
|
||||||
@@ -70,7 +70,7 @@ pub fn ensure_winget_dependencies(handle: &AppHandle) -> Result<(), String> {
|
|||||||
Ok(out) => {
|
Ok(out) => {
|
||||||
let msg = String::from_utf8_lossy(&out.stdout).to_string();
|
let msg = String::from_utf8_lossy(&out.stdout).to_string();
|
||||||
let err = String::from_utf8_lossy(&out.stderr).to_string();
|
let err = String::from_utf8_lossy(&out.stderr).to_string();
|
||||||
// 只要最终模块存在,就认为成功,忽略过程中的次要警告
|
|
||||||
let check_final = Command::new("powershell")
|
let check_final = Command::new("powershell")
|
||||||
.args(["-NoProfile", "-Command", "Get-Module -ListAvailable Microsoft.WinGet.Client"])
|
.args(["-NoProfile", "-Command", "Get-Module -ListAvailable Microsoft.WinGet.Client"])
|
||||||
.creation_flags(0x08000000)
|
.creation_flags(0x08000000)
|
||||||
@@ -79,7 +79,7 @@ pub fn ensure_winget_dependencies(handle: &AppHandle) -> Result<(), String> {
|
|||||||
let is_success = check_final.map(|o| !o.stdout.is_empty()).unwrap_or(false);
|
let is_success = check_final.map(|o| !o.stdout.is_empty()).unwrap_or(false);
|
||||||
|
|
||||||
if is_success {
|
if is_success {
|
||||||
emit_log(handle, "Environment Setup", "Winget module is ready.", "success");
|
emit_log(handle, "Environment Setup", "Winget module and sources are ready.", "success");
|
||||||
Ok(())
|
Ok(())
|
||||||
} else {
|
} else {
|
||||||
emit_log(handle, "Environment Setup Error", &format!("OUT: {}\nERR: {}", msg, err), "error");
|
emit_log(handle, "Environment Setup Error", &format!("OUT: {}\nERR: {}", msg, err), "error");
|
||||||
|
|||||||
38
src/App.vue
38
src/App.vue
@@ -1,18 +1,34 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="app-container">
|
<div class="app-container">
|
||||||
<Sidebar />
|
<transition name="fade">
|
||||||
<div class="main-content">
|
<SplashScreen v-if="!store.isInitialized" :status-text="store.initStatus" />
|
||||||
<router-view v-slot="{ Component }">
|
</transition>
|
||||||
<transition name="fade" mode="out-in">
|
|
||||||
<component :is="Component" />
|
<template v-if="store.isInitialized">
|
||||||
</transition>
|
<Sidebar />
|
||||||
</router-view>
|
<div class="main-content">
|
||||||
</div>
|
<router-view v-slot="{ Component }">
|
||||||
|
<transition name="fade" mode="out-in">
|
||||||
|
<component :is="Component" />
|
||||||
|
</transition>
|
||||||
|
</router-view>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import Sidebar from './components/Sidebar.vue'
|
import Sidebar from './components/Sidebar.vue'
|
||||||
|
import SplashScreen from './components/SplashScreen.vue'
|
||||||
|
import { useSoftwareStore } from './store/software'
|
||||||
|
import { onMounted } from 'vue'
|
||||||
|
|
||||||
|
const store = useSoftwareStore()
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
store.initListener()
|
||||||
|
await store.initializeApp()
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
@@ -61,16 +77,16 @@ body {
|
|||||||
/* 页面切换动画 */
|
/* 页面切换动画 */
|
||||||
.fade-enter-active,
|
.fade-enter-active,
|
||||||
.fade-leave-active {
|
.fade-leave-active {
|
||||||
transition: opacity 0.2s ease, transform 0.2s ease;
|
transition: opacity 0.4s ease, transform 0.4s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fade-enter-from {
|
.fade-enter-from {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transform: translateY(10px);
|
transform: scale(0.98);
|
||||||
}
|
}
|
||||||
|
|
||||||
.fade-leave-to {
|
.fade-leave-to {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transform: translateY(-10px);
|
transform: scale(1.02);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
107
src/components/SplashScreen.vue
Normal file
107
src/components/SplashScreen.vue
Normal file
@@ -0,0 +1,107 @@
|
|||||||
|
<template>
|
||||||
|
<div class="splash-screen">
|
||||||
|
<div class="content">
|
||||||
|
<div class="app-logo">
|
||||||
|
<!-- 这里使用我们设计的图标 SVG 内容的简化版 -->
|
||||||
|
<svg width="120" height="120" viewBox="0 0 512 512" fill="none">
|
||||||
|
<rect x="0" y="0" width="512" height="512" rx="128" fill="#007AFF" />
|
||||||
|
<path d="M256 140L120 210L256 280L392 210L256 140Z" fill="white" />
|
||||||
|
<path d="M120 210V340L256 410V280L120 210Z" fill="white" fill-opacity="0.85" />
|
||||||
|
<path d="M392 210V340L256 410V280L392 210Z" fill="white" fill-opacity="0.7" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h1 class="app-name">Windows 软件管理</h1>
|
||||||
|
|
||||||
|
<div class="status-container">
|
||||||
|
<div class="spinner"></div>
|
||||||
|
<p class="status-text">{{ statusText }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer">
|
||||||
|
<p>Created with Gemini</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
defineProps<{
|
||||||
|
statusText: string
|
||||||
|
}>();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.splash-screen {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
background-color: #FBFBFD;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
z-index: 9999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
animation: fadeIn 0.8s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-logo {
|
||||||
|
filter: drop-shadow(0 20px 40px rgba(0, 122, 255, 0.2));
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-name {
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: 800;
|
||||||
|
letter-spacing: -0.5px;
|
||||||
|
color: #1D1D1F;
|
||||||
|
margin-bottom: 48px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spinner {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
border: 3px solid rgba(0, 122, 255, 0.1);
|
||||||
|
border-top-color: #007AFF;
|
||||||
|
border-radius: 50%;
|
||||||
|
animation: spin 1s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-text {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #86868B;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 40px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #C5C5C7;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin {
|
||||||
|
to { transform: rotate(360deg); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from { opacity: 0; transform: translateY(10px); }
|
||||||
|
to { opacity: 1; transform: translateY(0); }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -20,6 +20,8 @@ export const useSoftwareStore = defineStore('software', {
|
|||||||
selectedUpdateIds: [] as string[],
|
selectedUpdateIds: [] as string[],
|
||||||
logs: [] as LogEntry[],
|
logs: [] as LogEntry[],
|
||||||
loading: false,
|
loading: false,
|
||||||
|
isInitialized: false,
|
||||||
|
initStatus: '正在检查系统环境...',
|
||||||
lastFetched: 0
|
lastFetched: 0
|
||||||
}),
|
}),
|
||||||
getters: {
|
getters: {
|
||||||
@@ -47,6 +49,20 @@ export const useSoftwareStore = defineStore('software', {
|
|||||||
sortedAllSoftware: (state) => [...state.allSoftware].sort(sortByName)
|
sortedAllSoftware: (state) => [...state.allSoftware].sort(sortByName)
|
||||||
},
|
},
|
||||||
actions: {
|
actions: {
|
||||||
|
async initializeApp() {
|
||||||
|
if (this.isInitialized) return;
|
||||||
|
|
||||||
|
this.initStatus = '正在同步 Winget 模块...';
|
||||||
|
try {
|
||||||
|
await invoke('initialize_app');
|
||||||
|
this.isInitialized = true;
|
||||||
|
} catch (err) {
|
||||||
|
this.initStatus = '环境配置失败,请检查运行日志';
|
||||||
|
console.error('Init failed:', err);
|
||||||
|
// 即使失败也允许进入,让用户看日志
|
||||||
|
setTimeout(() => { this.isInitialized = true; }, 2000);
|
||||||
|
}
|
||||||
|
},
|
||||||
toggleSelection(id: string, type: 'essential' | 'update') {
|
toggleSelection(id: string, type: 'essential' | 'update') {
|
||||||
const list = type === 'essential' ? this.selectedEssentialIds : this.selectedUpdateIds;
|
const list = type === 'essential' ? this.selectedEssentialIds : this.selectedUpdateIds;
|
||||||
const index = list.indexOf(id);
|
const index = list.indexOf(id);
|
||||||
@@ -151,10 +167,8 @@ export const useSoftwareStore = defineStore('software', {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
// 监听日志事件
|
|
||||||
listen('log-event', (event: any) => {
|
listen('log-event', (event: any) => {
|
||||||
this.logs.unshift(event.payload as LogEntry);
|
this.logs.unshift(event.payload as LogEntry);
|
||||||
// 限制日志条数,防止内存溢出
|
|
||||||
if (this.logs.length > 200) this.logs.pop();
|
if (this.logs.length > 200) this.logs.pop();
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user