🎨 项目结构改进

package.json

@@ -28,8 +28,8 @@
   },
   "devDependencies": {
     "@types/chai": "^4.1.0",
-    "@types/mocha": "^5.2.4",
     "@types/js-cookie": "^2.2.2",
+    "@types/mocha": "^5.2.4",
     "@types/nprogress": "^0.2.0",
     "@types/webpack-env": "^1.14.0",
     "@vue/cli-plugin-babel": "^3.11.0",
@@ -42,17 +42,18 @@
     "@vue/test-utils": "1.0.0-beta.29",
     "babel-eslint": "^10.0.1",
     "babel-plugin-component": "^1.1.1",
-    "style-resources-loader": "^1.2.1",
-    "vue-cli-plugin-element": "^1.0.1",
-    "vue-cli-plugin-style-resources-loader": "^0.1.3",
     "chai": "^4.1.2",
     "eslint": "^5.16.0",
     "eslint-plugin-prettier": "^3.1.0",
     "eslint-plugin-vue": "^5.0.0",
     "less": "^3.0.4",
     "less-loader": "^5.0.0",
     "prettier": "^1.18.2",
+    "style-resources-loader": "^1.2.1",
     "typescript": "^3.4.3",
-    "vue-template-compiler": "^2.6.10"
+    "vue-cli-plugin-element": "^1.0.1",
+    "vue-cli-plugin-style-resources-loader": "^0.1.3",
+    "vue-template-compiler": "^2.6.10",
+    "webpack": "^4.41.0"
   }
 }

src/icons/README.md

