From 0d7fa150f05953fc6deb00e5171a82de05c431db Mon Sep 17 00:00:00 2001
From: hooray <304327508@qq.com>
Date: Thu, 9 Dec 2021 09:50:35 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E4=BE=A7=E8=BE=B9=E6=A0=8F?=
 =?UTF-8?q?=E5=AE=BD=E5=BA=A6=E8=AE=A1=E7=AE=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                  | 55 ++++++++++-------
 src/assets/styles/globals.scss               | 28 +--------
 src/assets/styles/resources/layout.scss      | 10 ++-
 src/components/SvgIcon/index.vue             |  1 -
 src/layout/components/MainSidebar/index.vue  |  4 +-
 src/layout/components/Search/index.vue       |  2 -
 src/layout/components/SubSidebar/index.vue   |  2 +-
 src/layout/components/ThemeSetting/index.vue |  2 +-
 src/layout/index.vue                         | 65 ++------------------
 9 files changed, 52 insertions(+), 117 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 723fb359..9a169179 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,10 +1,35 @@
 <template>
-    <RouterView />
+    <RouterView
+        :style="{
+            '--g-main-sidebar-actual-width': mainSidebarActualWidth,
+            '--g-sub-sidebar-actual-width': subSidebarActualWidth
+        }"
+    />
 </template>
 
 <script setup>
 const store = useStore()
 
