From bb4589a3efab76f327d56631b6a7354542a23b7b Mon Sep 17 00:00:00 2001
From: hanbingleixue <hanbingleixue@hotmail.com>
Date: Tue, 25 Jun 2024 14:28:56 +0800
Subject: [PATCH] Add the ability of front-end internationalization

Signed-off-by: hanbingleixue <hanbingleixue@hotmail.com>
---
 .../main/webapp/frontend/package-lock.json    |  91 ++++
 .../src/main/webapp/frontend/package.json     |   1 +
 .../src/main/webapp/frontend/src/App.vue      |  10 +-
 .../src/components/layouts/BaseHeader.vue     |  41 +-
 .../webapp/frontend/src/composables/config.ts |  69 ++-
 .../frontend/src/composables/translations.ts  | 465 ++++++++++++++++++
 .../src/main/webapp/frontend/src/main.ts      |  13 +-
 .../webapp/frontend/src/views/ConfigInfo.vue  | 241 +++++----
 .../webapp/frontend/src/views/ConfigView.vue  |  78 +--
 .../frontend/src/views/EventsConfigView.vue   | 152 +++---
 .../webapp/frontend/src/views/EventsView.vue  | 439 ++++++++++-------
 .../frontend/src/views/InstancesView.vue      | 202 ++++----
 12 files changed, 1282 insertions(+), 520 deletions(-)
 create mode 100644 sermant-backend/src/main/webapp/frontend/src/composables/translations.ts

diff --git a/sermant-backend/src/main/webapp/frontend/package-lock.json b/sermant-backend/src/main/webapp/frontend/package-lock.json
index e62def19fe..cfd447dbc9 100644
--- a/sermant-backend/src/main/webapp/frontend/package-lock.json
+++ b/sermant-backend/src/main/webapp/frontend/package-lock.json
@@ -15,6 +15,7 @@
         "moment": "^2.29.4",
         "qs": "^6.11.1",
         "vue": "^3.2.36",
+        "vue-i18n": "^9.13.1",
         "vue-router": "^4.1.6"
       },
       "devDependencies": {
@@ -520,6 +521,44 @@
         "local-pkg": "^0.4.3"
       }
     },
+    "node_modules/@intlify/core-base": {
+      "version": "9.13.1",
+      "resolved": "https://r.cnpmjs.org/@intlify/core-base/-/core-base-9.13.1.tgz",
+      "integrity": "sha512-+bcQRkJO9pcX8d0gel9ZNfrzU22sZFSA0WVhfXrf5jdJOS24a+Bp8pozuS9sBI9Hk/tGz83pgKfmqcn/Ci7/8w==",
+      "dependencies": {
+        "@intlify/message-compiler": "9.13.1",
+        "@intlify/shared": "9.13.1"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/message-compiler": {
+      "version": "9.13.1",
+      "resolved": "https://r.cnpmjs.org/@intlify/message-compiler/-/message-compiler-9.13.1.tgz",
+      "integrity": "sha512-SKsVa4ajYGBVm7sHMXd5qX70O2XXjm55zdZB3VeMFCvQyvLew/dLvq3MqnaIsTMF1VkkOb9Ttr6tHcMlyPDL9w==",
+      "dependencies": {
+        "@intlify/shared": "9.13.1",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 16"
+      }
+    },
+    "node_modules/@intlify/shared": {
+      "version": "9.13.1",
+      "resolved": "https://r.cnpmjs.org/@intlify/shared/-/shared-9.13.1.tgz",
+      "integrity": "sha512-u3b6BKGhE6j/JeRU6C/RL2FgyJfy6LakbtfeVF8fJXURpZZTzfh3e05J0bu0XPw447Q6/WUp3C4ajv4TMS4YsQ==",
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.1.1",
       "resolved": "https://repo.huaweicloud.com/repository/npm/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz",
@@ -3966,6 +4005,25 @@
         "@vue/shared": "3.2.47"
       }
     },
+    "node_modules/vue-i18n": {
+      "version": "9.13.1",
+      "resolved": "https://r.cnpmjs.org/vue-i18n/-/vue-i18n-9.13.1.tgz",
+      "integrity": "sha512-mh0GIxx0wPtPlcB1q4k277y0iKgo25xmDPWioVVYanjPufDBpvu5ySTjP5wOrSvlYQ2m1xI+CFhGdauv/61uQg==",
+      "dependencies": {
+        "@intlify/core-base": "9.13.1",
+        "@intlify/shared": "9.13.1",
+        "@vue/devtools-api": "^6.5.0"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/vue-router": {
       "version": "4.1.6",
       "resolved": "https://repo.huaweicloud.com/repository/npm/vue-router/-/vue-router-4.1.6.tgz",
@@ -4471,6 +4529,29 @@
         "local-pkg": "^0.4.3"
       }
     },
+    "@intlify/core-base": {
+      "version": "9.13.1",
+      "resolved": "https://r.cnpmjs.org/@intlify/core-base/-/core-base-9.13.1.tgz",
+      "integrity": "sha512-+bcQRkJO9pcX8d0gel9ZNfrzU22sZFSA0WVhfXrf5jdJOS24a+Bp8pozuS9sBI9Hk/tGz83pgKfmqcn/Ci7/8w==",
+      "requires": {
+        "@intlify/message-compiler": "9.13.1",
+        "@intlify/shared": "9.13.1"
+      }
+    },
+    "@intlify/message-compiler": {
+      "version": "9.13.1",
+      "resolved": "https://r.cnpmjs.org/@intlify/message-compiler/-/message-compiler-9.13.1.tgz",
+      "integrity": "sha512-SKsVa4ajYGBVm7sHMXd5qX70O2XXjm55zdZB3VeMFCvQyvLew/dLvq3MqnaIsTMF1VkkOb9Ttr6tHcMlyPDL9w==",
+      "requires": {
+        "@intlify/shared": "9.13.1",
+        "source-map-js": "^1.0.2"
+      }
+    },
+    "@intlify/shared": {
+      "version": "9.13.1",
+      "resolved": "https://r.cnpmjs.org/@intlify/shared/-/shared-9.13.1.tgz",
+      "integrity": "sha512-u3b6BKGhE6j/JeRU6C/RL2FgyJfy6LakbtfeVF8fJXURpZZTzfh3e05J0bu0XPw447Q6/WUp3C4ajv4TMS4YsQ=="
+    },
     "@jridgewell/gen-mapping": {
       "version": "0.1.1",
       "resolved": "https://repo.huaweicloud.com/repository/npm/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz",
@@ -6813,6 +6894,16 @@
         "@vue/shared": "3.2.47"
       }
     },
+    "vue-i18n": {
+      "version": "9.13.1",
+      "resolved": "https://r.cnpmjs.org/vue-i18n/-/vue-i18n-9.13.1.tgz",
+      "integrity": "sha512-mh0GIxx0wPtPlcB1q4k277y0iKgo25xmDPWioVVYanjPufDBpvu5ySTjP5wOrSvlYQ2m1xI+CFhGdauv/61uQg==",
+      "requires": {
+        "@intlify/core-base": "9.13.1",
+        "@intlify/shared": "9.13.1",
+        "@vue/devtools-api": "^6.5.0"
+      }
+    },
     "vue-router": {
       "version": "4.1.6",
       "resolved": "https://repo.huaweicloud.com/repository/npm/vue-router/-/vue-router-4.1.6.tgz",
diff --git a/sermant-backend/src/main/webapp/frontend/package.json b/sermant-backend/src/main/webapp/frontend/package.json
index 4d725c6f9a..45971c4302 100644
--- a/sermant-backend/src/main/webapp/frontend/package.json
+++ b/sermant-backend/src/main/webapp/frontend/package.json
@@ -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": {
diff --git a/sermant-backend/src/main/webapp/frontend/src/App.vue b/sermant-backend/src/main/webapp/frontend/src/App.vue
index ef4205ab64..090d868a9e 100644
--- a/sermant-backend/src/main/webapp/frontend/src/App.vue
+++ b/sermant-backend/src/main/webapp/frontend/src/App.vue
@@ -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>
@@ -17,3 +17,7 @@
   margin: 1vh;
 }
 </style>
+
+<script lang="ts" setup>
+import {localeLanguage} from '~/composables/translations';
+</script>
\ No newline at end of file
diff --git a/sermant-backend/src/main/webapp/frontend/src/components/layouts/BaseHeader.vue b/sermant-backend/src/main/webapp/frontend/src/components/layouts/BaseHeader.vue
index f13ae08449..374bf766b5 100644
--- a/sermant-backend/src/main/webapp/frontend/src/components/layouts/BaseHeader.vue
+++ b/sermant-backend/src/main/webapp/frontend/src/components/layouts/BaseHeader.vue
@@ -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");
 
