feat: 支持国际化 TencentBlueKing#26

src/frontend/src/Atom.vue

@@ -38,7 +38,7 @@
                     <component :is="panel.name" :atom-props-model="atomModel" :atom-props-value="atomValue" :atom-props-container-info="containerInfo"></component>
                 </bk-tab-panel>
                 <template slot="setting">
-                    <a :href="linkUrl" target="_blank" class="codecc-link">前往CodeCC</a>
+                    <a :href="linkUrl" target="_blank" class="codecc-link">{{ $t('前往CodeCC') }}</a>
                 </template>
             </bk-tab>
         </div>
@@ -52,6 +52,7 @@
     import Scan from '@/components/Scan'
     import Shield from '@/components/Shield'
     import Async from '@/components/Async'
+    import { toggleLang } from './i18n'
 
     export default {
         name: 'atom',
@@ -65,9 +66,9 @@
         data () {
             return {
                 panels: [
-                    { name: 'basic', label: '基础设置' },
-                    { name: 'scan', label: '扫描配置' },
-                    { name: 'shield', label: '路径屏蔽' }
+                    { name: 'basic', label: this.$t('基础设置') },
+                    { name: 'scan', label: this.$t('扫描配置') },
+                    { name: 'shield', label: this.$t('路径屏蔽') }
                 ],
                 active: 'basic',
                 tabRedTips: {}
@@ -115,6 +116,9 @@
                 if (name === 'scan') {
                     window.localStorage.setItem('mr-20200702', '1')
                 }
+            },
+            handleToggleLang() {
+                toggleLang()
             }
         }
     }

src/frontend/src/components/Async.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="task-content" :style="{height: extraHeight + 'px'}">
-        <div class="atom-txt"><i class="bk-icon icon-exclamation-circle-shape"></i>如流水线配置了质量红线请谨慎使用异步功能，可能会由于结果异步输出导致红线拦截</div>
+        <div class="atom-txt"><i class="bk-icon icon-exclamation-circle-shape"></i>{{$t('如流水线配置了质量红线请谨慎使用异步功能，可能会由于结果异步输出导致红线拦截')}}</div>
         <template v-for="(obj, key) in asyncModel">
             <form-field
                 class="head-level" 

src/frontend/src/components/AuthorTransfer.vue

@@ -10,7 +10,7 @@
                             :handle-change="(name, value) => handleParamChange(name, value, index)"
                             v-validate.initial="`required`"
                             name="sourceAuthor"
-                            placeholder="原处理人"
+                            :placeholder="$t('原处理人')"
                             :value="param.sourceAuthor" />
                     </form-field>
                     <form-field :is-error="errors.has(`param-${index}.targetAuthor`)" :error-msg="errors.first(`param-${index}.targetAuthor`)">
@@ -20,15 +20,15 @@
                             :handle-change="(name, value) => handleParamChange(name, value, index)"
                             v-validate.initial="`required`"
                             name="targetAuthor"
-                            placeholder="目标处理人"
+                            :placeholder="$t('目标处理人')"
                             :value="param.targetAuthor" />
                     </form-field>
                     <i @click.stop.prevent="editParam(index, false)" class="bk-icon icon-minus hover-click" v-if="!disabled" />
                 </li>
             </template>
             <a class="text-link hover-click" v-if="!disabled" @click.stop.prevent="editParam(paramList.length, true)">
                 <i class="bk-icon icon-plus-circle" />
-                <span>添加处理人转换</span>
+                <span>{{$t('添加处理人转换')}}</span>
             </a>
         </ul>
     </div>

src/frontend/src/components/Basic.vue

@@ -2,8 +2,8 @@
     <section class="bk-form">
         <template>
             <div class="atom-txt" v-if="envSupport">
-                <span>Linux私有构建机/Mac/Win10需安装docker，Win7仅支持Coverity。
-                    <a target="_blank" :href="dockerHref">具体请见>></a>
+                <span>{{$t('Linux私有构建机/Mac/Win10需安装docker，Win7仅支持Coverity。')}}
+                    <a target="_blank" :href="dockerHref">{{ $t('具体请见') }}>></a>
                 </span>
             </div>
             <template v-for="(obj, key) in basicTabModel">
