fix(components): 修复Tab在移动端设备无法点击的问题

package.json

@@ -39,6 +39,7 @@
     "print-js": "^1.6.0",
     "qs": "^6.10.3",
     "swiper": "^8.0.3",
+    "ua-parser-js": "^1.0.2",
     "vditor": "^3.8.11",
     "vue": "^3.2.29",
     "vue-router": "^4.0.12",
@@ -55,6 +56,7 @@
     "@types/crypto-js": "^4.1.0",
     "@types/node": "^17.0.15",
     "@types/qs": "^6.9.7",
+    "@types/ua-parser-js": "^0.7.36",
     "@typescript-eslint/eslint-plugin": "^5.10.2",
     "@typescript-eslint/parser": "^5.10.2",
     "@vitejs/plugin-vue": "^2.1.0",

pnpm-lock.yaml

@@ -12,6 +12,7 @@ specifiers:
   '@types/crypto-js': ^4.1.0
   '@types/node': ^17.0.15
   '@types/qs': ^6.9.7
+  '@types/ua-parser-js': ^0.7.36
   '@typescript-eslint/eslint-plugin': ^5.10.2
   '@typescript-eslint/parser': ^5.10.2
   '@vitejs/plugin-vue': ^2.1.0
@@ -49,6 +50,7 @@ specifiers:
   sass: ^1.49.7
   swiper: ^8.0.3
   typescript: ^4.5.5
+  ua-parser-js: ^1.0.2
   unplugin-icons: ^0.13.0
   unplugin-vue-components: ^0.17.17
   vditor: ^3.8.11
@@ -80,6 +82,7 @@ dependencies:
   print-js: registry.npmmirror.com/print-js/1.6.0
   qs: registry.npmmirror.com/qs/6.10.3
   swiper: registry.npmmirror.com/swiper/8.0.3
+  ua-parser-js: registry.npmmirror.com/ua-parser-js/1.0.2
   vditor: registry.npmmirror.com/vditor/3.8.11
   vue: registry.npmmirror.com/vue/3.2.29
   vue-router: registry.npmmirror.com/vue-router/4.0.12_vue@3.2.29
@@ -96,6 +99,7 @@ devDependencies:
   '@types/crypto-js': registry.npmmirror.com/@types/crypto-js/4.1.0
   '@types/node': registry.npmmirror.com/@types/node/17.0.15
   '@types/qs': registry.npmmirror.com/@types/qs/6.9.7
+  '@types/ua-parser-js': registry.npmmirror.com/@types/ua-parser-js/0.7.36
   '@typescript-eslint/eslint-plugin': registry.npmmirror.com/@typescript-eslint/eslint-plugin/5.10.2_2595c2126aec4d4b6e944b931dabb4c2
   '@typescript-eslint/parser': registry.npmmirror.com/@typescript-eslint/parser/5.10.2_eslint@8.8.0+typescript@4.5.5
   '@vitejs/plugin-vue': registry.npmmirror.com/@vitejs/plugin-vue/2.1.0_vite@2.7.13+vue@3.2.29
@@ -2873,6 +2877,12 @@ packages:
     version: 2.1.0
     dev: true
 
+  registry.npmmirror.com/@types/ua-parser-js/0.7.36:
+    resolution: {integrity: sha512-N1rW+njavs70y2cApeIw1vLMYXRwfBy+7trgavGuuTfOd7j1Yh7QTRc/yqsPl6ncokt72ZXuxEU0PiCp9bSwNQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@types/ua-parser-js/-/ua-parser-js-0.7.36.tgz}
+    name: '@types/ua-parser-js'
+    version: 0.7.36
+    dev: true
+
   registry.npmmirror.com/@types/yargs-parser/20.2.1:
     resolution: {integrity: sha512-7tFImggNeNBVMsn0vLrpn1H1uPrUBdnARPTpZoitY37ZrdJREzf7I16tMrlK3hen349gr1NYh8CmZQa7CTG6Aw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@types/yargs-parser/-/yargs-parser-20.2.1.tgz}
     name: '@types/yargs-parser'
