fix: 增加系统主题变化监听事件 (#5555)

This commit is contained in:
ssongliu 2024-06-24 17:02:43 +08:00 committed by GitHub
parent 6e191fc342
commit f6cc0b272c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 30 additions and 13 deletions

View File

@ -8,12 +8,14 @@ export const useTheme = () => {
body.setAttribute('class', 'dark-gold');
return;
}
let itemTheme = globalStore.themeConfig.theme;
if (globalStore.themeConfig.theme === 'auto') {
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
globalStore.themeConfig.theme = prefersDark.matches ? 'dark' : 'light';
itemTheme = prefersDark.matches ? 'dark' : 'light';
}
const body = document.documentElement as HTMLElement;
if (globalStore.themeConfig.theme === 'dark') body.setAttribute('class', 'dark');
if (itemTheme === 'dark') body.setAttribute('class', 'dark');
else body.setAttribute('class', '');
};

View File

@ -23,6 +23,8 @@ import { DeviceType } from '@/enums/app';
import { getSystemAvailable } from '@/api/modules/setting';
import { useRoute, useRouter } from 'vue-router';
import { loadProductProFromDB } from '@/utils/xpack';
import { useTheme } from '@/hooks/use-theme';
const { switchTheme } = useTheme();
useResize();
const router = useRouter();
@ -98,6 +100,17 @@ onMounted(() => {
loadStatus();
loadProductProFromDB();
const mqList = window.matchMedia('(prefers-color-scheme: dark)');
if (mqList.addEventListener) {
mqList.addEventListener('change', () => {
switchTheme();
});
} else if (mqList.addListener) {
mqList.addListener(() => {
switchTheme();
});
}
});
</script>

View File

@ -43,7 +43,10 @@ const GlobalStore = defineStore({
errStatus: '',
}),
getters: {
isDarkTheme: (state) => state.themeConfig.theme === 'dark' || state.themeConfig.isGold,
isDarkTheme: (state) =>
state.themeConfig.theme === 'dark' ||
state.themeConfig.isGold ||
(state.themeConfig.theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches),
isDarkGoldTheme: (state) => state.themeConfig.isGold && state.isProductPro,
},
actions: {

View File

@ -1,10 +1,8 @@
import { getLicenseStatus, getSettingInfo } from '@/api/modules/setting';
import { useTheme } from '@/hooks/use-theme';
import { GlobalStore } from '@/store';
import { computed } from 'vue';
const globalStore = GlobalStore();
const { switchTheme } = useTheme();
const themeConfig = computed(() => globalStore.themeConfig);
export function resetXSetting() {
globalStore.themeConfig.title = '';
@ -45,6 +43,14 @@ export async function getXpackSetting() {
}
}
const loadDataFromDB = async () => {
const res = await getSettingInfo();
document.title = res.data.panelName;
globalStore.entrance = res.data.securityEntrance;
globalStore.setDefaultNetwork(res.data.defaultNetwork);
globalStore.setOpenMenuTabs(res.data.menuTabs === 'enable');
};
export async function loadProductProFromDB() {
const res = await getLicenseStatus();
if (!res.data) {
@ -58,16 +64,9 @@ export async function loadProductProFromDB() {
globalStore.productProExpires = Number(res.data.productPro);
}
}
const res2 = await getSettingInfo();
document.title = res2.data.panelName;
globalStore.entrance = res2.data.securityEntrance;
globalStore.setDefaultNetwork(res2.data.defaultNetwork);
globalStore.setOpenMenuTabs(res2.data.menuTabs === 'enable');
globalStore.updateLanguage(res2.data.language);
globalStore.setThemeConfig({ ...themeConfig.value, theme: res2.data.theme, panelName: res2.data.panelName });
switchTheme();
initFavicon();
loadDataFromDB();
}
export async function getXpackSettingForTheme() {