feat: 实现桌面控制组件

src/style/index.css

@@ -1,3 +1,4 @@
+@import "./font.css";
 @import "tailwindcss";
 
 @theme {
@@ -5,6 +6,7 @@
     "Inter", "SF Pro Display", "Segoe UI", "Helvetica Neue", sans-serif;
   --font-mono:
     "JetBrains Mono", "SFMono-Regular", "SF Mono", Consolas, monospace;
+  --font-countdown: "Countdown", "Inter", "SF Pro Display", sans-serif;
   --color-game-bg: #07111f;
   --color-game-surface: #0d1b2d;
   --color-game-surface-strong: #12253d;
@@ -18,9 +20,97 @@
     0 20px 60px rgba(2, 6, 23, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
 }
 
+:root {
+  --design-unit: calc(100vw / 1920);
+}
+
+@media (max-width: 768px) {
+  :root {
+    --design-unit: calc(100vw / 375);
+  }
+}
+
+@utility w-design-* {
+  width: calc(var(--design-unit) * --value(integer));
+}
+
+@utility h-design-* {
+  height: calc(var(--design-unit) * --value(integer));
+}
+
+@utility min-w-design-* {
+  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));
+}
+
+@utility gap-design-* {
+  gap: calc(var(--design-unit) * --value(integer));
+}
+
+@utility px-design-* {
+  padding-inline: calc(var(--design-unit) * --value(integer));
+}
+
+@utility p-design-* {
+  padding: calc(var(--design-unit) * --value(integer));
+}
+
+@utility mt-design-* {
+  margin-top: calc(var(--design-unit) * --value(integer));
+}
+
+@utility mb-design-* {
+  margin-bottom: calc(var(--design-unit) * --value(integer));
+}
+
+@utility ml-design-* {
+  margin-left: calc(var(--design-unit) * --value(integer));
+}
+
+@utility mr-design-* {
+  margin-right: calc(var(--design-unit) * --value(integer));
+}
+
+@utility mx-design-* {
+  margin-left: calc(var(--design-unit) * --value(integer));
+  margin-right: calc(var(--design-unit) * --value(integer));
+}
+
+@utility py-design-* {
+  padding-top: calc(var(--design-unit) * --value(integer));
+  padding-bottom: calc(var(--design-unit) * --value(integer));
+}
+
+@utility pl-design-* {
+  padding-left: calc(var(--design-unit) * --value(integer));
+}
+
+@utility pr-design-* {
+  padding-right: calc(var(--design-unit) * --value(integer));
+}
+
+@utility my-design-* {
+  margin-block: calc(var(--design-unit) * --value(integer));
+}
+
+@utility left-design-* {
+  left: calc(var(--design-unit) * --value(integer));
+}
+
+@utility top-design-* {
+  top: calc(var(--design-unit) * --value(integer));
+}
+
 @layer base {
   html {
-    @apply h-full w-full;
+    @apply h-full w-full text-design-16;
   }
 
   body {
@@ -48,10 +138,36 @@
   .common-neon-inset {
     border: 1px solid rgba(128, 223, 231, 0.65);
     border-radius: 5px;
-    padding: 8px 10px;
+    padding: calc(var(--design-unit) * 8) calc(var(--design-unit) * 10);
     box-shadow: inset 0 0 8px rgba(128, 223, 231, 0.65);
   }
 
+  .common-neon-inset-glow {
+    border: 1px solid rgba(128, 223, 231, 0.65);
+    border-radius: 5px;
+    padding: calc(var(--design-unit) * 8) calc(var(--design-unit) * 10);
+    background:
+      linear-gradient(180deg, rgba(18, 44, 58, 0.92), rgba(8, 22, 34, 0.9)),
+      radial-gradient(circle at top, rgba(128, 223, 231, 0.16), transparent 62%);
+    box-shadow:
+      inset 0 0 calc(var(--design-unit) * 8) rgba(128, 223, 231, 0.72),
+      inset 0 0 calc(var(--design-unit) * 18) rgba(128, 223, 231, 0.18),
+      0 0 calc(var(--design-unit) * 6) rgba(128, 223, 231, 0.35),
+      0 0 calc(var(--design-unit) * 18) rgba(128, 223, 231, 0.24);
+    position: relative;
+    overflow: hidden;
+  }
+
+  .common-neon-inset-glow::before {
+    content: "";
+    position: absolute;
+    inset: 1px;
+    border-radius: 4px;
+    border-top: 1px solid rgba(214, 249, 252, 0.8);
+    opacity: 0.85;
+    pointer-events: none;
+  }
+
   .game-panel {
     border: 1px solid rgba(124, 232, 255, 0.12);
     background: linear-gradient(
@@ -74,4 +190,41 @@
       0 0 0 1px rgba(245, 200, 107, 0.2),
       0 18px 40px rgba(245, 200, 107, 0.14);
   }
+
+  .desktop-game-history-glow {
+    filter: drop-shadow(
+        0 0 calc(var(--design-unit) * 4) rgba(49, 208, 255, 0.65)
+      )
+      drop-shadow(0 0 calc(var(--design-unit) * 14) rgba(49, 208, 255, 0.28));
+  }
+
+  .desktop-control-chip {
+    margin-left: calc(var(--design-unit) * -4);
+    margin-right: calc(var(--design-unit) * -18);
+  }
+
+  .desktop-control-total {
+    margin-left: calc(var(--design-unit) * -26);
+    margin-right: calc(var(--design-unit) * -26);
+  }
+
+  .desktop-control-actions {
+    margin-left: calc(var(--design-unit) * -18);
+    margin-right: 0;
+  }
+
+  .desktop-control-confirm {
+    margin-left: calc(var(--design-unit) * -10);
+  }
+
+  .history-scroll-hidden {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+
+  .history-scroll-hidden::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+    display: none;
+  }
 }