feat: 优化卫星选择器标题显示,增强用户交互体验
This commit is contained in:
@ -131,20 +131,19 @@ const onCheckAllChange = (e: { target: { checked: boolean } }) => {
|
||||
<template>
|
||||
<div id="cesiumContainer" class="z-0">
|
||||
<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>
|
||||
<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>
|
||||
</AInput>
|
||||
|
||||
<!-- 选择状态信息 -->
|
||||
<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" />
|
||||
<ADivider class="my-3" />
|
||||
|
||||
<!-- 无结果提示 -->
|
||||
<div v-if="filteredSatellites.length === 0" class="text-center text-gray-500 py-4">没有找到匹配的卫星</div>
|
||||
|
Reference in New Issue
Block a user