fix: refine earth hud structure and bun startup flow
- refactor the /earth HUD into class-first CSS layers with dedicated base, hud, and toolbar responsibilities - clean up Earth markup and runtime DOM hooks so shared panel, toolbar, tooltip, and status classes stay consistent after dynamic updates - keep HUD scaling configurable through extracted constants and remove leftover legacy panel/toolbar styling paths - make planet.sh self-bootstrap Bun and uv by prepending local runtime bins to PATH and auto-installing missing tools in fresh environments - document Bun as the frontend package manager of record and sync repository version metadata to 0.24.1
This commit is contained in:
rayd1o
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user