From a322b8497e26162252801f62c5cd85687c18f03c Mon Sep 17 00:00:00 2001
From: xiaoxian521 <1923740402@qq.com>
Date: Tue, 19 Oct 2021 10:45:41 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E9=A1=B5=E9=9D=A2=E5=86=85=E5=85=A8?=
 =?UTF-8?q?=E5=B1=8F=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/index.vue | 38 ++++++++------------------------------
 1 file changed, 8 insertions(+), 30 deletions(-)

diff --git a/src/layout/index.vue b/src/layout/index.vue
index f4c71630c..f971ac450 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -33,14 +33,12 @@ import {
   computed,
   onMounted,
   watchEffect,
-  useCssModule,
   onBeforeMount,
   getCurrentInstance
 } from "vue";
 import { setType } from "./types";
 import { useI18n } from "vue-i18n";
 import { emitter } from "/@/utils/mitt";
-import { toggleClass } from "/@/utils/operate";
 import { useEventListener } from "@vueuse/core";
 import { storageLocal } from "/@/utils/storage";
 import { useAppStoreHook } from "/@/store/modules/app";
@@ -56,7 +54,6 @@ import Vertical from "./components/sidebar/vertical.vue";
 import Horizontal from "./components/sidebar/horizontal.vue";
 
 const pureSetting = useSettingStoreHook();
-const { hiddenMainContainer } = useCssModule();
 
 const instance =
   getCurrentInstance().appContext.app.config.globalProperties.$storage;
@@ -128,21 +125,9 @@ const $_resizeHandler = () => {
 };
 
 function onFullScreen() {
-  if (unref(hiddenSideBar)) {
-    hiddenSideBar.value = false;
-    toggleClass(
-      false,
-      hiddenMainContainer,
-      document.querySelector(".main-container")
-    );
-  } else {
-    hiddenSideBar.value = true;
-    toggleClass(
-      true,
-      hiddenMainContainer,
-      document.querySelector(".main-container")
-    );
-  }
+  unref(hiddenSideBar)
+    ? (hiddenSideBar.value = false)
+    : (hiddenSideBar.value = true);
 }
 
 onMounted(() => {
@@ -151,11 +136,6 @@ onMounted(() => {
     useAppStoreHook().toggleDevice("mobile");
     handleClickOutside(true);
   }
-  toggleClass(
-    unref(hiddenSideBar),
-    hiddenMainContainer,
-    document.querySelector(".main-container")
-  );
 });
 
 onBeforeMount(() => {
@@ -175,7 +155,7 @@ onBeforeMount(() => {
       @click="handleClickOutside(false)"
     />
     <Vertical v-show="!hiddenSideBar && layout.includes('vertical')" />
-    <div class="main-container">
+    <div :class="['main-container', hiddenSideBar ? 'main-hidden' : '']">
       <div :class="{ 'fixed-header': set.fixedHeader }">
         <!-- 顶部导航栏 -->
         <navbar v-show="!hiddenSideBar && layout.includes('vertical')" />
@@ -196,12 +176,6 @@ onBeforeMount(() => {
   </div>
 </template>
 
-<style scoped module>
-.hiddenMainContainer {
-  margin-left: 0 !important;
-}
-</style>
-
 <style lang="scss" scoped>
 @mixin clearfix {
   &::after {
@@ -224,6 +198,10 @@ onBeforeMount(() => {
   }
 }
 
+.main-hidden {
+  margin-left: 0 !important;
+}
+
 .drawer-bg {
   background: #000;
   opacity: 0.3;