From 28f2dddcf649708ea79488c3783d9fc89338d0cd Mon Sep 17 00:00:00 2001 From: ssongliu <73214554+ssongliu@users.noreply.github.com> Date: Wed, 29 May 2024 18:39:12 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E8=A7=A3=E5=86=B3=E9=BB=91=E9=87=91?= =?UTF-8?q?=E6=A8=A1=E5=BC=8F=E4=B8=8B=E6=A6=82=E8=A7=88=E9=A1=B5=E5=BC=82?= =?UTF-8?q?=E5=B8=B8=E9=97=AA=E5=8A=A8=E7=9A=84=E9=97=AE=E9=A2=98=20(#5201?= =?UTF-8?q?)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/api/index.ts | 1 - .../src/components/license-import/index.vue | 10 +++- frontend/src/hooks/use-theme.ts | 60 +++---------------- frontend/src/layout/index.vue | 2 +- frontend/src/store/interface/index.ts | 1 + frontend/src/store/modules/global.ts | 5 +- frontend/src/views/setting/license/index.vue | 2 + frontend/src/views/setting/panel/index.vue | 11 +++- .../src/views/website/ssl/create/index.vue | 1 - 9 files changed, 31 insertions(+), 62 deletions(-) diff --git a/frontend/src/api/index.ts b/frontend/src/api/index.ts index c090354fe..f7487bc05 100644 --- a/frontend/src/api/index.ts +++ b/frontend/src/api/index.ts @@ -81,7 +81,6 @@ class RequestHttp { async (error: AxiosError) => { globalStore.errStatus = ''; const { response } = error; - console.log(response.status); if (error.message.indexOf('timeout') !== -1) MsgError('请求超时！请您稍后重试'); if (response) { switch (response.status) { diff --git a/frontend/src/components/license-import/index.vue b/frontend/src/components/license-import/index.vue index 8e5b62a06..bd6212e40 100644 --- a/frontend/src/components/license-import/index.vue +++ b/frontend/src/components/license-import/index.vue @@ -47,8 +47,11 @@ import { MsgSuccess } from '@/utils/message'; import { UploadFileData } from '@/api/modules/setting'; import { GlobalStore } from '@/store'; import { UploadFile, UploadFiles, UploadInstance, UploadProps, UploadRawFile, genFileId } from 'element-plus'; +import { useTheme } from '@/hooks/use-theme'; +import { getXpackSetting } from '@/utils/xpack'; const globalStore = GlobalStore(); +const { switchTheme } = useTheme(); const loading = ref(false); const open = ref(false); const uploadRef = ref(); @@ -84,10 +87,15 @@ const submit = async () => { loading.value = true; await UploadFileData(formData) .then(async () => { + globalStore.isProductPro = true; + const xpackRes = await getXpackSetting(); + if (xpackRes) { + globalStore.themeConfig.isGold = xpackRes.data.theme === 'dark-gold'; + } loading.value = false; + switchTheme(); uploadRef.value!.clearFiles(); uploaderFiles.value = []; - globalStore.isProductPro = true; open.value = false; MsgSuccess(i18n.global.t('commons.msg.operationSuccess')); window.location.reload(); diff --git a/frontend/src/hooks/use-theme.ts b/frontend/src/hooks/use-theme.ts index a2a137934..431fa345d 100644 --- a/frontend/src/hooks/use-theme.ts +++ b/frontend/src/hooks/use-theme.ts @@ -1,65 +1,19 @@ -import { onBeforeMount, watch } from 'vue'; import { GlobalStore } from '@/store'; -import { storeToRefs } from 'pinia'; export const useTheme = () => { - const { themeConfig } = storeToRefs(GlobalStore()); - const prefersDark = window.matchMedia('(prefers-color-scheme: dark)'); - - /** - * This method is only executed when loading or manually switching for the first time. - */ + const globalStore = GlobalStore(); const switchTheme = () => { - if (themeConfig.value.theme === 'auto') { - themeConfig.value.theme = prefersDark.matches ? 'dark' : 'light'; - if (prefersDark.addEventListener) { - prefersDark.addEventListener('change', switchAccordingUserProxyTheme); - } else if (prefersDark.addListener) { - prefersDark.addListener(switchAccordingUserProxyTheme); - } - } else { - prefersDark.removeEventListener('change', switchAccordingUserProxyTheme); - prefersDark.removeListener(switchAccordingUserProxyTheme); - } - updateTheme(themeConfig.value.theme); - }; - - const switchAccordingUserProxyTheme = (event: MediaQueryListEvent) => { - const preferTheme = event.matches ? 'dark' : 'light'; - - themeConfig.value.theme = preferTheme; - updateTheme(preferTheme); - }; - - const updateTheme = (theme: string) => { - if (theme === 'auto') { - theme = prefersDark.matches ? 'dark' : 'light'; + if (globalStore.themeConfig.isGold && globalStore.isProductPro) { + const body = document.documentElement as HTMLElement; + body.setAttribute('class', 'dark-gold'); + return; } const body = document.documentElement as HTMLElement; - body.setAttribute('class', theme); + if (globalStore.themeConfig.theme === 'dark') body.setAttribute('class', 'dark'); + else body.setAttribute('class', ''); }; - onBeforeMount(() => { - updateTheme(themeConfig.value.theme); - }); - - /** - * Called internally by the system for automatically switching themes - */ - const autoSwitchTheme = () => { - let preferTheme = themeConfig.value.theme; - if (themeConfig.value.theme === 'auto') { - preferTheme = prefersDark.matches ? 'dark' : 'light'; - } - updateTheme(preferTheme); - }; - - watch(themeConfig, () => { - autoSwitchTheme(); - }); - return { - autoSwitchTheme, switchTheme, }; }; diff --git a/frontend/src/layout/index.vue b/frontend/src/layout/index.vue index b688abfd0..2892f4616 100644 --- a/frontend/src/layout/index.vue +++ b/frontend/src/layout/index.vue @@ -91,7 +91,7 @@ const loadDataFromXDB = async () => { logo: res.data.logo, logoWithText: res.data.logoWithText, favicon: res.data.favicon, - theme: res.data.theme || 'dark-gold', + isGold: res.data.theme === 'dark-gold', }); } initFavicon(); diff --git a/frontend/src/store/interface/index.ts b/frontend/src/store/interface/index.ts index 31c554261..f027f44a3 100644 --- a/frontend/src/store/interface/index.ts +++ b/frontend/src/store/interface/index.ts @@ -4,6 +4,7 @@ export interface ThemeConfigProp { panelName: string; primary: string; theme: string; // dark | bright ｜ auto + isGold: boolean; footer: boolean; title: string; diff --git a/frontend/src/store/modules/global.ts b/frontend/src/store/modules/global.ts index 7874d6a1e..64ea44e6c 100644 --- a/frontend/src/store/modules/global.ts +++ b/frontend/src/store/modules/global.ts @@ -16,6 +16,7 @@ const GlobalStore = defineStore({ panelName: '', primary: '#005EEB', theme: 'auto', + isGold: false, footer: true, title: '', @@ -42,8 +43,8 @@ const GlobalStore = defineStore({ errStatus: '', }), getters: { - isDarkTheme: (state) => state.themeConfig.theme === 'dark' || state.themeConfig.theme === 'dark-gold', - isDarkGoldTheme: (state) => state.themeConfig.theme === 'dark-gold' && state.isProductPro, + isDarkTheme: (state) => state.themeConfig.theme === 'dark' || state.themeConfig.isGold, + isDarkGoldTheme: (state) => state.themeConfig.isGold && state.isProductPro, }, actions: { setOpenMenuTabs(openMenuTabs: boolean) { diff --git a/frontend/src/views/setting/license/index.vue b/frontend/src/views/setting/license/index.vue index 12aaf66f0..31b23eb59 100644 --- a/frontend/src/views/setting/license/index.vue +++ b/frontend/src/views/setting/license/index.vue @@ -159,6 +159,8 @@ const onUnBind = async () => { await unbindLicense() .then(() => { loading.value = false; + globalStore.isProductPro = false; + globalStore.themeConfig.isGold = false; MsgSuccess(i18n.global.t('commons.msg.operationSuccess')); window.location.reload(); }) diff --git a/frontend/src/views/setting/panel/index.vue b/frontend/src/views/setting/panel/index.vue index 5844e3bfe..584d82d6f 100644 --- a/frontend/src/views/setting/panel/index.vue +++ b/frontend/src/views/setting/panel/index.vue @@ -190,7 +190,7 @@ const loading = ref(false); const i18n = useI18n(); const globalStore = GlobalStore(); -const { themeConfig, isProductPro } = storeToRefs(globalStore); +const { isProductPro } = storeToRefs(globalStore); const { switchTheme } = useTheme(); @@ -279,7 +279,7 @@ const search = async () => { if (isProductPro.value) { const xpackRes = await getXpackSetting(); if (xpackRes) { - form.theme = xpackRes.data.theme || 'dark-gold'; + form.theme = xpackRes.data.theme === 'dark-gold' ? 'dark-gold' : res.data.theme; return; } } @@ -350,7 +350,12 @@ const onSave = async (key: string, val: any) => { globalStore.updateLanguage(val); } if (key === 'Theme') { - globalStore.setThemeConfig({ ...themeConfig.value, theme: val }); + if (val === 'dark-gold') { + globalStore.themeConfig.isGold = true; + } else { + globalStore.themeConfig.isGold = false; + globalStore.themeConfig.theme = val; + } switchTheme(); if (isProductPro.value) { let formData = new FormData(); diff --git a/frontend/src/views/website/ssl/create/index.vue b/frontend/src/views/website/ssl/create/index.vue index 0215dfb2c..383f271d4 100644 --- a/frontend/src/views/website/ssl/create/index.vue +++ b/frontend/src/views/website/ssl/create/index.vue @@ -248,7 +248,6 @@ const acceptParams = (op: string, websiteSSL: Website.SSLDTO) => { resetForm(); } if (op == 'edit') { - console.log(websiteSSL); ssl.value.acmeAccountId = websiteSSL.acmeAccountId; if (websiteSSL.dnsAccountId > 0) { ssl.value.dnsAccountId = websiteSSL.dnsAccountId;