From 6dab2ab35bf0b1f4bd6bb0bbf992a434eff052e0 Mon Sep 17 00:00:00 2001
From: Maybe_QHL <1013480204@qq.com>
Date: Mon, 7 Mar 2022 14:21:27 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E4=BE=A7=E8=BE=B9=E5=AF=BC?=
 =?UTF-8?q?=E8=88=AA=E6=A0=8F=E7=A7=BB=E5=8A=A8=E7=AB=AF=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=E4=B8=BAmodal=E6=98=BE=E7=A4=BA=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development               |   2 +-
 src/layout/index.vue           | 338 +++++++++++++++++++--------------
 src/settings/projectSetting.ts |   2 +
 types/config.d.ts              |   1 +
 4 files changed, 196 insertions(+), 147 deletions(-)

diff --git a/.env.development b/.env.development
index 03e0f3d..8e4b0cc 100644
--- a/.env.development
+++ b/.env.development
@@ -15,7 +15,7 @@ VITE_DROP_CONSOLE = true
 
 # 跨域代理，可以配置多个，请注意不要换行
 #VITE_PROXY = [["/appApi","http://localhost:8001"],["/upload","http://localhost:8001/upload"]]
-# VITE_PROXY=[["/api","https://naive-ui-admin"]]
+VITE_PROXY=[["/api","https://naive-ui-admin"]]
 
 # API 接口地址
 VITE_GLOB_API_URL =
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 4ac4a2b..66a8b93 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -1,7 +1,7 @@
 <template>
   <n-layout class="layout" :position="fixedMenu" has-sider>
     <n-layout-sider
-      v-if="isMixMenuNoneSub && (navMode === 'vertical' || navMode === 'horizontal-mix')"
+      v-if="!isMobile && isMixMenuNoneSub && (navMode === 'vertical' || navMode === 'horizontal-mix')"
       show-trigger="bar"
       @collapse="collapsed = true"
       :position="fixedMenu"
@@ -18,6 +18,16 @@
       <AsideMenu v-model:collapsed="collapsed" v-model:location="getMenuLocation" />
     </n-layout-sider>
 
+    <n-drawer
+      v-model:show="showSideDrawder"
+      :width="menuWidth"
+      :placement="'left'"
+      class="layout-side-drawer"
+    >
+      <Logo :collapsed="collapsed" />
+      <AsideMenu />
+    </n-drawer>
+
     <n-layout :inverted="inverted">
       <n-layout-header :inverted="getHeaderInverted" :position="fixedHeader">
         <PageHeader v-model:collapsed="collapsed" :inverted="inverted" />
@@ -57,170 +67,206 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, unref, computed, onMounted } from 'vue';
-  import { Logo } from './components/Logo';
-  import { TabsView } from './components/TagsView';
-  import { MainView } from './components/Main';
-  import { AsideMenu } from './components/Menu';
-  import { PageHeader } from './components/Header';
-  import { useProjectSetting } from '@/hooks/setting/useProjectSetting';
-  import { useDesignSetting } from '@/hooks/setting/useDesignSetting';
-  import { useLoadingBar } from 'naive-ui';
-  import { useRoute } from 'vue-router';
-  import { useProjectSettingStore } from '@/store/modules/projectSetting';
+import { ref, unref, computed, onMounted } from 'vue';
+import { Logo } from './components/Logo';
+import { TabsView } from './components/TagsView';
+import { MainView } from './components/Main';
+import { AsideMenu } from './components/Menu';
+import { PageHeader } from './components/Header';
+import { useProjectSetting } from '@/hooks/setting/useProjectSetting';
+import { useDesignSetting } from '@/hooks/setting/useDesignSetting';
+import { useLoadingBar } from 'naive-ui';
+import { useRoute } from 'vue-router';
+import { useProjectSettingStore } from '@/store/modules/projectSetting';
 
-  const { getDarkTheme } = useDesignSetting();
-  const {
-    getShowFooter,
-    getNavMode,
-    getNavTheme,
-    getHeaderSetting,
-    getMenuSetting,
-    getMultiTabsSetting,
-  } = useProjectSetting();
+const { getDarkTheme } = useDesignSetting();
+const {
+  getShowFooter,
+  getNavMode,
+  getNavTheme,
+  getHeaderSetting,
+  getMenuSetting,
+  getMultiTabsSetting,
+} = useProjectSetting();
 
-  const settingStore = useProjectSettingStore();
+const settingStore = useProjectSettingStore();
 
-  const navMode = getNavMode;
+const navMode = getNavMode;
 