@@ -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>
diff --git a/sermant-backend/src/main/webapp/frontend/src/composables/config.ts b/sermant-backend/src/main/webapp/frontend/src/composables/config.ts
index 9f03bd9fa1..cb7556b7a4 100644
--- a/sermant-backend/src/main/webapp/frontend/src/composables/config.ts
+++ b/sermant-backend/src/main/webapp/frontend/src/composables/config.ts
@@ -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',},
-]
\ No newline at end of file
+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};
diff --git a/sermant-backend/src/main/webapp/frontend/src/composables/translations.ts b/sermant-backend/src/main/webapp/frontend/src/composables/translations.ts
new file mode 100644
index 0000000000..40884a7884
--- /dev/null
+++ b/sermant-backend/src/main/webapp/frontend/src/composables/translations.ts
@@ -0,0 +1,465 @@
+import {createI18n} from 'vue-i18n';
+import zh from 'element-plus/lib/locale/lang/zh-cn'
+import en from 'element-plus/lib/locale/lang/en'
+import {reactive} from "vue";
+
+const messages = {
+    en: {
+        header: {
+            instanceStatus: 'Instance Status',
+            eventManagement: 'Event Management',
+            configurationManagement: 'Configuration Management',
+            monitoring: 'Monitoring',
+            configuration: 'Configuration',
+        },
+        instanceView: {
+            event: 'Event',
+            instanceStatus: 'Instance Status',
+            application: 'Application',
+            service: 'Service',
+            instance: 'Instance',
+            version: 'Version',
+            status: 'Status',
+            instanceID: 'Instance ID',
+            heartbeat: 'Heartbeat',
+            plugin: 'Plugin',
+            successfullyObtainedInstances: 'Successfully obtained instances',
+            failedToObtainInstances: 'Failed to obtain instances',
+        },
+        eventViews: {
+            instance: 'Instance',
+            eventMonitoring: 'Event Monitoring',
+            emergencyEvent: 'Emergency',
+            importantEvent: 'Important',
+            normalEvent: 'Normal',
+            service: 'Service',
+            startTime: 'Start Time',
+            endTime: 'End Time',
+            autoRefresh: 'Auto Refresh',
+            logDetail: 'Log Detail',
+            logLevel: 'Log Level',
+            logInformation: 'Log Information',
+            logRelatedClass: 'Log Related Class',
+            logRelatedMethod: 'Log Related Method',
+            logLine: 'Log Line',
+            threadID: 'Thread ID',
+            exceptionType: 'Exception Type',
+            eventDetail: 'Event Detail',
+            description: 'Description',
+            event: 'Event',
+            level: 'Level',
+            emergency: 'Emergency',
+            important: 'Important',
+            normal: 'Normal',
+            type: 'Type',
+            log: 'Log',
+            operation: 'Operation',
+            governance: 'Governance',
+            area: 'Area',
+            time: 'Time',
+            lastHalfHour: 'Last Half Hour',
+            lastHour: 'Last Hour',
+            lastDay: 'Last Day',
+            lastThreeDays: 'Last Three Days',
+            lastWeek: 'Last Week',
+            enableAutoRefresh: 'Enable Auto Refresh',
+            disableAutoRefresh: 'Disable Auto Refresh',
+            agentStartup: 'Agent Startup',
+            agentShutdown: 'Agent Shutdown',
+            enhanceSuccess: 'Enhance Success',
+            enhanceFail: 'Enhance Fail',
+            serviceStop: 'Service Stop',
+            serviceStart: 'Service Start',
+            pluginInstall: 'Plugin Install',
+            warningLog: 'Warning Log',
+            errorLog: 'Error Log',
+            rateLimiting: 'RateLimiting',
+            circuitBreaker: 'CircuitBreaker',
+            adaptiveOverloadProtection: "Adaptive Overload Protection",
+            gracefulOnlineBegin: "Graceful Online Begin",
+            gracefulOnlineEnd: "Graceful Online End",
+            gracefulOfflineBegin: "Graceful Offline Begin",
+            gracefulOfflineEnd: "Graceful Offline End",
+            routerRuleRefresh: "Router Rule Refresh",
+            sameTagRuleMatch: "Same Tag Rule Match",
+            sameTagRuleMismatch: "Same Tag Rule Mismatch",
+            instanceRemoval: "Instance Removal",
+            instanceRecovery: "Instance Recovery",
+            springbootRegistry: "Springboot Registry",
+            springbootUnRegistry: "Springboot UnRegistry",
+            springbootGrayConfigRefresh: "Springboot Gray Config Refresh",
+            successfullyObtainedEvents: "Successfully obtained events",
+            failedToObtainEvents: "Failed to obtain events"
+        },
+        eventConfigView: {
+            event: 'Event',
+            configuration: 'Configuration',
+            webHookConfiguration: 'WebHook Configuration',
+            switch: 'Switch',
+            type: 'Type',
+            address: 'Address',
+            operation: 'Operation',
+            edit: 'Edit',
+            testConnection: 'Test Connection',
+            feiShu: 'FeiShu',
+            dingTalk: 'Dingtalk',
+            successfullyObtainedWebhookConfiguration: 'Successfully obtained webhook configuration',
+            failedToObtainWebHookConfiguration: 'Failed to obtain WebHook configuration',
+            success: 'Success',
+            failed: 'Failed',
+            successfullyInitiatedWebHookTest: 'Successfully initiated WebHook test',
+            failedToInitiateWebHookTest: 'Failed to initiate WebHook test',
+        },
+        configView: {
+            instance: 'Instance',
+            configurationManagement: 'Configuration Management',
+            configurationCenterInformation: 'Configuration Center Information',
+            type: 'Type',
+            address: 'Address',
+            user: 'User',
+            configurationInformation: 'Configuration Information',
+            plugin: 'Plugin',
+            configType: 'Type',
+            inputProjectName: 'Input project name',
+            project: 'Project',
+            inputApplicationName: 'Input application name',
+            application: 'Application',
+            service: 'Service',
+            inputServiceName: 'Input service name',
+            environment: 'Environment',
+            inputEnvironmentName: 'Input environment name',
+            zone: 'Zone',
+            inputZoneName: 'Input zone name',
+            inputGroup: 'Input group',
+            inputKey: 'Input key',
+            operation: 'Operation',
+            view: 'View',
+            areYouSureToDeleteTheCurrentConfiguration: 'Are you sure to delete the current configuration?',
+            delete: 'Delete',
+            yes: 'Yes',
+            no: 'No',
+            create: 'Create',
+            theProjectCannotBeEmpty: 'The project cannot be empty',
+            theGroupCannotBeEmpty: 'The group cannot be empty',
+            successfullyObtainedConfiguration: 'Successfully obtained configuration',
+            failedObtainedConfiguration: 'Failed to obtain configuration',
+            successfullyDeletedConfiguration: 'Successfully deleted configuration',
+            failedDeletedConfiguration: 'Failed to delete configuration',
+        },
+        common: {
+            success: 'Success',
+            unableToConnectToConfigurationCenter: 'Unable to connect to configuration center',
+            failedToObtainConfiguration: 'Failed to obtain configuration',
+            configurationAlreadyExists: 'Configuration already exists',
+            failedToCreateConfiguration: 'Failed to create configuration',
+            failedToPublishConfiguration: 'Failed to publish configuration',
+            failedToDeleteConfiguration: 'Failed to delete configuration',
+            configurationDoesNotExist: 'Configuration does not exist',
+            missingRequestParameters: 'Missing request parameters',
+            failedToRequest: 'Failed to request',
+            router: 'router',
+            springbootRegistry: 'springboot-registry',
+            serviceRegistry: 'service-registry',
+            flowcontrol: 'flowcontrol',
+            removal: 'service-removal',
+            loadbalancer: 'loadbalancer',
+            tagTransmission: 'tag-transmission',
+            mqConsumeProhibition: 'mq-consume-prohibition',
+            databaseWriteProhibition: 'database-write-prohibition',
+            other: 'other',
+        },
+        configInfo: {
+            configurationManagement: 'Configuration Management',
+            configurationDetail: 'Configuration Detail',
+            pluginInformation: 'Plugin Information',
+            type: 'Type',
+            selectPlugin: 'Select plugin',
+            ruleInformation: 'Rule Information',
+            ruleType: 'Rule Type',
+            selectRuleType: 'Select rule type',
+            ruleTypeSupportedInPlugin : 'Rule type supported in plugin',
+            inputSceneName: 'Input scene name',
+            sceneName: 'Scene Name',
+            flowcontrolRuleNotice: 'The flow control rule will only take effect when the scene name matches the traffic matching rule',
+            loadbalancerRuleNotice: 'The load balancing strategy will only take effect when the scenario of traffic tagging and load balancing strategy is consistent',
+            inputProjectName: 'Input project name',
+            projectNotice: 'This configuration corresponds to the service.meta.project in the sermant configuration file',
+            inputApplicationName: 'Input application name',
+            applicationNotice: 'This configuration corresponds to the service.meta.application in the sermant configuration file',
+            inputServiceNameOrEmpty: 'Input service name (When empty, it is a global configuration)',
+            metaServiceNotice: 'This configuration corresponds to the service.meta.service in the sermant configuration file',
+            inputEnvironmentName: 'Input environment name',
+            environmentNotice: 'This configuration corresponds to the service.meta.environment in the sermant configuration file',
+            inputZoneName: 'Input zone name',
+            zoneNotice: 'This configuration corresponds to the service.meta.zone in the sermant configuration file',
+            serviceInformation: 'Service Information',
+            inputServiceName: 'Input service name',
+            serviceNotice: 'The name of the microservice is determined by the dubbo.application.name and spring.application.name in the microservice configuration file',
+            configurationInformation: 'Configuration Information',
+            inputConfigurationGroup : 'Input configuration group',
+            configurationNotice: 'Automatically generated when configuring the Sermant native plugin configuration, no modification required',
+            inputConfigurationName: ' Input configuration name',
+            configurationContent: 'Configuration Content',
+            inputConfigurationContent: 'Input configuration content',
+            configurationContentNotice: 'The native Sermant plugin requires the use of yaml format',
+            trafficMatchingRule:'Traffic Matching Rule',
+            rateLimitingRule:'Rate Limiting Rule',
+            circuitBreakerRule:'Circuit Breaker Rule',
+            bulkheadRule:'Bulkhead Rule',
+            faultInjectionRule:'Fault Injection Rule',
+            retryRule:'Retry Rule',
+            systemLevelFlowControl:'System Level Flow Control',
+            trafficTaggingRule:'Traffic Tagging Rule',
+            loadBalancingRule:'Load Balancing Rule',
+            successfullyCreatedConfiguration:'Successfully created configuration',
+            failedToCreateConfiguration:'Failed to create configuration',
+            successfullyUpdatedConfiguration:'Successfully updated configuration',
+            failedToUpdateConfiguration:'Failed to update configuration',
+            failedToObtainConfiguration:'Failed to obtain configuration',
+            submit: 'Submit',
+        }
+    },
+    zh: {
+        header: {
+            instanceStatus: '实例状态',
+            eventManagement: '事件管理',
+            configurationManagement: '配置管理',
+            monitoring: '监测',
+            configuration: '配置',
+        },
+        instanceView: {
+            event: '事件',
+            instanceStatus: '实例状态',
+            application: '应用',
+            service: '服务',
+            instance: '实例',
+            version: '版本',
+            status: '状态',
+            instanceID: '实例ID',
+            heartbeat: '心跳时间',
+            plugin: '插件',
+            successfullyObtainedInstances: '获取实例数据成功',
+            failedToObtainInstances: '获取实例数据失败',
+        },
+        eventViews: {
+            instance: '实例',
+            eventMonitoring: '事件监测',
+            emergencyEvent: '紧急事件',
+            importantEvent: '重要事件',
+            normalEvent: '一般事件',
+            service: '服务',
+            startTime: '开始时间',
+            endTime: '结束时间',
+            autoRefresh: '自动刷新',
+            logDetail: '日志详情',
+            logLevel: '日志级别',
+            logInformation: '日志信息',
+            logRelatedClass: '日志触发类',
+            logRelatedMethod: '日志触发方法',
+            logLine: '日志触发行号',
+            threadID: '线程ID',
+            exceptionType: '异常类型',
+            eventDetail: '事件详情',
+            description: '描述信息',
+            event: '事件',
+            level: '事件级别',
+            emergency: '紧急',
+            important: '重要',
+            normal: '一般',
+            type: '事件类型',
+            log: '日志',
+            operation: '运行',
+            governance: '治理',
+            area: '事件区域',
+            time: '上报时间',
+            lastHalfHour: '最近半小时',
+            lastHour: '最近一小时',
+            lastDay: '最近一天',
+            lastThreeDays: '最近三天',
+            lastWeek: '最近一周',
+            enableAutoRefresh: '开启自动刷新',
+            disableAutoRefresh: '关闭自动刷新',
+            agentStartup: 'Agent启动',
+            agentShutdown: 'Agent停止',
+            enhanceSuccess: '增强成功',
+            enhanceFail: '增强失败',
+            serviceStop: '服务停止',
+            serviceStart: '服务启动',
+            pluginInstall: '插件加载',
+            warningLog: '警告日志',
+            errorLog: '错误日志',
+            rateLimiting: '限流',
+            circuitBreaker: '熔断',
+            adaptiveOverloadProtection: "自适应过载保护",
+            gracefulOnlineBegin: "无损上线开始",
+            gracefulOnlineEnd: "无损上线结束",
+            gracefulOfflineBegin: "无损下线开始",
+            gracefulOfflineEnd: "无损下线结束",
+            routerRuleRefresh: "路由插件规则刷新",
+            sameTagRuleMatch: "同标签优先规则匹配成功",
+            sameTagRuleMismatch: "同标签优先规则匹配失败",
+            instanceRemoval: "实例摘除",
+            instanceRecovery: "实例恢复",
+            springbootRegistry: "springboot服务注册",
+            springbootUnRegistry: "springboot服务移除注册",
+            springbootGrayConfigRefresh: "springboot注册插件灰度规则刷新",
+            successfullyObtainedEvents: "获取事件成功",
+            failedToObtainEvents: "获取事件失败"
+        },
+        eventConfigView: {
+            event: '事件',
+            configuration: '事件配置',
+            webHookConfiguration: 'WebHook 配置',
+            switch: '开关',
+            type: '类型',
+            address: '地址',
+            operation: '操作',
+            edit: '编辑',
+            testConnection: '测试连接',
+            feiShu: '飞书',
+            dingTalk: '钉钉',
+            successfullyObtainedWebhookConfiguration: '获取WebHook配置成功',
+            failedToObtainWebHookConfiguration: '获取WebHook配置失败',
+            success: '设置成功',
+            failed: '设置失败',
+            successfullyInitiatedWebHookTest: '发起WebHook测试成功',
+            failedToInitiateWebHookTest: '发起WebHook测试失败',
+        },
+        configView: {
+            instance: '实例',
+            configurationManagement: '配置管理',
+            configurationCenterInformation: '配置中心信息',
+            type: '配置中心类型',
+            address: '配置中心地址',
+            user: '用户名称',
+            configurationInformation: '配置信息',
+            plugin: '插件类型',
+            configType: '配置类型',
+            inputProjectName: '请输入命名空间',
+            project: '命名空间',
+            inputApplicationName: '请输入应用名称',
+            application: '应用名称',
+            service: '服务名称',
+            inputServiceName: '请输入服务名称',
+            environment: '环境名称',
+            inputEnvironmentName: '请输入环境名称',
+            zone: '区域名称',
+            inputZoneName: '请输入区域名称',
+            inputGroup: '请输入group',
+            inputKey: '请输入key',
+            operation: '操作类型',
+            view: '查看',
+            areYouSureToDeleteTheCurrentConfiguration: '是否确认删除当前配置项？',
+            delete: '删除',
+            yes: '是',
+            no: '否',
+            create: '新增',
+            theProjectCannotBeEmpty: '命名空间不能为空',
+            theGroupCannotBeEmpty: 'group不能为空',
+            successfullyObtainedConfiguration: '获取配置成功',
+            failedObtainedConfiguration: '获取配置失败',
+            successfullyDeletedConfiguration: '删除配置成功',
+            failedDeletedConfiguration: '删除配置失败',
+        },
+        common: {
+            success: '成功',
+            unableToConnectToConfigurationCenter: '无法连接配置中心',
+            failedToObtainConfiguration: '配置查询失败',
+            configurationAlreadyExists: '配置已存在',
+            failedToCreateConfiguration: '新增配置失败',
+            failedToPublishConfiguration: '发布配置失败',
+            failedToDeleteConfiguration: '删除配置失败',
+            configurationDoesNotExist: '配置不存在',
+            missingRequestParameters: '缺少请求参数',
+            failedToRequest: '请求失败',
+            router: '路由插件',
+            springbootRegistry: 'springboot注册插件',
+            serviceRegistry: '注册迁移插件',
+            flowcontrol: '流控插件',
+            removal: '离群实例摘除插件',
+            loadbalancer: '负载均衡插件',
+            tagTransmission: '标签透传插件',
+            mqConsumeProhibition: '消息队列禁止消费插件',
+            databaseWriteProhibition: '数据库禁写插件',
+            other: '其他',
+        },
+        configInfo: {
+            configurationManagement: '配置管理',
+            configurationDetail: '配置详情',
+            pluginInformation: '插件配置信息',
+            type: '插件类型',
+            selectPlugin: '请选择插件类型',
+            ruleInformation: '规则信息',
+            ruleType: '规则类型',
+            selectRuleType: '请选择规则类型',
+            ruleTypeSupportedInPlugin : '插件支持的规则类型',
+            inputSceneName: '请输入规则场景名称',
+            sceneName: '规则场景名称',
+            flowcontrolRuleNotice: '流量匹配和具体流控规则的场景名称一致时流控规则才会生效',
+            loadbalancerRuleNotice: '流量标记和负载均衡策略的场景一致时负载均衡策略生效',
+            inputProjectName: '请输入命名空间',
+            projectNotice: '该配置对应sermant配置文件中的service.meta.project',
+            inputApplicationName: '请输入应用名称',
+            applicationNotice: '该配置对应sermant配置文件中的service.meta.application',
+            inputServiceNameOrEmpty: '请输入服务名称，为空时下发全局配置',
+            metaServiceNotice: '该配置对应sermant配置文件中的service.meta.service',
+            inputEnvironmentName: '请输入环境名称',
+            environmentNotice: '该配置对应sermant配置文件中的service.meta.environment',
+            inputZoneName: '请输入区域名称',
+            zoneNotice: '该配置对应sermant配置文件中的service.meta.zone',
+            serviceInformation: '服务信息',
+            inputServiceName: '请输入服务名称',
+            serviceNotice: '微服务的名称，由微服务配置文件的dubbo.application.name、spring.applicaton.name确定',
+            configurationInformation: '配置项信息',
+            inputConfigurationGroup : '请输入配置项的group',
+            configurationNotice: '配置sermant原生插件配置时，自动生成，无需修改',
+            inputConfigurationName: '请输入配置项名称',
+            configurationContent: '配置内容',
+            inputConfigurationContent: '请输入配置内容',
+            configurationContentNotice: 'sermant原生插件需使用yaml格式',
+            trafficMatchingRule:'流量匹配规则',
+            rateLimitingRule:'限流规则',
+            circuitBreakerRule:'熔断规则',
+            bulkheadRule:'隔离规则',
+            faultInjectionRule:'错误注入',
+            retryRule:'重试',
+            systemLevelFlowControl:'系统级流控',
+            trafficTaggingRule:'流量标记规则',
+            loadBalancingRule:'负载均衡规则',
+            successfullyCreatedConfiguration:'新增配置成功',
+            failedToCreateConfiguration:'新增配置失败',
+            successfullyUpdatedConfiguration:'更新配置成功',
+            failedToUpdateConfiguration:'更新配置失败',
+            failedToObtainConfiguration:'获取配置失败',
+            submit: '提交',
+        }
+    },
+};
+
+const getSavedLanguage = () => {
+    return localStorage.getItem('language') || 'zh'; // 默认语言为英语
+};
+
+const i18n = createI18n({
+    locale: getSavedLanguage(),
+    fallbackLocale: getSavedLanguage(),
+    messages,
+});
+
+export const localeLanguage = reactive({
+    value: getSavedLanguage() == 'zh' ? zh : en,
+    language: getSavedLanguage()
+});
+
+export function switchLocale(lang: ('zh' | 'en')) {
+    if (lang === 'en') {
+        localeLanguage.value = en;
+    } else {
+        localeLanguage.value = zh;
+    }
+    localeLanguage.language = lang;
+    i18n.global.locale = lang;
+    localStorage.setItem('language', lang);
+}
+
+export default i18n;
\ No newline at end of file
diff --git a/sermant-backend/src/main/webapp/frontend/src/main.ts b/sermant-backend/src/main/webapp/frontend/src/main.ts
index 855ce52ba8..ae2443ec0c 100644
--- a/sermant-backend/src/main/webapp/frontend/src/main.ts
+++ b/sermant-backend/src/main/webapp/frontend/src/main.ts
@@ -5,7 +5,8 @@ import router from "./router"
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 
 import ElementPlus from 'element-plus'
