From 882ac772d30f9e755613de8f482196be930461af Mon Sep 17 00:00:00 2001
From: Odboy <tianjun@odboy.cn>
Date: Wed, 4 Feb 2026 22:31:49 +0800
Subject: [PATCH] =?UTF-8?q?refactor(components):=20=E7=BB=9F=E4=B8=80?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6API=E8=A7=84=E8=8C=83=E5=B9=B6=E5=AE=8C?=
 =?UTF-8?q?=E5=96=84=E8=A1=A8=E5=8D=95=E9=87=8D=E7=BD=AE=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 将多个组件的props从具体属性名改为统一的value属性
- 为所有组件添加v-model支持，替换原有的具体属性绑定
- 统一实现resetField方法，确保表单重置功能一致性
- 修正组件内部数据绑定逻辑，使用innerValue替代直接修改prop
- 更新文档示例，将API参数说明改为value | v-model格式
- 为代码编辑器、富文本编辑器等组件添加input事件发射
- 调整文件上传组件的值类型定义，从Object改为String
- 移除废弃的maxLength回调方法，优化编辑器性能
- 重构双向绑定逻辑，确保父子组件数据同步正确性
- 为树形选择器添加ref引用以便操作内部实例
- 调整组件演示页面的导入路径和标签页名称结构
---
 .../components/advanced/CuteEditTable.vue     |  3 +-
 .../components/business/CuteDeptTree.vue      | 10 +++-
 .../business/CuteFileDragUpload.vue           | 14 ++++-
 .../components/business/CuteFileUpload.vue    | 12 +++-
 .../business/CuteProductLineSelect.vue        | 15 +++--
 .../business/CuteProductLineSelectPro.vue     | 15 +++--
 .../business/CuteSingleUserSelect.vue         | 19 +++---
 .../components/business/CuteUserSelect.vue    | 17 ++++--
 .../views/components/dev/CuteCodeEditor.vue   | 16 +++--
 .../src/views/components/dev/CuteMarkdown.vue | 19 ++++--
 .../views/components/dev/CuteOneKeyCopy.vue   | 10 +---
 .../components/dev/CuteRichTextEditor.vue     | 44 +++++++++-----
 .../components/dev/CuteTextAreaInput.vue      | 15 ++++-
 .../src/views/components/dev/CuteTransfer.vue | 60 +++++++++++--------
 .../business/CuteDeptTreeDemo.vue             |  6 +-
 .../business/CuteFileDragUploadDemo.vue       |  8 +--
 .../business/CuteFileUploadDemo.vue           |  6 +-
 .../business/CuteProductLineSelectDemo.vue    |  2 +-
 .../business/CuteProductLineSelectProDemo.vue |  2 +-
 .../business/CuteSingleUserSelectDemo.vue     |  2 +-
 .../business/CuteUserSelectDemo.vue           |  2 +-
 .../componentsDemo/dev/CuteCodeEditorDemo.vue |  6 +-
 .../componentsDemo/dev/CuteMarkdownDemo.vue   | 16 ++---
 .../componentsDemo/dev/CuteOneKeyCopyDemo.vue |  5 +-
 .../dev/CuteRichTextEditorDemo.vue            |  2 +-
 .../componentsDemo/dev/CuteTransferDemo.vue   |  2 +-
 .../src/views/componentsDemo/index.vue        | 10 ++--
 .../{dev => util}/KitDialogDemo.vue           |  0
 .../{dev => util}/KitMessageDemo.vue          |  0
 .../{dev => util}/KitNotificationDemo.vue     |  0
 .../{dev => util}/KitWsClientDemo.vue         |  0
 31 files changed, 218 insertions(+), 120 deletions(-)
 rename cutejava-front/src/views/componentsDemo/{dev => util}/KitDialogDemo.vue (100%)
 rename cutejava-front/src/views/componentsDemo/{dev => util}/KitMessageDemo.vue (100%)
 rename cutejava-front/src/views/componentsDemo/{dev => util}/KitNotificationDemo.vue (100%)
 rename cutejava-front/src/views/componentsDemo/{dev => util}/KitWsClientDemo.vue (100%)

diff --git a/cutejava-front/src/views/components/advanced/CuteEditTable.vue b/cutejava-front/src/views/components/advanced/CuteEditTable.vue
index a262f5fa..73de947c 100644
--- a/cutejava-front/src/views/components/advanced/CuteEditTable.vue
+++ b/cutejava-front/src/views/components/advanced/CuteEditTable.vue
@@ -199,7 +199,8 @@ export default {
      */
     resetField() {
       this.dataSource = []
-      this.$emit('input', this.dataSource)
+      this.$emit('change', [])
+      this.$emit('input', [])
     }
   }
 }
diff --git a/cutejava-front/src/views/components/business/CuteDeptTree.vue b/cutejava-front/src/views/components/business/CuteDeptTree.vue
index 8ebce7ce..26b69161 100644
--- a/cutejava-front/src/views/components/business/CuteDeptTree.vue
+++ b/cutejava-front/src/views/components/business/CuteDeptTree.vue
@@ -18,6 +18,7 @@
       />
     </div>
     <el-tree
+      ref="deptTree"
       :data="deptData"
       :load="getDeptData"
       :props="defaultProps"
@@ -45,8 +46,7 @@ export default {
     return {
       deptName: '',
       deptData: [],
-      defaultProps: { children: 'children', label: 'name', isLeaf: 'leaf' },
-      currentDept: null
+      defaultProps: { children: 'children', label: 'name', isLeaf: 'leaf' }
     }
   },
   methods: {
@@ -74,7 +74,13 @@ export default {
       // 绑定node-click事件
       this.$emit('node-click', value)
       // 绑定form value
+      this.$emit('change', value.id)
       this.$emit('input', value.id)
+    },
+    resetField() {
+      this.$refs.deptTree.setCurrentNode(null)
+      this.$emit('change', null)
+      this.$emit('input', null)
     }
   }
 }
