.

.editorconfig

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

.env.development

@@ -0,0 +1,5 @@
+# just a flag
+ENV = 'development'
+
+# base api
+VUE_APP_BASE_API = '/api'

.env.production

@@ -0,0 +1,6 @@
+# just a flag
+ENV = 'production'
+
+# base api
+VUE_APP_BASE_API = '/prod-api'
+

.env.staging

@@ -0,0 +1,8 @@
+NODE_ENV = production
+
+# just a flag
+ENV = 'staging'
+
+# base api
+VUE_APP_BASE_API = '/stage-api'
+

.eslintignore

@@ -0,0 +1,4 @@
+build/*.js
+src/assets
+public
+dist

.eslintrc.js

@@ -0,0 +1,198 @@
+module.exports = {
+  root: true,
+  parserOptions: {
+    parser: 'babel-eslint',
+    sourceType: 'module'
+  },
+  env: {
+    browser: true,
+    node: true,
+    es6: true,
+  },
+  extends: ['plugin:vue/recommended', 'eslint:recommended'],
+
+  // add your custom rules here
+  //it is base on https://github.com/vuejs/eslint-config-vue
+  rules: {
+    "vue/max-attributes-per-line": [2, {
+      "singleline": 10,
+      "multiline": {
+        "max": 1,
+        "allowFirstLine": false
+      }
+    }],
+    "vue/singleline-html-element-content-newline": "off",
+    "vue/multiline-html-element-content-newline":"off",
+    "vue/name-property-casing": ["error", "PascalCase"],
+    "vue/no-v-html": "off",
+    'accessor-pairs': 2,
+    'arrow-spacing': [2, {
+      'before': true,
+      'after': true
+    }],
+    'block-spacing': [2, 'always'],
+    'brace-style': [2, '1tbs', {
+      'allowSingleLine': true
+    }],
+    'camelcase': [0, {
+      'properties': 'always'
+    }],
+    'comma-dangle': [2, 'never'],
+    'comma-spacing': [2, {
+      'before': false,
+      'after': true
+    }],
+    'comma-style': [2, 'last'],
+    'constructor-super': 2,
+    'curly': [2, 'multi-line'],
+    'dot-location': [2, 'property'],
+    'eol-last': 2,
+    'eqeqeq': ["error", "always", {"null": "ignore"}],
+    'generator-star-spacing': [2, {
+      'before': true,
+      'after': true
+    }],
+    'handle-callback-err': [2, '^(err|error)$'],
+    'indent': [2, 2, {
+      'SwitchCase': 1
+    }],
+    'jsx-quotes': [2, 'prefer-single'],
+    'key-spacing': [2, {
+      'beforeColon': false,
+      'afterColon': true
+    }],
+    'keyword-spacing': [2, {
+      'before': true,
+      'after': true
+    }],
+    'new-cap': [2, {
+      'newIsCap': true,
+      'capIsNew': false
+    }],
+    'new-parens': 2,
+    'no-array-constructor': 2,
+    'no-caller': 2,
+    'no-console': 'off',
+    'no-class-assign': 2,
+    'no-cond-assign': 2,
+    'no-const-assign': 2,
+    'no-control-regex': 0,
+    'no-delete-var': 2,
+    'no-dupe-args': 2,
+    'no-dupe-class-members': 2,
+    'no-dupe-keys': 2,
+    'no-duplicate-case': 2,
+    'no-empty-character-class': 2,
+    'no-empty-pattern': 2,
+    'no-eval': 2,
+    'no-ex-assign': 2,
+    'no-extend-native': 2,
+    'no-extra-bind': 2,
+    'no-extra-boolean-cast': 2,
+    'no-extra-parens': [2, 'functions'],
+    'no-fallthrough': 2,
+    'no-floating-decimal': 2,
+    'no-func-assign': 2,
+    'no-implied-eval': 2,
+    'no-inner-declarations': [2, 'functions'],
+    'no-invalid-regexp': 2,
+    'no-irregular-whitespace': 2,
+    'no-iterator': 2,
+    'no-label-var': 2,
+    'no-labels': [2, {
+      'allowLoop': false,
+      'allowSwitch': false
+    }],
+    'no-lone-blocks': 2,
+    'no-mixed-spaces-and-tabs': 2,
+    'no-multi-spaces': 2,
+    'no-multi-str': 2,
+    'no-multiple-empty-lines': [2, {
+      'max': 1
+    }],
+    'no-native-reassign': 2,
+    'no-negated-in-lhs': 2,
+    'no-new-object': 2,
+    'no-new-require': 2,
+    'no-new-symbol': 2,
+    'no-new-wrappers': 2,
+    'no-obj-calls': 2,
+    'no-octal': 2,
+    'no-octal-escape': 2,
+    'no-path-concat': 2,
+    'no-proto': 2,
+    'no-redeclare': 2,
+    'no-regex-spaces': 2,
+    'no-return-assign': [2, 'except-parens'],
+    'no-self-assign': 2,
+    'no-self-compare': 2,
+    'no-sequences': 2,
+    'no-shadow-restricted-names': 2,
+    'no-spaced-func': 2,
+    'no-sparse-arrays': 2,
+    'no-this-before-super': 2,
+    'no-throw-literal': 2,
+    'no-trailing-spaces': 2,
+    'no-undef': 2,
+    'no-undef-init': 2,
+    'no-unexpected-multiline': 2,
+    'no-unmodified-loop-condition': 2,
+    'no-unneeded-ternary': [2, {
+      'defaultAssignment': false
+    }],
+    'no-unreachable': 2,
+    'no-unsafe-finally': 2,
+    'no-unused-vars': [2, {
+      'vars': 'all',
+      'args': 'none'
+    }],
+    'no-useless-call': 2,
+    'no-useless-computed-key': 2,
+    'no-useless-constructor': 2,
+    'no-useless-escape': 0,
+    'no-whitespace-before-property': 2,
+    'no-with': 2,
+    'one-var': [2, {
+      'initialized': 'never'
+    }],
+    'operator-linebreak': [2, 'after', {
+      'overrides': {
+        '?': 'before',
+        ':': 'before'
+      }
+    }],
+    'padded-blocks': [2, 'never'],
+    'quotes': [2, 'single', {
+      'avoidEscape': true,
+      'allowTemplateLiterals': true
+    }],
+    'semi': [2, 'never'],
+    'semi-spacing': [2, {
+      'before': false,
+      'after': true
+    }],
+    'space-before-blocks': [2, 'always'],
+    'space-before-function-paren': [2, 'never'],
+    'space-in-parens': [2, 'never'],
+    'space-infix-ops': 2,
+    'space-unary-ops': [2, {
+      'words': true,
+      'nonwords': false
+    }],
+    'spaced-comment': [2, 'always', {
+      'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
+    }],
+    'template-curly-spacing': [2, 'never'],
+    'use-isnan': 2,
+    'valid-typeof': 2,
+    'wrap-iife': [2, 'any'],
+    'yield-star-spacing': [2, 'both'],
+    'yoda': [2, 'never'],
+    'prefer-const': 2,
+    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
+    'object-curly-spacing': [2, 'always', {
+      objectsInObjects: false
+    }],
+    'array-bracket-spacing': [2, 'never']
+  }
+}

.gitignore

@@ -0,0 +1,16 @@
+.DS_Store
+node_modules/
+dist/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+package-lock.json
+tests/**/coverage/
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln

.travis.yml

@@ -0,0 +1,5 @@
+language: node_js
+node_js: 10
+script: npm run test
+notifications:
+  email: false

LICENSE

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

babel.config.js

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,35 @@
+const { run } = require('runjs')
+const chalk = require('chalk')
+const config = require('../vue.config.js')
+const rawArgv = process.argv.slice(2)
+const args = rawArgv.join(' ')
+
+if (process.env.npm_config_preview || rawArgv.includes('--preview')) {
+  const report = rawArgv.includes('--report')
+
+  run(`vue-cli-service build ${args}`)
+
+  const port = 9526
+  const publicPath = config.publicPath
+
+  var connect = require('connect')
+  var serveStatic = require('serve-static')
+  const app = connect()
+
+  app.use(
+    publicPath,
+    serveStatic('./dist', {
+      index: ['index.html', '/']
+    })
+  )
+
+  app.listen(port, function () {
+    console.log(chalk.green(`> Preview at  http://localhost:${port}${publicPath}`))
+    if (report) {
+      console.log(chalk.green(`> Report at  http://localhost:${port}${publicPath}report.html`))
+    }
+
+  })
+} else {
+  run(`vue-cli-service build ${args}`)
+}

jest.config.js

@@ -0,0 +1,24 @@
+module.exports = {
+  moduleFileExtensions: ['js', 'jsx', 'json', 'vue'],
+  transform: {
+    '^.+\\.vue$': 'vue-jest',
+    '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$':
+      'jest-transform-stub',
+    '^.+\\.jsx?$': 'babel-jest'
+  },
+  moduleNameMapper: {
+    '^@/(.*)$': '<rootDir>/src/$1'
+  },
+  snapshotSerializers: ['jest-serializer-vue'],
+  testMatch: [
+    '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
+  ],
+  collectCoverageFrom: ['src/utils/**/*.{js,vue}', '!src/utils/auth.js', '!src/utils/request.js', 'src/components/**/*.{js,vue}'],
+  coverageDirectory: '<rootDir>/tests/unit/coverage',
+  // 'collectCoverage': true,
+  'coverageReporters': [
+    'lcov',
+    'text-summary'
+  ],
+  testURL: 'http://localhost/'
+}

jsconfig.json

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

mock/index.js

@@ -0,0 +1,57 @@
+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

@@ -0,0 +1,81 @@
+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

@@ -0,0 +1,29 @@
+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

@@ -0,0 +1,84 @@
+
+const tokens = {
+  admin: {
+    token: 'admin-token'
+  },
+  editor: {
+    token: 'editor-token'
+  }
+}
+
+const users = {
+  'admin-token': {
+    roles: ['admin'],
+    introduction: 'I am a super administrator',
+    avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
+    name: 'Super Admin'
+  },
+  'editor-token': {
+    roles: ['editor'],
+    introduction: 'I am an editor',
+    avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
+    name: 'Normal Editor'
+  }
+}
+
+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

@@ -0,0 +1,25 @@
+/**
+ * @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

@@ -0,0 +1,69 @@
+{
+  "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",
+    "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

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

public/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= webpackConfig.name %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= webpackConfig.name %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

src/App.vue

@@ -0,0 +1,28 @@
+<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

@@ -0,0 +1,46 @@
+import request from '@/utils/request'
+
+/**
+* 保存答案
+* @param {*} data
+* @returns
+*/
+export const saveAnswer = (data) => request({
+  url: '/admin/answer',
+  method: 'post',
+  data
+})
+
+/**
+ * 答案列表
+ * @param {*} params
+ * @returns
+ */
+export const getAnswerList = (params) => request({
+  url: '/admin/answer', params
+})
+
+/**
+ * 删除答案
+ * @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
+})
+/**
+ * 查询答案详情
+ * @param {*} params
+ * @returns
+ */
+export const getAnswerDetail = (id, params) => request({
+  url: `/admin/answer/${id}`, params
+})

src/api/game.js

@@ -0,0 +1,46 @@
+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/gameCharacter.js

@@ -0,0 +1,46 @@
+import request from '@/utils/request'
+
+/**
+* 保存特征
+* @param {*} data
+* @returns
+*/
+export const saveGameCharacter = (data) => request({
+  url: '/admin/game-character',
+  method: 'post',
+  data
+})
+
+/**
+ * 特征列表
+ * @param {*} params
+ * @returns
+ */
+export const getGameCharacterList = (params) => request({
+  url: '/admin/game-character', params
+})
+
+/**
+ * 删除特征
+ * @param {*} data
+ * @returns
+ */
+export const deleteGameCharacter = (id) => request({
+  url: `/admin/game-character/${id}`, method: 'delete'
+})
+/**
+ * 更新特征
+ * @param {*} data
+ * @returns
+ */
+export const UpdateGameCharacter = (data, id) => request({
+  url: `/admin/game-character/${id}`, method: 'put', data
+})
+/**
+ * 查询特征详情
+ * @param {*} params
+ * @returns
+ */
+export const getGameCharacterDetail = (id) => request({
+  url: `/admin/game-character/${id}`
+})

