release: bump version to 0.25.2

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "planet-frontend",
-  "version": "0.25.1",
+  "version": "0.25.2",
   "private": true,
   "packageManager": "bun@1",
   "dependencies": {

frontend/public/earth/css/hud.css

@@ -58,13 +58,14 @@
 
 .hud-panel-title {
   color: #4db8ff;
-  margin-bottom: var(--hud-gap-sm);
+  margin: 0 0 var(--hud-gap-sm);
   font-size: var(--hud-title-size);
+  line-height: 1.2;
 }
 
 .hud-panel-header {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   justify-content: space-between;
   gap: var(--hud-gap-sm);
   margin-bottom: var(--hud-gap-sm);
@@ -84,9 +85,11 @@
 }
 
 .hud-panel-close {
-  width: 28px;
-  height: 28px;
-  min-width: 28px;
+  align-self: flex-start;
+  width: calc(var(--hud-title-size) * 1.24);
+  height: calc(var(--hud-title-size) * 1.24);
+  min-width: calc(var(--hud-title-size) * 1.24);
+  padding: 0;
   border: 0;
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.08);
@@ -99,7 +102,8 @@
 }
 
 .hud-panel-close .material-symbols-rounded {
-  font-size: 18px;
+  font-size: calc(var(--hud-title-size) * 0.8);
+  line-height: 1;
 }
 
 .hud-panel-close:hover {
@@ -116,6 +120,10 @@
     0 0 36px rgba(120, 200, 255, 0.16);
 }
 
+.hud-panel.is-layout-animating {
+  transition: none !important;
+}
+
 .hud-panel-hidden {
   display: none !important;
 }
@@ -224,12 +232,13 @@
 
 .earth-settings-sheet {
   position: fixed;
-  top: 15vh;
-  right: 20vw;
-  bottom: 15vh;
-  left: 20vw;
-  width: auto;
-  max-width: none;
+  top: max(32px, 9vh);
+  right: 16px;
+  left: 16px;
+  width: min(560px, calc(100vw - 32px));
+  max-width: 560px;
+  max-height: calc(100vh - max(64px, 18vh));
+  margin-inline: auto;
   transform: none;
   border-radius: calc(28px * var(--hud-scale));
   padding: calc(20px * var(--hud-scale));
@@ -272,24 +281,12 @@
 }
 
 .earth-settings-title {
-  margin-top: 4px;
+  margin: 4px 0 0;
   color: #eef7ff;
-  font-size: calc(1.45rem * var(--hud-scale));
-  font-weight: 600;
 }
 
 .earth-settings-close {
-  width: 34px;
-  height: 34px;
-  min-width: 34px;
-  border: 0;
-  border-radius: 999px;
-  background: rgba(255, 255, 255, 0.08);
-  color: #d9efff;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
+  margin-top: 4px;
 }
 
 .earth-settings-content {
@@ -406,10 +403,12 @@
 
 @media (max-width: 960px) {
   .earth-settings-sheet {
-    top: 12vh;
-    right: 10vw;
-    bottom: 12vh;
-    left: 10vw;
+    top: 24px;
+    right: 12px;
+    left: 12px;
+    width: auto;
+    max-width: none;
+    max-height: calc(100vh - 48px);
   }
 }
 

frontend/public/earth/index.html

@@ -13,6 +13,20 @@
     }
   }
   </script>
+  <script>
+    (function applyInitialHudScale() {
+      var referenceWidth = 1920;
+      var referenceHeight = 1080;
+      var minScale = 0.7;
+      var maxScale = 1;
+      var widthScale = window.innerWidth / referenceWidth;
+      var heightScale = window.innerHeight / referenceHeight;
+      var scale = Math.min(widthScale, heightScale);
+      var clampedScale = Math.max(minScale, Math.min(maxScale, scale));
+
+      document.documentElement.style.setProperty("--hud-scale", clampedScale.toFixed(3));
+    })();
+  </script>
   <link rel="stylesheet" href="css/base.css">
   <link rel="stylesheet" href="css/hud.css">
   <link rel="stylesheet" href="css/toolbar.css">
@@ -261,9 +275,9 @@
         <div class="earth-settings-header">
           <div>
             <div class="earth-settings-kicker">设置</div>