@@ -7087,6 +7097,12 @@ packages:
     hasBin: true
     dev: true
 
+  registry.npmmirror.com/ua-parser-js/1.0.2:
+    resolution: {integrity: sha512-00y/AXhx0/SsnI51fTc0rLRmafiGOM4/O+ny10Ps7f+j/b8p/ZY11ytMgznXkOVo4GQ+KwQG5UQLkLGirsACRg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/ua-parser-js/-/ua-parser-js-1.0.2.tgz}
+    name: ua-parser-js
+    version: 1.0.2
+    dev: false
+
   registry.npmmirror.com/uglify-js/2.8.29:
     resolution: {integrity: sha1-KcVzMUgFe7Th913zW3qcty5qWd0=, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/uglify-js/download/uglify-js-2.8.29.tgz}
     name: uglify-js

src/components/custom/BetterScroll/index.vue

@@ -30,8 +30,9 @@ function initBetterScroll() {
 }
 
 // 滚动元素发生变化，刷新BS
+const { width: wrapWidth } = useElementSize(bsWrap);
 const { width, height } = useElementSize(bsContent);
-watch([() => width.value, () => height.value], () => {
+watch([() => wrapWidth.value, () => width.value, () => height.value], () => {
   if (instance.value) {
     instance.value.refresh();
   }

src/composables/common/system.ts

@@ -1,4 +1,4 @@
-import { useBreakpoints, breakpointsTailwind } from '@vueuse/core';
+import UAParser from 'ua-parser-js';
 
 interface AppInfo {
   /** 项目名称 */
@@ -20,9 +20,9 @@ export function useAppInfo(): AppInfo {
   };
 }
 
-/** 是否是移动端 */
+/** 获取设备信息 */
-export function useIsMobile() {
+export function useDeviceInfo() {
-  const breakpoints = useBreakpoints(breakpointsTailwind);
+  const parser = new UAParser();
-  const isMobile = breakpoints.smaller('lg');
+  const result = parser.getResult();
-  return isMobile;
+  return result;
 }

src/layouts/common/GlobalTab/index.vue

@@ -1,7 +1,7 @@
 <template>
   <dark-mode-container class="global-tab flex-y-center w-full pl-16px" :style="{ height: theme.tab.height + 'px' }">
     <div ref="bsWrapper" class="flex-1-hidden h-full">
-      <better-scroll ref="bsScroll" :options="{ scrollX: true, scrollY: false, click: isMobile }">
+      <better-scroll ref="bsScroll" :options="{ scrollX: true, scrollY: false, click: canClick }">
         <tab-detail @scroll="handleScroll" />
       </better-scroll>
     </div>
@@ -15,20 +15,21 @@ import { useRoute } from 'vue-router';
 import { useElementBounding } from '@vueuse/core';
 import { DarkModeContainer, BetterScroll } from '@/components';
 import { useThemeStore, useTabStore } from '@/store';
-import { useIsMobile } from '@/composables';
+import { useDeviceInfo } from '@/composables';
 import type { ExposeBetterScroll } from '@/interface';
 import { TabDetail, ReloadButton } from './components';
 
 const route = useRoute();
 const theme = useThemeStore();
 const tab = useTabStore();
+const deviceInfo = useDeviceInfo();
 
 const bsWrapper = ref<HTMLElement>();
 const { width: bsWrapperWidth, left: bsWrapperLeft } = useElementBounding(bsWrapper);
 
 const bsScroll = ref<ExposeBetterScroll>();
 
-const isMobile = useIsMobile();
+const canClick = Boolean(deviceInfo.device.type);
 
 function handleScroll(clientX: number) {
   const currentX = clientX - bsWrapperLeft.value;