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

Author: hooray

src/App.vue

@@ -6,24 +6,6 @@ import useSettingsStore from '@/store/modules/settings'
 
 const settingsStore = useSettingsStore()
 
-// 侧边栏主导航当前实际宽度
-const mainSidebarActualWidth = computed(() => {
-  let actualWidth = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--g-main-sidebar-width'))
-  if (['head', 'single'].includes(settingsStore.settings.menu.mode)) {
-    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) {
-    actualWidth = 64
-  }
-  return `${actualWidth}px`
-})
-
 watch(() => settingsStore.title, () => {
   document.title = import.meta.env.VITE_APP_TITLE
 }, {
@@ -39,12 +21,7 @@ onMounted(() => {
 
 <template>
   <Provider>
-    <RouterView
-      :style="{
-        '--g-main-sidebar-actual-width': mainSidebarActualWidth,
-        '--g-sub-sidebar-actual-width': subSidebarActualWidth,
-      }"
-    />
+    <RouterView />
     <SystemInfo />
   </Provider>
 </template>

src/views/index.vue

@@ -16,6 +16,24 @@ import eventBus from '@/utils/eventBus'
 const settingsStore = useSettingsStore()
 const menuStore = useMenuStore()
 
+// 侧边栏主导航当前实际宽度
+const mainSidebarActualWidth = computed(() => {
+  let actualWidth = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--g-main-sidebar-width'))
+  if (['head', 'single'].includes(settingsStore.settings.menu.mode)) {
+    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) {
+    actualWidth = 64
+  }
+  return `${actualWidth}px`
+})
+
 const enableToolbar = computed(() => {
   return !(settingsStore.settings.menu.mode === 'head' && !settingsStore.settings.toolbar.previewWindows)
 })
@@ -36,7 +54,12 @@ const enableAppSetting = import.meta.env.VITE_APP_SETTING === 'true'
 </script>
 
 <template>
-  <div class="layout">
+  <div
+    class="layout" :style="{
+      '--g-main-sidebar-actual-width': mainSidebarActualWidth,
+      '--g-sub-sidebar-actual-width': subSidebarActualWidth,
+    }"
+  >
     <div id="app-main">
       <Header />
       <div class="wrapper">