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>