From 6d44fe92d1ab722f6a216a8e4f2e3074afc5afc0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=81=E5=B0=982022?= <1157219723@qq.com>
Date: Sat, 26 Nov 2022 00:51:15 +0800
Subject: [PATCH 1/3] =?UTF-8?q?=E7=A7=BB=E5=8A=A8=E7=AB=AFBaseLayout?=
 =?UTF-8?q?=E9=80=82=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layouts/BaseLayout.vue | 33 +++++++++++++++++--
 src/styles/admin.css       |  2 +-
 src/styles/display.css     | 65 ++++++++++++++++++++++++++++++++++++++
 src/styles/index.css       |  1 +
 4 files changed, 97 insertions(+), 4 deletions(-)
 create mode 100644 src/styles/display.css

diff --git a/src/layouts/BaseLayout.vue b/src/layouts/BaseLayout.vue
index 7c402b4..0312dea 100644
--- a/src/layouts/BaseLayout.vue
+++ b/src/layouts/BaseLayout.vue
@@ -11,7 +11,8 @@
       ]"
     >
       <!-- side -->
-      <lay-side :width="sideWidth" :class="appStore.sideTheme == 'dark' ? 'dark':'light'">
+      <div v-if="!appStore.collapse" class="layui-layer-shade hidden-sm-and-up" style="opacity: 0.1; z-index: 9999;"></div>
+      <lay-side id="lay-side" :width="sideWidth" :class="appStore.sideTheme == 'dark' ? 'dark':'light'">
         <lay-logo v-if="appStore.logo"></lay-logo>
         <lay-scroll style="height: calc(100% - 62px)">
           <global-menu :collapse="appStore.collapse"></global-menu>
@@ -28,10 +29,10 @@
               ></lay-icon>
               <lay-icon v-else type="layui-icon-shrink-right"></lay-icon>
             </lay-menu-item>
-            <lay-menu-item @click="refresh">
+            <lay-menu-item class="hidden-xs-only" @click="refresh">
               <lay-icon type="layui-icon-refresh-one"></lay-icon>
             </lay-menu-item>
-            <lay-menu-item v-if="appStore.breadcrumb" style="padding: 0px 15px;">
+            <lay-menu-item class="hidden-xs-only" v-if="appStore.breadcrumb" style="padding: 0px 15px;">
               <GlobalBreadcrumb></GlobalBreadcrumb>
             </lay-menu-item>
           </lay-menu>
@@ -141,6 +142,7 @@ export default {
       // mobile
       if(document.body.clientWidth < 768) {
         appStore.collapse = true;
+        document.addEventListener('click', checkClick);
       }
       userInfoStore.loadMenus();
       userInfoStore.loadPermissions();
@@ -152,6 +154,20 @@ export default {
       })
     })
 
+    const checkClick = (event: any) => {
+      let dom = document.getElementById("lay-side"); // 这里是侧边栏元素
+
+      if (dom) {
+        if (!dom.contains(event.target) && !event.target.classList.contains("layui-icon-spread-left")) {
+          // 不在侧边栏内点击，隐藏即可
+          console.log("jsjdj:", appStore.collapse)
+          if (!appStore.collapse) {
+            appStore.collapse = true;
+          }
+        }
+      }
+    }
+
     const changeVisible = function () {
       visible.value = !visible.value;
     };
