fix: 修复 mobile + 非左侧布局模式时左侧导航菜单背景色异常的问题

pany-ang · pany-ang · commit 5f611b9a13b0 · 2024-11-21T11:52:45.000+08:00
diff --git a/src/layouts/LeftMode.vue b/src/layouts/LeftMode.vue
@@ -1,12 +1,14 @@
 <script lang="ts" setup>
 import { useDevice } from "@/hooks/useDevice"
+import { useLayoutMode } from "@/hooks/useLayoutMode"
 import { useAppStore } from "@/store/modules/app"
 import { useSettingsStore } from "@/store/modules/settings"
 import { storeToRefs } from "pinia"
 import { computed } from "vue"
 import { AppMain, NavigationBar, Sidebar, TagsView } from "./components"
 
 const { isMobile } = useDevice()
+const { isLeft } = useLayoutMode()
 const appStore = useAppStore()
 const settingsStore = useSettingsStore()
 const { showTagsView, fixedHeader } = storeToRefs(settingsStore)
@@ -17,7 +19,8 @@ const layoutClasses = computed(() => {
     hideSidebar: !appStore.sidebar.opened,
     openSidebar: appStore.sidebar.opened,
     withoutAnimation: appStore.sidebar.withoutAnimation,
-    mobile: isMobile.value
+    mobile: isMobile.value,
+    noLeft: !isLeft.value
   }
 })
 
@@ -159,6 +162,12 @@ $transition-time: 0.35s;
       transform: translate3d(calc(0px - var(--v3-sidebar-width)), 0, 0);
     }
   }
+  // 即是 mobile 又是顶部或混合布局模式
+  &.noLeft {
+    .sidebar-container {
+      background-color: var(--el-bg-color);
+    }
+  }
 }
 
 .withoutAnimation {
