fix: markdown preview i18n

[shaohuzhang1]

fix: Style optimization
perf: SCAN login setting views Style optimization
fix: markdown preview i18n

[shaohuzhang1]

There is an issue with the scrollbar component in the Vue.js template. It's likely not being used correctly because v-loading takes precedence over other styles when applied to a div.

Here’s how you can address it:

Suggestion

Use the overflow-y-auto CSS property inside the <div> element where you want to apply scrolling. Here’s the updated snippet:

<template>
  <div v-loading="loading" class="container-class">
    <!-- Your existing content here -->
  </div>
</template>

<script>
export default {
  // ...
};
</script>

<style scoped>
.container-class {
  overflow-y-auto; /* This will add scrollbar if needed */
  padding: var(--app-view-padding); /* Add this for consistent layout spacing */
}

/* Other style rules remain unchanged */

By applying overflow-y-auto, you ensure that scrollbars appear only when necessary, enhancing user interactions without affecting other elements.

This should resolve the inconsistency between using v-loading and other styling approaches. Let me know if you need further assistance!

[shaohuzhang1]

There are several improvements and optimizations you can make to the code:

1. Remove Redundant Import:
   The import statement for Zh_TW is redundant since it's already imported at the beginning as part of the extension.

2. Use Computed Properties Correctly:
   In Vue.js, computed properties should be declared outside the lifecycle hooks (setup function). You have correctly defined it, but ensure that this works for your specific scenario.

3. Ensure Consistency:
   Make sure all keys in the computed property object match those used in other configuration objects like editorConfig.

4. Check Compatibility:
   Ensure that the versions of libraries you're using (like md-editor-v3) are compatible with Vue 3.

Here's a revised version of your code:

<template>
  <MdPreview :language="language" noIconfont noPrettier :codeFoldable="false" v-bind="$attrs" />
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { MdPreview, config } from 'md-editor-v3';
import { getBrowserLang } from '@/locales/index';
import useStore from '@/stores';

defineOptions({ name: 'MdPreview' });

const { user } = useStore();
const language = computed(() => user.getLanguage() || getBrowserLang());

config({
  editorConfig: {
    languageUserDefined: {
      'zh-Hant': require('@vavt/cm-extension/dist/locale/zh-TW')
    }
  }
});
</script>

Key Changes Made:

• Removed the redundancy in importing ZH_TW.
• Ensured consistent usage of computed properties.
• Added an explicit type hint for require, though TypeScript might handle dynamic imports automatically in later versions.

[shaohuzhang1]

There are a few areas where you can optimize and address potential issues in the provided code:

1. Language Selection Clearance:

   • In the <el-select> component for selecting the language, consider adding clearable to make it easier for users to remove their selection if needed.

2. Initial Language Setting:

   • When setting the initial value of the language field in the forms (defaultSetting, form, and xpackForm), ensure that there's a meaningful default value (e.g., an empty string) rather than using getBrowserLang(). This avoids relying on environment settings and makes testing more straightforward.

3. Code Duplication:

   • There appears to be some duplication between lines 51 and 67. Ensure these lines match or combine logically when necessary.

Here are specific changes:

Revised Code Snippets

• **Line 50:

                <div>
                  <!-- Existing content -->
                  <el-select v-model="form.language">
                    ...

• Lines: 174 & 383:

            <h5 class="mb-8">{{ $t('views.applicationOverview.appInfo.SettingDisplayDialog.languageLabel') }}</h5>

...

const form = ref<any>({
...
  language: '', // Change here
});

If further modification or adjustments are required based on additional context not shown here, please let me know!

[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