feat(modal): 添加居中模态框组件及游戏相关弹窗功能

- 新增 CenterModal 组件，支持标题、关闭按钮、背景图片等功能
- 添加键盘 ESC 键关闭模态框和页面滚动锁定功能
- 创建桌面端登录、注册和用户信息三个业务模态框
- 集成 lottie-web 动画库并创建 LottiePlayer 组件
- 在样式文件中添加模态框相关的 CSS 类和输入框样式
- 更新桌面入口文件集成登录和用户信息模态框
- 调整桌面控制组件间距和样式配置

src/style/index.css

@@ -42,10 +42,6 @@
   min-width: calc(var(--design-unit) * --value(integer));
 }
 
-@utility max-w-design-* {
-  max-width: calc(var(--design-unit) * --value(integer));
-}
-
 @utility text-design-* {
   font-size: calc(var(--design-unit) * --value(integer));
 }
@@ -54,8 +50,13 @@
   gap: calc(var(--design-unit) * --value(integer));
 }
 
+@utility pt-design-* {
+  padding-top: calc(var(--design-unit) * --value(integer));
+}
+
 @utility px-design-* {
-  padding-inline: calc(var(--design-unit) * --value(integer));
+  padding-left: calc(var(--design-unit) * --value(integer));
+  padding-right: calc(var(--design-unit) * --value(integer));
 }
 
 @utility p-design-* {
@@ -108,6 +109,10 @@
   top: calc(var(--design-unit) * --value(integer));
 }
 
+@utility right-design-* {
+  right: calc(var(--design-unit) * --value(integer));
+}
+
 @layer base {
   html {
     @apply h-full w-full text-design-16;
@@ -132,6 +137,25 @@
       linear-gradient(180deg, #07111f 0%, #040812 100%);
     color: #f8fafc;
   }
+
+  input {
+    @apply border border-transparent bg-[#135E65] text-[#D9FFFF] py-design-15 px-design-30 text-design-20 rounded-md outline-none transition;
+  }
+
+  input::placeholder {
+    color: rgba(116, 173, 175, 0.72);
+  }
+
+  input:focus,
+  input:focus-visible {
+    border-color: rgba(110, 255, 255, 0.72);
+    outline: none;
+    box-shadow:
+      0 0 0 calc(var(--design-unit) * 1.5) rgba(110, 255, 255, 0.16),
+      0 0 calc(var(--design-unit) * 8) rgba(48, 214, 255, 0.36),
+      0 0 calc(var(--design-unit) * 18) rgba(18, 162, 255, 0.22),
+      inset 0 0 calc(var(--design-unit) * 6) rgba(110, 255, 255, 0.08);
+  }
 }
 
 @layer utilities {
@@ -198,6 +222,28 @@
       drop-shadow(0 0 calc(var(--design-unit) * 14) rgba(49, 208, 255, 0.28));
   }
 
+  .modal-close-glow {
+    filter: drop-shadow(
+        0 0 calc(var(--design-unit) * 4) rgba(110, 255, 255, 0.95)
+      )
+      drop-shadow(0 0 calc(var(--design-unit) * 12) rgba(48, 214, 255, 0.78))
+      drop-shadow(0 0 calc(var(--design-unit) * 24) rgba(18, 162, 255, 0.5));
+  }
+
+  .modal-title-glow {
+    text-shadow:
+      0 0 calc(var(--design-unit) * 2) rgba(224, 255, 255, 0.95),
+      0 0 calc(var(--design-unit) * 6) rgba(108, 247, 255, 0.82),
+      0 0 calc(var(--design-unit) * 14) rgba(48, 214, 255, 0.58);
+  }
+
+  .modal-title-gold-glow {
+    text-shadow:
+      0 0 calc(var(--design-unit) * 2) rgba(255, 248, 235, 0.9),
+      0 0 calc(var(--design-unit) * 8) rgba(254, 238, 176, 0.64),
+      0 0 calc(var(--design-unit) * 16) rgba(254, 238, 176, 0.38);
+  }
+
   .desktop-control-chip {
     margin-left: calc(var(--design-unit) * -4);
     margin-right: calc(var(--design-unit) * -18);
@@ -209,7 +255,7 @@
   }
 
   .desktop-control-actions {
-    margin-left: calc(var(--design-unit) * -18);
+    margin-left: calc(var(--design-unit) * -16);
     margin-right: 0;
   }