-import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
+import translations from './composables/translations';
+import i18n from './composables/translations';
 
 
 import "~/styles/index.scss";
@@ -20,9 +21,11 @@ const app = createApp(App);
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
     app.component(key, component)
 }
-
-app.use(ElementPlus, {
-    locale: zhCn,
-})
+app.use(translations);
+app.use(i18n)
+app.use(ElementPlus);
 app.use(router);
+
+app.config.globalProperties.$t = i18n.global.t;
+
 app.mount("#app");
diff --git a/sermant-backend/src/main/webapp/frontend/src/views/ConfigInfo.vue b/sermant-backend/src/main/webapp/frontend/src/views/ConfigInfo.vue
index 07a4a2b689..9fd97f3ce2 100644
--- a/sermant-backend/src/main/webapp/frontend/src/views/ConfigInfo.vue
+++ b/sermant-backend/src/main/webapp/frontend/src/views/ConfigInfo.vue
@@ -1,155 +1,163 @@
 <template>
   <div style="width: 100%">
-    <el-page-header :title="'配置管理'" @back="goBack">
+    <el-page-header :title="$t('configInfo.configurationManagement')" @back="goBack">
       <template #content>
-        <span class="font-600 mr-3"> 配置详情 </span>
+        <span class="font-600 mr-3"> {{ $t('configInfo.configurationDetail') }} </span>
       </template>
     </el-page-header>
     <el-form :inline="true" :model="requestParam" label-width="auto" :rules="checkRule" ref="ruleFormRef"
              style="max-width: 80%; margin-top: 30px;margin-bottom: 15px; margin-left: 20px;">
-      <el-descriptions title="插件配置信息" style="margin-top: 15px;"></el-descriptions>
+      <el-descriptions :title="$t('configInfo.pluginInformation')" style="margin-top: 15px;"></el-descriptions>
       <el-form-item prop="pluginType">
         <div data-v-6e4bcd7a="" class="ep-input ep-input--large ep-input-group ep-input-group--prepend"
              style="width: auto;" v-if="!types.modifyFlay">
-          <div class="ep-input-group__prepend" color="#606266">插件类型</div>
+          <div class="ep-input-group__prepend" color="#606266">{{ $t('configInfo.type') }}</div>
         </div>
-        <el-select v-model="requestParam.pluginType" placeholder="请选择插件类型" size="large"
+        <el-select v-model="requestParam.pluginType" :placeholder="$t('configInfo.selectPlugin')" size="large"
                    :disabled="types.modifyFlay" @change="changePluginType()" v-if="!types.modifyFlay">
           <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
         </el-select>
         <el-input size="large" v-model="pluginName.name"
-                  placeholder="请选择插件类型"
+                  :placeholder="$t('configInfo.selectPlugin')"
                   class="input-style" :disabled="types.modifyFlay" @change="changePluginType()"
                   v-if="types.modifyFlay">
           <template #prepend>
-            <span color="#606266" class="form-text">插件类型</span>
+            <span color="#606266" class="form-text">{{ $t('configInfo.type') }}</span>
           </template>
         </el-input>
       </el-form-item>
       <el-descriptions v-if="requestParam.pluginType == 'flowcontrol' || requestParam.pluginType == 'loadbalancer'"
-                       title="规则信息" style="margin-top: 15px;"></el-descriptions>
+                       :title="$t('configInfo.ruleInformation')" style="margin-top: 15px;"></el-descriptions>
       <el-form-item prop="ruleType"
                     v-if="requestParam.pluginType == 'flowcontrol' || requestParam.pluginType == 'loadbalancer'">
         <div data-v-6e4bcd7a="" class="ep-input ep-input--large ep-input-group ep-input-group--prepend"
              style="width: auto;" v-if="!types.modifyFlay">
-          <div class="ep-input-group__prepend form-text" color="#606266">规则类型</div>
+          <div class="ep-input-group__prepend form-text" color="#606266">{{ $t('configInfo.ruleType') }}</div>
         </div>
-        <el-select placeholder="请选择规则类型" v-model="requestParam.ruleType" size="large"
+        <el-select :placeholder="$t('configInfo.selectRuleType')" v-model="requestParam.ruleType" size="large"
                    :disabled="types.modifyFlay" v-if="!types.modifyFlay"
                    @change="handlerChange(true)">
-          <el-option v-for="item in rules.value" :key="item.value" :label="item.label" :value="item.value"/>
+          <el-option v-for="item in rules" :key="item.value" :label="item.label" :value="item.value"/>
         </el-select>
         <el-input size="large" v-model="ruleName.name"
-                  placeholder="请选择规则类型"
+                  :placeholder="$t('configInfo.selectRuleType')"
                   class="input-style" :disabled="types.modifyFlay" @change="handlerChange(true)"
                   v-if="types.modifyFlay">
           <template #prepend>
-            <span color="#606266" class="form-text">规则类型</span>
+            <span color="#606266" class="form-text">{{ $t('configInfo.ruleType') }}</span>
           </template>
         </el-input>
-        <TooltipIcon content="插件支持的规则类型"/>
+        <TooltipIcon :content="$t('configInfo.ruleTypeSupportedInPlugin')"/>
       </el-form-item>
       <el-form-item prop="sceneName"
                     v-if="requestParam.pluginType == 'flowcontrol' || requestParam.pluginType == 'loadbalancer'">
-        <el-input size="large" v-model="requestParam.sceneName" placeholder="请输入规则场景名称"
+        <el-input size="large" v-model="requestParam.sceneName" :placeholder="$t('configInfo.inputSceneName')"
                   class="input-style" :disabled="types.modifyFlay" @change="handlerChange(false)">
           <template #prepend>
-            <span color="#606266" class="form-text">规则场景名称</span>
+            <span color="#606266" class="form-text">{{ $t('configInfo.sceneName') }}</span>
           </template>
         </el-input>
-        <TooltipIcon v-if="requestParam.pluginType == 'flowcontrol'" content="流量匹配和具体流控规则的场景名称一致时流控规则才会生效"/>
-        <TooltipIcon v-if="requestParam.pluginType == 'loadbalancer'" content="流量标记和负载均衡策略的场景一致时负载均衡策略生效"/>
+        <TooltipIcon v-if="requestParam.pluginType == 'flowcontrol'" :content="$t('configInfo.flowcontrolRuleNotice')"/>
+        <TooltipIcon v-if="requestParam.pluginType == 'loadbalancer'"
+                     :content="$t('configInfo.loadbalancerRuleNotice')"/>
       </el-form-item>
       <div v-if="(requestParam.pluginType != 'other' && requestParam.pluginType != 'flowcontrol'
       && requestParam.pluginType != 'tag-transmission') || types.configType == 'nacos'">
         <el-descriptions title="service.meta信息" style="margin-top: 15px;"></el-descriptions>
         <el-form-item v-if="types.configType == 'nacos'" prop="namespace">
-          <el-input size="large" v-model.trim="requestParam.namespace" placeholder="请输入命名空间"
+          <el-input size="large" v-model.trim="requestParam.namespace" :placeholder="$t('configInfo.inputProjectName')"
                     class="input-style" :disabled="types.modifyFlay">
             <template #prepend>
               <span color="#606266" class="form-text">project</span>
             </template>
           </el-input>
-          <TooltipIcon content="该配置对应sermant配置文件中的service.meta.project"/>
+          <TooltipIcon :content="$t('configInfo.projectNotice')"/>
         </el-form-item>
         <el-form-item prop="appName" v-if="requestParam.pluginType != 'other' && requestParam.pluginType != 'flowcontrol'
                       && requestParam.pluginType != 'tag-transmission'">
-          <el-input size="large" v-model.trim="requestParam.appName" placeholder="请输入应用名称"
+          <el-input size="large" v-model.trim="requestParam.appName"
+                    :placeholder="$t('configInfo.inputApplicationName')"
                     style="width: 90%; margin-right: 5px;" :disabled="types.modifyFlay" @change="handlerChange(false)">
             <template #prepend>
               <span color="#606266" class="form-text">application</span>
             </template>
           </el-input>
-          <TooltipIcon content="该配置对应sermant配置文件中的service.meta.application"/>
+          <TooltipIcon :content="$t('configInfo.applicationNotice')"/>
         </el-form-item>
         <el-form-item
             v-if="requestParam.pluginType == 'database-write-prohibition' || requestParam.pluginType == 'mq-consume-prohibition'">
-          <el-input size="large" v-model.trim="requestParam.serviceName" placeholder="请输入服务名称，为空时下发全局配置"
+          <el-input size="large" v-model.trim="requestParam.serviceName"
+                    :placeholder="$t('configInfo.inputServiceNameOrEmpty')"
                     class="input-style" :disabled="types.modifyFlay" @change="handlerChange(false)">
             <template #prepend>
               <span color="#606266">service</span>
             </template>
           </el-input>
-          <TooltipIcon content="该配置对应sermant配置文件中的service.meta.service"/>
+          <TooltipIcon :content="$t('configInfo.metaServiceNotice')"/>
         </el-form-item>
         <el-form-item v-if="requestParam.pluginType != 'other' && requestParam.pluginType != 'flowcontrol'
                       && requestParam.pluginType != 'tag-transmission'">
-          <el-input size="large" v-model.trim="requestParam.environment" placeholder="请输入环境名称"
+          <el-input size="large" v-model.trim="requestParam.environment"
+                    :placeholder="$t('configInfo.inputEnvironmentName')"
                     class="input-style" :disabled="types.modifyFlay" @change="handlerChange(false)">
             <template #prepend>
               <span color="#606266" class="form-text">environment</span>
             </template>
           </el-input>
-          <TooltipIcon content="该配置对应sermant配置文件中的service.meta.environment"/>
+          <TooltipIcon :content="$t('configInfo.environmentNotice')"/>
         </el-form-item>
         <el-form-item prop="zone"
                       v-if="requestParam.pluginType == 'database-write-prohibition' || requestParam.pluginType == 'mq-consume-prohibition'">
-          <el-input size="large" v-model.trim="requestParam.zone" placeholder="请输入区域名称"
+          <el-input size="large" v-model.trim="requestParam.zone" :placeholder="$t('configInfo.inputZoneName')"
                     class="input-style" :disabled="types.modifyFlay" @change="handlerChange(false)">
             <template #prepend>
               <span color="#606266" class="form-text">zone</span>
             </template>
           </el-input>
-          <TooltipIcon content="该配置对应sermant配置文件中的service.meta.zone"/>
+          <TooltipIcon :content="$t('configInfo.zoneNotice')"/>
         </el-form-item>
       </div>
       <div v-if="requestParam.pluginType != 'database-write-prohibition' && requestParam.pluginType != 'mq-consume-prohibition'
                        && requestParam.pluginType != 'removal' && requestParam.pluginType != 'other'
                        && requestParam.pluginType != 'tag-transmission'">
-        <el-descriptions title="服务信息" style="margin-top: 15px;">
+        <el-descriptions :title="$t('configInfo.serviceInformation')" style="margin-top: 15px;">
         </el-descriptions>
         <el-form-item prop="serviceName" v-if="requestParam.pluginType == 'flowcontrol'">
-          <el-input size="large" v-model.trim="requestParam.serviceName" placeholder="请输入服务名称"
+          <el-input size="large" v-model.trim="requestParam.serviceName"
+                    :placeholder="$t('configInfo.inputServiceName')"
                     class="input-style" :disabled="types.modifyFlay" @change="handlerChange(false)">
             <template #prepend>
               <span color="#606266" class="form-text">service</span>
             </template>
           </el-input>
-          <TooltipIcon content="微服务的名称，由微服务配置文件的dubbo.application.name、spring.applicaton.name确定"/>
+          <TooltipIcon :content="$t('configInfo.serviceNotice')"/>
         </el-form-item>
         <el-form-item v-if="requestParam.pluginType != 'flowcontrol'">
           <el-input v-if="requestParam.pluginType == 'router'" size="large" v-model.trim="requestParam.serviceName"
-                    placeholder="请输入服务名称，为空时下发全局配置" class="input-style" :disabled="types.modifyFlay"
+                    :placeholder="$t('configInfo.inputServiceNameOrEmpty')" class="input-style"
+                    :disabled="types.modifyFlay"
                     @change="handlerChange(false)">
             <template #prepend>
               <span color="#606266" class="form-text">service</span>
             </template>
           </el-input>
-          <el-input size="large" v-model.trim="requestParam.serviceName" placeholder="请输入服务名称"
+          <el-input size="large" v-model.trim="requestParam.serviceName"
+                    :placeholder="$t('configInfo.inputServiceName')"
                     class="input-style" :disabled="types.modifyFlay" @change="handlerChange(false)"
                     v-if="requestParam.pluginType != 'router'">
             <template #prepend>
               <span color="#606266" class="form-text">service</span>
             </template>
           </el-input>
-          <TooltipIcon content="微服务的名称，由微服务配置文件的dubbo.application.name、spring.applicaton.name确定"/>
+          <TooltipIcon :content="$t('configInfo.serviceNotice')"/>
         </el-form-item>
       </div>
       <div>
-        <el-descriptions title="配置项信息" style="margin-top: 15px;">
+        <el-descriptions :title="$t('configInfo.configurationInformation')" style="margin-top: 15px;">
         </el-descriptions>
         <el-form-item prop="group" v-if="requestParam.pluginType == 'other'">
-          <el-input size="large" v-model.trim="requestParam.group" placeholder="请输入配置项的group"
+          <el-input size="large" v-model.trim="requestParam.group"
+                    :placeholder="$t('configInfo.inputConfigurationGroup')"
                     class="input-style"
                     :disabled="types.modifyFlay || requestParam.pluginType !='other'"
                     @change="handlerChange(false)">
@@ -157,10 +165,11 @@
               <span color="#606266" class="form-text">group</span>
             </template>
           </el-input>
-          <TooltipIcon content="配置sermant原生插件配置时，自动生成，无需修改"/>
+          <TooltipIcon :content="$t('configInfo.configurationNotice')"/>
         </el-form-item>
         <el-form-item v-if="requestParam.pluginType != 'other'">
