From e97deb0cfb5513d09070918d7019a4225b9c2eaf Mon Sep 17 00:00:00 2001
From: Soybean <honghuangdc@gmail.com>
Date: Tue, 12 Jul 2022 00:02:00 +0800
Subject: [PATCH] =?UTF-8?q?feat(projects):=20=E9=80=82=E9=85=8D=E7=A7=BB?=
 =?UTF-8?q?=E5=8A=A8=E7=AB=AF=EF=BC=8C=E4=BF=AE=E5=A4=8DTab=E5=85=B3?=
 =?UTF-8?q?=E9=97=AD=E5=9B=BE=E6=A0=87=E7=9A=84bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ISSUES CLOSED: #87, #106, #109, #111
---
 package.json                              | 8 ++++----
 src/composables/layout.ts                 | 5 +++++
 src/layouts/BasicLayout/index.vue         | 5 +++--
 src/layouts/common/GlobalHeader/index.vue | 6 ++++--
 4 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index 333cb4047..cac33208f 100644
--- a/package.json
+++ b/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": {
diff --git a/src/composables/layout.ts b/src/composables/layout.ts
index 27cfc53ff..b60d1b331 100644
--- a/src/composables/layout.ts
+++ b/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,
diff --git a/src/layouts/BasicLayout/index.vue b/src/layouts/BasicLayout/index.vue
index f09a7096f..e9e0baa00 100644
--- a/src/layouts/BasicLayout/index.vue
+++ b/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>
diff --git a/src/layouts/common/GlobalHeader/index.vue b/src/layouts/common/GlobalHeader/index.vue
index 6b686be8f..10ddf789d 100644
--- a/src/layouts/common/GlobalHeader/index.vue
+++ b/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>