diff --git a/src/components/common/Pagination.vue b/src/components/common/Pagination.vue
index 0c02f0a9..f3ecd733 100644
--- a/src/components/common/Pagination.vue
+++ b/src/components/common/Pagination.vue
@@ -26,7 +26,7 @@
 </template>
 
 <script>
-import { defaultPageSize, storageKey } from '@/utils/constants'
+import { defaultPageSize, storageKey, ZH, EN } from '@/utils/constants'
 import { urlParamsHandler, overwriteUrl } from '@/utils/tools'
 import { ref } from 'vue'
 import { useRoute } from 'vue-router'
@@ -64,9 +64,9 @@ export default {
     const { query } = useRoute()
     const pageSize = ref(defaultPageSize)
     const currentPageNo = ref(props.storePageNoOnUrl ? (query.pageNo || (props.pageObj.pageNo || 1)) : (props.pageObj.pageNo || 1))
-    const language = localStorage.getItem(storageKey.language) || 'en' // 初始未选择默认 en 英文
+    const language = localStorage.getItem(storageKey.language) || EN // 初始未选择默认 en 英文
     let locale = en
-    if (language === 'cn') {
+    if (language === ZH) {
       locale = cn
     }
     return {
diff --git a/src/components/common/TimeRange/DateTimeRange.vue b/src/components/common/TimeRange/DateTimeRange.vue
index 9a17a55e..23af905d 100644
--- a/src/components/common/TimeRange/DateTimeRange.vue
+++ b/src/components/common/TimeRange/DateTimeRange.vue
@@ -81,7 +81,7 @@
 
 <script>
 import { ref, computed, watch, reactive } from 'vue'
-import { storageKey } from '@/utils/constants'
+import { EN, storageKey, ZH } from '@/utils/constants'
 import { getMillisecond, millTimestampDiffFromTz, timestampToList } from '@/utils/date-util'
 import { useStore } from 'vuex'
 import ElConfigProvider from 'element-plus'
@@ -299,9 +299,9 @@ export default {
         })
       }
     }
-    const language = localStorage.getItem(storageKey.language) || 'en' // 初始未选择默认 en 英文
+    const language = localStorage.getItem(storageKey.language) || EN // 初始未选择默认 en 英文
     let locale = en
