Skip to content

Commit

Permalink
Add the ability of front-end internationalization
Browse files Browse the repository at this point in the history
Signed-off-by: hanbingleixue <[email protected]>
  • Loading branch information
hanbingleixue committed Jun 25, 2024
1 parent 170d85e commit bb4589a
Show file tree
Hide file tree
Showing 12 changed files with 1,282 additions and 520 deletions.
91 changes: 91 additions & 0 deletions sermant-backend/src/main/webapp/frontend/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions sermant-backend/src/main/webapp/frontend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
"moment": "^2.29.4",
"qs": "^6.11.1",
"vue": "^3.2.36",
"vue-i18n": "^9.13.1",
"vue-router": "^4.1.6"
},
"devDependencies": {
Expand Down
10 changes: 7 additions & 3 deletions sermant-backend/src/main/webapp/frontend/src/App.vue
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<template>
<el-config-provider namespace="ep">
<BaseHeader />
<el-config-provider namespace="ep" :locale="localeLanguage.value">
<BaseHeader/>
<div class="main">
<RouterView />
<RouterView/>
</div>
</el-config-provider>
</template>
Expand All @@ -17,3 +17,7 @@
margin: 1vh;
}
</style>

<script lang="ts" setup>
import {localeLanguage} from '~/composables/translations';
</script>
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
import {toggleDark} from "~/composables";
import {useRouter} from "vue-router";
import {ref} from "vue";
import {switchLocale} from '~/composables/translations';
const activeName = ref("first");
Expand Down Expand Up @@ -35,24 +36,42 @@ const getAssetsImge = (url: string) => {
<template>
<el-menu class="el-menu-demo" mode="horizontal">
<el-image
style="width: 15vh; margin-left: 10px"
:src="getAssetsImge('Sermant-logo.png')"
:fit="'scale-down'"
style="width: 15vh; margin-left: 10px"
:src="getAssetsImge('Sermant-logo.png')"
:fit="'scale-down'"
>
</el-image>
<el-menu-item index="2" @click="toInstances"> 实例状态 </el-menu-item>
<el-menu-item index="2" @click="toInstances"> {{ $t('header.instanceStatus') }}</el-menu-item>
<el-sub-menu index="3">
<template #title>事件管理</template>
<el-menu-item index="3-1" @click="toEvents"> 监测 </el-menu-item>
<el-menu-item index="3-2" @click="toEventsConfig"> 配置 </el-menu-item>
<template #title>{{ $t('header.eventManagement') }}</template>
<el-menu-item index="3-1" @click="toEvents"> {{ $t('header.monitoring') }}</el-menu-item>
<el-menu-item index="3-2" @click="toEventsConfig">{{ $t('header.configuration') }}</el-menu-item>
</el-sub-menu>
<el-menu-item index="4" @click="toConfig">{{ $t('header.configurationManagement') }}</el-menu-item>

<el-sub-menu index="5">
<template #title>
<i class="el-icon el-tooltip__trigger" data-v-dd9c9540="" style="font-size: 24px;">
<svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" width="1.2em" height="1.2em" data-v-dd9c9540="">
<path fill="currentColor"
d="m18.5 10l4.4 11h-2.155l-1.201-3h-4.09l-1.199 3h-2.154L16.5 10h2zM10 2v2h6v2h-1.968a18.222 18.222 0
0 1-3.62 6.301a14.864 14.864 0 0 0 2.336 1.707l-.751 1.878A17.015 17.015 0 0 1 9 13.725a16.676 16.676
0 0 1-6.201 3.548l-.536-1.929a14.7 14.7 0 0 0 5.327-3.042A18.078 18.078 0 0 1 4.767
8h2.24A16.032 16.032 0 0 0 9 10.877a16.165 16.165 0 0 0 2.91-4.876L2 6V4h6V2h2zm7.5 10.885L16.253
16h2.492L17.5 12.885z">
</path>
</svg>
</i>
</template>
<el-menu-item index="5-1" @click="switchLocale('zh')">中文</el-menu-item>
<el-menu-item index="5-2" @click="switchLocale('en')">English</el-menu-item>
</el-sub-menu>
<el-menu-item index="4" @click="toConfig"> 配置管理 </el-menu-item>
<el-menu-item h="full" @click="toggleDark()">
<button
class="border-none w-full bg-transparent cursor-pointer"
style="height: var(--ep-menu-item-height)"
class="border-none w-full bg-transparent cursor-pointer"
style="height: var(--ep-menu-item-height)"
>
<i inline-flex i="dark:ep-moon ep-sunny" />
<i inline-flex i="dark:ep-moon ep-sunny"/>
</button>
</el-menu-item>
</el-menu>
Expand Down
69 changes: 46 additions & 23 deletions sermant-backend/src/main/webapp/frontend/src/composables/config.ts
Original file line number Diff line number Diff line change
@@ -1,25 +1,48 @@
export const resultCodeMap = new Map<string, string>([
['00', '成功'],
['01', '无法连接配置中心'],
['02', '配置查询失败'],
['03', '配置已存在'],
['04', '新增配置失败'],
['05', '发布配置失败'],
['06', '删除配置失败'],
['07', '配置不存在'],
['08', '缺少请求参数'],
['09', '请求失败'],
import i18n from "~/composables/translations";
import {ref, watch} from "vue";

const resultCodes = [
{code: '00', key: 'common.success'},
{code: '01', key: 'common.unableToConnectToConfigurationCenter'},
{code: '02', key: 'common.failedToObtainConfiguration'},
{code: '03', key: 'common.configurationAlreadyExists'},
{code: '04', key: 'common.failedToCreateConfiguration'},
{code: '05', key: 'common.failedToPublishConfiguration'},
{code: '06', key: 'common.failedToDeleteConfiguration'},
{code: '07', key: 'common.configurationDoesNotExist'},
{code: '08', key: 'common.missingRequestParameters'},
{code: '09', key: 'common.failedToRequest'},
];

export const resultCodeMap = new Map(resultCodes.map(item => [item.code, i18n.global.t(item.key)]));

watch(() => i18n.global.locale, () => {
resultCodes.forEach(item => {
resultCodeMap.set(item.code, i18n.global.t(item.key));
});
updateOptions();
});

const options = ref([
{ label: '', value: '' }
]);

export const options = [
{label: '路由插件配置', value: 'router',},
{label: 'springboot注册插件配置', value: 'springboot-registry',},
{label: '注册迁移插件配置', value: 'service-registry',},
{label: '流控插件配置', value: 'flowcontrol',},
{label: '离群实例摘除插件配置', value: 'removal',},
{label: '负载均衡插件配置', value: 'loadbalancer',},
{label: '标签透传插件配置', value: 'tag-transmission',},
{label: '消息队列禁止消费', value: 'mq-consume-prohibition',},
{label: '数据库禁写插件配置', value: 'database-write-prohibition',},
{label: '其他配置', value: 'other',},
]
function updateOptions() {
options.value = [
{label: i18n.global.t('common.router'), value: 'router'},
{label: i18n.global.t('common.springbootRegistry'), value: 'springboot-registry'},
{label: i18n.global.t('common.serviceRegistry'), value: 'service-registry'},
{label: i18n.global.t('common.flowcontrol'), value: 'flowcontrol'},
{label: i18n.global.t('common.removal'), value: 'removal'},
{label: i18n.global.t('common.loadbalancer'), value: 'loadbalancer'},
{label: i18n.global.t('common.tagTransmission'), value: 'tag-transmission'},
{label: i18n.global.t('common.mqConsumeProhibition'), value: 'mq-consume-prohibition'},
{label: i18n.global.t('common.databaseWriteProhibition'), value: 'database-write-prohibition'},
{label: i18n.global.t('common.other'), value: 'other'},
];
}

// Initial call to populate options on startup
updateOptions();

export {options};
Loading

0 comments on commit bb4589a

Please sign in to comment.