feat: 国际化

# Reviewed, transaction id: 1855
yuri0528 · Jan 15, 2024 · d1667e9 · d1667e9
1 parent a1d3def
commit d1667e9
Show file tree

Hide file tree

Showing 66 changed files with 1,647 additions and 779 deletions.
diff --git a/src/pages/.bk.development.env b/src/pages/.bk.development.env
@@ -15,3 +15,7 @@ BK_STATIC_URL = ''
 BK_AJAX_BASE_URL = ''
 
 BK_CSRF_COOKIE_NAME = ''
+
+BK_COMPONENT_API_URL = ''
+
+BK_DOMAIN = ''
diff --git a/src/pages/.bk.production.env b/src/pages/.bk.production.env
@@ -9,3 +9,7 @@ BK_STATIC_URL = '{{ BK_STATIC_URL }}'
 BK_AJAX_BASE_URL = '{{ AJAX_BASE_URL }}'
 
 BK_CSRF_COOKIE_NAME = '{{ CSRF_COOKIE_NAME }}'
+
+BK_COMPONENT_API_URL = '{{ BK_COMPONENT_API_URL }}'
+
+BK_DOMAIN = '{{ BK_DOMAIN }}'
diff --git a/src/pages/index.html b/src/pages/index.html
@@ -16,6 +16,8 @@
         // 静态资源路径
         window.BK_STATIC_URL = '<%= process.env.BK_STATIC_URL %>';
         window.CSRF_COOKIE_NAME = '<%= process.env.BK_CSRF_COOKIE_NAME %>';
+        window.BK_COMPONENT_API_URL = '<%= process.env.BK_COMPONENT_API_URL %>';
+        window.BK_DOMAIN = '<%= process.env.BK_DOMAIN %>';
       </script>
     </body>
 </html>
diff --git a/src/pages/package.json b/src/pages/package.json
@@ -46,6 +46,7 @@
     "sortablejs": "^1.15.0",
     "vite-plugin-monaco-editor": "^1.1.0",
     "vue": "^3.2.41",
+    "vue-i18n": "^9.9.0",
     "vue-router": "^4.1.6"
   },
   "devDependencies": {

diff --git a/src/pages/src/app.vue b/src/pages/src/app.vue
@@ -7,6 +7,7 @@ import {
 import HeaderBox from './views/Header.vue';
 
 import { currentUser } from '@/http/api';
+import { t } from '@/language/index';
 import { useUser } from '@/store/user';
 
 // 加载完用户数据才会展示页面
@@ -20,7 +21,7 @@ currentUser()
     isLoading.value = false;
   })
   .catch(() => {
-    Message('获取用户信息失败，请检查后再试');
+    Message(t('获取用户信息失败，请检查后再试'));
     isLoading.value = false;
   });
 </script>

diff --git a/src/pages/src/components/ChangePassword.vue b/src/pages/src/components/ChangePassword.vue
@@ -11,22 +11,26 @@
   >
     <bk-alert
       theme="info"
-      title="密码修改成功后需要进行重新登录"
+      :title="$t('密码修改成功后需要进行重新登录')"
       closable
     />
     <bk-form
       form-type="vertical"
       ref="formRef"
       :model="formData">
-      <bk-form-item label="旧密码" property="oldPassword" required>
-        <bk-input v-model="formData.oldPassword" />
+      <bk-form-item :label="$t('旧密码')" property="oldPassword" required>
+        <bk-input type="password" v-model="formData.oldPassword" />
       </bk-form-item>
-      <bk-form-item label="新密码" property="newPassword" required>
-        <bk-input v-model="formData.newPassword" />
+      <bk-form-item :label="$t('新密码')" property="newPassword" required>
+        <bk-input type="password" v-model="formData.newPassword" />
       </bk-form-item>
-      <bk-form-item label="确认密码" property="confirmPassword" required>
-        <bk-input :class="{ 'is-error': isError }" v-model="formData.confirmPassword" @input="changePassword" />
-        <p class="error" v-show="isError">两次输入的密码不一致，请重新输入</p>
+      <bk-form-item :label="$t('确认密码')" property="confirmPassword" required>
+        <bk-input
+          :class="{ 'is-error': isError }"
+          type="password"
+          v-model="formData.confirmPassword"
+          @input="changePassword" />
+        <p class="error" v-show="isError">{{ $t('两次输入的密码不一致，请重新输入') }}</p>
       </bk-form-item>
     </bk-form>
   </bk-dialog>
