release: bump version to 0.27.0

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/public/earth/js/legend.js

@@ -1,13 +1,7 @@
 const LEGEND_MODES = {
-  cables: {
-    title: "线缆图例",
-  },
-  satellites: {
-    title: "卫星图例",
-  },
-  bgp: {
-    title: "BGP观测图例",
-  },
+  cables:     { title: "海缆" },
+  satellites: { title: "卫星" },
+  bgp:        { title: "BGP" },
 };
 
 let currentLegendMode = "cables";
@@ -18,13 +12,35 @@ let legendItemsByMode = {
 };
 
 export function initLegend() {
+  // Tab click → switch mode
+  const tabsEl = document.getElementById("legend-tabs");
+  if (tabsEl) {
+    tabsEl.addEventListener("click", (e) => {
+      const btn = e.target.closest(".legend-tab");
+      if (!btn) return;
+      const mode = btn.dataset.legendMode;
+      if (mode) setLegendMode(mode);
+    });
+  }
+
+  // Collapse toggle
+  const collapseBtn = document.getElementById("legend-collapse");
+  const legend = document.getElementById("legend");
+  if (collapseBtn && legend) {
+    collapseBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      legend.classList.toggle("legend--collapsed");
+    });
+  }
+
   renderLegend(currentLegendMode);
 }
 
 export function setLegendMode(mode) {
   const nextMode = LEGEND_MODES[mode] ? mode : "cables";
   currentLegendMode = nextMode;
-  renderLegend(currentLegendMode);
+  syncTabs(nextMode);
+  renderLegend(nextMode);
 }
 
 export function getLegendMode() {
@@ -43,26 +59,25 @@ export function setLegendItems(mode, items) {
   }
 }
 
-function renderLegend(mode) {
-  const legend = document.getElementById("legend");
-  if (!legend) return;
+function syncTabs(mode) {
+  const tabs = document.querySelectorAll("#legend-tabs .legend-tab");
+  tabs.forEach((tab) => {
+    tab.classList.toggle("legend-tab--active", tab.dataset.legendMode === mode);
+  });
+}
+
+function renderLegend(mode) {
+  const listEl = document.querySelector("#legend .legend-list");
+  if (!listEl) return;
 
-  const config = LEGEND_MODES[mode] || LEGEND_MODES.cables;
   const items = legendItemsByMode[mode] || [];
-  const titleEl = legend.querySelector(".legend-title");
-  const listEl = legend.querySelector(".legend-list");
-  if (!titleEl || !listEl) return;
-  const itemsHtml = items
+  listEl.innerHTML = items
     .map(
       (item) => `
         <div class="legend-item">
-          <div class="legend-color" style="background-color: ${item.color};"></div>
-          <span>${item.label}</span>
-        </div>
-      `,
+          <span class="legend-dot" style="background:${item.color}"></span>
+          <span class="legend-label">${item.label}</span>
+        </div>`,
     )
     .join("");
-
-  titleEl.textContent = config.title;
-  listEl.innerHTML = itemsHtml;
 }