Merge pull request #3 from PanJiaChen/init

Init

.babelrc

+{
+  "presets": ["es2015", "stage-2"],
+  "plugins": ["transform-runtime"],
+  "comments": false
+}

.eslintignore

+build/*.js
+config/*.js
+src/assets

.eslintrc.js

+module.exports = {
+    root: true,
+    parser: 'babel-eslint',
+    parserOptions: {
+        sourceType: 'module'
+    },
+    env: {
+        browser: true,
+        node: true
+    },
+    extends: 'eslint:recommended',
+    // required to lint *.vue files
+    plugins: [
+        'html'
+    ],
+    // check if imports actually resolve
+    'settings': {
+        'import/resolver': {
+            'webpack': {
+                'config': 'build/webpack.base.conf.js'
+            }
+        }
+    },
+    // add your custom rules here
+    'rules': {
+        // don't require .vue extension when importing
+        // 'import/extensions': ['error', 'always', {
+        //     'js': 'never',
+        //     'vue': 'never'
+        // }],
+        // allow debugger during development
+        'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
+        /*
+         * Possible Errors
+         */
+
+        // disallow unnecessary parentheses
+        'no-extra-parens': ['error', 'all', {'nestedBinaryExpressions': false}],
+
+        // disallow negating the left operand of relational operators
+        'no-unsafe-negation': 'error',
+
+        // enforce valid JSDoc comments
+        'valid-jsdoc': 'off',
+
+        /*
+         * Best Practices
+         */
+
+        // enforce return statements in callbacks of array methods
+        'array-callback-return': 'error',
+
+        // enforce consistent brace style for all control statements
+        curly: ['error', 'multi-line'],
+
+        // enforce consistent newlines before and after dots
+        'dot-location': ['error', 'property'],
+
+        // enforce dot notation whenever possible
+        'dot-notation': 'error',
+
+        // require the use of === and !==
+        'eqeqeq': ['error', 'smart'],
+
+        // disallow the use of arguments.caller or arguments.callee
+        'no-caller': 'error',
+
+        // disallow empty functions
+        'no-empty-function': 'error',
+
+        // disallow unnecessary calls to .bind()
+        'no-extra-bind': 'error',
+
+        // disallow unnecessary labels
+        'no-extra-label': 'error',
+
+        // disallow leading or trailing decimal points in numeric literals
+        'no-floating-decimal': 'error',
+
+        // disallow assignments to native objects or read-only global variables
+        'no-global-assign': 'error',
+
+        // disallow the use of eval()-like methods
+        'no-implied-eval': 'error',
+
+        // disallow the use of the __iterator__ property
+        'no-iterator': 'error',
+
+        // disallow unnecessary nested blocks
+        'no-lone-blocks': 'error',
+
+        // disallow multiple spaces
+        'no-multi-spaces': 'error',
+
+        // disallow new operators with the String, Number, and Boolean objects
+        'no-new-wrappers': 'error',
+
+        // disallow octal escape sequences in string literals
+        'no-octal-escape': 'error',
+
+        // disallow the use of the __proto__ property
+        'no-proto': 'error',
+
+        // disallow comparisons where both sides are exactly the same
+        'no-self-compare': 'error',
+
+        // disallow throwing literals as exceptions
+        'no-throw-literal': 'error',
+
+        // disallow unused expressions
+        'no-unused-expressions': 'error',
+
+        // disallow unnecessary calls to .call() and .apply()
+        'no-useless-call': 'error',
+
+        // disallow unnecessary concatenation of literals or template literals
+        'no-useless-concat': 'error',
+
+        // disallow unnecessary escape characters
+        'no-useless-escape': 'error',
+
+        // disallow void operators
+        'no-void': 'error',
+
+        // require parentheses around immediate function invocations
+        'wrap-iife': 'error',
+
+        // require or disallow “Yoda” conditions
+        yoda: 'error',
+
+        /*
+         * Variables
+         */
+
+        // disallow labels that share a name with a variable
+        'no-label-var': 'error',
+
+        // disallow initializing variables to undefined
+        'no-undef-init': 'error',
+        'no-undef': 'off',
+        // disallow the use of variables before they are defined
+        'no-use-before-define': 'error',
+
+        /*
+         * Node.js and CommonJS
+         */
+
+        // disallow new operators with calls to require
+        'no-new-require': 'error',
+
+        /*
+         * Stylistic Issues
+         */
+
+        // enforce consistent spacing inside array brackets
+        'array-bracket-spacing': 'error',
+
+        // enforce consistent spacing inside single-line blocks
+        'block-spacing': 'error',
+
+        // enforce consistent brace style for blocks
+        'brace-style': ['error', '1tbs', {'allowSingleLine': true}],
+
+        // require or disallow trailing commas
+        'comma-dangle': 'error',
+
+        // enforce consistent spacing before and after commas
+        'comma-spacing': 'error',
+
+        // enforce consistent comma style
+        'comma-style': 'error',
+
+        // enforce consistent spacing inside computed property brackets
+        'computed-property-spacing': 'error',
+
+        // require or disallow spacing between function identifiers and their invocations
+        'func-call-spacing': 'error',
+
+        // enforce consistent indentation
+        indent: ['error', 2, {SwitchCase: 1}],
+
+        // enforce the consistent use of either double or single quotes in JSX attributes
+        'jsx-quotes': 'error',
+
+        // enforce consistent spacing between keys and values in object literal properties
+        'key-spacing': 'error',
+
+        // enforce consistent spacing before and after keywords
+        'keyword-spacing': 'error',
+
+        // enforce consistent linebreak style
+        'linebreak-style': 'error',
+
+        // require or disallow newlines around directives
+        'lines-around-directive': 'error',
+
+        // require constructor names to begin with a capital letter
+        'new-cap': 'off',
+
+        // require parentheses when invoking a constructor with no arguments
+        'new-parens': 'error',
+
+        // disallow Array constructors
+        'no-array-constructor': 'error',
+
+        // disallow Object constructors
+        'no-new-object': 'error',
+
+        // disallow trailing whitespace at the end of lines
+        'no-trailing-spaces': 'error',
+
+        // disallow ternary operators when simpler alternatives exist
+        'no-unneeded-ternary': 'error',
+
+        // disallow whitespace before properties
+        'no-whitespace-before-property': 'error',
+
+        // enforce consistent spacing inside braces
+        'object-curly-spacing': ['error', 'always'],
+
+        // require or disallow padding within blocks
+        'padded-blocks': ['error', 'never'],
+
+        // require quotes around object literal property names
+        'quote-props': ['error', 'as-needed'],
+
+        // enforce the consistent use of either backticks, double, or single quotes
+        quotes: ['error', 'single'],
+
+        // enforce consistent spacing before and after semicolons
+        'semi-spacing': 'error',
+
+        // require or disallow semicolons instead of ASI
+        // semi: ['error', 'never'],
+
+        // enforce consistent spacing before blocks
+        'space-before-blocks': 'error',
+
+        'no-console': 'off',
+
+        // enforce consistent spacing before function definition opening parenthesis
+        'space-before-function-paren': ['error', 'never'],
+
+        // enforce consistent spacing inside parentheses
+        'space-in-parens': 'error',
+
+        // require spacing around infix operators
+        'space-infix-ops': 'error',
+
+        // enforce consistent spacing before or after unary operators
+        'space-unary-ops': 'error',
+
+        // enforce consistent spacing after the // or /* in a comment
+        'spaced-comment': 'error',
+
+        // require or disallow Unicode byte order mark (BOM)
+        'unicode-bom': 'error',
+
+
+        /*
+         * ECMAScript 6
+         */
+
+        // require braces around arrow function bodies
+        'arrow-body-style': 'error',
+
+        // require parentheses around arrow function arguments
+        'arrow-parens': ['error', 'as-needed'],
+
+        // enforce consistent spacing before and after the arrow in arrow functions
+        'arrow-spacing': 'error',
+
+        // enforce consistent spacing around * operators in generator functions
+        'generator-star-spacing': ['error', 'after'],
+
+        // disallow duplicate module imports
+        'no-duplicate-imports': 'error',
+
+        // disallow unnecessary computed property keys in object literals
+        'no-useless-computed-key': 'error',
+
+        // disallow unnecessary constructors
+        'no-useless-constructor': 'error',
+
+        // disallow renaming import, export, and destructured assignments to the same name
+        'no-useless-rename': 'error',
+
+        // require let or const instead of var
+        'no-var': 'error',
+
+        // require or disallow method and property shorthand syntax for object literals
+        'object-shorthand': 'error',
+
+        // require arrow functions as callbacks
+        'prefer-arrow-callback': 'error',
+
+        // require const declarations for variables that are never reassigned after declared
+        'prefer-const': 'error',
+
+        // disallow parseInt() in favor of binary, octal, and hexadecimal literals
+        'prefer-numeric-literals': 'error',
+
+        // require rest parameters instead of arguments
+        'prefer-rest-params': 'error',
+
+        // require spread operators instead of .apply()
+        'prefer-spread': 'error',
+
+        // enforce spacing between rest and spread operators and their expressions
+        'rest-spread-spacing': 'error',
+
+        // require or disallow spacing around embedded expressions of template strings
+        'template-curly-spacing': 'error',
+
+        // require or disallow spacing around the * in yield* expressions
+        'yield-star-spacing': 'error'
+    }
+}

