[release] 3.7.0

detail see https://panjiachen.github.io/vue-element-admin-site/#/zh-cn/lazy-loading?id=%E8%B7%AF%E7%94%B1%E6%87%92%E5%8A%A0%E8%BD%BD

.babelrc

@@ -1,10 +1,17 @@
 {
   "presets": [
     ["env", {
-      "modules": false
+      "modules": false,
+      "targets": {
+        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
+      }
     }],
     "stage-2"
   ],
-  "plugins": ["transform-runtime"],
-  "comments": false
+  "plugins": ["transform-vue-jsx", "transform-runtime"],
+  "env": {
+    "development":{
+      "plugins": ["dynamic-import-node"]
+    }
+  }
 }

.eslintrc.js

@@ -1,144 +1,199 @@
 module.exports = {
-    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']
+  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']
+  }
 }
+

.gitignore

@@ -1,10 +1,20 @@
 .DS_Store
 node_modules/
 dist/
-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

.postcssrc.js

@@ -2,6 +2,8 @@
 
 module.exports = {
   "plugins": {
+    "postcss-import": {},
+    "postcss-url": {},
     // to edit target browsers: use "browserslist" field in package.json
     "autoprefixer": {}
   }

.travis.yml

@@ -0,0 +1,5 @@
+language: node_js
+node_js: stable
+script: npm run test
+notifications:
+  email: false

LICENSE

@@ -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

README-en.md

@@ -1,177 +0,0 @@
-[![vue](https://img.shields.io/badge/vue-2.4.2-brightgreen.svg)](https://github.com/vuejs/vue)
-[![element-ui](https://img.shields.io/badge/element--ui-1.4.2-brightgreen.svg)](https://github.com/ElemeFE/element)
-[![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE)
-[![GitHub release](https://img.shields.io/github/release/PanJiaChen/vue-element-admin.svg)]()
-
-## 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.4.2 is used in the project, so vue 2.3.0+ is required.**
-
- - vueAdmin-template: [vueAdmin-template](https://github.com/PanJiaChen/vueAdmin-template)  
- - electron-vue-admin: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
- - Donate:[donate](https://github.com/PanJiaChen/vue-element-admin/blob/master/README-en.md#donate)
-
-## 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
-- Export Excel
-- Upload Excel
-- Export Zip
-- 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
-- clipboard
-
-## 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
-│   └── 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).
-
-## Donate
-If you find this project useful, you can buy me a cup of coffee
-![donate](https://panjiachen.github.io/donate/donation.png)
-
-## 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
-
-## License
-
-MIT

README.md

@@ -2,164 +2,158 @@
   <img width="320" src="https://wpimg.wallstcn.com/ecc53a42-d79b-42e2-8852-5126b810a4c8.svg">
 </p>
 
-# vue-element-admin
+<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.3.0-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>
 
-[![vue](https://img.shields.io/badge/vue-2.5.9-brightgreen.svg)](https://github.com/vuejs/vue)
-[![element-ui](https://img.shields.io/badge/element--ui-2.0.7-brightgreen.svg)](https://github.com/ElemeFE/element)
-[![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE)
-[![GitHub release](https://img.shields.io/github/release/PanJiaChen/vue-element-admin.svg)]()
+English | [简体中文](./README.zh-CN.md)
 
-**A magical vue admin.**
+## Introduction
 
-- [线上地址](http://panjiachen.github.io/vue-element-admin)
+`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.
 
-- [使用文档](https://panjiachen.github.io/vue-element-admin-site/#/)
+- [Preview](http://panjiachen.github.io/vue-element-admin)
 
-- [English Document](https://github.com/PanJiaChen/vue-element-admin/blob/master/README-en.md)
+- [Documentation](https://panjiachen.github.io/vue-element-admin-site/#/)
 
-- [wiki](https://github.com/PanJiaChen/vue-element-admin/wiki)
+- [Gitter](https://gitter.im/vue-element-admin/discuss)
 
-- [donate](https://panjiachen.github.io/vue-element-admin-site/#/donate)
+- [Wiki](https://github.com/PanJiaChen/vue-element-admin/wiki)
 
-**本项目的定位是后台集成方案，不适合当基础模板来开发。**
- - 模板建议使用: [vueAdmin-template](https://github.com/PanJiaChen/vueAdmin-template)  
- - 桌面端: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
+- [Donate](https://panjiachen.github.io/vue-element-admin-site/#/donate)
 
+**vue-element-admin is a admin interfaces integration solution, which is not suitable for secondary development as a base template.**
 
-**注意：该项目目前使用element-ui@2.0.5版本，所以最低兼容 Vue 2.5.0**
+ - Base template recommends using: [vueAdmin-template](https://github.com/PanJiaChen/vueAdmin-template)  
+ - Desktop: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
 
-楼主这里有一份调查[问卷](https://www.wjx.cn/m/16866569.aspx) 有空请填写一下，以表对本项目的支持~ps:不是给这个调查问卷网站做广告，所以填完问卷不用点上面抽奖有的没的那些东西
+**Note: This project uses element-ui@2.3.0+ version, so the minimum compatible vue@2.5.0+**
 
-## 前序准备
+## Preparation
 
-你的本地环境需要安装 [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/) 和 [element-ui](https://github.com/ElemeFE/element)，提前了解和学习这些知识会对使用本项目有很大的帮助。
+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.
 
-同时配套一个系列的教程文章，如何从零构建后一个完整的后台项目，建议大家先看完这些文章再来实践本项目
- - [手摸手，带你用 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)
+ **This project is not a scaffolding and is more of an integrated solution.**
 
- 相应需求，开了一个qq群 `591724180` 方便大家交流
+ **This project does not support low version browsers (e.g. IE). Please add polyfill yourself if you need them.**
 
- 或者可以加入该 **[圈子](https://jianshiapp.com/circles/1209)** 讨论问题
+ <p align="center">
+  <img width="900" src="https://wpimg.wallstcn.com/a5894c1b-f6af-456e-82df-1151da0839bf.png">
+</p>
 
- **如有问题请先看上述使用文档和文章，若不能满足，欢迎 issue 和 pr**
-
- **本项目并不是一个脚手架，更倾向于是一个集成解决方案**
-
- **该项目不支持低版本游览器(如ie)，有需求请自行添加polyfill [详情](https://github.com/PanJiaChen/vue-element-admin/wiki#babel-polyfill)**
-
-
-## 功能
-- 登录/注销
-- 权限验证
-- 多环境发布
-- 动态侧边栏（支持多级路由）
-- 动态面包屑
-- 国际化多语言
-- 多种动态换肤
-- 快捷导航(标签页)
-- 富文本编辑器
-- Markdown编辑器
-- JSON编辑器
-- Screenfull全屏
-- 列表拖拽
-- Svg Sprite 图标
+## 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数据
-- Echarts 图表
-- Clipboard(剪贴复制)
-- 401/404错误页面
-- 错误日志
-- 导出excel
-- 导出zip
-- 前端可视化excel
+- Guide Page
+- Mock data
+- Echarts
+- Clipboard
+- 401/404 error page
+- Error log
+- Export excel
+- Export zip
+- Front-end visualization excel
+- Tree Table
 - Table example
-- 动态table example
-- 拖拽table example
-- 内联编辑table example
+- Dynamictable example
+- Drag and drop table example
+- Inline edit table example
 - Form example
-- 二步登录
+- Two-step login
 - SplitPane
+- Drag Dialog
 - Dropzone
 - Sticky
 - CountTo
-- Markdown2html
+- Markdown to html
+```
 
+## Getting started
 
-## 开发
 ```bash
-    # 克隆项目
-    git clone https://github.com/PanJiaChen/vue-element-admin.git
+# clone the project
+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
 ```
 
-更多信息请参考 [使用文档](https://panjiachen.github.io/vue-element-admin-site/#/)
+## Advanced
+```bash
+# --report to build with bundle size analytics
+npm run build:prod --report
 
-## 目录结构
-```shell
-├── build                      // 构建相关  
-├── config                     // 配置相关
-├── src                        // 源代码
-│   ├── api                    // 所有请求
-│   ├── assets                 // 主题 字体等静态资源
-│   ├── components             // 全局公用组件
-│   ├── directive              // 全局指令
-│   ├── filtres                // 全局 filter
-│   ├── icons                  // 项目所有 svg icons
-│   ├── lang                   // 国际化 language
-│   ├── mock                   // 项目mock 模拟数据
-│   ├── router                 // 路由
-│   ├── store                  // 全局 store管理
-│   ├── styles                 // 全局样式
-│   ├── utils                  // 全局公用方法
-│   ├── vendor                 // 公用vendor
-│   ├── views                   // view
-│   ├── App.vue                // 入口页面
-│   ├── main.js                // 入口 加载组件 初始化等
-│   └── permission.js          // 权限管理
-├── static                     // 第三方不打包资源
-│   └── Tinymce                // 富文本
-├── .babelrc                   // babel-loader 配置
-├── eslintrc.js                // eslint 配置项
-├── .gitignore                 // git 忽略项
-├── favicon.ico                // favicon图标
-├── index.html                 // html模板
-└── package.json               // package.json
+# --preview to start a server in local to preview
+npm run build:prod --preview
 
+# lint code
+npm run lint
+
+# auto fix
+npm run lint -- --fix
 ```
 
+Refer to [Documentation](https://panjiachen.github.io/vue-element-admin-site/#/deploy) for more information
+
 ## Changelog
 Detailed changes for each release are documented in the [release notes](https://github.com/PanJiaChen/vue-element-admin/releases).
 
-## [查看更多demo](http://panjiachen.github.io/vue-element-admin)
-![](https://wpimg.wallstcn.com/1bc334a6-32a8-4f29-a037-ac3f5ce32588.png)
+## Online Demo
+[Preview](http://panjiachen.github.io/vue-element-admin)
 
 ## Donate
-If you find this project useful, you can buy me a cup of coffee
-![donate](https://panjiachen.github.io/donate/donation.png)
+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)
+
+[Paypal Me](https://www.paypal.me/panfree23)
+
+[Buy me a coffee](https://www.buymeacoffee.com/Pan)
 
 ## License
 
-MIT
+[MIT](https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE)
+
+Copyright (c) 2017-present PanJiaChen

README.zh-CN.md

@@ -0,0 +1,169 @@
+<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.3.0-brightgreen.svg" alt="element-ui">
+  </a>
+  <a href="https://travis-ci.org/PanJiaChen/vue-element-admin" rel="nofollow">
+    <img src="https://travis-ci.org/PanJiaChen/vue-element-admin.svg?branch=master" alt="Build Status">
+  </a>
+  <a href="https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE">
+    <img src="https://img.shields.io/github/license/mashape/apistatus.svg" alt="license">
+  </a>
+  <a href="https://github.com/PanJiaChen/vue-element-admin/releases">
+    <img src="https://img.shields.io/github/release/PanJiaChen/vue-element-admin.svg" alt="GitHub release">
+  </a>
+</p>
+
+简体中文 | [English](./README.md)
+
+## 简介
+
+`vue-element-admin` 是一个后台集成解决方案，它基于 [Vue.js](https://github.com/vuejs/vue) 和 [element](https://github.com/ElemeFE/element)。它使用了最新的前端技术栈，内置了i18国际化解决方案，动态路由，权限验证等很多功能特性，相信不管你的需求是什么，本项目都能帮助到你。
+
+- [在线访问](http://panjiachen.github.io/vue-element-admin)
+
+- [使用文档](https://panjiachen.github.io/vue-element-admin-site/#/zh-cn/)
+
+- [Gitter讨论组](https://gitter.im/vue-element-admin/discuss)
+
+- [Wiki](https://github.com/PanJiaChen/vue-element-admin/wiki)
+
+- [Donate](https://panjiachen.github.io/vue-element-admin-site/#/zh-cn/donate)
+
+**本项目的定位是后台集成方案，不适合当基础模板来开发。**
+ - 模板建议使用: [vueAdmin-template](https://github.com/PanJiaChen/vueAdmin-template)  
+ - 桌面端: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
+
+**注意：该项目使用 element-ui@2.3.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)
+
+
+ 或者加入该群主 **[圈子](https://jianshiapp.com/circles/1209)** 楼主会经常分享一些技术相关的东西
+
+ **如有问题请先看上述使用文档和文章，若不能满足，欢迎 issue 和 pr**
+
+ **本项目并不是一个脚手架，更倾向于是一个集成解决方案**
+
+ **该项目不支持低版本浏览器(如ie)，有需求请自行添加polyfill [详情](https://github.com/PanJiaChen/vue-element-admin/wiki#babel-polyfill)**
+
+ <p align="center">
+  <img width="900" src="https://wpimg.wallstcn.com/a5894c1b-f6af-456e-82df-1151da0839bf.png">
+</p>
+
+## 功能
+```
+- 登录/注销
+- 权限验证
+- 多环境发布
+- 动态侧边栏（支持多级路由）
+- 动态面包屑
+- 国际化多语言
+- 多种动态换肤
+- 快捷导航(标签页)
+- 富文本编辑器
+- Markdown编辑器
+- JSON编辑器
+- Screenfull全屏
+- 列表拖拽
+- Svg Sprite 图标
+- Dashboard
+- 引导页
+- 本地mock数据
+- Echarts 图表
+- Clipboard(剪贴复制)
+- 401/404错误页面
+- 错误日志
+- 导出excel
+- 导出zip
+- 前端可视化excel
+- 树形table
+- Table example
+- 动态table example
+- 拖拽table example
+- 内联编辑table example
+- Form example
+- 二步登录
+- SplitPane
+- 拖拽 Dialog
+- Dropzone
+- Sticky
+- CountTo
+- Markdown2html
+```
+
+## 开发
+```bash
+# 克隆项目
+git clone https://github.com/PanJiaChen/vue-element-admin.git
+
+# 安装依赖
+npm install
+   
+# 建议不要用cnpm安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题
+npm install --registry=https://registry.npm.taobao.org
+
+# 启动服务
+npm run dev
+```
+浏览器访问 http://localhost:9527
+
+## 发布
+```bash
+# 构建测试环境
+npm run build:sit
+
+# 构建生成环境
+npm run build:prod
+```
+
+## 其它
+```bash
+# --report to build with bundle size analytics
+npm run build:prod --report
+
+# --preview to start a server in local to preview
+npm run build:prod --preview
+
+# lint code
+npm run lint
+
+# auto fix
+npm run lint -- --fix
+```
+
+更多信息请参考 [使用文档](https://panjiachen.github.io/vue-element-admin-site/#/zh-cn/deploy)
+
+## Changelog
+Detailed changes for each release are documented in the [release notes](https://github.com/PanJiaChen/vue-element-admin/releases).
+
+## Online Demo
+[在线 Demo](http://panjiachen.github.io/vue-element-admin)
+
+## Donate
+如果你觉得这个项目帮助到了你，你可以帮作者买一杯果汁表示鼓励 :tropical_drink:
+![donate](https://panjiachen.github.io/donate/donation.png)
+
+[Paypal Me](https://www.paypal.me/panfree23)
+
+## License
+
+[MIT](https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE)
+
+Copyright (c) 2017-present PanJiaChen

build/build.js

@@ -1,39 +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')()
 
-var spinner = ora('building for ' + process.env.NODE_ENV + ' of ' + process.env.env_config+ ' mode...' )
+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.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')
+    }
+  })
 })

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

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()
-  }
-})

build/dev-server.js

@@ -1,93 +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: false,
-    heartbeat: 2000
-});
-
-// force page reload when html-webpack-plugin template changes
-// currently disabled until this is resolved:
-// https://github.com/jantimon/html-webpack-plugin/issues/680
-// compiler.plugin('compilation', function (compilation) {
-//   compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
-//     hotMiddleware.publish({ action: 'reload' })
-//     cb()
-//   })
-// })
-
-// 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
-
-var _resolve
-var readyPromise = new Promise(resolve => {
-  _resolve = resolve
-})
-
-console.log('> Starting dev server...')
-devMiddleware.waitUntilValid(() => {
-  console.log('> Listening at ' + uri + '\n')
-  // when env is testing, don't need open it
-  if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
-    opn(uri)
-  }
-  _resolve()
-})
-
-var server = app.listen(port)
-
-module.exports = {
-  ready: readyPromise,
-  close: () => {
-    server.close()
-  }
-}

build/utils.js

@@ -1,35 +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
     }
   }
 
-  var postcssLoader = {
+  const postcssLoader = {
     loader: 'postcss-loader',
     options: {
-      sourceMap: true
+      sourceMap: options.sourceMap
     }
   }
 
   // generate loader string to be used with extract text plugin
   function generateLoaders (loader, loaderOptions) {
-    var loaders = options.usePostCSS !== false ? [cssLoader, postcssLoader] : [cssLoader]
+    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
+
     if (loader) {
       loaders.push({
         loader: loader + '-loader',
@@ -65,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')
+    })
+  }
+}

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'
+  }
 }

build/webpack.base.conf.js

@@ -1,51 +1,46 @@
-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) {
+function resolve (dir) {
   return path.join(__dirname, '..', dir)
 }
 
+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 = {
+  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
+    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'),
-      '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')
     }
   },
   module: {
     rules: [
-      {
-        test: /\.(js|vue)$/,
-        loader: 'eslint-loader',
-        enforce: "pre",
-        include: [resolve('src'), resolve('test')],
-        options: {
-            formatter: require('eslint-friendly-formatter')
-        }
-      },
+      ...(config.dev.useEslint ? [createLintingRule()] : []),
       {
         test: /\.vue$/,
         loader: 'vue-loader',
@@ -54,7 +49,7 @@ module.exports = {
       {
         test: /\.js$/,
         loader: 'babel-loader?cacheDirectory',
-        include: [resolve('src'), resolve('test')]
+        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
       },
       {
         test: /\.svg$/,
@@ -73,6 +68,14 @@ module.exports = {
           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',
@@ -83,10 +86,16 @@ module.exports = {
       }
     ]
   },
-  //注入全局mixin
-  // sassResources: path.join(__dirname, '../src/styles/mixin.scss'),
-  // sassLoader: {
-  //     data:  path.join(__dirname, '../src/styles/index.scss')
-  // },
+  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'
+  }
 }
-

build/webpack.dev.conf.js

@@ -1,44 +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, {
+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-source-map is faster for development
-  devtool: '#cheap-source-map',
-  cache: 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': config.dev.env
+      'process.env': require('../config/dev.env')
     }),
-    // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
     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',
-      favicon: resolveApp('favicon.ico'),
       inject: true,
+      favicon: resolve('favicon.ico'),
+      title: 'vue-element-admin',
       path: config.dev.assetsPublicPath + config.dev.assetsSubDirectory
     }),
-    new FriendlyErrorsPlugin()
   ]
 })
 
+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)
+    }
+  })
+})

build/webpack.prod.conf.js

@@ -1,21 +1,23 @@
-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 = config.build[process.env.env_config+'Env']
-
-function resolveApp(relativePath) {
-  return path.resolve(relativePath);
+function resolve (dir) {
+  return path.join(__dirname, '..', dir)
 }
 
-var webpackConfig = merge(baseWebpackConfig, {
+const env = require('../config/'+process.env.env_config+'.env')
+
+const webpackConfig = merge(baseWebpackConfig, {
   module: {
     rules: utils.styleLoaders({
       sourceMap: config.build.productionSourceMap,
@@ -23,64 +25,69 @@ var webpackConfig = merge(baseWebpackConfig, {
       usePostCSS: true
     })
   },
-  devtool: config.build.productionSourceMap ? '#source-map' : false,
+  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'),
-    publicPath: config.build.assetsPublicPath
+    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
+    new UglifyJsPlugin({
+      uglifyOptions: {
+        compress: {
+          warnings: false
+        }
       },
-      sourceMap: true,
+      sourceMap: config.build.productionSourceMap,
       parallel: true
     }),
     // extract css into its own file
     new ExtractTextPlugin({
-      filename: utils.assetsPath('css/[name].[contenthash].css')
+      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(),
+    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: 'index.html',
+      filename: config.build.index,
       template: 'index.html',
       inject: true,
-      favicon: resolveApp('favicon.ico'),
+      favicon: resolve('favicon.ico'),
+      title: 'vue-element-admin',
+      path: config.build.assetsPublicPath + config.build.assetsSubDirectory,
       minify: {
         removeComments: true,
         collapseWhitespace: true,
-        removeRedundantAttributes: true,
-        useShortDoctype: true,
-        removeEmptyAttributes: true,
-        removeStyleLinkTypeAttributes: true,
-        keepClosingSlash: true,
-        minifyJS: true,
-        minifyCSS: true,
-        minifyURLs: true
+        removeAttributeQuotes: true
+        // more options:
+        // https://github.com/kangax/html-minifier#options-quick-reference
       },
-      path: config.build.assetsPublicPath + config.build.assetsSubDirectory,
       // necessary to consistently work with multiple chunks via CommonsChunkPlugin
       chunksSortMode: 'dependency'
     }),
-    // cache Module Identifiers
+    // 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: function (module) {
+      minChunks (module) {
         // any required modules inside node_modules are extracted to vendor
         return (
           module.resource &&
@@ -97,6 +104,15 @@ var webpackConfig = merge(baseWebpackConfig, {
       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',
@@ -113,29 +129,47 @@ var webpackConfig = merge(baseWebpackConfig, {
         return context && (context.indexOf('xlsx') >= 0);
       }
     }),
-    // 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 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: ['.*']
-    }])
+    new CopyWebpackPlugin([
+      {
+        from: path.resolve(__dirname, '../static'),
+        to: config.build.assetsSubDirectory,
+        ignore: ['.*']
+      }
+    ])
   ]
 })
 
+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) {
-  var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
   webpackConfig.plugins.push(new BundleAnalyzerPlugin())
 }
 
 module.exports = webpackConfig
-

config/dev.env.js

@@ -1,6 +1,5 @@
 module.exports = {
-    NODE_ENV: '"development"',
-    ENV_CONFIG: '"dev"',
-    BASE_API: '"https://api-dev"',
-    APP_ORIGIN: '"https://wallstreetcn.com"'
+  NODE_ENV: '"development"',
+  ENV_CONFIG: '"dev"',
+  BASE_API: '"https://api-dev"'
 }

config/index.js

@@ -1,39 +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: './',          //请根据自己路径配置更改
-			productionSourceMap: false,
-			// 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: '/',
-			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: '#cheap-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
+  }
 }

config/prod.env.js

@@ -1,6 +1,5 @@
 module.exports = {
-    NODE_ENV: '"production"',
-    ENV_CONFIG: '"prod"',
-    BASE_API: '"https://api-prod"',
-    APP_ORIGIN: '"https://wallstreetcn.com"'
-};
+  NODE_ENV: '"production"',
+  ENV_CONFIG: '"prod"',
+  BASE_API: '"https://api-prod"'
+}

config/sit.env.js

@@ -1,6 +1,5 @@
 module.exports = {
-    NODE_ENV: '"production"',
-    ENV_CONFIG: '"sit"',
-    BASE_API: '"https://api-sit"',
-    APP_ORIGIN: '"https://wallstreetcn.com"'
-};
+  NODE_ENV: '"production"',
+  ENV_CONFIG: '"sit"',
+  BASE_API: '"https://api-sit"'
+}

index.html

@@ -1,15 +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>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>
+  <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>
+  <body>
+    <script src=<%= htmlWebpackPlugin.options.path %>/tinymce4.7.5/tinymce.min.js></script>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
 </html>

package.json

@@ -1,95 +1,108 @@
 {
   "name": "vue-element-admin",
-  "version": "3.1.1",
-  "description": "A Vue.js admin",
+  "version": "3.7.0",
+  "description": "A magical vue admin. Typical templates for enterprise applications. Newest development stack of vue. Lots of awesome features",
   "author": "Pan <panfree23@gmail.com>",
   "license": "MIT",
-  "private": true,
   "scripts": {
-    "dev": "node build/dev-server.js",
+    "dev": "cross-env BABEL_ENV=development 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",
-    "build:sit-preview": "cross-env NODE_ENV=production env_config=sit npm_config_preview=true  npm_config_report=true node build/build.js",
-    "lint": "eslint --ext .js,.vue src"
+    "lint": "eslint --ext .js,.vue src",
+    "test": "npm run lint"
+  },
+  "keywords": [
+    "vue",
+    "element-ui",
+    "admin",
+    "management-system",
+    "admin-template"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/PanJiaChen/vue-element-admin.git"
+  },
+  "bugs": {
+    "url": "https://github.com/PanJiaChen/vue-element-admin/issues"
   },
   "dependencies": {
     "axios": "0.17.1",
     "clipboard": "1.7.1",
-    "codemirror": "5.31.0",
+    "codemirror": "5.32.0",
+    "driver.js": "0.5.2",
     "dropzone": "5.2.0",
     "echarts": "3.8.5",
-    "element-ui": "2.0.7",
+    "element-ui": "2.3.2",
     "file-saver": "1.3.3",
     "font-awesome": "4.7.0",
     "js-cookie": "2.2.0",
-    "jsonlint": "1.6.2",
-    "jszip": "3.1.4",
+    "jsonlint": "1.6.3",
+    "jszip": "3.1.5",
     "mockjs": "1.0.1-beta3",
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
     "screenfull": "3.3.2",
-    "showdown": "1.8.2",
+    "showdown": "1.8.5",
     "simplemde": "1.11.2",
-    "sortablejs": "1.6.1",
-    "vue": "2.5.9",
-    "vue-count-to": "1.0.10",
+    "sortablejs": "1.7.0",
+    "vue": "2.5.10",
+    "vue-count-to": "1.0.13",
     "vue-i18n": "7.3.2",
-    "vue-multiselect": "2.0.6",
+    "vue-multiselect": "2.0.8",
     "vue-router": "3.0.1",
-    "vue-splitpane": "1.0.0",
-    "vuedraggable": "2.15.0",
+    "vue-splitpane": "1.0.2",
+    "vuedraggable": "^2.16.0",
     "vuex": "3.0.1",
-    "xlsx": "^0.11.7"
+    "xlsx": "^0.11.16"
   },
   "devDependencies": {
-    "autoprefixer": "7.1.6",
+    "autoprefixer": "7.2.3",
     "babel-core": "6.26.0",
-    "babel-eslint": "8.0.2",
+    "babel-eslint": "8.0.3",
+    "babel-helper-vue-jsx-merge-props": "2.0.3",
     "babel-loader": "7.1.2",
+    "babel-plugin-dynamic-import-node": "^1.2.0",
+    "babel-plugin-syntax-jsx": "6.18.0",
     "babel-plugin-transform-runtime": "6.23.0",
+    "babel-plugin-transform-vue-jsx": "3.5.0",
     "babel-preset-env": "1.6.1",
     "babel-preset-stage-2": "6.24.1",
-    "babel-register": "6.26.0",
     "chalk": "2.3.0",
-    "connect-history-api-fallback": "1.4.0",
-    "copy-webpack-plugin": "4.2.0",
+    "copy-webpack-plugin": "4.3.0",
     "cross-env": "5.1.1",
     "css-loader": "0.28.7",
-    "eslint": "4.11.0",
+    "eslint": "4.13.1",
     "eslint-friendly-formatter": "3.0.0",
-    "eslint-import-resolver-webpack": "0.8.3",
     "eslint-loader": "1.9.0",
-    "eslint-plugin-html": "3.2.2",
-    "eslint-plugin-import": "2.8.0",
-    "eventsource-polyfill": "0.9.6",
-    "express": "4.16.2",
+    "eslint-plugin-html": "4.0.1",
     "extract-text-webpack-plugin": "3.0.2",
-    "file-loader": "0.11.2",
+    "file-loader": "1.1.5",
     "friendly-errors-webpack-plugin": "1.6.1",
-    "function-bind": "1.1.0",
-    "html-webpack-plugin": "2.30.0",
-    "http-proxy-middleware": "0.17.4",
-    "node-sass": "^4.5.0",
-    "opn": "4.0.2",
+    "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.1.0",
-    "postcss-loader": "^2.0.8",
-    "pushstate-server": "2.1.0",
-    "rimraf": "2.6.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.3.0",
-    "style-loader": "0.19.0",
-    "svg-sprite-loader": "3.4.1",
+    "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-loader": "13.7.2",
     "vue-style-loader": "3.0.3",
-    "vue-template-compiler": "2.5.9",
-    "webpack": "3.8.1",
-    "webpack-bundle-analyzer": "2.9.0",
-    "webpack-dev-middleware": "1.12.0",
-    "webpack-hot-middleware": "2.20.0",
-    "webpack-merge": "4.1.0"
+    "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",

src/App.vue

@@ -1,16 +1,11 @@
 <template>
-	<div id="app">
-		<router-view></router-view>
-	</div>
+  <div id="app">
+    <router-view></router-view>
+  </div>
 </template>
 
 <script>
   export default{
-    name: 'APP'
+    name: 'App'
   }
 </script>
-
-<style lang="scss">
-@import '~normalize.css/normalize.css'; // normalize.css 样式格式化
-@import './styles/index.scss'; // 全局自定义样式
-</style>

src/api/article.js

@@ -8,10 +8,11 @@ export function fetchList(query) {
   })
 }
 
-export function fetchArticle() {
+export function fetchArticle(id) {
   return request({
     url: '/article/detail',
-    method: 'get'
+    method: 'get',
+    params: { id }
   })
 }
 

src/components/BackToTop/index.vue

@@ -25,14 +25,16 @@ export default {
     },
     customStyle: {
       type: Object,
-      default: {
-        right: '50px',
-        bottom: '50px',
-        width: '40px',
-        height: '40px',
-        'border-radius': '4px',
-        'line-height': '45px',
-        background: '#e7eaf1'
+      default: function() {
+        return {
+          right: '50px',
+          bottom: '50px',
+          width: '40px',
+          height: '40px',
+          'border-radius': '4px',
+          'line-height': '45px',
+          background: '#e7eaf1'
+        }
       }
     },
     transitionName: {

src/components/Charts/keyboard.vue

@@ -4,8 +4,10 @@
 
 <script>
 import echarts from 'echarts'
+import resize from './mixins/resize'
 
 export default {
+  mixins: [resize],
   props: {
     className: {
       type: String,

src/components/Charts/lineMarker.vue

@@ -4,8 +4,10 @@
 
 <script>
 import echarts from 'echarts'
+import resize from './mixins/resize'
 
 export default {
+  mixins: [resize],
   props: {
     className: {
       type: String,
@@ -46,13 +48,14 @@ export default {
       this.chart.setOption({
         backgroundColor: '#394056',
         title: {
-          text: '请求数',
+          top: 20,
+          text: 'Requests',
           textStyle: {
             fontWeight: 'normal',
             fontSize: 16,
             color: '#F1F1F3'
           },
-          left: '6%'
+          left: '1%'
         },
         tooltip: {
           trigger: 'axis',
@@ -63,11 +66,12 @@ export default {
           }
         },
         legend: {
+          top: 20,
           icon: 'rect',
           itemWidth: 14,
           itemHeight: 5,
           itemGap: 13,
-          data: ['移动', '电信', '联通'],
+          data: ['CMCC', 'CTCC', 'CUCC'],
           right: '4%',
           textStyle: {
             fontSize: 12,
@@ -75,9 +79,10 @@ export default {
           }
         },
         grid: {
+          top: 100,
           left: '3%',
           right: '4%',
-          bottom: '3%',
+          bottom: '2%',
           containLabel: true
         },
         xAxis: [{
@@ -92,7 +97,7 @@ export default {
         }],
         yAxis: [{
           type: 'value',
-          name: '单位（%）',
+          name: '(%)',
           axisTick: {
             show: false
           },
@@ -114,7 +119,7 @@ export default {
           }
         }],
         series: [{
-          name: '移动',
+          name: 'CMCC',
           type: 'line',
           smooth: true,
           symbol: 'circle',
@@ -148,7 +153,7 @@ export default {
           },
           data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122]
         }, {
-          name: '电信',
+          name: 'CTCC',
           type: 'line',
           smooth: true,
           symbol: 'circle',
@@ -182,7 +187,7 @@ export default {
           },
           data: [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150]
         }, {
-          name: '联通',
+          name: 'CUCC',
           type: 'line',
           smooth: true,
           symbol: 'circle',

src/components/Charts/mixChart.vue

@@ -4,8 +4,10 @@
 
 <script>
 import echarts from 'echarts'
+import resize from './mixins/resize'
 
 export default {
+  mixins: [resize],
   props: {
     className: {
       type: String,
@@ -31,7 +33,6 @@ export default {
   },
   mounted() {
     this.initChart()
-    this.chart = null
   },
   beforeDestroy() {
     if (!this.chart) {
@@ -46,15 +47,16 @@ export default {
       const xData = (function() {
         const data = []
         for (let i = 1; i < 13; i++) {
-          data.push(i + '月份')
+          data.push(i + 'month')
         }
         return data
       }())
       this.chart.setOption({
         backgroundColor: '#344b58',
         title: {
-          text: '统计',
-          x: '4%',
+          text: 'statistics',
+          x: '20',
+          top: '20',
           textStyle: {
             color: '#fff',
             fontSize: '22'
@@ -81,12 +83,12 @@ export default {
           }
         },
         legend: {
-          x: '15%',
+          x: '5%',
           top: '10%',
           textStyle: {
             color: '#90979c'
           },
-          data: ['女', '男', '平均']
+          data: ['female', 'male', 'average']
         },
         calculable: true,
         xAxis: [{
@@ -158,9 +160,9 @@ export default {
           end: 35
         }],
         series: [{
-          name: '女',
+          name: 'female',
           type: 'bar',
-          stack: '总量',
+          stack: 'total',
           barMaxWidth: 35,
           barGap: '10%',
           itemStyle: {
@@ -195,9 +197,9 @@ export default {
         },
 
         {
-          name: '男',
+          name: 'male',
           type: 'bar',
-          stack: '总量',
+          stack: 'total',
           itemStyle: {
             normal: {
               color: 'rgba(0,191,183,1)',
@@ -226,9 +228,9 @@ export default {
             220
           ]
         }, {
-          name: '平均',
+          name: 'average',
           type: 'line',
-          stack: '总量',
+          stack: 'total',
           symbolSize: 10,
           symbol: 'circle',
           itemStyle: {

src/components/Charts/mixins/resize.js

@@ -0,0 +1,15 @@
+import { debounce } from '@/utils'
+
+export default {
+  mounted() {
+    this.__resizeHanlder = debounce(() => {
+      if (this.chart) {
+        this.chart.resize()
+      }
+    }, 100)
+    window.addEventListener('resize', this.__resizeHanlder)
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.__resizeHanlder)
+  }
+}

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 slot-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 slot-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>

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>

src/components/Hamburger/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <svg t="1492500959545" @click="toggleClick" class="wscn-icon hamburger" :class="{'is-active':isActive}" style="" viewBox="0 0 1024 1024"
+    <svg t="1492500959545" @click="toggleClick" class="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>
@@ -30,16 +30,16 @@ export default {
 
 <style scoped>
 .hamburger {
-	display: inline-block;
-	cursor: pointer;
-	width: 20px;
-	height: 20px;
-	transform: rotate(90deg);
-	transition: .38s;
-	transform-origin: 50% 50%;
+  display: inline-block;
+  cursor: pointer;
+  width: 20px;
+  height: 20px;
+  transform: rotate(90deg);
+  transition: .38s;
+  transform-origin: 50% 50%;
 }
 
 .hamburger.is-active {
-	transform: rotate(0deg);
+  transform: rotate(0deg);
 }
 </style>

src/components/ImageCropper/lang.js

@@ -1,41 +0,0 @@
-const langBag = {
-  zh: {
-    hint: '点击，或拖动图片至此处',
-    loading: '正在上传……',
-    noSupported: '浏览器不支持该功能，请使用IE10以上或其他现在浏览器！',
-    success: '上传成功',
-    fail: '图片上传失败',
-    preview: '头像预览',
-    btn: {
-      off: '取消',
-      close: '关闭',
-      back: '上一步',
-      save: '保存'
-    },
-    error: {
-      onlyImg: '仅限图片格式',
-      outOfSize: '单文件大小不能超过 ',
-      lowestPx: '图片最低像素为（宽*高）：'
-    }
-  },
-  en: {
-    hint: 'Click, or drag the file here',
-    loading: 'Uploading……',
-    noSupported: 'Browser does not support, please use IE10+ or other browsers',
-    success: 'Upload success',
-    fail: 'Upload failed',
-    preview: 'Preview',
-    btn: {
-      off: 'Cancel',
-      close: 'Close',
-      back: 'Back',
-      save: 'Save'
-    },
-    error: {
-      onlyImg: 'Image only',
-      outOfSize: 'Image exceeds size limit: ',
-      lowestPx: 'The lowest pixel in the image: '
-    }
-  }
-}
-export default langBag

src/components/ImageCropper/upload.css

@@ -1,691 +0,0 @@
-@charset "UTF-8";
-@-webkit-keyframes vicp_progress {
-    0% {
-        background-position-y: 0;
-    }
-    100% {
-        background-position-y: 40px;
-    }
-}
-
-@keyframes vicp_progress {
-    0% {
-        background-position-y: 0;
-    }
-    100% {
-        background-position-y: 40px;
-    }
-}
-
-@-webkit-keyframes vicp {
-    0% {
-        opacity: 0;
-        -webkit-transform: scale(0) translatey(-60px);
-        transform: scale(0) translatey(-60px);
-    }
-    100% {
-        opacity: 1;
-        -webkit-transform: scale(1) translatey(0);
-        transform: scale(1) translatey(0);
-    }
-}
-
-@keyframes vicp {
-    0% {
-        opacity: 0;
-        -webkit-transform: scale(0) translatey(-60px);
-        transform: scale(0) translatey(-60px);
-    }
-    100% {
-        opacity: 1;
-        -webkit-transform: scale(1) translatey(0);
-        transform: scale(1) translatey(0);
-    }
-}
-
-.vue-image-crop-upload {
-    position: fixed;
-    display: block;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    z-index: 10000;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.65);
-    -webkit-tap-highlight-color: transparent;
-    -moz-tap-highlight-color: transparent;
-}
-
-.vue-image-crop-upload .vicp-wrap {
-    -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
-    position: fixed;
-    display: block;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    z-index: 10000;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    margin: auto;
-    width: 600px;
-    height: 330px;
-    padding: 25px;
-    background-color: #fff;
-    border-radius: 2px;
-    -webkit-animation: vicp 0.12s ease-in;
-    animation: vicp 0.12s ease-in;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-close {
-    position: absolute;
-    right: -30px;
-    top: -30px;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-close .vicp-icon4 {
-    position: relative;
-    display: block;
-    width: 30px;
-    height: 30px;
-    cursor: pointer;
-    -webkit-transition: -webkit-transform 0.18s;
-    transition: -webkit-transform 0.18s;
-    transition: transform 0.18s;
-    transition: transform 0.18s, -webkit-transform 0.18s;
-    -webkit-transform: rotate(0);
-    -ms-transform: rotate(0);
-    transform: rotate(0);
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-close .vicp-icon4::after, .vue-image-crop-upload .vicp-wrap .vicp-close .vicp-icon4::before {
-    -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
-    content: '';
-    position: absolute;
-    top: 12px;
-    left: 4px;
-    width: 20px;
-    height: 3px;
-    -webkit-transform: rotate(45deg);
-    -ms-transform: rotate(45deg);
-    transform: rotate(45deg);
-    background-color: #fff;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-close .vicp-icon4::after {
-    -webkit-transform: rotate(-45deg);
-    -ms-transform: rotate(-45deg);
-    transform: rotate(-45deg);
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-close .vicp-icon4:hover {
-    -webkit-transform: rotate(90deg);
-    -ms-transform: rotate(90deg);
-    transform: rotate(90deg);
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area {
-    position: relative;
-    padding: 35px;
-    height: 200px;
-    background-color: rgba(0, 0, 0, 0.03);
-    text-align: center;
-    border: 1px dashed rgba(0, 0, 0, 0.08);
-    overflow: hidden;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area .vicp-icon1 {
-    display: block;
-    margin: 0 auto 6px;
-    width: 42px;
-    height: 42px;
-    overflow: hidden;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area .vicp-icon1 .vicp-icon1-arrow {
-    display: block;
-    margin: 0 auto;
-    width: 0;
-    height: 0;
-    border-bottom: 14.7px solid rgba(0, 0, 0, 0.3);
-    border-left: 14.7px solid transparent;
-    border-right: 14.7px solid transparent;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area .vicp-icon1 .vicp-icon1-body {
-    display: block;
-    width: 12.6px;
-    height: 14.7px;
-    margin: 0 auto;
-    background-color: rgba(0, 0, 0, 0.3);
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area .vicp-icon1 .vicp-icon1-bottom {
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    display: block;
-    height: 12.6px;
-    border: 6px solid rgba(0, 0, 0, 0.3);
-    border-top: none;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area .vicp-hint {
-    display: block;
-    padding: 15px;
-    font-size: 14px;
-    color: #666;
-    line-height: 30px;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area .vicp-no-supported-hint {
-    display: block;
-    position: absolute;
-    top: 0;
-    left: 0;
-    padding: 30px;
-    width: 100%;
-    height: 60px;
-    line-height: 30px;
-    background-color: #eee;
-    text-align: center;
-    color: #666;
-    font-size: 14px;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area:hover {
-    cursor: pointer;
-    border-color: rgba(0, 0, 0, 0.1);
-    background-color: rgba(0, 0, 0, 0.05);
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop {
-    overflow: hidden;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left {
-    float: left;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-img-container {
-    position: relative;
-    display: block;
-    width: 240px;
-    height: 180px;
-    background-color: #e5e5e0;
-    overflow: hidden;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-img-container .vicp-img {
-    position: absolute;
-    display: block;
-    cursor: move;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-img-container .vicp-img-shade {
-    -webkit-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
-    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
-    position: absolute;
-    background-color: rgba(241, 242, 243, 0.8);
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-img-container .vicp-img-shade.vicp-img-shade-1 {
-    top: 0;
-    left: 0;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-img-container .vicp-img-shade.vicp-img-shade-2 {
-    bottom: 0;
-    right: 0;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range {
-    position: relative;
-    margin: 30px 0;
-    width: 240px;
-    height: 18px;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon5,
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon6 {
-    position: absolute;
-    top: 0;
-    width: 18px;
-    height: 18px;
-    border-radius: 100%;
-    background-color: rgba(0, 0, 0, 0.08);
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon5:hover,
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon6:hover {
-    -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
-    cursor: pointer;
-    background-color: rgba(0, 0, 0, 0.14);
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon5 {
-    left: 0;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon5::before {
-    position: absolute;
-    content: '';
-    display: block;
-    left: 3px;
-    top: 8px;
-    width: 12px;
-    height: 2px;
-    background-color: #fff;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon6 {
-    right: 0;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon6::before {
-    position: absolute;
-    content: '';
-    display: block;
-    left: 3px;
-    top: 8px;
-    width: 12px;
-    height: 2px;
-    background-color: #fff;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon6::after {
-    position: absolute;
-    content: '';
-    display: block;
-    top: 3px;
-    left: 8px;
-    width: 2px;
-    height: 12px;
-    background-color: #fff;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range] {
-    display: block;
-    padding-top: 5px;
-    margin: 0 auto;
-    width: 180px;
-    height: 8px;
-    vertical-align: top;
-    background: transparent;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-    cursor: pointer;
-    /* 滑块
-                     ---------------------------------------------------------------*/
-    /* 轨道
-                     ---------------------------------------------------------------*/
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:focus {
-    outline: none;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]::-webkit-slider-thumb {
-    -webkit-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
-    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
-    -webkit-appearance: none;
-    appearance: none;
-    margin-top: -3px;
-    width: 12px;
-    height: 12px;
-    background-color: #61c091;
-    border-radius: 100%;
-    border: none;
-    -webkit-transition: 0.2s;
-    transition: 0.2s;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]::-moz-range-thumb {
-    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
-    -moz-appearance: none;
-    appearance: none;
-    width: 12px;
-    height: 12px;
-    background-color: #61c091;
-    border-radius: 100%;
-    border: none;
-    -webkit-transition: 0.2s;
-    transition: 0.2s;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]::-ms-thumb {
-    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
-    appearance: none;
-    width: 12px;
-    height: 12px;
-    background-color: #61c091;
-    border: none;
-    border-radius: 100%;
-    -webkit-transition: 0.2s;
-    transition: 0.2s;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:active::-moz-range-thumb {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
-    width: 14px;
-    height: 14px;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:active::-ms-thumb {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
-    width: 14px;
-    height: 14px;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:active::-webkit-slider-thumb {
-    -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
-    margin-top: -4px;
-    width: 14px;
-    height: 14px;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]::-webkit-slider-runnable-track {
-    -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
-    width: 100%;
-    height: 6px;
-    cursor: pointer;
-    border-radius: 2px;
-    border: none;
-    background-color: rgba(68, 170, 119, 0.3);
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]::-moz-range-track {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
-    width: 100%;
-    height: 6px;
-    cursor: pointer;
-    border-radius: 2px;
-    border: none;
-    background-color: rgba(68, 170, 119, 0.3);
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]::-ms-track {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
-    width: 100%;
-    cursor: pointer;
-    background: transparent;
-    border-color: transparent;
-    color: transparent;
-    height: 6px;
-    border-radius: 2px;
-    border: none;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]::-ms-fill-lower {
-    background-color: rgba(68, 170, 119, 0.3);
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]::-ms-fill-upper {
-    background-color: rgba(68, 170, 119, 0.15);
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:focus::-webkit-slider-runnable-track {
-    background-color: rgba(68, 170, 119, 0.5);
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:focus::-moz-range-track {
-    background-color: rgba(68, 170, 119, 0.5);
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:focus::-ms-fill-lower {
-    background-color: rgba(68, 170, 119, 0.45);
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:focus::-ms-fill-upper {
-    background-color: rgba(68, 170, 119, 0.25);
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-right {
-    float: right;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-right .vicp-preview {
-    height: 150px;
-    overflow: hidden;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-right .vicp-preview .vicp-preview-item {
-    position: relative;
-    padding: 5px;
-    width: 100px;
-    height: 100px;
-    float: left;
-    margin-right: 16px;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-right .vicp-preview .vicp-preview-item span {
-    position: absolute;
-    bottom: -30px;
-    width: 100%;
-    font-size: 14px;
-    color: #bbb;
-    display: block;
-    text-align: center;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-right .vicp-preview .vicp-preview-item img {
-    position: absolute;
-    display: block;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    margin: auto;
-    padding: 3px;
-    background-color: #fff;
-    border: 1px solid rgba(0, 0, 0, 0.15);
-    overflow: hidden;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-right .vicp-preview .vicp-preview-item:last-child {
-    margin-right: 0;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-right .vicp-preview .vicp-preview-item:last-child img {
-    border-radius: 100%;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload {
-    position: relative;
-    padding: 35px;
-    height: 200px;
-    background-color: rgba(0, 0, 0, 0.03);
-    text-align: center;
-    border: 1px dashed #ddd;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload .vicp-loading {
-    display: block;
-    padding: 15px;
-    font-size: 16px;
-    color: #999;
-    line-height: 30px;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload .vicp-progress-wrap {
-    margin-top: 12px;
-    background-color: rgba(0, 0, 0, 0.08);
-    border-radius: 3px;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload .vicp-progress-wrap .vicp-progress {
-    position: relative;
-    display: block;
-    height: 5px;
-    border-radius: 3px;
-    background-color: #4a7;
-    -webkit-box-shadow: 0 2px 6px 0 rgba(68, 170, 119, 0.3);
-    box-shadow: 0 2px 6px 0 rgba(68, 170, 119, 0.3);
-    -webkit-transition: width 0.15s linear;
-    transition: width 0.15s linear;
-    background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
-    background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
-    background-size: 40px 40px;
-    -webkit-animation: vicp_progress 0.5s linear infinite;
-    animation: vicp_progress 0.5s linear infinite;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload .vicp-progress-wrap .vicp-progress::after {
-    content: '';
-    position: absolute;
-    display: block;
-    top: -3px;
-    right: -3px;
-    width: 9px;
-    height: 9px;
-    border: 1px solid rgba(245, 246, 247, 0.7);
-    -webkit-box-shadow: 0 1px 4px 0 rgba(68, 170, 119, 0.7);
-    box-shadow: 0 1px 4px 0 rgba(68, 170, 119, 0.7);
-    border-radius: 100%;
-    background-color: #4a7;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload .vicp-error,
-.vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload .vicp-success {
-    height: 100px;
-    line-height: 100px;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-operate {
-    position: absolute;
-    right: 20px;
-    bottom: 20px;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-operate a {
-    position: relative;
-    float: left;
-    display: block;
-    margin-left: 10px;
-    width: 100px;
-    height: 36px;
-    line-height: 36px;
-    text-align: center;
-    cursor: pointer;
-    font-size: 14px;
-    color: #4a7;
-    border-radius: 2px;
-    overflow: hidden;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-operate a:hover {
-    background-color: rgba(0, 0, 0, 0.03);
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-error,
-.vue-image-crop-upload .vicp-wrap .vicp-success {
-    display: block;
-    font-size: 14px;
-    line-height: 24px;
-    height: 24px;
-    color: #d10;
-    text-align: center;
-    vertical-align: top;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-success {
-    color: #4a7;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-icon3 {
-    position: relative;
-    display: inline-block;
-    width: 20px;
-    height: 20px;
-    top: 4px;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-icon3::after {
-    position: absolute;
-    top: 3px;
-    left: 6px;
-    width: 6px;
-    height: 10px;
-    border-width: 0 2px 2px 0;
-    border-color: #4a7;
-    border-style: solid;
-    -webkit-transform: rotate(45deg);
-    -ms-transform: rotate(45deg);
-    transform: rotate(45deg);
-    content: '';
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-icon2 {
-    position: relative;
-    display: inline-block;
-    width: 20px;
-    height: 20px;
-    top: 4px;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-icon2::after, .vue-image-crop-upload .vicp-wrap .vicp-icon2::before {
-    content: '';
-    position: absolute;
-    top: 9px;
-    left: 4px;
-    width: 13px;
-    height: 2px;
-    background-color: #d10;
-    -webkit-transform: rotate(45deg);
-    -ms-transform: rotate(45deg);
-    transform: rotate(45deg);
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-icon2::after {
-    -webkit-transform: rotate(-45deg);
-    -ms-transform: rotate(-45deg);
-    transform: rotate(-45deg);
-}
-
-.e-ripple {
-    position: absolute;
-    border-radius: 100%;
-    background-color: rgba(0, 0, 0, 0.15);
-    background-clip: padding-box;
-    pointer-events: none;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    -webkit-transform: scale(0);
-    -ms-transform: scale(0);
-    transform: scale(0);
-    opacity: 1;
-}
-
-.e-ripple.z-active {
-    opacity: 0;
-    -webkit-transform: scale(2);
-    -ms-transform: scale(2);
-    transform: scale(2);
-    -webkit-transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
-    transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
-    transition: opacity 1.2s ease-out, transform 0.6s ease-out;
-    transition: opacity 1.2s ease-out, transform 0.6s ease-out, -webkit-transform 0.6s ease-out;
-}

src/components/ImageCropper/utils.js

@@ -1,58 +0,0 @@
-/* eslint-disable */
-
-/**
- *
- * @param e
- * @param arg_opts
- * @returns {boolean}
- */
-export function effectRipple(e, arg_opts) {
-    let opts = Object.assign({
-            ele: e.target, // 波纹作用元素
-            type: 'hit', // hit点击位置扩散　center中心点扩展
-            bgc: 'rgba(0, 0, 0, 0.15)' // 波纹颜色
-        }, arg_opts),
-        target = opts.ele;
-    if (target) {
-        let rect = target.getBoundingClientRect(),
-            ripple = target.querySelector('.e-ripple');
-        if (!ripple) {
-            ripple = document.createElement('span');
-            ripple.className = 'e-ripple';
-            ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px';
-            target.appendChild(ripple);
-        } else {
-            ripple.className = 'e-ripple';
-        }
-        switch (opts.type) {
-            case 'center':
-                ripple.style.top = (rect.height / 2 - ripple.offsetHeight / 2) + 'px';
-                ripple.style.left = (rect.width / 2 - ripple.offsetWidth / 2) + 'px';
-                break;
-            default:
-                ripple.style.top = (e.pageY - rect.top - ripple.offsetHeight / 2 - document.body.scrollTop) + 'px';
-                ripple.style.left = (e.pageX - rect.left - ripple.offsetWidth / 2 - document.body.scrollLeft) + 'px';
-        }
-        ripple.style.backgroundColor = opts.bgc;
-        ripple.className = 'e-ripple z-active';
-        return false;
-    }
-}
-// database64文件格式转换为2进制
-/**
- *
- * @param data
- * @param mime
- * @returns {*}
- */
-export function data2blob(data, mime) {
-    // dataURL 的格式为 “data:image/png;base64,****”,逗号之前都是一些说明性的文字，我们只需要逗号之后的就行了
-    data = data.split(',')[1];
-    data = window.atob(data);
-    var ia = new Uint8Array(data.length);
-    for (var i = 0; i < data.length; i++) {
-        ia[i] = data.charCodeAt(i);
-    }
-    // canvas.toDataURL 返回的默认格式就是 image/png
-    return new Blob([ia], {type: mime});
-};

src/components/ImageCropper/utils/data2blob.js

@@ -0,0 +1,19 @@
+/**
+ * database64文件格式转换为2进制
+ *
+ * @param  {[String]} data dataURL 的格式为 “data:image/png;base64,****”,逗号之前都是一些说明性的文字，我们只需要逗号之后的就行了
+ * @param  {[String]} mime [description]
+ * @return {[blob]}      [description]
+ */
+export default function(data, mime) {
+  data = data.split(',')[1]
+  data = window.atob(data)
+  var ia = new Uint8Array(data.length)
+  for (var i = 0; i < data.length; i++) {
+    ia[i] = data.charCodeAt(i)
+  }
+  // canvas.toDataURL 返回的默认格式就是 image/png
+  return new Blob([ia], {
+    type: mime
+  })
+}

src/components/ImageCropper/utils/effectRipple.js

@@ -0,0 +1,39 @@
+/**
+ * 点击波纹效果
+ *
+ * @param  {[event]} e        [description]
+ * @param  {[Object]} arg_opts [description]
+ * @return {[bollean]}          [description]
+ */
+export default function(e, arg_opts) {
+  var opts = Object.assign({
+    ele: e.target, // 波纹作用元素
+    type: 'hit', // hit点击位置扩散center中心点扩展
+    bgc: 'rgba(0, 0, 0, 0.15)' // 波纹颜色
+  }, arg_opts)
+  var target = opts.ele
+  if (target) {
+    var rect = target.getBoundingClientRect()
+    var ripple = target.querySelector('.e-ripple')
+    if (!ripple) {
+      ripple = document.createElement('span')
+      ripple.className = 'e-ripple'
+      ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px'
+      target.appendChild(ripple)
+    } else {
+      ripple.className = 'e-ripple'
+    }
+    switch (opts.type) {
+      case 'center':
+        ripple.style.top = (rect.height / 2 - ripple.offsetHeight / 2) + 'px'
+        ripple.style.left = (rect.width / 2 - ripple.offsetWidth / 2) + 'px'
+        break
+      default:
+        ripple.style.top = (e.pageY - rect.top - ripple.offsetHeight / 2 - document.body.scrollTop) + 'px'
+        ripple.style.left = (e.pageX - rect.left - ripple.offsetWidth / 2 - document.body.scrollLeft) + 'px'
+    }
+    ripple.style.backgroundColor = opts.bgc
+    ripple.className = 'e-ripple z-active'
+    return false
+  }
+}

src/components/ImageCropper/utils/language.js

@@ -0,0 +1,232 @@
+export default {
+  zh: {
+    hint: '点击，或拖动图片至此处',
+    loading: '正在上传……',
+    noSupported: '浏览器不支持该功能，请使用IE10以上或其他现在浏览器！',
+    success: '上传成功',
+    fail: '图片上传失败',
+    preview: '头像预览',
+    btn: {
+      off: '取消',
+      close: '关闭',
+      back: '上一步',
+      save: '保存'
+    },
+    error: {
+      onlyImg: '仅限图片格式',
+      outOfSize: '单文件大小不能超过 ',
+      lowestPx: '图片最低像素为（宽*高）：'
+    }
+  },
+  'zh-tw': {
+    hint: '點擊，或拖動圖片至此處',
+    loading: '正在上傳……',
+    noSupported: '瀏覽器不支持該功能，請使用IE10以上或其他現代瀏覽器！',
+    success: '上傳成功',
+    fail: '圖片上傳失敗',
+    preview: '頭像預覽',
+    btn: {
+      off: '取消',
+      close: '關閉',
+      back: '上一步',
+      save: '保存'
+    },
+    error: {
+      onlyImg: '僅限圖片格式',
+      outOfSize: '單文件大小不能超過 ',
+      lowestPx: '圖片最低像素為（寬*高）：'
+    }
+  },
+  en: {
+    hint: 'Click or drag the file here to upload',
+    loading: 'Uploading…',
+    noSupported: 'Browser is not supported, please use IE10+ or other browsers',
+    success: 'Upload success',
+    fail: 'Upload failed',
+    preview: 'Preview',
+    btn: {
+      off: 'Cancel',
+      close: 'Close',
+      back: 'Back',
+      save: 'Save'
+    },
+    error: {
+      onlyImg: 'Image only',
+      outOfSize: 'Image exceeds size limit: ',
+      lowestPx: 'Image\'s size is too low. Expected at least: '
+    }
+  },
+  ro: {
+    hint: 'Atinge sau trage fișierul aici',
+    loading: 'Se încarcă',
+    noSupported: 'Browser-ul tău nu suportă acest feature. Te rugăm încearcă cu alt browser.',
+    success: 'S-a încărcat cu succes',
+    fail: 'A apărut o problemă la încărcare',
+    preview: 'Previzualizează',
+
+    btn: {
+      off: 'Anulează',
+      close: 'Închide',
+      back: 'Înapoi',
+      save: 'Salvează'
+    },
+
+    error: {
+      onlyImg: 'Doar imagini',
+      outOfSize: 'Imaginea depășește limita de: ',
+      loewstPx: 'Imaginea este prea mică; Minim: '
+    }
+  },
+  ru: {
+    hint: 'Нажмите, или перетащите файл в это окно',
+    loading: 'Загружаю……',
+    noSupported: 'Ваш браузер не поддерживается, пожалуйста, используйте IE10 + или другие браузеры',
+    success: 'Загрузка выполнена успешно',
+    fail: 'Ошибка загрузки',
+    preview: 'Предпросмотр',
+    btn: {
+      off: 'Отменить',
+      close: 'Закрыть',
+      back: 'Назад',
+      save: 'Сохранить'
+    },
+    error: {
+      onlyImg: 'Только изображения',
+      outOfSize: 'Изображение превышает предельный размер: ',
+      lowestPx: 'Минимальный размер изображения: '
+    }
+  },
+  'pt-br': {
+    hint: 'Clique ou arraste o arquivo aqui para carregar',
+    loading: 'Carregando…',
+    noSupported: 'Browser não suportado, use o IE10+ ou outro browser',
+    success: 'Sucesso ao carregar imagem',
+    fail: 'Falha ao carregar imagem',
+    preview: 'Pré-visualizar',
+    btn: {
+      off: 'Cancelar',
+      close: 'Fechar',
+      back: 'Voltar',
+      save: 'Salvar'
+    },
+    error: {
+      onlyImg: 'Apenas imagens',
+      outOfSize: 'A imagem excede o limite de tamanho: ',
+      lowestPx: 'O tamanho da imagem é muito pequeno. Tamanho mínimo: '
+    }
+  },
+  fr: {
+    hint: 'Cliquez ou glissez le fichier ici.',
+    loading: 'Téléchargement…',
+    noSupported: 'Votre navigateur n\'est pas supporté. Utilisez IE10 + ou un autre navigateur s\'il vous plaît.',
+    success: 'Téléchargement réussit',
+    fail: 'Téléchargement echoué',
+    preview: 'Aperçu',
+    btn: {
+      off: 'Annuler',
+      close: 'Fermer',
+      back: 'Retour',
+      save: 'Enregistrer'
+    },
+    error: {
+      onlyImg: 'Image uniquement',
+      outOfSize: 'L\'image sélectionnée dépasse la taille maximum: ',
+      lowestPx: 'L\'image sélectionnée est trop petite. Dimensions attendues: '
+    }
+  },
+  nl: {
+    hint: 'Klik hier of sleep een afbeelding in dit vlak',
+    loading: 'Uploaden…',
+    noSupported: 'Je browser wordt helaas niet ondersteund. Gebruik IE10+ of een andere browser.',
+    success: 'Upload succesvol',
+    fail: 'Upload mislukt',
+    preview: 'Voorbeeld',
+    btn: {
+      off: 'Annuleren',
+      close: 'Sluiten',
+      back: 'Terug',
+      save: 'Opslaan'
+    },
+    error: {
+      onlyImg: 'Alleen afbeeldingen',
+      outOfSize: 'De afbeelding is groter dan: ',
+      lowestPx: 'De afbeelding is te klein! Minimale afmetingen: '
+    }
+  },
+  tr: {
+    hint: 'Tıkla veya yüklemek istediğini buraya sürükle',
+    loading: 'Yükleniyor…',
+    noSupported: 'Tarayıcı desteklenmiyor, lütfen IE10+ veya farklı tarayıcı kullanın',
+    success: 'Yükleme başarılı',
+    fail: 'Yüklemede hata oluştu',
+    preview: 'Önizle',
+    btn: {
+      off: 'İptal',
+      close: 'Kapat',
+      back: 'Geri',
+      save: 'Kaydet'
+    },
+    error: {
+      onlyImg: 'Sadece resim',
+      outOfSize: 'Resim yükleme limitini aşıyor: ',
+      lowestPx: 'Resmin boyutu çok küçük. En az olması gereken: '
+    }
+  },
+  'es-MX': {
+    hint: 'Selecciona o arrastra una imagen',
+    loading: 'Subiendo...',
+    noSupported: 'Tu navegador no es soportado, porfavor usa IE10+ u otros navegadores mas recientes',
+    success: 'Subido exitosamente',
+    fail: 'Sucedió un error',
+    preview: 'Vista previa',
+    btn: {
+      off: 'Cancelar',
+      close: 'Cerrar',
+      back: 'Atras',
+      save: 'Guardar'
+    },
+    error: {
+      onlyImg: 'Unicamente imagenes',
+      outOfSize: 'La imagen excede el tamaño maximo:',
+      lowestPx: 'La imagen es demasiado pequeño. Se espera por lo menos:'
+    }
+  },
+  de: {
+    hint: 'Klick hier oder zieh eine Datei hier rein zum Hochladen',
+    loading: 'Hochladen…',
+    noSupported: 'Browser wird nicht unterstützt, bitte verwende IE10+ oder andere Browser',
+    success: 'Upload erfolgreich',
+    fail: 'Upload fehlgeschlagen',
+    preview: 'Vorschau',
+    btn: {
+      off: 'Abbrechen',
+      close: 'Schließen',
+      back: 'Zurück',
+      save: 'Speichern'
+    },
+    error: {
+      onlyImg: 'Nur Bilder',
+      outOfSize: 'Das Bild ist zu groß: ',
+      lowestPx: 'Das Bild ist zu klein. Mindestens: '
+    }
+  },
+  ja: {
+    hint: 'クリック・ドラッグしてファイルをアップロード',
+    loading: 'アップロード中...',
+    noSupported: 'このブラウザは対応されていません。IE10+かその他の主要ブラウザをお使いください。',
+    success: 'アップロード成功',
+    fail: 'アップロード失敗',
+    preview: 'プレビュー',
+    btn: {
+      off: 'キャンセル',
+      close: '閉じる',
+      back: '戻る',
+      save: '保存'
+    },
+    error: {
+      onlyImg: '画像のみ',
+      outOfSize: '画像サイズが上限を超えています。上限: ',
+      lowestPx: '画像が小さすぎます。最小サイズ: '
+    }
+  }
+}

src/components/ImageCropper/utils/mimes.js

@@ -0,0 +1,7 @@
+export default {
+  'jpg': 'image/jpeg',
+  'png': 'image/png',
+  'gif': 'image/gif',
+  'svg': 'image/svg+xml',
+  'psd': 'image/photoshop'
+}

src/components/JsonEditor/index.vue

@@ -53,11 +53,19 @@ export default {
 }
 </script>
 
-<style>
-.CodeMirror {
+<style scoped>
+.json-editor{
   height: 100%;
+  position: relative;
 }
-.json-editor .cm-s-rubyblue span.cm-string {
+.json-editor >>> .CodeMirror {
+  height: auto;
+  min-height: 300px;
+}
+.json-editor >>> .CodeMirror-scroll{
+  min-height: 300px;
+}
+.json-editor >>> .cm-s-rubyblue span.cm-string {
   color: #F08047;
 }
 </style>

src/components/Kanban/index.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="board-column">
+    <div class="board-column-header">
+      {{headerText}}
+    </div>
+    <draggable
+      class="board-column-content"
+      :list="list"
+      :options="options">
+      <div class="board-item" v-for="element in list" :key="element.id">
+        {{element.name}} {{element.id}}
+      </div>
+    </draggable>
+  </div>
+</template>
+<script>
+import draggable from 'vuedraggable'
+
+export default {
+  name: 'dragKanban-demo',
+  components: {
+    draggable
+  },
+  props: {
+    headerText: {
+      type: String,
+      default: 'Header'
+    },
+    options: {
+      type: Object,
+      default() {
+        return {}
+      }
+    },
+    list: {
+      type: Array,
+      default() {
+        return []
+      }
+    }
+  }
+}
+</script>
+<style lang="scss">
+.board-column {
+  min-width: 300px;
+  min-height: 100px;
+  height: auto;
+  overflow: hidden;
+  background: #f0f0f0;
+  border-radius: 3px;
+
+  .board-column-header {
+    height: 50px;
+    line-height: 50px;
+    overflow: hidden;
+    padding: 0 20px;
+    text-align: center;
+    background: #333;
+    color: #fff;
+    border-radius: 3px 3px 0 0;
+  }
+
+  .board-column-content {
+    height: auto;
+    overflow: hidden;
+    border: 10px solid transparent;
+    min-height: 60px;
+    display: flex;
+    justify-content: flex-start;
+    flex-direction: column;
+    align-items: center;
+
+    .board-item {
+      cursor: pointer;
+      width: 100%;
+      height: 64px;
+      margin: 5px 0;
+      background-color: #fff;
+      text-align: left;
+      line-height: 54px;
+      padding: 5px 10px;
+      box-sizing: border-box;
+      box-shadow: 0px 1px 3px 0 rgba(0,0,0,0.2);
+    }
+  }
+}
+</style>
+

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

src/components/MarkdownEditor/index.vue

@@ -73,47 +73,44 @@ export default {
     })
   },
   destroyed() {
+    this.simplemde.toTextArea()
     this.simplemde = null
   }
 }
 </script>
 
-<style>
-.simplemde-container .CodeMirror {
+<style scoped>
+.simplemde-container>>>.CodeMirror {
+  min-height: 150px;
+  line-height: 20px;
+}
+
+.simplemde-container>>>.CodeMirror-scroll {
   min-height: 150px;
 }
 
-.simplemde-container .CodeMirror-scroll {
-  min-height: 150px;
-}
-
-.simplemde-container .CodeMirror-code {
+.simplemde-container>>>.CodeMirror-code {
   padding-bottom: 40px;
 }
 
-.simplemde-container .editor-statusbar {
+.simplemde-container>>>.editor-statusbar {
   display: none;
 }
 
-.simplemde-container .CodeMirror .CodeMirror-code .cm-link {
-  color: #1482F0;
+.simplemde-container>>>.CodeMirror .CodeMirror-code .cm-link {
+  color: #1890ff;
 }
 
-.simplemde-container .CodeMirror .CodeMirror-code .cm-string.cm-url {
+.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 {
+.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 {
+.simplemde-container >>> .editor-toolbar.fullscreen,
+.simplemde-container >>> .CodeMirror-fullscreen {
   z-index: 1003;
 }
 </style>
-
-

src/components/PanThumb/index.vue

@@ -1,12 +1,12 @@
 <template>
-	<div class="pan-item" :style="{zIndex:zIndex,height:height,width:width}">
-		<div class="pan-info">
-			<div class="pan-info-roles-container">
-				<slot></slot>
-			</div>
-		</div>
-		<img class="pan-thumb" :src="image">
-	</div>
+  <div class="pan-item" :style="{zIndex:zIndex,height:height,width:width}">
+    <div class="pan-info">
+      <div class="pan-info-roles-container">
+        <slot></slot>
+      </div>
+    </div>
+    <img class="pan-thumb" :src="image">
+  </div>
 </template>
 
 <script>
@@ -19,7 +19,7 @@ export default {
     },
     zIndex: {
       type: Number,
-      default: 100
+      default: 1
     },
     width: {
       type: String,
@@ -35,106 +35,106 @@ export default {
 
 <style scoped>
 .pan-item {
-	width: 200px;
-	height: 200px;
-	border-radius: 50%;
-	display: inline-block;
-	position: relative;
-	cursor: default;
-	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+  width: 200px;
+  height: 200px;
+  border-radius: 50%;
+  display: inline-block;
+  position: relative;
+  cursor: default;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
 }
 
 .pan-info-roles-container {
-	padding: 20px;
-	text-align: center;
+  padding: 20px;
+  text-align: center;
 }
 
 .pan-thumb {
-	width: 100%;
-	height: 100%;
-	background-size: 100%;
-	border-radius: 50%;
-	overflow: hidden;
-	position: absolute;
-	transform-origin: 95% 40%;
-	transition: all 0.3s ease-in-out;
+  width: 100%;
+  height: 100%;
+  background-size: 100%;
+  border-radius: 50%;
+  overflow: hidden;
+  position: absolute;
+  transform-origin: 95% 40%;
+  transition: all 0.3s ease-in-out;
 }
 
 .pan-thumb:after {
-	content: '';
-	width: 8px;
-	height: 8px;
-	position: absolute;
-	border-radius: 50%;
-	top: 40%;
-	left: 95%;
-	margin: -4px 0 0 -4px;
-	background: radial-gradient(ellipse at center, rgba(14, 14, 14, 1) 0%, rgba(125, 126, 125, 1) 100%);
-	box-shadow: 0 0 1px rgba(255, 255, 255, 0.9);
+  content: '';
+  width: 8px;
+  height: 8px;
+  position: absolute;
+  border-radius: 50%;
+  top: 40%;
+  left: 95%;
+  margin: -4px 0 0 -4px;
+  background: radial-gradient(ellipse at center, rgba(14, 14, 14, 1) 0%, rgba(125, 126, 125, 1) 100%);
+  box-shadow: 0 0 1px rgba(255, 255, 255, 0.9);
 }
 
 .pan-info {
-	position: absolute;
-	width: inherit;
-	height: inherit;
-	border-radius: 50%;
-	overflow: hidden;
-	box-shadow: inset 0 0 0 5px rgba(0, 0, 0, 0.05);
+  position: absolute;
+  width: inherit;
+  height: inherit;
+  border-radius: 50%;
+  overflow: hidden;
+  box-shadow: inset 0 0 0 5px rgba(0, 0, 0, 0.05);
 }
 
 .pan-info h3 {
-	color: #fff;
-	text-transform: uppercase;
-	position: relative;
-	letter-spacing: 2px;
-	font-size: 18px;
-	margin: 0 60px;
-	padding: 22px 0 0 0;
-	height: 85px;
-	font-family: 'Open Sans', Arial, sans-serif;
-	text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.3);
+  color: #fff;
+  text-transform: uppercase;
+  position: relative;
+  letter-spacing: 2px;
+  font-size: 18px;
+  margin: 0 60px;
+  padding: 22px 0 0 0;
+  height: 85px;
+  font-family: 'Open Sans', Arial, sans-serif;
+  text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.3);
 }
 
 .pan-info p {
-	color: #fff;
-	padding: 10px 5px;
-	font-style: italic;
-	margin: 0 30px;
-	font-size: 12px;
-	border-top: 1px solid rgba(255, 255, 255, 0.5);
+  color: #fff;
+  padding: 10px 5px;
+  font-style: italic;
+  margin: 0 30px;
+  font-size: 12px;
+  border-top: 1px solid rgba(255, 255, 255, 0.5);
 }
 
 .pan-info p a {
-	display: block;
-	color: #333;
-	width: 80px;
-	height: 80px;
-	background: rgba(255, 255, 255, 0.3);
-	border-radius: 50%;
-	color: #fff;
-	font-style: normal;
-	font-weight: 700;
-	text-transform: uppercase;
-	font-size: 9px;
-	letter-spacing: 1px;
-	padding-top: 24px;
-	margin: 7px auto 0;
-	font-family: 'Open Sans', Arial, sans-serif;
-	opacity: 0;
-	transition: transform 0.3s ease-in-out 0.2s, opacity 0.3s ease-in-out 0.2s, background 0.2s linear 0s;
-	transform: translateX(60px) rotate(90deg);
+  display: block;
+  color: #333;
+  width: 80px;
+  height: 80px;
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 50%;
+  color: #fff;
+  font-style: normal;
+  font-weight: 700;
+  text-transform: uppercase;
+  font-size: 9px;
+  letter-spacing: 1px;
+  padding-top: 24px;
+  margin: 7px auto 0;
+  font-family: 'Open Sans', Arial, sans-serif;
+  opacity: 0;
+  transition: transform 0.3s ease-in-out 0.2s, opacity 0.3s ease-in-out 0.2s, background 0.2s linear 0s;
+  transform: translateX(60px) rotate(90deg);
 }
 
 .pan-info p a:hover {
-	background: rgba(255, 255, 255, 0.5);
+  background: rgba(255, 255, 255, 0.5);
 }
 
 .pan-item:hover .pan-thumb {
-	transform: rotate(-110deg);
+  transform: rotate(-110deg);
 }
 
 .pan-item:hover .pan-info p a {
-	opacity: 1;
-	transform: translateX(0px) rotate(0deg);
+  opacity: 1;
+  transform: translateX(0px) rotate(0deg);
 }
 </style>

src/components/ScrollBar/index.vue

@@ -1,56 +0,0 @@
-<template>
-  <div class="scroll-container" ref="scrollContainer" @mousewheel="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) {
-      e.preventDefault()
-      const $container = this.$refs.scrollContainer
-      const $containerHeight = $container.offsetHeight
-      const $wrapper = this.$refs.scrollWrapper
-      const $wrapperHeight = $wrapper.offsetHeight
-      if (e.wheelDelta > 0) {
-        this.top = Math.min(0, this.top + e.wheelDelta)
-      } else {
-        if ($containerHeight - delta < $wrapperHeight) {
-          if (this.top < -($wrapperHeight - $containerHeight + delta)) {
-            this.top = this.top
-          } else {
-            this.top = Math.max(this.top + e.wheelDelta, $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>

src/components/ScrollPane/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="scroll-container" ref="scrollContainer" @mousewheel="handleScroll">
+  <div class="scroll-container" ref="scrollContainer" @wheel.prevent="handleScroll">
     <div class="scroll-wrapper" ref="scrollWrapper" :style="{left: left + 'px'}">
       <slot></slot>
     </div>
@@ -18,20 +18,20 @@ export default {
   },
   methods: {
     handleScroll(e) {
-      e.preventDefault()
+      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 (e.wheelDelta > 0) {
-        this.left = Math.min(0, this.left + e.wheelDelta)
+      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 + e.wheelDelta, $containerWidth - $wrapperWidth - padding)
+            this.left = Math.max(this.left + eventDelta, $containerWidth - $wrapperWidth - padding)
           }
         } else {
           this.left = 0
@@ -64,6 +64,7 @@ export default {
   white-space: nowrap;
   position: relative;
   overflow: hidden;
+  width: 100%;
   .scroll-wrapper {
     position: absolute;
   }

src/components/Sticky/index.vue

@@ -28,22 +28,22 @@ export default {
     return {
       active: false,
       position: '',
-      currentTop: '',
       width: undefined,
       height: undefined,
-      child: null,
-      stickyHeight: 0
+      isSticky: false
     }
   },
   mounted() {
     this.height = this.$el.getBoundingClientRect().height
     window.addEventListener('scroll', this.handleScroll)
+    window.addEventListener('resize', this.handleReize)
   },
   activated() {
     this.handleScroll()
   },
   destroyed() {
     window.removeEventListener('scroll', this.handleScroll)
+    window.removeEventListener('resize', this.handleReize)
   },
   methods: {
     sticky() {
@@ -53,6 +53,7 @@ export default {
       this.position = 'fixed'
       this.active = true
       this.width = this.width + 'px'
+      this.isSticky = true
     },
     reset() {
       if (!this.active) {
@@ -61,15 +62,21 @@ export default {
       this.position = ''
       this.width = 'auto'
       this.active = false
+      this.isSticky = false
     },
     handleScroll() {
       this.width = this.$el.getBoundingClientRect().width
       const offsetTop = this.$el.getBoundingClientRect().top
-      if (offsetTop <= this.stickyTop) {
+      if (offsetTop < this.stickyTop) {
         this.sticky()
         return
       }
       this.reset()
+    },
+    handleReize() {
+      if (this.isSticky) {
+        this.width = this.$el.getBoundingClientRect().width + 'px'
+      }
     }
   }
 }

src/components/ThemePicker/index.vue

@@ -6,9 +6,8 @@
 </template>
 
 <script>
-import { getVersion } from '@/utils/index.js'
 
-const version = getVersion('element-ui') // element-ui version from package.json
+const version = require('element-ui/package.json').version // element-ui version from node_modules
 const ORIGINAL_THEME = '#409EFF' // default color
 
 export default {

src/components/Tinymce/components/editorImage.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="upload-container">
-    <el-button icon='upload' :style="{background:color,borderColor:color}" @click=" dialogVisible=true" type="primary">上传图片
+    <el-button icon='el-icon-upload' size="mini" :style="{background:color,borderColor:color}" @click=" dialogVisible=true" type="primary">上传图片
     </el-button>
-    <el-dialog :visible.sync="dialogVisible">
+    <el-dialog append-to-body :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>
@@ -21,7 +21,7 @@ export default {
   props: {
     color: {
       type: String,
-      default: '#20a0ff'
+      default: '#1890ff'
     }
   },
   data() {
@@ -87,9 +87,10 @@ export default {
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-    .upload-container {
-        .editor-slide-upload {
-            margin-bottom: 20px;
-        }
-    }
+.editor-slide-upload {
+  margin-bottom: 20px;
+  /deep/ .el-upload--picture-card {
+    width: 100%;
+  }
+}
 </style>

src/components/Tinymce/index.vue

@@ -1,14 +1,16 @@
 <template>
-  <div class="tinymce-container editor-container">
+  <div class="tinymce-container editor-container" :class="{fullscreen:fullscreen}">
     <textarea class="tinymce-textarea" :id="tinymceId"></textarea>
     <div class="editor-custom-btn-container">
-     <editorImage  color="#20a0ff" class="editor-upload-btn" @successCBK="imageSuccessCBK"></editorImage>
-      </div>
+      <editorImage color="#1890ff" class="editor-upload-btn" @successCBK="imageSuccessCBK"></editorImage>
+    </div>
   </div>
 </template>
 
 <script>
 import editorImage from './components/editorImage'
+import plugins from './plugins'
+import toolbar from './toolbar'
 
 export default {
   name: 'tinymce',
@@ -25,11 +27,11 @@ export default {
       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']
+        return []
       }
     },
     menubar: {
-      default: ''
+      default: 'file edit insert view format table'
     },
     height: {
       type: Number,
@@ -41,7 +43,8 @@ export default {
     return {
       hasChange: false,
       hasInit: false,
-      tinymceId: this.id || 'vue-tinymce-' + +new Date()
+      tinymceId: this.id || 'vue-tinymce-' + +new Date(),
+      fullscreen: false
     }
   },
   watch: {
@@ -68,17 +71,16 @@ export default {
         height: this.height,
         body_class: 'panel-body ',
         object_resizing: false,
-        toolbar: this.toolbar,
+        toolbar: this.toolbar.length > 0 ? this.toolbar : toolbar,
         menubar: this.menubar,
-        plugins: 'advlist,autolink,code,paste,textcolor, colorpicker,fullscreen,link,lists,media,wordcount, imagetools',
+        plugins: plugins,
         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',
+        imagetools_cors_hosts: ['www.tinymce.com', 'codepen.io'],
         default_link_target: '_blank',
         link_title: false,
         init_instance_callback: editor => {
@@ -86,9 +88,14 @@ export default {
             editor.setContent(_this.value)
           }
           _this.hasInit = true
-          editor.on('NodeChange Change KeyUp', () => {
+          editor.on('NodeChange Change KeyUp SetContent', () => {
             this.hasChange = true
-            this.$emit('input', editor.getContent({ format: 'raw' }))
+            this.$emit('input', editor.getContent())
+          })
+        },
+        setup(editor) {
+          editor.on('FullscreenStateChanged', (e) => {
+            _this.fullscreen = e.state
           })
         }
         // 整合七牛上传
@@ -152,7 +159,10 @@ export default {
 
 <style scoped>
 .tinymce-container {
-  position: relative
+  position: relative;
+}
+.tinymce-container>>>.mce-fullscreen {
+  z-index: 10000;
 }
 .tinymce-textarea {
   visibility: hidden;
@@ -160,9 +170,13 @@ export default {
 }
 .editor-custom-btn-container {
   position: absolute;
-  right: 15px;
+  right: 4px;
+  top: 4px;
   /*z-index: 2005;*/
-  top: 18px;
+}
+.fullscreen .editor-custom-btn-container {
+  z-index: 10000;
+  position: fixed;
 }
 .editor-upload-btn {
   display: inline-block;

src/components/Tinymce/plugins.js

@@ -0,0 +1,7 @@
+// Any plugins you want to use has to be imported
+// Detail plugins list see https://www.tinymce.com/docs/plugins/
+// Custom builds see https://www.tinymce.com/download/custom-builds/
+
+const plugins = ['advlist anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools importcss insertdatetime legacyoutput link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount']
+
+export default plugins

src/components/Tinymce/toolbar.js

@@ -0,0 +1,6 @@
+// Here is a list of the toolbar
+// Detail list see https://www.tinymce.com/docs/advanced/editor-control-identifiers/#toolbarcontrols
+
+const toolbar = ['bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample', 'hr bullist numlist link image charmap	 preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen']
+
+export default toolbar

src/components/TreeTable/eval.js

@@ -0,0 +1,29 @@
+/**
+* @Author: jianglei
+* @Date:   2017-10-12 12:06:49
+*/
+'use strict'
+import Vue from 'vue'
+export default function treeToArray(data, expandAll, parent = null, level = null) {
+  let tmp = []
+  Array.from(data).forEach(function(record) {
+    if (record._expanded === undefined) {
+      Vue.set(record, '_expanded', expandAll)
+    }
+    let _level = 1
+    if (level !== undefined && level !== null) {
+      _level = level + 1
+    }
+    Vue.set(record, '_level', _level)
+    // 如果有父元素
+    if (parent) {
+      Vue.set(record, 'parent', parent)
+    }
+    tmp.push(record)
+    if (record.children && record.children.length > 0) {
+      const children = treeToArray(record.children, expandAll, record, _level)
+      tmp = tmp.concat(children)
+    }
+  })
+  return tmp
+}

src/components/TreeTable/index.vue

@@ -0,0 +1,124 @@
+<template>
+  <el-table :data="formatData" :row-style="showRow" v-bind="$attrs">
+    <el-table-column v-if="columns.length===0" width="150">
+      <template slot-scope="scope">
+        <span v-for="space in scope.row._level" class="ms-tree-space" :key="space"></span>
+        <span class="tree-ctrl" v-if="iconShow(0,scope.row)" @click="toggleExpanded(scope.$index)">
+          <i v-if="!scope.row._expanded" class="el-icon-plus"></i>
+          <i v-else class="el-icon-minus"></i>
+        </span>
+        {{scope.$index}}
+      </template>
+    </el-table-column>
+    <el-table-column v-else v-for="(column, index) in columns" :key="column.value" :label="column.text" :width="column.width">
+      <template slot-scope="scope">
+        <span v-if="index === 0" v-for="space in scope.row._level" class="ms-tree-space" :key="space"></span>
+        <span class="tree-ctrl" v-if="iconShow(index,scope.row)" @click="toggleExpanded(scope.$index)">
+          <i v-if="!scope.row._expanded" class="el-icon-plus"></i>
+          <i v-else class="el-icon-minus"></i>
+        </span>
+        {{scope.row[column.value]}}
+      </template>
+    </el-table-column>
+    <slot></slot>
+  </el-table>
+</template>
+
+<script>
+/**
+  Auth: Lei.j1ang
+  Created: 2018/1/19-13:59
+*/
+import treeToArray from './eval'
+export default {
+  name: 'treeTable',
+  props: {
+    data: {
+      type: [Array, Object],
+      required: true
+    },
+    columns: {
+      type: Array,
+      default: () => []
+    },
+    evalFunc: Function,
+    evalArgs: Array,
+    expandAll: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    // 格式化数据源
+    formatData: function() {
+      let tmp
+      if (!Array.isArray(this.data)) {
+        tmp = [this.data]
+      } else {
+        tmp = this.data
+      }
+      const func = this.evalFunc || treeToArray
+      const args = this.evalArgs ? Array.concat([tmp, this.expandAll], this.evalArgs) : [tmp, this.expandAll]
+      return func.apply(null, args)
+    }
+  },
+  methods: {
+    showRow: function(row) {
+      const show = (row.row.parent ? (row.row.parent._expanded && row.row.parent._show) : true)
+      row.row._show = show
+      return show ? 'animation:treeTableShow 1s;-webkit-animation:treeTableShow 1s;' : 'display:none;'
+    },
+    // 切换下级是否展开
+    toggleExpanded: function(trIndex) {
+      const record = this.formatData[trIndex]
+      record._expanded = !record._expanded
+    },
+    // 图标显示
+    iconShow(index, record) {
+      return (index === 0 && record.children && record.children.length > 0)
+    }
+  }
+}
+</script>
+<style rel="stylesheet/css">
+  @keyframes treeTableShow {
+    from {opacity: 0;}
+    to {opacity: 1;}
+  }
+  @-webkit-keyframes treeTableShow {
+    from {opacity: 0;}
+    to {opacity: 1;}
+  }
+</style>
+
+<style lang="scss" rel="stylesheet/scss" scoped>
+  $color-blue: #2196F3;
+  $space-width: 18px;
+  .ms-tree-space {
+    position: relative;
+    top: 1px;
+    display: inline-block;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 1;
+    width: $space-width;
+    height: 14px;
+    &::before {
+      content: ""
+    }
+  }
+  .processContainer{
+    width: 100%;
+    height: 100%;
+  }
+  table td {
+    line-height: 26px;
+  }
+
+  .tree-ctrl{
+    position: relative;
+    cursor: pointer;
+    color: $color-blue;
+    margin-left: -$space-width;
+  }
+</style>

src/components/TreeTable/readme.md

@@ -0,0 +1,89 @@
+## 写在前面
+此组件仅提供一个创建TreeTable的解决思路
+
+## prop说明
+#### *data*
+  **必填**
+
+  原始数据,要求是一个数组或者对象
+  ```javascript
+    [{
+      key1: value1,
+      key2: value2,
+      children: [{
+        key1: value1
+      },
+      {
+        key1: value1
+      }]
+    },
+    {
+      key1: value1
+    }]
+  ```
+  或者
+ ```javascript
+    {
+      key1: value1,
+      key2: value2,
+      children: [{
+        key1: value1
+      },
+      {
+        key1: value1
+      }]
+    }
+  ```
+
+#### columns
+  列属性,要求是一个数组
+
+  1. text: 显示在表头的文字
+  2. value: 对应data的key。treeTable将显示相应的value
+  3. width: 每列的宽度，为一个数字(可选)
+  
+  如果你想要每个字段都有自定义的样式或者嵌套其他组件，columns可不提供，直接像在el-table一样写即可，如果没有自定义内容，提供columns将更加的便捷方便
+  
+  如果你有几个字段是需要自定义的，几个不需要，那么可以将不需要自定义的字段放入columns，将需要自定义的内容放入到slot中，详情见后文
+  ```javascript
+  [{
+    value:string,
+    text:string,
+    width:number
+  },{
+    value:string,
+    text:string,
+    width:number
+  }]
+  ```
+
+#### expandAll
+  是否默认全部展开，boolean值，默认为false
+
+#### evalFunc
+  解析函数，function，非必须
+
+  如果不提供，将使用默认的[evalFunc](./eval.js)
+
+  如果提供了evalFunc,那么会用提供的evalFunc去解析data，并返回treeTable渲染所需要的值。如何编写一个evalFunc，请参考[*eval.js*](https://github.com/PanJiaChen/vue-element-admin/blob/master/src/components/TreeTable/eval.js)或[*customEval.js*](https://github.com/PanJiaChen/vue-element-admin/blob/master/src/views/example/table/treeTable/customEval.js)
+
+#### evalArgs
+  解析函数的参数，是一个数组
+
+  **请注意，自定义的解析函数参数第一个为this.data，第二个参数为， this.expandAll,你不需要在evalArgs填写。一定记住，这两个参数是强制性的，并且位置不可颠倒** *this.data为需要解析的数据，this.expandAll为是否默认展开*
+
+  如你的解析函数需要的参数为`(this.data, this.expandAll,1,2,3,4)`，那么你只需要将`[1,2,3,4]`赋值给`evalArgs`就可以了
+  
+  如果你的解析函数参数只有`(this.data, this.expandAll)`,那么就可以不用填写evalArgs了
+  
+  具体可参考[*customEval.js*](https://github.com/PanJiaChen/vue-element-admin/blob/master/src/views/example/table/treeTable/customEval.js)的函数参数和[customTreeTable](https://github.com/PanJiaChen/vue-element-admin/blob/master/src/views/example/table/treeTable/customTreeTable.vue)的`evalArgs`属性值
+
+ ## slot
+ 这是一个自定义列的插槽。
+ 
+ 默认情况下，treeTable只有一行行展示数据的功能。但是一般情况下，我们会要给行加上一个操作按钮或者根据当行数据展示不同的样式，这时我们就需要自定义列了。请参考[customTreeTable](https://github.com/PanJiaChen/vue-element-admin/blob/master/src/views/example/table/treeTable/customTreeTable.vue)，[实例效果](http://panjiachen.github.io/vue-element-admin/#/example/table/custom-tree-table)
+ 
+ `slot`和`columns属性`可同时存在,columns里面的数据列会在slot自定义列的左边展示
+
+ ## 其他
+  如果有其他的需求，请参考[el-table](http://element-cn.eleme.io/#/en-US/component/table)的api自行修改index.vue

src/components/Upload/singleImage2.vue

@@ -1,19 +1,19 @@
 <template>
-	<div class="singleImageUpload2 upload-container">
-		<el-upload class="image-uploader" :data="dataObj" drag :multiple="false" :show-file-list="false" action="https://httpbin.org/post"
-		  :on-success="handleImageScucess">
-			<i class="el-icon-upload"></i>
-			<div class="el-upload__text">Drag或<em>点击上传</em></div>
-		</el-upload>
-		<div v-show="imageUrl.length>0" class="image-preview">
-			<div class="image-preview-wrapper" v-show="imageUrl.length>1">
-				<img :src="imageUrl">
-				<div class="image-preview-action">
-					<i @click="rmImage" class="el-icon-delete"></i>
-				</div>
-			</div>
-		</div>
-	</div>
+  <div class="singleImageUpload2 upload-container">
+    <el-upload class="image-uploader" :data="dataObj" drag :multiple="false" :show-file-list="false" action="https://httpbin.org/post"
+      :on-success="handleImageScucess">
+      <i class="el-icon-upload"></i>
+      <div class="el-upload__text">Drag或<em>点击上传</em></div>
+    </el-upload>
+    <div v-show="imageUrl.length>0" class="image-preview">
+      <div class="image-preview-wrapper" v-show="imageUrl.length>1">
+        <img :src="imageUrl">
+        <div class="image-preview-action">
+          <i @click="rmImage" class="el-icon-delete"></i>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -66,53 +66,53 @@ export default {
 
 <style rel="stylesheet/scss" lang="scss" scoped>
 .upload-container {
-	width: 100%;
-	height: 100%;
-	position: relative;
-	.image-uploader {
-		height: 100%;
-	}
-	.image-preview {
-		width: 100%;
-		height: 100%;
-		position: absolute;
-		left: 0px;
-		top: 0px;
-		border: 1px dashed #d9d9d9;
-		.image-preview-wrapper {
-			position: relative;
-			width: 100%;
-			height: 100%;
-			img {
-				width: 100%;
-				height: 100%;
-			}
-		}
-		.image-preview-action {
-			position: absolute;
-			width: 100%;
-			height: 100%;
-			left: 0;
-			top: 0;
-			cursor: default;
-			text-align: center;
-			color: #fff;
-			opacity: 0;
-			font-size: 20px;
-			background-color: rgba(0, 0, 0, .5);
-			transition: opacity .3s;
-			cursor: pointer;
-			text-align: center;
-			line-height: 200px;
-			.el-icon-delete {
-				font-size: 36px;
-			}
-		}
-		&:hover {
-			.image-preview-action {
-				opacity: 1;
-			}
-		}
-	}
+  width: 100%;
+  height: 100%;
+  position: relative;
+  .image-uploader {
+    height: 100%;
+  }
+  .image-preview {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    border: 1px dashed #d9d9d9;
+    .image-preview-wrapper {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .image-preview-action {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      left: 0;
+      top: 0;
+      cursor: default;
+      text-align: center;
+      color: #fff;
+      opacity: 0;
+      font-size: 20px;
+      background-color: rgba(0, 0, 0, .5);
+      transition: opacity .3s;
+      cursor: pointer;
+      text-align: center;
+      line-height: 200px;
+      .el-icon-delete {
+        font-size: 36px;
+      }
+    }
+    &:hover {
+      .image-preview-action {
+        opacity: 1;
+      }
+    }
+  }
 }
 </style>

src/components/Upload/singleImage3.vue

@@ -1,35 +1,34 @@
 <template>
-	<div class="upload-container">
-		<el-upload class="image-uploader" :data="dataObj" drag :multiple="false" :show-file-list="false" action="https://httpbin.org/post"
-		  :on-success="handleImageScucess">
-			<i class="el-icon-upload"></i>
-			<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
-		</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>
-				</div>
-			</div>
-		</div>
-		<div class="image-preview">
-			<div class="image-preview-wrapper" v-show="imageUrl.length>1">
-				<img :src="imageUrl">
-				<div class="image-preview-action">
-					<i @click="rmImage" class="el-icon-delete"></i>
-				</div>
-			</div>
-		</div>
-	</div>
+  <div class="upload-container">
+    <el-upload class="image-uploader" :data="dataObj" drag :multiple="false" :show-file-list="false" action="https://httpbin.org/post"
+      :on-success="handleImageScucess">
+      <i class="el-icon-upload"></i>
+      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+    </el-upload>
+    <div class="image-preview image-app-preview">
+      <div class="image-preview-wrapper" v-show="imageUrl.length>1">
+        <img :src="imageUrl">
+        <div class="image-preview-action">
+          <i @click="rmImage" class="el-icon-delete"></i>
+        </div>
+      </div>
+    </div>
+    <div class="image-preview">
+      <div class="image-preview-wrapper" v-show="imageUrl.length>1">
+        <img :src="imageUrl">
+        <div class="image-preview-action">
+          <i @click="rmImage" class="el-icon-delete"></i>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
 import { getToken } from '@/api/qiniu'
 
 export default {
-  name: 'singleImageUpload',
+  name: 'singleImageUpload3',
   props: {
     value: String
   },
@@ -77,70 +76,70 @@ export default {
 <style rel="stylesheet/scss" lang="scss" scoped>
 @import "src/styles/mixin.scss";
 .upload-container {
-	width: 100%;
-	position: relative;
-	@include clearfix;
-	.image-uploader {
-		width: 35%;
-		float: left;
-	}
-	.image-preview {
-		width: 200px;
-		height: 200px;
-		position: relative;
-		border: 1px dashed #d9d9d9;
-		float: left;
-		margin-left: 50px;
-		.image-preview-wrapper {
-			position: relative;
-			width: 100%;
-			height: 100%;
-			img {
-				width: 100%;
-				height: 100%;
-			}
-		}
-		.image-preview-action {
-			position: absolute;
-			width: 100%;
-			height: 100%;
-			left: 0;
-			top: 0;
-			cursor: default;
-			text-align: center;
-			color: #fff;
-			opacity: 0;
-			font-size: 20px;
-			background-color: rgba(0, 0, 0, .5);
-			transition: opacity .3s;
-			cursor: pointer;
-			text-align: center;
-			line-height: 200px;
-			.el-icon-delete {
-				font-size: 36px;
-			}
-		}
-		&:hover {
-			.image-preview-action {
-				opacity: 1;
-			}
-		}
-	}
-	.image-app-preview {
-		width: 320px;
-		height: 180px;
-		position: relative;
-		border: 1px dashed #d9d9d9;
-		float: left;
-		margin-left: 50px;
-		.app-fake-conver {
-			height: 44px;
-			position: absolute;
-			width: 100%; // background: rgba(0, 0, 0, .1);
-			text-align: center;
-			line-height: 64px;
-			color: #fff;
-		}
-	}
+  width: 100%;
+  position: relative;
+  @include clearfix;
+  .image-uploader {
+    width: 35%;
+    float: left;
+  }
+  .image-preview {
+    width: 200px;
+    height: 200px;
+    position: relative;
+    border: 1px dashed #d9d9d9;
+    float: left;
+    margin-left: 50px;
+    .image-preview-wrapper {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .image-preview-action {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      left: 0;
+      top: 0;
+      cursor: default;
+      text-align: center;
+      color: #fff;
+      opacity: 0;
+      font-size: 20px;
+      background-color: rgba(0, 0, 0, .5);
+      transition: opacity .3s;
+      cursor: pointer;
+      text-align: center;
+      line-height: 200px;
+      .el-icon-delete {
+        font-size: 36px;
+      }
+    }
+    &:hover {
+      .image-preview-action {
+        opacity: 1;
+      }
+    }
+  }
+  .image-app-preview {
+    width: 320px;
+    height: 180px;
+    position: relative;
+    border: 1px dashed #d9d9d9;
+    float: left;
+    margin-left: 50px;
+    .app-fake-conver {
+      height: 44px;
+      position: absolute;
+      width: 100%; // background: rgba(0, 0, 0, .1);
+      text-align: center;
+      line-height: 64px;
+      color: #fff;
+    }
+  }
 }
 </style>

src/components/UploadExcel/index.vue

@@ -1,7 +1,10 @@
 <template>
   <div>
-    <el-button :loading="loading" type="primary" @click="handleUpload">select excel file</el-button>
-    <input id="excel-upload-input" type="file" accept=".xlsx, .xls" class="c-hide" @change="handkeFileChange">
+    <input id="excel-upload-input" ref="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>
 
@@ -22,16 +25,37 @@ export default {
     generateDate({ header, results }) {
       this.excelData.header = header
       this.excelData.results = results
-      this.loading = false
       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) {
-      this.loading = true
       const files = e.target.files
       const itemFile = files[0] // only use files[0]
+      if (!itemFile) return
+      this.readerData(itemFile)
+      this.$refs['excel-upload-input'].value = null // fix can't select the same excel
+    },
+    readerData(itemFile) {
       const reader = new FileReader()
       reader.onload = e => {
         const data = e.target.result
@@ -75,4 +99,16 @@ export default {
   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>

src/directive/el-dragDialog/drag.js

@@ -0,0 +1,77 @@
+export default{
+  bind(el, binding, vnode) {
+    const dialogHeaderEl = el.querySelector('.el-dialog__header')
+    const dragDom = el.querySelector('.el-dialog')
+    dialogHeaderEl.style.cssText += ';cursor:move;'
+    dragDom.style.cssText += ';top:0px;'
+
+    // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
+    const getStyle = (function() {
+      if (window.document.currentStyle) {
+        return (dom, attr) => dom.currentStyle[attr]
+      } else {
+        return (dom, attr) => getComputedStyle(dom, false)[attr]
+      }
+    })()
+
+    dialogHeaderEl.onmousedown = (e) => {
+      // 鼠标按下，计算当前元素距离可视区的距离
+      const disX = e.clientX - dialogHeaderEl.offsetLeft
+      const disY = e.clientY - dialogHeaderEl.offsetTop
+
+      const dragDomWidth = dragDom.offsetWidth
+      const dragDomheight = dragDom.offsetHeight
+
+      const screenWidth = document.body.clientWidth
+      const screenHeight = document.body.clientHeight
+
+      const minDragDomLeft = dragDom.offsetLeft
+      const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth
+
+      const minDragDomTop = dragDom.offsetTop
+      const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight
+
+      // 获取到的值带px 正则匹配替换
+      let styL = getStyle(dragDom, 'left')
+      let styT = getStyle(dragDom, 'top')
+
+      if (styL.includes('%')) {
+        styL = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100)
+        styT = +document.body.clientHeight * (+styT.replace(/\%/g, '') / 100)
+      } else {
+        styL = +styL.replace(/\px/g, '')
+        styT = +styT.replace(/\px/g, '')
+      }
+
+      document.onmousemove = function(e) {
+        // 通过事件委托，计算移动的距离
+        let left = e.clientX - disX
+        let top = e.clientY - disY
+
+        // 边界处理
+        if (-(left) > minDragDomLeft) {
+          left = -minDragDomLeft
+        } else if (left > maxDragDomLeft) {
+          left = maxDragDomLeft
+        }
+
+        if (-(top) > minDragDomTop) {
+          top = -minDragDomTop
+        } else if (top > maxDragDomTop) {
+          top = maxDragDomTop
+        }
+
+        // 移动当前元素
+        dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`
+
+        // emit onDrag event
+        vnode.child.$emit('dragDialog')
+      }
+
+      document.onmouseup = function(e) {
+        document.onmousemove = null
+        document.onmouseup = null
+      }
+    }
+  }
+}

src/directive/el-dragDialog/index.js

@@ -0,0 +1,13 @@
+import drag from './drag'
+
+const install = function(Vue) {
+  Vue.directive('el-drag-dialog', drag)
+}
+
+if (window.Vue) {
+  window['el-drag-dialog'] = drag
+  Vue.use(install); // eslint-disable-line
+}
+
+drag.install = install
+export default drag

src/directive/permission/index.js

@@ -0,0 +1,13 @@
+import permission from './permission'
+
+const install = function(Vue) {
+  Vue.directive('permission', permission)
+}
+
+if (window.Vue) {
+  window['permission'] = permission
+  Vue.use(install); // eslint-disable-line
+}
+
+permission.install = install
+export default permission

src/directive/permission/permission.js

@@ -0,0 +1,23 @@
+
+import store from '@/store'
+
+export default{
+  inserted(el, binding, vnode) {
+    const { value } = binding
+    const roles = store.getters && store.getters.roles
+
+    if (value && value instanceof Array && value.length > 0) {
+      const permissionRoles = value
+
+      const hasPermission = roles.some(role => {
+        return permissionRoles.includes(role)
+      })
+
+      if (!hasPermission) {
+        el.parentNode && el.parentNode.removeChild(el)
+      }
+    } else {
+      throw new Error(`need roles! Like v-permission="['admin','editor']"`)
+    }
+  }
+}

src/errorLog.js

@@ -1,14 +1,21 @@
 import Vue from 'vue'
-import errLog from '@/store/errLog'
+import store from './store'
 
-// 生产环境错误日志
-if (process.env.NODE_ENV === 'production') {
-  Vue.config.errorHandler = function(err, vm) {
-    console.log(err, window.location.href)
-    errLog.pushLog({
+// 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,
-      url: window.location.href,
-      vm
+      vm,
+      info,
+      url: window.location.href
     })
-  }
+    console.error(err, info)
+  })
 }
+
+// }

src/filters/index.js

@@ -1,3 +1,6 @@
+// set function parseTime,formatTime to filter
+export { parseTime, formatTime } from '@/utils'
+
 function pluralize(time, label) {
   if (time === 1) {
     return time + label
@@ -16,67 +19,8 @@ export function timeAgo(time) {
   }
 }
 
-export function parseTime(time, cFormat) {
-  if (arguments.length === 0) {
-    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
-  } else {
-    date = new Date(parseInt(time))
-  }
-  const formatObj = {
-    y: date.getFullYear(),
-    m: date.getMonth() + 1,
-    d: date.getDate(),
-    h: date.getHours(),
-    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]
-    if (result.length > 0 && value < 10) {
-      value = '0' + value
-    }
-    return value || 0
-  })
-  return time_str
-}
-
-export function formatTime(time, option) {
-  time = +time * 1000
-  const d = new Date(time)
-  const now = Date.now()
-
-  const diff = (now - d) / 1000
-
-  if (diff < 30) {
-    return '刚刚'
-  } else if (diff < 3600) { // less 1 hour
-    return Math.ceil(diff / 60) + '分钟前'
-  } else if (diff < 3600 * 24) {
-    return Math.ceil(diff / 3600) + '小时前'
-  } else if (diff < 3600 * 24 * 2) {
-    return '1天前'
-  }
-  if (option) {
-    return parseTime(time, option)
-  } else {
-    return d.getMonth() + 1 + '月' + d.getDate() + '日' + d.getHours() + '时' + d.getMinutes() + '分'
-  }
-}
-
 /* 数字 格式化*/
-export function nFormatter(num, digits) {
+export function numberFormatter(num, digits) {
   const si = [
     { value: 1E18, symbol: 'E' },
     { value: 1E15, symbol: 'P' },
@@ -93,12 +37,6 @@ export function nFormatter(num, digits) {
   return num.toString()
 }
 
-export function html2Text(val) {
-  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, ','))
 }

src/icons/svg/documentation.svg

@@ -1 +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>
+<?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="1517304186474" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5672" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M554.666667 384h234.666666L554.666667 149.333333V384M256 85.333333h341.333333l256 256v512a85.333333 85.333333 0 0 1-85.333333 85.333334H256a85.333333 85.333333 0 0 1-85.333333-85.333334V170.666667c0-47.36 37.973333-85.333333 85.333333-85.333334m384 682.666667v-85.333333H256v85.333333h384m128-170.666667v-85.333333H256v85.333333h512z" fill="" p-id="5673"></path></svg>

src/icons/svg/edit.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="1525760397212" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2919" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M860 504c-19.9 0-36 16.1-36 36 0 1.4 0.1 2.7 0.2 4h-0.2v344H136V200h376c19.9 0 36-16.1 36-36s-16.1-36-36-36H136c-39.8 0-72 32.2-72 72v688c0 39.8 32.2 72 72 72h688c39.8 0 72-32.2 72-72V544h-0.2c0.1-1.3 0.2-2.6 0.2-4 0-19.9-16.1-36-36-36z" p-id="2920"></path><path d="M1002.7 100.3L923.4 21c-28.1-28.1-73.9-27.9-102 0.2L424.2 418.4c-2.9 2.9-5.2 6.4-6.8 10.2L317.6 664c-5.6 13.2-1.7 26.5 6.8 35.1 8.5 8.6 21.9 12.5 35.2 6.9l235.5-99.7c3.8-1.6 7.2-3.9 10.2-6.8l397.2-397.2c28.1-28.1 28.3-73.9 0.2-102zM559.8 543l-137.4 58.2 58.2-137.4L759.4 185l79.2 79.2L559.8 543z m391.7-391.7l-62 62-79.2-79.2 62-62 0.2-0.2 79.2 79.2-0.2 0.2z" p-id="2921"></path></svg>

src/icons/svg/guide.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="1526033837694" class="icon" style="" viewBox="0 0 1117 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10274" xmlns:xlink="http://www.w3.org/1999/xlink" width="218.1640625" height="200"><defs><style type="text/css"></style></defs><path d="M53.865 558.08l289.92 121.6 560-492.16-491.52 530.56 371.84 140.8c8.96 3.2 19.2-1.28 22.4-10.24V848l260.48-816.64-1014.4 494.72c-8.96 4.48-12.16 14.72-8.32 23.68 2.56 3.84 5.76 7.04 9.6 8.32z m357.76 434.56l144.64-155.52-144.64-58.88v214.4z" p-id="10275"></path></svg>

src/icons/svg/list.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="1525761666409" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10880" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M107.2 212.8m-67.2 0a4.2 4.2 0 1 0 134.4 0 4.2 4.2 0 1 0-134.4 0Z" p-id="10881"></path><path d="M980.8 145.6 297.6 145.6c-9.6 0-16 8-16 16l0 102.4c0 9.6 8 16 16 16l683.2 0c9.6 0 16-8 16-16l0-102.4C996.8 152 988.8 145.6 980.8 145.6z" p-id="10882"></path><path d="M96 497.6m-67.2 0a4.2 4.2 0 1 0 134.4 0 4.2 4.2 0 1 0-134.4 0Z" p-id="10883"></path><path d="M968 430.4 284.8 430.4c-9.6 0-16 8-16 16l0 102.4c0 9.6 8 16 16 16l683.2 0c9.6 0 16-8 16-16l0-102.4C984 438.4 977.6 430.4 968 430.4z" p-id="10884"></path><path d="M96 795.2m-67.2 0a4.2 4.2 0 1 0 134.4 0 4.2 4.2 0 1 0-134.4 0Z" p-id="10885"></path><path d="M968 728 284.8 728c-9.6 0-16 8-16 16l0 102.4c0 9.6 8 16 16 16l683.2 0c9.6 0 16-8 16-16l0-102.4C984 736 977.6 728 968 728z" p-id="10886"></path></svg>

src/icons/svg/theme.svg

@@ -1 +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="1503994829667" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9989" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M788.00002 159.831491C756.00002 128 746 128 724.3801 128L642 128C642 128 576 188.923077 512 188.923077 448 188.923077 384 128 384 128L299.204802 128C276.629934 128 266 140.923077 245.847214 159.831491L81.582979 323.871735C70.243732 335.19552 52 371.692308 81.582979 408.655004 81.582979 408.655004 224.023667 540.29784 238.000003 541.53846L238.000003 835.076924C238.000003 868.452352 286.579 896 320 896L706 896C739.419808 896 788.00002 868.452352 788.00002 835.076924L788.00002 541.53846C802.145492 540.385864 942.448564 408.654992 942.448564 408.654992 974.00002 372 965.851264 334.883878 942.448584 311.513109L788.00002 159.831491Z" p-id="9990"></path></svg>
+<?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="1517304322151" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6548" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M1004.094293 321.092267L762.737493 79.735467a68.266667 68.266667 0 0 0-96.546133 0l-30.293333 30.293333a68.283733 68.283733 0 0 1-48.264534 20.002133h-151.1936a68.181333 68.181333 0 0 1-48.264533-20.002133l-30.293333-30.293333a68.266667 68.266667 0 0 0-96.546134 0L19.962027 321.092267a68.266667 68.266667 0 0 0 0 96.546133l96.546133 96.546133a67.84 67.84 0 0 0 66.645333 17.271467c10.8032-3.072 21.674667 4.181333 21.674667 15.4112V896c0 37.546667 30.72 68.266667 68.266667 68.266667h477.866666c37.546667 0 68.266667-30.72 68.266667-68.266667V546.8672c0-11.229867 10.871467-18.4832 21.674667-15.4112a67.84 67.84 0 0 0 66.645333-17.271467l96.546133-96.546133a68.266667 68.266667 0 0 0 0-96.546133z" p-id="6549"></path></svg>

src/icons/svg/trendChart1.svg

@@ -1 +0,0 @@
-<?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="1503994155726" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8554" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M44.521739 0h44.521739v979.478261H44.521739zM267.130435 534.26087h44.521739v445.217391H267.130435zM489.73913 311.652174h44.52174v667.826087h-44.52174zM712.347826 712.347826h44.521739v267.130435h-44.521739zM934.956522 445.217391h44.521739v534.26087h-44.521739z" fill="" p-id="8555"></path></svg>

src/icons/svg/trendChart2.svg

@@ -1 +0,0 @@
-<?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="1503994177895" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8894" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M712.347826 0h44.521739v979.478261h-44.521739zM267.130435 534.26087h44.521739v445.217391H267.130435zM489.73913 311.652174h44.52174v667.826087h-44.52174zM44.521739 712.347826h44.521739v267.130435H44.521739zM934.956522 445.217391h44.521739v534.26087h-44.521739z" fill="" p-id="8895"></path></svg>

src/icons/svg/trendChart3.svg

@@ -1 +0,0 @@
-<?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="1503994166937" class="icon" style="" viewBox="0 0 1131 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8786" xmlns:xlink="http://www.w3.org/1999/xlink" width="70.6875" height="64"><defs><style type="text/css"></style></defs><path d="M0 0h53.894737v970.105263H0zM269.473684 431.157895h53.894737v538.947368H269.473684zM538.947368 161.684211h53.894737v808.421052h-53.894737zM808.421053 646.736842h53.894736v323.368421h-53.894736zM1077.894737 323.368421h53.894737v646.736842h-53.894737z" fill="" p-id="8787"></path></svg>

src/lang/en.js

@@ -3,7 +3,10 @@ export default {
     dashboard: 'Dashboard',
     introduction: 'Introduction',
     documentation: 'Documentation',
+    guide: 'Guide',
     permission: 'Permission',
+    pagePermission: 'Page Permission',
+    directivePermission: 'Directive Permission',
     icons: 'Icons',
     components: 'Components',
     componentIndex: 'Introduction',
@@ -18,9 +21,11 @@ export default {
     countTo: 'CountTo',
     componentMixin: 'Mixin',
     backToTop: 'BackToTop',
+    dragDialog: 'Drag Dialog',
+    dragKanban: 'Drag Kanban',
     charts: 'Charts',
     keyboardChart: 'Keyboard Chart',
-    lineChart: 'Line chart',
+    lineChart: 'Line Chart',
     mixChart: 'Mix Chart',
     example: 'Example',
     Table: 'Table',
@@ -28,10 +33,13 @@ export default {
     dragTable: 'Drag Table',
     inlineEditTable: 'Inline Edit',
     complexTable: 'Complex Table',
+    treeTable: 'Tree Table',
+    customTreeTable: 'Custom TreeTable',
     tab: 'Tab',
     form: 'Form',
-    createForm: 'Create Form',
-    editForm: 'Edit Form',
+    createArticle: 'Create Article',
+    editArticle: 'Edit Article',
+    articleList: 'Article List',
     errorPages: 'Error Pages',
     page401: '401',
     page404: '404',
@@ -40,9 +48,97 @@ export default {
     exportExcel: 'Export Excel',
     selectExcel: 'Export Selected',
     uploadExcel: 'Upload Excel',
-    exportZip: 'Zip',
+    zip: 'Zip',
+    exportZip: 'Export Zip',
     theme: 'Theme',
     clipboardDemo: 'Clipboard',
     i18n: 'I18n'
+  },
+  navbar: {
+    logOut: 'Log Out',
+    dashboard: 'Dashboard',
+    github: 'Github',
+    screenfull: 'screenfull',
+    theme: 'theme'
+  },
+  login: {
+    title: 'Login Form',
+    logIn: 'Log in',
+    username: 'Username',
+    password: 'Password',
+    any: 'any',
+    thirdparty: 'Or connect with',
+    thirdpartyTips: 'Can not be simulated on local, so please combine you own business simulation! ! !'
+  },
+  documentation: {
+    documentation: 'Documentation',
+    github: 'Github Repository'
+  },
+  permission: {
+    roles: 'Your roles',
+    switchRoles: 'Switch roles'
+  },
+  guide: {
+    description: 'The guide page is useful for some people who entered the project for the first time. You can briefly introduce the features of the project. Demo is based on ',
+    button: 'Show Guide'
+  },
+  components: {
+    documentation: 'Documentation',
+    tinymceTips: 'Rich text editor is a core part of management system, but at the same time is a place with lots of problems. In the process of selecting rich texts, I also walked a lot of detours. The common rich text editors in the market are basically used, and the finally chose Tinymce. See documentation for more detailed rich text editor comparisons and introductions.',
+    dropzoneTips: 'Because my business has special needs, and has to upload images to qiniu, so instead of a third party, I chose encapsulate it by myself. It is very simple, you can see the detail code in @/components/Dropzone.',
+    stickyTips: 'when the page is scrolled to the preset position will be sticky on the top.',
+    backToTopTips1: 'When the page is scrolled to the specified position, the Back to Top button appears in the lower right corner',
+    backToTopTips2: 'You can customize the style of the button, show / hide, height of appearance, height of the return. If you need a text prompt, you can use element-ui el-tooltip elements externally',
+    imageUploadTips: 'Since I was using only the vue@1 version, and it is not compatible with mockjs at the moment, I modified it myself, and if you are going to use it, it is better to use official version.'
+  },
+  table: {
+    dynamicTips1: 'Fixed header, sorted by header order',
+    dynamicTips2: 'Not fixed header, sorted by click order',
+    dragTips1: 'The default order',
+    dragTips2: 'The after dragging order',
+    title: 'Title',
+    importance: 'Imp',
+    type: 'Type',
+    remark: 'Remark',
+    search: 'Search',
+    add: 'Add',
+    export: 'Export',
+    reviewer: 'reviewer',
+    id: 'ID',
+    date: 'Date',
+    author: 'Author',
+    readings: 'Readings',
+    status: 'Status',
+    actions: 'Actions',
+    edit: 'Edit',
+    publish: 'Publish',
+    draft: 'Draft',
+    delete: 'Delete',
+    cancel: 'Cancel',
+    confirm: 'Confirm'
+  },
+  errorLog: {
+    tips: 'Please click the bug icon in the upper right corner',
+    description: 'Now the management system are basically the form of the spa, it enhances the user experience, but it also increases the possibility of page problems, a small negligence may lead to the entire page deadlock. Fortunately Vue provides a way to catch handling exceptions, where you can handle errors or report exceptions.',
+    documentation: 'Document introduction'
+  },
+  excel: {
+    export: 'Export',
+    selectedExport: 'Export selected items',
+    placeholder: 'Please enter the file name(default excel-list)'
+  },
+  zip: {
+    export: 'Export',
+    placeholder: 'Please enter the file name(default file)'
+  },
+  theme: {
+    change: 'Theme change',
+    documentation: 'Theme documentation',
+    tips: 'Tips: It is different from the theme-pick on the navbar is two different skinning methods, each with different application scenarios. Refer to the documentation for details.'
+  },
+  tagsView: {
+    close: 'Close',
+    closeOthers: 'Close Others',
+    closeAll: 'Close All'
   }
 }

src/lang/index.js

@@ -20,7 +20,7 @@ const messages = {
 }
 
 const i18n = new VueI18n({
-  locale: Cookies.get('language') || 'zh', // set locale
+  locale: Cookies.get('language') || 'en', // set locale
   messages // set locale messages
 })
 

src/lang/zh.js

@@ -3,7 +3,10 @@ export default {
     dashboard: '首页',
     introduction: '简述',
     documentation: '文档',
+    guide: '引导页',
     permission: '权限测试页',
+    pagePermission: '页面权限',
+    directivePermission: '指令权限',
     icons: '图标',
     components: '组件',
     componentIndex: '介绍',
@@ -18,31 +21,124 @@ export default {
     countTo: 'CountTo',
     componentMixin: '小组件',
     backToTop: '返回顶部',
+    dragDialog: '拖拽 Dialog',
+    dragKanban: '可拖拽看板',
     charts: '图表',
     keyboardChart: '键盘图表',
     lineChart: '折线图',
     mixChart: '混合图表',
     example: '综合实例',
     Table: 'Table',
-    dynamicTable: '动态table',
-    dragTable: '拖拽table',
-    inlineEditTable: 'table内编辑',
-    complexTable: '综合table',
+    dynamicTable: '动态Table',
+    dragTable: '拖拽Table',
+    inlineEditTable: 'Table内编辑',
+    complexTable: '综合Table',
+    treeTable: '树形表格',
+    customTreeTable: '自定义树表',
     tab: 'Tab',
     form: '表单',
-    createForm: '创建表单',
-    editForm: '编辑表单',
+    createArticle: '创建文章',
+    editArticle: '编辑文章',
+    articleList: '文章列表',
     errorPages: '错误页面',
     page401: '401',
     page404: '404',
     errorLog: '错误日志',
-    excel: 'excel',
-    exportExcel: 'export excel',
-    selectExcel: 'export selected',
-    uploadExcel: 'upload excel',
-    exportZip: 'zip',
+    excel: 'Excel',
+    exportExcel: 'Export Excel',
+    selectExcel: 'Export Selected',
+    uploadExcel: 'Upload Excel',
+    zip: 'Zip',
+    exportZip: 'Export Zip',
     theme: '换肤',
-    clipboardDemo: 'clipboard',
+    clipboardDemo: 'Clipboard',
     i18n: '国际化'
+  },
+  navbar: {
+    logOut: '退出登录',
+    dashboard: '首页',
+    github: '项目地址',
+    screenfull: '全屏',
+    theme: '换肤'
+  },
+  login: {
+    title: '系统登录',
+    logIn: '登录',
+    username: '账号',
+    password: '密码',
+    any: '随便填',
+    thirdparty: '第三方登录',
+    thirdpartyTips: '本地不能模拟，请结合自己业务进行模拟！！！'
+  },
+  documentation: {
+    documentation: '文档',
+    github: 'Github 地址'
+  },
+  permission: {
+    roles: '你的权限',
+    switchRoles: '切换权限'
+  },
+  guide: {
+    description: '引导页对于一些第一次进入项目的人很有用，你可以简单介绍下项目的功能。本 Demo 是基于',
+    button: '打开引导'
+  },
+  components: {
+    documentation: '文档',
+    tinymceTips: '富文本是管理后台一个核心的功能，但同时又是一个有很多坑的地方。在选择富文本的过程中我也走了不少的弯路，市面上常见的富文本都基本用过了，最终权衡了一下选择了Tinymce。更详细的富文本比较和介绍见',
+    dropzoneTips: '由于我司业务有特殊需求，而且要传七牛 所以没用第三方，选择了自己封装。代码非常的简单，具体代码你可以在这里看到 @/components/Dropzone',
+    stickyTips: '当页面滚动到预设的位置会吸附在顶部',
+    backToTopTips1: '页面滚动到指定位置会在右下角出现返回顶部按钮',
+    backToTopTips2: '可自定义按钮的样式、show/hide、出现的高度、返回的位置 如需文字提示，可在外部使用Element的el-tooltip元素',
+    imageUploadTips: '由于我在使用时它只有vue@1版本，而且和mockjs不兼容，所以自己改造了一下，如果大家要使用的话，优先还是使用官方版本。'
+  },
+  table: {
+    dynamicTips1: '固定表头, 按照表头顺序排序',
+    dynamicTips2: '不固定表头, 按照点击顺序排序',
+    dragTips1: '默认顺序',
+    dragTips2: '拖拽后顺序',
+    title: '标题',
+    importance: '重要性',
+    type: '类型',
+    remark: '点评',
+    search: '搜索',
+    add: '添加',
+    export: '导出',
+    reviewer: '审核人',
+    id: '序号',
+    date: '时间',
+    author: '作者',
+    readings: '阅读数',
+    status: '状态',
+    actions: '操作',
+    edit: '编辑',
+    publish: '发布',
+    draft: '草稿',
+    delete: '删除',
+    cancel: '取 消',
+    confirm: '确 定'
+  },
+  errorLog: {
+    tips: '请点击右上角bug小图标',
+    description: '现在的管理后台基本都是spa的形式了，它增强了用户体验，但同时也会增加页面出问题的可能性，可能一个小小的疏忽就导致整个页面的死锁。好在 Vue 官网提供了一个方法来捕获处理异常，你可以在其中进行错误处理或者异常上报。',
+    documentation: '文档介绍'
+  },
+  excel: {
+    export: '导出',
+    selectedExport: '导出已选择项',
+    placeholder: '请输入文件名(默认excel-list)'
+  },
+  zip: {
+    export: '导出',
+    placeholder: '请输入文件名(默认file)'
+  },
+  theme: {
+    change: '换肤',
+    documentation: '换肤文档',
+    tips: 'Tips: 它区别于 navbar 上的 theme-pick, 是两种不同的换肤方法，各自有不同的应用场景，具体请参考文档。'
+  },
+  tagsView: {
+    close: '关闭',
+    closeOthers: '关闭其它',
+    closeAll: '关闭所有'
   }
 }

src/main.js

@@ -1,17 +1,26 @@
 import Vue from 'vue'
+
+import 'normalize.css/normalize.css'// A modern alternative to CSS resets
+
 import Element from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
-import i18n from './lang' // 国际化
+
+import '@/styles/index.scss' // global css
+
 import App from './App'
 import router from './router'
 import store from './store'
-import * as filters from './filters' // 全局filter
+
+import i18n from './lang' // Internationalization
 import './icons' // icon
 import './errorLog'// error log
-import './permission' // 权限
-import './mock' // 该项目所有请求使用mockjs模拟
+import './permission' // permission control
+import './mock' // simulation data
+
+import * as filters from './filters' // global filters
 
 Vue.use(Element, {
+  size: 'medium', // set element-ui default size
   i18n: (key, value) => i18n.t(key, value)
 })
 

src/mock/article.js

@@ -4,19 +4,27 @@ import { param2Obj } from '@/utils'
 const List = []
 const count = 100
 
+const baseContent = '<p>我是测试数据我是测试数据</p><p><img src="https://wpimg.wallstcn.com/4c69009c-0fd4-4153-b112-6cb53d1cf943"></p>'
+const image_uri = 'https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3'
+
 for (let i = 0; i < count; i++) {
   List.push(Mock.mock({
     id: '@increment',
     timestamp: +Mock.Random.date('T'),
-    author: '@cname',
-    auditor: '@cname',
-    title: '@ctitle(10, 20)',
+    author: '@first',
+    reviewer: '@first',
+    title: '@title(5, 10)',
+    content_short: '我是测试数据',
+    content: baseContent,
     forecast: '@float(0, 100, 2, 2)',
     importance: '@integer(1, 3)',
     'type|1': ['CN', 'US', 'JP', 'EU'],
     'status|1': ['published', 'draft', 'deleted'],
     display_time: '@datetime',
-    pageviews: '@integer(300, 5000)'
+    comment_disabled: true,
+    pageviews: '@integer(300, 5000)',
+    image_uri,
+    platforms: ['a-platform']
   }))
 }
 
@@ -43,24 +51,16 @@ export default {
     }
   },
   getPv: () => ({
-    pvData: [{ key: 'PC网站', pv: 1024 }, { key: 'mobile网站', pv: 1024 }, { key: 'ios', pv: 1024 }, { key: 'android', pv: 1024 }]
-  }),
-  getArticle: () => ({
-    id: 120000000001,
-    author: { key: 'mockPan' },
-    source_name: '原创作者',
-    category_item: [{ key: 'global', name: '全球' }],
-    comment_disabled: true,
-    content: '<p>我是测试数据我是测试数据</p><p><img class="wscnph" src="https://wpimg.wallstcn.com/4c69009c-0fd4-4153-b112-6cb53d1cf943" data-wscntype="image" data-wscnh="300" data-wscnw="400" data-mce-src="https://wpimg.wallstcn.com/4c69009c-0fd4-4153-b112-6cb53d1cf943"></p>"',
-    content_short: '我是测试数据',
-    display_time: +new Date(),
-    image_uri: 'https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3',
-    platforms: ['a-platform'],
-    source_uri: 'https://github.com/PanJiaChen/vue-element-admin',
-    status: 'published',
-    tags: [],
-    title: 'vue-element-admin'
+    pvData: [{ key: 'PC', pv: 1024 }, { key: 'mobile', pv: 1024 }, { key: 'ios', pv: 1024 }, { key: 'android', pv: 1024 }]
   }),
+  getArticle: (config) => {
+    const { id } = param2Obj(config.url)
+    for (const article of List) {
+      if (article.id === +id) {
+        return article
+      }
+    }
+  },
   createArticle: () => ({
     data: 'success'
   }),

src/mock/login.js

@@ -2,14 +2,14 @@ import { param2Obj } from '@/utils'
 
 const userMap = {
   admin: {
-    role: ['admin'],
+    roles: ['admin'],
     token: 'admin',
     introduction: '我是超级管理员',
     avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
     name: 'Super Admin'
   },
   editor: {
-    role: ['editor'],
+    roles: ['editor'],
     token: 'editor',
     introduction: '我是编辑',
     avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',

src/permission.js

@@ -1,60 +1,63 @@
 import router from './router'
 import store from './store'
-import NProgress from 'nprogress' // Progress 进度条
-import 'nprogress/nprogress.css'// Progress 进度条样式
-import { getToken } from '@/utils/auth' // 验权
 import { Message } from 'element-ui'
+import NProgress from 'nprogress' // progress bar
+import 'nprogress/nprogress.css'// progress bar style
+import { getToken } from '@/utils/auth' // getToken from cookie
 
-// permissiom judge
+NProgress.configure({ showSpinner: false })// NProgress Configuration
+
+// permissiom judge function
 function hasPermission(roles, permissionRoles) {
-  if (roles.indexOf('admin') >= 0) return true // admin权限 直接通过
+  if (roles.indexOf('admin') >= 0) return true // admin permission passed directly
   if (!permissionRoles) return true
   return roles.some(role => permissionRoles.indexOf(role) >= 0)
 }
 
-const whiteList = ['/login', '/authredirect']// 不重定向白名单
+const whiteList = ['/login', '/authredirect']// no redirect whitelist
 
 router.beforeEach((to, from, next) => {
-  NProgress.start() // 开启Progress
-  if (getToken()) { // 判断是否有token
+  NProgress.start() // start progress bar
+  if (getToken()) { // determine if there has token
+    /* has token*/
     if (to.path === '/login') {
       next({ path: '/' })
-      NProgress.done() // router在hash模式下 手动改变hash 重定向回来 不会触发afterEach 暂时hack方案 ps：history模式下无问题，可删除该行！
+      NProgress.done() // if current page is dashboard will not trigger	afterEach hook, so manually handle it
     } else {
       if (store.getters.roles.length === 0) { // 判断当前用户是否已拉取完user_info信息
         store.dispatch('GetUserInfo').then(res => { // 拉取user_info
-          const roles = res.data.role
-          store.dispatch('GenerateRoutes', { roles }).then(() => { // 生成可访问的路由表
+          const roles = res.data.roles // note: roles must be a array! such as: ['editor','develop']
+          store.dispatch('GenerateRoutes', { roles }).then(() => { // 根据roles权限生成可访问的路由表
             router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
-            next({ ...to }) // hack方法 确保addRoutes已完成
+            next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
           })
-        }).catch(() => {
+        }).catch((err) => {
           store.dispatch('FedLogOut').then(() => {
-            Message.error('验证失败,请重新登录')
-            next({ path: '/login' })
+            Message.error(err || 'Verification failed, please login again')
+            next({ path: '/' })
           })
         })
       } else {
         // 没有动态改变权限的需求可直接next() 删除下方权限判断 ↓
-        if (hasPermission(store.getters.roles, to.meta.role)) {
+        if (hasPermission(store.getters.roles, to.meta.roles)) {
           next()//
         } else {
-          next({ path: '/401', query: { noGoBack: true }})
-          NProgress.done() // router在hash模式下 手动改变hash 重定向回来 不会触发afterEach 暂时hack方案 ps：history模式下无问题，可删除该行！
+          next({ path: '/401', replace: true, query: { noGoBack: true }})
         }
         // 可删 ↑
       }
     }
   } else {
+    /* has no token*/
     if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单，直接进入
       next()
     } else {
       next('/login') // 否则全部重定向到登录页
-      NProgress.done() // router在hash模式下 手动改变hash 重定向回来 不会触发afterEach 暂时hack方案 ps：history模式下无问题，可删除该行！
+      NProgress.done() // if current page is login will not trigger afterEach hook, so manually handle it
     }
   }
 })
 
 router.afterEach(() => {
-  NProgress.done() // 结束Progress
+  NProgress.done() // finish progress bar
 })

src/router/index.js

@@ -1,37 +1,41 @@
 import Vue from 'vue'
 import Router from 'vue-router'
-const _import = require('./_import_' + process.env.NODE_ENV)
-// in development-env not use lazy-loading, because lazy-loading too many pages will cause webpack hot update too slow. so only in production use lazy-loading;
-// detail: https://panjiachen.github.io/vue-element-admin-site/#/lazy-loading
 
 Vue.use(Router)
 
 /* Layout */
-import Layout from '../views/layout/Layout'
+import Layout from '@/views/layout/Layout'
+
+/** note: submenu only apppear when children.length>=1
+*   detail see  https://panjiachen.github.io/vue-element-admin-site/#/router-and-nav?id=sidebar
+**/
 
 /**
 * hidden: true                   if `hidden:true` will not show in the sidebar(default is false)
+* alwaysShow: true               if set true, will always show the root menu, whatever its child routes length
+*                                if not set alwaysShow, only more than one route under the children
+*                                it will becomes nested mode, otherwise not show the root menu
 * redirect: noredirect           if `redirect:noredirect` will no redirct in the breadcrumb
 * name:'router-name'             the name is used by <keep-alive> (must set!!!)
 * meta : {
-    role: ['admin','editor']     will control the page role (you can set multiple roles)
+    roles: ['admin','editor']     will control the page roles (you can set multiple roles)
     title: 'title'               the name show in submenu and breadcrumb (recommend set)
     icon: 'svg-name'             the icon show in the sidebar,
-    noCache: true                if fasle ,the page will no be cached(default is false)
+    noCache: true                if true ,the page will no be cached(default is false)
   }
 **/
 export const constantRouterMap = [
-  { path: '/login', component: _import('login/index'), hidden: true },
-  { path: '/authredirect', component: _import('login/authredirect'), hidden: true },
-  { path: '/404', component: _import('errorPage/404'), hidden: true },
-  { path: '/401', component: _import('errorPage/401'), hidden: true },
+  { path: '/login', component: () => import('@/views/login/index'), hidden: true },
+  { path: '/authredirect', component: () => import('@/views/login/authredirect'), hidden: true },
+  { path: '/404', component: () => import('@/views/errorPage/404'), hidden: true },
+  { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true },
   {
     path: '',
     component: Layout,
     redirect: 'dashboard',
     children: [{
       path: 'dashboard',
-      component: _import('dashboard/index'),
+      component: () => import('@/views/dashboard/index'),
       name: 'dashboard',
       meta: { title: 'dashboard', icon: 'dashboard', noCache: true }
     }]
@@ -42,15 +46,26 @@ export const constantRouterMap = [
     redirect: '/documentation/index',
     children: [{
       path: 'index',
-      component: _import('documentation/index'),
+      component: () => import('@/views/documentation/index'),
       name: 'documentation',
       meta: { title: 'documentation', icon: 'documentation', noCache: true }
     }]
+  },
+  {
+    path: '/guide',
+    component: Layout,
+    redirect: '/guide/index',
+    children: [{
+      path: 'index',
+      component: () => import('@/views/guide/index'),
+      name: 'guide',
+      meta: { title: 'guide', icon: 'guide', noCache: true }
+    }]
   }
 ]
 
 export default new Router({
-  // mode: 'history', //后端支持可开
+  // mode: 'history', // require service support
   scrollBehavior: () => ({ y: 0 }),
   routes: constantRouterMap
 })
@@ -60,15 +75,27 @@ export const asyncRouterMap = [
     path: '/permission',
     component: Layout,
     redirect: '/permission/index',
-    meta: { role: ['admin'] },
+    alwaysShow: true, // will always show the root menu
+    meta: {
+      title: 'permission',
+      icon: 'lock',
+      roles: ['admin', 'editor'] // you can set roles in root nav
+    },
     children: [{
-      path: 'index',
-      component: _import('permission/index'),
-      name: 'permission',
+      path: 'page',
+      component: () => import('@/views/permission/page'),
+      name: 'pagePermission',
       meta: {
-        title: 'permission',
-        icon: 'lock',
-        role: ['admin']
+        title: 'pagePermission',
+        roles: ['admin'] // or you can only set roles in sub nav
+      }
+    }, {
+      path: 'directive',
+      component: () => import('@/views/permission/directive'),
+      name: 'directivePermission',
+      meta: {
+        title: 'directivePermission'
+        // if do not set roles, means: this page does not require permission
       }
     }]
   },
@@ -78,7 +105,7 @@ export const asyncRouterMap = [
     component: Layout,
     children: [{
       path: 'index',
-      component: _import('svg-icons/index'),
+      component: () => import('@/views/svg-icons/index'),
       name: 'icons',
       meta: { title: 'icons', icon: 'icon', noCache: true }
     }]
@@ -94,17 +121,19 @@ export const asyncRouterMap = [
       icon: 'component'
     },
     children: [
-      { path: 'tinymce', component: _import('components-demo/tinymce'), name: 'tinymce-demo', meta: { title: 'tinymce' }},
-      { path: 'markdown', component: _import('components-demo/markdown'), name: 'markdown-demo', meta: { title: 'markdown' }},
-      { path: 'json-editor', component: _import('components-demo/jsonEditor'), name: 'jsonEditor-demo', meta: { title: 'jsonEditor' }},
-      { path: 'dnd-list', component: _import('components-demo/dndList'), name: 'dndList-demo', meta: { title: 'dndList' }},
-      { path: 'splitpane', component: _import('components-demo/splitpane'), name: 'splitpane-demo', meta: { title: 'splitPane' }},
-      { path: 'avatar-upload', component: _import('components-demo/avatarUpload'), name: 'avatarUpload-demo', meta: { title: 'avatarUpload' }},
-      { path: 'dropzone', component: _import('components-demo/dropzone'), name: 'dropzone-demo', meta: { title: 'dropzone' }},
-      { path: 'sticky', component: _import('components-demo/sticky'), name: 'sticky-demo', meta: { title: 'sticky' }},
-      { path: 'count-to', component: _import('components-demo/countTo'), name: 'countTo-demo', meta: { title: 'countTo' }},
-      { path: 'mixin', component: _import('components-demo/mixin'), name: 'componentMixin-demo', meta: { title: 'componentMixin' }},
-      { path: 'back-to-top', component: _import('components-demo/backToTop'), name: 'backToTop-demo', meta: { title: 'backToTop' }}
+      { path: 'tinymce', component: () => import('@/views/components-demo/tinymce'), name: 'tinymce-demo', meta: { title: 'tinymce' }},
+      { path: 'markdown', component: () => import('@/views/components-demo/markdown'), name: 'markdown-demo', meta: { title: 'markdown' }},
+      { path: 'json-editor', component: () => import('@/views/components-demo/jsonEditor'), name: 'jsonEditor-demo', meta: { title: 'jsonEditor' }},
+      { path: 'splitpane', component: () => import('@/views/components-demo/splitpane'), name: 'splitpane-demo', meta: { title: 'splitPane' }},
+      { path: 'avatar-upload', component: () => import('@/views/components-demo/avatarUpload'), name: 'avatarUpload-demo', meta: { title: 'avatarUpload' }},
+      { path: 'dropzone', component: () => import('@/views/components-demo/dropzone'), name: 'dropzone-demo', meta: { title: 'dropzone' }},
+      { path: 'sticky', component: () => import('@/views/components-demo/sticky'), name: 'sticky-demo', meta: { title: 'sticky' }},
+      { path: 'count-to', component: () => import('@/views/components-demo/countTo'), name: 'countTo-demo', meta: { title: 'countTo' }},
+      { path: 'mixin', component: () => import('@/views/components-demo/mixin'), name: 'componentMixin-demo', meta: { title: 'componentMixin' }},
+      { path: 'back-to-top', component: () => import('@/views/components-demo/backToTop'), name: 'backToTop-demo', meta: { title: 'backToTop' }},
+      { path: 'drag-dialog', component: () => import('@/views/components-demo/dragDialog'), name: 'dragDialog-demo', meta: { title: 'dragDialog' }},
+      { path: 'dnd-list', component: () => import('@/views/components-demo/dndList'), name: 'dndList-demo', meta: { title: 'dndList' }},
+      { path: 'drag-kanban', component: () => import('@/views/components-demo/dragKanban'), name: 'dragKanban-demo', meta: { title: 'dragKanban' }}
     ]
   },
 
@@ -118,54 +147,55 @@ export const asyncRouterMap = [
       icon: 'chart'
     },
     children: [
-      { path: 'keyboard', component: _import('charts/keyboard'), name: 'keyboardChart', meta: { title: 'keyboardChart', noCache: true }},
-      { path: 'line', component: _import('charts/line'), name: 'lineChart', meta: { title: 'lineChart', noCache: true }},
-      { path: 'mixchart', component: _import('charts/mixChart'), name: 'mixChart', meta: { title: 'mixChart', noCache: true }}
+      { path: 'keyboard', component: () => import('@/views/charts/keyboard'), name: 'keyboardChart', meta: { title: 'keyboardChart', noCache: true }},
+      { path: 'line', component: () => import('@/views/charts/line'), name: 'lineChart', meta: { title: 'lineChart', noCache: true }},
+      { path: 'mixchart', component: () => import('@/views/charts/mixChart'), name: 'mixChart', meta: { title: 'mixChart', noCache: true }}
+    ]
+  },
+
+  {
+    path: '/tab',
+    component: Layout,
+    children: [{
+      path: 'index',
+      component: () => import('@/views/tab/index'),
+      name: 'tab',
+      meta: { title: 'tab', icon: 'tab' }
+    }]
+  },
+
+  {
+    path: '/table',
+    component: Layout,
+    redirect: '/table/complex-table',
+    name: 'table',
+    meta: {
+      title: 'Table',
+      icon: 'table'
+    },
+    children: [
+      { path: 'dynamic-table', component: () => import('@/views/table/dynamicTable/index'), name: 'dynamicTable', meta: { title: 'dynamicTable' }},
+      { path: 'drag-table', component: () => import('@/views/table/dragTable'), name: 'dragTable', meta: { title: 'dragTable' }},
+      { path: 'inline-edit-table', component: () => import('@/views/table/inlineEditTable'), name: 'inlineEditTable', meta: { title: 'inlineEditTable' }},
+      { path: 'tree-table', component: () => import('@/views/table/treeTable/treeTable'), name: 'treeTableDemo', meta: { title: 'treeTable' }},
+      { path: 'custom-tree-table', component: () => import('@/views/table/treeTable/customTreeTable'), name: 'customTreeTableDemo', meta: { title: 'customTreeTable' }},
+      { path: 'complex-table', component: () => import('@/views/table/complexTable'), name: 'complexTable', meta: { title: 'complexTable' }}
     ]
   },
 
   {
     path: '/example',
     component: Layout,
-    redirect: '/example/table/complex-table',
+    redirect: '/example/list',
     name: 'example',
     meta: {
       title: 'example',
       icon: 'example'
     },
     children: [
-      {
-        path: '/example/table',
-        component: _import('example/table/index'),
-        redirect: '/example/table/complex-table',
-        name: 'Table',
-        meta: {
-          title: 'Table',
-          icon: 'table'
-        },
-        children: [
-          { path: 'dynamic-table', component: _import('example/table/dynamicTable/index'), name: 'dynamicTable', meta: { title: 'dynamicTable' }},
-          { path: 'drag-table', component: _import('example/table/dragTable'), name: 'dragTable', meta: { title: 'dragTable' }},
-          { path: 'inline-edit-table', component: _import('example/table/inlineEditTable'), name: 'inlineEditTable', meta: { title: 'inlineEditTable' }},
-          { path: 'complex-table', component: _import('example/table/complexTable'), name: 'complexTable', meta: { title: 'complexTable' }}
-        ]
-      },
-      { path: 'tab/index', icon: 'tab', component: _import('example/tab/index'), name: 'tab', meta: { title: 'tab' }}
-    ]
-  },
-
-  {
-    path: '/form',
-    component: Layout,
-    redirect: 'noredirect',
-    name: 'form',
-    meta: {
-      title: 'form',
-      icon: 'form'
-    },
-    children: [
-      { path: 'create-form', component: _import('form/create'), name: 'createForm', meta: { title: 'createForm', icon: 'table' }},
-      { path: 'edit-form', component: _import('form/edit'), name: 'editForm', meta: { title: 'editForm', icon: 'table' }}
+      { path: 'create', component: () => import('@/views/example/create'), name: 'createArticle', meta: { title: 'createArticle', icon: 'edit' }},
+      { path: 'edit/:id(\\d+)', component: () => import('@/views/example/edit'), name: 'editArticle', meta: { title: 'editArticle', noCache: true }, hidden: true },
+      { path: 'list', component: () => import('@/views/example/list'), name: 'articleList', meta: { title: 'articleList', icon: 'list' }}
     ]
   },
 
@@ -179,8 +209,8 @@ export const asyncRouterMap = [
       icon: '404'
     },
     children: [
-      { path: '401', component: _import('errorPage/401'), name: 'page401', meta: { title: 'page401', noCache: true }},
-      { path: '404', component: _import('errorPage/404'), name: 'page404', meta: { title: 'page404', noCache: true }}
+      { path: '401', component: () => import('@/views/errorPage/401'), name: 'page401', meta: { title: 'page401', noCache: true }},
+      { path: '404', component: () => import('@/views/errorPage/404'), name: 'page404', meta: { title: 'page404', noCache: true }}
     ]
   },
 
@@ -188,7 +218,7 @@ export const asyncRouterMap = [
     path: '/error-log',
     component: Layout,
     redirect: 'noredirect',
-    children: [{ path: 'log', component: _import('errorLog/index'), name: 'errorLog', meta: { title: 'errorLog', icon: 'bug' }}]
+    children: [{ path: 'log', component: () => import('@/views/errorLog/index'), name: 'errorLog', meta: { title: 'errorLog', icon: 'bug' }}]
   },
 
   {
@@ -201,9 +231,9 @@ export const asyncRouterMap = [
       icon: 'excel'
     },
     children: [
-      { path: 'export-excel', component: _import('excel/exportExcel'), name: 'exportExcel', meta: { title: 'exportExcel' }},
-      { path: 'export-selected-excel', component: _import('excel/selectExcel'), name: 'selectExcel', meta: { title: 'selectExcel' }},
-      { path: 'upload-excel', component: _import('excel/uploadExcel'), name: 'uploadExcel', meta: { title: 'uploadExcel' }}
+      { path: 'export-excel', component: () => import('@/views/excel/exportExcel'), name: 'exportExcel', meta: { title: 'exportExcel' }},
+      { path: 'export-selected-excel', component: () => import('@/views/excel/selectExcel'), name: 'selectExcel', meta: { title: 'selectExcel' }},
+      { path: 'upload-excel', component: () => import('@/views/excel/uploadExcel'), name: 'uploadExcel', meta: { title: 'uploadExcel' }}
     ]
   },
 
@@ -211,27 +241,29 @@ export const asyncRouterMap = [
     path: '/zip',
     component: Layout,
     redirect: '/zip/download',
-    children: [{ path: 'download', component: _import('zip/index'), name: 'exportZip', meta: { title: 'exportZip', icon: 'zip' }}]
+    alwaysShow: true,
+    meta: { title: 'zip', icon: 'zip' },
+    children: [{ path: 'download', component: () => import('@/views/zip/index'), name: 'exportZip', meta: { title: 'exportZip' }}]
   },
 
   {
     path: '/theme',
     component: Layout,
     redirect: 'noredirect',
-    children: [{ path: 'index', component: _import('theme/index'), name: 'theme', meta: { title: 'theme', icon: 'theme' }}]
+    children: [{ path: 'index', component: () => import('@/views/theme/index'), name: 'theme', meta: { title: 'theme', icon: 'theme' }}]
   },
 
   {
     path: '/clipboard',
     component: Layout,
     redirect: 'noredirect',
-    children: [{ path: 'index', component: _import('clipboard/index'), name: 'clipboardDemo', meta: { title: 'clipboardDemo', icon: 'clipboard' }}]
+    children: [{ path: 'index', component: () => import('@/views/clipboard/index'), name: 'clipboardDemo', meta: { title: 'clipboardDemo', icon: 'clipboard' }}]
   },
 
   {
     path: '/i18n',
     component: Layout,
-    children: [{ path: 'index', component: _import('i18n-demo/index'), name: 'i18n', meta: { title: 'i18n', icon: 'international' }}]
+    children: [{ path: 'index', component: () => import('@/views/i18n-demo/index'), name: 'i18n', meta: { title: 'i18n', icon: 'international' }}]
   },
 
   { path: '*', redirect: '/404', hidden: true }

src/store/errLog.js

@@ -1,13 +0,0 @@
-const errLog = {
-  state: {
-    errLog: []
-  },
-  pushLog(log) {
-    this.state.errLog.unshift(log)
-  },
-  clearLog() {
-    this.state.errLog = []
-  }
-}
-
-export default errLog

src/store/getters.js

@@ -1,8 +1,9 @@
 const getters = {
   sidebar: state => state.app.sidebar,
   language: state => state.app.language,
-  visitedViews: state => state.app.visitedViews,
-  cachedViews: state => state.app.cachedViews,
+  device: state => state.app.device,
+  visitedViews: state => state.tagsView.visitedViews,
+  cachedViews: state => state.tagsView.cachedViews,
   token: state => state.user.token,
   avatar: state => state.user.avatar,
   name: state => state.user.name,
@@ -11,6 +12,7 @@ const getters = {
   roles: state => state.user.roles,
   setting: state => state.user.setting,
   permission_routers: state => state.permission.routers,
-  addRouters: state => state.permission.addRouters
+  addRouters: state => state.permission.addRouters,
+  errorLogs: state => state.errorLog.logs
 }
 export default getters