[release] 3.4.1

* bump deps: update vue-splitpane version

* refactor[chore]: use webpack-dev-serve build

* perf:settings

* doc: uodate readme

.babelrc

@@ -1,5 +1,12 @@
 {
-  "presets": ["es2015", "stage-2"],
-  "plugins": ["transform-runtime"],
-  "comments": false
+  "presets": [
+    ["env", {
+      "modules": false,
+      "targets": {
+        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
+      }
+    }],
+    "stage-2"
+  ],
+  "plugins": ["transform-vue-jsx", "transform-runtime"]
 }

.editorconfig

@@ -0,0 +1,14 @@
+# http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+insert_final_newline = false
+trim_trailing_whitespace = false

.eslintrc.js

@@ -1,318 +1,199 @@
 module.exports = {
-    root: true,
-    parser: 'babel-eslint',
-    parserOptions: {
-        sourceType: 'module'
-    },
-    env: {
-        browser: true,
-        node: true
-    },
-    extends: 'eslint:recommended',
-    // required to lint *.vue files
-    plugins: [
-        'html'
-    ],
-    // check if imports actually resolve
-    'settings': {
-        'import/resolver': {
-            'webpack': {
-                'config': 'build/webpack.base.conf.js'
-            }
-        }
-    },
-    // add your custom rules here
-    'rules': {
-        // don't require .vue extension when importing
-        // 'import/extensions': ['error', 'always', {
-        //     'js': 'never',
-        //     'vue': 'never'
-        // }],
-        // allow debugger during development
-        'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
-        /*
-         * Possible Errors
-         */
-
-        // disallow unnecessary parentheses
-        'no-extra-parens': ['error', 'all', {'nestedBinaryExpressions': false}],
-
-        // disallow negating the left operand of relational operators
-        'no-unsafe-negation': 'error',
-
-        // enforce valid JSDoc comments
-        'valid-jsdoc': 'off',
-
-        /*
-         * Best Practices
-         */
-
-        // enforce return statements in callbacks of array methods
-        'array-callback-return': 'error',
-
-        // enforce consistent brace style for all control statements
-        curly: ['error', 'multi-line'],
-
-        // enforce consistent newlines before and after dots
-        'dot-location': ['error', 'property'],
-
-        // enforce dot notation whenever possible
-        'dot-notation': 'error',
-
-        // require the use of === and !==
-        'eqeqeq': ['error', 'smart'],
-
-        // disallow the use of arguments.caller or arguments.callee
-        'no-caller': 'error',
-
-        // disallow empty functions
-        'no-empty-function': 'error',
-
-        // disallow unnecessary calls to .bind()
-        'no-extra-bind': 'error',
-
-        // disallow unnecessary labels
-        'no-extra-label': 'error',
-
-        // disallow leading or trailing decimal points in numeric literals
-        'no-floating-decimal': 'error',
-
-        // disallow assignments to native objects or read-only global variables
-        'no-global-assign': 'error',
-
-        // disallow the use of eval()-like methods
-        'no-implied-eval': 'error',
-
-        // disallow the use of the __iterator__ property
-        'no-iterator': 'error',
-
-        // disallow unnecessary nested blocks
-        'no-lone-blocks': 'error',
-
-        // disallow multiple spaces
-        'no-multi-spaces': 'error',
-
-        // disallow new operators with the String, Number, and Boolean objects
-        'no-new-wrappers': 'error',
-
-        // disallow octal escape sequences in string literals
-        'no-octal-escape': 'error',
-
-        // disallow the use of the __proto__ property
-        'no-proto': 'error',
-
-        // disallow comparisons where both sides are exactly the same
-        'no-self-compare': 'error',
-
-        // disallow throwing literals as exceptions
-        'no-throw-literal': 'error',
-
-        // disallow unused expressions
-        'no-unused-expressions': 'error',
-
-        // disallow unnecessary calls to .call() and .apply()
-        'no-useless-call': 'error',
-
-        // disallow unnecessary concatenation of literals or template literals
-        'no-useless-concat': 'error',
-
-        // disallow unnecessary escape characters
-        'no-useless-escape': 'error',
-
-        // disallow void operators
-        'no-void': 'error',
-
-        // require parentheses around immediate function invocations
-        'wrap-iife': 'error',
-
-        // require or disallow “Yoda” conditions
-        yoda: 'error',
-
-        /*
-         * Variables
-         */
-
-        // disallow labels that share a name with a variable
-        'no-label-var': 'error',
-
-        // disallow initializing variables to undefined
-        'no-undef-init': 'error',
-        'no-undef': 'off',
-        // disallow the use of variables before they are defined
-        'no-use-before-define': 'error',
-
-        /*
-         * Node.js and CommonJS
-         */
-
-        // disallow new operators with calls to require
-        'no-new-require': 'error',
-
-        /*
-         * Stylistic Issues
-         */
-
-        // enforce consistent spacing inside array brackets
-        'array-bracket-spacing': 'error',
-
-        // enforce consistent spacing inside single-line blocks
-        'block-spacing': 'error',
-
-        // enforce consistent brace style for blocks
-        'brace-style': ['error', '1tbs', {'allowSingleLine': true}],
-
-        // require or disallow trailing commas
-        'comma-dangle': 'error',
-
-        // enforce consistent spacing before and after commas
-        'comma-spacing': 'error',
-
-        // enforce consistent comma style
-        'comma-style': 'error',
-
-        // enforce consistent spacing inside computed property brackets
-        'computed-property-spacing': 'error',
-
-        // require or disallow spacing between function identifiers and their invocations
-        'func-call-spacing': 'error',
-
-        // enforce consistent indentation
-        indent: ['error', 2, {SwitchCase: 1}],
-
-        // enforce the consistent use of either double or single quotes in JSX attributes
-        'jsx-quotes': 'error',
-
-        // enforce consistent spacing between keys and values in object literal properties
-        'key-spacing': 'error',
-
-        // enforce consistent spacing before and after keywords
-        'keyword-spacing': 'error',
-
-        // enforce consistent linebreak style
-        'linebreak-style': 'error',
-
-        // require or disallow newlines around directives
-        'lines-around-directive': 'error',
-
-        // require constructor names to begin with a capital letter
-        'new-cap': 'off',
-
-        // require parentheses when invoking a constructor with no arguments
-        'new-parens': 'error',
-
-        // disallow Array constructors
-        'no-array-constructor': 'error',
-
-        // disallow Object constructors
-        'no-new-object': 'error',
-
-        // disallow trailing whitespace at the end of lines
-        'no-trailing-spaces': 'error',
-
-        // disallow ternary operators when simpler alternatives exist
-        'no-unneeded-ternary': 'error',
-
-        // disallow whitespace before properties
-        'no-whitespace-before-property': 'error',
-
-        // enforce consistent spacing inside braces
-        'object-curly-spacing': ['error', 'always'],
-
-        // require or disallow padding within blocks
-        'padded-blocks': ['error', 'never'],
-
-        // require quotes around object literal property names
-        'quote-props': ['error', 'as-needed'],
-
-        // enforce the consistent use of either backticks, double, or single quotes
-        quotes: ['error', 'single'],
-
-        // enforce consistent spacing before and after semicolons
-        'semi-spacing': 'error',
-
-        // require or disallow semicolons instead of ASI
-        // semi: ['error', 'never'],
-
-        // enforce consistent spacing before blocks
-        'space-before-blocks': 'error',
-
-        'no-console': 'off',
-
-        // enforce consistent spacing before function definition opening parenthesis
-        'space-before-function-paren': ['error', 'never'],
-
-        // enforce consistent spacing inside parentheses
-        'space-in-parens': 'error',
-
-        // require spacing around infix operators
-        'space-infix-ops': 'error',
-
-        // enforce consistent spacing before or after unary operators
-        'space-unary-ops': 'error',
-
-        // enforce consistent spacing after the // or /* in a comment
-        'spaced-comment': 'error',
-
-        // require or disallow Unicode byte order mark (BOM)
-        'unicode-bom': 'error',
-
-
-        /*
-         * ECMAScript 6
-         */
-
-        // require braces around arrow function bodies
-        'arrow-body-style': 'error',
-
-        // require parentheses around arrow function arguments
-        'arrow-parens': ['error', 'as-needed'],
-
-        // enforce consistent spacing before and after the arrow in arrow functions
-        'arrow-spacing': 'error',
-
-        // enforce consistent spacing around * operators in generator functions
-        'generator-star-spacing': ['error', 'after'],
-
-        // disallow duplicate module imports
-        'no-duplicate-imports': 'error',
-
-        // disallow unnecessary computed property keys in object literals
-        'no-useless-computed-key': 'error',
-
-        // disallow unnecessary constructors
-        'no-useless-constructor': 'error',
-
-        // disallow renaming import, export, and destructured assignments to the same name
-        'no-useless-rename': 'error',
-
-        // require let or const instead of var
-        'no-var': 'error',
-
-        // require or disallow method and property shorthand syntax for object literals
-        'object-shorthand': 'error',
-
-        // require arrow functions as callbacks
-        'prefer-arrow-callback': 'error',
-
-        // require const declarations for variables that are never reassigned after declared
-        'prefer-const': 'error',
-
-        // disallow parseInt() in favor of binary, octal, and hexadecimal literals
-        'prefer-numeric-literals': 'error',
-
-        // require rest parameters instead of arguments
-        'prefer-rest-params': 'error',
-
-        // require spread operators instead of .apply()
-        'prefer-spread': 'error',
-
-        // enforce spacing between rest and spread operators and their expressions
-        'rest-spread-spacing': 'error',
-
-        // require or disallow spacing around embedded expressions of template strings
-        'template-curly-spacing': 'error',
-
-        // require or disallow spacing around the * in yield* expressions
-        'yield-star-spacing': 'error'
+  root: true,
+  parser: 'babel-eslint',
+  parserOptions: {
+    sourceType: 'module'
+  },
+  env: {
+    browser: true,
+    node: true,
+    es6: true,
+  },
+  extends: 'eslint:recommended',
+  // required to lint *.vue files
+  plugins: [
+    'html'
+  ],
+  // check if imports actually resolve
+  'settings': {
+    'import/resolver': {
+      'webpack': {
+        'config': 'build/webpack.base.conf.js'
+      }
     }
+  },
+  // add your custom rules here
+  //it is base on https://github.com/vuejs/eslint-config-vue
+  'rules': {
+    'accessor-pairs': 2,
+    'arrow-spacing': [2, {
+      'before': true,
+      'after': true
+    }],
+    'block-spacing': [2, 'always'],
+    'brace-style': [2, '1tbs', {
+      'allowSingleLine': true
+    }],
+    'camelcase': [0, {
+      'properties': 'always'
+    }],
+    'comma-dangle': [2, 'never'],
+    'comma-spacing': [2, {
+      'before': false,
+      'after': true
+    }],
+    'comma-style': [2, 'last'],
+    'constructor-super': 2,
+    'curly': [2, 'multi-line'],
+    'dot-location': [2, 'property'],
+    'eol-last': 2,
+    'eqeqeq': [2, 'allow-null'],
+    'generator-star-spacing': [2, {
+      'before': true,
+      'after': true
+    }],
+    'handle-callback-err': [2, '^(err|error)$'],
+    'indent': [2, 2, {
+      'SwitchCase': 1
+    }],
+    'jsx-quotes': [2, 'prefer-single'],
+    'key-spacing': [2, {
+      'beforeColon': false,
+      'afterColon': true
+    }],
+    'keyword-spacing': [2, {
+      'before': true,
+      'after': true
+    }],
+    'new-cap': [2, {
+      'newIsCap': true,
+      'capIsNew': false
+    }],
+    'new-parens': 2,
+    'no-array-constructor': 2,
+    'no-caller': 2,
+    'no-console': 'off',
+    'no-class-assign': 2,
+    'no-cond-assign': 2,
+    'no-const-assign': 2,
+    'no-control-regex': 0,
+    'no-delete-var': 2,
+    'no-dupe-args': 2,
+    'no-dupe-class-members': 2,
+    'no-dupe-keys': 2,
+    'no-duplicate-case': 2,
+    'no-empty-character-class': 2,
+    'no-empty-pattern': 2,
+    'no-eval': 2,
+    'no-ex-assign': 2,
+    'no-extend-native': 2,
+    'no-extra-bind': 2,
+    'no-extra-boolean-cast': 2,
+    'no-extra-parens': [2, 'functions'],
+    'no-fallthrough': 2,
+    'no-floating-decimal': 2,
+    'no-func-assign': 2,
+    'no-implied-eval': 2,
+    'no-inner-declarations': [2, 'functions'],
+    'no-invalid-regexp': 2,
+    'no-irregular-whitespace': 2,
+    'no-iterator': 2,
+    'no-label-var': 2,
+    'no-labels': [2, {
+      'allowLoop': false,
+      'allowSwitch': false
+    }],
+    'no-lone-blocks': 2,
+    'no-mixed-spaces-and-tabs': 2,
+    'no-multi-spaces': 2,
+    'no-multi-str': 2,
+    'no-multiple-empty-lines': [2, {
+      'max': 1
+    }],
+    'no-native-reassign': 2,
+    'no-negated-in-lhs': 2,
+    'no-new-object': 2,
+    'no-new-require': 2,
+    'no-new-symbol': 2,
+    'no-new-wrappers': 2,
+    'no-obj-calls': 2,
+    'no-octal': 2,
+    'no-octal-escape': 2,
+    'no-path-concat': 2,
+    'no-proto': 2,
+    'no-redeclare': 2,
+    'no-regex-spaces': 2,
+    'no-return-assign': [2, 'except-parens'],
+    'no-self-assign': 2,
+    'no-self-compare': 2,
+    'no-sequences': 2,
+    'no-shadow-restricted-names': 2,
+    'no-spaced-func': 2,
+    'no-sparse-arrays': 2,
+    'no-this-before-super': 2,
+    'no-throw-literal': 2,
+    'no-trailing-spaces': 2,
+    'no-undef': 2,
+    'no-undef-init': 2,
+    'no-unexpected-multiline': 2,
+    'no-unmodified-loop-condition': 2,
+    'no-unneeded-ternary': [2, {
+      'defaultAssignment': false
+    }],
+    'no-unreachable': 2,
+    'no-unsafe-finally': 2,
+    'no-unused-vars': [2, {
+      'vars': 'all',
+      'args': 'none'
+    }],
+    'no-useless-call': 2,
+    'no-useless-computed-key': 2,
+    'no-useless-constructor': 2,
+    'no-useless-escape': 0,
+    'no-whitespace-before-property': 2,
+    'no-with': 2,
+    'one-var': [2, {
+      'initialized': 'never'
+    }],
+    'operator-linebreak': [2, 'after', {
+      'overrides': {
+        '?': 'before',
+        ':': 'before'
+      }
+    }],
+    'padded-blocks': [2, 'never'],
+    'quotes': [2, 'single', {
+      'avoidEscape': true,
+      'allowTemplateLiterals': true
+    }],
+    'semi': [2, 'never'],
+    'semi-spacing': [2, {
+      'before': false,
+      'after': true
+    }],
+    'space-before-blocks': [2, 'always'],
+    'space-before-function-paren': [2, 'never'],
+    'space-in-parens': [2, 'never'],
+    'space-infix-ops': 2,
+    'space-unary-ops': [2, {
+      'words': true,
+      'nonwords': false
+    }],
+    'spaced-comment': [2, 'always', {
+      'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
+    }],
+    'template-curly-spacing': [2, 'never'],
+    'use-isnan': 2,
+    'valid-typeof': 2,
+    'wrap-iife': [2, 'any'],
+    'yield-star-spacing': [2, 'both'],
+    'yoda': [2, 'never'],
+    'prefer-const': 2,
+    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
+    'object-curly-spacing': [2, 'always', {
+      objectsInObjects: false
+    }],
+    'array-bracket-spacing': [2, 'never']
+  }
 }
+

.gitignore

@@ -1,10 +1,21 @@
 .DS_Store
 node_modules/
 dist/
-static/ckeditor
+gifs/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
 
-npm-debug.log
 test/unit/coverage
 test/e2e/reports
 selenium-debug.log
+
+# Editor directories and files
 .idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+
+package-lock.json

.postcssrc.js

@@ -0,0 +1,9 @@
+// https://github.com/michael-ciniawsky/postcss-load-config
+
+module.exports = {
+  "plugins": {
+    // to edit target browsers: use "browserslist" field in package.json
+    "postcss-import": {},
+    "autoprefixer": {}
+  }
+}

.travis.yml

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

README-en.md

@@ -1,29 +1,19 @@
+[![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.3.3 is used in the project, so vue 2.3.0+ is required.**
+**Note: element-ui@1.4.2 is used in the project, so vue 2.3.0+ is required.**
 
-More tutorials incoming. Including articles on:
-
-- How to build structure of a backend dashboard project from scratch
-- How to make a complete user system (e.g. permission authentication, two-factor authentication)
-- How to package components (e.g. rich text)
-- How to integrate with [Qiniu](https://www.qiniu.com/)
-- Other development experience on backend
-
-Join the group on QQ 591724180.
-
-**Tutorials:**
-
-- [Wiki](https://github.com/PanJiaChen/vue-element-admin/wiki)
-- [Step by step instructions on playing with backend using Vue Part 1 - Fundamentals](https://juejin.im/post/59097cd7a22b9d0065fb61d2)
-- [Step by step instructions on playing with backend using Vue Part 2 - Login permission](https://juejin.im/post/591aa14f570c35006961acac)
-- [Step by step instructions on packaging a Vue component](https://segmentfault.com/a/1190000009090836)
-
-**Please read the Wiki and articles above before creating any issue. Feel free to contribute by making a pull request.**
+ - 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
 
@@ -42,7 +32,9 @@ Join the group on QQ 591724180.
 - ECharts
 - 401, 404 error page
 - Error log
-- Exporting to Excel
+- Export Excel
+- Upload Excel
+- Export Zip
 - Table example
 - Interactive table example
 - Drag & drop table example
@@ -52,6 +44,11 @@ Join the group on QQ 591724180.
 - Two-factor authentication
 - Collapsing sidebar (support nested routes)
 - Mock data
+- cache tabs example
+- screenfull
+- markdown2html
+- views-tab
+- clipboard
 
 ## Development
 
@@ -101,7 +98,6 @@ npm run build:prod
 │   ├── App.vue                // entry view
 │   └── main.js                // entry for loading components, initialization
 ├── static                     // third-party libraries not packed with Webpack
-│   ├── jquery
 │   └── Tinymce                // rich text
 ├── .babelrc                   // babel-loader config
 ├── eslintrc.js                // eslint config
@@ -111,6 +107,13 @@ npm run build:prod
 └── 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.
@@ -125,6 +128,10 @@ Only status of user and app configuration is managed by Vuex. Other data are man
 
 ![](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)
@@ -164,3 +171,7 @@ Only status of user and app configuration is managed by Vuex. Other data are man
 #### More
 
 http://panjiachen.github.io/vue-element-admin
+
+## License
+
+MIT

README.md

@@ -1,102 +1,161 @@
-# vue-element-admin #
-[线上地址](http://panjiachen.github.io/vue-element-admin)
+<p align="center">
+  <img width="320" src="https://wpimg.wallstcn.com/ecc53a42-d79b-42e2-8852-5126b810a4c8.svg">
+</p>
 
-[English Document](https://github.com/PanJiaChen/vue-element-admin/blob/master/README-en.md)
+# vue-element-admin
 
-[wiki](https://github.com/PanJiaChen/vue-element-admin/wiki)
+[![vue](https://img.shields.io/badge/vue-2.5.10-brightgreen.svg)](https://github.com/vuejs/vue)
+[![element-ui](https://img.shields.io/badge/element--ui-2.0.8-brightgreen.svg)](https://github.com/ElemeFE/element)
+[![Build Status](https://travis-ci.org/PanJiaChen/vue-element-admin.svg?branch=master)](https://travis-ci.org/PanJiaChen/vue-element-admin)
+[![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)]()
 
-**注意：该项目目前使用element-ui@1.3.3版本,所以最低兼容 Vue 2.3.0**
+**A magical vue admin.**
 
-## 前言
-> 这半年来一直在用vue写管理后台，目前后台已经有七十多个页面，十几种权限，但维护成本依然很低，所以准备开源分享一下后台开发的经验和成果。目前的技术栈主要的采用vue+element+axios.由于是个人项目，所以数据请求都是用了mockjs模拟。注意：在次项目基础上改造开发时请移除mock文件。
+- [线上地址](http://panjiachen.github.io/vue-element-admin)
 
-后续会出一系列的教程配套文章，如如何从零构建后台项目框架，如何做完整的用户系统（如权限验证，二次登录等），如何二次开发组件（如富文本），如何整合七牛等等文章，各种后台开发经验等等。莫急~~
+- [使用文档](https://panjiachen.github.io/vue-element-admin-site/#/)
 
-相应需求，开了一个qq群 591724180 方便大家交流
+- [English Document](https://github.com/PanJiaChen/vue-element-admin/blob/master/README-en.md)
 
- - [wiki](https://github.com/PanJiaChen/vue-element-admin/wiki)
+- [wiki](https://github.com/PanJiaChen/vue-element-admin/wiki)
+
+- [donate](https://panjiachen.github.io/vue-element-admin-site/#/donate)
+
+**本项目的定位是后台集成方案，不适合当基础模板来开发。**
+ - 模板建议使用: [vueAdmin-template](https://github.com/PanJiaChen/vueAdmin-template)  
+ - 桌面端: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
+
+**注意：该项目使用 element-ui@2.0.0+ 版本，所以最低兼容 vue@2.5.0**
+
+## 前序准备
+
+你的本地环境需要安装 [node](http://nodejs.org/) 和 [git](https://git-scm.com/)。我们的技术栈基于 [ES2015+](http://es6.ruanyifeng.com/)、[vue](https://cn.vuejs.org/index.html)、[vuex](https://vuex.vuejs.org/zh-cn/)、[vue-router](https://router.vuejs.org/zh-cn/) 和 [element-ui](https://github.com/ElemeFE/element)，提前了解和学习这些知识会对使用本项目有很大的帮助。
+
+同时配套一个系列的教程文章，如何从零构建后一个完整的后台项目，建议大家先看完这些文章再来实践本项目
  - [手摸手，带你用 vue 撸后台 系列一(基础篇)](https://juejin.im/post/59097cd7a22b9d0065fb61d2)
  - [手摸手，带你用 vue 撸后台 系列二(登录权限篇)](https://juejin.im/post/591aa14f570c35006961acac)
- - [ 手摸手，带你封装一个vue component](https://segmentfault.com/a/1190000009090836)
+ - [手摸手，带你用 vue 撸后台 系列三 (实战篇)](https://juejin.im/post/593121aa0ce4630057f70d35)
+ - [手摸手，带你用 vue 撸后台 系列四(vueAdmin 一个极简的后台基础模板)](https://juejin.im/post/595b4d776fb9a06bbe7dba56)
+ - [手摸手，带你封装一个 vue component](https://segmentfault.com/a/1190000009090836)
+ - [手摸手，带你优雅的使用 icon](https://juejin.im/post/59bb864b5188257e7a427c09)
 
+ 响应需求，开了一个qq群 `591724180` 方便大家交流
 
- **如有问题请先看上述问题和Wiki,不能满足，欢迎issue和pr~**
+ 或者加入该群主 **[圈子](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全屏
 - 列表拖拽
-- plitPane
+- Svg Sprite 图标
+- Dashboard
+- 本地mock数据
+- Echarts 图表
+- Clipboard(剪贴复制)
+- 401/404错误页面
+- 错误日志
+- 导出excel
+- 导出zip
+- 前端可视化excel
+- Table example
+- 动态table example
+- 拖拽table example
+- 内联编辑table example
+- Form example
+- 二步登录
+- SplitPane
 - Dropzone
 - Sticky
 - CountTo
-- echarts图表
-- 401，401错误页面
-- 错误日志
-- 导出excel
-- table example
-- 动态table example
-- 拖拽table example
-- form example
-- 多环境发布
-- dashboard
-- 二次登录
-- 动态侧边栏（支持多级路由）
-- mock数据
-
+- Markdown to html
 
 ## 开发
 ```bash
-    # 克隆项目
-    git clone https://github.com/PanJiaChen/vue-element-admin.git
+	# 克隆项目
+	git clone https://github.com/PanJiaChen/vue-element-admin.git
 
-    # 安装依赖
-    npm install
-    //or # 建议不要用cnpm  安装有各种诡异的bug 可以通过如下操作解决npm速度慢的问题
-    npm install --registry=https://registry.npm.taobao.org
+	# 安装依赖
+	npm install
+	   
+	# 建议不要用cnpm安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题
+	npm install --registry=https://registry.npm.taobao.org
 
-    # 本地开发 开启服务
-    npm run dev
+	# 启动服务
+	npm run dev
 ```
 浏览器访问 http://localhost:9527
 
 ## 发布
 ```bash
-    # 发布测试环境 带webpack ananalyzer
-    npm run build:sit-preview
+	# 构建测试环境
+	npm run build:sit
 
-    # 构建生成环境
-    npm run build:prod
+	# 构建生成环境
+	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
+```
+
+更多信息请参考 [使用文档](https://panjiachen.github.io/vue-element-admin-site/#/deploy)
+
 ## 目录结构
 ```shell
 ├── build                      // 构建相关  
 ├── config                     // 配置相关
 ├── src                        // 源代码
 │   ├── api                    // 所有请求
-│   ├── assets                 // 主题 字体等静态资源
+│   ├── assets                 // 主题 图片等静态资源
 │   ├── components             // 全局公用组件
 │   ├── directive              // 全局指令
-│   ├── filtres                // 全局filter
-│   ├── mock                   // mock数据
+│   ├── filtres                // 全局 filter
+│   ├── icons                  // 项目svg icons
+│   ├── lang                   // 国际化 lang
+│   ├── mock                   // 项目mock 模拟数据
 │   ├── router                 // 路由
-│   ├── store                  // 全局store管理
+│   ├── store                  // 全局 store
 │   ├── styles                 // 全局样式
 │   ├── utils                  // 全局公用方法
-│   ├── view                   // view
+│   ├── vendor                 // 公用vendor
+│   ├── views                  // views
 │   ├── App.vue                // 入口页面
-│   └── main.js                // 入口 加载组件 初始化等
+│   ├── main.js                // 入口js 初始化 加载组件等
+│   └── permission.js          // 权限管理
 ├── static                     // 第三方不打包资源
-│   ├── jquery
 │   └── Tinymce                // 富文本
 ├── .babelrc                   // babel-loader 配置
-├── eslintrc.js                // eslint 配置项
+├── .eslintrc.js               // eslint 配置项
+├── .postcssrc.js              // postcss 配置项
 ├── .gitignore                 // git 忽略项
 ├── favicon.ico                // favicon图标
 ├── index.html                 // html模板
@@ -104,63 +163,16 @@
 
 ```
 
-## 状态管理
-后台只有user和app配置相关状态使用vuex存在全局，其它数据都由每个业务页面自己管理。
+## 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
+If you find this project useful, you can buy me a cup of coffee
+![donate](https://panjiachen.github.io/donate/donation.png)
 
-#### 两步验证登录 支持微信和qq
-
-![两步验证 here](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/2login.gif)
-
-#### 真正的动态换肤
-
-![真正的动态换肤](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/theme.gif)<br />
-
-
-
-#### 可收起侧边栏
-
-![enter image description here](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/leftmenu.gif)
-
-#### table拖拽排序
-
-![enter image description here](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/order.gif)
-
-
-#### 动态table
-
-![enter image description here](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/dynamictable.gif)
-
-
-#### 上传裁剪头像
-
-![enter image description here](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/uploadAvatar.gif)
-
-
-#### 错误统计
-
-![enter image description here](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/errorlog.gif)
-
-
-#### 富文本(整合七牛 打水印等个性化功能)
-
-![enter image description here](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/editor.gif)
-
-#### 封装table组件
-
-![enter image description here](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/table.gif)
-
-#### 图表
-
-![enter image description here](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/echarts.gif)
-
-
-#### 导出excel
-
-![enter image description here](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/excel.png)
-
-
-## [更多demo](http://panjiachen.github.io/vue-element-admin)
+## License
 
+MIT

build/build.js

@@ -1,41 +1,48 @@
-require('./check-versions')();
-var server = require('pushstate-server');
-var opn = require('opn')
-var ora = require('ora')
-var rm = require('rimraf')
-var path = require('path')
-var chalk = require('chalk')
-var webpack = require('webpack');
-var config = require('../config');
-var webpackConfig = require('./webpack.prod.conf');
+'use strict'
+require('./check-versions')()
 
-console.log(process.env.NODE_ENV)
+const ora = require('ora')
+const rm = require('rimraf')
+const path = require('path')
+const chalk = require('chalk')
+const webpack = require('webpack')
+const config = require('../config')
+const webpackConfig = require('./webpack.prod.conf')
+const server = require('pushstate-server')
 
-var spinner = ora('building for ' + process.env.NODE_ENV + '...')
+var spinner = ora('building for '+ process.env.env_config+ ' environment...' )
 spinner.start()
 
-
 rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
+  if (err) throw err
+  webpack(webpackConfig, (err, stats) => {
+    spinner.stop()
     if (err) throw err
-    webpack(webpackConfig, function (err, stats) {
-        spinner.stop()
-        if (err) throw err
-        process.stdout.write(stats.toString({
-                colors: true,
-                modules: false,
-                children: false,
-                chunks: false,
-                chunkModules: false
-            }) + '\n\n')
+    process.stdout.write(stats.toString({
+      colors: true,
+      modules: false,
+      children: false,
+      chunks: false,
+      chunkModules: false
+    }) + '\n\n')
 
-        console.log(chalk.cyan('  Build complete.\n'))
-        if(process.env.npm_config_preview){
-            server.start({
-                port: 9528,
-                directory: './dist',
-                file: '/index.html'
-            });
-            console.log('> Listening at ' +  'http://localhost:9528' + '\n')
-        }
-    })
+    if (stats.hasErrors()) {
+      console.log(chalk.red('  Build failed with errors.\n'))
+      process.exit(1)
+    }
+
+    console.log(chalk.cyan('  Build complete.\n'))
+    console.log(chalk.yellow(
+      '  Tip: built files are meant to be served over an HTTP server.\n' +
+      '  Opening index.html over file:// won\'t work.\n'
+    ))
+    if(process.env.npm_config_preview){
+      server.start({
+          port: 9526,
+          directory: './dist',
+          file: '/index.html'
+      });
+      console.log('> Listening at ' +  'http://localhost:9526' + '\n')
+    }
+  })
 })

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,84 +0,0 @@
-require('./check-versions')(); // 检查 Node 和 npm 版本
-var config = require('../config');
-if (!process.env.NODE_ENV) {
-    process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
-}
-
-var opn = require('opn')
-var path = require('path');
-var express = require('express');
-var webpack = require('webpack');
-var proxyMiddleware = require('http-proxy-middleware');
-var webpackConfig = require('./webpack.dev.conf');
-
-// default port where dev server listens for incoming traffic
-var port = process.env.PORT || config.dev.port;
-// automatically open browser, if not set will be false
-var autoOpenBrowser = !!config.dev.autoOpenBrowser;
-// Define HTTP proxies to your custom API backend
-// https://github.com/chimurai/http-proxy-middleware
-var proxyTable = config.dev.proxyTable;
-
-var app = express();
-var compiler = webpack(webpackConfig);
-
-var devMiddleware = require('webpack-dev-middleware')(compiler, {
-    publicPath: webpackConfig.output.publicPath,
-    quiet: true
-});
-
-var hotMiddleware = require('webpack-hot-middleware')(compiler, {
-    log: () => {
-    }
-});
-
-// force page reload when html-webpack-plugin template changes
-compiler.plugin('compilation', function (compilation) {
-    compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
-        hotMiddleware.publish({action: 'reload'});
-        cb()
-    })
-});
-
-// compiler.apply(new DashboardPlugin());
-
-// proxy api requests
-Object.keys(proxyTable).forEach(function (context) {
-    var options = proxyTable[context]
-    if (typeof options === 'string') {
-        options = {target: options}
-    }
-    app.use(proxyMiddleware(options.filter || context, options))
-});
-
-// handle fallback for HTML5 history API
-app.use(require('connect-history-api-fallback')());
-
-// serve webpack bundle output
-app.use(devMiddleware);
-
-// enable hot-reload and state-preserving
-// compilation error display
-app.use(hotMiddleware);
-
-// serve pure static assets
-var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory);
-app.use(staticPath, express.static('./static'));
-
-var uri = 'http://localhost:' + port
-
-devMiddleware.waitUntilValid(function () {
-    console.log('> Listening at ' + uri + '\n')
-});
-
-module.exports = app.listen(port, function (err) {
-    if (err) {
-        console.log(err);
-        return
-    }
-
-    // when env is testing, don't need open it
-    if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
-        opn(uri)
-    }
-});

build/utils.js

@@ -1,71 +1,101 @@
-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'
-        ? config.build.assetsSubDirectory
-        : config.dev.assetsSubDirectory
-    return path.posix.join(assetsSubDirectory, _path)
+  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 || {}
+  options = options || {}
 
-    var cssLoader = {
-        loader: 'css-loader',
-        options: {
-            minimize: process.env.NODE_ENV === 'production',
-            sourceMap: options.sourceMap
-        }
+  const cssLoader = {
+    loader: 'css-loader',
+    options: {
+      sourceMap: options.sourceMap
+    }
+  }
+
+  const postcssLoader = {
+    loader: 'postcss-loader',
+    options: {
+      sourceMap: options.sourceMap
+    }
+  }
+
+  // generate loader string to be used with extract text plugin
+  function generateLoaders (loader, loaderOptions) {
+    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
+
+    if (loader) {
+      loaders.push({
+        loader: loader + '-loader',
+        options: Object.assign({}, loaderOptions, {
+          sourceMap: options.sourceMap
+        })
+      })
     }
 
-    // generate loader string to be used with extract text plugin
-    function generateLoaders(loader, loaderOptions) {
-        var loaders = [cssLoader]
-        if (loader) {
-            loaders.push({
-                loader: loader + '-loader',
-                options: Object.assign({}, loaderOptions, {
-                    sourceMap: options.sourceMap
-                })
-            })
-        }
-
-        // Extract CSS when that option is specified
-        // (which is the case during production build)
-        if (options.extract) {
-            return ExtractTextPlugin.extract({
-                use: loaders,
-                fallback: 'vue-style-loader'
-            })
-        } else {
-            return ['vue-style-loader'].concat(loaders)
-        }
+    // Extract CSS when that option is specified
+    // (which is the case during production build)
+    if (options.extract) {
+      return ExtractTextPlugin.extract({
+        use: loaders,
+        fallback: 'vue-style-loader'
+      })
+    } else {
+      return ['vue-style-loader'].concat(loaders)
     }
+  }
 
-    // http://vuejs.github.io/vue-loader/en/configurations/extract-css.html
-    return {
-        css: generateLoaders(),
-        postcss: generateLoaders(),
-        less: generateLoaders('less'),
-        sass: generateLoaders('sass', {indentedSyntax: true}),
-        scss: generateLoaders('sass'),
-        stylus: generateLoaders('stylus'),
-        styl: generateLoaders('stylus')
-    }
+  // https://vue-loader.vuejs.org/en/configurations/extract-css.html
+  return {
+    css: generateLoaders(),
+    postcss: generateLoaders(),
+    less: generateLoaders('less'),
+    sass: generateLoaders('sass', { indentedSyntax: true }),
+    scss: generateLoaders('sass'),
+    stylus: generateLoaders('stylus'),
+    styl: generateLoaders('stylus')
+  }
 }
 
 // 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]
-        output.push({
-            test: new RegExp('\\.' + extension + '$'),
-            use: loader
-        })
-    }
-    return output
+  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,85 +1,101 @@
-var path = require('path');
-var utils = require('./utils');
-var config = require('../config');
-var vueLoaderConfig = require('./vue-loader.conf');
+'use strict'
+const path = require('path')
+const utils = require('./utils')
+const config = require('../config')
+const vueLoaderConfig = require('./vue-loader.conf')
 
-function resolve(dir) {
-    return path.join(__dirname, '..', dir)
+function resolve (dir) {
+  return path.join(__dirname, '..', dir)
 }
-var src = path.resolve(__dirname, '../src');
+
+const createLintingRule = () => ({
+  test: /\.(js|vue)$/,
+  loader: 'eslint-loader',
+  enforce: 'pre',
+  include: [resolve('src'), resolve('test')],
+  options: {
+    formatter: require('eslint-friendly-formatter'),
+    emitWarning: !config.dev.showEslintErrorsInOverlay
+  }
+})
 
 module.exports = {
-    entry: {
-        app: './src/main.js'
-    },
-    output: {
-        path: config.build.assetsRoot,
-        filename: '[name].js',
-        publicPath: process.env.NODE_ENV !== 'development' ?  config.build.assetsPublicPath: config.dev.assetsPublicPath
-    },
-    resolve: {
-        extensions: ['.js', '.vue', '.json'],
-        alias: {
-            'vue$': 'vue/dist/vue.esm.js',
-            '@': resolve('src'),
-            'src': path.resolve(__dirname, '../src'),
-            'assets': path.resolve(__dirname, '../src/assets'),
-            'components': path.resolve(__dirname, '../src/components'),
-            'views': path.resolve(__dirname, '../src/views'),
-            'styles': path.resolve(__dirname, '../src/styles'),
-            'api': path.resolve(__dirname, '../src/api'),
-            'utils': path.resolve(__dirname, '../src/utils'),
-            'store': path.resolve(__dirname, '../src/store'),
-            'router': path.resolve(__dirname, '../src/router'),
-            'mock': path.resolve(__dirname, '../src/mock'),
-            'vendor': path.resolve(__dirname, '../src/vendor'),
-            'static': path.resolve(__dirname, '../static')
+  context: path.resolve(__dirname, '../'),
+  entry: {
+    app: './src/main.js'
+  },
+  output: {
+    path: config.build.assetsRoot,
+    filename: '[name].js',
+    publicPath: process.env.NODE_ENV === 'production'
+      ? config.build.assetsPublicPath
+      : config.dev.assetsPublicPath
+  },
+  resolve: {
+    extensions: ['.js', '.vue', '.json'],
+    alias: {
+      'vue$': 'vue/dist/vue.esm.js',
+      '@': resolve('src'),
+    }
+  },
+  module: {
+    rules: [
+      ...(config.dev.useEslint ? [createLintingRule()] : []),
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: vueLoaderConfig
+      },
+      {
+        test: /\.js$/,
+        loader: 'babel-loader?cacheDirectory',
+        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
+      },
+      {
+        test: /\.svg$/,
+        loader: 'svg-sprite-loader',
+        include: [resolve('src/icons')],
+        options: {
+          symbolId: 'icon-[name]'
         }
-    },
-    externals: {
-        jquery: 'jQuery'
-    },
-    module: {
-        rules: [
-            // {
-            //     test: /\.(js|vue)$/,
-            //     loader: 'eslint-loader',
-            //     enforce: "pre",
-            //     include: [resolve('src'), resolve('test')],
-            //     options: {
-            //         formatter: require('eslint-friendly-formatter')
-            //     }
-            // },
-            { test: /\.vue$/,
-                loader: 'vue-loader',
-                options: vueLoaderConfig
-            },
-            {
-                test: /\.js$/,
-                loader: 'babel-loader?cacheDirectory',
-                include: [resolve('src'), resolve('test')]
-            },
-            {
-                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
-                loader: 'url-loader',
-                query: {
-                    limit: 10000,
-                    name: utils.assetsPath('img/[name].[hash:7].[ext]')
-                }
-            },
-            {
-                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
-                loader: 'url-loader',
-                query: {
-                    limit: 10000,
-                    name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
-                }
-            }
-        ]
-    },
-    //注入全局mixin
-    // sassResources: path.join(__dirname, '../src/styles/mixin.scss'),
-    // sassLoader: {
-    //     data:  path.join(__dirname, '../src/styles/index.scss')
-    // },
+      },
+      {
+        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+        loader: 'url-loader',
+        exclude: [resolve('src/icons')],
+        options: {
+          limit: 10000,
+          name: utils.assetsPath('img/[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: utils.assetsPath('media/[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
+        }
+      }
+    ]
+  },
+  node: {
+    // prevent webpack from injecting useless setImmediate polyfill because Vue
+    // source contains it (although only uses it if it's native).
+    setImmediate: false,
+    // prevent webpack from injecting mocks to Node native modules
+    // that does not make sense for the client
+    dgram: 'empty',
+    fs: 'empty',
+    net: 'empty',
+    tls: 'empty',
+    child_process: 'empty'
+  }
 }

build/webpack.dev.conf.js

@@ -1,47 +1,88 @@
-var utils = require('./utils')
-var path = require('path')
-var webpack = require('webpack')
-var config = require('../config')
-var merge = require('webpack-merge')
-var baseWebpackConfig = require('./webpack.base.conf')
-var HtmlWebpackPlugin = require('html-webpack-plugin')
-var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
+'use strict'
+const path = require('path')
+const utils = require('./utils')
+const webpack = require('webpack')
+const config = require('../config')
+const merge = require('webpack-merge')
+const baseWebpackConfig = require('./webpack.base.conf')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
+const portfinder = require('portfinder')
 
-// add hot-reload related code to entry chunks
-Object.keys(baseWebpackConfig.entry).forEach(function (name) {
-    baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
-})
-
-function resolveApp(relativePath) {
-    return path.resolve(relativePath);
+function resolve (dir) {
+  return path.join(__dirname, '..', dir)
 }
 
-module.exports = merge(baseWebpackConfig, {
-    module: {
-        rules: utils.styleLoaders({sourceMap: config.dev.cssSourceMap})
-    },
-    // cheap-source-map is faster for development
-    devtool: '#cheap-source-map',
-    cache: true,
-    plugins: [
-        new webpack.DefinePlugin({
-            'process.env': config.dev.env
-        }),
-        new webpack.ProvidePlugin({
-            $: 'jquery',
-            'jQuery': 'jquery'
-        }),
-        // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
-        new webpack.HotModuleReplacementPlugin(),
-        new webpack.NoEmitOnErrorsPlugin(),
-        // https://github.com/ampedandwired/html-webpack-plugin
-        new HtmlWebpackPlugin({
-            filename: 'index.html',
-            template: 'index.html',
-            favicon: resolveApp('favicon.ico'),
-            inject: true,
-            path:config.dev.staticPath
-        }),
-        new FriendlyErrorsPlugin()
-    ]
+const HOST = process.env.HOST
+const PORT = process.env.PORT && Number(process.env.PORT)
+
+const devWebpackConfig = merge(baseWebpackConfig, {
+  module: {
+    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
+  },
+  // cheap-module-eval-source-map is faster for development
+  devtool: config.dev.devtool,
+
+  // these devServer options should be customized in /config/index.js
+  devServer: {
+    clientLogLevel: 'warning',
+    historyApiFallback: true,
+    hot: true,
+    compress: true,
+    host: HOST || config.dev.host,
+    port: PORT || config.dev.port,
+    open: config.dev.autoOpenBrowser,
+    overlay: config.dev.errorOverlay
+      ? { warnings: false, errors: true }
+      : false,
+    publicPath: config.dev.assetsPublicPath,
+    proxy: config.dev.proxyTable,
+    quiet: true, // necessary for FriendlyErrorsPlugin
+    watchOptions: {
+      poll: config.dev.poll,
+    }
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env': require('../config/dev.env')
+    }),
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
+    new webpack.NoEmitOnErrorsPlugin(),
+    // https://github.com/ampedandwired/html-webpack-plugin
+    new HtmlWebpackPlugin({
+      filename: 'index.html',
+      template: 'index.html',
+      inject: true,
+      favicon: resolve('favicon.ico'),
+      title: 'vue-element-admin',
+      path: config.dev.assetsPublicPath + config.dev.assetsSubDirectory
+    }),
+  ]
+})
+
+module.exports = new Promise((resolve, reject) => {
+  portfinder.basePort = process.env.PORT || config.dev.port
+  portfinder.getPort((err, port) => {
+    if (err) {
+      reject(err)
+    } else {
+      // publish the new Port, necessary for e2e tests
+      process.env.PORT = port
+      // add port to devServer config
+      devWebpackConfig.devServer.port = port
+
+      // Add FriendlyErrorsPlugin
+      devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
+        compilationSuccessInfo: {
+          messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
+        },
+        onErrors: config.dev.notifyOnErrors
+        ? utils.createNotifierCallback()
+        : undefined
+      }))
+
+      resolve(devWebpackConfig)
+    }
+  })
 })

build/webpack.prod.conf.js

@@ -1,113 +1,175 @@
-var path = require('path')
-var utils = require('./utils')
-var webpack = require('webpack')
-var config = require('../config')
-var merge = require('webpack-merge')
-var baseWebpackConfig = require('./webpack.base.conf')
-var CopyWebpackPlugin = require('copy-webpack-plugin')
-var HtmlWebpackPlugin = require('html-webpack-plugin')
-var ExtractTextPlugin = require('extract-text-webpack-plugin')
-var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
+'use strict'
+const path = require('path')
+const utils = require('./utils')
+const webpack = require('webpack')
+const config = require('../config')
+const merge = require('webpack-merge')
+const baseWebpackConfig = require('./webpack.base.conf')
+const CopyWebpackPlugin = require('copy-webpack-plugin')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
 
-var env = process.env.NODE_ENV === 'production' ? config.build.prodEnv : config.build.sitEnv
-
-function resolveApp(relativePath) {
-    return path.resolve(relativePath);
+function resolve (dir) {
+  return path.join(__dirname, '..', dir)
 }
 
-var webpackConfig = merge(baseWebpackConfig, {
-    module: {
-        rules: utils.styleLoaders({
-            sourceMap: config.build.productionSourceMap,
-            extract: true
-        })
-    },
-    devtool: config.build.productionSourceMap ? '#source-map' : false,
-    output: {
-        path: config.build.assetsRoot,
-        filename: utils.assetsPath('js/[name].[chunkhash].js'),
-        chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
-    },
-    plugins: [
-        // http://vuejs.github.io/vue-loader/en/workflow/production.html
-        new webpack.DefinePlugin({
-            'process.env': env
-        }),
-        new webpack.optimize.UglifyJsPlugin({
-            compress: {
-                warnings: false
-            },
-            sourceMap: true
-        }),
-        // extract css into its own file
-        new ExtractTextPlugin({
-            filename: utils.assetsPath('css/[name].[contenthash].css')
-        }),
-        // Compress extracted CSS. We are using this plugin so that possible
-        // duplicated CSS from different components can be deduped.
-        new OptimizeCSSPlugin(),
-        // generate dist index.html with correct asset hash for caching.
-        // you can customize output by editing /index.html
-        // see https://github.com/ampedandwired/html-webpack-plugin
-        new HtmlWebpackPlugin({
-            filename: process.env.NODE_ENV === 'testing'
-                ? 'index.html'
-                : config.build.index,
-            template: 'index.html',
-            inject: true,
-            favicon: resolveApp('favicon.ico'),
-            minify: {
-                removeComments: true,
-                collapseWhitespace: true,
-                removeRedundantAttributes: true,
-                useShortDoctype: true,
-                removeEmptyAttributes: true,
-                removeStyleLinkTypeAttributes: true,
-                keepClosingSlash: true,
-                minifyJS: true,
-                minifyCSS: true,
-                minifyURLs: true
-            },
-             path:config.build.staticPath,
-            // necessary to consistently work with multiple chunks via CommonsChunkPlugin
-            chunksSortMode: 'dependency'
-        }),
-        // split vendor js into its own file
-        new webpack.optimize.CommonsChunkPlugin({
-            name: 'vendor',
-            minChunks: function (module, count) {
-                // any required modules inside node_modules are extracted to vendor
-                return (
-                    module.resource &&
-                    /\.js$/.test(module.resource) &&
-                    module.resource.indexOf(
-                        path.join(__dirname, '../node_modules')
-                    ) === 0
-                )
-            }
-        }),
-        // extract webpack runtime and module manifest to its own file in order to
-        // prevent vendor hash from being updated whenever app bundle is updated
-        new webpack.optimize.CommonsChunkPlugin({
-            name: 'manifest',
-            chunks: ['vendor']
-        }),
-        // copy custom static assets
-        new CopyWebpackPlugin([
-            {
-                from: path.resolve(__dirname, '../static'),
-                to: config.build.assetsSubDirectory,
-                ignore: ['.*']
-            }
-        ]),
-        new webpack.ProvidePlugin({
-            $: 'jquery',
-            'jQuery': 'jquery'
-        })
-    ]
+const env = require('../config/'+process.env.env_config+'.env')
+
+const webpackConfig = merge(baseWebpackConfig, {
+  module: {
+    rules: utils.styleLoaders({
+      sourceMap: config.build.productionSourceMap,
+      extract: true,
+      usePostCSS: true
+    })
+  },
+  devtool: config.build.productionSourceMap ? config.build.devtool : false,
+  output: {
+    path: config.build.assetsRoot,
+    filename: utils.assetsPath('js/[name].[chunkhash].js'),
+    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
+  },
+  plugins: [
+    // http://vuejs.github.io/vue-loader/en/workflow/production.html
+    new webpack.DefinePlugin({
+      'process.env': env
+    }),
+    new UglifyJsPlugin({
+      uglifyOptions: {
+        compress: {
+          warnings: false
+        }
+      },
+      sourceMap: config.build.productionSourceMap,
+      parallel: true
+    }),
+    // extract css into its own file
+    new ExtractTextPlugin({
+      filename: utils.assetsPath('css/[name].[contenthash].css'),
+      // Setting the following option to `false` will not extract CSS from codesplit chunks.
+      // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
+      // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
+      allChunks: false,
+    }),
+    // Compress extracted CSS. We are using this plugin so that possible
+    // duplicated CSS from different components can be deduped.
+    new OptimizeCSSPlugin({
+      cssProcessorOptions: config.build.productionSourceMap
+        ? { safe: true, map: { inline: false } }
+        : { safe: true }
+    }),
+    // generate dist index.html with correct asset hash for caching.
+    // you can customize output by editing /index.html
+    // see https://github.com/ampedandwired/html-webpack-plugin
+    new HtmlWebpackPlugin({
+      filename: config.build.index,
+      template: 'index.html',
+      inject: true,
+      favicon: resolve('favicon.ico'),
+      title: 'vue-element-admin',
+      path: config.build.assetsPublicPath + config.build.assetsSubDirectory,
+      minify: {
+        removeComments: true,
+        collapseWhitespace: true,
+        removeAttributeQuotes: true
+        // more options:
+        // https://github.com/kangax/html-minifier#options-quick-reference
+      },
+      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
+      chunksSortMode: 'dependency'
+    }),
+    // keep module.id stable when vender modules does not change
+    new webpack.HashedModuleIdsPlugin(),
+    // enable scope hoisting
+    new webpack.optimize.ModuleConcatenationPlugin(),
+    // split vendor js into its own file
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'vendor',
+      minChunks (module) {
+        // any required modules inside node_modules are extracted to vendor
+        return (
+          module.resource &&
+          /\.js$/.test(module.resource) &&
+          module.resource.indexOf(
+            path.join(__dirname, '../node_modules')
+          ) === 0
+        )
+      }
+    }),
+    // extract webpack runtime and module manifest to its own file in order to
+    // prevent vendor hash from being updated whenever app bundle is updated
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'manifest',
+      minChunks: Infinity
+    }),
+    // This instance extracts shared chunks from code splitted chunks and bundles them
+    // in a separate chunk, similar to the vendor chunk
+    // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'app',
+      async: 'vendor-async',
+      children: true,
+      minChunks: 3
+    }),
+    // split echarts into its own file
+    new webpack.optimize.CommonsChunkPlugin({
+      async: 'echarts',
+      minChunks(module) {
+        var context = module.context;
+        return context && (context.indexOf('echarts') >= 0 || context.indexOf('zrender') >= 0);
+      }
+    }),
+    // split xlsx into its own file
+    new webpack.optimize.CommonsChunkPlugin({
+      async: 'xlsx',
+      minChunks(module) {
+        var context = module.context;
+        return context && (context.indexOf('xlsx') >= 0);
+      }
+    }),
+     // split codemirror into its own file
+     new webpack.optimize.CommonsChunkPlugin({
+      async: 'codemirror',
+      minChunks(module) {
+        var context = module.context;
+        return context && (context.indexOf('codemirror') >= 0);
+      }
+    }),
+
+    // copy custom static assets
+    new CopyWebpackPlugin([
+      {
+        from: path.resolve(__dirname, '../static'),
+        to: config.build.assetsSubDirectory,
+        ignore: ['.*']
+      }
+    ])
+  ]
 })
-if (config.build.bundleAnalyzerReport) {
-    var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
-    webpackConfig.plugins.push(new BundleAnalyzerPlugin())
+
+if (config.build.productionGzip) {
+  const CompressionWebpackPlugin = require('compression-webpack-plugin')
+
+  webpackConfig.plugins.push(
+    new CompressionWebpackPlugin({
+      asset: '[path].gz[query]',
+      algorithm: 'gzip',
+      test: new RegExp(
+        '\\.(' +
+        config.build.productionGzipExtensions.join('|') +
+        ')$'
+      ),
+      threshold: 10240,
+      minRatio: 0.8
+    })
+  )
 }
+
+if (config.build.bundleAnalyzerReport) {
+  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
+}
+
 module.exports = webpackConfig

config/dev.env.js

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

config/index.js

@@ -1,41 +1,83 @@
+'use strict'
+// Template version: 1.2.6
 // see http://vuejs-templates.github.io/webpack for documentation.
-var path = require('path')
+
+const path = require('path')
 
 module.exports = {
-    build: {
-        sitEnv: require('./sit.env'),
-        prodEnv: require('./prod.env'),
-        index: path.resolve(__dirname, '../dist/index.html'),
-        assetsRoot: path.resolve(__dirname, '../dist'),
-        assetsSubDirectory: '',
-        assetsPublicPath: './', //生产环境assetsPublicPath: '/'
-        staticPath:'./', //生产环境 staticPath:''
-        productionSourceMap: true,
-        // Gzip off by default as many popular static hosts such as
-        // Surge or Netlify already gzip all static assets for you.
-        // Before setting to `true`, make sure to:
-        // npm install --save-dev compression-webpack-plugin
-        productionGzip: false,
-        productionGzipExtensions: ['js', 'css'],
-        // Run the build command with an extra argument to
-        // View the bundle analyzer report after build finishes:
-        // `npm run build --report`
-        // Set to `true` or `false` to always turn it on or off
-        bundleAnalyzerReport: process.env.npm_config_report
-    },
-    dev: {
-        env: require('./dev.env'),
-        port: 9527,
-        autoOpenBrowser: true,
-        assetsSubDirectory: 'static',
-        assetsPublicPath: '/',
-        staticPath:'/static/',
-        proxyTable: {},
-        // CSS Sourcemaps off by default because relative paths are "buggy"
-        // with this option, according to the CSS-Loader README
-        // (https://github.com/webpack/css-loader#sourcemaps)
-        // In our experience, they generally work as expected,
-        // just be aware of this issue when enabling this option.
-        cssSourceMap: false
-    }
+  dev: {
+
+    // Paths
+    assetsSubDirectory: 'static',
+    assetsPublicPath: '/',
+    proxyTable: {},
+
+    // Various Dev Server settings
+    host: 'localhost', // can be overwritten by process.env.HOST
+    port: 9527, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
+    autoOpenBrowser: true,
+    errorOverlay: true,
+    notifyOnErrors: false,
+    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
+
+    // Use Eslint Loader?
+    // If true, your code will be linted during bundling and
+    // linting errors and warnings will be shown in the console.
+    useEslint: true,
+    // If true, eslint errors and warnings will also be shown in the error overlay
+    // in the browser.
+    showEslintErrorsInOverlay: false,
+
+    /**
+     * Source Maps
+     */
+
+    // https://webpack.js.org/configuration/devtool/#development
+    devtool: 'eval-source-map',
+
+    // If you have problems debugging vue-files in devtools,
+    // set this to false - it *may* help
+    // https://vue-loader.vuejs.org/en/options.html#cachebusting
+    cacheBusting: true,
+
+    // CSS Sourcemaps off by default because relative paths are "buggy"
+    // with this option, according to the CSS-Loader README
+    // (https://github.com/webpack/css-loader#sourcemaps)
+    // In our experience, they generally work as expected,
+    // just be aware of this issue when enabling this option.
+    cssSourceMap: false,
+  },
+
+  build: {
+    // Template for index.html
+    index: path.resolve(__dirname, '../dist/index.html'),
+
+    // Paths
+    assetsRoot: path.resolve(__dirname, '../dist'),
+    assetsSubDirectory: 'static',
+
+    // you can set by youself according to actual condition
+    assetsPublicPath: './',
+
+    /**
+     * Source Maps
+     */
+
+    productionSourceMap: false,
+    // https://webpack.js.org/configuration/devtool/#production
+    devtool: '#source-map',
+
+    // Gzip off by default as many popular static hosts such as
+    // Surge or Netlify already gzip all static assets for you.
+    // Before setting to `true`, make sure to:
+    // npm install --save-dev compression-webpack-plugin
+    productionGzip: false,
+    productionGzipExtensions: ['js', 'css'],
+
+    // Run the build command with an extra argument to
+    // View the bundle analyzer report after build finishes:
+    // `npm run build --report`
+    // Set to `true` or `false` to always turn it on or off
+    bundleAnalyzerReport: process.env.npm_config_report
+  }
 }

config/prod.env.js

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

config/sit.env.js

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

index.html

@@ -1,17 +1,15 @@
 <!DOCTYPE html>
 <html>
-<head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-    <meta name="renderer" content="webkit">
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-    <title>Juicy</title>
-</head>
-<body>
-<script src=<%= htmlWebpackPlugin.options.path %>jquery.min.js></script>
-<script src=<%= htmlWebpackPlugin.options.path %>tinymce/tinymce.min.js></script>
-<div id="app"></div>
-<!-- built files will be auto injected -->
-</body>
-
+	<head>
+		<meta charset="utf-8">
+		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+		<meta name="renderer" content="webkit">
+		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+		<title>vue-element-admin</title>
+	</head>
+	<script src=<%= htmlWebpackPlugin.options.path %>/tinymce/tinymce.min.js></script>
+	<body>
+		<div id="app"></div>
+		<!-- built files will be auto injected -->
+	</body>
 </html>

package.json

@@ -1,94 +1,98 @@
 {
-  "name": "juicy",
-  "version": "1.0.1",
-  "description": "A Vue.js admin",
+  "name": "vue-element-admin",
+  "version": "3.4.1",
+  "description": "A magical vue admin. Typical templates for enterprise applications. Newest development stack of vue. Lots of awesome features",
   "author": "Pan <panfree23@gmail.com>",
   "license": "MIT",
   "private": true,
   "scripts": {
-    "dev": "node build/dev-server.js",
-    "build:prod": "cross-env NODE_ENV=production node build/build.js",
-    "build:sit": "cross-env NODE_ENV=sit node build/build.js",
-    "build:sit-preview": "cross-env NODE_ENV=sit npm_config_preview=true  npm_config_report=true node build/build.js",
-    "lint": "eslint --ext .js,.vue src"
+    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
+    "build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js",
+    "build:sit": "cross-env NODE_ENV=production env_config=sit node build/build.js",
+    "lint": "eslint --ext .js,.vue src",
+    "test": "npm run lint"
   },
   "dependencies": {
-    "axios": "0.15.3",
-    "codemirror": "5.25.2",
-    "dropzone": "4.3.0",
-    "echarts": "3.4.0",
-    "element-ui": "1.3.3",
+    "axios": "0.17.1",
+    "clipboard": "1.7.1",
+    "codemirror": "5.32.0",
+    "dropzone": "5.2.0",
+    "echarts": "3.8.5",
+    "element-ui": "2.0.8",
     "file-saver": "1.3.3",
-    "jquery": "3.1.1",
-    "js-cookie": "2.1.3",
+    "font-awesome": "4.7.0",
+    "js-cookie": "2.2.0",
     "jsonlint": "1.6.2",
+    "jszip": "3.1.5",
     "mockjs": "1.0.1-beta3",
-    "normalize.css": "3.0.2",
+    "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
+    "screenfull": "3.3.2",
+    "showdown": "1.8.5",
     "simplemde": "1.11.2",
-    "sortablejs": "1.5.1",
-    "vue": "2.3.3",
-    "vue-count-to": "1.0.5",
-    "vue-multiselect": "2.0.0-beta.15",
-    "vue-router": "2.5.3",
-    "vuedraggable": "2.8.4",
-    "vuex": "2.3.1",
-    "xlsx": "0.8.1"
+    "sortablejs": "1.7.0",
+    "vue": "2.5.10",
+    "vue-count-to": "1.0.13",
+    "vue-i18n": "7.3.2",
+    "vue-multiselect": "2.0.8",
+    "vue-router": "3.0.1",
+    "vue-splitpane": "1.0.2",
+    "vuedraggable": "2.15.0",
+    "vuex": "3.0.1",
+    "xlsx": "^0.11.7"
   },
   "devDependencies": {
-    "autoprefixer": "6.7.2",
-    "babel-core": "6.22.1",
-    "babel-eslint": "7.1.1",
-    "babel-loader": "6.2.10",
-    "babel-plugin-transform-runtime": "6.22.0",
-    "babel-preset-es2015": "6.22.0",
-    "babel-preset-stage-2": "6.22.0",
-    "babel-register": "6.22.0",
-    "chalk": "1.1.3",
-    "connect-history-api-fallback": "1.3.0",
-    "copy-webpack-plugin": "4.0.1",
-    "cross-env": "4.0.0",
-    "css-loader": "0.28.0",
-    "eslint": "3.19.0",
-    "eslint-friendly-formatter": "2.0.7",
-    "eslint-import-resolver-webpack": "0.8.1",
-    "eslint-loader": "1.7.1",
-    "eslint-plugin-html": "2.0.1",
-    "eslint-plugin-import": "2.2.0",
-    "eventsource-polyfill": "0.9.6",
-    "express": "4.14.1",
-    "extract-text-webpack-plugin": "2.0.0",
-    "file-loader": "0.10.0",
-    "friendly-errors-webpack-plugin": "1.1.3",
-    "function-bind": "1.1.0",
-    "html-webpack-plugin": "2.28.0",
-    "http-proxy-middleware": "0.17.3",
-    "node-sass": "4.5.2",
-    "opn": "4.0.2",
-    "optimize-css-assets-webpack-plugin": "1.3.0",
-    "ora": "1.1.0",
-    "pushstate-server": "2.1.0",
-    "rimraf": "2.6.0",
-    "sass-loader": "6.0.5",
-    "script-loader": "0.7.0",
-    "semver": "5.3.0",
-    "style-loader": "0.17.0",
-    "url-loader": "0.5.8",
-    "vue-loader": "12.0.4",
-    "vue-style-loader": "2.0.5",
-    "vue-template-compiler": "2.3.3",
-    "webpack": "2.5.1",
-    "webpack-bundle-analyzer": "2.2.1",
-    "webpack-dashboard": "0.2.1",
-    "webpack-dev-middleware": "1.10.0",
-    "webpack-hot-middleware": "2.18.0",
-    "webpack-merge": "4.1.0"
+    "autoprefixer": "7.2.3",
+    "babel-core": "6.26.0",
+    "babel-eslint": "8.0.3",
+    "babel-helper-vue-jsx-merge-props": "2.0.3",
+    "babel-loader": "7.1.2",
+    "babel-plugin-syntax-jsx": "6.18.0",
+    "babel-plugin-transform-runtime": "6.23.0",
+    "babel-plugin-transform-vue-jsx": "3.5.0",
+    "babel-preset-env": "1.6.1",
+    "babel-preset-stage-2": "6.24.1",
+    "chalk": "2.3.0",
+    "copy-webpack-plugin": "4.3.0",
+    "cross-env": "5.1.1",
+    "css-loader": "0.28.7",
+    "eslint": "4.13.1",
+    "eslint-friendly-formatter": "3.0.0",
+    "eslint-loader": "1.9.0",
+    "eslint-plugin-html": "4.0.1",
+    "extract-text-webpack-plugin": "3.0.2",
+    "file-loader": "1.1.5",
+    "friendly-errors-webpack-plugin": "1.6.1",
+    "html-webpack-plugin": "2.30.1",
+    "node-notifier": "5.1.2",
+    "node-sass": "^4.7.2",
+    "optimize-css-assets-webpack-plugin": "3.2.0",
+    "ora": "1.3.0",
+    "portfinder": "1.0.13",
+    "postcss-import": "11.0.0",
+    "postcss-loader": "2.0.9",
+    "pushstate-server": "3.0.1",
+    "rimraf": "2.6.2",
+    "sass-loader": "6.0.6",
+    "script-loader": "0.7.2",
+    "semver": "5.4.1",
+    "shelljs": "0.7.8",
+    "svg-sprite-loader": "3.5.2",
+    "uglifyjs-webpack-plugin": "1.1.3",
+    "url-loader": "0.6.2",
+    "vue-loader": "13.5.0",
+    "vue-style-loader": "3.0.3",
+    "vue-template-compiler": "2.5.10",
+    "webpack": "3.10.0",
+    "webpack-bundle-analyzer": "2.9.1",
+    "webpack-dev-server": "2.9.7",
+    "webpack-merge": "4.1.1"
   },
   "engines": {
     "node": ">= 4.0.0",
     "npm": ">= 3.0.0"
   },
-  "browserlist": [
+  "browserslist": [
     "> 1%",
     "last 2 versions",
     "not ie <= 8"

src/App.vue

@@ -1,11 +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'
-    }
+  export default{
+    name: 'APP'
+  }
 </script>

src/api/article.js

@@ -1,16 +1,40 @@
-import fetch from 'utils/fetch';
+import request from '@/utils/request'
 
-export function getList() {
-  return fetch({
+export function fetchList(query) {
+  return request({
     url: '/article/list',
-    method: 'get'
-  });
+    method: 'get',
+    params: query
+  })
 }
 
-export function getArticle() {
-  return fetch({
+export function fetchArticle() {
+  return request({
     url: '/article/detail',
     method: 'get'
-  });
+  })
 }
 
+export function fetchPv(pv) {
+  return request({
+    url: '/article/pv',
+    method: 'get',
+    params: { pv }
+  })
+}
+
+export function createArticle(data) {
+  return request({
+    url: '/article/create',
+    method: 'post',
+    data
+  })
+}
+
+export function updateArticle(data) {
+  return request({
+    url: '/article/update',
+    method: 'post',
+    data
+  })
+}

src/api/article_table.js

@@ -1,17 +0,0 @@
-import fetch from 'utils/fetch';
-
-export function fetchList(query) {
-  return fetch({
-    url: '/article_table/list',
-    method: 'get',
-    params: query
-  });
-}
-
-export function fetchPv(pv) {
-  return fetch({
-    url: '/article_table/pv',
-    method: 'get',
-    params: { pv }
-  });
-}

src/api/login.js

@@ -1,29 +1,29 @@
-import fetch from 'utils/fetch';
+import request from '@/utils/request'
 
-export function loginByEmail(email, password) {
+export function loginByUsername(username, password) {
   const data = {
-    email,
+    username,
     password
-  };
-  return fetch({
-    url: '/login/loginbyemail',
+  }
+  return request({
+    url: '/login/login',
     method: 'post',
     data
-  });
+  })
 }
 
 export function logout() {
-  return fetch({
+  return request({
     url: '/login/logout',
     method: 'post'
-  });
+  })
 }
 
-export function getInfo(token) {
-  return fetch({
+export function getUserInfo(token) {
+  return request({
     url: '/user/info',
     method: 'get',
     params: { token }
-  });
+  })
 }
 

src/api/qiniu.js

@@ -1,28 +1,8 @@
-// import fetch, { tpFetch } from 'utils/fetch';
+import request from '@/utils/request'
 
-// export function getToken() {
-//   return fetch({
-//     url: '/qiniu/upload/token',
-//     method: 'get'
-//   });
-// }
-// export function upload(data) {
-//   return tpFetch({
-//     url: 'https://upload.qbox.me',
-//     method: 'post',
-//     data
-//   });
-// }
-
-
-// /* 外部uri转七牛uri*/
-// export function netUpload(token, net_url) {
-//   const imgData = {
-//     net_url
-//   };
-//   return fetch({
-//     url: '/qiniu/upload/net/async',
-//     method: 'post',
-//     data: imgData
-//   });
-// }
+export function getToken() {
+  return request({
+    url: '/qiniu/upload/token', // 假地址 自行替换
+    method: 'get'
+  })
+}

src/api/remoteSearch.js

@@ -1,9 +1,9 @@
-import fetch from 'utils/fetch';
+import request from '@/utils/request'
 
 export function userSearch(name) {
-  return fetch({
+  return request({
     url: '/search/user',
     method: 'get',
     params: { name }
-  });
+  })
 }

src/api/transaction.js

@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+export function fetchList(query) {
+  return request({
+    url: '/transaction/list',
+    method: 'get',
+    params: query
+  })
+}

src/assets/echarts-macarons.js

@@ -0,0 +1,199 @@
+/* eslint-disable */
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        // AMD. Register as an anonymous module.
+        define(['exports', 'echarts'], factory);
+    } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
+        // CommonJS
+        factory(exports, require('echarts'));
+    } else {
+        // Browser globals
+        factory({}, root.echarts);
+    }
+}(this, function (exports, echarts) {
+    var log = function (msg) {
+        if (typeof console !== 'undefined') {
+            console && console.error && console.error(msg);
+        }
+    };
+    if (!echarts) {
+        log('ECharts is not Loaded');
+        return;
+    }
+
+    var colorPalette = [
+        '#2ec7c9','#b6a2de','#5ab1ef','#ffb980','#d87a80',
+        '#8d98b3','#e5cf0d','#97b552','#95706d','#dc69aa',
+        '#07a2a4','#9a7fd1','#588dd5','#f5994e','#c05050',
+        '#59678c','#c9ab00','#7eb00a','#6f5553','#c14089'
+    ];
+
+
+    var theme = {
+        color: colorPalette,
+
+        title: {
+            textStyle: {
+                fontWeight: 'normal',
+                color: '#008acd'
+            }
+        },
+
+        visualMap: {
+            itemWidth: 15,
+            color: ['#5ab1ef','#e0ffff']
+        },
+
+        toolbox: {
+            iconStyle: {
+                normal: {
+                    borderColor: colorPalette[0]
+                }
+            }
+        },
+
+        tooltip: {
+            backgroundColor: 'rgba(50,50,50,0.5)',
+            axisPointer : {
+                type : 'line',
+                lineStyle : {
+                    color: '#008acd'
+                },
+                crossStyle: {
+                    color: '#008acd'
+                },
+                shadowStyle : {
+                    color: 'rgba(200,200,200,0.2)'
+                }
+            }
+        },
+
+        dataZoom: {
+            dataBackgroundColor: '#efefff',
+            fillerColor: 'rgba(182,162,222,0.2)',
+            handleColor: '#008acd'
+        },
+
+        grid: {
+            borderColor: '#eee'
+        },
+
+        categoryAxis: {
+            axisLine: {
+                lineStyle: {
+                    color: '#008acd'
+                }
+            },
+            splitLine: {
+                lineStyle: {
+                    color: ['#eee']
+                }
+            }
+        },
+
+        valueAxis: {
+            axisLine: {
+                lineStyle: {
+                    color: '#008acd'
+                }
+            },
+            splitArea : {
+                show : true,
+                areaStyle : {
+                    color: ['rgba(250,250,250,0.1)','rgba(200,200,200,0.1)']
+                }
+            },
+            splitLine: {
+                lineStyle: {
+                    color: ['#eee']
+                }
+            }
+        },
+
+        timeline : {
+            lineStyle : {
+                color : '#008acd'
+            },
+            controlStyle : {
+                normal : { color : '#008acd'},
+                emphasis : { color : '#008acd'}
+            },
+            symbol : 'emptyCircle',
+            symbolSize : 3
+        },
+
+        line: {
+            smooth : true,
+            symbol: 'emptyCircle',
+            symbolSize: 3
+        },
+
+        candlestick: {
+            itemStyle: {
+                normal: {
+                    color: '#d87a80',
+                    color0: '#2ec7c9',
+                    lineStyle: {
+                        color: '#d87a80',
+                        color0: '#2ec7c9'
+                    }
+                }
+            }
+        },
+
+        scatter: {
+            symbol: 'circle',
+            symbolSize: 4
+        },
+
+        map: {
+            label: {
+                normal: {
+                    textStyle: {
+                        color: '#d87a80'
+                    }
+                }
+            },
+            itemStyle: {
+                normal: {
+                    borderColor: '#eee',
+                    areaColor: '#ddd'
+                },
+                emphasis: {
+                    areaColor: '#fe994e'
+                }
+            }
+        },
+
+        graph: {
+            color: colorPalette
+        },
+
+        gauge : {
+            axisLine: {
+                lineStyle: {
+                    color: [[0.2, '#2ec7c9'],[0.8, '#5ab1ef'],[1, '#d87a80']],
+                    width: 10
+                }
+            },
+            axisTick: {
+                splitNumber: 10,
+                length :15,
+                lineStyle: {
+                    color: 'auto'
+                }
+            },
+            splitLine: {
+                length :22,
+                lineStyle: {
+                    color: 'auto'
+                }
+            },
+            pointer : {
+                width : 5
+            }
+        }
+    };
+
+    echarts.registerTheme('macarons', theme);
+}));

src/components/BackToTop/index.vue

@@ -0,0 +1,110 @@
+<template>
+  <transition :name="transitionName">
+    <div class="back-to-ceiling" @click="backToTop" v-show="visible" :style="customStyle">
+      <svg width="16" height="16" viewBox="0 0 17 17" xmlns="http://www.w3.org/2000/svg" class="Icon Icon--backToTopArrow" aria-hidden="true" style="height: 16px; width: 16px;">
+        <title>回到顶部</title>
+        <g>
+          <path d="M12.036 15.59c0 .55-.453.995-.997.995H5.032c-.55 0-.997-.445-.997-.996V8.584H1.03c-1.1 0-1.36-.633-.578-1.416L7.33.29c.39-.39 1.026-.385 1.412 0l6.878 6.88c.782.78.523 1.415-.58 1.415h-3.004v7.004z" fill-rule="evenodd"></path>
+        </g>
+      </svg>
+    </div>
+  </transition>
+</template>
+
+<script>
+export default {
+  name: 'BackToTop',
+  props: {
+    visibilityHeight: {
+      type: Number,
+      default: 400
+    },
+    backPosition: {
+      type: Number,
+      default: 0
+    },
+    customStyle: {
+      type: Object,
+      default: {
+        right: '50px',
+        bottom: '50px',
+        width: '40px',
+        height: '40px',
+        'border-radius': '4px',
+        'line-height': '45px',
+        background: '#e7eaf1'
+      }
+    },
+    transitionName: {
+      type: String,
+      default: 'fade'
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      interval: null
+    }
+  },
+  mounted() {
+    window.addEventListener('scroll', this.handleScroll)
+  },
+  beforeDestroy() {
+    window.removeEventListener('scroll', this.handleScroll)
+    if (this.interval) {
+      clearInterval(this.interval)
+    }
+  },
+  methods: {
+    handleScroll() {
+      this.visible = window.pageYOffset > this.visibilityHeight
+    },
+    backToTop() {
+      const start = window.pageYOffset
+      let i = 0
+      this.interval = setInterval(() => {
+        const next = Math.floor(this.easeInOutQuad(10 * i, start, -start, 500))
+        if (next <= this.backPosition) {
+          window.scrollTo(0, this.backPosition)
+          clearInterval(this.interval)
+        } else {
+          window.scrollTo(0, next)
+        }
+        i++
+      }, 16.7)
+    },
+    easeInOutQuad(t, b, c, d) {
+      if ((t /= d / 2) < 1) return c / 2 * t * t + b
+      return -c / 2 * (--t * (t - 2) - 1) + b
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .back-to-ceiling {
+    position: fixed;
+    display: inline-block;
+    text-align: center;
+    cursor: pointer;
+  }
+
+  .back-to-ceiling:hover {
+    background: #d5dbe7;
+  }
+
+  .fade-enter-active,
+  .fade-leave-active {
+    transition: opacity .5s;
+  }
+
+  .fade-enter,
+  .fade-leave-to {
+    opacity: 0
+  }
+
+  .back-to-ceiling .Icon {
+    fill: #9aaabf;
+    background: none;
+  }
+</style>

src/components/Breadcrumb/index.vue

@@ -0,0 +1,54 @@
+<template>
+  <el-breadcrumb class="app-breadcrumb" separator="/">
+    <transition-group name="breadcrumb">
+      <el-breadcrumb-item v-for="(item,index)  in levelList" :key="item.path" v-if='item.meta.title'>
+        <span v-if='item.redirect==="noredirect"||index==levelList.length-1' class="no-redirect">{{generateTitle(item.meta.title)}}</span>
+        <router-link v-else :to="item.redirect||item.path">{{generateTitle(item.meta.title)}}</router-link>
+      </el-breadcrumb-item>
+    </transition-group>
+  </el-breadcrumb>
+</template>
+
+<script>
+import { generateTitle } from '@/utils/i18n'
+
+export default {
+  created() {
+    this.getBreadcrumb()
+  },
+  data() {
+    return {
+      levelList: null
+    }
+  },
+  watch: {
+    $route() {
+      this.getBreadcrumb()
+    }
+  },
+  methods: {
+    generateTitle,
+    getBreadcrumb() {
+      let matched = this.$route.matched.filter(item => item.name)
+      const first = matched[0]
+      if (first && first.name !== 'dashboard') {
+        matched = [{ path: '/dashboard', meta: { title: 'dashboard' }}].concat(matched)
+      }
+      this.levelList = matched
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .app-breadcrumb.el-breadcrumb {
+    display: inline-block;
+    font-size: 14px;
+    line-height: 50px;
+    margin-left: 10px;
+    .no-redirect {
+      color: #97a8be;
+      cursor: text;
+    }
+  }
+</style>

src/components/Charts/barPercent.vue

@@ -1,104 +0,0 @@
-<template>
-    <div :class="className" :id="id" :style="{height:height,width:width}"></div>
-</template>
-<script>
-    // 引入 ECharts 主模块
-    const echarts = require('echarts/lib/echarts');
-    // 引入柱状图
-    require('echarts/lib/chart/bar');
-    // 引入提示框和标题组件
-    require('echarts/lib/component/tooltip');
-    export default {
-      name: 'barPercent',
-      props: {
-        className: {
-          type: String,
-          default: 'bar-percent-chart'
-        },
-        id: {
-          type: String,
-          default: 'bar-percent-chart'
-        },
-        width: {
-          type: String,
-          default: '100px'
-        },
-        height: {
-          type: String,
-          default: '80px'
-        },
-        dataNum: {
-          type: Number,
-          default: 0
-        }
-      },
-      data() {
-        return {
-          chart: null
-        };
-      },
-      watch: {
-        dataNum() {
-          this.setOptions()
-        }
-      },
-      mounted() {
-        this.initBar();
-      },
-      methods: {
-        initBar() {
-          this.chart = echarts.init(document.getElementById(this.id));
-          this.setOptions();
-        },
-        setOptions() {
-          this.chart.setOption({
-            tooltip: {
-              show: true,
-              formatter(params) {
-                return '已完成' + params.value + '篇<br/>目标90篇<br/>完成进度' + Math.round((params.value / 90) * 100) + '%'
-              }
-            },
-            grid: {
-              left: 0,
-              right: 0,
-              bottom: 0,
-              top: 0,
-              containLabel: false
-            },
-            xAxis: [{
-              type: 'category',
-              data: ['文章完成比例']
-            }],
-            yAxis: [{
-              type: 'value',
-              data: [],
-              show: false
-            }],
-            animationDelay: 1000,
-            series: [{
-              type: 'bar',
-              name: '初诊',
-              itemStyle: {
-                normal: {
-                  color: '#e5e5e5'
-                }
-              },
-              silent: true,
-              barGap: '-100%', // Make series be overlap
-              data: [150]
-            }, {
-              type: 'bar',
-              name: 'app',
-              itemStyle: {
-                normal: {
-                  color: '#30b08f'
-                }
-              },
-              z: 10,
-              data: [this.dataNum]
-            }]
-          })
-        }
-      }
-    }
-</script>

src/components/Charts/keyboard.vue

@@ -1,112 +1,150 @@
 <template>
-    <div :class="className" :id="id" :style="{height:height,width:width}"></div>
+  <div :class="className" :id="id" :style="{height:height,width:width}"></div>
 </template>
+
 <script>
-    // 引入 ECharts 主模块
-    const echarts = require('echarts/lib/echarts');
-    // 引入柱状图
-    require('echarts/lib/chart/bar');
-    require('echarts/lib/chart/line');
-    // 引入提示框和标题组件
-    require('echarts/lib/component/tooltip');
-    require('echarts/lib/component/title');
+import echarts from 'echarts'
 
-    require('echarts/lib/component/visualMap');
-    export default {
-      name: 'barPercent',
-      props: {
-        className: {
-          type: String,
-          default: 'chart'
-        },
-        id: {
-          type: String,
-          default: 'chart'
-        },
-        width: {
-          type: String,
-          default: '200px'
-        },
-        height: {
-          type: String,
-          default: '200px'
-        }
-      },
-      data() {
-        return {};
-      },
-      mounted() {
-        this.initBar();
-      },
-      methods: {
-        initBar() {
-          this.chart = echarts.init(document.getElementById(this.id));
-
-          const xAxisData = [];
-          const data = [];
-          for (let i = 0; i < 30; i++) {
-            xAxisData.push(i + '号');
-            data.push(Math.round(Math.random() * 2 + 3))
-          }
-
-          this.chart.setOption(
-            {
-              backgroundColor: '#08263a',
-              tooltip: {
-                trigger: 'axis'
-              },
-              xAxis: {
-                show: false,
-                data: xAxisData
-              },
-              visualMap: {
-                show: false,
-                min: 0,
-                max: 50,
-                dimension: 0,
-                inRange: {
-                  color: ['#4a657a', '#308e92', '#b1cfa5', '#f5d69f', '#f5898b', '#ef5055']
-                }
-              },
-              yAxis: {
-                axisLine: {
-                  show: false
-                },
-                axisLabel: {
-                  textStyle: {
-                    color: '#4a657a'
-                  }
-                },
-                splitLine: {
-                  show: true,
-                  lineStyle: {
-                    color: '#08263f'
-                  }
-                },
-                axisTick: {}
-              },
-              series: [{
-                type: 'bar',
-                data,
-                name: '撸文数',
-                itemStyle: {
-                  normal: {
-                    barBorderRadius: 5,
-                    shadowBlur: 10,
-                    shadowColor: '#111'
-                  }
-                },
-                animationEasing: 'elasticOut',
-                animationEasingUpdate: 'elasticOut',
-                animationDelay(idx) {
-                  return idx * 20;
-                },
-                animationDelayUpdate(idx) {
-                  return idx * 20;
-                }
-              }]
-            })
-        }
-      }
+export default {
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    id: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '200px'
+    },
+    height: {
+      type: String,
+      default: '200px'
     }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(document.getElementById(this.id))
+
+      const xAxisData = []
+      const data = []
+      const data2 = []
+      for (let i = 0; i < 50; i++) {
+        xAxisData.push(i)
+        data.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5)
+        data2.push((Math.sin(i / 5) * (i / 5 + 10) + i / 6) * 3)
+      }
+      this.chart.setOption(
+        {
+          backgroundColor: '#08263a',
+          xAxis: [{
+            show: false,
+            data: xAxisData
+          }, {
+            show: false,
+            data: xAxisData
+          }],
+          visualMap: {
+            show: false,
+            min: 0,
+            max: 50,
+            dimension: 0,
+            inRange: {
+              color: ['#4a657a', '#308e92', '#b1cfa5', '#f5d69f', '#f5898b', '#ef5055']
+            }
+          },
+          yAxis: {
+            axisLine: {
+              show: false
+            },
+            axisLabel: {
+              textStyle: {
+                color: '#4a657a'
+              }
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: '#08263f'
+              }
+            },
+            axisTick: {
+              show: false
+            }
+          },
+          series: [{
+            name: 'back',
+            type: 'bar',
+            data: data2,
+            z: 1,
+            itemStyle: {
+              normal: {
+                opacity: 0.4,
+                barBorderRadius: 5,
+                shadowBlur: 3,
+                shadowColor: '#111'
+              }
+            }
+          }, {
+            name: 'Simulate Shadow',
+            type: 'line',
+            data,
+            z: 2,
+            showSymbol: false,
+            animationDelay: 0,
+            animationEasing: 'linear',
+            animationDuration: 1200,
+            lineStyle: {
+              normal: {
+                color: 'transparent'
+              }
+            },
+            areaStyle: {
+              normal: {
+                color: '#08263a',
+                shadowBlur: 50,
+                shadowColor: '#000'
+              }
+            }
+          }, {
+            name: 'front',
+            type: 'bar',
+            data,
+            xAxisIndex: 1,
+            z: 3,
+            itemStyle: {
+              normal: {
+                barBorderRadius: 5
+              }
+            }
+          }],
+          animationEasing: 'elasticOut',
+          animationEasingUpdate: 'elasticOut',
+          animationDelay(idx) {
+            return idx * 20
+          },
+          animationDelayUpdate(idx) {
+            return idx * 20
+          }
+        })
+    }
+  }
+}
 </script>

src/components/Charts/keyboard2.vue

@@ -1,149 +0,0 @@
-<template>
-    <div :class="className" :id="id" :style="{height:height,width:width}"></div>
-</template>
-<script>
-    // 引入 ECharts 主模块
-    const echarts = require('echarts/lib/echarts');
-    // 引入柱状图
-    require('echarts/lib/chart/bar');
-    require('echarts/lib/chart/line');
-    // 引入提示框和标题组件
-    require('echarts/lib/component/tooltip');
-    require('echarts/lib/component/title');
-
-    require('echarts/lib/component/visualMap');
-    export default {
-      name: 'barPercent',
-      props: {
-        className: {
-          type: String,
-          default: 'chart'
-        },
-        id: {
-          type: String,
-          default: 'chart'
-        },
-        width: {
-          type: String,
-          default: '200px'
-        },
-        height: {
-          type: String,
-          default: '200px'
-        }
-      },
-      data() {
-        return {};
-      },
-      mounted() {
-        this.initBar();
-      },
-      methods: {
-        initBar() {
-          this.chart = echarts.init(document.getElementById(this.id));
-
-          const xAxisData = [];
-          const data = [];
-          const data2 = [];
-          for (let i = 0; i < 50; i++) {
-            xAxisData.push(i);
-            data.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5);
-            data2.push((Math.sin(i / 5) * (i / 5 + 10) + i / 6) * 3);
-          }
-          this.chart.setOption(
-            {
-              backgroundColor: '#08263a',
-              xAxis: [{
-                show: false,
-                data: xAxisData
-              }, {
-                show: false,
-                data: xAxisData
-              }],
-              visualMap: {
-                show: false,
-                min: 0,
-                max: 50,
-                dimension: 0,
-                inRange: {
-                  color: ['#4a657a', '#308e92', '#b1cfa5', '#f5d69f', '#f5898b', '#ef5055']
-                }
-              },
-              yAxis: {
-                axisLine: {
-                  show: false
-                },
-                axisLabel: {
-                  textStyle: {
-                    color: '#4a657a'
-                  }
-                },
-                splitLine: {
-                  show: true,
-                  lineStyle: {
-                    color: '#08263f'
-                  }
-                },
-                axisTick: {
-                  show: false
-                }
-              },
-              series: [{
-                name: 'back',
-                type: 'bar',
-                data: data2,
-                z: 1,
-                itemStyle: {
-                  normal: {
-                    opacity: 0.4,
-                    barBorderRadius: 5,
-                    shadowBlur: 3,
-                    shadowColor: '#111'
-                  }
-                }
-              }, {
-                name: 'Simulate Shadow',
-                type: 'line',
-                data,
-                z: 2,
-                showSymbol: false,
-                animationDelay: 0,
-                animationEasing: 'linear',
-                animationDuration: 1200,
-                lineStyle: {
-                  normal: {
-                    color: 'transparent'
-                  }
-                },
-                areaStyle: {
-                  normal: {
-                    color: '#08263a',
-                    shadowBlur: 50,
-                    shadowColor: '#000'
-                  }
-                }
-              }, {
-                name: 'front',
-                type: 'bar',
-                data,
-                xAxisIndex: 1,
-                z: 3,
-                itemStyle: {
-                  normal: {
-                    barBorderRadius: 5
-                  }
-                }
-              }],
-              animationEasing: 'elasticOut',
-              animationEasingUpdate: 'elasticOut',
-              animationDelay(idx) {
-                return idx * 20;
-              },
-              animationDelayUpdate(idx) {
-                return idx * 20;
-              }
-            })
-        }
-      }
-    }
-</script>

src/components/Charts/line.vue

@@ -1,146 +0,0 @@
-<template>
-    <div :class="className" :id="id" :style="{height:height,width:width}"></div>
-</template>
-<script>
-    // 引入 ECharts 主模块
-    const echarts = require('echarts/lib/echarts');
-    // 引入图
-    require('echarts/lib/chart/line');
-    // 引入提示框和标题组件
-    require('echarts/lib/component/markLine');
-    require('echarts/lib/component/markPoint');
-    require('echarts/lib/component/tooltip');
-    export default {
-      name: 'lineChart',
-      props: {
-        className: {
-          type: String,
-          default: 'line-chart'
-        },
-        id: {
-          type: String,
-          default: 'line-chart'
-        },
-        width: {
-          type: String,
-          default: '100%'
-        },
-        height: {
-          type: String,
-          default: '280px'
-        },
-        listData: {
-          type: Array,
-          require: true
-        }
-      },
-      data() {
-        return {
-          chart: null
-        };
-      },
-      watch: {
-        listData(dataList) {
-          this.setLine(dataList)
-        }
-      },
-      mounted() {
-        this.chart = echarts.init(document.getElementById(this.id));
-        this.setLine(this.listData);
-      },
-      methods: {
-        setLine(dataList) {
-          const xAxisData = [];
-          const data = [];
-          for (let i = 0; i < dataList.length; i++) {
-            const item = dataList[i]
-            xAxisData.push(item.week.substring(item.week.length - 2) + '周');
-            data.push(item.count)
-          }
-          const markLineData = [];
-          for (let i = 1; i < data.length; i++) {
-            markLineData.push([{
-              xAxis: i - 1,
-              yAxis: data[i - 1],
-              value: data[i] - data[i - 1]
-            }, {
-              xAxis: i,
-              yAxis: data[i]
-            }]);
-          }
-          this.chart.setOption({
-            title: {
-              text: 'Awesome Chart'
-            },
-            grid: {
-              left: 0,
-              right: 0,
-              bottom: 20,
-
-              containLabel: true
-            },
-            tooltip: {
-              trigger: 'axis'
-            },
-            animationDelay: 1000,
-            xAxis: {
-              data: xAxisData,
-              axisLine: {
-                show: false
-              },
-              axisTick: {
-                show: false
-              }
-//                        axisLabel:{
-//                            show:false
-//                        },
-            },
-
-            yAxis: {
-              splitLine: {
-                show: false
-              },
-              show: false
-              // min: 90
-            },
-            series: [{
-              name: '撸文数',
-              type: 'line',
-              data,
-              markPoint: {
-                data: [
-                    { type: 'max', name: '最大值' },
-                    { type: 'min', name: '最小值' }
-                ]
-              },
-              itemStyle: {
-                normal: {
-                  color: '#30b08f'
-                }
-              },
-              markLine: {
-                silent: true,
-                smooth: true,
-                effect: {
-                  show: true
-                },
-                animationDuration(idx) {
-                  return idx * 100;
-                },
-                animationDelay: 1000,
-                animationEasing: 'quadraticInOut',
-                distance: 1,
-                label: {
-                  normal: {
-                    position: 'middle'
-                  }
-                },
-                symbol: ['none', 'none'],
-                data: markLineData
-              }
-            }]
-          })
-        }
-      }
-    }
-</script>

src/components/Charts/lineMarker.vue

@@ -1,219 +1,222 @@
 <template>
-    <div :class="className" :id="id" :style="{height:height,width:width}"></div>
+  <div :class="className" :id="id" :style="{height:height,width:width}"></div>
 </template>
+
 <script>
-    // 引入 ECharts 主模块
-    const echarts = require('echarts/lib/echarts');
+import echarts from 'echarts'
 
-    require('echarts/lib/chart/line');
-    // 引入提示框和标题组件
-    require('echarts/lib/component/tooltip');
-    require('echarts/lib/component/title');
-    require('echarts/lib/component/legend');
-    export default {
-      name: 'barPercent',
-      props: {
-        className: {
-          type: String,
-          default: 'chart'
-        },
-        id: {
-          type: String,
-          default: 'chart'
-        },
-        width: {
-          type: String,
-          default: '200px'
-        },
-        height: {
-          type: String,
-          default: '200px'
-        }
-      },
-      data() {
-        return {};
-      },
-      mounted() {
-        this.initChart();
-      },
-      methods: {
-        initChart() {
-          this.chart = echarts.init(document.getElementById(this.id));
-
-          this.chart.setOption({
-            backgroundColor: '#394056',
-            title: {
-              text: '请求数',
-              textStyle: {
-                fontWeight: 'normal',
-                fontSize: 16,
-                color: '#F1F1F3'
-              },
-              left: '6%'
-            },
-            tooltip: {
-              trigger: 'axis',
-              axisPointer: {
-                lineStyle: {
-                  color: '#57617B'
-                }
-              }
-            },
-            legend: {
-              icon: 'rect',
-              itemWidth: 14,
-              itemHeight: 5,
-              itemGap: 13,
-              data: ['移动', '电信', '联通'],
-              right: '4%',
-              textStyle: {
-                fontSize: 12,
-                color: '#F1F1F3'
-              }
-            },
-            grid: {
-              left: '3%',
-              right: '4%',
-              bottom: '3%',
-              containLabel: true
-            },
-            xAxis: [{
-              type: 'category',
-              boundaryGap: false,
-              axisLine: {
-                lineStyle: {
-                  color: '#57617B'
-                }
-              },
-              data: ['13:00', '13:05', '13:10', '13:15', '13:20', '13:25', '13:30', '13:35', '13:40', '13:45', '13:50', '13:55']
-            }],
-            yAxis: [{
-              type: 'value',
-              name: '单位（%）',
-              axisTick: {
-                show: false
-              },
-              axisLine: {
-                lineStyle: {
-                  color: '#57617B'
-                }
-              },
-              axisLabel: {
-                margin: 10,
-                textStyle: {
-                  fontSize: 14
-                }
-              },
-              splitLine: {
-                lineStyle: {
-                  color: '#57617B'
-                }
-              }
-            }],
-            series: [{
-              name: '移动',
-              type: 'line',
-              smooth: true,
-              symbol: 'circle',
-              symbolSize: 5,
-              showSymbol: false,
-              lineStyle: {
-                normal: {
-                  width: 1
-                }
-              },
-              areaStyle: {
-                normal: {
-                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                    offset: 0,
-                    color: 'rgba(137, 189, 27, 0.3)'
-                  }, {
-                    offset: 0.8,
-                    color: 'rgba(137, 189, 27, 0)'
-                  }], false),
-                  shadowColor: 'rgba(0, 0, 0, 0.1)',
-                  shadowBlur: 10
-                }
-              },
-              itemStyle: {
-                normal: {
-                  color: 'rgb(137,189,27)',
-                  borderColor: 'rgba(137,189,2,0.27)',
-                  borderWidth: 12
-
-                }
-              },
-              data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122]
-            }, {
-              name: '电信',
-              type: 'line',
-              smooth: true,
-              symbol: 'circle',
-              symbolSize: 5,
-              showSymbol: false,
-              lineStyle: {
-                normal: {
-                  width: 1
-                }
-              },
-              areaStyle: {
-                normal: {
-                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                    offset: 0,
-                    color: 'rgba(0, 136, 212, 0.3)'
-                  }, {
-                    offset: 0.8,
-                    color: 'rgba(0, 136, 212, 0)'
-                  }], false),
-                  shadowColor: 'rgba(0, 0, 0, 0.1)',
-                  shadowBlur: 10
-                }
-              },
-              itemStyle: {
-                normal: {
-                  color: 'rgb(0,136,212)',
-                  borderColor: 'rgba(0,136,212,0.2)',
-                  borderWidth: 12
-
-                }
-              },
-              data: [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150]
-            }, {
-              name: '联通',
-              type: 'line',
-              smooth: true,
-              symbol: 'circle',
-              symbolSize: 5,
-              showSymbol: false,
-              lineStyle: {
-                normal: {
-                  width: 1
-                }
-              },
-              areaStyle: {
-                normal: {
-                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                    offset: 0,
-                    color: 'rgba(219, 50, 51, 0.3)'
-                  }, {
-                    offset: 0.8,
-                    color: 'rgba(219, 50, 51, 0)'
-                  }], false),
-                  shadowColor: 'rgba(0, 0, 0, 0.1)',
-                  shadowBlur: 10
-                }
-              },
-              itemStyle: {
-                normal: {
-                  color: 'rgb(219,50,51)',
-                  borderColor: 'rgba(219,50,51,0.2)',
-                  borderWidth: 12
-                }
-              },
-              data: [220, 182, 125, 145, 122, 191, 134, 150, 120, 110, 165, 122]
-            }]
-          })
-        }
-      }
+export default {
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    id: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '200px'
+    },
+    height: {
+      type: String,
+      default: '200px'
     }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(document.getElementById(this.id))
+
+      this.chart.setOption({
+        backgroundColor: '#394056',
+        title: {
+          text: '请求数',
+          textStyle: {
+            fontWeight: 'normal',
+            fontSize: 16,
+            color: '#F1F1F3'
+          },
+          left: '6%'
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            lineStyle: {
+              color: '#57617B'
+            }
+          }
+        },
+        legend: {
+          icon: 'rect',
+          itemWidth: 14,
+          itemHeight: 5,
+          itemGap: 13,
+          data: ['移动', '电信', '联通'],
+          right: '4%',
+          textStyle: {
+            fontSize: 12,
+            color: '#F1F1F3'
+          }
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: [{
+          type: 'category',
+          boundaryGap: false,
+          axisLine: {
+            lineStyle: {
+              color: '#57617B'
+            }
+          },
+          data: ['13:00', '13:05', '13:10', '13:15', '13:20', '13:25', '13:30', '13:35', '13:40', '13:45', '13:50', '13:55']
+        }],
+        yAxis: [{
+          type: 'value',
+          name: '单位（%）',
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#57617B'
+            }
+          },
+          axisLabel: {
+            margin: 10,
+            textStyle: {
+              fontSize: 14
+            }
+          },
+          splitLine: {
+            lineStyle: {
+              color: '#57617B'
+            }
+          }
+        }],
+        series: [{
+          name: '移动',
+          type: 'line',
+          smooth: true,
+          symbol: 'circle',
+          symbolSize: 5,
+          showSymbol: false,
+          lineStyle: {
+            normal: {
+              width: 1
+            }
+          },
+          areaStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                offset: 0,
+                color: 'rgba(137, 189, 27, 0.3)'
+              }, {
+                offset: 0.8,
+                color: 'rgba(137, 189, 27, 0)'
+              }], false),
+              shadowColor: 'rgba(0, 0, 0, 0.1)',
+              shadowBlur: 10
+            }
+          },
+          itemStyle: {
+            normal: {
+              color: 'rgb(137,189,27)',
+              borderColor: 'rgba(137,189,2,0.27)',
+              borderWidth: 12
+
+            }
+          },
+          data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122]
+        }, {
+          name: '电信',
+          type: 'line',
+          smooth: true,
+          symbol: 'circle',
+          symbolSize: 5,
+          showSymbol: false,
+          lineStyle: {
+            normal: {
+              width: 1
+            }
+          },
+          areaStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                offset: 0,
+                color: 'rgba(0, 136, 212, 0.3)'
+              }, {
+                offset: 0.8,
+                color: 'rgba(0, 136, 212, 0)'
+              }], false),
+              shadowColor: 'rgba(0, 0, 0, 0.1)',
+              shadowBlur: 10
+            }
+          },
+          itemStyle: {
+            normal: {
+              color: 'rgb(0,136,212)',
+              borderColor: 'rgba(0,136,212,0.2)',
+              borderWidth: 12
+
+            }
+          },
+          data: [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150]
+        }, {
+          name: '联通',
+          type: 'line',
+          smooth: true,
+          symbol: 'circle',
+          symbolSize: 5,
+          showSymbol: false,
+          lineStyle: {
+            normal: {
+              width: 1
+            }
+          },
+          areaStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                offset: 0,
+                color: 'rgba(219, 50, 51, 0.3)'
+              }, {
+                offset: 0.8,
+                color: 'rgba(219, 50, 51, 0)'
+              }], false),
+              shadowColor: 'rgba(0, 0, 0, 0.1)',
+              shadowBlur: 10
+            }
+          },
+          itemStyle: {
+            normal: {
+              color: 'rgb(219,50,51)',
+              borderColor: 'rgba(219,50,51,0.2)',
+              borderWidth: 12
+            }
+          },
+          data: [220, 182, 125, 145, 122, 191, 134, 150, 120, 110, 165, 122]
+        }]
+      })
+    }
+  }
+}
 </script>

