💇 feat(refact) Update login & request & permission

.eslintrc.js

@@ -1,7 +1,9 @@
 module.exports = {
   root: true,
   env: {
-    node: true
+    node: true,
+    es6: true,
+    browser: true
   },
   extends: [
     'plugin:vue/essential',
@@ -18,6 +20,15 @@ module.exports = {
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'no-unused-vars': 1,
-    'vue/no-unused-components': 1
+    'vue/no-unused-components': 1,
+    "vue/html-self-closing": ["error", {
+      "html": {
+        "void": "never",
+        "normal": "never",
+        "component": "always"
+      },
+      "svg": "always",
+      "math": "always"
+    }]
   }
 }

package.json

@@ -5,43 +5,44 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
+    "build:prod": "vue-cli-service build --mode prod",
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.30",
-    "@fortawesome/free-brands-svg-icons": "^5.14.0",
-    "@fortawesome/free-regular-svg-icons": "^5.14.0",
-    "@fortawesome/free-solid-svg-icons": "^5.14.0",
-    "@fortawesome/vue-fontawesome": "~2.0.0",
+    "@fortawesome/fontawesome-svg-core": "^1.2.34",
+    "@fortawesome/free-brands-svg-icons": "^5.15.2",
+    "@fortawesome/free-regular-svg-icons": "^5.15.2",
+    "@fortawesome/free-solid-svg-icons": "^5.15.2",
+    "@fortawesome/vue-fontawesome": "~2.0.2",
     "axios": "^0.20.0",
-    "core-js": "^3.6.5",
+    "core-js": "^3.8.3",
     "echarts": "^4.9.0",
-    "element-ui": "^2.13.2",
+    "element-ui": "^2.15.0",
     "js-cookie": "^2.2.1",
     "vue": "^2.6.11",
     "vue-meta": "^2.4.0",
-    "vue-router": "^3.2.0",
-    "vuex": "^3.4.0",
+    "vue-router": "^3.5.1",
+    "vuex": "^3.6.2",
     "vuex-router-sync": "^5.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.11.6",
-    "@babel/eslint-parser": "^7.11.5",
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-plugin-router": "~4.5.0",
-    "@vue/cli-plugin-vuex": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
+    "@babel/core": "^7.12.13",
+    "@babel/eslint-parser": "^7.12.13",
+    "@vue/cli-plugin-babel": "~4.5.11",
+    "@vue/cli-plugin-eslint": "~4.5.11",
+    "@vue/cli-plugin-router": "~4.5.11",
+    "@vue/cli-plugin-vuex": "~4.5.11",
+    "@vue/cli-service": "~4.5.11",
     "@vue/eslint-config-standard": "^5.1.2",
     "eslint": "^6.7.2",
-    "eslint-plugin-import": "^2.20.2",
+    "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-standard": "^4.0.0",
     "eslint-plugin-vue": "^6.2.2",
     "node-sass": "^4.12.0",
     "sass-loader": "^8.0.2",
-    "style-resources-loader": "^1.3.2",
+    "style-resources-loader": "^1.4.1",
     "vue-cli-plugin-style-resources-loader": "~0.1.4",
     "vue-template-compiler": "^2.6.11"
   }

src/components/IconFont/index.vue

