fix: refine earth hud structure and bun startup flow

- refactor the /earth HUD into class-first CSS layers with dedicated base, hud, and toolbar responsibilities - clean up Earth markup and runtime DOM hooks so shared panel, toolbar, tooltip, and status classes stay consistent after dynamic updates - keep HUD scaling configurable through extracted constants and remove leftover legacy panel/toolbar styling paths - make planet.sh self-bootstrap Bun and uv by prepending local runtime bins to PATH and auto-installing missing tools in fresh environments - document Bun as the frontend package manager of record and sync repository version metadata to 0.24.1
2026-04-09 02:12:22 +08:00
parent 34d94a6b6b
commit c4ea918fac
24 changed files with 1248 additions and 1192 deletions
--- a/frontend/public/earth/js/constants.js
+++ b/frontend/public/earth/js/constants.js
@@ -12,6 +12,13 @@ export const CONFIG = {
  dragRotationScaleMax: 2.0,
 };

+export const HUD_CONFIG = {
+  scaleReferenceWidth: 1920,
+  scaleReferenceHeight: 1080,
+  minScale: 0.7,
+  maxScale: 1,
+};
+
 // Earth coordinate constants
 export const EARTH_CONFIG = {
  tilt: 23.5,  // earth tilt angle (degrees)
--- a/frontend/public/earth/js/controls.js
+++ b/frontend/public/earth/js/controls.js
@@ -76,7 +76,7 @@ function setFloatingMenuOpen(group, shouldOpen) {
 }

 function setButtonTooltip(button, text) {
-  const tooltip = button?.querySelector(".tooltip");
+  const tooltip = button?.querySelector(".earth-toolbar-tooltip");
  if (tooltip) {
    tooltip.textContent = text;
  }
@@ -566,7 +566,7 @@ function updateRotateUI() {
  if (btn) {
    btn.classList.toggle("active", autoRotate);
    btn.classList.toggle("is-stopped", !autoRotate);
-    const tooltip = btn.querySelector(".tooltip");
+    const tooltip = btn.querySelector(".earth-toolbar-tooltip");
    if (tooltip) tooltip.textContent = autoRotate ? "暂停旋转" : "开始旋转";
  }
 }
@@ -599,7 +599,7 @@ function updateLayoutUI(container) {
  const btn = document.getElementById("layout-toggle");
  if (btn) {
    btn.classList.toggle("active", layoutExpanded);
-    const tooltip = btn.querySelector(".tooltip");
+    const tooltip = btn.querySelector(".earth-toolbar-tooltip");
    const nextLabel = layoutExpanded ? "恢复布局" : "最大化布局";
    btn.title = nextLabel;
    if (tooltip) tooltip.textContent = nextLabel;
--- a/frontend/public/earth/js/legend.js
+++ b/frontend/public/earth/js/legend.js
@@ -61,7 +61,7 @@ function renderLegend(mode) {
    .join("");

  legend.innerHTML = `
-    <h3 class="legend-title">${config.title}</h3>
+    <h3 class="legend-title hud-panel-title">${config.title}</h3>
    <div class="legend-list">${itemsHtml}</div>
  `;
 }
--- a/frontend/public/earth/js/main.js
+++ b/frontend/public/earth/js/main.js
@@ -1,7 +1,7 @@
 import * as THREE from "three";
 import { createNoise3D } from "simplex-noise";

-import { CONFIG, CABLE_CONFIG, CABLE_STATE } from "./constants.js";
+import { CONFIG, HUD_CONFIG, CABLE_CONFIG, CABLE_STATE } from "./constants.js";
 import { vector3ToLatLon, screenToEarthCoords } from "./utils.js";
 import {
  showStatusMessage,
@@ -174,6 +174,7 @@ const cleanupFns = [];
 const DRAG_SMOOTHING_FACTOR = 0.18;
 const INERTIA_DAMPING = 0.92;
 const INERTIA_MIN_VELOCITY = 0.00008;
+const ACTIVE_BGP_TOOLTIP_TEXT = "隐藏BGP观测";
 const HUD_INTERACTIVE_SELECTORS = [
  "#info-panel",
  "#info-panel *",
@@ -195,6 +196,17 @@ function bindListener(target, eventName, handler, options) {
  );
 }

+function getViewportAspect() {
+  return window.innerWidth / window.innerHeight;
+}
+
+function syncRendererViewport() {
+  if (!camera || !renderer) return;
+  camera.aspect = getViewportAspect();
+  camera.updateProjectionMatrix();
+  renderer.setSize(window.innerWidth, window.innerHeight);
+}
+
 function isEventOnHud(event) {
  const target = event?.target;
  if (!(target instanceof Element)) return false;
@@ -520,6 +532,47 @@ function showBGPCollectorInfo(marker) {
  });
 }

+function getBGPStatusText(bgpResult) {
+  if (bgpResult.totalCount > 0) {
+    return `${bgpResult.totalCount} 起活跃事件`;
+  }
+  if (bgpResult.anomalyCount > 0) {
+    return `${bgpResult.anomalyCount} 条活跃异常`;
+  }
+  return "当前无活跃事件";
+}
+
+function updateBGPHud(bgpResult) {
+  const bgpBtn = document.getElementById("toggle-bgp");
+  if (bgpBtn) {
+    bgpBtn.classList.add("active");
+    const tooltip = bgpBtn.querySelector(".earth-toolbar-tooltip");
+    if (tooltip) {
+      tooltip.textContent = ACTIVE_BGP_TOOLTIP_TEXT;
+    }
+  }
+
+  const bgpCountEl = document.getElementById("bgp-anomaly-count");
+  if (bgpCountEl) {
+    bgpCountEl.textContent = `${bgpResult.totalCount} 起`;
+  }
+
+  const bgpCollectorEl = document.getElementById("bgp-collector-count");
+  if (bgpCollectorEl) {
+    bgpCollectorEl.textContent = `${bgpResult.collectorCount} 个`;
+  }
+
+  const bgpStatusEl = document.getElementById("bgp-status-summary");
+  if (bgpStatusEl) {
+    bgpStatusEl.textContent = getBGPStatusText(bgpResult);
+  }
+}
+
+function clearSelectionAndInfo() {
+  clearLockedObject();
+  hideInfoCard();
+}
+
 function getBGPRelatedCableNames(marker) {
  const items = Array.isArray(marker?.userData?.related_cables)
    ? marker.userData.related_cables
@@ -655,7 +708,7 @@ function updateSatelliteToggleUi(enabled, satelliteCount = getSatelliteCount())
  const satBtn = document.getElementById("toggle-satellites");
  if (satBtn) {
    satBtn.classList.toggle("active", enabled);
-    const tooltip = satBtn.querySelector(".tooltip");
+    const tooltip = satBtn.querySelector(".earth-toolbar-tooltip");
    if (tooltip) tooltip.textContent = enabled ? "隐藏卫星" : "显示卫星";
  }

@@ -669,7 +722,7 @@ function updateCableToggleUi(enabled) {
  const cableBtn = document.getElementById("toggle-cables");
  if (cableBtn) {
    cableBtn.classList.toggle("active", enabled);
-    const tooltip = cableBtn.querySelector(".tooltip");
+    const tooltip = cableBtn.querySelector(".earth-toolbar-tooltip");
    if (tooltip) tooltip.textContent = enabled ? "隐藏线缆" : "显示线缆";
  }

@@ -799,11 +852,12 @@ export function init() {
  destroyed = false;
  initialized = true;
  simplex = createNoise3D();
+  updateHudScale();

  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(
    75,
-    window.innerWidth / window.innerHeight,
+    getViewportAspect(),
    0.1,
    1000,
  );
@@ -815,7 +869,7 @@ export function init() {
    alpha: false,
    powerPreference: "high-performance",
  });
-  renderer.setSize(window.innerWidth, window.innerHeight);
+  syncRendererViewport();
  renderer.setClearColor(0x0a0a1a, 1);
  renderer.setPixelRatio(window.devicePixelRatio);

@@ -898,8 +952,7 @@ async function loadData(showWhiteSphere = false) {
      : "同步卫星、海底光缆、登陆点与BGP态势数据",
  );
  setLoading(true);
-  clearLockedObject();
-  hideInfoCard();
+  clearSelectionAndInfo();

  if (showWhiteSphere && earth.material) {
    earthTexture = earth.material.map;
@@ -915,29 +968,7 @@ async function loadData(showWhiteSphere = false) {
      clearBGPData(earth);
      const bgpResult = await loadBGPAnomalies(scene, earth);
      toggleBGP(true);
-      const bgpBtn = document.getElementById("toggle-bgp");
-      if (bgpBtn) {
-        bgpBtn.classList.add("active");
-        const tooltip = bgpBtn.querySelector(".tooltip");
-        if (tooltip) tooltip.textContent = "隐藏BGP观测";
-      }
-      const bgpCountEl = document.getElementById("bgp-anomaly-count");
-      if (bgpCountEl) {
-        bgpCountEl.textContent = `${bgpResult.totalCount} 起`;
-      }
-      const bgpCollectorEl = document.getElementById("bgp-collector-count");
-      if (bgpCollectorEl) {
-        bgpCollectorEl.textContent = `${bgpResult.collectorCount} 个`;
-      }
-      const bgpStatusEl = document.getElementById("bgp-status-summary");
-      if (bgpStatusEl) {
-        bgpStatusEl.textContent =
-          bgpResult.totalCount > 0
-            ? `${bgpResult.totalCount} 起活跃事件`
-            : bgpResult.anomalyCount > 0
-              ? `${bgpResult.anomalyCount} 条活跃异常`
-              : "当前无活跃事件";
-      }
+      updateBGPHud(bgpResult);
      return bgpResult;
    })(),
  ]);
@@ -997,8 +1028,7 @@ export async function setCablesEnabled(enabled) {
  }

  if (!enabled) {
-    clearLockedObject();
-    hideInfoCard();
+    clearSelectionAndInfo();
    disableCables();
    showStatusMessage("线缆已隐藏", "info");
    return 0;
@@ -1032,8 +1062,7 @@ export async function setSatellitesEnabled(enabled) {
  }

  if (!enabled) {
-    clearLockedObject();
-    hideInfoCard();
+    clearSelectionAndInfo();
    disableSatellites();
    return 0;
  }
@@ -1078,11 +1107,24 @@ function setupEventListeners() {
  bindListener(renderer.domElement, "click", handleClick);
 }

+function updateHudScale() {
+  const widthScale = window.innerWidth / HUD_CONFIG.scaleReferenceWidth;
+  const heightScale = window.innerHeight / HUD_CONFIG.scaleReferenceHeight;
+  const nextScale = THREE.MathUtils.clamp(
+    Math.min(widthScale, heightScale),
+    HUD_CONFIG.minScale,
+    HUD_CONFIG.maxScale,
+  );
+
+  document.documentElement.style.setProperty(
+    "--hud-scale",
+    nextScale.toFixed(3),
+  );
+}
+
 function onWindowResize() {
-  if (!camera || !renderer) return;
-  camera.aspect = window.innerWidth / window.innerHeight;
-  camera.updateProjectionMatrix();
-  renderer.setSize(window.innerWidth, window.innerHeight);
+  updateHudScale();
+  syncRendererViewport();
 }

 function getFrontFacingCables(cableLines) {
--- a/frontend/public/earth/js/ui.js
+++ b/frontend/public/earth/js/ui.js
@@ -3,12 +3,18 @@
 let statusTimeoutId = null;
 let statusHideTimeoutId = null;
 let statusReplayTimeoutId = null;
+const STATUS_BASE_CLASS = "earth-status-message";

-// Show status message
-export function showStatusMessage(message, type = "info") {
-  const statusEl = document.getElementById("status-message");
-  if (!statusEl) return;
+function getElement(id) {
+  return document.getElementById(id);
+}

+function setElementDisplay(element, visible, displayValue = "block") {
+  if (!element) return;
+  element.style.display = visible ? displayValue : "none";
+}
+
+function clearStatusTimers() {
  if (statusTimeoutId) {
    clearTimeout(statusTimeoutId);
    statusTimeoutId = null;
@@ -23,18 +29,26 @@ export function showStatusMessage(message, type = "info") {
    clearTimeout(statusReplayTimeoutId);
    statusReplayTimeoutId = null;
  }
+}
+
+// Show status message
+export function showStatusMessage(message, type = "info") {
+  const statusEl = getElement("status-message");
+  if (!statusEl) return;
+
+  clearStatusTimers();

  const startShow = () => {
    statusEl.textContent = message;
-    statusEl.className = `status-message ${type}`;
-    statusEl.style.display = "block";
+    statusEl.className = `${STATUS_BASE_CLASS} ${type}`;
+    setElementDisplay(statusEl, true);
    statusEl.offsetHeight;
    statusEl.classList.add("visible");

    statusTimeoutId = setTimeout(() => {
      statusEl.classList.remove("visible");
      statusHideTimeoutId = setTimeout(() => {
-        statusEl.style.display = "none";
+        setElementDisplay(statusEl, false);
        statusEl.textContent = "";
        statusHideTimeoutId = null;
      }, 280);
@@ -56,9 +70,9 @@ export function showStatusMessage(message, type = "info") {

 // Update coordinates display
 export function updateCoordinatesDisplay(lat, lon, alt = 0) {
-  const longitudeEl = document.getElementById("longitude-value");
-  const latitudeEl = document.getElementById("latitude-value");
-  const mouseCoordsEl = document.getElementById("mouse-coords");
+  const longitudeEl = getElement("longitude-value");
+  const latitudeEl = getElement("latitude-value");
+  const mouseCoordsEl = getElement("mouse-coords");

  if (longitudeEl) longitudeEl.textContent = lon.toFixed(2) + "°";
  if (latitudeEl) latitudeEl.textContent = lat.toFixed(2) + "°";
@@ -70,10 +84,10 @@ export function updateCoordinatesDisplay(lat, lon, alt = 0) {
 // Update zoom display
 export function updateZoomDisplay(zoomLevel, distance) {
  const percent = Math.round(zoomLevel * 100);
-  const zoomValueEl = document.getElementById("zoom-value");
-  const zoomLevelEl = document.getElementById("zoom-level");
-  const slider = document.getElementById("zoom-slider");
-  const cameraDistanceEl = document.getElementById("camera-distance");
+  const zoomValueEl = getElement("zoom-value");
+  const zoomLevelEl = getElement("zoom-level");
+  const slider = getElement("zoom-slider");
+  const cameraDistanceEl = getElement("camera-distance");

  if (zoomValueEl) zoomValueEl.textContent = percent + "%";
  if (zoomLevelEl) zoomLevelEl.textContent = "缩放: " + percent + "%";
@@ -83,13 +97,13 @@ export function updateZoomDisplay(zoomLevel, distance) {

 // Update earth stats
 export function updateEarthStats(stats) {
-  const cableCountEl = document.getElementById("cable-count");
-  const landingPointCountEl = document.getElementById("landing-point-count");
-  const bgpAnomalyCountEl = document.getElementById("bgp-anomaly-count");
-  const bgpCollectorCountEl = document.getElementById("bgp-collector-count");
-  const bgpStatusSummaryEl = document.getElementById("bgp-status-summary");
-  const terrainStatusEl = document.getElementById("terrain-status");
-  const textureQualityEl = document.getElementById("texture-quality");
+  const cableCountEl = getElement("cable-count");
+  const landingPointCountEl = getElement("landing-point-count");
+  const bgpAnomalyCountEl = getElement("bgp-anomaly-count");
+  const bgpCollectorCountEl = getElement("bgp-collector-count");
+  const bgpStatusSummaryEl = getElement("bgp-status-summary");
+  const terrainStatusEl = getElement("terrain-status");
+  const textureQualityEl = getElement("texture-quality");

  if (cableCountEl) cableCountEl.textContent = stats.cableCount || 0;
  if (landingPointCountEl)
@@ -108,14 +122,14 @@ export function updateEarthStats(stats) {

 // Show/hide loading
 export function setLoading(loading) {
-  const loadingEl = document.getElementById("loading");
+  const loadingEl = getElement("loading");
  if (!loadingEl) return;
-  loadingEl.style.display = loading ? "block" : "none";
+  setElementDisplay(loadingEl, loading);
 }

 export function setLoadingMessage(title, subtitle = "") {
-  const titleEl = document.getElementById("loading-title");
-  const subtitleEl = document.getElementById("loading-subtitle");
+  const titleEl = getElement("loading-title");
+  const subtitleEl = getElement("loading-subtitle");

  if (titleEl) {
    titleEl.textContent = title;
@@ -128,48 +142,46 @@ export function setLoadingMessage(title, subtitle = "") {

 // Show tooltip
 export function showTooltip(x, y, content) {
-  const tooltip = document.getElementById("tooltip");
+  const tooltip = getElement("tooltip");
  if (!tooltip) return;
  tooltip.innerHTML = content;
  tooltip.style.left = x + "px";
  tooltip.style.top = y + "px";
-  tooltip.style.display = "block";
+  setElementDisplay(tooltip, true);
 }

 // Hide tooltip
 export function hideTooltip() {
-  const tooltip = document.getElementById("tooltip");
+  const tooltip = getElement("tooltip");
  if (tooltip) {
-    tooltip.style.display = "none";
+    setElementDisplay(tooltip, false);
  }
 }

 // Show error message
 export function showError(message) {
-  const errorEl = document.getElementById("error-message");
+  const errorEl = getElement("error-message");
  if (!errorEl) return;
  errorEl.textContent = message;
-  errorEl.style.display = "block";
+  setElementDisplay(errorEl, true);
 }

 // Hide error message
 export function hideError() {
-  const errorEl = document.getElementById("error-message");
+  const errorEl = getElement("error-message");
  if (errorEl) {
-    errorEl.style.display = "none";
+    setElementDisplay(errorEl, false);
    errorEl.textContent = "";
  }
 }

 export function clearUiState() {
-  if (statusTimeoutId) {
-    clearTimeout(statusTimeoutId);
-    statusTimeoutId = null;
-  }
+  clearStatusTimers();

-  const statusEl = document.getElementById("status-message");
+  const statusEl = getElement("status-message");
  if (statusEl) {
-    statusEl.style.display = "none";
+    statusEl.className = STATUS_BASE_CLASS;
+    setElementDisplay(statusEl, false);
    statusEl.textContent = "";
  }