diff --git a/VERSION b/VERSION index 85e60ed1..7b52f5e5 100644 --- a/VERSION +++ b/VERSION @@ -1 +1 @@ -0.34.0 +0.35.0 diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md index 3731ab7e..876f5399 100644 --- 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.35.0] — 2026-04-22 + +### ✨ Highlights +- Earth 移动端底部抽屉系统全面上线：响应式布局自动切换、Tab 导航、手势上拉/下滑开合、惯性速度判定 +- 移动端点击可交互物件（海缆、登陆点、卫星、BGP）后弹出智能定位悬浮卡片，可拖动，点击跳转详情 + +### 🔧 Improvements +- 抽屉把手区域缩小至 36px（collapsed 时仅露出把手，不遮挡地球操作区） +- 抽屉定期弹跳动画提示用户可上拉，5 秒间隔，打开后自动停止 +- 通知胶囊位置调整，不再覆盖品牌 logo +- 移动端单指旋转、双指捏合缩放地球，触控事件冲突修复（pointer-events 级联） + +### 🐛 Fixes +- 修复移动端抽屉 shell 因 layout 高度（240px+）遮挡地球触控区域，pointer-events 改为按层级精确控制 +- 修复悬浮卡片因 setPointerCapture 在 iOS Safari 抑制合成 click 事件导致无法点击的问题 + +--- + ## [0.34.0] — 2026-04-22 ### ✨ Highlights diff --git a/docs/plans/README.md b/docs/plans/README.md index 2062a1c2..0aa0aaed 100644 --- a/docs/plans/README.md +++ b/docs/plans/README.md @@ -16,6 +16,7 @@ 当前重点入口： +- [earth-mobile-drawer-ui-plan.md](/home/ray/dev/linkong/planet/docs/plans/earth-mobile-drawer-ui-plan.md) - [earth-renderer-architecture-separation-plan.md](/home/ray/dev/linkong/planet/docs/plans/earth-renderer-architecture-separation-plan.md) - [earth-predicted-orbit-plan.md](/home/ray/dev/linkong/planet/docs/plans/earth-predicted-orbit-plan.md) - [earth-webgl-instancing-satellites-plan.md](/home/ray/dev/linkong/planet/docs/plans/earth-webgl-instancing-satellites-plan.md) diff --git a/docs/version-history.md b/docs/version-history.md index d3350d57..976d268c 100644 --- a/docs/version-history.md +++ b/docs/version-history.md @@ -16,12 +16,13 @@ ## Current Version - `main` 当前主线历史推导到：`0.16.5` -- `dev` 当前开发分支历史推导到：`0.34.0` +- `dev` 当前开发分支历史推导到：`0.35.0` ## Timeline | Version | Type | Branch | Commit | Summary | | --- | --- | --- | --- | --- | +| `0.35.0` | feature | `dev` | `pending` | Earth 移动端抽屉系统与悬浮卡片全面上线：手势驱动抽屉、点击物件弹出可拖动详情卡、单指旋转双指缩放地球 | | `0.34.0` | feature | `dev` | `pending` | Earth 搜索面板正式接入，`planet.sh --allow-lan` 打通 Bun + Vite 局域网开放链路，并自动输出推荐访问地址与健康检查地址 | | `0.33.0` | feature | `dev` | `pending` | `news_live_streams` 默认接入 iptv-org 频道目录，内置数据源支持直接编辑 override，并修复 TV 合并采集源后默认频道消失的问题 | | `0.32.0` | feature | `dev` | `pending` | Earth 设置新增默认地球大小真源，并继续收口卫星焦点层次、toolbar/scrollbar 性能与 HUD 设置面板细节 | diff --git a/frontend/package.json b/frontend/package.json index bf2f5cfc..0ae84d4c 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -1,6 +1,6 @@ { "name": "planet-frontend", - "version": "0.34.0", + "version": "0.35.0", "private": true, "packageManager": "bun@1", "dependencies": { diff --git a/frontend/public/earth/css/base.css b/frontend/public/earth/css/base.css index 1243c65e..ee856560 100644 --- a/frontend/public/earth/css/base.css +++ b/frontend/public/earth/css/base.css @@ -8,6 +8,10 @@ :root { --hud-scale: 1; + --safe-top: env(safe-area-inset-top, 0px); + --safe-right: env(safe-area-inset-right, 0px); + --safe-bottom: env(safe-area-inset-bottom, 0px); + --safe-left: env(safe-area-inset-left, 0px); --hud-offset: calc(20px * var(--hud-scale)); --hud-radius: calc(22px * var(--hud-scale)); --hud-panel-padding: calc(18px * var(--hud-scale)); @@ -72,6 +76,10 @@ body.earth-page { height: 100vh; } +.earth-app canvas { + touch-action: none; +} + .earth-app.dragging { cursor: grabbing; } diff --git a/frontend/public/earth/css/earth-stats.css b/frontend/public/earth/css/earth-stats.css index e09874a8..ed35e38d 100644 --- a/frontend/public/earth/css/earth-stats.css +++ b/frontend/public/earth/css/earth-stats.css @@ -133,3 +133,20 @@ right: var(--hud-offset); transform: translate(calc(100% - var(--hud-offset)), calc(-100% + var(--hud-offset))); } + +.layout-mode-mobile .hud-panel-stats { + position: fixed; + top: calc(8px + var(--safe-top)); + right: 8px; + width: min(180px, calc(100vw - 16px)); + z-index: 205; +} + +.layout-mode-mobile.earth-search-open .hud-panel-stats, +.layout-mode-mobile.earth-settings-open .hud-panel-stats, +.layout-mode-mobile.earth-media-open .hud-panel-stats, +.layout-mode-mobile.earth-info-open .hud-panel-stats { + opacity: 0; + pointer-events: none; + transform: translateY(-12px); +} diff --git a/frontend/public/earth/css/hud.css b/frontend/public/earth/css/hud.css index 236cf9cb..9b0d5dc5 100644 --- a/frontend/public/earth/css/hud.css +++ b/frontend/public/earth/css/hud.css @@ -117,6 +117,7 @@ .hud-panel-drag-handle { cursor: grab; user-select: none; + touch-action: none; } .hud-panel-drag-handle:active { @@ -260,6 +261,779 @@ display: none !important; } +/* ── Mobile popup card ───────────────────────────────────────── */ + +.earth-mobile-popup { + display: none; +} + +.layout-mode-mobile .earth-mobile-popup { + display: flex; + position: fixed; + z-index: 260; + align-items: center; + gap: 10px; + padding: 10px 12px 10px 12px; + max-width: 220px; + min-width: 120px; + background: linear-gradient(145deg, rgba(14, 25, 42, 0.97), rgba(7, 15, 28, 0.97)); + border: 1px solid rgba(200, 224, 255, 0.13); + border-radius: 20px; + box-shadow: 0 10px 36px rgba(0, 0, 0, 0.48), 0 0 0 1px rgba(140, 190, 255, 0.05); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + pointer-events: auto; + opacity: 0; + transform: scale(0.86) translateY(4px); + transition: opacity 0.17s ease, transform 0.17s cubic-bezier(0.22, 1, 0.36, 1); + cursor: grab; + user-select: none; + touch-action: none; +} + +.layout-mode-mobile .earth-mobile-popup:active { + cursor: grabbing; +} + +.layout-mode-mobile .earth-mobile-popup[hidden] { + display: none; +} + +.layout-mode-mobile .earth-mobile-popup.is-visible { + opacity: 1; + transform: scale(1) translateY(0); +} + +.earth-mobile-popup-icon { + font-size: 1.25rem; + flex-shrink: 0; + line-height: 1; +} + +.earth-mobile-popup-body { + flex: 1; + min-width: 0; +} + +.earth-mobile-popup-title { + color: var(--hud-text); + font-size: 0.84rem; + font-weight: 700; + line-height: 1.25; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + letter-spacing: 0.01em; +} + +.earth-mobile-popup-sub { + color: var(--hud-text-muted); + font-size: 0.70rem; + margin-top: 2px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + letter-spacing: 0.03em; +} + +.earth-mobile-popup-chevron { + color: rgba(160, 200, 255, 0.5); + font-size: 1rem; + flex-shrink: 0; +} + +/* ── Mobile drawer ───────────────────────────────────────────── */ + +.earth-mobile-drawer-overlay, +.earth-mobile-drawer-shell { + display: none; +} + +.layout-mode-mobile .earth-mobile-drawer-overlay, +.layout-mode-mobile .earth-mobile-drawer-shell { + display: block; +} + +.earth-mobile-drawer-overlay { + position: fixed; + inset: 0; + background: linear-gradient(180deg, rgba(3, 8, 16, 0.06), rgba(3, 8, 16, 0.54)); + opacity: 0; + pointer-events: none; + transition: opacity 0.22s ease; + z-index: 245; +} + +.earth-mobile-drawer-shell { + position: fixed; + left: 0; + right: 0; + bottom: 0; + z-index: 250; + pointer-events: none; +} + +.earth-mobile-drawer-sheet { + position: relative; + min-height: calc(240px + var(--safe-bottom)); + max-height: min(78vh, calc(100vh - 72px - var(--safe-top))); + padding: 10px 14px calc(14px + var(--safe-bottom)) 14px; + border-top-left-radius: 28px; + border-top-right-radius: 28px; + background: + linear-gradient(180deg, rgba(15, 27, 43, 0.98), rgba(7, 14, 24, 0.98)), + rgba(5, 10, 19, 0.92); + border-top: 1px solid rgba(220, 238, 255, 0.1); + box-shadow: 0 -26px 60px rgba(0, 0, 0, 0.38); + transform: translateY(calc(100% - 36px - var(--safe-bottom))); + transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1); + pointer-events: none; + touch-action: none; +} + +.earth-mobile-drawer-header { + padding: 10px 4px 8px; + cursor: ns-resize; + user-select: none; + pointer-events: auto; +} + +.earth-mobile-drawer-grabber { + width: 54px; + height: 5px; + margin: 0 auto; + border-radius: 999px; + background: rgba(225, 239, 255, 0.18); +} + +.earth-mobile-drawer-tabs { + display: grid; + grid-template-columns: repeat(6, minmax(0, 1fr)); + gap: 8px; + padding-bottom: 12px; +} + +.earth-mobile-drawer-tab { + min-height: 40px; + border: 1px solid rgba(201, 225, 247, 0.12); + border-radius: 12px; + background: rgba(255, 255, 255, 0.04); + color: var(--hud-text-muted); + font-size: 0.78rem; + font-weight: 600; + letter-spacing: 0.03em; + cursor: pointer; + transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease; +} + +.earth-mobile-drawer-tab.is-active { + color: var(--hud-title); + background: rgba(122, 180, 255, 0.14); + border-color: rgba(122, 180, 255, 0.24); +} + +.earth-mobile-drawer-content { + position: relative; + min-height: 0; + max-height: calc(78vh - 108px - var(--safe-bottom)); + overflow: hidden; +} + +.earth-mobile-drawer-slot { + display: none; + min-height: 0; + max-height: inherit; + overflow: auto; + overscroll-behavior: contain; +} + +.earth-mobile-drawer-slot.is-active { + display: block; +} + +.earth-mobile-drawer-slot--situation { + display: none; + gap: 12px; +} + +.earth-mobile-drawer-slot--situation.is-active { + display: grid; +} + +@keyframes earth-drawer-hint { + 0% { transform: translateY(calc(100% - 36px - var(--safe-bottom))); } + 14% { transform: translateY(calc(100% - 36px - var(--safe-bottom) - 22px)); } + 26% { transform: translateY(calc(100% - 36px - var(--safe-bottom) - 4px)); } + 38% { transform: translateY(calc(100% - 36px - var(--safe-bottom) - 14px)); } + 50% { transform: translateY(calc(100% - 36px - var(--safe-bottom) - 1px)); } + 62% { transform: translateY(calc(100% - 36px - var(--safe-bottom) - 7px)); } + 76% { transform: translateY(calc(100% - 36px - var(--safe-bottom))); } + 100% { transform: translateY(calc(100% - 36px - var(--safe-bottom))); } +} + +.layout-mode-mobile .earth-mobile-drawer-sheet.is-hinting { + animation: earth-drawer-hint 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards; +} + +.layout-mode-mobile.earth-mobile-drawer-open .earth-mobile-drawer-overlay { + opacity: 1; + pointer-events: auto; +} + +.layout-mode-mobile.earth-mobile-drawer-open .earth-mobile-drawer-sheet { + transform: translateY(0); + pointer-events: auto; +} + +.layout-mode-mobile .earth-left-column { + pointer-events: none; +} + +.layout-mode-mobile #brand-panel { + pointer-events: auto; +} + +.layout-mode-mobile #search-modal, +.layout-mode-mobile #settings-modal { + display: block; + position: static; + inset: auto; + pointer-events: none; +} + +.layout-mode-mobile #search-backdrop, +.layout-mode-mobile #settings-backdrop { + display: none; +} + +.layout-mode-mobile .earth-mobile-drawer-slot > .hud-panel, +.layout-mode-mobile .earth-mobile-drawer-slot > .earth-search-sheet, +.layout-mode-mobile .earth-mobile-drawer-slot > .earth-settings-sheet { + position: relative !important; + inset: auto !important; + left: auto !important; + right: auto !important; + top: auto !important; + bottom: auto !important; + transform: none !important; + width: 100% !important; + max-width: none !important; + min-width: 0 !important; + max-height: none !important; + height: auto !important; + margin: 0; + pointer-events: auto; + opacity: 1 !important; + filter: none !important; + visibility: visible !important; +} + +.layout-mode-mobile .earth-mobile-drawer-slot > .hud-panel { + box-shadow: none; +} + +.layout-mode-mobile .earth-mobile-drawer-slot > .earth-search-sheet { + display: flex !important; +} + +.layout-mode-mobile .earth-mobile-drawer-slot > .earth-settings-sheet { + display: flex !important; +} + +.layout-mode-mobile .earth-mobile-drawer-slot .hud-panel-drag-handle { + cursor: default; +} + +.layout-mode-mobile .earth-mobile-drawer-slot .tv-panel-edge { + display: none; +} + +.layout-mode-mobile .earth-mobile-drawer-slot .tv-panel-player { + min-height: 220px; +} + +.layout-mode-mobile #layer-toggles, +.layout-mode-mobile #legend, +.layout-mode-mobile #earth-stats, +.layout-mode-mobile #media-panel, +.layout-mode-mobile #search-modal, +.layout-mode-mobile #settings-modal, +.layout-mode-mobile #info-panel { + display: none !important; +} + +.earth-mobile-page { + display: flex; + flex-direction: column; + gap: 14px; + min-height: 0; +} + +.earth-mobile-page-intro { + display: flex; + flex-direction: column; + gap: 4px; +} + +.earth-mobile-page-kicker { + color: var(--hud-text-muted); + font-size: 0.68rem; + letter-spacing: 0.12em; + text-transform: uppercase; +} + +.earth-mobile-page-summary { + color: var(--hud-text-soft); + font-size: 0.84rem; + line-height: 1.4; +} + +.earth-mobile-layer-list, +.earth-mobile-news-board-list, +.earth-mobile-search-results { + display: flex; + flex-direction: column; + gap: 10px; +} + +.earth-mobile-layer-card, +.earth-mobile-action-btn, +.earth-mobile-settings-pill, +.earth-mobile-search-clear { + appearance: none; + -webkit-appearance: none; +} + +.earth-mobile-layer-card { + display: grid; + grid-template-columns: auto minmax(0, 1fr) auto; + gap: 12px; + align-items: center; + width: 100%; + border: 1px solid rgba(212, 227, 244, 0.08); + border-radius: 18px; + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent), + rgba(255, 255, 255, 0.03); + color: var(--hud-text); + padding: 14px 16px; + text-align: left; +} + +.earth-mobile-layer-card.is-active { + border-color: rgba(122, 180, 255, 0.24); + background: + linear-gradient(180deg, rgba(122, 180, 255, 0.12), transparent), + rgba(255, 255, 255, 0.04); +} + +.earth-mobile-layer-card-icon { + font-size: 22px; + color: var(--hud-accent-strong); +} + +.earth-mobile-layer-card-copy { + display: flex; + flex-direction: column; + gap: 3px; + min-width: 0; +} + +.earth-mobile-layer-card-title, +.earth-mobile-detail-title, +.earth-mobile-tv-title, +.earth-mobile-news-focus-label, +.earth-mobile-settings-label { + color: var(--hud-title); + font-weight: 600; +} + +.earth-mobile-layer-card-subtitle, +.earth-mobile-detail-type, +.earth-mobile-tv-subtitle, +.earth-mobile-settings-subtitle, +.earth-mobile-news-focus-coords, +.earth-mobile-tv-notes, +.earth-mobile-tv-catalog, +.earth-mobile-news-board-status, +.earth-mobile-search-meta, +.earth-mobile-search-empty { + color: var(--hud-text-soft); + font-size: 0.76rem; + line-height: 1.45; +} + +.earth-mobile-layer-card-status { + color: var(--hud-text-muted); + font-size: 0.72rem; + letter-spacing: 0.08em; +} + +.earth-mobile-search-shell { + display: flex; + align-items: center; + gap: 10px; + min-height: 52px; + padding: 0 14px; + border-radius: 16px; + border: 1px solid rgba(214, 230, 247, 0.12); + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent), + rgba(255, 255, 255, 0.03); +} + +.earth-mobile-search-input { + flex: 1 1 auto; + min-width: 0; + border: 0; + background: transparent; + color: var(--hud-title); + font: inherit; + outline: 0; +} + +.earth-mobile-search-input::placeholder { + color: rgba(190, 208, 227, 0.46); +} + +.earth-mobile-search-icon { + color: var(--hud-text-muted); +} + +.earth-mobile-search-clear { + border: 0; + background: transparent; + color: var(--hud-text-muted); + display: inline-flex; + align-items: center; + justify-content: center; +} + +.earth-mobile-search-clear[hidden] { + display: none; +} + +.earth-mobile-stats-grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 10px; +} + +.earth-mobile-stat-card, +.earth-mobile-situation-card, +.earth-mobile-news-focus, +.earth-mobile-settings-card, +.earth-mobile-detail-card, +.earth-mobile-tv-meta { + border-radius: 18px; + border: 1px solid rgba(212, 227, 244, 0.08); + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent), + rgba(255, 255, 255, 0.03); + padding: 14px 16px; +} + +.earth-mobile-stat-card { + display: flex; + flex-direction: column; + gap: 6px; +} + +.earth-mobile-stat-num { + color: var(--hud-title); + font-size: 1.26rem; + font-weight: 700; +} + +.earth-mobile-stat-label, +.earth-mobile-situation-card-subtitle, +.earth-mobile-news-focus-kicker, +.earth-mobile-settings-title, +.earth-mobile-tv-status { + color: var(--hud-text-muted); + font-size: 0.7rem; + letter-spacing: 0.08em; + text-transform: uppercase; +} + +.earth-mobile-situation-card { + display: flex; + flex-direction: column; + gap: 10px; +} + +.earth-mobile-situation-card-title { + color: var(--hud-title); + font-size: 0.92rem; + font-weight: 600; +} + +.earth-mobile-situation-legend-list { + display: flex; + flex-direction: column; + gap: 8px; +} + +.earth-mobile-situation-status { + color: var(--hud-text); + line-height: 1.5; +} + +.earth-mobile-news-focus, +.earth-mobile-tv-actions, +.earth-mobile-news-actions, +.earth-mobile-settings-actions { + display: flex; + gap: 10px; +} + +.earth-mobile-news-focus { + justify-content: space-between; + align-items: flex-start; +} + +.earth-mobile-news-source-count { + color: var(--hud-accent-strong); + font-size: 0.74rem; + font-weight: 600; +} + +.earth-mobile-news-board-list .news-story-card { + margin: 0; +} + +.earth-mobile-news-board-empty[hidden] { + display: none; +} + +.earth-mobile-tv-select, +.earth-mobile-settings-slider { + width: 100%; +} + +.earth-mobile-tv-select { + border: 1px solid rgba(201, 225, 247, 0.14); + border-radius: 14px; + background: rgba(255, 255, 255, 0.04); + color: var(--hud-text); + padding: 12px 14px; +} + +.earth-mobile-tv-player { + position: relative; + min-height: 220px; + border-radius: 18px; + overflow: hidden; + border: 1px solid rgba(201, 225, 247, 0.1); + background: linear-gradient(180deg, rgba(9, 18, 32, 0.94), rgba(5, 11, 22, 0.94)); +} + +.earth-mobile-tv-empty, +.earth-mobile-tv-iframe, +.earth-mobile-tv-video { + position: absolute; + inset: 0; + width: 100%; + height: 100%; +} + +.earth-mobile-tv-empty { + display: grid; + place-items: center; + padding: 16px; + text-align: center; + color: var(--hud-text-muted); +} + +.earth-mobile-tv-iframe, +.earth-mobile-tv-video { + border: 0; + background: #050a14; +} + +.earth-mobile-action-btn { + display: inline-flex; + align-items: center; + justify-content: center; + min-height: 42px; + padding: 0 14px; + border-radius: 12px; + border: 1px solid rgba(122, 180, 255, 0.22); + background: rgba(122, 180, 255, 0.12); + color: var(--hud-title); + text-decoration: none; + font-size: 0.82rem; + font-weight: 600; +} + +.earth-mobile-action-btn--ghost { + background: rgba(255, 255, 255, 0.04); + border-color: rgba(212, 227, 244, 0.1); +} + +.earth-mobile-settings-group { + display: flex; + flex-direction: column; + gap: 10px; +} + +.earth-mobile-settings-card { + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; +} + +.earth-mobile-settings-card--stacked { + flex-direction: column; + align-items: stretch; +} + +.earth-mobile-settings-copy { + display: flex; + flex-direction: column; + gap: 4px; +} + +.earth-mobile-settings-segmented { + display: inline-flex; + flex-wrap: wrap; + gap: 8px; +} + +.earth-mobile-settings-pill { + border: 1px solid rgba(212, 227, 244, 0.1); + border-radius: 999px; + background: rgba(255, 255, 255, 0.04); + color: var(--hud-text-soft); + padding: 10px 14px; +} + +.earth-mobile-settings-pill.is-active { + color: var(--hud-title); + border-color: rgba(122, 180, 255, 0.24); + background: rgba(122, 180, 255, 0.14); +} + +.earth-mobile-settings-switch { + position: relative; + display: inline-flex; + width: 44px; + height: 28px; + flex-shrink: 0; +} + +.earth-mobile-settings-switch input { + position: absolute; + inset: 0; + opacity: 0; +} + +.earth-mobile-settings-switch-track { + width: 100%; + height: 100%; + border-radius: 999px; + background: rgba(255, 255, 255, 0.1); + position: relative; +} + +.earth-mobile-settings-switch-track::after { + content: ""; + position: absolute; + top: 4px; + left: 4px; + width: 20px; + height: 20px; + border-radius: 50%; + background: #fff; + transition: transform 0.18s ease; +} + +.earth-mobile-settings-switch input:checked + .earth-mobile-settings-switch-track { + background: rgba(122, 180, 255, 0.34); +} + +.earth-mobile-settings-switch input:checked + .earth-mobile-settings-switch-track::after { + transform: translateX(16px); +} + +.earth-mobile-settings-slider-row { + display: flex; + align-items: center; + gap: 12px; +} + +.earth-mobile-settings-slider-value { + color: var(--hud-title); + font-weight: 600; +} + +.earth-mobile-detail-card { + display: flex; + flex-direction: column; + gap: 14px; +} + +.earth-mobile-detail-header { + display: flex; + gap: 12px; + align-items: center; +} + +.earth-mobile-detail-icon { + font-size: 1.5rem; +} + +.earth-mobile-detail-heading { + display: flex; + flex-direction: column; + gap: 4px; +} + +.earth-mobile-detail-content { + display: flex; + flex-direction: column; + gap: 10px; +} + +.earth-mobile-detail-row { + display: flex; + flex-direction: column; + gap: 4px; + padding-bottom: 10px; + border-bottom: 1px solid rgba(255, 255, 255, 0.06); +} + +.earth-mobile-detail-row-label { + color: var(--hud-text-muted); + font-size: 0.72rem; + letter-spacing: 0.06em; + text-transform: uppercase; +} + +.earth-mobile-detail-row-value, +.earth-mobile-detail-empty { + color: var(--hud-text); + line-height: 1.5; +} + +.layout-mode-mobile .earth-status-message, +.layout-mode-mobile .earth-error-message { + top: calc(var(--safe-top) + 130px); + left: auto; + right: calc(8px + var(--safe-right)); + transform: translate(0, -10px); + min-width: 0; + max-width: min(200px, 52vw); + font-size: 0.78rem; + padding: 6px 14px 6px 10px; +} + +.layout-mode-mobile .earth-status-message.visible, +.layout-mode-mobile .earth-error-message.visible { + transform: translate(0, 0); +} + .hud-panel-row { display: flex; justify-content: space-between; @@ -1110,6 +1884,30 @@ } } +.layout-mode-mobile .earth-search-sheet { + top: calc(8px + var(--safe-top)); + left: 8px; + right: 8px; + width: auto; + max-height: calc(100vh - var(--safe-top) - var(--safe-bottom) - 16px); + transform: translateX(0) translateY(8px) scale(1); +} + +.layout-mode-mobile .earth-search-modal.is-open .earth-search-sheet { + transform: translateX(0) translateY(0) scale(1); +} + +.layout-mode-mobile .earth-settings-sheet { + top: auto; + left: 8px; + right: 8px; + bottom: calc(8px + var(--safe-bottom)); + width: auto; + max-width: none; + max-height: min(78vh, 720px); + border-radius: 24px 24px 18px 18px; +} + /* .earth-left-column layout-expanded rule lives in info-panel.css */ /* .hud-panel-legend layout-expanded rule lives in legend.css */ /* .hud-panel-stats layout-expanded rule lives in earth-stats.css */ diff --git a/frontend/public/earth/css/info-panel.css b/frontend/public/earth/css/info-panel.css index f415dc0d..55e1d4d0 100644 --- a/frontend/public/earth/css/info-panel.css +++ b/frontend/public/earth/css/info-panel.css @@ -367,3 +367,39 @@ .earth-app.layout-expanded .earth-left-column { transform: translate(calc(-100% + var(--hud-offset)), 0); } + +.layout-mode-mobile .earth-left-column { + top: calc(8px + var(--safe-top)); + left: 8px; + max-width: min(300px, calc(100vw - 16px)); +} + +.layout-mode-mobile .hud-panel-info { + position: fixed; + left: 8px !important; + right: 8px !important; + top: auto !important; + bottom: calc(84px + var(--safe-bottom)) !important; + width: auto; + max-width: none; + max-height: min(58vh, 520px); + z-index: 240; +} + +.layout-mode-mobile .info-card-header { + cursor: default; +} + +.layout-mode-mobile .info-card-content { + max-height: min(46vh, 420px); +} + +.layout-mode-mobile .info-card-property { + flex-direction: column; + align-items: stretch; +} + +.layout-mode-mobile .info-card-value { + max-width: none; + text-align: left; +} diff --git a/frontend/public/earth/css/layer-panel.css b/frontend/public/earth/css/layer-panel.css index 2c9511fe..b5b58ba0 100644 --- a/frontend/public/earth/css/layer-panel.css +++ b/frontend/public/earth/css/layer-panel.css @@ -317,3 +317,29 @@ /* Layout-expanded: layer panel slides off with .earth-left-column — no individual rule needed since the whole column translates together. */ + +.layout-mode-mobile .hud-panel-layers { + position: fixed; + left: 12px; + right: 12px; + bottom: calc(88px + var(--safe-bottom)); + width: auto; + max-height: min(60vh, 520px); + margin-top: 0; + z-index: 220; + transform: translateY(calc(100% + 28px)); + opacity: 0; + pointer-events: none; + transition: transform 0.24s ease, opacity 0.2s ease; +} + +.layout-mode-mobile .hud-panel-layers.is-mobile-open { + transform: translateY(0); + opacity: 1; + pointer-events: auto; +} + +.layout-mode-mobile .layer-panel-body { + max-height: min(52vh, 460px); + overflow: auto; +} diff --git a/frontend/public/earth/css/legend.css b/frontend/public/earth/css/legend.css index 8eca724e..0e3d33ba 100644 --- a/frontend/public/earth/css/legend.css +++ b/frontend/public/earth/css/legend.css @@ -138,3 +138,24 @@ bottom: var(--hud-offset); transform: translate(calc(-100% + var(--hud-offset)), calc(100% - var(--hud-offset))); } + +.layout-mode-mobile .hud-panel-legend { + position: fixed; + left: 8px; + bottom: calc(84px + var(--safe-bottom)); + width: min(172px, calc(100vw - 16px)); + z-index: 205; +} + +.layout-mode-mobile .legend-list { + max-height: min(20vh, 180px); +} + +.layout-mode-mobile.earth-search-open .hud-panel-legend, +.layout-mode-mobile.earth-settings-open .hud-panel-legend, +.layout-mode-mobile.earth-media-open .hud-panel-legend, +.layout-mode-mobile.earth-info-open .hud-panel-legend { + opacity: 0; + pointer-events: none; + transform: translateY(12px); +} diff --git a/frontend/public/earth/css/toolbar.css b/frontend/public/earth/css/toolbar.css index 353be6b4..b9c59847 100644 --- a/frontend/public/earth/css/toolbar.css +++ b/frontend/public/earth/css/toolbar.css @@ -105,6 +105,14 @@ pointer-events: auto; } +.earth-toolbar-orb:has(#layer-action) { + display: none; +} + +.layout-mode-mobile .earth-toolbar-group { + display: none; +} + .earth-toolbar-cluster.is-collapsed .earth-toolbar-orb > * { pointer-events: none; } diff --git a/frontend/public/earth/css/tv-panel.css b/frontend/public/earth/css/tv-panel.css index 23b5708e..4c26f2d0 100644 --- a/frontend/public/earth/css/tv-panel.css +++ b/frontend/public/earth/css/tv-panel.css @@ -285,6 +285,27 @@ cursor: nesw-resize; } +.layout-mode-mobile .hud-panel-media { + position: fixed; + left: 8px; + right: 8px; + top: calc(8px + var(--safe-top)); + bottom: calc(84px + var(--safe-bottom)); + width: auto; + max-width: none; + max-height: none; + min-width: 0; + z-index: 230; +} + +.layout-mode-mobile .tv-panel-player { + min-height: min(42vh, 360px); +} + +.layout-mode-mobile .tv-panel-edge { + display: none; +} + /* 右下角视觉标记 */ .tv-panel-edge[data-edge="br"]::before { content: ""; diff --git a/frontend/public/earth/index.html b/frontend/public/earth/index.html index 78f7a776..656d2c9a 100644 --- a/frontend/public/earth/index.html +++ b/frontend/public/earth/index.html @@ -156,6 +156,14 @@