.gitignore

+.DS_Store
+node_modules/
+dist/
+static/ckeditor
+
+npm-debug.log
+test/unit/coverage
+test/e2e/reports
+selenium-debug.log
+.idea

README.md

-这是一个vue+element+axios+webpack2的管理后台 先占个坑
-效果预览
-
+[线上地址](http://panjiachen.github.io/vue-element-admin)
+
+## 前言
+> 这半年来一直在用vue写管理后台，目前后台已经有七十多个页面，十几种权限，但维护成本依然很低，效率依然很高，所以准备开源分享一下后台开发的经验和成果。目前的技术栈主要的采用vue+element+axios.由于是个人项目，所以数据请求都是用了mockjs代替。会出一系列的教程配套文章，如如何从零构建后台项目框架，如何做完整的用户系统（如权限验证，二次登录等），如何二次开发组件（如富文本），如何整合七牛等等文章，各种后台开发经验等等。莫急~~
+
+## 功能
+- 登录/注销
+- 权限验证
+- 侧边栏
+- 面包屑
+- 富文本编辑器
+- Markdown编辑器
+- JSON编辑器
+- 列表拖拽
+- plitPane
+- Dropzone
+- Sticky
+- CountTo
+- echarts图表
+- 401，401错误页面
+- 错误日志
+- 导出excel
+- table example
+- form example
+- 多环境发布
+- dashboard
+- 二次登录
+- 动态侧边栏
+- mock数据
+
+
+## 开发
+```bash
+    # 克隆项目
+    git clone https://github.com/PanJiaChen/vue-element-admin.git
+
+    # 安装依赖
+    npm install
+
+    # 本地开发 开启服务
+    npm run build
+```
+浏览器访问 http://localhost:9527
+
+## 发布
+```bash
+    # 发布测试环境 带webpack ananalyzer
+    npm run build:sit-preview
+
+    # 构建生成环境
+    npm run build:prod
+```
+
+## 目录结构
+```shell
+├── build                      // 构建相关  
+├── config                     // 配置相关
+├── src                        // 源代码
+│   ├── api                    // 所以请求
+│   ├── assets                 // 主题 字体等静态资源
+│   ├── components             // 全局公用组件
+│   ├── directive              // 全局指令
+│   ├── filtres                // 全局filter
+│   ├── mock                   // mock数据
+│   ├── router                 // 路由
+│   ├── store                  // 全局store管理
+│   ├── styles                 // 全局样式
+│   ├── utils                  // 全局公用方法
+│   ├── view                   // view
+│   ├── App.vue                // 入口页面
+│   └── main.js                // 入口 加载组件 初始化等
+├── static                     // 第三方不打包资源
+│   ├── jquery
+│   └── Tinymce                // 富文本
+├── .babelrc                   // babel-loader 配置
+├── eslintrc.js                // eslint 配置项
+├── .gitignore                 // git 忽略项
+├── favicon.ico                // favicon图标
+├── index.html                 // html模板
+└── package.json               // package.json
+
+```
+
+## 状态管理
+后台只有user和app配置相关状态使用vuex存在全局，其它数据都由每个业务页面自己管理。
+
+
+## 效果图
 
 #### 两步验证登录 支持微信和qq
 
@@ -8,7 +93,9 @@
 
 #### 真正的动态换肤
 
-![真正的动态换肤](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/theme.gif)
+![真正的动态换肤](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/theme.gif)<br />
+
+
 
 #### 可收起侧边栏
 
@@ -18,10 +105,18 @@
 
 ![enter image description here](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/order.gif)
 
+
+
 #### 上传裁剪头像
 
 ![enter image description here](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/uploadAvatar.gif)
 
+
+
+#### 错误统计
+
+![enter image description here](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/errorlog.gif)
+
 #### 富文本(整合七牛 打水印等个性化功能)
 
 ![enter image description here](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/editor.gif)

build/build.js

+require('./check-versions')();
+var server = require('pushstate-server');
+var opn = require('opn')
+var ora = require('ora')
+var rm = require('rimraf')
+var path = require('path')
+var chalk = require('chalk')
+var webpack = require('webpack');
+var config = require('../config');
+var webpackConfig = require('./webpack.prod.conf');
+
+console.log(process.env.NODE_ENV)
+console.log(process.env.npm_config_preview)
+
+var spinner = ora('building for ' + process.env.NODE_ENV + '...')
+spinner.start()
+
+
+rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
+    if (err) throw err
+    webpack(webpackConfig, function (err, stats) {
+        spinner.stop()
+        if (err) throw err
+        process.stdout.write(stats.toString({
+                colors: true,
+                modules: false,
+                children: false,
+                chunks: false,
+                chunkModules: false
+            }) + '\n\n')
+
+        console.log(chalk.cyan('  Build complete.\n'))
+        if(process.env.npm_config_preview){
+            server.start({
+                port: 80,
+                directory: './dist',
+                file: '/index.html'
+            });
+            opn('http://kushnerpreview.wallstreetcn.com/')
+        }
+    })
+})

