diff --git a/cutejava-front/src/views/components/dev/CuteCodeEditor.vue b/cutejava-front/src/views/components/dev/CuteCodeEditor.vue
index e21951d5..152aab40 100644
--- a/cutejava-front/src/views/components/dev/CuteCodeEditor.vue
+++ b/cutejava-front/src/views/components/dev/CuteCodeEditor.vue
@@ -45,7 +45,7 @@ export default {
       required: false,
       default: '500px'
     },
-    readOnly: {
+    readonly: {
       type: Boolean,
       required: false,
       default: false
@@ -95,7 +95,7 @@ export default {
       if (this.content) {
         this.editor.setValue(this.content)
       }
-      this.editor.setOption('readOnly', this.readOnly)
+      this.editor.setOption('readOnly', this.readonly)
       this.editor.on('change', cm => {
         this.$emit('change', cm.getValue())
       })
diff --git a/cutejava-front/src/views/components/dev/CuteRichTextEditor.vue b/cutejava-front/src/views/components/dev/CuteRichTextEditor.vue
index c1d4e930..1357bd77 100644
--- a/cutejava-front/src/views/components/dev/CuteRichTextEditor.vue
+++ b/cutejava-front/src/views/components/dev/CuteRichTextEditor.vue
@@ -39,7 +39,7 @@ export default {
   name: 'CuteRichTextEditor',
   components: { Toolbar, Editor },
   props: {
-    readOnly: {
+    readonly: {
       type: Boolean,
       required: false,
       default: false
@@ -56,7 +56,7 @@ export default {
       toolbarConfig: {},
       editorConfig: {
         placeholder: '请输入内容...',
-        readOnly: that.readOnly,
+        readOnly: that.readonly,
         autoFocus: true,
         scroll: false,
         // 会造成卡顿
diff --git a/cutejava-front/src/views/components/dev/CuteTextAreaInput.vue b/cutejava-front/src/views/components/dev/CuteTextAreaInput.vue
index 4778028f..23d6c017 100644
--- a/cutejava-front/src/views/components/dev/CuteTextAreaInput.vue
+++ b/cutejava-front/src/views/components/dev/CuteTextAreaInput.vue
@@ -29,20 +29,28 @@ export default {
   props: {
     disabled: {
       type: Boolean,
+      required: false,
       default: false
     },
     readonly: {
       type: Boolean,
+      required: false,
       default: false
     },
     maxlength: {
       type: Number,
+      required: false,
       default: 120
+    },
+    value: {
+      type: String,
+      required: true,
+      default: ''
     }
   },
   data() {
     return {
-      content: ''
+      content: this.value
     }
   },
   methods: {
diff --git a/cutejava-front/src/views/componentsDemo/CuteOtherDemo.vue b/cutejava-front/src/views/componentsDemo/CuteOtherDemo.vue
index f422a1af..cec2db7c 100644
--- a/cutejava-front/src/views/componentsDemo/CuteOtherDemo.vue
+++ b/cutejava-front/src/views/componentsDemo/CuteOtherDemo.vue
@@ -13,25 +13,11 @@
     </cute-search-form>
     <cute-section-title title="高级搜索Pro版 CuteSearchProForm" />
     <cute-search-pro-form :model="searchFormProValues" :schema="searchFormProSchema" />
-    <cute-section-title title="横向滚动 CuteHorizontalScrollBar" />
-    <cute-horizontal-scroll-bar>
-      <div style="width: 3000px;min-width: 3000px">模拟超长内容</div>
-    </cute-horizontal-scroll-bar>
-    <cute-section-title title="纵向滚动 CuteVerticalScrollBar" />
-    <cute-vertical-scroll-bar>
-      <div style="height: 3000px;min-height: 3000px">模拟超高内容</div>
-    </cute-vertical-scroll-bar>
     <cute-section-title title="数据穿梭 CuteTransfer" />
     <cute-transfer :data-source="leftDataSource" primary-key="id">
       <el-table-column prop="name" label="姓名" />
       <el-table-column prop="description" label="备注" />
     </cute-transfer>
-    <cute-section-title title="多行输入文本 CuteTextAreaInput" />
-    <cute-text-area-input />
-    <cute-section-title title="链接 CuteLink" />
-    <cute-link title="百度一下" href="https://www.baidu.com" />
-    <cute-section-title title="空状态 CuteNoData" />
-    <cute-no-data desc="自定义提示语" />
     <cute-section-title title="预览抽屉 CutePreviewDrawer">
       <template v-slot:operation>
         <cute-button type="primary" @click="handleCutePreviewDrawerShow">显示</cute-button>
@@ -65,32 +51,22 @@
 <script>
 
 import CuteSearchForm from '@/views/components/dev/CuteSearchForm.vue'
-import CuteHorizontalScrollBar from '@/views/components/dev/CuteHorizontalScrollBar.vue'
-import CuteVerticalScrollBar from '@/views/components/dev/CuteVerticalScrollBar.vue'
-import CuteLink from '@/views/components/dev/CuteLink.vue'
-import CuteNoData from '@/views/components/dev/CuteNoData.vue'
 import CutePreviewDrawer from '@/views/components/dev/CutePreviewDrawer.vue'
 import CuteScreenShot from '@/views/components/dev/CuteScreenShot.vue'
 import CuteSectionTitle from '@/views/components/dev/CuteSectionTitle.vue'
 import CuteButton from '@/views/components/dev/CuteButton.vue'
 import CuteTransfer from '@/views/components/dev/CuteTransfer.vue'
-import CuteTextAreaInput from '@/views/components/dev/CuteTextAreaInput.vue'
 import CuteSearchProForm from '@/views/components/dev/CuteSearchProForm.vue'
 
 export default {
   name: 'CuteOtherDemo',
   components: {
     CuteSearchProForm,
-    CuteTextAreaInput,
     CuteTransfer,
     CuteButton,
     CuteSectionTitle,
     CuteScreenShot,
     CutePreviewDrawer,
-    CuteNoData,
-    CuteLink,
-    CuteVerticalScrollBar,
-    CuteHorizontalScrollBar,
     CuteSearchForm
   },
   data() {
diff --git a/cutejava-front/src/views/componentsDemo/dev/CuteButtonDemo.vue b/cutejava-front/src/views/componentsDemo/dev/CuteButtonDemo.vue
index 6d0dc55e..61273e43 100644
--- a/cutejava-front/src/views/componentsDemo/dev/CuteButtonDemo.vue
+++ b/cutejava-front/src/views/componentsDemo/dev/CuteButtonDemo.vue
@@ -32,8 +32,8 @@
     </el-row>
     <h4>API</h4>
     <el-table :data="apiData">
-      <el-table-column prop="name" label="参数" />
-      <el-table-column prop="remark" label="说明" />
+      <el-table-column prop="name" label="参数" width="220" />
+      <el-table-column prop="remark" label="说明" width="450" />
       <el-table-column prop="type" label="类型" />
       <el-table-column prop="defaultValue" label="默认值" />
       <el-table-column prop="required" label="是否必填" />
diff --git a/cutejava-front/src/views/componentsDemo/dev/CuteCodeEditorDemo.vue b/cutejava-front/src/views/componentsDemo/dev/CuteCodeEditorDemo.vue
index 78c82da9..b04c5542 100644
--- a/cutejava-front/src/views/componentsDemo/dev/CuteCodeEditorDemo.vue
+++ b/cutejava-front/src/views/componentsDemo/dev/CuteCodeEditorDemo.vue
@@ -11,8 +11,8 @@
     <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="name" label="参数" width="220" />
+      <el-table-column prop="remark" label="说明" width="450" />
       <el-table-column prop="type" label="类型" />
       <el-table-column prop="defaultValue" label="默认值" />
       <el-table-column prop="required" label="是否必填" />
@@ -79,7 +79,7 @@ export default {
       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: '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: '否' },
         { name: 'change', remark: '内容变化回调', type: '(value) => {}', defaultValue: '-', required: '否' }
       ]
diff --git a/cutejava-front/src/views/componentsDemo/dev/CuteHorizontalScrollBarDemo.vue b/cutejava-front/src/views/componentsDemo/dev/CuteHorizontalScrollBarDemo.vue
new file mode 100644
index 00000000..9460fa49
--- /dev/null
+++ b/cutejava-front/src/views/componentsDemo/dev/CuteHorizontalScrollBarDemo.vue
@@ -0,0 +1,45 @@
+<template>
+  <div>
+    <h4>何时使用</h4>
+    <ul class="description">
+      <li>当需要在容器内展示大量内容，需要横向滚动查看时</li>
+      <li>当希望在不同操作系统（Windows/Mac）上保持一致的滚动条样式时</li>
+      <li>在使用过程中有任何问题，咨询 @Odboy（前端）@Odboy（设计）</li>
+    </ul>
+    <h4>基础用法</h4>
+    <cute-horizontal-scroll-bar>
+      <div style="width: 3000px;min-width: 3000px">模拟超长内容</div>
+    </cute-horizontal-scroll-bar>
+    <h4>API</h4>
+    <el-table :data="apiData">
+      <el-table-column prop="name" label="参数" width="220" />
+      <el-table-column prop="remark" label="说明" width="450" />
+      <el-table-column prop="type" label="类型" />
+      <el-table-column prop="defaultValue" label="默认值" />
+      <el-table-column prop="required" label="是否必填" />
+    </el-table>
+  </div>
+</template>
+<script>
+import CuteHorizontalScrollBar from '@/views/components/dev/CuteHorizontalScrollBar.vue'
+
+export default {
+  name: 'CuteHorizontalScrollBarDemo',
+  components: { CuteHorizontalScrollBar },
+  data() {
+    return {
+      apiData: [
+        { name: 'width', remark: '内部容器宽度', type: 'string', defaultValue: '1280px', required: '否' }
+      ]
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+ul {
+  padding-left: 20px;
+}
+.description > li{
+  font-size: 12px;
+}
+</style>
diff --git a/cutejava-front/src/views/componentsDemo/dev/CuteLinkDemo.vue b/cutejava-front/src/views/componentsDemo/dev/CuteLinkDemo.vue
index f22b6cff..4be184c2 100644
--- a/cutejava-front/src/views/componentsDemo/dev/CuteLinkDemo.vue
+++ b/cutejava-front/src/views/componentsDemo/dev/CuteLinkDemo.vue
@@ -16,8 +16,8 @@
     </el-row>
     <h4>API</h4>
     <el-table :data="apiData">
-      <el-table-column prop="name" label="参数" />
-      <el-table-column prop="remark" label="说明" />
+      <el-table-column prop="name" label="参数" width="220" />
+      <el-table-column prop="remark" label="说明" width="450" />
       <el-table-column prop="type" label="类型" />
       <el-table-column prop="defaultValue" label="默认值" />
       <el-table-column prop="required" label="是否必填" />
diff --git a/cutejava-front/src/views/componentsDemo/dev/CuteMarkdownDemo.vue b/cutejava-front/src/views/componentsDemo/dev/CuteMarkdownDemo.vue
index 5297454a..4c11dacf 100644
--- a/cutejava-front/src/views/componentsDemo/dev/CuteMarkdownDemo.vue
+++ b/cutejava-front/src/views/componentsDemo/dev/CuteMarkdownDemo.vue
@@ -13,8 +13,8 @@
     />
     <h4>API</h4>
     <el-table :data="apiData">
-      <el-table-column prop="name" label="参数" />
-      <el-table-column prop="remark" label="说明" />
+      <el-table-column prop="name" label="参数" width="220" />
+      <el-table-column prop="remark" label="说明" width="450" />
       <el-table-column prop="type" label="类型" />
       <el-table-column prop="defaultValue" label="默认值" />
       <el-table-column prop="required" label="是否必填" />
diff --git a/cutejava-front/src/views/componentsDemo/dev/CuteOneKeyCopyDemo.vue b/cutejava-front/src/views/componentsDemo/dev/CuteOneKeyCopyDemo.vue
index 969c7c92..cd60be74 100644
--- a/cutejava-front/src/views/componentsDemo/dev/CuteOneKeyCopyDemo.vue
+++ b/cutejava-front/src/views/componentsDemo/dev/CuteOneKeyCopyDemo.vue
@@ -11,8 +11,8 @@
     <cute-one-key-copy :content.sync="msg" />
     <h4>API</h4>
     <el-table :data="apiData">
-      <el-table-column prop="name" label="参数" />
-      <el-table-column prop="remark" label="说明" />
+      <el-table-column prop="name" label="参数" width="220" />
+      <el-table-column prop="remark" label="说明" width="450" />
       <el-table-column prop="type" label="类型" />
       <el-table-column prop="defaultValue" label="默认值" />
       <el-table-column prop="required" label="是否必填" />
diff --git a/cutejava-front/src/views/componentsDemo/dev/CuteRichTextEditorDemo.vue b/cutejava-front/src/views/componentsDemo/dev/CuteRichTextEditorDemo.vue
index 314b97e7..ab122c46 100644
--- a/cutejava-front/src/views/componentsDemo/dev/CuteRichTextEditorDemo.vue
+++ b/cutejava-front/src/views/componentsDemo/dev/CuteRichTextEditorDemo.vue
@@ -9,17 +9,18 @@
     <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="name" label="参数" width="220" />
+      <el-table-column prop="remark" label="说明" width="450" />
       <el-table-column prop="type" label="类型" />
       <el-table-column prop="defaultValue" label="默认值" />
       <el-table-column prop="required" label="是否必填" />
     </el-table>
     <h4>方法</h4>
     <el-table :data="methodData">
-      <el-table-column prop="name" label="函数" />
-      <el-table-column prop="remark" label="说明" />
+      <el-table-column prop="name" label="函数" width="220" />
+      <el-table-column prop="remark" label="说明" width="450" />
       <el-table-column prop="inputArgs" label="入参" />
+      <el-table-column prop="outArgs" label="出参" />
     </el-table>
   </div>
 </template>
@@ -34,22 +35,22 @@ export default {
       content: '',
       apiData: [
         { name: 'content', remark: '内容', type: 'string', defaultValue: '-', required: '是' },
-        { name: 'read-only', remark: '是否只读', type: 'boolean', defaultValue: 'false', required: '否' },
+        { name: 'readonly', 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: '' }
+        { name: 'setHtml', remark: '设置html内容。如果是 editor.getHtml() 获取的 HTML 格式，可以完美解析', inputArgs: 'html', outArgs: '-' },
+        { name: 'getHtml', remark: '获取html内容', inputArgs: '-', outArgs: 'html' },
+        { name: 'clear', remark: '清空', inputArgs: '-', outArgs: '-' },
+        { name: 'undo', remark: '撤销', inputArgs: '-', outArgs: '-' },
+        { name: 'redo', remark: '重做', inputArgs: '-', outArgs: '-' },
+        { name: 'getSelectionText', remark: '获取选中的文本', inputArgs: '-', outArgs: 'text' },
+        { name: 'deleteFragment', remark: '删除选中的内容', inputArgs: '-', outArgs: '-' },
+        { name: 'getFragment', remark: '获取选中的内容。JSON格式', inputArgs: '-', outArgs: 'json' },
+        { name: 'getText', remark: '获取文本内容', inputArgs: '-', outArgs: 'text' },
+        { name: 'insertText', remark: '在选区插入文本', inputArgs: 'text', outArgs: '-' }
       ]
     }
   },
diff --git a/cutejava-front/src/views/componentsDemo/dev/CuteSectionTitleDemo.vue b/cutejava-front/src/views/componentsDemo/dev/CuteSectionTitleDemo.vue
index 52670786..e2b7aa80 100644
--- a/cutejava-front/src/views/componentsDemo/dev/CuteSectionTitleDemo.vue
+++ b/cutejava-front/src/views/componentsDemo/dev/CuteSectionTitleDemo.vue
@@ -21,8 +21,8 @@
     </cute-section-title>
     <h4>API</h4>
     <el-table :data="apiData">
-      <el-table-column prop="name" label="参数" />
-      <el-table-column prop="remark" label="说明" />
+      <el-table-column prop="name" label="参数" width="220" />
+      <el-table-column prop="remark" label="说明" width="450" />
       <el-table-column prop="type" label="类型" />
       <el-table-column prop="defaultValue" label="默认值" />
       <el-table-column prop="required" label="是否必填" />
diff --git a/cutejava-front/src/views/componentsDemo/dev/CuteTextAreaInputDemo.vue b/cutejava-front/src/views/componentsDemo/dev/CuteTextAreaInputDemo.vue
new file mode 100644
index 00000000..f1ffbdc5
--- /dev/null
+++ b/cutejava-front/src/views/componentsDemo/dev/CuteTextAreaInputDemo.vue
@@ -0,0 +1,51 @@
+<template>
+  <div>
+    <h4>何时使用</h4>
+    <ul class="description">
+      <li>输入备注、说明等大量普通文本时</li>
+      <li>需要限制输入文本的长度</li>
+      <li>在使用过程中有任何问题，咨询 @Odboy（前端） @Odboy（设计）</li>
+    </ul>
+    <h4>基础用法</h4>
+    <cute-text-area-input v-model="content" />
+    <h4>禁用状态</h4>
+    <cute-text-area-input v-model="content" disabled />
+    <h4>只读状态</h4>
+    <cute-text-area-input v-model="content" readonly />
+    <h4>API</h4>
+    <el-table :data="apiData">
+      <el-table-column prop="name" label="参数" width="220" />
+      <el-table-column prop="remark" label="说明" width="450" />
+      <el-table-column prop="type" label="类型" />
+      <el-table-column prop="defaultValue" label="默认值" />
+      <el-table-column prop="required" label="是否必填" />
+    </el-table>
+  </div>
+</template>
+<script>
+import CuteTextAreaInput from '@/views/components/dev/CuteTextAreaInput.vue'
+
+export default {
+  name: 'CuteTextAreaInputDemo',
+  components: { CuteTextAreaInput },
+  data() {
+    return {
+      content: '这里是很多很多的文本这里是很多很多的文本这里是很多很多的文本这里是很多很多的文本这里是很多很多的文本这里是很多很多的文本这里是很多很多的文本这里是很多很多的文本',
+      apiData: [
+        { name: 'disabled', remark: '是否禁用', type: 'boolean', defaultValue: 'false', required: '否' },
+        { name: 'readonly', remark: '是否只读', type: 'boolean', defaultValue: 'false', required: '否' },
+        { name: 'maxlength', remark: '最大长度', type: 'number', defaultValue: '120', required: '否' },
+        { name: 'value', remark: '绑定的值', type: 'string', defaultValue: '-', required: '是' }
+      ]
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+ul {
+  padding-left: 20px;
+}
+.description > li{
+  font-size: 12px;
+}
+</style>
diff --git a/cutejava-front/src/views/componentsDemo/dev/CuteVerticalScrollBarDemo.vue b/cutejava-front/src/views/componentsDemo/dev/CuteVerticalScrollBarDemo.vue
new file mode 100644
index 00000000..de6c58d1
--- /dev/null
+++ b/cutejava-front/src/views/componentsDemo/dev/CuteVerticalScrollBarDemo.vue
@@ -0,0 +1,45 @@
+<template>
+  <div>
+    <h4>何时使用</h4>
+    <ul class="description">
+      <li>当需要在容器内展示大量内容，需要纵向滚动查看时</li>
+      <li>当希望在不同操作系统（Windows/Mac）上保持一致的滚动条样式时</li>
+      <li>在使用过程中有任何问题，咨询 @Odboy（前端）@Odboy（设计）</li>
+    </ul>
+    <h4>基础用法</h4>
+    <cute-vertical-scroll-bar>
+      <div style="height: 3000px;min-height: 3000px">模拟超高内容</div>
+    </cute-vertical-scroll-bar>
+    <h4>API</h4>
+    <el-table :data="apiData">
+      <el-table-column prop="name" label="参数" width="220" />
+      <el-table-column prop="remark" label="说明" width="450" />
+      <el-table-column prop="type" label="类型" />
+      <el-table-column prop="defaultValue" label="默认值" />
+      <el-table-column prop="required" label="是否必填" />
+    </el-table>
+  </div>
+</template>
+<script>
+import CuteVerticalScrollBar from '@/views/components/dev/CuteVerticalScrollBar.vue'
+
+export default {
+  name: 'CuteHorizontalScrollBarDemo',
+  components: { CuteVerticalScrollBar },
+  data() {
+    return {
+      apiData: [
+        { name: 'height', remark: '内部容器高度', type: 'string', defaultValue: '100px', required: '否' }
+      ]
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+ul {
+  padding-left: 20px;
+}
+.description > li{
+  font-size: 12px;
+}
+</style>
diff --git a/cutejava-front/src/views/componentsDemo/dev/KitDialogDemo.vue b/cutejava-front/src/views/componentsDemo/dev/KitDialogDemo.vue
index bd6c9d57..ed070e13 100644
--- a/cutejava-front/src/views/componentsDemo/dev/KitDialogDemo.vue
+++ b/cutejava-front/src/views/componentsDemo/dev/KitDialogDemo.vue
@@ -16,8 +16,8 @@
     </el-row>
     <h4>快捷调用</h4>
     <el-table :data="apiData">
-      <el-table-column prop="name" label="参数" />
-      <el-table-column prop="remark" label="说明" />
+      <el-table-column prop="name" label="参数" width="220" />
+      <el-table-column prop="remark" label="说明" width="450" />
       <el-table-column prop="type" label="类型" />
       <el-table-column prop="defaultValue" label="默认值" />
       <el-table-column prop="required" label="是否必填" />
diff --git a/cutejava-front/src/views/componentsDemo/dev/KitMessageDemo.vue b/cutejava-front/src/views/componentsDemo/dev/KitMessageDemo.vue
index e120b301..9d41d9ec 100644
--- a/cutejava-front/src/views/componentsDemo/dev/KitMessageDemo.vue
+++ b/cutejava-front/src/views/componentsDemo/dev/KitMessageDemo.vue
@@ -15,8 +15,8 @@
     </el-row>
     <h4>快捷调用</h4>
     <el-table :data="apiData">
-      <el-table-column prop="name" label="参数" />
-      <el-table-column prop="remark" label="说明" />
+      <el-table-column prop="name" label="参数" width="220" />
+      <el-table-column prop="remark" label="说明" width="450" />
       <el-table-column prop="type" label="类型" />
       <el-table-column prop="defaultValue" label="默认值" />
       <el-table-column prop="required" label="是否必填" />
diff --git a/cutejava-front/src/views/componentsDemo/dev/KitNotificationDemo.vue b/cutejava-front/src/views/componentsDemo/dev/KitNotificationDemo.vue
index 5bb1b9e0..eefa6296 100644
--- a/cutejava-front/src/views/componentsDemo/dev/KitNotificationDemo.vue
+++ b/cutejava-front/src/views/componentsDemo/dev/KitNotificationDemo.vue
@@ -19,8 +19,8 @@
     </el-row>
     <h4>快捷调用</h4>
     <el-table :data="apiData">
-      <el-table-column prop="name" label="参数" />
-      <el-table-column prop="remark" label="说明" />
+      <el-table-column prop="name" label="参数" width="220" />
+      <el-table-column prop="remark" label="说明" width="450" />
       <el-table-column prop="type" label="类型" />
       <el-table-column prop="defaultValue" label="默认值" />
       <el-table-column prop="required" label="是否必填" />
diff --git a/cutejava-front/src/views/componentsDemo/dev/KitWsClientDemo.vue b/cutejava-front/src/views/componentsDemo/dev/KitWsClientDemo.vue
index 46055d67..f64e1b66 100644
--- a/cutejava-front/src/views/componentsDemo/dev/KitWsClientDemo.vue
+++ b/cutejava-front/src/views/componentsDemo/dev/KitWsClientDemo.vue
@@ -19,8 +19,8 @@
     </el-card>
     <h4>快捷调用</h4>
     <el-table :data="apiData">
-      <el-table-column prop="name" label="参数" />
-      <el-table-column prop="remark" label="说明" />
+      <el-table-column prop="name" label="参数" width="220" />
+      <el-table-column prop="remark" label="说明" width="450" />
       <el-table-column prop="type" label="类型" />
       <el-table-column prop="defaultValue" label="默认值" />
       <el-table-column prop="required" label="是否必填" />
diff --git a/cutejava-front/src/views/componentsDemo/index.vue b/cutejava-front/src/views/componentsDemo/index.vue
index 85aef3d4..5816435f 100644
--- a/cutejava-front/src/views/componentsDemo/index.vue
+++ b/cutejava-front/src/views/componentsDemo/index.vue
@@ -15,11 +15,14 @@
           <el-collapse-item title="空状态 CuteNoData" name="CuteNoData">
             <CuteNoDataDemo />
           </el-collapse-item>
+          <el-collapse-item title="多行输入文本 CuteTextAreaInput" name="CuteTextAreaInput">
+            <CuteTextAreaInputDemo />
+          </el-collapse-item>
           <el-collapse-item title="段落标题 CuteSectionTitle" name="CuteSectionTitle">
             <CuteSectionTitleDemo />
           </el-collapse-item>
           <el-collapse-item title="横向滚动区域 CuteHorizontalScrollBar" name="CuteHorizontalScrollBar">
-            <CuteSectionTitleDemo />
+            <CuteHorizontalScrollBarDemo />
           </el-collapse-item>
           <el-collapse-item title="纵向滚动区域 CuteVerticalScrollBar" name="CuteVerticalScrollBar">
             <CuteSectionTitleDemo />
@@ -76,10 +79,14 @@ import CuteOneKeyCopyDemo from '@/views/componentsDemo/dev/CuteOneKeyCopyDemo.vu
 import CuteMarkdownDemo from '@/views/componentsDemo/dev/CuteMarkdownDemo.vue'
 import CuteCodeEditorDemo from '@/views/componentsDemo/dev/CuteCodeEditorDemo.vue'
 import CuteRichTextEditorDemo from '@/views/componentsDemo/dev/CuteRichTextEditorDemo.vue'
+import CuteHorizontalScrollBarDemo from '@/views/componentsDemo/dev/CuteHorizontalScrollBarDemo.vue'
+import CuteTextAreaInputDemo from '@/views/componentsDemo/dev/CuteTextAreaInputDemo.vue'
 
 export default {
   name: 'SystemComponents',
   components: {
+    CuteTextAreaInputDemo,
+    CuteHorizontalScrollBarDemo,
     CuteRichTextEditorDemo,
     CuteCodeEditorDemo,
     CuteMarkdownDemo,