fix: Fix the problem of abnormal theme color switching (#8012)

Author: ssongliu

agent/app/repo/monitor.go

@@ -41,7 +41,7 @@ func (u *MonitorRepo) GetIO(opts ...DBOption) ([]model.MonitorIO, error) {
 	for _, opt := range opts {
 		db = opt(db)
 	}
-	err := db.First(&data).Error
+	err := db.Find(&data).Error
 	return data, err
 }
 func (u *MonitorRepo) GetNetwork(opts ...DBOption) ([]model.MonitorNetwork, error) {
@@ -50,7 +50,7 @@ func (u *MonitorRepo) GetNetwork(opts ...DBOption) ([]model.MonitorNetwork, erro
 	for _, opt := range opts {
 		db = opt(db)
 	}
-	err := db.First(&data).Error
+	err := db.Find(&data).Error
 	return data, err
 }
 

frontend/src/layout/index.vue

@@ -23,7 +23,7 @@ import { GlobalStore, MenuStore, TabsStore } from '@/store';
 import { DeviceType } from '@/enums/app';
 import { getSystemAvailable } from '@/api/modules/setting';
 import { useRoute, useRouter } from 'vue-router';
-import { loadMasterProductProFromDB, loadProductProFromDB } from '@/utils/xpack';
+import { loadMasterProductProFromDB, loadProductProFromDB, getXpackSettingForTheme } from '@/utils/xpack';
 import { useTheme } from '@/global/use-theme';
 import TaskList from '@/components/task-list/index.vue';
 const { switchTheme } = useTheme();
@@ -108,6 +108,7 @@ onMounted(() => {
     loadStatus();
     loadProductProFromDB();
     loadMasterProductProFromDB();
+    getXpackSettingForTheme();
     globalStore.isFullScreen = false;
 
     const mqList = window.matchMedia('(prefers-color-scheme: dark)');

frontend/src/utils/xpack.ts

@@ -87,23 +87,6 @@ export async function loadMasterProductProFromDB() {
 }
 
 export async function getXpackSettingForTheme() {
-    const res = await getMasterLicenseStatus();
-    if (!res.data) {
-        globalStore.isMasterProductPro = false;
-        resetXSetting();
-        switchTheme();
-        initFavicon();
-        return;
-    }
-    globalStore.isMasterProductPro = res.data.status === 'Bound';
-    if (!globalStore.isMasterProductPro) {
-        globalStore.isMasterProductPro = false;
-        resetXSetting();
-        switchTheme();
-        initFavicon();
-        return;
-    }
-
     let searchXSetting;
     const xpackModules = import.meta.glob('../xpack/api/modules/setting.ts', { eager: true });
     if (xpackModules['../xpack/api/modules/setting.ts']) {

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

@@ -184,6 +184,7 @@ import { MsgSuccess } from '@/utils/message';
 import { useI18n } from 'vue-i18n';
 import { getSettingInfo } from '@/api/modules/setting';
 import { encryptPassword } from '@/utils/util';
+import { getXpackSettingForTheme } from '@/utils/xpack';
 
 const i18n = useI18n();
 const themeConfig = computed(() => globalStore.themeConfig);
@@ -334,7 +335,6 @@ const login = (formEl: FormInstance | undefined) => {
             menuStore.setMenuList([]);
             tabsStore.removeAllTabs();
             MsgSuccess(i18n.t('commons.msg.loginSuccess'));
-            loadDataFromDB();
             router.push({ name: 'home' });
         } catch (res) {
             if (res.code === 401) {
@@ -369,7 +369,6 @@ const mfaLogin = async (auto: boolean) => {
             menuStore.setMenuList([]);
             tabsStore.removeAllTabs();
             MsgSuccess(i18n.t('commons.msg.loginSuccess'));
-            loadDataFromDB();
             router.push({ name: 'home' });
         } catch (res) {
             if (res.code === 401) {
@@ -415,6 +414,8 @@ const getSetting = async () => {
 onMounted(() => {
     globalStore.isOnRestart = false;
     getSetting();
+    loadDataFromDB();
+    getXpackSettingForTheme();
     if (!globalStore.ignoreCaptcha) {
         loginVerify();
     }

frontend/src/views/setting/panel/password/index.vue

@@ -5,14 +5,14 @@
                 <el-input type="password" show-password clearable v-model.trim="passForm.oldPassword" />
             </el-form-item>
             <el-form-item
-                v-if="complexityVerification === 'disable'"
+                v-if="complexityVerification === 'Disable'"
                 :label="$t('setting.newPassword')"
                 prop="newPassword"
             >
                 <el-input type="password" show-password clearable v-model.trim="passForm.newPassword" />
             </el-form-item>
             <el-form-item
-                v-if="complexityVerification === 'enable'"
+                v-if="complexityVerification === 'Enable'"
                 :label="$t('setting.newPassword')"
                 prop="newPasswordComplexity"
             >
@@ -80,7 +80,7 @@ const acceptParams = (params: DialogProps): void => {
 };
 
 function checkPassword(rule: any, value: any, callback: any) {
-    let password = complexityVerification.value === 'disable' ? passForm.newPassword : passForm.newPasswordComplexity;
+    let password = complexityVerification.value === 'Disable' ? passForm.newPassword : passForm.newPasswordComplexity;
     if (password !== passForm.retryPassword) {
         return callback(new Error(i18n.global.t('commons.rule.rePassword')));
     }
@@ -92,7 +92,7 @@ const submitChangePassword = async (formEl: FormInstance | undefined) => {
     formEl.validate(async (valid) => {
         if (!valid) return;
         let password =
-            complexityVerification.value === 'disable' ? passForm.newPassword : passForm.newPasswordComplexity;
+            complexityVerification.value === 'Disable' ? passForm.newPassword : passForm.newPasswordComplexity;
         if (password === passForm.oldPassword) {
             MsgError(i18n.global.t('setting.duplicatePassword'));
             return;