linkong/planet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: redesign earth hud interactions and legend behavior

Browse Source
This commit is contained in:
linkong
2026-03-26 17:58:03 +08:00
parent ab09f0ba78
commit 30a29a6e34
15 changed files with 988 additions and 364 deletions
Download Patch File Download Diff File Expand all files Collapse all files

203
frontend/public/earth/index.html
View File

@@ -18,8 +18,18 @@
<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;">
<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" />
<feGaussianBlur in="noise" stdDeviation="0.45" result="softNoise" />
<feDisplacementMap in="SourceGraphic" in2="softNoise" scale="5.5" xChannelSelector="R" yChannelSelector="G" />
</filter>
</defs>
</svg>
<div id="container">
<div id="info-panel">
<h1>智能星球计划</h1>
@@ -37,105 +47,92 @@
</div>
<div id="right-toolbar-group">
<div id="zoom-toolbar">
<button id="reset-view" class="zoom-btn" title="重置视角">
<svg viewBox="0 0 24 24" aria-hidden="true">
<circle cx="12" cy="12" r="5"></circle>
<path d="M12 3v4"></path>
<path d="M12 17v4"></path>
<path d="M3 12h4"></path>
<path d="M17 12h4"></path>
<circle cx="12" cy="12" r="1.5" fill="currentColor" stroke="none"></circle>
</svg>
<span class="tooltip">重置视角</span>
</button>
<button id="zoom-in" class="zoom-btn" title="放大">+<span class="tooltip">放大</span></button>
<span id="zoom-value" class="zoom-percent" title="重置缩放到100%">100%<span class="tooltip">重置缩放到100%</span></span>
<button id="zoom-out" class="zoom-btn" title="缩小">−<span class="tooltip">缩小</span></button>
</div>
<div id="control-toolbar">
<div class="toolbar-items">
<button id="rotate-toggle" class="toolbar-btn" title="自动旋转">
<button id="search-action" class="toolbar-btn floating-btn liquid-glass-surface" title="搜索功能（待开发）">
<span class="icon" aria-hidden="true">
<span class="material-symbols-rounded">search</span>
</span>
<span class="tooltip">搜索功能（待开发）</span>
</button>
<button id="rotate-toggle" class="toolbar-btn floating-btn liquid-glass-surface" title="自动旋转">
<span class="icon rotate-icon icon-pause" aria-hidden="true">
<svg viewBox="0 0 24 24">
<path d="M9 6v12"></path>
<path d="M15 6v12"></path>
</svg>
<span class="material-symbols-rounded">pause</span>
</span>
<span class="icon rotate-icon icon-play" aria-hidden="true">
<svg viewBox="0 0 24 24">
<path d="M8 6.5v11l9-5.5z" fill="currentColor" stroke="none"></path>
</svg>
<span class="material-symbols-rounded">play_arrow</span>
</span>
<span class="tooltip">自动旋转</span>
</button>
<button id="toggle-cables" class="toolbar-btn active" title="显示/隐藏线缆">
<div id="info-control-group" class="floating-popover-group">
<button id="info-trigger" class="toolbar-btn floating-btn liquid-glass-surface" title="显示控制">
<span class="icon" aria-hidden="true">
<span class="material-symbols-rounded">info</span>
</span>
<span class="tooltip">显示控制</span>
</button>
<div id="info-toolbar" class="stack-toolbar">
<button id="toggle-terrain" class="toolbar-btn floating-btn liquid-glass-surface" title="显示/隐藏地形">
<span class="icon" aria-hidden="true">
<span class="material-symbols-rounded">terrain</span>
</span>
<span class="tooltip">显示/隐藏地形</span>
</button>
<button id="toggle-trails" class="toolbar-btn floating-btn liquid-glass-surface active" title="显示/隐藏轨迹">
<span class="icon" aria-hidden="true">
<span class="material-symbols-rounded">timeline</span>
</span>
<span class="tooltip">隐藏轨迹</span>
</button>
<button id="toggle-satellites" class="toolbar-btn floating-btn liquid-glass-surface" title="显示/隐藏卫星">
<span class="icon" aria-hidden="true">
<span class="material-symbols-rounded">satellite_alt</span>
</span>
<span class="tooltip">显示卫星</span>
</button>
<button id="toggle-cables" class="toolbar-btn floating-btn liquid-glass-surface active" title="显示/隐藏线缆">
<span class="icon" aria-hidden="true">
<span class="material-symbols-rounded">cable</span>
</span>
<span class="tooltip">隐藏线缆</span>
</button>
</div>
</div>
<button id="reload-data" class="toolbar-btn floating-btn liquid-glass-surface" title="重新加载数据">
<span class="icon" aria-hidden="true">
<svg viewBox="0 0 24 24">
<circle cx="12" cy="12" r="6.5"></circle>
<path d="M5.8 12h12.4"></path>
<path d="M12 5.8a8.5 8.5 0 0 1 0 12.4"></path>
<path d="M8 16c2-1.8 6-1.8 8 0"></path>
</svg>
</span>
<span class="tooltip">隐藏线缆</span>
</button>
<button id="toggle-terrain" class="toolbar-btn" title="显示/隐藏地形">
<span class="icon" aria-hidden="true">
<svg viewBox="0 0 24 24">
<path d="M3 18h18"></path>
<path d="M4.5 18l5-7 3 4 3.5-6 3.5 9"></path>
<path d="M11 18l2-3 1.5 2"></path>
</svg>
</span>
<span class="tooltip">显示/隐藏地形</span>
</button>
<button id="toggle-satellites" class="toolbar-btn" title="显示/隐藏卫星">
<span class="icon" aria-hidden="true">
<svg viewBox="0 0 24 24">
<rect x="10" y="10" width="4" height="4" rx="0.8"></rect>
<rect x="4" y="9" width="4" height="6" rx="0.8"></rect>
<rect x="16" y="9" width="4" height="6" rx="0.8"></rect>
<path d="M8 12h2"></path>
<path d="M14 12h2"></path>
<path d="M12 8V6"></path>
<path d="M11 6h2"></path>
<path d="M12 14v4"></path>
<path d="M10 18h4"></path>
</svg>
</span>
<span class="tooltip">显示卫星</span>
</button>
<button id="toggle-trails" class="toolbar-btn active" title="显示/隐藏轨迹">
<span class="icon" aria-hidden="true">
<svg viewBox="0 0 24 24">
<path d="M5 17h7"></path>
<path d="M7 13.5h8"></path>
<path d="M10 10h6"></path>
<circle cx="17.5" cy="8.5" r="2.2" fill="currentColor" stroke="none"></circle>
<path d="M15.8 10.2l2.8-2.8"></path>
</svg>
</span>
<span class="tooltip">隐藏轨迹</span>
</button>
<button id="reload-data" class="toolbar-btn" title="重新加载数据">
<span class="icon" aria-hidden="true">
<svg viewBox="0 0 24 24">
<path d="M20 5v5h-5"></path>
<path d="M20 10a8 8 0 1 0 2 5"></path>
</svg>
<span class="material-symbols-rounded">refresh</span>
</span>
<span class="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="缩放控制">
<span class="icon" aria-hidden="true">
<span class="material-symbols-rounded">zoom_in</span>
</span>
<span class="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>
</div>
<button id="reset-view" class="toolbar-btn floating-btn liquid-glass-surface" title="重置视角">
<span class="icon" aria-hidden="true">
<span class="material-symbols-rounded">my_location</span>
</span>
<span class="tooltip">重置视角</span>
</button>
<button id="layout-toggle" class="toolbar-btn floating-btn liquid-glass-surface" 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>
</button>
</div>
<button id="toolbar-toggle" class="toolbar-btn" title="展开/收起工具栏">
<span class="toggle-arrow" aria-hidden="true">
<svg viewBox="0 0 24 24">
<path d="M15 6l-6 6 6 6"></path>
</svg>
</span>
</button>
</div>
</div>
@@ -154,22 +151,24 @@
</div>
<div id="legend">
<h3 style="color:#4db8ff; margin-bottom:10px; font-size:1.1rem;">图例</h3>
<div class="legend-item">
<div class="legend-color" style="background-color: #ff4444;"></div>
<span>Americas II</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background-color: #44ff44;"></div>
<span>AU Aleutian A</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background-color: #4444ff;"></div>
<span>AU Aleutian B</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background-color: #ffff44;"></div>
<span>其他电缆</span>
<h3 class="legend-title">线缆图例</h3>
<div class="legend-list">
<div class="legend-item">
<div class="legend-color" style="background-color: #ff4444;"></div>
<span>Americas II</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background-color: #44ff44;"></div>
<span>AU Aleutian A</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background-color: #4444ff;"></div>
<span>AU Aleutian B</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background-color: #ffff44;"></div>
<span>其他电缆</span>
</div>
</div>
</div>