@@ -0,0 +1,91 @@
+<template>
+  <svg
+    class="icon-font"
+    aria-hidden="true"
+    :class="getClassName"
+    @click="handleClick()"
+  >
+    <filter
+      id="drop-shadow"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <feGaussianBlur
+        in="SourceAlpha"
+        stdDeviation="2"
+      />
+      <feOffset
+        dx="1"
+        dy="1"
+        result="offsetblur"
+      />
+      <feComponentTransfer>
+        <feFuncA
+          type="linear"
+          slope="0.2"
+        />
+      </feComponentTransfer>
+      <feMerge>
+        <feMergeNode />
+        <feMergeNode in="SourceGraphic" />
+      </feMerge>
+    </filter>
+    <g
+      v-bind="getAttrs()"
+    >
+      <use :xlink:href="'#' + icon" />
+    </g>
+  </svg>
+</template>
+
+<script>
+
+export default {
+  name: 'IconFont',
+  props: {
+    icon: {
+      type: String,
+      default: ''
+    },
+    shadow: {
+      type: Boolean,
+      default: false
+    },
+    verticalCenter: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    getClassName () {
+      const className = []
+      if (this.verticalCenter) {
+        className.push('middle')
+      }
+      return className
+    }
+  },
+  methods: {
+    handleClick () {
+      this.$emit('click')
+    },
+    getAttrs () {
+      const attrs = {}
+      this.shadow &&
+      (attrs.filter = 'url(#drop-shadow)')
+      return attrs
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.icon-font {
+  width: 1em; height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+  &.middle {
+    vertical-align: middle;
+  }
+}
+</style>

src/components/Navigation/MenuBar/MenuBarItem.vue

@@ -29,7 +29,7 @@
         <i
           v-else
           :class="routeItem.icon"
-        />
+        ></i>
         <span slot="title">{{ routeItem.name }}</span>
       </template>
     </el-submenu>
@@ -47,7 +47,7 @@
         <i
           v-else
           :class="routeItem.icon"
-        />
+        ></i>
         <span slot="title">{{ routeItem.name }}</span>
       </el-menu-item>
     </template>

src/components/Navigation/MenuBar/index.vue

@@ -6,7 +6,7 @@
       :class="{
         collapse: isCollapse
       }"
-    />
+    ></div>
     <aside
       class="navigation-menubar-aside-container fixed-aside"
       :class="{
@@ -38,7 +38,7 @@
             'el-icon-s-fold': !isCollapse,
             'el-icon-s-unfold': isCollapse
           }"
-        />
+        ></i>
       </div>
     </aside>
   </div>

src/components/Navigation/NavBar.vue

@@ -5,7 +5,7 @@
     >
       <div class="navbar-header-box">
         <NavigationSideLogo />
-        <div style="flex: 1;" />
+        <div style="flex: 1;"></div>
         <NavigationSideAction />
       </div>
     </header>

src/components/index.js

@@ -0,0 +1,10 @@
+// Vue Component Install
+import IconFont from '@/components/IconFont'
+
+const component = {
+  install: function (Vue) {
+    Vue.component(IconFont.name, IconFont)
+  }
+}
+
+export default component

src/main.js

@@ -5,19 +5,18 @@ import App from './App'
 import '@/assets/fonts/fontawesome'
 
 import ElementUI from 'element-ui'
+import GlobalComponents from '@/components'
 import { sync } from 'vuex-router-sync'
 import router from '@/router/index'
 import store from '@/store/index'
 import Meta from 'vue-meta'
 import Mixin from '@/mixins'
 
-import '@/styles/element-variables.scss'
-import '@/styles/theme.scss'
-
 import '@/router/permission'
 
 Vue.use(Meta)
 Vue.use(ElementUI, { size: 'large', zIndex: 3000 })
+Vue.use(GlobalComponents)
 
 Vue.config.productionTip = false
 

src/modules/ChartsTest/components/dialog/index.vue

@@ -8,7 +8,7 @@
       :show-close="false"
     >
       <div>
-        <slot />
+        <slot></slot>
       </div>
       <div slot="footer">
         <el-button @click="dialogVisibleHide">

src/modules/ChartsTest/components/layout/index.vue

@@ -26,7 +26,7 @@
       @dialogVisibleHide="dialogVisibleHide"
     >
       <template #default>
-        <div id="echarts-container" />
+        <div id="echarts-container"></div>
       </template>
     </Dialog>
   </div>

src/modules/DemoTest/components/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="xxx-container" />
+  <div class="xxx-container"></div>
 </template>
 
 <script>

src/modules/DemoTest/store/index.js

@@ -2,9 +2,11 @@
 import { sleep } from '@/utils/request'
 import { getDemoTestList } from '@/modules/DemoTest/api'
 import MUTATION from '@/modules/DemoTest/store/mutations-type'
+import mixin from '@/store/utils/mixin'
 
 const DemoTestModule = {
   namespaced: true,
+  _name: 'DemoTest',
   state: {
     demoList: {}
   },
@@ -30,9 +32,7 @@ const DemoTestModule = {
       state.demoList = demoList
     }
   },
-  getAction (name) {
-    return `DemoTest/${Object.keys(this.actions)[Object.keys(this.actions).indexOf(name)]}`
-  }
+  ...mixin
 }
 
 export default DemoTestModule

src/modules/NestedTest/components/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="xxx-container" />
+  <div class="xxx-container"></div>
 </template>
 
 <script>

src/modules/NestedTest/store/index.js

@@ -1,6 +1,8 @@
 
+import mixin from '@/store/utils/mixin'
 const NestedTestModule = {
   namespaced: true,
+  _name: 'NestedTest',
   state: {
   },
   getters: {
@@ -9,9 +11,7 @@ const NestedTestModule = {
   },
   mutations: {
   },
-  getAction (name) {
-    return `NestedTest/${Object.keys(this.actions)[Object.keys(this.actions).indexOf(name)]}`
-  }
+  ...mixin
 }
 
 export default NestedTestModule

src/modules/UserAccount/api/index.js

@@ -1,5 +1,55 @@
 import request from '@/utils/request'
 
+export function login (data) {
+  // return request({
+  //   url: '/login',
+  //   method: 'post',
+  //   data
+  // })
+
+  console.log('data', data)
+  return {
+    error: 0,
+    msg: 'OK',
+    data: {
+      user: {
+        email: 'admin@org.com',
+        phone: '15290788137',
+        username: '管理员',
+        id: '601d85900f43923hffbcs',
+        token: '4v8acea-6a89-2a2ebc-10802-9ac19003'
+      }
+    }
+  }
+}
+export function logout (data) {
+  return request({
+    url: '/logout',
+    method: 'post',
+    data
+  })
+}
+
+export function getUserInfoData (params) {
+  // return request({
+  //   url: '/user_info',
+  //   method: 'get',
+  //   params
+  // })
+  return {
+    error: 0,
+    msg: 'OK',
+    data: {
+      user: {
+        email: 'admin@org.com',
+        phone: '15290788137',
+        username: '管理员',
+        id: '601d85900f43923hffbcs'
+      }
+    }
+  }
+}
+
 export function getDemoTestList (params) {
   return request({
     url: '/api/demo_test/list',