Refactor: melhorar qualidade do código

package.json

@@ -70,6 +70,7 @@
  "serve-static": "1.13.2",
  "svg-sprite-loader": "4.1.3",
  "svgo": "1.2.0",
+ "vue-mess-detector": "^0.67.0",
  "vue-template-compiler": "2.6.10"
  },
  "browserslist": [

src/components/Charts/KeyboardChart.vue

@@ -0,0 +1,55 @@
+<template>
+ <div :id="id" :class="className" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import echarts from 'echarts'
+import resize from './mixins/resize'
+import { generateChartData, getChartOptions } from '@/utils/chartHelpers' // Caminho corrigido
+
+export default {
+ name: 'KeyboardChart',
+ mixins: [resize],
+ props: {
+ className: {
+ type: String,
+ default: 'chart'
+ },
+ id: {
+ type: String,
+ default: 'chart'
+ },
+ width: {
+ type: String,
+ default: '200px'
+ },
+ height: {
+ type: String,
+ default: '200px'
+ }
+ },
+ data() {
+ return {
+ chart: null
+ }
+ },
+ mounted() {
+ this.initChart()
+ },
+ beforeDestroy() {
+ if (!this.chart) {
+ return
+ }
+ this.chart.dispose()
+ this.chart = null
+ },
+ methods: {
+ initChart() {
+ this.chart = echarts.init(document.getElementById(this.id))
+ const { xAxisData, data, data2 } = generateChartData()
+ const options = getChartOptions(xAxisData, data, data2)
+ this.chart.setOption(options)
+ }
+ }
+}
+</script>

src/components/ImageCropper/utils/data2blob.js

@@ -1,9 +1,8 @@
 /**
- * database64文件格式转换为2进制
  *
- * @param {[String]} data dataURL 的格式为 “data:image/png;base64,****”,逗号之前都是一些说明性的文字，我们只需要逗号之后的就行了
- * @param {[String]} mime [description]
- * @return {[blob]} [description]
+ * @param {[String]} data
+ * @param {[String]} mime
+ * @return {[blob]}
  */
 export default function(data, mime) {
  data = data.split(',')[1]
@@ -12,7 +11,7 @@ export default function(data, mime) {
  for (var i = 0; i < data.length; i++) {
  ia[i] = data.charCodeAt(i)
  }
- // canvas.toDataURL 返回的默认格式就是 image/png
+
  return new Blob([ia], {
  type: mime
  })

src/layout/components/Sidebar/Item.vue → src/layout/components/Sidebar/MenuItem.vue

@@ -14,20 +14,20 @@ export default {
  },
  render(h, context) {
  const { icon, title } = context.props
- const vnodes = []
+ const nodes = []
 
  if (icon) {
  if (icon.includes('el-icon')) {
- vnodes.push(<i class={[icon, 'sub-el-icon']} />)
+ nodes.push(<i class={[icon, 'menu-item-icon']} />)
  } else {
- vnodes.push(<svg-icon icon-class={icon}/>)
+ nodes.push(<svg-icon icon-class={icon} />)
  }
  }
 
  if (title) {
- vnodes.push(<span slot='title'>{(title)}</span>)
+ nodes.push(<span slot='title'>{title}</span>)
  }
- return vnodes
+ return nodes
  }
 }
 </script>

src/utils/chartHelpers.js

@@ -0,0 +1,93 @@
+export function generateChartData() {
+ const xAxisData = []
+ const data = []
+ const data2 = []
+ for (let i = 0; i < 50; i++) {
+ xAxisData.push(i)
+ data.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5)
+ data2.push((Math.sin(i / 5) * (i / 5 + 10) + i / 6) * 3)
+ }
+ return { xAxisData, data, data2 }
+}
+
+export function getChartOptions(xAxisData, data, data2) {
+ return {
+ backgroundColor: '#08263a',
+ grid: {
+ left: '5%',
+ right: '5%'
+ },
+ xAxis: [
+ { show: false, data: xAxisData },
+ { show: false, data: xAxisData }
+ ],
+ visualMap: {
+ show: false,
+ min: 0,
+ max: 50,
+ dimension: 0,
+ inRange: {
+ color: ['#4a657a', '#308e92', '#b1cfa5', '#f5d69f', '#f5898b', '#ef5055']
+ }
+ },
+ yAxis: {
+ axisLine: { show: false },
+ axisLabel: { textStyle: { color: '#4a657a' }},
+ splitLine: {
+ show: true,
+ lineStyle: { color: '#08263f' }
+ },
+ axisTick: { show: false }
+ },
+ series: [
+ {
+ name: 'back',
+ type: 'bar',
+ data: data2,
+ z: 1,
+ itemStyle: {
+ normal: {
+ opacity: 0.4,
+ barBorderRadius: 5,
+ shadowBlur: 3,
+ shadowColor: '#111'
+ }
+ }
+ },
+ {
+ name: 'Simulate Shadow',
+ type: 'line',
+ data,
+ z: 2,
+ showSymbol: false,
+ animationDelay: 0,
+ animationEasing: 'linear',
+ animationDuration: 1200,
+ lineStyle: { normal: { color: 'transparent' }},
+ areaStyle: {
+ normal: {
+ color: '#08263a',
+ shadowBlur: 50,
+ shadowColor: '#000'
+ }
+ }
+ },
+ {
+ name: 'front',
+ type: 'bar',
+ data,
+ xAxisIndex: 1,
+ z: 3,
+ itemStyle: { normal: { barBorderRadius: 5 }}
+ }
+ ],
+ animationEasing: 'elasticOut',
+ animationEasingUpdate: 'elasticOut',
+ animationDelay(idx) {
+ return idx * 20
+ },
+ animationDelayUpdate(idx) {
+ return idx * 20
+ }
+ }
+}

src/views/charts/keyboard.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import Chart from '@/components/Charts/Keyboard'
+import Chart from '@/components/Charts/KeyboardChart'
 
 export default {
  name: 'KeyboardChart',