release: bump version to 0.27.4

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
release: bump version to 0.27.3
2026-04-14 13:11:39 +08:00 · 2026-04-14 12:52:05 +08:00
13 changed files with 492 additions and 222 deletions
--- a/2
+++ b/2
@@ -1 +1 @@
-0.27.2
+0.27.4
--- a/docs/CHANGELOG.md
+++ b/docs/CHANGELOG.md
@@ -8,6 +8,24 @@ This project follows the repository versioning rule:
 - `improvement` -> `+0.0.1`（bugfix + 小功能混合）
 - `bugfix` -> `+0.0.1`

+## [0.27.4] — 2026-04-14
+
+### 🔧 Improvements
+- info-card 改为懒加载动态挂载：页面初始 DOM 不再含隐藏的 `#info-panel` 节点，仅首次点击交互元素时创建
+
+---
+
+## [0.27.3] — 2026-04-14
+
+### 🔧 Improvements
+- TV panel meta 折叠展开方向稳定：底部锚定时向上生长，拖拽后（顶部锚定）通过 JS 补偿 top 保持播放器底部位置不变
+- 修复 TV panel 展开/折叠时视频区域跳动问题：移除面板 min-height，使播放器高度在两种状态下保持一致
+- 修正 TV panel meta toggle 箭头方向：展开朝下，折叠朝上
+- 修复图例面板折叠按钮失效（legend-bar-btn 补充进拖拽排除列表）
+- 调整图层搜索框图标尺寸为 20px，BR 缩放角标改为直角 L 形
+
+---
+
 ## [0.27.2] — 2026-04-14

 ### 🔧 Improvements
--- a/docs/version-history.md
+++ b/docs/version-history.md
@@ -16,12 +16,14 @@
 ## Current Version

 - `main` 当前主线历史推导到：`0.16.5`
- `dev` 当前开发分支历史推导到：`0.27.2`
+- `dev` 当前开发分支历史推导到：`0.27.4`

 ## Timeline

 | Version | Type | Branch | Commit | Summary |
 | --- | --- | --- | --- | --- |
