From d79d81f53324911b03f521cd2b71054ed9278cab Mon Sep 17 00:00:00 2001
From: hailin <1356886193@qq.com>
Date: 星期三, 12 七月 2023 14:40:08 +0800
Subject: [PATCH] 第一次提交

---
 src/views/laboratory/measure/index.vue                 |   13 
 src/icons/svg/nested.svg                               |    1 
 src/views/personal/myBusiness/index.vue                |   15 
 src/layout/index.vue                                   |  107 +
 tests/unit/utils/validate.spec.js                      |   17 
 src/views/laboratory/personnel/index.vue               |  169 +
 src/store/modules/settings.js                          |   32 
 src/styles/sidebar.scss                                |  230 ++
 src/styles/variables.scss                              |   39 
 mock/mock-server.js                                    |   81 
 src/views/laboratory/gather/index.vue                  |   13 
 src/store/modules/user.js                              |   97 +
 src/store/index.js                                     |   19 
 src/views/rawMaterials/print/index.vue                 |   13 
 src/settings.js                                        |   16 
 src/views/rawMaterials/nonConformingFeedback/index.vue |   13 
 tests/unit/components/Breadcrumb.spec.js               |   98 +
 src/components/Breadcrumb/index.vue                    |   80 
 src/icons/svg/form.svg                                 |    1 
 src/layout/components/Sidebar/Link.vue                 |   43 
 .env.development                                       |    5 
 src/views/home/index.vue                               |   97 +
 src/components/Hamburger/index.vue                     |   44 
 tests/unit/components/SvgIcon.spec.js                  |   22 
 src/icons/svg/table.svg                                |    1 
 src/utils/index.js                                     |  117 +
 src/views/rawMaterials/checkTheReport/index.vue        |   13 
 src/icons/svg/eye.svg                                  |    1 
 tests/unit/utils/formatTime.spec.js                    |   30 
 tests/unit/.eslintrc.js                                |    5 
 src/views/login/index.vue                              |  241 ++
 src/views/rawMaterials/passRateStatistics/index.vue    |   13 
 jsconfig.json                                          |    9 
 src/icons/svgo.yml                                     |   22 
 .travis.yml                                            |    5 
 src/layout/components/Sidebar/index.vue                |   56 
 src/views/message/toDo/index.vue                       |   13 
 src/store/modules/app.js                               |   48 
 src/styles/index.scss                                  |   85 
 public/index.html                                      |   17 
 tests/unit/utils/param2Obj.spec.js                     |   14 
 src/views/rawMaterials/planAssignments/index.vue       |   13 
 mock/table.js                                          |   29 
 src/layout/mixin/ResizeHandler.js                      |   45 
 src/styles/element-ui.scss                             |   92 +
 src/views/404.vue                                      |  228 ++
 src/utils/request.js                                   |   84 
 babel.config.js                                        |   14 
 build/index.js                                         |   35 
 src/icons/svg/eye-open.svg                             |    1 
 src/views/chart/spc/index.vue                          |   13 
 src/layout/components/AppMain.vue                      |   48 
 .eslintignore                                          |    4 
 src/views/rawMaterials/rawMaterialInspection/index.vue |   13 
 src/assets/404_images/logo.png                         |    0 
 src/icons/svg/dashboard.svg                            |    1 
 src/icons/svg/example.svg                              |    1 
 src/utils/auth.js                                      |   15 
 tests/unit/components/Hamburger.spec.js                |   18 
 src/icons/svg/tree.svg                                 |    1 
 .eslintrc.js                                           |  198 ++
 src/layout/components/Sidebar/Logo.vue                 |   88 +
 mock/user.js                                           |   84 
 src/store/getters.js                                   |    8 
 public/favicon.ico                                     |    0 
 .editorconfig                                          |   14 
 LICENSE                                                |   21 
 src/utils/get-page-title.js                            |   10 
 src/icons/svg/password.svg                             |    1 
 mock/utils.js                                          |   25 
 src/permission.js                                      |   64 
 src/views/rawMaterials/nonConformanceReview/index.vue  |   13 
 src/api/user.js                                        |   53 
 src/icons/svg/link.svg                                 |    1 
 src/views/personal/myInformation/index.vue             |  194 ++
 src/views/chart/shota/index.vue                        |   13 
 src/layout/components/Sidebar/Item.vue                 |   41 
 src/router/index.js                                    |  319 +++
 src/layout/components/Sidebar/FixiOSBug.js             |   26 
 src/views/rawMaterials/reportForInspection/index.vue   |   13 
 src/api/table.js                                       |    9 
 src/main.js                                            |   44 
 tests/unit/utils/parseTime.spec.js                     |   35 
 .env.production                                        |    7 
 src/layout/components/index.js                         |    3 
 src/styles/mixin.scss                                  |   28 
 postcss.config.js                                      |   13 
 src/assets/404_images/404.png                          |    0 
 src/icons/svg/user.svg                                 |    1 
 .gitignore                                             |   16 
 src/layout/components/Navbar.vue                       |  158 +
 src/icons/index.js                                     |    9 
 .env.staging                                           |   10 
 jest.config.js                                         |   24 
 src/assets/404_images/backgroud.png                    |    0 
 src/layout/components/Sidebar/SidebarItem.vue          |   95 +
 src/views/chart/center/index.vue                       |   13 
 src/views/chart/work/index.vue                         |   13 
 src/views/standardLibrary/index.vue                    |  238 ++
 src/api/standardLibrary.js                             |   17 
 src/assets/404_images/404_cloud.png                    |    0 
 src/views/rawMaterials/reportAuditing/index.vue        |   13 
 src/components/SvgIcon/index.vue                       |   62 
 src/utils/validate.js                                  |   20 
 src/styles/transition.scss                             |   48 
 mock/index.js                                          |   57 
 src/views/message/message/index.vue                    |   13 
 package.json                                           |   64 
 src/views/laboratory/ledger/index.vue                  |  296 +++
 src/App.vue                                            |   11 
 110 files changed, 5,113 insertions(+), 0 deletions(-)

diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 0000000..ea6e20f
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,14 @@
+# http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+insert_final_newline = false
+trim_trailing_whitespace = false
diff --git a/.env.development b/.env.development
new file mode 100644
index 0000000..cc5188c
--- /dev/null
+++ b/.env.development
@@ -0,0 +1,5 @@
+# just a flag
+ENV = 'development'
+
+# base api
+VUE_APP_BASE_API = 'http://192.168.110.167:1234/'
diff --git a/.env.production b/.env.production
new file mode 100644
index 0000000..d5166db
--- /dev/null
+++ b/.env.production
@@ -0,0 +1,7 @@
+# just a flag
+ENV = 'production'
+
+# base api
+# VUE_APP_BASE_API = '/prod-api'
+VUE_APP_BASE_API = 'http://192.168.110.167:1234/'
+
diff --git a/.env.staging b/.env.staging
new file mode 100644
index 0000000..65e5ce8
--- /dev/null
+++ b/.env.staging
@@ -0,0 +1,10 @@
+NODE_ENV = production
+
+# just a flag
+ENV = 'staging'
+
+# base api
+# VUE_APP_BASE_API = '/stage-api'
+VUE_APP_BASE_API = 'http://192.168.110.167:1234/'
+
+
diff --git a/.eslintignore b/.eslintignore
new file mode 100644
index 0000000..e6529fc
--- /dev/null
+++ b/.eslintignore
@@ -0,0 +1,4 @@
+build/*.js
+src/assets
+public
+dist
diff --git a/.eslintrc.js b/.eslintrc.js
new file mode 100644
index 0000000..c977505
--- /dev/null
+++ b/.eslintrc.js
@@ -0,0 +1,198 @@
+module.exports = {
+  root: true,
+  parserOptions: {
+    parser: 'babel-eslint',
+    sourceType: 'module'
+  },
+  env: {
+    browser: true,
+    node: true,
+    es6: true,
+  },
+  extends: ['plugin:vue/recommended', 'eslint:recommended'],
+
+  // add your custom rules here
+  //it is base on https://github.com/vuejs/eslint-config-vue
+  rules: {
+    "vue/max-attributes-per-line": [2, {
+      "singleline": 10,
+      "multiline": {
+        "max": 1,
+        "allowFirstLine": false
+      }
+    }],
+    "vue/singleline-html-element-content-newline": "off",
+    "vue/multiline-html-element-content-newline":"off",
+    "vue/name-property-casing": ["error", "PascalCase"],
+    "vue/no-v-html": "off",
+    'accessor-pairs': 2,
+    'arrow-spacing': [2, {
+      'before': true,
+      'after': true
+    }],
+    'block-spacing': [2, 'always'],
+    'brace-style': [2, '1tbs', {
+      'allowSingleLine': true
+    }],
+    'camelcase': [0, {
+      'properties': 'always'
+    }],
+    'comma-dangle': [2, 'never'],
+    'comma-spacing': [2, {
+      'before': false,
+      'after': true
+    }],
+    'comma-style': [2, 'last'],
+    'constructor-super': 2,
+    'curly': [2, 'multi-line'],
+    'dot-location': [2, 'property'],
+    'eol-last': 2,
+    'eqeqeq': ["error", "always", {"null": "ignore"}],
+    'generator-star-spacing': [2, {
+      'before': true,
+      'after': true
+    }],
+    'handle-callback-err': [2, '^(err|error)$'],
+    'indent': [2, 2, {
+      'SwitchCase': 1
+    }],
+    'jsx-quotes': [2, 'prefer-single'],
+    'key-spacing': [2, {
+      'beforeColon': false,
+      'afterColon': true
+    }],
+    'keyword-spacing': [2, {
+      'before': true,
+      'after': true
+    }],
+    'new-cap': [2, {
+      'newIsCap': true,
+      'capIsNew': false
+    }],
+    'new-parens': 2,
+    'no-array-constructor': 2,
+    'no-caller': 2,
+    'no-console': 'off',
+    'no-class-assign': 2,
+    'no-cond-assign': 2,
+    'no-const-assign': 2,
+    'no-control-regex': 0,
+    'no-delete-var': 2,
+    'no-dupe-args': 2,
+    'no-dupe-class-members': 2,
+    'no-dupe-keys': 2,
+    'no-duplicate-case': 2,
+    'no-empty-character-class': 2,
+    'no-empty-pattern': 2,
+    'no-eval': 2,
+    'no-ex-assign': 2,
+    'no-extend-native': 2,
+    'no-extra-bind': 2,
+    'no-extra-boolean-cast': 2,
+    'no-extra-parens': [2, 'functions'],
+    'no-fallthrough': 2,
+    'no-floating-decimal': 2,
+    'no-func-assign': 2,
+    'no-implied-eval': 2,
+    'no-inner-declarations': [2, 'functions'],
+    'no-invalid-regexp': 2,
+    'no-irregular-whitespace': 2,
+    'no-iterator': 2,
+    'no-label-var': 2,
+    'no-labels': [2, {
+      'allowLoop': false,
+      'allowSwitch': false
+    }],
+    'no-lone-blocks': 2,
+    'no-mixed-spaces-and-tabs': 2,
+    'no-multi-spaces': 2,
+    'no-multi-str': 2,
+    'no-multiple-empty-lines': [2, {
+      'max': 1
+    }],
+    'no-native-reassign': 2,
+    'no-negated-in-lhs': 2,
+    'no-new-object': 2,
+    'no-new-require': 2,
+    'no-new-symbol': 2,
+    'no-new-wrappers': 2,
+    'no-obj-calls': 2,
+    'no-octal': 2,
+    'no-octal-escape': 2,
+    'no-path-concat': 2,
+    'no-proto': 2,
+    'no-redeclare': 2,
+    'no-regex-spaces': 2,
+    'no-return-assign': [2, 'except-parens'],
+    'no-self-assign': 2,
+    'no-self-compare': 2,
+    'no-sequences': 2,
+    'no-shadow-restricted-names': 2,
+    'no-spaced-func': 2,
+    'no-sparse-arrays': 2,
+    'no-this-before-super': 2,
+    'no-throw-literal': 2,
+    'no-trailing-spaces': 2,
+    'no-undef': 2,
+    'no-undef-init': 2,
+    'no-unexpected-multiline': 2,
+    'no-unmodified-loop-condition': 2,
+    'no-unneeded-ternary': [2, {
+      'defaultAssignment': false
+    }],
+    'no-unreachable': 2,
+    'no-unsafe-finally': 2,
+    'no-unused-vars': [2, {
+      'vars': 'all',
+      'args': 'none'
+    }],
+    'no-useless-call': 2,
+    'no-useless-computed-key': 2,
+    'no-useless-constructor': 2,
+    'no-useless-escape': 0,
+    'no-whitespace-before-property': 2,
+    'no-with': 2,
+    'one-var': [2, {
+      'initialized': 'never'
+    }],
+    'operator-linebreak': [2, 'after', {
+      'overrides': {
+        '?': 'before',
+        ':': 'before'
+      }
+    }],
+    'padded-blocks': [2, 'never'],
+    'quotes': [2, 'single', {
+      'avoidEscape': true,
+      'allowTemplateLiterals': true
+    }],
+    'semi': [2, 'never'],
+    'semi-spacing': [2, {
+      'before': false,
+      'after': true
+    }],
+    'space-before-blocks': [2, 'always'],
+    'space-before-function-paren': [2, 'never'],
+    'space-in-parens': [2, 'never'],
+    'space-infix-ops': 2,
+    'space-unary-ops': [2, {
+      'words': true,
+      'nonwords': false
+    }],
+    'spaced-comment': [2, 'always', {
+      'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
+    }],
+    'template-curly-spacing': [2, 'never'],
+    'use-isnan': 2,
+    'valid-typeof': 2,
+    'wrap-iife': [2, 'any'],
+    'yield-star-spacing': [2, 'both'],
+    'yoda': [2, 'never'],
+    'prefer-const': 2,
+    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
+    'object-curly-spacing': [2, 'always', {
+      objectsInObjects: false
+    }],
+    'array-bracket-spacing': [2, 'never']
+  }
+}
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..9ad28d2
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,16 @@
+.DS_Store
+node_modules/
+dist/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+package-lock.json
+tests/**/coverage/
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
diff --git a/.travis.yml b/.travis.yml
new file mode 100644
index 0000000..f4be7a0
--- /dev/null
+++ b/.travis.yml
@@ -0,0 +1,5 @@
+language: node_js
+node_js: 10
+script: npm run test
+notifications:
+  email: false
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000..6151575
--- /dev/null
+++ b/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.
diff --git a/babel.config.js b/babel.config.js
new file mode 100644
index 0000000..fb82b27
--- /dev/null
+++ b/babel.config.js
@@ -0,0 +1,14 @@
+module.exports = {
+  presets: [
+    // https://github.com/vuejs/vue-cli/tree/master/packages/@vue/babel-preset-app
+    '@vue/cli-plugin-babel/preset'
+  ],
+  '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']
+    }
+  }
+}
diff --git a/build/index.js b/build/index.js
new file mode 100644
index 0000000..0c57de2
--- /dev/null
+++ b/build/index.js
@@ -0,0 +1,35 @@
+const { run } = require('runjs')
+const chalk = require('chalk')
+const config = require('../vue.config.js')
+const rawArgv = process.argv.slice(2)
+const args = rawArgv.join(' ')
+
+if (process.env.npm_config_preview || rawArgv.includes('--preview')) {
+  const report = rawArgv.includes('--report')
+
+  run(`vue-cli-service build ${args}`)
+
+  const port = 9526
+  const publicPath = config.publicPath
+
+  var connect = require('connect')
+  var serveStatic = require('serve-static')
+  const app = connect()
+
+  app.use(
+    publicPath,
+    serveStatic('./dist', {
+      index: ['index.html', '/']
+    })
+  )
+
+  app.listen(port, function () {
+    console.log(chalk.green(`> Preview at  http://localhost:${port}${publicPath}`))
+    if (report) {
+      console.log(chalk.green(`> Report at  http://localhost:${port}${publicPath}report.html`))
+    }
+
+  })
+} else {
+  run(`vue-cli-service build ${args}`)
+}
diff --git a/jest.config.js b/jest.config.js
new file mode 100644
index 0000000..143cdc8
--- /dev/null
+++ b/jest.config.js
@@ -0,0 +1,24 @@
+module.exports = {
+  moduleFileExtensions: ['js', 'jsx', 'json', 'vue'],
+  transform: {
+    '^.+\\.vue$': 'vue-jest',
+    '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$':
+      'jest-transform-stub',
+    '^.+\\.jsx?$': 'babel-jest'
+  },
+  moduleNameMapper: {
+    '^@/(.*)$': '<rootDir>/src/$1'
+  },
+  snapshotSerializers: ['jest-serializer-vue'],
+  testMatch: [
+    '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
+  ],
+  collectCoverageFrom: ['src/utils/**/*.{js,vue}', '!src/utils/auth.js', '!src/utils/request.js', 'src/components/**/*.{js,vue}'],
+  coverageDirectory: '<rootDir>/tests/unit/coverage',
+  // 'collectCoverage': true,
+  'coverageReporters': [
+    'lcov',
+    'text-summary'
+  ],
+  testURL: 'http://localhost/'
+}
diff --git a/jsconfig.json b/jsconfig.json
new file mode 100644
index 0000000..ed079e2
--- /dev/null
+++ b/jsconfig.json
@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "baseUrl": "./",
+    "paths": {
+        "@/*": ["src/*"]
+    }
+  },
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/mock/index.js b/mock/index.js
new file mode 100644
index 0000000..c514c13
--- /dev/null
+++ b/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
+}
+
diff --git a/mock/mock-server.js b/mock/mock-server.js
new file mode 100644
index 0000000..8941ec0
--- /dev/null
+++ b/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))
+      }
+    }
+  })
+}
diff --git a/mock/table.js b/mock/table.js
new file mode 100644
index 0000000..bd0e013
--- /dev/null
+++ b/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
+        }
+      }
+    }
+  }
+]
diff --git a/mock/user.js b/mock/user.js
new file mode 100644
index 0000000..7555338
--- /dev/null
+++ b/mock/user.js
@@ -0,0 +1,84 @@
+
+const tokens = {
+  admin: {
+    token: 'admin-token'
+  },
+  editor: {
+    token: 'editor-token'
+  }
+}
+
+const users = {
+  'admin-token': {
+    roles: ['admin'],
+    introduction: 'I am a super administrator',
+    avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
+    name: 'Super Admin'
+  },
+  'editor-token': {
+    roles: ['editor'],
+    introduction: 'I am an editor',
+    avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
+    name: 'Normal Editor'
+  }
+}
+
+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: 20000,
+        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: 20000,
+        data: info
+      }
+    }
+  },
+
+  // user logout
+  {
+    url: '/vue-admin-template/user/logout',
+    type: 'post',
+    response: _ => {
+      return {
+        code: 20000,
+        data: 'success'
+      }
+    }
+  }
+]
diff --git a/mock/utils.js b/mock/utils.js
new file mode 100644
index 0000000..95cc27d
--- /dev/null
+++ b/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
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..07bc912
--- /dev/null
+++ b/package.json
@@ -0,0 +1,64 @@
+{
+  "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": {
+    "amfe-flexible": "^2.2.1",
+    "axios": "0.18.1",
+    "core-js": "3.6.5",
+    "element-ui": "2.13.2",
+    "js-cookie": "2.2.0",
+    "normalize.css": "7.0.0",
+    "nprogress": "0.2.0",
+    "path-to-regexp": "2.4.0",
+    "postcss-pxtorem": "^5.1.1",
+    "vue": "2.6.10",
+    "vue-router": "3.0.6",
+    "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"
+}
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 0000000..2926a37
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,13 @@
+// https://github.com/michael-ciniawsky/postcss-load-config
+
+module.exports = {
+  'plugins': {
+    // to edit target browsers: use "browserslist" field in package.json
+    'autoprefixer': {},
+    'postcss-pxtorem': {
+      rootValue: 192, // 鏍规嵁璁捐鍥惧昂瀵稿啓锛岃璁″浘鏄�1920锛屽氨鍐�192
+      propList: ['*'] // 闇�瑕佽杞崲鐨勫睘鎬�
+      // selectorBlackList: ['el'] // 涓嶈繘琛宲x杞崲鐨勯�夋嫨鍣紝涓嶈浆鎹lement鐨勬爣绛炬牱寮忥紝鏍规嵁鑷繁椤圭洰闇�姹傛潵瀹氫箟
+    }
+  }
+}
diff --git a/public/favicon.ico b/public/favicon.ico
new file mode 100644
index 0000000..34b63ac
--- /dev/null
+++ b/public/favicon.ico
Binary files differ
diff --git a/public/index.html b/public/index.html
new file mode 100644
index 0000000..fa2be91
--- /dev/null
+++ b/public/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= webpackConfig.name %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= webpackConfig.name %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
diff --git a/src/App.vue b/src/App.vue
new file mode 100644
index 0000000..ec9032c
--- /dev/null
+++ b/src/App.vue
@@ -0,0 +1,11 @@
+<template>
+  <div id="app">
+    <router-view />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'App'
+}
+</script>
diff --git a/src/api/standardLibrary.js b/src/api/standardLibrary.js
new file mode 100644
index 0000000..0072507
--- /dev/null
+++ b/src/api/standardLibrary.js
@@ -0,0 +1,17 @@
+import request from '@/utils/request'
+
+// 鏌ヨ鎵�鏈夋爣鍑嗘暟鎹�
+export function getStandardsList() {
+  return request({
+    url: '/standards/list',
+    method: 'get'
+  })
+}
+
+// 娣诲姞鏍囧噯
+export function addStandards() {
+  return request({
+    url: '/standards/add',
+    method: 'get'
+  })
+}
diff --git a/src/api/table.js b/src/api/table.js
new file mode 100644
index 0000000..2752f52
--- /dev/null
+++ b/src/api/table.js
@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+export function getList(params) {
+  return request({
+    url: '/vue-admin-template/table/list',
+    method: 'get',
+    params
+  })
+}
diff --git a/src/api/user.js b/src/api/user.js
new file mode 100644
index 0000000..915b99d
--- /dev/null
+++ b/src/api/user.js
@@ -0,0 +1,53 @@
+import request from '@/utils/request'
+
+// 鐧诲綍
+export function login(data) {
+  return request({
+    url: '/user/login',
+    method: 'post',
+    params: {
+      account: data.username,
+      password: data.password
+    }
+  })
+}
+
+// 鑾峰彇鐢ㄦ埛淇℃伅
+export function getInfo() {
+  return request({
+    url: '/user/info',
+    method: 'get'
+  })
+}
+
+// 閫�鍑虹櫥褰�
+export function logout() {
+  return request({
+    url: '/vue-admin-template/user/logout',
+    method: 'post'
+  })
+}
+
+// 鍒嗛〉鏌ヨ鐢ㄦ埛鍒楄〃
+export function getUserList() {
+  return request({
+    url: '/user/list_new_personnel',
+    method: 'get'
+  })
+}
+
+// 鏂板鐢ㄦ埛
+export function addUser() {
+  return request({
+    url: '/user/add_new_personnel',
+    method: 'post'
+  })
+}
+
+// 淇敼鐢ㄦ埛淇℃伅
+export function putUserInfo() {
+  return request({
+    url: '/user/update_new_personnel',
+    method: 'put'
+  })
+}
diff --git a/src/assets/404_images/404.png b/src/assets/404_images/404.png
new file mode 100644
index 0000000..3d8e230
--- /dev/null
+++ b/src/assets/404_images/404.png
Binary files differ
diff --git a/src/assets/404_images/404_cloud.png b/src/assets/404_images/404_cloud.png
new file mode 100644
index 0000000..c6281d0
--- /dev/null
+++ b/src/assets/404_images/404_cloud.png
Binary files differ
diff --git a/src/assets/404_images/backgroud.png b/src/assets/404_images/backgroud.png
new file mode 100644
index 0000000..8584d9e
--- /dev/null
+++ b/src/assets/404_images/backgroud.png
Binary files differ
diff --git a/src/assets/404_images/logo.png b/src/assets/404_images/logo.png
new file mode 100644
index 0000000..2ddc0eb
--- /dev/null
+++ b/src/assets/404_images/logo.png
Binary files differ
diff --git a/src/components/Breadcrumb/index.vue b/src/components/Breadcrumb/index.vue
new file mode 100644
index 0000000..f6aaf66
--- /dev/null
+++ b/src/components/Breadcrumb/index.vue
@@ -0,0 +1,80 @@
+<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: 'Dashboard' }}].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: block;
+  font-size: 14px;
+  padding: 12px 24px;
+  height: 38px;
+  width: 100%;
+  background: #fff;
+  // margin-left: px;
+  .no-redirect {
+    color: #97a8be;
+    cursor: text;
+  }
+}
+</style>
diff --git a/src/components/Hamburger/index.vue b/src/components/Hamburger/index.vue
new file mode 100644
index 0000000..368b002
--- /dev/null
+++ b/src/components/Hamburger/index.vue
@@ -0,0 +1,44 @@
+<template>
+  <div style="padding: 0 15px;" @click="toggleClick">
+    <svg
+      :class="{'is-active':isActive}"
+      class="hamburger"
+      viewBox="0 0 1024 1024"
+      xmlns="http://www.w3.org/2000/svg"
+      width="64"
+      height="64"
+    >
+      <path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />
+    </svg>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Hamburger',
+  props: {
+    isActive: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    toggleClick() {
+      this.$emit('toggleClick')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.hamburger {
+  display: inline-block;
+  vertical-align: middle;
+  width: 20px;
+  height: 20px;
+}
+
+.hamburger.is-active {
+  transform: rotate(180deg);
+}
+</style>
diff --git a/src/components/SvgIcon/index.vue b/src/components/SvgIcon/index.vue
new file mode 100644
index 0000000..b07ded2
--- /dev/null
+++ b/src/components/SvgIcon/index.vue
@@ -0,0 +1,62 @@
+<template>
+  <div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" />
+  <svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
+    <use :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>
diff --git a/src/icons/index.js b/src/icons/index.js
new file mode 100644
index 0000000..2c6b309
--- /dev/null
+++ b/src/icons/index.js
@@ -0,0 +1,9 @@
+import Vue from 'vue'
+import SvgIcon from '@/components/SvgIcon'// svg component
+
+// register globally
+Vue.component('svg-icon', SvgIcon)
+
+const req = require.context('./svg', false, /\.svg$/)
+const requireAll = requireContext => requireContext.keys().map(requireContext)
+requireAll(req)
diff --git a/src/icons/svg/dashboard.svg b/src/icons/svg/dashboard.svg
new file mode 100644
index 0000000..5317d37
--- /dev/null
+++ b/src/icons/svg/dashboard.svg
@@ -0,0 +1 @@
+<svg width="128" height="100" xmlns="http://www.w3.org/2000/svg"><path d="M27.429 63.638c0-2.508-.893-4.65-2.679-6.424-1.786-1.775-3.94-2.662-6.464-2.662-2.524 0-4.679.887-6.465 2.662-1.785 1.774-2.678 3.916-2.678 6.424 0 2.508.893 4.65 2.678 6.424 1.786 1.775 3.94 2.662 6.465 2.662 2.524 0 4.678-.887 6.464-2.662 1.786-1.775 2.679-3.916 2.679-6.424zm13.714-31.801c0-2.508-.893-4.65-2.679-6.424-1.785-1.775-3.94-2.662-6.464-2.662-2.524 0-4.679.887-6.464 2.662-1.786 1.774-2.679 3.916-2.679 6.424 0 2.508.893 4.65 2.679 6.424 1.785 1.774 3.94 2.662 6.464 2.662 2.524 0 4.679-.888 6.464-2.662 1.786-1.775 2.679-3.916 2.679-6.424zM71.714 65.98l7.215-27.116c.285-1.23.107-2.378-.536-3.443-.643-1.064-1.56-1.762-2.75-2.094-1.19-.33-2.333-.177-3.429.462-1.095.639-1.81 1.573-2.143 2.804l-7.214 27.116c-2.857.237-5.405 1.266-7.643 3.088-2.238 1.822-3.738 4.152-4.5 6.992-.952 3.644-.476 7.098 1.429 10.364 1.905 3.265 4.69 5.37 8.357 6.317 3.667.947 7.143.474 10.429-1.42 3.285-1.892 5.404-4.66 6.357-8.305.762-2.84.619-5.607-.429-8.305-1.047-2.697-2.762-4.85-5.143-6.46zm47.143-2.342c0-2.508-.893-4.65-2.678-6.424-1.786-1.775-3.94-2.662-6.465-2.662-2.524 0-4.678.887-6.464 2.662-1.786 1.774-2.679 3.916-2.679 6.424 0 2.508.893 4.65 2.679 6.424 1.786 1.775 3.94 2.662 6.464 2.662 2.524 0 4.679-.887 6.465-2.662 1.785-1.775 2.678-3.916 2.678-6.424zm-45.714-45.43c0-2.509-.893-4.65-2.679-6.425C68.68 10.01 66.524 9.122 64 9.122c-2.524 0-4.679.887-6.464 2.661-1.786 1.775-2.679 3.916-2.679 6.425 0 2.508.893 4.65 2.679 6.424 1.785 1.774 3.94 2.662 6.464 2.662 2.524 0 4.679-.888 6.464-2.662 1.786-1.775 2.679-3.916 2.679-6.424zm32 13.629c0-2.508-.893-4.65-2.679-6.424-1.785-1.775-3.94-2.662-6.464-2.662-2.524 0-4.679.887-6.464 2.662-1.786 1.774-2.679 3.916-2.679 6.424 0 2.508.893 4.65 2.679 6.424 1.785 1.774 3.94 2.662 6.464 2.662 2.524 0 4.679-.888 6.464-2.662 1.786-1.775 2.679-3.916 2.679-6.424zM128 63.638c0 12.351-3.357 23.78-10.071 34.286-.905 1.372-2.19 2.058-3.858 2.058H13.93c-1.667 0-2.953-.686-3.858-2.058C3.357 87.465 0 76.037 0 63.638c0-8.613 1.69-16.847 5.071-24.703C8.452 31.08 13 24.312 18.714 18.634c5.715-5.68 12.524-10.199 20.429-13.559C47.048 1.715 55.333.035 64 .035c8.667 0 16.952 1.68 24.857 5.04 7.905 3.36 14.714 7.88 20.429 13.559 5.714 5.678 10.262 12.446 13.643 20.301 3.38 7.856 5.071 16.09 5.071 24.703z"/></svg>
\ No newline at end of file
diff --git a/src/icons/svg/example.svg b/src/icons/svg/example.svg
new file mode 100644
index 0000000..46f42b5
--- /dev/null
+++ b/src/icons/svg/example.svg
@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M96.258 57.462h31.421C124.794 27.323 100.426 2.956 70.287.07v31.422a32.856 32.856 0 0 1 25.971 25.97zm-38.796-25.97V.07C27.323 2.956 2.956 27.323.07 57.462h31.422a32.856 32.856 0 0 1 25.97-25.97zm12.825 64.766v31.421c30.46-2.885 54.507-27.253 57.713-57.712H96.579c-2.886 13.466-13.146 23.726-26.292 26.291zM31.492 70.287H.07c2.886 30.46 27.253 54.507 57.713 57.713V96.579c-13.466-2.886-23.726-13.146-26.291-26.292z"/></svg>
\ No newline at end of file
diff --git a/src/icons/svg/eye-open.svg b/src/icons/svg/eye-open.svg
new file mode 100644
index 0000000..88dcc98
--- /dev/null
+++ b/src/icons/svg/eye-open.svg
@@ -0,0 +1 @@
+<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="128" height="128"><defs><style/></defs><path d="M512 128q69.675 0 135.51 21.163t115.498 54.997 93.483 74.837 73.685 82.006 51.67 74.837 32.17 54.827L1024 512q-2.347 4.992-6.315 13.483T998.87 560.17t-31.658 51.669-44.331 59.99-56.832 64.34-69.504 60.16-82.347 51.5-94.848 34.687T512 896q-69.675 0-135.51-21.163t-115.498-54.826-93.483-74.326-73.685-81.493-51.67-74.496-32.17-54.997L0 513.707q2.347-4.992 6.315-13.483t18.816-34.816 31.658-51.84 44.331-60.33 56.832-64.683 69.504-60.331 82.347-51.84 94.848-34.816T512 128.085zm0 85.333q-46.677 0-91.648 12.331t-81.152 31.83-70.656 47.146-59.648 54.485-48.853 57.686-37.675 52.821-26.325 43.99q12.33 21.674 26.325 43.52t37.675 52.351 48.853 57.003 59.648 53.845T339.2 767.02t81.152 31.488T512 810.667t91.648-12.331 81.152-31.659 70.656-46.848 59.648-54.186 48.853-57.344 37.675-52.651T927.957 512q-12.33-21.675-26.325-43.648t-37.675-52.65-48.853-57.345-59.648-54.186-70.656-46.848-81.152-31.659T512 213.334zm0 128q70.656 0 120.661 50.006T682.667 512 632.66 632.661 512 682.667 391.339 632.66 341.333 512t50.006-120.661T512 341.333zm0 85.334q-35.328 0-60.33 25.002T426.666 512t25.002 60.33T512 597.334t60.33-25.002T597.334 512t-25.002-60.33T512 426.666z"/></svg>
\ No newline at end of file
diff --git a/src/icons/svg/eye.svg b/src/icons/svg/eye.svg
new file mode 100644
index 0000000..16ed2d8
--- /dev/null
+++ b/src/icons/svg/eye.svg
@@ -0,0 +1 @@
+<svg width="128" height="64" xmlns="http://www.w3.org/2000/svg"><path d="M127.072 7.994c1.37-2.208.914-5.152-.914-6.87-2.056-1.717-4.797-1.226-6.396.982-.229.245-25.586 32.382-55.74 32.382-29.24 0-55.74-32.382-55.968-32.627-1.6-1.963-4.57-2.208-6.397-.49C-.17 3.086-.399 6.275 1.2 8.238c.457.736 5.94 7.36 14.62 14.72L4.17 35.96c-1.828 1.963-1.6 5.152.228 6.87.457.98 1.6 1.471 2.742 1.471s2.284-.49 3.198-1.472l12.564-13.983c5.94 4.416 13.021 8.587 20.788 11.53l-4.797 17.418c-.685 2.699.686 5.397 3.198 6.133h1.37c2.057 0 3.884-1.472 4.341-3.68L52.6 42.83c3.655.736 7.538 1.227 11.422 1.227 3.883 0 7.767-.49 11.422-1.227l4.797 17.173c.457 2.208 2.513 3.68 4.34 3.68.457 0 .914 0 1.143-.246 2.513-.736 3.883-3.434 3.198-6.133l-4.797-17.172c7.767-2.944 14.848-7.114 20.788-11.53l12.336 13.738c.913.981 2.056 1.472 3.198 1.472s2.284-.49 3.198-1.472c1.828-1.963 1.828-4.906.228-6.87l-11.65-13.001c9.366-7.36 14.849-14.474 14.849-14.474z"/></svg>
\ No newline at end of file
diff --git a/src/icons/svg/form.svg b/src/icons/svg/form.svg
new file mode 100644
index 0000000..dcbaa18
--- /dev/null
+++ b/src/icons/svg/form.svg
@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M84.068 23.784c-1.02 0-1.877-.32-2.572-.96a8.588 8.588 0 0 1-1.738-2.237 11.524 11.524 0 0 1-1.042-2.621c-.232-.895-.348-1.641-.348-2.238V0h.278c.834 0 1.622.085 2.363.256.742.17 1.645.575 2.711 1.214 1.066.64 2.363 1.535 3.892 2.686 1.53 1.15 3.453 2.664 5.77 4.54 2.502 2.045 4.494 3.771 5.977 5.178 1.483 1.406 2.618 2.6 3.406 3.58.787.98 1.274 1.812 1.46 2.494.185.682.277 1.278.277 1.79v2.046H84.068zM127.3 84.01c.278.682.464 1.535.556 2.558.093 1.023-.37 2.003-1.39 2.94-.463.427-.88.832-1.25 1.215-.372.384-.696.704-.974.96a6.69 6.69 0 0 1-.973.767l-11.816-10.741a44.331 44.331 0 0 0 1.877-1.535 31.028 31.028 0 0 1 1.737-1.406c1.112-.938 2.317-1.343 3.615-1.215 1.297.128 2.363.405 3.197.83.927.427 1.923 1.173 2.989 2.239 1.065 1.065 1.876 2.195 2.432 3.388zM78.23 95.902c2.038 0 3.752-.511 5.143-1.534l-26.969 25.83H18.037c-1.761 0-3.684-.47-5.77-1.407a24.549 24.549 0 0 1-5.838-3.709 21.373 21.373 0 0 1-4.518-5.306c-1.204-2.003-1.807-4.07-1.807-6.202V16.495c0-1.79.44-3.665 1.32-5.626A18.41 18.41 0 0 1 5.04 5.562a21.798 21.798 0 0 1 5.213-3.964C12.198.533 14.237 0 16.37 0h53.24v15.984c0 1.62.278 3.367.834 5.242a16.704 16.704 0 0 0 2.572 5.179c1.159 1.577 2.665 2.898 4.518 3.964 1.853 1.066 4.078 1.598 6.673 1.598h20.295v42.325L85.458 92.45c1.02-1.364 1.529-2.856 1.529-4.476 0-2.216-.857-4.113-2.572-5.69-1.714-1.577-3.776-2.366-6.186-2.366H26.1c-2.409 0-4.448.789-6.116 2.366-1.668 1.577-2.502 3.474-2.502 5.69 0 2.217.834 4.092 2.502 5.626 1.668 1.535 3.707 2.302 6.117 2.302h52.13zM26.1 47.951c-2.41 0-4.449.789-6.117 2.366-1.668 1.577-2.502 3.473-2.502 5.69 0 2.216.834 4.092 2.502 5.626 1.668 1.534 3.707 2.302 6.117 2.302h52.13c2.409 0 4.47-.768 6.185-2.302 1.715-1.534 2.572-3.41 2.572-5.626 0-2.217-.857-4.113-2.572-5.69-1.714-1.577-3.776-2.366-6.186-2.366H26.1zm52.407 64.063l1.807-1.663 3.476-3.196a479.75 479.75 0 0 0 4.587-4.284 500.757 500.757 0 0 1 5.004-4.667c3.985-3.666 8.48-7.758 13.485-12.276l11.677 10.741-13.485 12.404-5.004 4.603-4.587 4.22a179.46 179.46 0 0 0-3.267 3.068c-.88.853-1.367 1.322-1.46 1.407-.463.341-.973.703-1.529 1.087-.556.383-1.112.703-1.668.959-.556.256-1.413.575-2.572.959a83.5 83.5 0 0 1-3.545 1.087 72.2 72.2 0 0 1-3.475.895c-1.112.256-1.946.426-2.502.511-1.112.17-1.854.043-2.224-.383-.371-.426-.464-1.151-.278-2.174.092-.511.278-1.279.556-2.302.278-1.023.602-2.067.973-3.132l1.042-3.005c.325-.938.58-1.577.765-1.918a10.157 10.157 0 0 1 2.224-2.941z"/></svg>
\ No newline at end of file
diff --git a/src/icons/svg/link.svg b/src/icons/svg/link.svg
new file mode 100644
index 0000000..48197ba
--- /dev/null
+++ b/src/icons/svg/link.svg
@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M115.625 127.937H.063V12.375h57.781v12.374H12.438v90.813h90.813V70.156h12.374z"/><path d="M116.426 2.821l8.753 8.753-56.734 56.734-8.753-8.745z"/><path d="M127.893 37.982h-12.375V12.375H88.706V0h39.187z"/></svg>
\ No newline at end of file
diff --git a/src/icons/svg/nested.svg b/src/icons/svg/nested.svg
new file mode 100644
index 0000000..06713a8
--- /dev/null
+++ b/src/icons/svg/nested.svg
@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M.002 9.2c0 5.044 3.58 9.133 7.998 9.133 4.417 0 7.997-4.089 7.997-9.133 0-5.043-3.58-9.132-7.997-9.132S.002 4.157.002 9.2zM31.997.066h95.981V18.33H31.997V.066zm0 45.669c0 5.044 3.58 9.132 7.998 9.132 4.417 0 7.997-4.088 7.997-9.132 0-3.263-1.524-6.278-3.998-7.91-2.475-1.63-5.524-1.63-7.998 0-2.475 1.632-4 4.647-4 7.91zM63.992 36.6h63.986v18.265H63.992V36.6zm-31.995 82.2c0 5.043 3.58 9.132 7.998 9.132 4.417 0 7.997-4.089 7.997-9.132 0-5.044-3.58-9.133-7.997-9.133s-7.998 4.089-7.998 9.133zm31.995-9.131h63.986v18.265H63.992V109.67zm0-27.404c0 5.044 3.58 9.133 7.998 9.133 4.417 0 7.997-4.089 7.997-9.133 0-3.263-1.524-6.277-3.998-7.909-2.475-1.631-5.524-1.631-7.998 0-2.475 1.632-4 4.646-4 7.91zm31.995-9.13h31.991V91.4H95.987V73.135z"/></svg>
\ No newline at end of file
diff --git a/src/icons/svg/password.svg b/src/icons/svg/password.svg
new file mode 100644
index 0000000..e291d85
--- /dev/null
+++ b/src/icons/svg/password.svg
@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M108.8 44.322H89.6v-5.36c0-9.04-3.308-24.163-25.6-24.163-23.145 0-25.6 16.881-25.6 24.162v5.361H19.2v-5.36C19.2 15.281 36.798 0 64 0c27.202 0 44.8 15.281 44.8 38.961v5.361zm-32 39.356c0-5.44-5.763-9.832-12.8-9.832-7.037 0-12.8 4.392-12.8 9.832 0 3.682 2.567 6.808 6.407 8.477v11.205c0 2.718 2.875 4.962 6.4 4.962 3.524 0 6.4-2.244 6.4-4.962V92.155c3.833-1.669 6.393-4.795 6.393-8.477zM128 64v49.201c0 8.158-8.645 14.799-19.2 14.799H19.2C8.651 128 0 121.359 0 113.201V64c0-8.153 8.645-14.799 19.2-14.799h89.6c10.555 0 19.2 6.646 19.2 14.799z"/></svg>
\ No newline at end of file
diff --git a/src/icons/svg/table.svg b/src/icons/svg/table.svg
new file mode 100644
index 0000000..0e3dc9d
--- /dev/null
+++ b/src/icons/svg/table.svg
@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M.006.064h127.988v31.104H.006V.064zm0 38.016h38.396v41.472H.006V38.08zm0 48.384h38.396v41.472H.006V86.464zM44.802 38.08h38.396v41.472H44.802V38.08zm0 48.384h38.396v41.472H44.802V86.464zM89.598 38.08h38.396v41.472H89.598zm0 48.384h38.396v41.472H89.598z"/><path d="M.006.064h127.988v31.104H.006V.064zm0 38.016h38.396v41.472H.006V38.08zm0 48.384h38.396v41.472H.006V86.464zM44.802 38.08h38.396v41.472H44.802V38.08zm0 48.384h38.396v41.472H44.802V86.464zM89.598 38.08h38.396v41.472H89.598zm0 48.384h38.396v41.472H89.598z"/></svg>
\ No newline at end of file
diff --git a/src/icons/svg/tree.svg b/src/icons/svg/tree.svg
new file mode 100644
index 0000000..dd4b7dd
--- /dev/null
+++ b/src/icons/svg/tree.svg
@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M126.713 90.023c.858.985 1.287 2.134 1.287 3.447v29.553c0 1.423-.429 2.6-1.287 3.53-.858.93-1.907 1.395-3.146 1.395H97.824c-1.145 0-2.146-.465-3.004-1.395-.858-.93-1.287-2.107-1.287-3.53V93.47c0-.875.19-1.696.572-2.462.382-.766.906-1.368 1.573-1.806a3.84 3.84 0 0 1 2.146-.657h9.725V69.007a3.84 3.84 0 0 0-.43-1.806 3.569 3.569 0 0 0-1.143-1.313 2.714 2.714 0 0 0-1.573-.492h-36.47v23.149h9.725c1.144 0 2.145.492 3.004 1.478.858.985 1.287 2.134 1.287 3.447v29.553c0 .876-.191 1.696-.573 2.463-.38.766-.905 1.368-1.573 1.806a3.84 3.84 0 0 1-2.145.656H51.915a3.84 3.84 0 0 1-2.145-.656c-.668-.438-1.216-1.04-1.645-1.806a4.96 4.96 0 0 1-.644-2.463V93.47c0-1.313.43-2.462 1.288-3.447.858-.986 1.907-1.478 3.146-1.478h9.582v-23.15h-37.9c-.953 0-1.74.356-2.359 1.068-.62.711-.93 1.56-.93 2.544v19.538h9.726c1.239 0 2.264.492 3.074 1.478.81.985 1.216 2.134 1.216 3.447v29.553c0 1.423-.405 2.6-1.216 3.53-.81.93-1.835 1.395-3.074 1.395H4.29c-.476 0-.93-.082-1.358-.246a4.1 4.1 0 0 1-1.144-.657 4.658 4.658 0 0 1-.93-1.067 5.186 5.186 0 0 1-.643-1.395 5.566 5.566 0 0 1-.215-1.56V93.47c0-.437.048-.875.143-1.313a3.95 3.95 0 0 1 .429-1.15c.19-.328.429-.656.715-.984.286-.329.572-.602.858-.821.286-.22.62-.383 1.001-.493.382-.11.763-.164 1.144-.164h9.726V61.619c0-.985.31-1.833.93-2.544.619-.712 1.358-1.068 2.216-1.068h44.335V39.62h-9.582c-1.24 0-2.288-.492-3.146-1.477a5.09 5.09 0 0 1-1.287-3.448V5.14c0-1.423.429-2.627 1.287-3.612.858-.985 1.907-1.477 3.146-1.477h25.743c.763 0 1.478.246 2.145.739a5.17 5.17 0 0 1 1.573 1.888c.382.766.573 1.587.573 2.462v29.553c0 1.313-.43 2.463-1.287 3.448-.859.985-1.86 1.477-3.004 1.477h-9.725v18.389h42.762c.954 0 1.74.355 2.36 1.067.62.711.93 1.56.93 2.545v26.925h9.582c1.239 0 2.288.492 3.146 1.478z"/></svg>
\ No newline at end of file
diff --git a/src/icons/svg/user.svg b/src/icons/svg/user.svg
new file mode 100644
index 0000000..0ba0716
--- /dev/null
+++ b/src/icons/svg/user.svg
@@ -0,0 +1 @@
+<svg width="130" height="130" xmlns="http://www.w3.org/2000/svg"><path d="M63.444 64.996c20.633 0 37.359-14.308 37.359-31.953 0-17.649-16.726-31.952-37.359-31.952-20.631 0-37.36 14.303-37.358 31.952 0 17.645 16.727 31.953 37.359 31.953zM80.57 75.65H49.434c-26.652 0-48.26 18.477-48.26 41.27v2.664c0 9.316 21.608 9.325 48.26 9.325H80.57c26.649 0 48.256-.344 48.256-9.325v-2.663c0-22.794-21.605-41.271-48.256-41.271z" stroke="#979797"/></svg>
\ No newline at end of file
diff --git a/src/icons/svgo.yml b/src/icons/svgo.yml
new file mode 100644
index 0000000..d11906a
--- /dev/null
+++ b/src/icons/svgo.yml
@@ -0,0 +1,22 @@
+# replace default config
+
+# multipass: true
+# full: true
+
+plugins:
+
+  # - name
+  #
+  # or:
+  # - name: false
+  # - name: true
+  #
+  # or:
+  # - name:
+  #     param1: 1
+  #     param2: 2
+
+- removeAttrs:
+    attrs:
+      - 'fill'
+      - 'fill-rule'
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
new file mode 100644
index 0000000..c21454f
--- /dev/null
+++ b/src/layout/components/AppMain.vue
@@ -0,0 +1,48 @@
+<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 lang="scss" scoped>
+.app-main {
+  /*88 = navbar+baredcrumb  */
+  min-height: calc(100vh - 88px);
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+  >div{
+    min-height: calc(100vh - 88px);
+    height: 100%;
+    width: 100%;
+  }
+  ::v-deep .content-main{//杩欐槸鎵�鏈夐〉闈㈢殑鍐呰竟璺�
+    padding: 24px !important;
+  }
+}
+.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>
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
new file mode 100644
index 0000000..f7aab9a
--- /dev/null
+++ b/src/layout/components/Navbar.vue
@@ -0,0 +1,158 @@
+<template>
+  <div class="navbar">
+    <hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
+
+    <!-- <breadcrumb class="breadcrumb-container" /> -->
+
+    <div class="right-menu">
+      <div class="right-serves">
+        <i class="el-icon-setting" />
+        <i class="el-icon-bell" />
+        <i class="el-icon-time" />
+      </div>
+      <el-dropdown class="avatar-container" trigger="click">
+        <div class="avatar-wrapper">
+          <!-- <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar"> -->
+          <a class="user-avatar">{{'涓ぉ'.slice(0,1)}}</a>
+        </div>
+        <el-dropdown-menu slot="dropdown" class="user-dropdown">
+          <router-link to="/">
+            <el-dropdown-item>
+              淇敼瀵嗙爜
+            </el-dropdown-item>
+          </router-link>
+          <el-dropdown-item divided @click.native="logout">
+            <span style="display:block;">閫�鍑虹櫥褰�</span>
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+// import Breadcrumb from '@/components/Breadcrumb'
+import Hamburger from '@/components/Hamburger'
+
+export default {
+  components: {
+    // Breadcrumb,
+    Hamburger
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar',
+      'avatar'
+    ])
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('app/toggleSideBar')
+    },
+    async logout() {
+      // await this.$store.dispatch('user/logout')
+      this.$router.push(`/login?redirect=${this.$route.fullPath}`)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.navbar {
+  height: 50px;
+  overflow: hidden;
+  position: relative;
+  background: #fff;
+  display: flex;
+  // box-shadow: 0 1px 4px rgba(0,21,41,.08);
+
+  .hamburger-container {
+    line-height: 46px;
+    height: 100%;
+    cursor: pointer;
+    transition: background .3s;
+    -webkit-tap-highlight-color:transparent;
+
+    &:hover {
+      background: rgba(0, 0, 0, .025)
+    }
+  }
+
+  .breadcrumb-container {
+    float: left;
+  }
+
+  .right-menu {
+    flex: 1;
+    height: 100%;
+    line-height: 50px;
+    display: flex;
+    justify-content: right;
+    .right-serves{
+      height: 100%;
+      display: flex;
+      align-items: center;
+      >i{
+        display: inline-block;
+        margin: auto 10px;
+        font-size: 20px;
+        line-height: 100%;
+      }
+    }
+
+    &: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 .3s;
+
+        &:hover {
+          background: rgba(0, 0, 0, .025)
+        }
+      }
+    }
+
+    .avatar-container {
+      margin-right: 30px;
+      height: 100%;
+      .avatar-wrapper {
+        // margin-top: 5px;
+        height: 100%;
+        position: relative;
+        display: flex;
+        align-items: center;
+        .user-avatar {
+          cursor: pointer;
+          width: 40px;
+          height: 40px;
+          border-radius: 50%;
+          margin-right: 12px;
+          background: #0077DB;
+          line-height: 40px;
+          text-align: center;
+          color: #fff;
+        }
+
+        .el-icon-caret-bottom {
+          cursor: pointer;
+          position: absolute;
+          right: -20px;
+          top: 25px;
+          font-size: 12px;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/layout/components/Sidebar/FixiOSBug.js b/src/layout/components/Sidebar/FixiOSBug.js
new file mode 100644
index 0000000..bc14856
--- /dev/null
+++ b/src/layout/components/Sidebar/FixiOSBug.js
@@ -0,0 +1,26 @@
+export default {
+  computed: {
+    device() {
+      return this.$store.state.app.device
+    }
+  },
+  mounted() {
+    // In order to fix the click on menu on the ios device will trigger the mouseleave bug
+    // https://github.com/PanJiaChen/vue-element-admin/issues/1135
+    this.fixBugIniOS()
+  },
+  methods: {
+    fixBugIniOS() {
+      const $subMenu = this.$refs.subMenu
+      if ($subMenu) {
+        const handleMouseleave = $subMenu.handleMouseleave
+        $subMenu.handleMouseleave = (e) => {
+          if (this.device === 'mobile') {
+            return
+          }
+          handleMouseleave(e)
+        }
+      }
+    }
+  }
+}
diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue
new file mode 100644
index 0000000..aa1f5da
--- /dev/null
+++ b/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>
diff --git a/src/layout/components/Sidebar/Link.vue b/src/layout/components/Sidebar/Link.vue
new file mode 100644
index 0000000..530b3d5
--- /dev/null
+++ b/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>
diff --git a/src/layout/components/Sidebar/Logo.vue b/src/layout/components/Sidebar/Logo.vue
new file mode 100644
index 0000000..000afd6
--- /dev/null
+++ b/src/layout/components/Sidebar/Logo.vue
@@ -0,0 +1,88 @@
+<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="@/assets/404_images/logo.png" 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="@/assets/404_images/logo.png" class="sidebar-logo">
+        <!-- <h1 class="sidebar-title">{{ title }} </h1> -->
+      </router-link>
+    </transition>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SidebarLogo',
+  props: {
+    collapse: {
+      type: Boolean,
+      required: true
+    }
+  },
+  data() {
+    return {
+      title: 'Vue Admin Template',
+      logo: 'https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef5251.png'
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.sidebarLogoFade-enter-active {
+  transition: opacity 1.5s;
+}
+
+.sidebarLogoFade-enter,
+.sidebarLogoFade-leave-to {
+  opacity: 0;
+}
+
+.sidebar-logo-container {
+  position: relative;
+  width: 100%;
+  height: 50px;
+  line-height: 50px;
+  background: #fff;
+  text-align: center;
+  overflow: hidden;
+
+  & .sidebar-logo-link {
+    height: 100%;
+    width: 100%;
+    padding: 0px 20px;
+    box-sizing: border-box;
+    text-align: left;
+    & .sidebar-logo {
+      // width: 32px;
+      // height: 32px;
+      // width: 60%;
+      // height: 70%;
+      width: 80%;
+      height: 80%;
+      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>
diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue
new file mode 100644
index 0000000..a418c3d
--- /dev/null
+++ b/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>
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
new file mode 100644
index 0000000..1187cbb
--- /dev/null
+++ b/src/layout/components/Sidebar/index.vue
@@ -0,0 +1,56 @@
+<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="true"
+        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'
+
+export default {
+  components: { SidebarItem, Logo },
+  computed: {
+    ...mapGetters([
+      'sidebar'
+    ]),
+    routes() {
+      return this.$router.options.routes
+    },
+    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>
diff --git a/src/layout/components/index.js b/src/layout/components/index.js
new file mode 100644
index 0000000..97ee3cd
--- /dev/null
+++ b/src/layout/components/index.js
@@ -0,0 +1,3 @@
+export { default as Navbar } from './Navbar'
+export { default as Sidebar } from './Sidebar'
+export { default as AppMain } from './AppMain'
diff --git a/src/layout/index.vue b/src/layout/index.vue
new file mode 100644
index 0000000..7f7d261
--- /dev/null
+++ b/src/layout/index.vue
@@ -0,0 +1,107 @@
+<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>
+      <div class="clearFixed" />
+      <!-- 娓呴櫎瀹氫綅鐨勫奖鍝� -->
+      <Breadcrumb class="breadcrumb-container" />
+      <app-main />
+    </div>
+  </div>
+</template>
+
+<script>
+import { Navbar, Sidebar, AppMain } from './components'
+import ResizeMixin from './mixin/ResizeHandler'
+import Breadcrumb from '@/components/Breadcrumb'
+
+export default {
+  name: 'Layout',
+  components: {
+    Navbar,
+    Sidebar,
+    AppMain,
+    Breadcrumb
+  },
+  mixins: [ResizeMixin],
+  computed: {
+    sidebar() {
+      return this.$store.state.app.sidebar
+    },
+    device() {
+      return this.$store.state.app.device
+    },
+    fixedHeader() {
+      return this.$store.state.settings.fixedHeader
+    },
+    classObj() {
+      return {
+        hideSidebar: !this.sidebar.opened,
+        openSidebar: this.sidebar.opened,
+        withoutAnimation: this.sidebar.withoutAnimation,
+        mobile: this.device === 'mobile'
+      }
+    }
+  },
+  methods: {
+    handleClickOutside() {
+      this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  @import "~@/styles/mixin.scss";
+  @import "~@/styles/variables.scss";
+
+  .app-wrapper {
+    @include clearfix;
+    position: relative;
+    height: 100%;
+    width: 100%;
+    &.mobile.openSidebar{
+      position: fixed;
+      top: 0;
+    }
+    .sidebar-container{
+      box-shadow: 0 0 0.857143rem rgba(0,0,0,.12);
+    }
+    .main-container{
+      background:  #f0f2f5;
+      .clearFixed{
+        height: 50px;
+      }
+    }
+  }
+  .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>
diff --git a/src/layout/mixin/ResizeHandler.js b/src/layout/mixin/ResizeHandler.js
new file mode 100644
index 0000000..e8d0df8
--- /dev/null
+++ b/src/layout/mixin/ResizeHandler.js
@@ -0,0 +1,45 @@
+import store from '@/store'
+
+const { body } = document
+const WIDTH = 992 // refer to Bootstrap's responsive design
+
+export default {
+  watch: {
+    $route(route) {
+      if (this.device === 'mobile' && this.sidebar.opened) {
+        store.dispatch('app/closeSideBar', { withoutAnimation: false })
+      }
+    }
+  },
+  beforeMount() {
+    window.addEventListener('resize', this.$_resizeHandler)
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.$_resizeHandler)
+  },
+  mounted() {
+    const isMobile = this.$_isMobile()
+    if (isMobile) {
+      store.dispatch('app/toggleDevice', 'mobile')
+      store.dispatch('app/closeSideBar', { withoutAnimation: true })
+    }
+  },
+  methods: {
+    // use $_ for mixins properties
+    // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
+    $_isMobile() {
+      const rect = body.getBoundingClientRect()
+      return rect.width - 1 < WIDTH
+    },
+    $_resizeHandler() {
+      if (!document.hidden) {
+        const isMobile = this.$_isMobile()
+        store.dispatch('app/toggleDevice', isMobile ? 'mobile' : 'desktop')
+
+        if (isMobile) {
+          store.dispatch('app/closeSideBar', { withoutAnimation: true })
+        }
+      }
+    }
+  }
+}
diff --git a/src/main.js b/src/main.js
new file mode 100644
index 0000000..5e53df6
--- /dev/null
+++ b/src/main.js
@@ -0,0 +1,44 @@
+import Vue from 'vue'
+
+import 'normalize.css/normalize.css' // A modern alternative to CSS resets
+import 'amfe-flexible'
+
+import ElementUI from 'element-ui'
+import 'element-ui/lib/theme-chalk/index.css'
+import locale from 'element-ui/lib/locale/lang/zh-CN' // lang i18n
+
+import '@/styles/index.scss' // global css
+
+import App from './App'
+import store from './store'
+import router from './router'
+
+import '@/icons' // icon
+import '@/permission' // permission control
+
+/**
+ * If you don't want to use mock-server
+ * you want to use MockJs for mock api
+ * you can execute: mockXHR()
+ *
+ * Currently MockJs will be used in the production environment,
+ * please remove it before going online ! ! !
+ */
+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)
+})
diff --git a/src/permission.js b/src/permission.js
new file mode 100644
index 0000000..46773cb
--- /dev/null
+++ b/src/permission.js
@@ -0,0 +1,64 @@
+// import router from './router'
+// import store from './store'
+// import { Message } from 'element-ui'
+// import NProgress from 'nprogress' // progress bar
+// import 'nprogress/nprogress.css' // progress bar style
+// import { getToken } from '@/utils/auth' // get token from cookie
+// import getPageTitle from '@/utils/get-page-title'
+
+// NProgress.configure({ showSpinner: false }) // NProgress Configuration
+
+// const whiteList = ['/login'] // no redirect whitelist
+
+// router.beforeEach(async(to, from, next) => {
+//   // start progress bar
+//   NProgress.start()
+
+//   // set page title
+//   document.title = getPageTitle(to.meta.title)
+
+//   // determine whether the user has logged in
+//   const hasToken = getToken()
+
+//   if (hasToken) {
+//     if (to.path === '/login') {
+//       // if is logged in, redirect to the home page
+//       next({ path: '/' })
+//       NProgress.done()
+//     } else {
+//       const hasGetUserInfo = store.getters.name
+//       if (hasGetUserInfo) {
+//         next()
+//       } else {
+//         try {
+//           // get user info
+//           await store.dispatch('user/getInfo')
+
+//           next()
+//         } catch (error) {
+//           // remove token and go to login page to re-login
+//           await store.dispatch('user/resetToken')
+//           Message.error(error || 'Has Error')
+//           next(`/login?redirect=${to.path}`)
+//           NProgress.done()
+//         }
+//       }
+//     }
+//   } else {
+//     /* has no token*/
+
+//     if (whiteList.indexOf(to.path) !== -1) {
+//       // in the free login whitelist, go directly
+//       next()
+//     } else {
+//       // other pages that do not have permission to access are redirected to the login page.
+//       next(`/login?redirect=${to.path}`)
+//       NProgress.done()
+//     }
+//   }
+// })
+
+// router.afterEach(() => {
+//   // finish progress bar
+//   NProgress.done()
+// })
diff --git a/src/router/index.js b/src/router/index.js
new file mode 100644
index 0000000..c6a2b93
--- /dev/null
+++ b/src/router/index.js
@@ -0,0 +1,319 @@
+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: '/login',
+    component: () => import('@/views/login/index'),
+    hidden: true
+  },
+  {
+    path: '/404',
+    component: () => import('@/views/404'),
+    hidden: true
+  },
+  {
+    path: '/',
+    component: Layout,
+    redirect: '/home',
+    children: [{
+      path: 'home',
+      name: 'Home',
+      component: () => import('@/views/home/index'),
+      meta: { title: '涓婚〉', icon: 'el-icon-s-home' }
+    }]
+  },
+  {
+    path: '/standardLibrary',
+    component: Layout,
+    children: [
+      {
+        path: 'index',
+        name: 'StandardLibrary',
+        component: () => import('@/views/standardLibrary/index'),
+        meta: { title: '鏍囧噯搴�', icon: 'form' }
+      }
+    ]
+  },
+  {
+    path: '/rawMaterials',
+    component: Layout,
+    redirect: '/rawMaterials/reportForInspection',
+    name: 'rawMaterials',
+    meta: { title: '鍘熸潗鏂欐姤妫�', icon: 'el-icon-s-help' },
+    children: [
+      {
+        path: 'reportForInspection',
+        name: 'ReportForInspection',
+        component: () => import('@/views/rawMaterials/reportForInspection/index'),
+        meta: { title: '鍘熸潗鏂欐姤妫�', icon: 'table' }
+      },
+      {
+        path: 'print',
+        name: 'Print',
+        component: () => import('@/views/rawMaterials/print/index'),
+        meta: { title: '鏉$爜鎵撳嵃', icon: 'tree' }
+      },
+      {
+        path: 'planAssignments',
+        name: 'PlanAssignments',
+        component: () => import('@/views/rawMaterials/planAssignments/index'),
+        meta: { title: '妫�楠岃鍒掑垎閰�', icon: 'tree' }
+      },
+      {
+        path: 'rawMaterialInspection',
+        name: 'RawMaterialInspection',
+        component: () => import('@/views/rawMaterials/rawMaterialInspection/index'),
+        meta: { title: '鍘熸潗鏂欐楠�', icon: 'tree' }
+      },
+      {
+        path: 'checkTheReport',
+        name: 'CheckTheReport',
+        component: () => import('@/views/rawMaterials/checkTheReport/index'),
+        meta: { title: '妫�楠屾姤鍛�', icon: 'tree' }
+      },
+      {
+        path: 'reportAuditing',
+        name: 'ReportAuditing',
+        component: () => import('@/views/rawMaterials/reportAuditing/index'),
+        meta: { title: '鎶ュ憡瀹℃牳', icon: 'tree' }
+      },
+      {
+        path: 'nonConformanceReview',
+        name: 'NonConformanceReview',
+        component: () => import('@/views/rawMaterials/nonConformanceReview/index'),
+        meta: { title: '涓嶅悎鏍煎弽棣�', icon: 'tree' }
+      },
+      {
+        path: 'nonConformingFeedback',
+        name: 'NonConformingFeedback',
+        component: () => import('@/views/rawMaterials/nonConformingFeedback/index'),
+        meta: { title: '涓嶅悎鏍艰瘎瀹�', icon: 'tree' }
+      },
+      {
+        path: 'passRateStatistics',
+        name: 'PassRateStatistics',
+        component: () => import('@/views/rawMaterials/passRateStatistics/index'),
+        meta: { title: '鍚堟牸鐜囩粺璁�', icon: 'tree' }
+      }
+    ]
+  },
+  {
+    path: '/finishedProduct',
+    component: Layout,
+    redirect: '/finishedProduct/reportForInspection',
+    name: 'FinishedProduct',
+    meta: { title: '鎴愬搧妫�楠�', icon: 'el-icon-s-help' },
+    children: [
+      {
+        path: 'reportForInspection',
+        name: 'ReportForInspection',
+        component: () => import('@/views/rawMaterials/reportForInspection/index'),
+        meta: { title: '鎴愬搧閫佹鐧昏', icon: 'table' }
+      },
+      {
+        path: 'print',
+        name: 'Print',
+        component: () => import('@/views/rawMaterials/print/index'),
+        meta: { title: '鏉$爜鎵撳嵃', icon: 'tree' }
+      },
+      {
+        path: 'planAssignments',
+        name: 'PlanAssignments',
+        component: () => import('@/views/rawMaterials/planAssignments/index'),
+        meta: { title: '妫�楠岃鍒掑垎閰�', icon: 'tree' }
+      },
+      {
+        path: 'rawMaterialInspection',
+        name: 'RawMaterialInspection',
+        component: () => import('@/views/rawMaterials/rawMaterialInspection/index'),
+        meta: { title: '鎴愬搧妫�楠�', icon: 'tree' }
+      },
+      {
+        path: 'checkTheReport',
+        name: 'CheckTheReport',
+        component: () => import('@/views/rawMaterials/checkTheReport/index'),
+        meta: { title: '妫�楠屾姤鍛�', icon: 'tree' }
+      },
+      {
+        path: 'reportAuditing',
+        name: 'ReportAuditing',
+        component: () => import('@/views/rawMaterials/reportAuditing/index'),
+        meta: { title: '鎶ュ憡瀹℃牳', icon: 'tree' }
+      },
+      {
+        path: 'nonConformanceReview',
+        name: 'NonConformanceReview',
+        component: () => import('@/views/rawMaterials/nonConformanceReview/index'),
+        meta: { title: '涓嶅悎鏍煎弽棣�', icon: 'tree' }
+      },
+      {
+        path: 'nonConformingFeedback',
+        name: 'NonConformingFeedback',
+        component: () => import('@/views/rawMaterials/nonConformingFeedback/index'),
+        meta: { title: '涓嶅悎鏍艰瘎瀹�', icon: 'tree' }
+      },
+      {
+        path: 'passRateStatistics',
+        name: 'PassRateStatistics',
+        component: () => import('@/views/rawMaterials/passRateStatistics/index'),
+        meta: { title: '鍚堟牸鐜囩粺璁�', icon: 'tree' }
+      }
+    ]
+  },
+  {
+    path: '/laboratory',
+    component: Layout,
+    redirect: '/laboratory/ledger',
+    name: 'Laboratory',
+    meta: { title: '瀹為獙瀹ょ鐞�', icon: 'el-icon-s-help' },
+    children: [
+      {
+        path: 'ledger',
+        name: 'Ledger',
+        component: () => import('@/views/laboratory/ledger/index'),
+        meta: { title: '璁惧鍙拌处', icon: 'table' }
+      },
+      {
+        path: 'measure',
+        name: 'Measure',
+        component: () => import('@/views/laboratory/measure/index'),
+        meta: { title: '璁¢噺绠$悊', icon: 'tree' }
+      },
+      {
+        path: 'gather',
+        name: 'Gather',
+        component: () => import('@/views/laboratory/gather/index'),
+        meta: { title: '璁惧閲囬泦', icon: 'tree' }
+      },
+      {
+        path: 'personnel',
+        name: 'Personnel',
+        component: () => import('@/views/laboratory/personnel/index'),
+        meta: { title: '浜哄憳绠$悊', icon: 'tree' }
+      }
+    ]
+  },
+  {
+    path: '/chart',
+    component: Layout,
+    redirect: '/chart/center',
+    name: 'Chart',
+    meta: { title: '鏅鸿兘鍥捐〃', icon: 'el-icon-s-help' },
+    children: [
+      {
+        path: 'center',
+        name: 'center',
+        component: () => import('@/views/chart/center/index'),
+        meta: { title: '瀹為獙涓績', icon: 'table' }
+      },
+      {
+        path: 'spc',
+        name: 'Spc',
+        component: () => import('@/views/chart/spc/index'),
+        meta: { title: 'SPC鎺у埗鍥�', icon: 'tree' }
+      },
+      {
+        path: 'shota',
+        name: 'Shota',
+        component: () => import('@/views/chart/shota/index'),
+        meta: { title: '姝eお鍒嗗竷鍥�', icon: 'tree' }
+      },
+      {
+        path: 'work',
+        name: 'Work',
+        component: () => import('@/views/chart/work/index'),
+        meta: { title: '宸ヤ綔缁熻', icon: 'tree' }
+      }
+    ]
+  },
+  {
+    path: '/message',
+    component: Layout,
+    redirect: '/message/message',
+    name: 'Message',
+    meta: { title: '娑堟伅寰呭姙', icon: 'el-icon-s-help' },
+    children: [
+      {
+        path: 'message',
+        name: 'Message',
+        component: () => import('@/views/message/message/index'),
+        meta: { title: '鎴戠殑娑堟伅', icon: 'table' }
+      },
+      {
+        path: 'toDo',
+        name: 'ToDo',
+        component: () => import('@/views/message/toDo/index'),
+        meta: { title: '鎴戠殑寰呭姙', icon: 'tree' }
+      }
+    ]
+  },
+  {
+    path: '/personal',
+    component: Layout,
+    redirect: '/personal/myInformation',
+    name: 'Personal',
+    meta: { title: '涓汉绠$悊', icon: 'el-icon-s-help' },
+    children: [
+      {
+        path: 'myInformation',
+        name: 'MyInformation',
+        component: () => import('@/views/personal/myInformation/index'),
+        meta: { title: '鎴戠殑淇℃伅', icon: 'table' }
+      },
+      {
+        path: 'myBusiness',
+        name: 'MyBusiness',
+        component: () => import('@/views/personal/myBusiness/index'),
+        meta: { title: '鎴戠殑浼佷笟', icon: 'tree' }
+      }
+    ]
+  },
+  // 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
diff --git a/src/settings.js b/src/settings.js
new file mode 100644
index 0000000..f2f71fc
--- /dev/null
+++ b/src/settings.js
@@ -0,0 +1,16 @@
+module.exports = {
+
+  title: 'Vue Admin Template',
+
+  /**
+   * @type {boolean} true | false
+   * @description Whether fix the header
+   */
+  fixedHeader: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description Whether show the logo in sidebar
+   */
+  sidebarLogo: true
+}
diff --git a/src/store/getters.js b/src/store/getters.js
new file mode 100644
index 0000000..5ab7b4c
--- /dev/null
+++ b/src/store/getters.js
@@ -0,0 +1,8 @@
+const getters = {
+  sidebar: state => state.app.sidebar,
+  device: state => state.app.device,
+  token: state => state.user.token,
+  avatar: state => state.user.avatar,
+  name: state => state.user.name
+}
+export default getters
diff --git a/src/store/index.js b/src/store/index.js
new file mode 100644
index 0000000..6be466a
--- /dev/null
+++ b/src/store/index.js
@@ -0,0 +1,19 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+import getters from './getters'
+import app from './modules/app'
+import settings from './modules/settings'
+import user from './modules/user'
+
+Vue.use(Vuex)
+
+const store = new Vuex.Store({
+  modules: {
+    app,
+    settings,
+    user
+  },
+  getters
+})
+
+export default store
diff --git a/src/store/modules/app.js b/src/store/modules/app.js
new file mode 100644
index 0000000..7ea7e33
--- /dev/null
+++ b/src/store/modules/app.js
@@ -0,0 +1,48 @@
+import Cookies from 'js-cookie'
+
+const state = {
+  sidebar: {
+    opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true,
+    withoutAnimation: false
+  },
+  device: 'desktop'
+}
+
+const mutations = {
+  TOGGLE_SIDEBAR: state => {
+    state.sidebar.opened = !state.sidebar.opened
+    state.sidebar.withoutAnimation = false
+    if (state.sidebar.opened) {
+      Cookies.set('sidebarStatus', 1)
+    } else {
+      Cookies.set('sidebarStatus', 0)
+    }
+  },
+  CLOSE_SIDEBAR: (state, withoutAnimation) => {
+    Cookies.set('sidebarStatus', 0)
+    state.sidebar.opened = false
+    state.sidebar.withoutAnimation = withoutAnimation
+  },
+  TOGGLE_DEVICE: (state, device) => {
+    state.device = device
+  }
+}
+
+const actions = {
+  toggleSideBar({ commit }) {
+    commit('TOGGLE_SIDEBAR')
+  },
+  closeSideBar({ commit }, { withoutAnimation }) {
+    commit('CLOSE_SIDEBAR', withoutAnimation)
+  },
+  toggleDevice({ commit }, device) {
+    commit('TOGGLE_DEVICE', device)
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}
diff --git a/src/store/modules/settings.js b/src/store/modules/settings.js
new file mode 100644
index 0000000..b3f33f8
--- /dev/null
+++ b/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
+}
+
diff --git a/src/store/modules/user.js b/src/store/modules/user.js
new file mode 100644
index 0000000..2f6423f
--- /dev/null
+++ b/src/store/modules/user.js
@@ -0,0 +1,97 @@
+import { login, logout, getInfo } from '@/api/user'
+import { getToken, setToken, removeToken } from '@/utils/auth'
+import { resetRouter } from '@/router'
+
+const getDefaultState = () => {
+  return {
+    token: getToken(),
+    name: '',
+    avatar: ''
+  }
+}
+
+const state = getDefaultState()
+
+const mutations = {
+  RESET_STATE: (state) => {
+    Object.assign(state, getDefaultState())
+  },
+  SET_TOKEN: (state, token) => {
+    state.token = token
+  },
+  SET_NAME: (state, name) => {
+    state.name = name
+  },
+  SET_AVATAR: (state, avatar) => {
+    state.avatar = avatar
+  }
+}
+
+const actions = {
+  // user login
+  login({ commit }, userInfo) {
+    const { username, password } = userInfo
+    return new Promise((resolve, reject) => {
+      login({ username: username.trim(), password: password }).then(response => {
+        const { data } = response
+        commit('SET_TOKEN', data.token)
+        setToken(data.token)
+        resolve()
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+
+  // get user info
+  getInfo({ commit, state }) {
+    return new Promise((resolve, reject) => {
+      getInfo(state.token).then(response => {
+        const { data } = response
+
+        if (!data) {
+          return reject('Verification failed, please Login again.')
+        }
+
+        const { name, avatar } = data
+
+        commit('SET_NAME', name)
+        commit('SET_AVATAR', avatar)
+        resolve(data)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+
+  // user logout
+  logout({ commit, state }) {
+    return new Promise((resolve, reject) => {
+      logout(state.token).then(() => {
+        removeToken() // must remove  token  first
+        resetRouter()
+        commit('RESET_STATE')
+        resolve()
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+
+  // remove token
+  resetToken({ commit }) {
+    return new Promise(resolve => {
+      removeToken() // must remove  token  first
+      commit('RESET_STATE')
+      resolve()
+    })
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}
+
diff --git a/src/styles/element-ui.scss b/src/styles/element-ui.scss
new file mode 100644
index 0000000..dfae657
--- /dev/null
+++ b/src/styles/element-ui.scss
@@ -0,0 +1,92 @@
+// 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;
+}
+
+
+.el-pagination{
+  // 鍏ㄥ眬淇敼鍒嗛〉鍣ㄧ殑鏍峰紡
+  >span,>button{
+    margin: 0 4px;
+  }
+  >button{
+    border: 1px solid #DCDFE6;
+    border-radius: 3px;
+    // padding: 0px 6px;
+    padding: 0px;
+  }
+  >ul li{
+    border: 1px solid #DCDFE6;
+    border-radius: 3px;
+    margin: 0 4px;
+  }
+}
+// 鍏ㄥ眬淇敼input妗嗘牱寮�
+.el-input input{
+  // height: 32px !important;
+}
+
+// 鍏ㄥ眬淇敼button
+.el-button {
+  // height: 32px;
+  // box-sizing: border-box;
+  // font-size: 14px;
+  // padding: 0 20px;
+}
+
+
+.el-radio-button__orig-radio:checked+.el-radio-button__inner {
+    color: #409EFF;
+    background: #ecf5ff;
+    border-color: #b3d8ff;
+}
+.el-radio-button__orig-radio:checked+.el-radio-button__inner {
+  box-shadow: -0.00521rem 0 0 0 #b3d8ff;
+}
\ No newline at end of file
diff --git a/src/styles/index.scss b/src/styles/index.scss
new file mode 100644
index 0000000..e9fd3e9
--- /dev/null
+++ b/src/styles/index.scss
@@ -0,0 +1,85 @@
+@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;
+}
+/**淇敼鍏ㄥ眬鐨勬粴鍔ㄦ潯*/
+/**婊氬姩鏉$殑瀹藉害*/
+::-webkit-scrollbar {
+	width: 8px;
+}
+::-webkit-scrollbar-thumb {
+	background-color: #bdbfc4;
+
+	border-radius: 3px;
+}
+/*琛ㄦ牸*/
+.el-table__body-wrapper::-webkit-scrollbar {
+	width: 10px;
+	height: 10px;
+}
+.el-table__body-wrapper::-webkit-scrollbar-thumb {
+	// background-color: #eaecf1;  
+	background-color: #bdbfc4;
+	border-radius: 3px;
+}
diff --git a/src/styles/mixin.scss b/src/styles/mixin.scss
new file mode 100644
index 0000000..36b74bb
--- /dev/null
+++ b/src/styles/mixin.scss
@@ -0,0 +1,28 @@
+@mixin clearfix {
+  &:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+}
+
+@mixin scrollBar {
+  &::-webkit-scrollbar-track-piece {
+    background: #d3dce6;
+  }
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #99a9bf;
+    border-radius: 20px;
+  }
+}
+
+@mixin relative {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
new file mode 100644
index 0000000..c803516
--- /dev/null
+++ b/src/styles/sidebar.scss
@@ -0,0 +1,230 @@
+#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;
+      }
+    }
+
+    
+
+    & .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;
+      }
+    }
+
+    .is-active.el-menu-item {
+      color: $subMenuActiveText !important;
+      border-right: 3px solid $menuActiveText;
+      background-color: $menuHover !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;
+    }
+  }
+}
diff --git a/src/styles/transition.scss b/src/styles/transition.scss
new file mode 100644
index 0000000..4cb27cc
--- /dev/null
+++ b/src/styles/transition.scss
@@ -0,0 +1,48 @@
+// global transition css
+
+/* fade */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.28s;
+}
+
+.fade-enter,
+.fade-leave-active {
+  opacity: 0;
+}
+
+/* fade-transform */
+.fade-transform-leave-active,
+.fade-transform-enter-active {
+  transition: all .5s;
+}
+
+.fade-transform-enter {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+
+.fade-transform-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+/* breadcrumb transition */
+.breadcrumb-enter-active,
+.breadcrumb-leave-active {
+  transition: all .5s;
+}
+
+.breadcrumb-enter,
+.breadcrumb-leave-active {
+  opacity: 0;
+  transform: translateX(20px);
+}
+
+.breadcrumb-move {
+  transition: all .5s;
+}
+
+.breadcrumb-leave-active {
+  position: absolute;
+}
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
new file mode 100644
index 0000000..cd256ef
--- /dev/null
+++ b/src/styles/variables.scss
@@ -0,0 +1,39 @@
+// sidebar
+// $menuText:#bfcbd9;
+// $menuActiveText:#409EFF;
+// $subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951
+
+// $menuBg:#304156;
+// $menuHover:#263445;
+
+// $subMenuBg:#1f2d3d;
+// $subMenuHover:#001528;
+
+// $sideBarWidth: 210px;
+
+
+$menuText:#606266;
+$menuActiveText:#0077DB;
+// $subMenuActiveText:#606266; //https://github.com/ElemeFE/element/issues/12951
+$subMenuActiveText:#0077DB; //https://github.com/ElemeFE/element/issues/12951
+
+$menuBg:#fff;
+$menuHover:#E5F1FB;
+
+$subMenuBg:#fff;
+$subMenuHover:#E5F1FB;
+
+$sideBarWidth: 200px;
+
+// 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;
+}
diff --git a/src/utils/auth.js b/src/utils/auth.js
new file mode 100644
index 0000000..059af18
--- /dev/null
+++ b/src/utils/auth.js
@@ -0,0 +1,15 @@
+import Cookies from 'js-cookie'
+
+const TokenKey = 'vue_admin_template_token'
+
+export function getToken() {
+  return Cookies.get(TokenKey)
+}
+
+export function setToken(token) {
+  return Cookies.set(TokenKey, token)
+}
+
+export function removeToken() {
+  return Cookies.remove(TokenKey)
+}
diff --git a/src/utils/get-page-title.js b/src/utils/get-page-title.js
new file mode 100644
index 0000000..a6de99d
--- /dev/null
+++ b/src/utils/get-page-title.js
@@ -0,0 +1,10 @@
+import defaultSettings from '@/settings'
+
+const title = defaultSettings.title || 'Vue Admin Template'
+
+export default function getPageTitle(pageTitle) {
+  if (pageTitle) {
+    return `${pageTitle} - ${title}`
+  }
+  return `${title}`
+}
diff --git a/src/utils/index.js b/src/utils/index.js
new file mode 100644
index 0000000..4830c04
--- /dev/null
+++ b/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
+}
diff --git a/src/utils/request.js b/src/utils/request.js
new file mode 100644
index 0000000..4a555c7
--- /dev/null
+++ b/src/utils/request.js
@@ -0,0 +1,84 @@
+import axios from 'axios'
+import { MessageBox, Message } from 'element-ui'
+import store from '@/store'
+import { getToken } from '@/utils/auth'
+
+// create an axios instance
+const service = axios.create({
+  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
+  // withCredentials: true, // send cookies when cross-domain requests
+  timeout: 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-Token'] = getToken()
+    }
+    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 !== 200) {
+      Message({
+        message: res.message || 'Error',
+        type: 'error',
+        duration: 5 * 1000
+      })
+      // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
+      if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
+        // to re-login
+        MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
+          confirmButtonText: 'Re-Login',
+          cancelButtonText: 'Cancel',
+          type: 'warning'
+        }).then(() => {
+          store.dispatch('user/resetToken').then(() => {
+            location.reload()
+          })
+        })
+      }
+      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
diff --git a/src/utils/validate.js b/src/utils/validate.js
new file mode 100644
index 0000000..8d962ad
--- /dev/null
+++ b/src/utils/validate.js
@@ -0,0 +1,20 @@
+/**
+ * Created by PanJiaChen on 16/11/18.
+ */
+
+/**
+ * @param {string} path
+ * @returns {Boolean}
+ */
+export function isExternal(path) {
+  return /^(https?:|mailto:|tel:)/.test(path)
+}
+
+/**
+ * @param {string} str
+ * @returns {Boolean}
+ */
+export function validUsername(str) {
+  const valid_map = ['admin', 'editor']
+  return valid_map.indexOf(str.trim()) >= 0
+}
diff --git a/src/views/404.vue b/src/views/404.vue
new file mode 100644
index 0000000..1791f55
--- /dev/null
+++ b/src/views/404.vue
@@ -0,0 +1,228 @@
+<template>
+  <div class="wscn-http404-container">
+    <div class="wscn-http404">
+      <div class="pic-404">
+        <img class="pic-404__parent" src="@/assets/404_images/404.png" alt="404">
+        <img class="pic-404__child left" src="@/assets/404_images/404_cloud.png" alt="404">
+        <img class="pic-404__child mid" src="@/assets/404_images/404_cloud.png" alt="404">
+        <img class="pic-404__child right" src="@/assets/404_images/404_cloud.png" alt="404">
+      </div>
+      <div class="bullshit">
+        <div class="bullshit__oops">OOPS!</div>
+        <div class="bullshit__info">All rights reserved
+          <a style="color:#20a0ff" href="https://wallstreetcn.com" target="_blank">wallstreetcn</a>
+        </div>
+        <div class="bullshit__headline">{{ message }}</div>
+        <div class="bullshit__info">Please check that the URL you entered is correct, or click the button below to return to the homepage.</div>
+        <a href="" class="bullshit__return-home">Back to home</a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'Page404',
+  computed: {
+    message() {
+      return 'The webmaster said that you can not enter this page...'
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.wscn-http404-container{
+  transform: translate(-50%,-50%);
+  position: absolute;
+  top: 40%;
+  left: 50%;
+}
+.wscn-http404 {
+  position: relative;
+  width: 1200px;
+  padding: 0 50px;
+  overflow: hidden;
+  .pic-404 {
+    position: relative;
+    float: left;
+    width: 600px;
+    overflow: hidden;
+    &__parent {
+      width: 100%;
+    }
+    &__child {
+      position: absolute;
+      &.left {
+        width: 80px;
+        top: 17px;
+        left: 220px;
+        opacity: 0;
+        animation-name: cloudLeft;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1s;
+      }
+      &.mid {
+        width: 46px;
+        top: 10px;
+        left: 420px;
+        opacity: 0;
+        animation-name: cloudMid;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1.2s;
+      }
+      &.right {
+        width: 62px;
+        top: 100px;
+        left: 500px;
+        opacity: 0;
+        animation-name: cloudRight;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1s;
+      }
+      @keyframes cloudLeft {
+        0% {
+          top: 17px;
+          left: 220px;
+          opacity: 0;
+        }
+        20% {
+          top: 33px;
+          left: 188px;
+          opacity: 1;
+        }
+        80% {
+          top: 81px;
+          left: 92px;
+          opacity: 1;
+        }
+        100% {
+          top: 97px;
+          left: 60px;
+          opacity: 0;
+        }
+      }
+      @keyframes cloudMid {
+        0% {
+          top: 10px;
+          left: 420px;
+          opacity: 0;
+        }
+        20% {
+          top: 40px;
+          left: 360px;
+          opacity: 1;
+        }
+        70% {
+          top: 130px;
+          left: 180px;
+          opacity: 1;
+        }
+        100% {
+          top: 160px;
+          left: 120px;
+          opacity: 0;
+        }
+      }
+      @keyframes cloudRight {
+        0% {
+          top: 100px;
+          left: 500px;
+          opacity: 0;
+        }
+        20% {
+          top: 120px;
+          left: 460px;
+          opacity: 1;
+        }
+        80% {
+          top: 180px;
+          left: 340px;
+          opacity: 1;
+        }
+        100% {
+          top: 200px;
+          left: 300px;
+          opacity: 0;
+        }
+      }
+    }
+  }
+  .bullshit {
+    position: relative;
+    float: left;
+    width: 300px;
+    padding: 30px 0;
+    overflow: hidden;
+    &__oops {
+      font-size: 32px;
+      font-weight: bold;
+      line-height: 40px;
+      color: #1482f0;
+      opacity: 0;
+      margin-bottom: 20px;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-fill-mode: forwards;
+    }
+    &__headline {
+      font-size: 20px;
+      line-height: 24px;
+      color: #222;
+      font-weight: bold;
+      opacity: 0;
+      margin-bottom: 10px;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.1s;
+      animation-fill-mode: forwards;
+    }
+    &__info {
+      font-size: 13px;
+      line-height: 21px;
+      color: grey;
+      opacity: 0;
+      margin-bottom: 30px;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.2s;
+      animation-fill-mode: forwards;
+    }
+    &__return-home {
+      display: block;
+      float: left;
+      width: 110px;
+      height: 36px;
+      background: #1482f0;
+      border-radius: 100px;
+      text-align: center;
+      color: #ffffff;
+      opacity: 0;
+      font-size: 14px;
+      line-height: 36px;
+      cursor: pointer;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.3s;
+      animation-fill-mode: forwards;
+    }
+    @keyframes slideUp {
+      0% {
+        transform: translateY(60px);
+        opacity: 0;
+      }
+      100% {
+        transform: translateY(0);
+        opacity: 1;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/chart/center/index.vue b/src/views/chart/center/index.vue
new file mode 100644
index 0000000..963ea72
--- /dev/null
+++ b/src/views/chart/center/index.vue
@@ -0,0 +1,13 @@
+<template>
+  <div>瀹為獙涓績</div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/views/chart/shota/index.vue b/src/views/chart/shota/index.vue
new file mode 100644
index 0000000..e65f400
--- /dev/null
+++ b/src/views/chart/shota/index.vue
@@ -0,0 +1,13 @@
+<template>
+  <div>姝eお鍒嗗竷鍥�</div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/views/chart/spc/index.vue b/src/views/chart/spc/index.vue
new file mode 100644
index 0000000..e2a2a21
--- /dev/null
+++ b/src/views/chart/spc/index.vue
@@ -0,0 +1,13 @@
+<template>
+  <div>spc鎺у埗鍥�</div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/views/chart/work/index.vue b/src/views/chart/work/index.vue
new file mode 100644
index 0000000..1b667ad
--- /dev/null
+++ b/src/views/chart/work/index.vue
@@ -0,0 +1,13 @@
+<template>
+  <div>宸ヤ綔缁熻鍥�</div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
new file mode 100644
index 0000000..dae4b00
--- /dev/null
+++ b/src/views/home/index.vue
@@ -0,0 +1,97 @@
+<template>
+  <div class="home-main">
+    <div class="home-header-welcome">
+      <div class="welcome-left">
+        <div class="left-avatar" />
+        <div class="left-tips">
+          <div>Hi jack锛屾杩庝娇鐢╖T-LIMS</div>
+          <div>浠婂ぉ鏄�2023骞�07鏈�07鏃� 鏄熸湡浜�</div>
+        </div>
+      </div>
+      <div class="welcome-right">
+        <div class="right-centent">
+          <div>鍗冲皢瓒呮湡寰呭姙</div>
+          <div>鏆傛棤</div>
+        </div>
+        <div />
+        <div class="right-centent">
+          <div>宸茶秴鏈熷緟鍔�</div>
+          <div>21</div>
+        </div>
+      </div>
+    </div>
+    <div class="content-main"></div>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+.home-main{
+  .home-header-welcome{
+    width: 100%;
+    background: #fff;
+    height: 84px;
+    display: flex;
+    border-bottom: 1px solid #f0f2f5;
+    padding: 8px 24px 12px 24px;
+    justify-content: space-between;
+    .welcome-left{
+      display: flex;
+      align-items: center;
+      height: 100%;
+      .left-avatar{
+        width: 56px;
+        height: 56px;
+        margin-right: 24px;
+        background: #0077DB;
+        border-radius: 50%;
+      }
+      .left-tips{
+        height: 80%;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        >div:nth-child(1){
+          font-size: 20px;
+          color: #303133;
+        }
+        >div:nth-child(2){
+          font-size: 14px;
+          color: #606266;
+        }
+      }
+    }
+    .welcome-right{
+      width: 250px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .right-centent{
+        height: 80%;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        align-items: flex-end;
+        >div:nth-child(1){
+          color: #909399;
+          font-size: 14px;
+        }
+        >div:nth-child(2){
+          font-size: 24px;
+          color: #c0c4cc;
+        }
+      }
+      >div:nth-child(2){
+          width: 2px;
+          height: 70%;
+          background: #f0f2f5;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/laboratory/gather/index.vue b/src/views/laboratory/gather/index.vue
new file mode 100644
index 0000000..583b934
--- /dev/null
+++ b/src/views/laboratory/gather/index.vue
@@ -0,0 +1,13 @@
+<template>
+  <div>璁惧閲囬泦</div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/views/laboratory/ledger/index.vue b/src/views/laboratory/ledger/index.vue
new file mode 100644
index 0000000..20c2883
--- /dev/null
+++ b/src/views/laboratory/ledger/index.vue
@@ -0,0 +1,296 @@
+<template>
+  <div class="ledger-main">
+    <div class="page-header-search">
+      <div class="search-bar">
+        <el-form ref="form" inline="true" :model="searchData">
+          <el-form-item>
+            <el-input
+              placeholder="璇疯緭鍏ョ紪鍙�/璁惧鍚嶇О/鍨嬪彿瑙勬牸"
+              v-model="searchData.keyword"
+            >
+              <i slot="prefix" class="el-input__icon el-icon-search" />
+            </el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary">鏌ヨ</el-button>
+            <el-button type="primary" plain>閲嶇疆</el-button>
+            <!-- <el-button type="text">楂樼骇鎼滅储<i class="el-icon-arrow-down el-icon--right" /></el-button> -->
+          </el-form-item>
+        </el-form>
+      </div>
+      <div class="serve-btn">
+        <el-button type="primary" icon="el-icon-plus">鏂板浜哄憳</el-button>
+      </div>
+    </div>
+    <div class="content-main">
+      <div class="library-bom">
+        <el-input
+          v-model="filterText"
+          placeholder="杈撳叆鍏抽敭瀛楄繘琛岃繃婊�"
+        />
+        <el-tree
+          ref="tree"
+          class="filter-tree"
+          :data="data"
+          :props="defaultProps"
+          default-expand-all
+          :filter-node-method="filterNode"
+        >
+
+        </el-tree>
+      </div>
+      <div class="library-table">
+        <div class="table-header">
+          <div class="search-bar">
+            <el-radio-group v-model="radioValue">
+              <el-radio-button label="鍏ㄩ儴" />
+              <el-radio-button label="杩愯" />
+              <el-radio-button label="寰呮満" />
+              <el-radio-button label="妫�淇�" />
+              <el-radio-button label="鏁呴殰" />
+              <el-radio-button label="鎶ュ簾" />
+            </el-radio-group>
+            <el-checkbox :style="{'marginLeft':'12px'}" v-model="isOut">宸茶繃鏈�</el-checkbox>
+          </div>
+          <div class="serve-btn">
+            <!-- <el-button type="primary" icon="el-icon-plus">鏂板浜哄憳</el-button> -->
+          </div>
+        </div>
+        <div class="table-box">
+          <el-table
+            ref="personnerlTable"
+
+            :cell-style="{textAlign: 'center'}"
+            :header-cell-style="{border:'0px',background:'#f5f7fa',color:'#606266',boxShadow: 'inset 0 1px 0 #ebeef5',textAlign: 'center'}"
+            :data="personnerlTable"
+            style="width: 100%"
+          >
+            <el-table-column
+              prop="roleName"
+              label="搴忓彿"
+              min-width="90"
+            />
+            <el-table-column
+              prop="rolePermissions"
+              label="浠櫒璁惧缂栧彿"
+              min-width="150"
+            />
+            <el-table-column
+              prop="age"
+              label="浠櫒璁惧鍚嶇О"
+              min-width="150"
+            />
+            <el-table-column
+              prop="creatTime"
+              label="瑙勬牸鍨嬪彿"
+              min-width="150"
+            />
+            <el-table-column
+              prop="phone"
+              label="涓婃璁¢噺鏃堕棿"
+              min-width="200"
+            />
+            <el-table-column
+              prop="mailbox"
+              label="涓婃璁¢噺鍗曚綅"
+              min-width="200"
+            />
+            <el-table-column
+              prop="mailbox"
+              label="鎴鏈夋晥鏈�"
+              min-width="200"
+            />
+            <el-table-column
+              prop="mailbox"
+              label="璁¢噺鍛ㄦ湡"
+              min-width="200"
+            />
+            <el-table-column
+              prop="incumbentStatus"
+              label="璁惧鐘舵��"
+              min-width="120"
+              :filters="[{ text: 0, value: 0 }, { text: 1, value: 1 }]"
+              :filter-method="filterTag"
+              filter-placement="bottom-end"
+            >
+              <template slot-scope="scope">
+                <el-tag
+                  :type="scope.row.businessStatus === 0 ? 'primary' : 'success'"
+                  disable-transitions
+                >{{ scope.row.businessStatus === 0 ? '鏈悓鎰�' : '宸插悓鎰�' }}</el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column
+              label="鎿嶄綔"
+              min-width="120"
+              :fixed="true"
+            >
+              <template slot-scope="scope" >
+                <el-button @click="handleClick(scope.row)" type="text" size="small">缂栬緫</el-button>
+                <!-- <el-button type="text" size="small">缂栬緫</el-button> -->
+              </template>
+            </el-table-column>
+          </el-table>
+          <div>
+            <el-pagination
+              @size-change="handleSizeChange"
+              @current-change="handleCurrentChange"
+              :current-page="currentPage"
+              :page-sizes="[100, 200, 300, 400]"
+              :page-size="100"
+              layout="total, sizes, prev, pager, next, jumper"
+              :total="400"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      // 琛ㄦ牸鏁版嵁
+      data: [{
+        id: 1,
+        label: '涓�绾� 1',
+        children: [{
+          id: 4,
+          label: '浜岀骇 1-1',
+          children: [{
+            id: 9,
+            label: '涓夌骇 1-1-1'
+          }, {
+            id: 10,
+            label: '涓夌骇 1-1-2'
+          }]
+        }]
+      }],
+      // tree榛樿鍊�
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      },
+      // 鎼滅储鍏抽敭瀛�
+      searchData: {
+        keyword: ''
+      },
+      // 琛ㄦ牸鎼滅储鍗曢�夊��
+      radioValue: '鍏ㄩ儴',
+      // 琛ㄦ牸鎼滅储宸茶繃鏈�
+      isOut: false
+    }
+  },
+  watch: {
+    filterText(val) {
+      this.$refs.tree.filter(val)
+    }
+  },
+  methods: {
+    filterNode(value, data) {
+      if (!value) return true
+      return data.label.indexOf(value) !== -1
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.ledger-main{
+  width: 100%;
+  height: 100%;
+    // 椤甸潰澶撮儴鏉′欢鎼滅储
+  .page-header-search{
+    background: #fff;
+    display: flex;
+    justify-content: space-between;
+    padding: 0 24px 12px 24px;
+     .search-bar{
+      .el-radio-button.is-active{
+        color: #409EFF !important;
+        background: #ecf5ff !important;
+        border-color: #b3d8ff !important;
+      }
+      .el-form{
+       .el-form-item{
+         margin-bottom: 0px !important;
+         .el-input{
+          width: 360px;
+         }
+        }
+      }
+    }
+  }
+
+// 椤甸潰涓績鍐呭鍖哄煙
+  .content-main{
+    display: flex;
+    height: 100%;
+    min-height: calc(100vh - 88px);
+    padding: 15px;
+    >div{
+      padding: 20px;
+      background: #fff;
+    }
+    .library-bom{
+      flex: 2;
+      margin-right: 12px;
+      .el-tree {
+        margin-top: 12px;
+        ::v-deep .el-tree-node__content{
+          height: 24px !important;
+          font-size: 14px;
+          display: inline-block !important;
+          padding: 2px;
+          color: #333;
+        }
+        ::v-deep .el-tree-node__content:hover{
+          background: rgba(58,124,253,0.1) !important;
+          // opacity: 0.31;
+          border-radius: 3px;
+          color: #333 !important;
+        }
+        ::v-deep .el-tree-node:focus>.el-tree-node__content{
+          background: rgba(58,124,253,0.1) !important; 
+          // opacity: 0.31;
+          border-radius: 3px;
+          color: #333 !important;
+        }
+      }
+    }
+    .library-table{
+      flex: 8;
+      max-width: 80%;
+      margin-left: 12px;
+      display: flex;
+      flex-direction: column;
+
+      /* .table-header{
+        display: flex;
+        justify-content: space-between;
+        .el-form-item{
+          margin-bottom: 30px !important;
+        }
+      } */
+      .table-box{
+          margin-top: 30px;
+          flex: 1;
+          background: #fff;
+          // padding: 20px 20px 10px 20px;
+          display: flex;
+          flex-direction: column;
+          .el-table {
+            flex: 1;
+          }
+          >div:nth-child(2){
+            display: flex;
+            justify-content: end;
+            margin: 10px 0;
+          }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/laboratory/measure/index.vue b/src/views/laboratory/measure/index.vue
new file mode 100644
index 0000000..5462379
--- /dev/null
+++ b/src/views/laboratory/measure/index.vue
@@ -0,0 +1,13 @@
+<template>
+  <div>璁¢噺绠$悊</div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/views/laboratory/personnel/index.vue b/src/views/laboratory/personnel/index.vue
new file mode 100644
index 0000000..6405a16
--- /dev/null
+++ b/src/views/laboratory/personnel/index.vue
@@ -0,0 +1,169 @@
+<template>
+  <div class="personnel-main ">
+    <div class="page-header-search">
+      <div class="search-bar">
+        <el-form ref="form" inline="true" :model="searchData">
+          <el-form-item>
+            <el-input
+              placeholder="璇疯緭鍏ヤ汉鍛樺悕绉�"
+              v-model="searchData.keyword"
+            >
+              <i slot="prefix" class="el-input__icon el-icon-search" />
+            </el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary">鏌ヨ</el-button>
+            <el-button type="primary" plain>閲嶇疆</el-button>
+            <!-- <el-button type="text">楂樼骇鎼滅储<i class="el-icon-arrow-down el-icon--right" /></el-button> -->
+          </el-form-item>
+        </el-form>
+      </div>
+      <div class="serve-btn">
+        <el-button type="primary" icon="el-icon-plus">鏂板浜哄憳</el-button>
+      </div>
+    </div>
+    <div class="content-main">
+      <div class="personner-table">
+        <el-table
+          ref="personnerlTable"
+          :height="700"
+          :max-height="700"
+          :cell-style="{textAlign: 'center'}"
+          :header-cell-style="{border:'0px',background:'#f5f7fa',color:'#606266',boxShadow: 'inset 0 1px 0 #ebeef5',textAlign: 'center'}"
+          :data="personnerlTable"
+          style="width: 100%"
+        >
+          <el-table-column
+            prop="roleName"
+            label="瑙掕壊鍚嶇О"
+            min-width="120"
+          />
+          <el-table-column
+            prop="rolePermissions"
+            label="瑙掕壊鏉冮檺"
+            min-width="120"
+          />
+          <el-table-column
+            prop="age"
+            label="骞撮緞"
+            min-width="150"
+          />
+          <el-table-column
+            prop="creatTime"
+            label="鍒涘缓鏃堕棿"
+            min-width="180"
+          />
+          <el-table-column
+            prop="phone"
+            label="鐢佃瘽"
+            min-width="200"
+          />
+          <el-table-column
+            prop="mailbox"
+            label="閭"
+            min-width="200"
+          />
+          <el-table-column
+            prop="incumbentStatus"
+            label="鍦ㄨ亴鐘舵��"
+            min-width="120"
+            :filters="[{ text: 0, value: 0 }, { text: 1, value: 1 }]"
+            :filter-method="filterTag"
+            filter-placement="bottom-end"
+          >
+            <template slot-scope="scope">
+              <el-tag
+                :type="scope.row.businessStatus === 0 ? 'primary' : 'success'"
+                disable-transitions
+              >{{ scope.row.businessStatus === 0 ? '鏈悓鎰�' : '宸插悓鎰�' }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="鎿嶄綔"
+            min-width="120"
+          >
+            <template slot-scope="scope">
+              <el-button @click="handleClick(scope.row)" type="text" size="small">缂栬緫</el-button>
+              <!-- <el-button type="text" size="small">缂栬緫</el-button> -->
+            </template>
+          </el-table-column>
+        </el-table>
+        <div>
+          <el-pagination
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            :current-page="currentPage"
+            :page-sizes="[100, 200, 300, 400]"
+            :page-size="100"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="400">
+          </el-pagination>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      currentPage: 1,
+      searchData: {
+        keyword: ''
+      },
+      personnerlTable: [
+        {
+          roleName: '寮犱笁',
+          rolePermissions: '绠$悊鍛�',
+          age: '18',
+          creatTime: '2023-07-07',
+          phone: '138888888',
+          mailbox: '138888888@qq.com',
+          incumbentStatus: '1'
+        }
+      ]
+    }
+  },
+  methods: {
+    handleSizeChange(val) {
+      console.log(`姣忛〉 ${val} 鏉)
+    },
+    handleCurrentChange(val) {
+      console.log(`褰撳墠椤�: ${val}`)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.personnel-main{
+  // width: 100%;
+  // height: 100%;
+  .page-header-search{
+    background: #fff;
+    display: flex;
+    justify-content: space-between;
+    padding: 0 24px 12px 24px;
+     .search-bar{
+      .el-form{
+       .el-form-item{
+         margin-bottom: 0px !important;
+         .el-input{
+          width: 360px;
+         }
+        }
+      }
+    }
+  }
+  .personner-table{
+    background: #fff;
+    padding: 20px 20px 10px 20px;
+    >div:nth-child(2){
+      display: flex;
+      justify-content: end;
+      margin: 10px 0;
+    }
+  }
+}
+</style>
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
new file mode 100644
index 0000000..3b2ce0d
--- /dev/null
+++ b/src/views/login/index.vue
@@ -0,0 +1,241 @@
+<template>
+  <div class="login-container">
+    <el-form ref="loginForm" :model="loginForm" class="login-form" auto-complete="on" label-position="left">
+    <!-- <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left"> -->
+      <!-- form 琛ㄥ崟鏍¢獙 -->
+      <div class="title-container">
+        <h3 class="title">鐧� 褰�</h3>
+      </div>
+
+      <el-form-item prop="username">
+        <span class="svg-container">
+          <svg-icon icon-class="user" />
+        </span>
+        <el-input
+          ref="username"
+          v-model="loginForm.username"
+          placeholder="Username"
+          name="username"
+          type="text"
+          tabindex="1"
+          auto-complete="on"
+        />
+      </el-form-item>
+
+      <el-form-item prop="password">
+        <span class="svg-container">
+          <svg-icon icon-class="password" />
+        </span>
+        <el-input
+          :key="passwordType"
+          ref="password"
+          v-model="loginForm.password"
+          :type="passwordType"
+          placeholder="Password"
+          name="password"
+          tabindex="2"
+          auto-complete="on"
+          @keyup.enter.native="handleLogin"
+        />
+        <span class="show-pwd" @click="showPwd">
+          <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
+        </span>
+      </el-form-item>
+
+      <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">Login</el-button>
+      <div class="tips">
+        <span style="margin-right:20px;">username: admin</span>
+        <span> password: any</span>
+      </div>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import { validUsername } from '@/utils/validate'
+
+export default {
+  name: 'Login',
+  data() {
+    const validateUsername = (rule, value, callback) => {
+      if (!validUsername(value)) {
+        callback(new Error('Please enter the correct user name'))
+      } else {
+        callback()
+      }
+    }
+    const validatePassword = (rule, value, callback) => {
+      if (value.length < 6) {
+        callback(new Error('The password can not be less than 6 digits'))
+      } else {
+        callback()
+      }
+    }
+    return {
+      loginForm: {
+        username: '123456',
+        password: '123456'
+      },
+      loginRules: {
+        username: [{ required: true, trigger: 'blur', validator: validateUsername }],
+        password: [{ required: true, trigger: 'blur', validator: validatePassword }]
+      },
+      loading: false,
+      passwordType: 'password',
+      redirect: undefined
+    }
+  },
+  watch: {
+    $route: {
+      handler: function(route) {
+        this.redirect = route.query && route.query.redirect
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    showPwd() {
+      if (this.passwordType === 'password') {
+        this.passwordType = ''
+      } else {
+        this.passwordType = 'password'
+      }
+      this.$nextTick(() => {
+        this.$refs.password.focus()
+      })
+    },
+    handleLogin() {
+      this.$refs.loginForm.validate(valid => {
+        if (valid) {
+          this.loading = true
+          this.$store.dispatch('user/login', this.loginForm).then(() => {
+            this.$router.push({ path: this.redirect || '/' })
+            this.loading = false
+          }).catch(() => {
+            this.loading = false
+          })
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+/* 淇input 鑳屾櫙涓嶅崗璋� 鍜屽厜鏍囧彉鑹� */
+/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
+
+$bg:#283443;
+$light_gray:#fff;
+$cursor: #fff;
+
+@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
+  .login-container .el-input input {
+    color: $cursor;
+  }
+}
+
+/* reset element-ui css */
+.login-container {
+  .el-input {
+    display: inline-block;
+    height: 47px;
+    width: 85%;
+
+    input {
+      background: transparent;
+      border: 0px;
+      -webkit-appearance: none;
+      border-radius: 0px;
+      padding: 12px 5px 12px 15px;
+      color: $light_gray;
+      height: 47px;
+      caret-color: $cursor;
+
+      &:-webkit-autofill {
+        box-shadow: 0 0 0px 1000px $bg inset !important;
+        -webkit-text-fill-color: $cursor !important;
+      }
+    }
+  }
+
+  .el-form-item {
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    background: rgba(0, 0, 0, 0.1);
+    border-radius: 5px;
+    color: #454545;
+  }
+}
+</style>
+
+<style lang="scss" scoped>
+$bg:#2d3a4b;
+$dark_gray:#889aa4;
+$light_gray:#eee;
+
+.login-container {
+  min-height: 100%;
+  width: 100%;
+  background:url('../../assets/404_images/backgroud.png') no-repeat;
+  background-size: 100vw 100vh;
+  overflow: hidden;
+  .login-form {
+    position: relative;
+    width: 520px;
+    max-width: 100%;
+    padding: 0 35px ;
+    margin: 0 auto;
+    overflow: hidden;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+
+  }
+
+  .tips {
+    font-size: 14px;
+    color: #fff;
+    margin-bottom: 10px;
+
+    span {
+      &:first-of-type {
+        margin-right: 16px;
+      }
+    }
+  }
+
+  .svg-container {
+    padding: 6px 5px 6px 15px;
+    color: $dark_gray;
+    vertical-align: middle;
+    width: 30px;
+    display: inline-block;
+  }
+
+  .title-container {
+    position: relative;
+
+    .title {
+      font-size: 26px;
+      color: $light_gray;
+      margin: 0px auto 40px auto;
+      text-align: center;
+      font-weight: bold;
+    }
+  }
+
+  .show-pwd {
+    position: absolute;
+    right: 10px;
+    top: 7px;
+    font-size: 16px;
+    color: $dark_gray;
+    cursor: pointer;
+    user-select: none;
+  }
+}
+</style>
diff --git a/src/views/message/message/index.vue b/src/views/message/message/index.vue
new file mode 100644
index 0000000..ba69703
--- /dev/null
+++ b/src/views/message/message/index.vue
@@ -0,0 +1,13 @@
+<template>
+  <div>娑堟伅</div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/views/message/toDo/index.vue b/src/views/message/toDo/index.vue
new file mode 100644
index 0000000..135a43e
--- /dev/null
+++ b/src/views/message/toDo/index.vue
@@ -0,0 +1,13 @@
+<template>
+  <div>寰呭姙</div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/views/personal/myBusiness/index.vue b/src/views/personal/myBusiness/index.vue
new file mode 100644
index 0000000..32bcf78
--- /dev/null
+++ b/src/views/personal/myBusiness/index.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="My-main">
+    <div class="content-main"></div>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/views/personal/myInformation/index.vue b/src/views/personal/myInformation/index.vue
new file mode 100644
index 0000000..a55172f
--- /dev/null
+++ b/src/views/personal/myInformation/index.vue
@@ -0,0 +1,194 @@
+<template>
+  <div class="my-main content-main">
+    <div class="my-info">
+      <div class="tips">
+        <span />
+        <div>鍩烘湰淇℃伅</div>
+      </div>
+      <el-table
+        ref="infoTable"
+        :header-cell-style="{border:'0px',background:'#f5f7fa',color:'#606266',boxShadow: 'inset 0 1px 0 #ebeef5'}"
+        :data="infoTable"
+        style="width: 100%"
+      >
+        <el-table-column
+          prop="username"
+          label="鐢ㄦ埛鍚�"
+          width="200"
+        />
+        <el-table-column
+          prop="name"
+          label="濮撳悕"
+          width="460"
+        >
+          <template slot-scope="scope">
+            <el-tag type="info"><i class="el-icon-info" :style="{marginRight:'4px'}" />{{ scope.row.name }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="cellPhone"
+          label="鐢佃瘽鍙风爜"
+          width="400"
+        />
+        <el-table-column
+          prop="email"
+          label="閭"
+          width="300"
+        />
+        <el-table-column
+          prop="signature"
+          label="绛惧悕"
+          width="120"
+          :filters="[{ text: 0, value: 0 }, { text: 1, value: 1 }]"
+          :filter-method="filterTag"
+          filter-placement="bottom-end"
+        />
+        <el-table-column
+          label="鎿嶄綔"
+          width="120"
+        >
+          <template slot-scope="scope">
+            <el-button @click="handleClick(scope.row)" type="text" size="small">缂栬緫</el-button>
+            <!-- <el-button type="text" size="small">缂栬緫</el-button> -->
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <div class="my-business">
+      <div class="tips">
+        <span />
+        <div>浼佷笟淇℃伅</div>
+      </div>
+      <el-table
+        ref="businessTable"
+        :header-cell-style="{border:'0px',background:'#f5f7fa',color:'#606266',boxShadow: 'inset 0 1px 0 #ebeef5'}"
+        :data="businessTable"
+        style="width: 100%"
+      >
+        <el-table-column
+          prop="businessSmallName"
+          label="浼佷笟绠�绉�"
+          width="200"
+        />
+        <el-table-column
+          prop="businessBigName"
+          label="浼佷笟鍚嶇О"
+          width="460"
+        />
+        <el-table-column
+          label="浼佷笟鑱旂郴浜�"
+          width="400"
+        >
+          <template slot-scope="scope">
+            <el-tag type="info"><i class="el-icon-info" :style="{marginRight:'4px'}"/>{{ scope.row.businessContact }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="businessPhone"
+          label="浼佷笟鑱旂郴鍙风爜"
+          width="300"
+        />
+        <el-table-column
+          prop="businessStatus"
+          label="鍔犲叆鐘舵��"
+          width="120"
+          :filters="[{ text: 0, value: 0 }, { text: 1, value: 1 }]"
+          :filter-method="filterTag"
+          filter-placement="bottom-end"
+        >
+          <template slot-scope="scope">
+            <el-tag
+              :type="scope.row.businessStatus === 0 ? 'primary' : 'success'"
+              disable-transitions
+            >{{ scope.row.businessStatus === 0 ? '鏈悓鎰�' : '宸插悓鎰�' }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="鎿嶄綔"
+          width="120"
+        >
+          <template slot-scope="scope">
+            <el-button @click="handleClick(scope.row)" type="text" size="small">閫�鍑�</el-button>
+            <!-- <el-button type="text" size="small">缂栬緫</el-button> -->
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      infoTable: [
+        {
+          username: 'jack',
+          name: '寮犱笁',
+          cellPhone: '138888888',
+          email: '138888888@qq.com',
+          signature: '鎴戞槸娉曞鐙傚緬'
+        }
+
+      ],
+      businessTable: [
+        {
+          businessSmallName: '涓ぉ',
+          businessBigName: '涓ぉ绉戞妧',
+          businessContact: 'jack',
+          businessPhone: '1388888888',
+          businessStatus: 1
+        }
+      ]
+    }
+  },
+  created() {
+  },
+  methods: {
+    clearFilter() {
+      // 娓呴櫎鎵�鏈夎繃婊ゅ櫒
+      this.$refs.businessTable.clearFilter()
+    },
+    filterTag(value, row) {
+      console.log(value, row)
+      return row.businessStatus === value
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.my-main{
+  .my-info,.my-business{
+    background: #fff;
+    padding: 20px 20px 10px 20px;
+    margin: 0;
+    margin-bottom: 12px;
+    .tips{
+      display: flex;
+      height: 24px;
+      align-items: center;
+      font-size: 16px;
+      margin-bottom: 12px;
+      span{
+        display: inline-block;
+        margin-right: 10px;
+        width: 4px;
+        height: 16px;
+        background: #0077DB;
+      }
+      div{
+        height: 100%;
+        line-height: 26px;
+      }
+
+    }
+  }
+  .my-info{
+
+  }
+  .my-business{
+
+  }
+}
+</style>
diff --git a/src/views/rawMaterials/checkTheReport/index.vue b/src/views/rawMaterials/checkTheReport/index.vue
new file mode 100644
index 0000000..d08ff60
--- /dev/null
+++ b/src/views/rawMaterials/checkTheReport/index.vue
@@ -0,0 +1,13 @@
+<template>
+  <div>妫�娴嬫姤鍛�</div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/views/rawMaterials/nonConformanceReview/index.vue b/src/views/rawMaterials/nonConformanceReview/index.vue
new file mode 100644
index 0000000..23f8a41
--- /dev/null
+++ b/src/views/rawMaterials/nonConformanceReview/index.vue
@@ -0,0 +1,13 @@
+<template>
+  <div>涓嶅悎鏍艰瘎瀹�</div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/views/rawMaterials/nonConformingFeedback/index.vue b/src/views/rawMaterials/nonConformingFeedback/index.vue
new file mode 100644
index 0000000..6733e19
--- /dev/null
+++ b/src/views/rawMaterials/nonConformingFeedback/index.vue
@@ -0,0 +1,13 @@
+<template>
+  <div>涓嶅悎鏍煎弽棣�</div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/views/rawMaterials/passRateStatistics/index.vue b/src/views/rawMaterials/passRateStatistics/index.vue
new file mode 100644
index 0000000..7107345
--- /dev/null
+++ b/src/views/rawMaterials/passRateStatistics/index.vue
@@ -0,0 +1,13 @@
+<template>
+  <div>鍚堟牸鐜囩粺璁�</div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/views/rawMaterials/planAssignments/index.vue b/src/views/rawMaterials/planAssignments/index.vue
new file mode 100644
index 0000000..99c7493
--- /dev/null
+++ b/src/views/rawMaterials/planAssignments/index.vue
@@ -0,0 +1,13 @@
+<template>
+  <div>home</div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/views/rawMaterials/print/index.vue b/src/views/rawMaterials/print/index.vue
new file mode 100644
index 0000000..99c7493
--- /dev/null
+++ b/src/views/rawMaterials/print/index.vue
@@ -0,0 +1,13 @@
+<template>
+  <div>home</div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/views/rawMaterials/rawMaterialInspection/index.vue b/src/views/rawMaterials/rawMaterialInspection/index.vue
new file mode 100644
index 0000000..1dc8982
--- /dev/null
+++ b/src/views/rawMaterials/rawMaterialInspection/index.vue
@@ -0,0 +1,13 @@
+<template>
+  <div>鍘熸潗鏂欐楠�</div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/views/rawMaterials/reportAuditing/index.vue b/src/views/rawMaterials/reportAuditing/index.vue
new file mode 100644
index 0000000..f409c24
--- /dev/null
+++ b/src/views/rawMaterials/reportAuditing/index.vue
@@ -0,0 +1,13 @@
+<template>
+  <div>鎶ュ憡瀹℃牳</div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/views/rawMaterials/reportForInspection/index.vue b/src/views/rawMaterials/reportForInspection/index.vue
new file mode 100644
index 0000000..99c7493
--- /dev/null
+++ b/src/views/rawMaterials/reportForInspection/index.vue
@@ -0,0 +1,13 @@
+<template>
+  <div>home</div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/views/standardLibrary/index.vue b/src/views/standardLibrary/index.vue
new file mode 100644
index 0000000..abd9871
--- /dev/null
+++ b/src/views/standardLibrary/index.vue
@@ -0,0 +1,238 @@
+<template>
+  <div class="standard-library-main">
+    <div class="content-main">
+      <div class="library-bom">
+        <el-input
+          v-model="filterText"
+          placeholder="杈撳叆鍏抽敭瀛楄繘琛岃繃婊�"
+        />
+        <el-tree
+          ref="tree"
+          class="filter-tree"
+          :data="data"
+          :props="defaultProps"
+          default-expand-all
+          :filter-node-method="filterNode"
+        >
+        </el-tree>
+      </div>
+      <div class="library-table">
+        <div class="table-header">
+          <div class="search-bar">
+            <el-form ref="form" inline="true" :model="searchData">
+              <el-form-item>
+                <el-input
+                  placeholder="璇疯緭鍏ヤ汉鍛樺悕绉�/鍘熸潗鏂欏悕绉�"
+                  v-model="searchData.keyword"
+                >
+                  <i slot="prefix" class="el-input__icon el-icon-search" />
+                </el-input>
+              </el-form-item>
+              <el-form-item>
+                <el-button type="primary">鏌ヨ</el-button>
+                <el-button type="primary" plain>閲嶇疆</el-button>
+                <!-- <el-button type="text">楂樼骇鎼滅储<i class="el-icon-arrow-down el-icon--right" /></el-button> -->
+              </el-form-item>
+            </el-form>
+          </div>
+          <div class="serve-btn">
+            <el-button type="primary" icon="el-icon-plus">鏂板浜哄憳</el-button>
+          </div>
+        </div>
+        <div class="table-box">
+          <el-table
+            ref="personnerlTable"
+
+            :cell-style="{textAlign: 'center'}"
+            :header-cell-style="{border:'0px',background:'#f5f7fa',color:'#606266',boxShadow: 'inset 0 1px 0 #ebeef5',textAlign: 'center'}"
+            :data="personnerlTable"
+            style="width: 100%"
+          >
+            <el-table-column
+              prop="roleName"
+              label="瑙掕壊鍚嶇О"
+              min-width="120"
+            />
+            <el-table-column
+              prop="rolePermissions"
+              label="瑙掕壊鏉冮檺"
+              min-width="120"
+            />
+            <el-table-column
+              prop="age"
+              label="骞撮緞"
+              min-width="150"
+            />
+            <el-table-column
+              prop="creatTime"
+              label="鍒涘缓鏃堕棿"
+              min-width="180"
+            />
+            <el-table-column
+              prop="phone"
+              label="鐢佃瘽"
+              min-width="200"
+            />
+            <el-table-column
+              prop="mailbox"
+              label="閭"
+              min-width="200"
+            />
+            <el-table-column
+              prop="incumbentStatus"
+              label="鍦ㄨ亴鐘舵��"
+              min-width="120"
+              :filters="[{ text: 0, value: 0 }, { text: 1, value: 1 }]"
+              :filter-method="filterTag"
+              filter-placement="bottom-end"
+            >
+              <template slot-scope="scope">
+                <el-tag
+                  :type="scope.row.businessStatus === 0 ? 'primary' : 'success'"
+                  disable-transitions
+                >{{ scope.row.businessStatus === 0 ? '鏈悓鎰�' : '宸插悓鎰�' }}</el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column
+              label="鎿嶄綔"
+              min-width="120"
+            >
+              <template slot-scope="scope">
+                <el-button @click="handleClick(scope.row)" type="text" size="small">缂栬緫</el-button>
+                <!-- <el-button type="text" size="small">缂栬緫</el-button> -->
+              </template>
+            </el-table-column>
+          </el-table>
+          <div>
+            <el-pagination
+              @size-change="handleSizeChange"
+              @current-change="handleCurrentChange"
+              :current-page="currentPage"
+              :page-sizes="[100, 200, 300, 400]"
+              :page-size="100"
+              layout="total, sizes, prev, pager, next, jumper"
+              :total="400">
+            </el-pagination>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      data: [{
+        id: 1,
+        label: '涓�绾� 1',
+        children: [{
+          id: 4,
+          label: '浜岀骇 1-1',
+          children: [{
+            id: 9,
+            label: '涓夌骇 1-1-1'
+          }, {
+            id: 10,
+            label: '涓夌骇 1-1-2'
+          }]
+        }]
+      }],
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      },
+      searchData: {
+        keyword: ''
+      }
+    }
+  },
+  watch: {
+    filterText(val) {
+      this.$refs.tree.filter(val)
+    }
+  },
+  methods: {
+    filterNode(value, data) {
+      if (!value) return true
+      return data.label.indexOf(value) !== -1
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.standard-library-main{
+  width: 100%;
+  height: 100%;
+// 椤甸潰涓績鍐呭鍖哄煙
+  .content-main{
+    display: flex;
+    height: 100%;
+    min-height: calc(100vh - 88px);
+    padding: 15px;
+    >div{
+      padding: 20px;
+      background: #fff;
+    }
+    .library-bom{
+      flex: 2;
+      margin-right: 12px;
+      .el-tree {
+        margin-top: 12px;
+        ::v-deep .el-tree-node__content{
+          height: 24px !important;
+          font-size: 14px;
+          display: inline-block !important;
+          padding: 2px;
+          color: #333;
+        }
+        ::v-deep .el-tree-node__content:hover{
+          background: rgba(58,124,253,0.1) !important;
+          // opacity: 0.31;
+          border-radius: 3px;
+          color: #333 !important;
+        }
+        ::v-deep .el-tree-node:focus>.el-tree-node__content{
+          background: rgba(58,124,253,0.1) !important; 
+          // opacity: 0.31;
+          border-radius: 3px;
+          color: #333 !important;
+        }
+      }
+    }
+    .library-table{
+      flex: 8;
+      margin-left: 12px;
+      display: flex;
+      flex-direction: column;
+
+      .table-header{
+        display: flex;
+        justify-content: space-between;
+        .el-form-item{
+          margin-bottom: 30px !important;
+        }
+      }
+      .table-box{
+          flex: 1;
+          background: #fff;
+          // padding: 20px 20px 10px 20px;
+          display: flex;
+          flex-direction: column;
+          .el-table {
+            flex: 1;
+          }
+          >div:nth-child(2){
+            display: flex;
+            justify-content: end;
+            margin: 10px 0;
+            // ::v-deep 
+          }
+        
+      }
+    }
+  }
+}
+</style>
diff --git a/tests/unit/.eslintrc.js b/tests/unit/.eslintrc.js
new file mode 100644
index 0000000..958d51b
--- /dev/null
+++ b/tests/unit/.eslintrc.js
@@ -0,0 +1,5 @@
+module.exports = {
+  env: {
+    jest: true
+  }
+}
diff --git a/tests/unit/components/Breadcrumb.spec.js b/tests/unit/components/Breadcrumb.spec.js
new file mode 100644
index 0000000..1d94c8f
--- /dev/null
+++ b/tests/unit/components/Breadcrumb.spec.js
@@ -0,0 +1,98 @@
+import { mount, createLocalVue } from '@vue/test-utils'
+import VueRouter from 'vue-router'
+import ElementUI from 'element-ui'
+import Breadcrumb from '@/components/Breadcrumb/index.vue'
+
+const localVue = createLocalVue()
+localVue.use(VueRouter)
+localVue.use(ElementUI)
+
+const routes = [
+  {
+    path: '/',
+    name: 'home',
+    children: [{
+      path: 'dashboard',
+      name: 'dashboard'
+    }]
+  },
+  {
+    path: '/menu',
+    name: 'menu',
+    children: [{
+      path: 'menu1',
+      name: 'menu1',
+      meta: { title: 'menu1' },
+      children: [{
+        path: 'menu1-1',
+        name: 'menu1-1',
+        meta: { title: 'menu1-1' }
+      },
+      {
+        path: 'menu1-2',
+        name: 'menu1-2',
+        redirect: 'noredirect',
+        meta: { title: 'menu1-2' },
+        children: [{
+          path: 'menu1-2-1',
+          name: 'menu1-2-1',
+          meta: { title: 'menu1-2-1' }
+        },
+        {
+          path: 'menu1-2-2',
+          name: 'menu1-2-2'
+        }]
+      }]
+    }]
+  }]
+
+const router = new VueRouter({
+  routes
+})
+
+describe('Breadcrumb.vue', () => {
+  const wrapper = mount(Breadcrumb, {
+    localVue,
+    router
+  })
+  it('dashboard', () => {
+    router.push('/dashboard')
+    const len = wrapper.findAll('.el-breadcrumb__inner').length
+    expect(len).toBe(1)
+  })
+  it('normal route', () => {
+    router.push('/menu/menu1')
+    const len = wrapper.findAll('.el-breadcrumb__inner').length
+    expect(len).toBe(2)
+  })
+  it('nested route', () => {
+    router.push('/menu/menu1/menu1-2/menu1-2-1')
+    const len = wrapper.findAll('.el-breadcrumb__inner').length
+    expect(len).toBe(4)
+  })
+  it('no meta.title', () => {
+    router.push('/menu/menu1/menu1-2/menu1-2-2')
+    const len = wrapper.findAll('.el-breadcrumb__inner').length
+    expect(len).toBe(3)
+  })
+  // it('click link', () => {
+  //   router.push('/menu/menu1/menu1-2/menu1-2-2')
+  //   const breadcrumbArray = wrapper.findAll('.el-breadcrumb__inner')
+  //   const second = breadcrumbArray.at(1)
+  //   console.log(breadcrumbArray)
+  //   const href = second.find('a').attributes().href
+  //   expect(href).toBe('#/menu/menu1')
+  // })
+  // it('noRedirect', () => {
+  //   router.push('/menu/menu1/menu1-2/menu1-2-1')
+  //   const breadcrumbArray = wrapper.findAll('.el-breadcrumb__inner')
+  //   const redirectBreadcrumb = breadcrumbArray.at(2)
+  //   expect(redirectBreadcrumb.contains('a')).toBe(false)
+  // })
+  it('last breadcrumb', () => {
+    router.push('/menu/menu1/menu1-2/menu1-2-1')
+    const breadcrumbArray = wrapper.findAll('.el-breadcrumb__inner')
+    const redirectBreadcrumb = breadcrumbArray.at(3)
+    expect(redirectBreadcrumb.contains('a')).toBe(false)
+  })
+})
diff --git a/tests/unit/components/Hamburger.spec.js b/tests/unit/components/Hamburger.spec.js
new file mode 100644
index 0000000..01ea303
--- /dev/null
+++ b/tests/unit/components/Hamburger.spec.js
@@ -0,0 +1,18 @@
+import { shallowMount } from '@vue/test-utils'
+import Hamburger from '@/components/Hamburger/index.vue'
+describe('Hamburger.vue', () => {
+  it('toggle click', () => {
+    const wrapper = shallowMount(Hamburger)
+    const mockFn = jest.fn()
+    wrapper.vm.$on('toggleClick', mockFn)
+    wrapper.find('.hamburger').trigger('click')
+    expect(mockFn).toBeCalled()
+  })
+  it('prop isActive', () => {
+    const wrapper = shallowMount(Hamburger)
+    wrapper.setProps({ isActive: true })
+    expect(wrapper.contains('.is-active')).toBe(true)
+    wrapper.setProps({ isActive: false })
+    expect(wrapper.contains('.is-active')).toBe(false)
+  })
+})
diff --git a/tests/unit/components/SvgIcon.spec.js b/tests/unit/components/SvgIcon.spec.js
new file mode 100644
index 0000000..31467a9
--- /dev/null
+++ b/tests/unit/components/SvgIcon.spec.js
@@ -0,0 +1,22 @@
+import { shallowMount } from '@vue/test-utils'
+import SvgIcon from '@/components/SvgIcon/index.vue'
+describe('SvgIcon.vue', () => {
+  it('iconClass', () => {
+    const wrapper = shallowMount(SvgIcon, {
+      propsData: {
+        iconClass: 'test'
+      }
+    })
+    expect(wrapper.find('use').attributes().href).toBe('#icon-test')
+  })
+  it('className', () => {
+    const wrapper = shallowMount(SvgIcon, {
+      propsData: {
+        iconClass: 'test'
+      }
+    })
+    expect(wrapper.classes().length).toBe(1)
+    wrapper.setProps({ className: 'test' })
+    expect(wrapper.classes().includes('test')).toBe(true)
+  })
+})
diff --git a/tests/unit/utils/formatTime.spec.js b/tests/unit/utils/formatTime.spec.js
new file mode 100644
index 0000000..24e165b
--- /dev/null
+++ b/tests/unit/utils/formatTime.spec.js
@@ -0,0 +1,30 @@
+import { formatTime } from '@/utils/index.js'
+
+describe('Utils:formatTime', () => {
+  const d = new Date('2018-07-13 17:54:01') // "2018-07-13 17:54:01"
+  const retrofit = 5 * 1000
+
+  it('ten digits timestamp', () => {
+    expect(formatTime((d / 1000).toFixed(0))).toBe('7鏈�13鏃�17鏃�54鍒�')
+  })
+  it('test now', () => {
+    expect(formatTime(+new Date() - 1)).toBe('鍒氬垰')
+  })
+  it('less two minute', () => {
+    expect(formatTime(+new Date() - 60 * 2 * 1000 + retrofit)).toBe('2鍒嗛挓鍓�')
+  })
+  it('less two hour', () => {
+    expect(formatTime(+new Date() - 60 * 60 * 2 * 1000 + retrofit)).toBe('2灏忔椂鍓�')
+  })
+  it('less one day', () => {
+    expect(formatTime(+new Date() - 60 * 60 * 24 * 1 * 1000)).toBe('1澶╁墠')
+  })
+  it('more than one day', () => {
+    expect(formatTime(d)).toBe('7鏈�13鏃�17鏃�54鍒�')
+  })
+  it('format', () => {
+    expect(formatTime(d, '{y}-{m}-{d} {h}:{i}')).toBe('2018-07-13 17:54')
+    expect(formatTime(d, '{y}-{m}-{d}')).toBe('2018-07-13')
+    expect(formatTime(d, '{y}/{m}/{d} {h}-{i}')).toBe('2018/07/13 17-54')
+  })
+})
diff --git a/tests/unit/utils/param2Obj.spec.js b/tests/unit/utils/param2Obj.spec.js
new file mode 100644
index 0000000..e106ed8
--- /dev/null
+++ b/tests/unit/utils/param2Obj.spec.js
@@ -0,0 +1,14 @@
+import { param2Obj } from '@/utils/index.js'
+describe('Utils:param2Obj', () => {
+  const url = 'https://github.com/PanJiaChen/vue-element-admin?name=bill&age=29&sex=1&field=dGVzdA==&key=%E6%B5%8B%E8%AF%95'
+
+  it('param2Obj test', () => {
+    expect(param2Obj(url)).toEqual({
+      name: 'bill',
+      age: '29',
+      sex: '1',
+      field: window.btoa('test'),
+      key: '娴嬭瘯'
+    })
+  })
+})
diff --git a/tests/unit/utils/parseTime.spec.js b/tests/unit/utils/parseTime.spec.js
new file mode 100644
index 0000000..56045af
--- /dev/null
+++ b/tests/unit/utils/parseTime.spec.js
@@ -0,0 +1,35 @@
+import { parseTime } from '@/utils/index.js'
+
+describe('Utils:parseTime', () => {
+  const d = new Date('2018-07-13 17:54:01') // "2018-07-13 17:54:01"
+  it('timestamp', () => {
+    expect(parseTime(d)).toBe('2018-07-13 17:54:01')
+  })
+  it('timestamp string', () => {
+    expect(parseTime((d + ''))).toBe('2018-07-13 17:54:01')
+  })
+  it('ten digits timestamp', () => {
+    expect(parseTime((d / 1000).toFixed(0))).toBe('2018-07-13 17:54:01')
+  })
+  it('new Date', () => {
+    expect(parseTime(new Date(d))).toBe('2018-07-13 17:54:01')
+  })
+  it('format', () => {
+    expect(parseTime(d, '{y}-{m}-{d} {h}:{i}')).toBe('2018-07-13 17:54')
+    expect(parseTime(d, '{y}-{m}-{d}')).toBe('2018-07-13')
+    expect(parseTime(d, '{y}/{m}/{d} {h}-{i}')).toBe('2018/07/13 17-54')
+  })
+  it('get the day of the week', () => {
+    expect(parseTime(d, '{a}')).toBe('浜�') // 鏄熸湡浜�
+  })
+  it('get the day of the week', () => {
+    expect(parseTime(+d + 1000 * 60 * 60 * 24 * 2, '{a}')).toBe('鏃�') // 鏄熸湡鏃�
+  })
+  it('empty argument', () => {
+    expect(parseTime()).toBeNull()
+  })
+
+  it('null', () => {
+    expect(parseTime(null)).toBeNull()
+  })
+})
diff --git a/tests/unit/utils/validate.spec.js b/tests/unit/utils/validate.spec.js
new file mode 100644
index 0000000..f774905
--- /dev/null
+++ b/tests/unit/utils/validate.spec.js
@@ -0,0 +1,17 @@
+import { validUsername, isExternal } from '@/utils/validate.js'
+
+describe('Utils:validate', () => {
+  it('validUsername', () => {
+    expect(validUsername('admin')).toBe(true)
+    expect(validUsername('editor')).toBe(true)
+    expect(validUsername('xxxx')).toBe(false)
+  })
+  it('isExternal', () => {
+    expect(isExternal('https://github.com/PanJiaChen/vue-element-admin')).toBe(true)
+    expect(isExternal('http://github.com/PanJiaChen/vue-element-admin')).toBe(true)
+    expect(isExternal('github.com/PanJiaChen/vue-element-admin')).toBe(false)
+    expect(isExternal('/dashboard')).toBe(false)
+    expect(isExternal('./dashboard')).toBe(false)
+    expect(isExternal('dashboard')).toBe(false)
+  })
+})

--
Gitblit v1.9.3