build/check-versions.js

+var chalk = require('chalk')
+var semver = require('semver')
+var packageConfig = require('../package.json')
+
+function exec(cmd) {
+    return require('child_process').execSync(cmd).toString().trim()
+}
+
+var versionRequirements = [
+    {
+        name: 'node',
+        currentVersion: semver.clean(process.version),
+        versionRequirement: packageConfig.engines.node
+    },
+    {
+        name: 'npm',
+        currentVersion: exec('npm --version'),
+        versionRequirement: packageConfig.engines.npm
+    }
+]
+
+module.exports = function () {
+    var warnings = []
+    for (var i = 0; i < versionRequirements.length; i++) {
+        var mod = versionRequirements[i]
+        if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
+            warnings.push(mod.name + ': ' +
+                chalk.red(mod.currentVersion) + ' should be ' +
+                chalk.green(mod.versionRequirement)
+            )
+        }
+    }
+
+    if (warnings.length) {
+        console.log('')
+        console.log(chalk.yellow('To use this template, you must update following to modules:'))
+        console.log()
+        for (var i = 0; i < warnings.length; i++) {
+            var warning = warnings[i]
+            console.log('  ' + warning)
+        }
+        console.log()
+        process.exit(1)
+    }
+}

build/dev-client.js

+/* eslint-disable */
+require('eventsource-polyfill')
+var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')
+
+hotClient.subscribe(function (event) {
+  if (event.action === 'reload') {
+    window.location.reload()
+  }
+})

build/dev-server.js

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

build/utils.js

