From 4aa96f8a5b316b41e0aa541339d1fb569c75b60f Mon Sep 17 00:00:00 2001
From: Chong Guo <armourcy@gmail.com>
Date: Fri, 26 Apr 2019 21:26:45 -0700
Subject: [PATCH] Feature(dashboard): add dashboard page for admin and editor

---
 mock/index.ts                                 |   4 +-
 mock/remote-serach.ts                         |  51 ++
 package.json                                  |   1 +
 src/api/remote-search.ts                      |  17 +
 src/components/Charts/Keyboard.vue            |  18 +-
 src/components/Charts/LineMarker.vue          |  19 +-
 src/components/Charts/MixChart.vue            |  21 +-
 src/components/GithubCorner/index.vue         |  69 +++
 src/components/PanThumb/index.vue             | 134 +++++
 src/components/TextHoverEffect/Mallki.vue     | 112 ++++
 src/shims-vue.d.ts                            |   5 +
 .../dashboard/admin/components/BarChart.vue   |  88 +++
 .../dashboard/admin/components/BoxCard.vue    | 150 +++++
 .../dashboard/admin/components/LineChart.vue  | 116 ++++
 .../dashboard/admin/components/PanelGroup.vue | 230 ++++++++
 .../dashboard/admin/components/PieChart.vue   |  65 +++
 .../admin/components/RaddarChart.vue          | 102 ++++
 .../admin/components/TodoList/Todo.vue        |  91 +++
 .../admin/components/TodoList/index.vue       | 531 ++++++++++++++++++
 .../admin/components/TransactionTable.vue     |  70 +++
 src/views/dashboard/admin/index.vue           | 150 +++++
 src/views/dashboard/editor/index.vue          |  93 +++
 src/views/dashboard/index.vue                 |  40 +-
 src/views/tab/components/TabPane.vue          |   2 +-
 yarn.lock                                     |   5 +
 25 files changed, 2119 insertions(+), 65 deletions(-)
 create mode 100644 mock/remote-serach.ts
 create mode 100644 src/api/remote-search.ts
 create mode 100644 src/components/GithubCorner/index.vue
 create mode 100644 src/components/PanThumb/index.vue
 create mode 100644 src/components/TextHoverEffect/Mallki.vue
 create mode 100644 src/views/dashboard/admin/components/BarChart.vue
 create mode 100644 src/views/dashboard/admin/components/BoxCard.vue
 create mode 100644 src/views/dashboard/admin/components/LineChart.vue
 create mode 100644 src/views/dashboard/admin/components/PanelGroup.vue
 create mode 100644 src/views/dashboard/admin/components/PieChart.vue
 create mode 100644 src/views/dashboard/admin/components/RaddarChart.vue
 create mode 100644 src/views/dashboard/admin/components/TodoList/Todo.vue
 create mode 100644 src/views/dashboard/admin/components/TodoList/index.vue
 create mode 100644 src/views/dashboard/admin/components/TransactionTable.vue
 create mode 100644 src/views/dashboard/admin/index.vue
 create mode 100644 src/views/dashboard/editor/index.vue

diff --git a/mock/index.ts b/mock/index.ts
index ebaf69566..85852ee22 100644
--- a/mock/index.ts
+++ b/mock/index.ts
@@ -4,11 +4,13 @@ import { param2Obj } from '@/utils'
 import user from './user'
 import role from './role'
 import article from './article'
+import remoteSearch from './remote-serach'
 
 const mocks = [
   ...user,
   ...role,
-  ...article
+  ...article,
+  ...remoteSearch
 ]
 
 // For frontend mock
diff --git a/mock/remote-serach.ts b/mock/remote-serach.ts
new file mode 100644
index 000000000..faba615b1
--- /dev/null
+++ b/mock/remote-serach.ts
@@ -0,0 +1,51 @@
+import Mock from 'mockjs'
+
+const NameList: { name: string }[] = []
+const count = 100
+
+for (let i = 0; i < count; i++) {
+  NameList.push(Mock.mock({
+    name: '@first'
+  }))
+}
+NameList.push({ name: 'mock-Pan' })
+
+export default [
+  // username search
+  {
+    url: '/search/user',
+    type: 'get',
+    response: (config: any) => {
+      const { name } = config.query
+      const mockNameList = NameList.filter(item => {
+        const lowerCaseName = item.name.toLowerCase()
+        return !(name && lowerCaseName.indexOf(name.toLowerCase()) < 0)
+      })
+      return {
+        code: 20000,
+        data: { items: mockNameList }
+      }
+    }
+  },
+
+  // transaction list
+  {
+    url: '/transaction/list',
+    type: 'get',
+    response: (_: any) => {
+      return {
+        code: 20000,
+        data: {
+          total: 20,
+          'items|20': [{
+            order_no: '@guid()',
+            timestamp: +Mock.Random.date('T'),
+            username: '@name()',
+            price: '@float(1000, 15000, 0, 2)',
+            'status|1': ['success', 'pending']
+          }]
+        }
+      }
+    }
+  }
+]
diff --git a/package.json b/package.json
index b5c823603..4152b25a5 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     "screenfull": "^4.2.0",
     "vue": "^2.6.10",
     "vue-class-component": "^7.0.2",
+    "vue-count-to": "^1.0.13",
     "vue-i18n": "^8.11.1",
     "vue-property-decorator": "^8.1.0",
     "vue-router": "^3.0.6",
diff --git a/src/api/remote-search.ts b/src/api/remote-search.ts
new file mode 100644
index 000000000..7fd259dae
--- /dev/null
+++ b/src/api/remote-search.ts
@@ -0,0 +1,17 @@
+import request from '@/utils/request'
+
+export const searchUser = (name: string) => {
+  return request({
+    url: '/search/user',
+    method: 'get',
+    params: { name }
+  })
+}
+
+export const transactionList = (params: any) => {
+  return request({
+    url: '/transaction/list',
+    method: 'get',
+    params
+  })
+}
diff --git a/src/components/Charts/Keyboard.vue b/src/components/Charts/Keyboard.vue
index 5f6e82784..2d461809d 100644
--- a/src/components/Charts/Keyboard.vue
+++ b/src/components/Charts/Keyboard.vue
@@ -7,9 +7,9 @@
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator'
+import { Component, Prop } from 'vue-property-decorator'
 import { mixins } from 'vue-class-component'
-import echarts, { EChartOption } from 'echarts'
+import echarts from 'echarts'
 import ResizeMixin from './mixins/resize'
 
 @Component
@@ -34,11 +34,11 @@ export default class Keyboard extends mixins(ResizeMixin) {
   private initChart() {
     this.chart = echarts.init(document.getElementById(this.id) as HTMLDivElement)
 
-    const xAxisData: number[] = []
+    const xAxisData: string[] = []
     const data: number[] = []
     const data2: number[] = []
     for (let i = 0; i < 50; i++) {
-      xAxisData.push(i)
+      xAxisData.push(i.toString())
       data.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5)
       data2.push((Math.sin(i / 5) * (i / 5 + 10) + i / 6) * 3)
     }
@@ -64,14 +64,12 @@ export default class Keyboard extends mixins(ResizeMixin) {
           color: ['#4a657a', '#308e92', '#b1cfa5', '#f5d69f', '#f5898b', '#ef5055']
         }
       }],
-      yAxis: {
+      yAxis: [{
         axisLine: {
           show: false
         },
         axisLabel: {
-          textStyle: {
-            color: '#43657a'
-          }
+          color: '#43657a'
         },
         splitLine: {
           show: true,
@@ -82,7 +80,7 @@ export default class Keyboard extends mixins(ResizeMixin) {
         axisTick: {
           show: false
         }
-      },
+      }],
       series: [{
         name: 'back',
         type: 'bar',
@@ -137,7 +135,7 @@ export default class Keyboard extends mixins(ResizeMixin) {
       animationDelayUpdate(idx: number) {
         return idx * 20
       }
-    } as EChartOption)
+    })
   }
 }
 </script>
diff --git a/src/components/Charts/LineMarker.vue b/src/components/Charts/LineMarker.vue
index 2289343b7..b101cbf1a 100644
--- a/src/components/Charts/LineMarker.vue
+++ b/src/components/Charts/LineMarker.vue
@@ -7,9 +7,9 @@
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator'
+import { Component, Prop } from 'vue-property-decorator'
 import { mixins } from 'vue-class-component'
