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 演示文件
This commit is contained in:
@@ -25,7 +25,7 @@
|
|||||||
<script>
|
<script>
|
||||||
import { mapGetters } from 'vuex'
|
import { mapGetters } from 'vuex'
|
||||||
import { getToken } from '@/utils/auth'
|
import { getToken } from '@/utils/auth'
|
||||||
import CsMessage from '@/utils/elementui/KitMessage'
|
import KitMessage from '@/utils/elementui/KitMessage'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'CuteFileUpload',
|
name: 'CuteFileUpload',
|
||||||
@@ -68,7 +68,7 @@ export default {
|
|||||||
},
|
},
|
||||||
// 监听上传失成功
|
// 监听上传失成功
|
||||||
handleSuccess(response, file, fileList) {
|
handleSuccess(response, file, fileList) {
|
||||||
CsMessage.Success('上传成功')
|
KitMessage.Success('上传成功')
|
||||||
// this.$refs.upload.clearFiles()
|
// this.$refs.upload.clearFiles()
|
||||||
// console.error('response', response)
|
// console.error('response', response)
|
||||||
// console.error('file', file)
|
// console.error('file', file)
|
||||||
@@ -80,7 +80,7 @@ export default {
|
|||||||
// 监听上传失败
|
// 监听上传失败
|
||||||
handleError(e, file, fileList) {
|
handleError(e, file, fileList) {
|
||||||
const msg = JSON.parse(e.message)
|
const msg = JSON.parse(e.message)
|
||||||
CsMessage.Error(msg.message)
|
KitMessage.Error(msg.message)
|
||||||
// 绑定on-error事件
|
// 绑定on-error事件
|
||||||
this.$emit('on-error', e, file, fileList)
|
this.$emit('on-error', e, file, fileList)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -23,7 +23,7 @@
|
|||||||
<script>
|
<script>
|
||||||
import { mapGetters } from 'vuex'
|
import { mapGetters } from 'vuex'
|
||||||
import { getToken } from '@/utils/auth'
|
import { getToken } from '@/utils/auth'
|
||||||
import CsMessage from '@/utils/elementui/KitMessage'
|
import KitMessage from '@/utils/elementui/KitMessage'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'CuteFileUpload',
|
name: 'CuteFileUpload',
|
||||||
@@ -77,7 +77,7 @@ export default {
|
|||||||
// 监听上传失败
|
// 监听上传失败
|
||||||
handleError(e, file, fileList) {
|
handleError(e, file, fileList) {
|
||||||
const msg = JSON.parse(e.message)
|
const msg = JSON.parse(e.message)
|
||||||
CsMessage.Error(msg.message)
|
KitMessage.Error(msg.message)
|
||||||
// 绑定on-error事件
|
// 绑定on-error事件
|
||||||
this.$emit('on-error', e, file, fileList)
|
this.$emit('on-error', e, file, fileList)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -26,7 +26,7 @@
|
|||||||
<script>
|
<script>
|
||||||
|
|
||||||
import { listMetadata } from '@/api/application/cute-product-line-select'
|
import { listMetadata } from '@/api/application/cute-product-line-select'
|
||||||
import CsMessage from '@/utils/elementui/KitMessage'
|
import KitMessage from '@/utils/elementui/KitMessage'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'CuteProductLineSelect',
|
name: 'CuteProductLineSelect',
|
||||||
@@ -60,7 +60,7 @@ export default {
|
|||||||
this.deptOptions = data
|
this.deptOptions = data
|
||||||
}).catch(error => {
|
}).catch(error => {
|
||||||
console.error('获取部门数据失败:', error)
|
console.error('获取部门数据失败:', error)
|
||||||
CsMessage.Error('获取部门数据失败')
|
KitMessage.Error('获取部门数据失败')
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
handleChange(value) {
|
handleChange(value) {
|
||||||
|
|||||||
@@ -18,7 +18,7 @@
|
|||||||
<script>
|
<script>
|
||||||
|
|
||||||
import { listMetadata } from '@/api/application/cute-product-line-select-pro'
|
import { listMetadata } from '@/api/application/cute-product-line-select-pro'
|
||||||
import CsMessage from '@/utils/elementui/KitMessage'
|
import KitMessage from '@/utils/elementui/KitMessage'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'CuteProductLineSelectPro',
|
name: 'CuteProductLineSelectPro',
|
||||||
@@ -67,7 +67,7 @@ export default {
|
|||||||
// console.error('deptOptions', this.deptOptions)
|
// console.error('deptOptions', this.deptOptions)
|
||||||
}).catch(error => {
|
}).catch(error => {
|
||||||
console.error('获取部门数据失败:', error)
|
console.error('获取部门数据失败:', error)
|
||||||
CsMessage.Error('获取部门数据失败')
|
KitMessage.Error('获取部门数据失败')
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
handleChange(value) {
|
handleChange(value) {
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<!--
|
<!--
|
||||||
* 统一按钮风格
|
* 按钮
|
||||||
* @author odboy
|
* @author odboy
|
||||||
* @email tianjun@odboy.cn
|
* @email tianjun@odboy.cn
|
||||||
* @created 2026-01-30
|
* @created 2026-01-30
|
||||||
|
|||||||
@@ -29,7 +29,7 @@ import 'codemirror/mode/ruby/ruby'
|
|||||||
import 'codemirror/mode/sql/sql'
|
import 'codemirror/mode/sql/sql'
|
||||||
import 'codemirror/mode/vue/vue'
|
import 'codemirror/mode/vue/vue'
|
||||||
import 'codemirror/mode/xml/xml'
|
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']
|
const SupportModeList = ['yaml', 'java', 'go', 'swift', 'dockerfile', 'groovy', 'lua', 'perl', 'python', 'ruby', 'sql', 'xml', 'vue']
|
||||||
export default {
|
export default {
|
||||||
@@ -101,7 +101,7 @@ export default {
|
|||||||
})
|
})
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
CsMessage.Error('不支持的mode')
|
KitMessage.Error('不支持的mode')
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getValue() {
|
getValue() {
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<!--
|
<!--
|
||||||
* 文字超链接
|
* 文字链接
|
||||||
* @author odboy
|
* @author odboy
|
||||||
* @email tianjun@odboy.cn
|
* @email tianjun@odboy.cn
|
||||||
* @created 2025-08-26
|
* @created 2025-08-26
|
||||||
|
|||||||
@@ -1,7 +1,3 @@
|
|||||||
<!--<p class="warn-content">-->
|
|
||||||
<!--Markdown 基于-->
|
|
||||||
<!--<el-link type="primary" href="" target="_blank">MavonEditor</el-link>-->
|
|
||||||
<!--</p>-->
|
|
||||||
<!--
|
<!--
|
||||||
* Markdown编辑器
|
* Markdown编辑器
|
||||||
* @author odboy
|
* @author odboy
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<!--
|
<!--
|
||||||
* 无数据
|
* 无数据占位
|
||||||
* @author odboy
|
* @author odboy
|
||||||
* @email tianjun@odboy.cn
|
* @email tianjun@odboy.cn
|
||||||
* @created 2025-08-20
|
* @created 2025-08-20
|
||||||
|
|||||||
@@ -3,7 +3,7 @@
|
|||||||
* @author odboy
|
* @author odboy
|
||||||
* @email tianjun@odboy.cn
|
* @email tianjun@odboy.cn
|
||||||
* @created 2025-08-01
|
* @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>
|
<template>
|
||||||
<el-button
|
<el-button
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<!--
|
<!--
|
||||||
* 页面
|
* 统一页面
|
||||||
* @author odboy
|
* @author odboy
|
||||||
* @email tianjun@odboy.cn
|
* @email tianjun@odboy.cn
|
||||||
* @created 2026-01-29
|
* @created 2026-01-29
|
||||||
|
|||||||
@@ -33,7 +33,7 @@ import { mapGetters } from 'vuex'
|
|||||||
import '@wangeditor/editor/dist/css/style.css'
|
import '@wangeditor/editor/dist/css/style.css'
|
||||||
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
|
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
|
||||||
import { UploadFile } from '@/utils/KitDomUtil'
|
import { UploadFile } from '@/utils/KitDomUtil'
|
||||||
import CsMessage from '@/utils/elementui/KitMessage'
|
import KitMessage from '@/utils/elementui/KitMessage'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'CuteRichTextEditor',
|
name: 'CuteRichTextEditor',
|
||||||
@@ -159,19 +159,19 @@ export default {
|
|||||||
customAlert(info, type) {
|
customAlert(info, type) {
|
||||||
switch (type) {
|
switch (type) {
|
||||||
case 'success':
|
case 'success':
|
||||||
CsMessage.Error(info)
|
KitMessage.Error(info)
|
||||||
break
|
break
|
||||||
case 'info':
|
case 'info':
|
||||||
CsMessage.Info(info)
|
KitMessage.Info(info)
|
||||||
break
|
break
|
||||||
case 'warning':
|
case 'warning':
|
||||||
CsMessage.Warning(info)
|
KitMessage.Warning(info)
|
||||||
break
|
break
|
||||||
case 'error':
|
case 'error':
|
||||||
CsMessage.Error(info)
|
KitMessage.Error(info)
|
||||||
break
|
break
|
||||||
default:
|
default:
|
||||||
CsMessage.Info(info)
|
KitMessage.Info(info)
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -25,7 +25,7 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
import CsMessage from '@/utils/elementui/KitMessage'
|
import KitMessage from '@/utils/elementui/KitMessage'
|
||||||
import { FormatDateTimeShortStr } from '@/utils/KitUtil'
|
import { FormatDateTimeShortStr } from '@/utils/KitUtil'
|
||||||
import html2canvas from 'html2canvas'
|
import html2canvas from 'html2canvas'
|
||||||
|
|
||||||
@@ -41,7 +41,7 @@ export default {
|
|||||||
this.capturing = true
|
this.capturing = true
|
||||||
const element = document.querySelector('#elementIdSelector')
|
const element = document.querySelector('#elementIdSelector')
|
||||||
if (!element) {
|
if (!element) {
|
||||||
CsMessage.Error('未找到匹配的元素,请检查选择器是否正确')
|
KitMessage.Error('未找到匹配的元素,请检查选择器是否正确')
|
||||||
this.capturing = false
|
this.capturing = false
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -6,7 +6,7 @@
|
|||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
<el-row style="margin: 10px;" class="container-height">
|
<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="title-container">
|
||||||
<div class="main-title-line">
|
<div class="main-title-line">
|
||||||
<i class="el-icon-platform-eleme" style="color: #409EFF;font-size: 18px" />
|
<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 v-if="thirdTitle" class="third-title-with-text-align">{{ thirdTitle }}</div>
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
</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" />
|
<slot name="operation" />
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
@@ -54,7 +54,7 @@ export default {
|
|||||||
.main-title-line {
|
.main-title-line {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 3px;
|
||||||
color: #303133;
|
color: #303133;
|
||||||
|
|
||||||
i:first-child {
|
i:first-child {
|
||||||
@@ -66,7 +66,7 @@ export default {
|
|||||||
.sub-title-with-icon-align {
|
.sub-title-with-icon-align {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
color: #606266;
|
color: #606266;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.third-title-with-text-align {
|
.third-title-with-text-align {
|
||||||
@@ -76,11 +76,6 @@ export default {
|
|||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container-height {
|
|
||||||
min-height: 27px;
|
|
||||||
max-height: 27px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.postfix-operation {
|
.postfix-operation {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
line-height: 27px;
|
line-height: 27px;
|
||||||
|
|||||||
@@ -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">
|
<el-collapse-item title="文字链接 CuteLink" name="CuteLink">
|
||||||
<CuteLinkDemo />
|
<CuteLinkDemo />
|
||||||
</el-collapse-item>
|
</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-collapse>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
<el-tab-pane label="快捷组件" name="kit">
|
<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 KitDialogDemo from '@/views/componentsDemo/dev/KitDialogDemo.vue'
|
||||||
import KitWsClientDemo from '@/views/componentsDemo/dev/KitWsClientDemo.vue'
|
import KitWsClientDemo from '@/views/componentsDemo/dev/KitWsClientDemo.vue'
|
||||||
import CuteLinkDemo from '@/views/componentsDemo/dev/CuteLinkDemo.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 {
|
export default {
|
||||||
name: 'SystemComponents',
|
name: 'SystemComponents',
|
||||||
components: {
|
components: {
|
||||||
|
CuteMarkdownDemo,
|
||||||
|
CuteOneKeyCopyDemo,
|
||||||
|
CuteSectionTitleDemo,
|
||||||
|
CuteNoDataDemo,
|
||||||
|
CutePageDemo,
|
||||||
CuteLinkDemo, KitWsClientDemo, KitDialogDemo, KitNotificationDemo, KitMessageDemo, CuteButtonDemo, CutePage },
|
CuteLinkDemo, KitWsClientDemo, KitDialogDemo, KitNotificationDemo, KitMessageDemo, CuteButtonDemo, CutePage },
|
||||||
props: {
|
props: {
|
||||||
value: {
|
value: {
|
||||||
|
|||||||
@@ -77,16 +77,16 @@ export default {
|
|||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
// setTimeout(() => {
|
// setTimeout(() => {
|
||||||
// CsMessage.Info('CsMessage Info')
|
// KitMessage.Info('KitMessage Info')
|
||||||
// }, 1000)
|
// }, 1000)
|
||||||
// setTimeout(() => {
|
// setTimeout(() => {
|
||||||
// CsMessage.Warning('CsMessage Warning')
|
// KitMessage.Warning('KitMessage Warning')
|
||||||
// }, 2000)
|
// }, 2000)
|
||||||
// setTimeout(() => {
|
// setTimeout(() => {
|
||||||
// CsMessage.Error('CsMessage Error')
|
// KitMessage.Error('KitMessage Error')
|
||||||
// }, 3000)
|
// }, 3000)
|
||||||
// setTimeout(() => {
|
// setTimeout(() => {
|
||||||
// CsMessage.Success('CsMessage Success')
|
// KitMessage.Success('KitMessage Success')
|
||||||
// }, 4000)
|
// }, 4000)
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|||||||
@@ -216,7 +216,7 @@ import rrOperation from '@crud/RR.operation'
|
|||||||
import crudOperation from '@crud/CRUD.operation'
|
import crudOperation from '@crud/CRUD.operation'
|
||||||
import udOperation from '@crud/UD.operation'
|
import udOperation from '@crud/UD.operation'
|
||||||
import DateRangePicker from '@/components/DateRangePicker'
|
import DateRangePicker from '@/components/DateRangePicker'
|
||||||
import CsMessage from '@/utils/elementui/KitMessage'
|
import KitMessage from '@/utils/elementui/KitMessage'
|
||||||
|
|
||||||
// crud交由presenter持有
|
// crud交由presenter持有
|
||||||
const defaultForm = {
|
const defaultForm = {
|
||||||
@@ -375,7 +375,7 @@ export default {
|
|||||||
const that = this
|
const that = this
|
||||||
crudMenu.add(data).then(() => {
|
crudMenu.add(data).then(() => {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
CsMessage.Success('复制成功')
|
KitMessage.Success('复制成功')
|
||||||
that.crud.toQuery()
|
that.crud.toQuery()
|
||||||
}, 1000)
|
}, 1000)
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -101,7 +101,7 @@ import crudOperation from '@crud/CRUD.operation'
|
|||||||
import pagination from '@crud/Pagination'
|
import pagination from '@crud/Pagination'
|
||||||
import DateRangePicker from '@/components/DateRangePicker'
|
import DateRangePicker from '@/components/DateRangePicker'
|
||||||
import Clipboard from 'clipboard'
|
import Clipboard from 'clipboard'
|
||||||
import CsMessage from '@/utils/elementui/KitMessage'
|
import KitMessage from '@/utils/elementui/KitMessage'
|
||||||
|
|
||||||
const defaultForm = { id: null }
|
const defaultForm = { id: null }
|
||||||
export default {
|
export default {
|
||||||
@@ -169,12 +169,12 @@ export default {
|
|||||||
})
|
})
|
||||||
// 复制成功
|
// 复制成功
|
||||||
clipboard.on('success', (e) => {
|
clipboard.on('success', (e) => {
|
||||||
CsMessage.Success('复制成功')
|
KitMessage.Success('复制成功')
|
||||||
clipboard.destroy()
|
clipboard.destroy()
|
||||||
})
|
})
|
||||||
// //复制失败
|
// //复制失败
|
||||||
clipboard.on('error', (e) => {
|
clipboard.on('error', (e) => {
|
||||||
CsMessage.Error('复制失败')
|
KitMessage.Error('复制失败')
|
||||||
clipboard.destroy()
|
clipboard.destroy()
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user