diff --git a/package.json b/package.json
index 02f68e23764..1056bb90461 100644
--- a/package.json
+++ b/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": [
diff --git a/src/components/Charts/Keyboard.vue b/src/components/Charts/Keyboard.vue
deleted file mode 100644
index 0b258f3648c..00000000000
--- a/src/components/Charts/Keyboard.vue
+++ /dev/null
@@ -1,155 +0,0 @@
-<template>
-  <div :id="id" :class="className" :style="{height:height,width:width}" />
-</template>
-
-<script>
-import echarts from 'echarts'
-import resize from './mixins/resize'
-
-export default {
-  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 = []
-      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)
-      }
-      this.chart.setOption({
-        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
-        }
-      })
-    }
-  }
-}
-</script>
diff --git a/src/components/Charts/KeyboardChart.vue b/src/components/Charts/KeyboardChart.vue
new file mode 100644
index 00000000000..23761dd7b36
--- /dev/null
+++ b/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>
diff --git a/src/components/ImageCropper/utils/data2blob.js b/src/components/ImageCropper/utils/data2blob.js
index 9c47f8af532..113033d73a4 100755
--- a/src/components/ImageCropper/utils/data2blob.js
+++ b/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
   })
diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/MenuItem.vue
similarity index 70%
rename from src/layout/components/Sidebar/Item.vue
rename to src/layout/components/Sidebar/MenuItem.vue
index aa1f5da4de2..f61d4cf2c7b 100644
--- a/src/layout/components/Sidebar/Item.vue
+++ b/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>
diff --git a/src/utils/chartHelpers.js b/src/utils/chartHelpers.js
new file mode 100644
index 00000000000..eecbe10124e
--- /dev/null
+++ b/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
+    }
+  }
+}
diff --git a/src/views/charts/keyboard.vue b/src/views/charts/keyboard.vue
index 917f8eebdf0..c53bff45bd1 100644
--- a/src/views/charts/keyboard.vue
+++ b/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',
diff --git a/src/views/example/list.vue b/src/views/example/list.vue
index 7cdc4ac092e..9ce78de5915 100644
--- a/src/views/example/list.vue
+++ b/src/views/example/list.vue
@@ -1,50 +1,95 @@
 <template>
   <div class="app-container">
-    <el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%">
-      <el-table-column align="center" label="ID" width="80">
+    <el-table
+      v-loading="listLoading"
+      :data="list"
+      border
+      fit
+      highlight-current-row
+      style="width: 100%"
+    >
+      <el-table-column
+        align="center"
+        label="ID"
+        width="80"
+      >
         <template slot-scope="scope">
           <span>{{ scope.row.id }}</span>
         </template>
       </el-table-column>
 
-      <el-table-column width="180px" align="center" label="Date">
+      <el-table-column
+        width="180px"
+        align="center"
+        label="Date"
+      >
         <template slot-scope="scope">
-          <span>{{ scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
+          <span>{{ getFormattedDate(scope.row.timestamp) }}</span>
         </template>
       </el-table-column>
 
-      <el-table-column width="120px" align="center" label="Author">
+      <el-table-column
+        width="120px"
+        align="center"
+        label="Author"
+      >
         <template slot-scope="scope">
           <span>{{ scope.row.author }}</span>
         </template>
       </el-table-column>
 
-      <el-table-column width="100px" label="Importance">
+      <el-table-column
+        width="100px"
+        label="Importance"
+      >
         <template slot-scope="scope">
-          <svg-icon v-for="n in +scope.row.importance" :key="n" icon-class="star" class="meta-item__icon" />
+          <svg-icon
+            v-for="n in +scope.row.importance"
+            :key="n"
+            icon-class="star"
+            class="meta-item__icon"
+          />
         </template>
       </el-table-column>
 
-      <el-table-column class-name="status-col" label="Status" width="110">
-        <template slot-scope="{row}">
-          <el-tag :type="row.status | statusFilter">
+      <el-table-column
+        class-name="status-col"
+        label="Status"
+        width="110"
+      >
+        <template slot-scope="{ row }">
+          <el-tag :type="getStatusType(row.status)">
             {{ row.status }}
           </el-tag>
         </template>
       </el-table-column>
 
-      <el-table-column min-width="300px" label="Title">
-        <template slot-scope="{row}">
-          <router-link :to="'/example/edit/'+row.id" class="link-type">
+      <el-table-column
+        min-width="300px"
+        label="Title"
+      >
+        <template slot-scope="{ row }">
+          <router-link
+            :to="'/example/edit/' + row.id"
+            class="link-type"
+          >
             <span>{{ row.title }}</span>
           </router-link>
         </template>
       </el-table-column>
 
-      <el-table-column align="center" label="Actions" width="120">
+      <el-table-column
+        align="center"
+        label="Actions"
+        width="120"
+      >
         <template slot-scope="scope">
-          <router-link :to="'/example/edit/'+scope.row.id">
-            <el-button type="primary" size="small" icon="el-icon-edit">
+          <router-link :to="'/example/edit/' + scope.row.id">
+            <el-button
+              type="primary"
+              size="small"
+              icon="el-icon-edit"
+            >
               Edit
             </el-button>
           </router-link>
@@ -52,27 +97,25 @@
       </el-table-column>
     </el-table>
 
-    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.page"
+      :limit.sync="listQuery.limit"
+      @pagination="getList"
+    />
   </div>
 </template>
 
 <script>
 import { fetchList } from '@/api/article'
-import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import Pagination from '@/components/Pagination'
+import { parseTime } from '@/utils'
 
 export default {
   name: 'ArticleList',
   components: { Pagination },
-  filters: {
-    statusFilter(status) {
-      const statusMap = {
-        published: 'success',
-        draft: 'info',
-        deleted: 'danger'
-      }
-      return statusMap[status]
-    }
-  },
+
   data() {
     return {
       list: null,
@@ -84,9 +127,11 @@ export default {
       }
     }
   },
+
   created() {
     this.getList()
   },
+
   methods: {
     getList() {
       this.listLoading = true
@@ -95,6 +140,19 @@ export default {
         this.total = response.data.total
         this.listLoading = false
       })
+    },
+
+    getFormattedDate(timestamp) {
+      return parseTime(timestamp, '{y}-{m}-{d} {h}:{i}')
+    },
+
+    getStatusType(status) {
+      const statusMap = {
+        published: 'success',
+        draft: 'info',
+        deleted: 'danger'
+      }
+      return statusMap[status] || ''
     }
   }
 }