diff --git a/cutejava-front/src/views/componentsDemo/CuteBusinessDemo.vue b/cutejava-front/src/views/componentsDemo/CuteBusinessDemo.vue
new file mode 100644
index 00000000..2d07a507
--- /dev/null
+++ b/cutejava-front/src/views/componentsDemo/CuteBusinessDemo.vue
@@ -0,0 +1,69 @@
+<template>
+  <div style="padding: 50px">
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <span>表单值绑定</span>
+      </div>
+      <el-form ref="form" :model="form" label-width="80px">
+        <el-form-item label="用户" prop="user">
+          <!-- v-model 本质上是 :value 和 @input 事件的语法糖 -->
+          <cute-user-select v-model="form.user" />
+        </el-form-item>
+        <el-form-item label="部门" prop="dept">
+          <cute-dept-tree v-model="form.dept" />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="onSubmit">立即创建</el-button>
+          <el-button>取消</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+    <el-card style="margin-top: 10px">
+      <div slot="header" class="clearfix">
+        <span>用户选择框</span>
+      </div>
+      <cute-user-select @change="onUserSelectChange" />
+    </el-card>
+    <el-card style="margin-top: 10px">
+      <div slot="header" class="clearfix">
+        <span>部门树</span>
+      </div>
+      <cute-dept-tree @node-click="onDeptTreeNodeClick" @search="onDeptTreeSearch" />
+    </el-card>
+  </div>
+</template>
+
+<script>
+
+import CuteUserSelect from '@/views/components/business/CuteUserSelect.vue'
+import CuteDeptTree from '@/views/components/business/CuteDeptTree.vue'
+
+export default {
+  name: 'CuteBusinessDemo',
+  components: { CuteDeptTree, CuteUserSelect },
+  data() {
+    return {
+      form: {
+        user: null,
+        dept: null
+      }
+    }
+  },
+  methods: {
+    onUserSelectChange(data) {
+      console.error('onUserSelectChange=', data)
+    },
+    onDeptTreeNodeClick(data) {
+      console.error('onDeptTreeNodeClick=', data)
+    },
+    onSubmit() {
+      console.error('this.form=', this.form)
+    },
+    onDeptTreeSearch(key) {
+      console.error('onDeptTreeSearch:key', key)
+      console.error('onDeptTreeSearch:form.dept', this.form.dept)
+    }
+  }
+}
+</script>
+
diff --git a/cutejava-front/src/views/componentsDemo/CuteDragTableDemo.vue b/cutejava-front/src/views/componentsDemo/CuteDragTableDemo.vue
new file mode 100644
index 00000000..b0bd1f16
--- /dev/null
+++ b/cutejava-front/src/views/componentsDemo/CuteDragTableDemo.vue
@@ -0,0 +1,131 @@
+<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"
+      >
+        <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>
+    </div>
+    <!-- 表格渲染 -->
+    <!-- fetch: 获取远程数据 -->
+    <!-- params-transform: 组装查询参数 -->
+    <!-- responseTransform: 组装表格对象。对响应结果做处理 -->
+    <!-- primary-key: 主键 -->
+    <!-- columns: 表格列 -->
+    <!-- operate-column: 表格操作列 -->
+    <!-- data-source: 数据源。当data-source不为空时，以data-source的数据为主 -->
+    <!-- mode: 模式。不传默认，传multi为多选 -->
+    <!-- @selection-change: 当且仅当mode为multi时启用 -->
+    <cute-drag-table
+      ref="instance"
+      :fetch="curd.fetch"
+      :params-transform="curd.paramsTransform"
+      primary-key="id"
+      :columns="curd.columns"
+      :operate-column="curd.operateColumn"
+      :page-props="curd.pageProps"
+    />
+  </div>
+</template>
+
+<script>
+import { DateUtil } from '@/utils/myUtil'
+import DictService from '@/api/system/dict'
+import CuteDragTable from '@/views/components/dev/CuteDragTable.vue'
+
+export default {
+  name: 'CuteDragTableDemo',
+  components: { CuteDragTable },
+  data() {
+    return {
+      form: {
+        model: {
+          blurry: ''
+        },
+        rules: {}
+      },
+      curd: {
+        paramsTransform: (pageProps) => {
+          const values = this.form.model
+          return {
+            page: pageProps.current,
+            size: pageProps.pageSize,
+            args: {
+              ...values
+            }
+          }
+        },
+        fetch: async(queryParams) => {
+          return DictService.queryPageDict(queryParams)
+        },
+        columns: [
+          { prop: 'name', label: '名称' },
+          { prop: 'description', label: '描述' },
+          { prop: 'createTime', label: '创建时间', formatter: DateUtil.formatRowDateTime },
+          { prop: 'createBy', label: '创建人' }
+        ],
+        operateColumn: {
+          width: '150',
+          fixed: 'right',
+          formatter: (row, column, cellValue, index) => {
+            return (<div>
+              <el-button type='text' onClick={() => {
+                console.log('编辑')
+              }}>编辑
+              </el-button>
+              <el-button type='text' onClick={() => {
+                console.log('删除')
+              }}>删除
+              </el-button>
+            </div>)
+          }
+        },
+        pageProps: {
+          current: 1,
+          pageSize: 10,
+          total: 0
+        }
+      }
+    }
+  },
+  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)
+      }
+    }
+  }
+}
+</script>
+
diff --git a/cutejava-front/src/views/componentsDemo/CuteFileUploadDemo.vue b/cutejava-front/src/views/componentsDemo/CuteFileUploadDemo.vue
new file mode 100644
index 00000000..9163fa12
--- /dev/null
+++ b/cutejava-front/src/views/componentsDemo/CuteFileUploadDemo.vue
@@ -0,0 +1,52 @@
+<template>
+  <div class="app-container">
+    <el-form ref="form" :model="form" label-width="100px">
+      <el-form-item label="活动名称" prop="name">
+        <el-input v-model="form.name" style="width: 100%" />
+      </el-form-item>
+      <el-form-item label="活动区域" prop="region">
+        <el-select v-model="form.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="fileUrl">
+        <cute-file-upload v-model="form" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="submitForm('form')">提 交</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import CuteFileUpload from '@/views/components/business/CuteFileUpload'
+
+export default {
+  name: 'CuteFileUploadDemo',
+  components: { CuteFileUpload },
+  data() {
+    return {
+      form: {
+        name: '',
+        region: '',
+        fileUrl: ''
+      }
+    }
+  },
+  methods: {
+    submitForm(formName) {
+      const that = this
+      that.$refs[formName].validate((valid) => {
+        if (valid) {
+          console.error('submitForm:form', that.form)
+        } else {
+          return false
+        }
+      })
+    }
+  }
+}
+</script>
+
diff --git a/cutejava-front/src/views/componentsDemo/CuteJavaEditorDemo.vue b/cutejava-front/src/views/componentsDemo/CuteJavaEditorDemo.vue
new file mode 100644
index 00000000..12af4e66
--- /dev/null
+++ b/cutejava-front/src/views/componentsDemo/CuteJavaEditorDemo.vue
@@ -0,0 +1,47 @@
+<template>
+  <div class="app-container">
+    <!--    <cute-java-editor :content="content" @change="onChange" />-->
+    <cute-code-editor :content="content" mode="java" @change="onChange" />
+  </div>
+</template>
+
+<script>
+// 旧组件
+// import CuteYamlEditor from '@/views/components/dev/CuteYamlEditor'
+// 新组件
+import CuteCodeEditor from '@/views/components/dev/CuteCodeEditor'
+
+export default {
+  name: 'CuteJavaEditorDemo',
+  // components: { CuteJavaEditor },
+  components: { CuteCodeEditor },
+  data() {
+    return {
+      content: 'package cn.odboy;\n' +
+        '\n' +
+        'import cn.odboy.framework.context.CsBootApplication;\n' +
+        'import io.swagger.annotations.Api;\n' +
+        'import org.springframework.boot.SpringApplication;\n' +
+        'import org.springframework.boot.autoconfigure.SpringBootApplication;\n' +
+        '\n' +
+        'import java.net.UnknownHostException;\n' +
+        '\n' +
+        '@Api(hidden = true)\n' +
+        '@SpringBootApplication\n' +
+        'public class AppRun extends CsBootApplication {\n' +
+        '\n' +
+        '    public static void main(String[] args) throws UnknownHostException {\n' +
+        '        SpringApplication springApplication = new SpringApplication(AppRun.class);\n' +
+        '        inited(springApplication.run(args));\n' +
+        '    }\n' +
+        '}\n'
+    }
+  },
+  methods: {
+    onChange(value) {
+      console.error('onChange', value)
+    }
+  }
+}
+</script>
+
diff --git a/cutejava-front/src/views/componentsDemo/CuteMarkdownDemo.vue b/cutejava-front/src/views/componentsDemo/CuteMarkdownDemo.vue
new file mode 100644
index 00000000..ed2b5725
--- /dev/null
+++ b/cutejava-front/src/views/componentsDemo/CuteMarkdownDemo.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="app-container">
+    <!-- @change 编辑区发生变化的回调事件 -->
+    <!-- @save ctrl + s 的回调事件(保存按键,同样触发该回调) -->
+    <cute-markdown
+      :content="markdown.content"
+      @change="onChange"
+      @save="onSave"
+    />
+  </div>
+</template>
+
+<script>
+import CuteMarkdown from '@/views/components/dev/CuteMarkdown'
+
+export default {
+  name: 'CuteMarkdownDemo',
+  components: { CuteMarkdown },
+  data() {
+    return {
+      markdown: {
+        height: '200px',
+        content: '初始化内容'
+      }
+    }
+  },
+  methods: {
+    onChange(text, markdown) {
+      console.error('onChange:text', text)
+      console.error('onChange:markdown', markdown)
+    },
+    onSave(text, markdown) {
+      console.error('onSave:text', text)
+      console.error('onSave:markdown', markdown)
+    }
+  }
+}
+</script>
+
diff --git a/cutejava-front/src/views/componentsDemo/CuteOneKeyCopyDemo.vue b/cutejava-front/src/views/componentsDemo/CuteOneKeyCopyDemo.vue
new file mode 100644
index 00000000..80278be3
--- /dev/null
+++ b/cutejava-front/src/views/componentsDemo/CuteOneKeyCopyDemo.vue
@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <el-divider>clipboard版</el-divider>
+    <span>{{ msg }}</span>
+    <div id="btn" @click="copy">复制</div>
+    <el-divider>OneKeyCopy组件版</el-divider>
+    <cute-one-key-copy style="margin-left: 10pt" :content.sync="msg" />
+  </div>
+</template>
+<script>
+import Clipboard from 'clipboard'
+import { Message } from 'element-ui'
+import CuteOneKeyCopy from '@/views/components/dev/CuteOneKeyCopy'
+export default {
+  components: { CuteOneKeyCopy },
+  data() {
+    return {
+      msg: '来复制我吧'
+    }
+  },
+  methods: {
+    // 复制方法
+    copy() {
+      const that = this
+      const clipboard = new Clipboard('#btn', {
+        text(trigger) {
+          console.log(trigger)
+          // 返回字符串
+          return that.msg
+        }
+      })
+      // 复制成功
+      clipboard.on('success', (e) => {
+        Message.success('复制成功')
+        console.log(e, '复制成功')
+        clipboard.destroy()
+      })
+      // //复制失败
+      clipboard.on('error', (e) => {
+        Message.error('复制失败')
+        console.log(e, '复制失败')
+        clipboard.destroy()
+      })
+    }
+  }
+}
+</script>
+<style scoped>
+#btn {
+  display: inline-block;
+  padding: 3px 12px;
+  border-radius: 6px;
+  background-color: #eee;
+  color: #333;
+  cursor: pointer;
+}
+#btn:active {
+  background-color: #ddd;
+  color: #666;
+}
+</style>
diff --git a/cutejava-front/src/views/componentsDemo/CuteRichTextEditorDemo.vue b/cutejava-front/src/views/componentsDemo/CuteRichTextEditorDemo.vue
new file mode 100644
index 00000000..acf20726
--- /dev/null
+++ b/cutejava-front/src/views/componentsDemo/CuteRichTextEditorDemo.vue
@@ -0,0 +1,31 @@
+<template>
+  <div class="app-container">
+    <cute-rich-text-editor
+      :read-only="false"
+      @change="onChange"
+    />
+  </div>
+</template>
+
+<script>
+import CuteRichTextEditor from '@/views/components/dev/CuteRichTextEditor'
+
+export default {
+  name: 'CuteRichTextEditorDemo',
+  components: { CuteRichTextEditor },
+  data() {
+    return {
+      html: {
+        height: '200px'
+      }
+    }
+  },
+  methods: {
+    onChange(html, text) {
+      console.error('onChange:html', html)
+      console.error('onChange:text', text)
+    }
+  }
+}
+</script>
+
diff --git a/cutejava-front/src/views/componentsDemo/CuteSimpleTableDemo.vue b/cutejava-front/src/views/componentsDemo/CuteSimpleTableDemo.vue
new file mode 100644
index 00000000..155839c6
--- /dev/null
+++ b/cutejava-front/src/views/componentsDemo/CuteSimpleTableDemo.vue
@@ -0,0 +1,185 @@
+<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"
+      >
+        <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="onDrawerClick">演示:表单抽屉</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <!-- 表格渲染 -->
+    <!-- fetch: 获取远程数据 -->
+    <!-- params-transform: 组装查询参数 -->
+    <!-- responseTransform: 组装表格对象。对响应结果做处理 -->
+    <!-- primary-key: 主键 -->
+    <!-- columns: 表格列 -->
+    <!-- operate-column: 表格操作列 -->
+    <!-- mode: 模式。不传默认，传multi为多选 -->
+    <!-- @selection-change: 当且仅当mode为multi时启用 -->
+    <cute-simple-table
+      ref="instance"
+      :fetch="curd.fetch"
+      :params-transform="curd.paramsTransform"
+      primary-key="id"
+      :columns="curd.columns"
+      :operate-column="curd.operateColumn"
+      :page-props="curd.pageProps"
+    />
+    <cute-form-dialog ref="dialogForm" :form="createForm" title="演示:表单对话框" @submit="onDialogFormSubmit">
+      <el-form-item label="活动名称" prop="name" label-width="100px">
+        <el-input v-model="createForm.model.name" placeholder="请输入" style="width: 100%" />
+      </el-form-item>
+      <el-form-item label="活动区域" prop="region" label-width="100px">
+        <el-select v-model="createForm.model.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" :form="createForm" title="演示:表单抽屉" @submit="onDrawerFormSubmit">
+      <el-form-item label="活动名称" prop="name" label-width="100px">
+        <el-input v-model="createForm.model.name" placeholder="请输入" style="width: 100%" />
+      </el-form-item>
+      <el-form-item label="活动区域" prop="region" label-width="100px">
+        <el-select v-model="createForm.model.region" placeholder="请选择" style="width: 100%">
+          <el-option label="区域一" value="shanghai" />
+          <el-option label="区域二" value="beijing" />
+        </el-select>
+      </el-form-item>
+    </cute-form-drawer>
+  </div>
+</template>
+
+<script>
+import CuteSimpleTable from '@/views/components/dev/CuteSimpleTable'
+import { DateUtil } from '@/utils/myUtil'
+import DictService from '@/api/system/dict'
+import CuteFormDialog from '@/views/components/dev/CuteFormDialog'
+import CuteFormDrawer from '@/views/components/dev/CuteFormDrawer'
+
+export default {
+  name: 'CuteSimpleTableDemo',
+  components: { CuteFormDrawer, CuteFormDialog, CuteSimpleTable },
+  data() {
+    return {
+      form: {
+        model: {
+          blurry: ''
+        },
+        rules: {}
+      },
+      curd: {
+        paramsTransform: (pageProps) => {
+          const values = this.form.model
+          return {
+            page: pageProps.current,
+            size: pageProps.pageSize,
+            args: {
+              ...values
+            }
+          }
+        },
+        fetch: async(queryParams) => {
+          return DictService.queryPageDict(queryParams)
+        },
+        columns: [
+          { prop: 'name', label: '名称' },
+          { prop: 'description', label: '描述' },
+          { prop: 'createTime', label: '创建时间', formatter: DateUtil.formatRowDateTime },
+          { prop: 'createBy', label: '创建人' }
+        ],
+        operateColumn: {
+          width: '150',
+          fixed: 'right',
+          formatter: (row, column, cellValue, index) => {
+            return (<div>
+              <el-button type='text' onClick={() => {
+                console.log('编辑')
+              }}>编辑
+              </el-button>
+              <el-button type='text' onClick={() => {
+                console.log('删除')
+              }}>删除
+              </el-button>
+            </div>)
+          }
+        },
+        pageProps: {
+          current: 1,
+          pageSize: 10,
+          total: 0
+        }
+      },
+      createForm: {
+        model: {
+          name: '',
+          region: ''
+        },
+        rules: {
+          name: [
+            { required: true, message: '请输入活动名称', trigger: 'blur' },
+            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
+          ],
+          region: [
+            { required: true, message: '请选择活动区域', trigger: 'change' }
+          ]
+        }
+      }
+    }
+  },
+  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()
+    },
+    onDialogFormSubmit(values) {
+      console.error('onDialogFormSubmit', values)
+    },
+    onDrawerClick() {
+      this.$refs.drawerFrom.show()
+    },
+    onDrawerFormSubmit(values) {
+      console.error('onDrawerFormSubmit', values)
+    }
+  }
+}
+</script>
+
diff --git a/cutejava-front/src/views/componentsDemo/CuteYamlEditorDemo.vue b/cutejava-front/src/views/componentsDemo/CuteYamlEditorDemo.vue
new file mode 100644
index 00000000..0f3fc317
--- /dev/null
+++ b/cutejava-front/src/views/componentsDemo/CuteYamlEditorDemo.vue
@@ -0,0 +1,256 @@
+<template>
+  <div class="app-container">
+    <!--    <cute-yaml-editor :content="content" @change="onChange" />-->
+    <cute-code-editor :content="content" mode="yaml" @change="onChange" />
+  </div>
+</template>
+
+<script>
+// 旧组件
+// import CuteYamlEditor from '@/views/components/dev/CuteYamlEditor'
+// 新组件
+import CuteCodeEditor from '@/views/components/dev/CuteCodeEditor'
+
+export default {
+  name: 'CuteYamlEditorDemo',
+  // components: { CuteYamlEditor },
+  components: { CuteCodeEditor },
+  data() {
+    return {
+      content: 'server:\n' +
+        '  port: 8000\n' +
+        '  http2:\n' +
+        '    # 启用 HTTP/2 支持，提升传输效率\n' +
+        '    enabled: true\n' +
+        '  undertow:\n' +
+        '    threads:\n' +
+        '      # 工作线程数，默认设置为io-threads * 8。如果你的应用程序有很多同步阻塞操作，可以适当增加这个值\n' +
+        '      worker: 8\n' +
+        '      # 设置IO线程数, 它主要执行非阻塞的任务,它们会负责多个连接, 默认设置每个CPU核心一个线程\n' +
+        '      # 阻塞任务线程池, 当执行类似servlet请求阻塞操作, undertow会从这个线程池中取得线程,它的值设置取决于系统的负载\n' +
+        '      io: 4\n' +
+        '    # 设置为true以使用直接内存（堆外内存）来存储缓冲区。这可以减少垃圾回收的开销。\n' +
+        '    direct-buffers: true\n' +
+        '    # 以下的配置会影响buffer,这些buffer会用于服务器连接的IO操作,有点类似netty的池化内存管理\n' +
+        '    # 每块buffer的空间大小,越小的空间被利用越充分\n' +
+        '    buffer-size: 1024\n' +
+        '    accesslog:\n' +
+        '      # 关闭日志\n' +
+        '      enabled: false\n' +
+        '  compression:\n' +
+        '    # 启用 GZIP 压缩，减少传输数据量\n' +
+        '    enabled: true\n' +
+        '    # 需要压缩的 MIME 类型\n' +
+        '    mime-types: text/html,text/xml,text/plain,text/css,text/javascript,application/javascript,application/json\n' +
+        '    # 最小压缩响应大小（字节）\n' +
+        '    min-response-size: 1024\n' +
+        '  # 启用优雅停机，并遵守spring.lifecycle.timeout-per-shutdown-phase属性中给出的超时\n' +
+        '  # GRACEFUL (优雅): 当应用程序以"GRACEFUL"模式关闭时，它不会接受新的请求且会尝试完成所有正在进行的请求和处理，然后才会终止。这种方式适用于那些可能需要一些时间来清理资源或完成正在进行的任务的场景。\n' +
+        '  # IMMEDIATE(立即): 当应用程序以"IMMEDIATE"模式关闭时，它会立即终止，而不管当前是否有任何活动任务或请求。这种方式适用于那些可以立即停止而不会造成严重问题的情况。\n' +
+        '  shutdown: graceful\n' +
+        'spring:\n' +
+        '  application:\n' +
+        '    name: cutejava\n' +
+        '    title: CuteJava后台管理系统\n' +
+        '  lifecycle:\n' +
+        '    # 采用java.time.Duration格式的值,如果在这个时间内，优雅停机没有停掉应用，超过这个时间就会强制停止应用\n' +
+        '    timeout-per-shutdown-phase: 30s\n' +
+        '  freemarker:\n' +
+        '    # 是否检查模板位置是否存在\n' +
+        '    check-template-location: false\n' +
+        '    # 模板编码\n' +
+        '    charset: utf-8\n' +
+        '  cache:\n' +
+        '    # 解决缓存异常 https://blog.csdn.net/jikeyeka/article/details/125804049\n' +
+        '    type: redis\n' +
+        '  data:\n' +
+        '    redis:\n' +
+        '      repositories:\n' +
+        '        # 是否启用Redis存储(关闭防止出现 Multiple Spring Data modules found, entering strict repository configuration mode)\n' +
+        '        enabled: false\n' +
+        '  datasource:\n' +
+        '    druid:\n' +
+        '      db-type: com.alibaba.druid.pool.DruidDataSource\n' +
+        '      driverClassName: com.p6spy.engine.spy.P6SpyDriver\n' +
+        '      url: jdbc:p6spy:mysql://192.168.100.128:23306/cutejava?serverTimezone=Asia/Shanghai&characterEncoding=utf8&useSSL=false&allowPublicKeyRetrieval=true\n' +
+        '      username: root\n' +
+        '      password: lm,101208..,.\n' +
+        '      # 初始连接数，建议设置为与最小空闲连接数相同\n' +
+        '      initial-size: 2\n' +
+        '      # 最小空闲连接数，保持足够的空闲连接以应对请求\n' +
+        '      min-idle: 2\n' +
+        '      # 最大连接数，根据并发需求适当增加\n' +
+        '      max-active: 8\n' +
+        '      # 获取连接超时时间（毫秒），调整以满足响应时间要求\n' +
+        '      max-wait: 3000\n' +
+        '      # 启用KeepAlive机制，保持长连接\n' +
+        '      keep-alive: true\n' +
+        '      # 连接有效性检测间隔时间（毫秒），定期检查连接的健康状态\n' +
+        '      time-between-eviction-runs-millis: 60000\n' +
+        '      # 连接在池中最小生存时间（毫秒），确保连接在池中至少存在一段时间\n' +
+        '      min-evictable-idle-time-millis: 300000\n' +
+        '      # 连接在池中最大生存时间（毫秒），防止连接在池中停留过长\n' +
+        '      max-evictable-idle-time-millis: 900000\n' +
+        '      # 指明连接是否被空闲连接回收器(如果有)进行检验.如果检测失败,则连接将被从池中去除\n' +
+        '      test-while-idle: true\n' +
+        '      # 指明是否在从池中取出连接前进行检验,如果检验失败, 则从池中去除连接并尝试取出另一个\n' +
+        '      test-on-borrow: true\n' +
+        '      # 是否在归还到池中前进行检验\n' +
+        '      test-on-return: false\n' +
+        '      # 停用 com_ping 探活机制\n' +
+        '      use-ping-method: false\n' +
+        '      # 检测连接是否有效\n' +
+        '      validation-query: SELECT 1\n' +
+        '      # 配置监控统计\n' +
+        '      web-stat-filter:\n' +
+        '        enabled: true\n' +
+        '        url-pattern: /*\n' +
+        '        # 开启session统计功能\n' +
+        '        session-stat-enable: true\n' +
+        '        exclusions: "*.js,*.gif,*.jpg,*.png,*.css,*.ico,/druid/*"\n' +
+        '        # 缺省sessionStatMaxCount是1000个\n' +
+        '        session-stat-max-count: 1000\n' +
+        '      stat-view-servlet:\n' +
+        '        enabled: true\n' +
+        '        url-pattern: /druid/*\n' +
+        '        reset-enable: false\n' +
+        '      filter:\n' +
+        '        stat:\n' +
+        '          enabled: true\n' +
+        '          # 记录慢SQL\n' +
+        '          log-slow-sql: true\n' +
+        '          slow-sql-millis: 2000\n' +
+        '          merge-sql: true\n' +
+        '        wall:\n' +
+        '          config:\n' +
+        '            multi-statement-allow: true\n' +
+        '      aop-patterns: "cn.odboy.mapper.*,cn.odboy.service.*,cn.odboy.*.mapper.*,cn.odboy.*.service.*"\n' +
+        '  redis:\n' +
+        '    database: ${REDIS_DB:1}\n' +
+        '    host: ${REDIS_HOST:192.168.100.128}\n' +
+        '    port: ${REDIS_PORT:26379}\n' +
+        '    password: ${REDIS_PWD:lm,101208..,.}\n' +
+        '    # 连接超时时间\n' +
+        '    timeout: 5000\n' +
+        '    # 连接池配置\n' +
+        '    lettuce:\n' +
+        '      pool:\n' +
+        '        # 连接池最大连接数\n' +
+        '        max-active: 30\n' +
+        '        # 连接池最大阻塞等待时间（毫秒），负值表示没有限制\n' +
+        '        max-wait: -1\n' +
+        '        # 连接池中的最大空闲连接数\n' +
+        '        max-idle: 20\n' +
+        '        # 连接池中的最小空闲连接数\n' +
+        '        min-idle: 1\n' +
+        'mybatis-plus:\n' +
+        '  configuration:\n' +
+        '    # 开启 Mybatis 二级缓存，默认为 true\n' +
+        '    cache-enabled: false\n' +
+        '    # 设置本地缓存作用域, Mybatis 一级缓存, 默认为 SESSION\n' +
+        '    # 同一个 session 相同查询语句不会再次查询数据库\n' +
+        '    # 微服务中, 建议设置为STATEMENT, 即关闭一级缓存\n' +
+        '    local-cache-scope: STATEMENT\n' +
+        '    # 是否开启自动驼峰命名规则（camel case）映射, 即从经典数据库列名 A_COLUMN（下划线命名） 到经典 Java 属性名 aColumn（驼峰命名） 的类似映射\n' +
+        '    map-underscore-to-camel-case: true\n' +
+        '    # Sql日志\n' +
+        '    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl\n' +
+        '  # 启动时是否检查 MyBatis XML 文件的存在, 默认不检查\n' +
+        '  check-config-location: true\n' +
+        '  # MyBatis Mapper 所对应的 XML 文件位置\n' +
+        '  # Maven 多模块项目的扫描路径需以 classpath*: 开头 （即加载多个 jar 包下的 XML 文件）\n' +
+        '  mapper-locations: classpath*:/mapper/**/*.xml\n' +
+        '  # MyBatis-Plus 全局策略中的 DB 策略配置\n' +
+        '  global-config:\n' +
+        '    db-config:\n' +
+        '      # 逻辑已删除值(逻辑删除下有效)\n' +
+        '      logic-delete-value: 0\n' +
+        '      # 逻辑未删除值(逻辑删除下有效)\n' +
+        '      logic-not-delete-value: 1\n' +
+        '      # 全局默认主键类型, 这里为自增主键\n' +
+        '      id-type: auto\n' +
+        '      # 表名是否使用驼峰转下划线命名,只对表名生效\n' +
+        '      table-underline: true\n' +
+        '    # 是否控制台 print mybatisplus-plus 的 LOGO\n' +
+        '    banner: true\n' +
+        'app:\n' +
+        '  # 密码加密传输，前端公钥加密，后端私钥解密\n' +
+        '  rsa:\n' +
+        '    private-key: MIIBUwIBADANBgkqhkiG9w0BAQEFAASCAT0wggE5AgEAAkEA0vfvyTdGJkdbHkB8mp0f3FE0GYP3AYPaJF7jUd1M0XxFSE2ceK3k2kw20YvQ09NJKk+OMjWQl9WitG9pB6tSCQIDAQABAkA2SimBrWC2/wvauBuYqjCFwLvYiRYqZKThUS3MZlebXJiLB+Ue/gUifAAKIg1avttUZsHBHrop4qfJCwAI0+YRAiEA+W3NK/RaXtnRqmoUUkb59zsZUBLpvZgQPfj1MhyHDz0CIQDYhsAhPJ3mgS64NbUZmGWuuNKp5coY2GIj/zYDMJp6vQIgUueLFXv/eZ1ekgz2Oi67MNCk5jeTF2BurZqNLR3MSmUCIFT3Q6uHMtsB9Eha4u7hS31tj1UWE+D+ADzp59MGnoftAiBeHT7gDMuqeJHPL4b+kC+gzV4FGTfhR9q3tTbklZkD2A==\n' +
+        '  # 鉴权\n' +
+        '  jwt:\n' +
+        '    # 必须使用最少88位的Base64对该令牌进行编码\n' +
+        '    base64-secret: ZmQ0ZGI5NjQ0MDQwY2I4MjMxY2Y3ZmI3MjdhN2ZmMjNhODViOTg1ZGE0NTBjMGM4NDA5NzYxMjdjOWMwYWRmZTBlZjlhNGY3ZTg4Y2U3YTE1ODVkZDU5Y2Y3OGYwZWE1NzUzNWQ2YjFjZDc0NGMxZWU2MmQ3MjY1NzJmNTE0MzI=\n' +
+        '    # 令牌过期时间 此处单位/毫秒 ，默认4小时，可在此网站生成 https://www.convertworld.com/zh-hans/time/milliseconds.html\n' +
+        '    token-validity-in-seconds: 14400000\n' +
+        '    # token 续期检查时间范围（默认30分钟，单位毫秒），在token即将过期的一段时间内用户操作了，则给用户的token续期\n' +
+        '    detect: 1800000\n' +
+        '    # 续期时间范围，默认1小时，单位毫秒\n' +
+        '    renew: 3600000\n' +
+        '  # 登录\n' +
+        '  login:\n' +
+        '    # 是否限制单用户登录\n' +
+        '    single: false\n' +
+        '    # 验证码\n' +
+        '    captchaSetting:\n' +
+        '      # 验证码类型配置 查看 LoginProperties 类\n' +
+        '      code-type: arithmetic\n' +
+        '      # 登录图形验证码有效时间/分钟\n' +
+        '      expiration: 2\n' +
+        '      # 验证码高度\n' +
+        '      width: 111\n' +
+        '      # 验证码宽度\n' +
+        '      height: 36\n' +
+        '      # 内容长度\n' +
+        '      length: 2\n' +
+        '      # 字体名称，为空则使用默认字体\n' +
+        '      font-name:\n' +
+        '      # 字体大小\n' +
+        '      font-size: 25\n' +
+        '  # 是否开启 swagger-ui\n' +
+        '  swagger:\n' +
+        '    enabled: true\n' +
+        '  # 针对@Async\n' +
+        '  async-task-pool:\n' +
+        '    # 核心线程池大小\n' +
+        '    core-pool-size: 10\n' +
+        '    # 最大线程数\n' +
+        '    max-pool-size: 30\n' +
+        '    # 活跃时间\n' +
+        '    keep-alive-seconds: 60\n' +
+        '    # 队列容量\n' +
+        '    queue-capacity: 50\n' +
+        '  pipeline-task-pool:\n' +
+        '    # 核心线程池大小\n' +
+        '    core-pool-size: 10\n' +
+        '    # 最大线程数\n' +
+        '    max-pool-size: 200\n' +
+        '    # 活跃时间\n' +
+        '    keep-alive-seconds: 60\n' +
+        '    # 队列容量\n' +
+        '    queue-capacity: 300\n' +
+        '  # oss\n' +
+        '  oss:\n' +
+        '    max-size: 100\n' +
+        '    minio:\n' +
+        '      endpoint: http://192.168.100.128:9000\n' +
+        '      bucketName: cutejava\n' +
+        '      accessKey: 8o5oVzqvKby5TzaGcfmx\n' +
+        '      secretKey: 8BiK5UbmvXGJNVQ98CGiohHzT1N1FMRZqHRdJllj\n' +
+        '  captcha:\n' +
+        '    expireTime: 300\n' +
+        '## 启用debug\n' +
+        '#debug: true\n' +
+        '#logging:\n' +
+        '#  level:\n' +
+        '#    root: debug'
+    }
+  },
+  methods: {
+    onChange(value) {
+      console.error('onChange', value)
+    }
+  }
+}
+</script>
+
diff --git a/doc/cutejava.sql b/doc/cutejava.sql
index fd078534..5d0aa818 100644
--- a/doc/cutejava.sql
+++ b/doc/cutejava.sql
@@ -11,7 +11,7 @@
  Target Server Version : 80025 (8.0.25)
  File Encoding         : 65001
 