@@ -82,7 +82,7 @@
                 groupList: [
                     {
                         id: 'script',
-                        label: '编译脚本',
+                        label: this.$t('编译脚本'),
                         rely: ['COVERITY', 'KLOCWORK', 'PINPOINT', 'CODEQL', 'CLANG', 'CLANGWARNING', 'SPOTBUGS'],
                         item: ['scriptType', 'script']
                     }
@@ -141,7 +141,7 @@
                         return curTool && curTool.name || tool
                     })
                 }
-                return toolsCn.length ? `涉及工具：${toolsCn.join('、')}` : ''
+                return toolsCn.length ? `${this.$t('涉及工具')}：${toolsCn.join('、')}` : ''
             },
             envSupport () {
                 return ['MACOS', 'WINDOWS'].includes(this.containerInfo.baseOS) || (this.containerInfo.dispatchType && this.containerInfo.dispatchType.buildType.indexOf('THIRD_PARTY') !== -1)

src/frontend/src/components/CodeccAccordion.vue

@@ -14,7 +14,7 @@
                 </span>
                 <span v-if="desc" class="desc" v-bk-tooltips.top="desc">{{ desc }}</span>
                 <span class="fold-open"> 
-                    {{ isShow ? '收起' : '展开' }} 
+                    {{ isShow ? $t('收起') : $t('展开') }}
                     <i class="bk-icon icon-angle-down" style="display:inline-block">
                     </i>
                 </span>

src/frontend/src/components/ItemEdit.vue

@@ -21,7 +21,7 @@
             </template>
             <a class="text-link hover-click" v-if="!disabled" @click.stop.prevent="editParam(paramList.length, true)">
                 <i class="bk-icon icon-plus-circle" />
-                <span>{{ addBtnText }}</span>
+                <span>{{$t(addBtnText)}}</span>
             </a>
         </ul>
     </div>

src/frontend/src/components/RuleSetDialog.vue

@@ -7,9 +7,9 @@
         :show-footer="false">
         <div class="main-content" v-bkloading="{ isLoading: loading, opacity: 0.3 }">
             <div class="info-header">
-                <span>选择规则集<i class="bk-icon icon-refresh checkerset-fresh" :class="fetchingList ? 'spin-icon' : ''" @click="refresh" /></span>
+                <span>{{$t('选择规则集')}}<i class="bk-icon icon-refresh checkerset-fresh" :class="fetchingList ? 'spin-icon' : ''" @click="refresh" /></span>
                 <div class="handle-option">
-                    <bk-select class="search-select" v-model="language" multiple style="width: 120px;" placeholder="请选择语言">
+                    <bk-select class="search-select" v-model="language" multiple style="width: 120px;" :placeholder="$t('请选择语言')">
                         <bk-option v-for="option in codeLangs"
                             :key="option.displayName"
                             :id="option.displayName"
@@ -18,7 +18,7 @@
                     </bk-select>
                     <bk-input
                         class="search-input"
-                        :placeholder="'快速搜索'"
+                        :placeholder="$t('快速搜索')"
                         :clearable="true"
                         :right-icon="'bk-icon icon-search'"
                         v-model="keyWord"
@@ -27,13 +27,13 @@
                     </bk-input>
                     <bk-popconfirm always
                         v-if="showTipsConfirm"
-                        confirm-text="我知道了" 
+                        :confirm-text="$t('我知道了')"
                         cancel-text=""
                         :delay="500"
                         :confirm-button-is-text="false" 
                         @confirm="handleTipsConfirm">
                         <div slot="content">
-                            <div>在此处关闭规则集弹框</div>
+                            <div>{{$t('在此处关闭规则集弹框')}}</div>
                         </div>
                         <i class="bk-icon icon-close" @click="closeDialog" />
                     </bk-popconfirm>
@@ -59,13 +59,13 @@
                                     <span class="name" :title="checkerSet.checkerSetName">{{checkerSet.checkerSetName}}</span>
                                     <span v-if="['DEFAULT', 'RECOMMEND'].includes(checkerSet.checkerSetSource)"
                                         :class="['use-mark', { 'preferred': checkerSet.checkerSetSource === 'DEFAULT', 'recommend': checkerSet.checkerSetSource === 'RECOMMEND' }]"
-                                    >{{checkerSet.checkerSetSource === 'DEFAULT' ? '精选' : '推荐'}}</span>
+                                    >{{checkerSet.checkerSetSource === 'DEFAULT' ? $t('精选') : $t('推荐')}}</span>
                                     <span class="language" :title="getCodeLang(checkerSet.codeLang)">{{getCodeLang(checkerSet.codeLang)}}</span>
                                 </p>
-                                <p class="checkerset-desc" :title="checkerSet.description">{{checkerSet.description || '暂无描述'}}</p>
+                                <p class="checkerset-desc" :title="checkerSet.description">{{checkerSet.description || $t('暂无描述')}}</p>
                                 <p class="other-msg">
-                                    <span>由 {{ checkerSet.creator }} 发布</span>
-                                    <span>共 {{checkerSet.checkerCount || 0}} 条规则</span>
+                                    <span>{{$t('由x发布',{ name: checkerSet.creator })}}</span>
+                                    <span>{{$t('共x条规则', { sum: checkerSet.checkerCount || 0 })}}</span>
                                 </p>
                             </div>
                             <div class="info-operate" 
@@ -85,12 +85,12 @@
                     <div v-if="!checkerSetList.length">
                         <div class="codecc-table-empty-text">
                             <img src="../images/empty.png" class="empty-img">
-                            <div>暂无数据</div>
+                            <div>{{$t('暂无数据')}}</div>
                         </div>
                     </div>
                 </bk-tab-panel>
                 <template slot="setting">
-                <a :href="linkUrl" target="_blank" class="codecc-link">创建规则集</a>
+                <a :href="linkUrl" target="_blank" class="codecc-link">{{$t('创建规则集')}}</a>
             </template>
             </bk-tab>
         </div>
@@ -170,7 +170,7 @@
             },
             classifyCodeList () {
                 if (this.categoryList.length) {
-                    return [{ cnName: '所有', enName: 'all' }, ...this.categoryList, { cnName: '研发商店', enName: 'store' }]
+                    return [{ cnName: this.$t('所有'), enName: 'all' }, ...this.categoryList, { cnName: this.$t('研发商店'), enName: 'store' }]
                 }
                 return []
             }
