feat: 优化卫星选择器标题显示,增强用户交互体验
This commit is contained in:
@ -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>
|
||||||
|
Reference in New Issue
Block a user