feat: 重构地面站管理逻辑，新增 GroundStationState 接口，优化组件间数据传递

src/pages/cesium-viewer.page.vue

@@ -4,21 +4,23 @@ meta:
 </route>
 
 <script setup lang="ts">
-import type { GroundStationOptions } from '@/components/h-cesium-viewer/h-cesium-viewer-class';
+// GroundStationOptions 不再直接使用，已在 types.ts 中被 GroundStationState 引用
+import type { GroundStationState } from '@/components/h-cesium-viewer/types'; // 导入共享的接口
 
-// 定义地面站列表的响应式引用
-const groundStations = ref<GroundStationOptions[]>([
-  { height: 50, id: 'gs-bj', latitude: 39.9042, longitude: 116.4074, name: '北京站' },
-  { height: 10, id: 'gs-sh', latitude: 31.2304, longitude: 121.4737, name: '上海站' },
-  { height: 20, id: 'gs-gz', latitude: 23.1291, longitude: 113.2644, name: '广州站' },
-]);
-
-// 新增：定义选中站点 ID 的响应式引用
-const selectedIds = ref<string[]>([]);
+// 使用 reactive 管理地面站和选中状态
+const groundStationState = reactive<GroundStationState>({
+  // 使用导入的接口
+  groundStations: [
+    { height: 50, id: 'gs-bj', latitude: 39.9042, longitude: 116.4074, name: '北京站' },
+    { height: 10, id: 'gs-sh', latitude: 31.2304, longitude: 121.4737, name: '上海站' },
+    { height: 20, id: 'gs-gz', latitude: 23.1291, longitude: 113.2644, name: '广州站' },
+  ],
+  selectedIds: [],
+});
 
 // 计算 Checkbox Group 的 options
 const stationOptions = computed(() =>
-  groundStations.value.map((station) => ({ label: station.name, value: station.id })),
+  groundStationState.groundStations.map((station) => ({ label: station.name, value: station.id })),
 );
 
 // 添加一个随机站点
@@ -27,33 +29,33 @@ const addRandomStation = () => {
   const randomLon = Math.random() * 360 - 180; // -180 to 180
   const randomLat = Math.random() * 180 - 90; // -90 to 90
   const randomHeight = Math.random() * 1000; // 0 to 1000 meters
-  groundStations.value.push({
+  groundStationState.groundStations.push({
     height: randomHeight,
     id: randomId,
     latitude: randomLat,
     longitude: randomLon,
     name: `随机站 ${randomId.slice(-4)}`,
   });
-  selectedIds.value.push(randomId); // 同时将新站点 ID 添加到选中项
-  consola.info('添加随机站点:', groundStations.value.at(-1)); // 使用 .at() 访问最后一个元素
+  groundStationState.selectedIds.push(randomId); // 同时将新站点 ID 添加到选中项
+  consola.info('添加随机站点:', groundStationState.groundStations.at(-1)); // 使用 .at() 访问最后一个元素
 };
 
 // 移除最后一个站点
 const removeLastStation = () => {
-  if (groundStations.value.length > 0) {
-    const removedStation = groundStations.value.pop();
+  if (groundStationState.groundStations.length > 0) {
+    const removedStation = groundStationState.groundStations.pop();
     if (removedStation) {
       consola.info('移除站点:', removedStation);
       // 同时从选中项中移除
-      selectedIds.value = selectedIds.value.filter((id) => id !== removedStation.id);
+      groundStationState.selectedIds = groundStationState.selectedIds.filter((id) => id !== removedStation.id);
     }
   }
 };
 
 // 清空所有选中项
 const clearAllStations = () => {
-  groundStations.value = [];
-  selectedIds.value = []; // 清空选中项
+  groundStationState.groundStations = [];
+  groundStationState.selectedIds = []; // 清空选中项
   consola.info('清空所有站点');
 };
 </script>
@@ -63,20 +65,24 @@ const clearAllStations = () => {
     <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>
+        <a-button @click="removeLastStation" :disabled="groundStationState.groundStations.length === 0"
+          >移除最后一个</a-button
+        >
+        <a-button danger @click="clearAllStations" :disabled="groundStationState.groundStations.length === 0"
+          >清空所有</a-button
+        >
+        <span>当前站点数: {{ groundStationState.groundStations.length }}</span>
+        <span> | 选中站点数: {{ groundStationState.selectedIds.length }}</span>
       </div>
       <!-- 新增：站点选择区域 -->
-      <div v-if="groundStations.length > 0">
+      <div v-if="groundStationState.groundStations.length > 0">
         <span class="mr-2">选择要高亮的站点:</span>
-        <a-checkbox-group v-model:value="selectedIds" :options="stationOptions" />
+        <a-checkbox-group v-model:value="groundStationState.selectedIds" :options="stationOptions" />
       </div>
     </div>
     <div class="flex-grow w-full rounded-lg border overflow-hidden">
       <!-- 将响应式列表和选中 ID 列表绑定到 prop -->
-      <h-cesium-viewer :ground-station-list="groundStations" :selected-station-ids="selectedIds">
+      <h-cesium-viewer :ground-station-state="groundStationState">
         <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>