11.20

ca748800 · 肖翔宇 · ca748800 · ca748800 · ca748800 · ca748800
Commit ca748800 authored Nov 20, 2018 by 肖翔宇
140 changed files
--- a/.babelrc
+++ b/.babelrc
+{
+  "presets": [
+    ["env", {
+      "modules": false,
+      "targets": {
+        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
+      }
+    }],
+    "stage-2"
+  ],
+  "plugins":["transform-vue-jsx", "transform-runtime"]
+}
--- a/.editorconfig
+++ b/.editorconfig
+# 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
+build/*.js
+config/*.js
+src/assets
--- a/.eslintrc.js
+++ b/.eslintrc.js
+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
+.DS_Store
+node_modules/
+dist/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+package-lock.json
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
--- a/.postcssrc.js
+++ b/.postcssrc.js
+// https://github.com/michael-ciniawsky/postcss-load-config
+
+module.exports = {
+  "plugins": {
+    "postcss-import": {},
+    "postcss-url": {},
+    // to edit target browsers: use "browserslist" field in package.json
+    "autoprefixer": {}
+  }
+}
--- a/.travis.yml
+++ b/.travis.yml
+language: node_js
+node_js: stable
+script: npm run test
+notifications:
+  email: false
--- a/LICENSE
+++ b/LICENSE
+MIT License
+
+Copyright (c) 2017-present PanJiaChen
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+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-zh.md
+++ b/README-zh.md
+# vueAdmin-template
+
+> 这是一个 极简的vue admin 管理后台 它只包含了 Element UI & axios & iconfont & permission control & lint，这些搭建后台必要的东西。
+
+[线上地址](http://panjiachen.github.io/vueAdmin-template)
+
+## Extra
+如果你想要根据用户角色来动态生成侧边栏和router，你可以使用改分支[permission-control](https://github.com/PanJiaChen/vueAdmin-template/tree/permission-control)
+ 
+ ## 相关项目
+ [vue-element-admin](https://github.com/PanJiaChen/vue-element-admin)
+
+ [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
+
+写了一个系列的教程配套文章，如何从零构建后一个完整的后台项目:
+ - [手摸手，带你用 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)
+
+
+## Build Setup
+
+``` bash
+
+# Clone project
+git clone https://github.com/PanJiaChen/vueAdmin-template.git
+
+# Install dependencies
+npm install
+
+# 建议不要用cnpm  安装有各种诡异的bug 可以通过如下操作解决npm速度慢的问题
+npm install --registry=https://registry.npm.taobao.org
+
+# serve with hot reload at localhost:9528
+npm run dev
+
+# build for production with minification
+npm run build
+
+# build for production and view the bundle analyzer report
+npm run build --report
+```
+
+## Demo
+![demo](https://github.com/PanJiaChen/PanJiaChen.github.io/blob/master/images/demo.gif)
+
+### Element-Ui 使用cdn教程
+首先找到 `index.html` ([根目录下](https://github.com/PanJiaChen/vueAdmin-template/blob/element-ui-cdn/index.html))
+
+引入 Element的css和js ，并且引入 vue 。因为 Element-Ui 是依赖 vue 的，所以必须在它之前引入 vue 。
+
+之后找到 [webpack.base.conf.js](https://github.com/PanJiaChen/vueAdmin-template/blob/element-ui-cdn/build/webpack.base.conf.js) 加入 `externals` 让webpack 不打包 vue 和 element
+```
+externals: {
+  vue: 'Vue',
+  'element-ui':'ELEMENT'
+}
+```
+
+之后还有一个小细节是如果你用了全局对象方式引入vue，就不需要 手动 `Vue.use(Vuex）` ，它会自动挂载，具体见 [issue](https://github.com/vuejs/vuex/issues/731)
+
+最终你可以使用 `npm run build --report` 查看效果
+如图：
+![demo](https://panjiachen.github.io/images/element-cdn.png)
+
+**[具体代码](https://github.com/PanJiaChen/vueAdmin-template/commit/746aff560932704ae821f82f10b8b2a9681d5177)**
+
+**[对应分支](https://github.com/PanJiaChen/vueAdmin-template/tree/element-ui-cdn)**
+
+## License
+[MIT](https://github.com/PanJiaChen/vueAdmin-template/blob/master/LICENSE) license.
+
+Copyright (c) 2017-present PanJiaChen
+
+
--- a/README.md
+++ b/README.md
+# vueAdmin-template
+
+> A minimal vue admin template with Element UI & axios & iconfont & permission control & lint
+
+**Live demo:** http://panjiachen.github.io/vueAdmin-template
+
+[中文文档](https://github.com/PanJiaChen/vueAdmin-template/blob/master/README-zh.md)
+
+## Build Setup
+
+``` bash
+
+# Clone project
+git clone https://github.com/PanJiaChen/vueAdmin-template.git
+
+# Install dependencies
+npm install
+
+# serve with hot reload at localhost:9528
+npm run dev
+
+# build for production with minification
+npm run build
+
+# build for production and view the bundle analyzer report
+npm run build --report
+```
+
+## Demo
+![demo](https://github.com/PanJiaChen/PanJiaChen.github.io/blob/master/images/demo.gif)
+
+## Extra
+If you want router permission && generate menu by user roles , you can use this branch [permission-control](https://github.com/PanJiaChen/vueAdmin-template/tree/permission-control)
+
+## Related Project
+ [vue-element-admin](https://github.com/PanJiaChen/vue-element-admin)
+
+ [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
+
+### Element-Ui using cdn tutorial
+First find `index.html`([root directory](https://github.com/PanJiaChen/vueAdmin-template/blob/element-ui-cdn/index.html))
+
+Import css and js of `Element`, and then import vue. Because `Element` is vue-dependent, vue must be import before it.
+
+Then find [webpack.base.conf.js](https://github.com/PanJiaChen/vueAdmin-template/blob/element-ui-cdn/build/webpack.base.conf.js)
+Add `externals` to make webpack not package vue and element.
+
+```
+externals: {
+  vue: 'Vue',
+  'element-ui':'ELEMENT'
+}
+```
+
+Finally there is a small detail to pay attention to that if you import vue in global, you don't need to manually `Vue.use(Vuex)`, it will be automatically mounted, see
+ [issue](https://github.com/vuejs/vuex/issues/731)
+
+And you can use `npm run build --report` to see the effect
+
+Pictured:
+![demo](https://panjiachen.github.io/images/element-cdn.png)
+
+**[Detailed code](https://github.com/PanJiaChen/vueAdmin-template/commit/746aff560932704ae821f82f10b8b2a9681d5177)**
+
+**[Branch](https://github.com/PanJiaChen/vueAdmin-template/tree/element-ui-cdn)**
+
+
+## License
+[MIT](https://github.com/PanJiaChen/vueAdmin-template/blob/master/LICENSE) license.
+
+Copyright (c) 2017-present PanJiaChen
--- a/build/build.js
+++ b/build/build.js
+'use strict'
+require('./check-versions')()
+
+process.env.NODE_ENV = 'production'
+
+const ora = require('ora')
+const rm = require('rimraf')
+const path = require('path')
+const chalk = require('chalk')
+const webpack = require('webpack')
+const config = require('../config')
+const webpackConfig = require('./webpack.prod.conf')
+
+const spinner = ora('building for production...')
+spinner.start()
+
+rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
+  if (err) throw err
+  webpack(webpackConfig, (err, stats) => {
+    spinner.stop()
+    if (err) throw err
+    process.stdout.write(stats.toString({
+      colors: true,
+      modules: false,
+      children: false,
+      chunks: false,
+      chunkModules: false
+    }) + '\n\n')
+
+    if (stats.hasErrors()) {
+      console.log(chalk.red('  Build failed with errors.\n'))
+      process.exit(1)
+    }
+
+    console.log(chalk.cyan('  Build complete.\n'))
+    console.log(chalk.yellow(
+      '  Tip: built files are meant to be served over an HTTP server.\n' +
+      '  Opening index.html over file:// won\'t work.\n'
+    ))
+  })
+})
--- a/build/check-versions.js
+++ b/build/check-versions.js
+'use strict'
+const chalk = require('chalk')
+const semver = require('semver')
+const packageConfig = require('../package.json')
+const shell = require('shelljs')
+
+function exec (cmd) {
+  return require('child_process').execSync(cmd).toString().trim()
+}
+
+const versionRequirements = [
+  {
+    name: 'node',
+    currentVersion: semver.clean(process.version),
+    versionRequirement: packageConfig.engines.node
+  }
+]
+
+if (shell.which('npm')) {
+  versionRequirements.push({
+    name: 'npm',
+    currentVersion: exec('npm --version'),
+    versionRequirement: packageConfig.engines.npm
+  })
+}
+
+module.exports = function () {
+  const warnings = []
+
+  for (let i = 0; i < versionRequirements.length; i++) {
+    const mod = versionRequirements[i]
+
+    if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
+      warnings.push(mod.name + ': ' +
+        chalk.red(mod.currentVersion) + ' should be ' +
+        chalk.green(mod.versionRequirement)
+      )
+    }
+  }
+
+  if (warnings.length) {
+    console.log('')
+    console.log(chalk.yellow('To use this template, you must update following to modules:'))
+    console.log()
+
+    for (let i = 0; i < warnings.length; i++) {
+      const warning = warnings[i]
+      console.log('  ' + warning)
+    }
+
+    console.log()
+    process.exit(1)
+  }
+}
--- a/build/logo.png
+++ b/build/logo.png
--- a/build/utils.js
+++ b/build/utils.js
+'use strict'
+const path = require('path')
+const config = require('../config')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const packageConfig = require('../package.json')
+
+exports.assetsPath = function (_path) {
+  const assetsSubDirectory = process.env.NODE_ENV === 'production'
+    ? config.build.assetsSubDirectory
+    : config.dev.assetsSubDirectory
+
+  return path.posix.join(assetsSubDirectory, _path)
+}
+
+exports.cssLoaders = function (options) {
+  options = options || {}
+
+  const cssLoader = {
+    loader: 'css-loader',
+    options: {
+      sourceMap: options.sourceMap
+    }
+  }
+
+  const postcssLoader = {
+    loader: 'postcss-loader',
+    options: {
+      sourceMap: options.sourceMap
+    }
+  }
+
+  // generate loader string to be used with extract text plugin
+  function generateLoaders (loader, loaderOptions) {
+    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
+
+    if (loader) {
+      loaders.push({
+        loader: loader + '-loader',
+        options: Object.assign({}, loaderOptions, {
+          sourceMap: options.sourceMap
+        })
+      })
+    }
+
+    // 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) {
+  const output = []
+  const loaders = exports.cssLoaders(options)
+
+  for (const extension in loaders) {
+    const loader = loaders[extension]
+    output.push({
+      test: new RegExp('\\.' + extension + '$'),
+      use: loader
+    })
+  }
+
+  return output
+}
+
+exports.createNotifierCallback = () => {
+  const notifier = require('node-notifier')
+
+  return (severity, errors) => {
+    if (severity !== 'error') return
+
+    const error = errors[0]
+    const filename = error.file && error.file.split('!').pop()
+
+    notifier.notify({
+      title: packageConfig.name,
+      message: severity + ': ' + error.name,
+      subtitle: filename || '',
+      icon: path.join(__dirname, 'logo.png')
+    })
+  }
+}
--- a/build/vue-loader.conf.js
+++ b/build/vue-loader.conf.js
+'use strict'
+const utils = require('./utils')
+const config = require('../config')
+const isProduction = process.env.NODE_ENV === 'production'
+const sourceMapEnabled = isProduction
+  ? config.build.productionSourceMap
+  : config.dev.cssSourceMap
+
+module.exports = {
+  loaders: utils.cssLoaders({
+    sourceMap: sourceMapEnabled,
+    extract: isProduction
+  }),
+  cssSourceMap: sourceMapEnabled,
+  cacheBusting: config.dev.cacheBusting,
+  transformToRequire: {
+    video: ['src', 'poster'],
+    source: 'src',
+    img: 'src',
+    image: 'xlink:href'
+  }
+}
--- a/build/webpack.base.conf.js
+++ b/build/webpack.base.conf.js
+'use strict'
+const path = require('path')
+const utils = require('./utils')
+const config = require('../config')
+const vueLoaderConfig = require('./vue-loader.conf')
+
+function resolve (dir) {
+  return path.join(__dirname, '..', dir)
+}
+
+const createLintingRule = () => ({
+  test: /\.(js|vue)$/,
+  loader: 'eslint-loader',
+  enforce: 'pre',
+  include: [resolve('src'), resolve('test')],
+  options: {
+    formatter: require('eslint-friendly-formatter'),
+    emitWarning: !config.dev.showEslintErrorsInOverlay
+  }
+})
+
+module.exports = {
+  context: path.resolve(__dirname, '../'),
+  entry: {
+    app: './src/main.js'
+  },
+  output: {
+    path: config.build.assetsRoot,
+    filename: '[name].js',
+    publicPath: process.env.NODE_ENV === 'production'
+      ? config.build.assetsPublicPath
+      : config.dev.assetsPublicPath
+  },
+  resolve: {
+    extensions: ['.js', '.vue', '.json'],
+    alias: {
+      '@': resolve('src')
+    }
+  },
+  module: {
+    rules: [
+      ...(config.dev.useEslint ? [createLintingRule()] : []),
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: vueLoaderConfig
+      },
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        include: [resolve('src'), resolve('test') ,resolve('node_modules/webpack-dev-server/client')]
+      },
+      {
+        test: /\.svg$/,
+        loader: 'svg-sprite-loader',
+        include: [resolve('src/icons')],
+        options: {
+          symbolId: 'icon-[name]'
+        }
+      },
+      {
+        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+        loader: 'url-loader',
+        exclude: [resolve('src/icons')],
+        options: {
+          limit: 10000,
+          name: utils.assetsPath('img/[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: utils.assetsPath('media/[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
+        }
+      }
+    ]
+  },
+  node: {
+    // prevent webpack from injecting useless setImmediate polyfill because Vue
+    // source contains it (although only uses it if it's native).
+    setImmediate: false,
+    // prevent webpack from injecting mocks to Node native modules
+    // that does not make sense for the client
+    dgram: 'empty',
+    fs: 'empty',
+    net: 'empty',
+    tls: 'empty',
+    child_process: 'empty'
+  }
+}
--- a/build/webpack.dev.conf.js
+++ b/build/webpack.dev.conf.js
+'use strict'
+const path = require('path')
+const utils = require('./utils')
+const webpack = require('webpack')
+const config = require('../config')
+const merge = require('webpack-merge')
+const baseWebpackConfig = require('./webpack.base.conf')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
+const portfinder = require('portfinder')
+
+function resolve (dir) {
+  return path.join(__dirname, '..', dir)
+}
+
+const HOST = process.env.HOST
+const PORT = process.env.PORT && Number(process.env.PORT)
+
+const devWebpackConfig = merge(baseWebpackConfig, {
+  module: {
+    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
+  },
+  // cheap-module-eval-source-map is faster for development
+  devtool: config.dev.devtool,
+
+  // these devServer options should be customized in /config/index.js
+  devServer: {
+    clientLogLevel: 'warning',
+    historyApiFallback: true,
+    hot: true,
+    compress: true,
+    host: HOST || config.dev.host,
+    port: PORT || config.dev.port,
+    open: config.dev.autoOpenBrowser,
+    overlay: config.dev.errorOverlay
+      ? { warnings: false, errors: true }
+      : false,
+    publicPath: config.dev.assetsPublicPath,
+    proxy: config.dev.proxyTable,
+    quiet: true, // necessary for FriendlyErrorsPlugin
+    watchOptions: {
+      poll: config.dev.poll,
+    }
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env': require('../config/dev.env')
+    }),
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
+    new webpack.NoEmitOnErrorsPlugin(),
+    // https://github.com/ampedandwired/html-webpack-plugin
+    new HtmlWebpackPlugin({
+      filename: 'index.html',
+      template: 'index.html',
+      inject: true,
+      favicon: resolve('favicon.ico'),
+      title: 'vue-element-admin',
+      path: config.build.assetsPublicPath+config.build.assetsSubDirectory,
+    }),
+  ]
+})
+
+module.exports = new Promise((resolve, reject) => {
+  portfinder.basePort = process.env.PORT || config.dev.port
+  portfinder.getPort((err, port) => {
+    if (err) {
+      reject(err)
+    } else {
+      // publish the new Port, necessary for e2e tests
+      process.env.PORT = port
+      // add port to devServer config
+      devWebpackConfig.devServer.port = port
+
+      // Add FriendlyErrorsPlugin
+      devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
+        compilationSuccessInfo: {
+          messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
+        },
+        onErrors: config.dev.notifyOnErrors
+        ? utils.createNotifierCallback()
+        : undefined
+      }))
+
+      resolve(devWebpackConfig)
+    }
+  })
+})
--- a/build/webpack.prod.conf.js
+++ b/build/webpack.prod.conf.js
+'use strict'
+const path = require('path')
+const utils = require('./utils')
+const webpack = require('webpack')
+const config = require('../config')
+const merge = require('webpack-merge')
+const baseWebpackConfig = require('./webpack.base.conf')
+const CopyWebpackPlugin = require('copy-webpack-plugin')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
+
+function resolve (dir) {
+  return path.join(__dirname, '..', dir)
+}
+
+const env = require('../config/prod.env')
+
+const webpackConfig = merge(baseWebpackConfig, {
+  module: {
+    rules: utils.styleLoaders({
+      sourceMap: config.build.productionSourceMap,
+      extract: true,
+      usePostCSS: true
+    })
+  },
+  devtool: config.build.productionSourceMap ? config.build.devtool : false,
+  output: {
+    path: config.build.assetsRoot,
+    filename: utils.assetsPath('js/[name].[chunkhash].js'),
+    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
+  },
+  plugins: [
+    // http://vuejs.github.io/vue-loader/en/workflow/production.html
+    new webpack.DefinePlugin({
+      'process.env': env
+    }),
+    new UglifyJsPlugin({
+      uglifyOptions: {
+        compress: {
+          warnings: false
+        }
+      },
+      sourceMap: config.build.productionSourceMap,
+      parallel: true
+    }),
+    // extract css into its own file
+    new ExtractTextPlugin({
+      filename: utils.assetsPath('css/[name].[contenthash].css'),
+      // Setting the following option to `false` will not extract CSS from codesplit chunks.
+      // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
+      // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
+      allChunks: false,
+    }),
+    // Compress extracted CSS. We are using this plugin so that possible
+    // duplicated CSS from different components can be deduped.
+    new OptimizeCSSPlugin({
+      cssProcessorOptions: config.build.productionSourceMap
+        ? { safe: true, map: { inline: false } }
+        : { safe: true }
+    }),
+    // generate dist index.html with correct asset hash for caching.
+    // you can customize output by editing /index.html
+    // see https://github.com/ampedandwired/html-webpack-plugin
+    new HtmlWebpackPlugin({
+      filename: config.build.index,
+      template: 'index.html',
+      inject: true,
+      favicon: resolve('favicon.ico'),
+      title: 'vue-element-admin',
+      minify: {
+        removeComments: true,
+        collapseWhitespace: true,
+        removeAttributeQuotes: true
+        // more options:
+        // https://github.com/kangax/html-minifier#options-quick-reference
+      },
+      path: config.build.assetsPublicPath+config.build.assetsSubDirectory,
+      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
+      chunksSortMode: 'dependency'
+    }),
+    // keep module.id stable when vender modules does not change
+    new webpack.HashedModuleIdsPlugin(),
+    // enable scope hoisting
+    new webpack.optimize.ModuleConcatenationPlugin(),
+    // split vendor js into its own file
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'vendor',
+      minChunks (module) {
+        // any required modules inside node_modules are extracted to vendor
+        return (
+          module.resource &&
+          /\.js$/.test(module.resource) &&
+          module.resource.indexOf(
+            path.join(__dirname, '../node_modules')
+          ) === 0
+        )
+      }
+    }),
+    // extract webpack runtime and module manifest to its own file in order to
+    // prevent vendor hash from being updated whenever app bundle is updated
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'manifest',
+      minChunks: Infinity
+    }),
+    // This instance extracts shared chunks from code splitted chunks and bundles them
+    // in a separate chunk, similar to the vendor chunk
+    // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'app',
+      async: 'vendor-async',
+      children: true,
+      minChunks: 3
+    }),
+
+    // copy custom static assets
+    new CopyWebpackPlugin([
+      {
+        from: path.resolve(__dirname, '../static'),
+        to: config.build.assetsSubDirectory,
+        ignore: ['.*']
+      }
+    ])
+  ]
+})
+
+if (config.build.productionGzip) {
+  const CompressionWebpackPlugin = require('compression-webpack-plugin')
+
+  webpackConfig.plugins.push(
+    new CompressionWebpackPlugin({
+      asset: '[path].gz[query]',
+      algorithm: 'gzip',
+      test: new RegExp(
+        '\\.(' +
+        config.build.productionGzipExtensions.join('|') +
+        ')$'
+      ),
+      threshold: 10240,
+      minRatio: 0.8
+    })
+  )
+}
+
+if (config.build.bundleAnalyzerReport) {
+  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
+}
+
+module.exports = webpackConfig
--- a/config/dev.env.js
+++ b/config/dev.env.js
+'use strict'
+const merge = require('webpack-merge')
+const prodEnv = require('./prod.env')
+
+module.exports = merge(prodEnv, {
+  NODE_ENV: '"development"',
+  BASE_API: '"http://192.168.0.13:9001/sharePiano"',
+})
--- a/config/index.js
+++ b/config/index.js
+'use strict'
+// Template version: 1.2.6
+// see http://vuejs-templates.github.io/webpack for documentation.
+
+const path = require('path')
+
+module.exports = {
+  dev: {
+
+    // Paths
+    assetsSubDirectory: 'static',
+    assetsPublicPath: '/',
+    proxyTable: {},
+
+    // Various Dev Server settings
+    host: 'localhost', // can be overwritten by process.env.HOST
+    port: 9528, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
+    autoOpenBrowser: true,
+    errorOverlay: true,
+    notifyOnErrors: false,
+    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
+
+    // Use Eslint Loader?
+    // If true, your code will be linted during bundling and
+    // linting errors and warnings will be shown in the console.
+    useEslint: true,
+    // If true, eslint errors and warnings will also be shown in the error overlay
+    // in the browser.
+    showEslintErrorsInOverlay: false,
+
+    /**
+     * Source Maps
+     */
+
+    // https://webpack.js.org/configuration/devtool/#development
+    devtool: 'cheap-source-map',
+
+    // If you have problems debugging vue-files in devtools,
+    // set this to false - it *may* help
+    // https://vue-loader.vuejs.org/en/options.html#cachebusting
+    cacheBusting: true,
+
+    // CSS Sourcemaps off by default because relative paths are "buggy"
+    // with this option, according to the CSS-Loader README
+    // (https://github.com/webpack/css-loader#sourcemaps)
+    // In our experience, they generally work as expected,
+    // just be aware of this issue when enabling this option.
+    cssSourceMap: false,
+  },
+
+  build: {
+    // Template for index.html
+    index: path.resolve(__dirname, '../dist/index.html'),
+
+    // Paths
+    assetsRoot: path.resolve(__dirname, '../dist'),
+    assetsSubDirectory: 'static',
+
+    /**
+     * You can set by youself according to actual condition
+     * You will need to set this if you plan to deploy your site under a sub path,
+     * for example GitHub pages. If you plan to deploy your site to https://foo.github.io/bar/,
+     * then assetsPublicPath should be set to "/bar/".
+     * In most cases please use '/' !!!
+     */
+    assetsPublicPath: '/', // If you are deployed on the root path, please use '/'
+
+    /**
+     * Source Maps
+     */
+
+    productionSourceMap: false,
+    // https://webpack.js.org/configuration/devtool/#production
+    devtool: '#source-map',
+
+    // Gzip off by default as many popular static hosts such as
+    // Surge or Netlify already gzip all static assets for you.
+    // Before setting to `true`, make sure to:
+    // npm install --save-dev compression-webpack-plugin
+    productionGzip: false,
+    productionGzipExtensions: ['js', 'css'],
+
+    // Run the build command with an extra argument to
+    // View the bundle analyzer report after build finishes:
+    // `npm run build --report`
+    // Set to `true` or `false` to always turn it on or off
+    bundleAnalyzerReport: process.env.npm_config_report
+  }
+}
--- a/config/prod.env.js
+++ b/config/prod.env.js
+'use strict'
+module.exports = {
+  NODE_ENV: '"production"',
+  BASE_API: '"/sharePiano"',
+}
--- a/favicon.ico
+++ b/favicon.ico
--- a/index.html
+++ b/index.html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>共享钢琴后台管理</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+
+    <script src=<%= htmlWebpackPlugin.options.path %>/tinymce4.7.5/tinymce.min.js></script>
+    <!--<script src=/static/tinymce4.7.5/tinymce.min.js></script>-->
+    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=SL1ilmqO3HZRau61M1oCfhN1FV42kY6F"></script>
+  </body>
+</html>
--- a/package.json
+++ b/package.json
+{
+  "name": "vue-admin-template",
+  "version": "3.6.0",
+  "license": "MIT",
+  "description": "A vue admin template with Element UI & axios & iconfont & permission control & lint",
+  "author": "Pan <panfree23@gmail.com>",
+  "scripts": {
+    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
+    "start": "npm run dev",
+    "build": "node build/build.js",
+    "build:report": "npm_config_report=true node build/build.js",
+    "lint": "eslint --ext .js,.vue src",
+    "test": "npm run lint"
+  },
+  "dependencies": {
+    "axios": "0.17.1",
+    "element-ui": "2.3.4",
+    "js-cookie": "2.2.0",
+    "normalize.css": "7.0.0",
+    "nprogress": "0.2.0",
+    "vue": "2.5.10",
+    "vue-router": "3.0.1",
+    "vuex": "3.0.1"
+  },
+  "devDependencies": {
+    "autoprefixer": "7.2.3",
+    "babel-core": "6.26.0",
+    "babel-eslint": "8.0.3",
+    "babel-helper-vue-jsx-merge-props": "2.0.3",
+    "babel-loader": "7.1.2",
+    "babel-plugin-syntax-jsx": "6.18.0",
+    "babel-plugin-transform-runtime": "6.23.0",
+    "babel-plugin-transform-vue-jsx": "3.5.0",
+    "babel-preset-env": "1.6.1",
+    "babel-preset-stage-2": "6.24.1",
+    "chalk": "2.3.0",
+    "copy-webpack-plugin": "4.2.3",
+    "css-loader": "0.28.7",
+    "eslint": "4.13.1",
+    "eslint-friendly-formatter": "3.0.0",
+    "eslint-loader": "1.9.0",
+    "eslint-plugin-html": "4.0.1",
+    "eventsource-polyfill": "0.9.6",
+    "extract-text-webpack-plugin": "3.0.2",
+    "file-loader": "1.1.5",
+    "friendly-errors-webpack-plugin": "1.6.1",
+    "html-webpack-plugin": "2.30.1",
+    "node-notifier": "5.1.2",
+    "node-sass": "^4.7.2",
+    "optimize-css-assets-webpack-plugin": "3.2.0",
+    "ora": "1.3.0",
+    "portfinder": "1.0.13",
+    "postcss-import": "11.0.0",
+    "postcss-loader": "2.0.9",
+    "postcss-url": "7.3.0",
+    "rimraf": "2.6.2",
+    "sass-loader": "6.0.6",
+    "semver": "5.4.1",
+    "shelljs": "0.7.8",
+    "svg-sprite-loader": "3.5.2",
+    "uglifyjs-webpack-plugin": "1.1.3",
+    "url-loader": "0.6.2",
+    "vue-loader": "13.7.2",
+    "vue-style-loader": "3.0.3",
+    "vue-template-compiler": "2.5.10",
+    "webpack": "3.10.0",
+    "webpack-bundle-analyzer": "2.9.1",
+    "webpack-dev-server": "2.9.7",
+    "webpack-merge": "4.1.1"
+  },
+  "engines": {
+    "node": ">= 4.0.0",
+    "npm": ">= 3.0.0"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 8"
+  ]
+}
--- a/src/App.vue
+++ b/src/App.vue
+<template>
+  <div id="app">
+    <router-view></router-view>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'App'
+}
+</script>
--- a/src/api/index.js
+++ b/src/api/index.js
+/**
+ * @file: index.
+ * @intro: api请求索引.
+ * @author: leaf.
+ * @email: ypasdf@163.com.
+ * @Date: 2018/5/8 15:31.
+ * @Copyright(©) 2017 by leaf.
+ *
+ */
+// 导入模块
+import * as sysDict from './sys/dict'
+import * as sysBanner from './sys/banner'
+import * as sysUser from './sys/user'
+import * as sysPiano from './sys/piano'
+import * as sysUserCost from './sys/userCost'
+import * as sysCourse from './sys/course'
+import * as sysCourseType from './sys/courseType'
+
+const apiObj = {
+  sysDict,
+  sysBanner,
+  sysUser,
+  sysPiano,
+  sysUserCost,
+  sysCourse,
+  sysCourseType
+}
+
+const install = function(Vue) {
+  if (install.installed) return
+  install.installed = true
+
+  // 定义属性到Vue原型中
+  Object.defineProperties(Vue.prototype, {
+    $fetch: {
+      get() {
+        return apiObj
+      }
+    }
+  })
+}
+
+export default {
+  install
+}
--- a/src/api/login.js
+++ b/src/api/login.js
+import request from '@/utils/request'
+// 登陆
+export function login(username, password) {
+  return request({
+    url: '/login',
+    method: 'post',
+    data: {
+      username,
+      password
+    }
+  })
+}
+// 用户信息
+export function getInfo() {
+  return request({
+    url: '/userInfo/currentUserInfo',
+    method: 'post'
+  })
+}
+
+// 注销
+export function logout() {
+  return request({ url: '/mylogout', method: 'get' })
+}
--- a/src/api/sys/banner.js
+++ b/src/api/sys/banner.js
+import request from '@/utils/request'
+
+// 分页查询
+export function pageList(data) {
+  return request({
+    url: '/sys/sysBanner/pageList',
+    method: 'post',
+    data: data
+  })
+}
+
+// 插入
+export function insert(data) {
+  return request({
+    url: '/sys/sysBanner/insert',
+    method: 'post',
+    data: data
+  })
+}
+
+// 更新数据
+export function update(data) {
+  return request({
+    url: '/sys/sysBanner/update',
+    method: 'post',
+    data: data
+  })
+}
+
+// 查询数据
+export function query(data) {
+  return request({
+    url: '/sys/sysBanner/query',
+    method: 'post',
+    data: data
+  })
+}
+
+// 删除数据
+export function deletes(id, ids) {
+  const data = {}
+  if (id) {
+    data['id'] = id
+  }
+  if (ids) {
+    data['ids'] = ids
+  }
+  console.log(data)
+  return request({
+    url: '/sys/sysBanner/delete',
+    method: 'post',
+    data: data
+  })
+}
--- a/src/api/sys/course.js
+++ b/src/api/sys/course.js
+import request from '@/utils/request'
+
+// 分页查询
+export function pageList(data) {
+  return request({
+    url: '/sys/sysonlineCourse/pageList',
+    method: 'post',
+    data: data
+  })
+}
+
+// 插入
+export function insert(data) {
+  return request({
+    url: '/sys/sysonlineCourse/insert',
+    method: 'post',
+    data: data
+  })
+}
+
+// 更新数据
+export function update(data) {
+  return request({
+    url: '/sys/sysonlineCourse/update',
+    method: 'post',
+    data: data
+  })
+}
+
+// 查询数据
+export function query(data) {
+  return request({
+    url: '/sys/sysonlineCourse/query',
+    method: 'post',
+    data: data
+  })
+}
+
+// 删除数据
+export function deletes(id, ids) {
+  const data = {}
+  if (id) {
+    data['id'] = id
+  }
+  if (ids) {
+    data['ids'] = ids
+  }
+  console.log(data)
+  return request({
+    url: '/sys/sysonlineCourse/delete',
+    method: 'post',
+    data: data
+  })
+}
--- a/src/api/sys/courseType.js
+++ b/src/api/sys/courseType.js
+import request from '@/utils/request'
+
+// 分页查询
+export function pageList(data) {
+  return request({
+    url: '/sys/sysCurriculumType/pageList',
+    method: 'post',
+    data: data
+  })
+}
+
+// 插入
+export function insert(data) {
+  return request({
+    url: '/sys/sysCurriculumType/insert',
+    method: 'post',
+    data: data
+  })
+}
+
+// 更新数据
+export function update(data) {
+  return request({
+    url: '/sys/sysCurriculumType/update',
+    method: 'post',
+    data: data
+  })
+}
+
+// 查询数据
+export function query(data) {
+  return request({
+    url: '/sys/sysCurriculumType/query',
+    method: 'post',
+    data: data
+  })
+}
+export function findAll(data) {
+  return request({
+    url: '/sys/sysCurriculumType/findAll',
+    method: 'post',
+    data: data
+  })
+}
+// 删除数据
+export function deletes(id, ids) {
+  const data = {}
+  if (id) {
+    data['id'] = id
+  }
+  if (ids) {
+    data['ids'] = ids
+  }
+  return request({
+    url: '/sys/sysCurriculumType/delete',
+    method: 'post',
+    data: data
+  })
+}
--- a/src/api/sys/dict.js
+++ b/src/api/sys/dict.js
+import request from '@/utils/request'
+// 通过父类编码获取选项  通过包括父和子
+export function options(data) {
+  return request({
+    url: '/options',
+    method: 'get',
+    params: {
+      parentCode: data
+    }
+  })
+}
+// 通过父类编码获取子选项  只有子选项
+export function optionsChildren(data) {
+  return request({
+    url: '/optionsChildren',
+    method: 'get',
+    params: {
+      parentCode: data
+    }
+  })
+}
+// 分页查询
+export function pageList(data) {
+  return request({
+    url: '/sys/sysDict/pageList',
+    method: 'post',
+    data: data
+  })
+}
+// 插入
+export function insert(data) {
+  return request({
+    url: '/sys/sysDict/insert',
+    method: 'post',
+    data: data
+  })
+}
+// 更新数据
+export function update(data) {
+  return request({
+    url: '/sys/sysDict/update',
+    method: 'post',
+    data: data
+  })
+}
+// 删除数据
+export function deletes(id, ids) {
+  const data = {}
+  if (id) {
+    data['id'] = id
+  }
+  if (ids) {
+    data['ids'] = ids
+  }
+  return request({
+    url: '/sys/sysDict/delete',
+    method: 'post',
+    data: data
+  })
+}
+// 列表选择框
+export function treeList() {
+  return request({
+    url: '/sys/sysDict/treeList',
+    method: 'post'
+  })
+}
--- a/src/api/sys/piano.js
+++ b/src/api/sys/piano.js
+import request from '@/utils/request'
+
+// 分页查询
+export function pageList(data) {
+  return request({
+    url: '/wx/wxPiano/pageList',
+    method: 'post',
+    data: data
+  })
+}
+
+// 插入
+export function insert(data) {
+  return request({
+    url: '/wx/wxPiano/insert',
+    method: 'post',
+    data: data
+  })
+}
+
+// 更新数据
+export function update(data) {
+  return request({
+    url: '/wx/wxPiano/update',
+    method: 'post',
+    data: data
+  })
+}
+// 查询
+export function query(data) {
+  return request({
+    url: '/wx/wxPiano/query',
+    method: 'post',
+    data: data
+  })
+}
+// 添加用户
+export function addUser(data) {
+  return request({
+    url: '/wx/wxPiano/addUser',
+    method: 'post',
+    data: data
+  })
+}
+
+// 删除数据
+export function deletes(id, ids) {
+  const data = {}
+  if (id) {
+    data['id'] = id
+  }
+  if (ids) {
+    data['ids'] = ids
+  }
+  return request({
+    url: '/wx/wxPiano/delete',
+    method: 'post',
+    data: data
+  })
+}
--- a/src/api/sys/user.js
+++ b/src/api/sys/user.js
+import request from '@/utils/request'
+
+// 分页查询
+export function pageList(data) {
+  return request({
+    url: '/wx/wxUser/pageList',
+    method: 'post',
+    data: data
+  })
+}
+
+// 插入
+export function insert(data) {
+  return request({
+    url: '/wx/wxUser/insert',
+    method: 'post',
+    data: data
+  })
+}
+
+// 更新数据
+export function update(data) {
+  return request({
+    url: '/wx/wxUser/update',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改审核状态
+export function updateAuth(data) {
+  return request({
+    url: '/wx/wxUser/updateById',
+    method: 'post',
+    data: data
+  })
+}
+
+// 解除绑定
+export function deleteBind(data) {
+  return request({
+    url: '/wx/wxUser/untied',
+    method: 'post',
+    data: data
+  })
+}
+
+// 删除数据
+export function deletes(id, ids) {
+  const data = {}
+  if (id) {
+    data['id'] = id
+  }
+  if (ids) {
+    data['ids'] = ids
+  }
+  return request({
+    url: '/wx/wxUser/delete',
+    method: 'post',
+    data: data
+  })
+}
--- a/src/api/sys/userCost.js
+++ b/src/api/sys/userCost.js
+import request from '@/utils/request'
+
+// 分页查询
+export function pageList(data) {
+  return request({
+    url: '/wx/wxUserCost/pageList',
+    method: 'post',
+    data: data
+  })
+}
+
+// 结束
+export function offline(data) {
+  return request({
+    url: '/wx/wxUserCost/offline',
+    method: 'post',
+    data: data
+  })
+}
+
+/**
+ * 评论列表
+ * @param data
+ */
+export function commentList(data) {
+  return request({
+    url: '/wx/wxUserCostComment/pageList',
+    method: 'post',
+    data: data
+  })
+}
+
+// 删除数据
+export function deletes(id, ids) {
+  const data = {}
+  if (id) {
+    data['id'] = id
+  }
+  if (ids) {
+    data['ids'] = ids
+  }
+  return request({
+    url: '/wx/wxUserCost/delete',
+    method: 'post',
+    data: data
+  })
+}
+
+//
+export function insertComment(data) {
+  return request({
+    url: '/wx/wxUserCostComment/insert',
+    method: 'post',
+    data: data
+  })
+}
--- 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/ic_gxgq_selected.png
+++ b/src/assets/ic_gxgq_selected.png
--- a/src/common/config/index.js
+++ b/src/common/config/index.js
+/**
+ * 全局配置文件
+ */
+// 文件上传接口
+export const upload_url = process.env.BASE_API + '/file/upload'
+// 批量上传接口
+export const upload_batch_url = process.env.BASE_API + '/file/batch/upload'
+// 修改头像
+export const update_picture = process.env.BASE_API + '/userInfo/updatePicture'
+
+// 本地存储的前缀
+export const storage_prefix = 'leaf_storage_'
+// base64加密前缀
+export const base64_prefix = 'leaf_base64_'
--- a/src/common/storage/cookie.js
+++ b/src/common/storage/cookie.js
+/**
+ * @file: cookie.
+ * @intro: cookie存储类.
+ * @author: zzmhot.
+ * @email: zzmhot@163.com.
+ * @Date: 2017/4/28 10:45.
+ * @Copyright(©) 2017 by zzmhot.
+ *
+ */
+
+// 存储前缀
+import { storage_prefix } from '../config'
+// 验证
+import { tools_verify, tools_uri } from '../tools'
+
+/**
+ * cookies操作类
+ */
+export default new class Cookie {
+  /**
+   * 构造函数
+   */
+  constructor() {
+    this.defaults = {}
+    this.expiresMultiplier = 60 * 60 * 24
+    this.prefix = storage_prefix
+  }
+
+  /**
+   * 根据key获取cookie的值
+   * @param {string} key 键
+   * @returns {object} 值
+   */
+  get(key) {
+    if (!key) {
+      throw new Error('没有找到key。')
+    }
+    if (typeof key === 'object') {
+      throw new Error('key不能是一个对象。')
+    }
+    const cookies = this.all()
+    let value = cookies[this.prefix + key]
+    try {
+      value = JSON.parse(value)
+    } catch (e) {
+      value
+    }
+    return value
+  }
+
+  /**
+   * 设置cookies
+   * @param key 键
+   * @param value 值
+   * @param options 选项
+   * @returns {Cookie}
+   */
+  set(key, value, options) {
+    options = tools_verify.isObject(options) ? options : { expires: options }
+    // 如果expires为空的话那么就设置为session.
+    let expires =
+      options.expires !== undefined
+        ? options.expires
+        : this.defaults.expires || ''
+    const expiresType = typeof expires
+    if (expiresType === 'string' && expires !== '') {
+      expires = new Date(expires)
+    } else if (expiresType === 'number') {
+      expires = new Date(+new Date() + 1000 * this.expiresMultiplier * expires)
+    }
+    if (expires !== '' && 'toGMTString' in expires) {
+      expires = ';expires=' + expires.toGMTString()
+    }
+    // 设置path
+    let path = options.path || this.defaults.path
+    path = path ? ';path=' + path : ''
+    // 设置domain
+    let domain = options.domain || this.defaults.domain
+    domain = domain ? ';domain=' + domain : ''
+    // 设置secure
+    let secure = options.secure || this.defaults.secure ? ';secure' : ''
+    if (options.secure === false) secure = ''
+    // 设置cookie
+    document.cookie =
+      tools_uri.encode(this.prefix + key) +
+      '=' +
+      tools_uri.encode(JSON.stringify(value)) +
+      expires +
+      path +
+      domain +
+      secure
+    return this
+  }
+
+  /**
+   * 删除cookie
+   * @param {string||array} keys 删除cookie的key
+   * @returns {Cookie}
+   */
+  remove(keys) {
+    keys = tools_verify.isArray(keys) ? keys : [keys]
+    for (let i = 0, l = keys.length; i < l; i++) {
+      this.set(keys[i], '', -1)
+    }
+    return this
+  }
+
+  /**
+   * 获取所有的cookie
+   * @returns {object} cookie对象
+   */
+  all() {
+    const cookie = document.cookie
+    if (cookie === '') return {}
+    const cookieArr = cookie.split('; ')
+    const result = {}
+    for (let i = 0, l = cookieArr.length; i < l; i++) {
+      const item = cookieArr[i].split('=')
+      // arr.shift()把第一个数组删除并得到删除的值
+      const key = tools_uri.decode(item.shift())
+      const value = tools_uri.decode(item.join(''))
+      result[key] = value
+    }
+    return result
+  }
+}()
--- a/src/common/storage/index.js
+++ b/src/common/storage/index.js
+/**
+ * @file: index.
+ * @intro: storage存储.
+ * @author: zzmhot.
+ * @email: zzmhot@163.com.
+ * @Date: 2017/4/28 10:42.
+ * @Copyright(©) 2017 by zzmhot.
+ *
+ */
+
+import { localStorage, sessionStorage } from './storage'
+import cookieStorage from './cookie'
+
+export { localStorage, sessionStorage, cookieStorage }
--- a/src/common/storage/storage.js
+++ b/src/common/storage/storage.js
+/**
+ * Storage工具类
+ */
+// 存储前缀
+import { storage_prefix } from '../config'
+// url验证
+import { tools_uri } from '../tools'
+class Storage {
+  constructor(type) {
+    if (type === 'local') {
+      this.store = window.localStorage
+    } else if (type === 'session') {
+      this.store = window.sessionStorage
+    }
+    this.prefix = storage_prefix
+  }
+
+  set(key, value) {
+    try {
+      value = JSON.stringify(value)
+    } catch (e) {
+      value = {}
+    }
+    this.store.setItem(
+      tools_uri.encode(this.prefix + key),
+      tools_uri.encode(value)
+    )
+
+    return this
+  }
+
+  get(key) {
+    if (!key) {
+      throw new Error('没有找到key。')
+    }
+    if (typeof key === 'object') {
+      throw new Error('key不能是一个对象。')
+    }
+
+    let value = this.store.getItem(tools_uri.encode(this.prefix + key))
+    if (value === null) {
+      return
+    }
+
+    try {
+      value = JSON.parse(tools_uri.decode(value))
+    } catch (e) {
+      value
+    }
+    return value
+  }
+
+  remove(key) {
+    this.store.removeItem(tools_uri.encode(this.prefix + key))
+    return this
+  }
+}
+
+export const localStorage = new Storage('local')
+export const sessionStorage = new Storage('session')
--- a/src/common/tools/index.js
+++ b/src/common/tools/index.js
+/**
+ * Created by zzmhot on 2017/3/29.
+ *
+ * @author: zzmhot
+ * @github: https://github.com/zzmhot
+ * @email: zzmhot@163.com
+ * @Date: 2017/3/29 13:20
+ * @Copyright(©) 2017 by zzmhot.
+ *
+ */
+
+import tools_verify from './tools_verify'
+import tools_base64 from './tools_base64'
+import tools_uri from './tools_uri'
+
+export { tools_verify, tools_base64, tools_uri }
--- a/src/common/tools/tools_base64.js
+++ b/src/common/tools/tools_base64.js
+/**
+ * @file: tools_base64.
+ * @intro: base64加密解密工具.
+ * @author: zzmhot.
+ * @email: zzmhot@163.com.
+ * @Date: 2017/5/9 13:45.
+ * @Copyright(©) 2017 by zzmhot.
+ *
+ */
+
+// 存储前缀
+import { base64_prefix } from '../config'
+
+import base64 from 'js-base64'
+
+export default new class Base64 {
+  constructor() {
+    this.prefix = base64_prefix
+    this.base64 = base64.Base64
+  }
+
+  // base64加密
+  encode(val) {
+    return this.base64.encode(base64_prefix + val)
+  }
+
+  // base解密
+  decode(val) {
+    return this.base64.decode(base64_prefix + val)
+  }
+}()
--- a/src/common/tools/tools_uri.js
+++ b/src/common/tools/tools_uri.js
+/**
+ * @file: tools_uri.
+ * @intro: uri编码工具类.
+ * @author: zzmhot.
+ * @email: zzmhot@163.com.
+ * @Date: 2017/5/9 14:03.
+ * @Copyright(©) 2017 by zzmhot.
+ *
+ */
+
+export default new class Uri {
+  // URI 解码
+  decode(value) {
+    return decodeURIComponent(value)
+  }
+
+  // URI 编码
+  encode(value) {
+    return encodeURIComponent(value)
+  }
+}()
--- a/src/common/tools/tools_verify.js
+++ b/src/common/tools/tools_verify.js
+/**
+ * @file: tools_verify.
+ * @intro: 常用验证工具类.
+ * @author: zzmhot.
+ * @email: zzmhot@163.com.
+ * @Date: 2017/5/9 13:45.
+ * @Copyright(©) 2017 by zzmhot.
+ *
+ */
+
+export default new class Verify {
+  // 验证url是否正确，true/false
+  isUrl(url) {
+    return /(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/i.test(
+      url
+    )
+  }
+
+  // 验证手机号码是否正确， true/false
+  isTel(tel) {
+    return /^1[3|4|5|8][0-9]\d{4,8}$/.test(tel)
+  }
+
+  // 判断是否是object对象
+  isObject(value) {
+    return (
+      !!value && Object.prototype.toString.call(value) === '[object Object]'
+    )
+  }
+
+  // 判断是否是数组
+  isArray(value) {
+    return Object.prototype.toString.call(value) === '[object Array]'
+  }
+}()
--- a/src/components/Breadcrumb/index.vue
+++ b/src/components/Breadcrumb/index.vue
+<template>
+  <el-breadcrumb class="app-breadcrumb" separator="/">
+    <transition-group name="breadcrumb">
+      <el-breadcrumb-item v-for="(item,index)  in levelList" :key="item.path" v-if="item.meta.title">
+        <span v-if="item.redirect==='noredirect'||index==levelList.length-1" class="no-redirect">{{item.meta.title}}</span>
+        <router-link v-else :to="item.redirect||item.path">{{item.meta.title}}</router-link>
+      </el-breadcrumb-item>
+    </transition-group>
+  </el-breadcrumb>
+</template>
+
+<script>
+export default {
+  created() {
+    this.getBreadcrumb()
+  },
+  data() {
+    return {
+      levelList: null
+    }
+  },
+  watch: {
+    $route() {
+      this.getBreadcrumb()
+    }
+  },
+  methods: {
+    getBreadcrumb() {
+      let matched = this.$route.matched.filter(item => item.name)
+      const first = matched[0]
+      if (first && first.name !== 'dashboard') {
+        matched = [{ path: '/dashboard', meta: { title: 'Dashboard' }}].concat(matched)
+      }
+      this.levelList = matched
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .app-breadcrumb.el-breadcrumb {
+    display: inline-block;
+    font-size: 14px;
+    line-height: 50px;
+    margin-left: 10px;
+    .no-redirect {
+      color: #97a8be;
+      cursor: text;
+    }
+  }
+</style>
--- a/src/components/Hamburger/index.vue
+++ b/src/components/Hamburger/index.vue
+<template>
+  <div>
+    <svg t="1492500959545" @click="toggleClick" class="hamburger" :class="{'is-active':isActive}" style="" viewBox="0 0 1024 1024"
+      version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1691" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64">
+      <path d="M966.8023 568.849776 57.196677 568.849776c-31.397081 0-56.850799-25.452695-56.850799-56.850799l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 543.397081 998.200404 568.849776 966.8023 568.849776z"
+        p-id="1692"></path>
+      <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(90deg);
+	transition: .38s;
+	transform-origin: 50% 50%;
+}
+.hamburger.is-active {
+	transform: rotate(0deg);
+}
+</style>
--- a/src/components/Modal/index.vue
+++ b/src/components/Modal/index.vue
+<template>
+<div>
+  <div class="dialog-modal"> <!-- 根元素，z-index 需要高于父容器其他元素 -->
+    <div class="dialog-wrapper" @click="onClose" v-show="isShow"></div> <!-- 加载一个具有透明度的背景，使根元素透明，子元素会继承该透明度 -->
+    <transition name="drop">
+        <div class="dialog-container" v-show="isShow">  <!-- 模态框容器，z-index 需要高于背景 -->
+            <span class="close-btn" @click="onClose">x</span>
+            <slot>
+                <p>hello</p>
+            </slot>
+        </div>
+    </transition>
+  </div>
+</div>
+</template>
+<script>
+    export default {
+        props: {
+            isShow:{
+                type: Boolean,
+                default: false
+            }
+        },
+        methods: {
+            onClose(){
+                this.$emit('on-close');
+            }
+        }
+    }
+</script>
+<style>
+.drop-enter-active {
+  transition: all .5s;
+}
+.drop-leave-active {
+  transition: all .3s;
+}
+.drop-enter {
+  transform: translateY(-500px);
+}
+.drop-leave-active {
+  transform: translateY(-500px);
+}   
+  
+    .dialog-modal{
+        position: absolute;
+        z-index: 5;
+    }
+    .dialog-wrapper
+    {
+        position: fixed;
+        height: 100%;
+        width: 100%;
+        z-index: 5;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        right: 0;
+      
+    }
+    .dialog-wrapper{
+        background-color: #eee;
+        opacity: .9;
+    }
+    .dialog-container{
+        position: fixed;
+        z-index:80;
+        top: 10%;
+        left: 25%;
+        width: 50%;
+        /* margin: 0 auto; */
+        background-color: #eee;
+        border-radius: 3px;
+        box-shadow: 0 5px 15px rgba(0,0,0,.5);
+    }
+    span.close-btn{
+        padding: 0 5px;
+        float: right;
+        cursor: pointer;
+        font-size: 18px;
+        font-weight: bold;
+    }
+</style>
\ No newline at end of file
--- a/src/components/Sticky/index.vue
+++ b/src/components/Sticky/index.vue
+<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: '',
+      width: undefined,
+      height: undefined,
+      isSticky: false
+    }
+  },
+  mounted() {
+    this.height = this.$el.getBoundingClientRect().height
+    window.addEventListener('scroll', this.handleScroll)
+    window.addEventListener('resize', this.handleReize)
+  },
+  activated() {
+    this.handleScroll()
+  },
+  destroyed() {
+    window.removeEventListener('scroll', this.handleScroll)
+    window.removeEventListener('resize', this.handleReize)
+  },
+  methods: {
+    sticky() {
+      if (this.active) {
+        return
+      }
+      this.position = 'fixed'
+      this.active = true
+      this.width = this.width + 'px'
+      this.isSticky = true
+    },
+    reset() {
+      if (!this.active) {
+        return
+      }
+      this.position = ''
+      this.width = 'auto'
+      this.active = false
+      this.isSticky = false
+    },
+    handleScroll() {
+      this.width = this.$el.getBoundingClientRect().width
+      const offsetTop = this.$el.getBoundingClientRect().top
+      if (offsetTop < this.stickyTop) {
+        this.sticky()
+        return
+      }
+      this.reset()
+    },
+    handleReize() {
+      if (this.isSticky) {
+        this.width = this.$el.getBoundingClientRect().width + 'px'
+      }
+    }
+  }
+}
+</script>
--- a/src/components/SvgIcon/index.vue
+++ b/src/components/SvgIcon/index.vue
+<template>
+  <svg :class="svgClass" aria-hidden="true">
+    <use :xlink:href="iconName"></use>
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'svg-icon',
+  props: {
+    iconClass: {
+      type: String,
+      required: true
+    },
+    className: {
+      type: String
+    }
+  },
+  computed: {
+    iconName() {
+      return `#icon-${this.iconClass}`
+    },
+    svgClass() {
+      if (this.className) {
+        return 'svg-icon ' + this.className
+      } else {
+        return 'svg-icon'
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.svg-icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+</style>
--- a/src/components/Tinymce/components/editorImage.vue
+++ b/src/components/Tinymce/components/editorImage.vue
+<template>
+  <div class="upload-container">
+    <el-button :style="{background:color,borderColor:color}" icon="el-icon-upload" size="mini" type="primary" @click=" dialogVisible=true">上传图片
+    </el-button>
+    <el-dialog :visible.sync="dialogVisible">
+      <el-upload
+        :multiple="true"
+        :file-list="fileList"
+        :show-file-list="true"
+        :on-remove="handleRemove"
+        :on-success="handleSuccess"
+        :before-upload="beforeUpload"
+        :headers="headers"
+        class="editor-slide-upload"
+        :action="url"
+        list-type="picture-card">
+        <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'
+  import { upload_url } from '@/common/config'
+  import { getToken } from '@/utils/auth'
+  export default {
+    name: 'EditorSlideUpload',
+    props: {
+      color: {
+        type: String,
+        default: '#1890ff'
+      }
+    },
+    data() {
+      return {
+        dialogVisible: false,
+        listObj: {},
+        fileList: [],
+        headers: {
+          'user-token': getToken()
+        },
+        // 上传的url
+        url: upload_url
+      }
+    },
+    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
+        }
+        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>
+  .editor-slide-upload {
+    margin-bottom: 20px;
+    /deep/ .el-upload--picture-card {
+      width: 100%;
+    }
+  }
+</style>
--- a/src/components/Tinymce/index.vue
+++ b/src/components/Tinymce/index.vue
+<template>
+  <div class="tinymce-container editor-container" :class="{fullscreen:fullscreen}">
+    <textarea class="tinymce-textarea" :id="tinymceId"></textarea>
+    <div class="editor-custom-btn-container">
+      <editorImage color="#1890ff" class="editor-upload-btn" @successCBK="imageSuccessCBK"></editorImage>
+    </div>
+  </div>
+</template>
+
+<script>
+import editorImage from './components/editorImage'
+import plugins from './plugins'
+import toolbar from './toolbar'
+
+export default {
+  name: 'tinymce',
+  components: { editorImage },
+  props: {
+    id: {
+      type: String
+    },
+    value: {
+      type: String,
+      default: ''
+    },
+    toolbar: {
+      type: Array,
+      required: false,
+      default() {
+        return []
+      }
+    },
+    menubar: {
+      default: 'file edit insert view format table'
+    },
+    height: {
+      type: Number,
+      required: false,
+      default: 360
+    }
+  },
+  data() {
+    return {
+      hasChange: false,
+      hasInit: false,
+      tinymceId: this.id || 'vue-tinymce-' + +new Date(),
+      fullscreen: false
+    }
+  },
+  watch: {
+    value(val) {
+      if (!this.hasChange && this.hasInit) {
+        this.$nextTick(() =>
+          window.tinymce.get(this.tinymceId).setContent(val || ''))
+      }
+    }
+  },
+  mounted() {
+    this.initTinymce()
+  },
+  activated() {
+    this.initTinymce()
+  },
+  deactivated() {
+    this.destroyTinymce()
+  },
+  methods: {
+    initTinymce() {
+      const _this = this
+      window.tinymce.init({
+        selector: `#${this.tinymceId}`,
+        height: this.height,
+        body_class: 'panel-body ',
+        object_resizing: false,
+        toolbar: this.toolbar.length > 0 ? this.toolbar : toolbar,
+        menubar: this.menubar,
+        plugins: plugins,
+        language: 'zh_CN',
+        end_container_on_empty_block: true,
+        powerpaste_word_import: 'clean',
+        code_dialog_height: 450,
+        code_dialog_width: 1000,
+        advlist_bullet_styles: 'square',
+        advlist_number_styles: 'default',
+        imagetools_cors_hosts: ['www.tinymce.com', 'codepen.io'],
+        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 SetContent', () => {
+            this.hasChange = true
+            this.$emit('input', editor.getContent())
+          })
+        },
+        setup(editor) {
+          editor.on('FullscreenStateChanged', (e) => {
+            _this.fullscreen = e.state
+          })
+        }
+        // // 整合七牛上传
+        // images_dataimg_filter(img) {
+        //   setTimeout(() => {
+        //     const $image = $(img);
+        //     $image.removeAttr('width');
+        //     $image.removeAttr('height');
+        //     if ($image[0].height && $image[0].width) {
+        //       $image.attr('data-wscntype', 'image');
+        //       $image.attr('data-wscnh', $image[0].height);
+        //       $image.attr('data-wscnw', $image[0].width);
+        //       $image.addClass('wscnph');
+        //     }
+        //   }, 0);
+        //   return img
+        // },
+        // images_upload_handler(blobInfo, success, failure, progress) {
+        //   progress(0);
+        //   const token = _this.$store.getters.token;
+        //   getToken(token).then(response => {
+        //     const url = response.data.qiniu_url;
+        //     const formData = new FormData();
+        //     formData.append('token', response.data.qiniu_token);
+        //     formData.append('key', response.data.qiniu_key);
+        //     formData.append('file', blobInfo.blob(), url);
+        //     upload(formData).then(() => {
+        //       success(url);
+        //       progress(100);
+        //     })
+        //   }).catch(err => {
+        //     failure('出现未知问题，刷新页面，或者联系程序员')
+        //     console.log(err);
+        //   });
+        // },
+      })
+    },
+    destroyTinymce() {
+      if (window.tinymce.get(this.tinymceId)) {
+        window.tinymce.get(this.tinymceId).destroy()
+      }
+    },
+    setContent(value) {
+      window.tinymce.get(this.tinymceId).setContent(value)
+    },
+    getContent() {
+      window.tinymce.get(this.tinymceId).getContent()
+    },
+    imageSuccessCBK(arr) {
+      const _this = this
+      arr.forEach(v => {
+        window.tinymce.get(_this.tinymceId).insertContent(`<img class="wscnph" src="${v.url}" >`)
+      })
+    }
+  },
+  destroyed() {
+    this.destroyTinymce()
+  }
+}
+</script>
+
+<style scoped>
+.tinymce-container {
+  position: relative;
+}
+.tinymce-container>>>.mce-fullscreen {
+  z-index: 10000;
+}
+.tinymce-textarea {
+  visibility: hidden;
+  z-index: -1;
+}
+.editor-custom-btn-container {
+  position: absolute;
+  right: 4px;
+  top: 4px;
+  /*z-index: 2005;*/
+}
+.fullscreen .editor-custom-btn-container {
+  z-index: 10000;
+  position: fixed;
+}
+.editor-upload-btn {
+  display: inline-block;
+}
+</style>
--- a/src/components/Tinymce/plugins.js
+++ b/src/components/Tinymce/plugins.js
+// Any plugins you want to use has to be imported
+// Detail plugins list see https://www.tinymce.com/docs/plugins/
+// Custom builds see https://www.tinymce.com/download/custom-builds/
+
+const plugins = ['advlist anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools importcss insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount']
+
+export default plugins
--- a/src/components/Tinymce/toolbar.js
+++ b/src/components/Tinymce/toolbar.js
+// Here is a list of the toolbar
+// Detail list see https://www.tinymce.com/docs/advanced/editor-control-identifiers/#toolbarcontrols
+
+const toolbar = ['bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample', 'hr bullist numlist link image charmap	 preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen']
+
+export default toolbar
--- a/src/directive/waves/index.js
+++ b/src/directive/waves/index.js
+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
+.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;
+}
\ No newline at end of file
--- a/src/directive/waves/waves.js
+++ b/src/directive/waves/waves.js
+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/icons/index.js
+++ b/src/icons/index.js
+import Vue from 'vue'
+import SvgIcon from '@/components/SvgIcon'// svg组件
+
+// register globally
+Vue.component('svg-icon', SvgIcon)
+
+const requireAll = requireContext => requireContext.keys().map(requireContext)
+const req = require.context('./svg', false, /\.svg$/)
+requireAll(req)
--- a/src/icons/svg/example.svg
+++ b/src/icons/svg/example.svg
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1511504199105" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1815" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M770.56 460.8h250.88C998.4 220.16 803.84 25.6 563.2 2.56v250.88c104.96 20.48 186.88 102.4 207.36 207.36z m0 0M460.8 253.44V2.56C220.16 25.6 25.6 220.16 2.56 460.8h250.88c20.48-104.96 102.4-186.88 207.36-207.36z m0 0M563.2 770.56v250.88c243.2-23.04 435.2-217.6 460.8-460.8H773.12C750.08 668.16 668.16 750.08 563.2 770.56z m0 0M253.44 563.2H2.56c23.04 243.2 217.6 435.2 460.8 460.8V773.12C355.84 750.08 273.92 668.16 253.44 563.2z m0 0" fill="" p-id="1816"></path></svg>
\ No newline at end of file
--- a/src/icons/svg/eye.svg
+++ b/src/icons/svg/eye.svg
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="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>
\ No newline at end of file
--- a/src/icons/svg/form.svg
+++ b/src/icons/svg/form.svg
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1511504319223" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3230" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M942.827259 80.3367c-11.42419-11.406794-26.41051-17.117866-41.377386-17.117866-14.985296 0-29.952172 5.711072-41.358967 17.117866L719.392444 221.014696l-19.441794 19.441794L681.577187 258.832 569.516971 370.909611 375.99749 564.411697l0 0.019443 0 84.372619 81.145112 0 0.010233 0 95.418186-95.435583 213.398228-213.400275 3.14155-3.14155-0.019443 0 9.979282-9.977235 0 0L942.827259 163.073052C965.697129 140.259464 965.697129 103.186104 942.827259 80.3367z" p-id="3231"></path><path d="M793.542234 367.521444 580.14196 580.939115 484.72582 676.376745 473.299583 687.800935 457.152834 687.800935 375.99749 687.800935 337.000314 687.800935 337.000314 648.803759 337.000314 564.411697 337.000314 548.264948 348.424504 536.838711 541.943986 343.338672 654.004201 231.259014 665.428392 219.834824 64.020082 219.834824 64.020082 960.781166 804.966425 960.781166 804.966425 356.116697 796.607036 364.475062Z" p-id="3232"></path></svg>
\ No newline at end of file
--- a/src/icons/svg/nested.svg
+++ b/src/icons/svg/nested.svg
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1529559567446" class="icon" style="" viewBox="0 0 1167 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1767" xmlns:xlink="http://www.w3.org/1999/xlink" width="227.9296875" height="200"><defs><style type="text/css"></style></defs><path d="M0.015952 74.459413A2.286 2.286 1440 1 0 145.85218 74.459413 2.286 2.286 1440 1 0 0.015952 74.459413zM291.720312 1.525347 1166.801488 1.525347 1166.801488 147.361574 291.720312 147.361574zM291.720312 366.163773A2.286 2.286 1440 1 0 437.55654 366.163773 2.286 2.286 1440 1 0 291.720312 366.163773zM583.424672 293.229707 1166.801488 293.229707 1166.801488 439.065934 583.424672 439.065934zM291.720312 949.540588A2.286 2.286 1440 1 0 437.55654 949.540588 2.286 2.286 1440 1 0 291.720312 949.540588zM583.424672 876.638427 1166.801488 876.638427 1166.801488 1022.474654 583.424672 1022.474654zM583.424672 657.836228A2.286 2.286 1440 1 0 729.2609 657.836228 2.286 2.286 1440 1 0 583.424672 657.836228zM875.129032 584.934067 1166.801488 584.934067 1166.801488 730.770294 875.129032 730.770294z" p-id="1768"></path></svg>
\ No newline at end of file
--- a/src/icons/svg/password.svg
+++ b/src/icons/svg/password.svg
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="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>
\ No newline at end of file
--- a/src/icons/svg/table.svg
+++ b/src/icons/svg/table.svg
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1511504440567" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5070" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M568.6 0h454.9v454.9H568.6V0z m0 568.6h454.9v454.9H568.6V568.6zM0 568.6h454.9v454.9H0V568.6zM0 0h454.9v454.9H0V0z" fill="" p-id="5071"></path></svg>
\ No newline at end of file
--- a/src/icons/svg/tree.svg
+++ b/src/icons/svg/tree.svg
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1511512690058" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3507" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M1013.703 693.345c6.865 6.865 10.297 14.874 10.297 24.027l0 205.944c0 9.916-3.432 18.115-10.297 24.599-6.865 6.483-15.255 9.725-25.171 9.725L782.588 957.64c-9.153 0-17.162-3.242-24.027-9.725-6.865-6.483-10.297-14.683-10.297-24.599L748.264 717.372c0-6.102 1.526-11.823 4.577-17.162s7.246-9.534 12.586-12.586 11.06-4.577 17.162-4.577l77.801 0L860.39 546.896c0-4.577-1.144-8.772-3.432-12.586s-5.339-6.865-9.153-9.153-8.009-3.432-12.585-3.432L543.464 521.725l0 161.323 77.801 0c9.153 0 17.162 3.432 24.027 10.297s10.297 14.874 10.297 24.027l0 205.944c0 6.102-1.526 11.823-4.577 17.162s-7.246 9.534-12.585 12.585-11.06 4.577-17.162 4.577L415.321 957.64c-6.102 0-11.823-1.526-17.162-4.577s-9.725-7.246-13.158-12.585-5.149-11.06-5.149-17.162L379.852 717.372c0-9.153 3.432-17.162 10.297-24.027s15.255-10.297 25.171-10.297l76.657 0L491.977 521.725 188.782 521.725c-7.628 0-13.92 2.479-18.878 7.437-4.958 4.958-7.437 10.869-7.437 17.734l0 136.152 77.801 0c9.916 0 18.115 3.432 24.599 10.297s9.725 14.874 9.725 24.027l0 205.944c0 9.916-3.242 18.115-9.725 24.599-6.483 6.483-14.683 9.725-24.599 9.725L34.324 957.64c-3.814 0-7.437-0.572-10.869-1.716-3.432-1.144-6.483-2.67-9.153-4.577-2.67-1.907-5.149-4.386-7.437-7.437-2.288-3.051-4.004-6.293-5.149-9.725C0.572 930.753 0 927.13 0 923.316L0 717.372c0-3.051 0.381-6.102 1.144-9.153s1.907-5.721 3.432-8.009 3.432-4.577 5.721-6.865 4.577-4.195 6.865-5.721 4.958-2.67 8.009-3.432 6.102-1.144 9.153-1.144l77.801 0L112.125 495.41c0-6.865 2.479-12.776 7.437-17.734s10.869-7.437 17.734-7.437l354.682 0L491.978 342.096l-76.657 0c-9.916 0-18.306-3.432-25.171-10.297s-10.297-14.874-10.297-24.027L379.853 101.828c0-9.916 3.432-18.306 10.297-25.171s15.255-10.297 25.171-10.297l205.944 0c6.102 0 11.823 1.716 17.162 5.149 5.339 3.432 9.534 7.818 12.585 13.158 3.051 5.339 4.577 11.06 4.577 17.162l0 205.944c0 9.153-3.432 17.162-10.297 24.027s-14.874 10.297-24.027 10.297l-77.801 0 0 128.143L885.56 470.24c7.628 0 13.92 2.479 18.878 7.437s7.437 10.869 7.437 17.734l0 187.638 76.657 0C998.448 683.048 1006.838 686.48 1013.703 693.345z" p-id="3508"></path></svg>
\ No newline at end of file
--- a/src/icons/svg/user.svg
+++ b/src/icons/svg/user.svg
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1503993891882" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7986" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M504.951 511.98c93.49 0 169.28-74.002 169.28-165.26 0-91.276-75.79-165.248-169.28-165.248-93.486 0-169.287 73.972-169.279 165.248-0.001 91.258 75.793 165.26 169.28 165.26z m77.6 55.098H441.466c-120.767 0-218.678 95.564-218.678 213.45V794.3c0 48.183 97.911 48.229 218.678 48.229H582.55c120.754 0 218.66-1.78 218.66-48.229v-13.77c0-117.887-97.898-213.45-218.66-213.45z" p-id="7987"></path></svg>
\ No newline at end of file
--- a/src/main.js
+++ b/src/main.js
+import Vue from 'vue'
+
+import 'normalize.css/normalize.css'// A modern alternative to CSS resets
+
+import ElementUI from 'element-ui'
+import 'element-ui/lib/theme-chalk/index.css'
+import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
+import '@/styles/index.scss' // global css
+
+import App from './App'
+import router from './router'
+import store from './store'
+
+import '@/icons' // icon
+import '@/permission' // permission control
+
+// 导入请求框架
+import api from './api'
+// 使用api
+Vue.use(api)
+
+// 水波纹指令
+import waves from '@/directive/waves'
+// 使用api
+Vue.use(waves)
+
+Vue.use(ElementUI, { zhLocale })
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  router,
+  store,
+  render: h => h(App)
+})
--- a/src/permission.js
+++ b/src/permission.js
+import router from './router'
+import store from './store'
+import NProgress from 'nprogress' // Progress 进度条
+import 'nprogress/nprogress.css'// Progress 进度条样式
+import { Message } from 'element-ui'
+import { getToken } from '@/utils/auth' // 验权
+
+const whiteList = ['/userList','/courseList','/pianoList','/courseEdit','/bannerList','/bannerEdit'] // 不重定向白名单
+router.beforeEach((to, from, next) => {
+  NProgress.start()
+  if (getToken()) {
+    if (to.path === '/login') {
+      next({ path: '/' })
+      NProgress.done() // if current page is dashboard will not trigger	afterEach hook, so manually handle it
+    } else {
+      if (store.getters.roles.length === 0) {
+        store.dispatch('GetInfo').then(res => { // 拉取用户信息
+          next()
+        }).catch((err) => {
+          store.dispatch('FedLogOut').then(() => {
+            Message.error(err || 'Verification failed, please login again')
+            next({ path: '/' })
+          })
+        })
+      } else {
+        next()
+      }
+    }
+  } else {
+    if (whiteList.indexOf(to.path) !== -1) {
+      next()
+    } else {
+      next('/login')
+      NProgress.done()
+    }
+  }
+})
+
+router.afterEach(() => {
+  NProgress.done() // 结束Progress
+})
--- a/src/router/_import_development.js
+++ b/src/router/_import_development.js
+module.exports = file => require('@/views' + file + '.vue').default // vue-loader at least v13.0.0+
--- a/src/router/_import_production.js
+++ b/src/router/_import_production.js
+module.exports = file => () => import('@/views' + file + '.vue')
--- a/src/router/index.js
+++ b/src/router/index.js
+import Vue from 'vue'
+import Router from 'vue-router'
+// const _import = require('./_import_' + process.env.NODE_ENV)
+// in development-env not use lazy-loading, because lazy-loading too many pages will cause webpack hot update too slow. so only in production use lazy-loading;
+// detail: https://panjiachen.github.io/vue-element-admin-site/#/lazy-loading
+
+Vue.use(Router)
+
+/* Layout */
+import Layout from '../views/layout/Layout'
+
+/**
+ * hidden: true                   if `hidden:true` will not show in the sidebar(default is false)
+ * alwaysShow: true               if set true, will always show the root menu, whatever its child routes length
+ *                                if not set alwaysShow, only more than one route under the children
+ *                                it will becomes nested mode, otherwise not show the root menu
+ * redirect: noredirect           if `redirect:noredirect` will no redirct in the breadcrumb
+ * name:'router-name'             the name is used by <keep-alive> (must set!!!)
+ * meta : {
+    title: 'title'               the name show in submenu and breadcrumb (recommend set)
+    icon: 'svg-name'             the icon show in the sidebar,
+  }
+ **/
+export const constantRouterMap = [
+  {
+    path: '/login',
+    component: () => import('@/views/login/index'),
+    hidden: true
+  },
+  { path: '/404', component: () => import('@/views/404'), hidden: true },
+  {
+    path: '/',
+    component: Layout,
+    redirect: '/userList',
+    children: [
+      {
+        path: '/userList',
+        component: () => import('@/views/user/index'),
+        name: 'userList',
+        meta: { title: '用户管理', noCache: false }
+      }
+    ]
+  },
+  {
+    path: '',
+    component: Layout,
+    children: [
+      {
+        path: '/pianoList',
+        component: () => import('@/views/piano/index'),
+        name: 'pianoList',
+        meta: { title: '商家管理', noCache: false }
+      },
+      {
+        path: '/pianoEdit',
+        component: () => import('@/views/piano/pianoEdit'),
+        name: 'pianoEdit',
+        meta: { title: '商家编辑', noCache: false },
+        hidden: true
+      }
+    ]
+  },
+  {
+    path: '',
+    component: Layout,
+    children: [
+      {
+        path: '/userCost',
+        component: () => import('@/views/userCost/index'),
+        name: 'userCost',
+        meta: { title: '消费记录', noCache: false }
+      }
+    ]
+  },
+  {
+    path: '',
+    component: Layout,
+    children: [
+      {
+        path: '/bannerList',
+        component: () => import('@/views/system/banner/index'),
+        name: 'bannerList',
+        meta: { title: '广告图管理', noCache: false }
+      },
+      {
+        path: '/bannerEdit',
+        component: () => import('@/views/system/banner/bannerEdit'),
+        name: 'bannerEdit',
+        meta: { title: '广告图编辑', noCache: false },
+        hidden: true
+      }
+    ]
+  },
+  {
+    path: '',
+    component: Layout,
+    children: [
+      {
+        path: '/courseList',
+        component: () => import('@/views/course/index'),
+        name: 'courseList',
+        meta: { title: '在线课程管理', noCache: false }
+      },
+      {
+        path: '/courseEdit',
+        component: () => import('@/views/course/courseEdit'),
+        name: 'courseEdit',
+        meta: { title: '在线课程编辑', noCache: false },
+        hidden: true
+      }
+    ]
+  },
+  { path: '*', redirect: '/404', hidden: true }
+]
+
+export default new Router({
+  // mode: 'history', //后端支持可开
+  scrollBehavior: () => ({ x: 0 }),
+  routes: constantRouterMap
+})
+
+export const asyncRouterMap = [{ path: '*', redirect: '/404', hidden: true }]
--- a/src/store/getters.js
+++ b/src/store/getters.js
+const getters = {
+  sidebar: state => state.app.sidebar,
+  device: state => state.app.device,
+  token: state => state.user.token,
+  avatar: state => state.user.avatar,
+  name: state => state.user.name,
+  roles: state => state.user.roles,
+
+  // 状态值
+  forbids: state => state.app.forbids,
+  displays: state => state.app.displays,
+  // 加载显示的文字
+  elementLoadingText: state => state.app.elementLoadingText
+}
+export default getters
--- a/src/store/index.js
+++ b/src/store/index.js
+import Vue from 'vue'
+import Vuex from 'vuex'
+import app from './modules/app'
+import user from './modules/user'
+import getters from './getters'
+
+Vue.use(Vuex)
+
+const store = new Vuex.Store({
+  modules: {
+    app,
+    user
+  },
+  getters
+})
+
+export default store
--- a/src/store/modules/app.js
+++ b/src/store/modules/app.js
+import Cookies from 'js-cookie'
+
+const app = {
+  state: {
+    sidebar: {
+      opened: !+Cookies.get('sidebarStatus'),
+      withoutAnimation: false
+    },
+    device: 'desktop',
+    forbids: [
+      { label: '启用', value: '0', type: 'primary' },
+      { label: '禁止', value: '1', type: 'danger' }
+      // { label: '锁定', value: '-1', type: 'warning' }
+    ],
+    displays: [
+      { label: '显示', value: 1, type: 'primary' },
+      { label: '隐藏', value: 0, type: 'info' }
+    ],
+    // 加载显示的文字
+    elementLoadingText: '拼命加载中'
+  },
+  mutations: {
+    TOGGLE_SIDEBAR: state => {
+      if (state.sidebar.opened) {
+        Cookies.set('sidebarStatus', 1)
+      } else {
+        Cookies.set('sidebarStatus', 0)
+      }
+      state.sidebar.opened = !state.sidebar.opened
+      state.sidebar.withoutAnimation = false
+    },
+    CLOSE_SIDEBAR: (state, withoutAnimation) => {
+      Cookies.set('sidebarStatus', 1)
+      state.sidebar.opened = false
+      state.sidebar.withoutAnimation = withoutAnimation
+    },
+    TOGGLE_DEVICE: (state, device) => {
+      state.device = device
+    }
+  },
+  actions: {
+    ToggleSideBar: ({ commit }) => {
+      commit('TOGGLE_SIDEBAR')
+    },
+    CloseSideBar({ commit }, { withoutAnimation }) {
+      commit('CLOSE_SIDEBAR', withoutAnimation)
+    },
+    ToggleDevice({ commit }, device) {
+      commit('TOGGLE_DEVICE', device)
+    }
+  }
+}
+
+export default app
--- a/src/store/modules/user.js
+++ b/src/store/modules/user.js
+import { login, logout, getInfo } from '@/api/login'
+import { getToken, setToken, removeToken } from '@/utils/auth'
+
+const user = {
+  state: {
+    token: getToken(),
+    name: '',
+    avatar: '',
+    roles: []
+  },
+
+  mutations: {
+    SET_TOKEN: (state, token) => {
+      state.token = token
+    },
+    SET_NAME: (state, name) => {
+      state.name = name
+    },
+    SET_AVATAR: (state, avatar) => {
+      state.avatar = avatar
+    },
+    SET_ROLES: (state, roles) => {
+      state.roles = roles
+    }
+  },
+
+  actions: {
+    // 登录
+    Login({ commit }, userInfo) {
+      const username = userInfo.username.trim()
+      return new Promise((resolve, reject) => {
+        login(username, userInfo.password).then(response => {
+          const data = response.data
+          setToken(data)
+          commit('SET_TOKEN', data)
+          resolve()
+        }).catch(error => {
+          reject(error)
+        })
+      })
+    },
+
+    // 获取用户信息
+    GetInfo({ commit, state }) {
+      return new Promise((resolve, reject) => {
+        getInfo(state.token).then(response => {
+          const data = response.data
+          commit('SET_ROLES', ['admin'])
+          commit('SET_NAME', data.name)
+          commit('SET_AVATAR', data.picture)
+          resolve(response)
+        }).catch(error => {
+          reject(error)
+        })
+      })
+    },
+
+    // 登出
+    LogOut({ commit, state }) {
+      return new Promise((resolve, reject) => {
+        logout(state.token).then(() => {
+          commit('SET_TOKEN', '')
+          commit('SET_ROLES', [])
+          removeToken()
+          resolve()
+        }).catch(error => {
+          reject(error)
+        })
+      })
+    },
+
+    // 前端 登出
+    FedLogOut({ commit }) {
+      return new Promise(resolve => {
+        commit('SET_TOKEN', '')
+        removeToken()
+        resolve()
+      })
+    }
+  }
+}
+
+export default user
--- a/src/styles/element-ui.scss
+++ b/src/styles/element-ui.scss
+ //to reset element-ui default css
+.el-upload {
+  input[type="file"] {
+    display: none !important;
+  }
+}
+
+.el-upload__input {
+  display: none;
+}
+
+//暂时性解决diolag 问题 https://github.com/ElemeFE/element/issues/2461
+.el-dialog {
+  transform: none;
+  left: 0;
+  position: relative;
+  margin: 0 auto;
+}
+
+//element ui upload
+.upload-container {
+  .el-upload {
+    width: 100%;
+    .el-upload-dragger {
+      width: 100%;
+      height: 200px;
+    }
+  }
+}
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
+@import './variables.scss';
+@import './mixin.scss';
+@import './transition.scss';
+@import './element-ui.scss';
+@import './sidebar.scss';
+
+body {
+  height: 100%;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+}
+
+label {
+  font-weight: 700;
+}
+
+html {
+  height: 100%;
+  box-sizing: border-box;
+}
+
+#app{
+  height: 100%;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+a,
+a:focus,
+a:hover {
+  cursor: pointer;
+  color: inherit;
+  outline: none;
+  text-decoration: none;
+}
+
+div:focus{
+  outline: none;
+ }
+
+a:focus,
+a:active {
+  outline: none;
+}
+
+a,
+a:focus,
+a:hover {
+  cursor: pointer;
+  color: inherit;
+  text-decoration: none;
+}
+
+.clearfix {
+  &:after {
+    visibility: hidden;
+    display: block;
+    font-size: 0;
+    content: " ";
+    clear: both;
+    height: 0;
+  }
+}
+
+//main-container全局样式
+.app-main{
+  min-height: 100%
+}
+
+.app-container {
+  padding: 20px;
+}
+.filter-container{
+  margin-bottom: 20px;
+}
+.pagination-container{
+  float: right;
+  margin-top: 5px;
+}
--- a/src/styles/mixin.scss
+++ b/src/styles/mixin.scss
+@mixin clearfix {
+  &:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+}
+
+@mixin scrollBar {
+  &::-webkit-scrollbar-track-piece {
+    background: #d3dce6;
+  }
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: #99a9bf;
+    border-radius: 20px;
+  }
+}
+
+@mixin relative {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
+#app {
+  // 主体区域
+  .main-container {
+    min-height: 100%;
+    transition: margin-left .28s;
+    margin-left: 180px;
+    position: relative;
+  }
+  // 侧边栏
+  .sidebar-container {
+    transition: width 0.28s;
+    width: 180px !important;
+    height: 100%;
+    position: fixed;
+    font-size: 0px;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1001;
+    overflow: hidden;
+    //reset element-ui css
+    .horizontal-collapse-transition {
+      transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
+    }
+    .scrollbar-wrapper {
+      height: calc(100% + 15px);
+      .el-scrollbar__view {
+        height: 100%;
+      }
+    }
+    .is-horizontal {
+      display: none;
+    }
+    a {
+      display: inline-block;
+      width: 100%;
+      overflow: hidden;
+    }
+    .svg-icon {
+      margin-right: 16px;
+    }
+    .el-menu {
+      border: none;
+      height: 100%;
+      width: 100% !important;
+    }
+  }
+  .hideSidebar {
+    .sidebar-container {
+      width: 36px !important;
+    }
+    .main-container {
+      margin-left: 36px;
+    }
+    .submenu-title-noDropdown {
+      padding-left: 10px !important;
+      position: relative;
+      .el-tooltip {
+        padding: 0 10px !important;
+      }
+    }
+    .el-submenu {
+      overflow: hidden;
+      &>.el-submenu__title {
+        padding-left: 10px !important;
+        .el-submenu__icon-arrow {
+          display: none;
+        }
+      }
+    }
+    .el-menu--collapse {
+      .el-submenu {
+        &>.el-submenu__title {
+          &>span {
+            height: 0;
+            width: 0;
+            overflow: hidden;
+            visibility: hidden;
+            display: inline-block;
+          }
+        }
+      }
+    }
+  }
+  .sidebar-container .nest-menu .el-submenu>.el-submenu__title,
+  .sidebar-container .el-submenu .el-menu-item {
+    min-width: 180px !important;
+    background-color: $subMenuBg !important;
+    &:hover {
+      background-color: $menuHover !important;
+    }
+  }
+  .el-menu--collapse .el-menu .el-submenu {
+    min-width: 180px !important;
+  }
+
+  //适配移动端
+  .mobile {
+    .main-container {
+      margin-left: 0px;
+    }
+    .sidebar-container {
+      transition: transform .28s;
+      width: 180px !important;
+    }
+    &.hideSidebar {
+      .sidebar-container {
+        transition-duration: 0.3s;
+        transform: translate3d(-180px, 0, 0);
+      }
+    }
+  }
+  .withoutAnimation {
+    .main-container,
+    .sidebar-container {
+      transition: none;
+    }
+  }
+}
--- a/src/styles/transition.scss
+++ b/src/styles/transition.scss
+//globl transition css
+
+/*fade*/
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.28s;
+}
+
+.fade-enter,
+.fade-leave-active {
+  opacity: 0;
+}
+
+/*fade*/
+.breadcrumb-enter-active,
+.breadcrumb-leave-active {
+  transition: all .5s;
+}
+
+.breadcrumb-enter,
+.breadcrumb-leave-active {
+  opacity: 0;
+  transform: translateX(20px);
+}
+
+.breadcrumb-move {
+  transition: all .5s;
+}
+
+.breadcrumb-leave-active {
+  position: absolute;
+}
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
+//sidebar
+$menuBg:#304156;
+$subMenuBg:#1f2d3d;
+$menuHover:#001528;
--- a/src/utils/auth.js
+++ b/src/utils/auth.js
+import Cookies from 'js-cookie'
+
+const TokenKey = 'Admin-Token'
+
+export function getToken() {
+  return Cookies.get(TokenKey)
+}
+
+export function setToken(token) {
+  return Cookies.set(TokenKey, token)
+}
+
+export function removeToken() {
+  return Cookies.remove(TokenKey)
+}
--- a/src/utils/index.js
+++ b/src/utils/index.js
+/**
+ * Created by jiachenpan on 16/11/18.
+ */
+
+export function parseTime(time, cFormat) {
+  if (arguments.length === 0) {
+    return null
+  }
+  const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
+  let date
+  if (typeof time === 'object') {
+    date = time
+  } else {
+    if (('' + time).length === 10) time = parseInt(time) * 1000
+    date = new Date(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 diffTime(startTime, endTime) {
+  const d = new Date(startTime)
+  const now = new Date(endTime)
+  let diff = (now - d) / 1000
+  let result = ''
+  if (diff > 3600 * 24) {
+    result += Math.ceil(diff / 3600 / 24) + '天'
+    diff = diff % (3600 * 24)
+  }
+  if (diff > 3600) {
+    result += Math.ceil(diff / 3600) + '小时'
+    diff = diff % 3600
+  }
+  if (diff > 60) {
+    result += Math.ceil(diff / 60) + '分钟'
+    diff = diff % 60
+  }
+  result += Math.ceil(diff) + '秒'
+  return result || '无'
+}
+
+/**
+ * 验证手机号
+ * @param str
+ * @returns {boolean}
+ */
+export function checkMobile(rule, value, callback) {
+  if (!value) {
+    return callback(new Error('手机号不能为空'))
+  }
+  const re = /^1\d{10}$/
+  if (re.test(value)) {
+    callback()
+  } else {
+    callback(new Error('手机号格式错误'))
+  }
+}
+
--- a/src/utils/request.js
+++ b/src/utils/request.js
+import axios from 'axios'
+import { Message, MessageBox } from 'element-ui'
+import store from '../store'
+import { getToken } from '@/utils/auth'
+
+// 创建axios实例
+const service = axios.create({
+  baseURL: process.env.BASE_API, // api的base_url
+  timeout: 20000 // 请求超时时间
+})
+
+// request拦截器
+service.interceptors.request.use(config => {
+  if (getToken()) {
+    config.headers['user-token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
+  }
+  return config
+}, error => {
+  // Do something with request error
+  console.log(error) // for debug
+  Promise.reject(error)
+})
+
+// respone拦截器
+service.interceptors.response.use(
+  response => {
+  /**
+  * code为非20000是抛错 可结合自己业务进行修改
+  */
+    const res = response.data
+    if (res.code !== 200) {
+      Message({
+        message: res.message,
+        type: 'error',
+        duration: 5 * 1000
+      })
+
+      // 50008:非法的token; 50012:其他客户端登录了;  50014:Token 过期了;
+      if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
+        MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录', '确定登出', {
+          confirmButtonText: '重新登录',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          store.dispatch('FedLogOut').then(() => {
+            location.reload()// 为了重新实例化vue-router对象 避免bug
+          })
+        })
+      }
+      return Promise.reject('error')
+    } else {
+      return response.data
+    }
+  },
+  error => {
+    console.log('err' + error)// for debug
+    Message({
+      message: error.message,
+      type: 'error',
+      duration: 5 * 1000
+    })
+    return Promise.reject(error)
+  }
+)
+
+export default service
--- a/src/utils/validate.js
+++ b/src/utils/validate.js
+/**
+ * Created by jiachenpan on 16/11/18.
+ */
+
+export function isvalidUsername(str) {
+  const valid_map = ['admin', 'editor']
+  return valid_map.indexOf(str.trim()) >= 0
+}
+
+/* 合法uri*/
+export function validateURL(textval) {
+  const urlregex = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
+  return urlregex.test(textval)
+}
+
+/* 小写字母*/
+export function validateLowerCase(str) {
+  const reg = /^[a-z]+$/
+  return reg.test(str)
+}
+
+/* 大写字母*/
+export function validateUpperCase(str) {
+  const reg = /^[A-Z]+$/
+  return reg.test(str)
+}
+
+/* 大小写字母*/
+export function validatAlphabets(str) {
+  const reg = /^[A-Za-z]+$/
+  return reg.test(str)
+}
+
--- a/src/views/404.vue
+++ b/src/views/404.vue
+<template>
+  <div class="wscn-http404-container">
+    <div class="wscn-http404">
+      <div class="pic-404">
+        <img class="pic-404__parent" :src="img_404" alt="404">
+        <img class="pic-404__child left" :src="img_404_cloud" alt="404">
+        <img class="pic-404__child mid" :src="img_404_cloud" alt="404">
+        <img class="pic-404__child right" :src="img_404_cloud" alt="404">
+      </div>
+      <div class="bullshit">
+        <!--<div class="bullshit__oops">OOPS!</div>-->
+        <!--<div class="bullshit__info">版权所有-->
+          <!--<a class='link-type' href='https://wallstreetcn.com' target='_blank'>华尔街见闻</a>-->
+        <!--</div>-->
+        <div class="bullshit__headline">{{ message }}</div>
+        <div class="bullshit__info">请检查您输入的网址是否正确，请点击以下按钮返回主页或者发送错误报告</div>
+        <a href="" class="bullshit__return-home">返回首页</a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import img_404 from '@/assets/404_images/404.png'
+import img_404_cloud from '@/assets/404_images/404_cloud.png'
+
+export default {
+  name: 'page404',
+  data() {
+    return {
+      img_404,
+      img_404_cloud
+    }
+  },
+  computed: {
+    message() {
+      return '网管说这个页面你不能进......'
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.wscn-http404-container{
+  transform: translate(-50%,-50%);
+  position: absolute;
+  top: 40%;
+  left: 50%;
+}
+.wscn-http404 {
+  position: relative;
+  width: 1200px;
+  padding: 0 50px;
+  overflow: hidden;
+  .pic-404 {
+    position: relative;
+    float: left;
+    width: 600px;
+    overflow: hidden;
+    &__parent {
+      width: 100%;
+    }
+    &__child {
+      position: absolute;
+      &.left {
+        width: 80px;
+        top: 17px;
+        left: 220px;
+        opacity: 0;
+        animation-name: cloudLeft;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1s;
+      }
+      &.mid {
+        width: 46px;
+        top: 10px;
+        left: 420px;
+        opacity: 0;
+        animation-name: cloudMid;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1.2s;
+      }
+      &.right {
+        width: 62px;
+        top: 100px;
+        left: 500px;
+        opacity: 0;
+        animation-name: cloudRight;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1s;
+      }
+      @keyframes cloudLeft {
+        0% {
+          top: 17px;
+          left: 220px;
+          opacity: 0;
+        }
+        20% {
+          top: 33px;
+          left: 188px;
+          opacity: 1;
+        }
+        80% {
+          top: 81px;
+          left: 92px;
+          opacity: 1;
+        }
+        100% {
+          top: 97px;
+          left: 60px;
+          opacity: 0;
+        }
+      }
+      @keyframes cloudMid {
+        0% {
+          top: 10px;
+          left: 420px;
+          opacity: 0;
+        }
+        20% {
+          top: 40px;
+          left: 360px;
+          opacity: 1;
+        }
+        70% {
+          top: 130px;
+          left: 180px;
+          opacity: 1;
+        }
+        100% {
+          top: 160px;
+          left: 120px;
+          opacity: 0;
+        }
+      }
+      @keyframes cloudRight {
+        0% {
+          top: 100px;
+          left: 500px;
+          opacity: 0;
+        }
+        20% {
+          top: 120px;
+          left: 460px;
+          opacity: 1;
+        }
+        80% {
+          top: 180px;
+          left: 340px;
+          opacity: 1;
+        }
+        100% {
+          top: 200px;
+          left: 300px;
+          opacity: 0;
+        }
+      }
+    }
+  }
+  .bullshit {
+    position: relative;
+    float: left;
+    width: 300px;
+    padding: 30px 0;
+    overflow: hidden;
+    &__oops {
+      font-size: 32px;
+      font-weight: bold;
+      line-height: 40px;
+      color: #1482f0;
+      opacity: 0;
+      margin-bottom: 20px;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-fill-mode: forwards;
+    }
+    &__headline {
+      font-size: 20px;
+      line-height: 24px;
+      color: #222;
+      font-weight: bold;
+      opacity: 0;
+      margin-bottom: 10px;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.1s;
+      animation-fill-mode: forwards;
+    }
+    &__info {
+      font-size: 13px;
+      line-height: 21px;
+      color: grey;
+      opacity: 0;
+      margin-bottom: 30px;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.2s;
+      animation-fill-mode: forwards;
+    }
+    &__return-home {
+      display: block;
+      float: left;
+      width: 110px;
+      height: 36px;
+      background: #1482f0;
+      border-radius: 100px;
+      text-align: center;
+      color: #ffffff;
+      opacity: 0;
+      font-size: 14px;
+      line-height: 36px;
+      cursor: pointer;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.3s;
+      animation-fill-mode: forwards;
+    }
+    @keyframes slideUp {
+      0% {
+        transform: translateY(60px);
+        opacity: 0;
+      }
+      100% {
+        transform: translateY(0);
+        opacity: 1;
+      }
+    }
+  }
+}
+</style>
--- a/src/views/course/courseEdit.vue
+++ b/src/views/course/courseEdit.vue
+<template>
+  <div class="app-container">
+    <sticky className="sub-navbar">
+      <div style="text-align: right;margin-bottom: 20px">
+        <el-button type="primary" @click="saveData">保存</el-button>
+        <el-button type="danger" @click="backList">取消</el-button>
+      </div>
+    </sticky>
+    <el-form :rules="rules" ref="dataForm" :model="temp" label-position="left" label-width="100px"
+             style='width: 650px; margin-left:50px;'>
+      <el-form-item label="名称" prop="title">
+        <el-input type="text" placeholder="请标题名称"
+                  v-model.trim="temp.title">
+        </el-input>
+      </el-form-item>
+      <el-form-item label="课程类型" prop="curriculumType">
+        <el-select v-model="temp.curriculumType" placeholder="请课程名称">
+          <el-option
+            v-for="item in bannerTypes"
+            :key="item.courseName"
+            :label="item.courseName"
+            :value="item.courseName">
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <!--<el-form-item label="封面图" prop="url">-->
+      <!--&lt;!&ndash;<el-upload&ndash;&gt;-->
+      <!--&lt;!&ndash;class="avatar-uploader"&ndash;&gt;-->
+      <!--&lt;!&ndash;:action="uploadUrl"&ndash;&gt;-->
+      <!--&lt;!&ndash;list-type="picture-card"&ndash;&gt;-->
+      <!--&lt;!&ndash;:show-file-list="false"&ndash;&gt;-->
+      <!--&lt;!&ndash;:on-success="handleSuccess"&ndash;&gt;-->
+      <!--&lt;!&ndash;:on-remove="handleRemove"&ndash;&gt;-->
+      <!--&lt;!&ndash;:before-upload="beforeUpload">&ndash;&gt;-->
+      <!--&lt;!&ndash;<img v-if="temp.url" :src="temp.url" class="avatar">&ndash;&gt;-->
+      <!--&lt;!&ndash;<i v-else class='el-icon-plus avatar-uploader-icon'></i>&ndash;&gt;-->
+      <!--&lt;!&ndash;</el-upload>&ndash;&gt;-->
+      <!--</el-form-item>-->
+      <el-form-item label="封面图" prop="pictureAddress">
+        <el-upload
+          class="avatar-uploader"
+          :action="uploadUrl"
+          list-type="picture-card"
+          :show-file-list="false"
+          :on-success="handleImgSuccess"
+          :on-remove="handleImgRemove"
+          :before-upload="beforeUpload">
+          <img v-if="temp.pictureAddress" :src="temp.pictureAddress" class="avatar-img">
+          <i v-else class='el-icon-plus avatar-uploader-icon'></i>
+        </el-upload>
+      </el-form-item>
+      <el-form-item label="视频上传" prop="videoAddress">
+        <!-- action必选参数, 上传的地址 -->
+        <el-upload class="avatar-uploader" :action="uploadUrl" :show-file-list="false"
+                   :on-success="handleVideoSuccess" :before-upload="beforeUploadVideo"
+                   :on-progress="uploadVideoProcess">
+          <video v-if="temp.videoAddress && !videoFlag" :src="temp.videoAddress" class="avatar" controls="controls">
+            您的浏览器不支持视频播放
+          </video>
+          <!--<i v-else-if="!videoFlag" class="el-icon-upload avatar-uploader-icon">上传视频</i>-->
+          <el-button v-else-if="!videoFlag" icon="el-icon-upload">上传视频</el-button>
+          <el-progress v-if="videoFlag" type="circle" :percentage="videoUploadPercent"
+                       style="margin-top:30px;" color="rgba(142, 113, 199, 0.7)"></el-progress>
+        </el-upload>
+        <el-alert
+          show-icon
+          title="请保证视频格式正确，且不超过20M。视频格式如mp4、ogg、flv、avi、wmv、rmvb"
+          type="info"
+          :closable="false"
+        >
+        </el-alert>
+      </el-form-item>
+    </el-form>
+
+    <div class="editor-container">
+      <Tinymce :height="500" ref="editor" v-model="temp.courseIntroduction"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import Tinymce from '@/components/Tinymce'
+import Sticky from '@/components/Sticky' // 粘性header组件
+import { upload_url } from '@/common/config'
+
+export default {
+  name: 'courseEdit',
+  components: { Tinymce, Sticky},
+  props: ['currentId'],
+  data() {
+    return {
+      bannerTypes: [],
+      // 临时的表单值
+      temp: {
+        id: undefined,
+        title: undefined,
+        curriculumType: undefined,
+        pictureAddress: undefined,
+        videoAddress: undefined,
+        courseIntroduction: undefined,
+        createDate: undefined,
+        cretePerson: undefined,
+        //numberOrder: undefined
+      },
+      uploadUrl: upload_url,
+      // 表单验证的规则
+      rules: {
+        title: [
+          { required: true, message: '标题名称不能为空', trigger: 'blur'},
+          { type: 'string', max: 25, message: '标题名称不允许大于25位数', trigger: 'blur' },
+        ],
+        curriculumType: [{ required: true, message: '类型不能为空', trigger: 'blur' }],
+        pictureAddress: [{ required: true, message: '图片不能为空', trigger: 'blur' }],
+        videoAddress: [{ required: true, message: '视频不能为空', trigger: 'blur' }],
+      },
+      videoFlag: false,
+      videoUploadPercent: 0,
+      pickerOptions1: {
+        // 大于当前时间
+        disabledDate: (time) => {
+          return time.getTime() < Date.now()
+        }
+      }
+    }
+  },
+  filters: {},
+  created() {
+    const params = this.$route.params
+    if (params && params.id) {
+      this.$fetch.sysCourse.query({ id: params.id }).then(({ data }) => {
+        this.temp = data;
+      })
+    }
+  },
+  computed: {
+    // 加载显示的文字
+    displays() {
+      return this.$store.getters.displays
+    }
+  },
+  mounted() {
+    this.createTime();
+    this.$fetch.sysCourseType.findAll().then(({ data }) => {
+      console.log(data);
+      this.bannerTypes = data
+      const params = this.$route.params
+      if (!params || !params.id) {
+        this.temp.type = data[0].value
+      }
+    })
+  },
+  methods: {
+    // 返回
+    backList() {
+      this.$confirm('是否放弃当前编辑信息?', '提示', {
+        confirmButtonText: '继续编辑',
+        cancelButtonText: '放弃',
+        type: 'warning'
+      }).then(() => {
+
+      }).catch(() => {
+        this.$message({
+          type: 'warning',
+          message: '已取消编辑'
+        })
+        this.back()
+      })
+    },
+    createTime(){
+      var date=new Date();
+      var year = date.getFullYear();       //年
+      var month = date.getMonth() + 1;     //月
+      var day = date.getDate(); 
+      this.temp.createDate=year+'-'+month+'-'+day;
+    },
+    beforeUploadVideo(file) {
+      const isLt10M = file.size / 1024 / 1024 < 20
+      if (['video/mp4', 'video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb'].indexOf(file.type) === -1) {
+        this.$message.error('请上传正确的视频格式')
+        return false
+      }
+      if (!isLt10M) {
+        this.$message.error('上传视频大小不能超过20MB哦!')
+        return false
+      }
+    },
+    uploadVideoProcess(event, file, fileList) {
+      this.videoFlag = true
+      this.videoUploadPercent = Number(file.percentage.toFixed(0))
+    },
+    handleVideoSuccess(res, file) {
+      // 获取上传图片地址
+      this.videoFlag = false
+      this.videoUploadPercent = 0
+      if (res.code === 200) {
+        this.temp.videoAddress = res.data
+        console.log(res.data);
+      } else {
+        this.$message.error('视频上传失败，请重新上传！')
+      }
+    },
+    handleSuccess(response, file) {
+      this.temp.videoAddress = response.data;
+      console.log(1)
+    },
+    handleRemove(file) {
+      this.temp.videoAddress = undefined;
+    },
+    handleImgSuccess(response, file) {
+      this.temp.pictureAddress = file.url;
+      console.log(file);
+    },
+    handleImgRemove(file) {
+      this.temp.pictureAddress = undefined
+    },
+    beforeUpload(file) {
+      const _URL = window.URL || window.webkitURL
+      return new Promise((resolve, reject) => {
+        const img = new Image()
+        img.src = _URL.createObjectURL(file)
+        img.onload = function() {
+        }
+        resolve(true)
+      })
+    },
+    // 返回
+    back() {
+      this.$router.push({ name: 'courseList' })
+    },
+    saveData() {
+      if (this.videoFlag) {
+        this.$message.warning('请等待视频上传成功')
+        return
+      }
+      console.log(this.$refs['dataForm'])
+      this.$refs['dataForm'].validate(valid => {
+        if (valid) {
+          const tempData = Object.assign({}, this.temp)
+          if (!tempData.id) {
+            this.createTime();
+            this.$fetch.sysCourse.insert(tempData).then(() => {
+              this.$message({
+                message: '创建成功',
+                type: 'success'
+              })
+              this.back()
+            })
+          } else {
+            this.$fetch.sysCourse.update(tempData).then(() => {
+              this.$message({
+                message: '更新成功',
+                type: 'success'
+              })
+              this.back()
+            })
+          }
+        } else {
+          console.log('valid error')
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+  .el-rate {
+  }
+
+  .editor-container {
+    min-height: 500px;
+    margin: 0 0 30px;
+
+  }
+
+  .editor-upload-btn-container {
+    text-align: right;
+    margin-right: 10px;
+  }
+
+  .editor-upload-btn {
+    display: inline-block;
+  }
+
+  .avatar {
+    width: 500px;
+    height: 300px;
+    display: block;
+  }
+  .avatar-img {
+    width: 150px;
+    height: 150px;
+    display: block;
+  }
+</style>
--- a/src/views/course/index.vue
+++ b/src/views/course/index.vue
+<!-- leaf -->
+<template>
+  <div class="app-container">
+    <div class="filter-container">
+
+      <router-link :to="{name:'courseEdit'}">
+        <el-button class="filter-item" style="margin-left: 10px;" v-waves type="primary" icon="el-icon-plus">添加
+        </el-button>
+      </router-link>
+      <el-button @click.native.prevent="openShowLog()" class="filter-item" style="margin-left: 10px;" v-waves type="primary" icon="el-icon-plus">添加类型
+        </el-button>
+        <modal @on-close="closeThis()":is-show='isShowLog'>
+          <el-form :rules="rules" ref="dataForm" :model="types" label-position="left" label-width="100px"
+             style='width: 350px; margin-left:50px;'>
+            <el-form-item label="名称" prop="courseName">
+              <el-input type="text" placeholder="请输入课程名称"
+                   v-model.trim="types.courseName">
+              </el-input>
+            </el-form-item>
+          </el-form>  
+          <el-button type="primary" @click="saveData">保存</el-button>
+        </modal>
+      <el-tooltip class="item" effect="dark" content="刷新" placement="top-start" :hide-after="toolTipTime">
+        <el-button class="filter-item" style="margin-left: 10px;" v-waves @click="refresh" type="success"
+                   icon="el-icon-refresh" size="medium" circle></el-button>
+      </el-tooltip>
+    </div>
+    <el-table :key='tableKey' :data="list" v-loading="listLoading" :element-loading-text="elementLoadingText" border fit
+              highlight-current-row style="width: 100%">
+      <el-table-column align="center" :label="table.pictureAddress">
+        <template slot-scope="scope">
+          <img :src="scope.row.pictureAddress" alt="" width="150" height="100">
+        </template>
+      </el-table-column>
+      <el-table-column align="center" :label="table.title">
+        <template slot-scope="scope">
+          <span v-for="item in bannerTypes" :key="item.key">
+            {{scope.row.title}}
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" :label="table.curriculumType">
+        <template slot-scope="scope">
+          <span v-for="item in bannerTypes" :key="item.key">
+            {{scope.row.curriculumType}}
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" :label="table.createDate">
+        <template slot-scope="scope">
+          <span>{{scope.row.createDate}}</span>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" :label="table.numberOrder">
+        <template slot-scope="scope">
+          <span>{{scope.row.numberOrder}}</span>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="操作" width="200">
+        <template slot-scope="scope">
+          <router-link :to="{name:'courseEdit',params:{id:scope.row.id}}">
+            <el-button type="primary" icon="el-icon-edit" size="mini"
+                       round></el-button>
+          </router-link>
+          <el-button type="danger" icon="el-icon-delete"
+                     @click.native.prevent="handleDelete(scope.row)" size="mini" round></el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页  -->
+    <div class="pagination-container">
+      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
+                     :current-page="listQuery.currentPage" :page-sizes="[10, 20, 30, 40,50,100]"
+                     :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
+      </el-pagination>
+    </div>
+
+  </div>
+</template>
+
+<script>
+  import { parseTime } from '@/utils'
+  import Modal from '@/components/Modal'
+  export default {
+    name: 'banner',
+    components: { Modal},
+    data() {
+      return {
+        isShowLog: false,
+        tableKey: 0,
+        // 是否加载
+        listLoading: true,
+        // 查询参数
+        listQuery: {
+          currentPage: 1,
+          pageSize: 10,
+          name: undefined,
+          code: undefined
+        },
+        // 表格的数据
+        list: null,
+        // 总数量
+        total: null,
+        // 表单显示的名称
+        table: {
+          title:'标题',
+          curriculumType: '课程类型',
+          pictureAddress: '图片',
+          videoAddress:'视频',
+          createDate: '创建时间',
+          cretePerson: '创建人',
+          numberOrder: '编号'
+        },
+        types: {
+          id: undefined,
+          courseName: undefined,
+        },
+        // 临时的表单值
+        temp: {
+          id: undefined,
+          title: undefined,
+          curriculumType: undefined,
+          pictureAddress: undefined,
+          videoAddress: undefined,
+          createDate: undefined,
+          cretePerson: undefined,
+          numberOrder: undefined
+        },
+        // 表单验证的规则
+        rules: {
+          courseName: [
+            { required: true, message: '课程名称不能为空', trigger: 'blur' },
+            { type: 'string', max: 20, message: '课程名称不允许大于20位数', trigger: 'blur' }
+            ]
+        },
+        bannerTypes: []
+      }
+    },
+    created() {
+      // 初始化数据
+      this.getList()
+    },
+    mounted() {
+      this.$fetch.sysDict.optionsChildren('BANNER_TYPE').then(({ data }) => {
+        this.bannerTypes = data
+      })
+    },
+    computed: {
+      // 提示--显示的时间
+      toolTipTime() {
+        return this.$store.getters.toolTipTime
+      },
+      // 加载显示的文字
+      elementLoadingText() {
+        return this.$store.getters.elementLoadingText
+      },
+      // 加载显示的文字
+      displays() {
+        return this.$store.getters.displays
+      }
+    },
+    methods: {
+      closeThis(){
+        this.isShowLog=false;
+      },
+      openShowLog(){
+        this.isShowLog=true;
+      },
+      getList() {
+        // 初始化数据 开始加载数据
+        this.listLoading = true
+        this.$fetch.sysCourse
+          .pageList(this.listQuery)
+          .then(({ data, total }) => {
+            // 赋值数据
+            this.list = data;
+            // 数据加载完成
+            this.listLoading = false
+          })
+      },
+      // 处理搜索
+      handleFilter() {
+        this.listQuery.currentPage = 1
+        this.getList()
+      },
+      // 处理每页条数
+      handleSizeChange(val) {
+        this.listQuery.pageSize = val
+        this.getList()
+      },
+      // 处理当前页面
+      handleCurrentChange(val) {
+        this.listQuery.currentPage = val
+        this.getList()
+      },
+      handleSuccess(response, file) {
+        this.temp.url = response.data
+      },
+      handleRemove(file) {
+        this.temp.url = undefined
+      },
+      beforeUpload(file) {
+        const _URL = window.URL || window.webkitURL
+        return new Promise((resolve, reject) => {
+          const img = new Image()
+          img.src = _URL.createObjectURL(file)
+          img.onload = function() {
+          }
+          resolve(true)
+        })
+      },
+      // 初始化temp值
+      resetTemp() {
+        this.temp = {
+          id: undefined,
+          title: undefined,
+          curriculumType: undefined,
+          pictureAddress: undefined,
+          videoAddress: undefined,
+          createDate: undefined,
+          cretePerson: undefined,
+          numberOrder: undefined
+        }
+      },
+      // 删除
+      handleDelete(row) {
+        if (!row.id) {
+          this.$message('请刷新后再试')
+          return
+        }
+        this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        })
+          .then(() => {
+            this.$fetch.sysCourse.deletes(row.id).then(() => {
+              this.$message({
+                message: '删除成功',
+                type: 'success'
+              })
+              const index = this.list.indexOf(row)
+              this.list.splice(index, 1)
+            }).catch(function(reason) {
+                 console.log( reason);
+              });
+          })
+          .catch(() => {
+            this.$message({
+              type: 'info',
+              message: '已取消删除'
+            })
+          })
+      },
+      refresh() {
+        // 初始化查询参数
+        this.listQuery = {
+          currentPage: 1,
+          pageSize: 10
+        }
+        this.tableKey = this.tableKey + 1
+        this.getList()
+      },
+      getShowType(row, dispaly = 1) {
+        if (row.display === dispaly) {
+          return {
+            type: 'info',
+            label: '隐藏'
+          }
+        }
+        return {
+          type: 'success',
+          label: '显示'
+        }
+      },
+      saveData() {
+      if (this.videoFlag) {
+        this.$message.warning('请等待视频上传成功')
+        return
+      }
+      this.$refs['dataForm'].validate(valid => {
+        if (valid) {
+          const tempData = Object.assign({}, this.types)
+          if (!tempData.id) {
+            this.$fetch.sysCourseType.insert(tempData).then(() => {
+              this.$message({
+                message: '创建成功',
+                type: 'success'
+              })
+              this.isShowLog=false;
+              this.back()
+            })
+          } else {
+            this.$fetch.sysCourseType.update(tempData).then(() => {
+              this.$message({
+                message: '更新成功',
+                type: 'success'
+              })
+              this.isShowLog=false;
+              this.back()
+            })
+          }
+        } else {
+          console.log('valid error')
+        }
+      })
+    }
+    }
+  }
+</script>
+<style scoped>
+</style>
--- a/src/views/layout/Layout.vue
+++ b/src/views/layout/Layout.vue
+<template>
+  <div class="app-wrapper" :class="classObj">
+    <sidebar class="sidebar-container"></sidebar>
+    <div class="main-container">
+      <navbar></navbar>
+      <app-main></app-main>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Navbar, Sidebar, AppMain } from './components'
+
+export default {
+  name: 'layout',
+  components: {
+    Navbar,
+    Sidebar,
+    AppMain
+  },
+  computed: {
+    sidebar() {
+      return this.$store.state.app.sidebar
+    },
+    classObj() {
+      return {
+        hideSidebar: !this.sidebar.opened,
+        openSidebar: this.sidebar.opened,
+        withoutAnimation: this.sidebar.withoutAnimation
+      }
+    }
+  },
+  methods: {
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import "src/styles/mixin.scss";
+  .app-wrapper {
+    @include clearfix;
+    position: relative;
+    height: 100%;
+    width: 100%;
+    &.mobile.openSidebar{
+      position: fixed;
+      top: 0;
+    }
+  }
+  .drawer-bg {
+    background: #000;
+    opacity: 0.3;
+    width: 100%;
+    top: 0;
+    height: 100%;
+    position: absolute;
+    z-index: 999;
+  }
+</style>
--- a/src/views/layout/components/AppMain.vue
+++ b/src/views/layout/components/AppMain.vue
+<template>
+  <section class="app-main">
+    <transition name="fade" mode="out-in">
+      <!-- <router-view :key="key"></router-view> -->
+      <router-view></router-view>
+    </transition>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'AppMain',
+  computed: {
+    // key() {
+    //   return this.$route.name !== undefined ? this.$route.name + +new Date() : this.$route + +new Date()
+    // }
+  }
+}
+</script>
+
+<style scoped>
+.app-main {
+  /*50 = navbar  */
+  min-height: calc(100vh - 50px);
+  position: relative;
+  overflow: hidden;
+}
+</style>
--- a/src/views/layout/components/Navbar.vue
+++ b/src/views/layout/components/Navbar.vue
+<template>
+  <el-menu class="navbar" mode="horizontal">
+    <hamburger class="hamburger-container" :toggleClick="toggleSideBar" :isActive="sidebar.opened"></hamburger>
+    <breadcrumb></breadcrumb>
+    <el-dropdown class="avatar-container" trigger="click">
+      <div class="avatar-wrapper">
+        <img class="user-avatar" :src="avatar+'?imageView2/1/w/80/h/80'">
+        <i class="el-icon-caret-bottom"></i>
+      </div>
+      <el-dropdown-menu class="user-dropdown" slot="dropdown">
+        <router-link class="inlineBlock" to="/">
+          <el-dropdown-item>
+            首页
+          </el-dropdown-item>
+        </router-link>
+        <el-dropdown-item divided>
+          <span @click="logout" style="display:block;">注销</span>
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+  </el-menu>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import Breadcrumb from '@/components/Breadcrumb'
+import Hamburger from '@/components/Hamburger'
+
+export default {
+  components: {
+    Breadcrumb,
+    Hamburger
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar',
+      'avatar'
+    ])
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.navbar {
+  height: 50px;
+  line-height: 50px;
+  border-radius: 0px !important;
+  .hamburger-container {
+    line-height: 58px;
+    height: 50px;
+    float: left;
+    padding: 0 10px;
+  }
+  .screenfull {
+    position: absolute;
+    right: 90px;
+    top: 16px;
+    color: red;
+  }
+  .avatar-container {
+    height: 50px;
+    display: inline-block;
+    position: absolute;
+    right: 35px;
+    .avatar-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        position: absolute;
+        right: -20px;
+        top: 25px;
+        font-size: 12px;
+      }
+    }
+  }
+}
+</style>
+
--- a/src/views/layout/components/Sidebar/SidebarItem.vue
+++ b/src/views/layout/components/Sidebar/SidebarItem.vue
+<template>
+  <div v-if="!item.hidden&&item.children" class="menu-wrapper">
+
+      <router-link v-if="hasOneShowingChild(item.children) && !onlyOneChild.children&&!item.alwaysShow" :to="resolvePath(onlyOneChild.path)">
+        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
+          <svg-icon v-if="onlyOneChild.meta&&onlyOneChild.meta.icon" :icon-class="onlyOneChild.meta.icon"></svg-icon>
+          <span v-if="onlyOneChild.meta&&onlyOneChild.meta.title" slot="title">{{onlyOneChild.meta.title}}</span>
+        </el-menu-item>
+      </router-link>
+
+      <el-submenu v-else :index="item.name||item.path">
+        <template slot="title">
+          <svg-icon v-if="item.meta&&item.meta.icon" :icon-class="item.meta.icon"></svg-icon>
+          <span v-if="item.meta&&item.meta.title" slot="title">{{item.meta.title}}</span>
+        </template>
+
+        <template v-for="child in item.children" v-if="!child.hidden">
+          <sidebar-item :is-nest="true" class="nest-menu" v-if="child.children&&child.children.length>0" :item="child" :key="child.path" :base-path="resolvePath(child.path)"></sidebar-item>
+
+          <router-link v-else :to="resolvePath(child.path)" :key="child.name">
+            <el-menu-item :index="resolvePath(child.path)">
+              <svg-icon v-if="child.meta&&child.meta.icon" :icon-class="child.meta.icon"></svg-icon>
+              <span v-if="child.meta&&child.meta.title" slot="title">{{child.meta.title}}</span>
+            </el-menu-item>
+          </router-link>
+        </template>
+      </el-submenu>
+
+  </div>
+</template>
+
+<script>
+import path from 'path'
+
+export default {
+  name: 'SidebarItem',
+  props: {
+    // route配置json
+    item: {
+      type: Object,
+      required: true
+    },
+    isNest: {
+      type: Boolean,
+      default: false
+    },
+    basePath: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      onlyOneChild: null
+    }
+  },
+  methods: {
+    hasOneShowingChild(children) {
+      const showingChildren = children.filter(item => {
+        if (item.hidden) {
+          return false
+        } else {
+          // temp set(will be used if only has one showing child )
+          this.onlyOneChild = item
+          return true
+        }
+      })
+      if (showingChildren.length === 1) {
+        return true
+      }
+      return false
+    },
+    resolvePath(...paths) {
+      return path.resolve(this.basePath, ...paths)
+    }
+  }
+}
+</script>
--- a/src/views/layout/components/Sidebar/index.vue
+++ b/src/views/layout/components/Sidebar/index.vue
+<template>
+  <el-scrollbar wrapClass="scrollbar-wrapper">
+    <el-menu
+      mode="vertical"
+      :show-timeout="200"
+      :default-active="$route.path"
+      :collapse="isCollapse"
+      background-color="#304156"
+      text-color="#bfcbd9"
+      active-text-color="#409EFF"
+    >
+      <sidebar-item v-for="route in routes" :key="route.name" :item="route" :base-path="route.path"></sidebar-item>
+    </el-menu>
+  </el-scrollbar>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import SidebarItem from './SidebarItem'
+
+export default {
+  components: { SidebarItem },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ]),
+    routes() {
+      return this.$router.options.routes
+    },
+    isCollapse() {
+      return !this.sidebar.opened
+    }
+  }
+}
+</script>
--- a/src/views/layout/components/index.js
+++ b/src/views/layout/components/index.js
+export { default as Navbar } from './Navbar'
+export { default as Sidebar } from './Sidebar'
+export { default as AppMain } from './AppMain'
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
--- a/src/views/piano/index.vue
+++ b/src/views/piano/index.vue
--- a/src/views/piano/pianoEdit.vue
+++ b/src/views/piano/pianoEdit.vue
--- a/src/views/system/banner/bannerEdit.vue
+++ b/src/views/system/banner/bannerEdit.vue
--- a/src/views/system/banner/index.vue
+++ b/src/views/system/banner/index.vue
--- a/src/views/system/dict/index.vue
+++ b/src/views/system/dict/index.vue
--- a/src/views/user/index.vue
+++ b/src/views/user/index.vue
--- a/src/views/userCost/index.vue
+++ b/src/views/userCost/index.vue
--- a/static/.gitkeep
+++ b/static/.gitkeep
--- a/static/tinymce4.7.5/langs/zh_CN.js
+++ b/static/tinymce4.7.5/langs/zh_CN.js
--- a/static/tinymce4.7.5/plugins/codesample/css/prism.css
+++ b/static/tinymce4.7.5/plugins/codesample/css/prism.css
--- a/static/tinymce4.7.5/plugins/emoticons/img/smiley-cool.gif
+++ b/static/tinymce4.7.5/plugins/emoticons/img/smiley-cool.gif
--- a/static/tinymce4.7.5/plugins/emoticons/img/smiley-cry.gif
+++ b/static/tinymce4.7.5/plugins/emoticons/img/smiley-cry.gif
--- a/static/tinymce4.7.5/plugins/emoticons/img/smiley-embarassed.gif
+++ b/static/tinymce4.7.5/plugins/emoticons/img/smiley-embarassed.gif
--- a/static/tinymce4.7.5/plugins/emoticons/img/smiley-foot-in-mouth.gif
+++ b/static/tinymce4.7.5/plugins/emoticons/img/smiley-foot-in-mouth.gif
--- a/static/tinymce4.7.5/plugins/emoticons/img/smiley-frown.gif
+++ b/static/tinymce4.7.5/plugins/emoticons/img/smiley-frown.gif
--- a/static/tinymce4.7.5/plugins/emoticons/img/smiley-innocent.gif
+++ b/static/tinymce4.7.5/plugins/emoticons/img/smiley-innocent.gif
--- a/static/tinymce4.7.5/plugins/emoticons/img/smiley-kiss.gif
+++ b/static/tinymce4.7.5/plugins/emoticons/img/smiley-kiss.gif
--- a/static/tinymce4.7.5/plugins/emoticons/img/smiley-laughing.gif
+++ b/static/tinymce4.7.5/plugins/emoticons/img/smiley-laughing.gif
--- a/static/tinymce4.7.5/plugins/emoticons/img/smiley-money-mouth.gif
+++ b/static/tinymce4.7.5/plugins/emoticons/img/smiley-money-mouth.gif
--- a/static/tinymce4.7.5/plugins/emoticons/img/smiley-sealed.gif
+++ b/static/tinymce4.7.5/plugins/emoticons/img/smiley-sealed.gif
--- a/static/tinymce4.7.5/plugins/emoticons/img/smiley-smile.gif
+++ b/static/tinymce4.7.5/plugins/emoticons/img/smiley-smile.gif
--- a/static/tinymce4.7.5/plugins/emoticons/img/smiley-surprised.gif
+++ b/static/tinymce4.7.5/plugins/emoticons/img/smiley-surprised.gif
--- a/static/tinymce4.7.5/plugins/emoticons/img/smiley-tongue-out.gif
+++ b/static/tinymce4.7.5/plugins/emoticons/img/smiley-tongue-out.gif
--- a/static/tinymce4.7.5/plugins/emoticons/img/smiley-undecided.gif
+++ b/static/tinymce4.7.5/plugins/emoticons/img/smiley-undecided.gif
--- a/static/tinymce4.7.5/plugins/emoticons/img/smiley-wink.gif
+++ b/static/tinymce4.7.5/plugins/emoticons/img/smiley-wink.gif
--- a/static/tinymce4.7.5/plugins/emoticons/img/smiley-yell.gif
+++ b/static/tinymce4.7.5/plugins/emoticons/img/smiley-yell.gif
--- a/static/tinymce4.7.5/plugins/visualblocks/css/visualblocks.css
+++ b/static/tinymce4.7.5/plugins/visualblocks/css/visualblocks.css
--- a/static/tinymce4.7.5/skins/lightgray/content.inline.min.css
+++ b/static/tinymce4.7.5/skins/lightgray/content.inline.min.css
--- a/static/tinymce4.7.5/skins/lightgray/content.min.css
+++ b/static/tinymce4.7.5/skins/lightgray/content.min.css
--- a/static/tinymce4.7.5/skins/lightgray/fonts/tinymce-mobile.woff
+++ b/static/tinymce4.7.5/skins/lightgray/fonts/tinymce-mobile.woff
--- a/static/tinymce4.7.5/skins/lightgray/fonts/tinymce-small.eot
+++ b/static/tinymce4.7.5/skins/lightgray/fonts/tinymce-small.eot
--- a/static/tinymce4.7.5/skins/lightgray/fonts/tinymce-small.svg
+++ b/static/tinymce4.7.5/skins/lightgray/fonts/tinymce-small.svg
--- a/static/tinymce4.7.5/skins/lightgray/fonts/tinymce-small.ttf
+++ b/static/tinymce4.7.5/skins/lightgray/fonts/tinymce-small.ttf
--- a/static/tinymce4.7.5/skins/lightgray/fonts/tinymce-small.woff
+++ b/static/tinymce4.7.5/skins/lightgray/fonts/tinymce-small.woff
--- a/static/tinymce4.7.5/skins/lightgray/fonts/tinymce.eot
+++ b/static/tinymce4.7.5/skins/lightgray/fonts/tinymce.eot
--- a/static/tinymce4.7.5/skins/lightgray/fonts/tinymce.svg
+++ b/static/tinymce4.7.5/skins/lightgray/fonts/tinymce.svg
--- a/static/tinymce4.7.5/skins/lightgray/fonts/tinymce.ttf
+++ b/static/tinymce4.7.5/skins/lightgray/fonts/tinymce.ttf
--- a/static/tinymce4.7.5/skins/lightgray/fonts/tinymce.woff
+++ b/static/tinymce4.7.5/skins/lightgray/fonts/tinymce.woff
--- a/static/tinymce4.7.5/skins/lightgray/img/anchor.gif
+++ b/static/tinymce4.7.5/skins/lightgray/img/anchor.gif
--- a/static/tinymce4.7.5/skins/lightgray/img/loader.gif
+++ b/static/tinymce4.7.5/skins/lightgray/img/loader.gif
--- a/static/tinymce4.7.5/skins/lightgray/img/object.gif
+++ b/static/tinymce4.7.5/skins/lightgray/img/object.gif
--- a/static/tinymce4.7.5/skins/lightgray/img/trans.gif
+++ b/static/tinymce4.7.5/skins/lightgray/img/trans.gif
--- a/static/tinymce4.7.5/skins/lightgray/skin.min.css
+++ b/static/tinymce4.7.5/skins/lightgray/skin.min.css
--- a/static/tinymce4.7.5/skins/lightgray/skin.min.css.map
+++ b/static/tinymce4.7.5/skins/lightgray/skin.min.css.map
--- a/static/tinymce4.7.5/tinymce.min.js
+++ b/static/tinymce4.7.5/tinymce.min.js