fix: 国际化 & eslint (TencentBlueKing#1691)

yuri0528 · May 9, 2024 · ca0bb3e · ca0bb3e
1 parent 0f34706
commit ca0bb3e
Show file tree

Hide file tree

Showing 39 changed files with 7,839 additions and 7,783 deletions.
diff --git a/src/pages/i18n.js b/src/pages/i18n.js
@@ -0,0 +1,52 @@
+const { resolve } = require('path');
+const fs = require('fs');
+const { extractI18NReport, readVueFiles, extractI18NItemsFromVueFiles, readLanguageFiles } = require('vue-i18n-extract');
+const Dot = require('dot-object');
+
+const dot = new Dot('.');
+const config = {
+  filePath: './src/**/*.?(js|vue|ts|tsx|jsx|html)',
+  i18nPath: './src/language/**/*.?(json)'
+}
+
+const vueFiles = readVueFiles(resolve(process.cwd(), config.filePath));
+const I18NItems = extractI18NItemsFromVueFiles(vueFiles);
+
+const languageFiles = readLanguageFiles(resolve(process.cwd(), config.i18nPath));
+const I18NLanguage = languageFiles.reduce((pre, item) => {
+  const content = JSON.parse(item.content)
+  const flatContent = dot.dot(content);
+  // const lang = item.fileName.replace(/^.*[\\\/]/, '')
+  pre[item.fileName] = Object.keys(flatContent).map(key => ({
+    file: item.fileName,
+    path: key
+  }))
+  return pre
+}, {});
+
+const report = extractI18NReport(I18NItems, I18NLanguage);
+
+// 添加未翻译文案
+languageFiles.forEach(languageFile => {
+  const content = JSON.parse(languageFile.content);
+  report.missingKeys.forEach(item => {
+    if (item.language !== languageFile.fileName) return
+
+    const defaultValue = languageFile.fileName.indexOf('zh') > -1 ? item.path : ''
+    dot.str(item.path, defaultValue, content)
+  })
+  languageFile.content = JSON.stringify(content) // 保留结果
+
+  fs.writeFileSync(languageFile.path, JSON.stringify(content, null, 2))
+});
+// 删除未使用文案
+languageFiles.forEach(languageFile => {
+  const content = JSON.parse(languageFile.content);
+  report.unusedKeys.forEach(item => {
+    if (item.language !== languageFile.fileName) return
+
+    dot.delete(item.path, content)
+  })
+  languageFile.content = JSON.stringify(content) // 保留结果
+  fs.writeFileSync(languageFile.path, JSON.stringify(content, null, 2))
+});
diff --git a/src/pages/package.json b/src/pages/package.json
@@ -8,7 +8,8 @@
     "server": "node ./paas-server/index.js",
     "lint": "eslint --ext .js,.vue,.ts ./src",
     "lint:fix": "eslint --fix --ext .js,.vue,.ts ./src",
-    "lint:style": "stylelint \"./**/*.{css,less,vue,html}\" --fix"
+    "lint:style": "stylelint \"./**/*.{css,less,vue,html}\" --fix",
+    "i18n": "node ./i18n.js"
   },
   "keywords": [
     "bk-ci",
@@ -33,6 +34,7 @@
     "cookie": "^0.5.0",
     "cookie-parser": "^1.4.5",
     "dayjs": "^1.11.2",
+    "dot-object": "^2.1.5",
     "express": "^4.18.2",
     "express-art-template": "^1.0.1",
     "intl-tel-input": "^18.2.1",
@@ -50,6 +52,7 @@
     "vite-plugin-monaco-editor": "^1.1.0",
     "vue": "^3.2.41",
     "vue-i18n": "^9.9.0",
+    "vue-i18n-extract": "^2.0.7",
     "vue-router": "^4.1.6"
   },
   "devDependencies": {

diff --git a/src/pages/src/components/SyncRecords.vue b/src/pages/src/components/SyncRecords.vue
@@ -15,7 +15,7 @@
           <Empty
             :is-data-empty="dataRecordConfig.isDataEmpty"
             :is-data-error="dataRecordConfig.isDataError"
-            @handleUpdate="getSyncRecordsList"
+            @handle-update="getSyncRecordsList"
           />
         </template>
         <bk-table-column prop="start_at" :label="$t('开始时间')" :width="160" />

diff --git a/src/pages/src/components/layouts/LabelContent.vue b/src/pages/src/components/layouts/LabelContent.vue
@@ -1,6 +1,8 @@
 <template>
   <span class="label-content">
-    <span class="label-key">{{ `${label ? label + '：' : ''}` }} </span>
+    <bk-overflow-title type="tips" :class="['label-key', { 'label-key-en': $i18n.locale === 'en' }]">
+      {{ `${label ? label + '：' : ''}` }}
+    </bk-overflow-title>
     <span class="label-value">
       <slot></slot>
     </span>
@@ -27,8 +29,15 @@ defineProps({
 
   .label-key {
     width: 98px;
+    overflow: hidden;
     color: #63656E;
     text-align: right;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .label-key-en {
+    width: 150px !important;
   }
 
   .label-value {

diff --git a/src/pages/src/components/layouts/MainView.vue b/src/pages/src/components/layouts/MainView.vue
@@ -26,9 +26,10 @@
 </template>
 
 <script setup lang="ts"> import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+
 import MainBreadcrumbs from './MainBreadcrumbs.vue';
 
-import { useRoute } from 'vue-router';
 import { useMainViewStore, useMenu, useUser } from '@/store';
 const menuStore = useMenu();
 const mainViewStore = useMainViewStore();
@@ -56,7 +57,7 @@ const hiddenBoxShadow = computed(() => route.meta.hiddenBoxShadow);
   background-color: #f5f7fa;
 
   &.has-breadcrumbs {
-    height: calc(100vh - 104px);
+    height: calc(100vh - 92px);
   }
 }
 

diff --git a/src/pages/src/components/notify-editor/NotifyEditorTemplate.vue b/src/pages/src/components/notify-editor/NotifyEditorTemplate.vue
@@ -26,7 +26,7 @@
               <edtiorTemplate
                 :toolbar-config="emailConfig"
                 :html-text="expiringEmail.content_html"
-                @updateContent="(html, text) => emit('handleEditorText', html, text, expiringEmailKey, 'email')" />
+                @update-content="(html, text) => emit('handleEditorText', html, text, expiringEmailKey, 'email')" />
             </div>
           </li>
           <li class="email-block">
@@ -48,7 +48,7 @@
               <edtiorTemplate
                 :toolbar-config="emailConfig"
                 :html-text="expiredEmail.content_html"
-                @updateContent="(html, text) => emit('handleEditorText', html, text, expiredEmailKey, 'email')" />
+                @update-content="(html, text) => emit('handleEditorText', html, text, expiredEmailKey, 'email')" />
             </div>
           </li>
         </ul>
@@ -65,7 +65,7 @@
               <edtiorTemplate
                 :toolbar-config="infoConfig"
                 :html-text="expiringSms.content_html"
-                @updateContent="(html, text) => emit('handleEditorText', html, text, expiringSmsKey, 'sms')" />
+                @update-content="(html, text) => emit('handleEditorText', html, text, expiringSmsKey, 'sms')" />
             </div>
           </li>
           <li class="email-block">
@@ -75,7 +75,7 @@
               <edtiorTemplate
                 :toolbar-config="infoConfig"
                 :html-text="expiredSms.content_html"
-                @updateContent="(html, text) => emit('handleEditorText', html, text, expiredSmsKey, 'sms')" />
+                @update-content="(html, text) => emit('handleEditorText', html, text, expiredSmsKey, 'sms')" />
             </div>
           </li>
         </ul>

diff --git a/src/pages/src/components/notify-editor/editorTemplate.vue b/src/pages/src/components/notify-editor/editorTemplate.vue
@@ -11,10 +11,10 @@
       v-model="valueHtml"
       :default-config="editorConfig"
       :mode="mode"
-      @onCreated="handleCreated"
-      @onChange="handleChange"
-      @onFocus="handleFocus"
-      @onBlur="handleBlur"
+      @on-created="handleCreated"
+      @on-change="handleChange"
+      @on-focus="handleFocus"
+      @on-blur="handleBlur"
     />
   </div>
 </template>
@@ -44,7 +44,7 @@ const editorRef = shallowRef();
 
 // 内容 HTML
 const valueHtml = computed(() => props.htmlText);
-const editorConfig = { placeholder: t('请输入内容...') };
+const editorConfig = { placeholder: t('请输入内容') };
 const mode = ref('simple');
 const isActive = ref(false);
 

diff --git a/src/pages/src/components/set-department/SetDepartment.vue b/src/pages/src/components/set-department/SetDepartment.vue
@@ -14,7 +14,7 @@
           <Tree
             :tree-data="treeDataList"
             :search-key="searchKey"
-            @checkedList="checkedList" />
+            @checked-list="checkedList" />
         </div>
       </div>
     </div>