add splashscreen

src/App.vue

@@ -1,18 +1,34 @@
 <template>
   <div class="app-container">
-    <Sidebar />
-    <div class="main-content">
-      <router-view v-slot="{ Component }">
-        <transition name="fade" mode="out-in">
-          <component :is="Component" />
-        </transition>
-      </router-view>
-    </div>
+    <transition name="fade">
+      <SplashScreen v-if="!store.isInitialized" :status-text="store.initStatus" />
+    </transition>
+
+    <template v-if="store.isInitialized">
+      <Sidebar />
+      <div class="main-content">
+        <router-view v-slot="{ Component }">
+          <transition name="fade" mode="out-in">
+            <component :is="Component" />
+          </transition>
+        </router-view>
+      </div>
+    </template>
   </div>
 </template>
 
 <script setup lang="ts">
 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>
 
 <style>
@@ -61,16 +77,16 @@ body {
 /* 页面切换动画 */
 .fade-enter-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 {
   opacity: 0;
-  transform: translateY(10px);
+  transform: scale(0.98);
 }
 
 .fade-leave-to {
   opacity: 0;
-  transform: translateY(-10px);
+  transform: scale(1.02);
 }
 </style>

src/components/SplashScreen.vue

@@ -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>

src/store/software.ts

@@ -20,6 +20,8 @@ export const useSoftwareStore = defineStore('software', {
     selectedUpdateIds: [] as string[],
     logs: [] as LogEntry[],
     loading: false,
+    isInitialized: false,
+    initStatus: '正在检查系统环境...',
     lastFetched: 0
   }),
   getters: {
@@ -47,6 +49,20 @@ export const useSoftwareStore = defineStore('software', {
     sortedAllSoftware: (state) => [...state.allSoftware].sort(sortByName)
   },
   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') {
       const list = type === 'essential' ? this.selectedEssentialIds : this.selectedUpdateIds;
       const index = list.indexOf(id);
@@ -151,10 +167,8 @@ export const useSoftwareStore = defineStore('software', {
         }
       })
 
-      // 监听日志事件
       listen('log-event', (event: any) => {
         this.logs.unshift(event.payload as LogEntry);
-        // 限制日志条数，防止内存溢出
         if (this.logs.length > 200) this.logs.pop();
       })
     }