[release] 3.6.4

perf[excel]: refactor excel (#536 )
fix[TodoList]: fixed css bug with z-index #535
2018-03-26 13:55:28 +08:00 · 2018-03-26 13:54:19 +08:00 · 2018-03-26 13:23:42 +08:00 · 2018-03-22 13:55:39 +08:00 · 2018-03-20 17:27:42 +08:00 · 2018-03-20 17:21:39 +08:00
345 changed files with 14596 additions and 15678 deletions
--- a/.babelrc
+++ b/.babelrc
@@ -1,5 +1,12 @@
 {
-  "presets": ["es2015", "stage-2"],
+  "presets": [
-  "plugins": ["transform-runtime"],
+    ["env", {
-  "comments": false
+      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-vue-jsx", "transform-runtime"]
 }
--- a/.editorconfig
+++ b/.editorconfig
@@ -0,0 +1,14 @@
 # http://editorconfig.org
 root = true
 [*]
 charset = utf-8
 indent_style = space
 indent_size = 2
 end_of_line = lf
 insert_final_newline = true
 trim_trailing_whitespace = true
 [*.md]
 insert_final_newline = false
 trim_trailing_whitespace = false
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,318 +1,199 @@
 module.exports = {
-    root: true,
+  root: true,
-    parser: 'babel-eslint',
+  parser: 'babel-eslint',
-    parserOptions: {
+  parserOptions: {
-        sourceType: 'module'
+    sourceType: 'module'
-    },
+  },
-    env: {
+  env: {
-        browser: true,
+    browser: true,
-        node: true
+    node: true,
-    },
+    es6: true,
-    extends: 'eslint:recommended',
+  },
-    // required to lint *.vue files
+  extends: 'eslint:recommended',
-    plugins: [
+  // required to lint *.vue files
-        'html'
+  plugins: [
-    ],
+    'html'
-    // check if imports actually resolve
+  ],
-    'settings': {
+  // check if imports actually resolve
-        'import/resolver': {
+  'settings': {
-            'webpack': {
+    'import/resolver': {
-                'config': 'build/webpack.base.conf.js'
+      'webpack': {
-            }
+        'config': 'build/webpack.base.conf.js'
-        }
+      }
    },
    // add your custom rules here
    'rules': {
        // don't require .vue extension when importing
        // 'import/extensions': ['error', 'always', {
        //     'js': 'never',
        //     'vue': 'never'
        // }],
        // allow debugger during development
        'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
        /*
         * Possible Errors
         */
        // disallow unnecessary parentheses
        'no-extra-parens': ['error', 'all', {'nestedBinaryExpressions': false}],
        // disallow negating the left operand of relational operators
        'no-unsafe-negation': 'error',
        // enforce valid JSDoc comments
        'valid-jsdoc': 'off',
        /*
         * Best Practices
         */
        // enforce return statements in callbacks of array methods
        'array-callback-return': 'error',
        // enforce consistent brace style for all control statements
        curly: ['error', 'multi-line'],
        // enforce consistent newlines before and after dots
        'dot-location': ['error', 'property'],
        // enforce dot notation whenever possible
        'dot-notation': 'error',
        // require the use of === and !==
        'eqeqeq': ['error', 'smart'],
        // disallow the use of arguments.caller or arguments.callee
        'no-caller': 'error',
        // disallow empty functions
        'no-empty-function': 'error',
        // disallow unnecessary calls to .bind()
        'no-extra-bind': 'error',
        // disallow unnecessary labels
        'no-extra-label': 'error',
        // disallow leading or trailing decimal points in numeric literals
        'no-floating-decimal': 'error',
        // disallow assignments to native objects or read-only global variables
        'no-global-assign': 'error',
        // disallow the use of eval()-like methods
        'no-implied-eval': 'error',
        // disallow the use of the __iterator__ property
        'no-iterator': 'error',
        // disallow unnecessary nested blocks
        'no-lone-blocks': 'error',
        // disallow multiple spaces
        'no-multi-spaces': 'error',
        // disallow new operators with the String, Number, and Boolean objects
        'no-new-wrappers': 'error',
        // disallow octal escape sequences in string literals
        'no-octal-escape': 'error',
        // disallow the use of the __proto__ property
        'no-proto': 'error',
        // disallow comparisons where both sides are exactly the same
        'no-self-compare': 'error',
        // disallow throwing literals as exceptions
        'no-throw-literal': 'error',
        // disallow unused expressions
        'no-unused-expressions': 'error',
        // disallow unnecessary calls to .call() and .apply()
        'no-useless-call': 'error',
        // disallow unnecessary concatenation of literals or template literals
        'no-useless-concat': 'error',
        // disallow unnecessary escape characters
        'no-useless-escape': 'error',
        // disallow void operators
        'no-void': 'error',
        // require parentheses around immediate function invocations
        'wrap-iife': 'error',
        // require or disallow “Yoda” conditions
        yoda: 'error',
        /*
         * Variables
         */
        // disallow labels that share a name with a variable
        'no-label-var': 'error',
        // disallow initializing variables to undefined
        'no-undef-init': 'error',
        'no-undef': 'off',
        // disallow the use of variables before they are defined
        'no-use-before-define': 'error',
        /*
         * Node.js and CommonJS
         */
        // disallow new operators with calls to require
        'no-new-require': 'error',
        /*
         * Stylistic Issues
         */
        // enforce consistent spacing inside array brackets
        'array-bracket-spacing': 'error',
        // enforce consistent spacing inside single-line blocks
        'block-spacing': 'error',
        // enforce consistent brace style for blocks
        'brace-style': ['error', '1tbs', {'allowSingleLine': true}],
        // require or disallow trailing commas
        'comma-dangle': 'error',
        // enforce consistent spacing before and after commas
        'comma-spacing': 'error',
        // enforce consistent comma style
        'comma-style': 'error',
        // enforce consistent spacing inside computed property brackets
        'computed-property-spacing': 'error',
        // require or disallow spacing between function identifiers and their invocations
        'func-call-spacing': 'error',
        // enforce consistent indentation
        indent: ['error', 2, {SwitchCase: 1}],
        // enforce the consistent use of either double or single quotes in JSX attributes
        'jsx-quotes': 'error',
        // enforce consistent spacing between keys and values in object literal properties
        'key-spacing': 'error',
        // enforce consistent spacing before and after keywords
        'keyword-spacing': 'error',
        // enforce consistent linebreak style
        'linebreak-style': 'error',
        // require or disallow newlines around directives
        'lines-around-directive': 'error',
        // require constructor names to begin with a capital letter
        'new-cap': 'off',
        // require parentheses when invoking a constructor with no arguments
        'new-parens': 'error',
        // disallow Array constructors
        'no-array-constructor': 'error',
        // disallow Object constructors
        'no-new-object': 'error',
        // disallow trailing whitespace at the end of lines
        'no-trailing-spaces': 'error',
        // disallow ternary operators when simpler alternatives exist
        'no-unneeded-ternary': 'error',
        // disallow whitespace before properties
        'no-whitespace-before-property': 'error',
        // enforce consistent spacing inside braces
        'object-curly-spacing': ['error', 'always'],
        // require or disallow padding within blocks
        'padded-blocks': ['error', 'never'],
        // require quotes around object literal property names
        'quote-props': ['error', 'as-needed'],
        // enforce the consistent use of either backticks, double, or single quotes
        quotes: ['error', 'single'],
        // enforce consistent spacing before and after semicolons
        'semi-spacing': 'error',
        // require or disallow semicolons instead of ASI
        // semi: ['error', 'never'],
        // enforce consistent spacing before blocks
        'space-before-blocks': 'error',
        'no-console': 'off',
        // enforce consistent spacing before function definition opening parenthesis
        'space-before-function-paren': ['error', 'never'],
        // enforce consistent spacing inside parentheses
        'space-in-parens': 'error',
        // require spacing around infix operators
        'space-infix-ops': 'error',
        // enforce consistent spacing before or after unary operators
        'space-unary-ops': 'error',
        // enforce consistent spacing after the // or /* in a comment
        'spaced-comment': 'error',
        // require or disallow Unicode byte order mark (BOM)
        'unicode-bom': 'error',
        /*
         * ECMAScript 6
         */
        // require braces around arrow function bodies
        'arrow-body-style': 'error',
        // require parentheses around arrow function arguments
        'arrow-parens': ['error', 'as-needed'],
        // enforce consistent spacing before and after the arrow in arrow functions
        'arrow-spacing': 'error',
        // enforce consistent spacing around * operators in generator functions
        'generator-star-spacing': ['error', 'after'],
        // disallow duplicate module imports
        'no-duplicate-imports': 'error',
        // disallow unnecessary computed property keys in object literals
        'no-useless-computed-key': 'error',
        // disallow unnecessary constructors
        'no-useless-constructor': 'error',
        // disallow renaming import, export, and destructured assignments to the same name
        'no-useless-rename': 'error',
        // require let or const instead of var
        'no-var': 'error',
        // require or disallow method and property shorthand syntax for object literals
        'object-shorthand': 'error',
        // require arrow functions as callbacks
        'prefer-arrow-callback': 'error',
        // require const declarations for variables that are never reassigned after declared
        'prefer-const': 'error',
        // disallow parseInt() in favor of binary, octal, and hexadecimal literals
        'prefer-numeric-literals': 'error',
        // require rest parameters instead of arguments
        'prefer-rest-params': 'error',
        // require spread operators instead of .apply()
        'prefer-spread': 'error',
        // enforce spacing between rest and spread operators and their expressions
        'rest-spread-spacing': 'error',
        // require or disallow spacing around embedded expressions of template strings
        'template-curly-spacing': 'error',
        // require or disallow spacing around the * in yield* expressions
        'yield-star-spacing': 'error'
    }
  },
  // add your custom rules here
  //it is base on https://github.com/vuejs/eslint-config-vue
  'rules': {
    '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': [2, 'allow-null'],
    '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']
  }
 }
--- a/.gitignore
+++ b/.gitignore
@@ -1,10 +1,20 @@
 .DS_Store
 node_modules/
 dist/
-static/ckeditor
+npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 npm-debug.log
 test/unit/coverage
 test/e2e/reports
 selenium-debug.log
 # Editor directories and files
 .idea
 .vscode
 *.suo
 *.ntvs*
 *.njsproj
 *.sln
 package-lock.json
--- a/.postcssrc.js
+++ b/.postcssrc.js
@@ -0,0 +1,10 @@
 // https://github.com/michael-ciniawsky/postcss-load-config
 module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    // to edit target browsers: use "browserslist" field in package.json
    "autoprefixer": {}
  }
 }
--- a/.travis.yml
+++ b/.travis.yml
@@ -0,0 +1,5 @@
 language: node_js
 node_js: stable
 script: npm run test
 notifications:
  email: false
--- a/2
+++ b/2
@@ -1,6 +1,6 @@
 MIT License
-Copyright (c) 2017 PanJiaChen
+Copyright (c) 2017-present PanJiaChen
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
--- a/README-en.md
+++ b/README-en.md
@@ -1,172 +0,0 @@
 ## Intro
 > In the past half year, I have been building a backend for management dashboard using Vue. Though the backend has contained greater than 70 pages and over 10 permissions, it still takes insignificant effort to maintain the project. So I decide to make it open source so as to share my development experience and progress on backend. The tech stack is mainly [Vue.js](https://github.com/vuejs/vue)+[Element](https://github.com/ElemeFE/element)+[axios](https://github.com/mzabriskie/axios). Since it's a personal project, all data requests are simulated with [Mock.js](https://github.com/nuysoft/Mock). **Note:** if anyone wants to modify or develop based on this project, please remove the mock files.
 **Live demo:** http://panjiachen.github.io/vue-element-admin
 **Note: element-ui@1.3.3 is used in the project, so vue 2.3.0+ is required.**
 More tutorials incoming. Including articles on:
 - How to build structure of a backend dashboard project from scratch
 - How to make a complete user system (e.g. permission authentication, two-factor authentication)
 - How to package components (e.g. rich text)
 - How to integrate with [Qiniu](https://www.qiniu.com/)
 - Other development experience on backend
 Join the group on QQ 591724180.
 **Tutorials:**
 - [Wiki](https://github.com/PanJiaChen/vue-element-admin/wiki)
 - [Step by step instructions on playing with backend using Vue Part 1 - Fundamentals](https://juejin.im/post/59097cd7a22b9d0065fb61d2)
 - [Step by step instructions on playing with backend using Vue Part 2 - Login permission](https://juejin.im/post/591aa14f570c35006961acac)
 - [Step by step instructions on packaging a Vue component](https://segmentfault.com/a/1190000009090836)
 **Please read the Wiki and articles above before creating any issue. Feel free to contribute by making a pull request.**
 ## Features
 - Login/Logout
 - Permission authentication
 - Sidebar
 - Breadcrumb
 - Rich text editor
 - Markdown editor
 - JSON editor
 - Drag & drop list
 - SplitPane
 - Dropzone
 - Sticky
 - CountTo
 - ECharts
 - 401, 404 error page
 - Error log
 - Exporting to Excel
 - Table example
 - Interactive table example
 - Drag & drop table example
 - Form example
 - Multi-environments distribution
 - Dashboard
 - Two-factor authentication
 - Collapsing sidebar (support nested routes)
 - Mock data
 - cache tabs example
 - screenfull
 - markdown2html
 ## Development
 ```bash
 # Clone project
 git clone https://github.com/PanJiaChen/vue-element-admin.git
 # Install dependencies
 npm install
 # Or (not recommended for cnpm due to unknown bugs, use taobao mirror instead)
 npm install --registry=https://registry.npm.taobao.org
 # Run local dev server
 npm run dev
 ```
 Visit in browser: http://localhost:9527
 ## Distribution
 ```bash
 # Build staged environment with webpack-bundle-analyzer
 npm run build:sit-preview
 # Build production environment
 npm run build:prod
 ```
 ## Directory structure
 ```
 ├── build                      // build 
 ├── config                     // config
 ├── src                        // source code
 │   ├── api                    // all requests
 │   ├── assets                 // static resource like themes, fonts
 │   ├── components             // global public components
 │   ├── directive              // global directive
 │   ├── filters                // global filters
 │   ├── mock                   // mock data
 │   ├── router                 // router
 │   ├── store                  // global status management
 │   ├── styles                 // global styles
 │   ├── utils                  // global public functions
 │   ├── view                   // view
 │   ├── App.vue                // entry view
 │   └── main.js                // entry for loading components, initialization
 ├── static                     // third-party libraries not packed with Webpack
 │   ├── jquery
 │   └── Tinymce                // rich text
 ├── .babelrc                   // babel-loader config
 ├── eslintrc.js                // eslint config
 ├── .gitignore                 // gitignore
 ├── favicon.ico                // favicon
 ├── index.html                 // html template
 └── package.json               // package.json
 ```
 ## Changelog
 Detailed changes for each release are documented in the [release notes](https://github.com/PanJiaChen/vue-element-admin/releases).
 ## State Management
 Only status of user and app configuration is managed by Vuex. Other data are managed by their own business pages.
 ## Demo
 #### Two-factor authentication, supporting WeChat and QQ
 ![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/2login.gif)
 #### Realtime switching themes
 ![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/theme.gif)
 #### Collapsing sidebar
 ![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/leftmenu.gif)
 #### Drag & drop table
 ![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/order.gif)
 #### Interactive table
 ![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/dynamictable.gif)
 #### Uploading cropped avatar
 ![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/uploadAvatar.gif)
 #### Error log
 ![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/errorlog.gif)
 #### Rich text (integrated with Qiniu, watermark and customization)
 ![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/editor.gif)
 #### Packaging table component
 ![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/table.gif)
 #### Charts
 ![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/echarts.gif)
 #### Exporting to Excel
 ![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/excel.png)
 #### More
 http://panjiachen.github.io/vue-element-admin
--- a/README.md
+++ b/README.md
@@ -1,178 +1,155 @@
-# vue-element-admin #
+<p align="center">
-[线上地址](http://panjiachen.github.io/vue-element-admin)
+  <img width="320" src="https://wpimg.wallstcn.com/ecc53a42-d79b-42e2-8852-5126b810a4c8.svg">
 </p>
-[English Document](https://github.com/PanJiaChen/vue-element-admin/blob/master/README-en.md)
+<p align="center">
  <a href="https://github.com/vuejs/vue">
    <img src="https://img.shields.io/badge/vue-2.5.10-brightgreen.svg" alt="vue">
  </a>
  <a href="https://github.com/ElemeFE/element">
    <img src="https://img.shields.io/badge/element--ui-2.0.8-brightgreen.svg" alt="element-ui">
  </a>
  <a href="https://travis-ci.org/PanJiaChen/vue-element-admin" rel="nofollow">
    <img src="https://travis-ci.org/PanJiaChen/vue-element-admin.svg?branch=master" alt="Build Status">
  </a>
  <a href="https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE">
    <img src="https://img.shields.io/github/license/mashape/apistatus.svg" alt="license">
  </a>
  <a href="https://github.com/PanJiaChen/vue-element-admin/releases">
    <img src="https://img.shields.io/github/release/PanJiaChen/vue-element-admin.svg" alt="GitHub release">
  </a>
 </p>
-[wiki](https://github.com/PanJiaChen/vue-element-admin/wiki)
+English | [简体中文](./README.zh-CN.md)
-**注意：该项目目前使用element-ui@1.3.3版本,所以最低兼容 Vue 2.3.0**
+## Introduction
-## 前言
+`vue-element-admin` is a production-ready solution for admin interfaces. Based on [Vue.js](https://github.com/vuejs/vue) and use the UI Toolkit -- [element](https://github.com/ElemeFE/element). `vue-element-admin` is a magical vue admin, it based on the newest development stack of vue, built-in i18n solution, typical templates for enterprise applications, lots of awesome features. It helps you build a large complex Single-Page Applications. I believe whatever your needs are, this project will help you.
 > 这半年来一直在用vue写管理后台，目前后台已经有百来个个页面，十几种权限，但维护成本依然很低，所以准备开源分享一下后台开发的经验和成果。目前的技术栈主要的采用vue+element+axios由webpack2打包.由于是个人项目，所以数据请求都是用了mockjs模拟。注意：在次项目基础上改造开发时请移除mock文件。
-写了一个系列的教程配套文章，如何从零构建后一个完整的后台项目:
+- [Preview](http://panjiachen.github.io/vue-element-admin)
- - [wiki](https://github.com/PanJiaChen/vue-element-admin/wiki)
+- [Documentation](https://panjiachen.github.io/vue-element-admin-site/#/)
 - [手摸手，带你用 vue 撸后台 系列一(基础篇)](https://juejin.im/post/59097cd7a22b9d0065fb61d2)
 - [手摸手，带你用 vue 撸后台 系列二(登录权限篇)](https://juejin.im/post/591aa14f570c35006961acac)
 - [手摸手，带你用 vue 撸后台 系列三 (实战篇)](https://juejin.im/post/593121aa0ce4630057f70d35)
 - [手摸手，带你封装一个vue component](https://segmentfault.com/a/1190000009090836)
- 相应需求，开了一个qq群 591724180 方便大家交流
+- [Wiki](https://github.com/PanJiaChen/vue-element-admin/wiki)
- **如有问题请先看上述文章和Wiki,若不能满足，欢迎issue和pr~**
+- [Donate](https://panjiachen.github.io/vue-element-admin-site/#/donate)
- **该项目并不是一个脚手架，更倾向于是一个集成解决方案方案**
+**vue-element-admin is a admin interfaces integration solution, which is not suitable for secondary development as a base template.**
- **该项目不支持低版本游览器，有需求请自行添加polyfill[详情](https://github.com/PanJiaChen/vue-element-admin/wiki#babel-polyfill)**
+ - Base template recommends using: [vueAdmin-template](https://github.com/PanJiaChen/vueAdmin-template)  
 - Desktop: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
 **Note: This project uses element-ui@2.0.0+ version, so the minimum compatible vue@2.5.0+**
-## 功能
+## Preparation
- 登录/注销
+
- 权限验证
+You need to install [node](http://nodejs.org/) and [git](https://git-scm.com/) locally. The project is based on [ES2015+](http://es6.ruanyifeng.com/)、[vue](https://cn.vuejs.org/index.html)、[vuex](https://vuex.vuejs.org/zh-cn/)、[vue-router](https://router.vuejs.org/zh-cn/) 和 [element-ui](https://github.com/ElemeFE/element). All data requests for this project are simulated using [Mock.js](https://github.com/nuysoft/Mock). It would be helpful if you have pre-existing knowledge on those.
- 侧边栏
+
- 面包屑
+ **This project is not a scaffolding and is more of an integrated solution.**
- 富文本编辑器
+
- Markdown编辑器
+ **This project does not support low version browsers (e.g. IE). Please add polyfill yourself if you need them.**
- JSON编辑器
+
- 列表拖拽
+ <p align="center">
- plitPane
+  <img width="900" src="https://wpimg.wallstcn.com/a5894c1b-f6af-456e-82df-1151da0839bf.png">
 </p>
 ## Features
 ```
 - Login / Logout
 - Permission authentication
 - Multi-environment build
 - Dynamic sidebar (supports multi-level routing)
 - Dynamic breadcrumb
 - I18n
 - Customizable theme
 - Tags-view(Tab page Support right-click operation)
 - Rich text editor
 - Markdown editor
 - JSON editor
 - Screenfull
 - Drag and drop list
 - Svg Sprite
 - Dashboard
 - Mock data
 - Echarts
 - Clipboard
 - 401/404 error page
 - Error log
 - Export excel
 - Export zip
 - Front-end visualization excel
 - Tree Table
 - Table example
 - Dynamictable example
 - Drag and drop table example
 - Inline edit table example
 - Form example
 - Two-step login
 - SplitPane
 - Dropzone
 - Sticky
 - CountTo
- echarts图表
+- Markdown to html
- 401，401错误页面
+```
 - 错误日志
 - 导出excel
 - table example
 - 动态table example
 - 拖拽table example
 - 内联编辑table example
 - form example
 - 多环境发布
 - dashboard
 - 二次登录
 - 动态侧边栏（支持多级路由）
 - mock数据
 - cache tabs example
 - screenfull
 - markdown2html
 ## Getting started
 ## 开发
 ```bash
-    # 克隆项目
+# clone the project
-    git clone https://github.com/PanJiaChen/vue-element-admin.git
+git clone https://github.com/PanJiaChen/vue-element-admin.git
-    # 安装依赖
+# install dependency
-    npm install
+npm install
    //or # 建议不要用cnpm  安装有各种诡异的bug 可以通过如下操作解决npm速度慢的问题
    npm install --registry=https://registry.npm.taobao.org
-    # 本地开发 开启服务
+# develop
-    npm run dev
+npm run dev
 ```
 浏览器访问 http://localhost:9527
-## 发布
+This will automatically open http://localhost:9527.
 ## Build
 ```bash
-    # 发布测试环境 带webpack ananalyzer
+# build for test environment
-    npm run build:sit-preview
+npm run build:sit
-    # 构建生成环境
+# build for production environment
-    npm run build:prod
+npm run build:prod
 ```
-## 目录结构
+## Advanced
-```shell
+```bash
-├── build                      // 构建相关  
+# --report to build with bundle size analytics
-├── config                     // 配置相关
+npm run build:prod --report
 ├── src                        // 源代码
 │   ├── api                    // 所有请求
 │   ├── assets                 // 主题 字体等静态资源
 │   ├── components             // 全局公用组件
 │   ├── directive              // 全局指令
 │   ├── filtres                // 全局filter
 │   ├── mock                   // mock数据
 │   ├── router                 // 路由
 │   ├── store                  // 全局store管理
 │   ├── styles                 // 全局样式
 │   ├── utils                  // 全局公用方法
 │   ├── view                   // view
 │   ├── App.vue                // 入口页面
 │   └── main.js                // 入口 加载组件 初始化等
 ├── static                     // 第三方不打包资源
 │   ├── jquery
 │   └── Tinymce                // 富文本
 ├── .babelrc                   // babel-loader 配置
 ├── eslintrc.js                // eslint 配置项
 ├── .gitignore                 // git 忽略项
 ├── favicon.ico                // favicon图标
 ├── index.html                 // html模板
 └── package.json               // package.json
 # --preview to start a server in local to preview
 npm run build:prod --preview
 # lint code
 npm run lint
 # auto fix
 npm run lint -- --fix
 ```
 Refer to [Documentation](https://panjiachen.github.io/vue-element-admin-site/#/deploy) for more information
 ## Changelog
 Detailed changes for each release are documented in the [release notes](https://github.com/PanJiaChen/vue-element-admin/releases).
-## 状态管理
+## Online Demo
-后台只有user和app配置相关状态使用vuex存在全局，其它数据都由每个业务页面自己管理。
+[Preview](http://panjiachen.github.io/vue-element-admin)
 ## Donate
 If you find this project useful, you can buy author a glass of juice :tropical_drink:
-## 效果图
+![donate](https://wpimg.wallstcn.com/bd273f0d-83a0-4ef2-92e1-9ac8ed3746b9.png)
-#### 两步验证登录 支持微信和qq
+[Paypal Me](https://www.paypal.me/panfree23)
-![两步验证 here](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/2login.gif)
+[Buy me a coffee](https://www.buymeacoffee.com/Pan)
-#### 真正的动态换肤
+## License
-![真正的动态换肤](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/theme.gif)<br />
+[MIT](https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE)
 #### 可收起侧边栏
 ![enter image description here](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/leftmenu.gif)
 #### table拖拽排序
 ![enter image description here](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/order.gif)
 #### 动态table
 ![enter image description here](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/dynamictable.gif)
 #### 上传裁剪头像
 ![enter image description here](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/uploadAvatar.gif)
 #### 错误统计
 ![enter image description here](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/errorlog.gif)
 #### 富文本(整合七牛 打水印等个性化功能)
 ![enter image description here](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/editor.gif)
 #### 封装table组件
 ![enter image description here](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/table.gif)
 #### 图表
 ![enter image description here](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/echarts.gif)
 #### 导出excel
 ![enter image description here](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/excel.png)
 ## [更多demo](http://panjiachen.github.io/vue-element-admin)
 Copyright (c) 2017-present PanJiaChen
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -0,0 +1,166 @@
 <p align="center">
  <img width="320" src="https://wpimg.wallstcn.com/ecc53a42-d79b-42e2-8852-5126b810a4c8.svg">
 </p>
 <p align="center">
  <a href="https://github.com/vuejs/vue">
    <img src="https://img.shields.io/badge/vue-2.5.10-brightgreen.svg" alt="vue">
  </a>
  <a href="https://github.com/ElemeFE/element">
    <img src="https://img.shields.io/badge/element--ui-2.0.8-brightgreen.svg" alt="element-ui">
  </a>
  <a href="https://travis-ci.org/PanJiaChen/vue-element-admin" rel="nofollow">
    <img src="https://travis-ci.org/PanJiaChen/vue-element-admin.svg?branch=master" alt="Build Status">
  </a>
  <a href="https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE">
    <img src="https://img.shields.io/github/license/mashape/apistatus.svg" alt="license">
  </a>
  <a href="https://github.com/PanJiaChen/vue-element-admin/releases">
    <img src="https://img.shields.io/github/release/PanJiaChen/vue-element-admin.svg" alt="GitHub release">
  </a>
 </p>
 简体中文 | [English](./README.md)
 ## 简介
 `vue-element-admin` 是一个后台集成解决方案，它基于 [Vue.js](https://github.com/vuejs/vue) 和 [element](https://github.com/ElemeFE/element)。它使用了最新的前端技术栈，内置了i18国际化解决方案，动态路由，权限验证等很多功能特性，相信不管你的需求是什么，本项目都能帮助到你。
 - [在线访问](http://panjiachen.github.io/vue-element-admin)
 - [使用文档](https://panjiachen.github.io/vue-element-admin-site/#/zh-cn/)
 - [Wiki](https://github.com/PanJiaChen/vue-element-admin/wiki)
 - [Donate](https://panjiachen.github.io/vue-element-admin-site/#/zh-cn/donate)
 **本项目的定位是后台集成方案，不适合当基础模板来开发。**
 - 模板建议使用: [vueAdmin-template](https://github.com/PanJiaChen/vueAdmin-template)  
 - 桌面端: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
 **注意：该项目使用 element-ui@2.0.0+ 版本，所以最低兼容 vue@2.5.0+**
 ## 前序准备
 你的本地环境需要安装 [node](http://nodejs.org/) 和 [git](https://git-scm.com/)。我们的技术栈基于 [ES2015+](http://es6.ruanyifeng.com/)、[vue](https://cn.vuejs.org/index.html)、[vuex](https://vuex.vuejs.org/zh-cn/)、[vue-router](https://router.vuejs.org/zh-cn/) and [element-ui](https://github.com/ElemeFE/element)，所有的请求数据都使用[Mock.js](https://github.com/nuysoft/Mock)模拟，提前了解和学习这些知识会对使用本项目有很大的帮助。
 同时配套一个系列的教程文章，如何从零构建后一个完整的后台项目，建议大家先看完这些文章再来实践本项目
 - [手摸手，带你用 vue 撸后台 系列一(基础篇)](https://juejin.im/post/59097cd7a22b9d0065fb61d2)
 - [手摸手，带你用 vue 撸后台 系列二(登录权限篇)](https://juejin.im/post/591aa14f570c35006961acac)
 - [手摸手，带你用 vue 撸后台 系列三 (实战篇)](https://juejin.im/post/593121aa0ce4630057f70d35)
 - [手摸手，带你用 vue 撸后台 系列四(vueAdmin 一个极简的后台基础模板)](https://juejin.im/post/595b4d776fb9a06bbe7dba56)
 - [手摸手，带你封装一个 vue component](https://segmentfault.com/a/1190000009090836)
 - [手摸手，带你优雅的使用 icon](https://juejin.im/post/59bb864b5188257e7a427c09)
 响应需求，开了一个qq群 `591724180` 方便大家交流
 或者加入该群主 **[圈子](https://jianshiapp.com/circles/1209)** 楼主会经常分享一些技术相关的东西
 **如有问题请先看上述使用文档和文章，若不能满足，欢迎 issue 和 pr**
 **本项目并不是一个脚手架，更倾向于是一个集成解决方案**
 **该项目不支持低版本浏览器(如ie)，有需求请自行添加polyfill [详情](https://github.com/PanJiaChen/vue-element-admin/wiki#babel-polyfill)**
 <p align="center">
  <img width="900" src="https://wpimg.wallstcn.com/a5894c1b-f6af-456e-82df-1151da0839bf.png">
 </p>
 ## 功能
 ```
 - 登录/注销
 - 权限验证
 - 多环境发布
 - 动态侧边栏（支持多级路由）
 - 动态面包屑
 - 国际化多语言
 - 多种动态换肤
 - 快捷导航(标签页)
 - 富文本编辑器
 - Markdown编辑器
 - JSON编辑器
 - Screenfull全屏
 - 列表拖拽
 - Svg Sprite 图标
 - Dashboard
 - 本地mock数据
 - Echarts 图表
 - Clipboard(剪贴复制)
 - 401/404错误页面
 - 错误日志
 - 导出excel
 - 导出zip
 - 前端可视化excel
 - 树形table
 - Table example
 - 动态table example
 - 拖拽table example
 - 内联编辑table example
 - Form example
 - 二步登录
 - SplitPane
 - Dropzone
 - Sticky
 - CountTo
 - Markdown2html
 ```
 ## 开发
 ```bash
 # 克隆项目
 git clone https://github.com/PanJiaChen/vue-element-admin.git
 # 安装依赖
 npm install
 # 建议不要用cnpm安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题
 npm install --registry=https://registry.npm.taobao.org
 # 启动服务
 npm run dev
 ```
 浏览器访问 http://localhost:9527
 ## 发布
 ```bash
 # 构建测试环境
 npm run build:sit
 # 构建生成环境
 npm run build:prod
 ```
 ## 其它
 ```bash
 # --report to build with bundle size analytics
 npm run build:prod --report
 # --preview to start a server in local to preview
 npm run build:prod --preview
 # lint code
 npm run lint
 # auto fix
 npm run lint -- --fix
 ```
 更多信息请参考 [使用文档](https://panjiachen.github.io/vue-element-admin-site/#/zh-cn/deploy)
 ## Changelog
 Detailed changes for each release are documented in the [release notes](https://github.com/PanJiaChen/vue-element-admin/releases).
 ## Online Demo
 [在线 Demo](http://panjiachen.github.io/vue-element-admin)
 ## Donate
 如果你觉得这个项目帮助到了你，你可以帮作者买一杯果汁表示鼓励 :tropical_drink:
 ![donate](https://panjiachen.github.io/donate/donation.png)
 [Paypal Me](https://www.paypal.me/panfree23)
 ## License
 [MIT](https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE)
 Copyright (c) 2017-present PanJiaChen
--- a/build/build.js
+++ b/build/build.js
@@ -1,41 +1,48 @@
-require('./check-versions')();
+'use strict'
-var server = require('pushstate-server');
+require('./check-versions')()
 var opn = require('opn')
 var ora = require('ora')
 var rm = require('rimraf')
 var path = require('path')
 var chalk = require('chalk')
 var webpack = require('webpack');
 var config = require('../config');
 var webpackConfig = require('./webpack.prod.conf');
-console.log(process.env.NODE_ENV)
+const ora = require('ora')
 const rm = require('rimraf')
 const path = require('path')
 const chalk = require('chalk')
 const webpack = require('webpack')
 const config = require('../config')
 const webpackConfig = require('./webpack.prod.conf')
 const server = require('pushstate-server')
-var spinner = ora('building for ' + process.env.NODE_ENV + '...')
+var spinner = ora('building for '+ process.env.env_config+ ' environment...' )
 spinner.start()
 rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
  if (err) throw err
  webpack(webpackConfig, (err, stats) => {
    spinner.stop()
    if (err) throw err
-    webpack(webpackConfig, function (err, stats) {
+    process.stdout.write(stats.toString({
-        spinner.stop()
+      colors: true,
-        if (err) throw err
+      modules: false,
-        process.stdout.write(stats.toString({
+      children: false,
-                colors: true,
+      chunks: false,
-                modules: false,
+      chunkModules: false
-                children: false,
+    }) + '\n\n')
                chunks: false,
                chunkModules: false
            }) + '\n\n')
-        console.log(chalk.cyan('  Build complete.\n'))
+    if (stats.hasErrors()) {
-        if(process.env.npm_config_preview){
+      console.log(chalk.red('  Build failed with errors.\n'))
-            server.start({
+      process.exit(1)
-                port: 9528,
+    }
-                directory: './dist',
+
-                file: '/index.html'
+    console.log(chalk.cyan('  Build complete.\n'))
-            });
+    console.log(chalk.yellow(
-            console.log('> Listening at ' +  'http://localhost:9528' + '\n')
+      '  Tip: built files are meant to be served over an HTTP server.\n' +
-        }
+      '  Opening index.html over file:// won\'t work.\n'
-    })
+    ))
    if(process.env.npm_config_preview){
      server.start({
          port: 9526,
          directory: './dist',
          file: '/index.html'
      });
      console.log('> Listening at ' +  'http://localhost:9526' + '\n')
    }
  })
 })
--- a/build/check-versions.js
+++ b/build/check-versions.js
@@ -1,45 +1,54 @@
-var chalk = require('chalk')
+'use strict'
-var semver = require('semver')
+const chalk = require('chalk')
-var packageConfig = require('../package.json')
+const semver = require('semver')
 const packageConfig = require('../package.json')
 const shell = require('shelljs')
-function exec(cmd) {
+function exec (cmd) {
-    return require('child_process').execSync(cmd).toString().trim()
+  return require('child_process').execSync(cmd).toString().trim()
 }
-var versionRequirements = [
+const versionRequirements = [
-    {
+  {
-        name: 'node',
+    name: 'node',
-        currentVersion: semver.clean(process.version),
+    currentVersion: semver.clean(process.version),
-        versionRequirement: packageConfig.engines.node
+    versionRequirement: packageConfig.engines.node
-    },
+  }
    {
        name: 'npm',
        currentVersion: exec('npm --version'),
        versionRequirement: packageConfig.engines.npm
    }
 ]
 if (shell.which('npm')) {
  versionRequirements.push({
    name: 'npm',
    currentVersion: exec('npm --version'),
    versionRequirement: packageConfig.engines.npm
  })
 }
 module.exports = function () {
-    var warnings = []
+  const warnings = []
-    for (var i = 0; i < versionRequirements.length; i++) {
+
-        var mod = versionRequirements[i]
+  for (let i = 0; i < versionRequirements.length; i++) {
-        if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
+    const mod = versionRequirements[i]
-            warnings.push(mod.name + ': ' +
+
-                chalk.red(mod.currentVersion) + ' should be ' +
+    if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
-                chalk.green(mod.versionRequirement)
+      warnings.push(mod.name + ': ' +
-            )
+        chalk.red(mod.currentVersion) + ' should be ' +
-        }
+        chalk.green(mod.versionRequirement)
      )
    }
  }
  if (warnings.length) {
    console.log('')
    console.log(chalk.yellow('To use this template, you must update following to modules:'))
    console.log()
    for (let i = 0; i < warnings.length; i++) {
      const warning = warnings[i]
      console.log('  ' + warning)
    }
-    if (warnings.length) {
+    console.log()
-        console.log('')
+    process.exit(1)
-        console.log(chalk.yellow('To use this template, you must update following to modules:'))
+  }
        console.log()
        for (var i = 0; i < warnings.length; i++) {
            var warning = warnings[i]
            console.log('  ' + warning)
        }
        console.log()
        process.exit(1)
    }
 }
--- a/build/dev-client.js
+++ b/build/dev-client.js
@@ -1,9 +0,0 @@
 /* eslint-disable */
 require('eventsource-polyfill')
 var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')
 hotClient.subscribe(function (event) {
  if (event.action === 'reload') {
    window.location.reload()
  }
 })
--- a/build/dev-server.js
+++ b/build/dev-server.js
@@ -1,84 +0,0 @@
 require('./check-versions')(); // 检查 Node 和 npm 版本
 var config = require('../config');
 if (!process.env.NODE_ENV) {
    process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
 }
 var opn = require('opn')
 var path = require('path');
 var express = require('express');
 var webpack = require('webpack');
 var proxyMiddleware = require('http-proxy-middleware');
 var webpackConfig = require('./webpack.dev.conf');
 // default port where dev server listens for incoming traffic
 var port = process.env.PORT || config.dev.port;
 // automatically open browser, if not set will be false
 var autoOpenBrowser = !!config.dev.autoOpenBrowser;
 // Define HTTP proxies to your custom API backend
 // https://github.com/chimurai/http-proxy-middleware
 var proxyTable = config.dev.proxyTable;
 var app = express();
 var compiler = webpack(webpackConfig);
 var devMiddleware = require('webpack-dev-middleware')(compiler, {
    publicPath: webpackConfig.output.publicPath,
    quiet: true
 });
 var hotMiddleware = require('webpack-hot-middleware')(compiler, {
    log: () => {
    }
 });
 // force page reload when html-webpack-plugin template changes
 compiler.plugin('compilation', function (compilation) {
    compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
        hotMiddleware.publish({action: 'reload'});
        cb()
    })
 });
 // compiler.apply(new DashboardPlugin());
 // proxy api requests
 Object.keys(proxyTable).forEach(function (context) {
    var options = proxyTable[context]
    if (typeof options === 'string') {
        options = {target: options}
    }
    app.use(proxyMiddleware(options.filter || context, options))
 });
 // handle fallback for HTML5 history API
 app.use(require('connect-history-api-fallback')());
 // serve webpack bundle output
 app.use(devMiddleware);
 // enable hot-reload and state-preserving
 // compilation error display
 app.use(hotMiddleware);
 // serve pure static assets
 var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory);
 app.use(staticPath, express.static('./static'));
 var uri = 'http://localhost:' + port
 devMiddleware.waitUntilValid(function () {
    console.log('> Listening at ' + uri + '\n')
 });
 module.exports = app.listen(port, function (err) {
    if (err) {
        console.log(err);
        return
    }
    // when env is testing, don't need open it
    if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
        opn(uri)
    }
 });
--- a/build/logo.png
+++ b/build/logo.png
--- a/build/utils.js
+++ b/build/utils.js
@@ -1,71 +1,101 @@
-var path = require('path')
+'use strict'
-var config = require('../config')
+const path = require('path')
-var ExtractTextPlugin = require('extract-text-webpack-plugin')
+const config = require('../config')
 const ExtractTextPlugin = require('extract-text-webpack-plugin')
 const packageConfig = require('../package.json')
 exports.assetsPath = function (_path) {
-    var assetsSubDirectory = process.env.NODE_ENV === 'production'
+  const assetsSubDirectory = process.env.NODE_ENV === 'production'
-        ? config.build.assetsSubDirectory
+    ? config.build.assetsSubDirectory
-        : config.dev.assetsSubDirectory
+    : config.dev.assetsSubDirectory
-    return path.posix.join(assetsSubDirectory, _path)
+
  return path.posix.join(assetsSubDirectory, _path)
 }
 exports.cssLoaders = function (options) {
-    options = options || {}
+  options = options || {}
-    var cssLoader = {
+  const cssLoader = {
-        loader: 'css-loader',
+    loader: 'css-loader',
-        options: {
+    options: {
-            minimize: process.env.NODE_ENV === 'production',
+      sourceMap: options.sourceMap
-            sourceMap: options.sourceMap
+    }
-        }
+  }
  const postcssLoader = {
    loader: 'postcss-loader',
    options: {
      sourceMap: options.sourceMap
    }
  }
  // generate loader string to be used with extract text plugin
  function generateLoaders (loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }
-    // generate loader string to be used with extract text plugin
+    // Extract CSS when that option is specified
-    function generateLoaders(loader, loaderOptions) {
+    // (which is the case during production build)
-        var loaders = [cssLoader]
+    if (options.extract) {
-        if (loader) {
+      return ExtractTextPlugin.extract({
-            loaders.push({
+        use: loaders,
-                loader: loader + '-loader',
+        fallback: 'vue-style-loader'
-                options: Object.assign({}, loaderOptions, {
+      })
-                    sourceMap: options.sourceMap
+    } else {
-                })
+      return ['vue-style-loader'].concat(loaders)
            })
        }
        // Extract CSS when that option is specified
        // (which is the case during production build)
        if (options.extract) {
            return ExtractTextPlugin.extract({
                use: loaders,
                fallback: 'vue-style-loader'
            })
        } else {
            return ['vue-style-loader'].concat(loaders)
        }
    }
  }
-    // http://vuejs.github.io/vue-loader/en/configurations/extract-css.html
+  // https://vue-loader.vuejs.org/en/configurations/extract-css.html
-    return {
+  return {
-        css: generateLoaders(),
+    css: generateLoaders(),
-        postcss: generateLoaders(),
+    postcss: generateLoaders(),
-        less: generateLoaders('less'),
+    less: generateLoaders('less'),
-        sass: generateLoaders('sass', {indentedSyntax: true}),
+    sass: generateLoaders('sass', { indentedSyntax: true }),
-        scss: generateLoaders('sass'),
+    scss: generateLoaders('sass'),
-        stylus: generateLoaders('stylus'),
+    stylus: generateLoaders('stylus'),
-        styl: generateLoaders('stylus')
+    styl: generateLoaders('stylus')
-    }
+  }
 }
 // Generate loaders for standalone style files (outside of .vue)
 exports.styleLoaders = function (options) {
-    var output = []
+  const output = []
-    var loaders = exports.cssLoaders(options)
+  const loaders = exports.cssLoaders(options)
-    for (var extension in loaders) {
+
-        var loader = loaders[extension]
+  for (const extension in loaders) {
-        output.push({
+    const loader = loaders[extension]
-            test: new RegExp('\\.' + extension + '$'),
+    output.push({
-            use: loader
+      test: new RegExp('\\.' + extension + '$'),
-        })
+      use: loader
-    }
+    })
-    return output
+  }
  return output
 }
 exports.createNotifierCallback = () => {
  const notifier = require('node-notifier')
  return (severity, errors) => {
    if (severity !== 'error') return
    const error = errors[0]
    const filename = error.file && error.file.split('!').pop()
    notifier.notify({
      title: packageConfig.name,
      message: severity + ': ' + error.name,
      subtitle: filename || '',
      icon: path.join(__dirname, 'logo.png')
    })
  }
 }
--- a/build/vue-loader.conf.js
+++ b/build/vue-loader.conf.js
@@ -1,12 +1,22 @@
-var utils = require('./utils')
+'use strict'
-var config = require('../config')
+const utils = require('./utils')
-var isProduction = process.env.NODE_ENV === 'production'
+const config = require('../config')
 const isProduction = process.env.NODE_ENV === 'production'
 const sourceMapEnabled = isProduction
  ? config.build.productionSourceMap
  : config.dev.cssSourceMap
 module.exports = {
-    loaders: utils.cssLoaders({
+  loaders: utils.cssLoaders({
-        sourceMap: isProduction
+    sourceMap: sourceMapEnabled,
-            ? config.build.productionSourceMap
+    extract: isProduction
-            : config.dev.cssSourceMap,
+  }),
-        extract: isProduction
+  cssSourceMap: sourceMapEnabled,
-    })
+  cacheBusting: config.dev.cacheBusting,
  transformToRequire: {
    video: ['src', 'poster'],
    source: 'src',
    img: 'src',
    image: 'xlink:href'
  }
 }
--- a/build/webpack.base.conf.js
+++ b/build/webpack.base.conf.js
@@ -1,85 +1,101 @@
-var path = require('path');
+'use strict'
-var utils = require('./utils');
+const path = require('path')
-var config = require('../config');
+const utils = require('./utils')
-var vueLoaderConfig = require('./vue-loader.conf');
+const config = require('../config')
 const vueLoaderConfig = require('./vue-loader.conf')
-function resolve(dir) {
+function resolve (dir) {
-    return path.join(__dirname, '..', dir)
+  return path.join(__dirname, '..', dir)
 }
-var src = path.resolve(__dirname, '../src');
+
 const createLintingRule = () => ({
  test: /\.(js|vue)$/,
  loader: 'eslint-loader',
  enforce: 'pre',
  include: [resolve('src'), resolve('test')],
  options: {
    formatter: require('eslint-friendly-formatter'),
    emitWarning: !config.dev.showEslintErrorsInOverlay
  }
 })
 module.exports = {
-    entry: {
+  context: path.resolve(__dirname, '../'),
-        app: './src/main.js'
+  entry: {
-    },
+    app: './src/main.js'
-    output: {
+  },
-        path: config.build.assetsRoot,
+  output: {
-        filename: '[name].js',
+    path: config.build.assetsRoot,
-        publicPath: process.env.NODE_ENV !== 'development' ?  config.build.assetsPublicPath: config.dev.assetsPublicPath
+    filename: '[name].js',
-    },
+    publicPath: process.env.NODE_ENV === 'production'
-    resolve: {
+      ? config.build.assetsPublicPath
-        extensions: ['.js', '.vue', '.json'],
+      : config.dev.assetsPublicPath
-        alias: {
+  },
-            'vue$': 'vue/dist/vue.esm.js',
+  resolve: {
-            '@': resolve('src'),
+    extensions: ['.js', '.vue', '.json'],
-            'src': path.resolve(__dirname, '../src'),
+    alias: {
-            'assets': path.resolve(__dirname, '../src/assets'),
+      'vue$': 'vue/dist/vue.esm.js',
-            'components': path.resolve(__dirname, '../src/components'),
+      '@': resolve('src'),
-            'views': path.resolve(__dirname, '../src/views'),
+    }
-            'styles': path.resolve(__dirname, '../src/styles'),
+  },
-            'api': path.resolve(__dirname, '../src/api'),
+  module: {
-            'utils': path.resolve(__dirname, '../src/utils'),
+    rules: [
-            'store': path.resolve(__dirname, '../src/store'),
+      ...(config.dev.useEslint ? [createLintingRule()] : []),
-            'router': path.resolve(__dirname, '../src/router'),
+      {
-            'mock': path.resolve(__dirname, '../src/mock'),
+        test: /\.vue$/,
-            'vendor': path.resolve(__dirname, '../src/vendor'),
+        loader: 'vue-loader',
-            'static': path.resolve(__dirname, '../static')
+        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader?cacheDirectory',
        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
      },
      {
        test: /\.svg$/,
        loader: 'svg-sprite-loader',
        include: [resolve('src/icons')],
        options: {
          symbolId: 'icon-[name]'
        }
-    },
+      },
-    externals: {
+      {
-        jquery: 'jQuery'
+        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
-    },
+        loader: 'url-loader',
-    module: {
+        exclude: [resolve('src/icons')],
-        rules: [
+        options: {
-            // {
+          limit: 10000,
-            //     test: /\.(js|vue)$/,
+          name: utils.assetsPath('img/[name].[hash:7].[ext]')
-            //     loader: 'eslint-loader',
+        }
-            //     enforce: "pre",
+      },
-            //     include: [resolve('src'), resolve('test')],
+      {
-            //     options: {
+        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
-            //         formatter: require('eslint-friendly-formatter')
+        loader: 'url-loader',
-            //     }
+        options: {
-            // },
+          limit: 10000,
-            { test: /\.vue$/,
+          name: utils.assetsPath('media/[name].[hash:7].[ext]')
-                loader: 'vue-loader',
+        }
-                options: vueLoaderConfig
+      },
-            },
+      {
-            {
+        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
-                test: /\.js$/,
+        loader: 'url-loader',
-                loader: 'babel-loader?cacheDirectory',
+        options: {
-                include: [resolve('src'), resolve('test')]
+          limit: 10000,
-            },
+          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
-            {
+        }
-                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+      }
-                loader: 'url-loader',
+    ]
-                query: {
+  },
-                    limit: 10000,
+  node: {
-                    name: utils.assetsPath('img/[name].[hash:7].[ext]')
+    // prevent webpack from injecting useless setImmediate polyfill because Vue
-                }
+    // source contains it (although only uses it if it's native).
-            },
+    setImmediate: false,
-            {
+    // prevent webpack from injecting mocks to Node native modules
-                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+    // that does not make sense for the client
-                loader: 'url-loader',
+    dgram: 'empty',
-                query: {
+    fs: 'empty',
-                    limit: 10000,
+    net: 'empty',
-                    name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
+    tls: 'empty',
-                }
+    child_process: 'empty'
-            }
+  }
        ]
    },
    //注入全局mixin
    // sassResources: path.join(__dirname, '../src/styles/mixin.scss'),
    // sassLoader: {
    //     data:  path.join(__dirname, '../src/styles/index.scss')
    // },
 }
--- a/build/webpack.dev.conf.js
+++ b/build/webpack.dev.conf.js
@@ -1,47 +1,88 @@
-var utils = require('./utils')
+'use strict'
-var path = require('path')
+const path = require('path')
-var webpack = require('webpack')
+const utils = require('./utils')
-var config = require('../config')
+const webpack = require('webpack')
-var merge = require('webpack-merge')
+const config = require('../config')
-var baseWebpackConfig = require('./webpack.base.conf')
+const merge = require('webpack-merge')
-var HtmlWebpackPlugin = require('html-webpack-plugin')
+const baseWebpackConfig = require('./webpack.base.conf')
-var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
 const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
 const portfinder = require('portfinder')
-// add hot-reload related code to entry chunks
+function resolve (dir) {
-Object.keys(baseWebpackConfig.entry).forEach(function (name) {
+  return path.join(__dirname, '..', dir)
    baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
 })
 function resolveApp(relativePath) {
    return path.resolve(relativePath);
 }
-module.exports = merge(baseWebpackConfig, {
+const HOST = process.env.HOST
-    module: {
+const PORT = process.env.PORT && Number(process.env.PORT)
-        rules: utils.styleLoaders({sourceMap: config.dev.cssSourceMap})
+
-    },
+const devWebpackConfig = merge(baseWebpackConfig, {
-    // cheap-source-map is faster for development
+  module: {
-    devtool: '#cheap-source-map',
+    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
-    cache: true,
+  },
-    plugins: [
+  // cheap-module-eval-source-map is faster for development
-        new webpack.DefinePlugin({
+  devtool: config.dev.devtool,
-            'process.env': config.dev.env
+
-        }),
+  // these devServer options should be customized in /config/index.js
-        new webpack.ProvidePlugin({
+  devServer: {
-            $: 'jquery',
+    clientLogLevel: 'warning',
-            'jQuery': 'jquery'
+    historyApiFallback: true,
-        }),
+    hot: true,
-        // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
+    compress: true,
-        new webpack.HotModuleReplacementPlugin(),
+    host: HOST || config.dev.host,
-        new webpack.NoEmitOnErrorsPlugin(),
+    port: PORT || config.dev.port,
-        // https://github.com/ampedandwired/html-webpack-plugin
+    open: config.dev.autoOpenBrowser,
-        new HtmlWebpackPlugin({
+    overlay: config.dev.errorOverlay
-            filename: 'index.html',
+      ? { warnings: false, errors: true }
-            template: 'index.html',
+      : false,
-            favicon: resolveApp('favicon.ico'),
+    publicPath: config.dev.assetsPublicPath,
-            inject: true,
+    proxy: config.dev.proxyTable,
-            path:config.dev.staticPath
+    quiet: true, // necessary for FriendlyErrorsPlugin
-        }),
+    watchOptions: {
-        new FriendlyErrorsPlugin()
+      poll: config.dev.poll,
-    ]
+    }
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': require('../config/dev.env')
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
    new webpack.NoEmitOnErrorsPlugin(),
    // https://github.com/ampedandwired/html-webpack-plugin
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true,
      favicon: resolve('favicon.ico'),
      title: 'vue-element-admin',
      path: config.dev.assetsPublicPath + config.dev.assetsSubDirectory
    }),
  ]
 })
 module.exports = new Promise((resolve, reject) => {
  portfinder.basePort = process.env.PORT || config.dev.port
  portfinder.getPort((err, port) => {
    if (err) {
      reject(err)
    } else {
      // publish the new Port, necessary for e2e tests
      process.env.PORT = port
      // add port to devServer config
      devWebpackConfig.devServer.port = port
      // Add FriendlyErrorsPlugin
      devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
        compilationSuccessInfo: {
          messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
        },
        onErrors: config.dev.notifyOnErrors
        ? utils.createNotifierCallback()
        : undefined
      }))
      resolve(devWebpackConfig)
    }
  })
 })
--- a/build/webpack.prod.conf.js
+++ b/build/webpack.prod.conf.js
@@ -1,113 +1,175 @@
-var path = require('path')
+'use strict'
-var utils = require('./utils')
+const path = require('path')
-var webpack = require('webpack')
+const utils = require('./utils')
-var config = require('../config')
+const webpack = require('webpack')
-var merge = require('webpack-merge')
+const config = require('../config')
-var baseWebpackConfig = require('./webpack.base.conf')
+const merge = require('webpack-merge')
-var CopyWebpackPlugin = require('copy-webpack-plugin')
+const baseWebpackConfig = require('./webpack.base.conf')
-var HtmlWebpackPlugin = require('html-webpack-plugin')
+const CopyWebpackPlugin = require('copy-webpack-plugin')
-var ExtractTextPlugin = require('extract-text-webpack-plugin')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
-var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
 const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
 const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
-var env = process.env.NODE_ENV === 'production' ? config.build.prodEnv : config.build.sitEnv
+function resolve (dir) {
-
+  return path.join(__dirname, '..', dir)
 function resolveApp(relativePath) {
    return path.resolve(relativePath);
 }
-var webpackConfig = merge(baseWebpackConfig, {
+const env = require('../config/'+process.env.env_config+'.env')
-    module: {
+
-        rules: utils.styleLoaders({
+const webpackConfig = merge(baseWebpackConfig, {
-            sourceMap: config.build.productionSourceMap,
+  module: {
-            extract: true
+    rules: utils.styleLoaders({
-        })
+      sourceMap: config.build.productionSourceMap,
-    },
+      extract: true,
-    devtool: config.build.productionSourceMap ? '#source-map' : false,
+      usePostCSS: true
-    output: {
+    })
-        path: config.build.assetsRoot,
+  },
-        filename: utils.assetsPath('js/[name].[chunkhash].js'),
+  devtool: config.build.productionSourceMap ? config.build.devtool : false,
-        chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
+  output: {
-    },
+    path: config.build.assetsRoot,
-    plugins: [
+    filename: utils.assetsPath('js/[name].[chunkhash].js'),
-        // http://vuejs.github.io/vue-loader/en/workflow/production.html
+    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
-        new webpack.DefinePlugin({
+  },
-            'process.env': env
+  plugins: [
-        }),
+    // http://vuejs.github.io/vue-loader/en/workflow/production.html
-        new webpack.optimize.UglifyJsPlugin({
+    new webpack.DefinePlugin({
-            compress: {
+      'process.env': env
-                warnings: false
+    }),
-            },
+    new UglifyJsPlugin({
-            sourceMap: true
+      uglifyOptions: {
-        }),
+        compress: {
-        // extract css into its own file
+          warnings: false
-        new ExtractTextPlugin({
+        }
-            filename: utils.assetsPath('css/[name].[contenthash].css')
+      },
-        }),
+      sourceMap: config.build.productionSourceMap,
-        // Compress extracted CSS. We are using this plugin so that possible
+      parallel: true
-        // duplicated CSS from different components can be deduped.
+    }),
-        new OptimizeCSSPlugin(),
+    // extract css into its own file
-        // generate dist index.html with correct asset hash for caching.
+    new ExtractTextPlugin({
-        // you can customize output by editing /index.html
+      filename: utils.assetsPath('css/[name].[contenthash].css'),
-        // see https://github.com/ampedandwired/html-webpack-plugin
+      // Setting the following option to `false` will not extract CSS from codesplit chunks.
-        new HtmlWebpackPlugin({
+      // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
-            filename: process.env.NODE_ENV === 'testing'
+      // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
-                ? 'index.html'
+      allChunks: false,
-                : config.build.index,
+    }),
-            template: 'index.html',
+    // Compress extracted CSS. We are using this plugin so that possible
-            inject: true,
+    // duplicated CSS from different components can be deduped.
-            favicon: resolveApp('favicon.ico'),
+    new OptimizeCSSPlugin({
-            minify: {
+      cssProcessorOptions: config.build.productionSourceMap
-                removeComments: true,
+        ? { safe: true, map: { inline: false } }
-                collapseWhitespace: true,
+        : { safe: true }
-                removeRedundantAttributes: true,
+    }),
-                useShortDoctype: true,
+    // generate dist index.html with correct asset hash for caching.
-                removeEmptyAttributes: true,
+    // you can customize output by editing /index.html
-                removeStyleLinkTypeAttributes: true,
+    // see https://github.com/ampedandwired/html-webpack-plugin
-                keepClosingSlash: true,
+    new HtmlWebpackPlugin({
-                minifyJS: true,
+      filename: config.build.index,
-                minifyCSS: true,
+      template: 'index.html',
-                minifyURLs: true
+      inject: true,
-            },
+      favicon: resolve('favicon.ico'),
-             path:config.build.staticPath,
+      title: 'vue-element-admin',
-            // necessary to consistently work with multiple chunks via CommonsChunkPlugin
+      path: config.build.assetsPublicPath + config.build.assetsSubDirectory,
-            chunksSortMode: 'dependency'
+      minify: {
-        }),
+        removeComments: true,
-        // split vendor js into its own file
+        collapseWhitespace: true,
-        new webpack.optimize.CommonsChunkPlugin({
+        removeAttributeQuotes: true
-            name: 'vendor',
+        // more options:
-            minChunks: function (module, count) {
+        // https://github.com/kangax/html-minifier#options-quick-reference
-                // any required modules inside node_modules are extracted to vendor
+      },
-                return (
+      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
-                    module.resource &&
+      chunksSortMode: 'dependency'
-                    /\.js$/.test(module.resource) &&
+    }),
-                    module.resource.indexOf(
+    // keep module.id stable when vender modules does not change
-                        path.join(__dirname, '../node_modules')
+    new webpack.HashedModuleIdsPlugin(),
-                    ) === 0
+    // enable scope hoisting
-                )
+    new webpack.optimize.ModuleConcatenationPlugin(),
-            }
+    // split vendor js into its own file
-        }),
+    new webpack.optimize.CommonsChunkPlugin({
-        // extract webpack runtime and module manifest to its own file in order to
+      name: 'vendor',
-        // prevent vendor hash from being updated whenever app bundle is updated
+      minChunks (module) {
-        new webpack.optimize.CommonsChunkPlugin({
+        // any required modules inside node_modules are extracted to vendor
-            name: 'manifest',
+        return (
-            chunks: ['vendor']
+          module.resource &&
-        }),
+          /\.js$/.test(module.resource) &&
-        // copy custom static assets
+          module.resource.indexOf(
-        new CopyWebpackPlugin([
+            path.join(__dirname, '../node_modules')
-            {
+          ) === 0
-                from: path.resolve(__dirname, '../static'),
+        )
-                to: config.build.assetsSubDirectory,
+      }
-                ignore: ['.*']
+    }),
-            }
+    // extract webpack runtime and module manifest to its own file in order to
-        ]),
+    // prevent vendor hash from being updated whenever app bundle is updated
-        new webpack.ProvidePlugin({
+    new webpack.optimize.CommonsChunkPlugin({
-            $: 'jquery',
+      name: 'manifest',
-            'jQuery': 'jquery'
+      minChunks: Infinity
-        })
+    }),
-    ]
+    // This instance extracts shared chunks from code splitted chunks and bundles them
    // in a separate chunk, similar to the vendor chunk
    // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
    new webpack.optimize.CommonsChunkPlugin({
      name: 'app',
      async: 'vendor-async',
      children: true,
      minChunks: 3
    }),
    // split echarts into its own file
    new webpack.optimize.CommonsChunkPlugin({
      async: 'echarts',
      minChunks(module) {
        var context = module.context;
        return context && (context.indexOf('echarts') >= 0 || context.indexOf('zrender') >= 0);
      }
    }),
    // split xlsx into its own file
    new webpack.optimize.CommonsChunkPlugin({
      async: 'xlsx',
      minChunks(module) {
        var context = module.context;
        return context && (context.indexOf('xlsx') >= 0);
      }
    }),
     // split codemirror into its own file
     new webpack.optimize.CommonsChunkPlugin({
      async: 'codemirror',
      minChunks(module) {
        var context = module.context;
        return context && (context.indexOf('codemirror') >= 0);
      }
    }),
    // copy custom static assets
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static'),
        to: config.build.assetsSubDirectory,
        ignore: ['.*']
      }
    ])
  ]
 })
-if (config.build.bundleAnalyzerReport) {
+
-    var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+if (config.build.productionGzip) {
-    webpackConfig.plugins.push(new BundleAnalyzerPlugin())
+  const CompressionWebpackPlugin = require('compression-webpack-plugin')
  webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      asset: '[path].gz[query]',
      algorithm: 'gzip',
      test: new RegExp(
        '\\.(' +
        config.build.productionGzipExtensions.join('|') +
        ')$'
      ),
      threshold: 10240,
      minRatio: 0.8
    })
  )
 }
 if (config.build.bundleAnalyzerReport) {
  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
 }
 module.exports = webpackConfig
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -1,5 +1,5 @@
 module.exports = {
-    NODE_ENV: '"development"',
+  NODE_ENV: '"development"',
-    BASE_API: '"https://api-dev"',
+  ENV_CONFIG: '"dev"',
-    APP_ORIGIN: '"https://wallstreetcn.com"'
+  BASE_API: '"https://api-dev"'
 }
--- a/config/index.js
+++ b/config/index.js
@@ -1,41 +1,83 @@
 'use strict'
 // Template version: 1.2.6
 // see http://vuejs-templates.github.io/webpack for documentation.
-var path = require('path')
+
 const path = require('path')
 module.exports = {
-    build: {
+  dev: {
-        sitEnv: require('./sit.env'),
+
-        prodEnv: require('./prod.env'),
+    // Paths
-        index: path.resolve(__dirname, '../dist/index.html'),
+    assetsSubDirectory: 'static',
-        assetsRoot: path.resolve(__dirname, '../dist'),
+    assetsPublicPath: '/',
-        assetsSubDirectory: '',
+    proxyTable: {},
-        assetsPublicPath: './', //生产环境assetsPublicPath: '/'
+
-        staticPath:'./', //生产环境 staticPath:''
+    // Various Dev Server settings
-        productionSourceMap: true,
+    host: 'localhost', // can be overwritten by process.env.HOST
-        // Gzip off by default as many popular static hosts such as
+    port: 9527, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
-        // Surge or Netlify already gzip all static assets for you.
+    autoOpenBrowser: true,
-        // Before setting to `true`, make sure to:
+    errorOverlay: true,
-        // npm install --save-dev compression-webpack-plugin
+    notifyOnErrors: false,
-        productionGzip: false,
+    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
-        productionGzipExtensions: ['js', 'css'],
+
-        // Run the build command with an extra argument to
+    // Use Eslint Loader?
-        // View the bundle analyzer report after build finishes:
+    // If true, your code will be linted during bundling and
-        // `npm run build --report`
+    // linting errors and warnings will be shown in the console.
-        // Set to `true` or `false` to always turn it on or off
+    useEslint: true,
-        bundleAnalyzerReport: process.env.npm_config_report
+    // If true, eslint errors and warnings will also be shown in the error overlay
-    },
+    // in the browser.
-    dev: {
+    showEslintErrorsInOverlay: false,
-        env: require('./dev.env'),
+
-        port: 9527,
+    /**
-        autoOpenBrowser: true,
+     * Source Maps
-        assetsSubDirectory: 'static',
+     */
-        assetsPublicPath: '/',
+
-        staticPath:'/static/',
+    // https://webpack.js.org/configuration/devtool/#development
-        proxyTable: {},
+    devtool: '#cheap-source-map',
-        // CSS Sourcemaps off by default because relative paths are "buggy"
+
-        // with this option, according to the CSS-Loader README
+    // If you have problems debugging vue-files in devtools,
-        // (https://github.com/webpack/css-loader#sourcemaps)
+    // set this to false - it *may* help
-        // In our experience, they generally work as expected,
+    // https://vue-loader.vuejs.org/en/options.html#cachebusting
-        // just be aware of this issue when enabling this option.
+    cacheBusting: true,
-        cssSourceMap: false
+
-    }
+    // CSS Sourcemaps off by default because relative paths are "buggy"
    // with this option, according to the CSS-Loader README
    // (https://github.com/webpack/css-loader#sourcemaps)
    // In our experience, they generally work as expected,
    // just be aware of this issue when enabling this option.
    cssSourceMap: false,
  },
  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),
    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    // you can set by youself according to actual condition
    assetsPublicPath: './',
    /**
     * Source Maps
     */
    productionSourceMap: false,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',
    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],
    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  }
 }
--- a/config/prod.env.js
+++ b/config/prod.env.js
@@ -1,5 +1,5 @@
 module.exports = {
-    NODE_ENV: '"production"',
+  NODE_ENV: '"production"',
-    BASE_API: '"https://api-prod"',
+  ENV_CONFIG: '"prod"',
-    APP_ORIGIN: '"https://wallstreetcn.com"'
+  BASE_API: '"https://api-prod"'
-};
+}
--- a/config/sit.env.js
+++ b/config/sit.env.js
@@ -1,5 +1,5 @@
 module.exports = {
-    NODE_ENV: '"production"',
+  NODE_ENV: '"production"',
-    BASE_API: '"https://api-sit"',
+  ENV_CONFIG: '"sit"',
-    APP_ORIGIN: '"https://wallstreetcn.com"'
+  BASE_API: '"https://api-sit"'
-};
+}
--- a/documentImg/code1.png
+++ b/documentImg/code1.png
--- a/documentImg/iconfont.png
+++ b/documentImg/iconfont.png
--- a/favicon.ico
+++ b/favicon.ico
--- a/gifs/2login.gif
+++ b/gifs/2login.gif
--- a/gifs/dynamictable.gif
+++ b/gifs/dynamictable.gif
--- a/gifs/echarts.gif
+++ b/gifs/echarts.gif
--- a/gifs/editor.gif
+++ b/gifs/editor.gif
--- a/gifs/errorlog.gif
+++ b/gifs/errorlog.gif
--- a/gifs/excel.png
+++ b/gifs/excel.png
--- a/gifs/leftmenu.gif
+++ b/gifs/leftmenu.gif
--- a/gifs/login.png
+++ b/gifs/login.png
--- a/gifs/order.gif
+++ b/gifs/order.gif
--- a/gifs/table.gif
+++ b/gifs/table.gif
--- a/gifs/theme.gif
+++ b/gifs/theme.gif
--- a/gifs/upload1.gif
+++ b/gifs/upload1.gif
--- a/gifs/uploadAvatar.gif
+++ b/gifs/uploadAvatar.gif
--- a/index.html
+++ b/index.html
@@ -1,17 +1,15 @@
 <!DOCTYPE html>
 <html>
-<head>
+  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-    <title>Juicy</title>
+    <title>vue-element-admin</title>
-</head>
+  </head>
-<body>
+  <body>
-<script src=<%= htmlWebpackPlugin.options.path %>jquery.min.js></script>
+    <script src=<%= htmlWebpackPlugin.options.path %>/tinymce4.7.5/tinymce.min.js></script>
-<script src=<%= htmlWebpackPlugin.options.path %>tinymce/tinymce.min.js></script>
+    <div id="app"></div>
-<div id="app"></div>
+    <!-- built files will be auto injected -->
-<!-- built files will be auto injected -->
+  </body>
 </body>
 </html>
--- a/package.json
+++ b/package.json
@@ -1,95 +1,99 @@
 {
-  "name": "juicy",
+  "name": "vue-element-admin",
-  "version": "1.0.2",
+  "version": "3.6.4",
-  "description": "A Vue.js admin",
+  "description": "A magical vue admin. Typical templates for enterprise applications. Newest development stack of vue. Lots of awesome features",
  "author": "Pan <panfree23@gmail.com>",
  "license": "MIT",
  "private": true,
  "scripts": {
-    "dev": "node build/dev-server.js",
+    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
-    "build:prod": "cross-env NODE_ENV=production node build/build.js",
+    "build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js",
-    "build:sit": "cross-env NODE_ENV=sit node build/build.js",
+    "build:sit": "cross-env NODE_ENV=production env_config=sit node build/build.js",
-    "build:sit-preview": "cross-env NODE_ENV=sit npm_config_preview=true  npm_config_report=true node build/build.js",
+    "lint": "eslint --ext .js,.vue src",
-    "lint": "eslint --ext .js,.vue src"
+    "test": "npm run lint"
  },
  "dependencies": {
-    "axios": "0.16.2",
+    "axios": "0.17.1",
-    "codemirror": "5.26.0",
+    "clipboard": "1.7.1",
-    "dropzone": "5.1.0",
+    "codemirror": "5.32.0",
-    "echarts": "3.6.1",
+    "dropzone": "5.2.0",
-    "element-ui": "1.3.6",
+    "echarts": "3.8.5",
    "element-ui": "2.0.8",
    "file-saver": "1.3.3",
-    "jquery": "3.1.1",
+    "font-awesome": "4.7.0",
-    "js-cookie": "2.1.4",
+    "js-cookie": "2.2.0",
    "jsonlint": "1.6.2",
    "jszip": "3.1.5",
    "mockjs": "1.0.1-beta3",
-    "normalize.css": "3.0.2",
+    "normalize.css": "7.0.0",
    "nprogress": "0.2.0",
-    "screenfull": "3.2.2",
+    "screenfull": "3.3.2",
-    "showdown": "1.7.1",
+    "showdown": "1.8.5",
    "simplemde": "1.11.2",
-    "sortablejs": "1.5.1",
+    "sortablejs": "1.7.0",
-    "vue": "2.3.3",
+    "vue": "2.5.10",
-    "vue-count-to": "1.0.5",
+    "vue-count-to": "1.0.13",
-    "vue-multiselect": "2.0.0-beta.15",
+    "vue-i18n": "7.3.2",
-    "vue-router": "2.5.3",
+    "vue-multiselect": "2.0.8",
-    "vuedraggable": "2.13.1",
+    "vue-router": "3.0.1",
-    "vuex": "2.3.1",
+    "vue-splitpane": "1.0.2",
-    "xlsx": "0.8.1"
+    "vuedraggable": "2.15.0",
    "vuex": "3.0.1",
    "xlsx": "^0.11.16"
  },
  "devDependencies": {
-    "autoprefixer": "7.1.1",
+    "autoprefixer": "7.2.3",
-    "babel-core": "6.25.0",
+    "babel-core": "6.26.0",
-    "babel-eslint": "7.2.3",
+    "babel-eslint": "8.0.3",
-    "babel-loader": "7.0.0",
+    "babel-helper-vue-jsx-merge-props": "2.0.3",
    "babel-loader": "7.1.2",
    "babel-plugin-syntax-jsx": "6.18.0",
    "babel-plugin-transform-runtime": "6.23.0",
-    "babel-preset-es2015": "6.24.1",
+    "babel-plugin-transform-vue-jsx": "3.5.0",
    "babel-preset-env": "1.6.1",
    "babel-preset-stage-2": "6.24.1",
-    "babel-register": "6.24.1",
+    "chalk": "2.3.0",
-    "chalk": "1.1.3",
+    "copy-webpack-plugin": "4.3.0",
-    "connect-history-api-fallback": "1.3.0",
+    "cross-env": "5.1.1",
-    "copy-webpack-plugin": "4.0.1",
+    "css-loader": "0.28.7",
-    "cross-env": "5.0.1",
+    "eslint": "4.13.1",
    "css-loader": "0.28.4",
    "eslint": "3.19.0",
    "eslint-friendly-formatter": "3.0.0",
-    "eslint-import-resolver-webpack": "0.8.1",
+    "eslint-loader": "1.9.0",
-    "eslint-loader": "1.7.1",
+    "eslint-plugin-html": "4.0.1",
-    "eslint-plugin-html": "3.0.0",
+    "extract-text-webpack-plugin": "3.0.2",
-    "eslint-plugin-import": "2.3.0",
+    "file-loader": "1.1.5",
    "eventsource-polyfill": "0.9.6",
    "express": "4.15.3",
    "extract-text-webpack-plugin": "2.1.2",
    "file-loader": "0.11.2",
    "friendly-errors-webpack-plugin": "1.6.1",
-    "function-bind": "1.1.0",
+    "html-webpack-plugin": "2.30.1",
-    "html-webpack-plugin": "2.28.0",
+    "node-notifier": "5.1.2",
-    "http-proxy-middleware": "0.17.4",
+    "node-sass": "^4.7.2",
-    "node-sass": "^4.5.0",
+    "optimize-css-assets-webpack-plugin": "3.2.0",
-    "opn": "4.0.2",
+    "ora": "1.3.0",
-    "optimize-css-assets-webpack-plugin": "1.3.0",
+    "portfinder": "1.0.13",
-    "ora": "1.1.0",
+    "postcss-import": "11.0.0",
-    "pushstate-server": "2.1.0",
+    "postcss-loader": "2.0.9",
-    "rimraf": "2.6.0",
+    "postcss-url": "7.3.0",
-    "sass-loader": "6.0.5",
+    "pushstate-server": "3.0.1",
-    "script-loader": "0.7.0",
+    "rimraf": "2.6.2",
-    "semver": "5.3.0",
+    "sass-loader": "6.0.6",
-    "style-loader": "0.17.0",
+    "script-loader": "0.7.2",
-    "url-loader": "0.5.8",
+    "semver": "5.4.1",
-    "vue-loader": "12.2.1",
+    "shelljs": "0.7.8",
-    "vue-style-loader": "3.0.1",
+    "svg-sprite-loader": "3.5.2",
-    "vue-template-compiler": "2.3.3",
+    "uglifyjs-webpack-plugin": "1.1.3",
-    "webpack": "2.6.1",
+    "url-loader": "0.6.2",
-    "webpack-bundle-analyzer": "2.8.2",
+    "vue-loader": "13.5.0",
-    "webpack-dev-middleware": "1.10.2",
+    "vue-style-loader": "3.0.3",
-    "webpack-hot-middleware": "2.18.0",
+    "vue-template-compiler": "2.5.10",
-    "webpack-merge": "4.1.0"
+    "webpack": "3.10.0",
    "webpack-bundle-analyzer": "2.9.1",
    "webpack-dev-server": "2.9.7",
    "webpack-merge": "4.1.1"
  },
  "engines": {
    "node": ">= 4.0.0",
    "npm": ">= 3.0.0"
  },
-  "browserlist": [
+  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,11 +1,11 @@
 <template>
-    <div id="app">
+  <div id="app">
-        <router-view></router-view>
+    <router-view></router-view>
-    </div>
+  </div>
 </template>
 <script>
-    export default{
+  export default{
-      name: 'APP'
+    name: 'App'
-    }
+  }
 </script>
--- a/src/api/article.js
+++ b/src/api/article.js
@@ -1,16 +1,40 @@
-import fetch from 'utils/fetch';
+import request from '@/utils/request'
-export function getList() {
+export function fetchList(query) {
-  return fetch({
+  return request({
    url: '/article/list',
-    method: 'get'
+    method: 'get',
-  });
+    params: query
  })
 }
-export function getArticle() {
+export function fetchArticle() {
-  return fetch({
+  return request({
    url: '/article/detail',
    method: 'get'
-  });
+  })
 }
 export function fetchPv(pv) {
  return request({
    url: '/article/pv',
    method: 'get',
    params: { pv }
  })
 }
 export function createArticle(data) {
  return request({
    url: '/article/create',
    method: 'post',
    data
  })
 }
 export function updateArticle(data) {
  return request({
    url: '/article/update',
    method: 'post',
    data
  })
 }
--- a/src/api/article_table.js
+++ b/src/api/article_table.js
@@ -1,17 +0,0 @@
 import fetch from 'utils/fetch';
 export function fetchList(query) {
  return fetch({
    url: '/article_table/list',
    method: 'get',
    params: query
  });
 }
 export function fetchPv(pv) {
  return fetch({
    url: '/article_table/pv',
    method: 'get',
    params: { pv }
  });
 }
--- a/src/api/login.js
+++ b/src/api/login.js
@@ -1,29 +1,29 @@
-import fetch from 'utils/fetch';
+import request from '@/utils/request'
-export function loginByEmail(email, password) {
+export function loginByUsername(username, password) {
  const data = {
-    email,
+    username,
    password
-  };
+  }
-  return fetch({
+  return request({
-    url: '/login/loginbyemail',
+    url: '/login/login',
    method: 'post',
    data
-  });
+  })
 }
 export function logout() {
-  return fetch({
+  return request({
    url: '/login/logout',
    method: 'post'
-  });
+  })
 }
-export function getInfo(token) {
+export function getUserInfo(token) {
-  return fetch({
+  return request({
    url: '/user/info',
    method: 'get',
    params: { token }
-  });
+  })
 }
--- a/src/api/qiniu.js
+++ b/src/api/qiniu.js
@@ -1,8 +1,8 @@
-import fetch from 'utils/fetch';
+import request from '@/utils/request'
 export function getToken() {
-  return fetch({
+  return request({
    url: '/qiniu/upload/token', // 假地址 自行替换
    method: 'get'
-  });
+  })
 }
--- a/src/api/remoteSearch.js
+++ b/src/api/remoteSearch.js
@@ -1,9 +1,9 @@
-import fetch from 'utils/fetch';
+import request from '@/utils/request'
 export function userSearch(name) {
-  return fetch({
+  return request({
    url: '/search/user',
    method: 'get',
    params: { name }
-  });
+  })
 }
--- a/src/api/transaction.js
+++ b/src/api/transaction.js
@@ -0,0 +1,9 @@
 import request from '@/utils/request'
 export function fetchList(query) {
  return request({
    url: '/transaction/list',
    method: 'get',
    params: query
  })
 }
--- a/src/assets/401_images/401.gif
+++ b/src/assets/401_images/401.gif
--- a/src/assets/404_images/404.png
+++ b/src/assets/404_images/404.png
--- a/src/assets/404_images/404_cloud.png
+++ b/src/assets/404_images/404_cloud.png
--- a/src/assets/custom-theme/fonts/element-icons.ttf
+++ b/src/assets/custom-theme/fonts/element-icons.ttf
--- a/src/assets/custom-theme/fonts/element-icons.woff
+++ b/src/assets/custom-theme/fonts/element-icons.woff
--- a/src/assets/custom-theme/index.css
+++ b/src/assets/custom-theme/index.css
--- a/src/assets/echarts-macarons.js
+++ b/src/assets/echarts-macarons.js
@@ -0,0 +1,199 @@
 /* eslint-disable */
 (function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(['exports', 'echarts'], factory);
    } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
        // CommonJS
        factory(exports, require('echarts'));
    } else {
        // Browser globals
        factory({}, root.echarts);
    }
 }(this, function (exports, echarts) {
    var log = function (msg) {
        if (typeof console !== 'undefined') {
            console && console.error && console.error(msg);
        }
    };
    if (!echarts) {
        log('ECharts is not Loaded');
        return;
    }
    var colorPalette = [
        '#2ec7c9','#b6a2de','#5ab1ef','#ffb980','#d87a80',
        '#8d98b3','#e5cf0d','#97b552','#95706d','#dc69aa',
        '#07a2a4','#9a7fd1','#588dd5','#f5994e','#c05050',
        '#59678c','#c9ab00','#7eb00a','#6f5553','#c14089'
    ];
    var theme = {
        color: colorPalette,
        title: {
            textStyle: {
                fontWeight: 'normal',
                color: '#008acd'
            }
        },
        visualMap: {
            itemWidth: 15,
            color: ['#5ab1ef','#e0ffff']
        },
        toolbox: {
            iconStyle: {
                normal: {
                    borderColor: colorPalette[0]
                }
            }
        },
        tooltip: {
            backgroundColor: 'rgba(50,50,50,0.5)',
            axisPointer : {
                type : 'line',
                lineStyle : {
                    color: '#008acd'
                },
                crossStyle: {
                    color: '#008acd'
                },
                shadowStyle : {
                    color: 'rgba(200,200,200,0.2)'
                }
            }
        },
        dataZoom: {
            dataBackgroundColor: '#efefff',
            fillerColor: 'rgba(182,162,222,0.2)',
            handleColor: '#008acd'
        },
        grid: {
            borderColor: '#eee'
        },
        categoryAxis: {
            axisLine: {
                lineStyle: {
                    color: '#008acd'
                }
            },
            splitLine: {
                lineStyle: {
                    color: ['#eee']
                }
            }
        },
        valueAxis: {
            axisLine: {
                lineStyle: {
                    color: '#008acd'
                }
            },
            splitArea : {
                show : true,
                areaStyle : {
                    color: ['rgba(250,250,250,0.1)','rgba(200,200,200,0.1)']
                }
            },
            splitLine: {
                lineStyle: {
                    color: ['#eee']
                }
            }
        },
        timeline : {
            lineStyle : {
                color : '#008acd'
            },
            controlStyle : {
                normal : { color : '#008acd'},
                emphasis : { color : '#008acd'}
            },
            symbol : 'emptyCircle',
            symbolSize : 3
        },
        line: {
            smooth : true,
            symbol: 'emptyCircle',
            symbolSize: 3
        },
        candlestick: {
            itemStyle: {
                normal: {
                    color: '#d87a80',
                    color0: '#2ec7c9',
                    lineStyle: {
                        color: '#d87a80',
                        color0: '#2ec7c9'
                    }
                }
            }
        },
        scatter: {
            symbol: 'circle',
            symbolSize: 4
        },
        map: {
            label: {
                normal: {
                    textStyle: {
                        color: '#d87a80'
                    }
                }
            },
            itemStyle: {
                normal: {
                    borderColor: '#eee',
                    areaColor: '#ddd'
                },
                emphasis: {
                    areaColor: '#fe994e'
                }
            }
        },
        graph: {
            color: colorPalette
        },
        gauge : {
            axisLine: {
                lineStyle: {
                    color: [[0.2, '#2ec7c9'],[0.8, '#5ab1ef'],[1, '#d87a80']],
                    width: 10
                }
            },
            axisTick: {
                splitNumber: 10,
                length :15,
                lineStyle: {
                    color: 'auto'
                }
            },
            splitLine: {
                length :22,
                lineStyle: {
                    color: 'auto'
                }
            },
            pointer : {
                width : 5
            }
        }
    };
    echarts.registerTheme('macarons', theme);
 }));
--- a/src/assets/iconfont/iconfont.js
+++ b/src/assets/iconfont/iconfont.js
--- a/src/components/BackToTop/index.vue
+++ b/src/components/BackToTop/index.vue
@@ -0,0 +1,110 @@
 <template>
  <transition :name="transitionName">
    <div class="back-to-ceiling" @click="backToTop" v-show="visible" :style="customStyle">
      <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;">
        <title>回到顶部</title>
        <g>
          <path d="M12.036 15.59c0 .55-.453.995-.997.995H5.032c-.55 0-.997-.445-.997-.996V8.584H1.03c-1.1 0-1.36-.633-.578-1.416L7.33.29c.39-.39 1.026-.385 1.412 0l6.878 6.88c.782.78.523 1.415-.58 1.415h-3.004v7.004z" fill-rule="evenodd"></path>
        </g>
      </svg>
    </div>
  </transition>
 </template>
 <script>
 export default {
  name: 'BackToTop',
  props: {
    visibilityHeight: {
      type: Number,
      default: 400
    },
    backPosition: {
      type: Number,
      default: 0
    },
    customStyle: {
      type: Object,
      default: {
        right: '50px',
        bottom: '50px',
        width: '40px',
        height: '40px',
        'border-radius': '4px',
        'line-height': '45px',
        background: '#e7eaf1'
      }
    },
    transitionName: {
      type: String,
      default: 'fade'
    }
  },
  data() {
    return {
      visible: false,
      interval: null
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll)
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll)
    if (this.interval) {
      clearInterval(this.interval)
    }
  },
  methods: {
    handleScroll() {
      this.visible = window.pageYOffset > this.visibilityHeight
    },
    backToTop() {
      const start = window.pageYOffset
      let i = 0
      this.interval = setInterval(() => {
        const next = Math.floor(this.easeInOutQuad(10 * i, start, -start, 500))
        if (next <= this.backPosition) {
          window.scrollTo(0, this.backPosition)
          clearInterval(this.interval)
        } else {
          window.scrollTo(0, next)
        }
        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
    }
  }
 }
 </script>
 <style scoped>
  .back-to-ceiling {
    position: fixed;
    display: inline-block;
    text-align: center;
    cursor: pointer;
  }
  .back-to-ceiling:hover {
    background: #d5dbe7;
  }
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity .5s;
  }
  .fade-enter,
  .fade-leave-to {
    opacity: 0
  }
  .back-to-ceiling .Icon {
    fill: #9aaabf;
    background: none;
  }
 </style>
--- a/src/components/Breadcrumb/index.vue
+++ b/src/components/Breadcrumb/index.vue
@@ -0,0 +1,54 @@
 <template>
  <el-breadcrumb class="app-breadcrumb" separator="/">
    <transition-group name="breadcrumb">
      <el-breadcrumb-item v-for="(item,index)  in levelList" :key="item.path" v-if='item.meta.title'>
        <span v-if='item.redirect==="noredirect"||index==levelList.length-1' class="no-redirect">{{generateTitle(item.meta.title)}}</span>
        <router-link v-else :to="item.redirect||item.path">{{generateTitle(item.meta.title)}}</router-link>
      </el-breadcrumb-item>
    </transition-group>
  </el-breadcrumb>
 </template>
 <script>
 import { generateTitle } from '@/utils/i18n'
 export default {
  created() {
    this.getBreadcrumb()
  },
  data() {
    return {
      levelList: null
    }
  },
  watch: {
    $route() {
      this.getBreadcrumb()
    }
  },
  methods: {
    generateTitle,
    getBreadcrumb() {
      let matched = this.$route.matched.filter(item => item.name)
      const first = matched[0]
      if (first && first.name !== 'dashboard') {
        matched = [{ path: '/dashboard', meta: { title: 'dashboard' }}].concat(matched)
      }
      this.levelList = matched
    }
  }
 }
 </script>
 <style rel="stylesheet/scss" lang="scss" scoped>
  .app-breadcrumb.el-breadcrumb {
    display: inline-block;
    font-size: 14px;
    line-height: 50px;
    margin-left: 10px;
    .no-redirect {
      color: #97a8be;
      cursor: text;
    }
  }
 </style>
--- a/src/components/Charts/barPercent.vue
+++ b/src/components/Charts/barPercent.vue
@@ -1,104 +0,0 @@
 <template>
    <div :class="className" :id="id" :style="{height:height,width:width}"></div>
 </template>
 <script>
    // 引入 ECharts 主模块
    const echarts = require('echarts/lib/echarts');
    // 引入柱状图
    require('echarts/lib/chart/bar');
    // 引入提示框和标题组件
    require('echarts/lib/component/tooltip');
    export default {
      name: 'barPercent',
      props: {
        className: {
          type: String,
          default: 'bar-percent-chart'
        },
        id: {
          type: String,
          default: 'bar-percent-chart'
        },
        width: {
          type: String,
          default: '100px'
        },
        height: {
          type: String,
          default: '80px'
        },
        dataNum: {
          type: Number,
          default: 0
        }
      },
      data() {
        return {
          chart: null
        };
      },
      watch: {
        dataNum() {
          this.setOptions()
        }
      },
      mounted() {
        this.initBar();
      },
      methods: {
        initBar() {
          this.chart = echarts.init(document.getElementById(this.id));
          this.setOptions();
        },
        setOptions() {
          this.chart.setOption({
            tooltip: {
              show: true,
              formatter(params) {
                return '已完成' + params.value + '篇<br/>目标90篇<br/>完成进度' + Math.round((params.value / 90) * 100) + '%'
              }
            },
            grid: {
              left: 0,
              right: 0,
              bottom: 0,
              top: 0,
              containLabel: false
            },
            xAxis: [{
              type: 'category',
              data: ['文章完成比例']
            }],
            yAxis: [{
              type: 'value',
              data: [],
              show: false
            }],
            animationDelay: 1000,
            series: [{
              type: 'bar',
              name: '初诊',
              itemStyle: {
                normal: {
                  color: '#e5e5e5'
                }
              },
              silent: true,
              barGap: '-100%', // Make series be overlap
              data: [150]
            }, {
              type: 'bar',
              name: 'app',
              itemStyle: {
                normal: {
                  color: '#30b08f'
                }
              },
              z: 10,
              data: [this.dataNum]
            }]
          })
        }
      }
    }
 </script>
--- a/src/components/Charts/keyboard.vue
+++ b/src/components/Charts/keyboard.vue
@@ -1,112 +1,152 @@
 <template>
-    <div :class="className" :id="id" :style="{height:height,width:width}"></div>
+  <div :class="className" :id="id" :style="{height:height,width:width}"></div>
 </template>
 <script>
-    // 引入 ECharts 主模块
+import echarts from 'echarts'
-    const echarts = require('echarts/lib/echarts');
+import resize from './mixins/resize'
    // 引入柱状图
    require('echarts/lib/chart/bar');
    require('echarts/lib/chart/line');
    // 引入提示框和标题组件
    require('echarts/lib/component/tooltip');
    require('echarts/lib/component/title');
-    require('echarts/lib/component/visualMap');
+export default {
-    export default {
+  mixins: [resize],
-      name: 'barPercent',
+  props: {
-      props: {
+    className: {
-        className: {
+      type: String,
-          type: String,
+      default: 'chart'
-          default: 'chart'
+    },
-        },
+    id: {
-        id: {
+      type: String,
-          type: String,
+      default: 'chart'
-          default: 'chart'
+    },
-        },
+    width: {
-        width: {
+      type: String,
-          type: String,
+      default: '200px'
-          default: '200px'
+    },
-        },
+    height: {
-        height: {
+      type: String,
-          type: String,
+      default: '200px'
          default: '200px'
        }
      },
      data() {
        return {};
      },
      mounted() {
        this.initBar();
      },
      methods: {
        initBar() {
          this.chart = echarts.init(document.getElementById(this.id));
          const xAxisData = [];
          const data = [];
          for (let i = 0; i < 30; i++) {
            xAxisData.push(i + '号');
            data.push(Math.round(Math.random() * 2 + 3))
          }
          this.chart.setOption(
            {
              backgroundColor: '#08263a',
              tooltip: {
                trigger: 'axis'
              },
              xAxis: {
                show: false,
                data: xAxisData
              },
              visualMap: {
                show: false,
                min: 0,
                max: 50,
                dimension: 0,
                inRange: {
                  color: ['#4a657a', '#308e92', '#b1cfa5', '#f5d69f', '#f5898b', '#ef5055']
                }
              },
              yAxis: {
                axisLine: {
                  show: false
                },
                axisLabel: {
                  textStyle: {
                    color: '#4a657a'
                  }
                },
                splitLine: {
                  show: true,
                  lineStyle: {
                    color: '#08263f'
                  }
                },
                axisTick: {}
              },
              series: [{
                type: 'bar',
                data,
                name: '撸文数',
                itemStyle: {
                  normal: {
                    barBorderRadius: 5,
                    shadowBlur: 10,
                    shadowColor: '#111'
                  }
                },
                animationEasing: 'elasticOut',
                animationEasingUpdate: 'elasticOut',
                animationDelay(idx) {
                  return idx * 20;
                },
                animationDelayUpdate(idx) {
                  return idx * 20;
                }
              }]
            })
        }
      }
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.initChart()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(document.getElementById(this.id))
      const xAxisData = []
      const data = []
      const data2 = []
      for (let i = 0; i < 50; i++) {
        xAxisData.push(i)
        data.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5)
        data2.push((Math.sin(i / 5) * (i / 5 + 10) + i / 6) * 3)
      }
      this.chart.setOption(
        {
          backgroundColor: '#08263a',
          xAxis: [{
            show: false,
            data: xAxisData
          }, {
            show: false,
            data: xAxisData
          }],
          visualMap: {
            show: false,
            min: 0,
            max: 50,
            dimension: 0,
            inRange: {
              color: ['#4a657a', '#308e92', '#b1cfa5', '#f5d69f', '#f5898b', '#ef5055']
            }
          },
          yAxis: {
            axisLine: {
              show: false
            },
            axisLabel: {
              textStyle: {
                color: '#4a657a'
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#08263f'
              }
            },
            axisTick: {
              show: false
            }
          },
          series: [{
            name: 'back',
            type: 'bar',
            data: data2,
            z: 1,
            itemStyle: {
              normal: {
                opacity: 0.4,
                barBorderRadius: 5,
                shadowBlur: 3,
                shadowColor: '#111'
              }
            }
          }, {
            name: 'Simulate Shadow',
            type: 'line',
            data,
            z: 2,
            showSymbol: false,
            animationDelay: 0,
            animationEasing: 'linear',
            animationDuration: 1200,
            lineStyle: {
              normal: {
                color: 'transparent'
              }
            },
            areaStyle: {
              normal: {
                color: '#08263a',
                shadowBlur: 50,
                shadowColor: '#000'
              }
            }
          }, {
            name: 'front',
            type: 'bar',
            data,
            xAxisIndex: 1,
            z: 3,
            itemStyle: {
              normal: {
                barBorderRadius: 5
              }
            }
          }],
          animationEasing: 'elasticOut',
          animationEasingUpdate: 'elasticOut',
          animationDelay(idx) {
            return idx * 20
          },
          animationDelayUpdate(idx) {
            return idx * 20
          }
        })
    }
  }
 }
 </script>
--- a/src/components/Charts/keyboard2.vue
+++ b/src/components/Charts/keyboard2.vue
@@ -1,149 +0,0 @@
 <template>
    <div :class="className" :id="id" :style="{height:height,width:width}"></div>
 </template>
 <script>
    // 引入 ECharts 主模块
    const echarts = require('echarts/lib/echarts');
    // 引入柱状图
    require('echarts/lib/chart/bar');
    require('echarts/lib/chart/line');
    // 引入提示框和标题组件
    require('echarts/lib/component/tooltip');
    require('echarts/lib/component/title');
    require('echarts/lib/component/visualMap');
    export default {
      name: 'barPercent',
      props: {
        className: {
          type: String,
          default: 'chart'
        },
        id: {
          type: String,
          default: 'chart'
        },
        width: {
          type: String,
          default: '200px'
        },
        height: {
          type: String,
          default: '200px'
        }
      },
      data() {
        return {};
      },
      mounted() {
        this.initBar();
      },
      methods: {
        initBar() {
          this.chart = echarts.init(document.getElementById(this.id));
          const xAxisData = [];
          const data = [];
          const data2 = [];
          for (let i = 0; i < 50; i++) {
            xAxisData.push(i);
            data.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5);
            data2.push((Math.sin(i / 5) * (i / 5 + 10) + i / 6) * 3);
          }
          this.chart.setOption(
            {
              backgroundColor: '#08263a',
              xAxis: [{
                show: false,
                data: xAxisData
              }, {
                show: false,
                data: xAxisData
              }],
              visualMap: {
                show: false,
                min: 0,
                max: 50,
                dimension: 0,
                inRange: {
                  color: ['#4a657a', '#308e92', '#b1cfa5', '#f5d69f', '#f5898b', '#ef5055']
                }
              },
              yAxis: {
                axisLine: {
                  show: false
                },
                axisLabel: {
                  textStyle: {
                    color: '#4a657a'
                  }
                },
                splitLine: {
                  show: true,
                  lineStyle: {
                    color: '#08263f'
                  }
                },
                axisTick: {
                  show: false
                }
              },
              series: [{
                name: 'back',
                type: 'bar',
                data: data2,
                z: 1,
                itemStyle: {
                  normal: {
                    opacity: 0.4,
                    barBorderRadius: 5,
                    shadowBlur: 3,
                    shadowColor: '#111'
                  }
                }
              }, {
                name: 'Simulate Shadow',
                type: 'line',
                data,
                z: 2,
                showSymbol: false,
                animationDelay: 0,
                animationEasing: 'linear',
                animationDuration: 1200,
                lineStyle: {
                  normal: {
                    color: 'transparent'
                  }
                },
                areaStyle: {
                  normal: {
                    color: '#08263a',
                    shadowBlur: 50,
                    shadowColor: '#000'
                  }
                }
              }, {
                name: 'front',
                type: 'bar',
                data,
                xAxisIndex: 1,
                z: 3,
                itemStyle: {
                  normal: {
                    barBorderRadius: 5
                  }
                }
              }],
              animationEasing: 'elasticOut',
              animationEasingUpdate: 'elasticOut',
              animationDelay(idx) {
                return idx * 20;
              },
              animationDelayUpdate(idx) {
                return idx * 20;
              }
            })
        }
      }
    }
 </script>
--- a/src/components/Charts/line.vue
+++ b/src/components/Charts/line.vue
@@ -1,146 +0,0 @@
 <template>
    <div :class="className" :id="id" :style="{height:height,width:width}"></div>
 </template>
 <script>
    // 引入 ECharts 主模块
    const echarts = require('echarts/lib/echarts');
    // 引入图
    require('echarts/lib/chart/line');
    // 引入提示框和标题组件
    require('echarts/lib/component/markLine');
    require('echarts/lib/component/markPoint');
    require('echarts/lib/component/tooltip');
    export default {
      name: 'lineChart',
      props: {
        className: {
          type: String,
          default: 'line-chart'
        },
        id: {
          type: String,
          default: 'line-chart'
        },
        width: {
          type: String,
          default: '100%'
        },
        height: {
          type: String,
          default: '280px'
        },
        listData: {
          type: Array,
          require: true
        }
      },
      data() {
        return {
          chart: null
        };
      },
      watch: {
        listData(dataList) {
          this.setLine(dataList)
        }
      },
      mounted() {
        this.chart = echarts.init(document.getElementById(this.id));
        this.setLine(this.listData);
      },
      methods: {
        setLine(dataList) {
          const xAxisData = [];
          const data = [];
          for (let i = 0; i < dataList.length; i++) {
            const item = dataList[i]
            xAxisData.push(item.week.substring(item.week.length - 2) + '周');
            data.push(item.count)
          }
          const markLineData = [];
          for (let i = 1; i < data.length; i++) {
            markLineData.push([{
              xAxis: i - 1,
              yAxis: data[i - 1],
              value: data[i] - data[i - 1]
            }, {
              xAxis: i,
              yAxis: data[i]
            }]);
          }
          this.chart.setOption({
            title: {
              text: 'Awesome Chart'
            },
            grid: {
              left: 0,
              right: 0,
              bottom: 20,
              containLabel: true
            },
            tooltip: {
              trigger: 'axis'
            },
            animationDelay: 1000,
            xAxis: {
              data: xAxisData,
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              }
 //                        axisLabel:{
 //                            show:false
 //                        },
            },
            yAxis: {
              splitLine: {
                show: false
              },
              show: false
              // min: 90
            },
            series: [{
              name: '撸文数',
              type: 'line',
              data,
              markPoint: {
                data: [
                    { type: 'max', name: '最大值' },
                    { type: 'min', name: '最小值' }
                ]
              },
              itemStyle: {
                normal: {
                  color: '#30b08f'
                }
              },
              markLine: {
                silent: true,
                smooth: true,
                effect: {
                  show: true
                },
                animationDuration(idx) {
                  return idx * 100;
                },
                animationDelay: 1000,
                animationEasing: 'quadraticInOut',
                distance: 1,
                label: {
                  normal: {
                    position: 'middle'
                  }
                },
                symbol: ['none', 'none'],
                data: markLineData
              }
            }]
          })
        }
      }
    }
 </script>
--- a/src/components/Charts/lineMarker.vue
+++ b/src/components/Charts/lineMarker.vue
@@ -1,219 +1,227 @@
 <template>
-    <div :class="className" :id="id" :style="{height:height,width:width}"></div>
+  <div :class="className" :id="id" :style="{height:height,width:width}"></div>
 </template>
 <script>
-    // 引入 ECharts 主模块
+import echarts from 'echarts'
-    const echarts = require('echarts/lib/echarts');
+import resize from './mixins/resize'
-    require('echarts/lib/chart/line');
+export default {
-    // 引入提示框和标题组件
+  mixins: [resize],
-    require('echarts/lib/component/tooltip');
+  props: {
-    require('echarts/lib/component/title');
+    className: {
-    require('echarts/lib/component/legend');
+      type: String,
-    export default {
+      default: 'chart'
-      name: 'barPercent',
+    },
-      props: {
+    id: {
-        className: {
+      type: String,
-          type: String,
+      default: 'chart'
-          default: 'chart'
+    },
-        },
+    width: {
-        id: {
+      type: String,
-          type: String,
+      default: '200px'
-          default: 'chart'
+    },
-        },
+    height: {
-        width: {
+      type: String,
-          type: String,
+      default: '200px'
          default: '200px'
        },
        height: {
          type: String,
          default: '200px'
        }
      },
      data() {
        return {};
      },
      mounted() {
        this.initChart();
      },
      methods: {
        initChart() {
          this.chart = echarts.init(document.getElementById(this.id));
          this.chart.setOption({
            backgroundColor: '#394056',
            title: {
              text: '请求数',
              textStyle: {
                fontWeight: 'normal',
                fontSize: 16,
                color: '#F1F1F3'
              },
              left: '6%'
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                lineStyle: {
                  color: '#57617B'
                }
              }
            },
            legend: {
              icon: 'rect',
              itemWidth: 14,
              itemHeight: 5,
              itemGap: 13,
              data: ['移动', '电信', '联通'],
              right: '4%',
              textStyle: {
                fontSize: 12,
                color: '#F1F1F3'
              }
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              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'
                }
              }
            }],
            series: [{
              name: '移动',
              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]
            }, {
              name: '电信',
              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: '联通',
              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]
            }]
          })
        }
      }
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.initChart()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(document.getElementById(this.id))
      this.chart.setOption({
        backgroundColor: '#394056',
        title: {
          top: 20,
          text: 'Requests',
          textStyle: {
            fontWeight: 'normal',
            fontSize: 16,
            color: '#F1F1F3'
          },
          left: '1%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: '#57617B'
            }
          }
        },
        legend: {
          top: 20,
          icon: 'rect',
          itemWidth: 14,
          itemHeight: 5,
          itemGap: 13,
          data: ['CMCC', 'CTCC', 'CUCC'],
          right: '4%',
          textStyle: {
            fontSize: 12,
            color: '#F1F1F3'
          }
        },
        grid: {
          top: 100,
          left: '3%',
          right: '4%',
          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'
            }
          }
        }],
        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]
        }, {
          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]
        }]
      })
    }
  }
 }
 </script>
--- a/src/components/Charts/mixChart.vue
+++ b/src/components/Charts/mixChart.vue
@@ -0,0 +1,269 @@
 <template>
  <div :class="className" :id="id" :style="{height:height,width:width}"></div>
 </template>
 <script>
 import echarts from 'echarts'
 import resize from './mixins/resize'
 export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    id: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '200px'
    },
    height: {
      type: String,
      default: '200px'
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.initChart()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(document.getElementById(this.id))
      const xData = (function() {
        const data = []
        for (let i = 1; i < 13; i++) {
          data.push(i + 'month')
        }
        return data
      }())
      this.chart.setOption({
        backgroundColor: '#344b58',
        title: {
          text: 'statistics',
          x: '20',
          top: '20',
          textStyle: {
            color: '#fff',
            fontSize: '22'
          },
          subtextStyle: {
            color: '#90979c',
            fontSize: '16'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            textStyle: {
              color: '#fff'
            }
          }
        },
        grid: {
          borderWidth: 0,
          top: 110,
          bottom: 95,
          textStyle: {
            color: '#fff'
          }
        },
        legend: {
          x: '5%',
          top: '10%',
          textStyle: {
            color: '#90979c'
          },
          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
          }
        }],
        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'
        }, {
          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
          ]
        },
        {
          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
          ]
        }, {
          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
          ]
        }
        ]
      })
    }
  }
 }
 </script>
--- a/src/components/Charts/mixchart.vue
+++ b/src/components/Charts/mixchart.vue
@@ -1,265 +0,0 @@
 <template>
    <div :class="className" :id="id" :style="{height:height,width:width}"></div>
 </template>
 <script>
    // 引入 ECharts 主模块
    const echarts = require('echarts/lib/echarts');
    require('echarts/lib/chart/bar');
    require('echarts/lib/chart/line');
    // 引入提示框和标题组件
    require('echarts/lib/component/tooltip');
    require('echarts/lib/component/title');
    require('echarts/lib/component/legend');
    require('echarts/lib/component/dataZoom');
    export default {
      name: 'barPercent',
      props: {
        className: {
          type: String,
          default: 'chart'
        },
        id: {
          type: String,
          default: 'chart'
        },
        width: {
          type: String,
          default: '200px'
        },
        height: {
          type: String,
          default: '200px'
        }
      },
      data() {
        return {};
      },
      mounted() {
        this.initChart();
      },
      methods: {
        initChart() {
          this.chart = echarts.init(document.getElementById(this.id));
          const xData = (function() {
            const data = [];
            for (let i = 1; i < 13; i++) {
              data.push(i + '月份');
            }
            return data;
          }());
          this.chart.setOption({
            backgroundColor: '#344b58',
            title: {
              text: '统计',
              x: '4%',
              textStyle: {
                color: '#fff',
                fontSize: '22'
              },
              subtextStyle: {
                color: '#90979c',
                fontSize: '16'
              }
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                textStyle: {
                  color: '#fff'
                }
              }
            },
            grid: {
              borderWidth: 0,
              top: 110,
              bottom: 95,
              textStyle: {
                color: '#fff'
              }
            },
            legend: {
              x: '15%',
              top: '10%',
              textStyle: {
                color: '#90979c'
              },
              data: ['女', '男', '平均']
            },
            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
              }
            }],
            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'
            }, {
              type: 'inside',
              show: true,
              height: 15,
              start: 1,
              end: 35
            }],
            series: [{
              name: '女',
              type: 'bar',
              stack: '总量',
              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
              ]
            },
            {
              name: '男',
              type: 'bar',
              stack: '总量',
              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
              ]
            }, {
              name: '平均',
              type: 'line',
              stack: '总量',
              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
              ]
            }
            ]
          })
        }
      }
    }
 </script>
--- a/src/components/Charts/mixins/resize.js
+++ b/src/components/Charts/mixins/resize.js
@@ -0,0 +1,15 @@
 import { debounce } from '@/utils'
 export default {
  mounted() {
    this.__resizeHanlder = debounce(() => {
      if (this.chart) {
        this.chart.resize()
      }
    }, 100)
    window.addEventListener('resize', this.__resizeHanlder)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.__resizeHanlder)
  }
 }
--- a/src/components/DndList/index.vue
+++ b/src/components/DndList/index.vue
@@ -0,0 +1,158 @@
 <template>
  <div class="dndList">
    <div class="dndList-list" :style="{width:width1}">
      <h3>{{list1Title}}</h3>
      <draggable :list="list1" class="dragArea" :options="{group:'article'}">
        <div class="list-complete-item" v-for="element in list1" :key='element.id'>
          <div class="list-complete-item-handle">[{{element.author}}] {{element.title}}</div>
          <div style="position:absolute;right:0px;">
            <span style="float: right ;margin-top: -20px;margin-right:5px;" @click="deleteEle(element)">
              <i style="color:#ff4949" class="el-icon-delete"></i>
            </span>
          </div>
        </div>
      </draggable>
    </div>
    <div class="dndList-list" :style="{width:width2}">
      <h3>{{list2Title}}</h3>
      <draggable :list="filterList2" class="dragArea" :options="{group:'article'}">
        <div class="list-complete-item" v-for="element in filterList2" :key='element.id'>
          <div class='list-complete-item-handle2' @click="pushEle(element)"> [{{element.author}}] {{element.title}}</div>
        </div>
      </draggable>
    </div>
  </div>
 </template>
 <script>
 import draggable from 'vuedraggable'
 export default {
  name: 'DndList',
  components: { draggable },
  computed: {
    filterList2() {
      return this.list2.filter(v => {
        if (this.isNotInList1(v)) {
          return v
        }
        return false
      })
    }
  },
  props: {
    list1: {
      type: Array,
      default() {
        return []
      }
    },
    list2: {
      type: Array,
      default() {
        return []
      }
    },
    list1Title: {
      type: String,
      default: 'list1'
    },
    list2Title: {
      type: String,
      default: 'list2'
    },
    width1: {
      type: String,
      default: '48%'
    },
    width2: {
      type: String,
      default: '48%'
    }
  },
  methods: {
    isNotInList1(v) {
      return this.list1.every(k => v.id !== k.id)
    },
    isNotInList2(v) {
      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
        }
      }
      if (this.isNotInList2(ele)) {
        this.list2.unshift(ele)
      }
    },
    pushEle(ele) {
      this.list1.push(ele)
    }
  }
 }
 </script>
 <style rel="stylesheet/scss" lang="scss" scoped>
 .dndList {
  background: #fff;
  padding-bottom: 40px;
  &:after {
    content: "";
    display: table;
    clear: both;
  }
  .dndList-list {
    float: left;
    padding-bottom: 30px;
    &:first-of-type {
      margin-right: 2%;
    }
    .dragArea {
      margin-top: 15px;
      min-height: 50px;
      padding-bottom: 30px;
    }
  }
 }
 .list-complete-item {
  cursor: pointer;
  position: relative;
  font-size: 14px;
  padding: 5px 12px;
  margin-top: 4px;
  border: 1px solid #bfcbd9;
  transition: all 1s;
 }
 .list-complete-item-handle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 50px;
 }
 .list-complete-item-handle2 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 20px;
 }
 .list-complete-item.sortable-chosen {
  background: #4AB7BD;
 }
 .list-complete-item.sortable-ghost {
  background: #30B08F;
 }
 .list-complete-enter,
 .list-complete-leave-active {
  opacity: 0;
 }
 </style>
--- a/src/components/Dropzone/index.vue
+++ b/src/components/Dropzone/index.vue
@@ -1,206 +1,205 @@
 <template>
-    <div :ref="id" :action="url" class="dropzone" :id="id">
+  <div :ref="id" :action="url" class="dropzone" :id="id">
-        <input type="file" name="file">
+    <input type="file" name="file">
-    </div>
+  </div>
 </template>
 <script>
-    import Dropzone from 'dropzone';
+import Dropzone from 'dropzone'
-    import 'dropzone/dist/dropzone.css';
+import 'dropzone/dist/dropzone.css'
-    // import { getToken } from 'api/qiniu';
+// import { getToken } from 'api/qiniu';
-    Dropzone.autoDiscover = false;
+Dropzone.autoDiscover = false
-    export default {
+export default {
-      data() {
+  data() {
-        return {
+    return {
-          dropzone: '',
+      dropzone: '',
-          initOnce: true
+      initOnce: true
    }
  },
  mounted() {
    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',
      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>',
      init() {
        const val = vm.defaultImg
        if (!val) return
        if (Array.isArray(val)) {
          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
          })
        } 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
        }
      },
-      mounted() {
+      accept: (file, done) => {
        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',
          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>',
          init() {
            const val = vm.defaultImg;
            if (!val) return;
            if (Array.isArray(val)) {
              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;
              })
            } 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;
            }
          },
          accept: (file, done) => {
        /* 七牛*/
-            // const token = this.$store.getters.token;
+        // const token = this.$store.getters.token;
-            // getToken(token).then(response => {
+        // getToken(token).then(response => {
-            //   file.token = response.data.qiniu_token;
+        //   file.token = response.data.qiniu_token;
-            //   file.key = response.data.qiniu_key;
+        //   file.key = response.data.qiniu_key;
-            //   file.url = response.data.qiniu_url;
+        //   file.url = response.data.qiniu_url;
-            //   done();
+        //   done();
-            // })
+        // })
-            done();
+        done()
-          },
+      },
-          sending: (file, xhr, formData) => {
+      sending: (file, xhr, formData) => {
-             /* 七牛*/
+        // formData.append('token', file.token);
-            console.log(file, xhr, formData)
+        // formData.append('key', file.key);
-            // formData.append('token', file.token);
+        vm.initOnce = false
-            // formData.append('key', file.key);
+      }
-            vm.initOnce = false;
+    })
          }
        });
-        if (this.couldPaste) {
+    if (this.couldPaste) {
-          document.addEventListener('paste', this.pasteImg)
+      document.addEventListener('paste', this.pasteImg)
-        }
+    }
-        this.dropzone.on('success', file => {
+    this.dropzone.on('success', file => {
-          vm.$emit('dropzone-success', file, vm.dropzone.element)
+      vm.$emit('dropzone-success', file, vm.dropzone.element)
-        });
+    })
-        this.dropzone.on('addedfile', file => {
+    this.dropzone.on('addedfile', file => {
-          vm.$emit('dropzone-fileAdded', file)
+      vm.$emit('dropzone-fileAdded', file)
-        });
+    })
-        this.dropzone.on('removedfile', file => {
+    this.dropzone.on('removedfile', file => {
-          vm.$emit('dropzone-removedFile', file)
+      vm.$emit('dropzone-removedFile', file)
-        });
+    })
-        this.dropzone.on('error', (file, error, xhr) => {
+    this.dropzone.on('error', (file, error, xhr) => {
-          vm.$emit('dropzone-error', file, error, xhr)
+      vm.$emit('dropzone-error', file, error, xhr)
-        });
+    })
-        this.dropzone.on('successmultiple', (file, error, xhr) => {
+    this.dropzone.on('successmultiple', (file, error, xhr) => {
-          vm.$emit('dropzone-successmultiple', file, error, xhr)
+      vm.$emit('dropzone-successmultiple', file, error, xhr)
-        });
+    })
-      },
+  },
-      methods: {
+  methods: {
-        removeAllFiles() {
+    removeAllFiles() {
-          this.dropzone.removeAllFiles(true)
+      this.dropzone.removeAllFiles(true)
-        },
+    },
-        processQueue() {
+    processQueue() {
-          this.dropzone.processQueue()
+      this.dropzone.processQueue()
-        },
+    },
-        pasteImg(event) {
+    pasteImg(event) {
-          const items = (event.clipboardData || event.originalEvent.clipboardData).items;
+      const items = (event.clipboardData || event.originalEvent.clipboardData).items
-          if (items[0].kind === 'file') {
+      if (items[0].kind === 'file') {
-            this.dropzone.addFile(items[0].getAsFile())
+        this.dropzone.addFile(items[0].getAsFile())
-          }
+      }
-        },
+    },
-        initImages(val) {
+    initImages(val) {
-          if (!val) return;
+      if (!val) return
-          if (Array.isArray(val)) {
+      if (Array.isArray(val)) {
-            val.map((v, i) => {
+        val.map((v, i) => {
-              const mockFile = { name: 'name' + i, size: 12345, url: v };
+          const mockFile = { name: 'name' + i, size: 12345, url: v }
-              this.dropzone.options.addedfile.call(this.dropzone, mockFile);
+          this.dropzone.options.addedfile.call(this.dropzone, mockFile)
-              this.dropzone.options.thumbnail.call(this.dropzone, mockFile, v);
+          this.dropzone.options.thumbnail.call(this.dropzone, mockFile, v)
-              mockFile.previewElement.classList.add('dz-success');
+          mockFile.previewElement.classList.add('dz-success')
-              mockFile.previewElement.classList.add('dz-complete');
+          mockFile.previewElement.classList.add('dz-complete')
-              return true
+          return true
-            })
+        })
-          } else {
+      } else {
-            const mockFile = { name: 'name', size: 12345, url: val };
+        const mockFile = { name: 'name', size: 12345, url: val }
-            this.dropzone.options.addedfile.call(this.dropzone, mockFile);
+        this.dropzone.options.addedfile.call(this.dropzone, mockFile)
-            this.dropzone.options.thumbnail.call(this.dropzone, mockFile, val);
+        this.dropzone.options.thumbnail.call(this.dropzone, mockFile, val)
-            mockFile.previewElement.classList.add('dz-success');
+        mockFile.previewElement.classList.add('dz-success')
-            mockFile.previewElement.classList.add('dz-complete');
+        mockFile.previewElement.classList.add('dz-complete')
          }
        }
      },
      destroyed() {
        document.removeEventListener('paste', this.pasteImg);
        this.dropzone.destroy();
      },
      watch: {
        defaultImg(val) {
          if (val.length === 0) {
            this.initOnce = false;
            return;
          }
          if (!this.initOnce) return;
          this.initImages(val);
          this.initOnce = false;
        }
      },
      props: {
        id: {
          type: String,
          required: true
        },
        url: {
          type: String,
          required: true
        },
        clickable: {
          type: Boolean,
          default: true
        },
        defaultMsg: {
          type: String,
          default: '上传图片'
        },
        acceptedFiles: {
          type: String
        },
        thumbnailHeight: {
          type: Number,
          default: 200
        },
        thumbnailWidth: {
          type: Number,
          default: 200
        },
        showRemoveLink: {
          type: Boolean,
          default: true
        },
        maxFilesize: {
          type: Number,
          default: 2
        },
        maxFiles: {
          type: Number,
          default: 3
        },
        autoProcessQueue: {
          type: Boolean,
          default: true
        },
        useCustomDropzoneOptions: {
          type: Boolean,
          default: false
        },
        defaultImg: {
          default: false
        },
        couldPaste: {
          default: false
        }
      }
    }
  },
  destroyed() {
    document.removeEventListener('paste', this.pasteImg)
    this.dropzone.destroy()
  },
  watch: {
    defaultImg(val) {
      if (val.length === 0) {
        this.initOnce = false
        return
      }
      if (!this.initOnce) return
      this.initImages(val)
      this.initOnce = false
    }
  },
  props: {
    id: {
      type: String,
      required: true
    },
    url: {
      type: String,
      required: true
    },
    clickable: {
      type: Boolean,
      default: true
    },
    defaultMsg: {
      type: String,
      default: '上传图片'
    },
    acceptedFiles: {
      type: String
    },
    thumbnailHeight: {
      type: Number,
      default: 200
    },
    thumbnailWidth: {
      type: Number,
      default: 200
    },
    showRemoveLink: {
      type: Boolean,
      default: true
    },
    maxFilesize: {
      type: Number,
      default: 2
    },
    maxFiles: {
      type: Number,
      default: 3
    },
    autoProcessQueue: {
      type: Boolean,
      default: true
    },
    useCustomDropzoneOptions: {
      type: Boolean,
      default: false
    },
    defaultImg: {
      default: false
    },
    couldPaste: {
      default: false
    }
  }
 }
 </script>
 <style scoped>
--- a/src/components/ErrLog/index.vue
+++ b/src/components/ErrLog/index.vue
@@ -1,51 +0,0 @@
 <template>
    <div>
        <el-badge :is-dot="true" style="line-height: 30px;" @click.native="dialogTableVisible=true">
            <el-button size="small" type="primary">
                <svg t="1492682037685" class="bug-svg"  viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1863" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M969.142857 548.571429q0 14.848-10.861714 25.709714t-25.709714 10.861714l-128 0q0 97.718857-38.290286 165.705143l118.857143 119.442286q10.861714 10.861714 10.861714 25.709714t-10.861714 25.709714q-10.276571 10.861714-25.709714 10.861714t-25.709714-10.861714l-113.152-112.566857q-2.852571 2.852571-8.557714 7.424t-23.990857 16.274286-37.156571 20.845714-46.848 16.566857-55.442286 7.424l0-512-73.142857 0 0 512q-29.147429 0-58.002286-7.716571t-49.700571-18.870857-37.705143-22.272-24.868571-18.578286l-8.557714-8.009143-104.557714 118.272q-11.446857 11.995429-27.428571 11.995429-13.714286 0-24.576-9.142857-10.861714-10.276571-11.702857-25.417143t8.850286-26.587429l115.419429-129.718857q-33.133714-65.133714-33.133714-156.562286l-128 0q-14.848 0-25.709714-10.861714t-10.861714-25.709714 10.861714-25.709714 25.709714-10.861714l128 0 0-168.009143-98.852571-98.852571q-10.861714-10.861714-10.861714-25.709714t10.861714-25.709714 25.709714-10.861714 25.709714 10.861714l98.852571 98.852571 482.304 0 98.852571-98.852571q10.861714-10.861714 25.709714-10.861714t25.709714 10.861714 10.861714 25.709714-10.861714 25.709714l-98.852571 98.852571 0 168.009143 128 0q14.848 0 25.709714 10.861714t10.861714 25.709714zM694.857143 219.428571l-365.714286 0q0-75.995429 53.430857-129.426286t129.426286-53.430857 129.426286 53.430857 53.430857 129.426286z" p-id="1864"></path></svg>
            </el-button>
        </el-badge>
        <el-dialog title="bug日志" :visible.sync="dialogTableVisible">
            <el-table :data="logsList">
                <el-table-column label="message">
                    <template scope="scope">
                        <div>msg:{{ scope.row.err.message }}</div>
                        <br/>
                        <div>url: {{scope.row.url}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="stack">
                    <template scope="scope">
                        {{ scope.row.err.stack}}
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
    </div>
 </template>
 <script>
    export default {
      name: 'errLog',
      props: {
        logsList: {
          type: Array
        }
      },
      data() {
        return {
          dialogTableVisible: false
        }
      }
    }
 </script>
 <style scoped>
 .bug-svg {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
 }
 </style>
--- a/src/components/ErrorLog/index.vue
+++ b/src/components/ErrorLog/index.vue
@@ -0,0 +1,77 @@
 <template>
  <div v-if="errorLogs.length>0">
    <el-badge :is-dot="true" style="line-height: 30px;" @click.native="dialogTableVisible=true">
      <el-button size="small" type="danger" class="bug-btn">
        <svg t="1492682037685" class="bug-svg" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1863"
          xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128">
          <path d="M969.142857 548.571429q0 14.848-10.861714 25.709714t-25.709714 10.861714l-128 0q0 97.718857-38.290286 165.705143l118.857143 119.442286q10.861714 10.861714 10.861714 25.709714t-10.861714 25.709714q-10.276571 10.861714-25.709714 10.861714t-25.709714-10.861714l-113.152-112.566857q-2.852571 2.852571-8.557714 7.424t-23.990857 16.274286-37.156571 20.845714-46.848 16.566857-55.442286 7.424l0-512-73.142857 0 0 512q-29.147429 0-58.002286-7.716571t-49.700571-18.870857-37.705143-22.272-24.868571-18.578286l-8.557714-8.009143-104.557714 118.272q-11.446857 11.995429-27.428571 11.995429-13.714286 0-24.576-9.142857-10.861714-10.276571-11.702857-25.417143t8.850286-26.587429l115.419429-129.718857q-33.133714-65.133714-33.133714-156.562286l-128 0q-14.848 0-25.709714-10.861714t-10.861714-25.709714 10.861714-25.709714 25.709714-10.861714l128 0 0-168.009143-98.852571-98.852571q-10.861714-10.861714-10.861714-25.709714t10.861714-25.709714 25.709714-10.861714 25.709714 10.861714l98.852571 98.852571 482.304 0 98.852571-98.852571q10.861714-10.861714 25.709714-10.861714t25.709714 10.861714 10.861714 25.709714-10.861714 25.709714l-98.852571 98.852571 0 168.009143 128 0q14.848 0 25.709714 10.861714t10.861714 25.709714zM694.857143 219.428571l-365.714286 0q0-75.995429 53.430857-129.426286t129.426286-53.430857 129.426286 53.430857 53.430857 129.426286z"
            p-id="1864"></path>
        </svg>
      </el-button>
    </el-badge>
    <el-dialog title="Error Log" :visible.sync="dialogTableVisible" width="80%">
      <el-table :data="errorLogs" border>
        <el-table-column label="Message">
          <template slot-scope="scope">
            <div>
              <span class="message-title">Msg:</span>
              <el-tag type="danger">{{ scope.row.err.message }}</el-tag>
            </div>
            <br/>
            <div>
              <span class="message-title" style="padding-right: 10px;">Info: </span>
              <el-tag type="warning">{{scope.row.vm.$vnode.tag}} error in {{scope.row.info}}</el-tag>
            </div>
            <br/>
            <div>
              <span class="message-title" style="padding-right: 16px;">Url: </span>
              <el-tag type="success">{{scope.row.url}}</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="Stack">
          <template slot-scope="scope">
            {{ scope.row.err.stack}}
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
 </template>
 <script>
 export default {
  name: 'errorLog',
  data() {
    return {
      dialogTableVisible: false
    }
  },
  computed: {
    errorLogs() {
      return this.$store.getters.errorLogs
    }
  }
 }
 </script>
 <style scoped>
 .bug-btn.el-button--small {
  padding: 9px 10px;
 }
 .bug-svg {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
 }
 .message-title {
  font-size: 16px;
  color: #333;
  font-weight: bold;
  padding-right: 8px;
 }
 </style>
--- a/src/components/GithubCorner/index.vue
+++ b/src/components/GithubCorner/index.vue
@@ -0,0 +1,42 @@
 <template>
  <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" viewBox="0 0 250 250" style="fill:#40c9c6; color:#fff; position: absolute; top: 84px; border: 0; right: 0;"
      aria-hidden="true">
      <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
      <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
        fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
      <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
        fill="currentColor" class="octo-body"></path>
    </svg>
  </a>
 </template>
 <style scoped>
 .github-corner:hover .octo-arm {
  animation: octocat-wave 560ms ease-in-out
 }
@keyframes octocat-wave {
  0%,
  100% {
    transform: rotate(0)
  }
  20%,
  60% {
    transform: rotate(-25deg)
  }
  40%,
  80% {
    transform: rotate(10deg)
  }
 }
@media (max-width:500px) {
  .github-corner:hover .octo-arm {
    animation: none
  }
  .github-corner .octo-arm {
    animation: octocat-wave 560ms ease-in-out
  }
 }
 </style>
--- a/src/components/Hamburger/index.vue
+++ b/src/components/Hamburger/index.vue
@@ -1,36 +1,45 @@
 <template>
-    <div>
+  <div>
-        <svg t="1492500959545" @click="toggleClick" class="wscn-icon hamburger" :class="{'is-active':isActive}"  style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1691" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M966.8023 568.849776 57.196677 568.849776c-31.397081 0-56.850799-25.452695-56.850799-56.850799l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 543.397081 998.200404 568.849776 966.8023 568.849776z" p-id="1692"></path><path d="M966.8023 881.527125 57.196677 881.527125c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 856.07443 998.200404 881.527125 966.8023 881.527125z" p-id="1693"></path><path d="M966.8023 256.17345 57.196677 256.17345c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.850799 56.850799-56.850799l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.850799l0 0C1023.653099 230.720755 998.200404 256.17345 966.8023 256.17345z" p-id="1694"></path></svg>
+    <svg t="1492500959545" @click="toggleClick" class="hamburger" :class="{'is-active':isActive}" style="" viewBox="0 0 1024 1024"
-    </div>
+      version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1691" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64">
      <path d="M966.8023 568.849776 57.196677 568.849776c-31.397081 0-56.850799-25.452695-56.850799-56.850799l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 543.397081 998.200404 568.849776 966.8023 568.849776z"
        p-id="1692"></path>
      <path d="M966.8023 881.527125 57.196677 881.527125c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 856.07443 998.200404 881.527125 966.8023 881.527125z"
        p-id="1693"></path>
      <path d="M966.8023 256.17345 57.196677 256.17345c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.850799 56.850799-56.850799l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.850799l0 0C1023.653099 230.720755 998.200404 256.17345 966.8023 256.17345z"
        p-id="1694"></path>
    </svg>
  </div>
 </template>
 <script>
-    export default {
+export default {
-      name: 'hamburger',
+  name: 'hamburger',
-      props: {
+  props: {
-        isActive: {
+    isActive: {
-          type: Boolean,
+      type: Boolean,
-          default: false
+      default: false
-        },
+    },
-        toggleClick: {
+    toggleClick: {
-          type: Function,
+      type: Function,
-          default: null
+      default: null
        }
      }
    }
  }
 }
 </script>
 <style scoped>
-    .hamburger {
+.hamburger {
-        display: inline-block;
+  display: inline-block;
-        cursor: pointer;
+  cursor: pointer;
-        width: 20px;
+  width: 20px;
-        height: 20px;
+  height: 20px;
-        transform: rotate(0deg);
+  transform: rotate(90deg);
-        transition: .38s;
+  transition: .38s;
-        transform-origin: 50% 50%;
+  transform-origin: 50% 50%;
-    }
+}
-    .hamburger.is-active {
+
-        transform: rotate(90deg);
+.hamburger.is-active {
-    }
+  transform: rotate(0deg);
 }
 </style>
--- a/src/components/Icon-svg/index.js
+++ b/src/components/Icon-svg/index.js
@@ -1,11 +0,0 @@
 import Vue from 'vue'
 function registerAllComponents(requireContext) {
  return requireContext.keys().forEach(comp => {
    const vueComp = requireContext(comp)
    const compName = vueComp.name ? vueComp.name.toLowerCase() : /\/([\w-]+)\.vue$/.exec(comp)[1]
    Vue.component(compName, vueComp)
  })
 }
 registerAllComponents(require.context('./', false, /\.vue$/))
--- a/src/components/Icon-svg/wscn-icon-stack.vue
+++ b/src/components/Icon-svg/wscn-icon-stack.vue
@@ -1,52 +0,0 @@
 <template>
  <div class="icon-container" :style="containerStyle">
    <slot class="icon"></slot>
  </div>
 </template>
 <script>
  export default {
    name: 'wscn-icon-stack',
    props: {
      width: {
        type: Number,
        default: 20
      },
      shape: {
        type: String,
        default: 'circle',
        validator: val => {
          const validShapes = ['circle', 'square']
          return validShapes.indexOf(val) > -1
        }
      }
    },
    computed: {
      containerStyle() {
        return {
          width: `${this.width}px`,
          height: `${this.width}px`,
          fontSize: `${this.width * 0.6}px`,
          borderRadius: `${this.shape === 'circle' && '50%'}`
        }
      }
    }
  }
 </script>
 <style lang="scss" scoped>
  .icon-container {
    display: inline-block;
    position: relative;
    overflow: hidden;
    background: #1482F0;
    .icon {
      position: absolute;
      color: #ffffff;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
 </style>
--- a/src/components/Icon-svg/wscn-icon-svg.vue
+++ b/src/components/Icon-svg/wscn-icon-svg.vue
@@ -1,26 +0,0 @@
 <template>
  <svg class="wscn-icon" aria-hidden="true">
    <use :xlink:href="iconName"></use>
  </svg>
 </template>
 <script>
  export default {
    name: 'wscn-icon-svg',
    props: {
      iconClass: {
        type: String,
        required: true
      }
    },
    computed: {
      iconName() {
        return `#icon-${this.iconClass}`
      }
    }
  }
 </script>
 <style lang="scss" scoped>
 </style>
--- a/src/components/ImageCropper/index.vue
+++ b/src/components/ImageCropper/index.vue
--- a/src/components/ImageCropper/lang.js
+++ b/src/components/ImageCropper/lang.js
@@ -1,41 +0,0 @@
 const langBag = {
  zh: {
    hint: '点击，或拖动图片至此处',
    loading: '正在上传……',
    noSupported: '浏览器不支持该功能，请使用IE10以上或其他现在浏览器！',
    success: '上传成功',
    fail: '图片上传失败',
    preview: '头像预览',
    btn: {
      off: '取消',
      close: '关闭',
      back: '上一步',
      save: '保存'
    },
    error: {
      onlyImg: '仅限图片格式',
      outOfSize: '单文件大小不能超过 ',
      lowestPx: '图片最低像素为（宽*高）：'
    }
  },
  en: {
    hint: 'Click, or drag the file here',
    loading: 'Uploading……',
    noSupported: 'Browser does not support, please use IE10+ or other browsers',
    success: 'Upload success',
    fail: 'Upload failed',
    preview: 'Preview',
    btn: {
      off: 'Cancel',
      close: 'Close',
      back: 'Back',
      save: 'Save'
    },
    error: {
      onlyImg: 'Image only',
      outOfSize: 'Image exceeds size limit: ',
      lowestPx: 'The lowest pixel in the image: '
    }
  }
 };
 export default langBag;
--- a/src/components/ImageCropper/upload.css
+++ b/src/components/ImageCropper/upload.css
@@ -1,691 +0,0 @@
@charset "UTF-8";
@-webkit-keyframes vicp_progress {
    0% {
        background-position-y: 0;
    }
    100% {
        background-position-y: 40px;
    }
 }
@keyframes vicp_progress {
    0% {
        background-position-y: 0;
    }
    100% {
        background-position-y: 40px;
    }
 }
@-webkit-keyframes vicp {
    0% {
        opacity: 0;
        -webkit-transform: scale(0) translatey(-60px);
        transform: scale(0) translatey(-60px);
    }
    100% {
        opacity: 1;
        -webkit-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);
    }
    100% {
        opacity: 1;
        -webkit-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;
    z-index: 10000;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    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;
    padding: 35px;
    height: 200px;
    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-range {
    position: relative;
    margin: 30px 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:last-child {
    margin-right: 0;
 }
 .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-right .vicp-preview .vicp-preview-item:last-child img {
    border-radius: 100%;
 }
 .vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload {
    position: relative;
    padding: 35px;
    height: 200px;
    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%;
    background-color: rgba(0, 0, 0, 0.15);
    background-clip: padding-box;
    pointer-events: none;
    -webkit-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;
 }
--- a/src/components/ImageCropper/utils.js
+++ b/src/components/ImageCropper/utils.js
@@ -1,58 +0,0 @@
 /* eslint-disable */
 /**
 *
 * @param e
 * @param arg_opts
 * @returns {boolean}
 */
 export function effectRipple(e, arg_opts) {
    let opts = Object.assign({
            ele: e.target, // 波纹作用元素
            type: 'hit', // hit点击位置扩散　center中心点扩展
            bgc: 'rgba(0, 0, 0, 0.15)' // 波纹颜色
        }, arg_opts),
        target = opts.ele;
    if (target) {
        let rect = target.getBoundingClientRect(),
            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);
        } else {
            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;
            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.backgroundColor = opts.bgc;
        ripple.className = 'e-ripple z-active';
        return false;
    }
 }
 // database64文件格式转换为2进制
 /**
 *
 * @param data
 * @param mime
 * @returns {*}
 */
 export function data2blob(data, mime) {
    // dataURL 的格式为 “data:image/png;base64,****”,逗号之前都是一些说明性的文字，我们只需要逗号之后的就行了
    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);
    }
    // canvas.toDataURL 返回的默认格式就是 image/png
    return new Blob([ia], {type: mime});
 };
--- a/src/components/ImageCropper/utils/data2blob.js
+++ b/src/components/ImageCropper/utils/data2blob.js
@@ -0,0 +1,19 @@
 /**
 * database64文件格式转换为2进制
 *
 * @param  {[String]} data dataURL 的格式为 “data:image/png;base64,****”,逗号之前都是一些说明性的文字，我们只需要逗号之后的就行了
 * @param  {[String]} mime [description]
 * @return {[blob]}      [description]
 */
 export default function(data, mime) {
  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)
  }
  // canvas.toDataURL 返回的默认格式就是 image/png
  return new Blob([ia], {
    type: mime
  })
 }
--- a/src/components/ImageCropper/utils/effectRipple.js
+++ b/src/components/ImageCropper/utils/effectRipple.js
@@ -0,0 +1,39 @@
 /**
 * 点击波纹效果
 *
 * @param  {[event]} e        [description]
 * @param  {[Object]} arg_opts [description]
 * @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
  if (target) {
    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)
    } else {
      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
      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.backgroundColor = opts.bgc
    ripple.className = 'e-ripple z-active'
    return false
  }
 }
--- a/src/components/ImageCropper/utils/language.js
+++ b/src/components/ImageCropper/utils/language.js
@@ -0,0 +1,232 @@
 export default {
  zh: {
    hint: '点击，或拖动图片至此处',
    loading: '正在上传……',
    noSupported: '浏览器不支持该功能，请使用IE10以上或其他现在浏览器！',
    success: '上传成功',
    fail: '图片上传失败',
    preview: '头像预览',
    btn: {
      off: '取消',
      close: '关闭',
      back: '上一步',
      save: '保存'
    },
    error: {
      onlyImg: '仅限图片格式',
      outOfSize: '单文件大小不能超过 ',
      lowestPx: '图片最低像素为（宽*高）：'
    }
  },
  'zh-tw': {
    hint: '點擊，或拖動圖片至此處',
    loading: '正在上傳……',
    noSupported: '瀏覽器不支持該功能，請使用IE10以上或其他現代瀏覽器！',
    success: '上傳成功',
    fail: '圖片上傳失敗',
    preview: '頭像預覽',
    btn: {
      off: '取消',
      close: '關閉',
      back: '上一步',
      save: '保存'
    },
    error: {
      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',
    btn: {
      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: '
    }
  },
  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ă',
    btn: {
      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: '
    }
  },
  ru: {
    hint: 'Нажмите, или перетащите файл в это окно',
    loading: 'Загружаю……',
    noSupported: 'Ваш браузер не поддерживается, пожалуйста, используйте IE10 + или другие браузеры',
    success: 'Загрузка выполнена успешно',
    fail: 'Ошибка загрузки',
    preview: 'Предпросмотр',
    btn: {
      off: 'Отменить',
      close: 'Закрыть',
      back: 'Назад',
      save: 'Сохранить'
    },
    error: {
      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',
    btn: {
      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: '
    }
  },
  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',
    btn: {
      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: '
    }
  },
  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',
    btn: {
      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: '
    }
  },
  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',
    btn: {
      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: '
    }
  },
  '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'
    },
    error: {
      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',
    btn: {
      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: '
    }
  },
  ja: {
    hint: 'クリック・ドラッグしてファイルをアップロード',
    loading: 'アップロード中...',
    noSupported: 'このブラウザは対応されていません。IE10+かその他の主要ブラウザをお使いください。',
    success: 'アップロード成功',
    fail: 'アップロード失敗',
    preview: 'プレビュー',
    btn: {
      off: 'キャンセル',
      close: '閉じる',
      back: '戻る',
      save: '保存'
    },
    error: {
      onlyImg: '画像のみ',
      outOfSize: '画像サイズが上限を超えています。上限: ',
      lowestPx: '画像が小さすぎます。最小サイズ: '
    }
  }
 }
--- a/src/components/ImageCropper/utils/mimes.js
+++ b/src/components/ImageCropper/utils/mimes.js
@@ -0,0 +1,7 @@
 export default {
  'jpg': 'image/jpeg',
  'png': 'image/png',
  'gif': 'image/gif',
  'svg': 'image/svg+xml',
  'psd': 'image/photoshop'
 }
--- a/src/components/JsonEditor/index.vue
+++ b/src/components/JsonEditor/index.vue
@@ -0,0 +1,71 @@
 <template>
  <div class="json-editor">
    <textarea ref="textarea"></textarea>
  </div>
 </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'
 export default {
  name: 'jsonEditor',
  data() {
    return {
      jsonEditor: false
    }
  },
  props: ['value'],
  watch: {
    value(value) {
      const editor_value = this.jsonEditor.getValue()
      if (value !== editor_value) {
        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',
      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())
    })
  },
  methods: {
    getValue() {
      return this.jsonEditor.getValue()
    }
  }
 }
 </script>
 <style scoped>
 .json-editor{
  height: 100%;
  position: relative;
 }
 .json-editor >>> .CodeMirror {
  height: auto;
  min-height: 300px;
 }
 .json-editor >>> .CodeMirror-scroll{
  min-height: 300px;
 }
 .json-editor >>> .cm-s-rubyblue span.cm-string {
  color: #F08047;
 }
 </style>
--- a/src/components/LangSelect/index.vue
+++ b/src/components/LangSelect/index.vue
@@ -0,0 +1,41 @@
 <template>
  <el-dropdown trigger="click" class='international' @command="handleSetLanguage">
    <div>
      <svg-icon class-name='international-icon' icon-class="language" />
    </div>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item command="zh" :disabled="language==='zh'">中文</el-dropdown-item>
      <el-dropdown-item command="en" :disabled="language==='en'">English</el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
 </template>
 <script>
 export default {
  computed: {
    language() {
      return this.$store.getters.language
    }
  },
  methods: {
    handleSetLanguage(lang) {
      this.$i18n.locale = lang
      this.$store.dispatch('setLanguage', lang)
      this.$message({
        message: 'switch language success',
        type: 'success'
      })
    }
  }
 }
 </script>
 <style scoped>
 .international-icon {
  font-size: 20px;
  cursor: pointer;
  vertical-align: -5px!important;
 }
 </style>
--- a/src/components/MDinput/index.vue
+++ b/src/components/MDinput/index.vue
@@ -1,297 +1,278 @@
 <template>
-    <div class="material-input__component" :class="computedClasses">
+  <div class="material-input__component" :class="computedClasses">
-        <input v-if="type === 'email'" type="email" class="material-input" :name="name" :id="id" :placeholder="placeholder" v-model="valueCopy"
+    <div :class="{iconClass:icon}">
-            :readonly="readonly" :disabled="disabled" :autocomplete="autocomplete" :required="required" @focus="handleFocus(true)"
+      <i class="el-input__icon material-input__icon" :class="['el-icon-' + icon]" v-if="icon"></i>
-            @blur="handleFocus(false)" @input="handleModelInput">
+      <input v-if="type === 'email'" type="email" class="material-input" :name="name" :placeholder="fillPlaceHolder" v-model="currentValue"
-        <input v-if="type === 'url'" type="url" class="material-input" :name="name" :id="id" :placeholder="placeholder" v-model="valueCopy"
+        :readonly="readonly" :disabled="disabled" :autoComplete="autoComplete" :required="required" @focus="handleMdFocus"
-            :readonly="readonly" :disabled="disabled" :autocomplete="autocomplete" :required="required" @focus="handleFocus(true)"
+        @blur="handleMdBlur" @input="handleModelInput">
-            @blur="handleFocus(false)" @input="handleModelInput">
+      <input v-if="type === 'url'" type="url" class="material-input" :name="name" :placeholder="fillPlaceHolder" v-model="currentValue"
-        <input v-if="type === 'number'" type="number" class="material-input" :name="name" :id="id" :placeholder="placeholder" v-model="valueCopy"
+        :readonly="readonly" :disabled="disabled" :autoComplete="autoComplete" :required="required" @focus="handleMdFocus"
-            :readonly="readonly" :disabled="disabled" :autocomplete="autocomplete" :max="max" :min="min" :minlength="minlength"
+        @blur="handleMdBlur" @input="handleModelInput">
-            :maxlength="maxlength" :required="required" @focus="handleFocus(true)" @blur="handleFocus(false)" @input="handleModelInput">
+      <input v-if="type === 'number'" type="number" class="material-input" :name="name" :placeholder="fillPlaceHolder" v-model="currentValue"
-        <input v-if="type === 'password'" type="password" class="material-input" :name="name" :id="id" :placeholder="placeholder"
+        :step="step" :readonly="readonly" :disabled="disabled" :autoComplete="autoComplete" :max="max" :min="min" :minlength="minlength"
-            v-model="valueCopy" :readonly="readonly" :disabled="disabled" :autocomplete="autocomplete" :max="max" :min="min"
+        :maxlength="maxlength" :required="required" @focus="handleMdFocus" @blur="handleMdBlur" @input="handleModelInput">
-            :required="required" @focus="handleFocus(true)" @blur="handleFocus(false)" @input="handleModelInput">
+      <input v-if="type === 'password'" type="password" class="material-input" :name="name" :placeholder="fillPlaceHolder" v-model="currentValue"
-        <input v-if="type === 'tel'" type="tel" class="material-input" :name="name" :id="id" :placeholder="placeholder" v-model="valueCopy"
+        :readonly="readonly" :disabled="disabled" :autoComplete="autoComplete" :max="max" :min="min" :required="required" @focus="handleMdFocus"
-            :readonly="readonly" :disabled="disabled" :autocomplete="autocomplete" :required="required" @focus="handleFocus(true)"
+        @blur="handleMdBlur" @input="handleModelInput">
-            @blur="handleFocus(false)" @input="handleModelInput">
+      <input v-if="type === 'tel'" type="tel" class="material-input" :name="name" :placeholder="fillPlaceHolder" v-model="currentValue"
-        <input v-if="type === 'text'" type="text" class="material-input" :name="name" :id="id" :placeholder="placeholder" v-model="valueCopy"
+        :readonly="readonly" :disabled="disabled" :autoComplete="autoComplete" :required="required" @focus="handleMdFocus"
-            :readonly="readonly" :disabled="disabled" :autocomplete="autocomplete" :minlength="minlength" :maxlength="maxlength"
+        @blur="handleMdBlur" @input="handleModelInput">
-            :required="required" @focus="handleFocus(true)" @blur="handleFocus(false)" @input="handleModelInput">
+      <input v-if="type === 'text'" type="text" class="material-input" :name="name" :placeholder="fillPlaceHolder" v-model="currentValue"
-
+        :readonly="readonly" :disabled="disabled" :autoComplete="autoComplete" :minlength="minlength" :maxlength="maxlength"
-        <span class="material-input-bar"></span>
+        :required="required" @focus="handleMdFocus" @blur="handleMdBlur" @input="handleModelInput">
-
+      <span class="material-input-bar"></span>
-        <label class="material-label">
+      <label class="material-label">
-            <slot></slot>
+        <slot></slot>
-        </label>
+      </label>
        <div v-if="errorMessages" class="material-errors">
            <div v-for="error in computedErrors" class="material-error">
                {{ error }}
            </div>
        </div>
    </div>
  </div>
 </template>
 <script>
-    // source:https://github.com/wemake-services/vue-material-input/blob/master/src/components/MaterialInput.vue
+// source:https://github.com/wemake-services/vue-material-input/blob/master/src/components/MaterialInput.vue
-    export default {
+
-      name: 'material-input',
+export default {
-      computed: {
+  name: 'md-input',
-        computedErrors() {
+  props: {
-          return typeof this.errorMessages === 'string'
+    icon: String,
-                        ? [this.errorMessages] : this.errorMessages
+    name: String,
-        },
+    type: {
-        computedClasses() {
+      type: String,
-          return {
+      default: 'text'
-            'material--active': this.focus,
+    },
-            'material--disabled': this.disabled,
+    value: [String, Number],
-            'material--has-errors': Boolean(!this.valid || (this.errorMessages && this.errorMessages.length)),
+    placeholder: String,
-            'material--raised': Boolean(this.focus || this.valueCopy || // has value
+    readonly: Boolean,
-                            (this.placeholder && !this.valueCopy)) // has placeholder
+    disabled: Boolean,
-          }
+    min: String,
    max: String,
    step: String,
    minlength: Number,
    maxlength: Number,
    required: {
      type: Boolean,
      default: true
    },
    autoComplete: {
      type: String,
      default: 'off'
    },
    validateEvent: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    computedClasses() {
      return {
        'material--active': this.focus,
        'material--disabled': this.disabled,
        'material--raised': Boolean(this.focus || this.currentValue) // has value
      }
    }
  },
  watch: {
    value(newValue) {
      this.currentValue = newValue
    }
  },
  data() {
    return {
      currentValue: this.value,
      focus: false,
      fillPlaceHolder: null
    }
  },
  methods: {
    handleModelInput(event) {
      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])
        }
-      },
+      }
-      data() {
+      this.$emit('change', value)
-        return {
+    },
-          valueCopy: null,
+    handleMdFocus(event) {
-          focus: false,
+      this.focus = true
-          valid: true
+      this.$emit('focus', event)
-        }
+      if (this.placeholder && this.placeholder !== '') {
-      },
+        this.fillPlaceHolder = this.placeholder
-      beforeMount() {
+      }
-        // Here we are following the Vue2 convention on custom v-model:
+    },
-        // https://github.com/vuejs/vue/issues/2873#issuecomment-223759341
+    handleMdBlur(event) {
-        this.copyValue(this.value)
+      this.focus = false
-      },
+      this.$emit('blur', event)
-      methods: {
+      this.fillPlaceHolder = null
-        handleModelInput(event) {
+      if (this.$parent.$options.componentName === 'ElFormItem') {
-          this.$emit('input', event.target.value, event)
+        if (this.validateEvent) {
-          this.handleValidation()
+          this.$parent.$emit('el.form.blur', [this.currentValue])
        },
        handleFocus(focused) {
          this.focus = focused
        },
        handleValidation() {
          this.valid = this.$el ? this.$el.querySelector('.material-input').validity.valid : this.valid
        },
        copyValue(value) {
          this.valueCopy = value
          this.handleValidation()
        }
      },
      watch: {
        value(newValue) {
          this.copyValue(newValue)
        }
      },
      props: {
        id: {
          type: String,
          default: null
        },
        name: {
          type: String,
          default: null
        },
        type: {
          type: String,
          default: 'text'
        },
        value: {
          default: null
        },
        placeholder: {
          type: String,
          default: null
        },
        readonly: {
          type: Boolean,
          default: false
        },
        disabled: {
          type: Boolean,
          default: false
        },
        min: {
          type: String,
          default: null
        },
        max: {
          type: String,
          default: null
        },
        minlength: {
          type: Number,
          default: null
        },
        maxlength: {
          type: Number,
          default: null
        },
        required: {
          type: Boolean,
          default: true
        },
        autocomplete: {
          type: String,
          default: 'off'
        },
        errorMessages: {
          type: [Array, String],
          default: null
        }
      }
    }
  }
 }
 </script>
 <style rel="stylesheet/scss" lang="scss" scoped>
-    // Fonts:
+  // Fonts:
-    $font-size-base: 16px;
+  $font-size-base: 16px;
-    $font-size-small: 18px;
+  $font-size-small: 18px;
-    $font-size-smallest: 12px;
+  $font-size-smallest: 12px;
-    $font-weight-normal: normal;
+  $font-weight-normal: normal;
-    // Utils
+  $font-weight-bold: bold;
-    $spacer: 12px;
+  $apixel: 1px;
-    $transition: 0.2s ease all;
+  // Utils
-    // Base clases:
+  $spacer: 12px;
-    %base-bar-pseudo {
+  $transition: 0.2s ease all;
-        content: '';
+  $index: 0px;
-        height: 1px;
+  $index-has-icon: 30px;
-        width: 0;
+  // Theme:
-        bottom: 0;
+  $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;
-        transition: $transition;
+        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%;
        }
      }
    }
  }
-    // Mixins:
+  .material-input__component {
-    @mixin slided-top() {
+    background: $color-white;
-        top: -2 * $spacer;
+    .material-input {
-        font-size: $font-size-small;
+      background: none;
      color: $color-black;
      text-indent: $index;
      border-bottom: 1px solid $color-grey-light;
    }
-
+    .material-label {
-    // Component:
+      color: $color-grey;
    .material-input__component {
        /*margin-top: 30px;*/
        position: relative;
        * {
            box-sizing: border-box;
        }
        .material-input {
            font-size: $font-size-base;
            padding: $spacer $spacer $spacer $spacer / 2;
            display: block;
            width: 100%;
            border: none;
            border-radius: 0;
            &:focus {
                outline: none;
                border: none;
                border-bottom: 1px solid transparent; // fixes the height issue
            }
        }
        .material-label {
            font-size: $font-size-base;
            font-weight: $font-weight-normal;
            position: absolute;
            pointer-events: none;
            left: 0;
            top: $spacer;
            transition: $transition;
        }
        .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%;
                }
            }
        }
        // Errors:
        .material-errors {
            position: relative;
            overflow: hidden;
            .material-error {
                font-size: $font-size-smallest;
                line-height: $font-size-smallest + 2px;
                overflow: hidden;
                margin-top: 0;
                padding-top: $spacer / 2;
                padding-right: $spacer / 2;
                padding-left: 0;
            }
        }
    }
-
+    .material-input-bar {
-    // Theme:
+      &:before,
-    $color-white: white;
+      &:after {
-    $color-grey: #9E9E9E;
+        background: $color-blue;
-    $color-grey-light: #E0E0E0;
+      }
    $color-blue: #2196F3;
    $color-red: #F44336;
    $color-black: black;
    .material-input__component {
        background: $color-white;
        .material-input {
            background: none;
            color: $color-black;
            text-indent: 30px;
            border-bottom: 1px solid $color-grey-light;
        }
        .material-label {
            color: $color-grey;
        }
        .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: $color-red;
                }
            }
            .material-errors {
                color: $color-red;
            }
        }
    }
    // 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;
        }
      }
    }
  }
 </style>
--- a/src/components/MarkdownEditor/index.vue
+++ b/src/components/MarkdownEditor/index.vue
@@ -1,20 +1,21 @@
 <template>
-  <div class='simplemde-container' :style="{height:height+'px',zIndex:zIndex}">
+  <div class="simplemde-container" :style="{height:height+'px',zIndex:zIndex}">
-    <textarea :id='id'>
+    <textarea :id="id">
    </textarea>
  </div>
 </template>
 <script>
 import 'font-awesome/css/font-awesome.min.css'
 import 'simplemde/dist/simplemde.min.css'
 import SimpleMDE from 'simplemde'
 export default {
-  name: 'Sticky',
+  name: 'simplemde-md',
  props: {
    value: String,
    id: {
-      type: String,
+      type: String
      default: 'markdown-editor'
    },
    autofocus: {
      type: Boolean,
@@ -40,17 +41,18 @@ export default {
    return {
      simplemde: null,
      hasChange: false
-    };
+    }
  },
  watch: {
    value(val) {
-      if (val === this.simplemde.value() && !this.hasChange) return;
+      if (val === this.simplemde.value() && !this.hasChange) return
-      this.simplemde.value(val);
+      this.simplemde.value(val)
    }
  },
  mounted() {
    this.simplemde = new SimpleMDE({
-      element: document.getElementById(this.id),
+      element: document.getElementById(this.id || 'markdown-editor-' + +new Date()),
      autoDownloadFontAwesome: false,
      autofocus: this.autofocus,
      toolbar: this.toolbar,
      spellChecker: false,
@@ -59,53 +61,56 @@ export default {
      },
      // hideIcons: ['guide', 'heading', 'quote', 'image', 'preview', 'side-by-side', 'fullscreen'],
      placeholder: this.placeholder
-    });
+    })
    if (this.value) {
-      this.simplemde.value(this.value);
+      this.simplemde.value(this.value)
    }
    this.simplemde.codemirror.on('change', () => {
      if (this.hasChange) {
        this.hasChange = true
      }
-      this.$emit('input', this.simplemde.value());
+      this.$emit('input', this.simplemde.value())
-    });
+    })
  },
  destroyed() {
-    this.simplemde = null;
+    this.simplemde.toTextArea()
    this.simplemde = null
  }
-};
+}
 </script>
-<style>
+<style scoped>
-  .simplemde-container .CodeMirror {
+.simplemde-container>>>.CodeMirror {
-    /*height: 150px;*/
+  min-height: 150px;
-    min-height: 150px;
+  line-height: 20px;
-  }
+}
  .simplemde-container .CodeMirror-scroll{
     min-height: 150px;
  }
- .simplemde-container .CodeMirror-code{
+.simplemde-container>>>.CodeMirror-scroll {
-   padding-bottom: 40px;
+  min-height: 150px;
- }
+}
  .simplemde-container  .editor-statusbar {
    display: none;
  }
-  .simplemde-container .CodeMirror .CodeMirror-code .cm-link {
+.simplemde-container>>>.CodeMirror-code {
-    color: #1482F0;
+  padding-bottom: 40px;
-  }
+}
-  .simplemde-container .CodeMirror .CodeMirror-code .cm-string.cm-url {
+.simplemde-container>>>.editor-statusbar {
-    color: #2d3b4d;
+  display: none;
-    font-weight: bold;
+}
  }
-  .simplemde-container .CodeMirror .CodeMirror-code .cm-formatting-link-string.cm-url {
+.simplemde-container>>>.CodeMirror .CodeMirror-code .cm-link {
-    padding: 0 2px;
+  color: #1890ff;
-    font-weight: bold;
+}
-    color: #E61E1E;
+
-  }
+.simplemde-container>>>.CodeMirror .CodeMirror-code .cm-string.cm-url {
  color: #2d3b4d;
 }
 .simplemde-container>>>.CodeMirror .CodeMirror-code .cm-formatting-link-string.cm-url {
  padding: 0 2px;
  color: #E61E1E;
 }
 .simplemde-container >>> .editor-toolbar.fullscreen,
 .simplemde-container >>> .CodeMirror-fullscreen {
  z-index: 1003;
 }
 </style>
--- a/src/components/PanThumb/index.vue
+++ b/src/components/PanThumb/index.vue
@@ -1,145 +1,140 @@
 <template>
-    <div class="pan-item" :style="{zIndex:zIndex,height:height,width:width}">
+  <div class="pan-item" :style="{zIndex:zIndex,height:height,width:width}">
-        <div class="pan-info">
+    <div class="pan-info">
-            <div class="pan-info-roles-container">
+      <div class="pan-info-roles-container">
-                <slot></slot>
+        <slot></slot>
-            </div>
+      </div>
        </div>
        <img class="pan-thumb" :src="image">
    </div>
    <img class="pan-thumb" :src="image">
  </div>
 </template>
 <script>
-    export default {
+export default {
-      name: 'PanThumb',
+  name: 'PanThumb',
-      props: {
+  props: {
-        image: {
+    image: {
-          type: String,
+      type: String,
-          required: true
+      required: true
-        },
+    },
-        zIndex: {
+    zIndex: {
-          type: Number,
+      type: Number,
-          default: 100
+      default: 1
-        },
+    },
-        width: {
+    width: {
-          type: String,
+      type: String,
-          default: '150px'
+      default: '150px'
-        },
+    },
-        height: {
+    height: {
-          type: String,
+      type: String,
-          default: '150px'
+      default: '150px'
-        }
+    }
-      },
+  }
-      data() {
+}
        return {};
      }
    };
 </script>
 <style scoped>
-    .pan-item {
+.pan-item {
-        width: 200px;
+  width: 200px;
-        height: 200px;
+  height: 200px;
-        border-radius: 50%;
+  border-radius: 50%;
-        display: inline-block;
+  display: inline-block;
-        position: relative;
+  position: relative;
-        cursor: default;
+  cursor: default;
-        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-    }
+}
-    .pan-info-roles-container {
+.pan-info-roles-container {
-        padding: 20px;
+  padding: 20px;
-        text-align: center;
+  text-align: center;
-    }
+}
-    .pan-thumb {
+.pan-thumb {
-        width: 100%;
+  width: 100%;
-        height: 100%;
+  height: 100%;
-        background-size: 100%;
+  background-size: 100%;
-        border-radius: 50%;
+  border-radius: 50%;
-        overflow: hidden;
+  overflow: hidden;
-        position: absolute;
+  position: absolute;
-        transform-origin: 95% 40%;
+  transform-origin: 95% 40%;
-        transition: all 0.3s ease-in-out;
+  transition: all 0.3s ease-in-out;
-    }
+}
-    .pan-thumb:after {
+.pan-thumb:after {
-        content: '';
+  content: '';
-        width: 8px;
+  width: 8px;
-        height: 8px;
+  height: 8px;
-        position: absolute;
+  position: absolute;
-        border-radius: 50%;
+  border-radius: 50%;
-        top: 40%;
+  top: 40%;
-        left: 95%;
+  left: 95%;
-        margin: -4px 0 0 -4px;
+  margin: -4px 0 0 -4px;
-        background: radial-gradient(ellipse at center, rgba(14, 14, 14, 1) 0%, rgba(125, 126, 125, 1) 100%);
+  background: radial-gradient(ellipse at center, rgba(14, 14, 14, 1) 0%, rgba(125, 126, 125, 1) 100%);
-        box-shadow: 0 0 1px rgba(255, 255, 255, 0.9);
+  box-shadow: 0 0 1px rgba(255, 255, 255, 0.9);
-    }
+}
-    .pan-info {
+.pan-info {
-        position: absolute;
+  position: absolute;
-        width: inherit;
+  width: inherit;
-        height: inherit;
+  height: inherit;
-        border-radius: 50%;
+  border-radius: 50%;
-        overflow: hidden;
+  overflow: hidden;
-        box-shadow: inset 0 0 0 5px rgba(0, 0, 0, 0.05);
+  box-shadow: inset 0 0 0 5px rgba(0, 0, 0, 0.05);
-    }
+}
-    .pan-info h3 {
+.pan-info h3 {
-        color: #fff;
+  color: #fff;
-        text-transform: uppercase;
+  text-transform: uppercase;
-        position: relative;
+  position: relative;
-        letter-spacing: 2px;
+  letter-spacing: 2px;
-        font-size: 18px;
+  font-size: 18px;
-        margin: 0 60px;
+  margin: 0 60px;
-        padding: 22px 0 0 0;
+  padding: 22px 0 0 0;
-        height: 85px;
+  height: 85px;
-        font-family: 'Open Sans', Arial, sans-serif;
+  font-family: 'Open Sans', Arial, sans-serif;
-        text-shadow: 0 0 1px #fff,
+  text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.3);
-        0 1px 2px rgba(0, 0, 0, 0.3);
+}
    }
-    .pan-info p {
+.pan-info p {
-        color: #fff;
+  color: #fff;
-        padding: 10px 5px;
+  padding: 10px 5px;
-        font-style: italic;
+  font-style: italic;
-        margin: 0 30px;
+  margin: 0 30px;
-        font-size: 12px;
+  font-size: 12px;
-        border-top: 1px solid rgba(255, 255, 255, 0.5);
+  border-top: 1px solid rgba(255, 255, 255, 0.5);
-    }
+}
-    .pan-info p a {
+.pan-info p a {
-        display: block;
+  display: block;
-        color: #333;
+  color: #333;
-        width: 80px;
+  width: 80px;
-        height: 80px;
+  height: 80px;
-        background: rgba(255, 255, 255, 0.3);
+  background: rgba(255, 255, 255, 0.3);
-        border-radius: 50%;
+  border-radius: 50%;
-        color: #fff;
+  color: #fff;
-        font-style: normal;
+  font-style: normal;
-        font-weight: 700;
+  font-weight: 700;
-        text-transform: uppercase;
+  text-transform: uppercase;
-        font-size: 9px;
+  font-size: 9px;
-        letter-spacing: 1px;
+  letter-spacing: 1px;
-        padding-top: 24px;
+  padding-top: 24px;
-        margin: 7px auto 0;
+  margin: 7px auto 0;
-        font-family: 'Open Sans', Arial, sans-serif;
+  font-family: 'Open Sans', Arial, sans-serif;
-        opacity: 0;
+  opacity: 0;
-        transition: transform 0.3s ease-in-out 0.2s,
+  transition: transform 0.3s ease-in-out 0.2s, opacity 0.3s ease-in-out 0.2s, background 0.2s linear 0s;
-        opacity 0.3s ease-in-out 0.2s,
+  transform: translateX(60px) rotate(90deg);
-        background 0.2s linear 0s;
+}
        transform: translateX(60px) rotate(90deg);
    }
-    .pan-info p a:hover {
+.pan-info p a:hover {
-        background: rgba(255, 255, 255, 0.5);
+  background: rgba(255, 255, 255, 0.5);
-    }
+}
-    .pan-item:hover .pan-thumb {
+.pan-item:hover .pan-thumb {
-        transform: rotate(-110deg);
+  transform: rotate(-110deg);
-    }
+}
-    .pan-item:hover .pan-info p a {
+.pan-item:hover .pan-info p a {
-        opacity: 1;
+  opacity: 1;
-        transform: translateX(0px) rotate(0deg);
+  transform: translateX(0px) rotate(0deg);
-    }
+}
 </style>
--- a/src/components/Screenfull/index.vue
+++ b/src/components/Screenfull/index.vue
@@ -1,57 +1,65 @@
 <template>
-
+  <div>
-<svg @click='click' class="icon screenfull" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" t="1497503607356"  viewBox="0 0 1024 1024" version="1.1" p-id="4109" :fill='fill' :width="width" :height="height"><path d="M604.157933 512l204.484208 204.484208 82.942037-82.942037c10.364045-10.952446 26.498514-13.83817 40.309054-8.067746 13.249769 5.742794 22.465664 18.99154 22.465664 33.977859l0 258.042008c0 20.168342-16.695241 36.863582-36.863582 36.863582L659.452283 954.357873c-14.986319 0-28.236088-9.215896-33.977859-23.025413-5.770424-13.249769-2.885723-29.384237 8.067746-39.748283l82.942037-82.942037L512 604.157933 307.515792 808.642141l82.942037 82.942037c10.952446 10.364045 13.83817 26.498514 8.067746 39.748283-5.742794 13.809517-18.99154 23.025413-33.977859 23.025413L106.504686 954.357873c-20.168342 0-36.863582-16.695241-36.863582-36.863582L69.641103 659.452283c0-14.986319 9.215896-28.236088 23.025413-33.977859 13.249769-5.770424 29.384237-2.8847 39.748283 8.067746l82.942037 82.942037 204.484208-204.484208L215.357859 307.515792l-82.942037 82.942037c-6.890944 6.918573-16.10684 10.952446-25.911136 10.952446-4.593622 0-9.804297-1.14815-13.83817-2.8847-13.809517-5.742794-23.025413-18.99154-23.025413-33.977859L69.641103 106.504686c0-20.168342 16.695241-36.863582 36.863582-36.863582L364.546693 69.641103c14.986319 0 28.236088 9.215896 33.977859 23.025413 5.770424 13.249769 2.8847 29.384237-8.067746 39.748283l-82.942037 82.942037 204.484208 204.484208L716.484208 215.357859l-82.942037-82.942037c-10.952446-10.364045-13.83817-26.498514-8.067746-39.748283 5.742794-13.809517 18.99154-23.025413 33.977859-23.025413l258.042008 0c20.168342 0 36.863582 16.695241 36.863582 36.863582l0 258.042008c0 14.986319-9.215896 28.236088-22.465664 33.977859-4.593622 1.736551-9.804297 2.8847-14.397918 2.8847-9.804297 0-19.020192-4.033873-25.911136-10.952446l-82.942037-82.942037L604.157933 512z" p-id="4110"/></svg>
+    <svg t="1508738709248" @click='click' class="screenfull-svg" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
      p-id="2069" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32">
      <path d="M333.493443 428.647617 428.322206 333.832158 262.572184 168.045297 366.707916 64.444754 64.09683 64.444754 63.853283 366.570793 167.283957 262.460644Z"
        p-id="2070"></path>
      <path d="M854.845439 760.133334 688.61037 593.95864 593.805144 688.764889 759.554142 854.56096 655.44604 958.161503 958.055079 958.161503 958.274066 656.035464Z"
        p-id="2071"></path>
      <path d="M688.535669 428.550403 854.31025 262.801405 957.935352 366.921787 957.935352 64.34754 655.809313 64.081481 759.919463 167.535691 593.70793 333.731874Z"
        p-id="2072"></path>
      <path d="M333.590658 594.033341 167.8171 759.804852 64.218604 655.67219 64.218604 958.270996 366.342596 958.502263 262.234493 855.071589 428.421466 688.86108Z"
        p-id="2073"></path>
    </svg>
  </div>
 </template>
 <script>
-    import screenfull from 'screenfull';
+import screenfull from 'screenfull'
    export default {
      name: 'hamburger',
      props: {
        width: {
          type: Number,
          default: 22
        },
        height: {
          type: Number,
          default: 22
        },
        fill: {
          type: String,
          default: '#48576a'
        }
      },
      data() {
        return {
          isFullscreen: false
        }
      },
      methods: {
        click() {
          if (!screenfull.enabled) {
            this.$message({
              message: 'you browser can not work',
              type: 'warning'
            });
            return false;
          }
-          if (this.isFullscreen) {
+export default {
-            screenfull.exit();
+  name: 'screenfull',
-            this.isFullscreen = false;
+  props: {
-          } else {
+    width: {
-            screenfull.request();
+      type: Number,
-            this.isFullscreen = true;
+      default: 22
-          }
+    },
-        }
+    height: {
-      }
+      type: Number,
      default: 22
    },
    fill: {
      type: String,
      default: '#48576a'
    }
  },
  data() {
    return {
      isFullscreen: false
    }
  },
  methods: {
    click() {
      if (!screenfull.enabled) {
        this.$message({
          message: 'you browser can not work',
          type: 'warning'
        })
        return false
      }
      screenfull.toggle()
    }
  }
 }
 </script>
 <style scoped>
-    .screenfull {
+.screenfull-svg {
-        display: inline-block;
+  display: inline-block;
-        cursor: pointer;
+  cursor: pointer;
-        vertical-align: -0.15em;
+  fill: #5a5e66;;
-    }
+  width: 20px;
  height: 20px;
  vertical-align: 10px;
 }
 </style>
--- a/src/components/ScrollBar/index.vue
+++ b/src/components/ScrollBar/index.vue
@@ -0,0 +1,57 @@
 <template>
  <div class="scroll-container" ref="scrollContainer" @wheel.prevent="handleScroll" >
    <div class="scroll-wrapper" ref="scrollWrapper" :style="{top: top + 'px'}">
      <slot></slot>
    </div>
  </div>
 </template>
 <script>
 const delta = 15
 export default {
  name: 'scrollBar',
  data() {
    return {
      top: 0
    }
  },
  methods: {
    handleScroll(e) {
      const eventDelta = e.wheelDelta || -e.deltaY * 3
      const $container = this.$refs.scrollContainer
      const $containerHeight = $container.offsetHeight
      const $wrapper = this.$refs.scrollWrapper
      const $wrapperHeight = $wrapper.offsetHeight
      if (eventDelta > 0) {
        this.top = Math.min(0, this.top + eventDelta)
      } else {
        if ($containerHeight - delta < $wrapperHeight) {
          if (this.top < -($wrapperHeight - $containerHeight + delta)) {
            this.top = this.top
          } else {
            this.top = Math.max(this.top + eventDelta, $containerHeight - $wrapperHeight - delta)
          }
        } else {
          this.top = 0
        }
      }
    }
  }
 }
 </script>
 <style rel="stylesheet/scss" lang="scss" scoped>
@import '../../styles/variables.scss';
 .scroll-container {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: $menuBg;
  .scroll-wrapper {
    position: absolute;
     width: 100%!important;
  }
 }
 </style>
--- a/src/components/ScrollPane/index.vue
+++ b/src/components/ScrollPane/index.vue
@@ -0,0 +1,72 @@
 <template>
  <div class="scroll-container" ref="scrollContainer" @wheel.prevent="handleScroll">
    <div class="scroll-wrapper" ref="scrollWrapper" :style="{left: left + 'px'}">
      <slot></slot>
    </div>
  </div>
 </template>
 <script>
 const padding = 15 // tag's padding
 export default {
  name: 'scrollPane',
  data() {
    return {
      left: 0
    }
  },
  methods: {
    handleScroll(e) {
      const eventDelta = e.wheelDelta || -e.deltaY * 3
      const $container = this.$refs.scrollContainer
      const $containerWidth = $container.offsetWidth
      const $wrapper = this.$refs.scrollWrapper
      const $wrapperWidth = $wrapper.offsetWidth
      if (eventDelta > 0) {
        this.left = Math.min(0, this.left + eventDelta)
      } else {
        if ($containerWidth - padding < $wrapperWidth) {
          if (this.left < -($wrapperWidth - $containerWidth + padding)) {
            this.left = this.left
          } else {
            this.left = Math.max(this.left + eventDelta, $containerWidth - $wrapperWidth - padding)
          }
        } else {
          this.left = 0
        }
      }
    },
    moveToTarget($target) {
      const $container = this.$refs.scrollContainer
      const $containerWidth = $container.offsetWidth
      const $targetLeft = $target.offsetLeft
      const $targetWidth = $target.offsetWidth
      if ($targetLeft < -this.left) {
        // tag in the left
        this.left = -$targetLeft + padding
      } else if ($targetLeft + padding > -this.left && $targetLeft + $targetWidth < -this.left + $containerWidth - padding) {
        // tag in the current view
        // eslint-disable-line
      } else {
        // tag in the right
        this.left = -($targetLeft - ($containerWidth - $targetWidth) + padding)
      }
    }
  }
 }
 </script>
 <style rel="stylesheet/scss" lang="scss" scoped>
 .scroll-container {
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  width: 100%;
  .scroll-wrapper {
    position: absolute;
  }
 }
 </style>
--- a/src/components/Share/dropdownMenu.vue
+++ b/src/components/Share/dropdownMenu.vue
@@ -0,0 +1,97 @@
 <template>
  <div class="share-dropdown-menu" :class="{active:isActive}">
    <div class="share-dropdown-menu-wrapper">
      <span class="share-dropdown-menu-title" @click.self="clickTitle">{{title}}</span>
      <div class="share-dropdown-menu-item" v-for="(item,index) of items" :key='index'>
        <a v-if="item.href" :href="item.href" target="_blank">{{item.title}}</a>
        <span v-else>{{item.title}}</span>
      </div>
    </div>
  </div>
 </template>
 <script>
 export default {
  props: {
    items: {
      type: Array
    },
    title: {
      type: String,
      default: 'vue'
    }
  },
  data() {
    return {
      isActive: false
    }
  },
  methods: {
    clickTitle() {
      this.isActive = !this.isActive
    }
  }
 }
 </script>
 <style rel="stylesheet/scss" lang="scss" >
 $n: 6; //和items.length 相同
 $t: .1s;
 .share-dropdown-menu {
  width: 250px;
  position: relative;
  z-index: 1;
  &-title {
    width: 100%;
    display: block;
    cursor: pointer;
    background: black;
    color: white;
    height: 60px;
    line-height: 60px;
    font-size: 20px;
    text-align: center;
    z-index: 2;
    transform: translate3d(0,0,0);
  }
  &-wrapper {
    position: relative;
  }
  &-item {
    text-align: center;
    position: absolute;
    width: 100%;
    background: #e0e0e0;
    line-height: 60px;
    height: 60px;
    cursor: pointer;
    font-size: 20px;
    opacity: 1;
    transition: transform 0.28s ease;
    &:hover {
      background: black;
      color: white;
    }
    @for $i from 1 through $n {
      &:nth-of-type(#{$i}) {
        z-index: -1;
        transition-delay: $i*$t;
        transform: translate3d(0, -60px, 0);
      }
    }
  }
  &.active {
    .share-dropdown-menu-wrapper {
      z-index: 1;
    }
    .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);
        }
      }
    }
  }
 }
 </style>
--- a/src/components/SplitPane/Pane.vue
+++ b/src/components/SplitPane/Pane.vue
@@ -1,41 +0,0 @@
 <template>
    <div :class="classes">
        <slot></slot>
    </div>
 </template>
 <script>
    export default {
      name: 'Pane',
      data() {
        const classes = ['Pane', this.$parent.split, 'className'];
        return {
          classes: classes.join(' '),
          percent: 50
        }
      }
    }
 </script>
 <style>
    .splitter-pane.vertical.splitter-paneL{
        position: absolute;
        left: 0px;
        height: 100%;
    }
    .splitter-pane.vertical.splitter-paneR{
        position: absolute;
        right: 0px;
        height: 100%;
    }
    .splitter-pane.horizontal.splitter-paneL{
        position: absolute;
        top: 0px;
        width: 100%;
    }
    .splitter-pane.horizontal.splitter-paneR{
        position: absolute;
        bottom: 0px;
        width: 100%;
    }
 </style>
--- a/src/components/SplitPane/Resizer.vue
+++ b/src/components/SplitPane/Resizer.vue
@@ -1,71 +0,0 @@
 <template>
    <div :class="classes" @mousedown="onMouseDown"></div>
 </template>
 <script>
    export default {
      props: {
        split: {
          validator(value) {
            return ['vertical', 'horizontal'].indexOf(value) >= 0
          },
          required: true
        },
        onMouseDown: {
          type: Function,
          required: true
        }
      },
      data() {
        const classes = ['Resizer', this.split, 'className'];
        return {
          classes: classes.join(' ')
        }
      }
    }
 </script>
 <style scoped>
    .Resizer {
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        background: #000;
        position: absolute;
        opacity: .2;
        z-index: 1;
        /*-moz-background-clip: padding;*/
        /*-webkit-background-clip: padding;*/
        /*background-clip: padding-box;*/
    }
    /*.Resizer:hover {*/
        /*-webkit-transition: all 2s ease;*/
        /*transition: all 2s ease;*/
    /*}*/
    .Resizer.horizontal {
        height: 11px;
        margin: -5px 0;
        border-top: 5px solid rgba(255, 255, 255, 0);
        border-bottom: 5px solid rgba(255, 255, 255, 0);
        cursor: row-resize;
        width: 100%;
    }
    .Resizer.horizontal:hover {
        border-top: 5px solid rgba(0, 0, 0, 0.5);
        border-bottom: 5px solid rgba(0, 0, 0, 0.5);
    }
    .Resizer.vertical {
        width: 11px;
        height: 100%;
        border-left: 5px solid rgba(255, 255, 255, 0);
        border-right: 5px solid rgba(255, 255, 255, 0);
        cursor: col-resize;
    }
    .Resizer.vertical:hover {
        border-left: 5px solid rgba(0, 0, 0, 0.5);
        border-right: 5px solid rgba(0, 0, 0, 0.5);
    }
 </style>
--- a/src/components/SplitPane/index.vue
+++ b/src/components/SplitPane/index.vue
@@ -1,111 +0,0 @@
 <template>
    <div ref :style="{ cursor, userSelect}" class="vue-splitter-container clearfix" @mouseup="onMouseUp"
         @mousemove="onMouseMove">
        <Pane class="splitter-pane splitter-paneL" :split="split" :style="{ [type]: percent+'%'}">
            <slot name="paneL"></slot>
        </Pane>
        <Resizer :style="{ [resizeType]: percent+'%'}" :split="split" :onMouseDown="onMouseDown"
                 @click="onClick"></Resizer>
        <Pane class="splitter-pane splitter-paneR" :split="split" :style="{ [type]: 100-percent+'%'}">
            <slot name="paneR"></slot>
        </Pane>
    </div>
 </template>
 <style scoped>
    .clearfix:after {
        visibility: hidden;
        display: block;
        font-size: 0;
        content: " ";
        clear: both;
        height: 0;
    }
    .vue-splitter-container {
        height: 100%;
        /*display: flex;*/
        position: relative;
    }
 </style>
 <script>
    import Resizer from './Resizer';
    import Pane from './Pane';
    export default {
      name: 'splitPane',
      components: { Resizer, Pane },
      props: {
        margin: {
          type: Number,
          default: 10
        },
        split: {
          validator(value) {
            return ['vertical', 'horizontal'].indexOf(value) >= 0
          },
          required: true
        }
      },
      data() {
        return {
          active: false,
          hasMoved: false,
          height: null,
          percent: 50,
          type: this.split === 'vertical' ? 'width' : 'height',
          resizeType: this.split === 'vertical' ? 'left' : 'top'
        }
      },
      computed: {
        userSelect() {
          return this.active ? 'none' : ''
        },
        cursor() {
          return this.active ? 'col-resize' : ''
        }
      },
      methods: {
        onClick() {
          if (!this.hasMoved) {
            this.percent = 50;
            this.$emit('resize');
          }
        },
        onMouseDown() {
          this.active = true;
          this.hasMoved = false;
        },
        onMouseUp() {
          this.active = false;
        },
        onMouseMove(e) {
          if (e.buttons === 0 || e.which === 0) {
            this.active = false;
          }
          if (this.active) {
            let offset = 0;
            let target = e.currentTarget;
            if (this.split === 'vertical') {
              while (target) {
                offset += target.offsetLeft;
                target = target.offsetParent;
              }
            } else {
              while (target) {
                offset += target.offsetTop;
                target = target.offsetParent;
              }
            }
            const currentPage = this.split === 'vertical' ? e.pageX : e.pageY;
            const targetOffset = this.split === 'vertical' ? e.currentTarget.offsetWidth : e.currentTarget.offsetHeight;
            const percent = Math.floor(((currentPage - offset) / targetOffset) * 10000) / 100;
            if (percent > this.margin && percent < 100 - this.margin) {
              this.percent = percent;
            }
            this.$emit('resize');
            this.hasMoved = true;
          }
        }
      }
    }
 </script>
--- a/src/components/Sticky/index.vue
+++ b/src/components/Sticky/index.vue
@@ -1,73 +1,76 @@
 <template>
-    <div :style="{height:height+'px',zIndex:zIndex}">
+  <div :style="{height:height+'px',zIndex:zIndex}">
-        <div :class="className" :style="{top:stickyTop+'px',zIndex:zIndex,position:position,width:width,height:height+'px'}">
+    <div :class="className" :style="{top:stickyTop+'px',zIndex:zIndex,position:position,width:width,height:height+'px'}">
-            <slot>
+      <slot>
-                <div>sticky</div>
+        <div>sticky</div>
-            </slot>
+      </slot>
        </div>
    </div>
  </div>
 </template>
 <script>
    export default {
      name: 'Sticky',
      props: {
        stickyTop: {
          type: Number,
          default: 0
        },
        zIndex: {
          type: Number,
          default: 1
        },
        className: {
          type: String
        }
      },
      data() {
        return {
          active: false,
          position: '',
          currentTop: '',
          width: undefined,
          height: undefined,
          child: null,
          stickyHeight: 0
-        };
+<script>
-      },
+export default {
-      methods: {
+  name: 'Sticky',
-        sticky() {
+  props: {
-          if (this.active) {
+    stickyTop: {
-            return
+      type: Number,
-          }
+      default: 0
-          this.position = 'fixed';
+    },
-          this.active = true;
+    zIndex: {
-          this.width = this.width + 'px';
+      type: Number,
-        },
+      default: 1
-        reset() {
+    },
-          if (!this.active) {
+    className: {
-            return
+      type: String
-          }
+    }
-          this.position = '';
+  },
-          this.width = 'auto'
+  data() {
-          this.active = false
+    return {
-        },
+      active: false,
-        handleScroll() {
+      position: '',
-          this.width = this.$el.getBoundingClientRect().width;
+      currentTop: '',
-          const offsetTop = this.$el.getBoundingClientRect().top;
+      width: undefined,
-          if (offsetTop <= this.stickyTop) {
+      height: undefined,
-            this.sticky();
+      child: null,
-            return
+      stickyHeight: 0
-          }
+    }
-          this.reset()
+  },
-        }
+  mounted() {
-      },
+    this.height = this.$el.getBoundingClientRect().height
-      mounted() {
+    window.addEventListener('scroll', this.handleScroll)
-        this.height = this.$el.getBoundingClientRect().height;
+  },
-        window.addEventListener('scroll', this.handleScroll);
+  activated() {
-      },
+    this.handleScroll()
-      destroyed() {
+  },
-        window.removeEventListener('scroll', this.handleScroll);
+  destroyed() {
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    sticky() {
      if (this.active) {
        return
      }
-    };
+      this.position = 'fixed'
      this.active = true
      this.width = this.width + 'px'
    },
    reset() {
      if (!this.active) {
        return
      }
      this.position = ''
      this.width = 'auto'
      this.active = false
    },
    handleScroll() {
      this.width = this.$el.getBoundingClientRect().width
      const offsetTop = this.$el.getBoundingClientRect().top
      if (offsetTop <= this.stickyTop) {
        this.sticky()
        return
      }
      this.reset()
    }
  }
 }
 </script>
--- a/src/components/SvgIcon/index.vue
+++ b/src/components/SvgIcon/index.vue
@@ -0,0 +1,42 @@
 <template>
  <svg :class="svgClass" aria-hidden="true">
    <use :xlink:href="iconName"></use>
  </svg>
 </template>
 <script>
 export default {
  name: 'svg-icon',
  props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {
      type: String
    }
  },
  computed: {
    iconName() {
      return `#icon-${this.iconClass}`
    },
    svgClass() {
      if (this.className) {
        return 'svg-icon ' + this.className
      } else {
        return 'svg-icon'
      }
    }
  }
 }
 </script>
 <style scoped>
 .svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
 }
 </style>