@@ -36,7 +40,9 @@
 import { Message } from 'bkui-vue';
 import { reactive, ref, watch } from 'vue';
 
+import { logout } from '@/common/auth';
 import { putPersonalCenterUserPassword } from '@/http/personalCenterFiles';
+import { t } from '@/language/index';
 
 const emit = defineEmits(['closed']);
 const props = defineProps({
@@ -81,7 +87,8 @@ const confirm = async () => {
       new_password: formData.newPassword,
     });
     emit('closed');
-    Message({ theme: 'success', message: '修改密码成功' });
+    Message({ theme: 'success', message: t('修改密码成功') });
+    logout();
   } catch (e) {
     console.warn(e);
   } finally {

diff --git a/src/pages/src/components/Empty.vue b/src/pages/src/components/Empty.vue
@@ -1,24 +1,24 @@
 <template>
   <div class="no-data-wrapper">
-    <bk-exception v-if="isDataEmpty" type="empty" scene="part" description="暂无数据" />
+    <bk-exception v-if="isDataEmpty" type="empty" scene="part" :description="$t('暂无数据')" />
     <bk-exception v-if="isSearchEmpty" type="search-empty" scene="part">
-      搜索结果为空
+      {{ $t('搜索结果为空') }}
       <p>
-        可以尝试&nbsp;调整关键词&nbsp;或&nbsp;
+        {{ $t('可以尝试 调整关键词 或') }}
         <bk-button
           text
           theme="primary"
-          @click="$emit('handleEmpty')">清空筛选条件
+          @click="$emit('handleEmpty')">{{ $t('清空筛选条件') }}
         </bk-button>
       </p>
     </bk-exception>
     <bk-exception v-if="isDataError" type="500" scene="part">
-      数据获取异常
+      {{ $t('数据获取异常') }}}
       <bk-button
         text
         theme="primary"
         class="empty-search-text"
-        @click="$emit('handleUpdate')">刷新</bk-button>
+        @click="$emit('handleUpdate')">{{ $t('刷新') }}</bk-button>
     </bk-exception>
   </div>
 </template>

diff --git a/src/pages/src/components/ResetPassword.vue b/src/pages/src/components/ResetPassword.vue
@@ -14,10 +14,10 @@
       ref="formRef"
       :model="formData"
       :rules="rules">
-      <bk-form-item label="新密码" property="password" required>
+      <bk-form-item :label="$t('新密码')" property="password" required>
         <div style="display: flex;">
-          <bk-input v-model="formData.password" />
-          <bk-button outline theme="primary" class="ml-[8px]" @click="handleRandomPassword">随机生成</bk-button>
+          <bk-input type="password" v-model="formData.password" />
+          <bk-button outline theme="primary" class="ml-[8px]" @click="handleRandomPassword">{{ $t('随机生成') }}</bk-button>
         </div>
       </bk-form-item>
     </bk-form>
@@ -30,6 +30,7 @@ import { reactive, ref, watch } from 'vue';
 
 import useValidate from '@/hooks/use-validate';
 import { putUsersPassword, randomPasswords } from '@/http/dataSourceFiles';
+import { t } from '@/language/index';
 
 const validate = useValidate();
 const emit = defineEmits(['closed', 'changePassword']);
@@ -78,7 +79,7 @@ const confirm = async () => {
       password: formData.password,
     });
     emit('changePassword');