diff --git a/cutejava-front/src/views/components/business/CuteFileDragUpload.vue b/cutejava-front/src/views/components/business/CuteFileDragUpload.vue
index e9a37558..e4189612 100644
--- a/cutejava-front/src/views/components/business/CuteFileDragUpload.vue
+++ b/cutejava-front/src/views/components/business/CuteFileDragUpload.vue
@@ -31,8 +31,8 @@ export default {
   name: 'CuteFileUpload',
   props: {
     value: {
-      type: Object,
-      required: true,
+      type: String,
+      required: false,
       default: null
     },
     /**
@@ -73,9 +73,10 @@ export default {
       // console.error('response', response)
       // console.error('file', file)
       // console.error('fileList', fileList)
-      this.value.fileUrl = response
       // 绑定on-success事件
       this.$emit('on-success', response, file, fileList)
+      this.$emit('change', response)
+      this.$emit('input', response)
     },
     // 监听上传失败
     handleError(e, file, fileList) {
@@ -83,6 +84,13 @@ export default {
       KitMessage.Error(msg.message)
       // 绑定on-error事件
       this.$emit('on-error', e, file, fileList)
+      this.$emit('change', null)
+      this.$emit('input', null)
+    },
+    resetField() {
+      this.$refs.upload.clearFiles()
+      this.$emit('change', null)
+      this.$emit('input', null)
     }
   }
 }
diff --git a/cutejava-front/src/views/components/business/CuteFileUpload.vue b/cutejava-front/src/views/components/business/CuteFileUpload.vue
index 113b2286..6775f804 100644
--- a/cutejava-front/src/views/components/business/CuteFileUpload.vue
+++ b/cutejava-front/src/views/components/business/CuteFileUpload.vue
@@ -29,7 +29,7 @@ export default {
   name: 'CuteFileUpload',
   props: {
     value: {
-      type: Object,
+      type: String,
       required: true,
       default: null
     },
@@ -70,9 +70,10 @@ export default {
       // console.error('response', response)
       // console.error('file', file)
       // console.error('fileList', fileList)
-      this.value.fileUrl = response
       // 绑定on-success事件
       this.$emit('on-success', response, file, fileList)
+      this.$emit('change', response)
+      this.$emit('input', response)
     },
     // 监听上传失败
     handleError(e, file, fileList) {
@@ -80,6 +81,13 @@ export default {
       KitMessage.Error(msg.message)
       // 绑定on-error事件
       this.$emit('on-error', e, file, fileList)
+      this.$emit('change', null)
+      this.$emit('input', null)
+    },
+    resetField() {
+      this.$refs.upload.clearFiles()
+      this.$emit('change', null)
+      this.$emit('input', null)
     }
   }
 }
diff --git a/cutejava-front/src/views/components/business/CuteProductLineSelect.vue b/cutejava-front/src/views/components/business/CuteProductLineSelect.vue
index 155f4acb..1f123447 100644
--- a/cutejava-front/src/views/components/business/CuteProductLineSelect.vue
+++ b/cutejava-front/src/views/components/business/CuteProductLineSelect.vue
@@ -6,7 +6,7 @@
  -->
 <template>
   <el-select
-    v-model="productLine"
+    v-model="innerValue"
     filterable
     clearable
     placeholder="请选择产品线"
@@ -33,22 +33,24 @@ export default {
   props: {
     value: {
       type: String,
+      required: false,
       default: null
     },
     disabled: {
       type: Boolean,
+      required: false,
       default: false
     }
   },
   data() {
     return {
       deptOptions: [],
-      productLine: this.value
+      innerValue: this.value
     }
   },
   watch: {
     value(newVal) {
-      this.productLine = newVal
+      this.innerValue = newVal
     }
   },
   created() {
@@ -64,7 +66,7 @@ export default {
       })
     },
     handleChange(value) {
-      this.productLine = value
+      this.innerValue = value
       for (const item of this.deptOptions) {
         if (item.value === value) {
           this.$emit('detail', item)
@@ -75,6 +77,11 @@ export default {
       this.$emit('change', value)
       // 绑定form value
       this.$emit('input', value)
+    },
+    resetField() {
+      this.innerValue = null
+      this.$emit('change', null)
+      this.$emit('input', null)
     }
   }
 }
diff --git a/cutejava-front/src/views/components/business/CuteProductLineSelectPro.vue b/cutejava-front/src/views/components/business/CuteProductLineSelectPro.vue
index 6e253552..7e7947ff 100644
--- a/cutejava-front/src/views/components/business/CuteProductLineSelectPro.vue
+++ b/cutejava-front/src/views/components/business/CuteProductLineSelectPro.vue
@@ -6,7 +6,7 @@
  -->
 <template>
   <el-cascader
-    v-model="productLine"
+    v-model="innerValue"
     :disabled="disabled"
     :options="deptOptions"
     style="width: 100%"
@@ -25,22 +25,24 @@ export default {
   props: {
     value: {
       type: Array,
+      required: false,
       default: null
     },
     disabled: {
       type: Boolean,
+      required: false,
       default: false
     }
   },
   data() {
     return {
       deptOptions: [],
-      productLine: this.value
+      innerValue: this.value
     }
   },
   watch: {
     value(newVal) {
-      this.productLine = newVal
+      this.innerValue = newVal
     }
   },
   created() {
@@ -71,12 +73,17 @@ export default {
       })
     },
     handleChange(value) {
-      this.productLine = value
+      this.innerValue = value
       // console.error('value', value)
       // 绑定change事件
       this.$emit('change', value)
       // 绑定form value
       this.$emit('input', value)
+    },
+    resetField() {
+      this.innerValue = null
+      this.$emit('change', null)
+      this.$emit('input', null)
     }
   }
 }
diff --git a/cutejava-front/src/views/components/business/CuteSingleUserSelect.vue b/cutejava-front/src/views/components/business/CuteSingleUserSelect.vue
index a9dbf562..d5457bc1 100644
--- a/cutejava-front/src/views/components/business/CuteSingleUserSelect.vue
+++ b/cutejava-front/src/views/components/business/CuteSingleUserSelect.vue
@@ -6,7 +6,7 @@
  -->
 <template>
   <el-select
-    v-model="user"
+    v-model="innerValue"
     style="width: 100%"
     filterable
     remote
@@ -41,21 +41,21 @@ export default {
   },
   data() {
     return {
-      user: [],
+      innerValue: [],
       loading: false,
       options: []
     }
   },
   watch: {
     value(newVal) {
-      this.user = newVal
+      this.innerValue = newVal
     }
   },
-  async mounted() {
+  async created() {
     const that = this
-    if (that.value && that.value.length > 0) {
-      that.options = await CuteUserSelectApi.listMetadataByUsernames(that.value)
-      that.users = that.value
+    if (that.value) {
+      that.options = await CuteUserSelectApi.listMetadataByUsernames([that.value])
+      that.innerValue = that.value
     }
   },
   methods: {
@@ -81,6 +81,11 @@ export default {
       this.$emit('change', value)
       // 绑定form value
       this.$emit('input', value)
+    },
+    resetField() {
+      this.innerValue = null
+      this.$emit('change', null)
+      this.$emit('input', null)
     }
   }
 }
diff --git a/cutejava-front/src/views/components/business/CuteUserSelect.vue b/cutejava-front/src/views/components/business/CuteUserSelect.vue
index 3a256fef..90335a48 100644
--- a/cutejava-front/src/views/components/business/CuteUserSelect.vue
+++ b/cutejava-front/src/views/components/business/CuteUserSelect.vue
@@ -6,7 +6,7 @@
  -->
 <template>
   <el-select
-    v-model="users"
+    v-model="innerValue"
     style="width: 100%"
     multiple
     filterable
@@ -36,26 +36,28 @@ export default {
     value: {
       type: Array,
       required: false,
-      default: null
+      default: function() {
+        return []
+      }
     }
   },
   data() {
     return {
-      users: [],
+      innerValue: [],
       loading: false,
       options: []
     }
   },
   watch: {
     value(newVal) {
-      this.users = newVal
+      this.innerValue = newVal
     }
   },
   async mounted() {
     const that = this
     if (that.value && that.value.length > 0) {
       that.options = await CuteUserSelectApi.listMetadataByUsernames(that.value)
-      that.users = that.value
+      that.innerValue = that.value
     }
   },
   methods: {
@@ -81,6 +83,11 @@ export default {
       this.$emit('change', value)
       // 绑定form value
       this.$emit('input', value)
+    },
+    resetField() {
+      this.innerValue = []
+      this.$emit('change', [])
+      this.$emit('input', [])
     }
   }
 }
diff --git a/cutejava-front/src/views/components/dev/CuteCodeEditor.vue b/cutejava-front/src/views/components/dev/CuteCodeEditor.vue
index 152aab40..5cad844d 100644
--- a/cutejava-front/src/views/components/dev/CuteCodeEditor.vue
+++ b/cutejava-front/src/views/components/dev/CuteCodeEditor.vue
@@ -35,9 +35,9 @@ const SupportModeList = ['yaml', 'java', 'go', 'swift', 'dockerfile', 'groovy',
 export default {
   name: 'CuteCodeEditor',
   props: {
-    content: {
+    value: {
       type: String,
-      required: true,
+      required: false,
       default: ''
     },
     height: {
@@ -62,7 +62,7 @@ export default {
     }
   },
   watch: {
-    content(newVal, oldVal) {
+    value(newVal, oldVal) {
       const editorValue = this.editor.getValue()
       if (newVal !== editorValue) {
         this.editor.setValue(newVal)
@@ -92,12 +92,14 @@ export default {
         theme: 'darcula'
       })
       this.editor.setSize('auto', this.height)
-      if (this.content) {
-        this.editor.setValue(this.content)
+      if (this.value) {
+        this.editor.setValue(this.value)
       }
       this.editor.setOption('readOnly', this.readonly)
       this.editor.on('change', cm => {
-        this.$emit('change', cm.getValue())
+        const value = cm.getValue()
+        this.$emit('change', value)
+        this.$emit('input', value)
       })
       return
     }
@@ -118,6 +120,8 @@ export default {
     },
     resetField() {
       this.editor.setValue('')
+      this.$emit('change', '')
+      this.$emit('input', '')
     }
   }
 }
diff --git a/cutejava-front/src/views/components/dev/CuteMarkdown.vue b/cutejava-front/src/views/components/dev/CuteMarkdown.vue
index 09337b8b..788ac49b 100644
--- a/cutejava-front/src/views/components/dev/CuteMarkdown.vue
+++ b/cutejava-front/src/views/components/dev/CuteMarkdown.vue
@@ -8,7 +8,7 @@
 <template>
   <mavon-editor
     ref="md"
-    v-model="content"
+    v-model="innerValue"
     :style="`height: + ${height};overflow-y: hidden`"
     :ishljs="true"
     @imgAdd="imgAdd"
@@ -30,7 +30,7 @@ export default {
     mavonEditor
   },
   props: {
-    content: {
+    value: {
       type: String,
       required: true,
       default: ''
@@ -38,7 +38,8 @@ export default {
   },
   data() {
     return {
-      height: document.documentElement.clientHeight - dynamicHeight + 'px'
+      height: document.documentElement.clientHeight - dynamicHeight + 'px',
+      innerValue: ''
     }
   },
   computed: {
@@ -47,6 +48,11 @@ export default {
       'baseApi'
     ])
   },
+  watch: {
+    value(newVal) {
+      this.innerValue = newVal
+    }
+  },
   mounted() {
     const that = this
     window.onresize = () => {
@@ -64,12 +70,17 @@ export default {
     },
     onChange(value, render) {
       this.$emit('change', value, render)
+      this.$emit('input', value)
     },
     onSave(value, render) {
       this.$emit('save', value, render)
+      this.$emit('change', value)
+      this.$emit('input', value)
     },
     resetField() {
-      this.content = ''
+      this.innerValue = ''
+      this.$emit('change', '')
+      this.$emit('input', '')
     }
   }
 }
diff --git a/cutejava-front/src/views/components/dev/CuteOneKeyCopy.vue b/cutejava-front/src/views/components/dev/CuteOneKeyCopy.vue
index c5a7a2e9..752b77a0 100644
--- a/cutejava-front/src/views/components/dev/CuteOneKeyCopy.vue
+++ b/cutejava-front/src/views/components/dev/CuteOneKeyCopy.vue
@@ -6,20 +6,14 @@
  * @description 使用方式：<cute-one-key-copy :content.sync="data" />
  -->
 <template>
-  <el-button
-    v-clipboard:copy="content"
-    v-clipboard:success="onCopy"
-    v-clipboard:error="onError"
-    size="small"
-    icon="el-icon-document-copy"
-  />
+  <el-button v-clipboard:copy="value" v-clipboard:success="onCopy" v-clipboard:error="onError" size="small" icon="el-icon-document-copy" />
 </template>
 
 <script>
 export default {
   name: 'CuteOneKeyCopy',
   props: {
-    content: {
+    value: {
       type: String,
       required: true,
       default: ''
diff --git a/cutejava-front/src/views/components/dev/CuteRichTextEditor.vue b/cutejava-front/src/views/components/dev/CuteRichTextEditor.vue
index d0fd5487..1dd80680 100644
--- a/cutejava-front/src/views/components/dev/CuteRichTextEditor.vue
+++ b/cutejava-front/src/views/components/dev/CuteRichTextEditor.vue
@@ -13,7 +13,7 @@
       :mode="editMode"
     />
     <Editor
-      v-model="editValue"
+      v-model="innerValue"
       :style="`height: 500px;overflow-y: hidden`"
       :default-config="editorConfig"
       :mode="editMode"
@@ -44,7 +44,7 @@ export default {
       required: false,
       default: false
     },
-    content: {
+    value: {
       type: String,
       required: false,
       default: ''
@@ -80,7 +80,7 @@ export default {
       // 'default' or 'simple'
       editMode: 'simple',
       editor: null,
-      editValue: ''
+      innerValue: ''
     }
   },
   computed: {
@@ -89,6 +89,11 @@ export default {
       'baseApi'
     ])
   },
+  watch: {
+    value(newVal) {
+      this.innerValue = newVal
+    }
+  },
   methods: {
     /**
      * 编辑器创建完毕时的回调函数
@@ -97,7 +102,7 @@ export default {
     onCreated(editor) {
       // 一定要用 Object.seal(), 否则会报错
       this.editor = Object.seal(editor)
-      this.editValue = this.content
+      this.innerValue = this.value
     },
     /**
      * 编辑器内容、选区变化时的回调函数
@@ -112,6 +117,7 @@ export default {
       // 纯文本内容
       const text = editor.getText()
       this.$emit('change', html, text)
+      this.$emit('input', html)
     },
     /**
      * 编辑器销毁时的回调函数。调用 editor.destroy() 即可销毁编辑器
@@ -123,15 +129,6 @@ export default {
       }
       editor.destroy()
     },
-    /**
-     * 编辑器内容达到最大长度时的回调函数(会导致卡顿)
-     * @param editor
-     */
-    onMaxLength(editor) {
-      if (editor == null) {
-        return
-      }
-    },
     /**
      * 编辑器 focus 时的回调函数
      * @param editor
@@ -211,6 +208,9 @@ export default {
         return
       }
       this.editor.dangerouslyInsertHtml(html)
+      const content = this.getHtml()
+      this.$emit('change', content)
+      this.$emit('input', content)
     },
     /**
      * 获取编辑器html内容
@@ -229,6 +229,9 @@ export default {
         return
       }
       this.editor.clear()
+      const content = this.getHtml()
+      this.$emit('change', content)
+      this.$emit('input', content)
     },
     /**
      * 撤销
@@ -238,6 +241,9 @@ export default {
         return
       }
       this.editor.undo()
+      const content = this.getHtml()
+      this.$emit('change', content)
+      this.$emit('input', content)
     },
     /**
      * 重做
@@ -247,6 +253,9 @@ export default {
         return
       }
       this.editor.redo()
+      const content = this.getText()
+      this.$emit('change', content)
+      this.$emit('input', content)
     },
     /**
      * 获取选中的文本
@@ -265,6 +274,9 @@ export default {
         return
       }
       this.editor.deleteFragment()
+      const content = this.getHtml()
+      this.$emit('change', content)
+      this.$emit('input', content)
     },
     /**
      * 获取选中的内容。JSON格式
@@ -293,12 +305,16 @@ export default {
         return
       }
       this.editor.insertText(text)
+      const content = this.getHtml()
+      this.$emit('change', content)
+      this.$emit('input', content)
     },
     /**
      * el-form重置联动
      */
     resetField() {
-      this.setHtml('')
+      this.clear()
+      this.$emit('change', '')
       this.$emit('input', '')
     }
   }
diff --git a/cutejava-front/src/views/components/dev/CuteTextAreaInput.vue b/cutejava-front/src/views/components/dev/CuteTextAreaInput.vue
index 23d6c017..20656aeb 100644
--- a/cutejava-front/src/views/components/dev/CuteTextAreaInput.vue
+++ b/cutejava-front/src/views/components/dev/CuteTextAreaInput.vue
@@ -6,7 +6,7 @@
  -->
 <template>
   <el-input
-    v-model="content"
+    v-model="innerValue"
     type="textarea"
     :autosize="{ minRows: 1, maxRows: 5}"
     placeholder="请输入内容"
@@ -50,12 +50,23 @@ export default {
   },
   data() {
     return {
-      content: this.value
+      innerValue: ''
+    }
+  },
+  watch: {
+    value(newVal) {
+      this.innerValue = newVal
     }
   },
   methods: {
     handleInput(value) {
+      this.$emit('change', value)
       this.$emit('input', value)
+    },
+    resetField() {
+      this.innerValue = ''
+      this.$emit('change', '')
+      this.$emit('input', '')
     }
   }
 }
