fix: polish earth legend and info panel interactions

frontend/public/earth/js/cables.js

@@ -6,7 +6,7 @@ import { CONFIG, CABLE_COLORS, PATHS, CABLE_STATE } from "./constants.js";
 import { latLonToVector3 } from "./utils.js";
 import { updateEarthStats, showStatusMessage } from "./ui.js";
 import { showInfoCard } from "./info-card.js";
-import { setLegendMode } from "./legend.js";
+import { setLegendItems, setLegendMode } from "./legend.js";
 
 export let cableLines = [];
 export let landingPoints = [];
@@ -57,7 +57,11 @@ function getCableColor(properties) {
   }
 
   const cableName =
-    properties.Name || properties.cableName || properties.shortname || "";
+    properties.Name ||
+    properties.name ||
+    properties.cableName ||
+    properties.shortname ||
+    "";
   if (cableName.includes("Americas II")) {
     return CABLE_COLORS["Americas II"];
   }
@@ -91,11 +95,17 @@ function createCableLine(points, color, properties) {
     properties.cable_id ||
     properties.id ||
     properties.Name ||
+    properties.name ||
     Math.random().toString(36);
   cableLine.userData = {
     type: "cable",
     cableId,
-    name: properties.Name || properties.cableName || "Unknown",
+    name:
+      properties.Name ||
+      properties.name ||
+      properties.cableName ||
+      properties.shortname ||
+      "Unknown",
     owner: properties.owner || properties.owners || "-",
     status: properties.status || "-",
     length: properties.length || "-",
@@ -382,6 +392,7 @@ export async function loadLandingPoints(scene, earthObj) {
 
 export function handleCableClick(cable) {
   lockedCable = cable;
+  setLegendItems("cables", getCableLegendItems());
 
   const data = cable.userData;
   setLegendMode("cables");
@@ -399,12 +410,51 @@ export function handleCableClick(cable) {
 
 export function clearCableSelection() {
   lockedCable = null;
+  setLegendItems("cables", getCableLegendItems());
 }
 
 export function getCableLines() {
   return cableLines;
 }
 
+export function getCableLegendItems() {
+  const legendMap = new Map();
+
+  cableLines.forEach((cable) => {
+    const color = cable.userData?.originalColor;
+    const label = cable.userData?.name || "未知线缆";
+
+    if (typeof color === "number" && !legendMap.has(label)) {
+      legendMap.set(label, {
+        label,
+        color: `#${color.toString(16).padStart(6, "0")}`,
+      });
+    }
+  });
+
+  if (legendMap.size === 0) {
+    return [{ label: "其他电缆", color: "#ffff44" }];
+  }
+
+  const items = Array.from(legendMap.values()).sort((a, b) =>
+    a.label.localeCompare(b.label, "zh-CN"),
+  );
+
+  const selectedName = lockedCable?.userData?.name;
+  if (!selectedName) {
+    return items;
+  }
+
+  const selectedIndex = items.findIndex((item) => item.label === selectedName);
+  if (selectedIndex <= 0) {
+    return items;
+  }
+
+  const [selectedItem] = items.splice(selectedIndex, 1);
+  items.unshift(selectedItem);
+  return items;
+}
+
 export function getCablesById(cableId) {
   return cableIdMap.get(cableId) || [];
 }