src/components/Charts/mixChart.vue

@@ -0,0 +1,267 @@
+<template>
+  <div :class="className" :id="id" :style="{height:height,width:width}"></div>
+</template>
+
+<script>
+import echarts from 'echarts'
+
+export default {
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    id: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '200px'
+    },
+    height: {
+      type: String,
+      default: '200px'
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.initChart()
+    this.chart = null
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(document.getElementById(this.id))
+      const xData = (function() {
+        const data = []
+        for (let i = 1; i < 13; i++) {
+          data.push(i + '月份')
+        }
+        return data
+      }())
+      this.chart.setOption({
+        backgroundColor: '#344b58',
+        title: {
+          text: '统计',
+          x: '4%',
+          textStyle: {
+            color: '#fff',
+            fontSize: '22'
+          },
+          subtextStyle: {
+            color: '#90979c',
+            fontSize: '16'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            textStyle: {
+              color: '#fff'
+            }
+          }
+        },
+        grid: {
+          borderWidth: 0,
+          top: 110,
+          bottom: 95,
+          textStyle: {
+            color: '#fff'
+          }
+        },
+        legend: {
+          x: '15%',
+          top: '10%',
+          textStyle: {
+            color: '#90979c'
+          },
+          data: ['女', '男', '平均']
+        },
+        calculable: true,
+        xAxis: [{
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#90979c'
+            }
+          },
+          splitLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          splitArea: {
+            show: false
+          },
+          axisLabel: {
+            interval: 0
+
+          },
+          data: xData
+        }],
+        yAxis: [{
+          type: 'value',
+          splitLine: {
+            show: false
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#90979c'
+            }
+          },
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            interval: 0
+          },
+          splitArea: {
+            show: false
+          }
+        }],
+        dataZoom: [{
+          show: true,
+          height: 30,
+          xAxisIndex: [
+            0
+          ],
+          bottom: 30,
+          start: 10,
+          end: 80,
+          handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
+          handleSize: '110%',
+          handleStyle: {
+            color: '#d3dee5'
+
+          },
+          textStyle: {
+            color: '#fff' },
+          borderColor: '#90979c'
+
+        }, {
+          type: 'inside',
+          show: true,
+          height: 15,
+          start: 1,
+          end: 35
+        }],
+        series: [{
+          name: '女',
+          type: 'bar',
+          stack: '总量',
+          barMaxWidth: 35,
+          barGap: '10%',
+          itemStyle: {
+            normal: {
+              color: 'rgba(255,144,128,1)',
+              label: {
+                show: true,
+                textStyle: {
+                  color: '#fff'
+                },
+                position: 'insideTop',
+                formatter(p) {
+                  return p.value > 0 ? p.value : ''
+                }
+              }
+            }
+          },
+          data: [
+            709,
+            1917,
+            2455,
+            2610,
+            1719,
+            1433,
+            1544,
+            3285,
+            5208,
+            3372,
+            2484,
+            4078
+          ]
+        },
+
+        {
+          name: '男',
+          type: 'bar',
+          stack: '总量',
+          itemStyle: {
+            normal: {
+              color: 'rgba(0,191,183,1)',
+              barBorderRadius: 0,
+              label: {
+                show: true,
+                position: 'top',
+                formatter(p) {
+                  return p.value > 0 ? p.value : ''
+                }
+              }
+            }
+          },
+          data: [
+            327,
+            1776,
+            507,
+            1200,
+            800,
+            482,
+            204,
+            1390,
+            1001,
+            951,
+            381,
+            220
+          ]
+        }, {
+          name: '平均',
+          type: 'line',
+          stack: '总量',
+          symbolSize: 10,
+          symbol: 'circle',
+          itemStyle: {
+            normal: {
+              color: 'rgba(252,230,48,1)',
+              barBorderRadius: 0,
+              label: {
+                show: true,
+                position: 'top',
+                formatter(p) {
+                  return p.value > 0 ? p.value : ''
+                }
+              }
+            }
+          },
+          data: [
+            1036,
+            3693,
+            2962,
+            3810,
+            2519,
+            1915,
+            1748,
+            4675,
+            6209,
+            4323,
+            2865,
+            4298
+          ]
+        }
+        ]
+      })
+    }
+  }
+}
+</script>

