146 changed files with 16047 additions and 2 deletions
--- a/.editorconfig
+++ b/.editorconfig
@ -0,0 +1,14 @@
+# http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+insert_final_newline = false
+trim_trailing_whitespace = false
--- a/.env.development
+++ b/.env.development
@ -0,0 +1,20 @@
+# just a flag
+ENV = 'development'
+
+# base api
+VUE_APP_BASE_API = '/system'
+#VUE_APP_BASE_API = 'http://localhost:9528/'
+
+# 代理地址
+VUE_APP_PROXY_API = 'http://127.0.0.1:8083'
+#VUE_APP_PROXY_API = 'http://gmanager.jflyfox.com'
+
+# vue-cli uses the VUE_CLI_BABEL_TRANSPILE_MODULES environment variable,
+# to control whether the babel-plugin-dynamic-import-node plugin is enabled.
+# It only does one thing by converting all import() to require().
+# This configuration can significantly increase the speed of hot updates,
+# when you have a large number of pages.
+# Detail:  https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/babel-preset-app/index.js
+
+VUE_CLI_BABEL_TRANSPILE_MODULES = true
+ 
--- a/.env.production
+++ b/.env.production
@ -0,0 +1,67 @@
+# just a flag
+ENV = 'production'
+
+# ----base api----
+# 百度
+#VUE_APP_BASE_API = 'http://34.87.3.216:8083'
+
+# 6kw
+#VUE_APP_BASE_API = 'http://119.3.154.143:9090/'
+
+# x1国内9377-正式
+#VUE_APP_BASE_API = 'http://120.92.20.31:8083'
+
+# x1国内9377-正式
+#VUE_APP_BASE_API = 'http://127.0.0.1:8083'
+
+# x1国内赤兔-测试
+#VUE_APP_BASE_API = 'http://120.92.209.58:8083'
+
+# x1-赤兔正式
+#VUE_APP_BASE_API = 'http://114.132.165.176:8083'
+
+# x1韩国-测试-老
+#VUE_APP_BASE_API = 'http://101.101.218.149:8083'
+
+# x1韩国-测试-新
+#VUE_APP_BASE_API = 'http://175.45.200.133:8083'
+
+# x1-韩国正式
+#VUE_APP_BASE_API = 'http://175.45.202.9:8083'
+
+# x1-QA测试服
+#VUE_APP_BASE_API = 'http://120.92.51.235:8083'
+
+# 主播服
+#VUE_APP_BASE_API = 'http://1.13.245.222:8083/'
+
+#国内正式服
+#VUE_APP_BASE_API = 'http://1.13.158.168:8083'
+
+#BT正式服
+#VUE_APP_BASE_API = 'http://110.41.179.253:8083'
+#BT主播服
+#VUE_APP_BASE_API = 'http://124.71.66.2:8083'
+#小七
+#VUE_APP_BASE_API = 'http://146.56.239.195:8083'
+#繁体测试
+#VUE_APP_BASE_API = 'http://104.199.226.30:8083'
+#繁体正式
+#VUE_APP_BASE_API = 'http://35.194.170.111:8083'
+#BT 二发
+#VUE_APP_BASE_API = 'http://139.9.214.198:8083'
+#VUE_APP_BASE_API = 'http://localhost:8083'
+#VUE_APP_BASE_API = 'http://35.236.136.235:8083'
+#开发服
+#VUE_APP_BASE_API = 'http://120.92.51.235:8083'
+#越南政审服
+#VUE_APP_BASE_API = 'http://42.96.58.70:8083'
+#越南测试服
+#VUE_APP_BASE_API = 'http://42.96.59.70:8083'
+#越南正式服
+VUE_APP_BASE_API = 'http://42.96.58.47:8083'
+#韩服正式服
+#VUE_APP_BASE_API = 'http://43.155.170.34:8083'
+# ----代理地址----
+VUE_APP_PROXY_API = 'http://127.0.0.1:80'
+
--- a/.env.staging
+++ b/.env.staging
@ -0,0 +1,8 @@
+NODE_ENV = production
+
+# just a flag
+ENV = 'staging'
+
+# base api
+VUE_APP_BASE_API = '/stage-api'
+
--- a/.eslintignore
+++ b/.eslintignore
@ -0,0 +1,4 @@
+build/*.js
+src/assets
+public
+dist
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -0,0 +1,198 @@
+module.exports = {
+  root: true,
+  parserOptions: {
+    parser: 'babel-eslint',
+    sourceType: 'module'
+  },
+  env: {
+    browser: true,
+    node: true,
+    es6: true,
+  },
+  extends: ['plugin:vue/recommended', 'eslint:recommended'],
+
+  // add your custom rules here
+  //it is base on https://github.com/vuejs/eslint-config-vue
+  rules: {
+    "vue/max-attributes-per-line": [2, {
+      "singleline": 10,
+      "multiline": {
+        "max": 1,
+        "allowFirstLine": false
+      }
+    }],
+    "vue/singleline-html-element-content-newline": "off",
+    "vue/multiline-html-element-content-newline":"off",
+    "vue/name-property-casing": ["error", "PascalCase"],
+    "vue/no-v-html": "off",
+    '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': ["error", "always", {"null": "ignore"}],
+    'generator-star-spacing': [2, {
+      'before': true,
+      'after': true
+    }],
+    'handle-callback-err': [2, '^(err|error)$'],
+    'indent': [2, 2, {
+      'SwitchCase': 1
+    }],
+    'jsx-quotes': [2, 'prefer-single'],
+    'key-spacing': [2, {
+      'beforeColon': false,
+      'afterColon': true
+    }],
+    'keyword-spacing': [2, {
+      'before': true,
+      'after': true
+    }],
+    'new-cap': [2, {
+      'newIsCap': true,
+      'capIsNew': false
+    }],
+    'new-parens': 2,
+    'no-array-constructor': 2,
+    'no-caller': 2,
+    'no-console': 'off',
+    'no-class-assign': 2,
+    'no-cond-assign': 2,
+    'no-const-assign': 2,
+    'no-control-regex': 0,
+    'no-delete-var': 2,
+    'no-dupe-args': 2,
+    'no-dupe-class-members': 2,
+    'no-dupe-keys': 2,
+    'no-duplicate-case': 2,
+    'no-empty-character-class': 2,
+    'no-empty-pattern': 2,
+    'no-eval': 2,
+    'no-ex-assign': 2,
+    'no-extend-native': 2,
+    'no-extra-bind': 2,
+    'no-extra-boolean-cast': 2,
+    'no-extra-parens': [2, 'functions'],
+    'no-fallthrough': 2,
+    'no-floating-decimal': 2,
+    'no-func-assign': 2,
+    'no-implied-eval': 2,
+    'no-inner-declarations': [2, 'functions'],
+    'no-invalid-regexp': 2,
+    'no-irregular-whitespace': 2,
+    'no-iterator': 2,
+    'no-label-var': 2,
+    'no-labels': [2, {
+      'allowLoop': false,
+      'allowSwitch': false
+    }],
+    'no-lone-blocks': 2,
+    'no-mixed-spaces-and-tabs': 2,
+    'no-multi-spaces': 2,
+    'no-multi-str': 2,
+    'no-multiple-empty-lines': [2, {
+      'max': 1
+    }],
+    'no-native-reassign': 2,
+    'no-negated-in-lhs': 2,
+    'no-new-object': 2,
+    'no-new-require': 2,
+    'no-new-symbol': 2,
+    'no-new-wrappers': 2,
+    'no-obj-calls': 2,
+    'no-octal': 2,
+    'no-octal-escape': 2,
+    'no-path-concat': 2,
+    'no-proto': 2,
+    'no-redeclare': 2,
+    'no-regex-spaces': 2,
+    'no-return-assign': [2, 'except-parens'],
+    'no-self-assign': 2,
+    'no-self-compare': 2,
+    'no-sequences': 2,
+    'no-shadow-restricted-names': 2,
+    'no-spaced-func': 2,
+    'no-sparse-arrays': 2,
+    'no-this-before-super': 2,
+    'no-throw-literal': 2,
+    'no-trailing-spaces': 2,
+    'no-undef': 2,
+    'no-undef-init': 2,
+    'no-unexpected-multiline': 2,
+    'no-unmodified-loop-condition': 2,
+    'no-unneeded-ternary': [2, {
+      'defaultAssignment': false
+    }],
+    'no-unreachable': 2,
+    'no-unsafe-finally': 2,
+    'no-unused-vars': [2, {
+      'vars': 'all',
+      'args': 'none'
+    }],
+    'no-useless-call': 2,
+    'no-useless-computed-key': 2,
+    'no-useless-constructor': 2,
+    'no-useless-escape': 0,
+    'no-whitespace-before-property': 2,
+    'no-with': 2,
+    'one-var': [2, {
+      'initialized': 'never'
+    }],
+    'operator-linebreak': [2, 'after', {
+      'overrides': {
+        '?': 'before',
+        ':': 'before'
+      }
+    }],
+    'padded-blocks': [2, 'never'],
+    'quotes': [2, 'single', {
+      'avoidEscape': true,
+      'allowTemplateLiterals': true
+    }],
+    'semi': [2, 'never'],
+    'semi-spacing': [2, {
+      'before': false,
+      'after': true
+    }],
+    'space-before-blocks': [2, 'always'],
+    'space-before-function-paren': [2, 'never'],
+    'space-in-parens': [2, 'never'],
+    'space-infix-ops': 2,
+    'space-unary-ops': [2, {
+      'words': true,
+      'nonwords': false
+    }],
+    'spaced-comment': [2, 'always', {
+      'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
+    }],
+    'template-curly-spacing': [2, 'never'],
+    'use-isnan': 2,
+    'valid-typeof': 2,
+    'wrap-iife': [2, 'any'],
+    'yield-star-spacing': [2, 'both'],
+    'yoda': [2, 'never'],
+    'prefer-const': 2,
+    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
+    'object-curly-spacing': [2, 'always', {
+      objectsInObjects: false
+    }],
+    'array-bracket-spacing': [2, 'never']
+  }
+}
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,16 @@
+.DS_Store
+node_modules/
+dist/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+package-lock.json
+tests/**/coverage/
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
--- a/.travis.yml
+++ b/.travis.yml
@ -0,0 +1,5 @@
+language: node_js
+node_js: 10
+script: npm run test
+notifications:
+  email: false
--- a/ChangeLog.md
+++ b/ChangeLog.md
@ -0,0 +1,2 @@
+## 2019-12-24 v1.0.0
+1. 发布gmanger v1.0.0 提供前端代码
--- a/21
+++ b/21
@ -0,0 +1,21 @@
+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.md
+++ b/README.md
@ -1,3 +1,81 @@
-# jieling_server
+# gmanager-web

