refactor: 重构卫星选择器组件，优化布局和交互细节

src/pages/Satellite/Cesium/components/SatelliteSelector.vue

@@ -57,13 +57,6 @@ watchEffect(() => {
   state.indeterminate = count > 0 && count < filteredCount;
   state.checkAll = count === filteredCount && filteredCount > 0;
 });
-
-// 切换卫星选中状态
-const toggleSatellite = (satellite: SatelliteItem) => {
-  satellite.selected = !satellite.selected;
-  updateSatelliteEntity(satellite);
-};
-
 // 更新卫星实体（添加或移除）
 const updateSatelliteEntity = (satellite: SatelliteItem) => {
   if (!viewer) return;
@@ -87,6 +80,12 @@ const updateSatelliteEntity = (satellite: SatelliteItem) => {
   }
 };
 
+// 切换卫星选中状态
+const toggleSatellite = (satellite: SatelliteItem) => {
+  satellite.selected = !satellite.selected;
+  updateSatelliteEntity(satellite);
+};
+
 // 全选/取消全选
 const onCheckAllChange = (e: { target: { checked: boolean } }) => {
   const checked = e.target.checked;
@@ -114,46 +113,44 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div class="absolute top-0 left-0 p-4">
+  <div class="absolute left-0 top-0 p-4">
-    <APopover placement="bottomLeft" trigger="click" :overlayStyle="{ width: '320px' }">
+    <APopover :overlay-style="{ width: '320px' }" placement="bottomLeft" trigger="click">
       <template #title>
         选择卫星
-        <span class="font-normal text-xs text-gray-500">{{ `(已选择: ${selectedCount}/${totalCount})` }}</span>
+        <span class="text-xs font-normal text-gray-500">{{ `(已选择: ${selectedCount}/${totalCount})` }}</span>
       </template>
       <template #content>
-        <div class="satellite-selector">
+        <!-- 搜索框 -->
-          <!-- 搜索框 -->
+        <AInput v-model:value="state.searchText" allow-clear placeholder="搜索卫星">
-          <AInput v-model:value="state.searchText" placeholder="搜索卫星" allowClear>
+          <template #prefix><SearchOutlined /></template>
-            <template #prefix><SearchOutlined /></template>
+        </AInput>
-          </AInput>
 
-          <ADivider class="my-3" />
+        <ADivider class="my-3" />
 
-          <!-- 无结果提示 -->
+        <!-- 无结果提示 -->
-          <div v-if="filteredSatellites.length === 0" class="text-center text-gray-500 py-4">没有找到匹配的卫星</div>
+        <div v-if="filteredSatellites.length === 0" class="py-4 text-center text-gray-500">没有找到匹配的卫星</div>
 
-          <!-- 全选选项 -->
+        <!-- 全选选项 -->
+        <ACheckbox
+          v-if="filteredSatellites.length > 0"
+          :checked="state.checkAll"
+          :indeterminate="state.indeterminate"
+          @change="onCheckAllChange"
+        >
+          全选
+        </ACheckbox>
+
+        <!-- 卫星列表 -->
+        <div class="satellite-list max-h-60 overflow-y-auto pr-1">
           <ACheckbox
-            v-if="filteredSatellites.length > 0"
+            v-for="satellite in filteredSatellites"
-            :checked="state.checkAll"
+            :key="satellite.tle"
-            :indeterminate="state.indeterminate"
+            :checked="satellite.selected"
-            @change="onCheckAllChange"
+            class="my-2 flex w-full"
+            @change="() => toggleSatellite(satellite)"
           >
-            全选
+            {{ satellite.name }}
           </ACheckbox>
-
-          <!-- 卫星列表 -->
-          <div class="satellite-list max-h-60 overflow-y-auto pr-1">
-            <ACheckbox
-              v-for="satellite in filteredSatellites"
-              :key="satellite.tle"
-              :checked="satellite.selected"
-              @change="() => toggleSatellite(satellite)"
-              class="flex my-2 w-full"
-            >
-              {{ satellite.name }}
-            </ACheckbox>
-          </div>
         </div>
       </template>
 
@@ -165,22 +162,3 @@ onBeforeUnmount(() => {
     </APopover>
   </div>
 </template>
-
-<style scoped>
-.satellite-list {
-  scrollbar-width: thin;
-}
-
-.satellite-list::-webkit-scrollbar {
-  width: 4px;
-}
-
-.satellite-list::-webkit-scrollbar-thumb {
-  background-color: rgba(0, 0, 0, 0.2);
-  border-radius: 4px;
-}
-
-.satellite-selector {
-  max-height: 80vh;
-}
-</style>