-    Message({ theme: 'success', message: '重置密码成功' });
+    Message({ theme: 'success', message: t('重置密码成功') });
   } catch (e) {
     isLoading.value = false;
   } finally {

diff --git a/src/pages/src/components/custom-fields/view.vue b/src/pages/src/components/custom-fields/view.vue
@@ -4,7 +4,7 @@
       class="details-content-item"
       v-for="(item, index) in extras"
       :key="index">
-      <span class="details-content-key">{{ item.display_name }}：</span>
+      <bk-overflow-title class="details-content-key" type="tips">{{ item.display_name }}：</bk-overflow-title>
       <bk-overflow-title class="details-content-value" type="tips">
         {{ customFieldsMap(item) }}
       </bk-overflow-title>

diff --git a/src/pages/src/components/field-mapping/FieldMapping.vue b/src/pages/src/components/field-mapping/FieldMapping.vue
@@ -2,9 +2,9 @@
   <div>
     <div class="field-mapping">
       <div class="field-title">
-        <bk-form-item class="w-[240px]" label="用户管理字段" required />
-        <bk-form-item class="w-[100px]" label="映射关系" />
-        <bk-form-item class="w-[240px]" label="API返回字段" required />
+        <bk-form-item class="w-[240px]" :label="$t('用户管理字段')" required />
+        <bk-form-item class="w-[100px]" :label="$t('映射关系')" />
+        <bk-form-item class="w-[240px]" :label="$t('API返回字段')" required />
       </div>
       <div class="field-content" v-for="(item, index) in fieldSettingData.field_mapping.builtin_fields" :key="index">
         <div class="field-name">
@@ -90,14 +90,16 @@
     </div>
     <bk-button class="add-field" text theme="primary" @click="() => emit('handleAddField')">
       <i class="user-icon icon-add-2 mr8" />
-      新增字段映射
+      {{ $t('新增字段映射') }}
     </bk-button>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue';
 
+import { t } from '@/language/index';
+
 defineProps({
   fieldSettingData: {
     type: Object,
@@ -116,8 +118,8 @@ defineProps({
 const emit = defineEmits(['changeApiFields', 'handleAddField', 'handleDeleteField', 'changeCustomField']);
 
 const customConditions = ref([
-  { name: '直接', key: 'direct' },
-  { name: '表达式', key: 'expression' },
+  { name: t('直接'), key: 'direct' },
+  { name: t('表达式'), key: 'expression' },
 ]);
 </script>
 

diff --git a/src/pages/src/components/notify-editor/NotifyEditor.less b/src/pages/src/components/notify-editor/NotifyEditor.less
@@ -2,6 +2,7 @@
   .password-header {
     display: flex;
     line-height: 50px;
+    justify-content: space-between;
 
     .bk-checkbox-group {
       display: flex;
@@ -23,15 +24,8 @@
       }
     }
 
-    .checkbox-zh {
-      width: 85% !important;
-    }
-
-    .checkbox-en {
-      width: 75% !important;
-    }
-
     .edit-info {
+      margin-right: 20px;
       color: #3A84FF;
 
       :hover {
@@ -45,6 +39,7 @@
   .password-header {
     display: flex;
     border-bottom: 1px solid #dcdee5;
+    justify-content: space-between;
 
     .active-tab {
       border-bottom: 2px solid #3A84FF;

diff --git a/src/pages/src/components/notify-editor/NotifyEditorTemplate.vue b/src/pages/src/components/notify-editor/NotifyEditorTemplate.vue
@@ -8,43 +8,43 @@
         data-test-id="list_emailInfo">
         <ul class="template-config clearfix">
           <li class="email-block">
-            <h3 class="email-block-name">{{createAccountEmail ? createAccountEmail : '即将到期提醒'}}</h3>
+            <h3 class="email-block-name">{{createAccountEmail ? createAccountEmail : $t('即将到期提醒')}}</h3>
             <div class="email-info clearfix">
-              <p class="title">标题<span class="star">*</span></p>
+              <p class="title">{{ $t('标题') }}<span class="star">*</span></p>
               <bk-input
                 type="text" class="input-style"
                 v-model="expiringEmail.title" />
             </div>
             <div class="email-info clearfix">
-              <p class="title">发件人<span class="star">*</span></p>
+              <p class="title">{{ $t('发件人') }}<span class="star">*</span></p>
               <bk-input
                 type="text" class="input-style"
                 v-model="expiringEmail.sender" />
             </div>
             <div class="email-info clearfix">
-              <p class="title" style="height: 260px">正文<span class="star">*</span></p>
+              <p class="title" style="height: 260px">{{ $t('正文') }}<span class="star">*</span></p>
               <edtiorTemplate
                 :toolbar-config="emailConfig"
                 :html-text="expiringEmail.content_html"
                 @updateContent="(html, text) => emit('handleEditorText', html, text, expiringEmailKey, 'email')" />
             </div>
           </li>
           <li class="email-block">
-            <h3 class="email-block-name">{{resetPasswordEmail ? resetPasswordEmail : '已过期提醒'}}</h3>
+            <h3 class="email-block-name">{{resetPasswordEmail ? resetPasswordEmail : $t('已过期提醒')}}</h3>
             <div class="email-info clearfix">
-              <p class="title">标题<span class="star">*</span></p>
+              <p class="title">{{ $t('标题') }}<span class="star">*</span></p>
               <bk-input
                 type="text" class="input-style"
                 v-model="expiredEmail.title" />
             </div>
             <div class="email-info clearfix">
-              <p class="title">发件人<span class="star">*</span></p>
+              <p class="title">{{ $t('发件人') }}<span class="star">*</span></p>
               <bk-input
                 type="text" class="input-style"
                 v-model="expiredEmail.sender" />
             </div>
             <div class="email-info clearfix">
-              <p class="title" style="height: 260px">正文<span class="star">*</span></p>
+              <p class="title" style="height: 260px">{{ $t('正文') }}<span class="star">*</span></p>
               <edtiorTemplate
                 :toolbar-config="emailConfig"
                 :html-text="expiredEmail.content_html"
@@ -59,19 +59,19 @@
         data-test-id="list_emailInfo">
         <ul class="template-config clearfix">
           <li class="email-block">
-            <h3 class="email-block-name">{{createAccountSms ? createAccountSms : '即将到期提醒'}}</h3>
+            <h3 class="email-block-name">{{createAccountSms ? createAccountSms : $t('即将到期提醒')}}</h3>
             <div class="email-info clearfix">
-              <p class="title" style="height: 260px">正文<span class="star">*</span></p>
+              <p class="title" style="height: 260px">{{ $t('正文') }}<span class="star">*</span></p>
               <edtiorTemplate
                 :toolbar-config="infoConfig"
                 :html-text="expiringSms.content_html"
                 @updateContent="(html, text) => emit('handleEditorText', html, text, expiringSmsKey, 'sms')" />
             </div>
           </li>
           <li class="email-block">
-            <h3 class="email-block-name">{{resetPasswordSms ? resetPasswordSms : '已过期提醒'}}</h3>
+            <h3 class="email-block-name">{{resetPasswordSms ? resetPasswordSms : $t('已过期提醒')}}</h3>
             <div class="email-info clearfix">
-              <p class="title" style="height: 260px">正文<span class="star">*</span></p>
+              <p class="title" style="height: 260px">{{ $t('正文') }}<span class="star">*</span></p>
               <edtiorTemplate
                 :toolbar-config="infoConfig"
                 :html-text="expiredSms.content_html"

diff --git a/src/pages/src/components/notify-editor/editorTemplate.vue b/src/pages/src/components/notify-editor/editorTemplate.vue
@@ -25,6 +25,7 @@ import { computed, defineEmits, defineProps, onBeforeUnmount, ref, shallowRef }
 import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
 
 import '@wangeditor/editor/dist/css/style.css';
+import { t } from '@/language/index';
 
 const props = defineProps({
   htmlText: {
@@ -43,7 +44,7 @@ const editorRef = shallowRef();
 
 // 内容 HTML
 const valueHtml = computed(() => props.htmlText);
-const editorConfig = { placeholder: '请输入内容...' };
+const editorConfig = { placeholder: t('请输入内容...') };
 const mode = ref('simple');
 const isActive = ref(false);
 

diff --git a/src/pages/src/components/phoneInput.vue b/src/pages/src/components/phoneInput.vue
@@ -5,7 +5,7 @@
       ref="telRef"
       :class="['select-text', { 'input-error': telError }]"
       v-model="data.phone"
-      placeholder="请输入"
+      :placeholder="$t('请输入')"
       :disabled="disabled"
       @blur="verifyInput"
       @focus="hiddenVerify"
@@ -14,25 +14,25 @@
     <template v-if="tooltips">
       <bk-popover
         v-if="telError && data.phone"
-        content="请填写正确的手机号"
+        :content="$t('请填写正确的手机号')"
         placement="top"
       >
         <ExclamationCircleShape class="error-icon" />
       </bk-popover>
       <bk-popover
         v-if="telError && !data.phone"
-        content="必填项"
+        :content="$t('必填项')"
         placement="top"
       >
         <ExclamationCircleShape class="error-icon" />
       </bk-popover>
     </template>
     <template v-else>
       <p class="error-text" v-show="telError && data.phone">
-        请填写正确的手机号
+        {{ $t('请填写正确的手机号') }}
       </p>
       <p class="error-text" v-show="telError && !data.phone">
-        必填项
+        {{ $t('必填项') }}
       </p>
     </template>
   </div>