dev #5
18
README.md
18
README.md
@@ -102,6 +102,13 @@
|
||||
| Axios | HTTP 客户端 |
|
||||
| Socket.io-client | WebSocket 客户端 |
|
||||
| ECharts | 统计图表 |
|
||||
| Bun | 前端包管理与脚本运行 |
|
||||
|
||||
前端工程统一使用 Bun：
|
||||
|
||||
- 安装依赖使用 `bun install`
|
||||
- 运行脚本使用 `bun run <script>`
|
||||
- 不使用 `npm`、`pnpm`、`yarn`
|
||||
|
||||
### 虚幻引擎客户端
|
||||
|
||||
@@ -205,6 +212,17 @@
|
||||
./planet.sh health
|
||||
```
|
||||
|
||||
前端命令约定：
|
||||
|
||||
```bash
|
||||
cd frontend
|
||||
bun install
|
||||
bun run dev
|
||||
bun run build
|
||||
```
|
||||
|
||||
不要使用 `npm run ...`，避免在 WSL/Windows 混合环境里触发 `cmd.exe` 路径兼容问题。
|
||||
|
||||
## API 文档
|
||||
|
||||
启动服务后访问: `http://localhost:8000/docs`
|
||||
|
||||
@@ -7,6 +7,37 @@ This project follows the repository versioning rule:
|
||||
- `feature` -> `+0.1.0`
|
||||
- `bugfix` -> `+0.0.1`
|
||||
|
||||
## 0.24.1
|
||||
|
||||
Released: 2026-04-09
|
||||
|
||||
### Highlights
|
||||
|
||||
- Refined the `/earth` HUD into a cleaner class-first structure with responsive scaling, clearer CSS layer boundaries, and lower coupling between HTML, CSS, and runtime UI updates.
|
||||
- Hardened local startup conventions around Bun so frontend tooling, docs, and `planet.sh` behave more predictably in fresh Ubuntu and mixed WSL environments.
|
||||
|
||||
### Added
|
||||
|
||||
- Added [frontend/public/earth/css/hud.css](/home/ray/dev/linkong/planet/frontend/public/earth/css/hud.css), extracting shared HUD panel surfaces, shared HUD typography rows, status messaging, tooltip overlays, and layout-expanded panel transitions out of the old monolithic base layer.
|
||||
- Added [frontend/public/earth/css/toolbar.css](/home/ray/dev/linkong/planet/frontend/public/earth/css/toolbar.css), isolating Earth toolbar, popover, zoom dock, liquid-glass button, and toolbar-tooltip behavior into a dedicated toolbar layer.
|
||||
- Added explicit Bun package-manager metadata to [frontend/package.json](/home/ray/dev/linkong/planet/frontend/package.json) so the frontend package manager choice is declared instead of inferred from the lockfile alone.
|
||||
|
||||
### Improved
|
||||
|
||||
- Improved [frontend/public/earth/css/base.css](/home/ray/dev/linkong/planet/frontend/public/earth/css/base.css) by reducing it to app-shell concerns only: global tokens, Earth app container, loading panel, and shared animation primitives.
|
||||
- Improved [frontend/public/earth/index.html](/home/ray/dev/linkong/planet/frontend/public/earth/index.html) by wiring the new CSS layer order, standardizing HUD utility classes on `hud-panel-*`, and replacing generic toolbar/tooltip hooks with more explicit Earth-specific classes.
|
||||
- Improved [frontend/public/earth/css/info-panel.css](/home/ray/dev/linkong/planet/frontend/public/earth/css/info-panel.css), [frontend/public/earth/css/coordinates-display.css](/home/ray/dev/linkong/planet/frontend/public/earth/css/coordinates-display.css), [frontend/public/earth/css/legend.css](/home/ray/dev/linkong/planet/frontend/public/earth/css/legend.css), and [frontend/public/earth/css/earth-stats.css](/home/ray/dev/linkong/planet/frontend/public/earth/css/earth-stats.css) by leaving only panel-specific responsibilities in each file after the shared HUD and toolbar primitives moved out.
|
||||
- Improved [frontend/public/earth/js/main.js](/home/ray/dev/linkong/planet/frontend/public/earth/js/main.js), [frontend/public/earth/js/controls.js](/home/ray/dev/linkong/planet/frontend/public/earth/js/controls.js), [frontend/public/earth/js/ui.js](/home/ray/dev/linkong/planet/frontend/public/earth/js/ui.js), and [frontend/public/earth/js/legend.js](/home/ray/dev/linkong/planet/frontend/public/earth/js/legend.js) by aligning runtime DOM queries and generated markup with the new class-first HUD and toolbar structure.
|
||||
- Improved [frontend/public/earth/js/constants.js](/home/ray/dev/linkong/planet/frontend/public/earth/js/constants.js) and [frontend/public/earth/js/main.js](/home/ray/dev/linkong/planet/frontend/public/earth/js/main.js) by keeping HUD scaling configurable through extracted constants instead of scattering scaling assumptions through the main Earth entrypoint.
|
||||
- Improved [planet.sh](/home/ray/dev/linkong/planet/planet.sh) by prepending `~/.local/bin` and `~/.bun/bin` automatically, preferring direct `~/.bun/bin/bun` detection, and auto-installing missing `uv`/`bun` instead of requiring the user's interactive shell config to expose them first.
|
||||
- Improved [README.md](/home/ray/dev/linkong/planet/README.md), [project_context.md](/home/ray/dev/linkong/planet/project_context.md), [rules.md](/home/ray/dev/linkong/planet/rules.md), and [scripts/bootstrap-dev.sh](/home/ray/dev/linkong/planet/scripts/bootstrap-dev.sh) by making the frontend Bun-only workflow explicit in both onboarding docs and command-line guidance.
|
||||
|
||||
### Fixed
|
||||
|
||||
- Fixed the Earth HUD cleanup path where splitting styles previously left the page with a missing `base.css` entry and mismatched utility class names during the refactor.
|
||||
- Fixed several Earth UI update paths so toolbar tooltip text, legend re-rendering, status message classes, and mouse coordinate styling continue to work after removing legacy fallback selectors.
|
||||
- Fixed the local developer bootstrap path where `planet.sh start` could fail in a clean Ubuntu or agent shell session simply because Bun or uv were installed outside the current shell's inherited `PATH`.
|
||||
|
||||
## 0.24.0
|
||||
|
||||
Released: 2026-04-09
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
## Current Version
|
||||
|
||||
- `main` 当前主线历史推导到：`0.16.5`
|
||||
- `dev` 当前开发分支历史推导到：`0.23.3`
|
||||
- `dev` 当前开发分支历史推导到：`0.24.1`
|
||||
|
||||
## Timeline
|
||||
|
||||
@@ -72,6 +72,8 @@
|
||||
| `0.22.9` | bugfix | `dev` | `6bfcd053` | simplify `planet.sh` readiness messaging and only show retry counts on actual restart |
|
||||
| `0.23.0` | feature | `dev` | `pending` | add dedicated `aiprovider` service, multi-protocol AI adapters, uv-only Python runtime, and AI Provider restart controls |
|
||||
| `0.23.3` | bugfix | `dev` | `pending` | refine `planet.sh` zsh runtime compatibility, startup logging, and frontend readiness feedback |
|
||||
| `0.24.0` | feature | `dev` | `pending` | add AI Playground entry, provider diagnostics, and frontend layout guidance |
|
||||
| `0.24.1` | bugfix | `dev` | `pending` | refactor Earth HUD into class-first CSS layers, unify Bun-only frontend tooling guidance, and auto-bootstrap Bun/uv in `planet.sh` |
|
||||
|
||||
## Maintenance Commits Not Counted as Version Bumps
|
||||
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
{
|
||||
"name": "planet-frontend",
|
||||
"version": "0.24.0",
|
||||
"version": "0.24.1",
|
||||
"private": true,
|
||||
"packageManager": "bun@1",
|
||||
"dependencies": {
|
||||
"@ant-design/icons": "^5.2.6",
|
||||
"antd": "^5.12.5",
|
||||
|
||||
@@ -1,4 +1,32 @@
|
||||
/* base.css - 公共基础样式 */
|
||||
/* base.css - app shell, tokens, and global primitives */
|
||||
|
||||
@property --float-offset {
|
||||
syntax: "<length>";
|
||||
inherits: false;
|
||||
initial-value: 0px;
|
||||
}
|
||||
|
||||
:root {
|
||||
--hud-scale: 1;
|
||||
--hud-offset: calc(20px * var(--hud-scale));
|
||||
--hud-radius: calc(20px * var(--hud-scale));
|
||||
--hud-panel-padding: calc(16px * var(--hud-scale));
|
||||
--hud-panel-padding-sm: calc(12px * var(--hud-scale));
|
||||
--hud-gap-xs: calc(6px * var(--hud-scale));
|
||||
--hud-gap-sm: calc(10px * var(--hud-scale));
|
||||
--hud-gap-md: calc(14px * var(--hud-scale));
|
||||
--hud-gap-lg: calc(18px * var(--hud-scale));
|
||||
--hud-font-size: calc(0.88rem * var(--hud-scale));
|
||||
--hud-font-size-sm: calc(0.76rem * var(--hud-scale));
|
||||
--hud-title-size: calc(1.05rem * var(--hud-scale));
|
||||
--hud-border: rgba(225, 242, 255, 0.2);
|
||||
--hud-border-hover: rgba(236, 248, 255, 0.34);
|
||||
--hud-border-active: rgba(240, 249, 255, 0.5);
|
||||
--glass-fill-top: rgba(255, 255, 255, 0.14);
|
||||
--glass-fill-bottom: rgba(118, 200, 255, 0.08);
|
||||
--glass-shadow: 0 18px 34px rgba(0, 0, 0, 0.22);
|
||||
--glass-glow: 0 0 26px rgba(145, 214, 255, 0.18);
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
@@ -6,788 +34,100 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
html,
|
||||
body,
|
||||
.earth-page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body.earth-page {
|
||||
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
||||
background-color: #0a0a1a;
|
||||
color: #fff;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
:root {
|
||||
--hud-border: rgba(210, 237, 255, 0.32);
|
||||
--hud-border-hover: rgba(232, 246, 255, 0.48);
|
||||
--hud-border-active: rgba(245, 251, 255, 0.62);
|
||||
--glass-fill-top: rgba(255, 255, 255, 0.18);
|
||||
--glass-fill-bottom: rgba(115, 180, 255, 0.08);
|
||||
--glass-sheen: rgba(255, 255, 255, 0.34);
|
||||
--glass-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
|
||||
--glass-glow: 0 0 26px rgba(120, 200, 255, 0.16);
|
||||
}
|
||||
|
||||
@property --float-offset {
|
||||
syntax: '<length>';
|
||||
inherits: false;
|
||||
initial-value: 0px;
|
||||
}
|
||||
|
||||
#container {
|
||||
.earth-app {
|
||||
position: relative;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
#container.dragging {
|
||||
.earth-app.dragging {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
/* Bottom Dock */
|
||||
#right-toolbar-group {
|
||||
.earth-filters {
|
||||
position: absolute;
|
||||
bottom: 18px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 200;
|
||||
}
|
||||
|
||||
#right-toolbar-group,
|
||||
#info-panel,
|
||||
#coordinates-display,
|
||||
#legend,
|
||||
#earth-stats {
|
||||
transition:
|
||||
top 0.45s ease,
|
||||
right 0.45s ease,
|
||||
bottom 0.45s ease,
|
||||
left 0.45s ease,
|
||||
transform 0.45s ease,
|
||||
box-shadow 0.45s ease;
|
||||
}
|
||||
|
||||
#info-panel,
|
||||
#coordinates-display,
|
||||
#legend,
|
||||
#earth-stats,
|
||||
#satellite-info {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
isolation: isolate;
|
||||
background:
|
||||
radial-gradient(circle at 24% 12%, rgba(255, 255, 255, 0.12), transparent 28%),
|
||||
radial-gradient(circle at 78% 115%, rgba(255, 255, 255, 0.06), transparent 32%),
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(110, 176, 255, 0.06)),
|
||||
rgba(7, 18, 36, 0.28);
|
||||
border: 1px solid rgba(225, 242, 255, 0.2);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.14),
|
||||
inset 0 -1px 0 rgba(255, 255, 255, 0.04),
|
||||
0 18px 40px rgba(0, 0, 0, 0.24),
|
||||
0 0 32px rgba(120, 200, 255, 0.12);
|
||||
backdrop-filter: blur(20px) saturate(145%);
|
||||
-webkit-backdrop-filter: blur(20px) saturate(145%);
|
||||
}
|
||||
|
||||
#info-panel::before,
|
||||
#coordinates-display::before,
|
||||
#legend::before,
|
||||
#earth-stats::before,
|
||||
#satellite-info::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 1px 1px 24% 1px;
|
||||
border-radius: inherit;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.05) 26%, transparent 70%);
|
||||
opacity: 0.46;
|
||||
width: 0;
|
||||
height: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#info-panel::after,
|
||||
#coordinates-display::after,
|
||||
#legend::after,
|
||||
#earth-stats::after,
|
||||
#satellite-info::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: -1px;
|
||||
padding: 1.4px;
|
||||
border-radius: inherit;
|
||||
background:
|
||||
linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(170, 223, 255, 0.2) 34%, rgba(88, 169, 255, 0.14) 68%, rgba(255, 255, 255, 0.24));
|
||||
opacity: 0.78;
|
||||
pointer-events: none;
|
||||
filter: url(#liquid-glass-distortion) blur(0.35px);
|
||||
-webkit-mask:
|
||||
linear-gradient(#000 0 0) content-box,
|
||||
linear-gradient(#000 0 0);
|
||||
-webkit-mask-composite: xor;
|
||||
mask:
|
||||
linear-gradient(#000 0 0) content-box,
|
||||
linear-gradient(#000 0 0);
|
||||
mask-composite: exclude;
|
||||
}
|
||||
|
||||
#info-panel > *,
|
||||
#coordinates-display > *,
|
||||
#legend > *,
|
||||
#earth-stats > *,
|
||||
#satellite-info > * {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#loading {
|
||||
.earth-loading {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 1.2rem;
|
||||
color: #4db8ff;
|
||||
z-index: 100;
|
||||
z-index: 240;
|
||||
min-width: min(calc(320px * var(--hud-scale)), 78vw);
|
||||
padding: calc(26px * var(--hud-scale));
|
||||
border-radius: calc(18px * var(--hud-scale));
|
||||
border: 1px solid rgba(77, 184, 255, 0.34);
|
||||
background:
|
||||
radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.12), transparent 35%),
|
||||
linear-gradient(180deg, rgba(13, 24, 46, 0.95), rgba(7, 14, 28, 0.94));
|
||||
box-shadow:
|
||||
0 0 30px rgba(77, 184, 255, 0.22),
|
||||
0 16px 40px rgba(0, 0, 0, 0.28);
|
||||
text-align: center;
|
||||
background-color: rgba(10, 10, 30, 0.95);
|
||||
padding: 30px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #4db8ff;
|
||||
box-shadow: 0 0 30px rgba(77,184,255,0.3);
|
||||
color: #4db8ff;
|
||||
}
|
||||
|
||||
#loading-spinner {
|
||||
border: 4px solid rgba(77, 184, 255, 0.3);
|
||||
.earth-loading-text {
|
||||
color: #4db8ff;
|
||||
}
|
||||
|
||||
.earth-loading-title {
|
||||
font-size: calc(1.15rem * var(--hud-scale));
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.earth-loading-subtitle {
|
||||
margin-top: calc(10px * var(--hud-scale));
|
||||
color: #9ab7d4;
|
||||
font-size: calc(0.84rem * var(--hud-scale));
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.earth-loading-spinner {
|
||||
width: calc(40px * var(--hud-scale));
|
||||
height: calc(40px * var(--hud-scale));
|
||||
margin: 0 auto calc(15px * var(--hud-scale));
|
||||
border: 4px solid rgba(77, 184, 255, 0.28);
|
||||
border-top: 4px solid #4db8ff;
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
animation: spin 1s linear infinite;
|
||||
margin: 0 auto 15px;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
.error-message {
|
||||
color: #ff4444;
|
||||
margin-top: 10px;
|
||||
font-size: 0.9rem;
|
||||
display: none;
|
||||
padding: 10px;
|
||||
background-color: rgba(255, 68, 68, 0.1);
|
||||
border-radius: 5px;
|
||||
border-left: 3px solid #ff4444;
|
||||
}
|
||||
|
||||
.terrain-controls {
|
||||
margin-top: 15px;
|
||||
padding-top: 15px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.slider-container {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.slider-label {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 5px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
input[type="range"] {
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
-webkit-appearance: none;
|
||||
background: rgba(0, 102, 204, 0.3);
|
||||
border-radius: 4px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input[type="range"]::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
background: #4db8ff;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 0 10px #4db8ff;
|
||||
}
|
||||
|
||||
.status-message {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -18px);
|
||||
background-color: rgba(10, 10, 30, 0.85);
|
||||
border-radius: 10px;
|
||||
padding: 10px 15px;
|
||||
z-index: 210;
|
||||
box-shadow: 0 0 20px rgba(0, 150, 255, 0.3);
|
||||
border: 1px solid rgba(0, 150, 255, 0.2);
|
||||
font-size: 0.9rem;
|
||||
display: none;
|
||||
backdrop-filter: blur(5px);
|
||||
text-align: center;
|
||||
min-width: 180px;
|
||||
opacity: 0;
|
||||
transition:
|
||||
transform 0.28s ease,
|
||||
opacity 0.28s ease;
|
||||
}
|
||||
|
||||
.status-message.visible {
|
||||
transform: translate(-50%, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.status-message.success {
|
||||
color: #44ff44;
|
||||
border-left: 3px solid #44ff44;
|
||||
}
|
||||
|
||||
.status-message.warning {
|
||||
color: #ffff44;
|
||||
border-left: 3px solid #ffff44;
|
||||
}
|
||||
|
||||
.status-message.error {
|
||||
color: #ff4444;
|
||||
border-left: 3px solid #ff4444;
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
position: absolute;
|
||||
background-color: rgba(10, 10, 30, 0.95);
|
||||
border: 1px solid #4db8ff;
|
||||
border-radius: 5px;
|
||||
padding: 5px 10px;
|
||||
font-size: 0.8rem;
|
||||
color: #fff;
|
||||
pointer-events: none;
|
||||
z-index: 100;
|
||||
box-shadow: 0 0 10px rgba(77, 184, 255, 0.3);
|
||||
display: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* Floating toolbar dock */
|
||||
#control-toolbar {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0;
|
||||
background: transparent;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.toolbar-items {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.floating-popover-group {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.floating-popover-group::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 100%;
|
||||
transform: translateX(-50%);
|
||||
width: 56px;
|
||||
height: 16px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.floating-popover-group > .stack-toolbar {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: auto;
|
||||
right: auto;
|
||||
bottom: calc(100% + 12px);
|
||||
transform: translate(-50%, 10px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
transition:
|
||||
opacity 0.22s ease,
|
||||
transform 0.22s ease,
|
||||
visibility 0.22s ease;
|
||||
z-index: 220;
|
||||
}
|
||||
|
||||
.toolbar-btn.floating-btn {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
min-width: 42px;
|
||||
min-height: 42px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.liquid-glass-surface {
|
||||
--elastic-x: 0px;
|
||||
--elastic-y: 0px;
|
||||
--tilt-x: 0deg;
|
||||
--tilt-y: 0deg;
|
||||
--btn-scale: 1;
|
||||
--press-offset: 0px;
|
||||
--float-offset: 0px;
|
||||
--glow-opacity: 0.24;
|
||||
--glow-x: 50%;
|
||||
--glow-y: 22%;
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
transform-style: preserve-3d;
|
||||
overflow: hidden;
|
||||
background:
|
||||
radial-gradient(circle at var(--glow-x) var(--glow-y), rgba(255, 255, 255, 0.16), transparent 34%),
|
||||
radial-gradient(circle at 50% 118%, rgba(255, 255, 255, 0.08), transparent 30%),
|
||||
linear-gradient(180deg, var(--glass-fill-top), var(--glass-fill-bottom)),
|
||||
rgba(8, 20, 38, 0.22);
|
||||
border: 1px solid var(--hud-border);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.14),
|
||||
inset 0 -1px 0 rgba(255, 255, 255, 0.05),
|
||||
var(--glass-shadow),
|
||||
var(--glass-glow);
|
||||
backdrop-filter: blur(18px) saturate(145%);
|
||||
-webkit-backdrop-filter: blur(18px) saturate(145%);
|
||||
transform:
|
||||
translate3d(var(--elastic-x), calc(var(--float-offset) + var(--press-offset) + var(--elastic-y)), 0)
|
||||
scale(var(--btn-scale));
|
||||
transition:
|
||||
transform 0.22s ease,
|
||||
box-shadow 0.22s ease,
|
||||
background 0.22s ease,
|
||||
opacity 0.18s ease,
|
||||
border-color 0.22s ease;
|
||||
animation: floatDock 3.8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.liquid-glass-surface::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 1px 1px 18px 1px;
|
||||
border-radius: inherit;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.05) 28%, transparent 68%);
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
transform:
|
||||
perspective(120px)
|
||||
rotateX(calc(var(--tilt-x) * 0.7))
|
||||
rotateY(calc(var(--tilt-y) * 0.7))
|
||||
translate3d(calc(var(--elastic-x) * 0.22), calc(var(--elastic-y) * 0.22), 0);
|
||||
transition: opacity 0.18s ease, transform 0.18s ease;
|
||||
}
|
||||
|
||||
.liquid-glass-surface::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: -1px;
|
||||
padding: 1.35px;
|
||||
border-radius: inherit;
|
||||
background:
|
||||
linear-gradient(135deg, rgba(255, 255, 255, 0.36), rgba(168, 222, 255, 0.22) 34%, rgba(96, 175, 255, 0.16) 66%, rgba(255, 255, 255, 0.28));
|
||||
opacity: 0.82;
|
||||
pointer-events: none;
|
||||
filter: url(#liquid-glass-distortion) blur(0.35px);
|
||||
transform:
|
||||
perspective(120px)
|
||||
rotateX(calc(var(--tilt-x) * 0.5))
|
||||
rotateY(calc(var(--tilt-y) * 0.5))
|
||||
translate3d(calc(var(--elastic-x) * 0.16), calc(var(--elastic-y) * 0.16), 0);
|
||||
-webkit-mask:
|
||||
linear-gradient(#000 0 0) content-box,
|
||||
linear-gradient(#000 0 0);
|
||||
-webkit-mask-composite: xor;
|
||||
mask:
|
||||
linear-gradient(#000 0 0) content-box,
|
||||
linear-gradient(#000 0 0);
|
||||
mask-composite: exclude;
|
||||
transition: opacity 0.18s ease, transform 0.18s ease;
|
||||
}
|
||||
|
||||
.toolbar-items > :nth-child(2n).floating-btn,
|
||||
.toolbar-items > :nth-child(2n) .floating-btn {
|
||||
animation-delay: 0.18s;
|
||||
}
|
||||
|
||||
.toolbar-items > :nth-child(3n).floating-btn,
|
||||
.toolbar-items > :nth-child(3n) .floating-btn {
|
||||
animation-delay: 0.34s;
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes floatDock {
|
||||
0%, 100% {
|
||||
0%,
|
||||
100% {
|
||||
--float-offset: 0px;
|
||||
}
|
||||
|
||||
50% {
|
||||
--float-offset: -4px;
|
||||
--float-offset: -2px;
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar-btn {
|
||||
position: relative;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
color: #4db8ff;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
.toolbar-btn:not(.liquid-glass-surface)::after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.toolbar-btn .icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
transform: translateZ(0);
|
||||
transition: transform 0.16s ease, opacity 0.16s ease;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.liquid-glass-surface:hover {
|
||||
--btn-scale: 1.035;
|
||||
--press-offset: -1px;
|
||||
--glow-opacity: 0.32;
|
||||
background:
|
||||
radial-gradient(circle at var(--glow-x) var(--glow-y), rgba(255, 255, 255, 0.18), transparent 34%),
|
||||
radial-gradient(circle at 50% 118%, rgba(255, 255, 255, 0.1), transparent 30%),
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(128, 198, 255, 0.1)),
|
||||
rgba(8, 20, 38, 0.2);
|
||||
border-color: var(--hud-border-hover);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.2),
|
||||
inset 0 -1px 0 rgba(255, 255, 255, 0.08),
|
||||
0 18px 36px rgba(0, 0, 0, 0.24),
|
||||
0 0 28px rgba(145, 214, 255, 0.22);
|
||||
}
|
||||
|
||||
.liquid-glass-surface:hover::before {
|
||||
opacity: 0.62;
|
||||
transform: scale(1.01);
|
||||
}
|
||||
|
||||
.liquid-glass-surface:hover::after {
|
||||
opacity: 0.96;
|
||||
transform: scale(1.01);
|
||||
}
|
||||
|
||||
.liquid-glass-surface:active,
|
||||
.liquid-glass-surface.is-pressed {
|
||||
--btn-scale: 0.942;
|
||||
--press-offset: 2px;
|
||||
--glow-opacity: 0.2;
|
||||
background:
|
||||
radial-gradient(circle at var(--glow-x) var(--glow-y), rgba(255, 255, 255, 0.24), transparent 34%),
|
||||
radial-gradient(circle at 50% 118%, rgba(255, 255, 255, 0.14), transparent 30%),
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(146, 210, 255, 0.16)),
|
||||
rgba(10, 24, 44, 0.24);
|
||||
border-color: rgba(240, 249, 255, 0.58);
|
||||
box-shadow:
|
||||
inset 0 2px 10px rgba(0, 0, 0, 0.2),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.16),
|
||||
0 4px 10px rgba(0, 0, 0, 0.18),
|
||||
0 0 14px rgba(176, 226, 255, 0.18);
|
||||
}
|
||||
|
||||
.liquid-glass-surface:active::before,
|
||||
.liquid-glass-surface.is-pressed::before {
|
||||
opacity: 0.46;
|
||||
transform: translateY(2px) scale(0.985);
|
||||
}
|
||||
|
||||
.liquid-glass-surface:active::after,
|
||||
.liquid-glass-surface.is-pressed::after {
|
||||
opacity: 0.78;
|
||||
transform: scale(0.985);
|
||||
}
|
||||
|
||||
.liquid-glass-surface:active .icon,
|
||||
.liquid-glass-surface.is-pressed .icon {
|
||||
transform: translateY(1.5px);
|
||||
}
|
||||
|
||||
.liquid-glass-surface:active img,
|
||||
.liquid-glass-surface.is-pressed img,
|
||||
.liquid-glass-surface:active .material-symbols-rounded,
|
||||
.liquid-glass-surface.is-pressed .material-symbols-rounded {
|
||||
transform: translateY(1.5px);
|
||||
transition: transform 0.16s ease, opacity 0.16s ease;
|
||||
}
|
||||
|
||||
#zoom-control-group #zoom-toolbar .zoom-btn:active,
|
||||
#zoom-control-group #zoom-toolbar .zoom-btn.is-pressed,
|
||||
#zoom-control-group #zoom-toolbar .zoom-percent:active,
|
||||
#zoom-control-group #zoom-toolbar .zoom-percent.is-pressed {
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.liquid-glass-surface.active {
|
||||
background:
|
||||
radial-gradient(circle at var(--glow-x) var(--glow-y), rgba(255, 255, 255, 0.18), transparent 34%),
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(118, 200, 255, 0.14)),
|
||||
rgba(11, 34, 58, 0.26);
|
||||
border-color: var(--hud-border-active);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.22),
|
||||
inset 0 0 18px rgba(160, 220, 255, 0.14),
|
||||
0 18px 34px rgba(0, 0, 0, 0.24),
|
||||
0 0 30px rgba(145, 214, 255, 0.24);
|
||||
}
|
||||
|
||||
.toolbar-btn svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
stroke: currentColor;
|
||||
stroke-width: 2.1;
|
||||
fill: none;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
|
||||
.toolbar-btn .material-symbols-rounded {
|
||||
font-size: 21px;
|
||||
line-height: 1;
|
||||
font-variation-settings:
|
||||
'FILL' 0,
|
||||
'wght' 500,
|
||||
'GRAD' 0,
|
||||
'opsz' 24;
|
||||
color: currentColor;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
text-rendering: geometricPrecision;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.toolbar-btn img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: block;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
shape-rendering: geometricPrecision;
|
||||
image-rendering: -webkit-optimize-contrast;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
|
||||
#rotate-toggle .icon-play,
|
||||
#rotate-toggle.is-stopped .icon-pause,
|
||||
#layout-toggle .layout-collapse,
|
||||
#layout-toggle.active .layout-expand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#rotate-toggle.is-stopped .icon-play,
|
||||
#layout-toggle.active .layout-collapse {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
#zoom-control-group:hover #zoom-toolbar,
|
||||
#zoom-control-group:focus-within #zoom-toolbar,
|
||||
#zoom-control-group.open #zoom-toolbar,
|
||||
#info-control-group:hover #info-toolbar,
|
||||
#info-control-group:focus-within #info-toolbar,
|
||||
#info-control-group.open #info-toolbar {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
pointer-events: auto;
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
|
||||
#zoom-control-group.force-closed #zoom-toolbar,
|
||||
#info-control-group.force-closed #info-toolbar {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
transform: translate(-50%, 8px);
|
||||
}
|
||||
|
||||
#zoom-control-group #zoom-toolbar .zoom-percent {
|
||||
min-width: 0;
|
||||
width: 42px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 42px;
|
||||
padding: 0;
|
||||
font-size: 0.68rem;
|
||||
border-radius: 50%;
|
||||
color: #4db8ff;
|
||||
animation: floatDock 3.8s ease-in-out infinite;
|
||||
animation-delay: 0.18s;
|
||||
}
|
||||
|
||||
#zoom-control-group #zoom-toolbar .zoom-percent:hover {
|
||||
}
|
||||
|
||||
#zoom-control-group #zoom-toolbar,
|
||||
#info-control-group #info-toolbar {
|
||||
top: auto;
|
||||
right: auto;
|
||||
left: 50%;
|
||||
bottom: calc(100% + 12px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
#info-toolbar .toolbar-btn:nth-child(1) {
|
||||
animation-delay: 0.34s;
|
||||
}
|
||||
|
||||
#info-toolbar .toolbar-btn:nth-child(2) {
|
||||
animation-delay: 0.18s;
|
||||
}
|
||||
|
||||
#info-toolbar .toolbar-btn:nth-child(3) {
|
||||
animation-delay: 0.1s;
|
||||
}
|
||||
|
||||
#info-toolbar .toolbar-btn:nth-child(4) {
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
#zoom-control-group #zoom-toolbar .zoom-btn {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
min-width: 42px;
|
||||
border-radius: 50%;
|
||||
color: #4db8ff;
|
||||
animation: floatDock 3.8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
#zoom-toolbar .zoom-btn:nth-child(1) {
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
#zoom-toolbar .zoom-btn:nth-child(3) {
|
||||
animation-delay: 0.34s;
|
||||
}
|
||||
|
||||
#zoom-control-group #zoom-toolbar .zoom-btn:hover {
|
||||
}
|
||||
|
||||
#zoom-control-group #zoom-toolbar .zoom-btn:active,
|
||||
#zoom-control-group #zoom-toolbar .zoom-percent:active {
|
||||
}
|
||||
|
||||
#zoom-control-group #zoom-toolbar .tooltip {
|
||||
bottom: calc(100% + 10px);
|
||||
}
|
||||
|
||||
#zoom-control-group #zoom-toolbar .tooltip::after {
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
border: 6px solid transparent;
|
||||
border-top-color: rgba(77, 184, 255, 0.4);
|
||||
}
|
||||
|
||||
#container.layout-expanded #info-panel {
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
transform: translate(calc(-100% + 20px), calc(-100% + 20px));
|
||||
}
|
||||
|
||||
#container.layout-expanded #coordinates-display {
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
transform: translate(calc(100% - 20px), calc(-100% + 20px));
|
||||
}
|
||||
|
||||
#container.layout-expanded #legend {
|
||||
left: 20px;
|
||||
bottom: 20px;
|
||||
transform: translate(calc(-100% + 20px), calc(100% - 20px));
|
||||
}
|
||||
|
||||
#container.layout-expanded #earth-stats {
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
transform: translate(calc(100% - 20px), calc(100% - 20px));
|
||||
}
|
||||
|
||||
#container.layout-expanded #right-toolbar-group {
|
||||
bottom: 18px;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.toolbar-btn .tooltip {
|
||||
position: absolute;
|
||||
bottom: 56px;
|
||||
left: 50%;
|
||||
transform: translateX(-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;
|
||||
}
|
||||
|
||||
.toolbar-btn:hover .tooltip,
|
||||
.floating-popover-group:hover > .toolbar-btn .tooltip,
|
||||
.floating-popover-group:focus-within > .toolbar-btn .tooltip {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
bottom: 58px;
|
||||
}
|
||||
|
||||
.toolbar-btn .tooltip::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
border: 6px solid transparent;
|
||||
border-top-color: rgba(77, 184, 255, 0.4);
|
||||
}
|
||||
|
||||
@@ -1,42 +1,31 @@
|
||||
/* coordinates-display */
|
||||
|
||||
#coordinates-display {
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
border-radius: 18px;
|
||||
padding: 10px 15px;
|
||||
.hud-panel-coordinates {
|
||||
top: var(--hud-offset);
|
||||
right: var(--hud-offset);
|
||||
border-radius: var(--hud-radius);
|
||||
padding: var(--hud-panel-padding-sm) var(--hud-panel-padding);
|
||||
z-index: 10;
|
||||
font-size: 0.9rem;
|
||||
min-width: 180px;
|
||||
font-size: var(--hud-font-size);
|
||||
min-width: calc(180px * var(--hud-scale));
|
||||
}
|
||||
|
||||
#coordinates-display .coord-item {
|
||||
margin-bottom: 5px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.hud-panel-coordinates .coord-item {
|
||||
margin-bottom: var(--hud-gap-xs);
|
||||
}
|
||||
|
||||
#coordinates-display .coord-label {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
#coordinates-display .coord-value {
|
||||
color: #4db8ff;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
#coordinates-display #zoom-level {
|
||||
margin-top: 5px;
|
||||
.hud-panel-coordinates .earth-zoom-level {
|
||||
margin-top: var(--hud-gap-xs);
|
||||
color: #ffff44;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
font-size: 1rem;
|
||||
font-size: calc(1rem * var(--hud-scale));
|
||||
}
|
||||
|
||||
#coordinates-display .mouse-coords {
|
||||
font-size: 0.8rem;
|
||||
.hud-panel-coordinates .earth-mouse-coords {
|
||||
font-size: var(--hud-font-size-sm);
|
||||
color: #aaa;
|
||||
margin-top: 5px;
|
||||
padding-top: 5px;
|
||||
margin-top: var(--hud-gap-xs);
|
||||
padding-top: var(--hud-gap-xs);
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
@@ -1,51 +1,15 @@
|
||||
/* earth-stats */
|
||||
|
||||
#earth-stats {
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
border-radius: 18px;
|
||||
padding: 15px;
|
||||
width: 250px;
|
||||
.hud-panel-stats {
|
||||
bottom: var(--hud-offset);
|
||||
right: var(--hud-offset);
|
||||
border-radius: var(--hud-radius);
|
||||
padding: var(--hud-panel-padding);
|
||||
width: calc(250px * var(--hud-scale));
|
||||
z-index: 10;
|
||||
font-size: 0.9rem;
|
||||
font-size: var(--hud-font-size);
|
||||
}
|
||||
|
||||
#earth-stats .stats-item {
|
||||
margin-bottom: 8px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
#earth-stats .stats-label {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
#earth-stats .stats-value {
|
||||
color: #4db8ff;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
#satellite-info {
|
||||
bottom: 20px;
|
||||
right: 290px;
|
||||
border-radius: 18px;
|
||||
padding: 15px;
|
||||
width: 220px;
|
||||
z-index: 10;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
#satellite-info .stats-item {
|
||||
margin-bottom: 6px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
#satellite-info .stats-label {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
#satellite-info .stats-value {
|
||||
color: #00e5ff;
|
||||
font-weight: 500;
|
||||
.hud-panel-stats .stats-item {
|
||||
margin-bottom: var(--hud-gap-sm);
|
||||
}
|
||||
|
||||
170
frontend/public/earth/css/hud.css
Normal file
170
frontend/public/earth/css/hud.css
Normal file
@@ -0,0 +1,170 @@
|
||||
/* hud.css - HUD surfaces and shared overlays */
|
||||
|
||||
.hud-panel {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
isolation: isolate;
|
||||
background:
|
||||
radial-gradient(circle at 24% 12%, rgba(255, 255, 255, 0.12), transparent 28%),
|
||||
radial-gradient(circle at 78% 115%, rgba(255, 255, 255, 0.06), transparent 32%),
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(110, 176, 255, 0.06)),
|
||||
rgba(7, 18, 36, 0.28);
|
||||
border: 1px solid rgba(225, 242, 255, 0.2);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.14),
|
||||
inset 0 -1px 0 rgba(255, 255, 255, 0.04),
|
||||
0 18px 40px rgba(0, 0, 0, 0.24),
|
||||
0 0 32px rgba(120, 200, 255, 0.12);
|
||||
backdrop-filter: blur(20px) saturate(145%);
|
||||
-webkit-backdrop-filter: blur(20px) saturate(145%);
|
||||
}
|
||||
|
||||
.hud-panel::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 1px 1px 24% 1px;
|
||||
border-radius: inherit;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.05) 26%, transparent 70%);
|
||||
opacity: 0.46;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.hud-panel::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: -1px;
|
||||
padding: 1.4px;
|
||||
border-radius: inherit;
|
||||
background:
|
||||
linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(170, 223, 255, 0.2) 34%, rgba(88, 169, 255, 0.14) 68%, rgba(255, 255, 255, 0.24));
|
||||
opacity: 0.78;
|
||||
pointer-events: none;
|
||||
filter: url(#liquid-glass-distortion) blur(0.35px);
|
||||
-webkit-mask:
|
||||
linear-gradient(#000 0 0) content-box,
|
||||
linear-gradient(#000 0 0);
|
||||
-webkit-mask-composite: xor;
|
||||
mask:
|
||||
linear-gradient(#000 0 0) content-box,
|
||||
linear-gradient(#000 0 0);
|
||||
mask-composite: exclude;
|
||||
}
|
||||
|
||||
.hud-panel > * {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.hud-panel-title {
|
||||
color: #4db8ff;
|
||||
margin-bottom: var(--hud-gap-sm);
|
||||
font-size: var(--hud-title-size);
|
||||
}
|
||||
|
||||
.hud-panel-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: var(--hud-gap-sm);
|
||||
}
|
||||
|
||||
.hud-panel-label {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.hud-panel-value {
|
||||
color: #4db8ff;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.hud-error-message {
|
||||
color: #ff4444;
|
||||
margin-top: 10px;
|
||||
font-size: 0.9rem;
|
||||
display: none;
|
||||
padding: 10px;
|
||||
background-color: rgba(255, 68, 68, 0.1);
|
||||
border-radius: 5px;
|
||||
border-left: 3px solid #ff4444;
|
||||
}
|
||||
|
||||
.earth-status-message {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -18px);
|
||||
background-color: rgba(10, 10, 30, 0.85);
|
||||
border-radius: 10px;
|
||||
padding: 10px 15px;
|
||||
z-index: 210;
|
||||
box-shadow: 0 0 20px rgba(0, 150, 255, 0.3);
|
||||
border: 1px solid rgba(0, 150, 255, 0.2);
|
||||
font-size: 0.9rem;
|
||||
display: none;
|
||||
backdrop-filter: blur(5px);
|
||||
text-align: center;
|
||||
min-width: 180px;
|
||||
opacity: 0;
|
||||
transition:
|
||||
transform 0.28s ease,
|
||||
opacity 0.28s ease;
|
||||
}
|
||||
|
||||
.earth-status-message.visible {
|
||||
transform: translate(-50%, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.earth-status-message.success {
|
||||
color: #44ff44;
|
||||
border-left: 3px solid #44ff44;
|
||||
}
|
||||
|
||||
.earth-status-message.warning {
|
||||
color: #ffff44;
|
||||
border-left: 3px solid #ffff44;
|
||||
}
|
||||
|
||||
.earth-status-message.error {
|
||||
color: #ff4444;
|
||||
border-left: 3px solid #ff4444;
|
||||
}
|
||||
|
||||
.earth-tooltip {
|
||||
position: absolute;
|
||||
background-color: rgba(10, 10, 30, 0.95);
|
||||
border: 1px solid #4db8ff;
|
||||
border-radius: 5px;
|
||||
padding: 5px 10px;
|
||||
font-size: 0.8rem;
|
||||
color: #fff;
|
||||
pointer-events: none;
|
||||
z-index: 100;
|
||||
box-shadow: 0 0 10px rgba(77, 184, 255, 0.3);
|
||||
display: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.earth-app.layout-expanded .hud-panel-info {
|
||||
top: var(--hud-offset);
|
||||
left: var(--hud-offset);
|
||||
transform: translate(calc(-100% + var(--hud-offset)), calc(-100% + var(--hud-offset)));
|
||||
}
|
||||
|
||||
.earth-app.layout-expanded .hud-panel-coordinates {
|
||||
top: var(--hud-offset);
|
||||
right: var(--hud-offset);
|
||||
transform: translate(calc(100% - var(--hud-offset)), calc(-100% + var(--hud-offset)));
|
||||
}
|
||||
|
||||
.earth-app.layout-expanded .hud-panel-legend {
|
||||
left: var(--hud-offset);
|
||||
bottom: var(--hud-offset);
|
||||
transform: translate(calc(-100% + var(--hud-offset)), calc(100% - var(--hud-offset)));
|
||||
}
|
||||
|
||||
.earth-app.layout-expanded .hud-panel-stats {
|
||||
right: var(--hud-offset);
|
||||
bottom: var(--hud-offset);
|
||||
transform: translate(calc(100% - var(--hud-offset)), calc(100% - var(--hud-offset)));
|
||||
}
|
||||
@@ -1,183 +1,58 @@
|
||||
/* info-panel */
|
||||
|
||||
#info-panel {
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
border-radius: 18px;
|
||||
padding: 20px;
|
||||
width: 320px;
|
||||
.hud-panel-info {
|
||||
top: var(--hud-offset);
|
||||
left: var(--hud-offset);
|
||||
border-radius: var(--hud-radius);
|
||||
padding: calc(20px * var(--hud-scale));
|
||||
width: calc(320px * var(--hud-scale));
|
||||
z-index: 10;
|
||||
font-size: var(--hud-font-size);
|
||||
}
|
||||
|
||||
#info-panel h1 {
|
||||
font-size: 1.8rem;
|
||||
margin-bottom: 5px;
|
||||
.hud-panel-info .earth-app-title {
|
||||
font-size: calc(1.8rem * var(--hud-scale));
|
||||
margin-bottom: var(--hud-gap-xs);
|
||||
color: #4db8ff;
|
||||
text-shadow: 0 0 10px rgba(77, 184, 255, 0.5);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#info-panel .subtitle {
|
||||
margin-bottom: 20px;
|
||||
.hud-panel-info .subtitle {
|
||||
margin-bottom: calc(20px * var(--hud-scale));
|
||||
border-bottom: 1px solid rgba(255,255,255,0.1);
|
||||
padding-bottom: 12px;
|
||||
padding-bottom: calc(12px * var(--hud-scale));
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
gap: calc(4px * var(--hud-scale));
|
||||
}
|
||||
|
||||
#info-panel .subtitle-main {
|
||||
.hud-panel-info .subtitle-main {
|
||||
color: #d7e7f5;
|
||||
font-size: 0.95rem;
|
||||
font-size: calc(0.95rem * var(--hud-scale));
|
||||
line-height: 1.35;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
#info-panel .subtitle-meta {
|
||||
.hud-panel-info .subtitle-meta {
|
||||
color: #8ea5bc;
|
||||
font-size: 0.74rem;
|
||||
font-size: calc(0.74rem * var(--hud-scale));
|
||||
line-height: 1.3;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
#info-panel .cable-info {
|
||||
margin-top: 15px;
|
||||
padding-top: 15px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
#info-panel .cable-info h3 {
|
||||
color: #4db8ff;
|
||||
margin-bottom: 8px;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
#info-panel .cable-property {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 5px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
#info-panel .property-label {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
#info-panel .property-value {
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
#info-panel .controls {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 20px;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
#info-panel button {
|
||||
background: linear-gradient(135deg, #0066cc, #004c99);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 8px 15px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
font-size: 0.9rem;
|
||||
transition: all 0.3s;
|
||||
flex: 1;
|
||||
min-width: 120px;
|
||||
box-shadow: 0 2px 5px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
#info-panel button:hover {
|
||||
background: linear-gradient(135deg, #0088ff, #0066cc);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 15px rgba(0,102,204,0.4);
|
||||
}
|
||||
|
||||
#info-panel .zoom-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 15px;
|
||||
padding-top: 15px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
#info-panel .zoom-buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 15px;
|
||||
margin-top: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#info-panel .zoom-percent-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
#info-panel .zoom-percent {
|
||||
font-size: 1.4rem;
|
||||
font-weight: 600;
|
||||
color: #4db8ff;
|
||||
min-width: 70px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
padding: 5px 10px;
|
||||
border-radius: 5px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
#info-panel .zoom-percent:hover {
|
||||
background: rgba(77, 184, 255, 0.2);
|
||||
box-shadow: 0 0 10px rgba(77, 184, 255, 0.3);
|
||||
}
|
||||
|
||||
#info-panel .zoom-buttons .zoom-btn {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
min-width: 36px;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
background: rgba(77, 184, 255, 0.2);
|
||||
color: #4db8ff;
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s ease;
|
||||
padding: 0;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
#info-panel .zoom-buttons .zoom-btn:hover {
|
||||
background: rgba(77, 184, 255, 0.4);
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 0 10px rgba(77, 184, 255, 0.5);
|
||||
}
|
||||
|
||||
#info-panel .zoom-buttons button {
|
||||
flex: 1;
|
||||
min-width: 60px;
|
||||
}
|
||||
|
||||
/* Info Card - Unified details panel (inside info-panel) */
|
||||
.info-card {
|
||||
margin-top: 15px;
|
||||
display: none;
|
||||
margin-top: var(--hud-gap-lg);
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(110, 176, 255, 0.04)),
|
||||
rgba(7, 18, 36, 0.2);
|
||||
border-radius: 14px;
|
||||
border-radius: calc(14px * var(--hud-scale));
|
||||
border: 1px solid rgba(225, 242, 255, 0.12);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.08),
|
||||
@@ -195,24 +70,24 @@
|
||||
.info-card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px 12px;
|
||||
padding: calc(10px * var(--hud-scale)) calc(12px * var(--hud-scale));
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(77, 184, 255, 0.06));
|
||||
gap: 8px;
|
||||
gap: var(--hud-gap-sm);
|
||||
}
|
||||
|
||||
.info-card-icon {
|
||||
font-size: 18px;
|
||||
font-size: calc(18px * var(--hud-scale));
|
||||
}
|
||||
|
||||
.info-card-header h3 {
|
||||
flex: 1;
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
font-size: calc(1rem * var(--hud-scale));
|
||||
color: #4db8ff;
|
||||
}
|
||||
|
||||
#info-card-content {
|
||||
padding: 10px 12px;
|
||||
.info-card-content {
|
||||
padding: calc(10px * var(--hud-scale)) calc(12px * var(--hud-scale));
|
||||
max-height: 40vh;
|
||||
overflow-y: auto;
|
||||
scrollbar-width: thin;
|
||||
@@ -220,29 +95,30 @@
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
#info-card-content::-webkit-scrollbar {
|
||||
.info-card-content::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
#info-card-content::-webkit-scrollbar-track {
|
||||
.info-card-content::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
#info-card-content::-webkit-scrollbar-thumb {
|
||||
.info-card-content::-webkit-scrollbar-thumb {
|
||||
background: linear-gradient(180deg, rgba(210, 237, 255, 0.32), rgba(110, 176, 255, 0.34));
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
#info-card-content::-webkit-scrollbar-thumb:hover {
|
||||
.info-card-content::-webkit-scrollbar-thumb:hover {
|
||||
background: linear-gradient(180deg, rgba(232, 246, 255, 0.42), rgba(128, 198, 255, 0.46));
|
||||
}
|
||||
|
||||
.info-card-property {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 6px;
|
||||
padding: calc(6px * var(--hud-scale));
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||||
pointer-events: auto;
|
||||
gap: var(--hud-gap-sm);
|
||||
}
|
||||
|
||||
.info-card-property:last-child {
|
||||
@@ -251,7 +127,7 @@
|
||||
|
||||
.info-card-label {
|
||||
color: #aaa;
|
||||
font-size: 0.85rem;
|
||||
font-size: calc(0.85rem * var(--hud-scale));
|
||||
cursor: pointer;
|
||||
transition: color 0.18s ease;
|
||||
}
|
||||
@@ -263,9 +139,9 @@
|
||||
.info-card-value {
|
||||
color: #4db8ff;
|
||||
font-weight: 500;
|
||||
font-size: 0.9rem;
|
||||
font-size: calc(0.9rem * var(--hud-scale));
|
||||
text-align: right;
|
||||
max-width: 180px;
|
||||
max-width: calc(180px * var(--hud-scale));
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,59 +1,74 @@
|
||||
/* legend */
|
||||
|
||||
#legend {
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
border-radius: 18px;
|
||||
padding: 15px;
|
||||
width: 220px;
|
||||
.hud-panel-legend {
|
||||
bottom: var(--hud-offset);
|
||||
left: var(--hud-offset);
|
||||
border-radius: var(--hud-radius);
|
||||
padding: var(--hud-panel-padding);
|
||||
width: calc(220px * var(--hud-scale));
|
||||
z-index: 10;
|
||||
font-size: var(--hud-font-size);
|
||||
}
|
||||
|
||||
#legend .legend-title {
|
||||
color: #4db8ff;
|
||||
margin-bottom: 10px;
|
||||
font-size: 1.1rem;
|
||||
.hud-panel-legend .legend-title {
|
||||
margin-bottom: var(--hud-gap-md);
|
||||
}
|
||||
|
||||
#legend .legend-list {
|
||||
.hud-panel-legend .legend-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
max-height: 202px;
|
||||
gap: var(--hud-gap-sm);
|
||||
max-height: calc(202px * var(--hud-scale));
|
||||
overflow-y: auto;
|
||||
padding-right: 4px;
|
||||
padding-right: calc(4px * var(--hud-scale));
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(160, 220, 255, 0.4) transparent;
|
||||
}
|
||||
|
||||
#legend .legend-list::-webkit-scrollbar {
|
||||
.hud-panel-legend .legend-list::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
#legend .legend-list::-webkit-scrollbar-track {
|
||||
.hud-panel-legend .legend-list::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
#legend .legend-list::-webkit-scrollbar-thumb {
|
||||
.hud-panel-legend .legend-list::-webkit-scrollbar-thumb {
|
||||
background: linear-gradient(180deg, rgba(210, 237, 255, 0.28), rgba(110, 176, 255, 0.34));
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
#legend .legend-item {
|
||||
.hud-panel-legend .legend-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 6px 8px;
|
||||
border-radius: 10px;
|
||||
padding: calc(6px * var(--hud-scale)) calc(8px * var(--hud-scale));
|
||||
border-radius: calc(10px * var(--hud-scale));
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(120, 180, 255, 0.02));
|
||||
border: 1px solid rgba(225, 242, 255, 0.06);
|
||||
}
|
||||
|
||||
#legend .legend-color {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 6px;
|
||||
margin-right: 10px;
|
||||
.hud-panel-legend .legend-color {
|
||||
width: calc(20px * var(--hud-scale));
|
||||
height: calc(20px * var(--hud-scale));
|
||||
border-radius: calc(6px * var(--hud-scale));
|
||||
margin-right: var(--hud-gap-md);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.2),
|
||||
0 0 12px rgba(77, 184, 255, 0.18);
|
||||
}
|
||||
|
||||
.legend-color-americas {
|
||||
background-color: #ff4444;
|
||||
}
|
||||
|
||||
.legend-color-au-a {
|
||||
background-color: #44ff44;
|
||||
}
|
||||
|
||||
.legend-color-au-b {
|
||||
background-color: #4444ff;
|
||||
}
|
||||
|
||||
.legend-color-default {
|
||||
background-color: #ffff44;
|
||||
}
|
||||
|
||||
498
frontend/public/earth/css/toolbar.css
Normal file
498
frontend/public/earth/css/toolbar.css
Normal file
@@ -0,0 +1,498 @@
|
||||
/* toolbar.css - bottom dock and floating toolbar primitives */
|
||||
|
||||
.earth-toolbar-group {
|
||||
position: absolute;
|
||||
bottom: 18px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 200;
|
||||
}
|
||||
|
||||
.earth-toolbar-group,
|
||||
.hud-panel {
|
||||
transition:
|
||||
top 0.45s ease,
|
||||
right 0.45s ease,
|
||||
bottom 0.45s ease,
|
||||
left 0.45s ease,
|
||||
transform 0.45s ease,
|
||||
box-shadow 0.45s ease;
|
||||
}
|
||||
|
||||
.earth-toolbar {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0;
|
||||
background: transparent;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.earth-toolbar-items {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.earth-toolbar-popover {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.earth-toolbar-popover::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 100%;
|
||||
transform: translateX(-50%);
|
||||
width: 56px;
|
||||
height: 16px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.earth-toolbar-popover > .earth-stack-toolbar {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: auto;
|
||||
right: auto;
|
||||
bottom: calc(100% + 12px);
|
||||
transform: translate(-50%, 10px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
transition:
|
||||
opacity 0.22s ease,
|
||||
transform 0.22s ease,
|
||||
visibility 0.22s ease;
|
||||
z-index: 220;
|
||||
}
|
||||
|
||||
.earth-toolbar-btn {
|
||||
position: relative;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
color: #4db8ff;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
.earth-toolbar-btn.floating-btn {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
min-width: 42px;
|
||||
min-height: 42px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.earth-toolbar-btn:not(.liquid-glass-surface)::after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.earth-toolbar-btn .icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
transform: translateZ(0);
|
||||
transition: transform 0.16s ease, opacity 0.16s ease;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.earth-toolbar-btn svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
stroke: currentColor;
|
||||
stroke-width: 2.1;
|
||||
fill: none;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
|
||||
.earth-toolbar-btn .material-symbols-rounded {
|
||||
font-size: 21px;
|
||||
line-height: 1;
|
||||
font-variation-settings:
|
||||
'FILL' 0,
|
||||
'wght' 500,
|
||||
'GRAD' 0,
|
||||
'opsz' 24;
|
||||
color: currentColor;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
text-rendering: geometricPrecision;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.earth-toolbar-btn img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: block;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
shape-rendering: geometricPrecision;
|
||||
image-rendering: -webkit-optimize-contrast;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.earth-toolbar-items > :nth-child(2n).floating-btn,
|
||||
.earth-toolbar-items > :nth-child(2n) .floating-btn {
|
||||
animation-delay: 0.18s;
|
||||
}
|
||||
|
||||
.earth-toolbar-items > :nth-child(3n).floating-btn,
|
||||
.earth-toolbar-items > :nth-child(3n) .floating-btn {
|
||||
animation-delay: 0.34s;
|
||||
}
|
||||
|
||||
.liquid-glass-surface {
|
||||
--elastic-x: 0px;
|
||||
--elastic-y: 0px;
|
||||
--tilt-x: 0deg;
|
||||
--tilt-y: 0deg;
|
||||
--btn-scale: 1;
|
||||
--press-offset: 0px;
|
||||
--float-offset: 0px;
|
||||
--glow-opacity: 0.24;
|
||||
--glow-x: 50%;
|
||||
--glow-y: 22%;
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
transform-style: preserve-3d;
|
||||
overflow: hidden;
|
||||
background:
|
||||
radial-gradient(circle at var(--glow-x) var(--glow-y), rgba(255, 255, 255, 0.16), transparent 34%),
|
||||
radial-gradient(circle at 50% 118%, rgba(255, 255, 255, 0.08), transparent 30%),
|
||||
linear-gradient(180deg, var(--glass-fill-top), var(--glass-fill-bottom)),
|
||||
rgba(8, 20, 38, 0.22);
|
||||
border: 1px solid var(--hud-border);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.14),
|
||||
inset 0 -1px 0 rgba(255, 255, 255, 0.05),
|
||||
var(--glass-shadow),
|
||||
var(--glass-glow);
|
||||
backdrop-filter: blur(18px) saturate(145%);
|
||||
-webkit-backdrop-filter: blur(18px) saturate(145%);
|
||||
transform:
|
||||
translate3d(var(--elastic-x), calc(var(--float-offset) + var(--press-offset) + var(--elastic-y)), 0)
|
||||
scale(var(--btn-scale));
|
||||
transition:
|
||||
transform 0.22s ease,
|
||||
box-shadow 0.22s ease,
|
||||
background 0.22s ease,
|
||||
opacity 0.18s ease,
|
||||
border-color 0.22s ease;
|
||||
animation: floatDock 3.8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.liquid-glass-surface::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 1px 1px 18px 1px;
|
||||
border-radius: inherit;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.05) 28%, transparent 68%);
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
transform:
|
||||
perspective(120px)
|
||||
rotateX(calc(var(--tilt-x) * 0.7))
|
||||
rotateY(calc(var(--tilt-y) * 0.7))
|
||||
translate3d(calc(var(--elastic-x) * 0.22), calc(var(--elastic-y) * 0.22), 0);
|
||||
transition: opacity 0.18s ease, transform 0.18s ease;
|
||||
}
|
||||
|
||||
.liquid-glass-surface::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: -1px;
|
||||
padding: 1.35px;
|
||||
border-radius: inherit;
|
||||
background:
|
||||
linear-gradient(135deg, rgba(255, 255, 255, 0.36), rgba(168, 222, 255, 0.22) 34%, rgba(96, 175, 255, 0.16) 66%, rgba(255, 255, 255, 0.28));
|
||||
opacity: 0.82;
|
||||
pointer-events: none;
|
||||
filter: url(#liquid-glass-distortion) blur(0.35px);
|
||||
transform:
|
||||
perspective(120px)
|
||||
rotateX(calc(var(--tilt-x) * 0.5))
|
||||
rotateY(calc(var(--tilt-y) * 0.5))
|
||||
translate3d(calc(var(--elastic-x) * 0.16), calc(var(--elastic-y) * 0.16), 0);
|
||||
-webkit-mask:
|
||||
linear-gradient(#000 0 0) content-box,
|
||||
linear-gradient(#000 0 0);
|
||||
-webkit-mask-composite: xor;
|
||||
mask:
|
||||
linear-gradient(#000 0 0) content-box,
|
||||
linear-gradient(#000 0 0);
|
||||
mask-composite: exclude;
|
||||
transition: opacity 0.18s ease, transform 0.18s ease;
|
||||
}
|
||||
|
||||
.liquid-glass-surface:hover {
|
||||
--btn-scale: 1.035;
|
||||
--press-offset: -1px;
|
||||
--glow-opacity: 0.32;
|
||||
background:
|
||||
radial-gradient(circle at var(--glow-x) var(--glow-y), rgba(255, 255, 255, 0.18), transparent 34%),
|
||||
radial-gradient(circle at 50% 118%, rgba(255, 255, 255, 0.1), transparent 30%),
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(128, 198, 255, 0.1)),
|
||||
rgba(8, 20, 38, 0.2);
|
||||
border-color: var(--hud-border-hover);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.2),
|
||||
inset 0 -1px 0 rgba(255, 255, 255, 0.08),
|
||||
0 18px 36px rgba(0, 0, 0, 0.24),
|
||||
0 0 28px rgba(145, 214, 255, 0.22);
|
||||
}
|
||||
|
||||
.liquid-glass-surface:hover::before {
|
||||
opacity: 0.62;
|
||||
transform: scale(1.01);
|
||||
}
|
||||
|
||||
.liquid-glass-surface:hover::after {
|
||||
opacity: 0.96;
|
||||
transform: scale(1.01);
|
||||
}
|
||||
|
||||
.liquid-glass-surface:active,
|
||||
.liquid-glass-surface.is-pressed {
|
||||
--btn-scale: 0.942;
|
||||
--press-offset: 2px;
|
||||
--glow-opacity: 0.2;
|
||||
background:
|
||||
radial-gradient(circle at var(--glow-x) var(--glow-y), rgba(255, 255, 255, 0.24), transparent 34%),
|
||||
radial-gradient(circle at 50% 118%, rgba(255, 255, 255, 0.14), transparent 30%),
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(146, 210, 255, 0.16)),
|
||||
rgba(10, 24, 44, 0.24);
|
||||
border-color: rgba(240, 249, 255, 0.58);
|
||||
box-shadow:
|
||||
inset 0 2px 10px rgba(0, 0, 0, 0.2),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.16),
|
||||
0 4px 10px rgba(0, 0, 0, 0.18),
|
||||
0 0 14px rgba(176, 226, 255, 0.18);
|
||||
}
|
||||
|
||||
.liquid-glass-surface:active::before,
|
||||
.liquid-glass-surface.is-pressed::before {
|
||||
opacity: 0.46;
|
||||
transform: translateY(2px) scale(0.985);
|
||||
}
|
||||
|
||||
.liquid-glass-surface:active::after,
|
||||
.liquid-glass-surface.is-pressed::after {
|
||||
opacity: 0.78;
|
||||
transform: scale(0.985);
|
||||
}
|
||||
|
||||
.liquid-glass-surface:active .icon,
|
||||
.liquid-glass-surface.is-pressed .icon {
|
||||
transform: translateY(1.5px);
|
||||
}
|
||||
|
||||
.liquid-glass-surface:active img,
|
||||
.liquid-glass-surface.is-pressed img,
|
||||
.liquid-glass-surface:active .material-symbols-rounded,
|
||||
.liquid-glass-surface.is-pressed .material-symbols-rounded {
|
||||
transform: translateY(1.5px);
|
||||
transition: transform 0.16s ease, opacity 0.16s ease;
|
||||
}
|
||||
|
||||
.liquid-glass-surface.active {
|
||||
background:
|
||||
radial-gradient(circle at var(--glow-x) var(--glow-y), rgba(255, 255, 255, 0.18), transparent 34%),
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(118, 200, 255, 0.14)),
|
||||
rgba(11, 34, 58, 0.26);
|
||||
border-color: var(--hud-border-active);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.22),
|
||||
inset 0 0 18px rgba(160, 220, 255, 0.14),
|
||||
0 18px 34px rgba(0, 0, 0, 0.24),
|
||||
0 0 30px rgba(145, 214, 255, 0.24);
|
||||
}
|
||||
|
||||
.earth-rotate-toggle .icon-play,
|
||||
.earth-rotate-toggle.is-stopped .icon-pause,
|
||||
.earth-layout-toggle .layout-collapse,
|
||||
.earth-layout-toggle.active .layout-expand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.earth-rotate-toggle.is-stopped .icon-play,
|
||||
.earth-layout-toggle.active .layout-collapse {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.earth-zoom-group:hover > .earth-zoom-toolbar,
|
||||
.earth-zoom-group:focus-within > .earth-zoom-toolbar,
|
||||
.earth-zoom-group.open > .earth-zoom-toolbar,
|
||||
.earth-info-group:hover > .earth-info-toolbar,
|
||||
.earth-info-group:focus-within > .earth-info-toolbar,
|
||||
.earth-info-group.open > .earth-info-toolbar {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
pointer-events: auto;
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
|
||||
.earth-zoom-group.force-closed > .earth-zoom-toolbar,
|
||||
.earth-info-group.force-closed > .earth-info-toolbar {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
transform: translate(-50%, 8px);
|
||||
}
|
||||
|
||||
.earth-zoom-group > .earth-zoom-toolbar,
|
||||
.earth-info-group > .earth-info-toolbar {
|
||||
top: auto;
|
||||
right: auto;
|
||||
left: 50%;
|
||||
bottom: calc(100% + 12px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.earth-info-toolbar .earth-toolbar-btn:nth-child(1) {
|
||||
animation-delay: 0.34s;
|
||||
}
|
||||
|
||||
.earth-info-toolbar .earth-toolbar-btn:nth-child(2) {
|
||||
animation-delay: 0.18s;
|
||||
}
|
||||
|
||||
.earth-info-toolbar .earth-toolbar-btn:nth-child(3) {
|
||||
animation-delay: 0.1s;
|
||||
}
|
||||
|
||||
.earth-info-toolbar .earth-toolbar-btn:nth-child(4) {
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.earth-zoom-toolbar .earth-zoom-btn,
|
||||
.earth-zoom-toolbar .earth-zoom-value {
|
||||
width: 42px;
|
||||
min-width: 42px;
|
||||
border-radius: 50%;
|
||||
color: #4db8ff;
|
||||
animation: floatDock 3.8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.earth-zoom-toolbar .earth-zoom-btn {
|
||||
height: 42px;
|
||||
}
|
||||
|
||||
.earth-zoom-toolbar .earth-zoom-value {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 42px;
|
||||
padding: 0;
|
||||
font-size: 0.68rem;
|
||||
letter-spacing: normal;
|
||||
animation-delay: 0.18s;
|
||||
}
|
||||
|
||||
.earth-zoom-toolbar .earth-zoom-btn:active,
|
||||
.earth-zoom-toolbar .earth-zoom-btn.is-pressed,
|
||||
.earth-zoom-toolbar .earth-zoom-value:active,
|
||||
.earth-zoom-toolbar .earth-zoom-value.is-pressed {
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.earth-zoom-toolbar .earth-zoom-btn:nth-child(1) {
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.earth-zoom-toolbar .earth-zoom-btn:nth-child(3) {
|
||||
animation-delay: 0.34s;
|
||||
}
|
||||
|
||||
.earth-zoom-toolbar .earth-toolbar-tooltip {
|
||||
bottom: calc(100% + 10px);
|
||||
}
|
||||
|
||||
.earth-zoom-toolbar .earth-toolbar-tooltip::after {
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
border: 6px solid transparent;
|
||||
border-top-color: rgba(77, 184, 255, 0.4);
|
||||
}
|
||||
|
||||
.earth-app.layout-expanded .earth-toolbar-group {
|
||||
bottom: 18px;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.earth-toolbar-btn .earth-toolbar-tooltip {
|
||||
position: absolute;
|
||||
bottom: 56px;
|
||||
left: 50%;
|
||||
transform: translateX(-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;
|
||||
}
|
||||
|
||||
.earth-toolbar-btn:hover .earth-toolbar-tooltip,
|
||||
.earth-toolbar-popover:hover > .earth-toolbar-btn .earth-toolbar-tooltip,
|
||||
.earth-toolbar-popover:focus-within > .earth-toolbar-btn .earth-toolbar-tooltip {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
bottom: 58px;
|
||||
}
|
||||
|
||||
.earth-toolbar-btn .earth-toolbar-tooltip::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
border: 6px solid transparent;
|
||||
border-top-color: rgba(77, 184, 255, 0.4);
|
||||
}
|
||||
@@ -14,14 +14,16 @@
|
||||
}
|
||||
</script>
|
||||
<link rel="stylesheet" href="css/base.css">
|
||||
<link rel="stylesheet" href="css/hud.css">
|
||||
<link rel="stylesheet" href="css/toolbar.css">
|
||||
<link rel="stylesheet" href="css/info-panel.css">
|
||||
<link rel="stylesheet" href="css/coordinates-display.css">
|
||||
<link rel="stylesheet" href="css/legend.css">
|
||||
<link rel="stylesheet" href="css/earth-stats.css">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,500,0,0">
|
||||
</head>
|
||||
<body>
|
||||
<svg aria-hidden="true" width="0" height="0" style="position:absolute; width:0; height:0; pointer-events:none;">
|
||||
<body class="earth-page">
|
||||
<svg class="earth-filters" aria-hidden="true" width="0" height="0">
|
||||
<defs>
|
||||
<filter id="liquid-glass-distortion" x="-20%" y="-20%" width="140%" height="140%">
|
||||
<feTurbulence type="fractalNoise" baseFrequency="0.012 0.02" numOctaves="2" seed="7" result="noise" />
|
||||
@@ -30,208 +32,208 @@
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
<div id="container">
|
||||
<div id="info-panel">
|
||||
<h1>智能星球计划</h1>
|
||||
<div id="container" class="earth-app">
|
||||
<div id="info-panel" class="hud-panel hud-panel-info">
|
||||
<h1 class="earth-app-title">智能星球计划</h1>
|
||||
<div class="subtitle">
|
||||
<span class="subtitle-main">现实层宇宙全息感知系统</span>
|
||||
<span class="subtitle-meta">卫星 · 海底光缆 · 算力基础设施</span>
|
||||
</div>
|
||||
|
||||
<div id="info-card" class="info-card" style="display: none;">
|
||||
<div id="info-card" class="info-card">
|
||||
<div class="info-card-header">
|
||||
<span class="info-card-icon" id="info-card-icon">🛰️</span>
|
||||
<h3 id="info-card-title">详情</h3>
|
||||
</div>
|
||||
<div id="info-card-content"></div>
|
||||
<div id="info-card-content" class="info-card-content"></div>
|
||||
</div>
|
||||
|
||||
<div id="error-message" class="error-message"></div>
|
||||
<div id="error-message" class="hud-error-message"></div>
|
||||
</div>
|
||||
|
||||
<div id="right-toolbar-group">
|
||||
<div id="control-toolbar">
|
||||
<div class="toolbar-items">
|
||||
<button id="search-action" class="toolbar-btn floating-btn liquid-glass-surface" title="搜索功能（待开发）">
|
||||
<div id="right-toolbar-group" class="earth-toolbar-group">
|
||||
<div id="control-toolbar" class="earth-toolbar">
|
||||
<div class="earth-toolbar-items">
|
||||
<button id="search-action" class="floating-btn liquid-glass-surface earth-toolbar-btn" title="搜索功能（待开发）">
|
||||
<span class="icon" aria-hidden="true">
|
||||
<span class="material-symbols-rounded">search</span>
|
||||
</span>
|
||||
<span class="tooltip">搜索功能（待开发）</span>
|
||||
<span class="tooltip earth-toolbar-tooltip">搜索功能（待开发）</span>
|
||||
</button>
|
||||
<button id="rotate-toggle" class="toolbar-btn floating-btn liquid-glass-surface" title="自动旋转">
|
||||
<button id="rotate-toggle" class="floating-btn liquid-glass-surface earth-toolbar-btn earth-rotate-toggle" title="自动旋转">
|
||||
<span class="icon rotate-icon icon-pause" aria-hidden="true">
|
||||
<span class="material-symbols-rounded">pause</span>
|
||||
</span>
|
||||
<span class="icon rotate-icon icon-play" aria-hidden="true">
|
||||
<span class="material-symbols-rounded">play_arrow</span>
|
||||
</span>
|
||||
<span class="tooltip">自动旋转</span>
|
||||
<span class="tooltip earth-toolbar-tooltip">自动旋转</span>
|
||||
</button>
|
||||
<div id="info-control-group" class="floating-popover-group">
|
||||
<button id="info-trigger" class="toolbar-btn floating-btn liquid-glass-surface" title="显示控制">
|
||||
<div id="info-control-group" class="earth-toolbar-popover earth-info-group">
|
||||
<button id="info-trigger" class="floating-btn liquid-glass-surface earth-toolbar-btn" title="显示控制">
|
||||
<span class="icon" aria-hidden="true">
|
||||
<span class="material-symbols-rounded">info</span>
|
||||
</span>
|
||||
<span class="tooltip">显示控制</span>
|
||||
<span class="tooltip earth-toolbar-tooltip">显示控制</span>
|
||||
</button>
|
||||
<div id="info-toolbar" class="stack-toolbar">
|
||||
<button id="toggle-terrain" class="toolbar-btn floating-btn liquid-glass-surface" title="显示/隐藏地形">
|
||||
<div id="info-toolbar" class="earth-stack-toolbar earth-info-toolbar">
|
||||
<button id="toggle-terrain" class="floating-btn liquid-glass-surface earth-toolbar-btn" title="显示/隐藏地形">
|
||||
<span class="icon" aria-hidden="true">
|
||||
<span class="material-symbols-rounded">terrain</span>
|
||||
</span>
|
||||
<span class="tooltip">显示/隐藏地形</span>
|
||||
<span class="tooltip earth-toolbar-tooltip">显示/隐藏地形</span>
|
||||
</button>
|
||||
<button id="toggle-trails" class="toolbar-btn floating-btn liquid-glass-surface active" title="显示/隐藏轨迹">
|
||||
<button id="toggle-trails" class="floating-btn liquid-glass-surface active earth-toolbar-btn" title="显示/隐藏轨迹">
|
||||
<span class="icon" aria-hidden="true">
|
||||
<span class="material-symbols-rounded">timeline</span>
|
||||
</span>
|
||||
<span class="tooltip">隐藏轨迹</span>
|
||||
<span class="tooltip earth-toolbar-tooltip">隐藏轨迹</span>
|
||||
</button>
|
||||
<button id="toggle-satellites" class="toolbar-btn floating-btn liquid-glass-surface" title="显示/隐藏卫星">
|
||||
<button id="toggle-satellites" class="floating-btn liquid-glass-surface earth-toolbar-btn" title="显示/隐藏卫星">
|
||||
<span class="icon" aria-hidden="true">
|
||||
<span class="material-symbols-rounded">satellite_alt</span>
|
||||
</span>
|
||||
<span class="tooltip">显示卫星</span>
|
||||
<span class="tooltip earth-toolbar-tooltip">显示卫星</span>
|
||||
</button>
|
||||
<button id="toggle-bgp" class="toolbar-btn floating-btn liquid-glass-surface active" title="显示/隐藏BGP观测">
|
||||
<button id="toggle-bgp" class="floating-btn liquid-glass-surface active earth-toolbar-btn" title="显示/隐藏BGP观测">
|
||||
<span class="icon" aria-hidden="true">
|
||||
<span class="material-symbols-rounded">radar</span>
|
||||
</span>
|
||||
<span class="tooltip">隐藏BGP观测</span>
|
||||
<span class="tooltip earth-toolbar-tooltip">隐藏BGP观测</span>
|
||||
</button>
|
||||
<button id="toggle-cables" class="toolbar-btn floating-btn liquid-glass-surface active" title="显示/隐藏线缆">
|
||||
<button id="toggle-cables" class="floating-btn liquid-glass-surface active earth-toolbar-btn" title="显示/隐藏线缆">
|
||||
<span class="icon" aria-hidden="true">
|
||||
<span class="material-symbols-rounded">cable</span>
|
||||
</span>
|
||||
<span class="tooltip">隐藏线缆</span>
|
||||
<span class="tooltip earth-toolbar-tooltip">隐藏线缆</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<button id="reload-data" class="toolbar-btn floating-btn liquid-glass-surface" title="重新加载数据">
|
||||
<button id="reload-data" class="floating-btn liquid-glass-surface earth-toolbar-btn" title="重新加载数据">
|
||||
<span class="icon" aria-hidden="true">
|
||||
<span class="material-symbols-rounded">refresh</span>
|
||||
</span>
|
||||
<span class="tooltip">重新加载数据</span>
|
||||
<span class="tooltip earth-toolbar-tooltip">重新加载数据</span>
|
||||
</button>
|
||||
<div id="zoom-control-group" class="floating-popover-group">
|
||||
<button id="zoom-trigger" class="toolbar-btn floating-btn liquid-glass-surface" title="缩放控制">
|
||||
<div id="zoom-control-group" class="earth-toolbar-popover earth-zoom-group">
|
||||
<button id="zoom-trigger" class="floating-btn liquid-glass-surface earth-toolbar-btn" title="缩放控制">
|
||||
<span class="icon" aria-hidden="true">
|
||||
<span class="material-symbols-rounded">zoom_in</span>
|
||||
</span>
|
||||
<span class="tooltip">缩放控制</span>
|
||||
<span class="tooltip earth-toolbar-tooltip">缩放控制</span>
|
||||
</button>
|
||||
<div id="zoom-toolbar" class="stack-toolbar">
|
||||
<button id="zoom-in" class="zoom-btn liquid-glass-surface" title="放大">+<span class="tooltip">放大</span></button>
|
||||
<span id="zoom-value" class="zoom-percent liquid-glass-surface" title="重置缩放到100%">100%<span class="tooltip">重置缩放到100%</span></span>
|
||||
<button id="zoom-out" class="zoom-btn liquid-glass-surface" title="缩小">−<span class="tooltip">缩小</span></button>
|
||||
<div id="zoom-toolbar" class="earth-stack-toolbar earth-zoom-toolbar">
|
||||
<button id="zoom-in" class="liquid-glass-surface earth-zoom-btn" title="放大">+<span class="tooltip earth-toolbar-tooltip">放大</span></button>
|
||||
<span id="zoom-value" class="liquid-glass-surface earth-zoom-value" title="重置缩放到100%">100%<span class="tooltip earth-toolbar-tooltip">重置缩放到100%</span></span>
|
||||
<button id="zoom-out" class="liquid-glass-surface earth-zoom-btn" title="缩小">−<span class="tooltip earth-toolbar-tooltip">缩小</span></button>
|
||||
</div>
|
||||
</div>
|
||||
<button id="reset-view" class="toolbar-btn floating-btn liquid-glass-surface" title="重置视角">
|
||||
<button id="reset-view" class="floating-btn liquid-glass-surface earth-toolbar-btn" title="重置视角">
|
||||
<span class="icon" aria-hidden="true">
|
||||
<span class="material-symbols-rounded">my_location</span>
|
||||
</span>
|
||||
<span class="tooltip">重置视角</span>
|
||||
<span class="tooltip earth-toolbar-tooltip">重置视角</span>
|
||||
</button>
|
||||
<button id="layout-toggle" class="toolbar-btn floating-btn liquid-glass-surface" title="最大化布局">
|
||||
<button id="layout-toggle" class="floating-btn liquid-glass-surface earth-toolbar-btn earth-layout-toggle" title="最大化布局">
|
||||
<span class="icon layout-icon layout-expand" aria-hidden="true">
|
||||
<span class="material-symbols-rounded">open_in_full</span>
|
||||
</span>
|
||||
<span class="icon layout-icon layout-collapse" aria-hidden="true">
|
||||
<span class="material-symbols-rounded">close_fullscreen</span>
|
||||
</span>
|
||||
<span class="tooltip">最大化布局</span>
|
||||
<span class="tooltip earth-toolbar-tooltip">最大化布局</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="coordinates-display">
|
||||
<h3 style="color:#4db8ff; margin-bottom:8px; font-size:1.1rem;">坐标信息</h3>
|
||||
<div class="coord-item">
|
||||
<span class="coord-label">经度:</span>
|
||||
<span id="longitude-value" class="coord-value">0.00°</span>
|
||||
<div id="coordinates-display" class="hud-panel hud-panel-coordinates">
|
||||
<h3 class="hud-panel-title">坐标信息</h3>
|
||||
<div class="coord-item hud-panel-row">
|
||||
<span class="coord-label hud-panel-label">经度:</span>
|
||||
<span id="longitude-value" class="coord-value hud-panel-value">0.00°</span>
|
||||
</div>
|
||||
<div class="coord-item">
|
||||
<span class="coord-label">纬度:</span>
|
||||
<span id="latitude-value" class="coord-value">0.00°</span>
|
||||
<div class="coord-item hud-panel-row">
|
||||
<span class="coord-label hud-panel-label">纬度:</span>
|
||||
<span id="latitude-value" class="coord-value hud-panel-value">0.00°</span>
|
||||
</div>
|
||||
<div id="zoom-level">缩放: 1.0x</div>
|
||||
<div class="mouse-coords" id="mouse-coords">鼠标位置: 无</div>
|
||||
<div id="zoom-level" class="earth-zoom-level">缩放: 1.0x</div>
|
||||
<div class="earth-mouse-coords" id="mouse-coords">鼠标位置: 无</div>
|
||||
</div>
|
||||
|
||||
<div id="legend">
|
||||
<h3 class="legend-title">线缆图例</h3>
|
||||
<div id="legend" class="hud-panel hud-panel-legend">
|
||||
<h3 class="legend-title hud-panel-title">线缆图例</h3>
|
||||
<div class="legend-list">
|
||||
<div class="legend-item">
|
||||
<div class="legend-color" style="background-color: #ff4444;"></div>
|
||||
<div class="legend-color legend-color-americas"></div>
|
||||
<span>Americas II</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<div class="legend-color" style="background-color: #44ff44;"></div>
|
||||
<div class="legend-color legend-color-au-a"></div>
|
||||
<span>AU Aleutian A</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<div class="legend-color" style="background-color: #4444ff;"></div>
|
||||
<div class="legend-color legend-color-au-b"></div>
|
||||
<span>AU Aleutian B</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<div class="legend-color" style="background-color: #ffff44;"></div>
|
||||
<div class="legend-color legend-color-default"></div>
|
||||
<span>其他电缆</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="earth-stats">
|
||||
<h3 style="color:#4db8ff; margin-bottom:10px; font-size:1.1rem;">地球信息</h3>
|
||||
<div class="stats-item">
|
||||
<span class="stats-label">电缆系统:</span>
|
||||
<span class="stats-value" id="cable-count">0个</span>
|
||||
<div id="earth-stats" class="hud-panel hud-panel-stats">
|
||||
<h3 class="hud-panel-title">地球信息</h3>
|
||||
<div class="stats-item hud-panel-row">
|
||||
<span class="stats-label hud-panel-label">电缆系统:</span>
|
||||
<span class="stats-value hud-panel-value" id="cable-count">0个</span>
|
||||
</div>
|
||||
<div class="stats-item">
|
||||
<span class="stats-label">状态:</span>
|
||||
<span class="stats-value" id="cable-status-summary">-</span>
|
||||
<div class="stats-item hud-panel-row">
|
||||
<span class="stats-label hud-panel-label">状态:</span>
|
||||
<span class="stats-value hud-panel-value" id="cable-status-summary">-</span>
|
||||
</div>
|
||||
<div class="stats-item">
|
||||
<span class="stats-label">登陆点:</span>
|
||||
<span class="stats-value" id="landing-point-count">0个</span>
|
||||
<div class="stats-item hud-panel-row">
|
||||
<span class="stats-label hud-panel-label">登陆点:</span>
|
||||
<span class="stats-value hud-panel-value" id="landing-point-count">0个</span>
|
||||
</div>
|
||||
<div class="stats-item">
|
||||
<span class="stats-label">地形:</span>
|
||||
<span class="stats-value" id="terrain-status">开启</span>
|
||||
<div class="stats-item hud-panel-row">
|
||||
<span class="stats-label hud-panel-label">地形:</span>
|
||||
<span class="stats-value hud-panel-value" id="terrain-status">开启</span>
|
||||
</div>
|
||||
<div class="stats-item">
|
||||
<span class="stats-label">卫星:</span>
|
||||
<span class="stats-value" id="satellite-count">0 颗</span>
|
||||
<div class="stats-item hud-panel-row">
|
||||
<span class="stats-label hud-panel-label">卫星:</span>
|
||||
<span class="stats-value hud-panel-value" id="satellite-count">0 颗</span>
|
||||
</div>
|
||||
<div class="stats-item">
|
||||
<span class="stats-label">BGP事件:</span>
|
||||
<span class="stats-value" id="bgp-anomaly-count">0 条</span>
|
||||
<div class="stats-item hud-panel-row">
|
||||
<span class="stats-label hud-panel-label">BGP事件:</span>
|
||||
<span class="stats-value hud-panel-value" id="bgp-anomaly-count">0 条</span>
|
||||
</div>
|
||||
<div class="stats-item">
|
||||
<span class="stats-label">观测站:</span>
|
||||
<span class="stats-value" id="bgp-collector-count">0 个</span>
|
||||
<div class="stats-item hud-panel-row">
|
||||
<span class="stats-label hud-panel-label">观测站:</span>
|
||||
<span class="stats-value hud-panel-value" id="bgp-collector-count">0 个</span>
|
||||
</div>
|
||||
<div class="stats-item">
|
||||
<span class="stats-label">BGP态势:</span>
|
||||
<span class="stats-value" id="bgp-status-summary">暂无观测数据</span>
|
||||
<div class="stats-item hud-panel-row">
|
||||
<span class="stats-label hud-panel-label">BGP态势:</span>
|
||||
<span class="stats-value hud-panel-value" id="bgp-status-summary">暂无观测数据</span>
|
||||
</div>
|
||||
<div class="stats-item">
|
||||
<span class="stats-label">视角距离:</span>
|
||||
<span class="stats-value" id="camera-distance">300 km</span>
|
||||
<div class="stats-item hud-panel-row">
|
||||
<span class="stats-label hud-panel-label">视角距离:</span>
|
||||
<span class="stats-value hud-panel-value" id="camera-distance">300 km</span>
|
||||
</div>
|
||||
<div class="stats-item">
|
||||
<span class="stats-label">纹理质量:</span>
|
||||
<span class="stats-value" id="texture-quality">8K 卫星图</span>
|
||||
<div class="stats-item hud-panel-row">
|
||||
<span class="stats-label hud-panel-label">纹理质量:</span>
|
||||
<span class="stats-value hud-panel-value" id="texture-quality">8K 卫星图</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="loading">
|
||||
<div id="loading-spinner"></div>
|
||||
<div id="loading-title">正在初始化全球态势数据...</div>
|
||||
<div id="loading-subtitle" style="font-size:0.9rem; margin-top:10px; color:#aaa;">同步卫星、海底光缆、登陆点与BGP态势数据</div>
|
||||
<div id="loading" class="earth-loading">
|
||||
<div id="loading-spinner" class="earth-loading-spinner"></div>
|
||||
<div id="loading-title" class="earth-loading-title earth-loading-text">正在初始化全球态势数据...</div>
|
||||
<div id="loading-subtitle" class="earth-loading-subtitle">同步卫星、海底光缆、登陆点与BGP态势数据</div>
|
||||
</div>
|
||||
<div id="status-message" class="status-message" style="display: none;"></div>
|
||||
<div id="tooltip" class="tooltip"></div>
|
||||
<div id="status-message" class="earth-status-message"></div>
|
||||
<div id="tooltip" class="earth-tooltip"></div>
|
||||
</div>
|
||||
|
||||
<script type="module" src="js/main.js"></script>
|
||||
|
||||
@@ -12,6 +12,13 @@ export const CONFIG = {
|
||||
dragRotationScaleMax: 2.0,
|
||||
};
|
||||
|
||||
export const HUD_CONFIG = {
|
||||
scaleReferenceWidth: 1920,
|
||||
scaleReferenceHeight: 1080,
|
||||
minScale: 0.7,
|
||||
maxScale: 1,
|
||||
};
|
||||
|
||||
// Earth coordinate constants
|
||||
export const EARTH_CONFIG = {
|
||||
tilt: 23.5, // earth tilt angle (degrees)
|
||||
|
||||
6
frontend/public/earth/js/controls.js
vendored
6
frontend/public/earth/js/controls.js
vendored
@@ -76,7 +76,7 @@ function setFloatingMenuOpen(group, shouldOpen) {
|
||||
}
|
||||
|
||||
function setButtonTooltip(button, text) {
|
||||
const tooltip = button?.querySelector(".tooltip");
|
||||
const tooltip = button?.querySelector(".earth-toolbar-tooltip");
|
||||
if (tooltip) {
|
||||
tooltip.textContent = text;
|
||||
}
|
||||
@@ -566,7 +566,7 @@ function updateRotateUI() {
|
||||
if (btn) {
|
||||
btn.classList.toggle("active", autoRotate);
|
||||
btn.classList.toggle("is-stopped", !autoRotate);
|
||||
const tooltip = btn.querySelector(".tooltip");
|
||||
const tooltip = btn.querySelector(".earth-toolbar-tooltip");
|
||||
if (tooltip) tooltip.textContent = autoRotate ? "暂停旋转" : "开始旋转";
|
||||
}
|
||||
}
|
||||
@@ -599,7 +599,7 @@ function updateLayoutUI(container) {
|
||||
const btn = document.getElementById("layout-toggle");
|
||||
if (btn) {
|
||||
btn.classList.toggle("active", layoutExpanded);
|
||||
const tooltip = btn.querySelector(".tooltip");
|
||||
const tooltip = btn.querySelector(".earth-toolbar-tooltip");
|
||||
const nextLabel = layoutExpanded ? "恢复布局" : "最大化布局";
|
||||
btn.title = nextLabel;
|
||||
if (tooltip) tooltip.textContent = nextLabel;
|
||||
|
||||
@@ -61,7 +61,7 @@ function renderLegend(mode) {
|
||||
.join("");
|
||||
|
||||
legend.innerHTML = `
|
||||
<h3 class="legend-title">${config.title}</h3>
|
||||
<h3 class="legend-title hud-panel-title">${config.title}</h3>
|
||||
<div class="legend-list">${itemsHtml}</div>
|
||||
`;
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import * as THREE from "three";
|
||||
import { createNoise3D } from "simplex-noise";
|
||||
|
||||
import { CONFIG, CABLE_CONFIG, CABLE_STATE } from "./constants.js";
|
||||
import { CONFIG, HUD_CONFIG, CABLE_CONFIG, CABLE_STATE } from "./constants.js";
|
||||
import { vector3ToLatLon, screenToEarthCoords } from "./utils.js";
|
||||
import {
|
||||
showStatusMessage,
|
||||
@@ -174,6 +174,7 @@ const cleanupFns = [];
|
||||
const DRAG_SMOOTHING_FACTOR = 0.18;
|
||||
const INERTIA_DAMPING = 0.92;
|
||||
const INERTIA_MIN_VELOCITY = 0.00008;
|
||||
const ACTIVE_BGP_TOOLTIP_TEXT = "隐藏BGP观测";
|
||||
const HUD_INTERACTIVE_SELECTORS = [
|
||||
"#info-panel",
|
||||
"#info-panel *",
|
||||
@@ -195,6 +196,17 @@ function bindListener(target, eventName, handler, options) {
|
||||
);
|
||||
}
|
||||
|
||||
function getViewportAspect() {
|
||||
return window.innerWidth / window.innerHeight;
|
||||
}
|
||||
|
||||
function syncRendererViewport() {
|
||||
if (!camera || !renderer) return;
|
||||
camera.aspect = getViewportAspect();
|
||||
camera.updateProjectionMatrix();
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
}
|
||||
|
||||
function isEventOnHud(event) {
|
||||
const target = event?.target;
|
||||
if (!(target instanceof Element)) return false;
|
||||
@@ -520,6 +532,47 @@ function showBGPCollectorInfo(marker) {
|
||||
});
|
||||
}
|
||||
|
||||
function getBGPStatusText(bgpResult) {
|
||||
if (bgpResult.totalCount > 0) {
|
||||
return `${bgpResult.totalCount} 起活跃事件`;
|
||||
}
|
||||
if (bgpResult.anomalyCount > 0) {
|
||||
return `${bgpResult.anomalyCount} 条活跃异常`;
|
||||
}
|
||||
return "当前无活跃事件";
|
||||
}
|
||||
|
||||
function updateBGPHud(bgpResult) {
|
||||
const bgpBtn = document.getElementById("toggle-bgp");
|
||||
if (bgpBtn) {
|
||||
bgpBtn.classList.add("active");
|
||||
const tooltip = bgpBtn.querySelector(".earth-toolbar-tooltip");
|
||||
if (tooltip) {
|
||||
tooltip.textContent = ACTIVE_BGP_TOOLTIP_TEXT;
|
||||
}
|
||||
}
|
||||
|
||||
const bgpCountEl = document.getElementById("bgp-anomaly-count");
|
||||
if (bgpCountEl) {
|
||||
bgpCountEl.textContent = `${bgpResult.totalCount} 起`;
|
||||
}
|
||||
|
||||
const bgpCollectorEl = document.getElementById("bgp-collector-count");
|
||||
if (bgpCollectorEl) {
|
||||
bgpCollectorEl.textContent = `${bgpResult.collectorCount} 个`;
|
||||
}
|
||||
|
||||
const bgpStatusEl = document.getElementById("bgp-status-summary");
|
||||
if (bgpStatusEl) {
|
||||
bgpStatusEl.textContent = getBGPStatusText(bgpResult);
|
||||
}
|
||||
}
|
||||
|
||||
function clearSelectionAndInfo() {
|
||||
clearLockedObject();
|
||||
hideInfoCard();
|
||||
}
|
||||
|
||||
function getBGPRelatedCableNames(marker) {
|
||||
const items = Array.isArray(marker?.userData?.related_cables)
|
||||
? marker.userData.related_cables
|
||||
@@ -655,7 +708,7 @@ function updateSatelliteToggleUi(enabled, satelliteCount = getSatelliteCount())
|
||||
const satBtn = document.getElementById("toggle-satellites");
|
||||
if (satBtn) {
|
||||
satBtn.classList.toggle("active", enabled);
|
||||
const tooltip = satBtn.querySelector(".tooltip");
|
||||
const tooltip = satBtn.querySelector(".earth-toolbar-tooltip");
|
||||
if (tooltip) tooltip.textContent = enabled ? "隐藏卫星" : "显示卫星";
|
||||
}
|
||||
|
||||
@@ -669,7 +722,7 @@ function updateCableToggleUi(enabled) {
|
||||
const cableBtn = document.getElementById("toggle-cables");
|
||||
if (cableBtn) {
|
||||
cableBtn.classList.toggle("active", enabled);
|
||||
const tooltip = cableBtn.querySelector(".tooltip");
|
||||
const tooltip = cableBtn.querySelector(".earth-toolbar-tooltip");
|
||||
if (tooltip) tooltip.textContent = enabled ? "隐藏线缆" : "显示线缆";
|
||||
}
|
||||
|
||||
@@ -799,11 +852,12 @@ export function init() {
|
||||
destroyed = false;
|
||||
initialized = true;
|
||||
simplex = createNoise3D();
|
||||
updateHudScale();
|
||||
|
||||
scene = new THREE.Scene();
|
||||
camera = new THREE.PerspectiveCamera(
|
||||
75,
|
||||
window.innerWidth / window.innerHeight,
|
||||
getViewportAspect(),
|
||||
0.1,
|
||||
1000,
|
||||
);
|
||||
@@ -815,7 +869,7 @@ export function init() {
|
||||
alpha: false,
|
||||
powerPreference: "high-performance",
|
||||
});
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
syncRendererViewport();
|
||||
renderer.setClearColor(0x0a0a1a, 1);
|
||||
renderer.setPixelRatio(window.devicePixelRatio);
|
||||
|
||||
@@ -898,8 +952,7 @@ async function loadData(showWhiteSphere = false) {
|
||||
: "同步卫星、海底光缆、登陆点与BGP态势数据",
|
||||
);
|
||||
setLoading(true);
|
||||
clearLockedObject();
|
||||
hideInfoCard();
|
||||
clearSelectionAndInfo();
|
||||
|
||||
if (showWhiteSphere && earth.material) {
|
||||
earthTexture = earth.material.map;
|
||||
@@ -915,29 +968,7 @@ async function loadData(showWhiteSphere = false) {
|
||||
clearBGPData(earth);
|
||||
const bgpResult = await loadBGPAnomalies(scene, earth);
|
||||
toggleBGP(true);
|
||||
const bgpBtn = document.getElementById("toggle-bgp");
|
||||
if (bgpBtn) {
|
||||
bgpBtn.classList.add("active");
|
||||
const tooltip = bgpBtn.querySelector(".tooltip");
|
||||
if (tooltip) tooltip.textContent = "隐藏BGP观测";
|
||||
}
|
||||
const bgpCountEl = document.getElementById("bgp-anomaly-count");
|
||||
if (bgpCountEl) {
|
||||
bgpCountEl.textContent = `${bgpResult.totalCount} 起`;
|
||||
}
|
||||
const bgpCollectorEl = document.getElementById("bgp-collector-count");
|
||||
if (bgpCollectorEl) {
|
||||
bgpCollectorEl.textContent = `${bgpResult.collectorCount} 个`;
|
||||
}
|
||||
const bgpStatusEl = document.getElementById("bgp-status-summary");
|
||||
if (bgpStatusEl) {
|
||||
bgpStatusEl.textContent =
|
||||
bgpResult.totalCount > 0
|
||||
? `${bgpResult.totalCount} 起活跃事件`
|
||||
: bgpResult.anomalyCount > 0
|
||||
? `${bgpResult.anomalyCount} 条活跃异常`
|
||||
: "当前无活跃事件";
|
||||
}
|
||||
updateBGPHud(bgpResult);
|
||||
return bgpResult;
|
||||
})(),
|
||||
]);
|
||||
@@ -997,8 +1028,7 @@ export async function setCablesEnabled(enabled) {
|
||||
}
|
||||
|
||||
if (!enabled) {
|
||||
clearLockedObject();
|
||||
hideInfoCard();
|
||||
clearSelectionAndInfo();
|
||||
disableCables();
|
||||
showStatusMessage("线缆已隐藏", "info");
|
||||
return 0;
|
||||
@@ -1032,8 +1062,7 @@ export async function setSatellitesEnabled(enabled) {
|
||||
}
|
||||
|
||||
if (!enabled) {
|
||||
clearLockedObject();
|
||||
hideInfoCard();
|
||||
clearSelectionAndInfo();
|
||||
disableSatellites();
|
||||
return 0;
|
||||
}
|
||||
@@ -1078,11 +1107,24 @@ function setupEventListeners() {
|
||||
bindListener(renderer.domElement, "click", handleClick);
|
||||
}
|
||||
|
||||
function updateHudScale() {
|
||||
const widthScale = window.innerWidth / HUD_CONFIG.scaleReferenceWidth;
|
||||
const heightScale = window.innerHeight / HUD_CONFIG.scaleReferenceHeight;
|
||||
const nextScale = THREE.MathUtils.clamp(
|
||||
Math.min(widthScale, heightScale),
|
||||
HUD_CONFIG.minScale,
|
||||
HUD_CONFIG.maxScale,
|
||||
);
|
||||
|
||||
document.documentElement.style.setProperty(
|
||||
"--hud-scale",
|
||||
nextScale.toFixed(3),
|
||||
);
|
||||
}
|
||||
|
||||
function onWindowResize() {
|
||||
if (!camera || !renderer) return;
|
||||
camera.aspect = window.innerWidth / window.innerHeight;
|
||||
camera.updateProjectionMatrix();
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
updateHudScale();
|
||||
syncRendererViewport();
|
||||
}
|
||||
|
||||
function getFrontFacingCables(cableLines) {
|
||||
|
||||
@@ -3,12 +3,18 @@
|
||||
let statusTimeoutId = null;
|
||||
let statusHideTimeoutId = null;
|
||||
let statusReplayTimeoutId = null;
|
||||
const STATUS_BASE_CLASS = "earth-status-message";
|
||||
|
||||
// Show status message
|
||||
export function showStatusMessage(message, type = "info") {
|
||||
const statusEl = document.getElementById("status-message");
|
||||
if (!statusEl) return;
|
||||
function getElement(id) {
|
||||
return document.getElementById(id);
|
||||
}
|
||||
|
||||
function setElementDisplay(element, visible, displayValue = "block") {
|
||||
if (!element) return;
|
||||
element.style.display = visible ? displayValue : "none";
|
||||
}
|
||||
|
||||
function clearStatusTimers() {
|
||||
if (statusTimeoutId) {
|
||||
clearTimeout(statusTimeoutId);
|
||||
statusTimeoutId = null;
|
||||
@@ -23,18 +29,26 @@ export function showStatusMessage(message, type = "info") {
|
||||
clearTimeout(statusReplayTimeoutId);
|
||||
statusReplayTimeoutId = null;
|
||||
}
|
||||
}
|
||||
|
||||
// Show status message
|
||||
export function showStatusMessage(message, type = "info") {
|
||||
const statusEl = getElement("status-message");
|
||||
if (!statusEl) return;
|
||||
|
||||
clearStatusTimers();
|
||||
|
||||
const startShow = () => {
|
||||
statusEl.textContent = message;
|
||||
statusEl.className = `status-message ${type}`;
|
||||
statusEl.style.display = "block";
|
||||
statusEl.className = `${STATUS_BASE_CLASS} ${type}`;
|
||||
setElementDisplay(statusEl, true);
|
||||
statusEl.offsetHeight;
|
||||
statusEl.classList.add("visible");
|
||||
|
||||
statusTimeoutId = setTimeout(() => {
|
||||
statusEl.classList.remove("visible");
|
||||
statusHideTimeoutId = setTimeout(() => {
|
||||
statusEl.style.display = "none";
|
||||
setElementDisplay(statusEl, false);
|
||||
statusEl.textContent = "";
|
||||
statusHideTimeoutId = null;
|
||||
}, 280);
|
||||
@@ -56,9 +70,9 @@ export function showStatusMessage(message, type = "info") {
|
||||
|
||||
// Update coordinates display
|
||||
export function updateCoordinatesDisplay(lat, lon, alt = 0) {
|
||||
const longitudeEl = document.getElementById("longitude-value");
|
||||
const latitudeEl = document.getElementById("latitude-value");
|
||||
const mouseCoordsEl = document.getElementById("mouse-coords");
|
||||
const longitudeEl = getElement("longitude-value");
|
||||
const latitudeEl = getElement("latitude-value");
|
||||
const mouseCoordsEl = getElement("mouse-coords");
|
||||
|
||||
if (longitudeEl) longitudeEl.textContent = lon.toFixed(2) + "°";
|
||||
if (latitudeEl) latitudeEl.textContent = lat.toFixed(2) + "°";
|
||||
@@ -70,10 +84,10 @@ export function updateCoordinatesDisplay(lat, lon, alt = 0) {
|
||||
// Update zoom display
|
||||
export function updateZoomDisplay(zoomLevel, distance) {
|
||||
const percent = Math.round(zoomLevel * 100);
|
||||
const zoomValueEl = document.getElementById("zoom-value");
|
||||
const zoomLevelEl = document.getElementById("zoom-level");
|
||||
const slider = document.getElementById("zoom-slider");
|
||||
const cameraDistanceEl = document.getElementById("camera-distance");
|
||||
const zoomValueEl = getElement("zoom-value");
|
||||
const zoomLevelEl = getElement("zoom-level");
|
||||
const slider = getElement("zoom-slider");
|
||||
const cameraDistanceEl = getElement("camera-distance");
|
||||
|
||||
if (zoomValueEl) zoomValueEl.textContent = percent + "%";
|
||||
if (zoomLevelEl) zoomLevelEl.textContent = "缩放: " + percent + "%";
|
||||
@@ -83,13 +97,13 @@ export function updateZoomDisplay(zoomLevel, distance) {
|
||||
|
||||
// Update earth stats
|
||||
export function updateEarthStats(stats) {
|
||||
const cableCountEl = document.getElementById("cable-count");
|
||||
const landingPointCountEl = document.getElementById("landing-point-count");
|
||||
const bgpAnomalyCountEl = document.getElementById("bgp-anomaly-count");
|
||||
const bgpCollectorCountEl = document.getElementById("bgp-collector-count");
|
||||
const bgpStatusSummaryEl = document.getElementById("bgp-status-summary");
|
||||
const terrainStatusEl = document.getElementById("terrain-status");
|
||||
const textureQualityEl = document.getElementById("texture-quality");
|
||||
const cableCountEl = getElement("cable-count");
|
||||
const landingPointCountEl = getElement("landing-point-count");
|
||||
const bgpAnomalyCountEl = getElement("bgp-anomaly-count");
|
||||
const bgpCollectorCountEl = getElement("bgp-collector-count");
|
||||
const bgpStatusSummaryEl = getElement("bgp-status-summary");
|
||||
const terrainStatusEl = getElement("terrain-status");
|
||||
const textureQualityEl = getElement("texture-quality");
|
||||
|
||||
if (cableCountEl) cableCountEl.textContent = stats.cableCount || 0;
|
||||
if (landingPointCountEl)
|
||||
@@ -108,14 +122,14 @@ export function updateEarthStats(stats) {
|
||||
|
||||
// Show/hide loading
|
||||
export function setLoading(loading) {
|
||||
const loadingEl = document.getElementById("loading");
|
||||
const loadingEl = getElement("loading");
|
||||
if (!loadingEl) return;
|
||||
loadingEl.style.display = loading ? "block" : "none";
|
||||
setElementDisplay(loadingEl, loading);
|
||||
}
|
||||
|
||||
export function setLoadingMessage(title, subtitle = "") {
|
||||
const titleEl = document.getElementById("loading-title");
|
||||
const subtitleEl = document.getElementById("loading-subtitle");
|
||||
const titleEl = getElement("loading-title");
|
||||
const subtitleEl = getElement("loading-subtitle");
|
||||
|
||||
if (titleEl) {
|
||||
titleEl.textContent = title;
|
||||
@@ -128,48 +142,46 @@ export function setLoadingMessage(title, subtitle = "") {
|
||||
|
||||
// Show tooltip
|
||||
export function showTooltip(x, y, content) {
|
||||
const tooltip = document.getElementById("tooltip");
|
||||
const tooltip = getElement("tooltip");
|
||||
if (!tooltip) return;
|
||||
tooltip.innerHTML = content;
|
||||
tooltip.style.left = x + "px";
|
||||
tooltip.style.top = y + "px";
|
||||
tooltip.style.display = "block";
|
||||
setElementDisplay(tooltip, true);
|
||||
}
|
||||
|
||||
// Hide tooltip
|
||||
export function hideTooltip() {
|
||||
const tooltip = document.getElementById("tooltip");
|
||||
const tooltip = getElement("tooltip");
|
||||
if (tooltip) {
|
||||
tooltip.style.display = "none";
|
||||
setElementDisplay(tooltip, false);
|
||||
}
|
||||
}
|
||||
|
||||
// Show error message
|
||||
export function showError(message) {
|
||||
const errorEl = document.getElementById("error-message");
|
||||
const errorEl = getElement("error-message");
|
||||
if (!errorEl) return;
|
||||
errorEl.textContent = message;
|
||||
errorEl.style.display = "block";
|
||||
setElementDisplay(errorEl, true);
|
||||
}
|
||||
|
||||
// Hide error message
|
||||
export function hideError() {
|
||||
const errorEl = document.getElementById("error-message");
|
||||
const errorEl = getElement("error-message");
|
||||
if (errorEl) {
|
||||
errorEl.style.display = "none";
|
||||
setElementDisplay(errorEl, false);
|
||||
errorEl.textContent = "";
|
||||
}
|
||||
}
|
||||
|
||||
export function clearUiState() {
|
||||
if (statusTimeoutId) {
|
||||
clearTimeout(statusTimeoutId);
|
||||
statusTimeoutId = null;
|
||||
}
|
||||
clearStatusTimers();
|
||||
|
||||
const statusEl = document.getElementById("status-message");
|
||||
const statusEl = getElement("status-message");
|
||||
if (statusEl) {
|
||||
statusEl.style.display = "none";
|
||||
statusEl.className = STATUS_BASE_CLASS;
|
||||
setElementDisplay(statusEl, false);
|
||||
statusEl.textContent = "";
|
||||
}
|
||||
|
||||
|
||||
90
planet.sh
90
planet.sh
@@ -60,6 +60,24 @@ FRONTEND_RUNTIME_BIN="${FRONTEND_RUNTIME_BIN:-}"
|
||||
FRONTEND_RUNTIME_SOURCE="${FRONTEND_RUNTIME_SOURCE:-}"
|
||||
FRONTEND_PID_FILE="/tmp/planet_frontend.pid"
|
||||
|
||||
prepend_path_once() {
|
||||
local path_entry="$1"
|
||||
[ -n "$path_entry" ] || return 0
|
||||
[ -d "$path_entry" ] || return 0
|
||||
|
||||
case ":$PATH:" in
|
||||
*":$path_entry:"*) ;;
|
||||
*) export PATH="$path_entry:$PATH" ;;
|
||||
esac
|
||||
}
|
||||
|
||||
ensure_local_runtime_bins_on_path() {
|
||||
prepend_path_once "$HOME/.local/bin"
|
||||
prepend_path_once "$HOME/.bun/bin"
|
||||
}
|
||||
|
||||
ensure_local_runtime_bins_on_path
|
||||
|
||||
# Shell / Docker helpers
|
||||
compose_up() {
|
||||
if docker compose version >/dev/null 2>&1; then
|
||||
@@ -320,12 +338,62 @@ run_with_retry() {
|
||||
return 1
|
||||
}
|
||||
|
||||
install_uv_if_needed() {
|
||||
if command -v uv >/dev/null 2>&1; then
|
||||
return 0
|
||||
fi
|
||||
|
||||
set_wait_detail "未找到 uv，准备自动安装"
|
||||
mkdir -p "$HOME/.local/bin"
|
||||
|
||||
if ! run_with_retry \
|
||||
"$DEPENDENCY_INSTALL_MAX_RETRIES" \
|
||||
"$DEPENDENCY_INSTALL_RETRY_INTERVAL" \
|
||||
"uv 安装失败，已重试 ${DEPENDENCY_INSTALL_MAX_RETRIES} 次" \
|
||||
"安装 uv" \
|
||||
sh -c 'curl -LsSf https://astral.sh/uv/install.sh | sh'; then
|
||||
exit 1
|
||||
fi
|
||||
|
||||
ensure_local_runtime_bins_on_path
|
||||
|
||||
if ! command -v uv >/dev/null 2>&1; then
|
||||
log_error "uv 安装完成后仍未找到命令，请检查 ~/.local/bin"
|
||||
exit 1
|
||||
fi
|
||||
}
|
||||
|
||||
install_bun_if_needed() {
|
||||
if command -v bun >/dev/null 2>&1 || [ -x "$HOME/.bun/bin/bun" ]; then
|
||||
ensure_local_runtime_bins_on_path
|
||||
return 0
|
||||
fi
|
||||
|
||||
set_wait_detail "未找到 bun，准备自动安装"
|
||||
mkdir -p "$HOME/.bun"
|
||||
|
||||
if ! run_with_retry \
|
||||
"$DEPENDENCY_INSTALL_MAX_RETRIES" \
|
||||
"$DEPENDENCY_INSTALL_RETRY_INTERVAL" \
|
||||
"bun 安装失败，已重试 ${DEPENDENCY_INSTALL_MAX_RETRIES} 次" \
|
||||
"安装 bun" \
|
||||
sh -c 'curl -fsSL https://bun.sh/install | bash'; then
|
||||
exit 1
|
||||
fi
|
||||
|
||||
ensure_local_runtime_bins_on_path
|
||||
|
||||
if [ ! -x "$HOME/.bun/bin/bun" ] && ! command -v bun >/dev/null 2>&1; then
|
||||
log_error "bun 安装完成后仍未找到命令，请检查 ~/.bun/bin"
|
||||
exit 1
|
||||
fi
|
||||
}
|
||||
|
||||
ensure_uv_backend_deps() {
|
||||
set_wait_detail "检查后端 uv 环境"
|
||||
|
||||
if ! command -v uv >/dev/null 2>&1; then
|
||||
log_error "未找到 uv，请先安装 uv 并加入 PATH"
|
||||
exit 1
|
||||
install_uv_if_needed
|
||||
fi
|
||||
|
||||
cd "$SCRIPT_DIR"
|
||||
@@ -357,6 +425,15 @@ resolve_frontend_runtime() {
|
||||
return 0
|
||||
fi
|
||||
|
||||
ensure_local_runtime_bins_on_path
|
||||
|
||||
if [ -x "$HOME/.bun/bin/bun" ]; then
|
||||
FRONTEND_RUNTIME_BIN="$HOME/.bun/bin/bun"
|
||||
FRONTEND_RUNTIME_SOURCE="local-install"
|
||||
WAIT_SPINNER_DETAIL="已找到 ~/.bun/bin/bun"
|
||||
return 0
|
||||
fi
|
||||
|
||||
set_wait_detail "读取 zsh 配置中的 bun"
|
||||
if resolve_bun_from_shell_configs "zsh" "$HOME/.zshrc" "$HOME/.zprofile"; then
|
||||
WAIT_SPINNER_DETAIL="已找到 zsh 配置中的 bun"
|
||||
@@ -413,9 +490,12 @@ ensure_frontend_deps() {
|
||||
|
||||
set_wait_detail "解析前端运行时"
|
||||
if ! resolve_frontend_runtime; then
|
||||
close_wait_session_context "$owns_wait_session"
|
||||
log_error "未找到 bun，已按 zsh > powershell 顺序检查启动配置"
|
||||
exit 1
|
||||
install_bun_if_needed
|
||||
if ! resolve_frontend_runtime; then
|
||||
close_wait_session_context "$owns_wait_session"
|
||||
log_error "未找到 bun，自动安装后仍无法解析运行时"
|
||||
exit 1
|
||||
fi
|
||||
fi
|
||||
|
||||
cd "$SCRIPT_DIR/frontend"
|
||||
|
||||
@@ -40,6 +40,7 @@
|
||||
- **State Management:** React Query
|
||||
- **Real-time:** Socket.io-client
|
||||
- **Charts:** ECharts
|
||||
- **Package Manager / Runner:** Bun 1
|
||||
|
||||
### Visualization (UE5)
|
||||
- **Engine:** Unreal Engine 5.3+
|
||||
@@ -210,6 +211,8 @@ bun run build
|
||||
bun run preview
|
||||
```
|
||||
|
||||
前端统一使用 Bun，不使用 `npm`、`pnpm`、`yarn`。
|
||||
|
||||
### Docker
|
||||
```bash
|
||||
docker-compose up -d
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
[project]
|
||||
name = "planet"
|
||||
version = "0.24.0"
|
||||
version = "0.24.1"
|
||||
description = "智能星球计划 - 态势感知系统"
|
||||
requires-python = ">=3.14"
|
||||
dependencies = [
|
||||
|
||||
3
rules.md
3
rules.md
@@ -157,6 +157,9 @@ git fetch origin && git rebase origin/main
|
||||
- Prefer well-maintained, widely-used libraries
|
||||
- Pin dependency versions in `pyproject.toml`, `uv.lock`, and `package.json`
|
||||
- Review security advisories with `pip-audit` and `bun audit`
|
||||
- Frontend package management and script execution use **Bun only**
|
||||
- Frontend commands must use `bun install` / `bun run ...`
|
||||
- **NEVER** use `npm` / `pnpm` / `yarn` for the frontend project
|
||||
- **NEVER** add unknown packages
|
||||
|
||||
---
|
||||
|
||||
@@ -106,7 +106,10 @@ print_next_steps() {
|
||||
echo "下一步建议:"
|
||||
echo " 1. cd \"$ROOT_DIR\""
|
||||
echo " 2. uv run pytest backend/tests/test_api.py -q -s"
|
||||
echo " 3. ./planet.sh start"
|
||||
echo " 3. cd \"$ROOT_DIR/frontend\" && bun run build"
|
||||
echo " 4. cd \"$ROOT_DIR\" && ./planet.sh start"
|
||||
echo ""
|
||||
echo "前端统一使用 Bun，不使用 npm/pnpm/yarn。"
|
||||
}
|
||||
|
||||
main() {
|
||||
|
||||
Reference in New Issue
Block a user