Stabilize Earth module and fix satellite TLE handling

frontend/public/earth/js/ui.js

@@ -1,71 +1,125 @@
 // ui.js - UI update functions
 
+let statusTimeoutId = null;
+
 // Show status message
-export function showStatusMessage(message, type = 'info') {
-  const statusEl = document.getElementById('status-message');
+export function showStatusMessage(message, type = "info") {
+  const statusEl = document.getElementById("status-message");
+  if (!statusEl) return;
+
+  if (statusTimeoutId) {
+    clearTimeout(statusTimeoutId);
+    statusTimeoutId = null;
+  }
+
   statusEl.textContent = message;
   statusEl.className = `status-message ${type}`;
-  statusEl.style.display = 'block';
-  
-  setTimeout(() => {
-    statusEl.style.display = 'none';
+  statusEl.style.display = "block";
+
+  statusTimeoutId = setTimeout(() => {
+    statusEl.style.display = "none";
+    statusEl.textContent = "";
+    statusTimeoutId = null;
   }, 3000);
 }
 
 // Update coordinates display
 export function updateCoordinatesDisplay(lat, lon, alt = 0) {
-  document.getElementById('longitude-value').textContent = lon.toFixed(2) + '°';
-  document.getElementById('latitude-value').textContent = lat.toFixed(2) + '°';
-  document.getElementById('mouse-coords').textContent = 
-    `鼠标: ${lat.toFixed(2)}°, ${lon.toFixed(2)}°`;
+  const longitudeEl = document.getElementById("longitude-value");
+  const latitudeEl = document.getElementById("latitude-value");
+  const mouseCoordsEl = document.getElementById("mouse-coords");
+
+  if (longitudeEl) longitudeEl.textContent = lon.toFixed(2) + "°";
+  if (latitudeEl) latitudeEl.textContent = lat.toFixed(2) + "°";
+  if (mouseCoordsEl) {
+    mouseCoordsEl.textContent = `鼠标: ${lat.toFixed(2)}°, ${lon.toFixed(2)}°`;
+  }
 }
 
 // Update zoom display
 export function updateZoomDisplay(zoomLevel, distance) {
   const percent = Math.round(zoomLevel * 100);
-  document.getElementById('zoom-value').textContent = percent + '%';
-  document.getElementById('zoom-level').textContent = '缩放: ' + percent + '%';
-  const slider = document.getElementById('zoom-slider');
+  const zoomValueEl = document.getElementById("zoom-value");
+  const zoomLevelEl = document.getElementById("zoom-level");
+  const slider = document.getElementById("zoom-slider");
+  const cameraDistanceEl = document.getElementById("camera-distance");
+
+  if (zoomValueEl) zoomValueEl.textContent = percent + "%";
+  if (zoomLevelEl) zoomLevelEl.textContent = "缩放: " + percent + "%";
   if (slider) slider.value = zoomLevel;
-  document.getElementById('camera-distance').textContent = distance + ' km';
+  if (cameraDistanceEl) cameraDistanceEl.textContent = distance + " km";
 }
 
 // Update earth stats
 export function updateEarthStats(stats) {
-  document.getElementById('cable-count').textContent = stats.cableCount || 0;
-  document.getElementById('landing-point-count').textContent = stats.landingPointCount || 0;
-  document.getElementById('terrain-status').textContent = stats.terrainOn ? '开启' : '关闭';
-  document.getElementById('texture-quality').textContent = stats.textureQuality || '8K 卫星图';
+  const cableCountEl = document.getElementById("cable-count");
+  const landingPointCountEl = document.getElementById("landing-point-count");
+  const terrainStatusEl = document.getElementById("terrain-status");
+  const textureQualityEl = document.getElementById("texture-quality");
+
+  if (cableCountEl) cableCountEl.textContent = stats.cableCount || 0;
+  if (landingPointCountEl)
+    landingPointCountEl.textContent = stats.landingPointCount || 0;
+  if (terrainStatusEl)
+    terrainStatusEl.textContent = stats.terrainOn ? "开启" : "关闭";
+  if (textureQualityEl)
+    textureQualityEl.textContent = stats.textureQuality || "8K 卫星图";
 }
 
 // Show/hide loading
 export function setLoading(loading) {
-  const loadingEl = document.getElementById('loading');
-  loadingEl.style.display = loading ? 'block' : 'none';
+  const loadingEl = document.getElementById("loading");
+  if (!loadingEl) return;
+  loadingEl.style.display = loading ? "block" : "none";
 }
 
 // Show tooltip
 export function showTooltip(x, y, content) {
-  const tooltip = document.getElementById('tooltip');
+  const tooltip = document.getElementById("tooltip");
+  if (!tooltip) return;
   tooltip.innerHTML = content;
-  tooltip.style.left = x + 'px';
-  tooltip.style.top = y + 'px';
-  tooltip.style.display = 'block';
+  tooltip.style.left = x + "px";
+  tooltip.style.top = y + "px";
+  tooltip.style.display = "block";
 }
 
 // Hide tooltip
 export function hideTooltip() {
-  document.getElementById('tooltip').style.display = 'none';
+  const tooltip = document.getElementById("tooltip");
+  if (tooltip) {
+    tooltip.style.display = "none";
+  }
 }
 
 // Show error message
 export function showError(message) {
-  const errorEl = document.getElementById('error-message');
+  const errorEl = document.getElementById("error-message");
+  if (!errorEl) return;
   errorEl.textContent = message;
-  errorEl.style.display = 'block';
+  errorEl.style.display = "block";
 }
 
 // Hide error message
 export function hideError() {
-  document.getElementById('error-message').style.display = 'none';
+  const errorEl = document.getElementById("error-message");
+  if (errorEl) {
+    errorEl.style.display = "none";
+    errorEl.textContent = "";
+  }
+}
+
+export function clearUiState() {
+  if (statusTimeoutId) {
+    clearTimeout(statusTimeoutId);
+    statusTimeoutId = null;
+  }
+
+  const statusEl = document.getElementById("status-message");
+  if (statusEl) {
+    statusEl.style.display = "none";
+    statusEl.textContent = "";
+  }
+
+  hideTooltip();
+  hideError();
 }