-import echarts, { EChartOption } from 'echarts'
+import echarts from 'echarts'
 import ResizeMixin from './mixins/resize'
 
 @Component
@@ -47,12 +47,7 @@ export default class LineMarker extends mixins(ResizeMixin) {
         left: '1%'
       },
       tooltip: {
-        trigger: 'axis',
-        axisPointer: {
-          lineStyle: {
-            color: '#57617B'
-          }
-        }
+        trigger: 'axis' as 'axis'
       },
       legend: {
         top: 20,
@@ -85,7 +80,7 @@ export default class LineMarker extends mixins(ResizeMixin) {
         data: ['13:00', '13:05', '13:10', '13:15', '13:20', '13:25', '13:30', '13:35', '13:40', '13:45', '13:50', '13:55']
       }],
       yAxis: [{
-        type: 'value',
+        type: 'value' as 'value',
         name: '(%)',
         axisTick: {
           show: false
@@ -97,9 +92,7 @@ export default class LineMarker extends mixins(ResizeMixin) {
         },
         axisLabel: {
           margin: 10,
-          textStyle: {
-            fontSize: 14
-          }
+          fontSize: 14
         },
         splitLine: {
           lineStyle: {
@@ -209,7 +202,7 @@ export default class LineMarker extends mixins(ResizeMixin) {
         },
         data: [220, 182, 125, 145, 122, 191, 134, 150, 120, 110, 165, 122]
       }]
-    } as EChartOption)
+    })
   }
 }
 
diff --git a/src/components/Charts/MixChart.vue b/src/components/Charts/MixChart.vue
index 7a1b7cc17..820002304 100644
--- a/src/components/Charts/MixChart.vue
+++ b/src/components/Charts/MixChart.vue
@@ -7,13 +7,13 @@
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator'
+import { Component, Prop } from 'vue-property-decorator'
 import { mixins } from 'vue-class-component'
-import echarts, { EChartOption } from 'echarts'
+import echarts from 'echarts'
 import ResizeMixin from './mixins/resize'
 
 @Component
-export default class Keyboard extends mixins(ResizeMixin) {
+export default class MixChart extends mixins(ResizeMixin) {
   @Prop({ default: 'chart' }) private className!: string
   @Prop({ default: 'chart' }) private id!: string
   @Prop({ default: '200px' }) private width!: string
@@ -45,7 +45,6 @@ export default class Keyboard extends mixins(ResizeMixin) {
       backgroundColor: '#344b58',
       title: {
         text: 'statistics',
-        x: '20',
         top: '20',
         textStyle: {
           color: '#fff',
@@ -57,12 +56,7 @@ export default class Keyboard extends mixins(ResizeMixin) {
         }
       },
       tooltip: {
-        trigger: 'axis',
-        axisPointer: {
-          textStyle: {
-            color: '#fff'
-          }
-        }
+        trigger: 'axis' as 'axis'
       },
       grid: {
         left: '5%',
@@ -82,7 +76,6 @@ export default class Keyboard extends mixins(ResizeMixin) {
         },
         data: ['female', 'male', 'average']
       },
-      calculable: true,
       xAxis: [{
         type: 'category',
         axisLine: {
@@ -127,7 +120,6 @@ export default class Keyboard extends mixins(ResizeMixin) {
       }],
       dataZoom: [{
         show: true,
-        height: 30,
         xAxisIndex: [
           0
         ],
@@ -147,10 +139,9 @@ export default class Keyboard extends mixins(ResizeMixin) {
       }, {
         type: 'inside',
         show: true,
-        height: 15,
         start: 1,
         end: 35
-      } as EChartOption.DataZoom],
+      }],
       series: [{
         name: 'female',
         type: 'bar',
@@ -254,7 +245,7 @@ export default class Keyboard extends mixins(ResizeMixin) {
         ]
       }
       ]
-    } as EChartOption)
+    })
   }
 }
 </script>
