fix: redesign earth hud interactions and legend behavior

frontend/public/earth/js/legend.js

@@ -0,0 +1,59 @@
+const LEGEND_MODES = {
+  cables: {
+    title: "线缆图例",
+    items: [
+      { color: "#ff4444", label: "Americas II" },
+      { color: "#44ff44", label: "AU Aleutian A" },
+      { color: "#4444ff", label: "AU Aleutian B" },
+      { color: "#ffff44", label: "其他电缆" },
+    ],
+  },
+  satellites: {
+    title: "卫星图例",
+    items: [
+      { color: "#4db8ff", label: "卫星本体" },
+      { color: "#9be7ff", label: "卫星轨迹" },
+      { color: "#7dffb3", label: "悬停高亮" },
+      { color: "#ffd166", label: "选中目标" },
+    ],
+  },
+};
+
+let currentLegendMode = "cables";
+
+export function initLegend() {
+  renderLegend(currentLegendMode);
+}
+
+export function setLegendMode(mode) {
+  const nextMode = LEGEND_MODES[mode] ? mode : "cables";
+  if (nextMode === currentLegendMode) return;
+  currentLegendMode = nextMode;
+  renderLegend(currentLegendMode);
+}
+
+export function getLegendMode() {
+  return currentLegendMode;
+}
+
+function renderLegend(mode) {
+  const legend = document.getElementById("legend");
+  if (!legend) return;
+
+  const config = LEGEND_MODES[mode] || LEGEND_MODES.cables;
+  const itemsHtml = config.items
+    .map(
+      (item) => `
+        <div class="legend-item">
+          <div class="legend-color" style="background-color: ${item.color};"></div>
+          <span>${item.label}</span>
+        </div>
+      `,
+    )
+    .join("");
+
+  legend.innerHTML = `
+    <h3 class="legend-title">${config.title}</h3>
+    <div class="legend-list">${itemsHtml}</div>
+  `;
+}