+var path = require('path')
+var config = require('../config')
+var ExtractTextPlugin = require('extract-text-webpack-plugin')
+
+exports.assetsPath = function (_path) {
+    var assetsSubDirectory = process.env.NODE_ENV === 'production'
+        ? config.build.assetsSubDirectory
+        : config.dev.assetsSubDirectory
+    return path.posix.join(assetsSubDirectory, _path)
+}
+
+exports.cssLoaders = function (options) {
+    options = options || {}
+
+    var cssLoader = {
+        loader: 'css-loader',
+        options: {
+            minimize: process.env.NODE_ENV === 'production',
+            sourceMap: options.sourceMap
+        }
+    }
+
+    // generate loader string to be used with extract text plugin
+    function generateLoaders(loader, loaderOptions) {
+        var loaders = [cssLoader]
+        if (loader) {
+            loaders.push({
+                loader: loader + '-loader',
+                options: Object.assign({}, loaderOptions, {
+                    sourceMap: options.sourceMap
+                })
+            })
+        }
+
+        // Extract CSS when that option is specified
+        // (which is the case during production build)
+        if (options.extract) {
+            return ExtractTextPlugin.extract({
+                use: loaders,
+                fallback: 'vue-style-loader'
+            })
+        } else {
+            return ['vue-style-loader'].concat(loaders)
+        }
+    }
+
+    // http://vuejs.github.io/vue-loader/en/configurations/extract-css.html
+    return {
+        css: generateLoaders(),
+        postcss: generateLoaders(),
+        less: generateLoaders('less'),
+        sass: generateLoaders('sass', {indentedSyntax: true}),
+        scss: generateLoaders('sass'),
+        stylus: generateLoaders('stylus'),
+        styl: generateLoaders('stylus')
+    }
+}
+
+// Generate loaders for standalone style files (outside of .vue)
+exports.styleLoaders = function (options) {
+    var output = []
+    var loaders = exports.cssLoaders(options)
+    for (var extension in loaders) {
+        var loader = loaders[extension]
+        output.push({
+            test: new RegExp('\\.' + extension + '$'),
+            use: loader
+        })
+    }
+    return output
+}

build/vue-loader.conf.js

+var utils = require('./utils')
+var config = require('../config')
+var isProduction = process.env.NODE_ENV === 'production'
+
+module.exports = {
+    loaders: utils.cssLoaders({
+        sourceMap: isProduction
+            ? config.build.productionSourceMap
+            : config.dev.cssSourceMap,
+        extract: isProduction
+    })
+}

build/webpack.base.conf.js

+var path = require('path');
+var utils = require('./utils');
+var config = require('../config');
+var vueLoaderConfig = require('./vue-loader.conf');
+
+function resolve(dir) {
+    return path.join(__dirname, '..', dir)
+}
+var src = path.resolve(__dirname, '../src');
+
+module.exports = {
+    entry: {
+        app: './src/main.js'
+    },
+    output: {
+        path: config.build.assetsRoot,
+        filename: '[name].js',
+        publicPath: process.env.NODE_ENV !== 'development' ?  config.build.assetsPublicPath: config.dev.assetsPublicPath
+    },
+    resolve: {
+        extensions: ['.js', '.vue', '.json'],
+        alias: {
+            'vue$': 'vue/dist/vue.esm.js',
+            '@': resolve('src'),
+            'src': path.resolve(__dirname, '../src'),
+            'assets': path.resolve(__dirname, '../src/assets'),
+            'components': path.resolve(__dirname, '../src/components'),
+            'views': path.resolve(__dirname, '../src/views'),
+            'styles': path.resolve(__dirname, '../src/styles'),
+            'api': path.resolve(__dirname, '../src/api'),
+            'utils': path.resolve(__dirname, '../src/utils'),
+            'store': path.resolve(__dirname, '../src/store'),
+            'router': path.resolve(__dirname, '../src/router'),
+            'mock': path.resolve(__dirname, '../src/mock'),
+            'vendor': path.resolve(__dirname, '../src/vendor'),
+            'static': path.resolve(__dirname, '../static')
+        }
+    },
+    externals: {
+        jquery: 'jQuery'
+    },
+    module: {
+        rules: [
+            // {
+            //     test: /\.(js|vue)$/,
+            //     loader: 'eslint-loader',
+            //     enforce: "pre",
+            //     include: [resolve('src'), resolve('test')],
+            //     options: {
+            //         formatter: require('eslint-friendly-formatter')
+            //     }
+            // },
+            { test: /\.vue$/,
+                loader: 'vue-loader',
+                options: vueLoaderConfig
+            },
+            {
+                test: /\.js$/,
+                loader: 'babel-loader?cacheDirectory',
+                include: [resolve('src'), resolve('test')]
+            },
+            {
+                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+                loader: 'url-loader',
+                query: {
+                    limit: 10000,
+                    name: utils.assetsPath('img/[name].[hash:7].[ext]')
+                }
+            },
+            {
+                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+                loader: 'url-loader',
+                query: {
+                    limit: 10000,
+                    name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
+                }
+            }
+        ]
+    },
+    //注入全局mixin
+    // sassResources: path.join(__dirname, '../src/styles/mixin.scss'),
+    // sassLoader: {
+    //     data:  path.join(__dirname, '../src/styles/index.scss')
+    // },
+}

build/webpack.dev.conf.js

+var utils = require('./utils')
+var path = require('path')
+var webpack = require('webpack')
+var config = require('../config')
+var merge = require('webpack-merge')
+var baseWebpackConfig = require('./webpack.base.conf')
+var HtmlWebpackPlugin = require('html-webpack-plugin')
+var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
+
+// add hot-reload related code to entry chunks
+Object.keys(baseWebpackConfig.entry).forEach(function (name) {
+    baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
+})
+
+function resolveApp(relativePath) {
+    return path.resolve(relativePath);
+}
+
+module.exports = merge(baseWebpackConfig, {
+    module: {
+        rules: utils.styleLoaders({sourceMap: config.dev.cssSourceMap})
+    },
+    // cheap-source-map is faster for development
+    devtool: '#cheap-source-map',
+    cache: true,
+    plugins: [
+        new webpack.DefinePlugin({
+            'process.env': config.dev.env
+        }),
+        new webpack.ProvidePlugin({
+            $: 'jquery',
+            'jQuery': 'jquery'
+        }),
+        // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
+        new webpack.HotModuleReplacementPlugin(),
+        new webpack.NoErrorsPlugin(),
+        // https://github.com/ampedandwired/html-webpack-plugin
+        new HtmlWebpackPlugin({
+            filename: 'index.html',
+            template: 'index.html',
+            favicon: resolveApp('favicon.ico'),
+            inject: true,
+            path:config.dev.staticPath
+        }),
+        new FriendlyErrorsPlugin()
+    ]
+})

