feat: 新增 Widget 小部件的使用说明，补充一个空白待开发的 AffixFilter

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

+export type * from './src/types'
+export * from './src/hook'
+
+export { default as AffixFilterWidget } from './src/AffixFilter.vue'
+
+/**
+ * 吸附过滤器组件
+ *
+ * 说明: 用于吸附在地图上的过滤器组件，可以用于筛选地图上的数据或改变查询条件等，支持的组件有: Select
+ *
+ * 可以应用到的一些模块:
+ *  1. 山洪地质灾害
+ *  2. 森林火险
+ *  3. 水情监测
+ *  4. 卫星云图
+ *  5. 形势场
+ *  ...
+ */

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

-<!-- 浮动过滤组件 -->
+<!-- 吸附过滤器组件 -->
 
 <script setup lang="ts">
     //
 </script>
 
 <template>
-    <view class="wrap float-filter">
+    <view class="wrap affix-filter">
         <!--  -->
     </view>
 </template>

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

+import { registerWidgetFactory, unpackWidgetInstance } from '../../utils'
+import type { AffixFilterInstance, AffixFilterProps, OptionItem } from './types'
+
+// 组件名称
+export const name = 'LegendWidget'
+
+/**
+ * 吸附过滤器组件
+ * @param props 组件参数
+ * @returns 组件响应式数据
+ */
+export function useAffixFilterWidget<T extends AffixFilterInstance, P extends AffixFilterProps>(
+    props: P,
+): [(instance: T) => void, AffixFilterInstance] {
+    const instanceRef = ref<T>()
+    const register = registerWidgetFactory(instanceRef, props)
+    const { get, ...fns } = unpackWidgetInstance(instanceRef, name)
+
+    return [
+        register,
+        {
+            ...fns,
+            setOptionItem: (key: string, item: OptionItem) => get()?.setOptionItem(key, item),
+        },
+    ]
+}

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

+import type { BasicWidgetInstance, BasicWidgetProps } from '../../utils'
+
+export interface OptionItem {
+    text: string
+    value: string
+    [key: string]: any
+}
+
+export interface Option {
+    // 标识
+    key: string
+    // 选项
+    items: OptionItem[]
+}
+
+export interface AffixFilterProps extends BasicWidgetProps {
+    // 布局方式，水平或垂直
+    layout: 'horizontal' | 'vertical'
+    // 选项，仅支持 Select
+    option: Option
+}
+
+export interface AffixFilterInstance extends BasicWidgetInstance<AffixFilterProps> {
+    setOptionItem: (key: string, item: OptionItem) => void
+}

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

@@ -2,3 +2,24 @@ export type * from './src/types'
 export * from './src/hook'
 
 export { default as BottomBarWidget } from './src/BottomBar.vue'
+
+/**
+ * 底部工具栏组件
+ *
+ * 说明: 此组件仅提供一个可交互的容器，用于放置其他组件，如: Tabs、Button 等一些自定义场景
+ *
+ * 可以应用到的一些模块:（基于已有蓝湖设计稿评估，仅供参考）
+ *  1. 降水监测
+ *  2. 气温监测
+ *  3. 相对湿度
+ *  4. 雷达拼图
+ *  5. 强对流监测
+ *  6. 冰雪天气
+ *  7. 台风监测
+ *  8. 卫星云图
+ *  9. 环境监测
+ *  10. 山洪地质灾害、面雨量相关
+ *  11. 相关预报模块
+ *  ...
+ *
+ */

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

@@ -12,11 +12,21 @@
             type: Boolean,
             default: false,
         },
+        // 展开按钮标题
+        expandTitle: {
+            type: String,
+            default: '',
+        },
         // 是否有展开按钮
         showExpandButton: {
             type: Boolean,
             default: true,
         },
