初始化提交。

2024-12-22 12:58:55 +08:00 · 2017-11-02 14:41:37 +08:00 · 2017-11-02 14:41:37 +08:00 · 1148c5b47a
commit 1148c5b47a
214 changed files with 19259 additions and 0 deletions
--- a/.babelrc
+++ b/.babelrc
@ -0,0 +1,8 @@
+{
+  "presets": [
+    ["env", { "modules": false }],
+    "stage-2"
+  ],
+  "plugins": ["transform-runtime"],
+  "comments": false
+}
--- a/.editorconfig
+++ b/.editorconfig
@ -0,0 +1,14 @@
+# http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+insert_final_newline = false
+trim_trailing_whitespace = false
--- a/.eslintignore
+++ b/.eslintignore
@ -0,0 +1,3 @@
+build/*.js
+config/*.js
+src/assets
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -0,0 +1,144 @@
+module.exports = {
+    root: true,
+    parser: 'babel-eslint',
+    parserOptions: {
+        sourceType: 'module'
+    },
+    env: {
+        browser: true,
+        node: true,
+        es6: true,
+    },
+    extends: 'eslint:recommended',
+    // required to lint *.vue files
+    plugins: [
+        'html'
+    ],
+    // check if imports actually resolve
+    'settings': {
+        'import/resolver': {
+            'webpack': {
+                'config': 'build/webpack.base.conf.js'
+            }
+        }
+    },
+    // add your custom rules here
+    //it is base on https://github.com/vuejs/eslint-config-vue
+    'rules': {
+        'accessor-pairs': 2,
+        'arrow-spacing': [2, { 'before': true, 'after': true }],
+        'block-spacing': [2, 'always'],
+        'brace-style': [2, '1tbs', { 'allowSingleLine': true }],
+        'camelcase': [0, { 'properties': 'always' }],
+        'comma-dangle': [2, 'never'],
+        'comma-spacing': [2, { 'before': false, 'after': true }],
+        'comma-style': [2, 'last'],
+        'constructor-super': 2,
+        'curly': [2, 'multi-line'],
+        'dot-location': [2, 'property'],
+        'eol-last': 2,
+        'eqeqeq': [2, 'allow-null'],
+        'generator-star-spacing': [2, { 'before': true, 'after': true }],
+        'handle-callback-err': [2, '^(err|error)$' ],
+        'indent': [2, 2, { 'SwitchCase': 1 }],
+        'jsx-quotes': [2, 'prefer-single'],
+        'key-spacing': [2, { 'beforeColon': false, 'afterColon': true }],
+        'keyword-spacing': [2, { 'before': true, 'after': true }],
+        'new-cap': [2, { 'newIsCap': true, 'capIsNew': false }],
+        'new-parens': 2,
+        'no-array-constructor': 2,
+        'no-caller': 2,
+        'no-console': 'off',
+        'no-class-assign': 2,
+        'no-cond-assign': 2,
+        'no-const-assign': 2,
+        'no-control-regex': 2,
+        'no-delete-var': 2,
+        'no-dupe-args': 2,
+        'no-dupe-class-members': 2,
+        'no-dupe-keys': 2,
+        'no-duplicate-case': 2,
+        'no-empty-character-class': 2,
+        'no-empty-pattern': 2,
+        'no-eval': 2,
+        'no-ex-assign': 2,
+        'no-extend-native': 2,
+        'no-extra-bind': 2,
+        'no-extra-boolean-cast': 2,
+        'no-extra-parens': [2, 'functions'],
+        'no-fallthrough': 2,
+        'no-floating-decimal': 2,
+        'no-func-assign': 2,
+        'no-implied-eval': 2,
+        'no-inner-declarations': [2, 'functions'],
+        'no-invalid-regexp': 2,
+        'no-irregular-whitespace': 2,
+        'no-iterator': 2,
+        'no-label-var': 2,
+        'no-labels': [2, { 'allowLoop': false, 'allowSwitch': false }],
+        'no-lone-blocks': 2,
+        'no-mixed-spaces-and-tabs': 2,
+        'no-multi-spaces': 2,
+        'no-multi-str': 2,
+        'no-multiple-empty-lines': [2, { 'max': 1 }],
+        'no-native-reassign': 2,
+        'no-negated-in-lhs': 2,
+        'no-new-object': 2,
+        'no-new-require': 2,
+        'no-new-symbol': 2,
+        'no-new-wrappers': 2,
+        'no-obj-calls': 2,
+        'no-octal': 2,
+        'no-octal-escape': 2,
+        'no-path-concat': 2,
+        'no-proto': 2,
+        'no-redeclare': 2,
+        'no-regex-spaces': 2,
+        'no-return-assign': [2, 'except-parens'],
+        'no-self-assign': 2,
+        'no-self-compare': 2,
+        'no-sequences': 2,
+        'no-shadow-restricted-names': 2,
+        'no-spaced-func': 2,
+        'no-sparse-arrays': 2,
+        'no-this-before-super': 2,
+        'no-throw-literal': 2,
+        'no-trailing-spaces': 2,
+        'no-undef': 2,
+        'no-undef-init': 2,
+        'no-unexpected-multiline': 2,
+        'no-unmodified-loop-condition': 2,
+        'no-unneeded-ternary': [2, { 'defaultAssignment': false }],
+        'no-unreachable': 2,
+        'no-unsafe-finally': 2,
+        'no-unused-vars': [2, { 'vars': 'all', 'args': 'none' }],
+        'no-useless-call': 2,
+        'no-useless-computed-key': 2,
+        'no-useless-constructor': 2,
+        'no-useless-escape': 0,
+        'no-whitespace-before-property': 2,
+        'no-with': 2,
+        'one-var': [2, { 'initialized': 'never' }],
+        'operator-linebreak': [2, 'after', { 'overrides': { '?': 'before', ':': 'before' } }],
+        'padded-blocks': [2, 'never'],
+        'quotes': [2, 'single', { 'avoidEscape': true, 'allowTemplateLiterals': true }],
+        'semi': [2, 'never'],
+        'semi-spacing': [2, { 'before': false, 'after': true }],
+        'space-before-blocks': [2, 'always'],
+        'space-before-function-paren': [2, 'never'],
+        'space-in-parens': [2, 'never'],
+        'space-infix-ops': 2,
+        'space-unary-ops': [2, { 'words': true, 'nonwords': false }],
+        'spaced-comment': [2, 'always', { 'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ','] }],
+        'template-curly-spacing': [2, 'never'],
+        'use-isnan': 2,
+        'valid-typeof': 2,
+        'wrap-iife': [2, 'any'],
+        'yield-star-spacing': [2, 'both'],
+        'yoda': [2, 'never'],
+        'prefer-const': 2,
+        'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
+        'object-curly-spacing': [2, 'always', { objectsInObjects: false }],
+        'array-bracket-spacing': [2, 'never']
+    }
+}
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,11 @@
+.DS_Store
+node_modules/
+dist/
+static/ckeditor
+gifs/
+npm-debug.log
+test/unit/coverage
+test/e2e/reports
+selenium-debug.log
+.idea
+package-lock.json
--- a/.postcssrc.js
+++ b/.postcssrc.js
@ -0,0 +1,8 @@
+// https://github.com/michael-ciniawsky/postcss-load-config
+
+module.exports = {
+  "plugins": {
+    // to edit target browsers: use "browserslist" field in package.json
+    "autoprefixer": {}
+  }
+}
--- a/21
+++ b/21
@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017 PanJiaChen
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
--- a/README-en.md
+++ b/README-en.md
@ -0,0 +1,177 @@
+[![vue](https://img.shields.io/badge/vue-2.4.2-brightgreen.svg)](https://github.com/vuejs/vue)
+[![element-ui](https://img.shields.io/badge/element--ui-1.4.2-brightgreen.svg)](https://github.com/ElemeFE/element)
+[![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE)
+[![GitHub release](https://img.shields.io/github/release/PanJiaChen/vue-element-admin.svg)]()
+
+## Intro
+
+> In the past half year, I have been building a backend for management dashboard using Vue. Though the backend has contained greater than 70 pages and over 10 permissions, it still takes insignificant effort to maintain the project. So I decide to make it open source so as to share my development experience and progress on backend. The tech stack is mainly [Vue.js](https://github.com/vuejs/vue)+[Element](https://github.com/ElemeFE/element)+[axios](https://github.com/mzabriskie/axios). Since it's a personal project, all data requests are simulated with [Mock.js](https://github.com/nuysoft/Mock). **Note:** if anyone wants to modify or develop based on this project, please remove the mock files.
+
+**Live demo:** http://panjiachen.github.io/vue-element-admin
+
+**Note: element-ui@1.4.2 is used in the project, so vue 2.3.0+ is required.**
+
+ - vueAdmin-template: [vueAdmin-template](https://github.com/PanJiaChen/vueAdmin-template)  
+ - electron-vue-admin: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
+ - Donate:[donate](https://github.com/PanJiaChen/vue-element-admin/blob/master/README-en.md#donate)
+
+## Features
+
+- Login/Logout
+- Permission authentication
+- Sidebar
+- Breadcrumb
+- Rich text editor
+- Markdown editor
+- JSON editor
+- Drag & drop list
+- SplitPane
+- Dropzone
+- Sticky
+- CountTo
+- ECharts
+- 401, 404 error page
+- Error log
+- Export Excel
+- Upload Excel
+- Export Zip
+- Table example
+- Interactive table example
+- Drag & drop table example
+- Form example
+- Multi-environments distribution
+- Dashboard
+- Two-factor authentication
+- Collapsing sidebar (support nested routes)
+- Mock data
+- cache tabs example
+- screenfull
+- markdown2html
+- views-tab
+- clipboard
+
+## Development
+
+```bash
+# Clone project
+git clone https://github.com/PanJiaChen/vue-element-admin.git
+
+# Install dependencies
+npm install
+
+# Or (not recommended for cnpm due to unknown bugs, use taobao mirror instead)
+npm install --registry=https://registry.npm.taobao.org
+
+# Run local dev server
+npm run dev
+```
+
+Visit in browser: http://localhost:9527
+
+## Distribution
+
+```bash
+# Build staged environment with webpack-bundle-analyzer
+npm run build:sit-preview
+
+# Build production environment
+npm run build:prod
+```
+
+## Directory structure
+
+```
+├── build                      // build 
+├── config                     // config
+├── src                        // source code
+│   ├── api                    // all requests
+│   ├── assets                 // static resource like themes, fonts
+│   ├── components             // global public components
+│   ├── directive              // global directive
+│   ├── filters                // global filters
+│   ├── mock                   // mock data
+│   ├── router                 // router
+│   ├── store                  // global status management
+│   ├── styles                 // global styles
+│   ├── utils                  // global public functions
+│   ├── view                   // view
+│   ├── App.vue                // entry view
+│   └── main.js                // entry for loading components, initialization
+├── static                     // third-party libraries not packed with Webpack
+│   └── Tinymce                // rich text
+├── .babelrc                   // babel-loader config
+├── eslintrc.js                // eslint config
+├── .gitignore                 // gitignore
+├── favicon.ico                // favicon
+├── index.html                 // html template
+└── package.json               // package.json
+```
+
+## Changelog
+Detailed changes for each release are documented in the [release notes](https://github.com/PanJiaChen/vue-element-admin/releases).
+
+## Donate
+If you find this project useful, you can buy me a cup of coffee
+![donate](https://panjiachen.github.io/donate/donation.png)
+
+## State Management
+
+Only status of user and app configuration is managed by Vuex. Other data are managed by their own business pages.
+
+## Demo
+
+#### Two-factor authentication, supporting WeChat and QQ
+
+![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/2login.gif)
+
+#### Realtime switching themes
+
+![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/theme.gif)
+
+#### tabs
+
+![tabs](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/tabs.gif)<br />
+
+#### Collapsing sidebar
+
+![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/leftmenu.gif)
+
+#### Drag & drop table
+
+![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/order.gif)
+
+#### Interactive table
+
+![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/dynamictable.gif)
+
+#### Uploading cropped avatar
+
+![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/uploadAvatar.gif)
+
+#### Error log
+
+![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/errorlog.gif)
+
+#### Rich text (integrated with Qiniu, watermark and customization)
+
+![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/editor.gif)
+
+#### Packaging table component
+
+![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/table.gif)
+
+#### Charts
+
+![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/echarts.gif)
+
+#### Exporting to Excel
+
+![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/excel.png)
+
+#### More
+
+http://panjiachen.github.io/vue-element-admin
+
+## License
+
+MIT
--- a/README.md
+++ b/README.md
@ -0,0 +1,211 @@
+# vue-element-admin #
+
+[![vue](https://img.shields.io/badge/vue-2.4.2-brightgreen.svg)](https://github.com/vuejs/vue)
+[![element-ui](https://img.shields.io/badge/element--ui-1.4.2-brightgreen.svg)](https://github.com/ElemeFE/element)
+[![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE)
+[![GitHub release](https://img.shields.io/github/release/PanJiaChen/vue-element-admin.svg)]()
+
+
+[线上地址](http://panjiachen.github.io/vue-element-admin)
+
+[English Document](https://github.com/PanJiaChen/vue-element-admin/blob/master/README-en.md)
+
+[wiki](https://github.com/PanJiaChen/vue-element-admin/wiki)
+
+[donate](https://github.com/PanJiaChen/vue-element-admin#donate)
+
+**本项目的定位是后台集成方案，不适合当基础模板来开发。**
+ - 模板建议使用: [vueAdmin-template](https://github.com/PanJiaChen/vueAdmin-template)  
+ - 桌面端: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
+
+
+
+**注意：该项目目前使用element-ui@1.4.2版本，所以最低兼容 Vue 2.3.0**
+
+## 前言
+> 这半年来一直在用vue写管理后台，目前后台已经有百来个页面，十几种权限，但维护成本依然很低，所以准备开源分享一下后台开发的经验和成果。目前的技术栈主要的采用vue+element+axios由webpack2打包。由于是个人项目，所以数据请求都是用了mockjs模拟。注意：在此项目基础上改造开发时请移除mock文件。
+
+
+写了一个系列的教程配套文章，如何从零构建后一个完整的后台项目:
+
+ - [wiki](https://github.com/PanJiaChen/vue-element-admin/wiki)
+ - [手摸手，带你用 vue 撸后台 系列一(基础篇)](https://juejin.im/post/59097cd7a22b9d0065fb61d2)
+ - [手摸手，带你用 vue 撸后台 系列二(登录权限篇)](https://juejin.im/post/591aa14f570c35006961acac)
+ - [手摸手，带你用 vue 撸后台 系列三 (实战篇)](https://juejin.im/post/593121aa0ce4630057f70d35)
+ - [手摸手，带你用vue撸后台 系列四(vueAdmin 一个极简的后台基础模板)](https://juejin.im/post/595b4d776fb9a06bbe7dba56)
+ - [手摸手，带你封装一个vue component](https://segmentfault.com/a/1190000009090836)
+
+ 相应需求，开了一个qq群 `591724180` 方便大家交流
+
+ 或者可以加入该 **[圈子](https://jianshiapp.com/circles/1209)** 讨论问题
+
+ **如有问题请先看上述文章和Wiki，若不能满足，欢迎 issue 和 pr**
+
+ **该项目并不是一个脚手架，更倾向于是一个集成解决方案**
+
+ **该项目不支持低版本游览器(如ie)，有需求请自行添加polyfill [详情](https://github.com/PanJiaChen/vue-element-admin/wiki#babel-polyfill)**
+
+
+## 功能
+- 登录/注销
+- 权限验证
+- 侧边栏
+- 面包屑
+- 富文本编辑器
+- Markdown编辑器
+- JSON编辑器
+- 列表拖拽
+- plitPane
+- Dropzone
+- Sticky
+- CountTo
+- echarts图表
+- 401，404错误页面
+- 错误日志
+- 导出excel
+- zip
+- 前端可视化excel
+- table example
+- 动态table example
+- 拖拽table example
+- 内联编辑table example
+- form example
+- 多环境发布
+- dashboard
+- 二次登录
+- 动态侧边栏（支持多级路由）
+- mock数据
+- cache tabs example
+- screenfull
+- markdown2html
+- views-tab
+- clipboard
+
+
+## 开发
+```bash
+    # 克隆项目
+    git clone https://github.com/PanJiaChen/vue-element-admin.git
+
+    # 安装依赖
+    npm install
+    //or # 建议不要用cnpm  安装有各种诡异的bug 可以通过如下操作解决npm速度慢的问题
+    npm install --registry=https://registry.npm.taobao.org
+
+    # 本地开发 开启服务
+    npm run dev
+```
+浏览器访问 http://localhost:9527
+
+## 发布
+```bash
+    # 发布测试环境 带webpack ananalyzer
+    npm run build:sit-preview
+
+    # 构建生成环境
+    npm run build:prod
+```
+
+## 目录结构
+```shell
+├── build                      // 构建相关  
+├── config                     // 配置相关
+├── src                        // 源代码
+│   ├── api                    // 所有请求
+│   ├── assets                 // 主题 字体等静态资源
+│   ├── components             // 全局公用组件
+│   ├── directive              // 全局指令
+│   ├── filtres                // 全局filter
+│   ├── mock                   // mock数据
+│   ├── router                 // 路由
+│   ├── store                  // 全局store管理
+│   ├── styles                 // 全局样式
+│   ├── utils                  // 全局公用方法
+│   ├── view                   // view
+│   ├── App.vue                // 入口页面
+│   └── main.js                // 入口 加载组件 初始化等
+├── static                     // 第三方不打包资源
+│   └── Tinymce                // 富文本
+├── .babelrc                   // babel-loader 配置
+├── eslintrc.js                // eslint 配置项
+├── .gitignore                 // git 忽略项
+├── favicon.ico                // favicon图标
+├── index.html                 // html模板
+└── package.json               // package.json
+
+```
+
+## Changelog
+Detailed changes for each release are documented in the [release notes](https://github.com/PanJiaChen/vue-element-admin/releases).
+
+## Donate
+If you find this project useful, you can buy me a cup of coffee
+![donate](https://panjiachen.github.io/donate/donation.png)
+
+## 状态管理
+后台只有user和app配置相关状态使用vuex存在全局，其它数据都由每个业务页面自己管理。
+
+
+## 效果图
+
+#### 两步验证登录 支持微信和qq
+
+![两步验证 here](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/2login.gif)
+
+#### 真正的动态换肤
+
+![真正的动态换肤](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/theme.gif)<br />
+
+#### tabs
+
+![tabs](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/tabs.gif)<br />
+
+
+
+#### 可收起侧边栏
+
+![enter image description here](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/leftmenu.gif)
+
+#### table拖拽排序
+
+![enter image description here](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/order.gif)
+
+
+#### 动态table
+
+![enter image description here](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/dynamictable.gif)
+
+
+#### 上传裁剪头像
+
+![enter image description here](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/uploadAvatar.gif)
+
+
+#### 错误统计
+
+![enter image description here](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/errorlog.gif)
+
+
+#### 富文本(整合七牛 打水印等个性化功能)
+
+![enter image description here](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/editor.gif)
+
+#### 封装table组件
+
+![enter image description here](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/table.gif)
+
+#### 图表
+
+![enter image description here](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/echarts.gif)
+
+
+#### 导出excel
+
+![enter image description here](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/excel.png)
+
+
+## [查看更多demo](http://panjiachen.github.io/vue-element-admin)
+
+## License
+
+MIT
--- a/build/build.js
+++ b/build/build.js
@ -0,0 +1,39 @@
+require('./check-versions')();
+var server = require('pushstate-server');
+var opn = require('opn')
+var ora = require('ora')
+var rm = require('rimraf')
+var path = require('path')
+var chalk = require('chalk')
+var webpack = require('webpack');
+var config = require('../config');
+var webpackConfig = require('./webpack.prod.conf');
+
+var spinner = ora('building for ' + process.env.NODE_ENV + ' of ' + process.env.env_config+ ' mode...' )
+spinner.start()
+
+
+rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
+    if (err) throw err
+    webpack(webpackConfig, function (err, stats) {
+        spinner.stop()
+        if (err) throw err
+        process.stdout.write(stats.toString({
+                colors: true,
+                modules: false,
+                children: false,
+                chunks: false,
+                chunkModules: false
+            }) + '\n\n')
+
+        console.log(chalk.cyan('  Build complete.\n'))
+        if(process.env.npm_config_preview){
+            server.start({
+                port: 9528,
+                directory: './dist',
+                file: '/index.html'
+            });
+            console.log('> Listening at ' +  'http://localhost:9528' + '\n')
+        }
+    })
+})
--- a/build/check-versions.js
+++ b/build/check-versions.js
@ -0,0 +1,45 @@
+var chalk = require('chalk')
+var semver = require('semver')
+var packageConfig = require('../package.json')
+
+function exec(cmd) {
+    return require('child_process').execSync(cmd).toString().trim()
+}
+
+var versionRequirements = [
+    {
+        name: 'node',
+        currentVersion: semver.clean(process.version),
+        versionRequirement: packageConfig.engines.node
+    },
+    {
+        name: 'npm',
+        currentVersion: exec('npm --version'),
+        versionRequirement: packageConfig.engines.npm
+    }
+]
+
+module.exports = function () {
+    var warnings = []
+    for (var i = 0; i < versionRequirements.length; i++) {
+        var mod = versionRequirements[i]
+        if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
+            warnings.push(mod.name + ': ' +
+                chalk.red(mod.currentVersion) + ' should be ' +
+                chalk.green(mod.versionRequirement)
+            )
+        }
+    }
+
+    if (warnings.length) {
+        console.log('')
+        console.log(chalk.yellow('To use this template, you must update following to modules:'))
+        console.log()
+        for (var i = 0; i < warnings.length; i++) {
+            var warning = warnings[i]
+            console.log('  ' + warning)
+        }
+        console.log()
+        process.exit(1)
+    }
+}
--- a/build/dev-client.js
+++ b/build/dev-client.js
@ -0,0 +1,9 @@
+/* eslint-disable */
+require('eventsource-polyfill')
+var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')
+
+hotClient.subscribe(function (event) {
+  if (event.action === 'reload') {
+    window.location.reload()
+  }
+})
--- a/build/dev-server.js
+++ b/build/dev-server.js
@ -0,0 +1,91 @@
+require('./check-versions')(); // 检查 Node 和 npm 版本
+
+var config = require('../config');
+if (!process.env.NODE_ENV) {
+    process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
+}
+
+var opn = require('opn')
+var path = require('path');
+var express = require('express');
+var webpack = require('webpack');
+var proxyMiddleware = require('http-proxy-middleware');
+var webpackConfig = require('./webpack.dev.conf');
+
+// default port where dev server listens for incoming traffic
+var port = process.env.PORT || config.dev.port;
+// automatically open browser, if not set will be false
+var autoOpenBrowser = !!config.dev.autoOpenBrowser;
+// Define HTTP proxies to your custom API backend
+// https://github.com/chimurai/http-proxy-middleware
+var proxyTable = config.dev.proxyTable;
+
+var app = express();
+var compiler = webpack(webpackConfig);
+
+var devMiddleware = require('webpack-dev-middleware')(compiler, {
+    publicPath: webpackConfig.output.publicPath,
+    quiet: true
+});
+
+var hotMiddleware = require('webpack-hot-middleware')(compiler, {
+    log: false,
+    heartbeat: 2000
+});
+
+// force page reload when html-webpack-plugin template changes
+compiler.plugin('compilation', function (compilation) {
+    compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
+        hotMiddleware.publish({action: 'reload'});
+        cb()
+    })
+});
+
+// proxy api requests
+Object.keys(proxyTable).forEach(function (context) {
+    var options = proxyTable[context]
+    if (typeof options === 'string') {
+        options = {target: options}
+    }
+    app.use(proxyMiddleware(options.filter || context, options))
+});
+
+// handle fallback for HTML5 history API
+app.use(require('connect-history-api-fallback')());
+
+// serve webpack bundle output
+app.use(devMiddleware);
+
+// enable hot-reload and state-preserving
+// compilation error display
+app.use(hotMiddleware);
+
+// serve pure static assets
+var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory);
+app.use(staticPath, express.static('./static'));
+
+var uri = 'http://localhost:' + port
+
+var _resolve
+var readyPromise = new Promise(resolve => {
+  _resolve = resolve
+})
+
+console.log('> Starting dev server...')
+devMiddleware.waitUntilValid(() => {
+  console.log('> Listening at ' + uri + '\n')
+  // when env is testing, don't need open it
+  if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
+    opn(uri)
+  }
+  _resolve()
+})
+
+var server = app.listen(port)
+
+module.exports = {
+  ready: readyPromise,
+  close: () => {
+    server.close()
+  }
+}
--- a/build/utils.js
+++ b/build/utils.js
@ -0,0 +1,71 @@
+var path = require('path')
+var config = require('../config')
+var ExtractTextPlugin = require('extract-text-webpack-plugin')
+
+exports.assetsPath = function (_path) {
+  var assetsSubDirectory = process.env.NODE_ENV === 'production'
+    ? config.build.assetsSubDirectory
+    : config.dev.assetsSubDirectory
+  return path.posix.join(assetsSubDirectory, _path)
+}
+
+exports.cssLoaders = function (options) {
+  options = options || {}
+
+  var cssLoader = {
+    loader: 'css-loader',
+    options: {
+      minimize: process.env.NODE_ENV === 'production',
+      sourceMap: options.sourceMap
+    }
+  }
+
+  // generate loader string to be used with extract text plugin
+  function generateLoaders (loader, loaderOptions) {
+    var loaders = [cssLoader]
+    if (loader) {
+      loaders.push({
+        loader: loader + '-loader',
+        options: Object.assign({}, loaderOptions, {
+          sourceMap: options.sourceMap
+        })
+      })
+    }
+
+    // Extract CSS when that option is specified
+    // (which is the case during production build)
+    if (options.extract) {
+      return ExtractTextPlugin.extract({
+        use: loaders,
+        fallback: 'vue-style-loader'
+      })
+    } else {
+      return ['vue-style-loader'].concat(loaders)
+    }
+  }
+
+  // https://vue-loader.vuejs.org/en/configurations/extract-css.html
+  return {
+    css: generateLoaders(),
+    postcss: generateLoaders(),
+    less: generateLoaders('less'),
+    sass: generateLoaders('sass', { indentedSyntax: true }),
+    scss: generateLoaders('sass'),
+    stylus: generateLoaders('stylus'),
+    styl: generateLoaders('stylus')
+  }
+}
+
+// Generate loaders for standalone style files (outside of .vue)
+exports.styleLoaders = function (options) {
+  var output = []
+  var loaders = exports.cssLoaders(options)
+  for (var extension in loaders) {
+    var loader = loaders[extension]
+    output.push({
+      test: new RegExp('\\.' + extension + '$'),
+      use: loader
+    })
+  }
+  return output
+}
--- a/build/vue-loader.conf.js
+++ b/build/vue-loader.conf.js
@ -0,0 +1,12 @@
+var utils = require('./utils')
+var config = require('../config')
+var isProduction = process.env.NODE_ENV === 'production'
+
+module.exports = {
+    loaders: utils.cssLoaders({
+        sourceMap: isProduction
+            ? config.build.productionSourceMap
+            : config.dev.cssSourceMap,
+        extract: isProduction
+    })
+}
--- a/build/webpack.base.conf.js
+++ b/build/webpack.base.conf.js
@ -0,0 +1,92 @@
+var path = require('path')
+var utils = require('./utils')
+var config = require('../config')
+var vueLoaderConfig = require('./vue-loader.conf')
+
+function resolve(dir) {
+  return path.join(__dirname, '..', dir)
+}
+
+module.exports = {
+  entry: {
+    app: './src/main.js'
+  },
+  output: {
+    path: config.build.assetsRoot,
+    filename: '[name].js',
+    publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath
+  },
+  resolve: {
+    extensions: ['.js', '.vue', '.json'],
+    alias: {
+      'vue$': 'vue/dist/vue.esm.js',
+      '@': resolve('src'),
+      'src': path.resolve(__dirname, '../src'),
+      'assets': path.resolve(__dirname, '../src/assets'),
+      'components': path.resolve(__dirname, '../src/components'),
+      'views': path.resolve(__dirname, '../src/views'),
+      'styles': path.resolve(__dirname, '../src/styles'),
+      'api': path.resolve(__dirname, '../src/api'),
+      'utils': path.resolve(__dirname, '../src/utils'),
+      'store': path.resolve(__dirname, '../src/store'),
+      'router': path.resolve(__dirname, '../src/router'),
+      'mock': path.resolve(__dirname, '../src/mock'),
+      'vendor': path.resolve(__dirname, '../src/vendor'),
+      'static': path.resolve(__dirname, '../static')
+    }
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(js|vue)$/,
+        loader: 'eslint-loader',
+        enforce: "pre",
+        include: [resolve('src'), resolve('test')],
+        options: {
+            formatter: require('eslint-friendly-formatter')
+        }
+      },
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: vueLoaderConfig
+      },
+      {
+        test: /\.js$/,
+        loader: 'babel-loader?cacheDirectory',
+        include: [resolve('src'), resolve('test')]
+      },
+      {
+        test: /\.svg$/,
+        loader: 'svg-sprite-loader',
+        include: [resolve('src/icons')],
+        options: {
+          symbolId: 'icon-[name]'
+        }
+      },
+      {
+        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+        loader: 'url-loader',
+        exclude: [resolve('src/icons')],
+        options: {
+          limit: 10000,
+          name: utils.assetsPath('img/[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
+        }
+      }
+    ]
+  },
+  //注入全局mixin
+  // sassResources: path.join(__dirname, '../src/styles/mixin.scss'),
+  // sassLoader: {
+  //     data:  path.join(__dirname, '../src/styles/index.scss')
+  // },
+}
+
--- a/build/webpack.dev.conf.js
+++ b/build/webpack.dev.conf.js
@ -0,0 +1,46 @@
+var utils = require('./utils')
+var path = require('path')
+var webpack = require('webpack')
+var config = require('../config')
+var merge = require('webpack-merge')
+var baseWebpackConfig = require('./webpack.base.conf')
+var HtmlWebpackPlugin = require('html-webpack-plugin')
+var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
+
+// add hot-reload related code to entry chunks
+Object.keys(baseWebpackConfig.entry).forEach(function (name) {
+  baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
+})
+
+function resolveApp(relativePath) {
+  return path.resolve(relativePath);
+}
+
+module.exports = merge(baseWebpackConfig, {
+  module: {
+    rules: utils.styleLoaders({
+      sourceMap: config.dev.cssSourceMap
+    })
+  },
+  // cheap-source-map is faster for development
+  devtool: '#cheap-source-map',
+  cache: true,
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env': config.dev.env
+    }),
+    // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NoEmitOnErrorsPlugin(),
+    // https://github.com/ampedandwired/html-webpack-plugin
+    new HtmlWebpackPlugin({
+      filename: 'index.html',
+      template: 'index.html',
+      favicon: resolveApp('favicon.ico'),
+      inject: true,
+      path: config.dev.assetsPublicPath + config.dev.assetsSubDirectory
+    }),
+    new FriendlyErrorsPlugin()
+  ]
+})
+
--- a/build/webpack.prod.conf.js
+++ b/build/webpack.prod.conf.js
@ -0,0 +1,127 @@
+var path = require('path')
+var utils = require('./utils')
+var webpack = require('webpack')
+var config = require('../config')
+var merge = require('webpack-merge')
+var baseWebpackConfig = require('./webpack.base.conf')
+var CopyWebpackPlugin = require('copy-webpack-plugin')
+var HtmlWebpackPlugin = require('html-webpack-plugin')
+var ExtractTextPlugin = require('extract-text-webpack-plugin')
+var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
+
+var env = config.build[process.env.env_config+'Env']
+
+function resolveApp(relativePath) {
+  return path.resolve(relativePath);
+}
+
+var webpackConfig = merge(baseWebpackConfig, {
+  module: {
+    rules: utils.styleLoaders({
+      sourceMap: config.build.productionSourceMap,
+      extract: true
+    })
+  },
+  devtool: config.build.productionSourceMap ? '#source-map' : false,
+  output: {
+    path: config.build.assetsRoot,
+    filename: utils.assetsPath('js/[name].[chunkhash].js'),
+    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js'),
+    publicPath: config.build.assetsPublicPath
+  },
+  plugins: [
+    // http://vuejs.github.io/vue-loader/en/workflow/production.html
+    new webpack.DefinePlugin({
+      'process.env': env
+    }),
+    new webpack.optimize.UglifyJsPlugin({
+      compress: {
+        warnings: false
+      },
+      sourceMap: true
+    }),
+    // extract css into its own file
+    new ExtractTextPlugin({
+      filename: utils.assetsPath('css/[name].[contenthash].css')
+    }),
+    // Compress extracted CSS. We are using this plugin so that possible
+    // duplicated CSS from different components can be deduped.
+    new OptimizeCSSPlugin(),
+    // generate dist index.html with correct asset hash for caching.
+    // you can customize output by editing /index.html
+    // see https://github.com/ampedandwired/html-webpack-plugin
+    new HtmlWebpackPlugin({
+      filename: 'index.html',
+      template: 'index.html',
+      inject: true,
+      favicon: resolveApp('favicon.ico'),
+      minify: {
+        removeComments: true,
+        collapseWhitespace: true,
+        removeRedundantAttributes: true,
+        useShortDoctype: true,
+        removeEmptyAttributes: true,
+        removeStyleLinkTypeAttributes: true,
+        keepClosingSlash: true,
+        minifyJS: true,
+        minifyCSS: true,
+        minifyURLs: true
+      },
+      path: config.build.assetsPublicPath + config.build.assetsSubDirectory,
+      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
+      chunksSortMode: 'dependency'
+    }),
+    // cache Module Identifiers
+    new webpack.HashedModuleIdsPlugin(),
+    // split vendor js into its own file
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'vendor',
+      minChunks: function (module, count) {
+        // any required modules inside node_modules are extracted to vendor
+        return (
+          module.resource &&
+          /\.js$/.test(module.resource) &&
+          module.resource.indexOf(
+            path.join(__dirname, '../node_modules')
+          ) === 0
+        )
+      }
+    }),
+    // split echarts into its own file
+    new webpack.optimize.CommonsChunkPlugin({
+      async: 'echarts',
+      minChunks(module) {
+        var context = module.context;
+        return context && (context.indexOf('echarts') >= 0 || context.indexOf('zrender') >= 0);
+      }
+    }),
+    // split xlsx into its own file
+    new webpack.optimize.CommonsChunkPlugin({
+      async: 'xlsx',
+      minChunks(module) {
+        var context = module.context;
+        return context && (context.indexOf('xlsx') >= 0);
+      }
+    }),
+    // extract webpack runtime and module manifest to its own file in order to
+    // prevent vendor hash from being updated whenever app bundle is updated
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'manifest',
+      chunks: ['vendor']
+    }),
+    // copy custom static assets
+    new CopyWebpackPlugin([{
+      from: path.resolve(__dirname, '../static'),
+      to: config.build.assetsSubDirectory,
+      ignore: ['.*']
+    }])
+  ]
+})
+
+if (config.build.bundleAnalyzerReport) {
+  var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
+}
+
+module.exports = webpackConfig
+
--- a/config/dev.env.js
+++ b/config/dev.env.js
@ -0,0 +1,6 @@
+module.exports = {
+    NODE_ENV: '"development"',
+    ENV_CONFIG: '"dev"',
+    BASE_API: '"http://localhost:1000"',
+    APP_ORIGIN: '"https://wallstreetcn.com"'
+}
--- a/config/index.js
+++ b/config/index.js
@ -0,0 +1,35 @@
+// see http://vuejs-templates.github.io/webpack for documentation.
+var path = require('path')
+
+module.exports = {
+    build: {
+			sitEnv: require('./sit.env'),
+			prodEnv: require('./prod.env'),
+			index: path.resolve(__dirname, '../dist/index.html'),
+			assetsRoot: path.resolve(__dirname, '../dist'),
+			assetsSubDirectory: 'static',
+			assetsPublicPath: './',          //请根据自己路径配置更改
+			productionSourceMap: false,
+			// Gzip off by default as many popular static hosts such as
+			// Surge or Netlify already gzip all static assets for you.
+			// Before setting to `true`, make sure to:
+			// npm install --save-dev compression-webpack-plugin
+			productionGzip: false,
+			productionGzipExtensions: ['js', 'css'],
+			// Run the build command with an extra argument to
+			// View the bundle analyzer report after build finishes:
+			// `npm run build --report`
+			// Set to `true` or `false` to always turn it on or off
+			bundleAnalyzerReport: process.env.npm_config_report
+    },
+    dev: {
+			env: require('./dev.env'),
+			port: 9527,
+			autoOpenBrowser: true,
+			assetsSubDirectory: 'static',
+			assetsPublicPath: '/',
+			proxyTable: {
+      },
+			cssSourceMap: false
+    }
+}
--- a/config/prod.env.js
+++ b/config/prod.env.js
@ -0,0 +1,6 @@
+module.exports = {
+    NODE_ENV: '"production"',
+    ENV_CONFIG: '"prod"',
+    BASE_API: '"https://api-prod"',
+    APP_ORIGIN: '"https://wallstreetcn.com"'
+};
--- a/config/sit.env.js
+++ b/config/sit.env.js
@ -0,0 +1,6 @@
+module.exports = {
+    NODE_ENV: '"production"',
+    ENV_CONFIG: '"sit"',
+    BASE_API: '"https://api-sit"',
+    APP_ORIGIN: '"https://wallstreetcn.com"'
+};
--- a/favicon.ico
+++ b/favicon.ico
--- a/index.html
+++ b/index.html
@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="renderer" content="webkit">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+    <title>Juicy</title>
+</head>
+<body>
+<script src=<%= htmlWebpackPlugin.options.path %>/tinymce/tinymce.min.js></script>
+<div id="app"></div>
+<!-- built files will be auto injected -->
+</body>
+</html>
--- a/package.json
+++ b/package.json
@ -0,0 +1,100 @@
+{
+  "name": "juicy",
+  "version": "2.2.1",
+  "description": "A Vue.js admin",
+  "author": "Pan <panfree23@gmail.com>",
+  "license": "MIT",
+  "private": true,
+  "scripts": {
+    "dev": "node build/dev-server.js",
+    "build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js",
+    "build:sit": "cross-env NODE_ENV=production env_config=sit node build/build.js",
+    "build:sit-preview": "cross-env NODE_ENV=production env_config=sit npm_config_preview=true  npm_config_report=true node build/build.js",
+    "lint": "eslint --ext .js,.vue src"
+  },
+  "dependencies": {
+    "axios": "0.16.2",
+    "clipboard": "1.7.1",
+    "codemirror": "5.26.0",
+    "dropzone": "5.1.0",
+    "echarts": "3.7.2",
+    "element-ui": "1.4.2",
+    "file-saver": "1.3.3",
+    "js-cookie": "2.1.4",
+    "jsonlint": "1.6.2",
+    "mockjs": "1.0.1-beta3",
+    "normalize.css": "7.0.0",
+    "nprogress": "0.2.0",
+    "screenfull": "3.2.2",
+    "showdown": "1.7.1",
+    "simplemde": "1.11.2",
+    "sortablejs": "1.5.1",
+    "vue": "2.4.2",
+    "vue-count-to": "1.0.5",
+    "vue-multiselect": "2.0.2",
+    "vue-router": "2.7.0",
+    "vue-splitpane": "^1.0.0",
+    "vuedraggable": "2.14.1",
+    "vuex": "2.3.1",
+    "xlsx": "^0.10.8",
+    "jszip": "^3.1.4"
+  },
+  "devDependencies": {
+    "autoprefixer": "7.1.1",
+    "babel-core": "6.25.0",
+    "babel-eslint": "7.2.3",
+    "babel-loader": "7.0.0",
+    "babel-plugin-transform-runtime": "6.23.0",
+    "babel-preset-env": "1.5.2",
+    "babel-preset-stage-2": "6.24.1",
+    "babel-register": "6.24.1",
+    "chalk": "1.1.3",
+    "connect-history-api-fallback": "1.3.0",
+    "copy-webpack-plugin": "4.0.1",
+    "cross-env": "5.0.1",
+    "css-loader": "0.28.4",
+    "eslint": "3.19.0",
+    "eslint-friendly-formatter": "3.0.0",
+    "eslint-import-resolver-webpack": "0.8.1",
+    "eslint-loader": "1.7.1",
+    "eslint-plugin-html": "3.0.0",
+    "eslint-plugin-import": "2.3.0",
+    "eventsource-polyfill": "0.9.6",
+    "express": "4.15.3",
+    "extract-text-webpack-plugin": "2.1.2",
+    "file-loader": "0.11.2",
+    "friendly-errors-webpack-plugin": "1.6.1",
+    "function-bind": "1.1.0",
+    "html-webpack-plugin": "2.28.0",
+    "http-proxy-middleware": "0.17.4",
+    "node-sass": "^4.5.0",
+    "opn": "4.0.2",
+    "optimize-css-assets-webpack-plugin": "1.3.0",
+    "ora": "1.1.0",
+    "pushstate-server": "2.1.0",
+    "rimraf": "2.6.0",
+    "sass-loader": "6.0.5",
+    "script-loader": "0.7.0",
+    "semver": "5.3.0",
+    "style-loader": "0.17.0",
+    "svg-sprite-loader": "3.2.4",
+    "url-loader": "0.5.8",
+    "vue-loader": "13.0.4",
+    "vue-style-loader": "3.0.1",
+    "vue-template-compiler": "2.4.2",
+    "webpack": "2.6.1",
+    "webpack-bundle-analyzer": "2.8.2",
+    "webpack-dev-middleware": "1.10.2",
+    "webpack-hot-middleware": "2.18.0",
+    "webpack-merge": "4.1.0"
+  },
+  "engines": {
+    "node": ">= 4.0.0",
+    "npm": ">= 3.0.0"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 8"
+  ]
+}
--- a/src/App.vue
+++ b/src/App.vue
@ -0,0 +1,16 @@
+<template>
+	<div id="app">
+		<router-view></router-view>
+	</div>
+</template>
+
+<script>
+  export default{
+    name: 'APP'
+  }
+</script>
+
+<style lang="scss">
+@import '~normalize.css/normalize.css';// normalize.css 样式格式化
+@import './styles/index.scss'; // 全局自定义的css样式
+</style>
--- a/src/api/article.js
+++ b/src/api/article.js
@ -0,0 +1,25 @@
+import fetch from '@/utils/fetch'
+
+export function fetchList(query) {
+  return fetch({
+    url: '/article/list',
+    method: 'get',
+    params: query
+  })
+}
+
+export function fetchArticle() {
+  return fetch({
+    url: '/article/detail',
+    method: 'get'
+  })
+}
+
+export function fetchPv(pv) {
+  return fetch({
+    url: '/article/pv',
+    method: 'get',
+    params: { pv }
+  })
+}
+
--- a/src/api/login.js
+++ b/src/api/login.js
@ -0,0 +1,36 @@
+import fetch from '@/utils/fetch'
+
+export function loginByUsername(username, password) {
+  var grant_type = 'password'
+  var scope = 'server'
+
+  return fetch({
+    url: '/auth/oauth/token',
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded',
+      'Authorization': 'Basic cGlnOnBpZw=='
+    },
+    method: 'post',
+    params: { username, password, grant_type, scope },
+    mode: 'cors'
+  })
+}
+
+export function logout() {
+  return fetch({
+    url: '/login/logout',
+    method: 'post'
+  })
+}
+
+export function getUserInfo(token) {
+  return fetch({
+    url: '/admin/user',
+    headers: {
+      'Authorization': 'Bearer ' + token
+    },
+    method: 'get',
+    mode: 'cors'
+  })
+}
+
--- a/src/api/qiniu.js
+++ b/src/api/qiniu.js
@ -0,0 +1,8 @@
+import fetch from '@/utils/fetch'
+
+export function getToken() {
+  return fetch({
+    url: '/qiniu/upload/token', // 假地址 自行替换
+    method: 'get'
+  })
+}
--- a/src/api/remoteSearch.js
+++ b/src/api/remoteSearch.js
@ -0,0 +1,9 @@
+import fetch from '@/utils/fetch'
+
+export function userSearch(name) {
+  return fetch({
+    url: '/search/user',
+    method: 'get',
+    params: { name }
+  })
+}
--- a/src/assets/401_images/401.gif
+++ b/src/assets/401_images/401.gif
--- a/src/assets/404_images/404.png
+++ b/src/assets/404_images/404.png
--- a/src/assets/404_images/404_cloud.png
+++ b/src/assets/404_images/404_cloud.png
--- a/src/assets/custom-theme/fonts/element-icons.ttf
+++ b/src/assets/custom-theme/fonts/element-icons.ttf
--- a/src/assets/custom-theme/fonts/element-icons.woff
+++ b/src/assets/custom-theme/fonts/element-icons.woff
--- a/src/assets/custom-theme/index.css
+++ b/src/assets/custom-theme/index.css
--- a/src/assets/echarts-macarons.js
+++ b/src/assets/echarts-macarons.js
@ -0,0 +1,199 @@
+/* eslint-disable */
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        // AMD. Register as an anonymous module.
+        define(['exports', 'echarts'], factory);
+    } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
+        // CommonJS
+        factory(exports, require('echarts'));
+    } else {
+        // Browser globals
+        factory({}, root.echarts);
+    }
+}(this, function (exports, echarts) {
+    var log = function (msg) {
+        if (typeof console !== 'undefined') {
+            console && console.error && console.error(msg);
+        }
+    };
+    if (!echarts) {
+        log('ECharts is not Loaded');
+        return;
+    }
+
+    var colorPalette = [
+        '#2ec7c9','#b6a2de','#5ab1ef','#ffb980','#d87a80',
+        '#8d98b3','#e5cf0d','#97b552','#95706d','#dc69aa',
+        '#07a2a4','#9a7fd1','#588dd5','#f5994e','#c05050',
+        '#59678c','#c9ab00','#7eb00a','#6f5553','#c14089'
+    ];
+
+
+    var theme = {
+        color: colorPalette,
+
+        title: {
+            textStyle: {
+                fontWeight: 'normal',
+                color: '#008acd'
+            }
+        },
+
+        visualMap: {
+            itemWidth: 15,
+            color: ['#5ab1ef','#e0ffff']
+        },
+
+        toolbox: {
+            iconStyle: {
+                normal: {
+                    borderColor: colorPalette[0]
+                }
+            }
+        },
+
+        tooltip: {
+            backgroundColor: 'rgba(50,50,50,0.5)',
+            axisPointer : {
+                type : 'line',
+                lineStyle : {
+                    color: '#008acd'
+                },
+                crossStyle: {
+                    color: '#008acd'
+                },
+                shadowStyle : {
+                    color: 'rgba(200,200,200,0.2)'
+                }
+            }
+        },
+
+        dataZoom: {
+            dataBackgroundColor: '#efefff',
+            fillerColor: 'rgba(182,162,222,0.2)',
+            handleColor: '#008acd'
+        },
+
+        grid: {
+            borderColor: '#eee'
+        },
+
+        categoryAxis: {
+            axisLine: {
+                lineStyle: {
+                    color: '#008acd'
+                }
+            },
+            splitLine: {
+                lineStyle: {
+                    color: ['#eee']
+                }
+            }
+        },
+
+        valueAxis: {
+            axisLine: {
+                lineStyle: {
+                    color: '#008acd'
+                }
+            },
+            splitArea : {
+                show : true,
+                areaStyle : {
+                    color: ['rgba(250,250,250,0.1)','rgba(200,200,200,0.1)']
+                }
+            },
+            splitLine: {
+                lineStyle: {
+                    color: ['#eee']
+                }
+            }
+        },
+
+        timeline : {
+            lineStyle : {
+                color : '#008acd'
+            },
+            controlStyle : {
+                normal : { color : '#008acd'},
+                emphasis : { color : '#008acd'}
+            },
+            symbol : 'emptyCircle',
+            symbolSize : 3
+        },
+
+        line: {
+            smooth : true,
+            symbol: 'emptyCircle',
+            symbolSize: 3
+        },
+
+        candlestick: {
+            itemStyle: {
+                normal: {
+                    color: '#d87a80',
+                    color0: '#2ec7c9',
+                    lineStyle: {
+                        color: '#d87a80',
+                        color0: '#2ec7c9'
+                    }
+                }
+            }
+        },
+
+        scatter: {
+            symbol: 'circle',
+            symbolSize: 4
+        },
+
+        map: {
+            label: {
+                normal: {
+                    textStyle: {
+                        color: '#d87a80'
+                    }
+                }
+            },
+            itemStyle: {
+                normal: {
+                    borderColor: '#eee',
+                    areaColor: '#ddd'
+                },
+                emphasis: {
+                    areaColor: '#fe994e'
+                }
+            }
+        },
+
+        graph: {
+            color: colorPalette
+        },
+
+        gauge : {
+            axisLine: {
+                lineStyle: {
+                    color: [[0.2, '#2ec7c9'],[0.8, '#5ab1ef'],[1, '#d87a80']],
+                    width: 10
+                }
+            },
+            axisTick: {
+                splitNumber: 10,
+                length :15,
+                lineStyle: {
+                    color: 'auto'
+                }
+            },
+            splitLine: {
+                length :22,
+                lineStyle: {
+                    color: 'auto'
+                }
+            },
+            pointer : {
+                width : 5
+            }
+        }
+    };
+
+    echarts.registerTheme('macarons', theme);
+}));
--- a/src/components/BackToTop/index.vue
+++ b/src/components/BackToTop/index.vue
@ -0,0 +1,110 @@
+<template>
+  <transition :name="transitionName">
+    <div class="back-to-ceiling" @click="backToTop" v-show="visible" :style="customStyle">
+      <svg width="16" height="16" viewBox="0 0 17 17" xmlns="http://www.w3.org/2000/svg" class="Icon Icon--backToTopArrow" aria-hidden="true" style="height: 16px; width: 16px;">
+        <title>回到顶部</title>
+        <g>
+          <path d="M12.036 15.59c0 .55-.453.995-.997.995H5.032c-.55 0-.997-.445-.997-.996V8.584H1.03c-1.1 0-1.36-.633-.578-1.416L7.33.29c.39-.39 1.026-.385 1.412 0l6.878 6.88c.782.78.523 1.415-.58 1.415h-3.004v7.004z" fill-rule="evenodd"></path>
+        </g>
+      </svg>
+    </div>
+  </transition>
+</template>
+
+<script>
+export default {
+  name: 'BackToTop',
+  props: {
+    visibilityHeight: {
+      type: Number,
+      default: 400
+    },
+    backPosition: {
+      type: Number,
+      default: 0
+    },
+    customStyle: {
+      type: Object,
+      default: {
+        right: '50px',
+        bottom: '50px',
+        width: '40px',
+        height: '40px',
+        'border-radius': '4px',
+        'line-height': '45px',
+        background: '#e7eaf1'
+      }
+    },
+    transitionName: {
+      type: String,
+      default: 'fade'
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      interval: null
+    }
+  },
+  mounted() {
+    window.addEventListener('scroll', this.handleScroll)
+  },
+  beforeDestroy() {
+    window.removeEventListener('scroll', this.handleScroll)
+    if (this.interval) {
+      clearInterval(this.interval)
+    }
+  },
+  methods: {
+    handleScroll() {
+      this.visible = window.pageYOffset > this.visibilityHeight
+    },
+    backToTop() {
+      const start = window.pageYOffset
+      let i = 0
+      this.interval = setInterval(() => {
+        const next = Math.floor(this.easeInOutQuad(10 * i, start, -start, 500))
+        if (next <= this.backPosition) {
+          window.scrollTo(0, this.backPosition)
+          clearInterval(this.interval)
+        } else {
+          window.scrollTo(0, next)
+        }
+        i++
+      }, 16.7)
+    },
+    easeInOutQuad(t, b, c, d) {
+      if ((t /= d / 2) < 1) return c / 2 * t * t + b
+      return -c / 2 * (--t * (t - 2) - 1) + b
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .back-to-ceiling {
+    position: fixed;
+    display: inline-block;
+    text-align: center;
+    cursor: pointer;
+  }
+
+  .back-to-ceiling:hover {
+    background: #d5dbe7;
+  }
+
+  .fade-enter-active,
+  .fade-leave-active {
+    transition: opacity .5s;
+  }
+
+  .fade-enter,
+  .fade-leave-to {
+    opacity: 0
+  }
+
+  .back-to-ceiling .Icon {
+    fill: #9aaabf;
+    background: none;
+  }
+</style>
--- a/src/components/Charts/keyboard.vue
+++ b/src/components/Charts/keyboard.vue
@ -0,0 +1,113 @@
+<template>
+  <div :class="className" :id="id" :style="{height:height,width:width}"></div>
+</template>
+
+<script>
+import echarts from 'echarts'
+
+export default {
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    id: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '200px'
+    },
+    height: {
+      type: String,
+      default: '200px'
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(document.getElementById(this.id))
+
+      const xAxisData = []
+      const data = []
+      for (let i = 0; i < 30; i++) {
+        xAxisData.push(i + '号')
+        data.push(Math.round(Math.random() * 2 + 3))
+      }
+
+      this.chart.setOption(
+        {
+          backgroundColor: '#08263a',
+          tooltip: {
+            trigger: 'axis'
+          },
+          xAxis: {
+            show: false,
+            data: xAxisData
+          },
+          visualMap: {
+            show: false,
+            min: 0,
+            max: 50,
+            dimension: 0,
+            inRange: {
+              color: ['#4a657a', '#308e92', '#b1cfa5', '#f5d69f', '#f5898b', '#ef5055']
+            }
+          },
+          yAxis: {
+            axisLine: {
+              show: false
+            },
+            axisLabel: {
+              textStyle: {
+                color: '#4a657a'
+              }
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: '#08263f'
+              }
+            },
+            axisTick: {}
+          },
+          series: [{
+            type: 'bar',
+            data,
+            name: '撸文数',
+            itemStyle: {
+              normal: {
+                barBorderRadius: 5,
+                shadowBlur: 10,
+                shadowColor: '#111'
+              }
+            },
+            animationEasing: 'elasticOut',
+            animationEasingUpdate: 'elasticOut',
+            animationDelay(idx) {
+              return idx * 20
+            },
+            animationDelayUpdate(idx) {
+              return idx * 20
+            }
+          }]
+        })
+    }
+  }
+}
+</script>
--- a/src/components/Charts/keyboard2.vue
+++ b/src/components/Charts/keyboard2.vue
@ -0,0 +1,150 @@
+<template>
+  <div :class="className" :id="id" :style="{height:height,width:width}"></div>
+</template>
+
+<script>
+import echarts from 'echarts'
+
+export default {
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    id: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '200px'
+    },
+    height: {
+      type: String,
+      default: '200px'
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(document.getElementById(this.id))
+
+      const xAxisData = []
+      const data = []
+      const data2 = []
+      for (let i = 0; i < 50; i++) {
+        xAxisData.push(i)
+        data.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5)
+        data2.push((Math.sin(i / 5) * (i / 5 + 10) + i / 6) * 3)
+      }
+      this.chart.setOption(
+        {
+          backgroundColor: '#08263a',
+          xAxis: [{
+            show: false,
+            data: xAxisData
+          }, {
+            show: false,
+            data: xAxisData
+          }],
+          visualMap: {
+            show: false,
+            min: 0,
+            max: 50,
+            dimension: 0,
+            inRange: {
+              color: ['#4a657a', '#308e92', '#b1cfa5', '#f5d69f', '#f5898b', '#ef5055']
+            }
+          },
+          yAxis: {
+            axisLine: {
+              show: false
+            },
+            axisLabel: {
+              textStyle: {
+                color: '#4a657a'
+              }
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: '#08263f'
+              }
+            },
+            axisTick: {
+              show: false
+            }
+          },
+          series: [{
+            name: 'back',
+            type: 'bar',
+            data: data2,
+            z: 1,
+            itemStyle: {
+              normal: {
+                opacity: 0.4,
+                barBorderRadius: 5,
+                shadowBlur: 3,
+                shadowColor: '#111'
+              }
+            }
+          }, {
+            name: 'Simulate Shadow',
+            type: 'line',
+            data,
+            z: 2,
+            showSymbol: false,
+            animationDelay: 0,
+            animationEasing: 'linear',
+            animationDuration: 1200,
+            lineStyle: {
+              normal: {
+                color: 'transparent'
+              }
+            },
+            areaStyle: {
+              normal: {
+                color: '#08263a',
+                shadowBlur: 50,
+                shadowColor: '#000'
+              }
+            }
+          }, {
+            name: 'front',
+            type: 'bar',
+            data,
+            xAxisIndex: 1,
+            z: 3,
+            itemStyle: {
+              normal: {
+                barBorderRadius: 5
+              }
+            }
+          }],
+          animationEasing: 'elasticOut',
+          animationEasingUpdate: 'elasticOut',
+          animationDelay(idx) {
+            return idx * 20
+          },
+          animationDelayUpdate(idx) {
+            return idx * 20
+          }
+        })
+    }
+  }
+}
+</script>
--- a/src/components/Charts/lineMarker.vue
+++ b/src/components/Charts/lineMarker.vue
@ -0,0 +1,222 @@
+<template>
+  <div :class="className" :id="id" :style="{height:height,width:width}"></div>
+</template>
+
+<script>
+import echarts from 'echarts'
+
+export default {
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    id: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '200px'
+    },
+    height: {
+      type: String,
+      default: '200px'
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(document.getElementById(this.id))
+
+      this.chart.setOption({
+        backgroundColor: '#394056',
+        title: {
+          text: '请求数',
+          textStyle: {
+            fontWeight: 'normal',
+            fontSize: 16,
+            color: '#F1F1F3'
+          },
+          left: '6%'
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            lineStyle: {
+              color: '#57617B'
+            }
+          }
+        },
+        legend: {
+          icon: 'rect',
+          itemWidth: 14,
+          itemHeight: 5,
+          itemGap: 13,
+          data: ['移动', '电信', '联通'],
+          right: '4%',
+          textStyle: {
+            fontSize: 12,
+            color: '#F1F1F3'
+          }
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: [{
+          type: 'category',
+          boundaryGap: false,
+          axisLine: {
+            lineStyle: {
+              color: '#57617B'
+            }
+          },
+          data: ['13:00', '13:05', '13:10', '13:15', '13:20', '13:25', '13:30', '13:35', '13:40', '13:45', '13:50', '13:55']
+        }],
+        yAxis: [{
+          type: 'value',
+          name: '单位（%）',
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#57617B'
+            }
+          },
+          axisLabel: {
+            margin: 10,
+            textStyle: {
+              fontSize: 14
+            }
+          },
+          splitLine: {
+            lineStyle: {
+              color: '#57617B'
+            }
+          }
+        }],
+        series: [{
+          name: '移动',
+          type: 'line',
+          smooth: true,
+          symbol: 'circle',
+          symbolSize: 5,
+          showSymbol: false,
+          lineStyle: {
+            normal: {
+              width: 1
+            }
+          },
+          areaStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                offset: 0,
+                color: 'rgba(137, 189, 27, 0.3)'
+              }, {
+                offset: 0.8,
+                color: 'rgba(137, 189, 27, 0)'
+              }], false),
+              shadowColor: 'rgba(0, 0, 0, 0.1)',
+              shadowBlur: 10
+            }
+          },
+          itemStyle: {
+            normal: {
+              color: 'rgb(137,189,27)',
+              borderColor: 'rgba(137,189,2,0.27)',
+              borderWidth: 12
+
+            }
+          },
+          data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122]
+        }, {
+          name: '电信',
+          type: 'line',
+          smooth: true,
+          symbol: 'circle',
+          symbolSize: 5,
+          showSymbol: false,
+          lineStyle: {
+            normal: {
+              width: 1
+            }
+          },
+          areaStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                offset: 0,
+                color: 'rgba(0, 136, 212, 0.3)'
+              }, {
+                offset: 0.8,
+                color: 'rgba(0, 136, 212, 0)'
+              }], false),
+              shadowColor: 'rgba(0, 0, 0, 0.1)',
+              shadowBlur: 10
+            }
+          },
+          itemStyle: {
+            normal: {
+              color: 'rgb(0,136,212)',
+              borderColor: 'rgba(0,136,212,0.2)',
+              borderWidth: 12
+
+            }
+          },
+          data: [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150]
+        }, {
+          name: '联通',
+          type: 'line',
+          smooth: true,
+          symbol: 'circle',
+          symbolSize: 5,
+          showSymbol: false,
+          lineStyle: {
+            normal: {
+              width: 1
+            }
+          },
+          areaStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                offset: 0,
+                color: 'rgba(219, 50, 51, 0.3)'
+              }, {
+                offset: 0.8,
+                color: 'rgba(219, 50, 51, 0)'
+              }], false),
+              shadowColor: 'rgba(0, 0, 0, 0.1)',
+              shadowBlur: 10
+            }
+          },
+          itemStyle: {
+            normal: {
+              color: 'rgb(219,50,51)',
+              borderColor: 'rgba(219,50,51,0.2)',
+              borderWidth: 12
+            }
+          },
+          data: [220, 182, 125, 145, 122, 191, 134, 150, 120, 110, 165, 122]
+        }]
+      })
+    }
+  }
+}
+</script>
--- a/src/components/Charts/mixChart.vue
+++ b/src/components/Charts/mixChart.vue
@ -0,0 +1,267 @@
+<template>
+  <div :class="className" :id="id" :style="{height:height,width:width}"></div>
+</template>
+
+<script>
+import echarts from 'echarts'
+
+export default {
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    id: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '200px'
+    },
+    height: {
+      type: String,
+      default: '200px'
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.initChart()
+    this.chart = null
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(document.getElementById(this.id))
+      const xData = (function() {
+        const data = []
+        for (let i = 1; i < 13; i++) {
+          data.push(i + '月份')
+        }
+        return data
+      }())
+      this.chart.setOption({
+        backgroundColor: '#344b58',
+        title: {
+          text: '统计',
+          x: '4%',
+          textStyle: {
+            color: '#fff',
+            fontSize: '22'
+          },
+          subtextStyle: {
+            color: '#90979c',
+            fontSize: '16'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            textStyle: {
+              color: '#fff'
+            }
+          }
+        },
+        grid: {
+          borderWidth: 0,
+          top: 110,
+          bottom: 95,
+          textStyle: {
+            color: '#fff'
+          }
+        },
+        legend: {
+          x: '15%',
+          top: '10%',
+          textStyle: {
+            color: '#90979c'
+          },
+          data: ['女', '男', '平均']
+        },
+        calculable: true,
+        xAxis: [{
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#90979c'
+            }
+          },
+          splitLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          splitArea: {
+            show: false
+          },
+          axisLabel: {
+            interval: 0
+
+          },
+          data: xData
+        }],
+        yAxis: [{
+          type: 'value',
+          splitLine: {
+            show: false
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#90979c'
+            }
+          },
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            interval: 0
+          },
+          splitArea: {
+            show: false
+          }
+        }],
+        dataZoom: [{
+          show: true,
+          height: 30,
+          xAxisIndex: [
+            0
+          ],
+          bottom: 30,
+          start: 10,
+          end: 80,
+          handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
+          handleSize: '110%',
+          handleStyle: {
+            color: '#d3dee5'
+
+          },
+          textStyle: {
+            color: '#fff' },
+          borderColor: '#90979c'
+
+        }, {
+          type: 'inside',
+          show: true,
+          height: 15,
+          start: 1,
+          end: 35
+        }],
+        series: [{
+          name: '女',
+          type: 'bar',
+          stack: '总量',
+          barMaxWidth: 35,
+          barGap: '10%',
+          itemStyle: {
+            normal: {
+              color: 'rgba(255,144,128,1)',
+              label: {
+                show: true,
+                textStyle: {
+                  color: '#fff'
+                },
+                position: 'insideTop',
+                formatter(p) {
+                  return p.value > 0 ? p.value : ''
+                }
+              }
+            }
+          },
+          data: [
+            709,
+            1917,
+            2455,
+            2610,
+            1719,
+            1433,
+            1544,
+            3285,
+            5208,
+            3372,
+            2484,
+            4078
+          ]
+        },
+
+        {
+          name: '男',
+          type: 'bar',
+          stack: '总量',
+          itemStyle: {
+            normal: {
+              color: 'rgba(0,191,183,1)',
+              barBorderRadius: 0,
+              label: {
+                show: true,
+                position: 'top',
+                formatter(p) {
+                  return p.value > 0 ? p.value : ''
+                }
+              }
+            }
+          },
+          data: [
+            327,
+            1776,
+            507,
+            1200,
+            800,
+            482,
+            204,
+            1390,
+            1001,
+            951,
+            381,
+            220
+          ]
+        }, {
+          name: '平均',
+          type: 'line',
+          stack: '总量',
+          symbolSize: 10,
+          symbol: 'circle',
+          itemStyle: {
+            normal: {
+              color: 'rgba(252,230,48,1)',
+              barBorderRadius: 0,
+              label: {
+                show: true,
+                position: 'top',
+                formatter(p) {
+                  return p.value > 0 ? p.value : ''
+                }
+              }
+            }
+          },
+          data: [
+            1036,
+            3693,
+            2962,
+            3810,
+            2519,
+            1915,
+            1748,
+            4675,
+            6209,
+            4323,
+            2865,
+            4298
+          ]
+        }
+        ]
+      })
+    }
+  }
+}
+</script>
--- a/src/components/Dropzone/index.vue
+++ b/src/components/Dropzone/index.vue
@ -0,0 +1,294 @@
+<template>
+  <div :ref="id" :action="url" class="dropzone" :id="id">
+    <input type="file" name="file">
+  </div>
+</template>
+
+<script>
+import Dropzone from 'dropzone'
+import 'dropzone/dist/dropzone.css'
+  // import { getToken } from 'api/qiniu';
+
+Dropzone.autoDiscover = false
+
+export default {
+  data() {
+    return {
+      dropzone: '',
+      initOnce: true
+    }
+  },
+  mounted() {
+    const element = document.getElementById(this.id)
+    const vm = this
+    this.dropzone = new Dropzone(element, {
+      clickable: this.clickable,
+      thumbnailWidth: this.thumbnailWidth,
+      thumbnailHeight: this.thumbnailHeight,
+      maxFiles: this.maxFiles,
+      maxFilesize: this.maxFilesize,
+      dictRemoveFile: 'Remove',
+      addRemoveLinks: this.showRemoveLink,
+      acceptedFiles: this.acceptedFiles,
+      autoProcessQueue: this.autoProcessQueue,
+      dictDefaultMessage: '<i style="margin-top: 3em;display: inline-block" class="material-icons">' + this.defaultMsg + '</i><br>Drop files here to upload',
+      dictMaxFilesExceeded: '只能一个图',
+      previewTemplate: '<div class="dz-preview dz-file-preview">  <div class="dz-image" style="width:' + this.thumbnailWidth + 'px;height:' + this.thumbnailHeight + 'px" ><img style="width:' + this.thumbnailWidth + 'px;height:' + this.thumbnailHeight + 'px" data-dz-thumbnail /></div>  <div class="dz-details"><div class="dz-size"><span data-dz-size></span></div> <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>  <div class="dz-error-message"><span data-dz-errormessage></span></div>  <div class="dz-success-mark"> <i class="material-icons">done</i> </div>  <div class="dz-error-mark"><i class="material-icons">error</i></div></div>',
+      init() {
+        const val = vm.defaultImg
+        if (!val) return
+        if (Array.isArray(val)) {
+          if (val.length === 0) return
+          val.map((v, i) => {
+            const mockFile = { name: 'name' + i, size: 12345, url: v }
+            this.options.addedfile.call(this, mockFile)
+            this.options.thumbnail.call(this, mockFile, v)
+            mockFile.previewElement.classList.add('dz-success')
+            mockFile.previewElement.classList.add('dz-complete')
+            vm.initOnce = false
+            return true
+          })
+        } else {
+          const mockFile = { name: 'name', size: 12345, url: val }
+          this.options.addedfile.call(this, mockFile)
+          this.options.thumbnail.call(this, mockFile, val)
+          mockFile.previewElement.classList.add('dz-success')
+          mockFile.previewElement.classList.add('dz-complete')
+          vm.initOnce = false
+        }
+      },
+      accept: (file, done) => {
+        /* 七牛*/
+            // const token = this.$store.getters.token;
+            // getToken(token).then(response => {
+            //   file.token = response.data.qiniu_token;
+            //   file.key = response.data.qiniu_key;
+            //   file.url = response.data.qiniu_url;
+            //   done();
+            // })
+        done()
+      },
+      sending: (file, xhr, formData) => {
+            // formData.append('token', file.token);
+            // formData.append('key', file.key);
+        vm.initOnce = false
+      }
+    })
+
+    if (this.couldPaste) {
+      document.addEventListener('paste', this.pasteImg)
+    }
+
+    this.dropzone.on('success', file => {
+      vm.$emit('dropzone-success', file, vm.dropzone.element)
+    })
+    this.dropzone.on('addedfile', file => {
+      vm.$emit('dropzone-fileAdded', file)
+    })
+    this.dropzone.on('removedfile', file => {
+      vm.$emit('dropzone-removedFile', file)
+    })
+    this.dropzone.on('error', (file, error, xhr) => {
+      vm.$emit('dropzone-error', file, error, xhr)
+    })
+    this.dropzone.on('successmultiple', (file, error, xhr) => {
+      vm.$emit('dropzone-successmultiple', file, error, xhr)
+    })
+  },
+  methods: {
+    removeAllFiles() {
+      this.dropzone.removeAllFiles(true)
+    },
+    processQueue() {
+      this.dropzone.processQueue()
+    },
+    pasteImg(event) {
+      const items = (event.clipboardData || event.originalEvent.clipboardData).items
+      if (items[0].kind === 'file') {
+        this.dropzone.addFile(items[0].getAsFile())
+      }
+    },
+    initImages(val) {
+      if (!val) return
+      if (Array.isArray(val)) {
+        val.map((v, i) => {
+          const mockFile = { name: 'name' + i, size: 12345, url: v }
+          this.dropzone.options.addedfile.call(this.dropzone, mockFile)
+          this.dropzone.options.thumbnail.call(this.dropzone, mockFile, v)
+          mockFile.previewElement.classList.add('dz-success')
+          mockFile.previewElement.classList.add('dz-complete')
+          return true
+        })
+      } else {
+        const mockFile = { name: 'name', size: 12345, url: val }
+        this.dropzone.options.addedfile.call(this.dropzone, mockFile)
+        this.dropzone.options.thumbnail.call(this.dropzone, mockFile, val)
+        mockFile.previewElement.classList.add('dz-success')
+        mockFile.previewElement.classList.add('dz-complete')
+      }
+    }
+
+  },
+  destroyed() {
+    document.removeEventListener('paste', this.pasteImg)
+    this.dropzone.destroy()
+  },
+  watch: {
+    defaultImg(val) {
+      if (val.length === 0) {
+        this.initOnce = false
+        return
+      }
+      if (!this.initOnce) return
+      this.initImages(val)
+      this.initOnce = false
+    }
+  },
+  props: {
+    id: {
+      type: String,
+      required: true
+    },
+    url: {
+      type: String,
+      required: true
+    },
+    clickable: {
+      type: Boolean,
+      default: true
+    },
+    defaultMsg: {
+      type: String,
+      default: '上传图片'
+    },
+    acceptedFiles: {
+      type: String
+    },
+    thumbnailHeight: {
+      type: Number,
+      default: 200
+    },
+    thumbnailWidth: {
+      type: Number,
+      default: 200
+    },
+    showRemoveLink: {
+      type: Boolean,
+      default: true
+    },
+    maxFilesize: {
+      type: Number,
+      default: 2
+    },
+    maxFiles: {
+      type: Number,
+      default: 3
+    },
+    autoProcessQueue: {
+      type: Boolean,
+      default: true
+    },
+    useCustomDropzoneOptions: {
+      type: Boolean,
+      default: false
+    },
+    defaultImg: {
+      default: false
+    },
+    couldPaste: {
+      default: false
+    }
+  }
+}
+</script>
+
+<style scoped>
+    .dropzone {
+        border: 2px solid #E5E5E5;
+        font-family: 'Roboto', sans-serif;
+        color: #777;
+        transition: background-color .2s linear;
+        padding: 5px;
+    }
+
+    .dropzone:hover {
+        background-color: #F6F6F6;
+    }
+
+    i {
+        color: #CCC;
+    }
+
+    .dropzone .dz-image img {
+        width: 100%;
+        height: 100%;
+    }
+
+    .dropzone input[name='file'] {
+        display: none;
+    }
+
+    .dropzone .dz-preview .dz-image {
+        border-radius: 0px;
+    }
+
+    .dropzone .dz-preview:hover .dz-image img {
+        transform: none;
+        -webkit-filter: none;
+        width: 100%;
+        height: 100%;
+    }
+
+    .dropzone .dz-preview .dz-details {
+        bottom: 0px;
+        top: 0px;
+        color: white;
+        background-color: rgba(33, 150, 243, 0.8);
+        transition: opacity .2s linear;
+        text-align: left;
+    }
+
+    .dropzone .dz-preview .dz-details .dz-filename span, .dropzone .dz-preview .dz-details .dz-size span {
+        background-color: transparent;
+    }
+
+    .dropzone .dz-preview .dz-details .dz-filename:not(:hover) span {
+        border: none;
+    }
+
+    .dropzone .dz-preview .dz-details .dz-filename:hover span {
+        background-color: transparent;
+        border: none;
+    }
+
+    .dropzone .dz-preview .dz-remove {
+        position: absolute;
+        z-index: 30;
+        color: white;
+        margin-left: 15px;
+        padding: 10px;
+        top: inherit;
+        bottom: 15px;
+        border: 2px white solid;
+        text-decoration: none;
+        text-transform: uppercase;
+        font-size: 0.8rem;
+        font-weight: 800;
+        letter-spacing: 1.1px;
+        opacity: 0;
+    }
+
+    .dropzone .dz-preview:hover .dz-remove {
+        opacity: 1;
+    }
+
+    .dropzone .dz-preview .dz-success-mark, .dropzone .dz-preview .dz-error-mark {
+        margin-left: -40px;
+        margin-top: -50px;
+    }
+
+    .dropzone .dz-preview .dz-success-mark i, .dropzone .dz-preview .dz-error-mark i {
+        color: white;
+        font-size: 5rem;
+    }
+</style>
--- a/src/components/ErrLog/index.vue
+++ b/src/components/ErrLog/index.vue
@ -0,0 +1,56 @@
+<template>
+	<div>
+		<el-badge :is-dot="true" style="line-height: 30px;" @click.native="dialogTableVisible=true">
+			<el-button size="small" type="primary">
+				<svg t="1492682037685" class="bug-svg" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1863"
+				  xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64">
+					<path d="M969.142857 548.571429q0 14.848-10.861714 25.709714t-25.709714 10.861714l-128 0q0 97.718857-38.290286 165.705143l118.857143 119.442286q10.861714 10.861714 10.861714 25.709714t-10.861714 25.709714q-10.276571 10.861714-25.709714 10.861714t-25.709714-10.861714l-113.152-112.566857q-2.852571 2.852571-8.557714 7.424t-23.990857 16.274286-37.156571 20.845714-46.848 16.566857-55.442286 7.424l0-512-73.142857 0 0 512q-29.147429 0-58.002286-7.716571t-49.700571-18.870857-37.705143-22.272-24.868571-18.578286l-8.557714-8.009143-104.557714 118.272q-11.446857 11.995429-27.428571 11.995429-13.714286 0-24.576-9.142857-10.861714-10.276571-11.702857-25.417143t8.850286-26.587429l115.419429-129.718857q-33.133714-65.133714-33.133714-156.562286l-128 0q-14.848 0-25.709714-10.861714t-10.861714-25.709714 10.861714-25.709714 25.709714-10.861714l128 0 0-168.009143-98.852571-98.852571q-10.861714-10.861714-10.861714-25.709714t10.861714-25.709714 25.709714-10.861714 25.709714 10.861714l98.852571 98.852571 482.304 0 98.852571-98.852571q10.861714-10.861714 25.709714-10.861714t25.709714 10.861714 10.861714 25.709714-10.861714 25.709714l-98.852571 98.852571 0 168.009143 128 0q14.848 0 25.709714 10.861714t10.861714 25.709714zM694.857143 219.428571l-365.714286 0q0-75.995429 53.430857-129.426286t129.426286-53.430857 129.426286 53.430857 53.430857 129.426286z"
+					  p-id="1864"></path>
+				</svg>
+			</el-button>
+		</el-badge>
+		<el-dialog title="bug日志" :visible.sync="dialogTableVisible">
+			<el-table :data="logsList">
+				<el-table-column label="message">
+					<template scope="scope">
+						<div>msg:{{ scope.row.err.message }}</div>
+						<br/>
+						<div>url: {{scope.row.url}}</div>
+					</template>
+				</el-table-column>
+				<el-table-column label="stack">
+					<template scope="scope">
+						{{ scope.row.err.stack}}
+					</template>
+				</el-table-column>
+
+			</el-table>
+		</el-dialog>
+	</div>
+</template>
+
+<script>
+export default {
+  name: 'errLog',
+  props: {
+    logsList: {
+      type: Array
+    }
+  },
+  data() {
+    return {
+      dialogTableVisible: false
+    }
+  }
+}
+</script>
+
+<style scoped>
+.bug-svg {
+	width: 1em;
+	height: 1em;
+	vertical-align: -0.15em;
+	fill: currentColor;
+	overflow: hidden;
+}
+</style>
--- a/src/components/Github/index.vue
+++ b/src/components/Github/index.vue
@ -0,0 +1,13 @@
+<template>
+  <a href="https://github.com/PanJiaChen/vue-element-admin" target="_blank" class="github-corner" aria-label="View source on Github">
+    <svg width="80" height="80" viewBox="0 0 250 250" style="fill:#4AB7BD; color:#fff; position: absolute; top: 50px; border: 0; right: 0;"
+      aria-hidden="true">
+      <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
+      <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
+        fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
+      <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
+        fill="currentColor" class="octo-body"></path>
+    </svg>
+  </a>
+</template>
+
--- a/src/components/Hamburger/index.vue
+++ b/src/components/Hamburger/index.vue
@ -0,0 +1,46 @@
+<template>
+	<div>
+		<svg t="1492500959545" @click="toggleClick" class="wscn-icon hamburger" :class="{'is-active':isActive}" style="" viewBox="0 0 1024 1024"
+		  version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1691" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64">
+			<path d="M966.8023 568.849776 57.196677 568.849776c-31.397081 0-56.850799-25.452695-56.850799-56.850799l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 543.397081 998.200404 568.849776 966.8023 568.849776z"
+			  p-id="1692"></path>
+			<path d="M966.8023 881.527125 57.196677 881.527125c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 856.07443 998.200404 881.527125 966.8023 881.527125z"
+			  p-id="1693"></path>
+			<path d="M966.8023 256.17345 57.196677 256.17345c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.850799 56.850799-56.850799l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.850799l0 0C1023.653099 230.720755 998.200404 256.17345 966.8023 256.17345z"
+			  p-id="1694"></path>
+		</svg>
+	</div>
+</template>
+
+<script>
+export default {
+  name: 'hamburger',
+  props: {
+    isActive: {
+      type: Boolean,
+      default: false
+    },
+    toggleClick: {
+      type: Function,
+      default: null
+    }
+  }
+}
+</script>
+
+<style scoped>
+.hamburger {
+	display: inline-block;
+	cursor: pointer;
+	width: 20px;
+	height: 20px;
+	transform: rotate(0deg);
+	transition: .38s;
+	transform-origin: 50% 50%;
+}
+
+.hamburger.is-active {
+	transform: rotate(90deg);
+}
+
+</style>
--- a/src/components/Icon-svg/index.vue
+++ b/src/components/Icon-svg/index.vue
@ -0,0 +1,22 @@
+<template>
+  <svg class="svg-icon" aria-hidden="true">
+    <use :xlink:href="iconName"></use>
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'icon-svg',
+  props: {
+    iconClass: {
+      type: String,
+      required: true
+    }
+  },
+  computed: {
+    iconName() {
+      return `#icon-${this.iconClass}`
+    }
+  }
+}
+</script>
--- a/src/components/ImageCropper/index.vue
+++ b/src/components/ImageCropper/index.vue
@ -0,0 +1,697 @@
+<template>
+    <div class="vue-image-crop-upload" v-show="show">
+        <div class="vicp-wrap">
+            <div class="vicp-close" @click="off">
+                <i class="vicp-icon4"></i>
+            </div>
+
+            <div class="vicp-step1" v-show="step == 1">
+                <div class="vicp-drop-area"
+                     @dragleave="preventDefault"
+                     @dragover="preventDefault"
+                     @dragenter="preventDefault"
+                     @click="handleClick"
+                     @drop="handleChange">
+                    <i class="vicp-icon1" v-show="loading != 1">
+                        <i class="vicp-icon1-arrow"></i>
+                        <i class="vicp-icon1-body"></i>
+                        <i class="vicp-icon1-bottom"></i>
+                    </i>
+                    <span class="vicp-hint" v-show="loading !== 1">{{ lang.hint }}</span>
+                    <span class="vicp-no-supported-hint" v-show="!isSupported">{{ lang.noSupported }}</span>
+                    <input type="file" v-show="false" @change="handleChange" ref="fileinput">
+                </div>
+                <div class="vicp-error" v-show="hasError">
+                    <i class="vicp-icon2"></i> {{ errorMsg }}
+                </div>
+                <div class="vicp-operate">
+                    <a @click="off" @mousedown="ripple">{{ lang.btn.off }}</a>
+                </div>
+            </div>
+
+            <div class="vicp-step2" v-if="step == 2">
+                <div class="vicp-crop">
+                    <div class="vicp-crop-left" v-show="true">
+                        <div class="vicp-img-container">
+                            <img :src="sourceImgUrl"
+                                 :style="sourceImgStyle"
+                                 class="vicp-img"
+                                 draggable="false"
+                                 @drag="preventDefault"
+                                 @dragstart="preventDefault"
+                                 @dragend="preventDefault"
+                                 @dragleave="preventDefault"
+                                 @dragover="preventDefault"
+                                 @dragenter="preventDefault"
+                                 @drop="preventDefault"
+                                 @mousedown="imgStartMove"
+                                 @mousemove="imgMove"
+                                 @mouseup="createImg"
+                                 @mouseout="createImg"
+                                 ref="img">
+                            <div class="vicp-img-shade vicp-img-shade-1" :style="sourceImgShadeStyle"></div>
+                            <div class="vicp-img-shade vicp-img-shade-2" :style="sourceImgShadeStyle"></div>
+                        </div>
+                        <div class="vicp-range">
+                            <input type="range" :value="scale.range" step="1" min="0" max="100" @change="zoomChange">
+                            <i @mousedown="startZoomSub" @mouseout="endZoomSub" @mouseup="endZoomSub"
+                               class="vicp-icon5"></i>
+                            <i @mousedown="startZoomAdd" @mouseout="endZoomAdd" @mouseup="endZoomAdd"
+                               class="vicp-icon6"></i>
+                        </div>
+                    </div>
+                    <div class="vicp-crop-right" v-show="true">
+                        <div class="vicp-preview">
+                            <div class="vicp-preview-item">
+                                <img :src="createImgUrl" :style="previewStyle">
+                                <span>{{ lang.preview }}</span>
+                            </div>
+                            <div class="vicp-preview-item">
+                                <img :src="createImgUrl" :style="previewStyle" v-if="!noCircle">
+                                <span>{{ lang.preview }}</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="vicp-operate">
+                    <a @click="setStep(1)" @mousedown="ripple">{{ lang.btn.back }}</a>
+                    <a class="vicp-operate-btn" @click="upload" @mousedown="ripple">{{ lang.btn.save }}</a>
+                </div>
+            </div>
+
+            <div class="vicp-step3" v-if="step == 3">
+                <div class="vicp-upload">
+                    <span class="vicp-loading" v-show="loading === 1">{{ lang.loading }}</span>
+                    <div class="vicp-progress-wrap">
+                        <span class="vicp-progress" v-show="loading === 1" :style="progressStyle"></span>
+                    </div>
+                    <div class="vicp-error" v-show="hasError">
+                        <i class="vicp-icon2"></i> {{ errorMsg }}
+                    </div>
+                    <div class="vicp-success" v-show="loading === 2">
+                        <i class="vicp-icon3"></i> {{ lang.success }}
+                    </div>
+                </div>
+                <div class="vicp-operate">
+                    <a @click="setStep(2)" @mousedown="ripple">{{ lang.btn.back }}</a>
+                    <a @click="off" @mousedown="ripple">{{ lang.btn.close }}</a>
+                </div>
+            </div>
+            <canvas v-show="false" :width="width" :height="height" ref="canvas"></canvas>
+        </div>
+    </div>
+</template>
+
+<script>
+    /* eslint-disable */
+    import {effectRipple, data2blob} from './utils';
+    import fetch from 'utils/fetch';
+    import langBag from './lang';
+    const mimes = {
+        'jpg': 'image/jpeg',
+        'png': 'image/png',
+        'gif': 'image/gif',
+        'svg': 'image/svg+xml',
+        'psd': 'image/photoshop'
+    };
+
+    export default {
+        props: {
+            // 域，上传文件name，触发事件会带上（如果一个页面多个图片上传控件，可以做区分
+            field: {
+                type: String,
+                default: 'avatar'
+            },
+            // 上传地址
+            url: {
+                type: String,
+                default: ''
+            },
+            // 其他要上传文件附带的数据，对象格式
+            params: {
+                type: Object,
+                default: null
+            },
+            // 剪裁图片的宽
+            width: {
+                type: Number,
+                default: 200
+            },
+            // 剪裁图片的高
+            height: {
+                type: Number,
+                default: 200
+            },
+            // 不预览圆形图片
+            noCircle: {
+                type: Boolean,
+                default: false
+            },
+            // 单文件大小限制
+            maxSize: {
+                type: Number,
+                default: 10240
+            },
+            // 语言类型
+            langType: {
+                type: String,
+                'default': 'zh'
+            },
+
+        },
+        data() {
+            let that = this,
+                    {
+                            langType,
+                            width,
+                            height
+                    } = that,
+                    isSupported = true,
+                    lang = langBag[langType] ? langBag[langType] : lang['zh'];
+
+            if (typeof FormData != 'function') {
+                isSupported = false;
+            }
+            return {
+                show: true,
+                // 图片的mime
+                mime:mimes['jpg'],
+                // 语言包
+                lang,
+                // 浏览器是否支持该控件
+                isSupported,
+                // 步骤
+                step: 1, //1选择文件 2剪裁 3上传
+                // 上传状态及进度
+                loading: 0, //0未开始 1正在 2成功 3错误
+                progress: 0,
+                // 是否有错误及错误信息
+                hasError: false,
+                errorMsg: '',
+                // 需求图宽高比
+                ratio: width / height,
+                // 原图地址、生成图片地址
+                sourceImg: null,
+                sourceImgUrl: '',
+                createImgUrl: '',
+                // 原图片拖动事件初始值
+                sourceImgMouseDown: {
+                    on: false,
+                    mX: 0, //鼠标按下的坐标
+                    mY: 0,
+                    x: 0, //scale原图坐标
+                    y: 0
+                },
+                // 生成图片预览的容器大小
+                previewContainer: {
+                    width: 100,
+                    height: 100
+                },
+                // 原图容器宽高
+                sourceImgContainer: { // sic
+                    width: 240,
+                    height: 180
+                },
+                // 原图展示属性
+                scale: {
+                    zoomAddOn: false, //按钮缩放事件开启
+                    zoomSubOn: false, //按钮缩放事件开启
+                    range: 1, //最大100
+                    x: 0,
+                    y: 0,
+                    width: 0,
+                    height: 0,
+                    maxWidth: 0,
+                    maxHeight: 0,
+                    minWidth: 0, //最宽
+                    minHeight: 0,
+                    naturalWidth: 0, //原宽
+                    naturalHeight: 0
+                }
+            }
+        },
+        computed: {
+            // 进度条样式
+            progressStyle() {
+                let {
+                        progress
+                } = this;
+                return {
+                    width: progress + '%'
+                }
+            },
+            // 原图样式
+            sourceImgStyle() {
+                let {
+                        scale,
+                        sourceImgMasking
+                } = this;
+                return {
+                    top: scale.y + sourceImgMasking.y + 'px',
+                    left: scale.x + sourceImgMasking.x + 'px',
+                    width: scale.width + 'px',
+                    height: scale.height + 'px'
+                }
+            },
+            // 原图蒙版属性
+            sourceImgMasking() {
+                let {
+                                width,
+                                height,
+                                ratio,
+                                sourceImgContainer
+                        } = this,
+                        sic = sourceImgContainer,
+                        sicRatio = sic.width / sic.height, // 原图容器宽高比
+                        x = 0,
+                        y = 0,
+                        w = sic.width,
+                        h = sic.height,
+                        scale = 1;
+                if (ratio < sicRatio) {
+                    scale = sic.height / height;
+                    w = sic.height * ratio;
+                    x = (sic.width - w) / 2;
+                }
+                if (ratio > sicRatio) {
+                    scale = sic.width / width;
+                    h = sic.width / ratio;
+                    y = (sic.height - h) / 2;
+                }
+                return {
+                    scale, // 蒙版相对需求宽高的缩放
+                    x,
+                    y,
+                    width: w,
+                    height: h
+                };
+            },
+            // 原图遮罩样式
+            sourceImgShadeStyle() {
+                let sic = this.sourceImgContainer,
+                        sim = this.sourceImgMasking,
+                        w = sim.width == sic.width ? sim.width : (sic.width - sim.width) / 2,
+                        h = sim.height == sic.height ? sim.height : (sic.height - sim.height) / 2;
+                return {
+                    width: w + 'px',
+                    height: h + 'px'
+                };
+            },
+            previewStyle() {
+                let {
+                                width,
+                                height,
+                                ratio,
+                                previewContainer
+                        } = this,
+                        pc = previewContainer,
+                        w = pc.width,
+                        h = pc.height,
+                        pcRatio = w / h;
+                if (ratio < pcRatio) {
+                    w = pc.height * ratio;
+                }
+                if (ratio > pcRatio) {
+                    h = pc.width / ratio;
+                }
+                return {
+                    width: w + 'px',
+                    height: h + 'px'
+                };
+            }
+        },
+        methods: {
+            // 点击波纹效果
+            ripple(e) {
+                effectRipple(e);
+            },
+            // 关闭控件
+            off() {
+                this.show = false;
+                this.$emit('close');
+            },
+            // 设置步骤
+            setStep(step) {
+                let that = this;
+                setTimeout(function () {
+                    that.step = step;
+                }, 200);
+            },
+            /* 图片选择区域函数绑定
+             ---------------------------------------------------------------*/
+            preventDefault(e) {
+                e.preventDefault();
+                return false;
+            },
+            handleClick(e) {
+                if (this.loading !== 1) {
+                    if (e.target !== this.$refs.fileinput) {
+                        e.preventDefault();
+                        if (document.activeElement !== this.$refs) {
+                            this.$refs.fileinput.click();
+                        }
+                    }
+                }
+            },
+            handleChange(e) {
+                e.preventDefault();
+                if (this.loading !== 1) {
+                    let files = e.target.files || e.dataTransfer.files;
+                    this.reset();
+                    if (this.checkFile(files[0])) {
+                        this.setSourceImg(files[0]);
+                    }
+                }
+            },
+            /* ---------------------------------------------------------------*/
+            // 检测选择的文件是否合适
+            checkFile(file) {
+                let that = this,
+                        {
+                                lang,
+                                maxSize
+                        } = that;
+                // 仅限图片
+                if (file.type.indexOf('image') === -1) {
+                    that.hasError = true;
+                    that.errorMsg = lang.error.onlyImg;
+                    return false;
+                }
+                this.mime=file.type;
+                // 超出大小
+                if (file.size / 1024 > maxSize) {
+                    that.hasError = true;
+                    that.errorMsg = lang.error.outOfSize + maxSize + 'kb';
+                    return false;
+                }
+                return true;
+            },
+            // 重置控件
+            reset() {
+                let that = this;
+                that.step = 1;
+                that.loading = 0;
+                that.hasError = false;
+                that.errorMsg = '';
+                that.progress = 0;
+            },
+            // 设置图片源
+            setSourceImg(file) {
+                let that = this,
+                        fr = new FileReader();
+                fr.onload = function (e) {
+                    that.sourceImgUrl = fr.result;
+                    that.startCrop();
+                };
+                fr.readAsDataURL(file);
+            },
+            // 剪裁前准备工作
+            startCrop() {
+                let that = this,
+                        {
+                                width,
+                                height,
+                                ratio,
+                                scale,
+                                sourceImgUrl,
+                                sourceImgMasking,
+                                lang
+                        } = that,
+                        sim = sourceImgMasking,
+                        img = new Image();
+                img.src = sourceImgUrl;
+                img.onload = function () {
+                    let nWidth = img.naturalWidth,
+                            nHeight = img.naturalHeight,
+                            nRatio = nWidth / nHeight,
+                            w = sim.width,
+                            h = sim.height,
+                            x = 0,
+                            y = 0;
+                    // 图片像素不达标
+//                    if (nWidth < width || nHeight < height) {
+//                        that.hasError = true;
+//                        that.errorMsg = lang.error.lowestPx + width + '*' + height;
+//                        return false;
+//                    }
+                    if (ratio > nRatio) {
+                        h = w / nRatio;
+                        y = (sim.height - h) / 2;
+                    }
+                    if (ratio < nRatio) {
+                        w = h * nRatio;
+                        x = (sim.width - w) / 2;
+                    }
+                    scale.range = 0;
+                    scale.x = x;
+                    scale.y = y;
+                    scale.width = w;
+                    scale.height = h;
+                    scale.minWidth = w;
+                    scale.minHeight = h;
+                    scale.maxWidth = nWidth * sim.scale;
+                    scale.maxHeight = nHeight * sim.scale;
+                    scale.naturalWidth = nWidth;
+                    scale.naturalHeight = nHeight;
+                    that.sourceImg = img;
+                    that.createImg();
+                    that.setStep(2);
+                };
+            },
+            // 鼠标按下图片准备移动
+            imgStartMove(e) {
+                let {
+                                sourceImgMouseDown,
+                                scale
+                        } = this,
+                        simd = sourceImgMouseDown;
+                simd.mX = e.screenX;
+                simd.mY = e.screenY;
+                simd.x = scale.x;
+                simd.y = scale.y;
+                simd.on = true;
+            },
+            // 鼠标按下状态下移动，图片移动
+            imgMove(e) {
+                let {
+                                sourceImgMouseDown: {
+                                        on,
+                                        mX,
+                                        mY,
+                                        x,
+                                        y
+                                },
+                                scale,
+                                sourceImgMasking
+                        } = this,
+                        sim = sourceImgMasking,
+                        nX = e.screenX,
+                        nY = e.screenY,
+                        dX = nX - mX,
+                        dY = nY - mY,
+                        rX = x + dX,
+                        rY = y + dY;
+                if (!on) return;
+                if (rX > 0) {
+                    rX = 0;
+                }
+                if (rY > 0) {
+                    rY = 0;
+                }
+                if (rX < sim.width - scale.width) {
+                    rX = sim.width - scale.width;
+                }
+                if (rY < sim.height - scale.height) {
+                    rY = sim.height - scale.height;
+                }
+                scale.x = rX;
+                scale.y = rY;
+            },
+            // 按钮按下开始放大
+            startZoomAdd(e) {
+                let that = this,
+                        {
+                                scale
+                        } = that;
+                scale.zoomAddOn = true;
+                function zoom() {
+                    if (scale.zoomAddOn) {
+                        let range = scale.range >= 100 ? 100 : ++scale.range;
+                        that.zoomImg(range);
+                        setTimeout(function () {
+                            zoom();
+                        }, 60);
+                    }
+                }
+
+                zoom();
+            },
+            // 按钮松开或移开取消放大
+            endZoomAdd(e) {
+                this.scale.zoomAddOn = false;
+            },
+            // 按钮按下开始缩小
+            startZoomSub(e) {
+                let that = this,
+                        {
+                                scale
+                        } = that;
+                scale.zoomSubOn = true;
+                function zoom() {
+                    if (scale.zoomSubOn) {
+                        let range = scale.range <= 0 ? 0 : --scale.range;
+                        that.zoomImg(range);
+                        setTimeout(function () {
+                            zoom();
+                        }, 60);
+                    }
+                }
+
+                zoom();
+            },
+            // 按钮松开或移开取消缩小
+            endZoomSub(e) {
+                let {
+                        scale
+                } = this;
+                scale.zoomSubOn = false;
+            },
+            zoomChange(e) {
+                this.zoomImg(e.target.value);
+            },
+            // 缩放原图
+            zoomImg(newRange) {
+                let that = this,
+                        {
+                                sourceImgMasking,
+                                sourceImgMouseDown,
+                                scale
+                        } = this,
+                        {
+                                maxWidth,
+                                maxHeight,
+                                minWidth,
+                                minHeight,
+                                width,
+                                height,
+                                x,
+                                y,
+                                range
+                        } = scale,
+                        sim = sourceImgMasking,
+                        // 蒙版宽高
+                        sWidth = sim.width,
+                        sHeight = sim.height,
+                        // 新宽高
+                        nWidth = minWidth + (maxWidth - minWidth) * newRange / 100,
+                        nHeight = minHeight + (maxHeight - minHeight) * newRange / 100,
+                        // 新坐标（根据蒙版中心点缩放）
+                        nX = sWidth / 2 - (nWidth / width) * (sWidth / 2 - x),
+                        nY = sHeight / 2 - (nHeight / height) * (sHeight / 2 - y);
+                // 判断新坐标是否超过蒙版限制
+                if (nX > 0) {
+                    nX = 0;
+                }
+                if (nY > 0) {
+                    nY = 0;
+                }
+                if (nX < sWidth - nWidth) {
+                    nX = sWidth - nWidth;
+                }
+                if (nY < sHeight - nHeight) {
+                    nY = sHeight - nHeight;
+                }
+                // 赋值处理
+                scale.x = nX;
+                scale.y = nY;
+                scale.width = nWidth;
+                scale.height = nHeight;
+                scale.range = newRange;
+                setTimeout(function () {
+                    if (scale.range == newRange) {
+                        that.createImg();
+                    }
+                }, 300);
+            },
+            // 生成需求图片
+            createImg(e) {
+                let that = this,
+                        {
+                                mime,
+                                sourceImg,
+                                scale: {
+                                        x,
+                                        y,
+                                        width,
+                                        height
+                                },
+                                sourceImgMasking: {
+                                        scale
+                                }
+                        } = that,
+                        canvas = that.$refs.canvas,
+                        ctx = canvas.getContext('2d');
+                if (e) {
+                    // 取消鼠标按下移动状态
+                    that.sourceImgMouseDown.on = false;
+                }
+                ctx.drawImage(sourceImg, x / scale, y / scale, width / scale, height / scale);
+                that.createImgUrl = canvas.toDataURL(mime);
+            },
+            // 上传图片
+            upload() {
+            let that = this,
+                {
+                    lang,
+                    imgFormat,
+                    mime,
+                    url,
+                    params,
+                    headers,
+                    field,
+                    ki,
+                    createImgUrl
+                } = this,
+                fmData = new FormData();
+            fmData.append(field, data2blob(createImgUrl, mime), field + '.' + imgFormat);
+            // 添加其他参数
+            if (typeof params == 'object' && params) {
+                Object.keys(params).forEach((k) => {
+                    fmData.append(k, params[k]);
+                })
+            }
+            // 监听进度回调
+            function uploadProgress (event) {
+                console.log(event)
+                if (event.lengthComputable) {
+                    that.progress = 100 * Math.round(event.loaded) / event.total;
+                }
+            };
+            // 上传文件
+            that.reset();
+            that.loading = 1;
+            that.setStep(3);
+            that.$emit('crop-success', createImgUrl, field, ki);
+            fetch({
+                url,
+                method: 'post',
+                data: fmData
+            }).then(resData=>{
+                that.loading = 2;
+                that.$emit('crop-upload-success', resData.data);
+            }).catch(err=>{
+                if (that.value) {
+                        that.loading = 3;
+                        that.hasError = true;
+                        that.errorMsg = lang.fail;
+                        that.$emit('crop-upload-fail', err, field, ki);
+                    }
+            });
+            }
+        }
+    }
+</script>
+
+<style scoped>
+    @import "./upload.css";
+</style>
--- a/src/components/ImageCropper/lang.js
+++ b/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
--- a/src/components/ImageCropper/upload.css
+++ b/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;
+}
--- a/src/components/ImageCropper/utils.js
+++ b/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});
+};
--- a/src/components/MDinput/index.vue
+++ b/src/components/MDinput/index.vue
@ -0,0 +1,272 @@
+<template>
+  <div class="material-input__component" :class="computedClasses">
+    <div :class="{iconClass:icon}">
+      <i class="el-input__icon material-input__icon" :class="['el-icon-' + icon]" v-if="icon"></i>
+      <input v-if="type === 'email'" type="email" class="material-input" :name="name" :placeholder="fillPlaceHolder" v-model="currentValue"
+        :readonly="readonly" :disabled="disabled" :autoComplete="autoComplete" :required="required" @focus="handleMdFocus"
+        @blur="handleMdBlur" @input="handleModelInput">
+      <input v-if="type === 'url'" type="url" class="material-input" :name="name" :placeholder="fillPlaceHolder" v-model="currentValue"
+        :readonly="readonly" :disabled="disabled" :autoComplete="autoComplete" :required="required" @focus="handleMdFocus"
+        @blur="handleMdBlur" @input="handleModelInput">
+      <input v-if="type === 'number'" type="number" class="material-input" :name="name" :placeholder="fillPlaceHolder" v-model="currentValue"
+        :step="step" :readonly="readonly" :disabled="disabled" :autoComplete="autoComplete" :max="max" :min="min" :minlength="minlength"
+        :maxlength="maxlength" :required="required" @focus="handleMdFocus" @blur="handleMdBlur" @input="handleModelInput">
+      <input v-if="type === 'password'" type="password" class="material-input" :name="name" :placeholder="fillPlaceHolder" v-model="currentValue"
+        :readonly="readonly" :disabled="disabled" :autoComplete="autoComplete" :max="max" :min="min" :required="required" @focus="handleMdFocus"
+        @blur="handleMdBlur" @input="handleModelInput">
+      <input v-if="type === 'tel'" type="tel" class="material-input" :name="name" :placeholder="fillPlaceHolder" v-model="currentValue"
+        :readonly="readonly" :disabled="disabled" :autoComplete="autoComplete" :required="required" @focus="handleMdFocus"
+        @blur="handleMdBlur" @input="handleModelInput">
+      <input v-if="type === 'text'" type="text" class="material-input" :name="name" :placeholder="fillPlaceHolder" v-model="currentValue"
+        :readonly="readonly" :disabled="disabled" :autoComplete="autoComplete" :minlength="minlength" :maxlength="maxlength"
+        :required="required" @focus="handleMdFocus" @blur="handleMdBlur" @input="handleModelInput">
+      <span class="material-input-bar"></span>
+      <label class="material-label">
+        <slot></slot>
+      </label>
+    </div>
+  </div>
+</template>
+
+<script>
+// source:https://github.com/wemake-services/vue-material-input/blob/master/src/components/MaterialInput.vue
+
+export default {
+  name: 'md-input',
+  props: {
+    icon: String,
+    name: String,
+    type: {
+      type: String,
+      default: 'text'
+    },
+    value: [String, Number],
+    placeholder: String,
+    readonly: Boolean,
+    disabled: Boolean,
+    min: String,
+    max: String,
+    step: String,
+    minlength: Number,
+    maxlength: Number,
+    required: {
+      type: Boolean,
+      default: true
+    },
+    autoComplete: {
+      type: String,
+      default: 'off'
+    },
+    validateEvent: {
+      type: Boolean,
+      default: true
+    }
+  },
+  computed: {
+    computedClasses() {
+      return {
+        'material--active': this.focus,
+        'material--disabled': this.disabled,
+        'material--raised': Boolean(this.focus || this.currentValue) // has value
+      }
+    }
+  },
+  data() {
+    return {
+      currentValue: this.value,
+      focus: false,
+      fillPlaceHolder: null
+    }
+  },
+  methods: {
+    handleModelInput(event) {
+      const value = event.target.value
+      this.$emit('input', value)
+      if (this.$parent.$options.componentName === 'ElFormItem') {
+        if (this.validateEvent) {
+          this.$parent.$emit('el.form.change', [value])
+        }
+      }
+      this.$emit('change', value)
+    },
+    handleMdFocus(event) {
+      this.focus = true
+      this.$emit('focus', event)
+      if (this.placeholder && this.placeholder !== '') {
+        this.fillPlaceHolder = this.placeholder
+      }
+    },
+    handleMdBlur(event) {
+      this.focus = false
+      this.$emit('blur', event)
+      this.fillPlaceHolder = null
+      if (this.$parent.$options.componentName === 'ElFormItem') {
+        if (this.validateEvent) {
+          this.$parent.$emit('el.form.blur', [this.currentValue])
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  // Fonts:
+  $font-size-base: 16px;
+  $font-size-small: 18px;
+  $font-size-smallest: 12px;
+  $font-weight-normal: normal;
+  $font-weight-bold: bold;
+  $apixel: 1px;
+  // Utils
+  $spacer: 12px;
+  $transition: 0.2s ease all;
+  $index: 0px;
+  $index-has-icon: 30px;
+  // Theme:
+  $color-white: white;
+  $color-grey: #9E9E9E;
+  $color-grey-light: #E0E0E0;
+  $color-blue: #2196F3;
+  $color-red: #F44336;
+  $color-black: black;
+  // Base clases:
+  %base-bar-pseudo {
+    content: '';
+    height: 1px;
+    width: 0;
+    bottom: 0;
+    position: absolute;
+    transition: $transition;
+  }
+
+  // Mixins:
+  @mixin slided-top() {
+    top: - ($font-size-base + $spacer);
+    left: 0;
+    font-size: $font-size-base;
+    font-weight: $font-weight-bold;
+  }
+
+  // Component:
+  .material-input__component {
+    margin-top: 36px;
+    position: relative;
+    * {
+      box-sizing: border-box;
+    }
+    .iconClass {
+      .material-input__icon {
+        position: absolute;
+        left: 0;
+        color: $color-blue;
+        top: $spacer;
+        width: $index-has-icon;
+        height: $font-size-base;
+        font-size: $font-size-base;
+        font-weight: $font-weight-normal;
+        pointer-events: none;
+      }
+      .material-label {
+        left: $index-has-icon;
+      }
+      .material-input {
+        text-indent: $index-has-icon;
+      }
+    }
+    .material-input {
+      font-size: $font-size-base;
+      padding: $spacer $spacer $spacer - $apixel * 10 $spacer / 2;
+      display: block;
+      width: 100%;
+      border: none;
+      line-height: 1;
+      border-radius: 0;
+      &:focus {
+        outline: none;
+        border: none;
+        border-bottom: 1px solid transparent; // fixes the height issue
+      }
+    }
+    .material-label {
+      font-weight: $font-weight-normal;
+      position: absolute;
+      pointer-events: none;
+      left: $index;
+      top: 0;
+      transition: $transition;
+      font-size: $font-size-small;
+    }
+    .material-input-bar {
+      position: relative;
+      display: block;
+      width: 100%;
+      &:before {
+        @extend %base-bar-pseudo;
+        left: 50%;
+      }
+      &:after {
+        @extend %base-bar-pseudo;
+        right: 50%;
+      }
+    }
+    // Disabled state:
+    &.material--disabled {
+      .material-input {
+        border-bottom-style: dashed;
+      }
+    }
+    // Raised state:
+    &.material--raised {
+      .material-label {
+        @include slided-top();
+      }
+    }
+    // Active state:
+    &.material--active {
+      .material-input-bar {
+        &:before,
+        &:after {
+          width: 50%;
+        }
+      }
+    }
+  }
+
+  .material-input__component {
+    background: $color-white;
+    .material-input {
+      background: none;
+      color: $color-black;
+      text-indent: $index;
+      border-bottom: 1px solid $color-grey-light;
+    }
+    .material-label {
+      color: $color-grey;
+    }
+    .material-input-bar {
+      &:before,
+      &:after {
+        background: $color-blue;
+      }
+    }
+    // Active state:
+    &.material--active {
+      .material-label {
+        color: $color-blue;
+      }
+    }
+    // Errors:
+    &.material--has-errors {
+      &.material--active .material-label {
+        color: $color-red;
+      }
+      .material-input-bar {
+        &:before,
+        &:after {
+          background: transparent;
+        }
+      }
+    }
+  }
+</style>
--- a/src/components/MarkdownEditor/index.vue
+++ b/src/components/MarkdownEditor/index.vue
@ -0,0 +1,114 @@
+<template>
+  <div class='simplemde-container' :style="{height:height+'px',zIndex:zIndex}">
+    <textarea :id='id'>
+    </textarea>
+  </div>
+</template>
+
+<script>
+import 'simplemde/dist/simplemde.min.css'
+import SimpleMDE from 'simplemde'
+
+export default {
+  name: 'simplemde-md',
+  props: {
+    value: String,
+    id: {
+      type: String,
+      default: 'markdown-editor'
+    },
+    autofocus: {
+      type: Boolean,
+      default: false
+    },
+    placeholder: {
+      type: String,
+      default: ''
+    },
+    height: {
+      type: Number,
+      default: 150
+    },
+    zIndex: {
+      type: Number,
+      default: 10
+    },
+    toolbar: {
+      type: Array
+    }
+  },
+  data() {
+    return {
+      simplemde: null,
+      hasChange: false
+    }
+  },
+  watch: {
+    value(val) {
+      if (val === this.simplemde.value() && !this.hasChange) return
+      this.simplemde.value(val)
+    }
+  },
+  mounted() {
+    this.simplemde = new SimpleMDE({
+      element: document.getElementById(this.id),
+      autofocus: this.autofocus,
+      toolbar: this.toolbar,
+      spellChecker: false,
+      insertTexts: {
+        link: ['[', ']( )']
+      },
+      // hideIcons: ['guide', 'heading', 'quote', 'image', 'preview', 'side-by-side', 'fullscreen'],
+      placeholder: this.placeholder
+    })
+    if (this.value) {
+      this.simplemde.value(this.value)
+    }
+    this.simplemde.codemirror.on('change', () => {
+      if (this.hasChange) {
+        this.hasChange = true
+      }
+      this.$emit('input', this.simplemde.value())
+    })
+  },
+  destroyed() {
+    this.simplemde = null
+  }
+}
+</script>
+
+<style>
+.simplemde-container .CodeMirror {
+  /*height: 150px;*/
+  min-height: 150px;
+}
+
+.simplemde-container .CodeMirror-scroll {
+  min-height: 150px;
+}
+
+.simplemde-container .CodeMirror-code {
+  padding-bottom: 40px;
+}
+
+.simplemde-container .editor-statusbar {
+  display: none;
+}
+
+.simplemde-container .CodeMirror .CodeMirror-code .cm-link {
+  color: #1482F0;
+}
+
+.simplemde-container .CodeMirror .CodeMirror-code .cm-string.cm-url {
+  color: #2d3b4d;
+  font-weight: bold;
+}
+
+.simplemde-container .CodeMirror .CodeMirror-code .cm-formatting-link-string.cm-url {
+  padding: 0 2px;
+  font-weight: bold;
+  color: #E61E1E;
+}
+</style>
+
+
--- a/src/components/PanThumb/index.vue
+++ b/src/components/PanThumb/index.vue
@ -0,0 +1,140 @@
+<template>
+	<div class="pan-item" :style="{zIndex:zIndex,height:height,width:width}">
+		<div class="pan-info">
+			<div class="pan-info-roles-container">
+				<slot></slot>
+			</div>
+		</div>
+		<img class="pan-thumb" :src="image">
+	</div>
+</template>
+
+<script>
+export default {
+  name: 'PanThumb',
+  props: {
+    image: {
+      type: String,
+      required: true
+    },
+    zIndex: {
+      type: Number,
+      default: 100
+    },
+    width: {
+      type: String,
+      default: '150px'
+    },
+    height: {
+      type: String,
+      default: '150px'
+    }
+  }
+}
+</script>
+
+<style scoped>
+.pan-item {
+	width: 200px;
+	height: 200px;
+	border-radius: 50%;
+	display: inline-block;
+	position: relative;
+	cursor: default;
+	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+}
+
+.pan-info-roles-container {
+	padding: 20px;
+	text-align: center;
+}
+
+.pan-thumb {
+	width: 100%;
+	height: 100%;
+	background-size: 100%;
+	border-radius: 50%;
+	overflow: hidden;
+	position: absolute;
+	transform-origin: 95% 40%;
+	transition: all 0.3s ease-in-out;
+}
+
+.pan-thumb:after {
+	content: '';
+	width: 8px;
+	height: 8px;
+	position: absolute;
+	border-radius: 50%;
+	top: 40%;
+	left: 95%;
+	margin: -4px 0 0 -4px;
+	background: radial-gradient(ellipse at center, rgba(14, 14, 14, 1) 0%, rgba(125, 126, 125, 1) 100%);
+	box-shadow: 0 0 1px rgba(255, 255, 255, 0.9);
+}
+
+.pan-info {
+	position: absolute;
+	width: inherit;
+	height: inherit;
+	border-radius: 50%;
+	overflow: hidden;
+	box-shadow: inset 0 0 0 5px rgba(0, 0, 0, 0.05);
+}
+
+.pan-info h3 {
+	color: #fff;
+	text-transform: uppercase;
+	position: relative;
+	letter-spacing: 2px;
+	font-size: 18px;
+	margin: 0 60px;
+	padding: 22px 0 0 0;
+	height: 85px;
+	font-family: 'Open Sans', Arial, sans-serif;
+	text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.3);
+}
+
+.pan-info p {
+	color: #fff;
+	padding: 10px 5px;
+	font-style: italic;
+	margin: 0 30px;
+	font-size: 12px;
+	border-top: 1px solid rgba(255, 255, 255, 0.5);
+}
+
+.pan-info p a {
+	display: block;
+	color: #333;
+	width: 80px;
+	height: 80px;
+	background: rgba(255, 255, 255, 0.3);
+	border-radius: 50%;
+	color: #fff;
+	font-style: normal;
+	font-weight: 700;
+	text-transform: uppercase;
+	font-size: 9px;
+	letter-spacing: 1px;
+	padding-top: 24px;
+	margin: 7px auto 0;
+	font-family: 'Open Sans', Arial, sans-serif;
+	opacity: 0;
+	transition: transform 0.3s ease-in-out 0.2s, opacity 0.3s ease-in-out 0.2s, background 0.2s linear 0s;
+	transform: translateX(60px) rotate(90deg);
+}
+
+.pan-info p a:hover {
+	background: rgba(255, 255, 255, 0.5);
+}
+
+.pan-item:hover .pan-thumb {
+	transform: rotate(-110deg);
+}
+
+.pan-item:hover .pan-info p a {
+	opacity: 1;
+	transform: translateX(0px) rotate(0deg);
+}
+</style>
--- a/src/components/Screenfull/index.vue
+++ b/src/components/Screenfull/index.vue
@ -0,0 +1,54 @@
+<template>
+  <svg @click='click' class="icon screenfull" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+    t="1497503607356" viewBox="0 0 1024 1024" version="1.1" p-id="4109" :fill='fill' :width="width" :height="height">
+    <path d="M604.157933 512l204.484208 204.484208 82.942037-82.942037c10.364045-10.952446 26.498514-13.83817 40.309054-8.067746 13.249769 5.742794 22.465664 18.99154 22.465664 33.977859l0 258.042008c0 20.168342-16.695241 36.863582-36.863582 36.863582L659.452283 954.357873c-14.986319 0-28.236088-9.215896-33.977859-23.025413-5.770424-13.249769-2.885723-29.384237 8.067746-39.748283l82.942037-82.942037L512 604.157933 307.515792 808.642141l82.942037 82.942037c10.952446 10.364045 13.83817 26.498514 8.067746 39.748283-5.742794 13.809517-18.99154 23.025413-33.977859 23.025413L106.504686 954.357873c-20.168342 0-36.863582-16.695241-36.863582-36.863582L69.641103 659.452283c0-14.986319 9.215896-28.236088 23.025413-33.977859 13.249769-5.770424 29.384237-2.8847 39.748283 8.067746l82.942037 82.942037 204.484208-204.484208L215.357859 307.515792l-82.942037 82.942037c-6.890944 6.918573-16.10684 10.952446-25.911136 10.952446-4.593622 0-9.804297-1.14815-13.83817-2.8847-13.809517-5.742794-23.025413-18.99154-23.025413-33.977859L69.641103 106.504686c0-20.168342 16.695241-36.863582 36.863582-36.863582L364.546693 69.641103c14.986319 0 28.236088 9.215896 33.977859 23.025413 5.770424 13.249769 2.8847 29.384237-8.067746 39.748283l-82.942037 82.942037 204.484208 204.484208L716.484208 215.357859l-82.942037-82.942037c-10.952446-10.364045-13.83817-26.498514-8.067746-39.748283 5.742794-13.809517 18.99154-23.025413 33.977859-23.025413l258.042008 0c20.168342 0 36.863582 16.695241 36.863582 36.863582l0 258.042008c0 14.986319-9.215896 28.236088-22.465664 33.977859-4.593622 1.736551-9.804297 2.8847-14.397918 2.8847-9.804297 0-19.020192-4.033873-25.911136-10.952446l-82.942037-82.942037L604.157933 512z"
+      p-id="4110" />
+  </svg>
+</template>
+
+<script>
+import screenfull from 'screenfull'
+
+export default {
+  name: 'hamburger',
+  props: {
+    width: {
+      type: Number,
+      default: 22
+    },
+    height: {
+      type: Number,
+      default: 22
+    },
+    fill: {
+      type: String,
+      default: '#48576a'
+    }
+  },
+  data() {
+    return {
+      isFullscreen: false
+    }
+  },
+  methods: {
+    click() {
+      if (!screenfull.enabled) {
+        this.$message({
+          message: 'you browser can not work',
+          type: 'warning'
+        })
+        return false
+      }
+      screenfull.toggle()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.screenfull {
+  display: inline-block;
+  cursor: pointer;
+  vertical-align: -0.15em;
+}
+</style>
--- a/src/components/SplitPane/Pane.vue
+++ b/src/components/SplitPane/Pane.vue
@ -0,0 +1,44 @@
+<template>
+	<div :class="classes">
+		<slot></slot>
+	</div>
+</template>
+
+<script>
+export default {
+  name: 'Pane',
+  data() {
+    const classes = ['Pane', this.$parent.split, 'className']
+    return {
+      classes: classes.join(' '),
+      percent: 50
+    }
+  }
+}
+</script>
+
+<style scoped>
+.splitter-pane.vertical.splitter-paneL {
+    position: absolute;
+    left: 0px;
+    height: 100%;
+}
+
+.splitter-pane.vertical.splitter-paneR {
+    position: absolute;
+    right: 0px;
+    height: 100%;
+}
+
+.splitter-pane.horizontal.splitter-paneL {
+    position: absolute;
+    top: 0px;
+    width: 100%;
+}
+
+.splitter-pane.horizontal.splitter-paneR {
+    position: absolute;
+    bottom: 0px;
+    width: 100%;
+}
+</style>
--- a/src/components/SplitPane/Resizer.vue
+++ b/src/components/SplitPane/Resizer.vue
@ -0,0 +1,72 @@
+<template>
+	<div :class="classes" @mousedown="onMouseDown"></div>
+</template>
+
+<script>
+export default {
+  props: {
+    split: {
+      validator(value) {
+        return ['vertical', 'horizontal'].indexOf(value) >= 0
+      },
+      required: true
+    },
+    onMouseDown: {
+      type: Function,
+      required: true
+    }
+  },
+  data() {
+    const classes = ['Resizer', this.split, 'className']
+    return {
+      classes: classes.join(' ')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.Resizer {
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+	background: #000;
+	position: absolute;
+	opacity: .2;
+	z-index: 1;
+	/*-moz-background-clip: padding;*/
+	/*-webkit-background-clip: padding;*/
+	/*background-clip: padding-box;*/
+}
+/*.Resizer:hover {*/
+/*-webkit-transition: all 2s ease;*/
+/*transition: all 2s ease;*/
+/*}*/
+
+.Resizer.horizontal {
+	height: 11px;
+	margin: -5px 0;
+	border-top: 5px solid rgba(255, 255, 255, 0);
+	border-bottom: 5px solid rgba(255, 255, 255, 0);
+	cursor: row-resize;
+	width: 100%;
+}
+
+.Resizer.horizontal:hover {
+	border-top: 5px solid rgba(0, 0, 0, 0.5);
+	border-bottom: 5px solid rgba(0, 0, 0, 0.5);
+}
+
+.Resizer.vertical {
+	width: 11px;
+	height: 100%;
+	border-left: 5px solid rgba(255, 255, 255, 0);
+	border-right: 5px solid rgba(255, 255, 255, 0);
+	cursor: col-resize;
+}
+
+.Resizer.vertical:hover {
+	border-left: 5px solid rgba(0, 0, 0, 0.5);
+	border-right: 5px solid rgba(0, 0, 0, 0.5);
+}
+</style>
--- a/src/components/SplitPane/index.vue
+++ b/src/components/SplitPane/index.vue
@ -0,0 +1,111 @@
+<template>
+  <div ref :style="{ cursor, userSelect}" class="vue-splitter-container clearfix" @mouseup="onMouseUp" @mousemove="onMouseMove">
+    <pane class="splitter-pane splitter-paneL" :split="split" :style="{ [type]: percent+'%'}">
+      <slot name="paneL"></slot>
+    </pane>
+    <resizer :style="{ [resizeType]: percent+'%'}" :split="split" :onMouseDown="onMouseDown" @click="onClick"></resizer>
+    <pane class="splitter-pane splitter-paneR" :split="split" :style="{ [type]: 100-percent+'%'}">
+      <slot name="paneR"></slot>
+    </pane>
+  </div>
+</template>
+
+<script>
+import Resizer from './Resizer'
+import Pane from './Pane'
+export default {
+  name: 'splitPane',
+  components: { Resizer, Pane },
+  props: {
+    margin: {
+      type: Number,
+      default: 10
+    },
+    split: {
+      validator(value) {
+        return ['vertical', 'horizontal'].indexOf(value) >= 0
+      },
+      required: true
+    }
+  },
+  data() {
+    return {
+      active: false,
+      hasMoved: false,
+      height: null,
+      percent: 50,
+      type: this.split === 'vertical' ? 'width' : 'height',
+      resizeType: this.split === 'vertical' ? 'left' : 'top'
+    }
+  },
+  computed: {
+    userSelect() {
+      return this.active ? 'none' : ''
+    },
+    cursor() {
+      return this.active ? 'col-resize' : ''
+    }
+  },
+  methods: {
+    onClick() {
+      if (!this.hasMoved) {
+        this.percent = 50
+        this.$emit('resize')
+      }
+    },
+    onMouseDown() {
+      this.active = true
+      this.hasMoved = false
+    },
+    onMouseUp() {
+      this.active = false
+    },
+    onMouseMove(e) {
+      if (e.buttons === 0 || e.which === 0) {
+        this.active = false
+      }
+      if (this.active) {
+        let offset = 0
+        let target = e.currentTarget
+        if (this.split === 'vertical') {
+          while (target) {
+            offset += target.offsetLeft
+            target = target.offsetParent
+          }
+        } else {
+          while (target) {
+            offset += target.offsetTop
+            target = target.offsetParent
+          }
+        }
+
+        const currentPage = this.split === 'vertical' ? e.pageX : e.pageY
+        const targetOffset = this.split === 'vertical' ? e.currentTarget.offsetWidth : e.currentTarget.offsetHeight
+        const percent = Math.floor(((currentPage - offset) / targetOffset) * 10000) / 100
+        if (percent > this.margin && percent < 100 - this.margin) {
+          this.percent = percent
+        }
+        this.$emit('resize')
+        this.hasMoved = true
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.clearfix:after {
+  visibility: hidden;
+  display: block;
+  font-size: 0;
+  content: " ";
+  clear: both;
+  height: 0;
+}
+
+.vue-splitter-container {
+  height: 100%;
+  /*display: flex;*/
+  position: relative;
+}
+</style>
--- a/src/components/Sticky/index.vue
+++ b/src/components/Sticky/index.vue
@ -0,0 +1,74 @@
+<template>
+  <div :style="{height:height+'px',zIndex:zIndex}">
+    <div :class="className" :style="{top:stickyTop+'px',zIndex:zIndex,position:position,width:width,height:height+'px'}">
+      <slot>
+        <div>sticky</div>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Sticky',
+  props: {
+    stickyTop: {
+      type: Number,
+      default: 0
+    },
+    zIndex: {
+      type: Number,
+      default: 1
+    },
+    className: {
+      type: String
+    }
+  },
+  data() {
+    return {
+      active: false,
+      position: '',
+      currentTop: '',
+      width: undefined,
+      height: undefined,
+      child: null,
+      stickyHeight: 0
+
+    }
+  },
+  methods: {
+    sticky() {
+      if (this.active) {
+        return
+      }
+      this.position = 'fixed'
+      this.active = true
+      this.width = this.width + 'px'
+    },
+    reset() {
+      if (!this.active) {
+        return
+      }
+      this.position = ''
+      this.width = 'auto'
+      this.active = false
+    },
+    handleScroll() {
+      this.width = this.$el.getBoundingClientRect().width
+      const offsetTop = this.$el.getBoundingClientRect().top
+      if (offsetTop <= this.stickyTop) {
+        this.sticky()
+        return
+      }
+      this.reset()
+    }
+  },
+  mounted() {
+    this.height = this.$el.getBoundingClientRect().height
+    window.addEventListener('scroll', this.handleScroll)
+  },
+  destroyed() {
+    window.removeEventListener('scroll', this.handleScroll)
+  }
+}
+</script>
--- a/src/components/Tinymce/components/editorImage.vue
+++ b/src/components/Tinymce/components/editorImage.vue
@ -0,0 +1,102 @@
+<template>
+    <div class="upload-container">
+        <el-button icon='upload' :style="{background:color,borderColor:color}" @click=" dialogVisible=true" type="primary">上传图片
+        </el-button>
+        <el-dialog v-model="dialogVisible">
+            <el-upload
+                    class="editor-slide-upload"
+                    action="https://httpbin.org/post"
+                    :multiple="true"
+                    :file-list="fileList"
+                    :show-file-list="true"
+                    list-type="picture-card"
+                    :on-remove="handleRemove"
+                    :on-success="handleSuccess"
+                    :before-upload="beforeUpload">
+                <el-button size="small" type="primary">点击上传</el-button>
+            </el-upload>
+            <el-button @click="dialogVisible = false">取 消</el-button>
+            <el-button type="primary" @click="handleSubmit">确 定</el-button>
+        </el-dialog>
+    </div>
+</template>
+<script>
+// import { getToken } from 'api/qiniu'
+
+export default {
+  name: 'editorSlideUpload',
+  props: {
+    color: {
+      type: String,
+      default: '#20a0ff'
+    }
+  },
+  data() {
+    return {
+      dialogVisible: false,
+      listObj: {},
+      fileList: []
+    }
+  },
+  methods: {
+    checkAllSuccess() {
+      return Object.keys(this.listObj).every(item => this.listObj[item].hasSuccess)
+    },
+    handleSubmit() {
+      const arr = Object.keys(this.listObj).map(v => this.listObj[v])
+      if (!this.checkAllSuccess()) {
+        this.$message('请等待所有图片上传成功 或 出现了网络问题，请刷新页面重新上传！')
+        return
+      }
+      console.log(arr)
+      this.$emit('successCBK', arr)
+      this.listObj = {}
+      this.fileList = []
+      this.dialogVisible = false
+    },
+    handleSuccess(response, file) {
+      const uid = file.uid
+      const objKeyArr = Object.keys(this.listObj)
+      for (let i = 0, len = objKeyArr.length; i < len; i++) {
+        if (this.listObj[objKeyArr[i]].uid === uid) {
+          this.listObj[objKeyArr[i]].url = response.files.file
+          this.listObj[objKeyArr[i]].hasSuccess = true
+          return
+        }
+      }
+    },
+    handleRemove(file) {
+      const uid = file.uid
+      const objKeyArr = Object.keys(this.listObj)
+      for (let i = 0, len = objKeyArr.length; i < len; i++) {
+        if (this.listObj[objKeyArr[i]].uid === uid) {
+          delete this.listObj[objKeyArr[i]]
+          return
+        }
+      }
+    },
+    beforeUpload(file) {
+      const _self = this
+      const _URL = window.URL || window.webkitURL
+      const fileName = file.uid
+      this.listObj[fileName] = {}
+      return new Promise((resolve, reject) => {
+        const img = new Image()
+        img.src = _URL.createObjectURL(file)
+        img.onload = function() {
+          _self.listObj[fileName] = { hasSuccess: false, uid: file.uid, width: this.width, height: this.height }
+        }
+        resolve(true)
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+    .upload-container {
+        .editor-slide-upload {
+            margin-bottom: 20px;
+        }
+    }
+</style>
--- a/src/components/Tinymce/index.vue
+++ b/src/components/Tinymce/index.vue
@ -0,0 +1,189 @@
+<template>
+  <div class='tinymce-container editor-container'>
+    <textarea class='tinymce-textarea' :id="tinymceId"></textarea>
+    <div class="editor-custom-btn-container">
+     <editorImage  color="#20a0ff" class="editor-upload-btn" @successCBK="imageSuccessCBK"></editorImage>
+      </div>
+  </div>
+</template>
+
+<script>
+import editorImage from './components/editorImage'
+
+export default {
+  name: 'tinymce',
+  components: { editorImage },
+  props: {
+    id: {
+      type: String
+    },
+    value: {
+      type: String,
+      default: ''
+    },
+    toolbar: {
+      type: Array,
+      required: false,
+      default() {
+        return ['removeformat undo redo |  bullist numlist | outdent indent | forecolor | fullscreen code', 'bold italic blockquote | h2 p  media link | alignleft aligncenter alignright']
+      }
+    },
+    menubar: {
+      default: ''
+    },
+    height: {
+      type: Number,
+      required: false,
+      default: 360
+    }
+  },
+  data() {
+    return {
+      hasChange: false,
+      hasInit: false,
+      tinymceId: this.id || 'vue-tinymce-' + +new Date()
+    }
+  },
+  watch: {
+    value(val) {
+      if (!this.hasChange && this.hasInit) {
+        this.$nextTick(() => window.tinymce.get(this.tinymceId).setContent(val))
+      }
+    }
+  },
+  mounted() {
+    const _this = this
+    window.tinymce.init({
+      selector: `#${this.tinymceId}`,
+      height: this.height,
+      body_class: 'panel-body ',
+      object_resizing: false,
+      toolbar: this.toolbar,
+      menubar: this.menubar,
+      plugins: 'advlist,autolink,code,paste,textcolor, colorpicker,fullscreen,link,lists,media,wordcount, imagetools',
+      end_container_on_empty_block: true,
+      powerpaste_word_import: 'clean',
+      code_dialog_height: 450,
+      code_dialog_width: 1000,
+      advlist_bullet_styles: 'square',
+      advlist_number_styles: 'default',
+      block_formats: '普通标签=p;小标题=h2;',
+      imagetools_cors_hosts: ['wpimg.wallstcn.com', 'wallstreetcn.com'],
+      imagetools_toolbar: 'watermark',
+      default_link_target: '_blank',
+      link_title: false,
+      init_instance_callback: editor => {
+        if (_this.value) {
+          editor.setContent(_this.value)
+        }
+        _this.hasInit = true
+        editor.on('NodeChange Change KeyUp', () => {
+          this.hasChange = true
+          this.$emit('input', editor.getContent({ format: 'raw' }))
+        })
+      },
+          // 整合七牛上传
+          // images_dataimg_filter(img) {
+          //   setTimeout(() => {
+          //     const $image = $(img);
+          //     $image.removeAttr('width');
+          //     $image.removeAttr('height');
+          //     if ($image[0].height && $image[0].width) {
+          //       $image.attr('data-wscntype', 'image');
+          //       $image.attr('data-wscnh', $image[0].height);
+          //       $image.attr('data-wscnw', $image[0].width);
+          //       $image.addClass('wscnph');
+          //     }
+          //   }, 0);
+          //   return img
+          // },
+          // images_upload_handler(blobInfo, success, failure, progress) {
+          //   progress(0);
+          //   const token = _this.$store.getters.token;
+          //   getToken(token).then(response => {
+          //     const url = response.data.qiniu_url;
+          //     const formData = new FormData();
+          //     formData.append('token', response.data.qiniu_token);
+          //     formData.append('key', response.data.qiniu_key);
+          //     formData.append('file', blobInfo.blob(), url);
+          //     upload(formData).then(() => {
+          //       success(url);
+          //       progress(100);
+          //     })
+          //   }).catch(err => {
+          //     failure('出现未知问题，刷新页面，或者联系程序员')
+          //     console.log(err);
+          //   });
+          // },
+      setup(editor) {
+        editor.addButton('h2', {
+          title: '小标题', // tooltip text seen on mouseover
+          text: '小标题',
+          onclick() {
+            editor.execCommand('mceToggleFormat', false, 'h2')
+          },
+          onPostRender() {
+            const btn = this
+            editor.on('init', () => {
+              editor.formatter.formatChanged('h2', state => {
+                btn.active(state)
+              })
+            })
+          }
+        })
+        editor.addButton('p', {
+          title: '正文',
+          text: '正文',
+          onclick() {
+            editor.execCommand('mceToggleFormat', false, 'p')
+          },
+          onPostRender() {
+            const btn = this
+            editor.on('init', () => {
+              editor.formatter.formatChanged('p', state => {
+                btn.active(state)
+              })
+            })
+          }
+        })
+      }
+    })
+  },
+  methods: {
+    setContent(value) {
+      window.tinymce.get(this.tinymceId).setContent(value)
+    },
+    getContent() {
+      window.tinymce.get(this.tinymceId).getContent()
+    },
+    imageSuccessCBK(arr) {
+      const _this = this
+      arr.forEach(v => {
+        window.tinymce.get(_this.tinymceId).insertContent(`<img class="wscnph" src="${v.url}" >`)
+      })
+    }
+  },
+  destroyed() {
+    window.tinymce.get(this.tinymceId).destroy()
+  }
+}
+</script>
+
+<style scoped>
+.tinymce-container {
+  position: relative
+}
+.tinymce-textarea {
+  visibility: hidden;
+  z-index: -1;
+}
+.editor-custom-btn-container {
+  position: absolute;
+  right: 15px;
+  /*z-index: 2005;*/
+  top: 18px;
+}
+.editor-upload-btn {
+  display: inline-block;
+}
+</style>
--- a/src/components/TodoList/Todo.vue
+++ b/src/components/TodoList/Todo.vue
@ -0,0 +1,70 @@
+<template>
+  <li class="todo" :class="{ completed: todo.done, editing: editing }">
+    <div class="view">
+      <input class="toggle"
+        type="checkbox"
+        :checked="todo.done"
+        @change="toggleTodo( todo)">
+      <label v-text="todo.text" @dblclick="editing = true"></label>
+      <button class="destroy" @click="deleteTodo( todo )"></button>
+    </div>
+    <input class="edit"
+      v-show="editing"
+      v-focus="editing"
+      :value="todo.text"
+      @keyup.enter="doneEdit"
+      @keyup.esc="cancelEdit"
+      @blur="doneEdit">
+  </li>
+</template>
+
+<script>
+export default {
+  name: 'Todo',
+  props: ['todo'],
+  data() {
+    return {
+      editing: false
+    }
+  },
+  directives: {
+    focus(el, { value }, { context }) {
+      if (value) {
+        context.$nextTick(() => {
+          el.focus()
+        })
+      }
+    }
+  },
+  methods: {
+    deleteTodo(todo) {
+      this.$emit('deleteTodo', todo)
+    },
+    editTodo({ todo, value }) {
+      this.$emit('editTodo', { todo, value })
+    },
+    toggleTodo(todo) {
+      this.$emit('toggleTodo', todo)
+    },
+    doneEdit(e) {
+      const value = e.target.value.trim()
+      const { todo } = this
+      if (!value) {
+        this.deleteTodo({
+          todo
+        })
+      } else if (this.editing) {
+        this.editTodo({
+          todo,
+          value
+        })
+        this.editing = false
+      }
+    },
+    cancelEdit(e) {
+      e.target.value = this.todo.text
+      this.editing = false
+    }
+  }
+}
+</script>
--- a/src/components/TodoList/index.scss
+++ b/src/components/TodoList/index.scss
@ -0,0 +1,318 @@
+.todoapp {
+	font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
+	line-height: 1.4em;
+	color: #4d4d4d;
+	min-width: 230px;
+	max-width: 550px;
+	margin: 40PX auto 0;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	font-weight: 300;
+	button {
+		margin: 0;
+		padding: 0;
+		border: 0;
+		background: none;
+		font-size: 100%;
+		vertical-align: baseline;
+		font-family: inherit;
+		font-weight: inherit;
+		color: inherit;
+		-webkit-appearance: none;
+		appearance: none;
+		-webkit-font-smoothing: antialiased;
+		-moz-osx-font-smoothing: grayscale;
+	}
+	:focus {
+		outline: 0;
+	}
+	.hidden {
+		display: none;
+	}
+	.todoapp {
+		background: #fff;
+		margin: 130px 0 40px 0;
+		position: relative;
+		box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
+	}
+	.todoapp input::-webkit-input-placeholder {
+		font-style: italic;
+		font-weight: 300;
+		color: #e6e6e6;
+	}
+	.todoapp input::-moz-placeholder {
+		font-style: italic;
+		font-weight: 300;
+		color: #e6e6e6;
+	}
+	.todoapp input::input-placeholder {
+		font-style: italic;
+		font-weight: 300;
+		color: #e6e6e6;
+	}
+	.todoapp h1 {
+		position: absolute;
+		top: -155px;
+		width: 100%;
+		font-size: 100px;
+		font-weight: 100;
+		text-align: center;
+		color: rgba(175, 47, 47, 0.15);
+		-webkit-text-rendering: optimizeLegibility;
+		-moz-text-rendering: optimizeLegibility;
+		text-rendering: optimizeLegibility;
+	}
+	.new-todo,
+	.edit {
+		position: relative;
+		margin: 0;
+		width: 100%;
+		font-size: 18px;
+		font-family: inherit;
+		font-weight: inherit;
+		line-height: 1.4em;
+		border: 0;
+		color: inherit;
+		padding: 6px;
+		border: 1px solid #999;
+		box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
+		box-sizing: border-box;
+		-webkit-font-smoothing: antialiased;
+		-moz-osx-font-smoothing: grayscale;
+	}
+	.new-todo {
+		padding: 16px 16px 16px 60px;
+		border: none;
+		background: rgba(0, 0, 0, 0.003);
+		box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
+	}
+	.main {
+		position: relative;
+		z-index: 2;
+		border-top: 1px solid #e6e6e6;
+	}
+	.toggle-all {
+		text-align: center;
+		border: none;
+		/* Mobile Safari */
+		opacity: 0;
+		position: absolute;
+	}
+	.toggle-all+label {
+		width: 60px;
+		height: 34px;
+		font-size: 0;
+		position: absolute;
+		top: -52px;
+		left: -13px;
+		-webkit-transform: rotate(90deg);
+		transform: rotate(90deg);
+	}
+	.toggle-all+label:before {
+		content: '❯';
+		font-size: 22px;
+		color: #e6e6e6;
+		padding: 10px 27px 10px 27px;
+	}
+	.toggle-all:checked+label:before {
+		color: #737373;
+	}
+	.todo-list {
+		margin: 0;
+		padding: 0;
+		list-style: none;
+	}
+	.todo-list li {
+		position: relative;
+		font-size: 24px;
+		border-bottom: 1px solid #ededed;
+	}
+	.todo-list li:last-child {
+		border-bottom: none;
+	}
+	.todo-list li.editing {
+		border-bottom: none;
+		padding: 0;
+	}
+	.todo-list li.editing .edit {
+		display: block;
+		width: 506px;
+		padding: 12px 16px;
+		margin: 0 0 0 43px;
+	}
+	.todo-list li.editing .view {
+		display: none;
+	}
+	.todo-list li .toggle {
+		text-align: center;
+		width: 40px;
+		/* auto, since non-WebKit browsers doesn't support input styling */
+		height: auto;
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		margin: auto 0;
+		border: none;
+		/* Mobile Safari */
+		-webkit-appearance: none;
+		appearance: none;
+	}
+	.todo-list li .toggle {
+		opacity: 0;
+	}
+	.todo-list li .toggle+label {
+		/*
+		Firefox requires `#` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433
+		IE and Edge requires *everything* to be escaped to render, so we do that instead of just the `#` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/
+	*/
+		background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E');
+		background-repeat: no-repeat;
+		background-position: center left;
+		background-size: 36px;
+	}
+	.todo-list li .toggle:checked+label {
+		background-size: 36px;
+		background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E');
+	}
+	.todo-list li label {
+		word-break: break-all;
+		padding: 15px 15px 15px 50px;
+		display: block;
+		line-height: 1.0;
+		    font-size: 14px;
+		transition: color 0.4s;
+	}
+	.todo-list li.completed label {
+		color: #d9d9d9;
+		text-decoration: line-through;
+	}
+	.todo-list li .destroy {
+		display: none;
+		position: absolute;
+		top: 0;
+		right: 10px;
+		bottom: 0;
+		width: 40px;
+		height: 40px;
+		margin: auto 0;
+		font-size: 30px;
+		color: #cc9a9a;
+		transition: color 0.2s ease-out;
+	}
+	.todo-list li .destroy:hover {
+		color: #af5b5e;
+	}
+	.todo-list li .destroy:after {
+		content: '×';
+	}
+	.todo-list li:hover .destroy {
+		display: block;
+	}
+	.todo-list li .edit {
+		display: none;
+	}
+	.todo-list li.editing:last-child {
+		margin-bottom: -1px;
+	}
+	.footer {
+		color: #777;
+		position: relative;
+		padding: 10px 15px;
+		height: 40px;
+		text-align: center;
+		border-top: 1px solid #e6e6e6;
+	}
+	.footer:before {
+		content: '';
+		position: absolute;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		height: 50px;
+		overflow: hidden;
+		box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6, 0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px #f6f6f6, 0 17px 2px -6px rgba(0, 0, 0, 0.2);
+	}
+	.todo-count {
+		float: left;
+		text-align: left;
+	}
+	.todo-count strong {
+		font-weight: 300;
+	}
+	.filters {
+		margin: 0;
+		padding: 0;
+		list-style: none;
+		position: absolute;
+		right: 0;
+		left: -20px;
+	}
+	.filters li {
+		display: inline;
+	}
+	.filters li a {
+		color: inherit;
+		margin: 3px;
+		font-size: 12px;
+		padding: 3px 7px;
+		text-decoration: none;
+		border: 1px solid transparent;
+		border-radius: 3px;
+	}
+	.filters li a:hover {
+		border-color: rgba(175, 47, 47, 0.1);
+	}
+	.filters li a.selected {
+		border-color: rgba(175, 47, 47, 0.2);
+	}
+	.clear-completed,
+	html .clear-completed:active {
+		float: right;
+		position: relative;
+		line-height: 20px;
+		text-decoration: none;
+		cursor: pointer;
+	}
+	.clear-completed:hover {
+		text-decoration: underline;
+	}
+	.info {
+		margin: 65px auto 0;
+		color: #bfbfbf;
+		font-size: 10px;
+		text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+		text-align: center;
+	}
+	.info p {
+		line-height: 1;
+	}
+	.info a {
+		color: inherit;
+		text-decoration: none;
+		font-weight: 400;
+	}
+	.info a:hover {
+		text-decoration: underline;
+	}
+	/*
+	Hack to remove background from Mobile Safari.
+	Can't use it globally since it destroys checkboxes in Firefox
+*/
+	@media screen and (-webkit-min-device-pixel-ratio:0) {
+		.toggle-all,
+		.todo-list li .toggle {
+			background: none;
+		}
+		.todo-list li .toggle {
+			height: 40px;
+		}
+	}
+	@media (max-width: 430px) {
+		.footer {
+			height: 50px;
+		}
+		.filters {
+			bottom: 10px;
+		}
+	}
+}
--- a/src/components/TodoList/index.vue
+++ b/src/components/TodoList/index.vue
@ -0,0 +1,115 @@
+<template>
+  <section class="todoapp">
+    <!-- header -->
+    <header class="header">
+      <input class="new-todo" autofocus autocomplete="off" placeholder="TODO LIST?" @keyup.enter="addTodo">
+    </header>
+    <!-- main section -->
+    <section class="main" v-show="todos.length">
+      <input class="toggle-all" id="toggle-all" type="checkbox" :checked="allChecked" @change="toggleAll({ done: !allChecked })">
+      <label for="toggle-all"></label>
+      <ul class="todo-list">
+        <todo @toggleTodo='toggleTodo' @editTodo='editTodo' @deleteTodo='deleteTodo' v-for="(todo, index) in filteredTodos" :key="index"
+          :todo="todo"></todo>
+      </ul>
+    </section>
+    <!-- footer -->
+    <footer class="footer" v-show="todos.length">
+      <span class="todo-count">
+        <strong>{{ remaining }}</strong>
+        {{ remaining | pluralize('item') }} left
+      </span>
+      <ul class="filters">
+        <li v-for="(val, key) in filters" :key="key">
+          <a :class="{ selected: visibility === key }" @click.prevent="visibility = key">{{ key | capitalize }}</a>
+        </li>
+      </ul>
+      <button class="clear-completed" v-show="todos.length > remaining" @click="clearCompleted">
+        Clear completed
+      </button>
+    </footer>
+  </section>
+</template>
+
+<script>
+import Todo from './Todo.vue'
+
+const STORAGE_KEY = 'todos'
+const filters = {
+  all: todos => todos,
+  active: todos => todos.filter(todo => !todo.done),
+  completed: todos => todos.filter(todo => todo.done)
+}
+const defalutList = [
+  { text: 'star this repository', done: false },
+  { text: 'fork this repository', done: false },
+  { text: 'follow author', done: false }
+]
+export default {
+  components: { Todo },
+  data() {
+    return {
+      visibility: 'all',
+      filters,
+      todos: JSON.parse(window.localStorage.getItem(STORAGE_KEY)) || defalutList
+    }
+  },
+  computed: {
+    allChecked() {
+      return this.todos.every(todo => todo.done)
+    },
+    filteredTodos() {
+      return filters[this.visibility](this.todos)
+    },
+    remaining() {
+      return this.todos.filter(todo => !todo.done).length
+    }
+  },
+  methods: {
+    setLocalStorgae() {
+      window.localStorage.setItem(STORAGE_KEY, JSON.stringify(this.todos))
+    },
+    addTodo(e) {
+      const text = e.target.value
+      if (text.trim()) {
+        this.todos.push({
+          text,
+          done: false
+        })
+        this.setLocalStorgae()
+      }
+      e.target.value = ''
+    },
+    toggleTodo(val) {
+      val.done = !val.done
+      this.setLocalStorgae()
+    },
+    deleteTodo(todo) {
+      this.todos.splice(this.todos.indexOf(todo), 1)
+      this.setLocalStorgae()
+    },
+    editTodo({ todo, value }) {
+      todo.text = value
+      this.setLocalStorgae()
+    },
+    clearCompleted() {
+      this.todos = this.todos.filter(todo => !todo.done)
+      this.setLocalStorgae()
+    },
+    toggleAll({ done }) {
+      this.todos.forEach(todo => {
+        todo.done = done
+        this.setLocalStorgae()
+      })
+    }
+  },
+  filters: {
+    pluralize: (n, w) => n === 1 ? w : w + 's',
+    capitalize: s => s.charAt(0).toUpperCase() + s.slice(1)
+  }
+}
+</script>
+
+<style lang="scss">
+  @import './index.scss';
+</style>
--- a/src/components/Upload/singleImage.vue
+++ b/src/components/Upload/singleImage.vue
@ -0,0 +1,123 @@
+<template>
+    <div class="upload-container">
+        <el-upload class="image-uploader" :data="dataObj" drag :multiple="false" :show-file-list="false" action="https://httpbin.org/post"
+            :on-success="handleImageScucess">
+            <i class="el-icon-upload"></i>
+            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+        </el-upload>
+        <div class="image-preview">
+            <div class="image-preview-wrapper" v-show="imageUrl.length>1">
+                <img :src="imageUrl+'?imageView2/1/w/200/h/200'">
+                <div class="image-preview-action">
+                    <i @click="rmImage" class="el-icon-delete"></i>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+// 预览效果见付费文章
+import { getToken } from '@/api/qiniu'
+
+export default {
+  name: 'singleImageUpload',
+  props: {
+    value: String
+  },
+  computed: {
+    imageUrl() {
+      return this.value
+    }
+  },
+  data() {
+    return {
+      tempUrl: '',
+      dataObj: { token: '', key: '' }
+    }
+  },
+  methods: {
+    rmImage() {
+      this.emitInput('')
+    },
+    emitInput(val) {
+      this.$emit('input', val)
+    },
+    handleImageScucess() {
+      this.emitInput(this.tempUrl)
+    },
+    beforeUpload() {
+      const _self = this
+      return new Promise((resolve, reject) => {
+        getToken().then(response => {
+          const key = response.data.qiniu_key
+          const token = response.data.qiniu_token
+          _self._data.dataObj.token = token
+          _self._data.dataObj.key = key
+          this.tempUrl = response.data.qiniu_url
+          resolve(true)
+        }).catch(err => {
+          console.log(err)
+          reject(false)
+        })
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+    @import "src/styles/mixin.scss";
+    .upload-container {
+        width: 100%;
+        position: relative;
+        @include clearfix;
+        .image-uploader {
+            width: 60%;
+            float: left;
+        }
+        .image-preview {
+            width: 200px;
+            height: 200px;
+            position: relative;
+            border: 1px dashed #d9d9d9;
+            float: left;
+            margin-left: 50px;
+            .image-preview-wrapper {
+                position: relative;
+                width: 100%;
+                height: 100%;
+                img {
+                    width: 100%;
+                    height: 100%;
+                }
+            }
+            .image-preview-action {
+                position: absolute;
+                width: 100%;
+                height: 100%;
+                left: 0;
+                top: 0;
+                cursor: default;
+                text-align: center;
+                color: #fff;
+                opacity: 0;
+                font-size: 20px;
+                background-color: rgba(0, 0, 0, .5);
+                transition: opacity .3s;
+                cursor: pointer;
+                text-align: center;
+                line-height: 200px;
+                .el-icon-delete {
+                    font-size: 36px;
+                }
+            }
+            &:hover {
+                .image-preview-action {
+                    opacity: 1;
+                }
+            }
+        }
+    }
+
+</style>
--- a/src/components/Upload/singleImage2.vue
+++ b/src/components/Upload/singleImage2.vue
@ -0,0 +1,118 @@
+<template>
+	<div class="singleImageUpload2 upload-container">
+		<el-upload class="image-uploader" :data="dataObj" drag :multiple="false" :show-file-list="false" action="https://httpbin.org/post"
+		  :on-success="handleImageScucess">
+			<i class="el-icon-upload"></i>
+			<div class="el-upload__text">Drag或<em>点击上传</em></div>
+		</el-upload>
+		<div v-show="imageUrl.length>0" class="image-preview">
+			<div class="image-preview-wrapper" v-show="imageUrl.length>1">
+				<img :src="imageUrl">
+				<div class="image-preview-action">
+					<i @click="rmImage" class="el-icon-delete"></i>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import { getToken } from '@/api/qiniu'
+
+export default {
+  name: 'singleImageUpload2',
+  props: {
+    value: String
+  },
+  computed: {
+    imageUrl() {
+      return this.value
+    }
+  },
+  data() {
+    return {
+      tempUrl: '',
+      dataObj: { token: '', key: '' }
+    }
+  },
+  methods: {
+    rmImage() {
+      this.emitInput('')
+    },
+    emitInput(val) {
+      this.$emit('input', val)
+    },
+    handleImageScucess() {
+      this.emitInput(this.tempUrl)
+    },
+    beforeUpload() {
+      const _self = this
+      return new Promise((resolve, reject) => {
+        getToken().then(response => {
+          const key = response.data.qiniu_key
+          const token = response.data.qiniu_token
+          _self._data.dataObj.token = token
+          _self._data.dataObj.key = key
+          this.tempUrl = response.data.qiniu_url
+          resolve(true)
+        }).catch(() => {
+          reject(false)
+        })
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.upload-container {
+	width: 100%;
+	height: 100%;
+	position: relative;
+	.image-uploader {
+		height: 100%;
+	}
+	.image-preview {
+		width: 100%;
+		height: 100%;
+		position: absolute;
+		left: 0px;
+		top: 0px;
+		border: 1px dashed #d9d9d9;
+		.image-preview-wrapper {
+			position: relative;
+			width: 100%;
+			height: 100%;
+			img {
+				width: 100%;
+				height: 100%;
+			}
+		}
+		.image-preview-action {
+			position: absolute;
+			width: 100%;
+			height: 100%;
+			left: 0;
+			top: 0;
+			cursor: default;
+			text-align: center;
+			color: #fff;
+			opacity: 0;
+			font-size: 20px;
+			background-color: rgba(0, 0, 0, .5);
+			transition: opacity .3s;
+			cursor: pointer;
+			text-align: center;
+			line-height: 200px;
+			.el-icon-delete {
+				font-size: 36px;
+			}
+		}
+		&:hover {
+			.image-preview-action {
+				opacity: 1;
+			}
+		}
+	}
+}
+</style>
--- a/src/components/Upload/singleImage3.vue
+++ b/src/components/Upload/singleImage3.vue
@ -0,0 +1,146 @@
+<template>
+	<div class="upload-container">
+		<el-upload class="image-uploader" :data="dataObj" drag :multiple="false" :show-file-list="false" action="https://httpbin.org/post"
+		  :on-success="handleImageScucess">
+			<i class="el-icon-upload"></i>
+			<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+		</el-upload>
+		<div class="image-preview image-app-preview">
+			<div class="image-preview-wrapper" v-show="imageUrl.length>1">
+				<div class='app-fake-conver'>&nbsp&nbsp全球 付费节目单 最热 经济</div>
+				<img :src="imageUrl">
+				<div class="image-preview-action">
+					<i @click="rmImage" class="el-icon-delete"></i>
+				</div>
+			</div>
+		</div>
+		<div class="image-preview">
+			<div class="image-preview-wrapper" v-show="imageUrl.length>1">
+				<img :src="imageUrl">
+				<div class="image-preview-action">
+					<i @click="rmImage" class="el-icon-delete"></i>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import { getToken } from '@/api/qiniu'
+
+export default {
+  name: 'singleImageUpload',
+  props: {
+    value: String
+  },
+  computed: {
+    imageUrl() {
+      return this.value
+    }
+  },
+  data() {
+    return {
+      tempUrl: '',
+      dataObj: { token: '', key: '' }
+    }
+  },
+  methods: {
+    rmImage() {
+      this.emitInput('')
+    },
+    emitInput(val) {
+      this.$emit('input', val)
+    },
+    handleImageScucess(file) {
+      this.emitInput(file.files.file)
+    },
+    beforeUpload() {
+      const _self = this
+      return new Promise((resolve, reject) => {
+        getToken().then(response => {
+          const key = response.data.qiniu_key
+          const token = response.data.qiniu_token
+          _self._data.dataObj.token = token
+          _self._data.dataObj.key = key
+          this.tempUrl = response.data.qiniu_url
+          resolve(true)
+        }).catch(err => {
+          console.log(err)
+          reject(false)
+        })
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+@import "src/styles/mixin.scss";
+.upload-container {
+	width: 100%;
+	position: relative;
+	@include clearfix;
+	.image-uploader {
+		width: 35%;
+		float: left;
+	}
+	.image-preview {
+		width: 200px;
+		height: 200px;
+		position: relative;
+		border: 1px dashed #d9d9d9;
+		float: left;
+		margin-left: 50px;
+		.image-preview-wrapper {
+			position: relative;
+			width: 100%;
+			height: 100%;
+			img {
+				width: 100%;
+				height: 100%;
+			}
+		}
+		.image-preview-action {
+			position: absolute;
+			width: 100%;
+			height: 100%;
+			left: 0;
+			top: 0;
+			cursor: default;
+			text-align: center;
+			color: #fff;
+			opacity: 0;
+			font-size: 20px;
+			background-color: rgba(0, 0, 0, .5);
+			transition: opacity .3s;
+			cursor: pointer;
+			text-align: center;
+			line-height: 200px;
+			.el-icon-delete {
+				font-size: 36px;
+			}
+		}
+		&:hover {
+			.image-preview-action {
+				opacity: 1;
+			}
+		}
+	}
+	.image-app-preview {
+		width: 320px;
+		height: 180px;
+		position: relative;
+		border: 1px dashed #d9d9d9;
+		float: left;
+		margin-left: 50px;
+		.app-fake-conver {
+			height: 44px;
+			position: absolute;
+			width: 100%; // background: rgba(0, 0, 0, .1);
+			text-align: center;
+			line-height: 64px;
+			color: #fff;
+		}
+	}
+}
+</style>
--- a/src/components/UploadExcel/index.vue
+++ b/src/components/UploadExcel/index.vue
@ -0,0 +1,78 @@
+<template>
+  <div>
+    <el-button :loading="loading" type="primary" @click="handleUpload">select excel file</el-button>
+    <input id="excel-upload-input" type="file" accept=".xlsx, .xls" class="c-hide" @change="handkeFileChange">
+  </div>
+</template>
+
+<script>
+import XLSX from 'xlsx'
+
+export default {
+  data() {
+    return {
+      loading: false,
+      excelData: {
+        header: null,
+        results: null
+      }
+    }
+  },
+  methods: {
+    generateDate({ header, results }) {
+      this.excelData.header = header
+      this.excelData.results = results
+      this.loading = false
+      this.$emit('on-selected-file', this.excelData)
+    },
+    handleUpload() {
+      document.getElementById('excel-upload-input').click()
+    },
+    handkeFileChange(e) {
+      this.loading = true
+      const files = e.target.files
+      const itemFile = files[0] // only use files[0]
+      const reader = new FileReader()
+      reader.onload = e => {
+        const data = e.target.result
+        const fixedData = this.fixdata(data)
+        const workbook = XLSX.read(btoa(fixedData), { type: 'base64' })
+        const firstSheetName = workbook.SheetNames[0]
+        const worksheet = workbook.Sheets[firstSheetName]
+        const header = this.get_header_row(worksheet)
+        const results = XLSX.utils.sheet_to_json(worksheet)
+        this.generateDate({ header, results })
+      }
+      reader.readAsArrayBuffer(itemFile)
+    },
+    fixdata(data) {
+      let o = ''
+      let l = 0
+      const w = 10240
+      for (; l < data.byteLength / w; ++l) o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w)))
+      o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)))
+      return o
+    },
+    get_header_row(sheet) {
+      const headers = []
+      const range = XLSX.utils.decode_range(sheet['!ref'])
+      let C
+      const R = range.s.r /* start in the first row */
+      for (C = range.s.c; C <= range.e.c; ++C) { /* walk every column in the range */
+        var cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })] /* find the cell in the first row */
+        var hdr = 'UNKNOWN ' + C // <-- replace with your desired default
+        if (cell && cell.t) hdr = XLSX.utils.format_cell(cell)
+        headers.push(hdr)
+      }
+      return headers
+    }
+  }
+}
+</script>
+
+<style scoped>
+#excel-upload-input{
+  display: none;
+  z-index: -9999;
+}
+</style>
--- a/src/components/jsonEditor/index.vue
+++ b/src/components/jsonEditor/index.vue
@ -0,0 +1,64 @@
+<template>
+  <div class='json-editor'>
+    <textarea ref='textarea'></textarea>
+  </div>
+</template>
+
+<script>
+import CodeMirror from 'codemirror'
+import 'codemirror/addon/lint/lint.css'
+import 'codemirror/lib/codemirror.css'
+import 'codemirror/theme/rubyblue.css'
+require('script-loader!jsonlint')
+import 'codemirror/mode/javascript/javascript'
+import 'codemirror/addon/lint/lint'
+import 'codemirror/addon/lint/json-lint'
+
+export default {
+  name: 'jsonEditor',
+  data() {
+    return {
+      jsonEditor: false
+    }
+  },
+  props: ['value'],
+  watch: {
+    value(value) {
+      const editor_value = this.jsonEditor.getValue()
+      if (value !== editor_value) {
+        this.jsonEditor.setValue(JSON.stringify(this.value, null, 2))
+      }
+    }
+  },
+  mounted() {
+    this.jsonEditor = CodeMirror.fromTextArea(this.$refs.textarea, {
+      lineNumbers: true,
+      mode: 'application/json',
+      gutters: ['CodeMirror-lint-markers'],
+      theme: 'rubyblue',
+      lint: true
+    })
+
+    this.jsonEditor.setValue(JSON.stringify(this.value, null, 2))
+    this.jsonEditor.on('change', cm => {
+      this.$emit('changed', cm.getValue())
+      this.$emit('input', cm.getValue())
+    })
+  },
+  methods: {
+    getValue() {
+      return this.jsonEditor.getValue()
+    }
+  }
+}
+</script>
+
+<style>
+.CodeMirror {
+  height: 100%;
+}
+
+.json-editor .cm-s-rubyblue span.cm-string {
+  color: #F08047;
+}
+</style>
--- a/src/components/twoDndList/index.vue
+++ b/src/components/twoDndList/index.vue
@ -0,0 +1,158 @@
+<template>
+  <div class="twoDndList">
+    <div class="twoDndList-list" :style="{width:width1}">
+      <h3>{{list1Title}}</h3>
+      <draggable :list="list1" class="dragArea" :options="{group:'article'}">
+        <div class="list-complete-item" v-for="element in list1" :key='element.id'>
+          <div class="list-complete-item-handle">[{{element.author}}] {{element.title}}</div>
+          <div style="position:absolute;right:0px;">
+            <span style="float: right ;margin-top: -20px;margin-right:5px;" @click="deleteEle(element)">
+              <i style="color:#ff4949" class="el-icon-delete"></i>
+            </span>
+          </div>
+        </div>
+      </draggable>
+    </div>
+    <div class="twoDndList-list" :style="{width:width2}">
+      <h3>{{list2Title}}</h3>
+      <draggable :list="filterList2" class="dragArea" :options="{group:'article'}">
+        <div class="list-complete-item" v-for="element in filterList2" :key='element.id'>
+          <div class='list-complete-item-handle2' @click="pushEle(element)"> [{{element.author}}] {{element.title}}</div>
+        </div>
+      </draggable>
+    </div>
+  </div>
+</template>
+
+<script>
+import draggable from 'vuedraggable'
+
+export default {
+  name: 'twoDndList',
+  components: { draggable },
+  computed: {
+    filterList2() {
+      return this.list2.filter(v => {
+        if (this.isNotInList1(v)) {
+          return v
+        }
+        return false
+      })
+    }
+  },
+  props: {
+    list1: {
+      type: Array,
+      default() {
+        return []
+      }
+    },
+    list2: {
+      type: Array,
+      default() {
+        return []
+      }
+    },
+    list1Title: {
+      type: String,
+      default: 'list1'
+    },
+    list2Title: {
+      type: String,
+      default: 'list2'
+    },
+    width1: {
+      type: String,
+      default: '48%'
+    },
+    width2: {
+      type: String,
+      default: '48%'
+    }
+  },
+  methods: {
+    isNotInList1(v) {
+      return this.list1.every(k => v.id !== k.id)
+    },
+    isNotInList2(v) {
+      return this.list2.every(k => v.id !== k.id)
+    },
+    deleteEle(ele) {
+      for (const item of this.list1) {
+        if (item.id === ele.id) {
+          const index = this.list1.indexOf(item)
+          this.list1.splice(index, 1)
+          break
+        }
+      }
+      if (this.isNotInList2(ele)) {
+        this.list2.unshift(ele)
+      }
+    },
+    pushEle(ele) {
+      this.list1.push(ele)
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.twoDndList {
+  background: #fff;
+  padding-bottom: 40px;
+  &:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+  .twoDndList-list {
+    float: left;
+    padding-bottom: 30px;
+    &:first-of-type {
+      margin-right: 2%;
+    }
+    .dragArea {
+      margin-top: 15px;
+      min-height: 50px;
+      padding-bottom: 30px;
+    }
+  }
+}
+
+.list-complete-item {
+  cursor: pointer;
+  position: relative;
+  font-size: 14px;
+  padding: 5px 12px;
+  margin-top: 4px;
+  border: 1px solid #bfcbd9;
+  transition: all 1s;
+}
+
+.list-complete-item-handle {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-right: 50px;
+}
+
+.list-complete-item-handle2 {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-right: 20px;
+}
+
+.list-complete-item.sortable-chosen {
+  background: #4AB7BD;
+}
+
+.list-complete-item.sortable-ghost {
+  background: #30B08F;
+}
+
+.list-complete-enter,
+.list-complete-leave-active {
+  opacity: 0;
+}
+</style>
--- a/src/directive/clipboard/clipboard.js
+++ b/src/directive/clipboard/clipboard.js
@ -0,0 +1,49 @@
+// Inspired by https://github.com/Inndy/vue-clipboard2
+const Clipboard = require('clipboard')
+if (!Clipboard) {
+  throw new Error('you shold npm install `clipboard` --save at first ')
+}
+
+export default {
+  bind(el, binding) {
+    if (binding.arg === 'success') {
+      el._v_clipboard_success = binding.value
+    } else if (binding.arg === 'error') {
+      el._v_clipboard_error = binding.value
+    } else {
+      const clipboard = new Clipboard(el, {
+        text() { return binding.value },
+        action() { return binding.arg === 'cut' ? 'cut' : 'copy' }
+      })
+      clipboard.on('success', e => {
+        const callback = el._v_clipboard_success
+        callback && callback(e) // eslint-disable-line
+      })
+      clipboard.on('error', e => {
+        const callback = el._v_clipboard_error
+        callback && callback(e) // eslint-disable-line
+      })
+      el._v_clipboard = clipboard
+    }
+  },
+  update(el, binding) {
+    if (binding.arg === 'success') {
+      el._v_clipboard_success = binding.value
+    } else if (binding.arg === 'error') {
+      el._v_clipboard_error = binding.value
+    } else {
+      el._v_clipboard.text = function() { return binding.value }
+      el._v_clipboard.action = function() { return binding.arg === 'cut' ? 'cut' : 'copy' }
+    }
+  },
+  unbind(el, binding) {
+    if (binding.arg === 'success') {
+      delete el._v_clipboard_success
+    } else if (binding.arg === 'error') {
+      delete el._v_clipboard_error
+    } else {
+      el._v_clipboard.destroy()
+      delete el._v_clipboard
+    }
+  }
+}
--- a/src/directive/clipboard/index.js
+++ b/src/directive/clipboard/index.js
@ -0,0 +1,13 @@
+import Clipboard from './clipboard'
+
+const install = function(Vue) {
+  Vue.directive('Clipboard', Clipboard)
+}
+
+if (window.Vue) {
+  window.clipboard = Clipboard
+  Vue.use(install); // eslint-disable-line
+}
+
+Clipboard.install = install
+export default Clipboard
--- a/src/directive/sticky.js
+++ b/src/directive/sticky.js
@ -0,0 +1,91 @@
+const vueSticky = {}
+let listenAction
+vueSticky.install = Vue => {
+  Vue.directive('sticky', {
+    inserted(el, binding) {
+      const params = binding.value || {}
+      const stickyTop = params.stickyTop || 0
+      const zIndex = params.zIndex || 1000
+      const elStyle = el.style
+
+      elStyle.position = '-webkit-sticky'
+      elStyle.position = 'sticky'
+        // if the browser support css sticky（Currently Safari, Firefox and Chrome Canary）
+        // if (~elStyle.position.indexOf('sticky')) {
+        //     elStyle.top = `${stickyTop}px`;
+        //     elStyle.zIndex = zIndex;
+        //     return
+        // }
+      const elHeight = el.getBoundingClientRect().height
+      const elWidth = el.getBoundingClientRect().width
+      elStyle.cssText = `top: ${stickyTop}px; z-index: ${zIndex}`
+
+      const parentElm = el.parentNode || document.documentElement
+      const placeholder = document.createElement('div')
+      placeholder.style.display = 'none'
+      placeholder.style.width = `${elWidth}px`
+      placeholder.style.height = `${elHeight}px`
+      parentElm.insertBefore(placeholder, el)
+
+      let active = false
+
+      const getScroll = (target, top) => {
+        const prop = top ? 'pageYOffset' : 'pageXOffset'
+        const method = top ? 'scrollTop' : 'scrollLeft'
+        let ret = target[prop]
+        if (typeof ret !== 'number') {
+          ret = window.document.documentElement[method]
+        }
+        return ret
+      }
+
+      const sticky = () => {
+        if (active) {
+          return
+        }
+        if (!elStyle.height) {
+          elStyle.height = `${el.offsetHeight}px`
+        }
+
+        elStyle.position = 'fixed'
+        elStyle.width = `${elWidth}px`
+        placeholder.style.display = 'inline-block'
+        active = true
+      }
+
+      const reset = () => {
+        if (!active) {
+          return
+        }
+
+        elStyle.position = ''
+        placeholder.style.display = 'none'
+        active = false
+      }
+
+      const check = () => {
+        const scrollTop = getScroll(window, true)
+        const offsetTop = el.getBoundingClientRect().top
+        if (offsetTop < stickyTop) {
+          sticky()
+        } else {
+          if (scrollTop < elHeight + stickyTop) {
+            reset()
+          }
+        }
+      }
+      listenAction = () => {
+        check()
+      }
+
+      window.addEventListener('scroll', listenAction)
+    },
+
+    unbind() {
+      window.removeEventListener('scroll', listenAction)
+    }
+  })
+}
+
+export default vueSticky
+
--- a/src/directive/waves/index.js
+++ b/src/directive/waves/index.js
@ -0,0 +1,13 @@
+import waves from './waves'
+
+const install = function(Vue) {
+  Vue.directive('waves', waves)
+}
+
+if (window.Vue) {
+  window.waves = waves
+  Vue.use(install); // eslint-disable-line
+}
+
+waves.install = install
+export default waves
--- a/src/directive/waves/waves.css
+++ b/src/directive/waves/waves.css
@ -0,0 +1,26 @@
+.waves-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;
+}
+
+.waves-ripple.z-active {
+    opacity: 0;
+    -webkit-transform: scale(2);
+    -ms-transform: scale(2);
+    transform: scale(2);
+    -webkit-transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
+    transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
+    transition: opacity 1.2s ease-out, transform 0.6s ease-out;
+    transition: opacity 1.2s ease-out, transform 0.6s ease-out, -webkit-transform 0.6s ease-out;
+}
--- a/src/directive/waves/waves.js
+++ b/src/directive/waves/waves.js
@ -0,0 +1,42 @@
+import './waves.css'
+
+export default{
+  bind(el, binding) {
+    el.addEventListener('click', e => {
+      const customOpts = Object.assign({}, binding.value)
+      const opts = Object.assign({
+        ele: el, // 波纹作用元素
+        type: 'hit', // hit点击位置扩散center中心点扩展
+        color: 'rgba(0, 0, 0, 0.15)' // 波纹颜色
+      }, customOpts)
+      const target = opts.ele
+      if (target) {
+        target.style.position = 'relative'
+        target.style.overflow = 'hidden'
+        const rect = target.getBoundingClientRect()
+        let ripple = target.querySelector('.waves-ripple')
+        if (!ripple) {
+          ripple = document.createElement('span')
+          ripple.className = 'waves-ripple'
+          ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px'
+          target.appendChild(ripple)
+        } else {
+          ripple.className = 'waves-ripple'
+        }
+        switch (opts.type) {
+          case 'center':
+            ripple.style.top = (rect.height / 2 - ripple.offsetHeight / 2) + 'px'
+            ripple.style.left = (rect.width / 2 - ripple.offsetWidth / 2) + 'px'
+            break
+          default:
+            ripple.style.top = (e.pageY - rect.top - ripple.offsetHeight / 2 - document.body.scrollTop) + 'px'
+            ripple.style.left = (e.pageX - rect.left - ripple.offsetWidth / 2 - document.body.scrollLeft) + 'px'
+        }
+        ripple.style.backgroundColor = opts.color
+        ripple.className = 'waves-ripple z-active'
+        return false
+      }
+    }, false)
+  }
+}
+
--- a/src/errorLog.js
+++ b/src/errorLog.js
@ -0,0 +1,14 @@
+import Vue from 'vue'
+import errLog from '@/store/errLog'
+
+// 生产环境错误日志
+if (process.env.NODE_ENV === 'production') {
+  Vue.config.errorHandler = function(err, vm) {
+    console.log(err, window.location.href)
+    errLog.pushLog({
+      err,
+      url: window.location.href,
+      vm
+    })
+  }
+}
--- a/src/filters/index.js
+++ b/src/filters/index.js
@ -0,0 +1,103 @@
+function pluralize(time, label) {
+  if (time === 1) {
+    return time + label
+  }
+  return time + label + 's'
+}
+export function timeAgo(time) {
+  const between = Date.now() / 1000 - Number(time)
+  if (between < 3600) {
+    return pluralize(~~(between / 60), ' minute')
+  } else if (between < 86400) {
+    return pluralize(~~(between / 3600), ' hour')
+  } else {
+    return pluralize(~~(between / 86400), ' day')
+  }
+}
+
+export function parseTime(time, cFormat) {
+  if (arguments.length === 0) {
+    return null
+  }
+
+  if ((time + '').length === 10) {
+    time = +time * 1000
+  }
+
+  const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
+  let date
+  if (typeof time === 'object') {
+    date = time
+  } else {
+    date = new Date(parseInt(time))
+  }
+  const formatObj = {
+    y: date.getFullYear(),
+    m: date.getMonth() + 1,
+    d: date.getDate(),
+    h: date.getHours(),
+    i: date.getMinutes(),
+    s: date.getSeconds(),
+    a: date.getDay()
+  }
+  const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
+    let value = formatObj[key]
+    if (key === 'a') return ['一', '二', '三', '四', '五', '六', '日'][value - 1]
+    if (result.length > 0 && value < 10) {
+      value = '0' + value
+    }
+    return value || 0
+  })
+  return time_str
+}
+
+export function formatTime(time, option) {
+  time = +time * 1000
+  const d = new Date(time)
+  const now = Date.now()
+
+  const diff = (now - d) / 1000
+
+  if (diff < 30) {
+    return '刚刚'
+  } else if (diff < 3600) { // less 1 hour
+    return Math.ceil(diff / 60) + '分钟前'
+  } else if (diff < 3600 * 24) {
+    return Math.ceil(diff / 3600) + '小时前'
+  } else if (diff < 3600 * 24 * 2) {
+    return '1天前'
+  }
+  if (option) {
+    return parseTime(time, option)
+  } else {
+    return d.getMonth() + 1 + '月' + d.getDate() + '日' + d.getHours() + '时' + d.getMinutes() + '分'
+  }
+}
+
+/* 数字 格式化*/
+export function nFormatter(num, digits) {
+  const si = [
+        { value: 1E18, symbol: 'E' },
+        { value: 1E15, symbol: 'P' },
+        { value: 1E12, symbol: 'T' },
+        { value: 1E9, symbol: 'G' },
+        { value: 1E6, symbol: 'M' },
+        { value: 1E3, symbol: 'k' }
+  ]
+  for (let i = 0; i < si.length; i++) {
+    if (num >= si[i].value) {
+      return (num / si[i].value + 0.1).toFixed(digits).replace(/\.0+$|(\.[0-9]*[1-9])0+$/, '$1') + si[i].symbol
+    }
+  }
+  return num.toString()
+}
+
+export function html2Text(val) {
+  const div = document.createElement('div')
+  div.innerHTML = val
+  return div.textContent || div.innerText
+}
+
+export function toThousandslsFilter(num) {
+  return (+num || 0).toString().replace(/^-?\d+/g, m => m.replace(/(?=(?!\b)(\d{3})+$)/g, ','))
+}
--- a/src/icons/index.js
+++ b/src/icons/index.js
@ -0,0 +1,12 @@
+import Vue from 'vue'
+import IconSvg from '@/components/Icon-svg'// svg组件
+import generateIconsView from '@/views/svg-icons/generateIconsView.js'// just for views/icons , you can delete it
+// register globally
+
+Vue.component('icon-svg', IconSvg)
+
+const requireAll = requireContext => requireContext.keys().map(requireContext)
+const req = require.context('./svg', false, /\.svg$/)
+const iconMap = requireAll(req)
+
+generateIconsView.generate(iconMap) // just for views/icons , you can delete it
--- a/src/icons/svg/404.svg
+++ b/src/icons/svg/404.svg
@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1503994850540" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10206" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M931.6 585.6l0 79c28.6-60.2 44.8-127.4 44.8-198.4C976.4 211 769.4 4 514.2 4S52 211 52 466.2c0 3.2 0.2 6.4 0.2 9.6l166-206 96.4 0L171.8 485.6l46.4 0 0-54.8 99.2-154.6 0 209.4 0 100 0 82.4-99.2 0 0-82.4L67.6 585.6c43 161 170.6 287.4 332.4 328.6-10.4 26.2-40.6 89.4-90.8 100.6-62.2 14 168.8 3.4 333.6-104.6 126.6-36.6 230.8-125.8 287.4-242.2l-97.6 0 0-82.4-166.2 0 0-87.2 0-12.8L666.4 476l166.2-206.2 94 0-140.4 215.8 46.4 0 0-59 99.2-154 0 213.2L931.8 585.6zM366.2 608c-4.8-11.2-7.2-23.2-7.2-36L359 357.6c0-12.8 2.4-24.8 7.2-36 4.8-11.2 11.4-21 19.6-29.2 8.2-8.2 18-14.8 29.2-19.6 11.2-4.8 23.2-7.2 36-7.2l81.6 0c12.8 0 24.8 2.4 36 7.2 11 4.8 20.6 11.2 28.8 19.2l-88.6 129.4 0-23c0-4.8-1.6-8.8-4.8-12-3.2-3.2-7.2-4.8-12-4.8-4.8 0-8.8 1.6-12 4.8-3.2 3.2-4.8 7.2-4.8 12l0 72L372.6 620C370.2 616.2 368 612.2 366.2 608zM624.4 572c0 12.8-2.4 24.8-7.2 36-4.8 11.2-11.4 21-19.6 29.2-8.2 8.2-18 14.8-29.2 19.6-11.2 4.8-23.2 7.2-36 7.2l-81.6 0c-12.8 0-24.8-2.4-36-7.2-11.2-4.8-21-11.4-29.2-19.6-3.6-3.6-7-7.8-10-12l99.2-144.6 0 50.6c0 4.8 1.6 8.8 4.8 12 3.2 3.2 7.2 4.8 12 4.8 4.8 0 8.8-1.6 12-4.8 3.2-3.2 4.8-7.2 4.8-12l0-99.6 92.6-135.2c6.6 7.4 12 15.8 16 25.2 4.8 11.2 7.2 23.2 7.2 36L624.2 572z" p-id="10207"></path></svg>
--- a/src/icons/svg/bug.svg
+++ b/src/icons/svg/bug.svg
@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1503994864347" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10314" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M969.142857 548.571429q0 14.848-10.861714 25.709714t-25.709714 10.861714l-128 0q0 97.718857-38.290286 165.705143l118.857143 119.442286q10.861714 10.861714 10.861714 25.709714t-10.861714 25.709714q-10.276571 10.861714-25.709714 10.861714t-25.709714-10.861714l-113.152-112.566857q-2.852571 2.852571-8.557714 7.424t-23.990857 16.274286-37.156571 20.845714-46.848 16.566857-55.442286 7.424l0-512-73.142857 0 0 512q-29.147429 0-58.002286-7.716571t-49.700571-18.870857-37.705143-22.272-24.868571-18.578286l-8.557714-8.009143-104.557714 118.272q-11.446857 11.995429-27.428571 11.995429-13.714286 0-24.576-9.142857-10.861714-10.276571-11.702857-25.417143t8.850286-26.587429l115.419429-129.718857q-33.133714-65.133714-33.133714-156.562286l-128 0q-14.848 0-25.709714-10.861714t-10.861714-25.709714 10.861714-25.709714 25.709714-10.861714l128 0 0-168.009143-98.852571-98.852571q-10.861714-10.861714-10.861714-25.709714t10.861714-25.709714 25.709714-10.861714 25.709714 10.861714l98.852571 98.852571 482.304 0 98.852571-98.852571q10.861714-10.861714 25.709714-10.861714t25.709714 10.861714 10.861714 25.709714-10.861714 25.709714l-98.852571 98.852571 0 168.009143 128 0q14.848 0 25.709714 10.861714t10.861714 25.709714zM694.857143 219.428571l-365.714286 0q0-75.995429 53.430857-129.426286t129.426286-53.430857 129.426286 53.430857 53.430857 129.426286z" p-id="10315"></path></svg>
--- a/src/icons/svg/chart.svg
+++ b/src/icons/svg/chart.svg
@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1503994873331" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10422" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M64 448 320 448 320 960 64 960 64 448 64 448ZM704 256 960 256 960 960 704 960 704 256 704 256ZM384 64 640 64 640 960 384 960 384 64 384 64Z" p-id="10423"></path></svg>
--- a/src/icons/svg/clipboard.svg
+++ b/src/icons/svg/clipboard.svg
@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1506419860538" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4662" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M438.857143 950.857143l512 0 0-365.714286-237.714286 0q-22.820571 0-38.838857-16.018286t-16.018286-38.838857l0-237.714286-219.428571 0 0 658.285714zM585.142857 128l0-36.571429q0-7.460571-5.412571-12.873143t-12.873143-5.412571l-402.285714 0q-7.460571 0-12.873143 5.412571t-5.412571 12.873143l0 36.571429q0 7.460571 5.412571 12.873143t12.873143 5.412571l402.285714 0q7.460571 0 12.873143-5.412571t5.412571-12.873143zM731.428571 512l170.861714 0-170.861714-170.861714 0 170.861714zM1024 585.142857l0 384q0 22.820571-16.018286 38.838857t-38.838857 16.018286l-548.571429 0q-22.820571 0-38.838857-16.018286t-16.018286-38.838857l0-91.428571-310.857143 0q-22.820571 0-38.838857-16.018286t-16.018286-38.838857l0-768q0-22.820571 16.018286-38.838857t38.838857-16.018286l621.714286 0q22.820571 0 38.838857 16.018286t16.018286 38.838857l0 187.465143q11.995429 7.460571 20.553143 16.018286l233.179429 233.179429q16.018286 16.018286 27.428571 43.446857t11.410286 50.322286z" p-id="4663"></path></svg>
--- a/src/icons/svg/component.svg
+++ b/src/icons/svg/component.svg
@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1506329916765" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1661" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M64 64 448 64 448 448 64 448 64 64ZM64 576 448 576 448 960 64 960 64 576ZM576 576 960 576 960 960 576 960 576 576ZM768 448C874.038669 448 960 362.038672 960 256 960 149.961328 874.038669 64 768 64 661.961328 64 576 149.961328 576 256 576 362.038672 661.961328 448 768 448Z" p-id="1662"></path></svg>
--- a/src/icons/svg/drag.svg
+++ b/src/icons/svg/drag.svg
@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1503994190757" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9007" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M574.957891 267.016403 511.503696 267.016403l204.64896 0L511.212054 63.654762l-203.361641 203.361641L449.041086 267.016403l0 189.662641L258.687714 456.679044l0 125.916804L449.041086 582.595848l0 190.354396 125.916804 0L574.957891 582.595848l188.874695 0L763.832586 456.679044 574.957891 456.679044 574.957891 267.016403zM511.25401 960.345238l189.620685-187.394994L323.125305 772.950244 511.25401 960.345238zM71.291696 518.891967l187.394994 189.620685L258.68669 330.762239 71.291696 518.891967zM763.832586 330.762239l0 377.74939 188.874695-189.620685L763.832586 330.762239z" p-id="9008"></path></svg>
--- a/src/icons/svg/email.svg
+++ b/src/icons/svg/email.svg
@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1503994210967" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9120" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M513 583.8l448.5-448.5c-11.6-4.7-24.3-7.3-37.5-7.3L100 128c-12.7 0-24.9 2.4-36.1 6.7L513 583.8z" p-id="9121"></path><path d="M513 674.3 14.6 175.9C5.3 191.1 0 208.9 0 228l0 568c0 55.2 44.8 100 100 100l824 0c55.2 0 100-44.8 100-100l0-568c0-18.5-5.1-35.9-13.9-50.8L513 674.3z" p-id="9122"></path></svg>
--- a/src/icons/svg/example.svg
+++ b/src/icons/svg/example.svg
@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1503994811583" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9878" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M770.56 460.8l250.88 0C998.4 220.16 803.84 25.6 563.2 2.56l0 250.88C668.16 273.92 750.08 355.84 770.56 460.8L770.56 460.8zM770.56 460.8" p-id="9879"></path><path d="M460.8 253.44 460.8 2.56C220.16 25.6 25.6 220.16 2.56 460.8l250.88 0C273.92 355.84 355.84 273.92 460.8 253.44L460.8 253.44zM460.8 253.44" p-id="9880"></path><path d="M563.2 770.56l0 250.88c243.2-23.04 435.2-217.6 460.8-460.8l-250.88 0C750.08 668.16 668.16 750.08 563.2 770.56L563.2 770.56zM563.2 770.56" p-id="9881"></path><path d="M253.44 563.2 2.56 563.2c23.04 243.2 217.6 435.2 460.8 460.8l0-250.88C355.84 750.08 273.92 668.16 253.44 563.2L253.44 563.2zM253.44 563.2" p-id="9882"></path></svg>
--- a/src/icons/svg/excel.svg
+++ b/src/icons/svg/excel.svg
@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1503994842272" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10097" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M625.664 132.608V199.68h309.76v43.008h-309.76V312.32h309.76v43.008h-309.76v68.608h309.76v43.008h-309.76v68.608h309.76v43.008h-309.76v68.608h309.76v43.008h-309.76v68.096h309.76v43.008h-309.76v89.088H1024v-757.76h-398.336zM0 914.944L577.024 1024V0L0 109.056" p-id="10098"></path><path d="M229.376 660.48H139.776l118.272-187.904-112.64-180.736h92.16l65.536 119.808L370.688 291.84h89.088l-112.64 177.664L466.944 660.48H373.248l-70.144-125.44L229.376 660.48z" p-id="10099"></path></svg>
--- a/src/icons/svg/eye.svg
+++ b/src/icons/svg/eye.svg
@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1503993826520" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7878" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M941.677063 391.710356c9.337669-14.005992 6.224772-32.68133-6.224772-43.575447-14.005992-10.894118-32.68133-7.78122-43.575447 6.224771-1.556449 1.556449-174.300768 205.426673-379.727441 205.426673-199.200878 0-379.727441-205.426673-381.28389-206.982098-10.894118-12.450567-31.124881-14.005992-43.575448-3.112898-12.450567 10.894118-14.005992 31.124881-3.112897 43.575448 3.112897 4.668323 40.46255 46.687322 99.600439 93.375667l-79.369676 82.48155c-12.450567 12.450567-10.894118 32.68133 1.556449 43.575448 3.112897 6.224772 10.894118 9.337669 18.675338 9.337669 7.78122 0 15.562441-3.112897 21.787213-9.337669l85.594447-88.706321c40.46255 28.013007 88.706321 54.469566 141.619438 73.14388L340.959485 707.631586c-4.668323 17.118889 4.669346 34.237779 21.787213 38.906101h9.337669c14.005992 0 26.456558-9.337669 29.568432-23.343661l32.68133-110.494556c24.90011 4.668323 51.356668 7.78122 77.813227 7.78122s52.913117-3.112897 77.813227-7.78122l32.68133 108.938108c3.112897 14.005992 17.118889 23.343661 29.569456 23.343661 3.112897 0 6.224772 0 7.78122-1.556449 17.118889-4.669346 26.456558-21.787212 21.788236-38.906102l-32.68133-108.938108c52.913117-18.675338 101.156888-45.131897 141.619438-73.14388l84.037998 87.150896c6.224772 6.224772 14.005992 9.337669 21.787212 9.337669 7.78122 0 15.562441-3.112897 21.787212-9.337669 12.450567-12.450567 12.450567-31.124881 1.556449-43.575448l-79.369675-82.48155c63.808258-46.688345 101.158934-91.820242 101.158934-91.820242z" p-id="7879"></path></svg>
--- a/src/icons/svg/form.svg
+++ b/src/icons/svg/form.svg
@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1506330387278" class="icon" style="" viewBox="0 0 1069 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1447" xmlns:xlink="http://www.w3.org/1999/xlink" width="66.8125" height="64"><defs><style type="text/css"></style></defs><path d="M746.027944 190.083832q-11.241517 0-18.906188-7.664671t-12.774451-17.884232-7.664671-20.9501-2.55489-17.884232l0-125.700599 2.043912 0q9.197605 0 17.373253 2.043912t19.928144 9.708583 28.61477 21.461078 42.411178 36.279441q27.592814 24.526946 43.944112 41.389222t25.037924 28.61477 10.730539 19.928144 2.043912 14.307385l0 16.351297-150.227545 0zM1063.856287 671.42515q3.065868 8.175649 4.087824 20.439122t-10.219561 23.50499q-5.10978 5.10978-9.197605 9.708583t-7.153693 7.664671q-4.087824 4.087824-7.153693 6.131737l-86.866267-85.844311q6.131737-5.10978 13.796407-12.263473t12.774451-11.241517q12.263473-11.241517 26.570858-9.708583t23.50499 6.642715q10.219561 5.10978 21.972056 17.884232t17.884232 27.081836zM703.105788 766.467066q22.483034 0 37.812375-12.263473l-198.259481 206.43513-282.05988 0q-19.417166 0-42.411178-11.241517t-42.922156-29.636727-33.213573-42.411178-13.285429-49.56487l0-695.952096q0-21.461078 9.708583-44.966068t26.570858-42.411178 38.323353-31.680639 44.966068-12.774451l391.409182 0 0 127.744511q0 19.417166 6.131737 41.9002t18.906188 41.389222 33.213573 31.680639 49.053892 12.774451l149.205589 0 0 338.267465-140.007984 145.117764q11.241517-16.351297 11.241517-35.768463 0-26.570858-18.906188-45.477046t-45.477046-18.906188l-383.233533 0q-26.570858 0-44.966068 18.906188t-18.39521 45.477046 18.39521 44.966068 44.966068 18.39521l383.233533 0zM319.872255 383.233533q-26.570858 0-44.966068 18.906188t-18.39521 45.477046 18.39521 44.966068 44.966068 18.39521l383.233533 0q26.570858 0 45.477046-18.39521t18.906188-44.966068-18.906188-45.477046-45.477046-18.906188l-383.233533 0zM705.149701 895.233533l13.285429-13.285429 25.548902-25.548902q15.329341-15.329341 33.724551-34.235529t36.790419-37.301397q43.944112-43.944112 99.129741-98.107784l85.844311 85.844311-99.129741 99.129741-36.790419 36.790419-33.724551 33.724551q-14.307385 14.307385-24.015968 24.526946t-10.730539 11.241517q-5.10978 4.087824-11.241517 8.686627t-12.263473 7.664671-18.906188 7.664671-26.05988 8.686627-25.548902 7.153693-18.39521 4.087824q-12.263473 2.043912-16.351297-3.065868t-2.043912-17.373253q1.021956-6.131737 4.087824-18.39521t7.153693-25.037924 7.664671-24.015968 5.620758-15.329341q6.131737-13.285429 16.351297-23.50499z" p-id="1448"></path></svg>
--- a/src/icons/svg/icon.svg
+++ b/src/icons/svg/icon.svg
@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1504000178424" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14764" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M871.424 61.44q18.432 0 34.816 6.656t28.672 18.944 19.456 28.672 7.168 35.84l0 720.896q0 38.912-25.088 64.512t-62.976 25.6l-721.92 0q-40.96 0-66.048-26.624t-25.088-66.56l0-718.848q0-35.84 24.576-62.464t65.536-26.624l720.896 0zM633.856 829.44q18.432 0 26.624-8.704t8.192-23.04q0-13.312-8.192-22.528t-26.624-9.216l-62.464 0q1.024-2.048 1.024-6.144l0-507.904 63.488 0q18.432 0 25.6-9.216t7.168-22.528-7.168-22.528-25.6-9.216l-249.856 0q-18.432 0-25.6 9.216t-7.168 22.528 7.168 22.528 25.6 9.216l57.344 0 0 507.904q0 2.048 0.512 3.072t0.512 3.072l-56.32 0q-18.432 0-26.624 9.216t-8.192 22.528q0 14.336 8.192 23.04t26.624 8.704l245.76 0z" p-id="14765"></path></svg>
--- a/src/icons/svg/lock.svg
+++ b/src/icons/svg/lock.svg
@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1503994776084" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9662" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M818.246893 412.326906l-45.988404 0 0-70.991868c0-152.307871-123.463939-275.778974-275.778974-275.778974s-275.78102 123.471103-275.78102 275.778974l0 70.991868-45.987381 0c-25.379017 0-45.988404 20.566408-45.988404 45.987381l0 455.407074c0 25.428136 20.560268 45.988404 45.988404 45.988404l643.535779 0c25.37697 0 45.988404-20.560268 45.988404-45.988404L864.235296 458.314287C864.190271 432.893314 843.623863 412.326906 818.246893 412.326906L818.246893 412.326906zM680.331823 412.326906 312.62516 412.326906l0-70.991868c0-101.55393 82.344426-183.853331 183.854355-183.853331 101.509928 0 183.853331 82.343403 183.853331 183.853331L680.332846 412.326906 680.331823 412.326906zM680.331823 412.326906" p-id="9663"></path></svg>
--- a/src/icons/svg/password.svg
+++ b/src/icons/svg/password.svg
@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1503994678729" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9229" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M780.8 354.579692 665.6 354.579692 665.6 311.689846c0-72.310154-19.849846-193.299692-153.6-193.299692-138.870154 0-153.6 135.049846-153.6 193.299692l0 42.889846L243.2 354.579692 243.2 311.689846C243.2 122.249846 348.790154 0 512 0s268.8 122.249846 268.8 311.689846L780.8 354.579692zM588.8 669.420308C588.8 625.900308 554.220308 590.769231 512 590.769231s-76.8 35.131077-76.8 78.651077c0 29.459692 15.399385 54.468923 38.439385 67.820308l0 89.639385c0 21.740308 17.250462 39.699692 38.4 39.699692s38.4-17.959385 38.4-39.699692l0-89.639385C573.44 723.889231 588.8 698.88 588.8 669.420308zM896 512l0 393.609846c0 65.260308-51.869538 118.390154-115.2 118.390154L243.2 1024c-63.291077 0-115.2-53.129846-115.2-118.390154L128 512c0-65.220923 51.869538-118.390154 115.2-118.390154l537.6 0C844.130462 393.609846 896 446.779077 896 512z" p-id="9230"></path></svg>
--- a/src/icons/svg/people.svg
+++ b/src/icons/svg/people.svg
@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1503994743287" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9554" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M780.108 761.059c54.451 60.351 87.706 138.983 87.706 225.358 0 12.015-0.659 23.882-1.902 35.581l-71.955 0c1.589-11.675 2.695-23.493 2.695-35.581 0-71.578-29.094-136.386-76.189-185.002C658.778 836.02 587.76 855.95 512 855.95c-75.689 0-146.65-19.888-208.294-54.432-47.129 48.604-76.358 113.305-76.358 184.9 0 12.088 1.105 23.906 2.695 35.581l-71.955 0c-1.243-11.699-1.902-23.567-1.902-35.581 0-86.366 33.19-165.055 87.587-225.446-96.765-78.277-158.75-197.84-158.75-331.998C85.023 193.163 276.188 2.001 512 2.001s426.977 191.162 426.977 426.972C938.977 563.184 876.94 682.785 780.108 761.059zM512 295.787c-196.511 0-355.814-80.302-355.814 122.251 0 202.551 159.303 366.749 355.814 366.749s355.814-164.199 355.814-366.749C867.814 215.485 708.511 295.787 512 295.787zM678.047 500.136c-26.2 0-47.442-21.24-47.442-47.442 0-26.197 21.242-47.442 47.442-47.442 26.202 0 47.442 21.244 47.442 47.442C725.488 478.896 704.249 500.136 678.047 500.136zM654.326 630.601c0 32.754-63.722 59.302-142.326 59.302s-142.326-26.549-142.326-59.302c0-8.445 4.376-16.446 12.017-23.719 21.98 20.927 71.979 35.579 130.309 35.579s108.329-14.652 130.309-35.579C649.949 614.155 654.326 622.156 654.326 630.601zM345.953 500.136c-26.202 0-47.442-21.24-47.442-47.442 0-26.197 21.24-47.442 47.442-47.442 26.2 0 47.442 21.244 47.442 47.442C393.395 478.896 372.153 500.136 345.953 500.136z" p-id="9555"></path></svg>
--- a/src/icons/svg/qq.svg
+++ b/src/icons/svg/qq.svg
--- a/src/icons/svg/star.svg
+++ b/src/icons/svg/star.svg
@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1503994797471" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9770" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M565.272827 34.627285l112.095872 237.542288c8.706637 18.321022 25.411424 31.051641 44.82285 33.996289l250.776598 38.081157c48.697387 7.411435 68.22505 70.046082 32.933559 105.979639l-181.494353 184.937155c-13.998147 14.230618-20.352386 34.815477-17.05903 54.93539l42.819161 261.127145c8.346858 50.695541-42.64204 89.451974-86.225039 65.51841l-224.307979-123.271141c-17.285968-9.525824-37.992596-9.525824-55.278564 0l-224.313514 123.271141c-43.582999 23.933565-94.571897-14.822869-86.219504-65.51841l42.813626-261.127145c3.321031-20.119914-3.088559-40.704772-17.086706-54.93539l-181.439002-184.937155c-35.285956-35.933557-15.819179-98.57374 32.933559-105.979639l250.748923-38.081157c19.350541-2.939112 36.083003-15.675267 44.75643-33.996289l112.123547-237.542288C480.497972-11.540583 543.509003-11.540583 565.272827 34.627285z" p-id="9771"></path></svg>
--- a/src/icons/svg/tab.svg
+++ b/src/icons/svg/tab.svg
@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1506329761546" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1384" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M622.276923 39.384615H401.723077c-13.784615 0-23.630769 11.815385-23.630769 25.6v49.23077c0 13.784615 11.815385 25.6 23.630769 25.6h220.553846c13.784615 0 23.630769-11.815385 23.630769-25.6V64.984615c1.969231-13.784615-9.846154-25.6-23.630769-25.6z m336.738462 0H738.461538c-13.784615 0-25.6 11.815385-25.6 25.6v49.23077c0 13.784615 11.815385 25.6 25.6 25.6h220.553847c13.784615-1.969231 25.6-11.815385 25.6-25.6V64.984615c0-13.784615-11.815385-25.6-25.6-25.6z m0 165.415385H334.769231c-13.784615 0-25.6-11.815385-25.6-25.6V64.984615c0-13.784615-11.815385-25.6-25.6-25.6H64.984615C51.2 39.384615 39.384615 51.2 39.384615 64.984615v896c0 11.815385 11.815385 23.630769 25.6 23.63077h894.03077c13.784615 0 25.6-11.815385 25.6-25.6v-728.615385c0-13.784615-11.815385-25.6-25.6-25.6z" p-id="1385"></path></svg>
--- a/src/icons/svg/table.svg
+++ b/src/icons/svg/table.svg
@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1503994138443" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8433" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M67.039347 100.410897l889.919259 0 0 200.231347-889.919259 0 0-200.231347Z" p-id="8434"></path><path d="M67.039347 345.138668l266.976494 0 0 266.975471-266.976494 0 0-266.975471Z" p-id="8435"></path><path d="M67.039347 656.610562l266.976494 0 0 266.976494-266.976494 0 0-266.976494Z" p-id="8436"></path><path d="M378.511241 345.138668l266.976494 0 0 266.975471-266.976494 0 0-266.975471Z" p-id="8437"></path><path d="M378.511241 656.610562l266.976494 0 0 266.976494-266.976494 0 0-266.976494Z" p-id="8438"></path><path d="M689.983135 345.138668l266.976494 0 0 266.975471-266.976494 0 0-266.975471Z" p-id="8439"></path><path d="M689.983135 656.610562l266.976494 0 0 266.976494-266.976494 0 0-266.976494Z" p-id="8440"></path><path d="M67.039347 100.410897l889.919259 0 0 200.231347-889.919259 0 0-200.231347Z" p-id="8441"></path><path d="M67.039347 345.138668l266.976494 0 0 266.975471-266.976494 0 0-266.975471Z" p-id="8442"></path><path d="M67.039347 656.610562l266.976494 0 0 266.976494-266.976494 0 0-266.976494Z" p-id="8443"></path><path d="M378.511241 345.138668l266.976494 0 0 266.975471-266.976494 0 0-266.975471Z" p-id="8444"></path><path d="M378.511241 656.610562l266.976494 0 0 266.976494-266.976494 0 0-266.976494Z" p-id="8445"></path><path d="M689.983135 345.138668l266.976494 0 0 266.975471-266.976494 0 0-266.975471Z" p-id="8446"></path><path d="M689.983135 656.610562l266.976494 0 0 266.976494-266.976494 0 0-266.976494Z" p-id="8447"></path></svg>
--- a/src/icons/svg/theme.svg
+++ b/src/icons/svg/theme.svg
@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1503994829667" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9989" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M788.00002 159.831491C756.00002 128 746 128 724.3801 128L642 128C642 128 576 188.923077 512 188.923077 448 188.923077 384 128 384 128L299.204802 128C276.629934 128 266 140.923077 245.847214 159.831491L81.582979 323.871735C70.243732 335.19552 52 371.692308 81.582979 408.655004 81.582979 408.655004 224.023667 540.29784 238.000003 541.53846L238.000003 835.076924C238.000003 868.452352 286.579 896 320 896L706 896C739.419808 896 788.00002 868.452352 788.00002 835.076924L788.00002 541.53846C802.145492 540.385864 942.448564 408.654992 942.448564 408.654992 974.00002 372 965.851264 334.883878 942.448584 311.513109L788.00002 159.831491Z" p-id="9990"></path></svg>
--- a/src/icons/svg/trendChart1.svg
+++ b/src/icons/svg/trendChart1.svg
@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1503994155726" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8554" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M44.521739 0h44.521739v979.478261H44.521739zM267.130435 534.26087h44.521739v445.217391H267.130435zM489.73913 311.652174h44.52174v667.826087h-44.52174zM712.347826 712.347826h44.521739v267.130435h-44.521739zM934.956522 445.217391h44.521739v534.26087h-44.521739z" fill="" p-id="8555"></path></svg>
--- a/Show More
+++ b/Show More
				`@ -0,0 +1 @@`
				<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1503994850540" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10206" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M931.6 585.6l0 79c28.6-60.2 44.8-127.4 44.8-198.4C976.4 211 769.4 4 514.2 4S52 211 52 466.2c0 3.2 0.2 6.4 0.2 9.6l166-206 96.4 0L171.8 485.6l46.4 0 0-54.8 99.2-154.6 0 209.4 0 100 0 82.4-99.2 0 0-82.4L67.6 585.6c43 161 170.6 287.4 332.4 328.6-10.4 26.2-40.6 89.4-90.8 100.6-62.2 14 168.8 3.4 333.6-104.6 126.6-36.6 230.8-125.8 287.4-242.2l-97.6 0 0-82.4-166.2 0 0-87.2 0-12.8L666.4 476l166.2-206.2 94 0-140.4 215.8 46.4 0 0-59 99.2-154 0 213.2L931.8 585.6zM366.2 608c-4.8-11.2-7.2-23.2-7.2-36L359 357.6c0-12.8 2.4-24.8 7.2-36 4.8-11.2 11.4-21 19.6-29.2 8.2-8.2 18-14.8 29.2-19.6 11.2-4.8 23.2-7.2 36-7.2l81.6 0c12.8 0 24.8 2.4 36 7.2 11 4.8 20.6 11.2 28.8 19.2l-88.6 129.4 0-23c0-4.8-1.6-8.8-4.8-12-3.2-3.2-7.2-4.8-12-4.8-4.8 0-8.8 1.6-12 4.8-3.2 3.2-4.8 7.2-4.8 12l0 72L372.6 620C370.2 616.2 368 612.2 366.2 608zM624.4 572c0 12.8-2.4 24.8-7.2 36-4.8 11.2-11.4 21-19.6 29.2-8.2 8.2-18 14.8-29.2 19.6-11.2 4.8-23.2 7.2-36 7.2l-81.6 0c-12.8 0-24.8-2.4-36-7.2-11.2-4.8-21-11.4-29.2-19.6-3.6-3.6-7-7.8-10-12l99.2-144.6 0 50.6c0 4.8 1.6 8.8 4.8 12 3.2 3.2 7.2 4.8 12 4.8 4.8 0 8.8-1.6 12-4.8 3.2-3.2 4.8-7.2 4.8-12l0-99.6 92.6-135.2c6.6 7.4 12 15.8 16 25.2 4.8 11.2 7.2 23.2 7.2 36L624.2 572z" p-id="10207"></path></svg>