- Date: 17/07/2025 22:54:08
+ Date: 17/07/2025 23:06:56
 */
 
 SET NAMES utf8mb4;
@@ -683,7 +683,7 @@ INSERT INTO `system_menu` VALUES (23, 21, 0, 1, '二级菜单2', NULL, 'nested/m
 INSERT INTO `system_menu` VALUES (24, 22, 0, 1, '三级菜单1', 'Test', 'nested/menu1/menu1-1', 999, 'menu', 'menu1-1', b'0', b'0', b'0', NULL, 'admin', 'admin', '2025-07-16 21:12:41', '2025-07-17 20:48:58');
 INSERT INTO `system_menu` VALUES (27, 22, 0, 1, '三级菜单2', NULL, 'nested/menu1/menu1-2', 999, 'menu', 'menu1-2', b'0', b'0', b'0', NULL, 'admin', 'admin', '2025-07-16 21:12:41', '2025-07-17 20:48:58');
 INSERT INTO `system_menu` VALUES (28, 1, 3, 1, '任务调度', 'QuartzJob', 'system/quartzJob/index', 9, 'timing', 'quartz-job', b'0', b'0', b'0', 'quartzJob:list', 'admin', 'admin', '2025-07-16 21:12:41', '2025-07-17 20:48:58');
-INSERT INTO `system_menu` VALUES (34, 10, 0, 1, '演示:Yaml编辑器', 'CuteYamlEditorDemo', 'demo/CuteYamlEditorDemo', 999, 'menu', 'cuteYamlEditorDemo', b'0', b'0', b'0', NULL, 'admin', 'admin', '2025-07-16 21:12:41', '2025-07-17 20:48:58');
+INSERT INTO `system_menu` VALUES (34, 10, 0, 1, '演示:Yaml编辑器', 'CuteYamlEditorDemo', 'componentsDemo/CuteYamlEditorDemo', 999, 'menu', 'cuteYamlEditorDemo', b'0', b'0', b'0', NULL, 'admin', 'admin', '2025-07-16 21:12:41', '2025-07-17 20:48:58');
 INSERT INTO `system_menu` VALUES (35, 1, 3, 1, '部门管理', 'Dept', 'system/dept/index', 6, 'dept', 'dept', b'0', b'0', b'0', 'dept:list', 'admin', 'admin', '2025-07-16 21:12:41', '2025-07-17 20:48:58');
 INSERT INTO `system_menu` VALUES (36, 1, 2, 0, '系统工具', NULL, '', 10, 'sys-tools', 'sys-tools', b'0', b'0', b'0', NULL, 'admin', 'admin', '2025-07-16 21:12:41', '2025-07-17 20:48:58');
 INSERT INTO `system_menu` VALUES (37, 1, 3, 1, '岗位管理', 'Job', 'system/job/index', 7, 'Steve-Jobs', 'job', b'0', b'0', b'0', 'job:list', 'admin', 'admin', '2025-07-16 21:12:41', '2025-07-17 20:48:58');
@@ -715,17 +715,17 @@ INSERT INTO `system_menu` VALUES (78, 18, 0, 2, '文件编辑', NULL, '', 3, '',
 INSERT INTO `system_menu` VALUES (79, 18, 0, 2, '文件删除', NULL, '', 4, '', '', b'0', b'0', b'0', 'storage:del', 'admin', 'admin', '2025-07-16 21:12:41', '2025-07-17 20:48:58');
 INSERT INTO `system_menu` VALUES (80, 6, 0, 1, '服务监控', 'ServerMonitor', 'system/server/index', 14, 'codeConsole', 'server', b'0', b'0', b'0', 'monitor:list', 'admin', 'admin', '2025-07-16 21:12:41', '2025-07-17 20:48:58');
 INSERT INTO `system_menu` VALUES (83, 10, 0, 1, '图表库', 'Echarts', 'components/base/Echarts', 50, 'chart', 'echarts', b'0', b'1', b'0', '', 'admin', 'admin', '2025-07-16 21:12:41', '2025-07-17 20:48:58');
-INSERT INTO `system_menu` VALUES (117, 10, 0, 1, '演示:一键复制组件', 'CuteOneKeyCopy', 'demo/CuteOneKeyCopyDemo', 999, 'menu', 'cuteOneKeyCopyDemo', b'0', b'0', b'0', NULL, 'admin', 'admin', '2025-07-16 21:12:41', '2025-07-17 20:48:58');
-INSERT INTO `system_menu` VALUES (118, 10, 0, 1, '演示:Java代码编辑器', 'CuteJavaEditorDemo', 'demo/CuteJavaEditorDemo', 999, 'menu', 'cuteJavaEditorDemo', b'0', b'0', b'0', NULL, 'admin', 'admin', '2025-07-16 21:12:41', '2025-07-17 20:48:58');
+INSERT INTO `system_menu` VALUES (117, 10, 0, 1, '演示:一键复制组件', 'CuteOneKeyCopy', 'componentsDemo/CuteOneKeyCopyDemo', 999, 'menu', 'cuteOneKeyCopyDemo', b'0', b'0', b'0', NULL, 'admin', 'admin', '2025-07-16 21:12:41', '2025-07-17 20:48:58');
+INSERT INTO `system_menu` VALUES (118, 10, 0, 1, '演示:Java代码编辑器', 'CuteJavaEditorDemo', 'componentsDemo/CuteJavaEditorDemo', 999, 'menu', 'cuteJavaEditorDemo', b'0', b'0', b'0', NULL, 'admin', 'admin', '2025-07-16 21:12:41', '2025-07-17 20:48:58');
 INSERT INTO `system_menu` VALUES (119, 10, 0, 1, '数字滚动', 'countToDemo', 'components/base/CountToDemo', 56, 'menu', 'countToDemo', b'0', b'0', b'0', NULL, 'admin', 'admin', '2025-07-16 21:12:41', '2025-07-17 20:48:58');
 INSERT INTO `system_menu` VALUES (121, 10, 0, 1, '分割面板', 'splitPaneDemo', 'components/base/SplitPaneDemo', 57, 'menu', 'splitPaneDemo', b'0', b'0', b'0', NULL, 'admin', 'admin', '2025-07-16 21:12:41', '2025-07-17 20:48:58');
 INSERT INTO `system_menu` VALUES (122, 10, 0, 1, 'WebSocket', 'webSocketDemo', 'components/base/WebSocketDemo', 58, 'menu', 'webSocketDemo', b'0', b'0', b'0', NULL, 'admin', 'admin', '2025-07-16 21:12:41', '2025-07-17 20:48:58');
-INSERT INTO `system_menu` VALUES (125, 10, 0, 1, '演示:业务组件', 'CuteBusinessDemo', 'demo/CuteBusinessDemo', 999, 'menu', 'cuteBusinessDemo', b'0', b'0', b'0', NULL, 'admin', 'admin', '2025-07-16 21:12:41', '2025-07-17 20:48:58');
-INSERT INTO `system_menu` VALUES (126, 10, 2, 1, '演示:简单表格组件', 'CuteSimpleTableDemo', 'demo/CuteSimpleTableDemo', 999, 'menu', 'cuteSimpleTableDemo', b'0', b'0', b'0', NULL, 'admin', 'admin', '2025-07-16 21:12:41', '2025-07-17 20:48:58');
-INSERT INTO `system_menu` VALUES (127, 10, 2, 1, '演示:拖拽表格组件', 'CuteDragTableDemo', 'demo/CuteDragTableDemo', 999, 'menu', 'cuteDragTableDemo', b'0', b'0', b'0', NULL, 'admin', 'admin', '2025-07-16 21:12:41', '2025-07-17 20:48:58');
-INSERT INTO `system_menu` VALUES (128, 10, 0, 1, '演示:Markdown编辑器', 'CuteMarkdownDemo', 'demo/CuteMarkdownDemo', 999, 'menu', 'cuteMarkdownDemo', b'0', b'0', b'0', NULL, 'admin', 'admin', '2025-07-17 10:53:29', '2025-07-17 20:48:58');
-INSERT INTO `system_menu` VALUES (129, 10, 0, 1, '演示:富文本编辑器', 'CuteRichTextEditorDemo', 'demo/CuteRichTextEditorDemo', 999, 'menu', 'cuteRichTextEditorDemo', b'0', b'0', b'0', NULL, 'admin', 'admin', '2025-07-17 13:22:21', '2025-07-17 20:48:58');
-INSERT INTO `system_menu` VALUES (130, 10, 0, 1, '演示:文件上传', 'CuteFileUploadDemo', 'demo/CuteFileUploadDemo', 999, 'menu', 'cuteFileUploadDemo', b'0', b'0', b'0', NULL, 'admin', 'admin', '2025-07-17 21:51:35', '2025-07-17 21:58:07');
+INSERT INTO `system_menu` VALUES (125, 10, 0, 1, '演示:业务组件', 'CuteBusinessDemo', 'componentsDemo/CuteBusinessDemo', 999, 'menu', 'cuteBusinessDemo', b'0', b'0', b'0', NULL, 'admin', 'admin', '2025-07-16 21:12:41', '2025-07-17 20:48:58');
+INSERT INTO `system_menu` VALUES (126, 10, 2, 1, '演示:简单表格组件', 'CuteSimpleTableDemo', 'componentsDemo/CuteSimpleTableDemo', 999, 'menu', 'cuteSimpleTableDemo', b'0', b'0', b'0', NULL, 'admin', 'admin', '2025-07-16 21:12:41', '2025-07-17 20:48:58');
+INSERT INTO `system_menu` VALUES (127, 10, 2, 1, '演示:拖拽表格组件', 'CuteDragTableDemo', 'componentsDemo/CuteDragTableDemo', 999, 'menu', 'cuteDragTableDemo', b'0', b'0', b'0', NULL, 'admin', 'admin', '2025-07-16 21:12:41', '2025-07-17 20:48:58');
+INSERT INTO `system_menu` VALUES (128, 10, 0, 1, '演示:Markdown编辑器', 'CuteMarkdownDemo', 'componentsDemo/CuteMarkdownDemo', 999, 'menu', 'cuteMarkdownDemo', b'0', b'0', b'0', NULL, 'admin', 'admin', '2025-07-17 10:53:29', '2025-07-17 20:48:58');
+INSERT INTO `system_menu` VALUES (129, 10, 0, 1, '演示:富文本编辑器', 'CuteRichTextEditorDemo', 'componentsDemo/CuteRichTextEditorDemo', 999, 'menu', 'cuteRichTextEditorDemo', b'0', b'0', b'0', NULL, 'admin', 'admin', '2025-07-17 13:22:21', '2025-07-17 20:48:58');
+INSERT INTO `system_menu` VALUES (130, 10, 0, 1, '演示:文件上传', 'CuteFileUploadDemo', 'componentsDemo/CuteFileUploadDemo', 999, 'menu', 'cuteFileUploadDemo', b'0', b'0', b'0', NULL, 'admin', 'admin', '2025-07-17 21:51:35', '2025-07-17 21:58:07');
 
 -- ----------------------------
 -- Table structure for system_oss_storage