feat: 优化 Hook Basic 示例解包处理，减少重复代码

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

@@ -72,9 +72,9 @@
         </view>
 
         <!-- 自定义内容 -->
-        <view class="content flex-center">
+        <scroll-view scroll-y class="content flex-center">
             <slot></slot>
-        </view>
+        </scroll-view>
 
         <!-- 底部安全区 -->
         <fui-safe-area />

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

-import { getBasicWidgetInstanceFunctions, getBooleanOrDefault, registerFactory } from '../../utils'
+import { getBooleanOrDefault, registerWidgetFactory, unpackWidgetInstance } from '../../utils'
 import type { BottomBarInstance, BottomBarProps } from './types'
 
 // 组件名称
@@ -13,14 +13,13 @@ export function useBottomBarWidget<T extends BottomBarInstance, P extends Bottom
     props: P,
 ): [(instance: T) => void, BottomBarInstance] {
     const instanceRef = ref<T>()
-    const register = registerFactory(instanceRef, props)
-    const { get, setProps, toggleShow } = getBasicWidgetInstanceFunctions(instanceRef, name)
+    const register = registerWidgetFactory(instanceRef, props)
+    const { get, ...fns } = unpackWidgetInstance(instanceRef, name)
 
     return [
         register,
         {
-            setProps,
-            toggleShow,
+            ...fns,
             toggleExpand: (expand?: boolean) => get()?.toggleExpand(getBooleanOrDefault(expand)),
             height: computed(() => instanceRef?.value?.height) as unknown as ComputedRef<string>,
         },

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

-import { getBasicWidgetInstanceFunctions, getBooleanOrDefault, registerFactory } from '../../utils'
+import { getBooleanOrDefault, registerWidgetFactory, unpackWidgetInstance } from '../../utils'
 import type { LegendInstance, LegendProps, Option } from './types'
 
 // 组件名称
@@ -13,14 +13,13 @@ export function useLegendWidget<T extends LegendInstance, P extends LegendProps>
     props: P,
 ): [(instance: T) => void, LegendInstance] {
     const instanceRef = ref<T>()
-    const register = registerFactory(instanceRef, props)
-    const { get, setProps, toggleShow } = getBasicWidgetInstanceFunctions(instanceRef, name)
+    const register = registerWidgetFactory(instanceRef, props)
+    const { get, ...fns } = unpackWidgetInstance(instanceRef, name)
 
     return [
         register,
         {
-            setProps,
-            toggleShow,
+            ...fns,
             setTitle: (title: string) => get()?.setTitle(title),
             setOption: (option: Option) => get()?.setOption(option),
             toggleExpand: (expand?: boolean) => get()?.toggleExpand(getBooleanOrDefault(expand)),

src/components/Map/Widgets/SwitchControl/index.ts → src/components/Map/Widgets/Switch/index.ts

 export type * from './src/types'
 export * from './src/hook'
 
-export { default as SwitchControlWidget } from './src/SwitchControl.vue'
+export { default as SwitchWidget } from './src/Switch.vue'

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

@@ -20,9 +20,7 @@
     const data = reactive({
         show: props.show,
         bottom: props.bottom,
-        // 往前
         prev: () => {},
-        // 往后
         next: () => {},
     })
 

src/components/Map/Widgets/SwitchControl/src/hook.ts → src/components/Map/Widgets/Switch/src/hook.ts

-import { getBasicWidgetInstanceFunctions, registerFactory } from '../../utils'
+import { registerWidgetFactory, unpackWidgetInstance } from '../../utils'
 import type { SwitchControlInstance, SwitchControlProps } from './types'
 
 // 组件名称
@@ -9,18 +9,17 @@ export const name = 'SwitchControlWidget'
  * @param props 组件参数
  * @returns 组件响应式数据
  */
-export function useSwitchControlWidget<T extends SwitchControlInstance, P extends SwitchControlProps>(
+export function useSwitchWidget<T extends SwitchControlInstance, P extends SwitchControlProps>(
     props: P,
 ): [(instance: T) => void, SwitchControlInstance] {
     const instanceRef = ref<T>()
-    const register = registerFactory(instanceRef, props)
-    const { get, setProps, toggleShow } = getBasicWidgetInstanceFunctions(instanceRef, name)
+    const register = registerWidgetFactory(instanceRef, props)
+    const { get, ...fns } = unpackWidgetInstance(instanceRef, name)
 
     return [
         register,
         {
-            setProps,
-            toggleShow,
+            ...fns,
             prev: () => get()?.prev(),
             next: () => get()?.next(),
         },

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

 import type { Dayjs } from 'dayjs'
 
-import { getBasicWidgetInstanceFunctions, registerFactory } from '../../utils'
+import { registerWidgetFactory, unpackWidgetInstance } from '../../utils'
 import type { TimeBarInstance, TimeBarProps } from './types'
 
 // 组件名称
@@ -15,14 +15,13 @@ export function useTimeBarWidget<T extends TimeBarInstance, P extends TimeBarPro
     props: P,
 ): [(instance: T) => void, TimeBarInstance] {
     const instanceRef = ref<T>()
-    const register = registerFactory(instanceRef, props)
-    const { get, setProps, toggleShow } = getBasicWidgetInstanceFunctions(instanceRef, name)
+    const register = registerWidgetFactory(instanceRef, props)
+    const { get, ...fns } = unpackWidgetInstance(instanceRef, name)
 
     return [
         register,
         {
-            setProps,
-            toggleShow,
+            ...fns,
             getTime: () => get()?.getTime(),
             setTime: (time: Dayjs[]) => get()?.setTime(time),
             getCheckedOption: () => get()?.getCheckedOption(),

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

-import { getBasicWidgetInstanceFunctions, getBooleanOrDefault, registerFactory } from '../../utils'
+import { getBooleanOrDefault, registerWidgetFactory, unpackWidgetInstance } from '../../utils'
 import type { ToolBoxInstance, ToolBoxProps } from './types'
 
 // 组件名称
@@ -13,14 +13,13 @@ export function useToolBoxWidget<T extends ToolBoxInstance, P extends ToolBoxPro
     props: P,
 ): [(instance: T) => void, ToolBoxInstance] {
     const instanceRef = ref<T>()
-    const register = registerFactory(instanceRef, props)
-    const { get, setProps, toggleShow } = getBasicWidgetInstanceFunctions(instanceRef, name)
+    const register = registerWidgetFactory(instanceRef, props)
+    const { get, ...fns } = unpackWidgetInstance(instanceRef, name)
 
     return [
         register,
         {
-            setProps,
-            toggleShow,
+            ...fns,
             toggleExpand: (expand?: boolean) => get()?.toggleExpand(getBooleanOrDefault(expand)),
         },
     ]

src/components/Map/Widgets/utils.ts

@@ -35,7 +35,7 @@ export function getBooleanOrDefault(value: any, def = null): boolean {
  * @param props 组件属性
  * @param callback 回调函数
  */
-export function registerFactory<T extends BasicWidgetInstance<P>, P>(
+export function registerWidgetFactory<T extends BasicWidgetInstance<P>, P>(
     instanceRef: Ref<Nullable<T>>,
     props: P,
     callback?: (instance: T) => void,
@@ -65,7 +65,7 @@ export function registerFactory<T extends BasicWidgetInstance<P>, P>(
  * @param name 组件名称
  * @returns 组件实例
  */
-export function getInstance<T extends BasicWidgetInstance>(instanceRef: Ref<Nullable<T>>, name?: string): T {
+export function getWidgetInstance<T extends BasicWidgetInstance>(instanceRef: Ref<Nullable<T>>, name?: string): T {
     const instance = unref(instanceRef)
     if (!instance) {
         console.warn(`The ${name || 'widget'} instance has not been obtained`)
@@ -80,14 +80,14 @@ export function getInstance<T extends BasicWidgetInstance>(instanceRef: Ref<Null
  * @returns 组件实例函数
  * @example
  * ```ts
- * const { get, setProps, toggleShow } = getBasicWidgetInstanceFunctions<BasicWidgetInstance, BasicWidgetProps>(instanceRef, 'basic widget')
+ * const { get, setProps, toggleShow } = unpackWidgetInstance<BasicWidgetInstance, BasicWidgetProps>(instanceRef, 'basic widget')
  * ```
  */
-export function getBasicWidgetInstanceFunctions<T extends BasicWidgetInstance, P extends BasicWidgetProps>(
+export function unpackWidgetInstance<T extends BasicWidgetInstance, P extends BasicWidgetProps>(
     instanceRef: Ref<Nullable<T>>,
     name?: string,
 ) {
-    const get = () => getInstance(instanceRef, name)
+    const get = () => getWidgetInstance(instanceRef, name)
 
     return {
         get,

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

@@ -5,10 +5,10 @@
     import { useShare } from '@/hooks/page/useShare'
     import type { MapboxConfig } from '@/components/Map/Mapbox'
     import { LegendWidget, useLegendWidget } from '@/components/Map/Widgets/Legend'
+    import { SwitchWidget, useSwitchWidget } from '@/components/Map/Widgets/Switch'
     import { TimeBarWidget, formatTime, useTimeBarWidget } from '@/components/Map/Widgets/TimeBar'
     import { ToolBoxWidget, useToolBoxWidget } from '@/components/Map/Widgets/ToolBox'
     import { BottomBarWidget, useBottomBarWidget } from '@/components/Map/Widgets/BottomBar'
-    import { SwitchControlWidget, useSwitchControlWidget } from '@/components/Map/Widgets/SwitchControl'
 
     useShare()
 
@@ -197,7 +197,7 @@
     })
 
     // 前后切换小部件
-    const [registerSwitchControlWidget, { setProps: setSwitchControlProps }] = useSwitchControlWidget({
+    const [registerSwitchWidget, { setProps: setSwitchProps }] = useSwitchWidget({
         show: true,
         prev: () => {
             const { option, value } = getTimeBarValue()
@@ -240,7 +240,7 @@
             console.log('[useBottomBarWidget] height', value)
 
             setToolBoxProps({ bottom: value })
-            setSwitchControlProps({ bottom: value })
+            setSwitchProps({ bottom: value })
         },
     )
 </script>
@@ -259,7 +259,7 @@
             <ToolBoxWidget @register="registerToolBoxWidget" />
 
             <!-- 前后切换小部件 -->
-            <SwitchControlWidget @register="registerSwitchControlWidget" />
+            <SwitchWidget @register="registerSwitchWidget" />
 
             <!-- 图例小部件 -->
             <LegendWidget @register="registerLegendWidget" />
@@ -267,7 +267,7 @@
             <!-- 底部 Bar 小部件 -->
             <BottomBarWidget @register="registerBottomBarWidget">
                 <!-- 内容 Slot -->
-                <view class="c-coolGray" @tap="testPackUp">底部交互控件/展示内容</view>
+                <view class="flex-center c-gray" @tap="testPackUp">底部交互控件/展示内容</view>
             </BottomBarWidget>
         </view>
     </view>

types/components.d.ts

@@ -14,6 +14,7 @@ declare module 'vue' {
     FDragItem: typeof import('./../src/components/FirstUI/fui-drag/f-drag-item.vue')['default']
     FIndexListItem: typeof import('./../src/components/FirstUI/fui-index-list/f-index-list-item.vue')['default']
     FloatFillterWidget: typeof import('./../src/components/Map/Widgets/FloatFillterWidget.vue')['default']
+    FloatFilterWidget: typeof import('./../src/components/Map/Widgets/FloatFilterWidget.vue')['default']
     FuiActionsheet: typeof import('./../src/components/FirstUI/fui-actionsheet/fui-actionsheet.vue')['default']
     FuiAlert: typeof import('./../src/components/FirstUI/fui-alert/fui-alert.vue')['default']
     FuiAnimation: typeof import('./../src/components/FirstUI/fui-animation/fui-animation.vue')['default']
@@ -143,6 +144,7 @@ declare module 'vue' {
     MenuHeader: typeof import('./../src/components/Layout/MenuHeader.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    Switch: typeof import('./../src/components/Map/Widgets/Switch/src/Switch.vue')['default']
     SwitchControl: typeof import('./../src/components/Map/Widgets/SwitchControl/src/SwitchControl.vue')['default']
     ThumbnailPreview: typeof import('./../src/components/ThumbnailPreview/index.vue')['default']
     TimeBar: typeof import('./../src/components/Map/Widgets/TimeBar/src/TimeBar.vue')['default']