feat: 优化 Widgets 的高度或定位响应式计算方式，AffixFilter 完善

src/components/Map/Widgets/AffixFilter/src/AffixFilter.vue

 <!-- 吸附过滤器组件 -->
 
 <script setup lang="ts">
-    import type { Option } from './types'
+    import type { Option, OptionItem } from './types'
 
     const props = defineProps({
         // 是否显示
@@ -21,13 +21,13 @@
         },
         // 距离顶部的距离
         top: {
-            type: String,
-            default: '125rpx',
+            type: Number,
+            default: 125,
         },
         // 距离左侧的距离
         left: {
-            type: String,
-            default: '30rpx',
+            type: Number,
+            default: 30,
         },
         // 选项
         options: {
@@ -38,8 +38,8 @@
 
     const emits = defineEmits(['register'])
 
-    const positionTop = computed(() => data.top)
-    const positionLeft = computed(() => data.left)
+    const positionTop = computed(() => `${data.top}rpx`)
+    const positionLeft = computed(() => `${data.left}rpx`)
     const data = reactive({
         show: props.show,
         layout: props.layout,
@@ -57,6 +57,27 @@
         Object.assign(data, value)
     }
 
+    function setOptionItems(key: string, items: OptionItem[]) {
+        data.options = data.options.map((option) => {
+            if (option.key === key) {
+                option.items = items
+            }
+            return option
+        })
+    }
+
+    function setOptionItemChecked(key: string, value: string) {
+        data.options = data.options.map((option) => {
+            if (option.key === key) {
+                option.items = option.items.map((item) => {
+                    item.checked = item.value === value
+                    return item
+                })
+            }
+            return option
+        })
+    }
+
     const zIndex = computed(() => (model.show ? 200 : 110))
     const model = reactive({
         show: false,
@@ -114,6 +135,8 @@
     emits('register', {
         setProps,
         toggleShow,
+        setOptionItems,
+        setOptionItemChecked,
     })
 </script>
 

src/components/Map/Widgets/AffixFilter/src/types.ts

@@ -39,12 +39,12 @@ export interface AffixFilterProps extends BasicWidgetProps {
      * 距离顶部的距离 rpx
      * @default 130rpx
      */
-    top?: string
+    top?: number
     /**
      * 距离左侧的距离 rpx
      * @default 30rpx
      */
-    left?: string
+    left?: number
     /**
      * 过滤选项集合，仅支持 Select
      */
@@ -55,7 +55,13 @@ export interface AffixFilterInstance extends BasicWidgetInstance<AffixFilterProp
     /**
      * 设置选项
      * @param key 选项标识
-     * @param item 选项可选 options
+     * @param items 选项可选 options
      */
-    setOptionItem: (key: string, item: OptionItem) => void
+    setOptionItems: (key: string, items: OptionItem[]) => void
+    /**
+     * 设置选项选中
+     * @param key 选项标识
+     * @param value 选项值
+     */
+    setOptionItemChecked: (key: string, value: string) => void
 }

src/components/Map/Widgets/BottomBar/src/BottomBar.vue

@@ -15,7 +15,6 @@
         // 展开按钮标题
         expandTitle: {
             type: String,
-            default: '',
         },
         // 是否有展开按钮
         showExpandButton: {
@@ -73,7 +72,7 @@
         toggleShow,
         toggleExpand,
         // TODO: 此处高度还需考虑底部安全区
-        height: computed(() => (data.show ? `${(data.expand ? data.maxHeight : data.height) + 30}rpx` : '1rpx')),
+        height: computed(() => (data.show ? (data.expand ? data.maxHeight : data.height) : 0)),
     })
 </script>
 

src/components/Map/Widgets/BottomBar/src/hook.ts

@@ -21,7 +21,7 @@ export function useBottomBarWidget<T extends BottomBarInstance, P extends Bottom
         {
             ...fns,
             toggleExpand: (expand?: boolean) => get()?.toggleExpand(getBooleanOrDefault(expand)),
-            height: computed(() => instanceRef?.value?.height) as unknown as ComputedRef<string>,
+            height: computed(() => instanceRef?.value?.height) as unknown as ComputedRef<number>,
         },
     ]
 }

src/components/Map/Widgets/BottomBar/src/types.ts

 import type { BasicWidgetInstance, BasicWidgetProps } from '../../utils'
 
 export interface BottomBarProps extends BasicWidgetProps {
-    // 是否展开
+    /**
+     * 是否展开
+     * @default false
+     */
     expand?: boolean
-    // 展开标题
+    /**
+     * 展开标题
+     */
     expandTitle?: string
-    // 是否有展开按钮
+    /**
+     * 是否有展开按钮
+     * @default true
+     */
     showExpandButton?: boolean
-    // 是否有展开边框
+    /**
+     * 是否有展开边框
+     * @default false
+     */
     showExpandBorder?: boolean
-    // 高度 rpx
+    /**
+     * 高度 rpx
+     * @default 0 rpx
+     */
     height: number
-    // 最大高度 rpx
+    /**
+     * 最大高度 rpx
+     * @default 0 rpx
+     */
     maxHeight?: number
 }
 
@@ -19,7 +36,7 @@ export interface BottomBarInstance extends BasicWidgetInstance<BottomBarProps> {
     /**
      * 响应式组件当前高度，单位 rpx
      */
-    height: ComputedRef<string>
+    height: ComputedRef<number>
     /**
      * 切换展开状态
      * @param expand 是否展开

src/components/Map/Widgets/Legend/src/Legend.vue

@@ -4,6 +4,7 @@
     import { isArray } from 'lodash-es'
     import { createReusableTemplate } from '@vueuse/core'
     import type { Option } from './types'
+    import { cssAdditionCalc } from '@/components/Map/Widgets/utils'
 
     const props = defineProps({
         // 显示
@@ -19,12 +20,11 @@
         // 标题
         title: {
             type: String,
-            default: '',
         },
         // 底部距离 rpx
         bottom: {
-            type: String,
-            default: '30rpx',
+            type: Number,
+            default: 0,
         },
         // JSON 数据
         option: {
@@ -38,7 +38,7 @@
     // 定义复用渲染组件
     const [DefineTemplate, ReuseTemplate] = createReusableTemplate<{ item: Recordable; sub?: boolean }>()
 
-    const positionBottom = computed(() => `calc(${data.bottom})`)
+    const positionBottom = computed(() => cssAdditionCalc(30, data.bottom))
     const data = reactive({
         show: props.show,
         expand: props.expand,

src/components/Map/Widgets/Legend/src/types.ts

@@ -21,14 +21,24 @@ export interface Option {
 }
 
 export interface LegendProps extends BasicWidgetProps {
-    // 是否展开
+    /**
+     * 是否展开
+     * @default false
+     */
     expand?: boolean
-    // 标题
+    /**
+     * 标题
+     */
     title: string
-    // 选项
+    /**
+     * 选项
+     */
     option: Option
-    // 底部距离 rpx
-    bottom?: string
+    /**
+     * 底部距离 rpx
+     * @default 0
+     */
+    bottom?: number
 }
 
 export interface LegendInstance extends BasicWidgetInstance<LegendProps> {

src/components/Map/Widgets/Switch/src/Switch.vue

@@ -9,14 +9,14 @@
         },
         // 底部距离 rpx
         bottom: {
-            type: String,
-            default: '1rpx',
+            type: Number,
+            default: 0,
         },
     })
 
     const emits = defineEmits(['register', 'prev', 'next'])
 
