chore: 优化 hook 暴露方法的参数默认处理方式

src/components/Map/Mapbox/widgets/BottomBar/src/BottomBar.vue

@@ -15,23 +15,25 @@
         // 高度
         height: {
             type: Number,
-            default: 100,
+            default: 0,
         },
         // 最高高度
         maxHeight: {
             type: Number,
-            default: 200,
+            default: 0,
         },
     })
 
     const emits = defineEmits(['register'])
 
-    const iHeight = computed(() => `${props.height}rpx`)
-    const iMaxHeight = computed(() => `${props.maxHeight}rpx`)
+    const iHeight = computed(() => `${data.height}rpx`)
+    const iMaxHeight = computed(() => `${data.maxHeight}rpx`)
 
     const data = reactive({
         show: props.show,
         expand: props.expand,
+        height: props.height,
+        maxHeight: props.maxHeight,
     })
 
     function toggleShow(show?: boolean) {
@@ -50,7 +52,8 @@
         setProps,
         toggleShow,
         toggleExpand,
-        height: computed(() => (data.show ? `${(data.expand ? props.maxHeight : props.height) + 60}rpx` : '1rpx')),
+        // TODO: 此处高度还需考虑底部安全区
+        height: computed(() => (data.show ? `${(data.expand ? data.maxHeight : data.height) + 60}rpx` : '1rpx')),
     })
 </script>
 
@@ -127,6 +130,8 @@
             align-items: center;
             width: 100%;
             height: calc(100% - 60rpx - 20rpx);
+            overflow: hidden;
+            position: relative;
         }
     }
 </style>

src/components/Map/Mapbox/widgets/BottomBar/src/hook.ts

+import { getBooleanOrDefault } from '../../utils'
 import type { BottomBarInstance, BottomBarProps } from './types'
 import { isProdMode } from '/@/utils/env'
 
@@ -41,10 +42,10 @@ export function useBottomBarWidget<T extends BottomBarInstance>(props: BottomBar
                 getInstance()?.setProps(props)
             },
             toggleShow: (show?: boolean) => {
-                getInstance()?.toggleShow(show)
+                getInstance()?.toggleShow(getBooleanOrDefault(show))
             },
             toggleExpand: (expand?: boolean) => {
-                getInstance()?.toggleExpand(expand)
+                getInstance()?.toggleExpand(getBooleanOrDefault(expand))
             },
         } as T,
     ]

src/components/Map/Mapbox/widgets/Legend/src/hook.ts

+import { getBooleanOrDefault } from '../../utils'
 import type { LegendInstance, LegendProps, Option } from './types'
 import { isProdMode } from '/@/utils/env'
 
@@ -45,10 +46,10 @@ export function useLegendWidget<T extends LegendInstance>(props: LegendProps): [
                 getInstance()?.setOption(option)
             },
             toggleShow: (show?: boolean) => {
-                getInstance()?.toggleShow(show)
+                getInstance()?.toggleShow(getBooleanOrDefault(show))
             },
             toggleExpand: (expand?: boolean) => {
-                getInstance()?.toggleExpand(expand)
+                getInstance()?.toggleExpand(getBooleanOrDefault(expand))
             },
         } as T,
     ]

src/components/Map/Mapbox/widgets/SwitchControl/src/hook.ts

+import { getBooleanOrDefault } from '../../utils'
 import type { SwitchControlInstance, SwitchControlProps } from './types'
 import { isProdMode } from '/@/utils/env'
 
@@ -41,7 +42,7 @@ export function useSwitchControlWidget<T extends SwitchControlInstance>(
                 getInstance()?.setProps(props)
             },
             toggleShow: (show?: boolean) => {
-                getInstance()?.toggleShow(show)
+                getInstance()?.toggleShow(getBooleanOrDefault(show))
             },
             prev: () => {
                 getInstance()?.prev()

src/components/Map/Mapbox/widgets/utils.ts

+import { isBoolean } from 'lodash-es'
+
+export function getBooleanOrDefault(value: any, def = null): boolean {
+    return isBoolean(value) ? value : def
+}

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

@@ -36,21 +36,17 @@
     const [registerBottomBarWidget, { height }] = useBottomBarWidget({
         show: true,
         expand: true,
-        height: 100,
-        maxHeight: 200,
+        height: 150,
+        maxHeight: 240,
     })
-
-    function testPackUp() {
-        toggleLegendWidgetExpand()
-    }
 </script>
 
 <template>
-    <view class="bg-white h-100vh rain">
+    <view class="page h-100vh bg-white">
         <!-- 地图组件 -->
         <Mapbox :config="config" />
 
-        <!-- 交互组件集 -->
+        <!-- 地图上方所有小部件 -->
         <view class="widgets">
             <!--  -->
 
@@ -63,7 +59,7 @@
             <!-- 底部 Bar 小部件 -->
             <BottomBarWidget @register="registerBottomBarWidget">
                 <!-- 内容 Slot -->
-                <view class="c-coolGray" @tap="testPackUp">底部交互控件/展示内容</view>
+                <view class="c-coolGray" @tap="toggleLegendWidgetExpand">底部交互控件/展示内容</view>
             </BottomBarWidget>
         </view>
     </view>
@@ -71,21 +67,30 @@
 
 <style lang="scss" scoped>
     .widgets {
+        // 覆盖图例小部件的默认样式
         :deep(.legend) {
             bottom: calc(30rpx + v-bind(height));
 
             // 如果底部使用 bottom-left attribution 则需要加上 80rpx，默认显示在右侧，不会冲突
             // bottom: calc(30rpx + 80rpx + v-bind(height));
         }
+
+        // 覆盖底部 Bar 小部件的默认样式
+        // :deep(.bottom-bar) {
+        // }
+
+        // 前后切换小部件
+        // :deep(.switch-control) {
+        // }
     }
 
-    .rain {
+    .page {
         // #ifdef H5
         :deep(.mapboxgl-ctrl-bottom-right) {
-            bottom: calc(30rpx + 50rpx + v-bind(height));
+            bottom: calc(80rpx + v-bind(height));
         }
         :deep(.mapboxgl-ctrl-bottom-left) {
-            bottom: calc(30rpx + 50rpx + v-bind(height));
+            bottom: calc(80rpx + v-bind(height));
         }
         // #endif
         // #ifdef APP-PLUS