diff --git a/.eslintrc.js b/.eslintrc.js
index c9775054..0a4f968c 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,198 +1,38 @@
 module.exports = {
   root: true,
-  parserOptions: {
-    parser: 'babel-eslint',
-    sourceType: 'module'
-  },
+
   env: {
     browser: true,
     node: true,
-    es6: true,
+    es6: true
+  },
+  parser: "vue-eslint-parser",
+  parserOptions: {
+    parser: "@typescript-eslint/parser",
+    sourceType: "module"
   },
-  extends: ['plugin:vue/recommended', 'eslint:recommended'],
 
-  // add your custom rules here
-  //it is base on https://github.com/vuejs/eslint-config-vue
+  plugins: [
+    "vue",
+    "@typescript-eslint",
+    "jsdoc",
+    "eslint-comments",
+    "prettier"
+  ],
+
   rules: {
-    "vue/max-attributes-per-line": [2, {
-      "singleline": 10,
-      "multiline": {
-        "max": 1,
-        "allowFirstLine": false
-      }
-    }],
-    "vue/singleline-html-element-content-newline": "off",
-    "vue/multiline-html-element-content-newline":"off",
-    "vue/name-property-casing": ["error", "PascalCase"],
-    "vue/no-v-html": "off",
-    'accessor-pairs': 2,
-    'arrow-spacing': [2, {
-      'before': true,
-      'after': true
-    }],
-    'block-spacing': [2, 'always'],
-    'brace-style': [2, '1tbs', {
-      'allowSingleLine': true
-    }],
-    'camelcase': [0, {
-      'properties': 'always'
-    }],
-    'comma-dangle': [2, 'never'],
-    'comma-spacing': [2, {
-      'before': false,
-      'after': true
-    }],
-    'comma-style': [2, 'last'],
-    'constructor-super': 2,
-    'curly': [2, 'multi-line'],
-    'dot-location': [2, 'property'],
-    'eol-last': 2,
-    'eqeqeq': ["error", "always", {"null": "ignore"}],
-    'generator-star-spacing': [2, {
-      'before': true,
-      'after': true
-    }],
-    'handle-callback-err': [2, '^(err|error)$'],
-    'indent': [2, 2, {
-      'SwitchCase': 1
-    }],
-    'jsx-quotes': [2, 'prefer-single'],
-    'key-spacing': [2, {
-      'beforeColon': false,
-      'afterColon': true
-    }],
-    'keyword-spacing': [2, {
-      'before': true,
-      'after': true
-    }],
-    'new-cap': [2, {
-      'newIsCap': true,
-      'capIsNew': false
-    }],
-    'new-parens': 2,
-    'no-array-constructor': 2,
-    'no-caller': 2,
-    'no-console': 'off',
-    'no-class-assign': 2,
-    'no-cond-assign': 2,
-    'no-const-assign': 2,
-    'no-control-regex': 0,
-    'no-delete-var': 2,
-    'no-dupe-args': 2,
-    'no-dupe-class-members': 2,
-    'no-dupe-keys': 2,
-    'no-duplicate-case': 2,
-    'no-empty-character-class': 2,
-    'no-empty-pattern': 2,
-    'no-eval': 2,
-    'no-ex-assign': 2,
-    'no-extend-native': 2,
-    'no-extra-bind': 2,
-    'no-extra-boolean-cast': 2,
-    'no-extra-parens': [2, 'functions'],
-    'no-fallthrough': 2,
-    'no-floating-decimal': 2,
-    'no-func-assign': 2,
-    'no-implied-eval': 2,
-    'no-inner-declarations': [2, 'functions'],
-    'no-invalid-regexp': 2,
-    'no-irregular-whitespace': 2,
-    'no-iterator': 2,
-    'no-label-var': 2,
-    'no-labels': [2, {
-      'allowLoop': false,
-      'allowSwitch': false
-    }],
-    'no-lone-blocks': 2,
-    'no-mixed-spaces-and-tabs': 2,
-    'no-multi-spaces': 2,
-    'no-multi-str': 2,
-    'no-multiple-empty-lines': [2, {
-      'max': 1
-    }],
-    'no-native-reassign': 2,
-    'no-negated-in-lhs': 2,
-    'no-new-object': 2,
-    'no-new-require': 2,
-    'no-new-symbol': 2,
-    'no-new-wrappers': 2,
-    'no-obj-calls': 2,
-    'no-octal': 2,
-    'no-octal-escape': 2,
-    'no-path-concat': 2,
-    'no-proto': 2,
-    'no-redeclare': 2,
-    'no-regex-spaces': 2,
-    'no-return-assign': [2, 'except-parens'],
-    'no-self-assign': 2,
-    'no-self-compare': 2,
-    'no-sequences': 2,
-    'no-shadow-restricted-names': 2,
-    'no-spaced-func': 2,
-    'no-sparse-arrays': 2,
-    'no-this-before-super': 2,
-    'no-throw-literal': 2,
-    'no-trailing-spaces': 2,
-    'no-undef': 2,
-    'no-undef-init': 2,
-    'no-unexpected-multiline': 2,
-    'no-unmodified-loop-condition': 2,
-    'no-unneeded-ternary': [2, {
-      'defaultAssignment': false
-    }],
-    'no-unreachable': 2,
-    'no-unsafe-finally': 2,
-    'no-unused-vars': [2, {
-      'vars': 'all',
-      'args': 'none'
-    }],
-    'no-useless-call': 2,
-    'no-useless-computed-key': 2,
-    'no-useless-constructor': 2,
-    'no-useless-escape': 0,
-    'no-whitespace-before-property': 2,
-    'no-with': 2,
-    'one-var': [2, {
-      'initialized': 'never'
-    }],
-    'operator-linebreak': [2, 'after', {
-      'overrides': {
-        '?': 'before',
-        ':': 'before'
-      }
-    }],
-    'padded-blocks': [2, 'never'],
-    'quotes': [2, 'single', {
-      'avoidEscape': true,
-      'allowTemplateLiterals': true
-    }],
-    'semi': [2, 'never'],
-    'semi-spacing': [2, {
-      'before': false,
-      'after': true
-    }],
-    'space-before-blocks': [2, 'always'],
-    'space-before-function-paren': [2, 'never'],
-    'space-in-parens': [2, 'never'],
-    'space-infix-ops': 2,
-    'space-unary-ops': [2, {
-      'words': true,
-      'nonwords': false
-    }],
-    'spaced-comment': [2, 'always', {
-      'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
-    }],
-    'template-curly-spacing': [2, 'never'],
-    'use-isnan': 2,
-    'valid-typeof': 2,
-    'wrap-iife': [2, 'any'],
-    'yield-star-spacing': [2, 'both'],
-    'yoda': [2, 'never'],
-    'prefer-const': 2,
-    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
-    'object-curly-spacing': [2, 'always', {
-      objectsInObjects: false
-    }],
-    'array-bracket-spacing': [2, 'never']
-  }
-}
+    "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
+    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
+
+    "prettier/prettier": ["error"]
+  },
+  extends: ["plugin:vue/essential", "prettier"] // activate vue related rules
+  // extends: [
+  //   "eslint:recommended",
+  //   "plugin:vue/recommended",
+  //   "plugin:vue/base",
+  //   "@vue/standard",
+  //   "@vue/typescript",
+  //   "plugin:prettier/recommended"
+  // ]
+};
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 00000000..71b5e4e2
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,6 @@
+.prettierrc.js
+.eslintrc.js
+jest.config.js
+vue.config.js
+postcss.config.js
+settings.js
diff --git a/.prettierrc.js b/.prettierrc.js
new file mode 100644
index 00000000..d3299328
--- /dev/null
+++ b/.prettierrc.js
@@ -0,0 +1,8 @@
+/** eslint-disable */
+module.exports =
+{
+
+  "endOfLine":"auto"
+
+
+}
diff --git a/mock/article.js b/mock/article.js
index bc236eb9..c22778c3 100644
--- a/mock/article.js
+++ b/mock/article.js
@@ -1,51 +1,64 @@
-import Mock from 'mockjs'
+import Mock from "mockjs";
 
-const List = []
-const count = 100
+const List = [];
+const count = 100;
 
-const baseContent = '<p>I am testing data, I am testing data.</p><p><img src="https://wpimg.wallstcn.com/4c69009c-0fd4-4153-b112-6cb53d1cf943"></p>'
-const image_uri = 'https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3'
+const baseContent =
+  '<p>I am testing data, I am testing data.</p><p><img src="https://wpimg.wallstcn.com/4c69009c-0fd4-4153-b112-6cb53d1cf943"></p>';
+const image_uri =
+  "https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3";
 
 for (let i = 0; i < count; i++) {
-  List.push(Mock.mock({
-    id: '@increment',
-    timestamp: +Mock.Random.date('T'),
-    author: '@first',
-    reviewer: '@first',
-    title: '@title(5, 10)',
-    content_short: 'mock data',
-    content: baseContent,
-    forecast: '@float(0, 100, 2, 2)',
-    importance: '@integer(1, 3)',
-    'type|1': ['CN', 'US', 'JP', 'EU'],
-    'status|1': ['published', 'draft', 'deleted'],
-    display_time: '@datetime',
-    comment_disabled: true,
-    pageviews: '@integer(300, 5000)',
-    image_uri,
-    platforms: ['a-platform']
-  }))
+  List.push(
+    Mock.mock({
+      id: "@increment",
+      timestamp: +Mock.Random.date("T"),
+      author: "@first",
+      reviewer: "@first",
+      title: "@title(5, 10)",
+      content_short: "mock data",
+      content: baseContent,
+      forecast: "@float(0, 100, 2, 2)",
+      importance: "@integer(1, 3)",
+      "type|1": ["CN", "US", "JP", "EU"],
+      "status|1": ["published", "draft", "deleted"],
+      display_time: "@datetime",
+      comment_disabled: true,
+      pageviews: "@integer(300, 5000)",
+      image_uri,
+      platforms: ["a-platform"]
+    })
+  );
 }
 
 export default [
   {
-    url: '/article/list',
-    type: 'get',
+    url: "/article/list",
+    type: "get",
     response: config => {
-      const { importance, type, title, page = 1, limit = 20, sort } = config.query
+      const {
+        importance,
+        type,
+        title,
+        page = 1,
+        limit = 20,
+        sort
+      } = config.query;
 
       let mockList = List.filter(item => {
-        if (importance && item.importance !== +importance) return false
-        if (type && item.type !== type) return false
-        if (title && item.title.indexOf(title) < 0) return false
-        return true
-      })
+        if (importance && item.importance !== +importance) return false;
+        if (type && item.type !== type) return false;
+        if (title && item.title.indexOf(title) < 0) return false;
+        return true;
+      });
 
-      if (sort === '-id') {
-        mockList = mockList.reverse()
+      if (sort === "-id") {
+        mockList = mockList.reverse();
       }
 
-      const pageList = mockList.filter((item, index) => index < limit * page && index >= limit * (page - 1))
+      const pageList = mockList.filter(
+        (item, index) => index < limit * page && index >= limit * (page - 1)
+      );
 
       return {
         code: 20000,
@@ -53,64 +66,63 @@ export default [
           total: mockList.length,
           items: pageList
         }
-      }
+      };
     }
   },
 
   {
-    url: '/article/detail',
-    type: 'get',
+    url: "/article/detail",
+    type: "get",
     response: config => {
-      const { id } = config.query
+      const { id } = config.query;
       for (const article of List) {
         if (article.id === +id) {
           return {
             code: 20000,
             data: article
-          }
+          };
         }
       }
     }
   },
 
   {
-    url: '/article/pv',
-    type: 'get',
+    url: "/article/pv",
+    type: "get",
     response: _ => {
       return {
         code: 20000,
         data: {
           pvData: [
-            { key: 'PC', pv: 1024 },
-            { key: 'mobile', pv: 1024 },
-            { key: 'ios', pv: 1024 },
-            { key: 'android', pv: 1024 }
+            { key: "PC", pv: 1024 },
+            { key: "mobile", pv: 1024 },
+            { key: "ios", pv: 1024 },
+            { key: "android", pv: 1024 }
           ]
         }
-      }
+      };
     }
   },
 
   {
-    url: '/article/create',
-    type: 'post',
+    url: "/article/create",
+    type: "post",
     response: _ => {
       return {
         code: 20000,
-        data: 'success'
-      }
+        data: "success"
+      };
     }
   },
 
   {
-    url: '/article/update',
-    type: 'post',
+    url: "/article/update",
+    type: "post",
     response: _ => {
       return {
         code: 20000,
-        data: 'success'
-      }
+        data: "success"
+      };
     }
   }
-]
-
+];
diff --git a/mock/index.js b/mock/index.js
index 6907e861..356e1115 100644
--- a/mock/index.js
+++ b/mock/index.js
@@ -1,17 +1,12 @@
-import Mock from 'mockjs'
-import { param2Obj } from '../src/utils'
+import Mock from "mockjs";
+import { param2Obj } from "../src/utils";
 
-import user from './user'
-import role from './role'
-import article from './article'
-import search from './remote-search'
+import user from "./user";
+import role from "./role";
+import article from "./article";
+import search from "./remote-search";
 
-const mocks = [
-  ...user,
-  ...role,
-  ...article,
-  ...search
-]
+const mocks = [...user, ...role, ...article, ...search];
 
 // for front mock
 // please use it cautiously, it will redefine XMLHttpRequest,
@@ -19,38 +14,42 @@ const mocks = [
 export function mockXHR() {
   // mock patch
   // https://github.com/nuysoft/Mock/issues/300
-  Mock.XHR.prototype.proxy_send = Mock.XHR.prototype.send
+  Mock.XHR.prototype.proxy_send = Mock.XHR.prototype.send;
   Mock.XHR.prototype.send = function() {
     if (this.custom.xhr) {
-      this.custom.xhr.withCredentials = this.withCredentials || false
+      this.custom.xhr.withCredentials = this.withCredentials || false;
 
       if (this.responseType) {
-        this.custom.xhr.responseType = this.responseType
+        this.custom.xhr.responseType = this.responseType;
       }
     }
-    this.proxy_send(...arguments)
-  }
+    this.proxy_send(...arguments);
+  };
 
   function XHR2ExpressReqWrap(respond) {
     return function(options) {
-      let result = null
+      let result = null;
       if (respond instanceof Function) {
-        const { body, type, url } = options
+        const { body, type, url } = options;
         // https://expressjs.com/en/4x/api.html#req
         result = respond({
           method: type,
           body: JSON.parse(body),
           query: param2Obj(url)
-        })
+        });
       } else {
-        result = respond
+        result = respond;
       }
-      return Mock.mock(result)
-    }
+      return Mock.mock(result);
+    };
   }
 
   for (const i of mocks) {
-    Mock.mock(new RegExp(i.url), i.type || 'get', XHR2ExpressReqWrap(i.response))
+    Mock.mock(
+      new RegExp(i.url),
+      i.type || "get",
+      XHR2ExpressReqWrap(i.response)
+    );
   }
 }
 
@@ -58,13 +57,15 @@ export function mockXHR() {
 const responseFake = (url, type, respond) => {
   return {
     url: new RegExp(`/mock${url}`),
-    type: type || 'get',
+    type: type || "get",
     response(req, res) {
-      res.json(Mock.mock(respond instanceof Function ? respond(req, res) : respond))
+      res.json(
+        Mock.mock(respond instanceof Function ? respond(req, res) : respond)
+      );
     }
-  }
-}
+  };
+};
 
 export default mocks.map(route => {
-  return responseFake(route.url, route.type, route.response)
-})
+  return responseFake(route.url, route.type, route.response);
+});
diff --git a/mock/mock-server.js b/mock/mock-server.js
index 4c4cb2af..d159f8da 100644
--- a/mock/mock-server.js
+++ b/mock/mock-server.js
@@ -1,68 +1,76 @@
-const chokidar = require('chokidar')
-const bodyParser = require('body-parser')
-const chalk = require('chalk')
-const path = require('path')
+const chokidar = require("chokidar");
+const bodyParser = require("body-parser");
+const chalk = require("chalk");
+const path = require("path");
 
-const mockDir = path.join(process.cwd(), 'mock')
+const mockDir = path.join(process.cwd(), "mock");
 
 function registerRoutes(app) {
-  let mockLastIndex
-  const { default: mocks } = require('./index.js')
+  let mockLastIndex;
+  const { default: mocks } = require("./index.js");
   for (const mock of mocks) {
-    app[mock.type](mock.url, mock.response)
-    mockLastIndex = app._router.stack.length
+    app[mock.type](mock.url, mock.response);
+    mockLastIndex = app._router.stack.length;
   }
-  const mockRoutesLength = Object.keys(mocks).length
+  const mockRoutesLength = Object.keys(mocks).length;
   return {
     mockRoutesLength: mockRoutesLength,
     mockStartIndex: mockLastIndex - mockRoutesLength
-  }
+  };
 }
 
 function unregisterRoutes() {
   Object.keys(require.cache).forEach(i => {
     if (i.includes(mockDir)) {
-      delete require.cache[require.resolve(i)]
+      delete require.cache[require.resolve(i)];
     }
-  })
+  });
 }
 
 module.exports = app => {
   // es6 polyfill
-  require('@babel/register')
+  require("@babel/register");
 
   // parse app.body
   // https://expressjs.com/en/4x/api.html#req.body
-  app.use(bodyParser.json())
-  app.use(bodyParser.urlencoded({
-    extended: true
-  }))
+  app.use(bodyParser.json());
+  app.use(
+    bodyParser.urlencoded({
+      extended: true
+    })
+  );
 
-  const mockRoutes = registerRoutes(app)
-  var mockRoutesLength = mockRoutes.mockRoutesLength
-  var mockStartIndex = mockRoutes.mockStartIndex
+  const mockRoutes = registerRoutes(app);
+  var mockRoutesLength = mockRoutes.mockRoutesLength;
+  var mockStartIndex = mockRoutes.mockStartIndex;
 
   // watch files, hot reload mock server
-  chokidar.watch(mockDir, {
-    ignored: /mock-server/,
-    ignoreInitial: true
-  }).on('all', (event, path) => {
-    if (event === 'change' || event === 'add') {
-      try {
-        // remove mock routes stack
-        app._router.stack.splice(mockStartIndex, mockRoutesLength)
+  chokidar
+    .watch(mockDir, {
+      ignored: /mock-server/,
+      ignoreInitial: true
+    })
+    .on("all", (event, path) => {
+      if (event === "change" || event === "add") {
+        try {
+          // remove mock routes stack
+          app._router.stack.splice(mockStartIndex, mockRoutesLength);
 
-        // clear routes cache
-        unregisterRoutes()
+          // clear routes cache
+          unregisterRoutes();
 
-        const mockRoutes = registerRoutes(app)
-        mockRoutesLength = mockRoutes.mockRoutesLength
-        mockStartIndex = mockRoutes.mockStartIndex
+          const mockRoutes = registerRoutes(app);
+          mockRoutesLength = mockRoutes.mockRoutesLength;
+          mockStartIndex = mockRoutes.mockStartIndex;
 
-        console.log(chalk.magentaBright(`\n > Mock Server hot reload success! changed  ${path}`))
-      } catch (error) {
-        console.log(chalk.redBright(error))
+          console.log(
+            chalk.magentaBright(
+              `\n > Mock Server hot reload success! changed  ${path}`
+            )
+          );
+        } catch (error) {
+          console.log(chalk.redBright(error));
+        }
       }
-    }
-  })
-}
+    });
+};
diff --git a/mock/remote-search.js b/mock/remote-search.js
index bb33c2f4..42cfeabe 100644
--- a/mock/remote-search.js
+++ b/mock/remote-search.js
@@ -1,51 +1,55 @@
-import Mock from 'mockjs'
+import Mock from "mockjs";
 
-const NameList = []
-const count = 100
+const NameList = [];
+const count = 100;
 
 for (let i = 0; i < count; i++) {
-  NameList.push(Mock.mock({
-    name: '@first'
-  }))
+  NameList.push(
+    Mock.mock({
+      name: "@first"
+    })
+  );
 }
-NameList.push({ name: 'mock-Pan' })
+NameList.push({ name: "mock-Pan" });
 
 export default [
   // username search
   {
-    url: '/search/user',
-    type: 'get',
+    url: "/search/user",
+    type: "get",
     response: config => {
-      const { name } = config.query
+      const { name } = config.query;
       const mockNameList = NameList.filter(item => {
-        const lowerCaseName = item.name.toLowerCase()
-        return !(name && lowerCaseName.indexOf(name.toLowerCase()) < 0)
-      })
+        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',
+    url: "/transaction/list",
+    type: "get",
     response: _ => {
       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']
-          }]
+          "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/mock/role/index.js b/mock/role/index.js
index 39148076..fb5ee55b 100644
--- a/mock/role/index.js
+++ b/mock/role/index.js
@@ -1,98 +1,101 @@
-import Mock from 'mockjs'
-import { deepClone } from '../../src/utils/index.js'
-import { asyncRoutes, constantRoutes } from './routes.js'
+import Mock from "mockjs";
+import { deepClone } from "../../src/utils/index.js";
+import { asyncRoutes, constantRoutes } from "./routes.js";
 
-const routes = deepClone([...constantRoutes, ...asyncRoutes])
+const routes = deepClone([...constantRoutes, ...asyncRoutes]);
 
 const roles = [
   {
-    key: 'admin',
-    name: 'admin',
-    description: 'Super Administrator. Have access to view all pages.',
+    key: "admin",
+    name: "admin",
+    description: "Super Administrator. Have access to view all pages.",
     routes: routes
   },
   {
-    key: 'editor',
-    name: 'editor',
-    description: 'Normal Editor. Can see all pages except permission page',
-    routes: routes.filter(i => i.path !== '/permission')// just a mock
+    key: "editor",
+    name: "editor",
+    description: "Normal Editor. Can see all pages except permission page",
+    routes: routes.filter(i => i.path !== "/permission") // just a mock
   },
   {
-    key: 'visitor',
-    name: 'visitor',
-    description: 'Just a visitor. Can only see the home page and the document page',
-    routes: [{
-      path: '',
-      redirect: 'dashboard',
-      children: [
-        {
-          path: 'dashboard',
-          name: 'Dashboard',
-          meta: { title: 'dashboard', icon: 'dashboard' }
-        }
-      ]
-    }]
+    key: "visitor",
+    name: "visitor",
+    description:
+      "Just a visitor. Can only see the home page and the document page",
+    routes: [
+      {
+        path: "",
+        redirect: "dashboard",
+        children: [
+          {
+            path: "dashboard",
+            name: "Dashboard",
+            meta: { title: "dashboard", icon: "dashboard" }
+          }
+        ]
+      }
+    ]
   }
-]
+];
 
 export default [
   // mock get all routes form server
   {
-    url: '/routes',
-    type: 'get',
+    url: "/routes",
+    type: "get",
     response: _ => {
       return {
         code: 20000,
         data: routes
-      }
+      };
     }
   },
 
   // mock get all roles form server
   {
-    url: '/roles',
-    type: 'get',
+    url: "/roles",
+    type: "get",
     response: _ => {
       return {
         code: 20000,
         data: roles
-      }
+      };
     }
   },
 
   // add role
   {
-    url: '/role',
-    type: 'post',
+    url: "/role",
+    type: "post",
     response: {
       code: 20000,
       data: {
-        key: Mock.mock('@integer(300, 5000)')
+        key: Mock.mock("@integer(300, 5000)")
       }
     }
   },
 
   // update role
   {
-    url: '/role/[A-Za-z0-9]',
-    type: 'put',
+    url: "/role/[A-Za-z0-9]",
+    type: "put",
     response: {
       code: 20000,
       data: {
-        status: 'success'
+        status: "success"
       }
     }
   },
 
   // delete role
   {
-    url: '/role/[A-Za-z0-9]',
-    type: 'delete',
+    url: "/role/[A-Za-z0-9]",
+    type: "delete",
     response: {
       code: 20000,
       data: {
-        status: 'success'
+        status: "success"
       }
     }
   }
-]
+];
diff --git a/mock/role/routes.js b/mock/role/routes.js
index d718919c..2eec336f 100644
--- a/mock/role/routes.js
+++ b/mock/role/routes.js
@@ -2,524 +2,524 @@
 
 export const constantRoutes = [
   {
-    path: '/redirect',
-    component: 'layout/Layout',
+    path: "/redirect",
+    component: "layout/Layout",
     hidden: true,
     children: [
       {
-        path: '/redirect/:path*',
-        component: 'views/redirect/index'
+        path: "/redirect/:path*",
+        component: "views/redirect/index"
       }
     ]
   },
   {
-    path: '/login',
-    component: 'views/login/index',
+    path: "/login",
+    component: "views/login/index",
     hidden: true
   },
   {
-    path: '/auth-redirect',
-    component: 'views/login/auth-redirect',
+    path: "/auth-redirect",
+    component: "views/login/auth-redirect",
     hidden: true
   },
   {
-    path: '/404',
-    component: 'views/error-page/404',
+    path: "/404",
+    component: "views/error-page/404",
     hidden: true
   },
   {
-    path: '/401',
-    component: 'views/error-page/401',
+    path: "/401",
+    component: "views/error-page/401",
     hidden: true
   },
   {
-    path: '',
-    component: 'layout/Layout',
-    redirect: 'dashboard',
+    path: "",
+    component: "layout/Layout",
+    redirect: "dashboard",
     children: [
       {
-        path: 'dashboard',
-        component: 'views/dashboard/index',
-        name: 'Dashboard',
-        meta: { title: 'Dashboard', icon: 'dashboard', affix: true }
+        path: "dashboard",
+        component: "views/dashboard/index",
+        name: "Dashboard",
+        meta: { title: "Dashboard", icon: "dashboard", affix: true }
       }
     ]
   },
   {
-    path: '/documentation',
-    component: 'layout/Layout',
+    path: "/documentation",
+    component: "layout/Layout",
     children: [
       {
-        path: 'index',
-        component: 'views/documentation/index',
-        name: 'Documentation',
-        meta: { title: 'Documentation', icon: 'documentation', affix: true }
+        path: "index",
+        component: "views/documentation/index",
+        name: "Documentation",
+        meta: { title: "Documentation", icon: "documentation", affix: true }
       }
     ]
   },
   {
-    path: '/guide',
-    component: 'layout/Layout',
-    redirect: '/guide/index',
+    path: "/guide",
+    component: "layout/Layout",
+    redirect: "/guide/index",
     children: [
       {
-        path: 'index',
-        component: 'views/guide/index',
-        name: 'Guide',
-        meta: { title: 'Guide', icon: 'guide', noCache: true }
+        path: "index",
+        component: "views/guide/index",
+        name: "Guide",
+        meta: { title: "Guide", icon: "guide", noCache: true }
       }
     ]
   }
-]
+];
 
 export const asyncRoutes = [
   {
-    path: '/permission',
-    component: 'layout/Layout',
-    redirect: '/permission/index',
+    path: "/permission",
+    component: "layout/Layout",
+    redirect: "/permission/index",
     alwaysShow: true,
     meta: {
-      title: 'Permission',
-      icon: 'lock',
-      roles: ['admin', 'editor']
+      title: "Permission",
+      icon: "lock",
+      roles: ["admin", "editor"]
     },
     children: [
       {
-        path: 'page',
-        component: 'views/permission/page',
-        name: 'PagePermission',
+        path: "page",
+        component: "views/permission/page",
+        name: "PagePermission",
         meta: {
-          title: 'Page Permission',
-          roles: ['admin']
+          title: "Page Permission",
+          roles: ["admin"]
         }
       },
       {
-        path: 'directive',
-        component: 'views/permission/directive',
-        name: 'DirectivePermission',
+        path: "directive",
+        component: "views/permission/directive",
+        name: "DirectivePermission",
         meta: {
-          title: 'Directive Permission'
+          title: "Directive Permission"
         }
       },
       {
-        path: 'role',
-        component: 'views/permission/role',
-        name: 'RolePermission',
+        path: "role",
+        component: "views/permission/role",
+        name: "RolePermission",
         meta: {
-          title: 'Role Permission',
-          roles: ['admin']
+          title: "Role Permission",
+          roles: ["admin"]
         }
       }
     ]
   },
 
   {
-    path: '/icon',
-    component: 'layout/Layout',
+    path: "/icon",
+    component: "layout/Layout",
     children: [
       {
-        path: 'index',
-        component: 'views/icons/index',
-        name: 'Icons',
-        meta: { title: 'Icons', icon: 'icon', noCache: true }
+        path: "index",
+        component: "views/icons/index",
+        name: "Icons",
+        meta: { title: "Icons", icon: "icon", noCache: true }
       }
     ]
   },
 
   {
-    path: '/components',
-    component: 'layout/Layout',
-    redirect: 'noRedirect',
-    name: 'ComponentDemo',
+    path: "/components",
+    component: "layout/Layout",
+    redirect: "noRedirect",
+    name: "ComponentDemo",
     meta: {
-      title: 'Components',
-      icon: 'component'
+      title: "Components",
+      icon: "component"
     },
     children: [
       {
-        path: 'tinymce',
-        component: 'views/components-demo/tinymce',
-        name: 'TinymceDemo',
-        meta: { title: 'Tinymce' }
+        path: "tinymce",
+        component: "views/components-demo/tinymce",
+        name: "TinymceDemo",
+        meta: { title: "Tinymce" }
       },
       {
-        path: 'markdown',
-        component: 'views/components-demo/markdown',
-        name: 'MarkdownDemo',
-        meta: { title: 'Markdown' }
+        path: "markdown",
+        component: "views/components-demo/markdown",
+        name: "MarkdownDemo",
+        meta: { title: "Markdown" }
       },
       {
-        path: 'json-editor',
-        component: 'views/components-demo/json-editor',
-        name: 'JsonEditorDemo',
-        meta: { title: 'Json Editor' }
+        path: "json-editor",
+        component: "views/components-demo/json-editor",
+        name: "JsonEditorDemo",
+        meta: { title: "Json Editor" }
       },
       {
-        path: 'split-pane',
-        component: 'views/components-demo/split-pane',
-        name: 'SplitpaneDemo',
-        meta: { title: 'SplitPane' }
+        path: "split-pane",
+        component: "views/components-demo/split-pane",
+        name: "SplitpaneDemo",
+        meta: { title: "SplitPane" }
       },
       {
-        path: 'avatar-upload',
-        component: 'views/components-demo/avatar-upload',
-        name: 'AvatarUploadDemo',
-        meta: { title: 'Avatar Upload' }
+        path: "avatar-upload",
+        component: "views/components-demo/avatar-upload",
+        name: "AvatarUploadDemo",
+        meta: { title: "Avatar Upload" }
       },
       {
-        path: 'dropzone',
-        component: 'views/components-demo/dropzone',
-        name: 'DropzoneDemo',
-        meta: { title: 'Dropzone' }
+        path: "dropzone",
+        component: "views/components-demo/dropzone",
+        name: "DropzoneDemo",
+        meta: { title: "Dropzone" }
       },
       {
-        path: 'sticky',
-        component: 'views/components-demo/sticky',
-        name: 'StickyDemo',
-        meta: { title: 'Sticky' }
+        path: "sticky",
+        component: "views/components-demo/sticky",
+        name: "StickyDemo",
+        meta: { title: "Sticky" }
       },
       {
-        path: 'count-to',
-        component: 'views/components-demo/count-to',
-        name: 'CountToDemo',
-        meta: { title: 'Count To' }
+        path: "count-to",
+        component: "views/components-demo/count-to",
+        name: "CountToDemo",
+        meta: { title: "Count To" }
       },
       {
-        path: 'mixin',
-        component: 'views/components-demo/mixin',
-        name: 'ComponentMixinDemo',
-        meta: { title: 'componentMixin' }
+        path: "mixin",
+        component: "views/components-demo/mixin",
+        name: "ComponentMixinDemo",
+        meta: { title: "componentMixin" }
       },
       {
-        path: 'back-to-top',
-        component: 'views/components-demo/back-to-top',
-        name: 'BackToTopDemo',
-        meta: { title: 'Back To Top' }
+        path: "back-to-top",
+        component: "views/components-demo/back-to-top",
+        name: "BackToTopDemo",
+        meta: { title: "Back To Top" }
       },
       {
-        path: 'drag-dialog',
-        component: 'views/components-demo/drag-dialog',
-        name: 'DragDialogDemo',
-        meta: { title: 'Drag Dialog' }
+        path: "drag-dialog",
+        component: "views/components-demo/drag-dialog",
+        name: "DragDialogDemo",
+        meta: { title: "Drag Dialog" }
       },
       {
-        path: 'drag-select',
-        component: 'views/components-demo/drag-select',
-        name: 'DragSelectDemo',
-        meta: { title: 'Drag Select' }
+        path: "drag-select",
+        component: "views/components-demo/drag-select",
+        name: "DragSelectDemo",
+        meta: { title: "Drag Select" }
       },
       {
-        path: 'dnd-list',
-        component: 'views/components-demo/dnd-list',
-        name: 'DndListDemo',
-        meta: { title: 'Dnd List' }
+        path: "dnd-list",
+        component: "views/components-demo/dnd-list",
+        name: "DndListDemo",
+        meta: { title: "Dnd List" }
       },
       {
-        path: 'drag-kanban',
-        component: 'views/components-demo/drag-kanban',
-        name: 'DragKanbanDemo',
-        meta: { title: 'Drag Kanban' }
+        path: "drag-kanban",
+        component: "views/components-demo/drag-kanban",
+        name: "DragKanbanDemo",
+        meta: { title: "Drag Kanban" }
       }
     ]
   },
   {
-    path: '/charts',
-    component: 'layout/Layout',
-    redirect: 'noRedirect',
-    name: 'Charts',
+    path: "/charts",
+    component: "layout/Layout",
+    redirect: "noRedirect",
+    name: "Charts",
     meta: {
-      title: 'Charts',
-      icon: 'chart'
+      title: "Charts",
+      icon: "chart"
     },
     children: [
       {
-        path: 'keyboard',
-        component: 'views/charts/keyboard',
-        name: 'KeyboardChart',
-        meta: { title: 'Keyboard Chart', noCache: true }
+        path: "keyboard",
+        component: "views/charts/keyboard",
+        name: "KeyboardChart",
+        meta: { title: "Keyboard Chart", noCache: true }
       },
       {
-        path: 'line',
-        component: 'views/charts/line',
-        name: 'LineChart',
-        meta: { title: 'Line Chart', noCache: true }
+        path: "line",
+        component: "views/charts/line",
+        name: "LineChart",
+        meta: { title: "Line Chart", noCache: true }
       },
       {
-        path: 'mixchart',
-        component: 'views/charts/mixChart',
-        name: 'MixChart',
-        meta: { title: 'Mix Chart', noCache: true }
+        path: "mixchart",
+        component: "views/charts/mixChart",
+        name: "MixChart",
+        meta: { title: "Mix Chart", noCache: true }
       }
     ]
   },
   {
-    path: '/nested',
-    component: 'layout/Layout',
-    redirect: '/nested/menu1/menu1-1',
-    name: 'Nested',
+    path: "/nested",
+    component: "layout/Layout",
+    redirect: "/nested/menu1/menu1-1",
+    name: "Nested",
     meta: {
-      title: 'Nested',
-      icon: 'nested'
+      title: "Nested",
+      icon: "nested"
     },
     children: [
       {
-        path: 'menu1',
-        component: 'views/nested/menu1/index',
-        name: 'Menu1',
-        meta: { title: 'Menu1' },
-        redirect: '/nested/menu1/menu1-1',
+        path: "menu1",
+        component: "views/nested/menu1/index",
+        name: "Menu1",
+        meta: { title: "Menu1" },
+        redirect: "/nested/menu1/menu1-1",
         children: [
           {
-            path: 'menu1-1',
-            component: 'views/nested/menu1/menu1-1',
-            name: 'Menu1-1',
-            meta: { title: 'Menu1-1' }
+            path: "menu1-1",
+            component: "views/nested/menu1/menu1-1",
+            name: "Menu1-1",
+            meta: { title: "Menu1-1" }
           },
           {
-            path: 'menu1-2',
-            component: 'views/nested/menu1/menu1-2',
-            name: 'Menu1-2',
-            redirect: '/nested/menu1/menu1-2/menu1-2-1',
-            meta: { title: 'Menu1-2' },
+            path: "menu1-2",
+            component: "views/nested/menu1/menu1-2",
+            name: "Menu1-2",
+            redirect: "/nested/menu1/menu1-2/menu1-2-1",
+            meta: { title: "Menu1-2" },
             children: [
               {
-                path: 'menu1-2-1',
-                component: 'views/nested/menu1/menu1-2/menu1-2-1',
-                name: 'Menu1-2-1',
-                meta: { title: 'Menu1-2-1' }
+                path: "menu1-2-1",
+                component: "views/nested/menu1/menu1-2/menu1-2-1",
+                name: "Menu1-2-1",
+                meta: { title: "Menu1-2-1" }
               },
               {
-                path: 'menu1-2-2',
-                component: 'views/nested/menu1/menu1-2/menu1-2-2',
-                name: 'Menu1-2-2',
-                meta: { title: 'Menu1-2-2' }
+                path: "menu1-2-2",
+                component: "views/nested/menu1/menu1-2/menu1-2-2",
+                name: "Menu1-2-2",
+                meta: { title: "Menu1-2-2" }
               }
             ]
           },
           {
-            path: 'menu1-3',
-            component: 'views/nested/menu1/menu1-3',
-            name: 'Menu1-3',
-            meta: { title: 'Menu1-3' }
+            path: "menu1-3",
+            component: "views/nested/menu1/menu1-3",
+            name: "Menu1-3",
+            meta: { title: "Menu1-3" }
           }
         ]
       },
       {
-        path: 'menu2',
-        name: 'Menu2',
-        component: 'views/nested/menu2/index',
-        meta: { title: 'Menu2' }
+        path: "menu2",
+        name: "Menu2",
+        component: "views/nested/menu2/index",
+        meta: { title: "Menu2" }
       }
     ]
   },
 
   {
-    path: '/example',
-    component: 'layout/Layout',
-    redirect: '/example/list',
-    name: 'Example',
+    path: "/example",
+    component: "layout/Layout",
+    redirect: "/example/list",
+    name: "Example",
     meta: {
-      title: 'Example',
-      icon: 'example'
+      title: "Example",
+      icon: "example"
     },
     children: [
       {
-        path: 'create',
-        component: 'views/example/create',
-        name: 'CreateArticle',
-        meta: { title: 'Create Article', icon: 'edit' }
+        path: "create",
+        component: "views/example/create",
+        name: "CreateArticle",
+        meta: { title: "Create Article", icon: "edit" }
       },
       {
-        path: 'edit/:id(\\d+)',
-        component: 'views/example/edit',
-        name: 'EditArticle',
-        meta: { title: 'Edit Article', noCache: true },
+        path: "edit/:id(\\d+)",
+        component: "views/example/edit",
+        name: "EditArticle",
+        meta: { title: "Edit Article", noCache: true },
         hidden: true
       },
       {
-        path: 'list',
-        component: 'views/example/list',
-        name: 'ArticleList',
-        meta: { title: 'Article List', icon: 'list' }
+        path: "list",
+        component: "views/example/list",
+        name: "ArticleList",
+        meta: { title: "Article List", icon: "list" }
       }
     ]
   },
 
   {
-    path: '/tab',
-    component: 'layout/Layout',
+    path: "/tab",
+    component: "layout/Layout",
     children: [
       {
-        path: 'index',
-        component: 'views/tab/index',
-        name: 'Tab',
-        meta: { title: 'Tab', icon: 'tab' }
+        path: "index",
+        component: "views/tab/index",
+        name: "Tab",
+        meta: { title: "Tab", icon: "tab" }
       }
     ]
   },
 
   {
-    path: '/error',
-    component: 'layout/Layout',
-    redirect: 'noRedirect',
-    name: 'ErrorPages',
+    path: "/error",
+    component: "layout/Layout",
+    redirect: "noRedirect",
+    name: "ErrorPages",
     meta: {
-      title: 'Error Pages',
-      icon: '404'
+      title: "Error Pages",
+      icon: "404"
     },
     children: [
       {
-        path: '401',
-        component: 'views/error-page/401',
-        name: 'Page401',
-        meta: { title: 'Page 401', noCache: true }
+        path: "401",
+        component: "views/error-page/401",
+        name: "Page401",
+        meta: { title: "Page 401", noCache: true }
       },
       {
-        path: '404',
-        component: 'views/error-page/404',
-        name: 'Page404',
-        meta: { title: 'Page 404', noCache: true }
+        path: "404",
+        component: "views/error-page/404",
+        name: "Page404",
+        meta: { title: "Page 404", noCache: true }
       }
     ]
   },
 
   {
-    path: '/error-log',
-    component: 'layout/Layout',
-    redirect: 'noRedirect',
+    path: "/error-log",
+    component: "layout/Layout",
+    redirect: "noRedirect",
     children: [
       {
-        path: 'log',
-        component: 'views/error-log/index',
-        name: 'ErrorLog',
-        meta: { title: 'Error Log', icon: 'bug' }
+        path: "log",
+        component: "views/error-log/index",
+        name: "ErrorLog",
+        meta: { title: "Error Log", icon: "bug" }
       }
     ]
   },
 
   {
-    path: '/excel',
-    component: 'layout/Layout',
-    redirect: '/excel/export-excel',
-    name: 'Excel',
+    path: "/excel",
+    component: "layout/Layout",
+    redirect: "/excel/export-excel",
+    name: "Excel",
     meta: {
-      title: 'Excel',
-      icon: 'excel'
+      title: "Excel",
+      icon: "excel"
     },
     children: [
       {
-        path: 'export-excel',
-        component: 'views/excel/export-excel',
-        name: 'ExportExcel',
-        meta: { title: 'Export Excel' }
+        path: "export-excel",
+        component: "views/excel/export-excel",
+        name: "ExportExcel",
+        meta: { title: "Export Excel" }
       },
       {
-        path: 'export-selected-excel',
-        component: 'views/excel/select-excel',
-        name: 'SelectExcel',
-        meta: { title: 'Select Excel' }
+        path: "export-selected-excel",
+        component: "views/excel/select-excel",
+        name: "SelectExcel",
+        meta: { title: "Select Excel" }
       },
       {
-        path: 'export-merge-header',
-        component: 'views/excel/merge-header',
-        name: 'MergeHeader',
-        meta: { title: 'Merge Header' }
+        path: "export-merge-header",
+        component: "views/excel/merge-header",
+        name: "MergeHeader",
+        meta: { title: "Merge Header" }
       },
       {
-        path: 'upload-excel',
-        component: 'views/excel/upload-excel',
-        name: 'UploadExcel',
-        meta: { title: 'Upload Excel' }
+        path: "upload-excel",
+        component: "views/excel/upload-excel",
+        name: "UploadExcel",
+        meta: { title: "Upload Excel" }
       }
     ]
   },
 
   {
-    path: '/zip',
-    component: 'layout/Layout',
-    redirect: '/zip/download',
+    path: "/zip",
+    component: "layout/Layout",
+    redirect: "/zip/download",
     alwaysShow: true,
-    meta: { title: 'Zip', icon: 'zip' },
+    meta: { title: "Zip", icon: "zip" },
     children: [
       {
-        path: 'download',
-        component: 'views/zip/index',
-        name: 'ExportZip',
-        meta: { title: 'Export Zip' }
+        path: "download",
+        component: "views/zip/index",
+        name: "ExportZip",
+        meta: { title: "Export Zip" }
       }
     ]
   },
 
   {
-    path: '/pdf',
-    component: 'layout/Layout',
-    redirect: '/pdf/index',
+    path: "/pdf",
+    component: "layout/Layout",
+    redirect: "/pdf/index",
     children: [
       {
-        path: 'index',
-        component: 'views/pdf/index',
-        name: 'PDF',
-        meta: { title: 'PDF', icon: 'pdf' }
+        path: "index",
+        component: "views/pdf/index",
+        name: "PDF",
+        meta: { title: "PDF", icon: "pdf" }
       }
     ]
   },
   {
-    path: '/pdf/download',
-    component: 'views/pdf/download',
+    path: "/pdf/download",
+    component: "views/pdf/download",
     hidden: true
   },
 
   {
-    path: '/theme',
-    component: 'layout/Layout',
-    redirect: 'noRedirect',
+    path: "/theme",
+    component: "layout/Layout",
+    redirect: "noRedirect",
     children: [
       {
-        path: 'index',
-        component: 'views/theme/index',
-        name: 'Theme',
-        meta: { title: 'Theme', icon: 'theme' }
+        path: "index",
+        component: "views/theme/index",
+        name: "Theme",
+        meta: { title: "Theme", icon: "theme" }
       }
     ]
   },
 
   {
-    path: '/clipboard',
-    component: 'layout/Layout',
-    redirect: 'noRedirect',
+    path: "/clipboard",
+    component: "layout/Layout",
+    redirect: "noRedirect",
     children: [
       {
-        path: 'index',
-        component: 'views/clipboard/index',
-        name: 'ClipboardDemo',
-        meta: { title: 'Clipboard Demo', icon: 'clipboard' }
+        path: "index",
+        component: "views/clipboard/index",
+        name: "ClipboardDemo",
+        meta: { title: "Clipboard Demo", icon: "clipboard" }
       }
     ]
   },
 
   {
-    path: '/i18n',
-    component: 'layout/Layout',
+    path: "/i18n",
+    component: "layout/Layout",
     children: [
       {
-        path: 'index',
-        component: 'views/i18n-demo/index',
-        name: 'I18n',
-        meta: { title: 'I18n', icon: 'international' }
+        path: "index",
+        component: "views/i18n-demo/index",
+        name: "I18n",
+        meta: { title: "I18n", icon: "international" }
       }
     ]
   },
 
   {
-    path: 'external-link',
-    component: 'layout/Layout',
+    path: "external-link",
+    component: "layout/Layout",
     children: [
       {
-        path: 'https://github.com/PanJiaChen/vue-element-admin',
-        meta: { title: 'External Link', icon: 'link' }
+        path: "https://github.com/PanJiaChen/vue-element-admin",
+        meta: { title: "External Link", icon: "link" }
       }
     ]
   },
 
-  { path: '*', redirect: '/404', hidden: true }
-]
+  { path: "*", redirect: "/404", hidden: true }
+];
diff --git a/mock/user.js b/mock/user.js
index 43f93a04..c5760a05 100644
--- a/mock/user.js
+++ b/mock/user.js
@@ -1,84 +1,85 @@
-
 const tokens = {
   admin: {
-    token: 'admin-token'
+    token: "admin-token"
   },
   editor: {
-    token: 'editor-token'
+    token: "editor-token"
   }
-}
+};
 
 const users = {
-  'admin-token': {
-    roles: ['admin'],
-    introduction: 'I am a super administrator',
-    avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
-    name: 'Super Admin'
+  "admin-token": {
+    roles: ["admin"],
+    introduction: "I am a super administrator",
+    avatar:
+      "https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif",
+    name: "Super Admin"
   },
-  'editor-token': {
-    roles: ['editor'],
-    introduction: 'I am an editor',
-    avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
-    name: 'Normal Editor'
+  "editor-token": {
+    roles: ["editor"],
+    introduction: "I am an editor",
+    avatar:
+      "https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif",
+    name: "Normal Editor"
   }
-}
+};
 
 export default [
   // user login
   {
-    url: '/user/login',
-    type: 'post',
+    url: "/user/login",
+    type: "post",
     response: config => {
-      const { username } = config.body
-      const token = tokens[username]
+      const { username } = config.body;
+      const token = tokens[username];
 
       // mock error
       if (!token) {
         return {
           code: 60204,
-          message: 'Account and password are incorrect.'
-        }
+          message: "Account and password are incorrect."
+        };
       }
 
       return {
         code: 20000,
         data: token
-      }
+      };
     }
   },
 
   // get user info
   {
-    url: '/user/info\.*',
-    type: 'get',
+    url: "/user/info.*",
+    type: "get",
     response: config => {
-      const { token } = config.query
-      const info = users[token]
+      const { token } = config.query;
+      const info = users[token];
 
       // mock error
       if (!info) {
         return {
           code: 50008,
-          message: 'Login failed, unable to get user details.'
-        }
+          message: "Login failed, unable to get user details."
+        };
       }
 
       return {
         code: 20000,
         data: info
-      }
+      };
     }
   },
 
   // user logout
   {
-    url: '/user/logout',
-    type: 'post',
+    url: "/user/logout",
+    type: "post",
     response: _ => {
       return {
         code: 20000,
-        data: 'success'
-      }
+        data: "success"
+      };
     }
   }
-]
+];
diff --git a/package.json b/package.json
index 8fbbf88e..e076e502 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "test:unit": "jest --clearCache && vue-cli-service test:unit",
     "test:ci": "npm run lint && npm run test:unit",
     "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml",
+    "format": "prettier \"./{src,tests,mock}/{**/*,*}.{ts,spec.ts,vue,js,spec.js}\" --write",
     "new": "plop"
   },
   "husky": {
@@ -86,7 +87,8 @@
     "chokidar": "2.1.5",
     "connect": "3.6.6",
     "eslint": "5.15.3",
-    "eslint-plugin-vue": "5.2.2",
+    "eslint-config-prettier": "^4.3.0",
+    "eslint-plugin-vue": "^5.2.2",
     "html-webpack-plugin": "3.2.0",
     "husky": "1.3.1",
     "lint-staged": "8.1.5",
diff --git a/src/App.vue b/src/App.vue
index ec9032c1..ac6b216b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,6 +6,6 @@
 
 <script>
 export default {
-  name: 'App'
-}
+  name: "App"
+};
 </script>
diff --git a/src/api/article.js b/src/api/article.js
index f54b8af6..57a97be8 100644
--- a/src/api/article.js
+++ b/src/api/article.js
@@ -1,41 +1,41 @@
-import request from '@/utils/request'
+import request from "@/utils/request";
 
 export function fetchList(query) {
   return request({
-    url: '/article/list',
-    method: 'get',
+    url: "/article/list",
+    method: "get",
     params: query
-  })
+  });
 }
 
 export function fetchArticle(id) {
   return request({
-    url: '/article/detail',
-    method: 'get',
+    url: "/article/detail",
+    method: "get",
     params: { id }
-  })
+  });
 }
 
 export function fetchPv(pv) {
   return request({
-    url: '/article/pv',
-    method: 'get',
+    url: "/article/pv",
+    method: "get",
     params: { pv }
-  })
+  });
 }
 
 export function createArticle(data) {
   return request({
-    url: '/article/create',
-    method: 'post',
+    url: "/article/create",
+    method: "post",
     data
-  })
+  });
 }
 
 export function updateArticle(data) {
   return request({
-    url: '/article/update',
-    method: 'post',
+    url: "/article/update",
+    method: "post",
     data
-  })
+  });
 }
diff --git a/src/api/qiniu.js b/src/api/qiniu.js
index a0375844..c8431009 100644
--- a/src/api/qiniu.js
+++ b/src/api/qiniu.js
@@ -1,8 +1,8 @@
-import request from '@/utils/request'
+import request from "@/utils/request";
 
 export function getToken() {
   return request({
-    url: '/qiniu/upload/token', // 假地址 自行替换
-    method: 'get'
-  })
+    url: "/qiniu/upload/token", // 假地址 自行替换
+    method: "get"
+  });
 }
diff --git a/src/api/remote-search.js b/src/api/remote-search.js
index c7e19117..2e9eb806 100644
--- a/src/api/remote-search.js
+++ b/src/api/remote-search.js
@@ -1,17 +1,17 @@
-import request from '@/utils/request'
+import request from "@/utils/request";
 
 export function searchUser(name) {
   return request({
-    url: '/search/user',
-    method: 'get',
+    url: "/search/user",
+    method: "get",
     params: { name }
-  })
+  });
 }
 
 export function transactionList(query) {
   return request({
-    url: '/transaction/list',
-    method: 'get',
+    url: "/transaction/list",
+    method: "get",
     params: query
-  })
+  });
 }
diff --git a/src/api/role.js b/src/api/role.js
index f6a983f1..f865263b 100644
--- a/src/api/role.js
+++ b/src/api/role.js
@@ -1,38 +1,38 @@
-import request from '@/utils/request'
+import request from "@/utils/request";
 
 export function getRoutes() {
   return request({
-    url: '/routes',
-    method: 'get'
-  })
+    url: "/routes",
+    method: "get"
+  });
 }
 
 export function getRoles() {
   return request({
-    url: '/roles',
-    method: 'get'
-  })
+    url: "/roles",
+    method: "get"
+  });
 }
 
 export function addRole(data) {
   return request({
-    url: '/role',
-    method: 'post',
+    url: "/role",
+    method: "post",
     data
-  })
+  });
 }
 
 export function updateRole(id, data) {
   return request({
     url: `/role/${id}`,
-    method: 'put',
+    method: "put",
     data
-  })
+  });
 }
 
 export function deleteRole(id) {
   return request({
     url: `/role/${id}`,
-    method: 'delete'
-  })
+    method: "delete"
+  });
 }
diff --git a/src/api/user.js b/src/api/user.js
index de69f707..4a1b593d 100644
--- a/src/api/user.js
+++ b/src/api/user.js
@@ -1,24 +1,24 @@
-import request from '@/utils/request'
+import request from "@/utils/request";
 
 export function login(data) {
   return request({
-    url: '/user/login',
-    method: 'post',
+    url: "/user/login",
+    method: "post",
     data
-  })
+  });
 }
 
 export function getInfo(token) {
   return request({
-    url: '/user/info',
-    method: 'get',
+    url: "/user/info",
+    method: "get",
     params: { token }
-  })
+  });
 }
 
 export function logout() {
   return request({
-    url: '/user/logout',
-    method: 'post'
-  })
+    url: "/user/logout",
+    method: "post"
+  });
 }
diff --git a/src/components/BackToTop/index.vue b/src/components/BackToTop/index.vue
index 36522f4a..eb313d5d 100644
--- a/src/components/BackToTop/index.vue
+++ b/src/components/BackToTop/index.vue
@@ -1,14 +1,31 @@
 <template>
   <transition :name="transitionName">
-    <div v-show="visible" :style="customStyle" class="back-to-ceiling" @click="backToTop">
-      <svg width="16" height="16" viewBox="0 0 17 17" xmlns="http://www.w3.org/2000/svg" class="Icon Icon--backToTopArrow" aria-hidden="true" style="height:16px;width:16px"><path d="M12.036 15.59a1 1 0 0 1-.997.995H5.032a.996.996 0 0 1-.997-.996V8.584H1.03c-1.1 0-1.36-.633-.578-1.416L7.33.29a1.003 1.003 0 0 1 1.412 0l6.878 6.88c.782.78.523 1.415-.58 1.415h-3.004v7.004z" /></svg>
+    <div
+      v-show="visible"
+      :style="customStyle"
+      class="back-to-ceiling"
+      @click="backToTop"
+    >
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 17 17"
+        xmlns="http://www.w3.org/2000/svg"
+        class="Icon Icon--backToTopArrow"
+        aria-hidden="true"
+        style="height:16px;width:16px"
+      >
+        <path
+          d="M12.036 15.59a1 1 0 0 1-.997.995H5.032a.996.996 0 0 1-.997-.996V8.584H1.03c-1.1 0-1.36-.633-.578-1.416L7.33.29a1.003 1.003 0 0 1 1.412 0l6.878 6.88c.782.78.523 1.415-.58 1.415h-3.004v7.004z"
+        />
+      </svg>
     </div>
   </transition>
 </template>
 
 <script>
 export default {
-  name: 'BackToTop',
+  name: "BackToTop",
   props: {
     visibilityHeight: {
       type: Number,
@@ -22,19 +39,19 @@ export default {
       type: Object,
       default: function() {
         return {
-          right: '50px',
-          bottom: '50px',
-          width: '40px',
-          height: '40px',
-          'border-radius': '4px',
-          'line-height': '45px',
-          background: '#e7eaf1'
-        }
+          right: "50px",
+          bottom: "50px",
+          width: "40px",
+          height: "40px",
+          "border-radius": "4px",
+          "line-height": "45px",
+          background: "#e7eaf1"
+        };
       }
     },
     transitionName: {
       type: String,
-      default: 'fade'
+      default: "fade"
     }
   },
   data() {
@@ -42,44 +59,44 @@ export default {
       visible: false,
       interval: null,
       isMoving: false
-    }
+    };
   },
   mounted() {
-    window.addEventListener('scroll', this.handleScroll)
+    window.addEventListener("scroll", this.handleScroll);
   },
   beforeDestroy() {
-    window.removeEventListener('scroll', this.handleScroll)
+    window.removeEventListener("scroll", this.handleScroll);
     if (this.interval) {
-      clearInterval(this.interval)
+      clearInterval(this.interval);
     }
   },
   methods: {
     handleScroll() {
-      this.visible = window.pageYOffset > this.visibilityHeight
+      this.visible = window.pageYOffset > this.visibilityHeight;
     },
     backToTop() {
-      if (this.isMoving) return
-      const start = window.pageYOffset
-      let i = 0
-      this.isMoving = true
+      if (this.isMoving) return;
+      const start = window.pageYOffset;
+      let i = 0;
+      this.isMoving = true;
       this.interval = setInterval(() => {
-        const next = Math.floor(this.easeInOutQuad(10 * i, start, -start, 500))
+        const next = Math.floor(this.easeInOutQuad(10 * i, start, -start, 500));
         if (next <= this.backPosition) {
-          window.scrollTo(0, this.backPosition)
-          clearInterval(this.interval)
-          this.isMoving = false
+          window.scrollTo(0, this.backPosition);
+          clearInterval(this.interval);
+          this.isMoving = false;
         } else {
-          window.scrollTo(0, next)
+          window.scrollTo(0, next);
         }
-        i++
-      }, 16.7)
+        i++;
+      }, 16.7);
     },
     easeInOutQuad(t, b, c, d) {
-      if ((t /= d / 2) < 1) return c / 2 * t * t + b
-      return -c / 2 * (--t * (t - 2) - 1) + b
+      if ((t /= d / 2) < 1) return (c / 2) * t * t + b;
+      return (-c / 2) * (--t * (t - 2) - 1) + b;
     }
   }
-}
+};
 </script>
 
 <style scoped>
@@ -96,12 +113,12 @@ export default {
 
 .fade-enter-active,
 .fade-leave-active {
-  transition: opacity .5s;
+  transition: opacity 0.5s;
 }
 
 .fade-enter,
 .fade-leave-to {
-  opacity: 0
+  opacity: 0;
 }
 
 .back-to-ceiling .Icon {
diff --git a/src/components/Breadcrumb/index.vue b/src/components/Breadcrumb/index.vue
index e224ff73..432e11d7 100644
--- a/src/components/Breadcrumb/index.vue
+++ b/src/components/Breadcrumb/index.vue
@@ -1,8 +1,12 @@
 <template>
   <el-breadcrumb class="app-breadcrumb" separator="/">
     <transition-group name="breadcrumb">
-      <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
-        <span v-if="item.redirect==='noRedirect'||index==levelList.length-1" class="no-redirect">{{ item.meta.title }}</span>
+      <el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">
+        <span
+          v-if="item.redirect === 'noRedirect' || index == levelList.length - 1"
+          class="no-redirect"
+          >{{ item.meta.title }}</span
+        >
         <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
       </el-breadcrumb-item>
     </transition-group>
@@ -10,61 +14,69 @@
 </template>
 
 <script>
-import pathToRegexp from 'path-to-regexp'
+import pathToRegexp from "path-to-regexp";
 
 export default {
   data() {
     return {
       levelList: null
-    }
+    };
   },
   watch: {
     $route(route) {
       // if you go to the redirect page, do not update the breadcrumbs
-      if (route.path.startsWith('/redirect/')) {
-        return
+      if (route.path.startsWith("/redirect/")) {
+        return;
       }
-      this.getBreadcrumb()
+      this.getBreadcrumb();
     }
   },
   created() {
-    this.getBreadcrumb()
+    this.getBreadcrumb();
   },
   methods: {
     getBreadcrumb() {
       // only show routes with meta.title
-      let matched = this.$route.matched.filter(item => item.meta && item.meta.title)
-      const first = matched[0]
+      let matched = this.$route.matched.filter(
+        item => item.meta && item.meta.title
+      );
+      const first = matched[0];
 
       if (!this.isDashboard(first)) {
-        matched = [{ path: '/dashboard', meta: { title: 'Dashboard' }}].concat(matched)
+        matched = [{ path: "/dashboard", meta: { title: "Dashboard" } }].concat(
+          matched
+        );
       }
 
-      this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
+      this.levelList = matched.filter(
+        item => item.meta && item.meta.title && item.meta.breadcrumb !== false
+      );
     },
     isDashboard(route) {
-      const name = route && route.name
+      const name = route && route.name;
       if (!name) {
-        return false
+        return false;
       }
-      return name.trim().toLocaleLowerCase() === 'Dashboard'.toLocaleLowerCase()
+      return (
+        name.trim().toLocaleLowerCase() === "Dashboard".toLocaleLowerCase()
+      );
     },
     pathCompile(path) {
       // To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561
-      const { params } = this.$route
-      var toPath = pathToRegexp.compile(path)
-      return toPath(params)
+      const { params } = this.$route;
+      var toPath = pathToRegexp.compile(path);
+      return toPath(params);
     },
     handleLink(item) {
-      const { redirect, path } = item
+      const { redirect, path } = item;
       if (redirect) {
-        this.$router.push(redirect)
-        return
+        this.$router.push(redirect);
+        return;
       }
-      this.$router.push(this.pathCompile(path))
+      this.$router.push(this.pathCompile(path));
     }
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/Charts/Keyboard.vue b/src/components/Charts/Keyboard.vue
index 0b258f36..05af3110 100644
--- a/src/components/Charts/Keyboard.vue
+++ b/src/components/Charts/Keyboard.vue
@@ -1,78 +1,88 @@
 <template>
-  <div :id="id" :class="className" :style="{height:height,width:width}" />
+  <div :id="id" :class="className" :style="{ height: height, width: width }" />
 </template>
 
 <script>
-import echarts from 'echarts'
-import resize from './mixins/resize'
+import echarts from "echarts";
+import resize from "./mixins/resize";
 
 export default {
   mixins: [resize],
   props: {
     className: {
       type: String,
-      default: 'chart'
+      default: "chart"
     },
     id: {
       type: String,
-      default: 'chart'
+      default: "chart"
     },
     width: {
       type: String,
-      default: '200px'
+      default: "200px"
     },
     height: {
       type: String,
-      default: '200px'
+      default: "200px"
     }
   },
   data() {
     return {
       chart: null
-    }
+    };
   },
   mounted() {
-    this.initChart()
+    this.initChart();
   },
   beforeDestroy() {
     if (!this.chart) {
-      return
+      return;
     }
-    this.chart.dispose()
-    this.chart = null
+    this.chart.dispose();
+    this.chart = null;
   },
   methods: {
     initChart() {
-      this.chart = echarts.init(document.getElementById(this.id))
+      this.chart = echarts.init(document.getElementById(this.id));
 
-      const xAxisData = []
-      const data = []
-      const data2 = []
+      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)
+        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',
+        backgroundColor: "#08263a",
         grid: {
-          left: '5%',
-          right: '5%'
+          left: "5%",
+          right: "5%"
         },
-        xAxis: [{
-          show: false,
-          data: xAxisData
-        }, {
-          show: false,
-          data: xAxisData
-        }],
+        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']
+            color: [
+              "#4a657a",
+              "#308e92",
+              "#b1cfa5",
+              "#f5d69f",
+              "#f5898b",
+              "#ef5055"
+            ]
           }
         },
         yAxis: {
@@ -81,75 +91,79 @@ export default {
           },
           axisLabel: {
             textStyle: {
-              color: '#4a657a'
+              color: "#4a657a"
             }
           },
           splitLine: {
             show: true,
             lineStyle: {
-              color: '#08263f'
+              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'
+        series: [
+          {
+            name: "back",
+            type: "bar",
+            data: data2,
+            z: 1,
+            itemStyle: {
+              normal: {
+                opacity: 0.4,
+                barBorderRadius: 5,
+                shadowBlur: 3,
+                shadowColor: "#111"
+              }
             }
           },
-          areaStyle: {
-            normal: {
-              color: '#08263a',
-              shadowBlur: 50,
-              shadowColor: '#000'
+          {
+            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
+              }
             }
           }
-        }, {
-          name: 'front',
-          type: 'bar',
-          data,
-          xAxisIndex: 1,
-          z: 3,
-          itemStyle: {
-            normal: {
-              barBorderRadius: 5
-            }
-          }
-        }],
-        animationEasing: 'elasticOut',
-        animationEasingUpdate: 'elasticOut',
+        ],
+        animationEasing: "elasticOut",
+        animationEasingUpdate: "elasticOut",
         animationDelay(idx) {
-          return idx * 20
+          return idx * 20;
         },
         animationDelayUpdate(idx) {
-          return idx * 20
+          return idx * 20;
         }
-      })
+      });
     }
   }
-}
+};
 </script>
diff --git a/src/components/Charts/LineMarker.vue b/src/components/Charts/LineMarker.vue
index 3dd74369..a4e86f87 100644
--- a/src/components/Charts/LineMarker.vue
+++ b/src/components/Charts/LineMarker.vue
@@ -1,227 +1,276 @@
 <template>
-  <div :id="id" :class="className" :style="{height:height,width:width}" />
+  <div :id="id" :class="className" :style="{ height: height, width: width }" />
 </template>
 
 <script>
-import echarts from 'echarts'
-import resize from './mixins/resize'
+import echarts from "echarts";
+import resize from "./mixins/resize";
 
 export default {
   mixins: [resize],
   props: {
     className: {
       type: String,
-      default: 'chart'
+      default: "chart"
     },
     id: {
       type: String,
-      default: 'chart'
+      default: "chart"
     },
     width: {
       type: String,
-      default: '200px'
+      default: "200px"
     },
     height: {
       type: String,
-      default: '200px'
+      default: "200px"
     }
   },
   data() {
     return {
       chart: null
-    }
+    };
   },
   mounted() {
-    this.initChart()
+    this.initChart();
   },
   beforeDestroy() {
     if (!this.chart) {
-      return
+      return;
     }
-    this.chart.dispose()
-    this.chart = null
+    this.chart.dispose();
+    this.chart = null;
   },
   methods: {
     initChart() {
-      this.chart = echarts.init(document.getElementById(this.id))
+      this.chart = echarts.init(document.getElementById(this.id));
 
       this.chart.setOption({
-        backgroundColor: '#394056',
+        backgroundColor: "#394056",
         title: {
           top: 20,
-          text: 'Requests',
+          text: "Requests",
           textStyle: {
-            fontWeight: 'normal',
+            fontWeight: "normal",
             fontSize: 16,
-            color: '#F1F1F3'
+            color: "#F1F1F3"
           },
-          left: '1%'
+          left: "1%"
         },
         tooltip: {
-          trigger: 'axis',
+          trigger: "axis",
           axisPointer: {
             lineStyle: {
-              color: '#57617B'
+              color: "#57617B"
             }
           }
         },
         legend: {
           top: 20,
-          icon: 'rect',
+          icon: "rect",
           itemWidth: 14,
           itemHeight: 5,
           itemGap: 13,
-          data: ['CMCC', 'CTCC', 'CUCC'],
-          right: '4%',
+          data: ["CMCC", "CTCC", "CUCC"],
+          right: "4%",
           textStyle: {
             fontSize: 12,
-            color: '#F1F1F3'
+            color: "#F1F1F3"
           }
         },
         grid: {
           top: 100,
-          left: '2%',
-          right: '2%',
-          bottom: '2%',
+          left: "2%",
+          right: "2%",
+          bottom: "2%",
           containLabel: true
         },
-        xAxis: [{
-          type: 'category',
-          boundaryGap: false,
-          axisLine: {
-            lineStyle: {
-              color: '#57617B'
-            }
-          },
-          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',
-          name: '(%)',
-          axisTick: {
-            show: false
-          },
-          axisLine: {
-            lineStyle: {
-              color: '#57617B'
-            }
-          },
-          axisLabel: {
-            margin: 10,
-            textStyle: {
-              fontSize: 14
-            }
-          },
-          splitLine: {
-            lineStyle: {
-              color: '#57617B'
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            axisLine: {
+              lineStyle: {
+                color: "#57617B"
+              }
+            },
+            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",
+            name: "(%)",
+            axisTick: {
+              show: false
+            },
+            axisLine: {
+              lineStyle: {
+                color: "#57617B"
+              }
+            },
+            axisLabel: {
+              margin: 10,
+              textStyle: {
+                fontSize: 14
+              }
+            },
+            splitLine: {
+              lineStyle: {
+                color: "#57617B"
+              }
             }
           }
-        }],
-        series: [{
-          name: 'CMCC',
-          type: 'line',
-          smooth: true,
-          symbol: 'circle',
-          symbolSize: 5,
-          showSymbol: false,
-          lineStyle: {
-            normal: {
-              width: 1
-            }
+        ],
+        series: [
+          {
+            name: "CMCC",
+            type: "line",
+            smooth: true,
+            symbol: "circle",
+            symbolSize: 5,
+            showSymbol: false,
+            lineStyle: {
+              normal: {
+                width: 1
+              }
+            },
+            areaStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(137, 189, 27, 0.3)"
+                    },
+                    {
+                      offset: 0.8,
+                      color: "rgba(137, 189, 27, 0)"
+                    }
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0, 0, 0, 0.1)",
+                shadowBlur: 10
+              }
+            },
+            itemStyle: {
+              normal: {
+                color: "rgb(137,189,27)",
+                borderColor: "rgba(137,189,2,0.27)",
+                borderWidth: 12
+              }
+            },
+            data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122]
           },
-          areaStyle: {
-            normal: {
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                offset: 0,
-                color: 'rgba(137, 189, 27, 0.3)'
-              }, {
-                offset: 0.8,
-                color: 'rgba(137, 189, 27, 0)'
-              }], false),
-              shadowColor: 'rgba(0, 0, 0, 0.1)',
-              shadowBlur: 10
-            }
+          {
+            name: "CTCC",
+            type: "line",
+            smooth: true,
+            symbol: "circle",
+            symbolSize: 5,
+            showSymbol: false,
+            lineStyle: {
+              normal: {
+                width: 1
+              }
+            },
+            areaStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0, 136, 212, 0.3)"
+                    },
+                    {
+                      offset: 0.8,
+                      color: "rgba(0, 136, 212, 0)"
+                    }
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0, 0, 0, 0.1)",
+                shadowBlur: 10
+              }
+            },
+            itemStyle: {
+              normal: {
+                color: "rgb(0,136,212)",
+                borderColor: "rgba(0,136,212,0.2)",
+                borderWidth: 12
+              }
+            },
+            data: [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150]
           },
-          itemStyle: {
-            normal: {
-              color: 'rgb(137,189,27)',
-              borderColor: 'rgba(137,189,2,0.27)',
-              borderWidth: 12
-
-            }
-          },
-          data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122]
-        }, {
-          name: 'CTCC',
-          type: 'line',
-          smooth: true,
-          symbol: 'circle',
-          symbolSize: 5,
-          showSymbol: false,
-          lineStyle: {
-            normal: {
-              width: 1
-            }
-          },
-          areaStyle: {
-            normal: {
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                offset: 0,
-                color: 'rgba(0, 136, 212, 0.3)'
-              }, {
-                offset: 0.8,
-                color: 'rgba(0, 136, 212, 0)'
-              }], false),
-              shadowColor: 'rgba(0, 0, 0, 0.1)',
-              shadowBlur: 10
-            }
-          },
-          itemStyle: {
-            normal: {
-              color: 'rgb(0,136,212)',
-              borderColor: 'rgba(0,136,212,0.2)',
-              borderWidth: 12
-
-            }
-          },
-          data: [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150]
-        }, {
-          name: 'CUCC',
-          type: 'line',
-          smooth: true,
-          symbol: 'circle',
-          symbolSize: 5,
-          showSymbol: false,
-          lineStyle: {
-            normal: {
-              width: 1
-            }
-          },
-          areaStyle: {
-            normal: {
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                offset: 0,
-                color: 'rgba(219, 50, 51, 0.3)'
-              }, {
-                offset: 0.8,
-                color: 'rgba(219, 50, 51, 0)'
-              }], false),
-              shadowColor: 'rgba(0, 0, 0, 0.1)',
-              shadowBlur: 10
-            }
-          },
-          itemStyle: {
-            normal: {
-              color: 'rgb(219,50,51)',
-              borderColor: 'rgba(219,50,51,0.2)',
-              borderWidth: 12
-            }
-          },
-          data: [220, 182, 125, 145, 122, 191, 134, 150, 120, 110, 165, 122]
-        }]
-      })
+          {
+            name: "CUCC",
+            type: "line",
+            smooth: true,
+            symbol: "circle",
+            symbolSize: 5,
+            showSymbol: false,
+            lineStyle: {
+              normal: {
+                width: 1
+              }
+            },
+            areaStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(219, 50, 51, 0.3)"
+                    },
+                    {
+                      offset: 0.8,
+                      color: "rgba(219, 50, 51, 0)"
+                    }
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0, 0, 0, 0.1)",
+                shadowBlur: 10
+              }
+            },
+            itemStyle: {
+              normal: {
+                color: "rgb(219,50,51)",
+                borderColor: "rgba(219,50,51,0.2)",
+                borderWidth: 12
+              }
+            },
+            data: [220, 182, 125, 145, 122, 191, 134, 150, 120, 110, 165, 122]
+          }
+        ]
+      });
     }
   }
-}
+};
 </script>
diff --git a/src/components/Charts/MixChart.vue b/src/components/Charts/MixChart.vue
index c416542e..865755f8 100644
--- a/src/components/Charts/MixChart.vue
+++ b/src/components/Charts/MixChart.vue
@@ -1,271 +1,277 @@
 <template>
-  <div :id="id" :class="className" :style="{height:height,width:width}" />
+  <div :id="id" :class="className" :style="{ height: height, width: width }" />
 </template>
 
 <script>
-import echarts from 'echarts'
-import resize from './mixins/resize'
+import echarts from "echarts";
+import resize from "./mixins/resize";
 
 export default {
   mixins: [resize],
   props: {
     className: {
       type: String,
-      default: 'chart'
+      default: "chart"
     },
     id: {
       type: String,
-      default: 'chart'
+      default: "chart"
     },
     width: {
       type: String,
-      default: '200px'
+      default: "200px"
     },
     height: {
       type: String,
-      default: '200px'
+      default: "200px"
     }
   },
   data() {
     return {
       chart: null
-    }
+    };
   },
   mounted() {
-    this.initChart()
+    this.initChart();
   },
   beforeDestroy() {
     if (!this.chart) {
-      return
+      return;
     }
-    this.chart.dispose()
-    this.chart = null
+    this.chart.dispose();
+    this.chart = null;
   },
   methods: {
     initChart() {
-      this.chart = echarts.init(document.getElementById(this.id))
+      this.chart = echarts.init(document.getElementById(this.id));
       const xData = (function() {
-        const data = []
+        const data = [];
         for (let i = 1; i < 13; i++) {
-          data.push(i + 'month')
+          data.push(i + "month");
         }
-        return data
-      }())
+        return data;
+      })();
       this.chart.setOption({
-        backgroundColor: '#344b58',
+        backgroundColor: "#344b58",
         title: {
-          text: 'statistics',
-          x: '20',
-          top: '20',
+          text: "statistics",
+          x: "20",
+          top: "20",
           textStyle: {
-            color: '#fff',
-            fontSize: '22'
+            color: "#fff",
+            fontSize: "22"
           },
           subtextStyle: {
-            color: '#90979c',
-            fontSize: '16'
+            color: "#90979c",
+            fontSize: "16"
           }
         },
         tooltip: {
-          trigger: 'axis',
+          trigger: "axis",
           axisPointer: {
             textStyle: {
-              color: '#fff'
+              color: "#fff"
             }
           }
         },
         grid: {
-          left: '5%',
-          right: '5%',
+          left: "5%",
+          right: "5%",
           borderWidth: 0,
           top: 150,
           bottom: 95,
           textStyle: {
-            color: '#fff'
+            color: "#fff"
           }
         },
         legend: {
-          x: '5%',
-          top: '10%',
+          x: "5%",
+          top: "10%",
           textStyle: {
-            color: '#90979c'
+            color: "#90979c"
           },
-          data: ['female', 'male', 'average']
+          data: ["female", "male", "average"]
         },
         calculable: true,
-        xAxis: [{
-          type: 'category',
-          axisLine: {
-            lineStyle: {
-              color: '#90979c'
-            }
-          },
-          splitLine: {
-            show: false
-          },
-          axisTick: {
-            show: false
-          },
-          splitArea: {
-            show: false
-          },
-          axisLabel: {
-            interval: 0
-
-          },
-          data: xData
-        }],
-        yAxis: [{
-          type: 'value',
-          splitLine: {
-            show: false
-          },
-          axisLine: {
-            lineStyle: {
-              color: '#90979c'
-            }
-          },
-          axisTick: {
-            show: false
-          },
-          axisLabel: {
-            interval: 0
-          },
-          splitArea: {
-            show: false
+        xAxis: [
+          {
+            type: "category",
+            axisLine: {
+              lineStyle: {
+                color: "#90979c"
+              }
+            },
+            splitLine: {
+              show: false
+            },
+            axisTick: {
+              show: false
+            },
+            splitArea: {
+              show: false
+            },
+            axisLabel: {
+              interval: 0
+            },
+            data: xData
           }
-        }],
-        dataZoom: [{
-          show: true,
-          height: 30,
-          xAxisIndex: [
-            0
-          ],
-          bottom: 30,
-          start: 10,
-          end: 80,
-          handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
-          handleSize: '110%',
-          handleStyle: {
-            color: '#d3dee5'
-
+        ],
+        yAxis: [
+          {
+            type: "value",
+            splitLine: {
+              show: false
+            },
+            axisLine: {
+              lineStyle: {
+                color: "#90979c"
+              }
+            },
+            axisTick: {
+              show: false
+            },
+            axisLabel: {
+              interval: 0
+            },
+            splitArea: {
+              show: false
+            }
+          }
+        ],
+        dataZoom: [
+          {
+            show: true,
+            height: 30,
+            xAxisIndex: [0],
+            bottom: 30,
+            start: 10,
+            end: 80,
+            handleIcon:
+              "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
+            handleSize: "110%",
+            handleStyle: {
+              color: "#d3dee5"
+            },
+            textStyle: {
+              color: "#fff"
+            },
+            borderColor: "#90979c"
           },
-          textStyle: {
-            color: '#fff' },
-          borderColor: '#90979c'
-
-        }, {
-          type: 'inside',
-          show: true,
-          height: 15,
-          start: 1,
-          end: 35
-        }],
-        series: [{
-          name: 'female',
-          type: 'bar',
-          stack: 'total',
-          barMaxWidth: 35,
-          barGap: '10%',
-          itemStyle: {
-            normal: {
-              color: 'rgba(255,144,128,1)',
-              label: {
-                show: true,
-                textStyle: {
-                  color: '#fff'
-                },
-                position: 'insideTop',
-                formatter(p) {
-                  return p.value > 0 ? p.value : ''
+          {
+            type: "inside",
+            show: true,
+            height: 15,
+            start: 1,
+            end: 35
+          }
+        ],
+        series: [
+          {
+            name: "female",
+            type: "bar",
+            stack: "total",
+            barMaxWidth: 35,
+            barGap: "10%",
+            itemStyle: {
+              normal: {
+                color: "rgba(255,144,128,1)",
+                label: {
+                  show: true,
+                  textStyle: {
+                    color: "#fff"
+                  },
+                  position: "insideTop",
+                  formatter(p) {
+                    return p.value > 0 ? p.value : "";
+                  }
                 }
               }
-            }
+            },
+            data: [
+              709,
+              1917,
+              2455,
+              2610,
+              1719,
+              1433,
+              1544,
+              3285,
+              5208,
+              3372,
+              2484,
+              4078
+            ]
           },
-          data: [
-            709,
-            1917,
-            2455,
-            2610,
-            1719,
-            1433,
-            1544,
-            3285,
-            5208,
-            3372,
-            2484,
-            4078
-          ]
-        },
 
-        {
-          name: 'male',
-          type: 'bar',
-          stack: 'total',
-          itemStyle: {
-            normal: {
-              color: 'rgba(0,191,183,1)',
-              barBorderRadius: 0,
-              label: {
-                show: true,
-                position: 'top',
-                formatter(p) {
-                  return p.value > 0 ? p.value : ''
+          {
+            name: "male",
+            type: "bar",
+            stack: "total",
+            itemStyle: {
+              normal: {
+                color: "rgba(0,191,183,1)",
+                barBorderRadius: 0,
+                label: {
+                  show: true,
+                  position: "top",
+                  formatter(p) {
+                    return p.value > 0 ? p.value : "";
+                  }
                 }
               }
-            }
+            },
+            data: [
+              327,
+              1776,
+              507,
+              1200,
+              800,
+              482,
+              204,
+              1390,
+              1001,
+              951,
+              381,
+              220
+            ]
           },
-          data: [
-            327,
-            1776,
-            507,
-            1200,
-            800,
-            482,
-            204,
-            1390,
-            1001,
-            951,
-            381,
-            220
-          ]
-        }, {
-          name: 'average',
-          type: 'line',
-          stack: 'total',
-          symbolSize: 10,
-          symbol: 'circle',
-          itemStyle: {
-            normal: {
-              color: 'rgba(252,230,48,1)',
-              barBorderRadius: 0,
-              label: {
-                show: true,
-                position: 'top',
-                formatter(p) {
-                  return p.value > 0 ? p.value : ''
+          {
+            name: "average",
+            type: "line",
+            stack: "total",
+            symbolSize: 10,
+            symbol: "circle",
+            itemStyle: {
+              normal: {
+                color: "rgba(252,230,48,1)",
+                barBorderRadius: 0,
+                label: {
+                  show: true,
+                  position: "top",
+                  formatter(p) {
+                    return p.value > 0 ? p.value : "";
+                  }
                 }
               }
-            }
-          },
-          data: [
-            1036,
-            3693,
-            2962,
-            3810,
-            2519,
-            1915,
-            1748,
-            4675,
-            6209,
-            4323,
-            2865,
-            4298
-          ]
-        }
+            },
+            data: [
+              1036,
+              3693,
+              2962,
+              3810,
+              2519,
+              1915,
+              1748,
+              4675,
+              6209,
+              4323,
+              2865,
+              4298
+            ]
+          }
         ]
-      })
+      });
     }
   }
-}
+};
 </script>
diff --git a/src/components/Charts/mixins/resize.js b/src/components/Charts/mixins/resize.js
index dccaf1a8..c8b66cd2 100644
--- a/src/components/Charts/mixins/resize.js
+++ b/src/components/Charts/mixins/resize.js
@@ -1,34 +1,42 @@
-import { debounce } from '@/utils'
+import { debounce } from "@/utils";
 
 export default {
   data() {
     return {
       $_sidebarElm: null
-    }
+    };
   },
   mounted() {
     this.__resizeHandler = debounce(() => {
       if (this.chart) {
-        this.chart.resize()
+        this.chart.resize();
       }
-    }, 100)
-    window.addEventListener('resize', this.__resizeHandler)
+    }, 100);
+    window.addEventListener("resize", this.__resizeHandler);
 
-    this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
-    this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
+    this.$_sidebarElm = document.getElementsByClassName("sidebar-container")[0];
+    this.$_sidebarElm &&
+      this.$_sidebarElm.addEventListener(
+        "transitionend",
+        this.$_sidebarResizeHandler
+      );
   },
   beforeDestroy() {
-    window.removeEventListener('resize', this.__resizeHandler)
+    window.removeEventListener("resize", this.__resizeHandler);
 
-    this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
+    this.$_sidebarElm &&
+      this.$_sidebarElm.removeEventListener(
+        "transitionend",
+        this.$_sidebarResizeHandler
+      );
   },
   methods: {
     // use $_ for mixins properties
     // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
     $_sidebarResizeHandler(e) {
-      if (e.propertyName === 'width') {
-        this.__resizeHandler()
+      if (e.propertyName === "width") {
+        this.__resizeHandler();
       }
     }
   }
-}
+};
diff --git a/src/components/DndList/index.vue b/src/components/DndList/index.vue
index 23ca006e..c30eb14f 100644
--- a/src/components/DndList/index.vue
+++ b/src/components/DndList/index.vue
@@ -1,24 +1,40 @@
 <template>
   <div class="dndList">
-    <div :style="{width:width1}" class="dndList-list">
+    <div :style="{ width: width1 }" class="dndList-list">
       <h3>{{ list1Title }}</h3>
-      <draggable :set-data="setData" :list="list1" group="article" class="dragArea">
-        <div v-for="element in list1" :key="element.id" class="list-complete-item">
+      <draggable
+        :set-data="setData"
+        :list="list1"
+        group="article"
+        class="dragArea"
+      >
+        <div
+          v-for="element in list1"
+          :key="element.id"
+          class="list-complete-item"
+        >
           <div class="list-complete-item-handle">
             {{ element.id }}[{{ element.author }}] {{ element.title }}
           </div>
           <div style="position:absolute;right:0px;">
-            <span style="float: right ;margin-top: -20px;margin-right:5px;" @click="deleteEle(element)">
+            <span
+              style="float: right ;margin-top: -20px;margin-right:5px;"
+              @click="deleteEle(element)"
+            >
               <i style="color:#ff4949" class="el-icon-delete" />
             </span>
           </div>
         </div>
       </draggable>
     </div>
-    <div :style="{width:width2}" class="dndList-list">
+    <div :style="{ width: width2 }" class="dndList-list">
       <h3>{{ list2Title }}</h3>
       <draggable :list="list2" group="article" class="dragArea">
-        <div v-for="element in list2" :key="element.id" class="list-complete-item">
+        <div
+          v-for="element in list2"
+          :key="element.id"
+          class="list-complete-item"
+        >
           <div class="list-complete-item-handle2" @click="pushEle(element)">
             {{ element.id }} [{{ element.author }}] {{ element.title }}
           </div>
@@ -29,79 +45,79 @@
 </template>
 
 <script>
-import draggable from 'vuedraggable'
+import draggable from "vuedraggable";
 
 export default {
-  name: 'DndList',
+  name: "DndList",
   components: { draggable },
   props: {
     list1: {
       type: Array,
       default() {
-        return []
+        return [];
       }
     },
     list2: {
       type: Array,
       default() {
-        return []
+        return [];
       }
     },
     list1Title: {
       type: String,
-      default: 'list1'
+      default: "list1"
     },
     list2Title: {
       type: String,
-      default: 'list2'
+      default: "list2"
     },
     width1: {
       type: String,
-      default: '48%'
+      default: "48%"
     },
     width2: {
       type: String,
-      default: '48%'
+      default: "48%"
     }
   },
   methods: {
     isNotInList1(v) {
-      return this.list1.every(k => v.id !== k.id)
+      return this.list1.every(k => v.id !== k.id);
     },
     isNotInList2(v) {
-      return this.list2.every(k => v.id !== k.id)
+      return this.list2.every(k => v.id !== k.id);
     },
     deleteEle(ele) {
       for (const item of this.list1) {
         if (item.id === ele.id) {
-          const index = this.list1.indexOf(item)
-          this.list1.splice(index, 1)
-          break
+          const index = this.list1.indexOf(item);
+          this.list1.splice(index, 1);
+          break;
         }
       }
       if (this.isNotInList2(ele)) {
-        this.list2.unshift(ele)
+        this.list2.unshift(ele);
       }
     },
     pushEle(ele) {
       for (const item of this.list2) {
         if (item.id === ele.id) {
-          const index = this.list2.indexOf(item)
-          this.list2.splice(index, 1)
-          break
+          const index = this.list2.indexOf(item);
+          this.list2.splice(index, 1);
+          break;
         }
       }
       if (this.isNotInList1(ele)) {
-        this.list1.push(ele)
+        this.list1.push(ele);
       }
     },
     setData(dataTransfer) {
       // to avoid Firefox bug
       // Detail see : https://github.com/RubaXa/Sortable/issues/1012
-      dataTransfer.setData('Text', '')
+      dataTransfer.setData("Text", "");
     }
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>
@@ -152,11 +168,11 @@ export default {
 }
 
 .list-complete-item.sortable-chosen {
-  background: #4AB7BD;
+  background: #4ab7bd;
 }
 
 .list-complete-item.sortable-ghost {
-  background: #30B08F;
+  background: #30b08f;
 }
 
 .list-complete-enter,
diff --git a/src/components/DragSelect/index.vue b/src/components/DragSelect/index.vue
index 28256a8b..b255f2fc 100644
--- a/src/components/DragSelect/index.vue
+++ b/src/components/DragSelect/index.vue
@@ -1,14 +1,21 @@
 <template>
-  <el-select ref="dragSelect" v-model="selectVal" v-bind="$attrs" class="drag-select" multiple v-on="$listeners">
+  <el-select
+    ref="dragSelect"
+    v-model="selectVal"
+    v-bind="$attrs"
+    class="drag-select"
+    multiple
+    v-on="$listeners"
+  >
     <slot />
   </el-select>
 </template>
 
 <script>
-import Sortable from 'sortablejs'
+import Sortable from "sortablejs";
 
 export default {
-  name: 'DragSelect',
+  name: "DragSelect",
   props: {
     value: {
       type: Array,
@@ -18,41 +25,43 @@ export default {
   computed: {
     selectVal: {
       get() {
-        return [...this.value]
+        return [...this.value];
       },
       set(val) {
-        this.$emit('input', [...val])
+        this.$emit("input", [...val]);
       }
     }
   },
   mounted() {
-    this.setSort()
+    this.setSort();
   },
   methods: {
     setSort() {
-      const el = this.$refs.dragSelect.$el.querySelectorAll('.el-select__tags > span')[0]
+      const el = this.$refs.dragSelect.$el.querySelectorAll(
+        ".el-select__tags > span"
+      )[0];
       this.sortable = Sortable.create(el, {
-        ghostClass: 'sortable-ghost', // Class name for the drop placeholder,
+        ghostClass: "sortable-ghost", // Class name for the drop placeholder,
         setData: function(dataTransfer) {
-          dataTransfer.setData('Text', '')
+          dataTransfer.setData("Text", "");
           // to avoid Firefox bug
           // Detail see : https://github.com/RubaXa/Sortable/issues/1012
         },
         onEnd: evt => {
-          const targetRow = this.value.splice(evt.oldIndex, 1)[0]
-          this.value.splice(evt.newIndex, 0, targetRow)
+          const targetRow = this.value.splice(evt.oldIndex, 1)[0];
+          this.value.splice(evt.newIndex, 0, targetRow);
         }
-      })
+      });
     }
   }
-}
+};
 </script>
 
 <style scoped>
 .drag-select >>> .sortable-ghost {
-  opacity: .8;
-  color: #fff!important;
-  background: #42b983!important;
+  opacity: 0.8;
+  color: #fff !important;
+  background: #42b983 !important;
 }
 
 .drag-select >>> .el-tag {
diff --git a/src/components/Dropzone/index.vue b/src/components/Dropzone/index.vue
index bad9eb90..2fadc741 100644
--- a/src/components/Dropzone/index.vue
+++ b/src/components/Dropzone/index.vue
@@ -1,15 +1,15 @@
 <template>
   <div :id="id" :ref="id" :action="url" class="dropzone">
-    <input type="file" name="file">
+    <input type="file" name="file" />
   </div>
 </template>
 
 <script>
-import Dropzone from 'dropzone'
-import 'dropzone/dist/dropzone.css'
+import Dropzone from "dropzone";
+import "dropzone/dist/dropzone.css";
 // import { getToken } from 'api/qiniu';
 
-Dropzone.autoDiscover = false
+Dropzone.autoDiscover = false;
 
 export default {
   props: {
@@ -27,11 +27,11 @@ export default {
     },
     defaultMsg: {
       type: String,
-      default: '上传图片'
+      default: "上传图片"
     },
     acceptedFiles: {
       type: String,
-      default: ''
+      default: ""
     },
     thumbnailHeight: {
       type: Number,
@@ -62,7 +62,7 @@ export default {
       default: false
     },
     defaultImg: {
-      default: '',
+      default: "",
       type: [String, Array]
     },
     couldPaste: {
@@ -72,58 +72,70 @@ export default {
   },
   data() {
     return {
-      dropzone: '',
+      dropzone: "",
       initOnce: true
-    }
+    };
   },
   watch: {
     defaultImg(val) {
       if (val.length === 0) {
-        this.initOnce = false
-        return
+        this.initOnce = false;
+        return;
       }
-      if (!this.initOnce) return
-      this.initImages(val)
-      this.initOnce = false
+      if (!this.initOnce) return;
+      this.initImages(val);
+      this.initOnce = false;
     }
   },
   mounted() {
-    const element = document.getElementById(this.id)
-    const vm = this
+    const element = document.getElementById(this.id);
+    const vm = this;
     this.dropzone = new Dropzone(element, {
       clickable: this.clickable,
       thumbnailWidth: this.thumbnailWidth,
       thumbnailHeight: this.thumbnailHeight,
       maxFiles: this.maxFiles,
       maxFilesize: this.maxFilesize,
-      dictRemoveFile: 'Remove',
+      dictRemoveFile: "Remove",
       addRemoveLinks: this.showRemoveLink,
       acceptedFiles: this.acceptedFiles,
       autoProcessQueue: this.autoProcessQueue,
-      dictDefaultMessage: '<i style="margin-top: 3em;display: inline-block" class="material-icons">' + this.defaultMsg + '</i><br>Drop files here to upload',
-      dictMaxFilesExceeded: '只能一个图',
-      previewTemplate: '<div class="dz-preview dz-file-preview">  <div class="dz-image" style="width:' + this.thumbnailWidth + 'px;height:' + this.thumbnailHeight + 'px" ><img style="width:' + this.thumbnailWidth + 'px;height:' + this.thumbnailHeight + 'px" data-dz-thumbnail /></div>  <div class="dz-details"><div class="dz-size"><span data-dz-size></span></div> <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>  <div class="dz-error-message"><span data-dz-errormessage></span></div>  <div class="dz-success-mark"> <i class="material-icons">done</i> </div>  <div class="dz-error-mark"><i class="material-icons">error</i></div></div>',
+      dictDefaultMessage:
+        '<i style="margin-top: 3em;display: inline-block" class="material-icons">' +
+        this.defaultMsg +
+        "</i><br>Drop files here to upload",
+      dictMaxFilesExceeded: "只能一个图",
+      previewTemplate:
+        '<div class="dz-preview dz-file-preview">  <div class="dz-image" style="width:' +
+        this.thumbnailWidth +
+        "px;height:" +
+        this.thumbnailHeight +
+        'px" ><img style="width:' +
+        this.thumbnailWidth +
+        "px;height:" +
+        this.thumbnailHeight +
+        'px" data-dz-thumbnail /></div>  <div class="dz-details"><div class="dz-size"><span data-dz-size></span></div> <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>  <div class="dz-error-message"><span data-dz-errormessage></span></div>  <div class="dz-success-mark"> <i class="material-icons">done</i> </div>  <div class="dz-error-mark"><i class="material-icons">error</i></div></div>',
       init() {
-        const val = vm.defaultImg
-        if (!val) return
+        const val = vm.defaultImg;
+        if (!val) return;
         if (Array.isArray(val)) {
-          if (val.length === 0) return
+          if (val.length === 0) return;
           val.map((v, i) => {
-            const mockFile = { name: 'name' + i, size: 12345, url: v }
-            this.options.addedfile.call(this, mockFile)
-            this.options.thumbnail.call(this, mockFile, v)
-            mockFile.previewElement.classList.add('dz-success')
-            mockFile.previewElement.classList.add('dz-complete')
-            vm.initOnce = false
-            return true
-          })
+            const mockFile = { name: "name" + i, size: 12345, url: v };
+            this.options.addedfile.call(this, mockFile);
+            this.options.thumbnail.call(this, mockFile, v);
+            mockFile.previewElement.classList.add("dz-success");
+            mockFile.previewElement.classList.add("dz-complete");
+            vm.initOnce = false;
+            return true;
+          });
         } else {
-          const mockFile = { name: 'name', size: 12345, url: val }
-          this.options.addedfile.call(this, mockFile)
-          this.options.thumbnail.call(this, mockFile, val)
-          mockFile.previewElement.classList.add('dz-success')
-          mockFile.previewElement.classList.add('dz-complete')
-          vm.initOnce = false
+          const mockFile = { name: "name", size: 12345, url: val };
+          this.options.addedfile.call(this, mockFile);
+          this.options.thumbnail.call(this, mockFile, val);
+          mockFile.previewElement.classList.add("dz-success");
+          mockFile.previewElement.classList.add("dz-complete");
+          vm.initOnce = false;
         }
       },
       accept: (file, done) => {
@@ -135,163 +147,166 @@ export default {
         //   file.url = response.data.qiniu_url;
         //   done();
         // })
-        done()
+        done();
       },
       sending: (file, xhr, formData) => {
         // formData.append('token', file.token);
         // formData.append('key', file.key);
-        vm.initOnce = false
+        vm.initOnce = false;
       }
-    })
+    });
 
     if (this.couldPaste) {
-      document.addEventListener('paste', this.pasteImg)
+      document.addEventListener("paste", this.pasteImg);
     }
 
-    this.dropzone.on('success', file => {
-      vm.$emit('dropzone-success', file, vm.dropzone.element)
-    })
-    this.dropzone.on('addedfile', file => {
-      vm.$emit('dropzone-fileAdded', file)
-    })
-    this.dropzone.on('removedfile', file => {
-      vm.$emit('dropzone-removedFile', file)
-    })
-    this.dropzone.on('error', (file, error, xhr) => {
-      vm.$emit('dropzone-error', file, error, xhr)
-    })
-    this.dropzone.on('successmultiple', (file, error, xhr) => {
-      vm.$emit('dropzone-successmultiple', file, error, xhr)
-    })
+    this.dropzone.on("success", file => {
+      vm.$emit("dropzone-success", file, vm.dropzone.element);
+    });
+    this.dropzone.on("addedfile", file => {
+      vm.$emit("dropzone-fileAdded", file);
+    });
+    this.dropzone.on("removedfile", file => {
+      vm.$emit("dropzone-removedFile", file);
+    });
+    this.dropzone.on("error", (file, error, xhr) => {
+      vm.$emit("dropzone-error", file, error, xhr);
+    });
+    this.dropzone.on("successmultiple", (file, error, xhr) => {
+      vm.$emit("dropzone-successmultiple", file, error, xhr);
+    });
   },
   destroyed() {
-    document.removeEventListener('paste', this.pasteImg)
-    this.dropzone.destroy()
+    document.removeEventListener("paste", this.pasteImg);
+    this.dropzone.destroy();
   },
   methods: {
     removeAllFiles() {
-      this.dropzone.removeAllFiles(true)
+      this.dropzone.removeAllFiles(true);
     },
     processQueue() {
-      this.dropzone.processQueue()
+      this.dropzone.processQueue();
     },
     pasteImg(event) {
-      const items = (event.clipboardData || event.originalEvent.clipboardData).items
-      if (items[0].kind === 'file') {
-        this.dropzone.addFile(items[0].getAsFile())
+      const items = (event.clipboardData || event.originalEvent.clipboardData)
+        .items;
+      if (items[0].kind === "file") {
+        this.dropzone.addFile(items[0].getAsFile());
       }
     },
     initImages(val) {
-      if (!val) return
+      if (!val) return;
       if (Array.isArray(val)) {
         val.map((v, i) => {
-          const mockFile = { name: 'name' + i, size: 12345, url: v }
-          this.dropzone.options.addedfile.call(this.dropzone, mockFile)
-          this.dropzone.options.thumbnail.call(this.dropzone, mockFile, v)
-          mockFile.previewElement.classList.add('dz-success')
-          mockFile.previewElement.classList.add('dz-complete')
-          return true
-        })
+          const mockFile = { name: "name" + i, size: 12345, url: v };
+          this.dropzone.options.addedfile.call(this.dropzone, mockFile);
+          this.dropzone.options.thumbnail.call(this.dropzone, mockFile, v);
+          mockFile.previewElement.classList.add("dz-success");
+          mockFile.previewElement.classList.add("dz-complete");
+          return true;
+        });
       } else {
-        const mockFile = { name: 'name', size: 12345, url: val }
-        this.dropzone.options.addedfile.call(this.dropzone, mockFile)
-        this.dropzone.options.thumbnail.call(this.dropzone, mockFile, val)
-        mockFile.previewElement.classList.add('dz-success')
-        mockFile.previewElement.classList.add('dz-complete')
+        const mockFile = { name: "name", size: 12345, url: val };
+        this.dropzone.options.addedfile.call(this.dropzone, mockFile);
+        this.dropzone.options.thumbnail.call(this.dropzone, mockFile, val);
+        mockFile.previewElement.classList.add("dz-success");
+        mockFile.previewElement.classList.add("dz-complete");
       }
     }
-
   }
-}
+};
 </script>
 
 <style scoped>
-    .dropzone {
-        border: 2px solid #E5E5E5;
-        font-family: 'Roboto', sans-serif;
-        color: #777;
-        transition: background-color .2s linear;
-        padding: 5px;
-    }
+.dropzone {
+  border: 2px solid #e5e5e5;
+  font-family: "Roboto", sans-serif;
+  color: #777;
+  transition: background-color 0.2s linear;
+  padding: 5px;
+}
 
-    .dropzone:hover {
-        background-color: #F6F6F6;
-    }
+.dropzone:hover {
+  background-color: #f6f6f6;
+}
 
-    i {
-        color: #CCC;
-    }
+i {
+  color: #ccc;
+}
 
-    .dropzone .dz-image img {
-        width: 100%;
-        height: 100%;
-    }
+.dropzone .dz-image img {
+  width: 100%;
+  height: 100%;
+}
 
-    .dropzone input[name='file'] {
-        display: none;
-    }
+.dropzone input[name="file"] {
+  display: none;
+}
 
-    .dropzone .dz-preview .dz-image {
-        border-radius: 0px;
-    }
+.dropzone .dz-preview .dz-image {
+  border-radius: 0px;
+}
 
-    .dropzone .dz-preview:hover .dz-image img {
-        transform: none;
-        filter: none;
-        width: 100%;
-        height: 100%;
-    }
+.dropzone .dz-preview:hover .dz-image img {
+  transform: none;
+  filter: none;
+  width: 100%;
+  height: 100%;
+}
 
-    .dropzone .dz-preview .dz-details {
-        bottom: 0px;
-        top: 0px;
-        color: white;
-        background-color: rgba(33, 150, 243, 0.8);
-        transition: opacity .2s linear;
-        text-align: left;
-    }
+.dropzone .dz-preview .dz-details {
+  bottom: 0px;
+  top: 0px;
+  color: white;
+  background-color: rgba(33, 150, 243, 0.8);
+  transition: opacity 0.2s linear;
+  text-align: left;
+}
 
-    .dropzone .dz-preview .dz-details .dz-filename span, .dropzone .dz-preview .dz-details .dz-size span {
-        background-color: transparent;
-    }
+.dropzone .dz-preview .dz-details .dz-filename span,
+.dropzone .dz-preview .dz-details .dz-size span {
+  background-color: transparent;
+}
 
-    .dropzone .dz-preview .dz-details .dz-filename:not(:hover) span {
-        border: none;
-    }
+.dropzone .dz-preview .dz-details .dz-filename:not(:hover) span {
+  border: none;
+}
 
-    .dropzone .dz-preview .dz-details .dz-filename:hover span {
-        background-color: transparent;
-        border: none;
-    }
+.dropzone .dz-preview .dz-details .dz-filename:hover span {
+  background-color: transparent;
+  border: none;
+}
 
-    .dropzone .dz-preview .dz-remove {
-        position: absolute;
-        z-index: 30;
-        color: white;
-        margin-left: 15px;
-        padding: 10px;
-        top: inherit;
-        bottom: 15px;
-        border: 2px white solid;
-        text-decoration: none;
-        text-transform: uppercase;
-        font-size: 0.8rem;
-        font-weight: 800;
-        letter-spacing: 1.1px;
-        opacity: 0;
-    }
+.dropzone .dz-preview .dz-remove {
+  position: absolute;
+  z-index: 30;
+  color: white;
+  margin-left: 15px;
+  padding: 10px;
+  top: inherit;
+  bottom: 15px;
+  border: 2px white solid;
+  text-decoration: none;
+  text-transform: uppercase;
+  font-size: 0.8rem;
+  font-weight: 800;
+  letter-spacing: 1.1px;
+  opacity: 0;
+}
 
-    .dropzone .dz-preview:hover .dz-remove {
-        opacity: 1;
-    }
+.dropzone .dz-preview:hover .dz-remove {
+  opacity: 1;
+}
 
-    .dropzone .dz-preview .dz-success-mark, .dropzone .dz-preview .dz-error-mark {
-        margin-left: -40px;
-        margin-top: -50px;
-    }
+.dropzone .dz-preview .dz-success-mark,
+.dropzone .dz-preview .dz-error-mark {
+  margin-left: -40px;
+  margin-top: -50px;
+}
 
-    .dropzone .dz-preview .dz-success-mark i, .dropzone .dz-preview .dz-error-mark i {
-        color: white;
-        font-size: 5rem;
-    }
+.dropzone .dz-preview .dz-success-mark i,
+.dropzone .dz-preview .dz-error-mark i {
+  color: white;
+  font-size: 5rem;
+}
 </style>
diff --git a/src/components/ErrorLog/index.vue b/src/components/ErrorLog/index.vue
index 6119c037..5cf626b9 100644
--- a/src/components/ErrorLog/index.vue
+++ b/src/components/ErrorLog/index.vue
@@ -1,6 +1,10 @@
 <template>
-  <div v-if="errorLogs.length>0">
-    <el-badge :is-dot="true" style="line-height: 25px;margin-top: -5px;" @click.native="dialogTableVisible=true">
+  <div v-if="errorLogs.length > 0">
+    <el-badge
+      :is-dot="true"
+      style="line-height: 25px;margin-top: -5px;"
+      @click.native="dialogTableVisible = true"
+    >
       <el-button style="padding: 8px 10px;" size="small" type="danger">
         <svg-icon icon-class="bug" />
       </el-button>
@@ -9,27 +13,37 @@
     <el-dialog :visible.sync="dialogTableVisible" width="80%" append-to-body>
       <div slot="title">
         <span style="padding-right: 10px;">Error Log</span>
-        <el-button size="mini" type="primary" icon="el-icon-delete" @click="clearAll">Clear All</el-button>
+        <el-button
+          size="mini"
+          type="primary"
+          icon="el-icon-delete"
+          @click="clearAll"
+          >Clear All</el-button
+        >
       </div>
       <el-table :data="errorLogs" border>
         <el-table-column label="Message">
-          <template slot-scope="{row}">
+          <template slot-scope="{ row }">
             <div>
               <span class="message-title">Msg:</span>
               <el-tag type="danger">
                 {{ row.err.message }}
               </el-tag>
             </div>
-            <br>
+            <br />
             <div>
-              <span class="message-title" style="padding-right: 10px;">Info: </span>
+              <span class="message-title" style="padding-right: 10px;"
+                >Info:
+              </span>
               <el-tag type="warning">
                 {{ row.vm.$vnode.tag }} error in {{ row.info }}
               </el-tag>
             </div>
-            <br>
+            <br />
             <div>
-              <span class="message-title" style="padding-right: 16px;">Url: </span>
+              <span class="message-title" style="padding-right: 16px;"
+                >Url:
+              </span>
               <el-tag type="success">
                 {{ row.url }}
               </el-tag>
@@ -48,24 +62,24 @@
 
 <script>
 export default {
-  name: 'ErrorLog',
+  name: "ErrorLog",
   data() {
     return {
       dialogTableVisible: false
-    }
+    };
   },
   computed: {
     errorLogs() {
-      return this.$store.getters.errorLogs
+      return this.$store.getters.errorLogs;
     }
   },
   methods: {
     clearAll() {
-      this.dialogTableVisible = false
-      this.$store.dispatch('errorLog/clearErrorLog')
+      this.dialogTableVisible = false;
+      this.$store.dispatch("errorLog/clearErrorLog");
     }
   }
-}
+};
 </script>
 
 <style scoped>
diff --git a/src/components/GithubCorner/index.vue b/src/components/GithubCorner/index.vue
index 970faaf1..22662b80 100644
--- a/src/components/GithubCorner/index.vue
+++ b/src/components/GithubCorner/index.vue
@@ -1,5 +1,10 @@
 <template>
-  <a href="https://github.com/PanJiaChen/vue-element-admin" target="_blank" class="github-corner" aria-label="View source on Github">
+  <a
+    href="https://github.com/PanJiaChen/vue-element-admin"
+    target="_blank"
+    class="github-corner"
+    aria-label="View source on Github"
+  >
     <svg
       width="80"
       height="80"
@@ -25,30 +30,30 @@
 
 <style scoped>
 .github-corner:hover .octo-arm {
-  animation: octocat-wave 560ms ease-in-out
+  animation: octocat-wave 560ms ease-in-out;
 }
 
 @keyframes octocat-wave {
   0%,
   100% {
-    transform: rotate(0)
+    transform: rotate(0);
   }
   20%,
   60% {
-    transform: rotate(-25deg)
+    transform: rotate(-25deg);
   }
   40%,
   80% {
-    transform: rotate(10deg)
+    transform: rotate(10deg);
   }
 }
 
-@media (max-width:500px) {
+@media (max-width: 500px) {
   .github-corner:hover .octo-arm {
-    animation: none
+    animation: none;
   }
   .github-corner .octo-arm {
-    animation: octocat-wave 560ms ease-in-out
+    animation: octocat-wave 560ms ease-in-out;
   }
 }
 </style>
diff --git a/src/components/Hamburger/index.vue b/src/components/Hamburger/index.vue
index 368b0021..cc798b5c 100644
--- a/src/components/Hamburger/index.vue
+++ b/src/components/Hamburger/index.vue
@@ -1,21 +1,23 @@
 <template>
   <div style="padding: 0 15px;" @click="toggleClick">
     <svg
-      :class="{'is-active':isActive}"
+      :class="{ 'is-active': isActive }"
       class="hamburger"
       viewBox="0 0 1024 1024"
       xmlns="http://www.w3.org/2000/svg"
       width="64"
       height="64"
     >
-      <path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />
+      <path
+        d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z"
+      />
     </svg>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'Hamburger',
+  name: "Hamburger",
   props: {
     isActive: {
       type: Boolean,
@@ -24,10 +26,10 @@ export default {
   },
   methods: {
     toggleClick() {
-      this.$emit('toggleClick')
+      this.$emit("toggleClick");
     }
   }
-}
+};
 </script>
 
 <style scoped>
diff --git a/src/components/HeaderSearch/index.vue b/src/components/HeaderSearch/index.vue
index af047168..1f667ee0 100644
--- a/src/components/HeaderSearch/index.vue
+++ b/src/components/HeaderSearch/index.vue
@@ -1,6 +1,10 @@
 <template>
-  <div :class="{'show':show}" class="header-search">
-    <svg-icon class-name="search-icon" icon-class="search" @click.stop="click" />
+  <div :class="{ show: show }" class="header-search">
+    <svg-icon
+      class-name="search-icon"
+      icon-class="search"
+      @click.stop="click"
+    />
     <el-select
       ref="headerSearchSelect"
       v-model="search"
@@ -12,7 +16,12 @@
       class="header-search-select"
       @change="change"
     >
-      <el-option v-for="item in options" :key="item.path" :value="item" :label="item.title.join(' > ')" />
+      <el-option
+        v-for="item in options"
+        :key="item.path"
+        :value="item"
+        :label="item.title.join(' > ')"
+      />
     </el-select>
   </div>
 </template>
@@ -20,62 +29,62 @@
 <script>
 // fuse is a lightweight fuzzy-search module
 // make search results more in line with expectations
-import Fuse from 'fuse.js'
-import path from 'path'
+import Fuse from "fuse.js";
+import path from "path";
 
 export default {
-  name: 'HeaderSearch',
+  name: "HeaderSearch",
   data() {
     return {
-      search: '',
+      search: "",
       options: [],
       searchPool: [],
       show: false,
       fuse: undefined
-    }
+    };
   },
   computed: {
     routes() {
-      return this.$store.getters.permission_routes
+      return this.$store.getters.permission_routes;
     }
   },
   watch: {
     routes() {
-      this.searchPool = this.generateRoutes(this.routes)
+      this.searchPool = this.generateRoutes(this.routes);
     },
     searchPool(list) {
-      this.initFuse(list)
+      this.initFuse(list);
     },
     show(value) {
       if (value) {
-        document.body.addEventListener('click', this.close)
+        document.body.addEventListener("click", this.close);
       } else {
-        document.body.removeEventListener('click', this.close)
+        document.body.removeEventListener("click", this.close);
       }
     }
   },
   mounted() {
-    this.searchPool = this.generateRoutes(this.routes)
+    this.searchPool = this.generateRoutes(this.routes);
   },
   methods: {
     click() {
-      this.show = !this.show
+      this.show = !this.show;
       if (this.show) {
-        this.$refs.headerSearchSelect && this.$refs.headerSearchSelect.focus()
+        this.$refs.headerSearchSelect && this.$refs.headerSearchSelect.focus();
       }
     },
     close() {
-      this.$refs.headerSearchSelect && this.$refs.headerSearchSelect.blur()
-      this.options = []
-      this.show = false
+      this.$refs.headerSearchSelect && this.$refs.headerSearchSelect.blur();
+      this.options = [];
+      this.show = false;
     },
     change(val) {
-      this.$router.push(val.path)
-      this.search = ''
-      this.options = []
+      this.$router.push(val.path);
+      this.search = "";
+      this.options = [];
       this.$nextTick(() => {
-        this.show = false
-      })
+        this.show = false;
+      });
     },
     initFuse(list) {
       this.fuse = new Fuse(list, {
@@ -85,58 +94,67 @@ export default {
         distance: 100,
         maxPatternLength: 32,
         minMatchCharLength: 1,
-        keys: [{
-          name: 'title',
-          weight: 0.7
-        }, {
-          name: 'path',
-          weight: 0.3
-        }]
-      })
+        keys: [
+          {
+            name: "title",
+            weight: 0.7
+          },
+          {
+            name: "path",
+            weight: 0.3
+          }
+        ]
+      });
     },
     // Filter out the routes that can be displayed in the sidebar
     // And generate the internationalized title
-    generateRoutes(routes, basePath = '/', prefixTitle = []) {
-      let res = []
+    generateRoutes(routes, basePath = "/", prefixTitle = []) {
+      let res = [];
 
       for (const router of routes) {
         // skip hidden router
-        if (router.hidden) { continue }
+        if (router.hidden) {
+          continue;
+        }
 
         const data = {
           path: path.resolve(basePath, router.path),
           title: [...prefixTitle]
-        }
+        };
 
         if (router.meta && router.meta.title) {
-          data.title = [...data.title, router.meta.title]
+          data.title = [...data.title, router.meta.title];
 
-          if (router.redirect !== 'noRedirect') {
+          if (router.redirect !== "noRedirect") {
             // only push the routes with title
             // special case: need to exclude parent router without redirect
-            res.push(data)
+            res.push(data);
           }
         }
 
         // recursive child routes
         if (router.children) {
-          const tempRoutes = this.generateRoutes(router.children, data.path, data.title)
+          const tempRoutes = this.generateRoutes(
+            router.children,
+            data.path,
+            data.title
+          );
           if (tempRoutes.length >= 1) {
-            res = [...res, ...tempRoutes]
+            res = [...res, ...tempRoutes];
           }
         }
       }
-      return res
+      return res;
     },
     querySearch(query) {
-      if (query !== '') {
-        this.options = this.fuse.search(query)
+      if (query !== "") {
+        this.options = this.fuse.search(query);
       } else {
-        this.options = []
+        this.options = [];
       }
     }
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>
@@ -159,7 +177,7 @@ export default {
     display: inline-block;
     vertical-align: middle;
 
-    /deep/ .el-input__inner {
+    ::v-deep .el-input__inner {
       border-radius: 0;
       border: 0;
       padding-left: 0;
diff --git a/src/components/ImageCropper/index.vue b/src/components/ImageCropper/index.vue
index c2688e99..6915d466 100644
--- a/src/components/ImageCropper/index.vue
+++ b/src/components/ImageCropper/index.vue
@@ -6,15 +6,30 @@
       </div>
 
       <div v-show="step == 1" class="vicp-step1">
-        <div class="vicp-drop-area" @dragleave="preventDefault" @dragover="preventDefault" @dragenter="preventDefault" @click="handleClick" @drop="handleChange">
+        <div
+          class="vicp-drop-area"
+          @dragleave="preventDefault"
+          @dragover="preventDefault"
+          @dragenter="preventDefault"
+          @click="handleClick"
+          @drop="handleChange"
+        >
           <i v-show="loading != 1" class="vicp-icon1">
             <i class="vicp-icon1-arrow" />
             <i class="vicp-icon1-body" />
             <i class="vicp-icon1-bottom" />
           </i>
           <span v-show="loading !== 1" class="vicp-hint">{{ lang.hint }}</span>
-          <span v-show="!isSupported" class="vicp-no-supported-hint">{{ lang.noSupported }}</span>
-          <input v-show="false" v-if="step == 1" ref="fileinput" type="file" @change="handleChange">
+          <span v-show="!isSupported" class="vicp-no-supported-hint">{{
+            lang.noSupported
+          }}</span>
+          <input
+            v-show="false"
+            v-if="step == 1"
+            ref="fileinput"
+            type="file"
+            @change="handleChange"
+          />
         </div>
         <div v-show="hasError" class="vicp-error">
           <i class="vicp-icon2" /> {{ errorMsg }}
@@ -49,30 +64,66 @@
                 @mousemove="imgMove"
                 @mouseup="createImg"
                 @mouseout="createImg"
-              >
-              <div :style="sourceImgShadeStyle" class="vicp-img-shade vicp-img-shade-1" />
-              <div :style="sourceImgShadeStyle" class="vicp-img-shade vicp-img-shade-2" />
+              />
+              <div
+                :style="sourceImgShadeStyle"
+                class="vicp-img-shade vicp-img-shade-1"
+              />
+              <div
+                :style="sourceImgShadeStyle"
+                class="vicp-img-shade vicp-img-shade-2"
+              />
             </div>
 
             <div class="vicp-range">
-              <input :value="scale.range" type="range" step="1" min="0" max="100" @input="zoomChange">
-              <i class="vicp-icon5" @mousedown="startZoomSub" @mouseout="endZoomSub" @mouseup="endZoomSub" />
-              <i class="vicp-icon6" @mousedown="startZoomAdd" @mouseout="endZoomAdd" @mouseup="endZoomAdd" />
+              <input
+                :value="scale.range"
+                type="range"
+                step="1"
+                min="0"
+                max="100"
+                @input="zoomChange"
+              />
+              <i
+                class="vicp-icon5"
+                @mousedown="startZoomSub"
+                @mouseout="endZoomSub"
+                @mouseup="endZoomSub"
+              />
+              <i
+                class="vicp-icon6"
+                @mousedown="startZoomAdd"
+                @mouseout="endZoomAdd"
+                @mouseup="endZoomAdd"
+              />
             </div>
 
             <div v-if="!noRotate" class="vicp-rotate">
-              <i @mousedown="startRotateLeft" @mouseout="endRotate" @mouseup="endRotate">↺</i>
-              <i @mousedown="startRotateRight" @mouseout="endRotate" @mouseup="endRotate">↻</i>
+              <i
+                @mousedown="startRotateLeft"
+                @mouseout="endRotate"
+                @mouseup="endRotate"
+                >↺</i
+              >
+              <i
+                @mousedown="startRotateRight"
+                @mouseout="endRotate"
+                @mouseup="endRotate"
+                >↻</i
+              >
             </div>
           </div>
           <div v-show="true" class="vicp-crop-right">
             <div class="vicp-preview">
               <div v-if="!noSquare" class="vicp-preview-item">
-                <img :src="createImgUrl" :style="previewStyle">
+                <img :src="createImgUrl" :style="previewStyle" />
                 <span>{{ lang.preview }}</span>
               </div>
-              <div v-if="!noCircle" class="vicp-preview-item vicp-preview-item-circle">
-                <img :src="createImgUrl" :style="previewStyle">
+              <div
+                v-if="!noCircle"
+                class="vicp-preview-item vicp-preview-item-circle"
+              >
+                <img :src="createImgUrl" :style="previewStyle" />
                 <span>{{ lang.preview }}</span>
               </div>
             </div>
@@ -80,15 +131,26 @@
         </div>
         <div class="vicp-operate">
           <a @click="setStep(1)" @mousedown="ripple">{{ lang.btn.back }}</a>
-          <a class="vicp-operate-btn" @click="prepareUpload" @mousedown="ripple">{{ lang.btn.save }}</a>
+          <a
+            class="vicp-operate-btn"
+            @click="prepareUpload"
+            @mousedown="ripple"
+            >{{ lang.btn.save }}</a
+          >
         </div>
       </div>
 
       <div v-if="step == 3" class="vicp-step3">
         <div class="vicp-upload">
-          <span v-show="loading === 1" class="vicp-loading">{{ lang.loading }}</span>
+          <span v-show="loading === 1" class="vicp-loading">{{
+            lang.loading
+          }}</span>
           <div class="vicp-progress-wrap">
-            <span v-show="loading === 1" :style="progressStyle" class="vicp-progress" />
+            <span
+              v-show="loading === 1"
+              :style="progressStyle"
+              class="vicp-progress"
+            />
           </div>
           <div v-show="hasError" class="vicp-error">
             <i class="vicp-icon2" /> {{ errorMsg }}
@@ -109,41 +171,41 @@
 
 <script>
 /* eslint-disable */
-'use strict'
-import request from '@/utils/request'
-import language from './utils/language.js'
-import mimes from './utils/mimes.js'
-import data2blob from './utils/data2blob.js'
-import effectRipple from './utils/effectRipple.js'
+"use strict";
+import request from "@/utils/request";
+import language from "./utils/language.js";
+import mimes from "./utils/mimes.js";
+import data2blob from "./utils/data2blob.js";
+import effectRipple from "./utils/effectRipple.js";
 export default {
   props: {
     // 域，上传文件name，触发事件会带上（如果一个页面多个图片上传控件，可以做区分
     field: {
       type: String,
-      'default': 'avatar'
+      default: "avatar"
     },
     // 原名key，类似于id，触发事件会带上（如果一个页面多个图片上传控件，可以做区分
     ki: {
-      'default': 0
+      default: 0
     },
     // 显示该控件与否
     value: {
-      'default': true
+      default: true
     },
     // 上传地址
     url: {
       type: String,
-      'default': ''
+      default: ""
     },
     // 其他要上传文件附带的数据，对象格式
     params: {
       type: Object,
-      'default': null
+      default: null
     },
     // Add custom headers
     headers: {
       type: Object,
-      'default': null
+      default: null
     },
     // 剪裁图片的宽
     width: {
@@ -173,53 +235,45 @@ export default {
     // 单文件大小限制
     maxSize: {
       type: Number,
-      'default': 10240
+      default: 10240
     },
     // 语言类型
     langType: {
       type: String,
-      'default': 'zh'
+      default: "zh"
     },
     // 语言包
     langExt: {
       type: Object,
-      'default': null
+      default: null
     },
     // 图片上传格式
     imgFormat: {
       type: String,
-      'default': 'png'
+      default: "png"
     },
     // 是否支持跨域
     withCredentials: {
       type: Boolean,
-      'default': false
+      default: false
     }
   },
   data() {
-    const that = this
-    const {
-      imgFormat,
-      langType,
-      langExt,
-      width,
-      height
-    } = that
-    let isSupported = true
-    const allowImgFormat = [
-      'jpg',
-      'png'
-    ]
-    const tempImgFormat = allowImgFormat.indexOf(imgFormat) === -1 ? 'jpg' : imgFormat
-    const lang = language[langType] ? language[langType] : language['en']
-    const mime = mimes[tempImgFormat]
+    const that = this;
+    const { imgFormat, langType, langExt, width, height } = that;
+    let isSupported = true;
+    const allowImgFormat = ["jpg", "png"];
+    const tempImgFormat =
+      allowImgFormat.indexOf(imgFormat) === -1 ? "jpg" : imgFormat;
+    const lang = language[langType] ? language[langType] : language["en"];
+    const mime = mimes[tempImgFormat];
     // 规范图片格式
-    that.imgFormat = tempImgFormat
+    that.imgFormat = tempImgFormat;
     if (langExt) {
-      Object.assign(lang, langExt)
+      Object.assign(lang, langExt);
     }
-    if (typeof FormData !== 'function') {
-      isSupported = false
+    if (typeof FormData !== "function") {
+      isSupported = false;
     }
     return {
       // 图片的mime
@@ -229,7 +283,7 @@ export default {
       // 浏览器是否支持该控件
       isSupported,
       // 浏览器是否支持触屏事件
-      isSupportTouch: document.hasOwnProperty('ontouchstart'),
+      isSupportTouch: document.hasOwnProperty("ontouchstart"),
       // 步骤
       step: 1, // 1选择文件 2剪裁 3上传
       // 上传状态及进度
@@ -237,13 +291,13 @@ export default {
       progress: 0,
       // 是否有错误及错误信息
       hasError: false,
-      errorMsg: '',
+      errorMsg: "",
       // 需求图宽高比
       ratio: width / height,
       // 原图地址、生成图片地址
       sourceImg: null,
-      sourceImgUrl: '',
-      createImgUrl: '',
+      sourceImgUrl: "",
+      createImgUrl: "",
       // 原图片拖动事件初始值
       sourceImgMouseDown: {
         on: false,
@@ -258,7 +312,8 @@ export default {
         height: 100
       },
       // 原图容器宽高
-      sourceImgContainer: { // sic
+      sourceImgContainer: {
+        // sic
         width: 240,
         height: 184 // 如果生成图比例与此一致会出现bug，先改成特殊的格式吧，哈哈哈
       },
@@ -281,62 +336,52 @@ export default {
         naturalWidth: 0, // 原宽
         naturalHeight: 0
       }
-    }
+    };
   },
   computed: {
     // 进度条样式
     progressStyle() {
-      const {
-        progress
-      } = this
+      const { progress } = this;
       return {
-        width: progress + '%'
-      }
+        width: progress + "%"
+      };
     },
     // 原图样式
     sourceImgStyle() {
-      const {
-        scale,
-        sourceImgMasking
-      } = this
-      const top = scale.y + sourceImgMasking.y + 'px'
-      const left = scale.x + sourceImgMasking.x + 'px'
+      const { scale, sourceImgMasking } = this;
+      const top = scale.y + sourceImgMasking.y + "px";
+      const left = scale.x + sourceImgMasking.x + "px";
       return {
         top,
         left,
-        width: scale.width + 'px',
-        height: scale.height + 'px',
-        transform: 'rotate(' + scale.degree + 'deg)', // 旋转时 左侧原始图旋转样式
-        '-ms-transform': 'rotate(' + scale.degree + 'deg)', // 兼容IE9
-        '-moz-transform': 'rotate(' + scale.degree + 'deg)', // 兼容FireFox
-        '-webkit-transform': 'rotate(' + scale.degree + 'deg)', // 兼容Safari 和 chrome
-        '-o-transform': 'rotate(' + scale.degree + 'deg)' // 兼容 Opera
-      }
+        width: scale.width + "px",
+        height: scale.height + "px",
+        transform: "rotate(" + scale.degree + "deg)", // 旋转时 左侧原始图旋转样式
+        "-ms-transform": "rotate(" + scale.degree + "deg)", // 兼容IE9
+        "-moz-transform": "rotate(" + scale.degree + "deg)", // 兼容FireFox
+        "-webkit-transform": "rotate(" + scale.degree + "deg)", // 兼容Safari 和 chrome
+        "-o-transform": "rotate(" + scale.degree + "deg)" // 兼容 Opera
+      };
     },
     // 原图蒙版属性
     sourceImgMasking() {
-      const {
-        width,
-        height,
-        ratio,
-        sourceImgContainer
-      } = this
-      const sic = sourceImgContainer
-      const sicRatio = sic.width / sic.height // 原图容器宽高比
-      let x = 0
-      let y = 0
-      let w = sic.width
-      let h = sic.height
-      let scale = 1
+      const { width, height, ratio, sourceImgContainer } = this;
+      const sic = sourceImgContainer;
+      const sicRatio = sic.width / sic.height; // 原图容器宽高比
+      let x = 0;
+      let y = 0;
+      let w = sic.width;
+      let h = sic.height;
+      let scale = 1;
       if (ratio < sicRatio) {
-        scale = sic.height / height
-        w = sic.height * ratio
-        x = (sic.width - w) / 2
+        scale = sic.height / height;
+        w = sic.height * ratio;
+        x = (sic.width - w) / 2;
       }
       if (ratio > sicRatio) {
-        scale = sic.width / width
-        h = sic.width / ratio
-        y = (sic.height - h) / 2
+        scale = sic.width / width;
+        h = sic.width / ratio;
+        y = (sic.height - h) / 2;
       }
       return {
         scale, // 蒙版相对需求宽高的缩放
@@ -344,98 +389,92 @@ export default {
         y,
         width: w,
         height: h
-      }
+      };
     },
     // 原图遮罩样式
     sourceImgShadeStyle() {
-      const {
-        sourceImgMasking,
-        sourceImgContainer
-      } = this
-      const sic = sourceImgContainer
-      const sim = sourceImgMasking
-      const w = sim.width == sic.width ? sim.width : (sic.width - sim.width) / 2
-      const h = sim.height == sic.height ? sim.height : (sic.height - sim.height) / 2
+      const { sourceImgMasking, sourceImgContainer } = this;
+      const sic = sourceImgContainer;
+      const sim = sourceImgMasking;
+      const w =
+        sim.width == sic.width ? sim.width : (sic.width - sim.width) / 2;
+      const h =
+        sim.height == sic.height ? sim.height : (sic.height - sim.height) / 2;
       return {
-        width: w + 'px',
-        height: h + 'px'
-      }
+        width: w + "px",
+        height: h + "px"
+      };
     },
     previewStyle() {
-      const {
-        width,
-        height,
-        ratio,
-        previewContainer
-      } = this
-      const pc = previewContainer
-      let w = pc.width
-      let h = pc.height
-      const pcRatio = w / h
+      const { width, height, ratio, previewContainer } = this;
+      const pc = previewContainer;
+      let w = pc.width;
+      let h = pc.height;
+      const pcRatio = w / h;
       if (ratio < pcRatio) {
-        w = pc.height * ratio
+        w = pc.height * ratio;
       }
       if (ratio > pcRatio) {
-        h = pc.width / ratio
+        h = pc.width / ratio;
       }
       return {
-        width: w + 'px',
-        height: h + 'px'
-      }
+        width: w + "px",
+        height: h + "px"
+      };
     }
   },
   watch: {
     value(newValue) {
       if (newValue && this.loading != 1) {
-        this.reset()
+        this.reset();
       }
     }
   },
   methods: {
     // 点击波纹效果
     ripple(e) {
-      effectRipple(e)
+      effectRipple(e);
     },
     // 关闭控件
     off() {
       setTimeout(() => {
-        this.$emit('input', false)
-        this.$emit('close')
+        this.$emit("input", false);
+        this.$emit("close");
         if (this.step == 3 && this.loading == 2) {
-          this.setStep(1)
+          this.setStep(1);
         }
-      }, 200)
+      }, 200);
     },
     // 设置步骤
     setStep(no) {
       // 延时是为了显示动画效果呢，哈哈哈
       setTimeout(() => {
-        this.step = no
-      }, 200)
+        this.step = no;
+      }, 200);
     },
     /* 图片选择区域函数绑定
      ---------------------------------------------------------------*/
     preventDefault(e) {
-      e.preventDefault()
-      return false
+      e.preventDefault();
+      return false;
     },
     handleClick(e) {
       if (this.loading !== 1) {
         if (e.target !== this.$refs.fileinput) {
-          e.preventDefault()
+          e.preventDefault();
           if (document.activeElement !== this.$refs) {
-            this.$refs.fileinput.click()
+            this.$refs.fileinput.click();
           }
         }
       }
     },
     handleChange(e) {
-      e.preventDefault()
+      e.preventDefault();
       if (this.loading !== 1) {
-        const files = e.target.files || e.dataTransfer.files
-        this.reset()
+        const files = e.target.files || e.dataTransfer.files;
+        this.reset();
         if (this.checkFile(files[0])) {
-          this.setSourceImg(files[0])
+          this.setSourceImg(files[0]);
         }
       }
     },
@@ -443,41 +482,38 @@ export default {
     // 检测选择的文件是否合适
     checkFile(file) {
       let that = this,
-        {
-          lang,
-          maxSize
-        } = that
+        { lang, maxSize } = that;
       // 仅限图片
-      if (file.type.indexOf('image') === -1) {
-        that.hasError = true
-        that.errorMsg = lang.error.onlyImg
-        return false
+      if (file.type.indexOf("image") === -1) {
+        that.hasError = true;
+        that.errorMsg = lang.error.onlyImg;
+        return false;
       }
       // 超出大小
       if (file.size / 1024 > maxSize) {
-        that.hasError = true
-        that.errorMsg = lang.error.outOfSize + maxSize + 'kb'
-        return false
+        that.hasError = true;
+        that.errorMsg = lang.error.outOfSize + maxSize + "kb";
+        return false;
       }
-      return true
+      return true;
     },
     // 重置控件
     reset() {
-      const that = this
-      that.loading = 0
-      that.hasError = false
-      that.errorMsg = ''
-      that.progress = 0
+      const that = this;
+      that.loading = 0;
+      that.hasError = false;
+      that.errorMsg = "";
+      that.progress = 0;
     },
     // 设置图片源
     setSourceImg(file) {
       let that = this,
-        fr = new FileReader()
+        fr = new FileReader();
       fr.onload = function(e) {
-        that.sourceImgUrl = fr.result
-        that.startCrop()
-      }
-      fr.readAsDataURL(file)
+        that.sourceImgUrl = fr.result;
+        that.startCrop();
+      };
+      fr.readAsDataURL(file);
     },
     // 剪裁前准备工作
     startCrop() {
@@ -492,8 +528,8 @@ export default {
           lang
         } = that,
         sim = sourceImgMasking,
-        img = new Image()
-      img.src = sourceImgUrl
+        img = new Image();
+      img.src = sourceImgUrl;
       img.onload = function() {
         let nWidth = img.naturalWidth,
           nHeight = img.naturalHeight,
@@ -501,73 +537,64 @@ export default {
           w = sim.width,
           h = sim.height,
           x = 0,
-          y = 0
+          y = 0;
         // 图片像素不达标
         if (nWidth < width || nHeight < height) {
-          that.hasError = true
-          that.errorMsg = lang.error.lowestPx + width + '*' + height
-          return false
+          that.hasError = true;
+          that.errorMsg = lang.error.lowestPx + width + "*" + height;
+          return false;
         }
         if (ratio > nRatio) {
-          h = w / nRatio
-          y = (sim.height - h) / 2
+          h = w / nRatio;
+          y = (sim.height - h) / 2;
         }
         if (ratio < nRatio) {
-          w = h * nRatio
-          x = (sim.width - w) / 2
+          w = h * nRatio;
+          x = (sim.width - w) / 2;
         }
-        scale.range = 0
-        scale.x = x
-        scale.y = y
-        scale.width = w
-        scale.height = h
-        scale.degree = 0
-        scale.minWidth = w
-        scale.minHeight = h
-        scale.maxWidth = nWidth * sim.scale
-        scale.maxHeight = nHeight * sim.scale
-        scale.naturalWidth = nWidth
-        scale.naturalHeight = nHeight
-        that.sourceImg = img
-        that.createImg()
-        that.setStep(2)
-      }
+        scale.range = 0;
+        scale.x = x;
+        scale.y = y;
+        scale.width = w;
+        scale.height = h;
+        scale.degree = 0;
+        scale.minWidth = w;
+        scale.minHeight = h;
+        scale.maxWidth = nWidth * sim.scale;
+        scale.maxHeight = nHeight * sim.scale;
+        scale.naturalWidth = nWidth;
+        scale.naturalHeight = nHeight;
+        that.sourceImg = img;
+        that.createImg();
+        that.setStep(2);
+      };
     },
     // 鼠标按下图片准备移动
     imgStartMove(e) {
-      e.preventDefault()
+      e.preventDefault();
       // 支持触摸事件，则鼠标事件无效
       if (this.isSupportTouch && !e.targetTouches) {
-        return false
+        return false;
       }
       let et = e.targetTouches ? e.targetTouches[0] : e,
-        {
-          sourceImgMouseDown,
-          scale
-        } = this,
-        simd = sourceImgMouseDown
-      simd.mX = et.screenX
-      simd.mY = et.screenY
-      simd.x = scale.x
-      simd.y = scale.y
-      simd.on = true
+        { sourceImgMouseDown, scale } = this,
+        simd = sourceImgMouseDown;
+      simd.mX = et.screenX;
+      simd.mY = et.screenY;
+      simd.x = scale.x;
+      simd.y = scale.y;
+      simd.on = true;
     },
     // 鼠标按下状态下移动，图片移动
     imgMove(e) {
-      e.preventDefault()
+      e.preventDefault();
       // 支持触摸事件，则鼠标事件无效
       if (this.isSupportTouch && !e.targetTouches) {
-        return false
+        return false;
       }
       let et = e.targetTouches ? e.targetTouches[0] : e,
         {
-          sourceImgMouseDown: {
-            on,
-            mX,
-            mY,
-            x,
-            y
-          },
+          sourceImgMouseDown: { on, mX, mY, x, y },
           scale,
           sourceImgMasking
         } = this,
@@ -577,125 +604,109 @@ export default {
         dX = nX - mX,
         dY = nY - mY,
         rX = x + dX,
-        rY = y + dY
-      if (!on) return
+        rY = y + dY;
+      if (!on) return;
       if (rX > 0) {
-        rX = 0
+        rX = 0;
       }
       if (rY > 0) {
-        rY = 0
+        rY = 0;
       }
       if (rX < sim.width - scale.width) {
-        rX = sim.width - scale.width
+        rX = sim.width - scale.width;
       }
       if (rY < sim.height - scale.height) {
-        rY = sim.height - scale.height
+        rY = sim.height - scale.height;
       }
-      scale.x = rX
-      scale.y = rY
+      scale.x = rX;
+      scale.y = rY;
     },
-     // 按钮按下开始向右旋转
+    // 按钮按下开始向右旋转
     startRotateRight(e) {
       let that = this,
-        {
-          scale
-        } = that
-      scale.rotateRight = true
+        { scale } = that;
+      scale.rotateRight = true;
       function rotate() {
         if (scale.rotateRight) {
-          const degree = ++scale.degree
-          that.createImg(degree)
+          const degree = ++scale.degree;
+          that.createImg(degree);
           setTimeout(function() {
-            rotate()
-          }, 60)
+            rotate();
+          }, 60);
         }
       }
-      rotate()
+      rotate();
     },
     // 按钮按下开始向右旋转
     startRotateLeft(e) {
       let that = this,
-        {
-          scale
-        } = that
-      scale.rotateLeft = true
+        { scale } = that;
+      scale.rotateLeft = true;
       function rotate() {
         if (scale.rotateLeft) {
-          const degree = --scale.degree
-          that.createImg(degree)
+          const degree = --scale.degree;
+          that.createImg(degree);
           setTimeout(function() {
-            rotate()
-          }, 60)
+            rotate();
+          }, 60);
         }
       }
-      rotate()
+      rotate();
     },
     // 停止旋转
     endRotate() {
-      const {
-        scale
-      } = this
-      scale.rotateLeft = false
-      scale.rotateRight = false
+      const { scale } = this;
+      scale.rotateLeft = false;
+      scale.rotateRight = false;
     },
     // 按钮按下开始放大
     startZoomAdd(e) {
       let that = this,
-        {
-          scale
-        } = that
-      scale.zoomAddOn = true
+        { scale } = that;
+      scale.zoomAddOn = true;
       function zoom() {
         if (scale.zoomAddOn) {
-          const range = scale.range >= 100 ? 100 : ++scale.range
-          that.zoomImg(range)
+          const range = scale.range >= 100 ? 100 : ++scale.range;
+          that.zoomImg(range);
           setTimeout(function() {
-            zoom()
-          }, 60)
+            zoom();
+          }, 60);
         }
       }
-      zoom()
+      zoom();
     },
     // 按钮松开或移开取消放大
     endZoomAdd(e) {
-      this.scale.zoomAddOn = false
+      this.scale.zoomAddOn = false;
     },
     // 按钮按下开始缩小
     startZoomSub(e) {
       let that = this,
-        {
-          scale
-        } = that
-      scale.zoomSubOn = true
+        { scale } = that;
+      scale.zoomSubOn = true;
       function zoom() {
         if (scale.zoomSubOn) {
-          const range = scale.range <= 0 ? 0 : --scale.range
-          that.zoomImg(range)
+          const range = scale.range <= 0 ? 0 : --scale.range;
+          that.zoomImg(range);
           setTimeout(function() {
-            zoom()
-          }, 60)
+            zoom();
+          }, 60);
         }
       }
-      zoom()
+      zoom();
     },
     // 按钮松开或移开取消缩小
     endZoomSub(e) {
-      const {
-        scale
-      } = this
-      scale.zoomSubOn = false
+      const { scale } = this;
+      scale.zoomSubOn = false;
     },
     zoomChange(e) {
-      this.zoomImg(e.target.value)
+      this.zoomImg(e.target.value);
     },
     // 缩放原图
     zoomImg(newRange) {
-      const that = this
-      const {
-        sourceImgMasking,
-        sourceImgMouseDown,
-        scale
-      } = this
+      const that = this;
+      const { sourceImgMasking, sourceImgMouseDown, scale } = this;
       const {
         maxWidth,
         maxHeight,
@@ -706,89 +717,82 @@ export default {
         x,
         y,
         range
-      } = scale
-      const sim = sourceImgMasking
+      } = scale;
+      const sim = sourceImgMasking;
       // 蒙版宽高
-      const sWidth = sim.width
-      const sHeight = sim.height
+      const sWidth = sim.width;
+      const sHeight = sim.height;
       // 新宽高
-      const nWidth = minWidth + (maxWidth - minWidth) * newRange / 100
-      const nHeight = minHeight + (maxHeight - minHeight) * newRange / 100
+      const nWidth = minWidth + ((maxWidth - minWidth) * newRange) / 100;
+      const nHeight = minHeight + ((maxHeight - minHeight) * newRange) / 100;
       // 新坐标（根据蒙版中心点缩放）
-      let nX = sWidth / 2 - (nWidth / width) * (sWidth / 2 - x)
-      let nY = sHeight / 2 - (nHeight / height) * (sHeight / 2 - y)
+      let nX = sWidth / 2 - (nWidth / width) * (sWidth / 2 - x);
+      let nY = sHeight / 2 - (nHeight / height) * (sHeight / 2 - y);
       // 判断新坐标是否超过蒙版限制
       if (nX > 0) {
-        nX = 0
+        nX = 0;
       }
       if (nY > 0) {
-        nY = 0
+        nY = 0;
       }
       if (nX < sWidth - nWidth) {
-        nX = sWidth - nWidth
+        nX = sWidth - nWidth;
       }
       if (nY < sHeight - nHeight) {
-        nY = sHeight - nHeight
+        nY = sHeight - nHeight;
       }
       // 赋值处理
-      scale.x = nX
-      scale.y = nY
-      scale.width = nWidth
-      scale.height = nHeight
-      scale.range = newRange
+      scale.x = nX;
+      scale.y = nY;
+      scale.width = nWidth;
+      scale.height = nHeight;
+      scale.range = newRange;
       setTimeout(function() {
         if (scale.range == newRange) {
-          that.createImg()
+          that.createImg();
         }
-      }, 300)
+      }, 300);
     },
-     // 生成需求图片
+    // 生成需求图片
     createImg(e) {
       let that = this,
         {
           mime,
           sourceImg,
-          scale: {
-            x,
-            y,
-            width,
-            height,
-            degree
-          },
-          sourceImgMasking: {
-            scale
-          }
+          scale: { x, y, width, height, degree },
+          sourceImgMasking: { scale }
         } = that,
         canvas = that.$refs.canvas,
-        ctx = canvas.getContext('2d')
+        ctx = canvas.getContext("2d");
       if (e) {
         // 取消鼠标按下移动状态
-        that.sourceImgMouseDown.on = false
+        that.sourceImgMouseDown.on = false;
       }
-      canvas.width = that.width
-      canvas.height = that.height
-      ctx.clearRect(0, 0, that.width, that.height)
+      canvas.width = that.width;
+      canvas.height = that.height;
+      ctx.clearRect(0, 0, that.width, that.height);
       // 将透明区域设置为白色底边
-      ctx.fillStyle = '#fff'
-      ctx.fillRect(0, 0, that.width, that.height)
-      ctx.translate(that.width * 0.5, that.height * 0.5)
-      ctx.rotate(Math.PI * degree / 180)
-      ctx.translate(-that.width * 0.5, -that.height * 0.5)
-      ctx.drawImage(sourceImg, x / scale, y / scale, width / scale, height / scale)
-      that.createImgUrl = canvas.toDataURL(mime)
+      ctx.fillStyle = "#fff";
+      ctx.fillRect(0, 0, that.width, that.height);
+      ctx.translate(that.width * 0.5, that.height * 0.5);
+      ctx.rotate((Math.PI * degree) / 180);
+      ctx.translate(-that.width * 0.5, -that.height * 0.5);
+      ctx.drawImage(
+        sourceImg,
+        x / scale,
+        y / scale,
+        width / scale,
+        height / scale
+      );
+      that.createImgUrl = canvas.toDataURL(mime);
     },
     prepareUpload() {
-      const {
-        url,
-        createImgUrl,
-        field,
-        ki
-      } = this
-      this.$emit('crop-success', createImgUrl, field, ki)
-      if (typeof url === 'string' && url) {
-        this.upload()
+      const { url, createImgUrl, field, ki } = this;
+      this.$emit("crop-success", createImgUrl, field, ki);
+      if (typeof url === "string" && url) {
+        this.upload();
       } else {
-        this.off()
+        this.off();
       }
     },
     // 上传图片
@@ -806,54 +810,60 @@ export default {
           createImgUrl,
           withCredentials
         } = this,
-        fmData = new FormData()
-      fmData.append(field, data2blob(createImgUrl, mime), field + '.' + imgFormat)
+        fmData = new FormData();
+      fmData.append(
+        field,
+        data2blob(createImgUrl, mime),
+        field + "." + imgFormat
+      );
       // 添加其他参数
-      if (typeof params === 'object' && params) {
-        Object.keys(params).forEach((k) => {
-          fmData.append(k, params[k])
-        })
+      if (typeof params === "object" && params) {
+        Object.keys(params).forEach(k => {
+          fmData.append(k, params[k]);
+        });
       }
       // 监听进度回调
       const uploadProgress = function(event) {
         if (event.lengthComputable) {
-          that.progress = 100 * Math.round(event.loaded) / event.total
+          that.progress = (100 * Math.round(event.loaded)) / event.total;
         }
-      }
+      };
       // 上传文件
-      that.reset()
-      that.loading = 1
-      that.setStep(3)
+      that.reset();
+      that.loading = 1;
+      that.setStep(3);
       request({
         url,
-        method: 'post',
+        method: "post",
         data: fmData
-      }).then(resData => {
-        that.loading = 2
-        that.$emit('crop-upload-success', resData.data)
-      }).catch(err => {
-        if (that.value) {
-          that.loading = 3
-          that.hasError = true
-          that.errorMsg = lang.fail
-          that.$emit('crop-upload-fail', err, field, ki)
-        }
       })
+        .then(resData => {
+          that.loading = 2;
+          that.$emit("crop-upload-success", resData.data);
+        })
+        .catch(err => {
+          if (that.value) {
+            that.loading = 3;
+            that.hasError = true;
+            that.errorMsg = lang.fail;
+            that.$emit("crop-upload-fail", err, field, ki);
+          }
+        });
     },
     closeHandler(e) {
-      if (this.value && (e.key == 'Escape' || e.keyCode == 27)) {
-        this.off()
+      if (this.value && (e.key == "Escape" || e.keyCode == 27)) {
+        this.off();
       }
     }
   },
   created() {
     // 绑定按键esc隐藏此插件事件
-    document.addEventListener('keyup', this.closeHandler)
+    document.addEventListener("keyup", this.closeHandler);
   },
   destroyed() {
-    document.removeEventListener('keyup', this.closeHandler)
-  },
-}
+    document.removeEventListener("keyup", this.closeHandler);
+  }
+};
 </script>
 
 <!--
@@ -864,37 +874,49 @@ export default {
 @charset "UTF-8";
 @-webkit-keyframes vicp_progress {
   0% {
-    background-position-y: 0; }
+    background-position-y: 0;
+  }
   100% {
-    background-position-y: 40px; } }
+    background-position-y: 40px;
+  }
+}
 @keyframes vicp_progress {
   0% {
-    background-position-y: 0; }
+    background-position-y: 0;
+  }
   100% {
-    background-position-y: 40px; } }
+    background-position-y: 40px;
+  }
+}
 @-webkit-keyframes vicp {
   0% {
     opacity: 0;
     -webkit-transform: scale(0) translatey(-60px);
-            transform: scale(0) translatey(-60px); }
+    transform: scale(0) translatey(-60px);
+  }
   100% {
     opacity: 1;
     -webkit-transform: scale(1) translatey(0);
-            transform: scale(1) translatey(0); } }
+    transform: scale(1) translatey(0);
+  }
+}
 @keyframes vicp {
   0% {
     opacity: 0;
     -webkit-transform: scale(0) translatey(-60px);
-            transform: scale(0) translatey(-60px); }
+    transform: scale(0) translatey(-60px);
+  }
   100% {
     opacity: 1;
     -webkit-transform: scale(1) translatey(0);
-            transform: scale(1) translatey(0); } }
+    transform: scale(1) translatey(0);
+  }
+}
 .vue-image-crop-upload {
   position: fixed;
   display: block;
   -webkit-box-sizing: border-box;
-          box-sizing: border-box;
+  box-sizing: border-box;
   z-index: 10000;
   top: 0;
   bottom: 0;
@@ -904,501 +926,882 @@ export default {
   height: 100%;
   background-color: rgba(0, 0, 0, 0.65);
   -webkit-tap-highlight-color: transparent;
-  -moz-tap-highlight-color: transparent; }
-  .vue-image-crop-upload .vicp-wrap {
-    -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
-            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
-    position: fixed;
-    display: block;
-    -webkit-box-sizing: border-box;
-            box-sizing: border-box;
-    z-index: 10000;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    margin: auto;
-    width: 600px;
-    height: 330px;
-    padding: 25px;
-    background-color: #fff;
-    border-radius: 2px;
-    -webkit-animation: vicp 0.12s ease-in;
-            animation: vicp 0.12s ease-in; }
-    .vue-image-crop-upload .vicp-wrap .vicp-close {
-      position: absolute;
-      right: -30px;
-      top: -30px; }
-      .vue-image-crop-upload .vicp-wrap .vicp-close .vicp-icon4 {
-        position: relative;
-        display: block;
-        width: 30px;
-        height: 30px;
-        cursor: pointer;
-        -webkit-transition: -webkit-transform 0.18s;
-        transition: -webkit-transform 0.18s;
-        transition: transform 0.18s;
-        transition: transform 0.18s, -webkit-transform 0.18s;
-        -webkit-transform: rotate(0);
-            -ms-transform: rotate(0);
-                transform: rotate(0); }
-        .vue-image-crop-upload .vicp-wrap .vicp-close .vicp-icon4::after, .vue-image-crop-upload .vicp-wrap .vicp-close .vicp-icon4::before {
-          -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
-                  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
-          content: '';
-          position: absolute;
-          top: 12px;
-          left: 4px;
-          width: 20px;
-          height: 3px;
-          -webkit-transform: rotate(45deg);
-              -ms-transform: rotate(45deg);
-                  transform: rotate(45deg);
-          background-color: #fff; }
-        .vue-image-crop-upload .vicp-wrap .vicp-close .vicp-icon4::after {
-          -webkit-transform: rotate(-45deg);
-              -ms-transform: rotate(-45deg);
-                  transform: rotate(-45deg); }
-        .vue-image-crop-upload .vicp-wrap .vicp-close .vicp-icon4:hover {
-          -webkit-transform: rotate(90deg);
-              -ms-transform: rotate(90deg);
-                  transform: rotate(90deg); }
-    .vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area {
-      position: relative;
-      -webkit-box-sizing: border-box;
-              box-sizing: border-box;
-      padding: 35px;
-      height: 170px;
-      background-color: rgba(0, 0, 0, 0.03);
-      text-align: center;
-      border: 1px dashed rgba(0, 0, 0, 0.08);
-      overflow: hidden; }
-      .vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area .vicp-icon1 {
-        display: block;
-        margin: 0 auto 6px;
-        width: 42px;
-        height: 42px;
-        overflow: hidden; }
-        .vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area .vicp-icon1 .vicp-icon1-arrow {
-          display: block;
-          margin: 0 auto;
-          width: 0;
-          height: 0;
-          border-bottom: 14.7px solid rgba(0, 0, 0, 0.3);
-          border-left: 14.7px solid transparent;
-          border-right: 14.7px solid transparent; }
-        .vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area .vicp-icon1 .vicp-icon1-body {
-          display: block;
-          width: 12.6px;
-          height: 14.7px;
-          margin: 0 auto;
-          background-color: rgba(0, 0, 0, 0.3); }
-        .vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area .vicp-icon1 .vicp-icon1-bottom {
-          -webkit-box-sizing: border-box;
-                  box-sizing: border-box;
-          display: block;
-          height: 12.6px;
-          border: 6px solid rgba(0, 0, 0, 0.3);
-          border-top: none; }
-      .vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area .vicp-hint {
-        display: block;
-        padding: 15px;
-        font-size: 14px;
-        color: #666;
-        line-height: 30px; }
-      .vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area .vicp-no-supported-hint {
-        display: block;
-        position: absolute;
-        top: 0;
-        left: 0;
-        padding: 30px;
-        width: 100%;
-        height: 60px;
-        line-height: 30px;
-        background-color: #eee;
-        text-align: center;
-        color: #666;
-        font-size: 14px; }
-      .vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area:hover {
-        cursor: pointer;
-        border-color: rgba(0, 0, 0, 0.1);
-        background-color: rgba(0, 0, 0, 0.05); }
-    .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop {
-      overflow: hidden; }
-      .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left {
-        float: left; }
-        .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-img-container {
-          position: relative;
-          display: block;
-          width: 240px;
-          height: 180px;
-          background-color: #e5e5e0;
-          overflow: hidden; }
-          .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-img-container .vicp-img {
-            position: absolute;
-            display: block;
-            cursor: move;
-            -webkit-user-select: none;
-               -moz-user-select: none;
-                -ms-user-select: none;
-                    user-select: none; }
-          .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-img-container .vicp-img-shade {
-            -webkit-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
-                    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
-            position: absolute;
-            background-color: rgba(241, 242, 243, 0.8); }
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-img-container .vicp-img-shade.vicp-img-shade-1 {
-              top: 0;
-              left: 0; }
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-img-container .vicp-img-shade.vicp-img-shade-2 {
-              bottom: 0;
-              right: 0; }
-        .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-rotate {
-          position: relative;
-          width: 240px;
-          height: 18px; }
-          .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-rotate i {
-            display: block;
-            width: 18px;
-            height: 18px;
-            border-radius: 100%;
-            line-height: 18px;
-            text-align: center;
-            font-size: 12px;
-            font-weight: bold;
-            background-color: rgba(0, 0, 0, 0.08);
-            color: #fff;
-            overflow: hidden; }
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-rotate i:hover {
-              -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
-                      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
-              cursor: pointer;
-              background-color: rgba(0, 0, 0, 0.14); }
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-rotate i:first-child {
-              float: left; }
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-rotate i:last-child {
-              float: right; }
-        .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range {
-          position: relative;
-          margin: 30px 0 10px 0;
-          width: 240px;
-          height: 18px; }
-          .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon5,
-          .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon6 {
-            position: absolute;
-            top: 0;
-            width: 18px;
-            height: 18px;
-            border-radius: 100%;
-            background-color: rgba(0, 0, 0, 0.08); }
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon5:hover,
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon6:hover {
-              -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
-                      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
-              cursor: pointer;
-              background-color: rgba(0, 0, 0, 0.14); }
-          .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon5 {
-            left: 0; }
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon5::before {
-              position: absolute;
-              content: '';
-              display: block;
-              left: 3px;
-              top: 8px;
-              width: 12px;
-              height: 2px;
-              background-color: #fff; }
-          .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon6 {
-            right: 0; }
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon6::before {
-              position: absolute;
-              content: '';
-              display: block;
-              left: 3px;
-              top: 8px;
-              width: 12px;
-              height: 2px;
-              background-color: #fff; }
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon6::after {
-              position: absolute;
-              content: '';
-              display: block;
-              top: 3px;
-              left: 8px;
-              width: 2px;
-              height: 12px;
-              background-color: #fff; }
-          .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range] {
-            display: block;
-            padding-top: 5px;
-            margin: 0 auto;
-            width: 180px;
-            height: 8px;
-            vertical-align: top;
-            background: transparent;
-            -webkit-appearance: none;
-               -moz-appearance: none;
-                    appearance: none;
-            cursor: pointer;
-            /* 滑块
+  -moz-tap-highlight-color: transparent;
+}
+.vue-image-crop-upload .vicp-wrap {
+  -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
+  position: fixed;
+  display: block;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  z-index: 10000;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+  width: 600px;
+  height: 330px;
+  padding: 25px;
+  background-color: #fff;
+  border-radius: 2px;
+  -webkit-animation: vicp 0.12s ease-in;
+  animation: vicp 0.12s ease-in;
+}
+.vue-image-crop-upload .vicp-wrap .vicp-close {
+  position: absolute;
+  right: -30px;
+  top: -30px;
+}
+.vue-image-crop-upload .vicp-wrap .vicp-close .vicp-icon4 {
+  position: relative;
+  display: block;
+  width: 30px;
+  height: 30px;
+  cursor: pointer;
+  -webkit-transition: -webkit-transform 0.18s;
+  transition: -webkit-transform 0.18s;
+  transition: transform 0.18s;
+  transition: transform 0.18s, -webkit-transform 0.18s;
+  -webkit-transform: rotate(0);
+  -ms-transform: rotate(0);
+  transform: rotate(0);
+}
+.vue-image-crop-upload .vicp-wrap .vicp-close .vicp-icon4::after,
+.vue-image-crop-upload .vicp-wrap .vicp-close .vicp-icon4::before {
+  -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
+  content: "";
+  position: absolute;
+  top: 12px;
+  left: 4px;
+  width: 20px;
+  height: 3px;
+  -webkit-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  transform: rotate(45deg);
+  background-color: #fff;
+}
+.vue-image-crop-upload .vicp-wrap .vicp-close .vicp-icon4::after {
+  -webkit-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+}
+.vue-image-crop-upload .vicp-wrap .vicp-close .vicp-icon4:hover {
+  -webkit-transform: rotate(90deg);
+  -ms-transform: rotate(90deg);
+  transform: rotate(90deg);
+}
+.vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area {
+  position: relative;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  padding: 35px;
+  height: 170px;
+  background-color: rgba(0, 0, 0, 0.03);
+  text-align: center;
+  border: 1px dashed rgba(0, 0, 0, 0.08);
+  overflow: hidden;
+}
+.vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area .vicp-icon1 {
+  display: block;
+  margin: 0 auto 6px;
+  width: 42px;
+  height: 42px;
+  overflow: hidden;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step1
+  .vicp-drop-area
+  .vicp-icon1
+  .vicp-icon1-arrow {
+  display: block;
+  margin: 0 auto;
+  width: 0;
+  height: 0;
+  border-bottom: 14.7px solid rgba(0, 0, 0, 0.3);
+  border-left: 14.7px solid transparent;
+  border-right: 14.7px solid transparent;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step1
+  .vicp-drop-area
+  .vicp-icon1
+  .vicp-icon1-body {
+  display: block;
+  width: 12.6px;
+  height: 14.7px;
+  margin: 0 auto;
+  background-color: rgba(0, 0, 0, 0.3);
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step1
+  .vicp-drop-area
+  .vicp-icon1
+  .vicp-icon1-bottom {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  display: block;
+  height: 12.6px;
+  border: 6px solid rgba(0, 0, 0, 0.3);
+  border-top: none;
+}
+.vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area .vicp-hint {
+  display: block;
+  padding: 15px;
+  font-size: 14px;
+  color: #666;
+  line-height: 30px;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step1
+  .vicp-drop-area
+  .vicp-no-supported-hint {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 30px;
+  width: 100%;
+  height: 60px;
+  line-height: 30px;
+  background-color: #eee;
+  text-align: center;
+  color: #666;
+  font-size: 14px;
+}
+.vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area:hover {
+  cursor: pointer;
+  border-color: rgba(0, 0, 0, 0.1);
+  background-color: rgba(0, 0, 0, 0.05);
+}
+.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop {
+  overflow: hidden;
+}
+.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left {
+  float: left;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-img-container {
+  position: relative;
+  display: block;
+  width: 240px;
+  height: 180px;
+  background-color: #e5e5e0;
+  overflow: hidden;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-img-container
+  .vicp-img {
+  position: absolute;
+  display: block;
+  cursor: move;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-img-container
+  .vicp-img-shade {
+  -webkit-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
+  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
+  position: absolute;
+  background-color: rgba(241, 242, 243, 0.8);
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-img-container
+  .vicp-img-shade.vicp-img-shade-1 {
+  top: 0;
+  left: 0;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-img-container
+  .vicp-img-shade.vicp-img-shade-2 {
+  bottom: 0;
+  right: 0;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-rotate {
+  position: relative;
+  width: 240px;
+  height: 18px;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-rotate
+  i {
+  display: block;
+  width: 18px;
+  height: 18px;
+  border-radius: 100%;
+  line-height: 18px;
+  text-align: center;
+  font-size: 12px;
+  font-weight: bold;
+  background-color: rgba(0, 0, 0, 0.08);
+  color: #fff;
+  overflow: hidden;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-rotate
+  i:hover {
+  -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
+  cursor: pointer;
+  background-color: rgba(0, 0, 0, 0.14);
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-rotate
+  i:first-child {
+  float: left;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-rotate
+  i:last-child {
+  float: right;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-range {
+  position: relative;
+  margin: 30px 0 10px 0;
+  width: 240px;
+  height: 18px;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-range
+  .vicp-icon5,
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-range
+  .vicp-icon6 {
+  position: absolute;
+  top: 0;
+  width: 18px;
+  height: 18px;
+  border-radius: 100%;
+  background-color: rgba(0, 0, 0, 0.08);
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-range
+  .vicp-icon5:hover,
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-range
+  .vicp-icon6:hover {
+  -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
+  cursor: pointer;
+  background-color: rgba(0, 0, 0, 0.14);
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-range
+  .vicp-icon5 {
+  left: 0;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-range
+  .vicp-icon5::before {
+  position: absolute;
+  content: "";
+  display: block;
+  left: 3px;
+  top: 8px;
+  width: 12px;
+  height: 2px;
+  background-color: #fff;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-range
+  .vicp-icon6 {
+  right: 0;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-range
+  .vicp-icon6::before {
+  position: absolute;
+  content: "";
+  display: block;
+  left: 3px;
+  top: 8px;
+  width: 12px;
+  height: 2px;
+  background-color: #fff;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-range
+  .vicp-icon6::after {
+  position: absolute;
+  content: "";
+  display: block;
+  top: 3px;
+  left: 8px;
+  width: 2px;
+  height: 12px;
+  background-color: #fff;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-range
+  input[type="range"] {
+  display: block;
+  padding-top: 5px;
+  margin: 0 auto;
+  width: 180px;
+  height: 8px;
+  vertical-align: top;
+  background: transparent;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  cursor: pointer;
+  /* 滑块
                ---------------------------------------------------------------*/
-            /* 轨道
-               ---------------------------------------------------------------*/ }
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:focus {
-              outline: none; }
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]::-webkit-slider-thumb {
-              -webkit-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
-                      box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
-              -webkit-appearance: none;
-                      appearance: none;
-              margin-top: -3px;
-              width: 12px;
-              height: 12px;
-              background-color: #61c091;
-              border-radius: 100%;
-              border: none;
-              -webkit-transition: 0.2s;
-              transition: 0.2s; }
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]::-moz-range-thumb {
-              box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
-              -moz-appearance: none;
-                   appearance: none;
-              width: 12px;
-              height: 12px;
-              background-color: #61c091;
-              border-radius: 100%;
-              border: none;
-              -webkit-transition: 0.2s;
-              transition: 0.2s; }
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]::-ms-thumb {
-              box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
-              appearance: none;
-              width: 12px;
-              height: 12px;
-              background-color: #61c091;
-              border: none;
-              border-radius: 100%;
-              -webkit-transition: 0.2s;
-              transition: 0.2s; }
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:active::-moz-range-thumb {
-              box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
-              width: 14px;
-              height: 14px; }
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:active::-ms-thumb {
-              box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
-              width: 14px;
-              height: 14px; }
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:active::-webkit-slider-thumb {
-              -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
-                      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
-              margin-top: -4px;
-              width: 14px;
-              height: 14px; }
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]::-webkit-slider-runnable-track {
-              -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
-                      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
-              width: 100%;
-              height: 6px;
-              cursor: pointer;
-              border-radius: 2px;
-              border: none;
-              background-color: rgba(68, 170, 119, 0.3); }
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]::-moz-range-track {
-              box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
-              width: 100%;
-              height: 6px;
-              cursor: pointer;
-              border-radius: 2px;
-              border: none;
-              background-color: rgba(68, 170, 119, 0.3); }
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]::-ms-track {
-              box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
-              width: 100%;
-              cursor: pointer;
-              background: transparent;
-              border-color: transparent;
-              color: transparent;
-              height: 6px;
-              border-radius: 2px;
-              border: none; }
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]::-ms-fill-lower {
-              background-color: rgba(68, 170, 119, 0.3); }
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]::-ms-fill-upper {
-              background-color: rgba(68, 170, 119, 0.15); }
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:focus::-webkit-slider-runnable-track {
-              background-color: rgba(68, 170, 119, 0.5); }
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:focus::-moz-range-track {
-              background-color: rgba(68, 170, 119, 0.5); }
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:focus::-ms-fill-lower {
-              background-color: rgba(68, 170, 119, 0.45); }
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:focus::-ms-fill-upper {
-              background-color: rgba(68, 170, 119, 0.25); }
-      .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-right {
-        float: right; }
-        .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-right .vicp-preview {
-          height: 150px;
-          overflow: hidden; }
-          .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-right .vicp-preview .vicp-preview-item {
-            position: relative;
-            padding: 5px;
-            width: 100px;
-            height: 100px;
-            float: left;
-            margin-right: 16px; }
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-right .vicp-preview .vicp-preview-item span {
-              position: absolute;
-              bottom: -30px;
-              width: 100%;
-              font-size: 14px;
-              color: #bbb;
-              display: block;
-              text-align: center; }
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-right .vicp-preview .vicp-preview-item img {
-              position: absolute;
-              display: block;
-              top: 0;
-              bottom: 0;
-              left: 0;
-              right: 0;
-              margin: auto;
-              padding: 3px;
-              background-color: #fff;
-              border: 1px solid rgba(0, 0, 0, 0.15);
-              overflow: hidden;
-              -webkit-user-select: none;
-                 -moz-user-select: none;
-                  -ms-user-select: none;
-                      user-select: none; }
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-right .vicp-preview .vicp-preview-item.vicp-preview-item-circle {
-              margin-right: 0; }
-              .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-right .vicp-preview .vicp-preview-item.vicp-preview-item-circle img {
-                border-radius: 100%; }
-    .vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload {
-      position: relative;
-      -webkit-box-sizing: border-box;
-              box-sizing: border-box;
-      padding: 35px;
-      height: 170px;
-      background-color: rgba(0, 0, 0, 0.03);
-      text-align: center;
-      border: 1px dashed #ddd; }
-      .vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload .vicp-loading {
-        display: block;
-        padding: 15px;
-        font-size: 16px;
-        color: #999;
-        line-height: 30px; }
-      .vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload .vicp-progress-wrap {
-        margin-top: 12px;
-        background-color: rgba(0, 0, 0, 0.08);
-        border-radius: 3px; }
-        .vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload .vicp-progress-wrap .vicp-progress {
-          position: relative;
-          display: block;
-          height: 5px;
-          border-radius: 3px;
-          background-color: #4a7;
-          -webkit-box-shadow: 0 2px 6px 0 rgba(68, 170, 119, 0.3);
-                  box-shadow: 0 2px 6px 0 rgba(68, 170, 119, 0.3);
-          -webkit-transition: width 0.15s linear;
-          transition: width 0.15s linear;
-          background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
-          background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
-          background-size: 40px 40px;
-          -webkit-animation: vicp_progress 0.5s linear infinite;
-                  animation: vicp_progress 0.5s linear infinite; }
-          .vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload .vicp-progress-wrap .vicp-progress::after {
-            content: '';
-            position: absolute;
-            display: block;
-            top: -3px;
-            right: -3px;
-            width: 9px;
-            height: 9px;
-            border: 1px solid rgba(245, 246, 247, 0.7);
-            -webkit-box-shadow: 0 1px 4px 0 rgba(68, 170, 119, 0.7);
-                    box-shadow: 0 1px 4px 0 rgba(68, 170, 119, 0.7);
-            border-radius: 100%;
-            background-color: #4a7; }
-      .vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload .vicp-error,
-      .vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload .vicp-success {
-        height: 100px;
-        line-height: 100px; }
-    .vue-image-crop-upload .vicp-wrap .vicp-operate {
-      position: absolute;
-      right: 20px;
-      bottom: 20px; }
-      .vue-image-crop-upload .vicp-wrap .vicp-operate a {
-        position: relative;
-        float: left;
-        display: block;
-        margin-left: 10px;
-        width: 100px;
-        height: 36px;
-        line-height: 36px;
-        text-align: center;
-        cursor: pointer;
-        font-size: 14px;
-        color: #4a7;
-        border-radius: 2px;
-        overflow: hidden;
-        -webkit-user-select: none;
-           -moz-user-select: none;
-            -ms-user-select: none;
-                user-select: none; }
-        .vue-image-crop-upload .vicp-wrap .vicp-operate a:hover {
-          background-color: rgba(0, 0, 0, 0.03); }
-    .vue-image-crop-upload .vicp-wrap .vicp-error,
-    .vue-image-crop-upload .vicp-wrap .vicp-success {
-      display: block;
-      font-size: 14px;
-      line-height: 24px;
-      height: 24px;
-      color: #d10;
-      text-align: center;
-      vertical-align: top; }
-    .vue-image-crop-upload .vicp-wrap .vicp-success {
-      color: #4a7; }
-    .vue-image-crop-upload .vicp-wrap .vicp-icon3 {
-      position: relative;
-      display: inline-block;
-      width: 20px;
-      height: 20px;
-      top: 4px; }
-      .vue-image-crop-upload .vicp-wrap .vicp-icon3::after {
-        position: absolute;
-        top: 3px;
-        left: 6px;
-        width: 6px;
-        height: 10px;
-        border-width: 0 2px 2px 0;
-        border-color: #4a7;
-        border-style: solid;
-        -webkit-transform: rotate(45deg);
-            -ms-transform: rotate(45deg);
-                transform: rotate(45deg);
-        content: ''; }
-    .vue-image-crop-upload .vicp-wrap .vicp-icon2 {
-      position: relative;
-      display: inline-block;
-      width: 20px;
-      height: 20px;
-      top: 4px; }
-      .vue-image-crop-upload .vicp-wrap .vicp-icon2::after, .vue-image-crop-upload .vicp-wrap .vicp-icon2::before {
-        content: '';
-        position: absolute;
-        top: 9px;
-        left: 4px;
-        width: 13px;
-        height: 2px;
-        background-color: #d10;
-        -webkit-transform: rotate(45deg);
-            -ms-transform: rotate(45deg);
-                transform: rotate(45deg); }
-      .vue-image-crop-upload .vicp-wrap .vicp-icon2::after {
-        -webkit-transform: rotate(-45deg);
-            -ms-transform: rotate(-45deg);
-                transform: rotate(-45deg); }
+  /* 轨道
+               ---------------------------------------------------------------*/
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-range
+  input[type="range"]:focus {
+  outline: none;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-range
+  input[type="range"]::-webkit-slider-thumb {
+  -webkit-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
+  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
+  -webkit-appearance: none;
+  appearance: none;
+  margin-top: -3px;
+  width: 12px;
+  height: 12px;
+  background-color: #61c091;
+  border-radius: 100%;
+  border: none;
+  -webkit-transition: 0.2s;
+  transition: 0.2s;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-range
+  input[type="range"]::-moz-range-thumb {
+  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
+  -moz-appearance: none;
+  appearance: none;
+  width: 12px;
+  height: 12px;
+  background-color: #61c091;
+  border-radius: 100%;
+  border: none;
+  -webkit-transition: 0.2s;
+  transition: 0.2s;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-range
+  input[type="range"]::-ms-thumb {
+  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
+  appearance: none;
+  width: 12px;
+  height: 12px;
+  background-color: #61c091;
+  border: none;
+  border-radius: 100%;
+  -webkit-transition: 0.2s;
+  transition: 0.2s;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-range
+  input[type="range"]:active::-moz-range-thumb {
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
+  width: 14px;
+  height: 14px;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-range
+  input[type="range"]:active::-ms-thumb {
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
+  width: 14px;
+  height: 14px;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-range
+  input[type="range"]:active::-webkit-slider-thumb {
+  -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
+  margin-top: -4px;
+  width: 14px;
+  height: 14px;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-range
+  input[type="range"]::-webkit-slider-runnable-track {
+  -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
+  width: 100%;
+  height: 6px;
+  cursor: pointer;
+  border-radius: 2px;
+  border: none;
+  background-color: rgba(68, 170, 119, 0.3);
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-range
+  input[type="range"]::-moz-range-track {
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
+  width: 100%;
+  height: 6px;
+  cursor: pointer;
+  border-radius: 2px;
+  border: none;
+  background-color: rgba(68, 170, 119, 0.3);
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-range
+  input[type="range"]::-ms-track {
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
+  width: 100%;
+  cursor: pointer;
+  background: transparent;
+  border-color: transparent;
+  color: transparent;
+  height: 6px;
+  border-radius: 2px;
+  border: none;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-range
+  input[type="range"]::-ms-fill-lower {
+  background-color: rgba(68, 170, 119, 0.3);
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-range
+  input[type="range"]::-ms-fill-upper {
+  background-color: rgba(68, 170, 119, 0.15);
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-range
+  input[type="range"]:focus::-webkit-slider-runnable-track {
+  background-color: rgba(68, 170, 119, 0.5);
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-range
+  input[type="range"]:focus::-moz-range-track {
+  background-color: rgba(68, 170, 119, 0.5);
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-range
+  input[type="range"]:focus::-ms-fill-lower {
+  background-color: rgba(68, 170, 119, 0.45);
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-left
+  .vicp-range
+  input[type="range"]:focus::-ms-fill-upper {
+  background-color: rgba(68, 170, 119, 0.25);
+}
+.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-right {
+  float: right;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-right
+  .vicp-preview {
+  height: 150px;
+  overflow: hidden;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-right
+  .vicp-preview
+  .vicp-preview-item {
+  position: relative;
+  padding: 5px;
+  width: 100px;
+  height: 100px;
+  float: left;
+  margin-right: 16px;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-right
+  .vicp-preview
+  .vicp-preview-item
+  span {
+  position: absolute;
+  bottom: -30px;
+  width: 100%;
+  font-size: 14px;
+  color: #bbb;
+  display: block;
+  text-align: center;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-right
+  .vicp-preview
+  .vicp-preview-item
+  img {
+  position: absolute;
+  display: block;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+  padding: 3px;
+  background-color: #fff;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  overflow: hidden;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-right
+  .vicp-preview
+  .vicp-preview-item.vicp-preview-item-circle {
+  margin-right: 0;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step2
+  .vicp-crop
+  .vicp-crop-right
+  .vicp-preview
+  .vicp-preview-item.vicp-preview-item-circle
+  img {
+  border-radius: 100%;
+}
+.vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload {
+  position: relative;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  padding: 35px;
+  height: 170px;
+  background-color: rgba(0, 0, 0, 0.03);
+  text-align: center;
+  border: 1px dashed #ddd;
+}
+.vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload .vicp-loading {
+  display: block;
+  padding: 15px;
+  font-size: 16px;
+  color: #999;
+  line-height: 30px;
+}
+.vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload .vicp-progress-wrap {
+  margin-top: 12px;
+  background-color: rgba(0, 0, 0, 0.08);
+  border-radius: 3px;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step3
+  .vicp-upload
+  .vicp-progress-wrap
+  .vicp-progress {
+  position: relative;
+  display: block;
+  height: 5px;
+  border-radius: 3px;
+  background-color: #4a7;
+  -webkit-box-shadow: 0 2px 6px 0 rgba(68, 170, 119, 0.3);
+  box-shadow: 0 2px 6px 0 rgba(68, 170, 119, 0.3);
+  -webkit-transition: width 0.15s linear;
+  transition: width 0.15s linear;
+  background-image: -webkit-linear-gradient(
+    135deg,
+    rgba(255, 255, 255, 0.2) 25%,
+    transparent 25%,
+    transparent 50%,
+    rgba(255, 255, 255, 0.2) 50%,
+    rgba(255, 255, 255, 0.2) 75%,
+    transparent 75%,
+    transparent
+  );
+  background-image: linear-gradient(
+    -45deg,
+    rgba(255, 255, 255, 0.2) 25%,
+    transparent 25%,
+    transparent 50%,
+    rgba(255, 255, 255, 0.2) 50%,
+    rgba(255, 255, 255, 0.2) 75%,
+    transparent 75%,
+    transparent
+  );
+  background-size: 40px 40px;
+  -webkit-animation: vicp_progress 0.5s linear infinite;
+  animation: vicp_progress 0.5s linear infinite;
+}
+.vue-image-crop-upload
+  .vicp-wrap
+  .vicp-step3
+  .vicp-upload
+  .vicp-progress-wrap
+  .vicp-progress::after {
+  content: "";
+  position: absolute;
+  display: block;
+  top: -3px;
+  right: -3px;
+  width: 9px;
+  height: 9px;
+  border: 1px solid rgba(245, 246, 247, 0.7);
+  -webkit-box-shadow: 0 1px 4px 0 rgba(68, 170, 119, 0.7);
+  box-shadow: 0 1px 4px 0 rgba(68, 170, 119, 0.7);
+  border-radius: 100%;
+  background-color: #4a7;
+}
+.vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload .vicp-error,
+.vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload .vicp-success {
+  height: 100px;
+  line-height: 100px;
+}
+.vue-image-crop-upload .vicp-wrap .vicp-operate {
+  position: absolute;
+  right: 20px;
+  bottom: 20px;
+}
+.vue-image-crop-upload .vicp-wrap .vicp-operate a {
+  position: relative;
+  float: left;
+  display: block;
+  margin-left: 10px;
+  width: 100px;
+  height: 36px;
+  line-height: 36px;
+  text-align: center;
+  cursor: pointer;
+  font-size: 14px;
+  color: #4a7;
+  border-radius: 2px;
+  overflow: hidden;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.vue-image-crop-upload .vicp-wrap .vicp-operate a:hover {
+  background-color: rgba(0, 0, 0, 0.03);
+}
+.vue-image-crop-upload .vicp-wrap .vicp-error,
+.vue-image-crop-upload .vicp-wrap .vicp-success {
+  display: block;
+  font-size: 14px;
+  line-height: 24px;
+  height: 24px;
+  color: #d10;
+  text-align: center;
+  vertical-align: top;
+}
+.vue-image-crop-upload .vicp-wrap .vicp-success {
+  color: #4a7;
+}
+.vue-image-crop-upload .vicp-wrap .vicp-icon3 {
+  position: relative;
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  top: 4px;
+}
+.vue-image-crop-upload .vicp-wrap .vicp-icon3::after {
+  position: absolute;
+  top: 3px;
+  left: 6px;
+  width: 6px;
+  height: 10px;
+  border-width: 0 2px 2px 0;
+  border-color: #4a7;
+  border-style: solid;
+  -webkit-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  transform: rotate(45deg);
+  content: "";
+}
+.vue-image-crop-upload .vicp-wrap .vicp-icon2 {
+  position: relative;
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  top: 4px;
+}
+.vue-image-crop-upload .vicp-wrap .vicp-icon2::after,
+.vue-image-crop-upload .vicp-wrap .vicp-icon2::before {
+  content: "";
+  position: absolute;
+  top: 9px;
+  left: 4px;
+  width: 13px;
+  height: 2px;
+  background-color: #d10;
+  -webkit-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  transform: rotate(45deg);
+}
+.vue-image-crop-upload .vicp-wrap .vicp-icon2::after {
+  -webkit-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+}
 .e-ripple {
   position: absolute;
   border-radius: 100%;
@@ -1406,20 +1809,23 @@ export default {
   background-clip: padding-box;
   pointer-events: none;
   -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
   -webkit-transform: scale(0);
-      -ms-transform: scale(0);
-          transform: scale(0);
-  opacity: 1; }
-  .e-ripple.z-active {
-    opacity: 0;
-    -webkit-transform: scale(2);
-        -ms-transform: scale(2);
-            transform: scale(2);
-    -webkit-transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
-    transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
-    transition: opacity 1.2s ease-out, transform 0.6s ease-out;
-    transition: opacity 1.2s ease-out, transform 0.6s ease-out, -webkit-transform 0.6s ease-out; }
+  -ms-transform: scale(0);
+  transform: scale(0);
+  opacity: 1;
+}
+.e-ripple.z-active {
+  opacity: 0;
+  -webkit-transform: scale(2);
+  -ms-transform: scale(2);
+  transform: scale(2);
+  -webkit-transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
+  transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
+  transition: opacity 1.2s ease-out, transform 0.6s ease-out;
+  transition: opacity 1.2s ease-out, transform 0.6s ease-out,
+    -webkit-transform 0.6s ease-out;
+}
 </style>
diff --git a/src/components/ImageCropper/utils/data2blob.js b/src/components/ImageCropper/utils/data2blob.js
index 9c47f8af..59092dca 100755
--- a/src/components/ImageCropper/utils/data2blob.js
+++ b/src/components/ImageCropper/utils/data2blob.js
@@ -6,14 +6,14 @@
  * @return {[blob]}      [description]
  */
 export default function(data, mime) {
-  data = data.split(',')[1]
-  data = window.atob(data)
-  var ia = new Uint8Array(data.length)
+  data = data.split(",")[1];
+  data = window.atob(data);
+  var ia = new Uint8Array(data.length);
   for (var i = 0; i < data.length; i++) {
-    ia[i] = data.charCodeAt(i)
+    ia[i] = data.charCodeAt(i);
   }
   // canvas.toDataURL 返回的默认格式就是 image/png
   return new Blob([ia], {
     type: mime
-  })
+  });
 }
diff --git a/src/components/ImageCropper/utils/effectRipple.js b/src/components/ImageCropper/utils/effectRipple.js
index 46a01640..3d42d003 100755
--- a/src/components/ImageCropper/utils/effectRipple.js
+++ b/src/components/ImageCropper/utils/effectRipple.js
@@ -6,34 +6,48 @@
  * @return {[bollean]}          [description]
  */
 export default function(e, arg_opts) {
-  var opts = Object.assign({
-    ele: e.target, // 波纹作用元素
-    type: 'hit', // hit点击位置扩散center中心点扩展
-    bgc: 'rgba(0, 0, 0, 0.15)' // 波纹颜色
-  }, arg_opts)
-  var target = opts.ele
+  var opts = Object.assign(
+    {
+      ele: e.target, // 波纹作用元素
+      type: "hit", // hit点击位置扩散center中心点扩展
+      bgc: "rgba(0, 0, 0, 0.15)" // 波纹颜色
+    },
+    arg_opts
+  );
+  var target = opts.ele;
   if (target) {
-    var rect = target.getBoundingClientRect()
-    var ripple = target.querySelector('.e-ripple')
+    var rect = target.getBoundingClientRect();
+    var ripple = target.querySelector(".e-ripple");
     if (!ripple) {
-      ripple = document.createElement('span')
-      ripple.className = 'e-ripple'
-      ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px'
-      target.appendChild(ripple)
+      ripple = document.createElement("span");
+      ripple.className = "e-ripple";
+      ripple.style.height = ripple.style.width =
+        Math.max(rect.width, rect.height) + "px";
+      target.appendChild(ripple);
     } else {
-      ripple.className = 'e-ripple'
+      ripple.className = "e-ripple";
     }
     switch (opts.type) {
-      case 'center':
-        ripple.style.top = (rect.height / 2 - ripple.offsetHeight / 2) + 'px'
-        ripple.style.left = (rect.width / 2 - ripple.offsetWidth / 2) + 'px'
-        break
+      case "center":
+        ripple.style.top = rect.height / 2 - ripple.offsetHeight / 2 + "px";
+        ripple.style.left = rect.width / 2 - ripple.offsetWidth / 2 + "px";
+        break;
       default:
-        ripple.style.top = (e.pageY - rect.top - ripple.offsetHeight / 2 - document.body.scrollTop) + 'px'
-        ripple.style.left = (e.pageX - rect.left - ripple.offsetWidth / 2 - document.body.scrollLeft) + 'px'
+        ripple.style.top =
+          e.pageY -
+          rect.top -
+          ripple.offsetHeight / 2 -
+          document.body.scrollTop +
+          "px";
+        ripple.style.left =
+          e.pageX -
+          rect.left -
+          ripple.offsetWidth / 2 -
+          document.body.scrollLeft +
+          "px";
     }
-    ripple.style.backgroundColor = opts.bgc
-    ripple.className = 'e-ripple z-active'
-    return false
+    ripple.style.backgroundColor = opts.bgc;
+    ripple.className = "e-ripple z-active";
+    return false;
   }
 }
diff --git a/src/components/ImageCropper/utils/language.js b/src/components/ImageCropper/utils/language.js
index 727872d9..36cb3001 100755
--- a/src/components/ImageCropper/utils/language.js
+++ b/src/components/ImageCropper/utils/language.js
@@ -1,232 +1,240 @@
 export default {
   zh: {
-    hint: '点击，或拖动图片至此处',
-    loading: '正在上传……',
-    noSupported: '浏览器不支持该功能，请使用IE10以上或其他现在浏览器！',
-    success: '上传成功',
-    fail: '图片上传失败',
-    preview: '头像预览',
+    hint: "点击，或拖动图片至此处",
+    loading: "正在上传……",
+    noSupported: "浏览器不支持该功能，请使用IE10以上或其他现在浏览器！",
+    success: "上传成功",
+    fail: "图片上传失败",
+    preview: "头像预览",
     btn: {
-      off: '取消',
-      close: '关闭',
-      back: '上一步',
-      save: '保存'
+      off: "取消",
+      close: "关闭",
+      back: "上一步",
+      save: "保存"
     },
     error: {
-      onlyImg: '仅限图片格式',
-      outOfSize: '单文件大小不能超过 ',
-      lowestPx: '图片最低像素为（宽*高）：'
+      onlyImg: "仅限图片格式",
+      outOfSize: "单文件大小不能超过 ",
+      lowestPx: "图片最低像素为（宽*高）："
     }
   },
-  'zh-tw': {
-    hint: '點擊，或拖動圖片至此處',
-    loading: '正在上傳……',
-    noSupported: '瀏覽器不支持該功能，請使用IE10以上或其他現代瀏覽器！',
-    success: '上傳成功',
-    fail: '圖片上傳失敗',
-    preview: '頭像預覽',
+  "zh-tw": {
+    hint: "點擊，或拖動圖片至此處",
+    loading: "正在上傳……",
+    noSupported: "瀏覽器不支持該功能，請使用IE10以上或其他現代瀏覽器！",
+    success: "上傳成功",
+    fail: "圖片上傳失敗",
+    preview: "頭像預覽",
     btn: {
-      off: '取消',
-      close: '關閉',
-      back: '上一步',
-      save: '保存'
+      off: "取消",
+      close: "關閉",
+      back: "上一步",
+      save: "保存"
     },
     error: {
-      onlyImg: '僅限圖片格式',
-      outOfSize: '單文件大小不能超過 ',
-      lowestPx: '圖片最低像素為（寬*高）：'
+      onlyImg: "僅限圖片格式",
+      outOfSize: "單文件大小不能超過 ",
+      lowestPx: "圖片最低像素為（寬*高）："
     }
   },
   en: {
-    hint: 'Click or drag the file here to upload',
-    loading: 'Uploading…',
-    noSupported: 'Browser is not supported, please use IE10+ or other browsers',
-    success: 'Upload success',
-    fail: 'Upload failed',
-    preview: 'Preview',
+    hint: "Click or drag the file here to upload",
+    loading: "Uploading…",
+    noSupported: "Browser is not supported, please use IE10+ or other browsers",
+    success: "Upload success",
+    fail: "Upload failed",
+    preview: "Preview",
     btn: {
-      off: 'Cancel',
-      close: 'Close',
-      back: 'Back',
-      save: 'Save'
+      off: "Cancel",
+      close: "Close",
+      back: "Back",
+      save: "Save"
     },
     error: {
-      onlyImg: 'Image only',
-      outOfSize: 'Image exceeds size limit: ',
-      lowestPx: 'Image\'s size is too low. Expected at least: '
+      onlyImg: "Image only",
+      outOfSize: "Image exceeds size limit: ",
+      lowestPx: "Image's size is too low. Expected at least: "
     }
   },
   ro: {
-    hint: 'Atinge sau trage fișierul aici',
-    loading: 'Se încarcă',
-    noSupported: 'Browser-ul tău nu suportă acest feature. Te rugăm încearcă cu alt browser.',
-    success: 'S-a încărcat cu succes',
-    fail: 'A apărut o problemă la încărcare',
-    preview: 'Previzualizează',
+    hint: "Atinge sau trage fișierul aici",
+    loading: "Se încarcă",
+    noSupported:
+      "Browser-ul tău nu suportă acest feature. Te rugăm încearcă cu alt browser.",
+    success: "S-a încărcat cu succes",
+    fail: "A apărut o problemă la încărcare",
+    preview: "Previzualizează",
 
     btn: {
-      off: 'Anulează',
-      close: 'Închide',
-      back: 'Înapoi',
-      save: 'Salvează'
+      off: "Anulează",
+      close: "Închide",
+      back: "Înapoi",
+      save: "Salvează"
     },
 
     error: {
-      onlyImg: 'Doar imagini',
-      outOfSize: 'Imaginea depășește limita de: ',
-      loewstPx: 'Imaginea este prea mică; Minim: '
+      onlyImg: "Doar imagini",
+      outOfSize: "Imaginea depășește limita de: ",
+      loewstPx: "Imaginea este prea mică; Minim: "
     }
   },
   ru: {
-    hint: 'Нажмите, или перетащите файл в это окно',
-    loading: 'Загружаю……',
-    noSupported: 'Ваш браузер не поддерживается, пожалуйста, используйте IE10 + или другие браузеры',
-    success: 'Загрузка выполнена успешно',
-    fail: 'Ошибка загрузки',
-    preview: 'Предпросмотр',
+    hint: "Нажмите, или перетащите файл в это окно",
+    loading: "Загружаю……",
+    noSupported:
+      "Ваш браузер не поддерживается, пожалуйста, используйте IE10 + или другие браузеры",
+    success: "Загрузка выполнена успешно",
+    fail: "Ошибка загрузки",
+    preview: "Предпросмотр",
     btn: {
-      off: 'Отменить',
-      close: 'Закрыть',
-      back: 'Назад',
-      save: 'Сохранить'
+      off: "Отменить",
+      close: "Закрыть",
+      back: "Назад",
+      save: "Сохранить"
     },
     error: {
-      onlyImg: 'Только изображения',
-      outOfSize: 'Изображение превышает предельный размер: ',
-      lowestPx: 'Минимальный размер изображения: '
+      onlyImg: "Только изображения",
+      outOfSize: "Изображение превышает предельный размер: ",
+      lowestPx: "Минимальный размер изображения: "
     }
   },
-  'pt-br': {
-    hint: 'Clique ou arraste o arquivo aqui para carregar',
-    loading: 'Carregando…',
-    noSupported: 'Browser não suportado, use o IE10+ ou outro browser',
-    success: 'Sucesso ao carregar imagem',
-    fail: 'Falha ao carregar imagem',
-    preview: 'Pré-visualizar',
+  "pt-br": {
+    hint: "Clique ou arraste o arquivo aqui para carregar",
+    loading: "Carregando…",
+    noSupported: "Browser não suportado, use o IE10+ ou outro browser",
+    success: "Sucesso ao carregar imagem",
+    fail: "Falha ao carregar imagem",
+    preview: "Pré-visualizar",
     btn: {
-      off: 'Cancelar',
-      close: 'Fechar',
-      back: 'Voltar',
-      save: 'Salvar'
+      off: "Cancelar",
+      close: "Fechar",
+      back: "Voltar",
+      save: "Salvar"
     },
     error: {
-      onlyImg: 'Apenas imagens',
-      outOfSize: 'A imagem excede o limite de tamanho: ',
-      lowestPx: 'O tamanho da imagem é muito pequeno. Tamanho mínimo: '
+      onlyImg: "Apenas imagens",
+      outOfSize: "A imagem excede o limite de tamanho: ",
+      lowestPx: "O tamanho da imagem é muito pequeno. Tamanho mínimo: "
     }
   },
   fr: {
-    hint: 'Cliquez ou glissez le fichier ici.',
-    loading: 'Téléchargement…',
-    noSupported: 'Votre navigateur n\'est pas supporté. Utilisez IE10 + ou un autre navigateur s\'il vous plaît.',
-    success: 'Téléchargement réussit',
-    fail: 'Téléchargement echoué',
-    preview: 'Aperçu',
+    hint: "Cliquez ou glissez le fichier ici.",
+    loading: "Téléchargement…",
+    noSupported:
+      "Votre navigateur n'est pas supporté. Utilisez IE10 + ou un autre navigateur s'il vous plaît.",
+    success: "Téléchargement réussit",
+    fail: "Téléchargement echoué",
+    preview: "Aperçu",
     btn: {
-      off: 'Annuler',
-      close: 'Fermer',
-      back: 'Retour',
-      save: 'Enregistrer'
+      off: "Annuler",
+      close: "Fermer",
+      back: "Retour",
+      save: "Enregistrer"
     },
     error: {
-      onlyImg: 'Image uniquement',
-      outOfSize: 'L\'image sélectionnée dépasse la taille maximum: ',
-      lowestPx: 'L\'image sélectionnée est trop petite. Dimensions attendues: '
+      onlyImg: "Image uniquement",
+      outOfSize: "L'image sélectionnée dépasse la taille maximum: ",
+      lowestPx: "L'image sélectionnée est trop petite. Dimensions attendues: "
     }
   },
   nl: {
-    hint: 'Klik hier of sleep een afbeelding in dit vlak',
-    loading: 'Uploaden…',
-    noSupported: 'Je browser wordt helaas niet ondersteund. Gebruik IE10+ of een andere browser.',
-    success: 'Upload succesvol',
-    fail: 'Upload mislukt',
-    preview: 'Voorbeeld',
+    hint: "Klik hier of sleep een afbeelding in dit vlak",
+    loading: "Uploaden…",
+    noSupported:
+      "Je browser wordt helaas niet ondersteund. Gebruik IE10+ of een andere browser.",
+    success: "Upload succesvol",
+    fail: "Upload mislukt",
+    preview: "Voorbeeld",
     btn: {
-      off: 'Annuleren',
-      close: 'Sluiten',
-      back: 'Terug',
-      save: 'Opslaan'
+      off: "Annuleren",
+      close: "Sluiten",
+      back: "Terug",
+      save: "Opslaan"
     },
     error: {
-      onlyImg: 'Alleen afbeeldingen',
-      outOfSize: 'De afbeelding is groter dan: ',
-      lowestPx: 'De afbeelding is te klein! Minimale afmetingen: '
+      onlyImg: "Alleen afbeeldingen",
+      outOfSize: "De afbeelding is groter dan: ",
+      lowestPx: "De afbeelding is te klein! Minimale afmetingen: "
     }
   },
   tr: {
-    hint: 'Tıkla veya yüklemek istediğini buraya sürükle',
-    loading: 'Yükleniyor…',
-    noSupported: 'Tarayıcı desteklenmiyor, lütfen IE10+ veya farklı tarayıcı kullanın',
-    success: 'Yükleme başarılı',
-    fail: 'Yüklemede hata oluştu',
-    preview: 'Önizle',
+    hint: "Tıkla veya yüklemek istediğini buraya sürükle",
+    loading: "Yükleniyor…",
+    noSupported:
+      "Tarayıcı desteklenmiyor, lütfen IE10+ veya farklı tarayıcı kullanın",
+    success: "Yükleme başarılı",
+    fail: "Yüklemede hata oluştu",
+    preview: "Önizle",
     btn: {
-      off: 'İptal',
-      close: 'Kapat',
-      back: 'Geri',
-      save: 'Kaydet'
+      off: "İptal",
+      close: "Kapat",
+      back: "Geri",
+      save: "Kaydet"
     },
     error: {
-      onlyImg: 'Sadece resim',
-      outOfSize: 'Resim yükleme limitini aşıyor: ',
-      lowestPx: 'Resmin boyutu çok küçük. En az olması gereken: '
+      onlyImg: "Sadece resim",
+      outOfSize: "Resim yükleme limitini aşıyor: ",
+      lowestPx: "Resmin boyutu çok küçük. En az olması gereken: "
     }
   },
-  'es-MX': {
-    hint: 'Selecciona o arrastra una imagen',
-    loading: 'Subiendo...',
-    noSupported: 'Tu navegador no es soportado, porfavor usa IE10+ u otros navegadores mas recientes',
-    success: 'Subido exitosamente',
-    fail: 'Sucedió un error',
-    preview: 'Vista previa',
+  "es-MX": {
+    hint: "Selecciona o arrastra una imagen",
+    loading: "Subiendo...",
+    noSupported:
+      "Tu navegador no es soportado, porfavor usa IE10+ u otros navegadores mas recientes",
+    success: "Subido exitosamente",
+    fail: "Sucedió un error",
+    preview: "Vista previa",
     btn: {
-      off: 'Cancelar',
-      close: 'Cerrar',
-      back: 'Atras',
-      save: 'Guardar'
+      off: "Cancelar",
+      close: "Cerrar",
+      back: "Atras",
+      save: "Guardar"
     },
     error: {
-      onlyImg: 'Unicamente imagenes',
-      outOfSize: 'La imagen excede el tamaño maximo:',
-      lowestPx: 'La imagen es demasiado pequeño. Se espera por lo menos:'
+      onlyImg: "Unicamente imagenes",
+      outOfSize: "La imagen excede el tamaño maximo:",
+      lowestPx: "La imagen es demasiado pequeño. Se espera por lo menos:"
     }
   },
   de: {
-    hint: 'Klick hier oder zieh eine Datei hier rein zum Hochladen',
-    loading: 'Hochladen…',
-    noSupported: 'Browser wird nicht unterstützt, bitte verwende IE10+ oder andere Browser',
-    success: 'Upload erfolgreich',
-    fail: 'Upload fehlgeschlagen',
-    preview: 'Vorschau',
+    hint: "Klick hier oder zieh eine Datei hier rein zum Hochladen",
+    loading: "Hochladen…",
+    noSupported:
+      "Browser wird nicht unterstützt, bitte verwende IE10+ oder andere Browser",
+    success: "Upload erfolgreich",
+    fail: "Upload fehlgeschlagen",
+    preview: "Vorschau",
     btn: {
-      off: 'Abbrechen',
-      close: 'Schließen',
-      back: 'Zurück',
-      save: 'Speichern'
+      off: "Abbrechen",
+      close: "Schließen",
+      back: "Zurück",
+      save: "Speichern"
     },
     error: {
-      onlyImg: 'Nur Bilder',
-      outOfSize: 'Das Bild ist zu groß: ',
-      lowestPx: 'Das Bild ist zu klein. Mindestens: '
+      onlyImg: "Nur Bilder",
+      outOfSize: "Das Bild ist zu groß: ",
+      lowestPx: "Das Bild ist zu klein. Mindestens: "
     }
   },
   ja: {
-    hint: 'クリック・ドラッグしてファイルをアップロード',
-    loading: 'アップロード中...',
-    noSupported: 'このブラウザは対応されていません。IE10+かその他の主要ブラウザをお使いください。',
-    success: 'アップロード成功',
-    fail: 'アップロード失敗',
-    preview: 'プレビュー',
+    hint: "クリック・ドラッグしてファイルをアップロード",
+    loading: "アップロード中...",
+    noSupported:
+      "このブラウザは対応されていません。IE10+かその他の主要ブラウザをお使いください。",
+    success: "アップロード成功",
+    fail: "アップロード失敗",
+    preview: "プレビュー",
     btn: {
-      off: 'キャンセル',
-      close: '閉じる',
-      back: '戻る',
-      save: '保存'
+      off: "キャンセル",
+      close: "閉じる",
+      back: "戻る",
+      save: "保存"
     },
     error: {
-      onlyImg: '画像のみ',
-      outOfSize: '画像サイズが上限を超えています。上限: ',
-      lowestPx: '画像が小さすぎます。最小サイズ: '
+      onlyImg: "画像のみ",
+      outOfSize: "画像サイズが上限を超えています。上限: ",
+      lowestPx: "画像が小さすぎます。最小サイズ: "
     }
   }
-}
+};
diff --git a/src/components/ImageCropper/utils/mimes.js b/src/components/ImageCropper/utils/mimes.js
index e20c085c..049d6bc5 100755
--- a/src/components/ImageCropper/utils/mimes.js
+++ b/src/components/ImageCropper/utils/mimes.js
@@ -1,7 +1,7 @@
 export default {
-  'jpg': 'image/jpeg',
-  'png': 'image/png',
-  'gif': 'image/gif',
-  'svg': 'image/svg+xml',
-  'psd': 'image/photoshop'
-}
+  jpg: "image/jpeg",
+  png: "image/png",
+  gif: "image/gif",
+  svg: "image/svg+xml",
+  psd: "image/photoshop"
+};
diff --git a/src/components/JsonEditor/index.vue b/src/components/JsonEditor/index.vue
index 07b282e4..851e32c1 100644
--- a/src/components/JsonEditor/index.vue
+++ b/src/components/JsonEditor/index.vue
@@ -5,57 +5,57 @@
 </template>
 
 <script>
-import CodeMirror from 'codemirror'
-import 'codemirror/addon/lint/lint.css'
-import 'codemirror/lib/codemirror.css'
-import 'codemirror/theme/rubyblue.css'
-require('script-loader!jsonlint')
-import 'codemirror/mode/javascript/javascript'
-import 'codemirror/addon/lint/lint'
-import 'codemirror/addon/lint/json-lint'
+import CodeMirror from "codemirror";
+import "codemirror/addon/lint/lint.css";
+import "codemirror/lib/codemirror.css";
+import "codemirror/theme/rubyblue.css";
+require("script-loader!jsonlint");
+import "codemirror/mode/javascript/javascript";
+import "codemirror/addon/lint/lint";
+import "codemirror/addon/lint/json-lint";
 
 export default {
-  name: 'JsonEditor',
+  name: "JsonEditor",
   /* eslint-disable vue/require-prop-types */
-  props: ['value'],
+  props: ["value"],
   data() {
     return {
       jsonEditor: false
-    }
+    };
   },
   watch: {
     value(value) {
-      const editorValue = this.jsonEditor.getValue()
+      const editorValue = this.jsonEditor.getValue();
       if (value !== editorValue) {
-        this.jsonEditor.setValue(JSON.stringify(this.value, null, 2))
+        this.jsonEditor.setValue(JSON.stringify(this.value, null, 2));
       }
     }
   },
   mounted() {
     this.jsonEditor = CodeMirror.fromTextArea(this.$refs.textarea, {
       lineNumbers: true,
-      mode: 'application/json',
-      gutters: ['CodeMirror-lint-markers'],
-      theme: 'rubyblue',
+      mode: "application/json",
+      gutters: ["CodeMirror-lint-markers"],
+      theme: "rubyblue",
       lint: true
-    })
+    });
 
-    this.jsonEditor.setValue(JSON.stringify(this.value, null, 2))
-    this.jsonEditor.on('change', cm => {
-      this.$emit('changed', cm.getValue())
-      this.$emit('input', cm.getValue())
-    })
+    this.jsonEditor.setValue(JSON.stringify(this.value, null, 2));
+    this.jsonEditor.on("change", cm => {
+      this.$emit("changed", cm.getValue());
+      this.$emit("input", cm.getValue());
+    });
   },
   methods: {
     getValue() {
-      return this.jsonEditor.getValue()
+      return this.jsonEditor.getValue();
     }
   }
-}
+};
 </script>
 
 <style scoped>
-.json-editor{
+.json-editor {
   height: 100%;
   position: relative;
 }
@@ -63,10 +63,10 @@ export default {
   height: auto;
   min-height: 300px;
 }
-.json-editor >>> .CodeMirror-scroll{
+.json-editor >>> .CodeMirror-scroll {
   min-height: 300px;
 }
 .json-editor >>> .cm-s-rubyblue span.cm-string {
-  color: #F08047;
+  color: #f08047;
 }
 </style>
diff --git a/src/components/Kanban/index.vue b/src/components/Kanban/index.vue
index 82f7dd7e..a858ac9b 100644
--- a/src/components/Kanban/index.vue
+++ b/src/components/Kanban/index.vue
@@ -17,28 +17,28 @@
 </template>
 
 <script>
-import draggable from 'vuedraggable'
+import draggable from "vuedraggable";
 
 export default {
-  name: 'DragKanbanDemo',
+  name: "DragKanbanDemo",
   components: {
     draggable
   },
   props: {
     headerText: {
       type: String,
-      default: 'Header'
+      default: "Header"
     },
     options: {
       type: Object,
       default() {
-        return {}
+        return {};
       }
     },
     list: {
       type: Array,
       default() {
-        return []
+        return [];
       }
     }
   },
@@ -46,10 +46,10 @@ export default {
     setData(dataTransfer) {
       // to avoid Firefox bug
       // Detail see : https://github.com/RubaXa/Sortable/issues/1012
-      dataTransfer.setData('Text', '')
+      dataTransfer.setData("Text", "");
     }
   }
-}
+};
 </script>
 <style lang="scss" scoped>
 .board-column {
@@ -96,4 +96,3 @@ export default {
   }
 }
 </style>
-
diff --git a/src/components/MDinput/index.vue b/src/components/MDinput/index.vue
index c59ea34a..6895c86c 100644
--- a/src/components/MDinput/index.vue
+++ b/src/components/MDinput/index.vue
@@ -1,7 +1,11 @@
 <template>
   <div :class="computedClasses" class="material-input__component">
-    <div :class="{iconClass:icon}">
-      <i v-if="icon" :class="['el-icon-' + icon]" class="el-input__icon material-input__icon" />
+    <div :class="{ iconClass: icon }">
+      <i
+        v-if="icon"
+        :class="['el-icon-' + icon]"
+        class="el-input__icon material-input__icon"
+      />
       <input
         v-if="type === 'email'"
         v-model="currentValue"
@@ -16,7 +20,7 @@
         @focus="handleMdFocus"
         @blur="handleMdBlur"
         @input="handleModelInput"
-      >
+      />
       <input
         v-if="type === 'url'"
         v-model="currentValue"
@@ -31,7 +35,7 @@
         @focus="handleMdFocus"
         @blur="handleMdBlur"
         @input="handleModelInput"
-      >
+      />
       <input
         v-if="type === 'number'"
         v-model="currentValue"
@@ -51,7 +55,7 @@
         @focus="handleMdFocus"
         @blur="handleMdBlur"
         @input="handleModelInput"
-      >
+      />
       <input
         v-if="type === 'password'"
         v-model="currentValue"
@@ -68,7 +72,7 @@
         @focus="handleMdFocus"
         @blur="handleMdBlur"
         @input="handleModelInput"
-      >
+      />
       <input
         v-if="type === 'tel'"
         v-model="currentValue"
@@ -83,7 +87,7 @@
         @focus="handleMdFocus"
         @blur="handleMdBlur"
         @input="handleModelInput"
-      >
+      />
       <input
         v-if="type === 'text'"
         v-model="currentValue"
@@ -100,7 +104,7 @@
         @focus="handleMdFocus"
         @blur="handleMdBlur"
         @input="handleModelInput"
-      >
+      />
       <span class="material-input-bar" />
       <label class="material-label">
         <slot />
@@ -113,14 +117,14 @@
 // source:https://github.com/wemake-services/vue-material-input/blob/master/src/components/MaterialInput.vue
 
 export default {
-  name: 'MdInput',
+  name: "MdInput",
   props: {
     /* eslint-disable */
     icon: String,
     name: String,
     type: {
       type: String,
-      default: 'text'
+      default: "text"
     },
     value: [String, Number],
     placeholder: String,
@@ -137,7 +141,7 @@ export default {
     },
     autoComplete: {
       type: String,
-      default: 'off'
+      default: "off"
     },
     validateEvent: {
       type: Boolean,
@@ -149,212 +153,212 @@ export default {
       currentValue: this.value,
       focus: false,
       fillPlaceHolder: null
-    }
+    };
   },
   computed: {
     computedClasses() {
       return {
-        'material--active': this.focus,
-        'material--disabled': this.disabled,
-        'material--raised': Boolean(this.focus || this.currentValue) // has value
-      }
+        "material--active": this.focus,
+        "material--disabled": this.disabled,
+        "material--raised": Boolean(this.focus || this.currentValue) // has value
+      };
     }
   },
   watch: {
     value(newValue) {
-      this.currentValue = newValue
+      this.currentValue = newValue;
     }
   },
   methods: {
     handleModelInput(event) {
-      const value = event.target.value
-      this.$emit('input', value)
-      if (this.$parent.$options.componentName === 'ElFormItem') {
+      const value = event.target.value;
+      this.$emit("input", value);
+      if (this.$parent.$options.componentName === "ElFormItem") {
         if (this.validateEvent) {
-          this.$parent.$emit('el.form.change', [value])
+          this.$parent.$emit("el.form.change", [value]);
         }
       }
-      this.$emit('change', value)
+      this.$emit("change", value);
     },
     handleMdFocus(event) {
-      this.focus = true
-      this.$emit('focus', event)
-      if (this.placeholder && this.placeholder !== '') {
-        this.fillPlaceHolder = this.placeholder
+      this.focus = true;
+      this.$emit("focus", event);
+      if (this.placeholder && this.placeholder !== "") {
+        this.fillPlaceHolder = this.placeholder;
       }
     },
     handleMdBlur(event) {
-      this.focus = false
-      this.$emit('blur', event)
-      this.fillPlaceHolder = null
-      if (this.$parent.$options.componentName === 'ElFormItem') {
+      this.focus = false;
+      this.$emit("blur", event);
+      this.fillPlaceHolder = null;
+      if (this.$parent.$options.componentName === "ElFormItem") {
         if (this.validateEvent) {
-          this.$parent.$emit('el.form.blur', [this.currentValue])
+          this.$parent.$emit("el.form.blur", [this.currentValue]);
         }
       }
     }
   }
+};
+</script>
+
+<style lang="scss" scoped>
+// Fonts:
+$font-size-base: 16px;
+$font-size-small: 18px;
+$font-size-smallest: 12px;
+$font-weight-normal: normal;
+$font-weight-bold: bold;
+$apixel: 1px;
+// Utils
+$spacer: 12px;
+$transition: 0.2s ease all;
+$index: 0px;
+$index-has-icon: 30px;
+// Theme:
+$color-white: white;
+$color-grey: #9e9e9e;
+$color-grey-light: #e0e0e0;
+$color-blue: #2196f3;
+$color-red: #f44336;
+$color-black: black;
+// Base clases:
+%base-bar-pseudo {
+  content: "";
+  height: 1px;
+  width: 0;
+  bottom: 0;
+  position: absolute;
+  transition: $transition;
+}
+
+// Mixins:
+@mixin slided-top() {
+  top: -($font-size-base + $spacer);
+  left: 0;
+  font-size: $font-size-base;
+  font-weight: $font-weight-bold;
+}
+
+// Component:
+.material-input__component {
+  margin-top: 36px;
+  position: relative;
+  * {
+    box-sizing: border-box;
+  }
+  .iconClass {
+    .material-input__icon {
+      position: absolute;
+      left: 0;
+      line-height: $font-size-base;
+      color: $color-blue;
+      top: $spacer;
+      width: $index-has-icon;
+      height: $font-size-base;
+      font-size: $font-size-base;
+      font-weight: $font-weight-normal;
+      pointer-events: none;
+    }
+    .material-label {
+      left: $index-has-icon;
+    }
+    .material-input {
+      text-indent: $index-has-icon;
+    }
+  }
+  .material-input {
+    font-size: $font-size-base;
+    padding: $spacer $spacer $spacer - $apixel * 10 $spacer / 2;
+    display: block;
+    width: 100%;
+    border: none;
+    line-height: 1;
+    border-radius: 0;
+    &:focus {
+      outline: none;
+      border: none;
+      border-bottom: 1px solid transparent; // fixes the height issue
+    }
+  }
+  .material-label {
+    font-weight: $font-weight-normal;
+    position: absolute;
+    pointer-events: none;
+    left: $index;
+    top: 0;
+    transition: $transition;
+    font-size: $font-size-small;
+  }
+  .material-input-bar {
+    position: relative;
+    display: block;
+    width: 100%;
+    &:before {
+      @extend %base-bar-pseudo;
+      left: 50%;
+    }
+    &:after {
+      @extend %base-bar-pseudo;
+      right: 50%;
+    }
+  }
+  // Disabled state:
+  &.material--disabled {
+    .material-input {
+      border-bottom-style: dashed;
+    }
+  }
+  // Raised state:
+  &.material--raised {
+    .material-label {
+      @include slided-top();
+    }
+  }
+  // Active state:
+  &.material--active {
+    .material-input-bar {
+      &:before,
+      &:after {
+        width: 50%;
+      }
+    }
+  }
 }
-</script>
 
-<style lang="scss" scoped>
-  // Fonts:
-  $font-size-base: 16px;
-  $font-size-small: 18px;
-  $font-size-smallest: 12px;
-  $font-weight-normal: normal;
-  $font-weight-bold: bold;
-  $apixel: 1px;
-  // Utils
-  $spacer: 12px;
-  $transition: 0.2s ease all;
-  $index: 0px;
-  $index-has-icon: 30px;
-  // Theme:
-  $color-white: white;
-  $color-grey: #9E9E9E;
-  $color-grey-light: #E0E0E0;
-  $color-blue: #2196F3;
-  $color-red: #F44336;
-  $color-black: black;
-  // Base clases:
-  %base-bar-pseudo {
-    content: '';
-    height: 1px;
-    width: 0;
-    bottom: 0;
-    position: absolute;
-    transition: $transition;
+.material-input__component {
+  background: $color-white;
+  .material-input {
+    background: none;
+    color: $color-black;
+    text-indent: $index;
+    border-bottom: 1px solid $color-grey-light;
   }
-
-  // Mixins:
-  @mixin slided-top() {
-    top: - ($font-size-base + $spacer);
-    left: 0;
-    font-size: $font-size-base;
-    font-weight: $font-weight-bold;
+  .material-label {
+    color: $color-grey;
   }
-
-  // Component:
-  .material-input__component {
-    margin-top: 36px;
-    position: relative;
-    * {
-      box-sizing: border-box;
-    }
-    .iconClass {
-      .material-input__icon {
-        position: absolute;
-        left: 0;
-        line-height: $font-size-base;
-        color: $color-blue;
-        top: $spacer;
-        width: $index-has-icon;
-        height: $font-size-base;
-        font-size: $font-size-base;
-        font-weight: $font-weight-normal;
-        pointer-events: none;
-      }
-      .material-label {
-        left: $index-has-icon;
-      }
-      .material-input {
-        text-indent: $index-has-icon;
-      }
-    }
-    .material-input {
-      font-size: $font-size-base;
-      padding: $spacer $spacer $spacer - $apixel * 10 $spacer / 2;
-      display: block;
-      width: 100%;
-      border: none;
-      line-height: 1;
-      border-radius: 0;
-      &:focus {
-        outline: none;
-        border: none;
-        border-bottom: 1px solid transparent; // fixes the height issue
-      }
+  .material-input-bar {
+    &:before,
+    &:after {
+      background: $color-blue;
     }
+  }
+  // Active state:
+  &.material--active {
     .material-label {
-      font-weight: $font-weight-normal;
-      position: absolute;
-      pointer-events: none;
-      left: $index;
-      top: 0;
-      transition: $transition;
-      font-size: $font-size-small;
-    }
-    .material-input-bar {
-      position: relative;
-      display: block;
-      width: 100%;
-      &:before {
-        @extend %base-bar-pseudo;
-        left: 50%;
-      }
-      &:after {
-        @extend %base-bar-pseudo;
-        right: 50%;
-      }
-    }
-    // Disabled state:
-    &.material--disabled {
-      .material-input {
-        border-bottom-style: dashed;
-      }
-    }
-    // Raised state:
-    &.material--raised {
-      .material-label {
-        @include slided-top();
-      }
-    }
-    // Active state:
-    &.material--active {
-      .material-input-bar {
-        &:before,
-        &:after {
-          width: 50%;
-        }
-      }
+      color: $color-blue;
     }
   }
-
-  .material-input__component {
-    background: $color-white;
-    .material-input {
-      background: none;
-      color: $color-black;
-      text-indent: $index;
-      border-bottom: 1px solid $color-grey-light;
-    }
-    .material-label {
-      color: $color-grey;
+  // Errors:
+  &.material--has-errors {
+    &.material--active .material-label {
+      color: $color-red;
     }
     .material-input-bar {
       &:before,
       &:after {
-        background: $color-blue;
-      }
-    }
-    // Active state:
-    &.material--active {
-      .material-label {
-        color: $color-blue;
-      }
-    }
-    // Errors:
-    &.material--has-errors {
-      &.material--active .material-label {
-        color: $color-red;
-      }
-      .material-input-bar {
-        &:before,
-        &:after {
-          background: transparent;
-        }
+        background: transparent;
       }
     }
   }
+}
 </style>
diff --git a/src/components/MarkdownEditor/default-options.js b/src/components/MarkdownEditor/default-options.js
index 303aa13d..e1da02d5 100644
--- a/src/components/MarkdownEditor/default-options.js
+++ b/src/components/MarkdownEditor/default-options.js
@@ -1,31 +1,31 @@
 // doc: https://nhnent.github.io/tui.editor/api/latest/ToastUIEditor.html#ToastUIEditor
 export default {
-  minHeight: '200px',
-  previewStyle: 'vertical',
+  minHeight: "200px",
+  previewStyle: "vertical",
   useCommandShortcut: true,
   useDefaultHTMLSanitizer: true,
   usageStatistics: false,
   hideModeSwitch: false,
   toolbarItems: [
-    'heading',
-    'bold',
-    'italic',
-    'strike',
-    'divider',
-    'hr',
-    'quote',
-    'divider',
-    'ul',
-    'ol',
-    'task',
-    'indent',
-    'outdent',
-    'divider',
-    'table',
-    'image',
-    'link',
-    'divider',
-    'code',
-    'codeblock'
+    "heading",
+    "bold",
+    "italic",
+    "strike",
+    "divider",
+    "hr",
+    "quote",
+    "divider",
+    "ul",
+    "ol",
+    "task",
+    "indent",
+    "outdent",
+    "divider",
+    "table",
+    "image",
+    "link",
+    "divider",
+    "code",
+    "codeblock"
   ]
-}
+};
diff --git a/src/components/MarkdownEditor/index.vue b/src/components/MarkdownEditor/index.vue
index 3d6794b5..0a7a7a08 100644
--- a/src/components/MarkdownEditor/index.vue
+++ b/src/components/MarkdownEditor/index.vue
@@ -4,115 +4,119 @@
 
 <script>
 // deps for editor
-import 'codemirror/lib/codemirror.css' // codemirror
-import 'tui-editor/dist/tui-editor.css' // editor ui
-import 'tui-editor/dist/tui-editor-contents.css' // editor content
+import "codemirror/lib/codemirror.css"; // codemirror
+import "tui-editor/dist/tui-editor.css"; // editor ui
+import "tui-editor/dist/tui-editor-contents.css"; // editor content
 
-import Editor from 'tui-editor'
-import defaultOptions from './default-options'
+import Editor from "tui-editor";
+import defaultOptions from "./default-options";
 
 export default {
-  name: 'MarddownEditor',
+  name: "MarddownEditor",
   props: {
     value: {
       type: String,
-      default: ''
+      default: ""
     },
     id: {
       type: String,
       required: false,
       default() {
-        return 'markdown-editor-' + +new Date() + ((Math.random() * 1000).toFixed(0) + '')
+        return (
+          "markdown-editor-" +
+          +new Date() +
+          ((Math.random() * 1000).toFixed(0) + "")
+        );
       }
     },
     options: {
       type: Object,
       default() {
-        return defaultOptions
+        return defaultOptions;
       }
     },
     mode: {
       type: String,
-      default: 'markdown'
+      default: "markdown"
     },
     height: {
       type: String,
       required: false,
-      default: '300px'
+      default: "300px"
     },
     language: {
       type: String,
       required: false,
-      default: 'en_US' // https://github.com/nhnent/tui.editor/tree/master/src/js/langs
+      default: "en_US" // https://github.com/nhnent/tui.editor/tree/master/src/js/langs
     }
   },
   data() {
     return {
       editor: null
-    }
+    };
   },
   computed: {
     editorOptions() {
-      const options = Object.assign({}, defaultOptions, this.options)
-      options.initialEditType = this.mode
-      options.height = this.height
-      options.language = this.language
-      return options
+      const options = Object.assign({}, defaultOptions, this.options);
+      options.initialEditType = this.mode;
+      options.height = this.height;
+      options.language = this.language;
+      return options;
     }
   },
   watch: {
     value(newValue, preValue) {
       if (newValue !== preValue && newValue !== this.editor.getValue()) {
-        this.editor.setValue(newValue)
+        this.editor.setValue(newValue);
       }
     },
     language(val) {
-      this.destroyEditor()
-      this.initEditor()
+      this.destroyEditor();
+      this.initEditor();
     },
     height(newValue) {
-      this.editor.height(newValue)
+      this.editor.height(newValue);
     },
     mode(newValue) {
-      this.editor.changeMode(newValue)
+      this.editor.changeMode(newValue);
     }
   },
   mounted() {
-    this.initEditor()
+    this.initEditor();
   },
   destroyed() {
-    this.destroyEditor()
+    this.destroyEditor();
   },
   methods: {
     initEditor() {
       this.editor = new Editor({
         el: document.getElementById(this.id),
         ...this.editorOptions
-      })
+      });
       if (this.value) {
-        this.editor.setValue(this.value)
+        this.editor.setValue(this.value);
       }
-      this.editor.on('change', () => {
-        this.$emit('input', this.editor.getValue())
-      })
+      this.editor.on("change", () => {
+        this.$emit("input", this.editor.getValue());
+      });
     },
     destroyEditor() {
-      if (!this.editor) return
-      this.editor.off('change')
-      this.editor.remove()
+      if (!this.editor) return;
+      this.editor.off("change");
+      this.editor.remove();
     },
     setValue(value) {
-      this.editor.setValue(value)
+      this.editor.setValue(value);
     },
     getValue() {
-      return this.editor.getValue()
+      return this.editor.getValue();
     },
     setHtml(value) {
-      this.editor.setHtml(value)
+      this.editor.setHtml(value);
     },
     getHtml() {
-      return this.editor.getHtml()
+      return this.editor.getHtml();
     }
   }
-}
+};
 </script>
diff --git a/src/components/Pagination/index.vue b/src/components/Pagination/index.vue
index c815e132..bc4e8d31 100644
--- a/src/components/Pagination/index.vue
+++ b/src/components/Pagination/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="{'hidden':hidden}" class="pagination-container">
+  <div :class="{ hidden: hidden }" class="pagination-container">
     <el-pagination
       :background="background"
       :current-page.sync="currentPage"
@@ -15,10 +15,10 @@
 </template>
 
 <script>
-import { scrollTo } from '@/utils/scroll-to'
+import { scrollTo } from "@/utils/scroll-to";
 
 export default {
-  name: 'Pagination',
+  name: "Pagination",
   props: {
     total: {
       required: true,
@@ -35,12 +35,12 @@ export default {
     pageSizes: {
       type: Array,
       default() {
-        return [10, 20, 30, 50]
+        return [10, 20, 30, 50];
       }
     },
     layout: {
       type: String,
-      default: 'total, sizes, prev, pager, next, jumper'
+      default: "total, sizes, prev, pager, next, jumper"
     },
     background: {
       type: Boolean,
@@ -58,36 +58,36 @@ export default {
   computed: {
     currentPage: {
       get() {
-        return this.page
+        return this.page;
       },
       set(val) {
-        this.$emit('update:page', val)
+        this.$emit("update:page", val);
       }
     },
     pageSize: {
       get() {
-        return this.limit
+        return this.limit;
       },
       set(val) {
-        this.$emit('update:limit', val)
+        this.$emit("update:limit", val);
       }
     }
   },
   methods: {
     handleSizeChange(val) {
-      this.$emit('pagination', { page: this.currentPage, limit: val })
+      this.$emit("pagination", { page: this.currentPage, limit: val });
       if (this.autoScroll) {
-        scrollTo(0, 800)
+        scrollTo(0, 800);
       }
     },
     handleCurrentChange(val) {
-      this.$emit('pagination', { page: val, limit: this.pageSize })
+      this.$emit("pagination", { page: val, limit: this.pageSize });
       if (this.autoScroll) {
-        scrollTo(0, 800)
+        scrollTo(0, 800);
       }
     }
   }
-}
+};
 </script>
 
 <style scoped>
diff --git a/src/components/PanThumb/index.vue b/src/components/PanThumb/index.vue
index 1bcf4170..83b08960 100644
--- a/src/components/PanThumb/index.vue
+++ b/src/components/PanThumb/index.vue
@@ -1,18 +1,21 @@
 <template>
-  <div :style="{zIndex:zIndex,height:height,width:width}" class="pan-item">
+  <div
+    :style="{ zIndex: zIndex, height: height, width: width }"
+    class="pan-item"
+  >
     <div class="pan-info">
       <div class="pan-info-roles-container">
         <slot />
       </div>
     </div>
     <!-- eslint-disable-next-line -->
-    <div :style="{backgroundImage: `url(${image})`}" class="pan-thumb"></div>
+    <div :style="{ backgroundImage: `url(${image})` }" class="pan-thumb"></div>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'PanThumb',
+  name: "PanThumb",
   props: {
     image: {
       type: String,
@@ -24,14 +27,14 @@ export default {
     },
     width: {
       type: String,
-      default: '150px'
+      default: "150px"
     },
     height: {
       type: String,
-      default: '150px'
+      default: "150px"
     }
   }
-}
+};
 </script>
 
 <style scoped>
@@ -93,7 +96,7 @@ export default {
   margin: 0 60px;
   padding: 22px 0 0 0;
   height: 85px;
-  font-family: 'Open Sans', Arial, sans-serif;
+  font-family: "Open Sans", Arial, sans-serif;
   text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.3);
 }
 
@@ -121,9 +124,10 @@ export default {
   letter-spacing: 1px;
   padding-top: 24px;
   margin: 7px auto 0;
-  font-family: 'Open Sans', Arial, sans-serif;
+  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;
+  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);
 }
 
diff --git a/src/components/RightPanel/index.vue b/src/components/RightPanel/index.vue
index 55e8c1e5..3e9fb032 100644
--- a/src/components/RightPanel/index.vue
+++ b/src/components/RightPanel/index.vue
@@ -1,9 +1,13 @@
 <template>
-  <div ref="rightPanel" :class="{show:show}" class="rightPanel-container">
+  <div ref="rightPanel" :class="{ show: show }" class="rightPanel-container">
     <div class="rightPanel-background" />
     <div class="rightPanel">
-      <div class="handle-button" :style="{'top':buttonTop+'px','background-color':theme}" @click="show=!show">
-        <i :class="show?'el-icon-close':'el-icon-setting'" />
+      <div
+        class="handle-button"
+        :style="{ top: buttonTop + 'px', 'background-color': theme }"
+        @click="show = !show"
+      >
+        <i :class="show ? 'el-icon-close' : 'el-icon-setting'" />
       </div>
       <div class="rightPanel-items">
         <slot />
@@ -13,10 +17,10 @@
 </template>
 
 <script>
-import { addClass, removeClass } from '@/utils'
+import { addClass, removeClass } from "@/utils";
 
 export default {
-  name: 'RightPanel',
+  name: "RightPanel",
   props: {
     clickNotClose: {
       default: false,
@@ -30,50 +34,50 @@ export default {
   data() {
     return {
       show: false
-    }
+    };
   },
   computed: {
     theme() {
-      return this.$store.state.settings.theme
+      return this.$store.state.settings.theme;
     }
   },
   watch: {
     show(value) {
       if (value && !this.clickNotClose) {
-        this.addEventClick()
+        this.addEventClick();
       }
       if (value) {
-        addClass(document.body, 'showRightPanel')
+        addClass(document.body, "showRightPanel");
       } else {
-        removeClass(document.body, 'showRightPanel')
+        removeClass(document.body, "showRightPanel");
       }
     }
   },
   mounted() {
-    this.insertToBody()
+    this.insertToBody();
   },
   beforeDestroy() {
-    const elx = this.$refs.rightPanel
-    elx.remove()
+    const elx = this.$refs.rightPanel;
+    elx.remove();
   },
   methods: {
     addEventClick() {
-      window.addEventListener('click', this.closeSidebar)
+      window.addEventListener("click", this.closeSidebar);
     },
     closeSidebar(evt) {
-      const parent = evt.target.closest('.rightPanel')
+      const parent = evt.target.closest(".rightPanel");
       if (!parent) {
-        this.show = false
-        window.removeEventListener('click', this.closeSidebar)
+        this.show = false;
+        window.removeEventListener("click", this.closeSidebar);
       }
     },
     insertToBody() {
-      const elx = this.$refs.rightPanel
-      const body = document.querySelector('body')
-      body.insertBefore(elx, body.firstChild)
+      const elx = this.$refs.rightPanel;
+      const body = document.querySelector("body");
+      body.insertBefore(elx, body.firstChild);
     }
   }
-}
+};
 </script>
 
 <style>
@@ -90,8 +94,8 @@ export default {
   top: 0;
   left: 0;
   opacity: 0;
-  transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
-  background: rgba(0, 0, 0, .2);
+  transition: opacity 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);
+  background: rgba(0, 0, 0, 0.2);
   z-index: -1;
 }
 
@@ -102,15 +106,15 @@ export default {
   position: fixed;
   top: 0;
   right: 0;
-  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
-  transition: all .25s cubic-bezier(.7, .3, .1, 1);
+  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.05);
+  transition: all 0.25s cubic-bezier(0.7, 0.3, 0.1, 1);
   transform: translate(100%);
   background: #fff;
   z-index: 40000;
 }
 
 .show {
-  transition: all .3s cubic-bezier(.7, .3, .1, 1);
+  transition: all 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);
 
   .rightPanel-background {
     z-index: 20000;
diff --git a/src/components/Screenfull/index.vue b/src/components/Screenfull/index.vue
index 260c90de..69e328be 100644
--- a/src/components/Screenfull/index.vue
+++ b/src/components/Screenfull/index.vue
@@ -1,58 +1,61 @@
 <template>
   <div>
-    <svg-icon :icon-class="isFullscreen?'exit-fullscreen':'fullscreen'" @click="click" />
+    <svg-icon
+      :icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'"
+      @click="click"
+    />
   </div>
 </template>
 
 <script>
-import screenfull from 'screenfull'
+import screenfull from "screenfull";
 
 export default {
-  name: 'Screenfull',
+  name: "Screenfull",
   data() {
     return {
       isFullscreen: false
-    }
+    };
   },
   mounted() {
-    this.init()
+    this.init();
   },
   beforeDestroy() {
-    this.destroy()
+    this.destroy();
   },
   methods: {
     click() {
       if (!screenfull.enabled) {
         this.$message({
-          message: 'you browser can not work',
-          type: 'warning'
-        })
-        return false
+          message: "you browser can not work",
+          type: "warning"
+        });
+        return false;
       }
-      screenfull.toggle()
+      screenfull.toggle();
     },
     change() {
-      this.isFullscreen = screenfull.isFullscreen
+      this.isFullscreen = screenfull.isFullscreen;
     },
     init() {
       if (screenfull.enabled) {
-        screenfull.on('change', this.change)
+        screenfull.on("change", this.change);
       }
     },
     destroy() {
       if (screenfull.enabled) {
-        screenfull.off('change', this.change)
+        screenfull.off("change", this.change);
       }
     }
   }
-}
+};
 </script>
 
 <style scoped>
 .screenfull-svg {
   display: inline-block;
   cursor: pointer;
-  fill: #5a5e66;;
+  fill: #5a5e66;
   width: 20px;
   height: 20px;
   vertical-align: 10px;
diff --git a/src/components/Share/DropdownMenu.vue b/src/components/Share/DropdownMenu.vue
index 8ad8e56e..fd8d4503 100644
--- a/src/components/Share/DropdownMenu.vue
+++ b/src/components/Share/DropdownMenu.vue
@@ -1,9 +1,17 @@
 <template>
-  <div :class="{active:isActive}" class="share-dropdown-menu">
+  <div :class="{ active: isActive }" class="share-dropdown-menu">
     <div class="share-dropdown-menu-wrapper">
-      <span class="share-dropdown-menu-title" @click.self="clickTitle">{{ title }}</span>
-      <div v-for="(item,index) of items" :key="index" class="share-dropdown-menu-item">
-        <a v-if="item.href" :href="item.href" target="_blank">{{ item.title }}</a>
+      <span class="share-dropdown-menu-title" @click.self="clickTitle">{{
+        title
+      }}</span>
+      <div
+        v-for="(item, index) of items"
+        :key="index"
+        class="share-dropdown-menu-item"
+      >
+        <a v-if="item.href" :href="item.href" target="_blank">{{
+          item.title
+        }}</a>
         <span v-else>{{ item.title }}</span>
       </div>
     </div>
@@ -16,30 +24,30 @@ export default {
     items: {
       type: Array,
       default: function() {
-        return []
+        return [];
       }
     },
     title: {
       type: String,
-      default: 'vue'
+      default: "vue"
     }
   },
   data() {
     return {
       isActive: false
-    }
+    };
   },
   methods: {
     clickTitle() {
-      this.isActive = !this.isActive
+      this.isActive = !this.isActive;
     }
   }
-}
+};
 </script>
 
-<style lang="scss" >
+<style lang="scss">
 $n: 9; //和items.length 相同
-$t: .1s;
+$t: 0.1s;
 .share-dropdown-menu {
   width: 250px;
   position: relative;
@@ -55,7 +63,7 @@ $t: .1s;
     font-size: 20px;
     text-align: center;
     z-index: 2;
-    transform: translate3d(0,0,0);
+    transform: translate3d(0, 0, 0);
   }
   &-wrapper {
     position: relative;
@@ -78,7 +86,7 @@ $t: .1s;
     @for $i from 1 through $n {
       &:nth-of-type(#{$i}) {
         z-index: -1;
-        transition-delay: $i*$t;
+        transition-delay: $i * $t;
         transform: translate3d(0, -60px, 0);
       }
     }
@@ -90,8 +98,8 @@ $t: .1s;
     .share-dropdown-menu-item {
       @for $i from 1 through $n {
         &:nth-of-type(#{$i}) {
-         transition-delay: ($n - $i)*$t;
-          transform: translate3d(0, ($i - 1)*60px, 0);
+          transition-delay: ($n - $i) * $t;
+          transform: translate3d(0, ($i - 1) * 60px, 0);
         }
       }
     }
diff --git a/src/components/SizeSelect/index.vue b/src/components/SizeSelect/index.vue
index e88065b4..d4aa5ba9 100644
--- a/src/components/SizeSelect/index.vue
+++ b/src/components/SizeSelect/index.vue
@@ -4,9 +4,13 @@
       <svg-icon class-name="size-icon" icon-class="size" />
     </div>
     <el-dropdown-menu slot="dropdown">
-      <el-dropdown-item v-for="item of sizeOptions" :key="item.value" :disabled="size===item.value" :command="item.value">
-        {{
-          item.label }}
+      <el-dropdown-item
+        v-for="item of sizeOptions"
+        :key="item.value"
+        :disabled="size === item.value"
+        :command="item.value"
+      >
+        {{ item.label }}
       </el-dropdown-item>
     </el-dropdown-menu>
   </el-dropdown>
@@ -17,41 +21,40 @@ export default {
   data() {
     return {
       sizeOptions: [
-        { label: 'Default', value: 'default' },
-        { label: 'Medium', value: 'medium' },
-        { label: 'Small', value: 'small' },
-        { label: 'Mini', value: 'mini' }
+        { label: "Default", value: "default" },
+        { label: "Medium", value: "medium" },
+        { label: "Small", value: "small" },
+        { label: "Mini", value: "mini" }
       ]
-    }
+    };
   },
   computed: {
     size() {
-      return this.$store.getters.size
+      return this.$store.getters.size;
     }
   },
   methods: {
     handleSetSize(size) {
-      this.$ELEMENT.size = size
-      this.$store.dispatch('app/setSize', size)
-      this.refreshView()
+      this.$ELEMENT.size = size;
+      this.$store.dispatch("app/setSize", size);
+      this.refreshView();
       this.$message({
-        message: 'Switch Size Success',
-        type: 'success'
-      })
+        message: "Switch Size Success",
+        type: "success"
+      });
     },
     refreshView() {
       // In order to make the cached page re-rendered
-      this.$store.dispatch('tagsView/delAllCachedViews', this.$route)
+      this.$store.dispatch("tagsView/delAllCachedViews", this.$route);
 
-      const { fullPath } = this.$route
+      const { fullPath } = this.$route;
 
       this.$nextTick(() => {
         this.$router.replace({
-          path: '/redirect' + fullPath
-        })
-      })
+          path: "/redirect" + fullPath
+        });
+      });
     }
   }
-
-}
+};
 </script>
diff --git a/src/components/Sticky/index.vue b/src/components/Sticky/index.vue
index 97ce0e96..332c613d 100644
--- a/src/components/Sticky/index.vue
+++ b/src/components/Sticky/index.vue
@@ -1,8 +1,14 @@
 <template>
-  <div :style="{height:height+'px',zIndex:zIndex}">
+  <div :style="{ height: height + 'px', zIndex: zIndex }">
     <div
       :class="className"
-      :style="{top:(isSticky ? stickyTop +'px' : ''),zIndex:zIndex,position:position,width:width,height:height+'px'}"
+      :style="{
+        top: isSticky ? stickyTop + 'px' : '',
+        zIndex: zIndex,
+        position: position,
+        width: width,
+        height: height + 'px'
+      }"
     >
       <slot>
         <div>sticky</div>
@@ -13,7 +19,7 @@
 
 <script>
 export default {
-  name: 'Sticky',
+  name: "Sticky",
   props: {
     stickyTop: {
       type: Number,
@@ -25,67 +31,67 @@ export default {
     },
     className: {
       type: String,
-      default: ''
+      default: ""
     }
   },
   data() {
     return {
       active: false,
-      position: '',
+      position: "",
       width: undefined,
       height: undefined,
       isSticky: false
-    }
+    };
   },
   mounted() {
-    this.height = this.$el.getBoundingClientRect().height
-    window.addEventListener('scroll', this.handleScroll)
-    window.addEventListener('resize', this.handleResize)
+    this.height = this.$el.getBoundingClientRect().height;
+    window.addEventListener("scroll", this.handleScroll);
+    window.addEventListener("resize", this.handleResize);
   },
   activated() {
-    this.handleScroll()
+    this.handleScroll();
   },
   destroyed() {
-    window.removeEventListener('scroll', this.handleScroll)
-    window.removeEventListener('resize', this.handleResize)
+    window.removeEventListener("scroll", this.handleScroll);
+    window.removeEventListener("resize", this.handleResize);
   },
   methods: {
     sticky() {
       if (this.active) {
-        return
+        return;
       }
-      this.position = 'fixed'
-      this.active = true
-      this.width = this.width + 'px'
-      this.isSticky = true
+      this.position = "fixed";
+      this.active = true;
+      this.width = this.width + "px";
+      this.isSticky = true;
     },
     handleReset() {
       if (!this.active) {
-        return
+        return;
       }
-      this.reset()
+      this.reset();
     },
     reset() {
-      this.position = ''
-      this.width = 'auto'
-      this.active = false
-      this.isSticky = false
+      this.position = "";
+      this.width = "auto";
+      this.active = false;
+      this.isSticky = false;
     },
     handleScroll() {
-      const width = this.$el.getBoundingClientRect().width
-      this.width = width || 'auto'
-      const offsetTop = this.$el.getBoundingClientRect().top
+      const width = this.$el.getBoundingClientRect().width;
+      this.width = width || "auto";
+      const offsetTop = this.$el.getBoundingClientRect().top;
       if (offsetTop < this.stickyTop) {
-        this.sticky()
-        return
+        this.sticky();
+        return;
       }
-      this.handleReset()
+      this.handleReset();
     },
     handleResize() {
       if (this.isSticky) {
-        this.width = this.$el.getBoundingClientRect().width + 'px'
+        this.width = this.$el.getBoundingClientRect().width + "px";
       }
     }
   }
-}
+};
 </script>
diff --git a/src/components/SvgIcon/index.vue b/src/components/SvgIcon/index.vue
index b07ded2a..dea168eb 100644
--- a/src/components/SvgIcon/index.vue
+++ b/src/components/SvgIcon/index.vue
@@ -1,5 +1,10 @@
 <template>
-  <div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" />
+  <div
+    v-if="isExternal"
+    :style="styleExternalIcon"
+    class="svg-external-icon svg-icon"
+    v-on="$listeners"
+  />
   <svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
     <use :xlink:href="iconName" />
   </svg>
@@ -7,10 +12,10 @@
 
 <script>
 // doc: https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html#usage
-import { isExternal } from '@/utils/validate'
+import { isExternal } from "@/utils/validate";
 
 export default {
-  name: 'SvgIcon',
+  name: "SvgIcon",
   props: {
     iconClass: {
       type: String,
@@ -18,31 +23,31 @@ export default {
     },
     className: {
       type: String,
-      default: ''
+      default: ""
     }
   },
   computed: {
     isExternal() {
-      return isExternal(this.iconClass)
+      return isExternal(this.iconClass);
     },
     iconName() {
-      return `#icon-${this.iconClass}`
+      return `#icon-${this.iconClass}`;
     },
     svgClass() {
       if (this.className) {
-        return 'svg-icon ' + this.className
+        return "svg-icon " + this.className;
       } else {
-        return 'svg-icon'
+        return "svg-icon";
       }
     },
     styleExternalIcon() {
       return {
         mask: `url(${this.iconClass}) no-repeat 50% 50%`,
-        '-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`
-      }
+        "-webkit-mask": `url(${this.iconClass}) no-repeat 50% 50%`
+      };
     }
   }
-}
+};
 </script>
 
 <style scoped>
@@ -56,7 +61,7 @@ export default {
 
 .svg-external-icon {
   background-color: currentColor;
-  mask-size: cover!important;
+  mask-size: cover !important;
   display: inline-block;
 }
 </style>
diff --git a/src/components/TextHoverEffect/Mallki.vue b/src/components/TextHoverEffect/Mallki.vue
index 5d6d16ca..7a7efab2 100644
--- a/src/components/TextHoverEffect/Mallki.vue
+++ b/src/components/TextHoverEffect/Mallki.vue
@@ -11,14 +11,14 @@ export default {
   props: {
     className: {
       type: String,
-      default: ''
+      default: ""
     },
     text: {
       type: String,
-      default: 'vue-element-admin'
+      default: "vue-element-admin"
     }
   }
-}
+};
 </script>
 
 <style>
@@ -27,7 +27,7 @@ export default {
 .link--mallki {
   font-weight: 800;
   color: #4dd9d5;
-  font-family: 'Dosis', sans-serif;
+  font-family: "Dosis", sans-serif;
   -webkit-transition: color 0.5s 0.25s;
   transition: color 0.5s 0.25s;
   overflow: hidden;
@@ -45,7 +45,7 @@ export default {
 }
 
 .link--mallki::before {
-  content: '';
+  content: "";
   width: 100%;
   height: 6px;
   margin: -3px 0 0 0;
diff --git a/src/components/ThemePicker/index.vue b/src/components/ThemePicker/index.vue
index 3879c5ad..3fc0c26e 100644
--- a/src/components/ThemePicker/index.vue
+++ b/src/components/ThemePicker/index.vue
@@ -1,160 +1,183 @@
 <template>
   <el-color-picker
     v-model="theme"
-    :predefine="['#409EFF', '#1890ff', '#304156','#212121','#11a983', '#13c2c2', '#6959CD', '#f5222d', ]"
+    :predefine="[
+      '#409EFF',
+      '#1890ff',
+      '#304156',
+      '#212121',
+      '#11a983',
+      '#13c2c2',
+      '#6959CD',
+      '#f5222d'
+    ]"
     class="theme-picker"
     popper-class="theme-picker-dropdown"
   />
 </template>
 
 <script>
-const version = require('element-ui/package.json').version // element-ui version from node_modules
-const ORIGINAL_THEME = '#409EFF' // default color
+const version = require("element-ui/package.json").version; // element-ui version from node_modules
+const ORIGINAL_THEME = "#409EFF"; // default color
 
 export default {
   data() {
     return {
-      chalk: '', // content of theme-chalk css
-      theme: ''
-    }
+      chalk: "", // content of theme-chalk css
+      theme: ""
+    };
   },
   computed: {
     defaultTheme() {
-      return this.$store.state.settings.theme
+      return this.$store.state.settings.theme;
     }
   },
   watch: {
     defaultTheme: {
       handler: function(val, oldVal) {
-        this.theme = val
+        this.theme = val;
       },
       immediate: true
     },
     async theme(val) {
-      const oldVal = this.chalk ? this.theme : ORIGINAL_THEME
-      if (typeof val !== 'string') return
-      const themeCluster = this.getThemeCluster(val.replace('#', ''))
-      const originalCluster = this.getThemeCluster(oldVal.replace('#', ''))
-      console.log(themeCluster, originalCluster)
+      const oldVal = this.chalk ? this.theme : ORIGINAL_THEME;
+      if (typeof val !== "string") return;
+      const themeCluster = this.getThemeCluster(val.replace("#", ""));
+      const originalCluster = this.getThemeCluster(oldVal.replace("#", ""));
+      console.log(themeCluster, originalCluster);
 
       const $message = this.$message({
-        message: '  Compiling the theme',
-        customClass: 'theme-message',
-        type: 'success',
+        message: "  Compiling the theme",
+        customClass: "theme-message",
+        type: "success",
         duration: 0,
-        iconClass: 'el-icon-loading'
-      })
+        iconClass: "el-icon-loading"
+      });
 
       const getHandler = (variable, id) => {
         return () => {
-          const originalCluster = this.getThemeCluster(ORIGINAL_THEME.replace('#', ''))
-          const newStyle = this.updateStyle(this[variable], originalCluster, themeCluster)
+          const originalCluster = this.getThemeCluster(
+            ORIGINAL_THEME.replace("#", "")
+          );
+          const newStyle = this.updateStyle(
+            this[variable],
+            originalCluster,
+            themeCluster
+          );
 
-          let styleTag = document.getElementById(id)
+          let styleTag = document.getElementById(id);
           if (!styleTag) {
-            styleTag = document.createElement('style')
-            styleTag.setAttribute('id', id)
-            document.head.appendChild(styleTag)
+            styleTag = document.createElement("style");
+            styleTag.setAttribute("id", id);
+            document.head.appendChild(styleTag);
           }
-          styleTag.innerText = newStyle
-        }
-      }
+          styleTag.innerText = newStyle;
+        };
+      };
 
       if (!this.chalk) {
-        const url = `https://unpkg.com/element-ui@${version}/lib/theme-chalk/index.css`
-        await this.getCSSString(url, 'chalk')
+        const url = `https://unpkg.com/element-ui@${version}/lib/theme-chalk/index.css`;
+        await this.getCSSString(url, "chalk");
       }
 
-      const chalkHandler = getHandler('chalk', 'chalk-style')
+      const chalkHandler = getHandler("chalk", "chalk-style");
 
-      chalkHandler()
+      chalkHandler();
 
-      const styles = [].slice.call(document.querySelectorAll('style'))
+      const styles = [].slice
+        .call(document.querySelectorAll("style"))
         .filter(style => {
-          const text = style.innerText
-          return new RegExp(oldVal, 'i').test(text) && !/Chalk Variables/.test(text)
-        })
+          const text = style.innerText;
+          return (
+            new RegExp(oldVal, "i").test(text) && !/Chalk Variables/.test(text)
+          );
+        });
       styles.forEach(style => {
-        const { innerText } = style
-        if (typeof innerText !== 'string') return
-        style.innerText = this.updateStyle(innerText, originalCluster, themeCluster)
-      })
+        const { innerText } = style;
+        if (typeof innerText !== "string") return;
+        style.innerText = this.updateStyle(
+          innerText,
+          originalCluster,
+          themeCluster
+        );
+      });
 
-      this.$emit('change', val)
+      this.$emit("change", val);
 
-      $message.close()
+      $message.close();
     }
   },
 
   methods: {
     updateStyle(style, oldCluster, newCluster) {
-      let newStyle = style
+      let newStyle = style;
       oldCluster.forEach((color, index) => {
-        newStyle = newStyle.replace(new RegExp(color, 'ig'), newCluster[index])
-      })
-      return newStyle
+        newStyle = newStyle.replace(new RegExp(color, "ig"), newCluster[index]);
+      });
+      return newStyle;
     },
 
     getCSSString(url, variable) {
       return new Promise(resolve => {
-        const xhr = new XMLHttpRequest()
+        const xhr = new XMLHttpRequest();
         xhr.onreadystatechange = () => {
           if (xhr.readyState === 4 && xhr.status === 200) {
-            this[variable] = xhr.responseText.replace(/@font-face{[^}]+}/, '')
-            resolve()
+            this[variable] = xhr.responseText.replace(/@font-face{[^}]+}/, "");
+            resolve();
           }
-        }
-        xhr.open('GET', url)
-        xhr.send()
-      })
+        };
+        xhr.open("GET", url);
+        xhr.send();
+      });
     },
 
     getThemeCluster(theme) {
       const tintColor = (color, tint) => {
-        let red = parseInt(color.slice(0, 2), 16)
-        let green = parseInt(color.slice(2, 4), 16)
-        let blue = parseInt(color.slice(4, 6), 16)
+        let red = parseInt(color.slice(0, 2), 16);
+        let green = parseInt(color.slice(2, 4), 16);
+        let blue = parseInt(color.slice(4, 6), 16);
 
-        if (tint === 0) { // when primary color is in its rgb space
-          return [red, green, blue].join(',')
+        if (tint === 0) {
+          // when primary color is in its rgb space
+          return [red, green, blue].join(",");
         } else {
-          red += Math.round(tint * (255 - red))
-          green += Math.round(tint * (255 - green))
-          blue += Math.round(tint * (255 - blue))
+          red += Math.round(tint * (255 - red));
+          green += Math.round(tint * (255 - green));
+          blue += Math.round(tint * (255 - blue));
 
-          red = red.toString(16)
-          green = green.toString(16)
-          blue = blue.toString(16)
+          red = red.toString(16);
+          green = green.toString(16);
+          blue = blue.toString(16);
 
-          return `#${red}${green}${blue}`
+          return `#${red}${green}${blue}`;
         }
-      }
+      };
 
       const shadeColor = (color, shade) => {
-        let red = parseInt(color.slice(0, 2), 16)
-        let green = parseInt(color.slice(2, 4), 16)
-        let blue = parseInt(color.slice(4, 6), 16)
+        let red = parseInt(color.slice(0, 2), 16);
+        let green = parseInt(color.slice(2, 4), 16);
+        let blue = parseInt(color.slice(4, 6), 16);
 
-        red = Math.round((1 - shade) * red)
-        green = Math.round((1 - shade) * green)
-        blue = Math.round((1 - shade) * blue)
+        red = Math.round((1 - shade) * red);
+        green = Math.round((1 - shade) * green);
+        blue = Math.round((1 - shade) * blue);
 
-        red = red.toString(16)
-        green = green.toString(16)
-        blue = blue.toString(16)
+        red = red.toString(16);
+        green = green.toString(16);
+        blue = blue.toString(16);
 
-        return `#${red}${green}${blue}`
-      }
+        return `#${red}${green}${blue}`;
+      };
 
-      const clusters = [theme]
+      const clusters = [theme];
       for (let i = 0; i <= 9; i++) {
-        clusters.push(tintColor(theme, Number((i / 10).toFixed(2))))
+        clusters.push(tintColor(theme, Number((i / 10).toFixed(2))));
       }
-      clusters.push(shadeColor(theme, 0.1))
-      return clusters
+      clusters.push(shadeColor(theme, 0.1));
+      return clusters;
     }
   }
-}
+};
 </script>
 
 <style>
diff --git a/src/components/Tinymce/components/EditorImage.vue b/src/components/Tinymce/components/EditorImage.vue
index d4a98e84..1e7eeda2 100644
--- a/src/components/Tinymce/components/EditorImage.vue
+++ b/src/components/Tinymce/components/EditorImage.vue
@@ -1,6 +1,12 @@
 <template>
   <div class="upload-container">
-    <el-button :style="{background:color,borderColor:color}" icon="el-icon-upload" size="mini" type="primary" @click=" dialogVisible=true">
+    <el-button
+      :style="{ background: color, borderColor: color }"
+      icon="el-icon-upload"
+      size="mini"
+      type="primary"
+      @click="dialogVisible = true"
+    >
       upload
     </el-button>
     <el-dialog :visible.sync="dialogVisible">
@@ -33,11 +39,11 @@
 // import { getToken } from 'api/qiniu'
 
 export default {
-  name: 'EditorSlideUpload',
+  name: "EditorSlideUpload",
   props: {
     color: {
       type: String,
-      default: '#1890ff'
+      default: "#1890ff"
     }
   },
   data() {
@@ -45,66 +51,75 @@ export default {
       dialogVisible: false,
       listObj: {},
       fileList: []
-    }
+    };
   },
   methods: {
     checkAllSuccess() {
-      return Object.keys(this.listObj).every(item => this.listObj[item].hasSuccess)
+      return Object.keys(this.listObj).every(
+        item => this.listObj[item].hasSuccess
+      );
     },
     handleSubmit() {
-      const arr = Object.keys(this.listObj).map(v => this.listObj[v])
+      const arr = Object.keys(this.listObj).map(v => this.listObj[v]);
       if (!this.checkAllSuccess()) {
-        this.$message('Please wait for all images to be uploaded successfully. If there is a network problem, please refresh the page and upload again!')
-        return
+        this.$message(
+          "Please wait for all images to be uploaded successfully. If there is a network problem, please refresh the page and upload again!"
+        );
+        return;
       }
-      this.$emit('successCBK', arr)
-      this.listObj = {}
-      this.fileList = []
-      this.dialogVisible = false
+      this.$emit("successCBK", arr);
+      this.listObj = {};
+      this.fileList = [];
+      this.dialogVisible = false;
     },
     handleSuccess(response, file) {
-      const uid = file.uid
-      const objKeyArr = Object.keys(this.listObj)
+      const uid = file.uid;
+      const objKeyArr = Object.keys(this.listObj);
       for (let i = 0, len = objKeyArr.length; i < len; i++) {
         if (this.listObj[objKeyArr[i]].uid === uid) {
-          this.listObj[objKeyArr[i]].url = response.files.file
-          this.listObj[objKeyArr[i]].hasSuccess = true
-          return
+          this.listObj[objKeyArr[i]].url = response.files.file;
+          this.listObj[objKeyArr[i]].hasSuccess = true;
+          return;
         }
       }
     },
     handleRemove(file) {
-      const uid = file.uid
-      const objKeyArr = Object.keys(this.listObj)
+      const uid = file.uid;
+      const objKeyArr = Object.keys(this.listObj);
       for (let i = 0, len = objKeyArr.length; i < len; i++) {
         if (this.listObj[objKeyArr[i]].uid === uid) {
-          delete this.listObj[objKeyArr[i]]
-          return
+          delete this.listObj[objKeyArr[i]];
+          return;
         }
       }
     },
     beforeUpload(file) {
-      const _self = this
-      const _URL = window.URL || window.webkitURL
-      const fileName = file.uid
-      this.listObj[fileName] = {}
+      const _self = this;
+      const _URL = window.URL || window.webkitURL;
+      const fileName = file.uid;
+      this.listObj[fileName] = {};
       return new Promise((resolve, reject) => {
-        const img = new Image()
-        img.src = _URL.createObjectURL(file)
+        const img = new Image();
+        img.src = _URL.createObjectURL(file);
         img.onload = function() {
-          _self.listObj[fileName] = { hasSuccess: false, uid: file.uid, width: this.width, height: this.height }
-        }
-        resolve(true)
-      })
+          _self.listObj[fileName] = {
+            hasSuccess: false,
+            uid: file.uid,
+            width: this.width,
+            height: this.height
+          };
+        };
+        resolve(true);
+      });
     }
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>
 .editor-slide-upload {
   margin-bottom: 20px;
-  /deep/ .el-upload--picture-card {
+  ::v-deep .el-upload--picture-card {
     width: 100%;
   }
 }
diff --git a/src/components/Tinymce/dynamicLoadScript.js b/src/components/Tinymce/dynamicLoadScript.js
index 185f58dc..51fd99ca 100644
--- a/src/components/Tinymce/dynamicLoadScript.js
+++ b/src/components/Tinymce/dynamicLoadScript.js
@@ -1,30 +1,30 @@
-let callbacks = []
+let callbacks = [];
 
 function loadedTinymce() {
   // to fixed https://github.com/PanJiaChen/vue-element-admin/issues/2144
   // check is successfully downloaded script
-  return window.tinymce
+  return window.tinymce;
 }
 
 const dynamicLoadScript = (src, callback) => {
-  const existingScript = document.getElementById(src)
-  const cb = callback || function() {}
+  const existingScript = document.getElementById(src);
+  const cb = callback || function() {};
 
   if (!existingScript) {
-    const script = document.createElement('script')
-    script.src = src // src url for the third-party library being loaded.
-    script.id = src
-    document.body.appendChild(script)
-    callbacks.push(cb)
-    const onEnd = 'onload' in script ? stdOnEnd : ieOnEnd
-    onEnd(script)
+    const script = document.createElement("script");
+    script.src = src; // src url for the third-party library being loaded.
+    script.id = src;
+    document.body.appendChild(script);
+    callbacks.push(cb);
+    const onEnd = "onload" in script ? stdOnEnd : ieOnEnd;
+    onEnd(script);
   }
 
   if (existingScript && cb) {
     if (loadedTinymce()) {
-      cb(null, existingScript)
+      cb(null, existingScript);
     } else {
-      callbacks.push(cb)
+      callbacks.push(cb);
     }
   }
 
@@ -32,28 +32,29 @@ const dynamicLoadScript = (src, callback) => {
     script.onload = function() {
       // this.onload = null here is necessary
       // because even IE9 works not like others
-      this.onerror = this.onload = null
+      this.onerror = this.onload = null;
       for (const cb of callbacks) {
-        cb(null, script)
+        cb(null, script);
       }
-      callbacks = null
-    }
+      callbacks = null;
+    };
     script.onerror = function() {
-      this.onerror = this.onload = null
-      cb(new Error('Failed to load ' + src), script)
-    }
+      this.onerror = this.onload = null;
+      cb(new Error("Failed to load " + src), script);
+    };
   }
 
   function ieOnEnd(script) {
     script.onreadystatechange = function() {
-      if (this.readyState !== 'complete' && this.readyState !== 'loaded') return
-      this.onreadystatechange = null
+      if (this.readyState !== "complete" && this.readyState !== "loaded")
+        return;
+      this.onreadystatechange = null;
       for (const cb of callbacks) {
-        cb(null, script) // there is no way to catch loading errors in IE8
+        cb(null, script); // there is no way to catch loading errors in IE8
       }
-      callbacks = null
-    }
+      callbacks = null;
+    };
   }
-}
+};
 
-export default dynamicLoadScript
+export default dynamicLoadScript;
diff --git a/src/components/Tinymce/index.vue b/src/components/Tinymce/index.vue
index 0c6174c4..628e057c 100644
--- a/src/components/Tinymce/index.vue
+++ b/src/components/Tinymce/index.vue
@@ -1,8 +1,16 @@
 <template>
-  <div :class="{fullscreen:fullscreen}" class="tinymce-container" :style="{width:containerWidth}">
+  <div
+    :class="{ fullscreen: fullscreen }"
+    class="tinymce-container"
+    :style="{ width: containerWidth }"
+  >
     <textarea :id="tinymceId" class="tinymce-textarea" />
     <div class="editor-custom-btn-container">
-      <editorImage color="#1890ff" class="editor-upload-btn" @successCBK="imageSuccessCBK" />
+      <editorImage
+        color="#1890ff"
+        class="editor-upload-btn"
+        @successCBK="imageSuccessCBK"
+      />
     </div>
   </div>
 </template>
@@ -12,38 +20,43 @@
  * docs:
  * https://panjiachen.github.io/vue-element-admin-site/feature/component/rich-editor.html#tinymce
  */
-import editorImage from './components/EditorImage'
-import plugins from './plugins'
-import toolbar from './toolbar'
-import load from './dynamicLoadScript'
+import editorImage from "./components/EditorImage";
+import plugins from "./plugins";
+import toolbar from "./toolbar";
+import load from "./dynamicLoadScript";
 
 // why use this cdn, detail see https://github.com/PanJiaChen/tinymce-all-in-one
-const tinymceCDN = 'https://cdn.jsdelivr.net/npm/tinymce-all-in-one@4.9.3/tinymce.min.js'
+const tinymceCDN =
+  "https://cdn.jsdelivr.net/npm/tinymce-all-in-one@4.9.3/tinymce.min.js";
 
 export default {
-  name: 'Tinymce',
+  name: "Tinymce",
   components: { editorImage },
   props: {
     id: {
       type: String,
       default: function() {
-        return 'vue-tinymce-' + +new Date() + ((Math.random() * 1000).toFixed(0) + '')
+        return (
+          "vue-tinymce-" +
+          +new Date() +
+          ((Math.random() * 1000).toFixed(0) + "")
+        );
       }
     },
     value: {
       type: String,
-      default: ''
+      default: ""
     },
     toolbar: {
       type: Array,
       required: false,
       default() {
-        return []
+        return [];
       }
     },
     menubar: {
       type: String,
-      default: 'file edit insert view format table'
+      default: "file edit insert view format table"
     },
     height: {
       type: [Number, String],
@@ -53,7 +66,7 @@ export default {
     width: {
       type: [Number, String],
       required: false,
-      default: 'auto'
+      default: "auto"
     }
   },
   data() {
@@ -63,90 +76,92 @@ export default {
       tinymceId: this.id,
       fullscreen: false,
       languageTypeList: {
-        'en': 'en',
-        'zh': 'zh_CN',
-        'es': 'es_MX',
-        'ja': 'ja'
+        en: "en",
+        zh: "zh_CN",
+        es: "es_MX",
+        ja: "ja"
       }
-    }
+    };
   },
   computed: {
     containerWidth() {
-      const width = this.width
-      if (/^[\d]+(\.[\d]+)?$/.test(width)) { // matches `100`, `'100'`
-        return `${width}px`
+      const width = this.width;
+      if (/^[\d]+(\.[\d]+)?$/.test(width)) {
+        // matches `100`, `'100'`
+        return `${width}px`;
       }
-      return width
+      return width;
     }
   },
   watch: {
     value(val) {
       if (!this.hasChange && this.hasInit) {
         this.$nextTick(() =>
-          window.tinymce.get(this.tinymceId).setContent(val || ''))
+          window.tinymce.get(this.tinymceId).setContent(val || "")
+        );
       }
     }
   },
   mounted() {
-    this.init()
+    this.init();
   },
   activated() {
     if (window.tinymce) {
-      this.initTinymce()
+      this.initTinymce();
     }
   },
   deactivated() {
-    this.destroyTinymce()
+    this.destroyTinymce();
   },
   destroyed() {
-    this.destroyTinymce()
+    this.destroyTinymce();
   },
   methods: {
     init() {
       // dynamic load tinymce from cdn
-      load(tinymceCDN, (err) => {
+      load(tinymceCDN, err => {
         if (err) {
-          this.$message.error(err.message)
-          return
+          this.$message.error(err.message);
+          return;
         }
-        this.initTinymce()
-      })
+        this.initTinymce();
+      });
     },
     initTinymce() {
-      const _this = this
+      const _this = this;
       window.tinymce.init({
         selector: `#${this.tinymceId}`,
-        language: this.languageTypeList['en'],
+        language: this.languageTypeList["en"],
         height: this.height,
-        body_class: 'panel-body ',
+        body_class: "panel-body ",
         object_resizing: false,
         toolbar: this.toolbar.length > 0 ? this.toolbar : toolbar,
         menubar: this.menubar,
         plugins: plugins,
         end_container_on_empty_block: true,
-        powerpaste_word_import: 'clean',
+        powerpaste_word_import: "clean",
         code_dialog_height: 450,
         code_dialog_width: 1000,
-        advlist_bullet_styles: 'square',
-        advlist_number_styles: 'default',
-        imagetools_cors_hosts: ['www.tinymce.com', 'codepen.io'],
-        default_link_target: '_blank',
+        advlist_bullet_styles: "square",
+        advlist_number_styles: "default",
+        imagetools_cors_hosts: ["www.tinymce.com", "codepen.io"],
+        default_link_target: "_blank",
         link_title: false,
         nonbreaking_force_tab: true, // inserting nonbreaking space &nbsp; need Nonbreaking Space Plugin
         init_instance_callback: editor => {
           if (_this.value) {
-            editor.setContent(_this.value)
+            editor.setContent(_this.value);
           }
-          _this.hasInit = true
-          editor.on('NodeChange Change KeyUp SetContent', () => {
-            this.hasChange = true
-            this.$emit('input', editor.getContent())
-          })
+          _this.hasInit = true;
+          editor.on("NodeChange Change KeyUp SetContent", () => {
+            this.hasChange = true;
+            this.$emit("input", editor.getContent());
+          });
         },
         setup(editor) {
-          editor.on('FullscreenStateChanged', (e) => {
-            _this.fullscreen = e.state
-          })
+          editor.on("FullscreenStateChanged", e => {
+            _this.fullscreen = e.state;
+          });
         }
         // 整合七牛上传
         // images_dataimg_filter(img) {
@@ -181,32 +196,34 @@ export default {
         //     console.log(err);
         //   });
         // },
-      })
+      });
     },
     destroyTinymce() {
-      const tinymce = window.tinymce.get(this.tinymceId)
+      const tinymce = window.tinymce.get(this.tinymceId);
       if (this.fullscreen) {
-        tinymce.execCommand('mceFullScreen')
+        tinymce.execCommand("mceFullScreen");
       }
 
       if (tinymce) {
-        tinymce.destroy()
+        tinymce.destroy();
       }
     },
     setContent(value) {
-      window.tinymce.get(this.tinymceId).setContent(value)
+      window.tinymce.get(this.tinymceId).setContent(value);
     },
     getContent() {
-      window.tinymce.get(this.tinymceId).getContent()
+      window.tinymce.get(this.tinymceId).getContent();
     },
     imageSuccessCBK(arr) {
-      const _this = this
+      const _this = this;
       arr.forEach(v => {
-        window.tinymce.get(_this.tinymceId).insertContent(`<img class="wscnph" src="${v.url}" >`)
-      })
+        window.tinymce
+          .get(_this.tinymceId)
+          .insertContent(`<img class="wscnph" src="${v.url}" >`);
+      });
     }
   }
-}
+};
 </script>
 
 <style scoped>
@@ -214,7 +231,7 @@ export default {
   position: relative;
   line-height: normal;
 }
-.tinymce-container>>>.mce-fullscreen {
+.tinymce-container >>> .mce-fullscreen {
   z-index: 10000;
 }
 .tinymce-textarea {
diff --git a/src/components/Tinymce/plugins.js b/src/components/Tinymce/plugins.js
index 058d2aef..2ad5e17c 100644
--- a/src/components/Tinymce/plugins.js
+++ b/src/components/Tinymce/plugins.js
@@ -2,6 +2,8 @@
 // Detail plugins list see https://www.tinymce.com/docs/plugins/
 // Custom builds see https://www.tinymce.com/download/custom-builds/
 
-const plugins = ['advlist anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount']
+const plugins = [
+  "advlist anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount"
+];
 
-export default plugins
+export default plugins;
diff --git a/src/components/Tinymce/toolbar.js b/src/components/Tinymce/toolbar.js
index 4f8a5450..46196ed7 100644
--- a/src/components/Tinymce/toolbar.js
+++ b/src/components/Tinymce/toolbar.js
@@ -1,6 +1,9 @@
 // Here is a list of the toolbar
 // Detail list see https://www.tinymce.com/docs/advanced/editor-control-identifiers/#toolbarcontrols
 
-const toolbar = ['searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample', 'hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen']
+const toolbar = [
+  "searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample",
+  "hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen"
+];
 
-export default toolbar
+export default toolbar;
diff --git a/src/components/Upload/SingleImage.vue b/src/components/Upload/SingleImage.vue
index d16bbf37..f81d71c5 100644
--- a/src/components/Upload/SingleImage.vue
+++ b/src/components/Upload/SingleImage.vue
@@ -10,13 +10,11 @@
       action="https://httpbin.org/post"
     >
       <i class="el-icon-upload" />
-      <div class="el-upload__text">
-        将文件拖到此处，或<em>点击上传</em>
-      </div>
+      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
     </el-upload>
     <div class="image-preview">
-      <div v-show="imageUrl.length>1" class="image-preview-wrapper">
-        <img :src="imageUrl+'?imageView2/1/w/200/h/200'">
+      <div v-show="imageUrl.length > 1" class="image-preview-wrapper">
+        <img :src="imageUrl + '?imageView2/1/w/200/h/200'" />
         <div class="image-preview-action">
           <i class="el-icon-delete" @click="rmImage" />
         </div>
@@ -26,109 +24,110 @@
 </template>
 
 <script>
-import { getToken } from '@/api/qiniu'
+import { getToken } from "@/api/qiniu";
 
 export default {
-  name: 'SingleImageUpload',
+  name: "SingleImageUpload",
   props: {
     value: {
       type: String,
-      default: ''
+      default: ""
     }
   },
   data() {
     return {
-      tempUrl: '',
-      dataObj: { token: '', key: '' }
-    }
+      tempUrl: "",
+      dataObj: { token: "", key: "" }
+    };
   },
   computed: {
     imageUrl() {
-      return this.value
+      return this.value;
     }
   },
   methods: {
     rmImage() {
-      this.emitInput('')
+      this.emitInput("");
     },
     emitInput(val) {
-      this.$emit('input', val)
+      this.$emit("input", val);
     },
     handleImageSuccess() {
-      this.emitInput(this.tempUrl)
+      this.emitInput(this.tempUrl);
     },
     beforeUpload() {
-      const _self = this
+      const _self = this;
       return new Promise((resolve, reject) => {
-        getToken().then(response => {
-          const key = response.data.qiniu_key
-          const token = response.data.qiniu_token
-          _self._data.dataObj.token = token
-          _self._data.dataObj.key = key
-          this.tempUrl = response.data.qiniu_url
-          resolve(true)
-        }).catch(err => {
-          console.log(err)
-          reject(false)
-        })
-      })
+        getToken()
+          .then(response => {
+            const key = response.data.qiniu_key;
+            const token = response.data.qiniu_token;
+            _self._data.dataObj.token = token;
+            _self._data.dataObj.key = key;
+            this.tempUrl = response.data.qiniu_url;
+            resolve(true);
+          })
+          .catch(err => {
+            console.log(err);
+            reject(false);
+          });
+      });
     }
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>
-    @import "~@/styles/mixin.scss";
-    .upload-container {
+@import "~@/styles/mixin.scss";
+.upload-container {
+  width: 100%;
+  position: relative;
+  @include clearfix;
+  .image-uploader {
+    width: 60%;
+    float: left;
+  }
+  .image-preview {
+    width: 200px;
+    height: 200px;
+    position: relative;
+    border: 1px dashed #d9d9d9;
+    float: left;
+    margin-left: 50px;
+    .image-preview-wrapper {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      img {
         width: 100%;
-        position: relative;
-        @include clearfix;
-        .image-uploader {
-            width: 60%;
-            float: left;
-        }
-        .image-preview {
-            width: 200px;
-            height: 200px;
-            position: relative;
-            border: 1px dashed #d9d9d9;
-            float: left;
-            margin-left: 50px;
-            .image-preview-wrapper {
-                position: relative;
-                width: 100%;
-                height: 100%;
-                img {
-                    width: 100%;
-                    height: 100%;
-                }
-            }
-            .image-preview-action {
-                position: absolute;
-                width: 100%;
-                height: 100%;
-                left: 0;
-                top: 0;
-                cursor: default;
-                text-align: center;
-                color: #fff;
-                opacity: 0;
-                font-size: 20px;
-                background-color: rgba(0, 0, 0, .5);
-                transition: opacity .3s;
-                cursor: pointer;
-                text-align: center;
-                line-height: 200px;
-                .el-icon-delete {
-                    font-size: 36px;
-                }
-            }
-            &:hover {
-                .image-preview-action {
-                    opacity: 1;
-                }
-            }
-        }
+        height: 100%;
+      }
     }
-
+    .image-preview-action {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      left: 0;
+      top: 0;
+      cursor: default;
+      text-align: center;
+      color: #fff;
+      opacity: 0;
+      font-size: 20px;
+      background-color: rgba(0, 0, 0, 0.5);
+      transition: opacity 0.3s;
+      cursor: pointer;
+      text-align: center;
+      line-height: 200px;
+      .el-icon-delete {
+        font-size: 36px;
+      }
+    }
+    &:hover {
+      .image-preview-action {
+        opacity: 1;
+      }
+    }
+  }
+}
 </style>
diff --git a/src/components/Upload/SingleImage2.vue b/src/components/Upload/SingleImage2.vue
index 07637a9e..e9456ed7 100644
--- a/src/components/Upload/SingleImage2.vue
+++ b/src/components/Upload/SingleImage2.vue
@@ -10,13 +10,11 @@
       action="https://httpbin.org/post"
     >
       <i class="el-icon-upload" />
-      <div class="el-upload__text">
-        Drag或<em>点击上传</em>
-      </div>
+      <div class="el-upload__text">Drag或<em>点击上传</em></div>
     </el-upload>
-    <div v-show="imageUrl.length>0" class="image-preview">
-      <div v-show="imageUrl.length>1" class="image-preview-wrapper">
-        <img :src="imageUrl">
+    <div v-show="imageUrl.length > 0" class="image-preview">
+      <div v-show="imageUrl.length > 1" class="image-preview-wrapper">
+        <img :src="imageUrl" />
         <div class="image-preview-action">
           <i class="el-icon-delete" @click="rmImage" />
         </div>
@@ -26,54 +24,56 @@
 </template>
 
 <script>
-import { getToken } from '@/api/qiniu'
+import { getToken } from "@/api/qiniu";
 
 export default {
-  name: 'SingleImageUpload2',
+  name: "SingleImageUpload2",
   props: {
     value: {
       type: String,
-      default: ''
+      default: ""
     }
   },
   data() {
     return {
-      tempUrl: '',
-      dataObj: { token: '', key: '' }
-    }
+      tempUrl: "",
+      dataObj: { token: "", key: "" }
+    };
   },
   computed: {
     imageUrl() {
-      return this.value
+      return this.value;
     }
   },
   methods: {
     rmImage() {
-      this.emitInput('')
+      this.emitInput("");
     },
     emitInput(val) {
-      this.$emit('input', val)
+      this.$emit("input", val);
     },
     handleImageSuccess() {
-      this.emitInput(this.tempUrl)
+      this.emitInput(this.tempUrl);
     },
     beforeUpload() {
-      const _self = this
+      const _self = this;
       return new Promise((resolve, reject) => {
-        getToken().then(response => {
-          const key = response.data.qiniu_key
-          const token = response.data.qiniu_token
-          _self._data.dataObj.token = token
-          _self._data.dataObj.key = key
-          this.tempUrl = response.data.qiniu_url
-          resolve(true)
-        }).catch(() => {
-          reject(false)
-        })
-      })
+        getToken()
+          .then(response => {
+            const key = response.data.qiniu_key;
+            const token = response.data.qiniu_token;
+            _self._data.dataObj.token = token;
+            _self._data.dataObj.key = key;
+            this.tempUrl = response.data.qiniu_url;
+            resolve(true);
+          })
+          .catch(() => {
+            reject(false);
+          });
+      });
     }
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>
@@ -111,8 +111,8 @@ export default {
       color: #fff;
       opacity: 0;
       font-size: 20px;
-      background-color: rgba(0, 0, 0, .5);
-      transition: opacity .3s;
+      background-color: rgba(0, 0, 0, 0.5);
+      transition: opacity 0.3s;
       cursor: pointer;
       text-align: center;
       line-height: 200px;
diff --git a/src/components/Upload/SingleImage3.vue b/src/components/Upload/SingleImage3.vue
index 6300da4b..7a9757da 100644
--- a/src/components/Upload/SingleImage3.vue
+++ b/src/components/Upload/SingleImage3.vue
@@ -10,21 +10,19 @@
       action="https://httpbin.org/post"
     >
       <i class="el-icon-upload" />
-      <div class="el-upload__text">
-        将文件拖到此处，或<em>点击上传</em>
-      </div>
+      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
     </el-upload>
     <div class="image-preview image-app-preview">
-      <div v-show="imageUrl.length>1" class="image-preview-wrapper">
-        <img :src="imageUrl">
+      <div v-show="imageUrl.length > 1" class="image-preview-wrapper">
+        <img :src="imageUrl" />
         <div class="image-preview-action">
           <i class="el-icon-delete" @click="rmImage" />
         </div>
       </div>
     </div>
     <div class="image-preview">
-      <div v-show="imageUrl.length>1" class="image-preview-wrapper">
-        <img :src="imageUrl">
+      <div v-show="imageUrl.length > 1" class="image-preview-wrapper">
+        <img :src="imageUrl" />
         <div class="image-preview-action">
           <i class="el-icon-delete" @click="rmImage" />
         </div>
@@ -34,55 +32,57 @@
 </template>
 
 <script>
-import { getToken } from '@/api/qiniu'
+import { getToken } from "@/api/qiniu";
 
 export default {
-  name: 'SingleImageUpload3',
+  name: "SingleImageUpload3",
   props: {
     value: {
       type: String,
-      default: ''
+      default: ""
     }
   },
   data() {
     return {
-      tempUrl: '',
-      dataObj: { token: '', key: '' }
-    }
+      tempUrl: "",
+      dataObj: { token: "", key: "" }
+    };
   },
   computed: {
     imageUrl() {
-      return this.value
+      return this.value;
     }
   },
   methods: {
     rmImage() {
-      this.emitInput('')
+      this.emitInput("");
     },
     emitInput(val) {
-      this.$emit('input', val)
+      this.$emit("input", val);
     },
     handleImageSuccess(file) {
-      this.emitInput(file.files.file)
+      this.emitInput(file.files.file);
     },
     beforeUpload() {
-      const _self = this
+      const _self = this;
       return new Promise((resolve, reject) => {
-        getToken().then(response => {
-          const key = response.data.qiniu_key
-          const token = response.data.qiniu_token
-          _self._data.dataObj.token = token
-          _self._data.dataObj.key = key
-          this.tempUrl = response.data.qiniu_url
-          resolve(true)
-        }).catch(err => {
-          console.log(err)
-          reject(false)
-        })
-      })
+        getToken()
+          .then(response => {
+            const key = response.data.qiniu_key;
+            const token = response.data.qiniu_token;
+            _self._data.dataObj.token = token;
+            _self._data.dataObj.key = key;
+            this.tempUrl = response.data.qiniu_url;
+            resolve(true);
+          })
+          .catch(err => {
+            console.log(err);
+            reject(false);
+          });
+      });
     }
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>
@@ -122,8 +122,8 @@ export default {
       color: #fff;
       opacity: 0;
       font-size: 20px;
-      background-color: rgba(0, 0, 0, .5);
-      transition: opacity .3s;
+      background-color: rgba(0, 0, 0, 0.5);
+      transition: opacity 0.3s;
       cursor: pointer;
       text-align: center;
       line-height: 200px;
diff --git a/src/components/UploadExcel/index.vue b/src/components/UploadExcel/index.vue
index 9e8ba8b6..eac5d69d 100644
--- a/src/components/UploadExcel/index.vue
+++ b/src/components/UploadExcel/index.vue
@@ -1,9 +1,26 @@
 <template>
   <div>
-    <input ref="excel-upload-input" class="excel-upload-input" type="file" accept=".xlsx, .xls" @change="handleClick">
-    <div class="drop" @drop="handleDrop" @dragover="handleDragover" @dragenter="handleDragover">
+    <input
+      ref="excel-upload-input"
+      class="excel-upload-input"
+      type="file"
+      accept=".xlsx, .xls"
+      @change="handleClick"
+    />
+    <div
+      class="drop"
+      @drop="handleDrop"
+      @dragover="handleDragover"
+      @dragenter="handleDragover"
+    >
       Drop excel file here or
-      <el-button :loading="loading" style="margin-left:16px;" size="mini" type="primary" @click="handleUpload">
+      <el-button
+        :loading="loading"
+        style="margin-left:16px;"
+        size="mini"
+        type="primary"
+        @click="handleUpload"
+      >
         Browse
       </el-button>
     </div>
@@ -11,12 +28,12 @@
 </template>
 
 <script>
-import XLSX from 'xlsx'
+import XLSX from "xlsx";
 
 export default {
   props: {
     beforeUpload: Function, // eslint-disable-line
-    onSuccess: Function// eslint-disable-line
+    onSuccess: Function // eslint-disable-line
   },
   data() {
     return {
@@ -25,105 +42,108 @@ export default {
         header: null,
         results: null
       }
-    }
+    };
   },
   methods: {
     generateData({ header, results }) {
-      this.excelData.header = header
-      this.excelData.results = results
-      this.onSuccess && this.onSuccess(this.excelData)
+      this.excelData.header = header;
+      this.excelData.results = results;
+      this.onSuccess && this.onSuccess(this.excelData);
     },
     handleDrop(e) {
-      e.stopPropagation()
-      e.preventDefault()
-      if (this.loading) return
-      const files = e.dataTransfer.files
+      e.stopPropagation();
+      e.preventDefault();
+      if (this.loading) return;
+      const files = e.dataTransfer.files;
       if (files.length !== 1) {
-        this.$message.error('Only support uploading one file!')
-        return
+        this.$message.error("Only support uploading one file!");
+        return;
       }
-      const rawFile = files[0] // only use files[0]
+      const rawFile = files[0]; // only use files[0]
 
       if (!this.isExcel(rawFile)) {
-        this.$message.error('Only supports upload .xlsx, .xls, .csv suffix files')
-        return false
+        this.$message.error(
+          "Only supports upload .xlsx, .xls, .csv suffix files"
+        );
+        return false;
       }
-      this.upload(rawFile)
-      e.stopPropagation()
-      e.preventDefault()
+      this.upload(rawFile);
+      e.stopPropagation();
+      e.preventDefault();
     },
     handleDragover(e) {
-      e.stopPropagation()
-      e.preventDefault()
-      e.dataTransfer.dropEffect = 'copy'
+      e.stopPropagation();
+      e.preventDefault();
+      e.dataTransfer.dropEffect = "copy";
     },
     handleUpload() {
-      this.$refs['excel-upload-input'].click()
+      this.$refs["excel-upload-input"].click();
     },
     handleClick(e) {
-      const files = e.target.files
-      const rawFile = files[0] // only use files[0]
-      if (!rawFile) return
-      this.upload(rawFile)
+      const files = e.target.files;
+      const rawFile = files[0]; // only use files[0]
+      if (!rawFile) return;
+      this.upload(rawFile);
     },
     upload(rawFile) {
-      this.$refs['excel-upload-input'].value = null // fix can't select the same excel
+      this.$refs["excel-upload-input"].value = null; // fix can't select the same excel
 
       if (!this.beforeUpload) {
-        this.readerData(rawFile)
-        return
+        this.readerData(rawFile);
+        return;
       }
-      const before = this.beforeUpload(rawFile)
+      const before = this.beforeUpload(rawFile);
       if (before) {
-        this.readerData(rawFile)
+        this.readerData(rawFile);
       }
     },
     readerData(rawFile) {
-      this.loading = true
+      this.loading = true;
       return new Promise((resolve, reject) => {
-        const reader = new FileReader()
+        const reader = new FileReader();
         reader.onload = e => {
-          const data = e.target.result
-          const workbook = XLSX.read(data, { type: 'array' })
-          const firstSheetName = workbook.SheetNames[0]
-          const worksheet = workbook.Sheets[firstSheetName]
-          const header = this.getHeaderRow(worksheet)
-          const results = XLSX.utils.sheet_to_json(worksheet)
-          this.generateData({ header, results })
-          this.loading = false
-          resolve()
-        }
-        reader.readAsArrayBuffer(rawFile)
-      })
+          const data = e.target.result;
+          const workbook = XLSX.read(data, { type: "array" });
+          const firstSheetName = workbook.SheetNames[0];
+          const worksheet = workbook.Sheets[firstSheetName];
+          const header = this.getHeaderRow(worksheet);
+          const results = XLSX.utils.sheet_to_json(worksheet);
+          this.generateData({ header, results });
+          this.loading = false;
+          resolve();
+        };
+        reader.readAsArrayBuffer(rawFile);
+      });
     },
     getHeaderRow(sheet) {
-      const headers = []
-      const range = XLSX.utils.decode_range(sheet['!ref'])
-      let C
-      const R = range.s.r
+      const headers = [];
+      const range = XLSX.utils.decode_range(sheet["!ref"]);
+      let C;
+      const R = range.s.r;
       /* start in the first row */
-      for (C = range.s.c; C <= range.e.c; ++C) { /* walk every column in the range */
-        const cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })]
+      for (C = range.s.c; C <= range.e.c; ++C) {
+        /* walk every column in the range */
+        const cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })];
         /* find the cell in the first row */
-        let hdr = 'UNKNOWN ' + C // <-- replace with your desired default
-        if (cell && cell.t) hdr = XLSX.utils.format_cell(cell)
-        headers.push(hdr)
+        let hdr = "UNKNOWN " + C; // <-- replace with your desired default
+        if (cell && cell.t) hdr = XLSX.utils.format_cell(cell);
+        headers.push(hdr);
       }
-      return headers
+      return headers;
     },
     isExcel(file) {
-      return /\.(xlsx|xls|csv)$/.test(file.name)
+      return /\.(xlsx|xls|csv)$/.test(file.name);
     }
   }
-}
+};
 </script>
 
 <style scoped>
-.excel-upload-input{
+.excel-upload-input {
   display: none;
   z-index: -9999;
 }
-.drop{
+.drop {
   border: 2px dashed #bbb;
   width: 600px;
   height: 160px;
diff --git a/src/directive/clipboard/clipboard.js b/src/directive/clipboard/clipboard.js
index 514aad20..dba080ac 100644
--- a/src/directive/clipboard/clipboard.js
+++ b/src/directive/clipboard/clipboard.js
@@ -1,49 +1,57 @@
 // Inspired by https://github.com/Inndy/vue-clipboard2
-const Clipboard = require('clipboard')
+const Clipboard = require("clipboard");
 if (!Clipboard) {
-  throw new Error('you should npm install `clipboard` --save at first ')
+  throw new Error("you should npm install `clipboard` --save at first ");
 }
 
 export default {
   bind(el, binding) {
-    if (binding.arg === 'success') {
-      el._v_clipboard_success = binding.value
-    } else if (binding.arg === 'error') {
-      el._v_clipboard_error = binding.value
+    if (binding.arg === "success") {
+      el._v_clipboard_success = binding.value;
+    } else if (binding.arg === "error") {
+      el._v_clipboard_error = binding.value;
     } else {
       const clipboard = new Clipboard(el, {
-        text() { return binding.value },
-        action() { return binding.arg === 'cut' ? 'cut' : 'copy' }
-      })
-      clipboard.on('success', e => {
-        const callback = el._v_clipboard_success
-        callback && callback(e) // eslint-disable-line
-      })
-      clipboard.on('error', e => {
-        const callback = el._v_clipboard_error
-        callback && callback(e) // eslint-disable-line
-      })
-      el._v_clipboard = clipboard
+        text() {
+          return binding.value;
+        },
+        action() {
+          return binding.arg === "cut" ? "cut" : "copy";
+        }
+      });
+      clipboard.on("success", e => {
+        const callback = el._v_clipboard_success;
+        callback && callback(e); // eslint-disable-line
+      });
+      clipboard.on("error", e => {
+        const callback = el._v_clipboard_error;
+        callback && callback(e); // eslint-disable-line
+      });
+      el._v_clipboard = clipboard;
     }
   },
   update(el, binding) {
-    if (binding.arg === 'success') {
-      el._v_clipboard_success = binding.value
-    } else if (binding.arg === 'error') {
-      el._v_clipboard_error = binding.value
+    if (binding.arg === "success") {
+      el._v_clipboard_success = binding.value;
+    } else if (binding.arg === "error") {
+      el._v_clipboard_error = binding.value;
     } else {
-      el._v_clipboard.text = function() { return binding.value }
-      el._v_clipboard.action = function() { return binding.arg === 'cut' ? 'cut' : 'copy' }
+      el._v_clipboard.text = function() {
+        return binding.value;
+      };
+      el._v_clipboard.action = function() {
+        return binding.arg === "cut" ? "cut" : "copy";
+      };
     }
   },
   unbind(el, binding) {
-    if (binding.arg === 'success') {
-      delete el._v_clipboard_success
-    } else if (binding.arg === 'error') {
-      delete el._v_clipboard_error
+    if (binding.arg === "success") {
+      delete el._v_clipboard_success;
+    } else if (binding.arg === "error") {
+      delete el._v_clipboard_error;
     } else {
-      el._v_clipboard.destroy()
-      delete el._v_clipboard
+      el._v_clipboard.destroy();
+      delete el._v_clipboard;
     }
   }
-}
+};
diff --git a/src/directive/clipboard/index.js b/src/directive/clipboard/index.js
index 02c98163..d44c7d2b 100644
--- a/src/directive/clipboard/index.js
+++ b/src/directive/clipboard/index.js
@@ -1,13 +1,13 @@
-import Clipboard from './clipboard'
+import Clipboard from "./clipboard";
 
 const install = function(Vue) {
-  Vue.directive('Clipboard', Clipboard)
-}
+  Vue.directive("Clipboard", Clipboard);
+};
 
 if (window.Vue) {
-  window.clipboard = Clipboard
+  window.clipboard = Clipboard;
   Vue.use(install); // eslint-disable-line
 }
 
-Clipboard.install = install
-export default Clipboard
+Clipboard.install = install;
+export default Clipboard;
diff --git a/src/directive/el-drag-dialog/drag.js b/src/directive/el-drag-dialog/drag.js
index 299e9854..7eb2742b 100644
--- a/src/directive/el-drag-dialog/drag.js
+++ b/src/directive/el-drag-dialog/drag.js
@@ -1,77 +1,77 @@
 export default {
   bind(el, binding, vnode) {
-    const dialogHeaderEl = el.querySelector('.el-dialog__header')
-    const dragDom = el.querySelector('.el-dialog')
-    dialogHeaderEl.style.cssText += ';cursor:move;'
-    dragDom.style.cssText += ';top:0px;'
+    const dialogHeaderEl = el.querySelector(".el-dialog__header");
+    const dragDom = el.querySelector(".el-dialog");
+    dialogHeaderEl.style.cssText += ";cursor:move;";
+    dragDom.style.cssText += ";top:0px;";
 
     // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
     const getStyle = (function() {
       if (window.document.currentStyle) {
-        return (dom, attr) => dom.currentStyle[attr]
+        return (dom, attr) => dom.currentStyle[attr];
       } else {
-        return (dom, attr) => getComputedStyle(dom, false)[attr]
+        return (dom, attr) => getComputedStyle(dom, false)[attr];
       }
-    })()
+    })();
 
-    dialogHeaderEl.onmousedown = (e) => {
+    dialogHeaderEl.onmousedown = e => {
       // 鼠标按下，计算当前元素距离可视区的距离
-      const disX = e.clientX - dialogHeaderEl.offsetLeft
-      const disY = e.clientY - dialogHeaderEl.offsetTop
+      const disX = e.clientX - dialogHeaderEl.offsetLeft;
+      const disY = e.clientY - dialogHeaderEl.offsetTop;
 
-      const dragDomWidth = dragDom.offsetWidth
-      const dragDomHeight = dragDom.offsetHeight
+      const dragDomWidth = dragDom.offsetWidth;
+      const dragDomHeight = dragDom.offsetHeight;
 
-      const screenWidth = document.body.clientWidth
-      const screenHeight = document.body.clientHeight
+      const screenWidth = document.body.clientWidth;
+      const screenHeight = document.body.clientHeight;
 
-      const minDragDomLeft = dragDom.offsetLeft
-      const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth
+      const minDragDomLeft = dragDom.offsetLeft;
+      const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth;
 
-      const minDragDomTop = dragDom.offsetTop
-      const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomHeight
+      const minDragDomTop = dragDom.offsetTop;
+      const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomHeight;
 
       // 获取到的值带px 正则匹配替换
-      let styL = getStyle(dragDom, 'left')
-      let styT = getStyle(dragDom, 'top')
+      let styL = getStyle(dragDom, "left");
+      let styT = getStyle(dragDom, "top");
 
-      if (styL.includes('%')) {
-        styL = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100)
-        styT = +document.body.clientHeight * (+styT.replace(/\%/g, '') / 100)
+      if (styL.includes("%")) {
+        styL = +document.body.clientWidth * (+styL.replace(/\%/g, "") / 100);
+        styT = +document.body.clientHeight * (+styT.replace(/\%/g, "") / 100);
       } else {
-        styL = +styL.replace(/\px/g, '')
-        styT = +styT.replace(/\px/g, '')
+        styL = +styL.replace(/\px/g, "");
+        styT = +styT.replace(/\px/g, "");
       }
 
       document.onmousemove = function(e) {
         // 通过事件委托，计算移动的距离
-        let left = e.clientX - disX
-        let top = e.clientY - disY
+        let left = e.clientX - disX;
+        let top = e.clientY - disY;
 
         // 边界处理
-        if (-(left) > minDragDomLeft) {
-          left = -minDragDomLeft
+        if (-left > minDragDomLeft) {
+          left = -minDragDomLeft;
         } else if (left > maxDragDomLeft) {
-          left = maxDragDomLeft
+          left = maxDragDomLeft;
         }
 
-        if (-(top) > minDragDomTop) {
-          top = -minDragDomTop
+        if (-top > minDragDomTop) {
+          top = -minDragDomTop;
         } else if (top > maxDragDomTop) {
-          top = maxDragDomTop
+          top = maxDragDomTop;
         }
 
         // 移动当前元素
-        dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`
+        dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`;
 
         // emit onDrag event
-        vnode.child.$emit('dragDialog')
-      }
+        vnode.child.$emit("dragDialog");
+      };
 
       document.onmouseup = function(e) {
-        document.onmousemove = null
-        document.onmouseup = null
-      }
-    }
+        document.onmousemove = null;
+        document.onmouseup = null;
+      };
+    };
   }
-}
+};
diff --git a/src/directive/el-drag-dialog/index.js b/src/directive/el-drag-dialog/index.js
index 29facbfb..9ccbea6d 100644
--- a/src/directive/el-drag-dialog/index.js
+++ b/src/directive/el-drag-dialog/index.js
@@ -1,13 +1,13 @@
-import drag from './drag'
+import drag from "./drag";
 
 const install = function(Vue) {
-  Vue.directive('el-drag-dialog', drag)
-}
+  Vue.directive("el-drag-dialog", drag);
+};
 
 if (window.Vue) {
-  window['el-drag-dialog'] = drag
+  window["el-drag-dialog"] = drag;
   Vue.use(install); // eslint-disable-line
 }
 
-drag.install = install
-export default drag
+drag.install = install;
+export default drag;
diff --git a/src/directive/el-table/adaptive.js b/src/directive/el-table/adaptive.js
index d229e9fd..38e30f8a 100644
--- a/src/directive/el-table/adaptive.js
+++ b/src/directive/el-table/adaptive.js
@@ -1,4 +1,7 @@
-import { addResizeListener, removeResizeListener } from 'element-ui/src/utils/resize-event'
+import {
+  addResizeListener,
+  removeResizeListener
+} from "element-ui/src/utils/resize-event";
 
 /**
  * How to use
@@ -8,34 +11,35 @@ import { addResizeListener, removeResizeListener } from 'element-ui/src/utils/re
  */
 
 const doResize = (el, binding, vnode) => {
-  const { componentInstance: $table } = vnode
+  const { componentInstance: $table } = vnode;
 
-  const { value } = binding
+  const { value } = binding;
 
   if (!$table.height) {
-    throw new Error(`el-$table must set the height. Such as height='100px'`)
+    throw new Error(`el-$table must set the height. Such as height='100px'`);
   }
-  const bottomOffset = (value && value.bottomOffset) || 30
+  const bottomOffset = (value && value.bottomOffset) || 30;
 
-  if (!$table) return
+  if (!$table) return;
 
-  const height = window.innerHeight - el.getBoundingClientRect().top - bottomOffset
-  $table.layout.setHeight(height)
-  $table.doLayout()
-}
+  const height =
+    window.innerHeight - el.getBoundingClientRect().top - bottomOffset;
+  $table.layout.setHeight(height);
+  $table.doLayout();
+};
 
 export default {
   bind(el, binding, vnode) {
     el.resizeListener = () => {
-      doResize(el, binding, vnode)
-    }
+      doResize(el, binding, vnode);
+    };
     // parameter 1 is must be "Element" type
-    addResizeListener(window.document.body, el.resizeListener)
+    addResizeListener(window.document.body, el.resizeListener);
   },
   inserted(el, binding, vnode) {
-    doResize(el, binding, vnode)
+    doResize(el, binding, vnode);
   },
   unbind(el) {
-    removeResizeListener(window.document.body, el.resizeListener)
+    removeResizeListener(window.document.body, el.resizeListener);
   }
-}
+};
diff --git a/src/directive/el-table/index.js b/src/directive/el-table/index.js
index d3d45150..ad0577f7 100644
--- a/src/directive/el-table/index.js
+++ b/src/directive/el-table/index.js
@@ -1,13 +1,13 @@
-import adaptive from './adaptive'
+import adaptive from "./adaptive";
 
 const install = function(Vue) {
-  Vue.directive('el-height-adaptive-table', adaptive)
-}
+  Vue.directive("el-height-adaptive-table", adaptive);
+};
 
 if (window.Vue) {
-  window['el-height-adaptive-table'] = adaptive
+  window["el-height-adaptive-table"] = adaptive;
   Vue.use(install); // eslint-disable-line
 }
 
-adaptive.install = install
-export default adaptive
+adaptive.install = install;
+export default adaptive;
diff --git a/src/directive/permission/index.js b/src/directive/permission/index.js
index e5dadd36..7565e68b 100644
--- a/src/directive/permission/index.js
+++ b/src/directive/permission/index.js
@@ -1,13 +1,13 @@
-import permission from './permission'
+import permission from "./permission";
 
 const install = function(Vue) {
-  Vue.directive('permission', permission)
-}
+  Vue.directive("permission", permission);
+};
 
 if (window.Vue) {
-  window['permission'] = permission
+  window["permission"] = permission;
   Vue.use(install); // eslint-disable-line
 }
 
-permission.install = install
-export default permission
+permission.install = install;
+export default permission;
diff --git a/src/directive/permission/permission.js b/src/directive/permission/permission.js
index b27f24da..41ec77e3 100644
--- a/src/directive/permission/permission.js
+++ b/src/directive/permission/permission.js
@@ -1,22 +1,22 @@
-import store from '@/store'
+import store from "@/store";
 
 export default {
   inserted(el, binding, vnode) {
-    const { value } = binding
-    const roles = store.getters && store.getters.roles
+    const { value } = binding;
+    const roles = store.getters && store.getters.roles;
 
     if (value && value instanceof Array && value.length > 0) {
-      const permissionRoles = value
+      const permissionRoles = value;
 
       const hasPermission = roles.some(role => {
-        return permissionRoles.includes(role)
-      })
+        return permissionRoles.includes(role);
+      });
 
       if (!hasPermission) {
-        el.parentNode && el.parentNode.removeChild(el)
+        el.parentNode && el.parentNode.removeChild(el);
       }
     } else {
-      throw new Error(`need roles! Like v-permission="['admin','editor']"`)
+      throw new Error(`need roles! Like v-permission="['admin','editor']"`);
     }
   }
-}
+};
diff --git a/src/directive/sticky.js b/src/directive/sticky.js
index bc234660..6be81aef 100644
--- a/src/directive/sticky.js
+++ b/src/directive/sticky.js
@@ -1,91 +1,90 @@
-const vueSticky = {}
-let listenAction
+const vueSticky = {};
+let listenAction;
 vueSticky.install = Vue => {
-  Vue.directive('sticky', {
+  Vue.directive("sticky", {
     inserted(el, binding) {
-      const params = binding.value || {}
-      const stickyTop = params.stickyTop || 0
-      const zIndex = params.zIndex || 1000
-      const elStyle = el.style
+      const params = binding.value || {};
+      const stickyTop = params.stickyTop || 0;
+      const zIndex = params.zIndex || 1000;
+      const elStyle = el.style;
 
-      elStyle.position = '-webkit-sticky'
-      elStyle.position = 'sticky'
+      elStyle.position = "-webkit-sticky";
+      elStyle.position = "sticky";
       // if the browser support css sticky（Currently Safari, Firefox and Chrome Canary）
       // if (~elStyle.position.indexOf('sticky')) {
       //     elStyle.top = `${stickyTop}px`;
       //     elStyle.zIndex = zIndex;
       //     return
       // }
-      const elHeight = el.getBoundingClientRect().height
-      const elWidth = el.getBoundingClientRect().width
-      elStyle.cssText = `top: ${stickyTop}px; z-index: ${zIndex}`
+      const elHeight = el.getBoundingClientRect().height;
+      const elWidth = el.getBoundingClientRect().width;
+      elStyle.cssText = `top: ${stickyTop}px; z-index: ${zIndex}`;
 
-      const parentElm = el.parentNode || document.documentElement
-      const placeholder = document.createElement('div')
-      placeholder.style.display = 'none'
-      placeholder.style.width = `${elWidth}px`
-      placeholder.style.height = `${elHeight}px`
-      parentElm.insertBefore(placeholder, el)
+      const parentElm = el.parentNode || document.documentElement;
+      const placeholder = document.createElement("div");
+      placeholder.style.display = "none";
+      placeholder.style.width = `${elWidth}px`;
+      placeholder.style.height = `${elHeight}px`;
+      parentElm.insertBefore(placeholder, el);
 
-      let active = false
+      let active = false;
 
       const getScroll = (target, top) => {
-        const prop = top ? 'pageYOffset' : 'pageXOffset'
-        const method = top ? 'scrollTop' : 'scrollLeft'
-        let ret = target[prop]
-        if (typeof ret !== 'number') {
-          ret = window.document.documentElement[method]
+        const prop = top ? "pageYOffset" : "pageXOffset";
+        const method = top ? "scrollTop" : "scrollLeft";
+        let ret = target[prop];
+        if (typeof ret !== "number") {
+          ret = window.document.documentElement[method];
         }
-        return ret
-      }
+        return ret;
+      };
 
       const sticky = () => {
         if (active) {
-          return
+          return;
         }
         if (!elStyle.height) {
-          elStyle.height = `${el.offsetHeight}px`
+          elStyle.height = `${el.offsetHeight}px`;
         }
 
-        elStyle.position = 'fixed'
-        elStyle.width = `${elWidth}px`
-        placeholder.style.display = 'inline-block'
-        active = true
-      }
+        elStyle.position = "fixed";
+        elStyle.width = `${elWidth}px`;
+        placeholder.style.display = "inline-block";
+        active = true;
+      };
 
       const reset = () => {
         if (!active) {
-          return
+          return;
         }
 
-        elStyle.position = ''
-        placeholder.style.display = 'none'
-        active = false
-      }
+        elStyle.position = "";
+        placeholder.style.display = "none";
+        active = false;
+      };
 
       const check = () => {
-        const scrollTop = getScroll(window, true)
-        const offsetTop = el.getBoundingClientRect().top
+        const scrollTop = getScroll(window, true);
+        const offsetTop = el.getBoundingClientRect().top;
         if (offsetTop < stickyTop) {
-          sticky()
+          sticky();
         } else {
           if (scrollTop < elHeight + stickyTop) {
-            reset()
+            reset();
           }
         }
-      }
+      };
       listenAction = () => {
-        check()
-      }
+        check();
+      };
 
-      window.addEventListener('scroll', listenAction)
+      window.addEventListener("scroll", listenAction);
     },
 
     unbind() {
-      window.removeEventListener('scroll', listenAction)
+      window.removeEventListener("scroll", listenAction);
     }
-  })
-}
-
-export default vueSticky
+  });
+};
 
+export default vueSticky;
diff --git a/src/directive/waves/index.js b/src/directive/waves/index.js
index 65f9b308..bafd2cbf 100644
--- a/src/directive/waves/index.js
+++ b/src/directive/waves/index.js
@@ -1,13 +1,13 @@
-import waves from './waves'
+import waves from "./waves";
 
 const install = function(Vue) {
-  Vue.directive('waves', waves)
-}
+  Vue.directive("waves", waves);
+};
 
 if (window.Vue) {
-  window.waves = waves
+  window.waves = waves;
   Vue.use(install); // eslint-disable-line
 }
 
-waves.install = install
-export default waves
+waves.install = install;
+export default waves;
diff --git a/src/directive/waves/waves.js b/src/directive/waves/waves.js
index ec2ff439..ca1ca265 100644
--- a/src/directive/waves/waves.js
+++ b/src/directive/waves/waves.js
@@ -1,72 +1,80 @@
-import './waves.css'
+import "./waves.css";
 
-const context = '@@wavesContext'
+const context = "@@wavesContext";
 
 function handleClick(el, binding) {
   function handle(e) {
-    const customOpts = Object.assign({}, binding.value)
-    const opts = Object.assign({
-      ele: el, // 波纹作用元素
-      type: 'hit', // hit 点击位置扩散 center中心点扩展
-      color: 'rgba(0, 0, 0, 0.15)' // 波纹颜色
-    },
-    customOpts
-    )
-    const target = opts.ele
+    const customOpts = Object.assign({}, binding.value);
+    const opts = Object.assign(
+      {
+        ele: el, // 波纹作用元素
+        type: "hit", // hit 点击位置扩散 center中心点扩展
+        color: "rgba(0, 0, 0, 0.15)" // 波纹颜色
+      },
+      customOpts
+    );
+    const target = opts.ele;
     if (target) {
-      target.style.position = 'relative'
-      target.style.overflow = 'hidden'
-      const rect = target.getBoundingClientRect()
-      let ripple = target.querySelector('.waves-ripple')
+      target.style.position = "relative";
+      target.style.overflow = "hidden";
+      const rect = target.getBoundingClientRect();
+      let ripple = target.querySelector(".waves-ripple");
       if (!ripple) {
-        ripple = document.createElement('span')
-        ripple.className = 'waves-ripple'
-        ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px'
-        target.appendChild(ripple)
+        ripple = document.createElement("span");
+        ripple.className = "waves-ripple";
+        ripple.style.height = ripple.style.width =
+          Math.max(rect.width, rect.height) + "px";
+        target.appendChild(ripple);
       } else {
-        ripple.className = 'waves-ripple'
+        ripple.className = "waves-ripple";
       }
       switch (opts.type) {
-        case 'center':
-          ripple.style.top = rect.height / 2 - ripple.offsetHeight / 2 + 'px'
-          ripple.style.left = rect.width / 2 - ripple.offsetWidth / 2 + 'px'
-          break
+        case "center":
+          ripple.style.top = rect.height / 2 - ripple.offsetHeight / 2 + "px";
+          ripple.style.left = rect.width / 2 - ripple.offsetWidth / 2 + "px";
+          break;
         default:
           ripple.style.top =
-            (e.pageY - rect.top - ripple.offsetHeight / 2 - document.documentElement.scrollTop ||
-              document.body.scrollTop) + 'px'
+            (e.pageY -
+              rect.top -
+              ripple.offsetHeight / 2 -
+              document.documentElement.scrollTop || document.body.scrollTop) +
+            "px";
           ripple.style.left =
-            (e.pageX - rect.left - ripple.offsetWidth / 2 - document.documentElement.scrollLeft ||
-              document.body.scrollLeft) + 'px'
+            (e.pageX -
+              rect.left -
+              ripple.offsetWidth / 2 -
+              document.documentElement.scrollLeft || document.body.scrollLeft) +
+            "px";
       }
-      ripple.style.backgroundColor = opts.color
-      ripple.className = 'waves-ripple z-active'
-      return false
+      ripple.style.backgroundColor = opts.color;
+      ripple.className = "waves-ripple z-active";
+      return false;
     }
   }
 
   if (!el[context]) {
     el[context] = {
       removeHandle: handle
-    }
+    };
   } else {
-    el[context].removeHandle = handle
+    el[context].removeHandle = handle;
   }
 
-  return handle
+  return handle;
 }
 
 export default {
   bind(el, binding) {
-    el.addEventListener('click', handleClick(el, binding), false)
+    el.addEventListener("click", handleClick(el, binding), false);
   },
   update(el, binding) {
-    el.removeEventListener('click', el[context].removeHandle, false)
-    el.addEventListener('click', handleClick(el, binding), false)
+    el.removeEventListener("click", el[context].removeHandle, false);
+    el.addEventListener("click", handleClick(el, binding), false);
   },
   unbind(el) {
-    el.removeEventListener('click', el[context].removeHandle, false)
-    el[context] = null
-    delete el[context]
+    el.removeEventListener("click", el[context].removeHandle, false);
+    el[context] = null;
+    delete el[context];
   }
-}
+};
diff --git a/src/filters/index.js b/src/filters/index.js
index f6a28488..f5b45aab 100644
--- a/src/filters/index.js
+++ b/src/filters/index.js
@@ -1,5 +1,5 @@
 // import parseTime, formatTime and set to filter
-export { parseTime, formatTime } from '@/utils'
+export { parseTime, formatTime } from "@/utils";
 
 /**
  * Show plural label if time is plural number
@@ -9,22 +9,22 @@ export { parseTime, formatTime } from '@/utils'
  */
 function pluralize(time, label) {
   if (time === 1) {
-    return time + label
+    return time + label;
   }
-  return time + label + 's'
+  return time + label + "s";
 }
 
 /**
  * @param {number} time
  */
 export function timeAgo(time) {
-  const between = Date.now() / 1000 - Number(time)
+  const between = Date.now() / 1000 - Number(time);
   if (between < 3600) {
-    return pluralize(~~(between / 60), ' minute')
+    return pluralize(~~(between / 60), " minute");
   } else if (between < 86400) {
-    return pluralize(~~(between / 3600), ' hour')
+    return pluralize(~~(between / 3600), " hour");
   } else {
-    return pluralize(~~(between / 86400), ' day')
+    return pluralize(~~(between / 86400), " day");
   }
 }
 
@@ -36,19 +36,23 @@ export function timeAgo(time) {
  */
 export function numberFormatter(num, digits) {
   const si = [
-    { value: 1E18, symbol: 'E' },
-    { value: 1E15, symbol: 'P' },
-    { value: 1E12, symbol: 'T' },
-    { value: 1E9, symbol: 'G' },
-    { value: 1E6, symbol: 'M' },
-    { value: 1E3, symbol: 'k' }
-  ]
+    { value: 1e18, symbol: "E" },
+    { value: 1e15, symbol: "P" },
+    { value: 1e12, symbol: "T" },
+    { value: 1e9, symbol: "G" },
+    { value: 1e6, symbol: "M" },
+    { value: 1e3, symbol: "k" }
+  ];
   for (let i = 0; i < si.length; i++) {
     if (num >= si[i].value) {
-      return (num / si[i].value + 0.1).toFixed(digits).replace(/\.0+$|(\.[0-9]*[1-9])0+$/, '$1') + si[i].symbol
+      return (
+        (num / si[i].value + 0.1)
+          .toFixed(digits)
+          .replace(/\.0+$|(\.[0-9]*[1-9])0+$/, "$1") + si[i].symbol
+      );
     }
   }
-  return num.toString()
+  return num.toString();
 }
 
 /**
@@ -56,7 +60,9 @@ export function numberFormatter(num, digits) {
  * @param {number} num
  */
 export function toThousandFilter(num) {
-  return (+num || 0).toString().replace(/^-?\d+/g, m => m.replace(/(?=(?!\b)(\d{3})+$)/g, ','))
+  return (+num || 0)
+    .toString()
+    .replace(/^-?\d+/g, m => m.replace(/(?=(?!\b)(\d{3})+$)/g, ","));
 }
 
 /**
@@ -64,5 +70,5 @@ export function toThousandFilter(num) {
  * @param {String} string
  */
 export function uppercaseFirst(string) {
-  return string.charAt(0).toUpperCase() + string.slice(1)
+  return string.charAt(0).toUpperCase() + string.slice(1);
 }
diff --git a/src/icons/index.js b/src/icons/index.js
index 2c6b309c..d7029404 100644
--- a/src/icons/index.js
+++ b/src/icons/index.js
@@ -1,9 +1,9 @@
-import Vue from 'vue'
-import SvgIcon from '@/components/SvgIcon'// svg component
+import Vue from "vue";
+import SvgIcon from "@/components/SvgIcon"; // svg component
 
 // register globally
-Vue.component('svg-icon', SvgIcon)
+Vue.component("svg-icon", SvgIcon);
 
-const req = require.context('./svg', false, /\.svg$/)
-const requireAll = requireContext => requireContext.keys().map(requireContext)
-requireAll(req)
+const req = require.context("./svg", false, /\.svg$/);
+const requireAll = requireContext => requireContext.keys().map(requireContext);
+requireAll(req);
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
index a8976380..2601c217 100644
--- a/src/layout/components/AppMain.vue
+++ b/src/layout/components/AppMain.vue
@@ -10,16 +10,16 @@
 
 <script>
 export default {
-  name: 'AppMain',
+  name: "AppMain",
   computed: {
     cachedViews() {
-      return this.$store.state.tagsView.cachedViews
+      return this.$store.state.tagsView.cachedViews;
     },
     key() {
-      return this.$route.path
+      return this.$route.path;
     }
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>
@@ -31,7 +31,7 @@ export default {
   overflow: hidden;
 }
 
-.fixed-header+.app-main {
+.fixed-header + .app-main {
   padding-top: 50px;
 }
 
@@ -41,7 +41,7 @@ export default {
     min-height: calc(100vh - 84px);
   }
 
-  .fixed-header+.app-main {
+  .fixed-header + .app-main {
     padding-top: 84px;
   }
 }
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index d9075a24..f84b39ed 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -1,11 +1,16 @@
 <template>
   <div class="navbar">
-    <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
+    <hamburger
+      id="hamburger-container"
+      :is-active="sidebar.opened"
+      class="hamburger-container"
+      @toggleClick="toggleSideBar"
+    />
 
     <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
 
     <div class="right-menu">
-      <template v-if="device!=='mobile'">
+      <template v-if="device !== 'mobile'">
         <search id="header-search" class="right-menu-item" />
 
         <error-log class="errLog-container right-menu-item hover-effect" />
@@ -15,12 +20,14 @@
         <el-tooltip content="Global Size" effect="dark" placement="bottom">
           <size-select id="size-select" class="right-menu-item hover-effect" />
         </el-tooltip>
-
       </template>
 
-      <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
+      <el-dropdown
+        class="avatar-container right-menu-item hover-effect"
+        trigger="click"
+      >
         <div class="avatar-wrapper">
-          <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">
+          <img :src="avatar + '?imageView2/1/w/80/h/80'" class="user-avatar" />
           <i class="el-icon-caret-bottom" />
         </div>
         <el-dropdown-menu slot="dropdown">
@@ -30,10 +37,16 @@
           <router-link to="/">
             <el-dropdown-item>Dashboard</el-dropdown-item>
           </router-link>
-          <a target="_blank" href="https://github.com/PanJiaChen/vue-element-admin/">
+          <a
+            target="_blank"
+            href="https://github.com/PanJiaChen/vue-element-admin/"
+          >
             <el-dropdown-item>Github</el-dropdown-item>
           </a>
-          <a target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/#/">
+          <a
+            target="_blank"
+            href="https://panjiachen.github.io/vue-element-admin-site/#/"
+          >
             <el-dropdown-item>Docs</el-dropdown-item>
           </a>
           <el-dropdown-item divided>
@@ -46,13 +59,13 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
-import Breadcrumb from '@/components/Breadcrumb'
-import Hamburger from '@/components/Hamburger'
-import ErrorLog from '@/components/ErrorLog'
-import Screenfull from '@/components/Screenfull'
-import SizeSelect from '@/components/SizeSelect'
-import Search from '@/components/HeaderSearch'
+import { mapGetters } from "vuex";
+import Breadcrumb from "@/components/Breadcrumb";
+import Hamburger from "@/components/Hamburger";
+import ErrorLog from "@/components/ErrorLog";
+import Screenfull from "@/components/Screenfull";
+import SizeSelect from "@/components/SizeSelect";
+import Search from "@/components/HeaderSearch";
 
 export default {
   components: {
@@ -64,22 +77,18 @@ export default {
     Search
   },
   computed: {
-    ...mapGetters([
-      'sidebar',
-      'avatar',
-      'device'
-    ])
+    ...mapGetters(["sidebar", "avatar", "device"])
   },
   methods: {
     toggleSideBar() {
-      this.$store.dispatch('app/toggleSideBar')
+      this.$store.dispatch("app/toggleSideBar");
     },
     async logout() {
-      await this.$store.dispatch('user/logout')
-      this.$router.push(`/login?redirect=${this.$route.fullPath}`)
+      await this.$store.dispatch("user/logout");
+      this.$router.push(`/login?redirect=${this.$route.fullPath}`);
     }
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>
@@ -88,18 +97,18 @@ export default {
   overflow: hidden;
   position: relative;
   background: #fff;
-  box-shadow: 0 1px 4px rgba(0,21,41,.08);
+  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
 
   .hamburger-container {
     line-height: 46px;
     height: 100%;
     float: left;
     cursor: pointer;
-    transition: background .3s;
-    -webkit-tap-highlight-color:transparent;
+    transition: background 0.3s;
+    -webkit-tap-highlight-color: transparent;
 
     &:hover {
-      background: rgba(0, 0, 0, .025)
+      background: rgba(0, 0, 0, 0.025);
     }
   }
 
@@ -131,10 +140,10 @@ export default {
 
       &.hover-effect {
         cursor: pointer;
-        transition: background .3s;
+        transition: background 0.3s;
 
         &:hover {
-          background: rgba(0, 0, 0, .025)
+          background: rgba(0, 0, 0, 0.025);
         }
       }
     }
diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
index 32ef0189..e09ff9c7 100644
--- a/src/layout/components/Settings/index.vue
+++ b/src/layout/components/Settings/index.vue
@@ -5,7 +5,10 @@
 
       <div class="drawer-item">
         <span>Theme Color</span>
-        <theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" />
+        <theme-picker
+          style="float: right;height: 26px;margin: -3px 8px 0 0;"
+          @change="themeChange"
+        />
       </div>
 
       <div class="drawer-item">
@@ -22,63 +25,62 @@
         <span>Sidebar Logo</span>
         <el-switch v-model="sidebarLogo" class="drawer-switch" />
       </div>
-
     </div>
   </div>
 </template>
 
 <script>
-import ThemePicker from '@/components/ThemePicker'
+import ThemePicker from "@/components/ThemePicker";
 
 export default {
   components: { ThemePicker },
   data() {
-    return {}
+    return {};
   },
   computed: {
     fixedHeader: {
       get() {
-        return this.$store.state.settings.fixedHeader
+        return this.$store.state.settings.fixedHeader;
       },
       set(val) {
-        this.$store.dispatch('settings/changeSetting', {
-          key: 'fixedHeader',
+        this.$store.dispatch("settings/changeSetting", {
+          key: "fixedHeader",
           value: val
-        })
+        });
       }
     },
     tagsView: {
       get() {
-        return this.$store.state.settings.tagsView
+        return this.$store.state.settings.tagsView;
       },
       set(val) {
-        this.$store.dispatch('settings/changeSetting', {
-          key: 'tagsView',
+        this.$store.dispatch("settings/changeSetting", {
+          key: "tagsView",
           value: val
-        })
+        });
       }
     },
     sidebarLogo: {
       get() {
-        return this.$store.state.settings.sidebarLogo
+        return this.$store.state.settings.sidebarLogo;
       },
       set(val) {
-        this.$store.dispatch('settings/changeSetting', {
-          key: 'sidebarLogo',
+        this.$store.dispatch("settings/changeSetting", {
+          key: "sidebarLogo",
           value: val
-        })
+        });
       }
     }
   },
   methods: {
     themeChange(val) {
-      this.$store.dispatch('settings/changeSetting', {
-        key: 'theme',
+      this.$store.dispatch("settings/changeSetting", {
+        key: "theme",
         value: val
-      })
+      });
     }
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>
@@ -90,19 +92,19 @@ export default {
 
   .drawer-title {
     margin-bottom: 12px;
-    color: rgba(0, 0, 0, .85);
+    color: rgba(0, 0, 0, 0.85);
     font-size: 14px;
     line-height: 22px;
   }
 
   .drawer-item {
-    color: rgba(0, 0, 0, .65);
+    color: rgba(0, 0, 0, 0.65);
     font-size: 14px;
     padding: 12px 0;
   }
 
   .drawer-switch {
-    float: right
+    float: right;
   }
 }
 </style>
diff --git a/src/layout/components/Sidebar/FixiOSBug.js b/src/layout/components/Sidebar/FixiOSBug.js
index bc14856f..c9c5d2a5 100644
--- a/src/layout/components/Sidebar/FixiOSBug.js
+++ b/src/layout/components/Sidebar/FixiOSBug.js
@@ -1,26 +1,26 @@
 export default {
   computed: {
     device() {
-      return this.$store.state.app.device
+      return this.$store.state.app.device;
     }
   },
   mounted() {
     // In order to fix the click on menu on the ios device will trigger the mouseleave bug
     // https://github.com/PanJiaChen/vue-element-admin/issues/1135
-    this.fixBugIniOS()
+    this.fixBugIniOS();
   },
   methods: {
     fixBugIniOS() {
-      const $subMenu = this.$refs.subMenu
+      const $subMenu = this.$refs.subMenu;
       if ($subMenu) {
-        const handleMouseleave = $subMenu.handleMouseleave
-        $subMenu.handleMouseleave = (e) => {
-          if (this.device === 'mobile') {
-            return
+        const handleMouseleave = $subMenu.handleMouseleave;
+        $subMenu.handleMouseleave = e => {
+          if (this.device === "mobile") {
+            return;
           }
-          handleMouseleave(e)
-        }
+          handleMouseleave(e);
+        };
       }
     }
   }
-}
+};
diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue
index b515f615..ecd826be 100644
--- a/src/layout/components/Sidebar/Item.vue
+++ b/src/layout/components/Sidebar/Item.vue
@@ -1,29 +1,29 @@
 <script>
 export default {
-  name: 'MenuItem',
+  name: "MenuItem",
   functional: true,
   props: {
     icon: {
       type: String,
-      default: ''
+      default: ""
     },
     title: {
       type: String,
-      default: ''
+      default: ""
     }
   },
   render(h, context) {
-    const { icon, title } = context.props
-    const vnodes = []
+    const { icon, title } = context.props;
+    const vnodes = [];
 
     if (icon) {
-      vnodes.push(<svg-icon icon-class={icon}/>)
+      vnodes.push(<svg-icon icon-class={icon} />);
     }
 
     if (title) {
-      vnodes.push(<span slot='title'>{(title)}</span>)
+      vnodes.push(<span slot="title">{title}</span>);
     }
-    return vnodes
+    return vnodes;
   }
-}
+};
 </script>
diff --git a/src/layout/components/Sidebar/Link.vue b/src/layout/components/Sidebar/Link.vue
index eb4dd107..3be5ba60 100644
--- a/src/layout/components/Sidebar/Link.vue
+++ b/src/layout/components/Sidebar/Link.vue
@@ -1,4 +1,3 @@
-
 <template>
   <!-- eslint-disable vue/require-component-is -->
   <component v-bind="linkProps(to)">
@@ -7,7 +6,7 @@
 </template>
 
 <script>
-import { isExternal } from '@/utils/validate'
+import { isExternal } from "@/utils/validate";
 
 export default {
   props: {
@@ -20,17 +19,17 @@ export default {
     linkProps(url) {
       if (isExternal(url)) {
         return {
-          is: 'a',
+          is: "a",
           href: url,
-          target: '_blank',
-          rel: 'noopener'
-        }
+          target: "_blank",
+          rel: "noopener"
+        };
       }
       return {
-        is: 'router-link',
+        is: "router-link",
         to: url
-      }
+      };
     }
   }
-}
+};
 </script>
diff --git a/src/layout/components/Sidebar/Logo.vue b/src/layout/components/Sidebar/Logo.vue
index ac0c8d8f..0f7c8a3c 100644
--- a/src/layout/components/Sidebar/Logo.vue
+++ b/src/layout/components/Sidebar/Logo.vue
@@ -1,13 +1,18 @@
 <template>
-  <div class="sidebar-logo-container" :class="{'collapse':collapse}">
+  <div class="sidebar-logo-container" :class="{ collapse: collapse }">
     <transition name="sidebarLogoFade">
-      <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
-        <img v-if="logo" :src="logo" class="sidebar-logo">
-        <h1 v-else class="sidebar-title">{{ title }} </h1>
+      <router-link
+        v-if="collapse"
+        key="collapse"
+        class="sidebar-logo-link"
+        to="/"
+      >
+        <img v-if="logo" :src="logo" class="sidebar-logo" />
+        <h1 v-else class="sidebar-title">{{ title }}</h1>
       </router-link>
       <router-link v-else key="expand" class="sidebar-logo-link" to="/">
-        <img v-if="logo" :src="logo" class="sidebar-logo">
-        <h1 class="sidebar-title">{{ title }} </h1>
+        <img v-if="logo" :src="logo" class="sidebar-logo" />
+        <h1 class="sidebar-title">{{ title }}</h1>
       </router-link>
     </transition>
   </div>
@@ -15,7 +20,7 @@
 
 <script>
 export default {
-  name: 'SidebarLogo',
+  name: "SidebarLogo",
   props: {
     collapse: {
       type: Boolean,
@@ -24,11 +29,12 @@ export default {
   },
   data() {
     return {
-      title: 'Vue Element Admin',
-      logo: 'https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef5251.png'
-    }
+      title: "Vue Element Admin",
+      logo:
+        "https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef5251.png"
+    };
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue
index 2d49dd87..0cb8e118 100644
--- a/src/layout/components/Sidebar/SidebarItem.vue
+++ b/src/layout/components/Sidebar/SidebarItem.vue
@@ -1,16 +1,37 @@
 <template>
   <div v-if="!item.hidden" class="menu-wrapper">
-    <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
+    <template
+      v-if="
+        hasOneShowingChild(item.children, item) &&
+          (!onlyOneChild.children || onlyOneChild.noShowingChildren) &&
+          !item.alwaysShow
+      "
+    >
       <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
-        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
-          <item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="onlyOneChild.meta.title" />
+        <el-menu-item
+          :index="resolvePath(onlyOneChild.path)"
+          :class="{ 'submenu-title-noDropdown': !isNest }"
+        >
+          <item
+            :icon="onlyOneChild.meta.icon || (item.meta && item.meta.icon)"
+            :title="onlyOneChild.meta.title"
+          />
         </el-menu-item>
       </app-link>
     </template>
 
-    <el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
+    <el-submenu
+      v-else
+      ref="subMenu"
+      :index="resolvePath(item.path)"
+      popper-append-to-body
+    >
       <template slot="title">
-        <item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="item.meta.title" />
+        <item
+          v-if="item.meta"
+          :icon="item.meta && item.meta.icon"
+          :title="item.meta.title"
+        />
       </template>
       <sidebar-item
         v-for="child in item.children"
@@ -25,14 +46,14 @@
 </template>
 
 <script>
-import path from 'path'
-import { isExternal } from '@/utils/validate'
-import Item from './Item'
-import AppLink from './Link'
-import FixiOSBug from './FixiOSBug'
+import path from "path";
+import { isExternal } from "@/utils/validate";
+import Item from "./Item";
+import AppLink from "./Link";
+import FixiOSBug from "./FixiOSBug";
 
 export default {
-  name: 'SidebarItem',
+  name: "SidebarItem",
   components: { Item, AppLink },
   mixins: [FixiOSBug],
   props: {
@@ -47,49 +68,49 @@ export default {
     },
     basePath: {
       type: String,
-      default: ''
+      default: ""
     }
   },
   data() {
     // To fix https://github.com/PanJiaChen/vue-admin-template/issues/237
     // TODO: refactor with render function
-    this.onlyOneChild = null
-    return {}
+    this.onlyOneChild = null;
+    return {};
   },
   methods: {
     hasOneShowingChild(children = [], parent) {
       const showingChildren = children.filter(item => {
         if (item.hidden) {
-          return false
+          return false;
         } else {
           // Temp set(will be used if only has one showing child)
-          this.onlyOneChild = item
-          return true
+          this.onlyOneChild = item;
+          return true;
         }
-      })
+      });
 
       // When there is only one child router, the child router is displayed by default
       if (showingChildren.length === 1) {
-        return true
+        return true;
       }
 
       // Show parent if there are no child router to display
       if (showingChildren.length === 0) {
-        this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
-        return true
+        this.onlyOneChild = { ...parent, path: "", noShowingChildren: true };
+        return true;
       }
 
-      return false
+      return false;
     },
     resolvePath(routePath) {
       if (isExternal(routePath)) {
-        return routePath
+        return routePath;
       }
       if (isExternal(this.basePath)) {
-        return this.basePath
+        return this.basePath;
       }
-      return path.resolve(this.basePath, routePath)
+      return path.resolve(this.basePath, routePath);
     }
   }
-}
+};
 </script>
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
index fb014a23..7b0b273b 100644
--- a/src/layout/components/Sidebar/index.vue
+++ b/src/layout/components/Sidebar/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="{'has-logo':showLogo}">
+  <div :class="{ 'has-logo': showLogo }">
     <logo v-if="showLogo" :collapse="isCollapse" />
     <el-scrollbar wrap-class="scrollbar-wrapper">
       <el-menu
@@ -12,43 +12,45 @@
         :collapse-transition="false"
         mode="vertical"
       >
-        <sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" />
+        <sidebar-item
+          v-for="route in permission_routes"
+          :key="route.path"
+          :item="route"
+          :base-path="route.path"
+        />
       </el-menu>
     </el-scrollbar>
   </div>
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
-import Logo from './Logo'
-import SidebarItem from './SidebarItem'
-import variables from '@/styles/variables.scss'
+import { mapGetters } from "vuex";
+import Logo from "./Logo";
+import SidebarItem from "./SidebarItem";
+import variables from "@/styles/variables.scss";
 
 export default {
   components: { SidebarItem, Logo },
   computed: {
-    ...mapGetters([
-      'permission_routes',
-      'sidebar'
-    ]),
+    ...mapGetters(["permission_routes", "sidebar"]),
     activeMenu() {
-      const route = this.$route
-      const { meta, path } = route
+      const route = this.$route;
+      const { meta, path } = route;
       // if set path, the sidebar will highlight the path you set
       if (meta.activeMenu) {
-        return meta.activeMenu
+        return meta.activeMenu;
       }
-      return path
+      return path;
     },
     showLogo() {
-      return this.$store.state.settings.sidebarLogo
+      return this.$store.state.settings.sidebarLogo;
     },
     variables() {
-      return variables
+      return variables;
     },
     isCollapse() {
-      return !this.sidebar.opened
+      return !this.sidebar.opened;
     }
   }
-}
+};
 </script>
diff --git a/src/layout/components/TagsView/ScrollPane.vue b/src/layout/components/TagsView/ScrollPane.vue
index 0ec76e72..b975e3e8 100644
--- a/src/layout/components/TagsView/ScrollPane.vue
+++ b/src/layout/components/TagsView/ScrollPane.vue
@@ -1,70 +1,81 @@
 <template>
-  <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
+  <el-scrollbar
+    ref="scrollContainer"
+    :vertical="false"
+    class="scroll-container"
+    @wheel.native.prevent="handleScroll"
+  >
     <slot />
   </el-scrollbar>
 </template>
 
 <script>
-const tagAndTagSpacing = 4 // tagAndTagSpacing
+const tagAndTagSpacing = 4; // tagAndTagSpacing
 
 export default {
-  name: 'ScrollPane',
+  name: "ScrollPane",
   data() {
     return {
       left: 0
-    }
+    };
   },
   computed: {
     scrollWrapper() {
-      return this.$refs.scrollContainer.$refs.wrap
+      return this.$refs.scrollContainer.$refs.wrap;
     }
   },
   methods: {
     handleScroll(e) {
-      const eventDelta = e.wheelDelta || -e.deltaY * 40
-      const $scrollWrapper = this.scrollWrapper
-      $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
+      const eventDelta = e.wheelDelta || -e.deltaY * 40;
+      const $scrollWrapper = this.scrollWrapper;
+      $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4;
     },
     moveToTarget(currentTag) {
-      const $container = this.$refs.scrollContainer.$el
-      const $containerWidth = $container.offsetWidth
-      const $scrollWrapper = this.scrollWrapper
-      const tagList = this.$parent.$refs.tag
+      const $container = this.$refs.scrollContainer.$el;
+      const $containerWidth = $container.offsetWidth;
+      const $scrollWrapper = this.scrollWrapper;
+      const tagList = this.$parent.$refs.tag;
 
-      let firstTag = null
-      let lastTag = null
+      let firstTag = null;
+      let lastTag = null;
 
       // find first tag and last tag
       if (tagList.length > 0) {
-        firstTag = tagList[0]
-        lastTag = tagList[tagList.length - 1]
+        firstTag = tagList[0];
+        lastTag = tagList[tagList.length - 1];
       }
 
       if (firstTag === currentTag) {
-        $scrollWrapper.scrollLeft = 0
+        $scrollWrapper.scrollLeft = 0;
       } else if (lastTag === currentTag) {
-        $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
+        $scrollWrapper.scrollLeft =
+          $scrollWrapper.scrollWidth - $containerWidth;
       } else {
         // find preTag and nextTag
-        const currentIndex = tagList.findIndex(item => item === currentTag)
-        const prevTag = tagList[currentIndex - 1]
-        const nextTag = tagList[currentIndex + 1]
+        const currentIndex = tagList.findIndex(item => item === currentTag);
+        const prevTag = tagList[currentIndex - 1];
+        const nextTag = tagList[currentIndex + 1];
 
         // the tag's offsetLeft after of nextTag
-        const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing
+        const afterNextTagOffsetLeft =
+          nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing;
 
         // the tag's offsetLeft before of prevTag
-        const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
+        const beforePrevTagOffsetLeft =
+          prevTag.$el.offsetLeft - tagAndTagSpacing;
 
-        if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
-          $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
+        if (
+          afterNextTagOffsetLeft >
+          $scrollWrapper.scrollLeft + $containerWidth
+        ) {
+          $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth;
         } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
-          $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
+          $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft;
         }
       }
     }
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>
@@ -73,7 +84,7 @@ export default {
   position: relative;
   overflow: hidden;
   width: 100%;
-  /deep/ {
+  ::v-deep {
     .el-scrollbar__bar {
       bottom: 0px;
     }
diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
index 24a92f1d..43f06f10 100644
--- a/src/layout/components/TagsView/index.vue
+++ b/src/layout/components/TagsView/index.vue
@@ -5,20 +5,33 @@
         v-for="tag in visitedViews"
         ref="tag"
         :key="tag.path"
-        :class="isActive(tag)?'active':''"
+        :class="isActive(tag) ? 'active' : ''"
         :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
         tag="span"
         class="tags-view-item"
         @click.middle.native="closeSelectedTag(tag)"
-        @contextmenu.prevent.native="openMenu(tag,$event)"
+        @contextmenu.prevent.native="openMenu(tag, $event)"
       >
         {{ tag.title }}
-        <span v-if="!tag.meta.affix" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
+        <span
+          v-if="!tag.meta.affix"
+          class="el-icon-close"
+          @click.prevent.stop="closeSelectedTag(tag)"
+        />
       </router-link>
     </scroll-pane>
-    <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
+    <ul
+      v-show="visible"
+      :style="{ left: left + 'px', top: top + 'px' }"
+      class="contextmenu"
+    >
       <li @click="refreshSelectedTag(selectedTag)">Refresh</li>
-      <li v-if="!(selectedTag.meta&&selectedTag.meta.affix)" @click="closeSelectedTag(selectedTag)">Close</li>
+      <li
+        v-if="!(selectedTag.meta && selectedTag.meta.affix)"
+        @click="closeSelectedTag(selectedTag)"
+      >
+        Close
+      </li>
       <li @click="closeOthersTags">Close Others</li>
       <li @click="closeAllTags(selectedTag)">Close All</li>
     </ul>
@@ -26,8 +39,8 @@
 </template>
 
 <script>
-import ScrollPane from './ScrollPane'
-import path from 'path'
+import ScrollPane from "./ScrollPane";
+import path from "path";
 
 export default {
   components: { ScrollPane },
@@ -38,157 +51,161 @@ export default {
       left: 0,
       selectedTag: {},
       affixTags: []
-    }
+    };
   },
   computed: {
     visitedViews() {
-      return this.$store.state.tagsView.visitedViews
+      return this.$store.state.tagsView.visitedViews;
     },
     routes() {
-      return this.$store.state.permission.routes
+      return this.$store.state.permission.routes;
     }
   },
   watch: {
     $route() {
-      this.addTags()
-      this.moveToCurrentTag()
+      this.addTags();
+      this.moveToCurrentTag();
     },
     visible(value) {
       if (value) {
-        document.body.addEventListener('click', this.closeMenu)
+        document.body.addEventListener("click", this.closeMenu);
       } else {
-        document.body.removeEventListener('click', this.closeMenu)
+        document.body.removeEventListener("click", this.closeMenu);
       }
     }
   },
   mounted() {
-    this.initTags()
-    this.addTags()
+    this.initTags();
+    this.addTags();
   },
   methods: {
     isActive(route) {
-      return route.path === this.$route.path
+      return route.path === this.$route.path;
     },
-    filterAffixTags(routes, basePath = '/') {
-      let tags = []
+    filterAffixTags(routes, basePath = "/") {
+      let tags = [];
       routes.forEach(route => {
         if (route.meta && route.meta.affix) {
-          const tagPath = path.resolve(basePath, route.path)
+          const tagPath = path.resolve(basePath, route.path);
           tags.push({
             fullPath: tagPath,
             path: tagPath,
             name: route.name,
             meta: { ...route.meta }
-          })
+          });
         }
         if (route.children) {
-          const tempTags = this.filterAffixTags(route.children, route.path)
+          const tempTags = this.filterAffixTags(route.children, route.path);
           if (tempTags.length >= 1) {
-            tags = [...tags, ...tempTags]
+            tags = [...tags, ...tempTags];
           }
         }
-      })
-      return tags
+      });
+      return tags;
     },
     initTags() {
-      const affixTags = this.affixTags = this.filterAffixTags(this.routes)
+      const affixTags = (this.affixTags = this.filterAffixTags(this.routes));
       for (const tag of affixTags) {
         // Must have tag name
         if (tag.name) {
-          this.$store.dispatch('tagsView/addVisitedView', tag)
+          this.$store.dispatch("tagsView/addVisitedView", tag);
         }
       }
     },
     addTags() {
-      const { name } = this.$route
+      const { name } = this.$route;
       if (name) {
-        this.$store.dispatch('tagsView/addView', this.$route)
+        this.$store.dispatch("tagsView/addView", this.$route);
       }
-      return false
+      return false;
     },
     moveToCurrentTag() {
-      const tags = this.$refs.tag
+      const tags = this.$refs.tag;
       this.$nextTick(() => {
         for (const tag of tags) {
           if (tag.to.path === this.$route.path) {
-            this.$refs.scrollPane.moveToTarget(tag)
+            this.$refs.scrollPane.moveToTarget(tag);
             // when query is different then update
             if (tag.to.fullPath !== this.$route.fullPath) {
-              this.$store.dispatch('tagsView/updateVisitedView', this.$route)
+              this.$store.dispatch("tagsView/updateVisitedView", this.$route);
             }
-            break
+            break;
           }
         }
-      })
+      });
     },
     refreshSelectedTag(view) {
-      this.$store.dispatch('tagsView/delCachedView', view).then(() => {
-        const { fullPath } = view
+      this.$store.dispatch("tagsView/delCachedView", view).then(() => {
+        const { fullPath } = view;
         this.$nextTick(() => {
           this.$router.replace({
-            path: '/redirect' + fullPath
-          })
-        })
-      })
+            path: "/redirect" + fullPath
+          });
+        });
+      });
     },
     closeSelectedTag(view) {
-      this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => {
-        if (this.isActive(view)) {
-          this.toLastView(visitedViews, view)
-        }
-      })
+      this.$store
+        .dispatch("tagsView/delView", view)
+        .then(({ visitedViews }) => {
+          if (this.isActive(view)) {
+            this.toLastView(visitedViews, view);
+          }
+        });
     },
     closeOthersTags() {
-      this.$router.push(this.selectedTag)
-      this.$store.dispatch('tagsView/delOthersViews', this.selectedTag).then(() => {
-        this.moveToCurrentTag()
-      })
+      this.$router.push(this.selectedTag);
+      this.$store
+        .dispatch("tagsView/delOthersViews", this.selectedTag)
+        .then(() => {
+          this.moveToCurrentTag();
+        });
     },
     closeAllTags(view) {
-      this.$store.dispatch('tagsView/delAllViews').then(({ visitedViews }) => {
+      this.$store.dispatch("tagsView/delAllViews").then(({ visitedViews }) => {
         if (this.affixTags.some(tag => tag.path === view.path)) {
-          return
+          return;
         }
-        this.toLastView(visitedViews, view)
-      })
+        this.toLastView(visitedViews, view);
+      });
     },
     toLastView(visitedViews, view) {
-      const latestView = visitedViews.slice(-1)[0]
+      const latestView = visitedViews.slice(-1)[0];
       if (latestView) {
-        this.$router.push(latestView)
+        this.$router.push(latestView);
       } else {
         // now the default is to redirect to the home page if there is no tags-view,
         // you can adjust it according to your needs.
-        if (view.name === 'Dashboard') {
+        if (view.name === "Dashboard") {
           // to reload home page
-          this.$router.replace({ path: '/redirect' + view.fullPath })
+          this.$router.replace({ path: "/redirect" + view.fullPath });
         } else {
-          this.$router.push('/')
+          this.$router.push("/");
         }
       }
     },
     openMenu(tag, e) {
-      const menuMinWidth = 105
-      const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
-      const offsetWidth = this.$el.offsetWidth // container width
-      const maxLeft = offsetWidth - menuMinWidth // left boundary
-      const left = e.clientX - offsetLeft + 15 // 15: margin right
+      const menuMinWidth = 105;
+      const offsetLeft = this.$el.getBoundingClientRect().left; // container margin left
+      const offsetWidth = this.$el.offsetWidth; // container width
+      const maxLeft = offsetWidth - menuMinWidth; // left boundary
+      const left = e.clientX - offsetLeft + 15; // 15: margin right
 
       if (left > maxLeft) {
-        this.left = maxLeft
+        this.left = maxLeft;
       } else {
-        this.left = left
+        this.left = left;
       }
 
-      this.top = e.clientY
-      this.visible = true
-      this.selectedTag = tag
+      this.top = e.clientY;
+      this.visible = true;
+      this.selectedTag = tag;
     },
     closeMenu() {
-      this.visible = false
+      this.visible = false;
     }
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>
@@ -197,7 +214,7 @@ export default {
   width: 100%;
   background: #fff;
   border-bottom: 1px solid #d8dce5;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
   .tags-view-wrapper {
     .tags-view-item {
       display: inline-block;
@@ -223,7 +240,7 @@ export default {
         color: #fff;
         border-color: #42b983;
         &::before {
-          content: '';
+          content: "";
           background: #fff;
           display: inline-block;
           width: 8px;
@@ -246,7 +263,7 @@ export default {
     font-size: 12px;
     font-weight: 400;
     color: #333;
-    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
     li {
       margin: 0;
       padding: 7px 16px;
@@ -269,10 +286,10 @@ export default {
       vertical-align: 2px;
       border-radius: 50%;
       text-align: center;
-      transition: all .3s cubic-bezier(.645, .045, .355, 1);
+      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
       transform-origin: 100% 50%;
       &:before {
-        transform: scale(.6);
+        transform: scale(0.6);
         display: inline-block;
         vertical-align: -3px;
       }
diff --git a/src/layout/components/index.js b/src/layout/components/index.js
index 104bd3ac..cc7fed00 100644
--- a/src/layout/components/index.js
+++ b/src/layout/components/index.js
@@ -1,5 +1,5 @@
-export { default as AppMain } from './AppMain'
-export { default as Navbar } from './Navbar'
-export { default as Settings } from './Settings'
-export { default as Sidebar } from './Sidebar/index.vue'
-export { default as TagsView } from './TagsView/index.vue'
+export { default as AppMain } from "./AppMain";
+export { default as Navbar } from "./Navbar";
+export { default as Settings } from "./Settings";
+export { default as Sidebar } from "./Sidebar/index.vue";
+export { default as TagsView } from "./TagsView/index.vue";
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 965bcd1b..73cf51d8 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -1,9 +1,13 @@
 <template>
   <div :class="classObj" class="app-wrapper">
-    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
+    <div
+      v-if="device === 'mobile' && sidebar.opened"
+      class="drawer-bg"
+      @click="handleClickOutside"
+    />
     <sidebar class="sidebar-container" />
-    <div :class="{hasTagsView:needTagsView}" class="main-container">
-      <div :class="{'fixed-header':fixedHeader}">
+    <div :class="{ hasTagsView: needTagsView }" class="main-container">
+      <div :class="{ 'fixed-header': fixedHeader }">
         <navbar />
         <tags-view v-if="needTagsView" />
       </div>
@@ -16,13 +20,13 @@
 </template>
 
 <script>
-import RightPanel from '@/components/RightPanel'
-import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
-import ResizeMixin from './mixin/ResizeHandler'
-import { mapState } from 'vuex'
+import RightPanel from "@/components/RightPanel";
+import { AppMain, Navbar, Settings, Sidebar, TagsView } from "./components";
+import ResizeMixin from "./mixin/ResizeHandler";
+import { mapState } from "vuex";
 
 export default {
-  name: 'Layout',
+  name: "Layout",
   components: {
     AppMain,
     Navbar,
@@ -45,58 +49,58 @@ export default {
         hideSidebar: !this.sidebar.opened,
         openSidebar: this.sidebar.opened,
         withoutAnimation: this.sidebar.withoutAnimation,
-        mobile: this.device === 'mobile'
-      }
+        mobile: this.device === "mobile"
+      };
     }
   },
   methods: {
     handleClickOutside() {
-      this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
+      this.$store.dispatch("app/closeSideBar", { withoutAnimation: false });
     }
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>
-  @import "~@/styles/mixin.scss";
-  @import "~@/styles/variables.scss";
+@import "~@/styles/mixin.scss";
+@import "~@/styles/variables.scss";
 
-  .app-wrapper {
-    @include clearfix;
-    position: relative;
-    height: 100%;
-    width: 100%;
+.app-wrapper {
+  @include clearfix;
+  position: relative;
+  height: 100%;
+  width: 100%;
 
-    &.mobile.openSidebar {
-      position: fixed;
-      top: 0;
-    }
-  }
-
-  .drawer-bg {
-    background: #000;
-    opacity: 0.3;
-    width: 100%;
-    top: 0;
-    height: 100%;
-    position: absolute;
-    z-index: 999;
-  }
-
-  .fixed-header {
+  &.mobile.openSidebar {
     position: fixed;
     top: 0;
-    right: 0;
-    z-index: 9;
-    width: calc(100% - #{$sideBarWidth});
-    transition: width 0.28s;
   }
+}
 
-  .hideSidebar .fixed-header {
-    width: calc(100% - 54px)
-  }
+.drawer-bg {
+  background: #000;
+  opacity: 0.3;
+  width: 100%;
+  top: 0;
+  height: 100%;
+  position: absolute;
+  z-index: 999;
+}
 
-  .mobile .fixed-header {
-    width: 100%;
-  }
+.fixed-header {
+  position: fixed;
+  top: 0;
+  right: 0;
+  z-index: 9;
+  width: calc(100% - #{$sideBarWidth});
+  transition: width 0.28s;
+}
+
+.hideSidebar .fixed-header {
+  width: calc(100% - 54px);
+}
+
+.mobile .fixed-header {
+  width: 100%;
+}
 </style>
diff --git a/src/layout/mixin/ResizeHandler.js b/src/layout/mixin/ResizeHandler.js
index e8d0df8c..48f79594 100644
--- a/src/layout/mixin/ResizeHandler.js
+++ b/src/layout/mixin/ResizeHandler.js
@@ -1,45 +1,45 @@
-import store from '@/store'
+import store from "@/store";
 
-const { body } = document
-const WIDTH = 992 // refer to Bootstrap's responsive design
+const { body } = document;
+const WIDTH = 992; // refer to Bootstrap's responsive design
 
 export default {
   watch: {
     $route(route) {
-      if (this.device === 'mobile' && this.sidebar.opened) {
-        store.dispatch('app/closeSideBar', { withoutAnimation: false })
+      if (this.device === "mobile" && this.sidebar.opened) {
+        store.dispatch("app/closeSideBar", { withoutAnimation: false });
       }
     }
   },
   beforeMount() {
-    window.addEventListener('resize', this.$_resizeHandler)
+    window.addEventListener("resize", this.$_resizeHandler);
   },
   beforeDestroy() {
-    window.removeEventListener('resize', this.$_resizeHandler)
+    window.removeEventListener("resize", this.$_resizeHandler);
   },
   mounted() {
-    const isMobile = this.$_isMobile()
+    const isMobile = this.$_isMobile();
     if (isMobile) {
-      store.dispatch('app/toggleDevice', 'mobile')
-      store.dispatch('app/closeSideBar', { withoutAnimation: true })
+      store.dispatch("app/toggleDevice", "mobile");
+      store.dispatch("app/closeSideBar", { withoutAnimation: true });
     }
   },
   methods: {
     // use $_ for mixins properties
     // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
     $_isMobile() {
-      const rect = body.getBoundingClientRect()
-      return rect.width - 1 < WIDTH
+      const rect = body.getBoundingClientRect();
+      return rect.width - 1 < WIDTH;
     },
     $_resizeHandler() {
       if (!document.hidden) {
-        const isMobile = this.$_isMobile()
-        store.dispatch('app/toggleDevice', isMobile ? 'mobile' : 'desktop')
+        const isMobile = this.$_isMobile();
+        store.dispatch("app/toggleDevice", isMobile ? "mobile" : "desktop");
 
         if (isMobile) {
-          store.dispatch('app/closeSideBar', { withoutAnimation: true })
+          store.dispatch("app/closeSideBar", { withoutAnimation: true });
         }
       }
     }
   }
-}
+};
diff --git a/src/main.js b/src/main.js
index ef07f389..18e9bfc4 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,23 +1,23 @@
-import Vue from 'vue'
+import Vue from "vue";
 
-import Cookies from 'js-cookie'
+import Cookies from "js-cookie";
 
-import 'normalize.css/normalize.css' // a modern alternative to CSS resets
+import "normalize.css/normalize.css"; // a modern alternative to CSS resets
 
-import Element from 'element-ui'
-import './styles/element-variables.scss'
+import Element from "element-ui";
+import "./styles/element-variables.scss";
 
-import '@/styles/index.scss' // global css
+import "@/styles/index.scss"; // global css
 
-import App from './App'
-import store from './store'
-import router from './router'
+import App from "./App";
+import store from "./store";
+import router from "./router";
 
-import './icons' // icon
-import './permission' // permission control
-import './utils/error-log' // error log
+import "./icons"; // icon
+import "./permission"; // permission control
+import "./utils/error-log"; // error log
 
-import * as filters from './filters' // global filters
+import * as filters from "./filters"; // global filters
 
 /**
  * If you don't want to use mock-server
@@ -27,25 +27,25 @@ import * as filters from './filters' // global filters
  * Currently MockJs will be used in the production environment,
  * please remove it before going online! ! !
  */
-import { mockXHR } from '../mock'
-if (process.env.NODE_ENV === 'production') {
-  mockXHR()
+import { mockXHR } from "../mock";
+if (process.env.NODE_ENV === "production") {
+  mockXHR();
 }
 
 Vue.use(Element, {
-  size: Cookies.get('size') || 'medium' // set element-ui default size
-})
+  size: Cookies.get("size") || "medium" // set element-ui default size
+});
 
 // register global utility filters
 Object.keys(filters).forEach(key => {
-  Vue.filter(key, filters[key])
-})
+  Vue.filter(key, filters[key]);
+});
 
-Vue.config.productionTip = false
+Vue.config.productionTip = false;
 
 new Vue({
-  el: '#app',
+  el: "#app",
   router,
   store,
   render: h => h(App)
-})
+});
diff --git a/src/permission.js b/src/permission.js
index 750aeab6..825609f6 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -1,56 +1,59 @@
-import router from './router'
-import store from './store'
-import { Message } from 'element-ui'
-import NProgress from 'nprogress' // progress bar
-import 'nprogress/nprogress.css' // progress bar style
-import { getToken } from '@/utils/auth' // get token from cookie
-import getPageTitle from '@/utils/get-page-title'
+import router from "./router";
+import store from "./store";
+import { Message } from "element-ui";
+import NProgress from "nprogress"; // progress bar
+import "nprogress/nprogress.css"; // progress bar style
+import { getToken } from "@/utils/auth"; // get token from cookie
+import getPageTitle from "@/utils/get-page-title";
 
-NProgress.configure({ showSpinner: false }) // NProgress Configuration
+NProgress.configure({ showSpinner: false }); // NProgress Configuration
 
-const whiteList = ['/login', '/auth-redirect'] // no redirect whitelist
+const whiteList = ["/login", "/auth-redirect"]; // no redirect whitelist
 
-router.beforeEach(async(to, from, next) => {
+router.beforeEach(async (to, from, next) => {
   // start progress bar
-  NProgress.start()
+  NProgress.start();
 
   // set page title
-  document.title = getPageTitle(to.meta.title)
+  document.title = getPageTitle(to.meta.title);
 
   // determine whether the user has logged in
-  const hasToken = getToken()
+  const hasToken = getToken();
 
   if (hasToken) {
-    if (to.path === '/login') {
+    if (to.path === "/login") {
       // if is logged in, redirect to the home page
-      next({ path: '/' })
-      NProgress.done()
+      next({ path: "/" });
+      NProgress.done();
     } else {
       // determine whether the user has obtained his permission roles through getInfo
-      const hasRoles = store.getters.roles && store.getters.roles.length > 0
+      const hasRoles = store.getters.roles && store.getters.roles.length > 0;
       if (hasRoles) {
-        next()
+        next();
       } else {
         try {
           // get user info
           // note: roles must be a object array! such as: ['admin'] or ,['developer','editor']
-          const { roles } = await store.dispatch('user/getInfo')
+          const { roles } = await store.dispatch("user/getInfo");
 
           // generate accessible routes map based on roles
-          const accessRoutes = await store.dispatch('permission/generateRoutes', roles)
+          const accessRoutes = await store.dispatch(
+            "permission/generateRoutes",
+            roles
+          );
 
           // dynamically add accessible routes
-          router.addRoutes(accessRoutes)
+          router.addRoutes(accessRoutes);
 
           // hack method to ensure that addRoutes is complete
           // set the replace: true, so the navigation will not leave a history record
-          next({ ...to, replace: true })
+          next({ ...to, replace: true });
         } catch (error) {
           // remove token and go to login page to re-login
-          await store.dispatch('user/resetToken')
-          Message.error(error || 'Has Error')
-          next(`/login?redirect=${to.path}`)
-          NProgress.done()
+          await store.dispatch("user/resetToken");
+          Message.error(error || "Has Error");
+          next(`/login?redirect=${to.path}`);
+          NProgress.done();
         }
       }
     }
@@ -59,16 +62,16 @@ router.beforeEach(async(to, from, next) => {
 
     if (whiteList.indexOf(to.path) !== -1) {
       // in the free login whitelist, go directly
-      next()
+      next();
     } else {
       // other pages that do not have permission to access are redirected to the login page.
-      next(`/login?redirect=${to.path}`)
-      NProgress.done()
+      next(`/login?redirect=${to.path}`);
+      NProgress.done();
     }
   }
-})
+});
 
 router.afterEach(() => {
   // finish progress bar
-  NProgress.done()
-})
+  NProgress.done();
+});
diff --git a/src/router/index.js b/src/router/index.js
index fbe8ad25..a34df098 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,16 +1,16 @@
-import Vue from 'vue'
-import Router from 'vue-router'
+import Vue from "vue";
+import Router from "vue-router";
 
-Vue.use(Router)
+Vue.use(Router);
 
 /* Layout */
-import Layout from '@/layout'
+import Layout from "@/layout";
 
 /* Router Modules */
-import componentsRouter from './modules/components'
-import chartsRouter from './modules/charts'
-import tableRouter from './modules/table'
-import nestedRouter from './modules/nested'
+import componentsRouter from "./modules/components";
+import chartsRouter from "./modules/charts";
+import tableRouter from "./modules/table";
+import nestedRouter from "./modules/nested";
 
 /**
  * Note: sub-menu only appear when route children.length >= 1
@@ -40,89 +40,89 @@ import nestedRouter from './modules/nested'
  */
 export const constantRoutes = [
   {
-    path: '/redirect',
+    path: "/redirect",
     component: Layout,
     hidden: true,
     children: [
       {
-        path: '/redirect/:path*',
-        component: () => import('@/views/redirect/index')
+        path: "/redirect/:path*",
+        component: () => import("@/views/redirect/index")
       }
     ]
   },
   {
-    path: '/login',
-    component: () => import('@/views/login/index'),
+    path: "/login",
+    component: () => import("@/views/login/index"),
     hidden: true
   },
   {
-    path: '/auth-redirect',
-    component: () => import('@/views/login/auth-redirect'),
+    path: "/auth-redirect",
+    component: () => import("@/views/login/auth-redirect"),
     hidden: true
   },
   {
-    path: '/404',
-    component: () => import('@/views/error-page/404'),
+    path: "/404",
+    component: () => import("@/views/error-page/404"),
     hidden: true
   },
   {
-    path: '/401',
-    component: () => import('@/views/error-page/401'),
+    path: "/401",
+    component: () => import("@/views/error-page/401"),
     hidden: true
   },
   {
-    path: '/',
+    path: "/",
     component: Layout,
-    redirect: '/dashboard',
+    redirect: "/dashboard",
     children: [
       {
-        path: 'dashboard',
-        component: () => import('@/views/dashboard/index'),
-        name: 'Dashboard',
-        meta: { title: 'Dashboard', icon: 'dashboard', affix: true }
+        path: "dashboard",
+        component: () => import("@/views/dashboard/index"),
+        name: "Dashboard",
+        meta: { title: "Dashboard", icon: "dashboard", affix: true }
       }
     ]
   },
   {
-    path: '/documentation',
+    path: "/documentation",
     component: Layout,
     children: [
       {
-        path: 'index',
-        component: () => import('@/views/documentation/index'),
-        name: 'Documentation',
-        meta: { title: 'Documentation', icon: 'documentation', affix: true }
+        path: "index",
+        component: () => import("@/views/documentation/index"),
+        name: "Documentation",
+        meta: { title: "Documentation", icon: "documentation", affix: true }
       }
     ]
   },
   {
-    path: '/guide',
+    path: "/guide",
     component: Layout,
-    redirect: '/guide/index',
+    redirect: "/guide/index",
     children: [
       {
-        path: 'index',
-        component: () => import('@/views/guide/index'),
-        name: 'Guide',
-        meta: { title: 'Guide', icon: 'guide', noCache: true }
+        path: "index",
+        component: () => import("@/views/guide/index"),
+        name: "Guide",
+        meta: { title: "Guide", icon: "guide", noCache: true }
       }
     ]
   },
   {
-    path: '/profile',
+    path: "/profile",
     component: Layout,
-    redirect: '/profile/index',
+    redirect: "/profile/index",
     hidden: true,
     children: [
       {
-        path: 'index',
-        component: () => import('@/views/profile/index'),
-        name: 'Profile',
-        meta: { title: 'Profile', icon: 'user', noCache: true }
+        path: "index",
+        component: () => import("@/views/profile/index"),
+        name: "Profile",
+        meta: { title: "Profile", icon: "user", noCache: true }
       }
     ]
   }
-]
+];
 
 /**
  * asyncRoutes
@@ -130,56 +130,56 @@ export const constantRoutes = [
  */
 export const asyncRoutes = [
   {
-    path: '/permission',
+    path: "/permission",
     component: Layout,
-    redirect: '/permission/page',
+    redirect: "/permission/page",
     alwaysShow: true, // will always show the root menu
-    name: 'Permission',
+    name: "Permission",
     meta: {
-      title: 'Permission',
-      icon: 'lock',
-      roles: ['admin', 'editor'] // you can set roles in root nav
+      title: "Permission",
+      icon: "lock",
+      roles: ["admin", "editor"] // you can set roles in root nav
     },
     children: [
       {
-        path: 'page',
-        component: () => import('@/views/permission/page'),
-        name: 'PagePermission',
+        path: "page",
+        component: () => import("@/views/permission/page"),
+        name: "PagePermission",
         meta: {
-          title: 'Page Permission',
-          roles: ['admin'] // or you can only set roles in sub nav
+          title: "Page Permission",
+          roles: ["admin"] // or you can only set roles in sub nav
         }
       },
       {
-        path: 'directive',
-        component: () => import('@/views/permission/directive'),
-        name: 'DirectivePermission',
+        path: "directive",
+        component: () => import("@/views/permission/directive"),
+        name: "DirectivePermission",
         meta: {
-          title: 'Directive Permission'
+          title: "Directive Permission"
           // if do not set roles, means: this page does not require permission
         }
       },
       {
-        path: 'role',
-        component: () => import('@/views/permission/role'),
-        name: 'RolePermission',
+        path: "role",
+        component: () => import("@/views/permission/role"),
+        name: "RolePermission",
         meta: {
-          title: 'Role Permission',
-          roles: ['admin']
+          title: "Role Permission",
+          roles: ["admin"]
         }
       }
     ]
   },
 
   {
-    path: '/icon',
+    path: "/icon",
     component: Layout,
     children: [
       {
-        path: 'index',
-        component: () => import('@/views/icons/index'),
-        name: 'Icons',
-        meta: { title: 'Icons', icon: 'icon', noCache: true }
+        path: "index",
+        component: () => import("@/views/icons/index"),
+        name: "Icons",
+        meta: { title: "Icons", icon: "icon", noCache: true }
       }
     ]
   },
@@ -191,214 +191,219 @@ export const asyncRoutes = [
   tableRouter,
 
   {
-    path: '/example',
+    path: "/example",
     component: Layout,
-    redirect: '/example/list',
-    name: 'Example',
+    redirect: "/example/list",
+    name: "Example",
     meta: {
-      title: 'Example',
-      icon: 'example'
+      title: "Example",
+      icon: "example"
     },
     children: [
       {
-        path: 'create',
-        component: () => import('@/views/example/create'),
-        name: 'CreateArticle',
-        meta: { title: 'Create Article', icon: 'edit' }
+        path: "create",
+        component: () => import("@/views/example/create"),
+        name: "CreateArticle",
+        meta: { title: "Create Article", icon: "edit" }
       },
       {
-        path: 'edit/:id(\\d+)',
-        component: () => import('@/views/example/edit'),
-        name: 'EditArticle',
-        meta: { title: 'Edit Article', noCache: true, activeMenu: '/example/list' },
+        path: "edit/:id(\\d+)",
+        component: () => import("@/views/example/edit"),
+        name: "EditArticle",
+        meta: {
+          title: "Edit Article",
+          noCache: true,
+          activeMenu: "/example/list"
+        },
         hidden: true
       },
       {
-        path: 'list',
-        component: () => import('@/views/example/list'),
-        name: 'ArticleList',
-        meta: { title: 'Article List', icon: 'list' }
+        path: "list",
+        component: () => import("@/views/example/list"),
+        name: "ArticleList",
+        meta: { title: "Article List", icon: "list" }
       }
     ]
   },
 
   {
-    path: '/tab',
+    path: "/tab",
     component: Layout,
     children: [
       {
-        path: 'index',
-        component: () => import('@/views/tab/index'),
-        name: 'Tab',
-        meta: { title: 'Tab', icon: 'tab' }
+        path: "index",
+        component: () => import("@/views/tab/index"),
+        name: "Tab",
+        meta: { title: "Tab", icon: "tab" }
       }
     ]
   },
 
   {
-    path: '/error',
+    path: "/error",
     component: Layout,
-    redirect: 'noRedirect',
-    name: 'ErrorPages',
+    redirect: "noRedirect",
+    name: "ErrorPages",
     meta: {
-      title: 'Error Pages',
-      icon: '404'
+      title: "Error Pages",
+      icon: "404"
     },
     children: [
       {
-        path: '401',
-        component: () => import('@/views/error-page/401'),
-        name: 'Page401',
-        meta: { title: '401', noCache: true }
+        path: "401",
+        component: () => import("@/views/error-page/401"),
+        name: "Page401",
+        meta: { title: "401", noCache: true }
       },
       {
-        path: '404',
-        component: () => import('@/views/error-page/404'),
-        name: 'Page404',
-        meta: { title: '404', noCache: true }
+        path: "404",
+        component: () => import("@/views/error-page/404"),
+        name: "Page404",
+        meta: { title: "404", noCache: true }
       }
     ]
   },
 
   {
-    path: '/error-log',
+    path: "/error-log",
     component: Layout,
     children: [
       {
-        path: 'log',
-        component: () => import('@/views/error-log/index'),
-        name: 'ErrorLog',
-        meta: { title: 'Error Log', icon: 'bug' }
+        path: "log",
+        component: () => import("@/views/error-log/index"),
+        name: "ErrorLog",
+        meta: { title: "Error Log", icon: "bug" }
       }
     ]
   },
 
   {
-    path: '/excel',
+    path: "/excel",
     component: Layout,
-    redirect: '/excel/export-excel',
-    name: 'Excel',
+    redirect: "/excel/export-excel",
+    name: "Excel",
     meta: {
-      title: 'Excel',
-      icon: 'excel'
+      title: "Excel",
+      icon: "excel"
     },
     children: [
       {
-        path: 'export-excel',
-        component: () => import('@/views/excel/export-excel'),
-        name: 'ExportExcel',
-        meta: { title: 'Export Excel' }
+        path: "export-excel",
+        component: () => import("@/views/excel/export-excel"),
+        name: "ExportExcel",
+        meta: { title: "Export Excel" }
       },
       {
-        path: 'export-selected-excel',
-        component: () => import('@/views/excel/select-excel'),
-        name: 'SelectExcel',
-        meta: { title: 'Export Selected' }
+        path: "export-selected-excel",
+        component: () => import("@/views/excel/select-excel"),
+        name: "SelectExcel",
+        meta: { title: "Export Selected" }
       },
       {
-        path: 'export-merge-header',
-        component: () => import('@/views/excel/merge-header'),
-        name: 'MergeHeader',
-        meta: { title: 'Merge Header' }
+        path: "export-merge-header",
+        component: () => import("@/views/excel/merge-header"),
+        name: "MergeHeader",
+        meta: { title: "Merge Header" }
       },
       {
-        path: 'upload-excel',
-        component: () => import('@/views/excel/upload-excel'),
-        name: 'UploadExcel',
-        meta: { title: 'Upload Excel' }
+        path: "upload-excel",
+        component: () => import("@/views/excel/upload-excel"),
+        name: "UploadExcel",
+        meta: { title: "Upload Excel" }
       }
     ]
   },
 
   {
-    path: '/zip',
+    path: "/zip",
     component: Layout,
-    redirect: '/zip/download',
+    redirect: "/zip/download",
     alwaysShow: true,
-    name: 'Zip',
-    meta: { title: 'Zip', icon: 'zip' },
+    name: "Zip",
+    meta: { title: "Zip", icon: "zip" },
     children: [
       {
-        path: 'download',
-        component: () => import('@/views/zip/index'),
-        name: 'ExportZip',
-        meta: { title: 'Export Zip' }
+        path: "download",
+        component: () => import("@/views/zip/index"),
+        name: "ExportZip",
+        meta: { title: "Export Zip" }
       }
     ]
   },
 
   {
-    path: '/pdf',
+    path: "/pdf",
     component: Layout,
-    redirect: '/pdf/index',
+    redirect: "/pdf/index",
     children: [
       {
-        path: 'index',
-        component: () => import('@/views/pdf/index'),
-        name: 'PDF',
-        meta: { title: 'PDF', icon: 'pdf' }
+        path: "index",
+        component: () => import("@/views/pdf/index"),
+        name: "PDF",
+        meta: { title: "PDF", icon: "pdf" }
       }
     ]
   },
   {
-    path: '/pdf/download',
-    component: () => import('@/views/pdf/download'),
+    path: "/pdf/download",
+    component: () => import("@/views/pdf/download"),
     hidden: true
   },
 
   {
-    path: '/theme',
+    path: "/theme",
     component: Layout,
     children: [
       {
-        path: 'index',
-        component: () => import('@/views/theme/index'),
-        name: 'Theme',
-        meta: { title: 'Theme', icon: 'theme' }
+        path: "index",
+        component: () => import("@/views/theme/index"),
+        name: "Theme",
+        meta: { title: "Theme", icon: "theme" }
       }
     ]
   },
 
   {
-    path: '/clipboard',
+    path: "/clipboard",
     component: Layout,
     children: [
       {
-        path: 'index',
-        component: () => import('@/views/clipboard/index'),
-        name: 'ClipboardDemo',
-        meta: { title: 'Clipboard', icon: 'clipboard' }
+        path: "index",
+        component: () => import("@/views/clipboard/index"),
+        name: "ClipboardDemo",
+        meta: { title: "Clipboard", icon: "clipboard" }
       }
     ]
   },
 
   {
-    path: 'external-link',
+    path: "external-link",
     component: Layout,
     children: [
       {
-        path: 'https://github.com/PanJiaChen/vue-element-admin',
-        meta: { title: 'External Link', icon: 'link' }
+        path: "https://github.com/PanJiaChen/vue-element-admin",
+        meta: { title: "External Link", icon: "link" }
       }
     ]
   },
 
   // 404 page must be placed at the end !!!
-  { path: '*', redirect: '/404', hidden: true }
-]
+  { path: "*", redirect: "/404", hidden: true }
+];
 
-const createRouter = () => new Router({
-  // mode: 'history', // require service support
-  scrollBehavior: () => ({ y: 0 }),
-  routes: constantRoutes
-})
+const createRouter = () =>
+  new Router({
+    // mode: 'history', // require service support
+    scrollBehavior: () => ({ y: 0 }),
+    routes: constantRoutes
+  });
 
-const router = createRouter()
+const router = createRouter();
 
 // Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
 export function resetRouter() {
-  const newRouter = createRouter()
-  router.matcher = newRouter.matcher // reset router
+  const newRouter = createRouter();
+  router.matcher = newRouter.matcher; // reset router
 }
 
-export default router
+export default router;
diff --git a/src/router/modules/charts.js b/src/router/modules/charts.js
index 29684dec..1f9cb71e 100644
--- a/src/router/modules/charts.js
+++ b/src/router/modules/charts.js
@@ -1,36 +1,36 @@
 /** When your routing table is too long, you can split it into small modules**/
 
-import Layout from '@/layout'
+import Layout from "@/layout";
 
 const chartsRouter = {
-  path: '/charts',
+  path: "/charts",
   component: Layout,
-  redirect: 'noRedirect',
-  name: 'Charts',
+  redirect: "noRedirect",
+  name: "Charts",
   meta: {
-    title: 'Charts',
-    icon: 'chart'
+    title: "Charts",
+    icon: "chart"
   },
   children: [
     {
-      path: 'keyboard',
-      component: () => import('@/views/charts/keyboard'),
-      name: 'KeyboardChart',
-      meta: { title: 'Keyboard Chart', noCache: true }
+      path: "keyboard",
+      component: () => import("@/views/charts/keyboard"),
+      name: "KeyboardChart",
+      meta: { title: "Keyboard Chart", noCache: true }
     },
     {
-      path: 'line',
-      component: () => import('@/views/charts/line'),
-      name: 'LineChart',
-      meta: { title: 'Line Chart', noCache: true }
+      path: "line",
+      component: () => import("@/views/charts/line"),
+      name: "LineChart",
+      meta: { title: "Line Chart", noCache: true }
     },
     {
-      path: 'mix-chart',
-      component: () => import('@/views/charts/mix-chart'),
-      name: 'MixChart',
-      meta: { title: 'Mix Chart', noCache: true }
+      path: "mix-chart",
+      component: () => import("@/views/charts/mix-chart"),
+      name: "MixChart",
+      meta: { title: "Mix Chart", noCache: true }
     }
   ]
-}
+};
 
-export default chartsRouter
+export default chartsRouter;
diff --git a/src/router/modules/components.js b/src/router/modules/components.js
index 0da96f97..703574ff 100644
--- a/src/router/modules/components.js
+++ b/src/router/modules/components.js
@@ -1,102 +1,102 @@
 /** When your routing table is too long, you can split it into small modules **/
 
-import Layout from '@/layout'
+import Layout from "@/layout";
 
 const componentsRouter = {
-  path: '/components',
+  path: "/components",
   component: Layout,
-  redirect: 'noRedirect',
-  name: 'ComponentDemo',
+  redirect: "noRedirect",
+  name: "ComponentDemo",
   meta: {
-    title: 'Components',
-    icon: 'component'
+    title: "Components",
+    icon: "component"
   },
   children: [
     {
-      path: 'tinymce',
-      component: () => import('@/views/components-demo/tinymce'),
-      name: 'TinymceDemo',
-      meta: { title: 'Tinymce' }
+      path: "tinymce",
+      component: () => import("@/views/components-demo/tinymce"),
+      name: "TinymceDemo",
+      meta: { title: "Tinymce" }
     },
     {
-      path: 'markdown',
-      component: () => import('@/views/components-demo/markdown'),
-      name: 'MarkdownDemo',
-      meta: { title: 'Markdown' }
+      path: "markdown",
+      component: () => import("@/views/components-demo/markdown"),
+      name: "MarkdownDemo",
+      meta: { title: "Markdown" }
     },
     {
-      path: 'json-editor',
-      component: () => import('@/views/components-demo/json-editor'),
-      name: 'JsonEditorDemo',
-      meta: { title: 'JSON Editor' }
+      path: "json-editor",
+      component: () => import("@/views/components-demo/json-editor"),
+      name: "JsonEditorDemo",
+      meta: { title: "JSON Editor" }
     },
     {
-      path: 'split-pane',
-      component: () => import('@/views/components-demo/split-pane'),
-      name: 'SplitpaneDemo',
-      meta: { title: 'SplitPane' }
+      path: "split-pane",
+      component: () => import("@/views/components-demo/split-pane"),
+      name: "SplitpaneDemo",
+      meta: { title: "SplitPane" }
     },
     {
-      path: 'avatar-upload',
-      component: () => import('@/views/components-demo/avatar-upload'),
-      name: 'AvatarUploadDemo',
-      meta: { title: 'Upload' }
+      path: "avatar-upload",
+      component: () => import("@/views/components-demo/avatar-upload"),
+      name: "AvatarUploadDemo",
+      meta: { title: "Upload" }
     },
     {
-      path: 'dropzone',
-      component: () => import('@/views/components-demo/dropzone'),
-      name: 'DropzoneDemo',
-      meta: { title: 'Dropzone' }
+      path: "dropzone",
+      component: () => import("@/views/components-demo/dropzone"),
+      name: "DropzoneDemo",
+      meta: { title: "Dropzone" }
     },
     {
-      path: 'sticky',
-      component: () => import('@/views/components-demo/sticky'),
-      name: 'StickyDemo',
-      meta: { title: 'Sticky' }
+      path: "sticky",
+      component: () => import("@/views/components-demo/sticky"),
+      name: "StickyDemo",
+      meta: { title: "Sticky" }
     },
     {
-      path: 'count-to',
-      component: () => import('@/views/components-demo/count-to'),
-      name: 'CountToDemo',
-      meta: { title: 'Count To' }
+      path: "count-to",
+      component: () => import("@/views/components-demo/count-to"),
+      name: "CountToDemo",
+      meta: { title: "Count To" }
     },
     {
-      path: 'mixin',
-      component: () => import('@/views/components-demo/mixin'),
-      name: 'ComponentMixinDemo',
-      meta: { title: 'Component Mixin' }
+      path: "mixin",
+      component: () => import("@/views/components-demo/mixin"),
+      name: "ComponentMixinDemo",
+      meta: { title: "Component Mixin" }
     },
     {
-      path: 'back-to-top',
-      component: () => import('@/views/components-demo/back-to-top'),
-      name: 'BackToTopDemo',
-      meta: { title: 'Back To Top' }
+      path: "back-to-top",
+      component: () => import("@/views/components-demo/back-to-top"),
+      name: "BackToTopDemo",
+      meta: { title: "Back To Top" }
     },
     {
-      path: 'drag-dialog',
-      component: () => import('@/views/components-demo/drag-dialog'),
-      name: 'DragDialogDemo',
-      meta: { title: 'Drag Dialog' }
+      path: "drag-dialog",
+      component: () => import("@/views/components-demo/drag-dialog"),
+      name: "DragDialogDemo",
+      meta: { title: "Drag Dialog" }
     },
     {
-      path: 'drag-select',
-      component: () => import('@/views/components-demo/drag-select'),
-      name: 'DragSelectDemo',
-      meta: { title: 'Drag Select' }
+      path: "drag-select",
+      component: () => import("@/views/components-demo/drag-select"),
+      name: "DragSelectDemo",
+      meta: { title: "Drag Select" }
     },
     {
-      path: 'dnd-list',
-      component: () => import('@/views/components-demo/dnd-list'),
-      name: 'DndListDemo',
-      meta: { title: 'Dnd List' }
+      path: "dnd-list",
+      component: () => import("@/views/components-demo/dnd-list"),
+      name: "DndListDemo",
+      meta: { title: "Dnd List" }
     },
     {
-      path: 'drag-kanban',
-      component: () => import('@/views/components-demo/drag-kanban'),
-      name: 'DragKanbanDemo',
-      meta: { title: 'Drag Kanban' }
+      path: "drag-kanban",
+      component: () => import("@/views/components-demo/drag-kanban"),
+      name: "DragKanbanDemo",
+      meta: { title: "Drag Kanban" }
     }
   ]
-}
+};
 
-export default componentsRouter
+export default componentsRouter;
diff --git a/src/router/modules/nested.js b/src/router/modules/nested.js
index 48033ed1..12c33e86 100644
--- a/src/router/modules/nested.js
+++ b/src/router/modules/nested.js
@@ -1,66 +1,66 @@
 /** When your routing table is too long, you can split it into small modules **/
 
-import Layout from '@/layout'
+import Layout from "@/layout";
 
 const nestedRouter = {
-  path: '/nested',
+  path: "/nested",
   component: Layout,
-  redirect: '/nested/menu1/menu1-1',
-  name: 'Nested',
+  redirect: "/nested/menu1/menu1-1",
+  name: "Nested",
   meta: {
-    title: 'Nested Routes',
-    icon: 'nested'
+    title: "Nested Routes",
+    icon: "nested"
   },
   children: [
     {
-      path: 'menu1',
-      component: () => import('@/views/nested/menu1/index'), // Parent router-view
-      name: 'Menu1',
-      meta: { title: 'Menu 1' },
-      redirect: '/nested/menu1/menu1-1',
+      path: "menu1",
+      component: () => import("@/views/nested/menu1/index"), // Parent router-view
+      name: "Menu1",
+      meta: { title: "Menu 1" },
+      redirect: "/nested/menu1/menu1-1",
       children: [
         {
-          path: 'menu1-1',
-          component: () => import('@/views/nested/menu1/menu1-1'),
-          name: 'Menu1-1',
-          meta: { title: 'Menu 1-1' }
+          path: "menu1-1",
+          component: () => import("@/views/nested/menu1/menu1-1"),
+          name: "Menu1-1",
+          meta: { title: "Menu 1-1" }
         },
         {
-          path: 'menu1-2',
-          component: () => import('@/views/nested/menu1/menu1-2'),
-          name: 'Menu1-2',
-          redirect: '/nested/menu1/menu1-2/menu1-2-1',
-          meta: { title: 'Menu 1-2' },
+          path: "menu1-2",
+          component: () => import("@/views/nested/menu1/menu1-2"),
+          name: "Menu1-2",
+          redirect: "/nested/menu1/menu1-2/menu1-2-1",
+          meta: { title: "Menu 1-2" },
           children: [
             {
-              path: 'menu1-2-1',
-              component: () => import('@/views/nested/menu1/menu1-2/menu1-2-1'),
-              name: 'Menu1-2-1',
-              meta: { title: 'Menu 1-2-1' }
+              path: "menu1-2-1",
+              component: () => import("@/views/nested/menu1/menu1-2/menu1-2-1"),
+              name: "Menu1-2-1",
+              meta: { title: "Menu 1-2-1" }
             },
             {
-              path: 'menu1-2-2',
-              component: () => import('@/views/nested/menu1/menu1-2/menu1-2-2'),
-              name: 'Menu1-2-2',
-              meta: { title: 'Menu 1-2-2' }
+              path: "menu1-2-2",
+              component: () => import("@/views/nested/menu1/menu1-2/menu1-2-2"),
+              name: "Menu1-2-2",
+              meta: { title: "Menu 1-2-2" }
             }
           ]
         },
         {
-          path: 'menu1-3',
-          component: () => import('@/views/nested/menu1/menu1-3'),
-          name: 'Menu1-3',
-          meta: { title: 'Menu 1-3' }
+          path: "menu1-3",
+          component: () => import("@/views/nested/menu1/menu1-3"),
+          name: "Menu1-3",
+          meta: { title: "Menu 1-3" }
         }
       ]
     },
     {
-      path: 'menu2',
-      name: 'Menu2',
-      component: () => import('@/views/nested/menu2/index'),
-      meta: { title: 'Menu 2' }
+      path: "menu2",
+      name: "Menu2",
+      component: () => import("@/views/nested/menu2/index"),
+      meta: { title: "Menu 2" }
     }
   ]
-}
+};
 
-export default nestedRouter
+export default nestedRouter;
diff --git a/src/router/modules/table.js b/src/router/modules/table.js
index ec28c527..fc479449 100644
--- a/src/router/modules/table.js
+++ b/src/router/modules/table.js
@@ -1,41 +1,41 @@
 /** When your routing table is too long, you can split it into small modules **/
 
-import Layout from '@/layout'
+import Layout from "@/layout";
 
 const tableRouter = {
-  path: '/table',
+  path: "/table",
   component: Layout,
-  redirect: '/table/complex-table',
-  name: 'Table',
+  redirect: "/table/complex-table",
+  name: "Table",
   meta: {
-    title: 'Table',
-    icon: 'table'
+    title: "Table",
+    icon: "table"
   },
   children: [
     {
-      path: 'dynamic-table',
-      component: () => import('@/views/table/dynamic-table/index'),
-      name: 'DynamicTable',
-      meta: { title: 'Dynamic Table' }
+      path: "dynamic-table",
+      component: () => import("@/views/table/dynamic-table/index"),
+      name: "DynamicTable",
+      meta: { title: "Dynamic Table" }
     },
     {
-      path: 'drag-table',
-      component: () => import('@/views/table/drag-table'),
-      name: 'DragTable',
-      meta: { title: 'Drag Table' }
+      path: "drag-table",
+      component: () => import("@/views/table/drag-table"),
+      name: "DragTable",
+      meta: { title: "Drag Table" }
     },
     {
-      path: 'inline-edit-table',
-      component: () => import('@/views/table/inline-edit-table'),
-      name: 'InlineEditTable',
-      meta: { title: 'Inline Edit' }
+      path: "inline-edit-table",
+      component: () => import("@/views/table/inline-edit-table"),
+      name: "InlineEditTable",
+      meta: { title: "Inline Edit" }
     },
     {
-      path: 'complex-table',
-      component: () => import('@/views/table/complex-table'),
-      name: 'ComplexTable',
-      meta: { title: 'Complex Table' }
+      path: "complex-table",
+      component: () => import("@/views/table/complex-table"),
+      name: "ComplexTable",
+      meta: { title: "Complex Table" }
     }
   ]
-}
-export default tableRouter
+};
+export default tableRouter;
diff --git a/src/settings.js b/src/settings.js
index 1ebc7f29..2fc2b1b6 100644
--- a/src/settings.js
+++ b/src/settings.js
@@ -1,5 +1,5 @@
 module.exports = {
-  title: 'Vue Element Admin',
+  title: "Vue Element Admin",
 
   /**
    * @type {boolean} true | false
@@ -31,5 +31,5 @@ module.exports = {
    * The default is only used in the production env
    * If you want to also use it in dev, you can pass ['production', 'development']
    */
-  errorLog: 'production'
-}
+  errorLog: "production"
+};
diff --git a/src/store/getters.js b/src/store/getters.js
index 8fcf5a59..2a2476b8 100644
--- a/src/store/getters.js
+++ b/src/store/getters.js
@@ -11,5 +11,5 @@ const getters = {
   roles: state => state.user.roles,
   permission_routes: state => state.permission.routes,
   errorLogs: state => state.errorLog.logs
-}
-export default getters
+};
+export default getters;
diff --git a/src/store/index.js b/src/store/index.js
index 0fd83955..cb6eb462 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,25 +1,25 @@
-import Vue from 'vue'
-import Vuex from 'vuex'
-import getters from './getters'
+import Vue from "vue";
+import Vuex from "vuex";
+import getters from "./getters";
 
-Vue.use(Vuex)
+Vue.use(Vuex);
 
 // https://webpack.js.org/guides/dependency-management/#requirecontext
-const modulesFiles = require.context('./modules', true, /\.js$/)
+const modulesFiles = require.context("./modules", true, /\.js$/);
 
 // you do not need `import app from './modules/app'`
 // it will auto require all vuex module from modules file
 const modules = modulesFiles.keys().reduce((modules, modulePath) => {
   // set './app.js' => 'app'
-  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
-  const value = modulesFiles(modulePath)
-  modules[moduleName] = value.default
-  return modules
-}, {})
+  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, "$1");
+  const value = modulesFiles(modulePath);
+  modules[moduleName] = value.default;
+  return modules;
+}, {});
 
 const store = new Vuex.Store({
   modules,
   getters
-})
+});
 
-export default store
+export default store;
diff --git a/src/store/modules/app.js b/src/store/modules/app.js
index 45d89bb9..692dcada 100644
--- a/src/store/modules/app.js
+++ b/src/store/modules/app.js
@@ -1,56 +1,58 @@
-import Cookies from 'js-cookie'
+import Cookies from "js-cookie";
 
 const state = {
   sidebar: {
-    opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true,
+    opened: Cookies.get("sidebarStatus")
+      ? !!+Cookies.get("sidebarStatus")
+      : true,
     withoutAnimation: false
   },
-  device: 'desktop',
-  size: Cookies.get('size') || 'medium'
-}
+  device: "desktop",
+  size: Cookies.get("size") || "medium"
+};
 
 const mutations = {
   TOGGLE_SIDEBAR: state => {
-    state.sidebar.opened = !state.sidebar.opened
-    state.sidebar.withoutAnimation = false
+    state.sidebar.opened = !state.sidebar.opened;
+    state.sidebar.withoutAnimation = false;
     if (state.sidebar.opened) {
-      Cookies.set('sidebarStatus', 1)
+      Cookies.set("sidebarStatus", 1);
     } else {
-      Cookies.set('sidebarStatus', 0)
+      Cookies.set("sidebarStatus", 0);
     }
   },
   CLOSE_SIDEBAR: (state, withoutAnimation) => {
-    Cookies.set('sidebarStatus', 0)
-    state.sidebar.opened = false
-    state.sidebar.withoutAnimation = withoutAnimation
+    Cookies.set("sidebarStatus", 0);
+    state.sidebar.opened = false;
+    state.sidebar.withoutAnimation = withoutAnimation;
   },
   TOGGLE_DEVICE: (state, device) => {
-    state.device = device
+    state.device = device;
   },
   SET_SIZE: (state, size) => {
-    state.size = size
-    Cookies.set('size', size)
+    state.size = size;
+    Cookies.set("size", size);
   }
-}
+};
 
 const actions = {
   toggleSideBar({ commit }) {
-    commit('TOGGLE_SIDEBAR')
+    commit("TOGGLE_SIDEBAR");
   },
   closeSideBar({ commit }, { withoutAnimation }) {
-    commit('CLOSE_SIDEBAR', withoutAnimation)
+    commit("CLOSE_SIDEBAR", withoutAnimation);
   },
   toggleDevice({ commit }, device) {
-    commit('TOGGLE_DEVICE', device)
+    commit("TOGGLE_DEVICE", device);
   },
   setSize({ commit }, size) {
-    commit('SET_SIZE', size)
+    commit("SET_SIZE", size);
   }
-}
+};
 
 export default {
   namespaced: true,
   state,
   mutations,
   actions
-}
+};
diff --git a/src/store/modules/errorLog.js b/src/store/modules/errorLog.js
index 6b01f957..72bdb4af 100644
--- a/src/store/modules/errorLog.js
+++ b/src/store/modules/errorLog.js
@@ -1,28 +1,28 @@
 const state = {
   logs: []
-}
+};
 
 const mutations = {
   ADD_ERROR_LOG: (state, log) => {
-    state.logs.push(log)
+    state.logs.push(log);
   },
-  CLEAR_ERROR_LOG: (state) => {
-    state.logs.splice(0)
+  CLEAR_ERROR_LOG: state => {
+    state.logs.splice(0);
   }
-}
+};
 
 const actions = {
   addErrorLog({ commit }, log) {
-    commit('ADD_ERROR_LOG', log)
+    commit("ADD_ERROR_LOG", log);
   },
   clearErrorLog({ commit }) {
-    commit('CLEAR_ERROR_LOG')
+    commit("CLEAR_ERROR_LOG");
   }
-}
+};
 
 export default {
   namespaced: true,
   state,
   mutations,
   actions
-}
+};
diff --git a/src/store/modules/permission.js b/src/store/modules/permission.js
index aeb5ee53..984ab7e2 100644
--- a/src/store/modules/permission.js
+++ b/src/store/modules/permission.js
@@ -1,4 +1,4 @@
-import { asyncRoutes, constantRoutes } from '@/router'
+import { asyncRoutes, constantRoutes } from "@/router";
 
 /**
  * Use meta.role to determine if the current user has permission
@@ -7,9 +7,9 @@ import { asyncRoutes, constantRoutes } from '@/router'
  */
 function hasPermission(roles, route) {
   if (route.meta && route.meta.roles) {
-    return roles.some(role => route.meta.roles.includes(role))
+    return roles.some(role => route.meta.roles.includes(role));
   } else {
-    return true
+    return true;
   }
 }
 
@@ -19,51 +19,51 @@ function hasPermission(roles, route) {
  * @param roles
  */
 export function filterAsyncRoutes(routes, roles) {
-  const res = []
+  const res = [];
 
   routes.forEach(route => {
-    const tmp = { ...route }
+    const tmp = { ...route };
     if (hasPermission(roles, tmp)) {
       if (tmp.children) {
-        tmp.children = filterAsyncRoutes(tmp.children, roles)
+        tmp.children = filterAsyncRoutes(tmp.children, roles);
       }
-      res.push(tmp)
+      res.push(tmp);
     }
-  })
+  });
 
-  return res
+  return res;
 }
 
 const state = {
   routes: [],
   addRoutes: []
-}
+};
 
 const mutations = {
   SET_ROUTES: (state, routes) => {
-    state.addRoutes = routes
-    state.routes = constantRoutes.concat(routes)
+    state.addRoutes = routes;
+    state.routes = constantRoutes.concat(routes);
   }
-}
+};
 
 const actions = {
   generateRoutes({ commit }, roles) {
     return new Promise(resolve => {
-      let accessedRoutes
-      if (roles.includes('admin')) {
-        accessedRoutes = asyncRoutes || []
+      let accessedRoutes;
+      if (roles.includes("admin")) {
+        accessedRoutes = asyncRoutes || [];
       } else {
-        accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
+        accessedRoutes = filterAsyncRoutes(asyncRoutes, roles);
       }
-      commit('SET_ROUTES', accessedRoutes)
-      resolve(accessedRoutes)
-    })
+      commit("SET_ROUTES", accessedRoutes);
+      resolve(accessedRoutes);
+    });
   }
-}
+};
 
 export default {
   namespaced: true,
   state,
   mutations,
   actions
-}
+};
diff --git a/src/store/modules/tagsView.js b/src/store/modules/tagsView.js
index 3e2c1703..b98b6144 100644
--- a/src/store/modules/tagsView.js
+++ b/src/store/modules/tagsView.js
@@ -1,165 +1,165 @@
 const state = {
   visitedViews: [],
   cachedViews: []
-}
+};
 
 const mutations = {
   ADD_VISITED_VIEW: (state, view) => {
-    if (state.visitedViews.some(v => v.path === view.path)) return
+    if (state.visitedViews.some(v => v.path === view.path)) return;
     state.visitedViews.push(
       Object.assign({}, view, {
-        title: view.meta.title || 'no-name'
+        title: view.meta.title || "no-name"
       })
-    )
+    );
   },
   ADD_CACHED_VIEW: (state, view) => {
-    if (state.cachedViews.includes(view.name)) return
+    if (state.cachedViews.includes(view.name)) return;
     if (!view.meta.noCache) {
-      state.cachedViews.push(view.name)
+      state.cachedViews.push(view.name);
     }
   },
 
   DEL_VISITED_VIEW: (state, view) => {
     for (const [i, v] of state.visitedViews.entries()) {
       if (v.path === view.path) {
-        state.visitedViews.splice(i, 1)
-        break
+        state.visitedViews.splice(i, 1);
+        break;
       }
     }
   },
   DEL_CACHED_VIEW: (state, view) => {
     for (const i of state.cachedViews) {
       if (i === view.name) {
-        const index = state.cachedViews.indexOf(i)
-        state.cachedViews.splice(index, 1)
-        break
+        const index = state.cachedViews.indexOf(i);
+        state.cachedViews.splice(index, 1);
+        break;
       }
     }
   },
 
   DEL_OTHERS_VISITED_VIEWS: (state, view) => {
     state.visitedViews = state.visitedViews.filter(v => {
-      return v.meta.affix || v.path === view.path
-    })
+      return v.meta.affix || v.path === view.path;
+    });
   },
   DEL_OTHERS_CACHED_VIEWS: (state, view) => {
     for (const i of state.cachedViews) {
       if (i === view.name) {
-        const index = state.cachedViews.indexOf(i)
-        state.cachedViews = state.cachedViews.slice(index, index + 1)
-        break
+        const index = state.cachedViews.indexOf(i);
+        state.cachedViews = state.cachedViews.slice(index, index + 1);
+        break;
       }
     }
   },
 
   DEL_ALL_VISITED_VIEWS: state => {
     // keep affix tags
-    const affixTags = state.visitedViews.filter(tag => tag.meta.affix)
-    state.visitedViews = affixTags
+    const affixTags = state.visitedViews.filter(tag => tag.meta.affix);
+    state.visitedViews = affixTags;
   },
   DEL_ALL_CACHED_VIEWS: state => {
-    state.cachedViews = []
+    state.cachedViews = [];
   },
 
   UPDATE_VISITED_VIEW: (state, view) => {
     for (let v of state.visitedViews) {
       if (v.path === view.path) {
-        v = Object.assign(v, view)
-        break
+        v = Object.assign(v, view);
+        break;
       }
     }
   }
-}
+};
 
 const actions = {
   addView({ dispatch }, view) {
-    dispatch('addVisitedView', view)
-    dispatch('addCachedView', view)
+    dispatch("addVisitedView", view);
+    dispatch("addCachedView", view);
   },
   addVisitedView({ commit }, view) {
-    commit('ADD_VISITED_VIEW', view)
+    commit("ADD_VISITED_VIEW", view);
   },
   addCachedView({ commit }, view) {
-    commit('ADD_CACHED_VIEW', view)
+    commit("ADD_CACHED_VIEW", view);
   },
 
   delView({ dispatch, state }, view) {
     return new Promise(resolve => {
-      dispatch('delVisitedView', view)
-      dispatch('delCachedView', view)
+      dispatch("delVisitedView", view);
+      dispatch("delCachedView", view);
       resolve({
         visitedViews: [...state.visitedViews],
         cachedViews: [...state.cachedViews]
-      })
-    })
+      });
+    });
   },
   delVisitedView({ commit, state }, view) {
     return new Promise(resolve => {
-      commit('DEL_VISITED_VIEW', view)
-      resolve([...state.visitedViews])
-    })
+      commit("DEL_VISITED_VIEW", view);
+      resolve([...state.visitedViews]);
+    });
   },
   delCachedView({ commit, state }, view) {
     return new Promise(resolve => {
-      commit('DEL_CACHED_VIEW', view)
-      resolve([...state.cachedViews])
-    })
+      commit("DEL_CACHED_VIEW", view);
+      resolve([...state.cachedViews]);
+    });
   },
 
   delOthersViews({ dispatch, state }, view) {
     return new Promise(resolve => {
-      dispatch('delOthersVisitedViews', view)
-      dispatch('delOthersCachedViews', view)
+      dispatch("delOthersVisitedViews", view);
+      dispatch("delOthersCachedViews", view);
       resolve({
         visitedViews: [...state.visitedViews],
         cachedViews: [...state.cachedViews]
-      })
-    })
+      });
+    });
   },
   delOthersVisitedViews({ commit, state }, view) {
     return new Promise(resolve => {
-      commit('DEL_OTHERS_VISITED_VIEWS', view)
-      resolve([...state.visitedViews])
-    })
+      commit("DEL_OTHERS_VISITED_VIEWS", view);
+      resolve([...state.visitedViews]);
+    });
   },
   delOthersCachedViews({ commit, state }, view) {
     return new Promise(resolve => {
-      commit('DEL_OTHERS_CACHED_VIEWS', view)
-      resolve([...state.cachedViews])
-    })
+      commit("DEL_OTHERS_CACHED_VIEWS", view);
+      resolve([...state.cachedViews]);
+    });
   },
 
   delAllViews({ dispatch, state }, view) {
     return new Promise(resolve => {
-      dispatch('delAllVisitedViews', view)
-      dispatch('delAllCachedViews', view)
+      dispatch("delAllVisitedViews", view);
+      dispatch("delAllCachedViews", view);
       resolve({
         visitedViews: [...state.visitedViews],
         cachedViews: [...state.cachedViews]
-      })
-    })
+      });
+    });
   },
   delAllVisitedViews({ commit, state }) {
     return new Promise(resolve => {
-      commit('DEL_ALL_VISITED_VIEWS')
-      resolve([...state.visitedViews])
-    })
+      commit("DEL_ALL_VISITED_VIEWS");
+      resolve([...state.visitedViews]);
+    });
   },
   delAllCachedViews({ commit, state }) {
     return new Promise(resolve => {
-      commit('DEL_ALL_CACHED_VIEWS')
-      resolve([...state.cachedViews])
-    })
+      commit("DEL_ALL_CACHED_VIEWS");
+      resolve([...state.cachedViews]);
+    });
   },
 
   updateVisitedView({ commit }, view) {
-    commit('UPDATE_VISITED_VIEW', view)
+    commit("UPDATE_VISITED_VIEW", view);
   }
-}
+};
 
 export default {
   namespaced: true,
   state,
   mutations,
   actions
-}
+};
diff --git a/src/store/modules/user.js b/src/store/modules/user.js
index dbc29003..dcf9f6a5 100644
--- a/src/store/modules/user.js
+++ b/src/store/modules/user.js
@@ -1,131 +1,139 @@
-import { login, logout, getInfo } from '@/api/user'
-import { getToken, setToken, removeToken } from '@/utils/auth'
-import router, { resetRouter } from '@/router'
+import { login, logout, getInfo } from "@/api/user";
+import { getToken, setToken, removeToken } from "@/utils/auth";
+import router, { resetRouter } from "@/router";
 
 const state = {
   token: getToken(),
-  name: '',
-  avatar: '',
-  introduction: '',
+  name: "",
+  avatar: "",
+  introduction: "",
   roles: []
-}
+};
 
 const mutations = {
   SET_TOKEN: (state, token) => {
-    state.token = token
+    state.token = token;
   },
   SET_INTRODUCTION: (state, introduction) => {
-    state.introduction = introduction
+    state.introduction = introduction;
   },
   SET_NAME: (state, name) => {
-    state.name = name
+    state.name = name;
   },
   SET_AVATAR: (state, avatar) => {
-    state.avatar = avatar
+    state.avatar = avatar;
   },
   SET_ROLES: (state, roles) => {
-    state.roles = roles
+    state.roles = roles;
   }
-}
+};
 
 const actions = {
   // user login
   login({ commit }, userInfo) {
-    const { username, password } = userInfo
+    const { username, password } = userInfo;
     return new Promise((resolve, reject) => {
-      login({ username: username.trim(), password: password }).then(response => {
-        const { data } = response
-        commit('SET_TOKEN', data.token)
-        setToken(data.token)
-        resolve()
-      }).catch(error => {
-        reject(error)
-      })
-    })
+      login({ username: username.trim(), password: password })
+        .then(response => {
+          const { data } = response;
+          commit("SET_TOKEN", data.token);
+          setToken(data.token);
+          resolve();
+        })
+        .catch(error => {
+          reject(error);
+        });
+    });
   },
 
   // get user info
   getInfo({ commit, state }) {
     return new Promise((resolve, reject) => {
-      getInfo(state.token).then(response => {
-        const { data } = response
+      getInfo(state.token)
+        .then(response => {
+          const { data } = response;
 
-        if (!data) {
-          reject('Verification failed, please Login again.')
-        }
+          if (!data) {
+            reject("Verification failed, please Login again.");
+          }
 
-        const { roles, name, avatar, introduction } = data
+          const { roles, name, avatar, introduction } = data;
 
-        // roles must be a non-empty array
-        if (!roles || roles.length <= 0) {
-          reject('getInfo: roles must be a non-null array!')
-        }
+          // roles must be a non-empty array
+          if (!roles || roles.length <= 0) {
+            reject("getInfo: roles must be a non-null array!");
+          }
 
-        commit('SET_ROLES', roles)
-        commit('SET_NAME', name)
-        commit('SET_AVATAR', avatar)
-        commit('SET_INTRODUCTION', introduction)
-        resolve(data)
-      }).catch(error => {
-        reject(error)
-      })
-    })
+          commit("SET_ROLES", roles);
+          commit("SET_NAME", name);
+          commit("SET_AVATAR", avatar);
+          commit("SET_INTRODUCTION", introduction);
+          resolve(data);
+        })
+        .catch(error => {
+          reject(error);
+        });
+    });
   },
 
   // user logout
   logout({ commit, state }) {
     return new Promise((resolve, reject) => {
-      logout(state.token).then(() => {
-        commit('SET_TOKEN', '')
-        commit('SET_ROLES', [])
-        removeToken()
-        resetRouter()
-        resolve()
-      }).catch(error => {
-        reject(error)
-      })
-    })
+      logout(state.token)
+        .then(() => {
+          commit("SET_TOKEN", "");
+          commit("SET_ROLES", []);
+          removeToken();
+          resetRouter();
+          resolve();
+        })
+        .catch(error => {
+          reject(error);
+        });
+    });
   },
 
   // remove token
   resetToken({ commit }) {
     return new Promise(resolve => {
-      commit('SET_TOKEN', '')
-      commit('SET_ROLES', [])
-      removeToken()
-      resolve()
-    })
+      commit("SET_TOKEN", "");
+      commit("SET_ROLES", []);
+      removeToken();
+      resolve();
+    });
   },
 
   // dynamically modify permissions
   changeRoles({ commit, dispatch }, role) {
     return new Promise(async resolve => {
-      const token = role + '-token'
+      const token = role + "-token";
 
-      commit('SET_TOKEN', token)
-      setToken(token)
+      commit("SET_TOKEN", token);
+      setToken(token);
 
-      const { roles } = await dispatch('getInfo')
+      const { roles } = await dispatch("getInfo");
 
-      resetRouter()
+      resetRouter();
 
       // generate accessible routes map based on roles
-      const accessRoutes = await dispatch('permission/generateRoutes', roles, { root: true })
+      const accessRoutes = await dispatch("permission/generateRoutes", roles, {
+        root: true
+      });
 
       // dynamically add accessible routes
-      router.addRoutes(accessRoutes)
+      router.addRoutes(accessRoutes);
 
       // reset visited views and cached views
-      dispatch('tagsView/delAllViews', null, { root: true })
+      dispatch("tagsView/delAllViews", null, { root: true });
 
-      resolve()
-    })
+      resolve();
+    });
   }
-}
+};
 
 export default {
   namespaced: true,
   state,
   mutations,
   actions
-}
+};
diff --git a/src/utils/auth.js b/src/utils/auth.js
index 08a43d6e..785a25dd 100644
--- a/src/utils/auth.js
+++ b/src/utils/auth.js
@@ -1,15 +1,15 @@
-import Cookies from 'js-cookie'
+import Cookies from "js-cookie";
 
-const TokenKey = 'Admin-Token'
+const TokenKey = "Admin-Token";
 
 export function getToken() {
-  return Cookies.get(TokenKey)
+  return Cookies.get(TokenKey);
 }
 
 export function setToken(token) {
-  return Cookies.set(TokenKey, token)
+  return Cookies.set(TokenKey, token);
 }
 
 export function removeToken() {
-  return Cookies.remove(TokenKey)
+  return Cookies.remove(TokenKey);
 }
diff --git a/src/utils/clipboard.js b/src/utils/clipboard.js
index e916a44d..5e34ad8d 100644
--- a/src/utils/clipboard.js
+++ b/src/utils/clipboard.js
@@ -1,36 +1,36 @@
-import Vue from 'vue'
-import Clipboard from 'clipboard'
+import Vue from "vue";
+import Clipboard from "clipboard";
 
 function clipboardSuccess() {
   Vue.prototype.$message({
-    message: 'Copy successfully',
-    type: 'success',
+    message: "Copy successfully",
+    type: "success",
     duration: 1500
-  })
+  });
 }
 
 function clipboardError() {
   Vue.prototype.$message({
-    message: 'Copy failed',
-    type: 'error'
-  })
+    message: "Copy failed",
+    type: "error"
+  });
 }
 
 export default function handleClipboard(text, event) {
   const clipboard = new Clipboard(event.target, {
     text: () => text
-  })
-  clipboard.on('success', () => {
-    clipboardSuccess()
-    clipboard.off('error')
-    clipboard.off('success')
-    clipboard.destroy()
-  })
-  clipboard.on('error', () => {
-    clipboardError()
-    clipboard.off('error')
-    clipboard.off('success')
-    clipboard.destroy()
-  })
-  clipboard.onClick(event)
+  });
+  clipboard.on("success", () => {
+    clipboardSuccess();
+    clipboard.off("error");
+    clipboard.off("success");
+    clipboard.destroy();
+  });
+  clipboard.on("error", () => {
+    clipboardError();
+    clipboard.off("error");
+    clipboard.off("success");
+    clipboard.destroy();
+  });
+  clipboard.onClick(event);
 }
diff --git a/src/utils/error-log.js b/src/utils/error-log.js
index a7f5b55f..c1f5614b 100644
--- a/src/utils/error-log.js
+++ b/src/utils/error-log.js
@@ -1,35 +1,35 @@
-import Vue from 'vue'
-import store from '@/store'
-import { isString, isArray } from '@/utils/validate'
-import settings from '@/settings'
+import Vue from "vue";
+import store from "@/store";
+import { isString, isArray } from "@/utils/validate";
+import settings from "@/settings";
 
 // you can set in settings.js
 // errorLog:'production' | ['production', 'development']
-const { errorLog: needErrorLog } = settings
+const { errorLog: needErrorLog } = settings;
 
 function checkNeed() {
-  const env = process.env.NODE_ENV
+  const env = process.env.NODE_ENV;
   if (isString(needErrorLog)) {
-    return env === needErrorLog
+    return env === needErrorLog;
   }
   if (isArray(needErrorLog)) {
-    return needErrorLog.includes(env)
+    return needErrorLog.includes(env);
   }
-  return false
+  return false;
 }
 
 if (checkNeed()) {
   Vue.config.errorHandler = function(err, vm, info, a) {
-  // Don't ask me why I use Vue.nextTick, it just a hack.
-  // detail see https://forum.vuejs.org/t/dispatch-in-vue-config-errorhandler-has-some-problem/23500
+    // Don't ask me why I use Vue.nextTick, it just a hack.
+    // detail see https://forum.vuejs.org/t/dispatch-in-vue-config-errorhandler-has-some-problem/23500
     Vue.nextTick(() => {
-      store.dispatch('errorLog/addErrorLog', {
+      store.dispatch("errorLog/addErrorLog", {
         err,
         vm,
         info,
         url: window.location.href
-      })
-      console.error(err, info)
-    })
-  }
+      });
+      console.error(err, info);
+    });
+  };
 }
diff --git a/src/utils/get-page-title.js b/src/utils/get-page-title.js
index cab7fd91..119d994d 100644
--- a/src/utils/get-page-title.js
+++ b/src/utils/get-page-title.js
@@ -1,10 +1,10 @@
-import defaultSettings from '@/settings'
+import defaultSettings from "@/settings";
 
-const title = defaultSettings.title || 'Vue Element Admin'
+const title = defaultSettings.title || "Vue Element Admin";
 
 export default function getPageTitle(pageTitle) {
   if (pageTitle) {
-    return `${pageTitle} - ${title}`
+    return `${pageTitle} - ${title}`;
   }
-  return `${title}`
+  return `${title}`;
 }
diff --git a/src/utils/index.js b/src/utils/index.js
index ffb55260..3b3c4a19 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -10,20 +10,20 @@
  */
 export function parseTime(time, cFormat) {
   if (arguments.length === 0) {
-    return null
+    return null;
   }
-  const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
-  let date
-  if (typeof time === 'object') {
-    date = time
+  const format = cFormat || "{y}-{m}-{d} {h}:{i}:{s}";
+  let date;
+  if (typeof time === "object") {
+    date = time;
   } else {
-    if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
-      time = parseInt(time)
+    if (typeof time === "string" && /^[0-9]+$/.test(time)) {
+      time = parseInt(time);
     }
-    if ((typeof time === 'number') && (time.toString().length === 10)) {
-      time = time * 1000
+    if (typeof time === "number" && time.toString().length === 10) {
+      time = time * 1000;
     }
-    date = new Date(time)
+    date = new Date(time);
   }
   const formatObj = {
     y: date.getFullYear(),
@@ -33,17 +33,19 @@ export function parseTime(time, cFormat) {
     i: date.getMinutes(),
     s: date.getSeconds(),
     a: date.getDay()
-  }
+  };
   const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
-    let value = formatObj[key]
+    let value = formatObj[key];
     // Note: getDay() returns 0 on Sunday
-    if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value ] }
-    if (result.length > 0 && value < 10) {
-      value = '0' + value
+    if (key === "a") {
+      return ["日", "一", "二", "三", "四", "五", "六"][value];
     }
-    return value || 0
-  })
-  return time_str
+    if (result.length > 0 && value < 10) {
+      value = "0" + value;
+    }
+    return value || 0;
+  });
+  return time_str;
 }
 
 /**
@@ -52,40 +54,40 @@ export function parseTime(time, cFormat) {
  * @returns {string}
  */
 export function formatTime(time, option) {
-  if (('' + time).length === 10) {
-    time = parseInt(time) * 1000
+  if (("" + time).length === 10) {
+    time = parseInt(time) * 1000;
   } else {
-    time = +time
+    time = +time;
   }
-  const d = new Date(time)
-  const now = Date.now()
+  const d = new Date(time);
+  const now = Date.now();
 
-  const diff = (now - d) / 1000
+  const diff = (now - d) / 1000;
 
   if (diff < 30) {
-    return '刚刚'
+    return "刚刚";
   } else if (diff < 3600) {
     // less 1 hour
-    return Math.ceil(diff / 60) + '分钟前'
+    return Math.ceil(diff / 60) + "分钟前";
   } else if (diff < 3600 * 24) {
-    return Math.ceil(diff / 3600) + '小时前'
+    return Math.ceil(diff / 3600) + "小时前";
   } else if (diff < 3600 * 24 * 2) {
-    return '1天前'
+    return "1天前";
   }
   if (option) {
-    return parseTime(time, option)
+    return parseTime(time, option);
   } else {
     return (
       d.getMonth() +
       1 +
-      '月' +
+      "月" +
       d.getDate() +
-      '日' +
+      "日" +
       d.getHours() +
-      '时' +
+      "时" +
       d.getMinutes() +
-      '分'
-    )
+      "分"
+    );
   }
 }
 
@@ -94,18 +96,18 @@ export function formatTime(time, option) {
  * @returns {Object}
  */
 export function getQueryObject(url) {
-  url = url == null ? window.location.href : url
-  const search = url.substring(url.lastIndexOf('?') + 1)
-  const obj = {}
-  const reg = /([^?&=]+)=([^?&=]*)/g
+  url = url == null ? window.location.href : url;
+  const search = url.substring(url.lastIndexOf("?") + 1);
+  const obj = {};
+  const reg = /([^?&=]+)=([^?&=]*)/g;
   search.replace(reg, (rs, $1, $2) => {
-    const name = decodeURIComponent($1)
-    let val = decodeURIComponent($2)
-    val = String(val)
-    obj[name] = val
-    return rs
-  })
-  return obj
+    const name = decodeURIComponent($1);
+    let val = decodeURIComponent($2);
+    val = String(val);
+    obj[name] = val;
+    return rs;
+  });
+  return obj;
 }
 
 /**
@@ -114,14 +116,14 @@ export function getQueryObject(url) {
  */
 export function byteLength(str) {
   // returns the byte length of an utf8 string
-  let s = str.length
+  let s = str.length;
   for (var i = str.length - 1; i >= 0; i--) {
-    const code = str.charCodeAt(i)
-    if (code > 0x7f && code <= 0x7ff) s++
-    else if (code > 0x7ff && code <= 0xffff) s += 2
-    if (code >= 0xDC00 && code <= 0xDFFF) i--
+    const code = str.charCodeAt(i);
+    if (code > 0x7f && code <= 0x7ff) s++;
+    else if (code > 0x7ff && code <= 0xffff) s += 2;
+    if (code >= 0xdc00 && code <= 0xdfff) i--;
   }
-  return s
+  return s;
 }
 
 /**
@@ -129,13 +131,13 @@ export function byteLength(str) {
  * @returns {Array}
  */
 export function cleanArray(actual) {
-  const newArray = []
+  const newArray = [];
   for (let i = 0; i < actual.length; i++) {
     if (actual[i]) {
-      newArray.push(actual[i])
+      newArray.push(actual[i]);
     }
   }
-  return newArray
+  return newArray;
 }
 
 /**
@@ -143,13 +145,13 @@ export function cleanArray(actual) {
  * @returns {Array}
  */
 export function param(json) {
-  if (!json) return ''
+  if (!json) return "";
   return cleanArray(
     Object.keys(json).map(key => {
-      if (json[key] === undefined) return ''
-      return encodeURIComponent(key) + '=' + encodeURIComponent(json[key])
+      if (json[key] === undefined) return "";
+      return encodeURIComponent(key) + "=" + encodeURIComponent(json[key]);
     })
-  ).join('&')
+  ).join("&");
 }
 
 /**
@@ -157,9 +159,9 @@ export function param(json) {
  * @returns {Object}
  */
 export function param2Obj(url) {
-  const search = url.split('?')[1]
+  const search = url.split("?")[1];
   if (!search) {
-    return {}
+    return {};
   }
   return JSON.parse(
     '{"' +
@@ -167,9 +169,9 @@ export function param2Obj(url) {
         .replace(/"/g, '\\"')
         .replace(/&/g, '","')
         .replace(/=/g, '":"')
-        .replace(/\+/g, ' ') +
+        .replace(/\+/g, " ") +
       '"}'
-  )
+  );
 }
 
 /**
@@ -177,9 +179,9 @@ export function param2Obj(url) {
  * @returns {string}
  */
 export function html2Text(val) {
-  const div = document.createElement('div')
-  div.innerHTML = val
-  return div.textContent || div.innerText
+  const div = document.createElement("div");
+  div.innerHTML = val;
+  return div.textContent || div.innerText;
 }
 
 /**
@@ -189,21 +191,21 @@ export function html2Text(val) {
  * @returns {Object}
  */
 export function objectMerge(target, source) {
-  if (typeof target !== 'object') {
-    target = {}
+  if (typeof target !== "object") {
+    target = {};
   }
   if (Array.isArray(source)) {
-    return source.slice()
+    return source.slice();
   }
   Object.keys(source).forEach(property => {
-    const sourceProperty = source[property]
-    if (typeof sourceProperty === 'object') {
-      target[property] = objectMerge(target[property], sourceProperty)
+    const sourceProperty = source[property];
+    if (typeof sourceProperty === "object") {
+      target[property] = objectMerge(target[property], sourceProperty);
     } else {
-      target[property] = sourceProperty
+      target[property] = sourceProperty;
     }
-  })
-  return target
+  });
+  return target;
 }
 
 /**
@@ -212,18 +214,18 @@ export function objectMerge(target, source) {
  */
 export function toggleClass(element, className) {
   if (!element || !className) {
-    return
+    return;
   }
-  let classString = element.className
-  const nameIndex = classString.indexOf(className)
+  let classString = element.className;
+  const nameIndex = classString.indexOf(className);
   if (nameIndex === -1) {
-    classString += '' + className
+    classString += "" + className;
   } else {
     classString =
       classString.substr(0, nameIndex) +
-      classString.substr(nameIndex + className.length)
+      classString.substr(nameIndex + className.length);
   }
-  element.className = classString
+  element.className = classString;
 }
 
 /**
@@ -231,10 +233,10 @@ export function toggleClass(element, className) {
  * @returns {Date}
  */
 export function getTime(type) {
-  if (type === 'start') {
-    return new Date().getTime() - 3600 * 1000 * 24 * 90
+  if (type === "start") {
+    return new Date().getTime() - 3600 * 1000 * 24 * 90;
   } else {
-    return new Date(new Date().toDateString())
+    return new Date(new Date().toDateString());
   }
 }
 
@@ -245,38 +247,38 @@ export function getTime(type) {
  * @return {*}
  */
 export function debounce(func, wait, immediate) {
-  let timeout, args, context, timestamp, result
+  let timeout, args, context, timestamp, result;
 
   const later = function() {
     // 据上一次触发时间间隔
-    const last = +new Date() - timestamp
+    const last = +new Date() - timestamp;
 
     // 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
     if (last < wait && last > 0) {
-      timeout = setTimeout(later, wait - last)
+      timeout = setTimeout(later, wait - last);
     } else {
-      timeout = null
+      timeout = null;
       // 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
       if (!immediate) {
-        result = func.apply(context, args)
-        if (!timeout) context = args = null
+        result = func.apply(context, args);
+        if (!timeout) context = args = null;
       }
     }
-  }
+  };
 
   return function(...args) {
-    context = this
-    timestamp = +new Date()
-    const callNow = immediate && !timeout
+    context = this;
+    timestamp = +new Date();
+    const callNow = immediate && !timeout;
     // 如果延时不存在，重新设定延时
-    if (!timeout) timeout = setTimeout(later, wait)
+    if (!timeout) timeout = setTimeout(later, wait);
     if (callNow) {
-      result = func.apply(context, args)
-      context = args = null
+      result = func.apply(context, args);
+      context = args = null;
     }
 
-    return result
-  }
+    return result;
+  };
 }
 
 /**
@@ -287,18 +289,18 @@ export function debounce(func, wait, immediate) {
  * @returns {Object}
  */
 export function deepClone(source) {
-  if (!source && typeof source !== 'object') {
-    throw new Error('error arguments', 'deepClone')
+  if (!source && typeof source !== "object") {
+    throw new Error("error arguments", "deepClone");
   }
-  const targetObj = source.constructor === Array ? [] : {}
+  const targetObj = source.constructor === Array ? [] : {};
   Object.keys(source).forEach(keys => {
-    if (source[keys] && typeof source[keys] === 'object') {
-      targetObj[keys] = deepClone(source[keys])
+    if (source[keys] && typeof source[keys] === "object") {
+      targetObj[keys] = deepClone(source[keys]);
     } else {
-      targetObj[keys] = source[keys]
+      targetObj[keys] = source[keys];
     }
-  })
-  return targetObj
+  });
+  return targetObj;
 }
 
 /**
@@ -306,16 +308,16 @@ export function deepClone(source) {
  * @returns {Array}
  */
 export function uniqueArr(arr) {
-  return Array.from(new Set(arr))
+  return Array.from(new Set(arr));
 }
 
 /**
  * @returns {string}
  */
 export function createUniqueString() {
-  const timestamp = +new Date() + ''
-  const randomNum = parseInt((1 + Math.random()) * 65536) + ''
-  return (+(randomNum + timestamp)).toString(32)
+  const timestamp = +new Date() + "";
+  const randomNum = parseInt((1 + Math.random()) * 65536) + "";
+  return (+(randomNum + timestamp)).toString(32);
 }
 
 /**
@@ -325,7 +327,7 @@ export function createUniqueString() {
  * @returns {boolean}
  */
 export function hasClass(ele, cls) {
-  return !!ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'))
+  return !!ele.className.match(new RegExp("(\\s|^)" + cls + "(\\s|$)"));
 }
 
 /**
@@ -334,7 +336,7 @@ export function hasClass(ele, cls) {
  * @param {string} cls
  */
 export function addClass(ele, cls) {
-  if (!hasClass(ele, cls)) ele.className += ' ' + cls
+  if (!hasClass(ele, cls)) ele.className += " " + cls;
 }
 
 /**
@@ -344,7 +346,7 @@ export function addClass(ele, cls) {
  */
 export function removeClass(ele, cls) {
   if (hasClass(ele, cls)) {
-    const reg = new RegExp('(\\s|^)' + cls + '(\\s|$)')
-    ele.className = ele.className.replace(reg, ' ')
+    const reg = new RegExp("(\\s|^)" + cls + "(\\s|$)");
+    ele.className = ele.className.replace(reg, " ");
   }
 }
diff --git a/src/utils/open-window.js b/src/utils/open-window.js
index 1a655d77..18536da1 100644
--- a/src/utils/open-window.js
+++ b/src/utils/open-window.js
@@ -7,19 +7,39 @@
  */
 export default function openWindow(url, title, w, h) {
   // Fixes dual-screen position                            Most browsers       Firefox
-  const dualScreenLeft = window.screenLeft !== undefined ? window.screenLeft : screen.left
-  const dualScreenTop = window.screenTop !== undefined ? window.screenTop : screen.top
+  const dualScreenLeft =
+    window.screenLeft !== undefined ? window.screenLeft : screen.left;
+  const dualScreenTop =
+    window.screenTop !== undefined ? window.screenTop : screen.top;
 
-  const width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width
-  const height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height
+  const width = window.innerWidth
+    ? window.innerWidth
+    : document.documentElement.clientWidth
+    ? document.documentElement.clientWidth
+    : screen.width;
+  const height = window.innerHeight
+    ? window.innerHeight
+    : document.documentElement.clientHeight
+    ? document.documentElement.clientHeight
+    : screen.height;
 
-  const left = ((width / 2) - (w / 2)) + dualScreenLeft
-  const top = ((height / 2) - (h / 2)) + dualScreenTop
-  const newWindow = window.open(url, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=yes, copyhistory=no, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left)
+  const left = width / 2 - w / 2 + dualScreenLeft;
+  const top = height / 2 - h / 2 + dualScreenTop;
+  const newWindow = window.open(
+    url,
+    title,
+    "toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=yes, copyhistory=no, width=" +
+      w +
+      ", height=" +
+      h +
+      ", top=" +
+      top +
+      ", left=" +
+      left
+  );
 
   // Puts focus on the newWindow
   if (window.focus) {
-    newWindow.focus()
+    newWindow.focus();
   }
 }
-
diff --git a/src/utils/permission.js b/src/utils/permission.js
index 221d3842..8d252a78 100644
--- a/src/utils/permission.js
+++ b/src/utils/permission.js
@@ -1,4 +1,4 @@
-import store from '@/store'
+import store from "@/store";
 
 /**
  * @param {Array} value
@@ -7,19 +7,19 @@ import store from '@/store'
  */
 export default function checkPermission(value) {
   if (value && value instanceof Array && value.length > 0) {
-    const roles = store.getters && store.getters.roles
-    const permissionRoles = value
+    const roles = store.getters && store.getters.roles;
+    const permissionRoles = value;
 
     const hasPermission = roles.some(role => {
-      return permissionRoles.includes(role)
-    })
+      return permissionRoles.includes(role);
+    });
 
     if (!hasPermission) {
-      return false
+      return false;
     }
-    return true
+    return true;
   } else {
-    console.error(`need roles! Like v-permission="['admin','editor']"`)
-    return false
+    console.error(`need roles! Like v-permission="['admin','editor']"`);
+    return false;
   }
 }
diff --git a/src/utils/request.js b/src/utils/request.js
index 2fb95ac0..5541a695 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -1,14 +1,14 @@
-import axios from 'axios'
-import { MessageBox, Message } from 'element-ui'
-import store from '@/store'
-import { getToken } from '@/utils/auth'
+import axios from "axios";
+import { MessageBox, Message } from "element-ui";
+import store from "@/store";
+import { getToken } from "@/utils/auth";
 
 // create an axios instance
 const service = axios.create({
   baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
   // withCredentials: true, // send cookies when cross-domain requests
   timeout: 5000 // request timeout
-})
+});
 
 // request interceptor
 service.interceptors.request.use(
@@ -19,23 +19,23 @@ service.interceptors.request.use(
       // let each request carry token
       // ['X-Token'] is a custom headers key
       // please modify it according to the actual situation
-      config.headers['X-Token'] = getToken()
+      config.headers["X-Token"] = getToken();
     }
-    return config
+    return config;
   },
   error => {
     // do something with request error
-    console.log(error) // for debug
-    return Promise.reject(error)
+    console.log(error); // for debug
+    return Promise.reject(error);
   }
-)
+);
 
 // response interceptor
 service.interceptors.response.use(
   /**
    * If you want to get http information such as headers or status
    * Please return  response => response
-  */
+   */
 
   /**
    * Determine the request status by custom code
@@ -43,43 +43,47 @@ service.interceptors.response.use(
    * You can also judge the status by HTTP Status Code
    */
   response => {
-    const res = response.data
+    const res = response.data;
 
     // if the custom code is not 20000, it is judged as an error.
     if (res.code !== 20000) {
       Message({
-        message: res.message || 'Error',
-        type: 'error',
+        message: res.message || "Error",
+        type: "error",
         duration: 5 * 1000
-      })
+      });
 
       // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
       if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
         // to re-login
-        MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
-          confirmButtonText: 'Re-Login',
-          cancelButtonText: 'Cancel',
-          type: 'warning'
-        }).then(() => {
-          store.dispatch('user/resetToken').then(() => {
-            location.reload()
-          })
-        })
+        MessageBox.confirm(
+          "You have been logged out, you can cancel to stay on this page, or log in again",
+          "Confirm logout",
+          {
+            confirmButtonText: "Re-Login",
+            cancelButtonText: "Cancel",
+            type: "warning"
+          }
+        ).then(() => {
+          store.dispatch("user/resetToken").then(() => {
+            location.reload();
+          });
+        });
       }
-      return Promise.reject(new Error(res.message || 'Error'))
+      return Promise.reject(new Error(res.message || "Error"));
     } else {
-      return res
+      return res;
     }
   },
   error => {
-    console.log('err' + error) // for debug
+    console.log("err" + error); // for debug
     Message({
       message: error.message,
-      type: 'error',
+      type: "error",
       duration: 5 * 1000
-    })
-    return Promise.reject(error)
+    });
+    return Promise.reject(error);
   }
-)
+);
 
-export default service
+export default service;
diff --git a/src/utils/scroll-to.js b/src/utils/scroll-to.js
index c5d8e04e..dc2e8732 100644
--- a/src/utils/scroll-to.js
+++ b/src/utils/scroll-to.js
@@ -1,29 +1,40 @@
 Math.easeInOutQuad = function(t, b, c, d) {
-  t /= d / 2
+  t /= d / 2;
   if (t < 1) {
-    return c / 2 * t * t + b
+    return (c / 2) * t * t + b;
   }
-  t--
-  return -c / 2 * (t * (t - 2) - 1) + b
-}
+  t--;
+  return (-c / 2) * (t * (t - 2) - 1) + b;
+};
 
 // requestAnimationFrame for Smart Animating http://goo.gl/sx5sts
 var requestAnimFrame = (function() {
-  return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60) }
-})()
+  return (
+    window.requestAnimationFrame ||
+    window.webkitRequestAnimationFrame ||
+    window.mozRequestAnimationFrame ||
+    function(callback) {
+      window.setTimeout(callback, 1000 / 60);
+    }
+  );
+})();
 
 /**
  * Because it's so fucking difficult to detect the scrolling element, just move them all
  * @param {number} amount
  */
 function move(amount) {
-  document.documentElement.scrollTop = amount
-  document.body.parentNode.scrollTop = amount
-  document.body.scrollTop = amount
+  document.documentElement.scrollTop = amount;
+  document.body.parentNode.scrollTop = amount;
+  document.body.scrollTop = amount;
 }
 
 function position() {
-  return document.documentElement.scrollTop || document.body.parentNode.scrollTop || document.body.scrollTop
+  return (
+    document.documentElement.scrollTop ||
+    document.body.parentNode.scrollTop ||
+    document.body.scrollTop
+  );
 }
 
 /**
@@ -32,27 +43,27 @@ function position() {
  * @param {Function} callback
  */
 export function scrollTo(to, duration, callback) {
-  const start = position()
-  const change = to - start
-  const increment = 20
-  let currentTime = 0
-  duration = (typeof (duration) === 'undefined') ? 500 : duration
+  const start = position();
+  const change = to - start;
+  const increment = 20;
+  let currentTime = 0;
+  duration = typeof duration === "undefined" ? 500 : duration;
   var animateScroll = function() {
     // increment the time
-    currentTime += increment
+    currentTime += increment;
     // find the value with the quadratic in-out easing function
-    var val = Math.easeInOutQuad(currentTime, start, change, duration)
+    var val = Math.easeInOutQuad(currentTime, start, change, duration);
     // move the document.body
-    move(val)
+    move(val);
     // do the animation unless its over
     if (currentTime < duration) {
-      requestAnimFrame(animateScroll)
+      requestAnimFrame(animateScroll);
     } else {
-      if (callback && typeof (callback) === 'function') {
+      if (callback && typeof callback === "function") {
         // the animation is done so lets callback
-        callback()
+        callback();
       }
     }
-  }
-  animateScroll()
+  };
+  animateScroll();
 }
diff --git a/src/utils/validate.js b/src/utils/validate.js
index 6b3ac418..c86a80c6 100644
--- a/src/utils/validate.js
+++ b/src/utils/validate.js
@@ -7,7 +7,7 @@
  * @returns {Boolean}
  */
 export function isExternal(path) {
-  return /^(https?:|mailto:|tel:)/.test(path)
+  return /^(https?:|mailto:|tel:)/.test(path);
 }
 
 /**
@@ -15,8 +15,8 @@ export function isExternal(path) {
  * @returns {Boolean}
  */
 export function validUsername(str) {
-  const valid_map = ['admin', 'editor']
-  return valid_map.indexOf(str.trim()) >= 0
+  const valid_map = ["admin", "editor"];
+  return valid_map.indexOf(str.trim()) >= 0;
 }
 
 /**
@@ -24,8 +24,8 @@ export function validUsername(str) {
  * @returns {Boolean}
  */
 export function validURL(url) {
-  const reg = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
-  return reg.test(url)
+  const reg = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/;
+  return reg.test(url);
 }
 
 /**
@@ -33,8 +33,8 @@ export function validURL(url) {
  * @returns {Boolean}
  */
 export function validLowerCase(str) {
-  const reg = /^[a-z]+$/
-  return reg.test(str)
+  const reg = /^[a-z]+$/;
+  return reg.test(str);
 }
 
 /**
@@ -42,8 +42,8 @@ export function validLowerCase(str) {
  * @returns {Boolean}
  */
 export function validUpperCase(str) {
-  const reg = /^[A-Z]+$/
-  return reg.test(str)
+  const reg = /^[A-Z]+$/;
+  return reg.test(str);
 }
 
 /**
@@ -51,8 +51,8 @@ export function validUpperCase(str) {
  * @returns {Boolean}
  */
 export function validAlphabets(str) {
-  const reg = /^[A-Za-z]+$/
-  return reg.test(str)
+  const reg = /^[A-Za-z]+$/;
+  return reg.test(str);
 }
 
 /**
@@ -60,8 +60,8 @@ export function validAlphabets(str) {
  * @returns {Boolean}
  */
 export function validEmail(email) {
-  const reg = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
-  return reg.test(email)
+  const reg = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+  return reg.test(email);
 }
 
 /**
@@ -69,10 +69,10 @@ export function validEmail(email) {
  * @returns {Boolean}
  */
 export function isString(str) {
-  if (typeof str === 'string' || str instanceof String) {
-    return true
+  if (typeof str === "string" || str instanceof String) {
+    return true;
   }
-  return false
+  return false;
 }
 
 /**
@@ -80,8 +80,8 @@ export function isString(str) {
  * @returns {Boolean}
  */
 export function isArray(arg) {
-  if (typeof Array.isArray === 'undefined') {
-    return Object.prototype.toString.call(arg) === '[object Array]'
+  if (typeof Array.isArray === "undefined") {
+    return Object.prototype.toString.call(arg) === "[object Array]";
   }
-  return Array.isArray(arg)
+  return Array.isArray(arg);
 }
diff --git a/src/vendor/Export2Excel.js b/src/vendor/Export2Excel.js
index 20784f3a..09ddb736 100644
--- a/src/vendor/Export2Excel.js
+++ b/src/vendor/Export2Excel.js
@@ -1,25 +1,30 @@
 /* eslint-disable */
-require('script-loader!file-saver');
-import XLSX from 'xlsx'
+require("script-loader!file-saver");
+import XLSX from "xlsx";
 
 function generateArray(table) {
   var out = [];
-  var rows = table.querySelectorAll('tr');
+  var rows = table.querySelectorAll("tr");
   var ranges = [];
   for (var R = 0; R < rows.length; ++R) {
     var outRow = [];
     var row = rows[R];
-    var columns = row.querySelectorAll('td');
+    var columns = row.querySelectorAll("td");
     for (var C = 0; C < columns.length; ++C) {
       var cell = columns[C];
-      var colspan = cell.getAttribute('colspan');
-      var rowspan = cell.getAttribute('rowspan');
+      var colspan = cell.getAttribute("colspan");
+      var rowspan = cell.getAttribute("rowspan");
       var cellValue = cell.innerText;
       if (cellValue !== "" && cellValue == +cellValue) cellValue = +cellValue;
 
       //Skip ranges
-      ranges.forEach(function (range) {
-        if (R >= range.s.r && R <= range.e.r && outRow.length >= range.s.c && outRow.length <= range.e.c) {
+      ranges.forEach(function(range) {
+        if (
+          R >= range.s.r &&
+          R <= range.e.r &&
+          outRow.length >= range.s.c &&
+          outRow.length <= range.e.c
+        ) {
           for (var i = 0; i <= range.e.c - range.s.c; ++i) outRow.push(null);
         }
       });
@@ -38,19 +43,18 @@ function generateArray(table) {
             c: outRow.length + colspan - 1
           }
         });
-      };
+      }
 
       //Handle Value
       outRow.push(cellValue !== "" ? cellValue : null);
 
       //Handle Colspan
-      if (colspan)
-        for (var k = 0; k < colspan - 1; ++k) outRow.push(null);
+      if (colspan) for (var k = 0; k < colspan - 1; ++k) outRow.push(null);
     }
     out.push(outRow);
   }
   return [out, ranges];
-};
+}
 
 function datenum(v, date1904) {
   if (date1904) v += 1462;
@@ -85,18 +89,18 @@ function sheet_from_array_of_arrays(data, opts) {
         r: R
       });
 
-      if (typeof cell.v === 'number') cell.t = 'n';
-      else if (typeof cell.v === 'boolean') cell.t = 'b';
+      if (typeof cell.v === "number") cell.t = "n";
+      else if (typeof cell.v === "boolean") cell.t = "b";
       else if (cell.v instanceof Date) {
-        cell.t = 'n';
+        cell.t = "n";
         cell.z = XLSX.SSF._table[14];
         cell.v = datenum(cell.v);
-      } else cell.t = 's';
+      } else cell.t = "s";
 
       ws[cell_ref] = cell;
     }
   }
-  if (range.s.c < 10000000) ws['!ref'] = XLSX.utils.encode_range(range);
+  if (range.s.c < 10000000) ws["!ref"] = XLSX.utils.encode_range(range);
   return ws;
 }
 
@@ -109,7 +113,7 @@ function Workbook() {
 function s2ab(s) {
   var buf = new ArrayBuffer(s.length);
   var view = new Uint8Array(buf);
-  for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
+  for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
   return buf;
 }
 
@@ -127,21 +131,24 @@ export function export_table_to_excel(id) {
 
   /* add ranges to worksheet */
   // ws['!cols'] = ['apple', 'banan'];
-  ws['!merges'] = ranges;
+  ws["!merges"] = ranges;
 
   /* add worksheet to workbook */
   wb.SheetNames.push(ws_name);
   wb.Sheets[ws_name] = ws;
 
   var wbout = XLSX.write(wb, {
-    bookType: 'xlsx',
+    bookType: "xlsx",
     bookSST: false,
-    type: 'binary'
+    type: "binary"
   });
 
-  saveAs(new Blob([s2ab(wbout)], {
-    type: "application/octet-stream"
-  }), "test.xlsx")
+  saveAs(
+    new Blob([s2ab(wbout)], {
+      type: "application/octet-stream"
+    }),
+    "test.xlsx"
+  );
 }
 
 export function export_json_to_excel({
@@ -151,15 +158,15 @@ export function export_json_to_excel({
   filename,
   merges = [],
   autoWidth = true,
-  bookType=  'xlsx'
+  bookType = "xlsx"
 } = {}) {
   /* original data */
-  filename = filename || 'excel-list'
-  data = [...data]
+  filename = filename || "excel-list";
+  data = [...data];
   data.unshift(header);
 
-  for (let i = multiHeader.length-1; i > -1; i--) {
-    data.unshift(multiHeader[i])
+  for (let i = multiHeader.length - 1; i > -1; i--) {
+    data.unshift(multiHeader[i]);
   }
 
   var ws_name = "SheetJS";
@@ -167,42 +174,43 @@ export function export_json_to_excel({
     ws = sheet_from_array_of_arrays(data);
 
   if (merges.length > 0) {
-    if (!ws['!merges']) ws['!merges'] = [];
+    if (!ws["!merges"]) ws["!merges"] = [];
     merges.forEach(item => {
-      ws['!merges'].push(XLSX.utils.decode_range(item))
-    })
+      ws["!merges"].push(XLSX.utils.decode_range(item));
+    });
   }
 
   if (autoWidth) {
     /*设置worksheet每列的最大宽度*/
-    const colWidth = data.map(row => row.map(val => {
-      /*先判断是否为null/undefined*/
-      if (val == null) {
-        return {
-          'wch': 10
-        };
-      }
-      /*再判断是否为中文*/
-      else if (val.toString().charCodeAt(0) > 255) {
-        return {
-          'wch': val.toString().length * 2
-        };
-      } else {
-        return {
-          'wch': val.toString().length
-        };
-      }
-    }))
+    const colWidth = data.map(row =>
+      row.map(val => {
+        /*先判断是否为null/undefined*/
+        if (val == null) {
+          return {
+            wch: 10
+          };
+        } else if (val.toString().charCodeAt(0) > 255) {
+        /*再判断是否为中文*/
+          return {
+            wch: val.toString().length * 2
+          };
+        } else {
+          return {
+            wch: val.toString().length
+          };
+        }
+      })
+    );
     /*以第一行为初始值*/
     let result = colWidth[0];
     for (let i = 1; i < colWidth.length; i++) {
       for (let j = 0; j < colWidth[i].length; j++) {
-        if (result[j]['wch'] < colWidth[i][j]['wch']) {
-          result[j]['wch'] = colWidth[i][j]['wch'];
+        if (result[j]["wch"] < colWidth[i][j]["wch"]) {
+          result[j]["wch"] = colWidth[i][j]["wch"];
         }
       }
     }
-    ws['!cols'] = result;
+    ws["!cols"] = result;
   }
 
   /* add worksheet to workbook */
@@ -212,9 +220,12 @@ export function export_json_to_excel({
   var wbout = XLSX.write(wb, {
     bookType: bookType,
     bookSST: false,
-    type: 'binary'
+    type: "binary"
   });
-  saveAs(new Blob([s2ab(wbout)], {
-    type: "application/octet-stream"
-  }), `${filename}.${bookType}`);
+  saveAs(
+    new Blob([s2ab(wbout)], {
+      type: "application/octet-stream"
+    }),
+    `${filename}.${bookType}`
+  );
 }
diff --git a/src/vendor/Export2Zip.js b/src/vendor/Export2Zip.js
index f776465e..0663758c 100644
--- a/src/vendor/Export2Zip.js
+++ b/src/vendor/Export2Zip.js
@@ -1,24 +1,29 @@
 /* eslint-disable */
-require('script-loader!file-saver');
-import JSZip from 'jszip'
+require("script-loader!file-saver");
+import JSZip from "jszip";
 
 export function export_txt_to_zip(th, jsonData, txtName, zipName) {
-  const zip = new JSZip()
-  const txt_name = txtName || 'file'
-  const zip_name = zipName || 'file'
-  const data = jsonData
-  let txtData = `${th}\r\n`
-  data.forEach((row) => {
-    let tempStr = ''
-    tempStr = row.toString()
-    txtData += `${tempStr}\r\n`
-  })
-  zip.file(`${txt_name}.txt`, txtData)
-  zip.generateAsync({
-    type: "blob"
-  }).then((blob) => {
-    saveAs(blob, `${zip_name}.zip`)
-  }, (err) => {
-    alert('导出失败')
-  })
+  const zip = new JSZip();
+  const txt_name = txtName || "file";
+  const zip_name = zipName || "file";
+  const data = jsonData;
+  let txtData = `${th}\r\n`;
+  data.forEach(row => {
+    let tempStr = "";
+    tempStr = row.toString();
+    txtData += `${tempStr}\r\n`;
+  });
+  zip.file(`${txt_name}.txt`, txtData);
+  zip
+    .generateAsync({
+      type: "blob"
+    })
+    .then(
+      blob => {
+        saveAs(blob, `${zip_name}.zip`);
+      },
+      err => {
+        alert("导出失败");
+      }
+    );
 }
diff --git a/src/views/charts/keyboard.vue b/src/views/charts/keyboard.vue
index 917f8eeb..82522119 100644
--- a/src/views/charts/keyboard.vue
+++ b/src/views/charts/keyboard.vue
@@ -5,19 +5,18 @@
 </template>
 
 <script>
-import Chart from '@/components/Charts/Keyboard'
+import Chart from "@/components/Charts/Keyboard";
 
 export default {
-  name: 'KeyboardChart',
+  name: "KeyboardChart",
   components: { Chart }
-}
+};
 </script>
 
 <style scoped>
-.chart-container{
+.chart-container {
   position: relative;
   width: 100%;
   height: calc(100vh - 84px);
 }
 </style>
-
diff --git a/src/views/charts/line.vue b/src/views/charts/line.vue
index fea1497e..e6380101 100644
--- a/src/views/charts/line.vue
+++ b/src/views/charts/line.vue
@@ -5,19 +5,18 @@
 </template>
 
 <script>
-import Chart from '@/components/Charts/LineMarker'
+import Chart from "@/components/Charts/LineMarker";
 
 export default {
-  name: 'LineChart',
+  name: "LineChart",
   components: { Chart }
-}
+};
 </script>
 
 <style scoped>
-.chart-container{
+.chart-container {
   position: relative;
   width: 100%;
   height: calc(100vh - 84px);
 }
 </style>
-
diff --git a/src/views/charts/mix-chart.vue b/src/views/charts/mix-chart.vue
index c57db75a..7bdc487c 100644
--- a/src/views/charts/mix-chart.vue
+++ b/src/views/charts/mix-chart.vue
@@ -5,19 +5,18 @@
 </template>
 
 <script>
-import Chart from '@/components/Charts/MixChart'
+import Chart from "@/components/Charts/MixChart";
 
 export default {
-  name: 'MixChart',
+  name: "MixChart",
   components: { Chart }
-}
+};
 </script>
 
 <style scoped>
-.chart-container{
+.chart-container {
   position: relative;
   width: 100%;
   height: calc(100vh - 84px);
 }
 </style>
-
diff --git a/src/views/clipboard/index.vue b/src/views/clipboard/index.vue
index e78c6359..b40ec0c9 100644
--- a/src/views/clipboard/index.vue
+++ b/src/views/clipboard/index.vue
@@ -2,14 +2,31 @@
   <div class="app-container">
     <el-tabs v-model="activeName">
       <el-tab-pane label="use clipboard  directly" name="directly">
-        <el-input v-model="inputData" placeholder="Please input" style="width:400px;max-width:100%;" />
-        <el-button type="primary" icon="document" @click="handleCopy(inputData,$event)">
+        <el-input
+          v-model="inputData"
+          placeholder="Please input"
+          style="width:400px;max-width:100%;"
+        />
+        <el-button
+          type="primary"
+          icon="document"
+          @click="handleCopy(inputData, $event)"
+        >
           copy
         </el-button>
       </el-tab-pane>
       <el-tab-pane label="use clipboard by v-directive" name="v-directive">
-        <el-input v-model="inputData" placeholder="Please input" style="width:400px;max-width:100%;" />
-        <el-button v-clipboard:copy="inputData" v-clipboard:success="clipboardSuccess" type="primary" icon="document">
+        <el-input
+          v-model="inputData"
+          placeholder="Please input"
+          style="width:400px;max-width:100%;"
+        />
+        <el-button
+          v-clipboard:copy="inputData"
+          v-clipboard:success="clipboardSuccess"
+          type="primary"
+          icon="document"
+        >
           copy
         </el-button>
       </el-tab-pane>
@@ -18,32 +35,31 @@
 </template>
 
 <script>
-import clip from '@/utils/clipboard' // use clipboard directly
-import clipboard from '@/directive/clipboard/index.js' // use clipboard by v-directive
+import clip from "@/utils/clipboard"; // use clipboard directly
+import clipboard from "@/directive/clipboard/index.js"; // use clipboard by v-directive
 
 export default {
-  name: 'ClipboardDemo',
+  name: "ClipboardDemo",
   directives: {
     clipboard
   },
   data() {
     return {
-      activeName: 'directly',
-      inputData: 'https://github.com/PanJiaChen/vue-element-admin'
-    }
+      activeName: "directly",
+      inputData: "https://github.com/PanJiaChen/vue-element-admin"
+    };
   },
   methods: {
     handleCopy(text, event) {
-      clip(text, event)
+      clip(text, event);
     },
     clipboardSuccess() {
       this.$message({
-        message: 'Copy successfully',
-        type: 'success',
+        message: "Copy successfully",
+        type: "success",
         duration: 1500
-      })
+      });
     }
   }
-}
+};
 </script>
-
diff --git a/src/views/components-demo/avatar-upload.vue b/src/views/components-demo/avatar-upload.vue
index 41bb9bc7..41e167e2 100644
--- a/src/views/components-demo/avatar-upload.vue
+++ b/src/views/components-demo/avatar-upload.vue
@@ -1,13 +1,22 @@
 <template>
   <div class="components-container">
-    <aside>This is based on
-      <a class="link-type" href="//github.com/dai-siki/vue-image-crop-upload"> vue-image-crop-upload</a>.
-      Since I was using only the vue@1 version, and it is not compatible with mockjs at the moment, I modified it myself, and if you are going to use it, it is better to use official version.
+    <aside>
+      This is based on
+      <a class="link-type" href="//github.com/dai-siki/vue-image-crop-upload">
+        vue-image-crop-upload</a
+      >. Since I was using only the vue@1 version, and it is not compatible with
+      mockjs at the moment, I modified it myself, and if you are going to use
+      it, it is better to use official version.
     </aside>
 
     <pan-thumb :image="image" />
 
-    <el-button type="primary" icon="upload" style="position: absolute;bottom: 15px;margin-left: 40px;" @click="imagecropperShow=true">
+    <el-button
+      type="primary"
+      icon="upload"
+      style="position: absolute;bottom: 15px;margin-left: 40px;"
+      @click="imagecropperShow = true"
+    >
       Change Avatar
     </el-button>
 
@@ -25,37 +34,36 @@
 </template>
 
 <script>
-import ImageCropper from '@/components/ImageCropper'
-import PanThumb from '@/components/PanThumb'
+import ImageCropper from "@/components/ImageCropper";
+import PanThumb from "@/components/PanThumb";
 
 export default {
-  name: 'AvatarUploadDemo',
+  name: "AvatarUploadDemo",
   components: { ImageCropper, PanThumb },
   data() {
     return {
       imagecropperShow: false,
       imagecropperKey: 0,
-      image: 'https://wpimg.wallstcn.com/577965b9-bb9e-4e02-9f0c-095b41417191'
-    }
+      image: "https://wpimg.wallstcn.com/577965b9-bb9e-4e02-9f0c-095b41417191"
+    };
   },
   methods: {
     cropSuccess(resData) {
-      this.imagecropperShow = false
-      this.imagecropperKey = this.imagecropperKey + 1
-      this.image = resData.files.avatar
+      this.imagecropperShow = false;
+      this.imagecropperKey = this.imagecropperKey + 1;
+      this.image = resData.files.avatar;
     },
     close() {
-      this.imagecropperShow = false
+      this.imagecropperShow = false;
     }
   }
-}
+};
 </script>
 
 <style scoped>
-  .avatar{
-    width: 200px;
-    height: 200px;
-    border-radius: 50%;
-  }
+.avatar {
+  width: 200px;
+  height: 200px;
+  border-radius: 50%;
+}
 </style>
-
diff --git a/src/views/components-demo/back-to-top.vue b/src/views/components-demo/back-to-top.vue
index df5370be..9ab1057a 100644
--- a/src/views/components-demo/back-to-top.vue
+++ b/src/views/components-demo/back-to-top.vue
@@ -1,10 +1,13 @@
 <template>
   <div class="components-container">
     <aside>
-      When the page is scrolled to the specified position, the Back to Top button appears in the lower right corner
+      When the page is scrolled to the specified position, the Back to Top
+      button appears in the lower right corner
     </aside>
     <aside>
-      You can customize the style of the button, show / hide, height of appearance, height of the return. If you need a text prompt, you can use element-ui el-tooltip elements externally
+      You can customize the style of the button, show / hide, height of
+      appearance, height of the return. If you need a text prompt, you can use
+      element-ui el-tooltip elements externally
     </aside>
     <div class="placeholder-container">
       <div>placeholder</div>
@@ -119,32 +122,37 @@
     </div>
     <!-- you can add element-ui's tooltip -->
     <el-tooltip placement="top" content="tooltip">
-      <back-to-top :custom-style="myBackToTopStyle" :visibility-height="300" :back-position="50" transition-name="fade" />
+      <back-to-top
+        :custom-style="myBackToTopStyle"
+        :visibility-height="300"
+        :back-position="50"
+        transition-name="fade"
+      />
     </el-tooltip>
   </div>
 </template>
 
 <script>
-import BackToTop from '@/components/BackToTop'
+import BackToTop from "@/components/BackToTop";
 
 export default {
-  name: 'BackToTopDemo',
+  name: "BackToTopDemo",
   components: { BackToTop },
   data() {
     return {
       // customizable button style, show/hide critical point, return position
       myBackToTopStyle: {
-        right: '50px',
-        bottom: '50px',
-        width: '40px',
-        height: '40px',
-        'border-radius': '4px',
-        'line-height': '45px', // 请保持与高度一致以垂直居中 Please keep consistent with height to center vertically
-        background: '#e7eaf1'// 按钮的背景颜色 The background color of the button
+        right: "50px",
+        bottom: "50px",
+        width: "40px",
+        height: "40px",
+        "border-radius": "4px",
+        "line-height": "45px", // 请保持与高度一致以垂直居中 Please keep consistent with height to center vertically
+        background: "#e7eaf1" // 按钮的背景颜色 The background color of the button
       }
-    }
+    };
   }
-}
+};
 </script>
 
 <style scoped>
diff --git a/src/views/components-demo/count-to.vue b/src/views/components-demo/count-to.vue
index 70681df6..b7f29f3b 100644
--- a/src/views/components-demo/count-to.vue
+++ b/src/views/components-demo/count-to.vue
@@ -1,7 +1,9 @@
 <template>
   <div class="components-container">
     <aside>
-      <a href="https://github.com/PanJiaChen/vue-countTo" target="_blank">countTo-component</a>
+      <a href="https://github.com/PanJiaChen/vue-countTo" target="_blank"
+        >countTo-component</a
+      >
     </aside>
     <count-to
       ref="example"
@@ -16,14 +18,25 @@
       class="example"
     />
     <div style="margin-left: 25%;margin-top: 40px;">
-      <label class="label" for="startValInput">startVal:
-        <input v-model.number="setStartVal" type="number" name="startValInput">
+      <label class="label" for="startValInput"
+        >startVal:
+        <input
+          v-model.number="setStartVal"
+          type="number"
+          name="startValInput"
+        />
       </label>
-      <label class="label" for="endValInput">endVal:
-        <input v-model.number="setEndVal" type="number" name="endVaInput">
+      <label class="label" for="endValInput"
+        >endVal:
+        <input v-model.number="setEndVal" type="number" name="endVaInput" />
       </label>
-      <label class="label" for="durationInput">duration:
-        <input v-model.number="setDuration" type="number" name="durationInput">
+      <label class="label" for="durationInput"
+        >duration:
+        <input
+          v-model.number="setDuration"
+          type="number"
+          name="durationInput"
+        />
       </label>
       <div class="startBtn example-btn" @click="start">
         Start
@@ -31,31 +44,45 @@
       <div class="pause-resume-btn example-btn" @click="pauseResume">
         pause/resume
       </div>
-      <br>
-      <label class="label" for="decimalsInput">decimals:
-        <input v-model.number="setDecimals" type="number" name="decimalsInput">
+      <br />
+      <label class="label" for="decimalsInput"
+        >decimals:
+        <input
+          v-model.number="setDecimals"
+          type="number"
+          name="decimalsInput"
+        />
       </label>
-      <label class="label" for="separatorInput">separator:
-        <input v-model="setSeparator" name="separatorInput">
+      <label class="label" for="separatorInput"
+        >separator:
+        <input v-model="setSeparator" name="separatorInput" />
       </label>
-      <label class="label" for="prefixInput">prefix:
-        <input v-model="setPrefix" name="prefixInput">
+      <label class="label" for="prefixInput"
+        >prefix:
+        <input v-model="setPrefix" name="prefixInput" />
       </label>
-      <label class="label" for="suffixInput">suffix:
-        <input v-model="setSuffix" name="suffixInput">
+      <label class="label" for="suffixInput"
+        >suffix:
+        <input v-model="setSuffix" name="suffixInput" />
       </label>
     </div>
-    <aside>&lt;count-to :start-val=&#x27;{{ _startVal }}&#x27; :end-val=&#x27;{{ _endVal }}&#x27; :duration=&#x27;{{ _duration }}&#x27;
-      :decimals=&#x27;{{ _decimals }}&#x27; :separator=&#x27;{{ _separator }}&#x27; :prefix=&#x27;{{ _prefix }}&#x27; :suffix=&#x27;{{ _suffix }}&#x27;
-      :autoplay=false&gt;</aside>
+    <aside>
+      &lt;count-to :start-val=&#x27;{{ _startVal }}&#x27; :end-val=&#x27;{{
+        _endVal
+      }}&#x27; :duration=&#x27;{{ _duration }}&#x27; :decimals=&#x27;{{
+        _decimals
+      }}&#x27; :separator=&#x27;{{ _separator }}&#x27; :prefix=&#x27;{{
+        _prefix
+      }}&#x27; :suffix=&#x27;{{ _suffix }}&#x27; :autoplay=false&gt;
+    </aside>
   </div>
 </template>
 
 <script>
-import countTo from 'vue-count-to'
+import countTo from "vue-count-to";
 
 export default {
-  name: 'CountToDemo',
+  name: "CountToDemo",
   components: { countTo },
   data() {
     return {
@@ -63,63 +90,63 @@ export default {
       setEndVal: 2017,
       setDuration: 4000,
       setDecimals: 0,
-      setSeparator: ',',
-      setSuffix: ' rmb',
-      setPrefix: '¥ '
-    }
+      setSeparator: ",",
+      setSuffix: " rmb",
+      setPrefix: "¥ "
+    };
   },
   computed: {
     _startVal() {
       if (this.setStartVal) {
-        return this.setStartVal
+        return this.setStartVal;
       } else {
-        return 0
+        return 0;
       }
     },
     _endVal() {
       if (this.setEndVal) {
-        return this.setEndVal
+        return this.setEndVal;
       } else {
-        return 0
+        return 0;
       }
     },
     _duration() {
       if (this.setDuration) {
-        return this.setDuration
+        return this.setDuration;
       } else {
-        return 100
+        return 100;
       }
     },
     _decimals() {
       if (this.setDecimals) {
         if (this.setDecimals < 0 || this.setDecimals > 20) {
-          alert('digits argument must be between 0 and 20')
-          return 0
+          alert("digits argument must be between 0 and 20");
+          return 0;
         }
-        return this.setDecimals
+        return this.setDecimals;
       } else {
-        return 0
+        return 0;
       }
     },
     _separator() {
-      return this.setSeparator
+      return this.setSeparator;
     },
     _suffix() {
-      return this.setSuffix
+      return this.setSuffix;
     },
     _prefix() {
-      return this.setPrefix
+      return this.setPrefix;
     }
   },
   methods: {
     start() {
-      this.$refs.example.start()
+      this.$refs.example.start();
     },
     pauseResume() {
-      this.$refs.example.pauseResume()
+      this.$refs.example.pauseResume();
     }
   }
-}
+};
 </script>
 
 <style scoped>
@@ -142,22 +169,22 @@ export default {
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  -webkit-transition: all .3s cubic-bezier(.645, .045, .355, 1);
-  transition: all .3s cubic-bezier(.645, .045, .355, 1);
+  -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
   position: relative;
-  color: rgba(0, 0, 0, .65);
+  color: rgba(0, 0, 0, 0.65);
   background-color: #fff;
   border-color: #d9d9d9;
 }
 
 .example-btn:hover {
-  color: #4AB7BD;
+  color: #4ab7bd;
   background-color: #fff;
-  border-color: #4AB7BD;
+  border-color: #4ab7bd;
 }
 .example {
   font-size: 50px;
-  color: #F6416C;
+  color: #f6416c;
   display: block;
   margin: 10px 0;
   text-align: center;
@@ -181,38 +208,37 @@ input {
   cursor: text;
   font-size: 12px;
   line-height: 1.5;
-  color: rgba(0, 0, 0, .65);
+  color: rgba(0, 0, 0, 0.65);
   background-color: #fff;
   background-image: none;
   border: 1px solid #d9d9d9;
   border-radius: 4px;
-  -webkit-transition: all .3s;
-  transition: all .3s;
+  -webkit-transition: all 0.3s;
+  transition: all 0.3s;
 }
 
 .startBtn {
   margin-left: 20px;
   font-size: 20px;
-  color: #30B08F;
+  color: #30b08f;
   background-color: #fff;
 }
 
 .startBtn:hover {
-  background-color: #30B08F;
+  background-color: #30b08f;
   color: #fff;
-  border-color: #30B08F;
+  border-color: #30b08f;
 }
 
 .pause-resume-btn {
   font-size: 20px;
-  color: #E65D6E;
+  color: #e65d6e;
   background-color: #fff;
 }
 
 .pause-resume-btn:hover {
-  background-color: #E65D6E;
+  background-color: #e65d6e;
   color: #fff;
-  border-color: #E65D6E;
+  border-color: #e65d6e;
 }
 </style>
-
diff --git a/src/views/components-demo/dnd-list.vue b/src/views/components-demo/dnd-list.vue
index e299fa68..61cfa114 100644
--- a/src/views/components-demo/dnd-list.vue
+++ b/src/views/components-demo/dnd-list.vue
@@ -1,39 +1,46 @@
 <template>
   <div class="components-container">
-    <aside>drag-list base on
-      <a href="https://github.com/SortableJS/Vue.Draggable" target="_blank">Vue.Draggable</a>
+    <aside>
+      drag-list base on
+      <a href="https://github.com/SortableJS/Vue.Draggable" target="_blank"
+        >Vue.Draggable</a
+      >
     </aside>
     <div class="editor-container">
-      <dnd-list :list1="list1" :list2="list2" list1-title="List" list2-title="Article pool" />
+      <dnd-list
+        :list1="list1"
+        :list2="list2"
+        list1-title="List"
+        list2-title="Article pool"
+      />
     </div>
   </div>
 </template>
 
 <script>
-import DndList from '@/components/DndList'
-import { fetchList } from '@/api/article'
+import DndList from "@/components/DndList";
+import { fetchList } from "@/api/article";
 
 export default {
-  name: 'DndListDemo',
+  name: "DndListDemo",
   components: { DndList },
   data() {
     return {
       list1: [],
       list2: []
-    }
+    };
   },
   created() {
-    this.getData()
+    this.getData();
   },
   methods: {
     getData() {
-      this.listLoading = true
+      this.listLoading = true;
       fetchList().then(response => {
-        this.list1 = response.data.items.splice(0, 5)
-        this.list2 = response.data.items
-      })
+        this.list1 = response.data.items.splice(0, 5);
+        this.list2 = response.data.items;
+      });
     }
   }
-}
+};
 </script>
-
diff --git a/src/views/components-demo/drag-dialog.vue b/src/views/components-demo/drag-dialog.vue
index c815b282..698239c8 100644
--- a/src/views/components-demo/drag-dialog.vue
+++ b/src/views/components-demo/drag-dialog.vue
@@ -3,9 +3,19 @@
     <el-button type="primary" @click="dialogTableVisible = true">
       open a Drag Dialog
     </el-button>
-    <el-dialog v-el-drag-dialog :visible.sync="dialogTableVisible" title="Shipping address" @dragDialog="handleDrag">
+    <el-dialog
+      v-el-drag-dialog
+      :visible.sync="dialogTableVisible"
+      title="Shipping address"
+      @dragDialog="handleDrag"
+    >
       <el-select ref="select" v-model="value" placeholder="请选择">
-        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+        <el-option
+          v-for="item in options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        />
       </el-select>
       <el-table :data="gridData">
         <el-table-column property="date" label="Date" width="150" />
@@ -17,45 +27,50 @@
 </template>
 
 <script>
-import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
+import elDragDialog from "@/directive/el-drag-dialog"; // base on element-ui
 
 export default {
-  name: 'DragDialogDemo',
+  name: "DragDialogDemo",
   directives: { elDragDialog },
   data() {
     return {
       dialogTableVisible: false,
       options: [
-        { value: '选项1', label: '黄金糕' },
-        { value: '选项2', label: '双皮奶' },
-        { value: '选项3', label: '蚵仔煎' },
-        { value: '选项4', label: '龙须面' }
+        { value: "选项1", label: "黄金糕" },
+        { value: "选项2", label: "双皮奶" },
+        { value: "选项3", label: "蚵仔煎" },
+        { value: "选项4", label: "龙须面" }
       ],
-      value: '',
-      gridData: [{
-        date: '2016-05-02',
-        name: 'John Smith',
-        address: 'No.1518,  Jinshajiang Road, Putuo District'
-      }, {
-        date: '2016-05-04',
-        name: 'John Smith',
-        address: 'No.1518,  Jinshajiang Road, Putuo District'
-      }, {
-        date: '2016-05-01',
-        name: 'John Smith',
-        address: 'No.1518,  Jinshajiang Road, Putuo District'
-      }, {
-        date: '2016-05-03',
-        name: 'John Smith',
-        address: 'No.1518,  Jinshajiang Road, Putuo District'
-      }]
-    }
+      value: "",
+      gridData: [
+        {
+          date: "2016-05-02",
+          name: "John Smith",
+          address: "No.1518,  Jinshajiang Road, Putuo District"
+        },
+        {
+          date: "2016-05-04",
+          name: "John Smith",
+          address: "No.1518,  Jinshajiang Road, Putuo District"
+        },
+        {
+          date: "2016-05-01",
+          name: "John Smith",
+          address: "No.1518,  Jinshajiang Road, Putuo District"
+        },
+        {
+          date: "2016-05-03",
+          name: "John Smith",
+          address: "No.1518,  Jinshajiang Road, Putuo District"
+        }
+      ]
+    };
   },
   methods: {
     // v-el-drag-dialog onDrag callback function
     handleDrag() {
-      this.$refs.select.blur()
+      this.$refs.select.blur();
     }
   }
-}
+};
 </script>
diff --git a/src/views/components-demo/drag-kanban.vue b/src/views/components-demo/drag-kanban.vue
index 943be455..7d732148 100644
--- a/src/views/components-demo/drag-kanban.vue
+++ b/src/views/components-demo/drag-kanban.vue
@@ -1,40 +1,58 @@
 <template>
   <div class="components-container board">
-    <Kanban :key="1" :list="list1" :group="group" class="kanban todo" header-text="Todo" />
-    <Kanban :key="2" :list="list2" :group="group" class="kanban working" header-text="Working" />
-    <Kanban :key="3" :list="list3" :group="group" class="kanban done" header-text="Done" />
+    <Kanban
+      :key="1"
+      :list="list1"
+      :group="group"
+      class="kanban todo"
+      header-text="Todo"
+    />
+    <Kanban
+      :key="2"
+      :list="list2"
+      :group="group"
+      class="kanban working"
+      header-text="Working"
+    />
+    <Kanban
+      :key="3"
+      :list="list3"
+      :group="group"
+      class="kanban done"
+      header-text="Done"
+    />
   </div>
 </template>
 <script>
-import Kanban from '@/components/Kanban'
+import Kanban from "@/components/Kanban";
 
 export default {
-  name: 'DragKanbanDemo',
+  name: "DragKanbanDemo",
   components: {
     Kanban
   },
   data() {
     return {
-      group: 'mission',
+      group: "mission",
       list1: [
-        { name: 'Mission', id: 1 },
-        { name: 'Mission', id: 2 },
-        { name: 'Mission', id: 3 },
-        { name: 'Mission', id: 4 }
+        { name: "Mission", id: 1 },
+        { name: "Mission", id: 2 },
+        { name: "Mission", id: 3 },
+        { name: "Mission", id: 4 }
       ],
       list2: [
-        { name: 'Mission', id: 5 },
-        { name: 'Mission', id: 6 },
-        { name: 'Mission', id: 7 }
+        { name: "Mission", id: 5 },
+        { name: "Mission", id: 6 },
+        { name: "Mission", id: 7 }
       ],
       list3: [
-        { name: 'Mission', id: 8 },
-        { name: 'Mission', id: 9 },
-        { name: 'Mission', id: 10 }
+        { name: "Mission", id: 8 },
+        { name: "Mission", id: 9 },
+        { name: "Mission", id: 10 }
       ]
-    }
+    };
   }
-}
+};
 </script>
 <style lang="scss">
 .board {
@@ -48,7 +66,7 @@ export default {
 .kanban {
   &.todo {
     .board-column-header {
-      background: #4A9FF9;
+      background: #4a9ff9;
     }
   }
   &.working {
@@ -63,4 +81,3 @@ export default {
   }
 }
 </style>
-
diff --git a/src/views/components-demo/drag-select.vue b/src/views/components-demo/drag-select.vue
index 905ecb94..6caa5ba9 100644
--- a/src/views/components-demo/drag-select.vue
+++ b/src/views/components-demo/drag-select.vue
@@ -1,7 +1,17 @@
 <template>
   <div class="components-container">
-    <el-drag-select v-model="value" style="width:500px;" multiple placeholder="请选择">
-      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+    <el-drag-select
+      v-model="value"
+      style="width:500px;"
+      multiple
+      placeholder="请选择"
+    >
+      <el-option
+        v-for="item in options"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+      />
     </el-drag-select>
 
     <div style="margin-top:30px;">
@@ -13,31 +23,37 @@
 </template>
 
 <script>
-import ElDragSelect from '@/components/DragSelect' // base on element-ui
+import ElDragSelect from "@/components/DragSelect"; // base on element-ui
 
 export default {
-  name: 'DragSelectDemo',
+  name: "DragSelectDemo",
   components: { ElDragSelect },
   data() {
     return {
-      value: ['Apple', 'Banana', 'Orange'],
-      options: [{
-        value: 'Apple',
-        label: 'Apple'
-      }, {
-        value: 'Banana',
-        label: 'Banana'
-      }, {
-        value: 'Orange',
-        label: 'Orange'
-      }, {
-        value: 'Pear',
-        label: 'Pear'
-      }, {
-        value: 'Strawberry',
-        label: 'Strawberry'
-      }]
-    }
+      value: ["Apple", "Banana", "Orange"],
+      options: [
+        {
+          value: "Apple",
+          label: "Apple"
+        },
+        {
+          value: "Banana",
+          label: "Banana"
+        },
+        {
+          value: "Orange",
+          label: "Orange"
+        },
+        {
+          value: "Pear",
+          label: "Pear"
+        },
+        {
+          value: "Strawberry",
+          label: "Strawberry"
+        }
+      ]
+    };
   }
-}
+};
 </script>
diff --git a/src/views/components-demo/dropzone.vue b/src/views/components-demo/dropzone.vue
index a8c10400..e70d78e4 100644
--- a/src/views/components-demo/dropzone.vue
+++ b/src/views/components-demo/dropzone.vue
@@ -1,31 +1,39 @@
 <template>
   <div class="components-container">
     <aside>
-      Based on <a class="link-type" href="https://github.com/rowanwins/vue-dropzone"> dropzone </a>.
-      Because my business has special needs, and has to upload images to qiniu, so instead of a third party, I chose encapsulate it by myself. It is very simple, you can see the detail code in @/components/Dropzone.
+      Based on
+      <a class="link-type" href="https://github.com/rowanwins/vue-dropzone">
+        dropzone </a
+      >. Because my business has special needs, and has to upload images to
+      qiniu, so instead of a third party, I chose encapsulate it by myself. It
+      is very simple, you can see the detail code in @/components/Dropzone.
     </aside>
     <div class="editor-container">
-      <dropzone id="myVueDropzone" url="https://httpbin.org/post" @dropzone-removedFile="dropzoneR" @dropzone-success="dropzoneS" />
+      <dropzone
+        id="myVueDropzone"
+        url="https://httpbin.org/post"
+        @dropzone-removedFile="dropzoneR"
+        @dropzone-success="dropzoneS"
+      />
     </div>
   </div>
 </template>
 
 <script>
-import Dropzone from '@/components/Dropzone'
+import Dropzone from "@/components/Dropzone";
 
 export default {
-  name: 'DropzoneDemo',
+  name: "DropzoneDemo",
   components: { Dropzone },
   methods: {
     dropzoneS(file) {
-      console.log(file)
-      this.$message({ message: 'Upload success', type: 'success' })
+      console.log(file);
+      this.$message({ message: "Upload success", type: "success" });
     },
     dropzoneR(file) {
-      console.log(file)
-      this.$message({ message: 'Delete success', type: 'success' })
+      console.log(file);
+      this.$message({ message: "Delete success", type: "success" });
     }
   }
-}
+};
 </script>
-
diff --git a/src/views/components-demo/json-editor.vue b/src/views/components-demo/json-editor.vue
index 85bf3834..e9d21ec6 100644
--- a/src/views/components-demo/json-editor.vue
+++ b/src/views/components-demo/json-editor.vue
@@ -1,10 +1,16 @@
 <template>
   <div class="components-container">
-    <aside>Json-Editor is base on <a href="https://github.com/codemirror/CodeMirror" target="_blank">CodeMirrorr</a>. Lint
-      base on <a
+    <aside>
+      Json-Editor is base on
+      <a href="https://github.com/codemirror/CodeMirror" target="_blank"
+        >CodeMirrorr</a
+      >. Lint base on
+      <a
         href="https://github.com/codemirror/CodeMirror/blob/master/addon/lint/json-lint.js"
         target="_blank"
-      >json-lint</a>.</aside>
+        >json-lint</a
+      >.
+    </aside>
     <div class="editor-container">
       <json-editor ref="jsonEditor" v-model="value" />
     </div>
@@ -12,25 +18,25 @@
 </template>
 
 <script>
-import JsonEditor from '@/components/JsonEditor'
+import JsonEditor from "@/components/JsonEditor";
 
-const jsonData = '[{"items":[{"market_type":"forexdata","symbol":"XAUUSD"},{"market_type":"forexdata","symbol":"UKOIL"},{"market_type":"forexdata","symbol":"CORN"}],"name":""},{"items":[{"market_type":"forexdata","symbol":"XAUUSD"},{"market_type":"forexdata","symbol":"XAGUSD"},{"market_type":"forexdata","symbol":"AUTD"},{"market_type":"forexdata","symbol":"AGTD"}],"name":"贵金属"},{"items":[{"market_type":"forexdata","symbol":"CORN"},{"market_type":"forexdata","symbol":"WHEAT"},{"market_type":"forexdata","symbol":"SOYBEAN"},{"market_type":"forexdata","symbol":"SUGAR"}],"name":"农产品"},{"items":[{"market_type":"forexdata","symbol":"UKOIL"},{"market_type":"forexdata","symbol":"USOIL"},{"market_type":"forexdata","symbol":"NGAS"}],"name":"能源化工"}]'
+const jsonData =
+  '[{"items":[{"market_type":"forexdata","symbol":"XAUUSD"},{"market_type":"forexdata","symbol":"UKOIL"},{"market_type":"forexdata","symbol":"CORN"}],"name":""},{"items":[{"market_type":"forexdata","symbol":"XAUUSD"},{"market_type":"forexdata","symbol":"XAGUSD"},{"market_type":"forexdata","symbol":"AUTD"},{"market_type":"forexdata","symbol":"AGTD"}],"name":"贵金属"},{"items":[{"market_type":"forexdata","symbol":"CORN"},{"market_type":"forexdata","symbol":"WHEAT"},{"market_type":"forexdata","symbol":"SOYBEAN"},{"market_type":"forexdata","symbol":"SUGAR"}],"name":"农产品"},{"items":[{"market_type":"forexdata","symbol":"UKOIL"},{"market_type":"forexdata","symbol":"USOIL"},{"market_type":"forexdata","symbol":"NGAS"}],"name":"能源化工"}]';
 
 export default {
-  name: 'JsonEditorDemo',
+  name: "JsonEditorDemo",
   components: { JsonEditor },
   data() {
     return {
       value: JSON.parse(jsonData)
-    }
+    };
   }
-}
+};
 </script>
 
 <style scoped>
-.editor-container{
+.editor-container {
   position: relative;
   height: 100%;
 }
 </style>
-
diff --git a/src/views/components-demo/markdown.vue b/src/views/components-demo/markdown.vue
index 25cf3e37..4ad7f9a7 100644
--- a/src/views/components-demo/markdown.vue
+++ b/src/views/components-demo/markdown.vue
@@ -1,12 +1,17 @@
 <template>
   <div class="components-container">
-    <aside>Markdown is based on
-      <a href="https://github.com/nhnent/tui.editor" target="_blank">tui.editor</a> ，simply wrapped with Vue.
+    <aside>
+      Markdown is based on
+      <a href="https://github.com/nhnent/tui.editor" target="_blank"
+        >tui.editor</a
+      >
+      ，simply wrapped with Vue.
       <a
         target="_blank"
         href="https://panjiachen.github.io/vue-element-admin-site/feature/component/markdown-editor.html"
       >
-        Documentation </a>
+        Documentation
+      </a>
     </aside>
 
     <div class="editor-container">
@@ -20,14 +25,22 @@
       <el-tag class="tag-title">
         Markdown Mode:
       </el-tag>
-      <markdown-editor ref="markdownEditor" v-model="content2" :options="{hideModeSwitch:true,previewStyle:'tab'}" height="200px" />
+      <markdown-editor
+        ref="markdownEditor"
+        v-model="content2"
+        :options="{ hideModeSwitch: true, previewStyle: 'tab' }"
+        height="200px"
+      />
     </div>
 
     <div class="editor-container">
       <el-tag class="tag-title">
         Customize Toolbar:
       </el-tag>
-      <markdown-editor v-model="content3" :options="{ toolbarItems: ['heading','bold','italic']}" />
+      <markdown-editor
+        v-model="content3"
+        :options="{ toolbarItems: ['heading', 'bold', 'italic'] }"
+      />
     </div>
 
     <div class="editor-container">
@@ -39,10 +52,20 @@
         title="You can change the language of the admin system to see the effect"
         type="success"
       />
-      <markdown-editor ref="markdownEditor" v-model="content4" :language="language" height="300px" />
+      <markdown-editor
+        ref="markdownEditor"
+        v-model="content4"
+        :language="language"
+        height="300px"
+      />
     </div>
 
-    <el-button style="margin-top:80px;" type="primary" icon="el-icon-document" @click="getHtml">
+    <el-button
+      style="margin-top:80px;"
+      type="primary"
+      icon="el-icon-document"
+      @click="getHtml"
+    >
       Get HTML
     </el-button>
     <div v-html="html" />
@@ -50,7 +73,7 @@
 </template>
 
 <script>
-import MarkdownEditor from '@/components/MarkdownEditor'
+import MarkdownEditor from "@/components/MarkdownEditor";
 
 const content = `
 **This is test**
@@ -59,9 +82,9 @@ const content = `
 * element
 * webpack
 
-`
+`;
 export default {
-  name: 'MarkdownDemo',
+  name: "MarkdownDemo",
   components: { MarkdownEditor },
   data() {
     return {
@@ -69,33 +92,33 @@ export default {
       content2: content,
       content3: content,
       content4: content,
-      html: '',
+      html: "",
       languageTypeList: {
-        'en': 'en_US',
-        'zh': 'zh_CN',
-        'es': 'es_ES'
+        en: "en_US",
+        zh: "zh_CN",
+        es: "es_ES"
       }
-    }
+    };
   },
   computed: {
     language() {
-      return this.languageTypeList['en']
+      return this.languageTypeList["en"];
     }
   },
   methods: {
     getHtml() {
-      this.html = this.$refs.markdownEditor.getHtml()
-      console.log(this.html)
+      this.html = this.$refs.markdownEditor.getHtml();
+      console.log(this.html);
     }
   }
-}
+};
 </script>
 
 <style scoped>
-.editor-container{
+.editor-container {
   margin-bottom: 30px;
 }
-.tag-title{
+.tag-title {
   margin-bottom: 5px;
 }
 </style>
diff --git a/src/views/components-demo/mixin.vue b/src/views/components-demo/mixin.vue
index c64a073a..4d3ca773 100644
--- a/src/views/components-demo/mixin.vue
+++ b/src/views/components-demo/mixin.vue
@@ -49,7 +49,12 @@
           <div style="height:100px;">
             <el-form :model="demo" :rules="demoRules">
               <el-form-item prop="title">
-                <md-input v-model="demo.title" icon="search" name="title" placeholder="输入标题">
+                <md-input
+                  v-model="demo.title"
+                  icon="search"
+                  name="title"
+                  placeholder="输入标题"
+                >
                   标题
                 </md-input>
               </el-form-item>
@@ -64,7 +69,11 @@
             <span>图片hover效果</span>
           </div>
           <div class="component-item">
-            <pan-thumb width="100px" height="100px" image="https://wpimg.wallstcn.com/577965b9-bb9e-4e02-9f0c-095b41417191">
+            <pan-thumb
+              width="100px"
+              height="100px"
+              image="https://wpimg.wallstcn.com/577965b9-bb9e-4e02-9f0c-095b41417191"
+            >
               vue-element-admin
             </pan-thumb>
           </div>
@@ -103,7 +112,11 @@
             <span>Share</span>
           </div>
           <div class="component-item" style="height:420px;">
-            <dropdown-menu :items="articleList" style="margin:0 auto;" title="系列文章" />
+            <dropdown-menu
+              :items="articleList"
+              style="margin:0 auto;"
+              title="系列文章"
+            />
           </div>
         </el-card>
       </el-col>
@@ -112,14 +125,14 @@
 </template>
 
 <script>
-import PanThumb from '@/components/PanThumb'
-import MdInput from '@/components/MDinput'
-import Mallki from '@/components/TextHoverEffect/Mallki'
-import DropdownMenu from '@/components/Share/DropdownMenu'
-import waves from '@/directive/waves/index.js' // 水波纹指令
+import PanThumb from "@/components/PanThumb";
+import MdInput from "@/components/MDinput";
+import Mallki from "@/components/TextHoverEffect/Mallki";
+import DropdownMenu from "@/components/Share/DropdownMenu";
+import waves from "@/directive/waves/index.js"; // 水波纹指令
 
 export default {
-  name: 'ComponentMixinDemo',
+  name: "ComponentMixinDemo",
   components: {
     PanThumb,
     MdInput,
@@ -132,29 +145,47 @@ export default {
   data() {
     const validate = (rule, value, callback) => {
       if (value.length !== 6) {
-        callback(new Error('请输入六个字符'))
+        callback(new Error("请输入六个字符"));
       } else {
-        callback()
+        callback();
       }
-    }
+    };
     return {
       demo: {
-        title: ''
+        title: ""
       },
       demoRules: {
-        title: [{ required: true, trigger: 'change', validator: validate }]
+        title: [{ required: true, trigger: "change", validator: validate }]
       },
       articleList: [
-        { title: '基础篇', href: 'https://juejin.im/post/59097cd7a22b9d0065fb61d2' },
-        { title: '登录权限篇', href: 'https://juejin.im/post/591aa14f570c35006961acac' },
-        { title: '实战篇', href: 'https://juejin.im/post/593121aa0ce4630057f70d35' },
-        { title: 'vue-admin-template 篇', href: 'https://juejin.im/post/595b4d776fb9a06bbe7dba56' },
-        { title: 'v4.0 篇', href: 'https://juejin.im/post/5c92ff94f265da6128275a85' },
-        { title: '优雅的使用 icon', href: 'https://juejin.im/post/59bb864b5188257e7a427c09' }
+        {
+          title: "基础篇",
+          href: "https://juejin.im/post/59097cd7a22b9d0065fb61d2"
+        },
+        {
+          title: "登录权限篇",
+          href: "https://juejin.im/post/591aa14f570c35006961acac"
+        },
+        {
+          title: "实战篇",
+          href: "https://juejin.im/post/593121aa0ce4630057f70d35"
+        },
+        {
+          title: "vue-admin-template 篇",
+          href: "https://juejin.im/post/595b4d776fb9a06bbe7dba56"
+        },
+        {
+          title: "v4.0 篇",
+          href: "https://juejin.im/post/5c92ff94f265da6128275a85"
+        },
+        {
+          title: "优雅的使用 icon",
+          href: "https://juejin.im/post/59bb864b5188257e7a427c09"
+        }
       ]
-    }
+    };
   }
-}
+};
 </script>
 
 <style scoped>
@@ -163,7 +194,7 @@ export default {
   padding: 30px;
   min-height: calc(100vh - 84px);
 }
-.component-item{
+.component-item {
   min-height: 100px;
 }
 </style>
diff --git a/src/views/components-demo/split-pane.vue b/src/views/components-demo/split-pane.vue
index 7dba353f..59ba5995 100644
--- a/src/views/components-demo/split-pane.vue
+++ b/src/views/components-demo/split-pane.vue
@@ -1,9 +1,13 @@
 <template>
   <div class="components-container">
-    <aside><strong>SplitPane</strong> If you've used
+    <aside>
+      <strong>SplitPane</strong> If you've used
       <a href="https://codepen.io/" target="_blank"> codepen</a>,
-      <a href="https://jsfiddle.net/" target="_blank"> jsfiddle </a>will not be unfamiliar.
-      <a href="https://github.com/PanJiaChen/vue-split-pane" target="_blank"> Github repository</a>
+      <a href="https://jsfiddle.net/" target="_blank"> jsfiddle </a>will not be
+      unfamiliar.
+      <a href="https://github.com/PanJiaChen/vue-split-pane" target="_blank">
+        Github repository</a
+      >
     </aside>
     <split-pane split="vertical" @resize="resize">
       <template slot="paneL">
@@ -24,44 +28,44 @@
 </template>
 
 <script>
-import splitPane from 'vue-splitpane'
+import splitPane from "vue-splitpane";
 
 export default {
-  name: 'SplitpaneDemo',
+  name: "SplitpaneDemo",
   components: { splitPane },
   methods: {
     resize() {
-      console.log('resize')
+      console.log("resize");
     }
   }
-}
+};
 </script>
 
-<style  scoped>
-  .components-container {
-    position: relative;
-    height: 100vh;
-  }
+<style scoped>
+.components-container {
+  position: relative;
+  height: 100vh;
+}
 
-  .left-container {
-    background-color: #F38181;
-    height: 100%;
-  }
+.left-container {
+  background-color: #f38181;
+  height: 100%;
+}
 
-  .right-container {
-    background-color: #FCE38A;
-    height: 200px;
-  }
+.right-container {
+  background-color: #fce38a;
+  height: 200px;
+}
 
-  .top-container {
-    background-color: #FCE38A;
-    width: 100%;
-    height: 100%;
-  }
+.top-container {
+  background-color: #fce38a;
+  width: 100%;
+  height: 100%;
+}
 
-  .bottom-container {
-    width: 100%;
-    background-color: #95E1D3;
-    height: 100%;
-  }
+.bottom-container {
+  width: 100%;
+  background-color: #95e1d3;
+  height: 100%;
+}
 </style>
diff --git a/src/views/components-demo/sticky.vue b/src/views/components-demo/sticky.vue
index f01d088a..882c6c3f 100644
--- a/src/views/components-demo/sticky.vue
+++ b/src/views/components-demo/sticky.vue
@@ -7,7 +7,11 @@
         </el-button>
         <el-dropdown-menu slot="dropdown" class="no-border">
           <el-checkbox-group v-model="platforms" style="padding: 5px 15px;">
-            <el-checkbox v-for="item in platformsOptions" :key="item.key" :label="item.key">
+            <el-checkbox
+              v-for="item in platformsOptions"
+              :key="item.key"
+              :label="item.key"
+            >
               {{ item.name }}
             </el-checkbox>
           </el-checkbox-group>
@@ -18,7 +22,11 @@
         <el-button plain>
           Link<i class="el-icon-caret-bottom el-icon--right" />
         </el-button>
-        <el-dropdown-menu slot="dropdown" class="no-padding no-border" style="width:300px">
+        <el-dropdown-menu
+          slot="dropdown"
+          class="no-padding no-border"
+          style="width:300px"
+        >
           <el-input v-model="url" placeholder="Please enter the content">
             <template slot="prepend">
               Url
@@ -28,7 +36,12 @@
       </el-dropdown>
 
       <div class="time-container">
-        <el-date-picker v-model="time" type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="Release time" />
+        <el-date-picker
+          v-model="time"
+          type="datetime"
+          format="yyyy-MM-dd HH:mm:ss"
+          placeholder="Release time"
+        />
       </div>
 
       <el-button style="margin-left: 10px;" type="success">
@@ -38,7 +51,8 @@
 
     <div class="components-container">
       <aside>
-        Sticky header, When the page is scrolled to the preset position will be sticky on the top.
+        Sticky header, When the page is scrolled to the preset position will be
+        sticky on the top.
       </aside>
       <div>placeholder</div>
       <div>placeholder</div>
@@ -99,29 +113,29 @@
 </template>
 
 <script>
-import Sticky from '@/components/Sticky'
+import Sticky from "@/components/Sticky";
 
 export default {
-  name: 'StickyDemo',
+  name: "StickyDemo",
   components: { Sticky },
   data() {
     return {
-      time: '',
-      url: '',
-      platforms: ['a-platform'],
+      time: "",
+      url: "",
+      platforms: ["a-platform"],
       platformsOptions: [
-        { key: 'a-platform', name: 'platformA' },
-        { key: 'b-platform', name: 'platformB' },
-        { key: 'c-platform', name: 'platformC' }
+        { key: "a-platform", name: "platformA" },
+        { key: "b-platform", name: "platformB" },
+        { key: "c-platform", name: "platformC" }
       ],
       pickerOptions: {
         disabledDate(time) {
-          return time.getTime() > Date.now()
+          return time.getTime() > Date.now();
         }
       }
-    }
+    };
   }
-}
+};
 </script>
 
 <style scoped>
diff --git a/src/views/components-demo/tinymce.vue b/src/views/components-demo/tinymce.vue
index c70179fa..aa1a9d84 100644
--- a/src/views/components-demo/tinymce.vue
+++ b/src/views/components-demo/tinymce.vue
@@ -1,8 +1,17 @@
 <template>
   <div class="components-container">
     <aside>
-      Rich text is a core feature of the management backend, but at the same time it is a place with lots of pits. In the process of selecting rich texts, I also took a lot of detours. The common rich texts on the market have been basically used, and I finally chose Tinymce. See the more detailed rich text comparison and introduction.
-      <a target="_blank" class="link-type" href="https://panjiachen.github.io/vue-element-admin-site/component/rich-editor.html">Documentation</a>
+      Rich text is a core feature of the management backend, but at the same
+      time it is a place with lots of pits. In the process of selecting rich
+      texts, I also took a lot of detours. The common rich texts on the market
+      have been basically used, and I finally chose Tinymce. See the more
+      detailed rich text comparison and introduction.
+      <a
+        target="_blank"
+        class="link-type"
+        href="https://panjiachen.github.io/vue-element-admin-site/component/rich-editor.html"
+        >Documentation</a
+      >
     </aside>
     <div>
       <tinymce v-model="content" :height="300" />
@@ -12,25 +21,23 @@
 </template>
 
 <script>
-import Tinymce from '@/components/Tinymce'
+import Tinymce from "@/components/Tinymce";
 
 export default {
-  name: 'TinymceDemo',
+  name: "TinymceDemo",
   components: { Tinymce },
   data() {
     return {
-      content:
-      `<h1 style="text-align: center;">Welcome to the TinyMCE demo!</h1><p style="text-align: center; font-size: 15px;"><img title="TinyMCE Logo" src="//www.tinymce.com/images/glyph-tinymce@2x.png" alt="TinyMCE Logo" width="110" height="97" /><ul>
+      content: `<h1 style="text-align: center;">Welcome to the TinyMCE demo!</h1><p style="text-align: center; font-size: 15px;"><img title="TinyMCE Logo" src="//www.tinymce.com/images/glyph-tinymce@2x.png" alt="TinyMCE Logo" width="110" height="97" /><ul>
         <li>Our <a href="//www.tinymce.com/docs/">documentation</a> is a great resource for learning how to configure TinyMCE.</li><li>Have a specific question? Visit the <a href="https://community.tinymce.com/forum/">Community Forum</a>.</li><li>We also offer enterprise grade support as part of <a href="https://tinymce.com/pricing">TinyMCE premium subscriptions</a>.</li>
       </ul>`
-    }
+    };
   }
-}
+};
 </script>
 
 <style scoped>
-.editor-content{
+.editor-content {
   margin-top: 20px;
 }
 </style>
-
diff --git a/src/views/dashboard/admin/components/BarChart.vue b/src/views/dashboard/admin/components/BarChart.vue
index be0af34f..df33a08e 100644
--- a/src/views/dashboard/admin/components/BarChart.vue
+++ b/src/views/dashboard/admin/components/BarChart.vue
@@ -1,102 +1,111 @@
 <template>
-  <div :class="className" :style="{height:height,width:width}" />
+  <div :class="className" :style="{ height: height, width: width }" />
 </template>
 
 <script>
-import echarts from 'echarts'
-require('echarts/theme/macarons') // echarts theme
-import resize from './mixins/resize'
+import echarts from "echarts";
+require("echarts/theme/macarons"); // echarts theme
+import resize from "./mixins/resize";
 
-const animationDuration = 6000
+const animationDuration = 6000;
 
 export default {
   mixins: [resize],
   props: {
     className: {
       type: String,
-      default: 'chart'
+      default: "chart"
     },
     width: {
       type: String,
-      default: '100%'
+      default: "100%"
     },
     height: {
       type: String,
-      default: '300px'
+      default: "300px"
     }
   },
   data() {
     return {
       chart: null
-    }
+    };
   },
   mounted() {
     this.$nextTick(() => {
-      this.initChart()
-    })
+      this.initChart();
+    });
   },
   beforeDestroy() {
     if (!this.chart) {
-      return
+      return;
     }
-    this.chart.dispose()
-    this.chart = null
+    this.chart.dispose();
+    this.chart = null;
   },
   methods: {
     initChart() {
-      this.chart = echarts.init(this.$el, 'macarons')
+      this.chart = echarts.init(this.$el, "macarons");
 
       this.chart.setOption({
         tooltip: {
-          trigger: 'axis',
-          axisPointer: { // 坐标轴指示器，坐标轴触发有效
-            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+          trigger: "axis",
+          axisPointer: {
+            // 坐标轴指示器，坐标轴触发有效
+            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
           }
         },
         grid: {
           top: 10,
-          left: '2%',
-          right: '2%',
-          bottom: '3%',
+          left: "2%",
+          right: "2%",
+          bottom: "3%",
           containLabel: true
         },
-        xAxis: [{
-          type: 'category',
-          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-          axisTick: {
-            alignWithLabel: true
+        xAxis: [
+          {
+            type: "category",
+            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+            axisTick: {
+              alignWithLabel: true
+            }
           }
-        }],
-        yAxis: [{
-          type: 'value',
-          axisTick: {
-            show: false
+        ],
+        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
-        }]
-      })
+        ],
+        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
index dff8462a..9e9caf7a 100644
--- a/src/views/dashboard/admin/components/BoxCard.vue
+++ b/src/views/dashboard/admin/components/BoxCard.vue
@@ -1,7 +1,9 @@
 <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">
+      <img
+        src="https://wpimg.wallstcn.com/e7d23d71-cf19-4b90-a1cc-f56af8c0903d.png"
+      />
     </div>
     <div style="position:relative;">
       <pan-thumb :image="avatar" class="panThumb" />
@@ -27,9 +29,9 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
-import PanThumb from '@/components/PanThumb'
-import Mallki from '@/components/TextHoverEffect/Mallki'
+import { mapGetters } from "vuex";
+import PanThumb from "@/components/PanThumb";
+import Mallki from "@/components/TextHoverEffect/Mallki";
 
 export default {
   components: { PanThumb, Mallki },
@@ -37,10 +39,10 @@ export default {
   filters: {
     statusFilter(status) {
       const statusMap = {
-        success: 'success',
-        pending: 'danger'
-      }
-      return statusMap[status]
+        success: "success",
+        pending: "danger"
+      };
+      return statusMap[status];
     }
   },
   data() {
@@ -49,22 +51,18 @@ export default {
         article_count: 1024,
         pageviews_count: 1024
       }
-    }
+    };
   },
   computed: {
-    ...mapGetters([
-      'name',
-      'avatar',
-      'roles'
-    ])
+    ...mapGetters(["name", "avatar", "roles"])
   }
-}
+};
 </script>
 
-<style lang="scss" >
-.box-card-component{
+<style lang="scss">
+.box-card-component {
   .el-card__header {
-    padding: 0px!important;
+    padding: 0px !important;
   }
 }
 </style>
@@ -92,25 +90,25 @@ export default {
   }
   .panThumb {
     z-index: 100;
-    height: 70px!important;
-    width: 70px!important;
-    position: absolute!important;
+    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;
-    /deep/ .pan-info {
-      box-shadow: none!important;
+    box-shadow: none !important;
+    ::v-deep .pan-info {
+      box-shadow: none !important;
     }
   }
   .progress-item {
     margin-bottom: 10px;
     font-size: 14px;
   }
-  @media only screen and (max-width: 1510px){
-    .mallki-text{
+  @media only screen and (max-width: 1510px) {
+    .mallki-text {
       display: none;
     }
   }
diff --git a/src/views/dashboard/admin/components/LineChart.vue b/src/views/dashboard/admin/components/LineChart.vue
index e654168d..e8cdf897 100644
--- a/src/views/dashboard/admin/components/LineChart.vue
+++ b/src/views/dashboard/admin/components/LineChart.vue
@@ -1,26 +1,26 @@
 <template>
-  <div :class="className" :style="{height:height,width:width}" />
+  <div :class="className" :style="{ height: height, width: width }" />
 </template>
 
 <script>
-import echarts from 'echarts'
-require('echarts/theme/macarons') // echarts theme
-import resize from './mixins/resize'
+import echarts from "echarts";
+require("echarts/theme/macarons"); // echarts theme
+import resize from "./mixins/resize";
 
 export default {
   mixins: [resize],
   props: {
     className: {
       type: String,
-      default: 'chart'
+      default: "chart"
     },
     width: {
       type: String,
-      default: '100%'
+      default: "100%"
     },
     height: {
       type: String,
-      default: '350px'
+      default: "350px"
     },
     autoResize: {
       type: Boolean,
@@ -34,37 +34,37 @@ export default {
   data() {
     return {
       chart: null
-    }
+    };
   },
   watch: {
     chartData: {
       deep: true,
       handler(val) {
-        this.setOptions(val)
+        this.setOptions(val);
       }
     }
   },
   mounted() {
     this.$nextTick(() => {
-      this.initChart()
-    })
+      this.initChart();
+    });
   },
   beforeDestroy() {
     if (!this.chart) {
-      return
+      return;
     }
-    this.chart.dispose()
-    this.chart = null
+    this.chart.dispose();
+    this.chart = null;
   },
   methods: {
     initChart() {
-      this.chart = echarts.init(this.$el, 'macarons')
-      this.setOptions(this.chartData)
+      this.chart = echarts.init(this.$el, "macarons");
+      this.setOptions(this.chartData);
     },
     setOptions({ expectedData, actualData } = {}) {
       this.chart.setOption({
         xAxis: {
-          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
           boundaryGap: false,
           axisTick: {
             show: false
@@ -78,9 +78,9 @@ export default {
           containLabel: true
         },
         tooltip: {
-          trigger: 'axis',
+          trigger: "axis",
           axisPointer: {
-            type: 'cross'
+            type: "cross"
           },
           padding: [5, 10]
         },
@@ -90,46 +90,49 @@ export default {
           }
         },
         legend: {
-          data: ['expected', 'actual']
+          data: ["expected", "actual"]
         },
-        series: [{
-          name: 'expected', itemStyle: {
-            normal: {
-              color: '#FF005A',
-              lineStyle: {
-                color: '#FF005A',
-                width: 2
+        series: [
+          {
+            name: "expected",
+            itemStyle: {
+              normal: {
+                color: "#FF005A",
+                lineStyle: {
+                  color: "#FF005A",
+                  width: 2
+                }
               }
-            }
+            },
+            smooth: true,
+            type: "line",
+            data: expectedData,
+            animationDuration: 2800,
+            animationEasing: "cubicInOut"
           },
-          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'
+          {
+            name: "actual",
+            smooth: true,
+            type: "line",
+            itemStyle: {
+              normal: {
+                color: "#3888fa",
+                lineStyle: {
+                  color: "#3888fa",
+                  width: 2
+                },
+                areaStyle: {
+                  color: "#f3f8ff"
+                }
               }
-            }
-          },
-          data: actualData,
-          animationDuration: 2800,
-          animationEasing: 'quadraticOut'
-        }]
-      })
+            },
+            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
index 589236ed..49ffc004 100644
--- a/src/views/dashboard/admin/components/PanelGroup.vue
+++ b/src/views/dashboard/admin/components/PanelGroup.vue
@@ -9,7 +9,12 @@
           <div class="card-panel-text">
             New Visits
           </div>
-          <count-to :start-val="0" :end-val="102400" :duration="2600" class="card-panel-num" />
+          <count-to
+            :start-val="0"
+            :end-val="102400"
+            :duration="2600"
+            class="card-panel-num"
+          />
         </div>
       </div>
     </el-col>
@@ -22,7 +27,12 @@
           <div class="card-panel-text">
             Messages
           </div>
-          <count-to :start-val="0" :end-val="81212" :duration="3000" class="card-panel-num" />
+          <count-to
+            :start-val="0"
+            :end-val="81212"
+            :duration="3000"
+            class="card-panel-num"
+          />
         </div>
       </div>
     </el-col>
@@ -35,7 +45,12 @@
           <div class="card-panel-text">
             Purchases
           </div>
-          <count-to :start-val="0" :end-val="9280" :duration="3200" class="card-panel-num" />
+          <count-to
+            :start-val="0"
+            :end-val="9280"
+            :duration="3200"
+            class="card-panel-num"
+          />
         </div>
       </div>
     </el-col>
@@ -48,7 +63,12 @@
           <div class="card-panel-text">
             Shoppings
           </div>
-          <count-to :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num" />
+          <count-to
+            :start-val="0"
+            :end-val="13600"
+            :duration="3600"
+            class="card-panel-num"
+          />
         </div>
       </div>
     </el-col>
@@ -56,7 +76,7 @@
 </template>
 
 <script>
-import CountTo from 'vue-count-to'
+import CountTo from "vue-count-to";
 
 export default {
   components: {
@@ -64,10 +84,10 @@ export default {
   },
   methods: {
     handleSetLineChartData(type) {
-      this.$emit('handleSetLineChartData', type)
+      this.$emit("handleSetLineChartData", type);
     }
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>
@@ -86,8 +106,8 @@ export default {
     overflow: hidden;
     color: #666;
     background: #fff;
-    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
-    border-color: rgba(0, 0, 0, .05);
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
+    border-color: rgba(0, 0, 0, 0.05);
 
     &:hover {
       .card-panel-icon-wrapper {
@@ -107,7 +127,7 @@ export default {
       }
 
       .icon-shopping {
-        background: #34bfa3
+        background: #34bfa3;
       }
     }
 
@@ -124,7 +144,7 @@ export default {
     }
 
     .icon-shopping {
-      color: #34bfa3
+      color: #34bfa3;
     }
 
     .card-panel-icon-wrapper {
@@ -160,7 +180,7 @@ export default {
   }
 }
 
-@media (max-width:550px) {
+@media (max-width: 550px) {
   .card-panel-description {
     display: none;
   }
diff --git a/src/views/dashboard/admin/components/PieChart.vue b/src/views/dashboard/admin/components/PieChart.vue
index 4d2ef32a..cd81bc02 100644
--- a/src/views/dashboard/admin/components/PieChart.vue
+++ b/src/views/dashboard/admin/components/PieChart.vue
@@ -1,79 +1,79 @@
 <template>
-  <div :class="className" :style="{height:height,width:width}" />
+  <div :class="className" :style="{ height: height, width: width }" />
 </template>
 
 <script>
-import echarts from 'echarts'
-require('echarts/theme/macarons') // echarts theme
-import resize from './mixins/resize'
+import echarts from "echarts";
+require("echarts/theme/macarons"); // echarts theme
+import resize from "./mixins/resize";
 
 export default {
   mixins: [resize],
   props: {
     className: {
       type: String,
-      default: 'chart'
+      default: "chart"
     },
     width: {
       type: String,
-      default: '100%'
+      default: "100%"
     },
     height: {
       type: String,
-      default: '300px'
+      default: "300px"
     }
   },
   data() {
     return {
       chart: null
-    }
+    };
   },
   mounted() {
     this.$nextTick(() => {
-      this.initChart()
-    })
+      this.initChart();
+    });
   },
   beforeDestroy() {
     if (!this.chart) {
-      return
+      return;
     }
-    this.chart.dispose()
-    this.chart = null
+    this.chart.dispose();
+    this.chart = null;
   },
   methods: {
     initChart() {
-      this.chart = echarts.init(this.$el, 'macarons')
+      this.chart = echarts.init(this.$el, "macarons");
 
       this.chart.setOption({
         tooltip: {
-          trigger: 'item',
-          formatter: '{a} <br/>{b} : {c} ({d}%)'
+          trigger: "item",
+          formatter: "{a} <br/>{b} : {c} ({d}%)"
         },
         legend: {
-          left: 'center',
-          bottom: '10',
-          data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts']
+          left: "center",
+          bottom: "10",
+          data: ["Industries", "Technology", "Forex", "Gold", "Forecasts"]
         },
         series: [
           {
-            name: 'WEEKLY WRITE ARTICLES',
-            type: 'pie',
-            roseType: 'radius',
+            name: "WEEKLY WRITE ARTICLES",
+            type: "pie",
+            roseType: "radius",
             radius: [15, 95],
-            center: ['50%', '38%'],
+            center: ["50%", "38%"],
             data: [
-              { value: 320, name: 'Industries' },
-              { value: 240, name: 'Technology' },
-              { value: 149, name: 'Forex' },
-              { value: 100, name: 'Gold' },
-              { value: 59, name: 'Forecasts' }
+              { value: 320, name: "Industries" },
+              { value: 240, name: "Technology" },
+              { value: 149, name: "Forex" },
+              { value: 100, name: "Gold" },
+              { value: 59, name: "Forecasts" }
             ],
-            animationEasing: 'cubicInOut',
+            animationEasing: "cubicInOut",
             animationDuration: 2600
           }
         ]
-      })
+      });
     }
   }
-}
+};
 </script>
diff --git a/src/views/dashboard/admin/components/RaddarChart.vue b/src/views/dashboard/admin/components/RaddarChart.vue
index 6823af31..bf0e1cd6 100644
--- a/src/views/dashboard/admin/components/RaddarChart.vue
+++ b/src/views/dashboard/admin/components/RaddarChart.vue
@@ -1,116 +1,119 @@
 <template>
-  <div :class="className" :style="{height:height,width:width}" />
+  <div :class="className" :style="{ height: height, width: width }" />
 </template>
 
 <script>
-import echarts from 'echarts'
-require('echarts/theme/macarons') // echarts theme
-import resize from './mixins/resize'
+import echarts from "echarts";
+require("echarts/theme/macarons"); // echarts theme
+import resize from "./mixins/resize";
 
-const animationDuration = 3000
+const animationDuration = 3000;
 
 export default {
   mixins: [resize],
   props: {
     className: {
       type: String,
-      default: 'chart'
+      default: "chart"
     },
     width: {
       type: String,
-      default: '100%'
+      default: "100%"
     },
     height: {
       type: String,
-      default: '300px'
+      default: "300px"
     }
   },
   data() {
     return {
       chart: null
-    }
+    };
   },
   mounted() {
     this.$nextTick(() => {
-      this.initChart()
-    })
+      this.initChart();
+    });
   },
   beforeDestroy() {
     if (!this.chart) {
-      return
+      return;
     }
-    this.chart.dispose()
-    this.chart = null
+    this.chart.dispose();
+    this.chart = null;
   },
   methods: {
     initChart() {
-      this.chart = echarts.init(this.$el, 'macarons')
+      this.chart = echarts.init(this.$el, "macarons");
 
       this.chart.setOption({
         tooltip: {
-          trigger: 'axis',
-          axisPointer: { // 坐标轴指示器，坐标轴触发有效
-            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+          trigger: "axis",
+          axisPointer: {
+            // 坐标轴指示器，坐标轴触发有效
+            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
           }
         },
         radar: {
-          radius: '66%',
-          center: ['50%', '42%'],
+          radius: "66%",
+          center: ["50%", "42%"],
           splitNumber: 8,
           splitArea: {
             areaStyle: {
-              color: 'rgba(127,95,132,.3)',
+              color: "rgba(127,95,132,.3)",
               opacity: 1,
               shadowBlur: 45,
-              shadowColor: 'rgba(0,0,0,.5)',
+              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 }
+            { 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']
+          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'
+        series: [
+          {
+            type: "radar",
+            symbolSize: 0,
+            areaStyle: {
+              normal: {
+                shadowBlur: 13,
+                shadowColor: "rgba(0,0,0,.2)",
+                shadowOffsetX: 0,
+                shadowOffsetY: 10,
+                opacity: 1
+              }
             },
-            {
-              value: [4000, 9000, 15000, 15000, 13000, 11000],
-              name: 'Expected Spending'
-            },
-            {
-              value: [5500, 11000, 12000, 15000, 12000, 12000],
-              name: 'Actual Spending'
-            }
-          ],
-          animationDuration: animationDuration
-        }]
-      })
+            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
index c4b3cae2..41123587 100644
--- a/src/views/dashboard/admin/components/TodoList/Todo.vue
+++ b/src/views/dashboard/admin/components/TodoList/Todo.vue
@@ -5,10 +5,10 @@
         :checked="todo.done"
         class="toggle"
         type="checkbox"
-        @change="toggleTodo( todo)"
-      >
+        @change="toggleTodo(todo)"
+      />
       <label @dblclick="editing = true" v-text="todo.text" />
-      <button class="destroy" @click="deleteTodo( todo )" />
+      <button class="destroy" @click="deleteTodo(todo)" />
     </div>
     <input
       v-show="editing"
@@ -18,19 +18,19 @@
       @keyup.enter="doneEdit"
       @keyup.esc="cancelEdit"
       @blur="doneEdit"
-    >
+    />
   </li>
 </template>
 
 <script>
 export default {
-  name: 'Todo',
+  name: "Todo",
   directives: {
     focus(el, { value }, { context }) {
       if (value) {
         context.$nextTick(() => {
-          el.focus()
-        })
+          el.focus();
+        });
       }
     }
   },
@@ -38,44 +38,44 @@ export default {
     todo: {
       type: Object,
       default: function() {
-        return {}
+        return {};
       }
     }
   },
   data() {
     return {
       editing: false
-    }
+    };
   },
   methods: {
     deleteTodo(todo) {
-      this.$emit('deleteTodo', todo)
+      this.$emit("deleteTodo", todo);
     },
     editTodo({ todo, value }) {
-      this.$emit('editTodo', { todo, value })
+      this.$emit("editTodo", { todo, value });
     },
     toggleTodo(todo) {
-      this.$emit('toggleTodo', todo)
+      this.$emit("toggleTodo", todo);
     },
     doneEdit(e) {
-      const value = e.target.value.trim()
-      const { todo } = this
+      const value = e.target.value.trim();
+      const { todo } = this;
       if (!value) {
         this.deleteTodo({
           todo
-        })
+        });
       } else if (this.editing) {
         this.editTodo({
           todo,
           value
-        })
-        this.editing = false
+        });
+        this.editing = false;
       }
     },
     cancelEdit(e) {
-      e.target.value = this.todo.text
-      this.editing = false
+      e.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
index 8000d414..7a320156 100644
--- a/src/views/dashboard/admin/components/TodoList/index.vue
+++ b/src/views/dashboard/admin/components/TodoList/index.vue
@@ -2,11 +2,22 @@
   <section class="todoapp">
     <!-- header -->
     <header class="header">
-      <input class="new-todo" autocomplete="off" placeholder="Todo List" @keyup.enter="addTodo">
+      <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 })">
+      <input
+        id="toggle-all"
+        :checked="allChecked"
+        class="toggle-all"
+        type="checkbox"
+        @change="toggleAll({ done: !allChecked })"
+      />
       <label for="toggle-all" />
       <ul class="todo-list">
         <todo
@@ -23,11 +34,15 @@
     <footer v-show="todos.length" class="footer">
       <span class="todo-count">
         <strong>{{ remaining }}</strong>
-        {{ remaining | pluralize('item') }} left
+        {{ 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>
+          <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">
@@ -38,90 +53,90 @@
 </template>
 
 <script>
-import Todo from './Todo.vue'
+import Todo from "./Todo.vue";
 
-const STORAGE_KEY = 'todos'
+const STORAGE_KEY = "todos";
 const filters = {
   all: todos => todos,
   active: todos => todos.filter(todo => !todo.done),
   completed: todos => 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 }
-]
+  { 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 }
+];
 export default {
   components: { Todo },
   filters: {
-    pluralize: (n, w) => n === 1 ? w : w + 's',
+    pluralize: (n, w) => (n === 1 ? w : w + "s"),
     capitalize: s => s.charAt(0).toUpperCase() + s.slice(1)
   },
   data() {
     return {
-      visibility: 'all',
+      visibility: "all",
       filters,
       // todos: JSON.parse(window.localStorage.getItem(STORAGE_KEY)) || defalutList
       todos: defalutList
-    }
+    };
   },
   computed: {
     allChecked() {
-      return this.todos.every(todo => todo.done)
+      return this.todos.every(todo => todo.done);
     },
     filteredTodos() {
-      return filters[this.visibility](this.todos)
+      return filters[this.visibility](this.todos);
     },
     remaining() {
-      return this.todos.filter(todo => !todo.done).length
+      return this.todos.filter(todo => !todo.done).length;
     }
   },
   methods: {
     setLocalStorage() {
-      window.localStorage.setItem(STORAGE_KEY, JSON.stringify(this.todos))
+      window.localStorage.setItem(STORAGE_KEY, JSON.stringify(this.todos));
     },
     addTodo(e) {
-      const text = e.target.value
+      const text = e.target.value;
       if (text.trim()) {
         this.todos.push({
           text,
           done: false
-        })
-        this.setLocalStorage()
+        });
+        this.setLocalStorage();
       }
-      e.target.value = ''
+      e.target.value = "";
     },
     toggleTodo(val) {
-      val.done = !val.done
-      this.setLocalStorage()
+      val.done = !val.done;
+      this.setLocalStorage();
     },
     deleteTodo(todo) {
-      this.todos.splice(this.todos.indexOf(todo), 1)
-      this.setLocalStorage()
+      this.todos.splice(this.todos.indexOf(todo), 1);
+      this.setLocalStorage();
     },
     editTodo({ todo, value }) {
-      todo.text = value
-      this.setLocalStorage()
+      todo.text = value;
+      this.setLocalStorage();
     },
     clearCompleted() {
-      this.todos = this.todos.filter(todo => !todo.done)
-      this.setLocalStorage()
+      this.todos = this.todos.filter(todo => !todo.done);
+      this.setLocalStorage();
     },
     toggleAll({ done }) {
       this.todos.forEach(todo => {
-        todo.done = done
-        this.setLocalStorage()
-      })
+        todo.done = done;
+        this.setLocalStorage();
+      });
     }
   }
-}
+};
 </script>
 
 <style lang="scss">
-  @import './index.scss';
+@import "./index.scss";
 </style>
diff --git a/src/views/dashboard/admin/components/TransactionTable.vue b/src/views/dashboard/admin/components/TransactionTable.vue
index d07b0edf..aa6a95c9 100644
--- a/src/views/dashboard/admin/components/TransactionTable.vue
+++ b/src/views/dashboard/admin/components/TransactionTable.vue
@@ -11,7 +11,7 @@
       </template>
     </el-table-column>
     <el-table-column label="Status" width="100" align="center">
-      <template slot-scope="{row}">
+      <template slot-scope="{ row }">
         <el-tag :type="row.status | statusFilter">
           {{ row.status }}
         </el-tag>
@@ -21,35 +21,35 @@
 </template>
 
 <script>
-import { transactionList } from '@/api/remote-search'
+import { transactionList } from "@/api/remote-search";
 
 export default {
   filters: {
     statusFilter(status) {
       const statusMap = {
-        success: 'success',
-        pending: 'danger'
-      }
-      return statusMap[status]
+        success: "success",
+        pending: "danger"
+      };
+      return statusMap[status];
     },
     orderNoFilter(str) {
-      return str.substring(0, 30)
+      return str.substring(0, 30);
     }
   },
   data() {
     return {
       list: null
-    }
+    };
   },
   created() {
-    this.fetchData()
+    this.fetchData();
   },
   methods: {
     fetchData() {
       transactionList().then(response => {
-        this.list = response.data.items.slice(0, 8)
-      })
+        this.list = response.data.items.slice(0, 8);
+      });
     }
   }
-}
+};
 </script>
diff --git a/src/views/dashboard/admin/components/mixins/resize.js b/src/views/dashboard/admin/components/mixins/resize.js
index bcd17bf0..02a5e1f9 100644
--- a/src/views/dashboard/admin/components/mixins/resize.js
+++ b/src/views/dashboard/admin/components/mixins/resize.js
@@ -1,28 +1,28 @@
-import { debounce } from '@/utils'
+import { debounce } from "@/utils";
 
 export default {
   data() {
     return {
       $_sidebarElm: null
-    }
+    };
   },
   mounted() {
-    this.$_initResizeEvent()
-    this.$_initSidebarResizeEvent()
+    this.$_initResizeEvent();
+    this.$_initSidebarResizeEvent();
   },
   beforeDestroy() {
-    this.$_destroyResizeEvent()
-    this.$_destroySidebarResizeEvent()
+    this.$_destroyResizeEvent();
+    this.$_destroySidebarResizeEvent();
   },
   // to fixed bug when cached by keep-alive
   // https://github.com/PanJiaChen/vue-element-admin/issues/2116
   activated() {
-    this.$_initResizeEvent()
-    this.$_initSidebarResizeEvent()
+    this.$_initResizeEvent();
+    this.$_initSidebarResizeEvent();
   },
   deactivated() {
-    this.$_destroyResizeEvent()
-    this.$_destroySidebarResizeEvent()
+    this.$_destroyResizeEvent();
+    this.$_destroySidebarResizeEvent();
   },
   methods: {
     // use $_ for mixins properties
@@ -30,27 +30,37 @@ export default {
     $_resizeHandler() {
       return debounce(() => {
         if (this.chart) {
-          this.chart.resize()
+          this.chart.resize();
         }
-      }, 100)()
+      }, 100)();
     },
     $_initResizeEvent() {
-      window.addEventListener('resize', this.$_resizeHandler)
+      window.addEventListener("resize", this.$_resizeHandler);
     },
     $_destroyResizeEvent() {
-      window.removeEventListener('resize', this.$_resizeHandler)
+      window.removeEventListener("resize", this.$_resizeHandler);
     },
     $_sidebarResizeHandler(e) {
-      if (e.propertyName === 'width') {
-        this.$_resizeHandler()
+      if (e.propertyName === "width") {
+        this.$_resizeHandler();
       }
     },
     $_initSidebarResizeEvent() {
-      this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
-      this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
+      this.$_sidebarElm = document.getElementsByClassName(
+        "sidebar-container"
+      )[0];
+      this.$_sidebarElm &&
+        this.$_sidebarElm.addEventListener(
+          "transitionend",
+          this.$_sidebarResizeHandler
+        );
     },
     $_destroySidebarResizeEvent() {
-      this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
+      this.$_sidebarElm &&
+        this.$_sidebarElm.removeEventListener(
+          "transitionend",
+          this.$_sidebarResizeHandler
+        );
     }
   }
-}
+};
diff --git a/src/views/dashboard/admin/index.vue b/src/views/dashboard/admin/index.vue
index 8cb557be..ac41376e 100644
--- a/src/views/dashboard/admin/index.vue
+++ b/src/views/dashboard/admin/index.vue
@@ -27,13 +27,34 @@
     </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;">
+      <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;">
+      <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;">
+      <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>
@@ -41,15 +62,15 @@
 </template>
 
 <script>
-import GithubCorner from '@/components/GithubCorner'
-import PanelGroup from './components/PanelGroup'
-import LineChart from './components/LineChart'
-import RaddarChart from './components/RaddarChart'
-import PieChart from './components/PieChart'
-import BarChart from './components/BarChart'
-import TransactionTable from './components/TransactionTable'
-import TodoList from './components/TodoList'
-import BoxCard from './components/BoxCard'
+import GithubCorner from "@/components/GithubCorner";
+import PanelGroup from "./components/PanelGroup";
+import LineChart from "./components/LineChart";
+import RaddarChart from "./components/RaddarChart";
+import PieChart from "./components/PieChart";
+import BarChart from "./components/BarChart";
+import TransactionTable from "./components/TransactionTable";
+import TodoList from "./components/TodoList";
+import BoxCard from "./components/BoxCard";
 
 const lineChartData = {
   newVisitis: {
@@ -68,10 +89,10 @@ const lineChartData = {
     expectedData: [130, 140, 141, 142, 145, 150, 160],
     actualData: [120, 82, 91, 154, 162, 140, 130]
   }
-}
+};
 
 export default {
-  name: 'DashboardAdmin',
+  name: "DashboardAdmin",
   components: {
     GithubCorner,
     PanelGroup,
@@ -86,14 +107,14 @@ export default {
   data() {
     return {
       lineChartData: lineChartData.newVisitis
-    }
+    };
   },
   methods: {
     handleSetLineChartData(type) {
-      this.lineChartData = lineChartData[type]
+      this.lineChartData = lineChartData[type];
     }
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>
@@ -116,7 +137,7 @@ export default {
   }
 }
 
-@media (max-width:1024px) {
+@media (max-width: 1024px) {
   .chart-wrapper {
     padding: 8px;
   }
diff --git a/src/views/dashboard/editor/index.vue b/src/views/dashboard/editor/index.vue
index 9723bcce..61de4ced 100644
--- a/src/views/dashboard/editor/index.vue
+++ b/src/views/dashboard/editor/index.vue
@@ -3,72 +3,75 @@
     <div class=" clearfix">
       <pan-thumb :image="avatar" style="float: left">
         Your roles:
-        <span v-for="item in roles" :key="item" class="pan-info-roles">{{ item }}</span>
+        <span v-for="item in roles" :key="item" class="pan-info-roles">{{
+          item
+        }}</span>
       </pan-thumb>
-      <github-corner style="position: absolute; top: 0px; border: 0; right: 0;" />
+      <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>
+        <span style="font-size:20px;padding-top:20px;display:inline-block;"
+          >Editor's Dashboard</span
+        >
       </div>
     </div>
     <div>
-      <img :src="emptyGif" class="emptyGif">
+      <img :src="emptyGif" class="emptyGif" />
     </div>
   </div>
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
-import PanThumb from '@/components/PanThumb'
-import GithubCorner from '@/components/GithubCorner'
+import { mapGetters } from "vuex";
+import PanThumb from "@/components/PanThumb";
+import GithubCorner from "@/components/GithubCorner";
 
 export default {
-  name: 'DashboardEditor',
+  name: "DashboardEditor",
   components: { PanThumb, GithubCorner },
   data() {
     return {
-      emptyGif: 'https://wpimg.wallstcn.com/0e03b7da-db9e-4819-ba10-9016ddfdaed3'
-    }
+      emptyGif:
+        "https://wpimg.wallstcn.com/0e03b7da-db9e-4819-ba10-9016ddfdaed3"
+    };
   },
   computed: {
-    ...mapGetters([
-      'name',
-      'avatar',
-      'roles'
-    ])
+    ...mapGetters(["name", "avatar", "roles"])
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>
-  .emptyGif {
-    display: block;
-    width: 45%;
-    margin: 0 auto;
-  }
+.emptyGif {
+  display: block;
+  width: 45%;
+  margin: 0 auto;
+}
 
-  .dashboard-editor-container {
-    background-color: #e3e3e3;
-    min-height: 100vh;
-    padding: 50px 60px 0px;
-    .pan-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;
-      }
+.dashboard-editor-container {
+  background-color: #e3e3e3;
+  min-height: 100vh;
+  padding: 50px 60px 0px;
+  .pan-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 1720ea8f..5e950769 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -5,27 +5,25 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
-import adminDashboard from './admin'
-import editorDashboard from './editor'
+import { mapGetters } from "vuex";
+import adminDashboard from "./admin";
+import editorDashboard from "./editor";
 
 export default {
-  name: 'Dashboard',
+  name: "Dashboard",
   components: { adminDashboard, editorDashboard },
   data() {
     return {
-      currentRole: 'adminDashboard'
-    }
+      currentRole: "adminDashboard"
+    };
   },
   computed: {
-    ...mapGetters([
-      'roles'
-    ])
+    ...mapGetters(["roles"])
   },
   created() {
-    if (!this.roles.includes('admin')) {
-      this.currentRole = 'editorDashboard'
+    if (!this.roles.includes("admin")) {
+      this.currentRole = "editorDashboard";
     }
   }
-}
+};
 </script>
diff --git a/src/views/documentation/index.vue b/src/views/documentation/index.vue
index 0f4c4d92..102e632d 100644
--- a/src/views/documentation/index.vue
+++ b/src/views/documentation/index.vue
@@ -4,43 +4,77 @@
       class="document-btn"
       target="_blank"
       href="https://panjiachen.github.io/vue-element-admin-site/"
-    >Documentation</a>
+      >Documentation</a
+    >
     <a
       class="document-btn"
       target="_blank"
       href="https://github.com/PanJiaChen/vue-element-admin/"
-    >Github Repository</a>
+      >Github Repository</a
+    >
     <a
       class="document-btn"
       target="_blank"
       href="https://panjiachen.gitee.io/vue-element-admin-site/zh/"
-    >国内文档</a>
-    <dropdown-menu :items="articleList" style="float:left;margin-left:50px;" title="系列文章" />
+      >国内文档</a
+    >
+    <dropdown-menu
+      :items="articleList"
+      style="float:left;margin-left:50px;"
+      title="系列文章"
+    />
   </div>
 </template>
 
 <script>
-import DropdownMenu from '@/components/Share/DropdownMenu'
+import DropdownMenu from "@/components/Share/DropdownMenu";
 
 export default {
-  name: 'Documentation',
+  name: "Documentation",
   components: { DropdownMenu },
   data() {
     return {
       articleList: [
-        { title: '基础篇', href: 'https://juejin.im/post/59097cd7a22b9d0065fb61d2' },
-        { title: '登录权限篇', href: 'https://juejin.im/post/591aa14f570c35006961acac' },
-        { title: '实战篇', href: 'https://juejin.im/post/593121aa0ce4630057f70d35' },
-        { title: 'vue-admin-template 篇', href: 'https://juejin.im/post/595b4d776fb9a06bbe7dba56' },
-        { title: 'v4.0 篇', href: 'https://juejin.im/post/5c92ff94f265da6128275a85' },
-        { title: '自行封装 component', href: 'https://segmentfault.com/a/1190000009090836' },
-        { title: '优雅的使用 icon', href: 'https://juejin.im/post/59bb864b5188257e7a427c09' },
-        { title: 'webpack4（上）', href: 'https://juejin.im/post/59bb864b5188257e7a427c09' },
-        { title: 'webpack4（下）', href: 'https://juejin.im/post/5b5d6d6f6fb9a04fea58aabc' }
+        {
+          title: "基础篇",
+          href: "https://juejin.im/post/59097cd7a22b9d0065fb61d2"
+        },
+        {
+          title: "登录权限篇",
+          href: "https://juejin.im/post/591aa14f570c35006961acac"
+        },
+        {
+          title: "实战篇",
+          href: "https://juejin.im/post/593121aa0ce4630057f70d35"
+        },
+        {
+          title: "vue-admin-template 篇",
+          href: "https://juejin.im/post/595b4d776fb9a06bbe7dba56"
+        },
+        {
+          title: "v4.0 篇",
+          href: "https://juejin.im/post/5c92ff94f265da6128275a85"
+        },
+        {
+          title: "自行封装 component",
+          href: "https://segmentfault.com/a/1190000009090836"
+        },
+        {
+          title: "优雅的使用 icon",
+          href: "https://juejin.im/post/59bb864b5188257e7a427c09"
+        },
+        {
+          title: "webpack4（上）",
+          href: "https://juejin.im/post/59bb864b5188257e7a427c09"
+        },
+        {
+          title: "webpack4（下）",
+          href: "https://juejin.im/post/5b5d6d6f6fb9a04fea58aabc"
+        }
       ]
-    }
+    };
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/error-log/components/ErrorTestA.vue b/src/views/error-log/components/ErrorTestA.vue
index 52654e0e..f2846372 100644
--- a/src/views/error-log/components/ErrorTestA.vue
+++ b/src/views/error-log/components/ErrorTestA.vue
@@ -8,6 +8,6 @@
 
 <script>
 export default {
-  name: 'ErrorTestA'
-}
+  name: "ErrorTestA"
+};
 </script>
diff --git a/src/views/error-log/components/ErrorTestB.vue b/src/views/error-log/components/ErrorTestB.vue
index d796beef..854a12cf 100644
--- a/src/views/error-log/components/ErrorTestB.vue
+++ b/src/views/error-log/components/ErrorTestB.vue
@@ -5,7 +5,7 @@
 <script>
 export default {
   created() {
-    this.b = b // eslint-disable-line
+    this.b = b; // eslint-disable-line
   }
-}
+};
 </script>
diff --git a/src/views/error-log/index.vue b/src/views/error-log/index.vue
index e999c85b..fd1afb4c 100644
--- a/src/views/error-log/index.vue
+++ b/src/views/error-log/index.vue
@@ -4,29 +4,39 @@
     <ErrorB />
     <h3>Please click the bug icon in the upper right corner</h3>
     <aside>
-      Now the management system are basically the form of the spa, it enhances the user experience, but it also increases the possibility of page problems, a small negligence may lead to the entire page deadlock. Fortunately Vue provides a way to catch handling exceptions, where you can handle errors or report exceptions.
-      <a target="_blank" class="link-type" href="https://panjiachen.github.io/vue-element-admin-site/guide/advanced/error.html">
+      Now the management system are basically the form of the spa, it enhances
+      the user experience, but it also increases the possibility of page
+      problems, a small negligence may lead to the entire page deadlock.
+      Fortunately Vue provides a way to catch handling exceptions, where you can
+      handle errors or report exceptions.
+      <a
+        target="_blank"
+        class="link-type"
+        href="https://panjiachen.github.io/vue-element-admin-site/guide/advanced/error.html"
+      >
         Document introduction
       </a>
     </aside>
     <a href="#">
-      <img src="https://wpimg.wallstcn.com/360e4842-4db5-42d0-b078-f9a84a825546.gif">
+      <img
+        src="https://wpimg.wallstcn.com/360e4842-4db5-42d0-b078-f9a84a825546.gif"
+      />
     </a>
   </div>
 </template>
 
 <script>
-import ErrorA from './components/ErrorTestA'
-import ErrorB from './components/ErrorTestB'
+import ErrorA from "./components/ErrorTestA";
+import ErrorB from "./components/ErrorTestB";
 
 export default {
-  name: 'ErrorLog',
+  name: "ErrorLog",
   components: { ErrorA, ErrorB }
-}
+};
 </script>
 
 <style scoped>
-  .errPage-container {
-    padding: 30px;
-  }
+.errPage-container {
+  padding: 30px;
+}
 </style>
diff --git a/src/views/error-page/401.vue b/src/views/error-page/401.vue
index 032e808f..cc7f676b 100644
--- a/src/views/error-page/401.vue
+++ b/src/views/error-page/401.vue
@@ -21,79 +21,87 @@
           <li class="link-type">
             <a href="https://www.taobao.com/">随便看看</a>
           </li>
-          <li><a href="#" @click.prevent="dialogVisible=true">点我看图</a></li>
+          <li>
+            <a href="#" @click.prevent="dialogVisible = true">点我看图</a>
+          </li>
         </ul>
       </el-col>
       <el-col :span="12">
-        <img :src="errGif" width="313" height="428" alt="Girl has dropped her ice cream.">
+        <img
+          :src="errGif"
+          width="313"
+          height="428"
+          alt="Girl has dropped her ice cream."
+        />
       </el-col>
     </el-row>
     <el-dialog :visible.sync="dialogVisible" title="随便看">
-      <img :src="ewizardClap" class="pan-img">
+      <img :src="ewizardClap" class="pan-img" />
     </el-dialog>
   </div>
 </template>
 
 <script>
-import errGif from '@/assets/401_images/401.gif'
+import errGif from "@/assets/401_images/401.gif";
 
 export default {
-  name: 'Page401',
+  name: "Page401",
   data() {
     return {
-      errGif: errGif + '?' + +new Date(),
-      ewizardClap: 'https://wpimg.wallstcn.com/007ef517-bafd-4066-aae4-6883632d9646',
+      errGif: errGif + "?" + +new Date(),
+      ewizardClap:
+        "https://wpimg.wallstcn.com/007ef517-bafd-4066-aae4-6883632d9646",
       dialogVisible: false
-    }
+    };
   },
   methods: {
     back() {
       if (this.$route.query.noGoBack) {
-        this.$router.push({ path: '/dashboard' })
+        this.$router.push({ path: "/dashboard" });
       } else {
-        this.$router.go(-1)
+        this.$router.go(-1);
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.errPage-container {
+  width: 800px;
+  max-width: 100%;
+  margin: 100px auto;
+  .pan-back-btn {
+    background: #008489;
+    color: #fff;
+    border: none !important;
+  }
+  .pan-gif {
+    margin: 0 auto;
+    display: block;
+  }
+  .pan-img {
+    display: block;
+    margin: 0 auto;
+    width: 100%;
+  }
+  .text-jumbo {
+    font-size: 60px;
+    font-weight: 700;
+    color: #484848;
+  }
+  .list-unstyled {
+    font-size: 14px;
+    li {
+      padding-bottom: 5px;
+    }
+    a {
+      color: #008489;
+      text-decoration: none;
+      &:hover {
+        text-decoration: underline;
       }
     }
   }
 }
-</script>
-
-<style lang="scss" scoped>
-  .errPage-container {
-    width: 800px;
-    max-width: 100%;
-    margin: 100px auto;
-    .pan-back-btn {
-      background: #008489;
-      color: #fff;
-      border: none!important;
-    }
-    .pan-gif {
-      margin: 0 auto;
-      display: block;
-    }
-    .pan-img {
-      display: block;
-      margin: 0 auto;
-      width: 100%;
-    }
-    .text-jumbo {
-      font-size: 60px;
-      font-weight: 700;
-      color: #484848;
-    }
-    .list-unstyled {
-      font-size: 14px;
-      li {
-        padding-bottom: 5px;
-      }
-      a {
-        color: #008489;
-        text-decoration: none;
-        &:hover {
-          text-decoration: underline;
-        }
-      }
-    }
-  }
 </style>
diff --git a/src/views/error-page/404.vue b/src/views/error-page/404.vue
index 1791f55a..cb5c47ce 100644
--- a/src/views/error-page/404.vue
+++ b/src/views/error-page/404.vue
@@ -2,18 +2,43 @@
   <div class="wscn-http404-container">
     <div class="wscn-http404">
       <div class="pic-404">
-        <img class="pic-404__parent" src="@/assets/404_images/404.png" alt="404">
-        <img class="pic-404__child left" src="@/assets/404_images/404_cloud.png" alt="404">
-        <img class="pic-404__child mid" src="@/assets/404_images/404_cloud.png" alt="404">
-        <img class="pic-404__child right" src="@/assets/404_images/404_cloud.png" alt="404">
+        <img
+          class="pic-404__parent"
+          src="@/assets/404_images/404.png"
+          alt="404"
+        />
+        <img
+          class="pic-404__child left"
+          src="@/assets/404_images/404_cloud.png"
+          alt="404"
+        />
+        <img
+          class="pic-404__child mid"
+          src="@/assets/404_images/404_cloud.png"
+          alt="404"
+        />
+        <img
+          class="pic-404__child right"
+          src="@/assets/404_images/404_cloud.png"
+          alt="404"
+        />
       </div>
       <div class="bullshit">
         <div class="bullshit__oops">OOPS!</div>
-        <div class="bullshit__info">All rights reserved
-          <a style="color:#20a0ff" href="https://wallstreetcn.com" target="_blank">wallstreetcn</a>
+        <div class="bullshit__info">
+          All rights reserved
+          <a
+            style="color:#20a0ff"
+            href="https://wallstreetcn.com"
+            target="_blank"
+            >wallstreetcn</a
+          >
         </div>
         <div class="bullshit__headline">{{ message }}</div>
-        <div class="bullshit__info">Please check that the URL you entered is correct, or click the button below to return to the homepage.</div>
+        <div class="bullshit__info">
+          Please check that the URL you entered is correct, or click the button
+          below to return to the homepage.
+        </div>
         <a href="" class="bullshit__return-home">Back to home</a>
       </div>
     </div>
@@ -21,20 +46,19 @@
 </template>
 
 <script>
-
 export default {
-  name: 'Page404',
+  name: "Page404",
   computed: {
     message() {
-      return 'The webmaster said that you can not enter this page...'
+      return "The webmaster said that you can not enter this page...";
     }
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>
-.wscn-http404-container{
-  transform: translate(-50%,-50%);
+.wscn-http404-container {
+  transform: translate(-50%, -50%);
   position: absolute;
   top: 40%;
   left: 50%;
diff --git a/src/views/example/components/ArticleDetail.vue b/src/views/example/components/ArticleDetail.vue
index ef0f1df9..2758b086 100644
--- a/src/views/example/components/ArticleDetail.vue
+++ b/src/views/example/components/ArticleDetail.vue
@@ -1,12 +1,21 @@
 <template>
   <div class="createPost-container">
-    <el-form ref="postForm" :model="postForm" :rules="rules" class="form-container">
-
-      <sticky :z-index="10" :class-name="'sub-navbar '+postForm.status">
+    <el-form
+      ref="postForm"
+      :model="postForm"
+      :rules="rules"
+      class="form-container"
+    >
+      <sticky :z-index="10" :class-name="'sub-navbar ' + postForm.status">
         <CommentDropdown v-model="postForm.comment_disabled" />
         <PlatformDropdown v-model="postForm.platforms" />
         <SourceUrlDropdown v-model="postForm.source_uri" />
-        <el-button v-loading="loading" style="margin-left: 10px;" type="success" @click="submitForm">
+        <el-button
+          v-loading="loading"
+          style="margin-left: 10px;"
+          type="success"
+          @click="submitForm"
+        >
           Publish
         </el-button>
         <el-button v-loading="loading" type="warning" @click="draftForm">
@@ -20,7 +29,12 @@
 
           <el-col :span="24">
             <el-form-item style="margin-bottom: 40px;" prop="title">
-              <MDinput v-model="postForm.title" :maxlength="100" name="name" required>
+              <MDinput
+                v-model="postForm.title"
+                :maxlength="100"
+                name="name"
+                required
+              >
                 Title
               </MDinput>
             </el-form-item>
@@ -28,21 +42,50 @@
             <div class="postInfo-container">
               <el-row>
                 <el-col :span="8">
-                  <el-form-item label-width="60px" label="Author:" class="postInfo-container-item">
-                    <el-select v-model="postForm.author" :remote-method="getRemoteUserList" filterable default-first-option remote placeholder="Search user">
-                      <el-option v-for="(item,index) in userListOptions" :key="item+index" :label="item" :value="item" />
+                  <el-form-item
+                    label-width="60px"
+                    label="Author:"
+                    class="postInfo-container-item"
+                  >
+                    <el-select
+                      v-model="postForm.author"
+                      :remote-method="getRemoteUserList"
+                      filterable
+                      default-first-option
+                      remote
+                      placeholder="Search user"
+                    >
+                      <el-option
+                        v-for="(item, index) in userListOptions"
+                        :key="item + index"
+                        :label="item"
+                        :value="item"
+                      />
                     </el-select>
                   </el-form-item>
                 </el-col>
 
                 <el-col :span="10">
-                  <el-form-item label-width="120px" label="Publish Time:" class="postInfo-container-item">
-                    <el-date-picker v-model="displayTime" type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="Select date and time" />
+                  <el-form-item
+                    label-width="120px"
+                    label="Publish Time:"
+                    class="postInfo-container-item"
+                  >
+                    <el-date-picker
+                      v-model="displayTime"
+                      type="datetime"
+                      format="yyyy-MM-dd HH:mm:ss"
+                      placeholder="Select date and time"
+                    />
                   </el-form-item>
                 </el-col>
 
                 <el-col :span="6">
-                  <el-form-item label-width="90px" label="Importance:" class="postInfo-container-item">
+                  <el-form-item
+                    label-width="90px"
+                    label="Importance:"
+                    class="postInfo-container-item"
+                  >
                     <el-rate
                       v-model="postForm.importance"
                       :max="3"
@@ -58,9 +101,22 @@
           </el-col>
         </el-row>
 
-        <el-form-item style="margin-bottom: 40px;" label-width="70px" label="Summary:">
-          <el-input v-model="postForm.content_short" :rows="1" type="textarea" class="article-textarea" autosize placeholder="Please enter the content" />
-          <span v-show="contentShortLength" class="word-counter">{{ contentShortLength }}words</span>
+        <el-form-item
+          style="margin-bottom: 40px;"
+          label-width="70px"
+          label="Summary:"
+        >
+          <el-input
+            v-model="postForm.content_short"
+            :rows="1"
+            type="textarea"
+            class="article-textarea"
+            autosize
+            placeholder="Please enter the content"
+          />
+          <span v-show="contentShortLength" class="word-counter"
+            >{{ contentShortLength }}words</span
+          >
         </el-form-item>
 
         <el-form-item prop="content" style="margin-bottom: 30px;">
@@ -76,33 +132,46 @@
 </template>
 
 <script>
-import Tinymce from '@/components/Tinymce'
-import Upload from '@/components/Upload/SingleImage3'
-import MDinput from '@/components/MDinput'
-import Sticky from '@/components/Sticky' // 粘性header组件
-import { validURL } from '@/utils/validate'
-import { fetchArticle } from '@/api/article'
-import { searchUser } from '@/api/remote-search'
-import Warning from './Warning'
-import { CommentDropdown, PlatformDropdown, SourceUrlDropdown } from './Dropdown'
+import Tinymce from "@/components/Tinymce";
+import Upload from "@/components/Upload/SingleImage3";
+import MDinput from "@/components/MDinput";
+import Sticky from "@/components/Sticky"; // 粘性header组件
+import { validURL } from "@/utils/validate";
+import { fetchArticle } from "@/api/article";
+import { searchUser } from "@/api/remote-search";
+import Warning from "./Warning";
+import {
+  CommentDropdown,
+  PlatformDropdown,
+  SourceUrlDropdown
+} from "./Dropdown";
 
 const defaultForm = {
-  status: 'draft',
-  title: '', // 文章题目
-  content: '', // 文章内容
-  content_short: '', // 文章摘要
-  source_uri: '', // 文章外链
-  image_uri: '', // 文章图片
+  status: "draft",
+  title: "", // 文章题目
+  content: "", // 文章内容
+  content_short: "", // 文章摘要
+  source_uri: "", // 文章外链
+  image_uri: "", // 文章图片
   display_time: undefined, // 前台展示时间
   id: undefined,
-  platforms: ['a-platform'],
+  platforms: ["a-platform"],
   comment_disabled: false,
   importance: 0
-}
+};
 
 export default {
-  name: 'ArticleDetail',
-  components: { Tinymce, MDinput, Upload, Sticky, Warning, CommentDropdown, PlatformDropdown, SourceUrlDropdown },
+  name: "ArticleDetail",
+  components: {
+    Tinymce,
+    MDinput,
+    Upload,
+    Sticky,
+    Warning,
+    CommentDropdown,
+    PlatformDropdown,
+    SourceUrlDropdown
+  },
   props: {
     isEdit: {
       type: Boolean,
@@ -111,31 +180,31 @@ export default {
   },
   data() {
     const validateRequire = (rule, value, callback) => {
-      if (value === '') {
+      if (value === "") {
         this.$message({
-          message: rule.field + '为必传项',
-          type: 'error'
-        })
-        callback(new Error(rule.field + '为必传项'))
+          message: rule.field + "为必传项",
+          type: "error"
+        });
+        callback(new Error(rule.field + "为必传项"));
       } else {
-        callback()
+        callback();
       }
-    }
+    };
     const validateSourceUri = (rule, value, callback) => {
       if (value) {
         if (validURL(value)) {
-          callback()
+          callback();
         } else {
           this.$message({
-            message: '外链url填写不正确',
-            type: 'error'
-          })
-          callback(new Error('外链url填写不正确'))
+            message: "外链url填写不正确",
+            type: "error"
+          });
+          callback(new Error("外链url填写不正确"));
         }
       } else {
-        callback()
+        callback();
       }
-    }
+    };
     return {
       postForm: Object.assign({}, defaultForm),
       loading: false,
@@ -144,14 +213,14 @@ export default {
         image_uri: [{ validator: validateRequire }],
         title: [{ validator: validateRequire }],
         content: [{ validator: validateRequire }],
-        source_uri: [{ validator: validateSourceUri, trigger: 'blur' }]
+        source_uri: [{ validator: validateSourceUri, trigger: "blur" }]
       },
       tempRoute: {}
-    }
+    };
   },
   computed: {
     contentShortLength() {
-      return this.postForm.content_short.length
+      return this.postForm.content_short.length;
     },
     displayTime: {
       // set and get is useful when the data
@@ -159,96 +228,103 @@ export default {
       // back end return => "2013-06-25 06:59:25"
       // front end need timestamp => 1372114765000
       get() {
-        return (+new Date(this.postForm.display_time))
+        return +new Date(this.postForm.display_time);
       },
       set(val) {
-        this.postForm.display_time = new Date(val)
+        this.postForm.display_time = new Date(val);
       }
     }
   },
   created() {
     if (this.isEdit) {
-      const id = this.$route.params && this.$route.params.id
-      this.fetchData(id)
+      const id = this.$route.params && this.$route.params.id;
+      this.fetchData(id);
     } else {
-      this.postForm = Object.assign({}, defaultForm)
+      this.postForm = Object.assign({}, defaultForm);
     }
 
     // Why need to make a copy of this.$route here?
     // Because if you enter this page and quickly switch tag, may be in the execution of the setTagsViewTitle function, this.$route is no longer pointing to the current page
     // https://github.com/PanJiaChen/vue-element-admin/issues/1221
-    this.tempRoute = Object.assign({}, this.$route)
+    this.tempRoute = Object.assign({}, this.$route);
   },
   methods: {
     fetchData(id) {
-      fetchArticle(id).then(response => {
-        this.postForm = response.data
+      fetchArticle(id)
+        .then(response => {
+          this.postForm = response.data;
 
-        // just for test
-        this.postForm.title += `   Article Id:${this.postForm.id}`
-        this.postForm.content_short += `   Article Id:${this.postForm.id}`
+          // just for test
+          this.postForm.title += `   Article Id:${this.postForm.id}`;
+          this.postForm.content_short += `   Article Id:${this.postForm.id}`;
 
-        // set tagsview title
-        this.setTagsViewTitle()
+          // set tagsview title
+          this.setTagsViewTitle();
 
-        // set page title
-        this.setPageTitle()
-      }).catch(err => {
-        console.log(err)
-      })
+          // set page title
+          this.setPageTitle();
+        })
+        .catch(err => {
+          console.log(err);
+        });
     },
     setTagsViewTitle() {
-      const title = 'Edit Article'
-      const route = Object.assign({}, this.tempRoute, { title: `${title}-${this.postForm.id}` })
-      this.$store.dispatch('tagsView/updateVisitedView', route)
+      const title = "Edit Article";
+      const route = Object.assign({}, this.tempRoute, {
+        title: `${title}-${this.postForm.id}`
+      });
+      this.$store.dispatch("tagsView/updateVisitedView", route);
     },
     setPageTitle() {
-      const title = 'Edit Article'
-      document.title = `${title} - ${this.postForm.id}`
+      const title = "Edit Article";
+      document.title = `${title} - ${this.postForm.id}`;
     },
     submitForm() {
-      console.log(this.postForm)
+      console.log(this.postForm);
       this.$refs.postForm.validate(valid => {
         if (valid) {
-          this.loading = true
+          this.loading = true;
           this.$notify({
-            title: '成功',
-            message: '发布文章成功',
-            type: 'success',
+            title: "成功",
+            message: "发布文章成功",
+            type: "success",
             duration: 2000
-          })
-          this.postForm.status = 'published'
-          this.loading = false
+          });
+          this.postForm.status = "published";
+          this.loading = false;
         } else {
-          console.log('error submit!!')
-          return false
+          console.log("error submit!!");
+          return false;
         }
-      })
+      });
     },
     draftForm() {
-      if (this.postForm.content.length === 0 || this.postForm.title.length === 0) {
+      if (
+        this.postForm.content.length === 0 ||
+        this.postForm.title.length === 0
+      ) {
         this.$message({
-          message: '请填写必要的标题和内容',
-          type: 'warning'
-        })
-        return
+          message: "请填写必要的标题和内容",
+          type: "warning"
+        });
+        return;
       }
       this.$message({
-        message: '保存成功',
-        type: 'success',
+        message: "保存成功",
+        type: "success",
         showClose: true,
         duration: 1000
-      })
-      this.postForm.status = 'draft'
+      });
+      this.postForm.status = "draft";
     },
     getRemoteUserList(query) {
       searchUser(query).then(response => {
-        if (!response.data.items) return
-        this.userListOptions = response.data.items.map(v => v.name)
-      })
+        if (!response.data.items) return;
+        this.userListOptions = response.data.items.map(v => v.name);
+      });
     }
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>
@@ -279,7 +355,7 @@ export default {
   }
 }
 
-.article-textarea /deep/ {
+.article-textarea ::v-deep {
   textarea {
     padding-right: 40px;
     resize: none;
diff --git a/src/views/example/components/Dropdown/Comment.vue b/src/views/example/components/Dropdown/Comment.vue
index d34b2b90..42ec39d2 100644
--- a/src/views/example/components/Dropdown/Comment.vue
+++ b/src/views/example/components/Dropdown/Comment.vue
@@ -1,7 +1,7 @@
 <template>
   <el-dropdown :show-timeout="100" trigger="click">
     <el-button plain>
-      {{ !comment_disabled?'Comment: opened':'Comment: closed' }}
+      {{ !comment_disabled ? "Comment: opened" : "Comment: closed" }}
       <i class="el-icon-caret-bottom el-icon--right" />
     </el-button>
     <el-dropdown-menu slot="dropdown" class="no-padding">
@@ -30,12 +30,12 @@ export default {
   computed: {
     comment_disabled: {
       get() {
-        return this.value
+        return this.value;
       },
       set(val) {
-        this.$emit('input', val)
+        this.$emit("input", val);
       }
     }
   }
-}
+};
 </script>
diff --git a/src/views/example/components/Dropdown/Platform.vue b/src/views/example/components/Dropdown/Platform.vue
index 0a527264..f27f5991 100644
--- a/src/views/example/components/Dropdown/Platform.vue
+++ b/src/views/example/components/Dropdown/Platform.vue
@@ -6,7 +6,11 @@
     </el-button>
     <el-dropdown-menu slot="dropdown" class="no-border">
       <el-checkbox-group v-model="platforms" style="padding: 5px 15px;">
-        <el-checkbox v-for="item in platformsOptions" :key="item.key" :label="item.key">
+        <el-checkbox
+          v-for="item in platformsOptions"
+          :key="item.key"
+          :label="item.key"
+        >
           {{ item.name }}
         </el-checkbox>
       </el-checkbox-group>
@@ -26,21 +30,21 @@ export default {
   data() {
     return {
       platformsOptions: [
-        { key: 'a-platform', name: 'a-platform' },
-        { key: 'b-platform', name: 'b-platform' },
-        { key: 'c-platform', name: 'c-platform' }
+        { key: "a-platform", name: "a-platform" },
+        { key: "b-platform", name: "b-platform" },
+        { key: "c-platform", name: "c-platform" }
       ]
-    }
+    };
   },
   computed: {
     platforms: {
       get() {
-        return this.value
+        return this.value;
       },
       set(val) {
-        this.$emit('input', val)
+        this.$emit("input", val);
       }
     }
   }
-}
+};
 </script>
diff --git a/src/views/example/components/Dropdown/SourceUrl.vue b/src/views/example/components/Dropdown/SourceUrl.vue
index 8f47485a..dcc2f915 100644
--- a/src/views/example/components/Dropdown/SourceUrl.vue
+++ b/src/views/example/components/Dropdown/SourceUrl.vue
@@ -4,8 +4,16 @@
       Link
       <i class="el-icon-caret-bottom el-icon--right" />
     </el-button>
-    <el-dropdown-menu slot="dropdown" class="no-padding no-border" style="width:400px">
-      <el-form-item label-width="0px" style="margin-bottom: 0px" prop="source_uri">
+    <el-dropdown-menu
+      slot="dropdown"
+      class="no-padding no-border"
+      style="width:400px"
+    >
+      <el-form-item
+        label-width="0px"
+        style="margin-bottom: 0px"
+        prop="source_uri"
+      >
         <el-input v-model="source_uri" placeholder="Please enter the content">
           <template slot="prepend">
             URL
@@ -21,18 +29,18 @@ export default {
   props: {
     value: {
       type: String,
-      default: ''
+      default: ""
     }
   },
   computed: {
     source_uri: {
       get() {
-        return this.value
+        return this.value;
       },
       set(val) {
-        this.$emit('input', val)
+        this.$emit("input", val);
       }
     }
   }
-}
+};
 </script>
diff --git a/src/views/example/components/Dropdown/index.js b/src/views/example/components/Dropdown/index.js
index bc0c171b..63f9859d 100644
--- a/src/views/example/components/Dropdown/index.js
+++ b/src/views/example/components/Dropdown/index.js
@@ -1,3 +1,3 @@
-export { default as CommentDropdown } from './Comment'
-export { default as PlatformDropdown } from './Platform'
-export { default as SourceUrlDropdown } from './SourceUrl'
+export { default as CommentDropdown } from "./Comment";
+export { default as PlatformDropdown } from "./Platform";
+export { default as SourceUrlDropdown } from "./SourceUrl";
diff --git a/src/views/example/components/Warning.vue b/src/views/example/components/Warning.vue
index 8d2a7e5a..21fb6637 100644
--- a/src/views/example/components/Warning.vue
+++ b/src/views/example/components/Warning.vue
@@ -1,13 +1,14 @@
 <template>
   <aside>
-    Creating and editing pages cannot be cached by keep-alive because keep-alive include does not currently support
-    caching based on routes, so it is currently cached based on component name. If you want to achieve a similar caching
-    effect, you can use a browser caching scheme such as localStorage. Or do not use keep-alive include to cache all
-    pages directly. See details
+    Creating and editing pages cannot be cached by keep-alive because keep-alive
+    include does not currently support caching based on routes, so it is
+    currently cached based on component name. If you want to achieve a similar
+    caching effect, you can use a browser caching scheme such as localStorage.
+    Or do not use keep-alive include to cache all pages directly. See details
     <a
       href="https://panjiachen.github.io/vue-element-admin-site/guide/essentials/tags-view.html"
       target="_blank"
-    >Document</a>
+      >Document</a
+    >
   </aside>
 </template>
-
diff --git a/src/views/example/create.vue b/src/views/example/create.vue
index 4d3a24b5..c69a96b2 100644
--- a/src/views/example/create.vue
+++ b/src/views/example/create.vue
@@ -3,11 +3,10 @@
 </template>
 
 <script>
-import ArticleDetail from './components/ArticleDetail'
+import ArticleDetail from "./components/ArticleDetail";
 
 export default {
-  name: 'CreateForm',
+  name: "CreateForm",
   components: { ArticleDetail }
-}
+};
 </script>
-
diff --git a/src/views/example/edit.vue b/src/views/example/edit.vue
index 87b61260..6aca0f16 100644
--- a/src/views/example/edit.vue
+++ b/src/views/example/edit.vue
@@ -3,11 +3,10 @@
 </template>
 
 <script>
-import ArticleDetail from './components/ArticleDetail'
+import ArticleDetail from "./components/ArticleDetail";
 
 export default {
-  name: 'EditForm',
+  name: "EditForm",
   components: { ArticleDetail }
-}
+};
 </script>
-
diff --git a/src/views/example/list.vue b/src/views/example/list.vue
index 7cdc4ac0..0baf826f 100644
--- a/src/views/example/list.vue
+++ b/src/views/example/list.vue
@@ -1,6 +1,13 @@
 <template>
   <div class="app-container">
-    <el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%">
+    <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>
@@ -9,7 +16,9 @@
 
       <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>{{
+            scope.row.timestamp | parseTime("{y}-{m}-{d} {h}:{i}")
+          }}</span>
         </template>
       </el-table-column>
 
@@ -21,21 +30,24 @@
 
       <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">
-            {{ row.status }}
-          </el-tag>
+        <template slot-scope="{ row }">
+          <el-tag :type="row.status | statusFilter">{{ 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">
+        <template slot-scope="{ row }">
+          <router-link :to="'/example/edit/' + row.id" class="link-type">
             <span>{{ row.title }}</span>
           </router-link>
         </template>
@@ -43,34 +55,40 @@
 
       <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">
-              Edit
-            </el-button>
+          <router-link :to="'/example/edit/' + scope.row.id">
+            <el-button type="primary" size="small" icon="el-icon-edit"
+              >Edit</el-button
+            >
           </router-link>
         </template>
       </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 { fetchList } from "@/api/article";
+import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination
 
 export default {
-  name: 'ArticleList',
+  name: "ArticleList",
   components: { Pagination },
   filters: {
     statusFilter(status) {
       const statusMap = {
-        published: 'success',
-        draft: 'info',
-        deleted: 'danger'
-      }
-      return statusMap[status]
+        published: "success",
+        draft: "info",
+        deleted: "danger"
+      };
+      return statusMap[status];
     }
   },
   data() {
@@ -82,22 +100,22 @@ export default {
         page: 1,
         limit: 20
       }
-    }
+    };
   },
   created() {
-    this.getList()
+    this.getList();
   },
   methods: {
     getList() {
-      this.listLoading = true
+      this.listLoading = true;
       fetchList(this.listQuery).then(response => {
-        this.list = response.data.items
-        this.total = response.data.total
-        this.listLoading = false
-      })
+        this.list = response.data.items;
+        this.total = response.data.total;
+        this.listLoading = false;
+      });
     }
   }
-}
+};
 </script>
 
 <style scoped>
diff --git a/src/views/excel/components/AutoWidthOption.vue b/src/views/excel/components/AutoWidthOption.vue
index 9050e659..08cc5a84 100644
--- a/src/views/excel/components/AutoWidthOption.vue
+++ b/src/views/excel/components/AutoWidthOption.vue
@@ -23,12 +23,12 @@ export default {
   computed: {
     autoWidth: {
       get() {
-        return this.value
+        return this.value;
       },
       set(val) {
-        this.$emit('input', val)
+        this.$emit("input", val);
       }
     }
   }
-}
+};
 </script>
diff --git a/src/views/excel/components/BookTypeOption.vue b/src/views/excel/components/BookTypeOption.vue
index af9fed39..465113f6 100644
--- a/src/views/excel/components/BookTypeOption.vue
+++ b/src/views/excel/components/BookTypeOption.vue
@@ -17,23 +17,23 @@ export default {
   props: {
     value: {
       type: String,
-      default: 'xlsx'
+      default: "xlsx"
     }
   },
   data() {
     return {
-      options: ['xlsx', 'csv', 'txt']
-    }
+      options: ["xlsx", "csv", "txt"]
+    };
   },
   computed: {
     bookType: {
       get() {
-        return this.value
+        return this.value;
       },
       set(val) {
-        this.$emit('input', val)
+        this.$emit("input", val);
       }
     }
   }
-}
+};
 </script>
diff --git a/src/views/excel/components/FilenameOption.vue b/src/views/excel/components/FilenameOption.vue
index 75092235..e29cb85a 100644
--- a/src/views/excel/components/FilenameOption.vue
+++ b/src/views/excel/components/FilenameOption.vue
@@ -1,7 +1,12 @@
 <template>
   <div style="display:inline-block;">
     <label class="radio-label" style="padding-left:0;">Filename: </label>
-    <el-input v-model="filename" placeholder="Please enter the file name (default excel-list)" style="width:345px;" prefix-icon="el-icon-document" />
+    <el-input
+      v-model="filename"
+      placeholder="Please enter the file name (default excel-list)"
+      style="width:345px;"
+      prefix-icon="el-icon-document"
+    />
   </div>
 </template>
 
@@ -10,18 +15,18 @@ export default {
   props: {
     value: {
       type: String,
-      default: ''
+      default: ""
     }
   },
   computed: {
     filename: {
       get() {
-        return this.value
+        return this.value;
       },
       set(val) {
-        this.$emit('input', val)
+        this.$emit("input", val);
       }
     }
   }
-}
+};
 </script>
diff --git a/src/views/excel/export-excel.vue b/src/views/excel/export-excel.vue
index e9d8c6ab..29a0d6f9 100644
--- a/src/views/excel/export-excel.vue
+++ b/src/views/excel/export-excel.vue
@@ -1,19 +1,35 @@
 <template>
   <div class="app-container">
-
     <div>
       <FilenameOption v-model="filename" />
       <AutoWidthOption v-model="autoWidth" />
       <BookTypeOption v-model="bookType" />
-      <el-button :loading="downloadLoading" style="margin:0 0 20px 20px;" type="primary" icon="document" @click="handleDownload">
+      <el-button
+        :loading="downloadLoading"
+        style="margin:0 0 20px 20px;"
+        type="primary"
+        icon="document"
+        @click="handleDownload"
+      >
         Export Excel
       </el-button>
-      <a href="https://panjiachen.github.io/vue-element-admin-site/feature/component/excel.html" target="_blank" style="margin-left:15px;">
+      <a
+        href="https://panjiachen.github.io/vue-element-admin-site/feature/component/excel.html"
+        target="_blank"
+        style="margin-left:15px;"
+      >
         <el-tag type="info">Documentation</el-tag>
       </a>
     </div>
 
-    <el-table v-loading="listLoading" :data="list" element-loading-text="拼命加载中" border fit highlight-current-row>
+    <el-table
+      v-loading="listLoading"
+      :data="list"
+      element-loading-text="拼命加载中"
+      border
+      fit
+      highlight-current-row
+    >
       <el-table-column align="center" label="Id" width="95">
         <template slot-scope="scope">
           {{ scope.$index }}
@@ -37,7 +53,9 @@
       <el-table-column align="center" label="Date" width="220">
         <template slot-scope="scope">
           <i class="el-icon-time" />
-          <span>{{ scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
+          <span>{{
+            scope.row.timestamp | parseTime("{y}-{m}-{d} {h}:{i}")
+          }}</span>
         </template>
       </el-table-column>
     </el-table>
@@ -45,65 +63,73 @@
 </template>
 
 <script>
-import { fetchList } from '@/api/article'
-import { parseTime } from '@/utils'
+import { fetchList } from "@/api/article";
+import { parseTime } from "@/utils";
 // options components
-import FilenameOption from './components/FilenameOption'
-import AutoWidthOption from './components/AutoWidthOption'
-import BookTypeOption from './components/BookTypeOption'
+import FilenameOption from "./components/FilenameOption";
+import AutoWidthOption from "./components/AutoWidthOption";
+import BookTypeOption from "./components/BookTypeOption";
 
 export default {
-  name: 'ExportExcel',
+  name: "ExportExcel",
   components: { FilenameOption, AutoWidthOption, BookTypeOption },
   data() {
     return {
       list: null,
       listLoading: true,
       downloadLoading: false,
-      filename: '',
+      filename: "",
       autoWidth: true,
-      bookType: 'xlsx'
-    }
+      bookType: "xlsx"
+    };
   },
   created() {
-    this.fetchData()
+    this.fetchData();
   },
   methods: {
     fetchData() {
-      this.listLoading = true
+      this.listLoading = true;
       fetchList().then(response => {
-        this.list = response.data.items
-        this.listLoading = false
-      })
+        this.list = response.data.items;
+        this.listLoading = false;
+      });
     },
     handleDownload() {
-      this.downloadLoading = true
-      import('@/vendor/Export2Excel').then(excel => {
-        const tHeader = ['Id', 'Title', 'Author', 'Readings', 'Date']
-        const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
-        const list = this.list
-        const data = this.formatJson(filterVal, list)
+      this.downloadLoading = true;
+      import("@/vendor/Export2Excel").then(excel => {
+        const tHeader = ["Id", "Title", "Author", "Readings", "Date"];
+        const filterVal = [
+          "id",
+          "title",
+          "author",
+          "pageviews",
+          "display_time"
+        ];
+        const list = this.list;
+        const data = this.formatJson(filterVal, list);
         excel.export_json_to_excel({
           header: tHeader,
           data,
           filename: this.filename,
           autoWidth: this.autoWidth,
           bookType: this.bookType
-        })
-        this.downloadLoading = false
-      })
+        });
+        this.downloadLoading = false;
+      });
     },
     formatJson(filterVal, jsonData) {
-      return jsonData.map(v => filterVal.map(j => {
-        if (j === 'timestamp') {
-          return parseTime(v[j])
-        } else {
-          return v[j]
-        }
-      }))
+      return jsonData.map(v =>
+        filterVal.map(j => {
+          if (j === "timestamp") {
+            return parseTime(v[j]);
+          } else {
+            return v[j];
+          }
+        })
+      );
     }
   }
-}
+};
 </script>
 
 <style>
diff --git a/src/views/excel/merge-header.vue b/src/views/excel/merge-header.vue
index c145932c..e4bcc375 100644
--- a/src/views/excel/merge-header.vue
+++ b/src/views/excel/merge-header.vue
@@ -1,7 +1,13 @@
 <template>
   <div class="app-container">
-
-    <el-button :loading="downloadLoading" style="margin-bottom:20px" type="primary" icon="document" @click="handleDownload">Export</el-button>
+    <el-button
+      :loading="downloadLoading"
+      style="margin-bottom:20px"
+      type="primary"
+      icon="document"
+      @click="handleDownload"
+      >Export</el-button
+    >
 
     <el-table
       ref="multipleTable"
@@ -37,65 +43,74 @@
       <el-table-column align="center" label="Date" width="220">
         <template slot-scope="scope">
           <i class="el-icon-time" />
-          <span>{{ scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
+          <span>{{
+            scope.row.timestamp | parseTime("{y}-{m}-{d} {h}:{i}")
+          }}</span>
         </template>
       </el-table-column>
     </el-table>
-
   </div>
 </template>
 
 <script>
-import { fetchList } from '@/api/article'
-import { parseTime } from '@/utils'
+import { fetchList } from "@/api/article";
+import { parseTime } from "@/utils";
 
 export default {
-  name: 'MergeHeader',
+  name: "MergeHeader",
   data() {
     return {
       list: null,
       listLoading: true,
       downloadLoading: false
-    }
+    };
   },
   created() {
-    this.fetchData()
+    this.fetchData();
   },
   methods: {
     fetchData() {
-      this.listLoading = true
+      this.listLoading = true;
       fetchList(this.listQuery).then(response => {
-        this.list = response.data.items
-        this.listLoading = false
-      })
+        this.list = response.data.items;
+        this.listLoading = false;
+      });
     },
     handleDownload() {
-      this.downloadLoading = true
-        import('@/vendor/Export2Excel').then(excel => {
-          const multiHeader = [['Id', 'Main Information', '', '', 'Date']]
-          const header = ['', 'Title', 'Author', 'Readings', '']
-          const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
-          const list = this.list
-          const data = this.formatJson(filterVal, list)
-          const merges = ['A1:A2', 'B1:D1', 'E1:E2']
-          excel.export_json_to_excel({
-            multiHeader,
-            header,
-            merges,
-            data
-          })
-          this.downloadLoading = false
-        })
+      this.downloadLoading = true;
+      import("@/vendor/Export2Excel").then(excel => {
+        const multiHeader = [["Id", "Main Information", "", "", "Date"]];
+        const header = ["", "Title", "Author", "Readings", ""];
+        const filterVal = [
+          "id",
+          "title",
+          "author",
+          "pageviews",
+          "display_time"
+        ];
+        const list = this.list;
+        const data = this.formatJson(filterVal, list);
+        const merges = ["A1:A2", "B1:D1", "E1:E2"];
+        excel.export_json_to_excel({
+          multiHeader,
+          header,
+          merges,
+          data
+        });
+        this.downloadLoading = false;
+      });
     },
     formatJson(filterVal, jsonData) {
-      return jsonData.map(v => filterVal.map(j => {
-        if (j === 'timestamp') {
-          return parseTime(v[j])
-        } else {
-          return v[j]
-        }
-      }))
+      return jsonData.map(v =>
+        filterVal.map(j => {
+          if (j === "timestamp") {
+            return parseTime(v[j]);
+          } else {
+            return v[j];
+          }
+        })
+      );
     }
   }
-}
+};
 </script>
diff --git a/src/views/excel/select-excel.vue b/src/views/excel/select-excel.vue
index e6ac34ba..26a08ea6 100644
--- a/src/views/excel/select-excel.vue
+++ b/src/views/excel/select-excel.vue
@@ -1,10 +1,25 @@
 <template>
   <div class="app-container">
-    <el-input v-model="filename" placeholder="Please enter the file name (default excel-list)" style="width:350px;" prefix-icon="el-icon-document" />
-    <el-button :loading="downloadLoading" style="margin-bottom:20px" type="primary" icon="document" @click="handleDownload">
+    <el-input
+      v-model="filename"
+      placeholder="Please enter the file name (default excel-list)"
+      style="width:350px;"
+      prefix-icon="el-icon-document"
+    />
+    <el-button
+      :loading="downloadLoading"
+      style="margin-bottom:20px"
+      type="primary"
+      icon="document"
+      @click="handleDownload"
+    >
       Export Selected Items
     </el-button>
-    <a href="https://panjiachen.github.io/vue-element-admin-site/feature/component/excel.html" target="_blank" style="margin-left:15px;">
+    <a
+      href="https://panjiachen.github.io/vue-element-admin-site/feature/component/excel.html"
+      target="_blank"
+      style="margin-left:15px;"
+    >
       <el-tag type="info">Documentation</el-tag>
     </a>
     <el-table
@@ -49,59 +64,65 @@
 </template>
 
 <script>
-import { fetchList } from '@/api/article'
+import { fetchList } from "@/api/article";
 
 export default {
-  name: 'SelectExcel',
+  name: "SelectExcel",
   data() {
     return {
       list: null,
       listLoading: true,
       multipleSelection: [],
       downloadLoading: false,
-      filename: ''
-    }
+      filename: ""
+    };
   },
   created() {
-    this.fetchData()
+    this.fetchData();
   },
   methods: {
     fetchData() {
-      this.listLoading = true
+      this.listLoading = true;
       fetchList(this.listQuery).then(response => {
-        this.list = response.data.items
-        this.listLoading = false
-      })
+        this.list = response.data.items;
+        this.listLoading = false;
+      });
     },
     handleSelectionChange(val) {
-      this.multipleSelection = val
+      this.multipleSelection = val;
     },
     handleDownload() {
       if (this.multipleSelection.length) {
-        this.downloadLoading = true
-        import('@/vendor/Export2Excel').then(excel => {
-          const tHeader = ['Id', 'Title', 'Author', 'Readings', 'Date']
-          const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
-          const list = this.multipleSelection
-          const data = this.formatJson(filterVal, list)
+        this.downloadLoading = true;
+        import("@/vendor/Export2Excel").then(excel => {
+          const tHeader = ["Id", "Title", "Author", "Readings", "Date"];
+          const filterVal = [
+            "id",
+            "title",
+            "author",
+            "pageviews",
+            "display_time"
+          ];
+          const list = this.multipleSelection;
+          const data = this.formatJson(filterVal, list);
           excel.export_json_to_excel({
             header: tHeader,
             data,
             filename: this.filename
-          })
-          this.$refs.multipleTable.clearSelection()
-          this.downloadLoading = false
-        })
+          });
+          this.$refs.multipleTable.clearSelection();
+          this.downloadLoading = false;
+        });
       } else {
         this.$message({
-          message: 'Please select at least one item',
-          type: 'warning'
-        })
+          message: "Please select at least one item",
+          type: "warning"
+        });
       }
     },
     formatJson(filterVal, jsonData) {
-      return jsonData.map(v => filterVal.map(j => v[j]))
+      return jsonData.map(v => filterVal.map(j => v[j]));
     }
   }
-}
+};
 </script>
diff --git a/src/views/excel/upload-excel.vue b/src/views/excel/upload-excel.vue
index 1772b7fd..dcd94713 100644
--- a/src/views/excel/upload-excel.vue
+++ b/src/views/excel/upload-excel.vue
@@ -1,42 +1,55 @@
 <template>
   <div class="app-container">
-    <upload-excel-component :on-success="handleSuccess" :before-upload="beforeUpload" />
-    <el-table :data="tableData" border highlight-current-row style="width: 100%;margin-top:20px;">
-      <el-table-column v-for="item of tableHeader" :key="item" :prop="item" :label="item" />
+    <upload-excel-component
+      :on-success="handleSuccess"
+      :before-upload="beforeUpload"
+    />
+    <el-table
+      :data="tableData"
+      border
+      highlight-current-row
+      style="width: 100%;margin-top:20px;"
+    >
+      <el-table-column
+        v-for="item of tableHeader"
+        :key="item"
+        :prop="item"
+        :label="item"
+      />
     </el-table>
   </div>
 </template>
 
 <script>
-import UploadExcelComponent from '@/components/UploadExcel/index.vue'
+import UploadExcelComponent from "@/components/UploadExcel/index.vue";
 
 export default {
-  name: 'UploadExcel',
+  name: "UploadExcel",
   components: { UploadExcelComponent },
   data() {
     return {
       tableData: [],
       tableHeader: []
-    }
+    };
   },
   methods: {
     beforeUpload(file) {
-      const isLt1M = file.size / 1024 / 1024 < 1
+      const isLt1M = file.size / 1024 / 1024 < 1;
 
       if (isLt1M) {
-        return true
+        return true;
       }
 
       this.$message({
-        message: 'Please do not upload files larger than 1m in size.',
-        type: 'warning'
-      })
-      return false
+        message: "Please do not upload files larger than 1m in size.",
+        type: "warning"
+      });
+      return false;
     },
     handleSuccess({ results, header }) {
-      this.tableData = results
-      this.tableHeader = header
+      this.tableData = results;
+      this.tableHeader = header;
     }
   }
-}
+};
 </script>
diff --git a/src/views/guide/index.vue b/src/views/guide/index.vue
index 4897c8fb..0c6bedba 100644
--- a/src/views/guide/index.vue
+++ b/src/views/guide/index.vue
@@ -1,36 +1,43 @@
 <template>
   <div class="app-container">
     <aside>
-      The guide page is useful for some people who entered the project for the first time. You can briefly introduce the
-      features of the project. Demo is based on
-      <a href="https://github.com/kamranahmedse/driver.js" target="_blank">driver.js.</a>
+      The guide page is useful for some people who entered the project for the
+      first time. You can briefly introduce the features of the project. Demo is
+      based on
+      <a href="https://github.com/kamranahmedse/driver.js" target="_blank"
+        >driver.js.</a
+      >
     </aside>
-    <el-button icon="el-icon-question" type="primary" @click.prevent.stop="guide">
+    <el-button
+      icon="el-icon-question"
+      type="primary"
+      @click.prevent.stop="guide"
+    >
       Show Guide
     </el-button>
   </div>
 </template>
 
 <script>
-import Driver from 'driver.js' // import driver.js
-import 'driver.js/dist/driver.min.css' // import driver.js css
-import steps from './steps'
+import Driver from "driver.js"; // import driver.js
+import "driver.js/dist/driver.min.css"; // import driver.js css
+import steps from "./steps";
 
 export default {
-  name: 'Guide',
+  name: "Guide",
   data() {
     return {
       driver: null
-    }
+    };
   },
   mounted() {
-    this.driver = new Driver()
+    this.driver = new Driver();
   },
   methods: {
     guide() {
-      this.driver.defineSteps(steps)
-      this.driver.start()
+      this.driver.defineSteps(steps);
+      this.driver.start();
     }
   }
-}
+};
 </script>
diff --git a/src/views/guide/steps.js b/src/views/guide/steps.js
index 283c672e..6dfc9c2d 100644
--- a/src/views/guide/steps.js
+++ b/src/views/guide/steps.js
@@ -1,53 +1,53 @@
 const steps = [
   {
-    element: '#hamburger-container',
+    element: "#hamburger-container",
     popover: {
-      title: 'Hamburger',
-      description: 'Open && Close sidebar',
-      position: 'bottom'
+      title: "Hamburger",
+      description: "Open && Close sidebar",
+      position: "bottom"
     }
   },
   {
-    element: '#breadcrumb-container',
+    element: "#breadcrumb-container",
     popover: {
-      title: 'Breadcrumb',
-      description: 'Indicate the current page location',
-      position: 'bottom'
+      title: "Breadcrumb",
+      description: "Indicate the current page location",
+      position: "bottom"
     }
   },
   {
-    element: '#header-search',
+    element: "#header-search",
     popover: {
-      title: 'Page Search',
-      description: 'Page search, quick navigation',
-      position: 'left'
+      title: "Page Search",
+      description: "Page search, quick navigation",
+      position: "left"
     }
   },
   {
-    element: '#screenfull',
+    element: "#screenfull",
     popover: {
-      title: 'Screenfull',
-      description: 'Set the page into fullscreen',
-      position: 'left'
+      title: "Screenfull",
+      description: "Set the page into fullscreen",
+      position: "left"
     }
   },
   {
-    element: '#size-select',
+    element: "#size-select",
     popover: {
-      title: 'Switch Size',
-      description: 'Switch the system size',
-      position: 'left'
+      title: "Switch Size",
+      description: "Switch the system size",
+      position: "left"
     }
   },
   {
-    element: '#tags-view-container',
+    element: "#tags-view-container",
     popover: {
-      title: 'Tags view',
-      description: 'The history of the page you visited',
-      position: 'bottom'
+      title: "Tags view",
+      description: "The history of the page you visited",
+      position: "bottom"
     },
     padding: 0
   }
-]
+];
 
-export default steps
+export default steps;
diff --git a/src/views/icons/element-icons.js b/src/views/icons/element-icons.js
index df722010..494c7200 100644
--- a/src/views/icons/element-icons.js
+++ b/src/views/icons/element-icons.js
@@ -1,74 +1,74 @@
 const elementIcons = [
-  'info',
-  'error',
-  'success',
-  'warning',
-  'question',
-  'back',
-  'arrow-left',
-  'arrow-down',
-  'arrow-right',
-  'arrow-up',
-  'caret-left',
-  'caret-bottom',
-  'caret-top',
-  'caret-right',
-  'd-arrow-left',
-  'd-arrow-right',
-  'minus',
-  'plus',
-  'remove',
-  'circle-plus',
-  'remove-outline',
-  'circle-plus-outline',
-  'close',
-  'check',
-  'circle-close',
-  'circle-check',
-  'circle-close-outline',
-  'circle-check-outline',
-  'zoom-out',
-  'zoom-in',
-  'd-caret',
-  'sort',
-  'sort-down',
-  'sort-up',
-  'tickets',
-  'document',
-  'goods',
-  'sold-out',
-  'news',
-  'message',
-  'date',
-  'printer',
-  'time',
-  'bell',
-  'mobile-phone',
-  'service',
-  'view',
-  'menu',
-  'more',
-  'more-outline',
-  'star-on',
-  'star-off',
-  'location',
-  'location-outline',
-  'phone',
-  'phone-outline',
-  'picture',
-  'picture-outline',
-  'delete',
-  'search',
-  'edit',
-  'edit-outline',
-  'rank',
-  'refresh',
-  'share',
-  'setting',
-  'upload',
-  'upload2',
-  'download',
-  'loading'
-]
+  "info",
+  "error",
+  "success",
+  "warning",
+  "question",
+  "back",
+  "arrow-left",
+  "arrow-down",
+  "arrow-right",
+  "arrow-up",
+  "caret-left",
+  "caret-bottom",
+  "caret-top",
+  "caret-right",
+  "d-arrow-left",
+  "d-arrow-right",
+  "minus",
+  "plus",
+  "remove",
+  "circle-plus",
+  "remove-outline",
+  "circle-plus-outline",
+  "close",
+  "check",
+  "circle-close",
+  "circle-check",
+  "circle-close-outline",
+  "circle-check-outline",
+  "zoom-out",
+  "zoom-in",
+  "d-caret",
+  "sort",
+  "sort-down",
+  "sort-up",
+  "tickets",
+  "document",
+  "goods",
+  "sold-out",
+  "news",
+  "message",
+  "date",
+  "printer",
+  "time",
+  "bell",
+  "mobile-phone",
+  "service",
+  "view",
+  "menu",
+  "more",
+  "more-outline",
+  "star-on",
+  "star-off",
+  "location",
+  "location-outline",
+  "phone",
+  "phone-outline",
+  "picture",
+  "picture-outline",
+  "delete",
+  "search",
+  "edit",
+  "edit-outline",
+  "rank",
+  "refresh",
+  "share",
+  "setting",
+  "upload",
+  "upload2",
+  "download",
+  "loading"
+];
 
-export default elementIcons
+export default elementIcons;
diff --git a/src/views/icons/index.vue b/src/views/icons/index.vue
index 3677afd6..cad99d1b 100644
--- a/src/views/icons/index.vue
+++ b/src/views/icons/index.vue
@@ -1,12 +1,19 @@
 <template>
   <div class="icons-container">
     <aside>
-      <a href="https://panjiachen.github.io/vue-element-admin-site/guide/advanced/icon.html" target="_blank">Add and use
+      <a
+        href="https://panjiachen.github.io/vue-element-admin-site/guide/advanced/icon.html"
+        target="_blank"
+        >Add and use
       </a>
     </aside>
     <el-tabs type="border-card">
       <el-tab-pane label="Icons">
-        <div v-for="item of svgIcons" :key="item" @click="handleClipboard(generateIconCode(item),$event)">
+        <div
+          v-for="item of svgIcons"
+          :key="item"
+          @click="handleClipboard(generateIconCode(item), $event)"
+        >
           <el-tooltip placement="top">
             <div slot="content">
               {{ generateIconCode(item) }}
@@ -19,7 +26,11 @@
         </div>
       </el-tab-pane>
       <el-tab-pane label="Element-UI Icons">
-        <div v-for="item of elementIcons" :key="item" @click="handleClipboard(generateElementIconCode(item),$event)">
+        <div
+          v-for="item of elementIcons"
+          :key="item"
+          @click="handleClipboard(generateElementIconCode(item), $event)"
+        >
           <el-tooltip placement="top">
             <div slot="content">
               {{ generateElementIconCode(item) }}
@@ -36,30 +47,30 @@
 </template>
 
 <script>
-import clipboard from '@/utils/clipboard'
-import svgIcons from './svg-icons'
-import elementIcons from './element-icons'
+import clipboard from "@/utils/clipboard";
+import svgIcons from "./svg-icons";
+import elementIcons from "./element-icons";
 
 export default {
-  name: 'Icons',
+  name: "Icons",
   data() {
     return {
       svgIcons,
       elementIcons
-    }
+    };
   },
   methods: {
     generateIconCode(symbol) {
-      return `<svg-icon icon-class="${symbol}" />`
+      return `<svg-icon icon-class="${symbol}" />`;
     },
     generateElementIconCode(symbol) {
-      return `<i class="el-icon-${symbol}" />`
+      return `<i class="el-icon-${symbol}" />`;
     },
     handleClipboard(text, event) {
-      clipboard(text, event)
+      clipboard(text, event);
     }
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/icons/svg-icons.js b/src/views/icons/svg-icons.js
index 1e3c66d2..4b220e12 100644
--- a/src/views/icons/svg-icons.js
+++ b/src/views/icons/svg-icons.js
@@ -1,10 +1,10 @@
-const req = require.context('../../icons/svg', false, /\.svg$/)
-const requireAll = requireContext => requireContext.keys()
+const req = require.context("../../icons/svg", false, /\.svg$/);
+const requireAll = requireContext => requireContext.keys();
 
-const re = /\.\/(.*)\.svg/
+const re = /\.\/(.*)\.svg/;
 
 const svgIcons = requireAll(req).map(i => {
-  return i.match(re)[1]
-})
+  return i.match(re)[1];
+});
 
-export default svgIcons
+export default svgIcons;
diff --git a/src/views/login/auth-redirect.vue b/src/views/login/auth-redirect.vue
index 7df89342..65ee12bd 100644
--- a/src/views/login/auth-redirect.vue
+++ b/src/views/login/auth-redirect.vue
@@ -1,15 +1,15 @@
 <script>
 export default {
-  name: 'AuthRedirect',
+  name: "AuthRedirect",
   created() {
-    const hash = window.location.search.slice(1)
+    const hash = window.location.search.slice(1);
     if (window.localStorage) {
-      window.localStorage.setItem('x-admin-oauth-code', hash)
-      window.close()
+      window.localStorage.setItem("x-admin-oauth-code", hash);
+      window.close();
     }
   },
   render: function(h) {
-    return h() // avoid warning message
+    return h(); // avoid warning message
   }
-}
+};
 </script>
diff --git a/src/views/login/components/SocialSignin.vue b/src/views/login/components/SocialSignin.vue
index e9bf4f21..f85e7303 100644
--- a/src/views/login/components/SocialSignin.vue
+++ b/src/views/login/components/SocialSignin.vue
@@ -1,11 +1,15 @@
 <template>
   <div class="social-signup-container">
     <div class="sign-btn" @click="wechatHandleClick('wechat')">
-      <span class="wx-svg-container"><svg-icon icon-class="wechat" class="icon" /></span>
+      <span class="wx-svg-container"
+        ><svg-icon icon-class="wechat" class="icon"
+      /></span>
       WeChat
     </div>
     <div class="sign-btn" @click="tencentHandleClick('tencent')">
-      <span class="qq-svg-container"><svg-icon icon-class="qq" class="icon" /></span>
+      <span class="qq-svg-container"
+        ><svg-icon icon-class="qq" class="icon"
+      /></span>
       QQ
     </div>
   </div>
@@ -15,10 +19,10 @@
 // import openWindow from '@/utils/open-window'
 
 export default {
-  name: 'SocialSignin',
+  name: "SocialSignin",
   methods: {
     wechatHandleClick(thirdpart) {
-      alert('ok')
+      alert("ok");
       // this.$store.commit('SET_AUTH_TYPE', thirdpart)
       // const appid = 'xxxxx'
       // const redirect_uri = encodeURIComponent('xxx/redirect?redirect=' + window.location.origin + '/auth-redirect')
@@ -26,7 +30,7 @@ export default {
       // openWindow(url, thirdpart, 540, 540)
     },
     tencentHandleClick(thirdpart) {
-      alert('ok')
+      alert("ok");
       // this.$store.commit('SET_AUTH_TYPE', thirdpart)
       // const client_id = 'xxxxx'
       // const redirect_uri = encodeURIComponent('xxx/redirect?redirect=' + window.location.origin + '/auth-redirect')
@@ -34,39 +38,39 @@ export default {
       // openWindow(url, thirdpart, 540, 540)
     }
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>
-  .social-signup-container {
-    margin: 20px 0;
-    .sign-btn {
-      display: inline-block;
-      cursor: pointer;
-    }
-    .icon {
-      color: #fff;
-      font-size: 24px;
-      margin-top: 8px;
-    }
-    .wx-svg-container,
-    .qq-svg-container {
-      display: inline-block;
-      width: 40px;
-      height: 40px;
-      line-height: 40px;
-      text-align: center;
-      padding-top: 1px;
-      border-radius: 4px;
-      margin-bottom: 20px;
-      margin-right: 5px;
-    }
-    .wx-svg-container {
-      background-color: #24da70;
-    }
-    .qq-svg-container {
-      background-color: #6BA2D6;
-      margin-left: 50px;
-    }
+.social-signup-container {
+  margin: 20px 0;
+  .sign-btn {
+    display: inline-block;
+    cursor: pointer;
   }
+  .icon {
+    color: #fff;
+    font-size: 24px;
+    margin-top: 8px;
+  }
+  .wx-svg-container,
+  .qq-svg-container {
+    display: inline-block;
+    width: 40px;
+    height: 40px;
+    line-height: 40px;
+    text-align: center;
+    padding-top: 1px;
+    border-radius: 4px;
+    margin-bottom: 20px;
+    margin-right: 5px;
+  }
+  .wx-svg-container {
+    background-color: #24da70;
+  }
+  .qq-svg-container {
+    background-color: #6ba2d6;
+    margin-left: 50px;
+  }
+}
 </style>
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 5fb3f6e3..cc8e0655 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -1,7 +1,13 @@
 <template>
   <div class="login-container">
-    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" autocomplete="on" label-position="left">
-
+    <el-form
+      ref="loginForm"
+      :model="loginForm"
+      :rules="loginRules"
+      class="login-form"
+      autocomplete="on"
+      label-position="left"
+    >
       <div class="title-container">
         <h3 class="title">Login Form</h3>
       </div>
@@ -21,7 +27,12 @@
         />
       </el-form-item>
 
-      <el-tooltip v-model="capsTooltip" content="Caps lock is On" placement="right" manual>
+      <el-tooltip
+        v-model="capsTooltip"
+        content="Caps lock is On"
+        placement="right"
+        manual
+      >
         <el-form-item prop="password">
           <span class="svg-container">
             <svg-icon icon-class="password" />
@@ -40,12 +51,20 @@
             @keyup.enter.native="handleLogin"
           />
           <span class="show-pwd" @click="showPwd">
-            <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
+            <svg-icon
+              :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"
+            />
           </span>
         </el-form-item>
       </el-tooltip>
 
-      <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">Login</el-button>
+      <el-button
+        :loading="loading"
+        type="primary"
+        style="width:100%;margin-bottom:30px;"
+        @click.native.prevent="handleLogin"
+        >Login</el-button
+      >
 
       <div style="position:relative">
         <div class="tips">
@@ -57,68 +76,77 @@
           <span>Password : any</span>
         </div>
 
-        <el-button class="thirdparty-button" type="primary" @click="showDialog=true">
+        <el-button
+          class="thirdparty-button"
+          type="primary"
+          @click="showDialog = true"
+        >
           Or connect with
         </el-button>
       </div>
     </el-form>
 
     <el-dialog title="Or connect with" :visible.sync="showDialog">
-      Can not be simulated on local, so please combine you own business simulation! ! !
-      <br>
-      <br>
-      <br>
+      Can not be simulated on local, so please combine you own business
+      simulation! ! !
+      <br />
+      <br />
+      <br />
       <social-sign />
     </el-dialog>
   </div>
 </template>
 
 <script>
-import { validUsername } from '@/utils/validate'
-import SocialSign from './components/SocialSignin'
+import { validUsername } from "@/utils/validate";
+import SocialSign from "./components/SocialSignin";
 
 export default {
-  name: 'Login',
+  name: "Login",
   components: { SocialSign },
   data() {
     const validateUsername = (rule, value, callback) => {
       if (!validUsername(value)) {
-        callback(new Error('Please enter the correct user name'))
+        callback(new Error("Please enter the correct user name"));
       } else {
-        callback()
+        callback();
       }
-    }
+    };
     const validatePassword = (rule, value, callback) => {
       if (value.length < 6) {
-        callback(new Error('The password can not be less than 6 digits'))
+        callback(new Error("The password can not be less than 6 digits"));
       } else {
-        callback()
+        callback();
       }
-    }
+    };
     return {
       loginForm: {
-        username: 'admin',
-        password: '111111'
+        username: "admin",
+        password: "111111"
       },
       loginRules: {
-        username: [{ required: true, trigger: 'blur', validator: validateUsername }],
-        password: [{ required: true, trigger: 'blur', validator: validatePassword }]
+        username: [
+          { required: true, trigger: "blur", validator: validateUsername }
+        ],
+        password: [
+          { required: true, trigger: "blur", validator: validatePassword }
+        ]
       },
-      passwordType: 'password',
+      passwordType: "password",
       capsTooltip: false,
       loading: false,
       showDialog: false,
       redirect: undefined,
       otherQuery: {}
-    }
+    };
   },
   watch: {
     $route: {
       handler: function(route) {
-        const query = route.query
+        const query = route.query;
         if (query) {
-          this.redirect = query.redirect
-          this.otherQuery = this.getOtherQuery(query)
+          this.redirect = query.redirect;
+          this.otherQuery = this.getOtherQuery(query);
         }
       },
       immediate: true
@@ -128,10 +156,10 @@ export default {
     // window.addEventListener('storage', this.afterQRScan)
   },
   mounted() {
-    if (this.loginForm.username === '') {
-      this.$refs.username.focus()
-    } else if (this.loginForm.password === '') {
-      this.$refs.password.focus()
+    if (this.loginForm.username === "") {
+      this.$refs.username.focus();
+    } else if (this.loginForm.password === "") {
+      this.$refs.password.focus();
     }
   },
   destroyed() {
@@ -140,51 +168,58 @@ export default {
   methods: {
     checkCapslock({ shiftKey, key } = {}) {
       if (key && key.length === 1) {
-        if (shiftKey && (key >= 'a' && key <= 'z') || !shiftKey && (key >= 'A' && key <= 'Z')) {
-          this.capsTooltip = true
+        if (
+          (shiftKey && (key >= "a" && key <= "z")) ||
+          (!shiftKey && (key >= "A" && key <= "Z"))
+        ) {
+          this.capsTooltip = true;
         } else {
-          this.capsTooltip = false
+          this.capsTooltip = false;
         }
       }
-      if (key === 'CapsLock' && this.capsTooltip === true) {
-        this.capsTooltip = false
+      if (key === "CapsLock" && this.capsTooltip === true) {
+        this.capsTooltip = false;
       }
     },
     showPwd() {
-      if (this.passwordType === 'password') {
-        this.passwordType = ''
+      if (this.passwordType === "password") {
+        this.passwordType = "";
       } else {
-        this.passwordType = 'password'
+        this.passwordType = "password";
       }
       this.$nextTick(() => {
-        this.$refs.password.focus()
-      })
+        this.$refs.password.focus();
+      });
     },
     handleLogin() {
       this.$refs.loginForm.validate(valid => {
         if (valid) {
-          this.loading = true
-          this.$store.dispatch('user/login', this.loginForm)
+          this.loading = true;
+          this.$store
+            .dispatch("user/login", this.loginForm)
             .then(() => {
-              this.$router.push({ path: this.redirect || '/', query: this.otherQuery })
-              this.loading = false
+              this.$router.push({
+                path: this.redirect || "/",
+                query: this.otherQuery
+              });
+              this.loading = false;
             })
             .catch(() => {
-              this.loading = false
-            })
+              this.loading = false;
+            });
         } else {
-          console.log('error submit!!')
-          return false
+          console.log("error submit!!");
+          return false;
         }
-      })
+      });
     },
     getOtherQuery(query) {
       return Object.keys(query).reduce((acc, cur) => {
-        if (cur !== 'redirect') {
-          acc[cur] = query[cur]
+        if (cur !== "redirect") {
+          acc[cur] = query[cur];
         }
-        return acc
-      }, {})
+        return acc;
+      }, {});
     }
     // afterQRScan() {
     //   if (e.key === 'x-admin-oauth-code') {
@@ -205,15 +240,15 @@ export default {
     //   }
     // }
   }
-}
+};
 </script>
 
 <style lang="scss">
 /* 修复input 背景不协调 和光标变色 */
 /* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
 
-$bg:#283443;
-$light_gray:#fff;
+$bg: #283443;
+$light_gray: #fff;
 $cursor: #fff;
 
 @supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
@@ -256,9 +291,9 @@ $cursor: #fff;
 </style>
 
 <style lang="scss" scoped>
-$bg:#2d3a4b;
-$dark_gray:#889aa4;
-$light_gray:#eee;
+$bg: #2d3a4b;
+$dark_gray: #889aa4;
+$light_gray: #eee;
 
 .login-container {
   min-height: 100%;
diff --git a/src/views/pdf/content.js b/src/views/pdf/content.js
index e62b1a2b..d5bc71d2 100644
--- a/src/views/pdf/content.js
+++ b/src/views/pdf/content.js
@@ -1,4 +1,4 @@
-const title = 'Plans for the Next Iteration of Vue.js'
+const title = "Plans for the Next Iteration of Vue.js";
 
 const content = `<p>Last week at<a href="https://vuejs.london/summary" rel="nofollow">Vue.js London</a>I gave a brief sneak peek of what’s coming in the next major version of Vue. This post provides an in-depth overview of the plan.</p>
 <p><img class=" wscnph" src="https://wpimg.wallstcn.com/b8a1d7be-0b73-41b8-be8c-7c01c93cab66.png" data-wscntype="image" data-wscnh="742" data-wscnw="692" /></p>
@@ -48,11 +48,11 @@ const content = `<p>Last week at<a href="https://vuejs.london/summary" rel="nofo
 <h4>7. IE11build</h4>
 <p>The last task before the final release will be the IE11 compatibility build as mentioned above.</p>
 <h4>8. FinalRelease</h4>
-<p>In all honesty, we don’t know when this will happen yet, but likely in 2019. Again, we care more about shipping something that is solid and stable rather than hitting specific dates. There is a lot of work to be done, but we are excited for what’s coming next!</p>`
+<p>In all honesty, we don’t know when this will happen yet, but likely in 2019. Again, we care more about shipping something that is solid and stable rather than hitting specific dates. There is a lot of work to be done, but we are excited for what’s coming next!</p>`;
 
 const data = {
   title,
   content
-}
+};
 
-export default data
+export default data;
diff --git a/src/views/pdf/download.vue b/src/views/pdf/download.vue
index bd0b3be2..74ba12bb 100644
--- a/src/views/pdf/download.vue
+++ b/src/views/pdf/download.vue
@@ -1,58 +1,66 @@
 <template>
-  <div v-loading.fullscreen.lock="fullscreenLoading" class="main-article" element-loading-text="Efforts to generate PDF">
+  <div
+    v-loading.fullscreen.lock="fullscreenLoading"
+    class="main-article"
+    element-loading-text="Efforts to generate PDF"
+  >
     <div class="article__heading">
       <div class="article__heading__title">
         {{ article.title }}
       </div>
     </div>
     <div style="color: #ccc;">
-      This article is from Evan You on <a target="_blank" href="https://medium.com/the-vue-point/plans-for-the-next-iteration-of-vue-js-777ffea6fabf">medium</a>
+      This article is from Evan You on
+      <a
+        target="_blank"
+        href="https://medium.com/the-vue-point/plans-for-the-next-iteration-of-vue-js-777ffea6fabf"
+        >medium</a
+      >
     </div>
     <div ref="content" class="node-article-content" v-html="article.content" />
   </div>
 </template>
 
 <script>
-
 export default {
   data() {
     return {
-      article: '',
+      article: "",
       fullscreenLoading: true
-    }
+    };
   },
   mounted() {
-    this.fetchData()
+    this.fetchData();
   },
   methods: {
     fetchData() {
-       import('./content.js').then(data => {
-         const { title } = data.default
-         document.title = title
-         this.article = data.default
-         setTimeout(() => {
-           this.fullscreenLoading = false
-           this.$nextTick(() => {
-             window.print()
-           })
-         }, 3000)
-       })
+      import("./content.js").then(data => {
+        const { title } = data.default;
+        document.title = title;
+        this.article = data.default;
+        setTimeout(() => {
+          this.fullscreenLoading = false;
+          this.$nextTick(() => {
+            window.print();
+          });
+        }, 3000);
+      });
     }
   }
-}
+};
 </script>
 
 <style lang="scss">
 @mixin clearfix {
   &:before {
     display: table;
-    content: '';
+    content: "";
     clear: both;
   }
 
   &:after {
     display: table;
-    content: '';
+    content: "";
     clear: both;
   }
 }
@@ -94,9 +102,10 @@ export default {
   letter-spacing: 0.5px;
   line-height: 28px;
   margin-bottom: 30px;
-  font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif;
+  font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman",
+    Times, serif;
 
-  &> :last-child {
+  & > :last-child {
     margin-bottom: 0;
   }
 
@@ -117,8 +126,7 @@ export default {
     font-style: normal;
     font-size: 21px;
     line-height: 1.58;
-    letter-spacing: -.003em;
-
+    letter-spacing: -0.003em;
   }
 
   ul {
@@ -129,12 +137,12 @@ export default {
     --x-height-multiplier: 0.375;
     --baseline-multiplier: 0.17;
 
-    letter-spacing: .01rem;
+    letter-spacing: 0.01rem;
     font-weight: 400;
     font-style: normal;
     font-size: 21px;
     line-height: 1.58;
-    letter-spacing: -.003em;
+    letter-spacing: -0.003em;
     margin-left: 30px;
     margin-bottom: 14px;
   }
@@ -142,14 +150,18 @@ export default {
   a {
     text-decoration: none;
     background-repeat: repeat-x;
-    background-image: linear-gradient(to right, rgba(0, 0, 0, .84) 100%, rgba(0, 0, 0, 0) 0);
+    background-image: linear-gradient(
+      to right,
+      rgba(0, 0, 0, 0.84) 100%,
+      rgba(0, 0, 0, 0) 0
+    );
     background-size: 1px 1px;
     background-position: 0 calc(1em + 1px);
     padding: 0 6px;
   }
 
   code {
-    background: rgba(0, 0, 0, .05);
+    background: rgba(0, 0, 0, 0.05);
     padding: 3px 4px;
     margin: 0 2px;
     font-size: 16px;
@@ -168,14 +180,15 @@ export default {
   blockquote {
     --x-height-multiplier: 0.375;
     --baseline-multiplier: 0.17;
-    font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif;
-    letter-spacing: .01rem;
+    font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman",
+      Times, serif;
+    letter-spacing: 0.01rem;
     font-weight: 400;
     font-style: italic;
     font-size: 21px;
     line-height: 1.58;
-    letter-spacing: -.003em;
-    border-left: 3px solid rgba(0, 0, 0, .84);
+    letter-spacing: -0.003em;
+    border-left: 3px solid rgba(0, 0, 0, 0.84);
     padding-left: 20px;
     margin-left: -23px;
     padding-bottom: 2px;
@@ -190,7 +203,7 @@ export default {
   h4 {
     font-size: 34px;
     line-height: 1.15;
-    letter-spacing: -.015em;
+    letter-spacing: -0.015em;
     margin: 53px 0 0;
   }
 
diff --git a/src/views/pdf/index.vue b/src/views/pdf/index.vue
index 86278b38..532c9640 100644
--- a/src/views/pdf/index.vue
+++ b/src/views/pdf/index.vue
@@ -10,4 +10,3 @@
     </router-link>
   </div>
 </template>
-
diff --git a/src/views/permission/components/SwitchRoles.vue b/src/views/permission/components/SwitchRoles.vue
index 9fabbe19..5fd8e763 100644
--- a/src/views/permission/components/SwitchRoles.vue
+++ b/src/views/permission/components/SwitchRoles.vue
@@ -1,8 +1,6 @@
 <template>
   <div>
-    <div style="margin-bottom:15px;">
-      Your roles: {{ roles }}
-    </div>
+    <div style="margin-bottom:15px;">Your roles: {{ roles }}</div>
     Switch roles:
     <el-radio-group v-model="switchRoles">
       <el-radio-button label="editor" />
@@ -15,18 +13,18 @@
 export default {
   computed: {
     roles() {
-      return this.$store.getters.roles
+      return this.$store.getters.roles;
     },
     switchRoles: {
       get() {
-        return this.roles[0]
+        return this.roles[0];
       },
       set(val) {
-        this.$store.dispatch('user/changeRoles', val).then(() => {
-          this.$emit('change')
-        })
+        this.$store.dispatch("user/changeRoles", val).then(() => {
+          this.$emit("change");
+        });
       }
     }
   }
-}
+};
 </script>
diff --git a/src/views/permission/directive.vue b/src/views/permission/directive.vue
index 85478895..7a6b27a8 100644
--- a/src/views/permission/directive.vue
+++ b/src/views/permission/directive.vue
@@ -5,9 +5,14 @@
       <div>
         <span v-permission="['admin']" class="permission-alert">
           Only
-          <el-tag class="permission-tag" size="small">admin</el-tag> can see this
+          <el-tag class="permission-tag" size="small">admin</el-tag> can see
+          this
         </span>
-        <el-tag v-permission="['admin']" class="permission-sourceCode" type="info">
+        <el-tag
+          v-permission="['admin']"
+          class="permission-sourceCode"
+          type="info"
+        >
           v-permission="['admin']"
         </el-tag>
       </div>
@@ -15,29 +20,42 @@
       <div>
         <span v-permission="['editor']" class="permission-alert">
           Only
-          <el-tag class="permission-tag" size="small">editor</el-tag> can see this
+          <el-tag class="permission-tag" size="small">editor</el-tag> can see
+          this
         </span>
-        <el-tag v-permission="['editor']" class="permission-sourceCode" type="info">
+        <el-tag
+          v-permission="['editor']"
+          class="permission-sourceCode"
+          type="info"
+        >
           v-permission="['editor']"
         </el-tag>
       </div>
 
       <div>
-        <span v-permission="['admin','editor']" class="permission-alert">
+        <span v-permission="['admin', 'editor']" class="permission-alert">
           Both
           <el-tag class="permission-tag" size="small">admin</el-tag> and
-          <el-tag class="permission-tag" size="small">editor</el-tag> can see this
+          <el-tag class="permission-tag" size="small">editor</el-tag> can see
+          this
         </span>
-        <el-tag v-permission="['admin','editor']" class="permission-sourceCode" type="info">
+        <el-tag
+          v-permission="['admin', 'editor']"
+          class="permission-sourceCode"
+          type="info"
+        >
           v-permission="['admin','editor']"
         </el-tag>
       </div>
     </div>
 
-    <div :key="'checkPermission'+key" style="margin-top:60px;">
+    <div :key="'checkPermission' + key" style="margin-top:60px;">
       <aside>
-        In some cases, using v-permission will have no effect. For example: Element-UI's Tab component or el-table-column and other scenes that dynamically render dom. You can only do this with v-if.
-        <br> e.g.
+        In some cases, using v-permission will have no effect. For example:
+        Element-UI's Tab component or el-table-column and other scenes that
+        dynamically render dom. You can only do this with v-if.
+        <br />
+        e.g.
       </aside>
 
       <el-tabs type="border-card" style="width:550px;">
@@ -55,7 +73,10 @@
           </el-tag>
         </el-tab-pane>
 
-        <el-tab-pane v-if="checkPermission(['admin','editor'])" label="Admin-OR-Editor">
+        <el-tab-pane
+          v-if="checkPermission(['admin', 'editor'])"
+          label="Admin-OR-Editor"
+        >
           Both admin or editor can see this
           <el-tag class="permission-sourceCode" type="info">
             v-if="checkPermission(['admin','editor'])"
@@ -67,31 +88,31 @@
 </template>
 
 <script>
-import permission from '@/directive/permission/index.js' // 权限判断指令
-import checkPermission from '@/utils/permission' // 权限判断函数
-import SwitchRoles from './components/SwitchRoles'
+import permission from "@/directive/permission/index.js"; // 权限判断指令
+import checkPermission from "@/utils/permission"; // 权限判断函数
+import SwitchRoles from "./components/SwitchRoles";
 
 export default {
-  name: 'DirectivePermission',
+  name: "DirectivePermission",
   components: { SwitchRoles },
   directives: { permission },
   data() {
     return {
       key: 1 // 为了能每次切换权限的时候重新初始化指令
-    }
+    };
   },
   methods: {
     checkPermission,
     handleRolesChange() {
-      this.key++
+      this.key++;
     }
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>
 .app-container {
-  /deep/ .permission-alert {
+  ::v-deep .permission-alert {
     width: 320px;
     margin-top: 15px;
     background-color: #f0f9eb;
@@ -100,12 +121,11 @@ export default {
     border-radius: 4px;
     display: inline-block;
   }
-  /deep/ .permission-sourceCode {
+  ::v-deep .permission-sourceCode {
     margin-left: 15px;
   }
-  /deep/ .permission-tag {
+  ::v-deep .permission-tag {
     background-color: #ecf5ff;
   }
 }
 </style>
-
diff --git a/src/views/permission/page.vue b/src/views/permission/page.vue
index 5291a782..07271722 100644
--- a/src/views/permission/page.vue
+++ b/src/views/permission/page.vue
@@ -5,15 +5,15 @@
 </template>
 
 <script>
-import SwitchRoles from './components/SwitchRoles'
+import SwitchRoles from "./components/SwitchRoles";
 
 export default {
-  name: 'PagePermission',
+  name: "PagePermission",
   components: { SwitchRoles },
   methods: {
     handleRolesChange() {
-      this.$router.push({ path: '/permission/index?' + +new Date() })
+      this.$router.push({ path: "/permission/index?" + +new Date() });
     }
   }
-}
+};
 </script>
diff --git a/src/views/permission/role.vue b/src/views/permission/role.vue
index 38e085e5..bfa27070 100644
--- a/src/views/permission/role.vue
+++ b/src/views/permission/role.vue
@@ -20,13 +20,20 @@
       </el-table-column>
       <el-table-column align="center" label="Operations">
         <template slot-scope="scope">
-          <el-button type="primary" size="small" @click="handleEdit(scope)">Edit</el-button>
-          <el-button type="danger" size="small" @click="handleDelete(scope)">Delete</el-button>
+          <el-button type="primary" size="small" @click="handleEdit(scope)"
+            >Edit</el-button
+          >
+          <el-button type="danger" size="small" @click="handleDelete(scope)"
+            >Delete</el-button
+          >
         </template>
       </el-table-column>
     </el-table>
 
-    <el-dialog :visible.sync="dialogVisible" :title="dialogType==='edit'?'Edit Role':'New Role'">
+    <el-dialog
+      :visible.sync="dialogVisible"
+      :title="dialogType === 'edit' ? 'Edit Role' : 'New Role'"
+    >
       <el-form :model="role" label-width="80px" label-position="left">
         <el-form-item label="Name">
           <el-input v-model="role.name" placeholder="Role Name" />
@@ -34,7 +41,7 @@
         <el-form-item label="Desc">
           <el-input
             v-model="role.description"
-            :autosize="{ minRows: 2, maxRows: 4}"
+            :autosize="{ minRows: 2, maxRows: 4 }"
             type="textarea"
             placeholder="Role Description"
           />
@@ -52,7 +59,9 @@
         </el-form-item>
       </el-form>
       <div style="text-align:right;">
-        <el-button type="danger" @click="dialogVisible=false">Cancel</el-button>
+        <el-button type="danger" @click="dialogVisible = false"
+          >Cancel</el-button
+        >
         <el-button type="primary" @click="confirmRole">Confirm</el-button>
       </div>
     </el-dialog>
@@ -60,16 +69,22 @@
 </template>
 
 <script>
-import path from 'path'
-import { deepClone } from '@/utils'
-import { getRoutes, getRoles, addRole, deleteRole, updateRole } from '@/api/role'
+import path from "path";
+import { deepClone } from "@/utils";
+import {
+  getRoutes,
+  getRoles,
+  addRole,
+  deleteRole,
+  updateRole
+} from "@/api/role";
 
 const defaultRole = {
-  key: '',
-  name: '',
-  description: '',
+  key: "",
+  name: "",
+  description: "",
   routes: []
-}
+};
 
 export default {
   data() {
@@ -78,184 +93,201 @@ export default {
       routes: [],
       rolesList: [],
       dialogVisible: false,
-      dialogType: 'new',
+      dialogType: "new",
       checkStrictly: false,
       defaultProps: {
-        children: 'children',
-        label: 'title'
+        children: "children",
+        label: "title"
       }
-    }
+    };
   },
   computed: {
     routesData() {
-      return this.routes
+      return this.routes;
     }
   },
   created() {
     // Mock: get all routes and roles list from server
-    this.getRoutes()
-    this.getRoles()
+    this.getRoutes();
+    this.getRoles();
   },
   methods: {
     async getRoutes() {
-      const res = await getRoutes()
-      this.serviceRoutes = res.data
-      this.routes = this.generateRoutes(res.data)
+      const res = await getRoutes();
+      this.serviceRoutes = res.data;
+      this.routes = this.generateRoutes(res.data);
     },
     async getRoles() {
-      const res = await getRoles()
-      this.rolesList = res.data
+      const res = await getRoles();
+      this.rolesList = res.data;
     },
 
     // Reshape the routes structure so that it looks the same as the sidebar
-    generateRoutes(routes, basePath = '/') {
-      const res = []
+    generateRoutes(routes, basePath = "/") {
+      const res = [];
 
       for (let route of routes) {
         // skip some route
-        if (route.hidden) { continue }
+        if (route.hidden) {
+          continue;
+        }
 
-        const onlyOneShowingChild = this.onlyOneShowingChild(route.children, route)
+        const onlyOneShowingChild = this.onlyOneShowingChild(
+          route.children,
+          route
+        );
 
         if (route.children && onlyOneShowingChild && !route.alwaysShow) {
-          route = onlyOneShowingChild
+          route = onlyOneShowingChild;
         }
 
         const data = {
           path: path.resolve(basePath, route.path),
           title: route.meta && route.meta.title
-
-        }
+        };
 
         // recursive child routes
         if (route.children) {
-          data.children = this.generateRoutes(route.children, data.path)
+          data.children = this.generateRoutes(route.children, data.path);
         }
-        res.push(data)
+        res.push(data);
       }
-      return res
+      return res;
     },
     generateArr(routes) {
-      let data = []
+      let data = [];
       routes.forEach(route => {
-        data.push(route)
+        data.push(route);
         if (route.children) {
-          const temp = this.generateArr(route.children)
+          const temp = this.generateArr(route.children);
           if (temp.length > 0) {
-            data = [...data, ...temp]
+            data = [...data, ...temp];
           }
         }
-      })
-      return data
+      });
+      return data;
     },
     handleAddRole() {
-      this.role = Object.assign({}, defaultRole)
+      this.role = Object.assign({}, defaultRole);
       if (this.$refs.tree) {
-        this.$refs.tree.setCheckedNodes([])
+        this.$refs.tree.setCheckedNodes([]);
       }
-      this.dialogType = 'new'
-      this.dialogVisible = true
+      this.dialogType = "new";
+      this.dialogVisible = true;
     },
     handleEdit(scope) {
-      this.dialogType = 'edit'
-      this.dialogVisible = true
-      this.checkStrictly = true
-      this.role = deepClone(scope.row)
+      this.dialogType = "edit";
+      this.dialogVisible = true;
+      this.checkStrictly = true;
+      this.role = deepClone(scope.row);
       this.$nextTick(() => {
-        const routes = this.generateRoutes(this.role.routes)
-        this.$refs.tree.setCheckedNodes(this.generateArr(routes))
+        const routes = this.generateRoutes(this.role.routes);
+        this.$refs.tree.setCheckedNodes(this.generateArr(routes));
         // set checked state of a node not affects its father and child nodes
-        this.checkStrictly = false
-      })
+        this.checkStrictly = false;
+      });
     },
     handleDelete({ $index, row }) {
-      this.$confirm('Confirm to remove the role?', 'Warning', {
-        confirmButtonText: 'Confirm',
-        cancelButtonText: 'Cancel',
-        type: 'warning'
+      this.$confirm("Confirm to remove the role?", "Warning", {
+        confirmButtonText: "Confirm",
+        cancelButtonText: "Cancel",
+        type: "warning"
       })
-        .then(async() => {
-          await deleteRole(row.key)
-          this.rolesList.splice($index, 1)
+        .then(async () => {
+          await deleteRole(row.key);
+          this.rolesList.splice($index, 1);
           this.$message({
-            type: 'success',
-            message: 'Delete succed!'
-          })
+            type: "success",
+            message: "Delete succed!"
+          });
         })
-        .catch(err => { console.error(err) })
+        .catch(err => {
+          console.error(err);
+        });
     },
-    generateTree(routes, basePath = '/', checkedKeys) {
-      const res = []
+    generateTree(routes, basePath = "/", checkedKeys) {
+      const res = [];
 
       for (const route of routes) {
-        const routePath = path.resolve(basePath, route.path)
+        const routePath = path.resolve(basePath, route.path);
 
         // recursive child routes
         if (route.children) {
-          route.children = this.generateTree(route.children, routePath, checkedKeys)
+          route.children = this.generateTree(
+            route.children,
+            routePath,
+            checkedKeys
+          );
         }
 
-        if (checkedKeys.includes(routePath) || (route.children && route.children.length >= 1)) {
-          res.push(route)
+        if (
+          checkedKeys.includes(routePath) ||
+          (route.children && route.children.length >= 1)
+        ) {
+          res.push(route);
         }
       }
-      return res
+      return res;
     },
     async confirmRole() {
-      const isEdit = this.dialogType === 'edit'
+      const isEdit = this.dialogType === "edit";
 
-      const checkedKeys = this.$refs.tree.getCheckedKeys()
-      this.role.routes = this.generateTree(deepClone(this.serviceRoutes), '/', checkedKeys)
+      const checkedKeys = this.$refs.tree.getCheckedKeys();
+      this.role.routes = this.generateTree(
+        deepClone(this.serviceRoutes),
+        "/",
+        checkedKeys
+      );
 
       if (isEdit) {
-        await updateRole(this.role.key, this.role)
+        await updateRole(this.role.key, this.role);
         for (let index = 0; index < this.rolesList.length; index++) {
           if (this.rolesList[index].key === this.role.key) {
-            this.rolesList.splice(index, 1, Object.assign({}, this.role))
-            break
+            this.rolesList.splice(index, 1, Object.assign({}, this.role));
+            break;
           }
         }
       } else {
-        const { data } = await addRole(this.role)
-        this.role.key = data.key
-        this.rolesList.push(this.role)
+        const { data } = await addRole(this.role);
+        this.role.key = data.key;
+        this.rolesList.push(this.role);
       }
 
-      const { description, key, name } = this.role
-      this.dialogVisible = false
+      const { description, key, name } = this.role;
+      this.dialogVisible = false;
       this.$notify({
-        title: 'Success',
+        title: "Success",
         dangerouslyUseHTMLString: true,
         message: `
             <div>Role Key: ${key}</div>
             <div>Role Nmae: ${name}</div>
             <div>Description: ${description}</div>
           `,
-        type: 'success'
-      })
+        type: "success"
+      });
     },
     // reference: src/view/layout/components/Sidebar/SidebarItem.vue
     onlyOneShowingChild(children = [], parent) {
-      let onlyOneChild = null
-      const showingChildren = children.filter(item => !item.hidden)
+      let onlyOneChild = null;
+      const showingChildren = children.filter(item => !item.hidden);
 
       // When there is only one child route, the child route is displayed by default
       if (showingChildren.length === 1) {
-        onlyOneChild = showingChildren[0]
-        onlyOneChild.path = path.resolve(parent.path, onlyOneChild.path)
-        return onlyOneChild
+        onlyOneChild = showingChildren[0];
+        onlyOneChild.path = path.resolve(parent.path, onlyOneChild.path);
+        return onlyOneChild;
       }
 
       // Show parent if there are no child route to display
       if (showingChildren.length === 0) {
-        onlyOneChild = { ... parent, path: '', noShowingChildren: true }
-        return onlyOneChild
+        onlyOneChild = { ...parent, path: "", noShowingChildren: true };
+        return onlyOneChild;
       }
 
-      return false
+      return false;
     }
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/profile/components/Account.vue b/src/views/profile/components/Account.vue
index 9f2e3865..77a7b2b7 100644
--- a/src/views/profile/components/Account.vue
+++ b/src/views/profile/components/Account.vue
@@ -19,20 +19,20 @@ export default {
       type: Object,
       default: () => {
         return {
-          name: '',
-          email: ''
-        }
+          name: "",
+          email: ""
+        };
       }
     }
   },
   methods: {
     submit() {
       this.$message({
-        message: 'User information has been updated successfully',
-        type: 'success',
+        message: "User information has been updated successfully",
+        type: "success",
         duration: 5 * 1000
-      })
+      });
     }
   }
-}
+};
 </script>
diff --git a/src/views/profile/components/Activity.vue b/src/views/profile/components/Activity.vue
index dd5db3a5..679ae25c 100644
--- a/src/views/profile/components/Activity.vue
+++ b/src/views/profile/components/Activity.vue
@@ -2,16 +2,21 @@
   <div class="user-activity">
     <div class="post">
       <div class="user-block">
-        <img class="img-circle" :src="'https://wpimg.wallstcn.com/57ed425a-c71e-4201-9428-68760c0537c4.jpg'+avatarPrefix">
+        <img
+          class="img-circle"
+          :src="
+            'https://wpimg.wallstcn.com/57ed425a-c71e-4201-9428-68760c0537c4.jpg' +
+              avatarPrefix
+          "
+        />
         <span class="username text-muted">Iron Man</span>
         <span class="description">Shared publicly - 7:30 PM today</span>
       </div>
       <p>
-        Lorem ipsum represents a long-held tradition for designers,
-        typographers and the like. Some people hate it and argue for
-        its demise, but others ignore the hate as they create awesome
-        tools to help create filler text for everyone from bacon lovers
-        to Charlie Sheen fans.
+        Lorem ipsum represents a long-held tradition for designers, typographers
+        and the like. Some people hate it and argue for its demise, but others
+        ignore the hate as they create awesome tools to help create filler text
+        for everyone from bacon lovers to Charlie Sheen fans.
       </p>
       <ul class="list-inline">
         <li>
@@ -30,16 +35,21 @@
     </div>
     <div class="post">
       <div class="user-block">
-        <img class="img-circle" :src="'https://wpimg.wallstcn.com/9e2a5d0a-bd5b-457f-ac8e-86554616c87b.jpg'+avatarPrefix">
+        <img
+          class="img-circle"
+          :src="
+            'https://wpimg.wallstcn.com/9e2a5d0a-bd5b-457f-ac8e-86554616c87b.jpg' +
+              avatarPrefix
+          "
+        />
         <span class="username text-muted">Captain American</span>
         <span class="description">Sent you a message - yesterday</span>
       </div>
       <p>
-        Lorem ipsum represents a long-held tradition for designers,
-        typographers and the like. Some people hate it and argue for
-        its demise, but others ignore the hate as they create awesome
-        tools to help create filler text for everyone from bacon lovers
-        to Charlie Sheen fans.
+        Lorem ipsum represents a long-held tradition for designers, typographers
+        and the like. Some people hate it and argue for its demise, but others
+        ignore the hate as they create awesome tools to help create filler text
+        for everyone from bacon lovers to Charlie Sheen fans.
       </p>
       <ul class="list-inline">
         <li>
@@ -58,22 +68,33 @@
     </div>
     <div class="post">
       <div class="user-block">
-        <img class="img-circle" :src="'https://wpimg.wallstcn.com/fb57f689-e1ab-443c-af12-8d4066e202e2.jpg'+avatarPrefix">
+        <img
+          class="img-circle"
+          :src="
+            'https://wpimg.wallstcn.com/fb57f689-e1ab-443c-af12-8d4066e202e2.jpg' +
+              avatarPrefix
+          "
+        />
         <span class="username">Spider Man</span>
         <span class="description">Posted 4 photos - 2 days ago</span>
       </div>
       <div class="user-images">
         <el-carousel :interval="6000" type="card" height="220px">
           <el-carousel-item v-for="item in carouselImages" :key="item">
-            <img :src="item+carouselPrefix" class="image">
+            <img :src="item + carouselPrefix" class="image" />
           </el-carousel-item>
         </el-carousel>
       </div>
       <ul class="list-inline">
-        <li><span class="link-black text-sm"><i class="el-icon-share" /> Share</span></li>
+        <li>
+          <span class="link-black text-sm"
+            ><i class="el-icon-share" /> Share</span
+          >
+        </li>
         <li>
           <span class="link-black text-sm">
-            <svg-icon icon-class="like" /> Like</span>
+            <svg-icon icon-class="like" /> Like</span
+          >
         </li>
       </ul>
     </div>
@@ -81,29 +102,28 @@
 </template>
 
 <script>
-const avatarPrefix = '?imageView2/1/w/80/h/80'
-const carouselPrefix = '?imageView2/2/h/440'
+const avatarPrefix = "?imageView2/1/w/80/h/80";
+const carouselPrefix = "?imageView2/2/h/440";
 
 export default {
   data() {
     return {
       carouselImages: [
-        'https://wpimg.wallstcn.com/9679ffb0-9e0b-4451-9916-e21992218054.jpg',
-        'https://wpimg.wallstcn.com/bcce3734-0837-4b9f-9261-351ef384f75a.jpg',
-        'https://wpimg.wallstcn.com/d1d7b033-d75e-4cd6-ae39-fcd5f1c0a7c5.jpg',
-        'https://wpimg.wallstcn.com/50530061-851b-4ca5-9dc5-2fead928a939.jpg'
+        "https://wpimg.wallstcn.com/9679ffb0-9e0b-4451-9916-e21992218054.jpg",
+        "https://wpimg.wallstcn.com/bcce3734-0837-4b9f-9261-351ef384f75a.jpg",
+        "https://wpimg.wallstcn.com/d1d7b033-d75e-4cd6-ae39-fcd5f1c0a7c5.jpg",
+        "https://wpimg.wallstcn.com/50530061-851b-4ca5-9dc5-2fead928a939.jpg"
       ],
       avatarPrefix,
       carouselPrefix
-    }
+    };
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>
 .user-activity {
   .user-block {
-
     .username,
     .description {
       display: block;
@@ -111,7 +131,7 @@ export default {
       padding: 2px 0;
     }
 
-    .username{
+    .username {
       font-size: 16px;
       color: #000;
     }
@@ -143,7 +163,6 @@ export default {
     .image {
       width: 100%;
       height: 100%;
-
     }
 
     .user-images {
@@ -164,14 +183,12 @@ export default {
     }
 
     .link-black {
-
       &:hover,
       &:focus {
         color: #999;
       }
     }
   }
-
 }
 
 .box-center {
diff --git a/src/views/profile/components/Timeline.vue b/src/views/profile/components/Timeline.vue
index ba90b3d2..b3c2b5df 100644
--- a/src/views/profile/components/Timeline.vue
+++ b/src/views/profile/components/Timeline.vue
@@ -1,7 +1,12 @@
 <template>
   <div class="block">
     <el-timeline>
-      <el-timeline-item v-for="(item,index) of timeline" :key="index" :timestamp="item.timestamp" placement="top">
+      <el-timeline-item
+        v-for="(item, index) of timeline"
+        :key="index"
+        :timestamp="item.timestamp"
+        placement="top"
+      >
         <el-card>
           <h4>{{ item.title }}</h4>
           <p>{{ item.content }}</p>
@@ -17,27 +22,27 @@ export default {
     return {
       timeline: [
         {
-          timestamp: '2019/4/20',
-          title: 'Update Github template',
-          content: 'PanJiaChen committed 2019/4/20 20:46'
+          timestamp: "2019/4/20",
+          title: "Update Github template",
+          content: "PanJiaChen committed 2019/4/20 20:46"
         },
         {
-          timestamp: '2019/4/21',
-          title: 'Update Github template',
-          content: 'PanJiaChen committed 2019/4/21 20:46'
+          timestamp: "2019/4/21",
+          title: "Update Github template",
+          content: "PanJiaChen committed 2019/4/21 20:46"
         },
         {
-          timestamp: '2019/4/22',
-          title: 'Build Template',
-          content: 'PanJiaChen committed 2019/4/22 20:46'
+          timestamp: "2019/4/22",
+          title: "Build Template",
+          content: "PanJiaChen committed 2019/4/22 20:46"
         },
         {
-          timestamp: '2019/4/23',
-          title: 'Release New Version',
-          content: 'PanJiaChen committed 2019/4/23 20:46'
+          timestamp: "2019/4/23",
+          title: "Release New Version",
+          content: "PanJiaChen committed 2019/4/23 20:46"
         }
       ]
-    }
+    };
   }
-}
+};
 </script>
diff --git a/src/views/profile/components/UserCard.vue b/src/views/profile/components/UserCard.vue
index c2ce1aa8..49055882 100644
--- a/src/views/profile/components/UserCard.vue
+++ b/src/views/profile/components/UserCard.vue
@@ -6,20 +6,29 @@
 
     <div class="user-profile">
       <div class="box-center">
-        <pan-thumb :image="user.avatar" :height="'100px'" :width="'100px'" :hoverable="false">
+        <pan-thumb
+          :image="user.avatar"
+          :height="'100px'"
+          :width="'100px'"
+          :hoverable="false"
+        >
           <div>Hello</div>
           {{ user.role }}
         </pan-thumb>
       </div>
       <div class="box-center">
         <div class="user-name text-center">{{ user.name }}</div>
-        <div class="user-role text-center text-muted">{{ user.role | uppercaseFirst }}</div>
+        <div class="user-role text-center text-muted">
+          {{ user.role | uppercaseFirst }}
+        </div>
       </div>
     </div>
 
     <div class="user-bio">
       <div class="user-education user-bio-section">
-        <div class="user-bio-section-header"><svg-icon icon-class="education" /><span>Education</span></div>
+        <div class="user-bio-section-header">
+          <svg-icon icon-class="education" /><span>Education</span>
+        </div>
         <div class="user-bio-section-body">
           <div class="text-muted">
             JS in Computer Science from the University of Technology
@@ -28,7 +37,9 @@
       </div>
 
       <div class="user-skills user-bio-section">
-        <div class="user-bio-section-header"><svg-icon icon-class="skill" /><span>Skills</span></div>
+        <div class="user-bio-section-header">
+          <svg-icon icon-class="skill" /><span>Skills</span>
+        </div>
         <div class="user-bio-section-body">
           <div class="progress-item">
             <span>Vue</span>
@@ -53,7 +64,7 @@
 </template>
 
 <script>
-import PanThumb from '@/components/PanThumb'
+import PanThumb from "@/components/PanThumb";
 
 export default {
   components: { PanThumb },
@@ -62,73 +73,73 @@ export default {
       type: Object,
       default: () => {
         return {
-          name: '',
-          email: '',
-          avatar: '',
-          roles: ''
-        }
+          name: "",
+          email: "",
+          avatar: "",
+          roles: ""
+        };
       }
     }
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>
- .box-center {
-   margin: 0 auto;
-   display: table;
- }
+.box-center {
+  margin: 0 auto;
+  display: table;
+}
 
- .text-muted {
-   color: #777;
- }
+.text-muted {
+  color: #777;
+}
 
- .user-profile {
-   .user-name {
-     font-weight: bold;
-   }
+.user-profile {
+  .user-name {
+    font-weight: bold;
+  }
 
-   .box-center {
-     padding-top: 10px;
-   }
+  .box-center {
+    padding-top: 10px;
+  }
 
-   .user-role {
-     padding-top: 10px;
-     font-weight: 400;
-     font-size: 14px;
-   }
+  .user-role {
+    padding-top: 10px;
+    font-weight: 400;
+    font-size: 14px;
+  }
 
-   .box-social {
-     padding-top: 30px;
+  .box-social {
+    padding-top: 30px;
 
-     .el-table {
-       border-top: 1px solid #dfe6ec;
-     }
-   }
+    .el-table {
+      border-top: 1px solid #dfe6ec;
+    }
+  }
 
-   .user-follow {
-     padding-top: 20px;
-   }
- }
+  .user-follow {
+    padding-top: 20px;
+  }
+}
 
- .user-bio {
-   margin-top: 20px;
-   color: #606266;
+.user-bio {
+  margin-top: 20px;
+  color: #606266;
 
-   span {
-     padding-left: 4px;
-   }
+  span {
+    padding-left: 4px;
+  }
 
-   .user-bio-section {
-     font-size: 14px;
-     padding: 15px 0;
+  .user-bio-section {
+    font-size: 14px;
+    padding: 15px 0;
 
-     .user-bio-section-header {
-       border-bottom: 1px solid #dfe6ec;
-       padding-bottom: 10px;
-       margin-bottom: 10px;
-       font-weight: bold;
-     }
-   }
- }
+    .user-bio-section-header {
+      border-bottom: 1px solid #dfe6ec;
+      padding-bottom: 10px;
+      margin-bottom: 10px;
+      font-weight: bold;
+    }
+  }
+}
 </style>
diff --git a/src/views/profile/index.vue b/src/views/profile/index.vue
index 87e4f94f..326985f8 100644
--- a/src/views/profile/index.vue
+++ b/src/views/profile/index.vue
@@ -2,7 +2,6 @@
   <div class="app-container">
     <div v-if="user">
       <el-row :gutter="20">
-
         <el-col :span="6" :xs="24">
           <user-card :user="user" />
         </el-col>
@@ -22,47 +21,42 @@
             </el-tabs>
           </el-card>
         </el-col>
-
       </el-row>
     </div>
   </div>
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
-import UserCard from './components/UserCard'
-import Activity from './components/Activity'
-import Timeline from './components/Timeline'
-import Account from './components/Account'
+import { mapGetters } from "vuex";
+import UserCard from "./components/UserCard";
+import Activity from "./components/Activity";
+import Timeline from "./components/Timeline";
+import Account from "./components/Account";
 
 export default {
-  name: 'Profile',
+  name: "Profile",
   components: { UserCard, Activity, Timeline, Account },
   data() {
     return {
       user: {},
-      activeTab: 'activity'
-    }
+      activeTab: "activity"
+    };
   },
   computed: {
-    ...mapGetters([
-      'name',
-      'avatar',
-      'roles'
-    ])
+    ...mapGetters(["name", "avatar", "roles"])
   },
   created() {
-    this.getUser()
+    this.getUser();
   },
   methods: {
     getUser() {
       this.user = {
         name: this.name,
-        role: this.roles.join(' | '),
-        email: 'admin@test.com',
+        role: this.roles.join(" | "),
+        email: "admin@test.com",
         avatar: this.avatar
-      }
+      };
     }
   }
-}
+};
 </script>
diff --git a/src/views/qiniu/upload.vue b/src/views/qiniu/upload.vue
index 9dc9aeda..8b195c88 100644
--- a/src/views/qiniu/upload.vue
+++ b/src/views/qiniu/upload.vue
@@ -1,41 +1,47 @@
 <template>
-  <el-upload :data="dataObj" :multiple="true" :before-upload="beforeUpload" action="https://upload.qbox.me" drag>
+  <el-upload
+    :data="dataObj"
+    :multiple="true"
+    :before-upload="beforeUpload"
+    action="https://upload.qbox.me"
+    drag
+  >
     <i class="el-icon-upload" />
-    <div class="el-upload__text">
-      将文件拖到此处，或<em>点击上传</em>
-    </div>
+    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
   </el-upload>
 </template>
 
 <script>
-import { getToken } from '@/api/qiniu'
+import { getToken } from "@/api/qiniu";
 // 获取七牛token 后端通过Access Key,Secret Key,bucket等生成token
 // 七牛官方sdk https://developer.qiniu.com/sdk#official-sdk
 
 export default {
   data() {
     return {
-      dataObj: { token: '', key: '' },
+      dataObj: { token: "", key: "" },
       image_uri: [],
       fileList: []
-    }
+    };
   },
   methods: {
     beforeUpload() {
-      const _self = this
+      const _self = this;
       return new Promise((resolve, reject) => {
-        getToken().then(response => {
-          const key = response.data.qiniu_key
-          const token = response.data.qiniu_token
-          _self._data.dataObj.token = token
-          _self._data.dataObj.key = key
-          resolve(true)
-        }).catch(err => {
-          console.log(err)
-          reject(false)
-        })
-      })
+        getToken()
+          .then(response => {
+            const key = response.data.qiniu_key;
+            const token = response.data.qiniu_token;
+            _self._data.dataObj.token = token;
+            _self._data.dataObj.key = key;
+            resolve(true);
+          })
+          .catch(err => {
+            console.log(err);
+            reject(false);
+          });
+      });
     }
   }
-}
+};
 </script>
diff --git a/src/views/redirect/index.vue b/src/views/redirect/index.vue
index db4c1d66..9357ce21 100644
--- a/src/views/redirect/index.vue
+++ b/src/views/redirect/index.vue
@@ -1,12 +1,12 @@
 <script>
 export default {
   created() {
-    const { params, query } = this.$route
-    const { path } = params
-    this.$router.replace({ path: '/' + path, query })
+    const { params, query } = this.$route;
+    const { path } = params;
+    this.$router.replace({ path: "/" + path, query });
   },
   render: function(h) {
-    return h() // avoid warning message
+    return h(); // avoid warning message
   }
-}
+};
 </script>
diff --git a/src/views/tab/components/TabPane.vue b/src/views/tab/components/TabPane.vue
index 3fb1439e..1d61e65d 100644
--- a/src/views/tab/components/TabPane.vue
+++ b/src/views/tab/components/TabPane.vue
@@ -14,12 +14,14 @@
 
     <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>{{
+          scope.row.timestamp | parseTime("{y}-{m}-{d} {h}:{i}")
+        }}</span>
       </template>
     </el-table-column>
 
     <el-table-column min-width="300px" label="Title">
-      <template slot-scope="{row}">
+      <template slot-scope="{ row }">
         <span>{{ row.title }}</span>
         <el-tag>{{ row.type }}</el-tag>
       </template>
@@ -33,7 +35,11 @@
 
     <el-table-column width="120px" label="Importance">
       <template slot-scope="scope">
-        <svg-icon v-for="n in +scope.row.importance" :key="n" icon-class="star" />
+        <svg-icon
+          v-for="n in +scope.row.importance"
+          :key="n"
+          icon-class="star"
+        />
       </template>
     </el-table-column>
 
@@ -44,7 +50,7 @@
     </el-table-column>
 
     <el-table-column class-name="status-col" label="Status" width="110">
-      <template slot-scope="{row}">
+      <template slot-scope="{ row }">
         <el-tag :type="row.status | statusFilter">
           {{ row.status }}
         </el-tag>
@@ -54,23 +60,23 @@
 </template>
 
 <script>
-import { fetchList } from '@/api/article'
+import { fetchList } from "@/api/article";
 
 export default {
   filters: {
     statusFilter(status) {
       const statusMap = {
-        published: 'success',
-        draft: 'info',
-        deleted: 'danger'
-      }
-      return statusMap[status]
+        published: "success",
+        draft: "info",
+        deleted: "danger"
+      };
+      return statusMap[status];
     }
   },
   props: {
     type: {
       type: String,
-      default: 'CN'
+      default: "CN"
     }
   },
   data() {
@@ -80,24 +86,23 @@ export default {
         page: 1,
         limit: 5,
         type: this.type,
-        sort: '+id'
+        sort: "+id"
       },
       loading: false
-    }
+    };
   },
   created() {
-    this.getList()
+    this.getList();
   },
   methods: {
     getList() {
-      this.loading = true
-      this.$emit('create') // for test
+      this.loading = true;
+      this.$emit("create"); // for test
       fetchList(this.listQuery).then(response => {
-        this.list = response.data.items
-        this.loading = false
-      })
+        this.list = response.data.items;
+        this.loading = false;
+      });
     }
   }
-}
+};
 </script>
-
diff --git a/src/views/tab/index.vue b/src/views/tab/index.vue
index 6438a47a..05078efb 100644
--- a/src/views/tab/index.vue
+++ b/src/views/tab/index.vue
@@ -1,11 +1,25 @@
 <template>
   <div class="tab-container">
     <el-tag>mounted times ：{{ createdTimes }}</el-tag>
-    <el-alert :closable="false" style="width:200px;display:inline-block;vertical-align: middle;margin-left:30px;" title="Tab with keep-alive" type="success" />
+    <el-alert
+      :closable="false"
+      style="width:200px;display:inline-block;vertical-align: middle;margin-left:30px;"
+      title="Tab with keep-alive"
+      type="success"
+    />
     <el-tabs v-model="activeName" style="margin-top:15px;" type="border-card">
-      <el-tab-pane v-for="item in tabMapOptions" :key="item.key" :label="item.label" :name="item.key">
+      <el-tab-pane
+        v-for="item in tabMapOptions"
+        :key="item.key"
+        :label="item.label"
+        :name="item.key"
+      >
         <keep-alive>
-          <tab-pane v-if="activeName==item.key" :type="item.key" @create="showCreatedTimes" />
+          <tab-pane
+            v-if="activeName == item.key"
+            :type="item.key"
+            @create="showCreatedTimes"
+          />
         </keep-alive>
       </el-tab-pane>
     </el-tabs>
@@ -13,45 +27,45 @@
 </template>
 
 <script>
-import tabPane from './components/TabPane'
+import tabPane from "./components/TabPane";
 
 export default {
-  name: 'Tab',
+  name: "Tab",
   components: { tabPane },
   data() {
     return {
       tabMapOptions: [
-        { label: 'China', key: 'CN' },
-        { label: 'USA', key: 'US' },
-        { label: 'Japan', key: 'JP' },
-        { label: 'Eurozone', key: 'EU' }
+        { label: "China", key: "CN" },
+        { label: "USA", key: "US" },
+        { label: "Japan", key: "JP" },
+        { label: "Eurozone", key: "EU" }
       ],
-      activeName: 'CN',
+      activeName: "CN",
       createdTimes: 0
-    }
+    };
   },
   watch: {
     activeName(val) {
-      this.$router.push(`${this.$route.path}?tab=${val}`)
+      this.$router.push(`${this.$route.path}?tab=${val}`);
     }
   },
   created() {
     // init the default  selected tab
-    const tab = this.$route.query.tab
+    const tab = this.$route.query.tab;
     if (tab) {
-      this.activeName = tab
+      this.activeName = tab;
     }
   },
   methods: {
     showCreatedTimes() {
-      this.createdTimes = this.createdTimes + 1
+      this.createdTimes = this.createdTimes + 1;
     }
   }
-}
+};
 </script>
 
 <style scoped>
-  .tab-container {
-    margin: 30px;
-  }
+.tab-container {
+  margin: 30px;
+}
 </style>
diff --git a/src/views/table/complex-table.vue b/src/views/table/complex-table.vue
index fe266465..3bc1b674 100644
--- a/src/views/table/complex-table.vue
+++ b/src/views/table/complex-table.vue
@@ -1,26 +1,88 @@
 <template>
   <div class="app-container">
     <div class="filter-container">
-      <el-input v-model="listQuery.title" placeholder="Title" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
-      <el-select v-model="listQuery.importance" placeholder="Imp" clearable style="width: 90px" class="filter-item">
-        <el-option v-for="item in importanceOptions" :key="item" :label="item" :value="item" />
+      <el-input
+        v-model="listQuery.title"
+        placeholder="Title"
+        style="width: 200px;"
+        class="filter-item"
+        @keyup.enter.native="handleFilter"
+      />
+      <el-select
+        v-model="listQuery.importance"
+        placeholder="Imp"
+        clearable
+        style="width: 90px"
+        class="filter-item"
+      >
+        <el-option
+          v-for="item in importanceOptions"
+          :key="item"
+          :label="item"
+          :value="item"
+        />
       </el-select>
-      <el-select v-model="listQuery.type" placeholder="Type" clearable class="filter-item" style="width: 130px">
-        <el-option v-for="item in calendarTypeOptions" :key="item.key" :label="item.display_name+'('+item.key+')'" :value="item.key" />
+      <el-select
+        v-model="listQuery.type"
+        placeholder="Type"
+        clearable
+        class="filter-item"
+        style="width: 130px"
+      >
+        <el-option
+          v-for="item in calendarTypeOptions"
+          :key="item.key"
+          :label="item.display_name + '(' + item.key + ')'"
+          :value="item.key"
+        />
       </el-select>
-      <el-select v-model="listQuery.sort" style="width: 140px" class="filter-item" @change="handleFilter">
-        <el-option v-for="item in sortOptions" :key="item.key" :label="item.label" :value="item.key" />
+      <el-select
+        v-model="listQuery.sort"
+        style="width: 140px"
+        class="filter-item"
+        @change="handleFilter"
+      >
+        <el-option
+          v-for="item in sortOptions"
+          :key="item.key"
+          :label="item.label"
+          :value="item.key"
+        />
       </el-select>
-      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
+      <el-button
+        v-waves
+        class="filter-item"
+        type="primary"
+        icon="el-icon-search"
+        @click="handleFilter"
+      >
         Search
       </el-button>
-      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">
+      <el-button
+        class="filter-item"
+        style="margin-left: 10px;"
+        type="primary"
+        icon="el-icon-edit"
+        @click="handleCreate"
+      >
         Add
       </el-button>
-      <el-button v-waves :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">
+      <el-button
+        v-waves
+        :loading="downloadLoading"
+        class="filter-item"
+        type="primary"
+        icon="el-icon-download"
+        @click="handleDownload"
+      >
         Export
       </el-button>
-      <el-checkbox v-model="showReviewer" class="filter-item" style="margin-left:15px;" @change="tableKey=tableKey+1">
+      <el-checkbox
+        v-model="showReviewer"
+        class="filter-item"
+        style="margin-left:15px;"
+        @change="tableKey = tableKey + 1"
+      >
         reviewer
       </el-checkbox>
     </div>
@@ -35,19 +97,29 @@
       style="width: 100%;"
       @sort-change="sortChange"
     >
-      <el-table-column label="ID" prop="id" sortable="custom" align="center" width="80">
+      <el-table-column
+        label="ID"
+        prop="id"
+        sortable="custom"
+        align="center"
+        width="80"
+      >
         <template slot-scope="scope">
           <span>{{ scope.row.id }}</span>
         </template>
       </el-table-column>
       <el-table-column label="Date" width="150px" align="center">
         <template slot-scope="scope">
-          <span>{{ scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
+          <span>{{
+            scope.row.timestamp | parseTime("{y}-{m}-{d} {h}:{i}")
+          }}</span>
         </template>
       </el-table-column>
       <el-table-column label="Title" min-width="150px">
-        <template slot-scope="{row}">
-          <span class="link-type" @click="handleUpdate(row)">{{ row.title }}</span>
+        <template slot-scope="{ row }">
+          <span class="link-type" @click="handleUpdate(row)">{{
+            row.title
+          }}</span>
           <el-tag>{{ row.type | typeFilter }}</el-tag>
         </template>
       </el-table-column>
@@ -56,130 +128,225 @@
           <span>{{ scope.row.author }}</span>
         </template>
       </el-table-column>
-      <el-table-column v-if="showReviewer" label="Reviewer" width="110px" align="center">
+      <el-table-column
+        v-if="showReviewer"
+        label="Reviewer"
+        width="110px"
+        align="center"
+      >
         <template slot-scope="scope">
           <span style="color:red;">{{ scope.row.reviewer }}</span>
         </template>
       </el-table-column>
       <el-table-column label="Imp" width="80px">
         <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 label="Readings" align="center" width="95">
-        <template slot-scope="{row}">
-          <span v-if="row.pageviews" class="link-type" @click="handleFetchPv(row.pageviews)">{{ row.pageviews }}</span>
+        <template slot-scope="{ row }">
+          <span
+            v-if="row.pageviews"
+            class="link-type"
+            @click="handleFetchPv(row.pageviews)"
+            >{{ row.pageviews }}</span
+          >
           <span v-else>0</span>
         </template>
       </el-table-column>
       <el-table-column label="Status" class-name="status-col" width="100">
-        <template slot-scope="{row}">
+        <template slot-scope="{ row }">
           <el-tag :type="row.status | statusFilter">
             {{ row.status }}
           </el-tag>
         </template>
       </el-table-column>
-      <el-table-column label="Actions" align="center" width="230" class-name="small-padding fixed-width">
-        <template slot-scope="{row}">
+      <el-table-column
+        label="Actions"
+        align="center"
+        width="230"
+        class-name="small-padding fixed-width"
+      >
+        <template slot-scope="{ row }">
           <el-button type="primary" size="mini" @click="handleUpdate(row)">
             Edit
           </el-button>
-          <el-button v-if="row.status!='published'" size="mini" type="success" @click="handleModifyStatus(row,'published')">
+          <el-button
+            v-if="row.status != 'published'"
+            size="mini"
+            type="success"
+            @click="handleModifyStatus(row, 'published')"
+          >
             Publish
           </el-button>
-          <el-button v-if="row.status!='draft'" size="mini" @click="handleModifyStatus(row,'draft')">
+          <el-button
+            v-if="row.status != 'draft'"
+            size="mini"
+            @click="handleModifyStatus(row, 'draft')"
+          >
             Draft
           </el-button>
-          <el-button v-if="row.status!='deleted'" size="mini" type="danger" @click="handleModifyStatus(row,'deleted')">
+          <el-button
+            v-if="row.status != 'deleted'"
+            size="mini"
+            type="danger"
+            @click="handleModifyStatus(row, 'deleted')"
+          >
             Delete
           </el-button>
         </template>
       </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"
+    />
 
     <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
-      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="70px" style="width: 400px; margin-left:50px;">
+      <el-form
+        ref="dataForm"
+        :rules="rules"
+        :model="temp"
+        label-position="left"
+        label-width="70px"
+        style="width: 400px; margin-left:50px;"
+      >
         <el-form-item label="Type" prop="type">
-          <el-select v-model="temp.type" class="filter-item" placeholder="Please select">
-            <el-option v-for="item in calendarTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" />
+          <el-select
+            v-model="temp.type"
+            class="filter-item"
+            placeholder="Please select"
+          >
+            <el-option
+              v-for="item in calendarTypeOptions"
+              :key="item.key"
+              :label="item.display_name"
+              :value="item.key"
+            />
           </el-select>
         </el-form-item>
         <el-form-item label="Date" prop="timestamp">
-          <el-date-picker v-model="temp.timestamp" type="datetime" placeholder="Please pick a date" />
+          <el-date-picker
+            v-model="temp.timestamp"
+            type="datetime"
+            placeholder="Please pick a date"
+          />
         </el-form-item>
         <el-form-item label="Title" prop="title">
           <el-input v-model="temp.title" />
         </el-form-item>
         <el-form-item label="Status">
-          <el-select v-model="temp.status" class="filter-item" placeholder="Please select">
-            <el-option v-for="item in statusOptions" :key="item" :label="item" :value="item" />
+          <el-select
+            v-model="temp.status"
+            class="filter-item"
+            placeholder="Please select"
+          >
+            <el-option
+              v-for="item in statusOptions"
+              :key="item"
+              :label="item"
+              :value="item"
+            />
           </el-select>
         </el-form-item>
         <el-form-item label="Imp">
-          <el-rate v-model="temp.importance" :colors="['#99A9BF', '#F7BA2A', '#FF9900']" :max="3" style="margin-top:8px;" />
+          <el-rate
+            v-model="temp.importance"
+            :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
+            :max="3"
+            style="margin-top:8px;"
+          />
         </el-form-item>
         <el-form-item label="Remark">
-          <el-input v-model="temp.remark" :autosize="{ minRows: 2, maxRows: 4}" type="textarea" placeholder="Please input" />
+          <el-input
+            v-model="temp.remark"
+            :autosize="{ minRows: 2, maxRows: 4 }"
+            type="textarea"
+            placeholder="Please input"
+          />
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button @click="dialogFormVisible = false">
           Cancel
         </el-button>
-        <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
+        <el-button
+          type="primary"
+          @click="dialogStatus === 'create' ? createData() : updateData()"
+        >
           Confirm
         </el-button>
       </div>
     </el-dialog>
 
     <el-dialog :visible.sync="dialogPvVisible" title="Reading statistics">
-      <el-table :data="pvData" border fit highlight-current-row style="width: 100%">
+      <el-table
+        :data="pvData"
+        border
+        fit
+        highlight-current-row
+        style="width: 100%"
+      >
         <el-table-column prop="key" label="Channel" />
         <el-table-column prop="pv" label="Pv" />
       </el-table>
       <span slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="dialogPvVisible = false">Confirm</el-button>
+        <el-button type="primary" @click="dialogPvVisible = false"
+          >Confirm</el-button
+        >
       </span>
     </el-dialog>
   </div>
 </template>
 
 <script>
-import { fetchList, fetchPv, createArticle, updateArticle } from '@/api/article'
-import waves from '@/directive/waves' // waves directive
-import { parseTime } from '@/utils'
-import Pagination from '@/components/Pagination' // secondary package based on el-pagination
+import {
+  fetchList,
+  fetchPv,
+  createArticle,
+  updateArticle
+} from "@/api/article";
+import waves from "@/directive/waves"; // waves directive
+import { parseTime } from "@/utils";
+import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
 
 const calendarTypeOptions = [
-  { key: 'CN', display_name: 'China' },
-  { key: 'US', display_name: 'USA' },
-  { key: 'JP', display_name: 'Japan' },
-  { key: 'EU', display_name: 'Eurozone' }
-]
+  { key: "CN", display_name: "China" },
+  { key: "US", display_name: "USA" },
+  { key: "JP", display_name: "Japan" },
+  { key: "EU", display_name: "Eurozone" }
+];
 
 // arr to obj, such as { CN : "China", US : "USA" }
 const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
-  acc[cur.key] = cur.display_name
-  return acc
-}, {})
+  acc[cur.key] = cur.display_name;
+  return acc;
+}, {});
 
 export default {
-  name: 'ComplexTable',
+  name: "ComplexTable",
   components: { Pagination },
   directives: { waves },
   filters: {
     statusFilter(status) {
       const statusMap = {
-        published: 'success',
-        draft: 'info',
-        deleted: 'danger'
-      }
-      return statusMap[status]
+        published: "success",
+        draft: "info",
+        deleted: "danger"
+      };
+      return statusMap[status];
     },
     typeFilter(type) {
-      return calendarTypeKeyValue[type]
+      return calendarTypeKeyValue[type];
     }
   },
   data() {
@@ -194,188 +361,210 @@ export default {
         importance: undefined,
         title: undefined,
         type: undefined,
-        sort: '+id'
+        sort: "+id"
       },
       importanceOptions: [1, 2, 3],
       calendarTypeOptions,
-      sortOptions: [{ label: 'ID Ascending', key: '+id' }, { label: 'ID Descending', key: '-id' }],
-      statusOptions: ['published', 'draft', 'deleted'],
+      sortOptions: [
+        { label: "ID Ascending", key: "+id" },
+        { label: "ID Descending", key: "-id" }
+      ],
+      statusOptions: ["published", "draft", "deleted"],
       showReviewer: false,
       temp: {
         id: undefined,
         importance: 1,
-        remark: '',
+        remark: "",
         timestamp: new Date(),
-        title: '',
-        type: '',
-        status: 'published'
+        title: "",
+        type: "",
+        status: "published"
       },
       dialogFormVisible: false,
-      dialogStatus: '',
+      dialogStatus: "",
       textMap: {
-        update: 'Edit',
-        create: 'Create'
+        update: "Edit",
+        create: "Create"
       },
       dialogPvVisible: false,
       pvData: [],
       rules: {
-        type: [{ required: true, message: 'type is required', trigger: 'change' }],
-        timestamp: [{ type: 'date', required: true, message: 'timestamp is required', trigger: 'change' }],
-        title: [{ required: true, message: 'title is required', trigger: 'blur' }]
+        type: [
+          { required: true, message: "type is required", trigger: "change" }
+        ],
+        timestamp: [
+          {
+            type: "date",
+            required: true,
+            message: "timestamp is required",
+            trigger: "change"
+          }
+        ],
+        title: [
+          { required: true, message: "title is required", trigger: "blur" }
+        ]
       },
       downloadLoading: false
-    }
+    };
   },
   created() {
-    this.getList()
+    this.getList();
   },
   methods: {
     getList() {
-      this.listLoading = true
+      this.listLoading = true;
       fetchList(this.listQuery).then(response => {
-        this.list = response.data.items
-        this.total = response.data.total
+        this.list = response.data.items;
+        this.total = response.data.total;
 
         // Just to simulate the time of the request
         setTimeout(() => {
-          this.listLoading = false
-        }, 1.5 * 1000)
-      })
+          this.listLoading = false;
+        }, 1.5 * 1000);
+      });
     },
     handleFilter() {
-      this.listQuery.page = 1
-      this.getList()
+      this.listQuery.page = 1;
+      this.getList();
     },
     handleModifyStatus(row, status) {
       this.$message({
-        message: '操作Success',
-        type: 'success'
-      })
-      row.status = status
+        message: "操作Success",
+        type: "success"
+      });
+      row.status = status;
     },
     sortChange(data) {
-      const { prop, order } = data
-      if (prop === 'id') {
-        this.sortByID(order)
+      const { prop, order } = data;
+      if (prop === "id") {
+        this.sortByID(order);
       }
     },
     sortByID(order) {
-      if (order === 'ascending') {
-        this.listQuery.sort = '+id'
+      if (order === "ascending") {
+        this.listQuery.sort = "+id";
       } else {
-        this.listQuery.sort = '-id'
+        this.listQuery.sort = "-id";
       }
-      this.handleFilter()
+      this.handleFilter();
     },
     resetTemp() {
       this.temp = {
         id: undefined,
         importance: 1,
-        remark: '',
+        remark: "",
         timestamp: new Date(),
-        title: '',
-        status: 'published',
-        type: ''
-      }
+        title: "",
+        status: "published",
+        type: ""
+      };
     },
     handleCreate() {
-      this.resetTemp()
-      this.dialogStatus = 'create'
-      this.dialogFormVisible = true
+      this.resetTemp();
+      this.dialogStatus = "create";
+      this.dialogFormVisible = true;
       this.$nextTick(() => {
-        this.$refs['dataForm'].clearValidate()
-      })
+        this.$refs["dataForm"].clearValidate();
+      });
     },
     createData() {
-      this.$refs['dataForm'].validate((valid) => {
+      this.$refs["dataForm"].validate(valid => {
         if (valid) {
-          this.temp.id = parseInt(Math.random() * 100) + 1024 // mock a id
-          this.temp.author = 'vue-element-admin'
+          this.temp.id = parseInt(Math.random() * 100) + 1024; // mock a id
+          this.temp.author = "vue-element-admin";
           createArticle(this.temp).then(() => {
-            this.list.unshift(this.temp)
-            this.dialogFormVisible = false
+            this.list.unshift(this.temp);
+            this.dialogFormVisible = false;
             this.$notify({
-              title: 'Success',
-              message: 'Created Successfully',
-              type: 'success',
+              title: "Success",
+              message: "Created Successfully",
+              type: "success",
               duration: 2000
-            })
-          })
+            });
+          });
         }
-      })
+      });
     },
     handleUpdate(row) {
-      this.temp = Object.assign({}, row) // copy obj
-      this.temp.timestamp = new Date(this.temp.timestamp)
-      this.dialogStatus = 'update'
-      this.dialogFormVisible = true
+      this.temp = Object.assign({}, row); // copy obj
+      this.temp.timestamp = new Date(this.temp.timestamp);
+      this.dialogStatus = "update";
+      this.dialogFormVisible = true;
       this.$nextTick(() => {
-        this.$refs['dataForm'].clearValidate()
-      })
+        this.$refs["dataForm"].clearValidate();
+      });
     },
     updateData() {
-      this.$refs['dataForm'].validate((valid) => {
+      this.$refs["dataForm"].validate(valid => {
         if (valid) {
-          const tempData = Object.assign({}, this.temp)
-          tempData.timestamp = +new Date(tempData.timestamp) // change Thu Nov 30 2017 16:41:05 GMT+0800 (CST) to 1512031311464
+          const tempData = Object.assign({}, this.temp);
+          tempData.timestamp = +new Date(tempData.timestamp); // change Thu Nov 30 2017 16:41:05 GMT+0800 (CST) to 1512031311464
           updateArticle(tempData).then(() => {
             for (const v of this.list) {
               if (v.id === this.temp.id) {
-                const index = this.list.indexOf(v)
-                this.list.splice(index, 1, this.temp)
-                break
+                const index = this.list.indexOf(v);
+                this.list.splice(index, 1, this.temp);
+                break;
               }
             }
-            this.dialogFormVisible = false
+            this.dialogFormVisible = false;
             this.$notify({
-              title: 'Success',
-              message: 'Update Successfully',
-              type: 'success',
+              title: "Success",
+              message: "Update Successfully",
+              type: "success",
               duration: 2000
-            })
-          })
+            });
+          });
         }
-      })
+      });
     },
     handleDelete(row) {
       this.$notify({
-        title: 'Success',
-        message: 'Delete Successfully',
-        type: 'success',
+        title: "Success",
+        message: "Delete Successfully",
+        type: "success",
         duration: 2000
-      })
-      const index = this.list.indexOf(row)
-      this.list.splice(index, 1)
+      });
+      const index = this.list.indexOf(row);
+      this.list.splice(index, 1);
     },
     handleFetchPv(pv) {
       fetchPv(pv).then(response => {
-        this.pvData = response.data.pvData
-        this.dialogPvVisible = true
-      })
+        this.pvData = response.data.pvData;
+        this.dialogPvVisible = true;
+      });
     },
     handleDownload() {
-      this.downloadLoading = true
-      import('@/vendor/Export2Excel').then(excel => {
-        const tHeader = ['timestamp', 'title', 'type', 'importance', 'status']
-        const filterVal = ['timestamp', 'title', 'type', 'importance', 'status']
-        const data = this.formatJson(filterVal, this.list)
+      this.downloadLoading = true;
+      import("@/vendor/Export2Excel").then(excel => {
+        const tHeader = ["timestamp", "title", "type", "importance", "status"];
+        const filterVal = [
+          "timestamp",
+          "title",
+          "type",
+          "importance",
+          "status"
+        ];
+        const data = this.formatJson(filterVal, this.list);
         excel.export_json_to_excel({
           header: tHeader,
           data,
-          filename: 'table-list'
-        })
-        this.downloadLoading = false
-      })
+          filename: "table-list"
+        });
+        this.downloadLoading = false;
+      });
     },
     formatJson(filterVal, jsonData) {
-      return jsonData.map(v => filterVal.map(j => {
-        if (j === 'timestamp') {
-          return parseTime(v[j])
-        } else {
-          return v[j]
-        }
-      }))
+      return jsonData.map(v =>
+        filterVal.map(j => {
+          if (j === "timestamp") {
+            return parseTime(v[j]);
+          } else {
+            return v[j];
+          }
+        })
+      );
     }
   }
-}
+};
 </script>
diff --git a/src/views/table/drag-table.vue b/src/views/table/drag-table.vue
index 954d59eb..cbd62558 100644
--- a/src/views/table/drag-table.vue
+++ b/src/views/table/drag-table.vue
@@ -1,7 +1,16 @@
 <template>
   <div class="app-container">
     <!-- Note that row-key is necessary to get a correct row order. -->
-    <el-table ref="dragTable" v-loading="listLoading" :data="list" row-key="id" border fit highlight-current-row style="width: 100%">
+    <el-table
+      ref="dragTable"
+      v-loading="listLoading"
+      :data="list"
+      row-key="id"
+      border
+      fit
+      highlight-current-row
+      style="width: 100%"
+    >
       <el-table-column align="center" label="ID" width="65">
         <template slot-scope="scope">
           <span>{{ scope.row.id }}</span>
@@ -10,7 +19,9 @@
 
       <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>{{
+            scope.row.timestamp | parseTime("{y}-{m}-{d} {h}:{i}")
+          }}</span>
         </template>
       </el-table-column>
 
@@ -28,7 +39,12 @@
 
       <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="icon-star" />
+          <svg-icon
+            v-for="n in +scope.row.importance"
+            :key="n"
+            icon-class="star"
+            class="icon-star"
+          />
         </template>
       </el-table-column>
 
@@ -39,7 +55,7 @@
       </el-table-column>
 
       <el-table-column class-name="status-col" label="Status" width="110">
-        <template slot-scope="{row}">
+        <template slot-scope="{ row }">
           <el-tag :type="row.status | statusFilter">
             {{ row.status }}
           </el-tag>
@@ -52,9 +68,7 @@
         </template>
       </el-table-column>
     </el-table>
-    <div class="show-d">
-      <el-tag>The default order :</el-tag> {{ oldList }}
-    </div>
+    <div class="show-d"><el-tag>The default order :</el-tag> {{ oldList }}</div>
     <div class="show-d">
       <el-tag>The after dragging order :</el-tag> {{ newList }}
     </div>
@@ -62,19 +76,19 @@
 </template>
 
 <script>
-import { fetchList } from '@/api/article'
-import Sortable from 'sortablejs'
+import { fetchList } from "@/api/article";
+import Sortable from "sortablejs";
 
 export default {
-  name: 'DragTable',
+  name: "DragTable",
   filters: {
     statusFilter(status) {
       const statusMap = {
-        published: 'success',
-        draft: 'info',
-        deleted: 'danger'
-      }
-      return statusMap[status]
+        published: "success",
+        draft: "info",
+        deleted: "danger"
+      };
+      return statusMap[status];
     }
   },
   data() {
@@ -89,65 +103,67 @@ export default {
       sortable: null,
       oldList: [],
       newList: []
-    }
+    };
   },
   created() {
-    this.getList()
+    this.getList();
   },
   methods: {
     async getList() {
-      this.listLoading = true
-      const { data } = await fetchList(this.listQuery)
-      this.list = data.items
-      this.total = data.total
-      this.listLoading = false
-      this.oldList = this.list.map(v => v.id)
-      this.newList = this.oldList.slice()
+      this.listLoading = true;
+      const { data } = await fetchList(this.listQuery);
+      this.list = data.items;
+      this.total = data.total;
+      this.listLoading = false;
+      this.oldList = this.list.map(v => v.id);
+      this.newList = this.oldList.slice();
       this.$nextTick(() => {
-        this.setSort()
-      })
+        this.setSort();
+      });
     },
     setSort() {
-      const el = this.$refs.dragTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
+      const el = this.$refs.dragTable.$el.querySelectorAll(
+        ".el-table__body-wrapper > table > tbody"
+      )[0];
       this.sortable = Sortable.create(el, {
-        ghostClass: 'sortable-ghost', // Class name for the drop placeholder,
+        ghostClass: "sortable-ghost", // Class name for the drop placeholder,
         setData: function(dataTransfer) {
           // to avoid Firefox bug
           // Detail see : https://github.com/RubaXa/Sortable/issues/1012
-          dataTransfer.setData('Text', '')
+          dataTransfer.setData("Text", "");
         },
         onEnd: evt => {
-          const targetRow = this.list.splice(evt.oldIndex, 1)[0]
-          this.list.splice(evt.newIndex, 0, targetRow)
+          const targetRow = this.list.splice(evt.oldIndex, 1)[0];
+          this.list.splice(evt.newIndex, 0, targetRow);
 
           // for show the changes, you can delete in you code
-          const tempIndex = this.newList.splice(evt.oldIndex, 1)[0]
-          this.newList.splice(evt.newIndex, 0, tempIndex)
+          const tempIndex = this.newList.splice(evt.oldIndex, 1)[0];
+          this.newList.splice(evt.newIndex, 0, tempIndex);
         }
-      })
+      });
     }
   }
-}
+};
 </script>
 
 <style>
-.sortable-ghost{
-  opacity: .8;
-  color: #fff!important;
-  background: #42b983!important;
+.sortable-ghost {
+  opacity: 0.8;
+  color: #fff !important;
+  background: #42b983 !important;
 }
 </style>
 
 <style scoped>
-.icon-star{
-  margin-right:2px;
+.icon-star {
+  margin-right: 2px;
 }
-.drag-handler{
+.drag-handler {
   width: 20px;
   height: 20px;
   cursor: pointer;
 }
-.show-d{
+.show-d {
   margin-top: 15px;
 }
 </style>
diff --git a/src/views/table/dynamic-table/components/FixedThead.vue b/src/views/table/dynamic-table/components/FixedThead.vue
index c3deb925..1bfa5d50 100644
--- a/src/views/table/dynamic-table/components/FixedThead.vue
+++ b/src/views/table/dynamic-table/components/FixedThead.vue
@@ -14,7 +14,14 @@
       </el-checkbox-group>
     </div>
 
-    <el-table :key="key" :data="tableData" border fit highlight-current-row style="width: 100%">
+    <el-table
+      :key="key"
+      :data="tableData"
+      border
+      fit
+      highlight-current-row
+      style="width: 100%"
+    >
       <el-table-column prop="name" label="fruitName" width="180" />
       <el-table-column v-for="fruit in formThead" :key="fruit" :label="fruit">
         <template slot-scope="scope">
@@ -26,37 +33,38 @@
 </template>
 
 <script>
-const defaultFormThead = ['apple', 'banana']
+const defaultFormThead = ["apple", "banana"];
 
 export default {
   data() {
     return {
       tableData: [
         {
-          name: 'fruit-1',
-          apple: 'apple-10',
-          banana: 'banana-10',
-          orange: 'orange-10'
+          name: "fruit-1",
+          apple: "apple-10",
+          banana: "banana-10",
+          orange: "orange-10"
         },
         {
-          name: 'fruit-2',
-          apple: 'apple-20',
-          banana: 'banana-20',
-          orange: 'orange-20'
+          name: "fruit-2",
+          apple: "apple-20",
+          banana: "banana-20",
+          orange: "orange-20"
         }
       ],
       key: 1, // table key
-      formTheadOptions: ['apple', 'banana', 'orange'],
+      formTheadOptions: ["apple", "banana", "orange"],
       checkboxVal: defaultFormThead, // checkboxVal
       formThead: defaultFormThead // 默认表头 Default header
-    }
+    };
   },
   watch: {
     checkboxVal(valArr) {
-      this.formThead = this.formTheadOptions.filter(i => valArr.indexOf(i) >= 0)
-      this.key = this.key + 1// 为了保证table 每次都会重渲 In order to ensure the table will be re-rendered each time
+      this.formThead = this.formTheadOptions.filter(
+        i => valArr.indexOf(i) >= 0
+      );
+      this.key = this.key + 1; // 为了保证table 每次都会重渲 In order to ensure the table will be re-rendered each time
     }
   }
-}
+};
 </script>
-
diff --git a/src/views/table/dynamic-table/components/UnfixedThead.vue b/src/views/table/dynamic-table/components/UnfixedThead.vue
index 831b070a..8b28c238 100644
--- a/src/views/table/dynamic-table/components/UnfixedThead.vue
+++ b/src/views/table/dynamic-table/components/UnfixedThead.vue
@@ -14,7 +14,13 @@
       </el-checkbox-group>
     </div>
 
-    <el-table :data="tableData" border fit highlight-current-row style="width: 100%">
+    <el-table
+      :data="tableData"
+      border
+      fit
+      highlight-current-row
+      style="width: 100%"
+    >
       <el-table-column prop="name" label="fruitName" width="180" />
       <el-table-column v-for="fruit in formThead" :key="fruit" :label="fruit">
         <template slot-scope="scope">
@@ -31,20 +37,20 @@ export default {
     return {
       tableData: [
         {
-          name: 'fruit-1',
-          apple: 'apple-10',
-          banana: 'banana-10',
-          orange: 'orange-10'
+          name: "fruit-1",
+          apple: "apple-10",
+          banana: "banana-10",
+          orange: "orange-10"
         },
         {
-          name: 'fruit-2',
-          apple: 'apple-20',
-          banana: 'banana-20',
-          orange: 'orange-20'
+          name: "fruit-2",
+          apple: "apple-20",
+          banana: "banana-20",
+          orange: "orange-20"
         }
       ],
-      formThead: ['apple', 'banana']
-    }
+      formThead: ["apple", "banana"]
+    };
   }
-}
+};
 </script>
diff --git a/src/views/table/dynamic-table/index.vue b/src/views/table/dynamic-table/index.vue
index 5a4dd363..503784cb 100644
--- a/src/views/table/dynamic-table/index.vue
+++ b/src/views/table/dynamic-table/index.vue
@@ -13,12 +13,11 @@
 </template>
 
 <script>
-import FixedThead from './components/FixedThead'
-import UnfixedThead from './components/UnfixedThead'
+import FixedThead from "./components/FixedThead";
+import UnfixedThead from "./components/UnfixedThead";
 
 export default {
-  name: 'DynamicTable',
+  name: "DynamicTable",
   components: { FixedThead, UnfixedThead }
-}
+};
 </script>
-
diff --git a/src/views/table/inline-edit-table.vue b/src/views/table/inline-edit-table.vue
index 63828145..32a14977 100644
--- a/src/views/table/inline-edit-table.vue
+++ b/src/views/table/inline-edit-table.vue
@@ -1,6 +1,13 @@
 <template>
   <div class="app-container">
-    <el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%">
+    <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>
@@ -9,7 +16,9 @@
 
       <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>{{
+            scope.row.timestamp | parseTime("{y}-{m}-{d} {h}:{i}")
+          }}</span>
         </template>
       </el-table-column>
 
@@ -21,12 +30,17 @@
 
       <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}">
+        <template slot-scope="{ row }">
           <el-tag :type="row.status | statusFilter">
             {{ row.status }}
           </el-tag>
@@ -34,7 +48,7 @@
       </el-table-column>
 
       <el-table-column min-width="300px" label="Title">
-        <template slot-scope="{row}">
+        <template slot-scope="{ row }">
           <template v-if="row.edit">
             <el-input v-model="row.title" class="edit-input" size="small" />
             <el-button
@@ -52,7 +66,7 @@
       </el-table-column>
 
       <el-table-column align="center" label="Actions" width="120">
-        <template slot-scope="{row}">
+        <template slot-scope="{ row }">
           <el-button
             v-if="row.edit"
             type="success"
@@ -67,7 +81,7 @@
             type="primary"
             size="small"
             icon="el-icon-edit"
-            @click="row.edit=!row.edit"
+            @click="row.edit = !row.edit"
           >
             Edit
           </el-button>
@@ -78,18 +92,18 @@
 </template>
 
 <script>
-import { fetchList } from '@/api/article'
+import { fetchList } from "@/api/article";
 
 export default {
-  name: 'InlineEditTable',
+  name: "InlineEditTable",
   filters: {
     statusFilter(status) {
       const statusMap = {
-        published: 'success',
-        draft: 'info',
-        deleted: 'danger'
-      }
-      return statusMap[status]
+        published: "success",
+        draft: "info",
+        deleted: "danger"
+      };
+      return statusMap[status];
     }
   },
   data() {
@@ -100,41 +114,41 @@ export default {
         page: 1,
         limit: 10
       }
-    }
+    };
   },
   created() {
-    this.getList()
+    this.getList();
   },
   methods: {
     async getList() {
-      this.listLoading = true
-      const { data } = await fetchList(this.listQuery)
-      const items = data.items
+      this.listLoading = true;
+      const { data } = await fetchList(this.listQuery);
+      const items = data.items;
       this.list = items.map(v => {
-        this.$set(v, 'edit', false) // https://vuejs.org/v2/guide/reactivity.html
-        v.originalTitle = v.title //  will be used when user click the cancel botton
-        return v
-      })
-      this.listLoading = false
+        this.$set(v, "edit", false); // https://vuejs.org/v2/guide/reactivity.html
+        v.originalTitle = v.title; //  will be used when user click the cancel botton
+        return v;
+      });
+      this.listLoading = false;
     },
     cancelEdit(row) {
-      row.title = row.originalTitle
-      row.edit = false
+      row.title = row.originalTitle;
+      row.edit = false;
       this.$message({
-        message: 'The title has been restored to the original value',
-        type: 'warning'
-      })
+        message: "The title has been restored to the original value",
+        type: "warning"
+      });
     },
     confirmEdit(row) {
-      row.edit = false
-      row.originalTitle = row.title
+      row.edit = false;
+      row.originalTitle = row.title;
       this.$message({
-        message: 'The title has been edited',
-        type: 'success'
-      })
+        message: "The title has been edited",
+        type: "success"
+      });
     }
   }
-}
+};
 </script>
 
 <style scoped>
diff --git a/src/views/theme/index.vue b/src/views/theme/index.vue
index 0af7711a..74351743 100644
--- a/src/views/theme/index.vue
+++ b/src/views/theme/index.vue
@@ -2,7 +2,11 @@
   <div class="app-container">
     <el-card class="box-card">
       <div slot="header">
-        <a class="link-type link-title" target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/guide/advanced/theme.html">
+        <a
+          class="link-type link-title"
+          target="_blank"
+          href="https://panjiachen.github.io/vue-element-admin-site/guide/advanced/theme.html"
+        >
           Theme documentation
         </a>
       </div>
@@ -10,7 +14,9 @@
         <span class="field-label">Change Theme : </span>
         <el-switch v-model="theme" />
         <aside style="margin-top:15px;">
-          Tips: It is different from the theme-pick on the navbar is two different skinning methods, each with different application scenarios. Refer to the documentation for details.
+          Tips: It is different from the theme-pick on the navbar is two
+          different skinning methods, each with different application scenarios.
+          Refer to the documentation for details.
         </aside>
       </div>
     </el-card>
@@ -47,7 +53,12 @@
     </div>
 
     <div class="block">
-      <el-tag v-for="tag in tags" :key="tag.type" :type="tag.type" class="tag-item">
+      <el-tag
+        v-for="tag in tags"
+        :key="tag.type"
+        :type="tag.type"
+        class="tag-item"
+      >
         {{ tag.name }}
       </el-tag>
     </div>
@@ -73,35 +84,35 @@
 </template>
 
 <script>
-import { toggleClass } from '@/utils'
-import '@/assets/custom-theme/index.css' // the theme changed version element-ui css
+import { toggleClass } from "@/utils";
+import "@/assets/custom-theme/index.css"; // the theme changed version element-ui css
 
 export default {
-  name: 'Theme',
+  name: "Theme",
   data() {
     return {
       theme: false,
       tags: [
-        { name: 'Tag One', type: '' },
-        { name: 'Tag Two', type: 'info' },
-        { name: 'Tag Three', type: 'success' },
-        { name: 'Tag Four', type: 'warning' },
-        { name: 'Tag Five', type: 'danger' }
+        { name: "Tag One", type: "" },
+        { name: "Tag Two", type: "info" },
+        { name: "Tag Three", type: "success" },
+        { name: "Tag Four", type: "warning" },
+        { name: "Tag Five", type: "danger" }
       ],
       slideValue: 50,
       radio: 3
-    }
+    };
   },
   watch: {
     theme() {
-      toggleClass(document.body, 'custom-theme')
+      toggleClass(document.body, "custom-theme");
     }
   }
-}
+};
 </script>
 
 <style scoped>
-.field-label{
+.field-label {
   vertical-align: middle;
 }
 .box-card {
diff --git a/src/views/zip/index.vue b/src/views/zip/index.vue
index 4406e057..78e26c94 100644
--- a/src/views/zip/index.vue
+++ b/src/views/zip/index.vue
@@ -1,10 +1,28 @@
 <template>
   <div class="app-container">
-    <el-input v-model="filename" placeholder="Please enter the file name (default file)" style="width:300px;" prefix-icon="el-icon-document" />
-    <el-button :loading="downloadLoading" style="margin-bottom:20px;" type="primary" icon="document" @click="handleDownload">
+    <el-input
+      v-model="filename"
+      placeholder="Please enter the file name (default file)"
+      style="width:300px;"
+      prefix-icon="el-icon-document"
+    />
+    <el-button
+      :loading="downloadLoading"
+      style="margin-bottom:20px;"
+      type="primary"
+      icon="document"
+      @click="handleDownload"
+    >
       Export Zip
     </el-button>
-    <el-table v-loading="listLoading" :data="list" element-loading-text="拼命加载中" border fit highlight-current-row>
+    <el-table
+      v-loading="listLoading"
+      :data="list"
+      element-loading-text="拼命加载中"
+      border
+      fit
+      highlight-current-row
+    >
       <el-table-column align="center" label="ID" width="95">
         <template slot-scope="scope">
           {{ scope.$index }}
@@ -36,42 +54,48 @@
 </template>
 
 <script>
-import { fetchList } from '@/api/article'
+import { fetchList } from "@/api/article";
 
 export default {
-  name: 'ExportZip',
+  name: "ExportZip",
   data() {
     return {
       list: null,
       listLoading: true,
       downloadLoading: false,
-      filename: ''
-    }
+      filename: ""
+    };
   },
   created() {
-    this.fetchData()
+    this.fetchData();
   },
   methods: {
     async fetchData() {
-      this.listLoading = true
-      const { data } = await fetchList()
-      this.list = data.items
-      this.listLoading = false
+      this.listLoading = true;
+      const { data } = await fetchList();
+      this.list = data.items;
+      this.listLoading = false;
     },
     handleDownload() {
-      this.downloadLoading = true
-      import('@/vendor/Export2Zip').then(zip => {
-        const tHeader = ['Id', 'Title', 'Author', 'Readings', 'Date']
-        const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
-        const list = this.list
-        const data = this.formatJson(filterVal, list)
-        zip.export_txt_to_zip(tHeader, data, this.filename, this.filename)
-        this.downloadLoading = false
-      })
+      this.downloadLoading = true;
+      import("@/vendor/Export2Zip").then(zip => {
+        const tHeader = ["Id", "Title", "Author", "Readings", "Date"];
+        const filterVal = [
+          "id",
+          "title",
+          "author",
+          "pageviews",
+          "display_time"
+        ];
+        const list = this.list;
+        const data = this.formatJson(filterVal, list);
+        zip.export_txt_to_zip(tHeader, data, this.filename, this.filename);
+        this.downloadLoading = false;
+      });
     },
     formatJson(filterVal, jsonData) {
-      return jsonData.map(v => filterVal.map(j => v[j]))
+      return jsonData.map(v => filterVal.map(j => v[j]));
     }
   }
-}
+};
 </script>
diff --git a/tests/unit/components/Hamburger.spec.js b/tests/unit/components/Hamburger.spec.js
index 01ea303a..e502d68a 100644
--- a/tests/unit/components/Hamburger.spec.js
+++ b/tests/unit/components/Hamburger.spec.js
@@ -1,18 +1,18 @@
-import { shallowMount } from '@vue/test-utils'
-import Hamburger from '@/components/Hamburger/index.vue'
-describe('Hamburger.vue', () => {
-  it('toggle click', () => {
-    const wrapper = shallowMount(Hamburger)
-    const mockFn = jest.fn()
-    wrapper.vm.$on('toggleClick', mockFn)
-    wrapper.find('.hamburger').trigger('click')
-    expect(mockFn).toBeCalled()
-  })
-  it('prop isActive', () => {
-    const wrapper = shallowMount(Hamburger)
-    wrapper.setProps({ isActive: true })
-    expect(wrapper.contains('.is-active')).toBe(true)
-    wrapper.setProps({ isActive: false })
-    expect(wrapper.contains('.is-active')).toBe(false)
-  })
-})
+import { shallowMount } from "@vue/test-utils";
+import Hamburger from "@/components/Hamburger/index.vue";
+describe("Hamburger.vue", () => {
+  it("toggle click", () => {
+    const wrapper = shallowMount(Hamburger);
+    const mockFn = jest.fn();
+    wrapper.vm.$on("toggleClick", mockFn);
+    wrapper.find(".hamburger").trigger("click");
+    expect(mockFn).toBeCalled();
+  });
+  it("prop isActive", () => {
+    const wrapper = shallowMount(Hamburger);
+    wrapper.setProps({ isActive: true });
+    expect(wrapper.contains(".is-active")).toBe(true);
+    wrapper.setProps({ isActive: false });
+    expect(wrapper.contains(".is-active")).toBe(false);
+  });
+});
diff --git a/tests/unit/components/SvgIcon.spec.js b/tests/unit/components/SvgIcon.spec.js
index 31467a9f..8c8df9f7 100644
--- a/tests/unit/components/SvgIcon.spec.js
+++ b/tests/unit/components/SvgIcon.spec.js
@@ -1,22 +1,22 @@
-import { shallowMount } from '@vue/test-utils'
-import SvgIcon from '@/components/SvgIcon/index.vue'
-describe('SvgIcon.vue', () => {
-  it('iconClass', () => {
+import { shallowMount } from "@vue/test-utils";
+import SvgIcon from "@/components/SvgIcon/index.vue";
+describe("SvgIcon.vue", () => {
+  it("iconClass", () => {
     const wrapper = shallowMount(SvgIcon, {
       propsData: {
-        iconClass: 'test'
+        iconClass: "test"
       }
-    })
-    expect(wrapper.find('use').attributes().href).toBe('#icon-test')
-  })
-  it('className', () => {
+    });
+    expect(wrapper.find("use").attributes().href).toBe("#icon-test");
+  });
+  it("className", () => {
     const wrapper = shallowMount(SvgIcon, {
       propsData: {
-        iconClass: 'test'
+        iconClass: "test"
       }
-    })
-    expect(wrapper.classes().length).toBe(1)
-    wrapper.setProps({ className: 'test' })
-    expect(wrapper.classes().includes('test')).toBe(true)
-  })
-})
+    });
+    expect(wrapper.classes().length).toBe(1);
+    wrapper.setProps({ className: "test" });
+    expect(wrapper.classes().includes("test")).toBe(true);
+  });
+});
diff --git a/tests/unit/utils/formatTime.spec.js b/tests/unit/utils/formatTime.spec.js
index d07e414f..dc0f22cc 100644
--- a/tests/unit/utils/formatTime.spec.js
+++ b/tests/unit/utils/formatTime.spec.js
@@ -1,29 +1,31 @@
-import { formatTime } from '@/utils/index.js'
-describe('Utils:formatTime', () => {
-  const d = new Date('2018-07-13 17:54:01') // "2018-07-13 17:54:01"
-  const retrofit = 5 * 1000
+import { formatTime } from "@/utils/index.js";
+describe("Utils:formatTime", () => {
+  const d = new Date("2018-07-13 17:54:01"); // "2018-07-13 17:54:01"
+  const retrofit = 5 * 1000;
 
-  it('ten digits timestamp', () => {
-    expect(formatTime((d / 1000).toFixed(0))).toBe('7月13日17时54分')
-  })
-  it('test now', () => {
-    expect(formatTime(+new Date() - 1)).toBe('刚刚')
-  })
-  it('less two minute', () => {
-    expect(formatTime(+new Date() - 60 * 2 * 1000 + retrofit)).toBe('2分钟前')
-  })
-  it('less two hour', () => {
-    expect(formatTime(+new Date() - 60 * 60 * 2 * 1000 + retrofit)).toBe('2小时前')
-  })
-  it('less one day', () => {
-    expect(formatTime(+new Date() - 60 * 60 * 24 * 1 * 1000)).toBe('1天前')
-  })
-  it('more than one day', () => {
-    expect(formatTime(d)).toBe('7月13日17时54分')
-  })
-  it('format', () => {
-    expect(formatTime(d, '{y}-{m}-{d} {h}:{i}')).toBe('2018-07-13 17:54')
-    expect(formatTime(d, '{y}-{m}-{d}')).toBe('2018-07-13')
-    expect(formatTime(d, '{y}/{m}/{d} {h}-{i}')).toBe('2018/07/13 17-54')
-  })
-})
+  it("ten digits timestamp", () => {
+    expect(formatTime((d / 1000).toFixed(0))).toBe("7月13日17时54分");
+  });
+  it("test now", () => {
+    expect(formatTime(+new Date() - 1)).toBe("刚刚");
+  });
+  it("less two minute", () => {
+    expect(formatTime(+new Date() - 60 * 2 * 1000 + retrofit)).toBe("2分钟前");
+  });
+  it("less two hour", () => {
+    expect(formatTime(+new Date() - 60 * 60 * 2 * 1000 + retrofit)).toBe(
+      "2小时前"
+    );
+  });
+  it("less one day", () => {
+    expect(formatTime(+new Date() - 60 * 60 * 24 * 1 * 1000)).toBe("1天前");
+  });
+  it("more than one day", () => {
+    expect(formatTime(d)).toBe("7月13日17时54分");
+  });
+  it("format", () => {
+    expect(formatTime(d, "{y}-{m}-{d} {h}:{i}")).toBe("2018-07-13 17:54");
+    expect(formatTime(d, "{y}-{m}-{d}")).toBe("2018-07-13");
+    expect(formatTime(d, "{y}/{m}/{d} {h}-{i}")).toBe("2018/07/13 17-54");
+  });
+});
diff --git a/tests/unit/utils/parseTime.spec.js b/tests/unit/utils/parseTime.spec.js
index 77ecb9d5..ebbf5d4e 100644
--- a/tests/unit/utils/parseTime.spec.js
+++ b/tests/unit/utils/parseTime.spec.js
@@ -1,27 +1,27 @@
-import { parseTime } from '@/utils/index.js'
-describe('Utils:parseTime', () => {
-  const d = new Date('2018-07-13 17:54:01') // "2018-07-13 17:54:01"
-  it('timestamp', () => {
-    expect(parseTime(d)).toBe('2018-07-13 17:54:01')
-  })
-  it('ten digits timestamp', () => {
-    expect(parseTime((d / 1000).toFixed(0))).toBe('2018-07-13 17:54:01')
-  })
-  it('new Date', () => {
-    expect(parseTime(new Date(d))).toBe('2018-07-13 17:54:01')
-  })
-  it('format', () => {
-    expect(parseTime(d, '{y}-{m}-{d} {h}:{i}')).toBe('2018-07-13 17:54')
-    expect(parseTime(d, '{y}-{m}-{d}')).toBe('2018-07-13')
-    expect(parseTime(d, '{y}/{m}/{d} {h}-{i}')).toBe('2018/07/13 17-54')
-  })
-  it('get the day of the week', () => {
-    expect(parseTime(d, '{a}')).toBe('五') // 星期五
-  })
-  it('get the day of the week', () => {
-    expect(parseTime(+d + 1000 * 60 * 60 * 24 * 2, '{a}')).toBe('日') // 星期日
-  })
-  it('empty argument', () => {
-    expect(parseTime()).toBeNull()
-  })
-})
+import { parseTime } from "@/utils/index.js";
+describe("Utils:parseTime", () => {
+  const d = new Date("2018-07-13 17:54:01"); // "2018-07-13 17:54:01"
+  it("timestamp", () => {
+    expect(parseTime(d)).toBe("2018-07-13 17:54:01");
+  });
+  it("ten digits timestamp", () => {
+    expect(parseTime((d / 1000).toFixed(0))).toBe("2018-07-13 17:54:01");
+  });
+  it("new Date", () => {
+    expect(parseTime(new Date(d))).toBe("2018-07-13 17:54:01");
+  });
+  it("format", () => {
+    expect(parseTime(d, "{y}-{m}-{d} {h}:{i}")).toBe("2018-07-13 17:54");
+    expect(parseTime(d, "{y}-{m}-{d}")).toBe("2018-07-13");
+    expect(parseTime(d, "{y}/{m}/{d} {h}-{i}")).toBe("2018/07/13 17-54");
+  });
+  it("get the day of the week", () => {
+    expect(parseTime(d, "{a}")).toBe("五"); // 星期五
+  });
+  it("get the day of the week", () => {
+    expect(parseTime(+d + 1000 * 60 * 60 * 24 * 2, "{a}")).toBe("日"); // 星期日
+  });
+  it("empty argument", () => {
+    expect(parseTime()).toBeNull();
+  });
+});
diff --git a/tests/unit/utils/validate.spec.js b/tests/unit/utils/validate.spec.js
index ef2efe61..7739dd24 100644
--- a/tests/unit/utils/validate.spec.js
+++ b/tests/unit/utils/validate.spec.js
@@ -1,28 +1,38 @@
-import { validUsername, validURL, validLowerCase, validUpperCase, validAlphabets } from '@/utils/validate.js'
-describe('Utils:validate', () => {
-  it('validUsername', () => {
-    expect(validUsername('admin')).toBe(true)
-    expect(validUsername('editor')).toBe(true)
-    expect(validUsername('xxxx')).toBe(false)
-  })
-  it('validURL', () => {
-    expect(validURL('https://github.com/PanJiaChen/vue-element-admin')).toBe(true)
-    expect(validURL('http://github.com/PanJiaChen/vue-element-admin')).toBe(true)
-    expect(validURL('github.com/PanJiaChen/vue-element-admin')).toBe(false)
-  })
-  it('validLowerCase', () => {
-    expect(validLowerCase('abc')).toBe(true)
-    expect(validLowerCase('Abc')).toBe(false)
-    expect(validLowerCase('123abc')).toBe(false)
-  })
-  it('validUpperCase', () => {
-    expect(validUpperCase('ABC')).toBe(true)
-    expect(validUpperCase('Abc')).toBe(false)
-    expect(validUpperCase('123ABC')).toBe(false)
-  })
-  it('validAlphabets', () => {
-    expect(validAlphabets('ABC')).toBe(true)
-    expect(validAlphabets('Abc')).toBe(true)
-    expect(validAlphabets('123aBC')).toBe(false)
-  })
-})
+import {
+  validUsername,
+  validURL,
+  validLowerCase,
+  validUpperCase,
+  validAlphabets
+} from "@/utils/validate.js";
+describe("Utils:validate", () => {
+  it("validUsername", () => {
+    expect(validUsername("admin")).toBe(true);
+    expect(validUsername("editor")).toBe(true);
+    expect(validUsername("xxxx")).toBe(false);
+  });
+  it("validURL", () => {
+    expect(validURL("https://github.com/PanJiaChen/vue-element-admin")).toBe(
+      true
+    );
+    expect(validURL("http://github.com/PanJiaChen/vue-element-admin")).toBe(
+      true
+    );
+    expect(validURL("github.com/PanJiaChen/vue-element-admin")).toBe(false);
+  });
+  it("validLowerCase", () => {
+    expect(validLowerCase("abc")).toBe(true);
+    expect(validLowerCase("Abc")).toBe(false);
+    expect(validLowerCase("123abc")).toBe(false);
+  });
+  it("validUpperCase", () => {
+    expect(validUpperCase("ABC")).toBe(true);
+    expect(validUpperCase("Abc")).toBe(false);
+    expect(validUpperCase("123ABC")).toBe(false);
+  });
+  it("validAlphabets", () => {
+    expect(validAlphabets("ABC")).toBe(true);
+    expect(validAlphabets("Abc")).toBe(true);
+    expect(validAlphabets("123aBC")).toBe(false);
+  });
+});
diff --git a/vue.config.js b/vue.config.js
index 4a5cd438..d6ac4887 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -26,6 +26,7 @@ module.exports = {
   assetsDir: 'static',
   lintOnSave: process.env.NODE_ENV === 'development',
   productionSourceMap: false,
+  
   devServer: {
     port: port,
     open: true,