From a77f52eec28846e0a05bcb29f8183c2bda0746b2 Mon Sep 17 00:00:00 2001
From: Odboy <tianjun@odboy.cn>
Date: Mon, 2 Feb 2026 20:36:14 +0800
Subject: [PATCH] =?UTF-8?q?refactor(components):=20=E7=BB=9F=E4=B8=80?=
 =?UTF-8?q?=E6=B6=88=E6=81=AF=E6=8F=90=E7=A4=BA=E7=BB=84=E4=BB=B6=E5=AF=BC?=
 =?UTF-8?q?=E5=85=A5=E5=90=8D=E7=A7=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 将所有 CsMessage 导入更改为 KitMessage
- 更新 CuteFileDragUpload.vue 中的消息调用
- 更新 CuteFileUpload.vue 中的消息调用
- 更新 CuteProductLineSelect.vue 中的消息调用
- 更新 CuteProductLineSelectPro.vue 中的消息调用
- 更新 CuteCodeEditor.vue 中的消息调用
- 更新 CuteRichTextEditor.vue 中的所有消息类型调用
- 更新 CuteScreenShot.vue 中的消息调用
- 更新 system menu 组件中的消息调用
- 更新 system storage oss 组件中的消息调用
- 更新 home.vue 中的注释示例
- 优化 CuteSectionTitle.vue 样式和布局
- 添加多个新组件的演示页面
- 移除重复的 Markdown 和 OneKeyCopy 演示文件
---
 .../business/CuteFileDragUpload.vue           |  6 +-
 .../components/business/CuteFileUpload.vue    |  4 +-
 .../business/CuteProductLineSelect.vue        |  4 +-
 .../business/CuteProductLineSelectPro.vue     |  4 +-
 .../src/views/components/dev/CuteButton.vue   |  2 +-
 .../views/components/dev/CuteCodeEditor.vue   |  4 +-
 .../src/views/components/dev/CuteLink.vue     |  2 +-
 .../src/views/components/dev/CuteMarkdown.vue |  4 --
 .../src/views/components/dev/CuteNoData.vue   |  2 +-
 .../views/components/dev/CuteOneKeyCopy.vue   |  2 +-
 .../src/views/components/dev/CutePage.vue     |  2 +-
 .../components/dev/CuteRichTextEditor.vue     | 12 ++--
 .../views/components/dev/CuteScreenShot.vue   |  4 +-
 .../views/components/dev/CuteSectionTitle.vue | 13 ++--
 .../views/componentsDemo/CuteMarkdownDemo.vue | 36 ----------
 .../componentsDemo/CuteOneKeyCopyDemo.vue     | 63 ----------------
 .../componentsDemo/dev/CuteMarkdownDemo.vue   | 66 +++++++++++++++++
 .../componentsDemo/dev/CuteNoDataDemo.vue     | 36 ++++++++++
 .../componentsDemo/dev/CuteOneKeyCopyDemo.vue | 71 +++++++++++++++++++
 .../views/componentsDemo/dev/CutePageDemo.vue | 30 ++++++++
 .../dev/CuteSectionTitleDemo.vue              | 57 +++++++++++++++
 .../src/views/componentsDemo/index.vue        | 25 +++++++
 cutejava-front/src/views/home.vue             |  8 +--
 .../src/views/system/menu/index.vue           |  4 +-
 .../src/views/system/storage/oss/index.vue    |  6 +-
 25 files changed, 322 insertions(+), 145 deletions(-)
 delete mode 100644 cutejava-front/src/views/componentsDemo/CuteMarkdownDemo.vue
 delete mode 100644 cutejava-front/src/views/componentsDemo/CuteOneKeyCopyDemo.vue
 create mode 100644 cutejava-front/src/views/componentsDemo/dev/CuteMarkdownDemo.vue
 create mode 100644 cutejava-front/src/views/componentsDemo/dev/CuteNoDataDemo.vue
 create mode 100644 cutejava-front/src/views/componentsDemo/dev/CuteOneKeyCopyDemo.vue
 create mode 100644 cutejava-front/src/views/componentsDemo/dev/CutePageDemo.vue
 create mode 100644 cutejava-front/src/views/componentsDemo/dev/CuteSectionTitleDemo.vue

