.

.editorconfig

+# http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+insert_final_newline = false
+trim_trailing_whitespace = false

.env.development

+# just a flag
+ENV = 'development'
+
+# base api
+VUE_APP_BASE_API = '/api'

.env.production

+# just a flag
+ENV = 'production'
+
+# base api
+VUE_APP_BASE_API = '/prod-api'
+

.env.staging

+NODE_ENV = production
+
+# just a flag
+ENV = 'staging'
+
+# base api
+VUE_APP_BASE_API = '/stage-api'
+

.eslintignore

+build/*.js
+src/assets
+public
+dist

.eslintrc.js

+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']
+  }
+}

.gitignore

+.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

.travis.yml

+language: node_js
+node_js: 10
+script: npm run test
+notifications:
+  email: false

LICENSE

+MIT License
+
+Copyright (c) 2017-present PanJiaChen
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

babel.config.js

+module.exports = {
+  presets: [
+    // https://github.com/vuejs/vue-cli/tree/master/packages/@vue/babel-preset-app
+    // '@vue/cli-plugin-babel/preset',
+    // 之前一直报错说core.js 把上面这句话改为下面的就可以了
+    ['@vue/cli-plugin-babel/preset', { useBuiltIns: 'entry' }]
+  ],
+  'env': {
+    'development': {
+      // babel-plugin-dynamic-import-node plugin only does one thing by converting all import() to require().
+      // This plugin can significantly increase the speed of hot updates, when you have a large number of pages.
+      // https://panjiachen.github.io/vue-element-admin-site/guide/advanced/lazy-loading.html
+      'plugins': ['dynamic-import-node']
+    }
+  }
+}

build/index.js

+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}`)
+}

jest.config.js

+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/'
+}

jsconfig.json

+{
+  "compilerOptions": {
+    "baseUrl": "./",
+    "paths": {
+        "@/*": ["src/*"]
+    }
+  },
+  "exclude": ["node_modules", "dist"]
+}

mock/index.js

+const Mock = require('mockjs')
+const { param2Obj } = require('./utils')
+
+const user = require('./user')
+const table = require('./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).
+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))
+  }
+}
+
+module.exports = {
+  mocks,
+  mockXHR
+}
+

mock/mock-server.js

+const chokidar = require('chokidar')
+const bodyParser = require('body-parser')
+const chalk = require('chalk')
+const path = require('path')
+const Mock = require('mockjs')
+
+const mockDir = path.join(process.cwd(), 'mock')
+
+function registerRoutes(app) {
+  let mockLastIndex
+  const { mocks } = require('./index.js')
+  const mocksForServer = mocks.map(route => {
+    return responseFake(route.url, route.type, route.response)
+  })
+  for (const mock of mocksForServer) {
+    app[mock.type](mock.url, mock.response)
+    mockLastIndex = app._router.stack.length
+  }
+  const mockRoutesLength = Object.keys(mocksForServer).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)]
+    }
+  })
+}
+
+// for mock server
+const responseFake = (url, type, respond) => {
+  return {
+    url: new RegExp(`${process.env.VUE_APP_BASE_API}${url}`),
+    type: type || 'get',
+    response(req, res) {
+      console.log('request invoke:' + req.path)
+      res.json(Mock.mock(respond instanceof Function ? respond(req, res) : respond))
+    }
+  }
+}
+
+module.exports = app => {
+  // 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))
+      }
+    }
+  })
+}

mock/table.js

+const Mock = require('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)'
+  }]
+})
+
+module.exports = [
+  {
+    url: '/vue-admin-template/table/list',
+    type: 'get',
+    response: config => {
+      const items = data.items
+      return {
+        code: 20000,
+        data: {
+          total: items.length,
+          items: items
+        }
+      }
+    }
+  }
+]

mock/user.js

+
+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'
+  }
+}
+
+module.exports = [
+  // user login
+  {
+    url: '/vue-admin-template/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: 1000,
+        data: token
+      }
+    }
+  },
+
+  // get user info
+  {
+    url: '/vue-admin-template/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: 1000,
+        data: info
+      }
+    }
+  },
+
+  // user logout
+  {
+    url: '/vue-admin-template/user/logout',
+    type: 'post',
+    response: _ => {
+      return {
+        code: 1000,
+        data: 'success'
+      }
+    }
+  }
+]

mock/utils.js

+/**
+ * @param {string} url
+ * @returns {Object}
+ */
+function param2Obj(url) {
+  const search = decodeURIComponent(url.split('?')[1]).replace(/\+/g, ' ')
+  if (!search) {
+    return {}
+  }
+  const obj = {}
+  const searchArr = search.split('&')
+  searchArr.forEach(v => {
+    const index = v.indexOf('=')
+    if (index !== -1) {
+      const name = v.substring(0, index)
+      const val = v.substring(index + 1, v.length)
+      obj[name] = val
+    }
+  })
+  return obj
+}
+
+module.exports = {
+  param2Obj
+}

package.json

+{
+  "name": "vue-admin-template",
+  "version": "4.4.0",
+  "description": "A vue admin template with Element UI & axios & iconfont & permission control & lint",
+  "author": "Pan <panfree23@gmail.com>",
+  "scripts": {
+    "dev": "vue-cli-service serve",
+    "build:prod": "vue-cli-service build",
+    "build:stage": "vue-cli-service build --mode staging",
+    "preview": "node build/index.js --preview",
+    "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml",
+    "lint": "eslint --ext .js,.vue src",
+    "test:unit": "jest --clearCache && vue-cli-service test:unit",
+    "test:ci": "npm run lint && npm run test:unit"
+  },
+  "dependencies": {
+    "ali-oss": "^6.16.0",
+    "axios": "^0.18.1",
+    "axios-retry": "^3.2.4",
+    "core-js": "^2.6.12",
+    "dayjs": "^1.10.7",
+    "element-ui": "2.13.2",
+    "js-cookie": "2.2.0",
+    "js-md5": "^0.7.3",
+    "normalize.css": "7.0.0",
+    "nprogress": "0.2.0",
+    "path-to-regexp": "2.4.0",
+    "qrcodejs2": "0.0.2",
+    "vue": "2.6.10",
+    "vue-axios": "^3.4.0",
+    "vue-axios-plugin": "^1.3.0",
+    "vue-router": "3.0.6",
+    "vuedraggable": "^2.24.3",
+    "vuex": "3.1.0"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "4.4.4",
+    "@vue/cli-plugin-eslint": "4.4.4",
+    "@vue/cli-plugin-unit-jest": "4.4.4",
+    "@vue/cli-service": "4.4.4",
+    "@vue/test-utils": "1.0.0-beta.29",
+    "autoprefixer": "9.5.1",
+    "babel-eslint": "10.1.0",
+    "babel-jest": "23.6.0",
+    "babel-plugin-dynamic-import-node": "2.3.3",
+    "chalk": "2.4.2",
+    "connect": "3.6.6",
+    "eslint": "6.7.2",
+    "eslint-plugin-vue": "6.2.2",
+    "html-webpack-plugin": "3.2.0",
+    "mockjs": "1.0.1-beta3",
+    "runjs": "4.3.2",
+    "sass": "1.26.8",
+    "sass-loader": "8.0.2",
+    "script-ext-html-webpack-plugin": "2.1.3",
+    "serve-static": "1.13.2",
+    "svg-sprite-loader": "4.1.3",
+    "svgo": "1.2.2",
+    "vue-template-compiler": "2.6.10"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions"
+  ],
+  "engines": {
+    "node": ">=8.9",
+    "npm": ">= 3.0.0"
+  },
+  "license": "MIT"
+}

postcss.config.js

+// https://github.com/michael-ciniawsky/postcss-load-config
+
+module.exports = {
+  'plugins': {
+    // to edit target browsers: use "browserslist" field in package.json
+    'autoprefixer': {}
+  }
+}

public/index.html

+<!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>

src/App.vue

+<template>
+  <div id="app">
+    <router-view />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'App'
+}
+</script>
+<style>
+.body_edit {
+  padding: 24px;
+  font-size: 14px;
+  background: white;
+  height: 100%;
+}
+.box-card {
+  margin-bottom: 16px;
+}
+.body {
+  padding: 24px;
+}
+.el-form-item__content .el-input-group{
+  vertical-align: middle;
+}
+</style>

src/api/answer.js

+import request from '@/utils/request'
+
+/**
+* 保存答案
+* @param {*} data
+* @returns
+*/
+export const saveAnswer = (data) => request({
+  url: '/admin/answer',
+  method: 'post',
+  data
+})
+
+/**
+ * 删除答案
+ * @param {*} data
+ * @returns
+ */
+export const deleteAnswer = (id) => request({
+  url: `/admin/answer/${id}`, method: 'delete'
+})
+/**
+ * 更新答案
+ * @param {*} data
+ * @returns
+ */
+export const UpdateAnswer = (data, id) => request({
+  url: `/admin/answer/${id}`, method: 'put', data
+})

src/api/attachment.js

+import request from '@/utils/request'
+
+/**
+* 保存照片墙
+* @param {*} data
+* @returns
+*/
+export const saveAttachment = (data) => request({
+  url: '/admin/attachment',
+  method: 'post',
+  data
+})
+
+/**
+ * 照片墙列表
+ * @param {*} params
+ * @returns
+ */
+export const getAttachmentList = (params) => request({
+  url: '/admin/attachment', params
+})
+
+/**
+ * 删除照片墙
+ * @param {*} data
+ * @returns
+ */
+export const deleteAttachment = (id) => request({
+  url: `/admin/attachment/${id}`, method: 'delete'
+})
+/**
+ * 更新照片墙
+ * @param {*} data
+ * @returns
+ */
+export const UpdateAttachment = (data, id) => request({
+  url: `/admin/attachment/${id}`, method: 'put', data
+})

src/api/attchPack.js

+import request from '@/utils/request'
+
+/**
+* 保存照片墙分组
+* @param {*} data
+* @returns
+*/
+export const saveAttchPack = (data) => request({
+  url: '/admin/attch-pack',
+  method: 'post',
+  data
+})
+
+/**
+ * 照片墙分组列表
+ * @param {*} params
+ * @returns
+ */
+export const getAttchPackList = (params) => request({
+  url: '/admin/attchPack', params
+})
+
+/**
+ * 删除照片墙分组
+ * @param {*} data
+ * @returns
+ */
+export const deleteAttchPack = (id) => request({
+  url: `/admin/attch-pack/${id}`, method: 'delete'
+})
+/**
+ * 更新照片墙分组
+ * @param {*} data
+ * @returns
+ */
+export const UpdateAttchPack = (data, id) => request({
+  url: `/admin/attch-pack/${id}`, method: 'put', data
+})

src/api/banners.js

+import request from '@/utils/request'
+
+/**
+* 保存轮播图
+* @param {*} data
+* @returns
+*/
+export const saveBanner = (data) => request({
+  url: '/admin/banner',
+  method: 'post',
+  data
+})
+
+/**
+ * 轮播图列表
+ * @param {*} params
+ * @returns
+ */
+export const getBannerList = (params) => request({
+  url: '/admin/banner', params
+})
+
+/**
+ * 删除轮播图
+ * @param {*} data
+ * @returns
+ */
+export const deleteBanner = (id) => request({
+  url: `/admin/banner/${id}`, method: 'delete'
+})
+/**
+ * 更新轮播图
+ * @param {*} data
+ * @returns
+ */
+export const UpdateBanner = (data, id) => request({
+  url: `/admin/banner/${id}`, method: 'put', data
+})
+/**
+ * 查询轮播图详情
+ * @param {*} params
+ * @returns
+ */
+export const getBannerDetail = (id) => request({
+  url: `/admin/banner/${id}`
+})

