tongtong/vue3-element-admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 🐛 优化根据主题和侧边栏配色方案选择 navbar 右侧的样式类

Browse Source
This commit is contained in:
lostelk
2025-02-19 13:56:50 +08:00
parent d6de05a4b7
commit 549c471199
1 changed files with 8 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/layout/components/NavBar/components/NavbarRight.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="navbar__right" :class="navbarRightClass"> <div :class="['navbar__right', navbarRightClass]">
<!-- 非手机设备（窄屏）才显示 --> <!-- 非手机设备（窄屏）才显示 -->
<template v-if="!isMobile"> <template v-if="!isMobile">
<!-- 搜索 --> <!-- 搜索 -->
@@ -35,18 +35,20 @@ import { useAppStore, useSettingsStore } from "@/store";
import UserProfile from "./UserProfile.vue"; import UserProfile from "./UserProfile.vue";
import Notification from "./Notification.vue"; import Notification from "./Notification.vue";
import { SidebarLightThemeEnum } from "@/enums/ThemeEnum"; import { SidebarLightThemeEnum, ThemeEnum } from "@/enums/ThemeEnum";
const appStore = useAppStore(); const appStore = useAppStore();
const settingStore = useSettingsStore(); const settingStore = useSettingsStore();
const isMobile = computed(() => appStore.device === DeviceEnum.MOBILE); const isMobile = computed(() => appStore.device === DeviceEnum.MOBILE);
// 根据浅色模式-侧边栏颜色配置选择navbar右侧的样式类 // 根据主题和侧边栏配色方案选择 navbar 右侧的样式类
const navbarRightClass = computed(() => { const navbarRightClass = computed(() => {
return settingStore.sidebarColorScheme === SidebarLightThemeEnum.DARKBLUE const isDarkTheme = settingStore.theme === ThemeEnum.DARK;
? "navbar__right--darkBlue" const isDarkBlueSidebar = settingStore.sidebarColorScheme === SidebarLightThemeEnum.DARKBLUE;
: "navbar__right--white";
// 如果是暗黑主题，或者是浅色主题中的深蓝色侧边栏配色
return isDarkTheme || isDarkBlueSidebar ? "navbar__right--darkBlue" : "navbar__right--white";
}); });
</script> </script>