diff --git a/cutejava-front/src/views/components/dev/CuteTransfer.vue b/cutejava-front/src/views/components/dev/CuteTransfer.vue
index fa463469..51d32f4d 100644
--- a/cutejava-front/src/views/components/dev/CuteTransfer.vue
+++ b/cutejava-front/src/views/components/dev/CuteTransfer.vue
@@ -6,7 +6,6 @@
  -->
 <template>
   <el-row>
-    <!--    <el-button @click="onTestValue">测试值</el-button>-->
     <el-col :span="11">
       <el-input
         v-model="searchValue"
@@ -96,6 +95,7 @@ export default {
      */
     value: {
       type: Array,
+      require: false,
       default: function() {
         return []
       }
@@ -115,7 +115,7 @@ export default {
      */
     primaryKey: {
       type: String,
-      require: false,
+      require: true,
       default: 'id'
     },
     /**
@@ -139,25 +139,27 @@ export default {
       searchCacheDS: []
     }
   },
-  mounted() {
-    this.rightValues = this.value
-    this.leftDataSource = this.dataSource
+  watch: {
+    value(newVal) {
+      this.rightValues = newVal
+      this.leftDataSource = this.dataSource
 
-    const key = this.primaryKey
-    const leftDataSource = this.leftDataSource || []
-    const rightValues = this.rightValues
+      const key = this.primaryKey
+      const leftDataSource = this.leftDataSource || []
+      const rightValues = this.rightValues
 
-    if (rightValues && rightValues.length > 0) {
-      const rightDataSource = []
-      for (const element of leftDataSource) {
-        if (rightValues.indexOf(element[key]) !== -1) {
-          rightDataSource.push(element)
+      if (rightValues && rightValues.length > 0) {
+        const rightDataSource = []
+        for (const element of leftDataSource) {
+          if (rightValues.indexOf(element[key]) !== -1) {
+            rightDataSource.push(element)
+          }
         }
+        this.rightDataSource = rightDataSource
+        this.leftDataSource = leftDataSource.filter(item => !rightValues.includes(item[key]))
+      } else {
+        this.leftDataSource = leftDataSource
       }
-      this.rightDataSource = rightDataSource
-      this.leftDataSource = leftDataSource.filter(item => !rightValues.includes(item[key]))
-    } else {
-      this.leftDataSource = leftDataSource
     }
   },
   methods: {
@@ -234,14 +236,24 @@ export default {
         this.$emit('change', this.rightValues)
         this.$emit('input', this.rightValues)
       }
+    },
+    /**
+     * el-form重置联动
+     */
+    resetField() {
+      const searchCacheDS = this.searchCacheDS
+      if (searchCacheDS && searchCacheDS.length > 0) {
+        this.leftDataSource = [...searchCacheDS, ...this.rightDataSource]
+        this.searchCacheDS = []
+      } else {
+        this.leftDataSource = [...this.leftDataSource, ...this.rightDataSource]
+      }
+      this.searchValue = ''
+      this.leftSelection = []
+      this.rightSelection = []
+      this.rightDataSource = []
+      this.rightValues = []
     }
-    // onTestValue() {
-    //   console.error('==============leftDataSource', this.leftDataSource)
-    //   console.error('==============leftSelection', this.leftSelection)
-    //   console.error('==============rightDataSource', this.rightDataSource)
-    //   console.error('==============rightSelection', this.rightSelection)
-    //   console.error('==============rightValues', this.rightValues)
-    // }
   }
 }
 </script>
diff --git a/cutejava-front/src/views/componentsDemo/business/CuteDeptTreeDemo.vue b/cutejava-front/src/views/componentsDemo/business/CuteDeptTreeDemo.vue
index 1274ec6f..98f92b1b 100644
--- a/cutejava-front/src/views/componentsDemo/business/CuteDeptTreeDemo.vue
+++ b/cutejava-front/src/views/componentsDemo/business/CuteDeptTreeDemo.vue
@@ -44,9 +44,9 @@ export default {
         dept: null
       },
       apiData: [
-        { name: 'value', remark: '绑定的值', type: 'string', defaultValue: '-', required: '否' },
-        { name: 'node-click', remark: '部门节点发生改变的时候触发的回调', type: '(value) => {}', defaultValue: '-', required: '否' },
-        { name: 'search', remark: '搜索部门回调事件', type: '(value) => {}', defaultValue: '-', required: '否' }
+        { name: 'value | v-model', remark: '绑定的值', type: 'string', defaultValue: '-', required: '否' },
+        { name: 'search', remark: '搜索部门回调事件', type: '(value) => {}', defaultValue: '-', required: '否' },
+        { name: 'node-click', remark: '部门节点发生改变的时候触发的回调', type: '(value) => {}', defaultValue: '-', required: '否' }
       ]
     }
   },