@@ -193,6 +209,17 @@ export default {
 </script>
 
 <style>
+@media screen and (max-width: 767px) {
+  .layui-side {
+    position: absolute;
+    height: 100vh;
+  } 
+
+  .layui-header, .layui-body, .layui-footer {
+    margin-left: 60px;
+  }
+}
+
 /*鼠标经过背景色，增加了improtant，否则设置无效*/
 .layui-header .layui-nav-item .layui-icon:hover {
   background: whitesmoke !important;
diff --git a/src/styles/admin.css b/src/styles/admin.css
index 2dbef45..1ab21e0 100644
--- a/src/styles/admin.css
+++ b/src/styles/admin.css
@@ -69,7 +69,7 @@
   color: #393d49;
 }
 .layui-side {
-  z-index: 9999;
+  z-index: 10000;
   width: 230px !important;
   background: rgb(34, 36, 37, 98%);
   box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);
diff --git a/src/styles/display.css b/src/styles/display.css
new file mode 100644
index 0000000..70be0e7
--- /dev/null
+++ b/src/styles/display.css
@@ -0,0 +1,65 @@
+@media screen and (max-width: 767px) {
+  .hidden-xs-only {
+    display: none !important;
+  }
+}
+
+@media screen and (max-width: 991px) {
+  .hidden-sm-and-down {
+    display: none !important;
+  }
+
+  @media screen and (min-width: 768px) {
+    .hidden-sm-only {
+      display: none !important;
+    }
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .hidden-sm-and-up {
+    display: none !important;
+  }
+}
+
+@media screen and (max-width: 1199px) {
+  .hidden-md-and-down {
+    display: none !important;
+  }
+
+  @media screen and (min-width: 992px) {
+    .hidden-md-only {
+      display: none !important;
+    }
+  }
+}
+
+@media screen and (min-width: 992px) {
+  .hidden-md-and-up {
+    display: none !important;
+  }
+}
+
+@media screen and (max-width: 1919px) {
+  .hidden-lg-and-down {
+    display: none !important;
+  }
+
+  @media screen and (min-width: 1200px) {
+    .hidden-lg-only {
+      display: none !important;
+    }
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .hidden-lg-and-up {
+    display: none !important;
+  }
+}
+
+@media screen and (min-width: 1920px) {
+  .hidden-xl-only {
+    display: none !important;
+  }
+}
diff --git a/src/styles/index.css b/src/styles/index.css
index 600a0ae..32e8a09 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -1,4 +1,5 @@
 @import url(./admin.css);
+@import url(./display.css);
 @import url(./mobile.css);
 @import url(./reset.css);
 
-- 
Gitee


From 83918579df508172bb94a4711ab9709c2f8d75f9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=81=E5=B0=982022?= <1157219723@qq.com>
Date: Sat, 26 Nov 2022 00:52:59 +0800
Subject: [PATCH 2/3] =?UTF-8?q?=E7=A7=BB=E9=99=A4test=20console?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layouts/BaseLayout.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/layouts/BaseLayout.vue b/src/layouts/BaseLayout.vue
index 0312dea..d4ccb15 100644
--- a/src/layouts/BaseLayout.vue
+++ b/src/layouts/BaseLayout.vue
@@ -160,7 +160,6 @@ export default {
       if (dom) {
         if (!dom.contains(event.target) && !event.target.classList.contains("layui-icon-spread-left")) {
           // 不在侧边栏内点击，隐藏即可
-          console.log("jsjdj:", appStore.collapse)
           if (!appStore.collapse) {
             appStore.collapse = true;
           }
-- 
Gitee


From f594de0af1bcafed53f82182746e55a5a0d1c1fd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=81=E5=B0=982022?= <1157219723@qq.com>
Date: Sat, 26 Nov 2022 01:41:55 +0800
Subject: [PATCH 3/3] =?UTF-8?q?=E8=BF=9B=E4=B8=80=E6=AD=A5=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=EF=BC=9B=E8=B7=9F=E5=85=B6=E4=BB=96=E6=A1=86=E6=9E=B6?=
 =?UTF-8?q?=E4=B8=80=E6=A0=B7=E7=A7=BB=E5=8A=A8=E7=AB=AF=E9=BB=98=E8=AE=A4?=
 =?UTF-8?q?=E9=9A=90=E8=97=8F=E4=BE=A7=E8=BE=B9=E6=A0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layouts/BaseLayout.vue |  4 ----
 src/store/app.ts           |  2 +-
 src/styles/admin.css       | 11 +++++++++--
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/layouts/BaseLayout.vue b/src/layouts/BaseLayout.vue
index d4ccb15..2e694e9 100644
--- a/src/layouts/BaseLayout.vue
+++ b/src/layouts/BaseLayout.vue
@@ -212,10 +212,6 @@ export default {
   .layui-side {
     position: absolute;
     height: 100vh;
-  } 
-
-  .layui-header, .layui-body, .layui-footer {
-    margin-left: 60px;
   }
 }
 
diff --git a/src/store/app.ts b/src/store/app.ts
index 69d6ca8..9aa34a6 100644
--- a/src/store/app.ts
+++ b/src/store/app.ts
@@ -9,7 +9,7 @@ export const useAppStore = defineStore({
       level: true,
       inverted: false,
       routerAlive: true,
-      collapse: false,
+      collapse: document.body.clientWidth < 768, // 移动端默认收起，PC端默认展开
       subfield: false,
       theme: 'light',
       breadcrumb: true,
diff --git a/src/styles/admin.css b/src/styles/admin.css
index 1ab21e0..2f83362 100644
--- a/src/styles/admin.css
+++ b/src/styles/admin.css
@@ -87,8 +87,15 @@
 .layui-layout.collapse .layui-logo {
   width: 60px;
 }
-.layui-layout.collapse .layui-side {
-  width: 60px !important;
+@media screen and (max-width: 767px) {
+  .layui-layout.collapse .layui-side {
+    width: 0 !important;
+  }
+}
+@media screen and (min-width: 768px) {
+  .layui-layout.collapse .layui-side {
+    width: 60px !important;
+  }
 }
 .layui-layout.collapse .layui-body {
   left: 60px;
-- 
Gitee