From ca342c87d662ec7aad2e5e3908072d7450749e52 Mon Sep 17 00:00:00 2001
From: toesbieya <1647775459@qq.com>
Date: Tue, 26 May 2020 17:45:58 +0800
Subject: [PATCH] =?UTF-8?q?=E7=99=BB=E5=BD=95=E6=B3=A8=E5=86=8C=E9=A1=B5?=
 =?UTF-8?q?=E7=9A=84=E8=83=8C=E6=99=AF=E5=8A=A8=E7=94=BB=E5=9C=A8=E7=A7=BB?=
 =?UTF-8?q?=E5=8A=A8=E7=AB=AF=E4=B8=8A=E9=BB=98=E8=AE=A4=E5=85=B3=E9=97=AD?=
 =?UTF-8?q?=20=E4=BF=AE=E5=A4=8D=E4=BE=A7=E8=BE=B9=E6=A0=8F=E5=9C=A8?=
 =?UTF-8?q?=E7=A7=BB=E5=8A=A8=E7=AB=AF=E7=82=B9=E5=87=BB=E6=9C=AA=E6=94=B6?=
 =?UTF-8?q?=E8=B5=B7=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vue/src/layout/components/Sidebar/index.vue |  2 ++
 vue/src/layout/mixin/ResizeHandler.js       | 15 ++++-----------
 vue/src/store/modules/app.js                |  3 ++-
 vue/src/utils/browser.js                    |  7 +++++++
 vue/src/views/app/login.vue                 | 17 +++++++++--------
 vue/src/views/app/register.vue              | 13 +++++++------
 6 files changed, 31 insertions(+), 26 deletions(-)
 create mode 100644 vue/src/utils/browser.js

diff --git a/vue/src/layout/components/Sidebar/index.vue b/vue/src/layout/components/Sidebar/index.vue
index 04d513b..1a4a582 100644
--- a/vue/src/layout/components/Sidebar/index.vue
+++ b/vue/src/layout/components/Sidebar/index.vue
@@ -92,6 +92,8 @@
                     this.$nextTick(() => this.$router.replace({path: '/redirect' + this.$route.fullPath}))
                 }
                 else this.$router.push(index)
+                //mobile时激活隐藏侧边栏
+                this.device === 'mobile' && this.$store.commit('setting/sidebarCollapse', true)
             }
         },
         mounted() {
diff --git a/vue/src/layout/mixin/ResizeHandler.js b/vue/src/layout/mixin/ResizeHandler.js
index bbb0d4e..580853d 100644
--- a/vue/src/layout/mixin/ResizeHandler.js
+++ b/vue/src/layout/mixin/ResizeHandler.js
@@ -1,20 +1,13 @@
 import {debounce} from '@/utils'
-
-const {body} = document
-const WIDTH = 768
-
-function $_isMobile() {
-    const rect = body.getBoundingClientRect()
-    return rect.width - 1 < WIDTH
-}
+import {isMobile} from "@/utils/browser"
 
 export default {
     methods: {
         $_resizeHandler() {
             if (!document.hidden) {
-                const isMobile = $_isMobile()
-                this.$store.commit('app/device', isMobile ? 'mobile' : 'pc')
-                isMobile && this.$store.commit('setting/sidebarCollapse', true)
+                const mobile = isMobile()
+                this.$store.commit('app/device', mobile ? 'mobile' : 'pc')
+                mobile && this.$store.commit('setting/sidebarCollapse', true)
             }
         }
     },
diff --git a/vue/src/store/modules/app.js b/vue/src/store/modules/app.js
index 1ba0576..627bbfe 100644
--- a/vue/src/store/modules/app.js
+++ b/vue/src/store/modules/app.js
@@ -1,11 +1,12 @@
 import {getLocalPersonalSettings} from "@/utils/localStorage"
 import {createMutations} from "@/utils"
+import {isMobile} from "@/utils/browser"
 
 const localSettings = getLocalPersonalSettings()
 
 const state = {
     //区分pc和移动端（mobile）
-    device: 'pc',
+    device: isMobile() ? 'mobile' : 'pc',
     //登陆页背景动画
     loginPageBackgroundAnimation: 'firework',
     //注册页背景动画
diff --git a/vue/src/utils/browser.js b/vue/src/utils/browser.js
new file mode 100644
index 0000000..e7c6c24
--- /dev/null
+++ b/vue/src/utils/browser.js
@@ -0,0 +1,7 @@
+const {body} = document
+const WIDTH = 768
+
+export function isMobile() {
+    const rect = body.getBoundingClientRect()
+    return rect.width - 1 < WIDTH
+}
diff --git a/vue/src/views/app/login.vue b/vue/src/views/app/login.vue
index f034372..7aeaa12 100644
--- a/vue/src/views/app/login.vue
+++ b/vue/src/views/app/login.vue
@@ -62,8 +62,9 @@
 </template>
 
 <script>
-    import {isEmpty} from "@/utils"
+    import {mapState} from 'vuex'
     import md5 from "js-md5"
+    import {isEmpty} from "@/utils"
     import {elSuccess} from "@/utils/message"
     import SetAnimation from "./components/SetAnimation"
 
@@ -90,17 +91,16 @@
                 animation: null
             }
         },
-        computed: {
-            loginPageBackgroundAnimation() {
-                return this.$store.state.app.loginPageBackgroundAnimation
-            }
-        },
+        computed: mapState('app', {
+            device: state => state.device,
+            loginPageBackgroundAnimation: state => state.loginPageBackgroundAnimation
+        }),
         methods: {
             showPwd() {
                 this.passwordType = this.passwordType === 'password' ? '' : 'password'
                 this.$nextTick(() => this.$refs.password.focus())
             },
-            login({pageX, pageY}) {
+            login() {
                 if (this.loading) return
                 this.$refs.form.validate(valid => {
                     if (!valid) return
@@ -144,7 +144,8 @@
             }
         },
         mounted() {
-            this.setAnimation(this.loginPageBackgroundAnimation)
+            //移动端关闭动画，太卡
+            this.device !== 'mobile' && this.setAnimation(this.loginPageBackgroundAnimation)
             this.addCapsLockEvent()
             if (isEmpty(this.form.username)) this.$refs.username.focus()
             else this.$refs.password.focus()
diff --git a/vue/src/views/app/register.vue b/vue/src/views/app/register.vue
index ff7b9cb..75e4b51 100644
--- a/vue/src/views/app/register.vue
+++ b/vue/src/views/app/register.vue
@@ -48,6 +48,7 @@
 </template>
 
 <script>
+    import {mapState} from 'vuex'
     import md5 from "js-md5"
     import {register} from "@/api/account"
     import {checkName} from "@/api/system/user"
@@ -93,11 +94,10 @@
                 animation: null
             }
         },
-        computed: {
-            registerPageBackgroundAnimation() {
-                return this.$store.state.app.registerPageBackgroundAnimation
-            }
-        },
+        computed: mapState('app', {
+            device: state => state.device,
+            registerPageBackgroundAnimation: state => state.registerPageBackgroundAnimation
+        }),
         methods: {
             register() {
                 if (this.loading) return
@@ -136,7 +136,8 @@
             }
         },
         mounted() {
-            this.setAnimation(this.registerPageBackgroundAnimation)
+            //移动端关闭动画，太卡
+            this.device !== 'mobile' && this.setAnimation(this.registerPageBackgroundAnimation)
             this.addEvent()
             this.$nextTick(() => this.$refs.username.focus())
         },