src/api/gamelevelquestion.js

@@ -0,0 +1,38 @@
+import request from '@/utils/request'
+
+/**
+ * 删除关联
+ * @param {*} data
+ * @returns
+ */
+export const deleteGameLeverQuestion = (id) => request({
+  url: `/admin/game-level-question/${id}`, method: 'delete'
+})
+/**
+ * 更新测试游戏问题的分数
+ * @param {*} data
+ * @returns
+ */
+export const UpdateGameLeverQuestion = (data, id) => request({
+  url: `/admin/game-level-question/${id}`, method: 'put', data
+})
+
+/**
+* 添加关联游戏和题库的接口
+* @param {*} data
+* @returns
+*/
+export const saveGameLeverQuestion = (data) => request({
+  url: '/admin/game-level-question',
+  method: 'post',
+  data
+})
+
+/**
+ * 查询关联详情
+ * @param {*} params
+ * @returns
+ */
+export const getGameLeverQuestionDetail = (id, params) => request({
+  url: `/admin/game-level-question/${id}`, params
+})

src/api/oss.js

@@ -0,0 +1,60 @@
+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
+    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

@@ -0,0 +1,55 @@
+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 {*} params
+ * @returns
+ */
+export const getQuestionDetail = (id, params) => request({
+  url: `/admin/question/${id}`, params
+})
+
+/**
+ * 更新游戏题目顺序
+ * @param {*} data
+ * @returns
+ */
+export const UpdateQuestionSort = (data, id) => request({
+  url: `/admin/game/${id}/sort`, method: 'put', data
+})

src/api/user.js

@@ -0,0 +1,77 @@
+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

