feat(ui): 添加页面切换动画和星空背景效果

- 使用 Transition 组件实现页面切换的淡入淡出动画
- 根据路由路径设置组件 key 值以触发过渡效果
- 在暗色模式下添加 StarsBackground 星空背景组件
- 为 RouterView 和 StarsBackground 设置高度样式
- 引入 StarsBackground 组件并注册使用

src/App.vue

@@ -319,9 +319,22 @@
 
         <!-- 内容区域 -->
         <main class="flex-1 overflow-y-auto">
-          <div class="animate-fade-in">
+          <Transition name="page" mode="out-in">
-            <RouterView />
+            <div key=$route.fullPath class="h-full">
-          </div>
+              <StarsBackground
+                  v-if="isDark"
+                  :factor="0.05"
+                  :speed="50"
+                  star-color="#fff"
+                  class="h-full"
+              >
+                <RouterView class="h-full" />
+              </StarsBackground>
+              <div v-else class="h-full">
+                <RouterView class="h-full" />
+              </div>
+            </div>
+          </Transition>
         </main>
       </div>
     </SidebarInset>
@@ -444,6 +457,7 @@
   import { toast } from 'vue-sonner'
   import { migrateGameData } from '@/utils/migration'
   import { checkLatestVersion } from '@/utils/versionCheck'
+  import {StarsBackground} from "@/components/ui/bg-stars";
 
   // 执行数据迁移（在 store 初始化之前）
   migrateGameData()