李志伟 3 anos atrás
pai
commit
2a704710d0
99 arquivos alterados com 15902 adições e 0 exclusões
  1. 14
    0
      .editorconfig
  2. 5
    0
      .env.development
  3. 6
    0
      .env.production
  4. 8
    0
      .env.staging
  5. 4
    0
      .eslintignore
  6. 198
    0
      .eslintrc.js
  7. 16
    0
      .gitignore
  8. 5
    0
      .travis.yml
  9. 21
    0
      LICENSE
  10. 111
    0
      README-zh.md
  11. 14
    0
      babel.config.js
  12. 35
    0
      build/index.js
  13. 24
    0
      jest.config.js
  14. 9
    0
      jsconfig.json
  15. 57
    0
      mock/index.js
  16. 81
    0
      mock/mock-server.js
  17. 29
    0
      mock/table.js
  18. 84
    0
      mock/user.js
  19. 25
    0
      mock/utils.js
  20. 66
    0
      package.json
  21. 8
    0
      postcss.config.js
  22. BIN
      public/favicon.ico
  23. 17
    0
      public/index.html
  24. 23
    0
      src/App.vue
  25. 94
    0
      src/api/characterLib.js
  26. 38
    0
      src/api/question.js
  27. 9
    0
      src/api/user.js
  28. BIN
      src/assets/404_images/404.png
  29. BIN
      src/assets/404_images/404_cloud.png
  30. 81
    0
      src/components/AddAnswer/index.vue
  31. 78
    0
      src/components/Breadcrumb/index.vue
  32. 71
    0
      src/components/CharacterResult/edit.vue
  33. 75
    0
      src/components/CharacterResult/index.vue
  34. 44
    0
      src/components/Hamburger/index.vue
  35. 62
    0
      src/components/SvgIcon/index.vue
  36. 90
    0
      src/components/TagComponents/index.vue
  37. 34
    0
      src/components/UploadImage/index.vue
  38. 9
    0
      src/icons/index.js
  39. 1
    0
      src/icons/svg/dashboard.svg
  40. 1
    0
      src/icons/svg/example.svg
  41. 1
    0
      src/icons/svg/eye-open.svg
  42. 1
    0
      src/icons/svg/eye.svg
  43. 1
    0
      src/icons/svg/form.svg
  44. 1
    0
      src/icons/svg/link.svg
  45. 1
    0
      src/icons/svg/nested.svg
  46. 1
    0
      src/icons/svg/password.svg
  47. 1
    0
      src/icons/svg/table.svg
  48. 1
    0
      src/icons/svg/tree.svg
  49. 1
    0
      src/icons/svg/user.svg
  50. 22
    0
      src/icons/svgo.yml
  51. 40
    0
      src/layout/components/AppMain.vue
  52. 139
    0
      src/layout/components/Navbar.vue
  53. 26
    0
      src/layout/components/Sidebar/FixiOSBug.js
  54. 41
    0
      src/layout/components/Sidebar/Item.vue
  55. 43
    0
      src/layout/components/Sidebar/Link.vue
  56. 82
    0
      src/layout/components/Sidebar/Logo.vue
  57. 95
    0
      src/layout/components/Sidebar/SidebarItem.vue
  58. 56
    0
      src/layout/components/Sidebar/index.vue
  59. 3
    0
      src/layout/components/index.js
  60. 93
    0
      src/layout/index.vue
  61. 45
    0
      src/layout/mixin/ResizeHandler.js
  62. 43
    0
      src/main.js
  63. 61
    0
      src/permission.js
  64. 136
    0
      src/router/index.js
  65. 16
    0
      src/settings.js
  66. 8
    0
      src/store/getters.js
  67. 20
    0
      src/store/index.js
  68. 49
    0
      src/store/modules/app.js
  69. 32
    0
      src/store/modules/settings.js
  70. 68
    0
      src/store/modules/user.js
  71. 49
    0
      src/styles/element-ui.scss
  72. 65
    0
      src/styles/index.scss
  73. 28
    0
      src/styles/mixin.scss
  74. 226
    0
      src/styles/sidebar.scss
  75. 48
    0
      src/styles/transition.scss
  76. 25
    0
      src/styles/variables.scss
  77. 25
    0
      src/utils/auth.js
  78. 10
    0
      src/utils/get-page-title.js
  79. 117
    0
      src/utils/index.js
  80. 74
    0
      src/utils/request.js
  81. 20
    0
      src/utils/validate.js
  82. 228
    0
      src/views/404.vue
  83. 52
    0
      src/views/characterLibManage/add.vue
  84. 86
    0
      src/views/characterLibManage/edit.vue
  85. 82
    0
      src/views/characterLibManage/index.vue
  86. 30
    0
      src/views/dashboard/index.vue
  87. 257
    0
      src/views/login/index.vue
  88. 112
    0
      src/views/questionList/edit.vue
  89. 139
    0
      src/views/questionList/index.vue
  90. 5
    0
      tests/unit/.eslintrc.js
  91. 70
    0
      tests/unit/components/Breadcrumb.spec.js
  92. 18
    0
      tests/unit/components/Hamburger.spec.js
  93. 22
    0
      tests/unit/components/SvgIcon.spec.js
  94. 30
    0
      tests/unit/utils/formatTime.spec.js
  95. 14
    0
      tests/unit/utils/param2Obj.spec.js
  96. 35
    0
      tests/unit/utils/parseTime.spec.js
  97. 17
    0
      tests/unit/utils/validate.spec.js
  98. 129
    0
      vue.config.js
  99. 11215
    0
      yarn.lock

+ 14
- 0
.editorconfig Ver arquivo

@@ -0,0 +1,14 @@
1
+# http://editorconfig.org
2
+root = true
3
+
4
+[*]
5
+charset = utf-8
6
+indent_style = space
7
+indent_size = 2
8
+end_of_line = lf
9
+insert_final_newline = true
10
+trim_trailing_whitespace = true
11
+
12
+[*.md]
13
+insert_final_newline = false
14
+trim_trailing_whitespace = false

+ 5
- 0
.env.development Ver arquivo

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

+ 6
- 0
.env.production Ver arquivo

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

+ 8
- 0
.env.staging Ver arquivo

@@ -0,0 +1,8 @@
1
+NODE_ENV = production
2
+
3
+# just a flag
4
+ENV = 'staging'
5
+
6
+# base api
7
+VUE_APP_BASE_API = '/stage-api'
8
+

+ 4
- 0
.eslintignore Ver arquivo

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

+ 198
- 0
.eslintrc.js Ver arquivo

@@ -0,0 +1,198 @@
1
+module.exports = {
2
+  root: true,
3
+  parserOptions: {
4
+    parser: 'babel-eslint',
5
+    sourceType: 'module'
6
+  },
7
+  env: {
8
+    browser: true,
9
+    node: true,
10
+    es6: true,
11
+  },
12
+  extends: ['plugin:vue/recommended', 'eslint:recommended'],
13
+
14
+  // add your custom rules here
15
+  //it is base on https://github.com/vuejs/eslint-config-vue
16
+  rules: {
17
+    "vue/max-attributes-per-line": [2, {
18
+      "singleline": 10,
19
+      "multiline": {
20
+        "max": 1,
21
+        "allowFirstLine": false
22
+      }
23
+    }],
24
+    "vue/singleline-html-element-content-newline": "off",
25
+    "vue/multiline-html-element-content-newline":"off",
26
+    "vue/name-property-casing": ["error", "PascalCase"],
27
+    "vue/no-v-html": "off",
28
+    'accessor-pairs': 2,
29
+    'arrow-spacing': [2, {
30
+      'before': true,
31
+      'after': true
32
+    }],
33
+    'block-spacing': [2, 'always'],
34
+    'brace-style': [2, '1tbs', {
35
+      'allowSingleLine': true
36
+    }],
37
+    'camelcase': [0, {
38
+      'properties': 'always'
39
+    }],
40
+    'comma-dangle': [2, 'never'],
41
+    'comma-spacing': [2, {
42
+      'before': false,
43
+      'after': true
44
+    }],
45
+    'comma-style': [2, 'last'],
46
+    'constructor-super': 2,
47
+    'curly': [2, 'multi-line'],
48
+    'dot-location': [2, 'property'],
49
+    'eol-last': 2,
50
+    'eqeqeq': ["error", "always", {"null": "ignore"}],
51
+    'generator-star-spacing': [2, {
52
+      'before': true,
53
+      'after': true
54
+    }],
55
+    'handle-callback-err': [2, '^(err|error)$'],
56
+    'indent': [2, 2, {
57
+      'SwitchCase': 1
58
+    }],
59
+    'jsx-quotes': [2, 'prefer-single'],
60
+    'key-spacing': [2, {
61
+      'beforeColon': false,
62
+      'afterColon': true
63
+    }],
64
+    'keyword-spacing': [2, {
65
+      'before': true,
66
+      'after': true
67
+    }],
68
+    'new-cap': [2, {
69
+      'newIsCap': true,
70
+      'capIsNew': false
71
+    }],
72
+    'new-parens': 2,
73
+    'no-array-constructor': 2,
74
+    'no-caller': 2,
75
+    'no-console': 'off',
76
+    'no-class-assign': 2,
77
+    'no-cond-assign': 2,
78
+    'no-const-assign': 2,
79
+    'no-control-regex': 0,
80
+    'no-delete-var': 2,
81
+    'no-dupe-args': 2,
82
+    'no-dupe-class-members': 2,
83
+    'no-dupe-keys': 2,
84
+    'no-duplicate-case': 2,
85
+    'no-empty-character-class': 2,
86
+    'no-empty-pattern': 2,
87
+    'no-eval': 2,
88
+    'no-ex-assign': 2,
89
+    'no-extend-native': 2,
90
+    'no-extra-bind': 2,
91
+    'no-extra-boolean-cast': 2,
92
+    'no-extra-parens': [2, 'functions'],
93
+    'no-fallthrough': 2,
94
+    'no-floating-decimal': 2,
95
+    'no-func-assign': 2,
96
+    'no-implied-eval': 2,
97
+    'no-inner-declarations': [2, 'functions'],
98
+    'no-invalid-regexp': 2,
99
+    'no-irregular-whitespace': 2,
100
+    'no-iterator': 2,
101
+    'no-label-var': 2,
102
+    'no-labels': [2, {
103
+      'allowLoop': false,
104
+      'allowSwitch': false
105
+    }],
106
+    'no-lone-blocks': 2,
107
+    'no-mixed-spaces-and-tabs': 2,
108
+    'no-multi-spaces': 2,
109
+    'no-multi-str': 2,
110
+    'no-multiple-empty-lines': [2, {
111
+      'max': 1
112
+    }],
113
+    'no-native-reassign': 2,
114
+    'no-negated-in-lhs': 2,
115
+    'no-new-object': 2,
116
+    'no-new-require': 2,
117
+    'no-new-symbol': 2,
118
+    'no-new-wrappers': 2,
119
+    'no-obj-calls': 2,
120
+    'no-octal': 2,
121
+    'no-octal-escape': 2,
122
+    'no-path-concat': 2,
123
+    'no-proto': 2,
124
+    'no-redeclare': 2,
125
+    'no-regex-spaces': 2,
126
+    'no-return-assign': [2, 'except-parens'],
127
+    'no-self-assign': 2,
128
+    'no-self-compare': 2,
129
+    'no-sequences': 2,
130
+    'no-shadow-restricted-names': 2,
131
+    'no-spaced-func': 2,
132
+    'no-sparse-arrays': 2,
133
+    'no-this-before-super': 2,
134
+    'no-throw-literal': 2,
135
+    'no-trailing-spaces': 2,
136
+    'no-undef': 2,
137
+    'no-undef-init': 2,
138
+    'no-unexpected-multiline': 2,
139
+    'no-unmodified-loop-condition': 2,
140
+    'no-unneeded-ternary': [2, {
141
+      'defaultAssignment': false
142
+    }],
143
+    'no-unreachable': 2,
144
+    'no-unsafe-finally': 2,
145
+    'no-unused-vars': [2, {
146
+      'vars': 'all',
147
+      'args': 'none'
148
+    }],
149
+    'no-useless-call': 2,
150
+    'no-useless-computed-key': 2,
151
+    'no-useless-constructor': 2,
152
+    'no-useless-escape': 0,
153
+    'no-whitespace-before-property': 2,
154
+    'no-with': 2,
155
+    'one-var': [2, {
156
+      'initialized': 'never'
157
+    }],
158
+    'operator-linebreak': [2, 'after', {
159
+      'overrides': {
160
+        '?': 'before',
161
+        ':': 'before'
162
+      }
163
+    }],
164
+    'padded-blocks': [2, 'never'],
165
+    'quotes': [2, 'single', {
166
+      'avoidEscape': true,
167
+      'allowTemplateLiterals': true
168
+    }],
169
+    'semi': [2, 'never'],
170
+    'semi-spacing': [2, {
171
+      'before': false,
172
+      'after': true
173
+    }],
174
+    'space-before-blocks': [2, 'always'],
175
+    'space-before-function-paren': [2, 'never'],
176
+    'space-in-parens': [2, 'never'],
177
+    'space-infix-ops': 2,
178
+    'space-unary-ops': [2, {
179
+      'words': true,
180
+      'nonwords': false
181
+    }],
182
+    'spaced-comment': [2, 'always', {
183
+      'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
184
+    }],
185
+    'template-curly-spacing': [2, 'never'],
186
+    'use-isnan': 2,
187
+    'valid-typeof': 2,
188
+    'wrap-iife': [2, 'any'],
189
+    'yield-star-spacing': [2, 'both'],
190
+    'yoda': [2, 'never'],
191
+    'prefer-const': 2,
192
+    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
193
+    'object-curly-spacing': [2, 'always', {
194
+      objectsInObjects: false
195
+    }],
196
+    'array-bracket-spacing': [2, 'never']
197
+  }
198
+}

+ 16
- 0
.gitignore Ver arquivo

@@ -0,0 +1,16 @@
1
+.DS_Store
2
+node_modules/
3
+dist/
4
+npm-debug.log*
5
+yarn-debug.log*
6
+yarn-error.log*
7
+package-lock.json
8
+tests/**/coverage/
9
+
10
+# Editor directories and files
11
+.idea
12
+.vscode
13
+*.suo
14
+*.ntvs*
15
+*.njsproj
16
+*.sln

+ 5
- 0
.travis.yml Ver arquivo

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

+ 21
- 0
LICENSE Ver arquivo

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

+ 111
- 0
README-zh.md Ver arquivo

