布局相关css变量移入到布局组件中维护

fantastic-admin · Aug 27, 2024 · 12188d1 · 12188d1
1 parent e8eb5d4
commit 12188d1
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 30 deletions.
diff --git 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
@@ -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%;
 }