From ab09f0ba78664b7cdcecd599ef6b3d385e7b82b8 Mon Sep 17 00:00:00 2001 From: linkong Date: Thu, 26 Mar 2026 14:04:57 +0800 Subject: [PATCH] fix: polish earth toolbar controls and loading copy --- VERSION | 2 +- docs/CHANGELOG.md | 21 ++++++ docs/version-history.md | 3 +- frontend/public/earth/css/base.css | 90 +++++++++++++++++++++- frontend/public/earth/index.html | 108 +++++++++++++++++++++++---- frontend/public/earth/js/controls.js | 2 +- frontend/public/earth/js/main.js | 19 ++++- frontend/public/earth/js/ui.js | 13 ++++ 8 files changed, 239 insertions(+), 19 deletions(-) diff --git a/VERSION b/VERSION index 88541566..a67cebaf 100644 --- a/VERSION +++ b/VERSION @@ -1 +1 @@ -0.21.0 +0.21.1 diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md index 342818ff..a6a406cb 100644 --- a/docs/CHANGELOG.md +++ b/docs/CHANGELOG.md @@ -47,6 +47,27 @@ Released: 2026-03-26 - Older satellite records can still fall back to backend-generated TLE lines when raw lines are unavailable. - This release is primarily focused on Earth module stability rather than visible admin UI changes. +## 0.21.1 + +Released: 2026-03-26 + +### Highlights + +- Refined the Earth big-screen toolbar with clearer controls, hover hints, and more consistent visual language. +- Replaced emoji-based Earth toolbar controls with SVG icons for a cleaner HUD. +- Updated the Earth loading splash so manual reloads no longer show legacy wording. + +### Improved + +- Improved zoom controls by adding tooltips for reset view, zoom in, zoom out, and resetting zoom to `100%`. +- Improved Earth toolbar readability with larger icons and revised glyphs for rotation, reload, satellites, trails, cables, terrain, and collapse. +- Improved loading overlay copy to better distinguish initial initialization from manual refresh. + +### Fixed + +- Fixed rotate toggle rendering so play/pause state no longer relies on emoji text replacement. +- Fixed Earth autorotation target syncing so inertial drag is preserved while the globe is still coasting. + ## 0.21.0 Released: 2026-03-26 diff --git a/docs/version-history.md b/docs/version-history.md index f0cc9597..531447c2 100644 --- a/docs/version-history.md +++ b/docs/version-history.md @@ -16,7 +16,7 @@ ## Current Version - `main` 当前主线历史推导到：`0.16.5` -- `dev` 当前开发分支历史推导到：`0.21.0` +- `dev` 当前开发分支历史推导到：`0.21.1` ## Timeline @@ -63,6 +63,7 @@ | `0.19.0` | feature | `dev` | `020c1d50` | refine data management and collection workflows | | `0.20.0` | feature | `dev` | `ce5feba3` | stabilize Earth module and fix satellite TLE handling | | `0.21.0` | feature | `dev` | `pending` | add Earth inertial drag, sync hover/trail state, and support unlimited satellite loading | +| `0.21.1` | bugfix | `dev` | `pending` | polish Earth toolbar controls, icons, and loading copy | ## Maintenance Commits Not Counted as Version Bumps diff --git a/frontend/public/earth/css/base.css b/frontend/public/earth/css/base.css index 7448c835..0742a0af 100644 --- a/frontend/public/earth/css/base.css +++ b/frontend/public/earth/css/base.css @@ -65,6 +65,7 @@ body { font-weight: 600; color: #4db8ff; min-width: 30px; + display: inline-block; text-align: center; cursor: pointer; padding: 2px 4px; @@ -96,6 +97,7 @@ body { margin: 0; flex: 0 0 auto; box-sizing: border-box; + position: relative; } #zoom-toolbar .zoom-btn:hover { @@ -104,6 +106,55 @@ body { box-shadow: 0 0 10px rgba(77, 184, 255, 0.5); } +#zoom-toolbar #reset-view svg { + width: 18px; + height: 18px; + stroke: currentColor; + stroke-width: 1.8; + fill: none; + stroke-linecap: round; + stroke-linejoin: round; +} + +#zoom-toolbar .zoom-percent { + position: relative; +} + +#zoom-toolbar .tooltip { + position: absolute; + right: calc(100% + 10px); + top: 50%; + transform: translateY(-50%); + background: rgba(10, 10, 30, 0.95); + color: #fff; + padding: 6px 12px; + border-radius: 6px; + font-size: 12px; + white-space: nowrap; + opacity: 0; + visibility: hidden; + transition: all 0.2s ease; + border: 1px solid rgba(77, 184, 255, 0.4); + pointer-events: none; + z-index: 100; +} + +#zoom-toolbar .zoom-btn:hover .tooltip, +#zoom-toolbar .zoom-percent:hover .tooltip { + opacity: 1; + visibility: visible; +} + +#zoom-toolbar .tooltip::after { + content: ''; + position: absolute; + left: 100%; + top: 50%; + transform: translateY(-50%); + border: 6px solid transparent; + border-left-color: rgba(77, 184, 255, 0.4); +} + #loading { position: absolute; top: 50%; @@ -264,11 +315,23 @@ input[type="range"]::-webkit-slider-thumb { } .toggle-arrow { - font-size: 14px; + display: inline-flex; + align-items: center; + justify-content: center; color: #4db8ff; transition: transform 0.3s ease; } +.toggle-arrow svg { + width: 16px; + height: 16px; + stroke: currentColor; + stroke-width: 2.2; + fill: none; + stroke-linecap: round; + stroke-linejoin: round; +} + #control-toolbar.collapsed .toggle-arrow { transform: rotate(0deg); } @@ -328,6 +391,31 @@ input[type="range"]::-webkit-slider-thumb { box-shadow: 0 0 10px rgba(77, 184, 255, 0.4) inset; } +.toolbar-btn .icon { + display: inline-flex; + align-items: center; + justify-content: center; +} + +.toolbar-btn svg { + width: 18px; + height: 18px; + stroke: currentColor; + stroke-width: 2.1; + fill: none; + stroke-linecap: round; + stroke-linejoin: round; +} + +#rotate-toggle .icon-play, +#rotate-toggle.is-stopped .icon-pause { + display: none; +} + +#rotate-toggle.is-stopped .icon-play { + display: inline-flex; +} + .toolbar-btn .tooltip { position: absolute; bottom: 50px; diff --git a/frontend/public/earth/index.html b/frontend/public/earth/index.html index cd38bf76..e5f0f219 100644 --- a/frontend/public/earth/index.html +++ b/frontend/public/earth/index.html @@ -38,22 +38,104 @@
- - - 100% - + + + 100%重置缩放到100% +
- - - - - - + + + + + +
- +
@@ -125,8 +207,8 @@
-
正在加载3D地球和电缆数据...
-
使用8K高分辨率卫星纹理 | 大陆轮廓更清晰
+
正在初始化全球态势数据...
+
同步卫星、海底光缆与登陆点数据
diff --git a/frontend/public/earth/js/controls.js b/frontend/public/earth/js/controls.js index d4c4f8eb..62735577 100644 --- a/frontend/public/earth/js/controls.js +++ b/frontend/public/earth/js/controls.js @@ -371,7 +371,7 @@ function updateRotateUI() { const btn = document.getElementById("rotate-toggle"); if (btn) { btn.classList.toggle("active", autoRotate); - btn.innerHTML = autoRotate ? "⏸️" : "▶️"; + btn.classList.toggle("is-stopped", !autoRotate); const tooltip = btn.querySelector(".tooltip"); if (tooltip) tooltip.textContent = autoRotate ? "暂停旋转" : "开始旋转"; } diff --git a/frontend/public/earth/js/main.js b/frontend/public/earth/js/main.js index 4298e268..9e397916 100644 --- a/frontend/public/earth/js/main.js +++ b/frontend/public/earth/js/main.js @@ -9,6 +9,7 @@ import { updateZoomDisplay, updateEarthStats, setLoading, + setLoadingMessage, showTooltip, hideTooltip, showError, @@ -392,6 +393,12 @@ async function loadData(showWhiteSphere = false) { const loadToken = ++currentLoadToken; isDataLoading = true; hideError(); + setLoadingMessage( + showWhiteSphere ? "正在刷新全球态势数据..." : "正在初始化全球态势数据...", + showWhiteSphere + ? "重新同步卫星、海底光缆与登陆点数据" + : "同步卫星、海底光缆与登陆点数据", + ); setLoading(true); clearLockedObject(); hideInfoCard(); @@ -761,11 +768,19 @@ function animate() { const earth = getEarth(); const deltaTime = clock.getDelta() * 1000; + const hasInertia = + Math.abs(inertialVelocity.x) > INERTIA_MIN_VELOCITY || + Math.abs(inertialVelocity.y) > INERTIA_MIN_VELOCITY; if (getAutoRotate() && earth) { earth.rotation.y += CONFIG.rotationSpeed * (deltaTime / 16); - targetRotation.y = earth.rotation.y; - targetRotation.x = earth.rotation.x; + + // Keep the drag target aligned with autorotation only when the user is not + // actively dragging and there is no residual inertial motion to preserve. + if (!isDragging && !hasInertia) { + targetRotation.y = earth.rotation.y; + targetRotation.x = earth.rotation.x; + } } if (earth) { diff --git a/frontend/public/earth/js/ui.js b/frontend/public/earth/js/ui.js index 3bb9f65a..d2cf346a 100644 --- a/frontend/public/earth/js/ui.js +++ b/frontend/public/earth/js/ui.js @@ -73,6 +73,19 @@ export function setLoading(loading) { loadingEl.style.display = loading ? "block" : "none"; } +export function setLoadingMessage(title, subtitle = "") { + const titleEl = document.getElementById("loading-title"); + const subtitleEl = document.getElementById("loading-subtitle"); + + if (titleEl) { + titleEl.textContent = title; + } + + if (subtitleEl) { + subtitleEl.textContent = subtitle; + } +} + // Show tooltip export function showTooltip(x, y, content) { const tooltip = document.getElementById("tooltip");