-          <el-input size="large" v-model.trim="requestParam.group" placeholder=""
+          <el-input size="large" v-model.trim="requestParam.group"
+                    :placeholder="$t('configInfo.inputConfigurationGroup')"
                     class="input-style"
                     :disabled="types.modifyFlay || requestParam.pluginType !='other'"
                     @change="handlerChange(false)">
@@ -168,10 +177,10 @@
               <span color="#606266" class="form-text">group</span>
             </template>
           </el-input>
-          <TooltipIcon content="配置sermant原生插件配置时，自动生成，无需修改"/>
+          <TooltipIcon :content="$t('configInfo.configurationNotice')"/>
         </el-form-item>
         <el-form-item prop="key" v-if="requestParam.pluginType == 'other'">
-          <el-input size="large" v-model.trim="requestParam.key" placeholder="请输入配置项名称"
+          <el-input size="large" v-model.trim="requestParam.key" :placeholder="$t('configInfo.inputConfigurationName')"
                     class="input-style"
                     :disabled="types.modifyFlay || requestParam.pluginType !='other'"
                     @change="handlerChange(false)">
@@ -179,7 +188,7 @@
               <span color="#606266" class="form-text">key</span>
             </template>
           </el-input>
-          <TooltipIcon content="配置sermant原生插件配置时，自动生成，无需修改"/>
+          <TooltipIcon :content="$t('configInfo.configurationNotice')"/>
         </el-form-item>
         <el-form-item v-if="requestParam.pluginType != 'other'">
           <el-input size="large" v-model.trim="requestParam.key" placeholder=""
@@ -190,22 +199,22 @@
               <span color="#606266" class="form-text">key</span>
             </template>
           </el-input>
-          <TooltipIcon content="配置sermant原生插件配置时，自动生成，无需修改"/>
+          <TooltipIcon :content="$t('configInfo.configurationNotice')"/>
         </el-form-item>
       </div>
-      <el-descriptions title="配置内容" style="margin-top: 15px;">
+      <el-descriptions :title="$t('configInfo.configurationContent')" style="margin-top: 15px;">
       </el-descriptions>
       <el-form-item style="display: flex;">
         <el-input v-model="requestParam.content" style="width: 90%;padding-right: 5px;" :autosize="{ minRows: 8 }"
                   type="textarea"
-                  placeholder="请输入配置内容"
+                  :placeholder="$t('configInfo.inputConfigurationContent')"
         />
-        <TooltipIcon content="sermant原生插件需使用yaml格式"/>
+        <TooltipIcon :content="$t('configInfo.configurationContentNotice')"/>
       </el-form-item>
       <div style="display: flex;align-items: center; margin-left: 30%; margin-top: 30px;width: 90%;">
         <el-button type="primary" size="large" style="width: 20%;" shouldAddSpace="true;"
                    @click="submit(ruleFormRef)">
-          提交
+          {{ $t('configInfo.submit') }}
         </el-button>
       </div>
     </el-form>
@@ -213,37 +222,61 @@
 </template>
 
 <script lang="ts" setup>
-import {onMounted, reactive, ref} from "vue";
+import {onMounted, reactive, ref, watch} from "vue";
 import {LocationQuery, useRouter} from "vue-router";
 import axios from "axios";
 import TooltipIcon from '../components/layouts/TooltipIcon.vue'
 import {ElMessage, FormInstance, FormRules} from "element-plus";
-import {resultCodeMap, options} from '../composables/config'
+import {options, resultCodeMap} from '~/composables/config'
+import i18n from "~/composables/translations";
 
 const ruleFormRef = ref<FormInstance>()
 
-const flowcontrolRules = [
-  {label: '流量匹配规则', value: 'matchGroup',},
-  {label: '限流规则', value: 'rateLimiting',},
-  {label: '熔断规则', value: 'circuitBreaker',},
-  {label: '隔离规则', value: 'bulkhead',},
-  {label: '错误注入', value: 'faultInjection',},
-  {label: '重试', value: 'retry',},
-  {label: '系统级流控', value: 'system',},
-]
+const flowcontrolRules = ref([
+  {label: '', value: ''},
+]);
 
-const pluginName = reactive({name: '路由插件配置'});
+const pluginName = reactive({name: ''});
 
-const ruleName = reactive({name: '流量匹配规则'});
+const ruleName = reactive({name: ''});
 
-const rules = reactive({
-  value: [{label: '流量匹配规则', value: 'matchGroup'}]
-});
+const rules = ref([
+  {label: i18n.global.t('configInfo.trafficMatchingRule'), value: 'matchGroup'}
+]);
+
+
+const loadbalancerRules = ref([
+  {label: i18n.global.t('configInfo.trafficTaggingRule'), value: 'matchGroup',},
+  {label: i18n.global.t('configInfo.loadBalancingRule'), value: 'loadbalance',}
+]);
+
+const updateFlowControlRules = () => {
+  flowcontrolRules.value = [
+    {label: i18n.global.t('configInfo.trafficMatchingRule'), value: 'matchGroup',},
+    {label: i18n.global.t('configInfo.rateLimitingRule'), value: 'rateLimiting',},
+    {label: i18n.global.t('configInfo.circuitBreakerRule'), value: 'circuitBreaker',},
+    {label: i18n.global.t('configInfo.bulkheadRule'), value: 'bulkhead',},
+    {label: i18n.global.t('configInfo.faultInjectionRule'), value: 'faultInjection',},
+    {label: i18n.global.t('configInfo.retryRule'), value: 'retry',},
+    {label: i18n.global.t('configInfo.systemLevelFlowControl'), value: 'system',},
+  ];
+}
 
-const loadbalancerRules = [
-  {label: '流量标记规则', value: 'matchGroup',},
-  {label: '负载均衡规则', value: 'loadbalance',}
-]
+const updateLoadbalancerRules = () => {
+  loadbalancerRules.value = [
+    {label: i18n.global.t('configInfo.trafficTaggingRule'), value: 'matchGroup',},
+    {label: i18n.global.t('configInfo.loadBalancingRule'), value: 'loadbalance',}
+  ];
+}
+
+const updateRules = () => {
+  const value = requestParam.pluginType;
+  if (value == "flowcontrol") {
+    rules.value = flowcontrolRules.value
+  } else if (value == "loadbalancer") {
+    rules.value = loadbalancerRules.value
+  }
+}
 
 const requestParam: ConfigInfo = reactive({
   pluginType: "",
@@ -294,7 +327,7 @@ const getConfig = () => {
     }
   }).catch(function () {
     ElMessage({
-      message: "获取配置失败",
+      message: i18n.global.t('configInfo.failedToObtainConfiguration'),
       type: "error",
     });
   });
