feat(app): 添加应用启动资源预加载功能

- 实现了 AppBootResourceGate 组件用于管理应用启动时的资源加载
- 集成了图片和字体资源的预加载机制
- 添加了启动时的加载进度指示器和动画效果
- 创建了 DataLoadingIndicator 组件用于显示数据加载状态
- 在多个组件中替换原有的加载提示为新的 DataLoadingIndicator
- 更新了样式文件以支持新的加载动画和视觉效果

src/style/index.css

@@ -260,6 +260,169 @@
     color: rgba(138, 214, 221, 0.58);
   }
 
+  .boot-grid {
+    background-image:
+      linear-gradient(rgba(112, 255, 247, 0.12) 1px, transparent 1px),
+      linear-gradient(90deg, rgba(112, 255, 247, 0.12) 1px, transparent 1px);
+    background-size:
+      calc(var(--design-unit) * 64) calc(var(--design-unit) * 64),
+      calc(var(--design-unit) * 64) calc(var(--design-unit) * 64);
+    mask-image: radial-gradient(circle at center, black 0%, transparent 72%);
+  }
+
+  .boot-scanline {
+    background: linear-gradient(
+      180deg,
+      transparent 0%,
+      rgba(117, 255, 250, 0.08) 50%,
+      transparent 100%
+    );
+    animation: boot-scanline 2.6s ease-in-out infinite;
+  }
+
+  .boot-particle {
+    animation: boot-particle-float 3.6s ease-in-out infinite;
+  }
+
+  .boot-ring {
+    animation: boot-ring-spin 4.8s cubic-bezier(0.45, 0, 0.2, 1) infinite;
+    box-shadow:
+      0 0 calc(var(--design-unit) * 24) rgba(113, 255, 247, 0.24),
+      inset 0 0 calc(var(--design-unit) * 18) rgba(113, 255, 247, 0.12);
+  }
+
+  .boot-ring::before,
+  .boot-ring::after {
+    content: "";
+    position: absolute;
+    left: 50%;
+    height: calc(var(--design-unit) * 10);
+    width: calc(var(--design-unit) * 10);
+    border-radius: 9999px;
+    background: #77fff8;
+    box-shadow: 0 0 calc(var(--design-unit) * 18) rgba(119, 255, 248, 0.85);
+    transform: translateX(-50%);
+  }
+
+  .boot-ring::before {
+    top: calc(var(--design-unit) * -5);
+  }
+
+  .boot-ring::after {
+    bottom: calc(var(--design-unit) * -5);
+  }
+
+  .boot-ring-delay {
+    animation-direction: reverse;
+    animation-duration: 6.4s;
+  }
+
+  @keyframes boot-particle-float {
+    0%,
+    100% {
+      opacity: 0.18;
+      transform: translate3d(0, 0, 0) scale(0.72);
+    }
+
+    45% {
+      opacity: 0.95;
+      transform: translate3d(
+          calc(var(--design-unit) * 26),
+          calc(var(--design-unit) * -38),
+          0
+        )
+        scale(1.24);
+    }
+  }
+
+  @keyframes boot-ring-spin {
+    0% {
+      transform: rotate(0deg) scale(0.96);
+    }
+
+    50% {
+      transform: rotate(185deg) scale(1.04);
+    }
+
+    100% {
+      transform: rotate(360deg) scale(0.96);
+    }
+  }
+
+  @keyframes boot-scanline {
+    0% {
+      transform: translateY(-100%);
+    }
+
+    100% {
+      transform: translateY(100%);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .boot-particle,
+    .boot-ring,
+    .boot-scanline {
+      animation: none;
+    }
+  }
+
+  .data-loading-core::before,
+  .data-loading-core::after {
+    content: "";
+    position: absolute;
+    border-radius: 9999px;
+    background: #77fff8;
+    box-shadow: 0 0 calc(var(--design-unit) * 12) rgba(119, 255, 248, 0.8);
+  }
+
+  .data-loading-core::before {
+    top: 6%;
+    height: calc(var(--design-unit) * 5);
+    width: calc(var(--design-unit) * 5);
+  }
+
+  .data-loading-core::after {
+    bottom: 10%;
+    height: calc(var(--design-unit) * 4);
+    width: calc(var(--design-unit) * 4);
+    background: #fee889;
+    box-shadow: 0 0 calc(var(--design-unit) * 12) rgba(254, 232, 137, 0.72);
+  }
+
+  .data-loading-orbit {
+    animation: data-loading-orbit 1.25s cubic-bezier(0.45, 0, 0.2, 1) infinite;
+    border-top-color: rgba(113, 255, 247, 0.96);
+    border-right-color: rgba(113, 255, 247, 0.08);
+  }
+
+  .data-loading-orbit-delay {
+    animation-duration: 1.7s;
+    animation-direction: reverse;
+    border-top-color: rgba(255, 232, 137, 0.86);
+    border-left-color: rgba(255, 232, 137, 0.08);
+  }
+
+  @keyframes data-loading-orbit {
+    0% {
+      transform: rotate(0deg) scale(0.98);
+    }
+
+    50% {
+      transform: rotate(185deg) scale(1.04);
+    }
+
+    100% {
+      transform: rotate(360deg) scale(0.98);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .data-loading-orbit {
+      animation: none;
+    }
+  }
+
   .game-setting-input:focus,
   .game-setting-input:focus-visible {
     border: none;