@@ -261,9 +261,9 @@
             getSelectText (checkerSet, index) {
                 let txt = ''
                 if (this.classifyCode === 'store' && !checkerSet.projectInstalled) {
-                    txt = '安装'
+                    txt = this.$t('安装')
                 } else {
-                    txt = this.checkIsSelected(checkerSet.checkerSetId) ? this.currentHoverItem === index ? '取消选中' : '已选中' : '选择'
+                    txt = this.checkIsSelected(checkerSet.checkerSetId) ? this.currentHoverItem === index ? this.$t('取消选中') : this.$t('已选中') : this.$t('选择')
                 }
                 return txt
             },
@@ -340,21 +340,21 @@
                 this.loading = true
                 this.$store.dispatch('install', params).then(res => {
                     if (res.code === '0') {
-                        this.$bkMessage({ theme: 'success', message: '安装成功' })
+                        this.$bkMessage({ theme: 'success', message: this.$t('安装成功') })
                         this.refresh()
                     }
                 }).catch(e => {
                     this.$bkMessage({
-                        message: '安装失败',
+                        message: this.$t('安装失败'),
                         theme: 'error'
                     })
                 })
             },
             getToolTips (hasMultiLang, notCurLang) {
                 if (hasMultiLang) {
-                    return '该规则集不适用于当前插件'
+                    return this.$t('该规则集不适用于当前插件')
                 } else if (notCurLang) {
-                    return '该规则集不适用于当前插件已选择的语言'
+                    return this.$t('该规则集不适用于当前插件已选择的语言')
                 }
                 return { disabled: true }
             },

src/frontend/src/components/RuleSetSelect.vue

@@ -2,7 +2,7 @@
     <div class="rule-set-selector">
         <div class="rule-set-input" @click="openSelect">
             <p class="rule-set-value" :title="getValueShow(renderList)">{{ getValueShow(renderList) }}</p>