diff --git a/cutejava-front/src/views/componentsDemo/business/CuteFileDragUploadDemo.vue b/cutejava-front/src/views/componentsDemo/business/CuteFileDragUploadDemo.vue
index 69337eb8..25ad0d9a 100644
--- a/cutejava-front/src/views/componentsDemo/business/CuteFileDragUploadDemo.vue
+++ b/cutejava-front/src/views/componentsDemo/business/CuteFileDragUploadDemo.vue
@@ -18,7 +18,7 @@
         </el-select>
       </el-form-item>
       <el-form-item label="文件上传" prop="fileUrl">
-        <cute-file-drag-upload v-model="form" mode="local" />
+        <cute-file-drag-upload v-model="form.fileUrl" mode="local" />
       </el-form-item>
       <el-form-item>
         <el-button type="primary" @click="submitForm('form')">提 交</el-button>
@@ -37,7 +37,7 @@
         </el-select>
       </el-form-item>
       <el-form-item label="文件上传" prop="fileUrl" label-width="80px">
-        <cute-file-drag-upload v-model="form" mode="local" />
+        <cute-file-drag-upload v-model="form.fileUrl" mode="local" />
       </el-form-item>
     </cute-form-dialog>
     <h4>与CuteFormDrawer集成</h4>
@@ -53,7 +53,7 @@
         </el-select>
       </el-form-item>
       <el-form-item label="文件上传" prop="fileUrl" label-width="80px">