build/webpack.prod.conf.js

+var path = require('path')
+var utils = require('./utils')
+var webpack = require('webpack')
+var config = require('../config')
+var merge = require('webpack-merge')
+var baseWebpackConfig = require('./webpack.base.conf')
+var CopyWebpackPlugin = require('copy-webpack-plugin')
+var HtmlWebpackPlugin = require('html-webpack-plugin')
+var ExtractTextPlugin = require('extract-text-webpack-plugin')
+var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
+
+var env = process.env.NODE_ENV === 'production' ? config.build.prodEnv : config.build.sitEnv
+
+function resolveApp(relativePath) {
+    return path.resolve(relativePath);
+}
+
+var webpackConfig = merge(baseWebpackConfig, {
+    module: {
+        rules: utils.styleLoaders({
+            sourceMap: config.build.productionSourceMap,
+            extract: true
+        })
+    },
+    devtool: config.build.productionSourceMap ? '#source-map' : false,
+    output: {
+        path: config.build.assetsRoot,
+        filename: utils.assetsPath('js/[name].[chunkhash].js'),
+        chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
+    },
+    plugins: [
+        // http://vuejs.github.io/vue-loader/en/workflow/production.html
+        new webpack.DefinePlugin({
+            'process.env': env
+        }),
+        new webpack.optimize.UglifyJsPlugin({
+            compress: {
+                warnings: false
+            },
+            sourceMap: true
+        }),
+        // extract css into its own file
+        new ExtractTextPlugin({
+            filename: utils.assetsPath('css/[name].[contenthash].css')
+        }),
+        // Compress extracted CSS. We are using this plugin so that possible
+        // duplicated CSS from different components can be deduped.
+        new OptimizeCSSPlugin(),
+        // generate dist index.html with correct asset hash for caching.
+        // you can customize output by editing /index.html
+        // see https://github.com/ampedandwired/html-webpack-plugin
+        new HtmlWebpackPlugin({
+            filename: process.env.NODE_ENV === 'testing'
+                ? 'index.html'
+                : config.build.index,
+            template: 'index.html',
+            inject: true,
+            favicon: resolveApp('favicon.ico'),
+            minify: {
+                removeComments: true,
+                collapseWhitespace: true,
+                removeRedundantAttributes: true,
+                useShortDoctype: true,
+                removeEmptyAttributes: true,
+                removeStyleLinkTypeAttributes: true,
+                keepClosingSlash: true,
+                minifyJS: true,
+                minifyCSS: true,
+                minifyURLs: true
+            },
+             path:config.build.staticPath,
+            // necessary to consistently work with multiple chunks via CommonsChunkPlugin
+            chunksSortMode: 'dependency'
+        }),
+        // split vendor js into its own file
+        new webpack.optimize.CommonsChunkPlugin({
+            name: 'vendor',
+            minChunks: function (module, count) {
+                // any required modules inside node_modules are extracted to vendor
+                return (
+                    module.resource &&
+                    /\.js$/.test(module.resource) &&
+                    module.resource.indexOf(
+                        path.join(__dirname, '../node_modules')
+                    ) === 0
+                )
+            }
+        }),
+        // extract webpack runtime and module manifest to its own file in order to
+        // prevent vendor hash from being updated whenever app bundle is updated
+        new webpack.optimize.CommonsChunkPlugin({
+            name: 'manifest',
+            chunks: ['vendor']
+        }),
+        // copy custom static assets
+        new CopyWebpackPlugin([
+            {
+                from: path.resolve(__dirname, '../static'),
+                to: config.build.assetsSubDirectory,
+                ignore: ['.*']
+            }
+        ]),
+        new webpack.ProvidePlugin({
+            $: 'jquery',
+            'jQuery': 'jquery'
+        })
+    ]
+})
+if (config.build.bundleAnalyzerReport) {
+    var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+    webpackConfig.plugins.push(new BundleAnalyzerPlugin())
+}
+module.exports = webpackConfig

config/dev.env.js

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

config/index.js

+// see http://vuejs-templates.github.io/webpack for documentation.
+var path = require('path')
+
+module.exports = {
+    build: {
+        sitEnv: require('./sit.env'),
+        prodEnv: require('./prod.env'),
+        index: path.resolve(__dirname, '../dist/index.html'),
+        assetsRoot: path.resolve(__dirname, '../dist'),
+        assetsSubDirectory: '',
+        assetsPublicPath: './',
+        staticPath:'./',
+        productionSourceMap: true,
+        // Gzip off by default as many popular static hosts such as
+        // Surge or Netlify already gzip all static assets for you.
+        // Before setting to `true`, make sure to:
+        // npm install --save-dev compression-webpack-plugin
+        productionGzip: false,
+        productionGzipExtensions: ['js', 'css'],
+        // Run the build command with an extra argument to
+        // View the bundle analyzer report after build finishes:
+        // `npm run build --report`
+        // Set to `true` or `false` to always turn it on or off
+        bundleAnalyzerReport: process.env.npm_config_report
+    },
+    dev: {
+        env: require('./dev.env'),
+        port: 9527,
+        autoOpenBrowser: true,
+        assetsSubDirectory: 'static',
+        assetsPublicPath: '/',
+        staticPath:'/static/',
+        proxyTable: {},
+        // CSS Sourcemaps off by default because relative paths are "buggy"
+        // with this option, according to the CSS-Loader README
+        // (https://github.com/webpack/css-loader#sourcemaps)
+        // In our experience, they generally work as expected,
+        // just be aware of this issue when enabling this option.
+        cssSourceMap: false
+    }
+}

