Merge pull request #8426 from lockiechen/issue_8421

feat: 支持国际化初始值可配置 issue #8421
TencentBlueKing · Feb 28, 2023 · c622751 · c622751
2 parents 23517dd + 92bc037
commit c622751
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 11 deletions.
diff --git a/helm-charts/core/ci/build_chart.py b/helm-charts/core/ci/build_chart.py
@@ -61,7 +61,8 @@
     'bkCiKubernetesToken': 'landun',
     'bkCiDevopsToken': 'devops',
     'bkCiAppToken': 'test',
-    'bkCiNotifyEmailSendChannel': 'blueking'
+    'bkCiNotifyEmailSendChannel': 'blueking',
+    'initLocale': 'zh-CN',
 }
 
 if os.path.isfile(default_value_json):

diff --git a/scripts/bkenv.properties b/scripts/bkenv.properties
@@ -145,6 +145,8 @@ BK_CI_MYSQL_USER=bk_ci
 BK_CI_PAAS_DIALOG_LOGIN_URL=$BK_PAAS_PUBLIC_URL/login/plain/?c_url=
 # BK_CI_PAAS_LOGIN_URL默认为$BK_PAAS_PUBLIC_URL/login/?c_url=. 无需修改. 跳转到蓝鲸登录服务主页. CI会在结尾直接追加登录前的地址.
 BK_CI_PAAS_LOGIN_URL=$BK_PAAS_PUBLIC_URL/login/?c_url=
+# 默认语言配置，默认为zh-CN，中文
+INIT_LOCALE=zh-CN
 # BK_CI_RABBITMQ_ADDR默认为127.0.0.1:5672. 按需修改. CI专用的RabbitMQ地址, HOST:PORT形式.
 BK_CI_RABBITMQ_ADDR=127.0.0.1:5672
 # BK_CI_RABBITMQ_PASSWORD无默认值. 按需修改.

diff --git a/src/frontend/devops-nav/src/index.html b/src/frontend/devops-nav/src/index.html
@@ -89,6 +89,7 @@
       var PERM_URL_PREFIX = '__BK_PAAS_PUBLIC_URL__/o/bk_iam_app' // EE PERM URL PREFIX
       var DOCS_URL_PREFIX = '__BK_CI_DOCS_URL__' // 文档中心域名
       var LOGIN_SERVICE_URL = '__BK_CI_PAAS_LOGIN_URL__' // 蓝鲸PaaS登录入口
+      var INIT_LOCALE = '__INIT_LOCALE__' // 国际化配置占位符
       var DEVOPS_LS_VERSION =
         '<%- htmlWebpackPlugin.options.DEVOPS_LS_VERSION%>'
       var X_DEVOPS_PROJECT_ID = 'X-DEVOPS-PROJECT-ID'

diff --git a/src/frontend/devops-nav/src/index.ts b/src/frontend/devops-nav/src/index.ts
@@ -54,7 +54,7 @@ Vue.component('ShowTooltip', ShowTooltip)
 Vue.component('DevopsFormItem', DevopsFormItem)
 Vue.component('BigSelect', BigSelect)
 
-const { i18n, dynamicLoadModule, setLocale, localeList } = createLocale(require.context('@locale/nav/', false, /\.json$/))
+const { i18n, dynamicLoadModule, setLocale, localeList } = createLocale(require.context('@locale/nav/', false, /\.json$/), true)
 
 // @ts-ignore
 Vue.use(VeeValidate, {

diff --git a/src/frontend/devops-pipeline/src/components/pipelineList/PipelineTemplatePopup/index.vue b/src/frontend/devops-pipeline/src/components/pipelineList/PipelineTemplatePopup/index.vue
@@ -21,7 +21,10 @@
                     </span>
                 </div>
                 <div class="template-content" :style="{ height: viewHeight }">
-                    <div class="left-temp-list">
+                    <div :class="{
+                        'left-temp-list': true,
+                        'left-temp-preivew': showPreview && tempPipeline
+                    }">
                         <template v-if="tempList.length && !showPreview">
                             <div class="search-row-content" v-if="(tempTypeIndex === tempTypeList.length - 1)">
                                 <div class="search-input-row">
@@ -628,6 +631,9 @@
                 flex-direction: column;
                 width: 666px;
                 padding: 20px 0 20px 20px;
+                &.left-temp-preivew {
+                    overflow: auto;
+                }
                 > h2 {
                     font-size: 12px;
                     margin: 0 20px 18px 0;

diff --git a/src/frontend/locale/index.js b/src/frontend/locale/index.js
@@ -3,7 +3,7 @@ import Vue from 'vue'
 import { lang, locale } from 'bk-magic-vue'
 import axios from 'axios'
 import cookies from 'js-cookie'
-const DEFAULT_LOCALE = 'zh-CN'
+const DEFAULT_LOCALE = window.INIT_LOCALE ?? 'zh-CN'
 const LS_KEY = 'blueking_language'
 const loadedModule = {}
 const localeLabelMap = {
@@ -25,8 +25,23 @@ const localeAliasMap = {
     'us': 'en-US'
 }
 
-const domainMatch = location.hostname.match(/([^.]+\.)?([^\.]+\..+)/)
-const BK_CI_DOMAIN = domainMatch.length > 2 ? domainMatch[2] : location.hostname
+function getSubDoamin () {
+    try {
+        return location.hostname.split('.').reduce((acc, _, index, list) => {
+            const last = list.length - 1
+            const item = list[last - index]
+            if (index > 0) {
+                acc.push([item, acc[index - 1]].join('.'))
+            } else {
+                acc.push(item)
+            }
+            console.log(acc)
+            return acc
+        }, []).slice(1)
+    } catch (error) {
+        return []
+    }
+}
 
 function getLsLocale () {
     try {
@@ -40,12 +55,15 @@ function getLsLocale () {
 function setLsLocale (locale) {
     const formateLocale = localeAliasMap[locale] === 'zh-CN' ? 'zh-cn' : 'en'
     if (typeof cookies.set === 'function') {
-        cookies.remove(LS_KEY, { domain: BK_CI_DOMAIN, path: '/' })
-        cookies.set(LS_KEY, formateLocale, { domain: BK_CI_DOMAIN, path: '/' })
+        const subDomains = getSubDoamin()
+        subDomains.forEach(domain => {
+            cookies.remove(LS_KEY, { domain, path: '/' })
+        })
+        cookies.set(LS_KEY, formateLocale, { domain: location.hostname, path: '/' })
     }
 }
 
-export default (r) => {
+export default (r, initSetLocale = false) => {
     Vue.use(VueI18n)
     const { messages, localeList } = importAll(r)
     const initLocale = getLsLocale()
@@ -55,8 +73,9 @@ export default (r) => {
         fallbackLocale: initLocale,
         messages
     })
-
-    setLocale(initLocale)
+    if (initSetLocale) {
+        setLocale(initLocale)
+    }
 
     locale.i18n((key, value) => i18n.t(key, value))