-        <cute-file-drag-upload v-model="form" mode="local" />
+        <cute-file-drag-upload v-model="form.fileUrl" mode="local" />
       </el-form-item>
     </cute-form-drawer>
     <h4>API</h4>
@@ -83,7 +83,7 @@ export default {
         fileUrl: ''
       },
       apiData: [
-        { name: 'value', remark: '上传的文件路径', type: 'string', defaultValue: '-', required: '是' },
+        { name: 'value | v-model', remark: '上传的文件路径', type: 'string', defaultValue: '-', required: '否' },
         { name: 'mode', remark: '上传方式。local本地、oss对象存储', type: 'string', defaultValue: 'local', required: '否' }
       ]
     }
diff --git a/cutejava-front/src/views/componentsDemo/business/CuteFileUploadDemo.vue b/cutejava-front/src/views/componentsDemo/business/CuteFileUploadDemo.vue
index 34299144..4a7c95a6 100644
--- a/cutejava-front/src/views/componentsDemo/business/CuteFileUploadDemo.vue
+++ b/cutejava-front/src/views/componentsDemo/business/CuteFileUploadDemo.vue
@@ -18,7 +18,7 @@
         </el-select>
       </el-form-item>
       <el-form-item label="文件上传" prop="fileUrl">
-        <cute-file-upload v-model="form" mode="local" />
+        <cute-file-upload v-model="form.fileUrl" mode="local" />
       </el-form-item>
       <el-form-item>
         <el-button type="primary" @click="submitForm('form')">提 交</el-button>
