refine dashboard css

Author: PanJiaChen

src/components/TodoList/index.scss

@@ -246,14 +246,15 @@
 		list-style: none;
 		position: absolute;
 		right: 0;
-		left: 0;
+		left: -20px;
 	}
 	.filters li {
 		display: inline;
 	}
 	.filters li a {
 		color: inherit;
 		margin: 3px;
+		font-size: 12px;
 		padding: 3px 7px;
 		text-decoration: none;
 		border: 1px solid transparent;

src/mock/login.js

@@ -6,15 +6,15 @@ const userMap = {
     token: 'admin',
     introduction: '我是超级管理员',
     avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
-    name: '超级管理员小潘',
+    name: 'Super Admin',
     uid: '001'
   },
   editor: {
     role: ['editor'],
     token: 'editor',
     introduction: '我是编辑',
     avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
-    name: '普通编辑小张',
+    name: 'Normal Editor',
     uid: '002'
 
   },

src/utils/index.js

@@ -212,3 +212,38 @@
    }
  }
 
+ export function debounce(func, wait, immediate) {
+   let timeout, args, context, timestamp, result;
+
+   const later = function() {
+    // 据上一次触发时间间隔
+     const last = +new Date() - timestamp;
+
+    // 上次被包装函数被调用时间间隔last小于设定时间间隔wait
+     if (last < wait && last > 0) {
+       timeout = setTimeout(later, wait - last);
+     } else {
+       timeout = null;
+      // 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
+       if (!immediate) {
+         result = func.apply(context, args);
+         if (!timeout) context = args = null;
+       }
+     }
+   };
+
+   return function(...args) {
+     context = this;
+     timestamp = +new Date();
+     const callNow = immediate && !timeout;
+    // 如果延时不存在，重新设定延时
+     if (!timeout) timeout = setTimeout(later, wait);
+     if (callNow) {
+       result = func.apply(context, args);
+       context = args = null;
+     }
+
+     return result;
+   };
+ }
+

src/views/dashboard/editor/index.vue

@@ -65,10 +65,10 @@
         </el-row>
 
         <el-row :gutter="20">
-            <el-col :span="16">
+            <el-col :span="15">
                 <line-chart></line-chart>
             </el-col>
-            <el-col :span="8">
+            <el-col :span="9">
                 <todo-list></todo-list>
             </el-col>
         </el-row>
@@ -129,10 +129,12 @@
     }
     .display_name{
         font-size: 30px;
+        display: block;
     }
     .info-item{
         display: inline-block;
         margin-top: 10px;
+        font-size: 14px;
         &:last-of-type{
             margin-left: 15px;
         }

src/views/dashboard/editor/lineChart.vue

@@ -4,6 +4,8 @@
 <script>
   import echarts from 'echarts';
   require('echarts/theme/macarons'); // echarts 主题
+  import { debounce } from 'utils';
+
 
   export default {
     props: {
@@ -18,6 +20,10 @@
       height: {
         type: String,
         default: '300px'
+      },
+      autoResize: {
+        type: Boolean,
+        default: true
       }
     },
     data() {
@@ -27,11 +33,20 @@
     },
     mounted() {
       this.initChart();
+      if (this.autoResize) {
+        this.__resizeHanlder = debounce(() => {
+          this.chart.resize()
+        }, 100)
+        window.addEventListener('resize', this.__resizeHanlder)
+      }
     },
     beforeDestroy() {
       if (!this.chart) {
         return
       }
+      if (this.autoResize) {
+        window.removeEventListener('resize', this.__resizeHanlder)
+      }
       this.chart.dispose();
       this.chart = null;
     },
@@ -41,12 +56,12 @@
 
         this.chart.setOption({
           xAxis: {
-            data: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
             boundaryGap: false
           },
           grid: {
-            left: 0,
-            right: 0,
+            left: 10,
+            right: 10,
             bottom: 20,
             containLabel: true
           },
@@ -59,7 +74,7 @@
           },
           yAxis: {},
           series: [{
-            name: 'vistor',
+            name: 'visitors',
             itemStyle: {
               normal: {
                 areaStyle: {}
@@ -70,7 +85,7 @@
             data: [100, 120, 161, 134, 105, 160, 165]
           },
           {
-            name: 'buyer',
+            name: 'buyers',
             smooth: true,
             type: 'line',
             itemStyle: {