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",

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() {
-  const breakpoints = useBreakpoints(breakpointsTailwind);
-  const isMobile = breakpoints.smaller('lg');
-  return isMobile;
+/** 获取设备信息 */
+export function useDeviceInfo() {
+  const parser = new UAParser();
+  const result = parser.getResult();
+  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;