@@ -37,7 +37,7 @@
         </el-select>
       </el-form-item>
       <el-form-item label="文件上传" prop="fileUrl" label-width="80px">
-        <cute-file-upload v-model="form" mode="local" />
+        <cute-file-upload v-model="form.fileUrl" mode="local" />
       </el-form-item>
     </cute-form-dialog>
     <h4>与CuteFormDrawer集成</h4>
@@ -53,7 +53,7 @@
         </el-select>
       </el-form-item>
       <el-form-item label="文件上传" prop="fileUrl" label-width="80px">
-        <cute-file-upload v-model="form" mode="local" />
+        <cute-file-upload v-model="form.fileUrl" mode="local" />
       </el-form-item>
     </cute-form-drawer>
     <h4>API</h4>
diff --git a/cutejava-front/src/views/componentsDemo/business/CuteProductLineSelectDemo.vue b/cutejava-front/src/views/componentsDemo/business/CuteProductLineSelectDemo.vue
index 21549582..bd2b7e47 100644
--- a/cutejava-front/src/views/componentsDemo/business/CuteProductLineSelectDemo.vue
+++ b/cutejava-front/src/views/componentsDemo/business/CuteProductLineSelectDemo.vue
@@ -40,7 +40,7 @@ export default {
         productLine: null
       },
       apiData: [
-        { name: 'value', remark: '绑定的值', type: 'string', defaultValue: '-', required: '否' },
+        { name: 'value | v-model', remark: '绑定的值', type: 'string', defaultValue: '-', required: '否' },
         { name: 'disabled', remark: '是否禁用', type: 'boolean', defaultValue: 'false', required: '否' },
         { name: 'change', remark: '产品线发生改变的时候触发的回调', type: '(value) => {}', defaultValue: '-', required: '否' },
         { name: 'detail', remark: '产品线明细发生改变的时候触发的回调', type: '(value) => {}', defaultValue: '-', required: '否' }
diff --git a/cutejava-front/src/views/componentsDemo/business/CuteProductLineSelectProDemo.vue b/cutejava-front/src/views/componentsDemo/business/CuteProductLineSelectProDemo.vue
index cb824073..e8906e78 100644
--- a/cutejava-front/src/views/componentsDemo/business/CuteProductLineSelectProDemo.vue
+++ b/cutejava-front/src/views/componentsDemo/business/CuteProductLineSelectProDemo.vue
@@ -41,7 +41,7 @@ export default {
         productLine: null
       },
       apiData: [
-        { name: 'value', remark: '绑定的值', type: 'string', defaultValue: '-', required: '否' }
+        { name: 'value | v-model', remark: '绑定的值', type: 'string', defaultValue: '-', required: '否' }
       ]
     }
   },
diff --git a/cutejava-front/src/views/componentsDemo/business/CuteSingleUserSelectDemo.vue b/cutejava-front/src/views/componentsDemo/business/CuteSingleUserSelectDemo.vue
index c712bc54..fc88be9c 100644
--- a/cutejava-front/src/views/componentsDemo/business/CuteSingleUserSelectDemo.vue
+++ b/cutejava-front/src/views/componentsDemo/business/CuteSingleUserSelectDemo.vue
@@ -41,7 +41,7 @@ export default {
         user: ''
       },
       apiData: [
-        { name: 'value', remark: '绑定的值', type: 'string', defaultValue: '-', required: '否' },
+        { name: 'value | v-model', remark: '绑定的值', type: 'string', defaultValue: '-', required: '否' },
         { name: 'change', remark: '选中用户发生改变的时候触发的回调', type: '(value) => {}', defaultValue: '-', required: '否' }
       ]
     }
