fix: 解决登录跳概览页时样式错误的问题 (#5351)

frontend/src/layout/index.vue

@@ -20,11 +20,9 @@ import { Sidebar, Footer, AppMain, MobileHeader, Tabs } from './components';
 import useResize from './hooks/useResize';
 import { GlobalStore, MenuStore, TabsStore } from '@/store';
 import { DeviceType } from '@/enums/app';
-import { useI18n } from 'vue-i18n';
-import { useTheme } from '@/hooks/use-theme';
-import { getLicenseStatus, getSettingInfo, getSystemAvailable } from '@/api/modules/setting';
+import { getSystemAvailable } from '@/api/modules/setting';
 import { useRoute, useRouter } from 'vue-router';
-import { getXpackSetting, initFavicon, resetXSetting } from '@/utils/xpack';
+import { loadProductProFromDB } from '@/utils/xpack';
 useResize();
 
 const router = useRouter();
@@ -33,11 +31,8 @@ const menuStore = MenuStore();
 const globalStore = GlobalStore();
 const tabsStore = TabsStore();
 
-const i18n = useI18n();
 const loading = ref(false);
 const loadingText = ref();
-const themeConfig = computed(() => globalStore.themeConfig);
-const { switchTheme } = useTheme();
 
 let timer: NodeJS.Timer | null = null;
 
@@ -71,49 +66,6 @@ const handleMenuClick = async (path) => {
     tabsStore.activeTabPath = route.path;
 };
 
-const loadDataFromDB = async () => {
-    const res = await getSettingInfo();
-    document.title = res.data.panelName;
-    i18n.locale.value = res.data.language;
-    i18n.warnHtmlMessage = false;
-    globalStore.entrance = res.data.securityEntrance;
-    globalStore.setOpenMenuTabs(res.data.menuTabs === 'enable');
-    globalStore.updateLanguage(res.data.language);
-    globalStore.setThemeConfig({ ...themeConfig.value, theme: res.data.theme, panelName: res.data.panelName });
-};
-
-const loadDataFromXDB = async () => {
-    const res = await getXpackSetting();
-    if (res) {
-        globalStore.setThemeConfig({
-            ...themeConfig.value,
-            title: res.data.title,
-            logo: res.data.logo,
-            logoWithText: res.data.logoWithText,
-            favicon: res.data.favicon,
-            isGold: res.data.theme === 'dark-gold',
-        });
-    }
-    initFavicon();
-};
-
-const loadProductProFromDB = async () => {
-    const res = await getLicenseStatus();
-    if (!res.data) {
-        globalStore.isProductPro = false;
-        return;
-    }
-    globalStore.isProductPro =
-        res.data.status === 'Enable' || res.data.status === 'Lost01' || res.data.status === 'Lost02';
-
-    if (globalStore.isProductPro) {
-        loadDataFromXDB();
-        globalStore.productProExpires = Number(res.data.productPro);
-    } else {
-        resetXSetting();
-    }
-};
-
 const loadStatus = async () => {
     loading.value = globalStore.isLoading;
     loadingText.value = globalStore.loadingText;
@@ -145,10 +97,7 @@ onMounted(() => {
     }
 
     loadStatus();
-    initFavicon();
-    loadDataFromDB();
     loadProductProFromDB();
-    switchTheme();
 });
 </script>
 

frontend/src/utils/xpack.ts

@@ -1,11 +1,15 @@
+import { getLicenseStatus } from '@/api/modules/setting';
+import { useTheme } from '@/hooks/use-theme';
 import { GlobalStore } from '@/store';
 const globalStore = GlobalStore();
+const { switchTheme } = useTheme();
 
 export function resetXSetting() {
     globalStore.themeConfig.title = '';
     globalStore.themeConfig.logo = '';
     globalStore.themeConfig.logoWithText = '';
     globalStore.themeConfig.favicon = '';
+    globalStore.themeConfig.isGold = false;
 }
 
 export function initFavicon() {
@@ -20,7 +24,7 @@ export function initFavicon() {
 export async function getXpackSetting() {
     const searchXSettingGlob = import.meta.glob('xpack/api/modules/setting.ts');
     const module = await searchXSettingGlob?.['../xpack/api/modules/setting.ts']?.();
-    const res = module?.searchXSetting();
+    const res = await module?.searchXSetting();
     if (!res) {
         resetXSetting();
         return;
@@ -28,6 +32,61 @@ export async function getXpackSetting() {
     return res;
 }
 
+export async function loadProductProFromDB() {
+    const res = await getLicenseStatus();
+    if (!res.data) {
+        resetXSetting();
+        globalStore.isProductPro = false;
+        return;
+    } else {
+        globalStore.isProductPro =
+            res.data.status === 'Enable' || res.data.status === 'Lost01' || res.data.status === 'Lost02';
+        if (globalStore.isProductPro) {
+            globalStore.productProExpires = Number(res.data.productPro);
+        }
+    }
+    switchTheme();
+    initFavicon();
+}
+
+export async function getXpackSettingForTheme() {
+    const res = await getLicenseStatus();
+    if (!res.data) {
+        globalStore.isProductPro = false;
+        resetXSetting();
+        switchTheme();
+        initFavicon();
+        return;
+    }
+    globalStore.isProductPro =
+        res.data.status === 'Enable' || res.data.status === 'Lost01' || res.data.status === 'Lost02';
+    if (globalStore.isProductPro) {
+        globalStore.productProExpires = Number(res.data.productPro);
+    }
+    if (!globalStore.isProductPro) {
+        globalStore.isProductPro = false;
+        resetXSetting();
+        switchTheme();
+        initFavicon();
+        return;
+    }
+
+    const searchXSettingGlob = import.meta.glob('xpack/api/modules/setting.ts');
+    const module = await searchXSettingGlob?.['../xpack/api/modules/setting.ts']?.();
+    const res2 = await module?.searchXSetting();
+    if (res2) {
+        globalStore.themeConfig.title = res2.data?.title;
+        globalStore.themeConfig.logo = res2.data?.logo;
+        globalStore.themeConfig.logoWithText = res2.data?.logoWithText;
+        globalStore.themeConfig.favicon = res2.data?.favicon;
+        globalStore.themeConfig.isGold = res2.data?.theme === 'dark-gold';
+    } else {
+        resetXSetting();
+    }
+    switchTheme();
+    initFavicon();
+}
+
 export async function updateXpackSettingByKey(key: string, value: string) {
     const searchXSettingGlob = import.meta.glob('xpack/api/modules/setting.ts');
     const module = await searchXSettingGlob?.['../xpack/api/modules/setting.ts']?.();

frontend/src/views/login/components/login-form.vue

@@ -171,12 +171,12 @@ import { useRouter } from 'vue-router';
 import type { ElForm } from 'element-plus';
 import { loginApi, getCaptcha, mfaLoginApi, checkIsDemo, getLanguage } from '@/api/modules/auth';
 import { GlobalStore, MenuStore, TabsStore } from '@/store';
-import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import { useI18n } from 'vue-i18n';
-import { getLicenseStatus } from '@/api/modules/setting';
-import { initFavicon } from '@/utils/xpack';
+import { getSettingInfo } from '@/api/modules/setting';
 
+const i18n = useI18n();
+const themeConfig = computed(() => globalStore.themeConfig);
 const globalStore = GlobalStore();
 const menuStore = MenuStore();
 const tabsStore = TabsStore();
@@ -208,8 +208,8 @@ const loginForm = reactive({
 });
 
 const loginRules = reactive({
-    name: computed(() => [{ required: true, message: i18n.global.t('commons.rule.username'), trigger: 'blur' }]),
-    password: computed(() => [{ required: true, message: i18n.global.t('commons.rule.password'), trigger: 'blur' }]),
+    name: computed(() => [{ required: true, message: i18n.t('commons.rule.username'), trigger: 'blur' }]),
+    password: computed(() => [{ required: true, message: i18n.t('commons.rule.password'), trigger: 'blur' }]),
 });
 
 let isLoggingIn = false;
@@ -303,8 +303,8 @@ const login = (formEl: FormInstance | undefined) => {
             globalStore.setAgreeLicense(true);
             menuStore.setMenuList([]);
             tabsStore.removeAllTabs();
-            MsgSuccess(i18n.global.t('commons.msg.loginSuccess'));
-            loadProductProFromDB();
+            MsgSuccess(i18n.t('commons.msg.loginSuccess'));
+            loadDataFromDB();
             router.push({ name: 'home' });
         } catch (error) {
             loginVerify();
@@ -330,8 +330,8 @@ const mfaLogin = async (auto: boolean) => {
         globalStore.setLogStatus(true);
         menuStore.setMenuList([]);
         tabsStore.removeAllTabs();
-        MsgSuccess(i18n.global.t('commons.msg.loginSuccess'));
-        loadProductProFromDB();
+        MsgSuccess(i18n.t('commons.msg.loginSuccess'));
+        loadDataFromDB();
         router.push({ name: 'home' });
     }
 };
@@ -355,29 +355,20 @@ const loadLanguage = async () => {
     } catch (error) {}
 };
 
-const loadProductProFromDB = async () => {
-    const res = await getLicenseStatus();
-    if (!res.data) {
-        globalStore.isProductPro = false;
-        return;
-    }
-    globalStore.isProductPro =
-        res.data.status === 'Enable' || res.data.status === 'Lost01' || res.data.status === 'Lost02';
-
-    if (globalStore.isProductPro) {
-        globalStore.productProExpires = Number(res.data.productPro);
-    } else {
-        globalStore.themeConfig.title = '';
-        globalStore.themeConfig.logo = '';
-        globalStore.themeConfig.logoWithText = '';
-        globalStore.themeConfig.favicon = '';
-    }
+const loadDataFromDB = async () => {
+    const res = await getSettingInfo();
+    document.title = res.data.panelName;
+    i18n.locale.value = res.data.language;
+    i18n.warnHtmlMessage = false;
+    globalStore.entrance = res.data.securityEntrance;
+    globalStore.setOpenMenuTabs(res.data.menuTabs === 'enable');
+    globalStore.updateLanguage(res.data.language);
+    globalStore.setThemeConfig({ ...themeConfig.value, theme: res.data.theme, panelName: res.data.panelName });
 };
 
 onMounted(() => {
     globalStore.isOnRestart = false;
     loginVerify();
-    initFavicon();
     loadLanguage();
     document.title = globalStore.themeConfig.panelName;
     loginForm.agreeLicense = globalStore.agreeLicense;

frontend/src/views/login/entrance/index.vue

@@ -48,7 +48,7 @@ import ErrDomain from '@/components/error-message/err_domain.vue';
 import ErrFound from '@/components/error-message/404.vue';
 import { ref, onMounted, watch } from 'vue';
 import { GlobalStore } from '@/store';
-import { getXpackSetting, initFavicon } from '@/utils/xpack';
+import { getXpackSettingForTheme } from '@/utils/xpack';
 const globalStore = GlobalStore();
 
 const screenWidth = ref(null);
@@ -81,25 +81,13 @@ const getStatus = async () => {
     await checkIsSafety(code)
         .then(() => {
             loading.value = false;
-            loadDataFromXDB();
+            getXpackSettingForTheme();
         })
         .catch(() => {
             loading.value = false;
         });
 };
 
-const loadDataFromXDB = async () => {
-    const res = await getXpackSetting();
-    if (res) {
-        globalStore.themeConfig.title = res.data.title;
-        globalStore.themeConfig.logo = res.data.logo;
-        globalStore.themeConfig.logoWithText = res.data.logoWithText;
-        globalStore.themeConfig.favicon = res.data.favicon;
-    }
-    loading.value = false;
-    initFavicon();
-};
-
 onMounted(() => {
     globalStore.isOnRestart = false;
     getStatus();

frontend/src/views/login/index.vue

@@ -24,7 +24,7 @@ import LoginForm from './components/login-form.vue';
 import { ref, onMounted } from 'vue';
 import router from '@/routers';
 import { GlobalStore } from '@/store';
-import { getXpackSetting, initFavicon } from '@/utils/xpack';
+import { getXpackSettingForTheme } from '@/utils/xpack';
 
 const gStore = GlobalStore();
 const loading = ref();
@@ -35,30 +35,18 @@ const getStatus = async () => {
     loading.value = true;
     await checkIsSafety(gStore.entrance)
         .then((res) => {
+            loading.value = false;
             if (res.data === 'unpass') {
-                loading.value = false;
                 router.replace({ name: 'entrance', params: { code: gStore.entrance } });
                 return;
             }
-            loadDataFromXDB();
+            getXpackSettingForTheme();
         })
         .catch(() => {
             loading.value = false;
         });
 };
 
-const loadDataFromXDB = async () => {
-    const res = await getXpackSetting();
-    if (res) {
-        gStore.themeConfig.title = res.data.title;
-        gStore.themeConfig.logo = res.data.logo;
-        gStore.themeConfig.logoWithText = res.data.logoWithText;
-        gStore.themeConfig.favicon = res.data.favicon;
-    }
-    loading.value = false;
-    initFavicon();
-};
-
 onMounted(() => {
     getStatus();
     screenWidth.value = document.body.clientWidth;