src/components/Charts/mixchart.vue

@@ -1,266 +0,0 @@
-<template>
-    <div :class="className" :id="id" :style="{height:height,width:width}"></div>
-</template>
-<script>
-    // 引入 ECharts 主模块
-    const echarts = require('echarts/lib/echarts');
-    require('echarts/lib/chart/bar');
-    require('echarts/lib/chart/line');
-    // 引入提示框和标题组件
-    require('echarts/lib/component/tooltip');
-    require('echarts/lib/component/title');
-    require('echarts/lib/component/legend');
-    require('echarts/lib/component/dataZoom');
-    export default {
-      name: 'barPercent',
-      props: {
-        className: {
-          type: String,
-          default: 'chart'
-        },
-        id: {
-          type: String,
-          default: 'chart'
-        },
-        width: {
-          type: String,
-          default: '200px'
-        },
-        height: {
-          type: String,
-          default: '200px'
-        }
-      },
-      data() {
-        return {};
-      },
-      mounted() {
-        this.initChart();
-      },
-      methods: {
-        initChart() {
-          this.chart = echarts.init(document.getElementById(this.id));
-          const xData = (function() {
-            const data = [];
-            for (let i = 1; i < 13; i++) {
-              data.push(i + '月份');
-            }
-            return data;
-          }());
-          this.chart.setOption({
-            backgroundColor: '#344b58',
-            title: {
-              text: '统计',
-              subtext: 'from http://gallery.echartsjs.com',
-              x: '4%',
-              textStyle: {
-                color: '#fff',
-                fontSize: '22'
-              },
-              subtextStyle: {
-                color: '#90979c',
-                fontSize: '16'
-              }
-            },
-            tooltip: {
-              trigger: 'axis',
-              axisPointer: {
-                textStyle: {
-                  color: '#fff'
-                }
-              }
-            },
-            grid: {
-              borderWidth: 0,
-              top: 110,
-              bottom: 95,
-              textStyle: {
-                color: '#fff'
-              }
-            },
-            legend: {
-              x: '15%',
-              top: '10%',
-              textStyle: {
-                color: '#90979c'
-              },
-              data: ['女', '男', '平均']
-            },
-            calculable: true,
-            xAxis: [{
-              type: 'category',
-              axisLine: {
-                lineStyle: {
-                  color: '#90979c'
-                }
-              },
-              splitLine: {
-                show: false
-              },
-              axisTick: {
-                show: false
-              },
-              splitArea: {
-                show: false
-              },
-              axisLabel: {
-                interval: 0
-
-              },
-              data: xData
-            }],
-            yAxis: [{
-              type: 'value',
-              splitLine: {
-                show: false
-              },
-              axisLine: {
-                lineStyle: {
-                  color: '#90979c'
-                }
-              },
-              axisTick: {
-                show: false
-              },
-              axisLabel: {
-                interval: 0
-              },
-              splitArea: {
-                show: false
-              }
-            }],
-            dataZoom: [{
-              show: true,
-              height: 30,
-              xAxisIndex: [
-                0
-              ],
-              bottom: 30,
-              start: 10,
-              end: 80,
-              handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
-              handleSize: '110%',
-              handleStyle: {
-                color: '#d3dee5'
-
-              },
-              textStyle: {
-                color: '#fff' },
-              borderColor: '#90979c'
-
-
-            }, {
-              type: 'inside',
-              show: true,
-              height: 15,
-              start: 1,
-              end: 35
-            }],
-            series: [{
-              name: '女',
-              type: 'bar',
-              stack: '总量',
-              barMaxWidth: 35,
-              barGap: '10%',
-              itemStyle: {
-                normal: {
-                  color: 'rgba(255,144,128,1)',
-                  label: {
-                    show: true,
-                    textStyle: {
-                      color: '#fff'
-                    },
-                    position: 'insideTop',
-                    formatter(p) {
-                      return p.value > 0 ? p.value : '';
-                    }
-                  }
-                }
-              },
-              data: [
-                709,
-                1917,
-                2455,
-                2610,
-                1719,
-                1433,
-                1544,
-                3285,
-                5208,
-                3372,
-                2484,
-                4078
-              ]
-            },
-
-            {
-              name: '男',
-              type: 'bar',
-              stack: '总量',
-              itemStyle: {
-                normal: {
-                  color: 'rgba(0,191,183,1)',
-                  barBorderRadius: 0,
-                  label: {
-                    show: true,
-                    position: 'top',
-                    formatter(p) {
-                      return p.value > 0 ? p.value : '';
-                    }
-                  }
-                }
-              },
-              data: [
-                327,
-                1776,
-                507,
-                1200,
-                800,
-                482,
-                204,
-                1390,
-                1001,
-                951,
-                381,
-                220
-              ]
-            }, {
-              name: '平均',
-              type: 'line',
-              stack: '总量',
-              symbolSize: 10,
-              symbol: 'circle',
-              itemStyle: {
-                normal: {
-                  color: 'rgba(252,230,48,1)',
-                  barBorderRadius: 0,
-                  label: {
-                    show: true,
-                    position: 'top',
-                    formatter(p) {
-                      return p.value > 0 ? p.value : '';
-                    }
-                  }
-                }
-              },
-              data: [
-                1036,
-                3693,
-                2962,
-                3810,
-                2519,
-                1915,
-                1748,
-                4675,
-                6209,
-                4323,
-                2865,
-                4298
-              ]
-            }
-            ]
-          })
-        }
-      }
-    }
-</script>