diff --git a/cutejava-front/src/views/componentsDemo/business/CuteUserSelectDemo.vue b/cutejava-front/src/views/componentsDemo/business/CuteUserSelectDemo.vue
index ebf474a4..0c2684e1 100644
--- a/cutejava-front/src/views/componentsDemo/business/CuteUserSelectDemo.vue
+++ b/cutejava-front/src/views/componentsDemo/business/CuteUserSelectDemo.vue
@@ -42,7 +42,7 @@ export default {
         user: []
       },
       apiData: [
-        { name: 'value', remark: '绑定的值', type: 'array', defaultValue: '[]', required: '否' },
+        { name: 'value | v-model', remark: '绑定的值', type: 'array', defaultValue: '[]', required: '否' },
         { name: 'change', remark: '选中用户发生改变的时候触发的回调', type: '(value) => {}', defaultValue: '-', required: '否' }
       ]
     }
diff --git a/cutejava-front/src/views/componentsDemo/dev/CuteCodeEditorDemo.vue b/cutejava-front/src/views/componentsDemo/dev/CuteCodeEditorDemo.vue
index 6272939d..ca1930d4 100644
--- a/cutejava-front/src/views/componentsDemo/dev/CuteCodeEditorDemo.vue
+++ b/cutejava-front/src/views/componentsDemo/dev/CuteCodeEditorDemo.vue
@@ -6,9 +6,9 @@
       <li>在使用过程中有任何问题，咨询 @Odboy（前端）</li>
     </ul>
     <h4>Java编辑器</h4>
-    <cute-code-editor :content="javaContent" mode="java" @change="onJavaChange" />
+    <cute-code-editor v-model="javaContent" mode="java" @change="onJavaChange" />
     <h4>Yaml编辑器</h4>
-    <cute-code-editor :content="yamlContent" mode="yaml" @change="onYamlChange" />
+    <cute-code-editor v-model="yamlContent" mode="yaml" @change="onYamlChange" />
     <h4>API</h4>
     <el-table :data="apiData">
       <el-table-column prop="name" label="参数" width="220" />
