Skip to content
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

style: Optimize the display of status cards on the overview page #7562

Merged
merged 4 commits into from
Dec 27, 2024
Merged

style: Optimize the display of status cards on the overview page #7562

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6c148cb
style: Optimize the display of status cards on the overview page
lan-yonghui Dec 25, 2024
1eb4e58
feat: Adjust language selection as a selection box
lan-yonghui Dec 25, 2024
d2dd117
feat: Optimize panel page responsive layout
lan-yonghui Dec 26, 2024
f21432f
style: Optimize the horizontal center alignment of the theme color bu…
lan-yonghui Dec 26, 2024
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
2 changes: 1 addition & 1 deletion frontend/src/lang/modules/zh.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -369,7 +369,7 @@ const message = {

core: '物理核心',
logicCore: '逻辑核心',
loadAverage: '最近 {0} 分钟平均负载',
loadAverage: '最近 1 分钟平均负载 | 最近 {n} 分钟平均负载',
load: '负载',
mount: '挂载点',
fileSystem: '文件系统',
Copy link
Member

Choose a reason for hiding this comment

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

The line loadAverage: '最近 1 分钟平均负载 | 最近 {n} 分钟平均负载' contains an unnecessary {n} placeholder that does not match the existing {0}. You might want to simplify it to just '最近 1 分钟平均负载'.

Copy link
Member

Choose a reason for hiding this comment

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

The suggested changes have some issues:

  1. The loadAverage key has an extra pipe (|) character after its string value, which is incorrect syntax for a localization format.

  2. If you intend to use {n} as part of the locale string, it should be surrounded by curly braces { }.

  3. The correct format for pluralization would typically include placeholders like {count} and then additional text for plural forms (e.g., "{count} minutes | {count} minute").

Here's the corrected version with appropriate corrections:

const message = {
 
     core: '物理核心',
     logicCore: '逻辑核心',
-    loadAverage: '最近 {0} 分钟平均负载', // Incorrect syntax with extraneous |
+    loadAverage: '{load_avg_minutes}: 近期 {load_avg_count}分钟总负载',
     load: '负载',
     mount: '挂载点',
     fileSystem: '文件系统',
 };

This assumes that you want to display both singular and plural messages dynamically based on the actual average load values available when using this localization dictionary. Adjust the structure according to your specific requirements if necessary.

Copy link
Member

Choose a reason for hiding this comment

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

The change in loadAverage is incorrect. It should be simplified to "最近 1 分钟平均负载" (1-minute average load) instead of "最近 {n} 分钟平均负载".

Copy link
Member

Choose a reason for hiding this comment

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

The provided code difference seems to be related to an update to a JavaScript object that likely represents system monitoring data or configuration. The change you've made involves updating the loadAverage property to include both "最近 1 分钟平均负载" (one minute average workload) and "最近 {n} 分钟平均负载" ({n} minutes' average workload). Here's a summary of the changes:

Changes

-        loadAverage: '最近 {0} 分钟平均负载',
+        loadAverage: '最近 1 分钟平均负载 | 最近 {n} 分钟平均负载',

Explanation

  • Removed Previous Format: The old format used {0} which was replaced with "最近 1 分钟平均负载".

  • Added New Format: A new option "最近 {n} 分钟平均负载" is added, allowing users to specify how many minutes they want to consider for the average load.

Potential Issues/Critical Points

  1. Dynamic Loading:

    • Ensure that there are dynamic values ({n} in this case) being injected into the string at runtime. If used incorrectly, it could lead to misinterpretation or unexpected output if not properly handled.

  2. UI/UX Considerations:

    • Be mindful of user interface implications due to the addition of two options for loadAverage. It might require additional UI components to handle both formats effectively unless they can be collapsed dynamically or selected by the user.

  3. Consistency within Document:

    • If other parts of the document use different formats for loadAverage, maintain consistency across the documentation for clarity.

  4. Documentation Update:

    • Make sure any relevant documentation around the usage of loadAverage reflects these changes, especially mentioning whether both formats support the same parameters if needed.

  5. Testing:

    • Thoroughly test the updated feature with various scenarios to ensure correct behavior across different inputs and configurations.

If none of these considerations apply to your specific context, your changes look straightforward enough.

Expand Down
2 changes: 1 addition & 1 deletion frontend/src/styles/element-dark.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -165,7 +165,7 @@ html.dark {
}

