vab-avatar use setup

package.json

@@ -13,41 +13,40 @@
     "deploy": "start ./deploy.sh"
   },
   "dependencies": {
-    "ant-design-vue": "2.0.0-rc.9",
+    "ant-design-vue": "2.2.2",
     "axios": "^0.21.1",
-    "clipboard": "^2.0.6",
+    "clipboard": "^2.0.8",
-    "core-js": "^3.8.3",
+    "core-js": "^3.15.2",
-    "dayjs": "^1.10.4",
+    "dayjs": "^1.10.6",
-    "js-cookie": "^3.0.0-rc.1",
+    "js-cookie": "^3.0.0-rc.3",
     "mockjs": "^1.1.0",
     "remixicon": "^2.5.0",
-    "vue": "^3.0.5",
+    "vue": "^3.1.4",
-    "vue-router": "^4.0.3",
+    "vue-router": "^4.0.10",
-    "vuex": "^4.0.0"
+    "vuex": "^4.0.2"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^4.5.9",
     "@vue/cli-plugin-eslint": "^4.5.9",
     "@vue/cli-service": "^4.5.9",
-    "@vue/compiler-sfc": "^3.0.5",
+    "@vue/compiler-sfc": "^3.1.4",
     "@vue/eslint-config-prettier": "^6.0.0",
     "babel-eslint": "^11.0.0-beta.2",
     "body-parser": "^1.19.0",
-    "chalk": "^4.1.0",
+    "chalk": "^4.1.1",
-    "chokidar": "^3.5.1",
+    "chokidar": "^3.5.2",
-    "eslint": "^7.19.0",
+    "eslint": "^7.30.0",
-    "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-prettier": "^3.4.0",
-    "eslint-plugin-vue": "^7.5.0",
+    "eslint-plugin-vue": "^7.13.0",
-    "filemanager-webpack-plugin": "^3.1.0",
+    "filemanager-webpack-plugin": "^6.1.4",
     "image-webpack-loader": "^7.0.1",
     "less": "^4.1.1",
     "less-loader": "^7.3.0",
-    "lint-staged": "^10.5.3",
+    "prettier": "^2.3.2",
-    "prettier": "^2.2.1",
+    "stylelint": "^13.13.1",
-    "stylelint": "^13.9.0",
     "stylelint-config-prettier": "^8.0.2",
-    "stylelint-config-recess-order": "^2.3.0",
+    "stylelint-config-recess-order": "^2.4.0",
-    "svg-sprite-loader": "^5.2.1",
+    "svg-sprite-loader": "^6.0.9",
     "vab-config": "0.0.8",
     "webpackbar": "^5.0.0-3"
   },

src/layout/vab-avatar/index.vue

@@ -19,18 +19,16 @@
   import { recordRoute } from '@/config'
   import { DownOutlined } from '@ant-design/icons-vue'
 
-  import { mapGetters } from 'vuex'
+  import { useStore } from 'vuex'
+  import { computed } from 'vue'
+
   export default {
     name: 'VabAvatar',
     components: { DownOutlined },
-    computed: {
+    setup() {
-      ...mapGetters({
+      const store = useStore()
-        avatar: 'user/avatar',
+
-        username: 'user/username',
+      const logout = async function () {
-      }),
-    },
-    methods: {
-      async logout() {
         await this.$store.dispatch('user/logout')
         if (recordRoute) {
           const fullPath = this.$route.fullPath
@@ -38,7 +36,13 @@
         } else {
           this.$router.push('/login')
         }
-      },
+      }
+
+      return {
+        avatar: computed(() => store.getters['user/avatar']),
+        username: computed(() => store.getters['user/avatar']),
+        logout,
+      }
     },
   }
 </script>

src/layout/vab-menu/components/Submenu.vue

@@ -29,6 +29,5 @@
         },
       },
     },
-    methods: {},
   }
 </script>

src/utils/validate.js

@@ -47,7 +47,8 @@ export function isName(value) {
  * @returns {boolean}
  */
 export function isIP(ip) {
-  const reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
+  const reg =
+    /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
   return reg.test(ip)
 }
 
@@ -58,7 +59,8 @@ export function isIP(ip) {
  * @returns {boolean}
  */
 export function isUrl(url) {
-  const reg = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
+  const reg =
+    /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
   return reg.test(url)
 }
 
@@ -125,7 +127,8 @@ export function isArray(arg) {
  * @returns {boolean}
  */
 export function isPort(value) {
-  const reg = /^([0-9]|[1-9]\d|[1-9]\d{2}|[1-9]\d{3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/
+  const reg =
+    /^([0-9]|[1-9]\d|[1-9]\d{2}|[1-9]\d{3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/
   return reg.test(value)
 }
 
@@ -147,7 +150,8 @@ export function isPhone(value) {
  * @returns {boolean}
  */
 export function isIdCard(value) {
-  const reg = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
+  const reg =
+    /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
   return reg.test(value)
 }
 
@@ -196,7 +200,8 @@ export function isBlank(value) {
  * @returns {boolean}
  */
 export function isTel(value) {
-  const reg = /^(400|800)([0-9\\-]{7,10})|(([0-9]{4}|[0-9]{3})([- ])?)?([0-9]{7,8})(([- 转])*([0-9]{1,4}))?$/
+  const reg =
+    /^(400|800)([0-9\\-]{7,10})|(([0-9]{4}|[0-9]{3})([- ])?)?([0-9]{7,8})(([- 转])*([0-9]{1,4}))?$/
   return reg.test(value)
 }
 
@@ -240,9 +245,12 @@ export function isLatitude(value) {
  * @returns {boolean}
  */
 export function isRTSP(value) {
-  const reg = /^rtsp:\/\/([a-z]{0,10}:.{0,10}@)?(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
+  const reg =
-  const reg1 = /^rtsp:\/\/([a-z]{0,10}:.{0,10}@)?(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5]):[0-9]{1,5}/
+    /^rtsp:\/\/([a-z]{0,10}:.{0,10}@)?(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
-  const reg2 = /^rtsp:\/\/([a-z]{0,10}:.{0,10}@)?(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\//
+  const reg1 =
+    /^rtsp:\/\/([a-z]{0,10}:.{0,10}@)?(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5]):[0-9]{1,5}/
+  const reg2 =
+    /^rtsp:\/\/([a-z]{0,10}:.{0,10}@)?(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\//
   return reg.test(value) || reg1.test(value) || reg2.test(value)
 }