diff --git a/cutejava-front/src/views/components/advanced/CuteFormDialog.vue b/cutejava-front/src/views/components/advanced/CuteFormDialog.vue
index 5829d0b7..680f359f 100644
--- a/cutejava-front/src/views/components/advanced/CuteFormDialog.vue
+++ b/cutejava-front/src/views/components/advanced/CuteFormDialog.vue
@@ -22,7 +22,7 @@
     <el-divider />
     <div class="dialog-footer">
       <el-button type="danger" @click="hidden">取 消</el-button>
-      <!--<el-button @click="resetForm('form')">重 置</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-dialog>
@@ -35,7 +35,7 @@ export default {
   props: {
     title: {
       type: String,
-      required: true,
+      required: false,
       default: '默认标题'
     },
     width: {
@@ -60,11 +60,15 @@ export default {
         return {}
       }
     },
-    // 是否平铺表单
     inline: {
       type: Boolean,
       required: false,
       default: false
+    },
+    showReset: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
   data() {
@@ -91,9 +95,11 @@ export default {
     },
     resetForm(formName) {
       this.$refs[formName].resetFields()
+      this.$emit('reset')
     },
     beforeClose() {
       this.hidden()
+      this.$emit('cancel')
     }
   }
 }
diff --git a/cutejava-front/src/views/components/advanced/CuteFormDialogPro.vue b/cutejava-front/src/views/components/advanced/CuteFormDialogPro.vue
index 11e132ca..b9003623 100644
--- a/cutejava-front/src/views/components/advanced/CuteFormDialogPro.vue
+++ b/cutejava-front/src/views/components/advanced/CuteFormDialogPro.vue
@@ -21,6 +21,7 @@
             v-if="item.type === 'input'"
             v-model="model[item.name]"
             :placeholder="`请输入${item.title}`"
+            :disabled="model.disabled === true"
             clearable
             style="width: 100%"
           />
@@ -30,6 +31,7 @@
             v-model="model[item.name]"
             clearable
             :placeholder="`请选择${item.title}`"
+            :disabled="model.disabled === true"
             style="width: 100%"
           >
             <el-option
@@ -46,6 +48,7 @@
             type="daterange"
             align="right"
             unlink-panels
+            :disabled="model.disabled === true"
             clearable
             range-separator="至"
             start-placeholder="开始日期"
@@ -62,6 +65,7 @@
             type="datetimerange"
             align="right"
             clearable
+            :disabled="model.disabled === true"
             range-separator="至"
             start-placeholder="开始日期"
             end-placeholder="结束日期"
@@ -77,7 +81,7 @@
     <el-divider />
     <div class="dialog-footer">
       <el-button type="danger" @click="hidden">取 消</el-button>
-      <!--<el-button @click="resetForm('form')">重 置</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-dialog>
@@ -128,6 +132,11 @@ export default {
     model: {
       type: Object,
       required: true
+    },
+    showReset: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
   data() {
@@ -214,9 +223,11 @@ export default {
         }
       }
       this.model = { ...model }
+      this.$emit('reset')
     },
     beforeClose() {
       this.hidden()
+      this.$emit('cancel')
     }
   }
 }