+| `0.27.4` | improvement | `dev` | — | info-card 懒加载动态挂载，页面初始不再有隐藏节点 |
+| `0.27.3` | improvement | `dev` | — | TV panel 折叠方向稳定、视频跳动修复、图例折叠按钮修复、搜索图标调整 |
 | `0.27.2` | improvement | `dev` | — | 修复 brand copy 宽度问题，提取 --brand-copy-width CSS 变量 |
 | `0.27.1` | improvement | `dev` | — | HUD 面板拖拽 L 形边界约束、brand 组件整体缩放、图层面板宽度优化、搜索叉叉修复 |
 | `0.27.0` | feature | `dev` | — | Earth HUD 重构：图层面板、信息卡片悬浮定位、Fresnel 大气层渲染 |
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,6 +1,6 @@
 {
  "name": "planet-frontend",
-  "version": "0.27.2",
+  "version": "0.27.4",
  "private": true,
  "packageManager": "bun@1",
  "dependencies": {
--- a/frontend/public/earth/css/hud.css
+++ b/frontend/public/earth/css/hud.css
@@ -77,6 +77,8 @@

 .hud-panel-header .hud-panel-title {
  margin-bottom: 0;
+  color: var(--hud-text-soft);
+  font-size: calc(0.82rem * var(--hud-scale));
 }

 .hud-panel-drag-handle {
--- a/frontend/public/earth/css/layer-panel.css
+++ b/frontend/public/earth/css/layer-panel.css
@@ -38,7 +38,7 @@
 .layer-panel-title {
  flex: 1 1 auto;
  margin: 0;
-  color: var(--hud-title);
+  color: var(--hud-text-soft);
  font-size: calc(0.82rem * var(--hud-scale));
  font-weight: 600;
  letter-spacing: 0.04em;
@@ -76,30 +76,51 @@
  transition: transform 0.22s ease;
 }

-/* Chevron rotates when collapsed */
-.layer-panel--collapsed .layer-panel-btn .material-symbols-rounded {
+/* Chevron：展开时朝上（可折叠），折叠时朝下（可展开） */
+.layer-panel-btn .material-symbols-rounded {
  transform: rotate(180deg);
 }

+.layer-panel--collapsed .layer-panel-btn .material-symbols-rounded {
+  transform: rotate(0deg);
+}
+
 /* ── Search bar ───────────────────────────────────────────────── */

 .layer-panel-search {
+  padding: calc(6px * var(--hud-scale)) calc(8px * var(--hud-scale));
+  border-bottom: 1px solid var(--hud-line);
+}
+
+.layer-panel-search-box {
  display: flex;
  align-items: center;
  gap: calc(5px * var(--hud-scale));
-  padding: calc(6px * var(--hud-scale)) calc(10px * var(--hud-scale));
-  border-bottom: 1px solid var(--hud-line);
+  padding: calc(5px * var(--hud-scale)) calc(8px * var(--hud-scale));
+  border: 1px solid rgba(201, 225, 247, 0.14);
+  border-radius: calc(8px * var(--hud-scale));
+  background: rgba(255, 255, 255, 0.04);
+  transition: border-color 0.18s ease;
+  box-sizing: border-box;
+  height: calc(38px * var(--hud-scale));
+}
+
+.layer-panel-search-box:focus-within {
+  border-color: rgba(201, 225, 247, 0.28);
 }

 .layer-panel-search-icon {
  flex-shrink: 0;
-  font-size: calc(14px * var(--hud-scale));
  color: var(--hud-text-soft);
  line-height: 1;
-  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
  pointer-events: none;
 }

+.layer-panel-search-icon.material-symbols-rounded {
+  font-size: calc(20px * var(--hud-scale));
+  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
+}
+
 .layer-panel-search-input {
  flex: 1 1 auto;
  min-width: 0;
--- a/frontend/public/earth/css/tv-panel.css
+++ b/frontend/public/earth/css/tv-panel.css
@@ -6,17 +6,34 @@
  width: calc(420px * var(--hud-scale));
  max-width: calc(100vw - 32px);
  min-width: calc(300px * var(--hud-scale));
-  min-height: calc(340px * var(--hud-scale));
-  padding: calc(18px * var(--hud-scale));
+  padding: calc(10px * var(--hud-scale));
  display: flex;
  flex-direction: column;
  gap: var(--hud-gap-sm);
  z-index: 18;
 }

-.tv-panel-header-copy {
-  display: grid;
-  gap: calc(3px * var(--hud-scale));
+/* header 内嵌 select + actions */
+.hud-panel-tv .hud-panel-header {
+  align-items: center;
+  gap: var(--hud-gap-xs);
+}
+
+.hud-panel-tv .hud-panel-header .hud-panel-close {
+  align-self: center;
+}
+
+.tv-panel-header-title {
+  flex: 0 0 auto;
+  white-space: nowrap;
+  margin: 0;
+}
+
+/* select / action 在 drag-handle 内，恢复正常指针 */
+.hud-panel-tv .hud-panel-header .tv-panel-select,
+.hud-panel-tv .hud-panel-header .tv-panel-action {
+  cursor: pointer;
+  user-select: auto;
 }

 .tv-panel-status {
@@ -26,13 +43,6 @@
  text-transform: uppercase;
 }

-.tv-panel-controls {
-  display: flex;
-  gap: var(--hud-gap-sm);
-  align-items: center;
-  min-width: 0;
-}
-
 .tv-panel-select {
  flex: 1 1 auto;
  min-width: 0;
@@ -59,28 +69,25 @@
 }

 .tv-panel-action {
-  border: 1px solid rgba(201, 225, 247, 0.12);
-  border-radius: calc(12px * var(--hud-scale));
-  background: rgba(255, 255, 255, 0.05);
-  color: var(--hud-text);
-  padding: calc(10px * var(--hud-scale)) calc(12px * var(--hud-scale));
+  border: 1px solid transparent;
+  border-radius: calc(4px * var(--hud-scale));
+  background: transparent;
+  color: var(--hud-text-muted);
+  padding: calc(7px * var(--hud-scale));
  display: inline-flex;
  align-items: center;
  justify-content: center;
-  white-space: nowrap;
-  font-size: calc(0.84rem * var(--hud-scale));
-  line-height: 1;
  cursor: pointer;
-  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
-}
-
-.tv-panel-action--icon {
-  padding: calc(9px * var(--hud-scale));
-  border-radius: calc(10px * var(--hud-scale));
+  transition:
+    background 0.18s ease,
+    border-color 0.18s ease,
+    color 0.18s ease,
+    transform 0.18s ease,
+    opacity 0.18s ease;
 }

 .tv-panel-action--icon .material-symbols-rounded {
-  font-size: calc(18px * var(--hud-scale));
+  font-size: calc(16px * var(--hud-scale));
  line-height: 1;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
  pointer-events: none;
@@ -88,7 +95,7 @@

 .tv-panel-action:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.08);
-  border-color: rgba(225, 239, 255, 0.2);
+  border-color: rgba(225, 239, 255, 0.14);
  color: var(--hud-accent-strong);
 }

@@ -97,6 +104,32 @@
  cursor: not-allowed;
 }

+/* toggle 箭头：展开时朝下，折叠时朝上 */
+.tv-panel-meta-toggle .material-symbols-rounded {
+  transition: transform 0.22s ease;
+  transform: rotate(0deg);
+}
+
+.tv-panel-meta-toggle.is-collapsed .material-symbols-rounded {
+  transform: rotate(180deg);
+}
+
+/* meta wrap：折叠时用负 margin 抵消 flex gap，无死区 */
+.tv-panel-meta-wrap {
+  overflow: hidden;
+  max-height: calc(120px * var(--hud-scale));
+  opacity: 1;
+  transition: max-height 0.22s ease, opacity 0.18s ease, margin 0.22s ease;
+}
+
+.tv-panel-meta-wrap.is-collapsed {
+  max-height: 0;
+  opacity: 0;
+  pointer-events: none;
+  margin-top: calc(-1 * var(--hud-gap-sm));
+  margin-bottom: calc(-1 * var(--hud-gap-sm));
+}
+
 .tv-panel-meta {
  display: grid;
  gap: calc(4px * var(--hud-scale));
@@ -129,7 +162,7 @@

 .tv-panel-player {
  position: relative;
-  flex: 1 1 auto;
+  flex: 1 0 auto;
  min-height: calc(220px * var(--hud-scale));
  border-radius: calc(16px * var(--hud-scale));
  overflow: hidden;
@@ -163,33 +196,65 @@
  background: #050a14;
 }

-.tv-panel-resize-handle {
+/* ── Multi-edge resize handles ───────────────────────────────── */
+
+.tv-panel-edge {
  position: absolute;
-  right: calc(8px * var(--hud-scale));
-  bottom: calc(8px * var(--hud-scale));
-  width: calc(18px * var(--hud-scale));
-  height: calc(18px * var(--hud-scale));
-  border: 0;
-  padding: 0;
-  background: transparent;
-  cursor: nwse-resize;
-  z-index: 2;
+  z-index: 10;
 }

-.tv-panel-resize-handle::before {
+.tv-panel-edge[data-edge="r"] {
+  right: 0;
+  top: calc(12px * var(--hud-scale));
+  bottom: calc(12px * var(--hud-scale));
+  width: calc(6px * var(--hud-scale));
+  cursor: ew-resize;
+}
+
+.tv-panel-edge[data-edge="b"] {
+  bottom: 0;
+  left: calc(12px * var(--hud-scale));
+  right: calc(12px * var(--hud-scale));
+  height: calc(6px * var(--hud-scale));
+  cursor: ns-resize;
+}
+
+.tv-panel-edge[data-edge="l"] {
+  left: 0;
+  top: calc(12px * var(--hud-scale));
+  bottom: calc(12px * var(--hud-scale));
+  width: calc(6px * var(--hud-scale));
+  cursor: ew-resize;
+}
+
+.tv-panel-edge[data-edge="br"] {
+  right: 0;
+  bottom: 0;
+  width: calc(20px * var(--hud-scale));
+  height: calc(20px * var(--hud-scale));
+  cursor: nwse-resize;
+}
+
+.tv-panel-edge[data-edge="bl"] {
+  left: 0;
+  bottom: 0;
+  width: calc(20px * var(--hud-scale));
+  height: calc(20px * var(--hud-scale));
+  cursor: nesw-resize;
+}
+
+/* 右下角视觉标记 */
+.tv-panel-edge[data-edge="br"]::before {
  content: "";
  position: absolute;
-  inset: 0;
-  border-right: 2px solid rgba(223, 235, 248, 0.46);
-  border-bottom: 2px solid rgba(223, 235, 248, 0.46);
-  border-bottom-right-radius: calc(10px * var(--hud-scale));
-  opacity: 0.78;
-  transition: opacity 0.18s ease, border-color 0.18s ease;
+  inset: calc(4px * var(--hud-scale));
+  border-right: 2px solid rgba(223, 235, 248, 0.4);
+  border-bottom: 2px solid rgba(223, 235, 248, 0.4);
+  transition: border-color 0.18s ease;
 }

-.tv-panel-resize-handle:hover::before {
-  opacity: 1;
-  border-color: rgba(244, 249, 255, 0.78);
+.tv-panel-edge[data-edge="br"]:hover::before {
+  border-color: rgba(244, 249, 255, 0.75);
 }

 .hud-panel-tv.is-resizing {
@@ -197,6 +262,25 @@
  user-select: none;
 }

+/* Whole panel is draggable; player overrides back to default */
+.hud-panel-tv:not(.is-resizing) {
+  cursor: grab;
+}
+
+.hud-panel-tv.is-dragging {
+  cursor: grabbing;
+}
+
+.hud-panel-tv .tv-panel-player {
+  cursor: default;
+}
+
+/* Disable iframe/video pointer capture while dragging so mouse events pass through */
+.hud-panel-tv.is-dragging .tv-panel-iframe,
+.hud-panel-tv.is-dragging .tv-panel-video {
+  pointer-events: none;
+}
+
 .earth-app.layout-expanded .hud-panel-tv:not([data-dragged="true"]) {
  bottom: var(--hud-offset);
  right: var(--hud-offset);
--- a/frontend/public/earth/index.html
+++ b/frontend/public/earth/index.html
@@ -50,7 +50,7 @@
    </defs>
  </svg>
  <div id="container" class="earth-app">
-    <div class="earth-left-column">
+    <div id="left-column" class="earth-left-column">
      <div id="brand-panel" class="hud-panel hud-panel-brand">
        <div id="brand-root"></div>
      </div>
@@ -69,18 +69,20 @@
        <div class="layer-panel-body" id="layer-panel-body">
          <!-- Search -->
          <div class="layer-panel-search">
-            <span class="material-symbols-rounded layer-panel-search-icon">search</span>
-            <input
-              type="text"
-              id="layer-search-input"
-              class="layer-panel-search-input"
-              placeholder="搜索图层..."
-              autocomplete="off"
-              spellcheck="false"
-            >
-            <button id="layer-search-clear" class="layer-panel-btn layer-search-clear" type="button" aria-label="清除搜索" title="清除" hidden>
-              <span class="material-symbols-rounded">close</span>
-            </button>
+            <div class="layer-panel-search-box">
+              <span class="material-symbols-rounded layer-panel-search-icon">search</span>
+              <input
+                type="text"
+                id="layer-search-input"
+                class="layer-panel-search-input"
+                placeholder="搜索图层..."
+                autocomplete="off"
+                spellcheck="false"
+              >
+              <button id="layer-search-clear" class="layer-panel-btn layer-search-clear" type="button" aria-label="清除搜索" title="清除" hidden>
+                <span class="material-symbols-rounded">close</span>
+              </button>
+            </div>
          </div>

          <!-- Layer rows -->
@@ -143,20 +145,7 @@
      </div>
    </div>

-    <!-- Floating detail panel — positioned near click by JS -->
-    <div id="info-panel" class="hud-panel hud-panel-info hud-panel-draggable" aria-live="polite">
-      <div id="info-card" class="info-card">
-        <div class="info-card-header hud-panel-drag-handle">
-          <span class="info-card-icon" id="info-card-icon">🛰️</span>
-          <h3 id="info-card-title">详情</h3>
-          <button class="info-card-close hud-panel-close" type="button" aria-label="关闭详情">
-            <span class="material-symbols-rounded">close</span>
-          </button>
-        </div>
-        <div id="info-card-content" class="info-card-content"></div>
-      </div>
-      <div id="error-message" class="hud-error-message"></div>
-    </div>
+    <div id="error-message" class="hud-error-message"></div>

    <div id="right-toolbar-group" class="earth-toolbar-group">
      <div id="control-toolbar" class="earth-toolbar">
@@ -299,17 +288,9 @@
      <span id="camera-distance" hidden></span>
    </div>

-    <div id="tv-panel" class="hud-panel hud-panel-tv hud-panel-draggable" data-panel-key="tv-panel">
+    <div id="tv-panel" class="hud-panel hud-panel-tv hud-panel-draggable" data-panel-key="tv-panel" data-drag-self="true">
      <div class="hud-panel-header hud-panel-drag-handle">
-        <div class="tv-panel-header-copy">
-          <h3 class="hud-panel-title">新闻直播</h3>
-          <span id="tv-source-status" class="tv-panel-status">等待加载直播源</span>
-        </div>
-        <button class="hud-panel-close" type="button" data-close-panel="tv-panel" aria-label="关闭电视直播">
-          <span class="material-symbols-rounded">close</span>
-        </button>
-      </div>
-      <div class="tv-panel-controls">
+        <span class="hud-panel-title tv-panel-header-title">新闻直播</span>
        <select id="tv-source-select" class="tv-panel-select" aria-label="选择新闻直播源"></select>
        <div class="tv-panel-actions">
          <button id="tv-refresh" class="tv-panel-action tv-panel-action--icon" type="button" title="刷新直播源" aria-label="刷新直播源">
@@ -318,13 +299,22 @@
          <button id="tv-open-external" class="tv-panel-action tv-panel-action--icon" type="button" title="访问官网" aria-label="访问官网">
            <span class="material-symbols-rounded">open_in_new</span>
          </button>
+          <button id="tv-meta-toggle" class="tv-panel-action tv-panel-action--icon tv-panel-meta-toggle" type="button" title="频道信息" aria-label="频道信息">
+            <span class="material-symbols-rounded">expand_more</span>
+          </button>
        </div>
+        <button class="hud-panel-close" type="button" data-close-panel="tv-panel" aria-label="关闭电视直播">
+          <span class="material-symbols-rounded">close</span>
+        </button>
      </div>
-      <div class="tv-panel-meta">
-        <div id="tv-source-title" class="tv-panel-title">暂无可用频道</div>
-        <div id="tv-source-meta" class="tv-panel-subtitle">当前未配置可播放新闻直播源</div>
-        <div id="tv-source-catalog" class="tv-panel-catalog">频道目录待同步</div>
-        <div id="tv-source-notes" class="tv-panel-notes">支持后台配置默认源与采集器补充源。</div>
+      <div class="tv-panel-meta-wrap" id="tv-meta-wrap">
+        <div class="tv-panel-meta" id="tv-panel-meta">
+          <span id="tv-source-status" class="tv-panel-status">等待加载直播源</span>
+          <div id="tv-source-title" class="tv-panel-title">暂无可用频道</div>
+          <div id="tv-source-meta" class="tv-panel-subtitle">当前未配置可播放新闻直播源</div>
+          <div id="tv-source-catalog" class="tv-panel-catalog">频道目录待同步</div>
+          <div id="tv-source-notes" class="tv-panel-notes">支持后台配置默认源与采集器补充源。</div>
+        </div>
      </div>
      <div class="tv-panel-player">
        <div id="tv-empty-state" class="tv-panel-empty">暂无可播放直播源，请先在系统配置中添加频道。</div>
@@ -338,13 +328,11 @@
        ></iframe>
        <video id="tv-video" class="tv-panel-video" hidden controls autoplay muted playsinline></video>
      </div>
-      <button
-        id="tv-resize-handle"
-        class="tv-panel-resize-handle"
-        type="button"
-        aria-label="调整电视直播窗口大小"
-        title="调整大小"
-      ></button>
+      <div class="tv-panel-edge" data-edge="r"></div>
+      <div class="tv-panel-edge" data-edge="b"></div>
+      <div class="tv-panel-edge" data-edge="l"></div>
+      <div class="tv-panel-edge" data-edge="br"></div>
+      <div class="tv-panel-edge" data-edge="bl"></div>
    </div>

    <div id="loading" class="earth-loading">
--- a/frontend/public/earth/js/controls.js
+++ b/frontend/public/earth/js/controls.js
@@ -174,7 +174,9 @@ function setupDraggableHudPanels() {
  if (!app || draggablePanels.length === 0) return;

  draggablePanels.forEach((panel) => {
-    const handle = panel.querySelector(".hud-panel-drag-handle");
+    const handle = panel.dataset.dragSelf === "true"
+      ? panel
+      : panel.querySelector(".hud-panel-drag-handle");
    if (!handle) return;

    let isDragging = false;
@@ -228,7 +230,7 @@ function setupDraggableHudPanels() {
    };

    bindListener(handle, "pointerdown", (event) => {
-      if (event.target.closest(".hud-panel-close, .layer-panel-btn, .info-card-close")) return;
+      if (event.target.closest(".hud-panel-close, .layer-panel-btn, .info-card-close, .tv-panel-select, .tv-panel-action, .tv-panel-player, .tv-panel-edge, .legend-bar-btn")) return;
      isDragging = true;
      startPointerX = event.clientX;
      startPointerY = event.clientY;
@@ -238,6 +240,8 @@ function setupDraggableHudPanels() {
      // If panel is inside a flow container (not a direct child of app), reparent
      // it so absolute positioning is relative to the app container.
      if (panel.parentElement !== app) {
+        panel.dataset.originalParentId = panel.parentElement?.id || "";
+        panel.dataset.originalNextSiblingId = panel.nextElementSibling?.id || "";
        const capturedWidth = panelRect.width;
        panel.style.position = "absolute";
        panel.style.width = `${capturedWidth}px`;
@@ -929,11 +933,28 @@ function updateLayoutUI(container) {
 }

 function resetPanelInlineLayout(panel) {
+  const originalParentId = panel.dataset.originalParentId;
+  if (originalParentId) {
+    const originalParent = document.getElementById(originalParentId);
+    if (originalParent) {
+      const nextId = panel.dataset.originalNextSiblingId;
+      const nextSibling = nextId ? document.getElementById(nextId) : null;
+      if (nextSibling) {
+        originalParent.insertBefore(panel, nextSibling);
+      } else {
+        originalParent.appendChild(panel);
+      }
+    }
+    delete panel.dataset.originalParentId;
+    delete panel.dataset.originalNextSiblingId;
+  }
  panel.style.left = "";
  panel.style.top = "";
  panel.style.right = "";
  panel.style.bottom = "";
  panel.style.transform = "";
+  panel.style.position = "";
+  panel.style.width = "";
  delete panel.dataset.dragged;
 }

--- a/frontend/public/earth/js/info-card.js
+++ b/frontend/public/earth/js/info-card.js
@@ -2,6 +2,7 @@
 import { showStatusMessage } from './ui.js';

 let currentType = null;
+let cardMounted = false;

 const CARD_CONFIG = {
  cable: {
@@ -105,6 +106,138 @@ function getPanel() {
  return document.getElementById('info-panel');
 }

+function setupInfoCardDrag(panel) {
+  const app = document.getElementById('container');
+  if (!app) return;
+
+  const handle = panel.querySelector('.hud-panel-drag-handle');
+  if (!handle) return;
+
+  let isDragging = false;
+  let startPointerX = 0;
+  let startPointerY = 0;
+  let startLeft = 0;
+  let startTop = 0;
+
+  const stopDragging = () => {
+    isDragging = false;
+    panel.classList.remove('is-dragging');
+    document.body.style.userSelect = '';
+  };
+
+  const onMove = (event) => {
+    if (!isDragging) return;
+    const appRect = app.getBoundingClientRect();
+    const panelRect = panel.getBoundingClientRect();
+    const nextLeft = Math.min(
+      Math.max(startLeft + (event.clientX - startPointerX), 0),
+      appRect.width - panelRect.width,
+    );
+    const nextTop = Math.min(
+      Math.max(startTop + (event.clientY - startPointerY), 0),
+      appRect.height - panelRect.height,
+    );
+    panel.style.left = `${nextLeft}px`;
+    panel.style.top = `${nextTop}px`;
+  };
+
+  handle.addEventListener('pointerdown', (event) => {
+    if (event.target.closest('.hud-panel-close, .info-card-close')) return;
+    isDragging = true;
+    startPointerX = event.clientX;
+    startPointerY = event.clientY;
+    const appRect = app.getBoundingClientRect();
+    const panelRect = panel.getBoundingClientRect();
+    startLeft = panelRect.left - appRect.left;
+    startTop = panelRect.top - appRect.top;
+    panel.style.left = `${startLeft}px`;
+    panel.style.top = `${startTop}px`;
+    panel.style.right = 'auto';
+    panel.style.bottom = 'auto';
+    panel.classList.add('is-dragging');
+    document.body.style.userSelect = 'none';
+    handle.setPointerCapture?.(event.pointerId);
+  });
+
+  handle.addEventListener('pointermove', onMove);
+  handle.addEventListener('pointerup', stopDragging);
+  handle.addEventListener('pointercancel', stopDragging);
+  handle.addEventListener('lostpointercapture', stopDragging);
+}
+
+function mountCard() {
+  if (cardMounted) return;
+
+  const container = document.getElementById('container');
+  if (!container) return;
+
+  const panel = document.createElement('div');
+  panel.id = 'info-panel';
+  panel.className = 'hud-panel hud-panel-info';
+  panel.setAttribute('aria-live', 'polite');
+  panel.innerHTML = `
+    <div id="info-card" class="info-card">
+      <div class="info-card-header hud-panel-drag-handle">
+        <span class="info-card-icon" id="info-card-icon">🛰️</span>
+        <h3 id="info-card-title">详情</h3>
+        <button class="info-card-close hud-panel-close" type="button" aria-label="关闭详情">
+          <span class="material-symbols-rounded">close</span>
+        </button>
+      </div>
+      <div id="info-card-content" class="info-card-content"></div>
+    </div>
+  `;
+
+  container.appendChild(panel);
+
+  const card = panel.querySelector('#info-card');
+  const content = panel.querySelector('#info-card-content');
+
+  // Prevent pointer events from reaching the earth canvas
+  const stopEvent = (event) => { event.stopPropagation(); };
+  [
+    'mousemove', 'mousedown', 'mouseup', 'click', 'dblclick', 'wheel',
+    'pointerdown', 'pointerup', 'pointermove',
+    'touchstart', 'touchmove', 'touchend',
+  ].forEach((evt) => card.addEventListener(evt, stopEvent, { passive: false }));
+
+  // Close button
+  const closeBtn = card.querySelector('.info-card-close');
+  if (closeBtn) {
+    closeBtn.addEventListener('click', (event) => {
+      event.stopPropagation();
+      hideInfoCard();
+    });
+  }
+
+  // Copy value on label click
+  content.addEventListener('click', async (event) => {
+    const label = event.target.closest('.info-card-label');
+    if (!label) return;
+
+    const property = label.closest('.info-card-property');
+    const valueEl = property?.querySelector('.info-card-value');
+    const value = valueEl?.textContent?.trim();
+
+    if (!value || value === '-') {
+      showStatusMessage('无可复制内容', 'warning');
+      return;
+    }
+
+    try {
+      await navigator.clipboard.writeText(value);
+      showStatusMessage(`已复制${label.textContent}：${value}`, 'success');
+    } catch (error) {
+      console.error('Copy failed:', error);
+      showStatusMessage('复制失败', 'error');
+    }
+  });
+
+  setupInfoCardDrag(panel);
+
+  cardMounted = true;
+}
+
 function positionPanel(panel, x, y) {
  if (!panel) return;
  const margin = 12;
@@ -142,71 +275,8 @@ function hidePanel() {
  if (panel) panel.classList.remove('is-visible');
 }

-export function initInfoCard() {
-  const card = document.getElementById('info-card');
-  const content = document.getElementById('info-card-content');
-  if (!card || !content) return;
-
-  if (card.dataset.interactionBound !== 'true') {
-    const stopEvent = (event) => {
-      event.stopPropagation();
-    };
-
-    [
-      'mousemove',
-      'mousedown',
-      'mouseup',
-      'click',
-      'dblclick',
-      'wheel',
-      'pointerdown',
-      'pointerup',
-      'pointermove',
-      'touchstart',
-      'touchmove',
-      'touchend',
-    ].forEach((eventName) => {
-      card.addEventListener(eventName, stopEvent, { passive: false });
-    });
-
-    // Close button wires the panel hide
-    const closeBtn = card.querySelector('.info-card-close');
-    if (closeBtn) {
-      closeBtn.addEventListener('click', (event) => {
-        event.stopPropagation();
-        hideInfoCard();
-      });
-    }
-
-    card.dataset.interactionBound = 'true';
-  }
-
-  if (content.dataset.copyBound === 'true') return;
-
-  content.addEventListener('click', async (event) => {
-    const label = event.target.closest('.info-card-label');
-    if (!label) return;
-
-    const property = label.closest('.info-card-property');
-    const valueEl = property?.querySelector('.info-card-value');
-    const value = valueEl?.textContent?.trim();
-
-    if (!value || value === '-') {
-      showStatusMessage('无可复制内容', 'warning');
-      return;
-    }
-
-    try {
-      await navigator.clipboard.writeText(value);
-      showStatusMessage(`已复制${label.textContent}：${value}`, 'success');
-    } catch (error) {
-      console.error('Copy failed:', error);
-      showStatusMessage('复制失败', 'error');
-    }
-  });
-
-  content.dataset.copyBound = 'true';
-}
+// No-op: event binding now happens lazily in mountCard()
+export function initInfoCard() {}

 export function setInfoCardNoBorder(noBorder = true) {
  const card = document.getElementById('info-card');
@@ -222,6 +292,8 @@ export function showInfoCard(type, data, options = {}) {
    return;
  }

+  mountCard();
+
  currentType = type;
  const card = document.getElementById('info-card');
  const icon = document.getElementById('info-card-icon');
--- a/frontend/public/earth/js/tv.js
+++ b/frontend/public/earth/js/tv.js
@@ -20,6 +20,9 @@ let initialized = false;
 let refreshPromise = null;
 let hlsPlayer = null;
 let hlsRecoveryAttempts = 0;
+let metaAutoCollapseTimer = null;
+
+const META_AUTO_COLLAPSE_DELAY = 2500;

 const HLS_MAX_RECOVERY_ATTEMPTS = 3;
 const HLS_RETRY_CONFIG = {
@@ -33,7 +36,7 @@ function getElements() {
  return {
    panel: document.getElementById("tv-panel"),
    toggleBtn: document.getElementById("toggle-tv"),
-    resizeHandle: document.getElementById("tv-resize-handle"),
+    resizeHandle: null,
    select: document.getElementById("tv-source-select"),
    title: document.getElementById("tv-source-title"),
    meta: document.getElementById("tv-source-meta"),
@@ -45,9 +48,51 @@ function getElements() {
    empty: document.getElementById("tv-empty-state"),
    refreshBtn: document.getElementById("tv-refresh"),
    openBtn: document.getElementById("tv-open-external"),
+    metaPanel: document.getElementById("tv-panel-meta"),
+    metaWrap: document.getElementById("tv-meta-wrap"),
+    metaToggle: document.getElementById("tv-meta-toggle"),
  };
 }

+function setMetaCollapsed(collapsed) {
+  const { metaWrap, metaToggle, panel } = getElements();
+  if (!metaWrap) return;
+
+  const isDragged = panel?.dataset.dragged === "true" && panel.style.top;
+
+  if (isDragged) {
+    // Top-anchored panel: toggle instantly and compensate top so the player
+    // (panel bottom) stays visually fixed.
+    const bottomBefore = panel.getBoundingClientRect().bottom;
+
+    metaWrap.style.transition = "none";
+    metaWrap.classList.toggle("is-collapsed", collapsed);
+    metaToggle?.classList.toggle("is-collapsed", collapsed);
+
+    // Force synchronous reflow to get updated panel height
+    void panel.offsetHeight;
+
+    const delta = panel.getBoundingClientRect().bottom - bottomBefore;
+    if (delta !== 0) {
+      panel.style.top = `${parseFloat(panel.style.top) - delta}px`;
+    }
+
+    // Restore CSS transition after this paint
+    requestAnimationFrame(() => {
+      metaWrap.style.transition = "";
+    });
+  } else {
+    metaWrap.classList.toggle("is-collapsed", collapsed);
+    metaToggle?.classList.toggle("is-collapsed", collapsed);
+  }
+}
+
+function autoExpandMeta() {
+  clearTimeout(metaAutoCollapseTimer);
+  setMetaCollapsed(false);
+  metaAutoCollapseTimer = setTimeout(() => setMetaCollapsed(true), META_AUTO_COLLAPSE_DELAY);
+}
+
 function clearPanelPositioningForResize(panel) {
  panel.style.left = `${panel.offsetLeft}px`;
  panel.style.top = `${panel.offsetTop}px`;
@@ -65,71 +110,80 @@ function getHudScale() {
 }

 function setupResizeHandle() {
-  const { panel, resizeHandle } = getElements();
+  const { panel } = getElements();
  const container = document.getElementById("container");
-  if (!(panel instanceof HTMLElement) || !(resizeHandle instanceof HTMLElement) || !(container instanceof HTMLElement)) {
-    return;
-  }
+  if (!(panel instanceof HTMLElement) || !(container instanceof HTMLElement)) return;

  let resizing = false;
+  let activeEdge = "";
  let startX = 0;
  let startY = 0;
  let startWidth = 0;
  let startHeight = 0;
+  let startLeft = 0;
+  let startTop = 0;

  const stopResize = () => {
    resizing = false;
+    activeEdge = "";
    panel.classList.remove("is-resizing");
    document.body.style.userSelect = "";
  };

-  resizeHandle.addEventListener("pointerdown", (event) => {
-    if (document.getElementById("container")?.classList.contains("layout-expanded")) {
-      return;
-    }
-    event.preventDefault();
-    event.stopPropagation();
-    resizing = true;
-    startX = event.clientX;
-    startY = event.clientY;
-
-    clearPanelPositioningForResize(panel);
-
-    const rect = panel.getBoundingClientRect();
-    startWidth = rect.width;
-    startHeight = rect.height;
-    panel.classList.add("is-resizing");
-    document.body.style.userSelect = "none";
-    resizeHandle.setPointerCapture?.(event.pointerId);
-  });
-
-  resizeHandle.addEventListener("pointermove", (event) => {
+  const onMove = (event) => {
    if (!resizing) return;
    const containerRect = container.getBoundingClientRect();
-    const panelRect = panel.getBoundingClientRect();
-    const currentLeft = panelRect.left - containerRect.left;
-    const currentTop = panelRect.top - containerRect.top;
    const hudScale = getHudScale();
    const minWidth = Math.max(320, Math.round(360 * hudScale));
    const minHeight = Math.max(260, Math.round(340 * hudScale));
-    const maxWidth = Math.max(minWidth, containerRect.width - currentLeft - 12);
-    const maxHeight = Math.max(minHeight, containerRect.height - currentTop - 12);
-    const nextWidth = Math.min(
-      maxWidth,
-      Math.max(minWidth, startWidth + (event.clientX - startX)),
-    );
-    const nextHeight = Math.min(
-      maxHeight,
-      Math.max(minHeight, startHeight + (event.clientY - startY)),
-    );
+    const dx = event.clientX - startX;
+    const dy = event.clientY - startY;

-    panel.style.width = `${nextWidth}px`;
-    panel.style.minHeight = `${nextHeight}px`;
+    if (activeEdge.includes("r")) {
+      const maxW = containerRect.width - startLeft - 12;
+      panel.style.width = `${Math.min(maxW, Math.max(minWidth, startWidth + dx))}px`;
+    }
+    if (activeEdge.includes("l")) {
+      const newW = Math.max(minWidth, startWidth - dx);
+      panel.style.width = `${newW}px`;
+      panel.style.left = `${Math.max(0, startLeft + startWidth - newW)}px`;
+    }
+    if (activeEdge.includes("b")) {
+      const maxH = containerRect.height - startTop - 12;
+      panel.style.minHeight = `${Math.min(maxH, Math.max(minHeight, startHeight + dy))}px`;
+    }
+  };
+
+  panel.querySelectorAll(".tv-panel-edge[data-edge]").forEach((edgeEl) => {
+    edgeEl.addEventListener("pointerdown", (event) => {
+      if (container.classList.contains("layout-expanded")) return;
+      event.preventDefault();
+      event.stopPropagation();
+
+      activeEdge = edgeEl.dataset.edge ?? "";
+      resizing = true;
+      startX = event.clientX;
+      startY = event.clientY;
+
+      clearPanelPositioningForResize(panel);
+
+      const rect = panel.getBoundingClientRect();
+      const cRect = container.getBoundingClientRect();
+      startWidth = rect.width;
+      startHeight = rect.height;
+      startLeft = rect.left - cRect.left;
+      startTop = rect.top - cRect.top;
+
+      panel.classList.add("is-resizing");
+      document.body.style.userSelect = "none";
+      edgeEl.setPointerCapture?.(event.pointerId);
+    });
+
+    edgeEl.addEventListener("pointermove", onMove);
+    edgeEl.addEventListener("pointerup", stopResize);
+    edgeEl.addEventListener("pointercancel", stopResize);
+    edgeEl.addEventListener("lostpointercapture", stopResize);
  });
-
-  resizeHandle.addEventListener("pointerup", stopResize);
-  resizeHandle.addEventListener("pointercancel", stopResize);
-  resizeHandle.addEventListener("lostpointercapture", stopResize);
 }

 function updateToggleButton(visible) {
@@ -502,6 +556,7 @@ function renderSource(source) {
    source.id === tvPayload?.default_source_id ? "当前正在播放默认源" : "当前正在播放已选频道",
  );
  updateOpenButton(source);
+  autoExpandMeta();
 }

 function resolveInitialSourceId() {
@@ -592,6 +647,13 @@ export function initTVPanel() {
    renderSource(findSourceById(currentSourceId));
  });

+  const { metaToggle } = getElements();
+  metaToggle?.addEventListener("click", () => {
+    clearTimeout(metaAutoCollapseTimer);
+    const isNowCollapsed = !metaToggle.classList.contains("is-collapsed");
+    setMetaCollapsed(isNowCollapsed);
+  });
+
  refreshBtn?.addEventListener("click", () => {
    refreshTVPanel();
  });
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -1,6 +1,6 @@
 [project]
 name = "planet"
-version = "0.27.2"
+version = "0.27.4"
 description = "智能星球计划 - 态势感知系统"
 requires-python = ">=3.14"
 dependencies = [
--- a/uv.lock
+++ b/uv.lock
@@ -475,7 +475,7 @@ wheels = [

 [[package]]
 name = "planet"
-version = "0.27.2"
+version = "0.27.4"
 source = { virtual = "." }
 dependencies = [
    { name = "aiofiles" },
Author	SHA1	Message	Date
linkong	40e51d5b20	release: bump version to 0.27.4 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-14 13:11:39 +08:00
linkong	93c1c1e550	release: bump version to 0.27.3 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-14 12:52:05 +08:00
@@ -1 +1 @@
 .27.2
 .27.4