-            <h2 id="settings-title" class="earth-settings-title">显示与视图</h2>
+            <h3 id="settings-title" class="earth-settings-title hud-panel-title">显示与视图</h3>
           </div>
-          <button id="settings-close" class="earth-settings-close" type="button" aria-label="关闭设置">
+          <button id="settings-close" class="earth-settings-close hud-panel-close" type="button" aria-label="关闭设置">
             <span class="material-symbols-rounded">close</span>
           </button>
         </div>

frontend/public/earth/js/controls.js

@@ -31,6 +31,8 @@ const HUD_PANEL_IDS = [
   "coordinates-display",
   "earth-stats",
 ];
+const DRAGGABLE_PANEL_SELECTOR = ".hud-panel-draggable";
+const PANEL_LAYOUT_ANIMATION_MS = 420;
 
 function getFloatingGroups() {
   return [
@@ -159,7 +161,7 @@ function setupHudPanelControls() {
 
 function setupDraggableHudPanels() {
   const app = document.getElementById("container");
-  const draggablePanels = document.querySelectorAll(".hud-panel-draggable");
+  const draggablePanels = document.querySelectorAll(DRAGGABLE_PANEL_SELECTOR);
   if (!app || draggablePanels.length === 0) return;
 
   draggablePanels.forEach((panel) => {
@@ -196,6 +198,7 @@ function setupDraggableHudPanels() {
       panel.style.right = "auto";
       panel.style.bottom = "auto";
       panel.style.transform = "none";
+      panel.dataset.dragged = "true";
     };
 
     bindListener(handle, "pointerdown", (event) => {
@@ -212,6 +215,7 @@ function setupDraggableHudPanels() {
       panel.style.right = "auto";
       panel.style.bottom = "auto";
       panel.style.transform = "none";
+      panel.dataset.dragged = "true";
       panel.classList.add("is-dragging");
       document.body.style.userSelect = "none";
       handle.setPointerCapture?.(event.pointerId);
@@ -783,8 +787,74 @@ function updateLayoutUI(container) {
   }
 }
 
-function toggleLayoutExpanded(container) {
-  layoutExpanded = !layoutExpanded;
-  updateLayoutUI(container);
-  return layoutExpanded;
+function resetPanelInlineLayout(panel) {
+  panel.style.left = "";
+  panel.style.top = "";
+  panel.style.right = "";
+  panel.style.bottom = "";
+  panel.style.transform = "";
+  delete panel.dataset.dragged;
+}
+
+function isPanelVisible(panel) {
+  return !panel.classList.contains("hud-panel-hidden");
+}
+
+function animatePanelLayoutTransition(container, expand) {
+  const panels = Array.from(
+    container.querySelectorAll(DRAGGABLE_PANEL_SELECTOR),
+  );
+  if (panels.length === 0) {
+    layoutExpanded = expand;
+    updateLayoutUI(container);
+    return expand;
+  }
+
+  const visiblePanels = panels.filter(isPanelVisible);
+  const firstRects = new Map(
+    visiblePanels.map((panel) => [panel, panel.getBoundingClientRect()]),
+  );
+
+  panels.forEach((panel) => panel.classList.add("is-layout-animating"));
+  layoutExpanded = expand;
+  panels.forEach(resetPanelInlineLayout);
+  updateLayoutUI(container);
+
+  visiblePanels.forEach((panel) => {
+    const firstRect = firstRects.get(panel);
+    if (!firstRect) return;
+
+    const lastRect = panel.getBoundingClientRect();
+    const deltaX = firstRect.left - lastRect.left;
+    const deltaY = firstRect.top - lastRect.top;
+
+    if (Math.abs(deltaX) < 0.5 && Math.abs(deltaY) < 0.5) {
+      return;
+    }
+
+    panel.animate(
+      [
+        {
+          translate: `${deltaX}px ${deltaY}px`,
+        },
+        {
+          translate: "0 0",
+        },
+      ],
+      {
+        duration: PANEL_LAYOUT_ANIMATION_MS,
+        easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+      },
+    );
+  });
+
+  window.setTimeout(() => {
+    panels.forEach((panel) => panel.classList.remove("is-layout-animating"));
+  }, PANEL_LAYOUT_ANIMATION_MS);
+
+  return expand;
+}
+
+function toggleLayoutExpanded(container) {
+  return animatePanelLayoutTransition(container, !layoutExpanded);
 }