wip: 迁移 v3-admin v3.1.3 版本代码

src/layout/useResize.ts

@@ -0,0 +1,68 @@
+import { useAppStore, DeviceType } from '@/store/modules/app'
+import { computed, watch } from 'vue'
+import { useRoute } from 'vue-router'
+
+/** 参考 Bootstrap 的响应式设计 width = 992 */
+const WIDTH = 992
+
+/** 根据大小变化重新布局 */
+export default function() {
+  const appStore = useAppStore()
+
+  const device = computed(() => {
+    return appStore.device
+  })
+
+  const sidebar = computed(() => {
+    return appStore.sidebar
+  })
+
+  const currentRoute = useRoute()
+
+  const watchRouter = watch(
+    () => currentRoute.name,
+    () => {
+      if (appStore.device === DeviceType.Mobile && appStore.sidebar.opened) {
+        appStore.closeSidebar(false)
+      }
+    }
+  )
+
+  const isMobile = () => {
+    const rect = document.body.getBoundingClientRect()
+    return rect.width - 1 < WIDTH
+  }
+
+  const resizeMounted = () => {
+    if (isMobile()) {
+      appStore.toggleDevice(DeviceType.Mobile)
+      appStore.closeSidebar(true)
+    }
+  }
+
+  const resizeHandler = () => {
+    if (!document.hidden) {
+      appStore.toggleDevice(isMobile() ? DeviceType.Mobile : DeviceType.Desktop)
+      if (isMobile()) {
+        appStore.closeSidebar(true)
+      }
+    }
+  }
+
+  const addEventListenerOnResize = () => {
+    window.addEventListener('resize', resizeHandler)
+  }
+
+  const removeEventListenerResize = () => {
+    window.removeEventListener('resize', resizeHandler)
+  }
+
+  return {
+    device,
+    sidebar,
+    resizeMounted,
+    addEventListenerOnResize,
+    removeEventListenerResize,
+    watchRouter
+  }
+}