src/api/course.js

+import request from '@/utils/request'
+
+/**
+* 保存课程
+* @param {*} data
+* @returns
+*/
+export const saveCourse = (data) => request({
+  url: '/admin/course',
+  method: 'post',
+  data
+})
+
+/**
+ * 课程列表
+ * @param {*} params
+ * @returns
+ */
+export const getCourseList = (params) => request({
+  url: '/admin/course', params
+})
+
+/**
+ * 删除课程
+ * @param {*} data
+ * @returns
+ */
+export const deleteCourse = (id) => request({
+  url: `/admin/course/${id}`, method: 'delete'
+})
+/**
+ * 更新课程
+ * @param {*} data
+ * @returns
+ */
+export const UpdateCourse = (data, id) => request({
+  url: `/admin/course/${id}`, method: 'put', data
+})
+/**
+ * 查询课程详情
+ * @param {*} params
+ * @returns
+ */
+export const getCourseDetail = (id) => request({
+  url: `/admin/course/${id}`
+})

src/api/game.js

+import request from '@/utils/request'
+
+/**
+* 保存游戏
+* @param {*} data
+* @returns
+*/
+export const saveGame = (data) => request({
+  url: '/admin/game',
+  method: 'post',
+  data
+})
+
+/**
+ * 游戏列表
+ * @param {*} params
+ * @returns
+ */
+export const getGameList = (params) => request({
+  url: '/admin/game', params
+})
+
+/**
+ * 删除游戏
+ * @param {*} data
+ * @returns
+ */
+export const deleteGame = (id) => request({
+  url: `/admin/game/${id}`, method: 'delete'
+})
+/**
+ * 更新游戏
+ * @param {*} data
+ * @returns
+ */
+export const UpdateGame = (data, id) => request({
+  url: `/admin/game/${id}`, method: 'put', data
+})
+/**
+ * 查询游戏详情
+ * @param {*} params
+ * @returns
+ */
+export const getGameDetail = (id) => request({
+  url: `/admin/game/${id}`
+})

src/api/oss.js

+import OSS from 'ali-oss'
+import request from '@/utils/request'
+
+let client
+let stsInfo
+
+/**
+ * 获取 OSS-STS 临时凭证
+ * @returns
+ */
+export const getSTSToken = () => request({ url: '/admin/oss-sts' })
+
+/**
+ * 获取 OSS 客户端
+ * @returns
+ */
+export function getOSSClient() {
+  if (client) {
+    return Promise.resolve(client)
+  }
+
+  return getSTSToken().then((sts) => {
+    stsInfo = sts.data
+    client = new OSS({
+      accessKeyId: sts.data.accessKeyId,
+      accessKeySecret: sts.data.accessKeySecret,
+      stsToken: sts.data.stsToken,
+      bucket: sts.data.bucket,
+      endpoint: sts.data.endpoint,
+      refreshSTSTokenInterval: 25 * 60 * 1000, // 每25min刷新一次
+      refreshSTSToken: () => {
+        return getSTSToken().then((res) => {
+          return {
+            accessKeyId: res.accessKeyId,
+            accessKeySecret: res.accessKeySecret,
+            stsToken: res.stsToken
+          }
+        })
+      }
+    })
+
+    return client
+  })
+}
+
+/**
+ * 上传文件到 OSS
+ * @param {*} file
+ * @returns
+ */
+export function upload(file) {
+  return getOSSClient().then(() => {
+    const data = new FormData()
+    data.append('file', file)
+    const now = new Date()
+    const fileName = `${stsInfo.path}/${now.valueOf()}-${file.name}`
+
+    return client.put(fileName, file).then((res) => res.url)
+  })
+}

src/api/question.js

+import request from '@/utils/request'
+
+/**
+* 保存游戏题库
+* @param {*} data
+* @returns
+*/
+export const saveQuestion = (data) => request({
+  url: '/admin/question',
+  method: 'post',
+  data
+})
+
+/**
+ * 游戏题库列表
+ * @param {*} params
+ * @returns
+ */
+export const getQuestionList = (params) => request({
+  url: '/admin/question', params
+})
+
+/**
+ * 删除游戏题库
+ * @param {*} data
+ * @returns
+ */
+export const deleteQuestion = (id) => request({
+  url: `/admin/question/${id}`, method: 'delete'
+})
+/**
+ * 更新游戏题库
+ * @param {*} data
+ * @returns
+ */
+export const UpdateQuestion = (data, id) => request({
+  url: `/admin/question/${id}`, method: 'put', data
+})
+/**
+ * 拖拽排序
+ * @param {*} data
+ * @returns
+ */
+export const UpdateQuestionSort = (data, id) => request({
+  url: `/admin/question/sort?queId=${id}`, method: 'put', data
+})
+/**
+ * 查询游戏题库详情
+ * @param {*} params
+ * @returns
+ */
+export const getQuestionDetail = (id, params) => request({
+  url: `/admin/question/${id}`, params
+})

src/api/questionnaire.js

+import request from '@/utils/request'
+
+/**
+* 保存问卷调查
+* @param {*} data
+* @returns
+*/
+export const saveQuestionnaire = (data) => request({
+  url: '/admin/questionnaire',
+  method: 'post',
+  data
+})
+
+/**
+ * 问卷调查列表
+ * @param {*} params
+ * @returns
+ */
+export const getQuestionnaireList = (params) => request({
+  url: '/admin/questionnaire', params
+})
+
+/**
+ * 删除问卷调查
+ * @param {*} data
+ * @returns
+ */
+export const deleteQuestionnaire = (id) => request({
+  url: `/admin/questionnaire/${id}`, method: 'delete'
+})
+/**
+ * 更新问卷调查
+ * @param {*} data
+ * @returns
+ */
+export const UpdateQuestionnaire = (data, id) => request({
+  url: `/admin/questionnaire/${id}`, method: 'put', data
+})
+/**
+ * 查询问卷调查详情
+ * @param {*} params
+ * @returns
+ */
+export const getQuestionnaireDetail = (id) => request({
+  url: `/admin/questionnaire/${id}`
+})

src/api/schoolClass.js

+import request from '@/utils/request'
+
+/**
+* 保存班级
+* @param {*} data
+* @returns
+*/
+export const saveSchoolClass = (data) => request({
+  url: '/admin/school-class',
+  method: 'post',
+  data
+})
+
+/**
+ * 班级列表
+ * @param {*} params
+ * @returns
+ */
+export const getSchoolClassList = (params) => request({
+  url: '/admin/school-class', params
+})
+
+/**
+ * 删除班级
+ * @param {*} data
+ * @returns
+ */
+export const deleteSchoolClass = (id) => request({
+  url: `/admin/school-class/${id}`, method: 'delete'
+})
+/**
+ * 更新班级
+ * @param {*} data
+ * @returns
+ */
+export const UpdateSchoolClass = (data, id) => request({
+  url: `/admin/school-class/${id}`, method: 'put', data
+})
+/**
+ * 查询班级详情
+ * @param {*} params
+ * @returns
+ */
+export const getSchoolClassDetail = (id) => request({
+  url: `/admin/school-class/${id}`
+})

src/api/schoolTerm.js

+import request from '@/utils/request'
+
+/**
+* 保存学期
+* @param {*} data
+* @returns
+*/
+export const saveSchoolTerm = (data) => request({
+  url: '/admin/school-term',
+  method: 'post',
+  data
+})
+
+/**
+ * 学期列表
+ * @param {*} params
+ * @returns
+ */
+export const getSchoolTermList = (params) => request({
+  url: '/admin/school-term', params
+})
+
+/**
+ * 删除学期
+ * @param {*} data
+ * @returns
+ */
+export const deleteSchoolTerm = (id) => request({
+  url: `/admin/school-term/${id}`, method: 'delete'
+})
+/**
+ * 更新学期
+ * @param {*} data
+ * @returns
+ */
+export const UpdateSchoolTerm = (data, id) => request({
+  url: `/admin/school-term/${id}`, method: 'put', data
+})
+/**
+ * 查询学期详情
+ * @param {*} params
+ * @returns
+ */
+export const getSchoolTermDetail = (id) => request({
+  url: `/admin/school-term/${id}`
+})

src/api/signIn.js

+import request from '@/utils/request'
+
+/**
+* 保存签到
+* @param {*} data
+* @returns
+*/
+export const saveSignIn = (data) => request({
+  url: '/admin/sign-in',
+  method: 'post',
+  data
+})
+
+/**
+ * 签到列表
+ * @param {*} params
+ * @returns
+ */
+export const getSignInList = (params) => request({
+  url: '/admin/sign-in', params
+})
+
+/**
+ * 删除签到
+ * @param {*} data
+ * @returns
+ */
+export const deleteSignIn = (id) => request({
+  url: `/admin/sign-in/${id}`, method: 'delete'
+})
+/**
+ * 更新签到
+ * @param {*} data
+ * @returns
+ */
+export const UpdateSignIn = (data, id) => request({
+  url: `/admin/sign-in/${id}`, method: 'put', data
+})
+/**
+ * 查询签到详情
+ * @param {*} params
+ * @returns
+ */
+export const getSignInDetail = (id) => request({
+  url: `/admin/sign-in/${id}`
+})
+
+/**
+* 保存签到池
+* @param {*} data
+* @returns
+*/
+export const saveSignClass = (data, id) => request({
+  url: `/admin/sign-class?signId=${id}`,
+  method: 'post',
+  data
+})
+
+/**
+ * 签到池列表
+ */
+export const getSignClassList = (id) => request({
+  url: `/admin/sign-class?signId=${id}`
+})

src/api/student.js

+import request from '@/utils/request'
+
+/**
+ * 学员列表
+ * @param {*} params
+ * @returns
+ */
+export const getStudentList = (params) => request({
+  url: '/admin/student', params
+})
+
+/**
+ * 删除学员
+ * @param {*} data
+ * @returns
+ */
+export const deleteStudent = (id) => request({
+  url: `/admin/student/${id}`, method: 'delete'
+})
+/**
+ * 查询学员详情
+ * @param {*} params
+ * @returns
+ */
+export const getStudentDetail = (id) => request({
+  url: `/admin/student/${id}`
+})

src/api/user.js

