feat(components): 添加表单抽屉Pro组件并重构搜索表单

- 新增 CuteFormDrawerPro 组件，支持 Schema 配置的表单抽屉
- 新增 CuteFormDrawerProDemo 演示页面
- 添加 CuteSearchFormDemo 和 CuteSearchFormProDemo 演示页面
- 移除废弃的 CuteOtherDemo 和 CuteSimpleTableDemo 页面
- 重构 CuteSearchForm 和 CuteSearchFormPro，将 submit 事件改为 search 事件
- 重构 CuteSearchForm 和 CuteSearchFormPro，移除 disabled 属性
- 修正 CuteFormDialogPro 组件名称拼写错误
- 更新组件演示页面索引，添加新的搜索和抽屉组件演示
- 在拖拽表格和简单表格演示中添加刷新数据方法和表单模型

cutejava-front/src/views/components/advanced/CuteFormDialogPro.vue

@@ -90,7 +90,7 @@
 <script>
 
 export default {
-  name: 'CuteFormProDialog',
+  name: 'CuteFormDialogPro',
   props: {
     /**
      * 弹窗标题

cutejava-front/src/views/components/advanced/CuteFormDrawerPro.vue

@@ -0,0 +1,269 @@
+<!--
+ * 表单抽屉Pro
+ * @author odboy
+ * @email tianjun@odboy.cn
+ * @created 2026-02-04
+ -->
+<template>
+  <el-drawer
+    :title="title"
+    :visible.sync="visible"
+    :size="width"
+    :before-close="beforeClose"
+    :append-to-body="true"
+    :close-on-press-escape="false"
+    :wrapper-closable="false"
+    :destroy-on-close="true"
+    :show-close="true"
+    :modal="false"
+  >
+    <div class="container-form">
+      <el-form ref="form" :model="model" :rule="dynamicRules" :inline="false" size="small" label-position="left" label-width="100px">
+        <el-form-item v-for="item in schema" :key="item.name" :prop="item.name" :label="item.title" :required="item.required === true">
+          <!-- 输入框 -->
+          <el-input
+            v-if="item.type === 'input'"
+            v-model="model[item.name]"
+            :placeholder="`请输入${item.title}`"
+            :disabled="model.disabled === true"
+            clearable
+            style="width: 100%"
+          />
+          <!-- 选择框 -->
+          <el-select
+            v-if="item.type === 'select'"
+            v-model="model[item.name]"
+            clearable
+            :placeholder="`请选择${item.title}`"
+            :disabled="model.disabled === true"
+            style="width: 100%"
+          >
+            <el-option
+              v-for="option in (item.dataSource || [])"
+              :key="option.value"
+              :label="option.label"
+              :value="option.value"
+            />
+          </el-select>
+          <!-- 日期选择 -->
+          <el-date-picker
+            v-if="item.type === 'date'"
+            v-model="model[item.name]"
+            type="daterange"
+            align="right"
+            unlink-panels
+            :disabled="model.disabled === true"
+            clearable
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            format="yyyy-MM-dd"
+            value-format="yyyy-MM-dd"
+            :picker-options="pickerOptions"
+            style="width: 100%"
+          />
+          <!-- 日期时间选择 -->
+          <el-date-picker
+            v-if="item.type === 'datetime'"
+            v-model="model[item.name]"
+            type="datetimerange"
+            align="right"
+            clearable
+            :disabled="model.disabled === true"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            format="yyyy-MM-dd HH:mm:ss"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            :default-time="['00:00:00', '23:59:59']"
+            :picker-options="pickerOptions"
+            style="width: 100%"
+          />
+        </el-form-item>
+      </el-form>
+    </div>
+    <el-divider />
+    <div class="dialog-footer">
+      <el-button type="danger" @click="hidden">取 消</el-button>
+      <el-button v-if="showReset" @click="resetForm('form')">重 置</el-button>
+      <el-button v-prevent-re-click type="primary" @click="submitForm('form')">提 交</el-button>
+    </div>
+  </el-drawer>
+</template>
+
+<script>
+
+export default {
+  name: 'CuteFormDrawerPro',
+  props: {
+    /**
+     * 弹窗标题
+     */
+    title: {
+      type: String,
+      required: true,
+      default: '默认标题'
+    },
+    /**
+     * 弹窗宽度
+     */
+    width: {
+      type: String,
+      required: false,
+      default: '40%'
+    },
+    /**
+     * 表单定义
+     */
+    schema: {
+      type: Array,
+      required: true,
+      default: function() {
+        return []
+      }
+    },
+    /**
+     * 绑定值
+     */
+    model: {
+      type: Object,
+      required: true
+    },
+    showReset: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      rules: {},
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      }
+    }
+  },
+  computed: {
+    dynamicRules() {
+      const schema = this.schema
+      const formRules = {}
+      let trigger = 'blur'
+      for (const element of schema) {
+        if (element.type === 'input') {
+          trigger = 'blur'
+        } else {
+          trigger = 'change'
+        }
+        formRules[element.name] = [
+          { required: element.required === true, message: '请输入' + element.title, trigger: trigger }
+        ]
+      }
+      return formRules
+    }
+  },
+  methods: {
+    show() {
+      this.visible = true
+    },
+    hidden() {
+      this.resetForm('form')
+      this.visible = false
+    },
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          this.$emit('submit', this.model)
+        } else {
+          return false
+        }
+      })
+    },
+    resetForm(formName) {
+      // 调用默认的重置
+      this.$refs[formName].resetFields()
+      // 根据schema配置重置顽固选项
+      const schema = this.schema
+      const model = this.model
+      for (const element of schema) {
+        if (element.type === 'input' || element.type === 'select') {
+          model[element.name] = null
+          continue
+        }
+        if (element.type === 'date' || element.type === 'datetime') {
+          model[element.name] = []
+        }
+      }
+      this.model = { ...model }
+      this.$emit('reset')
+    },
+    beforeClose() {
+      this.hidden()
+      this.$emit('cancel')
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container-form {
+  overflow-y: scroll; /* 启用滚动 */
+  scrollbar-width: none; /* Firefox */
+  padding-right: 20px;
+  -ms-overflow-style: none; /* Internet Explorer 10+ */
+  max-height: calc(100vh - 200px); /* 调整高度以适应页头和底部按钮 */
+}
+
+.container-form::-webkit-scrollbar {
+  display: none; /* Chrome, Safari, Opera*/
+}
+
+.dialog-content-wrapper {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.dialog-footer {
+  text-align: right;
+  border-top: 1px solid #ebeef5;
+  padding: 16px 0 0 0;
+  background-color: white;
+  margin-top: auto;
+}
+
+::v-deep(.el-dialog__body) {
+  padding: 20px 20px !important;
+  height: 90%;
+  display: flex;
+  flex-direction: column;
+}
+
+::v-deep(.el-divider--horizontal) {
+  margin: 0 !important;
+}
+</style>
+

cutejava-front/src/views/components/advanced/CuteSearchForm.vue

@@ -11,7 +11,6 @@
     :model.sync="model"
     label-position="right"
     label-width="90px"
-    :disabled="disabled"
     size="small"
   >
     <!-- 通过  <template v-slot:suffix> 插槽前置查询条件 -->
@@ -34,11 +33,6 @@ export default {
     model: {
       type: Object,
       required: true
-    },
-    disabled: {
-      type: Boolean,
-      required: false,
-      default: false
     }
   },
   methods: {
@@ -46,7 +40,7 @@ export default {
       const that = this
       that.$refs[formName].validate((valid) => {
         if (valid) {
-          that.$emit('submit', that.model)
+          that.$emit('search', that.model)
         } else {
           return false
         }
@@ -56,7 +50,6 @@ export default {
       try {
         this.$refs[formName].resetFields()
         this.onFormSubmit(formName)
-        // this.$emit('reset')
       } catch (e) {
         console.error(e)
       }

cutejava-front/src/views/components/advanced/CuteSearchFormPro.vue

@@ -11,7 +11,6 @@
     :model.sync="model"
     label-position="right"
     label-width="90px"
-    :disabled="disabled"
     size="small"
   >
     <el-form-item v-for="item in schema" :key="item.name" :prop="item.name" :label="item.title">
@@ -99,14 +98,6 @@ export default {
     model: {
       type: Object,
       required: true
-    },
-    /**
-     * 是否禁用
-     */
-    disabled: {
-      type: Boolean,
-      required: false,
-      default: false
     }
   },
   data() {
@@ -145,7 +136,7 @@ export default {
       const that = this
       that.$refs[formName].validate((valid) => {
         if (valid) {
-          that.$emit('submit', that.model)
+          that.$emit('search', that.model)
         } else {
           return false
         }
@@ -169,7 +160,6 @@ export default {
         }
         this.model = { ...model }
         this.onFormSubmit(formName)
-        // this.$emit('reset')
       } catch (e) {
         console.error(e)
       }

cutejava-front/src/views/componentsDemo/CuteOtherDemo.vue

@@ -1,54 +0,0 @@
-<template>
-  <div>
-    <cute-section-title title="高级搜索 CuteSearchForm" />
-    <cute-search-form :model="searchFormModel" @submit="handleSearchFormSubmit">
-      <template v-slot:suffix>
-        <el-form-item label="模糊查询" prop="blurry">
-          <el-input v-model="searchFormModel.blurry" clearable />
-        </el-form-item>
-      </template>
-      <template v-slot:operation>
-        <el-button type="primary">查询后置按钮</el-button>
-      </template>
-    </cute-search-form>
-    <cute-section-title title="高级搜索Pro版 CuteSearchProForm" />
-    <cute-search-pro-form :model="searchFormProValues" :schema="searchFormProSchema" />
-  </div>
-</template>
-
-<script>
-
-import CuteSearchForm from '@/views/components/advanced/CuteSearchForm.vue'
-import CuteSectionTitle from '@/views/components/dev/CuteSectionTitle.vue'
-import CuteSearchFormPro from '@/views/components/advanced/CuteSearchFormPro.vue'
-
-export default {
-  name: 'CuteOtherDemo',
-  components: {
-    CuteSearchProForm: CuteSearchFormPro,
-    CuteSectionTitle,
-    CuteSearchForm
-  },
-  data() {
-    return {
-      searchFormModel: {},
-      searchFormProSchema: [
-        { name: 'name', title: '姓名', type: 'input' },
-        { name: 'sex', title: '性别', type: 'select', dataSource: [{ label: '男', value: 'nn' }, { label: '女', value: 'mm' }] },
-        { name: 'createDate', title: '创建日期', type: 'date' },
-        { name: 'createTime', title: '创建时间', type: 'datetime' }
-      ],
-      searchFormProValues: { name: '小明', sex: 'mm' }
-    }
-  },
-  methods: {
-    handleSearchFormSubmit(data) {
-      console.log('handleSearchFormSubmit', data)
-    },
-    handleSearchFormReset() {
-      console.log('handleSearchFormReset')
-    }
-  }
-}
-</script>
-

cutejava-front/src/views/componentsDemo/CuteSimpleTableDemo.vue

@@ -1,107 +0,0 @@
-<template>
-  <div class="app-container">
-    <cute-form-drawer
-      ref="drawerFrom"
-      :model="createFormModel"
-      :rules="createFormRules"
-      title="演示:表单抽屉"
-      width="45%"
-      @submit="onDrawerFormSubmit"
-    >
-      <el-form-item label="活动名称" prop="name" label-width="100px">
-        <el-input v-model="createFormModel.name" placeholder="请输入" style="width: 100%" />
-      </el-form-item>
-      <el-form-item label="活动区域" prop="region" label-width="100px">
-        <el-select v-model="createFormModel.region" placeholder="请选择" style="width: 100%">
-          <el-option label="区域一" value="shanghai" />
-          <el-option label="区域二" value="beijing" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="活动模式" prop="modeList" label-width="100px">
-        <cute-transfer v-model="createFormModel.modeList" :data-source="modeDataSource">
-          <el-table-column prop="name" label="姓名" />
-          <el-table-column prop="description" label="备注" />
-        </cute-transfer>
-      </el-form-item>
-    </cute-form-drawer>
-  </div>
-</template>
-
-<script>
-import CuteFormDrawer from '@/views/components/advanced/CuteFormDrawer.vue'
-import CuteTransfer from '@/views/components/dev/CuteTransfer.vue'
-
-export default {
-  name: 'CuteSimpleTableDemo',
-  components: { CuteTransfer, CuteFormDrawer },
-  data() {
-    return {
-      modeDataSource: [
-        { id: 1, name: '小明', description: '小明牛P' },
-        { id: 4, name: '小绿', description: '小绿牛P' },
-        { id: 5, name: '小黄', description: '小黄牛P' },
-        { id: 6, name: '小紫', description: '小紫牛P' },
-        { id: 17, name: '小郑', description: '小郑牛P' },
-        { id: 18, name: '小王', description: '小王牛P' }
-      ],
-      editTableSchema: [
-        { name: 'name', title: '姓名', type: 'input' },
-        { name: 'sex', title: '性别', type: 'select', dataSource: [{ label: '男', value: 'nn' }, { label: '女', value: 'mm' }] },
-        { name: 'description', title: '描述', type: 'input' }
-      ],
-      editTableDataSource: [
-        { id: 1, name: '小明', sex: 'mm', description: '小明牛P' },
-        { id: 4, name: '小绿', sex: 'nn', description: '小绿牛P' },
-        { id: 5, name: '小黄', sex: 'nn', description: '小黄牛P' },
-        { id: 6, name: '小紫', sex: 'nn', description: '小紫牛P' },
-        { id: 17, name: '小郑', sex: 'mm', description: '小郑牛P' },
-        { id: 18, name: '小王', sex: 'nn', description: '小王牛P' }
-      ],
-      form: {
-        model: {
-          blurry: ''
-        },
-        rules: {}
-      }
-    }
-  },
-  mounted() {
-    this.initData()
-  },
-  methods: {
-    initData() {
-      this.$refs.instance.refresh()
-    },
-    onFormSubmit(formName) {
-      const that = this
-      that.$refs[formName].validate((valid) => {
-        if (valid) {
-          that.$refs.instance.refresh()
-        } else {
-          return false
-        }
-      })
-    },
-    onFormReset(formName) {
-      try {
-        this.$refs[formName].resetFields()
-      } catch (e) {
-        console.error(e)
-      }
-    },
-    onDialogClick() {
-      this.$refs.dialogForm.show()
-    },
-    onDialogProClick() {
-      this.$refs.dialogProForm.show()
-    },
-    onDrawerClick() {
-      this.$refs.drawerFrom.show()
-    },
-    onDrawerFormSubmit(values) {
-      console.log('onDrawerFormSubmit', values)
-    }
-  }
-}
-</script>
-

cutejava-front/src/views/componentsDemo/advanced/CuteDragTableDemo.vue

@@ -69,6 +69,9 @@ export default {
   components: { CuteDragTable, CuteButton },
   data() {
     return {
+      form: {
+        model: ''
+      },
       curd: {
         paramsTransform: (pageProps) => {
           const values = this.form.model
@@ -131,10 +134,13 @@ export default {
     }
   },
   mounted() {
-    this.$refs.instance.refresh()
+    this.refreshData()
   },
   methods: {
     FormatRowDateTimeStr,
+    refreshData() {
+      this.$refs.instance.refresh()
+    },
     onTableEditClick(row) {
       console.log('编辑', row)
     },

cutejava-front/src/views/componentsDemo/advanced/CuteFormDialogDemo.vue

@@ -2,9 +2,8 @@
   <div>
     <h4>何时使用</h4>
     <ul class="description">
-      <li>不离开当前场景完成增删改操作</li>
-      <li>需要确认用户的操作，明确操作会产生的结果，提醒告知用户</li>
-      <li>作为配置型功能及信息的容器</li>
+      <li>用于创建一个实体或收集信息</li>
+      <li>需要对输入的数据类型进行校验时</li>
       <li>在使用过程中有任何问题，咨询 @Odboy（前端）</li>
     </ul>
     <h4>基础用法</h4>

cutejava-front/src/views/componentsDemo/advanced/CuteFormDialogProDemo.vue

@@ -2,9 +2,8 @@
   <div>
     <h4>何时使用</h4>
     <ul class="description">
-      <li>不离开当前场景完成增删改操作</li>
-      <li>需要确认用户的操作，明确操作会产生的结果，提醒告知用户</li>
-      <li>作为配置型功能及信息的容器</li>
+      <li>用于创建一个实体或收集信息</li>
+      <li>需要对输入的数据类型进行校验时</li>
       <li>在使用过程中有任何问题，咨询 @Odboy（前端）</li>
     </ul>
     <h4>基础用法</h4>

cutejava-front/src/views/componentsDemo/advanced/CuteFormDrawerDemo.vue

@@ -2,8 +2,8 @@
   <div>
     <h4>何时使用</h4>
     <ul class="description">
-      <li>不离开当前场景完成增删改操作</li>
-      <li>作为配置型功能及信息的容器</li>
+      <li>用于创建一个实体或收集信息</li>
+      <li>需要对输入的数据类型进行校验时</li>
       <li>在使用过程中有任何问题，咨询 @Odboy（前端）</li>
     </ul>
     <h4>基础用法</h4>

cutejava-front/src/views/componentsDemo/advanced/CuteFormDrawerProDemo.vue

@@ -0,0 +1,99 @@
+<template>
+  <div>
+    <h4>何时使用</h4>
+    <ul class="description">
+      <li>用于创建一个实体或收集信息</li>
+      <li>需要对输入的数据类型进行校验时</li>
+      <li>在使用过程中有任何问题，咨询 @Odboy（前端）</li>
+    </ul>
+    <h4>基础用法</h4>
+    <cute-button type="primary" @click="showDrawerForm">显示</cute-button>
+    <cute-form-drawer-pro
+      ref="formDrawerPro"
+      :model="model"
+      :schema="schema"
+      title="表单抽屉Pro"
+      @submit="onSubmit"
+    />
+
+    <h4>API</h4>
+    <el-table :data="apiData">
+      <el-table-column prop="name" label="参数" width="220" />
+      <el-table-column prop="remark" label="说明" width="450" />
+      <el-table-column prop="type" label="类型" />
+      <el-table-column prop="defaultValue" label="默认值" />
+      <el-table-column prop="required" label="是否必填" />
+    </el-table>
+    <h4>Schema属性</h4>
+    <el-table :data="schemaData">
+      <el-table-column prop="name" label="属性名" width="220" />
+      <el-table-column prop="remark" label="说明" width="450" />
+      <el-table-column prop="type" label="类型" />
+      <el-table-column prop="required" label="是否必填" />
+    </el-table>
+    <h4>方法</h4>
+    <el-table :data="methodData">
+      <el-table-column prop="name" label="函数" width="220" />
+      <el-table-column prop="remark" label="说明" width="450" />
+      <el-table-column prop="inputArgs" label="入参" />
+      <el-table-column prop="outArgs" label="出参" />
+    </el-table>
+  </div>
+</template>
+<script>
+import CuteButton from '@/views/components/dev/CuteButton.vue'
+import CuteFormDrawerPro from '@/views/components/advanced/CuteFormDrawerPro.vue'
+
+export default {
+  name: 'CuteFormDrawerProDemo',
+  components: { CuteFormDrawerPro, CuteButton },
+  data() {
+    return {
+      model: {},
+      schema: [
+        { name: 'name', title: '姓名', type: 'input', required: true },
+        { name: 'sex', title: '性别', type: 'select', required: true, dataSource: [{ label: '男', value: 'nn' }, { label: '女', value: 'mm' }] },
+        { name: 'createDate', title: '创建日期', type: 'date', required: false },
+        { name: 'createTime', title: '创建时间', type: 'datetime', required: false }
+      ],
+      apiData: [
+        { name: 'title', remark: '弹窗的标题', type: 'string', defaultValue: '默认标题', required: '否' },
+        { name: 'width', remark: '弹窗的宽度', type: 'string', defaultValue: '40%', required: '否' },
+        { name: 'model', remark: '绑定的表单对象', type: 'object', defaultValue: '-', required: '是' },
+        { name: 'schema', remark: '表单定义', type: 'object', defaultValue: '-', required: '是' },
+        { name: 'showReset', remark: '是否显示重置按钮', type: 'boolean', defaultValue: 'false', required: '否' },
+        { name: 'submit', remark: '提交按钮被点击回调事件', type: '(values) => {}', defaultValue: '-', required: '否' },
+        { name: 'cancel', remark: '取消按钮被点击回调事件', type: '() => {}', defaultValue: '-', required: '否' },
+        { name: 'reset', remark: '重置按钮被点击回调事件', type: '() => {}', defaultValue: '-', required: '否' }
+      ],
+      schemaData: [
+        { name: 'name', remark: '表单项名称', type: 'string', defaultValue: '-', required: '是' },
+        { name: 'title', remark: '表单项标题', type: 'string', defaultValue: '-', required: '是' },
+        { name: 'type', remark: '表单项类型。input 输入框 | select 单选框 | date 日期选择框 | datetime 日期时间选择框', type: 'string', defaultValue: '-', required: '是' },
+        { name: 'required', remark: '是否必填', type: 'boolean', defaultValue: 'false', required: '否' },
+        { name: 'dataSource', remark: '数据源，当type=select时必填', type: 'array', defaultValue: '[]', required: '否' }
+      ],
+      methodData: [
+        { name: 'show', remark: '显示对话框', inputArgs: '-', outArgs: '-' },
+        { name: 'hidden', remark: '隐藏对话框', inputArgs: '-', outArgs: '-' }
+      ]
+    }
+  },
+  methods: {
+    showDrawerForm() {
+      this.$refs.formDrawerPro.show()
+    },
+    onSubmit(values) {
+      console.log('onSubmit', values)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+ul {
+  padding-left: 20px;
+}
+.description > li{
+  font-size: 12px;
+}
+</style>

cutejava-front/src/views/componentsDemo/advanced/CuteSearchFormDemo.vue

@@ -0,0 +1,63 @@
+<template>
+  <div>
+    <h4>何时使用</h4>
+    <ul class="description">
+      <li>列表上方的标准筛选栏</li>
+      <li>在点击搜索和重置按钮时会触发 onSearch，参数为当前筛选值</li>
+      <li>在使用过程中有任何问题，咨询 @Odboy（前端）</li>
+    </ul>
+    <h4>基础用法</h4>
+    <cute-search-form :model="model" @search="handleSearch">
+      <template v-slot:suffix>
+        <el-form-item label="模糊查询" prop="blurry">
+          <el-input v-model="model.blurry" clearable />
+        </el-form-item>
+      </template>
+      <template v-slot:operation>
+        <el-button type="primary">查询后置按钮</el-button>
+      </template>
+    </cute-search-form>
+    <h4>API</h4>
+    <el-table :data="apiData">
+      <el-table-column prop="name" label="参数" width="220" />
+      <el-table-column prop="remark" label="说明" width="450" />
+      <el-table-column prop="type" label="类型" />
+      <el-table-column prop="defaultValue" label="默认值" />
+      <el-table-column prop="required" label="是否必填" />
+    </el-table>
+  </div>
+</template>
+<script>
+import CuteSearchForm from '@/views/components/advanced/CuteSearchForm.vue'
+
+export default {
+  name: 'CuteSearchFormDemo',
+  components: { CuteSearchForm },
+  data() {
+    return {
+      model: {
+        blurry: ''
+      },
+      apiData: [
+        { name: 'model', remark: '绑定的表单对象', type: 'object', defaultValue: '-', required: '是' },
+        { name: 'v-slot:suffix', remark: '搜索条件区域', type: 'template', defaultValue: '-', required: '是' },
+        { name: 'v-slot:operation', remark: '后置按钮区域', type: 'template', defaultValue: '-', required: '否' },
+        { name: 'search', remark: '搜索或重置按钮被点击回调事件', type: '(values) => {}', defaultValue: '-', required: '否' }
+      ]
+    }
+  },
+  methods: {
+    handleSearch(values) {
+      console.log('handleSearch', values)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+ul {
+  padding-left: 20px;
+}
+.description > li{
+  font-size: 12px;
+}
+</style>

cutejava-front/src/views/componentsDemo/advanced/CuteSearchFormProDemo.vue

@@ -0,0 +1,74 @@
+<template>
+  <div>
+    <h4>何时使用</h4>
+    <ul class="description">
+      <li>列表上方的标准筛选栏</li>
+      <li>在点击搜索和重置按钮时会触发 onSearch，参数为当前筛选值</li>
+      <li>在使用过程中有任何问题，咨询 @Odboy（前端）</li>
+    </ul>
+    <h4>基础用法</h4>
+    <cute-search-form-pro :model="model" :schema="schema" @search="handleSearch" />
+    <h4>API</h4>
+    <el-table :data="apiData">
+      <el-table-column prop="name" label="参数" width="220" />
+      <el-table-column prop="remark" label="说明" width="450" />
+      <el-table-column prop="type" label="类型" />
+      <el-table-column prop="defaultValue" label="默认值" />
+      <el-table-column prop="required" label="是否必填" />
+    </el-table>
+    <h4>Schema属性</h4>
+    <el-table :data="schemaData">
+      <el-table-column prop="name" label="属性名" width="220" />
+      <el-table-column prop="remark" label="说明" width="450" />
+      <el-table-column prop="type" label="类型" />
+      <el-table-column prop="required" label="是否必填" />
+    </el-table>
+  </div>
+</template>
+<script>
+import CuteSearchFormPro from '@/views/components/advanced/CuteSearchFormPro.vue'
+
+export default {
+  name: 'CuteSearchFormProDemo',
+  components: { CuteSearchFormPro },
+  data() {
+    return {
+      model: {
+        name: '',
+        sex: ''
+      },
+      schema: [
+        { name: 'name', title: '姓名', type: 'input' },
+        { name: 'sex', title: '性别', type: 'select', dataSource: [{ label: '男', value: 'nn' }, { label: '女', value: 'mm' }] },
+        { name: 'createDate', title: '创建日期', type: 'date' },
+        { name: 'createTime', title: '创建时间', type: 'datetime' }
+      ],
+      apiData: [
+        { name: 'model', remark: '绑定的表单对象', type: 'object', defaultValue: '-', required: '是' },
+        { name: 'schema', remark: '表单定义', type: 'object', defaultValue: '-', required: '是' },
+        { name: 'v-slot:operation', remark: '后置按钮区域', type: 'template', defaultValue: '-', required: '否' },
+        { name: 'search', remark: '搜索或重置按钮被点击回调事件', type: '(values) => {}', defaultValue: '-', required: '否' }
+      ],
+      schemaData: [
+        { name: 'name', remark: '表单项名称', type: 'string', defaultValue: '-', required: '是' },
+        { name: 'title', remark: '表单项标题', type: 'string', defaultValue: '-', required: '是' },
+        { name: 'type', remark: '表单项类型。input 输入框 | select 单选框 | date 日期选择框 | datetime 日期时间选择框', type: 'string', defaultValue: '-', required: '是' },
+        { name: 'dataSource', remark: '数据源，当type=select时必填', type: 'array', defaultValue: '[]', required: '否' }
+      ]
+    }
+  },
+  methods: {
+    handleSearch(values) {
+      console.log('handleSearch', values)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+ul {
+  padding-left: 20px;
+}
+.description > li{
+  font-size: 12px;
+}
+</style>

cutejava-front/src/views/componentsDemo/advanced/CuteSimpleTableDemo.vue

@@ -23,10 +23,10 @@
       show-select
     >
       <template v-slot:batchArea>
-        <cute-button type="primary">批量绑定</cute-button>
+        <cute-button type="primary" @click="refreshData">批量绑定</cute-button>
       </template>
       <template v-slot:toolArea>
-        <cute-button type="primary">导出</cute-button>
+        <cute-button type="primary" @click="refreshData">导出</cute-button>
       </template>
       <el-table-column prop="name" label="名称" />
       <el-table-column prop="description" label="描述" />
@@ -69,6 +69,9 @@ export default {
   components: { CuteSimpleTable, CuteButton },
   data() {
     return {
+      form: {
+        model: ''
+      },
       curd: {
         paramsTransform: (pageProps) => {
           const values = this.form.model
@@ -131,10 +134,13 @@ export default {
     }
   },
   mounted() {
-    this.$refs.instance.refresh()
+    this.refreshData()
   },
   methods: {
     FormatRowDateTimeStr,
+    refreshData() {
+      this.$refs.instance.refresh()
+    },
     onTableEditClick(row) {
       console.log('onTableEditClick', row)
     },

cutejava-front/src/views/componentsDemo/index.vue

@@ -93,6 +93,12 @@
       </el-tab-pane>
       <el-tab-pane label="高级组件" name="advanced">
         <el-collapse accordion>
+          <el-collapse-item title="标准搜索区域 CuteSearchForm" name="CuteSearchForm">
+            <CuteSearchFormDemo />
+          </el-collapse-item>
+          <el-collapse-item title="标准搜索区域(Schema版) CuteSearchFormPro" name="CuteSearchFormPro">
+            <CuteSearchFormProDemo />
+          </el-collapse-item>
           <el-collapse-item title="简单数据表格 CuteSimpleTable" name="CuteSimpleTable">
             <CuteSimpleTableDemo />
           </el-collapse-item>
@@ -111,6 +117,9 @@
           <el-collapse-item title="表单抽屉 CuteFormDrawer" name="CuteFormDrawer">
             <CuteFormDrawerDemo />
           </el-collapse-item>
+          <el-collapse-item title="表单抽屉(Schema版) CuteFormDrawerPro" name="CuteFormDrawerPro">
+            <CuteFormDrawerProDemo />
+          </el-collapse-item>
         </el-collapse>
       </el-tab-pane>
     </el-tabs>
@@ -145,22 +154,28 @@ import CutePreviewDrawerDemo from '@/views/componentsDemo/dev/CutePreviewDrawerD
 import CuteTransferDemo from '@/views/componentsDemo/dev/CuteTransferDemo.vue'
 import CuteFileUploadDemo from '@/views/componentsDemo/business/CuteFileUploadDemo.vue'
 import CuteFileDragUploadDemo from '@/views/componentsDemo/business/CuteFileDragUploadDemo.vue'
-import CuteSimpleTableDemo from '@/views/componentsDemo/CuteSimpleTableDemo.vue'
 import CuteDragTableDemo from '@/views/componentsDemo/advanced/CuteDragTableDemo.vue'
 import CuteEditTableDemo from '@/views/componentsDemo/advanced/CuteEditTableDemo.vue'
 import CuteFormDialogDemo from '@/views/componentsDemo/advanced/CuteFormDialogDemo.vue'
 import CuteFormDialogProDemo from '@/views/componentsDemo/advanced/CuteFormDialogProDemo.vue'
 import CuteFormDrawerDemo from '@/views/componentsDemo/advanced/CuteFormDrawerDemo.vue'
+import CuteFormDrawerProDemo from '@/views/componentsDemo/advanced/CuteFormDrawerProDemo.vue'
+import CuteSearchFormDemo from '@/views/componentsDemo/advanced/CuteSearchFormDemo.vue'
+import CuteSearchFormProDemo from '@/views/componentsDemo/advanced/CuteSearchFormProDemo.vue'
+import CuteSimpleTableDemo from '@/views/componentsDemo/advanced/CuteSimpleTableDemo.vue'
 
 export default {
   name: 'SystemComponents',
   components: {
+    CuteSimpleTableDemo,
+    CuteSearchFormProDemo,
+    CuteSearchFormDemo,
+    CuteFormDrawerProDemo,
     CuteFormDrawerDemo,
     CuteFormDialogProDemo,
     CuteFormDialogDemo,
     CuteEditTableDemo,
     CuteDragTableDemo,
-    CuteSimpleTableDemo,
     CuteFileDragUploadDemo,
     CuteFileUploadDemo,
     CuteTransferDemo,