-服务器代码
+* 这是一个基于gmanager管理后台的前端页面。它包含了登录、认证、组织机构、用户帐号、角色权限、菜单、操作日志，这些搭建后台必要的东西。
+* 基于 ElementUI 和 vue 进行开发，使用vue-admin-template模板
+
+## 代码
+* github地址： https://github.com/goflyfox/gmanager-web
+* gitee地址： https://gitee.com/goflyfox/gmanager-web
+* 服务端github地址： https://github.com/goflyfox/gmanager
+* 服务端gitee地址： https://gitee.com/goflyfox/gmanager
+
+## 项目使用
+
+```bash
+# 克隆项目
+git clone https://github.com/goflyfox/gmanager-web
+
+# 进入项目目录
+cd gmanager-web
+
+# 安装依赖
+npm install
+
+# 启动服务
+npm run dev
+```
+
+浏览器访问 [http://localhost:9529](http://localhost:9529)
+
+## 打包发布
+
+```bash
+# 构建测试环境
+npm run build:stage
+
+# 构建生产环境
+npm run build:prod
+```
+
+## 其它
+
+```bash
+# 代码格式检查
+npm run lint
+
+# 代码格式检查并自动修复
+npm run lint -- --fix
+```
+## 功能模块
+
+1. 登录、认证、登出
+2. 组织机构管理
+3. 用户管理
+4. 角色管理
+5. 菜单管理
+6. 支持登录、登出、业务增删改操作记录
+
+## 部署截图
+登录：
+![image](https://raw.githubusercontent.com/goflyfox/gmanager/master/deploy/image/web1.png)
+
+组织机构：
+![image](https://raw.githubusercontent.com/goflyfox/gmanager/master/deploy/image/web2.png)
+
+用户管理：
+![image](https://raw.githubusercontent.com/goflyfox/gmanager/master/deploy/image/web3.png)
+
+日志管理：
+![image](https://raw.githubusercontent.com/goflyfox/gmanager/master/deploy/image/web4.png)
+
+#### 感谢
+
+
+1. vue-admin-template框架 [https://github.com/PanJiaChen/vue-admin-template](https://github.com/PanJiaChen/vue-admin-template) 
+
+
+## License
+
+[MIT](https://github.com/goflyfox/gmanager-web) license.
+
+Copyright (c) 2019-present hanshuaibing
--- a/babel.config.js
+++ b/babel.config.js
@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/app'
+  ]
+}
--- a/build/index.js
+++ b/build/index.js
@ -0,0 +1,35 @@
+const { run } = require('runjs')
+const chalk = require('chalk')
+const config = require('../vue.config.js')
+const rawArgv = process.argv.slice(2)
+const args = rawArgv.join(' ')
+
+if (process.env.npm_config_preview || rawArgv.includes('--preview')) {
+  const report = rawArgv.includes('--report')
+
+  run(`vue-cli-service build ${args}`)
+
+  const port = 9526
+  const publicPath = config.publicPath
+
+  var connect = require('connect')
+  var serveStatic = require('serve-static')
+  const app = connect()
+
+  app.use(
+    publicPath,
+    serveStatic('./dist', {
+      index: ['index.html', '/']
+    })
+  )
+
+  app.listen(port, function () {
+    console.log(chalk.green(`> Preview at  http://localhost:${port}${publicPath}`))
+    if (report) {
+      console.log(chalk.green(`> Report at  http://localhost:${port}${publicPath}report.html`))
+    }
+
+  })
+} else {
+  run(`vue-cli-service build ${args}`)
+}
--- a/jest.config.js
+++ b/jest.config.js
@ -0,0 +1,24 @@
+module.exports = {
+  moduleFileExtensions: ['js', 'jsx', 'json', 'vue'],
+  transform: {
+    '^.+\\.vue$': 'vue-jest',
+    '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$':
+      'jest-transform-stub',
+    '^.+\\.jsx?$': 'babel-jest'
+  },
+  moduleNameMapper: {
+    '^@/(.*)$': '<rootDir>/src/$1'
+  },
+  snapshotSerializers: ['jest-serializer-vue'],
+  testMatch: [
+    '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
+  ],
+  collectCoverageFrom: ['src/utils/**/*.{js,vue}', '!src/utils/auth.js', '!src/utils/request.js', 'src/components/**/*.{js,vue}'],
+  coverageDirectory: '<rootDir>/tests/unit/coverage',
+  // 'collectCoverage': true,
+  'coverageReporters': [
+    'lcov',
+    'text-summary'
+  ],
+  testURL: 'http://localhost/'
+}
--- a/jsconfig.json
+++ b/jsconfig.json
@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "baseUrl": "./",
+    "paths": {
+        "@/*": ["src/*"]
+    }
+  },
+  "exclude": ["node_modules", "dist"]
+}
--- a/mock/index.js
+++ b/mock/index.js
@ -0,0 +1,66 @@
+import Mock from 'mockjs'
+import { param2Obj } from '../src/utils'
+
+import user from './user'
+import table from './table'
+
+const mocks = [
+  ...user,
+  ...table
+]
+
+// for front mock
+// please use it cautiously, it will redefine XMLHttpRequest,
+// which will cause many of your third-party libraries to be invalidated(like progress event).
+export function mockXHR() {
+  // mock patch
+  // https://github.com/nuysoft/Mock/issues/300
+  Mock.XHR.prototype.proxy_send = Mock.XHR.prototype.send
+  Mock.XHR.prototype.send = function() {
+    if (this.custom.xhr) {
+      this.custom.xhr.withCredentials = this.withCredentials || false
+
+      if (this.responseType) {
+        this.custom.xhr.responseType = this.responseType
+      }
+    }
+    this.proxy_send(...arguments)
+  }
+
+  function XHR2ExpressReqWrap(respond) {
+    return function(options) {
+      let result = null
+      if (respond instanceof Function) {
+        const { body, type, url } = options
+        // https://expressjs.com/en/4x/api.html#req
+        result = respond({
+          method: type,
+          body: JSON.parse(body),
+          query: param2Obj(url)
+        })
+      } else {
+        result = respond
+      }
+      return Mock.mock(result)
+    }
+  }
+
+  for (const i of mocks) {
+    Mock.mock(new RegExp(i.url), i.type || 'get', XHR2ExpressReqWrap(i.response))
+  }
+}
+
+// for mock server
+const responseFake = (url, type, respond) => {
+  return {
+    url: new RegExp(`/mock${url}`),
+    type: type || 'get',
+    response(req, res) {
+      res.json(Mock.mock(respond instanceof Function ? respond(req, res) : respond))
+    }
+  }
+}
+
+export default mocks.map(route => {
+  return responseFake(route.url, route.type, route.response)
+})
--- a/mock/mock-server.js
+++ b/mock/mock-server.js
@ -0,0 +1,68 @@
+const chokidar = require('chokidar')
+const bodyParser = require('body-parser')
+const chalk = require('chalk')
+const path = require('path')
+
+const mockDir = path.join(process.cwd(), 'mock')
+
+function registerRoutes(app) {
+  let mockLastIndex
+  const { default: mocks } = require('./index.js')
+  for (const mock of mocks) {
+    app[mock.type](mock.url, mock.response)
+    mockLastIndex = app._router.stack.length
+  }
+  const mockRoutesLength = Object.keys(mocks).length
+  return {
+    mockRoutesLength: mockRoutesLength,
+    mockStartIndex: mockLastIndex - mockRoutesLength
+  }
+}
+
+function unregisterRoutes() {
+  Object.keys(require.cache).forEach(i => {
+    if (i.includes(mockDir)) {
+      delete require.cache[require.resolve(i)]
+    }
+  })
+}
+
+module.exports = app => {
+  // es6 polyfill
+  require('@babel/register')
+
+  // parse app.body
+  // https://expressjs.com/en/4x/api.html#req.body
+  app.use(bodyParser.json())
+  app.use(bodyParser.urlencoded({
+    extended: true
+  }))
+
+  const mockRoutes = registerRoutes(app)
+  var mockRoutesLength = mockRoutes.mockRoutesLength
+  var mockStartIndex = mockRoutes.mockStartIndex
+
+  // watch files, hot reload mock server
+  chokidar.watch(mockDir, {
+    ignored: /mock-server/,
+    ignoreInitial: true
+  }).on('all', (event, path) => {
+    if (event === 'change' || event === 'add') {
+      try {
+        // remove mock routes stack
+        app._router.stack.splice(mockStartIndex, mockRoutesLength)
+
+        // clear routes cache
+        unregisterRoutes()
+
+        const mockRoutes = registerRoutes(app)
+        mockRoutesLength = mockRoutes.mockRoutesLength
+        mockStartIndex = mockRoutes.mockStartIndex
+
+        console.log(chalk.magentaBright(`\n > Mock Server hot reload success! changed  ${path}`))
+      } catch (error) {
+        console.log(chalk.redBright(error))
+      }
+    }
+  })
+}
--- a/mock/table.js
+++ b/mock/table.js
@ -0,0 +1,29 @@
+import Mock from 'mockjs'
+
+const data = Mock.mock({
+  'items|30': [{
+    id: '@id',
+    title: '@sentence(10, 20)',
+    'status|1': ['published', 'draft', 'deleted'],
+    author: 'name',
+    display_time: '@datetime',
+    pageviews: '@integer(300, 5000)'
+  }]
+})
+
+export default [
+  {
+    url: '/table/list',
+    type: 'get',
+    response: config => {
+      const items = data.items
+      return {
+        code: 20000,
+        data: {
+          total: items.length,
+          items: items
+        }
+      }
+    }
+  }
+]
--- a/mock/user.js
+++ b/mock/user.js
@ -0,0 +1,84 @@
+
+const tokens = {
+  admin: {
+    token: 'admin-token'
+  },
+  editor: {
+    token: 'editor-token'
+  }
+}
+
+const users = {
+  'admin-token': {
+    roles: ['admin'],
+    introduction: 'I am a super administrator',
+    avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
+    name: 'Super Admin'
+  },
+  'editor-token': {
+    roles: ['editor'],
+    introduction: 'I am an editor',
+    avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
+    name: 'Normal Editor'
+  }
+}
+
+export default [
+  // user login
+  {
+    url: '/user/login',
+    type: 'post',
+    response: config => {
+      const { username } = config.body
+      const token = tokens[username]
+
+      // mock error
+      if (!token) {
+        return {
+          code: 60204,
+          message: 'Account and password are incorrect.'
+        }
+      }
+
+      return {
+        code: 20000,
+        data: token
+      }
+    }
+  },
+
+  // get user info
+  {
+    url: '/user/info\.*',
+    type: 'get',
+    response: config => {
+      const { token } = config.query
+      const info = users[token]
+
+      // mock error
+      if (!info) {
+        return {
+          code: 50008,
+          message: 'Login failed, unable to get user details.'
+        }
+      }
+
+      return {
+        code: 20000,
+        data: info
+      }
+    }
+  },
+
+  // user logout
+  {
+    url: '/user/logout',
+    type: 'post',
+    response: _ => {
+      return {
+        code: 20000,
+        data: 'success'
+      }
+    }
+  }
+]
--- a/package.json
+++ b/package.json
@ -0,0 +1,69 @@
+{
+  "name": "admin-manager",
+  "version": "1.0.0",
+  "description": "后台管理系统",
+  "author": "hanhan",
+  "license": "MIT",
+  "scripts": {
+    "dev": "vue-cli-service serve",
+    "build:prod": "vue-cli-service build --mode production",
+    "build:stage": "vue-cli-service build --mode staging",
+    "preview": "node build/index.js --preview",
+    "lint": "eslint --ext .js,.vue src",
+    "test:unit": "jest --clearCache && vue-cli-service test:unit",
+    "test:ci": "npm run lint && npm run test:unit",
+    "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml"
+  },
+  "dependencies": {
+    "axios": "^0.21.1",
+    "echarts": "^4.7.0",
+    "element-ui": "2.13.0",
+    "file-saver": "^2.0.5",
+    "js-cookie": "2.2.0",
+    "js-md5": "^0.7.3",
+    "moment": "^2.29.3",
+    "normalize.css": "7.0.0",
+    "nprogress": "0.2.0",
+    "path-to-regexp": "2.4.0",
+    "vue": "2.6.10",
+    "vue-router": "3.0.6",
+    "vuex": "3.1.0",
+    "xlsx": "^0.15.6"
+  },
+  "devDependencies": {
+    "@babel/core": "7.0.0",
+    "@babel/register": "7.0.0",
+    "@vue/cli-plugin-babel": "3.6.0",
+    "@vue/cli-plugin-eslint": "^3.9.1",
+    "@vue/cli-plugin-unit-jest": "3.6.3",
+    "@vue/cli-service": "3.6.0",
+    "@vue/test-utils": "1.0.0-beta.29",
+    "autoprefixer": "^9.5.1",
+    "babel-core": "7.0.0-bridge.0",
+    "babel-eslint": "10.0.1",
+    "babel-jest": "23.6.0",
+    "chalk": "2.4.2",
+    "connect": "3.6.6",
+    "eslint": "5.15.3",
+    "eslint-plugin-vue": "5.2.2",
+    "html-webpack-plugin": "3.2.0",
+    "mockjs": "1.0.1-beta3",
+    "node-sass": "^4.9.0",
+    "runjs": "^4.3.2",
+    "sass-loader": "^7.1.0",
+    "script-ext-html-webpack-plugin": "2.1.3",
+    "script-loader": "0.7.2",
+    "serve-static": "^1.13.2",
+    "svg-sprite-loader": "4.1.3",
+    "svgo": "1.2.2",
+    "vue-template-compiler": "2.6.10"
+  },
+  "engines": {
+    "node": ">=8.9",
+    "npm": ">= 3.0.0"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions"
+  ]
+}
--- a/postcss.config.js
+++ b/postcss.config.js
@ -0,0 +1,8 @@
+// https://github.com/michael-ciniawsky/postcss-load-config
+
+module.exports = {
+  'plugins': {
+    // to edit target browsers: use "browserslist" field in package.json
+    'autoprefixer': {}
+  }
+}
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/index.html
+++ b/public/index.html
@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= webpackConfig.name %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= webpackConfig.name %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
--- a/src/App.vue
+++ b/src/App.vue
@ -0,0 +1,11 @@
+<template>
+  <div id="app">
+    <router-view />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'App'
+}
+</script>
--- a/src/api/system.js
+++ b/src/api/system.js
@ -0,0 +1,55 @@
+import request from '@/utils/request'
+
+export function getMenuList(data) {
+  return request({
+    url: '/system/menu/page',
+    method: 'post',
+    data
+  })
+}
+
+export function getMenuTree() {
+  return request({
+    url: '/system/menu/tree',
+    method: 'post'
+  })
+}
+
+export function getMenuDetail(id) {
+  return request({
+    url: `/system/menu/get/${id}`,
+    method: 'get'
+  })
+}
+
+export function saveMenu(data) {
+  return request({
+    url: '/system/menu/save',
+    method: 'post',
+    data
+  })
+}
+
+export function delMenu(id) {
+  return request({
+    url: `/system/menu/delete/${id}`,
+    method: 'post'
+  })
+}
+
+export function getRoleList(data) {
+  return request({
+    url: '/login/submit',
+    method: 'post',
+    data
+  })
+}
+
+export function getUserList(data) {
+  return request({
+    url: '/login/submit',
+    method: 'post',
+    data
+  })
+}
+
--- a/src/api/systemapi/config.js
+++ b/src/api/systemapi/config.js
@ -0,0 +1,39 @@
+import request from '@/utils/request'
+
+export function getList(data) {
+  return request({
+    url: '/system/config/page',
+    method: 'post',
+    data
+  })
+}
+
+export function getDetail(id) {
+  return request({
+    url: `/system/config/get/${id}`,
+    method: 'get'
+  })
+}
+
+export function getType() {
+  return request({
+    url: '/system/config/type',
+    method: 'get'
+  })
+}
+
+export function save(data) {
+  return request({
+    url: '/system/config/save',
+    method: 'post',
+    data
+  })
+}
+
+export function del(id) {
+  return request({
+    url: `/system/config/delete/${id}`,
+    method: 'post'
+  })
+}
+
--- a/src/api/systemapi/depart.js
+++ b/src/api/systemapi/depart.js
@ -0,0 +1,39 @@
+import request from '@/utils/request'
+
+export function getList(data) {
+  return request({
+    url: '/system/department/page',
+    method: 'post',
+    data
+  })
+}
+
+export function getTree() {
+  return request({
+    url: '/system/department/list',
+    method: 'post'
+  })
+}
+
+export function getDetail(id) {
+  return request({
+    url: `/system/department/get/${id}`,
+    method: 'get'
+  })
+}
+
+export function save(data) {
+  return request({
+    url: '/system/department/save',
+    method: 'post',
+    data
+  })
+}
+
+export function del(id) {
+  return request({
+    url: `/system/department/delete/${id}`,
+    method: 'post'
+  })
+}
+
--- a/src/api/systemapi/game.js
+++ b/src/api/systemapi/game.js
@ -0,0 +1,560 @@
+import request from '@/utils/request'
+
+export function getList(data) {
+  return request({
+    url: '/system/game/page',
+    method: 'post',
+    data
+  })
+}
+
+export function getCdnList(data) {
+  return request({
+    url: '/system/game/getcdn',
+    method: 'post',
+    data
+  })
+}
+
+export function getWnList(data) {
+  return request({
+    url: '/system/game/getnotice',
+    method: 'post',
+    data
+  })
+}
+
+export function getLiucunList(data) {
+  return request({
+    url: '/system/game/liucun',
+    method: 'post',
+    data
+  })
+}
+
+export function getPayLiucunList(data) {
+  return request({
+    url: '/system/game/payliucun',
+    method: 'post',
+    data
+  })
+}
+
+export function getpayuserdayist(data) {
+  return request({
+    url: '/system/game/payuserday',
+    method: 'post',
+    data
+  })
+}
+
+export function getItemList(data) {
+  return request({
+    url: '/system/game/iteminfo',
+    method: 'post',
+    data
+  })
+}
+
+export function getgemHis(data) {
+  return request({
+    url: '/system/game/playergeminfo',
+    method: 'post',
+    data
+  })
+}
+
+export function getpayLog(data) {
+  return request({
+    url: '/system/game/paylog',
+    method: 'post',
+    data
+  })
+}
+
+export function getfLog(data) {
+  return request({
+    url: '/system/game/flog',
+    method: 'post',
+    data
+  })
+}
+
+export function getplayererr(data) {
+  return request({
+    url: '/system/game/playererr',
+    method: 'post',
+    data
+  })
+}
+export function playerbattlererr(data) {
+  return request({
+    url: '/system/game/playerbattlererr',
+    method: 'post',
+    data
+  })
+}
+
+export function getMaindate(data) {
+  return request({
+    url: '/system/game/maindate',
+    method: 'post',
+    data
+  })
+}
+
+export function getMauList(data) {
+  return request({
+    url: '/system/game/mau',
+    method: 'post',
+    data
+  })
+}
+
+export function getOnlineList(data) {
+  return request({
+    url: '/system/game/online',
+    method: 'post',
+    data
+  })
+}
+
+export function getOnlineListHis(data) {
+  return request({
+    url: '/system/game/onlinetime',
+    method: 'post',
+    data
+  })
+}
+
+export function getOnlineListHisHour(data) {
+  return request({
+    url: '/system/game/onlinehour',
+    method: 'post',
+    data
+  })
+}
+
+export function getLvList(data) {
+  return request({
+    url: '/system/game/lv',
+    method: 'post',
+    data
+  })
+}
+
+export function gettimepayList(data) {
+  return request({
+    url: '/system/game/timepay',
+    method: 'post',
+    data
+  })
+}
+
+export function getdaygemInfo(data) {
+  return request({
+    url: '/system/game/daygeminfo',
+    method: 'post',
+    data
+  })
+}
+
+export function getPayinfoList(data) {
+  return request({
+    url: '/system/game/payinfo',
+    method: 'post',
+    data
+  })
+}
+
+// export function getPayList(data) {
+//   return request({
+//     url: '/system/game/pay',
+//     method: 'post',
+//     data
+//   })
+// }
+
+export function getUserInfo(data) {
+  return request({
+    url: '/system/game/playerinfo',
+    method: 'post',
+    data
+  })
+}
+
+export function getUserRegisterInfo(data) {
+  return request({
+    url: '/system/game/playerregisterinfo',
+    method: 'post',
+    data
+  })
+}
+
+export function getAccountInfo(data) {
+  return request({
+    url: '/system/game/accountinfo',
+    method: 'post',
+    data
+  })
+}
+
+export function getUsegift(data) {
+  return request({
+    url: '/system/game/playergift',
+    method: 'post',
+    data
+  })
+}
+
+export function getUserPayInfo(data) {
+  return request({
+    url: '/system/game/playerpayinfo',
+    method: 'post',
+    data
+  })
+}
+
+export function getDayPayList(data) {
+  return request({
+    url: '/system/game/daypay',
+    method: 'post',
+    data
+  })
+}
+
+export function getMPayList(data) {
+  return request({
+    url: '/system/game/mpay',
+    method: 'post',
+    data
+  })
+}
+
+export function getDetail(id) {
+  return request({
+    url: `/system/role/get/${id}`,
+    method: 'get'
+  })
+}
+
+export function getCdnDetail(id) {
+  return request({
+    url: `/system/gamecdn/get/${id}`,
+    method: 'get'
+  })
+}
+
+export function getnoticeDetail(id) {
+  return request({
+    url: `/system/gamenotice/get/${id}`,
+    method: 'get'
+  })
+}
+
+export function getInfo(data) {
+  return request({
+    url: `/system/role/info`,
+    method: 'post',
+    data
+  })
+}
+
+export function cdnsave(data) {
+  return request({
+    url: '/system/game/savecdn',
+    method: 'post',
+    data
+  })
+}
+
+export function noticesave(data) {
+  return request({
+    url: '/system/game/savenotice',
+    method: 'post',
+    data
+  })
+}
+
+export function del(id) {
+  return request({
+    url: `/system/role/delete/${id}`,
+    method: 'post'
+  })
+}
+
+export function fenghao(id) {
+  return request({
+    url: `/system/gamehandle/fenghao/${id}`,
+    method: 'get'
+  })
+}
+
+export function getVipList(data) {
+  return request({
+    url: '/system/game/vip',
+    method: 'post',
+    data
+  })
+}
+
+export function getHourList(data) {
+  return request({
+    url: '/system/game/hour',
+    method: 'post',
+    data
+  })
+}
+
+export function getHourLoginList(data) {
+  return request({
+    url: '/system/game/hourlogin',
+    method: 'post',
+    data
+  })
+}
+
+export function getServerList(data) {
+  return request({
+    url: '/system/game/serverinfo',
+    method: 'post',
+    data
+  })
+}
+
+export function saveUpdateStatue(data) {
+  return request({
+    url: '/system/game/saveupdatestatue',
+    method: 'post',
+    data
+  })
+}
+
+export function getServerDetail(id) {
+  return request({
+    url: `/system/game/getserverdetail/${id}`,
+    method: 'get'
+  })
+}
+
+export function saveServer(data) {
+  return request({
+    url: '/system/game/saveserver',
+    method: 'post',
+    data
+  })
+}
+
+export function delServer(id) {
+  return request({
+    url: `/system/game/delserver/${id}`,
+    method: 'post'
+  })
+}
+
+export function getWhiteList(data) {
+  return request({
+    url: '/system/game/whitelist',
+    method: 'post',
+    data
+  })
+}
+
+export function getWhiteListDetail(id) {
+  return request({
+    url: `/system/game/getwhitelistdetail/${id}`,
+    method: 'get'
+  })
+}
+
+export function saveWhiteList(data) {
+  return request({
+    url: '/system/game/savewhitelist',
+    method: 'post',
+    data
+  })
+}
+
+export function delWhiteList(id) {
+  return request({
+    url: `/system/game/delwhitelist/${id}`,
+    method: 'post'
+  })
+}
+
+export function getBlackList(data) {
+  return request({
+    url: '/system/game/blacklist',
+    method: 'post',
+    data
+  })
+}
+
+export function getSingleBlackList(data) {
+  return request({
+    url: '/system/game/singleblacklist',
+    method: 'post',
+    data
+  })
+}
+
+export function getBlackListDetail(id) {
+  return request({
+    url: `/system/game/getblacklistdetail/${id}`,
+    method: 'get'
+  })
+}
+
+export function saveBlackList(data) {
+  return request({
+    url: '/system/game/saveblacklist',
+    method: 'post',
+    data
+  })
+}
+
+export function saveSingleBlackList(data) {
+  return request({
+    url: '/system/game/savesingleblacklist',
+    method: 'post',
+    data
+  })
+}
+
+export function delBlackList(id) {
+  return request({
+    url: `/system/game/delblacklist/${id}`,
+    method: 'post'
+  })
+}
+export function delSingleBlackList(id) {
+  return request({
+    url: `/system/game/delsingleblacklist/${id}`,
+    method: 'post'
+  })
+}
+
+export function getNoticeInfo(data) {
+  return request({
+    url: '/system/game/noticeinfo',
+    method: 'post',
+    data
+  })
+}
+
+export function getSendMsgList(data) {
+  return request({
+    url: '/system/game/sendMsgList',
+    method: 'get',
+    data
+  })
+}
+
+export function getNoticeInfoDetail(id) {
+  return request({
+    url: `/system/game/getnoticeinfodetail/${id}`,
+    method: 'get'
+  })
+}
+
+export function saveNoticeInfo(data) {
+  return request({
+    url: '/system/game/savenoticeinfo',
+    method: 'post',
+    data
+  })
+}
+
+export function delNoticeInfo(id) {
+  return request({
+    url: `/system/game/delnoticeinfo/${id}`,
+    method: 'post'
+  })
+}
+
+export function getServer() {
+  return request({
+    url: '/system/game/getserverlist',
+    method: 'get'
+  })
+}
+
+export function getRechargeStatisticsList(data) {
+  return request({
+    url: '/system/game/getrechargestatisticslist',
+    method: 'post',
+    data
+  })
+}
+
+export function getPayList(data) {
+  return request({
+    url: '/system/game/rechargeflow',
+    method: 'post',
+    data
+  })
+}
+
+export function getPayRank(data) {
+  return request({
+    url: '/system/game/getrechargerank',
+    method: 'post',
+    data
+  })
+}
+
+export function getChatInfoList(data) {
+  return request({
+    url: '/system/game/getchatinfolist',
+    method: 'post',
+    data
+  })
+}
+
+export function setSilence(id, type, serverId) {
+  return request({
+    url: `/system/game/setsilence?id=${id}&type=${type}&serverId=${serverId}`,
+    method: 'get'
+  })
+}
+
+export function getOnlineNumList(data) {
+  return request({
+    url: '/system/game/getonlinenumlist',
+    method: 'post',
+    data
+  })
+}
+
+export function getLtvList(data) {
+  return request({
+    url: '/system/game/getltvlist',
+    method: 'post',
+    data
+  })
+}
+
+export function getItemLogList(data) {
+  return request({
+    url: '/system/game/getitemloglist',
+    method: 'post',
+    data
+  })
+}
+
+export function getUserItemList(data) {
+  return request({
+    url: '/system/game/getuseritemlist',
+    method: 'post',
+    data
+  })
+}
+
+export function sendMsg(data) {
+  return request({
+    url: '/system/game/sendmsg',
+    method: 'post',
+    data
+  })
+}
+
--- a/src/api/systemapi/gm.js
+++ b/src/api/systemapi/gm.js
@ -0,0 +1,207 @@
+import request from '@/utils/request'
+
+export function getSendMailList(data) {
+  return request({
+    url: '/system/gm/getsendmaillist',
+    method: 'post',
+    data
+  })
+}
+export function getSendMailAllList(data) {
+  return request({
+    url: '/system/gm/getsendmailalllist',
+    method: 'post',
+    data
+  })
+}
+
+export function saveMailLog(data) {
+  return request({
+    url: '/system/gm/savemaillog',
+    method: 'post',
+    data
+  })
+}
+
+export function saveMailLogAll(data) {
+  return request({
+    url: '/system/gm/savemaillogall',
+    method: 'post',
+    data
+  })
+}
+
+export function sendMail(data) {
+  return request({
+    url: '/system/gm/sendmail',
+    method: 'post',
+    data
+  })
+}
+
+export function updateMail(data) {
+  return request({
+    url: '/system/gm/updatemail',
+    method: 'post',
+    data
+  })
+}
+
+export function sendMailAll(data) {
+  return request({
+    url: '/system/gm/sendmailall',
+    method: 'post',
+    data
+  })
+}
+
+// export function sendMailExcel(data) {
+//   return request({
+//     url: '/system/gm/sendmailexecl',
+//     method: 'post',
+//     data
+//   })
+// }
+
+export function getRechargeInfoList(data) {
+  return request({
+    url: '/system/gm/getrechargeinfolist',
+    method: 'post',
+    data
+  })
+}
+
+export function pay(data) {
+  return request({
+    url: '/system/gm/pay',
+    method: 'post',
+    data
+  })
+}
+
+export function getPayLogList(data) {
+  return request({
+    url: '/system/gm/getpayloglist',
+    method: 'post',
+    data
+  })
+}
+
+export function creatcdk(data) {
+  return request({
+    url: '/system/gm/creatcdk',
+    method: 'post',
+    data
+  })
+}
+
+export function getCreatcdkList(data) {
+  return request({
+    url: '/system/gm/getcreatcdklist',
+    method: 'post',
+    data
+  })
+}
+
+export function getCdkIdList(data) {
+  return request({
+    url: '/system/gm/getcdkidlist',
+    method: 'post',
+    data
+  })
+}
+
+export function creatcdkcode(data) {
+  return request({
+    url: '/system/gm/creatcdkcode',
+    method: 'post',
+    data
+  })
+}
+
+export function getCreatcdkCodeList(data) {
+  return request({
+    url: '/system/gm/getcreatcdkcodelist',
+    method: 'post',
+    data
+  })
+}
+
+export function downloadCdk(data) {
+  return request({
+    url: `/system/gm/downloadcdk/${data}`,
+    method: 'post'
+  })
+}
+
+export function setSilence(data) {
+  return request({
+    url: '/system/gm/setsilence',
+    method: 'post',
+    data
+  })
+}
+
+export function getSilenceList(data) {
+  return request({
+    url: '/system/gm/getsilencelist',
+    method: 'post',
+    data
+  })
+}
+
+export function getHeroCommentList(data) {
+  return request({
+    url: '/system/gm/herocommentlist',
+    method: 'post',
+    data
+  })
+}
+
+export function setSilenceHerocomment(data) {
+  return request({
+    url: '/system/gm/setsilenceherocomment',
+    method: 'post',
+    data
+  })
+}
+
+export function getHeroCommentLogList(data) {
+  return request({
+    url: '/system/gm/herocommentloglist',
+    method: 'post',
+    data
+  })
+}
+
+export function getSendModifyItemList(data) {
+  return request({
+    url: '/system/gm/getsendmodifyitemlist',
+    method: 'post',
+    data
+  })
+}
+
+export function saveModifyItemLog(data) {
+  return request({
+    url: '/system/gm/savemodifyitemlog',
+    method: 'post',
+    data
+  })
+}
+
+export function sendModifyItem(data) {
+  return request({
+    url: '/system/gm/sendmodifyitem',
+    method: 'post',
+    data
+  })
+}
+
+export function updateModifyItem(data) {
+  return request({
+    url: '/system/gm/updatemodifyitem',
+    method: 'post',
+    data
+  })
+}
--- a/src/api/systemapi/log.js
+++ b/src/api/systemapi/log.js
@ -0,0 +1,17 @@
+import request from '@/utils/request'
+
+export function getList(data) {
+  return request({
+    url: '/system/log/page',
+    method: 'post',
+    data
+  })
+}
+
+export function getDetail(id) {
+  return request({
+    url: `/system/log/get/${id}`,
+    method: 'get'
+  })
+}
+
--- a/src/api/systemapi/menu.js
+++ b/src/api/systemapi/menu.js
@ -0,0 +1,39 @@
+import request from '@/utils/request'
+
+export function getMenuList(data) {
+  return request({
+    url: '/system/menu/page',
+    method: 'post',
+    data
+  })
+}
+
+export function getMenuTree() {
+  return request({
+    url: '/system/menu/tree',
+    method: 'post'
+  })
+}
+
+export function getMenuDetail(id) {
+  return request({
+    url: `/system/menu/get/${id}`,
+    method: 'get'
+  })
+}
+
+export function saveMenu(data) {
+  return request({
+    url: '/system/menu/save',
+    method: 'post',
+    data
+  })
+}
+
+export function delMenu(id) {
+  return request({
+    url: `/system/menu/delete/${id}`,
+    method: 'post'
+  })
+}
+
--- a/src/api/systemapi/role.js
+++ b/src/api/systemapi/role.js
@ -0,0 +1,40 @@
+import request from '@/utils/request'
+
+export function getList(data) {
+  return request({
+    url: '/system/role/page',
+    method: 'post',
+    data
+  })
+}
+
+export function getDetail(id) {
+  return request({
+    url: `/system/role/get/${id}`,
+    method: 'get'
+  })
+}
+
+export function getInfo(data) {
+  return request({
+    url: `/system/role/info`,
+    method: 'post',
+    data
+  })
+}
+
+export function save(data) {
+  return request({
+    url: '/system/role/save',
+    method: 'post',
+    data
+  })
+}
+
+export function del(id) {
+  return request({
+    url: `/system/role/delete/${id}`,
+    method: 'post'
+  })
+}
+
--- a/src/api/systemapi/user.js
+++ b/src/api/systemapi/user.js
@ -0,0 +1,48 @@
+import request from '@/utils/request'
+
+export function getList(data) {
+  return request({
+    url: '/system/user/page',
+    method: 'post',
+    data
+  })
+}
+
+export function getDetail(id) {
+  return request({
+    url: `/system/user/get/${id}`,
+    method: 'get'
+  })
+}
+
+export function getRoleInfo(data) {
+  return request({
+    url: `/system/user/roleinfo`,
+    method: 'post',
+    data
+  })
+}
+
+export function saveRoleInfo(data) {
+  return request({
+    url: '/system/user/rolesave',
+    method: 'post',
+    data
+  })
+}
+
+export function save(data) {
+  return request({
+    url: '/system/user/save',
+    method: 'post',
+    data
+  })
+}
+
+export function del(id) {
+  return request({
+    url: `/system/user/delete/${id}`,
+    method: 'post'
+  })
+}
+
--- a/src/api/user.js
+++ b/src/api/user.js
@ -0,0 +1,39 @@
+import request from '@/utils/request'
+
+export function login(data) {
+  return request({
+    url: '/login/submit',
+    method: 'post',
+    data
+  })
+}
+
+export function getInfo(token) {
+  return request({
+    url: 'system/user/info',
+    method: 'get',
+    params: { token }
+  })
+}
+
+export function logout() {
+  return request({
+    url: '/user/logout',
+    method: 'post'
+  })
+}
+
+export function changePwd(data) {
+  return request({
+    url: '/system/user/password',
+    method: 'post',
+    data
+  })
+}
+
+export function getUserMenu() {
+  return request({
+    url: '/system/user/menu',
+    method: 'post'
+  })
+}
--- 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/components/Breadcrumb/index.vue
+++ b/src/components/Breadcrumb/index.vue
@ -0,0 +1,78 @@
+<template>
+  <el-breadcrumb class="app-breadcrumb" separator="/">
+    <transition-group name="breadcrumb">
+      <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
+        <span v-if="item.redirect==='noRedirect'||index==levelList.length-1" class="no-redirect">{{ item.meta.title }}</span>
+        <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
+      </el-breadcrumb-item>
+    </transition-group>
+  </el-breadcrumb>
+</template>
+
+<script>
+import pathToRegexp from 'path-to-regexp'
+
+export default {
+  data() {
+    return {
+      levelList: null
+    }
+  },
+  watch: {
+    $route() {
+      this.getBreadcrumb()
+    }
+  },
+  created() {
+    this.getBreadcrumb()
+  },
+  methods: {
+    getBreadcrumb() {
+      // only show routes with meta.title
+      let matched = this.$route.matched.filter(item => item.meta && item.meta.title)
+      const first = matched[0]
+
+      if (!this.isDashboard(first)) {
+        matched = [{ path: '/dashboard', meta: { title: '欢迎页' }}].concat(matched)
+      }
+
+      this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
+    },
+    isDashboard(route) {
+      const name = route && route.name
+      if (!name) {
+        return false
+      }
+      return name.trim().toLocaleLowerCase() === 'Dashboard'.toLocaleLowerCase()
+    },
+    pathCompile(path) {
+      // To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561
+      const { params } = this.$route
+      var toPath = pathToRegexp.compile(path)
+      return toPath(params)
+    },
+    handleLink(item) {
+      const { redirect, path } = item
+      if (redirect) {
+        this.$router.push(redirect)
+        return
+      }
+      this.$router.push(this.pathCompile(path))
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.app-breadcrumb.el-breadcrumb {
+  display: inline-block;
+  font-size: 14px;
+  line-height: 50px;
+  margin-left: 8px;
+
+  .no-redirect {
+    color: #97a8be;
+    cursor: text;
+  }
+}
+</style>
--- a/src/components/Hamburger/index.vue
+++ b/src/components/Hamburger/index.vue
@ -0,0 +1,44 @@
+<template>
+  <div style="padding: 0 15px;" @click="toggleClick">
+    <svg
+      :class="{'is-active':isActive}"
+      class="hamburger"
+      viewBox="0 0 1024 1024"
+      xmlns="http://www.w3.org/2000/svg"
+      width="64"
+      height="64"
+    >
+      <path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />
+    </svg>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Hamburger',
+  props: {
+    isActive: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    toggleClick() {
+      this.$emit('toggleClick')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.hamburger {
+  display: inline-block;
+  vertical-align: middle;
+  width: 20px;
+  height: 20px;
+}
+
+.hamburger.is-active {
+  transform: rotate(180deg);
+}
+</style>
--- a/src/components/Pagination/index.vue
+++ b/src/components/Pagination/index.vue
@ -0,0 +1,42 @@
+<template>
+  <div class="pagination">
+    <el-pagination
+      layout="total, sizes, prev, pager, next, jumper"
+      :pagination="pagination"
+      :page-size="pagination.pageSize"
+      :current-page="pagination.currentPage"
+      :total="pagination.total"
+      :page-sizes="pagination.pageSizes"
+      @current-change="handleCurrentChange"
+      @size-change="handleSizeChange"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    pagination: {
+      type: Object,
+      default: () => ({ pageSizes: [], pageSize: 10, currentPage: 1, total: 0 })
+    }
+  },
+  methods: {
+    handleCurrentChange: function(val) {
+      this.pagination.currentPage = val
+      // this.$emit('refresh')
+    },
+    handleSizeChange: function(val) {
+      this.pagination.pageSize = val
+      // this.$emit('refresh')
+    }
+  }
+}
+</script>
+
+<style>
+.pagination {
+  width: 40%;
+  margin: 35px auto;
+}
+</style>
--- a/src/components/SvgIcon/index.vue
+++ b/src/components/SvgIcon/index.vue
@ -0,0 +1,62 @@
+<template>
+  <div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" />
+  <svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
+    <use :href="iconName" />
+  </svg>
+</template>
+
+<script>
+// doc: https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html#usage
+import { isExternal } from '@/utils/validate'
+
+export default {
+  name: 'SvgIcon',
+  props: {
+    iconClass: {
+      type: String,
+      required: true
+    },
+    className: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    isExternal() {
+      return isExternal(this.iconClass)
+    },
+    iconName() {
+      return `#icon-${this.iconClass}`
+    },
+    svgClass() {
+      if (this.className) {
+        return 'svg-icon ' + this.className
+      } else {
+        return 'svg-icon'
+      }
+    },
+    styleExternalIcon() {
+      return {
+        mask: `url(${this.iconClass}) no-repeat 50% 50%`,
+        '-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.svg-icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+
+.svg-external-icon {
+  background-color: currentColor;
+  mask-size: cover!important;
+  display: inline-block;
+}
+</style>
--- a/src/icons/index.js
+++ b/src/icons/index.js
@ -0,0 +1,9 @@
+import Vue from 'vue'
+import SvgIcon from '@/components/SvgIcon'// svg component
+
+// register globally
+Vue.component('svg-icon', SvgIcon)
+
+const req = require.context('./svg', false, /\.svg$/)
+const requireAll = requireContext => requireContext.keys().map(requireContext)
+requireAll(req)
--- a/src/icons/svg/business.svg
+++ b/src/icons/svg/business.svg
@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1575517161884" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4732" width="128" height="128" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"></style></defs><path d="M42.666667 917.333333c0 36.266667 27.733333 64 64 64h810.666666c36.266667 0 64-27.733333 64-64V469.333333H42.666667v448z m405.333333-362.666666h128c12.8 0 21.333333 8.533333 21.333333 21.333333s-8.533333 21.333333-21.333333 21.333333h-128c-12.8 0-21.333333-8.533333-21.333333-21.333333s8.533333-21.333333 21.333333-21.333333z m469.333333-298.666667H106.666667c-36.266667 0-64 27.733333-64 64v106.666667h938.666666v-106.666667c0-36.266667-27.733333-64-64-64z m-597.333333-42.666667c12.8 0 21.333333-8.533333 21.333333-21.333333V119.466667c0-19.2 17.066667-34.133333 36.266667-34.133334h268.8c19.2 0 36.266667 14.933333 36.266667 34.133334V192c0 12.8 8.533333 21.333333 21.333333 21.333333s21.333333-8.533333 21.333333-21.333333V119.466667c0-42.666667-36.266667-76.8-78.933333-76.8H377.6c-42.666667 0-78.933333 34.133333-78.933333 76.8V192c0 12.8 8.533333 21.333333 21.333333 21.333333z" fill="#666767" p-id="4733"></path></svg>
--- a/src/icons/svg/config.svg
+++ b/src/icons/svg/config.svg
@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1576046508318" class="icon" viewBox="0 0 1127 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14731" xmlns:xlink="http://www.w3.org/1999/xlink" width="140.875" height="128"><defs><style type="text/css"></style></defs><path d="M500.246772 114.321909h627.518997v87.060949h-627.518997zM0 114.321909h260.461874v87.060949H0z" p-id="14732"></path><path d="M507.347681 315.704766h-333.280196V0h333.280196z m-246.219247-87.060949h159.158297V87.060949h-159.158297zM500.246772 822.617142h627.518997v87.060949h-627.518997zM0 822.617142h260.461874v87.060949H0z" p-id="14733"></path><path d="M507.347681 1024h-333.280196V708.295234h333.280196z m-246.219247-87.060949h159.158297V795.356183h-159.158297zM0 469.462564h627.518997v87.060949H0zM867.290292 469.462564h260.461873v87.060949H867.290292z" p-id="14734"></path><path d="M953.739093 670.845422H620.377278V355.140656h333.361815z m-246.300866-87.060949h159.239917V442.201605H707.438227z" p-id="14735"></path></svg>
--- a/src/icons/svg/dashboard.svg
+++ b/src/icons/svg/dashboard.svg
@ -0,0 +1 @@
+<svg width="128" height="100" xmlns="http://www.w3.org/2000/svg"><path d="M27.429 63.638c0-2.508-.893-4.65-2.679-6.424-1.786-1.775-3.94-2.662-6.464-2.662-2.524 0-4.679.887-6.465 2.662-1.785 1.774-2.678 3.916-2.678 6.424 0 2.508.893 4.65 2.678 6.424 1.786 1.775 3.94 2.662 6.465 2.662 2.524 0 4.678-.887 6.464-2.662 1.786-1.775 2.679-3.916 2.679-6.424zm13.714-31.801c0-2.508-.893-4.65-2.679-6.424-1.785-1.775-3.94-2.662-6.464-2.662-2.524 0-4.679.887-6.464 2.662-1.786 1.774-2.679 3.916-2.679 6.424 0 2.508.893 4.65 2.679 6.424 1.785 1.774 3.94 2.662 6.464 2.662 2.524 0 4.679-.888 6.464-2.662 1.786-1.775 2.679-3.916 2.679-6.424zM71.714 65.98l7.215-27.116c.285-1.23.107-2.378-.536-3.443-.643-1.064-1.56-1.762-2.75-2.094-1.19-.33-2.333-.177-3.429.462-1.095.639-1.81 1.573-2.143 2.804l-7.214 27.116c-2.857.237-5.405 1.266-7.643 3.088-2.238 1.822-3.738 4.152-4.5 6.992-.952 3.644-.476 7.098 1.429 10.364 1.905 3.265 4.69 5.37 8.357 6.317 3.667.947 7.143.474 10.429-1.42 3.285-1.892 5.404-4.66 6.357-8.305.762-2.84.619-5.607-.429-8.305-1.047-2.697-2.762-4.85-5.143-6.46zm47.143-2.342c0-2.508-.893-4.65-2.678-6.424-1.786-1.775-3.94-2.662-6.465-2.662-2.524 0-4.678.887-6.464 2.662-1.786 1.774-2.679 3.916-2.679 6.424 0 2.508.893 4.65 2.679 6.424 1.786 1.775 3.94 2.662 6.464 2.662 2.524 0 4.679-.887 6.465-2.662 1.785-1.775 2.678-3.916 2.678-6.424zm-45.714-45.43c0-2.509-.893-4.65-2.679-6.425C68.68 10.01 66.524 9.122 64 9.122c-2.524 0-4.679.887-6.464 2.661-1.786 1.775-2.679 3.916-2.679 6.425 0 2.508.893 4.65 2.679 6.424 1.785 1.774 3.94 2.662 6.464 2.662 2.524 0 4.679-.888 6.464-2.662 1.786-1.775 2.679-3.916 2.679-6.424zm32 13.629c0-2.508-.893-4.65-2.679-6.424-1.785-1.775-3.94-2.662-6.464-2.662-2.524 0-4.679.887-6.464 2.662-1.786 1.774-2.679 3.916-2.679 6.424 0 2.508.893 4.65 2.679 6.424 1.785 1.774 3.94 2.662 6.464 2.662 2.524 0 4.679-.888 6.464-2.662 1.786-1.775 2.679-3.916 2.679-6.424zM128 63.638c0 12.351-3.357 23.78-10.071 34.286-.905 1.372-2.19 2.058-3.858 2.058H13.93c-1.667 0-2.953-.686-3.858-2.058C3.357 87.465 0 76.037 0 63.638c0-8.613 1.69-16.847 5.071-24.703C8.452 31.08 13 24.312 18.714 18.634c5.715-5.68 12.524-10.199 20.429-13.559C47.048 1.715 55.333.035 64 .035c8.667 0 16.952 1.68 24.857 5.04 7.905 3.36 14.714 7.88 20.429 13.559 5.714 5.678 10.262 12.446 13.643 20.301 3.38 7.856 5.071 16.09 5.071 24.703z"/></svg>
--- a/src/icons/svg/depart.svg
+++ b/src/icons/svg/depart.svg
@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1575440598679" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="873" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M870.4 616.96V512c0-15.36-12.8-25.6-25.6-25.6H537.6v-102.4h179.2c15.36 0 25.6-10.24 25.6-25.6V128c0-15.36-10.24-25.6-25.6-25.6H307.2c-15.36 0-25.6 10.24-25.6 25.6v230.4c0 15.36 10.24 25.6 25.6 25.6h179.2v102.4H179.2c-12.8 0-25.6 10.24-25.6 25.6v104.96c-58.88 12.8-102.4 64-102.4 125.44 0 71.68 56.32 128 128 128s128-56.32 128-128c0-61.44-43.52-112.64-102.4-125.44V537.6h281.6v130.56c-58.88 12.8-102.4 64-102.4 125.44 0 71.68 56.32 128 128 128s128-56.32 128-128c0-61.44-43.52-112.64-102.4-125.44V537.6h281.6v79.36c-58.88 12.8-102.4 64-102.4 125.44 0 71.68 56.32 128 128 128s128-56.32 128-128c0-61.44-43.52-112.64-102.4-125.44zM332.8 153.6h358.4v179.2H332.8V153.6z m-76.8 588.8c0 40.96-33.28 76.8-76.8 76.8s-76.8-35.84-76.8-76.8c0-33.28 20.48-61.44 51.2-71.68 5.12-2.56 7.68-2.56 12.8-2.56h25.6c5.12 0 7.68 2.56 12.8 2.56 30.72 10.24 51.2 38.4 51.2 71.68z m332.8 51.2c0 40.96-33.28 76.8-76.8 76.8s-76.8-35.84-76.8-76.8c0-43.52 33.28-76.8 76.8-76.8s76.8 33.28 76.8 76.8z m256 25.6c-43.52 0-76.8-35.84-76.8-76.8 0-33.28 20.48-61.44 51.2-71.68h51.2c30.72 10.24 51.2 38.4 51.2 71.68 0 40.96-33.28 76.8-76.8 76.8z" p-id="874"></path></svg>
--- a/src/icons/svg/example.svg
+++ b/src/icons/svg/example.svg
@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M96.258 57.462h31.421C124.794 27.323 100.426 2.956 70.287.07v31.422a32.856 32.856 0 0 1 25.971 25.97zm-38.796-25.97V.07C27.323 2.956 2.956 27.323.07 57.462h31.422a32.856 32.856 0 0 1 25.97-25.97zm12.825 64.766v31.421c30.46-2.885 54.507-27.253 57.713-57.712H96.579c-2.886 13.466-13.146 23.726-26.292 26.291zM31.492 70.287H.07c2.886 30.46 27.253 54.507 57.713 57.713V96.579c-13.466-2.886-23.726-13.146-26.291-26.292z"/></svg>
--- a/src/icons/svg/eye-open.svg
+++ b/src/icons/svg/eye-open.svg
@ -0,0 +1 @@
+<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="128" height="128"><defs><style/></defs><path d="M512 128q69.675 0 135.51 21.163t115.498 54.997 93.483 74.837 73.685 82.006 51.67 74.837 32.17 54.827L1024 512q-2.347 4.992-6.315 13.483T998.87 560.17t-31.658 51.669-44.331 59.99-56.832 64.34-69.504 60.16-82.347 51.5-94.848 34.687T512 896q-69.675 0-135.51-21.163t-115.498-54.826-93.483-74.326-73.685-81.493-51.67-74.496-32.17-54.997L0 513.707q2.347-4.992 6.315-13.483t18.816-34.816 31.658-51.84 44.331-60.33 56.832-64.683 69.504-60.331 82.347-51.84 94.848-34.816T512 128.085zm0 85.333q-46.677 0-91.648 12.331t-81.152 31.83-70.656 47.146-59.648 54.485-48.853 57.686-37.675 52.821-26.325 43.99q12.33 21.674 26.325 43.52t37.675 52.351 48.853 57.003 59.648 53.845T339.2 767.02t81.152 31.488T512 810.667t91.648-12.331 81.152-31.659 70.656-46.848 59.648-54.186 48.853-57.344 37.675-52.651T927.957 512q-12.33-21.675-26.325-43.648t-37.675-52.65-48.853-57.345-59.648-54.186-70.656-46.848-81.152-31.659T512 213.334zm0 128q70.656 0 120.661 50.006T682.667 512 632.66 632.661 512 682.667 391.339 632.66 341.333 512t50.006-120.661T512 341.333zm0 85.334q-35.328 0-60.33 25.002T426.666 512t25.002 60.33T512 597.334t60.33-25.002T597.334 512t-25.002-60.33T512 426.666z"/></svg>
--- a/src/icons/svg/eye.svg
+++ b/src/icons/svg/eye.svg
@ -0,0 +1 @@
+<svg width="128" height="64" xmlns="http://www.w3.org/2000/svg"><path d="M127.072 7.994c1.37-2.208.914-5.152-.914-6.87-2.056-1.717-4.797-1.226-6.396.982-.229.245-25.586 32.382-55.74 32.382-29.24 0-55.74-32.382-55.968-32.627-1.6-1.963-4.57-2.208-6.397-.49C-.17 3.086-.399 6.275 1.2 8.238c.457.736 5.94 7.36 14.62 14.72L4.17 35.96c-1.828 1.963-1.6 5.152.228 6.87.457.98 1.6 1.471 2.742 1.471s2.284-.49 3.198-1.472l12.564-13.983c5.94 4.416 13.021 8.587 20.788 11.53l-4.797 17.418c-.685 2.699.686 5.397 3.198 6.133h1.37c2.057 0 3.884-1.472 4.341-3.68L52.6 42.83c3.655.736 7.538 1.227 11.422 1.227 3.883 0 7.767-.49 11.422-1.227l4.797 17.173c.457 2.208 2.513 3.68 4.34 3.68.457 0 .914 0 1.143-.246 2.513-.736 3.883-3.434 3.198-6.133l-4.797-17.172c7.767-2.944 14.848-7.114 20.788-11.53l12.336 13.738c.913.981 2.056 1.472 3.198 1.472s2.284-.49 3.198-1.472c1.828-1.963 1.828-4.906.228-6.87l-11.65-13.001c9.366-7.36 14.849-14.474 14.849-14.474z"/></svg>
--- a/src/icons/svg/form.svg
+++ b/src/icons/svg/form.svg
@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M84.068 23.784c-1.02 0-1.877-.32-2.572-.96a8.588 8.588 0 0 1-1.738-2.237 11.524 11.524 0 0 1-1.042-2.621c-.232-.895-.348-1.641-.348-2.238V0h.278c.834 0 1.622.085 2.363.256.742.17 1.645.575 2.711 1.214 1.066.64 2.363 1.535 3.892 2.686 1.53 1.15 3.453 2.664 5.77 4.54 2.502 2.045 4.494 3.771 5.977 5.178 1.483 1.406 2.618 2.6 3.406 3.58.787.98 1.274 1.812 1.46 2.494.185.682.277 1.278.277 1.79v2.046H84.068zM127.3 84.01c.278.682.464 1.535.556 2.558.093 1.023-.37 2.003-1.39 2.94-.463.427-.88.832-1.25 1.215-.372.384-.696.704-.974.96a6.69 6.69 0 0 1-.973.767l-11.816-10.741a44.331 44.331 0 0 0 1.877-1.535 31.028 31.028 0 0 1 1.737-1.406c1.112-.938 2.317-1.343 3.615-1.215 1.297.128 2.363.405 3.197.83.927.427 1.923 1.173 2.989 2.239 1.065 1.065 1.876 2.195 2.432 3.388zM78.23 95.902c2.038 0 3.752-.511 5.143-1.534l-26.969 25.83H18.037c-1.761 0-3.684-.47-5.77-1.407a24.549 24.549 0 0 1-5.838-3.709 21.373 21.373 0 0 1-4.518-5.306c-1.204-2.003-1.807-4.07-1.807-6.202V16.495c0-1.79.44-3.665 1.32-5.626A18.41 18.41 0 0 1 5.04 5.562a21.798 21.798 0 0 1 5.213-3.964C12.198.533 14.237 0 16.37 0h53.24v15.984c0 1.62.278 3.367.834 5.242a16.704 16.704 0 0 0 2.572 5.179c1.159 1.577 2.665 2.898 4.518 3.964 1.853 1.066 4.078 1.598 6.673 1.598h20.295v42.325L85.458 92.45c1.02-1.364 1.529-2.856 1.529-4.476 0-2.216-.857-4.113-2.572-5.69-1.714-1.577-3.776-2.366-6.186-2.366H26.1c-2.409 0-4.448.789-6.116 2.366-1.668 1.577-2.502 3.474-2.502 5.69 0 2.217.834 4.092 2.502 5.626 1.668 1.535 3.707 2.302 6.117 2.302h52.13zM26.1 47.951c-2.41 0-4.449.789-6.117 2.366-1.668 1.577-2.502 3.473-2.502 5.69 0 2.216.834 4.092 2.502 5.626 1.668 1.534 3.707 2.302 6.117 2.302h52.13c2.409 0 4.47-.768 6.185-2.302 1.715-1.534 2.572-3.41 2.572-5.626 0-2.217-.857-4.113-2.572-5.69-1.714-1.577-3.776-2.366-6.186-2.366H26.1zm52.407 64.063l1.807-1.663 3.476-3.196a479.75 479.75 0 0 0 4.587-4.284 500.757 500.757 0 0 1 5.004-4.667c3.985-3.666 8.48-7.758 13.485-12.276l11.677 10.741-13.485 12.404-5.004 4.603-4.587 4.22a179.46 179.46 0 0 0-3.267 3.068c-.88.853-1.367 1.322-1.46 1.407-.463.341-.973.703-1.529 1.087-.556.383-1.112.703-1.668.959-.556.256-1.413.575-2.572.959a83.5 83.5 0 0 1-3.545 1.087 72.2 72.2 0 0 1-3.475.895c-1.112.256-1.946.426-2.502.511-1.112.17-1.854.043-2.224-.383-.371-.426-.464-1.151-.278-2.174.092-.511.278-1.279.556-2.302.278-1.023.602-2.067.973-3.132l1.042-3.005c.325-.938.58-1.577.765-1.918a10.157 10.157 0 0 1 2.224-2.941z"/></svg>
--- a/src/icons/svg/github.svg
+++ b/src/icons/svg/github.svg
@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1575535656964" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11483" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css"></style></defs><path d="M512.465 98.744c-236.05-2.401-429.41 187.034-431.998 423.242 0.894 183.912 120.176 346.283 295.332 402.018 21.6 3.93 29.451-9.04 29.451-20.436v-71.916c-120.17 25.545-145.7-56.59-145.7-56.59a112.364 112.364 0 0 0-47.914-62.089c-39.272-25.937 3.141-25.545 3.141-25.545a90.702 90.702 0 0 1 65.978 43.624c25.358 43.993 81.26 59.548 125.678 34.976a91.569 91.569 0 0 1 27.487-56.59c-95.825-10.615-196.36-46.768-196.36-209.067a163.13 163.13 0 0 1 43.591-114.358 148.652 148.652 0 0 1 4.32-111.609c15.896-35.223 36.525-11.397 117.815 43.229a419.24 419.24 0 0 1 216.002 0c82.471-54.626 117.82-43.229 117.82-43.229a148.657 148.657 0 0 1 4.32 111.61 163.145 163.145 0 0 1 45.945 113.57c0 162.695-101.321 198.458-196.36 209.067a98.273 98.273 0 0 1 29.452 78.594v115.933c0 13.752 7.856 24.756 29.457 20.43 174.63-56.071 293.466-218.106 294.545-401.622C941.878 285.778 748.52 96.343 512.465 98.744" fill="#231F20" p-id="11484"></path></svg>
--- a/src/icons/svg/link.svg
+++ b/src/icons/svg/link.svg
@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M115.625 127.937H.063V12.375h57.781v12.374H12.438v90.813h90.813V70.156h12.374z"/><path d="M116.426 2.821l8.753 8.753-56.734 56.734-8.753-8.745z"/><path d="M127.893 37.982h-12.375V12.375H88.706V0h39.187z"/></svg>
--- a/src/icons/svg/log.svg
+++ b/src/icons/svg/log.svg
@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1576046410608" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14223" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css"></style></defs><path d="M960.3232 933.072H750.19306667c-15.088 0-27.31733333-12.2304-27.31733334-27.31946667V316.40213333c0-4.45226667 1.088-8.83733333 3.168-12.77333333l105.06666667-198.63786667a27.3184 27.3184 0 0 1 48.29653333 0l105.06666667 198.63786667a27.3184 27.3184 0 0 1 3.16906667 12.77333333v589.34933334c0 15.09013333-12.2304 27.32053333-27.31946667 27.32053333zM777.51253333 878.432h155.49226667V323.18186667l-77.7472-146.98773334-77.74613333 146.98773334v555.2512z" p-id="14224"></path><path d="M855.2576 376.4768c-2.74133333 0-5.48266667-0.41173333-8.1312-1.23733333l-105.06453333-32.7552c-14.40426667-4.49066667-22.44266667-19.808-17.95093334-34.21226667 4.49173333-14.4064 19.80906667-22.4448 34.21333334-17.94986667l96.9344 30.2208 96.9344-30.2208c14.40213333-4.49066667 29.7216 3.5456 34.21333333 17.94986667s-3.54666667 29.7216-17.94986667 34.21226667l-105.06666666 32.7552a27.34293333 27.34293333 0 0 1-8.13226667 1.23733333zM960.3232 815.2064H750.19306667c-15.088 0-27.31733333-12.2304-27.31733334-27.3184s12.22933333-27.31946667 27.31733334-27.31946667h210.1312c15.088 0 27.3184 12.23146667 27.3184 27.31946667s-12.2304 27.3184-27.31946667 27.3184zM642.94186667 933.072H65.08373333c-15.088 0-27.3184-12.2304-27.3184-27.31946667v-787.98933333c0-15.088 12.23146667-27.3184 27.3184-27.3184h577.85813334c15.08906667 0 27.31946667 12.23146667 27.31946666 27.3184v787.98933333c0 15.08906667-12.2304 27.31946667-27.31946666 27.31946667z m-550.53866667-54.63893333h523.2192V145.08373333H92.40213333V878.432z" p-id="14225"></path><path d="M537.8784 470.4928h-364.01066667c-15.088 0-27.31946667-12.23146667-27.31946666-27.31946667s12.23253333-27.31733333 27.31946666-27.31733333h364.01066667c15.088 0 27.3184 12.2304 27.3184 27.31733333s-12.2304 27.31946667-27.31733333 27.31946667zM537.8784 335.50826667h-364.01066667c-15.088 0-27.31946667-12.23253333-27.31946666-27.31946667s12.23253333-27.3184 27.31946666-27.3184h364.01066667c15.088 0 27.3184 12.23146667 27.3184 27.3184s-12.2304 27.31946667-27.31733333 27.31946667zM537.8784 605.4784h-364.01066667c-15.088 0-27.31946667-12.2304-27.31946666-27.3184s12.23253333-27.31946667 27.31946666-27.31946667h364.01066667c15.088 0 27.3184 12.2304 27.3184 27.31946667s-12.2304 27.31733333-27.31733333 27.31733333zM537.8784 740.464h-364.01066667c-15.088 0-27.31946667-12.2304-27.31946666-27.3184s12.23253333-27.3184 27.31946666-27.3184h364.01066667c15.088 0 27.3184 12.2304 27.3184 27.31733333s-12.2304 27.31946667-27.31733333 27.31946667z" p-id="14226"></path></svg>
--- a/src/icons/svg/logout.svg
+++ b/src/icons/svg/logout.svg
@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1575535685970" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11745" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css"></style></defs><path d="M959.488 512L704 256.448V448H448v128h256v191.552L959.488 512zM192 192h512V128H128v768h576v-64H192V192z" fill="" p-id="11746"></path></svg>
--- a/src/icons/svg/menu.svg
+++ b/src/icons/svg/menu.svg
@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1575439645160" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1362" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M252.8 591.3h182.1c31.1 0 52.1 21 52.1 52v232.8c0 31-31.1 52-62.2 52H200.7c-31.1 0-51.2-21-51.2-52V643.3c0-31 21-52 52.1-52h51.2z m389.8 0h233.3c31.1 0 52.1 26.5 52.1 57.5v223.7c0 31-24.7 55.7-55.8 55.7H648.1c-31.1 0-57.6-21-57.6-52V643.3c0-31 26.5-51.1 57.6-51.1l-5.5-0.9z m0-440.1h233.3c31.1 0 52.1 18.3 52.1 49.3v234.7c0 31-21 52-52.1 52H642.6c-31.1 0-52.1-21-52.1-52V202.3c-0.1-31 21-51.1 52.1-51.1zM113.8 273.5L273 114.7c22-21.9 57.6-21.9 79.6 0L510 273.6c22 21.9 22 57.5 0 79.4L351.7 511c-22 21.9-57.6 21.9-79.6 0L113.8 352.1c-21.1-22-21.1-57.6 0-78.6z" fill="" p-id="1363"></path></svg>
--- a/src/icons/svg/nested.svg
+++ b/src/icons/svg/nested.svg
@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M.002 9.2c0 5.044 3.58 9.133 7.998 9.133 4.417 0 7.997-4.089 7.997-9.133 0-5.043-3.58-9.132-7.997-9.132S.002 4.157.002 9.2zM31.997.066h95.981V18.33H31.997V.066zm0 45.669c0 5.044 3.58 9.132 7.998 9.132 4.417 0 7.997-4.088 7.997-9.132 0-3.263-1.524-6.278-3.998-7.91-2.475-1.63-5.524-1.63-7.998 0-2.475 1.632-4 4.647-4 7.91zM63.992 36.6h63.986v18.265H63.992V36.6zm-31.995 82.2c0 5.043 3.58 9.132 7.998 9.132 4.417 0 7.997-4.089 7.997-9.132 0-5.044-3.58-9.133-7.997-9.133s-7.998 4.089-7.998 9.133zm31.995-9.131h63.986v18.265H63.992V109.67zm0-27.404c0 5.044 3.58 9.133 7.998 9.133 4.417 0 7.997-4.089 7.997-9.133 0-3.263-1.524-6.277-3.998-7.909-2.475-1.631-5.524-1.631-7.998 0-2.475 1.632-4 4.646-4 7.91zm31.995-9.13h31.991V91.4H95.987V73.135z"/></svg>
--- a/src/icons/svg/password.svg
+++ b/src/icons/svg/password.svg
@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M108.8 44.322H89.6v-5.36c0-9.04-3.308-24.163-25.6-24.163-23.145 0-25.6 16.881-25.6 24.162v5.361H19.2v-5.36C19.2 15.281 36.798 0 64 0c27.202 0 44.8 15.281 44.8 38.961v5.361zm-32 39.356c0-5.44-5.763-9.832-12.8-9.832-7.037 0-12.8 4.392-12.8 9.832 0 3.682 2.567 6.808 6.407 8.477v11.205c0 2.718 2.875 4.962 6.4 4.962 3.524 0 6.4-2.244 6.4-4.962V92.155c3.833-1.669 6.393-4.795 6.393-8.477zM128 64v49.201c0 8.158-8.645 14.799-19.2 14.799H19.2C8.651 128 0 121.359 0 113.201V64c0-8.153 8.645-14.799 19.2-14.799h89.6c10.555 0 19.2 6.646 19.2 14.799z"/></svg>
--- a/src/icons/svg/role.svg
+++ b/src/icons/svg/role.svg
@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1575439660628" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1599" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M365.728131 585.156963a292.562025 292.562025 0 0 0 146.281012-39.495874 300.60748 300.60748 0 0 0 59.975215-45.347113 37.301658 37.301658 0 0 0 21.210747-21.942152 26.330582 26.330582 0 0 1 0-6.582646A266.962848 266.962848 0 0 0 648.78189 365.735444 267.694253 267.694253 0 0 0 658.290156 292.594938a285.247974 285.247974 0 0 0-40.958684-146.281012A292.562025 292.562025 0 1 0 365.728131 585.156963zM627.571143 731.437975a273.545493 273.545493 0 0 0-62.900835-40.958683 286.710784 286.710784 0 0 0-26.330582-11.702481A212.838873 212.838873 0 0 0 512.009143 667.805735 209.913253 209.913253 0 0 0 449.108308 658.297469H281.616549a213.570278 213.570278 0 0 0-62.16943 9.508266 292.562025 292.562025 0 0 0-134.578532 73.140506A292.562025 292.562025 0 0 0 0.0256 950.859494a73.140506 73.140506 0 0 0 73.140506 73.140506h585.12405a73.140506 73.140506 0 0 0 73.140506-73.140506 219.421519 219.421519 0 0 0 0-38.033063A292.562025 292.562025 0 0 0 627.571143 731.437975zM940.61251 597.590849a35.838848 35.838848 0 0 1 33.644633-24.136367H1023.992687v-73.140506h-49.735544a35.838848 35.838848 0 0 1-33.644633-24.136367 136.041342 136.041342 0 0 0-7.314051-18.285127 35.838848 35.838848 0 0 1 6.582646-40.958683l35.107443-35.107443-51.92976-51.92976-34.376038 35.838848a35.838848 35.838848 0 0 1-41.690088 6.582646L828.707535 365.735444a36.570253 36.570253 0 0 1-24.136367-35.838848v-49.004139h-62.900835V292.594938a375.210797 375.210797 0 0 1-32.181823 152.132253 60.70662 60.70662 0 0 1 11.702481-5.851241 25.599177 25.599177 0 0 1 10.239671-5.119835 104.590924 104.590924 0 0 1 36.570253-6.582646 98.739683 98.739683 0 0 1 36.570253 6.582646l10.971076 4.38843a106.785139 106.785139 0 0 1 51.92976 51.198355 64.363645 64.363645 0 0 1 3.657025 10.971076 98.739683 98.739683 0 0 1 6.582645 36.570253 104.590924 104.590924 0 0 1-6.582645 36.570253 42.421494 42.421494 0 0 1-3.657025 10.239671 111.904974 111.904974 0 0 1-51.92976 51.929759 34.376038 34.376038 0 0 1-10.971076 4.38843 98.739683 98.739683 0 0 1-36.570253 6.582646 104.590924 104.590924 0 0 1-36.570253-6.582646 25.599177 25.599177 0 0 1-10.239671-4.38843A111.904974 111.904974 0 0 1 669.261232 585.156963l-4.388431-10.239671A104.590924 104.590924 0 0 1 658.290156 536.884229a38.764468 38.764468 0 0 1 0-9.508266 231.124 231.124 0 0 1-27.793393 32.181823 323.281037 323.281037 0 0 1-38.764468 32.181822 14.628101 14.628101 0 0 1 0 5.851241l7.314051 18.285126a36.570253 36.570253 0 0 1 0 21.210747 386.181873 386.181873 0 0 1 177.000025 155.789278H804.571168v-49.735544a35.107443 35.107443 0 0 1 24.136367-33.644633l18.285127-8.045455a35.838848 35.838848 0 0 1 40.958683 7.31405l35.107443 35.107443 51.92976-51.929759-35.107443-33.644633a35.838848 35.838848 0 0 1-6.582646-40.958683 190.165316 190.165316 0 0 0 7.314051-19.747937z" p-id="1600"></path></svg>
--- a/src/icons/svg/setting.svg
+++ b/src/icons/svg/setting.svg
@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1575534913333" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10472" width="128" height="128" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"></style></defs><path d="M510.8 666.13c-84.8 0-153.8-69-153.8-153.8s69-153.8 153.8-153.8 153.8 69 153.8 153.8-68.99 153.8-153.8 153.8z m0-243.6a89.8 89.8 0 1 0 89.8 89.8 89.91 89.91 0 0 0-89.8-89.8z" fill="#1AD8E2" p-id="10473"></path><path d="M567.31 906.54H449.14a42.78 42.78 0 0 1-42.74-42.74v-36.88a330 330 0 0 1-120.3-70.83L253 775.22a42.78 42.78 0 0 1-58.38-15.65L135.5 657.24a42.79 42.79 0 0 1 15.64-58.38l34.62-20a333.64 333.64 0 0 1 0.7-136.79l-35.32-20.39a42.8 42.8 0 0 1-15.64-58.38L194.59 261A42.79 42.79 0 0 1 253 245.32l35.61 20.56a330.32 330.32 0 0 1 117.79-68.56v-40.58A42.78 42.78 0 0 1 449.14 114h118.17A42.78 42.78 0 0 1 610 156.74v39.07a330.11 330.11 0 0 1 120.63 68.45l32.8-18.93A42.79 42.79 0 0 1 821.86 261l59.08 102.34a42.79 42.79 0 0 1-15.64 58.38l-31.21 18a333.7 333.7 0 0 1 0.71 141.54l30.5 17.61a42.76 42.76 0 0 1 15.64 58.38l-59.08 102.32a42.75 42.75 0 0 1-58.38 15.65l-30.3-17.49A329.58 329.58 0 0 1 610 828.43v35.37a42.78 42.78 0 0 1-42.69 42.74z m-96.91-64H546v-64l24.82-5.72a266.37 266.37 0 0 0 134-76.91l17.36-18.36 54.79 31.63 37.82-65.51L760.05 612l7.11-24.16a269 269 0 0 0-0.83-154.23l-7.47-24.36 56-32.35-37.82-65.51-56.82 32.81-17.37-18a266.5 266.5 0 0 0-132-74.79L546 245.72V178h-75.6v68.41l-24.32 6a266.83 266.83 0 0 0-129.38 75.34L299.34 346l-60-34.62-37.82 65.51 59.78 34.52-7.21 24.22a269.14 269.14 0 0 0-0.84 150.17l6.87 24-58.6 33.83 37.82 65.51 58-33.47 17.36 18.65a266.63 266.63 0 0 0 131.38 77.48l24.32 6z" fill="#2C77E5" p-id="10474"></path></svg>
--- a/src/icons/svg/settings.svg
+++ b/src/icons/svg/settings.svg
@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1575439588478" class="icon" viewBox="0 0 1031 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1122" xmlns:xlink="http://www.w3.org/1999/xlink" width="201.3671875" height="200"><defs><style type="text/css"></style></defs><path d="M947.375 804.68h-393.3c-9.517-47.678-51.075-83.632-100.822-83.632-49.815 0-91.372 35.955-100.912 83.632h-269.752c-11.363 0-20.587 9.36-20.587 20.925s9.225 20.925 20.587 20.925h269.73c9.54 47.678 51.097 83.632 100.912 83.632 49.77 0 91.327-35.955 100.822-83.632h393.3c11.363 0 20.587-9.36 20.587-20.925s-9.202-20.925-20.565-20.925M453.23 888.267c-34.133 0-61.807-28.035-61.807-62.663s27.675-62.708 61.807-62.708c34.087 0 61.74 28.080 61.74 62.708s-27.652 62.663-61.74 62.663M82.587 219.298h105.030c9.54 47.722 51.053 83.632 100.845 83.632s91.327-35.932 100.867-83.632h558.023c11.363 0 20.587-9.337 20.587-20.903 0-11.543-9.225-20.925-20.587-20.925h-558c-9.54-47.678-51.053-83.61-100.867-83.61s-91.305 35.955-100.845 83.632h-105.053c-11.363 0-20.587 9.382-20.587 20.925 0 11.565 9.225 20.88 20.587 20.88M288.485 135.687c34.11 0 61.762 28.103 61.762 62.73s-27.653 62.708-61.762 62.708c-34.133 0-61.785-28.080-61.785-62.708 0-34.627 27.675-62.73 61.785-62.73M947.375 491.098h-63.877c-9.54-47.722-51.053-83.655-100.845-83.655s-91.35 35.933-100.868 83.655h-599.197c-11.363 0-20.587 9.338-20.587 20.88 0 11.565 9.225 20.925 20.587 20.925h599.175c9.54 47.7 51.075 83.633 100.867 83.633s91.328-35.955 100.845-83.633h63.877c11.363 0 20.587-9.36 20.587-20.925 0.023-11.543-9.202-20.88-20.565-20.88M782.653 574.708c-34.155 0-61.762-28.080-61.762-62.73 0-34.627 27.63-62.73 61.762-62.73 34.132 0 61.762 28.102 61.762 62.73 0 34.65-27.652 62.73-61.762 62.73z" p-id="1123"></path></svg>
--- a/src/icons/svg/table.svg
+++ b/src/icons/svg/table.svg
@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M.006.064h127.988v31.104H.006V.064zm0 38.016h38.396v41.472H.006V38.08zm0 48.384h38.396v41.472H.006V86.464zM44.802 38.08h38.396v41.472H44.802V38.08zm0 48.384h38.396v41.472H44.802V86.464zM89.598 38.08h38.396v41.472H89.598zm0 48.384h38.396v41.472H89.598z"/><path d="M.006.064h127.988v31.104H.006V.064zm0 38.016h38.396v41.472H.006V38.08zm0 48.384h38.396v41.472H.006V86.464zM44.802 38.08h38.396v41.472H44.802V38.08zm0 48.384h38.396v41.472H44.802V86.464zM89.598 38.08h38.396v41.472H89.598zm0 48.384h38.396v41.472H89.598z"/></svg>
--- a/src/icons/svg/tree.svg
+++ b/src/icons/svg/tree.svg
@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M126.713 90.023c.858.985 1.287 2.134 1.287 3.447v29.553c0 1.423-.429 2.6-1.287 3.53-.858.93-1.907 1.395-3.146 1.395H97.824c-1.145 0-2.146-.465-3.004-1.395-.858-.93-1.287-2.107-1.287-3.53V93.47c0-.875.19-1.696.572-2.462.382-.766.906-1.368 1.573-1.806a3.84 3.84 0 0 1 2.146-.657h9.725V69.007a3.84 3.84 0 0 0-.43-1.806 3.569 3.569 0 0 0-1.143-1.313 2.714 2.714 0 0 0-1.573-.492h-36.47v23.149h9.725c1.144 0 2.145.492 3.004 1.478.858.985 1.287 2.134 1.287 3.447v29.553c0 .876-.191 1.696-.573 2.463-.38.766-.905 1.368-1.573 1.806a3.84 3.84 0 0 1-2.145.656H51.915a3.84 3.84 0 0 1-2.145-.656c-.668-.438-1.216-1.04-1.645-1.806a4.96 4.96 0 0 1-.644-2.463V93.47c0-1.313.43-2.462 1.288-3.447.858-.986 1.907-1.478 3.146-1.478h9.582v-23.15h-37.9c-.953 0-1.74.356-2.359 1.068-.62.711-.93 1.56-.93 2.544v19.538h9.726c1.239 0 2.264.492 3.074 1.478.81.985 1.216 2.134 1.216 3.447v29.553c0 1.423-.405 2.6-1.216 3.53-.81.93-1.835 1.395-3.074 1.395H4.29c-.476 0-.93-.082-1.358-.246a4.1 4.1 0 0 1-1.144-.657 4.658 4.658 0 0 1-.93-1.067 5.186 5.186 0 0 1-.643-1.395 5.566 5.566 0 0 1-.215-1.56V93.47c0-.437.048-.875.143-1.313a3.95 3.95 0 0 1 .429-1.15c.19-.328.429-.656.715-.984.286-.329.572-.602.858-.821.286-.22.62-.383 1.001-.493.382-.11.763-.164 1.144-.164h9.726V61.619c0-.985.31-1.833.93-2.544.619-.712 1.358-1.068 2.216-1.068h44.335V39.62h-9.582c-1.24 0-2.288-.492-3.146-1.477a5.09 5.09 0 0 1-1.287-3.448V5.14c0-1.423.429-2.627 1.287-3.612.858-.985 1.907-1.477 3.146-1.477h25.743c.763 0 1.478.246 2.145.739a5.17 5.17 0 0 1 1.573 1.888c.382.766.573 1.587.573 2.462v29.553c0 1.313-.43 2.463-1.287 3.448-.859.985-1.86 1.477-3.004 1.477h-9.725v18.389h42.762c.954 0 1.74.355 2.36 1.067.62.711.93 1.56.93 2.545v26.925h9.582c1.239 0 2.288.492 3.146 1.478z"/></svg>
--- a/src/icons/svg/updatepassword.svg
+++ b/src/icons/svg/updatepassword.svg
@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1575535719624" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12503" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css"></style></defs><path d="M506.24 953.6H149.12A83.2 83.2 0 0 1 64 870.4V443.52a83.2 83.2 0 0 1 83.2-82.56h576a82.56 82.56 0 0 1 82.56 82.56v96a32 32 0 0 1-32 32 32.64 32.64 0 0 1-32-32v-96a18.56 18.56 0 0 0-18.56-18.56h-576a18.56 18.56 0 0 0-19.2 18.56v426.88a18.56 18.56 0 0 0 19.2 19.2h359.04a32 32 0 1 1 0 64z" fill="#323333" p-id="12504"></path><path d="M640 419.2a32.64 32.64 0 0 1-32-32V247.68a172.8 172.8 0 0 0-345.6 0v139.52a32.64 32.64 0 0 1-32 32 32 32 0 0 1-32-32V247.68a236.8 236.8 0 0 1 473.6 0v139.52a32 32 0 0 1-32 32z" fill="#323333" p-id="12505"></path><path d="M435.84 622.08m-82.56 0a82.56 82.56 0 1 0 165.12 0 82.56 82.56 0 1 0-165.12 0Z" fill="#323333" p-id="12506"></path><path d="M435.84 803.2a32 32 0 0 1-32-32v-103.04a32 32 0 0 1 32-32 32 32 0 0 1 32 32v103.04a32 32 0 0 1-32 32zM704 1016.96h-8.96a230.4 230.4 0 0 1-85.76-47.36 31.36 31.36 0 0 1-10.88-24.96 30.08 30.08 0 0 1 12.16-24.32 26.24 26.24 0 0 0 10.88-19.84 24.32 24.32 0 0 0-37.12-22.4 32 32 0 0 1-27.52 0 32.64 32.64 0 0 1-17.28-20.48 211.2 211.2 0 0 1-8.96-60.16 259.84 259.84 0 0 1 7.04-55.68 33.28 33.28 0 0 1 41.6-22.4 25.6 25.6 0 0 0 34.56-23.68 26.88 26.88 0 0 0-8.96-18.56 30.08 30.08 0 0 1-10.88-23.68 33.28 33.28 0 0 1 10.24-23.68A232.96 232.96 0 0 1 696.32 576a31.36 31.36 0 0 1 39.04 21.12 24.96 24.96 0 0 0 47.36 0 32.64 32.64 0 0 1 39.68-21.12 234.88 234.88 0 0 1 91.52 51.2 33.28 33.28 0 0 1 10.24 23.68 34.56 34.56 0 0 1-10.88 23.68 26.88 26.88 0 0 0-8.96 18.56 25.6 25.6 0 0 0 25.6 26.24 19.2 19.2 0 0 0 8.32 0 35.2 35.2 0 0 1 25.6 0 32 32 0 0 1 16 20.48 227.2 227.2 0 0 1 7.68 55.68 237.44 237.44 0 0 1-7.68 56.96 33.28 33.28 0 0 1-16 19.84 32.64 32.64 0 0 1-25.6 0 24.96 24.96 0 0 0-33.92 23.04 24.32 24.32 0 0 0 8.32 18.56 31.36 31.36 0 0 1 10.24 23.68 33.28 33.28 0 0 1-10.24 23.68 225.28 225.28 0 0 1-87.68 49.92 31.36 31.36 0 0 1-26.24-3.84 30.72 30.72 0 0 1-14.72-21.76 24.96 24.96 0 0 0-24.32-21.76 25.6 25.6 0 0 0-24.32 21.76 32.64 32.64 0 0 1-14.08 22.4 33.92 33.92 0 0 1-17.28 8.96z m-28.16-78.72l10.24 5.12a87.68 87.68 0 0 1 146.56 0 109.44 109.44 0 0 0 14.72-8.32 90.88 90.88 0 0 1-7.04-35.2 89.6 89.6 0 0 1 82.56-88.96 94.72 94.72 0 0 0 0-13.44 81.92 81.92 0 0 0 0-12.16 90.24 90.24 0 0 1-82.56-89.6 88.32 88.32 0 0 1 7.68-35.84 196.48 196.48 0 0 0-19.84-10.88 93.44 93.44 0 0 1-138.24 0l-20.48 10.88a88.96 88.96 0 0 1 8.32 35.84 90.24 90.24 0 0 1-82.56 89.6 81.92 81.92 0 0 0 0 12.16 85.76 85.76 0 0 0 0 12.8 90.88 90.88 0 0 1 90.24 89.6 81.92 81.92 0 0 1-9.6 38.4z" fill="#323333" p-id="12507"></path><path d="M759.04 879.36a82.56 82.56 0 1 1 82.56-82.56 82.56 82.56 0 0 1-82.56 82.56z m0-101.12a18.56 18.56 0 1 0 18.56 18.56 18.56 18.56 0 0 0-18.56-18.56z" fill="#323333" p-id="12508"></path></svg>
--- a/src/icons/svg/user.svg
+++ b/src/icons/svg/user.svg
@ -0,0 +1 @@
+<svg width="130" height="130" xmlns="http://www.w3.org/2000/svg"><path d="M63.444 64.996c20.633 0 37.359-14.308 37.359-31.953 0-17.649-16.726-31.952-37.359-31.952-20.631 0-37.36 14.303-37.358 31.952 0 17.645 16.727 31.953 37.359 31.953zM80.57 75.65H49.434c-26.652 0-48.26 18.477-48.26 41.27v2.664c0 9.316 21.608 9.325 48.26 9.325H80.57c26.649 0 48.256-.344 48.256-9.325v-2.663c0-22.794-21.605-41.271-48.256-41.271z" stroke="#979797"/></svg>
--- a/src/icons/svg/user_1.svg
+++ b/src/icons/svg/user_1.svg
@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1575439675535" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1835" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M1021.952 523.264V778.24h-58.368c-8.704-23.552-18.944-43.52-31.232-59.392-44.544-58.88-121.856-74.24-189.44-88.576-27.136-5.632-52.736-10.752-73.216-18.432-8.704-3.072-14.848-6.144-18.944-8.704 21.504-23.552 39.936-52.224 53.248-84.48 16.896-39.936 25.6-82.944 25.6-124.928 0-64.512-4.096-137.728-33.28-197.12-12.8-25.6-33.792-54.784-66.56-75.264 15.872-56.32 51.712-94.208 127.488-94.208 119.296 0 137.728 96.768 137.728 213.504 0 60.928-27.136 123.904-67.584 159.232-4.096 3.584-6.144 8.704-6.144 13.824 0 14.336 0.512 33.28 5.632 40.448 33.792 45.568 125.44 46.592 195.072 69.12M89.088 720.384c43.52-61.952 122.88-77.824 193.024-92.16 27.648-5.632 53.248-10.752 73.728-17.92 8.192-3.072 14.336-5.632 18.432-8.192-21.504-23.552-39.424-51.712-52.736-83.456-16.896-39.424-25.6-81.92-26.112-122.88-0.512-54.784 2.56-96.256 9.728-131.072 10.24-50.688 29.184-89.088 57.856-118.272 9.728-9.728 20.48-18.432 31.744-25.088C378.368 64 343.04 26.624 268.8 26.624c-122.88 0-140.288 97.792-139.264 215.04 0.512 59.904 27.648 122.368 67.584 157.696 4.096 3.584 6.144 8.704 6.144 14.336 0 14.336-1.024 33.28-6.144 39.936-32.768 45.056-125.44 46.08-195.584 67.584v256.512h58.368c8.704-22.528 18.432-41.472 29.184-57.344m844.8 254.464c0.512 12.288-9.216 22.528-21.504 22.528H112.64c-12.288 0-22.016-10.24-21.504-22.528 3.072-49.152 13.312-163.328 50.176-216.576 56.32-79.872 241.152-52.224 292.864-123.904 6.144-7.68 6.656-28.672 6.656-45.056 0-6.144-2.56-11.776-7.168-16.384-44.544-39.936-74.24-109.568-75.264-176.64-1.536-131.584 17.92-241.152 154.624-241.152 132.608 0 152.576 108.032 152.576 239.104 0 68.608-30.208 138.752-74.752 178.688-4.096 4.096-7.168 9.728-7.168 15.872-0.512 16.384 0.512 37.888 6.144 45.568 52.736 71.168 231.936 45.568 291.328 123.904 39.936 51.712 49.664 167.424 52.736 216.576z" p-id="1836"></path></svg>
--- a/src/icons/svg/welcome.svg
+++ b/src/icons/svg/welcome.svg
@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1575516867324" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2034" width="128" height="128" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"></style></defs><path d="M840.834 64.951c66.098 0 119.471 50.204 119.44 112.112V848.84c0 62.02-53.462 112.112-119.44 112.112H183.715c-66.096 0-119.44-50.205-119.44-112.14V177.063c0-62.02 53.463-112.112 119.44-112.112h657.12z m55.44 749.797v-603.62c0-45.367-39.67-82.177-88.851-82.177H217.126c-49.093 0-88.851 37.056-88.851 82.177v603.62c0 45.394 39.67 82.203 88.851 82.203h590.297c49.064 0 88.852-37.056 88.852-82.203zM366.275 474h164a8 8 0 0 0 8-8V348.951c0-17.673 14.327-32 32-32 17.674 0 32 14.327 32 32v328c0 17.673-14.326 32-32 32-17.673 0-32-14.327-32-32V546a8 8 0 0 0-8-8h-164a8 8 0 0 0-8 8v130.951c0 17.673-14.326 32-32 32-17.673 0-32-14.327-32-32v-328c0-17.673 14.327-32 32-32 17.674 0 32 14.327 32 32V466a8 8 0 0 0 8 8z m332-45.049c17.674 0 32 14.327 32 32v216c0 17.673-14.326 32-32 32-17.673 0-32-14.327-32-32v-216c0-17.673 14.327-32 32-32z m0-112c17.674 0 32 14.327 32 32v24c0 17.673-14.326 32-32 32-17.673 0-32-14.327-32-32v-24c0-17.673 14.327-32 32-32z" p-id="2035"></path></svg>
--- a/src/icons/svgo.yml
+++ b/src/icons/svgo.yml
@ -0,0 +1,22 @@
+# replace default config
+
+# multipass: true
+# full: true
+
+plugins:
+
+  # - name
+  #
+  # or:
+  # - name: false
+  # - name: true
+  #
+  # or:
+  # - name:
+  #     param1: 1
+  #     param2: 2
+
+- removeAttrs:
+    attrs:
+      - 'fill'
+      - 'fill-rule'
--- a/src/layout/components/AppMain.vue
+++ b/src/layout/components/AppMain.vue
@ -0,0 +1,40 @@
+<template>
+  <section class="app-main">
+    <transition name="fade-transform" mode="out-in">
+      <router-view :key="key" />
+    </transition>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'AppMain',
+  computed: {
+    key() {
+      return this.$route.path
+    }
+  }
+}
+</script>
+
+<style scoped>
+.app-main {
+  /*50 = navbar  */
+  min-height: calc(100vh - 50px);
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+}
+.fixed-header+.app-main {
+  padding-top: 50px;
+}
+</style>
+
+<style lang="scss">
+// fix css style bug in open el-dialog
+.el-popup-parent--hidden {
+  .fixed-header {
+    padding-right: 15px;
+  }
+}
+</style>
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@ -0,0 +1,226 @@
+<template>
+  <div class="navbar">
+    <hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
+
+    <breadcrumb class="breadcrumb-container" />
+    <div class="right-menu">
+      <el-dropdown class="avatar-container" trigger="hover">
+        <div class="avatar-wrapper">
+          <div class="user-avatar">
+            <svg-icon style="font-size:40px;" icon-class="setting" />
+          </div>
+        </div>
+        <el-dropdown-menu slot="dropdown" class="user-dropdown">
+          <a target="_blank" href="https://github.com/goflyfox/gmanager-web">
+            <el-dropdown-item>
+              <svg-icon icon-class="github" />
+              Github
+            </el-dropdown-item>
+          </a>
+          <el-dropdown-item divided>
+            <span style="display:block;" @click="updatepwd">
+              <svg-icon icon-class="updatepassword" />
+              修改密码
+            </span>
+          </el-dropdown-item>
+          <el-dropdown-item divided>
+            <span style="display:block;" @click="logout">
+              <svg-icon icon-class="logout" />
+              退出登录
+            </span>
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
+    </div>
+    <el-dialog title="修改密码" :visible.sync="dialogFormVisible" width="500px" @close="closeDialog">
+      <el-form ref="form" :model="form" :rules="formrule">
+        <el-form-item label="原密码" :label-width="formLabelWidth" prop="password">
+          <el-input v-model="form.password" type="password" placeholder="原密码" autocomplete="off" />
+        </el-form-item>
+        <el-form-item label="新密码" :label-width="formLabelWidth" prop="newPassword">
+          <el-input v-model="form.newPassword" type="password" placeholder="新密码" autocomplete="off" />
+        </el-form-item>
+        <el-form-item label="确认新密码" :label-width="formLabelWidth" prop="confirmPassword">
+          <el-input
+            v-model="form.confirmPassword"
+            type="password"
+            placeholder="再次输入新密码"
+            autocomplete="off"
+          />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button size="mini" @click="dialogFormVisible = false">取 消</el-button>
+        <el-button type="primary" size="mini" @click="savePassword">修 改</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import MD5 from 'js-md5'
+import { changePwd } from '@/api/user'
+import Breadcrumb from '@/components/Breadcrumb'
+import Hamburger from '@/components/Hamburger'
+
+export default {
+  components: {
+    Breadcrumb,
+    Hamburger
+  },
+  data() {
+    const validatePass = (rule, value, callback) => {
+      if (value === '') {
+        callback(new Error('请再次输入密码'))
+      } else if (value !== this.form.newPassword) {
+        callback(new Error('两次输入密码不一致!'))
+      } else {
+        callback()
+      }
+    }
+    return {
+      dialogFormVisible: false,
+      formLabelWidth: '100px',
+      form: {
+        username: '',
+        password: '',
+        newPassword: '',
+        confirmPassword: ''
+      },
+      formrule: {
+        password: [
+          { required: true, message: '请输入原密码', trigger: 'blur' }
+        ],
+        newPassword: [
+          { required: true, message: '请输入新密码', trigger: 'blur' },
+          {
+            min: 6,
+            max: 10,
+            message: '长度在 6 到 10 个字符',
+            trigger: 'blur'
+          }
+        ],
+        confirmPassword: [
+          { required: true, validator: validatePass, trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar',
+      'avatar'
+    ])
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('app/toggleSideBar')
+    },
+    // 修改密码
+    updatepwd() {
+      this.dialogFormVisible = true
+    },
+    savePassword() {
+      this.$refs['form'].validate(valid => {
+        if (valid) {
+          const postdata = {
+            password: MD5(this.form.password),
+            newPassword: MD5(this.form.newPassword)
+          }
+          console.log(postdata, 'MD5')
+          changePwd({ ...postdata }).then(response => {
+            if (response.code === 0) {
+              // 修改密码成功后，退出当前登录，跳转到登录页
+              this.$message({
+                type: 'success',
+                message: '密码修改成功',
+                duration: 1000
+              })
+              const then = this
+              setTimeout(function() {
+                then.logout()
+              }, 1000)
+            } else {
+              this.$message({
+                type: 'info',
+                message: response.data.msg
+              })
+            }
+          })
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
+    },
+    closeDialog() {
+      this.$refs['form'].resetFields()
+    },
+    async logout() {
+      await this.$store.dispatch('user/logout')
+      this.$router.push(`/login?redirect=${this.$route.fullPath}`)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.navbar {
+  height: 50px;
+  overflow: hidden;
+  position: relative;
+  background: #fff;
+  box-shadow: 0 1px 4px rgba(0,21,41,.08);
+
+  .hamburger-container {
+    line-height: 46px;
+    height: 100%;
+    float: left;
+    cursor: pointer;
+    transition: background .3s;
+    -webkit-tap-highlight-color:transparent;
+
+    &:hover {
+      background: rgba(0, 0, 0, .025)
+    }
+  }
+
+  .breadcrumb-container {
+    float: left;
+  }
+
+  .right-menu {
+    float: right;
+    height: 100%;
+    line-height: 50px;
+
+    &:focus {
+      outline: none;
+    }
+    .avatar-container {
+      margin-right: 30px;
+      .avatar-wrapper {
+        padding-top: 5px;
+        position: relative;
+        .user-avatar {
+          cursor: pointer;
+          width: 40px;
+          height: 50px;
+          border-radius: 10px;
+        }
+        .el-icon-caret-bottom {
+          cursor: pointer;
+          position: absolute;
+          right: -20px;
+          top: 25px;
+          font-size: 12px;
+        }
+      }
+      .avatar-wrapper:hover {
+         background-color:#c6c6c6;
+        }
+    }
+  }
+}
+</style>
--- a/src/layout/components/Sidebar/FixiOSBug.js
+++ b/src/layout/components/Sidebar/FixiOSBug.js
@ -0,0 +1,26 @@
+export default {
+  computed: {
+    device() {
+      return this.$store.state.app.device
+    }
+  },
+  mounted() {
+    // In order to fix the click on menu on the ios device will trigger the mouseleave bug
+    // https://github.com/PanJiaChen/vue-element-admin/issues/1135
+    this.fixBugIniOS()
+  },
+  methods: {
+    fixBugIniOS() {
+      const $subMenu = this.$refs.subMenu
+      if ($subMenu) {
+        const handleMouseleave = $subMenu.handleMouseleave
+        $subMenu.handleMouseleave = (e) => {
+          if (this.device === 'mobile') {
+            return
+          }
+          handleMouseleave(e)
+        }
+      }
+    }
+  }
+}
--- a/src/layout/components/Sidebar/Item.vue
+++ b/src/layout/components/Sidebar/Item.vue
@ -0,0 +1,29 @@
+<script>
+export default {
+  name: 'MenuItem',
+  functional: true,
+  props: {
+    icon: {
+      type: String,
+      default: ''
+    },
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+  render(h, context) {
+    const { icon, title } = context.props
+    const vnodes = []
+
+    if (icon) {
+      vnodes.push(<svg-icon style='font-size:20px' icon-class={icon}/>)
+    }
+
+    if (title) {
+      vnodes.push(<span slot='title'>{(title)}</span>)
+    }
+    return vnodes
+  }
+}
+</script>
--- a/src/layout/components/Sidebar/Link.vue
+++ b/src/layout/components/Sidebar/Link.vue
@ -0,0 +1,36 @@
+
+<template>
+  <!-- eslint-disable vue/require-component-is -->
+  <component v-bind="linkProps(to)">
+    <slot />
+  </component>
+</template>
+
+<script>
+import { isExternal } from '@/utils/validate'
+
+export default {
+  props: {
+    to: {
+      type: String,
+      required: true
+    }
+  },
+  methods: {
+    linkProps(url) {
+      if (isExternal(url)) {
+        return {
+          is: 'a',
+          href: url,
+          target: '_blank',
+          rel: 'noopener'
+        }
+      }
+      return {
+        is: 'router-link',
+        to: url
+      }
+    }
+  }
+}
+</script>
--- a/src/layout/components/Sidebar/Logo.vue
+++ b/src/layout/components/Sidebar/Logo.vue
@ -0,0 +1,82 @@
+<template>
+  <div class="sidebar-logo-container" :class="{'collapse':collapse}">
+    <transition name="sidebarLogoFade">
+      <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
+        <img v-if="logo" :src="logo" class="sidebar-logo">
+        <h1 v-else class="sidebar-title">{{ title }} </h1>
+      </router-link>
+      <router-link v-else key="expand" class="sidebar-logo-link" to="/">
+        <img v-if="logo" :src="logo" class="sidebar-logo">
+        <h1 class="sidebar-title">{{ title }} </h1>
+      </router-link>
+    </transition>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SidebarLogo',
+  props: {
+    collapse: {
+      type: Boolean,
+      required: true
+    }
+  },
+  data() {
+    return {
+      title: 'Vue Admin Template',
+      logo: 'https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef5251.png'
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.sidebarLogoFade-enter-active {
+  transition: opacity 1.5s;
+}
+
+.sidebarLogoFade-enter,
+.sidebarLogoFade-leave-to {
+  opacity: 0;
+}
+
+.sidebar-logo-container {
+  position: relative;
+  width: 100%;
+  height: 50px;
+  line-height: 50px;
+  background: #2b2f3a;
+  text-align: center;
+  overflow: hidden;
+
+  & .sidebar-logo-link {
+    height: 100%;
+    width: 100%;
+
+    & .sidebar-logo {
+      width: 32px;
+      height: 32px;
+      vertical-align: middle;
+      margin-right: 12px;
+    }
+
+    & .sidebar-title {
+      display: inline-block;
+      margin: 0;
+      color: #fff;
+      font-weight: 600;
+      line-height: 50px;
+      font-size: 14px;
+      font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
+      vertical-align: middle;
+    }
+  }
+
+  &.collapse {
+    .sidebar-logo {
+      margin-right: 0px;
+    }
+  }
+}
+</style>
--- a/src/layout/components/Sidebar/SidebarItem.vue
+++ b/src/layout/components/Sidebar/SidebarItem.vue
@ -0,0 +1,91 @@
+<template>
+  <div class="menu-wrapper">
+    <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
+      <app-link v-if="onlyOneChild.name" :to="resolvePath(onlyOneChild.url)">
+        <el-menu-item :index="resolvePath(onlyOneChild.url)" :class="{'submenu-title-noDropdown':!isNest}">
+          <item :icon="onlyOneChild.icon||(item.meta&&item.icon)" :title="onlyOneChild.name" />
+        </el-menu-item>
+      </app-link>
+    </template>
+
+    <el-submenu v-else ref="subMenu" :index="resolvePath(item.urlkey)" popper-append-to-body>
+      <template slot="title">
+        <item v-if="item.name" :icon="item.name && item.icon" :title="item.name" />
+      </template>
+      <sidebar-item
+        v-for="child in item.children"
+        :key="child.urlkey"
+        :is-nest="true"
+        :item="child"
+        :base-path="resolvePath(child.url)"
+        class="nest-menu"
+      />
+    </el-submenu>
+  </div>
+</template>
+
+<script>
+import path from 'path'
+import { isExternal } from '@/utils/validate'
+import Item from './Item'
+import AppLink from './Link'
+import FixiOSBug from './FixiOSBug'
+
+export default {
+  name: 'SidebarItem',
+  components: { Item, AppLink },
+  mixins: [FixiOSBug],
+  props: {
+    // route object
+    item: {
+      type: Object,
+      required: true
+    },
+    isNest: {
+      type: Boolean,
+      default: false
+    },
+    basePath: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    // To fix https://github.com/PanJiaChen/vue-admin-template/issues/237
+    // TODO: refactor with render function
+    this.onlyOneChild = null
+    return {}
+  },
+  methods: {
+    hasOneShowingChild(children = [], parent) {
+      const showingChildren = children.filter(item => {
+        this.onlyOneChild = item
+        return true
+        // return false
+      })
+
+      // When there is only one child router, the child router is displayed by default
+      // if (showingChildren.length === 1) {
+      //   return true
+      // }
+
+      // Show parent if there are no child router to display
+      if (showingChildren.length === 0) {
+        this.onlyOneChild = { ... parent, url: '', noShowingChildren: true }
+        return true
+      }
+
+      return false
+    },
+    resolvePath(routePath) {
+      if (isExternal(routePath)) {
+        return routePath
+      }
+      if (isExternal(this.basePath)) {
+        return this.basePath
+      }
+      return path.resolve(this.basePath, routePath)
+    }
+  }
+}
+</script>
--- a/src/layout/components/Sidebar/index.vue
+++ b/src/layout/components/Sidebar/index.vue
@ -0,0 +1,68 @@
+<template>
+  <div :class="{'has-logo':showLogo}">
+    <logo v-if="showLogo" :collapse="isCollapse" />
+    <el-scrollbar wrap-class="scrollbar-wrapper">
+      <el-menu
+        :default-active="activeMenu"
+        :collapse="isCollapse"
+        :background-color="variables.menuBg"
+        :text-color="variables.menuText"
+        :unique-opened="false"
+        :active-text-color="variables.menuActiveText"
+        :collapse-transition="false"
+        mode="vertical"
+      >
+        <sidebar-item v-for="route in routes" :key="route.urlkey" :item="route" :base-path="route.url" />
+      </el-menu>
+    </el-scrollbar>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import { translateDataToTree } from '@/utils'
+import Logo from './Logo'
+import SidebarItem from './SidebarItem'
+import variables from '@/styles/variables.scss'
+import { getUserMenu } from '@/api/user'
+export default {
+  components: { SidebarItem, Logo },
+  data() {
+    return {
+      routes: this.getMenu()
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ]),
+    activeMenu() {
+      const route = this.$route
+      const { meta, path } = route
+      // if set path, the sidebar will highlight the path you set
+      if (meta.activeMenu) {
+        return meta.activeMenu
+      }
+      return path
+    },
+    showLogo() {
+      return this.$store.state.settings.sidebarLogo
+    },
+    variables() {
+      return variables
+    },
+    isCollapse() {
+      return !this.sidebar.opened
+    }
+  },
+  methods: {
+    async getMenu() {
+      return await getUserMenu().then(response => {
+        this.routes = translateDataToTree(response.data)
+      }).catch(error => {
+        console.log(error)
+      })
+    }
+  }
+}
+</script>
--- a/src/layout/components/index.js
+++ b/src/layout/components/index.js
@ -0,0 +1,3 @@
+export { default as Navbar } from './Navbar'
+export { default as Sidebar } from './Sidebar'
+export { default as AppMain } from './AppMain'
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@ -0,0 +1,93 @@
+<template>
+  <div :class="classObj" class="app-wrapper">
+    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
+    <sidebar class="sidebar-container" />
+    <div class="main-container">
+      <div :class="{'fixed-header':fixedHeader}">
+        <navbar />
+      </div>
+      <app-main />
+    </div>
+  </div>
+</template>
+
+<script>
+import { Navbar, Sidebar, AppMain } from './components'
+import ResizeMixin from './mixin/ResizeHandler'
+
+export default {
+  name: 'Layout',
+  components: {
+    Navbar,
+    Sidebar,
+    AppMain
+  },
+  mixins: [ResizeMixin],
+  computed: {
+    sidebar() {
+      return this.$store.state.app.sidebar
+    },
+    device() {
+      return this.$store.state.app.device
+    },
+    fixedHeader() {
+      return this.$store.state.settings.fixedHeader
+    },
+    classObj() {
+      return {
+        hideSidebar: !this.sidebar.opened,
+        openSidebar: this.sidebar.opened,
+        withoutAnimation: this.sidebar.withoutAnimation,
+        mobile: this.device === 'mobile'
+      }
+    }
+  },
+  methods: {
+    handleClickOutside() {
+      this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  @import "~@/styles/mixin.scss";
+  @import "~@/styles/variables.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;
+  }
+
+  .fixed-header {
+    position: fixed;
+    top: 0;
+    right: 0;
+    z-index: 9;
+    width: calc(100% - #{$sideBarWidth});
+    transition: width 0.28s;
+  }
+
+  .hideSidebar .fixed-header {
+    width: calc(100% - 54px)
+  }
+
+  .mobile .fixed-header {
+    width: 100%;
+  }
+</style>
--- a/src/layout/mixin/ResizeHandler.js
+++ b/src/layout/mixin/ResizeHandler.js
@ -0,0 +1,45 @@
+import store from '@/store'
+
+const { body } = document
+const WIDTH = 992 // refer to Bootstrap's responsive design
+
+export default {
+  watch: {
+    $route(route) {
+      if (this.device === 'mobile' && this.sidebar.opened) {
+        store.dispatch('app/closeSideBar', { withoutAnimation: false })
+      }
+    }
+  },
+  beforeMount() {
+    window.addEventListener('resize', this.$_resizeHandler)
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.$_resizeHandler)
+  },
+  mounted() {
+    const isMobile = this.$_isMobile()
+    if (isMobile) {
+      store.dispatch('app/toggleDevice', 'mobile')
+      store.dispatch('app/closeSideBar', { withoutAnimation: true })
+    }
+  },
+  methods: {
+    // use $_ for mixins properties
+    // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
+    $_isMobile() {
+      const rect = body.getBoundingClientRect()
+      return rect.width - 1 < WIDTH
+    },
+    $_resizeHandler() {
+      if (!document.hidden) {
+        const isMobile = this.$_isMobile()
+        store.dispatch('app/toggleDevice', isMobile ? 'mobile' : 'desktop')
+
+        if (isMobile) {
+          store.dispatch('app/closeSideBar', { withoutAnimation: true })
+        }
+      }
+    }
+  }
+}
--- a/src/main.js
+++ b/src/main.js
@ -0,0 +1,43 @@
+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 locale from 'element-ui/lib/locale/lang/zh-CN' // lang i18n
+
+import '@/styles/index.scss' // global css
+
+import App from './App'
+import store from './store'
+import router from './router'
+
+import '@/icons' // icon
+import '@/permission' // permission control
+
+/**
+ * If you don't want to use mock-server
+ * you want to use MockJs for mock api
+ * you can execute: mockXHR()
+ *
+ * Currently MockJs will be used in the production environment,
+ * please remove it before going online! ! !
+ */
+import { mockXHR } from '../mock'
+if (process.env.NODE_ENV === 'production1') {
+  mockXHR()
+}
+
+// set ElementUI lang to EN
+Vue.use(ElementUI, { locale })
+// 如果想要中文版 element-ui，按如下方式声明
+// Vue.use(ElementUI)
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  router,
+  store,
+  render: h => h(App)
+})
--- a/src/permission.js
+++ b/src/permission.js
@ -0,0 +1,64 @@
+import router from './router'
+import store from './store'
+import { Message } from 'element-ui'
+import NProgress from 'nprogress' // progress bar
+import 'nprogress/nprogress.css' // progress bar style
+import { getToken } from '@/utils/auth' // get token from cookie
+import getPageTitle from '@/utils/get-page-title'
+
+NProgress.configure({ showSpinner: false }) // NProgress Configuration
+
+const whiteList = ['/login'] // no redirect whitelist
+
+router.beforeEach(async(to, from, next) => {
+  // start progress bar
+  NProgress.start()
+
+  // set page title
+  document.title = getPageTitle(to.meta.title)
+
+  // determine whether the user has logged in
+  const hasToken = getToken()
+
+  if (hasToken) {
+    if (to.path === '/login') {
+      // if is logged in, redirect to the home page
+      next({ path: '/' })
+      NProgress.done()
+    } else {
+      const hasGetUserInfo = store.getters.name
+      if (hasGetUserInfo) {
+        next()
+      } else {
+        try {
+          // get user info
+          await store.dispatch('user/getInfo')
+
+          next()
+        } catch (error) {
+          // remove token and go to login page to re-login
+          await store.dispatch('user/resetToken')
+          Message.error(error || 'Has Error')
+          next(`/login?redirect=${to.path}`)
+          NProgress.done()
+        }
+      }
+    }
+  } else {
+    /* has no token*/
+
+    if (whiteList.indexOf(to.path) !== -1) {
+      // in the free login whitelist, go directly
+      next()
+    } else {
+      // other pages that do not have permission to access are redirected to the login page.
+      next(`/login?redirect=${to.path}`)
+      NProgress.done()
+    }
+  }
+})
+
+router.afterEach(() => {
+  // finish progress bar
+  NProgress.done()
+})
--- a/src/router/index.js
+++ b/src/router/index.js
@ -0,0 +1,308 @@
+import Vue from 'vue'
+import Router from 'vue-router'
+
+Vue.use(Router)
+
+/* Layout */
+import Layout from '@/layout'
+
+/**
+ * Note: sub-menu only appear when route children.length >= 1
+ * Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
+ *
+ * hidden: true                   if set true, item will not show in the sidebar(default is false)
+ * alwaysShow: true               if set true, will always show the root menu
+ *                                if not set alwaysShow, when item has more than one children route,
+ *                                it will becomes nested mode, otherwise not show the root menu
+ * redirect: noRedirect           if set noRedirect will no redirect in the breadcrumb
+ * name:'router-name'             the name is used by <keep-alive> (must set!!!)
+ * meta : {
+    roles: ['admin','editor']    control the page roles (you can set multiple roles)
+    title: 'title'               the name show in sidebar and breadcrumb (recommend set)
+    icon: 'svg-name'             the icon show in the sidebar
+    breadcrumb: false            if set false, the item will hidden in breadcrumb(default is true)
+    activeMenu: '/example/list'  if set path, the sidebar will highlight the path you set
+  }
+ */
+
+/**
+ * constantRoutes
+ * a base page that does not have permission requirements
+ * all roles can be accessed
+ */
+export const constantRoutes = [
+  {
+    path: '/login',
+    component: () => import('@/views/login/index'),
+    hidden: true
+  },
+
+  {
+    path: '/404',
+    component: () => import('@/views/404'),
+    hidden: true
+  },
+
+  {
+    path: '/',
+    component: Layout,
+    redirect: '/welcome',
+    children: [
+      {
+        path: '/welcome',
+        name: 'Welcome',
+        component: () => import('@/views/dashboard/index'),
+        meta: { title: '欢迎页', icon: 'dashboard' }
+      },
+      {
+        path: 'system/menu/index',
+        name: 'Menu',
+        component: () => import('@/views/sysmanage/menu/index'),
+        meta: { title: '菜单管理', icon: 'link' }
+      },
+      {
+        path: 'system/department/index',
+        name: 'Depart',
+        component: () => import('@/views/sysmanage/depart/index'),
+        meta: { title: '机构管理', icon: 'link' }
+      },
+      {
+        path: 'system/user/index',
+        name: 'User',
+        component: () => import('@/views/sysmanage/user/index'),
+        meta: { title: '用户管理', icon: 'link' }
+      },
+      {
+        path: 'system/role/index',
+        name: 'Role',
+        component: () => import('@/views/sysmanage/role/index'),
+        meta: { title: '角色管理', icon: 'link' }
+      },
+      {
+        path: 'system/log/index',
+        name: 'Log',
+        component: () => import('@/views/sysmanage/syslog/index'),
+        meta: { title: '日志管理', icon: 'link' }
+      },
+      {
+        path: 'system/config/index',
+        name: 'Config',
+        component: () => import('@/views/sysmanage/config/index'),
+        meta: { title: '配置管理', icon: 'link' }
+      },
+      {
+        path: 'system/game/liucun',
+        name: 'liucun',
+        component: () => import('@/views/sysmanage/game/liucun'),
+        meta: { title: 'liucun', icon: 'link' }
+      },
+      {
+        path: 'system/game/payliucun',
+        name: 'payliucun',
+        component: () => import('@/views/sysmanage/game/payliucun'),
+        meta: { title: '付费用户留存', icon: 'link' }
+      },
+      {
+        path: 'system/game/hour',
+        name: 'hour',
+        component: () => import('@/views/sysmanage/game/hour'),
+        meta: { title: '每小时新增人数', icon: 'link' }
+      },
+      {
+        path: 'system/game/hourlogin',
+        name: 'hourlogin',
+        component: () => import('@/views/sysmanage/game/hourlogin'),
+        meta: { title: '每小时登录人数', icon: 'link' }
+      },
+      {
+        path: 'system/game/userinfo',
+        name: 'userinfo',
+        component: () => import('@/views/sysmanage/game/userinfo'),
+        meta: { title: '玩家信息', icon: 'link' }
+      },
+      {
+        path: 'system/game/lv',
+        name: 'lv',
+        component: () => import('@/views/sysmanage/game/lv'),
+        meta: { title: 'lv', icon: 'link' }
+      },
+      {
+        path: 'system/game/vip',
+        name: 'vip',
+        component: () => import('@/views/sysmanage/game/vip'),
+        meta: { title: 'vip分布', icon: 'link' }
+      },
+      {
+        path: 'system/game/serverinfo',
+        name: 'serverinfo',
+        component: () => import('@/views/sysmanage/game/serverinfo'),
+        meta: { title: '服务器信息', icon: 'link' }
+      },
+      {
+        path: 'system/game/serverinfo1',
+        name: 'serverinfo1',
+        component: () => import('@/views/sysmanage/game/serverinfo1'),
+        meta: { title: '服务器信息', icon: 'link' }
+      },
+      {
+        path: 'system/game/whitelist',
+        name: 'whitelist',
+        component: () => import('@/views/sysmanage/game/whitelist'),
+        meta: { title: '白名单信息', icon: 'link' }
+      },
+      {
+        path: 'system/game/blacklist',
+        name: 'blacklist',
+        component: () => import('@/views/sysmanage/game/blacklist'),
+        meta: { title: '黑名单信息', icon: 'link' }
+      },
+      {
+        path: 'system/game/noticeinfo',
+        name: 'noticeinfo',
+        component: () => import('@/views/sysmanage/game/noticeinfo'),
+        meta: { title: '公告管理', icon: 'link' }
+      },
+      {
+        path: 'system/game/rechargestatistics',
+        name: 'rechargestatistics',
+        component: () => import('@/views/sysmanage/game/rechargestatistics'),
+        meta: { title: '整体数据', icon: 'link' }
+      },
+      {
+        path: 'system/game/rechargeflow',
+        name: 'rechargeflow',
+        component: () => import('@/views/sysmanage/game/rechargeflow'),
+        meta: { title: '充值流水', icon: 'link' }
+      },
+      {
+        path: 'system/game/chatinfo',
+        name: 'chatinfo',
+        component: () => import('@/views/sysmanage/game/chatinfo'),
+        meta: { title: '聊天信息', icon: 'link' }
+      },
+      {
+        path: 'system/game/onlinenumber',
+        name: 'onlinenumber',
+        component: () => import('@/views/sysmanage/game/onlinenumber'),
+        meta: { title: '在线人数', icon: 'link' }
+      },
+      {
+        path: 'system/game/newrechargeinfo',
+        name: 'newrechargeinfo',
+        component: () => import('@/views/sysmanage/game/newrechargeinfo'),
+        meta: { title: '新增角色充值信息', icon: 'link' }
+      },
+      {
+        path: 'system/game/ltv',
+        name: 'ltv',
+        component: () => import('@/views/sysmanage/game/ltv'),
+        meta: { title: 'LTV', icon: 'link' }
+      },
+      {
+        path: 'system/game/itemlog',
+        name: 'itemlog',
+        component: () => import('@/views/sysmanage/game/itemlog'),
+        meta: { title: '用户操作记录', icon: 'link' }
+      },
+      {
+        path: 'system/game/sendmsg',
+        name: 'sendmsg',
+        component: () => import('@/views/sysmanage/game/sendmsg'),
+        meta: { title: '跑马灯', icon: 'link' }
+      },
+      {
+        path: 'system/gm/sendmail',
+        name: 'sendmail',
+        component: () => import('@/views/sysmanage/gm/sendmail'),
+        meta: { title: '发送邮件', icon: 'link' }
+      },
+
+      {
+        path: 'system/gm/sendmailxlsx',
+        name: 'sendmailxlsx',
+        component: () => import('@/views/sysmanage/gm/sendmailxlsx'),
+        meta: { title: '通过execl发送邮件', icon: 'link' }
+      },
+      {
+        path: 'system/gm/sendmailall',
+        name: 'sendmailall',
+        component: () => import('@/views/sysmanage/gm/sendmailall'),
+        meta: { title: '全服发送邮件', icon: 'link' }
+      },
+      {
+        path: 'system/gm/rechargeInfo',
+        name: 'rechargeInfo',
+        component: () => import('@/views/sysmanage/gm/rechargeInfo'),
+        meta: { title: '查询用户充值记录', icon: 'link' }
+      },
+      {
+        path: 'system/gm/pay',
+        name: 'pay',
+        component: () => import('@/views/sysmanage/gm/pay'),
+        meta: { title: '充值', icon: 'link' }
+      },
+      {
+        path: 'system/gm/creatcdk',
+        name: 'creatcdk',
+        component: () => import('@/views/sysmanage/gm/creatcdk'),
+        meta: { title: 'creatcdk', icon: 'link' }
+      },
+      {
+        path: 'system/gm/creatcdkcode',
+        name: 'creatcdkcode',
+        component: () => import('@/views/sysmanage/gm/creatcdkcode'),
+        meta: { title: 'creatcdk', icon: 'link' }
+      },
+      {
+        path: 'system/gm/silence',
+        name: 'silence',
+        component: () => import('@/views/sysmanage/gm/silence'),
+        meta: { title: '禁言', icon: 'link' }
+      },
+      {
+        path: 'system/gm/herocomment',
+        name: 'herocomment',
+        component: () => import('@/views/sysmanage/gm/herocomment'),
+        meta: { title: '英雄评论', icon: 'link' }
+      },
+      {
+        path: 'system/gm/herocommentlog',
+        name: 'herocommentlog',
+        component: () => import('@/views/sysmanage/gm/herocommentlog'),
+        meta: { title: '英雄评论操作记录', icon: 'link' }
+      },
+      {
+        path: 'system/game/userItemInfo',
+        name: 'userItemInfo',
+        component: () => import('@/views/sysmanage/game/userItemInfo'),
+        meta: { title: '道具查询', icon: 'link' }
+      },
+      {
+        path: 'system/gm/modifyuseritem',
+        name: 'modifyuseritem',
+        component: () => import('@/views/sysmanage/gm/modifyuseritem'),
+        meta: { title: '修改用户道具', icon: 'link' }
+      }
+    ]
+  },
+
+  // 404 page must be placed at the end !!!
+  { path: '*', redirect: '/404', hidden: true }
+]
+
+const createRouter = () =>
+  new Router({
+    mode: 'history', // require service support
+    scrollBehavior: () => ({ y: 0 }),
+    routes: constantRoutes
+  })
+
+const router = createRouter()
+
+// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
+export function resetRouter() {
+  const newRouter = createRouter()
+  router.matcher = newRouter.matcher // reset router
+}
+
+export default router
--- a/src/settings.js
+++ b/src/settings.js
@ -0,0 +1,26 @@
+module.exports = {
+
+  title: '游戏管理平台',
+
+  /**
+   * 分页参数
+   */
+  pageParams: {
+    pageSizes: [1, 10, 20, 50, 100], // 分页下拉框
+    pageSize: 10, // 分页默认条数
+    currentPage: 1, // 默认页数
+    total: 1 // 默认总条数
+  },
+
+  /**
+   * @type {boolean} true | false
+   * @description Whether fix the header
+   */
+  fixedHeader: false,
+
+  /**
+   * @type {boolean} true | false
+   * @description Whether show the logo in sidebar
+   */
+  sidebarLogo: false
+}
--- a/src/store/getters.js
+++ b/src/store/getters.js
@ -0,0 +1,8 @@
+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
+}
+export default getters
--- a/src/store/index.js
+++ b/src/store/index.js
@ -0,0 +1,19 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+import getters from './getters'
+import app from './modules/app'
+import settings from './modules/settings'
+import user from './modules/user'
+
+Vue.use(Vuex)
+
+const store = new Vuex.Store({
+  modules: {
+    app,
+    settings,
+    user
+  },
+  getters
+})
+
+export default store
--- a/src/store/modules/app.js
+++ b/src/store/modules/app.js
@ -0,0 +1,48 @@
+import Cookies from 'js-cookie'
+
+const state = {
+  sidebar: {
+    opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true,
+    withoutAnimation: false
+  },
+  device: 'desktop'
+}
+
+const mutations = {
+  TOGGLE_SIDEBAR: state => {
+    state.sidebar.opened = !state.sidebar.opened
+    state.sidebar.withoutAnimation = false
+    if (state.sidebar.opened) {
+      Cookies.set('sidebarStatus', 1)
+    } else {
+      Cookies.set('sidebarStatus', 0)
+    }
+  },
+  CLOSE_SIDEBAR: (state, withoutAnimation) => {
+    Cookies.set('sidebarStatus', 0)
+    state.sidebar.opened = false
+    state.sidebar.withoutAnimation = withoutAnimation
+  },
+  TOGGLE_DEVICE: (state, device) => {
+    state.device = device
+  }
+}
+
+const actions = {
+  toggleSideBar({ commit }) {
+    commit('TOGGLE_SIDEBAR')
+  },
+  closeSideBar({ commit }, { withoutAnimation }) {
+    commit('CLOSE_SIDEBAR', withoutAnimation)
+  },
+  toggleDevice({ commit }, device) {
+    commit('TOGGLE_DEVICE', device)
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}
--- a/src/store/modules/settings.js
+++ b/src/store/modules/settings.js
@ -0,0 +1,31 @@
+import defaultSettings from '@/settings'
+
+const { showSettings, fixedHeader, sidebarLogo } = defaultSettings
+
+const state = {
+  showSettings: showSettings,
+  fixedHeader: fixedHeader,
+  sidebarLogo: sidebarLogo
+}
+
+const mutations = {
+  CHANGE_SETTING: (state, { key, value }) => {
+    if (state.hasOwnProperty(key)) {
+      state[key] = value
+    }
+  }
+}
+
+const actions = {
+  changeSetting({ commit }, data) {
+    commit('CHANGE_SETTING', data)
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}
+
--- a/src/store/modules/user.js
+++ b/src/store/modules/user.js
@ -0,0 +1,90 @@
+import { login, logout, getInfo } from '@/api/user'
+import { getToken, setToken, removeToken } from '@/utils/auth'
+import { resetRouter } from '@/router'
+
+const state = {
+  token: getToken(),
+  name: '',
+  avatar: ''
+}
+
+const mutations = {
+  SET_TOKEN: (state, token) => {
+    state.token = token
+  },
+  SET_NAME: (state, name) => {
+    state.name = name
+  },
+  SET_AVATAR: (state, avatar) => {
+    state.avatar = avatar
+  }
+}
+
+const actions = {
+  // user login
+  login({ commit }, userInfo) {
+    const { username, passwd } = userInfo
+    return new Promise((resolve, reject) => {
+      login({ username: username.trim(), passwd: passwd }).then(response => {
+        const { data } = response
+        commit('SET_TOKEN', data.token)
+        setToken(data.token)
+        resolve()
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+
+  // get user info
+  getInfo({ commit, state }) {
+    return new Promise((resolve, reject) => {
+      getInfo(state.token).then(response => {
+        const { data } = response
+
+        if (!data) {
+          reject('Verification failed, please Login again.')
+        }
+
+        const { realName, avatar } = data
+
+        commit('SET_NAME', realName)
+        commit('SET_AVATAR', avatar)
+        resolve(data)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+
+  // user logout
+  logout({ commit, state }) {
+    return new Promise((resolve, reject) => {
+      logout(state.token).then(() => {
+        commit('SET_TOKEN', '')
+        removeToken()
+        resetRouter()
+        resolve()
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+
+  // remove token
+  resetToken({ commit }) {
+    return new Promise(resolve => {
+      commit('SET_TOKEN', '')
+      removeToken()
+      resolve()
+    })
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}
+
--- a/src/styles/element-ui.scss
+++ b/src/styles/element-ui.scss
@ -0,0 +1,49 @@
+// cover some element-ui styles
+
+.el-breadcrumb__inner,
+.el-breadcrumb__inner a {
+  font-weight: 400 !important;
+}
+
+.el-upload {
+  input[type="file"] {
+    display: none !important;
+  }
+}
+
+.el-upload__input {
+  display: none;
+}
+
+
+// to fixed https://github.com/ElemeFE/element/issues/2461
+.el-dialog {
+  transform: none;
+  left: 0;
+  position: relative;
+  margin: 0 auto;
+}
+
+// refine element ui upload
+.upload-container {
+  .el-upload {
+    width: 100%;
+
+    .el-upload-dragger {
+      width: 100%;
+      height: 200px;
+    }
+  }
+}
+
+// dropdown
+.el-dropdown-menu {
+  a {
+    display: block
+  }
+}
+
+// to fix el-date-picker css style
+.el-range-separator {
+  box-sizing: content-box;
+}
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@ -0,0 +1,65 @@
+@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:focus,
+a:active {
+  outline: none;
+}
+
+a,
+a:focus,
+a:hover {
+  cursor: pointer;
+  color: inherit;
+  text-decoration: none;
+}
+
+div:focus {
+  outline: none;
+}
+
+.clearfix {
+  &:after {
+    visibility: hidden;
+    display: block;
+    font-size: 0;
+    content: " ";
+    clear: both;
+    height: 0;
+  }
+}
+
+// main-container global css
+.app-container {
+  padding: 20px;
+}
--- a/src/styles/mixin.scss
+++ b/src/styles/mixin.scss
@ -0,0 +1,28 @@
+@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
@ -0,0 +1,209 @@
+#app {
+
+  .main-container {
+    min-height: 100%;
+    transition: margin-left .28s;
+    margin-left: $sideBarWidth;
+    position: relative;
+  }
+
+  .sidebar-container {
+    transition: width 0.28s;
+    width: $sideBarWidth !important;
+    background-color: $menuBg;
+    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 {
+      overflow-x: hidden !important;
+    }
+
+    .el-scrollbar__bar.is-vertical {
+      right: 0px;
+    }
+
+    .el-scrollbar {
+      height: 100%;
+    }
+
+    &.has-logo {
+      .el-scrollbar {
+        height: calc(100% - 50px);
+      }
+    }
+
+    .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;
+    }
+
+    // menu hover
+    .submenu-title-noDropdown,
+    .el-submenu__title {
+      &:hover {
+        background-color: $menuHover !important;
+      }
+    }
+
+    .is-active>.el-submenu__title {
+      color: $subMenuActiveText !important;
+    }
+
+    & .nest-menu .el-submenu>.el-submenu__title,
+    & .el-submenu .el-menu-item {
+      min-width: $sideBarWidth !important;
+      background-color: $subMenuBg !important;
+
+      &:hover {
+        background-color: $subMenuHover !important;
+      }
+    }
+  }
+
+  .hideSidebar {
+    .sidebar-container {
+      width: 54px !important;
+    }
+
+    .main-container {
+      margin-left: 54px;
+    }
+
+    .submenu-title-noDropdown {
+      padding: 0 !important;
+      position: relative;
+
+      .el-tooltip {
+        padding: 0 !important;
+
+        .svg-icon {
+          margin-left: 20px;
+        }
+      }
+    }
+
+    .el-submenu {
+      overflow: hidden;
+
+      &>.el-submenu__title {
+        padding: 0 !important;
+
+        .svg-icon {
+          margin-left: 20px;
+        }
+
+        .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;
+          }
+        }
+      }
+    }
+  }
+
+  .el-menu--collapse .el-menu .el-submenu {
+    min-width: $sideBarWidth !important;
+  }
+
+  // mobile responsive
+  .mobile {
+    .main-container {
+      margin-left: 0px;
+    }
+
+    .sidebar-container {
+      transition: transform .28s;
+      width: $sideBarWidth !important;
+    }
+
+    &.hideSidebar {
+      .sidebar-container {
+        pointer-events: none;
+        transition-duration: 0.3s;
+        transform: translate3d(-$sideBarWidth, 0, 0);
+      }
+    }
+  }
+
+  .withoutAnimation {
+
+    .main-container,
+    .sidebar-container {
+      transition: none;
+    }
+  }
+}
+
+// when menu collapsed
+.el-menu--vertical {
+  &>.el-menu {
+    .svg-icon {
+      margin-right: 16px;
+    }
+  }
+
+  .nest-menu .el-submenu>.el-submenu__title,
+  .el-menu-item {
+    &:hover {
+      // you can use $subMenuHover
+      background-color: $menuHover !important;
+    }
+  }
+
+  // the scroll bar appears when the subMenu is too long
+  >.el-menu--popup {
+    max-height: 100vh;
+    overflow-y: auto;
+
+    &::-webkit-scrollbar-track-piece {
+      background: #d3dce6;
+    }
+
+    &::-webkit-scrollbar {
+      width: 6px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: #99a9bf;
+      border-radius: 20px;
+    }
+  }
+}
--- a/src/styles/transition.scss
+++ b/src/styles/transition.scss
@ -0,0 +1,48 @@
+// global transition css
+
+/* fade */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.28s;
+}
+
+.fade-enter,
+.fade-leave-active {
+  opacity: 0;
+}
+
+/* fade-transform */
+.fade-transform-leave-active,
+.fade-transform-enter-active {
+  transition: all .5s;
+}
+
+.fade-transform-enter {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+
+.fade-transform-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+/* breadcrumb transition */
+.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
@ -0,0 +1,25 @@
+// sidebar
+$menuText:#bfcbd9;
+$menuActiveText:#409EFF;
+$subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951
+
+$menuBg:#304156;
+$menuHover:#263445;
+
+$subMenuBg:#1f2d3d;
+$subMenuHover:#001528;
+
+$sideBarWidth: 210px;
+
+// the :export directive is the magic sauce for webpack
+// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
+:export {
+  menuText: $menuText;
+  menuActiveText: $menuActiveText;
+  subMenuActiveText: $subMenuActiveText;
+  menuBg: $menuBg;
+  menuHover: $menuHover;
+  subMenuBg: $subMenuBg;
+  subMenuHover: $subMenuHover;
+  sideBarWidth: $sideBarWidth;
+}
--- a/src/utils/auth.js
+++ b/src/utils/auth.js
@ -0,0 +1,15 @@
+import Cookies from 'js-cookie'
+
+const TokenKey = 'vue_admin_template_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/get-page-title.js
+++ b/src/utils/get-page-title.js
@ -0,0 +1,10 @@
+import defaultSettings from '@/settings'
+
+const title = defaultSettings.title || 'Vue Admin Template'
+
+export default function getPageTitle(pageTitle) {
+  if (pageTitle) {
+    return `${pageTitle} - ${title}`
+  }
+  return `${title}`
+}
--- a/src/utils/index.js
+++ b/src/utils/index.js
@ -0,0 +1,147 @@
+/**
+ * Created by PanJiaChen on 16/11/18.
+ */
+
+/**
+ * Parse the time to string
+ * @param {(Object|string|number)} time
+ * @param {string} cFormat
+ * @returns {string | null}
+ */
+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 ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
+      time = parseInt(time)
+    }
+    if ((typeof time === 'number') && (time.toString().length === 10)) {
+      time = 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(/{([ymdhisa])+}/g, (result, key) => {
+    const value = formatObj[key]
+    // Note: getDay() returns 0 on Sunday
+    if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value ] }
+    return value.toString().padStart(2, '0')
+  })
+  return time_str
+}
+
+/**
+ * @param {number} time
+ * @param {string} option
+ * @returns {string}
+ */
+export function formatTime(time, option) {
+  if (('' + time).length === 10) {
+    time = parseInt(time) * 1000
+  } else {
+    time = +time
+  }
+  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() +
+      '分'
+    )
+  }
+}
+
+/**
+ * @param {string} url
+ * @returns {Object}
+ */
+export function param2Obj(url) {
+  const search = url.split('?')[1]
+  if (!search) {
+    return {}
+  }
+  return JSON.parse(
+    '{"' +
+      decodeURIComponent(search)
+        .replace(/"/g, '\\"')
+        .replace(/&/g, '","')
+        .replace(/=/g, '":"')
+        .replace(/\+/g, ' ') +
+      '"}'
+  )
+}
+
+/**
+ * 该方法用于将有父子关系的数组转换成树形结构的数组
+ * 接收一个具有父子关系的数组作为参数
+ * 返回一个树形结构的数组
+ */
+export function translateDataToTree(data) {
+  const arr = data || []
+  // 没有父节点的数据
+  const parents = arr.filter(value => value.parentId === 0 || value.parentId === null)
+  // 有父节点的数据
+  const children = arr.filter(value => value.parentId !== 0 && value.parentId !== null)
+  // 定义转换方法的具体实现
+  const translator = (parents, children) => {
+    // 遍历父节点数据
+    parents.forEach((parent) => {
+      // 遍历子节点数据
+      children.forEach((current, index) => {
+        // 此时找到父节点对应的一个子节点
+        if (current.parentId === parent.id) {
+          // 对子节点数据进行深复制，这里只支持部分类型的数据深复制，对深复制不了解的童靴可以先去了解下深复制
+          const temp = JSON.parse(JSON.stringify(children))
+          // 让当前子节点从temp中移除，temp作为新的子节点数据，这里是为了让递归时，子节点的遍历次数更少，如果父子关系的层级越多，越有利
+          temp.splice(index, 1)
+          // 让当前子节点作为唯一的父节点，去递归查找其对应的子节点
+          translator([current], temp)
+          // 把找到子节点放入父节点的children属性中
+          typeof parent.children !== 'undefined' ? parent.children.push(current) : parent.children = [current]
+        }
+      }
+      )
+    }
+    )
+  }
+  // 调用转换方法
+  translator(parents, children)
+  // 返回最终的结果
+  console.log(parents)
+  return parents
+}
--- a/src/utils/request.js
+++ b/src/utils/request.js
@ -0,0 +1,109 @@
+import axios from 'axios'
+const qs = require('qs')
+import { MessageBox, Message } from 'element-ui'
+import store from '@/store'
+import { getToken } from '@/utils/auth'
+
+// create an axios instance
+const service = axios.create({
+  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
+  // withCredentials: true, // send cookies when cross-domain requests
+  timeout: 50000 // request timeout
+})
+
+// request interceptor
+service.interceptors.request.use(
+  config => {
+    // do something before request is sent
+
+    if (store.getters.token) {
+      // let each request carry token
+      // ['X-Token'] is a custom headers key
+      // please modify it according to the actual situation
+      config.headers['Authorization'] = 'Bearer ' + getToken()
+    }
+    config.data = qs.stringify(config.data)
+    return config
+  },
+  error => {
+    // do something with request error
+    console.log(error) // for debug
+    return Promise.reject(error)
+  }
+)
+
+// response interceptor
+service.interceptors.response.use(
+  /**
+   * If you want to get http information such as headers or status
+   * Please return  response => response
+  */
+
+  /**
+   * Determine the request status by custom code
+   * Here is just an example
+   * You can also judge the status by HTTP Status Code
+   */
+  response => {
+    const res = response.data
+    if (!res) {
+      Message({
+        message: res.msg || 'Error2',
+        type: 'error',
+        duration: 5 * 1000
+      })
+      MessageBox.confirm('登录超时或认证失败，请重新登录', '重新登录', {
+        showClose: false,
+        distinguishCancelAndClose: true,
+        showCancelButton: false,
+        closeOnClickModal: false,
+        closeOnPressEscape: false,
+        confirmButtonText: '重新登录',
+        type: 'warning'
+      }).then(() => {
+        store.dispatch('user/resetToken').then(() => {
+          location.reload()
+        })
+      })
+    }
+    // 返回异常拦截
+    if (res.code !== 0) {
+      if (res.code === -401) {
+        // to re-login
+        MessageBox.confirm('登录超时或认证失败，请重新登录', '重新登录', {
+          showClose: false,
+          distinguishCancelAndClose: true,
+          showCancelButton: false,
+          closeOnClickModal: false,
+          closeOnPressEscape: false,
+          confirmButtonText: '重新登录',
+          type: 'warning'
+        }).then(() => {
+          store.dispatch('user/resetToken').then(() => {
+            location.reload()
+          })
+        })
+      } else {
+        Message({
+          message: res.msg || 'Error2',
+          type: 'error',
+          duration: 5 * 1000
+        })
+      }
+      return Promise.reject(new Error(res.message || 'Error1'))
+    } else {
+      return res
+    }
+  },
+  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
@ -0,0 +1,20 @@
+/**
+ * Created by PanJiaChen on 16/11/18.
+ */
+
+/**
+ * @param {string} path
+ * @returns {Boolean}
+ */
+export function isExternal(path) {
+  return /^(https?:|mailto:|tel:)/.test(path)
+}
+
+/**
+ * @param {string} str
+ * @returns {Boolean}
+ */
+export function validUsername(str) {
+  const valid_map = ['admin', 'editor']
+  return valid_map.indexOf(str.trim()) >= 0
+}
--- a/src/views/404.vue
+++ b/src/views/404.vue
@ -0,0 +1,228 @@
+<template>
+  <div class="wscn-http404-container">
+    <div class="wscn-http404">
+      <div class="pic-404">
+        <img class="pic-404__parent" src="@/assets/404_images/404.png" alt="404">
+        <img class="pic-404__child left" src="@/assets/404_images/404_cloud.png" alt="404">
+        <img class="pic-404__child mid" src="@/assets/404_images/404_cloud.png" alt="404">
+        <img class="pic-404__child right" src="@/assets/404_images/404_cloud.png" alt="404">
+      </div>
+      <div class="bullshit">
+        <div class="bullshit__oops">OOPS!</div>
+        <div class="bullshit__info">All rights reserved
+          <a style="color:#20a0ff" href="https://wallstreetcn.com" target="_blank">wallstreetcn</a>
+        </div>
+        <div class="bullshit__headline">{{ message }}</div>
+        <div class="bullshit__info">Please check that the URL you entered is correct, or click the button below to return to the homepage.</div>
+        <a href="" class="bullshit__return-home">Back to home</a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'Page404',
+  computed: {
+    message() {
+      return 'The webmaster said that you can not enter this page...'
+    }
+  }
+}
+</script>
+
+<style 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/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@ -0,0 +1,208 @@
+<template>
+  <div class="app-container">
+    <div class="div-table">
+      <el-table
+        id="out-table"
+        :data="list"
+        element-loading-text="Loading"
+        border
+        fit
+        highlight-current-row
+        :default-sort="{prop: 'time', order: 'descending'}"
+      >
+        <el-table-column label="序号" width="50">
+          <template slot-scope="scope">{{ scope.$index + 1 }}</template>
+        </el-table-column>
+
+        <el-table-column label="日期" width="120" prop="time">
+          <template slot-scope="scope">{{ scope.row.time }}</template>
+        </el-table-column>
+
+        <el-table-column label="新增角色" width="80">
+          <template slot-scope="scope">
+            <span>{{ scope.row.regCount }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="DAU(账号)" width="80">
+          <template slot-scope="scope">
+            <span>{{ scope.row.loginCount }}</span>
+          </template>
+        </el-table-column>
+
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getMaindate } from '@/api/systemapi/game'
+import { getMenuTree } from '@/api/systemapi/menu'
+import { translateDataToTree } from '@/utils'
+
+export default {
+  filters: {
+    typeFilter(type) {
+      const typeMap = {
+        1: '目录',
+        2: '菜单'
+      }
+      return typeMap[type]
+    },
+    statusFilter(status) {
+      const statusMap = {
+        1: '启用',
+        2: '禁用'
+      }
+      return statusMap[status]
+    },
+    statusTypeFilter(status) {
+      const statusMap = {
+        1: 'success',
+        2: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      treeData: null,
+      list: null,
+      option: null,
+      pickerOptions: null,
+      listLoading: true,
+      defaultProps: {
+        children: 'children',
+        label: 'name',
+        id: 'id'
+      },
+      searchForm: {
+        name: '',
+        serverid: '',
+        rows: '10',
+        page: '1',
+        channel: ''
+      }
+    }
+  },
+  created() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      this.listLoading = true
+      getMaindate({ ...this.searchForm }).then((response) => {
+        this.list = response.data.rows
+        this.listLoading = false
+        const data1 = []
+        const ppp = []
+        const uniquserid = []
+        const usercount = []
+        const rolecount = []
+        const money = []
+        const arpuarr = []
+        const arppuarr = []
+        const newarr = []
+        const dauarr = []
+        const newpaymoneyarr = []
+        const newpaydaymoneyarr = []
+        const newpaypeoplearr = []
+        const newpaypeopledayarr = []
+        const newpaypeopleuniqarr = []
+        const newpaypeopleuniqdayarr = []
+        const LTVqarr = []
+        var num = 0
+        var apru = 0
+        var arppu = 0
+        var ltv = 0
+        response.data.rows.map((v) => {
+          data1.push(v.time)
+          uniquserid.push(v.uniquserid)
+          usercount.push(v.count)
+          rolecount.push(v.pDayu)
+          num = (v.uniquserid / v.count) * 100
+          ppp.push(num.toFixed(2))
+          money.push(v.sumprice)
+          apru = v.sumprice / v.count
+          arpuarr.push(apru)
+          newarr.push(v.regnum)
+          dauarr.push(v.count)
+          newpaymoneyarr.push(v.newpaymoney / 100)
+          newpaydaymoneyarr.push(v.newdaypaymoney / 100)
+          newpaypeoplearr.push(v.newpaynum)
+          newpaypeopledayarr.push(v.newdaypaynum)
+          newpaypeopleuniqarr.push(v.uniqnewpaynum)
+          newpaypeopleuniqdayarr.push(v.uniqnewdaypaynum)
+          if (v.uniquserid === '0') {
+            arppuarr.push(0)
+          } else {
+            arppu = v.sumprice / v.uniquserid
+            arppuarr.push(arppu.toFixed(2))
+          }
+
+          if (v.regnum === 0) {
+            LTVqarr.push(0)
+          } else {
+            ltv = v.newpaynum / v.regnum
+            LTVqarr.push(ltv.toFixed(2))
+          }
+        })
+        console.log(LTVqarr)
+      })
+    },
+    fetchTreeData() {
+      this.listLoading = true
+      getMenuTree().then((response) => {
+        this.menulist = response.data
+        this.treeData = translateDataToTree(response.data)
+        this.listLoading = false
+      })
+    },
+    handelMenuCheck() {
+      const menus = this.$refs.menuTree.getCheckedKeys()
+      if (!menus.length) {
+        this.showMenuErr = true
+      } else {
+        this.showMenuErr = false
+      }
+    },
+    numFilter(value) {
+      const realVal = parseFloat(value).toFixed(2)
+      return realVal
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.app-container {
+  width: 100%;
+  .div-table {
+    width: 100%;
+  }
+  .el-row {
+    height: 300px;
+    .el-col {
+      height: 100%;
+      .div-tree {
+        height: 90%;
+        .el-tree {
+          height: 100%;
+          overflow-y: auto;
+        }
+      }
+    }
+  }
+}
+.div-chert {
+  width: 100%;
+  height: 100%;
+}
+.custom-tree-node {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  padding-right: 8px;
+}
+</style>
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@ -0,0 +1,241 @@
+<template>
+  <div class="login-container">
+    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
+
+      <div class="title-container">
+        <h3 class="title">{{ title }}</h3>
+      </div>
+
+      <el-form-item prop="username">
+        <span class="svg-container">
+          <svg-icon icon-class="user" />
+        </span>
+        <el-input
+          ref="username"
+          v-model="loginForm.username"
+          placeholder="Username"
+          name="username"
+          type="text"
+          tabindex="1"
+          auto-complete="on"
+        />
+      </el-form-item>
+
+      <el-form-item prop="passwd">
+        <span class="svg-container">
+          <svg-icon icon-class="password" />
+        </span>
+        <el-input
+          :key="passwordType"
+          ref="password"
+          v-model="loginForm.passwd"
+          :type="passwordType"
+          placeholder="Password"
+          name="passwd"
+          tabindex="2"
+          auto-complete="on"
+          @keyup.enter.native="handleLogin"
+        />
+        <span class="show-pwd" @click="showPwd">
+          <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
+        </span>
+      </el-form-item>
+
+      <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">登 录</el-button>
+
+      <!-- <div class="tips">
+        <span style="margin-right:20px;">测试帐号</span>
+        <span style="margin-right:20px;">用户名: admin</span>
+        <span> 密码: 123456</span>
+      </div> -->
+
+    </el-form>
+  </div>
+</template>
+
+<script>
+import { validUsername } from '@/utils/validate'
+import { title } from '@/settings'
+import MD5 from 'js-md5'
+
+export default {
+  name: 'Login',
+  data() {
+    const validateUsername = (rule, value, callback) => {
+      if (!validUsername(value)) {
+        callback()
+      } else {
+        callback()
+      }
+    }
+    const validatePassword = (rule, value, callback) => {
+      if (value.length < 6) {
+        callback()
+      } else {
+        callback()
+      }
+    }
+    return {
+      title: title,
+      loginForm: {
+        username: 'admin',
+        passwd: '123456'
+      },
+      loginRules: {
+        username: [{ required: true, trigger: 'blur', validator: validateUsername }],
+        passwd: [{ required: true, trigger: 'blur', validator: validatePassword }]
+      },
+      loading: false,
+      passwordType: 'password',
+      redirect: undefined
+    }
+  },
+  watch: {
+    $route: {
+      handler: function(route) {
+        this.redirect = route.query && route.query.redirect
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    showPwd() {
+      if (this.passwordType === 'password') {
+        this.passwordType = ''
+      } else {
+        this.passwordType = 'password'
+      }
+      this.$nextTick(() => {
+        this.$refs.password.focus()
+      })
+    },
+    handleLogin() {
+      this.$refs.loginForm.validate(valid => {
+        if (valid) {
+          this.loading = true
+          this.$store.dispatch('user/login', { ...this.loginForm, passwd: MD5(this.loginForm.passwd) }).then(() => {
+            this.$router.push({ path: this.redirect || '/' })
+            this.loading = false
+          }).catch(() => {
+            this.loading = false
+          })
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+/* 修复input 背景不协调 和光标变色 */
+/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
+
+$bg:#283443;
+$light_gray:#fff;
+$cursor: #fff;
+
+@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
+  .login-container .el-input input {
+    color: $cursor;
+  }
+}
+
+/* reset element-ui css */
+.login-container {
+  .el-input {
+    display: inline-block;
+    height: 47px;
+    width: 85%;
+
+    input {
+      background: transparent;
+      border: 0px;
+      -webkit-appearance: none;
+      border-radius: 0px;
+      padding: 12px 5px 12px 15px;
+      color: $light_gray;
+      height: 47px;
+      caret-color: $cursor;
+
+      &:-webkit-autofill {
+        box-shadow: 0 0 0px 1000px $bg inset !important;
+        -webkit-text-fill-color: $cursor !important;
+      }
+    }
+  }
+
+  .el-form-item {
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    background: rgba(0, 0, 0, 0.1);
+    border-radius: 5px;
+    color: #454545;
+  }
+}
+</style>
+
+<style lang="scss" scoped>
+$bg:#2d3a4b;
+$dark_gray:#889aa4;
+$light_gray:#eee;
+
+.login-container {
+  min-height: 100%;
+  width: 100%;
+  background-color: $bg;
+  overflow: hidden;
+
+  .login-form {
+    position: relative;
+    width: 520px;
+    max-width: 100%;
+    padding: 160px 35px 0;
+    margin: 0 auto;
+    overflow: hidden;
+  }
+
+  .tips {
+    font-size: 14px;
+    color: #fff;
+    margin-bottom: 10px;
+
+    span {
+      &:first-of-type {
+        margin-right: 16px;
+      }
+    }
+  }
+
+  .svg-container {
+    padding: 6px 5px 6px 15px;
+    color: $dark_gray;
+    vertical-align: middle;
+    width: 30px;
+    display: inline-block;
+  }
+
+  .title-container {
+    position: relative;
+
+    .title {
+      font-size: 26px;
+      color: $light_gray;
+      margin: 0px auto 40px auto;
+      text-align: center;
+      font-weight: bold;
+    }
+  }
+
+  .show-pwd {
+    position: absolute;
+    right: 10px;
+    top: 7px;
+    font-size: 16px;
+    color: $dark_gray;
+    cursor: pointer;
+    user-select: none;
+  }
+}
+</style>
--- a/Show More
+++ b/Show More
				`@ -0,0 +1 @@`
				<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1575517161884" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4732" width="128" height="128" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"></style></defs><path d="M42.666667 917.333333c0 36.266667 27.733333 64 64 64h810.666666c36.266667 0 64-27.733333 64-64V469.333333H42.666667v448z m405.333333-362.666666h128c12.8 0 21.333333 8.533333 21.333333 21.333333s-8.533333 21.333333-21.333333 21.333333h-128c-12.8 0-21.333333-8.533333-21.333333-21.333333s8.533333-21.333333 21.333333-21.333333z m469.333333-298.666667H106.666667c-36.266667 0-64 27.733333-64 64v106.666667h938.666666v-106.666667c0-36.266667-27.733333-64-64-64z m-597.333333-42.666667c12.8 0 21.333333-8.533333 21.333333-21.333333V119.466667c0-19.2 17.066667-34.133333 36.266667-34.133334h268.8c19.2 0 36.266667 14.933333 36.266667 34.133334V192c0 12.8 8.533333 21.333333 21.333333 21.333333s21.333333-8.533333 21.333333-21.333333V119.466667c0-42.666667-36.266667-76.8-78.933333-76.8H377.6c-42.666667 0-78.933333 34.133333-78.933333 76.8V192c0 12.8 8.533333 21.333333 21.333333 21.333333z" fill="#666767" p-id="4733"></path></svg>
				`@ -0,0 +1 @@`
				<svg width="128" height="100" xmlns="http://www.w3.org/2000/svg"><path d="M27.429 63.638c0-2.508-.893-4.65-2.679-6.424-1.786-1.775-3.94-2.662-6.464-2.662-2.524 0-4.679.887-6.465 2.662-1.785 1.774-2.678 3.916-2.678 6.424 0 2.508.893 4.65 2.678 6.424 1.786 1.775 3.94 2.662 6.465 2.662 2.524 0 4.678-.887 6.464-2.662 1.786-1.775 2.679-3.916 2.679-6.424zm13.714-31.801c0-2.508-.893-4.65-2.679-6.424-1.785-1.775-3.94-2.662-6.464-2.662-2.524 0-4.679.887-6.464 2.662-1.786 1.774-2.679 3.916-2.679 6.424 0 2.508.893 4.65 2.679 6.424 1.785 1.774 3.94 2.662 6.464 2.662 2.524 0 4.679-.888 6.464-2.662 1.786-1.775 2.679-3.916 2.679-6.424zM71.714 65.98l7.215-27.116c.285-1.23.107-2.378-.536-3.443-.643-1.064-1.56-1.762-2.75-2.094-1.19-.33-2.333-.177-3.429.462-1.095.639-1.81 1.573-2.143 2.804l-7.214 27.116c-2.857.237-5.405 1.266-7.643 3.088-2.238 1.822-3.738 4.152-4.5 6.992-.952 3.644-.476 7.098 1.429 10.364 1.905 3.265 4.69 5.37 8.357 6.317 3.667.947 7.143.474 10.429-1.42 3.285-1.892 5.404-4.66 6.357-8.305.762-2.84.619-5.607-.429-8.305-1.047-2.697-2.762-4.85-5.143-6.46zm47.143-2.342c0-2.508-.893-4.65-2.678-6.424-1.786-1.775-3.94-2.662-6.465-2.662-2.524 0-4.678.887-6.464 2.662-1.786 1.774-2.679 3.916-2.679 6.424 0 2.508.893 4.65 2.679 6.424 1.786 1.775 3.94 2.662 6.464 2.662 2.524 0 4.679-.887 6.465-2.662 1.785-1.775 2.678-3.916 2.678-6.424zm-45.714-45.43c0-2.509-.893-4.65-2.679-6.425C68.68 10.01 66.524 9.122 64 9.122c-2.524 0-4.679.887-6.464 2.661-1.786 1.775-2.679 3.916-2.679 6.425 0 2.508.893 4.65 2.679 6.424 1.785 1.774 3.94 2.662 6.464 2.662 2.524 0 4.679-.888 6.464-2.662 1.786-1.775 2.679-3.916 2.679-6.424zm32 13.629c0-2.508-.893-4.65-2.679-6.424-1.785-1.775-3.94-2.662-6.464-2.662-2.524 0-4.679.887-6.464 2.662-1.786 1.774-2.679 3.916-2.679 6.424 0 2.508.893 4.65 2.679 6.424 1.785 1.774 3.94 2.662 6.464 2.662 2.524 0 4.679-.888 6.464-2.662 1.786-1.775 2.679-3.916 2.679-6.424zM128 63.638c0 12.351-3.357 23.78-10.071 34.286-.905 1.372-2.19 2.058-3.858 2.058H13.93c-1.667 0-2.953-.686-3.858-2.058C3.357 87.465 0 76.037 0 63.638c0-8.613 1.69-16.847 5.071-24.703C8.452 31.08 13 24.312 18.714 18.634c5.715-5.68 12.524-10.199 20.429-13.559C47.048 1.715 55.333.035 64 .035c8.667 0 16.952 1.68 24.857 5.04 7.905 3.36 14.714 7.88 20.429 13.559 5.714 5.678 10.262 12.446 13.643 20.301 3.38 7.856 5.071 16.09 5.071 24.703z"/></svg>
				`@ -0,0 +1 @@`
				`<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M96.258 57.462h31.421C124.794 27.323 100.426 2.956 70.287.07v31.422a32.856 32.856 0 0 1 25.971 25.97zm-38.796-25.97V.07C27.323 2.956 2.956 27.323.07 57.462h31.422a32.856 32.856 0 0 1 25.97-25.97zm12.825 64.766v31.421c30.46-2.885 54.507-27.253 57.713-57.712H96.579c-2.886 13.466-13.146 23.726-26.292 26.291zM31.492 70.287H.07c2.886 30.46 27.253 54.507 57.713 57.713V96.579c-13.466-2.886-23.726-13.146-26.291-26.292z"/></svg>`
				`@ -0,0 +1 @@`
				<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="128" height="128"><defs><style/></defs><path d="M512 128q69.675 0 135.51 21.163t115.498 54.997 93.483 74.837 73.685 82.006 51.67 74.837 32.17 54.827L1024 512q-2.347 4.992-6.315 13.483T998.87 560.17t-31.658 51.669-44.331 59.99-56.832 64.34-69.504 60.16-82.347 51.5-94.848 34.687T512 896q-69.675 0-135.51-21.163t-115.498-54.826-93.483-74.326-73.685-81.493-51.67-74.496-32.17-54.997L0 513.707q2.347-4.992 6.315-13.483t18.816-34.816 31.658-51.84 44.331-60.33 56.832-64.683 69.504-60.331 82.347-51.84 94.848-34.816T512 128.085zm0 85.333q-46.677 0-91.648 12.331t-81.152 31.83-70.656 47.146-59.648 54.485-48.853 57.686-37.675 52.821-26.325 43.99q12.33 21.674 26.325 43.52t37.675 52.351 48.853 57.003 59.648 53.845T339.2 767.02t81.152 31.488T512 810.667t91.648-12.331 81.152-31.659 70.656-46.848 59.648-54.186 48.853-57.344 37.675-52.651T927.957 512q-12.33-21.675-26.325-43.648t-37.675-52.65-48.853-57.345-59.648-54.186-70.656-46.848-81.152-31.659T512 213.334zm0 128q70.656 0 120.661 50.006T682.667 512 632.66 632.661 512 682.667 391.339 632.66 341.333 512t50.006-120.661T512 341.333zm0 85.334q-35.328 0-60.33 25.002T426.666 512t25.002 60.33T512 597.334t60.33-25.002T597.334 512t-25.002-60.33T512 426.666z"/></svg>
				`@ -0,0 +1 @@`
				<svg width="128" height="64" xmlns="http://www.w3.org/2000/svg"><path d="M127.072 7.994c1.37-2.208.914-5.152-.914-6.87-2.056-1.717-4.797-1.226-6.396.982-.229.245-25.586 32.382-55.74 32.382-29.24 0-55.74-32.382-55.968-32.627-1.6-1.963-4.57-2.208-6.397-.49C-.17 3.086-.399 6.275 1.2 8.238c.457.736 5.94 7.36 14.62 14.72L4.17 35.96c-1.828 1.963-1.6 5.152.228 6.87.457.98 1.6 1.471 2.742 1.471s2.284-.49 3.198-1.472l12.564-13.983c5.94 4.416 13.021 8.587 20.788 11.53l-4.797 17.418c-.685 2.699.686 5.397 3.198 6.133h1.37c2.057 0 3.884-1.472 4.341-3.68L52.6 42.83c3.655.736 7.538 1.227 11.422 1.227 3.883 0 7.767-.49 11.422-1.227l4.797 17.173c.457 2.208 2.513 3.68 4.34 3.68.457 0 .914 0 1.143-.246 2.513-.736 3.883-3.434 3.198-6.133l-4.797-17.172c7.767-2.944 14.848-7.114 20.788-11.53l12.336 13.738c.913.981 2.056 1.472 3.198 1.472s2.284-.49 3.198-1.472c1.828-1.963 1.828-4.906.228-6.87l-11.65-13.001c9.366-7.36 14.849-14.474 14.849-14.474z"/></svg>
				`@ -0,0 +1 @@`
				<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M84.068 23.784c-1.02 0-1.877-.32-2.572-.96a8.588 8.588 0 0 1-1.738-2.237 11.524 11.524 0 0 1-1.042-2.621c-.232-.895-.348-1.641-.348-2.238V0h.278c.834 0 1.622.085 2.363.256.742.17 1.645.575 2.711 1.214 1.066.64 2.363 1.535 3.892 2.686 1.53 1.15 3.453 2.664 5.77 4.54 2.502 2.045 4.494 3.771 5.977 5.178 1.483 1.406 2.618 2.6 3.406 3.58.787.98 1.274 1.812 1.46 2.494.185.682.277 1.278.277 1.79v2.046H84.068zM127.3 84.01c.278.682.464 1.535.556 2.558.093 1.023-.37 2.003-1.39 2.94-.463.427-.88.832-1.25 1.215-.372.384-.696.704-.974.96a6.69 6.69 0 0 1-.973.767l-11.816-10.741a44.331 44.331 0 0 0 1.877-1.535 31.028 31.028 0 0 1 1.737-1.406c1.112-.938 2.317-1.343 3.615-1.215 1.297.128 2.363.405 3.197.83.927.427 1.923 1.173 2.989 2.239 1.065 1.065 1.876 2.195 2.432 3.388zM78.23 95.902c2.038 0 3.752-.511 5.143-1.534l-26.969 25.83H18.037c-1.761 0-3.684-.47-5.77-1.407a24.549 24.549 0 0 1-5.838-3.709 21.373 21.373 0 0 1-4.518-5.306c-1.204-2.003-1.807-4.07-1.807-6.202V16.495c0-1.79.44-3.665 1.32-5.626A18.41 18.41 0 0 1 5.04 5.562a21.798 21.798 0 0 1 5.213-3.964C12.198.533 14.237 0 16.37 0h53.24v15.984c0 1.62.278 3.367.834 5.242a16.704 16.704 0 0 0 2.572 5.179c1.159 1.577 2.665 2.898 4.518 3.964 1.853 1.066 4.078 1.598 6.673 1.598h20.295v42.325L85.458 92.45c1.02-1.364 1.529-2.856 1.529-4.476 0-2.216-.857-4.113-2.572-5.69-1.714-1.577-3.776-2.366-6.186-2.366H26.1c-2.409 0-4.448.789-6.116 2.366-1.668 1.577-2.502 3.474-2.502 5.69 0 2.217.834 4.092 2.502 5.626 1.668 1.535 3.707 2.302 6.117 2.302h52.13zM26.1 47.951c-2.41 0-4.449.789-6.117 2.366-1.668 1.577-2.502 3.473-2.502 5.69 0 2.216.834 4.092 2.502 5.626 1.668 1.534 3.707 2.302 6.117 2.302h52.13c2.409 0 4.47-.768 6.185-2.302 1.715-1.534 2.572-3.41 2.572-5.626 0-2.217-.857-4.113-2.572-5.69-1.714-1.577-3.776-2.366-6.186-2.366H26.1zm52.407 64.063l1.807-1.663 3.476-3.196a479.75 479.75 0 0 0 4.587-4.284 500.757 500.757 0 0 1 5.004-4.667c3.985-3.666 8.48-7.758 13.485-12.276l11.677 10.741-13.485 12.404-5.004 4.603-4.587 4.22a179.46 179.46 0 0 0-3.267 3.068c-.88.853-1.367 1.322-1.46 1.407-.463.341-.973.703-1.529 1.087-.556.383-1.112.703-1.668.959-.556.256-1.413.575-2.572.959a83.5 83.5 0 0 1-3.545 1.087 72.2 72.2 0 0 1-3.475.895c-1.112.256-1.946.426-2.502.511-1.112.17-1.854.043-2.224-.383-.371-.426-.464-1.151-.278-2.174.092-.511.278-1.279.556-2.302.278-1.023.602-2.067.973-3.132l1.042-3.005c.325-.938.58-1.577.765-1.918a10.157 10.157 0 0 1 2.224-2.941z"/></svg>
				`@ -0,0 +1 @@`
				`<svg width="130" height="130" xmlns="http://www.w3.org/2000/svg"><path d="M63.444 64.996c20.633 0 37.359-14.308 37.359-31.953 0-17.649-16.726-31.952-37.359-31.952-20.631 0-37.36 14.303-37.358 31.952 0 17.645 16.727 31.953 37.359 31.953zM80.57 75.65H49.434c-26.652 0-48.26 18.477-48.26 41.27v2.664c0 9.316 21.608 9.325 48.26 9.325H80.57c26.649 0 48.256-.344 48.256-9.325v-2.663c0-22.794-21.605-41.271-48.256-41.271z" stroke="#979797"/></svg>`