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

src/components/h-cesium-viewer/h-cesium-viewer-class.ts

@@ -33,7 +33,7 @@ export class HCesiumViewerCls {
    */
   addGroundStation(options: GroundStationOptions): Cesium.Entity | null {
     if (!this.viewer) {
-      console.error('视图未初始化。无法添加地面站。'); // 使用 console.error 替代抛出错误，以便在 index.vue 中处理
+      console.error('视图未初始化。无法添加地面站。');
       return null;
     }
 
@@ -101,13 +101,8 @@ export class HCesiumViewerCls {
     }
   }
 
-  // 移除 highlightStation 和 unhighlightStation 方法
-
   clearAllGroundStations() {
-    // ... (清理逻辑不变)
     if (!this.viewer) return;
-    // 优化：直接遍历 Map 清理，避免重复查找
-    // 使用 for...of 循环替代 forEach
     for (const entity of this.currentStationEntities.values()) {
       this.viewer?.entities.remove(entity);
     }
@@ -115,7 +110,6 @@ export class HCesiumViewerCls {
   }
 
   destroy() {
-    // ... (销毁逻辑不变)
     if (this.viewer) {
       this.clearAllGroundStations();
       this.viewer.destroy();

src/components/h-cesium-viewer/index.vue

@@ -1,62 +1,28 @@
 <script setup lang="ts">
 import 'cesium/Build/Cesium/Widgets/widgets.css';
 
-import { type GroundStationOptions, HCesiumViewerCls } from './h-cesium-viewer-class';
+// GroundStationOptions 不再直接使用，已在 types.ts 中被 GroundStationState 引用
+import type { GroundStationState } from './types'; // 从 types.ts 导入
+
+import { useHCesiumViewerCls } from './useHCesiumViewerCls';
+import { useHCesiumViewerClsGroundStation } from './useHCesiumViewerClsGroundStation';
+
+// GroundStationState 接口已移至 types.ts
 
 const props = defineProps<{
-  groundStationList?: Array<GroundStationOptions>;
-  selectedStationIds?: string[];
+  groundStationState?: GroundStationState;
 }>();
 
-const hCesiumViewerInst = new HCesiumViewerCls();
-if ($__DEV__) Object.assign(globalThis, { hCesiumViewerInst });
+// 1. 管理 Cesium Viewer 实例生命周期
+const { hCesiumViewerInst } = useHCesiumViewerCls('cesiumContainer');
 
-// 创建一个从 ID 到站点选项的映射，方便查找
-const stationMap = computed(() => {
-  const map = new Map<string, GroundStationOptions>();
-  // 使用 for...of 循环替代 forEach
-  for (const station of props.groundStationList ?? []) {
-    map.set(station.id, station);
-  }
-  return map;
-}); // <-- 修正：添加了缺失的 );
-
-onMounted(() => {
-  hCesiumViewerInst.initCesiumViewer('cesiumContainer');
-
-  // watchEffect: 同步 selectedStationIds 到 Cesium 实体
-  // 这个 effect 现在负责添加和移除实体
-  watchEffect(() => {
-    const selectedIdsSet = new Set(props.selectedStationIds ?? []); // 需要显示的站点 ID
-    const currentEntityIds = new Set(hCesiumViewerInst.currentStationEntities.keys()); // 当前已显示的站点 ID
-
-    // 1. 移除不再选中的站点
-    for (const entityId of currentEntityIds) {
-      if (!selectedIdsSet.has(entityId)) {
-        // 如果当前显示的实体不在新的选中列表里，则移除
-        hCesiumViewerInst.removeGroundStationById(entityId);
-      }
-    }
-
-    // 2. 添加新增的选中站点
-    for (const selectedId of selectedIdsSet) {
-      if (!currentEntityIds.has(selectedId)) {
-        // 如果选中的 ID 对应的实体当前未显示，则添加
-        const stationToAdd = stationMap.value.get(selectedId); // 从映射中查找站点信息
-        if (stationToAdd) {
-          hCesiumViewerInst.addGroundStation(stationToAdd);
-        } else {
-          // 如果在 groundStationList 中找不到对应的站点信息，发出警告
-          console.warn(`无法找到 ID 为 "${selectedId}" 的站点信息，无法添加到地图。`);
-        }
-      }
-    }
-  });
-});
-
-onBeforeUnmount(() => {
-  hCesiumViewerInst.destroy();
-});
+// 2. 同步地面站实体
+// 将实例的 getter 和 props 的 getter 传递给组合函数
+useHCesiumViewerClsGroundStation(
+  () => hCesiumViewerInst, // 传递 getter 以处理实例可能为 null 的情况
+  () => props.groundStationState?.groundStations, // 从新的 prop 中获取列表
+  () => props.groundStationState?.selectedIds, // 从新的 prop 中获取选中 ID
+);
 </script>
 
 <template>
@@ -70,10 +36,4 @@ onBeforeUnmount(() => {
   min-height: 300px;
   background-color: #000;
 }
-:deep(.cesium-widget),
-:deep(.cesium-widget canvas) {
-  width: 100%;
-  height: 100%;
-  touch-action: none;
-}
 </style>

src/components/h-cesium-viewer/types.ts

@@ -0,0 +1,12 @@
+import type { GroundStationOptions } from './h-cesium-viewer-class';
+
+/**
+ * 地面站状态接口
+ * 包含地面站列表和当前选中的地面站 ID 列表
+ */
+export interface GroundStationState {
+  /** 地面站配置数组 */
+  groundStations: GroundStationOptions[];
+  /** 选中的地面站 ID 数组 */
+  selectedIds: string[];
+}

src/components/h-cesium-viewer/useHCesiumViewerCls.ts

@@ -0,0 +1,24 @@
+// src/utils/useHCesiumViewerCls.ts
+import { HCesiumViewerCls } from '@/components/h-cesium-viewer/h-cesium-viewer-class';
+
+/**
+ * 管理 HCesiumViewerCls 实例的生命周期。
+ * @param containerId - Cesium Viewer 容器的 DOM ID。
+ * @returns 返回 HCesiumViewerCls 实例。
+ */
+export function useHCesiumViewerCls(containerId: string) {
+  const hCesiumViewerInst = new HCesiumViewerCls();
+  if ($__DEV__) Object.assign(globalThis, { hCesiumViewerInst }); // 仅在开发模式下暴露到全局
+
+  onMounted(() => {
+    hCesiumViewerInst.initCesiumViewer(containerId);
+  });
+
+  onBeforeUnmount(() => {
+    hCesiumViewerInst.destroy();
+  });
+
+  return {
+    hCesiumViewerInst,
+  };
+}

src/components/h-cesium-viewer/useHCesiumViewerClsGroundStation.ts

@@ -0,0 +1,65 @@
+// src/utils/useHCesiumViewerClsGroundStation.ts
+import type { GroundStationOptions, HCesiumViewerCls } from '@/components/h-cesium-viewer/h-cesium-viewer-class';
+import type { MaybeRefOrGetter } from 'vue';
+
+/**
+ * 管理 Cesium Viewer 中的地面站实体，根据选中的 ID 列表进行同步。
+ * @param hCesiumViewerInst - HCesiumViewerCls 实例或其 getter。
+ * @param groundStationList - 包含所有可用地面站选项的数组或 getter。
+ * @param selectedStationIds - 包含当前选中地面站 ID 的数组或 getter。
+ */
+export function useHCesiumViewerClsGroundStation(
+  hCesiumViewerInst: MaybeRefOrGetter<HCesiumViewerCls | null>,
+  groundStationList: MaybeRefOrGetter<Array<GroundStationOptions> | undefined>,
+  selectedStationIds: MaybeRefOrGetter<string[] | undefined>,
+) {
+  // 创建一个从 ID 到站点选项的映射，方便查找
+  const stationMap = computed(() => {
+    const map = new Map<string, GroundStationOptions>();
+    const list = toValue(groundStationList) ?? [];
+    for (const station of list) {
+      map.set(station.id, station);
+    }
+    return map;
+  });
+
+  // watchEffect: 同步 selectedStationIds 到 Cesium 实体
+  watchEffect(() => {
+    const viewerInstance = toValue(hCesiumViewerInst);
+    if (!viewerInstance) {
+      // 如果 viewer 实例尚未初始化或已销毁，则不执行任何操作
+      return;
+    }
+
+    const selectedIds = toValue(selectedStationIds) ?? [];
+    const selectedIdsSet = new Set(selectedIds); // 需要显示的站点 ID
+    const currentEntityIds = new Set(viewerInstance.currentStationEntities.keys()); // 当前已显示的站点 ID
+
+    // 1. 移除不再选中的站点
+    for (const entityId of currentEntityIds) {
+      if (!selectedIdsSet.has(entityId)) {
+        // 如果当前显示的实体不在新的选中列表里，则移除
+        viewerInstance.removeGroundStationById(entityId);
+      }
+    }
+
+    // 2. 添加新增的选中站点
+    for (const selectedId of selectedIdsSet) {
+      if (!currentEntityIds.has(selectedId)) {
+        // 如果选中的 ID 对应的实体当前未显示，则添加
+        const stationToAdd = stationMap.value.get(selectedId); // 从映射中查找站点信息
+        if (stationToAdd) {
+          viewerInstance.addGroundStation(stationToAdd);
+        } else {
+          // 如果在 groundStationList 中找不到对应的站点信息，发出警告
+          consola.warn(`无法找到 ID 为 "${selectedId}" 的站点信息，无法添加到地图。`);
+        }
+      }
+    }
+  });
+
+  // 返回 stationMap 可能在某些场景下有用，例如调试或扩展
+  return {
+    stationMap, // 可以考虑是否真的需要返回这个
+  };
+}