config/prod.env.js

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

config/sit.env.js

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

index.html

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

package.json

+{
+  "name": "juicy",
+  "version": "1.0.0",
+  "description": "A Vue.js admin",
+  "author": "Pan <panfree23@gmail.com>",
+  "private": true,
+  "scripts": {
+    "dev": "node build/dev-server.js",
+    "build:prod": "NODE_ENV=production node build/build.js",
+    "build:sit": "NODE_ENV=sit node build/build.js",
+    "build:sit-preview": "NODE_ENV=sit npm_config_preview=true  npm_config_report=true node build/build.js",
+    "lint": "eslint --ext .js,.vue src"
+  },
+  "dependencies": {
+    "axios": "0.15.3",
+    "codemirror": "5.22.0",
+    "dropzone": "4.3.0",
+    "echarts": "3.4.0",
+    "element-ui": "1.2.9",
+    "file-saver": "1.3.3",
+    "jquery": "3.1.1",
+    "js-cookie": "2.1.3",
+    "jsonlint": "1.6.2",
+    "mockjs": "1.0.1-beta3",
+    "normalize.css": "3.0.2",
+    "nprogress": "0.2.0",
+    "showdown": "1.6.4",
+    "simplemde": "1.11.2",
+    "vue": "2.2.6",
+    "vue-multiselect": "2.0.0-beta.14",
+    "vue-router": "2.3.0",
+    "vuedraggable": "2.8.4",
+    "vuex": "2.2.1",
+    "xlsx": "0.8.1",
+    "vue-count-to":"1.0.5"
+  },
+  "devDependencies": {
+    "autoprefixer": "6.7.2",
+    "axios-mock-adapter": "^1.8.1",
+    "babel-core": "6.22.1",
+    "babel-eslint": "7.1.1",
+    "babel-loader": "6.2.10",
+    "babel-plugin-transform-runtime": "6.22.0",
+    "babel-preset-es2015": "6.22.0",
+    "babel-preset-stage-2": "6.22.0",
+    "babel-register": "6.22.0",
+    "chalk": "1.1.3",
+    "connect-history-api-fallback": "1.3.0",
+    "copy-webpack-plugin": "4.0.1",
+    "css-loader": "0.26.1",
+    "eslint": "3.14.1",
+    "eslint-config-airbnb-base": "11.0.1",
+    "eslint-friendly-formatter": "2.0.7",
+    "eslint-import-resolver-webpack": "0.8.1",
+    "eslint-loader": "1.6.3",
+    "eslint-plugin-html": "2.0.0",
+    "eslint-plugin-import": "2.2.0",
+    "eventsource-polyfill": "0.9.6",
+    "express": "4.14.1",
+    "extract-text-webpack-plugin": "2.0.0",
+    "file-loader": "0.10.0",
+    "friendly-errors-webpack-plugin": "1.1.3",
+    "function-bind": "1.1.0",
+    "html-webpack-plugin": "2.28.0",
+    "http-proxy-middleware": "0.17.3",
+    "node-sass": "3.7.0",
+    "opn": "4.0.2",
+    "optimize-css-assets-webpack-plugin": "1.3.0",
+    "ora": "1.1.0",
+    "pushstate-server": "2.1.0",
+    "rimraf": "2.6.0",
+    "sass-loader": "4.0.2",
+    "script-loader": "0.7.0",
+    "semver": "5.3.0",
+    "style-loader": "0.13.1",
+    "url-loader": "0.5.7",
+    "vue-loader": "11.3.4",
+    "vue-style-loader": "2.0.0",
+    "vue-template-compiler": "2.2.6",
+    "webpack": "2.2.1",
+    "webpack-bundle-analyzer": "2.2.1",
+    "webpack-dashboard": "0.2.1",
+    "webpack-dev-middleware": "1.10.0",
+    "webpack-hot-middleware": "2.16.1",
+    "webpack-merge": "2.6.1"
+  },
+  "engines": {
+    "node": ">= 4.0.0",
+    "npm": ">= 3.0.0"
+  },
+  "browserlist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 8"
+  ]
+}

src/App.vue

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

src/api/article.js

+import { fetch } from 'utils/fetch';
+
+export function getList() {
+  return fetch({
+    url: '/article/list',
+    method: 'get'
+  });
+}
+
+export function getArticle() {
+  return fetch({
+    url: '/article/detail',
+    method: 'get'
+  });
+}
+

src/api/article_table.js

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

src/api/login.js

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

src/api/qiniu.js

+import fetch, { tpFetch } from 'utils/fetch';
+
+export function getToken() {
+  return fetch({
+    url: '/qiniu/upload/token',
+    method: 'get'
+  });
+}
+export function upload(data) {
+  return tpFetch({
+    url: 'https://upload.qbox.me',
+    method: 'post',
+    data
+  });
+}
+
+
+/* 外部uri转七牛uri*/
+export function netUpload(token, net_url) {
+  const imgData = {
+    net_url
+  };
+  return fetch({
+    url: '/qiniu/upload/net/async',
+    method: 'post',
+    data: imgData
+  });
+}