src/components/DndList/index.vue

@@ -0,0 +1,158 @@
+<template>
+  <div class="dndList">
+    <div class="dndList-list" :style="{width:width1}">
+      <h3>{{list1Title}}</h3>
+      <draggable :list="list1" class="dragArea" :options="{group:'article'}">
+        <div class="list-complete-item" v-for="element in list1" :key='element.id'>
+          <div class="list-complete-item-handle">[{{element.author}}] {{element.title}}</div>
+          <div style="position:absolute;right:0px;">
+            <span style="float: right ;margin-top: -20px;margin-right:5px;" @click="deleteEle(element)">
+              <i style="color:#ff4949" class="el-icon-delete"></i>
+            </span>
+          </div>
+        </div>
+      </draggable>
+    </div>
+    <div class="dndList-list" :style="{width:width2}">
+      <h3>{{list2Title}}</h3>
+      <draggable :list="filterList2" class="dragArea" :options="{group:'article'}">
+        <div class="list-complete-item" v-for="element in filterList2" :key='element.id'>
+          <div class='list-complete-item-handle2' @click="pushEle(element)"> [{{element.author}}] {{element.title}}</div>
+        </div>
+      </draggable>
+    </div>
+  </div>
+</template>
+
+<script>
+import draggable from 'vuedraggable'
+
+export default {
+  name: 'DndList',
+  components: { draggable },
+  computed: {
+    filterList2() {
+      return this.list2.filter(v => {
+        if (this.isNotInList1(v)) {
+          return v
+        }
+        return false
+      })
+    }
+  },
+  props: {
+    list1: {
+      type: Array,
+      default() {
+        return []
+      }
+    },
+    list2: {
+      type: Array,
+      default() {
+        return []
+      }
+    },
+    list1Title: {
+      type: String,
+      default: 'list1'
+    },
+    list2Title: {
+      type: String,
+      default: 'list2'
+    },
+    width1: {
+      type: String,
+      default: '48%'
+    },
+    width2: {
+      type: String,
+      default: '48%'
+    }
+  },
+  methods: {
+    isNotInList1(v) {
+      return this.list1.every(k => v.id !== k.id)
+    },
+    isNotInList2(v) {
+      return this.list2.every(k => v.id !== k.id)
+    },
+    deleteEle(ele) {
+      for (const item of this.list1) {
+        if (item.id === ele.id) {
+          const index = this.list1.indexOf(item)
+          this.list1.splice(index, 1)
+          break
+        }
+      }
+      if (this.isNotInList2(ele)) {
+        this.list2.unshift(ele)
+      }
+    },
+    pushEle(ele) {
+      this.list1.push(ele)
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.dndList {
+  background: #fff;
+  padding-bottom: 40px;
+  &:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+  .dndList-list {
+    float: left;
+    padding-bottom: 30px;
+    &:first-of-type {
+      margin-right: 2%;
+    }
+    .dragArea {
+      margin-top: 15px;
+      min-height: 50px;
+      padding-bottom: 30px;
+    }
+  }
+}
+
+.list-complete-item {
+  cursor: pointer;
+  position: relative;
+  font-size: 14px;
+  padding: 5px 12px;
+  margin-top: 4px;
+  border: 1px solid #bfcbd9;
+  transition: all 1s;
+}
+
+.list-complete-item-handle {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-right: 50px;
+}
+
+.list-complete-item-handle2 {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-right: 20px;
+}
+
+.list-complete-item.sortable-chosen {
+  background: #4AB7BD;
+}
+
+.list-complete-item.sortable-ghost {
+  background: #30B08F;
+}
+
+.list-complete-enter,
+.list-complete-leave-active {
+  opacity: 0;
+}
+</style>

src/components/Dropzone/index.vue

@@ -1,206 +1,205 @@
 <template>
-    <div :ref="id" :action="url" class="dropzone" :id="id">
-        <input type="file" name="file">
-    </div>
+  <div :ref="id" :action="url" class="dropzone" :id="id">
+    <input type="file" name="file">
+  </div>
 </template>
+
 <script>
-    import Dropzone from 'dropzone';
-    import 'dropzone/dist/dropzone.css';
-    // import { getToken } from 'api/qiniu';
+import Dropzone from 'dropzone'
+import 'dropzone/dist/dropzone.css'
+// import { getToken } from 'api/qiniu';
 
-    Dropzone.autoDiscover = false;
+Dropzone.autoDiscover = false
 
-    export default {
-      data() {
-        return {
-          dropzone: '',
-          initOnce: true
+export default {
+  data() {
+    return {
+      dropzone: '',
+      initOnce: true
+    }
+  },
+  mounted() {
+    const element = document.getElementById(this.id)
+    const vm = this
+    this.dropzone = new Dropzone(element, {
+      clickable: this.clickable,
+      thumbnailWidth: this.thumbnailWidth,
+      thumbnailHeight: this.thumbnailHeight,
+      maxFiles: this.maxFiles,
+      maxFilesize: this.maxFilesize,
+      dictRemoveFile: 'Remove',
+      addRemoveLinks: this.showRemoveLink,
+      acceptedFiles: this.acceptedFiles,
+      autoProcessQueue: this.autoProcessQueue,
+      dictDefaultMessage: '<i style="margin-top: 3em;display: inline-block" class="material-icons">' + this.defaultMsg + '</i><br>Drop files here to upload',
+      dictMaxFilesExceeded: '只能一个图',
+      previewTemplate: '<div class="dz-preview dz-file-preview">  <div class="dz-image" style="width:' + this.thumbnailWidth + 'px;height:' + this.thumbnailHeight + 'px" ><img style="width:' + this.thumbnailWidth + 'px;height:' + this.thumbnailHeight + 'px" data-dz-thumbnail /></div>  <div class="dz-details"><div class="dz-size"><span data-dz-size></span></div> <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>  <div class="dz-error-message"><span data-dz-errormessage></span></div>  <div class="dz-success-mark"> <i class="material-icons">done</i> </div>  <div class="dz-error-mark"><i class="material-icons">error</i></div></div>',
+      init() {
+        const val = vm.defaultImg
+        if (!val) return
+        if (Array.isArray(val)) {
+          if (val.length === 0) return
+          val.map((v, i) => {
+            const mockFile = { name: 'name' + i, size: 12345, url: v }
+            this.options.addedfile.call(this, mockFile)
+            this.options.thumbnail.call(this, mockFile, v)
+            mockFile.previewElement.classList.add('dz-success')
+            mockFile.previewElement.classList.add('dz-complete')
+            vm.initOnce = false
+            return true
+          })
+        } else {
+          const mockFile = { name: 'name', size: 12345, url: val }
+          this.options.addedfile.call(this, mockFile)
+          this.options.thumbnail.call(this, mockFile, val)
+          mockFile.previewElement.classList.add('dz-success')
+          mockFile.previewElement.classList.add('dz-complete')
+          vm.initOnce = false
         }
       },
-      mounted() {
-        const element = document.getElementById(this.id);
-        const vm = this;
-        this.dropzone = new Dropzone(element, {
-          clickable: this.clickable,
-          thumbnailWidth: this.thumbnailWidth,
-          thumbnailHeight: this.thumbnailHeight,
-          maxFiles: this.maxFiles,
-          maxFilesize: this.maxFilesize,
-          dictRemoveFile: 'Remove',
-          addRemoveLinks: this.showRemoveLink,
-          acceptedFiles: this.acceptedFiles,
-          autoProcessQueue: this.autoProcessQueue,
-          dictDefaultMessage: '<i style="margin-top: 3em;display: inline-block" class="material-icons">' + this.defaultMsg + '</i><br>Drop files here to upload',
-          dictMaxFilesExceeded: '只能一个图',
-          previewTemplate: '<div class="dz-preview dz-file-preview">  <div class="dz-image" style="width:' + this.thumbnailWidth + 'px;height:' + this.thumbnailHeight + 'px" ><img style="width:' + this.thumbnailWidth + 'px;height:' + this.thumbnailHeight + 'px" data-dz-thumbnail /></div>  <div class="dz-details"><div class="dz-size"><span data-dz-size></span></div> <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>  <div class="dz-error-message"><span data-dz-errormessage></span></div>  <div class="dz-success-mark"> <i class="material-icons">done</i> </div>  <div class="dz-error-mark"><i class="material-icons">error</i></div></div>',
-          init() {
-            const val = vm.defaultImg;
-            if (!val) return;
-            if (Array.isArray(val)) {
-              if (val.length === 0) return;
-              val.map((v, i) => {
-                const mockFile = { name: 'name' + i, size: 12345, url: v };
-                this.options.addedfile.call(this, mockFile);
-                this.options.thumbnail.call(this, mockFile, v);
-                mockFile.previewElement.classList.add('dz-success');
-                mockFile.previewElement.classList.add('dz-complete');
-                vm.initOnce = false;
-                return true;
-              })
-            } else {
-              const mockFile = { name: 'name', size: 12345, url: val };
-              this.options.addedfile.call(this, mockFile);
-              this.options.thumbnail.call(this, mockFile, val);
-              mockFile.previewElement.classList.add('dz-success');
-              mockFile.previewElement.classList.add('dz-complete');
-              vm.initOnce = false;
-            }
-          },
-          accept: (file, done) => {
+      accept: (file, done) => {
         /* 七牛*/
-            // const token = this.$store.getters.token;
-            // getToken(token).then(response => {
-            //   file.token = response.data.qiniu_token;
-            //   file.key = response.data.qiniu_key;
-            //   file.url = response.data.qiniu_url;
-            //   done();
-            // })
-            done();
-          },
-          sending: (file, xhr, formData) => {
-             /* 七牛*/
-            console.log(file, xhr, formData)
-            // formData.append('token', file.token);
-            // formData.append('key', file.key);
-            vm.initOnce = false;
-          }
-        });
+        // const token = this.$store.getters.token;
+        // getToken(token).then(response => {
+        //   file.token = response.data.qiniu_token;
+        //   file.key = response.data.qiniu_key;
+        //   file.url = response.data.qiniu_url;
+        //   done();
+        // })
+        done()
+      },
+      sending: (file, xhr, formData) => {
+        // formData.append('token', file.token);
+        // formData.append('key', file.key);
+        vm.initOnce = false
+      }
+    })
 
-        if (this.couldPaste) {
-          document.addEventListener('paste', this.pasteImg)
-        }
+    if (this.couldPaste) {
+      document.addEventListener('paste', this.pasteImg)
+    }
 
-        this.dropzone.on('success', file => {
-          vm.$emit('dropzone-success', file, vm.dropzone.element)
-        });
-        this.dropzone.on('addedfile', file => {
-          vm.$emit('dropzone-fileAdded', file)
-        });
-        this.dropzone.on('removedfile', file => {
-          vm.$emit('dropzone-removedFile', file)
-        });
-        this.dropzone.on('error', (file, error, xhr) => {
-          vm.$emit('dropzone-error', file, error, xhr)
-        });
-        this.dropzone.on('successmultiple', (file, error, xhr) => {
-          vm.$emit('dropzone-successmultiple', file, error, xhr)
-        });
-      },
-      methods: {
-        removeAllFiles() {
-          this.dropzone.removeAllFiles(true)
-        },
-        processQueue() {
-          this.dropzone.processQueue()
-        },
-        pasteImg(event) {
-          const items = (event.clipboardData || event.originalEvent.clipboardData).items;
-          if (items[0].kind === 'file') {
-            this.dropzone.addFile(items[0].getAsFile())
-          }
-        },
-        initImages(val) {
-          if (!val) return;
-          if (Array.isArray(val)) {
-            val.map((v, i) => {
-              const mockFile = { name: 'name' + i, size: 12345, url: v };
-              this.dropzone.options.addedfile.call(this.dropzone, mockFile);
-              this.dropzone.options.thumbnail.call(this.dropzone, mockFile, v);
-              mockFile.previewElement.classList.add('dz-success');
-              mockFile.previewElement.classList.add('dz-complete');
-              return true
-            })
-          } else {
-            const mockFile = { name: 'name', size: 12345, url: val };
-            this.dropzone.options.addedfile.call(this.dropzone, mockFile);
-            this.dropzone.options.thumbnail.call(this.dropzone, mockFile, val);
-            mockFile.previewElement.classList.add('dz-success');
-            mockFile.previewElement.classList.add('dz-complete');
-          }
-        }
-
-      },
-      destroyed() {
-        document.removeEventListener('paste', this.pasteImg);
-        this.dropzone.destroy();
-      },
-      watch: {
-        defaultImg(val) {
-          if (val.length === 0) {
-            this.initOnce = false;
-            return;
-          }
-          if (!this.initOnce) return;
-          this.initImages(val);
-          this.initOnce = false;
-        }
-      },
-      props: {
-        id: {
-          type: String,
-          required: true
-        },
-        url: {
-          type: String,
-          required: true
-        },
-        clickable: {
-          type: Boolean,
-          default: true
-        },
-        defaultMsg: {
-          type: String,
-          default: '上传图片'
-        },
-        acceptedFiles: {
-          type: String
-        },
-        thumbnailHeight: {
-          type: Number,
-          default: 200
-        },
-        thumbnailWidth: {
-          type: Number,
-          default: 200
-        },
-        showRemoveLink: {
-          type: Boolean,
-          default: true
-        },
-        maxFilesize: {
-          type: Number,
-          default: 2
-        },
-        maxFiles: {
-          type: Number,
-          default: 3
-        },
-        autoProcessQueue: {
-          type: Boolean,
-          default: true
-        },
-        useCustomDropzoneOptions: {
-          type: Boolean,
-          default: false
-        },
-        defaultImg: {
-          default: false
-        },
-        couldPaste: {
-          default: false
-        }
+    this.dropzone.on('success', file => {
+      vm.$emit('dropzone-success', file, vm.dropzone.element)
+    })
+    this.dropzone.on('addedfile', file => {
+      vm.$emit('dropzone-fileAdded', file)
+    })
+    this.dropzone.on('removedfile', file => {
+      vm.$emit('dropzone-removedFile', file)
+    })
+    this.dropzone.on('error', (file, error, xhr) => {
+      vm.$emit('dropzone-error', file, error, xhr)
+    })
+    this.dropzone.on('successmultiple', (file, error, xhr) => {
+      vm.$emit('dropzone-successmultiple', file, error, xhr)
+    })
+  },
+  methods: {
+    removeAllFiles() {
+      this.dropzone.removeAllFiles(true)
+    },
+    processQueue() {
+      this.dropzone.processQueue()
+    },
+    pasteImg(event) {
+      const items = (event.clipboardData || event.originalEvent.clipboardData).items
+      if (items[0].kind === 'file') {
+        this.dropzone.addFile(items[0].getAsFile())
+      }
+    },
+    initImages(val) {
+      if (!val) return
+      if (Array.isArray(val)) {
+        val.map((v, i) => {
+          const mockFile = { name: 'name' + i, size: 12345, url: v }
+          this.dropzone.options.addedfile.call(this.dropzone, mockFile)
+          this.dropzone.options.thumbnail.call(this.dropzone, mockFile, v)
+          mockFile.previewElement.classList.add('dz-success')
+          mockFile.previewElement.classList.add('dz-complete')
+          return true
+        })
+      } else {
+        const mockFile = { name: 'name', size: 12345, url: val }
+        this.dropzone.options.addedfile.call(this.dropzone, mockFile)
+        this.dropzone.options.thumbnail.call(this.dropzone, mockFile, val)
+        mockFile.previewElement.classList.add('dz-success')
+        mockFile.previewElement.classList.add('dz-complete')
       }
     }
+
+  },
+  destroyed() {
+    document.removeEventListener('paste', this.pasteImg)
+    this.dropzone.destroy()
+  },
+  watch: {
+    defaultImg(val) {
+      if (val.length === 0) {
+        this.initOnce = false
+        return
+      }
+      if (!this.initOnce) return
+      this.initImages(val)
+      this.initOnce = false
+    }
+  },
+  props: {
+    id: {
+      type: String,
+      required: true
+    },
+    url: {
+      type: String,
+      required: true
+    },
+    clickable: {
+      type: Boolean,
+      default: true
+    },
+    defaultMsg: {
+      type: String,
+      default: '上传图片'
+    },
+    acceptedFiles: {
+      type: String
+    },
+    thumbnailHeight: {
+      type: Number,
+      default: 200
+    },
+    thumbnailWidth: {
+      type: Number,
+      default: 200
+    },
+    showRemoveLink: {
+      type: Boolean,
+      default: true
+    },
+    maxFilesize: {
+      type: Number,
+      default: 2
+    },
+    maxFiles: {
+      type: Number,
+      default: 3
+    },
+    autoProcessQueue: {
+      type: Boolean,
+      default: true
+    },
+    useCustomDropzoneOptions: {
+      type: Boolean,
+      default: false
+    },
+    defaultImg: {
+      default: false
+    },
+    couldPaste: {
+      default: false
+    }
+  }
+}
 </script>
 
 <style scoped>

src/components/ErrLog/index.vue

@@ -1,51 +0,0 @@
-<template>
-    <div>
-        <el-badge :is-dot="true" style="line-height: 30px;" @click.native="dialogTableVisible=true">
-            <el-button size="small" type="primary">
-                <svg t="1492682037685" class="bug-svg"  viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1863" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M969.142857 548.571429q0 14.848-10.861714 25.709714t-25.709714 10.861714l-128 0q0 97.718857-38.290286 165.705143l118.857143 119.442286q10.861714 10.861714 10.861714 25.709714t-10.861714 25.709714q-10.276571 10.861714-25.709714 10.861714t-25.709714-10.861714l-113.152-112.566857q-2.852571 2.852571-8.557714 7.424t-23.990857 16.274286-37.156571 20.845714-46.848 16.566857-55.442286 7.424l0-512-73.142857 0 0 512q-29.147429 0-58.002286-7.716571t-49.700571-18.870857-37.705143-22.272-24.868571-18.578286l-8.557714-8.009143-104.557714 118.272q-11.446857 11.995429-27.428571 11.995429-13.714286 0-24.576-9.142857-10.861714-10.276571-11.702857-25.417143t8.850286-26.587429l115.419429-129.718857q-33.133714-65.133714-33.133714-156.562286l-128 0q-14.848 0-25.709714-10.861714t-10.861714-25.709714 10.861714-25.709714 25.709714-10.861714l128 0 0-168.009143-98.852571-98.852571q-10.861714-10.861714-10.861714-25.709714t10.861714-25.709714 25.709714-10.861714 25.709714 10.861714l98.852571 98.852571 482.304 0 98.852571-98.852571q10.861714-10.861714 25.709714-10.861714t25.709714 10.861714 10.861714 25.709714-10.861714 25.709714l-98.852571 98.852571 0 168.009143 128 0q14.848 0 25.709714 10.861714t10.861714 25.709714zM694.857143 219.428571l-365.714286 0q0-75.995429 53.430857-129.426286t129.426286-53.430857 129.426286 53.430857 53.430857 129.426286z" p-id="1864"></path></svg>
-            </el-button>
-        </el-badge>
-        <el-dialog title="bug日志" :visible.sync="dialogTableVisible">
-            <el-table :data="logsList">
-                <el-table-column label="message">
-                    <template scope="scope">
-                        <div>msg:{{ scope.row.err.message }}</div>
-                        <br/>
-                        <div>url: {{scope.row.url}}</div>
-                    </template>
-                </el-table-column>
-                <el-table-column label="stack">
-                    <template scope="scope">
-                        {{ scope.row.err.stack}}
-                    </template>
-                </el-table-column>
-
-            </el-table>
-        </el-dialog>
-    </div>
-</template>
-
-<script>
-    export default {
-      name: 'errLog',
-      props: {
-        logsList: {
-          type: Array
-        }
-      },
-      data() {
-        return {
-          dialogTableVisible: false
-        }
-      }
-    }
-</script>
-<style scoped>
-.bug-svg {
-    width: 1em;
-    height: 1em;
-    vertical-align: -0.15em;
-    fill: currentColor;
-    overflow: hidden;
-}
-</style>

src/components/ErrorLog/index.vue

@@ -0,0 +1,77 @@
+<template>
+  <div>
+    <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="logsList" 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',
+  props: {
+    logsList: {
+      type: Array
+    }
+  },
+  data() {
+    return {
+      dialogTableVisible: false
+    }
+  }
+}
+</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/GithubCorner/index.vue

@@ -0,0 +1,42 @@
+<template>
+  <a href="https://github.com/PanJiaChen/vue-element-admin" target="_blank" class="github-corner" aria-label="View source on Github">
+    <svg width="80" height="80" viewBox="0 0 250 250" style="fill:#40c9c6; color:#fff; position: absolute; top: 84px; border: 0; right: 0;"
+      aria-hidden="true">
+      <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
+      <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
+        fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
+      <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
+        fill="currentColor" class="octo-body"></path>
+    </svg>
+  </a>
+</template>
+
+<style scoped>
+.github-corner:hover .octo-arm {
+  animation: octocat-wave 560ms ease-in-out
+}
+
+@keyframes octocat-wave {
+  0%,
+  100% {
+    transform: rotate(0)
+  }
+  20%,
+  60% {
+    transform: rotate(-25deg)
+  }
+  40%,
+  80% {
+    transform: rotate(10deg)
+  }
+}
+
+@media (max-width:500px) {
+  .github-corner:hover .octo-arm {
+    animation: none
+  }
+  .github-corner .octo-arm {
+    animation: octocat-wave 560ms ease-in-out
+  }
+}
+</style>

src/components/Hamburger/index.vue

@@ -1,36 +1,45 @@
 <template>
-    <div>
-        <svg t="1492500959545" @click="toggleClick" class="wscn-icon hamburger" :class="{'is-active':isActive}"  style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1691" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M966.8023 568.849776 57.196677 568.849776c-31.397081 0-56.850799-25.452695-56.850799-56.850799l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 543.397081 998.200404 568.849776 966.8023 568.849776z" p-id="1692"></path><path d="M966.8023 881.527125 57.196677 881.527125c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 856.07443 998.200404 881.527125 966.8023 881.527125z" p-id="1693"></path><path d="M966.8023 256.17345 57.196677 256.17345c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.850799 56.850799-56.850799l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.850799l0 0C1023.653099 230.720755 998.200404 256.17345 966.8023 256.17345z" p-id="1694"></path></svg>
-    </div>
+  <div>
+    <svg t="1492500959545" @click="toggleClick" class="wscn-icon hamburger" :class="{'is-active':isActive}" style="" viewBox="0 0 1024 1024"
+      version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1691" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64">
+      <path d="M966.8023 568.849776 57.196677 568.849776c-31.397081 0-56.850799-25.452695-56.850799-56.850799l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 543.397081 998.200404 568.849776 966.8023 568.849776z"
+        p-id="1692"></path>
+      <path d="M966.8023 881.527125 57.196677 881.527125c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 856.07443 998.200404 881.527125 966.8023 881.527125z"
+        p-id="1693"></path>
+      <path d="M966.8023 256.17345 57.196677 256.17345c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.850799 56.850799-56.850799l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.850799l0 0C1023.653099 230.720755 998.200404 256.17345 966.8023 256.17345z"
+        p-id="1694"></path>
+    </svg>
+  </div>
 </template>
 
 <script>
-    export default {
-      name: 'hamburger',
-      props: {
-        isActive: {
-          type: Boolean,
-          default: false
-        },
-        toggleClick: {
-          type: Function,
-          default: null
-        }
-      }
+export default {
+  name: 'hamburger',
+  props: {
+    isActive: {
+      type: Boolean,
+      default: false
+    },
+    toggleClick: {
+      type: Function,
+      default: null
     }
+  }
+}
 </script>
 
 <style scoped>
-    .hamburger {
-        display: inline-block;
-        cursor: pointer;
-        width: 20px;
-        height: 20px;
-        transform: rotate(0deg);
-        transition: .38s;
-        transform-origin: 50% 50%;
-    }
-    .hamburger.is-active {
-        transform: rotate(90deg);
-    }
+.hamburger {
+	display: inline-block;
+	cursor: pointer;
+	width: 20px;
+	height: 20px;
+	transform: rotate(90deg);
+	transition: .38s;
+	transform-origin: 50% 50%;
+}
+
+.hamburger.is-active {
+	transform: rotate(0deg);
+}
 </style>

src/components/Icon-svg/index.js

@@ -1,11 +0,0 @@
-import Vue from 'vue'
-
-function registerAllComponents(requireContext) {
-  return requireContext.keys().forEach(comp => {
-    const vueComp = requireContext(comp)
-    const compName = vueComp.name ? vueComp.name.toLowerCase() : /\/([\w-]+)\.vue$/.exec(comp)[1]
-    Vue.component(compName, vueComp)
-  })
-}
-
-registerAllComponents(require.context('./', false, /\.vue$/))

src/components/Icon-svg/wscn-icon-stack.vue

@@ -1,52 +0,0 @@
-<template>
-  <div class="icon-container" :style="containerStyle">
-    <slot class="icon"></slot>
-  </div>
-</template>
-
-<script>
-  export default {
-    name: 'wscn-icon-stack',
-    props: {
-      width: {
-        type: Number,
-        default: 20
-      },
-      shape: {
-        type: String,
-        default: 'circle',
-        validator: val => {
-          const validShapes = ['circle', 'square']
-          return validShapes.indexOf(val) > -1
-        }
-      }
-    },
-    computed: {
-      containerStyle() {
-        return {
-          width: `${this.width}px`,
-          height: `${this.width}px`,
-          fontSize: `${this.width * 0.6}px`,
-          borderRadius: `${this.shape === 'circle' && '50%'}`
-        }
-      }
-    }
-  }
-</script>
-
-<style lang="scss" scoped>
-  .icon-container {
-    display: inline-block;
-    position: relative;
-    overflow: hidden;
-    background: #1482F0;
-
-    .icon {
-      position: absolute;
-      color: #ffffff;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-    }
-  }
-</style>

src/components/Icon-svg/wscn-icon-svg.vue

@@ -1,26 +0,0 @@
-<template>
-  <svg class="wscn-icon" aria-hidden="true">
-    <use :xlink:href="iconName"></use>
-  </svg>
-</template>
-
-<script>
-  export default {
-    name: 'wscn-icon-svg',
-    props: {
-      iconClass: {
-        type: String,
-        required: true
-      }
-    },
-    computed: {
-      iconName() {
-        return `#icon-${this.iconClass}`
-      }
-    }
-  }
-</script>
-
-<style lang="scss" scoped>
-
-</style>

src/components/ImageCropper/index.vue

@@ -105,7 +105,7 @@
 <script>
     /* eslint-disable */
     import {effectRipple, data2blob} from './utils';
-    import fetch from 'utils/fetch';
+    import request from '@/utils/request';
     import langBag from './lang';
     const mimes = {
         'jpg': 'image/jpeg',
@@ -328,6 +328,7 @@
             // 关闭控件
             off() {
                 this.show = false;
+                this.$emit('close');
             },
             // 设置步骤
             setStep(step) {
@@ -671,7 +672,7 @@
             that.loading = 1;
             that.setStep(3);
             that.$emit('crop-success', createImgUrl, field, ki);
-            fetch({
+            request({
                 url,
                 method: 'post',
                 data: fmData

src/components/ImageCropper/lang.js

@@ -37,5 +37,5 @@ const langBag = {
       lowestPx: 'The lowest pixel in the image: '
     }
   }
-};
-export default langBag;
+}
+export default langBag

src/components/JsonEditor/index.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="json-editor">
+    <textarea ref="textarea"></textarea>
+  </div>
+</template>
+
+<script>
+import CodeMirror from 'codemirror'
+import 'codemirror/addon/lint/lint.css'
+import 'codemirror/lib/codemirror.css'
+import 'codemirror/theme/rubyblue.css'
+require('script-loader!jsonlint')
+import 'codemirror/mode/javascript/javascript'
+import 'codemirror/addon/lint/lint'
+import 'codemirror/addon/lint/json-lint'
+
+export default {
+  name: 'jsonEditor',
+  data() {
+    return {
+      jsonEditor: false
+    }
+  },
+  props: ['value'],
+  watch: {
+    value(value) {
+      const editor_value = this.jsonEditor.getValue()
+      if (value !== editor_value) {
+        this.jsonEditor.setValue(JSON.stringify(this.value, null, 2))
+      }
+    }
+  },
+  mounted() {
+    this.jsonEditor = CodeMirror.fromTextArea(this.$refs.textarea, {
+      lineNumbers: true,
+      mode: 'application/json',
+      gutters: ['CodeMirror-lint-markers'],
+      theme: 'rubyblue',
+      lint: true
+    })
+
+    this.jsonEditor.setValue(JSON.stringify(this.value, null, 2))
+    this.jsonEditor.on('change', cm => {
+      this.$emit('changed', cm.getValue())
+      this.$emit('input', cm.getValue())
+    })
+  },
+  methods: {
+    getValue() {
+      return this.jsonEditor.getValue()
+    }
+  }
+}
+</script>
+
+<style>
+.CodeMirror {
+  height: 100%;
+}
+.json-editor .cm-s-rubyblue span.cm-string {
+  color: #F08047;
+}
+</style>

src/components/MDinput/index.vue

@@ -1,297 +1,278 @@
 <template>
-    <div class="material-input__component" :class="computedClasses">
-        <input v-if="type === 'email'" type="email" class="material-input" :name="name" :id="id" :placeholder="placeholder" v-model="valueCopy"
-            :readonly="readonly" :disabled="disabled" :autocomplete="autocomplete" :required="required" @focus="handleFocus(true)"
-            @blur="handleFocus(false)" @input="handleModelInput">
-        <input v-if="type === 'url'" type="url" class="material-input" :name="name" :id="id" :placeholder="placeholder" v-model="valueCopy"
-            :readonly="readonly" :disabled="disabled" :autocomplete="autocomplete" :required="required" @focus="handleFocus(true)"
-            @blur="handleFocus(false)" @input="handleModelInput">
-        <input v-if="type === 'number'" type="number" class="material-input" :name="name" :id="id" :placeholder="placeholder" v-model="valueCopy"
-            :readonly="readonly" :disabled="disabled" :autocomplete="autocomplete" :max="max" :min="min" :minlength="minlength"
-            :maxlength="maxlength" :required="required" @focus="handleFocus(true)" @blur="handleFocus(false)" @input="handleModelInput">
-        <input v-if="type === 'password'" type="password" class="material-input" :name="name" :id="id" :placeholder="placeholder"
-            v-model="valueCopy" :readonly="readonly" :disabled="disabled" :autocomplete="autocomplete" :max="max" :min="min"
-            :required="required" @focus="handleFocus(true)" @blur="handleFocus(false)" @input="handleModelInput">
-        <input v-if="type === 'tel'" type="tel" class="material-input" :name="name" :id="id" :placeholder="placeholder" v-model="valueCopy"
-            :readonly="readonly" :disabled="disabled" :autocomplete="autocomplete" :required="required" @focus="handleFocus(true)"
-            @blur="handleFocus(false)" @input="handleModelInput">
-        <input v-if="type === 'text'" type="text" class="material-input" :name="name" :id="id" :placeholder="placeholder" v-model="valueCopy"
-            :readonly="readonly" :disabled="disabled" :autocomplete="autocomplete" :minlength="minlength" :maxlength="maxlength"
-            :required="required" @focus="handleFocus(true)" @blur="handleFocus(false)" @input="handleModelInput">
-
-        <span class="material-input-bar"></span>
-
-        <label class="material-label">
-            <slot></slot>
-        </label>
-        <div v-if="errorMessages" class="material-errors">
-            <div v-for="error in computedErrors" class="material-error">
-                {{ error }}
-            </div>
-        </div>
+  <div class="material-input__component" :class="computedClasses">
+    <div :class="{iconClass:icon}">
+      <i class="el-input__icon material-input__icon" :class="['el-icon-' + icon]" v-if="icon"></i>
+      <input v-if="type === 'email'" type="email" class="material-input" :name="name" :placeholder="fillPlaceHolder" v-model="currentValue"
+        :readonly="readonly" :disabled="disabled" :autoComplete="autoComplete" :required="required" @focus="handleMdFocus"
+        @blur="handleMdBlur" @input="handleModelInput">
+      <input v-if="type === 'url'" type="url" class="material-input" :name="name" :placeholder="fillPlaceHolder" v-model="currentValue"
+        :readonly="readonly" :disabled="disabled" :autoComplete="autoComplete" :required="required" @focus="handleMdFocus"
+        @blur="handleMdBlur" @input="handleModelInput">
+      <input v-if="type === 'number'" type="number" class="material-input" :name="name" :placeholder="fillPlaceHolder" v-model="currentValue"
+        :step="step" :readonly="readonly" :disabled="disabled" :autoComplete="autoComplete" :max="max" :min="min" :minlength="minlength"
+        :maxlength="maxlength" :required="required" @focus="handleMdFocus" @blur="handleMdBlur" @input="handleModelInput">
+      <input v-if="type === 'password'" type="password" class="material-input" :name="name" :placeholder="fillPlaceHolder" v-model="currentValue"
+        :readonly="readonly" :disabled="disabled" :autoComplete="autoComplete" :max="max" :min="min" :required="required" @focus="handleMdFocus"
+        @blur="handleMdBlur" @input="handleModelInput">
+      <input v-if="type === 'tel'" type="tel" class="material-input" :name="name" :placeholder="fillPlaceHolder" v-model="currentValue"
+        :readonly="readonly" :disabled="disabled" :autoComplete="autoComplete" :required="required" @focus="handleMdFocus"
+        @blur="handleMdBlur" @input="handleModelInput">
+      <input v-if="type === 'text'" type="text" class="material-input" :name="name" :placeholder="fillPlaceHolder" v-model="currentValue"
+        :readonly="readonly" :disabled="disabled" :autoComplete="autoComplete" :minlength="minlength" :maxlength="maxlength"
+        :required="required" @focus="handleMdFocus" @blur="handleMdBlur" @input="handleModelInput">
+      <span class="material-input-bar"></span>
+      <label class="material-label">
+        <slot></slot>
+      </label>
     </div>
+  </div>
 </template>
 
 <script>
-    // source:https://github.com/wemake-services/vue-material-input/blob/master/src/components/MaterialInput.vue
-    export default {
-      name: 'material-input',
-      computed: {
-        computedErrors() {
-          return typeof this.errorMessages === 'string'
-                        ? [this.errorMessages] : this.errorMessages
-        },
-        computedClasses() {
-          return {
-            'material--active': this.focus,
-            'material--disabled': this.disabled,
-            'material--has-errors': Boolean(!this.valid || (this.errorMessages && this.errorMessages.length)),
-            'material--raised': Boolean(this.focus || this.valueCopy || // has value
-                            (this.placeholder && !this.valueCopy)) // has placeholder
-          }
+// source:https://github.com/wemake-services/vue-material-input/blob/master/src/components/MaterialInput.vue
+
+export default {
+  name: 'md-input',
+  props: {
+    icon: String,
+    name: String,
+    type: {
+      type: String,
+      default: 'text'
+    },
+    value: [String, Number],
+    placeholder: String,
+    readonly: Boolean,
+    disabled: Boolean,
+    min: String,
+    max: String,
+    step: String,
+    minlength: Number,
+    maxlength: Number,
+    required: {
+      type: Boolean,
+      default: true
+    },
+    autoComplete: {
+      type: String,
+      default: 'off'
+    },
+    validateEvent: {
+      type: Boolean,
+      default: true
+    }
+  },
+  computed: {
+    computedClasses() {
+      return {
+        'material--active': this.focus,
+        'material--disabled': this.disabled,
+        'material--raised': Boolean(this.focus || this.currentValue) // has value
+      }
+    }
+  },
+  watch: {
+    value(newValue) {
+      this.currentValue = newValue
+    }
+  },
+  data() {
+    return {
+      currentValue: this.value,
+      focus: false,
+      fillPlaceHolder: null
+    }
+  },
+  methods: {
+    handleModelInput(event) {
+      const value = event.target.value
+      this.$emit('input', value)
+      if (this.$parent.$options.componentName === 'ElFormItem') {
+        if (this.validateEvent) {
+          this.$parent.$emit('el.form.change', [value])
         }
-      },
-      data() {
-        return {
-          valueCopy: null,
-          focus: false,
-          valid: true
-        }
-      },
-      beforeMount() {
-        // Here we are following the Vue2 convention on custom v-model:
-        // https://github.com/vuejs/vue/issues/2873#issuecomment-223759341
-        this.copyValue(this.value)
-      },
-      methods: {
-        handleModelInput(event) {
-          this.$emit('input', event.target.value, event)
-          this.handleValidation()
-        },
-        handleFocus(focused) {
-          this.focus = focused
-        },
-        handleValidation() {
-          this.valid = this.$el ? this.$el.querySelector('.material-input').validity.valid : this.valid
-        },
-        copyValue(value) {
-          this.valueCopy = value
-          this.handleValidation()
-        }
-      },
-      watch: {
-        value(newValue) {
-          this.copyValue(newValue)
-        }
-      },
-      props: {
-        id: {
-          type: String,
-          default: null
-        },
-        name: {
-          type: String,
-          default: null
-        },
-        type: {
-          type: String,
-          default: 'text'
-        },
-        value: {
-          default: null
-        },
-        placeholder: {
-          type: String,
-          default: null
-        },
-        readonly: {
-          type: Boolean,
-          default: false
-        },
-        disabled: {
-          type: Boolean,
-          default: false
-        },
-        min: {
-          type: String,
-          default: null
-        },
-        max: {
-          type: String,
-          default: null
-        },
-        minlength: {
-          type: Number,
-          default: null
-        },
-        maxlength: {
-          type: Number,
-          default: null
-        },
-        required: {
-          type: Boolean,
-          default: true
-        },
-        autocomplete: {
-          type: String,
-          default: 'off'
-        },
-        errorMessages: {
-          type: [Array, String],
-          default: null
+      }
+      this.$emit('change', value)
+    },
+    handleMdFocus(event) {
+      this.focus = true
+      this.$emit('focus', event)
+      if (this.placeholder && this.placeholder !== '') {
+        this.fillPlaceHolder = this.placeholder
+      }
+    },
+    handleMdBlur(event) {
+      this.focus = false
+      this.$emit('blur', event)
+      this.fillPlaceHolder = null
+      if (this.$parent.$options.componentName === 'ElFormItem') {
+        if (this.validateEvent) {
+          this.$parent.$emit('el.form.blur', [this.currentValue])
         }
       }
     }
+  }
+}
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-    // Fonts:
-    $font-size-base: 16px;
-    $font-size-small: 18px;
-    $font-size-smallest: 12px;
-    $font-weight-normal: normal;
-    // Utils
-    $spacer: 12px;
-    $transition: 0.2s ease all;
-    // Base clases:
-    %base-bar-pseudo {
-        content: '';
-        height: 1px;
-        width: 0;
-        bottom: 0;
+  // Fonts:
+  $font-size-base: 16px;
+  $font-size-small: 18px;
+  $font-size-smallest: 12px;
+  $font-weight-normal: normal;
+  $font-weight-bold: bold;
+  $apixel: 1px;
+  // Utils
+  $spacer: 12px;
+  $transition: 0.2s ease all;
+  $index: 0px;
+  $index-has-icon: 30px;
+  // Theme:
+  $color-white: white;
+  $color-grey: #9E9E9E;
+  $color-grey-light: #E0E0E0;
+  $color-blue: #2196F3;
+  $color-red: #F44336;
+  $color-black: black;
+  // Base clases:
+  %base-bar-pseudo {
+    content: '';
+    height: 1px;
+    width: 0;
+    bottom: 0;
+    position: absolute;
+    transition: $transition;
+  }
+
+  // Mixins:
+  @mixin slided-top() {
+    top: - ($font-size-base + $spacer);
+    left: 0;
+    font-size: $font-size-base;
+    font-weight: $font-weight-bold;
+  }
+
+  // Component:
+  .material-input__component {
+    margin-top: 36px;
+    position: relative;
+    * {
+      box-sizing: border-box;
+    }
+    .iconClass {
+      .material-input__icon {
         position: absolute;
-        transition: $transition;
+        left: 0;
+        line-height: $font-size-base;
+        color: $color-blue;
+        top: $spacer;
+        width: $index-has-icon;
+        height: $font-size-base;
+        font-size: $font-size-base;
+        font-weight: $font-weight-normal;
+        pointer-events: none;
+      }
+      .material-label {
+        left: $index-has-icon;
+      }
+      .material-input {
+        text-indent: $index-has-icon;
+      }
     }
+    .material-input {
+      font-size: $font-size-base;
+      padding: $spacer $spacer $spacer - $apixel * 10 $spacer / 2;
+      display: block;
+      width: 100%;
+      border: none;
+      line-height: 1;
+      border-radius: 0;
+      &:focus {
+        outline: none;
+        border: none;
+        border-bottom: 1px solid transparent; // fixes the height issue
+      }
+    }
+    .material-label {
+      font-weight: $font-weight-normal;
+      position: absolute;
+      pointer-events: none;
+      left: $index;
+      top: 0;
+      transition: $transition;
+      font-size: $font-size-small;
+    }
+    .material-input-bar {
+      position: relative;
+      display: block;
+      width: 100%;
+      &:before {
+        @extend %base-bar-pseudo;
+        left: 50%;
+      }
+      &:after {
+        @extend %base-bar-pseudo;
+        right: 50%;
+      }
+    }
+    // Disabled state:
+    &.material--disabled {
+      .material-input {
+        border-bottom-style: dashed;
+      }
+    }
+    // Raised state:
+    &.material--raised {
+      .material-label {
+        @include slided-top();
+      }
+    }
+    // Active state:
+    &.material--active {
+      .material-input-bar {
+        &:before,
+        &:after {
+          width: 50%;
+        }
+      }
+    }
+  }
 
-    // Mixins:
-    @mixin slided-top() {
-        top: -2 * $spacer;
-        font-size: $font-size-small;
+  .material-input__component {
+    background: $color-white;
+    .material-input {
+      background: none;
+      color: $color-black;
+      text-indent: $index;
+      border-bottom: 1px solid $color-grey-light;
     }
-
-    // Component:
-    .material-input__component {
-        /*margin-top: 30px;*/
-        position: relative;
-        * {
-            box-sizing: border-box;
-        }
-        .material-input {
-            font-size: $font-size-base;
-            padding: $spacer $spacer $spacer $spacer / 2;
-            display: block;
-            width: 100%;
-            border: none;
-            border-radius: 0;
-            &:focus {
-                outline: none;
-                border: none;
-                border-bottom: 1px solid transparent; // fixes the height issue
-            }
-        }
-        .material-label {
-            font-size: $font-size-base;
-            font-weight: $font-weight-normal;
-            position: absolute;
-            pointer-events: none;
-            left: 0;
-            top: $spacer;
-            transition: $transition;
-        }
-        .material-input-bar {
-            position: relative;
-            display: block;
-            width: 100%;
-            &:before {
-                @extend %base-bar-pseudo;
-                left: 50%;
-            }
-            &:after {
-                @extend %base-bar-pseudo;
-                right: 50%;
-            }
-        }
-        // Disabled state:
-        &.material--disabled {
-            .material-input {
-                border-bottom-style: dashed;
-            }
-        }
-        // Raised state:
-        &.material--raised {
-            .material-label {
-                @include slided-top();
-            }
-        }
-        // Active state:
-        &.material--active {
-            .material-input-bar {
-                &:before,
-                &:after {
-                    width: 50%;
-                }
-            }
-        }
-        // Errors:
-        .material-errors {
-            position: relative;
-            overflow: hidden;
-            .material-error {
-                font-size: $font-size-smallest;
-                line-height: $font-size-smallest + 2px;
-                overflow: hidden;
-                margin-top: 0;
-                padding-top: $spacer / 2;
-                padding-right: $spacer / 2;
-                padding-left: 0;
-            }
-        }
+    .material-label {
+      color: $color-grey;
     }
-
-    // Theme:
-    $color-white: white;
-    $color-grey: #9E9E9E;
-    $color-grey-light: #E0E0E0;
-    $color-blue: #2196F3;
-    $color-red: #F44336;
-    $color-black: black;
-    .material-input__component {
-        background: $color-white;
-        .material-input {
-            background: none;
-            color: $color-black;
-            text-indent: 30px;
-            border-bottom: 1px solid $color-grey-light;
-        }
-        .material-label {
-            color: $color-grey;
-        }
-        .material-input-bar {
-            &:before,
-            &:after {
-                background: $color-blue;
-            }
-        }
-        // Active state:
-        &.material--active {
-            .material-label {
-                color: $color-blue;
-            }
-        }
-        // Errors:
-        &.material--has-errors {
-            &.material--active .material-label {
-                color: $color-red;
-            }
-            .material-input-bar {
-                &:before,
-                &:after {
-                    background: $color-red;
-                }
-            }
-            .material-errors {
-                color: $color-red;
-            }
-        }
+    .material-input-bar {
+      &:before,
+      &:after {
+        background: $color-blue;
+      }
     }
+    // Active state:
+    &.material--active {
+      .material-label {
+        color: $color-blue;
+      }
+    }
+    // Errors:
+    &.material--has-errors {
+      &.material--active .material-label {
+        color: $color-red;
+      }
+      .material-input-bar {
+        &:before,
+        &:after {
+          background: transparent;
+        }
+      }
+    }
+  }
 </style>

src/components/MarkdownEditor/index.vue

@@ -1,20 +1,21 @@
 <template>
-  <div class='simplemde-container' :style="{height:height+'px',zIndex:zIndex}">
-    <textarea :id='id'>
+  <div class="simplemde-container" :style="{height:height+'px',zIndex:zIndex}">
+    <textarea :id="id">
     </textarea>
   </div>
 </template>
 
 <script>
+import 'font-awesome/css/font-awesome.min.css'
 import 'simplemde/dist/simplemde.min.css'
 import SimpleMDE from 'simplemde'
+
 export default {
-  name: 'Sticky',
+  name: 'simplemde-md',
   props: {
     value: String,
     id: {
-      type: String,
-      default: 'markdown-editor'
+      type: String
     },
     autofocus: {
       type: Boolean,
@@ -40,17 +41,18 @@ export default {
     return {
       simplemde: null,
       hasChange: false
-    };
+    }
   },
   watch: {
     value(val) {
-      if (val === this.simplemde.value() && !this.hasChange) return;
-      this.simplemde.value(val);
+      if (val === this.simplemde.value() && !this.hasChange) return
+      this.simplemde.value(val)
     }
   },
   mounted() {
     this.simplemde = new SimpleMDE({
-      element: document.getElementById(this.id),
+      element: document.getElementById(this.id || 'markdown-editor-' + +new Date()),
+      autoDownloadFontAwesome: false,
       autofocus: this.autofocus,
       toolbar: this.toolbar,
       spellChecker: false,
@@ -59,53 +61,59 @@ export default {
       },
       // hideIcons: ['guide', 'heading', 'quote', 'image', 'preview', 'side-by-side', 'fullscreen'],
       placeholder: this.placeholder
-    });
+    })
     if (this.value) {
-      this.simplemde.value(this.value);
+      this.simplemde.value(this.value)
     }
     this.simplemde.codemirror.on('change', () => {
       if (this.hasChange) {
         this.hasChange = true
       }
-      this.$emit('input', this.simplemde.value());
-    });
+      this.$emit('input', this.simplemde.value())
+    })
   },
   destroyed() {
-    this.simplemde = null;
+    this.simplemde = null
   }
-};
+}
 </script>
 
 <style>
-  .simplemde-container .CodeMirror {
-    /*height: 150px;*/
-    min-height: 150px;
-  }
-  .simplemde-container .CodeMirror-scroll{
-     min-height: 150px;
-  }
+.simplemde-container .CodeMirror {
+  min-height: 150px;
+}
 
- .simplemde-container .CodeMirror-code{
-   padding-bottom: 40px;
- }
-  .simplemde-container  .editor-statusbar {
-    display: none;
-  }
+.simplemde-container .CodeMirror-scroll {
+  min-height: 150px;
+}
 
-  .simplemde-container .CodeMirror .CodeMirror-code .cm-link {
-    color: #1482F0;
-  }
+.simplemde-container .CodeMirror-code {
+  padding-bottom: 40px;
+}
 
-  .simplemde-container .CodeMirror .CodeMirror-code .cm-string.cm-url {
-    color: #2d3b4d;
-    font-weight: bold;
-  }
+.simplemde-container .editor-statusbar {
+  display: none;
+}
 
-  .simplemde-container .CodeMirror .CodeMirror-code .cm-formatting-link-string.cm-url {
-    padding: 0 2px;
-    font-weight: bold;
-    color: #E61E1E;
-  }
+.simplemde-container .CodeMirror .CodeMirror-code .cm-link {
+  color: #1482F0;
+}
+
+.simplemde-container .CodeMirror .CodeMirror-code .cm-string.cm-url {
+  color: #2d3b4d;
+  font-weight: bold;
+}
+
+.simplemde-container .CodeMirror .CodeMirror-code .cm-formatting-link-string.cm-url {
+  padding: 0 2px;
+  font-weight: bold;
+  color: #E61E1E;
+}
+
+.simplemde-container .editor-toolbar.fullscreen,
+.simplemde-container .CodeMirror-fullscreen {
+  z-index: 1003;
+}
 </style>
 
 

src/components/PanThumb/index.vue

@@ -1,145 +1,140 @@
 <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>
-    export default {
-      name: 'PanThumb',
-      props: {
-        image: {
-          type: String,
-          required: true
-        },
-        zIndex: {
-          type: Number,
-          default: 100
-        },
-        width: {
-          type: String,
-          default: '150px'
-        },
-        height: {
-          type: String,
-          default: '150px'
-        }
-      },
-      data() {
-        return {};
-      }
-    };
+export default {
+  name: 'PanThumb',
+  props: {
+    image: {
+      type: String,
+      required: true
+    },
+    zIndex: {
+      type: Number,
+      default: 100
+    },
+    width: {
+      type: String,
+      default: '150px'
+    },
+    height: {
+      type: String,
+      default: '150px'
+    }
+  }
+}
 </script>
 
 <style scoped>
-    .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);
-    }
+.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);
+}
 
-    .pan-info-roles-container {
-        padding: 20px;
-        text-align: center;
-    }
+.pan-info-roles-container {
+	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;
-    }
+.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;
+}
 
-    .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);
-    }
+.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);
+}
 
-    .pan-info {
-        position: absolute;
-        width: inherit;
-        height: inherit;
-        border-radius: 50%;
-        overflow: hidden;
-        box-shadow: inset 0 0 0 5px rgba(0, 0, 0, 0.05);
-    }
+.pan-info {
+	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);
-    }
+.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);
+}
 
-    .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);
-    }
+.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);
+}
 