.el-loading-mask {
background-color: #5b5e6a75;
background-color: rgba(0, 0, 0, 0.8);
}

.el-input {
Copy link
Member

Choose a reason for hiding this comment

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

In the provided code snippet, there's one issue:

The background color of .el-loading-mask from #5b5e6a75 to rgba(0, 0, 0, 0.8) is intended to reduce its opacity while maintaining transparency, which is generally a good practice for user interface elements like loading masks.

However, you might want to ensure that this change does not cause undesired UI behavior due to potential changes in other parts of your application where the same class might be used under different conditions. It would also be wise to document why you've made this adjustment. Here’s the corrected line along with some additional comments addressing these aspects:

@@ -165,7 +165,7 @@ html.dark {
 }

 .el-loading-mask {
-    // Previous dark overlay for consistent styling across themes
+    /* Reduced opacity background color, maintains transparency */
     background-color: rgba(0, 0, 0, 0.8); // Adjusted from #5b5e6a75 to make it more subtle and transparent.
 }

Copy link
Member

Choose a reason for hiding this comment

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

The changes provided to the CSS file do not appear to have any specific errors or vulnerabilities at this time. However, there is an opportunity for some minor improvement. The rgba value used for the .el-loading-mask class has been optimized to slightly reduce opacity without causing excessive transparency that might lead to readability issues. In many UI designs, using a higher-opacity shade of gray (e.g., rgba(0, 0, 0, 0.8)) can be sufficient while maintaining visibility.

Additionally, it's generally advisable to keep comments in code readable and concise. If no further modifications are needed, here is the updated code snippet with only the background color change:

@@ -165,7 +165,7 @@
html.dark {
}
 
.el-loading-mask {
-    background-color: rgba(0, 0, 0, 0.8); /* Slightly increased opacity */
+    background-color: rgb(34, 34, 34) !important; /* Example replacement value */
}

.el-input {

If you intend to implement more significant optimizations or additional styles, feel free to share, but the current adjustments should effectively resolve performance-related issues from previous versions.

Expand Down
253 changes: 93 additions & 160 deletions frontend/src/views/home/status/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<el-row :gutter="10" class="status-container">
<el-row :gutter="10">
<el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6" align="center">
<el-popover placement="bottom" :width="loadWidth()" trigger="hover" v-if="chartsOption['cpu']">
<div>
Expand Down Expand Up @@ -52,28 +52,39 @@
</span>
</el-col>
<el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6" align="center">
<el-popover placement="bottom" :width="200" trigger="hover" v-if="chartsOption['memory']">
<el-tag style="font-weight: 500">{{ $t('home.mem') }}:</el-tag>
<el-tag class="tagClass">{{ $t('home.total') }}: {{ computeSize(currentInfo.memoryTotal) }}</el-tag>
<el-tag class="tagClass">{{ $t('home.used') }}: {{ computeSize(currentInfo.memoryUsed) }}</el-tag>
<el-tag class="tagClass">{{ $t('home.free') }}: {{ computeSize(currentInfo.memoryAvailable) }}</el-tag>
<el-tag class="tagClass">
{{ $t('home.percent') }}: {{ formatNumber(currentInfo.memoryUsedPercent) }}%
</el-tag>
<div v-if="currentInfo.swapMemoryTotal" class="mt-2">
<el-tag style="font-weight: 500">{{ $t('home.swapMem') }}:</el-tag>
<el-tag class="tagClass">
{{ $t('home.total') }}: {{ computeSize(currentInfo.swapMemoryTotal) }}
</el-tag>
<el-tag class="tagClass">
{{ $t('home.used') }}: {{ computeSize(currentInfo.swapMemoryUsed) }}
</el-tag>
<el-tag class="tagClass">
{{ $t('home.free') }}: {{ computeSize(currentInfo.swapMemoryAvailable) }}
</el-tag>
<el-tag class="tagClass">
{{ $t('home.percent') }}: {{ formatNumber(currentInfo.swapMemoryUsedPercent) }}%
</el-tag>
<el-popover placement="bottom" width="auto" trigger="hover" v-if="chartsOption['memory']">
<div class="grid grid-cols-2 gap-1">
<div class="grid grid-cols-1 gap-1">
<el-tag class="font-medium !justify-start w-max">{{ $t('home.mem') }}:</el-tag>
<el-tag class="!justify-start">
{{ $t('home.total') }}: {{ computeSize(currentInfo.memoryTotal) }}
</el-tag>
<el-tag class="!justify-start">
{{ $t('home.used') }}: {{ computeSize(currentInfo.memoryUsed) }}
</el-tag>
<el-tag class="!justify-start">
{{ $t('home.free') }}: {{ computeSize(currentInfo.memoryAvailable) }}
</el-tag>
<el-tag class="!justify-start">
{{ $t('home.percent') }}: {{ formatNumber(currentInfo.memoryUsedPercent) }}%
</el-tag>
</div>

<div class="grid grid-cols-1 gap-1" v-if="currentInfo.swapMemoryTotal">
<el-tag class="font-medium !justify-start w-max">{{ $t('home.swapMem') }}:</el-tag>
<el-tag class="!justify-start">
{{ $t('home.total') }}: {{ computeSize(currentInfo.swapMemoryTotal) }}
</el-tag>
<el-tag class="!justify-start">
{{ $t('home.used') }}: {{ computeSize(currentInfo.swapMemoryUsed) }}
</el-tag>
<el-tag class="!justify-start">
{{ $t('home.free') }}: {{ computeSize(currentInfo.swapMemoryAvailable) }}
</el-tag>
<el-tag class="!justify-start">
{{ $t('home.percent') }}: {{ formatNumber(currentInfo.swapMemoryUsedPercent) }}%
</el-tag>
</div>
</div>
<template #reference>
<v-charts
Expand All @@ -90,12 +101,12 @@
</span>
</el-col>
<el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6" align="center">
<el-popover placement="bottom" :width="200" trigger="hover" v-if="chartsOption['load']">
<el-tag class="tagClass">{{ $t('home.loadAverage', 1) }}: {{ formatNumber(currentInfo.load1) }}</el-tag>
<el-tag class="tagClass">{{ $t('home.loadAverage', 5) }}: {{ formatNumber(currentInfo.load5) }}</el-tag>
<el-tag class="tagClass">
{{ $t('home.loadAverage', 15) }}: {{ formatNumber(currentInfo.load15) }}
</el-tag>
<el-popover placement="bottom" width="auto" trigger="hover" v-if="chartsOption['load']">
<div class="grid grid-cols-1 gap-1">
<el-tag>{{ $t('home.loadAverage', 1) }}: {{ formatNumber(currentInfo.load1) }}</el-tag>
<el-tag>{{ $t('home.loadAverage', 5) }}: {{ formatNumber(currentInfo.load5) }}</el-tag>
<el-tag>{{ $t('home.loadAverage', 15) }}: {{ formatNumber(currentInfo.load15) }}</el-tag>
</div>
<template #reference>
<v-charts
height="160px"
Expand All @@ -110,42 +121,35 @@
</el-col>
<template v-for="(item, index) of currentInfo.diskData" :key="index">
<el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6" align="center" v-if="isShow('disk', index)">
<el-popover placement="bottom" :width="300" trigger="hover" v-if="chartsOption[`disk${index}`]">
<el-row :gutter="5">
<el-tag style="font-weight: 500">{{ $t('home.baseInfo') }}:</el-tag>
</el-row>
<el-row :gutter="5">
<el-tag class="nameTag">{{ $t('home.mount') }}: {{ item.path }}</el-tag>
</el-row>
<el-row :gutter="5">
<el-tag class="tagClass">{{ $t('commons.table.type') }}: {{ item.type }}</el-tag>
</el-row>
<el-row :gutter="5">
<el-tag class="tagClass">{{ $t('home.fileSystem') }}: {{ item.device }}</el-tag>
</el-row>
<el-row :gutter="5">
<el-col :span="12">
<div><el-tag class="tagClass" style="font-weight: 500">Inode:</el-tag></div>
<el-tag class="tagClass">{{ $t('home.total') }}: {{ item.inodesTotal }}</el-tag>
<el-tag class="tagClass">{{ $t('home.used') }}: {{ item.inodesUsed }}</el-tag>
<el-tag class="tagClass">{{ $t('home.free') }}: {{ item.inodesFree }}</el-tag>
<el-tag class="tagClass">
<el-popover placement="bottom" width="auto" trigger="hover" v-if="chartsOption[`disk${index}`]">
<div class="grid grid-cols-1 gap-1">
<el-tag class="font-medium !justify-start w-max">{{ $t('home.baseInfo') }}:</el-tag>
<el-tag class="!justify-start w-max">{{ $t('home.mount') }}: {{ item.path }}</el-tag>
<el-tag class="!justify-start w-max">{{ $t('commons.table.type') }}: {{ item.type }}</el-tag>
<el-tag class="!justify-start w-max">{{ $t('home.fileSystem') }}: {{ item.device }}</el-tag>
</div>
<div class="grid grid-cols-2 gap-2 mt-1">
<div class="grid grid-cols-1 gap-1">
<el-tag class="font-medium !justify-start w-max">Inode:</el-tag>
<el-tag class="!justify-start">{{ $t('home.total') }}: {{ item.inodesTotal }}</el-tag>
<el-tag class="!justify-start">{{ $t('home.used') }}: {{ item.inodesUsed }}</el-tag>
<el-tag class="!justify-start">{{ $t('home.free') }}: {{ item.inodesFree }}</el-tag>
<el-tag class="!justify-start">
{{ $t('home.percent') }}: {{ formatNumber(item.inodesUsedPercent) }}%
</el-tag>
</el-col>

<el-col :span="12">
<div>
<el-tag style="margin-top: 3px; font-weight: 500">{{ $t('monitor.disk') }}:</el-tag>
</div>
<el-tag class="tagClass">{{ $t('home.total') }}: {{ computeSize(item.total) }}</el-tag>
<el-tag class="tagClass">{{ $t('home.used') }}: {{ computeSize(item.used) }}</el-tag>
<el-tag class="tagClass">{{ $t('home.free') }}: {{ computeSize(item.free) }}</el-tag>
<el-tag class="tagClass">
</div>
<div class="grid grid-cols-1 gap-1">
<el-tag class="font-medium !justify-start w-max">{{ $t('monitor.disk') }}:</el-tag>
<el-tag class="!justify-start">
{{ $t('home.total') }}: {{ computeSize(item.total) }}
</el-tag>
<el-tag class="!justify-start">{{ $t('home.used') }}: {{ computeSize(item.used) }}</el-tag>
<el-tag class="!justify-start">{{ $t('home.free') }}: {{ computeSize(item.free) }}</el-tag>
<el-tag class="!justify-start">
{{ $t('home.percent') }}: {{ formatNumber(item.usedPercent) }}%
</el-tag>
</el-col>
</el-row>
</div>
</div>
<template #reference>
<v-charts
height="160px"
Expand All @@ -164,31 +168,19 @@
<template v-for="(item, index) of currentInfo.gpuData" :key="index">
<el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6" align="center" v-if="isShow('gpu', index)">
<el-popover placement="bottom" :width="250" trigger="hover" v-if="chartsOption[`gpu${index}`]">
<el-row :gutter="5">
<el-tag style="font-weight: 500">{{ $t('home.baseInfo') }}:</el-tag>
</el-row>
<el-row :gutter="5">
<el-tag class="tagClass">{{ $t('monitor.gpuUtil') }}: {{ item.gpuUtil }}</el-tag>
</el-row>
<el-row :gutter="5">
<el-tag class="tagClass">
<div class="grid grid-cols-1 gap-1">
<el-tag class="font-medium !justify-start w-max">{{ $t('home.baseInfo') }}:</el-tag>
<el-tag class="!justify-start">{{ $t('monitor.gpuUtil') }}: {{ item.gpuUtil }}</el-tag>
<el-tag class="!justify-start">
{{ $t('monitor.temperature') }}: {{ item.temperature.replaceAll('C', '°C') }}
</el-tag>
</el-row>
<el-row :gutter="5">
<el-tag class="tagClass">
<el-tag class="!justify-start">
{{ $t('monitor.performanceState') }}: {{ item.performanceState }}
</el-tag>
</el-row>
<el-row :gutter="5">
<el-tag class="tagClass">{{ $t('monitor.powerUsage') }}: {{ item.powerUsage }}</el-tag>
</el-row>
<el-row :gutter="5">
<el-tag class="tagClass">{{ $t('monitor.memoryUsage') }}: {{ item.memoryUsage }}</el-tag>
</el-row>
<el-row :gutter="5">
<el-tag class="tagClass">{{ $t('monitor.fanSpeed') }}: {{ item.fanSpeed }}</el-tag>
</el-row>
<el-tag class="!justify-start">{{ $t('monitor.powerUsage') }}: {{ item.powerUsage }}</el-tag>
<el-tag class="!justify-start">{{ $t('monitor.memoryUsage') }}: {{ item.memoryUsage }}</el-tag>
<el-tag class="!justify-start">{{ $t('monitor.fanSpeed') }}: {{ item.fanSpeed }}</el-tag>
</div>
<template #reference>
<v-charts
@click="goGPU()"
Expand All @@ -209,23 +201,15 @@
<template v-for="(item, index) of currentInfo.xpuData" :key="index">
<el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6" align="center" v-if="isShow('xpu', index)">
<el-popover placement="bottom" :width="250" trigger="hover" v-if="chartsOption[`xpu${index}`]">
<el-row :gutter="5">
<el-tag style="font-weight: 500">{{ $t('home.baseInfo') }}:</el-tag>
</el-row>
<el-row :gutter="5">
<el-tag class="tagClass">{{ $t('monitor.gpuUtil') }}: {{ item.memoryUtil }}</el-tag>
</el-row>
<el-row :gutter="5">
<el-tag class="tagClass">{{ $t('monitor.temperature') }}: {{ item.temperature }}</el-tag>
</el-row>
<el-row :gutter="5">
<el-tag class="tagClass">{{ $t('monitor.powerUsage') }}: {{ item.power }}</el-tag>
</el-row>
<el-row :gutter="5">
<el-tag class="tagClass">
<div class="grid grid-cols-1 gap-1">
<el-tag class="font-medium !justify-start w-max">{{ $t('home.baseInfo') }}:</el-tag>
<el-tag class="!justify-start">{{ $t('monitor.gpuUtil') }}: {{ item.memoryUtil }}</el-tag>
<el-tag class="!justify-start">{{ $t('monitor.temperature') }}: {{ item.temperature }}</el-tag>
<el-tag class="!justify-start">{{ $t('monitor.powerUsage') }}: {{ item.power }}</el-tag>
<el-tag class="!justify-start">
{{ $t('monitor.memoryUsage') }}: {{ item.memoryUsed }}/{{ item.memory }}
</el-tag>
</el-row>
</div>
<template #reference>
<v-charts
@click="goGPU()"
Expand All @@ -243,12 +227,21 @@
<span class="input-help" v-else>{{ item.deviceName }}</span>
</el-col>
</template>
<el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6" align="center" v-if="totalCount > 5">
<el-button v-if="!showMore" link type="primary" @click="changeShowMore(true)" class="buttonClass">
<el-col
:xs="12"
:sm="12"
:md="6"
:lg="6"
:xl="6"
v-if="totalCount > 5"
align="center"
class="!flex !justify-center !items-center"
>
<el-button v-if="!showMore" link type="primary" @click="changeShowMore(true)" class="text-sm">
{{ $t('tabs.more') }}
<el-icon><Bottom /></el-icon>
</el-button>
<el-button v-if="showMore" type="primary" link @click="changeShowMore(false)" class="buttonClass">
<el-button v-if="showMore" type="primary" link @click="changeShowMore(false)" class="text-sm">
{{ $t('tabs.hide') }}
<el-icon><Top /></el-icon>
</el-button>
Expand Down Expand Up @@ -431,39 +424,6 @@ defineExpose({
</script>

<style scoped lang="scss">
.status-container {
:deep(.el-button) {
min-width: 180px;
padding: 8px 16px;
height: auto;
white-space: normal;
line-height: 1.5;
text-align: left;
}

:deep(.el-tag) {
min-width: 180px;
padding: 8px 12px;
height: auto;
white-space: normal;
line-height: 1.5;
margin: 4px;
text-align: left;
}

:deep(.el-button--primary) {
background-color: var(--el-color-primary);
&.is-plain {
background: var(--el-color-primary-light-9);
color: var(--el-color-primary);
&:hover {
background: var(--el-color-primary);
color: white;
}
}
}
}

.cpuModeTag {
justify-content: flex-start !important;
text-align: left !important;
Expand All @@ -476,13 +436,6 @@ defineExpose({
margin-top: 3px;
margin-left: 1px;
}
.tagClass {
margin-top: 3px;
min-width: 140px;
white-space: normal;
height: auto;
line-height: 1.5;
}

.tagCPUClass {
justify-content: flex-start !important;
Expand All @@ -492,24 +445,4 @@ defineExpose({
margin-left: 1px;
width: 140px;
}

.buttonClass {
margin-top: 28%;
font-size: 14px;
}

.input-help {
display: inline-block;
min-width: 120px;
white-space: normal;
line-height: 1.2;
padding: 2px 4px;
}
.nameTag {
margin-top: 3px;
height: auto;
display: inline-block;
white-space: normal;
line-height: 1.8;
}
</style>
5 changes: 1 addition & 4 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 @@ -55,16 +55,13 @@
<el-dropdown-item v-if="globalStore.isIntl" command="en">
English
</el-dropdown-item>
<el-dropdown-item v-if="globalStore.isIntl" command="ru">
Русский
</el-dropdown-item>
<el-dropdown-item command="zh">中文(简体)</el-dropdown-item>
<el-dropdown-item command="tw">中文(繁體)</el-dropdown-item>
<el-dropdown-item v-if="!globalStore.isIntl" command="en">
English
</el-dropdown-item>
</el-dropdown-menu>
<el-dropdown-item v-if="!globalStore.isIntl" command="ru">Русский</el-dropdown-item>
<el-dropdown-item command="ru">Русский</el-dropdown-item>
</template>
</el-dropdown>
</div>
Copy link
Member

Choose a reason for hiding this comment

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

The provided code has several improvements:

  1. Commenting: Adding comments to explain the purpose of each dropdown item can make the code more understandable.

  2. Consistency: Both when globalStore.isIntl is true and false, the same options "English", "中文(简体)", "中文(繁體)" (or their Russian equivalents) appear in the dropdown menu.

  3. Optimization: Removing unnecessary duplicate conditional logic for showing/Russelling "English" reduces redundancy and improves performance slightly.

Here's a refined version of the code with inline annotations:

<div class="dropdown-container">
  <el-dropdown(trigger="click") @command="languageChangeHandler">
    <!-- Dropdown toggle button -->
    <el-button type="default">
      {{ globalStore.language }}<i class="el-icon-arrow-down el-input__icon"></i>
    </el-button>
    
    <!-- Dropdown content -->
    <el-dropdown-menu slot="dropdown">
      
      <!-- English option -->
      <template v-if="!globalStore.isIntl || globalStore.language === 'en'">
        <el-dropdown-item>English</el-dropdown-item>
      </template>

      <!-- Russian option if allowed or selected -->
      <template v-else-if="globalStore.allowRussianOptions && globalStore.language !== 'русский'">
        <el-dropdown-item command="ru">Русский</el-dropdown-item>
      </template>
  
      <!-- Simplified Chinese option -->
      <el-dropdown-item v-if="!globalStore.isIntl" command="zh">中文(简体)</el-dropdown-item>

      <!-- Traditional Chinese option -->
      <el-dropdown-item v-if="!globalStore.isIntl" command="tw">中文(繁體)</el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</div>

Key Changes:

  • Added condition to hide Russian language selection entirely unless explicitly enabled (allowRussianOptions). This prevents unnecessary clutter.
  • Combined similar conditions into one template using Vue.js directives instead of repeating them multiple times within <el-dropdown> element.
  • Improved clarity through clear comments inside each block of HTML, making it easier for future developers who may need to understand its usage.

Copy link
Member

Choose a reason for hiding this comment

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

No significant code issues were found in this diff. The only adjustment needed is removing the duplicate en option and changing "Rusский" to "Russian".

Copy link
Member

Choose a reason for hiding this comment

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

There are no significant irregularities, issues, or optimizations to suggest in the provided code snippet. The differences focus on conditional rendering of dropdown items based on whether globalStore.isIntl is true or false. This setup allows for dynamic visibility of language options that match the user's preference.

Copy link
Member

Choose a reason for hiding this comment

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

There is one potential issue in the code differences you provided:

  • The v-if directive on the second <el-dropdown-item> element in the dropdown menu does not match the previous ones. Inconsistent conditions can lead to unexpected behavior.

Here's the suggested fix:

@@ -55,16 +55,13 @@
                                         <el-dropdown-item v-if="globalStore.isIntl" command="en">
                                             English
                                         </el-dropdown-item>
-<<<<<<< HEAD
-                                        <el-dropdown-item v-if="globalStore.isIntl" command="ru">
-                                            Русский
-                                        </el-dropdown-item>
-=======
+>>>>>>> c84d7b2... Update language options for international users

This change ensures that both sets of conditionals use the same logic (globalStore.isIntl) for displaying the languages.

Expand Down
Loading
Loading