--- a/src/components/TextHoverEffect/Mallki.vue
+++ b/src/components/TextHoverEffect/Mallki.vue
@@ -0,0 +1,113 @@
 <template>
  <a class="link--mallki" :class="className" href="#">
    {{text}}
    <span :data-letters="text"></span>
    <span :data-letters="text"></span>
  </a>
 </template>
 <script>
 export default {
  props: {
    className: {
      type: String
    },
    text: {
      type: String,
      default: 'vue-element-admin'
    }
  }
 }
 </script>
 <style>
 /* Mallki */
 .link--mallki {
  font-weight: 800;
  color: #4dd9d5;
  font-family: 'Dosis', sans-serif;
  -webkit-transition: color 0.5s 0.25s;
  transition: color 0.5s 0.25s;
  overflow: hidden;
  position: relative;
 display: inline-block;
    line-height: 1;
        outline: none;
    text-decoration: none;
 }
 .link--mallki:hover {
  -webkit-transition: none;
  transition: none;
  color: transparent;
 }
 .link--mallki::before {
  content: '';
  width: 100%;
  height: 6px;
  margin: -3px 0 0 0;
  background: #3888fa;
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
  -webkit-transition: -webkit-transform 0.4s;
  transition: transform 0.4s;
  -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
 }
 .link--mallki:hover::before {
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
 }
 .link--mallki span {
  position: absolute;
  height: 50%;
  width: 100%;
  left: 0;
  top: 0;
  overflow: hidden;
 }
 .link--mallki span::before {
  content: attr(data-letters);
  color: red;
  position: absolute;
  left: 0;
  width: 100%;
  color: #3888fa;
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
 }
 .link--mallki span:nth-child(2) {
  top: 50%;
 }
 .link--mallki span:first-child::before {
  top: 0;
  -webkit-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
 }
 .link--mallki span:nth-child(2)::before {
  bottom: 0;
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
 }
 .link--mallki:hover span::before {
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
  transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
 }
 </style>