@@ -0,0 +1,78 @@
+<template>
+  <el-breadcrumb class="app-breadcrumb" separator="/">
+    <transition-group name="breadcrumb">
+      <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
+        <span v-if="item.redirect==='noRedirect'||index==levelList.length-1" class="no-redirect">{{ item.meta.title }}</span>
+        <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
+      </el-breadcrumb-item>
+    </transition-group>
+  </el-breadcrumb>
+</template>
+
+<script>
+import pathToRegexp from 'path-to-regexp'
+
+export default {
+  data() {
+    return {
+      levelList: null
+    }
+  },
+  watch: {
+    $route() {
+      this.getBreadcrumb()
+    }
+  },
+  created() {
+    this.getBreadcrumb()
+  },
+  methods: {
+    getBreadcrumb() {
+      // only show routes with meta.title
+      let matched = this.$route.matched.filter(item => item.meta && item.meta.title)
+      const first = matched[0]
+
+      if (!this.isDashboard(first)) {
+        matched = [{ path: '/dashboard', meta: { title: '工作台' }}].concat(matched)
+      }
+
+      this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
+    },
+    isDashboard(route) {
+      const name = route && route.name
+      if (!name) {
+        return false
+      }
+      return name.trim().toLocaleLowerCase() === 'Dashboard'.toLocaleLowerCase()
+    },
+    pathCompile(path) {
+      // To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561
+      const { params } = this.$route
+      var toPath = pathToRegexp.compile(path)
+      return toPath(params)
+    },
+    handleLink(item) {
+      const { redirect, path } = item
+      if (redirect) {
+        this.$router.push(redirect)
+        return
+      }
+      this.$router.push(this.pathCompile(path))
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.app-breadcrumb.el-breadcrumb {
+  display: inline-block;
+  font-size: 14px;
+  line-height: 50px;
+  margin-left: 8px;
+
+  .no-redirect {
+    color: #97a8be;
+    cursor: text;
+  }
+}
+</style>

src/components/GameCharacter/edit.vue

@@ -0,0 +1,108 @@
+<template>
+  <div style="padding: 20px">
+    <h2 style="text-align: center">
+      特征实例{{ characterId ? "编辑" : "添加" }}
+    </h2>
+    <el-form ref="form" :model="form" :rules="rules" label-width="150px">
+      <el-form-item label="实例名称：" prop="name">
+        <el-input
+          v-model="form.name"
+          placeholder="请输入实例名（必填）"
+        />
+      </el-form-item>
+      <el-form-item label="实例图片：">
+        <UploadImage :icon="form.thumb" @handleChange="handleChange" @handleDeleteIcon="handleDeleteIcon" />
+      </el-form-item>
+      <el-form-item label="实例描述：">
+        <el-input v-model="form.desc" type="textarea" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit('form')">确定</el-button>
+        <el-button @click="$router.go(-1)">返回</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+<script>
+import { getGameCharacterDetail, UpdateGameCharacter, saveGameCharacter } from '@/api/gameCharacter'
+import UploadImage from '@/components/UploadImage/index.vue'
+export default {
+  components: {
+    UploadImage
+  },
+  props: {
+    gameId: String,
+    characterId: String
+  },
+  data() {
+    return {
+      form: {
+        gameId: undefined,
+        name: undefined,
+        thumb: undefined,
+        desc: undefined,
+        characterId: undefined,
+        status: 1
+      },
+      rules: {
+        name: [{ required: true, message: '请输入特征名称', trigger: 'blur' }]
+      }
+    }
+  },
+  watch: {
+    characterId: function() {
+      if (this.characterId) {
+        getGameCharacterDetail(this.characterId).then((res) => {
+          this.form = res.data
+        })
+      } else {
+        this.form = {
+          name: undefined,
+          thumb: undefined,
+          desc: undefined,
+          characterId: undefined
+        }
+      }
+    }
+  },
+  methods: {
+    onSubmit(form) {
+      this.$refs[form].validate((valid) => {
+        if (valid) {
+          const data = { ...this.form }
+          data.gameId = this.gameId
+          if (this.characterId) {
+            data.characterId = this.characterId
+            if (!data.thumb) {
+              data.thumb = ''
+            }
+            UpdateGameCharacter(data, this.characterId).then((res) => {
+              this.$message('修改实例成功')
+              // 告诉父页面实例表需要刷新
+              this.$emit('handleRefreshGameCharacter', true)
+            })
+          } else {
+            saveGameCharacter(data).then((res) => {
+              this.$message('添加实例成功')
+              // 告诉父页面实例表需要刷新
+              this.$emit('handleRefreshGameCharacter', true)
+              // 把当前页改为编辑页面
+              this.$emit('handleEditGameCharacter', res.data.characterId)
+            })
+          }
+        } else {
+          return false
+        }
+      })
+    },
+    handleChange(val) {
+      this.form.thumb = val
+    },
+    handleDeleteIcon() {
+      this.form.thumb = ''
+    }
+  }
+}
+</script>
+<style>
+</style>

src/components/GameCharacter/index.vue

@@ -0,0 +1,146 @@
+<template>
+  <div class="body" style="font-size:14px">
+    <el-card class="box-card" shadow="never">
+      <div slot="header" class="clearfix">
+        <el-button
+          type="primary"
+          style="float: right"
+          icon="el-icon-plus"
+          @click="handleAdd"
+        >添加特征</el-button>
+      </div>
+      <!-- <el-button type="primary" style="float: right; margin-bottom: 20px;" icon="el-icon-plus" @click="handleAdd">添加特征</el-button> -->
+      <el-table stripe :data="tableData" border style="width: 100%">
+        <el-table-column prop="name" label="实例名称" />
+        <el-table-column prop="thumb" label="实例图片">
+          <template slot-scope="scope">
+            <el-image :src="scope.row.thumb" style="width: 100px; height: 100px" />
+          </template>
+        </el-table-column>
+        <el-table-column prop="createDate" label="创建时间">
+          <template slot-scope="scope">{{
+            scope.row.createDate.substr(0, 10)
+          }}</template>
+        </el-table-column>
+        <el-table-column fixed="right" label="操作">
+          <template slot-scope="scope">
+            <el-button style="margin-right:1em" type="text" @click="handleEdit(scope.row)">编辑</el-button>
+            <el-popconfirm
+              icon="el-icon-info"
+              icon-color="red"
+              title="确定删除这个特征吗？"
+              @onConfirm="handleDelete(scope.row)"
+            >
+              <el-button slot="reference" type="text" style="color:red">删除</el-button>
+            </el-popconfirm>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+        v-show="characterTotal!==0"
+        style="float:right; margin:20px 0"
+        :total="characterTotal"
+        :current-page="currentPage"
+        :page-size="pageSize"
+        layout="total, prev, pager, next, sizes"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      />
+    </el-card>
+  </div>
+</template>
+<script>
+import { getGameCharacterList, deleteGameCharacter } from '@/api/gameCharacter'
+
+export default {
+  props: {
+    gameId: String
+  },
+  data() {
+    return {
+      name: undefined,
+      daterange: '',
+      tableData: [],
+      endDate: undefined,
+      startDate: undefined,
+      pageSize: 10,
+      currentPage: 1,
+      characterTotal: 0
+    }
+  },
+  watch: {
+    gameId: {
+      handler(val) {
+        if (this.gameId) {
+          this.onSearch()
+        }
+      },
+      immediate: true // 页面加载时就启动
+    }
+  },
+  methods: {
+    // 改变每页显示条数
+    handleSizeChange(val) {
+      this.pageSize = val
+      this.changePagination()
+    },
+    // 改变页码
+    handleCurrentChange(val) {
+      this.currentPage = val
+      this.changePagination()
+    },
+    // 改变分页组件重新查询数据
+    changePagination() {
+      getGameCharacterList({
+        gameId: this.gameId,
+        pageNum: this.currentPage,
+        pageSize: this.pageSize
+      }).then((res) => {
+        this.tableData = res.data.records
+        // 讲特征列表写入store 供问题答案特征下拉使用
+        const list = []
+        this.tableData.map(item => {
+          list.push({ characterId: item.characterId, name: item.name })
+        })
+        this.$store.dispatch('game/setWordListValue', list).then(() => {})
+      })
+    },
+    handleAdd() {
+      this.$emit('handleAddGameCharacter', true)
+    },
+    handleEdit(row) {
+      this.$emit('handleEditGameCharacter', row.characterId)
+    },
+    handleDelete(row) {
+      deleteGameCharacter(row.characterId).then(() => {
+        // 让父组件给右边编辑特征页面一个空的characterId
+        // 防止当前特征正在编辑时删除了右边再次进行保存会报错
+        this.$message('删除特征成功')
+        this.$emit('handleCloseGameCharacter', true)
+        this.onSearch()
+      })
+    },
+    onSearch() {
+      getGameCharacterList({
+        gameId: this.gameId
+      }).then((res) => {
+        this.tableData = res.data.records
+        this.characterTotal = res.data.total
+        this.pageSize = res.data.size
+        // 讲特征列表写入store 供问题答案特征下拉使用
+        const list = []
+        this.tableData.map(item => {
+          list.push({ characterId: item.characterId, name: item.name })
+        })
+        this.$store.dispatch('game/setWordListValue', list).then(() => {})
+      })
+    },
+    dateChange(val) {
+      this.startDate = this.daterange[0]
+      this.endDate = this.daterange[1]
+    }
+  }
+}
+</script>
+<style>
+</style>

src/components/Hamburger/index.vue

@@ -0,0 +1,44 @@
+<template>
+  <div style="padding: 0 15px;" @click="toggleClick">
+    <svg
+      :class="{'is-active':isActive}"
+      class="hamburger"
+      viewBox="0 0 1024 1024"
+      xmlns="http://www.w3.org/2000/svg"
+      width="64"
+      height="64"
+    >
+      <path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />
+    </svg>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Hamburger',
+  props: {
+    isActive: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    toggleClick() {
+      this.$emit('toggleClick')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.hamburger {
+  display: inline-block;
+  vertical-align: middle;
+  width: 20px;
+  height: 20px;
+}
+
+.hamburger.is-active {
+  transform: rotate(180deg);
+}
+</style>

src/components/Question/drawer.vue

@@ -0,0 +1,231 @@
+<template>
+  <div>
+    <el-drawer
+      ref="drawer"
+      :show-close="false"
+      :wrapperClosable="false"
+      :title="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.option"
+                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="匹配特征：" :label-width="formLabelWidth">
+            <el-select
+              v-model="form.characterList"
+              multiple
+              filterable
+              default-first-option
+              placeholder="请选择特征"
+              style="width:100%"
+            >
+              <el-option
+                v-for="item in wordList"
+                :key="item.characterId"
+                :label="item.name"
+                :value="item.characterId"
+              />
+            </el-select>
+          </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 { getAnswerDetail, saveAnswer, UpdateAnswer } from '@/api/answer'
+export default {
+  props: {
+    dialog: Boolean,
+    questionId: String,
+    answerId: String,
+    gameId: String
+  },
+  data() {
+    return {
+      rules: {
+        content: [
+          { required: true, message: '请输入答案内容', trigger: 'blur' }
+        ]
+      },
+      form: {
+        option: undefined,
+        content: undefined,
+        characterList: [],
+        sortNo: 1,
+        status: 1
+      },
+      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: '错'
+        }
+      ]
+    }
+  },
+  computed: {
+    wordList() {
+      return this.$store.state.game.wordList
+    }
+  },
+  watch: {
+    answerId() {
+      if (this.answerId) {
+        getAnswerDetail(this.answerId, { gameId: this.gameId }).then((res) => {
+          this.form = res.data
+          if (res.data.characterList) {
+            const list = []
+            res.data.characterList.map((item) => {
+              list.push(item.characterId)
+            })
+            this.form.characterList = list
+          }
+        })
+      }
+    }
+  },
+  methods: {
+    onSubmit(form) {
+      this.$refs[form].validate((valid) => {
+        if (valid) {
+          if (this.form.option) {
+            const list = this.wordList.filter((item) =>
+              this.form.characterList.includes(item.characterId)
+            )
+            const data = { ...this.form }
+            if (list) {
+              list.map((item) => {
+                item.gameId = this.gameId
+              })
+              data.characterList = list
+            }
+            switch (data.option) {
+              case 'A':
+                data.sortNo = 1
+                break
+              case 'B':
+                data.sortNo = 2
+                break
+              case 'C':
+                data.sortNo = 3
+                break
+              case 'D':
+                data.sortNo = 4
+                break
+              case 'E':
+                data.sortNo = 5
+                break
+              case 'F':
+                data.sortNo = 6
+                break
+              case 'G':
+                data.sortNo = 7
+                break
+              case 'H':
+                data.sortNo = 8
+                break
+              case 'I':
+                data.sortNo = 9
+                break
+              case 'J':
+                data.sortNo = 10
+                break
+              case 'true':
+                data.sortNo = 1
+                break
+              case 'false':
+                data.sortNo = 2
+                break
+              default:
+                break
+            }
+            if (this.answerId) {
+              UpdateAnswer(data, this.answerId).then((res) => {
+                this.$message('修改成功')
+                this.$emit('handleEditDrawer', true)
+                this.form = {
+                  option: undefined,
+                  content: undefined,
+                  characterList: []
+                }
+              })
+            } else {
+              data.questionId = this.questionId
+              saveAnswer(data).then((res) => {
+                this.$message('添加成功')
+                this.$emit('handleEditDrawer', true)
+                this.form = {
+                  option: undefined,
+                  content: undefined,
+                  characterList: []
+                }
+              })
+            }
+          } else {
+            this.$message('请在灰色下来菜单中添加选项')
+          }
+        } else {
+          return false
+        }
+      })
+    },
+    handleClose() {
+      this.$emit('handleCloseDrawer', true)
+      this.form = {
+        option: undefined,
+        content: undefined,
+        characterList: []
+      }
+    }
+  }
+}
+</script>
+<style>
+</style>

src/components/Question/edit.vue

@@ -0,0 +1,282 @@
+<template>
+  <div style="padding: 20px">
+    <h2 style="text-align: center">
+      游戏题目{{ gameQuestionMapId!==0 ? "编辑" : "添加" }}
+    </h2>
+    <el-form ref="form" :model="form" label-width="90px">
+      <el-form-item label="题目：">
+        <el-input v-if="resultMode === 'character_matched'" v-model="form.title" placeholder="请输入实例名（必填）">
+          <el-select slot="prepend" v-model="form.optType" style="width:100px" placeholder="请选择">
+            <el-option label="单选题" value="single" />
+            <el-option label="多选题" value="many" />
+            <el-option label="判断题" value="judgment" />
+          </el-select>
+        </el-input>
+        <el-select
+          v-else
+          v-model="nowQuestionId"
+          filterable
+          default-first-option
+          style="width:100%"
+          placeholder="请选择"
+          :disabled="gameQuestionMapId!==0"
+        >
+          <el-option
+            v-for="item in questionList"
+            :key="item.questionId"
+            :label="item.title"
+            :value="item.questionId"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item v-if="resultMode==='examination'" label="分数">
+        <el-input v-model="form.score" type="number" min="1" max="50" />
+      </el-form-item>
+      <el-form-item
+        v-if="gameQuestionMapId!==0 && resultMode === 'examination'"
+        label="正确选项："
+      >
+        <!-- filterable可搜索 multiple可多选 default-first-option回车可选-->
+        <el-select
+          v-model="form.rightAnswer"
+          disabled
+          style="width:100%"
+          multiple
+          filterable
+          default-first-option
+          placeholder="请选择"
+        >
+          <el-option
+            v-for="item in rightList"
+            :key="item"
+            :label="item"
+            :value="item"
+          />
+        </el-select>
+      </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="gameQuestionMapId!==0" shadow="never" body-style="padding:0" class="box-card">
+      <div slot="header" class="clearfix">
+        <h3 style="float:left">答案列表</h3>
+        <el-button
+          v-if=" resultMode !== 'examination'"
+          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 answerList" :key="answer.answerId" class="answerli">
+          <div style="flex:1;width: 100%;overflow: hidden;display: flex;" @click="resultMode === 'examination'?'':handleEdit(answer)">
+            <span style="width:45px">{{ answer.option }}</span>
+            <span style="flex:1">{{ answer.content }}</span>
+          </div>
+          <el-popconfirm
+            v-if="resultMode !== 'examination'"
+            style="width:30px"
+            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-id="answerId"
+      :game-id="gameId"
+      @handleCloseDrawer="handleCloseDrawer"
+      @handleEditDrawer="handleEditDrawer"
+    />
+  </div>
+</template>
+<script>
+
+import { getQuestionList } from '@/api/question'
+import { getAnswerList, deleteAnswer } from '@/api/answer'
+import { saveGameLeverQuestion, UpdateGameLeverQuestion, getGameLeverQuestionDetail } from '@/api/gamelevelquestion'
+import QuestionDrawer from '@/components/Question/drawer.vue'
+
+export default {
+  components: {
+    QuestionDrawer
+  },
+  props: {
+    gameQuestionMapId: {
+      type: Number,
+      required: true
+    },
+    gameId: {
+      type: String,
+      required: true
+    },
+    resultMode: String
+  },
+  data() {
+    return {
+      form: {
+        title: undefined,
+        optType: undefined,
+        rightAnswer: undefined,
+        gameId: undefined,
+        score: 0,
+        status: 1,
+        questionId: undefined
+      },
+      nowQuestionId: undefined, // 当前问题id用于获取答案列表 和匹配游戏模式传入答案编辑弹窗的questionId
+      questionList: [], // 用于存储测试模式下选择问题的下拉菜单的数据源
+      // 答案列表（包括选项 内容 特征词列表）
+      answerList: [],
+      answerId: undefined,
+      // 正确答案数据源
+      rightList: [],
+      dialog: false
+    }
+  },
+  watch: {
+    // 用于点击左边改变右边的页面
+    gameQuestionMapId: function() {
+      if (this.gameQuestionMapId !== 0) {
+        getGameLeverQuestionDetail(this.gameQuestionMapId, { gameId: this.gameId }).then((res) => {
+          this.form = res.data
+          this.form.rightAnswer = res.data.rightAnswer?.split(',')
+          this.nowQuestionId = res.data.questionId
+          getAnswerList({ questionId: res.data.questionId }).then((res) => {
+            this.answerList = res.data.records
+          })
+        })
+      } else {
+        this.form = {
+          title: undefined,
+          optType: undefined,
+          score: 0,
+          status: 1,
+          gameId: undefined,
+          rightAnswer: undefined,
+          questionId: undefined
+        }
+        this.nowQuestionId = undefined
+      }
+    }
+  },
+  mounted: function() {
+    getQuestionList({ pageSize: 999 }).then((res) => { this.questionList = res.data.records })
+  },
+  methods: {
+    // 添加答案
+    onAddAnswer() {
+      this.answerId = undefined
+      this.dialog = true
+    },
+    // 编辑答案
+    handleEdit(val) {
+      this.answerId = val.answerId
+      this.dialog = true
+    },
+    // 删除答案
+    handleDelete(val) {
+      deleteAnswer(val.answerId).then((res) => {
+        this.$message('删除答案成功')
+        this.handleAnswerList()
+      })
+    },
+    // 关闭答案抽屉
+    handleCloseDrawer() {
+      this.dialog = false
+    },
+    // 编辑答案抽屉成功重新查询列表
+    handleEditDrawer(val) {
+      this.handleCloseDrawer()
+      this.handleAnswerList()
+    },
+    // 查询当前问题答案列表
+    handleAnswerList() {
+      getAnswerList({ questionId: this.nowQuestionId }).then((res) => {
+        this.answerList = res.data.records
+      })
+    },
+    // 转换特征数组数据格式
+    handleToString(list) {
+      const nameList = []
+      list?.map(item => {
+        nameList.push(item.name)
+      })
+      return nameList.toString()
+    },
+    // 非空判断方法
+    handelNull() {
+      if (this.resultMode === 'examination') {
+        if (this.nowQuestionId) {
+          if (this.form.score && this.form.score !== 0) {
+            return true
+          } else {
+            this.$message('请输入本题分数')
+            return false
+          }
+        } else {
+          this.$message('请选择题目')
+          return false
+        }
+      } else {
+        if (this.form.optType) {
+          if (this.form.title) {
+            return true
+          } else {
+            this.$message('请输入题目')
+            return false
+          }
+        } else {
+          this.$message('请选择题型')
+          return false
+        }
+      }
+    },
+    onSubmit() {
+      if (this.handelNull()) {
+        const data = { ...this.form }
+        if (this.gameQuestionMapId === 0) {
+          saveGameLeverQuestion({ ...data, gameId: this.gameId, questionId: this.nowQuestionId }).then((res) => {
+            this.$message('添加问题成功')
+            this.$emit('handleRefreshQuestion', true)
+            this.$emit('handleEditQuestion', res.data.gameQuestionMapId)
+          })
+        } else {
+          if (data.rightAnswer) {
+            data.rightAnswer = data.rightAnswer.toString()
+          }
+          UpdateGameLeverQuestion({ ...data, gameId: this.gameId, questionId: this.nowQuestionId }, this.gameQuestionMapId).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

@@ -0,0 +1,169 @@
+<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>
+        <h4 v-if="resultMode==='examination'" style="float:left;margin-left: 10px;">总分{{ totalScore }}</h4>
+        <el-button
+          type="primary"
+          style="float: right"
+          icon="el-icon-plus"
+          @click="handleAdd"
+        >添加题目</el-button>
+      </div>
+      <!-- <ul style="list-style-type: none;margin:24px 0 0 -40px">
+        <li 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.optType === 'single'?'单选题':item.optType==='many'?'多选题':'判断题' }}</span>
+          <span style="flex:1">{{ item.title }}</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>
+        </li>
+      </ul> -->
+      <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.optType === 'single'?'单选题':item.optType==='many'?'多选题':'判断题' }}</span>
+            <span style="flex:1">{{ item.title }}</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="questionTotal!==0"
+        style="float:right; margin:24px 0"
+        :total="questionTotal"
+        :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, UpdateQuestionSort } from '@/api/question'
+import { deleteGameLeverQuestion } from '@/api/gamelevelquestion'
+import draggable from 'vuedraggable'
+
+export default {
+  // 注册draggable组件
+  components: {
+    draggable
+  },
+  props: {
+    gameId: {
+      type: String,
+      required: true
+    },
+    resultMode: String
+  },
+  data() {
+    return {
+      tableData: [],
+      pageSize: 20,
+      currentPage: 1,
+      questionTotal: 0, // 条目总数
+      totalScore: 0
+    }
+  },
+  watch: {
+    gameId: {
+      handler(val) {
+        if (val) {
+          this.onSearch()
+        }
+      },
+      immediate: true // 页面加载时就启动
+    }
+  },
+  methods: {
+    // 拖拽结束事件
+    onEnd() {
+      const sortList = []
+      this.tableData.map((item, index) => {
+        sortList.push({ sortNo: index, serialNo: item.gameQuestionMapId })
+      })
+      UpdateQuestionSort(sortList, this.gameId)
+    },
+    handleSizeChange(val) {
+      this.pageSize = val
+      this.changePagination()
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val
+      this.changePagination()
+    },
+    changePagination() {
+      getQuestionList({ gameId: this.gameId, pageSize: this.pageSize, pageNum: this.currentPage }).then(
+        (res) => {
+          this.tableData = res.data.records
+        }
+      )
+    },
+    // 添加问题
+    handleAdd() {
+      this.$emit('handleAddQuestion', true)
+    },
+    handleEdit(row) {
+      // 向外传送数据row.gameQuestionMapId
+      this.$emit('handleEditQuestion', row.gameQuestionMapId)
+    },
+    handleDelete(row) {
+      deleteGameLeverQuestion(row.gameQuestionMapId).then(() => {
+        this.$message('删除问题成功')
+        this.onSearch()
+        // 关闭编辑问题页面防止编辑页面还没关闭就删除当前问题了
+        this.$emit('handleCloseQuestion', true)
+      })
+    },
+    onSearch() {
+      getQuestionList({ gameId: this.gameId, pageSize: this.pageSize }).then(
+        (res) => {
+          this.tableData = res.data.records
+          this.questionTotal = res.data.total
+          this.pageSize = res.data.size
+          this.totalScore = 0
+          res.data.records.map(item => {
+            this.totalScore += item.score
+          })
+        }
+      )
+    }
+  }
+}
+</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

@@ -0,0 +1,62 @@
+<template>
+  <div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" />
+  <svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
+    <use :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

@@ -0,0 +1,68 @@
+<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

@@ -0,0 +1,67 @@
+<template>
+  <div class="uploadClass">
+    <el-upload
+      action="#"
+      list-type="picture-card"
+      :file-list="fileList"
+      :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/icons/index.js

@@ -0,0 +1,9 @@
+import Vue from 'vue'
+import SvgIcon from '@/components/SvgIcon'// svg component
+
+// register globally
+Vue.component('svg-icon', SvgIcon)
+
+const req = require.context('./svg', false, /\.svg$/)
+const requireAll = requireContext => requireContext.keys().map(requireContext)
+requireAll(req)

src/icons/svg/app.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="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

@@ -0,0 +1 @@
+<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/captcha.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="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/dashboard.svg

@@ -0,0 +1 @@
+<svg width="128" height="100" xmlns="http://www.w3.org/2000/svg"><path d="M27.429 63.638c0-2.508-.893-4.65-2.679-6.424-1.786-1.775-3.94-2.662-6.464-2.662-2.524 0-4.679.887-6.465 2.662-1.785 1.774-2.678 3.916-2.678 6.424 0 2.508.893 4.65 2.678 6.424 1.786 1.775 3.94 2.662 6.465 2.662 2.524 0 4.678-.887 6.464-2.662 1.786-1.775 2.679-3.916 2.679-6.424zm13.714-31.801c0-2.508-.893-4.65-2.679-6.424-1.785-1.775-3.94-2.662-6.464-2.662-2.524 0-4.679.887-6.464 2.662-1.786 1.774-2.679 3.916-2.679 6.424 0 2.508.893 4.65 2.679 6.424 1.785 1.774 3.94 2.662 6.464 2.662 2.524 0 4.679-.888 6.464-2.662 1.786-1.775 2.679-3.916 2.679-6.424zM71.714 65.98l7.215-27.116c.285-1.23.107-2.378-.536-3.443-.643-1.064-1.56-1.762-2.75-2.094-1.19-.33-2.333-.177-3.429.462-1.095.639-1.81 1.573-2.143 2.804l-7.214 27.116c-2.857.237-5.405 1.266-7.643 3.088-2.238 1.822-3.738 4.152-4.5 6.992-.952 3.644-.476 7.098 1.429 10.364 1.905 3.265 4.69 5.37 8.357 6.317 3.667.947 7.143.474 10.429-1.42 3.285-1.892 5.404-4.66 6.357-8.305.762-2.84.619-5.607-.429-8.305-1.047-2.697-2.762-4.85-5.143-6.46zm47.143-2.342c0-2.508-.893-4.65-2.678-6.424-1.786-1.775-3.94-2.662-6.465-2.662-2.524 0-4.678.887-6.464 2.662-1.786 1.774-2.679 3.916-2.679 6.424 0 2.508.893 4.65 2.679 6.424 1.786 1.775 3.94 2.662 6.464 2.662 2.524 0 4.679-.887 6.465-2.662 1.785-1.775 2.678-3.916 2.678-6.424zm-45.714-45.43c0-2.509-.893-4.65-2.679-6.425C68.68 10.01 66.524 9.122 64 9.122c-2.524 0-4.679.887-6.464 2.661-1.786 1.775-2.679 3.916-2.679 6.425 0 2.508.893 4.65 2.679 6.424 1.785 1.774 3.94 2.662 6.464 2.662 2.524 0 4.679-.888 6.464-2.662 1.786-1.775 2.679-3.916 2.679-6.424zm32 13.629c0-2.508-.893-4.65-2.679-6.424-1.785-1.775-3.94-2.662-6.464-2.662-2.524 0-4.679.887-6.464 2.662-1.786 1.774-2.679 3.916-2.679 6.424 0 2.508.893 4.65 2.679 6.424 1.785 1.774 3.94 2.662 6.464 2.662 2.524 0 4.679-.888 6.464-2.662 1.786-1.775 2.679-3.916 2.679-6.424zM128 63.638c0 12.351-3.357 23.78-10.071 34.286-.905 1.372-2.19 2.058-3.858 2.058H13.93c-1.667 0-2.953-.686-3.858-2.058C3.357 87.465 0 76.037 0 63.638c0-8.613 1.69-16.847 5.071-24.703C8.452 31.08 13 24.312 18.714 18.634c5.715-5.68 12.524-10.199 20.429-13.559C47.048 1.715 55.333.035 64 .035c8.667 0 16.952 1.68 24.857 5.04 7.905 3.36 14.714 7.88 20.429 13.559 5.714 5.678 10.262 12.446 13.643 20.301 3.38 7.856 5.071 16.09 5.071 24.703z"/></svg>

src/icons/svg/example.svg

@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M96.258 57.462h31.421C124.794 27.323 100.426 2.956 70.287.07v31.422a32.856 32.856 0 0 1 25.971 25.97zm-38.796-25.97V.07C27.323 2.956 2.956 27.323.07 57.462h31.422a32.856 32.856 0 0 1 25.97-25.97zm12.825 64.766v31.421c30.46-2.885 54.507-27.253 57.713-57.712H96.579c-2.886 13.466-13.146 23.726-26.292 26.291zM31.492 70.287H.07c2.886 30.46 27.253 54.507 57.713 57.713V96.579c-13.466-2.886-23.726-13.146-26.291-26.292z"/></svg>

src/icons/svg/eye-open.svg

@@ -0,0 +1 @@
+<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="128" height="128"><defs><style/></defs><path d="M512 128q69.675 0 135.51 21.163t115.498 54.997 93.483 74.837 73.685 82.006 51.67 74.837 32.17 54.827L1024 512q-2.347 4.992-6.315 13.483T998.87 560.17t-31.658 51.669-44.331 59.99-56.832 64.34-69.504 60.16-82.347 51.5-94.848 34.687T512 896q-69.675 0-135.51-21.163t-115.498-54.826-93.483-74.326-73.685-81.493-51.67-74.496-32.17-54.997L0 513.707q2.347-4.992 6.315-13.483t18.816-34.816 31.658-51.84 44.331-60.33 56.832-64.683 69.504-60.331 82.347-51.84 94.848-34.816T512 128.085zm0 85.333q-46.677 0-91.648 12.331t-81.152 31.83-70.656 47.146-59.648 54.485-48.853 57.686-37.675 52.821-26.325 43.99q12.33 21.674 26.325 43.52t37.675 52.351 48.853 57.003 59.648 53.845T339.2 767.02t81.152 31.488T512 810.667t91.648-12.331 81.152-31.659 70.656-46.848 59.648-54.186 48.853-57.344 37.675-52.651T927.957 512q-12.33-21.675-26.325-43.648t-37.675-52.65-48.853-57.345-59.648-54.186-70.656-46.848-81.152-31.659T512 213.334zm0 128q70.656 0 120.661 50.006T682.667 512 632.66 632.661 512 682.667 391.339 632.66 341.333 512t50.006-120.661T512 341.333zm0 85.334q-35.328 0-60.33 25.002T426.666 512t25.002 60.33T512 597.334t60.33-25.002T597.334 512t-25.002-60.33T512 426.666z"/></svg>

src/icons/svg/eye.svg

@@ -0,0 +1 @@
+<svg width="128" height="64" xmlns="http://www.w3.org/2000/svg"><path d="M127.072 7.994c1.37-2.208.914-5.152-.914-6.87-2.056-1.717-4.797-1.226-6.396.982-.229.245-25.586 32.382-55.74 32.382-29.24 0-55.74-32.382-55.968-32.627-1.6-1.963-4.57-2.208-6.397-.49C-.17 3.086-.399 6.275 1.2 8.238c.457.736 5.94 7.36 14.62 14.72L4.17 35.96c-1.828 1.963-1.6 5.152.228 6.87.457.98 1.6 1.471 2.742 1.471s2.284-.49 3.198-1.472l12.564-13.983c5.94 4.416 13.021 8.587 20.788 11.53l-4.797 17.418c-.685 2.699.686 5.397 3.198 6.133h1.37c2.057 0 3.884-1.472 4.341-3.68L52.6 42.83c3.655.736 7.538 1.227 11.422 1.227 3.883 0 7.767-.49 11.422-1.227l4.797 17.173c.457 2.208 2.513 3.68 4.34 3.68.457 0 .914 0 1.143-.246 2.513-.736 3.883-3.434 3.198-6.133l-4.797-17.172c7.767-2.944 14.848-7.114 20.788-11.53l12.336 13.738c.913.981 2.056 1.472 3.198 1.472s2.284-.49 3.198-1.472c1.828-1.963 1.828-4.906.228-6.87l-11.65-13.001c9.366-7.36 14.849-14.474 14.849-14.474z"/></svg>

src/icons/svg/form.svg

@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M84.068 23.784c-1.02 0-1.877-.32-2.572-.96a8.588 8.588 0 0 1-1.738-2.237 11.524 11.524 0 0 1-1.042-2.621c-.232-.895-.348-1.641-.348-2.238V0h.278c.834 0 1.622.085 2.363.256.742.17 1.645.575 2.711 1.214 1.066.64 2.363 1.535 3.892 2.686 1.53 1.15 3.453 2.664 5.77 4.54 2.502 2.045 4.494 3.771 5.977 5.178 1.483 1.406 2.618 2.6 3.406 3.58.787.98 1.274 1.812 1.46 2.494.185.682.277 1.278.277 1.79v2.046H84.068zM127.3 84.01c.278.682.464 1.535.556 2.558.093 1.023-.37 2.003-1.39 2.94-.463.427-.88.832-1.25 1.215-.372.384-.696.704-.974.96a6.69 6.69 0 0 1-.973.767l-11.816-10.741a44.331 44.331 0 0 0 1.877-1.535 31.028 31.028 0 0 1 1.737-1.406c1.112-.938 2.317-1.343 3.615-1.215 1.297.128 2.363.405 3.197.83.927.427 1.923 1.173 2.989 2.239 1.065 1.065 1.876 2.195 2.432 3.388zM78.23 95.902c2.038 0 3.752-.511 5.143-1.534l-26.969 25.83H18.037c-1.761 0-3.684-.47-5.77-1.407a24.549 24.549 0 0 1-5.838-3.709 21.373 21.373 0 0 1-4.518-5.306c-1.204-2.003-1.807-4.07-1.807-6.202V16.495c0-1.79.44-3.665 1.32-5.626A18.41 18.41 0 0 1 5.04 5.562a21.798 21.798 0 0 1 5.213-3.964C12.198.533 14.237 0 16.37 0h53.24v15.984c0 1.62.278 3.367.834 5.242a16.704 16.704 0 0 0 2.572 5.179c1.159 1.577 2.665 2.898 4.518 3.964 1.853 1.066 4.078 1.598 6.673 1.598h20.295v42.325L85.458 92.45c1.02-1.364 1.529-2.856 1.529-4.476 0-2.216-.857-4.113-2.572-5.69-1.714-1.577-3.776-2.366-6.186-2.366H26.1c-2.409 0-4.448.789-6.116 2.366-1.668 1.577-2.502 3.474-2.502 5.69 0 2.217.834 4.092 2.502 5.626 1.668 1.535 3.707 2.302 6.117 2.302h52.13zM26.1 47.951c-2.41 0-4.449.789-6.117 2.366-1.668 1.577-2.502 3.473-2.502 5.69 0 2.216.834 4.092 2.502 5.626 1.668 1.534 3.707 2.302 6.117 2.302h52.13c2.409 0 4.47-.768 6.185-2.302 1.715-1.534 2.572-3.41 2.572-5.626 0-2.217-.857-4.113-2.572-5.69-1.714-1.577-3.776-2.366-6.186-2.366H26.1zm52.407 64.063l1.807-1.663 3.476-3.196a479.75 479.75 0 0 0 4.587-4.284 500.757 500.757 0 0 1 5.004-4.667c3.985-3.666 8.48-7.758 13.485-12.276l11.677 10.741-13.485 12.404-5.004 4.603-4.587 4.22a179.46 179.46 0 0 0-3.267 3.068c-.88.853-1.367 1.322-1.46 1.407-.463.341-.973.703-1.529 1.087-.556.383-1.112.703-1.668.959-.556.256-1.413.575-2.572.959a83.5 83.5 0 0 1-3.545 1.087 72.2 72.2 0 0 1-3.475.895c-1.112.256-1.946.426-2.502.511-1.112.17-1.854.043-2.224-.383-.371-.426-.464-1.151-.278-2.174.092-.511.278-1.279.556-2.302.278-1.023.602-2.067.973-3.132l1.042-3.005c.325-.938.58-1.577.765-1.918a10.157 10.157 0 0 1 2.224-2.941z"/></svg>

src/icons/svg/game.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="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

@@ -0,0 +1 @@
+<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

@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M115.625 127.937H.063V12.375h57.781v12.374H12.438v90.813h90.813V70.156h12.374z"/><path d="M116.426 2.821l8.753 8.753-56.734 56.734-8.753-8.745z"/><path d="M127.893 37.982h-12.375V12.375H88.706V0h39.187z"/></svg>

src/icons/svg/nested.svg

@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M.002 9.2c0 5.044 3.58 9.133 7.998 9.133 4.417 0 7.997-4.089 7.997-9.133 0-5.043-3.58-9.132-7.997-9.132S.002 4.157.002 9.2zM31.997.066h95.981V18.33H31.997V.066zm0 45.669c0 5.044 3.58 9.132 7.998 9.132 4.417 0 7.997-4.088 7.997-9.132 0-3.263-1.524-6.278-3.998-7.91-2.475-1.63-5.524-1.63-7.998 0-2.475 1.632-4 4.647-4 7.91zM63.992 36.6h63.986v18.265H63.992V36.6zm-31.995 82.2c0 5.043 3.58 9.132 7.998 9.132 4.417 0 7.997-4.089 7.997-9.132 0-5.044-3.58-9.133-7.997-9.133s-7.998 4.089-7.998 9.133zm31.995-9.131h63.986v18.265H63.992V109.67zm0-27.404c0 5.044 3.58 9.133 7.998 9.133 4.417 0 7.997-4.089 7.997-9.133 0-3.263-1.524-6.277-3.998-7.909-2.475-1.631-5.524-1.631-7.998 0-2.475 1.632-4 4.646-4 7.91zm31.995-9.13h31.991V91.4H95.987V73.135z"/></svg>

src/icons/svg/password.svg

@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M108.8 44.322H89.6v-5.36c0-9.04-3.308-24.163-25.6-24.163-23.145 0-25.6 16.881-25.6 24.162v5.361H19.2v-5.36C19.2 15.281 36.798 0 64 0c27.202 0 44.8 15.281 44.8 38.961v5.361zm-32 39.356c0-5.44-5.763-9.832-12.8-9.832-7.037 0-12.8 4.392-12.8 9.832 0 3.682 2.567 6.808 6.407 8.477v11.205c0 2.718 2.875 4.962 6.4 4.962 3.524 0 6.4-2.244 6.4-4.962V92.155c3.833-1.669 6.393-4.795 6.393-8.477zM128 64v49.201c0 8.158-8.645 14.799-19.2 14.799H19.2C8.651 128 0 121.359 0 113.201V64c0-8.153 8.645-14.799 19.2-14.799h89.6c10.555 0 19.2 6.646 19.2 14.799z"/></svg>

src/icons/svg/phone.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="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/question.svg

@@ -0,0 +1 @@
+<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/table.svg

@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M.006.064h127.988v31.104H.006V.064zm0 38.016h38.396v41.472H.006V38.08zm0 48.384h38.396v41.472H.006V86.464zM44.802 38.08h38.396v41.472H44.802V38.08zm0 48.384h38.396v41.472H44.802V86.464zM89.598 38.08h38.396v41.472H89.598zm0 48.384h38.396v41.472H89.598z"/><path d="M.006.064h127.988v31.104H.006V.064zm0 38.016h38.396v41.472H.006V38.08zm0 48.384h38.396v41.472H.006V86.464zM44.802 38.08h38.396v41.472H44.802V38.08zm0 48.384h38.396v41.472H44.802V86.464zM89.598 38.08h38.396v41.472H89.598zm0 48.384h38.396v41.472H89.598z"/></svg>

src/icons/svg/tree.svg

@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M126.713 90.023c.858.985 1.287 2.134 1.287 3.447v29.553c0 1.423-.429 2.6-1.287 3.53-.858.93-1.907 1.395-3.146 1.395H97.824c-1.145 0-2.146-.465-3.004-1.395-.858-.93-1.287-2.107-1.287-3.53V93.47c0-.875.19-1.696.572-2.462.382-.766.906-1.368 1.573-1.806a3.84 3.84 0 0 1 2.146-.657h9.725V69.007a3.84 3.84 0 0 0-.43-1.806 3.569 3.569 0 0 0-1.143-1.313 2.714 2.714 0 0 0-1.573-.492h-36.47v23.149h9.725c1.144 0 2.145.492 3.004 1.478.858.985 1.287 2.134 1.287 3.447v29.553c0 .876-.191 1.696-.573 2.463-.38.766-.905 1.368-1.573 1.806a3.84 3.84 0 0 1-2.145.656H51.915a3.84 3.84 0 0 1-2.145-.656c-.668-.438-1.216-1.04-1.645-1.806a4.96 4.96 0 0 1-.644-2.463V93.47c0-1.313.43-2.462 1.288-3.447.858-.986 1.907-1.478 3.146-1.478h9.582v-23.15h-37.9c-.953 0-1.74.356-2.359 1.068-.62.711-.93 1.56-.93 2.544v19.538h9.726c1.239 0 2.264.492 3.074 1.478.81.985 1.216 2.134 1.216 3.447v29.553c0 1.423-.405 2.6-1.216 3.53-.81.93-1.835 1.395-3.074 1.395H4.29c-.476 0-.93-.082-1.358-.246a4.1 4.1 0 0 1-1.144-.657 4.658 4.658 0 0 1-.93-1.067 5.186 5.186 0 0 1-.643-1.395 5.566 5.566 0 0 1-.215-1.56V93.47c0-.437.048-.875.143-1.313a3.95 3.95 0 0 1 .429-1.15c.19-.328.429-.656.715-.984.286-.329.572-.602.858-.821.286-.22.62-.383 1.001-.493.382-.11.763-.164 1.144-.164h9.726V61.619c0-.985.31-1.833.93-2.544.619-.712 1.358-1.068 2.216-1.068h44.335V39.62h-9.582c-1.24 0-2.288-.492-3.146-1.477a5.09 5.09 0 0 1-1.287-3.448V5.14c0-1.423.429-2.627 1.287-3.612.858-.985 1.907-1.477 3.146-1.477h25.743c.763 0 1.478.246 2.145.739a5.17 5.17 0 0 1 1.573 1.888c.382.766.573 1.587.573 2.462v29.553c0 1.313-.43 2.463-1.287 3.448-.859.985-1.86 1.477-3.004 1.477h-9.725v18.389h42.762c.954 0 1.74.355 2.36 1.067.62.711.93 1.56.93 2.545v26.925h9.582c1.239 0 2.288.492 3.146 1.478z"/></svg>

src/icons/svg/user.svg

@@ -0,0 +1 @@
+<svg width="130" height="130" xmlns="http://www.w3.org/2000/svg"><path d="M63.444 64.996c20.633 0 37.359-14.308 37.359-31.953 0-17.649-16.726-31.952-37.359-31.952-20.631 0-37.36 14.303-37.358 31.952 0 17.645 16.727 31.953 37.359 31.953zM80.57 75.65H49.434c-26.652 0-48.26 18.477-48.26 41.27v2.664c0 9.316 21.608 9.325 48.26 9.325H80.57c26.649 0 48.256-.344 48.256-9.325v-2.663c0-22.794-21.605-41.271-48.256-41.271z" stroke="#979797"/></svg>

src/icons/svg/wx.svg

@@ -0,0 +1 @@
+<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

@@ -0,0 +1,22 @@
+# replace default config
+
+# multipass: true
+# full: true
+
+plugins:
+
+  # - name
+  #
+  # or:
+  # - name: false
+  # - name: true
+  #
+  # or:
+  # - name:
+  #     param1: 1
+  #     param2: 2
+
+- removeAttrs:
+    attrs:
+      - 'fill'
+      - 'fill-rule'

src/layout/components/AppMain.vue

@@ -0,0 +1,40 @@
+<template>
+  <section class="app-main">
+    <transition name="fade-transform" mode="out-in">
+      <router-view :key="key" />
+    </transition>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'AppMain',
+  computed: {
+    key() {
+      return this.$route.path
+    }
+  }
+}
+</script>
+
+<style scoped>
+.app-main {
+  /*50 = navbar  */
+  min-height: calc(100vh - 50px);
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+}
+.fixed-header+.app-main {
+  padding-top: 50px;
+}
+</style>
+
+<style lang="scss">
+// fix css style bug in open el-dialog
+.el-popup-parent--hidden {
+  .fixed-header {
+    padding-right: 15px;
+  }
+}
+</style>

src/layout/components/Navbar.vue

@@ -0,0 +1,217 @@
+<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

@@ -0,0 +1,26 @@
+export default {
+  computed: {
+    device() {
+      return this.$store.state.app.device
+    }
+  },
+  mounted() {
+    // In order to fix the click on menu on the ios device will trigger the mouseleave bug
+    // https://github.com/PanJiaChen/vue-element-admin/issues/1135
+    this.fixBugIniOS()
+  },
+  methods: {
+    fixBugIniOS() {
+      const $subMenu = this.$refs.subMenu
+      if ($subMenu) {
+        const handleMouseleave = $subMenu.handleMouseleave
+        $subMenu.handleMouseleave = (e) => {
+          if (this.device === 'mobile') {
+            return
+          }
+          handleMouseleave(e)
+        }
+      }
+    }
+  }
+}

src/layout/components/Sidebar/Item.vue

@@ -0,0 +1,41 @@
+<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

@@ -0,0 +1,43 @@
+<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

@@ -0,0 +1,82 @@
+<template>
+  <div class="sidebar-logo-container" :class="{'collapse':collapse}">
+    <transition name="sidebarLogoFade">
+      <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
+        <img v-if="logo" :src="logo" class="sidebar-logo">
+        <h1 v-else class="sidebar-title">{{ title }} </h1>
+      </router-link>
+      <router-link v-else key="expand" class="sidebar-logo-link" to="/">
+        <img v-if="logo" :src="logo" class="sidebar-logo">
+        <h1 class="sidebar-title">{{ title }} </h1>
+      </router-link>
+    </transition>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SidebarLogo',
+  props: {
+    collapse: {
+      type: Boolean,
+      required: true
+    }
+  },
+  data() {
+    return {
+      title: '电网教培信息管理系统',
+      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

@@ -0,0 +1,95 @@
+<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

@@ -0,0 +1,61 @@
+<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

@@ -0,0 +1,3 @@
+export { default as Navbar } from './Navbar'
+export { default as Sidebar } from './Sidebar'
+export { default as AppMain } from './AppMain'

src/layout/index.vue

@@ -0,0 +1,95 @@
+<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

@@ -0,0 +1,45 @@
+import store from '@/store'
+
+const { body } = document
+const WIDTH = 992 // refer to Bootstrap's responsive design
+
+export default {
+  watch: {
+    $route(route) {
+      if (this.device === 'mobile' && this.sidebar.opened) {
+        store.dispatch('app/closeSideBar', { withoutAnimation: false })
+      }
+    }
+  },
+  beforeMount() {
+    window.addEventListener('resize', this.$_resizeHandler)
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.$_resizeHandler)
+  },
+  mounted() {
+    const isMobile = this.$_isMobile()
+    if (isMobile) {
+      store.dispatch('app/toggleDevice', 'mobile')
+      store.dispatch('app/closeSideBar', { withoutAnimation: true })
+    }
+  },
+  methods: {
+    // use $_ for mixins properties
+    // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
+    $_isMobile() {
+      const rect = body.getBoundingClientRect()
+      return rect.width - 1 < WIDTH
+    },
+    $_resizeHandler() {
+      if (!document.hidden) {
+        const isMobile = this.$_isMobile()
+        store.dispatch('app/toggleDevice', isMobile ? 'mobile' : 'desktop')
+
+        if (isMobile) {
+          store.dispatch('app/closeSideBar', { withoutAnimation: true })
+        }
+      }
+    }
+  }
+}

src/main.js

@@ -0,0 +1,43 @@
+import Vue from 'vue'
+
+import 'normalize.css/normalize.css' // A modern alternative to CSS resets
+
+import ElementUI from 'element-ui'
+import 'element-ui/lib/theme-chalk/index.css'
+// import locale from 'element-ui/lib/locale/lang/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

@@ -0,0 +1,60 @@
+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

@@ -0,0 +1,182 @@
+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: 'semester',
+        name: '学期列表',
+        component: () => import('@/views/students/semester/list'),
+        meta: { title: '学期列表', icon: 'question' }
+      },
+      {
+        hidden: true,
+        path: 'semester/edit',
+        name: 'semesterEdit',
+        component: () => import('@/views/students/semester/edit'),
+        meta: { title: '学期编辑', icon: 'question' }
+      },
+      {
+        path: 'sutdentsList',
+        name: '学员列表',
+        component: () => import('@/views/students/studentsList'),
+        meta: { title: '课程列表', icon: 'question' }
+      }
+    ]
+  },
+
+  // 课程管理
+  {
+    path: '/course',
+    component: Layout,
+    meta: { title: '课程管理', icon: 'form' },
+    children: [
+      {
+        path: 'course',
+        name: '课程列表',
+        component: () => import('@/views/course/index'),
+        meta: { title: '课程列表', icon: 'question' }
+      },
+      {
+        hidden: true,
+        path: 'course/edit',
+        name: 'courseEdit',
+        component: () => import('@/views/course/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: 'question' }
+      },
+      {
+        hidden: true,
+        path: 'photoWall/edit',
+        name: 'photoWallEdit',
+        component: () => import('@/views/photoWall/edit'),
+        meta: { title: '照片编辑', icon: 'question' }
+      }
+    ]
+  },
+
+  // 问卷调查
+  {
+    path: '/questionnaire',
+    component: Layout,
+    meta: { title: '问卷调查', icon: 'form' },
+    children: [
+      {
+        path: 'questionnaire',
+        name: '问卷列表',
+        component: () => import('@/views/questionnaire/index'),
+        meta: { title: '问卷列表', icon: 'question' }
+      },
+      {
+        hidden: true,
+        path: 'questionnaire/edit',
+        name: 'questionEdit',
+        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

@@ -0,0 +1,16 @@
+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

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

src/store/index.js

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,49 @@
+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

@@ -0,0 +1,30 @@
+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

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,70 @@
+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
+}
+

src/styles/element-ui.scss

@@ -0,0 +1,49 @@
+// cover some element-ui styles
+
+.el-breadcrumb__inner,
+.el-breadcrumb__inner a {
+  font-weight: 400 !important;
+}
+
+.el-upload {
+  input[type="file"] {
+    display: none !important;
+  }
+}
+
+.el-upload__input {
+  display: none;
+}
+
+
+// to fixed https://github.com/ElemeFE/element/issues/2461
+.el-dialog {
+  transform: none;
+  left: 0;
+  position: relative;
+  margin: 0 auto;
+}
+
+// refine element ui upload
+.upload-container {
+  .el-upload {
+    width: 100%;
+
+    .el-upload-dragger {
+      width: 100%;
+      height: 200px;
+    }
+  }
+}
+
+// dropdown
+.el-dropdown-menu {
+  a {
+    display: block
+  }
+}
+
+// to fix el-date-picker css style
+.el-range-separator {
+  box-sizing: content-box;
+}

src/styles/index.scss

@@ -0,0 +1,65 @@
+@import './variables.scss';
+@import './mixin.scss';
+@import './transition.scss';
+@import './element-ui.scss';
+@import './sidebar.scss';
+
+body {
+  height: 100%;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+}
+
+label {
+  font-weight: 700;
+}
+
+html {
+  height: 100%;
+  box-sizing: border-box;
+}
+
+#app {
+  height: 100%;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+a:focus,
+a:active {
+  outline: none;
+}
+
+a,
+a:focus,
+a:hover {
+  cursor: pointer;
+  color: inherit;
+  text-decoration: none;
+}
+
+div:focus {
+  outline: none;
+}
+
+.clearfix {
+  &:after {
+    visibility: hidden;
+    display: block;
+    font-size: 0;
+    content: " ";
+    clear: both;
+    height: 0;
+  }
+}
+
+// main-container global css
+.app-container {
+  padding: 20px;
+}

src/styles/mixin.scss

@@ -0,0 +1,28 @@
+@mixin clearfix {
+  &:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+}
+
+@mixin scrollBar {
+  &::-webkit-scrollbar-track-piece {
+    background: #d3dce6;
+  }
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #99a9bf;
+    border-radius: 20px;
+  }
+}
+
+@mixin relative {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}

src/styles/sidebar.scss

@@ -0,0 +1,226 @@
+#app {
+
+  .main-container {
+    min-height: 100%;
+    transition: margin-left .28s;
+    margin-left: $sideBarWidth;
+    position: relative;
+  }
+
+  .sidebar-container {
+    transition: width 0.28s;
+    width: $sideBarWidth !important;
+    background-color: $menuBg;
+    height: 100%;
+    position: fixed;
+    font-size: 0px;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1001;
+    overflow: hidden;
+
+    // reset element-ui css
+    .horizontal-collapse-transition {
+      transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
+    }
+
+    .scrollbar-wrapper {
+      overflow-x: hidden !important;
+    }
+
+    .el-scrollbar__bar.is-vertical {
+      right: 0px;
+    }
+
+    .el-scrollbar {
+      height: 100%;
+    }
+
+    &.has-logo {
+      .el-scrollbar {
+        height: calc(100% - 50px);
+      }
+    }
+
+    .is-horizontal {
+      display: none;
+    }
+
+    a {
+      display: inline-block;
+      width: 100%;
+      overflow: hidden;
+    }
+
+    .svg-icon {
+      margin-right: 16px;
+    }
+
+    .sub-el-icon {
+      margin-right: 12px;
+      margin-left: -2px;
+    }
+
+    .el-menu {
+      border: none;
+      height: 100%;
+      width: 100% !important;
+    }
+
+    // menu hover
+    .submenu-title-noDropdown,
+    .el-submenu__title {
+      &:hover {
+        background-color: $menuHover !important;
+      }
+    }
+
+    .is-active>.el-submenu__title {
+      color: $subMenuActiveText !important;
+    }
+
+    & .nest-menu .el-submenu>.el-submenu__title,
+    & .el-submenu .el-menu-item {
+      min-width: $sideBarWidth !important;
+      background-color: $subMenuBg !important;
+
+      &:hover {
+        background-color: $subMenuHover !important;
+      }
+    }
+  }
+
+  .hideSidebar {
+    .sidebar-container {
+      width: 54px !important;
+    }
+
+    .main-container {
+      margin-left: 54px;
+    }
+
+    .submenu-title-noDropdown {
+      padding: 0 !important;
+      position: relative;
+
+      .el-tooltip {
+        padding: 0 !important;
+
+        .svg-icon {
+          margin-left: 20px;
+        }
+
+        .sub-el-icon {
+          margin-left: 19px;
+        }
+      }
+    }
+
+    .el-submenu {
+      overflow: hidden;
+
+      &>.el-submenu__title {
+        padding: 0 !important;
+
+        .svg-icon {
+          margin-left: 20px;
+        }
+
+        .sub-el-icon {
+          margin-left: 19px;
+        }
+
+        .el-submenu__icon-arrow {
+          display: none;
+        }
+      }
+    }
+
+    .el-menu--collapse {
+      .el-submenu {
+        &>.el-submenu__title {
+          &>span {
+            height: 0;
+            width: 0;
+            overflow: hidden;
+            visibility: hidden;
+            display: inline-block;
+          }
+        }
+      }
+    }
+  }
+
+  .el-menu--collapse .el-menu .el-submenu {
+    min-width: $sideBarWidth !important;
+  }
+
+  // mobile responsive
+  .mobile {
+    .main-container {
+      margin-left: 0px;
+    }
+
+    .sidebar-container {
+      transition: transform .28s;
+      width: $sideBarWidth !important;
+    }
+
+    &.hideSidebar {
+      .sidebar-container {
+        pointer-events: none;
+        transition-duration: 0.3s;
+        transform: translate3d(-$sideBarWidth, 0, 0);
+      }
+    }
+  }
+
+  .withoutAnimation {
+
+    .main-container,
+    .sidebar-container {
+      transition: none;
+    }
+  }
+}
+
+// when menu collapsed
+.el-menu--vertical {
+  &>.el-menu {
+    .svg-icon {
+      margin-right: 16px;
+    }
+    .sub-el-icon {
+      margin-right: 12px;
+      margin-left: -2px;
+    }
+  }
+
+  .nest-menu .el-submenu>.el-submenu__title,
+  .el-menu-item {
+    &:hover {
+      // you can use $subMenuHover
+      background-color: $menuHover !important;
+    }
+  }
+
+  // the scroll bar appears when the subMenu is too long
+  >.el-menu--popup {
+    max-height: 100vh;
+    overflow-y: auto;
+
+    &::-webkit-scrollbar-track-piece {
+      background: #d3dce6;
+    }
+
+    &::-webkit-scrollbar {
+      width: 6px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: #99a9bf;
+      border-radius: 20px;
+    }
+  }
+}

src/styles/transition.scss

@@ -0,0 +1,48 @@
+// global transition css
+
+/* fade */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.28s;
+}
+
+.fade-enter,
+.fade-leave-active {
+  opacity: 0;
+}
+
+/* fade-transform */
+.fade-transform-leave-active,
+.fade-transform-enter-active {
+  transition: all .5s;
+}
+
+.fade-transform-enter {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+
+.fade-transform-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+/* breadcrumb transition */
+.breadcrumb-enter-active,
+.breadcrumb-leave-active {
+  transition: all .5s;
+}
+
+.breadcrumb-enter,
+.breadcrumb-leave-active {
+  opacity: 0;
+  transform: translateX(20px);
+}
+
+.breadcrumb-move {
+  transition: all .5s;
+}
+
+.breadcrumb-leave-active {
+  position: absolute;
+}

src/styles/variables.scss

@@ -0,0 +1,25 @@
+// sidebar
+$menuText:#bfcbd9;
+$menuActiveText:#409EFF;
+$subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951
+
+$menuBg:#304156;
+$menuHover:#263445;
+
+$subMenuBg:#1f2d3d;
+$subMenuHover:#001528;
+
+$sideBarWidth: 210px;
+
+// the :export directive is the magic sauce for webpack
+// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
+:export {
+  menuText: $menuText;
+  menuActiveText: $menuActiveText;
+  subMenuActiveText: $subMenuActiveText;
+  menuBg: $menuBg;
+  menuHover: $menuHover;
+  subMenuBg: $subMenuBg;
+  subMenuHover: $subMenuHover;
+  sideBarWidth: $sideBarWidth;
+}

src/utils/auth.js

@@ -0,0 +1,27 @@
+import Cookies from 'js-cookie'
+
+const TokenKey = 'token'
+
+export function getToken() {
+  return Cookies.get(TokenKey)
+}
+
+export function setToken(token) {
+  return Cookies.set(TokenKey, token)
+}
+
+export function removeToken() {
+  return Cookies.remove(TokenKey)
+}
+
+const UserIdKey = 'user'
+
+export function setUserId(userId) {
+  return Cookies.set(UserIdKey, userId)
+}
+export function getUserId() {
+  return Cookies.get(UserIdKey)
+}
+export function removeUserId() {
+  return Cookies.remove(UserIdKey)
+}

src/utils/get-page-title.js

@@ -0,0 +1,10 @@
+import defaultSettings from '@/settings'
+
+const title = defaultSettings.title || 'Vue Admin Template'
+
+export default function getPageTitle(pageTitle) {
+  if (pageTitle) {
+    return `${pageTitle} - ${title}`
+  }
+  return `${title}`
+}

src/utils/index.js

@@ -0,0 +1,117 @@
+/**
+ * Created by PanJiaChen on 16/11/18.
+ */
+
+/**
+ * Parse the time to string
+ * @param {(Object|string|number)} time
+ * @param {string} cFormat
+ * @returns {string | null}
+ */
+export function parseTime(time, cFormat) {
+  if (arguments.length === 0 || !time) {
+    return null
+  }
+  const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
+  let date
+  if (typeof time === 'object') {
+    date = time
+  } else {
+    if ((typeof time === 'string')) {
+      if ((/^[0-9]+$/.test(time))) {
+        // support "1548221490638"
+        time = parseInt(time)
+      } else {
+        // support safari
+        // https://stackoverflow.com/questions/4310953/invalid-date-in-safari
+        time = time.replace(new RegExp(/-/gm), '/')
+      }
+    }
+
+    if ((typeof time === 'number') && (time.toString().length === 10)) {
+      time = time * 1000
+    }
+    date = new Date(time)
+  }
+  const formatObj = {
+    y: date.getFullYear(),
+    m: date.getMonth() + 1,
+    d: date.getDate(),
+    h: date.getHours(),
+    i: date.getMinutes(),
+    s: date.getSeconds(),
+    a: date.getDay()
+  }
+  const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => {
+    const value = formatObj[key]
+    // Note: getDay() returns 0 on Sunday
+    if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value ] }
+    return value.toString().padStart(2, '0')
+  })
+  return time_str
+}
+
+/**
+ * @param {number} time
+ * @param {string} option
+ * @returns {string}
+ */
+export function formatTime(time, option) {
+  if (('' + time).length === 10) {
+    time = parseInt(time) * 1000
+  } else {
+    time = +time
+  }
+  const d = new Date(time)
+  const now = Date.now()
+
+  const diff = (now - d) / 1000
+
+  if (diff < 30) {
+    return '刚刚'
+  } else if (diff < 3600) {
+    // less 1 hour
+    return Math.ceil(diff / 60) + '分钟前'
+  } else if (diff < 3600 * 24) {
+    return Math.ceil(diff / 3600) + '小时前'
+  } else if (diff < 3600 * 24 * 2) {
+    return '1天前'
+  }
+  if (option) {
+    return parseTime(time, option)
+  } else {
+    return (
+      d.getMonth() +
+      1 +
+      '月' +
+      d.getDate() +
+      '日' +
+      d.getHours() +
+      '时' +
+      d.getMinutes() +
+      '分'
+    )
+  }
+}
+
+/**
+ * @param {string} url
+ * @returns {Object}
+ */
+export function param2Obj(url) {
+  const search = 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
+}

