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

.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 =

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 {