feat(ui): update i18n

cmdb-ui/src/components/CustomIconSelect/constants.js

@@ -47,7 +47,7 @@ export const commonIconList = ['changyong-ubuntu',
 export const linearIconList = [
   {
     value: 'database',
-    label: '数据库',
+    label: 'components.database',
     list: [{
       value: 'icon-xianxing-DB2',
       label: 'DB2'
@@ -81,7 +81,7 @@ export const linearIconList = [
     }]
   }, {
     value: 'system',
-    label: '操作系统',
+    label: 'components.system',
     list: [{
       value: 'icon-xianxing-Windows',
       label: 'Windows'
@@ -106,7 +106,7 @@ export const linearIconList = [
     }]
   }, {
     value: 'language',
-    label: '语言',
+    label: 'components.language',
     list: [{
       value: 'icon-xianxing-python',
       label: 'python'
@@ -137,7 +137,7 @@ export const linearIconList = [
     }]
   }, {
     value: 'status',
-    label: '状态',
+    label: 'components.status',
     list: [{
       value: 'icon-xianxing-yiwen',
       label: '疑问'
@@ -177,7 +177,7 @@ export const linearIconList = [
     }]
   }, {
     value: 'icon-xianxing-application',
-    label: '常用组件',
+    label: 'components.commonComponent',
     list: [{
       value: 'icon-xianxing-yilianjie',
       label: '已连接'
@@ -310,7 +310,7 @@ export const linearIconList = [
     }]
   }, {
     value: 'data',
-    label: '数据',
+    label: 'components.data',
     list: [{
       value: 'icon-xianxing-bingzhuangtu',
       label: '饼状图'
@@ -387,7 +387,7 @@ export const linearIconList = [
 export const fillIconList = [
   {
     value: 'database',
-    label: '数据库',
+    label: 'components.database',
     list: [{
       value: 'icon-shidi-DB2',
       label: 'DB2'
@@ -421,7 +421,7 @@ export const fillIconList = [
     }]
   }, {
     value: 'system',
-    label: '操作系统',
+    label: 'components.system',
     list: [{
       value: 'icon-shidi-Windows',
       label: 'Windows'
@@ -446,7 +446,7 @@ export const fillIconList = [
     }]
   }, {
     value: 'language',
-    label: '语言',
+    label: 'components.language',
     list: [{
       value: 'icon-shidi-python',
       label: 'python'
@@ -477,7 +477,7 @@ export const fillIconList = [
     }]
   }, {
     value: 'status',
-    label: '状态',
+    label: 'components.status',
     list: [{
       value: 'icon-shidi-yiwen',
       label: '疑问'
@@ -517,7 +517,7 @@ export const fillIconList = [
     }]
   }, {
     value: 'icon-shidi-application',
-    label: '常用组件',
+    label: 'components.commonComponent',
     list: [{
       value: 'icon-shidi-yilianjie',
       label: '已连接'
@@ -650,7 +650,7 @@ export const fillIconList = [
     }]
   }, {
     value: 'data',
-    label: '数据',
+    label: 'components.data',
     list: [{
       value: 'icon-shidi-bingzhuangtu',
       label: '饼状图'
@@ -727,7 +727,7 @@ export const fillIconList = [
 export const multicolorIconList = [
   {
     value: 'database',
-    label: '数据库',
+    label: 'components.database',
     list: [{
       value: 'caise-TIDB',
       label: 'TIDB'
@@ -773,7 +773,7 @@ export const multicolorIconList = [
     }]
   }, {
     value: 'cloud',
-    label: '云',
+    label: 'components.cloud',
     list: [{
       value: 'AWS',
       label: 'AWS'
@@ -819,7 +819,7 @@ export const multicolorIconList = [
     }]
   }, {
     value: 'system',
-    label: '操作系统',
+    label: 'components.system',
     list: [{
       value: 'ciase-aix',
       label: 'aix'
@@ -847,7 +847,7 @@ export const multicolorIconList = [
     }]
   }, {
     value: 'language',
-    label: '语言',
+    label: 'components.language',
     list: [{
       value: 'caise-python',
       label: 'python'
@@ -878,7 +878,7 @@ export const multicolorIconList = [
     }]
   }, {
     value: 'status',
-    label: '状态',
+    label: 'components.status',
     list: [{
       value: 'caise-yiwen',
       label: '疑问'
@@ -918,7 +918,7 @@ export const multicolorIconList = [
     }]
   }, {
     value: 'caise-application',
-    label: '常用组件',
+    label: 'components.commonComponent',
     list: [{
       value: 'caise-websphere',
       label: 'WebSphere'
@@ -1180,7 +1180,7 @@ export const multicolorIconList = [
     }]
   }, {
     value: 'data',
-    label: '数据',
+    label: 'components.data',
     list: [{
       value: 'caise-bingzhuangtu',
       label: '饼状图'

cmdb-ui/src/components/CustomIconSelect/index.vue

@@ -33,7 +33,7 @@
         <template v-if="iconList && iconList.length">
           <template v-if="currentIconType !== '4'">
             <div v-for="category in iconList" :key="category.value">
-              <h4 class="category">{{ category.label }}</h4>
+              <h4 class="category">{{ $t(category.label) }}</h4>
               <div class="custom-icon-select-popover-content-wrapper">
                 <div
                   v-for="name in category.list"

cmdb-ui/src/components/Exception/ExceptionPage.vue

@@ -6,9 +6,9 @@
     </div>
     <div class="content">
       <h1>{{ config[type].title }}</h1>
-      <div class="desc">{{ config[type].desc }}</div>
+      <div class="desc">{{ $t(config[type].desc) }}</div>
       <div class="actions">
-        <a-button type="primary" @click="handleToHome">返回首页</a-button>
+        <a-button type="primary" @click="handleToHome">{{ $t('exception.backToHome') }}</a-button>
       </div>
     </div>
   </div>

cmdb-ui/src/components/Exception/type.js

@@ -2,17 +2,17 @@ const types = {
   403: {
     img: 'https://gw.alipayobjects.com/zos/rmsportal/wZcnGqRDyhPOEYFcZDnb.svg',
     title: '403',
-    desc: '抱歉，你无权访问该页面'
+    desc: 'exception.desc1'
   },
   404: {
     img: 'https://gw.alipayobjects.com/zos/rmsportal/KpnpchXsobRgLElEozzI.svg',
     title: '404',
-    desc: '抱歉，你访问的页面不存在或仍在开发中'
+    desc: 'exception.desc2'
   },
   500: {
     img: 'https://gw.alipayobjects.com/zos/rmsportal/RVRUAYdCGeYNBWoKiIwB.svg',
     title: '500',
-    desc: '抱歉，服务器出错了'
+    desc: 'exception.desc3'
   }
 }
 

cmdb-ui/src/lang/en.js

@@ -109,9 +109,25 @@ export default {
     default: 'default',
     tip: 'Tip',
     cmdbSearch: 'Search',
+    exception: {
+        backToHome: 'Back to home page',
+        desc1: 'Sorry, you are not authorized to access this page',
+        desc2: 'Sorry, the page you are visiting does not exist or is still under development',
+        desc3: 'Sorry, server error'
+    },
     pagination: {
         total: '{range0}-{range1} of {total} items'
     },
+    components: {
+        colorTagSelectTip: 'Enter or select tags',
+        database: 'Database',
+        system: 'System',
+        language: 'Language',
+        status: 'Status',
+        commonComponent: 'Common Component',
+        data: 'Data',
+        cloud: 'Cloud'
+    },
     topMenu: {
         personalCenter: 'My Profile',
         logout: 'Logout',

cmdb-ui/src/lang/zh.js

@@ -109,9 +109,25 @@ export default {
     default: '默认',
     tip: '提示',
     cmdbSearch: '搜索一下',
+    exception: {
+        backToHome: '返回首页',
+        desc1: '抱歉，你无权访问该页面',
+        desc2: '抱歉，你访问的页面不存在或仍在开发中',
+        desc3: '抱歉，服务器出错了'
+    },
     pagination: {
         total: '当前展示 {range0}-{range1} 条数据， 共 {total} 条'
     },
+    components: {
+        colorTagSelectTip: '选择或输入（回车确定）标签',
+        database: '数据库',
+        system: '操作系统',
+        language: '语言',
+        status: '状态',
+        commonComponent: '常用组件',
+        data: '数据',
+        cloud: '云'
+    },
     topMenu: {
         personalCenter: '个人中心',
         logout: '退出登录',

cmdb-ui/src/utils/util.js

@@ -1,8 +1,10 @@
 import _ from 'lodash'
+import i18n from '@/lang'
+
 export function timeFix() {
   const time = new Date()
   const hour = time.getHours()
-  return hour < 9 ? '早上好' : hour <= 11 ? '上午好' : hour <= 13 ? '中午好' : hour < 20 ? '下午好' : '晚上好'
+  return hour < 9 ? i18n.t('cs.login.welcomeTime1') : hour <= 11 ? i18n.t('cs.login.welcomeTime2') : hour <= 13 ? i18n.t('cs.login.welcomeTime3') : hour < 20 ? i18n.t('cs.login.welcomeTime4') : i18n.t('cs.login.welcomeTime5')
 }
 
 export function welcome() {

cmdb-ui/src/views/setting/auth/oauth2.vue

@@ -23,7 +23,7 @@
     <a-form-model-item :label="$t('cs.auth.oauth2.tokenUrl')" prop="token_url">
       <a-input v-model="form.token_url" :placeholder="$t('cs.auth.oauth2.tokenUrlPlaceholder')" />
     </a-form-model-item>
-    <SpanTitle>其他</SpanTitle>
+    <SpanTitle>{{ $t('cs.auth.other') }}</SpanTitle>
     <a-form-model-item :label="$t('cs.auth.oauth2.userInfo')" prop="user_info" :wrapper-col="{ span: 15 }">
       <vue-json-editor
         :style="{ '--custom-height': `${200}px` }"

cmdb-ui/src/views/setting/lang/en.js

@@ -445,6 +445,27 @@ const cs_en = {
     test: 'Test',
     selectApp: 'Select App',
   },
+  login: {
+    loginText: 'OneOps making operations simple',
+    username: 'Username/Email',
+    usernameRequired: 'Please input Username/Email',
+    password: 'Password',
+    passwordRequired: 'Please input Password',
+    captcha: 'Captcha',
+    captchaRequired: 'Please input Captcha',
+    loginBtn: 'Login',
+    autoLogin: 'Auto Login',
+    otherLoginWay: 'Other Login',
+    welcomeMessage: 'Welcome',
+    welcomeDesc: '{name} Welcome Back',
+    welcomeTime1: 'Good Morning',
+    welcomeTime2: 'Good Morning',
+    welcomeTime3: 'Good Afternoon',
+    welcomeTime4: 'Good Afternoon',
+    welcomeTime5: 'Good Evening',
+    oneDeviceLogin: 'Login on one device only',
+    logoutSoon: 'Logging Out Soon...',
+  }
 }
 
 export default cs_en

cmdb-ui/src/views/setting/lang/zh.js

@@ -443,5 +443,26 @@ const cs_zh = {
     test: '测试',
     selectApp: '选择应用',
   },
+  login: {
+    loginText: '维易科技 让运维变简单',
+    username: '用户名/邮箱',
+    usernameRequired: '请输入用户名或邮箱',
+    password: '密码',
+    passwordRequired: '请输入密码',
+    captcha: '图片验证码',
+    captchaRequired: '请输入验证码',
+    loginBtn: '登录',
+    autoLogin: '自动登录',
+    otherLoginWay: '其他登录方式',
+    welcomeMessage: '欢迎',
+    welcomeDesc: '{name} 欢迎回来',
+    welcomeTime1: '早上好',
+    welcomeTime2: '上午好',
+    welcomeTime3: '中午好',
+    welcomeTime4: '下午好',
+    welcomeTime5: '晚上好',
+    oneDeviceLogin: '只能在一个设备上登录',
+    logoutSoon: '即将登出...',
+  }
 }
 export default cs_zh

cmdb-ui/src/views/user/Login.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="ops-login">
     <div class="ops-login-left">
-      <span>维易科技 &nbsp;&nbsp; 让运维变简单</span>
+      <span>{{ $t('cs.login.loginText') }}</span>
     </div>
     <div class="ops-login-right">
       <img src="../../assets/logo_VECMDB.png" />
@@ -12,7 +12,7 @@
         @submit="handleSubmit"
         hideRequiredMark
         :colon="false">
-        <a-form-item label="用户名/邮箱">
+        <a-form-item :label="$t('cs.login.username')">
           <a-input
             size="large"
             type="text"
@@ -20,7 +20,10 @@
             v-decorator="[
               'username',
               {
-                rules: [{ required: true, message: '请输入用户名或邮箱' }, { validator: handleUsernameOrEmail }],
+                rules: [
+                  { required: true, message: $t('cs.login.usernameRequired') },
+                  { validator: handleUsernameOrEmail }
+                ],
                 validateTrigger: 'change',
               },
             ]"
@@ -28,19 +31,24 @@
           </a-input>
         </a-form-item>
 
-        <a-form-item label="密码">
+        <a-form-item :label="$t('cs.login.password')">
           <a-input
             size="large"
             type="password"
             autocomplete="false"
             class="ops-input"
-            v-decorator="['password', { rules: [{ required: true, message: '请输入密码' }], validateTrigger: 'blur' }]"
+            v-decorator="[
+              'password',
+              { rules: [{ required: true, message: $t('cs.login.passwordRequired') }], validateTrigger: 'blur' }
+            ]"
           >
           </a-input>
         </a-form-item>
 
         <a-form-item>
-          <a-checkbox v-decorator="['rememberMe', { valuePropName: 'checked' }]">自动登录</a-checkbox>
+          <a-checkbox v-decorator="['rememberMe', { valuePropName: 'checked' }]">
+            {{ $t('cs.login.autoLogin') }}
+          </a-checkbox>
         </a-form-item>
 
         <a-form-item style="margin-top:24px">
@@ -51,8 +59,9 @@
             class="login-button"
             :loading="state.loginBtn"
             :disabled="state.loginBtn"
-          >登录</a-button
           >
+            {{ $t('cs.login.loginBtn') }}
+          </a-button>
           <a-checkbox
             v-if="hasLDAP"
             v-model="auth_with_ldap"
@@ -62,7 +71,9 @@
         </a-form-item>
       </a-form>
       <template v-if="_enable_list && _enable_list.length >= 1">
-        <a-divider style="font-size:14px">其他登录方式</a-divider>
+        <a-divider style="font-size:14px">
+          {{ $t('cs.login.otherLoginWay') }}
+        </a-divider>
         <div style="text-align:center">
           <span v-for="(item, index) in _enable_list" :key="item.auth_type">
             <ops-icon :type="item.auth_type" />
@@ -183,8 +194,8 @@ export default {
       // 延迟 1 秒显示欢迎信息
       setTimeout(() => {
         this.$notification.success({
-          message: '欢迎',
+          message: this.$t('cs.login.welcomeMessage'),
-          description: `${timeFix()}，欢迎回来`,
+          description: this.$t('cs.login.welcomeDesc', { name: timeFix() }),
         })
       }, 1000)
     },