-    .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);
-    }
+.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);
+}
 
-    .pan-info p a:hover {
-        background: rgba(255, 255, 255, 0.5);
-    }
+.pan-info p a:hover {
+	background: rgba(255, 255, 255, 0.5);
+}
 
-    .pan-item:hover .pan-thumb {
-        transform: rotate(-110deg);
-    }
+.pan-item:hover .pan-thumb {
+	transform: rotate(-110deg);
+}
 
-    .pan-item:hover .pan-info p a {
-        opacity: 1;
-        transform: translateX(0px) rotate(0deg);
-    }
+.pan-item:hover .pan-info p a {
+	opacity: 1;
+	transform: translateX(0px) rotate(0deg);
+}
 </style>

src/components/Screenfull/index.vue

@@ -0,0 +1,65 @@
+<template>
+  <div>
+    <svg t="1508738709248" @click='click' class="screenfull-svg" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+      p-id="2069" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32">
+      <path d="M333.493443 428.647617 428.322206 333.832158 262.572184 168.045297 366.707916 64.444754 64.09683 64.444754 63.853283 366.570793 167.283957 262.460644Z"
+        p-id="2070"></path>
+      <path d="M854.845439 760.133334 688.61037 593.95864 593.805144 688.764889 759.554142 854.56096 655.44604 958.161503 958.055079 958.161503 958.274066 656.035464Z"
+        p-id="2071"></path>
+      <path d="M688.535669 428.550403 854.31025 262.801405 957.935352 366.921787 957.935352 64.34754 655.809313 64.081481 759.919463 167.535691 593.70793 333.731874Z"
+        p-id="2072"></path>
+      <path d="M333.590658 594.033341 167.8171 759.804852 64.218604 655.67219 64.218604 958.270996 366.342596 958.502263 262.234493 855.071589 428.421466 688.86108Z"
+        p-id="2073"></path>
+    </svg>
+  </div>
+</template>
+
+<script>
+import screenfull from 'screenfull'
+
+export default {
+  name: 'screenfull',
+  props: {
+    width: {
+      type: Number,
+      default: 22
+    },
+    height: {
+      type: Number,
+      default: 22
+    },
+    fill: {
+      type: String,
+      default: '#48576a'
+    }
+  },
+  data() {
+    return {
+      isFullscreen: false
+    }
+  },
+  methods: {
+    click() {
+      if (!screenfull.enabled) {
+        this.$message({
+          message: 'you browser can not work',
+          type: 'warning'
+        })
+        return false
+      }
+      screenfull.toggle()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.screenfull-svg {
+  display: inline-block;
+  cursor: pointer;
+  fill: #5a5e66;;
+  width: 20px;
+  height: 20px;
+  vertical-align: 10px;
+}
+</style>

src/components/ScrollBar/index.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="scroll-container" ref="scrollContainer" @wheel.prevent="handleScroll" >
+    <div class="scroll-wrapper" ref="scrollWrapper" :style="{top: top + 'px'}">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+const delta = 15
+
+export default {
+  name: 'scrollBar',
+  data() {
+    return {
+      top: 0
+    }
+  },
+  methods: {
+    handleScroll(e) {
+      const eventDelta = e.wheelDelta || -e.deltaY * 3
+      const $container = this.$refs.scrollContainer
+      const $containerHeight = $container.offsetHeight
+      const $wrapper = this.$refs.scrollWrapper
+      const $wrapperHeight = $wrapper.offsetHeight
+      if (eventDelta > 0) {
+        this.top = Math.min(0, this.top + eventDelta)
+      } else {
+        if ($containerHeight - delta < $wrapperHeight) {
+          if (this.top < -($wrapperHeight - $containerHeight + delta)) {
+            this.top = this.top
+          } else {
+            this.top = Math.max(this.top + eventDelta, $containerHeight - $wrapperHeight - delta)
+          }
+        } else {
+          this.top = 0
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+@import '../../styles/variables.scss';
+
+.scroll-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background-color: $menuBg;
+  .scroll-wrapper {
+    position: absolute;
+     width: 100%!important;
+  }
+}
+</style>

src/components/ScrollPane/index.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="scroll-container" ref="scrollContainer" @wheel.prevent="handleScroll">
+    <div class="scroll-wrapper" ref="scrollWrapper" :style="{left: left + 'px'}">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+const padding = 15 // tag's padding
+
+export default {
+  name: 'scrollPane',
+  data() {
+    return {
+      left: 0
+    }
+  },
+  methods: {
+    handleScroll(e) {
+      const eventDelta = e.wheelDelta || -e.deltaY * 3
+      const $container = this.$refs.scrollContainer
+      const $containerWidth = $container.offsetWidth
+      const $wrapper = this.$refs.scrollWrapper
+      const $wrapperWidth = $wrapper.offsetWidth
+
+      if (eventDelta > 0) {
+        this.left = Math.min(0, this.left + eventDelta)
+      } else {
+        if ($containerWidth - padding < $wrapperWidth) {
+          if (this.left < -($wrapperWidth - $containerWidth + padding)) {
+            this.left = this.left
+          } else {
+            this.left = Math.max(this.left + eventDelta, $containerWidth - $wrapperWidth - padding)
+          }
+        } else {
+          this.left = 0
+        }
+      }
+    },
+    moveToTarget($target) {
+      const $container = this.$refs.scrollContainer
+      const $containerWidth = $container.offsetWidth
+      const $targetLeft = $target.offsetLeft
+      const $targetWidth = $target.offsetWidth
+
+      if ($targetLeft < -this.left) {
+        // tag in the left
+        this.left = -$targetLeft + padding
+      } else if ($targetLeft + padding > -this.left && $targetLeft + $targetWidth < -this.left + $containerWidth - padding) {
+        // tag in the current view
+        // eslint-disable-line
+      } else {
+        // tag in the right
+        this.left = -($targetLeft - ($containerWidth - $targetWidth) + padding)
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.scroll-container {
+  white-space: nowrap;
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  .scroll-wrapper {
+    position: absolute;
+  }
+}
+</style>

src/components/Share/dropdownMenu.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="share-dropdown-menu" :class="{active:isActive}">
+    <div class="share-dropdown-menu-wrapper">
+      <span class="share-dropdown-menu-title" @click.self="clickTitle">{{title}}</span>
+      <div class="share-dropdown-menu-item" v-for="(item,index) of items" :key='index'>
+        <a v-if="item.href" :href="item.href" target="_blank">{{item.title}}</a>
+        <span v-else>{{item.title}}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    items: {
+      type: Array
+    },
+    title: {
+      type: String,
+      default: 'vue'
+    }
+  },
+  data() {
+    return {
+      isActive: false
+    }
+  },
+  methods: {
+    clickTitle() {
+      this.isActive = !this.isActive
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" >
+$n: 6; //和items.length 相同
+$t: .1s;
+.share-dropdown-menu {
+  width: 250px;
+  position: relative;
+  z-index: 1;
+  &-title {
+    width: 100%;
+    display: block;
+    cursor: pointer;
+    background: black;
+    color: white;
+    height: 60px;
+    line-height: 60px;
+    font-size: 20px;
+    text-align: center;
+    z-index: 2;
+    transform: translate3d(0,0,0);
+  }
+  &-wrapper {
+    position: relative;
+  }
+  &-item {
+    text-align: center;
+    position: absolute;
+    width: 100%;
+    background: #e0e0e0;
+    line-height: 60px;
+    height: 60px;
+    cursor: pointer;
+    font-size: 20px;
+    opacity: 1;
+    transition: transform 0.28s ease;
+    &:hover {
+      background: black;
+      color: white;
+    }
+    @for $i from 1 through $n {
+      &:nth-of-type(#{$i}) {
+        z-index: -1;
+        transition-delay: $i*$t;
+        transform: translate3d(0, -60px, 0);
+      }
+    }
+  }
+  &.active {
+    .share-dropdown-menu-wrapper {
+      z-index: 1;
+    }
+    .share-dropdown-menu-item {
+      @for $i from 1 through $n {
+        &:nth-of-type(#{$i}) {
+         transition-delay: ($n - $i)*$t;
+          transform: translate3d(0, ($i - 1)*60px, 0);
+        }
+      }
+    }
+  }
+}
+</style>

src/components/SplitPane/Pane.vue

@@ -1,41 +0,0 @@
-<template>
-    <div :class="classes">
-        <slot></slot>
-    </div>
-</template>
-
-<script>
-    export default {
-      name: 'Pane',
-      data() {
-        const classes = ['Pane', this.$parent.split, 'className'];
-        return {
-          classes: classes.join(' '),
-          percent: 50
-        }
-      }
-    }
-</script>
-
-<style>
-    .splitter-pane.vertical.splitter-paneL{
-        position: absolute;
-        left: 0px;
-        height: 100%;
-    }
-    .splitter-pane.vertical.splitter-paneR{
-        position: absolute;
-        right: 0px;
-        height: 100%;
-    }
-    .splitter-pane.horizontal.splitter-paneL{
-        position: absolute;
-        top: 0px;
-        width: 100%;
-    }
-    .splitter-pane.horizontal.splitter-paneR{
-        position: absolute;
-        bottom: 0px;
-        width: 100%;
-    }
-</style>

src/components/SplitPane/Resizer.vue

@@ -1,71 +0,0 @@
-<template>
-    <div :class="classes" @mousedown="onMouseDown"></div>
-</template>
-<script>
-    export default {
-      props: {
-        split: {
-          validator(value) {
-            return ['vertical', 'horizontal'].indexOf(value) >= 0
-          },
-          required: true
-        },
-        onMouseDown: {
-          type: Function,
-          required: true
-        }
-      },
-      data() {
-        const classes = ['Resizer', this.split, 'className'];
-        return {
-          classes: classes.join(' ')
-        }
-      }
-    }
-</script>
-<style scoped>
-    .Resizer {
-        -moz-box-sizing: border-box;
-        -webkit-box-sizing: border-box;
-        box-sizing: border-box;
-        background: #000;
-        position: absolute;
-        opacity: .2;
-        z-index: 1;
-        /*-moz-background-clip: padding;*/
-        /*-webkit-background-clip: padding;*/
-        /*background-clip: padding-box;*/
-    }
-
-    /*.Resizer:hover {*/
-        /*-webkit-transition: all 2s ease;*/
-        /*transition: all 2s ease;*/
-    /*}*/
-
-    .Resizer.horizontal {
-        height: 11px;
-        margin: -5px 0;
-        border-top: 5px solid rgba(255, 255, 255, 0);
-        border-bottom: 5px solid rgba(255, 255, 255, 0);
-        cursor: row-resize;
-        width: 100%;
-    }
-
-    .Resizer.horizontal:hover {
-        border-top: 5px solid rgba(0, 0, 0, 0.5);
-        border-bottom: 5px solid rgba(0, 0, 0, 0.5);
-    }
-
-    .Resizer.vertical {
-        width: 11px;
-        height: 100%;
-        border-left: 5px solid rgba(255, 255, 255, 0);
-        border-right: 5px solid rgba(255, 255, 255, 0);
-        cursor: col-resize;
-    }
-
-    .Resizer.vertical:hover {
-        border-left: 5px solid rgba(0, 0, 0, 0.5);
-        border-right: 5px solid rgba(0, 0, 0, 0.5);
-    }
-</style>

src/components/SplitPane/index.vue

@@ -1,111 +0,0 @@
-<template>
-    <div ref :style="{ cursor, userSelect}" class="vue-splitter-container clearfix" @mouseup="onMouseUp"
-         @mousemove="onMouseMove">
-        <Pane class="splitter-pane splitter-paneL" :split="split" :style="{ [type]: percent+'%'}">
-            <slot name="paneL"></slot>
-        </Pane>
-        <Resizer :style="{ [resizeType]: percent+'%'}" :split="split" :onMouseDown="onMouseDown"
-                 @click="onClick"></Resizer>
-        <Pane class="splitter-pane splitter-paneR" :split="split" :style="{ [type]: 100-percent+'%'}">
-            <slot name="paneR"></slot>
-        </Pane>
-    </div>
-</template>
-<style scoped>
-    .clearfix:after {
-        visibility: hidden;
-        display: block;
-        font-size: 0;
-        content: " ";
-        clear: both;
-        height: 0;
-    }
-    .vue-splitter-container {
-        height: 100%;
-        /*display: flex;*/
-        position: relative;
-    }
-</style>
-
-<script>
-    import Resizer from './Resizer';
-    import Pane from './Pane';
-    export default {
-      name: 'splitPane',
-      components: { Resizer, Pane },
-      props: {
-        margin: {
-          type: Number,
-          default: 10
-        },
-        split: {
-          validator(value) {
-            return ['vertical', 'horizontal'].indexOf(value) >= 0
-          },
-          required: true
-        }
-      },
-      data() {
-        return {
-          active: false,
-          hasMoved: false,
-          height: null,
-          percent: 50,
-          type: this.split === 'vertical' ? 'width' : 'height',
-          resizeType: this.split === 'vertical' ? 'left' : 'top'
-        }
-      },
-      computed: {
-        userSelect() {
-          return this.active ? 'none' : ''
-        },
-        cursor() {
-          return this.active ? 'col-resize' : ''
-        }
-      },
-      methods: {
-        onClick() {
-          if (!this.hasMoved) {
-            this.percent = 50;
-            this.$emit('resize');
-          }
-        },
-        onMouseDown() {
-          this.active = true;
-          this.hasMoved = false;
-        },
-        onMouseUp() {
-          this.active = false;
-        },
-        onMouseMove(e) {
-          if (e.buttons === 0 || e.which === 0) {
-            this.active = false;
-          }
-          if (this.active) {
-            let offset = 0;
-            let target = e.currentTarget;
-            if (this.split === 'vertical') {
-              while (target) {
-                offset += target.offsetLeft;
-                target = target.offsetParent;
-              }
-            } else {
-              while (target) {
-                offset += target.offsetTop;
-                target = target.offsetParent;
-              }
-            }
-
-            const currentPage = this.split === 'vertical' ? e.pageX : e.pageY;
-            const targetOffset = this.split === 'vertical' ? e.currentTarget.offsetWidth : e.currentTarget.offsetHeight;
-            const percent = Math.floor(((currentPage - offset) / targetOffset) * 10000) / 100;
-            if (percent > this.margin && percent < 100 - this.margin) {
-              this.percent = percent;
-            }
-            this.$emit('resize');
-            this.hasMoved = true;
-          }
-        }
-      }
-    }
-</script>

src/components/Sticky/index.vue

@@ -1,73 +1,76 @@
 <template>
-    <div :style="{height:height+'px',zIndex:zIndex}">
-        <div :class="className" :style="{top:stickyTop+'px',zIndex:zIndex,position:position,width:width,height:height+'px'}">
-            <slot>
-                <div>sticky</div>
-            </slot>
-        </div>
+  <div :style="{height:height+'px',zIndex:zIndex}">
+    <div :class="className" :style="{top:stickyTop+'px',zIndex:zIndex,position:position,width:width,height:height+'px'}">
+      <slot>
+        <div>sticky</div>
+      </slot>
     </div>
+  </div>
 </template>
-<script>
-    export default {
-      name: 'Sticky',
-      props: {
-        stickyTop: {
-          type: Number,
-          default: 0
-        },
-        zIndex: {
-          type: Number,
-          default: 1
-        },
-        className: {
-          type: String
-        }
-      },
-      data() {
-        return {
-          active: false,
-          position: '',
-          currentTop: '',
-          width: undefined,
-          height: undefined,
-          child: null,
-          stickyHeight: 0
 
-        };
-      },
-      methods: {
-        sticky() {
-          if (this.active) {
-            return
-          }
-          this.position = 'fixed';
-          this.active = true;
-          this.width = this.width + 'px';
-        },
-        reset() {
-          if (!this.active) {
-            return
-          }
-          this.position = '';
-          this.width = 'auto'
-          this.active = false
-        },
-        handleScroll() {
-          this.width = this.$el.getBoundingClientRect().width;
-          const offsetTop = this.$el.getBoundingClientRect().top;
-          if (offsetTop <= this.stickyTop) {
-            this.sticky();
-            return
-          }
-          this.reset()
-        }
-      },
-      mounted() {
-        this.height = this.$el.getBoundingClientRect().height;
-        window.addEventListener('scroll', this.handleScroll);
-      },
-      destroyed() {
-        window.removeEventListener('scroll', this.handleScroll);
+<script>
+export default {
+  name: 'Sticky',
+  props: {
+    stickyTop: {
+      type: Number,
+      default: 0
+    },
+    zIndex: {
+      type: Number,
+      default: 1
+    },
+    className: {
+      type: String
+    }
+  },
+  data() {
+    return {
+      active: false,
+      position: '',
+      currentTop: '',
+      width: undefined,
+      height: undefined,
+      child: null,
+      stickyHeight: 0
+    }
+  },
+  mounted() {
+    this.height = this.$el.getBoundingClientRect().height
+    window.addEventListener('scroll', this.handleScroll)
+  },
+  activated() {
+    this.handleScroll()
+  },
+  destroyed() {
+    window.removeEventListener('scroll', this.handleScroll)
+  },
+  methods: {
+    sticky() {
+      if (this.active) {
+        return
       }
-    };
+      this.position = 'fixed'
+      this.active = true
+      this.width = this.width + 'px'
+    },
+    reset() {
+      if (!this.active) {
+        return
+      }
+      this.position = ''
+      this.width = 'auto'
+      this.active = false
+    },
+    handleScroll() {
+      this.width = this.$el.getBoundingClientRect().width
+      const offsetTop = this.$el.getBoundingClientRect().top
+      if (offsetTop <= this.stickyTop) {
+        this.sticky()
+        return
+      }
+      this.reset()
+    }
+  }
+}
 </script>

src/components/SvgIcon/index.vue

@@ -0,0 +1,42 @@
+<template>
+  <svg :class="svgClass" aria-hidden="true">
+    <use :xlink:href="iconName"></use>
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'svg-icon',
+  props: {
+    iconClass: {
+      type: String,
+      required: true
+    },
+    className: {
+      type: String
+    }
+  },
+  computed: {
+    iconName() {
+      return `#icon-${this.iconClass}`
+    },
+    svgClass() {
+      if (this.className) {
+        return 'svg-icon ' + this.className
+      } else {
+        return 'svg-icon'
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.svg-icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+</style>

src/components/TextHoverEffect/Mallki.vue

@@ -0,0 +1,113 @@
+<template>
+  <a class="link--mallki" :class="className" href="#">
+    {{text}}
+    <span :data-letters="text"></span>
+    <span :data-letters="text"></span>
+  </a>
+</template>
+
+<script>
+export default {
+  props: {
+    className: {
+      type: String
+    },
+    text: {
+      type: String,
+      default: 'vue-element-admin'
+    }
+  }
+}
+</script>
+
+
+<style>
+/* Mallki */
+.link--mallki {
+  font-weight: 800;
+  color: #4dd9d5;
+  font-family: 'Dosis', sans-serif;
+  -webkit-transition: color 0.5s 0.25s;
+  transition: color 0.5s 0.25s;
+  overflow: hidden;
+  position: relative;
+display: inline-block;
+    line-height: 1;
+        outline: none;
+    text-decoration: none;
+}
+
+.link--mallki:hover {
+  -webkit-transition: none;
+  transition: none;
+  color: transparent;
+}
+
+.link--mallki::before {
+  content: '';
+  width: 100%;
+  height: 6px;
+  margin: -3px 0 0 0;
+  background: #3888fa;
+  position: absolute;
+  left: 0;
+  top: 50%;
+  -webkit-transform: translate3d(-100%, 0, 0);
+  transform: translate3d(-100%, 0, 0);
+  -webkit-transition: -webkit-transform 0.4s;
+  transition: transform 0.4s;
+  -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
+  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
+}
+
+.link--mallki:hover::before {
+  -webkit-transform: translate3d(100%, 0, 0);
+  transform: translate3d(100%, 0, 0);
+}
+
+.link--mallki span {
+  position: absolute;
+  height: 50%;
+  width: 100%;
+  left: 0;
+  top: 0;
+  overflow: hidden;
+}
+
+.link--mallki span::before {
+  content: attr(data-letters);
+  color: red;
+  position: absolute;
+  left: 0;
+  width: 100%;
+  color: #3888fa;
+  -webkit-transition: -webkit-transform 0.5s;
+  transition: transform 0.5s;
+}
+
+.link--mallki span:nth-child(2) {
+  top: 50%;
+}
+
+.link--mallki span:first-child::before {
+  top: 0;
+  -webkit-transform: translate3d(0, 100%, 0);
+  transform: translate3d(0, 100%, 0);
+}
+
+.link--mallki span:nth-child(2)::before {
+  bottom: 0;
+  -webkit-transform: translate3d(0, -100%, 0);
+  transform: translate3d(0, -100%, 0);
+}
+
+.link--mallki:hover span::before {
+  -webkit-transition-delay: 0.3s;
+  transition-delay: 0.3s;
+  -webkit-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
+  -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
+  transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
+}
+
+</style>

src/components/ThemePicker/index.vue

@@ -0,0 +1,144 @@
+<template>
+  <el-color-picker
+    class="theme-picker"
+    popper-class="theme-picker-dropdown"
+    v-model="theme"></el-color-picker>
+</template>
+
+<script>
+
+const version = require('element-ui/package.json').version // element-ui version from node_modules
+const ORIGINAL_THEME = '#409EFF' // default color
+
+export default {
+  data() {
+    return {
+      chalk: '', // content of theme-chalk css
+      theme: ORIGINAL_THEME
+    }
+  },
+  watch: {
+    theme(val, oldVal) {
+      if (typeof val !== 'string') return
+      const themeCluster = this.getThemeCluster(val.replace('#', ''))
+      const originalCluster = this.getThemeCluster(oldVal.replace('#', ''))
+      console.log(themeCluster, originalCluster)
+      const getHandler = (variable, id) => {
+        return () => {
+          const originalCluster = this.getThemeCluster(ORIGINAL_THEME.replace('#', ''))
+          const newStyle = this.updateStyle(this[variable], originalCluster, themeCluster)
+
+          let styleTag = document.getElementById(id)
+          if (!styleTag) {
+            styleTag = document.createElement('style')
+            styleTag.setAttribute('id', id)
+            document.head.appendChild(styleTag)
+          }
+          styleTag.innerText = newStyle
+        }
+      }
+
+      const chalkHandler = getHandler('chalk', 'chalk-style')
+
+      if (!this.chalk) {
+        const url = `https://unpkg.com/element-ui@${version}/lib/theme-chalk/index.css`
+        this.getCSSString(url, chalkHandler, 'chalk')
+      } else {
+        chalkHandler()
+      }
+
+      const styles = [].slice.call(document.querySelectorAll('style'))
+        .filter(style => {
+          const text = style.innerText
+          return new RegExp(oldVal, 'i').test(text) && !/Chalk Variables/.test(text)
+        })
+      styles.forEach(style => {
+        const { innerText } = style
+        if (typeof innerText !== 'string') return
+        style.innerText = this.updateStyle(innerText, originalCluster, themeCluster)
+      })
+      this.$message({
+        message: '换肤成功',
+        type: 'success'
+      })
+    }
+  },
+
+  methods: {
+    updateStyle(style, oldCluster, newCluster) {
+      let newStyle = style
+      oldCluster.forEach((color, index) => {
+        newStyle = newStyle.replace(new RegExp(color, 'ig'), newCluster[index])
+      })
+      return newStyle
+    },
+
+    getCSSString(url, callback, variable) {
+      const xhr = new XMLHttpRequest()
+      xhr.onreadystatechange = () => {
+        if (xhr.readyState === 4 && xhr.status === 200) {
+          this[variable] = xhr.responseText.replace(/@font-face{[^}]+}/, '')
+          callback()
+        }
+      }
+      xhr.open('GET', url)
+      xhr.send()
+    },
+
+    getThemeCluster(theme) {
+      const tintColor = (color, tint) => {
+        let red = parseInt(color.slice(0, 2), 16)
+        let green = parseInt(color.slice(2, 4), 16)
+        let blue = parseInt(color.slice(4, 6), 16)
+
+        if (tint === 0) { // when primary color is in its rgb space
+          return [red, green, blue].join(',')
+        } else {
+          red += Math.round(tint * (255 - red))
+          green += Math.round(tint * (255 - green))
+          blue += Math.round(tint * (255 - blue))
+
+          red = red.toString(16)
+          green = green.toString(16)
+          blue = blue.toString(16)
+
+          return `#${red}${green}${blue}`
+        }
+      }
+
+      const shadeColor = (color, shade) => {
+        let red = parseInt(color.slice(0, 2), 16)
+        let green = parseInt(color.slice(2, 4), 16)
+        let blue = parseInt(color.slice(4, 6), 16)
+
+        red = Math.round((1 - shade) * red)
+        green = Math.round((1 - shade) * green)
+        blue = Math.round((1 - shade) * blue)
+
+        red = red.toString(16)
+        green = green.toString(16)
+        blue = blue.toString(16)
+
+        return `#${red}${green}${blue}`
+      }
+
+      const clusters = [theme]
+      for (let i = 0; i <= 9; i++) {
+        clusters.push(tintColor(theme, Number((i / 10).toFixed(2))))
+      }
+      clusters.push(shadeColor(theme, 0.1))
+      return clusters
+    }
+  }
+}
+</script>
+
+<style>
+.theme-picker .el-color-picker__trigger {
+  vertical-align: middle;
+}
+
+.theme-picker-dropdown .el-color-dropdown__link-btn {
+  display: none;
+}
+</style>

src/components/Tinymce/components/editorAudio.vue

@@ -1,119 +0,0 @@
-<template>
-    <div class="upload-container">
-        <el-button :style="{background:color,borderColor:color}" @click=" dialogVisible=true" type="primary">上传音频
-        </el-button>
-        <el-dialog v-model="dialogVisible">
-            <el-form ref="form" :model="form" :rules="rules" label-width="100px" label-position="right">
-                <el-upload
-                        class="editor-audio-upload"
-                        action="https://upload.qbox.me"
-                        :data="dataObj"
-                        :show-file-list="true"
-                        :file-list="audioList"
-                        :on-success="handleAudioScucess"
-                        :on-change="handleAudioChange"
-                        :before-upload="audioBeforeUpload">
-                    <el-button size="small" type="primary">上传音频</el-button>
-                </el-upload>
-                <el-form-item prop="url" label="音频URL">
-                    <el-input v-model="form.url"></el-input>
-                </el-form-item>
-                <el-form-item prop="title" label="音频标题">
-                    <el-input v-model="form.title"></el-input>
-                </el-form-item>
-                <el-form-item label="音频文本">
-                    <el-input type="textarea" :autosize="{ minRows: 2}" v-model="form.text"></el-input>
-                </el-form-item>
-            </el-form>
-            <el-button @click="dialogVisible = false">取 消</el-button>
-            <el-button type="primary" @click="handleSubmit">确 定</el-button>
-
-        </el-dialog>
-    </div>
-</template>
-<script>
-    import { getToken } from 'api/qiniu';
-
-    export default {
-      name: 'editorAudioUpload',
-      props: {
-        color: {
-          type: String,
-          default: '#20a0ff'
-        }
-      },
-      data() {
-        return {
-          dialogVisible: false,
-          dataObj: { token: '', key: '' },
-          audioList: [],
-          tempAudioUrl: '',
-          form: {
-            title: '',
-            url: '',
-            text: ''
-          },
-          rules: {
-            title: [
-                        { required: true, trigger: 'blur' }
-            ],
-            url: [
-                        { required: true, trigger: 'blur' }
-            ]
-          }
-        };
-      },
-      methods: {
-        handleSubmit() {
-          this.$refs.form.validate(valid => {
-            if (valid) {
-              this.$emit('successCBK', this.form);
-              this.dialogVisible = false;
-              this.form = {
-                title: '',
-                url: '',
-                text: ''
-              }
-            } else {
-              this.$message('填写有误');
-              return false;
-            }
-          });
-        },
-        handleAudioChange(file, fileList) {
-          this.audioList = fileList.slice(-1);
-        },
-        handleAudioScucess() {
-          this.form.url = this.tempAudioUrl
-        },
-        audioBeforeUpload() {
-          const _self = this;
-          return new Promise((resolve, reject) => {
-            getToken().then(response => {
-              const key = response.data.qiniu_key;
-              const token = response.data.qiniu_token;
-              _self._data.dataObj.token = token;
-              _self._data.dataObj.key = key;
-              this.tempAudioUrl = response.data.qiniu_url;
-              resolve(true);
-            }).catch(err => {
-              console.log(err);
-              reject(false)
-            });
-          });
-        }
-      }
-    };
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-    .upload-container {
-        .editor-audio-upload {
-            button {
-                float: left;
-                margin-left: 30px;
-                margin-bottom: 20px;
-            }
-        }
-    }
-</style>

src/components/Tinymce/components/editorImage.vue

@@ -1,82 +1,89 @@
 <template>
-    <div class="upload-container">
-        <el-button icon='upload' :style="{background:color,borderColor:color}" @click=" dialogVisible=true" type="primary">上传图片
-        </el-button>
-        <el-dialog v-model="dialogVisible">
-            <el-upload
-                    class="editor-slide-upload"
-                    action="https://httpbin.org/post"
-                    :data="dataObj"
-                    :multiple="true"
-                    :file-list="fileList"
-                    :show-file-list="true"
-                    list-type="picture-card"
-                    :on-remove="handleRemove"
-                    :on-success="handleImageScucess">
-                <el-button size="small" type="primary">点击上传</el-button>
-            </el-upload>
-            <el-button @click="dialogVisible = false">取 消</el-button>
-            <el-button type="primary" @click="handleSubmit">确 定</el-button>
-        </el-dialog>
-    </div>
+  <div class="upload-container">
+    <el-button icon='upload' :style="{background:color,borderColor:color}" @click=" dialogVisible=true" type="primary">上传图片
+    </el-button>
+    <el-dialog :visible.sync="dialogVisible">
+      <el-upload class="editor-slide-upload" action="https://httpbin.org/post" :multiple="true" :file-list="fileList" :show-file-list="true"
+        list-type="picture-card" :on-remove="handleRemove" :on-success="handleSuccess" :before-upload="beforeUpload">
+        <el-button size="small" type="primary">点击上传</el-button>
+      </el-upload>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+      <el-button type="primary" @click="handleSubmit">确 定</el-button>
+    </el-dialog>
+  </div>
 </template>
-<script>
-    import { getToken } from 'api/qiniu';
 
-    export default {
-      name: 'editorSlideUpload',
-      props: {
-        color: {
-          type: String,
-          default: '#20a0ff'
-        }
-      },
-      data() {
-        return {
-          dialogVisible: false,
-          dataObj: { token: '', key: '' },
-          list: [],
-          fileList: []
-        };
-      },
-      methods: {
-        handleSubmit() {
-          const arr = this.list.map(v => v.url);
-          this.$emit('successCBK', arr);
-          this.list = [];
-          this.fileList = [];
-          this.dialogVisible = false;
-        },
-        handleRemove(file) {
-          const key = file.response.key;
-          for (let i = 0, len = this.list.length; i < len; i++) {
-            if (this.list[i].key === key) {
-              this.list.splice(i, 1);
-              return
-            }
-          }
-        },
-        handleImageScucess(file) {
-          this.list.push({ url: file.files.file });
-        },
-        beforeUpload() {
-          const _self = this;
-          return new Promise((resolve, reject) => {
-            getToken().then(response => {
-              const key = response.data.qiniu_key;
-              const token = response.data.qiniu_token;
-              _self._data.dataObj.token = token;
-              _self._data.dataObj.key = key;
-              this.list.push({ key, url: response.data.qiniu_url });
-              resolve(true);
-            }).catch(err => {
-              console.log(err);
-              reject(false)
-            });
-          });
+<script>
+// import { getToken } from 'api/qiniu'
+
+export default {
+  name: 'editorSlideUpload',
+  props: {
+    color: {
+      type: String,
+      default: '#20a0ff'
+    }
+  },
+  data() {
+    return {
+      dialogVisible: false,
+      listObj: {},
+      fileList: []
+    }
+  },
+  methods: {
+    checkAllSuccess() {
+      return Object.keys(this.listObj).every(item => this.listObj[item].hasSuccess)
+    },
+    handleSubmit() {
+      const arr = Object.keys(this.listObj).map(v => this.listObj[v])
+      if (!this.checkAllSuccess()) {
+        this.$message('请等待所有图片上传成功 或 出现了网络问题，请刷新页面重新上传！')
+        return
+      }
+      console.log(arr)
+      this.$emit('successCBK', arr)
+      this.listObj = {}
+      this.fileList = []
+      this.dialogVisible = false
+    },
+    handleSuccess(response, file) {
+      const uid = file.uid
+      const objKeyArr = Object.keys(this.listObj)
+      for (let i = 0, len = objKeyArr.length; i < len; i++) {
+        if (this.listObj[objKeyArr[i]].uid === uid) {
+          this.listObj[objKeyArr[i]].url = response.files.file
+          this.listObj[objKeyArr[i]].hasSuccess = true
+          return
         }
       }
-    };
+    },
+    handleRemove(file) {
+      const uid = file.uid
+      const objKeyArr = Object.keys(this.listObj)
+      for (let i = 0, len = objKeyArr.length; i < len; i++) {
+        if (this.listObj[objKeyArr[i]].uid === uid) {
+          delete this.listObj[objKeyArr[i]]
+          return
+        }
+      }
+    },
+    beforeUpload(file) {
+      const _self = this
+      const _URL = window.URL || window.webkitURL
+      const fileName = file.uid
+      this.listObj[fileName] = {}
+      return new Promise((resolve, reject) => {
+        const img = new Image()
+        img.src = _URL.createObjectURL(file)
+        img.onload = function() {
+          _self.listObj[fileName] = { hasSuccess: false, uid: file.uid, width: this.width, height: this.height }
+        }
+        resolve(true)
+      })
+    }
+  }
+}
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>

src/components/Tinymce/components/editorSlide.vue

@@ -1,82 +0,0 @@
-<template>
-    <div class="upload-container">
-        <el-button :style="{background:color,borderColor:color}" @click=" dialogVisible=true" type="primary">上传轮播图
-        </el-button>
-        <el-dialog v-model="dialogVisible">
-            <el-upload
-                    class="editor-slide-upload"
-                    action="https://upload.qbox.me"
-                    :data="dataObj"
-                    :multiple="true"
-                    :show-file-list="true"
-                    list-type="picture-card"
-                    :on-remove="handleRemove"
-                    :before-upload="beforeUpload">
-                <el-button size="small" type="primary">点击上传</el-button>
-            </el-upload>
-            <el-button @click="dialogVisible = false">取 消</el-button>
-            <el-button type="primary" @click="handleSubmit">确 定</el-button>
-        </el-dialog>
-    </div>
-</template>
-<script>
-    import { getToken } from 'api/qiniu';
-
-    export default {
-      name: 'editorSlideUpload',
-      props: {
-        color: {
-          type: String,
-          default: '#20a0ff'
-        }
-      },
-      data() {
-        return {
-          dialogVisible: false,
-          dataObj: { token: '', key: '' },
-          list: []
-        };
-      },
-      methods: {
-        handleSubmit() {
-          const arr = this.list.map(v => v.url);
-          this.$emit('successCBK', arr);
-          this.list = [];
-          this.dialogVisible = false;
-        },
-        handleRemove(file) {
-          const key = file.response.key;
-          for (let i = 0, len = this.list.length; i < len; i++) {
-            if (this.list[i].key === key) {
-              this.list.splice(i, 1);
-              return
-            }
-          }
-        },
-        beforeUpload() {
-          const _self = this;
-          return new Promise((resolve, reject) => {
-            getToken().then(response => {
-              const key = response.data.qiniu_key;
-              const token = response.data.qiniu_token;
-              _self._data.dataObj.token = token;
-              _self._data.dataObj.key = key;
-              this.list.push({ key, url: response.data.qiniu_url });
-              resolve(true);
-            }).catch(err => {
-              console.log(err);
-              reject(false)
-            });
-          });
-        }
-      }
-    };
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-    .upload-container {
-        .editor-slide-upload {
-            margin-bottom: 20px;
-        }
-    }
-</style>

src/components/Tinymce/components/editorVideo.vue

@@ -1,167 +0,0 @@
-<template>
-    <div class="upload-container">
-        <el-button  :style="{background:color,borderColor:color}" @click=" dialogVisible=true" type="primary">上传视频</el-button>
-        <el-dialog v-model="dialogVisible">
-            <el-form ref="form" :model="form" :rules="rules" label-width="140px" label-position="left">
-                <el-upload
-                        class="editor-video-upload"
-                        action="https://upload.qbox.me"
-                        :data="dataObj"
-                        :show-file-list="true"
-                        :file-list="videoList"
-                        :on-success="handleVideoScucess"
-                        :on-change="handleVideoChange"
-                        :before-upload="videoBeforeUpload">
-                    <el-button size="small" type="primary">上传视频</el-button>
-                </el-upload>
-                <el-form-item prop="url" label="视频URL">
-                    <el-input v-model="form.url"></el-input>
-                </el-form-item>
-                <el-form-item prop="title" label="视频标题">
-                    <el-input v-model="form.title"></el-input>
-                </el-form-item>
-                 <el-form-item label="上传视频封面图">
-                </el-form-item>
-                <el-upload
-                        class="image-uploader"
-                        action="https://upload.qbox.me"
-                        :show-file-list="false"
-                        :data="dataObj"
-                        :on-success="handleImageScucess"
-                        :before-upload="beforeImageUpload">
-                    <img v-if="form.image" :src="form.image" class="image-uploader-image">
-                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-                </el-upload>
-            </el-form>
-            <el-button @click="dialogVisible = false">取 消</el-button>
-            <el-button type="primary" @click="handleSubmit">确 定</el-button>
-
-        </el-dialog>
-    </div>
-</template>
-<script>
-    import { getToken } from 'api/qiniu';
-
-    export default {
-      name: 'editorVideoUpload',
-      props: {
-        color: {
-          type: String,
-          default: '#20a0ff'
-        }
-      },
-      data() {
-        return {
-          dialogVisible: false,
-          dataObj: { token: '', key: '' },
-          videoList: [],
-          tempVideoUrl: '',
-          tempImageUrl: '',
-          form: {
-            title: '',
-            url: '',
-            image: ''
-          },
-          rules: {
-            url: [
-                        { required: true, trigger: 'blur' }
-            ],
-            title: [
-                        { required: true, trigger: 'blur' }
-            ]
-          }
-        };
-      },
-      methods: {
-        handleSubmit() {
-          this.$refs.form.validate(valid => {
-            if (valid) {
-              if (this.form.image.length > 0) {
-                this.$emit('successCBK', this.form);
-                this.dialogVisible = false;
-                this.form = {
-                  title: '',
-                  url: '',
-                  image: ''
-                }
-              } else {
-                this.$message('请上传图片');
-              }
-            } else {
-              this.$message('填写有误');
-              return false;
-            }
-          });
-        },
-        handleVideoChange(file, fileList) {
-          this.videoList = fileList.slice(-1);
-        },
-        handleVideoScucess() {
-          this.form.url = this.tempVideoUrl
-        },
-        videoBeforeUpload() {
-          const _self = this;
-          return new Promise((resolve, reject) => {
-            getToken().then(response => {
-              const key = response.data.qiniu_key;
-              const token = response.data.qiniu_token;
-              _self._data.dataObj.token = token;
-              _self._data.dataObj.key = key;
-              this.tempVideoUrl = response.data.qiniu_url;
-              resolve(true);
-            }).catch(err => {
-              console.log(err);
-              reject(false)
-            });
-          });
-        },
-        handleImageScucess() {
-          this.form.image = this.tempImageUrl
-        },
-        beforeImageUpload() {
-          const _self = this;
-          return new Promise((resolve, reject) => {
-            getToken().then(response => {
-              const key = response.data.qiniu_key;
-              const token = response.data.qiniu_token;
-              _self._data.dataObj.token = token;
-              _self._data.dataObj.key = key;
-              this.tempImageUrl = response.data.qiniu_url;
-              resolve(true);
-            }).catch(err => {
-              console.log(err);
-              reject(false)
-            });
-          });
-        }
-      }
-    };
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-    .upload-container {
-        .editor-video-upload {
-            button {
-                float: left;
-            }
-        }
-        .image-uploader {
-            margin: 5px auto;
-            width: 400px;
-            height: 200px;
-            border: 1px dashed #d9d9d9;
-            border-radius: 6px;
-            cursor: pointer;
-            position: relative;
-            overflow: hidden;
-            line-height: 200px;
-            i {
-                font-size: 28px;
-                color: #8c939d;
-            }
-            .image-uploader-image {
-                height: 200px;
-            }
-        }
-    }
-</style>

src/components/Tinymce/index.vue

@@ -1,229 +1,152 @@
 <template>
-  <div class='tinymce-container editor-container'>
-    <textarea class='tinymce-textarea' :id="id"></textarea>
-    <!--业务需求可删除-->
+  <div class="tinymce-container editor-container">
+    <textarea class="tinymce-textarea" :id="tinymceId"></textarea>
     <div class="editor-custom-btn-container">
-      <editorSlide v-if="customButton.indexOf('editorSlide')>=0" color="#3A71A8" class="editor-upload-btn" @successCBK="slideSuccessCBK"></editorSlide>
-      <editorAudio v-if="customButton.indexOf('editorAudio')>=0" color="#30B08F" class="editor-upload-btn" @successCBK="aduioSuccessCBK"></editorAudio>
-      <editorVideo v-if="customButton.indexOf('editorVideo')>=0" color="#E65D6E" class="editor-upload-btn" @successCBK="videoSuccessCBK"></editorVideo>
-       <editorImage v-if="customButton.indexOf('editorImage')>=0" color="#20a0ff" class="editor-upload-btn" @successCBK="imageSuccessCBK"></editorImage>
-     <!--业务需求可删除-->
-    </div>
+     <editorImage  color="#20a0ff" class="editor-upload-btn" @successCBK="imageSuccessCBK"></editorImage>
+      </div>
   </div>
 </template>
 
 <script>
-    // tinymce 在最外层目录static下 ，由index.html直接引入，挂载在window下。不通过impot，不打包
-    // 业务需求可删除
-    import editorAudio from './components/editorAudio';
-    import editorVideo from './components/editorVideo';
-    import editorSlide from './components/editorSlide';
-    import editorImage from './components/editorImage';
-    // import { getToken, upload } from 'api/qiniu'; // 七牛
-    // 业务需求可删除
-    export default {
-      name: 'tinymce',
-      components: { editorImage, editorAudio, editorSlide, editorVideo }, // 业务需求可删除
-      props: {
-        id: {
-          type: String,
-          default: 'tinymceEditor'
-        },
-        value: {
-          type: String,
-          default: ''
-        },
-        customButton: {
-          type: Array,
-          required: false,
-          default() {
-            return ['editorAudio', 'editorImage']
-          }
-        },
-        toolbar: {
-          type: Array,
-          required: false,
-          default() {
-            return ['removeformat undo redo |  bullist numlist | outdent indent | forecolor | fullscreen code', 'bold italic blockquote | h2 p  media link | alignleft aligncenter alignright']
-          }
-        },
-        data() {
-          return {
-            hasChange: false,
-            hasInit: false
-          }
-        },
-        menubar: {
-          default: ''
-        },
-        height: {
-          type: Number,
-          required: false,
-          default: 360
-        }
-      },
-      watch: {
-        value(val) {
-          if (!this.hasChange && this.hasInit) {
-            this.$nextTick(() => tinymce.get(this.id).setContent(val))
-          }
-        }
-      },
-      mounted() {
-        const _this = this;
-        tinymce.init({
-          selector: `#${this.id}`,
-          height: this.height,
-          body_class: 'panel-body ',
-          object_resizing: false,
-          //  language: 'zh_CN',
-          //  language_url: '/static/tinymce/langs/zh_CN.js',
-          toolbar: this.toolbar,
-          menubar: this.menubar,
-          plugins: 'advlist,autolink,code,paste,textcolor, colorpicker,fullscreen,link,lists,media,wordcount, imagetools,watermark',
-          end_container_on_empty_block: true,
-          powerpaste_word_import: 'clean',
-          code_dialog_height: 450,
-          code_dialog_width: 1000,
-          advlist_bullet_styles: 'square',
-          advlist_number_styles: 'default',
-          block_formats: '普通标签=p;小标题=h2;',
-          imagetools_cors_hosts: ['wpimg.wallstcn.com', 'wallstreetcn.com'],
-          imagetools_toolbar: 'watermark',
-          default_link_target: '_blank',
-          link_title: false,
-          textcolor_map: [
-            '1482f0', '1482f0',
-            '4595e6', '4595e6'],
-          init_instance_callback: editor => {
-            if (_this.value) {
-              editor.setContent(_this.value)
-            }
-            _this.hasInit = true;
-            editor.on('Change', () => {
-              this.hasChange = true;
-              this.$emit('input', editor.getContent({ format: 'raw' }));
-            });
-          },
-          // 整合七牛上传
-          // images_dataimg_filter(img) {
-          //   setTimeout(() => {
-          //     const $image = $(img);
-          //     $image.removeAttr('width');
-          //     $image.removeAttr('height');
-          //     if ($image[0].height && $image[0].width) {
-          //       $image.attr('data-wscntype', 'image');
-          //       $image.attr('data-wscnh', $image[0].height);
-          //       $image.attr('data-wscnw', $image[0].width);
-          //       $image.addClass('wscnph');
-          //     }
-          //   }, 0);
-          //   return img
-          // },
-          // images_upload_handler(blobInfo, success, failure, progress) {
-          //   progress(0);
-          //   const token = _this.$store.getters.token;
-          //   getToken(token).then(response => {
-          //     const url = response.data.qiniu_url;
-          //     const formData = new FormData();
-          //     formData.append('token', response.data.qiniu_token);
-          //     formData.append('key', response.data.qiniu_key);
-          //     formData.append('file', blobInfo.blob(), url);
-          //     upload(formData).then(() => {
-          //       success(url);
-          //       progress(100);
-          //     })
-          //   }).catch(err => {
-          //     failure('出现未知问题，刷新页面，或者联系程序员')
-          //     console.log(err);
-          //   });
-          // },
-          setup(editor) {
-            editor.addButton('h2', {
-              title: '小标题', // tooltip text seen on mouseover
-              text: '小标题',
-              onclick() {
-                editor.execCommand('mceToggleFormat', false, 'h2');
-              },
-              onPostRender() {
-                const btn = this;
-                editor.on('init', () => {
-                  editor.formatter.formatChanged('h2', state => {
-                    btn.active(state);
-                  });
-                });
-              }
-            });
-            editor.addButton('p', {
-              title: '正文',
-              text: '正文',
-              onclick() {
-                editor.execCommand('mceToggleFormat', false, 'p');
-              },
-              onPostRender() {
-                const btn = this;
-                editor.on('init', () => {
-                  editor.formatter.formatChanged('p', state => {
-                    btn.active(state);
-                  });
-                });
-              }
-            });
-          }
-        });
-      },
-      methods: {
-        /* 业务代码可删除 start*/
-        imageSuccessCBK(arr) {
-          console.log(arr)
-          const _this = this;
-          arr.forEach(v => {
-            const node = document.createElement('img');
-            node.setAttribute('src', v);
-            node.onload = function() {
-              $(this).addClass('wscnph');
-              $(this).attr('data-wscntype', 'image');
-              $(this).attr('data-wscnh', this.height);
-              $(this).attr('data-wscnw', this.width);
-              tinymce.get(_this.id).insertContent(node.outerHTML)
-            }
-          })
-        },
-        slideSuccessCBK(arr) {
-          const node = document.createElement('img');
-          node.setAttribute('data-wscntype', 'slide');
-          node.setAttribute('data-uri', arr.toString());
-          node.setAttribute('data-wscnh', '190');
-          node.setAttribute('data-wscnw', '200');
-          node.setAttribute('src', ' https://wdl.wallstreetcn.com/6410b47d-a54c-4826-9bc1-c3e5df31280c');
-          node.className = 'wscnph editor-placeholder';
-          tinymce.get(this.id).insertContent(node.outerHTML)
-        },
-        videoSuccessCBK(form) {
-          const node = document.createElement('img');
-          node.setAttribute('data-wscntype', 'video');
-          node.setAttribute('data-uri', form.url);
-          node.setAttribute('data-cover-img-uri', form.image);
-          node.setAttribute('data-title', form.title);
-          node.setAttribute('src', 'https://wdl.wallstreetcn.com/07aeb3e7-f4ca-4207-befb-c987b3dc7011');
-          node.className = 'wscnph editor-placeholder';
-          tinymce.get(this.id).insertContent(node.outerHTML)
-        },
-        aduioSuccessCBK(form) {
-          const node = document.createElement('img');
-          node.setAttribute('data-wscntype', 'audio');
-          node.setAttribute('data-uri', form.url);
-          node.setAttribute('data-title', form.title);
-          node.setAttribute('data-text', form.text);
-          node.setAttribute('src', 'https://wdl.wallstreetcn.com/2ed0c8c8-fb82-499d-b81c-3fd1de114eae');
-          node.className = 'wscnph editor-placeholder';
-          tinymce.get(this.id).insertContent(node.outerHTML)
-        }
-        /* 业务代码可删除 end*/
-      },
-      destroyed() {
-        tinymce.get(this.id).destroy();
+import editorImage from './components/editorImage'
+
+export default {
+  name: 'tinymce',
+  components: { editorImage },
+  props: {
+    id: {
+      type: String
+    },
+    value: {
+      type: String,
+      default: ''
+    },
+    toolbar: {
+      type: Array,
+      required: false,
+      default() {
+        return ['removeformat undo redo |  bullist numlist | outdent indent | forecolor | fullscreen code', 'bold italic blockquote | h2 p  media link | alignleft aligncenter alignright']
       }
+    },
+    menubar: {
+      default: ''
+    },
+    height: {
+      type: Number,
+      required: false,
+      default: 360
+    }
+  },
+  data() {
+    return {
+      hasChange: false,
+      hasInit: false,
+      tinymceId: this.id || 'vue-tinymce-' + +new Date()
+    }
+  },
+  watch: {
+    value(val) {
+      if (!this.hasChange && this.hasInit) {
+        this.$nextTick(() => window.tinymce.get(this.tinymceId).setContent(val))
+      }
+    }
+  },
+  mounted() {
+    this.initTinymce()
+  },
+  activated() {
+    this.initTinymce()
+  },
+  deactivated() {
+    this.destroyTinymce()
+  },
+  methods: {
+    initTinymce() {
+      const _this = this
+      window.tinymce.init({
+        selector: `#${this.tinymceId}`,
+        height: this.height,
+        body_class: 'panel-body ',
+        object_resizing: false,
+        toolbar: this.toolbar,
+        menubar: this.menubar,
+        plugins: 'advlist,autolink,code,paste,textcolor, colorpicker,fullscreen,link,lists,media,wordcount, imagetools',
+        end_container_on_empty_block: true,
+        powerpaste_word_import: 'clean',
+        code_dialog_height: 450,
+        code_dialog_width: 1000,
+        advlist_bullet_styles: 'square',
+        advlist_number_styles: 'default',
+        imagetools_cors_hosts: ['wpimg.wallstcn.com', 'wallstreetcn.com'],
+        imagetools_toolbar: 'watermark',
+        default_link_target: '_blank',
+        link_title: false,
+        init_instance_callback: editor => {
+          if (_this.value) {
+            editor.setContent(_this.value)
+          }
+          _this.hasInit = true
+          editor.on('NodeChange Change KeyUp', () => {
+            this.hasChange = true
+            this.$emit('input', editor.getContent({ format: 'raw' }))
+          })
+        }
+        // 整合七牛上传
+        // images_dataimg_filter(img) {
+        //   setTimeout(() => {
+        //     const $image = $(img);
+        //     $image.removeAttr('width');
+        //     $image.removeAttr('height');
+        //     if ($image[0].height && $image[0].width) {
+        //       $image.attr('data-wscntype', 'image');
+        //       $image.attr('data-wscnh', $image[0].height);
+        //       $image.attr('data-wscnw', $image[0].width);
+        //       $image.addClass('wscnph');
+        //     }
+        //   }, 0);
+        //   return img
+        // },
+        // images_upload_handler(blobInfo, success, failure, progress) {
+        //   progress(0);
+        //   const token = _this.$store.getters.token;
+        //   getToken(token).then(response => {
+        //     const url = response.data.qiniu_url;
+        //     const formData = new FormData();
+        //     formData.append('token', response.data.qiniu_token);
+        //     formData.append('key', response.data.qiniu_key);
+        //     formData.append('file', blobInfo.blob(), url);
+        //     upload(formData).then(() => {
+        //       success(url);
+        //       progress(100);
+        //     })
+        //   }).catch(err => {
+        //     failure('出现未知问题，刷新页面，或者联系程序员')
+        //     console.log(err);
+        //   });
+        // },
+      })
+    },
+    destroyTinymce() {
+      if (window.tinymce.get(this.tinymceId)) {
+        window.tinymce.get(this.tinymceId).destroy()
+      }
+    },
+    setContent(value) {
+      window.tinymce.get(this.tinymceId).setContent(value)
+    },
+    getContent() {
+      window.tinymce.get(this.tinymceId).getContent()
+    },
+    imageSuccessCBK(arr) {
+      const _this = this
+      arr.forEach(v => {
+        window.tinymce.get(_this.tinymceId).insertContent(`<img class="wscnph" src="${v.url}" >`)
+      })
+    }
+  },
+  destroyed() {
+    this.destroyTinymce()
+  }
 }
 </script>
 
@@ -231,19 +154,16 @@
 .tinymce-container {
   position: relative
 }
-
 .tinymce-textarea {
   visibility: hidden;
   z-index: -1;
 }
-
 .editor-custom-btn-container {
   position: absolute;
   right: 15px;
   /*z-index: 2005;*/
   top: 18px;
 }
-
 .editor-upload-btn {
   display: inline-block;
 }

src/components/Upload/singleImage.vue

@@ -1,14 +1,7 @@
 <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">
+        <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>
@@ -22,53 +15,55 @@
         </div>
     </div>
 </template>
+
 <script>
-    // 预览效果见付费文章
-    import { getToken } from 'api/qiniu';
-    export default {
-      name: 'singleImageUpload',
-      props: {
-        value: String
-      },
-      computed: {
-        imageUrl() {
-          return this.value
-        }
-      },
-      data() {
-        return {
-          tempUrl: '',
-          dataObj: { token: '', key: '' }
-        };
-      },
-      methods: {
-        rmImage() {
-          this.emitInput('');
-        },
-        emitInput(val) {
-          this.$emit('input', val);
-        },
-        handleImageScucess() {
-          this.emitInput(this.tempUrl)
-        },
-        beforeUpload() {
-          const _self = this;
-          return new Promise((resolve, reject) => {
-            getToken().then(response => {
-              const key = response.data.qiniu_key;
-              const token = response.data.qiniu_token;
-              _self._data.dataObj.token = token;
-              _self._data.dataObj.key = key;
-              this.tempUrl = response.data.qiniu_url;
-              resolve(true);
-            }).catch(err => {
-              console.log(err);
-              reject(false)
-            });
-          });
-        }
-      }
-    };
+// 预览效果见付费文章
+import { getToken } from '@/api/qiniu'
+
+export default {
+  name: 'singleImageUpload',
+  props: {
+    value: String
+  },
+  computed: {
+    imageUrl() {
+      return this.value
+    }
+  },
+  data() {
+    return {
+      tempUrl: '',
+      dataObj: { token: '', key: '' }
+    }
+  },
+  methods: {
+    rmImage() {
+      this.emitInput('')
+    },
+    emitInput(val) {
+      this.$emit('input', val)
+    },
+    handleImageScucess() {
+      this.emitInput(this.tempUrl)
+    },
+    beforeUpload() {
+      const _self = this
+      return new Promise((resolve, reject) => {
+        getToken().then(response => {
+          const key = response.data.qiniu_key
+          const token = response.data.qiniu_token
+          _self._data.dataObj.token = token
+          _self._data.dataObj.key = key
+          this.tempUrl = response.data.qiniu_url
+          resolve(true)
+        }).catch(err => {
+          console.log(err)
+          reject(false)
+        })
+      })
+    }
+  }
+}
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>

src/components/Upload/singleImage2.vue

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

src/components/Upload/singleImage3.vue

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

src/components/UploadExcel/index.vue

@@ -0,0 +1,78 @@
+<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">
+  </div>
+</template>
+
+<script>
+import XLSX from 'xlsx'
+
+export default {
+  data() {
+    return {
+      loading: false,
+      excelData: {
+        header: null,
+        results: null
+      }
+    }
+  },
+  methods: {
+    generateDate({ header, results }) {
+      this.excelData.header = header
+      this.excelData.results = results
+      this.loading = false
+      this.$emit('on-selected-file', this.excelData)
+    },
+    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]
+      const reader = new FileReader()
+      reader.onload = e => {
+        const data = e.target.result
+        const fixedData = this.fixdata(data)
+        const workbook = XLSX.read(btoa(fixedData), { type: 'base64' })
+        const firstSheetName = workbook.SheetNames[0]
+        const worksheet = workbook.Sheets[firstSheetName]
+        const header = this.get_header_row(worksheet)
+        const results = XLSX.utils.sheet_to_json(worksheet)
+        this.generateDate({ header, results })
+      }
+      reader.readAsArrayBuffer(itemFile)
+    },
+    fixdata(data) {
+      let o = ''
+      let l = 0
+      const w = 10240
+      for (; l < data.byteLength / w; ++l) o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w)))
+      o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)))
+      return o
+    },
+    get_header_row(sheet) {
+      const headers = []
+      const range = XLSX.utils.decode_range(sheet['!ref'])
+      let C
+      const R = range.s.r /* start in the first row */
+      for (C = range.s.c; C <= range.e.c; ++C) { /* walk every column in the range */
+        var cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })] /* find the cell in the first row */
+        var hdr = 'UNKNOWN ' + C // <-- replace with your desired default
+        if (cell && cell.t) hdr = XLSX.utils.format_cell(cell)
+        headers.push(hdr)
+      }
+      return headers
+    }
+  }
+}
+</script>
+
+<style scoped>
+#excel-upload-input{
+  display: none;
+  z-index: -9999;
+}
+</style>

src/components/jsonEditor/index.vue

@@ -1,64 +0,0 @@
-<template>
-  <div class='json-editor'>
-    <textarea ref='textarea'></textarea>
-  </div>
-</template>
-
-
-<script>
-    import CodeMirror from 'codemirror';
-    import 'codemirror/addon/lint/lint.css';
-    import 'codemirror/lib/codemirror.css';
-    import 'codemirror/theme/rubyblue.css';
-    require('script-loader!jsonlint');
-    import 'codemirror/mode/javascript/javascript'
-    import 'codemirror/addon/lint/lint'
-    import 'codemirror/addon/lint/json-lint';
-
-    export default {
-      name: 'jsonEditor',
-      data() {
-        return {
-          jsonEditor: false
-        }
-      },
-      props: ['value'],
-      watch: {
-        value(value) {
-          const editor_value = this.jsonEditor.getValue();
-          if (value !== editor_value) {
-            this.jsonEditor.setValue(JSON.stringify(this.value, null, 2));
-          }
-        }
-      },
-      mounted() {
-        this.jsonEditor = CodeMirror.fromTextArea(this.$refs.textarea, {
-          lineNumbers: true,
-          mode: 'application/json',
-          gutters: ['CodeMirror-lint-markers'],
-          theme: 'rubyblue',
-          lint: true
-        });
-
-        this.jsonEditor.setValue(JSON.stringify(this.value, null, 2));
-        this.jsonEditor.on('change', cm => {
-          this.$emit('changed', cm.getValue())
-          this.$emit('input', cm.getValue())
-        })
-      },
-      methods: {
-        getValue() {
-          return this.jsonEditor.getValue()
-        }
-      }
-    }
-</script>
-
-<style>
-    .CodeMirror {
-        height: 100%;
-    }
-    .json-editor .cm-s-rubyblue span.cm-string{
-          color: #F08047;
-    }
-</style>

src/components/twoDndList/index.vue

@@ -1,156 +0,0 @@
-<template>
-  <div class="twoDndList">
-    <div class="twoDndList-list" :style="{width:width1}">
-      <h3>{{list1Title}}</h3>
-      <draggable :list="list1" class="dragArea" :options="{group:'article'}">
-        <div class="list-complete-item" v-for="element in list1">
-          <div class="list-complete-item-handle">[{{element.author}}] {{element.title}}</div>
-          <div style="position:absolute;right:0px;">
-            <span style="float: right ;margin-top: -20px;margin-right:5px;" @click="deleteEle(element)">
-                        <i style="color:#ff4949" class="el-icon-delete"></i>
-                    </span>
-          </div>
-        </div>
-      </draggable>
-    </div>
-
-    <div class="twoDndList-list" :style="{width:width2}">
-      <h3>{{list2Title}}</h3>
-      <draggable :list="filterList2" class="dragArea" :options="{group:'article'}">
-        <div class="list-complete-item" v-for="element in filterList2">
-          <div class='list-complete-item-handle2' @click="pushEle(element)"> [{{element.author}}] {{element.title}}</div>
-        </div>
-      </draggable>
-    </div>
-  </div>
-</template>
-
-<script>
-    import draggable from 'vuedraggable'
-    export default {
-      name: 'twoDndList',
-      components: { draggable },
-      computed: {
-        filterList2() {
-          return this.list2.filter(v => {
-            if (this.isNotInList1(v)) {
-              return v
-            }
-            return false;
-          })
-        }
-      },
-      props: {
-        list1: {
-          type: Array,
-          default() {
-            return []
-          }
-        },
-        list2: {
-          type: Array,
-          default() {
-            return []
-          }
-        },
-        list1Title: {
-          type: String,
-          default: 'list1'
-        },
-        list2Title: {
-          type: String,
-          default: 'list2'
-        },
-        width1: {
-          type: String,
-          default: '48%'
-        },
-        width2: {
-          type: String,
-          default: '48%'
-        }
-      },
-      methods: {
-        isNotInList1(v) {
-          return this.list1.every(k => v.id !== k.id)
-        },
-        isNotInList2(v) {
-          return this.list2.every(k => v.id !== k.id)
-        },
-        deleteEle(ele) {
-          for (const item of this.list1) {
-            if (item.id === ele.id) {
-              const index = this.list1.indexOf(item);
-              this.list1.splice(index, 1)
-              break
-            }
-          }
-          if (this.isNotInList2(ele)) {
-            this.list2.unshift(ele)
-          }
-        },
-        pushEle(ele) {
-          this.list1.push(ele)
-        }
-      }
-    }
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-    .twoDndList {
-        background: #fff;
-        padding-bottom: 40px;
-        &:after {
-            content: "";
-            display: table;
-            clear: both;
-        }
-        .twoDndList-list {
-            float: left;
-            padding-bottom: 30px;
-            &:first-of-type {
-                margin-right: 2%;
-            }
-            .dragArea {
-                margin-top: 15px;
-                min-height: 50px;
-                padding-bottom: 30px;
-            }
-        }
-    }
-
-    .list-complete-item {
-        cursor: pointer;
-        position: relative;
-        font-size: 14px;
-        padding: 5px 12px;
-        margin-top: 4px;
-        border: 1px solid #bfcbd9;
-        transition: all 1s;
-    }
-
-    .list-complete-item-handle {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        margin-right: 50px;
-    }
-    .list-complete-item-handle2{
-      overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        margin-right: 20px;
-    }
-
-    .list-complete-item.sortable-chosen {
-        background: #4AB7BD;
-    }
-
-    .list-complete-item.sortable-ghost {
-        background: #30B08F;
-    }
-
-    .list-complete-enter, .list-complete-leave-active {
-        opacity: 0;
-    }
-</style>

src/directive/clipboard/clipboard.js

@@ -0,0 +1,49 @@
+// Inspired by https://github.com/Inndy/vue-clipboard2
+const Clipboard = require('clipboard')
+if (!Clipboard) {
+  throw new Error('you shold npm install `clipboard` --save at first ')
+}
+
+export default {
+  bind(el, binding) {
+    if (binding.arg === 'success') {
+      el._v_clipboard_success = binding.value
+    } else if (binding.arg === 'error') {
+      el._v_clipboard_error = binding.value
+    } else {
+      const clipboard = new Clipboard(el, {
+        text() { return binding.value },
+        action() { return binding.arg === 'cut' ? 'cut' : 'copy' }
+      })
+      clipboard.on('success', e => {
+        const callback = el._v_clipboard_success
+        callback && callback(e) // eslint-disable-line
+      })
+      clipboard.on('error', e => {
+        const callback = el._v_clipboard_error
+        callback && callback(e) // eslint-disable-line
+      })
+      el._v_clipboard = clipboard
+    }
+  },
+  update(el, binding) {
+    if (binding.arg === 'success') {
+      el._v_clipboard_success = binding.value
+    } else if (binding.arg === 'error') {
+      el._v_clipboard_error = binding.value
+    } else {
+      el._v_clipboard.text = function() { return binding.value }
+      el._v_clipboard.action = function() { return binding.arg === 'cut' ? 'cut' : 'copy' }
+    }
+  },
+  unbind(el, binding) {
+    if (binding.arg === 'success') {
+      delete el._v_clipboard_success
+    } else if (binding.arg === 'error') {
+      delete el._v_clipboard_error
+    } else {
+      el._v_clipboard.destroy()
+      delete el._v_clipboard
+    }
+  }
+}

src/directive/clipboard/index.js

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

src/directive/sticky.js

@@ -1,99 +1,91 @@
-(function() {
-  const vueSticky = {};
-  let listenAction;
-  vueSticky.install = Vue => {
-    Vue.directive('sticky', {
-      inserted(el, binding) {
-        const params = binding.value || {},
-          stickyTop = params.stickyTop || 0,
-          zIndex = params.zIndex || 1000,
-          elStyle = el.style;
+const vueSticky = {}
+let listenAction
+vueSticky.install = Vue => {
+  Vue.directive('sticky', {
+    inserted(el, binding) {
+      const params = binding.value || {}
+      const stickyTop = params.stickyTop || 0
+      const zIndex = params.zIndex || 1000
+      const elStyle = el.style
 
-        elStyle.position = '-webkit-sticky';
-        elStyle.position = 'sticky';
-        // if the browser support css sticky（Currently Safari, Firefox and Chrome Canary）
-        // if (~elStyle.position.indexOf('sticky')) {
-        //     elStyle.top = `${stickyTop}px`;
-        //     elStyle.zIndex = zIndex;
-        //     return
-        // }
-        const elHeight = el.getBoundingClientRect().height;
-        const elWidth = el.getBoundingClientRect().width;
-        elStyle.cssText = `top: ${stickyTop}px; z-index: ${zIndex}`;
+      elStyle.position = '-webkit-sticky'
+      elStyle.position = 'sticky'
+      // if the browser support css sticky（Currently Safari, Firefox and Chrome Canary）
+      // if (~elStyle.position.indexOf('sticky')) {
+      //     elStyle.top = `${stickyTop}px`;
+      //     elStyle.zIndex = zIndex;
+      //     return
+      // }
+      const elHeight = el.getBoundingClientRect().height
+      const elWidth = el.getBoundingClientRect().width
+      elStyle.cssText = `top: ${stickyTop}px; z-index: ${zIndex}`
 
-        const parentElm = el.parentNode || document.documentElement;
-        const placeholder = document.createElement('div');
-        placeholder.style.display = 'none';
-        placeholder.style.width = `${elWidth}px`;
-        placeholder.style.height = `${elHeight}px`;
-        parentElm.insertBefore(placeholder, el)
+      const parentElm = el.parentNode || document.documentElement
+      const placeholder = document.createElement('div')
+      placeholder.style.display = 'none'
+      placeholder.style.width = `${elWidth}px`
+      placeholder.style.height = `${elHeight}px`
+      parentElm.insertBefore(placeholder, el)
 
-        let active = false;
+      let active = false
 
-        const getScroll = (target, top) => {
-          const prop = top ? 'pageYOffset' : 'pageXOffset';
-          const method = top ? 'scrollTop' : 'scrollLeft';
-          let ret = target[prop];
-          if (typeof ret !== 'number') {
-            ret = window.document.documentElement[method];
-          }
-          return ret;
-        };
-
-        const sticky = () => {
-          if (active) {
-            return
-          }
-          if (!elStyle.height) {
-            elStyle.height = `${el.offsetHeight}px`
-          }
-
-          elStyle.position = 'fixed';
-          elStyle.width = `${elWidth}px`;
-          placeholder.style.display = 'inline-block';
-          active = true
-        };
-
-        const reset = () => {
-          if (!active) {
-            return
-          }
-
-          elStyle.position = '';
-          placeholder.style.display = 'none';
-          active = false;
-        };
-
-        const check = () => {
-          const scrollTop = getScroll(window, true);
-          const offsetTop = el.getBoundingClientRect().top;
-          if (offsetTop < stickyTop) {
-            sticky();
-          } else {
-            if (scrollTop < elHeight + stickyTop) {
-              reset()
-            }
-          }
-        };
-        listenAction = () => {
-          check()
-        };
-
-        window.addEventListener('scroll', listenAction)
-      },
-
-      unbind() {
-        window.removeEventListener('scroll', listenAction)
+      const getScroll = (target, top) => {
+        const prop = top ? 'pageYOffset' : 'pageXOffset'
+        const method = top ? 'scrollTop' : 'scrollLeft'
+        let ret = target[prop]
+        if (typeof ret !== 'number') {
+          ret = window.document.documentElement[method]
+        }
+        return ret
       }
-    })
-  };
-  if (typeof exports == 'object') {
-    module.exports = vueSticky
-  } else if (typeof define == 'function' && define.amd) {
-    define([], () => vueSticky)
-  } else if (window.Vue) {
-    window.vueSticky = vueSticky;
-    Vue.use(vueSticky)
-  }
-}());
+
+      const sticky = () => {
+        if (active) {
+          return
+        }
+        if (!elStyle.height) {
+          elStyle.height = `${el.offsetHeight}px`
+        }
+
+        elStyle.position = 'fixed'
+        elStyle.width = `${elWidth}px`
+        placeholder.style.display = 'inline-block'
+        active = true
+      }
+
+      const reset = () => {
+        if (!active) {
+          return
+        }
+
+        elStyle.position = ''
+        placeholder.style.display = 'none'
+        active = false
+      }
+
+      const check = () => {
+        const scrollTop = getScroll(window, true)
+        const offsetTop = el.getBoundingClientRect().top
+        if (offsetTop < stickyTop) {
+          sticky()
+        } else {
+          if (scrollTop < elHeight + stickyTop) {
+            reset()
+          }
+        }
+      }
+      listenAction = () => {
+        check()
+      }
+
+      window.addEventListener('scroll', listenAction)
+    },
+
+    unbind() {
+      window.removeEventListener('scroll', listenAction)
+    }
+  })
+}
+
+export default vueSticky
 

src/directive/waves.js

@@ -1,54 +0,0 @@
-import './waves.css';
-(function() {
-  const vueWaves = {};
-  vueWaves.install = (Vue, options = {}) => {
-    Vue.directive('waves', {
-      bind(el, binding) {
-        el.addEventListener('click', e => {
-          const customOpts = Object.assign(options, binding.value);
-          const opts = Object.assign({
-              ele: el, // 波纹作用元素
-              type: 'hit', // hit点击位置扩散center中心点扩展
-              color: 'rgba(0, 0, 0, 0.15)' // 波纹颜色
-            }, customOpts),
-            target = opts.ele;
-          if (target) {
-            target.style.position = 'relative';
-            target.style.overflow = 'hidden';
-            const rect = target.getBoundingClientRect();
-            let ripple = target.querySelector('.waves-ripple');
-            if (!ripple) {
-              ripple = document.createElement('span');
-              ripple.className = 'waves-ripple';
-              ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px';
-              target.appendChild(ripple);
-            } else {
-              ripple.className = 'waves-ripple';
-            }
-            switch (opts.type) {
-              case 'center':
-                ripple.style.top = (rect.height / 2 - ripple.offsetHeight / 2) + 'px';
-                ripple.style.left = (rect.width / 2 - ripple.offsetWidth / 2) + 'px';
-                break;
-              default:
-                ripple.style.top = (e.pageY - rect.top - ripple.offsetHeight / 2 - document.body.scrollTop) + 'px';
-                ripple.style.left = (e.pageX - rect.left - ripple.offsetWidth / 2 - document.body.scrollLeft) + 'px';
-            }
-            ripple.style.backgroundColor = opts.color;
-            ripple.className = 'waves-ripple z-active';
-            return false;
-          }
-        }, false);
-      }
-    })
-  };
-  if (typeof exports == 'object') {
-    module.exports = vueWaves
-  } else if (typeof define == 'function' && define.amd) {
-    define([], () => vueWaves)
-  } else if (window.Vue) {
-    window.vueWaves = vueWaves;
-    Vue.use(vueWaves)
-  }
-}());
-

src/directive/waves/index.js

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

src/directive/waves/waves.js

@@ -0,0 +1,42 @@
+import './waves.css'
+
+export default{
+  bind(el, binding) {
+    el.addEventListener('click', e => {
+      const customOpts = Object.assign({}, binding.value)
+      const opts = Object.assign({
+        ele: el, // 波纹作用元素
+        type: 'hit', // hit点击位置扩散center中心点扩展
+        color: 'rgba(0, 0, 0, 0.15)' // 波纹颜色
+      }, customOpts)
+      const target = opts.ele
+      if (target) {
+        target.style.position = 'relative'
+        target.style.overflow = 'hidden'
+        const rect = target.getBoundingClientRect()
+        let ripple = target.querySelector('.waves-ripple')
+        if (!ripple) {
+          ripple = document.createElement('span')
+          ripple.className = 'waves-ripple'
+          ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px'
+          target.appendChild(ripple)
+        } else {
+          ripple.className = 'waves-ripple'
+        }
+        switch (opts.type) {
+          case 'center':
+            ripple.style.top = (rect.height / 2 - ripple.offsetHeight / 2) + 'px'
+            ripple.style.left = (rect.width / 2 - ripple.offsetWidth / 2) + 'px'
+            break
+          default:
+            ripple.style.top = (e.pageY - rect.top - ripple.offsetHeight / 2 - document.body.scrollTop) + 'px'
+            ripple.style.left = (e.pageX - rect.left - ripple.offsetWidth / 2 - document.body.scrollLeft) + 'px'
+        }
+        ripple.style.backgroundColor = opts.color
+        ripple.className = 'waves-ripple z-active'
+        return false
+      }
+    }, false)
+  }
+}
+