diff --git a/src/components/GithubCorner/index.vue b/src/components/GithubCorner/index.vue
new file mode 100644
index 000000000..ed71cd54e
--- /dev/null
+++ b/src/components/GithubCorner/index.vue
@@ -0,0 +1,69 @@
+<template>
+  <a
+    href="https://github.com/armour/vue-typescript-admin-template"
+    target="_blank"
+    class="github-corner"
+    aria-label="View source on Github"
+  >
+    <svg
+      width="80"
+      height="80"
+      viewBox="0 0 250 250"
+      style="fill:#40c9c6; color:#fff;"
+      aria-hidden="true"
+    >
+      <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" />
+      <path
+        d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
+        fill="currentColor"
+        style="transform-origin: 130px 106px;"
+        class="octo-arm"
+      />
+      <path
+        d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
+        fill="currentColor"
+        class="octo-body"
+      />
+    </svg>
+  </a>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+
+@Component
+export default class GithubCorner extends Vue {}
+</script>
+
+<style lang="scss" scoped>
+.github-corner:hover .octo-arm {
+  animation: octocat-wave 560ms ease-in-out
+}
+
+@keyframes octocat-wave {
+  0%,
+  100% {
+    transform: rotate(0)
+  }
+
+  20%,
+  60% {
+    transform: rotate(-25deg)
+  }
+
+  40%,
+  80% {
+    transform: rotate(10deg)
+  }
+}
+
+@media (max-width:500px) {
+  .github-corner:hover .octo-arm {
+    animation: none
+  }
+
+  .github-corner .octo-arm {
+    animation: octocat-wave 560ms ease-in-out
+  }
+}
+</style>
diff --git a/src/components/PanThumb/index.vue b/src/components/PanThumb/index.vue
new file mode 100644
index 000000000..d57230aaf
--- /dev/null
+++ b/src/components/PanThumb/index.vue
@@ -0,0 +1,134 @@
+<template>
+  <div
+    :style="{zIndex: zIndex,height: height,width: width}"
+    class="pan-item"
+  >
+    <div class="pan-info">
+      <div class="pan-info-roles-container">
+        <slot />
+      </div>
+    </div>
+    <img
+      :src="image"
+      class="pan-thumb"
+    >
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator'
+
+@Component
+export default class PanThumb extends Vue {
+  @Prop({ required: true }) private image!: string
+  @Prop({ default: '150px' }) private width!: string
+  @Prop({ default: '150px' }) private height!: string
+  @Prop({ default: 1 }) private zIndex!: number
+}
+</script>
+
+<style lang="scss" scoped>
+.pan-item {
+  width: 200px;
+  height: 200px;
+  border-radius: 50%;
+  display: inline-block;
+  position: relative;
+  cursor: default;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+
+  &:hover .pan-thumb {
+    transform: rotate(-110deg);
+  }
+
+  &:hover .pan-info p a {
+    opacity: 1;
+    transform: translateX(0px) rotate(0deg);
+  }
+}
+
+.pan-info {
+  position: absolute;
+  width: inherit;
+  height: inherit;
+  border-radius: 50%;
+  overflow: hidden;
+  box-shadow: inset 0 0 0 5px rgba(0, 0, 0, 0.05);
+
+  .pan-info-roles-container {
+    padding: 20px;
+    text-align: center;
+  }
+
+  h3 {
+    color: #fff;
+    text-transform: uppercase;
+    position: relative;
+    letter-spacing: 2px;
+    font-size: 18px;
+    margin: 0 60px;
+    padding: 22px 0 0 0;
+    height: 85px;
+    font-family: 'Open Sans', Arial, sans-serif;
+    text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.3);
+  }
+
+  p {
+    color: #fff;
+    padding: 10px 5px;
+    font-style: italic;
+    margin: 0 30px;
+    font-size: 12px;
+    border-top: 1px solid rgba(255, 255, 255, 0.5);
+
+    a {
+      display: block;
+      color: #333;
+      width: 80px;
+      height: 80px;
+      background: rgba(255, 255, 255, 0.3);
+      border-radius: 50%;
+      color: #fff;
+      font-style: normal;
+      font-weight: 700;
+      text-transform: uppercase;
+      font-size: 9px;
+      letter-spacing: 1px;
+      padding-top: 24px;
+      margin: 7px auto 0;
+      font-family: 'Open Sans', Arial, sans-serif;
+      opacity: 0;
+      transition: transform 0.3s ease-in-out 0.2s, opacity 0.3s ease-in-out 0.2s, background 0.2s linear 0s;
+      transform: translateX(60px) rotate(90deg);
+
+      &:hover {
+        background: rgba(255, 255, 255, 0.5);
+      }
+    }
+  }
+}
+
+.pan-thumb {
+  width: 100%;
+  height: 100%;
+  background-size: 100%;
+  border-radius: 50%;
+  overflow: hidden;
+  position: absolute;
+  transform-origin: 95% 40%;
+  transition: all 0.3s ease-in-out;
+
+  &:after {
+    content: '';
+    width: 8px;
+    height: 8px;
+    position: absolute;
+    border-radius: 50%;
+    top: 40%;
+    left: 95%;
+    margin: -4px 0 0 -4px;
+    background: radial-gradient(ellipse at center, rgba(14, 14, 14, 1) 0%, rgba(125, 126, 125, 1) 100%);
+    box-shadow: 0 0 1px rgba(255, 255, 255, 0.9);
+  }
+}
+</style>
diff --git a/src/components/TextHoverEffect/Mallki.vue b/src/components/TextHoverEffect/Mallki.vue
new file mode 100644
index 000000000..261c57cee
--- /dev/null
+++ b/src/components/TextHoverEffect/Mallki.vue
@@ -0,0 +1,112 @@
+<template>
+  <a
+    :class="className"
+    class="link--mallki"
+    href="#"
+  >
+    {{ text }}
+    <span :data-letters="text" />
+    <span :data-letters="text" />
+  </a>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator'
+
+@Component
+export default class GithubCorner extends Vue {
+  @Prop({ default: '' }) private className!: string
+  @Prop({ default: 'vue-typescript-admin' }) private text!: string
+}
+</script>
+
+<style lang="scss" scoped>
+/* Mallki */
+
+.link--mallki {
+  font-weight: 800;
+  color: #4dd9d5;
+  font-family: 'Dosis', sans-serif;
+  -webkit-transition: color 0.5s 0.25s;
+  transition: color 0.5s 0.25s;
+  overflow: hidden;
+  position: relative;
+  display: inline-block;
+  line-height: 1;
+  outline: none;
+  text-decoration: none;
+
+  &:hover {
+    -webkit-transition: none;
+    transition: none;
+    color: transparent;
+
+    &::before {
+      -webkit-transform: translate3d(100%, 0, 0);
+      transform: translate3d(100%, 0, 0);
+    }
+
+    span::before {
+      -webkit-transition-delay: 0.3s;
+      transition-delay: 0.3s;
+      -webkit-transform: translate3d(0, 0, 0);
+      transform: translate3d(0, 0, 0);
+      -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
+      transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
+    }
+  }
+
+  &::before {
+    content: '';
+    width: 100%;
+    height: 6px;
+    margin: -3px 0 0 0;
+    background: #3888fa;
+    position: absolute;
+    left: 0;
+    top: 50%;
+    -webkit-transform: translate3d(-100%, 0, 0);
+    transform: translate3d(-100%, 0, 0);
+    -webkit-transition: -webkit-transform 0.4s;
+    transition: transform 0.4s;
+    -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
+    transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
+  }
+
+  span {
+    position: absolute;
+    height: 50%;
+    width: 100%;
+    left: 0;
+    top: 0;
+    overflow: hidden;
+
+    &::before {
+      content: attr(data-letters);
+      color: red;
+      position: absolute;
+      left: 0;
+      width: 100%;
+      color: #3888fa;
+      -webkit-transition: -webkit-transform 0.5s;
+      transition: transform 0.5s;
+    }
+
+    &:nth-child(2) {
+      top: 50%;
+    }
+
+    &:first-child::before {
+      top: 0;
+      -webkit-transform: translate3d(0, 100%, 0);
+      transform: translate3d(0, 100%, 0);
+    }
+
+    &:nth-child(2)::before {
+      bottom: 0;
+      -webkit-transform: translate3d(0, -100%, 0);
+      transform: translate3d(0, -100%, 0);
+    }
+  }
+}
+</style>
diff --git a/src/shims-vue.d.ts b/src/shims-vue.d.ts
index da276b1ec..f9bf53b8a 100644
--- a/src/shims-vue.d.ts
+++ b/src/shims-vue.d.ts
@@ -10,3 +10,8 @@ declare module 'element-ui/lib/locale/lang/*' {
 declare module '*.gif' {
   export const gif: any
 }
+
+// TODO: remove this part after vue-count-to has its typescript file
+declare module 'vue-count-to' {
+  // Placeholder
+}
diff --git a/src/views/dashboard/admin/components/BarChart.vue b/src/views/dashboard/admin/components/BarChart.vue
new file mode 100644
index 000000000..284ce4a00
--- /dev/null
+++ b/src/views/dashboard/admin/components/BarChart.vue
@@ -0,0 +1,88 @@
+<template>
+  <div
+    :class="className"
+    :style="{height: height,width: width}"
+  />
+</template>
+
+<script lang="ts">
+import { Component, Prop } from 'vue-property-decorator'
+import { mixins } from 'vue-class-component'
+import echarts from 'echarts'
+import ResizeMixin from '@/components/Charts/mixins/resize'
+
+const animationDuration = 6000
+
+@Component
+export default class BarChart extends mixins(ResizeMixin) {
+  @Prop({ default: 'chart' }) private className!: string
+  @Prop({ default: '100%' }) private width!: string
+  @Prop({ default: '300px' }) private height!: string
+
+  mounted() {
+    this.initChart()
+  }
+
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  }
+
+  private initChart() {
+    this.chart = echarts.init(this.$el as HTMLDivElement, 'macarons')
+    this.chart.setOption({
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: { // 坐标轴指示器，坐标轴触发有效
+          type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+        }
+      },
+      grid: {
+        top: 10,
+        left: '2%',
+        right: '2%',
+        bottom: '3%',
+        containLabel: true
+      },
+      xAxis: [{
+        type: 'category',
+        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+        axisTick: {
+          alignWithLabel: true
+        }
+      }],
+      yAxis: [{
+        type: 'value',
+        axisTick: {
+          show: false
+        }
+      }],
+      series: [{
+        name: 'pageA',
+        type: 'bar',
+        stack: 'vistors',
+        barWidth: '60%',
+        data: [79, 52, 200, 334, 390, 330, 220],
+        animationDuration
+      }, {
+        name: 'pageB',
+        type: 'bar',
+        stack: 'vistors',
+        barWidth: '60%',
+        data: [80, 52, 200, 334, 390, 330, 220],
+        animationDuration
+      }, {
+        name: 'pageC',
+        type: 'bar',
+        stack: 'vistors',
+        barWidth: '60%',
+        data: [30, 52, 200, 334, 390, 330, 220],
+        animationDuration
+      }]
+    })
+  }
+}
+</script>
diff --git a/src/views/dashboard/admin/components/BoxCard.vue b/src/views/dashboard/admin/components/BoxCard.vue
new file mode 100644
index 000000000..896afe788
--- /dev/null
+++ b/src/views/dashboard/admin/components/BoxCard.vue
@@ -0,0 +1,150 @@
+<template>
+  <el-card
+    class="box-card-component"
+    style="margin-left:8px;"
+  >
+    <div
+      slot="header"
+      class="box-card-header"
+    >
+      <img src="https://wpimg.wallstcn.com/e7d23d71-cf19-4b90-a1cc-f56af8c0903d.png">
+    </div>
+    <div style="position:relative;">
+      <pan-thumb
+        :image="avatar"
+        class="panThumb"
+      />
+      <mallki
+        class="mallki-text"
+        text="vue-typescript-admin"
+      />
+      <div
+        style="padding-top:35px;"
+        class="progress-item"
+      >
+        <span>Vue</span>
+        <el-progress :percentage="68" />
+      </div>
+      <div class="progress-item">
+        <span>Typescript</span>
+        <el-progress :percentage="20" />
+      </div>
+      <div class="progress-item">
+        <span>Css</span>
+        <el-progress :percentage="12" />
+      </div>
+      <div class="progress-item">
+        <span>ESLint</span>
+        <el-progress
+          :percentage="100"
+          status="success"
+        />
+      </div>
+    </div>
+  </el-card>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator'
+import { UserModule } from '@/store/modules/user'
+import PanThumb from '@/components/PanThumb/index.vue'
+import Mallki from '@/components/TextHoverEffect/Mallki.vue'
+
+@Component({
+  components: {
+    PanThumb,
+    Mallki
+  },
+  filters: {
+    statusFilter: (status: string) => {
+      const statusMap: { [key: string]: string } = {
+        success: 'success',
+        pending: 'danger'
+      }
+      return statusMap[status]
+    }
+  }
+})
+export default class BoxCard extends Vue {
+  private statisticsData = {
+    article_count: 1024,
+    pageviews_count: 1024
+  }
+
+  get name() {
+    return UserModule.name
+  }
+
+  get avatar() {
+    return UserModule.avatar
+  }
+
+  get roles() {
+    return UserModule.roles
+  }
+}
+</script>
+
+<style lang="scss">
+.box-card-component {
+  .el-card__header {
+    padding: 0px!important;
+  }
+}
+</style>
+
+<style lang="scss" scoped>
+.box-card-component {
+  .box-card-header {
+    position: relative;
+    height: 220px;
+
+    img {
+      width: 100%;
+      height: 100%;
+      transition: all 0.2s linear;
+
+      &:hover {
+        transform: scale(1.1, 1.1);
+        filter: contrast(130%);
+      }
+    }
+  }
+
+  .mallki-text {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    font-size: 20px;
+    font-weight: bold;
+  }
+
+  .panThumb {
+    z-index: 100;
+    height: 70px!important;
+    width: 70px!important;
+    position: absolute!important;
+    top: -45px;
+    left: 0px;
+    border: 5px solid #ffffff;
+    background-color: #fff;
+    margin: auto;
+    box-shadow: none!important;
+
+    .pan-info {
+      box-shadow: none!important;
+    }
+  }
+
+  .progress-item {
+    margin-bottom: 10px;
+    font-size: 14px;
+  }
+
+  @media only screen and (max-width: 1510px){
+    .mallki-text{
+      display: none;
+    }
+  }
+}
+</style>
diff --git a/src/views/dashboard/admin/components/LineChart.vue b/src/views/dashboard/admin/components/LineChart.vue
new file mode 100644
index 000000000..ebbc5046f
--- /dev/null
+++ b/src/views/dashboard/admin/components/LineChart.vue
@@ -0,0 +1,116 @@
+<template>
+  <div
+    :class="className"
+    :style="{height: height,width: width}"
+  />
+</template>
+
+<script lang="ts">
+import { Component, Prop, Watch } from 'vue-property-decorator'
+import { mixins } from 'vue-class-component'
+import echarts from 'echarts'
+import ResizeMixin from '@/components/Charts/mixins/resize'
+
+@Component
+export default class LineChart extends mixins(ResizeMixin) {
+  @Prop({ default: 'chart' }) private className!: string
+  @Prop({ default: '100%' }) private width!: string
+  @Prop({ default: '350px' }) private height!: string
+  @Prop({ required: true }) private chartData!: object
+
+  @Watch('chartData', { deep: true })
+  private onChartDataChange(value: any) {
+    this.setOptions(value)
+  }
+
+  mounted() {
+    this.initChart()
+  }
+
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  }
+
+  private initChart() {
+    this.chart = echarts.init(this.$el as HTMLDivElement, 'macarons')
+    this.setOptions(this.chartData)
+  }
+
+  private setOptions({ expectedData, actualData }: any) {
+    if (this.chart) {
+      this.chart.setOption({
+        xAxis: {
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+          boundaryGap: false,
+          axisTick: {
+            show: false
+          }
+        },
+        grid: {
+          left: 10,
+          right: 10,
+          bottom: 20,
+          top: 30,
+          containLabel: true
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross'
+          },
+          padding: 8
+        },
+        yAxis: {
+          axisTick: {
+            show: false
+          }
+        },
+        legend: {
+          data: ['expected', 'actual']
+        },
+        series: [{
+          name: 'expected',
+          itemStyle: {
+            normal: {
+              color: '#FF005A',
+              lineStyle: {
+                color: '#FF005A',
+                width: 2
+              }
+            }
+          },
+          smooth: true,
+          type: 'line',
+          data: expectedData,
+          animationDuration: 2800,
+          animationEasing: 'cubicInOut'
+        },
+        {
+          name: 'actual',
+          smooth: true,
+          type: 'line',
+          itemStyle: {
+            normal: {
+              color: '#3888fa',
+              lineStyle: {
+                color: '#3888fa',
+                width: 2
+              },
+              areaStyle: {
+                color: '#f3f8ff'
+              }
+            }
+          },
+          data: actualData,
+          animationDuration: 2800,
+          animationEasing: 'quadraticOut'
+        }]
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/dashboard/admin/components/PanelGroup.vue b/src/views/dashboard/admin/components/PanelGroup.vue
new file mode 100644
index 000000000..e426e3cd6
--- /dev/null
+++ b/src/views/dashboard/admin/components/PanelGroup.vue
@@ -0,0 +1,230 @@
+<template>
+  <el-row
+    :gutter="40"
+    class="panel-group"
+  >
+    <el-col
+      :xs="12"
+      :sm="12"
+      :lg="6"
+      class="card-panel-col"
+    >
+      <div
+        class="card-panel"
+        @click="handleSetLineChartData('newVisitis')"
+      >
+        <div class="card-panel-icon-wrapper icon-people">
+          <svg-icon
+            name="peoples"
+            class="card-panel-icon"
+          />
+        </div>
+        <div class="card-panel-description">
+          <div class="card-panel-text">
+            New Visits
+          </div>
+          <count-to
+            :start-val="0"
+            :end-val="102400"
+            :duration="2600"
+            class="card-panel-num"
+          />
+        </div>
+      </div>
+    </el-col>
+    <el-col
+      :xs="12"
+      :sm="12"
+      :lg="6"
+      class="card-panel-col"
+    >
+      <div
+        class="card-panel"
+        @click="handleSetLineChartData('messages')"
+      >
+        <div class="card-panel-icon-wrapper icon-message">
+          <svg-icon
+            name="message"
+            class="card-panel-icon"
+          />
+        </div>
+        <div class="card-panel-description">
+          <div class="card-panel-text">
+            Messages
+          </div>
+          <count-to
+            :start-val="0"
+            :end-val="81212"
+            :duration="3000"
+            class="card-panel-num"
+          />
+        </div>
+      </div>
+    </el-col>
+    <el-col
+      :xs="12"
+      :sm="12"
+      :lg="6"
+      class="card-panel-col"
+    >
+      <div
+        class="card-panel"
+        @click="handleSetLineChartData('purchases')"
+      >
+        <div class="card-panel-icon-wrapper icon-money">
+          <svg-icon
+            name="money"
+            class="card-panel-icon"
+          />
+        </div>
+        <div class="card-panel-description">
+          <div class="card-panel-text">
+            Purchases
+          </div>
+          <count-to
+            :start-val="0"
+            :end-val="9280"
+            :duration="3200"
+            class="card-panel-num"
+          />
+        </div>
+      </div>
+    </el-col>
+    <el-col
+      :xs="12"
+      :sm="12"
+      :lg="6"
+      class="card-panel-col"
+    >
+      <div
+        class="card-panel"
+        @click="handleSetLineChartData('shoppings')"
+      >
+        <div class="card-panel-icon-wrapper icon-shopping">
+          <svg-icon
+            name="shopping"
+            class="card-panel-icon"
+          />
+        </div>
+        <div class="card-panel-description">
+          <div class="card-panel-text">
+            Shoppings
+          </div>
+          <count-to
+            :start-val="0"
+            :end-val="13600"
+            :duration="3600"
+            class="card-panel-num"
+          />
+        </div>
+      </div>
+    </el-col>
+  </el-row>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator'
+import CountTo from 'vue-count-to'
+
+@Component({
+  components: {
+    CountTo
+  }
+})
+export default class PanelGroup extends Vue {
+  private handleSetLineChartData(type: string) {
+    this.$emit('handleSetLineChartData', type)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.panel-group {
+  margin-top: 18px;
+
+  .card-panel-col {
+    margin-bottom: 32px;
+  }
+
+  .card-panel {
+    height: 108px;
+    cursor: pointer;
+    font-size: 12px;
+    position: relative;
+    overflow: hidden;
+    color: #666;
+    background: #fff;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, .05);
+
+    &:hover {
+      .card-panel-icon-wrapper {
+        color: #fff;
+      }
+
+      .icon-people {
+         background: #40c9c6;
+      }
+
+      .icon-message {
+        background: #36a3f7;
+      }
+
+      .icon-money {
+        background: #f4516c;
+      }
+
+      .icon-shopping {
+        background: #34bfa3
+      }
+    }
+
+    .icon-people {
+      color: #40c9c6;
+    }
+
+    .icon-message {
+      color: #36a3f7;
+    }
+
+    .icon-money {
+      color: #f4516c;
+    }
+
+    .icon-shopping {
+      color: #34bfa3
+    }
+
+    .card-panel-icon-wrapper {
+      float: left;
+      margin: 14px 0 0 14px;
+      padding: 16px;
+      transition: all 0.38s ease-out;
+      border-radius: 6px;
+    }
+
+    .card-panel-icon {
+      float: left;
+      font-size: 48px;
+    }
+
+    .card-panel-description {
+      float: right;
+      font-weight: bold;
+      margin: 26px;
+      margin-left: 0px;
+
+      .card-panel-text {
+        line-height: 18px;
+        color: rgba(0, 0, 0, 0.45);
+        font-size: 16px;
+        margin-bottom: 12px;
+      }
+
+      .card-panel-num {
+        font-size: 20px;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/dashboard/admin/components/PieChart.vue b/src/views/dashboard/admin/components/PieChart.vue
new file mode 100644
index 000000000..b7ec91f55
--- /dev/null
+++ b/src/views/dashboard/admin/components/PieChart.vue
@@ -0,0 +1,65 @@
+<template>
+  <div
+    :class="className"
+    :style="{height: height,width: width}"
+  />
+</template>
+
+<script lang="ts">
+import { Component, Prop } from 'vue-property-decorator'
+import { mixins } from 'vue-class-component'
+import echarts from 'echarts'
+import ResizeMixin from '@/components/Charts/mixins/resize'
+
+@Component
+export default class PieChart extends mixins(ResizeMixin) {
+  @Prop({ default: 'chart' }) private className!: string
+  @Prop({ default: '100%' }) private width!: string
+  @Prop({ default: '300px' }) private height!: string
+
+  mounted() {
+    this.initChart()
+  }
+
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  }
+
+  private initChart() {
+    this.chart = echarts.init(this.$el as HTMLDivElement, 'macarons')
+    this.chart.setOption({
+      tooltip: {
+        trigger: 'item',
+        formatter: '{a} <br/>{b} : {c} ({d}%)'
+      },
+      legend: {
+        left: 'center',
+        bottom: '10',
+        data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts']
+      },
+      series: [
+        {
+          name: 'WEEKLY WRITE ARTICLES',
+          type: 'pie',
+          roseType: 'radius',
+          radius: [15, 95],
+          center: ['50%', '38%'],
+          data: [
+            { value: 320, name: 'Industries' },
+            { value: 240, name: 'Technology' },
+            { value: 149, name: 'Forex' },
+            { value: 100, name: 'Gold' },
+            { value: 59, name: 'Forecasts' }
+          ],
+          animationEasing: 'cubicInOut',
+          animationDuration: 2600
+        }
+      ]
+    })
+  }
+}
+</script>
diff --git a/src/views/dashboard/admin/components/RaddarChart.vue b/src/views/dashboard/admin/components/RaddarChart.vue
new file mode 100644
index 000000000..d0e64c25c
--- /dev/null
+++ b/src/views/dashboard/admin/components/RaddarChart.vue
@@ -0,0 +1,102 @@
+<template>
+  <div
+    :class="className"
+    :style="{height: height,width: width}"
+  />
+</template>
+
+<script lang="ts">
+import { Component, Prop } from 'vue-property-decorator'
+import { mixins } from 'vue-class-component'
+import echarts from 'echarts'
+import ResizeMixin from '@/components/Charts/mixins/resize'
+
+const animationDuration = 3000
+
+@Component
+export default class RaddarChart extends mixins(ResizeMixin) {
+  @Prop({ default: 'chart' }) private className!: string
+  @Prop({ default: '100%' }) private width!: string
+  @Prop({ default: '300px' }) private height!: string
+
+  mounted() {
+    this.initChart()
+  }
+
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  }
+
+  private initChart() {
+    this.chart = echarts.init(this.$el as HTMLDivElement, 'macarons')
+    this.chart.setOption({
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: { // 坐标轴指示器，坐标轴触发有效
+          type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+        }
+      },
+      radar: {
+        radius: '66%',
+        center: ['50%', '42%'],
+        splitNumber: 8,
+        splitArea: {
+          areaStyle: {
+            color: 'rgba(127,95,132,.3)',
+            opacity: 1,
+            shadowBlur: 45,
+            shadowColor: 'rgba(0,0,0,.5)',
+            shadowOffsetX: 0,
+            shadowOffsetY: 15
+          }
+        },
+        indicator: [
+          { name: 'Sales', max: 10000 },
+          { name: 'Administration', max: 20000 },
+          { name: 'Information Techology', max: 20000 },
+          { name: 'Customer Support', max: 20000 },
+          { name: 'Development', max: 20000 },
+          { name: 'Marketing', max: 20000 }
+        ]
+      },
+      legend: {
+        left: 'center',
+        bottom: '10',
+        data: ['Allocated Budget', 'Expected Spending', 'Actual Spending']
+      },
+      series: [{
+        type: 'radar',
+        symbolSize: 0,
+        areaStyle: {
+          normal: {
+            shadowBlur: 13,
+            shadowColor: 'rgba(0,0,0,.2)',
+            shadowOffsetX: 0,
+            shadowOffsetY: 10,
+            opacity: 1
+          }
+        },
+        data: [
+          {
+            value: [5000, 7000, 12000, 11000, 15000, 14000],
+            name: 'Allocated Budget'
+          },
+          {
+            value: [4000, 9000, 15000, 15000, 13000, 11000],
+            name: 'Expected Spending'
+          },
+          {
+            value: [5500, 11000, 12000, 15000, 12000, 12000],
+            name: 'Actual Spending'
+          }
+        ],
+        animationDuration: animationDuration
+      }]
+    })
+  }
+}
+</script>
diff --git a/src/views/dashboard/admin/components/TodoList/Todo.vue b/src/views/dashboard/admin/components/TodoList/Todo.vue
new file mode 100644
index 000000000..5237d5da6
--- /dev/null
+++ b/src/views/dashboard/admin/components/TodoList/Todo.vue
@@ -0,0 +1,91 @@
+<template>
+  <li
+    :class="{completed: todo.done, editing: editing}"
+    class="todo"
+  >
+    <div class="view">
+      <input
+        :checked="todo.done"
+        class="toggle"
+        type="checkbox"
+        @change="toggleTodo( todo)"
+      >
+      <label
+        @dblclick="editing = true"
+        v-text="todo.text"
+      />
+      <button
+        class="destroy"
+        @click="deleteTodo( todo )"
+      />
+    </div>
+    <input
+      v-show="editing"
+      v-focus="editing"
+      :value="todo.text"
+      class="edit"
+      @keyup.enter="doneEdit"
+      @keyup.esc="cancelEdit"
+      @blur="doneEdit"
+    >
+  </li>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator'
+
+export interface ITodo {
+  text: string
+  done: boolean
+}
+
+@Component({
+  directives: {
+    focus: (el, { value }, { context }) => {
+      if (value) {
+        if (context) {
+          context.$nextTick(() => {
+            el.focus()
+          })
+        }
+      }
+    }
+  }
+})
+export default class Todo extends Vue {
+  @Prop({ default: { text: '', done: false } }) todo!: ITodo
+
+  private editing = false
+
+  private deleteTodo(todo: ITodo) {
+    this.$emit('deleteTodo', todo)
+  }
+
+  private editTodo({ todo, value }: { todo: ITodo, value: string }) {
+    this.$emit('editTodo', { todo, value })
+  }
+
+  private toggleTodo(todo: ITodo) {
+    this.$emit('toggleTodo', todo)
+  }
+
+  private doneEdit(e: KeyboardEvent) {
+    const value = (e as any).target.value.trim()
+    const { todo } = this
+    if (!value) {
+      this.deleteTodo(todo)
+    } else if (this.editing) {
+      this.editTodo({
+        todo,
+        value
+      })
+      this.editing = false
+    }
+  }
+
+  private cancelEdit(e: KeyboardEvent) {
+    (e as any).target.value = this.todo.text
+    this.editing = false
+  }
+}
+</script>
diff --git a/src/views/dashboard/admin/components/TodoList/index.vue b/src/views/dashboard/admin/components/TodoList/index.vue
new file mode 100644
index 000000000..540d0e2ea
--- /dev/null
+++ b/src/views/dashboard/admin/components/TodoList/index.vue
@@ -0,0 +1,531 @@
+<template>
+  <section class="todoapp">
+    <!-- header -->
+    <header class="header">
+      <input
+        class="new-todo"
+        autocomplete="off"
+        placeholder="Todo List"
+        @keyup.enter="addTodo"
+      >
+    </header>
+    <!-- main section -->
+    <section
+      v-show="todos.length"
+      class="main"
+    >
+      <input
+        id="toggle-all"
+        :checked="allChecked"
+        class="toggle-all"
+        type="checkbox"
+        @change="toggleAll({done: !allChecked})"
+      >
+      <label for="toggle-all" />
+      <ul class="todo-list">
+        <todo
+          v-for="(todo, index) in filteredTodos"
+          :key="index"
+          :todo="todo"
+          @toggleTodo="toggleTodo"
+          @editTodo="editTodo"
+          @deleteTodo="deleteTodo"
+        />
+      </ul>
+    </section>
+    <!-- footer -->
+    <footer
+      v-show="todos.length"
+      class="footer"
+    >
+      <span class="todo-count">
+        <strong>{{ remaining }}</strong>
+        {{ remaining | pluralize('item') }} left
+      </span>
+      <ul class="filters">
+        <li
+          v-for="(val, key) in filters"
+          :key="key"
+        >
+          <a
+            :class="{selected: visibility === key}"
+            @click.prevent="visibility = key"
+          >{{ key | capitalize }}</a>
+        </li>
+      </ul>
+      <!-- <button class="clear-completed" v-show="todos.length > remaining" @click="clearCompleted">
+        Clear completed
+      </button> -->
+    </footer>
+  </section>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+import Todo, { ITodo } from './Todo.vue'
+
+const STORAGE_KEY = 'todos'
+const filters: { [ key: string ]: Function } = {
+  all: (todos: ITodo[]) => todos,
+  active: (todos: ITodo[]) => todos.filter(todo => !todo.done),
+  completed: (todos: ITodo[]) => todos.filter(todo => todo.done)
+}
+const defalutList = [
+  { text: 'star this repository', done: false },
+  { text: 'fork this repository', done: false },
+  { text: 'follow author', done: false },
+  { text: 'vue-element-admin', done: true },
+  { text: 'vue', done: true },
+  { text: 'element-ui', done: true },
+  { text: 'axios', done: true },
+  { text: 'webpack', done: true }
+]
+
+@Component({
+  components: {
+    Todo
+  },
+  filters: {
+    pluralize: (n: number, w: string) => n === 1 ? w : w + 's',
+    capitalize: (s: string) => s.charAt(0).toUpperCase() + s.slice(1)
+  }
+})
+export default class TodoList extends Vue {
+  private visibility = 'all'
+  private todos = defalutList
+
+  get allChecked() {
+    return this.todos.every(todo => todo.done)
+  }
+
+  get filters() {
+    return filters
+  }
+
+  get filteredTodos() {
+    return filters[this.visibility](this.todos)
+  }
+
+  get remaining() {
+    return this.todos.filter(todo => !todo.done).length
+  }
+
+  private setLocalStorage() {
+    window.localStorage.setItem(STORAGE_KEY, JSON.stringify(this.todos))
+  }
+
+  private addTodo(e: KeyboardEvent) {
+    const text = (e as any).target.value
+    if (text.trim()) {
+      this.todos.push({
+        text,
+        done: false
+      })
+      this.setLocalStorage()
+    }
+    (e as any).target.value = ''
+  }
+
+  private toggleTodo(todo: ITodo) {
+    todo.done = !todo.done
+    this.setLocalStorage()
+  }
+
+  private deleteTodo(todo: ITodo) {
+    this.todos.splice(this.todos.indexOf(todo), 1)
+    this.setLocalStorage()
+  }
+
+  private editTodo({ todo, value }: { todo: ITodo, value: string }) {
+    todo.text = value
+    this.setLocalStorage()
+  }
+
+  private clearCompleted() {
+    this.todos = this.todos.filter(todo => !todo.done)
+    this.setLocalStorage()
+  }
+
+  private toggleAll({ done }: { done: boolean }) {
+    this.todos.forEach(todo => {
+      todo.done = done
+      this.setLocalStorage()
+    })
+  }
+}
+</script>
+
+<style lang="scss" scope>
+.todoapp {
+  font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  line-height: 1.4em;
+  color: #4d4d4d;
+  min-width: 230px;
+  max-width: 550px;
+  margin: 0 auto ;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-weight: 300;
+  background: #fff;
+  z-index: 1;
+  position: relative;
+
+  button {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: none;
+    font-size: 100%;
+    vertical-align: baseline;
+    font-family: inherit;
+    font-weight: inherit;
+    color: inherit;
+    -webkit-appearance: none;
+    appearance: none;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  :focus {
+    outline: 0;
+  }
+
+  .hidden {
+    display: none;
+  }
+
+  .todoapp {
+    background: #fff;
+    margin: 130px 0 40px 0;
+    position: relative;
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
+  }
+
+  .todoapp input::-webkit-input-placeholder {
+    font-style: italic;
+    font-weight: 300;
+    color: #e6e6e6;
+  }
+
+  .todoapp input::-moz-placeholder {
+    font-style: italic;
+    font-weight: 300;
+    color: #e6e6e6;
+  }
+
+  .todoapp input::input-placeholder {
+    font-style: italic;
+    font-weight: 300;
+    color: #e6e6e6;
+  }
+
+  .todoapp h1 {
+    position: absolute;
+    top: -155px;
+    width: 100%;
+    font-size: 100px;
+    font-weight: 100;
+    text-align: center;
+    color: rgba(175, 47, 47, 0.15);
+    -webkit-text-rendering: optimizeLegibility;
+    -moz-text-rendering: optimizeLegibility;
+    text-rendering: optimizeLegibility;
+  }
+
+  .new-todo,
+  .edit {
+    position: relative;
+    margin: 0;
+    width: 100%;
+    font-size: 18px;
+    font-family: inherit;
+    font-weight: inherit;
+    line-height: 1.4em;
+    border: 0;
+    color: inherit;
+    padding: 6px;
+    border: 1px solid #999;
+    box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
+    box-sizing: border-box;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  .new-todo {
+    padding: 10px 16px 16px 60px;
+    border: none;
+    background: rgba(0, 0, 0, 0.003);
+    box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
+  }
+
+  .main {
+    position: relative;
+    z-index: 2;
+    border-top: 1px solid #e6e6e6;
+  }
+
+  .toggle-all {
+    text-align: center;
+    border: none;
+    /* Mobile Safari */
+    opacity: 0;
+    position: absolute;
+  }
+
+  .toggle-all+label {
+    width: 60px;
+    height: 34px;
+    font-size: 0;
+    position: absolute;
+    top: -52px;
+    left: -13px;
+    -webkit-transform: rotate(90deg);
+    transform: rotate(90deg);
+  }
+
+  .toggle-all+label:before {
+    content: '❯';
+    font-size: 22px;
+    color: #e6e6e6;
+    padding: 10px 27px 10px 27px;
+  }
+
+  .toggle-all:checked+label:before {
+    color: #737373;
+  }
+
+  .todo-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .todo-list li {
+    position: relative;
+    font-size: 24px;
+    border-bottom: 1px solid #ededed;
+  }
+
+  .todo-list li:last-child {
+    border-bottom: none;
+  }
+
+  .todo-list li.editing {
+    border-bottom: none;
+    padding: 0;
+  }
+
+  .todo-list li.editing .edit {
+    display: block;
+    width: 506px;
+    padding: 12px 16px;
+    margin: 0 0 0 43px;
+  }
+
+  .todo-list li.editing .view {
+    display: none;
+  }
+
+  .todo-list li .toggle {
+    text-align: center;
+    width: 40px;
+    /* auto, since non-WebKit browsers doesn't support input styling */
+    height: auto;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    margin: auto 0;
+    border: none;
+    /* Mobile Safari */
+    -webkit-appearance: none;
+    appearance: none;
+  }
+
+  .todo-list li .toggle {
+    opacity: 0;
+  }
+
+  .todo-list li .toggle+label {
+    /*
+    Firefox requires `#` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433
+    IE and Edge requires *everything* to be escaped to render, so we do that instead of just the `#` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/
+  */
+    background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E');
+    background-repeat: no-repeat;
+    background-position: center left;
+    background-size: 36px;
+  }
+
+  .todo-list li .toggle:checked+label {
+    background-size: 36px;
+    background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E');
+  }
+
+  .todo-list li label {
+    word-break: break-all;
+    padding: 15px 15px 15px 50px;
+    display: block;
+    line-height: 1.0;
+        font-size: 14px;
+    transition: color 0.4s;
+  }
+
+  .todo-list li.completed label {
+    color: #d9d9d9;
+    text-decoration: line-through;
+  }
+
+  .todo-list li .destroy {
+    display: none;
+    position: absolute;
+    top: 0;
+    right: 10px;
+    bottom: 0;
+    width: 40px;
+    height: 40px;
+    margin: auto 0;
+    font-size: 30px;
+    color: #cc9a9a;
+    transition: color 0.2s ease-out;
+    cursor: pointer;
+  }
+
+  .todo-list li .destroy:hover {
+    color: #af5b5e;
+  }
+
+  .todo-list li .destroy:after {
+    content: '×';
+  }
+
+  .todo-list li:hover .destroy {
+    display: block;
+  }
+
+  .todo-list li .edit {
+    display: none;
+  }
+
+  .todo-list li.editing:last-child {
+    margin-bottom: -1px;
+  }
+
+  .footer {
+    color: #777;
+    position: relative;
+    padding: 10px 15px;
+    height: 40px;
+    text-align: center;
+    border-top: 1px solid #e6e6e6;
+  }
+
+  .footer:before {
+    content: '';
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    height: 40px;
+    overflow: hidden;
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6, 0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px #f6f6f6, 0 17px 2px -6px rgba(0, 0, 0, 0.2);
+  }
+
+  .todo-count {
+    float: left;
+    text-align: left;
+  }
+
+  .todo-count strong {
+    font-weight: 300;
+  }
+
+  .filters {
+    margin: 0;
+    padding: 0;
+    position: relative;
+    z-index: 1;
+    list-style: none;
+  }
+
+  .filters li {
+    display: inline;
+  }
+
+  .filters li a {
+    color: inherit;
+    font-size: 12px;
+    padding: 3px 7px;
+    text-decoration: none;
+    border: 1px solid transparent;
+    border-radius: 3px;
+  }
+
+  .filters li a:hover {
+    border-color: rgba(175, 47, 47, 0.1);
+  }
+
+  .filters li a.selected {
+    border-color: rgba(175, 47, 47, 0.2);
+  }
+
+  .clear-completed,
+  html .clear-completed:active {
+    float: right;
+    position: relative;
+    line-height: 20px;
+    text-decoration: none;
+    cursor: pointer;
+  }
+
+  .clear-completed:hover {
+    text-decoration: underline;
+  }
+
+  .info {
+    margin: 65px auto 0;
+    color: #bfbfbf;
+    font-size: 10px;
+    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+    text-align: center;
+  }
+
+  .info p {
+    line-height: 1;
+  }
+
+  .info a {
+    color: inherit;
+    text-decoration: none;
+    font-weight: 400;
+  }
+
+  .info a:hover {
+    text-decoration: underline;
+  }
+
+  /*
+  Hack to remove background from Mobile Safari.
+  Can't use it globally since it destroys checkboxes in Firefox
+*/
+  @media screen and (-webkit-min-device-pixel-ratio:0) {
+    .toggle-all,
+    .todo-list li .toggle {
+      background: none;
+    }
+
+    .todo-list li .toggle {
+      height: 40px;
+    }
+  }
+
+  @media (max-width: 430px) {
+    .footer {
+      height: 50px;
+    }
+
+    .filters {
+      bottom: 10px;
+    }
+  }
+}
+</style>
diff --git a/src/views/dashboard/admin/components/TransactionTable.vue b/src/views/dashboard/admin/components/TransactionTable.vue
new file mode 100644
index 000000000..6a88b5bc2
--- /dev/null
+++ b/src/views/dashboard/admin/components/TransactionTable.vue
@@ -0,0 +1,70 @@
+<template>
+  <el-table
+    :data="list"
+    style="width: 100%;padding-top: 15px;"
+  >
+    <el-table-column
+      label="Order_No"
+      min-width="200"
+    >
+      <template slot-scope="scope">
+        {{ scope.row.order_no | orderNoFilter }}
+      </template>
+    </el-table-column>
+    <el-table-column
+      label="Price"
+      width="195"
+      align="center"
+    >
+      <template slot-scope="scope">
+        ¥{{ scope.row.price | toThousandFilter }}
+      </template>
+    </el-table-column>
+    <el-table-column
+      label="Status"
+      width="100"
+      align="center"
+    >
+      <template slot-scope="{row}">
+        <el-tag :type="row.status | statusFilter">
+          {{ row.status }}
+        </el-tag>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+import { transactionList } from '@/api/remote-search'
+
+@Component({
+  filters: {
+    statusFilter: (status: string) => {
+      const statusMap: { [key: string]: string } = {
+        success: 'success',
+        pending: 'danger'
+      }
+      return statusMap[status]
+    },
+    orderNoFilter: (str: string) => str.substring(0, 30),
+    // Input 10000 => Output "10,000"
+    toThousandFilter: (num: number) => {
+      return (+num || 0).toString().replace(/^-?\d+/g, m => m.replace(/(?=(?!\b)(\d{3})+$)/g, ','))
+    }
+  }
+})
+export default class TransactionTable extends Vue {
+  private list: any[] = []
+
+  created() {
+    this.fetchData()
+  }
+
+  private fetchData() {
+    transactionList({}).then(response => {
+      this.list = response.data.items.slice(0, 8)
+    })
+  }
+}
+</script>
diff --git a/src/views/dashboard/admin/index.vue b/src/views/dashboard/admin/index.vue
new file mode 100644
index 000000000..31225857b
--- /dev/null
+++ b/src/views/dashboard/admin/index.vue
@@ -0,0 +1,150 @@
+<template>
+  <div class="dashboard-editor-container">
+    <github-corner class="github-corner" />
+
+    <panel-group @handleSetLineChartData="handleSetLineChartData" />
+
+    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
+      <line-chart :chart-data="lineChartData" />
+    </el-row>
+
+    <el-row :gutter="32">
+      <el-col
+        :xs="24"
+        :sm="24"
+        :lg="8"
+      >
+        <div class="chart-wrapper">
+          <raddar-chart />
+        </div>
+      </el-col>
+      <el-col
+        :xs="24"
+        :sm="24"
+        :lg="8"
+      >
+        <div class="chart-wrapper">
+          <pie-chart />
+        </div>
+      </el-col>
+      <el-col
+        :xs="24"
+        :sm="24"
+        :lg="8"
+      >
+        <div class="chart-wrapper">
+          <bar-chart />
+        </div>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="8">
+      <el-col
+        :xs="{span: 24}"
+        :sm="{span: 24}"
+        :md="{span: 24}"
+        :lg="{span: 12}"
+        :xl="{span: 12}"
+        style="padding-right:8px;margin-bottom:30px;"
+      >
+        <transaction-table />
+      </el-col>
+      <el-col
+        :xs="{span: 24}"
+        :sm="{span: 12}"
+        :md="{span: 12}"
+        :lg="{span: 6}"
+        :xl="{span: 6}"
+        style="margin-bottom:30px;"
+      >
+        <todo-list />
+      </el-col>
+      <el-col
+        :xs="{span: 24}"
+        :sm="{span: 12}"
+        :md="{span: 12}"
+        :lg="{span: 6}"
+        :xl="{span: 6}"
+        style="margin-bottom:30px;"
+      >
+        <box-card />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+import { UserModule } from '@/store/modules/user'
+import 'echarts/theme/macarons.js' // Theme used in BarChart, LineChart, PieChart and RaddarChart
+import GithubCorner from '@/components/GithubCorner/index.vue'
+import BarChart from './components/BarChart.vue'
+import BoxCard from './components/BoxCard.vue'
+import LineChart from './components/LineChart.vue'
+import PanelGroup from './components/PanelGroup.vue'
+import PieChart from './components/PieChart.vue'
+import RaddarChart from './components/RaddarChart.vue'
+import TodoList from './components/TodoList/index.vue'
+import TransactionTable from './components/TransactionTable.vue'
+
+const lineChartData: { [type: string]: { expectedData: number[], actualData: number[] } } = {
+  newVisitis: {
+    expectedData: [100, 120, 161, 134, 105, 160, 165],
+    actualData: [120, 82, 91, 154, 162, 140, 145]
+  },
+  messages: {
+    expectedData: [200, 192, 120, 144, 160, 130, 140],
+    actualData: [180, 160, 151, 106, 145, 150, 130]
+  },
+  purchases: {
+    expectedData: [80, 100, 121, 104, 105, 90, 100],
+    actualData: [120, 90, 100, 138, 142, 130, 130]
+  },
+  shoppings: {
+    expectedData: [130, 140, 141, 142, 145, 150, 160],
+    actualData: [120, 82, 91, 154, 162, 140, 130]
+  }
+}
+
+@Component({
+  components: {
+    GithubCorner,
+    BarChart,
+    BoxCard,
+    LineChart,
+    PanelGroup,
+    PieChart,
+    RaddarChart,
+    TodoList,
+    TransactionTable
+  }
+})
+export default class DashboardAdmin extends Vue {
+  private lineChartData = lineChartData.newVisitis
+
+  private handleSetLineChartData(type: string) {
+    this.lineChartData = lineChartData[type]
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.dashboard-editor-container {
+  padding: 32px;
+  background-color: rgb(240, 242, 245);
+  position: relative;
+
+  .github-corner {
+    position: absolute;
+    top: 0px;
+    border: 0;
+    right: 0;
+  }
+
+  .chart-wrapper {
+    background: #fff;
+    padding: 16px 16px 0;
+    margin-bottom: 32px;
+  }
+}
+</style>
diff --git a/src/views/dashboard/editor/index.vue b/src/views/dashboard/editor/index.vue
new file mode 100644
index 000000000..53edde9ac
--- /dev/null
+++ b/src/views/dashboard/editor/index.vue
@@ -0,0 +1,93 @@
+<template>
+  <div class="dashboard-editor-container">
+    <div class=" clearfix">
+      <pan-thumb
+        :image="avatar"
+        style="float: left"
+      >
+        Your roles:
+        <span
+          v-for="item in roles"
+          :key="item"
+          class="info-roles"
+        >{{ item }}</span>
+      </pan-thumb>
+      <github-corner style="position: absolute; top: 0px; border: 0; right: 0;" />
+      <div class="info-container">
+        <span class="display_name">{{ name }}</span>
+        <span style="font-size:20px;padding-top:20px;display:inline-block;">Editor's Dashboard</span>
+      </div>
+    </div>
+    <div>
+      <img
+        :src="emptyGif"
+        class="emptyGif"
+      >
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+import { UserModule } from '@/store/modules/user'
+import PanThumb from '@/components/PanThumb/index.vue'
+import GithubCorner from '@/components/GithubCorner/index.vue'
+
+@Component({
+  components: {
+    PanThumb,
+    GithubCorner
+  }
+})
+export default class DashboardEditor extends Vue {
+  private emptyGif = 'https://wpimg.wallstcn.com/0e03b7da-db9e-4819-ba10-9016ddfdaed3'
+
+  get name() {
+    return UserModule.name
+  }
+
+  get avatar() {
+    return UserModule.avatar
+  }
+
+  get roles() {
+    return UserModule.roles
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.emptyGif {
+  display: block;
+  width: 45%;
+  margin: 0 auto;
+}
+
+.dashboard-editor-container {
+  background-color: #e3e3e3;
+  min-height: 100vh;
+  padding: 50px 60px 0px;
+
+  .info-roles {
+    font-size: 12px;
+    font-weight: 700;
+    color: #333;
+    display: block;
+  }
+
+  .info-container {
+    position: relative;
+    margin-left: 190px;
+    height: 150px;
+    line-height: 200px;
+
+    .display_name {
+      font-size: 48px;
+      line-height: 48px;
+      color: #212121;
+      position: absolute;
+      top: 25px;
+    }
+  }
+}
+</style>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 9a51b125b..4c8e0f714 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,42 +1,32 @@
 <template>
   <div class="dashboard-container">
-    <div class="dashboard-text">
-      name:{{ name }}
-    </div>
-    <div class="dashboard-text">
-      roles:<span
-        v-for="role in roles"
-        :key="role"
-      >{{ role }}</span>
-    </div>
+    <component :is="currentRole" />
   </div>
 </template>
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
 import { UserModule } from '@/store/modules/user'
+import AdminDashboard from './admin/index.vue'
+import EditorDashboard from './editor/index.vue'
 
-@Component
-export default class Dashboard extends Vue {
-  get name() {
-    return UserModule.name
+@Component({
+  components: {
+    AdminDashboard,
+    EditorDashboard
   }
+})
+export default class Dashboard extends Vue {
+  private currentRole = 'AdminDashboard'
 
   get roles() {
     return UserModule.roles
   }
-}
-</script>
 
-<style lang="scss" scoped>
-.dashboard {
-  &-container {
-    margin: 30px;
-  }
-
-  &-text {
-    font-size: 30px;
-    line-height: 46px;
+  created() {
+    if (!this.roles.includes('admin')) {
+      this.currentRole = 'EditorDashboard'
+    }
   }
 }
-</style>
+</script>
diff --git a/src/views/tab/components/TabPane.vue b/src/views/tab/components/TabPane.vue
index 6cd32a47f..2b33322fa 100644
--- a/src/views/tab/components/TabPane.vue
+++ b/src/views/tab/components/TabPane.vue
@@ -72,7 +72,7 @@
     </el-table-column>
 
     <el-table-column
-      class-name="status-col"
+      class="status-col"
       label="Status"
       width="110"
     >
diff --git a/yarn.lock b/yarn.lock
index 5989d02c6..a10f7deb7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11510,6 +11510,11 @@ vue-cli-plugin-element@^1.0.1:
   resolved "https://registry.yarnpkg.com/vue-cli-plugin-element/-/vue-cli-plugin-element-1.0.1.tgz#34e58fb65b36cf59afaf14f503288e5e578b1554"
   integrity sha512-OJSOnJtn7f1v/8xX+MJae+RrE8WguhiiG9QTBx/MNOPXYsxqut6Ommo+ZD3raNc7eryhqdM2T/DlMfdvIKpCtw==
 
+vue-count-to@^1.0.13:
+  version "1.0.13"
+  resolved "https://registry.yarnpkg.com/vue-count-to/-/vue-count-to-1.0.13.tgz#3e7573ea6e64c2b2972f64e0a2ab2e23c7590ff3"
+  integrity sha512-6R4OVBVNtQTlcbXu6SJ8ENR35M2/CdWt3Jmv57jOUM+1ojiFmjVGvZPH8DfHpMDSA+ITs+EW5V6qthADxeyYOQ==
+
 vue-eslint-parser@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-2.0.3.tgz#c268c96c6d94cfe3d938a5f7593959b0ca3360d1"