feat: 优化卫星选择器标题显示,增强用户交互体验
All checks were successful
/ depcheck (push) Successful in 2m8s
/ lint-build-and-check (push) Successful in 2m34s
/ build-and-deploy-to-vercel (push) Successful in 3m14s
/ surge (push) Successful in 3m6s
/ playwright (push) Successful in 5m3s

This commit is contained in:
严浩
2025-03-12 14:06:19 +08:00
parent ab38d2a3f6
commit ff46fdd637

View File

@ -131,20 +131,19 @@ const onCheckAllChange = (e: { target: { checked: boolean } }) => {
<template> <template>
<div id="cesiumContainer" class="z-0"> <div id="cesiumContainer" class="z-0">
<div class="absolute top-0 left-0 p-4 z-10"> <div class="absolute top-0 left-0 p-4 z-10">
<APopover placement="bottomLeft" title="选择卫星" trigger="click" :overlayStyle="{ width: '320px' }"> <APopover placement="bottomLeft" trigger="click" :overlayStyle="{ width: '320px' }">
<template #title>
选择卫星
<span class="font-normal text-xs text-gray-500">{{ `(已选择: ${selectedCount}/${totalCount})` }}</span>
</template>
<template #content> <template #content>
<div class="satellite-selector"> <div class="satellite-selector">
<!-- 搜索框 --> <!-- 搜索框 -->
<AInput class="mb-3" v-model:value="state.searchText" placeholder="搜索卫星" allowClear> <AInput v-model:value="state.searchText" placeholder="搜索卫星" allowClear>
<template #prefix><SearchOutlined /></template> <template #prefix><SearchOutlined /></template>
</AInput> </AInput>
<!-- 选择状态信息 --> <ADivider class="my-3" />
<div class="flex justify-between items-center mb-2">
<span class="text-xs text-gray-500">已选择: {{ selectedCount }}/{{ totalCount }}</span>
</div>
<ADivider style="margin: 8px 0" />
<!-- 无结果提示 --> <!-- 无结果提示 -->
<div v-if="filteredSatellites.length === 0" class="text-center text-gray-500 py-4">没有找到匹配的卫星</div> <div v-if="filteredSatellites.length === 0" class="text-center text-gray-500 py-4">没有找到匹配的卫星</div>