From 12188d18c641ee18f187c843f613f99eebb4396e Mon Sep 17 00:00:00 2001
From: Hooray Hu <304327508@qq.com>
Date: Tue, 27 Aug 2024 10:21:09 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B8=83=E5=B1=80=E7=9B=B8=E5=85=B3css?=
 =?UTF-8?q?=E5=8F=98=E9=87=8F=E7=A7=BB=E5=85=A5=E5=88=B0=E5=B8=83=E5=B1=80?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E4=B8=AD=E7=BB=B4=E6=8A=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue           | 31 +------------------------------
 src/layouts/index.vue | 24 ++++++++++++++++++++++++
 2 files changed, 25 insertions(+), 30 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 2e5390d5b..721786a69 100755
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,12 +3,10 @@ import hotkeys from 'hotkeys-js'
 import eventBus from './utils/eventBus'
 import Provider from './ui-provider/index.vue'
 import useSettingsStore from '@/store/modules/settings'
-import useMenuStore from '@/store/modules/menu'
 
 const route = useRoute()
 
 const settingsStore = useSettingsStore()
-const menuStore = useMenuStore()
 const { auth } = useAuth()
 
 const isAuth = computed(() => {
@@ -17,27 +15,6 @@ const isAuth = computed(() => {
   })
 })
 
-// 侧边栏主导航当前实际宽度
-const mainSidebarActualWidth = computed(() => {
-  let actualWidth = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--g-main-sidebar-width'))
-  if (settingsStore.settings.menu.mode === 'single' || (settingsStore.settings.menu.mode === 'head' && settingsStore.mode !== 'mobile')) {
-    actualWidth = 0
-  }
-  return `${actualWidth}px`
-})
-
-// 侧边栏次导航当前实际宽度
-const subSidebarActualWidth = computed(() => {
-  let actualWidth = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--g-sub-sidebar-width'))
-  if (settingsStore.settings.menu.subMenuCollapse && settingsStore.mode !== 'mobile') {
-    actualWidth = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--g-sub-sidebar-collapse-width'))
-  }
-  if (menuStore.sidebarMenus.every(item => item.meta?.menu === false)) {
-    actualWidth = 0
-  }
-  return `${actualWidth}px`
-})
-
 // 设置网页 title
 watch([
   () => settingsStore.settings.app.enableDynamicTitle,
@@ -68,13 +45,7 @@ onMounted(() => {
 
 <template>
   <Provider>
-    <RouterView
-      v-slot="{ Component }"
-      :style="{
-        '--g-main-sidebar-actual-width': mainSidebarActualWidth,
-        '--g-sub-sidebar-actual-width': subSidebarActualWidth,
-      }"
-    >
+    <RouterView v-slot="{ Component }">
       <component :is="Component" v-if="isAuth" />
       <NotAllowed v-else />
     </RouterView>
diff --git a/src/layouts/index.vue b/src/layouts/index.vue
index 7bb007640..4ed7c7ffe 100755
--- a/src/layouts/index.vue
+++ b/src/layouts/index.vue
@@ -29,6 +29,27 @@ const menuStore = useMenuStore()
 const mainPage = useMainPage()
 const menu = useMenu()
 
+// 侧边栏主导航当前实际宽度
+const mainSidebarActualWidth = computed(() => {
+  let actualWidth = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--g-main-sidebar-width'))
+  if (settingsStore.settings.menu.mode === 'single' || (settingsStore.settings.menu.mode === 'head' && settingsStore.mode !== 'mobile')) {
+    actualWidth = 0
+  }
+  return `${actualWidth}px`
+})
+
+// 侧边栏次导航当前实际宽度
+const subSidebarActualWidth = computed(() => {
+  let actualWidth = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--g-sub-sidebar-width'))
+  if (settingsStore.settings.menu.subMenuCollapse && settingsStore.mode !== 'mobile') {
+    actualWidth = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--g-sub-sidebar-collapse-width'))
+  }
+  if (menuStore.sidebarMenus.every(item => item.meta?.menu === false)) {
+    actualWidth = 0
+  }
+  return `${actualWidth}px`
+})
+
 const isLink = computed(() => !!routeInfo.meta.link)
 
 watch(() => settingsStore.settings.menu.subMenuCollapse, (val) => {
@@ -137,6 +158,9 @@ const enableAppSetting = import.meta.env.VITE_APP_SETTING === 'true'
 }
 
 .layout {
+  --g-main-sidebar-actual-width: v-bind(mainSidebarActualWidth);
+  --g-sub-sidebar-actual-width: v-bind(subSidebarActualWidth);
+
   height: 100%;
 }