fix: Display setting bugs

[wangdan-fit2cloud]

What this PR does / why we need it?

Summary of your change

Please indicate you've done the following:

• Made sure tests are passing and test coverage is added if needed.
• Made sure commit message follow the rule of Conventional Commits specification.
• Considered the docs impact and opened a new docs issue or PR with docs changes if needed.

[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.

[f2c-ci-robot]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:

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

Needs approval from an approver in each of these files:

• OWNERS

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

[shaohuzhang1]

The code looks generally correct but has some areas that could be optimized or improved. Here are a few suggestions:

Code Areas with Issues

1. Duplicate Data Handling: The form and xpackForm objects use the same structure (show_source, etc.), but they should be separated to avoid confusion and potential bugs. Consider removing one of them.

2. Missing Return Statements in Conditional Rendering: In the template section, there's an unhandled case where the disclaimer might not be set, which can cause undefined behavior.

3. Unnecessary Cloning: While cloning is necessary for initial setup, it might be redundant within the lifecycle hooks (open method). Avoid unnecessary clones unless absolutely necessary.

4. Comments Quality: Some comments, such as those inside tooltips or input fields, could be more detailed for better clarity when reading the code later.

Optimizations/Suggestions

1. Separate Configuration Objects: Refactor the xpackForm object to separate different configurations like themes, localization, position controls, and visibility settings.

2. Improve Exception Handling: For cases where disclaimer_value might not be set, consider adding error handling or default values to prevent runtime errors.

3. Cleaner Tooltip Content Logic: Simplify how tooltip content is generated using computed properties or computed ternary expressions for cleaner code.

Here’s an updated version of the relevant parts based on these suggestions:

<template>
  <!-- ... existing elements ... -->
  
  <section>
    <h5>{{ $t('views.applicationOverview.appInfo.SettingDisplayDialog.languageLabel') }}</h5>
    <el-select v-model="lang" clearable @change="handleLanguageChange">
      <el-option
        v-for="item in langList"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>

    
     <!-- Existing sections with logic -->
   
</template>

<script setup lang="ts">
import { ref } from 'vue';
// Import other dependencies here...

interface ThemeConfig {
  theme_color: string;
  header_font_color: string;
}

interface DisplaySettings {
  show_execution_detail: boolean;
  show_version_description: boolean;
  show_source: boolean;
  show_history: boolean;
  show_guide: boolean;
  disclaimer: boolean;
  disclaimer_value?: string;
  float_location?: {
    x: LocationConfig;
    y: LocationConfig;
  };
}

interface LocationConfig {
  type: string;
  value: number | string;
}

const displaySettings = ref<DisplaySettings>({
  show_execution_detail: true,
  show_version_description: true,
  show source: false,
  show_history: true,
  show_guide: true,
  disclaimer: false,
});

const themeConfig = ref<ThemeConfig>({
  theme_color: '#FFFFFF',
  header_font_color: '#000000',
});

function handleLanguageChange(value) {
  // Handle language change logic...
}
</script>

This approach separates configuration into manageable components, makes sure exceptions are handled appropriately, and simplifies conditional rendering through Vue's reactive system.

[shaohuzhang1]

There appear to be no apparent technical issues with the provided code. However, there are a few areas where improvements can make the logic more robust and user-friendly:

1. Language Defaulting: The default case for language being set to getBrowserLang() is unnecessary when you have an initial value defined ('': ''). It's better to remove this redundant line since it defaults language immediately.

2. Code Formatting: Although not required, formatting the code consistently could improve readability. Use consistent spacing and indentation patterns.

3. Variable Initialization: Initializing dialogVisible to false, even though its setter function resets it to true. This seems superfluous unless there's specific behavior expected that would change depending on previous values.

4. Comments Clarity: While current comments are clear, they might benefit from minor clarification or removal if the intent is straightforward.

Here's a revised version of the code incorporating these suggestions:

const emit = defineEmits(['refresh'])

const displayFormRef = ref()
const form = ref({
  show_source: false,
  language: '', // Initial/default value
})

const detail = ref(null)
const loading = ref(false)

watch(dialogVisible, (bool) => {
  if (!bool) {
    resetFormValues();
  }
});

function resetFormValues() {
  form.value.show_source = false;
  form.value.language = '';
}

const open = (data: any, content: any) => {
   detail.value = content;
   form.value.show_source = data.show_source;

   // Default language if none given
   form.value.language ||= getBrowserLang();

   dialogVisible.value = true;
}

Key Changes:

• Removed redundant setting of language.
• Refactored variable initialization inside the watcher callback.
• Added resetFormValues helper function to reduce redundancy in handling form reset.
• Used logical OR assignment operator (+=) or short-circuit evaluation || for default values.