Merge pull request #105 from MaybeQHL/main

更新侧边导航栏移动端显示为modal显示

> ![微信截图_20220307145012](https://user-images.githubusercontent.com/34638673/156982207-e5185056-cc2a-4fd4-b7d6-53182166b1a4.png) tags 还有点bug需要你去修复一下

好，我抽空看看

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" />
@@ -85,6 +95,10 @@
 
 const collapsed = ref<boolean>(false);
 
+const { mobileWidth, menuWidth } = unref(getMenuSetting);
+
+const isMobile = ref<boolean>(false);
+
 const fixedHeader = computed(() => {
   const { fixed } = unref(getHeaderSetting);
   return fixed ? 'absolute' : 'static';
@@ -138,14 +152,34 @@
   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();
@@ -153,6 +187,18 @@
 });
 </script>
 
+<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;
+    z-index: 13;
+    transition: all 0.2s ease-in-out;
+  }
+}
+</style>
 <style lang="less" scoped>
 .layout {
   display: flex;

src/settings/projectSetting.ts

@@ -33,6 +33,8 @@ const setting = {
     fixed: true,
     //分割菜单
     mixMenu: false,
+    //触发移动端侧边栏的宽度
+    mobileWidth: 800
   },
   //面包屑
   crumbsSetting: {

types/config.d.ts

@@ -33,6 +33,7 @@ export interface ImenuSetting {
   fixed: boolean;
   mixMenu: boolean;
   collapsed: boolean;
+  mobileWidth: number;
 }
 
 export interface IcrumbsSetting {