feat: 添加卫星管理功能，新增 SatelliteOptions 接口，更新相关组件以支持卫星实体的添加和移除

src/pages/cesium-viewer.page.vue

@@ -4,7 +4,7 @@ meta:
 </route>
 
 <script setup lang="ts">
-import type { GroundStationState } from '@/components/h-cesium-viewer/types';
+import type { GroundStationState, SatelliteState } from '@/components/h-cesium-viewer/types';
 
 // 地面站和选中状态
 const groundStationState = reactive<GroundStationState>({
@@ -17,6 +17,42 @@ groundStationState.groundStations = [
   { height: 20, id: 'gs-gz', latitude: 23.1291, longitude: 113.2644, name: '广州站' },
 ];
 
+// >>>>>>>>> 卫星状态管理 >>>>>>>>>
+const satelliteState = reactive<SatelliteState>({
+  satellites: [],
+  selectedIds: [],
+});
+
+// 初始化卫星列表
+satelliteState.satellites = [
+  {
+    id: 'STARLINK-11371',
+    tle: `STARLINK-11371
+1 62879U 25024A   25062.93300820  .00003305  00000+0  21841-4 0  9995
+2 62879  42.9977 257.3937 0001725 269.2925  90.7748 15.77864921  5143`,
+    showOrbit: true, // 明确显示轨道
+  },
+  {
+    id: 'ISS (ZARYA)',
+    tle: `国际空间站
+1 25544U 98067A   25091.51178241  .00016717  00000+0  30771-3 0  9997
+2 25544  51.6416 247.4627 0006703 130.5360 325.0288 15.72125391587775`,
+    showOrbit: true,
+  },
+  // 可以添加更多卫星...
+];
+
+// 计算卫星 Checkbox Group 的 options
+const satelliteCheckboxOptions = computed(() =>
+  satelliteState.satellites.map((sat) => ({
+    // 从 TLE 字符串的第一行提取名称作为标签
+    label: sat.tle.split('\n')[0].trim(),
+    value: sat.id,
+  })),
+);
+
+// <<<<<<<<< 卫星状态管理 <<<<<<<<<
+
 // 计算 Checkbox Group 的 options
 const stationCheckboxOptions = computed(() =>
   groundStationState.groundStations.map((station) => ({ label: station.name, value: station.id })),
@@ -61,27 +97,44 @@ const clearAllStations = () => {
 
 <template>
   <div class="h-screen w-screen p-4 flex flex-col">
-    <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="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="groundStationState.groundStations.length > 0">
-        <span class="mr-2">选择要高亮的站点:</span>
-        <a-checkbox-group v-model:value="groundStationState.selectedIds" :options="stationCheckboxOptions" />
-      </div>
+    <div class="flex-shrink-0 mb-4 space-y-4">
+      <!-- 地面站控制 -->
+      <a-card title="地面站控制" size="small">
+        <div class="space-x-2">
+          <a-button size="small" type="primary" @click="addRandomStation">添加随机站点</a-button>
+          <a-button size="small" @click="removeLastStation" :disabled="groundStationState.groundStations.length === 0"
+            >移除最后一个</a-button
+          >
+          <a-button
+            size="small"
+            danger
+            @click="clearAllStations"
+            :disabled="groundStationState.groundStations.length === 0"
+            >清空所有</a-button
+          >
+          <span>当前站点数: {{ groundStationState.groundStations.length }}</span>
+          <span> | 选中站点数: {{ groundStationState.selectedIds.length }}</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" />
+        </div>
+      </a-card>
+
+      <!-- 卫星控制 -->
+      <a-card title="卫星控制" size="small">
+        <span>当前卫星数: {{ satelliteState.satellites.length }}</span>
+        <span> | 选中卫星数: {{ satelliteState.selectedIds.length }}</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" />
+        </div>
+      </a-card>
     </div>
     <div class="flex-grow w-full rounded-lg border overflow-hidden">
-      <!-- 将响应式列表和选中 ID 列表绑定到 prop -->
-      <h-cesium-viewer :ground-station-state>
+      <!-- 将地面站和卫星状态都传递给组件 -->
+      <h-cesium-viewer :ground-station-state :satellite-state>
         <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>