feat(login): add auto-login splash UI and simplify app startup

src/pages/LoginPage.module.scss

@@ -37,9 +37,21 @@
   gap: 0;
 }
 
+// 品牌大字淡入动画
+@keyframes brandFadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: var(--target-opacity, 0.9);
+    transform: translateY(0);
+  }
+}
+
 // 品牌大字
 .brandWord {
-  font-size: 13vw;
+  font-size: 14vw;
   font-weight: 900;
   color: rgba(255, 255, 255, 0.9);
   letter-spacing: -0.02em;
@@ -48,18 +60,23 @@
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
   text-align: right;
   padding-right: 0;
+  opacity: 0;
+  animation: brandFadeIn 0.8s ease-out forwards;
 
-  // 不同字有不同的透明度形成层次感
+  // 不同字有不同的透明度和延迟，从上到下依次显现
   &:nth-child(1) {
-    color: rgba(255, 255, 255, 0.95);
+    --target-opacity: 0.95;
+    animation-delay: 0.1s;
   }
 
   &:nth-child(2) {
-    color: rgba(255, 255, 255, 0.7);
+    --target-opacity: 0.7;
+    animation-delay: 0.35s;
   }
 
   &:nth-child(3) {
-    color: rgba(255, 255, 255, 0.45);
+    --target-opacity: 0.45;
+    animation-delay: 0.6s;
   }
 }
 
@@ -94,7 +111,7 @@
 .logo {
   width: 80px;
   height: 80px;
-  border-radius: $radius-full;
+  border-radius: $radius-lg;
   object-fit: cover;
   box-shadow: var(--shadow-lg);
   border: 3px solid var(--border-color);
@@ -211,24 +228,101 @@
   font-size: 14px;
 }
 
-// 自动登录提示
-.autoLoginBox {
-  background: var(--bg-secondary);
-  border: 1px dashed var(--border-color);
-  border-radius: $radius-md;
-  padding: $spacing-md;
-  display: flex;
-  flex-direction: column;
-  gap: $spacing-xs;
-  text-align: center;
+// ========== 启动动画（右侧） ==========
 
-  .label {
-    color: var(--text-secondary);
-    font-size: 14px;
+// 启动动画进入效果
+@keyframes splashEnter {
+  from {
+    opacity: 0;
+    transform: scale(0.9) translateY(20px);
   }
-
-  .value {
-    font-weight: 600;
-    color: var(--text-primary);
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
   }
 }
+
+// Logo 脉冲效果
+@keyframes splashLogoPulse {
+  0%,
+  100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.05);
+  }
+}
+
+// 加载条动画
+@keyframes splashLoading {
+  0% {
+    transform: scaleX(0);
+    transform-origin: left;
+  }
+  50% {
+    transform: scaleX(1);
+    transform-origin: left;
+  }
+  50.01% {
+    transform-origin: right;
+  }
+  100% {
+    transform: scaleX(0);
+    transform-origin: right;
+  }
+}
+
+// 启动动画内容容器
+.splashContent {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: $spacing-md;
+  animation: splashEnter 0.6s ease-out;
+}
+
+// 启动动画 Logo
+.splashLogo {
+  height: 80px;
+  width: auto;
+  border-radius: $radius-lg;
+  box-shadow: $shadow-lg;
+  animation: splashLogoPulse 1.5s ease-in-out infinite;
+}
+
+// 启动动画标题
+.splashTitle {
+  font-size: 28px;
+  font-weight: 800;
+  color: var(--text-primary);
+  margin: 0;
+  letter-spacing: -0.5px;
+}
+
+// 启动动画副标题
+.splashSubtitle {
+  font-size: 16px;
+  font-weight: 500;
+  color: var(--text-secondary);
+  margin: 0;
+  margin-top: -8px;
+}
+
+// 启动动画加载条容器
+.splashLoader {
+  width: 120px;
+  height: 3px;
+  background: var(--border-color);
+  border-radius: $radius-full;
+  overflow: hidden;
+  margin-top: $spacing-md;
+}
+
+// 启动动画加载条
+.splashLoaderBar {
+  width: 100%;
+  height: 100%;
+  background: var(--primary-color);
+  border-radius: $radius-full;
+  animation: splashLoading 1.2s ease-in-out infinite;
+}