+        // 是否有展开按钮下边框
+        showExpandBorder: {
+            type: Boolean,
+            default: false,
+        },
         // 高度
         height: {
             type: Number,
@@ -37,7 +47,9 @@
     const data = reactive({
         show: props.show,
         expand: props.expand,
+        expandTitle: props.expandTitle,
         showExpandButton: props.showExpandButton,
+        showExpandBorder: props.showExpandBorder,
         height: props.height,
         maxHeight: props.maxHeight,
     })
@@ -67,8 +79,14 @@
 
 <template>
     <view class="wrap bottom-bar" :class="{ expand: data.expand }" v-show="data.show">
-        <view class="action flex-center" @tap="toggleExpand()" v-show="data.showExpandButton">
-            <Icon icon="solar-double-alt-arrow-up-line-duotone" size="60" class="icon" />
+        <view
+            class="action flex-center"
+            :class="{ border: data.showExpandBorder }"
+            v-show="data.showExpandButton"
+            @tap="toggleExpand()"
+        >
+            <text class="text" v-if="data.expandTitle">{{ data.expandTitle }}</text>
+            <Icon icon="solar-double-alt-arrow-up-line-duotone" size="42" color="#999" class="icon" />
         </view>
 
         <!-- 自定义内容 -->
@@ -114,12 +132,23 @@
 
         .action {
             width: 100%;
+            position: relative;
+            top: -15rpx;
+            font-size: 24rpx;
+            color: #999;
+            padding-bottom: 10rpx;
+
+            &.border {
+                border-bottom: 2rpx solid #f6f6f6;
+            }
+
+            .text {
+                margin-right: 0.5em;
+            }
 
             .icon {
                 @include animate();
 
-                position: relative;
-                top: -20rpx;
                 transform: rotateX(0);
                 transform-style: preserve-3d;
             }

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

@@ -3,8 +3,12 @@ import type { BasicWidgetInstance, BasicWidgetProps } from '../../utils'
 export interface BottomBarProps extends BasicWidgetProps {
     // 是否展开
     expand?: boolean
+    // 展开标题
+    expandTitle?: string
     // 是否有展开按钮
     showExpandButton?: boolean
+    // 是否有展开边框
+    showExpandBorder?: boolean
     // 高度 rpx
     height: number
     // 最大高度 rpx

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

@@ -2,3 +2,14 @@ export type * from './src/types'
 export * from './src/hook'
 
 export { default as LegendWidget } from './src/Legend.vue'
+
+/**
+ * 图例组件
+ *
+ * 说明: 配合地图上的数据展示的图例，支持动态配置
+ *
+ * 可以应用到的一些模块:（基于已有蓝湖设计稿评估，仅供参考）
+ *  所有需要用到图例展示的模块
+ *  各种场景下的配置项，可以参考: \src\pages\business\monitor\rain\config.ts defaultLegendConfig
+ *
+ */

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

@@ -21,6 +21,11 @@
             type: String,
             default: '',
         },
+        // 底部距离 rpx
+        bottom: {
+            type: String,
+            default: '30rpx',
+        },
         // JSON 数据
         option: {
             type: Object as PropType<Option>,
@@ -33,11 +38,13 @@
     // 定义复用渲染组件
     const [DefineTemplate, ReuseTemplate] = createReusableTemplate<{ item: Recordable; sub?: boolean }>()
 
+    const positionBottom = computed(() => `calc(30rpx + ${data.bottom})`)
     const data = reactive({
         show: props.show,
         expand: props.expand,
         title: props.title,
         option: props.option,
+        bottom: props.bottom,
     })
 
     function setTitle(title: string) {
@@ -141,7 +148,7 @@
 
         position: absolute;
         left: 30rpx;
-        bottom: 30rpx;
+        bottom: v-bind(positionBottom);
         z-index: 99;
     }
 

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

@@ -27,6 +27,8 @@ export interface LegendProps extends BasicWidgetProps {
     title: string
     // 选项
     option: Option
+    // 底部距离 rpx
+    bottom?: string
 }
 
 export interface LegendInstance extends BasicWidgetInstance<LegendProps> {

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

@@ -2,3 +2,13 @@ export type * from './src/types'
 export * from './src/hook'
 
 export { default as SwitchWidget } from './src/Switch.vue'
+
+/**
+ * 前后切换组件
+ *
+ * 说明: 用于地图页面两侧的前后切换组件，通常与 TimeBarWidget 配合使用
+ *
+ * 可以应用到的一些模块:（基于已有蓝湖设计稿评估，仅供参考）
+ *  所有需要用到前后切换时间的场景，实况、预报等
+ *
+ */

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

@@ -2,3 +2,13 @@ export type * from './src/types'
 export * from './src/hook'
 
 export { default as TimeBarWidget } from './src/TimeBar.vue'
+
+/**
+ * 时间栏组件
+ *
+ * 说明: 用于页面顶部的时间选择和过滤
+ *
+ * 可以应用到的一些模块:（基于已有蓝湖设计稿评估，仅供参考）
+ * 所有需要用到时间轴的场景，实况、预报以及部分非地图的内页，均可以实现适配
+ *
+ */

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

@@ -2,3 +2,13 @@ export type * from './src/types'
 export * from './src/hook'
 
 export { default as ToolBoxWidget } from './src/ToolBox.vue'
+
+/**
+ * 工具箱组件
+ *
+ * 说明: 用于展示地图上的右侧的工具箱，支持的组件有: Select、Filter、Button 之类的实现
+ *
+ * 可以应用到的一些模块:（基于已有蓝湖设计稿评估，仅供参考）
+ * 所有需要用到工具箱的场景，实况、预报，以及部分需要使用 AffixFilter 的场景，也可以考虑并入到工具箱中
+ *
+ */

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

@@ -20,6 +20,11 @@
             type: Boolean,
             default: false,
         },
+        // 顶部距离 rpx
+        top: {
+            type: String,
+            default: '1rpx',
+        },
         // 底部距离 rpx
         bottom: {
             type: String,
@@ -42,11 +47,13 @@
     // 定义复用渲染组件
     const [DefineTemplate, ReuseTemplate] = createReusableTemplate<{ items: ToolBoxButton[] }>()
 
+    const positionTop = computed(() => `calc(125rpx + ${data.top})`)
     const height = computed(() => `calc(30rpx + ${data.bottomPadding} + ${data.bottom})`)
     const data = reactive({
         show: props.show,
         expand: props.expand,
         showExpandButton: props.showExpandButton,
+        top: props.top,
         bottom: props.bottom,
         bottomPadding: props.bottomPadding,
         tools: props.tools,
@@ -300,7 +307,7 @@
 
         .top {
             position: absolute;
-            top: 125rpx;
+            top: v-bind(positionTop);
             right: 30rpx;
             z-index: v-bind(zIndex);
         }

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

@@ -54,6 +54,8 @@ export interface ToolBoxProps extends BasicWidgetProps {
     expand?: boolean
     // 是否显示是否展开按钮
     showExpandButton?: boolean
+    // 顶部距离 rpx
+    top?: string
     // 底部距离 rpx
     bottom?: string
     // 底部内边距 rpx

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

@@ -214,7 +214,7 @@
     })
 
     // 图例小部件
-    const [registerLegendWidget, { toggleExpand: toggleLegendWidgetExpand }] = useLegendWidget({
+    const [registerLegendWidget, { setProps: setLegendProps }] = useLegendWidget({
         show: true,
         expand: true,
         title: defaultLegendConfig.title,
@@ -225,22 +225,21 @@
     const [registerBottomBarWidget, { height }] = useBottomBarWidget({
         show: true,
         expand: true,
+        // expandTitle: '工具栏',
+        // showExpandBorder: true,
         showExpandButton: true,
         height: 150,
         maxHeight: 240,
     })
 
-    function testPackUp() {
-        toggleLegendWidgetExpand()
-    }
-
     watch(
         () => height.value,
         (value) => {
             console.log('[useBottomBarWidget] height', value)
 
-            setToolBoxProps({ bottom: value })
             setSwitchProps({ bottom: value })
+            setLegendProps({ bottom: value })
+            setToolBoxProps({ bottom: value })
         },
     )
 </script>
@@ -267,30 +266,31 @@
             <!-- 底部 Bar 小部件 -->
             <BottomBarWidget @register="registerBottomBarWidget">
                 <!-- 内容 Slot -->
-                <view class="flex-center c-gray" @tap="testPackUp">底部交互控件/展示内容</view>
+                <view class="flex-center c-gray">底部交互控件/展示内容</view>
             </BottomBarWidget>
         </view>
     </view>
 </template>
 
 <style lang="scss" scoped>
-    .widgets {
-        // 覆盖图例小部件的默认样式
-        :deep(.legend) {
-            bottom: calc(30rpx + v-bind(height));
+    // .widgets {
+    // 覆盖图例小部件的默认样式
+    // :deep(.legend) {
+    // 现已调整为通过 watch 监听 height 值变化，动态设置底部 Bar 小部件的 bottom 值，这样方便由组件内部决定样式变化
+    // bottom: calc(30rpx + v-bind(height));
 
-            // 如果底部使用 bottom-left attribution 则需要加上 80rpx，默认显示在右侧，不会冲突
-            // bottom: calc(30rpx + 80rpx + v-bind(height));
-        }
+    // 如果底部使用 bottom-left attribution 则需要加上 80rpx，默认显示在右侧，不会冲突
+    // bottom: calc(30rpx + 80rpx + v-bind(height));
+    // }
 
-        // 覆盖底部 Bar 小部件的默认样式
-        // :deep(.bottom-bar) {
-        // }
+    // 覆盖底部 Bar 小部件的默认样式
+    // :deep(.bottom-bar) {
+    // }
 
-        // 前后切换小部件
-        // :deep(.switch-control) {
-        // }
-    }
+    // 前后切换小部件
+    // :deep(.switch-control) {
+    // }
+    // }
 
     .page {
         // #ifdef H5

types/components.d.ts

@@ -7,14 +7,13 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
+    AffixFilter: typeof import('./../src/components/Map/Widgets/AffixFilter/src/AffixFilter.vue')['default']
     BottomBar: typeof import('./../src/components/Map/Widgets/BottomBar/src/BottomBar.vue')['default']
     CacheImage: typeof import('./../src/components/CacheImage/index.vue')['default']
     CustomPicker: typeof import('./../src/components/CustomPicker/index.vue')['default']
     Empty: typeof import('./../src/components/Empty/index.vue')['default']
     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']