[release] 3.5.1

perf[permission]:set role => roles
fix[i18n]: fixed defalut language bug
2018-01-05 13:29:57 +08:00 · 2018-01-05 11:38:34 +08:00 · 2018-01-04 12:37:08 +08:00 · 2018-01-04 10:04:14 +08:00 · 2018-01-04 10:03:33 +08:00 · 2018-01-03 13:40:22 +08:00
261 changed files with 10325 additions and 7527 deletions
--- a/.babelrc
+++ b/.babelrc
@@ -1,8 +1,12 @@
 {
  "presets": [
-    ["env", { "modules": false }],
+    ["env", {
+      "modules": false,
+      "targets": {
+        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
+      }
+    }],
    "stage-2"
  ],
-  "plugins": ["transform-runtime"],
-  "comments": false
+  "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,
-    parser: 'babel-eslint',
-    parserOptions: {
-        sourceType: 'module'
-    },
-    env: {
-        browser: true,
-        node: true
-    },
-    extends: 'eslint:recommended',
-    // required to lint *.vue files
-    plugins: [
-        'html'
-    ],
-    // check if imports actually resolve
-    'settings': {
-        'import/resolver': {
-            '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'
+  root: true,
+  parser: 'babel-eslint',
+  parserOptions: {
+    sourceType: 'module'
+  },
+  env: {
+    browser: true,
+    node: true,
+    es6: true,
+  },
+  extends: 'eslint:recommended',
+  // required to lint *.vue files
+  plugins: [
+    'html'
+  ],
+  // check if imports actually resolve
+  'settings': {
+    'import/resolver': {
+      'webpack': {
+        'config': 'build/webpack.base.conf.js'
+      }
    }
+  },
+  // 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,21 @@
 .DS_Store
 node_modules/
 dist/
-static/ckeditor
 gifs/
-npm-debug.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.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
@@ -2,7 +2,9 @@

 module.exports = {
  "plugins": {
-    // to edit target browsers: use "browserlist" field in package.json
+    "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,177 +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
- views-tab
-
-## 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)
-
-#### tabs
-
-![tabs](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/tabs.gif)<br />
-
-#### 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,186 +1,152 @@
-# vue-element-admin #
-[线上地址](http://panjiachen.github.io/vue-element-admin)
+<p align="center">
+  <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)

-**本项目的定位是后台集成方案，不适合当基础模板来开发，模板建议使用 [vueAdmin-template](https://github.com/PanJiaChen/vueAdmin-template)**
+## Introduction

-**注意：该项目目前使用element-ui@1.3.3版本,所以最低兼容 Vue 2.3.0**
+`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)

-写了一个系列的教程配套文章，如何从零构建后一个完整的后台项目:
+- [Documentation](https://panjiachen.github.io/vue-element-admin-site/#/)

- - [wiki](https://github.com/PanJiaChen/vue-element-admin/wiki)
- - [手摸手，带你用 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)
+- [wiki](https://github.com/PanJiaChen/vue-element-admin/wiki)

- 相应需求，开了一个qq群 591724180 方便大家交流
+- [donate](https://panjiachen.github.io/vue-element-admin-site/#/donate)

- **如有问题请先看上述文章和Wiki,若不能满足，欢迎issue和pr~**
+**vue-element-admin is a admin interfaces integration solution, which is not suitable for secondary development as a base template.**

- **该项目并不是一个脚手架，更倾向于是一个集成解决方案方案**
+ - Base template recommends using: [vueAdmin-template](https://github.com/PanJiaChen/vueAdmin-template)  
+ - Desktop: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)

- **该项目不支持低版本游览器，有需求请自行添加polyfill[详情](https://github.com/PanJiaChen/vue-element-admin/wiki#babel-polyfill)**
+**Note: This project uses element-ui@2.0.0+ version, so the minimum compatible vue@2.5.0**

+## Preparation

-## 功能
- 登录/注销
- 权限验证
- 侧边栏
- 面包屑
- 富文本编辑器
- Markdown编辑器
- JSON编辑器
- 列表拖拽
- plitPane
+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.**
+
+ **This project does not support low version browsers (e.g. IE). Please add polyfill yourself if you need them.**
+
+ <p align="center">
+  <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
+- Table example
+- Dynamictable example
+- Drag and drop table example
+- Inline edit table example
+- Form example
+- Two-step login
+- SplitPane
 - Dropzone
 - Sticky
 - CountTo
- echarts图表
- 401，401错误页面
- 错误日志
- 导出excel
- table example
- 动态table example
- 拖拽table example
- 内联编辑table example
- form example
- 多环境发布
- dashboard
- 二次登录
- 动态侧边栏（支持多级路由）
- mock数据
- cache tabs example
- screenfull
- markdown2html
- views-tab
+- Markdown to html
+```

+## Getting started

-## 开发
 ```bash
-    # 克隆项目
-    git clone https://github.com/PanJiaChen/vue-element-admin.git
+# clone the projice
+git clone https://github.com/PanJiaChen/vue-element-admin.git

-    # 安装依赖
-    npm install
-    //or # 建议不要用cnpm  安装有各种诡异的bug 可以通过如下操作解决npm速度慢的问题
-    npm install --registry=https://registry.npm.taobao.org
+# install dependency
+npm install

-    # 本地开发 开启服务
-    npm run dev
+# develop
+npm run dev
 ```
-浏览器访问 http://localhost:9527

-## 发布
+This will automatically open http://localhost:9527.
+
+## Build
 ```bash
-    # 发布测试环境 带webpack ananalyzer
-    npm run build:sit-preview
+# build for test environment
+npm run build:sit

-    # 构建生成环境
-    npm run build:prod
+# build for production environment
+npm run build:prod
 ```

-## 目录结构
-```shell
-├── build                      // 构建相关  
-├── config                     // 配置相关
-├── 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
+## Advanced
+```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
 ```

+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).

-## 状态管理
-后台只有user和app配置相关状态使用vuex存在全局，其它数据都由每个业务页面自己管理。
+## Online Demo
+[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)
+## License

-#### 真正的动态换肤
-
-![真正的动态换肤](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/theme.gif)<br />
-
-#### tabs
-
-![tabs](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/tabs.gif)<br />
-
-
-
-#### 可收起侧边栏
-
-![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)
+[MIT](https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE)

+Copyright (c) 2017-present PanJiaChen
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -0,0 +1,165 @@
+<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/#/)
+
+- [wiki](https://github.com/PanJiaChen/vue-element-admin/wiki)
+
+- [donate](https://panjiachen.github.io/vue-element-admin-site/#/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 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/#/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')();
-var server = require('pushstate-server');
-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');
+'use strict'
+require('./check-versions')()

-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) {
-        spinner.stop()
-        if (err) throw err
-        process.stdout.write(stats.toString({
-                colors: true,
-                modules: false,
-                children: false,
-                chunks: false,
-                chunkModules: false
-            }) + '\n\n')
+    process.stdout.write(stats.toString({
+      colors: true,
+      modules: false,
+      children: false,
+      chunks: false,
+      chunkModules: false
+    }) + '\n\n')

-        console.log(chalk.cyan('  Build complete.\n'))
-        if(process.env.npm_config_preview){
-            server.start({
-                port: 9528,
-                directory: './dist',
-                file: '/index.html'
-            });
-            console.log('> Listening at ' +  'http://localhost:9528' + '\n')
-        }
-    })
+    if (stats.hasErrors()) {
+      console.log(chalk.red('  Build failed with errors.\n'))
+      process.exit(1)
+    }
+
+    console.log(chalk.cyan('  Build complete.\n'))
+    console.log(chalk.yellow(
+      '  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')
-var semver = require('semver')
-var packageConfig = require('../package.json')
+'use strict'
+const chalk = require('chalk')
+const semver = require('semver')
+const packageConfig = require('../package.json')
+const shell = require('shelljs')

-function exec(cmd) {
-    return require('child_process').execSync(cmd).toString().trim()
+function exec (cmd) {
+  return require('child_process').execSync(cmd).toString().trim()
 }

-var versionRequirements = [
-    {
-        name: 'node',
-        currentVersion: semver.clean(process.version),
-        versionRequirement: packageConfig.engines.node
-    },
-    {
-        name: 'npm',
-        currentVersion: exec('npm --version'),
-        versionRequirement: packageConfig.engines.npm
-    }
+const versionRequirements = [
+  {
+    name: 'node',
+    currentVersion: semver.clean(process.version),
+    versionRequirement: packageConfig.engines.node
+  }
 ]

+if (shell.which('npm')) {
+  versionRequirements.push({
+    name: 'npm',
+    currentVersion: exec('npm --version'),
+    versionRequirement: packageConfig.engines.npm
+  })
+}
+
 module.exports = function () {
-    var warnings = []
-    for (var i = 0; i < versionRequirements.length; i++) {
-        var mod = versionRequirements[i]
-        if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
-            warnings.push(mod.name + ': ' +
-                chalk.red(mod.currentVersion) + ' should be ' +
-                chalk.green(mod.versionRequirement)
-            )
-        }
+  const warnings = []
+
+  for (let i = 0; i < versionRequirements.length; i++) {
+    const mod = versionRequirements[i]
+
+    if (!semver.satisfies(mod.currentVersion, 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(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)
-    }
+    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,28 +1,38 @@
-var path = require('path')
-var config = require('../config')
-var ExtractTextPlugin = require('extract-text-webpack-plugin')
+'use strict'
+const path = require('path')
+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.dev.assetsSubDirectory
+
  return path.posix.join(assetsSubDirectory, _path)
 }

 exports.cssLoaders = function (options) {
  options = options || {}

-  var cssLoader = {
+  const cssLoader = {
    loader: 'css-loader',
    options: {
-      minimize: process.env.NODE_ENV === 'production',
+      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) {
-    var loaders = [cssLoader]
+    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
+
    if (loader) {
      loaders.push({
        loader: loader + '-loader',
@@ -58,14 +68,34 @@ exports.cssLoaders = function (options) {

 // Generate loaders for standalone style files (outside of .vue)
 exports.styleLoaders = function (options) {
-  var output = []
-  var loaders = exports.cssLoaders(options)
-  for (var extension in loaders) {
-    var loader = loaders[extension]
+  const output = []
+  const loaders = exports.cssLoaders(options)
+
+  for (const extension in loaders) {
+    const loader = loaders[extension]
    output.push({
      test: new RegExp('\\.' + extension + '$'),
      use: loader
    })
  }
+
  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')
-var config = require('../config')
-var isProduction = process.env.NODE_ENV === 'production'
+'use strict'
+const utils = require('./utils')
+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({
-        sourceMap: isProduction
-            ? config.build.productionSourceMap
-            : config.dev.cssSourceMap,
-        extract: isProduction
-    })
+  loaders: utils.cssLoaders({
+    sourceMap: sourceMapEnabled,
+    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');
-var utils = require('./utils');
-var config = require('../config');
-var vueLoaderConfig = require('./vue-loader.conf');
+'use strict'
+const path = require('path')
+const utils = require('./utils')
+const config = require('../config')
+const vueLoaderConfig = require('./vue-loader.conf')

-function resolve(dir) {
-    return path.join(__dirname, '..', dir)
+function resolve (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: {
-        app: './src/main.js'
-    },
-    output: {
-        path: config.build.assetsRoot,
-        filename: '[name].js',
-        publicPath: process.env.NODE_ENV !== 'development' ?  config.build.assetsPublicPath: config.dev.assetsPublicPath
-    },
-    resolve: {
-        extensions: ['.js', '.vue', '.json'],
-        alias: {
-            'vue$': 'vue/dist/vue.esm.js',
-            '@': resolve('src'),
-            'src': path.resolve(__dirname, '../src'),
-            'assets': path.resolve(__dirname, '../src/assets'),
-            'components': path.resolve(__dirname, '../src/components'),
-            'views': path.resolve(__dirname, '../src/views'),
-            'styles': path.resolve(__dirname, '../src/styles'),
-            'api': path.resolve(__dirname, '../src/api'),
-            'utils': path.resolve(__dirname, '../src/utils'),
-            'store': path.resolve(__dirname, '../src/store'),
-            'router': path.resolve(__dirname, '../src/router'),
-            'mock': path.resolve(__dirname, '../src/mock'),
-            'vendor': path.resolve(__dirname, '../src/vendor'),
-            'static': path.resolve(__dirname, '../static')
+  context: path.resolve(__dirname, '../'),
+  entry: {
+    app: './src/main.js'
+  },
+  output: {
+    path: config.build.assetsRoot,
+    filename: '[name].js',
+    publicPath: process.env.NODE_ENV === 'production'
+      ? config.build.assetsPublicPath
+      : config.dev.assetsPublicPath
+  },
+  resolve: {
+    extensions: ['.js', '.vue', '.json'],
+    alias: {
+      'vue$': 'vue/dist/vue.esm.js',
+      '@': resolve('src'),
+    }
+  },
+  module: {
+    rules: [
+      ...(config.dev.useEslint ? [createLintingRule()] : []),
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        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'
-    },
-    module: {
-        rules: [
-            // {
-            //     test: /\.(js|vue)$/,
-            //     loader: 'eslint-loader',
-            //     enforce: "pre",
-            //     include: [resolve('src'), resolve('test')],
-            //     options: {
-            //         formatter: require('eslint-friendly-formatter')
-            //     }
-            // },
-            { test: /\.vue$/,
-                loader: 'vue-loader',
-                options: vueLoaderConfig
-            },
-            {
-                test: /\.js$/,
-                loader: 'babel-loader?cacheDirectory',
-                include: [resolve('src'), resolve('test')]
-            },
-            {
-                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
-                loader: 'url-loader',
-                query: {
-                    limit: 10000,
-                    name: utils.assetsPath('img/[name].[hash:7].[ext]')
-                }
-            },
-            {
-                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
-                loader: 'url-loader',
-                query: {
-                    limit: 10000,
-                    name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
-                }
-            }
-        ]
-    },
-    //注入全局mixin
-    // sassResources: path.join(__dirname, '../src/styles/mixin.scss'),
-    // sassLoader: {
-    //     data:  path.join(__dirname, '../src/styles/index.scss')
-    // },
+      },
+      {
+        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+        loader: 'url-loader',
+        exclude: [resolve('src/icons')],
+        options: {
+          limit: 10000,
+          name: utils.assetsPath('img/[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: utils.assetsPath('media/[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
+        }
+      }
+    ]
+  },
+  node: {
+    // 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
+    // that does not make sense for the client
+    dgram: 'empty',
+    fs: 'empty',
+    net: 'empty',
+    tls: 'empty',
+    child_process: 'empty'
+  }
 }
--- a/build/webpack.dev.conf.js
+++ b/build/webpack.dev.conf.js
@@ -1,47 +1,88 @@
-var utils = require('./utils')
-var path = require('path')
-var webpack = require('webpack')
-var config = require('../config')
-var merge = require('webpack-merge')
-var baseWebpackConfig = require('./webpack.base.conf')
-var HtmlWebpackPlugin = require('html-webpack-plugin')
-var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
+'use strict'
+const path = require('path')
+const utils = require('./utils')
+const webpack = require('webpack')
+const config = require('../config')
+const merge = require('webpack-merge')
+const baseWebpackConfig = require('./webpack.base.conf')
+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
-Object.keys(baseWebpackConfig.entry).forEach(function (name) {
-    baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
-})
-
-function resolveApp(relativePath) {
-    return path.resolve(relativePath);
+function resolve (dir) {
+  return path.join(__dirname, '..', dir)
 }

-module.exports = merge(baseWebpackConfig, {
-    module: {
-        rules: utils.styleLoaders({sourceMap: config.dev.cssSourceMap})
-    },
-    // cheap-source-map is faster for development
-    devtool: '#cheap-source-map',
-    cache: true,
-    plugins: [
-        new webpack.DefinePlugin({
-            'process.env': config.dev.env
-        }),
-        new webpack.ProvidePlugin({
-            $: 'jquery',
-            'jQuery': 'jquery'
-        }),
-        // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
-        new webpack.HotModuleReplacementPlugin(),
-        new webpack.NoEmitOnErrorsPlugin(),
-        // https://github.com/ampedandwired/html-webpack-plugin
-        new HtmlWebpackPlugin({
-            filename: 'index.html',
-            template: 'index.html',
-            favicon: resolveApp('favicon.ico'),
-            inject: true,
-            path:config.dev.staticPath
-        }),
-        new FriendlyErrorsPlugin()
-    ]
+const HOST = process.env.HOST
+const PORT = process.env.PORT && Number(process.env.PORT)
+
+const devWebpackConfig = merge(baseWebpackConfig, {
+  module: {
+    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
+  },
+  // cheap-module-eval-source-map is faster for development
+  devtool: config.dev.devtool,
+
+  // these devServer options should be customized in /config/index.js
+  devServer: {
+    clientLogLevel: 'warning',
+    historyApiFallback: true,
+    hot: true,
+    compress: true,
+    host: HOST || config.dev.host,
+    port: PORT || config.dev.port,
+    open: config.dev.autoOpenBrowser,
+    overlay: config.dev.errorOverlay
+      ? { warnings: false, errors: true }
+      : false,
+    publicPath: config.dev.assetsPublicPath,
+    proxy: config.dev.proxyTable,
+    quiet: true, // necessary for FriendlyErrorsPlugin
+    watchOptions: {
+      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,121 +1,175 @@
-var path = require('path')
-var utils = require('./utils')
-var webpack = require('webpack')
-var config = require('../config')
-var merge = require('webpack-merge')
-var baseWebpackConfig = require('./webpack.base.conf')
-var CopyWebpackPlugin = require('copy-webpack-plugin')
-var HtmlWebpackPlugin = require('html-webpack-plugin')
-var ExtractTextPlugin = require('extract-text-webpack-plugin')
-var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
+'use strict'
+const path = require('path')
+const utils = require('./utils')
+const webpack = require('webpack')
+const config = require('../config')
+const merge = require('webpack-merge')
+const baseWebpackConfig = require('./webpack.base.conf')
+const CopyWebpackPlugin = require('copy-webpack-plugin')
+const HtmlWebpackPlugin = require('html-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 resolveApp(relativePath) {
-    return path.resolve(relativePath);
+function resolve (dir) {
+  return path.join(__dirname, '..', dir)
 }

-var webpackConfig = merge(baseWebpackConfig, {
-    module: {
-        rules: utils.styleLoaders({
-            sourceMap: config.build.productionSourceMap,
-            extract: true
-        })
-    },
-    devtool: config.build.productionSourceMap ? '#source-map' : false,
-    output: {
-        path: config.build.assetsRoot,
-        filename: utils.assetsPath('js/[name].[chunkhash].js'),
-        chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
-    },
-    plugins: [
-        // http://vuejs.github.io/vue-loader/en/workflow/production.html
-        new webpack.DefinePlugin({
-            'process.env': env
-        }),
-        new webpack.optimize.UglifyJsPlugin({
-            compress: {
-                warnings: false
-            },
-            sourceMap: true
-        }),
-        // extract css into its own file
-        new ExtractTextPlugin({
-            filename: utils.assetsPath('css/[name].[contenthash].css')
-        }),
-        // Compress extracted CSS. We are using this plugin so that possible
-        // duplicated CSS from different components can be deduped.
-        new OptimizeCSSPlugin(),
-        // generate dist index.html with correct asset hash for caching.
-        // you can customize output by editing /index.html
-        // see https://github.com/ampedandwired/html-webpack-plugin
-        new HtmlWebpackPlugin({
-            filename: process.env.NODE_ENV === 'testing'
-                ? 'index.html'
-                : config.build.index,
-            template: 'index.html',
-            inject: true,
-            favicon: resolveApp('favicon.ico'),
-            minify: {
-                removeComments: true,
-                collapseWhitespace: true,
-                removeRedundantAttributes: true,
-                useShortDoctype: true,
-                removeEmptyAttributes: true,
-                removeStyleLinkTypeAttributes: true,
-                keepClosingSlash: true,
-                minifyJS: true,
-                minifyCSS: true,
-                minifyURLs: true
-            },
-             path:config.build.staticPath,
-            // necessary to consistently work with multiple chunks via CommonsChunkPlugin
-            chunksSortMode: 'dependency'
-        }),
-        // split vendor js into its own file
-        new webpack.optimize.CommonsChunkPlugin({
-            name: 'vendor',
-            minChunks: function (module, count) {
-                // any required modules inside node_modules are extracted to vendor
-                return (
-                    module.resource &&
-                    /\.js$/.test(module.resource) &&
-                    module.resource.indexOf(
-                        path.join(__dirname, '../node_modules')
-                    ) === 0
-                )
-            }
-        }),
-        // 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);
-            }
-        }),
-        // 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.optimize.CommonsChunkPlugin({
-            name: 'manifest',
-            chunks: ['vendor']
-        }),
-        // copy custom static assets
-        new CopyWebpackPlugin([
-            {
-                from: path.resolve(__dirname, '../static'),
-                to: config.build.assetsSubDirectory,
-                ignore: ['.*']
-            }
-        ]),
-        new webpack.ProvidePlugin({
-            $: 'jquery',
-            'jQuery': 'jquery'
-        })
-    ]
+const env = require('../config/'+process.env.env_config+'.env')
+
+const webpackConfig = merge(baseWebpackConfig, {
+  module: {
+    rules: utils.styleLoaders({
+      sourceMap: config.build.productionSourceMap,
+      extract: true,
+      usePostCSS: true
+    })
+  },
+  devtool: config.build.productionSourceMap ? config.build.devtool : false,
+  output: {
+    path: config.build.assetsRoot,
+    filename: utils.assetsPath('js/[name].[chunkhash].js'),
+    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
+  },
+  plugins: [
+    // http://vuejs.github.io/vue-loader/en/workflow/production.html
+    new webpack.DefinePlugin({
+      'process.env': env
+    }),
+    new UglifyJsPlugin({
+      uglifyOptions: {
+        compress: {
+          warnings: false
+        }
+      },
+      sourceMap: config.build.productionSourceMap,
+      parallel: true
+    }),
+    // extract css into its own file
+    new ExtractTextPlugin({
+      filename: utils.assetsPath('css/[name].[contenthash].css'),
+      // Setting the following option to `false` will not extract CSS from codesplit chunks.
+      // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
+      // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
+      allChunks: false,
+    }),
+    // Compress extracted CSS. We are using this plugin so that possible
+    // duplicated CSS from different components can be deduped.
+    new OptimizeCSSPlugin({
+      cssProcessorOptions: config.build.productionSourceMap
+        ? { safe: true, map: { inline: false } }
+        : { safe: true }
+    }),
+    // generate dist index.html with correct asset hash for caching.
+    // you can customize output by editing /index.html
+    // see https://github.com/ampedandwired/html-webpack-plugin
+    new HtmlWebpackPlugin({
+      filename: config.build.index,
+      template: 'index.html',
+      inject: true,
+      favicon: resolve('favicon.ico'),
+      title: 'vue-element-admin',
+      path: config.build.assetsPublicPath + config.build.assetsSubDirectory,
+      minify: {
+        removeComments: true,
+        collapseWhitespace: true,
+        removeAttributeQuotes: true
+        // more options:
+        // https://github.com/kangax/html-minifier#options-quick-reference
+      },
+      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
+      chunksSortMode: 'dependency'
+    }),
+    // keep module.id stable when vender modules does not change
+    new webpack.HashedModuleIdsPlugin(),
+    // enable scope hoisting
+    new webpack.optimize.ModuleConcatenationPlugin(),
+    // split vendor js into its own file
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'vendor',
+      minChunks (module) {
+        // any required modules inside node_modules are extracted to vendor
+        return (
+          module.resource &&
+          /\.js$/.test(module.resource) &&
+          module.resource.indexOf(
+            path.join(__dirname, '../node_modules')
+          ) === 0
+        )
+      }
+    }),
+    // 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.optimize.CommonsChunkPlugin({
+      name: 'manifest',
+      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
-    webpackConfig.plugins.push(new BundleAnalyzerPlugin())
+
+if (config.build.productionGzip) {
+  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"',
-    BASE_API: '"https://api-dev"',
-    APP_ORIGIN: '"https://wallstreetcn.com"'
+	NODE_ENV: '"development"',
+	ENV_CONFIG: '"dev"',
+	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: {
-        sitEnv: require('./sit.env'),
-        prodEnv: require('./prod.env'),
-        index: path.resolve(__dirname, '../dist/index.html'),
-        assetsRoot: path.resolve(__dirname, '../dist'),
-        assetsSubDirectory: 'static',
-        assetsPublicPath: './',          //请根据自己路径配置更改
-        staticPath:'./static/',          //请根据自己路径配置更改
-        productionSourceMap: true,
-        // 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
-    },
-    dev: {
-        env: require('./dev.env'),
-        port: 9527,
-        autoOpenBrowser: true,
-        assetsSubDirectory: 'static',
-        assetsPublicPath: '/',
-        staticPath:'/static/',
-        proxyTable: {},
-        // 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
-    }
+  dev: {
+
+    // Paths
+    assetsSubDirectory: 'static',
+    assetsPublicPath: '/',
+    proxyTable: {},
+
+    // Various Dev Server settings
+    host: 'localhost', // can be overwritten by process.env.HOST
+    port: 9527, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
+    autoOpenBrowser: true,
+    errorOverlay: true,
+    notifyOnErrors: false,
+    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
+
+    // Use Eslint Loader?
+    // If true, your code will be linted during bundling and
+    // linting errors and warnings will be shown in the console.
+    useEslint: true,
+    // If true, eslint errors and warnings will also be shown in the error overlay
+    // in the browser.
+    showEslintErrorsInOverlay: false,
+
+    /**
+     * Source Maps
+     */
+
+    // https://webpack.js.org/configuration/devtool/#development
+    devtool: 'eval-source-map',
+
+    // If you have problems debugging vue-files in devtools,
+    // set this to false - it *may* help
+    // https://vue-loader.vuejs.org/en/options.html#cachebusting
+    cacheBusting: true,
+
+    // 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"',
-    BASE_API: '"https://api-prod"',
-    APP_ORIGIN: '"https://wallstreetcn.com"'
-};
+	NODE_ENV: '"production"',
+	ENV_CONFIG: '"prod"',
+	BASE_API: '"https://api-prod"'
+}
--- a/config/sit.env.js
+++ b/config/sit.env.js
@@ -1,5 +1,5 @@
 module.exports = {
-    NODE_ENV: '"production"',
-    BASE_API: '"https://api-sit"',
-    APP_ORIGIN: '"https://wallstreetcn.com"'
-};
+	NODE_ENV: '"production"',
+	ENV_CONFIG: '"sit"',
+	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/index.html
+++ b/index.html
@@ -1,17 +1,15 @@
 <!DOCTYPE html>
 <html>
-<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>
-</head>
-<body>
-<script src=<%= htmlWebpackPlugin.options.path %>jquery.min.js></script>
-<script src=<%= htmlWebpackPlugin.options.path %>tinymce/tinymce.min.js></script>
-<div id="app"></div>
-<!-- built files will be auto injected -->
-</body>
-
+	<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>vue-element-admin</title>
+	</head>
+	<script src=<%= htmlWebpackPlugin.options.path %>/tinymce/tinymce.min.js></script>
+	<body>
+		<div id="app"></div>
+		<!-- built files will be auto injected -->
+	</body>
 </html>
--- a/package.json
+++ b/package.json
@@ -1,95 +1,99 @@
 {
-  "name": "juicy",
-  "version": "1.0.3",
-  "description": "A Vue.js admin",
+  "name": "vue-element-admin",
+  "version": "3.5.1",
+  "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",
-    "build:prod": "cross-env NODE_ENV=production node build/build.js",
-    "build:sit": "cross-env NODE_ENV=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"
+    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
+    "build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js",
+    "build:sit": "cross-env NODE_ENV=production env_config=sit node build/build.js",
+    "lint": "eslint --ext .js,.vue src",
+    "test": "npm run lint"
  },
  "dependencies": {
-    "axios": "0.16.2",
-    "codemirror": "5.26.0",
-    "dropzone": "5.1.0",
-    "echarts": "3.6.1",
-    "element-ui": "1.3.6",
+    "axios": "0.17.1",
+    "clipboard": "1.7.1",
+    "codemirror": "5.32.0",
+    "dropzone": "5.2.0",
+    "echarts": "3.8.5",
+    "element-ui": "2.0.8",
    "file-saver": "1.3.3",
-    "jquery": "3.1.1",
-    "js-cookie": "2.1.4",
+    "font-awesome": "4.7.0",
+    "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",
-    "showdown": "1.7.1",
+    "screenfull": "3.3.2",
+    "showdown": "1.8.5",
    "simplemde": "1.11.2",
-    "sortablejs": "1.5.1",
-    "vue": "2.3.3",
-    "vue-count-to": "1.0.5",
-    "vue-multiselect": "2.0.0-beta.15",
-    "vue-router": "2.5.3",
-    "vuedraggable": "2.13.1",
-    "vuex": "2.3.1",
-    "xlsx": "0.8.1"
+    "sortablejs": "1.7.0",
+    "vue": "2.5.10",
+    "vue-count-to": "1.0.13",
+    "vue-i18n": "7.3.2",
+    "vue-multiselect": "2.0.8",
+    "vue-router": "3.0.1",
+    "vue-splitpane": "1.0.2",
+    "vuedraggable": "2.15.0",
+    "vuex": "3.0.1",
+    "xlsx": "^0.11.16"
  },
  "devDependencies": {
-    "autoprefixer": "7.1.1",
-    "babel-core": "6.25.0",
-    "babel-eslint": "7.2.3",
-    "babel-loader": "7.0.0",
+    "autoprefixer": "7.2.3",
+    "babel-core": "6.26.0",
+    "babel-eslint": "8.0.3",
+    "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-env": "1.5.2",
+    "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": "1.1.3",
-    "connect-history-api-fallback": "1.3.0",
-    "copy-webpack-plugin": "4.0.1",
-    "cross-env": "5.0.1",
-    "css-loader": "0.28.4",
-    "eslint": "3.19.0",
+    "chalk": "2.3.0",
+    "copy-webpack-plugin": "4.3.0",
+    "cross-env": "5.1.1",
+    "css-loader": "0.28.7",
+    "eslint": "4.13.1",
    "eslint-friendly-formatter": "3.0.0",
-    "eslint-import-resolver-webpack": "0.8.1",
-    "eslint-loader": "1.7.1",
-    "eslint-plugin-html": "3.0.0",
-    "eslint-plugin-import": "2.3.0",
-    "eventsource-polyfill": "0.9.6",
-    "express": "4.15.3",
-    "extract-text-webpack-plugin": "2.1.2",
-    "file-loader": "0.11.2",
+    "eslint-loader": "1.9.0",
+    "eslint-plugin-html": "4.0.1",
+    "extract-text-webpack-plugin": "3.0.2",
+    "file-loader": "1.1.5",
    "friendly-errors-webpack-plugin": "1.6.1",
-    "function-bind": "1.1.0",
-    "html-webpack-plugin": "2.28.0",
-    "http-proxy-middleware": "0.17.4",
-    "node-sass": "^4.5.0",
-    "opn": "4.0.2",
-    "optimize-css-assets-webpack-plugin": "1.3.0",
-    "ora": "1.1.0",
-    "pushstate-server": "2.1.0",
-    "rimraf": "2.6.0",
-    "sass-loader": "6.0.5",
-    "script-loader": "0.7.0",
-    "semver": "5.3.0",
-    "style-loader": "0.17.0",
-    "url-loader": "0.5.8",
-    "vue-loader": "12.2.1",
-    "vue-style-loader": "3.0.1",
-    "vue-template-compiler": "2.3.3",
-    "webpack": "2.6.1",
-    "webpack-bundle-analyzer": "2.8.2",
-    "webpack-dev-middleware": "1.10.2",
-    "webpack-hot-middleware": "2.18.0",
-    "webpack-merge": "4.1.0"
+    "html-webpack-plugin": "2.30.1",
+    "node-notifier": "5.1.2",
+    "node-sass": "^4.7.2",
+    "optimize-css-assets-webpack-plugin": "3.2.0",
+    "ora": "1.3.0",
+    "portfinder": "1.0.13",
+    "postcss-import": "11.0.0",
+    "postcss-loader": "2.0.9",
+    "postcss-url": "7.3.0",
+    "pushstate-server": "3.0.1",
+    "rimraf": "2.6.2",
+    "sass-loader": "6.0.6",
+    "script-loader": "0.7.2",
+    "semver": "5.4.1",
+    "shelljs": "0.7.8",
+    "svg-sprite-loader": "3.5.2",
+    "uglifyjs-webpack-plugin": "1.1.3",
+    "url-loader": "0.6.2",
+    "vue-loader": "13.5.0",
+    "vue-style-loader": "3.0.3",
+    "vue-template-compiler": "2.5.10",
+    "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
@@ -9,7 +9,3 @@
    name: 'APP'
  }
 </script>
-
-<style lang="scss">
-  @import './styles/index.scss'; // 全局自定义的css样式
-</style>
--- 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() {
-  return fetch({
+export function fetchList(query) {
+  return request({
    url: '/article/list',
-    method: 'get'
-  });
+    method: 'get',
+    params: query
+  })
 }

-export function getArticle() {
-  return fetch({
+export function fetchArticle() {
+  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({
-    url: '/login/loginbyemail',
+  }
+  return request({
+    url: '/login/login',
    method: 'post',
    data
-  });
+  })
 }

 export function logout() {
-  return fetch({
+  return request({
    url: '/login/logout',
    method: 'post'
-  });
+  })
 }

-export function getInfo(token) {
-  return fetch({
+export function getUserInfo(token) {
+  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/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/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/keyboard.vue
+++ b/src/components/Charts/keyboard.vue
@@ -3,111 +3,148 @@
 </template>

 <script>
-   import echarts from 'echarts';
+import echarts from 'echarts'

-   export default {
-     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));
+export default {
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    id: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '200px'
+    },
+    height: {
+      type: String,
+      default: '200px'
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(document.getElementById(this.id))

-         const xAxisData = [];
-         const data = [];
-         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;
-               }
-             }]
-           })
-       }
-     }
-   }
+      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,150 +0,0 @@
-<template>
-  <div :class="className" :id="id" :style="{height:height,width:width}"></div>
-</template>
-
-<script>
-  import echarts from 'echarts';
-
-  export default {
-    props: {
-      className: {
-        type: String,
-        default: 'chart'
-      },
-      id: {
-        type: String,
-        default: 'chart'
-      },
-      width: {
-        type: String,
-        default: '200px'
-      },
-      height: {
-        type: String,
-        default: '200px'
-      }
-    },
-    data() {
-      return {
-        chart: null
-      };
-    },
-    mounted() {
-      this.initChart();
-    },
-    beforeDestroy() {
-      if (!this.chart) {
-        return
-      }
-      this.chart.dispose();
-      this.chart = null;
-    },
-    methods: {
-      initChart() {
-        this.chart = echarts.init(document.getElementById(this.id));
-
-        const xAxisData = [];
-        const data = [];
-        const data2 = [];
-        for (let i = 0; i < 50; i++) {
-          xAxisData.push(i);
-          data.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5);
-          data2.push((Math.sin(i / 5) * (i / 5 + 10) + i / 6) * 3);
-        }
-        this.chart.setOption(
-          {
-            backgroundColor: '#08263a',
-            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/lineMarker.vue
+++ b/src/components/Charts/lineMarker.vue
@@ -3,220 +3,223 @@
 </template>

 <script>
-  import echarts from 'echarts';
+import echarts from 'echarts'

-  export default {
-    props: {
-      className: {
-        type: String,
-        default: 'chart'
-      },
-      id: {
-        type: String,
-        default: 'chart'
-      },
-      width: {
-        type: String,
-        default: '200px'
-      },
-      height: {
-        type: String,
-        default: '200px'
-      }
+export default {
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
    },
-    data() {
-      return {
-        chart: null
-      };
+    id: {
+      type: String,
+      default: 'chart'
    },
-    mounted() {
-      this.initChart();
+    width: {
+      type: String,
+      default: '200px'
    },
-    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: {
-            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]
-          }]
-        })
-      }
+    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))
+
+      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,268 @@
+<template>
+  <div :class="className" :id="id" :style="{height:height,width:width}"></div>
+</template>
+
+<script>
+import echarts from 'echarts'
+
+export default {
+  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()
+    this.chart = null
+  },
+  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,268 +0,0 @@
-<template>
-  <div :class="className" :id="id" :style="{height:height,width:width}"></div>
-</template>
-
-<script>
-  import echarts from 'echarts';
-
-  export default {
-    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();
-      this.chart = null;
-    },
-    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 + '月份');
-          }
-          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/twoDndList/index.vue
+++ b/src/components/twoDndList/index.vue
@@ -1,23 +1,22 @@
 <template>
-  <div class="twoDndList">
-    <div class="twoDndList-list" :style="{width:width1}">
+  <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'>
+        <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>
+              <i style="color:#ff4949" class="el-icon-delete"></i>
+            </span>
          </div>
        </div>
      </draggable>
    </div>
-
-    <div class="twoDndList-list" :style="{width:width2}">
+    <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'>
+        <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>
@@ -26,78 +25,79 @@
 </template>

 <script>
-  import draggable from 'vuedraggable'
-  export default {
-    name: 'twoDndList',
-    components: { draggable },
-    computed: {
-      filterList2() {
-        return this.list2.filter(v => {
-          if (this.isNotInList1(v)) {
-            return v
-          }
-          return false;
-        })
+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 []
      }
    },
-    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%'
+    list2: {
+      type: Array,
+      default() {
+        return []
      }
    },
-    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
-          }
+    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)
      }
+      if (this.isNotInList2(ele)) {
+        this.list2.unshift(ele)
+      }
+    },
+    pushEle(ele) {
+      this.list1.push(ele)
    }
  }
+}
 </script>

 <style rel="stylesheet/scss" lang="scss" scoped>
-.twoDndList {
+.dndList {
  background: #fff;
  padding-bottom: 40px;
  &:after {
@@ -105,7 +105,7 @@
    display: table;
    clear: both;
  }
-  .twoDndList-list {
+  .dndList-list {
    float: left;
    padding-bottom: 30px;
    &:first-of-type {
--- a/src/components/Dropzone/index.vue
+++ b/src/components/Dropzone/index.vue
@@ -5,203 +5,201 @@
 </template>

 <script>
-  import Dropzone from 'dropzone';
-  import 'dropzone/dist/dropzone.css';
-    // import { getToken } from 'api/qiniu';
+import Dropzone from 'dropzone'
+import 'dropzone/dist/dropzone.css'
+// import { getToken } from 'api/qiniu';

-  Dropzone.autoDiscover = false;
+Dropzone.autoDiscover = false

-  export default {
-    data() {
-      return {
-        dropzone: '',
-        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;
-          }
-        },
-        accept: (file, done) => {
-        /* 七牛*/
-            // const token = this.$store.getters.token;
-            // getToken(token).then(response => {
-            //   file.token = response.data.qiniu_token;
-            //   file.key = response.data.qiniu_key;
-            //   file.url = response.data.qiniu_url;
-            //   done();
-            // })
-          done();
-        },
-        sending: (file, xhr, formData) => {
-             /* 七牛*/
-          console.log(file, xhr, formData)
-            // formData.append('token', file.token);
-            // formData.append('key', file.key);
-          vm.initOnce = false;
-        }
-      });
-
-      if (this.couldPaste) {
-        document.addEventListener('paste', this.pasteImg)
-      }
-
-      this.dropzone.on('success', file => {
-        vm.$emit('dropzone-success', file, vm.dropzone.element)
-      });
-      this.dropzone.on('addedfile', file => {
-        vm.$emit('dropzone-fileAdded', file)
-      });
-      this.dropzone.on('removedfile', file => {
-        vm.$emit('dropzone-removedFile', file)
-      });
-      this.dropzone.on('error', (file, error, xhr) => {
-        vm.$emit('dropzone-error', file, error, xhr)
-      });
-      this.dropzone.on('successmultiple', (file, error, xhr) => {
-        vm.$emit('dropzone-successmultiple', file, error, xhr)
-      });
-    },
-    methods: {
-      removeAllFiles() {
-        this.dropzone.removeAllFiles(true)
-      },
-      processQueue() {
-        this.dropzone.processQueue()
-      },
-      pasteImg(event) {
-        const items = (event.clipboardData || event.originalEvent.clipboardData).items;
-        if (items[0].kind === 'file') {
-          this.dropzone.addFile(items[0].getAsFile())
-        }
-      },
-      initImages(val) {
-        if (!val) return;
+export default {
+  data() {
+    return {
+      dropzone: '',
+      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.dropzone.options.addedfile.call(this.dropzone, mockFile);
-            this.dropzone.options.thumbnail.call(this.dropzone, mockFile, v);
-            mockFile.previewElement.classList.add('dz-success');
-            mockFile.previewElement.classList.add('dz-complete');
+            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.dropzone.options.addedfile.call(this.dropzone, mockFile);
-          this.dropzone.options.thumbnail.call(this.dropzone, mockFile, val);
-          mockFile.previewElement.classList.add('dz-success');
-          mockFile.previewElement.classList.add('dz-complete');
+          const mockFile = { name: 'name', size: 12345, url: val }
+          this.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;
+        // getToken(token).then(response => {
+        //   file.token = response.data.qiniu_token;
+        //   file.key = response.data.qiniu_key;
+        //   file.url = response.data.qiniu_url;
+        //   done();
+        // })
+        done()
+      },
+      sending: (file, xhr, formData) => {
+        // formData.append('token', file.token);
+        // formData.append('key', file.key);
+        vm.initOnce = false
      }
+    })

+    if (this.couldPaste) {
+      document.addEventListener('paste', this.pasteImg)
+    }
+
+    this.dropzone.on('success', file => {
+      vm.$emit('dropzone-success', file, vm.dropzone.element)
+    })
+    this.dropzone.on('addedfile', file => {
+      vm.$emit('dropzone-fileAdded', file)
+    })
+    this.dropzone.on('removedfile', file => {
+      vm.$emit('dropzone-removedFile', file)
+    })
+    this.dropzone.on('error', (file, error, xhr) => {
+      vm.$emit('dropzone-error', file, error, xhr)
+    })
+    this.dropzone.on('successmultiple', (file, error, xhr) => {
+      vm.$emit('dropzone-successmultiple', file, error, xhr)
+    })
+  },
+  methods: {
+    removeAllFiles() {
+      this.dropzone.removeAllFiles(true)
    },
-    destroyed() {
-      document.removeEventListener('paste', this.pasteImg);
-      this.dropzone.destroy();
+    processQueue() {
+      this.dropzone.processQueue()
    },
-    watch: {
-      defaultImg(val) {
-        if (val.length === 0) {
-          this.initOnce = false;
-          return;
-        }
-        if (!this.initOnce) return;
-        this.initImages(val);
-        this.initOnce = false;
+    pasteImg(event) {
+      const items = (event.clipboardData || event.originalEvent.clipboardData).items
+      if (items[0].kind === 'file') {
+        this.dropzone.addFile(items[0].getAsFile())
      }
    },
-    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
+    initImages(val) {
+      if (!val) return
+      if (Array.isArray(val)) {
+        val.map((v, i) => {
+          const mockFile = { name: 'name' + i, size: 12345, url: v }
+          this.dropzone.options.addedfile.call(this.dropzone, mockFile)
+          this.dropzone.options.thumbnail.call(this.dropzone, mockFile, v)
+          mockFile.previewElement.classList.add('dz-success')
+          mockFile.previewElement.classList.add('dz-complete')
+          return true
+        })
+      } else {
+        const mockFile = { name: 'name', size: 12345, url: val }
+        this.dropzone.options.addedfile.call(this.dropzone, mockFile)
+        this.dropzone.options.thumbnail.call(this.dropzone, mockFile, val)
+        mockFile.previewElement.classList.add('dz-success')
+        mockFile.previewElement.classList.add('dz-complete')
      }
    }
+
+  },
+  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,56 +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,31 +1,31 @@
 <template>
-	<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>
-	</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>
+  </div>
 </template>

 <script>
-  export default {
-    name: 'hamburger',
-    props: {
-      isActive: {
-        type: Boolean,
-        default: false
-      },
-      toggleClick: {
-        type: Function,
-        default: null
-      }
+export default {
+  name: 'hamburger',
+  props: {
+    isActive: {
+      type: Boolean,
+      default: false
+    },
+    toggleClick: {
+      type: Function,
+      default: null
    }
  }
+}
 </script>

 <style scoped>
@@ -34,13 +34,12 @@
 	cursor: pointer;
 	width: 20px;
 	height: 20px;
-	transform: rotate(0deg);
+	transform: rotate(90deg);
 	transition: .38s;
 	transform-origin: 50% 50%;
 }

 .hamburger.is-active {
-	transform: rotate(90deg);
+	transform: rotate(0deg);
 }
-
 </style>
--- a/src/components/Icon-svg/index.vue
+++ b/src/components/Icon-svg/index.vue
@@ -1,22 +0,0 @@
-<template>
-  <svg class="svg-icon" aria-hidden="true">
-    <use :xlink:href="iconName"></use>
-  </svg>
-</template>
-
-<script>
-  export default {
-    name: 'icon-svg',
-    props: {
-      iconClass: {
-        type: String,
-        required: true
-      }
-    },
-    computed: {
-      iconName() {
-        return `#icon-${this.iconClass}`
-      }
-    }
-  }
-</script>
--- a/src/components/ImageCropper/index.vue
+++ b/src/components/ImageCropper/index.vue
@@ -105,7 +105,7 @@
 <script>
    /* eslint-disable */
    import {effectRipple, data2blob} from './utils';
-    import fetch from 'utils/fetch';
+    import request from '@/utils/request';
    import langBag from './lang';
    const mimes = {
        'jpg': 'image/jpeg',
@@ -672,7 +672,7 @@
            that.loading = 1;
            that.setStep(3);
            that.$emit('crop-success', createImgUrl, field, ki);
-            fetch({
+            request({
                url,
                method: 'post',
                data: fmData
--- a/src/components/ImageCropper/lang.js
+++ b/src/components/ImageCropper/lang.js
@@ -37,5 +37,5 @@ const langBag = {
      lowestPx: 'The lowest pixel in the image: '
    }
  }
-};
-export default langBag;
+}
+export default langBag
--- a/src/components/JsonEditor/index.vue
+++ b/src/components/JsonEditor/index.vue
@@ -0,0 +1,63 @@
+<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>
+.CodeMirror {
+  height: 100%;
+}
+.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">
-		<input v-if="type === 'email'" type="email" class="material-input" :name="name" :id="id" :placeholder="placeholder" v-model="valueCopy"
-		  :readonly="readonly" :disabled="disabled" :autocomplete="autocomplete" :required="required" @focus="handleFocus(true)"
-		  @blur="handleFocus(false)" @input="handleModelInput">
-		<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="handleFocus(true)"
-		  @blur="handleFocus(false)" @input="handleModelInput">
-		<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" :max="max" :min="min" :minlength="minlength" :maxlength="maxlength"
-		  :required="required" @focus="handleFocus(true)" @blur="handleFocus(false)" @input="handleModelInput">
-		<input v-if="type === 'password'" type="password" 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="handleFocus(true)" @blur="handleFocus(false)" @input="handleModelInput">
-		<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" :required="required" @focus="handleFocus(true)"
-		  @blur="handleFocus(false)" @input="handleModelInput">
-		<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" :minlength="minlength" :maxlength="maxlength" :required="required"
-		  @focus="handleFocus(true)" @blur="handleFocus(false)" @input="handleModelInput">
-
-		<span class="material-input-bar"></span>
-
-		<label class="material-label">
-            <slot></slot>
-        </label>
-		<div v-if="errorMessages" class="material-errors">
-			<div v-for="error in computedErrors" class="material-error" :key='error'>
-				{{ error }}
-			</div>
-		</div>
-	</div>
+  <div class="material-input__component" :class="computedClasses">
+    <div :class="{iconClass:icon}">
+      <i class="el-input__icon material-input__icon" :class="['el-icon-' + icon]" v-if="icon"></i>
+      <input v-if="type === 'email'" type="email" class="material-input" :name="name" :placeholder="fillPlaceHolder" v-model="currentValue"
+        :readonly="readonly" :disabled="disabled" :autoComplete="autoComplete" :required="required" @focus="handleMdFocus"
+        @blur="handleMdBlur" @input="handleModelInput">
+      <input v-if="type === 'url'" type="url" class="material-input" :name="name" :placeholder="fillPlaceHolder" v-model="currentValue"
+        :readonly="readonly" :disabled="disabled" :autoComplete="autoComplete" :required="required" @focus="handleMdFocus"
+        @blur="handleMdBlur" @input="handleModelInput">
+      <input v-if="type === 'number'" type="number" class="material-input" :name="name" :placeholder="fillPlaceHolder" v-model="currentValue"
+        :step="step" :readonly="readonly" :disabled="disabled" :autoComplete="autoComplete" :max="max" :min="min" :minlength="minlength"
+        :maxlength="maxlength" :required="required" @focus="handleMdFocus" @blur="handleMdBlur" @input="handleModelInput">
+      <input v-if="type === 'password'" type="password" class="material-input" :name="name" :placeholder="fillPlaceHolder" v-model="currentValue"
+        :readonly="readonly" :disabled="disabled" :autoComplete="autoComplete" :max="max" :min="min" :required="required" @focus="handleMdFocus"
+        @blur="handleMdBlur" @input="handleModelInput">
+      <input v-if="type === 'tel'" type="tel" class="material-input" :name="name" :placeholder="fillPlaceHolder" v-model="currentValue"
+        :readonly="readonly" :disabled="disabled" :autoComplete="autoComplete" :required="required" @focus="handleMdFocus"
+        @blur="handleMdBlur" @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"
+        :required="required" @focus="handleMdFocus" @blur="handleMdBlur" @input="handleModelInput">
+      <span class="material-input-bar"></span>
+      <label class="material-label">
+        <slot></slot>
+      </label>
+    </div>
+  </div>
 </template>

 <script>
-	// source:https://github.com/wemake-services/vue-material-input/blob/master/src/components/MaterialInput.vue
-	export default {
-  name: 'material-input',
-  computed: {
-    computedErrors() {
-      return typeof this.errorMessages === 'string'
-                        ? [this.errorMessages] : this.errorMessages
-    },
-    computedClasses() {
-      return {
-        'material--active': this.focus,
-        'material--disabled': this.disabled,
-        'material--has-errors': Boolean(!this.valid || (this.errorMessages && this.errorMessages.length)),
-        'material--raised': Boolean(this.focus || this.valueCopy || // has value
-                            (this.placeholder && !this.valueCopy)) // has placeholder
-      }
-    }
-  },
-  data() {
-    return {
-      valueCopy: null,
-      focus: false,
-      valid: true
-    }
-  },
-  beforeMount() {
-        // Here we are following the Vue2 convention on custom v-model:
-        // https://github.com/vuejs/vue/issues/2873#issuecomment-223759341
-    this.copyValue(this.value)
-  },
-  methods: {
-    handleModelInput(event) {
-      this.$emit('input', event.target.value, event)
-      this.handleValidation()
-    },
-    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)
-    }
-  },
+// source:https://github.com/wemake-services/vue-material-input/blob/master/src/components/MaterialInput.vue
+
+export default {
+  name: 'md-input',
  props: {
-    id: {
-      type: String,
-      default: null
-    },
-    name: {
-      type: String,
-      default: null
-    },
+    icon: String,
+    name: String,
    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
-    },
+    value: [String, Number],
+    placeholder: String,
+    readonly: Boolean,
+    disabled: Boolean,
+    min: String,
+    max: String,
+    step: String,
+    minlength: Number,
+    maxlength: Number,
    required: {
      type: Boolean,
      default: true
    },
-    autocomplete: {
+    autoComplete: {
      type: String,
      default: 'off'
    },
-    errorMessages: {
-      type: [Array, String],
-      default: null
+    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])
+        }
+      }
+      this.$emit('change', value)
+    },
+    handleMdFocus(event) {
+      this.focus = true
+      this.$emit('focus', event)
+      if (this.placeholder && this.placeholder !== '') {
+        this.fillPlaceHolder = this.placeholder
+      }
+    },
+    handleMdBlur(event) {
+      this.focus = false
+      this.$emit('blur', event)
+      this.fillPlaceHolder = null
+      if (this.$parent.$options.componentName === 'ElFormItem') {
+        if (this.validateEvent) {
+          this.$parent.$emit('el.form.blur', [this.currentValue])
+        }
+      }
    }
  }
 }
 </script>

 <style rel="stylesheet/scss" lang="scss" scoped>
