MSearch 搜索表单组件文档

组件概述

MSearch 是一个高级搜索表单组件，基于 MForm 封装，提供搜索、重置功能和可折叠的表单项布局。支持键盘快捷键（回车触发搜索）和自定义按钮组。

组件特性

• 智能折叠：当表单项超过 2 个时自动支持展开/收起功能
• 键盘支持：回车键自动触发搜索
• 灵活布局：自适应 3 列布局
• 主题集成：支持通过 CompThemeProvider 定制主题
• 自定义扩展：支持完全自定义按钮组

组件属性 (IMSearchProps)

属性名	类型	默认值	描述
form	FormInstance	-	Antd Form 实例（可选，不传会自动创建）
searchItems	IMFormItem[]	[]	搜索表单项配置数组
className	string	-	自定义容器类名
onSearch	(params: any, isReset: boolean) => any	-	搜索回调函数，返回表单数据和是否重置状态
defaultShowAll	boolean	false	是否默认展开所有搜索项
customButtons	ButtonProps[]	[]	自定义按钮组配置（设置后将替换默认的搜索/重置按钮）

使用示例

基本搜索表单

<MSearch
    searchItems={[
        {
            id: 'name',
            label: '姓名',
            type: MFormItemTypeEnum.Input,
            placeholder: '请输入姓名',
        },
        {
            id: 'age',
            label: '年龄',
            type: MFormItemTypeEnum.InputNumber,
        },
    ]}
    onSearch={values => console.log(values)}
/>

带默认展开状态的复杂搜索

<MSearch
    defaultShowAll={true}
    searchItems={[
        { id: 'name', label: '姓名', type: MFormItemTypeEnum.Input },
        { id: 'department', label: '部门', type: MFormItemTypeEnum.Select },
        { id: 'date', label: '入职日期', type: MFormItemTypeEnum.DatePicker },
        { id: 'status', label: '状态', type: MFormItemTypeEnum.Radio },
    ]}
    onSearch={(values, isReset) => {
        if (isReset) {
            // 处理重置逻辑
        } else {
            // 处理搜索逻辑
        }
    }}
/>

自定义按钮组

<MSearch
  searchItems={[...]}
  customButtons={[
    {
      type: 'primary',
      children: '高级搜索',
      onClick: () => console.log('高级搜索')
    },
    {
      children: '导出',
      onClick: () => console.log('导出')
    }
  ]}
/>

功能细节

键盘支持

• 组件监听回车键（keyCode 13）自动触发搜索
• 在搜索表单区域内按下回车键会调用 onSearch 回调

折叠逻辑

• 当 searchItems 数量超过 2 个时，显示"展开/收起"按钮
• 默认只显示前 2 个搜索项，点击"展开"显示全部
• 可通过 defaultShowAll 控制初始展开状态