@@ -306,6 +339,10 @@ const types = reactive({
 });
 
 onMounted(() => {
+  updateFlowControlRules();
+  updateLoadbalancerRules();
+  updateRules();
+  console.log(rules.value)
   const param: LocationQuery = router.currentRoute.value.query;
   requestParam.ruleType = "matchGroup";
   types.configType = <string>param.configType;
@@ -315,7 +352,7 @@ onMounted(() => {
   types.modifyFlay = true;
   requestParam.pluginType = <string>param.pluginType;
   changeRules();
-  pluginName.name = getLabelByValue(options, requestParam.pluginType);
+  pluginName.name = getLabelByValue(options.value, requestParam.pluginType);
   requestParam.group = <string>param.group;
   requestParam.key = <string>param.key;
   requestParam.environment = <string>param.environment;
@@ -335,22 +372,10 @@ onMounted(() => {
 });
 
 const changeRules = () => {
-  const value = requestParam.pluginType;
-  if (value == "flowcontrol") {
-    replaceArray(flowcontrolRules, rules.value);
-  } else if (value == "loadbalancer") {
-    replaceArray(loadbalancerRules, rules.value);
-  }
+  updateRules();
   handlerChange(true);
 }
 
-const replaceArray = (source: { label: string; value: string; }[], target: { label: string; value: string; }[]) => {
-  target.splice(0, target.length); // 清空数组 A
-  source.forEach(item => {
-    target.push(item); // 将数组 B 的内容添加到数组 A
-  });
-};
-
 const changePluginType = () => {
   changeRules();
   requestParam.ruleType = "matchGroup";
@@ -626,35 +651,49 @@ const handlerChange = (isChangeTemplate: boolean) => {
   }
 }
 
-const checkRule = reactive<FormRules>({
+const checkRule = reactive({
   appName: [
-    {required: true, message: '请输入应用名称', trigger: 'blur'}
+    {required: true, message: i18n.global.t('configInfo.inputApplicationName'), trigger: 'change'}
   ],
   pluginType: [
-    {required: true, message: '请选择插件类型', trigger: 'blur'}
+    {required: true, message: i18n.global.t('configInfo.selectPlugin'), trigger: 'change'}
   ],
   ruleType: [
-    {required: true, message: '请选择规则类型', trigger: 'blur'}
+    {required: true, message: i18n.global.t('configInfo.selectRuleType'), trigger: 'change'}
   ],
   sceneName: [
-    {required: true, message: '请输入场景名称', trigger: 'blur'}
+    {required: true, message: i18n.global.t('configInfo.inputSceneName'), trigger: 'change'}
   ],
   group: [
-    {required: true, message: '请输入group名称', trigger: 'change'}
+    {required: true, message: i18n.global.t('configInfo.inputConfigurationGroup'), trigger: 'change'}
   ],
   key: [
-    {required: true, message: '请输入配置key', trigger: 'change'}
+    {required: true, message: i18n.global.t('configInfo.inputConfigurationName'), trigger: 'change'}
   ],
-  nacos: [
-    {required: true, message: '请输入命名空间', trigger: 'blur'}
+  namespace: [
+    {required: true, message: i18n.global.t('configInfo.inputProjectName'), trigger: 'change'}
   ],
   zone: [
-    {required: true, message: '请输入区域名称', trigger: 'blur'}
+    {required: true, message: i18n.global.t('configInfo.inputZoneName'), trigger: 'change'}
   ],
   serviceName: [
-    {required: true, message: '请输入服务名称', trigger: 'blur'}
+    {required: true, message: i18n.global.t('configInfo.inputServiceName'), trigger: 'change'}
   ],
 });
+watch(() => i18n.global.locale, () => {
+  updateFlowControlRules();
+  updateLoadbalancerRules();
+  updateRules();
+  checkRule.appName[0].message = i18n.global.t('configInfo.inputApplicationName');
+  checkRule.pluginType[0].message = i18n.global.t('configInfo.selectPlugin');
+  checkRule.ruleType[0].message = i18n.global.t('configInfo.selectRuleType');
+  checkRule.sceneName[0].message = i18n.global.t('configInfo.inputSceneName');
+  checkRule.group[0].message = i18n.global.t('configInfo.inputConfigurationGroup');
+  checkRule.key[0].message = i18n.global.t('configInfo.inputConfigurationName');
+  checkRule.namespace[0].message = i18n.global.t('configInfo.inputProjectName');
+  checkRule.zone[0].message = i18n.global.t('configInfo.inputZoneName');
+  checkRule.serviceName[0].message = i18n.global.t('configInfo.inputServiceName');
+});
 
 const getLabelByValue = (arr: { label: string; value: string; }[], value: string) => {
   const option = arr.find(option => option.value === value);
@@ -688,12 +727,12 @@ const addConfig = () => {
   }).then(function (response) {
     if (response.data.code == "00") {
       ElMessage({
-        message: "新增配置成功",
+        message: i18n.global.t('configInfo.successfullyCreatedConfiguration'),
         type: "success",
       });
     } else if (response.data.code == "05") {
       ElMessage({
-        message: "新增配置失败",
+        message: i18n.global.t('configInfo.failedToCreateConfiguration'),
         type: "error",
       });
     } else {
@@ -704,7 +743,7 @@ const addConfig = () => {
     }
   }).catch(function () {
     ElMessage({
-      message: "新增配置失败",
+      message: i18n.global.t('configInfo.failedToCreateConfiguration'),
       type: "error",
     });
   });
@@ -719,12 +758,12 @@ const updateConfig = () => {
   }).then(function (response) {
     if (response.data.code == "00") {
       ElMessage({
-        message: "更新配置成功",
+        message: i18n.global.t('configInfo.successfullyUpdatedConfiguration'),
         type: "success",
       });
     } else if (response.data.code == "05") {
       ElMessage({
-        message: "更新配置失败",
+        message: i18n.global.t('configInfo.failedToUpdateConfiguration'),
         type: "error",
       });
     } else {
@@ -735,7 +774,7 @@ const updateConfig = () => {
     }
   }).catch(function () {
     ElMessage({
-      message: "更新配置失败",
+      message: i18n.global.t('configInfo.failedToUpdateConfiguration'),
       type: "error",
     });
   });
@@ -757,11 +796,13 @@ const updateConfig = () => {
 }
 
 .form-text {
-  width: 100px;text-align: center;
+  width: 100px;
+  text-align: center;
 }
 
 .input-style {
-  width: 90%;margin-right: 5px;
+  width: 90%;
+  margin-right: 5px;
 }
 
 :deep(.ep-form-item) {
diff --git a/sermant-backend/src/main/webapp/frontend/src/views/ConfigView.vue b/sermant-backend/src/main/webapp/frontend/src/views/ConfigView.vue
index 6c1ff56eb7..7e0ae961f1 100644
--- a/sermant-backend/src/main/webapp/frontend/src/views/ConfigView.vue
+++ b/sermant-backend/src/main/webapp/frontend/src/views/ConfigView.vue
@@ -1,76 +1,76 @@
 <template>
   <div style="width: 100%">
-    <el-page-header :title="'实例'" @back="goBack">
+    <el-page-header :title="$t('configView.instance')" @back="goBack">
       <template #content>
-        <span class="font-600 mr-3"> 配置管理 </span>
+        <span class="font-600 mr-3"> {{ $t('configView.configurationManagement') }} </span>
       </template>
     </el-page-header>
-    <el-descriptions class="ep-page-header__content" title="配置中心信息"
+    <el-descriptions class="ep-page-header__content" :title="$t('configView.configurationCenterInformation')"
                      style="margin-top: 30px; width: 800px;"></el-descriptions>
     <el-form :inline="true" style="margin: 15px 0 15px 0">
       <el-form-item>
         <el-input size="large" readonly disabled v-model.trim="configCenterInfo.dynamicConfigType">
-          <template #prepend><span color="#606266">配置中心类型</span></template>
+          <template #prepend><span color="#606266">{{ $t('configView.type') }}</span></template>
         </el-input>
       </el-form-item>
       <el-form-item>
         <el-input size="large" readonly disabled v-model.trim="configCenterInfo.serverAddress">
-          <template #prepend><span color="#606266">配置中心地址</span></template>
+          <template #prepend><span color="#606266">{{ $t('configView.address') }}</span></template>
         </el-input>
       </el-form-item>
       <el-form-item>
         <el-input size="large" readonly disabled v-model.trim="configCenterInfo.userName">
-          <template #prepend><span color="#606266">用户名称</span></template>
+          <template #prepend><span color="#606266">{{ $t('configView.user') }}</span></template>
         </el-input>
       </el-form-item>
     </el-form>
-    <el-descriptions title="配置信息" style="margin-top: 15px; width: 800px;font-weight:600;"></el-descriptions>
+    <el-descriptions :title=" $t('configView.configurationInformation')" style="margin-top: 15px; width: 800px;font-weight:600;"></el-descriptions>
     <el-form :inline="true" style="margin: 15px 0 15px 0">
       <el-form-item>
         <div data-v-6e4bcd7a="" class="ep-input ep-input--large ep-input-group ep-input-group--prepend"
              style="width: auto;">
-          <div class="ep-input-group__prepend" color="#606266">插件类型</div>
+          <div class="ep-input-group__prepend" color="#606266">{{ $t('configView.plugin') }}</div>
         </div>
-        <el-select v-model="defaultPluginType.value" placeholder="配置类型" size="large"
+        <el-select v-model="defaultPluginType.value" :placeholder="$t('configView.configType')" size="large"
                    @change="handlerChangePluginType">
           <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
         </el-select>
       </el-form-item>
       <el-form-item v-if="configCenterInfo.dynamicConfigType == 'nacos'" prop="namespace">
-        <el-input size="large" v-model.trim="requestParam.namespace" placeholder="请输入命名空间">
+        <el-input size="large" v-model.trim="requestParam.namespace" :placeholder="$t('configView.inputProjectName')">
           <template #prepend>
-            <span color="#606266">命名空间</span>
+            <span color="#606266">{{ $t('configView.project') }}</span>
           </template>
         </el-input>
       </el-form-item>
       <el-form-item v-if="requestParam.pluginType != 'other' && requestParam.pluginType != 'flowcontrol'">
-        <el-input size="large" v-model.trim="requestParam.appName" placeholder="请输入应用名称">
-          <template #prepend><span color="#606266">应用名称</span></template>
+        <el-input size="large" v-model.trim="requestParam.appName" :placeholder="$t('configView.inputApplicationName')">
+          <template #prepend><span color="#606266">{{ $t('configView.application') }}</span></template>
         </el-input>
       </el-form-item>
       <el-form-item v-if="requestParam.pluginType != 'other'">
-        <el-input size="large" v-model.trim="requestParam.serviceName" placeholder="请输入服务名称">
-          <template #prepend><span color="#606266">服务名称</span></template>
+        <el-input size="large" v-model.trim="requestParam.serviceName" :placeholder="$t('configView.inputServiceName')">
+          <template #prepend><span color="#606266">{{ $t('configView.service') }}</span></template>
         </el-input>
       </el-form-item>
       <el-form-item v-if="requestParam.pluginType != 'other' && requestParam.pluginType != 'flowcontrol'">
-        <el-input size="large" v-model.trim="requestParam.environment" placeholder="请输入环境名称">
-          <template #prepend><span color="#606266">环境名称</span></template>
+        <el-input size="large" v-model.trim="requestParam.environment" :placeholder="$t('configView.inputEnvironmentName')">
+          <template #prepend><span color="#606266">{{ $t('configView.environment') }}</span></template>
         </el-input>
       </el-form-item>
       <el-form-item
           v-if="requestParam.pluginType == 'mq-consume-prohibition' || requestParam.pluginType == 'database-write-prohibition'">
-        <el-input size="large" v-model.trim="requestParam.zone" placeholder="请输入区域名称">
-          <template #prepend><span color="#606266">区域名称</span></template>
+        <el-input size="large" v-model.trim="requestParam.zone" :placeholder="$t('configView.inputZoneName')">
+          <template #prepend><span color="#606266">{{ $t('configView.zone') }}</span></template>
         </el-input>
       </el-form-item>
       <el-form-item v-if="requestParam.pluginType == 'other'">
-        <el-input size="large" v-model.trim="requestParam.group" placeholder="请输入group">
+        <el-input size="large" v-model.trim="requestParam.group" :placeholder="$t('configView.inputGroup')">
           <template #prepend><span color="#606266">group</span></template>
         </el-input>
       </el-form-item>
       <el-form-item v-if="requestParam.pluginType == 'other'">
-        <el-input size="large" v-model.trim="requestParam.key" placeholder="请输入key">
+        <el-input size="large" v-model.trim="requestParam.key" :placeholder="$t('configView.inputKey')">
           <template #prepend><span color="#606266">key</span></template>
         </el-input>
       </el-form-item>
@@ -85,36 +85,37 @@
 
     <el-table :data="configInfos.configInfos" border style="width: 100%;" :header-cell-style="{'background':'#f5f7fa'}">
       <el-table-column v-if="configCenterInfo.dynamicConfigType == 'nacos'"
-                       column-key="namespace" align="center" prop="namespace" width="150px" label="命名空间"/>
-      <el-table-column column-key="appName" align="center" prop="appName" width="150px" label="应用名称"
+                       column-key="namespace" align="center" prop="namespace" width="150px" :label="$t('configView.project')"/>
+      <el-table-column column-key="appName" align="center" prop="appName" width="150px" :label="$t('configView.application')"
                        :filters="appNames"
                        :filter-method="filterHandler"/>
-      <el-table-column column-key="serviceName" align="center" prop="serviceName" width="300px" label="服务名称"
+      <el-table-column column-key="serviceName" align="center" prop="serviceName" width="300px" :label="$t('configView.service')"
                        :filters="serviceNames"
                        :filter-method="filterHandler"/>
-      <el-table-column column-key="environment" align="center" prop="environment" width="150px" label="环境名称"
+      <el-table-column column-key="environment" align="center" prop="environment" width="150px" :label="$t('configView.environment')"
                        :filters="environments"
                        :filter-method="filterHandler"/>
       <el-table-column
           v-if="currentPluginType.value == 'mq-consume-prohibition' || currentPluginType.value == 'database-write-prohibition'"
-          column-key="zone" align="center" prop="zone" width="150px" label="区域名称"
+          column-key="zone" align="center" prop="zone" width="150px" :label="$t('configView.zone')"
           style="background-color: rgba(147,197,253,.5)"/>
       <el-table-column column-key="group" align="center" prop="group" label="group"/>
       <el-table-column column-key="key" align="center" prop="key" label="key"/>
-      <el-table-column fixed="right" align="center" label="操作类型" width="120px">
+      <el-table-column fixed="right" align="center" :label="$t('configView.operation')" width="120px">
         <template #default="scope">
-          <el-tooltip content="查看" effect="light">
+          <el-tooltip :content="$t('configView.view')" effect="light">
             <el-button type="primary" @click="toModifyConfig(scope.row)" circle>
               <el-icon>
                 <View/>
               </el-icon>
             </el-button>
           </el-tooltip>
-          <el-popconfirm confirm-button-text="是" cancel-button-text="否" :icon="InfoFilled" icon-color="#626AEF"
-                         title="是否确认删除当前配置项?" @confirm="deleteConfig(scope.row, scope.$index)">
+          <el-popconfirm :confirm-button-text="$t('configView.yes')" :cancel-button-text="$t('configView.no')"
+                         :icon="InfoFilled" icon-color="#626AEF"
+                         :title="$t('configView.areYouSureToDeleteTheCurrentConfiguration')" @confirm="deleteConfig(scope.row, scope.$index)">
             <template #reference>
               <div style="display: inline;">
-                <el-tooltip content="删除" effect="light">
+                <el-tooltip content="$t('configView.delete')" effect="light">
                   <el-button type="danger" :icon="Delete" style="margin-left: 12px;" circle/>
                 </el-tooltip>
               </div>
@@ -125,7 +126,7 @@
     </el-table>
     <div style="display: flex;align-items: center; margin-top: 30px; width:100%;">
       <el-button type="primary" size="large" style="margin-left: 42.5%; width: 15%;" shouldAddSpace="true"
-                 @click="toAddConfig()">新增
+                 @click="toAddConfig()">{{$t('configView.create')}}
       </el-button>
     </div>
     <div class="pagination-div" style="margin-top: 30px;">
@@ -149,6 +150,7 @@ import axios from "axios";
 import {Delete, InfoFilled, Search} from '@element-plus/icons-vue'
 import {ElMessage, TableColumnCtx} from 'element-plus'
 import {resultCodeMap, options} from '../composables/config'
+import i18n from "~/composables/translations";
 
 const requestParam = reactive<ConfigInfo>({
   appName: "",
@@ -277,14 +279,14 @@ const fillEnvironments = () => {
 const getConfigList = () => {
   if (configCenterInfo.dynamicConfigType == 'nacos' && !requestParam.namespace) {
     ElMessage({
-      message: "命名空间不能为空",
+      message: i18n.global.t('configView.theProjectCannotBeEmpty'),
       type: "error",
     });
     return;
   }
   if (requestParam.pluginType == 'other' && !requestParam.group) {
     ElMessage({
-      message: "group不能为空",
+      message: i18n.global.t('configView.theGroupCannotBeEmpty'),
       type: "error",
     });
     return;
@@ -329,7 +331,7 @@ const getConfigList = () => {
         fillEnvironments();
       }
       ElMessage({
-        message: "获取配置成功",
+        message: i18n.global.t('configView.successfullyObtainedConfiguration'),
         type: "success",
       });
     } else {
@@ -341,7 +343,7 @@ const getConfigList = () => {
     }
   }).catch(function () {
     ElMessage({
-      message: "获取配置失败",
+      message: i18n.global.t('configView.failedObtainedConfiguration'),
       type: "error",
     });
   });
@@ -442,7 +444,7 @@ const deleteConfig = (row: ConfigInfo, index: number) => {
     const data = response.data;
     if (data.code == "00") {
       ElMessage({
-        message: "删除配置成功",
+        message: i18n.global.t('configView.successfullyDeletedConfiguration'),
         type: "success",
       });
       deleteRow(index);
@@ -454,7 +456,7 @@ const deleteConfig = (row: ConfigInfo, index: number) => {
     }
   }).catch(function () {
     ElMessage({
-      message: "删除配置失败",
+      message: i18n.global.t('configView.failedDeletedConfiguration'),
       type: "error",
     });
   });
diff --git a/sermant-backend/src/main/webapp/frontend/src/views/EventsConfigView.vue b/sermant-backend/src/main/webapp/frontend/src/views/EventsConfigView.vue
index 6993db795a..7d63a83a04 100644
--- a/sermant-backend/src/main/webapp/frontend/src/views/EventsConfigView.vue
+++ b/sermant-backend/src/main/webapp/frontend/src/views/EventsConfigView.vue
@@ -1,32 +1,32 @@
 <template>
   <div style="width: 100%">
-    <el-page-header :title="'事件'" @back="goBack">
+    <el-page-header :title="$t('eventConfigView.event')" @back="goBack">
       <template #content>
-        <span class="font-600 mr-3"> 事件配置 </span>
+        <span class="font-600 mr-3"> {{ $t('eventConfigView.configuration') }} </span>
       </template>
     </el-page-header>
-    <h2>WebHook 配置</h2>
+    <h2>{{ $t('eventConfigView.webHookConfiguration') }}</h2>
     <el-table :data="webhooks" :table-layout="'auto'">
-      <el-table-column prop="address" label="开关" width="80">
+      <el-table-column prop="address" :label="$t('eventConfigView.switch')" width="80">
         <template #default="scope">
-          <el-switch v-model="scope.row.enable" @change="setWebHook(scope.row)" />
+          <el-switch v-model="scope.row.enable" @change="setWebHook(scope.row)"/>
         </template>
       </el-table-column>
-      <el-table-column prop="name" label="类型" />
-      <el-table-column prop="url" label="地址">
+      <el-table-column prop="name" :label="$t('eventConfigView.type')"/>
+      <el-table-column prop="url" :label="$t('eventConfigView.address')">
         <template #default="scope">
           <el-input
-            @change="setWebHook(scope.row)"
-            @blur="closeEditWebHook(scope.row)"
-            v-model="scope.row.url"
-            :disabled="!scope.row.canEdit"
+              @change="setWebHook(scope.row)"
+              @blur="closeEditWebHook(scope.row)"
+              v-model="scope.row.url"
+              :disabled="!scope.row.canEdit"
           />
         </template>
       </el-table-column>
-      <el-table-column prop="address" label="操作">
+      <el-table-column prop="address" :label="$t('eventConfigView.operation')">
         <template #default="scope">
-          <el-button size="large" @click="editWebHook(scope.row)">编辑</el-button>
-          <el-button size="large" @click="testWebHook(scope.row)">测试连接</el-button>
+          <el-button size="large" @click="editWebHook(scope.row)">{{ $t('eventConfigView.edit') }}</el-button>
+          <el-button size="large" @click="testWebHook(scope.row)">{{ $t('eventConfigView.testConnection') }}</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -34,9 +34,10 @@
 </template>
 
 <script lang="ts" setup>
-import {onBeforeMount, reactive, ref} from "vue";
+import {onBeforeMount, reactive, ref, watch} from "vue";
 import {useRouter} from "vue-router";
 import axios from "axios";
+import i18n from "~/composables/translations";
 
 const router = useRouter();
 
@@ -47,14 +48,14 @@ const value1 = ref(true);
 const webhooks = reactive([
   {
     id: 0,
-    name: "飞书",
+    name: i18n.global.t('eventConfigView.feiShu'),
     url: "",
     enable: false,
     canEdit: false,
   },
   {
     id: 1,
-    name: "钉钉",
+    name: i18n.global.t('eventConfigView.dingTalk'),
     url: "",
     enable: false,
     canEdit: false,
@@ -79,25 +80,29 @@ onBeforeMount(() => {
 
 const getWebHooks = () => {
   axios
-    .get(`${window.location.origin}/sermant/event/webhooks`)
-    .then(function (response) {
-      ElMessage({
-        message: "获取WebHook配置成功",
-        type: "success",
-      });
-      const data = response.data;
-      for (let index = 0; index < data.webhooks.length; index++) {
-        webhooks[data.webhooks[index].id].url = data.webhooks[index].url;
-        webhooks[data.webhooks[index].id].enable = data.webhooks[index].enable;
-      }
-    })
-    .catch(function (error) {
-      ElMessage({
-        message: "获取WebHook配置失败",
-        type: "error",
+      .get(`${window.location.origin}/sermant/event/webhooks`)
+      .then(function (response) {
+        ElMessage({
+          message: i18n.global.t('eventConfigView.successfullyObtainedWebhookConfiguration'),
+          type: "success",
+        });
+        const data = response.data;
+        for (let index = 0; index < data.webhooks.length; index++) {
+          console.log(data.webhooks[index].id)
+          console.log(webhooks)
+          console.log(webhooks[0])
+          console.log(webhooks[data.webhooks[index].id])
+          webhooks[data.webhooks[index].id].url = data.webhooks[index].url;
+          webhooks[data.webhooks[index].id].enable = data.webhooks[index].enable;
+        }
+      })
+      .catch(function (error) {
+        ElMessage({
+          message: i18n.global.t('eventConfigView.failedToObtainWebHookConfiguration'),
+          type: "error",
+        });
+        console.log(error);
       });
-      console.log(error);
-    });
 };
 
 const editWebHook = (webhook) => {
@@ -112,50 +117,55 @@ const setWebHook = (webhook) => {
   console.log(webhook);
   webhook.canEdit = false;
   axios
-    .put(`${window.location.origin}/sermant/event/webhooks/` + webhook.id, {
-      url: webhook.url,
-      enable: webhook.enable,
-    })
-    .then(function (response) {
-      const data = response.data;
-      if (data) {
-        ElMessage({
-          message: "设置成功",
-          type: "success",
-        });
-      } else {
+      .put(`${window.location.origin}/sermant/event/webhooks/` + webhook.id, {
+        url: webhook.url,
+        enable: webhook.enable,
+      })
+      .then(function (response) {
+        const data = response.data;
+        if (data) {
+          ElMessage({
+            message: i18n.global.t('eventConfigView.success'),
+            type: "success",
+          });
+        } else {
+          ElMessage({
+            message: i18n.global.t('eventConfigView.failed'),
+            type: "error",
+          });
+        }
+      })
+      .catch(function (error) {
         ElMessage({
-          message: "设置失败",
+          message: i18n.global.t('eventConfigView.failed'),
           type: "error",
         });
-      }
-    })
-    .catch(function (error) {
-      ElMessage({
-        message: "设置失败",
-        type: "error",
+        console.log(error);
       });
-      console.log(error);
-    });
 };
 
 const testWebHook = (webhook) => {
   axios
-    .post(`${window.location.origin}/sermant/event/webhooks/test`, {
-      id: webhook.id,
-    })
-    .then(function (response) {
-      ElMessage({
-        message: "发起WebHook测试成功",
-        type: "success",
-      });
-    })
-    .catch(function (error) {
-      ElMessage({
-        message: "发起WebHook测试失败",
-        type: "error",
+      .post(`${window.location.origin}/sermant/event/webhooks/test`, {
+        id: webhook.id,
+      })
+      .then(function (response) {
+        ElMessage({
+          message: i18n.global.t('eventConfigView.successfullyInitiatedWebHookTest'),
+          type: "success",
+        });
+      })
+      .catch(function (error) {
+        ElMessage({
+          message: i18n.global.t('eventConfigView.failedToInitiateWebHookTest'),
+          type: "error",
+        });
+        console.log(error);
       });
-      console.log(error);
-    });
 };
+
+watch(() => i18n.global.locale, (newLocale, oldLocale) => {
+  webhooks[0].name = i18n.global.t('eventConfigView.feiShu');
+  webhooks[1].name = i18n.global.t('eventConfigView.dingTalk');
+});
 </script>
diff --git a/sermant-backend/src/main/webapp/frontend/src/views/EventsView.vue b/sermant-backend/src/main/webapp/frontend/src/views/EventsView.vue
index e93ba6dee5..16a1b61d85 100644
--- a/sermant-backend/src/main/webapp/frontend/src/views/EventsView.vue
+++ b/sermant-backend/src/main/webapp/frontend/src/views/EventsView.vue
@@ -1,19 +1,19 @@
 <template>
   <div style="width: 100%">
-    <el-page-header :title="'实例'" @back="goBack">
+    <el-page-header :title="$t('eventViews.instance')" @back="goBack">
       <template #content>
-        <span class="font-600 mr-3"> 事件监测 </span>
+        <span class="font-600 mr-3"> {{ $t('eventViews.eventMonitoring') }} </span>
       </template>
     </el-page-header>
     <el-row class="row-bg" justify="space-around">
       <el-col :span="8">
         <div class="grid-content">
           <el-card
-            shadow="hover"
-            style="color: #f56c6c; font-weight: 900"
-            class="count-card"
+              shadow="hover"
+              style="color: #f56c6c; font-weight: 900"
+              class="count-card"
           >
-            <p>紧急事件</p>
+            <p>{{ $t('eventViews.emergencyEvent') }}</p>
             <h1>{{ eventCount.emergency }}</h1>
           </el-card>
         </div>
@@ -21,11 +21,11 @@
       <el-col :span="8">
         <div class="grid-content">
           <el-card
-            shadow="hover"
-            style="color: #e6a23c; font-weight: 900"
-            class="count-card"
+              shadow="hover"
+              style="color: #e6a23c; font-weight: 900"
+              class="count-card"
           >
-            <p>重要事件</p>
+            <p>{{ $t('eventViews.importantEvent') }}</p>
             <h1>{{ eventCount.important }}</h1>
           </el-card>
         </div>
@@ -33,11 +33,11 @@
       <el-col :span="8">
         <div class="grid-content">
           <el-card
-            shadow="hover"
-            style="color: #409eff; font-weight: 900"
-            class="count-card"
+              shadow="hover"
+              style="color: #409eff; font-weight: 900"
+              class="count-card"
           >
-            <p>一般事件</p>
+            <p>{{ $t('eventViews.normalEvent') }}</p>
             <h1>{{ eventCount.normal }}</h1>
           </el-card>
         </div>
@@ -46,30 +46,30 @@
     <el-form :model="requestParam" :inline="true">
       <el-form-item style="width: 50%">
         <el-input
-          size="large"
-          :placeholder="searchOption[currentOption]"
-          v-model="inputValue"
-          autosize
-          @change="handleInputConfirm()"
+            size="large"
+            :placeholder="searchOption[currentOption]"
+            v-model="inputValue"
+            autosize
+            @change="handleInputConfirm()"
         >
           <template #prefix>
             <el-tag
-              v-for="tag in requestParam.service"
-              :key="tag"
-              class="mx-1"
-              closable
-              :disable-transitions="false"
-              @close="handleCloseServiceTag(tag)"
+                v-for="tag in requestParam.service"
+                :key="tag"
+                class="mx-1"
+                closable
+                :disable-transitions="false"
+                @close="handleCloseServiceTag(tag)"
             >
-              服务: {{ tag }}
+              {{ $t('eventViews.service') }}: {{ tag }}
             </el-tag>
             <el-tag
-              v-for="tag in requestParam.ip"
-              :key="tag"
-              class="mx-1"
-              closable
-              :disable-transitions="false"
-              @close="handleCloseIpTag(tag)"
+                v-for="tag in requestParam.ip"
+                :key="tag"
+                class="mx-1"
+                closable
+                :disable-transitions="false"
+                @close="handleCloseIpTag(tag)"
             >
               IP: {{ tag }}
             </el-tag>
@@ -78,12 +78,12 @@
             <el-dropdown>
               <span class="el-dropdown-link">
                 <el-icon class="el-icon--right">
-                  <arrow-down />
+                  <arrow-down/>
                 </el-icon>
               </span>
               <template #dropdown>
                 <el-dropdown-menu>
-                  <el-dropdown-item @click="currentOption = 0">服务</el-dropdown-item>
+                  <el-dropdown-item @click="currentOption = 0">{{ $t('eventViews.service') }}</el-dropdown-item>
                   <el-dropdown-item @click="currentOption = 1">IP</el-dropdown-item>
                 </el-dropdown-menu>
               </template>
@@ -93,143 +93,145 @@
       </el-form-item>
       <el-form-item>
         <el-date-picker
-          size="large"
-          v-model="timeRange.timeRange"
-          type="datetimerange"
-          :shortcuts="shortcuts"
-          range-separator="-"
-          start-placeholder="开始时间"
-          end-placeholder="结束时间"
-          value-format="x"
+            size="large"
+            v-model="timeRange.timeRange"
+            type="datetimerange"
+            :shortcuts="shortcuts"
+            range-separator="-"
+            :start-placeholder="$t('eventViews.startTime')"
+            :end-placeholder="$t('eventViews.endTime')"
+            value-format="x"
         />
       </el-form-item>
       <el-form-item>
         <el-button size="large" @click="getEvents">
-          <el-icon><Search /></el-icon>
+          <el-icon>
+            <Search/>
+          </el-icon>
         </el-button>
         <el-button
-          size="large"
-          @click="changeAutoRefreshState"
-          :type="autoRefresh ? 'success' : ''"
-          :loading="autoLoadingState"
-          >自动刷新
+            size="large"
+            @click="changeAutoRefreshState"
+            :type="autoRefresh ? 'success' : ''"
+            :loading="autoLoadingState"
+        >{{ $t('eventViews.autoRefresh') }}
         </el-button>
       </el-form-item>
     </el-form>
 
     <el-table
-      :data="events.events"
-      :default-sort="{ prop: 'time', order: 'descending' }"
-      style="width: 100%"
-      border
-      @filter-change="filterChange"
+        :data="events.events"
+        :default-sort="{ prop: 'time', order: 'descending' }"
+        style="width: 100%"
+        border
+        @filter-change="filterChange"
     >
       <el-table-column type="expand">
         <template #default="props">
           <div v-if="props.row.type === 'log'" m="4">
-            <el-descriptions class="margin-top" title="日志详情" :column="3" border>
+            <el-descriptions class="margin-top" :title="$t('eventViews.logDetail')" :column="3" border>
               <el-descriptions-item>
-                <template #label> 日志级别 </template>
+                <template #label> {{ $t('eventViews.logLevel') }}</template>
                 {{ props.row.info.logLevel }}
               </el-descriptions-item>
               <el-descriptions-item>
-                <template #label> 日志信息 </template>
+                <template #label> {{ $t('eventViews.logInformation') }}</template>
                 {{ props.row.info.logMessage }}
               </el-descriptions-item>
               <el-descriptions-item>
-                <template #label> 日志触发类 </template>
+                <template #label> {{ $t('eventViews.logRelatedClass') }}</template>
                 {{ props.row.info.logClass }}
               </el-descriptions-item>
               <el-descriptions-item>
-                <template #label> 日志触发方法 </template>
+                <template #label> {{ $t('eventViews.logRelatedMethod') }}</template>
                 {{ props.row.info.logMethod }}
               </el-descriptions-item>
               <el-descriptions-item>
-                <template #label> 日志触发行号 </template>
+                <template #label> {{ $t('eventViews.logLine') }}</template>
                 {{ props.row.info.logLineNumber }}
               </el-descriptions-item>
               <el-descriptions-item>
-                <template #label> 线程ID </template>
+                <template #label> {{ $t('eventViews.threadID') }}</template>
                 {{ props.row.info.logThreadId }}
               </el-descriptions-item>
               <el-descriptions-item>
-                <template #label> 异常类型 </template>
+                <template #label> {{ $t('eventViews.exceptionType') }}</template>
                 {{ props.row.info.logThrowable }}
               </el-descriptions-item>
             </el-descriptions>
           </div>
           <div v-if="props.row.type !== 'log'" m="4">
             <el-descriptions
-              class="margin-top"
-              title="事件详情"
-              :column="3"
-              :size="'large'"
-              border
+                class="margin-top"
+                :title="$t('eventViews.eventDetail')"
+                :column="3"
+                :size="'large'"
+                border
             >
               <el-descriptions-item>
-                <template #label> 描述信息 </template>
+                <template #label> {{ $t('eventViews.description') }}</template>
                 {{ props.row.info.description }}
               </el-descriptions-item>
             </el-descriptions>
           </div>
         </template>
       </el-table-column>
-      <el-table-column prop="eventInfo.name" label="事件" width="150">
+      <el-table-column prop="eventInfo.name" :label="$t('eventViews.event')" width="150">
         <template #default="scope">
           <div style="display: flex; align-items: center">
             <span v-if="scope.row.type === 'log'">
               {{ eventName[scope.row.info.logLevel] }}
             </span>
             <span v-if="scope.row.type !== 'log'">{{
-              eventName[scope.row.info.name]
-            }}</span>
+                eventName[scope.row.info.name]
+              }}</span>
           </div>
         </template>
       </el-table-column>
       <el-table-column
-        prop="level"
-        column-key="level"
-        label="事件级别"
-        :filters="eventLevel"
-        width="150"
+          prop="level"
+          column-key="level"
+          :label="$t('eventViews.level')"
+          :filters="eventLevel"
+          width="150"
       >
         <template #default="scope">
           <div style="display: flex; align-items: center">
             <span v-if="scope.row.level === 'emergency'">
-              <el-tag class="ml-2" type="danger">紧急</el-tag>
+              <el-tag class="ml-2" type="danger">{{ $t('eventViews.emergency') }}</el-tag>
             </span>
             <span v-if="scope.row.level === 'important'">
-              <el-tag class="ml-2" type="warning">重要</el-tag>
+              <el-tag class="ml-2" type="warning">{{ $t('eventViews.important') }}</el-tag>
             </span>
             <span v-if="scope.row.level === 'normal'">
-              <el-tag class="ml-2" type="info">一般</el-tag>
+              <el-tag class="ml-2" type="info">{{ $t('eventViews.normal') }}</el-tag>
             </span>
           </div>
         </template>
       </el-table-column>
       <el-table-column
-        prop="type"
-        column-key="type"
-        label="事件类型"
-        :filters="eventType"
-        width="150"
+          prop="type"
+          column-key="type"
+          :label="$t('eventViews.type')"
+          :filters="eventType"
+          width="150"
       >
         <template #default="scope">
           <div style="display: flex; align-items: center">
-            <span v-if="scope.row.type === 'log'"> 日志 </span>
-            <span v-if="scope.row.type === 'operation'">运行</span>
-            <span v-if="scope.row.type === 'governance'">治理</span>
+            <span v-if="scope.row.type === 'log'"> {{ $t('eventViews.log') }} </span>
+            <span v-if="scope.row.type === 'operation'">{{ $t('eventViews.operation') }}</span>
+            <span v-if="scope.row.type === 'governance'">{{ $t('eventViews.governance') }}</span>
           </div>
         </template>
       </el-table-column>
       <el-table-column
-        column-key="service"
-        prop="meta.service"
-        label="服务"
-        width="150"
+          column-key="service"
+          prop="meta.service"
+          :label="$t('eventViews.service')"
+          width="150"
       />
-      <el-table-column column-key="ip" prop="meta.ip" label="IP" width="150" />
-      <el-table-column column-key="scope" prop="scope" label="事件区域">
+      <el-table-column column-key="ip" prop="meta.ip" label="IP" width="150"/>
+      <el-table-column column-key="scope" prop="scope" :label="$t('eventViews.area')">
         <template #default="scope">
           <div style="display: flex; align-items: center">
             <span v-if="scope.row.type !== 'log'">
@@ -241,7 +243,7 @@
           </div>
         </template>
       </el-table-column>
-      <el-table-column prop="time" label="上报时间">
+      <el-table-column prop="time" :label="$t('eventViews.time')">
         <template #default="scope">
           <div style="display: flex; align-items: center">
             {{ time(scope.row.time) }}
@@ -251,21 +253,22 @@
     </el-table>
     <div class="pagination-div">
       <el-pagination
-        layout="prev, pager, next"
-        :page-count="displayState.totalPage"
-        :current-page="displayState.currentPage"
-        @current-change="pageChange"
+          layout="prev, pager, next"
+          :page-count="displayState.totalPage"
+          :current-page="displayState.currentPage"
+          @current-change="pageChange"
       />
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import {onBeforeMount, reactive, ref} from "vue";
+import {onBeforeMount, reactive, ref, watch} from "vue";
 import {useRouter} from "vue-router";
 import qs from "qs";
 import moment from "moment";
 import axios from "axios";
+import i18n from "~/composables/translations";
 
 onBeforeMount(() => {
   const time = new Date().getTime();
@@ -294,7 +297,7 @@ const logScope = (classNmae, method) => {
 };
 
 // 处理筛选标签
-const searchOption = ref(["服务", "IP"]);
+const searchOption = ref([i18n.global.t('eventViews.service'), "IP"]);
 const currentOption = ref(0);
 const inputValue = ref("");
 
@@ -326,15 +329,15 @@ const handleInputConfirm = () => {
 };
 
 const eventLevel = ref([
-  { text: "紧急", value: "emergency" },
-  { text: "重要", value: "important" },
-  { text: "一般", value: "normal" },
+  {text: i18n.global.t('eventViews.emergency'), value: "emergency"},
+  {text: i18n.global.t('eventViews.important'), value: "important"},
+  {text: i18n.global.t('eventViews.normal'), value: "normal"},
 ]);
 
 const eventType = ref([
-  { text: "日志", value: "log" },
-  { text: "治理", value: "governance" },
-  { text: "运行", value: "operation" },
+  {text: i18n.global.t('eventViews.log'), value: "log"},
+  {text: i18n.global.t('eventViews.governance'), value: "governance"},
+  {text: i18n.global.t('eventViews.operation'), value: "operation"},
 ]);
 
 const filterChange = (event: any) => {
@@ -349,9 +352,9 @@ const filterChange = (event: any) => {
 };
 
 // 时间选择快照
-const shortcuts = [
+const shortcuts = ref([
   {
-    text: "最近半小时",
+    text: i18n.global.t('eventViews.lastHalfHour'),
     value: () => {
       const end = new Date();
       const start = new Date();
@@ -360,7 +363,7 @@ const shortcuts = [
     },
   },
   {
-    text: "最近一小时",
+    text: i18n.global.t('eventViews.lastHour'),
     value: () => {
       const end = new Date();
       const start = new Date();
@@ -369,7 +372,7 @@ const shortcuts = [
     },
   },
   {
-    text: "最近一天",
+    text: i18n.global.t('eventViews.lastDay'),
     value: () => {
       const end = new Date();
       const start = new Date();
@@ -378,7 +381,7 @@ const shortcuts = [
     },
   },
   {
-    text: "最近三天",
+    text: i18n.global.t('eventViews.lastThreeDays'),
     value: () => {
       const end = new Date();
       const start = new Date();
@@ -387,7 +390,7 @@ const shortcuts = [
     },
   },
   {
-    text: "最近一周",
+    text: i18n.global.t('eventViews.lastWeek'),
     value: () => {
       const end = new Date();
       const start = new Date();
@@ -395,7 +398,7 @@ const shortcuts = [
       return [start, end];
     },
   },
-];
+]);
 
 // 自动刷新事件列表
 const autoRefresh = ref(false);
@@ -407,14 +410,14 @@ const autoRefreshTimer = ref(0);
 const changeAutoRefreshState = () => {
   if (autoRefresh.value) {
     ElMessage({
-      message: "关闭自动刷新",
+      message: i18n.global.t('eventViews.disableAutoRefresh'),
       type: "info",
     });
     autoRefresh.value = false;
     clearAutoRefreshTimer();
   } else {
     ElMessage({
-      message: "开启自动刷新",
+      message: i18n.global.t('eventViews.enableAutoRefresh'),
       type: "info",
     });
     autoRefresh.value = true;
@@ -487,41 +490,41 @@ interface eventsResponse {
   totalPage: number;
 }
 
-const events = reactive({ events: [] });
+const events = reactive({events: []});
 
 // 在此处添加事件
 const eventName = reactive({
   // Framework事件
-  SERMANT_START: "Agent启动",
-  SERMANT_STOP: "Agent停止",
-  SERMANT_TRANSFORM_SUCCESS: "增强成功",
-  SERMANT_TRANSFORM_FAILURE: "增强失败",
-  SERMANT_SERVICE_STOP: "服务停止",
-  SERMANT_SERVICE_START: "服务启动",
-  SERMANT_PLUGIN_LOAD: "插件加载",
+  SERMANT_START: i18n.global.t('eventViews.agentStartup'),
+  SERMANT_STOP: i18n.global.t('eventViews.agentShutdown'),
+  SERMANT_TRANSFORM_SUCCESS: i18n.global.t('eventViews.enhanceSuccess'),
+  SERMANT_TRANSFORM_FAILURE: i18n.global.t('eventViews.enhanceFail'),
+  SERMANT_SERVICE_STOP: i18n.global.t('eventViews.serviceStop'),
+  SERMANT_SERVICE_START: i18n.global.t('eventViews.serviceStart'),
+  SERMANT_PLUGIN_LOAD: i18n.global.t('eventViews.pluginInstall'),
   // 日志事件
-  WARNING: "警告日志",
-  SEVERE: "错误日志",
-  warning: "警告日志",
-  severe: "错误日志",
+  WARNING: i18n.global.t('eventViews.warningLog'),
+  SEVERE: i18n.global.t('eventViews.errorLog'),
+  warning: i18n.global.t('eventViews.warningLog'),
+  severe: i18n.global.t('eventViews.errorLog'),
   // Flowcontrol事件
-  TRAFFIC_LIMITING: "限流",
-  CIRCUIT_BREAKER: "熔断",
-  ADAPTIVE_OVERLOAD_PROTECTION: "自适应过载保护",
+  TRAFFIC_LIMITING: i18n.global.t('eventViews.rateLimiting'),
+  CIRCUIT_BREAKER: i18n.global.t('eventViews.circuitBreaker'),
+  ADAPTIVE_OVERLOAD_PROTECTION: i18n.global.t('eventViews.adaptiveOverloadProtection'),
   // ServiceRegistry事件
-  GRACEFUL_ONLINE_BEGIN: "无损上线开始",
-  GRACEFUL_ONLINE_END: "无损上线结束",
-  GRACEFUL_OFFLINE_BEGIN: "无损下线开始",
-  GRACEFUL_OFFLINE_END: "无损下线结束",
+  GRACEFUL_ONLINE_BEGIN: i18n.global.t('eventViews.gracefulOnlineBegin'),
+  GRACEFUL_ONLINE_END: i18n.global.t('eventViews.gracefulOnlineEnd'),
+  GRACEFUL_OFFLINE_BEGIN: i18n.global.t('eventViews.gracefulOfflineBegin'),
+  GRACEFUL_OFFLINE_END: i18n.global.t('eventViews.gracefulOfflineEnd'),
   // 路由插件事件
-  ROUTER_RULE_REFRESH: "路由插件规则刷新",
-  SAME_TAG_RULE_MATCH: "同标签优先规则匹配成功",
-  SAME_TAG_RULE_MISMATCH: "同标签优先规则匹配失败",
-  INSTANCE_REMOVAL: "实例摘除",
-  INSTANCE_RECOVERY: "实例恢复",
-  SPRINGBOOT_REGISTRY: "SpringBoot服务注册",
-  SPRINGBOOT_UNREGISTRY: "SpringBoot服务移除注册",
-  SPRINGBOOT_GRAY_CONFIG_REFRESH: "SpringBoot注册插件灰度规则刷新"
+  ROUTER_RULE_REFRESH: i18n.global.t('eventViews.routerRuleRefresh'),
+  SAME_TAG_RULE_MATCH: i18n.global.t('eventViews.sameTagRuleMatch'),
+  SAME_TAG_RULE_MISMATCH: i18n.global.t('eventViews.sameTagRuleMismatch'),
+  INSTANCE_REMOVAL: i18n.global.t('eventViews.instanceRemoval'),
+  INSTANCE_RECOVERY: i18n.global.t('eventViews.instanceRecovery'),
+  SPRINGBOOT_REGISTRY: i18n.global.t('eventViews.springbootRegistry'),
+  SPRINGBOOT_UNREGISTRY: i18n.global.t('eventViews.springbootUnRegistry'),
+  SPRINGBOOT_GRAY_CONFIG_REFRESH: i18n.global.t('eventViews.springbootGrayConfigRefresh'),
 });
 
 const displayState = reactive({
@@ -547,13 +550,13 @@ const requestParam = reactive({
 const pageChange = (pageNubmber: number) => {
   displayState.currentPage = pageNubmber;
   axios
-    .get(`${window.location.origin}/sermant/event/events/page`, {
-      params: { page: pageNubmber },
-    })
-    .then(function (response) {
-      const data = response.data;
-      events.events = data.events;
-    });
+      .get(`${window.location.origin}/sermant/event/events/page`, {
+        params: {page: pageNubmber},
+      })
+      .then(function (response) {
+        const data = response.data;
+        events.events = data.events;
+      });
   closeAutoRefresh();
 };
 
@@ -563,34 +566,122 @@ const getEvents = () => {
     requestParam.endTime = timeRange.timeRange[1];
   }
   axios
-    .get(`${window.location.origin}/sermant/event/events`, {
-      params: requestParam,
-      paramsSerializer: {
-        serialize: (params) => qs.stringify(params, { arrayFormat: "repeat" }),
-      },
-    })
-    .then(function (response) {
-      const data = response.data;
-      // 更新统计总数
-      eventCount.emergency = data.eventCount.emergency;
-      eventCount.important = data.eventCount.important;
-      eventCount.normal = data.eventCount.normal;
-      events.events = data.events;
-      displayState.totalPage = data.totalPage;
-      displayState.currentPage = 1;
-      ElMessage({
-        message: "获取事件成功",
-        type: "success",
-      });
-    })
-    .catch(function (error) {
-      console.log(error);
-      ElMessage({
-        message: "获取事件失败",
-        type: "error",
+      .get(`${window.location.origin}/sermant/event/events`, {
+        params: requestParam,
+        paramsSerializer: {
+          serialize: (params) => qs.stringify(params, {arrayFormat: "repeat"}),
+        },
+      })
+      .then(function (response) {
+        const data = response.data;
+        // 更新统计总数
+        eventCount.emergency = data.eventCount.emergency;
+        eventCount.important = data.eventCount.important;
+        eventCount.normal = data.eventCount.normal;
+        events.events = data.events;
+        displayState.totalPage = data.totalPage;
+        displayState.currentPage = 1;
+        ElMessage({
+          message: i18n.global.t('eventViews.successfullyObtainedEvents'),
+          type: "success",
+        });
+      })
+      .catch(function (error) {
+        console.log(error);
+        ElMessage({
+          message: i18n.global.t('eventViews.failedToObtainEvents'),
+          type: "error",
+        });
       });
-    });
 };
+
+watch(() => i18n.global.locale, (newLocale, oldLocale) => {
+  searchOption.value = [i18n.global.t('eventViews.service'), "IP"];
+  eventLevel.value = [
+    {text: i18n.global.t('eventViews.emergency'), value: "emergency"},
+    {text: i18n.global.t('eventViews.important'), value: "important"},
+    {text: i18n.global.t('eventViews.normal'), value: "normal"},
+  ];
+  eventType.value = [
+    {text: i18n.global.t('eventViews.log'), value: "log"},
+    {text: i18n.global.t('eventViews.governance'), value: "governance"},
+    {text: i18n.global.t('eventViews.operation'), value: "operation"},
+  ];
+  eventName.SERMANT_START=i18n.global.t('eventViews.agentStartup');
+  eventName.SERMANT_STOP=i18n.global.t('eventViews.agentShutdown');
+  eventName.SERMANT_TRANSFORM_SUCCESS=i18n.global.t('eventViews.enhanceSuccess');
+  eventName.SERMANT_TRANSFORM_FAILURE=i18n.global.t('eventViews.enhanceFail');
+  eventName.SERMANT_SERVICE_STOP=i18n.global.t('eventViews.serviceStop');
+  eventName.SERMANT_SERVICE_START=i18n.global.t('eventViews.serviceStart');
+  eventName.SERMANT_PLUGIN_LOAD=i18n.global.t('eventViews.pluginInstall');
+  eventName.WARNING=i18n.global.t('eventViews.warningLog');
+  eventName.SEVERE=i18n.global.t('eventViews.errorLog');
+  eventName.warning=i18n.global.t('eventViews.warningLog');
+  eventName.severe=i18n.global.t('eventViews.errorLog');
+  eventName.TRAFFIC_LIMITING=i18n.global.t('eventViews.rateLimiting');
+  eventName.CIRCUIT_BREAKER=i18n.global.t('eventViews.circuitBreaker');
+  eventName.ADAPTIVE_OVERLOAD_PROTECTION=i18n.global.t('eventViews.adaptiveOverloadProtection');
+  eventName.GRACEFUL_ONLINE_BEGIN=i18n.global.t('eventViews.gracefulOnlineBegin');
+  eventName.GRACEFUL_ONLINE_END=i18n.global.t('eventViews.gracefulOnlineEnd');
+  eventName.GRACEFUL_OFFLINE_BEGIN=i18n.global.t('eventViews.gracefulOfflineBegin');
+  eventName.GRACEFUL_OFFLINE_END=i18n.global.t('eventViews.gracefulOfflineEnd');
+  eventName.ROUTER_RULE_REFRESH=i18n.global.t('eventViews.routerRuleRefresh');
+  eventName.SAME_TAG_RULE_MATCH=i18n.global.t('eventViews.sameTagRuleMatch');
+  eventName.SAME_TAG_RULE_MISMATCH=i18n.global.t('eventViews.sameTagRuleMismatch');
+  eventName.INSTANCE_REMOVAL=i18n.global.t('eventViews.instanceRemoval');
+  eventName.INSTANCE_RECOVERY=i18n.global.t('eventViews.instanceRecovery');
+  eventName.SPRINGBOOT_REGISTRY=i18n.global.t('eventViews.springbootRegistry');
+  eventName.SPRINGBOOT_UNREGISTRY=i18n.global.t('eventViews.springbootUnRegistry');
+  eventName.SPRINGBOOT_GRAY_CONFIG_REFRESH=i18n.global.t('eventViews.springbootGrayConfigRefresh');
+  shortcuts.value = [
+    {
+      text: i18n.global.t('eventViews.lastHalfHour'),
+      value: () => {
+        const end = new Date();
+        const start = new Date();
+        start.setTime(start.getTime() - 3600 * 1000 * 0.5);
+        return [start, end];
+      },
+    },
+    {
+      text: i18n.global.t('eventViews.lastHour'),
+      value: () => {
+        const end = new Date();
+        const start = new Date();
+        start.setTime(start.getTime() - 3600 * 1000 * 1);
+        return [start, end];
+      },
+    },
+    {
+      text: i18n.global.t('eventViews.lastDay'),
+      value: () => {
+        const end = new Date();
+        const start = new Date();
+        start.setTime(start.getTime() - 3600 * 1000 * 24);
+        return [start, end];
+      },
+    },
+    {
+      text: i18n.global.t('eventViews.lastThreeDays'),
+      value: () => {
+        const end = new Date();
+        const start = new Date();
+        start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
+        return [start, end];
+      },
+    },
+    {
+      text: i18n.global.t('eventViews.lastWeek'),
+      value: () => {
+        const end = new Date();
+        const start = new Date();
+        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+        return [start, end];
+      },
+    },
+  ];
+  eventName
+});
 </script>
 
 <style scoped>
diff --git a/sermant-backend/src/main/webapp/frontend/src/views/InstancesView.vue b/sermant-backend/src/main/webapp/frontend/src/views/InstancesView.vue
index fc4678b388..310fad832c 100644
--- a/sermant-backend/src/main/webapp/frontend/src/views/InstancesView.vue
+++ b/sermant-backend/src/main/webapp/frontend/src/views/InstancesView.vue
@@ -1,15 +1,15 @@
 <template>
   <div style="width: 100%">
-    <el-page-header :title="'事件'" @back="goBack">
+    <el-page-header :title="$t('instanceView.event')" @back="goBack">
       <template #content>
-        <span class="font-600 mr-3"> 实例状态 </span>
+        <span class="font-600 mr-3"> {{ $t('instanceView.instanceStatus') }} </span>
       </template>
     </el-page-header>
     <el-row justify="space-around">
       <el-col :span="8">
         <div class="grid-content">
           <el-card shadow="hover" class="count-card">
-            <p>应用</p>
+            <p>{{ $t('instanceView.application') }}</p>
             <h1>{{ tagCount.applicationCount.length }}</h1>
           </el-card>
         </div>
@@ -17,7 +17,7 @@
       <el-col :span="8">
         <div class="grid-content">
           <el-card shadow="hover" class="count-card">
-            <p>服务</p>
+            <p>{{ $t('instanceView.service') }}</p>
             <h1>{{ tagCount.serviceCount.length }}</h1>
           </el-card>
         </div>
@@ -25,64 +25,64 @@
       <el-col :span="8">
         <div class="grid-content">
           <el-card shadow="hover" class="count-card">
-            <p>实例</p>
+            <p>{{ $t('instanceView.instance') }}</p>
             <h1>{{ state.total }}</h1>
           </el-card>
         </div>
       </el-col>
     </el-row>
     <el-input
-      size="large"
-      style="margin-bottom: 15px; width: 50%"
-      :placeholder="searchOption[currentOption]"
-      v-model="inputValue"
-      autosize
-      @change="handleInputConfirm()"
+        size="large"
+        style="margin-bottom: 15px; width: 50%"
+        :placeholder="searchOption[currentOption]"
+        v-model="inputValue"
+        autosize
+        @change="handleInputConfirm()"
     >
       <template #prefix>
         <el-tag
-          v-for="tag in serviceTag"
-          :key="tag"
-          class="mx-1"
-          closable
-          :disable-transitions="false"
-          @close="handleCloseServiceTag(tag)"
+            v-for="tag in serviceTag"
+            :key="tag"
+            class="mx-1"
+            closable
+            :disable-transitions="false"
+            @close="handleCloseServiceTag(tag)"
         >
-          服务: {{ tag }}
+          {{ $t('instanceView.service') }}: {{ tag }}
         </el-tag>
         <el-tag
-          v-for="tag in ipTag"
-          :key="tag"
-          class="mx-1"
-          closable
-          :disable-transitions="false"
-          @close="handleCloseIpTag(tag)"
+            v-for="tag in ipTag"
+            :key="tag"
+            class="mx-1"
+            closable
+            :disable-transitions="false"
+            @close="handleCloseIpTag(tag)"
         >
           IP: {{ tag }}
         </el-tag>
         <el-tag
-          v-for="tag in versionTag"
-          :key="tag"
-          class="mx-1"
-          closable
-          :disable-transitions="false"
-          @close="handleCloseVersionTag(tag)"
+            v-for="tag in versionTag"
+            :key="tag"
+            class="mx-1"
+            closable
+            :disable-transitions="false"
+            @close="handleCloseVersionTag(tag)"
         >
-          版本:{{ tag }}
+          {{ $t('instanceView.version') }}:{{ tag }}
         </el-tag>
       </template>
       <template #prepend>
         <el-dropdown>
           <span class="el-dropdown-link">
             <el-icon class="el-icon--right">
-              <arrow-down />
+              <arrow-down/>
             </el-icon>
           </span>
           <template #dropdown>
             <el-dropdown-menu>
-              <el-dropdown-item @click="currentOption = 0">服务</el-dropdown-item>
+              <el-dropdown-item @click="currentOption = 0">{{ $t('instanceView.service') }}</el-dropdown-item>
               <el-dropdown-item @click="currentOption = 1">IP</el-dropdown-item>
-              <el-dropdown-item @click="currentOption = 2">版本</el-dropdown-item>
+              <el-dropdown-item @click="currentOption = 2">{{ $t('instanceView.version') }}</el-dropdown-item>
             </el-dropdown-menu>
           </template>
         </el-dropdown>
@@ -90,33 +90,34 @@
       <template #append>
         <el-button @click="search">
           <el-icon :color="'#000000'">
-            <Search />
+            <Search/>
           </el-icon>
         </el-button>
       </template>
     </el-input>
     <div>
       <el-table :data="state.tableData" style="width: 100%" :border="true" stripe>
-        <el-table-column label="状态" prop="health" width="100">
+        <el-table-column :label="$t('instanceView.status')" prop="health" width="100">
           <template #default="scope">
             <div class="dot normal-dot" v-if="scope.row.health"></div>
             <div class="dot abnormal-dot" v-if="!scope.row.health"></div>
           </template>
         </el-table-column>
-        <el-table-column prop="service" label="服务" width="120"> </el-table-column>
-        <el-table-column prop="instanceId" label="实例ID" width="320"> </el-table-column>
-        <el-table-column prop="version" label="版本" width="120"> </el-table-column>
-        <el-table-column prop="ipAddress" label="IP" width="180"> </el-table-column>
-        <el-table-column prop="heartbeatTime" label="心跳时间" width="180">
+        <el-table-column prop="service" :label="$t('instanceView.service')" width="120"></el-table-column>
+        <el-table-column prop="instanceId" :label="$t('instanceView.instanceID')" width="320"></el-table-column>
+        <el-table-column prop="version" :label="$t('instanceView.version')" width="120"></el-table-column>
+        <el-table-column prop="ipAddress" label="IP" width="180"></el-table-column>
+        <el-table-column prop="heartbeatTime" :label="$t('instanceView.heartbeat')" width="180">
         </el-table-column>
-        <el-table-column label="插件">
+        <el-table-column :label="$t('instanceView.plugin')">
           <template #default="props">
             <div class="plugin-box">
               <el-tag
-                class="mx-1"
-                v-for="(plugin, index) in props.row.pluginInfoMap"
-                :key="index"
-                >{{ plugin.name }}:{{ plugin.version }}</el-tag
+                  class="mx-1"
+                  v-for="(plugin, index) in props.row.pluginInfoMap"
+                  :key="index"
+              >{{ plugin.name }}:{{ plugin.version }}
+              </el-tag
               >
             </div>
           </template>
@@ -124,10 +125,10 @@
       </el-table>
       <div class="pagination-div">
         <el-pagination
-          layout="prev, pager, next"
-          :total="state.total"
-          @current-change="pageChange"
-          :current-page="state.currentPage"
+            layout="prev, pager, next"
+            :total="state.total"
+            @current-change="pageChange"
+            :current-page="state.currentPage"
         >
         </el-pagination>
       </div>
@@ -136,13 +137,13 @@
 </template>
 
 <script setup lang="ts">
-import {onMounted, reactive, ref} from "vue";
+import {computed, onMounted, reactive, ref, watch} from "vue";
 import {useRouter} from "vue-router";
 import axios from "axios";
-
 import moment from "moment";
+import i18n from "~/composables/translations";
 
-// 路由
+// router
 const router = useRouter();
 
 onMounted(() => {
@@ -153,22 +154,30 @@ const goBack = () => {
   router.push("/events");
 };
 
-// 格式转换
+// format conversion
 const time = (value) => {
   return moment(value).format("YYYY-MM-DD HH:mm:ss");
 };
 
-// 处理筛选标签
-const searchOption = ref(["服务", "IP", "版本"]);
+// handler filter labels
+const searchOption = ref([i18n.global.t('instanceView.service'), "IP", i18n.global.t('instanceView.version')]);
 const currentOption = ref(0);
 const inputValue = ref("");
 
-// 过滤参数
+// Filter parameters
 const applicationTag = reactive([]);
 const serviceTag = reactive([]);
 const ipTag = reactive([]);
 const versionTag = reactive([]);
 
+watch(() => i18n.global.locale, (newLocale, oldLocale) => {
+  searchOption.value = [
+    i18n.global.t('instanceView.service'),
+    'IP',
+    i18n.global.t('instanceView.version'),
+  ];
+});
+
 const handleCloseApplicationTag = (tag: string) => {
   applicationTag.splice(applicationTag.indexOf(tag), 1);
   search();
@@ -209,7 +218,7 @@ const handleInputConfirm = () => {
   search();
 };
 
-// 各标签数据统计
+// Statistics of data for each label
 const tagCount = reactive({
   applicationCount: [],
   serviceCount: [],
@@ -269,44 +278,45 @@ async function getTableData() {
   try {
     state.loading = true;
     axios
-      .get(`${window.location.origin}/sermant/getPluginsInfo`)
-      .then(function (res) {
-        // 清理统计服务
-        tagCount.serviceCount = [];
-        innerData = res.data;
-        innerData.forEach((item) => {
-          if (item.health) {
-            state.normalCount++;
-          } else {
-            state.abnormalCount++;
-          }
-          // 统计服务数
-          if (tagCount.serviceCount.indexOf(item.service) === -1) {
-            tagCount.serviceCount.push(item.service);
-          }
-        });
-        showData = JSON.parse(JSON.stringify(res.data));
-        state.total = showData.length;
-        const result = JSON.parse(JSON.stringify(showData.slice(0, state.pageSize)));
-        state.tableData = handle(result);
-        ElMessage({
-          message: "获取实例数据成功",
-          type: "success",
+        .get(`${window.location.origin}/sermant/getPluginsInfo`)
+        .then(function (res) {
+          // Clean up statistical services
+          tagCount.serviceCount = [];
+          innerData = res.data;
+          innerData.forEach((item) => {
+            if (item.health) {
+              state.normalCount++;
+            } else {
+              state.abnormalCount++;
+            }
+            // Number of statistical services
+            if (tagCount.serviceCount.indexOf(item.service) === -1) {
+              tagCount.serviceCount.push(item.service);
+            }
+          });
+          showData = JSON.parse(JSON.stringify(res.data));
+          state.total = showData.length;
+          const result = JSON.parse(JSON.stringify(showData.slice(0, state.pageSize)));
+          state.tableData = handle(result);
+          ElMessage({
+            message: i18n.global.t('instanceView.successfullyObtainedInstances'),
+            type: "success",
+          });
+        })
+        .catch(function (error) {
+          ElMessage({
+            message: i18n.global.t('instanceView.failedToObtainInstances'),
+            type: "error",
+          });
+          console.log(error);
         });
-      })
-      .catch(function (error) {
-        ElMessage({
-          message: "获取实例数据失败",
-          type: "error",
-        });
-        console.log(error);
-      });
   } catch (err) {
     console.log(err);
   } finally {
     state.loading = false;
   }
 }
+
 function handle(result: any[]) {
   result.forEach((item: any) => {
     if (item.ip instanceof Array) {
@@ -322,28 +332,29 @@ function pageChange(page: number) {
   state.currentPage = page;
   if (page * state.pageSize <= showData.length) {
     const result = JSON.parse(
-      JSON.stringify(showData.slice((page - 1) * state.pageSize, page * state.pageSize))
+        JSON.stringify(showData.slice((page - 1) * state.pageSize, page * state.pageSize))
     );
     state.tableData = handle(result);
   } else {
     const result = JSON.parse(
-      JSON.stringify(showData.slice((page - 1) * state.pageSize))
+        JSON.stringify(showData.slice((page - 1) * state.pageSize))
     );
     state.tableData = handle(result);
   }
 }
 
 function search() {
+  console.log(searchOption)
   state.loading = true;
   showData = [];
   tagCount.serviceCount = [];
   innerData.forEach((item) => {
     let isMatch = true;
-    // 筛选服务
+    // Filtering Services
     if (serviceTag.length !== 0) {
       isMatch = isMatch && serviceTag.indexOf(item.service) !== -1;
     }
-    // 筛选IP
+    // Filter IP
     if (ipTag.length !== 0) {
       let containIp = false;
       for (let ip of item.ip) {
@@ -354,12 +365,12 @@ function search() {
       }
       isMatch = isMatch && containIp;
     }
-    // 筛选版本
+    // Filter version
     if (versionTag.length !== 0) {
       isMatch = isMatch && versionTag.indexOf(item.version) !== -1;
     }
     if (isMatch) {
-      // 统计服务数
+      // Number of statistical services
       if (tagCount.serviceCount.indexOf(item.service) === -1) {
         tagCount.serviceCount.push(item.service);
       }
@@ -402,6 +413,7 @@ function searchHealth(health: string) {
   margin: 5px;
   width: 100%;
 }
+
 .grid-content {
   text-align: center;
   display: flex;