+import request from '@/utils/request'
+
+/**
+* 用户列表
+* @param {*} data
+* @returns
+*/
+export const getUserList = (params) => request({
+  url: '/admin/user', params
+})
+
+/**
+ * 登录
+ * @param {*} data
+ * @returns
+ */
+export function login(data) {
+  return request({
+    url: '/admin/login',
+    method: 'post',
+    data
+  })
+}
+
+/**
+* 注册账号
+* @param {*} data
+* @returns
+*/
+export const signUp = (data) => request({
+  url: '/admin/signup',
+  method: 'post',
+  data
+})
+
+/**
+ * 获取验证码
+ * @param {*} params
+ * @returns
+ */
+export const getCaptcha = (params) => request({
+  url: '/admin/captcha', params
+})
+
+/**
+ * 修改密码
+ * @param {*} data
+ * @returns
+ */
+export const changePassword = (data) => request({
+  url: '/admin/change-password', method: 'put', data
+})
+/**
+ * 启用账号
+ * @param {*} data
+ * @returns
+ */
+export const enableUser = (id) => request({
+  url: `/admin/user/${id}/on`, method: 'put'
+})
+/**
+ * 禁用账号
+ * @param {*} data
+ * @returns
+ */
+export const disableUser = (id) => request({
+  url: `/admin/user/${id}/off`, method: 'put'
+})
+
+/**
+ * 找回密码
+ * @param {*} data
+ * @returns
+ */
+export const findPassword = (data) => request({
+  url: '/admin/find-password', method: 'put', data
+})

src/components/Breadcrumb/index.vue

+<template>
+  <el-breadcrumb class="app-breadcrumb" separator="/">
+    <transition-group name="breadcrumb">
+      <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
+        <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>

src/components/Hamburger/index.vue

+<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>

src/components/Question/drawer.vue

+<template>
+  <div>
+    <el-drawer
+      ref="drawer"
+      :show-close="false"
+      :wrapper-closable="false"
+      :title="answer.answerId ?'编辑答案' : '添加答案'"
+      :before-close="handleClose"
+      :visible.sync="dialog"
+      direction="ltr"
+      custom-class="demo-drawer"
+    >
+      <div class="demo-drawer__content">
+        <el-form ref="form" :model="form" :rules="rules" style="margin:20px">
+          <el-form-item label="答案：" prop="content" :label-width="formLabelWidth">
+            <el-input v-model="form.content" placeholder="请输入答案（必填）">
+              <el-select
+                slot="prepend"
+                v-model="form.optCode"
+                filterable
+                allow-create
+                default-first-option
+                style="width:100px"
+                placeholder="请选择"
+              >
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-input>
+          </el-form-item>
+          <el-form-item label="分数：" prop="score" :label-width="formLabelWidth">
+            <el-input v-model="form.score" placeholder="请输入分数" />
+          </el-form-item>
+          <el-form-item style="text-align:center">
+            <el-button @click="handleClose">取 消</el-button>
+            <el-button type="primary" @click="onSubmit('form')">确 定</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+    </el-drawer>
+  </div>
+</template>
+<script>
+import { saveAnswer, UpdateAnswer } from '@/api/answer'
+export default {
+  props: {
+    dialog: Boolean,
+    questionId: String,
+    answer: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      rules: {
+        content: [
+          { required: true, message: '请输入答案内容', trigger: 'blur' }
+        ],
+        score: [
+          { required: true, message: '请输入分数', trigger: 'blur' }
+        ]
+      },
+      form: {
+        optCode: undefined,
+        content: undefined,
+        score: undefined
+      },
+      formLabelWidth: '120px',
+      options: [
+        {
+          value: 'A',
+          label: 'A'
+        },
+        {
+          value: 'B',
+          label: 'B'
+        },
+        {
+          value: 'C',
+          label: 'C'
+        },
+        {
+          value: 'D',
+          label: 'D'
+        },
+        {
+          value: 'true',
+          label: '对'
+        },
+        {
+          value: 'false',
+          label: '错'
+        }
+      ]
+    }
+  },
+  watch: {
+    answer() {
+      if (this.answer) {
+        this.form = this.answer
+      }
+    }
+  },
+  methods: {
+    // 非空判断方法
+    handelNull() {
+      if (this.form.optCode) {
+        if (this.form.content) {
+          if (Number(this.form.score) >= 0) {
+            return true
+          } else {
+            this.$message('请输入分数仅限正整数')
+            return false
+          }
+        } else {
+          this.$message('请输入答案')
+          return false
+        }
+      } else {
+        this.$message('请在灰色下拉菜单中添加选项')
+        return false
+      }
+    },
+    onSubmit(form) {
+      this.$refs[form].validate((valid) => {
+        if (valid) {
+          if (this.handelNull()) {
+            const data = { ...this.form, score: Number(this.form.score) }
+            if (this.answer.answerId) {
+              UpdateAnswer(data, this.answer.answerId).then((res) => {
+                this.$message('修改成功')
+                this.$emit('handleEditDrawer', true)
+                this.form = {
+                  optCode: undefined,
+                  content: undefined,
+                  score: undefined
+                }
+              })
+            } else {
+              data.questionId = this.questionId
+              saveAnswer(data).then((res) => {
+                this.$message('添加成功')
+                this.$emit('handleEditDrawer', true)
+                this.form = {
+                  optCode: undefined,
+                  content: undefined,
+                  score: undefined
+                }
+              })
+            }
+          }
+        } else {
+          return false
+        }
+      })
+    },
+    handleClose() {
+      this.$emit('handleCloseDrawer', true)
+      this.form = {
+        optCode: undefined,
+        content: undefined,
+        score: undefined
+      }
+    }
+  }
+}
+</script>
+<style>
+</style>

src/components/Question/edit.vue

