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',