refactor: 重构 Cesium 相关代码

src/pages/Satellite/Cesium/cesium-helper/_TOOLTIP_MAP.ts

@@ -1,4 +1,3 @@
- 
 /* prettier-ignore */
 export const TOOLTIP_MAP = {
   NORAD_CAT_ID_卫星编号: "5位数字，如'63158'，表示NORAD卫星唯一目录编号",

src/pages/cesium-viewer.page.vue

@@ -13,6 +13,14 @@ const groundStations = ref<GroundStationOptions[]>([
   { height: 20, id: 'gs-gz', latitude: 23.1291, longitude: 113.2644, name: '广州站' },
 ]);
 
+// 新增：定义选中站点 ID 的响应式引用
+const selectedIds = ref<string[]>([]);
+
+// 计算 Checkbox Group 的 options
+const stationOptions = computed(() =>
+  groundStations.value.map((station) => ({ label: station.name, value: station.id })),
+);
+
 // 添加一个随机站点
 const addRandomStation = () => {
   const randomId = `gs-random-${Math.random().toString(36).slice(7)}`;
@@ -26,37 +34,42 @@ const addRandomStation = () => {
     longitude: randomLon,
     name: `随机站 ${randomId.slice(-4)}`,
   });
+  selectedIds.value.push(randomId); // 同时将新站点 ID 添加到选中项
   consola.info('添加随机站点:', groundStations.value.at(-1)); // 使用 .at() 访问最后一个元素
 };
 
 // 移除最后一个站点
 const removeLastStation = () => {
-  if (groundStations.value.length > 0) {
-    const removed = groundStations.value.pop();
-    consola.info('移除站点:', removed);
-  } else {
-    consola.warn('没有站点可以移除');
+  if (selectedIds.value.length > 0) {
+    selectedIds.value.pop(); // 移除选中项
   }
 };
 
-// 清空所有站点
+// 清空所有选中项
 const clearAllStations = () => {
-  groundStations.value = [];
-  consola.info('已清空所有站点');
+  selectedIds.value = []; // 同时清空选中项
 };
 </script>
 
 <template>
   <div class="h-screen w-screen p-4 flex flex-col">
-    <div class="flex-shrink-0 mb-2 space-x-2">
-      <a-button type="primary" @click="addRandomStation">添加随机站点</a-button>
-      <a-button @click="removeLastStation" :disabled="groundStations.length === 0">移除最后一个</a-button>
-      <a-button danger @click="clearAllStations" :disabled="groundStations.length === 0">清空所有</a-button>
-      <span>当前站点数: {{ groundStations.length }}</span>
+    <div class="flex-shrink-0 mb-4 space-y-2">
+      <div class="space-x-2">
+        <a-button type="primary" @click="addRandomStation">添加随机站点</a-button>
+        <a-button @click="removeLastStation" :disabled="groundStations.length === 0">移除最后一个</a-button>
+        <a-button danger @click="clearAllStations" :disabled="groundStations.length === 0">清空所有</a-button>
+        <span>当前站点数: {{ groundStations.length }}</span>
+        <span> | 选中站点数: {{ selectedIds.length }}</span>
+      </div>
+      <!-- 新增：站点选择区域 -->
+      <div v-if="groundStations.length > 0">
+        <span class="mr-2">选择要高亮的站点:</span>
+        <a-checkbox-group v-model:value="selectedIds" :options="stationOptions" />
+      </div>
     </div>
     <div class="flex-grow w-full rounded-lg border overflow-hidden">
-      <!-- 将响应式列表绑定到 prop -->
-      <h-cesium-viewer :ground-station-list="groundStations">
+      <!-- 将响应式列表和选中 ID 列表绑定到 prop -->
+      <h-cesium-viewer :ground-station-list="groundStations" :selected-station-ids="selectedIds">
         <div class="absolute top-0 left-0 z-10 p-2 bg-black/30 rounded-br-lg">
           <span class="text-white text-xs">叠加 UI 示例</span>
         </div>