feat(earth): refactor toolbar layout, improve cable breathing effect

- Restructure right-toolbar-group with zoom-toolbar and control-toolbar
- Add reset button to zoom-toolbar
- Change collapse toggle to arrow icon
- Improve cable breathing effect opacity range
- Adjust toolbar sizing and spacing
This commit is contained in:
linkong
2026-03-20 16:34:00 +08:00
parent 3fcbae55dc
commit 96222b9e4c
3 changed files with 90 additions and 65 deletions

View File

@@ -21,13 +21,6 @@
</head>
<body>
<div id="container">
<div id="zoom-toolbar">
<button id="zoom-out" class="zoom-btn"></button>
<span id="zoom-value" class="zoom-percent">100%</span>
<button id="zoom-in" class="zoom-btn">+</button>
<input type="range" id="zoom-slider" min="0.5" max="5" step="0.01" value="1">
</div>
<div id="info-panel">
<h1>智能星球计划</h1>
<div class="subtitle">现实层宇宙全息感知系统 | 卫星 · 海底光缆 · 算力基础设施</div>
@@ -43,16 +36,25 @@
<div id="error-message" class="error-message"></div>
</div>
<div id="control-toolbar">
<div class="toolbar-items">
<button id="rotate-toggle" class="toolbar-btn" title="自动旋转">🔄<span class="tooltip">自动旋转</span></button>
<button id="reset-view" class="toolbar-btn" title="重置视图">🎯<span class="tooltip">重置视图</span></button>
<button id="toggle-terrain" class="toolbar-btn" title="显示/隐藏地形">⛰️<span class="tooltip">显示/隐藏地形</span></button>
<button id="toggle-satellites" class="toolbar-btn" title="显示/隐藏卫星">🛰️<span class="tooltip">显示/隐藏卫星</span></button>
<button id="toggle-trails" class="toolbar-btn" title="显示/隐藏轨迹"><span class="tooltip">显示/隐藏轨迹</span></button>
<button id="reload-data" class="toolbar-btn" title="重新加载数据">🔃<span class="tooltip">重新加载数据</span></button>
<div id="right-toolbar-group">
<div id="zoom-toolbar">
<button id="reset-view" class="zoom-btn">🎯</button>
<input type="range" id="zoom-slider" min="0.5" max="5" step="0.01" value="1">
<button id="zoom-in" class="zoom-btn">+</button>
<span id="zoom-value" class="zoom-percent">100%</span>
<button id="zoom-out" class="zoom-btn"></button>
</div>
<div id="control-toolbar">
<div class="toolbar-items">
<button id="rotate-toggle" class="toolbar-btn" title="自动旋转">🔄<span class="tooltip">自动旋转</span></button>
<button id="toggle-terrain" class="toolbar-btn" title="显示/隐藏地形">⛰️<span class="tooltip">显示/隐藏地形</span></button>
<button id="toggle-satellites" class="toolbar-btn" title="显示/隐藏卫星">🛰️<span class="tooltip">显示/隐藏卫星</span></button>
<button id="toggle-trails" class="toolbar-btn" title="显示/隐藏轨迹"><span class="tooltip">显示/隐藏轨迹</span></button>
<button id="reload-data" class="toolbar-btn" title="重新加载数据">🔃<span class="tooltip">重新加载数据</span></button>
</div>
<button id="toolbar-toggle" class="toolbar-btn" title="展开/收起工具栏"><span class="toggle-arrow"></span></button>
</div>
<button id="toolbar-toggle" class="toolbar-btn" title="展开/收起工具栏"><span class="toggle-circle"></span></button>
</div>
<div id="coordinates-display">