src/api/remoteSearch.js

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

src/components/Charts/barPercent.vue

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

src/components/Charts/keyboard.vue

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

src/components/Charts/keyboard2.vue

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

src/components/Charts/line.vue

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

src/components/Charts/linemarker.vue

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

src/components/Charts/mixchart.vue

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

src/components/Dropzone/index.vue

+<template>
+    <div :ref="id" :action="url" class="dropzone" :id="id">
+        <input type="file" name="file">
+    </div>
+</template>
+<script>
+    import Dropzone from 'dropzone';
+    import 'dropzone/dist/dropzone.css';
+    import { getToken } from 'api/qiniu';
+
+    Dropzone.autoDiscover = false;
+
+    export default {
+      data() {
+        return {
+          dropzone: '',
+          initOnce: true
+        }
+      },
+      mounted() {
+        const element = document.getElementById(this.id);
+        const vm = this;
+        this.dropzone = new Dropzone(element, {
+          clickable: this.clickable,
+          thumbnailWidth: this.thumbnailWidth,
+          thumbnailHeight: this.thumbnailHeight,
+          maxFiles: this.maxFiles,
+          maxFilesize: this.maxFilesize,
+          dictRemoveFile: 'Remove',
+          addRemoveLinks: this.showRemoveLink,
+          acceptedFiles: this.acceptedFiles,
+          autoProcessQueue: this.autoProcessQueue,
+          dictDefaultMessage: '<i style="margin-top: 3em;display: inline-block" class="material-icons">' + this.defaultMsg + '</i><br>Drop files here to upload',
+          dictMaxFilesExceeded: '只能一个图',
+          previewTemplate: '<div class="dz-preview dz-file-preview">  <div class="dz-image" style="width:' + this.thumbnailWidth + 'px;height:' + this.thumbnailHeight + 'px" ><img style="width:' + this.thumbnailWidth + 'px;height:' + this.thumbnailHeight + 'px" data-dz-thumbnail /></div>  <div class="dz-details"><div class="dz-size"><span data-dz-size></span></div> <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>  <div class="dz-error-message"><span data-dz-errormessage></span></div>  <div class="dz-success-mark"> <i class="material-icons">done</i> </div>  <div class="dz-error-mark"><i class="material-icons">error</i></div></div>',
+          init() {
+            const val = vm.defaultImg;
+            if (!val) return;
+            if (Array.isArray(val)) {
+              if (val.length === 0) return;
+              val.map((v, i) => {
+                const mockFile = { name: 'name' + i, size: 12345, url: v };
+                this.options.addedfile.call(this, mockFile);
+                this.options.thumbnail.call(this, mockFile, v);
+                mockFile.previewElement.classList.add('dz-success');
+                mockFile.previewElement.classList.add('dz-complete');
+                vm.initOnce = false;
+                return true;
+              })
+            } else {
+              const mockFile = { name: 'name', size: 12345, url: val };
+              this.options.addedfile.call(this, mockFile);
+              this.options.thumbnail.call(this, mockFile, val);
+              mockFile.previewElement.classList.add('dz-success');
+              mockFile.previewElement.classList.add('dz-complete');
+              vm.initOnce = false;
+            }
+          },
+          accept: (file, done) => {
+        /* 七牛*/
+            // const token = this.$store.getters.token;
+            // getToken(token).then(response => {
+            //   file.token = response.data.qiniu_token;
+            //   file.key = response.data.qiniu_key;
+            //   file.url = response.data.qiniu_url;
+            //   done();
+            // })
+            done();
+          },
+          sending: (file, xhr, formData) => {
+             /* 七牛*/
+            // formData.append('token', file.token);
+            // formData.append('key', file.key);
+            vm.initOnce = false;
+          }
+        });
+
+        if (this.couldPaste) {
+          document.addEventListener('paste', this.pasteImg)
+        }
+
+        this.dropzone.on('success', file => {
+          vm.$emit('dropzone-success', file, vm.dropzone.element)
+        });
+        this.dropzone.on('addedfile', file => {
+          vm.$emit('dropzone-fileAdded', file)
+        });
+        this.dropzone.on('removedfile', file => {
+          vm.$emit('dropzone-removedFile', file)
+        });
+        this.dropzone.on('error', (file, error, xhr) => {
+          vm.$emit('dropzone-error', file, error, xhr)
+        });
+        this.dropzone.on('successmultiple', (file, error, xhr) => {
+          vm.$emit('dropzone-successmultiple', file, error, xhr)
+        });
+      },
+      methods: {
+        removeAllFiles() {
+          this.dropzone.removeAllFiles(true)
+        },
+        processQueue() {
+          this.dropzone.processQueue()
+        },
+        pasteImg(event) {
+          const items = (event.clipboardData || event.originalEvent.clipboardData).items;
+          if (items[0].kind === 'file') {
+            this.dropzone.addFile(items[0].getAsFile())
+          }
+        },
+        initImages(val) {
+          if (!val) return;
+          if (Array.isArray(val)) {
+            val.map((v, i) => {
+              const mockFile = { name: 'name' + i, size: 12345, url: v };
+              this.dropzone.options.addedfile.call(this.dropzone, mockFile);
+              this.dropzone.options.thumbnail.call(this.dropzone, mockFile, v);
+              mockFile.previewElement.classList.add('dz-success');
+              mockFile.previewElement.classList.add('dz-complete');
+              return true
+            })
+          } else {
+            const mockFile = { name: 'name', size: 12345, url: val };
+            this.dropzone.options.addedfile.call(this.dropzone, mockFile);
+            this.dropzone.options.thumbnail.call(this.dropzone, mockFile, val);
+            mockFile.previewElement.classList.add('dz-success');
+            mockFile.previewElement.classList.add('dz-complete');
+          }
+        }
+
+      },
+      destroyed() {
+        document.removeEventListener('paste', this.pasteImg);
+        this.dropzone.destroy();
+      },
+      watch: {
+        defaultImg(val) {
+          if (val.length === 0) {
+            this.initOnce = false;
+            return;
+          }
+          if (!this.initOnce) return;
+          this.initImages(val);
+          this.initOnce = false;
+        }
+      },
+      props: {
+        id: {
+          type: String,
+          required: true
+        },
+        url: {
+          type: String,
+          required: true
+        },
+        clickable: {
+          type: Boolean,
+          default: true
+        },
+        defaultMsg: {
+          type: String,
+          default: '上传图片'
+        },
+        acceptedFiles: {
+          type: String
+        },
+        thumbnailHeight: {
+          type: Number,
+          default: 200
+        },
+        thumbnailWidth: {
+          type: Number,
+          default: 200
+        },
+        showRemoveLink: {
+          type: Boolean,
+          default: true
+        },
+        maxFilesize: {
+          type: Number,
+          default: 2
+        },
+        maxFiles: {
+          type: Number,
+          default: 3
+        },
+        autoProcessQueue: {
+          type: Boolean,
+          default: true
+        },
+        useCustomDropzoneOptions: {
+          type: Boolean,
+          default: false
+        },
+        defaultImg: {
+          default: false
+        },
+        couldPaste: {
+          default: false
+        }
+      }
+    }
+</script>
+
+<style scoped>
+    .dropzone {
+        border: 2px solid #E5E5E5;
+        font-family: 'Roboto', sans-serif;
+        color: #777;
+        transition: background-color .2s linear;
+        padding: 5px;
+    }
+
+    .dropzone:hover {
+        background-color: #F6F6F6;
+    }
+
+    i {
+        color: #CCC;
+    }
+
+    .dropzone .dz-image img {
+        width: 100%;
+        height: 100%;
+    }
+
+    .dropzone input[name='file'] {
+        display: none;
+    }
+
+    .dropzone .dz-preview .dz-image {
+        border-radius: 0px;
+    }
+
+    .dropzone .dz-preview:hover .dz-image img {
+        transform: none;
+        -webkit-filter: none;
+        width: 100%;
+        height: 100%;
+    }
+
+    .dropzone .dz-preview .dz-details {
+        bottom: 0px;
+        top: 0px;
+        color: white;
+        background-color: rgba(33, 150, 243, 0.8);
+        transition: opacity .2s linear;
+        text-align: left;
+    }
+
+    .dropzone .dz-preview .dz-details .dz-filename span, .dropzone .dz-preview .dz-details .dz-size span {
+        background-color: transparent;
+    }
+
+    .dropzone .dz-preview .dz-details .dz-filename:not(:hover) span {
+        border: none;
+    }
+
+    .dropzone .dz-preview .dz-details .dz-filename:hover span {
+        background-color: transparent;
+        border: none;
+    }
+
+    .dropzone .dz-preview .dz-remove {
+        position: absolute;
+        z-index: 30;
+        color: white;
+        margin-left: 15px;
+        padding: 10px;
+        top: inherit;
+        bottom: 15px;
+        border: 2px white solid;
+        text-decoration: none;
+        text-transform: uppercase;
+        font-size: 0.8rem;
+        font-weight: 800;
+        letter-spacing: 1.1px;
+        opacity: 0;
+    }
+
+    .dropzone .dz-preview:hover .dz-remove {
+        opacity: 1;
+    }
+
+    .dropzone .dz-preview .dz-success-mark, .dropzone .dz-preview .dz-error-mark {
+        margin-left: -40px;
+        margin-top: -50px;
+    }
+
+    .dropzone .dz-preview .dz-success-mark i, .dropzone .dz-preview .dz-error-mark i {
+        color: white;
+        font-size: 5rem;
+    }
+</style>

