perf keep-alive in nested route

.babelrc

@@ -8,10 +8,5 @@
     }],
     "stage-2"
   ],
-  "plugins": ["transform-vue-jsx", "transform-runtime"],
+  "plugins": ["transform-vue-jsx", "transform-runtime"]
-  "env": {
-    "development":{
-      "plugins": ["dynamic-import-node"]
-    }
-  }
 }

.eslintrc.js

@@ -1,7 +1,7 @@
 module.exports = {
   root: true,
+  parser: 'babel-eslint',
   parserOptions: {
-    parser: 'babel-eslint',
     sourceType: 'module'
   },
   env: {
@@ -9,21 +9,22 @@ module.exports = {
     node: true,
     es6: true,
   },
-  extends: ['plugin:vue/recommended', 'eslint:recommended'],
+  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: {
+  'rules': {
-    "vue/max-attributes-per-line": [2, {
-      "singleline": 10,
-      "multiline": {
-        "max": 1,
-        "allowFirstLine": false
-      }
-    }],
-    "vue/singleline-html-element-content-newline": "off",
-    "vue/multiline-html-element-content-newline":"off",
-    "vue/name-property-casing": ["error", "PascalCase"],
     'accessor-pairs': 2,
     'arrow-spacing': [2, {
       'before': true,
@@ -195,3 +196,4 @@ module.exports = {
     'array-bracket-spacing': [2, 'never']
   }
 }
+

.gitignore

@@ -1,10 +1,10 @@
 .DS_Store
 node_modules/
 dist/
+gifs/
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-**/*.log
 
 test/unit/coverage
 test/e2e/reports

README.md

@@ -3,149 +3,99 @@
 </p>
 
 <p align="center">
-  <a href="https://github.com/vuejs/vue">
+	<a href="https://github.com/vuejs/vue">
-    <img src="https://img.shields.io/badge/vue-2.5.17-brightgreen.svg" alt="vue">
+		<img src="https://img.shields.io/badge/vue-2.5.10-brightgreen.svg" alt="vue">
-  </a>
+	</a>
-  <a href="https://github.com/ElemeFE/element">
+	<a href="https://github.com/ElemeFE/element">
-    <img src="https://img.shields.io/badge/element--ui-2.4.11-brightgreen.svg" alt="element-ui">
+		<img src="https://img.shields.io/badge/element--ui-2.0.8-brightgreen.svg" alt="element-ui">
-  </a>
+	</a>
-  <a href="https://travis-ci.org/PanJiaChen/vue-element-admin" rel="nofollow">
+	<a href="https://travis-ci.org/PanJiaChen/vue-element-admin" rel="nofollow">
-    <img src="https://travis-ci.org/PanJiaChen/vue-element-admin.svg?branch=master" alt="Build Status">
+		<img src="https://travis-ci.org/PanJiaChen/vue-element-admin.svg?branch=master" alt="Build Status">
-  </a>
+	</a>
-  <a href="https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE">
+	<a href="https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE">
-    <img src="https://img.shields.io/github/license/mashape/apistatus.svg" alt="license">
+		<img src="https://img.shields.io/github/license/mashape/apistatus.svg" alt="license">
-  </a>
+	</a>
-  <a href="https://github.com/PanJiaChen/vue-element-admin/releases">
+	<a href="https://github.com/PanJiaChen/vue-element-admin/releases">
-    <img src="https://img.shields.io/github/release/PanJiaChen/vue-element-admin.svg" alt="GitHub release">
+		<img src="https://img.shields.io/github/release/PanJiaChen/vue-element-admin.svg" alt="GitHub release">
-  </a>
+	</a>
-  <a href="https://gitter.im/vue-element-admin/discuss">
-    <img src="https://badges.gitter.im/Join%20Chat.svg" alt="gitter">
-  </a>
-  <a href="https://panjiachen.github.io/vue-element-admin-site/donate">
-    <img src="https://img.shields.io/badge/%24-donate-ff69b4.svg" alt="donate">
-  </a>
 </p>
 
 English | [简体中文](./README.zh-CN.md)
 
 ## Introduction
 
-[vue-element-admin](http://panjiachen.github.io/vue-element-admin) is a front-end management background integration solution. It based on [vue](https://github.com/vuejs/vue) and use the UI Toolkit [element](https://github.com/ElemeFE/element).
+`vue-element-admin` is a production-ready solution for admin interfaces. Based on [Vue.js](https://github.com/vuejs/vue) and use the UI Toolkit -- [element](https://github.com/ElemeFE/element). `vue-element-admin` is a magical vue admin, it based on the newest development stack of vue, built-in i18n solution, typical templates for enterprise applications, lots of awesome features. It helps you build a large complex Single-Page Applications. I believe whatever your needs are, this project will help you.
-
-It is a magical vue admin based on the newest development stack of vue, built-in i18n solution, typical templates for enterprise applications, lots of awesome features. It helps you build a large complex Single-Page Applications. I believe whatever your needs are, this project will help you.
-
-**[v4.0](https://github.com/PanJiaChen/vue-element-admin/tree/v4.0) has in beta. It built on vue-cli@3, optimized a lot of code and added a lot of new features. Welcome to use and make suggestions.**
 
 - [Preview](http://panjiachen.github.io/vue-element-admin)
 
-- [Documentation](https://panjiachen.github.io/vue-element-admin-site/)
+- [Documentation](https://panjiachen.github.io/vue-element-admin-site/#/)
 
-- [Gitter](https://gitter.im/vue-element-admin/discuss)
+- [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)
 
-- [Donate](https://panjiachen.github.io/vue-element-admin-site/donate/)
+**vue-element-admin is a admin interfaces integration solution, which is not suitable for secondary development as a base template.**
 
-- [Gitee](https://panjiachen.gitee.io/vue-element-admin/) 国内用户可访问该地址在线预览
+ - Base template recommends using: [vueAdmin-template](https://github.com/PanJiaChen/vueAdmin-template)  
+ - Desktop: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
 
-**This project is positioned as a background integration solution and is not suitable for secondary development as a basic template.**
+**Note: This project uses element-ui@2.0.0+ version, so the minimum compatible vue@2.5.0**
-
-- Base template recommends using: [vue-admin-template](https://github.com/PanJiaChen/vue-admin-template)
-- Desktop: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
-- Typescript: [vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template) (Credits: [@Armour](https://github.com/Armour))
-
-**This project does not support low version browsers (e.g. IE). Please add polyfill yourself if you need them.**
-
-**Note: This project uses element-ui@2.3.0+ version, so the minimum compatible vue@2.5.0+**
-
-**Start using `webpack4` from `v3.8.0`. If you still want to continue using `webpack3`, please use this branch [webpack3](https://github.com/PanJiaChen/vue-element-admin/tree/webpack3)**
 
 ## Preparation
 
-You need to install [node](http://nodejs.org/) and [git](https://git-scm.com/) locally. The project is based on [ES2015+](http://es6.ruanyifeng.com/), [vue](https://cn.vuejs.org/index.html), [vuex](https://vuex.vuejs.org/zh-cn/), [vue-router](https://router.vuejs.org/zh-cn/), [axios](https://github.com/axios/axios) and [element-ui](https://github.com/ElemeFE/element), all request data is simulated using [Mock.js](https://github.com/nuysoft/Mock).
+You need to install [node](http://nodejs.org/) and [git](https://git-scm.com/) locally. The project is based on [ES2015+](http://es6.ruanyifeng.com/)、[vue](https://cn.vuejs.org/index.html)、[vuex](https://vuex.vuejs.org/zh-cn/)、[vue-router](https://router.vuejs.org/zh-cn/) 和 [element-ui](https://github.com/ElemeFE/element). All data requests for this project are simulated using [Mock.js](https://github.com/nuysoft/Mock). It would be helpful if you have pre-existing knowledge on those.
-Understanding and learning this knowledge in advance will greatly help the use of this project.
 
----
+ **This project is not a scaffolding and is more of an integrated solution.**
+
+ **This project does not support low version browsers (e.g. IE). Please add polyfill yourself if you need them.**
 
  <p align="center">
   <img width="900" src="https://wpimg.wallstcn.com/a5894c1b-f6af-456e-82df-1151da0839bf.png">
 </p>
 
-## Sponsors
-Become a sponsor and get your logo on our README on GitHub with a link to your site. [[Become a sponsor]](https://www.patreon.com/panjiachen)
-
-<a href="https://flatlogic.com/admin-dashboards?from=vue-element-admin"><img width="150px" src="https://wpimg.wallstcn.com/9c0b719b-5551-4c1e-b776-63994632d94a.png" /></a><p>Admin Dashboard Templates made with Vue, React and Angular.</p>
-
 ## Features
-
 ```
 - Login / Logout
-
+- Permission authentication
-- Permission Authentication
-  - Page permission
-  - Directive permission
-  - Two-step login
-
 - Multi-environment build
-  - dev sit stage prod
+- Dynamic sidebar (supports multi-level routing)
-
+- Dynamic breadcrumb
-- Global Features
+- I18n
-  - I18n
+- Customizable theme
-  - Multiple dynamic themes
+- Tags-view(Tab page Support right-click operation)
-  - Dynamic sidebar (supports multi-level routing)
+- Rich text editor
-  - Dynamic breadcrumb
+- Markdown editor
-  - Tags-view (Tab page Support right-click operation)
+- JSON editor
-  - Svg Sprite
+- Screenfull
-  - Mock data
+- Drag and drop list
-  - Screenfull
+- Svg Sprite
-  - Responsive Sidebar
-
-- Editor
-  - Rich Text Editor
-  - Markdown Editor
-  - JSON Editor
-
-- Excel
-  - Export Excel
-  - Export zip
-  - Upload Excel
-  - Visualization Excel
-
-- Table
-  - Dynamic Table
-  - Drag And Drop Table
-  - Tree Table
-  - Inline Edit Table
-
-- Error Page
-  - 401
-  - 404
-
-- Components
-  - Avatar Upload
-  - Back To Top
-  - Drag Dialog
-  - Drag Select
-  - Drag Kanban
-  - Drag List
-  - SplitPane
-  - Dropzone
-  - Sticky
-  - CountTo
-
-- Advanced Example
-- Error Log
 - Dashboard
-- Guide Page
+- Mock data
-- ECharts
+- Echarts
 - Clipboard
+- 401/404 error page
+- Error log
+- Export excel
+- Export zip
+- Front-end visualization excel
+- Tree Table
+- Table example
+- Dynamictable example
+- Drag and drop table example
+- Inline edit table example
+- Form example
+- Two-step login
+- SplitPane
+- Dropzone
+- Sticky
+- CountTo
 - Markdown to html
 ```
 
 ## Getting started
 
 ```bash
-# clone the project
+# clone the projice
 git clone https://github.com/PanJiaChen/vue-element-admin.git
 
 # install dependency
@@ -158,7 +108,6 @@ npm run dev
 This will automatically open http://localhost:9527.
 
 ## Build
-
 ```bash
 # build for test environment
 npm run build:sit
@@ -168,14 +117,10 @@ npm run build:prod
 ```
 
 ## Advanced
-
 ```bash
 # --report to build with bundle size analytics
 npm run build:prod --report
 
-# --generate a bundle size analytics. default: bundle-report.html
-npm run build:prod --generate_report
-
 # --preview to start a server in local to preview
 npm run build:prod --preview
 
@@ -186,34 +131,21 @@ npm run lint
 npm run lint -- --fix
 ```
 
-Refer to [Documentation](https://panjiachen.github.io/vue-element-admin-site/guide/essentials/deploy.html) for more information
+Refer to [Documentation](https://panjiachen.github.io/vue-element-admin-site/#/deploy) for more information
 
 ## Changelog
-
 Detailed changes for each release are documented in the [release notes](https://github.com/PanJiaChen/vue-element-admin/releases).
 
 ## Online Demo
-
 [Preview](http://panjiachen.github.io/vue-element-admin)
 
 ## Donate
-
 If you find this project useful, you can buy author a glass of juice :tropical_drink:
 
 ![donate](https://wpimg.wallstcn.com/bd273f0d-83a0-4ef2-92e1-9ac8ed3746b9.png)
 
 [Paypal Me](https://www.paypal.me/panfree23)
 
-[Buy me a coffee](https://www.buymeacoffee.com/Pan)
-
-## Browsers support
-
-Modern browsers and Internet Explorer 10+.
-
-| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari |
-| --------- | --------- | --------- | --------- |
-| IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions
-
 ## License
 
 [MIT](https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE)

README.zh-CN.md

@@ -3,193 +3,137 @@
 </p>
 
 <p align="center">
-  <a href="https://github.com/vuejs/vue">
+	<a href="https://github.com/vuejs/vue">
-    <img src="https://img.shields.io/badge/vue-2.5.10-brightgreen.svg" alt="vue">
+		<img src="https://img.shields.io/badge/vue-2.5.10-brightgreen.svg" alt="vue">
-  </a>
+	</a>
-  <a href="https://github.com/ElemeFE/element">
+	<a href="https://github.com/ElemeFE/element">
-    <img src="https://img.shields.io/badge/element--ui-2.4.11-brightgreen.svg" alt="element-ui">
+		<img src="https://img.shields.io/badge/element--ui-2.0.8-brightgreen.svg" alt="element-ui">
-  </a>
+	</a>
-  <a href="https://travis-ci.org/PanJiaChen/vue-element-admin" rel="nofollow">
+	<a href="https://travis-ci.org/PanJiaChen/vue-element-admin" rel="nofollow">
-    <img src="https://travis-ci.org/PanJiaChen/vue-element-admin.svg?branch=master" alt="Build Status">
+		<img src="https://travis-ci.org/PanJiaChen/vue-element-admin.svg?branch=master" alt="Build Status">
-  </a>
+	</a>
-  <a href="https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE">
+	<a href="https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE">
-    <img src="https://img.shields.io/github/license/mashape/apistatus.svg" alt="license">
+		<img src="https://img.shields.io/github/license/mashape/apistatus.svg" alt="license">
-  </a>
+	</a>
-  <a href="https://github.com/PanJiaChen/vue-element-admin/releases">
+	<a href="https://github.com/PanJiaChen/vue-element-admin/releases">
-    <img src="https://img.shields.io/github/release/PanJiaChen/vue-element-admin.svg" alt="GitHub release">
+		<img src="https://img.shields.io/github/release/PanJiaChen/vue-element-admin.svg" alt="GitHub release">
-  </a>
+	</a>
-  <a href="https://gitter.im/vue-element-admin/discuss">
-    <img src="https://badges.gitter.im/Join%20Chat.svg" alt="gitter">
-  </a>
-  <a href="https://panjiachen.gitee.io/vue-element-admin-site/zh/donate">
-    <img src="https://img.shields.io/badge/%24-donate-ff69b4.svg" alt="donate">
-  </a>
 </p>
 
 简体中文 | [English](./README.md)
 
 ## 简介
 
-[vue-element-admin](http://panjiachen.github.io/vue-element-admin) 是一个后台集成解决方案，它基于 [vue](https://github.com/vuejs/vue) 和 [element](https://github.com/ElemeFE/element)。它使用了最新的前端技术栈，内置了 i18n 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。相信不管你的需求是什么，本项目都能帮助到你。
+`vue-element-admin` 是一个后台集成解决方案，它基于 [Vue.js](https://github.com/vuejs/vue) 和 [element](https://github.com/ElemeFE/element)。它使用了最新的前端技术栈，内置了i18国际化解决方案，动态路由，权限验证等很多功能特性，相信不管你的需求是什么，本项目都能帮助到你。
-
-**[v4.0](https://github.com/PanJiaChen/vue-element-admin/tree/v4.0) 已经进入 beta 测试阶段。 它基于 vue-cli@3 进行构建，优化了大量代码(尤其是权限和 mock)，并且增加了不少新特性。欢迎使用并提出建议。**
 
 - [在线访问](http://panjiachen.github.io/vue-element-admin)
 
-- [使用文档](https://panjiachen.github.io/vue-element-admin-site/zh/)
+- [使用文档](https://panjiachen.github.io/vue-element-admin-site/#/)
 
-- [Gitter 讨论组](https://gitter.im/vue-element-admin/discuss)
+- [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)
-
-- [Donate](https://panjiachen.gitee.io/vue-element-admin-site/zh/donate)
-
-- [Gitee](https://panjiachen.gitee.io/vue-element-admin/) 国内用户可访问该地址在线预览
-
-- [国内访问文档](https://panjiachen.gitee.io/vue-element-admin-site/zh/) 方便没翻墙的用户查看文档
 
 **本项目的定位是后台集成方案，不适合当基础模板来开发。**
+ - 模板建议使用: [vueAdmin-template](https://github.com/PanJiaChen/vueAdmin-template)  
+ - 桌面端: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
 
-- 模板建议使用: [vue-admin-template](https://github.com/PanJiaChen/vue-admin-template)
+**注意：该项目使用 element-ui@2.0.0+ 版本，所以最低兼容 vue@2.5.0**
-- 桌面端: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
-- Typescript版: [vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template) (鸣谢: [@Armour](https://github.com/Armour))
-
-群主 **[圈子](https://jianshiapp.com/circles/1209)** 楼主会经常分享一些技术相关的东西，或者加入[qq 群](https://github.com/PanJiaChen/vue-element-admin/issues/602)或者关注[微博](https://weibo.com/u/3423485724?is_all=1)
-
-**注意：该项目使用 element-ui@2.3.0+ 版本，所以最低兼容 vue@2.5.0+**
-
-**从`v3.8.0`开始使用`webpack4`。所以若还想使用`webpack3`开发，请使用该分支[webpack3](https://github.com/PanJiaChen/vue-element-admin/tree/webpack3)**
-
-**该项目不支持低版本浏览器(如 ie)，有需求请自行添加 polyfill [详情](https://github.com/PanJiaChen/vue-element-admin/wiki#babel-polyfill)**
 
 ## 前序准备
 
-你需要在本地安装 [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/) 、[axios](https://github.com/axios/axios) 和 [element-ui](https://github.com/ElemeFE/element)，所有的请求数据都使用[Mock.js](https://github.com/nuysoft/Mock)模拟，提前了解和学习这些知识会对使用本项目有很大的帮助。
+你的本地环境需要安装 [node](http://nodejs.org/) 和 [git](https://git-scm.com/)。我们的技术栈基于 [ES2015+](http://es6.ruanyifeng.com/)、[vue](https://cn.vuejs.org/index.html)、[vuex](https://vuex.vuejs.org/zh-cn/)、[vue-router](https://router.vuejs.org/zh-cn/) and [element-ui](https://github.com/ElemeFE/element)，所有的请求数据都使用[Mock.js](https://github.com/nuysoft/Mock)模拟，提前了解和学习这些知识会对使用本项目有很大的帮助。
 
 同时配套一个系列的教程文章，如何从零构建后一个完整的后台项目，建议大家先看完这些文章再来实践本项目
+ - [手摸手，带你用 vue 撸后台 系列一(基础篇)](https://juejin.im/post/59097cd7a22b9d0065fb61d2)
+ - [手摸手，带你用 vue 撸后台 系列二(登录权限篇)](https://juejin.im/post/591aa14f570c35006961acac)
+ - [手摸手，带你用 vue 撸后台 系列三 (实战篇)](https://juejin.im/post/593121aa0ce4630057f70d35)
+ - [手摸手，带你用 vue 撸后台 系列四(vueAdmin 一个极简的后台基础模板)](https://juejin.im/post/595b4d776fb9a06bbe7dba56)
+ - [手摸手，带你封装一个 vue component](https://segmentfault.com/a/1190000009090836)
+ - [手摸手，带你优雅的使用 icon](https://juejin.im/post/59bb864b5188257e7a427c09)
 
-- [手摸手，带你用 vue 撸后台 系列一(基础篇)](https://juejin.im/post/59097cd7a22b9d0065fb61d2)
+ 响应需求，开了一个qq群 `591724180` 方便大家交流
-- [手摸手，带你用 vue 撸后台 系列二(登录权限篇)](https://juejin.im/post/591aa14f570c35006961acac)
-- [手摸手，带你用 vue 撸后台 系列三 (实战篇)](https://juejin.im/post/593121aa0ce4630057f70d35)
-- [手摸手，带你用 vue 撸后台 系列四(vueAdmin 一个极简的后台基础模板)](https://juejin.im/post/595b4d776fb9a06bbe7dba56)
-- [手摸手，带你封装一个 vue component](https://segmentfault.com/a/1190000009090836)
-- [手摸手，带你优雅的使用 icon](https://juejin.im/post/59bb864b5188257e7a427c09)
-- [手摸手，带你用合理的姿势使用 webpack4（上）](https://juejin.im/post/5b56909a518825195f499806)
-- [手摸手，带你用合理的姿势使用 webpack4（下）](https://juejin.im/post/5b5d6d6f6fb9a04fea58aabc)
 
-**如有问题请先看上述使用文档和文章，若不能满足，欢迎 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>
 
-## Sponsors
-Become a sponsor and get your logo on our README on GitHub with a link to your site. [[Become a sponsor]](https://www.patreon.com/panjiachen)
-
-<a href="https://flatlogic.com/admin-dashboards?from=vue-element-admin"><img width="150px" src="https://wpimg.wallstcn.com/9c0b719b-5551-4c1e-b776-63994632d94a.png" /></a><p>Admin Dashboard Templates made with Vue, React and Angular.</p>
-
 ## 功能
-
 ```
-- 登录 / 注销
+- 登录/注销
-
 - 权限验证
-  - 页面权限
-  - 指令权限
-  - 二步登录
-
 - 多环境发布
-  - dev sit stage prod
+- 动态侧边栏（支持多级路由）
-
+- 动态面包屑
-- 全局功能
+- 国际化多语言
-  - 国际化多语言
+- 多种动态换肤
-  - 多种动态换肤
+- 快捷导航(标签页)
-  - 动态侧边栏（支持多级路由嵌套）
+- 富文本编辑器
-  - 动态面包屑
+- Markdown编辑器
-  - 快捷导航(标签页)
+- JSON编辑器
-  - Svg Sprite 图标
+- Screenfull全屏
-  - 本地mock数据
+- 列表拖拽
-  - Screenfull全屏
+- Svg Sprite 图标
-  - 自适应收缩侧边栏
-
-- 编辑器
-  - 富文本
-  - Markdown
-  - JSON 等多格式
-
-- Excel
-  - 导出excel
-  - 导出zip
-  - 导入excel
-  - 前端可视化excel
-
-- 表格
-  - 动态表格
-  - 拖拽表格
-  - 树形表格
-  - 内联编辑
-
-- 错误页面
-  - 401
-  - 404
-
-- 組件
-  - 头像上传
-  - 返回顶部
-  - 拖拽Dialog
-  - 拖拽Select
-  - 拖拽看板
-  - 列表拖拽
-  - SplitPane
-  - Dropzone
-  - Sticky
-  - CountTo
-
-- 综合实例
-- 错误日志
 - Dashboard
-- 引导页
+- 本地mock数据
-- ECharts 图表
+- Echarts 图表
 - Clipboard(剪贴复制)
+- 401/404错误页面
+- 错误日志
+- 导出excel
+- 导出zip
+- 前端可视化excel
+- 树形table
+- Table example
+- 动态table example
+- 拖拽table example
+- 内联编辑table example
+- Form example
+- 二步登录
+- SplitPane
+- Dropzone
+- Sticky
+- CountTo
 - Markdown2html
 ```
 
 ## 开发
-
 ```bash
 # 克隆项目
 git clone https://github.com/PanJiaChen/vue-element-admin.git
 
 # 安装依赖
 npm install
-
+   
-# 建议不要用 cnpm 安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题
+# 建议不要用cnpm安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题
 npm install --registry=https://registry.npm.taobao.org
 
 # 启动服务
 npm run dev
 ```
-
 浏览器访问 http://localhost:9527
 
 ## 发布
-
 ```bash
 # 构建测试环境
 npm run build:sit
 
-# 构建生产环境
+# 构建生成环境
 npm run build:prod
 ```
 
 ## 其它
-
 ```bash
 # --report to build with bundle size analytics
-npm run build:prod
+npm run build:prod --report
-
-# --generate a bundle size analytics. default: bundle-report.html
-npm run build:prod --generate_report
 
 # --preview to start a server in local to preview
 npm run build:prod --preview
@@ -201,33 +145,20 @@ npm run lint
 npm run lint -- --fix
 ```
 
-更多信息请参考 [使用文档](https://panjiachen.github.io/vue-element-admin-site/zh/)
+更多信息请参考 [使用文档](https://panjiachen.github.io/vue-element-admin-site/#/deploy)
 
 ## Changelog
-
 Detailed changes for each release are documented in the [release notes](https://github.com/PanJiaChen/vue-element-admin/releases).
 
 ## Online Demo
-
 [在线 Demo](http://panjiachen.github.io/vue-element-admin)
 
 ## Donate
-
 如果你觉得这个项目帮助到了你，你可以帮作者买一杯果汁表示鼓励 :tropical_drink:
 ![donate](https://panjiachen.github.io/donate/donation.png)
 
-[更多捐赠方式](https://panjiachen.gitee.io/vue-element-admin-site/zh/donate)
-
 [Paypal Me](https://www.paypal.me/panfree23)
 
-## Browsers support
-
-Modern browsers and Internet Explorer 10+.
-
-| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari |
-| --------- | --------- | --------- | --------- |
-| IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions
-
 ## License
 
 [MIT](https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE)

build/build.js

@@ -8,12 +8,9 @@ const chalk = require('chalk')
 const webpack = require('webpack')
 const config = require('../config')
 const webpackConfig = require('./webpack.prod.conf')
-var connect = require('connect')
+const server = require('pushstate-server')
-var serveStatic = require('serve-static')
 
-const spinner = ora(
+var spinner = ora('building for '+ process.env.env_config+ ' environment...' )
-  'building for ' + process.env.env_config + ' environment...'
-)
 spinner.start()
 
 rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
@@ -21,47 +18,31 @@ rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
   webpack(webpackConfig, (err, stats) => {
     spinner.stop()
     if (err) throw err
-    process.stdout.write(
+    process.stdout.write(stats.toString({
-      stats.toString({
+      colors: true,
-        colors: true,
+      modules: false,
-        modules: false,
+      children: false,
-        children: false,
+      chunks: false,
-        chunks: false,
+      chunkModules: false
-        chunkModules: false
+    }) + '\n\n')
-      }) + '\n\n'
-    )
 
     if (stats.hasErrors()) {
-      console.log(chalk.red(' Build failed with errors.\n'))
+      console.log(chalk.red('  Build failed with errors.\n'))
       process.exit(1)
     }
 
-    console.log(chalk.cyan(' Build complete.\n'))
+    console.log(chalk.cyan('  Build complete.\n'))
-    console.log(
+    console.log(chalk.yellow(
-      chalk.yellow(
+      '  Tip: built files are meant to be served over an HTTP server.\n' +
-        ' Tip: built files are meant to be served over an HTTP server.\n' +
+      '  Opening index.html over file:// won\'t work.\n'
-          " Opening index.html over file:// won't work.\n"
+    ))
-      )
+    if(process.env.npm_config_preview){
-    )
+      server.start({
-
+          port: 9526,
-    if (process.env.npm_config_preview) {
+          directory: './dist',
-      const port = 9526
+          file: '/index.html'
-      const host = 'http://localhost:' + port
+      });
-      const basePath = config.build.assetsPublicPath
+      console.log('> Listening at ' +  'http://localhost:9526' + '\n')
-      const app = connect()
-
-      app.use(
-        basePath,
-        serveStatic('./dist', {
-          index: ['index.html', '/']
-        })
-      )
-
-      app.listen(port, function() {
-        console.log(
-          chalk.green(`> Listening at  http://localhost:${port}${basePath}`)
-        )
-      })
     }
   })
 })

build/check-versions.js

@@ -4,11 +4,8 @@ const semver = require('semver')
 const packageConfig = require('../package.json')
 const shell = require('shelljs')
 
-function exec(cmd) {
+function exec (cmd) {
-  return require('child_process')
+  return require('child_process').execSync(cmd).toString().trim()
-    .execSync(cmd)
-    .toString()
-    .trim()
 }
 
 const versionRequirements = [
@@ -27,30 +24,23 @@ if (shell.which('npm')) {
   })
 }
 
-module.exports = function() {
+module.exports = function () {
   const warnings = []
 
   for (let i = 0; i < versionRequirements.length; i++) {
     const mod = versionRequirements[i]
 
     if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
-      warnings.push(
+      warnings.push(mod.name + ': ' +
-        mod.name +
+        chalk.red(mod.currentVersion) + ' should be ' +
-          ': ' +
+        chalk.green(mod.versionRequirement)
-          chalk.red(mod.currentVersion) +
-          ' should be ' +
-          chalk.green(mod.versionRequirement)
       )
     }
   }
 
   if (warnings.length) {
     console.log('')
-    console.log(
+    console.log(chalk.yellow('To use this template, you must update following to modules:'))
-      chalk.yellow(
-        'To use this template, you must update following to modules:'
-      )
-    )
     console.log()
 
     for (let i = 0; i < warnings.length; i++) {

build/utils.js

@@ -1,19 +1,18 @@
 'use strict'
 const path = require('path')
 const config = require('../config')
-const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
 const packageConfig = require('../package.json')
 
-exports.assetsPath = function(_path) {
+exports.assetsPath = function (_path) {
-  const assetsSubDirectory =
+  const assetsSubDirectory = process.env.NODE_ENV === 'production'
-    process.env.NODE_ENV === 'production'
+    ? config.build.assetsSubDirectory
-      ? config.build.assetsSubDirectory
+    : config.dev.assetsSubDirectory
-      : config.dev.assetsSubDirectory
 
   return path.posix.join(assetsSubDirectory, _path)
 }
 
-exports.cssLoaders = function(options) {
+exports.cssLoaders = function (options) {
   options = options || {}
 
   const cssLoader = {
@@ -31,22 +30,8 @@ exports.cssLoaders = function(options) {
   }
 
   // generate loader string to be used with extract text plugin
-  function generateLoaders(loader, loaderOptions) {
+  function generateLoaders (loader, loaderOptions) {
-    const loaders = []
+    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
-
-    // Extract CSS when that option is specified
-    // (which is the case during production build)
-    if (options.extract) {
-      loaders.push(MiniCssExtractPlugin.loader)
-    } else {
-      loaders.push('vue-style-loader')
-    }
-
-    loaders.push(cssLoader)
-
-    if (options.usePostCSS) {
-      loaders.push(postcssLoader)
-    }
 
     if (loader) {
       loaders.push({
@@ -57,16 +42,24 @@ exports.cssLoaders = function(options) {
       })
     }
 
-    return 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)
+    }
   }
+
   // https://vue-loader.vuejs.org/en/configurations/extract-css.html
   return {
     css: generateLoaders(),
     postcss: generateLoaders(),
     less: generateLoaders('less'),
-    sass: generateLoaders('sass', {
+    sass: generateLoaders('sass', { indentedSyntax: true }),
-      indentedSyntax: true
-    }),
     scss: generateLoaders('sass'),
     stylus: generateLoaders('stylus'),
     styl: generateLoaders('stylus')
@@ -74,7 +67,7 @@ exports.cssLoaders = function(options) {
 }
 
 // Generate loaders for standalone style files (outside of .vue)
-exports.styleLoaders = function(options) {
+exports.styleLoaders = function (options) {
   const output = []
   const loaders = exports.cssLoaders(options)
 

build/vue-loader.conf.js

@@ -1,5 +1,22 @@
 '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 = {
-  //You can set the vue-loader configuration by yourself.
+  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

@@ -2,10 +2,9 @@
 const path = require('path')
 const utils = require('./utils')
 const config = require('../config')
-const { VueLoaderPlugin } = require('vue-loader')
 const vueLoaderConfig = require('./vue-loader.conf')
 
-function resolve(dir) {
+function resolve (dir) {
   return path.join(__dirname, '..', dir)
 }
 
@@ -28,15 +27,15 @@ module.exports = {
   output: {
     path: config.build.assetsRoot,
     filename: '[name].js',
-    publicPath:
+    publicPath: process.env.NODE_ENV === 'production'
-      process.env.NODE_ENV === 'production'
+      ? config.build.assetsPublicPath
-        ? config.build.assetsPublicPath
+      : config.dev.assetsPublicPath
-        : config.dev.assetsPublicPath
   },
   resolve: {
     extensions: ['.js', '.vue', '.json'],
     alias: {
-      '@': resolve('src')
+      'vue$': 'vue/dist/vue.esm.js',
+      '@': resolve('src'),
     }
   },
   module: {
@@ -50,11 +49,7 @@ module.exports = {
       {
         test: /\.js$/,
         loader: 'babel-loader?cacheDirectory',
-        include: [
+        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
-          resolve('src'),
-          resolve('test'),
-          resolve('node_modules/webpack-dev-server/client')
-        ]
       },
       {
         test: /\.svg$/,
@@ -91,7 +86,6 @@ module.exports = {
       }
     ]
   },
-  plugins: [new VueLoaderPlugin()],
   node: {
     // prevent webpack from injecting useless setImmediate polyfill because Vue
     // source contains it (although only uses it if it's native).

build/webpack.dev.conf.js

@@ -9,7 +9,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin')
 const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
 const portfinder = require('portfinder')
 
-function resolve(dir) {
+function resolve (dir) {
   return path.join(__dirname, '..', dir)
 }
 
@@ -17,12 +17,8 @@ const HOST = process.env.HOST
 const PORT = process.env.PORT && Number(process.env.PORT)
 
 const devWebpackConfig = merge(baseWebpackConfig, {
-  mode: 'development',
   module: {
-    rules: utils.styleLoaders({
+    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
-      sourceMap: config.dev.cssSourceMap,
-      usePostCSS: true
-    })
   },
   // cheap-module-eval-source-map is faster for development
   devtool: config.dev.devtool,
@@ -43,7 +39,7 @@ const devWebpackConfig = merge(baseWebpackConfig, {
     proxy: config.dev.proxyTable,
     quiet: true, // necessary for FriendlyErrorsPlugin
     watchOptions: {
-      poll: config.dev.poll
+      poll: config.dev.poll,
     }
   },
   plugins: [
@@ -51,6 +47,8 @@ const devWebpackConfig = merge(baseWebpackConfig, {
       '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',
@@ -58,9 +56,7 @@ const devWebpackConfig = merge(baseWebpackConfig, {
       inject: true,
       favicon: resolve('favicon.ico'),
       title: 'vue-element-admin',
-      templateParameters: {
+      path: config.dev.assetsPublicPath + config.dev.assetsSubDirectory
-        BASE_URL: config.dev.assetsPublicPath + config.dev.assetsSubDirectory,
-      },
     }),
   ]
 })
@@ -77,20 +73,14 @@ module.exports = new Promise((resolve, reject) => {
       devWebpackConfig.devServer.port = port
 
       // Add FriendlyErrorsPlugin
-      devWebpackConfig.plugins.push(
+      devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
-        new FriendlyErrorsPlugin({
+        compilationSuccessInfo: {
-          compilationSuccessInfo: {
+          messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
-            messages: [
+        },
-              `Your application is running here: http://${
+        onErrors: config.dev.notifyOnErrors
-                devWebpackConfig.devServer.host
+        ? utils.createNotifierCallback()
-              }:${port}`
+        : undefined
-            ]
+      }))
-          },
-          onErrors: config.dev.notifyOnErrors
-            ? utils.createNotifierCallback()
-            : undefined
-        })
-      )
 
       resolve(devWebpackConfig)
     }

build/webpack.prod.conf.js

@@ -7,23 +7,17 @@ const merge = require('webpack-merge')
 const baseWebpackConfig = require('./webpack.base.conf')
 const CopyWebpackPlugin = require('copy-webpack-plugin')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
-const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
-const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
-const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
 const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
 
-function resolve(dir) {
+function resolve (dir) {
   return path.join(__dirname, '..', dir)
 }
 
-const env = require('../config/' + process.env.env_config + '.env')
+const env = require('../config/'+process.env.env_config+'.env')
-
-// For NamedChunksPlugin
-const seen = new Set()
-const nameLength = 4
 
 const webpackConfig = merge(baseWebpackConfig, {
-  mode: 'production',
   module: {
     rules: utils.styleLoaders({
       sourceMap: config.build.productionSourceMap,
@@ -34,18 +28,37 @@ const webpackConfig = merge(baseWebpackConfig, {
   devtool: config.build.productionSourceMap ? config.build.devtool : false,
   output: {
     path: config.build.assetsRoot,
-    filename: utils.assetsPath('js/[name].[chunkhash:8].js'),
+    filename: utils.assetsPath('js/[name].[chunkhash].js'),
-    chunkFilename: utils.assetsPath('js/[name].[chunkhash:8].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 MiniCssExtractPlugin({
+    new ExtractTextPlugin({
-      filename: utils.assetsPath('css/[name].[contenthash:8].css'),
+      filename: utils.assetsPath('css/[name].[contenthash].css'),
-      chunkFilename: utils.assetsPath('css/[name].[contenthash:8].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
@@ -56,43 +69,75 @@ const webpackConfig = merge(baseWebpackConfig, {
       inject: true,
       favicon: resolve('favicon.ico'),
       title: 'vue-element-admin',
-      templateParameters: {
+      path: config.build.assetsPublicPath + config.build.assetsSubDirectory,
-        BASE_URL: config.build.assetsPublicPath + config.build.assetsSubDirectory,
-      },
       minify: {
         removeComments: true,
         collapseWhitespace: true,
         removeAttributeQuotes: true
         // more options:
         // https://github.com/kangax/html-minifier#options-quick-reference
-      }
+      },
-      // default sort mode uses toposort which cannot handle cyclic deps
+      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
-      // in certain cases, and in webpack 4, chunk order in HTML doesn't
+      chunksSortMode: 'dependency'
-      // matter anyway
-    }),
-    new ScriptExtHtmlWebpackPlugin({
-      //`runtime` must same as runtimeChunk name. default is `runtime`
-      inline: /runtime\..*\.js$/
-    }),
-    // keep chunk.id stable when chunk has no name
-    new webpack.NamedChunksPlugin(chunk => {
-      if (chunk.name) {
-        return chunk.name
-      }
-      const modules = Array.from(chunk.modulesIterable)
-      if (modules.length > 1) {
-        const hash = require('hash-sum')
-        const joinedHash = hash(modules.map(m => m.id).join('_'))
-        let len = nameLength
-        while (seen.has(joinedHash.substr(0, len))) len++
-        seen.add(joinedHash.substr(0, len))
-        return `chunk-${joinedHash.substr(0, len)}`
-      } else {
-        return modules[0].id
-      }
     }),
     // 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([
       {
@@ -101,48 +146,7 @@ const webpackConfig = merge(baseWebpackConfig, {
         ignore: ['.*']
       }
     ])
-  ],
+  ]
-  optimization: {
-    splitChunks: {
-      chunks: 'all',
-      cacheGroups: {
-        libs: {
-          name: 'chunk-libs',
-          test: /[\\/]node_modules[\\/]/,
-          priority: 10,
-          chunks: 'initial' // 只打包初始时依赖的第三方
-        },
-        elementUI: {
-          name: 'chunk-elementUI', // 单独将 elementUI 拆包
-          priority: 20, // 权重要大于 libs 和 app 不然会被打包进 libs 或者 app
-          test: /[\\/]node_modules[\\/]element-ui[\\/]/
-        },
-        commons: {
-          name: 'chunk-commons',
-          test: resolve('src/components'), // 可自定义拓展你的规则
-          minChunks: 3, // 最小公用次数
-          priority: 5,
-          reuseExistingChunk: true
-        }
-      }
-    },
-    runtimeChunk: 'single',
-    minimizer: [
-      new UglifyJsPlugin({
-        uglifyOptions: {
-          mangle: {
-            safari10: true
-          }
-        },
-        sourceMap: config.build.productionSourceMap,
-        cache: true,
-        parallel: true
-      }),
-      // Compress extracted CSS. We are using this plugin so that possible
-      // duplicated CSS from different components can be deduped.
-      new OptimizeCSSAssetsPlugin()
-    ]
-  }
 })
 
 if (config.build.productionGzip) {
@@ -150,9 +154,12 @@ if (config.build.productionGzip) {
 
   webpackConfig.plugins.push(
     new CompressionWebpackPlugin({
+      asset: '[path].gz[query]',
       algorithm: 'gzip',
       test: new RegExp(
-        '\\.(' + config.build.productionGzipExtensions.join('|') + ')$'
+        '\\.(' +
+        config.build.productionGzipExtensions.join('|') +
+        ')$'
       ),
       threshold: 10240,
       minRatio: 0.8
@@ -160,28 +167,9 @@ if (config.build.productionGzip) {
   )
 }
 
-if (config.build.generateAnalyzerReport || config.build.bundleAnalyzerReport) {
+if (config.build.bundleAnalyzerReport) {
-  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
+  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
-    .BundleAnalyzerPlugin
+  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
-
-  if (config.build.bundleAnalyzerReport) {
-    webpackConfig.plugins.push(
-      new BundleAnalyzerPlugin({
-        analyzerPort: 8080,
-        generateStatsFile: false
-      })
-    )
-  }
-
-  if (config.build.generateAnalyzerReport) {
-    webpackConfig.plugins.push(
-      new BundleAnalyzerPlugin({
-        analyzerMode: 'static',
-        reportFilename: 'bundle-report.html',
-        openAnalyzer: false
-      })
-    )
-  }
 }
 
 module.exports = webpackConfig

config/dev.env.js

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

config/index.js

@@ -6,16 +6,14 @@ const path = require('path')
 
 module.exports = {
   dev: {
+
     // Paths
     assetsSubDirectory: 'static',
     assetsPublicPath: '/',
     proxyTable: {},
 
     // Various Dev Server settings
-
+    host: 'localhost', // can be overwritten by process.env.HOST
-    // can be overwritten by process.env.HOST
-    // if you want dev by ip, please set host: '0.0.0.0'
-    host: 'localhost',
     port: 9527, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
     autoOpenBrowser: true,
     errorOverlay: true,
@@ -35,14 +33,19 @@ module.exports = {
      */
 
     // https://webpack.js.org/configuration/devtool/#development
-    devtool: 'cheap-source-map',
+    devtool: '#cheap-source-map',
+
+    // If you have problems debugging vue-files in devtools,
+    // set this to false - it *may* help
+    // https://vue-loader.vuejs.org/en/options.html#cachebusting
+    cacheBusting: true,
 
     // CSS Sourcemaps off by default because relative paths are "buggy"
     // with this option, according to the CSS-Loader README
     // (https://github.com/webpack/css-loader#sourcemaps)
     // In our experience, they generally work as expected,
     // just be aware of this issue when enabling this option.
-    cssSourceMap: false
+    cssSourceMap: false,
   },
 
   build: {
@@ -53,21 +56,16 @@ module.exports = {
     assetsRoot: path.resolve(__dirname, '../dist'),
     assetsSubDirectory: 'static',
 
-    /**
+    // you can set by youself according to actual condition
-     * You can set by youself according to actual condition
+    assetsPublicPath: './',
-     * You will need to set this if you plan to deploy your site under a sub path,
-     * for example GitHub pages. If you plan to deploy your site to https://foo.github.io/bar/,
-     * then assetsPublicPath should be set to "/bar/".
-     * In most cases please use '/' !!!
-     */
-    assetsPublicPath: '/',
 
     /**
      * Source Maps
      */
+
     productionSourceMap: false,
     // https://webpack.js.org/configuration/devtool/#production
-    devtool: 'source-map',
+    devtool: '#source-map',
 
     // Gzip off by default as many popular static hosts such as
     // Surge or Netlify already gzip all static assets for you.
@@ -78,11 +76,8 @@ module.exports = {
 
     // Run the build command with an extra argument to
     // View the bundle analyzer report after build finishes:
-    // `npm run build:prod --report`
+    // `npm run build --report`
     // Set to `true` or `false` to always turn it on or off
-    bundleAnalyzerReport: process.env.npm_config_report || false,
+    bundleAnalyzerReport: process.env.npm_config_report
-
-    // `npm run build:prod --generate_report`
-    generateAnalyzerReport: process.env.npm_config_generate_report || false
   }
 }

config/prod.env.js

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

config/sit.env.js

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

index.html

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

package.json

@@ -1,127 +1,96 @@
 {
   "name": "vue-element-admin",
-  "version": "3.11.0",
+  "version": "3.6.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": "cross-env BABEL_ENV=development webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
+    "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",
+    "test": "npm run lint"
-    "precommit": "lint-staged",
-    "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml"
-  },
-  "lint-staged": {
-    "src/**/*.{js,vue}": [
-      "eslint --fix",
-      "git add"
-    ]
-  },
-  "keywords": [
-    "vue",
-    "element-ui",
-    "admin",
-    "management-system",
-    "admin-template"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/PanJiaChen/vue-element-admin.git"
-  },
-  "bugs": {
-    "url": "https://github.com/PanJiaChen/vue-element-admin/issues"
   },
   "dependencies": {
-    "axios": "0.18.0",
+    "axios": "0.17.1",
     "clipboard": "1.7.1",
-    "codemirror": "5.39.2",
+    "codemirror": "5.32.0",
-    "driver.js": "0.8.1",
     "dropzone": "5.2.0",
-    "echarts": "4.1.0",
+    "echarts": "3.8.5",
-    "element-ui": "2.4.11",
+    "element-ui": "2.0.8",
-    "file-saver": "1.3.8",
+    "file-saver": "1.3.3",
-    "fuse.js": "3.4.2",
+    "font-awesome": "4.7.0",
     "js-cookie": "2.2.0",
-    "jsonlint": "1.6.3",
+    "jsonlint": "1.6.2",
     "jszip": "3.1.5",
     "mockjs": "1.0.1-beta3",
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
-    "screenfull": "4.0.0",
+    "screenfull": "3.3.2",
-    "showdown": "1.8.6",
+    "showdown": "1.8.5",
+    "simplemde": "1.11.2",
     "sortablejs": "1.7.0",
-    "tui-editor": "1.2.7",
+    "vue": "2.5.10",
-    "vue": "2.5.17",
     "vue-count-to": "1.0.13",
     "vue-i18n": "7.3.2",
-    "vue-router": "3.0.2",
+    "vue-multiselect": "2.0.8",
+    "vue-router": "3.0.1",
     "vue-splitpane": "1.0.2",
-    "vuedraggable": "^2.16.0",
+    "vuedraggable": "2.15.0",
     "vuex": "3.0.1",
     "xlsx": "^0.11.16"
   },
   "devDependencies": {
-    "autoprefixer": "8.5.0",
+    "autoprefixer": "7.2.3",
-    "babel-core": "6.26.3",
+    "babel-core": "6.26.0",
-    "babel-eslint": "8.2.6",
+    "babel-eslint": "8.0.3",
     "babel-helper-vue-jsx-merge-props": "2.0.3",
-    "babel-loader": "7.1.5",
+    "babel-loader": "7.1.2",
-    "babel-plugin-dynamic-import-node": "2.0.0",
     "babel-plugin-syntax-jsx": "6.18.0",
     "babel-plugin-transform-runtime": "6.23.0",
-    "babel-plugin-transform-vue-jsx": "3.7.0",
+    "babel-plugin-transform-vue-jsx": "3.5.0",
-    "babel-preset-env": "1.7.0",
+    "babel-preset-env": "1.6.1",
     "babel-preset-stage-2": "6.24.1",
-    "chalk": "2.4.1",
+    "chalk": "2.3.0",
-    "compression-webpack-plugin": "2.0.0",
+    "copy-webpack-plugin": "4.3.0",
-    "connect": "3.6.6",
+    "cross-env": "5.1.1",
-    "copy-webpack-plugin": "4.5.2",
+    "css-loader": "0.28.7",
-    "cross-env": "5.2.0",
+    "eslint": "4.13.1",
-    "css-loader": "1.0.0",
+    "eslint-friendly-formatter": "3.0.0",
-    "eslint": "5.15.2",
+    "eslint-loader": "1.9.0",
-    "eslint-friendly-formatter": "4.0.1",
+    "eslint-plugin-html": "4.0.1",
-    "eslint-loader": "2.1.2",
+    "extract-text-webpack-plugin": "3.0.2",
-    "eslint-plugin-vue": "5.2.2",
+    "file-loader": "1.1.5",
-    "file-loader": "1.1.11",
+    "friendly-errors-webpack-plugin": "1.6.1",
-    "friendly-errors-webpack-plugin": "1.7.0",
+    "html-webpack-plugin": "2.30.1",
-    "hash-sum": "1.0.2",
+    "node-notifier": "5.1.2",
-    "html-webpack-plugin": "4.0.0-alpha",
-    "husky": "0.14.3",
-    "lint-staged": "7.2.2",
-    "mini-css-extract-plugin": "0.4.1",
-    "node-notifier": "5.2.1",
     "node-sass": "^4.7.2",
-    "optimize-css-assets-webpack-plugin": "5.0.0",
+    "optimize-css-assets-webpack-plugin": "3.2.0",
-    "ora": "3.0.0",
+    "ora": "1.3.0",
-    "path-to-regexp": "2.4.0",
     "portfinder": "1.0.13",
-    "postcss-import": "11.1.0",
+    "postcss-import": "11.0.0",
-    "postcss-loader": "2.1.6",
+    "postcss-loader": "2.0.9",
-    "postcss-url": "7.3.2",
+    "postcss-url": "7.3.0",
+    "pushstate-server": "3.0.1",
     "rimraf": "2.6.2",
-    "sass-loader": "7.0.3",
+    "sass-loader": "6.0.6",
-    "script-ext-html-webpack-plugin": "2.0.1",
     "script-loader": "0.7.2",
-    "semver": "5.5.0",
+    "semver": "5.4.1",
-    "serve-static": "1.13.2",
+    "shelljs": "0.7.8",
-    "shelljs": "0.8.2",
+    "svg-sprite-loader": "3.5.2",
-    "svg-sprite-loader": "3.8.0",
+    "uglifyjs-webpack-plugin": "1.1.3",
-    "svgo": "1.0.5",
+    "url-loader": "0.6.2",
-    "uglifyjs-webpack-plugin": "1.2.7",
+    "vue-loader": "13.5.0",
-    "url-loader": "1.0.1",
+    "vue-style-loader": "3.0.3",
-    "vue-loader": "15.3.0",
+    "vue-template-compiler": "2.5.10",
-    "vue-style-loader": "4.1.2",
+    "webpack": "3.10.0",
-    "vue-template-compiler": "2.5.17",
+    "webpack-bundle-analyzer": "2.9.1",
-    "webpack": "4.16.5",
+    "webpack-dev-server": "2.9.7",
-    "webpack-bundle-analyzer": "2.13.1",
+    "webpack-merge": "4.1.1"
-    "webpack-cli": "3.1.0",
-    "webpack-dev-server": "3.1.14",
-    "webpack-merge": "4.1.4"
   },
   "engines": {
-    "node": ">= 6.0.0",
+    "node": ">= 4.0.0",
     "npm": ">= 3.0.0"
   },
   "browserslist": [

src/App.vue

@@ -1,11 +1,11 @@
 <template>
-  <div id="app">
+	<div id="app">
-    <router-view />
+		<router-view></router-view>
-  </div>
+	</div>
 </template>
 
 <script>
-export default {
+  export default{
-  name: 'App'
+    name: 'APP'
-}
+  }
 </script>

src/api/article.js

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

src/api/role.js

@@ -1,38 +0,0 @@
-import request from '@/utils/request'
-
-export function getRoutes() {
-  return request({
-    url: '/routes',
-    method: 'get'
-  })
-}
-
-export function getRoles() {
-  return request({
-    url: '/roles',
-    method: 'get'
-  })
-}
-
-export function deleteRole(id) {
-  return request({
-    url: `/roles/${id}`,
-    method: 'delete'
-  })
-}
-
-export function addRole(data) {
-  return request({
-    url: '/roles',
-    method: 'post',
-    data
-  })
-}
-
-export function updateRole(key, data) {
-  return request({
-    url: `/roles/${key}`,
-    method: 'put',
-    data
-  })
-}

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

@@ -1,10 +1,10 @@
 <template>
   <transition :name="transitionName">
-    <div v-show="visible" :style="customStyle" class="back-to-ceiling" @click="backToTop">
+    <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 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>
@@ -25,16 +25,14 @@ export default {
     },
     customStyle: {
       type: Object,
-      default: function() {
+      default: {
-        return {
+        right: '50px',
-          right: '50px',
+        bottom: '50px',
-          bottom: '50px',
+        width: '40px',
-          width: '40px',
+        height: '40px',
-          height: '40px',
+        'border-radius': '4px',
-          'border-radius': '4px',
+        'line-height': '45px',
-          'line-height': '45px',
+        background: '#e7eaf1'
-          background: '#e7eaf1'
-        }
       }
     },
     transitionName: {
@@ -45,8 +43,7 @@ export default {
   data() {
     return {
       visible: false,
-      interval: null,
+      interval: null
-      isMoving: false
     }
   },
   mounted() {
@@ -63,16 +60,13 @@ export default {
       this.visible = window.pageYOffset > this.visibilityHeight
     },
     backToTop() {
-      if (this.isMoving) return
       const start = window.pageYOffset
       let i = 0
-      this.isMoving = true
       this.interval = setInterval(() => {
         const next = Math.floor(this.easeInOutQuad(10 * i, start, -start, 500))
         if (next <= this.backPosition) {
           window.scrollTo(0, this.backPosition)
           clearInterval(this.interval)
-          this.isMoving = false
         } else {
           window.scrollTo(0, next)
         }

src/components/Breadcrumb/index.vue

@@ -1,11 +1,9 @@
 <template>
   <el-breadcrumb class="app-breadcrumb" separator="/">
     <transition-group name="breadcrumb">
-      <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
+      <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">
+        <span v-if='item.redirect==="noredirect"||index==levelList.length-1' class="no-redirect">{{generateTitle(item.meta.title)}}</span>
-          {{ generateTitle(item.meta.title) }}
+        <router-link v-else :to="item.redirect||item.path">{{generateTitle(item.meta.title)}}</router-link>
-        </span>
-        <a v-else @click.prevent="handleLink(item)">{{ generateTitle(item.meta.title) }}</a>
       </el-breadcrumb-item>
     </transition-group>
   </el-breadcrumb>
@@ -13,9 +11,11 @@
 
 <script>
 import { generateTitle } from '@/utils/i18n'
-import pathToRegexp from 'path-to-regexp'
 
 export default {
+  created() {
+    this.getBreadcrumb()
+  },
   data() {
     return {
       levelList: null
@@ -26,34 +26,15 @@ export default {
       this.getBreadcrumb()
     }
   },
-  created() {
-    this.getBreadcrumb()
-  },
   methods: {
     generateTitle,
     getBreadcrumb() {
       let matched = this.$route.matched.filter(item => item.name)
-
       const first = matched[0]
-      if (first && first.name.trim().toLocaleLowerCase() !== 'Dashboard'.toLocaleLowerCase()) {
+      if (first && first.name !== 'dashboard') {
         matched = [{ path: '/dashboard', meta: { title: 'dashboard' }}].concat(matched)
       }
-
+      this.levelList = matched
-      this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
-    },
-    pathCompile(path) {
-      // To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561
-      const { params } = this.$route
-      var toPath = pathToRegexp.compile(path)
-      return toPath(params)
-    },
-    handleLink(item) {
-      const { redirect, path } = item
-      if (redirect) {
-        this.$router.push(redirect)
-        return
-      }
-      this.$router.push(this.pathCompile(path))
     }
   }
 }
@@ -64,7 +45,7 @@ export default {
     display: inline-block;
     font-size: 14px;
     line-height: 50px;
-    margin-left: 8px;
+    margin-left: 10px;
     .no-redirect {
       color: #97a8be;
       cursor: text;

src/components/Charts/keyboard.vue

@@ -1,13 +1,11 @@
 <template>
-  <div :id="id" :class="className" :style="{height:height,width:width}" />
+  <div :class="className" :id="id" :style="{height:height,width:width}"></div>
 </template>
 
 <script>
 import echarts from 'echarts'
-import resize from './mixins/resize'
 
 export default {
-  mixins: [resize],
   props: {
     className: {
       type: String,
@@ -56,10 +54,6 @@ export default {
       this.chart.setOption(
         {
           backgroundColor: '#08263a',
-          grid: {
-            left: '5%',
-            right: '5%'
-          },
           xAxis: [{
             show: false,
             data: xAxisData

src/components/Charts/lineMarker.vue

@@ -1,13 +1,11 @@
 <template>
-  <div :id="id" :class="className" :style="{height:height,width:width}" />
+  <div :class="className" :id="id" :style="{height:height,width:width}"></div>
 </template>
 
 <script>
 import echarts from 'echarts'
-import resize from './mixins/resize'
 
 export default {
-  mixins: [resize],
   props: {
     className: {
       type: String,
@@ -80,8 +78,8 @@ export default {
         },
         grid: {
           top: 100,
-          left: '2%',
+          left: '3%',
-          right: '2%',
+          right: '4%',
           bottom: '2%',
           containLabel: true
         },

src/components/Charts/mixChart.vue

@@ -1,13 +1,11 @@
 <template>
-  <div :id="id" :class="className" :style="{height:height,width:width}" />
+  <div :class="className" :id="id" :style="{height:height,width:width}"></div>
 </template>
 
 <script>
 import echarts from 'echarts'
-import resize from './mixins/resize'
 
 export default {
-  mixins: [resize],
   props: {
     className: {
       type: String,
@@ -33,6 +31,7 @@ export default {
   },
   mounted() {
     this.initChart()
+    this.chart = null
   },
   beforeDestroy() {
     if (!this.chart) {
@@ -75,10 +74,8 @@ export default {
           }
         },
         grid: {
-          left: '5%',
-          right: '5%',
           borderWidth: 0,
-          top: 150,
+          top: 110,
           bottom: 95,
           textStyle: {
             color: '#fff'

src/components/Charts/mixins/resize.js

@@ -1,32 +0,0 @@
-import { debounce } from '@/utils'
-
-export default {
-  data() {
-    return {
-      sidebarElm: null
-    }
-  },
-  mounted() {
-    this.__resizeHandler = debounce(() => {
-      if (this.chart) {
-        this.chart.resize()
-      }
-    }, 100)
-    window.addEventListener('resize', this.__resizeHandler)
-
-    this.sidebarElm = document.getElementsByClassName('sidebar-container')[0]
-    this.sidebarElm && this.sidebarElm.addEventListener('transitionend', this.sidebarResizeHandler)
-  },
-  beforeDestroy() {
-    window.removeEventListener('resize', this.__resizeHandler)
-
-    this.sidebarElm && this.sidebarElm.removeEventListener('transitionend', this.sidebarResizeHandler)
-  },
-  methods: {
-    sidebarResizeHandler(e) {
-      if (e.propertyName === 'width') {
-        this.__resizeHandler()
-      }
-    }
-  }
-}

src/components/DndList/index.vue

@@ -1,23 +1,23 @@
 <template>
   <div class="dndList">
-    <div :style="{width:width1}" class="dndList-list">
+    <div class="dndList-list" :style="{width:width1}">
-      <h3>{{ list1Title }}</h3>
+      <h3>{{list1Title}}</h3>
-      <draggable :list="list1" :options="{group:'article'}" class="dragArea">
+      <draggable :list="list1" class="dragArea" :options="{group:'article'}">
-        <div v-for="element in list1" :key="element.id" class="list-complete-item">
+        <div class="list-complete-item" v-for="element in list1" :key='element.id'>
-          <div class="list-complete-item-handle">{{ element.id }}[{{ element.author }}] {{ element.title }}</div>
+          <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 style="color:#ff4949" class="el-icon-delete"></i>
             </span>
           </div>
         </div>
       </draggable>
     </div>
-    <div :style="{width:width2}" class="dndList-list">
+    <div class="dndList-list" :style="{width:width2}">
-      <h3>{{ list2Title }}</h3>
+      <h3>{{list2Title}}</h3>
-      <draggable :list="list2" :options="{group:'article'}" class="dragArea">
+      <draggable :list="filterList2" class="dragArea" :options="{group:'article'}">
-        <div v-for="element in list2" :key="element.id" class="list-complete-item">
+        <div class="list-complete-item" v-for="element in filterList2" :key='element.id'>
-          <div class="list-complete-item-handle2" @click="pushEle(element)">{{ element.id }} [{{ element.author }}] {{ element.title }}</div>
+          <div class='list-complete-item-handle2' @click="pushEle(element)"> [{{element.author}}] {{element.title}}</div>
         </div>
       </draggable>
     </div>
@@ -30,6 +30,16 @@ 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,
@@ -80,16 +90,7 @@ export default {
       }
     },
     pushEle(ele) {
-      for (const item of this.list2) {
+      this.list1.push(ele)
-        if (item.id === ele.id) {
-          const index = this.list2.indexOf(item)
-          this.list2.splice(index, 1)
-          break
-        }
-      }
-      if (this.isNotInList1(ele)) {
-        this.list1.push(ele)
-      }
     }
   }
 }

src/components/DragSelect/index.vue

@@ -1,61 +0,0 @@
-<template>
-  <el-select ref="dragSelect" v-model="selectVal" v-bind="$attrs" class="drag-select" multiple v-on="$listeners">
-    <slot />
-  </el-select>
-</template>
-
-<script>
-import Sortable from 'sortablejs'
-
-export default {
-  name: 'DragSelect',
-  props: {
-    value: {
-      type: Array,
-      required: true
-    }
-  },
-  computed: {
-    selectVal: {
-      get() {
-        return [...this.value]
-      },
-      set(val) {
-        this.$emit('input', [...val])
-      }
-    }
-  },
-  mounted() {
-    this.setSort()
-  },
-  methods: {
-    setSort() {
-      const el = this.$refs.dragSelect.$el.querySelectorAll('.el-select__tags > span')[0]
-      this.sortable = Sortable.create(el, {
-        ghostClass: 'sortable-ghost', // Class name for the drop placeholder,
-        setData: function(dataTransfer) {
-          dataTransfer.setData('Text', '')
-          // to avoid Firefox bug
-          // Detail see : https://github.com/RubaXa/Sortable/issues/1012
-        },
-        onEnd: evt => {
-          const targetRow = this.value.splice(evt.oldIndex, 1)[0]
-          this.value.splice(evt.newIndex, 0, targetRow)
-        }
-      })
-    }
-  }
-}
-</script>
-
-<style scoped>
-.drag-select >>> .sortable-ghost{
-  opacity: .8;
-  color: #fff!important;
-  background: #42b983!important;
-}
-
-.drag-select >>> .el-tag{
-  cursor: pointer;
-}
-</style>

src/components/Dropzone/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :id="id" :ref="id" :action="url" class="dropzone">
+  <div :ref="id" :action="url" class="dropzone" :id="id">
     <input type="file" name="file">
   </div>
 </template>
@@ -12,81 +12,12 @@ import 'dropzone/dist/dropzone.css'
 Dropzone.autoDiscover = false
 
 export default {
-  props: {
-    id: {
-      type: String,
-      required: true
-    },
-    url: {
-      type: String,
-      required: true
-    },
-    clickable: {
-      type: Boolean,
-      default: true
-    },
-    defaultMsg: {
-      type: String,
-      default: '上传图片'
-    },
-    acceptedFiles: {
-      type: String,
-      default: ''
-    },
-    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: '',
-      type: [String, Array]
-    },
-    couldPaste: {
-      type: Boolean,
-      default: false
-    }
-  },
   data() {
     return {
       dropzone: '',
       initOnce: true
     }
   },
-  watch: {
-    defaultImg(val) {
-      if (val.length === 0) {
-        this.initOnce = false
-        return
-      }
-      if (!this.initOnce) return
-      this.initImages(val)
-      this.initOnce = false
-    }
-  },
   mounted() {
     const element = document.getElementById(this.id)
     const vm = this
@@ -164,10 +95,6 @@ export default {
       vm.$emit('dropzone-successmultiple', file, error, xhr)
     })
   },
-  destroyed() {
-    document.removeEventListener('paste', this.pasteImg)
-    this.dropzone.destroy()
-  },
   methods: {
     removeAllFiles() {
       this.dropzone.removeAllFiles(true)
@@ -201,6 +128,76 @@ export default {
       }
     }
 
+  },
+  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>

src/components/ErrorLog/index.vue

@@ -1,12 +1,16 @@
 <template>
   <div v-if="errorLogs.length>0">
-    <el-badge :is-dot="true" style="line-height: 25px;margin-top: -5px;" @click.native="dialogTableVisible=true">
+    <el-badge :is-dot="true" style="line-height: 30px;" @click.native="dialogTableVisible=true">
-      <el-button style="padding: 8px 10px;" size="small" type="danger">
+      <el-button size="small" type="danger" class="bug-btn">
-        <svg-icon icon-class="bug" />
+        <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 :visible.sync="dialogTableVisible" title="Error Log" width="80%">
+    <el-dialog title="Error Log" :visible.sync="dialogTableVisible" width="80%">
       <el-table :data="errorLogs" border>
         <el-table-column label="Message">
           <template slot-scope="scope">
@@ -14,21 +18,21 @@
               <span class="message-title">Msg:</span>
               <el-tag type="danger">{{ scope.row.err.message }}</el-tag>
             </div>
-            <br>
+            <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>
+              <el-tag type="warning">{{scope.row.vm.$vnode.tag}} error in {{scope.row.info}}</el-tag>
             </div>
-            <br>
+            <br/>
             <div>
               <span class="message-title" style="padding-right: 16px;">Url: </span>
-              <el-tag type="success">{{ scope.row.url }}</el-tag>
+              <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 }}
+            {{ scope.row.err.stack}}
           </template>
         </el-table-column>
       </el-table>
@@ -39,7 +43,7 @@
 
 <script>
 export default {
-  name: 'ErrorLog',
+  name: 'errorLog',
   data() {
     return {
       dialogTableVisible: false
@@ -54,6 +58,16 @@ export default {
 </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;

src/components/GithubCorner/index.vue

@@ -1,24 +1,12 @@
 <template>
   <a href="https://github.com/PanJiaChen/vue-element-admin" target="_blank" class="github-corner" aria-label="View source on Github">
-    <svg
+    <svg width="80" height="80" viewBox="0 0 250 250" style="fill:#40c9c6; color:#fff; position: absolute; top: 84px; border: 0; right: 0;"
-      width="80"
+      aria-hidden="true">
-      height="80"
+      <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
-      viewBox="0 0 250 250"
+      <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"
-      style="fill:#40c9c6; color:#fff;"
+        fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
-      aria-hidden="true"
+      <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>
-      <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" />
-      <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
-        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"
-      />
     </svg>
   </a>
 </template>

src/components/Hamburger/index.vue

@@ -1,21 +1,20 @@
 <template>
-  <div style="padding: 0 15px;" @click="toggleClick">
+  <div>
-    <svg
+    <svg t="1492500959545" @click="toggleClick" class="wscn-icon hamburger" :class="{'is-active':isActive}" style="" viewBox="0 0 1024 1024"
-      :class="{'is-active':isActive}"
+      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">
-      class="hamburger"
+      <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"
-      viewBox="0 0 1024 1024"
+        p-id="1692"></path>
-      xmlns="http://www.w3.org/2000/svg"
+      <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"
-      width="64"
+        p-id="1693"></path>
-      height="64"
+      <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>
-      <path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />
     </svg>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'Hamburger',
+  name: 'hamburger',
   props: {
     isActive: {
       type: Boolean,
@@ -31,13 +30,16 @@ export default {
 
 <style scoped>
 .hamburger {
-  display: inline-block;
+	display: inline-block;
-  vertical-align: middle;
+	cursor: pointer;
-  width: 20px;
+	width: 20px;
-  height: 20px;
+	height: 20px;
+	transform: rotate(90deg);
+	transition: .38s;
+	transform-origin: 50% 50%;
 }
 
 .hamburger.is-active {
-  transform: rotate(180deg);
+	transform: rotate(0deg);
 }
 </style>

src/components/HeaderSearch/index.vue

@@ -1,188 +0,0 @@
-<template>
-  <div :class="{'show':show}" class="header-search">
-    <svg-icon class-name="search-icon" icon-class="search" @click.stop="click" />
-    <el-select
-      ref="headerSearchSelect"
-      v-model="search"
-      :remote-method="querySearch"
-      filterable
-      default-first-option
-      remote
-      placeholder="Search"
-      class="header-search-select"
-      @change="change"
-    >
-      <el-option v-for="item in options" :key="item.path" :value="item" :label="item.title.join(' > ')" />
-    </el-select>
-  </div>
-</template>
-
-<script>
-import Fuse from 'fuse.js'
-import path from 'path'
-import i18n from '@/lang'
-
-export default {
-  name: 'HeaderSearch',
-  data() {
-    return {
-      search: '',
-      options: [],
-      searchPool: [],
-      show: false,
-      fuse: undefined
-    }
-  },
-  computed: {
-    routes() {
-      return this.$store.getters.permission_routes
-    },
-    lang() {
-      return this.$store.getters.language
-    }
-  },
-  watch: {
-    lang() {
-      this.searchPool = this.generateRoutes(this.routes)
-    },
-    routes() {
-      this.searchPool = this.generateRoutes(this.routes)
-    },
-    searchPool(list) {
-      this.initFuse(list)
-    },
-    show(value) {
-      if (value) {
-        document.body.addEventListener('click', this.close)
-      } else {
-        document.body.removeEventListener('click', this.close)
-      }
-    }
-  },
-  mounted() {
-    this.searchPool = this.generateRoutes(this.routes)
-  },
-  methods: {
-    click() {
-      this.show = !this.show
-      if (this.show) {
-        this.$refs.headerSearchSelect && this.$refs.headerSearchSelect.focus()
-      }
-    },
-    close() {
-      this.$refs.headerSearchSelect && this.$refs.headerSearchSelect.blur()
-      this.options = []
-      this.show = false
-    },
-    change(val) {
-      this.$router.push(val.path)
-      this.search = ''
-      this.options = []
-      this.$nextTick(() => {
-        this.show = false
-      })
-    },
-    initFuse(list) {
-      this.fuse = new Fuse(list, {
-        shouldSort: true,
-        threshold: 0.4,
-        location: 0,
-        distance: 100,
-        maxPatternLength: 32,
-        minMatchCharLength: 1,
-        keys: [{
-          name: 'title',
-          weight: 0.7
-        }, {
-          name: 'path',
-          weight: 0.3
-        }]
-      })
-    },
-    // Filter out the routes that can be displayed in the sidebar
-    // And generate the internationalized title
-    generateRoutes(routes, basePath = '/', prefixTitle = []) {
-      let res = []
-
-      for (const router of routes) {
-        // skip hidden router
-        if (router.hidden) { continue }
-
-        const data = {
-          path: path.resolve(basePath, router.path),
-          title: [...prefixTitle]
-        }
-
-        if (router.meta && router.meta.title) {
-          // generate internationalized title
-          const i18ntitle = i18n.t(`route.${router.meta.title}`)
-
-          data.title = [...data.title, i18ntitle]
-
-          if (router.redirect !== 'noredirect') {
-            // only push the routes with title
-            // special case: need to exclude parent router without redirect
-            res.push(data)
-          }
-        }
-
-        // recursive child routes
-        if (router.children) {
-          const tempRoutes = this.generateRoutes(router.children, data.path, data.title)
-          if (tempRoutes.length >= 1) {
-            res = [...res, ...tempRoutes]
-          }
-        }
-      }
-      return res
-    },
-    querySearch(query) {
-      if (query !== '') {
-        this.options = this.fuse.search(query)
-      } else {
-        this.options = []
-      }
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.header-search {
-  font-size: 0 !important;
-
-  .search-icon {
-    cursor: pointer;
-    font-size: 18px;
-    vertical-align: middle;
-  }
-
-  .header-search-select {
-    font-size: 18px;
-    transition: width 0.2s;
-    width: 0;
-    overflow: hidden;
-    background: transparent;
-    border-radius: 0;
-    display: inline-block;
-    vertical-align: middle;
-
-    /deep/ .el-input__inner {
-      border-radius: 0;
-      border: 0;
-      padding-left: 0;
-      padding-right: 0;
-      box-shadow: none !important;
-      border-bottom: 1px solid #d9d9d9;
-      vertical-align: middle;
-    }
-  }
-
-  &.show {
-    .header-search-select {
-      width: 210px;
-      margin-left: 10px;
-    }
-  }
-}
-</style>

src/components/ImageCropper/lang.js

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

src/components/ImageCropper/upload.css

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

src/components/ImageCropper/utils.js

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

src/components/ImageCropper/utils/data2blob.js

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

src/components/ImageCropper/utils/effectRipple.js

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

src/components/ImageCropper/utils/language.js

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

src/components/ImageCropper/utils/mimes.js

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

src/components/JsonEditor/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="json-editor">
-    <textarea ref="textarea" />
+    <textarea ref="textarea"></textarea>
   </div>
 </template>
 
@@ -15,14 +15,13 @@ import 'codemirror/addon/lint/lint'
 import 'codemirror/addon/lint/json-lint'
 
 export default {
-  name: 'JsonEditor',
+  name: 'jsonEditor',
-  /* eslint-disable vue/require-prop-types */
-  props: ['value'],
   data() {
     return {
       jsonEditor: false
     }
   },
+  props: ['value'],
   watch: {
     value(value) {
       const editor_value = this.jsonEditor.getValue()

src/components/Kanban/index.vue

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

src/components/LangSelect/index.vue

@@ -1,18 +1,11 @@
 <template>
-  <el-dropdown trigger="click" class="international" @command="handleSetLanguage">
+  <el-dropdown trigger="click" class='international' @command="handleSetLanguage">
     <div>
-      <svg-icon class-name="international-icon" icon-class="language" />
+      <svg-icon class-name='international-icon' icon-class="language" />
     </div>
     <el-dropdown-menu slot="dropdown">
-      <el-dropdown-item :disabled="language==='zh'" command="zh">
+      <el-dropdown-item command="zh" :disabled="language==='zh'">中文</el-dropdown-item>
-        中文
+      <el-dropdown-item command="en" :disabled="language==='en'">English</el-dropdown-item>
-      </el-dropdown-item>
-      <el-dropdown-item :disabled="language==='en'" command="en">
-        English
-      </el-dropdown-item>
-      <el-dropdown-item :disabled="language==='es'" command="es">
-        Español
-      </el-dropdown-item>
     </el-dropdown-menu>
   </el-dropdown>
 </template>
@@ -29,10 +22,20 @@ export default {
       this.$i18n.locale = lang
       this.$store.dispatch('setLanguage', lang)
       this.$message({
-        message: 'Switch Language Success',
+        message: 'switch language success',
         type: 'success'
       })
     }
   }
 }
 </script>
+
+<style scoped>
+.international-icon {
+  font-size: 20px;
+  cursor: pointer;
+  vertical-align: -5px!important;
+}
+</style>
+
+

src/components/MDinput/index.vue

@@ -1,109 +1,28 @@
 <template>
-  <div :class="computedClasses" class="material-input__component">
+  <div class="material-input__component" :class="computedClasses">
     <div :class="{iconClass:icon}">
-      <i v-if="icon" :class="['el-icon-' + icon]" class="el-input__icon material-input__icon" />
+      <i class="el-input__icon material-input__icon" :class="['el-icon-' + icon]" v-if="icon"></i>
-      <input
+      <input v-if="type === 'email'" type="email" class="material-input" :name="name" :placeholder="fillPlaceHolder" v-model="currentValue"
-        v-if="type === 'email'"
+        :readonly="readonly" :disabled="disabled" :autoComplete="autoComplete" :required="required" @focus="handleMdFocus"
-        v-model="currentValue"
+        @blur="handleMdBlur" @input="handleModelInput">
-        :name="name"
+      <input v-if="type === 'url'" type="url" class="material-input" :name="name" :placeholder="fillPlaceHolder" v-model="currentValue"
-        :placeholder="fillPlaceHolder"
+        :readonly="readonly" :disabled="disabled" :autoComplete="autoComplete" :required="required" @focus="handleMdFocus"
-        :readonly="readonly"
+        @blur="handleMdBlur" @input="handleModelInput">
-        :disabled="disabled"
+      <input v-if="type === 'number'" type="number" class="material-input" :name="name" :placeholder="fillPlaceHolder" v-model="currentValue"
-        :autoComplete="autoComplete"
+        :step="step" :readonly="readonly" :disabled="disabled" :autoComplete="autoComplete" :max="max" :min="min" :minlength="minlength"
-        :required="required"
+        :maxlength="maxlength" :required="required" @focus="handleMdFocus" @blur="handleMdBlur" @input="handleModelInput">
-        type="email"
+      <input v-if="type === 'password'" type="password" class="material-input" :name="name" :placeholder="fillPlaceHolder" v-model="currentValue"
-        class="material-input"
+        :readonly="readonly" :disabled="disabled" :autoComplete="autoComplete" :max="max" :min="min" :required="required" @focus="handleMdFocus"
-        @focus="handleMdFocus"
+        @blur="handleMdBlur" @input="handleModelInput">
-        @blur="handleMdBlur"
+      <input v-if="type === 'tel'" type="tel" class="material-input" :name="name" :placeholder="fillPlaceHolder" v-model="currentValue"
-        @input="handleModelInput"
+        :readonly="readonly" :disabled="disabled" :autoComplete="autoComplete" :required="required" @focus="handleMdFocus"
-      >
+        @blur="handleMdBlur" @input="handleModelInput">
-      <input
+      <input v-if="type === 'text'" type="text" class="material-input" :name="name" :placeholder="fillPlaceHolder" v-model="currentValue"
-        v-if="type === 'url'"
+        :readonly="readonly" :disabled="disabled" :autoComplete="autoComplete" :minlength="minlength" :maxlength="maxlength"
-        v-model="currentValue"
+        :required="required" @focus="handleMdFocus" @blur="handleMdBlur" @input="handleModelInput">
-        :name="name"
+      <span class="material-input-bar"></span>
-        :placeholder="fillPlaceHolder"
-        :readonly="readonly"
-        :disabled="disabled"
-        :autoComplete="autoComplete"
-        :required="required"
-        type="url"
-        class="material-input"
-        @focus="handleMdFocus"
-        @blur="handleMdBlur"
-        @input="handleModelInput"
-      >
-      <input
-        v-if="type === 'number'"
-        v-model="currentValue"
-        :name="name"
-        :placeholder="fillPlaceHolder"
-        :step="step"
-        :readonly="readonly"
-        :disabled="disabled"
-        :autoComplete="autoComplete"
-        :max="max"
-        :min="min"
-        :minlength="minlength"
-        :maxlength="maxlength"
-        :required="required"
-        type="number"
-        class="material-input"
-        @focus="handleMdFocus"
-        @blur="handleMdBlur"
-        @input="handleModelInput"
-      >
-      <input
-        v-if="type === 'password'"
-        v-model="currentValue"
-        :name="name"
-        :placeholder="fillPlaceHolder"
-        :readonly="readonly"
-        :disabled="disabled"
-        :autoComplete="autoComplete"
-        :max="max"
-        :min="min"
-        :required="required"
-        type="password"
-        class="material-input"
-        @focus="handleMdFocus"
-        @blur="handleMdBlur"
-        @input="handleModelInput"
-      >
-      <input
-        v-if="type === 'tel'"
-        v-model="currentValue"
-        :name="name"
-        :placeholder="fillPlaceHolder"
-        :readonly="readonly"
-        :disabled="disabled"
-        :autoComplete="autoComplete"
-        :required="required"
-        type="tel"
-        class="material-input"
-        @focus="handleMdFocus"
-        @blur="handleMdBlur"
-        @input="handleModelInput"
-      >
-      <input
-        v-if="type === 'text'"
-        v-model="currentValue"
-        :name="name"
-        :placeholder="fillPlaceHolder"
-        :readonly="readonly"
-        :disabled="disabled"
-        :autoComplete="autoComplete"
-        :minlength="minlength"
-        :maxlength="maxlength"
-        :required="required"
-        type="text"
-        class="material-input"
-        @focus="handleMdFocus"
-        @blur="handleMdBlur"
-        @input="handleModelInput"
-      >
-      <span class="material-input-bar" />
       <label class="material-label">
-        <slot />
+        <slot></slot>
       </label>
     </div>
   </div>
@@ -113,9 +32,8 @@
 // source:https://github.com/wemake-services/vue-material-input/blob/master/src/components/MaterialInput.vue
 
 export default {
-  name: 'MdInput',
+  name: 'md-input',
   props: {
-    /* eslint-disable */
     icon: String,
     name: String,
     type: {
@@ -144,13 +62,6 @@ export default {
       default: true
     }
   },
-  data() {
-    return {
-      currentValue: this.value,
-      focus: false,
-      fillPlaceHolder: null
-    }
-  },
   computed: {
     computedClasses() {
       return {
@@ -165,6 +76,13 @@ export default {
       this.currentValue = newValue
     }
   },
+  data() {
+    return {
+      currentValue: this.value,
+      focus: false,
+      fillPlaceHolder: null
+    }
+  },
   methods: {
     handleModelInput(event) {
       const value = event.target.value

src/components/MarkdownEditor/defaultOptions.js

@@ -1,31 +0,0 @@
-// doc: https://nhnent.github.io/tui.editor/api/latest/ToastUIEditor.html#ToastUIEditor
-export default {
-  minHeight: '200px',
-  previewStyle: 'vertical',
-  useCommandShortcut: true,
-  useDefaultHTMLSanitizer: true,
-  usageStatistics: false,
-  hideModeSwitch: false,
-  toolbarItems: [
-    'heading',
-    'bold',
-    'italic',
-    'strike',
-    'divider',
-    'hr',
-    'quote',
-    'divider',
-    'ul',
-    'ol',
-    'task',
-    'indent',
-    'outdent',
-    'divider',
-    'table',
-    'image',
-    'link',
-    'divider',
-    'code',
-    'codeblock'
-  ]
-}

src/components/MarkdownEditor/index.vue

@@ -1,118 +1,119 @@
 <template>
-  <div :id="id" />
+  <div class="simplemde-container" :style="{height:height+'px',zIndex:zIndex}">
+    <textarea :id="id">
+    </textarea>
+  </div>
 </template>
 
 <script>
-// deps for editor
+import 'font-awesome/css/font-awesome.min.css'
-import 'codemirror/lib/codemirror.css' // codemirror
+import 'simplemde/dist/simplemde.min.css'
-import 'tui-editor/dist/tui-editor.css' // editor ui
+import SimpleMDE from 'simplemde'
-import 'tui-editor/dist/tui-editor-contents.css' // editor content
-
-import Editor from 'tui-editor'
-import defaultOptions from './defaultOptions'
 
 export default {
-  name: 'MarddownEditor',
+  name: 'simplemde-md',
   props: {
-    value: {
+    value: String,
+    id: {
+      type: String
+    },
+    autofocus: {
+      type: Boolean,
+      default: false
+    },
+    placeholder: {
       type: String,
       default: ''
     },
-    id: {
-      type: String,
-      required: false,
-      default() {
-        return 'markdown-editor-' + +new Date() + ((Math.random() * 1000).toFixed(0) + '')
-      }
-    },
-    options: {
-      type: Object,
-      default() {
-        return defaultOptions
-      }
-    },
-    mode: {
-      type: String,
-      default: 'markdown'
-    },
     height: {
-      type: String,
+      type: Number,
-      required: false,
+      default: 150
-      default: '300px'
     },
-    language: {
+    zIndex: {
-      type: String,
+      type: Number,
-      required: false,
+      default: 10
-      default: 'en_US' // https://github.com/nhnent/tui.editor/tree/master/src/js/langs
+    },
+    toolbar: {
+      type: Array
     }
   },
   data() {
     return {
-      editor: null
+      simplemde: null,
-    }
+      hasChange: false
-  },
-  computed: {
-    editorOptions() {
-      const options = Object.assign({}, defaultOptions, this.options)
-      options.initialEditType = this.mode
-      options.height = this.height
-      options.language = this.language
-      return options
     }
   },
   watch: {
-    value(newValue, preValue) {
+    value(val) {
-      if (newValue !== preValue && newValue !== this.editor.getValue()) {
+      if (val === this.simplemde.value() && !this.hasChange) return
-        this.editor.setValue(newValue)
+      this.simplemde.value(val)
-      }
-    },
-    language(val) {
-      this.destroyEditor()
-      this.initEditor()
-    },
-    height(newValue) {
-      this.editor.height(newValue)
-    },
-    mode(newValue) {
-      this.editor.changeMode(newValue)
     }
   },
   mounted() {
-    this.initEditor()
+    this.simplemde = new SimpleMDE({
+      element: document.getElementById(this.id || 'markdown-editor-' + +new Date()),
+      autoDownloadFontAwesome: false,
+      autofocus: this.autofocus,
+      toolbar: this.toolbar,
+      spellChecker: false,
+      insertTexts: {
+        link: ['[', ']( )']
+      },
+      // hideIcons: ['guide', 'heading', 'quote', 'image', 'preview', 'side-by-side', 'fullscreen'],
+      placeholder: this.placeholder
+    })
+    if (this.value) {
+      this.simplemde.value(this.value)
+    }
+    this.simplemde.codemirror.on('change', () => {
+      if (this.hasChange) {
+        this.hasChange = true
+      }
+      this.$emit('input', this.simplemde.value())
+    })
   },
   destroyed() {
-    this.destroyEditor()
+    this.simplemde = null
-  },
-  methods: {
-    initEditor() {
-      this.editor = new Editor({
-        el: document.getElementById(this.id),
-        ...this.editorOptions
-      })
-      if (this.value) {
-        this.editor.setValue(this.value)
-      }
-      this.editor.on('change', () => {
-        this.$emit('input', this.editor.getValue())
-      })
-    },
-    destroyEditor() {
-      if (!this.editor) return
-      this.editor.off('change')
-      this.editor.remove()
-    },
-    setValue(value) {
-      this.editor.setValue(value)
-    },
-    getValue() {
-      return this.editor.getValue()
-    },
-    setHtml(value) {
-      this.editor.setHtml(value)
-    },
-    getHtml() {
-      return this.editor.getHtml()
-    }
   }
 }
 </script>
+
+<style>
+.simplemde-container .CodeMirror {
+  min-height: 150px;
+}
+
+.simplemde-container .CodeMirror-scroll {
+  min-height: 150px;
+}
+
+.simplemde-container .CodeMirror-code {
+  padding-bottom: 40px;
+}
+
+.simplemde-container .editor-statusbar {
+  display: none;
+}
+
+.simplemde-container .CodeMirror .CodeMirror-code .cm-link {
+  color: #1482F0;
+}
+
+.simplemde-container .CodeMirror .CodeMirror-code .cm-string.cm-url {
+  color: #2d3b4d;
+  font-weight: bold;
+}
+
+.simplemde-container .CodeMirror .CodeMirror-code .cm-formatting-link-string.cm-url {
+  padding: 0 2px;
+  font-weight: bold;
+  color: #E61E1E;
+}
+
+.simplemde-container .editor-toolbar.fullscreen,
+.simplemde-container .CodeMirror-fullscreen {
+  z-index: 1003;
+}
+</style>
+
+

src/components/Pagination/index.vue

@@ -1,101 +0,0 @@
-<template>
-  <div :class="{'hidden':hidden}" class="pagination-container">
-    <el-pagination
-      :background="background"
-      :current-page.sync="currentPage"
-      :page-size.sync="pageSize"
-      :layout="layout"
-      :page-sizes="pageSizes"
-      :total="total"
-      v-bind="$attrs"
-      @size-change="handleSizeChange"
-      @current-change="handleCurrentChange"
-    />
-  </div>
-</template>
-
-<script>
-import { scrollTo } from '@/utils/scrollTo'
-
-export default {
-  name: 'Pagination',
-  props: {
-    total: {
-      required: true,
-      type: Number
-    },
-    page: {
-      type: Number,
-      default: 1
-    },
-    limit: {
-      type: Number,
-      default: 20
-    },
-    pageSizes: {
-      type: Array,
-      default() {
-        return [10, 20, 30, 50]
-      }
-    },
-    layout: {
-      type: String,
-      default: 'total, sizes, prev, pager, next, jumper'
-    },
-    background: {
-      type: Boolean,
-      default: true
-    },
-    autoScroll: {
-      type: Boolean,
-      default: true
-    },
-    hidden: {
-      type: Boolean,
-      default: false
-    }
-  },
-  computed: {
-    currentPage: {
-      get() {
-        return this.page
-      },
-      set(val) {
-        this.$emit('update:page', val)
-      }
-    },
-    pageSize: {
-      get() {
-        return this.limit
-      },
-      set(val) {
-        this.$emit('update:limit', val)
-      }
-    }
-  },
-  methods: {
-    handleSizeChange(val) {
-      this.$emit('pagination', { page: this.currentPage, limit: val })
-      if (this.autoScroll) {
-        scrollTo(0, 800)
-      }
-    },
-    handleCurrentChange(val) {
-      this.$emit('pagination', { page: val, limit: this.pageSize })
-      if (this.autoScroll) {
-        scrollTo(0, 800)
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-.pagination-container {
-  background: #fff;
-  padding: 32px 16px;
-}
-.pagination-container.hidden {
-  display: none;
-}
-</style>

src/components/PanThumb/index.vue

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

src/components/Screenfull/index.vue

@@ -1,6 +1,16 @@
 <template>
   <div>
-    <svg-icon :icon-class="isFullscreen?'exit-fullscreen':'fullscreen'" @click="click" />
+    <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>
 
@@ -8,15 +18,26 @@
 import screenfull from 'screenfull'
 
 export default {
-  name: 'Screenfull',
+  name: 'screenfull',
+  props: {
+    width: {
+      type: Number,
+      default: 22
+    },
+    height: {
+      type: Number,
+      default: 22
+    },
+    fill: {
+      type: String,
+      default: '#48576a'
+    }
+  },
   data() {
     return {
       isFullscreen: false
     }
   },
-  mounted() {
-    this.init()
-  },
   methods: {
     click() {
       if (!screenfull.enabled) {
@@ -27,13 +48,6 @@ export default {
         return false
       }
       screenfull.toggle()
-    },
-    init() {
-      if (screenfull.enabled) {
-        screenfull.on('change', () => {
-          this.isFullscreen = screenfull.isFullscreen
-        })
-      }
     }
   }
 }

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

@@ -1,10 +1,10 @@
 <template>
-  <div :class="{active:isActive}" class="share-dropdown-menu">
+  <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>
+      <span class="share-dropdown-menu-title" @click.self="clickTitle">{{title}}</span>
-      <div v-for="(item,index) of items" :key="index" class="share-dropdown-menu-item">
+      <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>
+        <a v-if="item.href" :href="item.href" target="_blank">{{item.title}}</a>
-        <span v-else>{{ item.title }}</span>
+        <span v-else>{{item.title}}</span>
       </div>
     </div>
   </div>
@@ -14,10 +14,7 @@
 export default {
   props: {
     items: {
-      type: Array,
+      type: Array
-      default: function() {
-        return []
-      }
     },
     title: {
       type: String,
@@ -38,7 +35,7 @@ export default {
 </script>
 
 <style rel="stylesheet/scss" lang="scss" >
-$n: 8; //和items.length 相同
+$n: 6; //和items.length 相同
 $t: .1s;
 .share-dropdown-menu {
   width: 250px;

src/components/SizeSelect/index.vue

@@ -1,56 +0,0 @@
-<template>
-  <el-dropdown trigger="click" @command="handleSetSize">
-    <div>
-      <svg-icon class-name="size-icon" icon-class="size" />
-    </div>
-    <el-dropdown-menu slot="dropdown">
-      <el-dropdown-item v-for="item of sizeOptions" :key="item.value" :disabled="size===item.value" :command="item.value">
-        {{ item.label }}
-      </el-dropdown-item>
-    </el-dropdown-menu>
-  </el-dropdown>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      sizeOptions: [
-        { label: 'Default', value: 'default' },
-        { label: 'Medium', value: 'medium' },
-        { label: 'Small', value: 'small' },
-        { label: 'Mini', value: 'mini' }
-      ]
-    }
-  },
-  computed: {
-    size() {
-      return this.$store.getters.size
-    }
-  },
-  methods: {
-    handleSetSize(size) {
-      this.$ELEMENT.size = size
-      this.$store.dispatch('setSize', size)
-      this.refreshView()
-      this.$message({
-        message: 'Switch Size Success',
-        type: 'success'
-      })
-    },
-    refreshView() {
-      // In order to make the cached page re-rendered
-      this.$store.dispatch('delAllCachedViews', this.$route)
-
-      const { fullPath } = this.$route
-
-      this.$nextTick(() => {
-        this.$router.replace({
-          path: '/redirect' + fullPath
-        })
-      })
-    }
-  }
-
-}
-</script>

src/components/Sticky/index.vue

@@ -1,9 +1,6 @@
 <template>
   <div :style="{height:height+'px',zIndex:zIndex}">
-    <div
+    <div :class="className" :style="{top:stickyTop+'px',zIndex:zIndex,position:position,width:width,height:height+'px'}">
-      :class="className"
-      :style="{top:(isSticky ? stickyTop +'px' : ''),zIndex:zIndex,position:position,width:width,height:height+'px'}"
-    >
       <slot>
         <div>sticky</div>
       </slot>
@@ -24,30 +21,29 @@ export default {
       default: 1
     },
     className: {
-      type: String,
+      type: String
-      default: ''
     }
   },
   data() {
     return {
       active: false,
       position: '',
+      currentTop: '',
       width: undefined,
       height: undefined,
-      isSticky: false
+      child: null,
+      stickyHeight: 0
     }
   },
   mounted() {
     this.height = this.$el.getBoundingClientRect().height
     window.addEventListener('scroll', this.handleScroll)
-    window.addEventListener('resize', this.handleReize)
   },
   activated() {
     this.handleScroll()
   },
   destroyed() {
     window.removeEventListener('scroll', this.handleScroll)
-    window.removeEventListener('resize', this.handleReize)
   },
   methods: {
     sticky() {
@@ -57,34 +53,23 @@ export default {
       this.position = 'fixed'
       this.active = true
       this.width = this.width + 'px'
-      this.isSticky = true
     },
-    handleReset() {
+    reset() {
       if (!this.active) {
         return
       }
-      this.reset()
-    },
-    reset() {
       this.position = ''
       this.width = 'auto'
       this.active = false
-      this.isSticky = false
     },
     handleScroll() {
-      const width = this.$el.getBoundingClientRect().width
+      this.width = this.$el.getBoundingClientRect().width
-      this.width = width || 'auto'
       const offsetTop = this.$el.getBoundingClientRect().top
-      if (offsetTop < this.stickyTop) {
+      if (offsetTop <= this.stickyTop) {
         this.sticky()
         return
       }
-      this.handleReset()
+      this.reset()
-    },
-    handleReize() {
-      if (this.isSticky) {
-        this.width = this.$el.getBoundingClientRect().width + 'px'
-      }
     }
   }
 }

src/components/SvgIcon/index.vue

@@ -1,20 +1,19 @@
 <template>
-  <svg :class="svgClass" aria-hidden="true" v-on="$listeners">
+  <svg :class="svgClass" aria-hidden="true">
-    <use :xlink:href="iconName" />
+    <use :xlink:href="iconName"></use>
   </svg>
 </template>
 
 <script>
 export default {
-  name: 'SvgIcon',
+  name: 'svg-icon',
   props: {
     iconClass: {
       type: String,
       required: true
     },
     className: {
-      type: String,
+      type: String
-      default: ''
     }
   },
   computed: {

src/components/TextHoverEffect/Mallki.vue

@@ -1,8 +1,8 @@
 <template>
-  <a :class="className" class="link--mallki" href="#">
+  <a class="link--mallki" :class="className" href="#">
-    {{ text }}
+    {{text}}
-    <span :data-letters="text" />
+    <span :data-letters="text"></span>
-    <span :data-letters="text" />
+    <span :data-letters="text"></span>
   </a>
 </template>
 
@@ -10,8 +10,7 @@
 export default {
   props: {
     className: {
-      type: String,
+      type: String
-      default: ''
     },
     text: {
       type: String,
@@ -21,9 +20,9 @@ export default {
 }
 </script>
 
+
 <style>
 /* Mallki */
-
 .link--mallki {
   font-weight: 800;
   color: #4dd9d5;
@@ -32,10 +31,10 @@ export default {
   transition: color 0.5s 0.25s;
   overflow: hidden;
   position: relative;
-  display: inline-block;
+display: inline-block;
-  line-height: 1;
+    line-height: 1;
-  outline: none;
+        outline: none;
-  text-decoration: none;
+    text-decoration: none;
 }
 
 .link--mallki:hover {
@@ -110,4 +109,5 @@ export default {
   -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

@@ -1,10 +1,8 @@
 <template>
   <el-color-picker
-    v-model="theme"
-    :predefine="['#409EFF', '#11a983', '#13c2c2', '#6959CD', '#f5222d', '#eb2f96', '#DB7093', '#e6a23c', '#8B8989', '#212121']"
     class="theme-picker"
     popper-class="theme-picker-dropdown"
-  />
+    v-model="theme"></el-color-picker>
 </template>
 
 <script>
@@ -20,8 +18,7 @@ export default {
     }
   },
   watch: {
-    theme(val) {
+    theme(val, oldVal) {
-      const oldVal = this.theme
       if (typeof val !== 'string') return
       const themeCluster = this.getThemeCluster(val.replace('#', ''))
       const originalCluster = this.getThemeCluster(oldVal.replace('#', ''))
@@ -69,18 +66,11 @@ export default {
 
   methods: {
     updateStyle(style, oldCluster, newCluster) {
-      const colorOverrides = [] // only capture color overides
+      let newStyle = style
       oldCluster.forEach((color, index) => {
-        const value = newCluster[index]
+        newStyle = newStyle.replace(new RegExp(color, 'ig'), newCluster[index])
-        const color_plain = color.replace(/([()])/g, '\\$1')
-        const repl = new RegExp(`(^|})([^{]+{[^{}]+)${color_plain}\\b([^}]*)(?=})`, 'gi')
-        const nestRepl = new RegExp(color_plain, 'ig') // for greed matching before the 'color'
-        let v
-        while ((v = repl.exec(style))) {
-          colorOverrides.push(v[2].replace(nestRepl, value) + value + v[3] + '}') // '}' not captured in the regexp repl to reserve it as locator-boundary
-        }
       })
-      return colorOverrides.join('')
+      return newStyle
     },
 
     getCSSString(url, callback, variable) {
@@ -145,10 +135,7 @@ export default {
 
 <style>
 .theme-picker .el-color-picker__trigger {
-  margin-top: 12px;
+  vertical-align: middle;
-  height: 26px!important;
-  width: 26px!important;
-  padding: 2px;
 }
 
 .theme-picker-dropdown .el-color-dropdown__link-btn {

src/components/Tinymce/components/editorImage.vue

@@ -1,20 +1,10 @@
 <template>
   <div class="upload-container">
-    <el-button :style="{background:color,borderColor:color}" icon="el-icon-upload" size="mini" type="primary" @click=" dialogVisible=true">
+    <el-button icon='upload' :style="{background:color,borderColor:color}" @click=" dialogVisible=true" type="primary">上传图片
-      上传图片
     </el-button>
     <el-dialog :visible.sync="dialogVisible">
-      <el-upload
+      <el-upload class="editor-slide-upload" action="https://httpbin.org/post" :multiple="true" :file-list="fileList" :show-file-list="true"
-        :multiple="true"
+        list-type="picture-card" :on-remove="handleRemove" :on-success="handleSuccess" :before-upload="beforeUpload">
-        :file-list="fileList"
-        :show-file-list="true"
-        :on-remove="handleRemove"
-        :on-success="handleSuccess"
-        :before-upload="beforeUpload"
-        class="editor-slide-upload"
-        action="https://httpbin.org/post"
-        list-type="picture-card"
-      >
         <el-button size="small" type="primary">点击上传</el-button>
       </el-upload>
       <el-button @click="dialogVisible = false">取 消</el-button>
@@ -27,11 +17,11 @@
 // import { getToken } from 'api/qiniu'
 
 export default {
-  name: 'EditorSlideUpload',
+  name: 'editorSlideUpload',
   props: {
     color: {
       type: String,
-      default: '#1890ff'
+      default: '#20a0ff'
     }
   },
   data() {
@@ -51,6 +41,7 @@ export default {
         this.$message('请等待所有图片上传成功 或 出现了网络问题，请刷新页面重新上传！')
         return
       }
+      console.log(arr)
       this.$emit('successCBK', arr)
       this.listObj = {}
       this.fileList = []
@@ -96,10 +87,9 @@ export default {
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-.editor-slide-upload {
+    .upload-container {
-  margin-bottom: 20px;
+        .editor-slide-upload {
-  /deep/ .el-upload--picture-card {
+            margin-bottom: 20px;
-    width: 100%;
+        }
-  }
+    }
-}
 </style>

src/components/Tinymce/index.vue

@@ -1,26 +1,21 @@
 <template>
-  <div :class="{fullscreen:fullscreen}" class="tinymce-container editor-container">
+  <div class="tinymce-container editor-container">
-    <textarea :id="tinymceId" class="tinymce-textarea" />
+    <textarea class="tinymce-textarea" :id="tinymceId"></textarea>
     <div class="editor-custom-btn-container">
-      <editorImage color="#1890ff" class="editor-upload-btn" @successCBK="imageSuccessCBK" />
+     <editorImage  color="#20a0ff" class="editor-upload-btn" @successCBK="imageSuccessCBK"></editorImage>
-    </div>
+      </div>
   </div>
 </template>
 
 <script>
 import editorImage from './components/editorImage'
-import plugins from './plugins'
-import toolbar from './toolbar'
 
 export default {
-  name: 'Tinymce',
+  name: 'tinymce',
   components: { editorImage },
   props: {
     id: {
-      type: String,
+      type: String
-      default: function() {
-        return 'vue-tinymce-' + +new Date() + ((Math.random() * 1000).toFixed(0) + '')
-      }
     },
     value: {
       type: String,
@@ -30,12 +25,11 @@ export default {
       type: Array,
       required: false,
       default() {
-        return []
+        return ['removeformat undo redo |  bullist numlist | outdent indent | forecolor | fullscreen code', 'bold italic blockquote | h2 p  media link | alignleft aligncenter alignright']
       }
     },
     menubar: {
-      type: String,
+      default: ''
-      default: 'file edit insert view format table'
     },
     height: {
       type: Number,
@@ -47,29 +41,14 @@ export default {
     return {
       hasChange: false,
       hasInit: false,
-      tinymceId: this.id,
+      tinymceId: this.id || 'vue-tinymce-' + +new Date()
-      fullscreen: false,
-      languageTypeList: {
-        'en': 'en',
-        'zh': 'zh_CN'
-      }
-    }
-  },
-  computed: {
-    language() {
-      return this.languageTypeList[this.$store.getters.language]
     }
   },
   watch: {
     value(val) {
       if (!this.hasChange && this.hasInit) {
-        this.$nextTick(() =>
+        this.$nextTick(() => window.tinymce.get(this.tinymceId).setContent(val))
-          window.tinymce.get(this.tinymceId).setContent(val || ''))
       }
-    },
-    language() {
-      this.destroyTinymce()
-      this.$nextTick(() => this.initTinymce())
     }
   },
   mounted() {
@@ -81,44 +60,35 @@ export default {
   deactivated() {
     this.destroyTinymce()
   },
-  destroyed() {
-    this.destroyTinymce()
-  },
   methods: {
     initTinymce() {
       const _this = this
       window.tinymce.init({
-        language: this.language,
         selector: `#${this.tinymceId}`,
         height: this.height,
         body_class: 'panel-body ',
         object_resizing: false,
-        toolbar: this.toolbar.length > 0 ? this.toolbar : toolbar,
+        toolbar: this.toolbar,
         menubar: this.menubar,
-        plugins: plugins,
+        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: ['www.tinymce.com', 'codepen.io'],
+        imagetools_cors_hosts: ['wpimg.wallstcn.com', 'wallstreetcn.com'],
+        imagetools_toolbar: 'watermark',
         default_link_target: '_blank',
         link_title: false,
-        nonbreaking_force_tab: true, // inserting nonbreaking space &nbsp; need Nonbreaking Space Plugin
         init_instance_callback: editor => {
           if (_this.value) {
             editor.setContent(_this.value)
           }
           _this.hasInit = true
-          editor.on('NodeChange Change KeyUp SetContent', () => {
+          editor.on('NodeChange Change KeyUp', () => {
             this.hasChange = true
-            this.$emit('input', editor.getContent())
+            this.$emit('input', editor.getContent({ format: 'raw' }))
-          })
-        },
-        setup(editor) {
-          editor.on('FullscreenStateChanged', (e) => {
-            _this.fullscreen = e.state
           })
         }
         // 整合七牛上传
@@ -157,13 +127,8 @@ export default {
       })
     },
     destroyTinymce() {
-      const tinymce = window.tinymce.get(this.tinymceId)
+      if (window.tinymce.get(this.tinymceId)) {
-      if (this.fullscreen) {
+        window.tinymce.get(this.tinymceId).destroy()
-        tinymce.execCommand('mceFullScreen')
-      }
-
-      if (tinymce) {
-        tinymce.destroy()
       }
     },
     setContent(value) {
@@ -178,17 +143,16 @@ export default {
         window.tinymce.get(_this.tinymceId).insertContent(`<img class="wscnph" src="${v.url}" >`)
       })
     }
+  },
+  destroyed() {
+    this.destroyTinymce()
   }
 }
 </script>
 
 <style scoped>
 .tinymce-container {
-  position: relative;
+  position: relative
-  line-height: normal;
-}
-.tinymce-container>>>.mce-fullscreen {
-  z-index: 10000;
 }
 .tinymce-textarea {
   visibility: hidden;
@@ -196,13 +160,9 @@ export default {
 }
 .editor-custom-btn-container {
   position: absolute;
-  right: 4px;
+  right: 15px;
-  top: 4px;
   /*z-index: 2005;*/
-}
+  top: 18px;
-.fullscreen .editor-custom-btn-container {
-  z-index: 10000;
-  position: fixed;
 }
 .editor-upload-btn {
   display: inline-block;

src/components/Tinymce/plugins.js

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

src/components/Tinymce/toolbar.js

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

src/components/TreeTable/README.md

@@ -1,220 +0,0 @@
-
-- [Enlgish](#Brief)
-
-# 中文
-
-## 写在前面
-
-此组件仅提供一个创建 `TreeTable` 的解决思路。它基于`element-ui`的 table 组件实现，通过`el-table`的`row-style`方法，在里面判断元素是否需要隐藏或者显示，从而实现`TreeTable`的展开与收起。
-
-并且本组件充分利用 `vue` 插槽的特性来方便用户自定义。
-
-`evel.js` 里面，`addAttrs` 方法会给数据添加几个属性，`treeTotable` 会对数组扁平化。这些操作都不会破坏源数据，只是会新增属性。
-
-## Props 说明
-
-|    Attribute     | Description                        |  Type   | Default  |
-| :--------------: | :--------------------------------- | :-----: | :------: |
-|       data       | 原始展示数据                       |  Array  |    []    |
-|     columns      | 列属性                             |  Array  |    []    |
-| defaultExpandAll | 默认是否全部展开                   | Boolean |  false   |
-| defaultChildren  | 指定子树为节点对象的某个属性值     | String  | children |  |
-|      indent      | 相邻级节点间的水平缩进，单位为像素 | Number  |    50    |
-
-> 任何 `el-table` 的属性都支持，例如`border`、`fit`、`size`或者`@select`、`@cell-click`等方法。详情属性见`el-table`文档。
-
----
-
-### 代码示例
-
-```html
-<tree-table :data="data" :columns="columns" border>
-```
-
-#### data(**必填**)
-
-```js
-const data = [
-  {
-    name:'1'
-    children: [
-      {
-        name: '1-1'
-      },
-      {
-        name: '1-2'
-      }
-    ]
-  },
-  {
-    name: `2`
-  }
-]
-```
-
-#### columns(**必填**)
-
-- label: 显示在表头的文字
-- key: 对应 data 的 key。treeTable 将显示相应的 value
-- expand: `true` or `false`。若为 true，则在该列显示展开收起图标
-- checkbox: `true` or `false`。若为 true，则在该列显示`checkbox`
-- width: 每列的宽度，为一个数字(可选)。例如`200`
-- align: 对齐方式 `left/center/right`
-- header-align: 表头对齐方式 `left/center/right`
-
-```javascript
-const columns = [
-  {
-    label: 'Checkbox',
-    checkbox: true
-  },
-  {
-    label: '',
-    key: 'id',
-    expand: true
-  },
-  {
-    label: 'Event',
-    key: 'event',
-    width: 200,
-    align: 'left'
-  },
-  {
-    label: 'Scope',
-    key: 'scope'
-  }
-]
-```
-
-> 树表组件将会根据 columns 的 key 属性生成具名插槽，如果你需要对列数据进行自定义，通过插槽即可实现
-
-```html
-<template slot="your key" slot-scope="{scope}">
-  <el-tag>level: {{ scope.row._level }}</el-tag>
-  <el-tag>expand: {{ scope.row._expand }}</el-tag>
-  <el-tag>select: {{ scope.row._select }}</el-tag>
-</template>
-```
-
-## Events
-
-目前提供了几个方法，不过只是`beta`版本，之后很可能会修改。
-
-```js
-this.$refs.TreeTable.addChild(row, data) //添加子元素
-this.$refs.TreeTable.addBrother(row, data) //添加兄弟元素
-this.$refs.TreeTable.delete(row) //删除该元素
-```
-
-## 其他
-
-如果有其他的需求，请参考[el-table](http://element-cn.eleme.io/#/en-US/component/table)的 api 自行修改 index.vue
-
-# English
-
-## Brief
-
-This component only provides a solution for creating `TreeTable`. It is based on the `element-ui` table component. It uses the `row-style` method of `el-table` to determine whether the element needs to be hidden or displayed.
-
-And this component makes full use of the features of the `vue` slot to make it user-friendly.
-
-In `evel.js`, the `addAttrs` method adds several properties to the data, and `treeTotable` flattens the array. None of these operations will destroy the source data, just add properties.
-
-## Props
-
-|    Attribute     | Description                                                  |  Type   | Default  |
-| :--------------: | :----------------------------------------------------------- | :-----: | :------: |
-|       data       | original display data                                        |  Array  |    []    |
-|     columns      | column attribute                                             |  Array  |    []    |
-| defaultExpandAll | whether to expand all nodes by default                       | Boolean |  false   |
-| defaultChildren  | specify which node object is used as the node's subtree      | String  | children |  |
-|      indent      | horizontal indentation of nodes in adjacent levels in pixels | Number  |    50    |
-
-> Any of the `el-table` properties are supported, such as `border`, `fit`, `size` or `@select`, `@cell-click`. See the ʻel-table` documentation for details.
-
----
-
-### Example
-
-```html
-<tree-table :data="data" :columns="columns" border>
-```
-
-#### data(**Required**)
-
-```js
-const data = [
-  {
-    name:'1'
-    children: [
-      {
-        name: '1-1'
-      },
-      {
-        name: '1-2'
-      }
-    ]
-  },
-  {
-    name: `2`
-  }
-]
-```
-
-#### columns(**Required**)
-
-- label: text displayed in the header
-- key: data.key will show in column
-- expand: `true` or `false`
-- checkbox: `true` or `false`
-- width: column width 。such as `200`
-- align: alignment `left/center/right`
-- header-align: alignment of the table header `left/center/right`
-
-```javascript
-const columns = [
-  {
-    label: 'Checkbox',
-    checkbox: true
-  },
-  {
-    label: '',
-    key: 'id',
-    expand: true
-  },
-  {
-    label: 'Event',
-    key: 'event',
-    width: 200,
-    align: 'left'
-  },
-  {
-    label: 'Scope',
-    key: 'scope'
-  }
-]
-```
-
-> The tree table component will generate a named slot based on the key property of columns. If you need to customize the column data, you can do it through the slot.
-
-```html
-<template slot="your key" slot-scope="{scope}">
-  <el-tag>level: {{ scope.row._level }}</el-tag>
-  <el-tag>expand: {{ scope.row._expand }}</el-tag>
-  <el-tag>select: {{ scope.row._select }}</el-tag>
-</template>
-```
-
-## Events
-
-Several methods are currently available, but only the `beta` version, which is likely to be modified later.
-
-```js
-this.$refs.TreeTable.addChild(row, data) //Add child elements
-this.$refs.TreeTable.addBrother(row, data) //Add a sibling element
-this.$refs.TreeTable.delete(row) //Delete the element
-```
-
-## Other
-
-If you have other requirements, please refer to the [el-table](http://element-cn.eleme.io/#/en-US/component/table) api to modify the index.vue

src/components/TreeTable/eval.js

@@ -1,48 +1,29 @@
+/**
+* @Author: jianglei
+* @Date:   2017-10-12 12:06:49
+*/
+'use strict'
 import Vue from 'vue'
-
+export default function treeToArray(data, expandedAll, parent = null, level = null) {
-// Flattened array
-export default function treeToArray(data, children = 'children') {
   let tmp = []
-  data.forEach((item, index) => {
+  Array.from(data).forEach(function(record) {
-    Vue.set(item, '_index', index)
+    if (record._expanded === undefined) {
-    tmp.push(item)
+      Vue.set(record, '_expanded', expandedAll)
-    if (item[children] && item[children].length > 0) {
+    }
-      const res = treeToArray(item[children], children)
+    let _level = 1
-      tmp = tmp.concat(res)
+    if (level !== undefined && level !== null) {
+      _level = level + 1
+    }
+    Vue.set(record, '_level', _level)
+    // 如果有父元素
+    if (parent) {
+      Vue.set(record, 'parent', parent)
+    }
+    tmp.push(record)
+    if (record.children && record.children.length > 0) {
+      const children = treeToArray(record.children, expandedAll, record, _level)
+      tmp = tmp.concat(children)
     }
   })
   return tmp
 }
-
-export function addAttrs(data, { parent = null, preIndex = false, level = 0, expand = false, children = 'children', show = true, select = false } = {}) {
-  data.forEach((item, index) => {
-    const _id = (preIndex ? `${preIndex}-${index}` : index) + ''
-    Vue.set(item, '_id', _id)
-    Vue.set(item, '_level', level)
-    Vue.set(item, '_expand', expand)
-    Vue.set(item, '_parent', parent)
-    Vue.set(item, '_show', show)
-    Vue.set(item, '_select', select)
-    if (item[children] && item[children].length > 0) {
-      addAttrs(item[children], {
-        parent: item,
-        level: level + 1,
-        expand,
-        preIndex: _id,
-        children,
-        status,
-        select
-      })
-    }
-  })
-}
-
-export function cleanParentAttr(data, children = 'children') {
-  data.forEach(item => {
-    item._parent = null
-    if (item[children] && item[children].length > 0) {
-      addAttrs(item[children], children)
-    }
-  })
-  return data
-}

src/components/TreeTable/index.vue

@@ -1,193 +1,114 @@
 <template>
-  <el-table :data="tableData" :row-style="showRow" v-bind="$attrs" v-on="$listeners">
+  <el-table :data="formatData" :row-style="showRow" v-bind="$attrs">
-    <slot name="selection" />
+    <el-table-column v-if="columns.length===0" width="150">
-    <slot name="pre-column" />
-    <el-table-column
-      v-for="item in columns"
-      :key="item.key"
-      :label="item.label"
-      :width="item.width"
-      :align="item.align||'center'"
-      :header-align="item.headerAlign"
-    >
       <template slot-scope="scope">
-        <slot :scope="scope" :name="item.key">
+        <span v-for="space in scope.row._level" class="ms-tree-space" :key="space"></span>
-          <template v-if="item.expand">
+        <span class="tree-ctrl" v-if="iconShow(0,scope.row)" @click="toggleExpanded(scope.$index)">
-            <span :style="{'padding-left':+scope.row._level*indent + 'px'} " />
+          <i v-if="!scope.row._expanded" class="el-icon-plus"></i>
-            <span v-show="showSperadIcon(scope.row)" class="tree-ctrl" @click="toggleExpanded(scope.$index)">
+          <i v-else class="el-icon-minus"></i>
-              <i v-if="!scope.row._expand" class="el-icon-plus" />
+        </span>
-              <i v-else class="el-icon-minus" />
+        {{scope.$index}}
-            </span>
-          </template>
-          <template v-if="item.checkbox">
-            <el-checkbox
-              v-if="scope.row[defaultChildren]&&scope.row[defaultChildren].length>0"
-              v-model="scope.row._select"
-              :style="{'padding-left':+scope.row._level*indent + 'px'} "
-              :indeterminate="scope.row._select"
-              @change="handleCheckAllChange(scope.row)"
-            />
-            <el-checkbox
-              v-else
-              v-model="scope.row._select"
-              :style="{'padding-left':+scope.row._level*indent + 'px'} "
-              @change="handleCheckAllChange(scope.row)"
-            />
-          </template>
-          {{ scope.row[item.key] }}
-        </slot>
       </template>
     </el-table-column>
+    <el-table-column v-else v-for="(column, index) in columns" :key="column.value" :label="column.text" :width="column.width">
+      <template slot-scope="scope">
+        <span v-if="index === 0" v-for="space in scope.row._level" class="ms-tree-space" :key="space"></span>
+        <span class="tree-ctrl" v-if="iconShow(index,scope.row)" @click="toggleExpanded(scope.$index)">
+          <i v-if="!scope.row._expanded" class="el-icon-plus"></i>
+          <i v-else class="el-icon-minus"></i>
+        </span>
+        {{scope.row[column.value]}}
+      </template>
+    </el-table-column>
+    <slot></slot>
   </el-table>
 </template>
 
 <script>
-import treeToArray, { addAttrs } from './eval.js'
+/**
-
+  Auth: Lei.j1ang
+  Created: 2018/1/19-13:59
+*/
+import treeToArray from './eval'
 export default {
-  name: 'TreeTable',
+  name: 'treeTable',
   props: {
     data: {
-      type: Array,
+      type: [Array, Object],
-      required: true,
+      required: true
-      default: () => []
     },
     columns: {
       type: Array,
       default: () => []
     },
-    defaultExpandAll: {
+    evalFunc: Function,
+    evalArgs: Array,
+    expandAll: {
       type: Boolean,
       default: false
-    },
-    defaultChildren: {
-      type: String,
-      default: 'children'
-    },
-    indent: {
-      type: Number,
-      default: 50
-    }
-  },
-  data() {
-    return {
-      guard: 1
     }
   },
   computed: {
-    children() {
+    // 格式化数据源
-      return this.defaultChildren
+    formatData: function() {
-    },
+      let tmp
-    tableData() {
+      if (!Array.isArray(this.data)) {
-      const data = this.data
+        tmp = [this.data]
-      if (this.data.length === 0) {
+      } else {
-        return []
+        tmp = this.data
       }
-      addAttrs(data, {
+      const func = this.evalFunc || treeToArray
-        expand: this.defaultExpandAll,
+      const args = this.evalArgs ? Array.concat([tmp], this.evalArgs) : [tmp, this.expandAll]
-        children: this.defaultChildren
+      return func.apply(null, args)
-      })
-
-      const retval = treeToArray(data, this.defaultChildren)
-      return retval
     }
   },
   methods: {
-    addBrother(row, data) {
+    showRow: function(row) {
-      if (row._parent) {
+      const show = (row.row.parent ? (row.row.parent._expanded && row.row.parent._show) : true)
-        row._parent.children.push(data)
+      row.row._show = show
-      } else {
+      return show ? '' : 'display:none;'
-        this.data.push(data)
-      }
     },
-    addChild(row, data) {
+    // 切换下级是否展开
-      if (!row.children) {
+    toggleExpanded: function(trIndex) {
-        this.$set(row, 'children', [])
+      const record = this.formatData[trIndex]
-      }
+      record._expanded = !record._expanded
-      row.children.push(data)
     },
-    delete(row) {
+    // 图标显示
-      const { _index, _parent } = row
+    iconShow(index, record) {
-      if (_parent) {
+      return (index === 0 && record.children && record.children.length > 0)
-        _parent.children.splice(_index, 1)
-      } else {
-        this.data.splice(_index, 1)
-      }
-    },
-    getData() {
-      return this.tableData
-    },
-    showRow: function({ row }) {
-      const parent = row._parent
-      const show = parent ? parent._expand && parent._show : true
-      row._show = show
-      return show
-        ? 'animation:treeTableShow 1s;-webkit-animation:treeTableShow 1s;'
-        : 'display:none;'
-    },
-    showSperadIcon(record) {
-      return record[this.children] && record[this.children].length > 0
-    },
-    toggleExpanded(trIndex) {
-      const record = this.tableData[trIndex]
-      const expand = !record._expand
-      record._expand = expand
-    },
-    handleCheckAllChange(row) {
-      this.selcetRecursion(row, row._select, this.defaultChildren)
-      this.isIndeterminate = row._select
-    },
-    selcetRecursion(row, select, children = 'children') {
-      if (select) {
-        this.$set(row, '_expand', true)
-        this.$set(row, '_show', true)
-      }
-      const sub_item = row[children]
-      if (sub_item && sub_item.length > 0) {
-        sub_item.map(child => {
-          child._select = select
-          this.selcetRecursion(child, select, children)
-        })
-      }
-    },
-    updateTreeNode(item) {
-      return new Promise(resolve => {
-        const { _id, _parent } = item
-        const index = _id.split('-').slice(-1)[0] // get last index
-        if (_parent) {
-          _parent.children.splice(index, 1, item)
-          resolve(this.data)
-        } else {
-          this.data.splice(index, 1, item)
-          resolve(this.data)
-        }
-      })
     }
   }
 }
 </script>
 
-<style>
+<style lang="scss" rel="stylesheet/scss" scoped>
-@keyframes treeTableShow {
+  $color-blue: #2196F3;
-  from {
+  $space-width: 18px;
-    opacity: 0;
+  .ms-tree-space {
+    position: relative;
+    top: 1px;
+    display: inline-block;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 1;
+    width: $space-width;
+    height: 14px;
+    &::before {
+      content: ""
+    }
   }
-  to {
+  .processContainer{
-    opacity: 1;
+    width: 100%;
+    height: 100%;
   }
-}
+  table td {
-@-webkit-keyframes treeTableShow {
+    line-height: 26px;
-  from {
-    opacity: 0;
   }
-  to {
-    opacity: 1;
-  }
-}
 
-.tree-ctrl {
+  .tree-ctrl{
-  position: relative;
+    position: relative;
-  cursor: pointer;
+    cursor: pointer;
-  color: #2196f3;
+    color: $color-blue;
-}
+    margin-left: -$space-width;
+  }
 </style>

src/components/TreeTable/readme.md

@@ -1,220 +1,89 @@
-
-- [Enlgish](#Brief)
-
-# 中文
-
 ## 写在前面
+此组件仅提供一个创建TreeTable的解决思路
 
-此组件仅提供一个创建 `TreeTable` 的解决思路。它基于`element-ui`的 table 组件实现，通过`el-table`的`row-style`方法，在里面判断元素是否需要隐藏或者显示，从而实现`TreeTable`的展开与收起。
+## prop说明
+#### *data*
+  **必填**
 
-并且本组件充分利用 `vue` 插槽的特性来方便用户自定义。
+  原始数据,要求是一个数组或者对象
-
+  ```javascript
-`evel.js` 里面，`addAttrs` 方法会给数据添加几个属性，`treeTotable` 会对数组扁平化。这些操作都不会破坏源数据，只是会新增属性。
+    [{
-
+      key1: value1,
-## Props 说明
+      key2: value2,
-
+      children: [{
-|    Attribute     | Description                        |  Type   | Default  |
+        key1: value1
-| :--------------: | :--------------------------------- | :-----: | :------: |
-|       data       | 原始展示数据                       |  Array  |    []    |
-|     columns      | 列属性                             |  Array  |    []    |
-| defaultExpandAll | 默认是否全部展开                   | Boolean |  false   |
-| defaultChildren  | 指定子树为节点对象的某个属性值     | String  | children |  |
-|      indent      | 相邻级节点间的水平缩进，单位为像素 | Number  |    50    |
-
-> 任何 `el-table` 的属性都支持，例如`border`、`fit`、`size`或者`@select`、`@cell-click`等方法。详情属性见`el-table`文档。
-
----
-
-### 代码示例
-
-```html
-<tree-table :data="data" :columns="columns" border>
-```
-
-#### data(**必填**)
-
-```js
-const data = [
-  {
-    name:'1'
-    children: [
-      {
-        name: '1-1'
       },
       {
-        name: '1-2'
+        key1: value1
-      }
+      }]
-    ]
+    },
-  },
+    {
-  {
+      key1: value1
-    name: `2`
+    }]
-  }
+  ```
-]
+  或者
-```
+ ```javascript
-
+    {
-#### columns(**必填**)
+      key1: value1,
-
+      key2: value2,
-- label: 显示在表头的文字
+      children: [{
-- key: 对应 data 的 key。treeTable 将显示相应的 value
+        key1: value1
-- expand: `true` or `false`。若为 true，则在该列显示展开收起图标
-- checkbox: `true` or `false`。若为 true，则在该列显示`checkbox`
-- width: 每列的宽度，为一个数字(可选)。例如`200`
-- align: 对齐方式 `left/center/right`
-- header-align: 表头对齐方式 `left/center/right`
-
-```javascript
-const columns = [
-  {
-    label: 'Checkbox',
-    checkbox: true
-  },
-  {
-    label: '',
-    key: 'id',
-    expand: true
-  },
-  {
-    label: 'Event',
-    key: 'event',
-    width: 200,
-    align: 'left'
-  },
-  {
-    label: 'Scope',
-    key: 'scope'
-  }
-]
-```
-
-> 树表组件将会根据 columns 的 key 属性生成具名插槽，如果你需要对列数据进行自定义，通过插槽即可实现
-
-```html
-<template slot="your key" slot-scope="{scope}">
-  <el-tag>level: {{ scope.row._level }}</el-tag>
-  <el-tag>expand: {{ scope.row._expand }}</el-tag>
-  <el-tag>select: {{ scope.row._select }}</el-tag>
-</template>
-```
-
-## Events
-
-目前提供了几个方法，不过只是`beta`版本，之后很可能会修改。
-
-```js
-this.$refs.TreeTable.addChild(row, data) //添加子元素
-this.$refs.TreeTable.addBrother(row, data) //添加兄弟元素
-this.$refs.TreeTable.delete(row) //删除该元素
-```
-
-## 其他
-
-如果有其他的需求，请参考[el-table](http://element-cn.eleme.io/#/en-US/component/table)的 api 自行修改 index.vue
-
-# English
-
-## Brief
-
-This component only provides a solution for creating `TreeTable`. It is based on the `element-ui` table component. It uses the `row-style` method of `el-table` to determine whether the element needs to be hidden or displayed.
-
-And this component makes full use of the features of the `vue` slot to make it user-friendly.
-
-In `evel.js`, the `addAttrs` method adds several properties to the data, and `treeTotable` flattens the array. None of these operations will destroy the source data, just add properties.
-
-## Props
-
-|    Attribute     | Description                                                  |  Type   | Default  |
-| :--------------: | :----------------------------------------------------------- | :-----: | :------: |
-|       data       | original display data                                        |  Array  |    []    |
-|     columns      | column attribute                                             |  Array  |    []    |
-| defaultExpandAll | whether to expand all nodes by default                       | Boolean |  false   |
-| defaultChildren  | specify which node object is used as the node's subtree      | String  | children |  |
-|      indent      | horizontal indentation of nodes in adjacent levels in pixels | Number  |    50    |
-
-> Any of the `el-table` properties are supported, such as `border`, `fit`, `size` or `@select`, `@cell-click`. See the ʻel-table` documentation for details.
-
----
-
-### Example
-
-```html
-<tree-table :data="data" :columns="columns" border>
-```
-
-#### data(**Required**)
-
-```js
-const data = [
-  {
-    name:'1'
-    children: [
-      {
-        name: '1-1'
       },
       {
-        name: '1-2'
+        key1: value1
-      }
+      }]
-    ]
+    }
-  },
+  ```
-  {
-    name: `2`
-  }
-]
-```
 
-#### columns(**Required**)
+#### columns
+  列属性,要求是一个数组
 
-- label: text displayed in the header
+  1. text: 显示在表头的文字
-- key: data.key will show in column
+  2. value: 对应data的key。treeTable将显示相应的value
-- expand: `true` or `false`
+  3. width: 每列的宽度，为一个数字(可选)
-- checkbox: `true` or `false`
-- width: column width 。such as `200`
-- align: alignment `left/center/right`
-- header-align: alignment of the table header `left/center/right`
   
-```javascript
+  如果你想要每个字段都有自定义的样式或者嵌套其他组件，columns可不提供，直接像在el-table一样写即可，如果没有自定义内容，提供columns将更加的便捷方便
-const columns = [
-  {
-    label: 'Checkbox',
-    checkbox: true
-  },
-  {
-    label: '',
-    key: 'id',
-    expand: true
-  },
-  {
-    label: 'Event',
-    key: 'event',
-    width: 200,
-    align: 'left'
-  },
-  {
-    label: 'Scope',
-    key: 'scope'
-  }
-]
-```
   
-> The tree table component will generate a named slot based on the key property of columns. If you need to customize the column data, you can do it through the slot.
+  如果你有几个字段是需要自定义的，几个不需要，那么可以将不需要自定义的字段放入columns，将需要自定义的内容放入到slot中，详情见后文
+  ```javascript
+  [{
+    value:string,
+    text:string,
+    width:number
+  },{
+    value:string,
+    text:string,
+    width:number
+  }]
+  ```
 
-```html
+#### expandAll
-<template slot="your key" slot-scope="{scope}">
+  是否默认全部展开，boolean值，默认为false
-  <el-tag>level: {{ scope.row._level }}</el-tag>
-  <el-tag>expand: {{ scope.row._expand }}</el-tag>
-  <el-tag>select: {{ scope.row._select }}</el-tag>
-</template>
-```
 
-## Events
+#### evalFunc
+  解析函数，function，非必须
 
-Several methods are currently available, but only the `beta` version, which is likely to be modified later.
+  如果不提供，将使用默认的[evalFunc](./eval.js)
 
-```js
+  如果提供了evalFunc,那么会用提供的evalFunc去解析data，并返回treeTable渲染所需要的值。如何编写一个evalFunc，请参考[*eval.js*](https://github.com/PanJiaChen/vue-element-admin/blob/master/src/components/TreeTable/eval.js)或[*customEval.js*](https://github.com/PanJiaChen/vue-element-admin/blob/master/src/views/example/table/treeTable/customEval.js)
-this.$refs.TreeTable.addChild(row, data) //Add child elements
-this.$refs.TreeTable.addBrother(row, data) //Add a sibling element
-this.$refs.TreeTable.delete(row) //Delete the element
-```
 
-## Other
+#### evalArgs
+  解析函数的参数，是一个数组
 
-If you have other requirements, please refer to the [el-table](http://element-cn.eleme.io/#/en-US/component/table) api to modify the index.vue
+  **请注意，自定义的解析函数参数第一个为this.data，你不需要在evalArgs填写。** *this.data为需要解析的数据*
+
+  如你的解析函数需要的参数为`(this.data,1,2,3,4)`，那么你只需要将`[1,2,3,4]`赋值给`evalArgs`就可以了
+  
+  如果你的解析函数参数只有一个`(this.data)`,那么就可以不用填写evalArgs了
+  
+  具体可参考[*customEval.js*](https://github.com/PanJiaChen/vue-element-admin/blob/master/src/views/example/table/treeTable/customEval.js)的函数参数和[customTreeTable](https://github.com/PanJiaChen/vue-element-admin/blob/master/src/views/example/table/treeTable/customTreeTable.vue)的`evalArgs`属性值
+
+ ## slot
+ 这是一个自定义列的插槽。
+ 
+ 默认情况下，treeTable只有一行行展示数据的功能。但是一般情况下，我们会要给行加上一个操作按钮或者根据当行数据展示不同的样式，这时我们就需要自定义列了。请参考[customTreeTable](https://github.com/PanJiaChen/vue-element-admin/blob/master/src/views/example/table/treeTable/customTreeTable.vue)，[实例效果](http://panjiachen.github.io/vue-element-admin/#/example/table/custom-tree-table)
+ 
+ `slot`和`columns属性`可同时存在,columns里面的数据列会在slot自定义列的左边展示
+
+ ## 其他
+  如果有其他的需求，请参考[el-table](http://element-cn.eleme.io/#/en-US/component/table)的api自行修改index.vue

src/components/Upload/singleImage.vue

@@ -1,26 +1,19 @@
 <template>
-  <div class="upload-container">
+    <div class="upload-container">
-    <el-upload
+        <el-upload class="image-uploader" :data="dataObj" drag :multiple="false" :show-file-list="false" action="https://httpbin.org/post"
-      :data="dataObj"
+            :on-success="handleImageScucess">
-      :multiple="false"
+            <i class="el-icon-upload"></i>
-      :show-file-list="false"
+            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
-      :on-success="handleImageSuccess"
+        </el-upload>
-      class="image-uploader"
+        <div class="image-preview">
-      drag
+            <div class="image-preview-wrapper" v-show="imageUrl.length>1">
-      action="https://httpbin.org/post"
+                <img :src="imageUrl+'?imageView2/1/w/200/h/200'">
-    >
+                <div class="image-preview-action">
-      <i class="el-icon-upload" />
+                    <i @click="rmImage" class="el-icon-delete"></i>
-      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+                </div>
-    </el-upload>
+            </div>
-    <div class="image-preview">
-      <div v-show="imageUrl.length>1" class="image-preview-wrapper">
-        <img :src="imageUrl+'?imageView2/1/w/200/h/200'">
-        <div class="image-preview-action">
-          <i class="el-icon-delete" @click="rmImage" />
         </div>
-      </div>
     </div>
-  </div>
 </template>
 
 <script>
@@ -28,11 +21,13 @@
 import { getToken } from '@/api/qiniu'
 
 export default {
-  name: 'SingleImageUpload',
+  name: 'singleImageUpload',
   props: {
-    value: {
+    value: String
-      type: String,
+  },
-      default: ''
+  computed: {
+    imageUrl() {
+      return this.value
     }
   },
   data() {
@@ -41,11 +36,6 @@ export default {
       dataObj: { token: '', key: '' }
     }
   },
-  computed: {
-    imageUrl() {
-      return this.value
-    }
-  },
   methods: {
     rmImage() {
       this.emitInput('')
@@ -53,7 +43,7 @@ export default {
     emitInput(val) {
       this.$emit('input', val)
     },
-    handleImageSuccess() {
+    handleImageScucess() {
       this.emitInput(this.tempUrl)
     },
     beforeUpload() {

src/components/Upload/singleImage2.vue

@@ -1,37 +1,32 @@
 <template>
-  <div class="singleImageUpload2 upload-container">
+	<div class="singleImageUpload2 upload-container">
-    <el-upload
+		<el-upload class="image-uploader" :data="dataObj" drag :multiple="false" :show-file-list="false" action="https://httpbin.org/post"
-      :data="dataObj"
+		  :on-success="handleImageScucess">
-      :multiple="false"
+			<i class="el-icon-upload"></i>
-      :show-file-list="false"
+			<div class="el-upload__text">Drag或<em>点击上传</em></div>
-      :on-success="handleImageSuccess"
+		</el-upload>
-      class="image-uploader"
+		<div v-show="imageUrl.length>0" class="image-preview">
-      drag
+			<div class="image-preview-wrapper" v-show="imageUrl.length>1">
-      action="https://httpbin.org/post"
+				<img :src="imageUrl">
-    >
+				<div class="image-preview-action">
-      <i class="el-icon-upload" />
+					<i @click="rmImage" class="el-icon-delete"></i>
-      <div class="el-upload__text">Drag或<em>点击上传</em></div>
+				</div>
-    </el-upload>
+			</div>
-    <div v-show="imageUrl.length>0" class="image-preview">
+		</div>
-      <div v-show="imageUrl.length>1" class="image-preview-wrapper">
+	</div>
-        <img :src="imageUrl">
-        <div class="image-preview-action">
-          <i class="el-icon-delete" @click="rmImage" />
-        </div>
-      </div>
-    </div>
-  </div>
 </template>
 
 <script>
 import { getToken } from '@/api/qiniu'
 
 export default {
-  name: 'SingleImageUpload2',
+  name: 'singleImageUpload2',
   props: {
-    value: {
+    value: String
-      type: String,
+  },
-      default: ''
+  computed: {
+    imageUrl() {
+      return this.value
     }
   },
   data() {
@@ -40,11 +35,6 @@ export default {
       dataObj: { token: '', key: '' }
     }
   },
-  computed: {
-    imageUrl() {
-      return this.value
-    }
-  },
   methods: {
     rmImage() {
       this.emitInput('')
@@ -52,7 +42,7 @@ export default {
     emitInput(val) {
       this.$emit('input', val)
     },
-    handleImageSuccess() {
+    handleImageScucess() {
       this.emitInput(this.tempUrl)
     },
     beforeUpload() {
@@ -76,53 +66,53 @@ export default {
 
 <style rel="stylesheet/scss" lang="scss" scoped>
 .upload-container {
-  width: 100%;
+	width: 100%;
-  height: 100%;
+	height: 100%;
-  position: relative;
+	position: relative;
-  .image-uploader {
+	.image-uploader {
-    height: 100%;
+		height: 100%;
-  }
+	}
-  .image-preview {
+	.image-preview {
-    width: 100%;
+		width: 100%;
-    height: 100%;
+		height: 100%;
-    position: absolute;
+		position: absolute;
-    left: 0px;
+		left: 0px;
-    top: 0px;
+		top: 0px;
-    border: 1px dashed #d9d9d9;
+		border: 1px dashed #d9d9d9;
-    .image-preview-wrapper {
+		.image-preview-wrapper {
-      position: relative;
+			position: relative;
-      width: 100%;
+			width: 100%;
-      height: 100%;
+			height: 100%;
-      img {
+			img {
-        width: 100%;
+				width: 100%;
-        height: 100%;
+				height: 100%;
-      }
+			}
-    }
+		}
-    .image-preview-action {
+		.image-preview-action {
-      position: absolute;
+			position: absolute;
-      width: 100%;
+			width: 100%;
-      height: 100%;
+			height: 100%;
-      left: 0;
+			left: 0;
-      top: 0;
+			top: 0;
-      cursor: default;
+			cursor: default;
-      text-align: center;
+			text-align: center;
-      color: #fff;
+			color: #fff;
-      opacity: 0;
+			opacity: 0;
-      font-size: 20px;
+			font-size: 20px;
-      background-color: rgba(0, 0, 0, .5);
+			background-color: rgba(0, 0, 0, .5);
-      transition: opacity .3s;
+			transition: opacity .3s;
-      cursor: pointer;
+			cursor: pointer;
-      text-align: center;
+			text-align: center;
-      line-height: 200px;
+			line-height: 200px;
-      .el-icon-delete {
+			.el-icon-delete {
-        font-size: 36px;
+				font-size: 36px;
-      }
+			}
-    }
+		}
-    &:hover {
+		&:hover {
-      .image-preview-action {
+			.image-preview-action {
-        opacity: 1;
+				opacity: 1;
-      }
+			}
-    }
+		}
-  }
+	}
 }
 </style>

src/components/Upload/singleImage3.vue

@@ -1,45 +1,40 @@
 <template>
-  <div class="upload-container">
+	<div class="upload-container">
-    <el-upload
+		<el-upload class="image-uploader" :data="dataObj" drag :multiple="false" :show-file-list="false" action="https://httpbin.org/post"
-      :data="dataObj"
+		  :on-success="handleImageScucess">
-      :multiple="false"
+			<i class="el-icon-upload"></i>
-      :show-file-list="false"
+			<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
-      :on-success="handleImageSuccess"
+		</el-upload>
-      class="image-uploader"
+		<div class="image-preview image-app-preview">
-      drag
+			<div class="image-preview-wrapper" v-show="imageUrl.length>1">
-      action="https://httpbin.org/post"
+				<img :src="imageUrl">
-    >
+				<div class="image-preview-action">
-      <i class="el-icon-upload" />
+					<i @click="rmImage" class="el-icon-delete"></i>
-      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+				</div>
-    </el-upload>
+			</div>
-    <div class="image-preview image-app-preview">
+		</div>
-      <div v-show="imageUrl.length>1" class="image-preview-wrapper">
+		<div class="image-preview">
-        <img :src="imageUrl">
+			<div class="image-preview-wrapper" v-show="imageUrl.length>1">
-        <div class="image-preview-action">
+				<img :src="imageUrl">
-          <i class="el-icon-delete" @click="rmImage" />
+				<div class="image-preview-action">
-        </div>
+					<i @click="rmImage" class="el-icon-delete"></i>
-      </div>
+				</div>
-    </div>
+			</div>
-    <div class="image-preview">
+		</div>
-      <div v-show="imageUrl.length>1" class="image-preview-wrapper">
+	</div>
-        <img :src="imageUrl">
-        <div class="image-preview-action">
-          <i class="el-icon-delete" @click="rmImage" />
-        </div>
-      </div>
-    </div>
-  </div>
 </template>
 
 <script>
 import { getToken } from '@/api/qiniu'
 
 export default {
-  name: 'SingleImageUpload3',
+  name: 'singleImageUpload',
   props: {
-    value: {
+    value: String
-      type: String,
+  },
-      default: ''
+  computed: {
+    imageUrl() {
+      return this.value
     }
   },
   data() {
@@ -48,11 +43,6 @@ export default {
       dataObj: { token: '', key: '' }
     }
   },
-  computed: {
-    imageUrl() {
-      return this.value
-    }
-  },
   methods: {
     rmImage() {
       this.emitInput('')
@@ -60,7 +50,7 @@ export default {
     emitInput(val) {
       this.$emit('input', val)
     },
-    handleImageSuccess(file) {
+    handleImageScucess(file) {
       this.emitInput(file.files.file)
     },
     beforeUpload() {
@@ -84,72 +74,72 @@ export default {
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-@import "~@/styles/mixin.scss";
+@import "src/styles/mixin.scss";
 .upload-container {
-  width: 100%;
+	width: 100%;
-  position: relative;
+	position: relative;
-  @include clearfix;
+	@include clearfix;
-  .image-uploader {
+	.image-uploader {
-    width: 35%;
+		width: 35%;
-    float: left;
+		float: left;
-  }
+	}
-  .image-preview {
+	.image-preview {
-    width: 200px;
+		width: 200px;
-    height: 200px;
+		height: 200px;
-    position: relative;
+		position: relative;
-    border: 1px dashed #d9d9d9;
+		border: 1px dashed #d9d9d9;
-    float: left;
+		float: left;
-    margin-left: 50px;
+		margin-left: 50px;
-    .image-preview-wrapper {
+		.image-preview-wrapper {
-      position: relative;
+			position: relative;
-      width: 100%;
+			width: 100%;
-      height: 100%;
+			height: 100%;
-      img {
+			img {
-        width: 100%;
+				width: 100%;
-        height: 100%;
+				height: 100%;
-      }
+			}
-    }
+		}
-    .image-preview-action {
+		.image-preview-action {
-      position: absolute;
+			position: absolute;
-      width: 100%;
+			width: 100%;
-      height: 100%;
+			height: 100%;
-      left: 0;
+			left: 0;
-      top: 0;
+			top: 0;
-      cursor: default;
+			cursor: default;
-      text-align: center;
+			text-align: center;
-      color: #fff;
+			color: #fff;
-      opacity: 0;
+			opacity: 0;
-      font-size: 20px;
+			font-size: 20px;
-      background-color: rgba(0, 0, 0, .5);
+			background-color: rgba(0, 0, 0, .5);
-      transition: opacity .3s;
+			transition: opacity .3s;
-      cursor: pointer;
+			cursor: pointer;
-      text-align: center;
+			text-align: center;
-      line-height: 200px;
+			line-height: 200px;
-      .el-icon-delete {
+			.el-icon-delete {
-        font-size: 36px;
+				font-size: 36px;
-      }
+			}
-    }
+		}
-    &:hover {
+		&:hover {
-      .image-preview-action {
+			.image-preview-action {
-        opacity: 1;
+				opacity: 1;
-      }
+			}
-    }
+		}
-  }
+	}
-  .image-app-preview {
+	.image-app-preview {
-    width: 320px;
+		width: 320px;
-    height: 180px;
+		height: 180px;
-    position: relative;
+		position: relative;
-    border: 1px dashed #d9d9d9;
+		border: 1px dashed #d9d9d9;
-    float: left;
+		float: left;
-    margin-left: 50px;
+		margin-left: 50px;
-    .app-fake-conver {
+		.app-fake-conver {
-      height: 44px;
+			height: 44px;
-      position: absolute;
+			position: absolute;
-      width: 100%; // background: rgba(0, 0, 0, .1);
+			width: 100%; // background: rgba(0, 0, 0, .1);
-      text-align: center;
+			text-align: center;
-      line-height: 64px;
+			line-height: 64px;
-      color: #fff;
+			color: #fff;
-    }
+		}
-  }
+	}
 }
 </style>

src/components/UploadExcel/index.vue

@@ -1,9 +1,9 @@
 <template>
   <div>
-    <input ref="excel-upload-input" class="excel-upload-input" type="file" accept=".xlsx, .xls" @change="handleClick">
+    <input id="excel-upload-input" type="file" accept=".xlsx, .xls" class="c-hide" @change="handkeFileChange">
-    <div class="drop" @drop="handleDrop" @dragover="handleDragover" @dragenter="handleDragover">
+    <div id="drop" @drop="handleDrop" @dragover="handleDragover" @dragenter="handleDragover">
       Drop excel file here or
-      <el-button :loading="loading" style="margin-left:16px;" size="mini" type="primary" @click="handleUpload">Browse</el-button>
+      <el-button style="margin-left:16px;" size="mini" type="primary" @click="handleUpload">browse</el-button>
     </div>
   </div>
 </template>
@@ -12,10 +12,6 @@
 import XLSX from 'xlsx'
 
 export default {
-  props: {
-    beforeUpload: Function, // eslint-disable-line
-    onSuccess: Function// eslint-disable-line
-  },
   data() {
     return {
       loading: false,
@@ -26,27 +22,21 @@ export default {
     }
   },
   methods: {
-    generateData({ header, results }) {
+    generateDate({ header, results }) {
       this.excelData.header = header
       this.excelData.results = results
-      this.onSuccess && this.onSuccess(this.excelData)
+      this.$emit('on-selected-file', this.excelData)
     },
     handleDrop(e) {
       e.stopPropagation()
       e.preventDefault()
-      if (this.loading) return
       const files = e.dataTransfer.files
       if (files.length !== 1) {
         this.$message.error('Only support uploading one file!')
         return
       }
-      const rawFile = files[0] // only use files[0]
+      const itemFile = files[0] // only use files[0]
-
+      this.readerData(itemFile)
-      if (!this.isExcel(rawFile)) {
-        this.$message.error('Only supports upload .xlsx, .xls, .csv suffix files')
-        return false
-      }
-      this.upload(rawFile)
       e.stopPropagation()
       e.preventDefault()
     },
@@ -56,72 +46,58 @@ export default {
       e.dataTransfer.dropEffect = 'copy'
     },
     handleUpload() {
-      this.$refs['excel-upload-input'].click()
+      document.getElementById('excel-upload-input').click()
     },
-    handleClick(e) {
+    handkeFileChange(e) {
       const files = e.target.files
-      const rawFile = files[0] // only use files[0]
+      const itemFile = files[0] // only use files[0]
-      if (!rawFile) return
+      this.readerData(itemFile)
-      this.upload(rawFile)
     },
-    upload(rawFile) {
+    readerData(itemFile) {
-      this.$refs['excel-upload-input'].value = null // fix can't select the same excel
+      const reader = new FileReader()
-
+      reader.onload = e => {
-      if (!this.beforeUpload) {
+        const data = e.target.result
-        this.readerData(rawFile)
+        const fixedData = this.fixdata(data)
-        return
+        const workbook = XLSX.read(btoa(fixedData), { type: 'base64' })
-      }
+        const firstSheetName = workbook.SheetNames[0]
-      const before = this.beforeUpload(rawFile)
+        const worksheet = workbook.Sheets[firstSheetName]
-      if (before) {
+        const header = this.get_header_row(worksheet)
-        this.readerData(rawFile)
+        const results = XLSX.utils.sheet_to_json(worksheet)
+        this.generateDate({ header, results })
       }
+      reader.readAsArrayBuffer(itemFile)
     },
-    readerData(rawFile) {
+    fixdata(data) {
-      this.loading = true
+      let o = ''
-      return new Promise((resolve, reject) => {
+      let l = 0
-        const reader = new FileReader()
+      const w = 10240
-        reader.onload = e => {
+      for (; l < data.byteLength / w; ++l) o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w)))
-          const data = e.target.result
+      o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)))
-          const workbook = XLSX.read(data, { type: 'array' })
+      return o
-          const firstSheetName = workbook.SheetNames[0]
-          const worksheet = workbook.Sheets[firstSheetName]
-          const header = this.getHeaderRow(worksheet)
-          const results = XLSX.utils.sheet_to_json(worksheet)
-          this.generateData({ header, results })
-          this.loading = false
-          resolve()
-        }
-        reader.readAsArrayBuffer(rawFile)
-      })
     },
-    getHeaderRow(sheet) {
+    get_header_row(sheet) {
       const headers = []
       const range = XLSX.utils.decode_range(sheet['!ref'])
       let C
-      const R = range.s.r
+      const R = range.s.r /* start in the first row */
-      /* start in the first row */
       for (C = range.s.c; C <= range.e.c; ++C) { /* walk every column in the range */
-        const cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })]
+        var cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })] /* find the cell in the first row */
-        /* find the cell in the first row */
+        var hdr = 'UNKNOWN ' + C // <-- replace with your desired default
-        let hdr = 'UNKNOWN ' + C // <-- replace with your desired default
         if (cell && cell.t) hdr = XLSX.utils.format_cell(cell)
         headers.push(hdr)
       }
       return headers
-    },
-    isExcel(file) {
-      return /\.(xlsx|xls|csv)$/.test(file.name)
     }
   }
 }
 </script>
 
 <style scoped>
-.excel-upload-input{
+#excel-upload-input{
   display: none;
   z-index: -9999;
 }
-.drop{
+#drop{
   border: 2px dashed #bbb;
   width: 600px;
   height: 160px;

src/directive/clipboard/clipboard.js

@@ -1,7 +1,7 @@
 // Inspired by https://github.com/Inndy/vue-clipboard2
 const Clipboard = require('clipboard')
 if (!Clipboard) {
-  throw new Error('you should npm install `clipboard` --save at first ')
+  throw new Error('you shold npm install `clipboard` --save at first ')
 }
 
 export default {

src/directive/el-dragDialog/drag.js

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

src/directive/el-dragDialog/index.js

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

src/directive/el-table/adaptive.js

@@ -1,42 +0,0 @@
-
-import { addResizeListener, removeResizeListener } from 'element-ui/src/utils/resize-event'
-
-/**
- * How to use
- * <el-table height="100px" v-el-height-adaptive-table="{bottomOffset: 30}">...</el-table>
- * el-table height is must be set
- *  bottomOffset: 30(default)   // The height of the table from the bottom of the page.
- */
-
-const doResize = (el, binding, vnode) => {
-  const { componentInstance: $table } = vnode
-
-  const { value } = binding
-
-  if (!$table.height) {
-    throw new Error(`el-$table must set the height. Such as height='100px'`)
-  }
-  const bottomOffset = (value && value.bottomOffset) || 30
-
-  if (!$table) return
-
-  const height = window.innerHeight - el.getBoundingClientRect().top - bottomOffset
-  $table.layout.setHeight(height)
-  $table.doLayout()
-}
-
-export default {
-  bind(el, binding, vnode) {
-    el.resizeListener = () => {
-      doResize(el, binding, vnode)
-    }
-
-    addResizeListener(el, el.resizeListener)
-  },
-  inserted(el, binding, vnode) {
-    doResize(el, binding, vnode)
-  },
-  unbind(el) {
-    removeResizeListener(el, el.resizeListener)
-  }
-}

src/directive/el-table/index.js

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

src/directive/permission/index.js

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

src/directive/permission/permission.js

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

src/directive/waves/waves.js

@@ -1,73 +1,42 @@
 import './waves.css'
 
-const context = '@@wavesContext'
+export default{
-
-function handleClick(el, binding) {
-  function handle(e) {
-    const customOpts = Object.assign({}, binding.value)
-    const opts = Object.assign(
-      {
-        ele: el, // 波纹作用元素
-        type: 'hit', // hit 点击位置扩散 center中心点扩展
-        color: 'rgba(0, 0, 0, 0.15)' // 波纹颜色
-      },
-      customOpts
-    )
-    const target = opts.ele
-    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.documentElement.scrollTop ||
-              document.body.scrollTop) + 'px'
-          ripple.style.left =
-            (e.pageX - rect.left - ripple.offsetWidth / 2 - document.documentElement.scrollLeft ||
-              document.body.scrollLeft) + 'px'
-      }
-      ripple.style.backgroundColor = opts.color
-      ripple.className = 'waves-ripple z-active'
-      return false
-    }
-  }
-
-  if (!el[context]) {
-    el[context] = {
-      removeHandle: handle
-    }
-  } else {
-    el[context].removeHandle = handle
-  }
-
-  return handle
-}
-
-export default {
   bind(el, binding) {
-    el.addEventListener('click', handleClick(el, binding), false)
+    el.addEventListener('click', e => {
-  },
+      const customOpts = Object.assign({}, binding.value)
-  update(el, binding) {
+      const opts = Object.assign({
-    el.removeEventListener('click', el[context].removeHandle, false)
+        ele: el, // 波纹作用元素
-    el.addEventListener('click', handleClick(el, binding), false)
+        type: 'hit', // hit点击位置扩散center中心点扩展
-  },
+        color: 'rgba(0, 0, 0, 0.15)' // 波纹颜色
-  unbind(el) {
+      }, customOpts)
-    el.removeEventListener('click', el[context].removeHandle, false)
+      const target = opts.ele
-    el[context] = null
+      if (target) {
-    delete el[context]
+        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)
   }
 }
+

src/errorLog.js

@@ -2,18 +2,20 @@ import Vue from 'vue'
 import store from './store'
 
 // you can set only in production env show the error-log
-if (process.env.NODE_ENV === 'production') {
+// if (process.env.NODE_ENV === 'production') {
-  Vue.config.errorHandler = function(err, vm, info, a) {
+
+Vue.config.errorHandler = function(err, vm, info, a) {
   // Don't ask me why I use Vue.nextTick, it just a hack.
   // detail see https://forum.vuejs.org/t/dispatch-in-vue-config-errorhandler-has-some-problem/23500
-    Vue.nextTick(() => {
+  Vue.nextTick(() => {
-      store.dispatch('addErrorLog', {
+    store.dispatch('addErrorLog', {
-        err,
+      err,
-        vm,
+      vm,
-        info,
+      info,
-        url: window.location.href
+      url: window.location.href
-      })
-      console.error(err, info)
     })
-  }
+    console.error(err, info)
+  })
 }
+
+// }

src/filters/index.js

@@ -1,6 +1,3 @@
-// set function parseTime,formatTime to filter
-export { parseTime, formatTime } from '@/utils'
-
 function pluralize(time, label) {
   if (time === 1) {
     return time + label
@@ -19,8 +16,67 @@ export function timeAgo(time) {
   }
 }
 
+export function parseTime(time, cFormat) {
+  if (arguments.length === 0) {
+    return null
+  }
+
+  if ((time + '').length === 10) {
+    time = +time * 1000
+  }
+
+  const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
+  let date
+  if (typeof time === 'object') {
+    date = time
+  } else {
+    date = new Date(parseInt(time))
+  }
+  const formatObj = {
+    y: date.getFullYear(),
+    m: date.getMonth() + 1,
+    d: date.getDate(),
+    h: date.getHours(),
+    i: date.getMinutes(),
+    s: date.getSeconds(),
+    a: date.getDay()
+  }
+  const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
+    let value = formatObj[key]
+    if (key === 'a') return ['一', '二', '三', '四', '五', '六', '日'][value - 1]
+    if (result.length > 0 && value < 10) {
+      value = '0' + value
+    }
+    return value || 0
+  })
+  return time_str
+}
+
+export function formatTime(time, option) {
+  time = +time * 1000
+  const d = new Date(time)
+  const now = Date.now()
+
+  const diff = (now - d) / 1000
+
+  if (diff < 30) {
+    return '刚刚'
+  } else if (diff < 3600) { // less 1 hour
+    return Math.ceil(diff / 60) + '分钟前'
+  } else if (diff < 3600 * 24) {
+    return Math.ceil(diff / 3600) + '小时前'
+  } else if (diff < 3600 * 24 * 2) {
+    return '1天前'
+  }
+  if (option) {
+    return parseTime(time, option)
+  } else {
+    return d.getMonth() + 1 + '月' + d.getDate() + '日' + d.getHours() + '时' + d.getMinutes() + '分'
+  }
+}
+
 /* 数字 格式化*/
-export function numberFormatter(num, digits) {
+export function nFormatter(num, digits) {
   const si = [
     { value: 1E18, symbol: 'E' },
     { value: 1E15, symbol: 'P' },
@@ -37,6 +93,12 @@ export function numberFormatter(num, digits) {
   return num.toString()
 }
 
-export function toThousandFilter(num) {
+export function html2Text(val) {
+  const div = document.createElement('div')
+  div.innerHTML = val
+  return div.textContent || div.innerText
+}
+
+export function toThousandslsFilter(num) {
   return (+num || 0).toString().replace(/^-?\d+/g, m => m.replace(/(?=(?!\b)(\d{3})+$)/g, ','))
 }

src/icons/index.js

@@ -1,9 +1,12 @@
 import Vue from 'vue'
 import SvgIcon from '@/components/SvgIcon'// svg组件
+import generateIconsView from '@/views/svg-icons/generateIconsView.js'// just for @/views/icons , you can delete it
 
 // register globally
 Vue.component('svg-icon', SvgIcon)
 
-const req = require.context('./svg', false, /\.svg$/)
 const requireAll = requireContext => requireContext.keys().map(requireContext)
-requireAll(req)
+const req = require.context('./svg', false, /\.svg$/)
+const iconMap = requireAll(req)
+
+generateIconsView.generate(iconMap) // just for @/views/icons , you can delete it

src/icons/svg/404.svg

@@ -1 +1 @@
-<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M121.718 73.272v9.953c3.957-7.584 6.199-16.05 6.199-24.995C127.917 26.079 99.273 0 63.958 0 28.644 0 0 26.079 0 58.23c0 .403.028.806.028 1.21l22.97-25.953h13.34l-19.76 27.187h6.42V53.77l13.728-19.477v49.361H22.998V73.272H2.158c5.951 20.284 23.608 36.208 45.998 41.399-1.44 3.3-5.618 11.263-12.565 12.674-8.607 1.764 23.358.428 46.163-13.178 17.519-4.611 31.938-15.849 39.77-30.513h-13.506V73.272H85.02V59.464l22.998-25.977h13.008l-19.429 27.187h6.421v-7.433l13.727-19.402v39.433h-.027zm-78.24 2.822a10.516 10.516 0 0 1-.996-4.535V44.548c0-1.613.332-3.124.996-4.535a11.66 11.66 0 0 1 2.713-3.68c1.134-1.032 2.49-1.864 4.04-2.468 1.55-.605 3.21-.908 4.982-.908h11.292c1.77 0 3.431.303 4.981.908 1.522.604 2.85 1.41 3.986 2.418l-12.26 16.303v-2.898a1.96 1.96 0 0 0-.665-1.512c-.443-.403-.996-.604-1.66-.604-.665 0-1.218.201-1.661.604a1.96 1.96 0 0 0-.664 1.512v9.071L44.364 77.606a10.556 10.556 0 0 1-.886-1.512zm35.73-4.535c0 1.613-.332 3.124-.997 4.535a11.66 11.66 0 0 1-2.712 3.68c-1.134 1.032-2.49 1.864-4.04 2.469-1.55.604-3.21.907-4.982.907H55.185c-1.77 0-3.431-.303-4.981-.907-1.55-.605-2.906-1.437-4.041-2.47a12.49 12.49 0 0 1-1.384-1.512l13.727-18.217v6.375c0 .605.222 1.109.665 1.512.442.403.996.604 1.66.604.664 0 1.218-.201 1.66-.604a1.96 1.96 0 0 0 .665-1.512V53.87L75.97 36.838c.913.932 1.66 1.99 2.214 3.175.664 1.41.996 2.922.996 4.535v27.011h.028z"/></svg>
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1503994850540" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10206" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M931.6 585.6l0 79c28.6-60.2 44.8-127.4 44.8-198.4C976.4 211 769.4 4 514.2 4S52 211 52 466.2c0 3.2 0.2 6.4 0.2 9.6l166-206 96.4 0L171.8 485.6l46.4 0 0-54.8 99.2-154.6 0 209.4 0 100 0 82.4-99.2 0 0-82.4L67.6 585.6c43 161 170.6 287.4 332.4 328.6-10.4 26.2-40.6 89.4-90.8 100.6-62.2 14 168.8 3.4 333.6-104.6 126.6-36.6 230.8-125.8 287.4-242.2l-97.6 0 0-82.4-166.2 0 0-87.2 0-12.8L666.4 476l166.2-206.2 94 0-140.4 215.8 46.4 0 0-59 99.2-154 0 213.2L931.8 585.6zM366.2 608c-4.8-11.2-7.2-23.2-7.2-36L359 357.6c0-12.8 2.4-24.8 7.2-36 4.8-11.2 11.4-21 19.6-29.2 8.2-8.2 18-14.8 29.2-19.6 11.2-4.8 23.2-7.2 36-7.2l81.6 0c12.8 0 24.8 2.4 36 7.2 11 4.8 20.6 11.2 28.8 19.2l-88.6 129.4 0-23c0-4.8-1.6-8.8-4.8-12-3.2-3.2-7.2-4.8-12-4.8-4.8 0-8.8 1.6-12 4.8-3.2 3.2-4.8 7.2-4.8 12l0 72L372.6 620C370.2 616.2 368 612.2 366.2 608zM624.4 572c0 12.8-2.4 24.8-7.2 36-4.8 11.2-11.4 21-19.6 29.2-8.2 8.2-18 14.8-29.2 19.6-11.2 4.8-23.2 7.2-36 7.2l-81.6 0c-12.8 0-24.8-2.4-36-7.2-11.2-4.8-21-11.4-29.2-19.6-3.6-3.6-7-7.8-10-12l99.2-144.6 0 50.6c0 4.8 1.6 8.8 4.8 12 3.2 3.2 7.2 4.8 12 4.8 4.8 0 8.8-1.6 12-4.8 3.2-3.2 4.8-7.2 4.8-12l0-99.6 92.6-135.2c6.6 7.4 12 15.8 16 25.2 4.8 11.2 7.2 23.2 7.2 36L624.2 572z" p-id="10207"></path></svg>

src/icons/svg/bug.svg

@@ -1 +1 @@
-<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M127.88 73.143c0 1.412-.506 2.635-1.518 3.669-1.011 1.033-2.209 1.55-3.592 1.55h-17.887c0 9.296-1.783 17.178-5.35 23.645l16.609 17.044c1.011 1.034 1.517 2.257 1.517 3.67 0 1.412-.506 2.635-1.517 3.668-.958 1.033-2.155 1.55-3.593 1.55-1.438 0-2.635-.517-3.593-1.55l-15.811-16.063a15.49 15.49 0 0 1-1.196 1.06c-.532.434-1.65 1.208-3.353 2.322a50.104 50.104 0 0 1-5.192 2.974c-1.758.87-3.94 1.658-6.546 2.364-2.607.706-5.189 1.06-7.748 1.06V47.044H58.89v73.062c-2.716 0-5.417-.367-8.106-1.102-2.688-.734-5.003-1.631-6.945-2.692a66.769 66.769 0 0 1-5.268-3.179c-1.571-1.057-2.73-1.94-3.476-2.65L33.9 109.34l-14.611 16.877c-1.066 1.14-2.344 1.711-3.833 1.711-1.277 0-2.422-.434-3.434-1.304-1.012-.978-1.557-2.187-1.635-3.627-.079-1.44.333-2.705 1.236-3.794l16.129-18.51c-3.087-6.197-4.63-13.644-4.63-22.342H5.235c-1.383 0-2.58-.517-3.592-1.55S.125 74.545.125 73.132c0-1.412.506-2.635 1.518-3.668 1.012-1.034 2.21-1.55 3.592-1.55h17.887V43.939L9.308 29.833c-1.012-1.033-1.517-2.256-1.517-3.669 0-1.412.505-2.635 1.517-3.668 1.012-1.034 2.21-1.55 3.593-1.55s2.58.516 3.593 1.55l13.813 14.106h67.396l13.814-14.106c1.012-1.034 2.21-1.55 3.592-1.55 1.384 0 2.581.516 3.593 1.55 1.012 1.033 1.518 2.256 1.518 3.668 0 1.413-.506 2.636-1.518 3.67l-13.814 14.105v23.975h17.887c1.383 0 2.58.516 3.593 1.55 1.011 1.033 1.517 2.256 1.517 3.668l-.005.01zM89.552 26.175H38.448c0-7.23 2.489-13.386 7.466-18.469C50.892 2.623 56.92.082 64 .082c7.08 0 13.108 2.541 18.086 7.624 4.977 5.083 7.466 11.24 7.466 18.469z"/></svg>
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1503994864347" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10314" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M969.142857 548.571429q0 14.848-10.861714 25.709714t-25.709714 10.861714l-128 0q0 97.718857-38.290286 165.705143l118.857143 119.442286q10.861714 10.861714 10.861714 25.709714t-10.861714 25.709714q-10.276571 10.861714-25.709714 10.861714t-25.709714-10.861714l-113.152-112.566857q-2.852571 2.852571-8.557714 7.424t-23.990857 16.274286-37.156571 20.845714-46.848 16.566857-55.442286 7.424l0-512-73.142857 0 0 512q-29.147429 0-58.002286-7.716571t-49.700571-18.870857-37.705143-22.272-24.868571-18.578286l-8.557714-8.009143-104.557714 118.272q-11.446857 11.995429-27.428571 11.995429-13.714286 0-24.576-9.142857-10.861714-10.276571-11.702857-25.417143t8.850286-26.587429l115.419429-129.718857q-33.133714-65.133714-33.133714-156.562286l-128 0q-14.848 0-25.709714-10.861714t-10.861714-25.709714 10.861714-25.709714 25.709714-10.861714l128 0 0-168.009143-98.852571-98.852571q-10.861714-10.861714-10.861714-25.709714t10.861714-25.709714 25.709714-10.861714 25.709714 10.861714l98.852571 98.852571 482.304 0 98.852571-98.852571q10.861714-10.861714 25.709714-10.861714t25.709714 10.861714 10.861714 25.709714-10.861714 25.709714l-98.852571 98.852571 0 168.009143 128 0q14.848 0 25.709714 10.861714t10.861714 25.709714zM694.857143 219.428571l-365.714286 0q0-75.995429 53.430857-129.426286t129.426286-53.430857 129.426286 53.430857 53.430857 129.426286z" p-id="10315"></path></svg>

src/icons/svg/chart.svg

@@ -1 +1 @@
-<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M0 54.857h36.571V128H0V54.857zM91.429 27.43H128V128H91.429V27.429zM45.714 0h36.572v128H45.714V0z"/></svg>
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1503994873331" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10422" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M64 448 320 448 320 960 64 960 64 448 64 448ZM704 256 960 256 960 960 704 960 704 256 704 256ZM384 64 640 64 640 960 384 960 384 64 384 64Z" p-id="10423"></path></svg>