gh_mirrors/1Panel
1
0
Fork 0
mirror of https://github.com/1Panel-dev/1Panel.git synced 2025-01-19 08:19:15 +08:00
Code

fix: 解决黑金模式下概览页异常闪动的问题 (#5201)

Browse Source
This commit is contained in:
ssongliu 2024-05-29 18:39:12 +08:00 committed by GitHub
parent 3aa62f91bf
commit 28f2dddcf6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 31 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/api/index.ts
View File

@ -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) {

10
frontend/src/components/license-import/index.vue
View File

@ -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<UploadInstance>();
@ -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();

60
frontend/src/hooks/use-theme.ts
View File

@ -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,
};
};

2
frontend/src/layout/index.vue
View File

@ -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();

1
frontend/src/store/interface/index.ts
View File

@ -4,6 +4,7 @@ export interface ThemeConfigProp {
panelName: string;
primary: string;
theme: string; // dark | bright ｜ auto
isGold: boolean;
footer: boolean;
title: string;

5
frontend/src/store/modules/global.ts
View File

@ -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) {

2
frontend/src/views/setting/license/index.vue
View File

@ -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();
})

11
frontend/src/views/setting/panel/index.vue
View File

@ -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();

1
frontend/src/views/website/ssl/create/index.vue
View File

@ -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;