src/components/ErrLog/index.vue

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

src/components/Hamburger/index.vue

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

src/components/Icon-svg/index.js

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

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

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

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

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

src/components/ImageCropper/lang.js

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

src/components/ImageCropper/utils.js

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

src/components/MdEditor/index.vue

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

src/components/SplitPane/Pane.vue

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

src/mock/index.js

+import axios from 'axios';
+import MockAdapter from 'axios-mock-adapter';
+import loginAPI from './login';
+import articleAPI from './article';
+import article_tableAPI from './article_table';
+import remoteSearchAPI from './remoteSearch';
+const mock = new MockAdapter(axios);
+
+// 登录相关
+mock.onPost('/login/loginbyemail').reply(loginAPI.loginByEmail);
+mock.onPost('/login/logout').reply(loginAPI.logout);
+mock.onGet('/user/info').reply(loginAPI.getInfo);
+
+// 文章相关
+mock.onGet('/article/list').reply(articleAPI.getList);
+mock.onGet('/article/detail').reply(articleAPI.getArticle);
+
+// table example相关
+mock.onGet('/article_table/list').reply(article_tableAPI.getList);
+mock.onGet('/article_table/pv').reply(article_tableAPI.getPv);
+
+// 搜索相关
+mock.onGet('/search/user').reply(remoteSearchAPI.searchUser);
+
+
+export default mock;