upd: 编码规范

cutejava-ui/package.json

@@ -56,7 +56,8 @@
     "qs": "^6.10.1",
     "screenfull": "4.2.0",
     "sortablejs": "1.8.4",
-    "vue": "^2.6.14",
+    "vue": "2.7.16",
+    "vue-clipboard2": "^0.3.3",
     "vue-count-to": "^1.0.13",
     "vue-cropper": "0.4.9",
     "vue-echarts": "^5.0.0-beta.0",
@@ -102,7 +103,7 @@
     "svg-sprite-loader": "4.1.3",
     "svgo": "1.2.0",
     "tasksfile": "^5.1.1",
-    "vue-template-compiler": "2.7.15"
+    "vue-template-compiler": "2.7.16"
   },
   "engines": {
     "node": ">=8.9",

cutejava-ui/src/components/JavaEdit/index.vue

@@ -47,7 +47,7 @@ export default {
       cursorHeight: 0.9,
       // 替换主题这里需修改名称
       theme: 'idea',
-      readOnly: true
+      readOnly: false
     })
     this.editor.setSize('auto', this.height)
     this.editor.setValue(this.value)

cutejava-ui/src/main.js

@@ -9,6 +9,15 @@ import Element from 'element-ui'
 // 数据字典
 import dict from './components/Dict'
 
+// 防止二次提交
+import { preventReClick } from '@/utils/commands'
+
+// 一键复制插件
+import VueClipboard from 'vue-clipboard2'
+
+// 窗口分割组件
+import SplitPane from 'vue-splitpane'
+
 // 权限指令
 import checkPer from '@/utils/permission'
 import permission from './components/Permission'
@@ -27,10 +36,56 @@ import './router/index' // permission control
 Vue.use(checkPer)
 Vue.use(permission)
 Vue.use(dict)
+Vue.use(preventReClick)
+Vue.use(VueClipboard)
 Vue.use(Element, {
   size: Cookies.get('size') || 'small' // set element-ui default size
 })
 