-  const collapsed = ref<boolean>(false);
+const collapsed = ref<boolean>(false);
 
-  const fixedHeader = computed(() => {
-    const { fixed } = unref(getHeaderSetting);
-    return fixed ? 'absolute' : 'static';
-  });
+const { mobileWidth, menuWidth } = unref(getMenuSetting);
 
-  const isMixMenuNoneSub = computed(() => {
-    const mixMenu = settingStore.menuSetting.mixMenu;
-    const currentRoute = useRoute();
-    if (unref(navMode) != 'horizontal-mix') return true;
-    if (unref(navMode) === 'horizontal-mix' && mixMenu && currentRoute.meta.isRoot) {
-      return false;
-    }
-    return true;
-  });
+const isMobile = ref<boolean>(false);
 
-  const fixedMenu = computed(() => {
-    const { fixed } = unref(getHeaderSetting);
-    return fixed ? 'absolute' : 'static';
-  });
+const fixedHeader = computed(() => {
+  const { fixed } = unref(getHeaderSetting);
+  return fixed ? 'absolute' : 'static';
+});
 
-  const isMultiTabs = computed(() => {
-    return unref(getMultiTabsSetting).show;
-  });
+const isMixMenuNoneSub = computed(() => {
+  const mixMenu = settingStore.menuSetting.mixMenu;
+  const currentRoute = useRoute();
+  if (unref(navMode) != 'horizontal-mix') return true;
+  if (unref(navMode) === 'horizontal-mix' && mixMenu && currentRoute.meta.isRoot) {
+    return false;
+  }
+  return true;
+});
 
-  const fixedMulti = computed(() => {
-    return unref(getMultiTabsSetting).fixed;
-  });
+const fixedMenu = computed(() => {
+  const { fixed } = unref(getHeaderSetting);
+  return fixed ? 'absolute' : 'static';
+});
 
-  const inverted = computed(() => {
-    return ['dark', 'header-dark'].includes(unref(getNavTheme));
-  });
+const isMultiTabs = computed(() => {
+  return unref(getMultiTabsSetting).show;
+});
 
-  const getHeaderInverted = computed(() => {
-    const navTheme = unref(getNavTheme);
-    return ['light', 'header-dark'].includes(navTheme) ? unref(inverted) : !unref(inverted);
-  });
+const fixedMulti = computed(() => {
+  return unref(getMultiTabsSetting).fixed;
+});
 
-  const leftMenuWidth = computed(() => {
-    const { minMenuWidth, menuWidth } = unref(getMenuSetting);
-    return collapsed.value ? minMenuWidth : menuWidth;
-  });
+const inverted = computed(() => {
+  return ['dark', 'header-dark'].includes(unref(getNavTheme));
+});
 
-  const getChangeStyle = computed(() => {
-    const { minMenuWidth, menuWidth } = unref(getMenuSetting);
-    return {
-      'padding-left': collapsed.value ? `${minMenuWidth}px` : `${menuWidth}px`,
-    };
-  });
+const getHeaderInverted = computed(() => {
+  const navTheme = unref(getNavTheme);
+  return ['light', 'header-dark'].includes(navTheme) ? unref(inverted) : !unref(inverted);
+});
 
-  const getMenuLocation = computed(() => {
-    return 'left';
-  });
+const leftMenuWidth = computed(() => {
+  const { minMenuWidth, menuWidth } = unref(getMenuSetting);
+  return collapsed.value ? minMenuWidth : menuWidth;
+});
 
