style: 表单页面移动端

src/utils/isMobile.ts

@@ -6,25 +6,22 @@ export const useIsMobile = () => {
   let resizeTimer: ReturnType<typeof setTimeout> | null = null
 
   const checkDevice = () => {
-    // 使用防抖避免频繁触发
     if (resizeTimer) {
       clearTimeout(resizeTimer)
     }
     resizeTimer = setTimeout(() => {
-      // 1. 现代 Client Hints API（Chrome/Edge 最准）
-      // if (navigator.userAgentData?.mobile !== undefined) {
-      //   isMobile.value = navigator.userAgentData.mobile
-      //   console.log('使用 userAgentData:', isMobile.value)
-      // }
-      // 2. 综合判断（兼容所有浏览器）
       const ua = navigator.userAgent.toLowerCase()
-      const mobileRegex = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i
+      const mobileRegex = /android|webos|iphone|ipod|blackberry|iemobile|opera mini/i
+      const tabletRegex = /ipad|tablet|playbook|silk/i
 
       const hasTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 1
-      const smallScreen = window.innerWidth <= 1200 // 你可以改成 1024 等
+      const smallScreen = window.innerWidth <= 768
+      const tabletScreen = window.innerWidth > 768 && window.innerWidth <= 1200
 
-      const uaCheck = mobileRegex.test(ua)
-      isMobile.value = uaCheck || smallScreen
+      const uaMobile = mobileRegex.test(ua)
+      const uaTablet = tabletRegex.test(ua)
+
+      isMobile.value = (uaMobile && !uaTablet) || smallScreen
     }, 100)
   }
 
@@ -35,7 +32,7 @@ export const useIsMobile = () => {
   onMounted(() => {
     checkDevice()
     window.addEventListener('resize', handleResize)
-    window.addEventListener('orientationchange', checkDevice) // 手机旋转必备
+    window.addEventListener('orientationchange', checkDevice)
   })
 
   onUnmounted(() => {
@@ -46,10 +43,55 @@ export const useIsMobile = () => {
     }
   })
 
-  // 处理 keep-alive 缓存的组件重新激活场景
   onActivated(() => {
     checkDevice()
   })
 
   return { isMobile }
 }
+
+export const useIsTablet = () => {
+  const isTablet = ref(false)
+
+  let resizeTimer: ReturnType<typeof setTimeout> | null = null
+
+  const checkDevice = () => {
+    if (resizeTimer) {
+      clearTimeout(resizeTimer)
+    }
+    resizeTimer = setTimeout(() => {
+      const ua = navigator.userAgent.toLowerCase()
+      const tabletRegex = /ipad|tablet|playbook|silk/i
+      const hasTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0
+      const tabletScreen = window.innerWidth >= 769 && window.innerWidth <= 1200
+
+      const uaTablet = tabletRegex.test(ua)
+
+      isTablet.value = (uaTablet && tabletScreen) || (hasTouch && tabletScreen)
+    }, 100)
+  }
+
+  const handleResize = () => {
+    checkDevice()
+  }
+
+  onMounted(() => {
+    checkDevice()
+    window.addEventListener('resize', handleResize)
+    window.addEventListener('orientationchange', checkDevice)
+  })
+
+  onUnmounted(() => {
+    window.removeEventListener('resize', handleResize)
+    window.removeEventListener('orientationchange', checkDevice)
+    if (resizeTimer) {
+      clearTimeout(resizeTimer)
+    }
+  })
+
+  onActivated(() => {
+    checkDevice()
+  })
+
+  return { isTablet }
+}