+Vue.component('split-pane', SplitPane)
+
+/**
+ * 日期格式化<br/>
+ * 例子: <el-tag>{{ scope.row.createTime | dateFormat }}</el-tag>
+ */
+Vue.filter('dateFormat', function(originVal) {
+  if (originVal === undefined) {
+    return ''
+  }
+  const dt = new Date(originVal)
+  const y = dt.getFullYear()
+  const m = (dt.getMonth() + 1 + '').padStart(2, '0')
+  const d = (dt.getDate() + '').padStart(2, '0')
+  return `${y}-${m}-${d}`
+})
+
+/**
+ * 日期时间格式化
+ */
+Vue.filter('dateTimeFormat', function(originVal) {
+  if (originVal === undefined) {
+    return ''
+  }
+  const dt = new Date(originVal)
+  const y = dt.getFullYear()
+  const m = (dt.getMonth() + 1 + '').padStart(2, '0')
+  const d = (dt.getDate() + '').padStart(2, '0')
+  const hh = (dt.getHours() + '').padStart(2, '0')
+  const mm = (dt.getMinutes() + '').padStart(2, '0')
+  const ss = (dt.getSeconds() + '').padStart(2, '0')
+  return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
+})
+
+/**
+ * 金额格式化
+ */
+Vue.filter('priceFormat', function(data) {
+  if (data !== undefined && data != null) {
+    return data.toFixed(2)
+  }
+  return 0.00
+})
+
 Vue.config.productionTip = false
 
 new Vue({

cutejava-ui/src/store/modules/api.js

@@ -2,10 +2,6 @@
 const baseUrl = process.env.VUE_APP_BASE_API === '/' ? '' : process.env.VUE_APP_BASE_API
 const api = {
   state: {
-    // 部署包上传
-    deployUploadApi: baseUrl + '/api/deploy/upload',
-    // SQL脚本上传
-    databaseUploadApi: baseUrl + '/api/database/upload',
     // 图片上传
     imagesUploadApi: baseUrl + '/api/localStorage/pictures',
     // 修改头像
@@ -14,6 +10,8 @@ const api = {
     qiNiuUploadApi: baseUrl + '/api/qiNiuContent',
     // Sql 监控
     sqlApi: baseUrl + '/druid/index.html',
+    // websocket
+    websocketApi: baseUrl + '/webSocket/{sid}',
     // swagger
     swaggerApi: baseUrl + '/doc.html',
     // 文件上传

cutejava-ui/src/utils/commands.js

@@ -0,0 +1,20 @@
+import Vue from 'vue'
+
+/**
+ * 防止重复提交指令<br/>
+ * 例子: <el-button v-prevent-re-click >提交</el-button>
+ */
+const preventReClick = Vue.directive('preventReClick', {
+  inserted(el, binding) {
+    el.addEventListener('click', () => {
+      if (!el.disabled) {
+        el.disabled = true
+        setTimeout(() => {
+          el.disabled = false
+        }, binding.value || 3000)
+      }
+    })
+  }
+})
+
+export { preventReClick }

cutejava-ui/src/utils/index.js

@@ -281,28 +281,6 @@ export function debounce(func, wait, immediate) {
   }
 }
 
-/**
- * This is just a simple version of deep copy
- * Has a lot of edge cases bug
- * If you want to use a perfect deep copy, use lodash's _.cloneDeep
- * @param {Object} source
- * @returns {Object}
- */
-export function deepClone(source) {
-  if (!source && typeof source !== 'object') {
-    throw new Error('error arguments', 'deepClone')
-  }
-  const targetObj = source.constructor === Array ? [] : {}
-  Object.keys(source).forEach(keys => {
-    if (source[keys] && typeof source[keys] === 'object') {
-      targetObj[keys] = deepClone(source[keys])
-    } else {
-      targetObj[keys] = source[keys]
-    }
-  })
-  return targetObj
-}
-
 /**
  * @param {Array} arr
  * @returns {Array}
@@ -386,3 +364,12 @@ export function downloadFile(obj, name, suffix) {
   link.click()
   document.body.removeChild(link)
 }
+
+// 数组去重
+export const uniqueArrays = (arr) => [...new Set(arr)]
+
+// 获取变量类型
+export const type = (value) => Object.prototype.toString.call(value).slice(8, -1).toLowerCase()
+
+// 深拷贝对象
+export const deepClone = (obj) => JSON.parse(JSON.stringify(obj))

cutejava-ui/src/utils/myCmd.js

@@ -0,0 +1,20 @@
+import Vue from 'vue'
+
+/**
+ * 防止重复提交指令<br/>
+ * 例子: <el-button v-prevent-re-click >提交</el-button>
+ */
+const preventReClick = Vue.directive('preventReClick', {
+  inserted(el, binding) {
+    el.addEventListener('click', () => {
+      if (!el.disabled) {
+        el.disabled = true
+        setTimeout(() => {
+          el.disabled = false
+        }, binding.value || 3000)
+      }
+    })
+  }
+})
+
+export { preventReClick }

cutejava-ui/src/utils/myElement.js

@@ -0,0 +1,183 @@
+/**
+ * 消息提示工具
+ * @type {{success: MessageUtil.success, warning: MessageUtil.warning, error: MessageUtil.error, info: MessageUtil.info}}
+ */
+const MessageUtil = {
+  info: function(context, content) {
+    context.$message(content)
+  },
+  success: function(context, content) {
+    context.$message({
+      message: content,
+      type: 'success'
+    })
+  },
+  warning: function(context, content) {
+    context.$message({
+      message: content,
+      type: 'warning'
+    })
+  },
+  error: function(context, content) {
+    context.$message.error(content)
+  }
+}
+/**
+ * 通知工具类
+ * @type {{success: NotificationUtil.success, warning: NotificationUtil.warning, error: NotificationUtil.error, info: NotificationUtil.info}}
+ */
+const NotificationUtil = {
+  info: function(context, content) {
+    context.$notify({
+      message: content
+    })
+  },
+  success: function(context, content) {
+    context.$notify({
+      message: content,
+      type: 'success'
+    })
+  },
+  successDuration: function(context, content, durationTime) {
+    context.$notify({
+      message: content,
+      type: 'success',
+      duration: durationTime
+    })
+  },
+  warning: function(context, content) {
+    context.$notify({
+      message: content,
+      type: 'warning'
+    })
+  },
+  error: function(context, content) {
+    context.$notify({
+      message: content,
+      type: 'error'
+    })
+  },
+  errorDuration: function(context, content, durationTime) {
+    context.$notify({
+      message: content,
+      type: 'error',
+      duration: durationTime
+    })
+  }
+}
+
+const MessageBoxUtil = {
+  /**
+   * 确认消息对话框<br/>
+   * 提示用户确认其已经触发的动作, 并询问是否进行此操作时会用到此对话框
+   * @param context 上下文
+   * @param questionText 提示语
+   * @param msgType 消息类型(w、i、e、s)
+   * @param confirmCallBack 确认回调
+   * @param cancelCallBack 取消回调
+   */
+  fullConfirm: function(context, questionText, msgType, confirmCallBack, cancelCallBack) {
+    let currentType = 'info'
+    if (msgType === 's') {
+      currentType = 'success'
+    } else if (msgType === 'e') {
+      currentType = 'error'
+    } else if (msgType === 'i') {
+      currentType = 'info'
+    } else if (msgType === 'w') {
+      currentType = 'warning'
+    }
+    context.$confirm(questionText, '提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: currentType
+    }).then(() => {
+      if (confirmCallBack != null) {
+        confirmCallBack()
+      }
+    }).catch(() => {
+      if (cancelCallBack != null) {
+        cancelCallBack()
+      }
+    })
+  },
+  /**
+   * 数据删除确认对话框
+   * @param context 上下文
+   * @param confirmCallBack 确认回调
+   * @param cancelCallBack 取消回调
+   */
+  deleteConfirm: function(context, confirmCallBack, cancelCallBack) {
+    this.fullConfirm(context, '确定删除本条数据吗？', 'w', confirmCallBack, cancelCallBack)
+  },
+  /**
+   * 数据删除确认对话框(自定义提示内容)
+   * @param context 上下文
+   * @param message 提示内容
+   * @param confirmCallBack 确认回调
+   * @param cancelCallBack 取消回调
+   */
+  deleteMessageConfirm: function(context, message, confirmCallBack, cancelCallBack) {
+    this.fullConfirm(context, message, 'w', confirmCallBack, cancelCallBack)
+  },
+  /**
+   * 数据输入对话框
+   *  @param context 上下文
+   * @param title 标题提示
+   * @param patternText 正则表达式
+   * @param errorMsg 校验失败消息内容
+   * @param confirmCallBack 校验通过回调
+   * @param cancelCallBack 取消回调
+   */
+  textInputConfirm: function(context, title, patternText, errorMsg, confirmCallBack, cancelCallBack) {
+    context.$prompt('', title, {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      inputPattern: patternText,
+      inputErrorMessage: errorMsg
+    }).then(({ value }) => {
+      if (confirmCallBack != null) {
+        confirmCallBack(value)
+      }
+    }).catch(() => {
+      if (cancelCallBack != null) {
+        cancelCallBack()
+      }
+    })
+  },
+  /**
+   * 确认内容消息框
+   * @param context 上下文
+   * @param title 标题
+   * @param content 内容
+   */
+  showConfirm: function(context, title, content) {
+    context.$alert(content, title, {
+      confirmButtonText: '关闭'
+    })
+  }
+}
+
+/**
+ * 全屏加载动画<br/>
+ * const loading = LoadingUtil.product()
+ * loading.close()
+ * @type {{product: (function(*): *)}}
+ */
+const LoadingUtil = {
+  product: function(context) {
+    return context.$loading({
+      lock: true,
+      text: '数据加载中',
+      spinner: 'el-icon-loading',
+      background: 'rgba(0, 0, 0, 0.7)'
+    })
+  }
+}
+
+export {
+  MessageUtil,
+  MessageBoxUtil,
+  NotificationUtil,
+  LoadingUtil
+}

cutejava-ui/src/utils/mySocket.js

@@ -0,0 +1,43 @@
+/**
+ * 构造方法式
+ * @param context
+ * @param wsUri
+ * @constructor
+ */
+function MyWebSocket(context, wsUri) {
+  this.context = context
+  this.wsUri = wsUri
+  this.webSocket = null
+  /**
+   * 初始化WebSocket连接
+   * @param handleError -> function (e) { e是异常本身 }
+   * @param handleMessage -> function (e) { e.data是message }
+   */
+  this.connect = function(handleError, handleMessage) {
+    this.webSocket = new WebSocket(this.wsUri)
+    // 连接发生错误
+    this.webSocket.onerror = handleError
+    // 收到消息
+    this.webSocket.onmessage = handleMessage
+    return this
+  }
+  /**
+   * 发送客户端数据
+   * @param data 客户端数据
+   */
+  this.sendData = function(data) {
+    this.webSocket.send(JSON.stringify(data))
+  }
+  /**
+   * 用于关闭ws连接
+   */
+  this.close = function() {
+    console.info('关闭连接')
+    if (this.webSocket.readyState === 1) {
+      this.sendData([{}])
+      this.webSocket.close()
+    }
+  }
+}
+
+export default MyWebSocket

cutejava-ui/src/utils/myUtil.js

@@ -0,0 +1,83 @@
+import store from '@/store'
+
+const PermissionUtil = {
+  /**
+   * 权限校验
+   * @param value
+   * @returns {boolean|*}
+   */
+  validate: function(value) {
+    if (value && value instanceof Array && value.length > 0) {
+      // 拥有的权限
+      const roles = store.getters && store.getters.roles
+      // 需要的权限
+      const permissionRoles = value
+      return roles.some(role => {
+        return permissionRoles.includes(role)
+      })
+    } else {
+      console.error(`need roles! Like v-permission="['admin','editor']"`)
+      return false
+    }
+  }
+}
+
+const StringUtil = {
+  /**
+   * 字符串转数字
+   * @param value
+   * @returns {Number|*}
+   */
+  toNumber: function(value) {
+    if (value) {
+      return Number(value)
+    }
+    return 0
+  },
+  /**
+   * 保留几位小数
+   * @param num Number
+   * @param accuracy 精度
+   * @returns {string|number}
+   */
+  retailNum: function(num, accuracy) {
+    return num instanceof Number ? num.toFixed(accuracy) : 0
+  }
+}
+
+const ObjectUtil = {
+  /**
+   * 浅拷贝
+   * @param source 源对象
+   * @param target 目标对象
+   * @returns {*}
+   */
+  copy: function(source, target) {
+    return Object.assign(target, source)
+  }
+}
+
+const LabelUtil = {
+  /**
+   * 根据value获取label
+   * @param options /
+   * @param value /
+   * @returns {*}
+   */
+  getLabel: function(options, value) {
+    if (options instanceof Array) {
+      const find = options.find(f => f.value === value)
+      if (find) {
+        return find.label
+      }
+      return ''
+    }
+  }
+}
+
+export {
+  PermissionUtil,
+  StringUtil,
+  ObjectUtil,
+  LabelUtil
+}

cutejava-ui/src/utils/websocket.js

@@ -0,0 +1,42 @@
+/**
+ * @param context 上下文，例如 this
+ * @param wsUri websocket地址
+ * @constructor
+ */
+function EasyWebSocket(context, wsUri) {
+  this.context = context
+  this.wsUri = wsUri
+  this.webSocket = null
+  /**
+   * 初始化WebSocket连接
+   * @param handleError -> function (e) { e是异常本身 }
+   * @param handleMessage -> function (e) { e.data是message }
+   */
+  this.connect = function(handleError, handleMessage) {
+    this.webSocket = new WebSocket(this.wsUri)
+    // 连接发生错误
+    this.webSocket.onerror = handleError
+    // 收到消息
+    this.webSocket.onmessage = handleMessage
+    return this
+  }
+  /**
+   * 发送客户端数据
+   * @param data 客户端数据
+   */
+  this.sendData = function(data) {
+    this.webSocket.send(JSON.stringify(data))
+  }
+  /**
+   * 用于关闭ws连接
+   */
+  this.close = function() {
+    console.info('关闭连接')
+    if (this.webSocket.readyState === 1) {
+      this.sendData([{}])
+      this.webSocket.close()
+    }
+  }
+}
+
+export default EasyWebSocket

cutejava-ui/src/views/components/ClipboardDemo.vue

@@ -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/OneKeyCopy'
+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>

cutejava-ui/src/views/components/CodemirrorDemo.vue

@@ -0,0 +1,18 @@
+<template>
+  <JavaEdit height="500px" :value="form.content" :read-only="false" />
+</template>
+
+<script>
+import JavaEdit from '@/components/JavaEdit'
+
+export default {
+  components: { JavaEdit },
+  data() {
+    return {
+      form: {
+        content: ''
+      }
+    }
+  }
+}
+</script>

cutejava-ui/src/views/components/CountToDemo.vue

@@ -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>

cutejava-ui/src/views/components/DragTableDemo.vue

@@ -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>

cutejava-ui/src/views/components/OneKeyCopy.vue

@@ -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>

cutejava-ui/src/views/components/SplitPaneDemo.vue

@@ -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>

cutejava-ui/src/views/components/WebSocketDemo.vue

@@ -0,0 +1,80 @@
+<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'
+    ])
+  },
+  // mounted() {},
+  // destroyed() {
+  //   if (this.client) {
+  //     this.client.close()
+  //   }
+  // },
+  methods: {
+    onConnectClick() {
+      const that = this
+      that.client = new MyWebSocket(that, that.websocketApi.replaceAll('{sid}', '101314'))
+      that.client.connect(function(event) {
+        console.error('=============== 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>

cutejava-ui/src/views/devops/demo.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="20">
+      <el-col :span="18" />
+      <el-col :span="6" />
+    </el-row></div>
+</template>
+
+<script>
+
+export default {
+  name: 'DemoTemplate',
+  data() {
+    return {
+    }
+  },
+  mounted() {
+    this.initData()
+  },
+  methods: {
+    initData() {
+    }
+  }
+}
+</script>
+

cutejava-ui/src/views/login.vue

@@ -168,47 +168,58 @@ export default {
 </script>
 
 <style rel="stylesheet/scss" lang="scss">
-  .login {
+.login {
-    display: flex;
+  display: flex;
-    justify-content: center;
+  justify-content: flex-end;
-    align-items: center;
+  height: 100%;
-    height: 100%;
+  background-size: cover;
-    background-size: cover;
+}
-  }
+
-  .title {
+.title {
-    margin: 0 auto 30px auto;
+  margin: 0 auto 30px auto;
-    text-align: center;
+  text-align: center;
-    color: #707070;
+  font-size: xx-large;
+  color: white;
+}
+
+.login-form {
+  background: rgba(255, 255, 255, 0.40);
+  width: 400px;
+  padding: 10% 25px 5px 25px;
+
+  .el-input {
+    height: 38px;
+
+    input {
+      height: 38px;
+    }
   }
 
-  .login-form {
+  .input-icon {
-    border-radius: 6px;
+    height: 39px;
-    background: #ffffff;
+    width: 14px;
-    width: 385px;
+    margin-left: 2px;
-    padding: 25px 25px 5px 25px;
-    .el-input {
-      height: 38px;
-      input {
-        height: 38px;
-      }
-    }
-    .input-icon{
-      height: 39px;width: 14px;margin-left: 2px;
-    }
   }
-  .login-tip {
+
-    font-size: 13px;
+  float: right;
-    text-align: center;
+}
-    color: #bfbfbf;
+
-  }
+.login-tip {
-  .login-code {
+  font-size: 13px;
-    width: 33%;
+  text-align: center;
-    display: inline-block;
+  color: #bfbfbf;
-    height: 38px;
+}
-    float: right;
+
-    img{
+.login-code {
-      cursor: pointer;
+  width: 33%;
-      vertical-align:middle
+  display: inline-block;
-    }
+  height: 38px;
+  float: right;
+
+  img {
+    cursor: pointer;
+    vertical-align: middle;
   }
+}
 </style>
+

cutejava-ui/src/views/monitor/online/index.vue

@@ -23,7 +23,6 @@
     <!--表格渲染-->
     <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
       <el-table-column type="selection" width="55" />
-
       <el-table-column :show-overflow-tooltip="true" prop="uid" label="会话编号" />
       <el-table-column prop="userName" label="用户名" />
       <el-table-column prop="nickName" label="用户昵称" />

cutejava-ui/src/views/tools/storage/local/index.vue

@@ -93,7 +93,7 @@
       <el-table-column prop="suffix" label="文件类型" />
       <el-table-column prop="type" label="类别" />
       <el-table-column prop="size" label="大小" />
-      <el-table-column prop="operate" label="操作人" />
+      <el-table-column prop="createBy" label="操作人" />
       <el-table-column prop="createTime" label="创建日期" />
     </el-table>
     <!--分页组件-->

cutejava-ui/src/views/tools/storage/qiniu/form.vue

@@ -40,7 +40,7 @@ import { get, update } from '@/api/tools/qiniu'
 export default {
   data() {
     return {
-      zones: ['华东', '华北', '华南', '北美', '东南亚'], dialog: false,
+      zones: ['华东', '华北', '东南亚'], dialog: false,
       loading: false, form: { accessKey: '', secretKey: '', bucket: '', host: '', zone: '', type: '' },
       rules: {
         accessKey: [