diff --git a/VERSION b/VERSION index 3edc695d..b38e1e76 100644 --- a/VERSION +++ b/VERSION @@ -1 +1 @@ -0.27.2 +0.27.3 diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md index 7c0aeb56..289156b7 100644 --- a/docs/CHANGELOG.md +++ b/docs/CHANGELOG.md @@ -8,6 +8,17 @@ This project follows the repository versioning rule: - `improvement` -> `+0.0.1`(bugfix + 小功能混合) - `bugfix` -> `+0.0.1` +## [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 diff --git a/docs/version-history.md b/docs/version-history.md index 85b1a393..11472986 100644 --- a/docs/version-history.md +++ b/docs/version-history.md @@ -16,12 +16,13 @@ ## Current Version - `main` 当前主线历史推导到:`0.16.5` -- `dev` 当前开发分支历史推导到:`0.27.2` +- `dev` 当前开发分支历史推导到:`0.27.3` ## Timeline | Version | Type | Branch | Commit | Summary | | --- | --- | --- | --- | --- | +| `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 大气层渲染 | diff --git a/frontend/package.json b/frontend/package.json index 32600870..fdda1612 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -1,6 +1,6 @@ { "name": "planet-frontend", - "version": "0.27.2", + "version": "0.27.3", "private": true, "packageManager": "bun@1", "dependencies": { diff --git a/frontend/public/earth/css/hud.css b/frontend/public/earth/css/hud.css index 38d8ad74..868128ed 100644 --- 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 { diff --git a/frontend/public/earth/css/layer-panel.css b/frontend/public/earth/css/layer-panel.css index f219f2cc..ffa5a058 100644 --- 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; diff --git a/frontend/public/earth/css/tv-panel.css b/frontend/public/earth/css/tv-panel.css index 73e6b1c7..1765d688 100644 --- 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); diff --git a/frontend/public/earth/index.html b/frontend/public/earth/index.html index 7866140f..150e4499 100644 --- a/frontend/public/earth/index.html +++ b/frontend/public/earth/index.html @@ -50,7 +50,7 @@