-  const watchWidth = () => {
-    const Width = document.body.clientWidth;
-    if (Width <= 950) {
-      collapsed.value = true;
-    } else collapsed.value = false;
+const getChangeStyle = computed(() => {
+  const { minMenuWidth, menuWidth } = unref(getMenuSetting);
+  return {
+    'padding-left': collapsed.value ? `${minMenuWidth}px` : `${menuWidth}px`,
   };
+});
 
-  onMounted(() => {
-    window.addEventListener('resize', watchWidth);
-    //挂载在 window 方便与在js中使用
-    window['$loading'] = useLoadingBar();
-    window['$loading'].finish();
-  });
+const getMenuLocation = computed(() => {
+  return 'left';
+});
+
+// 控制显示或隐藏移动端侧边栏
+const showSideDrawder = computed({
+  get: () => isMobile.value && collapsed.value,
+  set: (val) => (collapsed.value = val)
+});
+
+//判断是否触发移动端模式
+const checkMobileMode = () => {
+  if (document.body.clientWidth <= mobileWidth) {
+    isMobile.value = true;
+
+  } else {
+    isMobile.value = false;
+  }
+  collapsed.value = false;
+}
+
+const watchWidth = () => {
+  const Width = document.body.clientWidth;
+  if (Width <= 950) {
+    collapsed.value = true;
+  } else collapsed.value = false;
+
+  checkMobileMode();
+};
+
+onMounted(() => {
+  checkMobileMode();
+  window.addEventListener('resize', watchWidth);
+  //挂载在 window 方便与在js中使用
+  window['$loading'] = useLoadingBar();
+  window['$loading'].finish();
+});
 </script>
 
-<style lang="less" scoped>
-  .layout {
-    display: flex;
-    flex-direction: row;
-    flex: auto;
-
-    &-default-background {
-      background: #f5f7f9;
-    }
-
-    .layout-sider {
-      min-height: 100vh;
-      box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);
-      position: relative;
-      z-index: 13;
-      transition: all 0.2s ease-in-out;
-    }
-
-    .layout-sider-fix {
-      position: fixed;
-      top: 0;
-      left: 0;
-    }
-
-    .ant-layout {
-      overflow: hidden;
-    }
-
-    .layout-right-fix {
-      overflow-x: hidden;
-      padding-left: 200px;
-      min-height: 100vh;
-      transition: all 0.2s ease-in-out;
-    }
-
-    .layout-content {
-      flex: auto;
-      min-height: 100vh;
-    }
-
-    .n-layout-header.n-layout-header--absolute-positioned {
-      z-index: 11;
-    }
-
-    .n-layout-footer {
-      background: none;
-    }
-  }
-
-  .layout-content-main {
-    margin: 0 10px 10px;
+<style lang="less">
+.layout-side-drawer {
+  background-color: rgb(0, 20, 40);
+  .layout-sider {
+    min-height: 100vh;
+    box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);
     position: relative;
-    padding-top: 64px;
-  }
-
-  .layout-content-main-fix {
-    padding-top: 64px;
-  }
-
-  .fluid-header {
-    padding-top: 0px;
-  }
-
-  .main-view-fix {
-    padding-top: 44px;
-  }
-
-  .noMultiTabs {
-    padding-top: 0;
+    z-index: 13;
+    transition: all 0.2s ease-in-out;
   }
+}
+</style>
+<style lang="less" scoped>
+.layout {
+  display: flex;
+  flex-direction: row;
+  flex: auto;
+
+  &-default-background {
+    background: #f5f7f9;
+  }
+
+  .layout-sider {
+    min-height: 100vh;
+    box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);
+    position: relative;
+    z-index: 13;
+    transition: all 0.2s ease-in-out;
+  }
+
+  .layout-sider-fix {
+    position: fixed;
+    top: 0;
+    left: 0;
+  }
+
+  .ant-layout {
+    overflow: hidden;
+  }
+
+  .layout-right-fix {
+    overflow-x: hidden;
+    padding-left: 200px;
+    min-height: 100vh;
+    transition: all 0.2s ease-in-out;
+  }
+
+  .layout-content {
+    flex: auto;
+    min-height: 100vh;
+  }
+
+  .n-layout-header.n-layout-header--absolute-positioned {
+    z-index: 11;
+  }
+
+  .n-layout-footer {
+    background: none;
+  }
+}
+
+.layout-content-main {
+  margin: 0 10px 10px;
+  position: relative;
+  padding-top: 64px;
+}
+
+.layout-content-main-fix {
+  padding-top: 64px;
+}
+
+.fluid-header {
+  padding-top: 0px;
+}
+
+.main-view-fix {
+  padding-top: 44px;
+}
+
+.noMultiTabs {
+  padding-top: 0;
+}
 </style>
diff --git a/src/settings/projectSetting.ts b/src/settings/projectSetting.ts
index f98926e..5abea51 100644
--- a/src/settings/projectSetting.ts
+++ b/src/settings/projectSetting.ts
@@ -33,6 +33,8 @@ const setting = {
     fixed: true,
     //分割菜单
     mixMenu: false,
+    //触发移动端侧边栏的宽度
+    mobileWidth: 800
   },
   //面包屑
   crumbsSetting: {
diff --git a/types/config.d.ts b/types/config.d.ts
index ca2f8e2..748df08 100644
--- a/types/config.d.ts
+++ b/types/config.d.ts
@@ -33,6 +33,7 @@ export interface ImenuSetting {
   fixed: boolean;
   mixMenu: boolean;
   collapsed: boolean;
+  mobileWidth: number;
 }
 
 export interface IcrumbsSetting {