+<template>
+  <div style="padding: 20px">
+    <h2 style="text-align: center">
+      问卷题目{{ questionId ? "编辑" : "添加" }}
+    </h2>
+    <el-form ref="form" :model="form" label-width="90px">
+      <el-form-item label="题目：">
+        <el-input v-model="form.content" placeholder="请输入问题名（必填）">
+          <el-select slot="prepend" v-model="form.questionType" style="width:100px" placeholder="请选择">
+            <el-option label="单选题" value="radio" />
+            <el-option label="多选题" value="checkBox" />
+            <el-option label="判断题" value="switch" />
+            <el-option label="简答题" value="textarea" />
+          </el-select>
+        </el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit">确定</el-button>
+        <el-button @click="$router.go(-1)">返回</el-button>
+      </el-form-item>
+    </el-form>
+    <el-card v-if="questionId && form.questionType !== 'textarea'" shadow="never" body-style="padding:0" class="box-card">
+      <div slot="header" class="clearfix">
+        <h3 style="float:left">答案列表</h3>
+        <el-button
+          type="primary"
+          style="float: right"
+          icon="el-icon-plus"
+          @click="onAddAnswer"
+        >添加答案</el-button>
+      </div>
+      <ul style="list-style-type: none;margin:24px 0 24px -40px">
+        <li v-for="answer in form.answerList" :key="answer.answerId" class="answerli">
+          <div style="flex:1;width: 100%;overflow: hidden;display: flex;" @click="handleEdit(answer)">
+            <span style="width:45px">{{ answer.optCode }}</span>
+            <span style="flex:1">{{ answer.content }}</span>
+            <span style="width:30px">{{ answer.score }}分</span>
+          </div>
+          <el-popconfirm
+            style="width:30px;margin-left:8px"
+            icon="el-icon-info"
+            icon-color="red"
+            title="确定删除这个答案吗？"
+            @onConfirm="handleDelete(answer)"
+          >
+            <el-button slot="reference" type="text" class="deleteQuestion" style="color:red">删除</el-button>
+          </el-popconfirm>
+        </li>
+      </ul>
+    </el-card>
+    <QuestionDrawer
+      :dialog="dialog"
+      :question-id="form.questionId"
+      :answer="answer"
+      :que-id="queId"
+      @handleCloseDrawer="handleCloseDrawer"
+      @handleEditDrawer="handleEditDrawer"
+    />
+  </div>
+</template>
+<script>
+
+import { saveQuestion, UpdateQuestion, getQuestionDetail } from '@/api/question'
+import { deleteAnswer } from '@/api/answer'
+import QuestionDrawer from '@/components/Question/drawer.vue'
+
+export default {
+  components: {
+    QuestionDrawer
+  },
+  props: {
+    questionId: {
+      type: String,
+      required: true
+    },
+    queId: {
+      type: String,
+      required: true
+    },
+    total: {
+      type: Number,
+      required: true
+    }
+  },
+  data() {
+    return {
+      form: {
+        content: undefined,
+        questionType: undefined,
+        queId: undefined,
+        questionId: undefined,
+        answerList: []
+      },
+      answer: {},
+      // 正确答案数据源
+      dialog: false
+    }
+  },
+  watch: {
+    // 用于点击左边改变右边的页面
+    questionId: function() {
+      if (this.questionId) {
+        getQuestionDetail(this.questionId).then((res) => {
+          this.form = res.data
+        })
+      } else {
+        this.form = {
+          content: undefined,
+          questionType: undefined,
+          queId: this.queId,
+          questionId: undefined,
+          answerList: []
+        }
+      }
+    }
+  },
+  methods: {
+    // 添加答案
+    onAddAnswer() {
+      this.answer = {}
+      this.dialog = true
+    },
+    // 编辑答案
+    handleEdit(val) {
+      this.answer = val
+      this.dialog = true
+    },
+    // 删除答案
+    handleDelete(val) {
+      deleteAnswer(val.answerId).then((res) => {
+        this.$message('删除答案成功')
+        getQuestionDetail(this.questionId).then((res) => {
+          this.form = res.data
+        })
+      })
+    },
+    // 关闭答案抽屉
+    handleCloseDrawer() {
+      this.dialog = false
+    },
+    // 编辑答案抽屉成功重新查询列表
+    handleEditDrawer(val) {
+      this.handleCloseDrawer()
+      getQuestionDetail(this.questionId).then((res) => {
+        this.form = res.data
+      })
+    },
+    // 转换特征数组数据格式
+    handleToString(list) {
+      const nameList = []
+      list?.map(item => {
+        nameList.push(item.name)
+      })
+      return nameList.toString()
+    },
+    // 非空判断方法
+    handelNull() {
+      if (this.form.questionType) {
+        if (this.form.content) {
+          return true
+        } else {
+          this.$message('请输入题目')
+          return false
+        }
+      } else {
+        this.$message('请选择题型')
+        return false
+      }
+    },
+    onSubmit() {
+      if (this.handelNull()) {
+        const data = { ...this.form }
+        if (!this.questionId) {
+          saveQuestion({ ...data, queId: this.queId, sortNo: this.total }).then((res) => {
+            this.$message('添加问题成功')
+            this.$emit('handleRefreshQuestion', true)
+            this.$emit('handleEditQuestion', res.data.questionId)
+          })
+        } else {
+          UpdateQuestion({ ...data, queId: this.queId }, this.questionId).then((res) => {
+            this.$message('修改问题成功')
+            this.$emit('handleRefreshQuestion', true)
+          })
+        }
+      }
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+.answerli {
+  width: 100%;
+  overflow: hidden;
+  display: flex;
+  line-height:40px;
+  background-color: white;
+  padding:0 8px;
+  border: 1px solid #f0f2f5;
+}
+.answerli:hover {
+  background-color: rgb(230, 247, 255);
+}
+.answerli:nth-of-type(even) {
+  background: #f0f2f5;
+}
+</style>

src/components/Question/index.vue

+<template>
+  <div class="body">
+    <el-card class="box-card" shadow="never" body-style="padding:0">
+      <div slot="header" class="clearfix">
+        <h3 style="float:left">题库列表</h3>
+        <el-button
+          type="primary"
+          style="float: right"
+          icon="el-icon-plus"
+          @click="handleAdd"
+        >添加题目</el-button>
+      </div>
+      <draggable v-model="tableData" chosen-class="chosen" force-fallback="true" group="people" animation="1000" @end="onEnd">
+        <transition-group>
+          <div v-for="item,index in tableData" :key="index" class="questionli" @click="handleEdit(item)">
+            <span style="width:45px">第{{ index+1 }}题</span>
+            <span style="width:45px">{{ item.questionType === 'radio'?'单选题':item.questionType==='checkBox'?'多选题':item.questionType==='switch'?'判断题':'简答题' }}</span>
+            <span style="flex:1">{{ item.content }}</span>
+            <el-popconfirm
+              style="width:30px"
+              icon="el-icon-info"
+              icon-color="red"
+              title="确定删除这个问题吗？"
+              @onConfirm="handleDelete(item)"
+            >
+              <el-button slot="reference" type="text" style="color:red">删除</el-button>
+            </el-popconfirm>
+          </div>
+        </transition-group>
+      </draggable>
+      <el-pagination
+        v-show="Total!==0"
+        style="float:right; margin:24px 0"
+        :total="Total"
+        :current-page="currentPage"
+        :page-size="pageSize"
+        layout="total, prev, pager, next, sizes"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      />
+    </el-card>
+  </div>
+</template>
+<script>
+import { getQuestionList, deleteQuestion, UpdateQuestionSort } from '@/api/question'
+import draggable from 'vuedraggable'
+
+export default {
+  // 注册draggable组件
+  components: {
+    draggable
+  },
+  props: {
+    queId: {
+      type: String,
+      required: true
+    }
+  },
+  data() {
+    return {
+      tableData: [],
+      pageSize: 20,
+      currentPage: 1,
+      Total: 0 // 条目总数
+    }
+  },
+  watch: {
+    queId: {
+      handler(val) {
+        if (val) {
+          this.onSearch()
+        }
+      },
+      immediate: true // 页面加载时就启动
+    }
+  },
+  mounted() {
+    this.onSearch()
+  },
+  methods: {
+    // 拖拽结束事件
+    onEnd() {
+      const sortList = []
+      this.tableData.map((item, index) => {
+        sortList.push({ ...item, sortNo: index })
+      })
+      UpdateQuestionSort(sortList, this.queId)
+    },
+    handleSizeChange(val) {
+      this.pageSize = val
+      this.changePagination()
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val
+      this.changePagination()
+    },
+    changePagination() {
+      getQuestionList({ queId: this.queId, pageSize: this.pageSize, pageNum: this.currentPage }).then(
+        (res) => {
+          this.tableData = res.data.records
+        }
+      )
+    },
+    // 添加问题
+    handleAdd() {
+      this.$emit('handleAddQuestion', true)
+    },
+    handleEdit(row) {
+      // 向外传送数据row.questionId
+      this.$emit('handleEditQuestion', row.questionId)
+    },
+    handleDelete(row) {
+      deleteQuestion(row.questionId).then(() => {
+        this.$message('删除问题成功')
+        this.onSearch()
+        // 关闭编辑问题页面防止编辑页面还没关闭就删除当前问题了
+        this.$emit('handleCloseQuestion', true)
+      })
+    },
+    onSearch() {
+      getQuestionList({ queId: this.queId, pageSize: this.pageSize }).then(
+        (res) => {
+          this.tableData = res.data.records
+          this.Total = res.data.total
+          this.pageSize = res.data.size
+          this.$emit('setQuestionTotal', res.data.total)
+        }
+      )
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+.questionli {
+  width: 100%;
+  overflow: hidden;
+  display: flex;
+  line-height:40px;
+  background-color: white;
+  padding:0 8px;
+  border: 1px solid #f0f2f5;
+}
+.questionli:nth-of-type(even) {
+  background: #f0f2f5;
+}
+.questionli:hover {
+  background-color: rgb(230, 247, 255);
+}
+</style>

src/components/SvgIcon/index.vue

+<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 :xlink: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>

src/components/UploadImage/index.vue

+<template>
+  <div class="uploadClass">
+    <el-upload
+      action="#"
+      list-type="picture-card"
+      :file-list="fileList"
+      :limit="1"
+      :on-remove="handleRemove"
+      :on-change="handleChange"
+      :auto-upload="false"
+      @http-request="customUploadFile"
+    >
+      <i class="el-icon-plus" />
+    </el-upload>
+  </div>
+</template>
+<script>
+import { uploadFile } from '@/utils/upload'
+export default {
+  props: {
+    icon: String
+  },
+  data() {
+    return {
+      dialogImageUrl: undefined,
+      dialogVisible: false,
+      fileList: []
+    }
+  },
+  watch: {
+    icon() {
+      if (this.icon) {
+        this.fileList = [{ name: 'image', url: this.icon }]
+      } else {
+        this.fileList = []
+      }
+    }
+  },
+  methods: {
+    customUploadFile(val) {
+      uploadFile({ file: val, onSuccess: this.onSuccess, onError: this.onError })
+    },
+    onSuccess(url) {
+      this.$emit('handleChange', url)
+    },
+    onError(e) {
+    },
+    handleRemove(file, fileList) {
+      this.fileList = []
+      this.$emit('handleDeleteIcon', true)
+    },
+    handleChange(file, fileList) {
+      this.customUploadFile(file.raw)
+    }
+  }
+}
+</script>
+<style>
+.uploadClass .el-upload--picture-card {
+  width: 100px;
+  height: 100px;
+  line-height: 106px;
+}
+.el-upload-list--picture-card .el-upload-list__item {
+  width: 100px;
+  height: 100px;
+}
+</style>

src/components/UploadImageList/index.vue

+<template>
+  <div class="uploadClass">
+    <el-upload
+      ref="upload"
+      class="upload-demo"
+      action="#"
+      :limit="9"
+      multiple
+      :on-remove="handleRemove"
+      :on-change="handleChange"
+      :on-exceed="handleExceed"
+      :auto-upload="false"
+      :show-file-list="false"
+      @http-request="customUploadFile"
+    >
+      <el-button slot="trigger" size="small" type="primary">添加图片</el-button>
+    </el-upload>
+  </div>
+</template>
+<script>
+import { uploadFile } from '@/utils/upload'
+export default {
+  methods: {
+    customUploadFile(val) {
+      uploadFile({ file: val, onSuccess: this.onSuccess, onError: this.onError })
+    },
+    onSuccess(url) {
+      this.$emit('handleChange', url)
+    },
+    onError(e) {
+    },
+    handleRemove(file, fileList) {
+    },
+    handleChange(file, fileList) {
+      this.customUploadFile(file.raw)
+      this.$refs.upload.clearFiles()
+    },
+    handleExceed(files, fileList) {
+      this.$message.warning('当前限制选择 9 个文件')
+    }
+  }
+}
+</script>
+<style>
+.uploadClass .el-upload--picture-card {
+  width: 100px;
+  height: 100px;
+  line-height: 106px;
+}
+.el-upload-list--picture-card .el-upload-list__item {
+  width: 100px;
+  height: 100px;
+}
+</style>

src/icons/index.js

+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)

src/icons/svg/app.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1640352608746" class="icon" viewBox="0 0 1026 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4118" xmlns:xlink="http://www.w3.org/1999/xlink" width="128.25" height="128"><defs><style type="text/css"></style></defs><path d="M371.732817 94.172314q25.773475 0 44.112294 17.843175t18.338819 43.616651l0 247.821878q0 25.773475-18.338819 44.112294t-44.112294 18.338819l-247.821878 0q-25.773475 0-43.616651-18.338819t-17.843175-44.112294l0-247.821878q0-25.773475 17.843175-43.616651t43.616651-17.843175l247.821878 0zM371.732817 589.81607q25.773475 0 44.112294 17.843175t18.338819 43.616651l0 248.813166q0 25.773475-18.338819 43.616651t-44.112294 17.843175l-247.821878 0q-25.773475 0-43.616651-17.843175t-17.843175-43.616651l0-248.813166q0-25.773475 17.843175-43.616651t43.616651-17.843175l247.821878 0zM868.367861 589.81607q25.773475 0 43.616651 17.843175t17.843175 43.616651l0 248.813166q0 25.773475-17.843175 43.616651t-43.616651 17.843175l-247.821878 0q-25.773475 0-44.112294-17.843175t-18.338819-43.616651l0-248.813166q0-25.773475 18.338819-43.616651t44.112294-17.843175l247.821878 0zM1006.156825 203.21394q19.82575 19.82575 19.82575 46.590513t-19.82575 45.599226l-184.379477 184.379477q-19.82575 19.82575-46.094869 19.82575t-46.094869-19.82575l-184.379477-184.379477q-18.834463-18.834463-18.834463-45.599226t18.834463-46.590513l184.379477-184.379477q19.82575-18.834463 46.094869-18.834463t46.094869 18.834463z" p-id="4119"></path></svg>

src/icons/svg/appconfig.svg

+<svg t="1640835131030" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9379" width="128" height="128"><path d="M1023.401462 126.021423v227.811239a125.680133 125.680133 0 0 1-125.59481 125.59481h-227.811239a125.680133 125.680133 0 0 1-125.59481-125.637471V126.021423A125.680133 125.680133 0 0 1 669.995413 0.426613h227.811239a125.680133 125.680133 0 0 1 125.59481 125.59481z m-543.931328 539.665201v227.811239a125.680133 125.680133 0 0 1-125.594811 125.552149h-227.811239a125.680133 125.680133 0 0 1-125.552149-125.594811v-227.811239a125.680133 125.680133 0 0 1 125.594811-125.552149h227.768577a125.680133 125.680133 0 0 1 125.594811 125.594811z m0-539.665201v227.811239a125.680133 125.680133 0 0 1-125.594811 125.59481h-227.811239A125.680133 125.680133 0 0 1 0.554597 353.790001V126.021423A126.021423 126.021423 0 0 1 126.106746 0.426613h227.768577a125.680133 125.680133 0 0 1 125.594811 125.59481z m225.336884 822.210863a29.222977 29.222977 0 0 0-34.171686 5.204676l-22.439833 23.122414c0 0.68258-1.066532 0.68258-1.706452 0.682581-1.066532 0-1.407822-0.34129-1.749112-0.682581l-42.490636-42.447974c-0.68258 0-0.68258-1.066532-0.68258-1.749113 0-1.023871 0.34129-1.365161 0.68258-1.706451l22.781124-22.823785a31.057412 31.057412 0 0 0 5.204676-34.171686l-2.772983-5.887257a189.842699 189.842699 0 0 1-8.276288-20.00814l-2.090403-6.228547a29.436284 29.436284 0 0 0-27.9858-20.050802h-2.389032a31.825315 31.825315 0 0 1-32.123944-32.081283c0-17.917738 14.163545-32.123944 32.123944-32.123945h2.389032a29.862896 29.862896 0 0 0 27.9858-20.050802l2.090403-6.185885c3.071612-6.911127 5.545966-14.163545 8.276288-20.050802l2.772983-5.844596a29.222977 29.222977 0 0 0-5.204676-34.171685l-22.781124-22.781124c-0.68258 0-0.68258-1.066532-0.68258-1.706452 0-1.066532 0.34129-1.407822 0.68258-1.749112l41.808055-42.490636c0-0.68258 1.023871-0.68258 1.706452-0.68258 1.023871 0 1.365161 0.34129 1.706451 0.68258l22.823785 22.781124c8.958869 7.934998 22.781124 10.366691 34.129025 5.204676l5.887256-2.772983a189.842699 189.842699 0 0 1 20.050802-8.276288l6.228547-2.090403a29.436284 29.436284 0 0 0 20.050802-27.9858v-2.389032c0-17.960399 14.120884-32.123944 32.081283-32.123944 17.917738 0 32.123944 14.163545 32.123945 32.123944v2.047742a29.862896 29.862896 0 0 0 20.34943 27.9858l6.228547 2.090403c6.911127 3.071612 13.822255 5.503305 20.050802 8.276288l5.844596 2.772983c11.390562 6.185886 25.554107 3.412902 34.171686-5.204676l22.781124-22.781124c0-0.68258 1.066532-0.68258 1.706451-0.68258 1.066532 0 1.407822 0.34129 1.749112 0.68258l42.490636 42.447974c0.68258 0 0.68258 1.066532 0.68258 1.749113 0 1.023871-0.34129 1.365161-0.68258 1.706451l-22.781124 22.823785a32.379912 32.379912 0 0 0-5.204676 34.171686l2.772983 5.887257c3.114273 6.527176 6.228547 13.779594 8.276288 20.00814l2.090403 6.228547a29.436284 29.436284 0 0 0 27.9858 20.050802h2.389032c17.960399 0 32.123944 14.120884 32.123944 32.081283 0 17.917738-14.163545 32.123944-32.123944 32.123945h-2.389032a29.862896 29.862896 0 0 0-27.9858 20.050802l-2.090403 6.185885c-3.071612 6.911127-5.545966 13.822255-8.276288 20.050802l-2.772983 5.844596a29.222977 29.222977 0 0 0 5.204676 34.171686l22.781124 22.781124c0.68258 0 0.68258 0.725242 0.68258 1.706451 0 1.066532-0.34129 1.407822-0.68258 1.749112l-42.490636 42.490636c0 0.34129-1.023871 0.68258-1.706451 0.68258-1.023871 0-1.365161-0.34129-1.706451-0.68258l-22.823785-22.781124a32.379912 32.379912 0 0 0-34.171686-5.204676l-5.887257 2.772983a189.842699 189.842699 0 0 1-20.050802 8.276288l-6.185886 2.090403a29.436284 29.436284 0 0 0-20.050801 27.9858v2.389032c0 17.960399-14.120884 32.123944-32.081284 32.123944a31.825315 31.825315 0 0 1-32.123944-32.123944v-2.389032a29.862896 29.862896 0 0 0-20.050802-27.9858l-6.185886-2.090403c-6.911127-3.071612-13.822255-5.545966-20.050801-8.276288l-5.844596-2.772983zM789.233693 718.415967c-34.768944 0-63.991921 28.839026-63.991921 63.991921s28.839026 63.991921 63.991921 63.991921 63.991921-28.839026 63.991921-63.991921c-0.810564-35.152895-28.455074-63.991921-63.991921-63.991921z" p-id="9380"></path></svg>

src/icons/svg/banner.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1645447002957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1533" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M511.4 844.9m-40 0a40 40 0 1 0 80 0 40 40 0 1 0-80 0Z" p-id="1534"></path><path d="M660 844.9m-40 0a40 40 0 1 0 80 0 40 40 0 1 0-80 0Z" p-id="1535"></path><path d="M362.7 844.9m-40 0a40 40 0 1 0 80 0 40 40 0 1 0-80 0Z" p-id="1536"></path><path d="M898.7 135.7H126.8c-16.5 0-29.8 13.3-29.8 29.8v563.6c0 16.5 13.3 29.8 29.8 29.8h771.9c16.5 0 29.8-13.3 29.8-29.8V165.5c0-16.4-13.4-29.8-29.8-29.8z m-170 104.5c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72c0-39.7 32.3-72 72-72z m65.1 413.2c-18.7 1.3-41.9 0.9-68.4-3.3-39.3-6.3-78.1-20-115.4-40.6-45.6-25.2-89-61-129.1-106.2-38.8-43.9-65.2-39.1-73.9-37.5-32.6 5.9-70.9 42.4-108 102.6-15.1 24.5-27.3 48.7-36 67.3-8.9 19-30.9 28-50.5 20.5-21.7-8.3-31.9-33.3-22-54.3 9.6-20.6 23-47.1 39.7-74.3 50.8-82.8 105.4-130.1 162.5-140.5 25.9-4.7 51.7-1.8 76.7 8.8 24.9 10.5 48.9 28.8 71.5 54.4 59.6 67.4 124.5 107.8 192.8 120.1 50.5 9.1 84.5-1.4 84.9-1.5l-0.4 0.1 10.8 31.8c8.3 24.6-9 50.8-35.2 52.6z" p-id="1537"></path></svg>

src/icons/svg/captcha.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1644474272743" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6773" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M919.561369 245.727541c-0.899486-28.28623-24.311709-55.009871-52.010561-59.8409 0 0-107.385752-16.977673-167.643138-38.420031-75.231425-26.770713-149.681044-85.617983-149.681044-85.617983-23.220864-16.58063-58.83806-15.552208-80.374562 2.372024 0 0-52.704362 53.179177-151.044088 84.22117-90.852194 36.510542-163.464979 40.248679-163.464979 40.248679-27.402093 3.571339-50.991348 28.867468-51.522444 57.147558 0 0-3.690042 145.387251 0.966001 272.985348 1.759063 228.268914 271.994788 453.937606 408.55193 453.937606 134.416386 0 366.709963-157.224858 403.249157-450.619024C925.617295 347.953783 919.561369 245.727541 919.561369 245.727541zM709.887976 445.981401 477.54835 681.152515c-9.899464 10.018168-26.696012 11.174504-38.07927 2.124384l-121.329323-96.414887c-22.289656-17.711384-24.614607-48.538483-4.89038-69.169359 19.587104-20.48966 53.223179-23.199375 75.962066-5.403057l56.322773 44.083008 193.563484-182.358281c20.162202-18.995633 52.216245-18.458397 71.897493 0.325411-0.281409-0.293689-0.35918-0.693802-0.649799-0.984421l1.64036 1.64343c-0.290619-0.290619-0.696872-0.3776-0.99056-0.659009C729.922265 394.23076 729.659275 425.969625 709.887976 445.981401z" p-id="6774"></path></svg>

src/icons/svg/course.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1645409502613" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3940" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M899.456 321.152v526.72c-0.576 31.488-11.52 57.856-32.832 79.168s-47.68 32.256-79.168 32.832h-560c-31.488-0.576-57.92-11.52-79.168-32.832-21.312-21.312-32.256-47.68-32.832-79.168v-672c0.576-31.488 11.52-57.856 32.832-79.168s47.68-32.256 79.168-32.832h672v140.032H316.736c-16.896 0.576-31.232 6.72-42.88 18.368-11.648 11.648-17.472 26.112-17.472 43.328 0 17.216 5.824 31.68 17.472 43.328 11.648 11.648 25.92 17.792 42.88 18.368h314.112v229.248c2.944 0.576 5.696 1.344 8.32 2.176s5.376 0.128 8.32-2.176l67.392-49.856c5.824-2.944 11.2-4.352 16.192-4.352 4.928 0 8.896 1.472 11.84 4.352l67.392 49.856h5.248c2.944 0 5.568-1.152 7.872-3.52 2.304-2.304 3.52-4.928 3.52-7.872v-224h72.512z" p-id="3941"></path></svg>

src/icons/svg/dashboard.svg

+<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>

src/icons/svg/example.svg

+<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>

src/icons/svg/eye-open.svg

+<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>

src/icons/svg/eye.svg

+<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>

src/icons/svg/form.svg

+<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>

src/icons/svg/game.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1640352521427" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2558" width="128" height="128" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"></style></defs><path d="M1008 435.328c-43.52-197.76-163.2-339.136-274.496-332.736h-4.48a184.96 184.96 0 0 0-120.96 44.8 128 128 0 0 1-188.736 2.56 184.96 184.96 0 0 0-123.52-47.36h-5.12C179.456 96.192 59.776 237.632 16.32 435.328c-46.72 209.92 10.88 403.776 128 431.872 85.696 21.12 179.712-53.12 242.432-175.936h253.44c64 123.52 156.736 197.12 242.432 176 114.56-28.8 171.52-222.08 125.44-431.936z m-594.432 11.52h-93.44v97.92h-75.52v-97.92H151.296v-78.72h93.44v-97.92h75.52v97.92h92.8l0.64 78.72z m268.16 9.6a49.28 49.28 0 1 1 46.656-49.28 48 48 0 0 1-46.72 49.28z m148.416 0a49.28 49.28 0 1 1 46.72-49.28 48 48 0 0 1-44.8 49.28h-1.92z" p-id="2559"></path></svg>

src/icons/svg/gamePerson.svg

+<svg t="1641526710072" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5136" width="128" height="128"><path d="M315.597609 894.219711c-62.13867 0-124.393261 0-188.573147 0 0-126.355131 0-252.968887 0-382.249435 63.490354 0 125.046818 0 188.573147 0C315.597609 639.418067 315.597609 765.974062 315.597609 894.219711zM603.685685 893.767018c-60.901509 0-122.853905 0-186.300688 0 0-254.759673 0-508.683912 0-766.051617 62.799822 0 123.42252 0 186.300688 0C603.685685 382.423109 603.685685 637.024689 603.685685 893.767018zM895.189246 894.492526c-62.46245 0-124.032506 0-187.932981 0 0-174.161518 0-348.696784 0-525.524295 61.721953 0 123.860622 0 187.932981 0C895.189246 543.870248 895.189246 718.462275 895.189246 894.492526z" p-id="5137"></path></svg>

src/icons/svg/link.svg

+<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>

src/icons/svg/nested.svg

+<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>

src/icons/svg/password.svg

+<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>

src/icons/svg/phone.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1644474191232" class="icon" viewBox="0 0 1046 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3853" xmlns:xlink="http://www.w3.org/1999/xlink" width="204.296875" height="200"><defs><style type="text/css"></style></defs><path d="M759.763478 616.136348c-53.826783 0-94.47513 48.37287-143.248695 48.372869-48.417391 0-260.85287-209.274435-260.85287-260.786087 0-51.46713 48.39513-76.822261 48.39513-130.226087C404.057043 235.074783 260.763826 0 202.039652 0 143.226435 0 0 104.893217 0 202.039652c0 281.177043 518.500174 820.157217 843.063652 820.157218 89.577739 0 202.150957-94.497391 202.150957-202.128696 0.75687-40.292174-232.114087-203.909565-285.473392-203.909565" p-id="3854"></path></svg>

src/icons/svg/photoWall.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1645409582214" class="icon" viewBox="0 0 1228 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4150" xmlns:xlink="http://www.w3.org/1999/xlink" width="239.84375" height="200"><defs><style type="text/css"></style></defs><path d="M1160.533333 955.733333a68.266667 68.266667 0 0 1-136.533333 0V204.8a68.266667 68.266667 0 0 0-68.266667-68.266667H273.066667a68.266667 68.266667 0 0 0-68.266667 68.266667v750.933333a68.266667 68.266667 0 0 1-136.533333 0V136.533333a136.533333 136.533333 0 0 1 136.533333-136.533333h819.2a136.533333 136.533333 0 0 1 136.533333 136.533333v819.2zM614.4 624.2304a181.725867 181.725867 0 0 1-179.268267-161.041067l-5.597866-46.011733a191.146667 191.146667 0 0 1 50.9952-154.692267 184.32 184.32 0 0 1 267.605333 0 190.327467 190.327467 0 0 1 50.926933 154.624l-5.597866 46.08A181.6576 181.6576 0 0 1 614.4 624.2304z m-318.737067 117.691733a841.591467 841.591467 0 0 1 637.405867 0A38.570667 38.570667 0 0 1 955.733333 778.24V1024H273.066667v-245.76a38.570667 38.570667 0 0 1 22.664533-36.317867z" p-id="4151"></path></svg>

src/icons/svg/question.svg

+<svg t="1641808834314" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3156" width="128" height="128"><path d="M687.510353 284.53208a58.008527 58.008527 0 0 1-58.622915-56.933347V35.90948a15.615711 15.615711 0 0 1 9.72782-13.823745 15.257318 15.257318 0 0 1 16.434896 3.27674l240.686747 233.877273a14.847725 14.847725 0 0 1 3.174341 16.383697 14.540531 14.540531 0 0 1-13.874943 8.908635h-197.525946z m0 56.933347h203.516235a29.74665 29.74665 0 0 1 21.350005 8.447844 30.565835 30.565835 0 0 1 9.21583 21.298806v538.818831a117.245831 117.245831 0 0 1-35.17375 81.560092 113.917893 113.917893 0 0 1-81.713688 32.357801H219.295015a113.764295 113.764295 0 0 1-81.713688-32.357801A117.245831 117.245831 0 0 1 102.407577 910.030908V113.988035A117.245831 117.245831 0 0 1 137.581327 32.427944 113.764295 113.764295 0 0 1 219.295015 0.070143h319.789284a31.231422 31.231422 0 0 1 31.538616 30.719431v196.809159c1.382374 64.152413 53.656607 115.095471 116.887438 113.866694m-409.592422 511.939329h468.164138a29.029863 29.029863 0 0 0 29.337058-28.466673 29.081062 29.081062 0 0 0-29.337058-28.517873H277.917931a29.081062 29.081062 0 0 0-29.337058 28.517873 29.029863 29.029863 0 0 0 29.337058 28.466673z m0-170.851239h468.164138a28.313076 28.313076 0 0 0 20.479622-8.038252 29.234659 29.234659 0 0 0 8.857436-20.428422 28.722669 28.722669 0 0 0-29.337058-28.159479H277.917931a28.722669 28.722669 0 0 0-29.337058 28.159479 29.439455 29.439455 0 0 0 8.806237 20.428422 28.517872 28.517872 0 0 0 20.530821 8.038252z m0-170.544045h292.704984a29.029863 29.029863 0 0 0 29.285859-28.466674 28.978664 28.978664 0 0 0-29.285859-28.466673H277.917931a28.978664 28.978664 0 0 0-29.337058 28.466673 29.029863 29.029863 0 0 0 29.337058 28.466674z" p-id="3157"></path></svg>

src/icons/svg/questionnaire.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1645409696539" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4616" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M774.008 7.664H249.992c-73.6 0-133.472 59.88-133.472 133.472v741.728c0 73.592 59.872 133.472 133.472 133.472H774c73.592 0 133.472-59.88 133.472-133.472V141.136c0.008-73.6-59.872-133.472-133.464-133.472z m0 918.856H249.992a43.704 43.704 0 0 1-43.656-43.656V270.288h611.32v612.576a43.696 43.696 0 0 1-43.648 43.656z" p-id="4617"></path><path d="M722.344 387.752H301.656a44.912 44.912 0 0 0 0 89.824h420.68a44.92 44.92 0 0 0 0.008-89.824zM722.344 557.504H301.656a44.912 44.912 0 0 0 0 89.824h420.68a44.92 44.92 0 0 0 0.008-89.824zM722.344 727.248H301.656a44.912 44.912 0 0 0 0 89.824h420.68a44.92 44.92 0 0 0 0.008-89.824z" p-id="4618"></path></svg>

src/icons/svg/schoolClass.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1645430895027" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2309" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M882.145 156.068h-463.93c-34.161 0-61.855 27.698-61.855 61.856v92.786h-30.931c-34.161 0-61.856 27.698-61.856 61.856V496.28c0 34.161 27.695 61.858 61.856 61.858h123.718c34.155 0 61.855-27.697 61.855-61.858V372.567c0-34.159-27.7-61.856-61.855-61.856h-30.932v-92.786h463.93v494.857H696.57v-30.928c0-9.998-2.356-19.451-6.582-27.819l75.628-130.962c8.521-14.799 3.444-33.707-11.324-42.254-14.802-8.547-33.708-3.474-42.255 11.326l-73.878 127.942a67.121 67.121 0 0 0-3.444-0.09H139.856C105.7 619.997 78 647.693 78 681.854v185.571h618.57V774.64h185.574c34.159 0 61.855-27.697 61.855-61.857V217.925c0.001-34.159-27.695-61.857-61.854-61.857z" p-id="2310"></path></svg>

src/icons/svg/schoolTerm.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1645409895718" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8224" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M870.4 153.6h-84.48v95.6416c0 45.8496-37.5296 84.48-83.3792 83.5584A81.92 81.92 0 0 1 622.08 250.88V153.6h-220.16v95.6416c0 45.8496-37.5296 84.48-83.3792 83.5584A81.92 81.92 0 0 1 238.08 250.88V153.6H153.6a77.0304 77.0304 0 0 0-76.8 76.8v640a77.0304 77.0304 0 0 0 76.8 76.8h716.8a77.0304 77.0304 0 0 0 76.8-76.8V230.4a77.0304 77.0304 0 0 0-76.8-76.8z m0 640a77.0304 77.0304 0 0 1-76.8 76.8H230.4a77.0304 77.0304 0 0 1-76.8-76.8V460.8a77.0304 77.0304 0 0 1 76.8-76.8h563.2a77.0304 77.0304 0 0 1 76.8 76.8z" p-id="8225"></path><path d="M324.9152 301.8496c26.496-2.56 46.2848-25.6 46.2848-52.2752V89.6a51.3536 51.3536 0 0 0-56.1152-50.9696c-26.496 2.56-46.2848 25.6-46.2848 52.2752V250.88a51.3536 51.3536 0 0 0 56.1152 50.9696zM708.9152 301.8496c26.496-2.56 46.2848-25.6 46.2848-52.2752V89.6a51.3536 51.3536 0 0 0-56.1152-50.9696c-26.496 2.56-46.2848 25.6-46.2848 52.2752V250.88a51.3536 51.3536 0 0 0 56.1152 50.9696zM284.16 584.5248h167.6544v32.2304h35.456v-63.4112h-36.5568q3.2256-4.2752 10.752-12.8 6.4512-7.5264 9.6768-11.8272l-34.4064-19.3536a42.5472 42.5472 0 0 0-5.376 7.5264q-15.0528 23.6544-24.704 36.5312h-31.1808l18.2784-8.6016q-5.376-8.5504-15.0528-23.6288a152.576 152.576 0 0 0-9.6768-16.128L337.92 518.9632c1.4336 2.8672 3.9168 7.168 7.5264 12.8 5.7344 9.3184 10.0096 16.4864 12.8 21.4784h-43.008l11.8272-7.5264a464.4096 464.4096 0 0 0-32.2304-38.6816l-26.88 18.2784a298.2656 298.2656 0 0 1 22.5792 27.9296H248.6784v63.4112H284.16z" p-id="8226"></path><path d="M441.0368 633.9584v-31.1808H296.96v31.1808h93.4912l-34.3808 22.5536V663.04H244.3776v31.1808h111.7696v16.1024c0 10.0608-6.0928 15.0528-18.2784 15.0528q-16.128 0-35.456-1.0752a175.9744 175.9744 0 0 1 8.6016 32.2304q21.4784 0 46.08-1.0496 35.456-1.1008 35.456-34.4064v-26.9312H491.52V663.04h-94.5408zM661.3504 636.1088q0 68.7616-19.3536 93.4912a256.896 256.896 0 0 0-27.9296-27.9296H652.8v-31.1808h-13.9776v-108.544H652.8v-30.08h-13.9776v-21.504h-32.2816v21.504h-38.6816v-21.504h-31.1808v21.504h-17.1776v30.08h17.1776v108.544h-20.48v31.1808h35.456a231.68 231.68 0 0 1-34.3808 35.456c1.408 1.4336 4.3008 3.9168 8.6016 7.5264q9.6512 8.576 16.1024 13.952l37.6064-39.7568-22.5536-17.1776h55.8848l-22.5792 17.1776a317.44 317.44 0 0 1 33.28 37.6064l18.2528-13.952a234.5984 234.5984 0 0 1 19.3536 13.952 49.9712 49.9712 0 0 0 5.376 3.2256q21.4528-32.2048 24.704-79.5136h34.4064v32.2304c0 7.9104-3.9424 11.8272-11.8272 11.8272q-8.6016 0-21.504-1.0752a137.0624 137.0624 0 0 1 4.3008 19.3536q2.1504 8.5504 3.2256 12.8c13.6192 0 24.7296-0.384 33.28-1.0752q23.6032-2.2016 23.6288-25.8048v-209.4592h-95.4624z m-54.8096 34.3808h-38.6816v-18.2784h38.6816z m0-46.208h-38.6816v-17.2032h38.6816z m0-45.1328h-38.6816v-17.2032h38.6816z m85.9648-27.9552h33.28v35.4816h-33.28z m0 65.5616h33.28v33.28h-33.28z" p-id="8227"></path></svg>

src/icons/svg/signIn.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1645528502907" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5754" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M680.896 483.968l-192.192 233.344a33.664 33.664 0 0 1-25.92 12.672h-0.192a33.664 33.664 0 0 1-25.92-12.992L342.848 600.256a41.984 41.984 0 0 1 2.816-54.912 32.64 32.64 0 0 1 49.472 3.136l67.968 84.608 166.08-201.6a32.64 32.64 0 0 1 49.536-0.768 42.112 42.112 0 0 1 2.176 53.248m146.176-379.584H757.12V220.672c0.128 43.008-31.104 78.016-69.888 78.208H336.768c-38.784-0.192-70.016-35.2-69.952-78.208V143.68l-0.128-39.296H196.48c-38.464 0.064-69.696 34.688-69.76 77.44V882.56c0 42.752 31.36 77.504 69.76 77.504h631.04c38.528-0.064 69.696-34.688 69.76-77.44V181.824c0-42.688-31.552-77.44-70.208-77.44" p-id="5755"></path><path d="M683.392 90.048a46.016 46.016 0 0 0-40.32-26.048H384.96c-17.28 0-32.256 10.496-40.32 26.048a56.896 56.896 0 0 0-6.656 26.368v51.648c0 28.992 21.056 52.48 46.976 52.48h258.24c25.856 0 46.848-23.488 46.848-52.48V116.48a56.32 56.32 0 0 0-6.592-26.368" p-id="5756"></path></svg>

src/icons/svg/student.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1645409347230" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1992" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M204.096 118.592c10.496 10.24 14.848 23.744 13.12 40.704v700.032c-0.576 16.896-5.824 30.336-15.744 40.256-9.92 9.92-23.36 15.168-40.256 15.744-14.592-0.576-27.456-5.824-38.528-15.744-11.072-9.92-16.896-23.36-17.472-40.256V159.296c0.576-14.592 6.72-27.392 18.368-38.528 11.648-11.072 25.92-16.896 42.88-17.472 14.592 0 27.136 5.056 37.632 15.296z m685.568 17.472c21.312 21.312 32.256 47.68 32.832 79.168v593.28c-0.576 31.488-11.52 57.856-32.832 79.168s-47.68 32.256-79.168 32.832H351.104c-16.896 0-30.336-5.12-40.256-15.296-9.92-10.24-15.168-23.744-15.744-40.704V159.296c0.576-16.896 5.824-30.464 15.744-40.704 9.92-10.176 23.296-15.296 40.256-15.296h459.392c31.488 0.576 57.92 11.52 79.168 32.768z m-119.872 567.04c4.928-6.72 3.648-14.464-3.968-23.168-5.824-22.72-17.472-41.408-35.008-56-17.472-14.592-37.632-22.144-60.352-22.72h-11.392c-8.192 5.824-17.664 10.24-28.416 13.12-10.816 2.944-21.76 4.352-32.832 4.352s-21.44-1.472-31.04-4.352c-9.6-2.944-19.712-7.296-30.208-13.12h-11.392c-22.72 0.576-42.88 8.192-60.352 22.72-17.472 14.592-29.184 33.28-35.008 56-2.368 8.768-1.344 16.512 3.072 23.168 4.352 6.72 10.944 10.048 19.712 10.048h296.64c8.768 0 15.616-3.328 20.544-10.048z m-250.24-332.096c-21.888 20.992-33.088 47.552-33.664 79.616 0.576 34.432 11.84 63.296 33.664 86.656 21.888 23.36 49.728 35.328 83.584 35.904 34.432-0.576 62.592-11.648 84.416-33.28 21.888-21.568 33.088-49.6 33.664-83.968-0.576-34.432-11.84-62.4-33.664-83.968-21.888-21.568-50.048-32.64-84.416-33.28-33.856 0.512-61.696 11.328-83.584 32.32z" p-id="1993"></path></svg>

src/icons/svg/table.svg

+<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>

src/icons/svg/tree.svg

+<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>

src/icons/svg/user.svg

+<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>

src/icons/svg/wx.svg

+<svg t="1640834968791" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5597" width="64" height="64"><path d="M693.12 347.264c11.776 0 23.36 0.896 35.008 2.176-31.36-146.048-187.456-254.528-365.696-254.528C163.2 94.912 0 230.656 0 403.136c0 99.52 54.272 181.248 145.024 244.736L108.8 756.864l126.72-63.488c45.312 8.896 81.664 18.112 126.912 18.112 11.392 0 22.656-0.512 33.792-1.344-7.04-24.256-11.2-49.6-11.2-76.032C385.088 475.776 521.024 347.264 693.12 347.264zM498.304 249.024c27.392 0 45.376 17.984 45.376 45.248 0 27.136-17.984 45.312-45.376 45.312-27.072 0-54.336-18.176-54.336-45.312C443.968 266.944 471.168 249.024 498.304 249.024zM244.672 339.584c-27.2 0-54.592-18.176-54.592-45.312 0-27.264 27.392-45.248 54.592-45.248S289.92 266.944 289.92 294.272C289.92 321.408 271.872 339.584 244.672 339.584zM1024 629.76c0-144.896-145.024-262.976-307.904-262.976-172.48 0-308.224 118.144-308.224 262.976 0 145.28 135.808 262.976 308.224 262.976 36.096 0 72.512-9.024 108.736-18.112l99.392 54.528-27.264-90.624C969.728 783.872 1024 711.488 1024 629.76zM616.128 584.384c-17.984 0-36.224-17.92-36.224-36.224 0-18.048 18.24-36.224 36.224-36.224 27.52 0 45.376 18.176 45.376 36.224C661.504 566.464 643.648 584.384 616.128 584.384zM815.488 584.384c-17.856 0-36.032-17.92-36.032-36.224 0-18.048 18.112-36.224 36.032-36.224 27.264 0 45.376 18.176 45.376 36.224C860.864 566.464 842.752 584.384 815.488 584.384z" p-id="5598"></path></svg>

src/icons/svgo.yml

+# 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'

src/layout/components/AppMain.vue

+<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>

src/layout/components/Navbar.vue

+<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="click">
+        <div class="avatar-wrapper">
+          <img src="../../icons/logo.jpg" class="user-avatar">
+          <i class="el-icon-caret-bottom" />
+        </div>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item @click.native="handlePassword">
+            <span>修改密码</span>
+          </el-dropdown-item>
+          <el-dropdown-item @click.native="logout">
+            <span>安全退出</span>
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
+    </div>
+    <el-dialog
+      title="修改密码"
+      :visible.sync="dialogFormVisible"
+      :show-close="false"
+      :close-on-click-modal="false"
+      style="width:800px; margin:auto"
+    >
+      <el-form
+        ref="ruleForm"
+        :model="ruleForm"
+        :rules="rules"
+        label-width="110px"
+        class="demo-ruleForm"
+      >
+        <el-form-item label="原密码" prop="originPassword">
+          <el-input ref="originPassword" v-model="ruleForm.originPassword" type="password" />
+        </el-form-item>
+        <el-form-item label="新密码" prop="newPassword">
+          <el-input ref="newPassword" v-model="ruleForm.newPassword" type="password" />
+        </el-form-item>
+        <el-form-item label="再次输入密码" prop="newPassword2">
+          <el-input ref="newPassword2" v-model="ruleForm.newPassword2" type="password" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submit('ruleForm')">修改密码</el-button>
+        <el-button @click="onCancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import Breadcrumb from '@/components/Breadcrumb'
+import Hamburger from '@/components/Hamburger'
+import { changePassword } from '@/api/user'
+import md5 from 'js-md5'
+
+export default {
+  components: {
+    Breadcrumb,
+    Hamburger
+  },
+  data() {
+    return {
+      dialogFormVisible: false,
+      ruleForm: {
+        originPassword: undefined,
+        newPassword: undefined,
+        newPassword2: undefined
+      },
+      rules: {
+        originPassword: [
+          { required: true, message: '请输入原密码', trigger: 'blur' }
+        ],
+        newPassword: [
+          { required: true, message: '请输入新密码', trigger: 'blur' }
+        ],
+        newPassword2: [
+          { required: true, message: '请再次输入新密码', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  computed: {
+    ...mapGetters(['sidebar', 'avatar'])
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('app/toggleSideBar')
+    },
+    async logout() {
+      await this.$store.dispatch('user/logout')
+      this.$router.push(`/login?redirect=${this.$route.fullPath}`)
+    },
+    handlePassword() {
+      this.ruleForm.originPassword = ''
+      this.dialogFormVisible = true
+    },
+    submit(formName) {
+      this.$refs[formName].validate((val) => {
+        if (val) {
+          if (this.ruleForm.newPassword !== this.ruleForm.newPassword2) {
+            this.$message('两次密码不一致请重新输入')
+            this.$refs.newPassword2.focus()
+          } else {
+            var newData = { ...this.ruleForm }
+            newData.originPassword = md5(newData.originPassword)
+            newData.newPassword = md5(newData.newPassword)
+            changePassword(newData).then(() => {
+              this.$message('密码修改成功请重新登录')
+              this.onCancel()
+              this.logout()
+            })
+          }
+        } else {
+          return false
+        }
+      })
+    },
+    onCancel() {
+      this.dialogFormVisible = false
+      this.ruleForm = {
+        originPassword: undefined,
+        newPassword: undefined,
+        newPassword2: undefined
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.navbar {
+  height: 50px;
+  overflow: hidden;
+  position: relative;
+  background: #fff;
+  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+
+  .hamburger-container {
+    line-height: 46px;
+    height: 100%;
+    float: left;
+    cursor: pointer;
+    transition: background 0.3s;
+    -webkit-tap-highlight-color: transparent;
+
+    &:hover {
+      background: rgba(0, 0, 0, 0.025);
+    }
+  }
+
+  .breadcrumb-container {
+    float: left;
+  }
+
+  .right-menu {
+    float: right;
+    height: 100%;
+    line-height: 50px;
+
+    &:focus {
+      outline: none;
+    }
+
+    .right-menu-item {
+      display: inline-block;
+      padding: 0 8px;
+      height: 100%;
+      font-size: 18px;
+      color: #5a5e66;
+      vertical-align: text-bottom;
+
+      &.hover-effect {
+        cursor: pointer;
+        transition: background 0.3s;
+
+        &:hover {
+          background: rgba(0, 0, 0, 0.025);
+        }
+      }
+    }
+
+    .avatar-container {
+      margin-right: 30px;
+
+      .avatar-wrapper {
+        margin-top: 5px;
+        position: relative;
+
+        .user-avatar {
+          cursor: pointer;
+          width: 40px;
+          height: 40px;
+          border-radius: 10px;
+        }
+
+        .el-icon-caret-bottom {
+          cursor: pointer;
+          position: absolute;
+          right: -20px;
+          top: 25px;
+          font-size: 12px;
+        }
+      }
+    }
+  }
+}
+</style>

src/layout/components/Sidebar/FixiOSBug.js

+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)
+        }
+      }
+    }
+  }
+}

src/layout/components/Sidebar/Item.vue

+<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) {
+      if (icon.includes('el-icon')) {
+        vnodes.push(<i class={[icon, 'sub-el-icon']} />)
+      } else {
+        vnodes.push(<svg-icon icon-class={icon}/>)
+      }
+    }
+
+    if (title) {
+      vnodes.push(<span slot='title'>{(title)}</span>)
+    }
+    return vnodes
+  }
+}
+</script>
+
+<style scoped>
+.sub-el-icon {
+  color: currentColor;
+  width: 1em;
+  height: 1em;
+}
+</style>

src/layout/components/Sidebar/Link.vue

+<template>
+  <component :is="type" v-bind="linkProps(to)">
+    <slot />
+  </component>
+</template>
+
+<script>
+import { isExternal } from '@/utils/validate'
+
+export default {
+  props: {
+    to: {
+      type: String,
+      required: true
+    }
+  },
+  computed: {
+    isExternal() {
+      return isExternal(this.to)
+    },
+    type() {
+      if (this.isExternal) {
+        return 'a'
+      }
+      return 'router-link'
+    }
+  },
+  methods: {
+    linkProps(to) {
+      if (this.isExternal) {
+        return {
+          href: to,
+          target: '_blank',
+          rel: 'noopener'
+        }
+      }
+      return {
+        to: to
+      }
+    }
+  }
+}
+</script>

src/layout/components/Sidebar/Logo.vue

+<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: '电网教培信息管理系统',
+      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>

src/layout/components/Sidebar/SidebarItem.vue

+<template>
+  <div v-if="!item.hidden">
+    <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
+      <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
+        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
+          <item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="onlyOneChild.meta.title" />
+        </el-menu-item>
+      </app-link>
+    </template>
+
+    <el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
+      <template slot="title">
+        <item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="item.meta.title" />
+      </template>
+      <sidebar-item
+        v-for="child in item.children"
+        :key="child.path"
+        :is-nest="true"
+        :item="child"
+        :base-path="resolvePath(child.path)"
+        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 => {
+        if (item.hidden) {
+          return false
+        } else {
+          // Temp set(will be used if only has one showing child)
+          this.onlyOneChild = item
+          return true
+        }
+      })
+
+      // 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, path: '', 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>

src/layout/components/Sidebar/index.vue

+<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.path" :item="route" :base-path="route.path" />
+      </el-menu>
+    </el-scrollbar>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import Logo from './Logo'
+import SidebarItem from './SidebarItem'
+import variables from '@/styles/variables.scss'
+import { getUserId } from '@/utils/auth'
+
+export default {
+  components: { SidebarItem, Logo },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ]),
+    routes() {
+      var newData = this.$router.options.routes
+      if (getUserId() !== '1') {
+        newData.splice(6, 1)
+      }
+      return newData
+    },
+    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
+    }
+  }
+}
+</script>