diff --git a/cutejava-front/src/views/components/advanced/CuteFormDrawer.vue b/cutejava-front/src/views/components/advanced/CuteFormDrawer.vue
index 5c6f1678..2bf94459 100644
--- a/cutejava-front/src/views/components/advanced/CuteFormDrawer.vue
+++ b/cutejava-front/src/views/components/advanced/CuteFormDrawer.vue
@@ -38,7 +38,7 @@ export default {
   props: {
     title: {
       type: String,
-      required: true,
+      required: false,
       default: '默认标题'
     },
     width: {
@@ -58,11 +58,15 @@ export default {
         return {}
       }
     },
-    // 是否平铺表单
     inline: {
       type: Boolean,
       required: false,
       default: false
+    },
+    showReset: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
   data() {
@@ -89,9 +93,11 @@ export default {
     },
     resetForm(formName) {
       this.$refs[formName].resetFields()
+      this.$emit('reset')
     },
     beforeClose() {
       this.hidden()
+      this.$emit('cancel')
     }
   }
 }
diff --git a/cutejava-front/src/views/componentsDemo/CuteSimpleTableDemo.vue b/cutejava-front/src/views/componentsDemo/CuteSimpleTableDemo.vue
index f2eaa9e4..0ddb7ff0 100644
--- a/cutejava-front/src/views/componentsDemo/CuteSimpleTableDemo.vue
+++ b/cutejava-front/src/views/componentsDemo/CuteSimpleTableDemo.vue
@@ -1,47 +1,5 @@
 <template>
   <div class="app-container">
-    <!-- 工具栏 -->
-    <div class="head-container">
-      <el-form
-        ref="searchForm"
-        :inline="true"
-        :model="form.model"
-        label-position="right"
-        label-width="80px"
-        :rules="form.rules"
-        size="mini"
-      >
-        <el-form-item label="模糊查询" prop="blurry">
-          <el-input v-model="form.model.blurry" clearable />
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click="onFormSubmit('searchForm')">查询</el-button>
-          <el-button @click="onFormReset('searchForm')">重置</el-button>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click="onDialogClick">演示:表单对话框</el-button>
-          <el-button type="primary" @click="onDialogProClick">演示:表单对话框Pro</el-button>
-          <el-button type="primary" @click="onDrawerClick">演示:表单抽屉</el-button>
-        </el-form-item>
-      </el-form>
-    </div>
-    <cute-form-dialog
-      ref="dialogForm"
-      :model="createFormModel"
-      :rules="createFormRules"
-      title="演示:表单对话框"
-      @submit="onDialogFormSubmit"
-    >
-      <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>
-    </cute-form-dialog>
     <cute-form-drawer
       ref="drawerFrom"
       :model="createFormModel"
@@ -65,31 +23,17 @@
           <el-table-column prop="description" label="备注" />
         </cute-transfer>
       </el-form-item>
-      <el-form-item label="可编辑表格" prop="editValues" label-width="100px">
-        <cute-edit-table v-model="editTableDataSource" primary-key="id" :schema="editTableSchema" />
-      </el-form-item>
     </cute-form-drawer>
-    <cute-form-pro-dialog
-      ref="dialogProForm"
-      :model="createFormProModel"
-      :schema="createFormProSchema"
-      title="演示:表单对话框Pro"
-      @submit="onDialogFormSubmit"
-    />
   </div>
 </template>
 
 <script>
-import CuteFormDialog from '@/views/components/advanced/CuteFormDialog.vue'
 import CuteFormDrawer from '@/views/components/advanced/CuteFormDrawer.vue'
-import { FormatRowDateTimeStr } from '@/utils/KitUtil'
 import CuteTransfer from '@/views/components/dev/CuteTransfer.vue'
-import CuteEditTable from '@/views/components/advanced/CuteEditTable.vue'
-import CuteFormDialogPro from '@/views/components/advanced/CuteFormDialogPro.vue'
 
 export default {
   name: 'CuteSimpleTableDemo',
-  components: { CuteFormProDialog: CuteFormDialogPro, CuteEditTable: CuteEditTable, CuteTransfer, CuteFormDrawer, CuteFormDialog },
+  components: { CuteTransfer, CuteFormDrawer },
   data() {
     return {
       modeDataSource: [
@@ -118,30 +62,7 @@ export default {
           blurry: ''
         },
         rules: {}
-      },
-      // CuteFormDialog
-      createFormModel: {
-        name: '',
-        region: '',
-        modeList: []
-      },
-      createFormRules: {
-        name: [
-          { required: true, message: '请输入活动名称', trigger: 'blur' },
-          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
-        ],
-        region: [
-          { required: true, message: '请选择活动区域', trigger: 'change' }
-        ]
-      },
-      // CuteFormDialogPro
-      createFormProModel: {},
-      createFormProSchema: [
-        { 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 }
-      ]
+      }
     }
   },
   mounted() {
@@ -174,9 +95,6 @@ export default {
     onDialogProClick() {
       this.$refs.dialogProForm.show()
     },
-    onDialogFormSubmit(values) {
-      console.log('onDialogFormSubmit', values)
-    },
     onDrawerClick() {
       this.$refs.drawerFrom.show()
     },
diff --git a/cutejava-front/src/views/componentsDemo/advanced/CuteEditTableDemo.vue b/cutejava-front/src/views/componentsDemo/advanced/CuteEditTableDemo.vue
index 33112fb3..8106bc76 100644
--- a/cutejava-front/src/views/componentsDemo/advanced/CuteEditTableDemo.vue
+++ b/cutejava-front/src/views/componentsDemo/advanced/CuteEditTableDemo.vue
@@ -63,7 +63,7 @@ export default {
         ]
       },
       apiData: [
-        { name: 'value', remark: '绑定的值', type: 'array', defaultValue: '-', required: '否' },
+        { name: 'value', remark: '绑定的值。当数据源中包含disabled字段时，当前行会随着disabled的值禁用与启用', type: 'array', defaultValue: '-', required: '否' },
         { name: 'primary-key', remark: '对象中的哪个字段设置为主键', type: 'string', defaultValue: 'id', required: '是' },
         { name: 'height', remark: '表格高度', type: 'number', defaultValue: 'height', required: '否' },
         { name: 'schema', remark: '表格定义', type: 'array', defaultValue: '[]', required: '是' },
@@ -77,7 +77,7 @@ export default {
         { name: 'name', remark: '表单项名称', type: 'string', defaultValue: '-', required: '是' },
         { name: 'title', remark: '表单项标题', type: 'string', defaultValue: '-', required: '是' },
         { name: 'type', remark: '表单项类型。input 输入框 | select 单选框', type: 'string', defaultValue: '-', required: '是' },
-        { name: 'dataSource', remark: '数据源。当type=select时必填。当数据源中包含disabled字段时，当前行会随着disabled的值禁用与启用', type: 'array', defaultValue: '[]', required: '否' }
+        { name: 'dataSource', remark: '数据源，当type=select时必填。', type: 'array', defaultValue: '[]', required: '否' }
       ]
     }
   },
diff --git a/cutejava-front/src/views/componentsDemo/advanced/CuteFormDialogDemo.vue b/cutejava-front/src/views/componentsDemo/advanced/CuteFormDialogDemo.vue
new file mode 100644
index 00000000..15ba24a7
--- /dev/null
+++ b/cutejava-front/src/views/componentsDemo/advanced/CuteFormDialogDemo.vue
@@ -0,0 +1,104 @@
+<template>
+  <div>
+    <h4>何时使用</h4>
+    <ul class="description">
+      <li>不离开当前场景完成增删改操作</li>
+      <li>需要确认用户的操作，明确操作会产生的结果，提醒告知用户</li>
+      <li>作为配置型功能及信息的容器</li>
+      <li>在使用过程中有任何问题，咨询 @Odboy（前端）</li>
+    </ul>
+    <h4>基础用法</h4>
+    <cute-button type="primary" @click="showDialogForm">显示对话框表单</cute-button>
+    <cute-form-dialog
+      ref="formDialog"
+      :model="model"
+      :rules="rules"
+      title="表单对话框"
+      @submit="onSubmit"
+    >
+      <el-form-item label="活动名称" prop="name" label-width="100px">
+        <el-input v-model="model.name" placeholder="请输入" style="width: 100%" />
+      </el-form-item>
+      <el-form-item label="活动区域" prop="region" label-width="100px">
+        <el-select v-model="model.region" placeholder="请选择" style="width: 100%">
+          <el-option label="区域一" value="shanghai" />
+          <el-option label="区域二" value="beijing" />
+        </el-select>
+      </el-form-item>
+    </cute-form-dialog>
+    <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>方法</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 CuteFormDialog from '@/views/components/advanced/CuteFormDialog.vue'
+import CuteButton from '@/views/components/dev/CuteButton.vue'
+
+export default {
+  name: 'CuteFormDialogDemo',
+  components: { CuteButton, CuteFormDialog },
+  data() {
+    return {
+      model: {
+        name: '',
+        region: '',
+        modeList: []
+      },
+      rules: {
+        name: [
+          { required: true, message: '请输入活动名称', trigger: 'blur' },
+          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
+        ],
+        region: [
+          { required: true, message: '请选择活动区域', trigger: 'change' }
+        ]
+      },
+      apiData: [
+        { name: 'title', remark: '弹窗的标题', type: 'string', defaultValue: '默认标题', required: '否' },
+        { name: 'width', remark: '弹窗的宽度', type: 'string', defaultValue: '40%', required: '否' },
+        { name: 'fullscreen', remark: '是否全屏', type: 'boolean', defaultValue: 'false', required: '否' },
+        { name: 'model', remark: '绑定的表单对象', type: 'object', defaultValue: '-', required: '是' },
+        { name: 'rules', remark: '表单校验规则', type: 'object', defaultValue: '-', required: '否' },
+        { name: 'inline', remark: '是否平铺显示。默认是垂直排列', type: 'boolean', defaultValue: 'false', 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: '否' }
+      ],
+      methodData: [
+        { name: 'show', remark: '显示对话框', inputArgs: '-', outArgs: '-' },
+        { name: 'hidden', remark: '隐藏对话框', inputArgs: '-', outArgs: '-' }
+      ]
+    }
+  },
+  methods: {
+    showDialogForm() {
+      this.$refs.formDialog.show()
+    },
+    onSubmit(values) {
+      console.log('onSubmit', values)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+ul {
+  padding-left: 20px;
+}
+.description > li{
+  font-size: 12px;
+}
+</style>
diff --git a/cutejava-front/src/views/componentsDemo/advanced/CuteFormDialogProDemo.vue b/cutejava-front/src/views/componentsDemo/advanced/CuteFormDialogProDemo.vue
new file mode 100644
index 00000000..ae12e916
--- /dev/null
+++ b/cutejava-front/src/views/componentsDemo/advanced/CuteFormDialogProDemo.vue
@@ -0,0 +1,101 @@
+<template>
+  <div>
+    <h4>何时使用</h4>
+    <ul class="description">
+      <li>不离开当前场景完成增删改操作</li>
+      <li>需要确认用户的操作，明确操作会产生的结果，提醒告知用户</li>
+      <li>作为配置型功能及信息的容器</li>
+      <li>在使用过程中有任何问题，咨询 @Odboy（前端）</li>
+    </ul>
+    <h4>基础用法</h4>
+    <cute-button type="primary" @click="showDialogForm">显示对话框表单</cute-button>
+    <cute-form-dialog-pro
+      ref="formDialogPro"
+      :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 CuteFormDialogPro from '@/views/components/advanced/CuteFormDialogPro.vue'
+import CuteButton from '@/views/components/dev/CuteButton.vue'
+
+export default {
+  name: 'CuteFormDialogProDemo',
+  components: { CuteButton, CuteFormDialogPro },
+  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: 'fullscreen', remark: '是否全屏', type: 'boolean', defaultValue: 'false', 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: {
+    showDialogForm() {
+      this.$refs.formDialogPro.show()
+    },
+    onSubmit(values) {
+      console.log('onSubmit', values)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+ul {
+  padding-left: 20px;
+}
+.description > li{
+  font-size: 12px;
+}
+</style>
diff --git a/cutejava-front/src/views/componentsDemo/advanced/CuteFormDrawerDemo.vue b/cutejava-front/src/views/componentsDemo/advanced/CuteFormDrawerDemo.vue
new file mode 100644
index 00000000..25f6b7aa
--- /dev/null
+++ b/cutejava-front/src/views/componentsDemo/advanced/CuteFormDrawerDemo.vue
@@ -0,0 +1,102 @@
+<template>
+  <div>
+    <h4>何时使用</h4>
+    <ul class="description">
+      <li>不离开当前场景完成增删改操作</li>
+      <li>作为配置型功能及信息的容器</li>
+      <li>在使用过程中有任何问题，咨询 @Odboy（前端）</li>
+    </ul>
+    <h4>基础用法</h4>
+    <cute-button type="primary" @click="showDialogForm">显示对话框表单</cute-button>
+    <cute-form-drawer
+      ref="formDrawer"
+      :model="model"
+      :rules="rules"
+      title="表单抽屉"
+      @submit="onSubmit"
+    >
+      <el-form-item label="活动名称" prop="name" label-width="100px">
+        <el-input v-model="model.name" placeholder="请输入" style="width: 100%" />
+      </el-form-item>
+      <el-form-item label="活动区域" prop="region" label-width="100px">
+        <el-select v-model="model.region" placeholder="请选择" style="width: 100%">
+          <el-option label="区域一" value="shanghai" />
+          <el-option label="区域二" value="beijing" />
+        </el-select>
+      </el-form-item>
+    </cute-form-drawer>
+    <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>方法</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 CuteFormDrawer from '@/views/components/advanced/CuteFormDrawer.vue'
+
+export default {
+  name: 'CuteFormDrawerDemo',
+  components: { CuteFormDrawer, CuteButton },
+  data() {
+    return {
+      model: {
+        name: '',
+        region: '',
+        modeList: []
+      },
+      rules: {
+        name: [
+          { required: true, message: '请输入活动名称', trigger: 'blur' },
+          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
+        ],
+        region: [
+          { required: true, message: '请选择活动区域', trigger: 'change' }
+        ]
+      },
+      apiData: [
+        { name: 'title', remark: '弹窗的标题', type: 'string', defaultValue: '默认标题', required: '否' },
+        { name: 'width', remark: '弹窗的宽度', type: 'string', defaultValue: '40%', required: '否' },
+        { name: 'model', remark: '绑定的表单对象', type: 'object', defaultValue: '-', required: '是' },
+        { name: 'rules', remark: '表单校验规则', type: 'object', defaultValue: '-', required: '否' },
+        { name: 'inline', remark: '是否平铺显示。默认是垂直排列', type: 'boolean', defaultValue: 'false', 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: '否' }
+      ],
+      methodData: [
+        { name: 'show', remark: '显示对话框', inputArgs: '-', outArgs: '-' },
+        { name: 'hidden', remark: '隐藏对话框', inputArgs: '-', outArgs: '-' }
+      ]
+    }
+  },
+  methods: {
+    showDialogForm() {
+      this.$refs.formDrawer.show()
+    },
+    onSubmit(values) {
+      console.log('onSubmit', values)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+ul {
+  padding-left: 20px;
+}
+.description > li{
+  font-size: 12px;
+}
+</style>
diff --git a/cutejava-front/src/views/componentsDemo/advanced/CuteSimpleTableDemo.vue b/cutejava-front/src/views/componentsDemo/advanced/CuteSimpleTableDemo.vue
index 50ef12ba..43285fae 100644
--- a/cutejava-front/src/views/componentsDemo/advanced/CuteSimpleTableDemo.vue
+++ b/cutejava-front/src/views/componentsDemo/advanced/CuteSimpleTableDemo.vue
@@ -136,10 +136,10 @@ export default {
   methods: {
     FormatRowDateTimeStr,
     onTableEditClick(row) {
-      console.log('编辑', row)
+      console.log('onTableEditClick', row)
     },
     onTableDeleteClick(row) {
-      console.log('删除', row)
+      console.log('onTableDeleteClick', row)
     }
   }
 }
diff --git a/cutejava-front/src/views/componentsDemo/business/CuteFileDragUploadDemo.vue b/cutejava-front/src/views/componentsDemo/business/CuteFileDragUploadDemo.vue
index 34420fb9..a736be9a 100644
--- a/cutejava-front/src/views/componentsDemo/business/CuteFileDragUploadDemo.vue
+++ b/cutejava-front/src/views/componentsDemo/business/CuteFileDragUploadDemo.vue
@@ -24,7 +24,8 @@
         <el-button type="primary" @click="submitForm('form')">提 交</el-button>
       </el-form-item>
     </el-form>
-    <h4>与CuteFormDialog集成 <el-button type="text" @click="showFormDialog">显示对话框</el-button></h4>
+    <h4>与CuteFormDialog集成</h4>
+    <cute-button type="primary" @click="showFormDialog">显示对话框</cute-button>
     <cute-form-dialog ref="formDialog" title="与CuteFormDialog集成" :model="form">
       <el-form-item label="活动名称" prop="name" label-width="80px">
         <el-input v-model="form.name" style="width: 100%" />
@@ -39,7 +40,8 @@
         <cute-file-drag-upload v-model="form" mode="local" />
       </el-form-item>
     </cute-form-dialog>
-    <h4>与CuteFormDrawer集成 <el-button type="text" @click="showFormDrawer">显示抽屉</el-button></h4>
+    <h4>与CuteFormDrawer集成</h4>
+    <cute-button type="primary" @click="showFormDrawer">显示抽屉</cute-button>
     <cute-form-drawer ref="formDrawer" title="与CuteFormDrawer集成" :model="form">
       <el-form-item label="活动名称" prop="name" label-width="80px">
         <el-input v-model="form.name" style="width: 100%" />
@@ -68,10 +70,11 @@
 import CuteFormDialog from '@/views/components/advanced/CuteFormDialog.vue'
 import CuteFileDragUpload from '@/views/components/business/CuteFileDragUpload.vue'
 import CuteFormDrawer from '@/views/components/advanced/CuteFormDrawer.vue'
+import CuteButton from '@/views/components/dev/CuteButton.vue'
 
 export default {
   name: 'CuteFileDragUploadDemo',
-  components: { CuteFormDrawer, CuteFormDialog, CuteFileDragUpload },
+  components: { CuteButton, CuteFormDrawer, CuteFormDialog, CuteFileDragUpload },
   data() {
     return {
       form: {
diff --git a/cutejava-front/src/views/componentsDemo/business/CuteFileUploadDemo.vue b/cutejava-front/src/views/componentsDemo/business/CuteFileUploadDemo.vue
index 551423a5..14537699 100644
--- a/cutejava-front/src/views/componentsDemo/business/CuteFileUploadDemo.vue
+++ b/cutejava-front/src/views/componentsDemo/business/CuteFileUploadDemo.vue
@@ -24,7 +24,8 @@
         <el-button type="primary" @click="submitForm('form')">提 交</el-button>
       </el-form-item>
     </el-form>
-    <h4>与CuteFormDialog集成 <el-button type="text" @click="showFormDialog">显示对话框</el-button></h4>
+    <h4>与CuteFormDialog集成</h4>
+    <cute-button type="primary" @click="showFormDialog">显示对话框</cute-button>
     <cute-form-dialog ref="formDialog" title="与CuteFormDialog集成" :model="form">
       <el-form-item label="活动名称" prop="name" label-width="80px">
         <el-input v-model="form.name" style="width: 100%" />
@@ -39,7 +40,8 @@
         <cute-file-upload v-model="form" mode="local" />
       </el-form-item>
     </cute-form-dialog>
-    <h4>与CuteFormDrawer集成 <el-button type="text" @click="showFormDrawer">显示抽屉</el-button></h4>
+    <h4>与CuteFormDrawer集成</h4>
+    <cute-button type="primary" @click="showFormDrawer">显示抽屉</cute-button>
     <cute-form-drawer ref="formDrawer" title="与CuteFormDrawer集成" :model="form">
       <el-form-item label="活动名称" prop="name" label-width="80px">
         <el-input v-model="form.name" style="width: 100%" />
@@ -68,10 +70,11 @@
 import CuteFileUpload from '@/views/components/business/CuteFileUpload.vue'
 import CuteFormDialog from '@/views/components/advanced/CuteFormDialog.vue'
 import CuteFormDrawer from '@/views/components/advanced/CuteFormDrawer.vue'
+import CuteButton from '@/views/components/dev/CuteButton.vue'
 
 export default {
   name: 'CuteFileUploadDemo',
-  components: { CuteFormDrawer, CuteFormDialog, CuteFileUpload },
+  components: { CuteButton, CuteFormDrawer, CuteFormDialog, CuteFileUpload },
   data() {
     return {
       form: {
diff --git a/cutejava-front/src/views/componentsDemo/index.vue b/cutejava-front/src/views/componentsDemo/index.vue
index 4d52cecb..c889afe7 100644
--- a/cutejava-front/src/views/componentsDemo/index.vue
+++ b/cutejava-front/src/views/componentsDemo/index.vue
@@ -99,9 +99,18 @@
           <el-collapse-item title="可拖拽排序的数据表格 CuteDragTable" name="CuteDragTable">
             <CuteDragTableDemo />
           </el-collapse-item>
-          <el-collapse-item title="可编辑表格 CuteEditTable" name="CuteEditTable">
+          <el-collapse-item title="可编辑表格(Schema版) CuteEditTable" name="CuteEditTable">
             <CuteEditTableDemo />
           </el-collapse-item>
+          <el-collapse-item title="表单弹窗 CuteFormDialog" name="CuteFormDialog">
+            <CuteFormDialogDemo />
+          </el-collapse-item>
+          <el-collapse-item title="表单弹窗(Schema版) CuteFormDialogPro" name="CuteFormDialogPro">
+            <CuteFormDialogProDemo />
+          </el-collapse-item>
+          <el-collapse-item title="表单抽屉 CuteFormDrawer" name="CuteFormDrawer">
+            <CuteFormDrawerDemo />
+          </el-collapse-item>
         </el-collapse>
       </el-tab-pane>
     </el-tabs>
@@ -139,10 +148,16 @@ import CuteFileDragUploadDemo from '@/views/componentsDemo/business/CuteFileDrag
 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'
 
 export default {
   name: 'SystemComponents',
   components: {
+    CuteFormDrawerDemo,
+    CuteFormDialogProDemo,
+    CuteFormDialogDemo,
     CuteEditTableDemo,
     CuteDragTableDemo,
     CuteSimpleTableDemo,