feat: Save custom theme color scheme

[lan-yonghui]

No description provided.

[f2c-ci-robot]

Adding the "do-not-merge/release-note-label-needed" label because no release-note block was detected, please follow our release note process to remove it.

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

[wanghe-fit2cloud]

The code you've provided is mostly correct but lacks some minor improvements and optimizations. Here are some points to consider:

1. Code Casing Consistency: Ensure that constants like STORAGE_KEY match their usage consistently across the file.

2. Optional Chaining for Theme Predefined Colors: The use of optional chaining (?.) can make the code cleaner by handling cases where themePredefineColors might not be defined.

3. Initialization Order: Consider ensuring the initialization order of variables, especially if there's any dependency between them.

4. Local Storage Usage: Be mindful of how local storage works with asynchronous operations, as it might lead to unexpected behavior if accessed during state changes.

Here's an optimized version with these considerations:

const drawerVisible = ref();

interface DialogProps {
    themeColor: {
        light: string;
        dark: string;
        themePredefineColors?: { // Optional property
            light: string[];
            dark: string[];
        };
    };
}

interface ThemeColor extends DialogProps;

const form = reactive<DialogProps>({
    themeColor: {} as DialogProps,
});

const themeNames = ['light', 'dark'];
const defaultDarkColors = ['#238636', '#dcdcdc'];

// Optimize the initial load by using defaults without checking localStorage first
initializeDefaultThemeColors(themeNames);

function initializeDefaultThemeColors(names) {
    names.forEach(name => {
        form.themeColor[name] = defaultColors[name] || '';
    });
}

Explanation:

• Casing Consistency: Ensured form, dialogProps, etc., follow camelCase convention.
• Optional Chaining: Used to safely access properties within themePredefineColors.
• Initialize Defaults Early: Moved default initialization before accessing local storage to avoid unnecessary checks when no predefined colors are set.

These adjustments should improve readability and maintainability while potentially reducing runtime overhead.

Make sure to adjust the logic according to your specific application requirements and handle any potential bugs based on real-world testing.

[wanghe-fit2cloud]

The provided code has several improvements:

1. Default Theme Color Initialization: Added default values for themeColor and themePredefineColors. If no data is received from the server, default colors are used to prevent errors.

2. Simplified Default Values Setting: Removed unnecessary brackets around the {} syntax when initializing defaultThemeConfig.

3. Null Coalescing Operator: Used null coalescing operator (?) to simplify the assignment of default theme colors, ensuring that if no color information is available, the default values are still applied without error.

4. Avoiding Empty Object Check: Instead of checking if 'light' or 'dark' keys exist in an empty object before accessing them, directly assign default values assuming there will be color configurations stored correctly.

These changes improve readability and robustness by ensuring that default values are always set consistently, even if no dynamic data retrieval occurs.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[wanghe-fit2cloud]

/lgtm

[wanghe-fit2cloud]

/approve

[f2c-ci-robot]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: wanghe-fit2cloud

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

• OWNERS [wanghe-fit2cloud]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment