refactor(components): 统一消息提示组件导入名称

- 将所有 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 演示文件
2026-02-03 18:50:58 +08:00
parent d9e2defa17
commit a77f52eec2
25 changed files with 322 additions and 145 deletions
@@ -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>
-
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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: {