rename: cutejava-ui to cutejava-front

This commit is contained in:
2025-05-07 13:41:02 +08:00
parent c58d1ecd9f
commit f098a6dbd7
454 changed files with 1 additions and 1 deletions
@@ -0,0 +1,61 @@
<template>
<div>
<el-divider>clipboard版</el-divider>
<span>{{ msg }}</span>
<div id="btn" @click="copy">复制</div>
<el-divider>OneKeyCopy组件版</el-divider>
<one-key-copy style="margin-left: 10pt" :content.sync="msg" />
</div>
</template>
<script>
import Clipboard from 'clipboard'
import { Message } from 'element-ui'
import OneKeyCopy from '@/views/components/base/OneKeyCopy.vue'
export default {
components: { OneKeyCopy },
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) => {
Message.success('复制成功')
console.log(e, '复制成功')
clipboard.destroy()
})
// //复制失败
clipboard.on('error', (e) => {
Message.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,18 @@
<template>
<JavaEdit height="500px" :value="form.content" :read-only="false" />
</template>
<script>
import JavaEdit from '@/components/JavaEdit/index.vue'
export default {
components: { JavaEdit },
data() {
return {
form: {
content: ''
}
}
}
}
</script>
@@ -0,0 +1,40 @@
<template>
<div>
<el-card class="box-card text">
<countTo :start-val="startVal" :end-val="endVal" :duration="3000" />
</el-card>
<el-card class="box-card text">
<countTo :start-val="startVal" :end-val="endVal" :duration="3000" />
</el-card>
<el-card class="box-card text">
<countTo :start-val="startVal" :end-val="endVal" :duration="3000" />
</el-card>
</div>
</template>
<script>
import CountTo from 'vue-count-to'
export default {
name: 'DragTable',
components: { CountTo },
data() {
return {
startVal: 0,
endVal: 2024
}
}
}
</script>
<style>
.text {
font-size: 36px;
text-align: center;
padding-top: 10%;
}
.box-card {
width: 480px;
display: inline-block;
}
</style>
@@ -0,0 +1,71 @@
<template>
<!-- el-table中 添加 row-key="id" ,ref 创建拖拽时用到获取表格节点 -->
<el-table
ref="sortTable"
height="300"
:data="sortList"
row-key="id"
>
<el-table-column width="50" align="center" prop="orderNum" label="序号" />
<el-table-column width="100" align="center" prop="username" label="用户名" />
<el-table-column align="center" prop="code" label="编号" />
<el-table-column align="center" prop="code" label="编号" />
<el-table-column align="center" prop="code" label="编号" />
<el-table-column align="center" prop="code" label="编号" />
<el-table-column align="center" prop="code" label="编号" />
<el-table-column align="center" prop="code" label="编号" />
<el-table-column align="center" prop="code" label="编号" />
<el-table-column width="100" align="center" prop="sex" label="性别" />
</el-table>
</template>
<script>
import Sortable from 'sortablejs'
export default {
data() {
return {
sortList: []
}
},
mounted() {
const list = []
for (let i = 0; i < 10; i++) {
list.push({
orderNum: i + 1,
id: i + 1,
username: '用户名' + i,
code: i,
sex: i % 2 === 0 ? '男' : '女'
})
}
this.sortList = list
this.initDragTable()
},
methods: {
// 初始化拖拽功能
initDragTable() {
const table = this.$refs.sortTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
const that = this
Sortable.create(table, {
animation: 1000,
onEnd({ newIndex, oldIndex }) {
// 拖拽排序数据
that.sortList.splice(newIndex, 0, that.sortList.splice(oldIndex, 1)[0])
const newArray = that.sortList.slice(0)
that.sortList = [] // 必须有此步骤,不然拖拽后回弹
that.$nextTick(function() {
that.sortList = newArray // 重新赋值,用新数据来刷新视图
this.updateOrderNum(that.sortList)// 更改列表中的序号,使序号1.2.3.4.....显示,不然就是行拖拽后乱序显示如:3.2.4.1...
})
}
})
},
updateOrderNum(data) {
data.forEach((item, index) => {
item.orderNum = index + 1
})
}
}
}
</script>
@@ -0,0 +1,110 @@
<template>
<div class="dashboard-container">
<div class="dashboard-editor-container">
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
<heat-map />
</el-row>
<el-row :gutter="32">
<el-col :xs="24" :sm="24" :lg="8">
<div class="chart-wrapper">
<radar-chart />
</div>
</el-col>
<el-col :xs="24" :sm="24" :lg="8">
<div class="chart-wrapper">
<sunburst />
</div>
</el-col>
<el-col :xs="24" :sm="24" :lg="8">
<div class="chart-wrapper">
<gauge />
</div>
</el-col>
</el-row>
<el-row :gutter="12">
<el-col :span="12">
<div class="chart-wrapper">
<rich />
</div>
</el-col>
<el-col :span="12">
<div class="chart-wrapper">
<theme-river />
</div>
</el-col>
</el-row>
<el-row :gutter="32">
<el-col :xs="24" :sm="24" :lg="12">
<div class="chart-wrapper">
<graph />
</div>
</el-col>
<el-col :xs="24" :sm="24" :lg="12">
<div class="chart-wrapper">
<sankey />
</div>
</el-col>
</el-row>
<el-row :gutter="12">
<el-col :span="12">
<div class="chart-wrapper">
<scatter />
</div>
</el-col>
<el-col :span="12">
<div class="chart-wrapper">
<point />
</div>
</el-col>
</el-row>
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
<div class="chart-wrapper">
<category />
</div>
</el-row>
</div>
</div>
</template>
<script>
import RadarChart from '@/components/Echarts/RadarChart.vue'
import HeatMap from '@/components/Echarts/HeatMap.vue'
import Gauge from '@/components/Echarts/Gauge.vue'
import Rich from '@/components/Echarts/Rich.vue'
import ThemeRiver from '@/components/Echarts/ThemeRiver.vue'
import Sunburst from '@/components/Echarts/Sunburst.vue'
import Graph from '@/components/Echarts/Graph.vue'
import Sankey from '@/components/Echarts/Sankey.vue'
import Scatter from '@/components/Echarts/Scatter.vue'
import Category from '@/components/Echarts/Category.vue'
import Point from '@/components/Echarts/Point.vue'
export default {
name: 'Echarts',
components: {
Point,
Category,
Graph,
HeatMap,
RadarChart,
Sunburst,
Gauge,
Rich,
ThemeRiver,
Sankey,
Scatter
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard-editor-container {
padding: 18px 22px 22px 22px;
background-color: rgb(240, 242, 245);
.chart-wrapper {
background: #fff;
padding: 16px 16px 0;
margin-bottom: 32px;
}
}
</style>
@@ -0,0 +1,35 @@
<template>
<div class="app-container">
<p class="warn-content">
富文本基于
<el-link type="primary" href="https://www.wangeditor.com/v5/getting-started.html" target="_blank">wangEditor</el-link>
</p>
<el-row :gutter="10">
<wang-editor v-model="editorContent" style="height: 500px; overflow-y: hidden;" />
</el-row>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import WangEditor from '@/components/WangEditor/index.vue'
export default {
name: 'Editor',
components: { WangEditor },
data() {
return {
editorContent:
`更多帮助请查看官方文档`
}
},
computed: {
...mapGetters([
'imagesUploadApi',
'baseApi'
])
},
mounted() {
}
}
</script>
@@ -0,0 +1,55 @@
<template>
<div class="app-container">
<p class="warn-content">
Markdown 基于
<el-link type="primary" href="https://github.com/hinesboy/mavonEditor" target="_blank">MavonEditor</el-link>
</p>
<mavon-editor ref="md" :style="'height:' + height" @imgAdd="imgAdd" />
</div>
</template>
<script>
import { upload } from '@/utils/upload'
import { mapGetters } from 'vuex'
import { mavonEditor } from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
export default {
name: 'Markdown',
components: {
mavonEditor
},
data() {
return {
height: document.documentElement.clientHeight - 200 + 'px'
}
},
computed: {
...mapGetters([
'imagesUploadApi',
'baseApi'
])
},
mounted() {
const that = this
window.onresize = function temp() {
that.height = document.documentElement.clientHeight - 200 + 'px'
}
},
methods: {
imgAdd(pos, $file) {
upload(this.imagesUploadApi, $file).then(res => {
const data = res.data
const url = this.baseApi + '/file/' + data.type + '/' + data.realName
this.$refs.md.$img2Url(pos, url)
})
}
}
}
</script>
<style scoped>
.v-note-wrapper.shadow {
z-index: 5;
}
</style>
@@ -0,0 +1,44 @@
<!-- 一键复制组件 -->
<!-- 使用方式: <one-key-copy style="margin-left: 10pt" :content.sync="data" /> -->
<template>
<!-- <el-tooltip class="item" effect="dark" content="复制" placement="right-end">-->
<el-button
v-clipboard:copy="content"
v-clipboard:success="onCopy"
v-clipboard:error="onError"
size="mini"
icon="el-icon-document-copy"
/>
<!-- </el-tooltip>-->
</template>
<script>
export default {
props: {
content: {
type: String,
default: ''
}
},
methods: {
onCopy(row) {
const h = this.$createElement
this.$notify({
title: row.text + ' 复制成功',
message: h('i', { style: 'color: teal' }, '已复制到剪贴板,请直接去 Ctrl+V 粘贴吧!')
})
},
// 复制失败
onError(row) {
const h = this.$createElement
this.$notify({
title: row.text + ' 复制失败',
message: h('i', { style: 'color: teal' }, '联系技术吧!')
})
}
}
}
</script>
<style scoped>
</style>
@@ -0,0 +1,67 @@
<template>
<div>
<el-divider>分割成两列</el-divider>
<div class="wrap">
<split-pane :min-percent="20" :default-percent="30" split="vertical" @resize="resize">
<template slot="paneL">
<!-- 编辑自己的代码 -->
<div class="paneL" />
</template>
<template slot="paneR">
<!-- 编辑自己的代码 -->
<div class="paneR" />
</template>
</split-pane>
</div>
<el-divider>分割成三列</el-divider>
<div class="wrap">
<split-pane :min-percent="20" :default-percent="30" split="vertical" @resize="resize">
<template slot="paneL">
A
</template>
<template slot="paneR">
<split-pane split="horizontal">
<template slot="paneL">
B
</template>
<template slot="paneR">
C
</template>
</split-pane>
</template>
</split-pane>
</div>
<el-divider>水平分割</el-divider>
<div class="wrap">
<split-pane :min-percent="20" :default-percent="30" split="horizontal" @resize="resize">
<div slot="first" style="width: 100%;height: 100%;background-color: red" />
<div slot="second" style="width: 100%;height: 100%;background-color: blue" />
</split-pane>
</div>
</div>
</template>
<script>
export default {
name: 'SplitPaneDemo',
methods: {
resize() {}
}
}
</script>
<style lang="scss" scoped>
.wrap{
height:300px;
.paneL{
background-color:red;
height:100%;
width:100%;
}
.paneR{
background-color: blue;
height:100%;
width:100%;
}
}
</style>
@@ -0,0 +1,85 @@
<template>
<el-card>
<div>
<el-input v-model="sendVal" style="width: 300px" />
<el-button @click="onConnectClick">连接</el-button>
<el-button @click="onSendClick">发送</el-button>
<el-button @click="onCloseClick">关闭</el-button>
</div>
<el-divider>返回内容</el-divider>
<div style="width: 300px;min-height: 200px">{{ responseTxt }}</div>
</el-card>
</template>
<script>
import MyWebSocket from '@/utils/websocket'
import { mapGetters } from 'vuex'
export default {
data() {
return {
client: null,
sendVal: '',
responseTxt: ''
}
},
computed: {
...mapGetters([
'websocketApi',
'user'
])
},
// mounted() {},
destroyed() {
if (this.client) {
this.client.close()
}
},
methods: {
onConnectClick() {
// 获取mapGetters中的值
// console.error('userInfo', this.user)
const that = this
that.client = new MyWebSocket(that, that.websocketApi.replaceAll('{sid}', that.user.username))
that.client.connect(function(event) {
console.info('=============== MyWebSocket:event', event)
}, function(msgEvent) {
console.info('=============== MyWebSocket:msgEvent', msgEvent)
that.responseTxt = that.responseTxt + msgEvent.data + ''
})
},
onSendClick() {
if (this.client) {
this.client.sendData({
msgType: 'sc',
userIds: ['123456'],
content: this.sendVal
})
this.client.sendData({
msgType: 'gc',
content: this.sendVal
})
}
},
onCloseClick() {
if (this.client) {
this.client.close()
}
}
}
}
</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,207 @@
<template>
<div class="app-container">
<p class="warn-content">
Yaml编辑器 基于
<a href="https://github.com/codemirror/CodeMirror" target="_blank">CodeMirror</a>,
主题预览地址 <a href="https://codemirror.net/demo/theme.html#idea" target="_blank">Theme</a>
</p>
<Yaml :value="value" :height="height" />
</div>
</template>
<script>
import Yaml from '@/components/YamlEdit/index.vue'
export default {
name: 'YamlEdit',
components: { Yaml },
data() {
return {
height: document.documentElement.clientHeight - 210 + 'px',
value: '# 展示数据,如需更换主题,请在src/components/YamlEdit 目录中搜索原主题名称进行替换\n' +
'\n' +
'# ===================================================================\n' +
'# Spring Boot configuration.\n' +
'#\n' +
'# This configuration will be overridden by the Spring profile you use,\n' +
'# for example application-dev.yml if you use the "dev" profile.\n' +
'#\n' +
'# More information on profiles: https://www.jhipster.tech/profiles/\n' +
'# More information on configuration properties: https://www.jhipster.tech/common-application-properties/\n' +
'# ===================================================================\n' +
'\n' +
'# ===================================================================\n' +
'# Standard Spring Boot properties.\n' +
'# Full reference is available at:\n' +
'# http://docs.spring.io/spring-boot/docs/current/reference/html/common-application-properties.html\n' +
'# ===================================================================\n' +
'\n' +
'eureka:\n' +
' client:\n' +
' enabled: true\n' +
' healthcheck:\n' +
' enabled: true\n' +
' fetch-registry: true\n' +
' register-with-eureka: true\n' +
' instance-info-replication-interval-seconds: 10\n' +
' registry-fetch-interval-seconds: 10\n' +
' instance:\n' +
' appname: product\n' +
' instanceId: product:${spring.application.instance-id:${random.value}}\n' +
' #instanceId: 127.0.0.1:9080\n' +
' lease-renewal-interval-in-seconds: 5\n' +
' lease-expiration-duration-in-seconds: 10\n' +
' status-page-url-path: ${management.endpoints.web.base-path}/info\n' +
' health-check-url-path: ${management.endpoints.web.base-path}/health\n' +
' metadata-map:\n' +
' zone: primary # This is needed for the load balancer\n' +
' profile: ${spring.profiles.active}\n' +
' version: ${info.project.version:}\n' +
' git-version: ${git.commit.id.describe:}\n' +
' git-commit: ${git.commit.id.abbrev:}\n' +
' git-branch: ${git.branch:}\n' +
'ribbon:\n' +
' ReadTimeout: 120000\n' +
' ConnectTimeout: 300000\n' +
' eureka:\n' +
' enabled: true\n' +
'zuul:\n' +
' host:\n' +
' connect-timeout-millis: 5000\n' +
' max-per-route-connections: 10000\n' +
' max-total-connections: 5000\n' +
' socket-timeout-millis: 60000\n' +
' semaphore:\n' +
' max-semaphores: 500\n' +
'\n' +
'feign:\n' +
' hystrix:\n' +
' enabled: true\n' +
' client:\n' +
' config:\n' +
' default:\n' +
' connectTimeout: 500000\n' +
' readTimeout: 500000\n' +
'\n' +
'# See https://github.com/Netflix/Hystrix/wiki/Configuration\n' +
'hystrix:\n' +
' command:\n' +
' default:\n' +
' circuitBreaker:\n' +
' sleepWindowInMilliseconds: 100000\n' +
' forceClosed: true\n' +
' execution:\n' +
' isolation:\n' +
'# strategy: SEMAPHORE\n' +
'# See https://github.com/spring-cloud/spring-cloud-netflix/issues/1330\n' +
' thread:\n' +
' timeoutInMilliseconds: 60000\n' +
' shareSecurityContext: true\n' +
'\n' +
'management:\n' +
' endpoints:\n' +
' web:\n' +
' base-path: /management\n' +
' exposure:\n' +
' include: ["configprops", "env", "health", "info", "threaddump"]\n' +
' endpoint:\n' +
' health:\n' +
' show-details: when_authorized\n' +
' info:\n' +
' git:\n' +
' mode: full\n' +
' health:\n' +
' mail:\n' +
' enabled: false # When using the MailService, configure an SMTP server and set this to true\n' +
' metrics:\n' +
' enabled: false # http://micrometer.io/ is disabled by default, as we use http://metrics.dropwizard.io/ instead\n' +
'\n' +
'spring:\n' +
' application:\n' +
' name: product\n' +
' jpa:\n' +
' open-in-view: false\n' +
' hibernate:\n' +
' ddl-auto: update\n' +
' naming:\n' +
' physical-strategy: org.springframework.boot.orm.jpa.hibernate.SpringPhysicalNamingStrategy\n' +
' implicit-strategy: org.springframework.boot.orm.jpa.hibernate.SpringImplicitNamingStrategy\n' +
' messages:\n' +
' basename: i18n/messages\n' +
' mvc:\n' +
' favicon:\n' +
' enabled: false\n' +
' thymeleaf:\n' +
' mode: HTML\n' +
'security:\n' +
' oauth2:\n' +
' resource:\n' +
' filter-order: 3\n' +
'\n' +
'server:\n' +
' servlet:\n' +
' session:\n' +
' cookie:\n' +
' http-only: true\n' +
'\n' +
'# Properties to be exposed on the /info management endpoint\n' +
'info:\n' +
' # Comma separated list of profiles that will trigger the ribbon to show\n' +
' display-ribbon-on-profiles: "dev"\n' +
'\n' +
'# ===================================================================\n' +
'# JHipster specific properties\n' +
'#\n' +
'# Full reference is available at: https://www.jhipster.tech/common-application-properties/\n' +
'# ===================================================================\n' +
'\n' +
'jhipster:\n' +
' async:\n' +
' core-pool-size: 2\n' +
' max-pool-size: 50\n' +
' queue-capacity: 10000\n' +
' # By default CORS is disabled. Uncomment to enable.\n' +
' #cors:\n' +
' #allowed-origins: "*"\n' +
' #allowed-methods: "*"\n' +
' #allowed-headers: "*"\n' +
' #exposed-headers: "Authorization,Link,X-Total-Count"\n' +
' #allow-credentials: true\n' +
' #max-age: 1800\n' +
' mail:\n' +
' from: product@localhost\n' +
' swagger:\n' +
' default-include-pattern: /api/.*\n' +
' title: product API\n' +
' description: product API documentation\n' +
' version: 0.0.1\n' +
' terms-of-service-url:\n' +
' contact-name:\n' +
' contact-url:\n' +
' contact-email:\n' +
' license:\n' +
' license-url:\n' +
'\n' +
'# ===================================================================\n' +
'# Application specific properties\n' +
'# Add your own application properties here, see the ApplicationProperties class\n' +
'# to have type-safe configuration, like in the JHipsterProperties above\n' +
'#\n' +
'# More documentation is available at:\n' +
'# https://www.jhipster.tech/common-application-properties/\n' +
'# ===================================================================\n' +
'\n' +
'# application:\n'
}
},
mounted() {
const that = this
window.onresize = function temp() {
that.height = document.documentElement.clientHeight - 210 + 'px'
}
}
}
</script>
<style scoped>
</style>