feat(projects): 适配移动端，修复Tab关闭图标的bug

ISSUES CLOSED: #87,#106,#109,#111

package.json

@@ -34,8 +34,8 @@
     "@antv/data-set": "^0.11.8",
     "@antv/g2": "^4.2.5",
     "@better-scroll/core": "^2.4.2",
-    "@soybeanjs/vue-admin-layout": "^1.0.6",
-    "@soybeanjs/vue-admin-tab": "^1.0.3",
+    "@soybeanjs/vue-admin-layout": "^1.1.1",
+    "@soybeanjs/vue-admin-tab": "^1.0.5",
     "@vueuse/core": "^8.9.1",
     "axios": "^0.27.2",
     "clipboard": "^2.0.11",
@@ -46,7 +46,7 @@
     "form-data": "^4.0.0",
     "lodash-es": "^4.17.21",
     "naive-ui": "^2.31.0",
-    "pinia": "^2.0.14",
+    "pinia": "^2.0.15",
     "print-js": "^1.6.0",
     "qs": "^6.11.0",
     "swiper": "^8.3.0",
@@ -105,7 +105,7 @@
     "vite-plugin-mock": "^2.9.6",
     "vite-plugin-svg-icons": "^2.0.1",
     "vue-eslint-parser": "^9.0.3",
-    "vue-tsc": "^0.38.4"
+    "vue-tsc": "^0.38.5"
   },
   "homepage": "https://github.com/honghuangdc/soybean-admin",
   "repository": {

src/composables/layout.ts

@@ -1,4 +1,5 @@
 import { computed } from 'vue';
+import { useBreakpoints, breakpointsTailwind } from '@vueuse/core';
 import { useAppStore, useThemeStore } from '@/store';
 
 type LayoutMode = 'vertical' | 'horizontal';
@@ -7,6 +8,7 @@ type LayoutHeaderProps = Record<EnumType.ThemeLayoutMode, GlobalHeaderProps>;
 export function useBasicLayout() {
   const app = useAppStore();
   const theme = useThemeStore();
+  const breakpoints = useBreakpoints(breakpointsTailwind);
 
   const mode = computed(() => {
     const vertical: LayoutMode = 'vertical';
@@ -14,6 +16,8 @@ export function useBasicLayout() {
     return theme.layout.mode.includes(vertical) ? vertical : horizontal;
   });
 
+  const isMobile = breakpoints.smaller('sm');
+
   const layoutHeaderProps: LayoutHeaderProps = {
     vertical: {
       showLogo: false,
@@ -61,6 +65,7 @@ export function useBasicLayout() {
 
   return {
     mode,
+    isMobile,
     headerProps,
     siderVisible,
     siderWidth,

src/layouts/BasicLayout/index.vue

@@ -1,7 +1,7 @@
 <template>
   <admin-layout
     :mode="mode"
-    :min-width="theme.layout.minWidth"
+    :is-mobile="isMobile"
     :fixed-header-and-tab="theme.fixedHeaderAndTab"
     :header-height="theme.header.height"
     :tab-visible="theme.tab.visible"
@@ -12,6 +12,7 @@
     :sider-collapse="app.siderCollapse"
     :add-main-overflow-hidden="addMainOverflowHidden"
     :fixed-footer="theme.footer.fixed"
+    @update:sider-collapse="app.setSiderCollapse"
   >
     <template #header>
       <global-header v-bind="headerProps" />
@@ -51,7 +52,7 @@ defineOptions({ name: 'BasicLayout' });
 const app = useAppStore();
 const theme = useThemeStore();
 
-const { mode, headerProps, siderVisible, siderWidth, siderCollapsedWidth } = useBasicLayout();
+const { mode, isMobile, headerProps, siderVisible, siderWidth, siderCollapsedWidth } = useBasicLayout();
 
 const { bool: addMainOverflowHidden, setBool: setAddMainOverflowHidden } = useBoolean();
 </script>

src/layouts/common/GlobalHeader/index.vue

@@ -2,8 +2,8 @@
   <dark-mode-container class="global-header flex-y-center h-full" :inverted="theme.header.inverted">
     <global-logo v-if="showLogo" :show-title="true" class="h-full" :style="{ width: theme.sider.width + 'px' }" />
     <div v-if="!showHeaderMenu" class="flex-1-hidden flex-y-center h-full">
-      <menu-collapse v-if="showMenuCollapse" />
-      <global-breadcrumb v-if="theme.header.crumb.visible" />
+      <menu-collapse v-if="showMenuCollapse || isMobile" />
+      <global-breadcrumb v-if="theme.header.crumb.visible && !isMobile" />
     </div>
     <header-menu v-else />
     <div class="flex justify-end h-full">
@@ -20,6 +20,7 @@
 
 <script setup lang="ts">
 import { useThemeStore } from '@/store';
+import { useBasicLayout } from '@/composables';
 import GlobalLogo from '../GlobalLogo/index.vue';
 import GlobalSearch from '../GlobalSearch/index.vue';
 import {
@@ -48,6 +49,7 @@ interface Props {
 defineProps<Props>();
 
 const theme = useThemeStore();
+const { isMobile } = useBasicLayout();
 
 const showButton = import.meta.env.PROD && import.meta.env.VITE_VERCEL !== '1';
 </script>