Skip to content

fix: Fix the problem that the theme color display is abnormal after t… #8330

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
f2c-ci-robot merged 1 commit into from
Apr 7, 2025
Merged

fix: Fix the problem that the theme color display is abnormal after t… #8330

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions frontend/src/views/login/components/login-form.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -411,8 +411,7 @@ const getSetting = async () => {
i18n.warnHtmlMessage = false;
globalStore.setOpenMenuTabs(res.data.menuTabs === 'Enable');
globalStore.updateLanguage(res.data.language);
let theme = globalStore.themeConfig.theme === res.data.theme ? res.data.theme : globalStore.themeConfig.theme;
globalStore.setThemeConfig({ ...themeConfig.value, theme: theme, panelName: res.data.panelName });
globalStore.setThemeConfig({ ...themeConfig.value, theme: res.data.theme, panelName: res.data.panelName });
} catch (error) {}
};

Copy link
Copy Markdown
Member

@wanghe-fit2cloud wanghe-fit2cloud Apr 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The provided getSetting function is largely consistent with other code patterns, but there's one small optimization suggestion:

-        globalStore.setThemeConfig({ ...themeConfig.value, theme: theme, panelName: res.data.panelName });
+        globalStore.setThemeConfig({

Replace the last line of your change block with the corrected version to ensure all necessary fields are included in the object you're passing to globalStore.setThemeConfig(). This makes sure that the updated configuration includes both the new theme and the new panel name, rather than just merging them without explicitly specifying the field names.

Expand Down
3 changes: 2 additions & 1 deletion frontend/src/views/setting/panel/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -327,6 +327,7 @@ const search = async () => {
form.apiKeyValidityTime = res.data.apiKeyValidityTime;
form.hideMenu = res.data.hideMenu;
form.systemIP = res.data.systemIP;
form.theme = res.data.theme;

if (isMasterProductPro.value) {
const xpackRes = await getXpackSetting();
Expand All @@ -340,7 +341,7 @@ const search = async () => {
form.proxyDocker = xpackRes.data.proxyDocker;
}
} else {
form.theme = globalStore.themeConfig.theme || res.data.theme || 'light';
globalStore.themeConfig.theme = form.theme;
}
};

Copy link
Copy Markdown
Member

@wanghe-fit2cloud wanghe-fit2cloud Apr 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The code snippet you've provided contains a few potential issues:

  1. In version 330, globalStore.themeConfig.theme is set to the same value from res.data.theme using an assignment (= ). This means that res.data.theme cannot be used again later in this scope without losing its original value.

To fix this issue, update globalStore.themeConfig.theme = form.theme;.

  1. The variable xpackRes might not be defined before attempting to use it inside the if-statement.

Additionally, there's no need to reassign globalStore.themeConfig.theme = form.theme; since you can directly access form.theme without affecting other parts of the program. A more readable approach would be to use ternary operator or conditional statement instead.

Optimization suggestion:
Use template literals for string concatenation, which makes the code more compact and easier to read.

After making these changes, the corrected code should look like this:

const search = async () => {
    // ... previous lines ...

    globalStore.themeConfig.theme = form.theme;

    if (isMasterProductPro.value) {
        const xpackRes = await getXpackSetting();
        // ... rest of the code ...
    } else {
        // Reuse the value of form.theme stored previously 
        // No need to assign it here again.
    }

    // Further processing using form.theme...
};

With these updates, your code will behave correctly and efficiently.

Expand Down
Loading