src/utils/request.js

@@ -0,0 +1,71 @@
+import axios from 'axios'
+import { Message } from 'element-ui'
+import store from '@/store'
+import { getToken, getUserId } from '@/utils/auth'
+
+// create an axios instance
+const service = axios.create({
+  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
+  // withCredentials: true, // send cookies when cross-domain requests
+  timeout: 5000 // request timeout
+})
+
+// request interceptor
+service.interceptors.request.use(
+  config => {
+    // do something before request is sent
+
+    if (store.getters.token) {
+      // let each request carry token
+      // ['X-Token'] is a custom headers key
+      // please modify it according to the actual situation
+      config.headers['X-Authorization-JWT'] = getToken()
+      config.headers['x-userid'] = getUserId()
+    }
+    return config
+  },
+  error => {
+    // do something with request error
+    console.log(error) // for debug
+    return Promise.reject(error)
+  }
+)
+
+// response interceptor响应
+service.interceptors.response.use(
+  /**
+   * If you want to get http information such as headers or status
+   * Please return  response => response
+  */
+
+  /**
+   * Determine the request status by custom code
+   * Here is just an example
+   * You can also judge the status by HTTP Status Code
+   */
+  response => {
+    const res = response.data
+    // if the custom code is not 20000, it is judged as an error.
+    if (res.code !== 1000) {
+      Message({
+        message: res.message || 'Error',
+        type: 'error',
+        duration: 5 * 1000
+      })
+      return Promise.reject(new Error(res.message || 'Error'))
+    } else {
+      return res
+    }
+  },
+  error => {
+    console.log('err' + error) // for debug
+    Message({
+      message: error.message,
+      type: 'error',
+      duration: 5 * 1000
+    })
+    return Promise.reject(error)
+  }
+)
+
+export default service