diff --git a/cutejava-front/src/views/components/business/CuteFileDragUpload.vue b/cutejava-front/src/views/components/business/CuteFileDragUpload.vue
index 78c71014..e9a37558 100644
--- a/cutejava-front/src/views/components/business/CuteFileDragUpload.vue
+++ b/cutejava-front/src/views/components/business/CuteFileDragUpload.vue
@@ -25,7 +25,7 @@
 <script>
 import { mapGetters } from 'vuex'
 import { getToken } from '@/utils/auth'
-import CsMessage from '@/utils/elementui/KitMessage'
+import KitMessage from '@/utils/elementui/KitMessage'
 
 export default {
   name: 'CuteFileUpload',
@@ -68,7 +68,7 @@ export default {
     },
     // 监听上传失成功
     handleSuccess(response, file, fileList) {
-      CsMessage.Success('上传成功')
+      KitMessage.Success('上传成功')
       // this.$refs.upload.clearFiles()
       // console.error('response', response)
       // console.error('file', file)
@@ -80,7 +80,7 @@ export default {
     // 监听上传失败
     handleError(e, file, fileList) {
       const msg = JSON.parse(e.message)
-      CsMessage.Error(msg.message)
+      KitMessage.Error(msg.message)
       // 绑定on-error事件
       this.$emit('on-error', e, file, fileList)
     }
diff --git a/cutejava-front/src/views/components/business/CuteFileUpload.vue b/cutejava-front/src/views/components/business/CuteFileUpload.vue
index ed1c2241..113b2286 100644
--- a/cutejava-front/src/views/components/business/CuteFileUpload.vue
+++ b/cutejava-front/src/views/components/business/CuteFileUpload.vue
@@ -23,7 +23,7 @@
 <script>
 import { mapGetters } from 'vuex'
 import { getToken } from '@/utils/auth'
-import CsMessage from '@/utils/elementui/KitMessage'
+import KitMessage from '@/utils/elementui/KitMessage'
 
 export default {
   name: 'CuteFileUpload',
@@ -77,7 +77,7 @@ export default {
     // 监听上传失败
     handleError(e, file, fileList) {
       const msg = JSON.parse(e.message)
-      CsMessage.Error(msg.message)
+      KitMessage.Error(msg.message)
       // 绑定on-error事件
       this.$emit('on-error', e, file, fileList)
     }
diff --git a/cutejava-front/src/views/components/business/CuteProductLineSelect.vue b/cutejava-front/src/views/components/business/CuteProductLineSelect.vue
index ebb6cad8..155f4acb 100644
--- a/cutejava-front/src/views/components/business/CuteProductLineSelect.vue
+++ b/cutejava-front/src/views/components/business/CuteProductLineSelect.vue
@@ -26,7 +26,7 @@
 <script>
 
 import { listMetadata } from '@/api/application/cute-product-line-select'
-import CsMessage from '@/utils/elementui/KitMessage'
+import KitMessage from '@/utils/elementui/KitMessage'
 
 export default {
   name: 'CuteProductLineSelect',
@@ -60,7 +60,7 @@ export default {
         this.deptOptions = data
       }).catch(error => {
         console.error('获取部门数据失败:', error)
-        CsMessage.Error('获取部门数据失败')
+        KitMessage.Error('获取部门数据失败')
       })
     },
     handleChange(value) {
diff --git a/cutejava-front/src/views/components/business/CuteProductLineSelectPro.vue b/cutejava-front/src/views/components/business/CuteProductLineSelectPro.vue
index e981a08a..6e253552 100644
--- a/cutejava-front/src/views/components/business/CuteProductLineSelectPro.vue
+++ b/cutejava-front/src/views/components/business/CuteProductLineSelectPro.vue
@@ -18,7 +18,7 @@
 <script>
 
 import { listMetadata } from '@/api/application/cute-product-line-select-pro'
-import CsMessage from '@/utils/elementui/KitMessage'
+import KitMessage from '@/utils/elementui/KitMessage'
 
 export default {
   name: 'CuteProductLineSelectPro',
@@ -67,7 +67,7 @@ export default {
         // console.error('deptOptions', this.deptOptions)
       }).catch(error => {
         console.error('获取部门数据失败:', error)
-        CsMessage.Error('获取部门数据失败')
+        KitMessage.Error('获取部门数据失败')
       })
     },
     handleChange(value) {
diff --git a/cutejava-front/src/views/components/dev/CuteButton.vue b/cutejava-front/src/views/components/dev/CuteButton.vue
index d4b34080..2acb9661 100644
--- a/cutejava-front/src/views/components/dev/CuteButton.vue
+++ b/cutejava-front/src/views/components/dev/CuteButton.vue
@@ -1,5 +1,5 @@
 <!--
- * 统一按钮风格
+ * 按钮
  * @author odboy
  * @email tianjun@odboy.cn
  * @created 2026-01-30
diff --git a/cutejava-front/src/views/components/dev/CuteCodeEditor.vue b/cutejava-front/src/views/components/dev/CuteCodeEditor.vue
index 03248712..e21951d5 100644
--- a/cutejava-front/src/views/components/dev/CuteCodeEditor.vue
+++ b/cutejava-front/src/views/components/dev/CuteCodeEditor.vue
@@ -29,7 +29,7 @@ import 'codemirror/mode/ruby/ruby'
 import 'codemirror/mode/sql/sql'
 import 'codemirror/mode/vue/vue'
 import 'codemirror/mode/xml/xml'
-import CsMessage from '@/utils/elementui/KitMessage'
+import KitMessage from '@/utils/elementui/KitMessage'
 
 const SupportModeList = ['yaml', 'java', 'go', 'swift', 'dockerfile', 'groovy', 'lua', 'perl', 'python', 'ruby', 'sql', 'xml', 'vue']
 export default {
@@ -101,7 +101,7 @@ export default {
       })
       return
     }
-    CsMessage.Error('不支持的mode')
+    KitMessage.Error('不支持的mode')
   },
   methods: {
     getValue() {
diff --git a/cutejava-front/src/views/components/dev/CuteLink.vue b/cutejava-front/src/views/components/dev/CuteLink.vue
index aca3807b..130ed22a 100644
--- a/cutejava-front/src/views/components/dev/CuteLink.vue
+++ b/cutejava-front/src/views/components/dev/CuteLink.vue
@@ -1,5 +1,5 @@
 <!--
- * 文字超链接
+ * 文字链接
  * @author odboy
  * @email tianjun@odboy.cn
  * @created 2025-08-26
diff --git a/cutejava-front/src/views/components/dev/CuteMarkdown.vue b/cutejava-front/src/views/components/dev/CuteMarkdown.vue
index d0c56ce4..09337b8b 100644
--- a/cutejava-front/src/views/components/dev/CuteMarkdown.vue
+++ b/cutejava-front/src/views/components/dev/CuteMarkdown.vue
@@ -1,7 +1,3 @@
-<!--<p class="warn-content">-->
-<!--Markdown 基于-->
-<!--<el-link type="primary" href="" target="_blank">MavonEditor</el-link>-->
-<!--</p>-->
 <!--
  * Markdown编辑器
  * @author odboy
diff --git a/cutejava-front/src/views/components/dev/CuteNoData.vue b/cutejava-front/src/views/components/dev/CuteNoData.vue
index 44b81547..b49b2e6d 100644
--- a/cutejava-front/src/views/components/dev/CuteNoData.vue
+++ b/cutejava-front/src/views/components/dev/CuteNoData.vue
@@ -1,5 +1,5 @@
 <!--
- * 无数据
+ * 无数据占位
  * @author odboy
  * @email tianjun@odboy.cn
  * @created 2025-08-20
diff --git a/cutejava-front/src/views/components/dev/CuteOneKeyCopy.vue b/cutejava-front/src/views/components/dev/CuteOneKeyCopy.vue
index 7931dc5c..c5a7a2e9 100644
--- a/cutejava-front/src/views/components/dev/CuteOneKeyCopy.vue
+++ b/cutejava-front/src/views/components/dev/CuteOneKeyCopy.vue
@@ -3,7 +3,7 @@
  * @author odboy
  * @email tianjun@odboy.cn
  * @created 2025-08-01
- * @description 使用方式：<cute-one-key-copy style="margin-left: 10pt" :content.sync="data" />
+ * @description 使用方式：<cute-one-key-copy :content.sync="data" />
  -->
 <template>
   <el-button
diff --git a/cutejava-front/src/views/components/dev/CutePage.vue b/cutejava-front/src/views/components/dev/CutePage.vue
index 5aea5be5..df22d037 100644
--- a/cutejava-front/src/views/components/dev/CutePage.vue
+++ b/cutejava-front/src/views/components/dev/CutePage.vue
@@ -1,5 +1,5 @@
 <!--
- * 页面
+ * 统一页面
  * @author odboy
  * @email tianjun@odboy.cn
  * @created 2026-01-29
diff --git a/cutejava-front/src/views/components/dev/CuteRichTextEditor.vue b/cutejava-front/src/views/components/dev/CuteRichTextEditor.vue
index 0691bd50..84b1d5a1 100644
--- a/cutejava-front/src/views/components/dev/CuteRichTextEditor.vue
+++ b/cutejava-front/src/views/components/dev/CuteRichTextEditor.vue
@@ -33,7 +33,7 @@ import { mapGetters } from 'vuex'
 import '@wangeditor/editor/dist/css/style.css'
 import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
 import { UploadFile } from '@/utils/KitDomUtil'
-import CsMessage from '@/utils/elementui/KitMessage'
+import KitMessage from '@/utils/elementui/KitMessage'
 
 export default {
   name: 'CuteRichTextEditor',
@@ -159,19 +159,19 @@ export default {
     customAlert(info, type) {
       switch (type) {
         case 'success':
-          CsMessage.Error(info)
+          KitMessage.Error(info)
           break
         case 'info':
-          CsMessage.Info(info)
+          KitMessage.Info(info)
           break
         case 'warning':
-          CsMessage.Warning(info)
+          KitMessage.Warning(info)
           break
         case 'error':
-          CsMessage.Error(info)
+          KitMessage.Error(info)
           break
         default:
-          CsMessage.Info(info)
+          KitMessage.Info(info)
           break
       }
     },
diff --git a/cutejava-front/src/views/components/dev/CuteScreenShot.vue b/cutejava-front/src/views/components/dev/CuteScreenShot.vue
index bf52a8c9..64941f9c 100644
--- a/cutejava-front/src/views/components/dev/CuteScreenShot.vue
+++ b/cutejava-front/src/views/components/dev/CuteScreenShot.vue
@@ -25,7 +25,7 @@
 
 <script>
 
-import CsMessage from '@/utils/elementui/KitMessage'
+import KitMessage from '@/utils/elementui/KitMessage'
 import { FormatDateTimeShortStr } from '@/utils/KitUtil'
 import html2canvas from 'html2canvas'
 
@@ -41,7 +41,7 @@ export default {
       this.capturing = true
       const element = document.querySelector('#elementIdSelector')
       if (!element) {
-        CsMessage.Error('未找到匹配的元素，请检查选择器是否正确')
+        KitMessage.Error('未找到匹配的元素，请检查选择器是否正确')
         this.capturing = false
         return
       }
diff --git a/cutejava-front/src/views/components/dev/CuteSectionTitle.vue b/cutejava-front/src/views/components/dev/CuteSectionTitle.vue
index 7586da02..441e42dd 100644
--- a/cutejava-front/src/views/components/dev/CuteSectionTitle.vue
+++ b/cutejava-front/src/views/components/dev/CuteSectionTitle.vue
@@ -6,7 +6,7 @@
  -->
 <template>
   <el-row style="margin: 10px;" class="container-height">
-    <el-col :span="12" class="container-height">
+    <el-col :span="12">
       <div class="title-container">
         <div class="main-title-line">
           <i class="el-icon-platform-eleme" style="color: #409EFF;font-size: 18px" />
@@ -16,7 +16,7 @@
         <div v-if="thirdTitle" class="third-title-with-text-align">{{ thirdTitle }}</div>
       </div>
     </el-col>
-    <el-col v-if="$slots.operation" :span="12" class="container-height postfix-operation">
+    <el-col v-if="$slots.operation" :span="12" class="postfix-operation">
       <slot name="operation" />
     </el-col>
   </el-row>
@@ -54,7 +54,7 @@ export default {
 .main-title-line {
   display: flex;
   align-items: center;
-  margin-bottom: 8px;
+  margin-bottom: 3px;
   color: #303133;
 
   i:first-child {
@@ -66,7 +66,7 @@ export default {
 .sub-title-with-icon-align {
   font-size: 13px;
   color: #606266;
-  margin-bottom: 8px;
+  margin-bottom: 3px;
 }
 
 .third-title-with-text-align {
@@ -76,11 +76,6 @@ export default {
   margin-bottom: 0;
 }
 
-.container-height {
-  min-height: 27px;
-  max-height: 27px;
-}
-
 .postfix-operation {
   text-align: right;
   line-height: 27px;
diff --git a/cutejava-front/src/views/componentsDemo/CuteMarkdownDemo.vue b/cutejava-front/src/views/componentsDemo/CuteMarkdownDemo.vue
deleted file mode 100644
index 651545fe..00000000
--- a/cutejava-front/src/views/componentsDemo/CuteMarkdownDemo.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<template>
-  <div class="app-container">
-    <!-- @change 编辑区发生变化的回调事件 -->
-    <!-- @save ctrl + s 的回调事件(保存按键,同样触发该回调) -->
-    <cute-markdown
-      :content="content"
-      @change="onChange"
-      @save="onSave"
-    />
-  </div>
-</template>
-
-<script>
-import CuteMarkdown from '@/views/components/dev/CuteMarkdown'
-
-export default {
-  name: 'CuteMarkdownDemo',
-  components: { CuteMarkdown },
-  data() {
-    return {
-      content: '初始化内容'
-    }
-  },
-  methods: {
-    onChange(text, markdown) {
-      console.log('onChange:text', text)
-      console.log('onChange:markdown', markdown)
-    },
-    onSave(text, markdown) {
-      console.log('onSave:text', text)
-      console.log('onSave:markdown', markdown)
-    }
-  }
-}
-</script>
-
diff --git a/cutejava-front/src/views/componentsDemo/CuteOneKeyCopyDemo.vue b/cutejava-front/src/views/componentsDemo/CuteOneKeyCopyDemo.vue
deleted file mode 100644
index c2f69f6d..00000000
--- a/cutejava-front/src/views/componentsDemo/CuteOneKeyCopyDemo.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<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 CuteOneKeyCopy from '@/views/components/dev/CuteOneKeyCopy'
-import CsMessage from '@/utils/elementui/KitMessage'
-
-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) => {
-        CsMessage.Success('复制成功')
-        console.log(e, '复制成功')
-        clipboard.destroy()
-      })
-      // //复制失败
-      clipboard.on('error', (e) => {
-        CsMessage.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/dev/CuteMarkdownDemo.vue b/cutejava-front/src/views/componentsDemo/dev/CuteMarkdownDemo.vue
new file mode 100644
index 00000000..5297454a
--- /dev/null
+++ b/cutejava-front/src/views/componentsDemo/dev/CuteMarkdownDemo.vue
@@ -0,0 +1,66 @@
+<template>
+  <div>
+    <h4>何时使用</h4>
+    <ul class="description">
+      <li>需求输入Markdown格式数据</li>
+      <li>在使用过程中有任何问题，咨询 @Odboy（前端）@Odboy（设计）@Odboy（后端）</li>
+    </ul>
+    <h4>基础用法</h4>
+    <cute-markdown
+      :content="content"
+      @change="onChange"
+      @save="onSave"
+    />
+    <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 CuteMarkdown from '@/views/components/dev/CuteMarkdown.vue'
+
+export default {
+  name: 'CuteMarkdownDemo',
+  components: { CuteMarkdown },
+  data() {
+    return {
+      content: '#### Markdown 是一种轻量级标记语言，可使用易读易写的纯文本格式编写文档。\n' +
+        '\n' +
+        '\n' +
+        '- 文字;\n' +
+        '- Emoji;\n' +
+        '- Task lists;\n' +
+        '- HTML 标签；\n' +
+        '- 流程图和序列图 \n',
+      apiData: [
+        { name: 'content', remark: 'markdown格式内容', type: 'string', defaultValue: '-', required: '是' },
+        { name: 'change', remark: '编辑区发生变化的回调事件', type: '(text, markdown) => {}', defaultValue: '-', required: '否' },
+        { name: 'save', remark: 'ctrl + s 的回调事件(保存按键,同样触发该回调)', type: '(text, markdown) => {}', defaultValue: '-', required: '否' }
+      ]
+    }
+  },
+  methods: {
+    onChange(text, markdown) {
+      console.log('onChange:text', text)
+      console.log('onChange:markdown', markdown)
+    },
+    onSave(text, markdown) {
+      console.log('onSave:text', text)
+      console.log('onSave:markdown', markdown)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+ul {
+  padding-left: 20px;
+}
+.description > li{
+  font-size: 12px;
+}
+</style>
diff --git a/cutejava-front/src/views/componentsDemo/dev/CuteNoDataDemo.vue b/cutejava-front/src/views/componentsDemo/dev/CuteNoDataDemo.vue
new file mode 100644
index 00000000..6214388e
--- /dev/null
+++ b/cutejava-front/src/views/componentsDemo/dev/CuteNoDataDemo.vue
@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <h4>何时使用</h4>
+    <ul class="description">
+      <li>当需要展示空状态或无数据内容时</li>
+      <li>需要统一空状态的视觉呈现时</li>
+      <li>在数据加载失败或列表为空的场景</li>
+      <li>在使用过程中有任何问题，咨询 @Odboy（前端）</li>
+    </ul>
+    <h4>基础用法</h4>
+    <cute-no-data />
+  </div>
+</template>
+<script>
+import CuteNoData from '@/views/components/dev/CuteNoData.vue'
+
+export default {
+  name: 'CuteNoDataDemo',
+  components: { CuteNoData },
+  data() {
+    return {
+      apiData: [
+        { name: 'desc', 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/CuteOneKeyCopyDemo.vue b/cutejava-front/src/views/componentsDemo/dev/CuteOneKeyCopyDemo.vue
new file mode 100644
index 00000000..969c7c92
--- /dev/null
+++ b/cutejava-front/src/views/componentsDemo/dev/CuteOneKeyCopyDemo.vue
@@ -0,0 +1,71 @@
+<template>
+  <div>
+    <h4>何时使用</h4>
+    <ul class="description">
+      <li>复制配置信息、代码片段或用户数据到剪贴板，提升操作效率</li>
+      <li>在使用过程中有任何问题，咨询 @Odboy（前端）</li>
+    </ul>
+    <h4>基础用法：clipboard版</h4>
+    <div id="btn" @click="copy">复制</div>
+    <h4>基础用法：OneKeyCopy组件版（推荐）</h4>
+    <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="type" label="类型" />
+      <el-table-column prop="defaultValue" label="默认值" />
+      <el-table-column prop="required" label="是否必填" />
+    </el-table>
+  </div>
+</template>
+<script>
+import Clipboard from 'clipboard'
+import CuteOneKeyCopy from '@/views/components/dev/CuteOneKeyCopy'
+import KitMessage from '@/utils/elementui/KitMessage'
+export default {
+  name: 'CuteOneKeyCopyDemo',
+  components: { CuteOneKeyCopy },
+  data() {
+    return {
+      msg: '来复制我吧',
+      apiData: [
+        { name: 'content', remark: '待复制的内容', type: 'string', defaultValue: '-', required: '是' }
+      ]
+    }
+  },
+  methods: {
+    // 复制方法
+    copy() {
+      const that = this
+      const clipboard = new Clipboard('#btn', {
+        text(trigger) {
+          console.log(trigger)
+          // 返回字符串
+          return that.msg
+        }
+      })
+      // 复制成功
+      clipboard.on('success', (e) => {
+        KitMessage.Success('复制成功')
+        console.log(e, '复制成功')
+        clipboard.destroy()
+      })
+      // //复制失败
+      clipboard.on('error', (e) => {
+        KitMessage.Error('复制失败')
+        console.log(e, '复制失败')
+        clipboard.destroy()
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+ul {
+  padding-left: 20px;
+}
+.description > li{
+  font-size: 12px;
+}
+</style>
diff --git a/cutejava-front/src/views/componentsDemo/dev/CutePageDemo.vue b/cutejava-front/src/views/componentsDemo/dev/CutePageDemo.vue
new file mode 100644
index 00000000..b13dacc3
--- /dev/null
+++ b/cutejava-front/src/views/componentsDemo/dev/CutePageDemo.vue
@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <h4>何时使用</h4>
+    <ul class="description">
+      <li>用于构建页面布局，提供统一的页面结构和样式</li>
+      <li>在使用过程中有任何问题，咨询 @Odboy（前端）</li>
+    </ul>
+    <h4>基础用法</h4>
+    <cute-page>
+      <cute-button>这里是按钮</cute-button>
+    </cute-page>
+  </div>
+</template>
+<script>
+import CuteButton from '@/views/components/dev/CuteButton.vue'
+import CutePage from '@/views/components/dev/CutePage.vue'
+
+export default {
+  name: 'CutePageDemo',
+  components: { CutePage, CuteButton }
+}
+</script>
+<style lang="scss" scoped>
+ul {
+  padding-left: 20px;
+}
+.description > li{
+  font-size: 12px;
+}
+</style>
diff --git a/cutejava-front/src/views/componentsDemo/dev/CuteSectionTitleDemo.vue b/cutejava-front/src/views/componentsDemo/dev/CuteSectionTitleDemo.vue
new file mode 100644
index 00000000..52670786
--- /dev/null
+++ b/cutejava-front/src/views/componentsDemo/dev/CuteSectionTitleDemo.vue
@@ -0,0 +1,57 @@
+<template>
+  <div>
+    <h4>何时使用</h4>
+    <ul class="description">
+      <li>页面标题、模块标题、区块标题适用</li>
+      <li>在使用过程中有任何问题，咨询 @Odboy（前端）</li>
+    </ul>
+    <h4>基础用法</h4>
+    <cute-section-title title="主标题" />
+    <h4>副标题</h4>
+    <cute-section-title title="主标题" sub-title="副标题" />
+    <h4>三级标题</h4>
+    <cute-section-title title="主标题" sub-title="副标题" third-title="三级标题" />
+    <h4>主标题按钮</h4>
+    <cute-section-title title="主标题">
+      <template v-slot:operation>
+        <cute-button type="primary">操作按钮1</cute-button>
+        <cute-button type="primary">操作按钮2</cute-button>
+        <cute-button type="primary">操作按钮3</cute-button>
+      </template>
+    </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="type" label="类型" />
+      <el-table-column prop="defaultValue" label="默认值" />
+      <el-table-column prop="required" label="是否必填" />
+    </el-table>
+  </div>
+</template>
+<script>
+import CuteButton from '@/views/components/dev/CuteButton.vue'
+import CuteSectionTitle from '@/views/components/dev/CuteSectionTitle.vue'
+
+export default {
+  name: 'CuteSectionTitleDemo',
+  components: { CuteSectionTitle, CuteButton },
+  data() {
+    return {
+      apiData: [
+        { name: 'title', remark: '主标题', type: 'string', defaultValue: '默认标题', required: '是' },
+        { name: 'subTitle', remark: '子标题', type: 'string', defaultValue: '-', required: '否' },
+        { name: 'thirdTitle', 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/index.vue b/cutejava-front/src/views/componentsDemo/index.vue
index 5132171f..61846be8 100644
--- a/cutejava-front/src/views/componentsDemo/index.vue
+++ b/cutejava-front/src/views/componentsDemo/index.vue
@@ -9,6 +9,21 @@
           <el-collapse-item title="文字链接 CuteLink" name="CuteLink">
             <CuteLinkDemo />
           </el-collapse-item>
+          <el-collapse-item title="页面 CutePage" name="CutePage">
+            <CutePageDemo />
+          </el-collapse-item>
+          <el-collapse-item title="空状态 CuteNoData" name="CuteNoData">
+            <CuteNoDataDemo />
+          </el-collapse-item>
+          <el-collapse-item title="段落标题 CuteSectionTitle" name="CuteSectionTitle">
+            <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>
       </el-tab-pane>
       <el-tab-pane label="快捷组件" name="kit">
@@ -42,10 +57,20 @@ import KitNotificationDemo from '@/views/componentsDemo/dev/KitNotificationDemo.
 import KitDialogDemo from '@/views/componentsDemo/dev/KitDialogDemo.vue'
 import KitWsClientDemo from '@/views/componentsDemo/dev/KitWsClientDemo.vue'
 import CuteLinkDemo from '@/views/componentsDemo/dev/CuteLinkDemo.vue'
+import CutePageDemo from '@/views/componentsDemo/dev/CutePageDemo.vue'
+import CuteNoDataDemo from '@/views/componentsDemo/dev/CuteNoDataDemo.vue'
+import CuteSectionTitleDemo from '@/views/componentsDemo/dev/CuteSectionTitleDemo.vue'
+import CuteOneKeyCopyDemo from '@/views/componentsDemo/dev/CuteOneKeyCopyDemo.vue'
+import CuteMarkdownDemo from '@/views/componentsDemo/dev/CuteMarkdownDemo.vue'
 
 export default {
   name: 'SystemComponents',
   components: {
+    CuteMarkdownDemo,
+    CuteOneKeyCopyDemo,
+    CuteSectionTitleDemo,
+    CuteNoDataDemo,
+    CutePageDemo,
     CuteLinkDemo, KitWsClientDemo, KitDialogDemo, KitNotificationDemo, KitMessageDemo, CuteButtonDemo, CutePage },
   props: {
     value: {
diff --git a/cutejava-front/src/views/home.vue b/cutejava-front/src/views/home.vue
index 4bb3a1ef..98eede86 100644
--- a/cutejava-front/src/views/home.vue
+++ b/cutejava-front/src/views/home.vue
@@ -77,16 +77,16 @@ export default {
   },
   mounted() {
     // setTimeout(() => {
-    //   CsMessage.Info('CsMessage Info')
+    //   KitMessage.Info('KitMessage Info')
     // }, 1000)
     // setTimeout(() => {
-    //   CsMessage.Warning('CsMessage Warning')
+    //   KitMessage.Warning('KitMessage Warning')
     // }, 2000)
     // setTimeout(() => {
-    //   CsMessage.Error('CsMessage Error')
+    //   KitMessage.Error('KitMessage Error')
     // }, 3000)
     // setTimeout(() => {
-    //   CsMessage.Success('CsMessage Success')
+    //   KitMessage.Success('KitMessage Success')
     // }, 4000)
   },
   methods: {
diff --git a/cutejava-front/src/views/system/menu/index.vue b/cutejava-front/src/views/system/menu/index.vue
index bff5fb45..2cfa6357 100644
--- a/cutejava-front/src/views/system/menu/index.vue
+++ b/cutejava-front/src/views/system/menu/index.vue
@@ -216,7 +216,7 @@ import rrOperation from '@crud/RR.operation'
 import crudOperation from '@crud/CRUD.operation'
 import udOperation from '@crud/UD.operation'
 import DateRangePicker from '@/components/DateRangePicker'
-import CsMessage from '@/utils/elementui/KitMessage'
+import KitMessage from '@/utils/elementui/KitMessage'
 
 // crud交由presenter持有
 const defaultForm = {
@@ -375,7 +375,7 @@ export default {
       const that = this
       crudMenu.add(data).then(() => {
         setTimeout(() => {
-          CsMessage.Success('复制成功')
+          KitMessage.Success('复制成功')
           that.crud.toQuery()
         }, 1000)
       })
diff --git a/cutejava-front/src/views/system/storage/oss/index.vue b/cutejava-front/src/views/system/storage/oss/index.vue
index 6612899d..c74e8f57 100644
--- a/cutejava-front/src/views/system/storage/oss/index.vue
+++ b/cutejava-front/src/views/system/storage/oss/index.vue
@@ -101,7 +101,7 @@ import crudOperation from '@crud/CRUD.operation'
 import pagination from '@crud/Pagination'
 import DateRangePicker from '@/components/DateRangePicker'
 import Clipboard from 'clipboard'
-import CsMessage from '@/utils/elementui/KitMessage'
+import KitMessage from '@/utils/elementui/KitMessage'
 
 const defaultForm = { id: null }
 export default {
@@ -169,12 +169,12 @@ export default {
       })
       // 复制成功
       clipboard.on('success', (e) => {
-        CsMessage.Success('复制成功')
+        KitMessage.Success('复制成功')
         clipboard.destroy()
       })
       // //复制失败
       clipboard.on('error', (e) => {
-        CsMessage.Error('复制失败')
+        KitMessage.Error('复制失败')
         clipboard.destroy()
       })
     }