From 886f2dfcb088dfff45d54d2b631cfdc30e74224d Mon Sep 17 00:00:00 2001
From: Odboy <tianjun@odboy.cn>
Date: Tue, 3 Feb 2026 21:13:55 +0800
Subject: [PATCH] =?UTF-8?q?docs(component):=20=E6=9B=B4=E6=96=B0=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E6=96=87=E6=A1=A3=E5=92=8C=E6=BC=94=E7=A4=BA=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加 readme.js 文件说明弃用组件存放位置
- 在 CuteRichTextEditor 组件中增加 el-form 重置联动注释
- 创建 CuteCodeEditorDemo 组件演示页面，包含 Java 和 Yaml 编辑器示例
- 创建 CuteRichTextEditorDemo 组件演示页面，展示富文本编辑器功能
- 移除旧的 CuteJavaEditorDemo、CuteRichTextEditorDemo 和 CuteYamlEditorDemo 演示页面
- 在组件演示主页中新增代码编辑器和富文本编辑器的演示入口
- 添加横向滚动和纵向滚动区域的演示入口（但内容使用了错误的组件）
---
 .../{dev => deprecate}/CuteJavaEditor.vue     | 186 ++++++++---------
 .../{dev => deprecate}/CuteYamlEditor.vue     | 188 +++++++++---------
 .../src/views/components/deprecate/readme.js  |   1 +
 .../components/dev/CuteRichTextEditor.vue     |   3 +
 .../componentsDemo/CuteJavaEditorDemo.vue     |  47 -----
 .../componentsDemo/CuteRichTextEditorDemo.vue |  21 --
 .../componentsDemo/CuteYamlEditorDemo.vue     | 168 ----------------
 .../componentsDemo/dev/CuteCodeEditorDemo.vue | 105 ++++++++++
 .../dev/CuteRichTextEditorDemo.vue            |  71 +++++++
 .../src/views/componentsDemo/index.vue        |  16 ++
 10 files changed, 383 insertions(+), 423 deletions(-)
 rename cutejava-front/src/views/components/{dev => deprecate}/CuteJavaEditor.vue (95%)
 rename cutejava-front/src/views/components/{dev => deprecate}/CuteYamlEditor.vue (95%)
 create mode 100644 cutejava-front/src/views/components/deprecate/readme.js
 delete mode 100644 cutejava-front/src/views/componentsDemo/CuteJavaEditorDemo.vue
 delete mode 100644 cutejava-front/src/views/componentsDemo/CuteRichTextEditorDemo.vue
 delete mode 100644 cutejava-front/src/views/componentsDemo/CuteYamlEditorDemo.vue
 create mode 100644 cutejava-front/src/views/componentsDemo/dev/CuteCodeEditorDemo.vue
 create mode 100644 cutejava-front/src/views/componentsDemo/dev/CuteRichTextEditorDemo.vue

