From 4aa4d9d3505ab642eba62afcdcc9b05f56b1b96f Mon Sep 17 00:00:00 2001
From: coolxitech <admin@kuxi.tech>
Date: Wed, 17 Dec 2025 21:58:28 +0800
Subject: [PATCH] =?UTF-8?q?feat(ui):=20=E6=B7=BB=E5=8A=A0=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E5=88=87=E6=8D=A2=E5=8A=A8=E7=94=BB=E5=92=8C=E6=98=9F?=
 =?UTF-8?q?=E7=A9=BA=E8=83=8C=E6=99=AF=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 使用 Transition 组件实现页面切换的淡入淡出动画
- 根据路由路径设置组件 key 值以触发过渡效果
- 在暗色模式下添加 StarsBackground 星空背景组件
- 为 RouterView 和 StarsBackground 设置高度样式
- 引入 StarsBackground 组件并注册使用
---
 src/App.vue | 20 +++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index d801e99..b07c124 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -319,9 +319,22 @@
 
         <!-- 内容区域 -->
         <main class="flex-1 overflow-y-auto">
-          <div class="animate-fade-in">
-            <RouterView />
-          </div>
+          <Transition name="page" mode="out-in">
+            <div key=$route.fullPath class="h-full">
+              <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()