-            <span class="placeholder" v-if="!renderList.length">请选择</span>
+            <span class="placeholder" v-if="!renderList.length">{{$t('请选择')}}</span>
             <span class="bk-select-clear bk-icon icon-close-circle-shape" @click.stop="handleClear"></span>
         </div>
         <rule-set-dialog

src/frontend/src/components/Shield.vue

@@ -38,24 +38,24 @@
             return {
                 groupList: [
                     {
-                        label: '路径白名单',
+                        label: this.$t('路径白名单'),
                         item: ['path'],
-                        desc: `以绝对路径/data/landun/workspace/CodeCCTest/cpp/为例：
+                        desc: this.$t(`以绝对路径/data/landun/workspace/CodeCCTest/cpp/为例：
 扫描相对路径可输入/CodeCCTest/cpp/，只输入/cpp/不会生效
 扫描某类文件如protobuffer生成的*.pb.cc，可以输入.*/.*\\.pb\\.cc
 扫描工作空间中某个文件夹如P2PLive，可以输入.*/P2PLive/.* 
 只扫描某个文件夹下某类文件如P2PLive下*.c，可以输入.*/P2PLive/.*\\.c
 若一行中输入多个路径或路径匹配式可用英文逗号分隔
-支持流水线变量`
+支持流水线变量`)
                     },
                     {
-                        label: '路径黑名单',
+                        label: this.$t('路径黑名单'),
                         item: ['customPath'],
-                        desc: `屏蔽某类文件如protobuffer生成的*.pb.cc，可以输入.*/.*\\.pb\\.cc
+                        desc: this.$t(`屏蔽某类文件如protobuffer生成的*.pb.cc，可以输入.*/.*\\.pb\\.cc
 屏蔽所有分支中某个文件夹如P2PLive，可以输入.*/P2PLive/.* 
 屏蔽某个文件夹下某类文件如P2PLive下*.c，可以输入.*/P2PLive/.*\\.c
 若一行中输入多个路径匹配式可用英文逗号分隔
-支持流水线变量`
+支持流水线变量`)
                     }
                 ]
             }

src/frontend/src/components/TaskSelect.vue

@@ -26,7 +26,7 @@
             <div class="bk-select-extension">
                 <a class="bk-selector-create-item" @click="handleNewTask">
                     <i class="bk-icon icon-plus-circle" />
-                    新增任务
+                    {{$t('新增任务')}}
                 </a>
             </div>
         </div>

src/frontend/src/i18n/index.js

@@ -0,0 +1,46 @@
+import Vue from 'vue';
+import VueI18n from 'vue-i18n';
+import Cookies from 'js-cookie';
+import langMessages from './lang/messages';
+import { locale, lang } from 'bk-magic-vue';
+
+Vue.use(VueI18n);
+
+const languageMaps = {
+  zh_cn: 'zh-CN',
+  'zh-cn': 'zh-CN',
+  zh: 'zh-CN',
+};
+
+const messages = {
+  'zh-CN': Object.assign(lang.zhCN, langMessages['zh-CN']),
+  en: Object.assign(lang.enUS, langMessages.en),
+};
+
+let curLocale = Cookies.get('blueking_language') || 'zh-CN';
+curLocale = Object.prototype.hasOwnProperty.call(languageMaps, curLocale) ? languageMaps[curLocale] : curLocale;
+
+// console.log(locale, messages)
+
+const i18n = new VueI18n({
+  locale: curLocale,
+  fallbackLocale: 'zh-CN',
+  messages,
+  silentTranslationWarn: true, // 取消本地化失败时输出的警告
+  missing(locale, path) {
+    const parsedPath = i18n._path.parsePath(path) // eslint-disable-line
+    return parsedPath[parsedPath.length - 1];
+  },
+});
+
+locale.i18n((key, value) => i18n.t(key, value));
+
+export const toggleLang = () => {
+  i18n.locale = i18n.locale === 'zh-CN' ? 'en' : 'zh-CN';
+
+  Cookies.set('blueking_language', i18n.locale);
+};
+
+export const language = i18n.locale;
+
+export default i18n;

src/frontend/src/i18n/lang/cn.json

@@ -0,0 +1,4 @@
+{
+  "共x条规则": "共{sum}条规则",
+  "由x发布": "由{name}发布"
+}