feat(projects): support mobile layout

src/layouts/base-layout/index.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { watch } from 'vue';
+import { breakpointsTailwind, useBreakpoints } from '@vueuse/core';
 import { AdminLayout } from '@sa/materials';
 import { useAppStore } from '@/store/modules/app';
 import GlobalHeader from '../modules/global-header/index.vue';
@@ -13,10 +15,28 @@ defineOptions({
 });
 
 const app = useAppStore();
+
+const breakpoints = useBreakpoints(breakpointsTailwind);
+const isMobile = breakpoints.smaller('sm');
+
+watch(
+  isMobile,
+  newValue => {
+    if (newValue) {
+      app.toggleSiderCollapse();
+    }
+  },
+  { immediate: true }
+);
 </script>
 
 <template>
-  <AdminLayout :sider-collapse="app.siderCollapse" :full-content="app.fullContent">
+  <AdminLayout
+    :is-mobile="isMobile"
+    :sider-collapse="app.siderCollapse"
+    :full-content="app.fullContent"
+    @click-mobile-sider-mask="app.toggleSiderCollapse"
+  >
     <template #header>
       <GlobalHeader />
     </template>

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 }">
+      <BetterScroll ref="bsScroll" :options="{ scrollX: true, scrollY: false, click: true }">
         <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/layouts/modules/theme-drawer/index.vue

@@ -15,7 +15,11 @@ const app = useAppStore();
     :title="$t('themeDrawer.title')"
     :closable="false"
     @close="app.closeThemeDrawer"
-  ></ADrawer>
+  >
+    <template #extra>
+      <AButton @click="app.closeThemeDrawer">{{ $t('common.cancel') }}</AButton>
+    </template>
+  </ADrawer>
 </template>
 
 <style scoped></style>