src/utils/upload.js

@@ -0,0 +1,17 @@
+import { upload } from '@/api/oss'
+
+/**
+ * 获取 OSS 客户端
+ * @returns
+ */
+export function uploadFile({ file, onSuccess, onError }) {
+  upload(file).then((url) => {
+    onSuccess(url, file)
+  }).catch((e) => {
+    onError(e)
+  })
+
+  return {
+    abort: () => {}
+  }
+}

src/utils/validate.js

@@ -0,0 +1,20 @@
+/**
+ * Created by PanJiaChen on 16/11/18.
+ */
+
+/**
+ * @param {string} path
+ * @returns {Boolean}
+ */
+export function isExternal(path) {
+  return /^(https?:|mailto:|tel:)/.test(path)
+}
+
+/**
+ * @param {string} str
+ * @returns {Boolean}
+ */
+export function validUsername(str) {
+  const valid_map = ['admin', 'editor']
+  return valid_map.indexOf(str.trim()) >= 0
+}

src/views/404.vue

@@ -0,0 +1,228 @@
+<template>
+  <div class="wscn-http404-container">
+    <div class="wscn-http404">
+      <div class="pic-404">
+        <img class="pic-404__parent" src="@/assets/404_images/404.png" alt="404">
+        <img class="pic-404__child left" src="@/assets/404_images/404_cloud.png" alt="404">
+        <img class="pic-404__child mid" src="@/assets/404_images/404_cloud.png" alt="404">
+        <img class="pic-404__child right" src="@/assets/404_images/404_cloud.png" alt="404">
+      </div>
+      <div class="bullshit">
+        <div class="bullshit__oops">OOPS!</div>
+        <div class="bullshit__info">All rights reserved
+          <a style="color:#20a0ff" href="https://wallstreetcn.com" target="_blank">wallstreetcn</a>
+        </div>
+        <div class="bullshit__headline">{{ message }}</div>
+        <div class="bullshit__info">Please check that the URL you entered is correct, or click the button below to return to the homepage.</div>
+        <a href="" class="bullshit__return-home">Back to home</a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'Page404',
+  computed: {
+    message() {
+      return 'The webmaster said that you can not enter this page...'
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.wscn-http404-container{
+  transform: translate(-50%,-50%);
+  position: absolute;
+  top: 40%;
+  left: 50%;
+}
+.wscn-http404 {
+  position: relative;
+  width: 1200px;
+  padding: 0 50px;
+  overflow: hidden;
+  .pic-404 {
+    position: relative;
+    float: left;
+    width: 600px;
+    overflow: hidden;
+    &__parent {
+      width: 100%;
+    }
+    &__child {
+      position: absolute;
+      &.left {
+        width: 80px;
+        top: 17px;
+        left: 220px;
+        opacity: 0;
+        animation-name: cloudLeft;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1s;
+      }
+      &.mid {
+        width: 46px;
+        top: 10px;
+        left: 420px;
+        opacity: 0;
+        animation-name: cloudMid;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1.2s;
+      }
+      &.right {
+        width: 62px;
+        top: 100px;
+        left: 500px;
+        opacity: 0;
+        animation-name: cloudRight;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1s;
+      }
+      @keyframes cloudLeft {
+        0% {
+          top: 17px;
+          left: 220px;
+          opacity: 0;
+        }
+        20% {
+          top: 33px;
+          left: 188px;
+          opacity: 1;
+        }
+        80% {
+          top: 81px;
+          left: 92px;
+          opacity: 1;
+        }
+        100% {
+          top: 97px;
+          left: 60px;
+          opacity: 0;
+        }
+      }
+      @keyframes cloudMid {
+        0% {
+          top: 10px;
+          left: 420px;
+          opacity: 0;
+        }
+        20% {
+          top: 40px;
+          left: 360px;
+          opacity: 1;
+        }
+        70% {
+          top: 130px;
+          left: 180px;
+          opacity: 1;
+        }
+        100% {
+          top: 160px;
+          left: 120px;
+          opacity: 0;
+        }
+      }
+      @keyframes cloudRight {
+        0% {
+          top: 100px;
+          left: 500px;
+          opacity: 0;
+        }
+        20% {
+          top: 120px;
+          left: 460px;
+          opacity: 1;
+        }
+        80% {
+          top: 180px;
+          left: 340px;
+          opacity: 1;
+        }
+        100% {
+          top: 200px;
+          left: 300px;
+          opacity: 0;
+        }
+      }
+    }
+  }
+  .bullshit {
+    position: relative;
+    float: left;
+    width: 300px;
+    padding: 30px 0;
+    overflow: hidden;
+    &__oops {
+      font-size: 32px;
+      font-weight: bold;
+      line-height: 40px;
+      color: #1482f0;
+      opacity: 0;
+      margin-bottom: 20px;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-fill-mode: forwards;
+    }
+    &__headline {
+      font-size: 20px;
+      line-height: 24px;
+      color: #222;
+      font-weight: bold;
+      opacity: 0;
+      margin-bottom: 10px;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.1s;
+      animation-fill-mode: forwards;
+    }
+    &__info {
+      font-size: 13px;
+      line-height: 21px;
+      color: grey;
+      opacity: 0;
+      margin-bottom: 30px;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.2s;
+      animation-fill-mode: forwards;
+    }
+    &__return-home {
+      display: block;
+      float: left;
+      width: 110px;
+      height: 36px;
+      background: #1482f0;
+      border-radius: 100px;
+      text-align: center;
+      color: #ffffff;
+      opacity: 0;
+      font-size: 14px;
+      line-height: 36px;
+      cursor: pointer;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.3s;
+      animation-fill-mode: forwards;
+    }
+    @keyframes slideUp {
+      0% {
+        transform: translateY(60px);
+        opacity: 0;
+      }
+      100% {
+        transform: translateY(0);
+        opacity: 1;
+      }
+    }
+  }
+}
+</style>

src/views/course/edit.vue

@@ -0,0 +1,281 @@
+<template>
+  <div>
+    <el-card class="box-card" shadow="never">
+      <el-row :gutter="24">
+        <el-col :span="18">
+          <el-form
+            ref="ruleForm"
+            :model="ruleForm"
+            :rules="rules"
+            label-width="10vw"
+            class="demo-ruleForm"
+          >
+            <el-form-item label="学期" prop="appName" style="width:30vw">
+              <el-select v-model="ruleForm.appType" filterable placeholder="请选择">
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item style="width:30vw" label="课程名" prop="course">
+              <el-input v-model="ruleForm.course" />
+            </el-form-item>
+            <el-form-item style="width:30vw" label="签到人数" prop="signInNum">
+              <el-input v-model="ruleForm.signInNum" />
+            </el-form-item>
+            <el-form-item style="width:30vw" label="二维码" prop="qcode">
+              <el-image :src="qcode" style="width: 100px; height: 100px" />
+            </el-form-item>
+            <!-- <el-form-item label="发布状态" prop="status">
+              <el-select v-model="ruleForm.status" placeholder="请选择状态">
+                <el-option label="发布" :value="1" />
+                <el-option label="未发布" :value="0" />
+              </el-select>
+            </el-form-item> -->
+
+            <el-form-item>
+              <el-button
+                type="primary"
+                @click="submitForm('ruleForm')"
+              >{{ !configId?'新建照片墙':'修改照片墙' }}</el-button>
+              <el-button @click="resetForm('ruleForm')">重置</el-button>
+            </el-form-item>
+          </el-form>
+        </el-col>
+      </el-row>
+    </el-card>
+  </div>
+</template>
+
+<script>
+// import { saveConfig, detailsConfig, ChangeConfig } from '@/api/WeChatApi'
+import QRCode from 'qrcodejs2'
+
+export default {
+  data() {
+    return {
+      configId: '',
+      gameForm: {
+        gameForm: undefined
+      },
+      qcode: undefined,
+      ruleForm: {
+        course: undefined,
+        signInNum: undefined,
+        appName: '',
+        appid: '',
+        appType: '',
+        aesKey: '',
+        apiUrl: '',
+        resource: '',
+        httpPoxyHost: '',
+        msgDataFormat: 'Json',
+        secret: '',
+        token: '',
+        httpProxyPort: null,
+        status: null
+      },
+      rules: {
+        appName: [
+          { required: true, message: '请输入配置名称', trigger: 'blur' }
+        ],
+        appid: [{ required: true, message: '请输入AppID', trigger: 'blur' }],
+        appType: [{ required: true, message: '请选择类型', trigger: 'blur' }],
+        aesKey: [{ required: true, message: '请选择AesKey', trigger: 'blur' }],
+        apiUrl: [
+          { required: true, message: '请选择第三方接口地址', trigger: 'blur' }
+        ],
+        httpPoxyHost: [
+          { required: true, message: '请输入接口代理地址', trigger: 'blur' }
+        ],
+        httpProxyPort: [
+          { required: true, message: '请输入接口代理端口', trigger: 'blur' }
+        ],
+        msgDataFormat: [
+          { required: true, message: '请输入消息格式类型', trigger: 'blur' }
+        ],
+        secret: [{ required: true, message: '请输入Secret', trigger: 'blur' }],
+        token: [{ required: true, message: '请输入Token', trigger: 'blur' }],
+
+        status: [{ required: true, message: '请选择状态', trigger: 'blur' }]
+      },
+      options: [{
+        value: '选项1',
+        label: '2022年第一学期'
+      }, {
+        value: '选项2',
+        label: '2022年第二学期'
+      }, {
+        value: '选项3',
+        label: '2023年第一学期'
+      }, {
+        value: '选项4',
+        label: '2023年第二学期'
+      }, {
+        value: '选项5',
+        label: '2024年第一学期'
+      }]
+    }
+  },
+
+  watch: {
+    configId: function(val, oldVal) {
+      if (val) {
+        this.configId = val
+      //   detailsConfig(val)
+      //     .then((res) => {
+      //       this.ruleForm = res.data
+      //     })
+      //     .catch((e) => {
+      //       this.$message.error('ID有误。')
+      //       this.$router.go(-1)
+      //     })
+      }
+    }
+  },
+  mounted() {
+    if (this.$route?.query.configId) {
+      this.configId = this.$route.query.configId
+      // detailsConfig(this.configId)
+      //   .then((res) => {
+      //     this.ruleForm = res.data
+      //   })
+      //   .catch((e) => {
+      //     this.$message.error('ID有误。')
+      //     this.$router.go(-1)
+      //   })
+    }
+    if (this.$route?.query.courseId) {
+      this.configId = this.$route.query.configId
+      // detailsConfig(this.configId)
+      //   .then((res) => {
+      //     this.ruleForm = res.data
+      //   })
+      //   .catch((e) => {
+      //     this.$message.error('ID有误。')
+      //     this.$router.go(-1)
+      //   })
+    }
+  },
+  methods: {
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        console.log(this.ruleForm)
+        // if (valid) {
+        //   if (this.configId === '') {
+        //     saveConfig(this.ruleForm)
+        //       .then((e) => {
+        //         this.$message.success('配置保存成功')
+        //         this.$router.go(-1)
+        //         console.log('保存字段', e)
+        //       })
+        //       .catch((e) => {
+        //         this.$message.error('保存失败', e)
+        //       })
+        //   } else {
+        //     ChangeConfig(this.ruleForm, this.configId)
+        //       .then((res) => {
+        //         this.$message.success('配置修改成功')
+        //         this.$router.go(-1)
+        //       })
+        //       .catch((e) => {
+        //         console.log(e)
+        //       })
+        //   }
+        // } else {
+        //   return false
+        // }
+      })
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields()
+    },
+    handleChange(val) {
+      this.gameForm.gameImage = val
+    },
+    handleDeleteIcon() {
+      this.gameForm.gameImage = ''
+    },
+    // 生成二维码
+    qrcode(val) {
+      // eslint-disable-next-line no-unused-vars
+      const qrcode = new QRCode('qrcode', {
+        width: 200,
+        height: 200, // 高度
+        text: 'http://192.168.89.76:8080/?gameId=' + val.gameId
+      })
+    },
+    // 下载二维码
+    downloadQrcode(val) {
+      document.getElementById('qrcode').innerHTML = ''
+      this.qrcode(val) // 下载之前首先要有二维码
+      // 先找到canvas节点下的二维码图片
+      const myCanvas = document.getElementById('qrcode').getElementsByTagName('canvas')
+      const img = document.getElementById('qrcode').getElementsByTagName('img')
+      // 创建一个a节点
+      const a = document.createElement('a')
+      // 设置a的href属性将canvas变成png格式
+      const imgURL = myCanvas[0].toDataURL('image/jpg')
+      const ua = navigator.userAgent
+      if (ua.indexOf('Trident') !== -1 && ua.indexOf('Windows') !== -1) { // IE内核 并且  windows系统 情况下 才执行;
+        var bstr = atob(imgURL.split(',')[1])
+        var n = bstr.length
+        var u8arr = new Uint8Array(n)
+        while (n--) {
+          u8arr[n] = bstr.charCodeAt(n)
+        }
+        var blob = new Blob([u8arr])
+        window.navigator.msSaveOrOpenBlob(blob, val.title + '.png')
+      } else if (ua.indexOf('Firefox') > -1) { // 火狐兼容下载
+        const blob = this.base64ToBlob(imgURL) // new Blob([content]);
+        const evt = document.createEvent('HTMLEvents')
+        evt.initEvent('click', true, true)// initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
+        a.download = val.title + '.png'// 下载图片名称，如果填内容识别不到，下载为未知文件，所以我这里就不填为空
+        a.href = URL.createObjectURL(blob)
+        a.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, view: window }))// 兼容火狐
+      } else { // 谷歌兼容下载
+        img.src = imgURL
+        a.href = img.src
+        // 设置下载文件的名字
+        a.download = val.title + '.png'
+        // 点击
+        a.click()
+      }
+    },
+    // 返回对应二维码图片给表格
+    setCodeImg(val) {
+      document.getElementById('qrcode').innerHTML = ''
+      this.qrcode(val) // 下载之前首先要有二维码
+      // 先找到canvas节点下的二维码图片
+      const myCanvas = document.getElementById('qrcode').getElementsByTagName('canvas')
+      // 设置a的href属性将canvas变成png格式
+      const imgURL = myCanvas[myCanvas.length - 1].toDataURL('image/jpg')
+      return imgURL
+    },
+    // base64转blob
+    base64ToBlob(code) {
+      const parts = code.split(';base64,')
+      const contentType = parts[0].split(':')[1]
+      const raw = window.atob(parts[1])
+      const rawLength = raw.length
+      const uInt8Array = new Uint8Array(rawLength)
+      for (let i = 0; i < rawLength; ++i) {
+        uInt8Array[i] = raw.charCodeAt(i)
+      }
+      return new Blob([uInt8Array], { type: contentType })
+    }
+  }
+}
+</script>
+
+<style scoped >
+.demo-ruleForm {
+  margin-top: 1em;
+}
+</style>
+
+<style lang="scss" scoped>
+</style>