+// 侧边栏主导航当前实际宽度
+const mainSidebarActualWidth = computed(() => {
+    let actualWidth = getComputedStyle(document.documentElement).getPropertyValue('--g-main-sidebar-width')
+    actualWidth = parseInt(actualWidth)
+    if (['head', 'single'].includes(store.state.settings.menuMode)) {
+        actualWidth = 0
+    }
+    return `${actualWidth}px`
+})
+
+// 侧边栏次导航当前实际宽度
+const subSidebarActualWidth = computed(() => {
+    let actualWidth = getComputedStyle(document.documentElement).getPropertyValue('--g-sub-sidebar-width')
+    actualWidth = parseInt(actualWidth)
+    if (store.state.settings.sidebarCollapse) {
+        actualWidth = 64
+    }
+    return `${actualWidth}px`
+})
+
 watch(() => store.state.settings.mode, () => {
     if (store.state.settings.mode === 'pc') {
         store.commit('settings/updateThemeSetting', {
@@ -20,39 +45,25 @@ watch(() => store.state.settings.mode, () => {
     immediate: true
 })
 
-watch([
-    () => store.state.settings.menuMode,
-    () => store.state.settings.sidebarCollapse
-], () => setMenuMode(), {
+watch(() => store.state.settings.menuMode, () => {
+    document.body.setAttribute('data-menu-mode', store.state.settings.menuMode)
+}, {
     immediate: true
 })
 
-function setMenuMode() {
-    document.body.removeAttribute('data-sidebar-no-collapse')
-    document.body.removeAttribute('data-sidebar-collapse')
-    if (store.state.settings.sidebarCollapse) {
-        document.body.setAttribute('data-sidebar-collapse', '')
-    } else {
-        document.body.setAttribute('data-sidebar-no-collapse', '')
-    }
-    document.body.setAttribute('data-menu-mode', store.state.settings.menuMode)
-}
-
 watch([
     () => store.state.settings.enableDynamicTitle,
     () => store.state.settings.title
-], () => setDocumentTitle(), {
-    immediate: true
-})
-
-function setDocumentTitle() {
+], () => {
     if (store.state.settings.enableDynamicTitle && store.state.settings.title) {
         let title = store.state.settings.title
         document.title = `${title} - ${import.meta.env.VITE_APP_TITLE}`
     } else {
         document.title = import.meta.env.VITE_APP_TITLE
     }
-}
+}, {
+    immediate: true
+})
 
 onMounted(() => {
     window.onresize = () => {
diff --git a/src/assets/styles/globals.scss b/src/assets/styles/globals.scss
index b47b88f5..b2030ac1 100644
--- a/src/assets/styles/globals.scss
+++ b/src/assets/styles/globals.scss
@@ -40,32 +40,8 @@ body {
     position: fixed;
     left: 50%;
     right: 0;
-    width: calc(100% - #{$g-main-sidebar-width} - #{$g-sub-sidebar-width});
-}
-[data-sidebar-no-collapse] {
-    [data-fixed-calc-width] {
-        transform: translateX(-50%) translateX(division($g-main-sidebar-width, 2)) translateX(division($g-sub-sidebar-width, 2));
-    }
-    &[data-menu-mode="head"],
-    &[data-menu-mode="single"] {
-        [data-fixed-calc-width] {
-            width: calc(100% - #{$g-sub-sidebar-width});
-            transform: translateX(-50%) translateX(division($g-sub-sidebar-width, 2));
-        }
-    }
-}
-[data-sidebar-collapse] {
-    [data-fixed-calc-width] {
-        width: calc(100% - #{$g-main-sidebar-width} - 64px);
-        transform: translateX(-50%) translateX(division($g-main-sidebar-width, 2)) translateX(32px);
-    }
-    &[data-menu-mode="head"],
-    &[data-menu-mode="single"] {
-        [data-fixed-calc-width] {
-            width: calc(100% - 64px);
-            transform: translateX(-50%) translateX(32px);
-        }
-    }
+    width: calc(100% - var(--g-main-sidebar-actual-width) - var(--g-sub-sidebar-actual-width));
+    transform: translateX(-50%) translateX(calc(var(--g-main-sidebar-actual-width) / 2)) translateX(calc(var(--g-sub-sidebar-actual-width) / 2));
 }
 [data-mode="mobile"] {
     [data-fixed-calc-width] {
diff --git a/src/assets/styles/resources/layout.scss b/src/assets/styles/resources/layout.scss
index 053e0e0f..7537af51 100644
--- a/src/assets/styles/resources/layout.scss
+++ b/src/assets/styles/resources/layout.scss
@@ -4,10 +4,14 @@
 $g-header-width: 100%;
 // 头部高度
 $g-header-height: 70px;
-// 侧边栏宽度
-$g-main-sidebar-width: 70px;
-$g-sub-sidebar-width: 220px;
 // 侧边栏Logo高度
 $g-sidebar-logo-height: 50px;
 // 顶部导航栏高度
 $g-topbar-height: 50px;
+
+// 全局变量
+:root {
+    // 侧边栏宽度
+    --g-main-sidebar-width: 70px;
+    --g-sub-sidebar-width: 220px;
+}
diff --git a/src/components/SvgIcon/index.vue b/src/components/SvgIcon/index.vue
index 89c5ff51..2af1ff3c 100644
--- a/src/components/SvgIcon/index.vue
+++ b/src/components/SvgIcon/index.vue
@@ -2,7 +2,6 @@
     <el-icon v-if="name.indexOf('el-icon-') === 0 || name.indexOf('ElIcon') === 0" class="svg-icon" :style="transformStyle">
         <Component :is="name" />
     </el-icon>
-    <i v-else-if="name.indexOf('ri-') === 0" class="svg-icon" :style="transformStyle" :class="name" />
     <svg v-else class="svg-icon" :style="transformStyle" aria-hidden="true">
         <use :xlink:href="`#icon-${name}`" />
     </svg>
diff --git a/src/layout/components/MainSidebar/index.vue b/src/layout/components/MainSidebar/index.vue
index 66487a7c..d9059308 100644
--- a/src/layout/components/MainSidebar/index.vue
+++ b/src/layout/components/MainSidebar/index.vue
@@ -32,7 +32,7 @@ const switchMenu = inject('switchMenu')
     transition: 0.3s;
 }
 .main-sidebar-enter-from {
-    transform: translateX(-#{$g-main-sidebar-width});
+    transform: translateX(calc(var(--g-main-sidebar-width) * -1));
 }
 .main-sidebar-container {
     overflow-x: hidden;
@@ -47,7 +47,7 @@ const switchMenu = inject('switchMenu')
 
     position: relative;
     z-index: 1;
-    width: $g-main-sidebar-width;
+    width: var(--g-main-sidebar-width);
     color: $g-main-sidebar-menu-color;
     background-color: $g-main-sidebar-bg;
     .sidebar-logo {
diff --git a/src/layout/components/Search/index.vue b/src/layout/components/Search/index.vue
index fc5020a6..3f3390f7 100644
--- a/src/layout/components/Search/index.vue
+++ b/src/layout/components/Search/index.vue
@@ -289,7 +289,6 @@ function scrollTo(offsetTop) {
                     background-color: #dbe7f8;
                     .icon {
                         [class^="el-icon-"],
-                        [class^="ri-"],
                         .svg-icon {
                             color: #409eff;
                             transform: scale(1.2);
@@ -310,7 +309,6 @@ function scrollTo(offsetTop) {
                     flex: 0 0 66px;
                     text-align: center;
                     [class^="el-icon-"],
-                    [class^="ri-"],
                     .svg-icon {
                         color: #999;
                         font-size: 20px;
diff --git a/src/layout/components/SubSidebar/index.vue b/src/layout/components/SubSidebar/index.vue
index 820de9e0..39815efa 100644
--- a/src/layout/components/SubSidebar/index.vue
+++ b/src/layout/components/SubSidebar/index.vue
@@ -57,7 +57,7 @@ function onSidebarScroll(e) {
         display: none;
     }
 
-    width: $g-sub-sidebar-width;
+    width: var(--g-sub-sidebar-width);
     position: absolute;
     left: 0;
     top: 0;
diff --git a/src/layout/components/ThemeSetting/index.vue b/src/layout/components/ThemeSetting/index.vue
index 651d1037..b32f34e7 100644
--- a/src/layout/components/ThemeSetting/index.vue
+++ b/src/layout/components/ThemeSetting/index.vue
@@ -42,7 +42,7 @@
                 <div class="label">
                     保持展开一个
                     <el-tooltip content="开启该功能后，侧边栏只保持一个子菜单的展开" placement="top" :append-to-body="false">
-                        <svg-icon name="ri-question-line" />
+                        <svg-icon name="el-icon-question-filled" />
                     </el-tooltip>
                 </div>
                 <el-switch v-model="sidebarUniqueOpened" />
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 265d3bf8..a5143ab4 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -95,78 +95,23 @@ function switchMenu(index) {
 </script>
 
 <style lang="scss" scoped>
-// 侧边栏未折叠
-[data-sidebar-no-collapse] {
-    .sidebar-container {
-        width: calc(#{$g-main-sidebar-width} + #{$g-sub-sidebar-width});
-    }
-    .main-container {
-        margin-left: calc(#{$g-main-sidebar-width} + #{$g-sub-sidebar-width});
-    }
-    // 没有主侧边栏
-    &[data-menu-mode="head"],
-    &[data-menu-mode="single"] {
-        .sidebar-container {
-            width: $g-sub-sidebar-width;
-        }
-        .main-container {
-            margin-left: $g-sub-sidebar-width;
-        }
-    }
-}
-// 侧边栏折叠
-[data-sidebar-collapse] {
-    .sidebar-container {
-        width: calc(#{$g-main-sidebar-width} + 64px);
-    }
-    .main-container {
-        margin-left: calc(#{$g-main-sidebar-width} + 64px);
-    }
-    // 没有主侧边栏
-    &[data-menu-mode="head"],
-    &[data-menu-mode="single"] {
-        .sidebar-container {
-            width: 64px;
-        }
-        .main-container {
-            margin-left: 64px;
-        }
-    }
-}
 [data-mode="mobile"] {
     .sidebar-container {
-        width: calc(#{$g-main-sidebar-width} + #{$g-sub-sidebar-width});
-        transform: translateX(-#{$g-main-sidebar-width}) translateX(-#{$g-sub-sidebar-width});
+        transform: translateX(calc((var(--g-main-sidebar-width) + var(--g-sub-sidebar-width)) * -1));
         &.show {
             transform: translateX(0);
         }
     }
     .main-container {
-        margin-left: 0;
-    }
-    &[data-menu-mode="head"] {
-        .sidebar-container {
-            width: calc(#{$g-main-sidebar-width} + #{$g-sub-sidebar-width});
-            transform: translateX(-#{$g-main-sidebar-width}) translateX(-#{$g-sub-sidebar-width});
-            &.show {
-                transform: translateX(0);
-            }
-        }
-        .main-container {
-            margin-left: 0;
-        }
+        margin-left: 0 !important;
     }
     &[data-menu-mode="single"] {
         .sidebar-container {
-            width: $g-sub-sidebar-width;
-            transform: translateX(-#{$g-sub-sidebar-width});
+            transform: translateX(calc(var(--g-main-sidebar-width) * -1));
             &.show {
                 transform: translateX(0);
             }
         }
-        .main-container {
-            margin-left: 0;
-        }
     }
 }
 .layout {
@@ -190,6 +135,7 @@ function switchMenu(index) {
         bottom: 0;
         display: flex;
         transition: transform 0.3s;
+        width: calc(var(--g-main-sidebar-actual-width) + var(--g-sub-sidebar-actual-width));
     }
     .sidebar-mask {
         position: fixed;
@@ -210,7 +156,7 @@ function switchMenu(index) {
         }
     }
     .main-sidebar-container + .sub-sidebar-container {
-        left: $g-main-sidebar-width;
+        left: var(--g-main-sidebar-width);
     }
     .main-container {
         display: flex;
@@ -219,6 +165,7 @@ function switchMenu(index) {
         transition: margin-left 0.3s;
         background-color: $g-main-bg;
         box-shadow: 1px 0 0 0 darken($g-main-bg, 10);
+        margin-left: calc(var(--g-main-sidebar-actual-width) + var(--g-sub-sidebar-actual-width));
         .topbar-container {
             top: 0;
             z-index: 998;