--- a/src/components/ThemePicker/index.vue
+++ b/src/components/ThemePicker/index.vue
@@ -0,0 +1,144 @@
 <template>
  <el-color-picker
    class="theme-picker"
    popper-class="theme-picker-dropdown"
    v-model="theme"></el-color-picker>
 </template>
 <script>
 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: ORIGINAL_THEME
    }
  },
  watch: {
    theme(val, oldVal) {
      if (typeof val !== 'string') return
      const themeCluster = this.getThemeCluster(val.replace('#', ''))
      const originalCluster = this.getThemeCluster(oldVal.replace('#', ''))
      console.log(themeCluster, originalCluster)
      const getHandler = (variable, id) => {
        return () => {
          const originalCluster = this.getThemeCluster(ORIGINAL_THEME.replace('#', ''))
          const newStyle = this.updateStyle(this[variable], originalCluster, themeCluster)
          let styleTag = document.getElementById(id)
          if (!styleTag) {
            styleTag = document.createElement('style')
            styleTag.setAttribute('id', id)
            document.head.appendChild(styleTag)
          }
          styleTag.innerText = newStyle
        }
      }
      const chalkHandler = getHandler('chalk', 'chalk-style')
      if (!this.chalk) {
        const url = `https://unpkg.com/element-ui@${version}/lib/theme-chalk/index.css`
        this.getCSSString(url, chalkHandler, 'chalk')
      } else {
        chalkHandler()
      }
      const styles = [].slice.call(document.querySelectorAll('style'))
        .filter(style => {
          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)
      })
      this.$message({
        message: '换肤成功',
        type: 'success'
      })
    }
  },
  methods: {
    updateStyle(style, oldCluster, newCluster) {
      let newStyle = style
      oldCluster.forEach((color, index) => {
        newStyle = newStyle.replace(new RegExp(color, 'ig'), newCluster[index])
      })
      return newStyle
    },
    getCSSString(url, callback, variable) {
      const xhr = new XMLHttpRequest()
      xhr.onreadystatechange = () => {
        if (xhr.readyState === 4 && xhr.status === 200) {
          this[variable] = xhr.responseText.replace(/@font-face{[^}]+}/, '')
          callback()
        }
      }
      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)
        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 = red.toString(16)
          green = green.toString(16)
          blue = blue.toString(16)
          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)
        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)
        return `#${red}${green}${blue}`
      }
      const clusters = [theme]
      for (let i = 0; i <= 9; i++) {
        clusters.push(tintColor(theme, Number((i / 10).toFixed(2))))
      }
      clusters.push(shadeColor(theme, 0.1))
      return clusters
    }
  }
 }
 </script>
 <style>
 .theme-picker .el-color-picker__trigger {
  vertical-align: middle;
 }
 .theme-picker-dropdown .el-color-dropdown__link-btn {
  display: none;
 }
 </style>
--- a/Show More
+++ b/Show More