@@ -0,0 +1,13 @@
+# vue-svgicon
+
+## English
+
+* All svg components were generated by `vue-svgicon` using svg files
+* After you adding new svg files into `icons/svg` folder, run `yarn svg` to regerenrate all svg components (before this, you should have `vue-svgicon` installed globally or use `npx`)
+* See details at: [https://github.com/MMF-FE/vue-svgicon](https://github.com/MMF-FE/vue-svgicon)
+
+## 中文
+
+* 所有的 svg 组件都是由 `vue-svgicon` 生成的
+* 每当在 `icons/svg` 文件夹内添加 icon 之后，可以通过执行 `yarn svg` 来重新生成所有组件 (在此之前需要全局安装 `vue-svgicon` 或使用 `npx`)
+* 详细文档请见：[https://github.com/MMF-FE/vue-svgicon](https://github.com/MMF-FE/vue-svgicon)

src/icons/components/dashboard.ts

@@ -0,0 +1,12 @@
+/* eslint-disable */
+/* tslint:disable */
+// @ts-ignore
+import icon from 'vue-svgicon'
+icon.register({
+  'dashboard': {
+    width: 128,
+    height: 100,
+    viewBox: '0 0 128 100',
+    data: '<path pid="0" d="M27.4 63.6c0-2.5-.9-4.6-2.6-6.4a8.8 8.8 0 0 0-6.5-2.6c-2.5 0-4.7.8-6.5 2.6a8.7 8.7 0 0 0-2.7 6.4c0 2.5 1 4.7 2.7 6.5 1.8 1.7 4 2.6 6.5 2.6s4.7-.9 6.5-2.6c1.7-1.8 2.6-4 2.6-6.5zm13.7-31.8c0-2.5-.9-4.6-2.6-6.4a8.8 8.8 0 0 0-6.5-2.6c-2.5 0-4.7.8-6.5 2.6a8.7 8.7 0 0 0-2.6 6.4c0 2.5.9 4.7 2.6 6.5 1.8 1.7 4 2.6 6.5 2.6s4.7-.9 6.5-2.6c1.7-1.8 2.6-4 2.6-6.5zM71.7 66L79 38.9c.3-1.3.1-2.4-.5-3.5a4.5 4.5 0 0 0-8.3 1.2L63 63.7a13.6 13.6 0 1 0 8 25.4 13 13 0 0 0 6.4-8.4A13.5 13.5 0 0 0 71.7 66zm47.2-2.4c0-2.5-1-4.6-2.7-6.4a8.8 8.8 0 0 0-6.5-2.6c-2.5 0-4.7.8-6.5 2.6a8.7 8.7 0 0 0-2.6 6.4c0 2.5.9 4.7 2.7 6.5 1.7 1.7 3.9 2.6 6.4 2.6 2.5 0 4.7-.9 6.5-2.6 1.8-1.8 2.7-4 2.7-6.5zM73 18.2c0-2.5-.8-4.6-2.6-6.4A8.8 8.8 0 0 0 64 9c-2.5 0-4.7 1-6.5 2.7a8.7 8.7 0 0 0-2.6 6.4c0 2.5.9 4.7 2.6 6.4 1.8 1.8 4 2.7 6.5 2.7s4.7-.9 6.5-2.7c1.7-1.7 2.6-3.9 2.6-6.4zm32 13.6c0-2.5-.8-4.6-2.6-6.4a8.8 8.8 0 0 0-6.5-2.6c-2.5 0-4.7.8-6.5 2.6a8.7 8.7 0 0 0-2.6 6.4c0 2.5.8 4.7 2.6 6.5 1.8 1.7 4 2.6 6.5 2.6s4.7-.9 6.5-2.6c1.7-1.8 2.6-4 2.6-6.5zm23 31.8c0 12.4-3.4 23.8-10 34.3-1 1.4-2.3 2-4 2H14c-1.7 0-3-.6-4-2a62.2 62.2 0 0 1-5-59 63.9 63.9 0 0 1 123 24.7z"/>'
+  }
+})

src/icons/components/example.ts

@@ -0,0 +1,12 @@
+/* eslint-disable */
+/* tslint:disable */
+// @ts-ignore
+import icon from 'vue-svgicon'
+icon.register({
+  'example': {
+    width: 128,
+    height: 128,
+    viewBox: '0 0 128 128',
+    data: '<path pid="0" d="M96.3 57.5h31.4A64.2 64.2 0 0 0 70.3 0v31.4a32.9 32.9 0 0 1 26 26zm-38.8-26V0A64.2 64.2 0 0 0 0 57.5h31.4a32.9 32.9 0 0 1 26-26zm12.8 64.8v31.4A64.5 64.5 0 0 0 128 70H96.6a33.6 33.6 0 0 1-26.3 26.3zm-38.8-26H0A64.5 64.5 0 0 0 57.8 128V96.6a33.6 33.6 0 0 1-26.3-26.3z"/>'
+  }
+})

src/icons/components/eye-off.ts

@@ -0,0 +1,12 @@
+/* eslint-disable */
+/* tslint:disable */
+// @ts-ignore
+import icon from 'vue-svgicon'
+icon.register({
+  'eye-off': {
+    width: 128,
+    height: 64,
+    viewBox: '0 0 128 64',
+    data: '<path pid="0" d="M127 8c1.4-2.2 1-5.2-.8-6.9-2.1-1.7-4.8-1.2-6.4 1-.3.3-25.6 32.4-55.8 32.4C34.8 34.5 8.3 2 8 1.9a4.4 4.4 0 0 0-6.3-.5 5.2 5.2 0 0 0-.5 6.8c.5.8 6 7.4 14.6 14.8L4.2 36a5 5 0 0 0 .2 6.8c.5 1 1.6 1.5 2.7 1.5s2.3-.5 3.2-1.5l12.6-14a87 87 0 0 0 20.8 11.6l-4.8 17.4c-.7 2.7.7 5.4 3.2 6.1h1.4c2 0 3.8-1.4 4.3-3.7l4.8-17.4a58.3 58.3 0 0 0 22.8 0L80.2 60a4.7 4.7 0 0 0 4.4 3.7c.4 0 .9 0 1.1-.3 2.5-.7 4-3.4 3.2-6.1l-4.8-17.2A87 87 0 0 0 105 28.6l12.3 13.7c1 1 2.1 1.5 3.2 1.5s2.3-.5 3.2-1.5c1.9-2 1.9-4.9.3-6.8l-11.7-13C121.6 15 127.1 8 127.1 8z"/>'
+  }
+})

src/icons/components/eye-on.ts

@@ -0,0 +1,12 @@
+/* eslint-disable */
+/* tslint:disable */
+// @ts-ignore
+import icon from 'vue-svgicon'
+icon.register({
+  'eye-on': {
+    width: 128,
+    height: 128,
+    viewBox: '0 0 1024 1024',
+    data: '<defs/><path pid="0" d="M512 128q69.7 0 135.5 21.2t115.5 55 93.5 74.8 73.7 82 51.6 74.8 32.2 54.9l10 21.3-6.3 13.5q-4 8.5-18.8 34.7t-31.7 51.6-44.3 60-56.9 64.4-69.5 60.1-82.3 51.5-94.9 34.7T512 896q-69.7 0-135.5-21.2T261 820t-93.5-74.3-73.7-81.5-51.6-74.5-32.2-55l-10-21 6.3-13.5q4-8.5 18.8-34.8t31.7-51.8 44.3-60.4 56.9-64.6 69.5-60.4 82.3-51.8 94.9-34.8T512 128zm0 85.3q-46.7 0-91.6 12.4t-81.2 31.8-70.7 47.1-59.6 54.5-48.9 57.7-37.6 52.8-26.4 44q12.4 21.7 26.4 43.5t37.6 52.4 48.9 57 59.6 53.8 70.7 46.7 81.2 31.5 91.6 12.2 91.6-12.4 81.2-31.6 70.7-46.9 59.6-54.2 48.9-57.3 37.6-52.7T928 512q-12.4-21.7-26.4-43.6T864 415.7t-49-57.3-59.6-54.2-70.7-46.9-81.2-31.6-91.6-12.4zm0 128q70.7 0 120.7 50t50 120.7-50 120.7-120.7 50-120.7-50-50-120.7 50-120.7 120.7-50zm0 85.4q-35.3 0-60.3 25t-25 60.3 25 60.3 60.3 25 60.3-25 25-60.3-25-60.3-60.3-25z"/>'
+  }
+})

src/icons/components/form.ts

@@ -0,0 +1,12 @@
+/* eslint-disable */
+/* tslint:disable */
+// @ts-ignore
+import icon from 'vue-svgicon'
+icon.register({
+  'form': {
+    width: 128,
+    height: 128,
+    viewBox: '0 0 128 128',
+    data: '<path pid="0" d="M84 23.8c-1 0-1.8-.3-2.5-1a8.6 8.6 0 0 1-1.7-2.2 11.5 11.5 0 0 1-1-2.6c-.3-1-.4-1.7-.4-2.3V0h.2c.9 0 1.7 0 2.4.3.8.1 1.7.5 2.7 1.2l4 2.7a211.6 211.6 0 0 1 11.7 9.7c1.4 1.4 2.6 2.6 3.4 3.6.8 1 1.2 1.8 1.4 2.4l.3 1.8v2H84.1zM127.4 84c.3.7.5 1.5.6 2.6 0 1-.4 2-1.4 3a30.4 30.4 0 0 0-2.3 2 6.7 6.7 0 0 1-1 .9l-11.7-10.8a44.3 44.3 0 0 0 1.8-1.5 31 31 0 0 1 1.8-1.4c1-1 2.3-1.4 3.6-1.2a9 9 0 0 1 6.2 3c1 1 1.8 2.2 2.4 3.4zM78.3 96c2 0 3.7-.5 5-1.5l-26.9 25.8H18c-1.7 0-3.6-.5-5.7-1.4a24.5 24.5 0 0 1-5.9-3.7 21.4 21.4 0 0 1-4.5-5.3c-1.2-2-1.8-4-1.8-6.2V16.5c0-1.8.4-3.7 1.3-5.6A18.4 18.4 0 0 1 5 5.6a21.8 21.8 0 0 1 5.3-4c1.9-1 4-1.6 6-1.6h53.3v16c0 1.6.3 3.4.8 5.2a16.7 16.7 0 0 0 2.6 5.2A13.2 13.2 0 0 0 84.2 32h20.3v42.3l-19 18.2c1-1.4 1.5-3 1.5-4.5 0-2.2-.9-4.1-2.6-5.7a8.8 8.8 0 0 0-6.2-2.4H26.1c-2.4 0-4.4.8-6.1 2.4a7.6 7.6 0 0 0-2.5 5.7c0 2.2.8 4 2.5 5.6a8.7 8.7 0 0 0 6.1 2.3h52.1zM26 47.9c-2.4 0-4.4.8-6.1 2.4a7.6 7.6 0 0 0-2.5 5.7c0 2.2.8 4.1 2.5 5.6A8.7 8.7 0 0 0 26 64h52.1a9 9 0 0 0 6.2-2.3A7.3 7.3 0 0 0 87 56c0-2.2-.9-4.1-2.6-5.7a8.8 8.8 0 0 0-6.2-2.3H26.1zM78.5 112l1.8-1.6 3.5-3.2a479.8 479.8 0 0 0 4.6-4.3 500.8 500.8 0 0 1 5-4.7l13.5-12.3 11.6 10.8-13.4 12.4-5 4.6-4.6 4.2a179.5 179.5 0 0 0-3.3 3l-1.5 1.5a62.2 62.2 0 0 1-3.2 2l-2.5 1a83.5 83.5 0 0 1-3.6 1 72.2 72.2 0 0 1-3.4 1l-2.6.5c-1 .1-1.8 0-2.2-.4-.3-.4-.4-1.2-.3-2.2a30 30 0 0 1 1.6-5.4l1-3 .8-2a10.2 10.2 0 0 1 2.2-2.9z"/>'
+  }
+})

src/icons/components/hamburger.ts

@@ -0,0 +1,12 @@
+/* eslint-disable */
+/* tslint:disable */
+// @ts-ignore
+import icon from 'vue-svgicon'
+icon.register({
+  'hamburger': {
+    width: 64,
+    height: 64,
+    viewBox: '0 0 1024 1024',
+    data: '<path pid="0" d="M408 442h480a8 8 0 0 0 8-8v-56a8 8 0 0 0-8-8H408a8 8 0 0 0-8 8v56a8 8 0 0 0 8 8zm-8 204a8 8 0 0 0 8 8h480a8 8 0 0 0 8-8v-56a8 8 0 0 0-8-8H408a8 8 0 0 0-8 8v56zm504-486H120a8 8 0 0 0-8 8v56a8 8 0 0 0 8 8h784a8 8 0 0 0 8-8v-56a8 8 0 0 0-8-8zm0 632H120a8 8 0 0 0-8 8v56a8 8 0 0 0 8 8h784a8 8 0 0 0 8-8v-56a8 8 0 0 0-8-8zM142.4 642.1L298.7 519a8.8 8.8 0 0 0 0-13.9L142.4 381.9a8.9 8.9 0 0 0-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z"/>'
+  }
+})

src/icons/components/index.ts

@@ -0,0 +1,13 @@
+/* tslint:disable */
+import './dashboard'
+import './example'
+import './eye-off'
+import './eye-on'
+import './form'
+import './hamburger'
+import './link'
+import './nested'
+import './password'
+import './table'
+import './tree'
+import './user'

src/icons/components/link.ts

@@ -0,0 +1,12 @@
+/* eslint-disable */
+/* tslint:disable */
+// @ts-ignore
+import icon from 'vue-svgicon'
+icon.register({
+  'link': {
+    width: 128,
+    height: 128,
+    viewBox: '0 0 128 128',
+    data: '<path pid="0" d="M115.6 128H.1V12.3h57.7v12.3H12.4v90.9h90.9V70.2h12.3z"/><path pid="1" d="M116.4 2.8l8.8 8.8-56.8 56.7-8.7-8.7z"/><path pid="2" d="M127.9 38h-12.4V12.4H88.7V0H128z"/>'
+  }
+})

src/icons/components/nested.ts

@@ -0,0 +1,12 @@
+/* eslint-disable */
+/* tslint:disable */
+// @ts-ignore
+import icon from 'vue-svgicon'
+icon.register({
+  'nested': {
+    width: 128,
+    height: 128,
+    viewBox: '0 0 128 128',
+    data: '<path pid="0" d="M0 9.2c0 5 3.6 9.1 8 9.1s8-4 8-9.1c0-5-3.6-9.1-8-9.1S0 4 0 9.2zM32 .1h96v18.2H32V.1zm0 45.6c0 5 3.6 9.2 8 9.2s8-4.1 8-9.2c0-3.2-1.5-6.2-4-7.9a7.2 7.2 0 0 0-8 0 9.4 9.4 0 0 0-4 8zm32-9.1h64v18.3H64V36.6zm-32 82.2c0 5 3.6 9.1 8 9.1s8-4 8-9.1c0-5-3.6-9.1-8-9.1s-8 4-8 9.1zm32-9.1h64v18.2H64v-18.2zm0-27.4c0 5 3.6 9.1 8 9.1s8-4 8-9.1c0-3.3-1.5-6.3-4-8a7.1 7.1 0 0 0-8 0 9.4 9.4 0 0 0-4 8zM96 73h32v18.3H96V73.1z"/>'
+  }
+})

src/icons/components/password.ts

@@ -0,0 +1,12 @@
+/* eslint-disable */
+/* tslint:disable */
+// @ts-ignore
+import icon from 'vue-svgicon'
+icon.register({
+  'password': {
+    width: 128,
+    height: 128,
+    viewBox: '0 0 128 128',
+    data: '<path pid="0" d="M108.8 44.3H89.6V39c0-9-3.3-24.2-25.6-24.2-23.1 0-25.6 16.9-25.6 24.2v5.3H19.2V39C19.2 15.3 36.8 0 64 0c27.2 0 44.8 15.3 44.8 39v5.3zm-32 39.4c0-5.5-5.8-9.9-12.8-9.9-7 0-12.8 4.4-12.8 9.9 0 3.7 2.6 6.8 6.4 8.5v11.2c0 2.7 2.9 5 6.4 5 3.5 0 6.4-2.3 6.4-5V92.2c3.8-1.7 6.4-4.8 6.4-8.5zM128 64v49.2c0 8.2-8.6 14.8-19.2 14.8H19.2C8.7 128 0 121.4 0 113.2V64c0-8.2 8.6-14.8 19.2-14.8h89.6c10.6 0 19.2 6.6 19.2 14.8z"/>'
+  }
+})

src/icons/components/table.ts

@@ -0,0 +1,12 @@
+/* eslint-disable */
+/* tslint:disable */
+// @ts-ignore
+import icon from 'vue-svgicon'
+icon.register({
+  'table': {
+    width: 128,
+    height: 128,
+    viewBox: '0 0 128 128',
+    data: '<path pid="0" d="M0 0h128v31.2H0V0zm0 38h38.4v41.6H0V38zm0 48.5h38.4v41.4H0V86.5zM44.8 38h38.4v41.5H44.8V38zm0 48.4h38.4v41.4H44.8V86.5zM89.6 38H128v41.5H89.6zm0 48.4H128v41.4H89.6z"/><path pid="1" d="M0 0h128v31.2H0V0zm0 38h38.4v41.6H0V38zm0 48.5h38.4v41.4H0V86.5zM44.8 38h38.4v41.5H44.8V38zm0 48.4h38.4v41.4H44.8V86.5zM89.6 38H128v41.5H89.6zm0 48.4H128v41.4H89.6z"/>'
+  }
+})

src/icons/components/tree.ts

@@ -0,0 +1,12 @@
+/* eslint-disable */
+/* tslint:disable */
+// @ts-ignore
+import icon from 'vue-svgicon'
+icon.register({
+  'tree': {
+    width: 128,
+    height: 128,
+    viewBox: '0 0 128 128',
+    data: '<path pid="0" d="M126.7 90a5 5 0 0 1 1.3 3.5V123a5 5 0 0 1-1.3 3.6c-.8.9-1.9 1.3-3.1 1.3H97.8a4 4 0 0 1-3-1.3 5 5 0 0 1-1.3-3.6V93.5c0-1 .2-1.7.6-2.5.4-.8 1-1.4 1.6-1.8a3.8 3.8 0 0 1 2.1-.7h9.7V69a3.8 3.8 0 0 0-.4-1.8 3.6 3.6 0 0 0-1.1-1.3 2.7 2.7 0 0 0-1.6-.5H67.9v23.1h9.8c1.1 0 2.1.5 3 1.5a5 5 0 0 1 1.2 3.5V123c0 .9-.1 1.7-.5 2.5s-1 1.4-1.6 1.8a3.8 3.8 0 0 1-2.1.6H51.9a3.8 3.8 0 0 1-2.1-.6 5 5 0 0 1-1.7-1.8 5 5 0 0 1-.6-2.5V93.5a5 5 0 0 1 1.3-3.5 4 4 0 0 1 3.1-1.5h9.6V65.4H23.6a3 3 0 0 0-2.4 1c-.6.8-.9 1.6-.9 2.6v19.5H30c1.3 0 2.3.5 3.1 1.5.8 1 1.2 2.2 1.2 3.5V123c0 1.4-.4 2.6-1.2 3.6-.8.9-1.8 1.3-3 1.3H4.2c-.5 0-1 0-1.4-.2a4.1 4.1 0 0 1-1.1-.7 4.7 4.7 0 0 1-1-1 5.2 5.2 0 0 1-.6-1.4A5.6 5.6 0 0 1 0 123V93.5l.1-1.3A4 4 0 0 1 .6 91 6.4 6.4 0 0 1 2 89.2a3 3 0 0 1 1-.5l1.2-.2H14V61.6c0-1 .3-1.8 1-2.5.6-.7 1.3-1 2.2-1h44.3V39.5h-9.6a4 4 0 0 1-3.1-1.5 5 5 0 0 1-1.3-3.4V5c0-1.4.4-2.6 1.3-3.6A4 4 0 0 1 51.9.1h25.8c.7 0 1.4.2 2.1.7a5.2 5.2 0 0 1 1.6 1.9c.4.7.5 1.6.5 2.4v29.6a5 5 0 0 1-1.2 3.4c-.9 1-1.9 1.5-3 1.5h-9.8V58h42.8c1 0 1.7.4 2.4 1 .6.8.9 1.6.9 2.6v27h9.6a4 4 0 0 1 3.1 1.4z"/>'
+  }
+})

src/icons/components/user.ts

@@ -0,0 +1,12 @@
+/* eslint-disable */
+/* tslint:disable */
+// @ts-ignore
+import icon from 'vue-svgicon'
+icon.register({
+  'user': {
+    width: 130,
+    height: 130,
+    viewBox: '0 0 130 130',
+    data: '<path pid="0" d="M63.4 65c20.7 0 37.4-14.3 37.4-32 0-17.6-16.7-32-37.4-32-20.6 0-37.3 14.4-37.3 32 0 17.7 16.7 32 37.3 32zm17.2 10.7H49.4C22.8 75.7 1.2 94 1.2 116.9v2.7c0 9.3 21.6 9.3 48.2 9.3h31.2c26.6 0 48.2-.3 48.2-9.3v-2.7c0-22.8-21.6-41.2-48.2-41.2z" _stroke="#979797"/>'
+  }
+})