-    if (language === 'cn') {
+    if (language === ZH) {
       locale = cn
     }
 
diff --git a/src/components/common/popBox/TopToolMoreOptions.vue b/src/components/common/popBox/TopToolMoreOptions.vue
index 74a092c6..10d88712 100644
--- a/src/components/common/popBox/TopToolMoreOptions.vue
+++ b/src/components/common/popBox/TopToolMoreOptions.vue
@@ -58,7 +58,7 @@
 
 <script>
 import axios from 'axios'
-import { storageKey } from '@/utils/constants'
+import { storageKey, EN } from '@/utils/constants'
 
 export default {
   name: 'TopToolMoreOptions',
@@ -108,7 +108,7 @@ export default {
         if (this.paramsType) {
           form.append('type', this.paramsType)
         }
-        form.append('language', localStorage.getItem(storageKey.language) ? localStorage.getItem(storageKey.language) : 'en')
+        form.append('language', localStorage.getItem(storageKey.language) ? localStorage.getItem(storageKey.language) : EN)
         axios.post(this.importUrl, form, { 'Content-Type': 'multipart/form-data' }).then(response => {
           if (response.status === 200 && response.data.msg === 'success') {
             this.$message({ duration: 2000, type: 'success', message: this.$t('tip.importSuccess') })
@@ -128,7 +128,7 @@ export default {
       this.importFile = null
     },
     downloadTemplate () {
-      const language = localStorage.getItem(storageKey.language) || 'en' // 初始未选择默认 en 英文
+      const language = localStorage.getItem(storageKey.language) || EN // 初始未选择默认 en 英文
       const fileName = this.exportFileName + '-' + this.$t('overall.template') + '-' + this.getTimeString() + '.json'
 
       let url = null
@@ -159,7 +159,7 @@ export default {
         })
       }
       params.pageSize = -1
-      params.language = localStorage.getItem(storageKey.language) || 'en'
+      params.language = localStorage.getItem(storageKey.language) || EN
 
       this.export(this.exportUrl, params, this.exportFileName + '-' + this.getTimeString() + '.json')
       this.closeDialog()
diff --git a/src/components/layout/Header.vue b/src/components/layout/Header.vue
index 895635cf..abd77b8e 100644
--- a/src/components/layout/Header.vue
+++ b/src/components/layout/Header.vue
@@ -13,12 +13,12 @@
           <template #dropdown>
             <el-dropdown-menu>
               <el-dropdown-item>
-                <div id="header-to-english" :style="language === 'en'?'color:#0091ff':''" @click="changeLocal('en')">
+                <div id="header-to-english" :style="language === EN?'color:#0091ff':''" @click="changeLocal(EN)">
                   English
                 </div>
               </el-dropdown-item>
               <el-dropdown-item>
-                <div id="header-to-chinese" :style="language === 'cn'?'color:#0091ff':''" @click="changeLocal('cn')">
+                <div id="header-to-chinese" :style="language === ZH?'color:#0091ff':''" @click="changeLocal(ZH)">
                   中文
                 </div>
               </el-dropdown-item>
@@ -196,7 +196,9 @@ import {
   networkTable,
   operationType,
   storageKey,
-  wholeScreenRouterMapping
+  wholeScreenRouterMapping,
+  ZH,
+  EN
 } from '@/utils/constants'
 import { api } from '@/utils/api'
 import { ref } from 'vue'
@@ -234,7 +236,7 @@ export default {
     return {
       username: localStorage.getItem(storageKey.username),
       nickName: localStorage.getItem(storageKey.nickName),
-      language: localStorage.getItem(storageKey.language) ? localStorage.getItem(storageKey.language) : 'en',
+      language: localStorage.getItem(storageKey.language) ? localStorage.getItem(storageKey.language) : EN,
       showChangePin: false,
       from: '', // entity类型
       changePassForm: {
@@ -296,7 +298,9 @@ export default {
       curTabState: curTabState,
       urlChangeParams: {},
       wholeScreenRouterMapping,
-      logo: 'images/logo-header.svg'
+      logo: 'images/logo-header.svg',
+      ZH,
+      EN
     }
   },
   computed: {
diff --git a/src/components/table/detection/GeneralSettings.vue b/src/components/table/detection/GeneralSettings.vue
index 2d0789ff..351daafd 100644
--- a/src/components/table/detection/GeneralSettings.vue
+++ b/src/components/table/detection/GeneralSettings.vue
@@ -11,7 +11,7 @@
           <div class="block-mode-title">{{ $t('detection.policy.indicatorMatch') }}</div>
           <div class="block-mode-content">
             {{ $t('detection.policy.indicatorMatchIntroduce') }}
-            <div v-if="language==='cn'" style="color: rgba(0,0,0,0)">0</div>
+            <div v-if="language===ZH" style="color: rgba(0,0,0,0)">0</div>
           </div>
           <div :class="settingObj.ruleType===detectionRuleType.indicator?'block-mode-btn-active':'block-mode-btn'"
                @click="selectMode(detectionRuleType.indicator)">{{ $t('overall.select') }}
@@ -109,7 +109,7 @@
 </template>
 
 <script>
-import { detectionRuleType, storageKey, detectionUnitList } from '@/utils/constants'
+import { detectionRuleType, storageKey, detectionUnitList, ZH, EN } from '@/utils/constants'
 import { switchStatus } from '@/utils/tools'
 
 export default {
@@ -160,7 +160,8 @@ export default {
           }
         ]
       },
-      language: 'en'
+      language: EN,
+      ZH
     }
   },
   watch: {
@@ -183,7 +184,7 @@ export default {
   methods: {
     switchStatus,
     initData () {
-      this.language = localStorage.getItem(storageKey.language) || 'en'
+      this.language = localStorage.getItem(storageKey.language) || EN
       this.categoryList = detectionUnitList.categoryList
       this.eventTypeList = detectionUnitList.eventTypeList
     },
diff --git a/src/i18n/index.js b/src/i18n/index.js
index f5f1a0cd..2c7c4e9d 100644
--- a/src/i18n/index.js
+++ b/src/i18n/index.js
@@ -1,10 +1,10 @@
 import { createI18n } from 'vue-i18n/index'
-import { storageKey } from '@/utils/constants'
+import { storageKey, EN } from '@/utils/constants'
 import { getI18n } from '@/utils/api'
 import store from '@/store'
 
 const i18n = createI18n({
-  locale: localStorage.getItem(storageKey.language) || 'en'
+  locale: localStorage.getItem(storageKey.language) || EN
 })
 export async function loadI18n () {
   if (!store.state.i18n) {
diff --git a/src/mixins/table.js b/src/mixins/table.js
index db396b7e..5e2fe023 100644
--- a/src/mixins/table.js
+++ b/src/mixins/table.js
@@ -1,4 +1,4 @@
-import { chartTableOrderOptionsMapping, storageKey, knowledgeCategoryValue } from '@/utils/constants'
+import { chartTableOrderOptionsMapping, storageKey, knowledgeCategoryValue, ZH } from '@/utils/constants'
 import { getWidthByLanguage } from '@/utils/tools'
 import { api } from '@/utils/api'
 import axios from 'axios'
@@ -58,7 +58,7 @@ export default {
         const language = localStorage.getItem(storageKey.language)
         // 文字所占宽度，一个英文字母占7px，中文16px
         let num = getWidthByLanguage(language) || 7
-        if (language !== 'cn') {
+        if (language !== ZH) {
           num = num + 1 // 最后一位加空格
         }
 
diff --git a/src/utils/constants.js b/src/utils/constants.js
index 7ae05c84..07ea23f6 100644
--- a/src/utils/constants.js
+++ b/src/utils/constants.js
@@ -1792,6 +1792,8 @@ export const langData = [
   { value: 'zh', label: 'zh' },
   { value: 'en', label: 'en' }
 ]
+export const ZH = 'zh'
+export const EN = 'en'
 
 export const performanceMetricMapping = {
   'dns error': 'DNS Error Rate',
diff --git a/src/utils/tools.js b/src/utils/tools.js
index aad75a0a..3c620224 100644
--- a/src/utils/tools.js
+++ b/src/utils/tools.js
@@ -1,7 +1,7 @@
 import { ElMessageBox, ElMessage } from 'element-plus'
 import i18n from '@/i18n'
 import _ from 'lodash'
-import { storageKey, iso36112, topDomain, echartsFontSize, dbGeoDataTableName, networkTable, dbDrilldownTableConfig } from '@/utils/constants'
+import { storageKey, iso36112, topDomain, echartsFontSize, dbGeoDataTableName, networkTable, dbDrilldownTableConfig, ZH, EN } from '@/utils/constants'
 import { getIso36112JsonData, getDictList } from '@/utils/api'
 import { format } from 'echarts'
 import router from '@/router'
@@ -1248,10 +1248,10 @@ export function getQueryByFlag2 (type, condition) {
  */
 export function getWidthByLanguage (language) {
   switch (language) {
-    case 'en': {
+    case EN: {
       return 7
     }
-    case 'cn': {
+    case ZH: {
       return 16
     }
   }
diff --git a/src/views/administration/Appearance.vue b/src/views/administration/Appearance.vue
index 308af6cd..16233587 100644
--- a/src/views/administration/Appearance.vue
+++ b/src/views/administration/Appearance.vue
@@ -58,7 +58,7 @@
 </template>
 <script>
 import { api } from '@/utils/api'
-import { storageKey } from '@/utils/constants'
+import { storageKey, ZH, EN } from '@/utils/constants'
 import axios from 'axios'
 import dayjs from 'dayjs'
 
@@ -97,12 +97,12 @@ export default {
         {
           id: 1,
           label: 'English',
-          value: 'en'
+          value: EN
         },
         {
           id: 2,
           label: '中文',
-          value: 'zh'
+          value: ZH
         }
       ]
     }
diff --git a/src/views/charts2/charts/linkMonitor/LinkDirectionGrid.vue b/src/views/charts2/charts/linkMonitor/LinkDirectionGrid.vue
index c74bb2c4..dc8a44e0 100644
--- a/src/views/charts2/charts/linkMonitor/LinkDirectionGrid.vue
+++ b/src/views/charts2/charts/linkMonitor/LinkDirectionGrid.vue
@@ -12,7 +12,7 @@
 import chartMixin from '@/views/charts2/chart-mixin'
 import { getSecond } from '@/utils/date-util'
 import { api } from '@/utils/api'
-import { storageKey } from '@/utils/constants'
+import { storageKey, ZH } from '@/utils/constants'
 import PopoverContent from './LinkDirectionGrid/PopoverContent'
 import { computeScore } from '@/utils/tools'
 import axios from 'axios'
@@ -178,9 +178,9 @@ export default {
             // 接口数据乱序，根据入方向排序，再根据同个入方向下的出方向进行排序
             nextLinkData.sort((a, b) => {
               if (a.inLinkDirection !== b.inLinkDirection) {
-                return a.inLinkDirection.localeCompare(b.inLinkDirection, 'zh')
+                return a.inLinkDirection.localeCompare(b.inLinkDirection, ZH)
               }
-              return a.outLinkDirection.localeCompare(b.outLinkDirection, 'zh')
+              return a.outLinkDirection.localeCompare(b.outLinkDirection, ZH)
             })
 
             this.isNextNoData = nextLinkData.length === 0
diff --git a/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue b/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue
index b0cb8d0d..25d3117f 100644
--- a/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue
+++ b/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue
@@ -289,7 +289,9 @@ import {
   dbDrilldownTableConfig,
   fromRoute,
   drillDownPanelTypeMapping,
-  commonErrorTip
+  commonErrorTip,
+  ZH,
+  EN
 } from '@/utils/constants'
 import axios from 'axios'
 import unitConvert, { valueToRangeValue } from '@/utils/unit-convert'
@@ -1170,10 +1172,10 @@ export default {
       // 数字可按照排序的要求进行自定义，我这边产品的要求是
       // 数字（0->9）->大写字母（A->Z）->小写字母（a->z）->中文拼音（a->z）
       if (/^[\u4e00-\u9fa5]$/.test(char)) {
-        return ['zh', 300]
+        return [ZH, 300]
       }
       if (/^[a-zA-Z]$/.test(char)) {
-        return ['en', 200]
+        return [EN, 200]
       }
       if (/^[0-9]$/.test(char)) {
         return ['number', 100]
@@ -1222,9 +1224,9 @@ export default {
                 if (char1 === char2) {
                   continue
                 } else {
-                  if (char1Type[0] === 'zh') {
+                  if (char1Type[0] === ZH) {
                     res = char2.localeCompare(char1)
-                  } else if (char1Type[0] === 'en') {
+                  } else if (char1Type[0] === EN) {
                     res = char2.charCodeAt(0) - char1.charCodeAt(0)
                   } else {
                     res = char2 - char1
@@ -1262,9 +1264,9 @@ export default {
                 if (char1 === char2) {
                   continue
                 } else {
-                  if (char1Type[0] === 'zh') {
+                  if (char1Type[0] === ZH) {
                     res = char1.localeCompare(char2)
-                  } else if (char1Type[0] === 'en') {
+                  } else if (char1Type[0] === EN) {
                     res = char1.charCodeAt(0) - char2.charCodeAt(0)
                   } else {
                     res = char1 - char2
diff --git a/src/views/detections/detectionPolicies/PolicyDrawer.vue b/src/views/detections/detectionPolicies/PolicyDrawer.vue
index b01c4ee5..e13bc3e9 100644
--- a/src/views/detections/detectionPolicies/PolicyDrawer.vue
+++ b/src/views/detections/detectionPolicies/PolicyDrawer.vue
@@ -82,7 +82,7 @@
     <div class="detection-drawer-collapse" style="margin: 20px 0">
       <el-collapse v-model="activeTrigger">
         <el-collapse-item :title="$t('detection.create.trigger')" name="trigger">
-          <div class="drawer-collapse-content" v-if="language==='en'">
+          <div class="drawer-collapse-content" v-if="language===EN">
             <div class="drawer-collapse-trigger">
               Triggered when conditions occur at least
               <span style="color: #046ECA">
@@ -102,7 +102,7 @@
               </div>
             </div>
           </div>
-          <div class="drawer-collapse-content" v-if="language==='cn'">
+          <div class="drawer-collapse-content" v-if="language===ZH">
             <div class="drawer-collapse-trigger">
               当条件为
               <span style="color: #046ECA">
@@ -131,7 +131,7 @@
 
 <script>
 import { switchStatus, toUpperCaseByString } from '@/utils/tools'
-import { detectionUnitList, eventSeverityColor, securityLevel, storageKey } from '@/utils/constants'
+import { detectionUnitList, eventSeverityColor, securityLevel, storageKey, ZH, EN } from '@/utils/constants'
 import axios from 'axios'
 import { api } from '@/utils/api'
 
@@ -149,9 +149,11 @@ export default {
       detailData: {},
       eventSeverityColor,
       severityList: [],
-      language: 'en',
+      language: EN,
       atLeast: 0,
-      times: 'time'
+      times: 'time',
+      ZH,
+      EN
     }
   },
   watch: {
@@ -166,7 +168,7 @@ export default {
     }
   },
   mounted () {
-    this.language = localStorage.getItem(storageKey.language) || 'en'
+    this.language = localStorage.getItem(storageKey.language) || EN
   },
   methods: {
     switchStatus,
diff --git a/src/views/detections/detectionPolicies/PolicyForm.vue b/src/views/detections/detectionPolicies/PolicyForm.vue
index 80f74bd7..bb5ab933 100644
--- a/src/views/detections/detectionPolicies/PolicyForm.vue
+++ b/src/views/detections/detectionPolicies/PolicyForm.vue
@@ -53,7 +53,7 @@
             </template>
 
             <div class="form-collapse-content margin-t-18">
-              <el-form v-if="language==='en'" class="trigger-block margin-b-20" ref="form3" :model="triggerObj" :rules="rules">
+              <el-form v-if="language===EN" class="trigger-block margin-b-20" ref="form3" :model="triggerObj" :rules="rules">
                 <div class="trigger-block-item margin-b-10">
                   <div>At least</div>
                   <el-form-item prop="atLeast">
@@ -94,7 +94,7 @@
                   </el-form-item>
                 </div>
               </el-form>
-              <el-form v-if="language==='cn'" class="trigger-block margin-b-20" ref="form3" :model="triggerObj" :rules="rules">
+              <el-form v-if="language===ZH" class="trigger-block margin-b-20" ref="form3" :model="triggerObj" :rules="rules">
                 <div class="trigger-block-item margin-b-10">
                   在
                   <el-form-item prop="interval">
@@ -160,7 +160,7 @@ import { useRoute } from 'vue-router'
 import { ref } from 'vue'
 import { getDurationsTimeByType, getTimeByDurations } from '@/utils/date-util'
 import Loading from '@/components/common/Loading'
-import { storageKey, detectionUnitList } from '@/utils/constants'
+import { storageKey, detectionUnitList, ZH, EN } from '@/utils/constants'
 
 export default {
   name: 'DetectionForm',
@@ -257,7 +257,9 @@ export default {
       intervalList: [],
       editObj: {},
       isComplete: true, // 参数完整标识，默认完整（照顾编辑模式），false即不完整
-      language: 'en'
+      language: EN,
+      ZH,
+      EN
     }
   },
   components: {
@@ -266,10 +268,10 @@ export default {
     Loading
   },
   mounted () {
-    this.language = localStorage.getItem(storageKey.language) || 'en'
-    if (this.language === 'en') {
+    this.language = localStorage.getItem(storageKey.language) || EN
+    if (this.language === EN) {
       this.intervalList = detectionUnitList.intervalList
-    } else if (this.language === 'cn') {
+    } else if (this.language === ZH) {
       this.intervalList = detectionUnitList.intervalListCN
     }
     this.getDetailInfo()