fix(projects): fix tab click when is mobile

src/layouts/base-layout/index.vue

@@ -7,20 +7,17 @@ import GlobalTab from '../modules/global-tab/index.vue';
 import GlobalContent from '../modules/global-content/index.vue';
 import GlobalFooter from '../modules/global-footer/index.vue';
 import ThemeDrawer from '../modules/theme-drawer/index.vue';
-import { useLayout } from '../hooks';
 
 defineOptions({
   name: 'BaseLayout'
 });
 
 const app = useAppStore();
-
-const { isMobile } = useLayout();
 </script>
 
 <template>
   <AdminLayout
-    :is-mobile="isMobile"
+    :is-mobile="app.isMobile"
     :sider-collapse="app.siderCollapse"
     :full-content="app.fullContent"
     @click-mobile-sider-mask="app.setSiderCollapse(true)"

src/layouts/modules/global-tab/index.vue

@@ -108,7 +108,7 @@ init();
 <template>
   <DarkModeContainer class="flex-y-center wh-full px-16px shadow-tab">
     <div ref="bsWrapper" class="flex-1-hidden h-full">
-      <BetterScroll ref="bsScroll" :options="{ scrollX: true, scrollY: false, click: true }">
+      <BetterScroll ref="bsScroll" :options="{ scrollX: true, scrollY: false, click: app.isMobile }">
         <div ref="tabRef" class="flex h-full pr-18px" :class="[isChromeMode ? 'items-end' : 'items-center gap-12px']">
           <ContextMenu
             v-for="item in tab.tabs"

src/store/modules/app/index.ts

@@ -1,11 +1,13 @@
-import { ref, nextTick } from 'vue';
+import { ref, watch, nextTick, effectScope, onScopeDispose } from 'vue';
 import { defineStore } from 'pinia';
+import { breakpointsTailwind, useBreakpoints } from '@vueuse/core';
 import { useBoolean } from '@sa/hooks';
 import { SetupStoreId } from '@/enum';
 import { setLocale } from '@/locales';
 import { localStg } from '@/utils/storage';
 
 export const useAppStore = defineStore(SetupStoreId.App, () => {
+  const scope = effectScope();
   const { bool: themeDrawerVisible, setTrue: openThemeDrawer, setFalse: closeThemeDrawer } = useBoolean();
   const { bool: reloadFlag, setBool: setReloadFlag } = useBoolean(true);
   const { bool: fullContent, toggle: toggleFullContent } = useBoolean();
@@ -48,6 +50,30 @@ export const useAppStore = defineStore(SetupStoreId.App, () => {
     localStg.set('lang', lang);
   }
 
+  const breakpoints = useBreakpoints(breakpointsTailwind);
+
+  const isMobile = breakpoints.smaller('sm');
+
+  // watch store
+  scope.run(() => {
+    watch(
+      isMobile,
+      newValue => {
+        if (newValue) {
+          setSiderCollapse(true);
+        }
+      },
+      { immediate: true }
+    );
+  });
+
+  /**
+   * on scope dispose
+   */
+  onScopeDispose(() => {
+    scope.stop();
+  });
+
   return {
     themeDrawerVisible,
     openThemeDrawer,
@@ -61,6 +87,7 @@ export const useAppStore = defineStore(SetupStoreId.App, () => {
     toggleSiderCollapse,
     locale,
     localeOptions,
-    changeLocale
+    changeLocale,
+    isMobile
   };
 });