fix: improve language switcher for scalable multi-language support

- Replace binary logic with configuration object for better scalability
- Add support for any number of languages without code changes
- Use language configuration mapping for maintainable language handling
- Replace hardcoded titles with i18n translation keys for proper localization
This commit is contained in:
Bjorn de Jong
2025-07-29 17:20:31 +02:00
parent 74bf54e97a
commit 00a011c2ba
4 changed files with 13 additions and 7 deletions
+10 -4
View File
@@ -2,9 +2,9 @@
<n-dropdown :options="options" trigger="click" @select="handleSelect">
<n-button :text="true" block>
<template #icon>
<Icon :name="isChineseLocale ? 'ri:translate-2' : 'ri:translate'" />
<Icon :name="currentLanguage.icon" />
</template>
{{ isChineseLocale ? '中文' : 'English' }}
{{ currentLanguage.text }}
</n-button>
</n-dropdown>
</template>
@@ -17,8 +17,14 @@ import { useI18n } from 'vue-i18n'
const { locale, setLocale } = useI18n()
const isChineseLocale = computed(() => {
return locale.value === 'zh'
const languageConfig = {
en: { text: 'English', icon: 'ri:translate' },
zh: { text: '中文', icon: 'ri:translate-2' },
tr: { text: 'Türkçe', icon: 'ri:translate' }
} as const
const currentLanguage = computed(() => {
return languageConfig[locale.value as keyof typeof languageConfig] || languageConfig.en
})
const options = ref<DropdownOption[]>([
+1 -1
View File
@@ -64,7 +64,7 @@ interface RowData {
const columns: DataTableColumns<RowData> = [
{
title: '名称',
title: t('Name'),
align: 'left',
key: 'name',
filter(value, row) {
+1 -1
View File
@@ -63,7 +63,7 @@ interface RowData {
const columns: DataTableColumns<RowData> = [
{
title: '策略',
title: t('Name'),
align: 'left',
key: 'name',
filter(value, row) {
@@ -80,7 +80,7 @@ const columns: DataTableColumns<RowData> = [
type: 'selection',
},
{
title: '策略',
title: t('Name'),
align: 'left',
key: 'name',
filter(value, row) {