feat: 设备判断hook

build.js

@@ -4,8 +4,6 @@ const { resolve } = require('path')
 
 const args = process.argv.slice(2)
 
-console.log()
-
 console.log('读取脚本参数中 🤬')
 
 const file = fs.readFileSync(resolve(__dirname, 'src/router/index.ts'), 'utf8')

src/hooks/bom.ts

@@ -6,3 +6,11 @@
 export const useTitle = (title: string) => {
   document.title = title
 }
+
+/**
+ * 函数 useDevice 检查用户代理字符串是否指示该设备是移动设备。
+ * @returns 一个布尔值，指示当前设备是否是移动设备。
+ */
+export const useDeviceType = (): boolean => {
+  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
+}

src/hooks/effect.ts

@@ -2,7 +2,7 @@ import { Emitter } from '@/enum/emitter'
 import mitt from 'mitt'
 import { setBaseUrl } from '@/service/request'
 
-import { ref, onUnmounted } from 'vue'
+import { ref, onUnmounted, onMounted } from 'vue'
 
 const emitter = mitt()
 
@@ -66,3 +66,32 @@ export const usePort = (title: string) => {
     }
   }
 }
+
+/**
+ * `useDeviceResolution` 函数是一个 TypeScript 函数，允许您跟踪设备的屏幕宽度和高度，并在屏幕大小调整时执行回调函数。
+ * @param {Function} cb - 参数“cb”是一个回调函数，每当设备分辨率发生变化时就会调用该函数。
+ * @returns 函数“useDeviceResolution”返回一个具有两个属性的对象：“screenWidth”和“screenHeight”。
+ */
+export const useDeviceResolution = (cb: Function) => {
+  const screenWidth = ref(window.innerWidth)
+  const screenHeight = ref(window.innerHeight)
+
+  const handleResize = () => {
+    screenWidth.value = window.innerWidth
+    screenHeight.value = window.innerHeight
+    cb()
+  }
+
+  onMounted(() => {
+    window.addEventListener('resize', handleResize)
+  })
+
+  onUnmounted(() => {
+    window.removeEventListener('resize', handleResize)
+  })
+
+  return {
+    screenWidth,
+    screenHeight
+  }
+}

src/hooks/index.ts

@@ -1,5 +1,5 @@
 export { useEmitter, useScheduler, useSchedulerOnce, usePort } from './effect'
 
-export { useId } from './state'
+export { useId, useFlvUrl } from './state'
 
-export { useFlvUrl } from './state'
+export { useDeviceType } from './bom'

src/layout/components/Sidebar/index.vue

@@ -1,6 +1,37 @@
 <template>
+  <div
+    class="mobile-sider"
+    v-if="isMobile"
+  >
+    <div></div>
+    <a-layout-sider
+        :trigger="null"
+        v-model:collapsed="collapsed"
+        collapsible
+        :style="{backgroundColor: bgColor, overflow: 'hidden'}"
+        breakpoint="lg"
+      >
+        <div class="logo" >
+          <img :src="logoPng" alt="">
+        </div>
+        <a-menu
+          v-model:selectedKeys="selectedKeys"
+          :openKeys="openKeys"
+          mode="inline"
+          :style="{ borderRight: 0 }"
+        >
+          <sidebar-item
+            :item="route"
+            v-for="route in sidebarRoute"
+            :key="route.path"
+            :base-path="route.path"
+          />
+        </a-menu>
+    </a-layout-sider>
+  </div>
 
   <a-layout-sider
+        v-else
         :trigger="null"
         v-model:collapsed="collapsed"
         collapsible
@@ -30,15 +61,17 @@
 <script lang="ts" setup >
 
 import { ref, computed, watch } from 'vue'
-
 import SidebarItem from './SidebarItem.vue'
 import { useRouter, useRoute } from 'vue-router'
 import { useDesignStore } from '@/store'
+import { useDeviceType } from '@/hooks'
 
 const logoPng = require('@/assets/logo.png')
 
 const designStore = useDesignStore()
 
+const isMobile = useDeviceType()
+
 const bgColor = computed(() => designStore.theme ? '#141414' : '#fff')
 
 const route = useRoute()
@@ -56,7 +89,7 @@ const openKeys = ref<string[]>()
 watch(
   () => route.path,
   () => {
-    sidebarRoute.value = router.getRoutes().find(item => item.path === route.matched[0].path)?.children
+    sidebarRoute.value = isMobile ? router.getRoutes() : router.getRoutes().find(item => item.path === route.matched[0].path)?.children
     selectedKeys.value = [route.path]
     openKeys.value = [route.matched[1].path]
   },
@@ -86,4 +119,12 @@ watch(
     height: 50px;
   }
 }
+
+.mobile-sider {
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 130);
+  pointer-events: none;
+}
+
 </style>

src/layout/layout.vue

@@ -1,19 +1,22 @@
 <template>
     <a-layout class="a-layout" >
-      <SiderBar />
+      <SiderBar v-if="!isMobile"  />
       <a-layout >
-        <Navbar />
+        <Navbar v-if="!isMobile" />
         <span style="padding: 0 24px 24px;margin-top: 24px;overflow: hidden;overflow-y: scroll" >
           <RouterView></RouterView>
         </span>
       </a-layout>
-
   </a-layout>
 </template>
 
 <script  lang="ts" setup >
 import Navbar from './navbar.vue'
 import SiderBar from './components/Sidebar/index.vue'
+import { useDeviceType } from '@/hooks'
+
+const isMobile = useDeviceType()
+
 </script>
 
 <style>