@@ -0,0 +1,111 @@
1
+# vue-admin-template
2
+
3
+> 这是一个极简的 vue admin 管理后台。它只包含了 Element UI & axios & iconfont & permission control & lint,这些搭建后台必要的东西。
4
+
5
+[线上地址](http://panjiachen.github.io/vue-admin-template)
6
+
7
+[国内访问](https://panjiachen.gitee.io/vue-admin-template)
8
+
9
+目前版本为 `v4.0+` 基于 `vue-cli` 进行构建,若你想使用旧版本,可以切换分支到[tag/3.11.0](https://github.com/PanJiaChen/vue-admin-template/tree/tag/3.11.0),它不依赖 `vue-cli`。
10
+
11
+<p align="center">
12
+  <b>SPONSORED BY</b>
13
+</p>
14
+<p align="center">
15
+   <a href="https://finclip.com?from=vue_element" title="FinClip" target="_blank">
16
+      <img height="200px" src="https://gitee.com/panjiachen/gitee-cdn/raw/master/vue%E8%B5%9E%E5%8A%A9.png" title="FinClip">
17
+   </a>
18
+</p>
19
+
20
+## Extra
21
+
22
+如果你想要根据用户角色来动态生成侧边栏和 router,你可以使用该分支[permission-control](https://github.com/PanJiaChen/vue-admin-template/tree/permission-control)
23
+
24
+## 相关项目
25
+
26
+- [vue-element-admin](https://github.com/PanJiaChen/vue-element-admin)
27
+
28
+- [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
29
+
30
+- [vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template)
31
+
32
+- [awesome-project](https://github.com/PanJiaChen/vue-element-admin/issues/2312)
33
+
34
+写了一个系列的教程配套文章,如何从零构建后一个完整的后台项目:
35
+
36
+- [手摸手,带你用 vue 撸后台 系列一(基础篇)](https://juejin.im/post/59097cd7a22b9d0065fb61d2)
37
+- [手摸手,带你用 vue 撸后台 系列二(登录权限篇)](https://juejin.im/post/591aa14f570c35006961acac)
38
+- [手摸手,带你用 vue 撸后台 系列三 (实战篇)](https://juejin.im/post/593121aa0ce4630057f70d35)
39
+- [手摸手,带你用 vue 撸后台 系列四(vueAdmin 一个极简的后台基础模板,专门针对本项目的文章,算作是一篇文档)](https://juejin.im/post/595b4d776fb9a06bbe7dba56)
40
+- [手摸手,带你封装一个 vue component](https://segmentfault.com/a/1190000009090836)
41
+
42
+## Build Setup
43
+
44
+```bash
45
+# 克隆项目
46
+git clone https://github.com/PanJiaChen/vue-admin-template.git
47
+
48
+# 进入项目目录
49
+cd vue-admin-template
50
+
51
+# 安装依赖
52
+npm install
53
+
54
+# 建议不要直接使用 cnpm 安装以来,会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
55
+npm install --registry=https://registry.npm.taobao.org
56
+
57
+# 启动服务
58
+npm run dev
59
+```
60
+
61
+浏览器访问 [http://localhost:9528](http://localhost:9528)
62
+
63
+## 发布
64
+
65
+```bash
66
+# 构建测试环境
67
+npm run build:stage
68
+
69
+# 构建生产环境
70
+npm run build:prod
71
+```
72
+
73
+## 其它
74
+
75
+```bash
76
+# 预览发布环境效果
77
+npm run preview
78
+
79
+# 预览发布环境效果 + 静态资源分析
80
+npm run preview -- --report
81
+
82
+# 代码格式检查
83
+npm run lint
84
+
85
+# 代码格式检查并自动修复
86
+npm run lint -- --fix
87
+```
88
+
89
+更多信息请参考 [使用文档](https://panjiachen.github.io/vue-element-admin-site/zh/)
90
+
91
+## 购买贴纸
92
+
93
+你也可以通过 购买[官方授权的贴纸](https://smallsticker.com/product/vue-element-admin) 的方式来支持 vue-element-admin - 每售出一张贴纸,我们将获得 2 元的捐赠。
94
+
95
+## Demo
96
+
97
+![demo](https://github.com/PanJiaChen/PanJiaChen.github.io/blob/master/images/demo.gif)
98
+
99
+## Browsers support
100
+
101
+Modern browsers and Internet Explorer 10+.
102
+
103
+| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari |
104
+| --------- | --------- | --------- | --------- |
105
+| IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions
106
+
107
+## License
108
+
109
+[MIT](https://github.com/PanJiaChen/vue-admin-template/blob/master/LICENSE) license.
110
+
111
+Copyright (c) 2017-present PanJiaChen

+ 14
- 0
babel.config.js Ver arquivo

@@ -0,0 +1,14 @@
1
+module.exports = {
2
+  presets: [
3
+    // https://github.com/vuejs/vue-cli/tree/master/packages/@vue/babel-preset-app
4
+    '@vue/cli-plugin-babel/preset'
5
+  ],
6
+  'env': {
7
+    'development': {
8
+      // babel-plugin-dynamic-import-node plugin only does one thing by converting all import() to require().
9
+      // This plugin can significantly increase the speed of hot updates, when you have a large number of pages.
10
+      // https://panjiachen.github.io/vue-element-admin-site/guide/advanced/lazy-loading.html
11
+      'plugins': ['dynamic-import-node']
12
+    }
13
+  }
14
+}

+ 35
- 0
build/index.js Ver arquivo

@@ -0,0 +1,35 @@
1
+const { run } = require('runjs')
2
+const chalk = require('chalk')
3
+const config = require('../vue.config.js')
4
+const rawArgv = process.argv.slice(2)
5
+const args = rawArgv.join(' ')
6
+
7
+if (process.env.npm_config_preview || rawArgv.includes('--preview')) {
8
+  const report = rawArgv.includes('--report')
9
+
10
+  run(`vue-cli-service build ${args}`)
11
+
12
+  const port = 9526
13
+  const publicPath = config.publicPath
14
+
15
+  var connect = require('connect')
16
+  var serveStatic = require('serve-static')
17
+  const app = connect()
18
+
19
+  app.use(
20
+    publicPath,
21
+    serveStatic('./dist', {
22
+      index: ['index.html', '/']
23
+    })
24
+  )
25
+
26
+  app.listen(port, function () {
27
+    console.log(chalk.green(`> Preview at  http://localhost:${port}${publicPath}`))
28
+    if (report) {
29
+      console.log(chalk.green(`> Report at  http://localhost:${port}${publicPath}report.html`))
30
+    }
31
+
32
+  })
33
+} else {
34
+  run(`vue-cli-service build ${args}`)
35
+}

+ 24
- 0
jest.config.js Ver arquivo

@@ -0,0 +1,24 @@
1
+module.exports = {
2
+  moduleFileExtensions: ['js', 'jsx', 'json', 'vue'],
3
+  transform: {
4
+    '^.+\\.vue$': 'vue-jest',
5
+    '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$':
6
+      'jest-transform-stub',
7
+    '^.+\\.jsx?$': 'babel-jest'
8
+  },
9
+  moduleNameMapper: {
10
+    '^@/(.*)$': '<rootDir>/src/$1'
11
+  },
12
+  snapshotSerializers: ['jest-serializer-vue'],
13
+  testMatch: [
14
+    '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
15
+  ],
16
+  collectCoverageFrom: ['src/utils/**/*.{js,vue}', '!src/utils/auth.js', '!src/utils/request.js', 'src/components/**/*.{js,vue}'],
17
+  coverageDirectory: '<rootDir>/tests/unit/coverage',
18
+  // 'collectCoverage': true,
19
+  'coverageReporters': [
20
+    'lcov',
21
+    'text-summary'
22
+  ],
23
+  testURL: 'http://localhost/'
24
+}

+ 9
- 0
jsconfig.json Ver arquivo

@@ -0,0 +1,9 @@
1
+{
2
+  "compilerOptions": {
3
+    "baseUrl": "./",
4
+    "paths": {
5
+        "@/*": ["src/*"]
6
+    }
7
+  },
8
+  "exclude": ["node_modules", "dist"]
9
+}

+ 57
- 0
mock/index.js Ver arquivo

@@ -0,0 +1,57 @@
1
+const Mock = require('mockjs')
2
+const { param2Obj } = require('./utils')
3
+
4
+const user = require('./user')
5
+const table = require('./table')
6
+
7
+const mocks = [
8
+  ...user,
9
+  ...table
10
+]
11
+
12
+// for front mock
13
+// please use it cautiously, it will redefine XMLHttpRequest,
14
+// which will cause many of your third-party libraries to be invalidated(like progress event).
15
+function mockXHR() {
16
+  // mock patch
17
+  // https://github.com/nuysoft/Mock/issues/300
18
+  Mock.XHR.prototype.proxy_send = Mock.XHR.prototype.send
19
+  Mock.XHR.prototype.send = function() {
20
+    if (this.custom.xhr) {
21
+      this.custom.xhr.withCredentials = this.withCredentials || false
22
+
23
+      if (this.responseType) {
24
+        this.custom.xhr.responseType = this.responseType
25
+      }
26
+    }
27
+    this.proxy_send(...arguments)
28
+  }
29
+
30
+  function XHR2ExpressReqWrap(respond) {
31
+    return function(options) {
32
+      let result = null
33
+      if (respond instanceof Function) {
34
+        const { body, type, url } = options
35
+        // https://expressjs.com/en/4x/api.html#req
36
+        result = respond({
37
+          method: type,
38
+          body: JSON.parse(body),
39
+          query: param2Obj(url)
40
+        })
41
+      } else {
42
+        result = respond
43
+      }
44
+      return Mock.mock(result)
45
+    }
46
+  }
47
+
48
+  for (const i of mocks) {
49
+    Mock.mock(new RegExp(i.url), i.type || 'get', XHR2ExpressReqWrap(i.response))
50
+  }
51
+}
52
+
53
+module.exports = {
54
+  mocks,
55
+  mockXHR
56
+}
57
+

+ 81
- 0
mock/mock-server.js Ver arquivo

@@ -0,0 +1,81 @@
1
+const chokidar = require('chokidar')
2
+const bodyParser = require('body-parser')
3
+const chalk = require('chalk')
4
+const path = require('path')
5
+const Mock = require('mockjs')
6
+
7
+const mockDir = path.join(process.cwd(), 'mock')
8
+
9
+function registerRoutes(app) {
10
+  let mockLastIndex
11
+  const { mocks } = require('./index.js')
12
+  const mocksForServer = mocks.map(route => {
13
+    return responseFake(route.url, route.type, route.response)
14
+  })
15
+  for (const mock of mocksForServer) {
16
+    app[mock.type](mock.url, mock.response)
17
+    mockLastIndex = app._router.stack.length
18
+  }
19
+  const mockRoutesLength = Object.keys(mocksForServer).length
20
+  return {
21
+    mockRoutesLength: mockRoutesLength,
22
+    mockStartIndex: mockLastIndex - mockRoutesLength
23
+  }
24
+}
25
+
26
+function unregisterRoutes() {
27
+  Object.keys(require.cache).forEach(i => {
28
+    if (i.includes(mockDir)) {
29
+      delete require.cache[require.resolve(i)]
30
+    }
31
+  })
32
+}
33
+
34
+// for mock server
35
+const responseFake = (url, type, respond) => {
36
+  return {
37
+    url: new RegExp(`${process.env.VUE_APP_BASE_API}${url}`),
38
+    type: type || 'get',
39
+    response(req, res) {
40
+      console.log('request invoke:' + req.path)
41
+      res.json(Mock.mock(respond instanceof Function ? respond(req, res) : respond))
42
+    }
43
+  }
44
+}
45
+
46
+module.exports = app => {
47
+  // parse app.body
48
+  // https://expressjs.com/en/4x/api.html#req.body
49
+  app.use(bodyParser.json())
50
+  app.use(bodyParser.urlencoded({
51
+    extended: true
52
+  }))
53
+
54
+  const mockRoutes = registerRoutes(app)
55
+  var mockRoutesLength = mockRoutes.mockRoutesLength
56
+  var mockStartIndex = mockRoutes.mockStartIndex
57
+
58
+  // watch files, hot reload mock server
59
+  chokidar.watch(mockDir, {
60
+    ignored: /mock-server/,
61
+    ignoreInitial: true
62
+  }).on('all', (event, path) => {
63
+    if (event === 'change' || event === 'add') {
64
+      try {
65
+        // remove mock routes stack
66
+        app._router.stack.splice(mockStartIndex, mockRoutesLength)
67
+
68
+        // clear routes cache
69
+        unregisterRoutes()
70
+
71
+        const mockRoutes = registerRoutes(app)
72
+        mockRoutesLength = mockRoutes.mockRoutesLength
73
+        mockStartIndex = mockRoutes.mockStartIndex
74
+
75
+        console.log(chalk.magentaBright(`\n > Mock Server hot reload success! changed  ${path}`))
76
+      } catch (error) {
77
+        console.log(chalk.redBright(error))
78
+      }
79
+    }
80
+  })
81
+}

+ 29
- 0
mock/table.js Ver arquivo

@@ -0,0 +1,29 @@
1
+const Mock = require('mockjs')
2
+
3
+const data = Mock.mock({
4
+  'items|30': [{
5
+    id: '@id',
6
+    title: '@sentence(10, 20)',
7
+    'status|1': ['published', 'draft', 'deleted'],
8
+    author: 'name',
9
+    display_time: '@datetime',
10
+    pageviews: '@integer(300, 5000)'
11
+  }]
12
+})
13
+
14
+module.exports = [
15
+  {
16
+    url: '/vue-admin-template/table/list',
17
+    type: 'get',
18
+    response: config => {
19
+      const items = data.items
20
+      return {
21
+        code: 20000,
22
+        data: {
23
+          total: items.length,
24
+          items: items
25
+        }
26
+      }
27
+    }
28
+  }
29
+]

+ 84
- 0
mock/user.js Ver arquivo

@@ -0,0 +1,84 @@
1
+
2
+const tokens = {
3
+  admin: {
4
+    token: 'admin-token'
5
+  },
6
+  editor: {
7
+    token: 'editor-token'
8
+  }
9
+}
10
+
11
+const users = {
12
+  'admin-token': {
13
+    roles: ['admin'],
14
+    introduction: 'I am a super administrator',
15
+    avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
16
+    name: 'Super Admin'
17
+  },
18
+  'editor-token': {
19
+    roles: ['editor'],
20
+    introduction: 'I am an editor',
21
+    avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
22
+    name: 'Normal Editor'
23
+  }
24
+}
25
+
26
+module.exports = [
27
+  // user login
28
+  {
29
+    url: '/vue-admin-template/user/login',
30
+    type: 'post',
31
+    response: config => {
32
+      const { username } = config.body
33
+      const token = tokens[username]
34
+
35
+      // mock error
36
+      if (!token) {
37
+        return {
38
+          code: 60204,
39
+          message: 'Account and password are incorrect.'
40
+        }
41
+      }
42
+
43
+      return {
44
+        code: 1000,
45
+        data: token,
46
+      }
47
+    }
48
+  },
49
+
50
+  // get user info
51
+  {
52
+    url: '/vue-admin-template/user/info\.*',
53
+    type: 'get',
54
+    response: config => {
55
+      const { token } = config.query
56
+      const info = users[token]
57
+
58
+      // mock error
59
+      if (!info) {
60
+        return {
61
+          code: 50008,
62
+          message: 'Login failed, unable to get user details.'
63
+        }
64
+      }
65
+
66
+      return {
67
+        code: 1000,
68
+        data: info
69
+      }
70
+    }
71
+  },
72
+
73
+  // user logout
74
+  {
75
+    url: '/vue-admin-template/user/logout',
76
+    type: 'post',
77
+    response: _ => {
78
+      return {
79
+        code: 1000,
80
+        data: 'success'
81
+      }
82
+    }
83
+  }
84
+]

+ 25
- 0
mock/utils.js Ver arquivo

@@ -0,0 +1,25 @@
1
+/**
2
+ * @param {string} url
3
+ * @returns {Object}
4
+ */
5
+function param2Obj(url) {
6
+  const search = decodeURIComponent(url.split('?')[1]).replace(/\+/g, ' ')
7
+  if (!search) {
8
+    return {}
9
+  }
10
+  const obj = {}
11
+  const searchArr = search.split('&')
12
+  searchArr.forEach(v => {
13
+    const index = v.indexOf('=')
14
+    if (index !== -1) {
15
+      const name = v.substring(0, index)
16
+      const val = v.substring(index + 1, v.length)
17
+      obj[name] = val
18
+    }
19
+  })
20
+  return obj
21
+}
22
+
23
+module.exports = {
24
+  param2Obj
25
+}

+ 66
- 0
package.json Ver arquivo

@@ -0,0 +1,66 @@
1
+{
2
+  "name": "vue-admin-template",
3
+  "version": "4.4.0",
4
+  "description": "A vue admin template with Element UI & axios & iconfont & permission control & lint",
5
+  "author": "Pan <panfree23@gmail.com>",
6
+  "scripts": {
7
+    "dev": "vue-cli-service serve",
8
+    "build:prod": "vue-cli-service build",
9
+    "build:stage": "vue-cli-service build --mode staging",
10
+    "preview": "node build/index.js --preview",
11
+    "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml",
12
+    "lint": "eslint --ext .js,.vue src",
13
+    "test:unit": "jest --clearCache && vue-cli-service test:unit",
14
+    "test:ci": "npm run lint && npm run test:unit"
15
+  },
16
+  "dependencies": {
17
+    "axios": "^0.18.1",
18
+    "axios-retry": "^3.2.4",
19
+    "core-js": "3.6.5",
20
+    "element-ui": "2.13.2",
21
+    "js-cookie": "2.2.0",
22
+    "js-md5": "^0.7.3",
23
+    "normalize.css": "7.0.0",
24
+    "nprogress": "0.2.0",
25
+    "path-to-regexp": "2.4.0",
26
+    "vue": "2.6.10",
27
+    "vue-axios": "^3.4.0",
28
+    "vue-axios-plugin": "^1.3.0",
29
+    "vue-router": "3.0.6",
30
+    "vuex": "3.1.0"
31
+  },
32
+  "devDependencies": {
33
+    "@vue/cli-plugin-babel": "4.4.4",
34
+    "@vue/cli-plugin-eslint": "4.4.4",
35
+    "@vue/cli-plugin-unit-jest": "4.4.4",
36
+    "@vue/cli-service": "4.4.4",
37
+    "@vue/test-utils": "1.0.0-beta.29",
38
+    "autoprefixer": "9.5.1",
39
+    "babel-eslint": "10.1.0",
40
+    "babel-jest": "23.6.0",
41
+    "babel-plugin-dynamic-import-node": "2.3.3",
42
+    "chalk": "2.4.2",
43
+    "connect": "3.6.6",
44
+    "eslint": "6.7.2",
45
+    "eslint-plugin-vue": "6.2.2",
46
+    "html-webpack-plugin": "3.2.0",
47
+    "mockjs": "1.0.1-beta3",
48
+    "runjs": "4.3.2",
49
+    "sass": "1.26.8",
50
+    "sass-loader": "8.0.2",
51
+    "script-ext-html-webpack-plugin": "2.1.3",
52
+    "serve-static": "1.13.2",
53
+    "svg-sprite-loader": "4.1.3",
54
+    "svgo": "1.2.2",
55
+    "vue-template-compiler": "2.6.10"
56
+  },
57
+  "browserslist": [
58
+    "> 1%",
59
+    "last 2 versions"
60
+  ],
61
+  "engines": {
62
+    "node": ">=8.9",
63
+    "npm": ">= 3.0.0"
64
+  },
65
+  "license": "MIT"
66
+}

+ 8
- 0
postcss.config.js Ver arquivo

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

BIN
public/favicon.ico Ver arquivo


+ 17
- 0
public/index.html Ver arquivo

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

+ 23
- 0
src/App.vue Ver arquivo

@@ -0,0 +1,23 @@
1
+<template>
2
+  <div id="app">
3
+    <router-view />
4
+  </div>
5
+</template>
6
+
7
+<script>
8
+export default {
9
+  name: 'App'
10
+}
11
+</script>
12
+<style>
13
+.body_edit {
14
+  padding: 20px;
15
+  width: 1000px;
16
+}
17
+.box-card {
18
+  margin-bottom: 20px;
19
+}
20
+.body {
21
+  padding: 20px;
22
+}
23
+</style>

+ 94
- 0
src/api/characterLib.js Ver arquivo

@@ -0,0 +1,94 @@
1
+import request from '@/utils/request'
2
+
3
+
4
+/**
5
+* 保存特征库
6
+* @param {*} data 
7
+* @returns 
8
+*/
9
+export const saveCharacterLib = (data) => request({
10
+  url: '/admin/character-lib',
11
+  method: 'post',
12
+  data
13
+})
14
+
15
+/**
16
+ * 特征库列表
17
+ * @param {*} params 
18
+ * @returns 
19
+ */
20
+export const getCharacterLibList = (params) => request({
21
+  url: '/admin/character-lib', params
22
+})
23
+
24
+/**
25
+ * 删除特征库
26
+ * @param {*} data 
27
+ * @returns 
28
+ */
29
+export const deleteCharacterLib = (id) => request({
30
+  url: `/admin/character-lib/${id}`, method: 'delete'
31
+})
32
+/**
33
+ * 更新特征库
34
+ * @param {*} data 
35
+ * @returns 
36
+ */
37
+export const UpdateCharacterLib = (data, id) => request({
38
+  url: `/admin/character-lib/${id}`, method: 'put', data
39
+})
40
+/**
41
+ * 查询特征库详情
42
+ * @param {*} params 
43
+ * @returns 
44
+ */
45
+export const getCharacterLibDetail = (id) => request({
46
+  url: `/admin/character-lib/${id}`
47
+})
48
+
49
+
50
+
51
+/**
52
+* 保存实例库
53
+* @param {*} data 
54
+* @returns 
55
+*/
56
+export const saveCharacterResult = (data) => request({
57
+  url: '/admin/character-result',
58
+  method: 'post',
59
+  data
60
+})
61
+
62
+/**
63
+ * 实例库列表
64
+ * @param {*} params 
65
+ * @returns 
66
+ */
67
+export const getCharacterResultList = (params) => request({
68
+  url: '/admin/character-result', params
69
+})
70
+
71
+/**
72
+ * 删除实例库
73
+ * @param {*} data 
74
+ * @returns 
75
+ */
76
+export const deleteCharacterResult = (id) => request({
77
+  url: `/admin/character-result/${id}`, method: 'delete'
78
+})
79
+/**
80
+ * 更新实例库
81
+ * @param {*} data 
82
+ * @returns 
83
+ */
84
+export const UpdateCharacterResult = (data, id) => request({
85
+  url: `/admin/character-result/${id}`, method: 'put', data
86
+})
87
+/**
88
+ * 查询实例库详情
89
+ * @param {*} params 
90
+ * @returns 
91
+ */
92
+export const getCharacterResultDetail = (id) => request({
93
+  url: `/admin/character-result/${id}`
94
+})

+ 38
- 0
src/api/question.js Ver arquivo

@@ -0,0 +1,38 @@
1
+import request from '@/utils/request'
2
+/**
3
+ * 题库列表
4
+ * @param {*} params 
5
+ * @returns 
6
+ */
7
+export const getQuestionList = (params) => request('/admin/question', { params })
8
+
9
+/**
10
+* 保存民宿
11
+* @param {*} data 
12
+* @returns 
13
+*/
14
+export const saveQuestion = (data) =>request({
15
+  url: '/admin/question',
16
+  method: 'post',
17
+  data
18
+})
19
+ 
20
+
21
+/**
22
+ * 删除民宿
23
+ * @param {*} data 
24
+ * @returns 
25
+ */
26
+export const deleteQuestion = (id) => request(`/admin/question/${id}`, { method: 'delete' })
27
+/**
28
+ * 更新民宿
29
+ * @param {*} data 
30
+ * @returns 
31
+ */
32
+export const UpdateQuestion = (data, id) => request(`/admin/question/${id}`, { method: 'put', data })
33
+/**
34
+ * 查询民宿详情
35
+ * @param {*} params 
36
+ * @returns 
37
+ */
38
+export const getQuestionDetail = (id) => request(`/admin/question/${id}`)

+ 9
- 0
src/api/user.js Ver arquivo

@@ -0,0 +1,9 @@
1
+import request from '@/utils/request'
2
+
3
+export function login(data) {
4
+  return request({
5
+    url: '/admin/login',
6
+    method: 'post',
7
+    data
8
+  })
9
+}

BIN
src/assets/404_images/404.png Ver arquivo


BIN
src/assets/404_images/404_cloud.png Ver arquivo


+ 81
- 0
src/components/AddAnswer/index.vue Ver arquivo

@@ -0,0 +1,81 @@
1
+<template>
2
+  <div class="answer">
3
+    <el-row :gutter="20">
4
+      <el-col :span="5">
5
+        <el-select
6
+          v-model="value.option"
7
+          filterable
8
+          allow-create
9
+          default-first-option
10
+          placeholder="请选择"
11
+        >
12
+          <el-option
13
+            v-for="item in options"
14
+            :key="item.value"
15
+            :label="item.label"
16
+            :value="item.value"
17
+          >
18
+          </el-option>
19
+        </el-select>
20
+      </el-col>
21
+      <el-col :span="17">
22
+        <el-input v-model="value.content" />
23
+      </el-col>
24
+      <el-col :span="1">
25
+        <el-button type="danger" @click="handleDelete">X</el-button>
26
+      </el-col>
27
+    </el-row>
28
+  </div>
29
+</template>
30
+<script>
31
+export default {
32
+  name: "answer",
33
+  props: {
34
+    value: {
35
+      type: Object,
36
+      default: () => ({}),
37
+    },
38
+  },
39
+  data() {
40
+    return {
41
+      options: [
42
+        {
43
+          value: "A",
44
+          label: "A",
45
+        },
46
+        {
47
+          value: "B",
48
+          label: "B",
49
+        },
50
+        {
51
+          value: "C",
52
+          label: "C",
53
+        },
54
+        {
55
+          value: "D",
56
+          label: "D",
57
+        },
58
+        {
59
+          value: "对",
60
+          label: "对",
61
+        },
62
+        {
63
+          value: "错",
64
+          label: "错",
65
+        },
66
+      ],
67
+    };
68
+  },
69
+  methods: {
70
+    handleDelete() {
71
+      this.$emit("handleDelete", this.value);
72
+    },
73
+  },
74
+};
75
+</script>
76
+<style>
77
+.answer {
78
+  margin: 10px 0;
79
+  width: 500px;
80
+}
81
+</style>

+ 78
- 0
src/components/Breadcrumb/index.vue Ver arquivo

@@ -0,0 +1,78 @@
1
+<template>
2
+  <el-breadcrumb class="app-breadcrumb" separator="/">
3
+    <transition-group name="breadcrumb">
4
+      <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
5
+        <span v-if="item.redirect==='noRedirect'||index==levelList.length-1" class="no-redirect">{{ item.meta.title }}</span>
6
+        <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
7
+      </el-breadcrumb-item>
8
+    </transition-group>
9
+  </el-breadcrumb>
10
+</template>
11
+
12
+<script>
13
+import pathToRegexp from 'path-to-regexp'
14
+
15
+export default {
16
+  data() {
17
+    return {
18
+      levelList: null
19
+    }
20
+  },
21
+  watch: {
22
+    $route() {
23
+      this.getBreadcrumb()
24
+    }
25
+  },
26
+  created() {
27
+    this.getBreadcrumb()
28
+  },
29
+  methods: {
30
+    getBreadcrumb() {
31
+      // only show routes with meta.title
32
+      let matched = this.$route.matched.filter(item => item.meta && item.meta.title)
33
+      const first = matched[0]
34
+
35
+      if (!this.isDashboard(first)) {
36
+        matched = [{ path: '/dashboard', meta: { title: 'Dashboard' }}].concat(matched)
37
+      }
38
+
39
+      this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
40
+    },
41
+    isDashboard(route) {
42
+      const name = route && route.name
43
+      if (!name) {
44
+        return false
45
+      }
46
+      return name.trim().toLocaleLowerCase() === 'Dashboard'.toLocaleLowerCase()
47
+    },
48
+    pathCompile(path) {
49
+      // To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561
50
+      const { params } = this.$route
51
+      var toPath = pathToRegexp.compile(path)
52
+      return toPath(params)
53
+    },
54
+    handleLink(item) {
55
+      const { redirect, path } = item
56
+      if (redirect) {
57
+        this.$router.push(redirect)
58
+        return
59
+      }
60
+      this.$router.push(this.pathCompile(path))
61
+    }
62
+  }
63
+}
64
+</script>
65
+
66
+<style lang="scss" scoped>
67
+.app-breadcrumb.el-breadcrumb {
68
+  display: inline-block;
69
+  font-size: 14px;
70
+  line-height: 50px;
71
+  margin-left: 8px;
72
+
73
+  .no-redirect {
74
+    color: #97a8be;
75
+    cursor: text;
76
+  }
77
+}
78
+</style>

+ 71
- 0
src/components/CharacterResult/edit.vue Ver arquivo

@@ -0,0 +1,71 @@
1
+<template>
2
+  <div class="body_edit">
3
+    <h2 style="text-align: center">题目编辑</h2>
4
+    <el-form ref="form" :model="form" label-width="150px" size="mini">
5
+      <el-form-item label="实例名称:">
6
+        <el-input v-model="form.name"></el-input>
7
+      </el-form-item>
8
+      <el-form-item label="特征库图标:">
9
+        <UploadImage />
10
+      </el-form-item>
11
+      <el-form-item label="实例描述:">
12
+        <el-input type="textarea" v-model="form.desc"></el-input>
13
+      </el-form-item>
14
+
15
+      <el-form-item label="特征词:">
16
+        <TagComponents :value='value' @change='handleChange'/>
17
+      </el-form-item>
18
+      <el-form-item>
19
+        <el-button type="primary" @click="onSubmit">确定</el-button>
20
+        <el-button @click="onReset">重置</el-button>
21
+      </el-form-item>
22
+    </el-form>
23
+  </div>
24
+</template>
25
+<script>
26
+import { saveQuestion } from "@/api/question";
27
+import UploadImage from "@/components/UploadImage/index.vue";
28
+import TagComponents from '../TagComponents/index.vue'
29
+export default {
30
+  data() {
31
+    return {
32
+      value:[],
33
+      form: {
34
+        name: undefined,
35
+        thumb: undefined,
36
+        desc: undefined,
37
+        libId:undefined,
38
+        wordList:[]
39
+      },
40
+    };
41
+  },
42
+
43
+  methods: {
44
+    onReset() {
45
+
46
+    },
47
+    onSubmit() {
48
+      console.log(this.value)
49
+      
50
+      // this.form.option = this.rightList.toString();
51
+      // saveQuestion(this.form).then((res) => {
52
+      //   console.log(res);
53
+      // });
54
+    },
55
+    handleChange(val){
56
+      console.log(val)
57
+    }
58
+  },
59
+  //进入页面执行的方法
60
+  mounted: function () {
61
+    if (this.$route?.query.row) {
62
+    }
63
+  },
64
+  components: {
65
+    UploadImage,
66
+    TagComponents
67
+  },
68
+};
69
+</script>
70
+<style>
71
+</style>

+ 75
- 0
src/components/CharacterResult/index.vue Ver arquivo

@@ -0,0 +1,75 @@
1
+<template>
2
+  <div class="body">
3
+    <el-card class="box-card">
4
+      实例名称:<el-input
5
+        v-model="name"
6
+        style="width: 200px; margin-right: 20px"
7
+      />
8
+      <el-button type="primary" @click="onSearch">查询</el-button>
9
+      <el-button @click="onReset">重置</el-button>
10
+    </el-card>
11
+    <el-table stripe :data="tableData" border style="width: 100%">
12
+      <el-table-column prop="name" label="实例名称" />
13
+      <el-table-column prop="thumb" label="图片">
14
+        <template slot-scope="scope">
15
+          <el-image :src="scope.row.thumb" style="width: 100px; height: 100px" />
16
+        </template>
17
+      </el-table-column>
18
+      <el-table-column fixed="right" label="操作">
19
+        <template slot-scope="scope">
20
+          <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
21
+          <el-popconfirm
22
+            icon="el-icon-info"
23
+            icon-color="red"
24
+            title="这个实例确定删除吗?"
25
+            @onConfirm='handleDelete(scope.row)'
26
+          >
27
+            <el-button type="text" slot="reference">删除</el-button>
28
+          </el-popconfirm>
29
+        </template>
30
+      </el-table-column>
31
+    </el-table>
32
+  </div>
33
+</template>
34
+<script>
35
+import { getCharacterResultList, deleteCharacterResult } from "@/api/characterLib";
36
+
37
+export default {
38
+  data() {
39
+    return {
40
+      name: undefined,
41
+      tableData: [],
42
+    };
43
+  },
44
+  methods: {
45
+    handleEdit(row) {
46
+      // 向外传送数据row.resultId
47
+    },
48
+    handleDelete(row) {
49
+      // deleteCharacterResult(row.resultId).then(() => {
50
+      //   this.onRefresh();
51
+      // });
52
+    },
53
+    onSearch() {
54
+      getCharacterResultList({ name: this.name }).then((res) => {
55
+        this.tableData = res.data.records;
56
+      });
57
+    },
58
+    onReset() {
59
+      this.name = "";
60
+      this.onRefresh();
61
+    },
62
+    // 刷新表格
63
+    onRefresh() {
64
+      getCharacterResultList().then((res) => {
65
+        this.tableData = res.data.records;
66
+      });
67
+    },
68
+  },
69
+  mounted() {
70
+    this.onRefresh();
71
+  },
72
+};
73
+</script>
74
+<style>
75
+</style>

+ 44
- 0
src/components/Hamburger/index.vue Ver arquivo

@@ -0,0 +1,44 @@
1
+<template>
2
+  <div style="padding: 0 15px;" @click="toggleClick">
3
+    <svg
4
+      :class="{'is-active':isActive}"
5
+      class="hamburger"
6
+      viewBox="0 0 1024 1024"
7
+      xmlns="http://www.w3.org/2000/svg"
8
+      width="64"
9
+      height="64"
10
+    >
11
+      <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" />
12
+    </svg>
13
+  </div>
14
+</template>
15
+
16
+<script>
17
+export default {
18
+  name: 'Hamburger',
19
+  props: {
20
+    isActive: {
21
+      type: Boolean,
22
+      default: false
23
+    }
24
+  },
25
+  methods: {
26
+    toggleClick() {
27
+      this.$emit('toggleClick')
28
+    }
29
+  }
30
+}
31
+</script>
32
+
33
+<style scoped>
34
+.hamburger {
35
+  display: inline-block;
36
+  vertical-align: middle;
37
+  width: 20px;
38
+  height: 20px;
39
+}
40
+
41
+.hamburger.is-active {
42
+  transform: rotate(180deg);
43
+}
44
+</style>

+ 62
- 0
src/components/SvgIcon/index.vue Ver arquivo

@@ -0,0 +1,62 @@
1
+<template>
2
+  <div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" />
3
+  <svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
4
+    <use :xlink:href="iconName" />
5
+  </svg>
6
+</template>
7
+
8
+<script>
9
+// doc: https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html#usage
10
+import { isExternal } from '@/utils/validate'
11
+
12
+export default {
13
+  name: 'SvgIcon',
14
+  props: {
15
+    iconClass: {
16
+      type: String,
17
+      required: true
18
+    },
19
+    className: {
20
+      type: String,
21
+      default: ''
22
+    }
23
+  },
24
+  computed: {
25
+    isExternal() {
26
+      return isExternal(this.iconClass)
27
+    },
28
+    iconName() {
29
+      return `#icon-${this.iconClass}`
30
+    },
31
+    svgClass() {
32
+      if (this.className) {
33
+        return 'svg-icon ' + this.className
34
+      } else {
35
+        return 'svg-icon'
36
+      }
37
+    },
38
+    styleExternalIcon() {
39
+      return {
40
+        mask: `url(${this.iconClass}) no-repeat 50% 50%`,
41
+        '-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`
42
+      }
43
+    }
44
+  }
45
+}
46
+</script>
47
+
48
+<style scoped>
49
+.svg-icon {
50
+  width: 1em;
51
+  height: 1em;
52
+  vertical-align: -0.15em;
53
+  fill: currentColor;
54
+  overflow: hidden;
55
+}
56
+
57
+.svg-external-icon {
58
+  background-color: currentColor;
59
+  mask-size: cover!important;
60
+  display: inline-block;
61
+}
62
+</style>

+ 90
- 0
src/components/TagComponents/index.vue Ver arquivo

@@ -0,0 +1,90 @@
1
+<template>
2
+  <div>
3
+    <el-tag
4
+      :key="tag"
5
+      v-for="tag in dynamicTags"
6
+      closable
7
+      :disable-transitions="false"
8
+      @close="handleClose(tag)"
9
+    >
10
+      {{ tag }}
11
+    </el-tag>
12
+    <el-input
13
+      class="input-new-tag"
14
+      v-if="inputVisible"
15
+      v-model="inputValue"
16
+      ref="saveTagInput"
17
+      size="small"
18
+      @keyup.enter.native="handleInputConfirm"
19
+      @blur="handleInputConfirm"
20
+    >
21
+    </el-input>
22
+    <el-button v-else class="button-new-tag" size="small" @click="showInput"
23
+      >添加修饰词</el-button
24
+    >
25
+  </div>
26
+</template>
27
+
28
+<script>
29
+export default {
30
+  props: {
31
+    value: {
32
+      type: Array,
33
+      required: true,
34
+    },
35
+  },
36
+  data() {
37
+    return {
38
+      dynamicTags: [],
39
+      inputVisible: false,
40
+      inputValue: "",
41
+    };
42
+  },
43
+  methods: {
44
+    handleClose(tag) {
45
+      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
46
+    },
47
+
48
+    showInput() {
49
+      this.inputVisible = true;
50
+      this.$nextTick((_) => {
51
+        this.$refs.saveTagInput.$refs.input.focus();
52
+      });
53
+    },
54
+
55
+    handleInputConfirm() {
56
+      let inputValue = this.inputValue;
57
+      if (inputValue) {
58
+        this.dynamicTags.push(inputValue);
59
+      }
60
+      this.inputVisible = false;
61
+      this.inputValue = "";
62
+    }
63
+  },
64
+  watch: {
65
+    dynamicTags() {
66
+      this.$emit("change", this.dynamicTags);
67
+    },
68
+  },
69
+  mounted(){
70
+    this.dynamicTags=this.value
71
+  }
72
+};
73
+</script>
74
+<style>
75
+.el-tag + .el-tag {
76
+  margin-left: 10px;
77
+}
78
+.button-new-tag {
79
+  margin-left: 10px;
80
+  height: 32px;
81
+  line-height: 30px;
82
+  padding-top: 0;
83
+  padding-bottom: 0;
84
+}
85
+.input-new-tag {
86
+  width: 90px;
87
+  margin-left: 10px;
88
+  vertical-align: bottom;
89
+}
90
+</style>

+ 34
- 0
src/components/UploadImage/index.vue Ver arquivo

@@ -0,0 +1,34 @@
1
+<template>
2
+<div>
3
+<el-upload
4
+  action="#"
5
+  list-type="picture-card"
6
+  :limit="1"
7
+  :on-remove="handleRemove"
8
+  :on-change='handleChange'
9
+  :auto-upload="false"
10
+  >
11
+  <i class="el-icon-plus"></i>
12
+</el-upload>
13
+</div>
14
+</template>
15
+<script>
16
+  export default {
17
+    data() {
18
+      return {
19
+        dialogImageUrl: '',
20
+        dialogVisible: false
21
+      };
22
+    },
23
+    methods: {
24
+      handleRemove(file, fileList) {
25
+        console.log(file, fileList);
26
+      },
27
+      handleChange(file,fileList){
28
+        console.log(fileList[0].raw)
29
+      }
30
+    }
31
+  }
32
+</script>
33
+<style>
34
+</style> 

+ 9
- 0
src/icons/index.js Ver arquivo

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

+ 1
- 0
src/icons/svg/dashboard.svg Ver arquivo

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

+ 1
- 0
src/icons/svg/example.svg Ver arquivo

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

+ 1
- 0
src/icons/svg/eye-open.svg Ver arquivo

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

+ 1
- 0
src/icons/svg/eye.svg Ver arquivo

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

+ 1
- 0
src/icons/svg/form.svg Ver arquivo

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

+ 1
- 0
src/icons/svg/link.svg Ver arquivo

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

+ 1
- 0
src/icons/svg/nested.svg Ver arquivo

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

+ 1
- 0
src/icons/svg/password.svg Ver arquivo

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

+ 1
- 0
src/icons/svg/table.svg Ver arquivo

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

+ 1
- 0
src/icons/svg/tree.svg Ver arquivo

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

+ 1
- 0
src/icons/svg/user.svg Ver arquivo

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

+ 22
- 0
src/icons/svgo.yml Ver arquivo

@@ -0,0 +1,22 @@
1
+# replace default config
2
+
3
+# multipass: true
4
+# full: true
5
+
6
+plugins:
7
+
8
+  # - name
9
+  #
10
+  # or:
11
+  # - name: false
12
+  # - name: true
13
+  #
14
+  # or:
15
+  # - name:
16
+  #     param1: 1
17
+  #     param2: 2
18
+
19
+- removeAttrs:
20
+    attrs:
21
+      - 'fill'
22
+      - 'fill-rule'

+ 40
- 0
src/layout/components/AppMain.vue Ver arquivo

@@ -0,0 +1,40 @@
1
+<template>
2
+  <section class="app-main">
3
+    <transition name="fade-transform" mode="out-in">
4
+      <router-view :key="key" />
5
+    </transition>
6
+  </section>
7
+</template>
8
+
9
+<script>
10
+export default {
11
+  name: 'AppMain',
12
+  computed: {
13
+    key() {
14
+      return this.$route.path
15
+    }
16
+  }
17
+}
18
+</script>
19
+
20
+<style scoped>
21
+.app-main {
22
+  /*50 = navbar  */
23
+  min-height: calc(100vh - 50px);
24
+  width: 100%;
25
+  position: relative;
26
+  overflow: hidden;
27
+}
28
+.fixed-header+.app-main {
29
+  padding-top: 50px;
30
+}
31
+</style>
32
+
33
+<style lang="scss">
34
+// fix css style bug in open el-dialog
35
+.el-popup-parent--hidden {
36
+  .fixed-header {
37
+    padding-right: 15px;
38
+  }
39
+}
40
+</style>

+ 139
- 0
src/layout/components/Navbar.vue Ver arquivo

@@ -0,0 +1,139 @@
1
+<template>
2
+  <div class="navbar">
3
+    <hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
4
+
5
+    <breadcrumb class="breadcrumb-container" />
6
+
7
+    <div class="right-menu">
8
+      <el-dropdown class="avatar-container" trigger="click">
9
+        <div class="avatar-wrapper">
10
+          <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">
11
+          <i class="el-icon-caret-bottom" />
12
+        </div>
13
+        <el-dropdown-menu slot="dropdown" class="user-dropdown">
14
+          <router-link to="/">
15
+            <el-dropdown-item>
16
+              Home
17
+            </el-dropdown-item>
18
+          </router-link>
19
+          <a target="_blank" href="https://github.com/PanJiaChen/vue-admin-template/">
20
+            <el-dropdown-item>Github</el-dropdown-item>
21
+          </a>
22
+          <a target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/#/">
23
+            <el-dropdown-item>Docs</el-dropdown-item>
24
+          </a>
25
+          <el-dropdown-item divided @click.native="logout">
26
+            <span style="display:block;">Log Out</span>
27
+          </el-dropdown-item>
28
+        </el-dropdown-menu>
29
+      </el-dropdown>
30
+    </div>
31
+  </div>
32
+</template>
33
+
34
+<script>
35
+import { mapGetters } from 'vuex'
36
+import Breadcrumb from '@/components/Breadcrumb'
37
+import Hamburger from '@/components/Hamburger'
38
+
39
+export default {
40
+  components: {
41
+    Breadcrumb,
42
+    Hamburger
43
+  },
44
+  computed: {
45
+    ...mapGetters([
46
+      'sidebar',
47
+      'avatar'
48
+    ])
49
+  },
50
+  methods: {
51
+    toggleSideBar() {
52
+      this.$store.dispatch('app/toggleSideBar')
53
+    },
54
+    async logout() {
55
+      await this.$store.dispatch('user/logout')
56
+      this.$router.push(`/login?redirect=${this.$route.fullPath}`)
57
+    }
58
+  }
59
+}
60
+</script>
61
+
62
+<style lang="scss" scoped>
63
+.navbar {
64
+  height: 50px;
65
+  overflow: hidden;
66
+  position: relative;
67
+  background: #fff;
68
+  box-shadow: 0 1px 4px rgba(0,21,41,.08);
69
+
70
+  .hamburger-container {
71
+    line-height: 46px;
72
+    height: 100%;
73
+    float: left;
74
+    cursor: pointer;
75
+    transition: background .3s;
76
+    -webkit-tap-highlight-color:transparent;
77
+
78
+    &:hover {
79
+      background: rgba(0, 0, 0, .025)
80
+    }
81
+  }
82
+
83
+  .breadcrumb-container {
84
+    float: left;
85
+  }
86
+
87
+  .right-menu {
88
+    float: right;
89
+    height: 100%;
90
+    line-height: 50px;
91
+
92
+    &:focus {
93
+      outline: none;
94
+    }
95
+
96
+    .right-menu-item {
97
+      display: inline-block;
98
+      padding: 0 8px;
99
+      height: 100%;
100
+      font-size: 18px;
101
+      color: #5a5e66;
102
+      vertical-align: text-bottom;
103
+
104
+      &.hover-effect {
105
+        cursor: pointer;
106
+        transition: background .3s;
107
+
108
+        &:hover {
109
+          background: rgba(0, 0, 0, .025)
110
+        }
111
+      }
112
+    }
113
+
114
+    .avatar-container {
115
+      margin-right: 30px;
116
+
117
+      .avatar-wrapper {
118
+        margin-top: 5px;
119
+        position: relative;
120
+
121
+        .user-avatar {
122
+          cursor: pointer;
123
+          width: 40px;
124
+          height: 40px;
125
+          border-radius: 10px;
126
+        }
127
+
128
+        .el-icon-caret-bottom {
129
+          cursor: pointer;
130
+          position: absolute;
131
+          right: -20px;
132
+          top: 25px;
133
+          font-size: 12px;
134
+        }
135
+      }
136
+    }
137
+  }
138
+}
139
+</style>

+ 26
- 0
src/layout/components/Sidebar/FixiOSBug.js Ver arquivo

@@ -0,0 +1,26 @@
1
+export default {
2
+  computed: {
3
+    device() {
4
+      return this.$store.state.app.device
5
+    }
6
+  },
7
+  mounted() {
8
+    // In order to fix the click on menu on the ios device will trigger the mouseleave bug
9
+    // https://github.com/PanJiaChen/vue-element-admin/issues/1135
10
+    this.fixBugIniOS()
11
+  },
12
+  methods: {
13
+    fixBugIniOS() {
14
+      const $subMenu = this.$refs.subMenu
15
+      if ($subMenu) {
16
+        const handleMouseleave = $subMenu.handleMouseleave
17
+        $subMenu.handleMouseleave = (e) => {
18
+          if (this.device === 'mobile') {
19
+            return
20
+          }
21
+          handleMouseleave(e)
22
+        }
23
+      }
24
+    }
25
+  }
26
+}

+ 41
- 0
src/layout/components/Sidebar/Item.vue Ver arquivo

@@ -0,0 +1,41 @@
1
+<script>
2
+export default {
3
+  name: 'MenuItem',
4
+  functional: true,
5
+  props: {
6
+    icon: {
7
+      type: String,
8
+      default: ''
9
+    },
10
+    title: {
11
+      type: String,
12
+      default: ''
13
+    }
14
+  },
15
+  render(h, context) {
16
+    const { icon, title } = context.props
17
+    const vnodes = []
18
+
19
+    if (icon) {
20
+      if (icon.includes('el-icon')) {
21
+        vnodes.push(<i class={[icon, 'sub-el-icon']} />)
22
+      } else {
23
+        vnodes.push(<svg-icon icon-class={icon}/>)
24
+      }
25
+    }
26
+
27
+    if (title) {
28
+      vnodes.push(<span slot='title'>{(title)}</span>)
29
+    }
30
+    return vnodes
31
+  }
32
+}
33
+</script>
34
+
35
+<style scoped>
36
+.sub-el-icon {
37
+  color: currentColor;
38
+  width: 1em;
39
+  height: 1em;
40
+}
41
+</style>

+ 43
- 0
src/layout/components/Sidebar/Link.vue Ver arquivo

@@ -0,0 +1,43 @@
1
+<template>
2
+  <component :is="type" v-bind="linkProps(to)">
3
+    <slot />
4
+  </component>
5
+</template>
6
+
7
+<script>
8
+import { isExternal } from '@/utils/validate'
9
+
10
+export default {
11
+  props: {
12
+    to: {
13
+      type: String,
14
+      required: true
15
+    }
16
+  },
17
+  computed: {
18
+    isExternal() {
19
+      return isExternal(this.to)
20
+    },
21
+    type() {
22
+      if (this.isExternal) {
23
+        return 'a'
24
+      }
25
+      return 'router-link'
26
+    }
27
+  },
28
+  methods: {
29
+    linkProps(to) {
30
+      if (this.isExternal) {
31
+        return {
32
+          href: to,
33
+          target: '_blank',
34
+          rel: 'noopener'
35
+        }
36
+      }
37
+      return {
38
+        to: to
39
+      }
40
+    }
41
+  }
42
+}
43
+</script>

+ 82
- 0
src/layout/components/Sidebar/Logo.vue Ver arquivo

@@ -0,0 +1,82 @@
1
+<template>
2
+  <div class="sidebar-logo-container" :class="{'collapse':collapse}">
3
+    <transition name="sidebarLogoFade">
4
+      <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
5
+        <img v-if="logo" :src="logo" class="sidebar-logo">
6
+        <h1 v-else class="sidebar-title">{{ title }} </h1>
7
+      </router-link>
8
+      <router-link v-else key="expand" class="sidebar-logo-link" to="/">
9
+        <img v-if="logo" :src="logo" class="sidebar-logo">
10
+        <h1 class="sidebar-title">{{ title }} </h1>
11
+      </router-link>
12
+    </transition>
13
+  </div>
14
+</template>
15
+
16
+<script>
17
+export default {
18
+  name: 'SidebarLogo',
19
+  props: {
20
+    collapse: {
21
+      type: Boolean,
22
+      required: true
23
+    }
24
+  },
25
+  data() {
26
+    return {
27
+      title: 'Vue Admin Template',
28
+      logo: 'https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef5251.png'
29
+    }
30
+  }
31
+}
32
+</script>
33
+
34
+<style lang="scss" scoped>
35
+.sidebarLogoFade-enter-active {
36
+  transition: opacity 1.5s;
37
+}
38
+
39
+.sidebarLogoFade-enter,
40
+.sidebarLogoFade-leave-to {
41
+  opacity: 0;
42
+}
43
+
44
+.sidebar-logo-container {
45
+  position: relative;
46
+  width: 100%;
47
+  height: 50px;
48
+  line-height: 50px;
49
+  background: #2b2f3a;
50
+  text-align: center;
51
+  overflow: hidden;
52
+
53
+  & .sidebar-logo-link {
54
+    height: 100%;
55
+    width: 100%;
56
+
57
+    & .sidebar-logo {
58
+      width: 32px;
59
+      height: 32px;
60
+      vertical-align: middle;
61
+      margin-right: 12px;
62
+    }
63
+
64
+    & .sidebar-title {
65
+      display: inline-block;
66
+      margin: 0;
67
+      color: #fff;
68
+      font-weight: 600;
69
+      line-height: 50px;
70
+      font-size: 14px;
71
+      font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
72
+      vertical-align: middle;
73
+    }
74
+  }
75
+
76
+  &.collapse {
77
+    .sidebar-logo {
78
+      margin-right: 0px;
79
+    }
80
+  }
81
+}
82
+</style>

+ 95
- 0
src/layout/components/Sidebar/SidebarItem.vue Ver arquivo

@@ -0,0 +1,95 @@
1
+<template>
2
+  <div v-if="!item.hidden">
3
+    <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
4
+      <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
5
+        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
6
+          <item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="onlyOneChild.meta.title" />
7
+        </el-menu-item>
8
+      </app-link>
9
+    </template>
10
+
11
+    <el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
12
+      <template slot="title">
13
+        <item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="item.meta.title" />
14
+      </template>
15
+      <sidebar-item
16
+        v-for="child in item.children"
17
+        :key="child.path"
18
+        :is-nest="true"
19
+        :item="child"
20
+        :base-path="resolvePath(child.path)"
21
+        class="nest-menu"
22
+      />
23
+    </el-submenu>
24
+  </div>
25
+</template>
26
+
27
+<script>
28
+import path from 'path'
29
+import { isExternal } from '@/utils/validate'
30
+import Item from './Item'
31
+import AppLink from './Link'
32
+import FixiOSBug from './FixiOSBug'
33
+
34
+export default {
35
+  name: 'SidebarItem',
36
+  components: { Item, AppLink },
37
+  mixins: [FixiOSBug],
38
+  props: {
39
+    // route object
40
+    item: {
41
+      type: Object,
42
+      required: true
43
+    },
44
+    isNest: {
45
+      type: Boolean,
46
+      default: false
47
+    },
48
+    basePath: {
49
+      type: String,
50
+      default: ''
51
+    }
52
+  },
53
+  data() {
54
+    // To fix https://github.com/PanJiaChen/vue-admin-template/issues/237
55
+    // TODO: refactor with render function
56
+    this.onlyOneChild = null
57
+    return {}
58
+  },
59
+  methods: {
60
+    hasOneShowingChild(children = [], parent) {
61
+      const showingChildren = children.filter(item => {
62
+        if (item.hidden) {
63
+          return false
64
+        } else {
65
+          // Temp set(will be used if only has one showing child)
66
+          this.onlyOneChild = item
67
+          return true
68
+        }
69
+      })
70
+
71
+      // When there is only one child router, the child router is displayed by default
72
+      if (showingChildren.length === 1) {
73
+        return true
74
+      }
75
+
76
+      // Show parent if there are no child router to display
77
+      if (showingChildren.length === 0) {
78
+        this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
79
+        return true
80
+      }
81
+
82
+      return false
83
+    },
84
+    resolvePath(routePath) {
85
+      if (isExternal(routePath)) {
86
+        return routePath
87
+      }
88
+      if (isExternal(this.basePath)) {
89
+        return this.basePath
90
+      }
91
+      return path.resolve(this.basePath, routePath)
92
+    }
93
+  }
94
+}
95
+</script>

+ 56
- 0
src/layout/components/Sidebar/index.vue Ver arquivo

@@ -0,0 +1,56 @@
1
+<template>
2
+  <div :class="{'has-logo':showLogo}">
3
+    <logo v-if="showLogo" :collapse="isCollapse" />
4
+    <el-scrollbar wrap-class="scrollbar-wrapper">
5
+      <el-menu
6
+        :default-active="activeMenu"
7
+        :collapse="isCollapse"
8
+        :background-color="variables.menuBg"
9
+        :text-color="variables.menuText"
10
+        :unique-opened="false"
11
+        :active-text-color="variables.menuActiveText"
12
+        :collapse-transition="false"
13
+        mode="vertical"
14
+      >
15
+        <sidebar-item v-for="route in routes" :key="route.path" :item="route" :base-path="route.path" />
16
+      </el-menu>
17
+    </el-scrollbar>
18
+  </div>
19
+</template>
20
+
21
+<script>
22
+import { mapGetters } from 'vuex'
23
+import Logo from './Logo'
24
+import SidebarItem from './SidebarItem'
25
+import variables from '@/styles/variables.scss'
26
+
27
+export default {
28
+  components: { SidebarItem, Logo },
29
+  computed: {
30
+    ...mapGetters([
31
+      'sidebar'
32
+    ]),
33
+    routes() {
34
+      return this.$router.options.routes
35
+    },
36
+    activeMenu() {
37
+      const route = this.$route
38
+      const { meta, path } = route
39
+      // if set path, the sidebar will highlight the path you set
40
+      if (meta.activeMenu) {
41
+        return meta.activeMenu
42
+      }
43
+      return path
44
+    },
45
+    showLogo() {
46
+      return this.$store.state.settings.sidebarLogo
47
+    },
48
+    variables() {
49
+      return variables
50
+    },
51
+    isCollapse() {
52
+      return !this.sidebar.opened
53
+    }
54
+  }
55
+}
56
+</script>

+ 3
- 0
src/layout/components/index.js Ver arquivo

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

+ 93
- 0
src/layout/index.vue Ver arquivo

@@ -0,0 +1,93 @@
1
+<template>
2
+  <div :class="classObj" class="app-wrapper">
3
+    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
4
+    <sidebar class="sidebar-container" />
5
+    <div class="main-container">
6
+      <div :class="{'fixed-header':fixedHeader}">
7
+        <navbar />
8
+      </div>
9
+      <app-main />
10
+    </div>
11
+  </div>
12
+</template>
13
+
14
+<script>
15
+import { Navbar, Sidebar, AppMain } from './components'
16
+import ResizeMixin from './mixin/ResizeHandler'
17
+
18
+export default {
19
+  name: 'Layout',
20
+  components: {
21
+    Navbar,
22
+    Sidebar,
23
+    AppMain
24
+  },
25
+  mixins: [ResizeMixin],
26
+  computed: {
27
+    sidebar() {
28
+      return this.$store.state.app.sidebar
29
+    },
30
+    device() {
31
+      return this.$store.state.app.device
32
+    },
33
+    fixedHeader() {
34
+      return this.$store.state.settings.fixedHeader
35
+    },
36
+    classObj() {
37
+      return {
38
+        hideSidebar: !this.sidebar.opened,
39
+        openSidebar: this.sidebar.opened,
40
+        withoutAnimation: this.sidebar.withoutAnimation,
41
+        mobile: this.device === 'mobile'
42
+      }
43
+    }
44
+  },
45
+  methods: {
46
+    handleClickOutside() {
47
+      this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
48
+    }
49
+  }
50
+}
51
+</script>
52
+
53
+<style lang="scss" scoped>
54
+  @import "~@/styles/mixin.scss";
55
+  @import "~@/styles/variables.scss";
56
+
57
+  .app-wrapper {
58
+    @include clearfix;
59
+    position: relative;
60
+    height: 100%;
61
+    width: 100%;
62
+    &.mobile.openSidebar{
63
+      position: fixed;
64
+      top: 0;
65
+    }
66
+  }
67
+  .drawer-bg {
68
+    background: #000;
69
+    opacity: 0.3;
70
+    width: 100%;
71
+    top: 0;
72
+    height: 100%;
73
+    position: absolute;
74
+    z-index: 999;
75
+  }
76
+
77
+  .fixed-header {
78
+    position: fixed;
79
+    top: 0;
80
+    right: 0;
81
+    z-index: 9;
82
+    width: calc(100% - #{$sideBarWidth});
83
+    transition: width 0.28s;
84
+  }
85
+
86
+  .hideSidebar .fixed-header {
87
+    width: calc(100% - 54px)
88
+  }
89
+
90
+  .mobile .fixed-header {
91
+    width: 100%;
92
+  }
93
+</style>

+ 45
- 0
src/layout/mixin/ResizeHandler.js Ver arquivo

@@ -0,0 +1,45 @@
1
+import store from '@/store'
2
+
3
+const { body } = document
4
+const WIDTH = 992 // refer to Bootstrap's responsive design
5
+
6
+export default {
7
+  watch: {
8
+    $route(route) {
9
+      if (this.device === 'mobile' && this.sidebar.opened) {
10
+        store.dispatch('app/closeSideBar', { withoutAnimation: false })
11
+      }
12
+    }
13
+  },
14
+  beforeMount() {
15
+    window.addEventListener('resize', this.$_resizeHandler)
16
+  },
17
+  beforeDestroy() {
18
+    window.removeEventListener('resize', this.$_resizeHandler)
19
+  },
20
+  mounted() {
21
+    const isMobile = this.$_isMobile()
22
+    if (isMobile) {
23
+      store.dispatch('app/toggleDevice', 'mobile')
24
+      store.dispatch('app/closeSideBar', { withoutAnimation: true })
25
+    }
26
+  },
27
+  methods: {
28
+    // use $_ for mixins properties
29
+    // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
30
+    $_isMobile() {
31
+      const rect = body.getBoundingClientRect()
32
+      return rect.width - 1 < WIDTH
33
+    },
34
+    $_resizeHandler() {
35
+      if (!document.hidden) {
36
+        const isMobile = this.$_isMobile()
37
+        store.dispatch('app/toggleDevice', isMobile ? 'mobile' : 'desktop')
38
+
39
+        if (isMobile) {
40
+          store.dispatch('app/closeSideBar', { withoutAnimation: true })
41
+        }
42
+      }
43
+    }
44
+  }
45
+}

+ 43
- 0
src/main.js Ver arquivo

@@ -0,0 +1,43 @@
1
+import Vue from 'vue'
2
+
3
+import 'normalize.css/normalize.css' // A modern alternative to CSS resets
4
+
5
+import ElementUI from 'element-ui'
6
+import 'element-ui/lib/theme-chalk/index.css'
7
+import locale from 'element-ui/lib/locale/lang/en' // lang i18n
8
+
9
+import '@/styles/index.scss' // global css
10
+
11
+import App from './App'
12
+import store from './store'
13
+import router from './router'
14
+
15
+import '@/icons' // icon
16
+import '@/permission' // permission control
17
+
18
+/**
19
+ * If you don't want to use mock-server
20
+ * you want to use MockJs for mock api
21
+ * you can execute: mockXHR()
22
+ *
23
+ * Currently MockJs will be used in the production environment,
24
+ * please remove it before going online ! ! !
25
+ */
26
+// if (process.env.NODE_ENV === 'production') {
27
+//   const { mockXHR } = require('../mock')
28
+  // mockXHR()
29
+// }
30
+
31
+// set ElementUI lang to EN
32
+Vue.use(ElementUI, { locale })
33
+// 如果想要中文版 element-ui,按如下方式声明
34
+// Vue.use(ElementUI)
35
+
36
+Vue.config.productionTip = false
37
+
38
+new Vue({  
39
+  el: '#app',
40
+  router,
41
+  store,
42
+  render: h => h(App)
43
+})

+ 61
- 0
src/permission.js Ver arquivo

@@ -0,0 +1,61 @@
1
+import router from './router'
2
+import store from './store'
3
+import { Message } from 'element-ui'
4
+import NProgress from 'nprogress' // progress bar
5
+import 'nprogress/nprogress.css' // progress bar style
6
+import { getToken } from '@/utils/auth' // get token from cookie
7
+import getPageTitle from '@/utils/get-page-title'
8
+
9
+NProgress.configure({ showSpinner: false }) // NProgress Configuration
10
+
11
+const whiteList = ['/login'] // no redirect whitelist
12
+
13
+router.beforeEach(async(to, from, next) => {
14
+  // start progress bar
15
+  NProgress.start()
16
+
17
+  // set page title
18
+  document.title = getPageTitle(to.meta.title)
19
+
20
+  // determine whether the user has logged in
21
+  const hasToken = getToken()
22
+  if (hasToken) {
23
+    if (to.path === '/login') {
24
+      // if is logged in, redirect to the home page
25
+      next({ path: '/' })
26
+      NProgress.done()
27
+    } else {
28
+      const hasGetUserInfo = store.getters.name
29
+      if (hasGetUserInfo) {
30
+        next()
31
+      } 
32
+      else {
33
+        try {
34
+          next()
35
+        } catch (error) {
36
+          // remove token and go to login page to re-login
37
+          await store.dispatch('user/resetToken')
38
+          Message.error(error || 'Has Error')
39
+          next(`/login?redirect=${to.path}`)
40
+          NProgress.done()
41
+        }
42
+      }
43
+    }
44
+  } else {
45
+    /* has no token*/
46
+
47
+    if (whiteList.indexOf(to.path) !== -1) {
48
+      // in the free login whitelist, go directly
49
+      next()
50
+    } else {
51
+      // other pages that do not have permission to access are redirected to the login page.
52
+      next(`/login?redirect=${to.path}`)
53
+      NProgress.done()
54
+    }
55
+  }
56
+})
57
+
58
+router.afterEach(() => {
59
+  // finish progress bar
60
+  NProgress.done()
61
+})

+ 136
- 0
src/router/index.js Ver arquivo

@@ -0,0 +1,136 @@
1
+import Vue from 'vue'
2
+import Router from 'vue-router'
3
+
4
+Vue.use(Router)
5
+
6
+/* Layout */
7
+import Layout from '@/layout'
8
+
9
+/**
10
+ * Note: sub-menu only appear when route children.length >= 1
11
+ * Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
12
+ *
13
+ * hidden: true                   if set true, item will not show in the sidebar(default is false)
14
+ * alwaysShow: true               if set true, will always show the root menu
15
+ *                                if not set alwaysShow, when item has more than one children route,
16
+ *                                it will becomes nested mode, otherwise not show the root menu
17
+ * redirect: noRedirect           if set noRedirect will no redirect in the breadcrumb
18
+ * name:'router-name'             the name is used by <keep-alive> (must set!!!)
19
+ * meta : {
20
+    roles: ['admin','editor']    control the page roles (you can set multiple roles)
21
+    title: 'title'               the name show in sidebar and breadcrumb (recommend set)
22
+    icon: 'svg-name'/'el-icon-x' the icon show in the sidebar
23
+    breadcrumb: false            if set false, the item will hidden in breadcrumb(default is true)
24
+    activeMenu: '/example/list'  if set path, the sidebar will highlight the path you set
25
+  }
26
+ */
27
+
28
+/**
29
+ * constantRoutes
30
+ * a base page that does not have permission requirements
31
+ * all roles can be accessed
32
+ */
33
+export const constantRoutes = [
34
+  {
35
+    path: '/',
36
+    component: Layout,
37
+    redirect: '/dashboard',
38
+    children: [{
39
+      path: 'dashboard',
40
+      name: 'Dashboard',
41
+      component: () => import('@/views/dashboard/index'),
42
+      meta: { title: 'Dashboard', icon: 'dashboard' }
43
+    }]
44
+  },
45
+
46
+  {
47
+    path: '/questionList',
48
+    component: Layout,
49
+    name: '题库管理',
50
+    meta: { title: '题库管理', icon: 'form' },
51
+    children: [
52
+      {
53
+        path: 'questionList',
54
+        name: '题库列表',
55
+        component: () => import('@/views/questionList/index'),
56
+        meta: { title: '题库列表', icon: 'form' }
57
+      },
58
+      {
59
+        path: 'questionList/edit',
60
+        name: '编辑题目',
61
+        component: () => import('@/views/questionList/edit'),
62
+        // meta: { title: '编辑题目', icon: 'form' }
63
+      }]
64
+  },
65
+
66
+  {
67
+    path: '/characterLibManage',
68
+    component: Layout,
69
+    name: '特征库管理',
70
+    meta: { title: '特征管理', icon: 'form' },
71
+    children: [
72
+      {
73
+        path: 'characterLibManage',
74
+        name: '特征库列表',
75
+        component: () => import('@/views/characterLibManage/index'),
76
+        meta: { title: '特征库列表', icon: 'form' }
77
+      },
78
+      {
79
+        path: 'characterLibManage/add',
80
+        name: '新增特征库',
81
+        component: () => import('@/views/characterLibManage/add'),
82
+        // meta: { title: '新增特征库', icon: 'form' }
83
+      },
84
+      {
85
+        path: 'characterLibManage/edit',
86
+        name: '编辑特征库',
87
+        component: () => import('@/views/characterLibManage/edit'),
88
+        // meta: { title: '编辑特征库', icon: 'form' }
89
+      }
90
+    ]
91
+  },
92
+
93
+  {
94
+    path: '/login',
95
+    component: () => import('@/views/login/index'),
96
+    hidden: true
97
+  },
98
+
99
+  {
100
+    path: '/404',
101
+    component: () => import('@/views/404'),
102
+    hidden: true
103
+  },
104
+
105
+    
106
+
107
+  {
108
+    path: 'external-link',
109
+    component: Layout,
110
+    children: [
111
+      {
112
+        path: 'https://panjiachen.github.io/vue-element-admin-site/#/',
113
+        meta: { title: 'External Link', icon: 'link' }
114
+      }
115
+    ]
116
+  },
117
+
118
+  // 404 page must be placed at the end !!!
119
+  { path: '*', redirect: '/404', hidden: true }
120
+]
121
+
122
+const createRouter = () => new Router({
123
+  // mode: 'history', // require service support
124
+  scrollBehavior: () => ({ y: 0 }),
125
+  routes: constantRoutes
126
+})
127
+
128
+const router = createRouter()
129
+
130
+// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
131
+export function resetRouter() {
132
+  const newRouter = createRouter()
133
+  router.matcher = newRouter.matcher // reset router
134
+}
135
+
136
+export default router

+ 16
- 0
src/settings.js Ver arquivo

@@ -0,0 +1,16 @@
1
+module.exports = {
2
+
3
+  title: 'Vue Admin Template',
4
+
5
+  /**
6
+   * @type {boolean} true | false
7
+   * @description Whether fix the header
8
+   */
9
+  fixedHeader: false,
10
+
11
+  /**
12
+   * @type {boolean} true | false
13
+   * @description Whether show the logo in sidebar
14
+   */
15
+  sidebarLogo: false
16
+}

+ 8
- 0
src/store/getters.js Ver arquivo

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

+ 20
- 0
src/store/index.js Ver arquivo

@@ -0,0 +1,20 @@
1
+import Vue from 'vue'
2
+import Vuex from 'vuex'
3
+import getters from './getters'
4
+import app from './modules/app'
5
+import settings from './modules/settings'
6
+import user from './modules/user'
7
+
8
+
9
+Vue.use(Vuex)
10
+
11
+const store = new Vuex.Store({
12
+  modules: {
13
+    app,
14
+    settings,
15
+    user
16
+  },
17
+  getters
18
+})
19
+
20
+export default store

+ 49
- 0
src/store/modules/app.js Ver arquivo

@@ -0,0 +1,49 @@
1
+import Cookies from 'js-cookie'
2
+
3
+const state = {
4
+  sidebar: {
5
+    opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true,
6
+    withoutAnimation: false
7
+  },
8
+  device: 'desktop'
9
+}
10
+
11
+//定义Mutations
12
+const mutations = {
13
+  TOGGLE_SIDEBAR: state => {
14
+    state.sidebar.opened = !state.sidebar.opened
15
+    state.sidebar.withoutAnimation = false
16
+    if (state.sidebar.opened) {
17
+      Cookies.set('sidebarStatus', 1)
18
+    } else {
19
+      Cookies.set('sidebarStatus', 0)
20
+    }
21
+  },
22
+  CLOSE_SIDEBAR: (state, withoutAnimation) => {
23
+    Cookies.set('sidebarStatus', 0)
24
+    state.sidebar.opened = false
25
+    state.sidebar.withoutAnimation = withoutAnimation
26
+  },
27
+  TOGGLE_DEVICE: (state, device) => {
28
+    state.device = device
29
+  }
30
+}
31
+
32
+const actions = {
33
+  toggleSideBar({ commit }) {
34
+    commit('TOGGLE_SIDEBAR')
35
+  },
36
+  closeSideBar({ commit }, { withoutAnimation }) {
37
+    commit('CLOSE_SIDEBAR', withoutAnimation)
38
+  },
39
+  toggleDevice({ commit }, device) {
40
+    commit('TOGGLE_DEVICE', device)
41
+  }
42
+}
43
+
44
+export default {
45
+  namespaced: true,
46
+  state,
47
+  mutations,
48
+  actions
49
+}

+ 32
- 0
src/store/modules/settings.js Ver arquivo

@@ -0,0 +1,32 @@
1
+import defaultSettings from '@/settings'
2
+
3
+const { showSettings, fixedHeader, sidebarLogo } = defaultSettings
4
+
5
+const state = {
6
+  showSettings: showSettings,
7
+  fixedHeader: fixedHeader,
8
+  sidebarLogo: sidebarLogo
9
+}
10
+
11
+const mutations = {
12
+  CHANGE_SETTING: (state, { key, value }) => {
13
+    // eslint-disable-next-line no-prototype-builtins
14
+    if (state.hasOwnProperty(key)) {
15
+      state[key] = value
16
+    }
17
+  }
18
+}
19
+
20
+const actions = {
21
+  changeSetting({ commit }, data) {
22
+    commit('CHANGE_SETTING', data)
23
+  }
24
+}
25
+
26
+export default {
27
+  namespaced: true,
28
+  state,
29
+  mutations,
30
+  actions
31
+}
32
+

+ 68
- 0
src/store/modules/user.js Ver arquivo

@@ -0,0 +1,68 @@
1
+import { login} from '@/api/user'
2
+import { getToken, setToken, removeToken,setUserId } from '@/utils/auth'
3
+import { resetRouter } from '@/router'
4
+
5
+const getDefaultState = () => {
6
+  return {
7
+    token: getToken(),
8
+  }
9
+}
10
+
11
+const state = getDefaultState()
12
+
13
+//定义Mutations
14
+const mutations = {
15
+  RESET_STATE: (state) => {
16
+    Object.assign(state, getDefaultState())
17
+  },
18
+  SET_TOKEN: (state, token) => {
19
+    state.token = token
20
+  },
21
+}
22
+//在actions里面增加一个才可以在页面加 
23
+//this.$store.dispatch('user/login', this.loginForm)调用api里面的方法
24
+const actions = {
25
+  // user login
26
+  login({ commit }, userInfo) {
27
+    const { userName, password } = userInfo
28
+    return new Promise((resolve, reject) => {
29
+      login({ userName: userName.trim(), password: password }).then(response => {
30
+        const { data } = response
31
+        commit('SET_TOKEN', data.token)
32
+        setToken(data.token)
33
+        setUserId(data.user.userId)
34
+        resolve()
35
+      }).catch(error => {
36
+        reject(error)
37
+      })
38
+    })
39
+  },
40
+
41
+
42
+  // user logout
43
+  logout({ commit, state }) {
44
+    return new Promise((resolve, reject) => {
45
+        removeToken() // must remove  token  first
46
+        resetRouter()
47
+        commit('RESET_STATE')
48
+        resolve()
49
+    })
50
+  },
51
+
52
+  // remove token
53
+  resetToken({ commit }) {
54
+    return new Promise(resolve => {
55
+      removeToken() // must remove  token  first
56
+      commit('RESET_STATE')
57
+      resolve()
58
+    })
59
+  }
60
+}
61
+
62
+export default {
63
+  namespaced: true,
64
+  state,
65
+  mutations,
66
+  actions
67
+}
68
+

+ 49
- 0
src/styles/element-ui.scss Ver arquivo

@@ -0,0 +1,49 @@
1
+// cover some element-ui styles
2
+
3
+.el-breadcrumb__inner,
4
+.el-breadcrumb__inner a {
5
+  font-weight: 400 !important;
6
+}
7
+
8
+.el-upload {
9
+  input[type="file"] {
10
+    display: none !important;
11
+  }
12
+}
13
+
14
+.el-upload__input {
15
+  display: none;
16
+}
17
+
18
+
19
+// to fixed https://github.com/ElemeFE/element/issues/2461
20
+.el-dialog {
21
+  transform: none;
22
+  left: 0;
23
+  position: relative;
24
+  margin: 0 auto;
25
+}
26
+
27
+// refine element ui upload
28
+.upload-container {
29
+  .el-upload {
30
+    width: 100%;
31
+
32
+    .el-upload-dragger {
33
+      width: 100%;
34
+      height: 200px;
35
+    }
36
+  }
37
+}
38
+
39
+// dropdown
40
+.el-dropdown-menu {
41
+  a {
42
+    display: block
43
+  }
44
+}
45
+
46
+// to fix el-date-picker css style
47
+.el-range-separator {
48
+  box-sizing: content-box;
49
+}

+ 65
- 0
src/styles/index.scss Ver arquivo

@@ -0,0 +1,65 @@
1
+@import './variables.scss';
2
+@import './mixin.scss';
3
+@import './transition.scss';
4
+@import './element-ui.scss';
5
+@import './sidebar.scss';
6
+
7
+body {
8
+  height: 100%;
9
+  -moz-osx-font-smoothing: grayscale;
10
+  -webkit-font-smoothing: antialiased;
11
+  text-rendering: optimizeLegibility;
12
+  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
13
+}
14
+
15
+label {
16
+  font-weight: 700;
17
+}
18
+
19
+html {
20
+  height: 100%;
21
+  box-sizing: border-box;
22
+}
23
+
24
+#app {
25
+  height: 100%;
26
+}
27
+
28
+*,
29
+*:before,
30
+*:after {
31
+  box-sizing: inherit;
32
+}
33
+
34
+a:focus,
35
+a:active {
36
+  outline: none;
37
+}
38
+
39
+a,
40
+a:focus,
41
+a:hover {
42
+  cursor: pointer;
43
+  color: inherit;
44
+  text-decoration: none;
45
+}
46
+
47
+div:focus {
48
+  outline: none;
49
+}
50
+
51
+.clearfix {
52
+  &:after {
53
+    visibility: hidden;
54
+    display: block;
55
+    font-size: 0;
56
+    content: " ";
57
+    clear: both;
58
+    height: 0;
59
+  }
60
+}
61
+
62
+// main-container global css
63
+.app-container {
64
+  padding: 20px;
65
+}

+ 28
- 0
src/styles/mixin.scss Ver arquivo

@@ -0,0 +1,28 @@
1
+@mixin clearfix {
2
+  &:after {
3
+    content: "";
4
+    display: table;
5
+    clear: both;
6
+  }
7
+}
8
+
9
+@mixin scrollBar {
10
+  &::-webkit-scrollbar-track-piece {
11
+    background: #d3dce6;
12
+  }
13
+
14
+  &::-webkit-scrollbar {
15
+    width: 6px;
16
+  }
17
+
18
+  &::-webkit-scrollbar-thumb {
19
+    background: #99a9bf;
20
+    border-radius: 20px;
21
+  }
22
+}
23
+
24
+@mixin relative {
25
+  position: relative;
26
+  width: 100%;
27
+  height: 100%;
28
+}

+ 226
- 0
src/styles/sidebar.scss Ver arquivo

@@ -0,0 +1,226 @@
1
+#app {
2
+
3
+  .main-container {
4
+    min-height: 100%;
5
+    transition: margin-left .28s;
6
+    margin-left: $sideBarWidth;
7
+    position: relative;
8
+  }
9
+
10
+  .sidebar-container {
11
+    transition: width 0.28s;
12
+    width: $sideBarWidth !important;
13
+    background-color: $menuBg;
14
+    height: 100%;
15
+    position: fixed;
16
+    font-size: 0px;
17
+    top: 0;
18
+    bottom: 0;
19
+    left: 0;
20
+    z-index: 1001;
21
+    overflow: hidden;
22
+
23
+    // reset element-ui css
24
+    .horizontal-collapse-transition {
25
+      transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
26
+    }
27
+
28
+    .scrollbar-wrapper {
29
+      overflow-x: hidden !important;
30
+    }
31
+
32
+    .el-scrollbar__bar.is-vertical {
33
+      right: 0px;
34
+    }
35
+
36
+    .el-scrollbar {
37
+      height: 100%;
38
+    }
39
+
40
+    &.has-logo {
41
+      .el-scrollbar {
42
+        height: calc(100% - 50px);
43
+      }
44
+    }
45
+
46
+    .is-horizontal {
47
+      display: none;
48
+    }
49
+
50
+    a {
51
+      display: inline-block;
52
+      width: 100%;
53
+      overflow: hidden;
54
+    }
55
+
56
+    .svg-icon {
57
+      margin-right: 16px;
58
+    }
59
+
60
+    .sub-el-icon {
61
+      margin-right: 12px;
62
+      margin-left: -2px;
63
+    }
64
+
65
+    .el-menu {
66
+      border: none;
67
+      height: 100%;
68
+      width: 100% !important;
69
+    }
70
+
71
+    // menu hover
72
+    .submenu-title-noDropdown,
73
+    .el-submenu__title {
74
+      &:hover {
75
+        background-color: $menuHover !important;
76
+      }
77
+    }
78
+
79
+    .is-active>.el-submenu__title {
80
+      color: $subMenuActiveText !important;
81
+    }
82
+
83
+    & .nest-menu .el-submenu>.el-submenu__title,
84
+    & .el-submenu .el-menu-item {
85
+      min-width: $sideBarWidth !important;
86
+      background-color: $subMenuBg !important;
87
+
88
+      &:hover {
89
+        background-color: $subMenuHover !important;
90
+      }
91
+    }
92
+  }
93
+
94
+  .hideSidebar {
95
+    .sidebar-container {
96
+      width: 54px !important;
97
+    }
98
+
99
+    .main-container {
100
+      margin-left: 54px;
101
+    }
102
+
103
+    .submenu-title-noDropdown {
104
+      padding: 0 !important;
105
+      position: relative;
106
+
107
+      .el-tooltip {
108
+        padding: 0 !important;
109
+
110
+        .svg-icon {
111
+          margin-left: 20px;
112
+        }
113
+
114
+        .sub-el-icon {
115
+          margin-left: 19px;
116
+        }
117
+      }
118
+    }
119
+
120
+    .el-submenu {
121
+      overflow: hidden;
122
+
123
+      &>.el-submenu__title {
124
+        padding: 0 !important;
125
+
126
+        .svg-icon {
127
+          margin-left: 20px;
128
+        }
129
+
130
+        .sub-el-icon {
131
+          margin-left: 19px;
132
+        }
133
+
134
+        .el-submenu__icon-arrow {
135
+          display: none;
136
+        }
137
+      }
138
+    }
139
+
140
+    .el-menu--collapse {
141
+      .el-submenu {
142
+        &>.el-submenu__title {
143
+          &>span {
144
+            height: 0;
145
+            width: 0;
146
+            overflow: hidden;
147
+            visibility: hidden;
148
+            display: inline-block;
149
+          }
150
+        }
151
+      }
152
+    }
153
+  }
154
+
155
+  .el-menu--collapse .el-menu .el-submenu {
156
+    min-width: $sideBarWidth !important;
157
+  }
158
+
159
+  // mobile responsive
160
+  .mobile {
161
+    .main-container {
162
+      margin-left: 0px;
163
+    }
164
+
165
+    .sidebar-container {
166
+      transition: transform .28s;
167
+      width: $sideBarWidth !important;
168
+    }
169
+
170
+    &.hideSidebar {
171
+      .sidebar-container {
172
+        pointer-events: none;
173
+        transition-duration: 0.3s;
174
+        transform: translate3d(-$sideBarWidth, 0, 0);
175
+      }
176
+    }
177
+  }
178
+
179
+  .withoutAnimation {
180
+
181
+    .main-container,
182
+    .sidebar-container {
183
+      transition: none;
184
+    }
185
+  }
186
+}
187
+
188
+// when menu collapsed
189
+.el-menu--vertical {
190
+  &>.el-menu {
191
+    .svg-icon {
192
+      margin-right: 16px;
193
+    }
194
+    .sub-el-icon {
195
+      margin-right: 12px;
196
+      margin-left: -2px;
197
+    }
198
+  }
199
+
200
+  .nest-menu .el-submenu>.el-submenu__title,
201
+  .el-menu-item {
202
+    &:hover {
203
+      // you can use $subMenuHover
204
+      background-color: $menuHover !important;
205
+    }
206
+  }
207
+
208
+  // the scroll bar appears when the subMenu is too long
209
+  >.el-menu--popup {
210
+    max-height: 100vh;
211
+    overflow-y: auto;
212
+
213
+    &::-webkit-scrollbar-track-piece {
214
+      background: #d3dce6;
215
+    }
216
+
217
+    &::-webkit-scrollbar {
218
+      width: 6px;
219
+    }
220
+
221
+    &::-webkit-scrollbar-thumb {
222
+      background: #99a9bf;
223
+      border-radius: 20px;
224
+    }
225
+  }
226
+}

+ 48
- 0
src/styles/transition.scss Ver arquivo

@@ -0,0 +1,48 @@
1
+// global transition css
2
+
3
+/* fade */
4
+.fade-enter-active,
5
+.fade-leave-active {
6
+  transition: opacity 0.28s;
7
+}
8
+
9
+.fade-enter,
10
+.fade-leave-active {
11
+  opacity: 0;
12
+}
13
+
14
+/* fade-transform */
15
+.fade-transform-leave-active,
16
+.fade-transform-enter-active {
17
+  transition: all .5s;
18
+}
19
+
20
+.fade-transform-enter {
21
+  opacity: 0;
22
+  transform: translateX(-30px);
23
+}
24
+
25
+.fade-transform-leave-to {
26
+  opacity: 0;
27
+  transform: translateX(30px);
28
+}
29
+
30
+/* breadcrumb transition */
31
+.breadcrumb-enter-active,
32
+.breadcrumb-leave-active {
33
+  transition: all .5s;
34
+}
35
+
36
+.breadcrumb-enter,
37
+.breadcrumb-leave-active {
38
+  opacity: 0;
39
+  transform: translateX(20px);
40
+}
41
+
42
+.breadcrumb-move {
43
+  transition: all .5s;
44
+}
45
+
46
+.breadcrumb-leave-active {
47
+  position: absolute;
48
+}

+ 25
- 0
src/styles/variables.scss Ver arquivo

@@ -0,0 +1,25 @@
1
+// sidebar
2
+$menuText:#bfcbd9;
3
+$menuActiveText:#409EFF;
4
+$subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951
5
+
6
+$menuBg:#304156;
7
+$menuHover:#263445;
8
+
9
+$subMenuBg:#1f2d3d;
10
+$subMenuHover:#001528;
11
+
12
+$sideBarWidth: 210px;
13
+
14
+// the :export directive is the magic sauce for webpack
15
+// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
16
+:export {
17
+  menuText: $menuText;
18
+  menuActiveText: $menuActiveText;
19
+  subMenuActiveText: $subMenuActiveText;
20
+  menuBg: $menuBg;
21
+  menuHover: $menuHover;
22
+  subMenuBg: $subMenuBg;
23
+  subMenuHover: $subMenuHover;
24
+  sideBarWidth: $sideBarWidth;
25
+}

+ 25
- 0
src/utils/auth.js Ver arquivo

@@ -0,0 +1,25 @@
1
+import Cookies from 'js-cookie'
2
+
3
+const TokenKey = 'token'
4
+
5
+export function getToken() {
6
+  return Cookies.get(TokenKey)
7
+}
8
+
9
+export function setToken(token) {
10
+  return Cookies.set(TokenKey, token)
11
+}
12
+
13
+
14
+export function removeToken() {
15
+  return Cookies.remove(TokenKey)
16
+}
17
+
18
+const UserIdKey = 'user'
19
+
20
+export function setUserId(userId) {
21
+  return Cookies.set(UserIdKey, userId)
22
+}
23
+export function getUserId() {
24
+  return Cookies.get(UserIdKey)
25
+}

+ 10
- 0
src/utils/get-page-title.js Ver arquivo

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

+ 117
- 0
src/utils/index.js Ver arquivo

@@ -0,0 +1,117 @@
1
+/**
2
+ * Created by PanJiaChen on 16/11/18.
3
+ */
4
+
5
+/**
6
+ * Parse the time to string
7
+ * @param {(Object|string|number)} time
8
+ * @param {string} cFormat
9
+ * @returns {string | null}
10
+ */
11
+export function parseTime(time, cFormat) {
12
+  if (arguments.length === 0 || !time) {
13
+    return null
14
+  }
15
+  const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
16
+  let date
17
+  if (typeof time === 'object') {
18
+    date = time
19
+  } else {
20
+    if ((typeof time === 'string')) {
21
+      if ((/^[0-9]+$/.test(time))) {
22
+        // support "1548221490638"
23
+        time = parseInt(time)
24
+      } else {
25
+        // support safari
26
+        // https://stackoverflow.com/questions/4310953/invalid-date-in-safari
27
+        time = time.replace(new RegExp(/-/gm), '/')
28
+      }
29
+    }
30
+
31
+    if ((typeof time === 'number') && (time.toString().length === 10)) {
32
+      time = time * 1000
33
+    }
34
+    date = new Date(time)
35
+  }
36
+  const formatObj = {
37
+    y: date.getFullYear(),
38
+    m: date.getMonth() + 1,
39
+    d: date.getDate(),
40
+    h: date.getHours(),
41
+    i: date.getMinutes(),
42
+    s: date.getSeconds(),
43
+    a: date.getDay()
44
+  }
45
+  const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => {
46
+    const value = formatObj[key]
47
+    // Note: getDay() returns 0 on Sunday
48
+    if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value ] }
49
+    return value.toString().padStart(2, '0')
50
+  })
51
+  return time_str
52
+}
53
+
54
+/**
55
+ * @param {number} time
56
+ * @param {string} option
57
+ * @returns {string}
58
+ */
59
+export function formatTime(time, option) {
60
+  if (('' + time).length === 10) {
61
+    time = parseInt(time) * 1000
62
+  } else {
63
+    time = +time
64
+  }
65
+  const d = new Date(time)
66
+  const now = Date.now()
67
+
68
+  const diff = (now - d) / 1000
69
+
70
+  if (diff < 30) {
71
+    return '刚刚'
72
+  } else if (diff < 3600) {
73
+    // less 1 hour
74
+    return Math.ceil(diff / 60) + '分钟前'
75
+  } else if (diff < 3600 * 24) {
76
+    return Math.ceil(diff / 3600) + '小时前'
77
+  } else if (diff < 3600 * 24 * 2) {
78
+    return '1天前'
79
+  }
80
+  if (option) {
81
+    return parseTime(time, option)
82
+  } else {
83
+    return (
84
+      d.getMonth() +
85
+      1 +
86
+      '月' +
87
+      d.getDate() +
88
+      '日' +
89
+      d.getHours() +
90
+      '时' +
91
+      d.getMinutes() +
92
+      '分'
93
+    )
94
+  }
95
+}
96
+
97
+/**
98
+ * @param {string} url
99
+ * @returns {Object}
100
+ */
101
+export function param2Obj(url) {
102
+  const search = decodeURIComponent(url.split('?')[1]).replace(/\+/g, ' ')
103
+  if (!search) {
104
+    return {}
105
+  }
106
+  const obj = {}
107
+  const searchArr = search.split('&')
108
+  searchArr.forEach(v => {
109
+    const index = v.indexOf('=')
110
+    if (index !== -1) {
111
+      const name = v.substring(0, index)
112
+      const val = v.substring(index + 1, v.length)
113
+      obj[name] = val
114
+    }
115
+  })
116
+  return obj
117
+}

+ 74
- 0
src/utils/request.js Ver arquivo

@@ -0,0 +1,74 @@
1
+import axios from 'axios'
2
+import { MessageBox, Message } from 'element-ui'
3
+import store from '@/store'
4
+import { getToken,getUserId } from '@/utils/auth'
5
+ 
6
+
7
+// create an axios instance
8
+const service = axios.create({
9
+  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
10
+  // withCredentials: true, // send cookies when cross-domain requests
11
+  timeout: 5000 // request timeout
12
+})
13
+
14
+// request interceptor
15
+service.interceptors.request.use(
16
+  config => {
17
+    // do something before request is sent
18
+
19
+    if (store.getters.token) {
20
+      // let each request carry token
21
+      // ['X-Token'] is a custom headers key
22
+      // please modify it according to the actual situation
23
+      config.headers['X-Authorization-JWT'] = getToken()
24
+      config.headers['x-userid'] = getUserId()
25
+
26
+    }
27
+    return config
28
+  },
29
+  error => {
30
+    // do something with request error
31
+    console.log(error) // for debug
32
+    return Promise.reject(error)
33
+  }
34
+)
35
+
36
+// response interceptor响应
37
+service.interceptors.response.use(
38
+  /**
39
+   * If you want to get http information such as headers or status
40
+   * Please return  response => response
41
+  */
42
+
43
+  /**
44
+   * Determine the request status by custom code
45
+   * Here is just an example
46
+   * You can also judge the status by HTTP Status Code
47
+   */
48
+  response => {
49
+
50
+    const res = response.data
51
+    // if the custom code is not 20000, it is judged as an error.
52
+    if (res.code !== 1000) {
53
+      Message({
54
+        message: res.message || 'Error',
55
+        type: 'error',
56
+        duration: 5 * 1000
57
+      })      
58
+      return Promise.reject(new Error(res.message || 'Error'))
59
+    } else {
60
+      return res
61
+    }
62
+  },
63
+  error => {
64
+    console.log('err' + error) // for debug
65
+    Message({
66
+      message: error.message,
67
+      type: 'error',
68
+      duration: 5 * 1000
69
+    })
70
+    return Promise.reject(error)
71
+  }
72
+)
73
+
74
+export default service

+ 20
- 0
src/utils/validate.js Ver arquivo

@@ -0,0 +1,20 @@
1
+/**
2
+ * Created by PanJiaChen on 16/11/18.
3
+ */
4
+
5
+/**
6
+ * @param {string} path
7
+ * @returns {Boolean}
8
+ */
9
+export function isExternal(path) {
10
+  return /^(https?:|mailto:|tel:)/.test(path)
11
+}
12
+
13
+/**
14
+ * @param {string} str
15
+ * @returns {Boolean}
16
+ */
17
+export function validUsername(str) {
18
+  const valid_map = ['admin', 'editor']
19
+  return valid_map.indexOf(str.trim()) >= 0
20
+}

+ 228
- 0
src/views/404.vue Ver arquivo

@@ -0,0 +1,228 @@
1
+<template>
2
+  <div class="wscn-http404-container">
3
+    <div class="wscn-http404">
4
+      <div class="pic-404">
5
+        <img class="pic-404__parent" src="@/assets/404_images/404.png" alt="404">
6
+        <img class="pic-404__child left" src="@/assets/404_images/404_cloud.png" alt="404">
7
+        <img class="pic-404__child mid" src="@/assets/404_images/404_cloud.png" alt="404">
8
+        <img class="pic-404__child right" src="@/assets/404_images/404_cloud.png" alt="404">
9
+      </div>
10
+      <div class="bullshit">
11
+        <div class="bullshit__oops">OOPS!</div>
12
+        <div class="bullshit__info">All rights reserved
13
+          <a style="color:#20a0ff" href="https://wallstreetcn.com" target="_blank">wallstreetcn</a>
14
+        </div>
15
+        <div class="bullshit__headline">{{ message }}</div>
16
+        <div class="bullshit__info">Please check that the URL you entered is correct, or click the button below to return to the homepage.</div>
17
+        <a href="" class="bullshit__return-home">Back to home</a>
18
+      </div>
19
+    </div>
20
+  </div>
21
+</template>
22
+
23
+<script>
24
+
25
+export default {
26
+  name: 'Page404',
27
+  computed: {
28
+    message() {
29
+      return 'The webmaster said that you can not enter this page...'
30
+    }
31
+  }
32
+}
33
+</script>
34
+
35
+<style lang="scss" scoped>
36
+.wscn-http404-container{
37
+  transform: translate(-50%,-50%);
38
+  position: absolute;
39
+  top: 40%;
40
+  left: 50%;
41
+}
42
+.wscn-http404 {
43
+  position: relative;
44
+  width: 1200px;
45
+  padding: 0 50px;
46
+  overflow: hidden;
47
+  .pic-404 {
48
+    position: relative;
49
+    float: left;
50
+    width: 600px;
51
+    overflow: hidden;
52
+    &__parent {
53
+      width: 100%;
54
+    }
55
+    &__child {
56
+      position: absolute;
57
+      &.left {
58
+        width: 80px;
59
+        top: 17px;
60
+        left: 220px;
61
+        opacity: 0;
62
+        animation-name: cloudLeft;
63
+        animation-duration: 2s;
64
+        animation-timing-function: linear;
65
+        animation-fill-mode: forwards;
66
+        animation-delay: 1s;
67
+      }
68
+      &.mid {
69
+        width: 46px;
70
+        top: 10px;
71
+        left: 420px;
72
+        opacity: 0;
73
+        animation-name: cloudMid;
74
+        animation-duration: 2s;
75
+        animation-timing-function: linear;
76
+        animation-fill-mode: forwards;
77
+        animation-delay: 1.2s;
78
+      }
79
+      &.right {
80
+        width: 62px;
81
+        top: 100px;
82
+        left: 500px;
83
+        opacity: 0;
84
+        animation-name: cloudRight;
85
+        animation-duration: 2s;
86
+        animation-timing-function: linear;
87
+        animation-fill-mode: forwards;
88
+        animation-delay: 1s;
89
+      }
90
+      @keyframes cloudLeft {
91
+        0% {
92
+          top: 17px;
93
+          left: 220px;
94
+          opacity: 0;
95
+        }
96
+        20% {
97
+          top: 33px;
98
+          left: 188px;
99
+          opacity: 1;
100
+        }
101
+        80% {
102
+          top: 81px;
103
+          left: 92px;
104
+          opacity: 1;
105
+        }
106
+        100% {
107
+          top: 97px;
108
+          left: 60px;
109
+          opacity: 0;
110
+        }
111
+      }
112
+      @keyframes cloudMid {
113
+        0% {
114
+          top: 10px;
115
+          left: 420px;
116
+          opacity: 0;
117
+        }
118
+        20% {
119
+          top: 40px;
120
+          left: 360px;
121
+          opacity: 1;
122
+        }
123
+        70% {
124
+          top: 130px;
125
+          left: 180px;
126
+          opacity: 1;
127
+        }
128
+        100% {
129
+          top: 160px;
130
+          left: 120px;
131
+          opacity: 0;
132
+        }
133
+      }
134
+      @keyframes cloudRight {
135
+        0% {
136
+          top: 100px;
137
+          left: 500px;
138
+          opacity: 0;
139
+        }
140
+        20% {
141
+          top: 120px;
142
+          left: 460px;
143
+          opacity: 1;
144
+        }
145
+        80% {
146
+          top: 180px;
147
+          left: 340px;
148
+          opacity: 1;
149
+        }
150
+        100% {
151
+          top: 200px;
152
+          left: 300px;
153
+          opacity: 0;
154
+        }
155
+      }
156
+    }
157
+  }
158
+  .bullshit {
159
+    position: relative;
160
+    float: left;
161
+    width: 300px;
162
+    padding: 30px 0;
163
+    overflow: hidden;
164
+    &__oops {
165
+      font-size: 32px;
166
+      font-weight: bold;
167
+      line-height: 40px;
168
+      color: #1482f0;
169
+      opacity: 0;
170
+      margin-bottom: 20px;
171
+      animation-name: slideUp;
172
+      animation-duration: 0.5s;
173
+      animation-fill-mode: forwards;
174
+    }
175
+    &__headline {
176
+      font-size: 20px;
177
+      line-height: 24px;
178
+      color: #222;
179
+      font-weight: bold;
180
+      opacity: 0;
181
+      margin-bottom: 10px;
182
+      animation-name: slideUp;
183
+      animation-duration: 0.5s;
184
+      animation-delay: 0.1s;
185
+      animation-fill-mode: forwards;
186
+    }
187
+    &__info {
188
+      font-size: 13px;
189
+      line-height: 21px;
190
+      color: grey;
191
+      opacity: 0;
192
+      margin-bottom: 30px;
193
+      animation-name: slideUp;
194
+      animation-duration: 0.5s;
195
+      animation-delay: 0.2s;
196
+      animation-fill-mode: forwards;
197
+    }
198
+    &__return-home {
199
+      display: block;
200
+      float: left;
201
+      width: 110px;
202
+      height: 36px;
203
+      background: #1482f0;
204
+      border-radius: 100px;
205
+      text-align: center;
206
+      color: #ffffff;
207
+      opacity: 0;
208
+      font-size: 14px;
209
+      line-height: 36px;
210
+      cursor: pointer;
211
+      animation-name: slideUp;
212
+      animation-duration: 0.5s;
213
+      animation-delay: 0.3s;
214
+      animation-fill-mode: forwards;
215
+    }
216
+    @keyframes slideUp {
217
+      0% {
218
+        transform: translateY(60px);
219
+        opacity: 0;
220
+      }
221
+      100% {
222
+        transform: translateY(0);
223
+        opacity: 1;
224
+      }
225
+    }
226
+  }
227
+}
228
+</style>

+ 52
- 0
src/views/characterLibManage/add.vue Ver arquivo

@@ -0,0 +1,52 @@
1
+<template>
2
+  <div class="body_edit">
3
+    <h2 style="text-align: center">特征库新增</h2>
4
+    <el-form ref="form" :model="form" label-width="150px" size="mini">
5
+      <el-form-item label="特征库名称:">
6
+        <el-input v-model="form.name"></el-input>
7
+      </el-form-item>
8
+      <el-form-item label="特征库图标:">
9
+        <UploadImage />
10
+      </el-form-item>
11
+      <el-form-item label="特征库描述:">
12
+        <el-input type="textarea" v-model="form.remark"></el-input>
13
+      </el-form-item>
14
+      <el-form-item>
15
+        <el-button type="primary" @click="onSubmit">添加</el-button>
16
+        <el-button @click="onCancel">取消</el-button>
17
+      </el-form-item>
18
+    </el-form>
19
+  </div>
20
+</template>
21
+<script>
22
+import { saveCharacterLib } from "@/api/characterLib";
23
+import UploadImage from '@/components/UploadImage/index.vue'
24
+export default {
25
+  data() {
26
+    return {
27
+      form: {
28
+        name: undefined,
29
+        icon: undefined,
30
+        remark:undefined
31
+      },
32
+    };
33
+  },
34
+
35
+  methods: {
36
+    onCancel() {
37
+      this.$router.go(-1);
38
+    },
39
+    onSubmit() {
40
+      saveCharacterLib(this.form).then((res) => {
41
+        this.$message('保存成功');
42
+        this.$router.go(-1);
43
+      });
44
+    },
45
+  },
46
+  components:{
47
+    UploadImage
48
+  }
49
+};
50
+</script>
51
+<style>
52
+</style>

+ 86
- 0
src/views/characterLibManage/edit.vue Ver arquivo

@@ -0,0 +1,86 @@
1
+<template>
2
+  <div style="padding: 20px">
3
+    <h2 style="text-align: center">特征库编辑</h2>
4
+    <el-row :gutter="20">
5
+      <el-col :span="15">
6
+        <el-form
7
+          ref="form"
8
+          :model="characterLib"
9
+          label-width="150px"
10
+          size="mini"
11
+        >
12
+          <el-form-item label="特征库名称:">
13
+            <el-input v-model="characterLib.name"></el-input>
14
+          </el-form-item>
15
+          <el-form-item label="特征库图标:">
16
+            <UploadImage />
17
+          </el-form-item>
18
+          <el-form-item label="特征库描述:">
19
+            <el-input type="textarea" v-model="characterLib.remark"></el-input>
20
+          </el-form-item>
21
+          <el-form-item>
22
+            <el-button type="primary" @click="onEdit">修改</el-button>
23
+            <el-button @click="onCancel">取消</el-button>
24
+            <el-button type="primary" @click="onCancel">添加实例</el-button>
25
+          </el-form-item>
26
+        </el-form>
27
+      </el-col>
28
+      <el-col :span="5"> 特征词列表 </el-col>
29
+    </el-row>
30
+    <el-row :gutter="20">
31
+      <el-col :span="10">
32
+        <CharacterResult />
33
+      </el-col>
34
+      <el-col :span="10"> 实例详情 
35
+        <CharacterResultEdit />
36
+      </el-col>
37
+    </el-row>
38
+  </div>
39
+</template>
40
+<script>
41
+import { UpdateCharacterLib, getCharacterLibDetail } from "@/api/characterLib";
42
+import UploadImage from "@/components/UploadImage/index.vue";
43
+import CharacterResult from "@/components/CharacterResult/index.vue";
44
+import CharacterResultEdit from "@/components/CharacterResult/edit.vue";
45
+export default {
46
+  data() {
47
+    return {
48
+      characterLib: {
49
+        libId: undefined,
50
+        name: undefined,
51
+        icon: undefined,
52
+        remark: undefined,
53
+        wordList: [],
54
+      },
55
+    };
56
+  },
57
+
58
+  methods: {
59
+    onCancel() {
60
+      this.$router.go(-1);
61
+    },
62
+    onEdit() {
63
+      UpdateCharacterLib(this.characterLib, this.characterLib.libId).then(
64
+        (res) => {
65
+          this.$message("修改成功");
66
+        }
67
+      );
68
+    },
69
+  },
70
+  //进入页面执行的方法
71
+  mounted: function () {
72
+    if (this.$route?.query.id) {
73
+      getCharacterLibDetail(this.$route.query.id).then((res) => {
74
+        this.characterLib = res.data;
75
+      });
76
+    }
77
+  },
78
+  components: {
79
+    UploadImage,
80
+    CharacterResult,
81
+    CharacterResultEdit
82
+  },
83
+};
84
+</script>
85
+<style>
86
+</style>

+ 82
- 0
src/views/characterLibManage/index.vue Ver arquivo

@@ -0,0 +1,82 @@
1
+<template>
2
+  <div class="body">
3
+    <el-card class="box-card">
4
+      特征库名称:<el-input
5
+        v-model="name"
6
+        style="width: 200px; margin-right: 20px"
7
+      />
8
+      <el-button type="primary" @click="onSearch">查询</el-button>
9
+      <el-button @click="onReset">重置</el-button>
10
+      <el-button type="primary" @click="handleAdd">添加特征库</el-button>
11
+    </el-card>
12
+    <el-table stripe :data="tableData" border style="width: 100%">
13
+      <el-table-column prop="name" label="特征库名称" />
14
+      <el-table-column prop="icon" label="特征库图标">
15
+        <template slot-scope="scope">
16
+          <el-image :src="scope.row.icon" style="width: 100px; height: 100px" />
17
+        </template>
18
+      </el-table-column>
19
+      <el-table-column fixed="right" label="操作">
20
+        <template slot-scope="scope">
21
+          <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
22
+          <el-popconfirm
23
+            icon="el-icon-info"
24
+            icon-color="red"
25
+            title="这个特征库确定删除吗?"
26
+            @onConfirm='handleDelete(scope.row)'
27
+          >
28
+            <el-button type="text" slot="reference">删除</el-button>
29
+          </el-popconfirm>
30
+        </template>
31
+      </el-table-column>
32
+    </el-table>
33
+  </div>
34
+</template>
35
+<script>
36
+import { getCharacterLibList, deleteCharacterLib } from "@/api/characterLib";
37
+
38
+export default {
39
+  data() {
40
+    return {
41
+      name: undefined,
42
+      tableData: [],
43
+    };
44
+  },
45
+  methods: {
46
+    handleAdd() {
47
+      this.$router.push({ path: "characterLibManage/add" });
48
+    },
49
+    handleEdit(row) {
50
+      this.$router.push({
51
+        path: "characterLibManage/edit",
52
+        query: { id: row.libId },
53
+      });
54
+    },
55
+    handleDelete(row) {
56
+      deleteCharacterLib(row.libId).then(() => {
57
+        this.onRefresh();
58
+      });
59
+    },
60
+    onSearch() {
61
+      getCharacterLibList({ name: this.name }).then((res) => {
62
+        this.tableData = res.data.records;
63
+      });
64
+    },
65
+    onReset() {
66
+      this.name = "";
67
+      this.onRefresh();
68
+    },
69
+    // 刷新表格
70
+    onRefresh() {
71
+      getCharacterLibList().then((res) => {
72
+        this.tableData = res.data.records;
73
+      });
74
+    },
75
+  },
76
+  mounted() {
77
+    this.onRefresh();
78
+  },
79
+};
80
+</script>
81
+<style>
82
+</style>

+ 30
- 0
src/views/dashboard/index.vue Ver arquivo

@@ -0,0 +1,30 @@
1
+<template>
2
+  <div class="dashboard-container">
3
+    <div class="dashboard-text">欢迎使用{{ name }}</div>
4
+  </div>
5
+</template>
6
+
7
+<script>
8
+import { mapGetters } from 'vuex'
9
+
10
+export default {
11
+  name: 'Dashboard',
12
+  computed: {
13
+    ...mapGetters([
14
+      'name'
15
+    ])
16
+  }
17
+}
18
+</script>
19
+
20
+<style lang="scss" scoped>
21
+.dashboard {
22
+  &-container {
23
+    margin: 30px;
24
+  }
25
+  &-text {
26
+    font-size: 30px;
27
+    line-height: 46px;
28
+  }
29
+}
30
+</style>

+ 257
- 0
src/views/login/index.vue Ver arquivo

@@ -0,0 +1,257 @@
1
+<template>
2
+  <div class="login-container">
3
+    <el-form
4
+      ref="loginForm"
5
+      :model="loginForm"
6
+      :rules="loginRules"
7
+      class="login-form"
8
+      auto-complete="on"
9
+      label-position="left"
10
+    >
11
+      <div class="title-container">
12
+        <h3 class="title">Login Form</h3>
13
+      </div>
14
+
15
+      <el-form-item prop="userName">
16
+        <span class="svg-container">
17
+          <svg-icon icon-class="user" />
18
+        </span>
19
+        <el-input
20
+          ref="userName"
21
+          v-model="loginForm.userName"
22
+          placeholder="Username"
23
+          name="userName"
24
+          type="text"
25
+          tabindex="1"
26
+          auto-complete="on"
27
+        />
28
+      </el-form-item>
29
+
30
+      <el-form-item prop="password">
31
+        <span class="svg-container">
32
+          <svg-icon icon-class="password" />
33
+        </span>
34
+        <el-input
35
+          :key="passwordType"
36
+          ref="password"
37
+          v-model="loginForm.password"
38
+          :type="passwordType"
39
+          placeholder="Password"
40
+          name="password"
41
+          tabindex="2"
42
+          auto-complete="on"
43
+          @keyup.enter.native="handleLogin"
44
+        />
45
+        <span class="show-pwd" @click="showPwd">
46
+          <svg-icon
47
+            :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"
48
+          />
49
+        </span>
50
+      </el-form-item>
51
+
52
+      <el-button
53
+        :loading="loading"
54
+        type="primary"
55
+        style="width: 100%; margin-bottom: 30px"
56
+        @click.native.prevent="handleLogin"
57
+        >Login</el-button
58
+      >
59
+
60
+      <div class="tips">
61
+        <span style="margin-right: 20px">userName: admin</span>
62
+        <span> password: any</span>
63
+      </div>
64
+    </el-form>
65
+  </div>
66
+</template>
67
+<script>
68
+import { validUsername } from "@/utils/validate";
69
+import md5 from "js-md5";
70
+export default {
71
+  name: "Login",
72
+  data() {
73
+    const validateUsername = (rule, value, callback) => {
74
+      if (!validUsername(value)) {
75
+        callback(new Error("Please enter the correct user name"));
76
+      } else {
77
+        callback();
78
+      }
79
+    };
80
+    const validatePassword = (rule, value, callback) => {
81
+      if (value.length < 6) {
82
+        callback(new Error("The password can not be less than 6 digits"));
83
+      } else {
84
+        callback();
85
+      }
86
+    };
87
+    return {
88
+      loginForm: {
89
+        userName: "",
90
+        password: "",
91
+      },
92
+      loginRules: {
93
+        userName: [
94
+          { required: true, trigger: "blur", validator: validateUsername },
95
+        ],
96
+        password: [
97
+          { required: true, trigger: "blur", validator: validatePassword },
98
+        ],
99
+      },
100
+      loading: false,
101
+      passwordType: "password",
102
+      redirect: undefined,
103
+    };
104
+  },
105
+  watch: {
106
+    $route: {
107
+      handler: function (route) {
108
+        this.redirect = route.query && route.query.redirect;
109
+      },
110
+      immediate: true,
111
+    },
112
+  },
113
+  methods: {
114
+    showPwd() {
115
+      if (this.passwordType === "password") {
116
+        this.passwordType = "";
117
+      } else {
118
+        this.passwordType = "password";
119
+      }
120
+      this.$nextTick(() => {
121
+        this.$refs.password.focus();
122
+      });
123
+    },
124
+    handleLogin() {
125
+      this.$refs.loginForm.validate((valid) => {
126
+        if (valid) {
127
+          this.loading = true;
128
+          this.loginForm.password = md5(this.loginForm.password);
129
+          this.$store
130
+            .dispatch("user/login", this.loginForm)
131
+            .then(() => {
132
+              this.$router.push({ path: "/" });
133
+              this.loading = false;
134
+            })
135
+            .catch(() => {
136
+              this.loading = false;
137
+            });
138
+        } else {
139
+          console.log("error submit!!");
140
+          return false;
141
+        }
142
+      });
143
+    },
144
+  },
145
+};
146
+</script>
147
+
148
+<style lang="scss">
149
+/* 修复input 背景不协调 和光标变色 */
150
+/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
151
+
152
+$bg: #283443;
153
+$light_gray: #fff;
154
+$cursor: #fff;
155
+
156
+@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
157
+  .login-container .el-input input {
158
+    color: $cursor;
159
+  }
160
+}
161
+
162
+/* reset element-ui css */
163
+.login-container {
164
+  .el-input {
165
+    display: inline-block;
166
+    height: 47px;
167
+    width: 85%;
168
+
169
+    input {
170
+      background: transparent;
171
+      border: 0px;
172
+      -webkit-appearance: none;
173
+      border-radius: 0px;
174
+      padding: 12px 5px 12px 15px;
175
+      color: $light_gray;
176
+      height: 47px;
177
+      caret-color: $cursor;
178
+
179
+      &:-webkit-autofill {
180
+        box-shadow: 0 0 0px 1000px $bg inset !important;
181
+        -webkit-text-fill-color: $cursor !important;
182
+      }
183
+    }
184
+  }
185
+
186
+  .el-form-item {
187
+    border: 1px solid rgba(255, 255, 255, 0.1);
188
+    background: rgba(0, 0, 0, 0.1);
189
+    border-radius: 5px;
190
+    color: #454545;
191
+  }
192
+}
193
+</style>
194
+
195
+<style lang="scss" scoped>
196
+$bg: #2d3a4b;
197
+$dark_gray: #889aa4;
198
+$light_gray: #eee;
199
+
200
+.login-container {
201
+  min-height: 100%;
202
+  width: 100%;
203
+  background-color: $bg;
204
+  overflow: hidden;
205
+
206
+  .login-form {
207
+    position: relative;
208
+    width: 520px;
209
+    max-width: 100%;
210
+    padding: 160px 35px 0;
211
+    margin: 0 auto;
212
+    overflow: hidden;
213
+  }
214
+
215
+  .tips {
216
+    font-size: 14px;
217
+    color: #fff;
218
+    margin-bottom: 10px;
219
+
220
+    span {
221
+      &:first-of-type {
222
+        margin-right: 16px;
223
+      }
224
+    }
225
+  }
226
+
227
+  .svg-container {
228
+    padding: 6px 5px 6px 15px;
229
+    color: $dark_gray;
230
+    vertical-align: middle;
231
+    width: 30px;
232
+    display: inline-block;
233
+  }
234
+
235
+  .title-container {
236
+    position: relative;
237
+
238
+    .title {
239
+      font-size: 26px;
240
+      color: $light_gray;
241
+      margin: 0px auto 40px auto;
242
+      text-align: center;
243
+      font-weight: bold;
244
+    }
245
+  }
246
+
247
+  .show-pwd {
248
+    position: absolute;
249
+    right: 10px;
250
+    top: 7px;
251
+    font-size: 16px;
252
+    color: $dark_gray;
253
+    cursor: pointer;
254
+    user-select: none;
255
+  }
256
+}
257
+</style>

+ 112
- 0
src/views/questionList/edit.vue Ver arquivo

@@ -0,0 +1,112 @@
1
+<template>
2
+  <div class="body_edit">
3
+    <h2 style="text-align: center">题目编辑</h2>
4
+    <el-form ref="form" :model="form" label-width="150px" size="mini">
5
+      <el-form-item label="题目:">
6
+        <el-input type="textarea" v-model="form.title"></el-input>
7
+      </el-form-item>
8
+      <el-form-item label="题目类型:">
9
+        <el-select v-model="form.optType" placeholder="请选择">
10
+          <el-option label="单选题" value="1"></el-option>
11
+          <el-option label="多选题" value="2"></el-option>
12
+          <el-option label="判断题" value="3"></el-option>
13
+        </el-select>
14
+      </el-form-item>
15
+      <el-form-item label="答案:">
16
+        <el-button type="primary" @click="onAddAnswer">添加答案</el-button>
17
+
18
+        <div v-for="(answer, index) in form.answerList" :key="index">
19
+          <AddAnswer
20
+            :value="answer"
21
+            @change="handleChange"
22
+            @handleDelete="() => handleDelete(answer)"
23
+          />
24
+        </div>
25
+      </el-form-item>
26
+      <el-form-item label="正确选项:">
27
+        <!-- <el-input v-model="form.option"></el-input> -->
28
+        <!-- filterable可搜索 multiple可多选 default-first-option回车可选-->
29
+        <el-select
30
+          v-model="rightList"
31
+          multiple
32
+          filterable
33
+          default-first-option
34
+          placeholder="请选择"
35
+        >
36
+          <el-option
37
+            v-for="item in form.answerList"
38
+            :key="item.option"
39
+            :label="item.option"
40
+            :value="item.option"
41
+          >
42
+          </el-option>
43
+        </el-select>
44
+      </el-form-item>
45
+      <el-form-item>
46
+        <el-button type="primary" @click="onSubmit">确定</el-button>
47
+        <el-button @click="onCancel">取消</el-button>
48
+      </el-form-item>
49
+    </el-form>
50
+  </div>
51
+</template>
52
+<script>
53
+import AddAnswer from "@/components/AddAnswer/index.vue";
54
+import { saveQuestion } from "@/api/question";
55
+export default {
56
+  data() {
57
+    return {
58
+      form: {
59
+        title: "",
60
+        optType: "",
61
+        answerList: [],
62
+        option: "",
63
+      },
64
+      rightList: undefined,
65
+    };
66
+  },
67
+
68
+  methods: {
69
+    //添加答案按钮事件
70
+    onAddAnswer() {
71
+      this.form.answerList.push({
72
+        answerId: "",
73
+        questionId: "",
74
+        contentType: "",
75
+        content: "",
76
+      });
77
+    },
78
+    onCancel() {
79
+      this.$router.go(-1);
80
+    },
81
+    onSubmit() {
82
+      this.form.option = this.rightList.toString();
83
+      saveQuestion(this.form).then((res) => {
84
+        console.log(res);
85
+      });
86
+    },
87
+    handleChange(answer) {
88
+      const index = this.form.answerList.indexOf(answer);
89
+      this.$set(this.form.answerList, index, answer);
90
+    },
91
+    handleDelete(answer) {
92
+      this.form.answerList.splice(this.form.answerList.indexOf(answer), 1);
93
+    },
94
+  },
95
+  //进入页面执行的方法
96
+  mounted: function () {
97
+    if (this.$route?.query.row) {
98
+      this.form.title = this.$route.query.row.title;
99
+      this.form.optType = this.$route.query.row.optType;
100
+    }
101
+  },
102
+  components: {
103
+    AddAnswer,
104
+  },
105
+};
106
+</script>
107
+<style>
108
+.body_edit {
109
+  padding: 20px;
110
+  width: 1000px;
111
+}
112
+</style>

+ 139
- 0
src/views/questionList/index.vue Ver arquivo

@@ -0,0 +1,139 @@
1
+<template>
2
+  <div class="body">
3
+    <el-card class="box-card">
4
+      题目内容:<el-input
5
+        v-model="title"
6
+        style="width: 200px; margin-right: 20px"
7
+      />
8
+      题目类型:
9
+      <el-select
10
+        v-model="typeName"
11
+        placeholder="请选择"
12
+        clearable
13
+        style="width: 150px; margin-right: 20px"
14
+      >
15
+        <el-option
16
+          v-for="item in typeOptions"
17
+          :key="item.key"
18
+          :label="item.value"
19
+          :value="item.key"
20
+        >
21
+        </el-option>
22
+      </el-select>
23
+      状态:
24
+      <el-select
25
+        v-model="status"
26
+        placeholder="请选择"
27
+        clearable
28
+        style="width: 150px; margin-right: 20px"
29
+      >
30
+        <el-option
31
+          v-for="item in statusOptions"
32
+          :key="item.key"
33
+          :label="item.value"
34
+          :value="item.key"
35
+        >
36
+        </el-option>
37
+      </el-select>
38
+      <el-button type="primary" @click="onSearch">查询</el-button>
39
+      <el-button @click="onReset">重置</el-button>
40
+      <el-button type="primary" @click="handleAdd">添加问题</el-button>
41
+    </el-card>
42
+    <el-table stripe :data="tableData" border style="width: 100%">
43
+      <el-table-column prop="title" label="题目内容" />
44
+      <el-table-column prop="optType" label="题目类型">
45
+        <template slot-scope="scope">
46
+          {{scope.row.optType===1?'单选题':scope.row.optType===2?'多选题':'判断题'}}
47
+        </template>
48
+      </el-table-column>
49
+      <el-table-column prop="status" label="状态" />
50
+      <el-table-column fixed="right" label="操作">
51
+        <template slot-scope="scope">
52
+          <el-button type="text">发布</el-button>
53
+          <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
54
+          <el-button type="text">删除</el-button>
55
+        </template>
56
+      </el-table-column>
57
+    </el-table>
58
+  </div>
59
+</template>
60
+
61
+<script>
62
+export default {
63
+  data() {
64
+    return {
65
+      title: "",
66
+      typeOptions: [
67
+        {
68
+          key: 1,
69
+          value: "单选题",
70
+        },
71
+        {
72
+          key: 2,
73
+          value: "多选题",
74
+        },
75
+        {
76
+          key: 3,
77
+          value: "判断题",
78
+        },
79
+      ],
80
+      statusOptions: [
81
+        {
82
+          key: 1,
83
+          value: "已发布",
84
+        },
85
+        {
86
+          key: 0,
87
+          value: "未发布",
88
+        },
89
+      ],
90
+      typeName: "",
91
+      status: "",
92
+      tableData: [
93
+        {
94
+          title: "李寻欢是那部小说里的人物",
95
+          optType: 2,
96
+          status: "未发布",
97
+        },
98
+        {
99
+          title: "圆周率小数点后第六位是",
100
+          optType: 1,
101
+          status: "未发布",
102
+        },
103
+        {
104
+          title: "我们现在吃的大米是杂交水稻吗",
105
+          optType: 3,
106
+          status: "未发布",
107
+        },
108
+        {
109
+          title: "西游记里孙悟空号称齐天大圣那牛魔王称号是什么",
110
+          optType: 1,
111
+          status: "未发布",
112
+        },
113
+      ],
114
+    };
115
+  },
116
+  methods: {
117
+    handleAdd() {
118
+      this.$router.push({ path: "questionList/edit" });
119
+    },
120
+    handleEdit(row) {
121
+      this.$router.push({ path: "questionList/edit", query: { row: row } });
122
+    },
123
+    onSearch() {
124
+      console.log(this.title, this.typeName, this.status);
125
+    },
126
+    onReset() {
127
+      this.title = "";
128
+      this.typeName = "";
129
+      this.status = "";
130
+    },
131
+  },
132
+  mounted(){
133
+  }
134
+};
135
+</script>
136
+
137
+<style>
138
+
139
+</style>

+ 5
- 0
tests/unit/.eslintrc.js Ver arquivo

@@ -0,0 +1,5 @@
1
+module.exports = {
2
+  env: {
3
+    jest: true
4
+  }
5
+}

+ 70
- 0
tests/unit/components/Breadcrumb.spec.js Ver arquivo

@@ -0,0 +1,70 @@
1
+import { mount, createLocalVue } from '@vue/test-utils'
2
+import VueRouter from 'vue-router'
3
+import ElementUI from 'element-ui'
4
+import Breadcrumb from '@/components/Breadcrumb/index.vue'
5
+
6
+const localVue = createLocalVue()
7
+localVue.use(VueRouter)
8
+localVue.use(ElementUI)
9
+
10
+const routes = [
11
+  {
12
+    path: '/',
13
+    name: 'home',
14
+    children: [{
15
+      path: 'dashboard',
16
+      name: 'dashboard'
17
+    }]
18
+  },  
19
+]
20
+
21
+const router = new VueRouter({
22
+  routes
23
+})
24
+
25
+describe('Breadcrumb.vue', () => {
26
+  const wrapper = mount(Breadcrumb, {
27
+    localVue,
28
+    router
29
+  })
30
+  it('dashboard', () => {
31
+    router.push('/dashboard')
32
+    const len = wrapper.findAll('.el-breadcrumb__inner').length
33
+    expect(len).toBe(1)
34
+  })
35
+  it('normal route', () => {
36
+    router.push('/menu/menu1')
37
+    const len = wrapper.findAll('.el-breadcrumb__inner').length
38
+    expect(len).toBe(2)
39
+  })
40
+  it('nested route', () => {
41
+    router.push('/menu/menu1/menu1-2/menu1-2-1')
42
+    const len = wrapper.findAll('.el-breadcrumb__inner').length
43
+    expect(len).toBe(4)
44
+  })
45
+  it('no meta.title', () => {
46
+    router.push('/menu/menu1/menu1-2/menu1-2-2')
47
+    const len = wrapper.findAll('.el-breadcrumb__inner').length
48
+    expect(len).toBe(3)
49
+  })
50
+  // it('click link', () => {
51
+  //   router.push('/menu/menu1/menu1-2/menu1-2-2')
52
+  //   const breadcrumbArray = wrapper.findAll('.el-breadcrumb__inner')
53
+  //   const second = breadcrumbArray.at(1)
54
+  //   console.log(breadcrumbArray)
55
+  //   const href = second.find('a').attributes().href
56
+  //   expect(href).toBe('#/menu/menu1')
57
+  // })
58
+  // it('noRedirect', () => {
59
+  //   router.push('/menu/menu1/menu1-2/menu1-2-1')
60
+  //   const breadcrumbArray = wrapper.findAll('.el-breadcrumb__inner')
61
+  //   const redirectBreadcrumb = breadcrumbArray.at(2)
62
+  //   expect(redirectBreadcrumb.contains('a')).toBe(false)
63
+  // })
64
+  it('last breadcrumb', () => {
65
+    router.push('/menu/menu1/menu1-2/menu1-2-1')
66
+    const breadcrumbArray = wrapper.findAll('.el-breadcrumb__inner')
67
+    const redirectBreadcrumb = breadcrumbArray.at(3)
68
+    expect(redirectBreadcrumb.contains('a')).toBe(false)
69
+  })
70
+})

+ 18
- 0
tests/unit/components/Hamburger.spec.js Ver arquivo

@@ -0,0 +1,18 @@
1
+import { shallowMount } from '@vue/test-utils'
2
+import Hamburger from '@/components/Hamburger/index.vue'
3
+describe('Hamburger.vue', () => {
4
+  it('toggle click', () => {
5
+    const wrapper = shallowMount(Hamburger)
6
+    const mockFn = jest.fn()
7
+    wrapper.vm.$on('toggleClick', mockFn)
8
+    wrapper.find('.hamburger').trigger('click')
9
+    expect(mockFn).toBeCalled()
10
+  })
11
+  it('prop isActive', () => {
12
+    const wrapper = shallowMount(Hamburger)
13
+    wrapper.setProps({ isActive: true })
14
+    expect(wrapper.contains('.is-active')).toBe(true)
15
+    wrapper.setProps({ isActive: false })
16
+    expect(wrapper.contains('.is-active')).toBe(false)
17
+  })
18
+})

+ 22
- 0
tests/unit/components/SvgIcon.spec.js Ver arquivo

@@ -0,0 +1,22 @@
1
+import { shallowMount } from '@vue/test-utils'
2
+import SvgIcon from '@/components/SvgIcon/index.vue'
3
+describe('SvgIcon.vue', () => {
4
+  it('iconClass', () => {
5
+    const wrapper = shallowMount(SvgIcon, {
6
+      propsData: {
7
+        iconClass: 'test'
8
+      }
9
+    })
10
+    expect(wrapper.find('use').attributes().href).toBe('#icon-test')
11
+  })
12
+  it('className', () => {
13
+    const wrapper = shallowMount(SvgIcon, {
14
+      propsData: {
15
+        iconClass: 'test'
16
+      }
17
+    })
18
+    expect(wrapper.classes().length).toBe(1)
19
+    wrapper.setProps({ className: 'test' })
20
+    expect(wrapper.classes().includes('test')).toBe(true)
21
+  })
22
+})

+ 30
- 0
tests/unit/utils/formatTime.spec.js Ver arquivo

@@ -0,0 +1,30 @@
1
+import { formatTime } from '@/utils/index.js'
2
+
3
+describe('Utils:formatTime', () => {
4
+  const d = new Date('2018-07-13 17:54:01') // "2018-07-13 17:54:01"
5
+  const retrofit = 5 * 1000
6
+
7
+  it('ten digits timestamp', () => {
8
+    expect(formatTime((d / 1000).toFixed(0))).toBe('7月13日17时54分')
9
+  })
10
+  it('test now', () => {
11
+    expect(formatTime(+new Date() - 1)).toBe('刚刚')
12
+  })
13
+  it('less two minute', () => {
14
+    expect(formatTime(+new Date() - 60 * 2 * 1000 + retrofit)).toBe('2分钟前')
15
+  })
16
+  it('less two hour', () => {
17
+    expect(formatTime(+new Date() - 60 * 60 * 2 * 1000 + retrofit)).toBe('2小时前')
18
+  })
19
+  it('less one day', () => {
20
+    expect(formatTime(+new Date() - 60 * 60 * 24 * 1 * 1000)).toBe('1天前')
21
+  })
22
+  it('more than one day', () => {
23
+    expect(formatTime(d)).toBe('7月13日17时54分')
24
+  })
25
+  it('format', () => {
26
+    expect(formatTime(d, '{y}-{m}-{d} {h}:{i}')).toBe('2018-07-13 17:54')
27
+    expect(formatTime(d, '{y}-{m}-{d}')).toBe('2018-07-13')
28
+    expect(formatTime(d, '{y}/{m}/{d} {h}-{i}')).toBe('2018/07/13 17-54')
29
+  })
30
+})

+ 14
- 0
tests/unit/utils/param2Obj.spec.js Ver arquivo

@@ -0,0 +1,14 @@
1
+import { param2Obj } from '@/utils/index.js'
2
+describe('Utils:param2Obj', () => {
3
+  const url = 'https://github.com/PanJiaChen/vue-element-admin?name=bill&age=29&sex=1&field=dGVzdA==&key=%E6%B5%8B%E8%AF%95'
4
+
5
+  it('param2Obj test', () => {
6
+    expect(param2Obj(url)).toEqual({
7
+      name: 'bill',
8
+      age: '29',
9
+      sex: '1',
10
+      field: window.btoa('test'),
11
+      key: '测试'
12
+    })
13
+  })
14
+})

+ 35
- 0
tests/unit/utils/parseTime.spec.js Ver arquivo

@@ -0,0 +1,35 @@
1
+import { parseTime } from '@/utils/index.js'
2
+
3
+describe('Utils:parseTime', () => {
4
+  const d = new Date('2018-07-13 17:54:01') // "2018-07-13 17:54:01"
5
+  it('timestamp', () => {
6
+    expect(parseTime(d)).toBe('2018-07-13 17:54:01')
7
+  })
8
+  it('timestamp string', () => {
9
+    expect(parseTime((d + ''))).toBe('2018-07-13 17:54:01')
10
+  })
11
+  it('ten digits timestamp', () => {
12
+    expect(parseTime((d / 1000).toFixed(0))).toBe('2018-07-13 17:54:01')
13
+  })
14
+  it('new Date', () => {
15
+    expect(parseTime(new Date(d))).toBe('2018-07-13 17:54:01')
16
+  })
17
+  it('format', () => {
18
+    expect(parseTime(d, '{y}-{m}-{d} {h}:{i}')).toBe('2018-07-13 17:54')
19
+    expect(parseTime(d, '{y}-{m}-{d}')).toBe('2018-07-13')
20
+    expect(parseTime(d, '{y}/{m}/{d} {h}-{i}')).toBe('2018/07/13 17-54')
21
+  })
22
+  it('get the day of the week', () => {
23
+    expect(parseTime(d, '{a}')).toBe('五') // 星期五
24
+  })
25
+  it('get the day of the week', () => {
26
+    expect(parseTime(+d + 1000 * 60 * 60 * 24 * 2, '{a}')).toBe('日') // 星期日
27
+  })
28
+  it('empty argument', () => {
29
+    expect(parseTime()).toBeNull()
30
+  })
31
+
32
+  it('null', () => {
33
+    expect(parseTime(null)).toBeNull()
34
+  })
35
+})

+ 17
- 0
tests/unit/utils/validate.spec.js Ver arquivo

@@ -0,0 +1,17 @@
1
+import { validUsername, isExternal } from '@/utils/validate.js'
2
+
3
+describe('Utils:validate', () => {
4
+  it('validUsername', () => {
5
+    expect(validUsername('admin')).toBe(true)
6
+    expect(validUsername('editor')).toBe(true)
7
+    expect(validUsername('xxxx')).toBe(false)
8
+  })
9
+  it('isExternal', () => {
10
+    expect(isExternal('https://github.com/PanJiaChen/vue-element-admin')).toBe(true)
11
+    expect(isExternal('http://github.com/PanJiaChen/vue-element-admin')).toBe(true)
12
+    expect(isExternal('github.com/PanJiaChen/vue-element-admin')).toBe(false)
13
+    expect(isExternal('/dashboard')).toBe(false)
14
+    expect(isExternal('./dashboard')).toBe(false)
15
+    expect(isExternal('dashboard')).toBe(false)
16
+  })
17
+})

+ 129
- 0
vue.config.js Ver arquivo

@@ -0,0 +1,129 @@
1
+'use strict'
2
+const path = require('path')
3
+const defaultSettings = require('./src/settings.js')
4
+
5
+function resolve(dir) {
6
+  return path.join(__dirname, dir)
7
+}
8
+
9
+const name = defaultSettings.title || 'vue Admin Template' // page title
10
+
11
+// If your port is set to 80,
12
+// use administrator privileges to execute the command line.
13
+// For example, Mac: sudo npm run
14
+// You can change the port by the following methods:
15
+// port = 9528 npm run dev OR npm run dev --port = 9528
16
+const port = process.env.port || process.env.npm_config_port || 9528 // dev port
17
+
18
+// All configuration item explanations can be find in https://cli.vuejs.org/config/
19
+module.exports = {
20
+  /**
21
+   * You will need to set publicPath if you plan to deploy your site under a sub path,
22
+   * for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,
23
+   * then publicPath should be set to "/bar/".
24
+   * In most cases please use '/' !!!
25
+   * Detail: https://cli.vuejs.org/config/#publicpath
26
+   */
27
+  publicPath: '/',
28
+  outputDir: 'dist',
29
+  assetsDir: 'static',
30
+  lintOnSave: process.env.NODE_ENV === 'development',
31
+  productionSourceMap: false,
32
+  devServer: {
33
+    open: true,
34
+    proxy: {
35
+      '/api': {
36
+        target: 'http://192.168.89.147:8080',
37
+        changeOrigin: true
38
+      },
39
+    }
40
+    // port: port,
41
+    // overlay: {
42
+    //   warnings: false,
43
+    //   errors: true
44
+    // },
45
+    // before: require('./mock/mock-server.js')
46
+  },
47
+  configureWebpack: {
48
+    // provide the app's title in webpack's name field, so that
49
+    // it can be accessed in index.html to inject the correct title.
50
+    name: name,
51
+    resolve: {
52
+      alias: {
53
+        '@': resolve('src')
54
+      }
55
+    }
56
+  },
57
+  chainWebpack(config) {
58
+    // it can improve the speed of the first screen, it is recommended to turn on preload
59
+    config.plugin('preload').tap(() => [
60
+      {
61
+        rel: 'preload',
62
+        // to ignore runtime.js
63
+        // https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/config/app.js#L171
64
+        fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
65
+        include: 'initial'
66
+      }
67
+    ])
68
+
69
+    // when there are many pages, it will cause too many meaningless requests
70
+    config.plugins.delete('prefetch')
71
+
72
+    // set svg-sprite-loader
73
+    config.module
74
+      .rule('svg')
75
+      .exclude.add(resolve('src/icons'))
76
+      .end()
77
+    config.module
78
+      .rule('icons')
79
+      .test(/\.svg$/)
80
+      .include.add(resolve('src/icons'))
81
+      .end()
82
+      .use('svg-sprite-loader')
83
+      .loader('svg-sprite-loader')
84
+      .options({
85
+        symbolId: 'icon-[name]'
86
+      })
87
+      .end()
88
+
89
+    config
90
+      .when(process.env.NODE_ENV !== 'development',
91
+        config => {
92
+          config
93
+            .plugin('ScriptExtHtmlWebpackPlugin')
94
+            .after('html')
95
+            .use('script-ext-html-webpack-plugin', [{
96
+            // `runtime` must same as runtimeChunk name. default is `runtime`
97
+              inline: /runtime\..*\.js$/
98
+            }])
99
+            .end()
100
+          config
101
+            .optimization.splitChunks({
102
+              chunks: 'all',
103
+              cacheGroups: {
104
+                libs: {
105
+                  name: 'chunk-libs',
106
+                  test: /[\\/]node_modules[\\/]/,
107
+                  priority: 10,
108
+                  chunks: 'initial' // only package third parties that are initially dependent
109
+                },
110
+                elementUI: {
111
+                  name: 'chunk-elementUI', // split elementUI into a single package
112
+                  priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
113
+                  test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
114
+                },
115
+                commons: {
116
+                  name: 'chunk-commons',
117
+                  test: resolve('src/components'), // can customize your rules
118
+                  minChunks: 3, //  minimum common number
119
+                  priority: 5,
120
+                  reuseExistingChunk: true
121
+                }
122
+              }
123
+            })
124
+          // https:// webpack.js.org/configuration/optimization/#optimizationruntimechunk
125
+          config.optimization.runtimeChunk('single')
126
+        }
127
+      )
128
+  }
129
+}

+ 11215
- 0
yarn.lock
Diferenças do arquivo suprimidas por serem muito extensas
Ver arquivo