-    // Fonts:
-    $font-size-base: 16px;
-    $font-size-small: 18px;
-    $font-size-smallest: 12px;
-    $font-weight-normal: normal;
-    // Utils
-    $spacer: 12px;
-    $transition: 0.2s ease all;
-    // Base clases:
-    %base-bar-pseudo {
-        content: '';
-        height: 1px;
-        width: 0;
-        bottom: 0;
+  // Fonts:
+  $font-size-base: 16px;
+  $font-size-small: 18px;
+  $font-size-smallest: 12px;
+  $font-weight-normal: normal;
+  $font-weight-bold: bold;
+  $apixel: 1px;
+  // Utils
+  $spacer: 12px;
+  $transition: 0.2s ease all;
+  $index: 0px;
+  $index-has-icon: 30px;
+  // Theme:
+  $color-white: white;
+  $color-grey: #9E9E9E;
+  $color-grey-light: #E0E0E0;
+  $color-blue: #2196F3;
+  $color-red: #F44336;
+  $color-black: black;
+  // Base clases:
+  %base-bar-pseudo {
+    content: '';
+    height: 1px;
+    width: 0;
+    bottom: 0;
+    position: absolute;
+    transition: $transition;
+  }
+
+  // Mixins:
+  @mixin slided-top() {
+    top: - ($font-size-base + $spacer);
+    left: 0;
+    font-size: $font-size-base;
+    font-weight: $font-weight-bold;
+  }
+
+  // Component:
+  .material-input__component {
+    margin-top: 36px;
+    position: relative;
+    * {
+      box-sizing: border-box;
+    }
+    .iconClass {
+      .material-input__icon {
        position: absolute;
-        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:
-    @mixin slided-top() {
-        top: -2 * $spacer;
-        font-size: $font-size-small;
+  .material-input__component {
+    background: $color-white;
+    .material-input {
+      background: none;
+      color: $color-black;
+      text-indent: $index;
+      border-bottom: 1px solid $color-grey-light;
    }
-
-    // Component:
-    .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-label {
+      color: $color-grey;
    }
-
-    // Theme:
-    $color-white: white;
-    $color-grey: #9E9E9E;
-    $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;
-            }
-        }
+    .material-input-bar {
+      &:before,
+      &:after {
+        background: $color-blue;
+      }
    }
+    // Active state:
+    &.material--active {
+      .material-label {
+        color: $color-blue;
+      }
+    }
+    // Errors:
+    &.material--has-errors {
+      &.material--active .material-label {
+        color: $color-red;
+      }
+      .material-input-bar {
+        &:before,
+        &:after {
+          background: transparent;
+        }
+      }
+    }
+  }
 </style>
--- a/src/components/MarkdownEditor/index.vue
+++ b/src/components/MarkdownEditor/index.vue
@@ -0,0 +1,119 @@
+<template>
+  <div class="simplemde-container" :style="{height:height+'px',zIndex:zIndex}">
+    <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: 'simplemde-md',
+  props: {
+    value: String,
+    id: {
+      type: String
+    },
+    autofocus: {
+      type: Boolean,
+      default: false
+    },
+    placeholder: {
+      type: String,
+      default: ''
+    },
+    height: {
+      type: Number,
+      default: 150
+    },
+    zIndex: {
+      type: Number,
+      default: 10
+    },
+    toolbar: {
+      type: Array
+    }
+  },
+  data() {
+    return {
+      simplemde: null,
+      hasChange: false
+    }
+  },
+  watch: {
+    value(val) {
+      if (val === this.simplemde.value() && !this.hasChange) return
+      this.simplemde.value(val)
+    }
+  },
+  mounted() {
+    this.simplemde = new SimpleMDE({
+      element: document.getElementById(this.id || 'markdown-editor-' + +new Date()),
+      autoDownloadFontAwesome: false,
+      autofocus: this.autofocus,
+      toolbar: this.toolbar,
+      spellChecker: false,
+      insertTexts: {
+        link: ['[', ']( )']
+      },
+      // hideIcons: ['guide', 'heading', 'quote', 'image', 'preview', 'side-by-side', 'fullscreen'],
+      placeholder: this.placeholder
+    })
+    if (this.value) {
+      this.simplemde.value(this.value)
+    }
+    this.simplemde.codemirror.on('change', () => {
+      if (this.hasChange) {
+        this.hasChange = true
+      }
+      this.$emit('input', this.simplemde.value())
+    })
+  },
+  destroyed() {
+    this.simplemde = null
+  }
+}
+</script>
+
+<style>
+.simplemde-container .CodeMirror {
+  min-height: 150px;
+}
+
+.simplemde-container .CodeMirror-scroll {
+  min-height: 150px;
+}
+
+.simplemde-container .CodeMirror-code {
+  padding-bottom: 40px;
+}
+
+.simplemde-container .editor-statusbar {
+  display: none;
+}
+
+.simplemde-container .CodeMirror .CodeMirror-code .cm-link {
+  color: #1482F0;
+}
+
+.simplemde-container .CodeMirror .CodeMirror-code .cm-string.cm-url {
+  color: #2d3b4d;
+  font-weight: bold;
+}
+
+.simplemde-container .CodeMirror .CodeMirror-code .cm-formatting-link-string.cm-url {
+  padding: 0 2px;
+  font-weight: bold;
+  color: #E61E1E;
+}
+
+.simplemde-container .editor-toolbar.fullscreen,
+.simplemde-container .CodeMirror-fullscreen {
+  z-index: 1003;
+}
+</style>
+
+
--- a/src/components/MdEditor/index.vue
+++ b/src/components/MdEditor/index.vue
@@ -1,114 +0,0 @@
-<template>
-  <div class='simplemde-container' :style="{height:height+'px',zIndex:zIndex}">
-    <textarea :id='id'>
-    </textarea>
-  </div>
-</template>
-
-<script>
-  import 'simplemde/dist/simplemde.min.css';
-  import SimpleMDE from 'simplemde';
-
-  export default {
-    name: 'Sticky',
-    props: {
-      value: String,
-      id: {
-        type: String,
-        default: 'markdown-editor'
-      },
-      autofocus: {
-        type: Boolean,
-        default: false
-      },
-      placeholder: {
-        type: String,
-        default: ''
-      },
-      height: {
-        type: Number,
-        default: 150
-      },
-      zIndex: {
-        type: Number,
-        default: 10
-      },
-      toolbar: {
-        type: Array
-      }
-    },
-    data() {
-      return {
-        simplemde: null,
-        hasChange: false
-      };
-    },
-    watch: {
-      value(val) {
-        if (val === this.simplemde.value() && !this.hasChange) return;
-        this.simplemde.value(val);
-      }
-    },
-    mounted() {
-      this.simplemde = new SimpleMDE({
-        element: document.getElementById(this.id),
-        autofocus: this.autofocus,
-        toolbar: this.toolbar,
-        spellChecker: false,
-        insertTexts: {
-          link: ['[', ']( )']
-        },
-      // hideIcons: ['guide', 'heading', 'quote', 'image', 'preview', 'side-by-side', 'fullscreen'],
-        placeholder: this.placeholder
-      });
-      if (this.value) {
-        this.simplemde.value(this.value);
-      }
-      this.simplemde.codemirror.on('change', () => {
-        if (this.hasChange) {
-          this.hasChange = true
-        }
-        this.$emit('input', this.simplemde.value());
-      });
-    },
-    destroyed() {
-      this.simplemde = null;
-    }
-};
-</script>
-
-<style>
-.simplemde-container .CodeMirror {
-  /*height: 150px;*/
-  min-height: 150px;
-}
-
-.simplemde-container .CodeMirror-scroll {
-  min-height: 150px;
-}
-
-.simplemde-container .CodeMirror-code {
-  padding-bottom: 40px;
-}
-
-.simplemde-container .editor-statusbar {
-  display: none;
-}
-
-.simplemde-container .CodeMirror .CodeMirror-code .cm-link {
-  color: #1482F0;
-}
-
-.simplemde-container .CodeMirror .CodeMirror-code .cm-string.cm-url {
-  color: #2d3b4d;
-  font-weight: bold;
-}
-
-.simplemde-container .CodeMirror .CodeMirror-code .cm-formatting-link-string.cm-url {
-  padding: 0 2px;
-  font-weight: bold;
-  color: #E61E1E;
-}
-</style>
-
-
--- a/src/components/PanThumb/index.vue
+++ b/src/components/PanThumb/index.vue
@@ -10,27 +10,27 @@
 </template>

 <script>
-  export default {
-    name: 'PanThumb',
-    props: {
-      image: {
-        type: String,
-        required: true
-      },
-      zIndex: {
-        type: Number,
-        default: 100
-      },
-      width: {
-        type: String,
-        default: '150px'
-      },
-      height: {
-        type: String,
-        default: '150px'
-      }
+export default {
+  name: 'PanThumb',
+  props: {
+    image: {
+      type: String,
+      required: true
+    },
+    zIndex: {
+      type: Number,
+      default: 100
+    },
+    width: {
+      type: String,
+      default: '150px'
+    },
+    height: {
+      type: String,
+      default: '150px'
    }
-  };
+  }
+}
 </script>

 <style scoped>
--- a/src/components/Screenfull/index.vue
+++ b/src/components/Screenfull/index.vue
@@ -1,53 +1,65 @@
 <template>
-  <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>
+  <div>
+    <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';
-  export default {
-    name: 'hamburger',
-    props: {
-      width: {
-        type: Number,
-        default: 22
-      },
-      height: {
-        type: Number,
-        default: 22
-      },
-      fill: {
-        type: String,
-        default: '#48576a'
-      }
+import screenfull from 'screenfull'
+
+export default {
+  name: 'screenfull',
+  props: {
+    width: {
+      type: Number,
+      default: 22
    },
-    data() {
-      return {
-        isFullscreen: false
-      }
+    height: {
+      type: Number,
+      default: 22
    },
-    methods: {
-      click() {
-        if (!screenfull.enabled) {
-          this.$message({
-            message: 'you browser can not work',
-            type: 'warning'
-          });
-          return false;
-        }
-        screenfull.toggle();
+    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;
  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,44 +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 scoped>
-.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,72 +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>
-
-<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>
-
-<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>
--- a/src/components/Sticky/index.vue
+++ b/src/components/Sticky/index.vue
@@ -9,66 +9,68 @@
 </template>

 <script>
-  export default {
-    name: 'Sticky',
-    props: {
-      stickyTop: {
-        type: Number,
-        default: 0
-      },
-      zIndex: {
-        type: Number,
-        default: 1
-      },
-      className: {
-        type: String
-      }
+export default {
+  name: 'Sticky',
+  props: {
+    stickyTop: {
+      type: Number,
+      default: 0
    },
-    data() {
-      return {
-        active: false,
-        position: '',
-        currentTop: '',
-        width: undefined,
-        height: undefined,
-        child: null,
-        stickyHeight: 0
-
-      };
+    zIndex: {
+      type: Number,
+      default: 1
    },
-    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()
-      }
-    },
-    mounted() {
-      this.height = this.$el.getBoundingClientRect().height;
-      window.addEventListener('scroll', this.handleScroll);
-    },
-    destroyed() {
-      window.removeEventListener('scroll', this.handleScroll);
+    className: {
+      type: String
    }
-  };
+  },
+  data() {
+    return {
+      active: false,
+      position: '',
+      currentTop: '',
+      width: undefined,
+      height: undefined,
+      child: null,
+      stickyHeight: 0
+    }
+  },
+  mounted() {
+    this.height = this.$el.getBoundingClientRect().height
+    window.addEventListener('scroll', this.handleScroll)
+  },
+  activated() {
+    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/src/components/Tinymce/components/editorImage.vue
+++ b/src/components/Tinymce/components/editorImage.vue
@@ -0,0 +1,95 @@
+<template>
+  <div class="upload-container">
+    <el-button icon='upload' :style="{background:color,borderColor:color}" @click=" dialogVisible=true" type="primary">上传图片
+    </el-button>
+    <el-dialog :visible.sync="dialogVisible">
+      <el-upload class="editor-slide-upload" action="https://httpbin.org/post" :multiple="true" :file-list="fileList" :show-file-list="true"
+        list-type="picture-card" :on-remove="handleRemove" :on-success="handleSuccess" :before-upload="beforeUpload">
+        <el-button size="small" type="primary">点击上传</el-button>
+      </el-upload>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+      <el-button type="primary" @click="handleSubmit">确 定</el-button>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+// import { getToken } from 'api/qiniu'
+
+export default {
+  name: 'editorSlideUpload',
+  props: {
+    color: {
+      type: String,
+      default: '#20a0ff'
+    }
+  },
+  data() {
+    return {
+      dialogVisible: false,
+      listObj: {},
+      fileList: []
+    }
+  },
+  methods: {
+    checkAllSuccess() {
+      return Object.keys(this.listObj).every(item => this.listObj[item].hasSuccess)
+    },
+    handleSubmit() {
+      const arr = Object.keys(this.listObj).map(v => this.listObj[v])
+      if (!this.checkAllSuccess()) {
+        this.$message('请等待所有图片上传成功 或 出现了网络问题，请刷新页面重新上传！')
+        return
+      }
+      console.log(arr)
+      this.$emit('successCBK', arr)
+      this.listObj = {}
+      this.fileList = []
+      this.dialogVisible = false
+    },
+    handleSuccess(response, file) {
+      const uid = file.uid
+      const objKeyArr = Object.keys(this.listObj)
+      for (let i = 0, len = objKeyArr.length; i < len; i++) {
+        if (this.listObj[objKeyArr[i]].uid === uid) {
+          this.listObj[objKeyArr[i]].url = response.files.file
+          this.listObj[objKeyArr[i]].hasSuccess = true
+          return
+        }
+      }
+    },
+    handleRemove(file) {
+      const uid = file.uid
+      const objKeyArr = Object.keys(this.listObj)
+      for (let i = 0, len = objKeyArr.length; i < len; i++) {
+        if (this.listObj[objKeyArr[i]].uid === uid) {
+          delete this.listObj[objKeyArr[i]]
+          return
+        }
+      }
+    },
+    beforeUpload(file) {
+      const _self = this
+      const _URL = window.URL || window.webkitURL
+      const fileName = file.uid
+      this.listObj[fileName] = {}
+      return new Promise((resolve, reject) => {
+        const img = new Image()
+        img.src = _URL.createObjectURL(file)
+        img.onload = function() {
+          _self.listObj[fileName] = { hasSuccess: false, uid: file.uid, width: this.width, height: this.height }
+        }
+        resolve(true)
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+    .upload-container {
+        .editor-slide-upload {
+            margin-bottom: 20px;
+        }
+    }
+</style>
--- a/src/components/Tinymce/index.vue
+++ b/src/components/Tinymce/index.vue
@@ -1,173 +1,169 @@
 <template>
-  <div class='tinymce-container editor-container'>
-    <textarea class='tinymce-textarea' :id="id"></textarea>
+  <div class="tinymce-container editor-container">
+    <textarea class="tinymce-textarea" :id="tinymceId"></textarea>
+    <div class="editor-custom-btn-container">
+     <editorImage  color="#20a0ff" class="editor-upload-btn" @successCBK="imageSuccessCBK"></editorImage>
+      </div>
  </div>
 </template>

 <script>
-    // import { getToken, upload } from 'api/qiniu'; // 七牛
-  export default {
-        name: 'tinymce',
-        props: {
-          id: {
-            type: String,
-            default: 'tinymceEditor'
-          },
-          value: {
-            type: String,
-            default: ''
-          },
-          toolbar: {
-            type: Array,
-            required: false,
-            default() {
-              return ['removeformat undo redo |  bullist numlist | outdent indent | forecolor | fullscreen code', 'bold italic blockquote | h2 p  media link | alignleft aligncenter alignright']
-            }
-          },
-          data() {
-            return {
-              hasChange: false,
-              hasInit: false
-            }
-          },
-          menubar: {
-            default: ''
-          },
-          height: {
-            type: Number,
-            required: false,
-            default: 360
+import editorImage from './components/editorImage'
+
+export default {
+  name: 'tinymce',
+  components: { editorImage },
+  props: {
+    id: {
+      type: String
+    },
+    value: {
+      type: String,
+      default: ''
+    },
+    toolbar: {
+      type: Array,
+      required: false,
+      default() {
+        return ['removeformat undo redo |  bullist numlist | outdent indent | forecolor | fullscreen code', 'bold italic blockquote | h2 p  media link | alignleft aligncenter alignright']
+      }
+    },
+    menubar: {
+      default: ''
+    },
+    height: {
+      type: Number,
+      required: false,
+      default: 360
+    }
+  },
+  data() {
+    return {
+      hasChange: false,
+      hasInit: false,
+      tinymceId: this.id || 'vue-tinymce-' + +new Date()
+    }
+  },
+  watch: {
+    value(val) {
+      if (!this.hasChange && this.hasInit) {
+        this.$nextTick(() => window.tinymce.get(this.tinymceId).setContent(val))
+      }
+    }
+  },
+  mounted() {
+    this.initTinymce()
+  },
+  activated() {
+    this.initTinymce()
+  },
+  deactivated() {
+    this.destroyTinymce()
+  },
+  methods: {
+    initTinymce() {
+      const _this = this
+      window.tinymce.init({
+        selector: `#${this.tinymceId}`,
+        height: this.height,
+        body_class: 'panel-body ',
+        object_resizing: false,
+        toolbar: this.toolbar,
+        menubar: this.menubar,
+        plugins: 'advlist,autolink,code,paste,textcolor, colorpicker,fullscreen,link,lists,media,wordcount, imagetools',
+        end_container_on_empty_block: true,
+        powerpaste_word_import: 'clean',
+        code_dialog_height: 450,
+        code_dialog_width: 1000,
+        advlist_bullet_styles: 'square',
+        advlist_number_styles: 'default',
+        imagetools_cors_hosts: ['wpimg.wallstcn.com', 'wallstreetcn.com'],
+        imagetools_toolbar: 'watermark',
+        default_link_target: '_blank',
+        link_title: false,
+        init_instance_callback: editor => {
+          if (_this.value) {
+            editor.setContent(_this.value)
          }
-        },
-        watch: {
-          value(val) {
-            if (!this.hasChange && this.hasInit) {
-              this.$nextTick(() => tinymce.get(this.id).setContent(val))
-            }
-          }
-        },
-        mounted() {
-          const _this = this;
-          tinymce.init({
-            selector: `#${this.id}`,
-            height: this.height,
-            body_class: 'panel-body ',
-            object_resizing: false,
-          //  language: 'zh_CN',
-          //  language_url: '/static/tinymce/langs/zh_CN.js',
-            toolbar: this.toolbar,
-            menubar: this.menubar,
-            plugins: 'advlist,autolink,code,paste,textcolor, colorpicker,fullscreen,link,lists,media,wordcount, imagetools,watermark',
-            end_container_on_empty_block: true,
-            powerpaste_word_import: 'clean',
-            code_dialog_height: 450,
-            code_dialog_width: 1000,
-            advlist_bullet_styles: 'square',
-            advlist_number_styles: 'default',
-            block_formats: '普通标签=p;小标题=h2;',
-            imagetools_cors_hosts: ['wpimg.wallstcn.com', 'wallstreetcn.com'],
-            imagetools_toolbar: 'watermark',
-            default_link_target: '_blank',
-            link_title: false,
-            init_instance_callback: editor => {
-              if (_this.value) {
-                editor.setContent(_this.value)
-              }
-              _this.hasInit = true;
-              editor.on('NodeChange Change KeyUp', () => {
-                this.hasChange = true;
-                this.$emit('input', editor.getContent({ format: 'raw' }));
-              });
-            },
-          // 整合七牛上传
-          // images_dataimg_filter(img) {
-          //   setTimeout(() => {
-          //     const $image = $(img);
-          //     $image.removeAttr('width');
-          //     $image.removeAttr('height');
-          //     if ($image[0].height && $image[0].width) {
-          //       $image.attr('data-wscntype', 'image');
-          //       $image.attr('data-wscnh', $image[0].height);
-          //       $image.attr('data-wscnw', $image[0].width);
-          //       $image.addClass('wscnph');
-          //     }
-          //   }, 0);
-          //   return img
-          // },
-          // images_upload_handler(blobInfo, success, failure, progress) {
-          //   progress(0);
-          //   const token = _this.$store.getters.token;
-          //   getToken(token).then(response => {
-          //     const url = response.data.qiniu_url;
-          //     const formData = new FormData();
-          //     formData.append('token', response.data.qiniu_token);
-          //     formData.append('key', response.data.qiniu_key);
-          //     formData.append('file', blobInfo.blob(), url);
-          //     upload(formData).then(() => {
-          //       success(url);
-          //       progress(100);
-          //     })
-          //   }).catch(err => {
-          //     failure('出现未知问题，刷新页面，或者联系程序员')
-          //     console.log(err);
-          //   });
-          // },
-            setup(editor) {
-              editor.addButton('h2', {
-                title: '小标题', // tooltip text seen on mouseover
-                text: '小标题',
-                onclick() {
-                  editor.execCommand('mceToggleFormat', false, 'h2');
-                },
-                onPostRender() {
-                  const btn = this;
-                  editor.on('init', () => {
-                    editor.formatter.formatChanged('h2', state => {
-                      btn.active(state);
-                    });
-                  });
-                }
-              });
-              editor.addButton('p', {
-                title: '正文',
-                text: '正文',
-                onclick() {
-                  editor.execCommand('mceToggleFormat', false, 'p');
-                },
-                onPostRender() {
-                  const btn = this;
-                  editor.on('init', () => {
-                    editor.formatter.formatChanged('p', state => {
-                      btn.active(state);
-                    });
-                  });
-                }
-              });
-            }
-          });
-        },
-        destroyed() {
-          tinymce.get(this.id).destroy();
+          _this.hasInit = true
+          editor.on('NodeChange Change KeyUp', () => {
+            this.hasChange = true
+            this.$emit('input', editor.getContent({ format: 'raw' }))
+          })
        }
+        // 整合七牛上传
+        // images_dataimg_filter(img) {
+        //   setTimeout(() => {
+        //     const $image = $(img);
+        //     $image.removeAttr('width');
+        //     $image.removeAttr('height');
+        //     if ($image[0].height && $image[0].width) {
+        //       $image.attr('data-wscntype', 'image');
+        //       $image.attr('data-wscnh', $image[0].height);
+        //       $image.attr('data-wscnw', $image[0].width);
+        //       $image.addClass('wscnph');
+        //     }
+        //   }, 0);
+        //   return img
+        // },
+        // images_upload_handler(blobInfo, success, failure, progress) {
+        //   progress(0);
+        //   const token = _this.$store.getters.token;
+        //   getToken(token).then(response => {
+        //     const url = response.data.qiniu_url;
+        //     const formData = new FormData();
+        //     formData.append('token', response.data.qiniu_token);
+        //     formData.append('key', response.data.qiniu_key);
+        //     formData.append('file', blobInfo.blob(), url);
+        //     upload(formData).then(() => {
+        //       success(url);
+        //       progress(100);
+        //     })
+        //   }).catch(err => {
+        //     failure('出现未知问题，刷新页面，或者联系程序员')
+        //     console.log(err);
+        //   });
+        // },
+      })
+    },
+    destroyTinymce() {
+      if (window.tinymce.get(this.tinymceId)) {
+        window.tinymce.get(this.tinymceId).destroy()
+      }
+    },
+    setContent(value) {
+      window.tinymce.get(this.tinymceId).setContent(value)
+    },
+    getContent() {
+      window.tinymce.get(this.tinymceId).getContent()
+    },
+    imageSuccessCBK(arr) {
+      const _this = this
+      arr.forEach(v => {
+        window.tinymce.get(_this.tinymceId).insertContent(`<img class="wscnph" src="${v.url}" >`)
+      })
+    }
+  },
+  destroyed() {
+    this.destroyTinymce()
  }
+}
 </script>

 <style scoped>
 .tinymce-container {
  position: relative
 }
-
 .tinymce-textarea {
  visibility: hidden;
  z-index: -1;
 }
-
 .editor-custom-btn-container {
  position: absolute;
  right: 15px;
+  /*z-index: 2005;*/
  top: 18px;
 }
-
 .editor-upload-btn {
  display: inline-block;
 }
--- a/src/components/Upload/singleImage.vue
+++ b/src/components/Upload/singleImage.vue
@@ -17,52 +17,53 @@
 </template>

 <script>
-	// 预览效果见付费文章
-	import { getToken } from 'api/qiniu';
-	export default {
-	  name: 'singleImageUpload',
-	  props: {
-	    value: String
+// 预览效果见付费文章
+import { getToken } from '@/api/qiniu'
+
+export default {
+  name: 'singleImageUpload',
+  props: {
+    value: String
  },
-	  computed: {
-	    imageUrl() {
-	      return this.value
+  computed: {
+    imageUrl() {
+      return this.value
    }
  },
-	  data() {
-	    return {
-	      tempUrl: '',
-	      dataObj: { token: '', key: '' }
-    };
+  data() {
+    return {
+      tempUrl: '',
+      dataObj: { token: '', key: '' }
+    }
  },
-	  methods: {
-	    rmImage() {
-	      this.emitInput('');
+  methods: {
+    rmImage() {
+      this.emitInput('')
    },
-	    emitInput(val) {
-	      this.$emit('input', val);
+    emitInput(val) {
+      this.$emit('input', val)
    },
-	    handleImageScucess() {
-	      this.emitInput(this.tempUrl)
+    handleImageScucess() {
+      this.emitInput(this.tempUrl)
    },
-	    beforeUpload() {
-	      const _self = this;
-	      return new Promise((resolve, reject) => {
-	        getToken().then(response => {
-	          const key = response.data.qiniu_key;
-	          const token = response.data.qiniu_token;
-	          _self._data.dataObj.token = token;
-	          _self._data.dataObj.key = key;
-	          this.tempUrl = response.data.qiniu_url;
-	          resolve(true);
+    beforeUpload() {
+      const _self = this
+      return new Promise((resolve, reject) => {
+        getToken().then(response => {
+          const key = response.data.qiniu_key
+          const token = response.data.qiniu_token
+          _self._data.dataObj.token = token
+          _self._data.dataObj.key = key
+          this.tempUrl = response.data.qiniu_url
+          resolve(true)
        }).catch(err => {
-	          console.log(err);
-	          reject(false)
-        });
-      });
+          console.log(err)
+          reject(false)
+        })
+      })
    }
  }
-	};
+}
 </script>

 <style rel="stylesheet/scss" lang="scss" scoped>
--- a/src/components/Upload/singleImage2.vue
+++ b/src/components/Upload/singleImage2.vue
@@ -17,52 +17,51 @@
 </template>

 <script>
-	// 预览效果见专题
-	import { getToken } from 'api/qiniu';
-	export default {
-	  name: 'singleImageUpload2',
-	  props: {
-	    value: String
+import { getToken } from '@/api/qiniu'
+
+export default {
+  name: 'singleImageUpload2',
+  props: {
+    value: String
  },
-	  computed: {
-	    imageUrl() {
-	      return this.value
+  computed: {
+    imageUrl() {
+      return this.value
    }
  },
-	  data() {
-	    return {
-	      tempUrl: '',
-	      dataObj: { token: '', key: '' }
-    };
+  data() {
+    return {
+      tempUrl: '',
+      dataObj: { token: '', key: '' }
+    }
  },
-	  methods: {
-	    rmImage() {
-	      this.emitInput('');
+  methods: {
+    rmImage() {
+      this.emitInput('')
    },
-	    emitInput(val) {
-	      this.$emit('input', val);
+    emitInput(val) {
+      this.$emit('input', val)
    },
-	    handleImageScucess() {
-	      this.emitInput(this.tempUrl)
+    handleImageScucess() {
+      this.emitInput(this.tempUrl)
    },
-	    beforeUpload() {
-	      const _self = this;
-	      return new Promise((resolve, reject) => {
-	        getToken().then(response => {
-	          const key = response.data.qiniu_key;
-	          const token = response.data.qiniu_token;
-	          _self._data.dataObj.token = token;
-	          _self._data.dataObj.key = key;
-	          this.tempUrl = response.data.qiniu_url;
-	          resolve(true);
-        }).catch(err => {
-	          console.log(err);
-	          reject(false)
-        });
-      });
+    beforeUpload() {
+      const _self = this
+      return new Promise((resolve, reject) => {
+        getToken().then(response => {
+          const key = response.data.qiniu_key
+          const token = response.data.qiniu_token
+          _self._data.dataObj.token = token
+          _self._data.dataObj.key = key
+          this.tempUrl = response.data.qiniu_url
+          resolve(true)
+        }).catch(() => {
+          reject(false)
+        })
+      })
    }
  }
-	};
+}
 </script>

 <style rel="stylesheet/scss" lang="scss" scoped>
--- a/src/components/Upload/singleImage3.vue
+++ b/src/components/Upload/singleImage3.vue
@@ -7,7 +7,6 @@
 		</el-upload>
 		<div class="image-preview image-app-preview">
 			<div class="image-preview-wrapper" v-show="imageUrl.length>1">
-				<div class='app-fake-conver'>&nbsp&nbsp全球 付费节目单 最热 经济</div>
 				<img :src="imageUrl">
 				<div class="image-preview-action">
 					<i @click="rmImage" class="el-icon-delete"></i>
@@ -26,52 +25,52 @@
 </template>

 <script>
-	// 预览效果见文章
-	import { getToken } from 'api/qiniu';
-	export default {
-	  name: 'singleImageUpload',
-	  props: {
-	    value: String
+import { getToken } from '@/api/qiniu'
+
+export default {
+  name: 'singleImageUpload',
+  props: {
+    value: String
  },
-	  computed: {
-	    imageUrl() {
-	      return this.value
+  computed: {
+    imageUrl() {
+      return this.value
    }
  },
-	  data() {
-	    return {
-	      tempUrl: '',
-	      dataObj: { token: '', key: '' }
-    };
+  data() {
+    return {
+      tempUrl: '',
+      dataObj: { token: '', key: '' }
+    }
  },
-	  methods: {
-	    rmImage() {
-	      this.emitInput('');
+  methods: {
+    rmImage() {
+      this.emitInput('')
    },
-	    emitInput(val) {
-	      this.$emit('input', val);
+    emitInput(val) {
+      this.$emit('input', val)
    },
-	    handleImageScucess(file) {
-	      this.emitInput(file.files.file)
+    handleImageScucess(file) {
+      this.emitInput(file.files.file)
    },
-	    beforeUpload() {
-	      const _self = this;
-	      return new Promise((resolve, reject) => {
-	        getToken().then(response => {
-	          const key = response.data.qiniu_key;
-	          const token = response.data.qiniu_token;
-	          _self._data.dataObj.token = token;
-	          _self._data.dataObj.key = key;
-	          this.tempUrl = response.data.qiniu_url;
-	          resolve(true);
+    beforeUpload() {
+      const _self = this
+      return new Promise((resolve, reject) => {
+        getToken().then(response => {
+          const key = response.data.qiniu_key
+          const token = response.data.qiniu_token
+          _self._data.dataObj.token = token
+          _self._data.dataObj.key = key
+          this.tempUrl = response.data.qiniu_url
+          resolve(true)
        }).catch(err => {
-	          console.log(err);
-	          reject(false)
-        });
-      });
+          console.log(err)
+          reject(false)
+        })
+      })
    }
  }
-	};
+}
 </script>

 <style rel="stylesheet/scss" lang="scss" scoped>
--- a/src/components/UploadExcel/index.vue
+++ b/src/components/UploadExcel/index.vue
@@ -0,0 +1,112 @@
+<template>
+  <div>
+    <input id="excel-upload-input" type="file" accept=".xlsx, .xls" class="c-hide" @change="handkeFileChange">
+    <div id="drop" @drop="handleDrop" @dragover="handleDragover" @dragenter="handleDragover">
+      Drop excel file here or
+      <el-button style="margin-left:16px;" size="mini" type="primary" @click="handleUpload">browse</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import XLSX from 'xlsx'
+
+export default {
+  data() {
+    return {
+      loading: false,
+      excelData: {
+        header: null,
+        results: null
+      }
+    }
+  },
+  methods: {
+    generateDate({ header, results }) {
+      this.excelData.header = header
+      this.excelData.results = results
+      this.$emit('on-selected-file', this.excelData)
+    },
+    handleDrop(e) {
+      e.stopPropagation()
+      e.preventDefault()
+      const files = e.dataTransfer.files
+      if (files.length !== 1) {
+        this.$message.error('Only support uploading one file!')
+        return
+      }
+      const itemFile = files[0] // only use files[0]
+      this.readerData(itemFile)
+      e.stopPropagation()
+      e.preventDefault()
+    },
+    handleDragover(e) {
+      e.stopPropagation()
+      e.preventDefault()
+      e.dataTransfer.dropEffect = 'copy'
+    },
+    handleUpload() {
+      document.getElementById('excel-upload-input').click()
+    },
+    handkeFileChange(e) {
+      const files = e.target.files
+      const itemFile = files[0] // only use files[0]
+      this.readerData(itemFile)
+    },
+    readerData(itemFile) {
+      const reader = new FileReader()
+      reader.onload = e => {
+        const data = e.target.result
+        const fixedData = this.fixdata(data)
+        const workbook = XLSX.read(btoa(fixedData), { type: 'base64' })
+        const firstSheetName = workbook.SheetNames[0]
+        const worksheet = workbook.Sheets[firstSheetName]
+        const header = this.get_header_row(worksheet)
+        const results = XLSX.utils.sheet_to_json(worksheet)
+        this.generateDate({ header, results })
+      }
+      reader.readAsArrayBuffer(itemFile)
+    },
+    fixdata(data) {
+      let o = ''
+      let l = 0
+      const w = 10240
+      for (; l < data.byteLength / w; ++l) o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w)))
+      o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)))
+      return o
+    },
+    get_header_row(sheet) {
+      const headers = []
+      const range = XLSX.utils.decode_range(sheet['!ref'])
+      let C
+      const R = range.s.r /* start in the first row */
+      for (C = range.s.c; C <= range.e.c; ++C) { /* walk every column in the range */
+        var cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })] /* find the cell in the first row */
+        var hdr = 'UNKNOWN ' + C // <-- replace with your desired default
+        if (cell && cell.t) hdr = XLSX.utils.format_cell(cell)
+        headers.push(hdr)
+      }
+      return headers
+    }
+  }
+}
+</script>
+
+<style scoped>
+#excel-upload-input{
+  display: none;
+  z-index: -9999;
+}
+#drop{
+  border: 2px dashed #bbb;
+  width: 600px;
+  height: 160px;
+  line-height: 160px;
+  margin: 0 auto;
+  font-size: 24px;
+  border-radius: 5px;
+  text-align: center;
+  color: #bbb;
+  position: relative;
+}
+</style>
--- a/src/components/jsonEditor/index.vue
+++ b/src/components/jsonEditor/index.vue
@@ -1,64 +0,0 @@
-<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>
-.CodeMirror {
-  height: 100%;
-}
-
-.json-editor .cm-s-rubyblue span.cm-string {
-  color: #F08047;
-}
-</style>
--- a/src/directive/clipboard/clipboard.js
+++ b/src/directive/clipboard/clipboard.js
@@ -0,0 +1,49 @@
+// Inspired by https://github.com/Inndy/vue-clipboard2
+const Clipboard = require('clipboard')
+if (!Clipboard) {
+  throw new Error('you shold npm install `clipboard` --save at first ')
+}
+
+export default {
+  bind(el, binding) {
+    if (binding.arg === 'success') {
+      el._v_clipboard_success = binding.value
+    } else if (binding.arg === 'error') {
+      el._v_clipboard_error = binding.value
+    } else {
+      const clipboard = new Clipboard(el, {
+        text() { return binding.value },
+        action() { return binding.arg === 'cut' ? 'cut' : 'copy' }
+      })
+      clipboard.on('success', e => {
+        const callback = el._v_clipboard_success
+        callback && callback(e) // eslint-disable-line
+      })
+      clipboard.on('error', e => {
+        const callback = el._v_clipboard_error
+        callback && callback(e) // eslint-disable-line
+      })
+      el._v_clipboard = clipboard
+    }
+  },
+  update(el, binding) {
+    if (binding.arg === 'success') {
+      el._v_clipboard_success = binding.value
+    } else if (binding.arg === 'error') {
+      el._v_clipboard_error = binding.value
+    } else {
+      el._v_clipboard.text = function() { return binding.value }
+      el._v_clipboard.action = function() { return binding.arg === 'cut' ? 'cut' : 'copy' }
+    }
+  },
+  unbind(el, binding) {
+    if (binding.arg === 'success') {
+      delete el._v_clipboard_success
+    } else if (binding.arg === 'error') {
+      delete el._v_clipboard_error
+    } else {
+      el._v_clipboard.destroy()
+      delete el._v_clipboard
+    }
+  }
+}
--- a/src/directive/clipboard/index.js
+++ b/src/directive/clipboard/index.js
@@ -0,0 +1,13 @@
+import Clipboard from './clipboard'
+
+const install = function(Vue) {
+  Vue.directive('Clipboard', Clipboard)
+}
+
+if (window.Vue) {
+  window.clipboard = Clipboard
+  Vue.use(install); // eslint-disable-line
+}
+
+Clipboard.install = install
+export default Clipboard
--- a/src/directive/sticky.js
+++ b/src/directive/sticky.js
@@ -1,43 +1,43 @@
-const vueSticky = {};
-let listenAction;
+const vueSticky = {}
+let listenAction
 vueSticky.install = Vue => {
  Vue.directive('sticky', {
    inserted(el, binding) {
-      const params = binding.value || {},
-        stickyTop = params.stickyTop || 0,
-        zIndex = params.zIndex || 1000,
-        elStyle = el.style;
+      const params = binding.value || {}
+      const stickyTop = params.stickyTop || 0
+      const zIndex = params.zIndex || 1000
+      const elStyle = el.style

-      elStyle.position = '-webkit-sticky';
-      elStyle.position = 'sticky';
-        // if the browser support css sticky（Currently Safari, Firefox and Chrome Canary）
-        // if (~elStyle.position.indexOf('sticky')) {
-        //     elStyle.top = `${stickyTop}px`;
-        //     elStyle.zIndex = zIndex;
-        //     return
-        // }
-      const elHeight = el.getBoundingClientRect().height;
-      const elWidth = el.getBoundingClientRect().width;
-      elStyle.cssText = `top: ${stickyTop}px; z-index: ${zIndex}`;
+      elStyle.position = '-webkit-sticky'
+      elStyle.position = 'sticky'
+      // if the browser support css sticky（Currently Safari, Firefox and Chrome Canary）
+      // if (~elStyle.position.indexOf('sticky')) {
+      //     elStyle.top = `${stickyTop}px`;
+      //     elStyle.zIndex = zIndex;
+      //     return
+      // }
+      const elHeight = el.getBoundingClientRect().height
+      const elWidth = el.getBoundingClientRect().width
+      elStyle.cssText = `top: ${stickyTop}px; z-index: ${zIndex}`

-      const parentElm = el.parentNode || document.documentElement;
-      const placeholder = document.createElement('div');
-      placeholder.style.display = 'none';
-      placeholder.style.width = `${elWidth}px`;
-      placeholder.style.height = `${elHeight}px`;
+      const parentElm = el.parentNode || document.documentElement
+      const placeholder = document.createElement('div')
+      placeholder.style.display = 'none'
+      placeholder.style.width = `${elWidth}px`
+      placeholder.style.height = `${elHeight}px`
      parentElm.insertBefore(placeholder, el)

-      let active = false;
+      let active = false

      const getScroll = (target, top) => {
-        const prop = top ? 'pageYOffset' : 'pageXOffset';
-        const method = top ? 'scrollTop' : 'scrollLeft';
-        let ret = target[prop];
+        const prop = top ? 'pageYOffset' : 'pageXOffset'
+        const method = top ? 'scrollTop' : 'scrollLeft'
+        let ret = target[prop]
        if (typeof ret !== 'number') {
-          ret = window.document.documentElement[method];
+          ret = window.document.documentElement[method]
        }
-        return ret;
-      };
+        return ret
+      }

      const sticky = () => {
        if (active) {
@@ -47,36 +47,36 @@ vueSticky.install = Vue => {
          elStyle.height = `${el.offsetHeight}px`
        }

-        elStyle.position = 'fixed';
-        elStyle.width = `${elWidth}px`;
-        placeholder.style.display = 'inline-block';
+        elStyle.position = 'fixed'
+        elStyle.width = `${elWidth}px`
+        placeholder.style.display = 'inline-block'
        active = true
-      };
+      }

      const reset = () => {
        if (!active) {
          return
        }

-        elStyle.position = '';
-        placeholder.style.display = 'none';
-        active = false;
-      };
+        elStyle.position = ''
+        placeholder.style.display = 'none'
+        active = false
+      }

      const check = () => {
-        const scrollTop = getScroll(window, true);
-        const offsetTop = el.getBoundingClientRect().top;
+        const scrollTop = getScroll(window, true)
+        const offsetTop = el.getBoundingClientRect().top
        if (offsetTop < stickyTop) {
-          sticky();
+          sticky()
        } else {
          if (scrollTop < elHeight + stickyTop) {
            reset()
          }
        }
-      };
+      }
      listenAction = () => {
        check()
-      };
+      }

      window.addEventListener('scroll', listenAction)
    },
@@ -85,7 +85,7 @@ vueSticky.install = Vue => {
      window.removeEventListener('scroll', listenAction)
    }
  })
-};
+}

 export default vueSticky

--- a/src/directive/waves.js
+++ b/src/directive/waves.js
@@ -1,47 +0,0 @@
-import './waves.css';
-
-const vueWaves = {};
-vueWaves.install = (Vue, options = {}) => {
-  Vue.directive('waves', {
-    bind(el, binding) {
-      el.addEventListener('click', e => {
-        const customOpts = Object.assign(options, binding.value);
-        const opts = Object.assign({
-            ele: el, // 波纹作用元素
-            type: 'hit', // hit点击位置扩散center中心点扩展
-            color: 'rgba(0, 0, 0, 0.15)' // 波纹颜色
-          }, customOpts),
-          target = opts.ele;
-        if (target) {
-          target.style.position = 'relative';
-          target.style.overflow = 'hidden';
-          const rect = target.getBoundingClientRect();
-          let ripple = target.querySelector('.waves-ripple');
-          if (!ripple) {
-            ripple = document.createElement('span');
-            ripple.className = 'waves-ripple';
-            ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px';
-            target.appendChild(ripple);
-          } else {
-            ripple.className = 'waves-ripple';
-          }
-          switch (opts.type) {
-            case 'center':
-              ripple.style.top = (rect.height / 2 - ripple.offsetHeight / 2) + 'px';
-              ripple.style.left = (rect.width / 2 - ripple.offsetWidth / 2) + 'px';
-              break;
-            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.color;
-          ripple.className = 'waves-ripple z-active';
-          return false;
-        }
-      }, false);
-    }
-  })
-};
-
-export default vueWaves;
-
--- a/src/directive/waves/index.js
+++ b/src/directive/waves/index.js
@@ -0,0 +1,13 @@
+import waves from './waves'
+
+const install = function(Vue) {
+  Vue.directive('waves', waves)
+}
+
+if (window.Vue) {
+  window.waves = waves
+  Vue.use(install); // eslint-disable-line
+}
+
+waves.install = install
+export default waves
--- a/src/directive/waves/waves.css
+++ b/src/directive/waves/waves.css
--- a/src/directive/waves/waves.js
+++ b/src/directive/waves/waves.js
@@ -0,0 +1,42 @@
+import './waves.css'
+
+export default{
+  bind(el, binding) {
+    el.addEventListener('click', e => {
+      const customOpts = Object.assign({}, binding.value)
+      const opts = Object.assign({
+        ele: el, // 波纹作用元素
+        type: 'hit', // hit点击位置扩散center中心点扩展
+        color: 'rgba(0, 0, 0, 0.15)' // 波纹颜色
+      }, customOpts)
+      const target = opts.ele
+      if (target) {
+        target.style.position = 'relative'
+        target.style.overflow = 'hidden'
+        const rect = target.getBoundingClientRect()
+        let ripple = target.querySelector('.waves-ripple')
+        if (!ripple) {
+          ripple = document.createElement('span')
+          ripple.className = 'waves-ripple'
+          ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px'
+          target.appendChild(ripple)
+        } else {
+          ripple.className = 'waves-ripple'
+        }
+        switch (opts.type) {
+          case 'center':
+            ripple.style.top = (rect.height / 2 - ripple.offsetHeight / 2) + 'px'
+            ripple.style.left = (rect.width / 2 - ripple.offsetWidth / 2) + 'px'
+            break
+          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.color
+        ripple.className = 'waves-ripple z-active'
+        return false
+      }
+    }, false)
+  }
+}
+
--- a/src/errorLog.js
+++ b/src/errorLog.js
@@ -0,0 +1,21 @@
+import Vue from 'vue'
+import store from './store'
+
+// you can set only in production env show the error-log
+// if (process.env.NODE_ENV === 'production') {
+
+Vue.config.errorHandler = function(err, vm, info, a) {
+  // Don't ask me why I use Vue.nextTick, it just a hack.
+  // detail see https://forum.vuejs.org/t/dispatch-in-vue-config-errorhandler-has-some-problem/23500
+  Vue.nextTick(() => {
+    store.dispatch('addErrorLog', {
+      err,
+      vm,
+      info,
+      url: window.location.href
+    })
+    console.error(err, info)
+  })
+}
+
+// }
--- a/src/filters/index.js
+++ b/src/filters/index.js
@@ -4,8 +4,9 @@ function pluralize(time, label) {
  }
  return time + label + 's'
 }
+
 export function timeAgo(time) {
-  const between = Date.now() / 1000 - Number(time);
+  const between = Date.now() / 1000 - Number(time)
  if (between < 3600) {
    return pluralize(~~(between / 60), ' minute')
  } else if (between < 86400) {
@@ -17,19 +18,19 @@ export function timeAgo(time) {

 export function parseTime(time, cFormat) {
  if (arguments.length === 0) {
-    return null;
+    return null
  }

  if ((time + '').length === 10) {
    time = +time * 1000
  }

-  const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}';
-  let date;
-  if (typeof time == 'object') {
-    date = time;
+  const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
+  let date
+  if (typeof time === 'object') {
+    date = time
  } else {
-    date = new Date(parseInt(time));
+    date = new Date(parseInt(time))
  }
  const formatObj = {
    y: date.getFullYear(),
@@ -39,24 +40,24 @@ export function parseTime(time, cFormat) {
    i: date.getMinutes(),
    s: date.getSeconds(),
    a: date.getDay()
-  };
+  }
  const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
-    let value = formatObj[key];
-    if (key === 'a') return ['一', '二', '三', '四', '五', '六', '日'][value - 1];
+    let value = formatObj[key]
+    if (key === 'a') return ['一', '二', '三', '四', '五', '六', '日'][value - 1]
    if (result.length > 0 && value < 10) {
-      value = '0' + value;
+      value = '0' + value
    }
-    return value || 0;
-  });
-  return time_str;
+    return value || 0
+  })
+  return time_str
 }

 export function formatTime(time, option) {
-  time = +time * 1000;
-  const d = new Date(time);
-  const now = Date.now();
+  time = +time * 1000
+  const d = new Date(time)
+  const now = Date.now()

-  const diff = (now - d) / 1000;
+  const diff = (now - d) / 1000

  if (diff < 30) {
    return '刚刚'
@@ -77,27 +78,27 @@ export function formatTime(time, option) {
 /* 数字 格式化*/
 export function nFormatter(num, digits) {
  const si = [
-        { value: 1E18, symbol: 'E' },
-        { value: 1E15, symbol: 'P' },
-        { value: 1E12, symbol: 'T' },
-        { value: 1E9, symbol: 'G' },
-        { value: 1E6, symbol: 'M' },
-        { value: 1E3, symbol: 'k' }
-  ];
+    { value: 1E18, symbol: 'E' },
+    { value: 1E15, symbol: 'P' },
+    { value: 1E12, symbol: 'T' },
+    { value: 1E9, symbol: 'G' },
+    { value: 1E6, symbol: 'M' },
+    { value: 1E3, symbol: 'k' }
+  ]
  for (let i = 0; i < si.length; i++) {
    if (num >= si[i].value) {
-      return (num / si[i].value + 0.1).toFixed(digits).replace(/\.0+$|(\.[0-9]*[1-9])0+$/, '$1') + si[i].symbol;
+      return (num / si[i].value + 0.1).toFixed(digits).replace(/\.0+$|(\.[0-9]*[1-9])0+$/, '$1') + si[i].symbol
    }
  }
-  return num.toString();
+  return num.toString()
 }

 export function html2Text(val) {
-  const div = document.createElement('div');
-  div.innerHTML = val;
-  return div.textContent || div.innerText;
+  const div = document.createElement('div')
+  div.innerHTML = val
+  return div.textContent || div.innerText
 }

 export function toThousandslsFilter(num) {
-  return (+num || 0).toString().replace(/^-?\d+/g, m => m.replace(/(?=(?!\b)(\d{3})+$)/g, ','));
+  return (+num || 0).toString().replace(/^-?\d+/g, m => m.replace(/(?=(?!\b)(\d{3})+$)/g, ','))
 }
--- a/src/icons/index.js
+++ b/src/icons/index.js
@@ -0,0 +1,12 @@
+import Vue from 'vue'
+import SvgIcon from '@/components/SvgIcon'// svg组件
+import generateIconsView from '@/views/svg-icons/generateIconsView.js'// just for @/views/icons , you can delete it
+
+// register globally
+Vue.component('svg-icon', SvgIcon)
+
+const requireAll = requireContext => requireContext.keys().map(requireContext)
+const req = require.context('./svg', false, /\.svg$/)
+const iconMap = requireAll(req)
+
+generateIconsView.generate(iconMap) // just for @/views/icons , you can delete it
--- a/src/icons/svg/404.svg
+++ b/src/icons/svg/404.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1503994850540" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10206" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M931.6 585.6l0 79c28.6-60.2 44.8-127.4 44.8-198.4C976.4 211 769.4 4 514.2 4S52 211 52 466.2c0 3.2 0.2 6.4 0.2 9.6l166-206 96.4 0L171.8 485.6l46.4 0 0-54.8 99.2-154.6 0 209.4 0 100 0 82.4-99.2 0 0-82.4L67.6 585.6c43 161 170.6 287.4 332.4 328.6-10.4 26.2-40.6 89.4-90.8 100.6-62.2 14 168.8 3.4 333.6-104.6 126.6-36.6 230.8-125.8 287.4-242.2l-97.6 0 0-82.4-166.2 0 0-87.2 0-12.8L666.4 476l166.2-206.2 94 0-140.4 215.8 46.4 0 0-59 99.2-154 0 213.2L931.8 585.6zM366.2 608c-4.8-11.2-7.2-23.2-7.2-36L359 357.6c0-12.8 2.4-24.8 7.2-36 4.8-11.2 11.4-21 19.6-29.2 8.2-8.2 18-14.8 29.2-19.6 11.2-4.8 23.2-7.2 36-7.2l81.6 0c12.8 0 24.8 2.4 36 7.2 11 4.8 20.6 11.2 28.8 19.2l-88.6 129.4 0-23c0-4.8-1.6-8.8-4.8-12-3.2-3.2-7.2-4.8-12-4.8-4.8 0-8.8 1.6-12 4.8-3.2 3.2-4.8 7.2-4.8 12l0 72L372.6 620C370.2 616.2 368 612.2 366.2 608zM624.4 572c0 12.8-2.4 24.8-7.2 36-4.8 11.2-11.4 21-19.6 29.2-8.2 8.2-18 14.8-29.2 19.6-11.2 4.8-23.2 7.2-36 7.2l-81.6 0c-12.8 0-24.8-2.4-36-7.2-11.2-4.8-21-11.4-29.2-19.6-3.6-3.6-7-7.8-10-12l99.2-144.6 0 50.6c0 4.8 1.6 8.8 4.8 12 3.2 3.2 7.2 4.8 12 4.8 4.8 0 8.8-1.6 12-4.8 3.2-3.2 4.8-7.2 4.8-12l0-99.6 92.6-135.2c6.6 7.4 12 15.8 16 25.2 4.8 11.2 7.2 23.2 7.2 36L624.2 572z" p-id="10207"></path></svg>
--- a/src/icons/svg/bug.svg
+++ b/src/icons/svg/bug.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1503994864347" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10314" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><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="10315"></path></svg>
--- a/src/icons/svg/chart.svg
+++ b/src/icons/svg/chart.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1503994873331" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10422" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M64 448 320 448 320 960 64 960 64 448 64 448ZM704 256 960 256 960 960 704 960 704 256 704 256ZM384 64 640 64 640 960 384 960 384 64 384 64Z" p-id="10423"></path></svg>
--- a/src/icons/svg/clipboard.svg
+++ b/src/icons/svg/clipboard.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1506419860538" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4662" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M438.857143 950.857143l512 0 0-365.714286-237.714286 0q-22.820571 0-38.838857-16.018286t-16.018286-38.838857l0-237.714286-219.428571 0 0 658.285714zM585.142857 128l0-36.571429q0-7.460571-5.412571-12.873143t-12.873143-5.412571l-402.285714 0q-7.460571 0-12.873143 5.412571t-5.412571 12.873143l0 36.571429q0 7.460571 5.412571 12.873143t12.873143 5.412571l402.285714 0q7.460571 0 12.873143-5.412571t5.412571-12.873143zM731.428571 512l170.861714 0-170.861714-170.861714 0 170.861714zM1024 585.142857l0 384q0 22.820571-16.018286 38.838857t-38.838857 16.018286l-548.571429 0q-22.820571 0-38.838857-16.018286t-16.018286-38.838857l0-91.428571-310.857143 0q-22.820571 0-38.838857-16.018286t-16.018286-38.838857l0-768q0-22.820571 16.018286-38.838857t38.838857-16.018286l621.714286 0q22.820571 0 38.838857 16.018286t16.018286 38.838857l0 187.465143q11.995429 7.460571 20.553143 16.018286l233.179429 233.179429q16.018286 16.018286 27.428571 43.446857t11.410286 50.322286z" p-id="4663"></path></svg>
--- a/src/icons/svg/component.svg
+++ b/src/icons/svg/component.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1506329916765" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1661" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M64 64 448 64 448 448 64 448 64 64ZM64 576 448 576 448 960 64 960 64 576ZM576 576 960 576 960 960 576 960 576 576ZM768 448C874.038669 448 960 362.038672 960 256 960 149.961328 874.038669 64 768 64 661.961328 64 576 149.961328 576 256 576 362.038672 661.961328 448 768 448Z" p-id="1662"></path></svg>
--- a/src/icons/svg/dashboard.svg
+++ b/src/icons/svg/dashboard.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1509611822979" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10379" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><defs><style type="text/css"></style></defs><path d="M219.428571 658.285714q0-30.285714-21.428571-51.714285T146.285714 585.142857t-51.714285 21.428572T73.142857 658.285714t21.428572 51.714286T146.285714 731.428571t51.714286-21.428571T219.428571 658.285714z m109.714286-256q0-30.285714-21.428571-51.714285T256 329.142857t-51.714286 21.428572T182.857143 402.285714t21.428571 51.714286T256 475.428571t51.714286-21.428571T329.142857 402.285714z m244.571429 274.857143l57.714285-218.285714q3.428571-14.857143-4.285714-27.714286T605.142857 414.285714t-27.428571 3.714286-17.142857 22.571429l-57.714286 218.285714q-34.285714 2.857143-61.142857 24.857143t-36 56.285714q-11.428571 44 11.428571 83.428571t66.857143 50.857143 83.428571-11.428571 50.857143-66.857143q9.142857-34.285714-3.428571-66.857143t-41.142857-52z m377.142857-18.857143q0-30.285714-21.428572-51.714285T877.714286 585.142857t-51.714286 21.428572-21.428571 51.714285 21.428571 51.714286 51.714286 21.428571 51.714285-21.428571 21.428572-51.714286z m-365.714286-365.714285q0-30.285714-21.428571-51.714286T512 219.428571t-51.714286 21.428572T438.857143 292.571429t21.428571 51.714285T512 365.714286t51.714286-21.428572T585.142857 292.571429z m256 109.714285q0-30.285714-21.428571-51.714285T768 329.142857t-51.714286 21.428572T694.857143 402.285714t21.428571 51.714286T768 475.428571t51.714286-21.428571T841.142857 402.285714z m182.857143 256q0 149.142857-80.571429 276-10.857143 16.571429-30.857142 16.571429H111.428571q-20 0-30.857142-16.571429Q0 808 0 658.285714q0-104 40.571429-198.857143t109.142857-163.428571 163.428571-109.142857 198.857143-40.571429 198.857143 40.571429 163.428571 109.142857 109.142857 163.428571 40.571429 198.857143z" p-id="10380"></path></svg>
--- a/src/icons/svg/documentation.svg
+++ b/src/icons/svg/documentation.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1510826638494" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1669" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M743.253333 144.184889H374.499556v734.378667H743.253333a92.017778 92.017778 0 0 0 92.16-91.818667V235.975111a91.989333 91.989333 0 0 0-92.16-91.790222z m-0.398222 293.888c0.398222 20.48-1.507556 26.794667-9.756444 26.794667-3.612444 0.597333-9.415111-1.621333-17.863111-8.874667-12.657778-8.931556-21.504-16.753778-29.155556-21.617778-6.798222-5.888-17.550222-5.205333-24.291556 0-8.874667 4.949333-21.532444 15.872-28.814222 21.617778-8.988444 7.907556-15.018667 8.874667-17.180444 8.874667-8.618667 0-10.837333-7.424-10.496-26.794667l-0.312889-223.601778c0-21.162667 8.561778-24.376889 17.265778-24.376889h103.708444c10.552889 0 17.294222 4.835556 17.294222 24.376889l-0.398222 223.601778zM190.122667 235.975111V786.773333a92.046222 92.046222 0 0 0 92.188444 91.818667h46.08V144.184889h-46.08a92.017778 92.017778 0 0 0-92.188444 91.790222z" fill="" p-id="1670"></path></svg>
--- a/src/icons/svg/drag.svg
+++ b/src/icons/svg/drag.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1503994190757" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9007" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M574.957891 267.016403 511.503696 267.016403l204.64896 0L511.212054 63.654762l-203.361641 203.361641L449.041086 267.016403l0 189.662641L258.687714 456.679044l0 125.916804L449.041086 582.595848l0 190.354396 125.916804 0L574.957891 582.595848l188.874695 0L763.832586 456.679044 574.957891 456.679044 574.957891 267.016403zM511.25401 960.345238l189.620685-187.394994L323.125305 772.950244 511.25401 960.345238zM71.291696 518.891967l187.394994 189.620685L258.68669 330.762239 71.291696 518.891967zM763.832586 330.762239l0 377.74939 188.874695-189.620685L763.832586 330.762239z" p-id="9008"></path></svg>
--- a/src/icons/svg/email.svg
+++ b/src/icons/svg/email.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1503994210967" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9120" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M513 583.8l448.5-448.5c-11.6-4.7-24.3-7.3-37.5-7.3L100 128c-12.7 0-24.9 2.4-36.1 6.7L513 583.8z" p-id="9121"></path><path d="M513 674.3 14.6 175.9C5.3 191.1 0 208.9 0 228l0 568c0 55.2 44.8 100 100 100l824 0c55.2 0 100-44.8 100-100l0-568c0-18.5-5.1-35.9-13.9-50.8L513 674.3z" p-id="9122"></path></svg>
--- a/src/icons/svg/example.svg
+++ b/src/icons/svg/example.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1503994811583" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9878" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M770.56 460.8l250.88 0C998.4 220.16 803.84 25.6 563.2 2.56l0 250.88C668.16 273.92 750.08 355.84 770.56 460.8L770.56 460.8zM770.56 460.8" p-id="9879"></path><path d="M460.8 253.44 460.8 2.56C220.16 25.6 25.6 220.16 2.56 460.8l250.88 0C273.92 355.84 355.84 273.92 460.8 253.44L460.8 253.44zM460.8 253.44" p-id="9880"></path><path d="M563.2 770.56l0 250.88c243.2-23.04 435.2-217.6 460.8-460.8l-250.88 0C750.08 668.16 668.16 750.08 563.2 770.56L563.2 770.56zM563.2 770.56" p-id="9881"></path><path d="M253.44 563.2 2.56 563.2c23.04 243.2 217.6 435.2 460.8 460.8l0-250.88C355.84 750.08 273.92 668.16 253.44 563.2L253.44 563.2zM253.44 563.2" p-id="9882"></path></svg>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Pan	de3b29b5f3	[release] 3.5.1	2018-01-05 13:29:57 +08:00
Pan	54acf1e0d5	perf[permission]:set role => roles	2018-01-05 11:38:34 +08:00
Pan	de08e49f19	fix[i18n]: fixed defalut language bug	2018-01-04 12:37:08 +08:00
Pan	2472107768	perf[i18n]: refine generateTitle function	2018-01-04 10:04:14 +08:00
Pan	d18902dfee	perf[style]: refine css	2018-01-04 10:03:33 +08:00
Pan	9ba2648689	fix[sidebar]: fixed nest menu and noDropdown item bug	2018-01-03 13:40:22 +08:00
Pan	1d0b26cec8	perf[upload-excel]: support drag upload	2018-01-02 16:30:59 +08:00
Pan	ea7e139696	perf[core]: add postcss-url	2018-01-02 10:44:35 +08:00
Pan	deac95da1b	[release] 3.5.0	2017-12-29 16:31:33 +08:00
Pan	2b51b987be	fixed typo	2017-12-29 16:11:20 +08:00
花裤衩	45fef9b431	Feature/english (#381 ) * perf[navbar]: set langSelect to component && refine errorLog component * feat[login]:add 18n to login form * fix[pagination]: fixed when selected page-sizes * perf[i18n]:dashboard document svg permission * perf[charts]: perf effect * perf[i18n]:excel && zip * perf[i18n]: table && errorLog && theme * perf[i18n]: components * perf[i18n]: direct use $t * perf[i18n]: complex-table * update README.md * update README.md 📘 * perf[i18n]: refine code comments	2017-12-29 16:07:42 +08:00
Pan	83e56488d8	fix[pagination]: fixed when selected page-sizes	2017-12-25 15:49:52 +08:00
Pan	f3bfaa0f2b	feat[login]:add 18n to login form	2017-12-25 15:49:52 +08:00
Pan	e261fbcbfb	perf[navbar]: set langSelect to component && refine errorLog component	2017-12-25 15:49:52 +08:00
Pan	471c297f13	perf[css]: refine element-ui default size	2017-12-22 16:25:07 +08:00
Pan	093475ee50	[release] 3.4.1	2017-12-22 11:10:46 +08:00
Pan	cb3578e5c3	perf[drag-table]:refine the effect && fixed row-key bug	2017-12-22 11:09:54 +08:00
tlx6550	fe25c4d96b	fix[tags-view]: fixed bug in DEL_OTHERS_VIEWS (#368 )	2017-12-22 10:29:47 +08:00
Pan	7fef8568c2	perf: use import replace require.ensure	2017-12-21 13:25:29 +08:00
Pan	0dfa56c73e	perf: element-ui css	2017-12-18 18:47:06 +08:00
Pan	642d48e372	fix :fixed typo	2017-12-18 10:25:53 +08:00
Pan	021c147b31	perf:code	2017-12-18 10:19:35 +08:00
Pan	04d9b849dd	rm eventsource-polyfill	2017-12-15 14:25:36 +08:00
Pan	2e74f0d782	[release]: 3.4.0	2017-12-15 14:09:51 +08:00
花裤衩	dc162093cc	refactor[core]: use webpack-dev-server now (#355 ) * bump deps: update vue-splitpane version * refactor[chore]: use webpack-dev-serve build * perf:settings * doc: uodate readme	2017-12-15 14:07:55 +08:00
Pan	8fd786c4ed	perf[tags-view]: when closeOthersTags moveToCurrentTag	2017-12-14 11:01:07 +08:00
Pan	54e7ce2b76	bump deps: update some deps version	2017-12-14 10:53:57 +08:00
Pan	f5563b4eed	[release] 3.3.0	2017-12-13 18:35:38 +08:00
Pan	0c80fba84c	doc: update readme	2017-12-13 18:35:07 +08:00
Pan	4d3bbae183	perf[tags-view]:refine the style && format code	2017-12-13 18:33:12 +08:00
leij1ang	b6d97f1806	feat[tags-view]: tags-view add contextmenu (#343 ) * add the menu by right-clicking the tags * bug fixed * refine	2017-12-13 17:43:03 +08:00
Pan	a68413cb8f	refactor[errorLog]: save the logs in vuex	2017-12-13 13:52:14 +08:00
Pan	f9aaaa9091	perf[errorLog]:optimized error-log	2017-12-12 18:14:31 +08:00
Pan	85492f148f	fix[scrollPane&&scrollBar]:fixed scroll bug in Firefox	2017-12-12 13:28:33 +08:00
Pan	b7ca786751	perf[chore]:set travis notifications:false	2017-12-11 14:20:23 +08:00
花裤衩	c32bd73b42	Update README.md	2017-12-11 14:06:14 +08:00
Pan	3aacd3cccd	add[chore]:add travis	2017-12-11 13:59:49 +08:00
Pan	e7f626f015	[release] 3.2.0	2017-12-08 18:20:15 +08:00
Pan	b53d0945ab	fix(dndList): fixed the name same as router	2017-12-08 18:09:15 +08:00
Pan	ca75f7bcbc	perf(tagsView):split to single modules	2017-12-08 16:17:40 +08:00
lvsmart	b7939165d1	get real version from node_modules	2017-12-08 11:49:34 +08:00
Pan	ebc2ac08b7	add(inlineEditable): add the calcel btn to restore the title	2017-12-08 11:07:20 +08:00
Pan	a9d2978c31	perf[permission]: set replace: true so the navigation will not leave a history record	2017-12-07 17:33:30 +08:00
Pan	a4597887ac	style:refine css	2017-12-07 16:03:07 +08:00
Pan	44b180a7b3	[release] 3.1.1	2017-12-06 14:19:06 +08:00
Pan	acebaeae0c	perf(i18n): add generateTitle to utils	2017-12-06 14:18:28 +08:00
Pan	d09923ff4f	fix[sidebar]:fixed when sidebar item only has one children but nested #327	2017-12-05 18:42:15 +08:00
Pan	fc1a13d10b	[release] 3.1.0	2017-12-05 11:41:57 +08:00
Pan	705b9ccefd	add(tags-view): moveToCurrentTag	2017-12-05 11:15:39 +08:00
Pan	c84964d77c	perf(sidebar): rm unique-opened	2017-12-04 17:33:58 +08:00
Pan	8f9de5c641	perf:refine dashboard responsive	2017-12-04 14:28:26 +08:00
Pan	96a7035b1d	doc:add new article	2017-12-01 17:48:22 +08:00
Pan	7f2bd58035	doc:add new article	2017-12-01 17:47:08 +08:00
Pan	b4b9d166c4	perf:el-agination add background	2017-11-30 18:18:36 +08:00
Pan	da24d61008	dump: update element-ui version	2017-11-30 18:17:54 +08:00
Pan	8ce571b61d	perf:rm mock api timeout	2017-11-30 18:04:00 +08:00
Pan	38192b828d	perf:refine complexTable demo	2017-11-30 18:02:31 +08:00
Pan	72f653dcc7	perf:refine article demo	2017-11-30 16:55:46 +08:00
donng	4dfa878fc6	index首页代码修改	2017-11-30 15:46:41 +08:00
Pan	cef1f11931	fix:fixed sticky component bug in keep-alive	2017-11-29 15:57:47 +08:00
Pan	443c7aed3c	style:fixed class conflict	2017-11-29 14:17:37 +08:00
Pan	0f5304112c	fix:fixed theme-picker bug	2017-11-29 14:11:25 +08:00
Pan	dd3e22d5a1	perf:change i18n-demo to resizeable	2017-11-29 11:33:11 +08:00
Pan	d99cb068aa	fix:fixed tags-view bug	2017-11-29 11:22:25 +08:00
Pan	394f366aac	doc:update readme	2017-11-29 11:21:48 +08:00
Pan	e5ed2a39a5	[release] 3.0.0	2017-11-29 10:41:02 +08:00
Pan	39d26068ec	doc:update readme	2017-11-29 10:33:39 +08:00
Pan	d68d464142	Merge branch 'refacor/style'	2017-11-29 10:07:28 +08:00
Pan	d476e32032	Merge branch 'master' into refacor/style	2017-11-29 10:05:09 +08:00
Pan	8f2b0c94ba	fix:fixed case-sensitive bug	2017-11-28 22:28:01 +08:00
Pan	e00f2aedc7	fix:fixed case-sensitive bug	2017-11-28 18:35:27 +08:00
Pan	df28ad7078	fix:fixed case-sensitive bug	2017-11-28 18:34:57 +08:00
Pan	4feb89c94e	bump:update vue version	2017-11-28 15:46:57 +08:00
Pan	a56d6f0cbd	rm:remove redundant code	2017-11-27 13:58:42 +08:00
Pan	bee26561aa	feat:add share demo	2017-11-27 11:47:13 +08:00
Pan	2ec9fe74a8	fix:fixed view tags bug	2017-11-27 11:11:28 +08:00
Pan	dec160fd1e	chore: change inject package dependencies	2017-11-27 10:51:54 +08:00
Pan	c06baffb17	perf:format code	2017-11-27 10:46:08 +08:00
Pan	f876b9b678	perf:refine breadcrumb	2017-11-24 15:35:38 +08:00
Pan	061fa1f2a5	style:refien css	2017-11-24 14:34:19 +08:00
Pan	e0b8f09a9e	perf:ignore package-lock.json	2017-11-23 16:32:02 +08:00
Pan	ede541e2f5	rm:package-lock.json	2017-11-23 16:31:33 +08:00
Pan	e0f6248d0e	fix:postcss-loader sourceMap	2017-11-23 16:30:51 +08:00
Pan	1c4c3380e6	perf:change favicon	2017-11-23 10:35:54 +08:00
Pan	073b7219ff	chore:refine build:prod	2017-11-23 10:33:29 +08:00
Pan	98604af104	style:refine tagsview css	2017-11-22 16:16:12 +08:00
Pan	3cb1e321d3	refactor:change tabs-view to tags-view	2017-11-22 11:21:09 +08:00
Pan	f2fcdee815	perf:format code&&fix typo	2017-11-22 11:01:19 +08:00
Pan	497b96f931	Merge branch 'refacor/style' of https://github.com/PanJiaChen/vue-element-admin into refacor/style	2017-11-22 10:01:55 +08:00
Pan	ed34ea3e07	perf:replace favicon	2017-11-22 10:01:53 +08:00
花裤衩	47a373803e	Update README.md	2017-11-21 16:15:34 +08:00
花裤衩	e8ad1f835c	Update README.md	2017-11-21 16:10:22 +08:00
Pan	43a51148fe	refactor:dropdown menu	2017-11-21 10:37:33 +08:00
Pan	3f9df15c30	refactor:refine sidebar css	2017-11-21 10:14:20 +08:00
Pan	a9363ce541	bump:update vue	2017-11-21 09:38:43 +08:00
Pan	690c779c64	refactor:add documentation	2017-11-20 17:37:58 +08:00
Pan	f6279077de	fix:handleSetLineChartData bug	2017-11-17 18:45:40 +08:00
Pan	6b9e89055d	update:package.json	2017-11-17 18:27:55 +08:00
Pan	6b13ffce66	fix:fix tinymce destroy bug	2017-11-17 17:57:17 +08:00
Pan	d20585a3f9	refactor:foramt views/component-demo	2017-11-17 17:51:41 +08:00
Pan	46b4f74969	rm:remove chart/index	2017-11-17 15:10:09 +08:00
Pan	8c204b9837	rm:remove keyboard2 demo	2017-11-17 15:07:21 +08:00
Pan	339d760771	refactor:format code	2017-11-17 14:57:39 +08:00
Pan	6d6a9df5b8	refactor:views/components	2017-11-17 11:36:49 +08:00
Pan	1286324214	refactor:layout	2017-11-16 18:50:59 +08:00
Pan	372c4489f0	style:refine 404	2017-11-16 17:55:42 +08:00
Pan	1511fe3778	fix:remove semi	2017-11-16 17:26:34 +08:00
Pan	122f7cafa6	Merge branch 'refacor/style' of https://github.com/PanJiaChen/vue-element-admin into refacor/style	2017-11-16 17:25:32 +08:00
Pan	6d1059f6a8	refactor:dashboard	2017-11-16 17:25:28 +08:00
Reza Haidari .A	1d4f12187f	add validate email method	2017-11-15 01:37:50 -06:00
花裤衩	925dbeb045	Update README.md	2017-11-14 00:37:12 -06:00
Pan	35055c5e51	style:breadcrumb add transition	2017-11-14 10:09:32 +08:00
Pan	e0a1e249ee	update:update echarts version&&element-ui	2017-11-13 18:42:47 +08:00
Pan	a0d83e2ffc	update:update echarts version	2017-11-10 13:59:52 +08:00
Pan	53059d5ccf	add package-lock.json	2017-11-10 13:54:43 +08:00
Pan	fa5e6d9ecf	Add postcss-loader && update echarts	2017-11-10 13:52:38 +08:00
Pan	4e25a17bff	fix:fix postcss config	2017-11-09 18:27:00 +08:00
Pan	61095a9f2c	refactor:refine webpack.prod.conf.js	2017-11-09 18:17:08 +08:00
Pan	61deec548c	refactor:change name=> fetch.js to request.js	2017-11-07 13:55:57 +08:00
Pan	5eda0685ed	add: add transition.css	2017-11-07 11:41:59 +08:00
Pan	11beefdb44	add: add variables.scss	2017-11-06 18:18:14 +08:00
Pan	7e1ba16d12	refactor:add scroll-bar to sidebar	2017-11-06 16:02:13 +08:00
Pan	7451ed6299	style:refine sidebar css	2017-11-06 15:24:04 +08:00
Pan	71aa416d71	style:refine css	2017-11-06 13:52:13 +08:00
Pan	4723a02a4b	refine: refine i18n	2017-11-06 13:46:29 +08:00
Pan	e05da2650b	feature:add i18n	2017-11-03 18:37:49 +08:00
Pan	bb1d939a94	reactor:refine code&&demo	2017-11-02 17:58:35 +08:00
Pan	ac5d087ea4	style:refine sidebar css	2017-11-02 15:55:56 +08:00
Pan	c53fb7fbb1	style:refine sidebar css	2017-11-02 15:51:29 +08:00
Pan	660ff765f5	fix:fix tabsView path bug	2017-11-01 18:43:06 +08:00
Pan	aaf24b4654	fix:levelbar&&tabsview bug	2017-11-01 17:55:11 +08:00
Pan	8211016078	refactor:replace custom-theme	2017-11-01 17:03:17 +08:00
Pan	374fd3ffeb	feature:change theme online	2017-11-01 15:48:30 +08:00
Pan	e8b34bbc0d	refactor:update element-ui	2017-11-01 11:26:57 +08:00
花裤衩	74cbb26209	Update README.md	2017-10-31 21:05:31 -05:00
Pan	fe31c88193	refactor:update element	2017-11-01 10:03:28 +08:00
Pan	3b89cde53a	refactor: echarts addEventListener about resize	2017-10-31 17:25:57 +08:00
Pan	59e240eb9a	upload:upload vue && change scope to slot-scope	2017-10-31 16:25:19 +08:00
Pan	98d5f9a247	lint:format code style	2017-10-31 16:04:30 +08:00
Pan	3666148ddc	refactor:update package.json	2017-10-31 15:55:59 +08:00
Pan	d56831679e	style:refine tabsview css	2017-10-31 14:42:58 +08:00
Pan	2c868f47d9	fix:fix tinymce bug in <keep-alive>	2017-10-31 11:06:41 +08:00
Pan	1ae31fdd45	refactor:add keep-alive && component add name	2017-10-31 10:49:24 +08:00
Pan	a932272b8f	refactor:router	2017-10-26 18:27:39 +08:00
Pan	577e4dc17e	refactor: case sensitive	2017-10-26 14:21:21 +08:00
Pan	0d9188b206	refactor: case sensitive	2017-10-26 14:21:03 +08:00
Pan	5b3b8b87d1	refactor:change MdEditor to MarkdownEditor	2017-10-26 14:06:32 +08:00
Pan	2c82d0a28e	refactor: set markdown autoDownloadFontAwesome to false	2017-10-26 11:07:51 +08:00
Pan	913f6c8bec	[release] 2.2.1	2017-10-25 17:14:57 +08:00
Pan	76f4017470	fix: fix getUserInfo by cookie bug	2017-10-25 17:12:36 +08:00
Pan	feb6785654	refactor: refine form example	2017-10-25 09:54:21 +08:00
Pan	59073fb013	refactor: add keep-alive	2017-10-25 09:54:06 +08:00
Pan	c82ed3fcbf	refactor: change icon-svg to svg-icon	2017-10-24 17:43:55 +08:00
Pan	f99b97d9f1	refactor: change DndList name	2017-10-24 17:37:14 +08:00
Pan	99417081ed	refactor: case sensitive	2017-10-24 17:29:32 +08:00
Pan	88d1338f29	refactor: case sensitive	2017-10-24 17:29:11 +08:00
Pan	3ded46cf23	refactor: case sensitive	2017-10-24 16:38:11 +08:00
Pan	5857db3393	refactor: case sensitive	2017-10-24 16:37:38 +08:00
Pan	a465652be6	refactor: components name	2017-10-24 16:30:46 +08:00
Pan	a8459fa572	style: refactor styles	2017-10-24 14:49:29 +08:00
Pan	cddace507d	style: refine screenful style	2017-10-23 14:26:07 +08:00
Pan	e762056e80	refactor: tabsview	2017-10-23 13:45:09 +08:00
Pan	18ec63d238	style: change hamburger default style	2017-10-23 11:01:38 +08:00
Pan	ccddfe87bc	refactor: refine layout directory structure	2017-10-23 10:53:39 +08:00
Pan	87a44ae7f5	doc: add note for NProgress.done	2017-10-23 10:28:19 +08:00
dingyi1993	1c852db0ef	fix:fix undone NProgress.	2017-10-22 21:22:43 -05:00
Pan	9463c50e06	feature: tinymce add setContent && getContent method	2017-10-18 17:02:35 +08:00
Pan	658abf664d	refine: add parseTime timestamp demo	2017-10-16 10:16:44 +08:00
spiritree	4940dd4040	fix:fix `undefined` bug in export excel	2017-10-12 03:46:49 -05:00
spiritree	91bd31e1e2	refine:refine code	2017-10-12 02:36:56 -05:00
spiritree	a8602e78f0	refine:export adaptive colwidth in excel	2017-10-12 02:36:56 -05:00
Pan	516897b97a	Fix:fix autoprefixer explanation	2017-10-08 11:19:20 +08:00
Pan	2725285d26	fix build_config bug	2017-09-29 16:31:44 +08:00
Pan	a842a4b451	refine:refine build_config	2017-09-29 16:31:44 +08:00
Pan	be0606ebbc	update echarts	2017-09-28 15:31:49 +08:00
Pan	a10de2e8d8	[release] 2.2.0	2017-09-27 10:43:53 +08:00
Pan	2282135b44	refine:refine directive waves	2017-09-27 10:34:48 +08:00
Pan	329f3b3714	refine:rm export selected to zip example	2017-09-27 10:29:32 +08:00
Pan	065eaa93a2	refine:icon demo add clipboard	2017-09-27 10:18:40 +08:00
Pan	4f2f136dd0	add:add clipboard example	2017-09-27 10:18:40 +08:00
Pan	8d53ae1259	add:add clipboard	2017-09-27 10:18:40 +08:00
spiritree	a185412446	add Export2Zip demo	2017-09-27 10:18:23 +08:00
spiritree	3cf048e80b	add Export2Zip vendor	2017-09-27 10:18:23 +08:00
spiritree	fcf7c0ba50	ignore package-lock.json	2017-09-27 10:18:23 +08:00
Pan	807aa548b2	refine:rm duplicate code && split xlsx	2017-09-26 16:08:20 +08:00
Pan	db61251d89	[release] 2.1.1	2017-09-25 17:41:03 +08:00
Pan	582c6f4ae4	refine:set icon-class to english	2017-09-25 17:31:23 +08:00
Pan	9c2a7e9485	refine : format code	2017-09-25 14:21:42 +08:00
lei.jiang	fde12e8ef9	修改MdInput的demo，使之能展现验证功能	2017-09-25 11:11:37 +08:00
lei.jiang	8945476c22	修改MDinput组件 1.使之能兼容elementui的表单验证功能 2.增加icon属性，能够使用elementui的图标 3.优化显示效果	2017-09-25 11:11:37 +08:00
lei.jiang	14ff09a414	修改MDinput组件 1.使之能兼容elementui的表单验证功能 2.增加icon属性，能够使用elementui的图标 3.优化显示效果	2017-09-25 11:11:37 +08:00
Pan	a14547aaf9	add tips	2017-09-12 10:39:03 +08:00
Pan	b1311322ad	[release] 2.1.0	2017-09-11 14:45:55 +08:00
Pan	ffec6b6df7	add:upload excel	2017-09-11 14:43:12 +08:00
Pan	f0afbf7ea5	refine:set page=1 when table filter	2017-09-11 11:17:29 +08:00
Pan	a4f8e0b805	Update README.md	2017-09-11 10:56:28 +08:00
花裤衩	2d72df3605	Update README.md	2017-09-08 20:10:54 +08:00
花裤衩	e9f92a7d3d	Update README.md	2017-09-08 18:32:48 +08:00
花裤衩	ee362f22b2	Update README.md	2017-09-08 18:32:15 +08:00
花裤衩	11426c8494	add donate	2017-09-08 18:24:43 +08:00
Hex	fa5f5e9d26	与 vue-cli webpack 模板不一致	2017-09-08 15:53:09 +08:00
dongsuo	cda292dec1	fix blocked by AdBlock	2017-09-07 10:35:35 +08:00
Svend	877b73cd67	📝 typing fix	2017-09-06 10:20:31 +08:00
maemo	53d7243316	fix a typo	2017-09-05 13:53:24 +08:00
Pan	5379510013	refine tabsview	2017-09-01 10:59:45 +08:00
Pan	f712d4682e	add:when active tabs closed will go to last path	2017-09-01 10:46:20 +08:00
Pan	cb0e889829	fix tinymce bug	2017-09-01 10:12:50 +08:00
Pan	6a8a02f839	refine tinymce	2017-09-01 10:04:08 +08:00
Pan	d56cd59474	refine code	2017-08-30 18:22:32 +08:00
Pan	a10cfcc837	add tinymce upload demo	2017-08-30 14:41:10 +08:00
Pan	c8e632f0c3	[release] 2.0.0	2017-08-29 18:06:35 +08:00
Pan	c182a119e1	add icon tips	2017-08-29 18:05:35 +08:00
Pan	90fd4328b7	add icons page	2017-08-29 18:05:35 +08:00
Pan	97570fa612	refactor icons	2017-08-29 18:05:35 +08:00
Pan	bae698c9ad	update vue-loader	2017-08-28 22:59:09 +08:00
Pan	f7aee3b5a3	refactor	2017-08-28 13:18:35 +08:00
Pan	b98860ace1	refine inline edit table example	2017-08-28 13:18:35 +08:00
Pan	3c05519a09	refine	2017-08-28 13:18:35 +08:00
Pan	385ec5a762	refine	2017-08-28 13:18:35 +08:00
Pan	33a4369cd7	refine code	2017-08-28 13:18:35 +08:00
Pan	8fa2364a3b	add mock delay	2017-08-28 13:18:35 +08:00
Pan	551e911eb4	全局lint优化	2017-08-28 13:18:35 +08:00
Pan	b8ecda19d8	refine code	2017-08-28 13:18:35 +08:00
Pan	62d2f62bff	增加第三方登录 demo	2017-08-28 13:18:35 +08:00
Pan	0094f44910	change login by username	2017-08-28 13:18:35 +08:00
Pan	d06d476b50	refine import normalize.css && update	2017-08-21 20:55:56 +08:00
Pan	aa5f9059b3	rm jquery	2017-08-21 20:24:02 +08:00
Pan	9768305166	refine main.js	2017-08-21 15:55:46 +08:00
Pan	e912cea26a	refine sidebaritem code	2017-08-18 11:03:11 +08:00
Pan	eac12e3ac0	bump deps	2017-08-18 11:03:11 +08:00
花裤衩	c32fc58a3a	Update fetch.js	2017-08-16 09:57:05 +08:00
spiritree	bf0f2e7ee3	fix dashboard button router-link bug	2017-08-10 17:25:19 +08:00
Pan	2e9a3a849b	refine build	2017-08-07 16:11:10 +08:00
Pan	cdebb5c012	fix levelbar bug	2017-08-07 11:02:51 +08:00
Pan	00a83d1e5a	update echarts remove warning	2017-08-07 10:27:39 +08:00
Pan	17ada3c65e	add HashedModuleIdsPlugin	2017-08-04 16:04:14 +08:00
Pan	391e7703ed	fix router deepClone bug	2017-08-03 11:24:26 +08:00
Pan	97e94c067d	refine sidebar css	2017-08-02 14:43:57 +08:00
Pan	a3b1dd81fd	refine sidebar css	2017-08-02 14:42:20 +08:00
花裤衩	c96bdeb99d	Update README.md	2017-07-31 14:45:32 +08:00
Pan	630d06bf76	[release] 1.2.0	2017-07-28 17:38:42 +08:00
Pan	8c9ebd7345	set productionSourceMap: false	2017-07-28 17:29:07 +08:00
Pan	89c72d277e	refine css	2017-07-28 17:19:40 +08:00
Pan	108b380d20	menu 支持 icon 嵌套	2017-07-28 17:19:40 +08:00
Pan	69fc52d4e9	refine router.js	2017-07-28 17:19:40 +08:00
Pan	d78b49803d	refine css	2017-07-28 17:19:40 +08:00
Pan	dd9ef5145d	refine sidebar	2017-07-28 17:19:40 +08:00
Pan	ae44d0b8ca	update element & vue	2017-07-28 17:19:40 +08:00
Pan	6ad03ac5f0	rm documentImg	2017-07-28 16:10:00 +08:00
Pan	553ef477ef	fix typo	2017-07-28 09:50:52 +08:00
Pan	1083a17386	fix chart bug	2017-07-27 14:12:31 +08:00
Pan	535fe083e5	fix bug	2017-07-27 13:55:06 +08:00
spiritree	83e8dfc494	fix selectExcel bug	2017-07-27 12:20:04 +08:00
Pan	77ff823037	fix levelbar bug	2017-07-26 13:32:02 +08:00
Pan	696ecddc72	[release] 1.1.1	2017-07-25 17:54:14 +08:00
Pan	7969b6d33e	refine code	2017-07-25 17:37:15 +08:00
spiritree	3488930e4d	add new export-excel function	2017-07-25 17:26:17 +08:00
ginhom	4467420d31	fixed: catch 'GetInfo' exception	2017-07-25 16:19:09 +08:00
Pan	96b100d33c	add editorconfig	2017-07-24 17:58:46 +08:00
Pan	d6868d7190	rm	2017-07-24 14:55:33 +08:00
Pan	a0a011e985	fix cookie token bug	2017-07-20 13:27:05 +08:00
花裤衩	c8856741c6	Update README.md	2017-07-19 16:23:40 +08:00
dongsuo	cbc5c18291	'代码格式化'	2017-07-17 18:01:09 +08:00
dongsuo	5069a4d1df	'修改返回顶部功能'	2017-07-17 18:01:09 +08:00
dongsuo	bf08756644	'新增功能：返回顶部'	2017-07-17 18:01:09 +08:00
Pan	ba2e486099	fix typo	2017-07-17 15:26:40 +08:00
Pan	968d4026ec	refine linchart height	2017-07-17 10:19:33 +08:00
Pan	06ed2c6cac	refine dashboard charts animation	2017-07-17 10:16:28 +08:00
Pan	67c4a3b4ff	fix case-sensitive bug	2017-07-16 15:19:42 +08:00
Pan	c339b626eb	fix case-sensitive bug	2017-07-16 15:19:05 +08:00
Pan	6cb64bebdc	refine tab-views	2017-07-14 17:40:34 +08:00
Pan	e3198fd47d	update xlsx	2017-07-14 13:59:37 +08:00
Pan	29d28c3231	fix bug in vuex of strict model	2017-07-13 16:54:54 +08:00
Pan	62cb24c1a6	fix case-sensitive bug	2017-07-12 13:20:32 +08:00
Pan	16ce4f34e1	fix case-sensitive bug	2017-07-12 13:20:14 +08:00
Pan	8b4e70e6b2	refine css	2017-07-10 11:12:15 +08:00
Pan	4ad90406af	echarts add watch sidebar resize	2017-07-10 10:53:03 +08:00
ttop5	84600696e3	correct README errors	2017-07-07 11:25:42 +08:00
Pan	81b78f9b73	[release] 1.1.0	2017-07-06 18:26:51 +08:00
				`@@ -0,0 +1 @@`
				<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1503994850540" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10206" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M931.6 585.6l0 79c28.6-60.2 44.8-127.4 44.8-198.4C976.4 211 769.4 4 514.2 4S52 211 52 466.2c0 3.2 0.2 6.4 0.2 9.6l166-206 96.4 0L171.8 485.6l46.4 0 0-54.8 99.2-154.6 0 209.4 0 100 0 82.4-99.2 0 0-82.4L67.6 585.6c43 161 170.6 287.4 332.4 328.6-10.4 26.2-40.6 89.4-90.8 100.6-62.2 14 168.8 3.4 333.6-104.6 126.6-36.6 230.8-125.8 287.4-242.2l-97.6 0 0-82.4-166.2 0 0-87.2 0-12.8L666.4 476l166.2-206.2 94 0-140.4 215.8 46.4 0 0-59 99.2-154 0 213.2L931.8 585.6zM366.2 608c-4.8-11.2-7.2-23.2-7.2-36L359 357.6c0-12.8 2.4-24.8 7.2-36 4.8-11.2 11.4-21 19.6-29.2 8.2-8.2 18-14.8 29.2-19.6 11.2-4.8 23.2-7.2 36-7.2l81.6 0c12.8 0 24.8 2.4 36 7.2 11 4.8 20.6 11.2 28.8 19.2l-88.6 129.4 0-23c0-4.8-1.6-8.8-4.8-12-3.2-3.2-7.2-4.8-12-4.8-4.8 0-8.8 1.6-12 4.8-3.2 3.2-4.8 7.2-4.8 12l0 72L372.6 620C370.2 616.2 368 612.2 366.2 608zM624.4 572c0 12.8-2.4 24.8-7.2 36-4.8 11.2-11.4 21-19.6 29.2-8.2 8.2-18 14.8-29.2 19.6-11.2 4.8-23.2 7.2-36 7.2l-81.6 0c-12.8 0-24.8-2.4-36-7.2-11.2-4.8-21-11.4-29.2-19.6-3.6-3.6-7-7.8-10-12l99.2-144.6 0 50.6c0 4.8 1.6 8.8 4.8 12 3.2 3.2 7.2 4.8 12 4.8 4.8 0 8.8-1.6 12-4.8 3.2-3.2 4.8-7.2 4.8-12l0-99.6 92.6-135.2c6.6 7.4 12 15.8 16 25.2 4.8 11.2 7.2 23.2 7.2 36L624.2 572z" p-id="10207"></path></svg>