src/layout/components/index.js

+export { default as Navbar } from './Navbar'
+export { default as Sidebar } from './Sidebar'
+export { default as AppMain } from './AppMain'

src/layout/index.vue

+<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%;
+  background-color: #f0f2f5;
+
+  &.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>

src/layout/mixin/ResizeHandler.js

+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 })
+        }
+      }
+    }
+  }
+}

src/main.js

+import Vue from 'vue'
+
+import 'normalize.css/normalize.css' // A modern alternative to CSS resets
+
+import ElementUI from 'element-ui'
+import 'element-ui/lib/theme-chalk/index.css'
+// import locale from 'element-ui/lib/locale/lang/en' // 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 ! ! !
+ */
+// if (process.env.NODE_ENV === 'production') {
+//   const { mockXHR } = require('../mock')
+// 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)
+})

src/permission.js

+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', '/login/forgotPassword', '/login/register'] // 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 {
+          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()
+})

src/router/index.js

+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'/'el-icon-x' 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: '/',
+    component: Layout,
+    redirect: '/dashboard',
+    children: [{
+      path: 'dashboard',
+      name: 'Dashboard',
+      component: () => import('@/views/dashboard/index'),
+      meta: { title: '工作台', icon: 'dashboard' }
+    }]
+  },
+
+  // 学员管理
+  {
+    path: '/students',
+    component: Layout,
+    meta: { title: '学员管理', icon: 'form' },
+    children: [
+      {
+        path: 'schoolTerm',
+        name: '学期列表',
+        component: () => import('@/views/students/schoolTerm/list'),
+        meta: { title: '学期列表', icon: 'schoolTerm' }
+      },
+      {
+        hidden: true,
+        path: 'schoolTerm/edit',
+        name: 'schoolTermEdit',
+        component: () => import('@/views/students/schoolTerm/edit'),
+        meta: { title: '学期编辑', icon: 'question' }
+      },
+      {
+        path: 'schoolClass',
+        name: '班级列表',
+        component: () => import('@/views/students/schoolClass/list'),
+        meta: { title: '班级列表', icon: 'schoolClass' }
+      },
+      {
+        hidden: true,
+        path: 'schoolClass/edit',
+        name: 'schoolClassEdit',
+        component: () => import('@/views/students/schoolClass/edit'),
+        meta: { title: '班级编辑', icon: 'question' }
+      },
+      {
+        path: 'sutdentsList',
+        name: '学员列表',
+        component: () => import('@/views/students/studentsList'),
+        meta: { title: '学员列表', icon: 'student' }
+      },
+      {
+        hidden: true,
+        path: 'students/detail',
+        name: 'studentDetail',
+        component: () => import('@/views/students/studentDetail'),
+        meta: { title: '学员详情', icon: 'question' }
+      }
+    ]
+  },
+
+  // 课程管理
+  {
+    path: '/course',
+    component: Layout,
+    meta: { title: '课程管理', icon: 'course' },
+    children: [
+      {
+        path: 'course',
+        name: '课程列表',
+        component: () => import('@/views/course/index'),
+        meta: { title: '课程列表', icon: 'course' }
+      },
+      {
+        hidden: true,
+        path: 'course/edit',
+        name: 'courseEdit',
+        component: () => import('@/views/course/edit'),
+        meta: { title: '课程编辑', icon: 'question' }
+      }
+    ]
+  },
+
+  // 签到管理
+  {
+    path: '/signIn',
+    component: Layout,
+    meta: { title: '签到管理', icon: 'signIn' },
+    children: [
+      {
+        path: 'signIn',
+        name: '签到列表',
+        component: () => import('@/views/signIn/index'),
+        meta: { title: '签到列表', icon: 'signIn' }
+      },
+      {
+        hidden: true,
+        path: 'signIn/edit',
+        name: 'signInEdit',
+        component: () => import('@/views/signIn/edit'),
+        meta: { title: '签到编辑', icon: 'question' }
+      }
+    ]
+  },
+
+  // 轮播图
+  {
+    path: '/banners',
+    component: Layout,
+    meta: { title: '轮播图管理', icon: 'banner' },
+    children: [
+      {
+        path: 'banners',
+        name: '轮播图列表',
+        component: () => import('@/views/banners/index'),
+        meta: { title: '轮播图列表', icon: 'banner' }
+      },
+      {
+        hidden: true,
+        path: 'banners/edit',
+        name: 'bannersEdit',
+        component: () => import('@/views/banners/edit'),
+        meta: { title: '轮播图编辑', icon: 'question' }
+      }
+    ]
+  },
+
+  // 照片墙
+  {
+    path: '/photoWall',
+    component: Layout,
+    meta: { title: '照片墙', icon: 'form' },
+    children: [
+      {
+        path: 'photoWall',
+        name: '照片列表',
+        component: () => import('@/views/photoWall/index'),
+        meta: { title: '照片墙', icon: 'photoWall' }
+      }
+    ]
+  },
+
+  // 问卷调查
+  {
+    path: '/questionnaire',
+    component: Layout,
+    meta: { title: '问卷调查', icon: 'form' },
+    children: [
+      {
+        path: 'questionnaire',
+        name: '问卷列表',
+        component: () => import('@/views/questionnaire/index'),
+        meta: { title: '问卷列表', icon: 'questionnaire' }
+      },
+      {
+        hidden: true,
+        path: 'questionnaire/edit',
+        name: 'questionnaireEdit',
+        component: () => import('@/views/questionnaire/edit'),
+        meta: { title: '问卷编辑', icon: 'question' }
+      }
+    ]
+  },
+  {
+    path: '/login',
+    component: () => import('@/views/login/index'),
+    hidden: true
+  },
+
+  {
+    path: '/login/register',
+    component: () => import('@/views/login/register'),
+    hidden: true,
+    name: 'register'
+  },
+
+  {
+    path: '/login/forgotPassword',
+    component: () => import('@/views/login/forgotPassword'),
+    hidden: true,
+    name: 'forgotPassword'
+  },
+
+  {
+    path: '/404',
+    component: () => import('@/views/404'),
+    hidden: true
+  },
+
+  // 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