@@ -77,7 +77,7 @@ export default {
         '  # IMMEDIATE(立即): 当应用程序以"IMMEDIATE"模式关闭时，它会立即终止，而不管当前是否有任何活动任务或请求。这种方式适用于那些可以立即停止而不会造成严重问题的情况。\n' +
         '  shutdown: graceful\n',
       apiData: [
-        { name: 'content', remark: '内容', type: 'string', defaultValue: '-', required: '是' },
+        { name: 'value | v-model', remark: '内容', type: 'string', defaultValue: '-', required: '否' },
         { name: 'height', remark: '编辑框高度', type: 'string', defaultValue: '500px', required: '否' },
         { name: 'readonly', remark: '是否只读', type: 'boolean', defaultValue: 'false', required: '否' },
         { name: 'mode', remark: '语法模式。支持：yaml | java | go | swift | dockerfile | groovy | lua | perl | python | ruby | sql | xml | vue', type: 'string', defaultValue: 'yaml', required: '否' },
diff --git a/cutejava-front/src/views/componentsDemo/dev/CuteMarkdownDemo.vue b/cutejava-front/src/views/componentsDemo/dev/CuteMarkdownDemo.vue
index c29923fd..9295a992 100644
--- a/cutejava-front/src/views/componentsDemo/dev/CuteMarkdownDemo.vue
+++ b/cutejava-front/src/views/componentsDemo/dev/CuteMarkdownDemo.vue
@@ -7,7 +7,7 @@
     </ul>
     <h4>基础用法</h4>
     <cute-markdown
-      :content="content"
+      v-model="content"
       @change="onChange"
       @save="onSave"
     />
@@ -38,20 +38,20 @@ export default {
         '- HTML 标签；\n' +
         '- 流程图和序列图 \n',
       apiData: [
-        { name: 'content', remark: 'markdown格式内容', type: 'string', defaultValue: '-', required: '是' },
-        { name: 'change', remark: '编辑区发生变化的回调事件', type: '(text, markdown) => {}', defaultValue: '-', required: '否' },
-        { name: 'save', remark: 'ctrl + s 的回调事件(保存按键,同样触发该回调)', type: '(text, markdown) => {}', defaultValue: '-', required: '否' }
+        { name: 'value | v-model', remark: 'markdown格式内容', type: 'string', defaultValue: '-', required: '否' },
+        { name: 'change', remark: '编辑区发生变化的回调事件', type: '(markdown, html) => {}', defaultValue: '-', required: '否' },
+        { name: 'save', remark: 'ctrl + s 的回调事件(保存按键,同样触发该回调)', type: '(markdown, html) => {}', defaultValue: '-', required: '否' }
       ]
     }
   },
   methods: {
-    onChange(text, markdown) {
-      console.log('onChange:text', text)
+    onChange(markdown, html) {
       console.log('onChange:markdown', markdown)
+      console.log('onChange:html', html)
     },
-    onSave(text, markdown) {
-      console.log('onSave:text', text)
+    onSave(markdown, html) {
       console.log('onSave:markdown', markdown)
+      console.log('onSave:html', html)
     }
   }
 }
diff --git a/cutejava-front/src/views/componentsDemo/dev/CuteOneKeyCopyDemo.vue b/cutejava-front/src/views/componentsDemo/dev/CuteOneKeyCopyDemo.vue
index cd60be74..a5761862 100644
--- a/cutejava-front/src/views/componentsDemo/dev/CuteOneKeyCopyDemo.vue
+++ b/cutejava-front/src/views/componentsDemo/dev/CuteOneKeyCopyDemo.vue
@@ -8,7 +8,8 @@
     <h4>基础用法：clipboard版</h4>
     <div id="btn" @click="copy">复制</div>
     <h4>基础用法：OneKeyCopy组件版（推荐）</h4>
-    <cute-one-key-copy :content.sync="msg" />
+    <!-- v-model 会自动绑定元素的 value 属性，并监听 input 事件（某些元素如复选框监听 change 事件）-->
+    <cute-one-key-copy v-model="msg" />
     <h4>API</h4>
     <el-table :data="apiData">
       <el-table-column prop="name" label="参数" width="220" />
@@ -30,7 +31,7 @@ export default {
     return {
       msg: '来复制我吧',
       apiData: [
-        { name: 'content', remark: '待复制的内容', type: 'string', defaultValue: '-', required: '是' }
+        { name: 'value | v-model', remark: '待复制的内容', type: 'string', defaultValue: '-', required: '否' }
       ]
     }
   },
diff --git a/cutejava-front/src/views/componentsDemo/dev/CuteRichTextEditorDemo.vue b/cutejava-front/src/views/componentsDemo/dev/CuteRichTextEditorDemo.vue
index 95963f6d..e96b3d47 100644
--- a/cutejava-front/src/views/componentsDemo/dev/CuteRichTextEditorDemo.vue
+++ b/cutejava-front/src/views/componentsDemo/dev/CuteRichTextEditorDemo.vue
@@ -34,7 +34,7 @@ export default {
     return {
       content: '',
       apiData: [
-        { name: 'content', remark: '内容', type: 'string', defaultValue: '-', required: '是' },
+        { name: 'value | v-model', remark: '内容', type: 'string', defaultValue: '-', required: '否' },
         { name: 'readonly', remark: '是否只读', type: 'boolean', defaultValue: 'false', required: '否' },
         { name: 'change', remark: '内容改变回调事件', type: '(html, text) => {}', defaultValue: '-', required: '否' },
         { name: 'focus', remark: '编辑器获得焦点回调事件', type: '(editor) => {}', defaultValue: '-', required: '否' },
diff --git a/cutejava-front/src/views/componentsDemo/dev/CuteTransferDemo.vue b/cutejava-front/src/views/componentsDemo/dev/CuteTransferDemo.vue
index a8e5147a..f4d16e68 100644
--- a/cutejava-front/src/views/componentsDemo/dev/CuteTransferDemo.vue
+++ b/cutejava-front/src/views/componentsDemo/dev/CuteTransferDemo.vue
@@ -56,7 +56,7 @@ export default {
         { id: 18, name: '小王', description: '小王牛P' }
       ],
       apiData: [
-        { name: 'value', remark: '右侧已选值', type: 'array', defaultValue: '[]', required: '否' },
+        { name: 'value | v-model', remark: '右侧数据对象属性值集合', type: 'array', defaultValue: '[]', required: '否' },
         { name: 'dataSource', remark: '左侧表格数据', type: 'array', defaultValue: '[]', required: '是' },
         { name: 'primary-key', remark: '取对象的哪个值作为value', type: 'string', defaultValue: 'id', required: '否' },
         { name: 'loading', remark: '是否加载中', type: 'boolean', defaultValue: 'false', required: '是' },
diff --git a/cutejava-front/src/views/componentsDemo/index.vue b/cutejava-front/src/views/componentsDemo/index.vue
index d7ed9363..5739bff2 100644
--- a/cutejava-front/src/views/componentsDemo/index.vue
+++ b/cutejava-front/src/views/componentsDemo/index.vue
@@ -50,7 +50,7 @@
           </el-collapse-item>
         </el-collapse>
       </el-tab-pane>
-      <el-tab-pane label="快捷组件" name="kit">
+      <el-tab-pane label="快捷组件" name="util">
         <el-collapse accordion>
           <el-collapse-item title="信息提示 KitMessage" name="KitMessage">
             <KitMessageDemo />
@@ -130,10 +130,10 @@
 
 import CutePage from '@/views/components/dev/CutePage.vue'
 import CuteButtonDemo from '@/views/componentsDemo/dev/CuteButtonDemo.vue'
-import KitMessageDemo from '@/views/componentsDemo/dev/KitMessageDemo.vue'
-import KitNotificationDemo from '@/views/componentsDemo/dev/KitNotificationDemo.vue'
-import KitDialogDemo from '@/views/componentsDemo/dev/KitDialogDemo.vue'
-import KitWsClientDemo from '@/views/componentsDemo/dev/KitWsClientDemo.vue'
+import KitMessageDemo from '@/views/componentsDemo/util/KitMessageDemo.vue'
+import KitNotificationDemo from '@/views/componentsDemo/util/KitNotificationDemo.vue'
+import KitDialogDemo from '@/views/componentsDemo/util/KitDialogDemo.vue'
+import KitWsClientDemo from '@/views/componentsDemo/util/KitWsClientDemo.vue'
 import CuteLinkDemo from '@/views/componentsDemo/dev/CuteLinkDemo.vue'
 import CutePageDemo from '@/views/componentsDemo/dev/CutePageDemo.vue'
 import CuteNoDataDemo from '@/views/componentsDemo/dev/CuteNoDataDemo.vue'
diff --git a/cutejava-front/src/views/componentsDemo/dev/KitDialogDemo.vue b/cutejava-front/src/views/componentsDemo/util/KitDialogDemo.vue
similarity index 100%
rename from cutejava-front/src/views/componentsDemo/dev/KitDialogDemo.vue
rename to cutejava-front/src/views/componentsDemo/util/KitDialogDemo.vue
diff --git a/cutejava-front/src/views/componentsDemo/dev/KitMessageDemo.vue b/cutejava-front/src/views/componentsDemo/util/KitMessageDemo.vue
similarity index 100%
rename from cutejava-front/src/views/componentsDemo/dev/KitMessageDemo.vue
rename to cutejava-front/src/views/componentsDemo/util/KitMessageDemo.vue
diff --git a/cutejava-front/src/views/componentsDemo/dev/KitNotificationDemo.vue b/cutejava-front/src/views/componentsDemo/util/KitNotificationDemo.vue
similarity index 100%
rename from cutejava-front/src/views/componentsDemo/dev/KitNotificationDemo.vue
rename to cutejava-front/src/views/componentsDemo/util/KitNotificationDemo.vue
diff --git a/cutejava-front/src/views/componentsDemo/dev/KitWsClientDemo.vue b/cutejava-front/src/views/componentsDemo/util/KitWsClientDemo.vue
similarity index 100%
rename from cutejava-front/src/views/componentsDemo/dev/KitWsClientDemo.vue
rename to cutejava-front/src/views/componentsDemo/util/KitWsClientDemo.vue