fix: 修复3D地球坐标映射多个严重bug

## Bug修复详情

### 1. 致命错误：球面距离计算 (calculateDistance)
- 问题：使用勾股定理计算经纬度距离，在球体表面完全错误
- 修复：改用Haversine公式计算球面大圆距离
- 影响：赤道1度=111km，极地1度=19km，原计算误差巨大

### 2. 经度范围规范化 (vector3ToLatLon)
- 问题：Math.atan2返回[-180°,180°]，转换后可能超出标准范围
- 修复：添加while循环规范化到[-180, 180]区间
- 影响：避免本初子午线附近返回360°的异常值

### 3. 屏幕坐标转换支持非全屏 (screenToEarthCoords)
- 问题：假设Canvas永远全屏，非全屏时点击偏移严重
- 修复：新增domElement参数，使用getBoundingClientRect()计算相对坐标
- 影响：嵌入式3D地球组件也能精准拾取

### 4. 地球旋转时经纬度映射错误
- 问题：Raycaster返回世界坐标，未考虑地球自转
- 修复：使用earth.worldToLocal()转换到本地坐标空间
- 影响：地球旋转时经纬度显示正确跟随

## 新增功能

- CelesTrak卫星数据采集器
- Space-Track卫星数据采集器
- 卫星可视化模块（500颗，实时SGP4轨道计算）
- 海底光缆悬停显示info-card
- 统一info-card组件
- 工具栏按钮（Stellarium风格）
- 缩放控制（百分比显示）
- Docker volume映射（代码热更新）

## 文件变更

- utils.js: 坐标转换核心逻辑修复
- satellites.js: 新增卫星可视化
- cables.js: 悬停交互支持
- main.js: 悬停/锁定逻辑
- controls.js: 工具栏UI
- info-card.js: 统一卡片组件
- docker-compose.yml: volume映射
- restart.sh: 简化重启脚本

frontend/public/earth/css/base.css

@@ -17,14 +17,76 @@ body {
   position: relative;
   width: 100vw;
   height: 100vh;
-  /* user-select: none;
-  -webkit-user-select: none; */
 }
 
 #container.dragging {
   cursor: grabbing;
 }
 
+/* Zoom Toolbar - Top Center */
+#zoom-toolbar {
+  position: absolute;
+  top: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  background: rgba(10, 10, 30, 0.9);
+  padding: 10px 20px;
+  border-radius: 30px;
+  border: 1px solid rgba(77, 184, 255, 0.3);
+  box-shadow: 0 0 20px rgba(77, 184, 255, 0.2);
+  z-index: 200;
+}
+
+#zoom-toolbar .zoom-percent {
+  font-size: 1.2rem;
+  font-weight: 600;
+  color: #4db8ff;
+  min-width: 60px;
+  text-align: center;
+  cursor: pointer;
+  padding: 5px 10px;
+  border-radius: 5px;
+  transition: all 0.2s ease;
+}
+
+#zoom-toolbar .zoom-percent:hover {
+  background: rgba(77, 184, 255, 0.2);
+  box-shadow: 0 0 10px rgba(77, 184, 255, 0.3);
+}
+
+#zoom-toolbar .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;
+}
+
+#zoom-toolbar .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);
+}
+
+#zoom-toolbar #zoom-slider {
+  width: 100px;
+  margin-left: 10px;
+}
+
 #loading {
   position: absolute;
   top: 50%;
@@ -147,3 +209,128 @@ input[type="range"]::-webkit-slider-thumb {
   display: none;
   user-select: none;
 }
+
+/* Control Toolbar - Stellarium/Star Walk style */
+#control-toolbar {
+  position: absolute;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  background: rgba(10, 10, 30, 0.9);
+  border-radius: 30px;
+  padding: 8px 12px;
+  border: 1px solid rgba(77, 184, 255, 0.3);
+  box-shadow: 0 0 20px rgba(77, 184, 255, 0.2);
+  z-index: 200;
+  transition: all 0.3s ease;
+}
+
+#control-toolbar.collapsed {
+  padding: 8px 8px 8px 12px;
+}
+
+#control-toolbar.collapsed .toolbar-items {
+  width: 0;
+  padding: 0;
+  overflow: hidden;
+  opacity: 0;
+}
+
+#toolbar-toggle {
+  font-size: 0;
+  min-width: 32px;
+  line-height: 1;
+  transition: all 0.3s ease;
+}
+
+.toggle-circle {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: rgba(77, 184, 255, 0.8);
+  box-shadow: 0 0 8px rgba(77, 184, 255, 0.6);
+}
+
+#control-toolbar:not(.collapsed) #toolbar-toggle {
+  background: rgba(77, 184, 255, 0.3);
+}
+
+.toolbar-items {
+  display: flex;
+  gap: 4px;
+  width: auto;
+  padding: 0 8px 0 4px;
+  overflow: visible;
+  opacity: 1;
+  transition: all 0.3s ease;
+  border-right: 1px solid rgba(77, 184, 255, 0.3);
+  margin-right: 4px;
+}
+
+.toolbar-btn {
+  position: relative;
+  width: 40px;
+  height: 40px;
+  border: none;
+  border-radius: 50%;
+  background: rgba(77, 184, 255, 0.15);
+  color: #4db8ff;
+  font-size: 18px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+}
+
+.toolbar-btn:hover {
+  background: rgba(77, 184, 255, 0.35);
+  transform: scale(1.1);
+  box-shadow: 0 0 15px rgba(77, 184, 255, 0.5);
+}
+
+.toolbar-btn:active {
+  transform: scale(0.95);
+}
+
+.toolbar-btn.active {
+  background: rgba(77, 184, 255, 0.4);
+  box-shadow: 0 0 10px rgba(77, 184, 255, 0.4) inset;
+}
+
+.toolbar-btn .tooltip {
+  position: absolute;
+  bottom: 50px;
+  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 {
+  opacity: 1;
+  visibility: visible;
+  bottom: 52px;
+}
+
+.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);
+}