feat: 更新地面站和卫星状态管理为使用 Set

src/pages/cesium-viewer.page.vue

@@ -9,7 +9,7 @@ import type { GroundStationState, SatelliteState } from '@/components/h-cesium-v
 // 地面站和选中状态
 const groundStationState = reactive<GroundStationState>({
   groundStations: [],
-  selectedIds: [],
+  selectedIds: new Set<string>(),
 });
 groundStationState.groundStations = [
   { height: 50, id: 'gs-bj', latitude: 39.9042, longitude: 116.4074, name: '北京站' },
@@ -20,7 +20,7 @@ groundStationState.groundStations = [
 // >>>>>>>>> 卫星状态管理 >>>>>>>>>
 const satelliteState = reactive<SatelliteState>({
   satellites: [],
-  selectedIds: [],
+  selectedIds: new Set<string>(),
 });
 
 // 初始化卫星列表
@@ -51,6 +51,14 @@ const satelliteCheckboxOptions = computed(() =>
   })),
 );
 
+// 为卫星 a-checkbox-group 创建计算属性，处理 Set 和 Array 的转换
+const selectedSatelliteIdsArray = computed({
+  get: () => [...satelliteState.selectedIds], // 从 Set 转换为 Array
+  set: (val: string[]) => {
+    satelliteState.selectedIds = new Set(val); // 从 Array 转换回 Set
+  },
+});
+
 // <<<<<<<<< 卫星状态管理 <<<<<<<<<
 
 // 计算 Checkbox Group 的 options
@@ -71,7 +79,7 @@ const addRandomStation = () => {
     longitude: randomLon,
     name: `随机站 ${randomId.slice(-4)}`,
   });
-  groundStationState.selectedIds.push(randomId); // 同时将新站点 ID 添加到选中项
+  groundStationState.selectedIds.add(randomId); // 同时将新站点 ID 添加到选中项
   consola.info('添加随机站点:', groundStationState.groundStations.at(-1)); // 使用 .at() 访问最后一个元素
 };
 
@@ -82,7 +90,7 @@ const removeLastStation = () => {
     if (removedStation) {
       consola.info('移除站点:', removedStation);
       // 同时从选中项中移除
-      groundStationState.selectedIds = groundStationState.selectedIds.filter((id) => id !== removedStation.id);
+      groundStationState.selectedIds.delete(removedStation.id);
     }
   }
 };
@@ -90,9 +98,17 @@ const removeLastStation = () => {
 // 清空所有选中项
 const clearAllStations = () => {
   groundStationState.groundStations = [];
-  groundStationState.selectedIds = []; // 清空选中项
+  groundStationState.selectedIds.clear(); // 清空选中项
   consola.info('清空所有站点');
 };
+
+// 为 a-checkbox-group 创建计算属性，处理 Set 和 Array 的转换
+const selectedStationIdsArray = computed({
+  get: () => [...groundStationState.selectedIds], // 从 Set 转换为 Array
+  set: (val: string[]) => {
+    groundStationState.selectedIds = new Set(val); // 从 Array 转换回 Set
+  },
+});
 </script>
 
 <template>
@@ -113,22 +129,22 @@ const clearAllStations = () => {
             >清空所有</a-button
           >
           <span>当前站点数: {{ groundStationState.groundStations.length }}</span>
-          <span> | 选中站点数: {{ groundStationState.selectedIds.length }}</span>
+          <span> | 选中站点数: {{ groundStationState.selectedIds.size }}</span>
         </div>
         <!-- 站点选择 -->
         <div mt-2 v-if="groundStationState.groundStations.length > 0">
           <span class="mr-2">选择要显示的站点:</span>
-          <a-checkbox-group v-model:value="groundStationState.selectedIds" :options="stationCheckboxOptions" />
+          <a-checkbox-group v-model:value="selectedStationIdsArray" :options="stationCheckboxOptions" />
         </div>
       </a-card>
 
       <!-- 卫星控制 -->
       <a-card title="卫星控制" size="small">
         <span>当前卫星数: {{ satelliteState.satellites.length }}</span>
-        <span> | 选中卫星数: {{ satelliteState.selectedIds.length }}</span>
+        <span> | 选中卫星数: {{ satelliteState.selectedIds.size }}</span>
         <div v-if="satelliteState.satellites.length > 0" class="mt-2">
           <span class="mr-2">选择要显示的卫星:</span>
-          <a-checkbox-group v-model:value="satelliteState.selectedIds" :options="satelliteCheckboxOptions" />
+          <a-checkbox-group v-model:value="selectedSatelliteIdsArray" :options="satelliteCheckboxOptions" />
         </div>
       </a-card>
     </div>