diff --git a/cutejava-front/src/views/components/dev/CuteJavaEditor.vue b/cutejava-front/src/views/components/deprecate/CuteJavaEditor.vue
similarity index 95%
rename from cutejava-front/src/views/components/dev/CuteJavaEditor.vue
rename to cutejava-front/src/views/components/deprecate/CuteJavaEditor.vue
index 11469e90..bf785206 100644
--- a/cutejava-front/src/views/components/dev/CuteJavaEditor.vue
+++ b/cutejava-front/src/views/components/deprecate/CuteJavaEditor.vue
@@ -1,93 +1,93 @@
-<!--
- * Java代码编辑器
- * @author odboy
- * @email tianjun@odboy.cn
- * @created 2025-08-01
- -->
-<template>
-  <textarea ref="textarea" />
-</template>
-
-<script>
-import CodeMirror from 'codemirror'
-import 'codemirror/lib/codemirror.css'
-// 替换主题这里需修改名称
-// 主题预览地址 https://blog.csdn.net/qq_41694291/article/details/106429772
-import 'codemirror/theme/darcula.css'
-import 'codemirror/mode/javascript/javascript'
-
-export default {
-  name: 'CuteJavaEditor',
-  props: {
-    content: {
-      type: String,
-      required: true,
-      default: ''
-    },
-    height: {
-      type: String,
-      required: false,
-      default: '500px'
-    },
-    readOnly: {
-      type: Boolean,
-      required: false,
-      default: false
-    }
-  },
-  data() {
-    return {
-      editor: false
-    }
-  },
-  watch: {
-    content(newVal, oldVal) {
-      const editorValue = this.editor.getValue()
-      if (newVal !== editorValue) {
-        this.editor.setValue(newVal)
-      }
-    },
-    height(newVal, oldVal) {
-      this.editor.setSize('auto', newVal)
-    }
-  },
-  mounted() {
-    this.editor = CodeMirror.fromTextArea(this.$refs.textarea, {
-      mode: 'javascript',
-      autoRefresh: true,
-      lineNumbers: true,
-      lint: true,
-      lineWrapping: true,
-      tabSize: 2,
-      cursorHeight: 1,
-      // 替换主题这里需修改名称
-      theme: 'darcula'
-    })
-    this.editor.setSize('auto', this.height)
-    if (this.content) {
-      this.editor.setValue(this.content)
-    }
-    this.editor.setOption('readOnly', this.readOnly)
-    this.editor.on('change', cm => {
-      this.$emit('change', cm.getValue())
-    })
-  },
-  methods: {
-    getValue() {
-      if (this.editor == null) {
-        return ''
-      }
-      return this.editor.getValue()
-    },
-    setValue(val) {
-      if (this.editor == null) {
-        return
-      }
-      this.editor.setValue(val)
-    },
-    resetField() {
-      this.editor.setValue('')
-    }
-  }
-}
-</script>
+<!--
+ * Java代码编辑器
+ * @author odboy
+ * @email tianjun@odboy.cn
+ * @created 2025-08-01
+ -->
+<template>
+  <textarea ref="textarea" />
+</template>
+
+<script>
+import CodeMirror from 'codemirror'
+import 'codemirror/lib/codemirror.css'
+// 替换主题这里需修改名称
+// 主题预览地址 https://blog.csdn.net/qq_41694291/article/details/106429772
+import 'codemirror/theme/darcula.css'
+import 'codemirror/mode/javascript/javascript'
+
+export default {
+  name: 'CuteJavaEditor',
+  props: {
+    content: {
+      type: String,
+      required: true,
+      default: ''
+    },
+    height: {
+      type: String,
+      required: false,
+      default: '500px'
+    },
+    readOnly: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  data() {
+    return {
+      editor: false
+    }
+  },
+  watch: {
+    content(newVal, oldVal) {
+      const editorValue = this.editor.getValue()
+      if (newVal !== editorValue) {
+        this.editor.setValue(newVal)
+      }
+    },
+    height(newVal, oldVal) {
+      this.editor.setSize('auto', newVal)
+    }
+  },
+  mounted() {
+    this.editor = CodeMirror.fromTextArea(this.$refs.textarea, {
+      mode: 'javascript',
+      autoRefresh: true,
+      lineNumbers: true,
+      lint: true,
+      lineWrapping: true,
+      tabSize: 2,
+      cursorHeight: 1,
+      // 替换主题这里需修改名称
+      theme: 'darcula'
+    })
+    this.editor.setSize('auto', this.height)
+    if (this.content) {
+      this.editor.setValue(this.content)
+    }
+    this.editor.setOption('readOnly', this.readOnly)
+    this.editor.on('change', cm => {
+      this.$emit('change', cm.getValue())
+    })
+  },
+  methods: {
+    getValue() {
+      if (this.editor == null) {
+        return ''
+      }
+      return this.editor.getValue()
+    },
+    setValue(val) {
+      if (this.editor == null) {
+        return
+      }
+      this.editor.setValue(val)
+    },
+    resetField() {
+      this.editor.setValue('')
+    }
+  }
+}
+</script>
diff --git a/cutejava-front/src/views/components/dev/CuteYamlEditor.vue b/cutejava-front/src/views/components/deprecate/CuteYamlEditor.vue
similarity index 95%
rename from cutejava-front/src/views/components/dev/CuteYamlEditor.vue
rename to cutejava-front/src/views/components/deprecate/CuteYamlEditor.vue
index f1c43adc..69fd8d55 100644
--- a/cutejava-front/src/views/components/dev/CuteYamlEditor.vue
+++ b/cutejava-front/src/views/components/deprecate/CuteYamlEditor.vue
@@ -1,94 +1,94 @@
-<!--
- * YAML编辑器
- * @author odboy
- * @email tianjun@odboy.cn
- * @created 2025-08-01
- -->
-<template>
-  <textarea ref="textarea" />
-</template>
-
-<script>
-import CodeMirror from 'codemirror'
-import 'codemirror/lib/codemirror.css'
-// 替换主题这里需修改名称
-// 主题预览地址 https://blog.csdn.net/qq_41694291/article/details/106429772
-import 'codemirror/theme/darcula.css'
-import 'codemirror/mode/yaml/yaml'
-
-export default {
-  name: 'CuteYamlEditor',
-  props: {
-    content: {
-      type: String,
-      required: true,
-      default: ''
-    },
-    height: {
-      type: String,
-      required: false,
-      default: '500px'
-    },
-    readOnly: {
-      type: Boolean,
-      required: false,
-      default: false
-    }
-  },
-  data() {
-    return {
-      editor: false
-    }
-  },
-  watch: {
-    content(newVal, oldVal) {
-      const editorValue = this.editor.getValue()
-      if (newVal !== editorValue) {
-        this.editor.setValue(newVal)
-      }
-    },
-    height(newVal, oldVal) {
-      this.editor.setSize('auto', newVal)
-    }
-  },
-  mounted() {
-    this.editor = CodeMirror.fromTextArea(this.$refs.textarea, {
-      mode: 'text/x-yaml',
-      autoRefresh: true,
-      lineNumbers: true,
-      lint: true,
-      lineWrapping: true,
-      tabSize: 2,
-      cursorHeight: 1,
-      // 替换主题这里需修改名称
-      theme: 'darcula'
-    })
-    this.editor.setSize('auto', this.height)
-    if (this.content) {
-      this.editor.setValue(this.content)
-    }
-    this.editor.setOption('readOnly', this.readOnly)
-    this.editor.on('change', cm => {
-      this.$emit('change', cm.getValue())
-      this.$emit('input', cm.getValue())
-    })
-  },
-  methods: {
-    getValue() {
-      if (this.editor == null) {
-        return ''
-      }
-      return this.editor.getValue()
-    },
-    setValue(val) {
-      if (this.editor == null) {
-        return
-      }
-      this.editor.setValue(val)
-    },
-    resetField() {
-      this.editor.setValue('')
-    }
-  }
-}
-</script>
+<!--
+ * YAML编辑器
+ * @author odboy
+ * @email tianjun@odboy.cn
+ * @created 2025-08-01
+ -->
+<template>
+  <textarea ref="textarea" />
+</template>
+
+<script>
+import CodeMirror from 'codemirror'
+import 'codemirror/lib/codemirror.css'
+// 替换主题这里需修改名称
+// 主题预览地址 https://blog.csdn.net/qq_41694291/article/details/106429772
+import 'codemirror/theme/darcula.css'
+import 'codemirror/mode/yaml/yaml'
+
+export default {
+  name: 'CuteYamlEditor',
+  props: {
+    content: {
+      type: String,
+      required: true,
+      default: ''
+    },
+    height: {
+      type: String,
+      required: false,
+      default: '500px'
+    },
+    readOnly: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  data() {
+    return {
+      editor: false
+    }
+  },
+  watch: {
+    content(newVal, oldVal) {
+      const editorValue = this.editor.getValue()
+      if (newVal !== editorValue) {
+        this.editor.setValue(newVal)
+      }
+    },
+    height(newVal, oldVal) {
+      this.editor.setSize('auto', newVal)
+    }
+  },
+  mounted() {
+    this.editor = CodeMirror.fromTextArea(this.$refs.textarea, {
+      mode: 'text/x-yaml',
+      autoRefresh: true,
+      lineNumbers: true,
+      lint: true,
+      lineWrapping: true,
+      tabSize: 2,
+      cursorHeight: 1,
+      // 替换主题这里需修改名称
+      theme: 'darcula'
+    })
+    this.editor.setSize('auto', this.height)
+    if (this.content) {
+      this.editor.setValue(this.content)
+    }
+    this.editor.setOption('readOnly', this.readOnly)
+    this.editor.on('change', cm => {
+      this.$emit('change', cm.getValue())
+      this.$emit('input', cm.getValue())
+    })
+  },
+  methods: {
+    getValue() {
+      if (this.editor == null) {
+        return ''
+      }
+      return this.editor.getValue()
+    },
+    setValue(val) {
+      if (this.editor == null) {
+        return
+      }
+      this.editor.setValue(val)
+    },
+    resetField() {
+      this.editor.setValue('')
+    }
+  }
+}
+</script>
diff --git a/cutejava-front/src/views/components/deprecate/readme.js b/cutejava-front/src/views/components/deprecate/readme.js
new file mode 100644
index 00000000..014b3dee
--- /dev/null
+++ b/cutejava-front/src/views/components/deprecate/readme.js
@@ -0,0 +1 @@
+// 这个文件夹放置着即将弃用的组件，请勿使用
diff --git a/cutejava-front/src/views/components/dev/CuteRichTextEditor.vue b/cutejava-front/src/views/components/dev/CuteRichTextEditor.vue
index 84b1d5a1..c1d4e930 100644
--- a/cutejava-front/src/views/components/dev/CuteRichTextEditor.vue
+++ b/cutejava-front/src/views/components/dev/CuteRichTextEditor.vue
@@ -294,6 +294,9 @@ export default {
       }
       this.editor.insertText(text)
     },
+    /**
+     * el-form重置联动
+     */
     resetField() {
       this.setHtml('')
     }
diff --git a/cutejava-front/src/views/componentsDemo/CuteJavaEditorDemo.vue b/cutejava-front/src/views/componentsDemo/CuteJavaEditorDemo.vue
deleted file mode 100644
index 9887f6bc..00000000
--- a/cutejava-front/src/views/componentsDemo/CuteJavaEditorDemo.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<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.log('onChange', value)
-    }
-  }
-}
-</script>
-
diff --git a/cutejava-front/src/views/componentsDemo/CuteRichTextEditorDemo.vue b/cutejava-front/src/views/componentsDemo/CuteRichTextEditorDemo.vue
deleted file mode 100644
index 13ce75af..00000000
--- a/cutejava-front/src/views/componentsDemo/CuteRichTextEditorDemo.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<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 },
-  methods: {
-    onChange(html, text) {
-      console.log('onChange:html', html)
-      console.log('onChange:text', text)
-    }
-  }
-}
-</script>
-
diff --git a/cutejava-front/src/views/componentsDemo/CuteYamlEditorDemo.vue b/cutejava-front/src/views/componentsDemo/CuteYamlEditorDemo.vue
deleted file mode 100644
index 95715647..00000000
--- a/cutejava-front/src/views/componentsDemo/CuteYamlEditorDemo.vue
+++ /dev/null
@@ -1,168 +0,0 @@
-<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' +
-        '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' +
-        '  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: xxxxxx\n' +
-        '      secretKey: xxxxxx\n' +
-        '  captcha:\n' +
-        '    expireTime: 300\n' +
-        '## 启用debug\n' +
-        '#debug: true\n' +
-        '#logging:\n' +
-        '#  level:\n' +
-        '#    root: debug'
-    }
-  },
-  methods: {
-    onChange(value) {
-      console.log('onChange', value)
-    }
-  }
-}
-</script>
-
diff --git a/cutejava-front/src/views/componentsDemo/dev/CuteCodeEditorDemo.vue b/cutejava-front/src/views/componentsDemo/dev/CuteCodeEditorDemo.vue
new file mode 100644
index 00000000..78c82da9
--- /dev/null
+++ b/cutejava-front/src/views/componentsDemo/dev/CuteCodeEditorDemo.vue
@@ -0,0 +1,105 @@
+<template>
+  <div>
+    <h4>何时使用</h4>
+    <ul class="description">
+      <li>需求输入各种代码数据</li>
+      <li>在使用过程中有任何问题，咨询 @Odboy（前端）@Odboy（设计）</li>
+    </ul>
+    <h4>Java编辑器</h4>
+    <cute-code-editor :content="javaContent" mode="java" @change="onJavaChange" />
+    <h4>Yaml编辑器</h4>
+    <cute-code-editor :content="yamlContent" mode="yaml" @change="onYamlChange" />
+    <h4>API</h4>
+    <el-table :data="apiData">
+      <el-table-column prop="name" label="参数" />
+      <el-table-column prop="remark" label="说明" />
+      <el-table-column prop="type" label="类型" />
+      <el-table-column prop="defaultValue" label="默认值" />
+      <el-table-column prop="required" label="是否必填" />
+    </el-table>
+  </div>
+</template>
+<script>
+import CuteCodeEditor from '@/views/components/dev/CuteCodeEditor.vue'
+
+export default {
+  name: 'CuteRichTextEditorDemo',
+  components: { CuteCodeEditor },
+  data() {
+    return {
+      javaContent: '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',
+      yamlContent: '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',
+      apiData: [
+        { name: 'content', remark: '内容', type: 'string', defaultValue: '-', required: '是' },
+        { name: 'height', remark: '编辑框高度', type: 'string', defaultValue: '500px', required: '否' },
+        { name: 'read-only', 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: '否' },
+        { name: 'change', remark: '内容变化回调', type: '(value) => {}', defaultValue: '-', required: '否' }
+      ]
+    }
+  },
+  methods: {
+    onJavaChange(value) {
+      console.log('onJavaChange', value)
+    },
+    onYamlChange(value) {
+      console.log('onYamlChange', value)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+ul {
+  padding-left: 20px;
+}
+.description > li{
+  font-size: 12px;
+}
+</style>
diff --git a/cutejava-front/src/views/componentsDemo/dev/CuteRichTextEditorDemo.vue b/cutejava-front/src/views/componentsDemo/dev/CuteRichTextEditorDemo.vue
new file mode 100644
index 00000000..314b97e7
--- /dev/null
+++ b/cutejava-front/src/views/componentsDemo/dev/CuteRichTextEditorDemo.vue
@@ -0,0 +1,71 @@
+<template>
+  <div>
+    <h4>何时使用</h4>
+    <ul class="description">
+      <li>需求输入内容丰富的文本数据</li>
+      <li>在使用过程中有任何问题，咨询 @Odboy（前端）@Odboy（设计）@Odboy（后端）</li>
+    </ul>
+    <h4>基础使用</h4>
+    <cute-rich-text-editor @change="onChange" />
+    <h4>API</h4>
+    <el-table :data="apiData">
+      <el-table-column prop="name" label="参数" />
+      <el-table-column prop="remark" label="说明" />
+      <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="函数" />
+      <el-table-column prop="remark" label="说明" />
+      <el-table-column prop="inputArgs" label="入参" />
+    </el-table>
+  </div>
+</template>
+<script>
+import CuteRichTextEditor from '@/views/components/dev/CuteRichTextEditor.vue'
+
+export default {
+  name: 'CuteRichTextEditorDemo',
+  components: { CuteRichTextEditor },
+  data() {
+    return {
+      content: '',
+      apiData: [
+        { name: 'content', remark: '内容', type: 'string', defaultValue: '-', required: '是' },
+        { name: 'read-only', remark: '是否只读', type: 'boolean', defaultValue: 'false', required: '否' },
+        { name: 'change', remark: '内容改变回调事件', type: '(html, text) => {}', defaultValue: '-', required: '否' },
+        { name: 'focus', remark: '编辑器获得焦点回调事件', type: '(editor) => {}', defaultValue: '-', required: '否' },
+        { name: 'blur', remark: '编辑器失去焦点回调事件', type: '(editor) => {}', defaultValue: '-', required: '否' }
+      ],
+      methodData: [
+        { name: 'setHtml', remark: '设置html内容。如果是 editor.getHtml() 获取的 HTML 格式，可以完美解析', inputArgs: 'html' },
+        { name: 'getHtml', remark: '获取html内容', inputArgs: '' },
+        { name: 'clear', remark: '清空', inputArgs: '' },
+        { name: 'undo', remark: '撤销', inputArgs: '' },
+        { name: 'redo', remark: '重做', inputArgs: '' },
+        { name: 'getSelectionText', remark: '获取选中的文本', inputArgs: '' },
+        { name: 'deleteFragment', remark: '删除选中的内容', inputArgs: '' },
+        { name: 'getFragment', remark: '获取选中的内容。JSON格式', inputArgs: '' },
+        { name: 'getText', remark: '获取文本内容', inputArgs: '' },
+        { name: 'insertText', remark: '在选取插入文本', inputArgs: '' }
+      ]
+    }
+  },
+  methods: {
+    onChange(html, text) {
+      console.log('onChange:html', html)
+      console.log('onChange:text', text)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+ul {
+  padding-left: 20px;
+}
+.description > li{
+  font-size: 12px;
+}
+</style>
diff --git a/cutejava-front/src/views/componentsDemo/index.vue b/cutejava-front/src/views/componentsDemo/index.vue
index 61846be8..85aef3d4 100644
--- a/cutejava-front/src/views/componentsDemo/index.vue
+++ b/cutejava-front/src/views/componentsDemo/index.vue
@@ -18,12 +18,24 @@
           <el-collapse-item title="段落标题 CuteSectionTitle" name="CuteSectionTitle">
             <CuteSectionTitleDemo />
           </el-collapse-item>
+          <el-collapse-item title="横向滚动区域 CuteHorizontalScrollBar" name="CuteHorizontalScrollBar">
+            <CuteSectionTitleDemo />
+          </el-collapse-item>
+          <el-collapse-item title="纵向滚动区域 CuteVerticalScrollBar" name="CuteVerticalScrollBar">
+            <CuteSectionTitleDemo />
+          </el-collapse-item>
           <el-collapse-item title="一键复制 CuteOneKeyCopy" name="CuteOneKeyCopy">
             <CuteOneKeyCopyDemo />
           </el-collapse-item>
           <el-collapse-item title="Markdown编辑框 CuteMarkdown" name="CuteMarkdown">
             <CuteMarkdownDemo />
           </el-collapse-item>
+          <el-collapse-item title="代码编辑框 CuteCodeEditor" name="CuteCodeEditor">
+            <CuteCodeEditorDemo />
+          </el-collapse-item>
+          <el-collapse-item title="富文本框 CuteRichTextEditor" name="CuteRichTextEditor">
+            <CuteRichTextEditorDemo />
+          </el-collapse-item>
         </el-collapse>
       </el-tab-pane>
       <el-tab-pane label="快捷组件" name="kit">
@@ -62,10 +74,14 @@ import CuteNoDataDemo from '@/views/componentsDemo/dev/CuteNoDataDemo.vue'
 import CuteSectionTitleDemo from '@/views/componentsDemo/dev/CuteSectionTitleDemo.vue'
 import CuteOneKeyCopyDemo from '@/views/componentsDemo/dev/CuteOneKeyCopyDemo.vue'
 import CuteMarkdownDemo from '@/views/componentsDemo/dev/CuteMarkdownDemo.vue'
+import CuteCodeEditorDemo from '@/views/componentsDemo/dev/CuteCodeEditorDemo.vue'
+import CuteRichTextEditorDemo from '@/views/componentsDemo/dev/CuteRichTextEditorDemo.vue'
 
 export default {
   name: 'SystemComponents',
   components: {
+    CuteRichTextEditorDemo,
+    CuteCodeEditorDemo,
     CuteMarkdownDemo,
     CuteOneKeyCopyDemo,
     CuteSectionTitleDemo,