src/settings.js

+module.exports = {
+
+  title: '电网教培信息管理系统',
+
+  /**
+   * @type {boolean} true | false
+   * @description Whether fix the header
+   */
+  fixedHeader: false,
+
+  /**
+   * @type {boolean} true | false
+   * @description Whether show the logo in sidebar
+   */
+  sidebarLogo: false
+}

src/store/getters.js

+const getters = {
+  sidebar: state => state.app.sidebar,
+  device: state => state.app.device,
+  token: state => state.user.token,
+  avatar: state => state.user.avatar,
+  name: state => state.user.name
+}
+export default getters

src/store/index.js

+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'
+import game from './modules/game'
+
+Vue.use(Vuex)
+
+const store = new Vuex.Store({
+  modules: {
+    app,
+    settings,
+    user,
+    game
+  },
+  getters
+})
+
+export default store

src/store/modules/app.js

+import Cookies from 'js-cookie'
+
+const state = {
+  sidebar: {
+    opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true,
+    withoutAnimation: false
+  },
+  device: 'desktop'
+}
+
+// 定义Mutations
+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
+}

src/store/modules/game.js

+const state = {
+  wordList: []// 设置初始特征列表
+}
+
+const getters = {
+  getwordList(state) {
+    return state.wordList // 返回当前特征列表
+  }
+}
+
+// 定义Mutations
+const mutations = {
+  setWordList(state, val) {
+    state.wordList = val // 改变当前特征列表
+  }
+}
+
+const actions = {
+  setWordListValue({ commit, state }, val) {
+    commit('setWordList', val)// 调用mutations方法
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  getters,
+  mutations,
+  actions
+}

src/store/modules/settings.js

+import defaultSettings from '@/settings'
+
+const { showSettings, fixedHeader, sidebarLogo } = defaultSettings
+
+const state = {
+  showSettings: showSettings,
+  fixedHeader: fixedHeader,
+  sidebarLogo: sidebarLogo
+}
+
+const mutations = {
+  CHANGE_SETTING: (state, { key, value }) => {
+    // eslint-disable-next-line no-prototype-builtins
+    if (state.hasOwnProperty(key)) {
+      state[key] = value
+    }
+  }
+}
+
+const actions = {
+  changeSetting({ commit }, data) {
+    commit('CHANGE_SETTING', data)
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}
+

src/store/modules/user.js

+import { login } from '@/api/user'
+import { getToken, setToken, removeToken, setUserId, removeUserId } from '@/utils/auth'
+import { resetRouter } from '@/router'
+import md5 from 'js-md5'
+
+const getDefaultState = () => {
+  return {
+    token: getToken()
+  }
+}
+
+const state = getDefaultState()
+
+// 定义Mutations
+const mutations = {
+  RESET_STATE: (state) => {
+    Object.assign(state, getDefaultState())
+  },
+  SET_TOKEN: (state, token) => {
+    state.token = token
+  }
+}
+// 在actions里面增加一个才可以在页面加
+// this.$store.dispatch('user/login', this.loginForm)调用api里面的方法
+const actions = {
+  // user login
+  login({ commit }, userInfo) {
+    const { userName, password } = userInfo
+    return new Promise((resolve, reject) => {
+      login({ userName: userName.trim(), password: md5(password) }).then(response => {
+        const { data } = response
+        commit('SET_TOKEN', data.token)
+        setToken(data.token)
+        setUserId(data.user.userId)
+        resolve()
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+
+  // user logout
+  logout({ commit, state }) {
+    return new Promise((resolve, reject) => {
+      removeToken() // must remove  token  first
+      removeUserId()
+      resetRouter()
+      commit('RESET_STATE')
+      resolve()
+    })
+  },
+
+  // remove token
+  resetToken({ commit }) {
+    return new Promise(resolve => {
+      removeToken() // must remove  token  first
+      removeUserId()
+      commit('RESET_STATE')
+      resolve()
+    })
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}
+