-    const height = computed(() => `calc(50% - 60rpx - ${Number(data.bottom.replace('rpx', '')) / 2}rpx)`)
+    const height = computed(() => `calc(50% - 60rpx${data.bottom ? ` - ${data.bottom / 2}rpx` : ''})`)
     const data = reactive({
         show: props.show,
         bottom: props.bottom,

src/components/Map/Widgets/Switch/src/types.ts

@@ -2,7 +2,7 @@ import type { BasicWidgetInstance, BasicWidgetProps } from '../../utils'
 
 export interface SwitchControlProps extends BasicWidgetProps {
     // 底部距离 rpx
-    bottom?: string
+    bottom?: number
     // 上一个
     prev?: () => void
     // 下一个

src/components/Map/Widgets/TimeBar/src/types.ts

@@ -44,15 +44,28 @@ export interface TimeBarButton {
 }
 
 export interface TimeBarProps extends BasicWidgetProps {
-    // 是否只读
+    /**
+     * 是否只读
+     * @default false
+     */
     readonly?: boolean
-    // 对齐方式
+    /**
+     * 对齐方式
+     * @default left
+     */
     align?: 'left' | 'center' | 'right'
-    // 标题
+    /**
+     * 标题
+     * @default { text: '时间' }
+     */
     label?: TimeBarLabel
-    // 时间
+    /**
+     * 时间
+     */
     time: TimeBarTime
-    // 扩展按钮
+    /**
+     * 扩展按钮
+     */
     buttons?: TimeBarButton[]
 }
 

src/components/Map/Widgets/ToolBox/src/ToolBox.vue

@@ -3,6 +3,7 @@
 <script setup lang="ts">
     import { createReusableTemplate } from '@vueuse/core'
     import type { ToolBoxButton, ToolBoxButtonGroup } from './types'
+    import { cssAdditionCalc } from '@/components/Map/Widgets/utils'
 
     const props = defineProps({
         // 显示
@@ -22,18 +23,18 @@
         },
         // 顶部距离 rpx
         top: {
-            type: String,
-            default: '1rpx',
+            type: Number,
+            default: 0,
         },
         // 底部距离 rpx
         bottom: {
-            type: String,
-            default: '1rpx',
+            type: Number,
+            default: 0,
         },
         // 底部内边距 rpx (用于避免遮挡)
         bottomPadding: {
-            type: String,
-            default: '1rpx',
+            type: Number,
+            default: 0,
         },
         // 工具集
         tools: {
@@ -47,9 +48,8 @@
     // 定义复用渲染组件
     const [DefineTemplate, ReuseTemplate] = createReusableTemplate<{ items: ToolBoxButton[] }>()
 
-    const positionTop = computed(() => `calc(125rpx + ${data.top})`)
-    // BottomBar 改为 border-box 宽高不再计算padding
-    const height = computed(() => `calc(${data.bottomPadding} + ${data.bottom})`)
+    const positionTop = computed(() => cssAdditionCalc(95, 30, data.top))
+    const height = computed(() => cssAdditionCalc(30, data.bottom, data.bottomPadding))
     const data = reactive({
         show: props.show,
         expand: props.expand,

src/components/Map/Widgets/ToolBox/src/types.ts

@@ -50,17 +50,34 @@ export interface ToolBoxButtonGroup {
 }
 
 export interface ToolBoxProps extends BasicWidgetProps {
-    // 是否展开
+    /**
+     * 是否展开
+     * @default true
+     */
     expand?: boolean
-    // 是否显示是否展开按钮
+    /**
+     * 是否显示是否展开按钮
+     * @default true
+     */
     showExpandButton?: boolean
-    // 顶部距离 rpx
-    top?: string
-    // 底部距离 rpx
-    bottom?: string
-    // 底部内边距 rpx
-    bottomPadding?: string
-    // 工具集
+    /**
+     * 顶部距离 rpx
+     * @default 0
+     */
+    top?: number
+    /**
+     * 底部距离 rpx
+     * @default 0
+     */
+    bottom?: number
+    /**
+     * 底部内边距 rpx
+     * @default 0
+     */
+    bottomPadding?: number
+    /**
+     * 工具集
+     */
     tools?: ToolBoxButtonGroup[]
 }
 

src/components/Map/Widgets/utils.ts

@@ -2,7 +2,10 @@ import { isBoolean } from 'lodash-es'
 import { isProdMode } from '@/utils/env'
 
 export interface BasicWidgetProps {
-    // 是否显示
+    /**
+     * 是否显示
+     * @default true
+     */
     show?: boolean
 }
 
@@ -95,3 +98,21 @@ export function unpackWidgetInstance<T extends BasicWidgetInstance, P extends Ba
         toggleShow: (show?: boolean) => get()?.toggleShow(getBooleanOrDefault(show)),
     } as T & { get: () => T }
 }
+
+/**
+ * css calc 加法计算函数
+ * @param values rpx 数值
+ * @returns css calc 函数或 rpx 数值
+ */
+export function cssAdditionCalc(...values: number[]): string {
+    const result = values
+        .filter((item) => item)
+        .map((item) => `${item}rpx`)
+        .join(' + ')
+
+    if (result.includes('+')) {
+        return `calc(${result})`
+    } else {
+        return result
+    }
+}

src/pages/business/monitor/tem/index.vue

@@ -252,7 +252,7 @@
 
             // 当底部 Bar 小部件高度变化时，重新设置地图的中心点，使界面显示效果更好
             if (map.isReady.value) {
-                if (value === '210rpx') {
+                if (value === 150) {
                     map.flyTo({
                         center: [111.6, 26.770844],
                         speed: 0.2,