[Update] 修改i18n风格

2025-09-18 08:12:33 +00:00 · 2020-05-08 19:54:32 +08:00
parent 4eaab38493
commit 9d0bdd5f69
24 changed files with 165 additions and 181 deletions
--- a/src/components/ActionsGroup/index.vue
+++ b/src/components/ActionsGroup/index.vue
@@ -41,7 +41,7 @@ export default {
    moreActionsTitle: {
      type: String,
      default() {
-        return this.$tco('More actions')
+        return this.$ttc('moreActions')
      }
    }
  },
@@ -66,7 +66,7 @@ export default {
      return actions
    },
    iMoreActionsTitle() {
-      return this.moreActionsTitle || this.$tco('More actions')
+      return this.moreActionsTitle || this.$ttc('moreActions')
    }
  },
  mounted() {
--- a/src/components/ActiveCard/index.vue
+++ b/src/components/ActiveCard/index.vue
@@ -49,9 +49,9 @@ export default {
    HandleChangeAction(index, row) {
      this.$axios.patch(this.url, { is_active: row.is_active }
      ).then(res => {
-        this.$message.success(this.$tco('Update success'))
+        this.$message.success(this.$ttc('updateSuccessMsg'))
      }).catch(err => {
-        this.$message.error(this.$tco('Update failed' + ' ' + err))
+        this.$message.error(this.$ttc('updateFailedMsg' + ' ' + err))
      })
    }
  }
--- a/src/components/AutoDataForm/index.vue
+++ b/src/components/AutoDataForm/index.vue
@@ -52,6 +52,8 @@ export default {
      optionUrlMeta(this.url).then(data => {
        this.meta = data.actions[this.method.toUpperCase()] || {}
        this.generateColumns()
+      }).catch(err => {
+        console.log(err)
      }).finally(() => {
        this.loading = false
      })
--- a/src/components/AutoDataTable/index.vue
+++ b/src/components/AutoDataTable/index.vue
@@ -35,7 +35,7 @@ export default {
        this.meta = data.actions[this.method.toUpperCase()] || {}
        this.generateColumns()
      }).catch(() => {
-        this.totalConfig = this.config
+        // this.totalConfig = this.config
      }).finally(() => {
        this.loading = false
      })
@@ -50,7 +50,7 @@ export default {
        case 'actions':
          col = {
            prop: 'id',
-            label: this.$tco('Actions'),
+            label: this.$ttc('actions'),
            align: 'center',
            formatter: ActionsFormatter,
            width: '150px',
@@ -58,7 +58,7 @@ export default {
          }
          break
        case 'is_valid':
-          col.label = this.$tco('Validity')
+          col.label = this.$ttc('validity')
          col.formatter = BooleanFormatter
          col.align = 'center'
          col.width = '80px'
--- a/src/components/DataForm/index.vue
+++ b/src/components/DataForm/index.vue
@@ -14,8 +14,8 @@

    <el-form-item>
      <el-button v-for="button in moreButtons" :key="button.title" size="small" v-bind="button" @click="handleClick(button)">{{ button.title }}</el-button>
-      <el-button v-if="defaultButton" size="small" @click="resetForm('form')">{{ $tco('Reset') }}</el-button>
-      <el-button v-if="defaultButton" size="small" type="primary" @click="submitForm('form')">{{ $tco('Submit') }}</el-button>
+      <el-button v-if="defaultButton" size="small" @click="resetForm('form')">{{ $ttc('reset') }}</el-button>
+      <el-button v-if="defaultButton" size="small" type="primary" @click="submitForm('form')">{{ $ttc('submit') }}</el-button>
    </el-form-item>
  </ElFormRender>
 </template>
--- a/src/components/DetailCard/index.vue
+++ b/src/components/DetailCard/index.vue
@@ -22,7 +22,7 @@ export default {
    title: {
      type: String,
      default() {
-        return this.$tco('basicInfoTitle')
+        return this.$ttc('basicInfo')
      }
    },
    items: {
--- a/src/components/Dialog/index.vue
+++ b/src/components/Dialog/index.vue
@@ -7,8 +7,8 @@
    <slot />
    <div slot="footer" class="dialog-footer">
      <slot name="footer">
-        <el-button size="small" @click="onCancel">{{ $tco('Cancel') }}</el-button>
-        <el-button type="primary" size="small" @click="onConfirm">{{ $tco('Confirm') }}</el-button>
+        <el-button size="small" @click="onCancel">{{ $ttc('cancel') }}</el-button>
+        <el-button type="primary" size="small" @click="onConfirm">{{ $ttc('confirm') }}</el-button>
      </slot>
    </div>
  </el-dialog>
--- a/src/components/DialogAction/index.vue
+++ b/src/components/DialogAction/index.vue
@@ -1,6 +1,6 @@
 <template>
  <div>
-    <Dialog :title="$tco('Export')" :visible.sync="showExportDialog" center @confirm="handleDialogConfirm('export')" @cancel="handleDialogCancel('export')">
+    <Dialog :title="$ttc('export')" :visible.sync="showExportDialog" center @confirm="handleDialogConfirm('export')" @cancel="handleDialogCancel('export')">
      <el-form>
        <el-form-item :label="this.$t('action.ExportRange')" :label-width="'100px'">
          <el-radio v-model="exportOption" class="export-item" label="1">{{ this.$t('action.ExportAll') }}</el-radio>
@@ -12,12 +12,12 @@
    <Dialog :title="importTitle" :visible.sync="showImportDialog" center @confirm="handleDialogConfirm('import')" @cancel="handleDialogCancel('import')">
      <el-form>
        <el-form-item :label="importTitle" :label-width="'100px'">
-          <el-radio v-model="importOption" class="export-item" label="1">{{ this.$tco('Import') }}</el-radio>
-          <el-radio v-model="importOption" class="export-item" label="2">{{ this.$tco('Update') }}</el-radio>
+          <el-radio v-model="importOption" class="export-item" label="1">{{ this.$ttc('import') }}</el-radio>
+          <el-radio v-model="importOption" class="export-item" label="2">{{ this.$ttc('update') }}</el-radio>
        </el-form-item>
      </el-form>
-      <div v-if="importOption==='1'" style="margin-bottom:20px;margin-left: 55px;">{{ this.$t('action.DownloadTheImportedTemplateOrUseTheExportedCSVFormat') }} <a style="color: #428bca;" :href="downloadImportTempUrl">{{ this.$t('action.DownloadImportTemplate') }}</a></div>
-      <div v-else style="margin-bottom:20px;margin-left: 55px;">{{ this.$t('action.DownloadTheUpdatedTemplateOrUsTheExportedCSVFormat') }} <a style="color: #428bca;" @click="downloadUpdateTempUrl">{{ this.$t('action.DownloadUpdateTemplate') }}</a></div>
+      <div v-if="importOption==='1'" style="margin-bottom:20px;margin-left: 55px;">{{ this.$t('action.downloadTheImportedTemplateOrUseTheExportedCSVFormat') }} <a style="color: #428bca;" :href="downloadImportTempUrl">{{ this.$t('action.DownloadImportTemplate') }}</a></div>
+      <div v-else style="margin-bottom:20px;margin-left: 55px;">{{ this.$t('action.downloadTheUpdatedTemplateOrUsTheExportedCSVFormat') }} <a style="color: #428bca;" @click="downloadUpdateTempUrl">{{ this.$t('action.DownloadUpdateTemplate') }}</a></div>

      <div style="margin-left:55px;">
        <el-upload
@@ -27,8 +27,8 @@
          list-type="text/csv"
          :limit="1"
        >
-          <el-button size="small" type="primary">{{ this.$t('action.Upload') }}</el-button>
-          <div slot="tip" class="el-upload__tip">{{ this.$t('action.OnlyCSVFilesCanBeUploaded') }}</div>
+          <el-button size="small" type="primary">{{ this.$t('action.upload') }}</el-button>
+          <div slot="tip" class="el-upload__tip">{{ this.$t('action.onlyCSVFilesCanBeUploaded') }}</div>
        </el-upload>
      </div>
    </Dialog>
@@ -69,9 +69,9 @@ export default {
    },
    importTitle() {
      if (this.importOption === '1') {
-        return this.$tco('Import')
+        return this.$ttc('import')
      } else {
-        return this.$tco('Update')
+        return this.$ttc('update')
      }
    },
    upLoadUrl() {
--- a/src/components/ListTable/TableAction.vue
+++ b/src/components/ListTable/TableAction.vue
@@ -115,7 +115,7 @@ export default {
          callback: this.defaultBulkDeleteCallback
        },
        {
-          title: this.$tc('Update selected'),
+          title: this.$tc('updateSelected'),
          name: 'actionUpdateSelected',
          can: (rows) => rows.length > 0,
          has: this.hasBulkUpdate,
@@ -159,7 +159,7 @@ export default {
    },
    defaultBulkDeleteCallback(rows) {
      const msg = this.$tc('Are you sure to delete') + ' ' + rows.length + ' ' + this.$tc('rows')
-      const title = this.$tc('Info')
+      const title = this.$ttc('info')
      const performDelete = this.performBulkDelete || this.defaultPerformBulkDelete
      this.$alert(msg, title, {
        type: 'warning',
--- a/src/components/ListTable/formatters/ActionsFormatter.vue
+++ b/src/components/ListTable/formatters/ActionsFormatter.vue
@@ -19,7 +19,7 @@ const defaultUpdateCallback = function({ row, col }) {

 const defaultDeleteCallback = function({ row, col, cellValue, reload }) {
  const msg = this.$tco('Are you sure to delete') + ' "' + row.name + '"'
-  const title = this.$tco('Info')
+  const title = this.$ttc('info')
  const performDelete = this.colActions.performDelete
  this.$alert(msg, title, {
    type: 'warning',
--- a/src/components/QuickActions/index.vue
+++ b/src/components/QuickActions/index.vue
@@ -23,7 +23,7 @@ export default {
    title: {
      type: String,
      default() {
-        return this.$tco('Quick update')
+        return this.$tco('quickUpdate')
      }
    },
    actions: {
--- a/src/components/RelationCard/index.vue
+++ b/src/components/RelationCard/index.vue
@@ -8,7 +8,7 @@
      </tr>
      <tr>
        <td colspan="2">
-          <el-button :type="type" size="small" :loading="submitLoading" @click="addObjects">{{ $tco('Add') }}</el-button>
+          <el-button :type="type" size="small" :loading="submitLoading" @click="addObjects">{{ $ttc('add') }}</el-button>
        </td>
      </tr>
      <template v-if="showHasObjects">
--- a/src/i18n/i18n.js
+++ b/src/i18n/i18n.js
@@ -15,9 +15,6 @@ const i18n = new VueI18n({
  messages
 })
 locale.i18n((key, value) => i18n.t(key, value)) // 重点: 为了实现element插件的多语言切换
-Vue.prototype.$ti = (key) => {
-  return i18n.t(key.toLowerCase())
-}

 Vue.prototype.$tr = (key) => {
  return i18n.t('route.' + key)
@@ -37,13 +34,8 @@ Vue.prototype.$tco = (key) => {
  return i18n.t('common.' + key)
 }

-Vue.prototype.$tic = (key) => {
-  key = 'common.' + key
-  return i18n.t(key.toLowerCase())
-}
-
-Vue.prototype.$ti = (key) => {
-  i18n.t(key.toLowerCase())
+Vue.prototype.$ttc = (key) => {
+  return _.startCase(_.camelCase(i18n.t('common.' + key)))
 }

 export default i18n
--- a/src/i18n/langs/cn.js
+++ b/src/i18n/langs/cn.js
@@ -7,88 +7,84 @@ const cn = {
  header: {
    'language': '中文',
    'help': '帮助',
-    'Documents': '文档',
-    'CommercialSupport': '商业支持'
+    'documents': '文档',
+    'commercialSupport': '商业支持'
  },
  action: {
    'update': '更新',
    'delete': '删除',
-    'ExportRange': '导出范围',
-    'ExportAll': '导出全部',
-    'ExportOnlySelectedItems': '仅导出选中项',
-    'DownloadTheImportedTemplateOrUseTheExportedCSVFormat': '下载导入的模板或使用导出的csv格式',
-    'DownloadImportTemplate': '下载导入模板',
-    'DownloadTheUpdatedTemplateOrUsTheExportedCSVFormat': '下载更新的模板或使用导出的csv格式',
-    'DownloadUpdateTemplate': '下载更新模板',
-    'Upload': '点击上传',
-    'OnlyCSVFilesCanBeUploaded': '只能上传CSV文件'
+    'exportRange': '导出范围',
+    'exportAll': '导出全部',
+    'exportOnlySelectedItems': '仅导出选中项',
+    'downloadTheImportedTemplateOrUseTheExportedCSVFormat': '下载导入的模板或使用导出的csv格式',
+    'downloadImportTemplate': '下载导入模板',
+    'downloadTheUpdatedTemplateOrUsTheExportedCSVFormat': '下载更新的模板或使用导出的csv格式',
+    'downloadUpdateTemplate': '下载更新模板',
+    'upload': '点击上传',
+    'onlyCSVFilesCanBeUploaded': '只能上传CSV文件'
  },
  common: {
    'name': '名称',
-    'Name': '名称',
    'action': '动作',
-    'Action': '动作',
    'role': '角色',
    'username': '用户名',
-    'Language': '语言',
-    'Help': '帮助',
+    'language': '语言',
+    'help': '帮助',
    'more': '更多',
-    'Update': '更新',
    'update': '更新',
-    'Delete': '删除',
    'delete': '删除',
-    'Detail': '详情',
    'detail': '详情',
    'baseInfo': '基本信息',
-    'Created by': '创建人',
-    'Date Created': '创建日期',
-    'Comment': '备注',
-    'Create': '创建',
-    'More actions': '更多操作',
-    'Delete selected': '删除所选',
-    'Update selected': '更新所选',
-    'Delete success': '删除成功',
-    'Delete failed': '删除失败',
-    'Search': '搜索',
-    'Source': '来源',
-    'Status': '状态',
-    'Actions': '动作',
-    'Monitor': '监控',
-    'Run': '执行',
-    'Are you sure to delete': '你确定要删除',
-    'Info': '提示',
-    'More': '更多',
-    'Submit': '提交',
-    'Reset': '重置',
-    'This field is required': '这个字段是必填项',
-    'Validity': '有效性',
+    'createdBy': '创建人',
+    'dateCreated': '创建日期',
+    'comment': '备注',
+    'create': '创建',
+    'moreActions': '更多操作',
+    'deleteSelected': '删除所选',
+    'updateSelected': '更新所选',
+    'deleteSuccessMsg': '删除成功',
+    'deleteFailedMsg': '删除失败',
+    'search': '搜索',
+    'source': '来源',
+    'status': '状态',
+    'actions': '动作',
+    'monitor': '监控',
+    'run': '执行',
+    'deleteConfirmMsg': '你确定要删除',
+    'info': '提示',
+    'submit': '提交',
+    'reset': '重置',
+    'this field is required': '这个字段是必填项',
+    'validity': '有效性',
    'confirm': '确认',
-    'Confirm': '确认',
-    'Cancel': '取消',
    'cancel': '取消',
-    'Import': '导入',
-    'Export': '导出',
-    'Other': '其它',
-    'Create success': '创建成功',
-    'Update success': '更新成功',
-    'Update failed': '更新失败',
-    'Deactive selected': '禁用所选',
-    'Active selected': '激活所选',
+    'import': '导入',
+    'export': '导出',
+    'other': '其它',
+    'createSuccessMsg': '创建成功',
+    'updateSuccessMsg': '更新成功',
+    'updateFailedMsg': '更新失败',
+    'disableSelected': '禁用所选',
+    'activeSelected': '激活所选',
    'rows': '行',
-    'basicInfoTitle': '基本信息',
-    'Command filter': '命令过滤器',
-    'Add': '添加',
-    'Auth': '认证',
-    'Others': '其他',
-    'Members': '成员',
-    'Username': '用户名',
-    'Email': '邮件',
-    'Role': '角色',
-    'Date expired': '失效日期',
-    'Quick update': '快速更新',
-    'Send': '发送',
-    'Unblock': '解锁',
-    'Active': '激活中'
+    'basicInfo': '基本信息',
+    'commandFilter': '命令过滤器',
+    'add': '添加',
+    'auth': '认证',
+    'others': '其他',
+    'members': '成员',
+    'email': '邮件',
+    'dateExpired': '失效日期',
+    'quickUpdate': '快速更新',
+    'send': '发送',
+    'unblock': '解锁',
+    'active': '激活中',
+    'docs': '文档',
+    'support': '支持',
+    'profile': '个人信息',
+    'userPage': '用户页面',
+    'apiKey': 'API Key',
+    'logout': '退出'
  },
  route: {
    'dashboard': '仪表盘',
@@ -156,7 +152,8 @@ const cn = {
    'CommandFilterRulesCreate': ' 创建命令过滤器规则'
  },
  auth: {
-    'You have been logged out, Please log in again': '账号已退出，请重新登录',
+    // 'You have been logged out, Please log in again': '账号已退出，请重新登录',
+    'authExpireMsg': '账号已退出，请重新登录',
    'Re-Login': '重新登录'
  },
  // 用户模块翻译
@@ -166,30 +163,27 @@ const cn = {
    'userDetail': '用户详情',
    'name': '姓名',
    'username': '用户名',
-    'Username': '用户名',
-    'Role': '角色',
-    'User groups': '用户组',
+    'role': '角色',
+    'userGroups': '用户组',
    'email': '邮箱',
    'userGroup': '用户组',
-    'role': '角色',
-    'Group members': '组下成员',
-    'MFAcertification': 'MFA 认证',
+    'groupMembers': '组下成员',
+    'MFAAuth': 'MFA 认证',
    'source': '来源',
    'validity': '有效',
    'action': '操作',
    'update': '更新',
    'delete': '删除',
    'search': '搜索',
-    'create_by': '创建者',
-    'date_expired': '失效日期',
-    'date_joined': '创建日期',
-    'last_login': '最后登录',
-    'last_password_updated': '最后更新密码',
-    'usergrouplist': '用户组列表',
-    'createusergroup': '创建用户组',
+    'createBy': '创建者',
+    'dateExpired': '失效日期',
+    'dateJoined': '创建日期',
+    'lastLogin': '最后登录',
+    'lastPasswordUpdated': '最后更新密码',
+    'userGroupList': '用户组列表',
+    'createUserGroup': '创建用户组',
    'comment': '备注',
    'user': '用户',
-    'User': '用户',
    'admin': '管理员',
    'auditor': '审计员',
    'off': 'OFF',
@@ -197,41 +191,37 @@ const cn = {
    'local': '数据库',
    'disable': '禁用',
    'enable': '启用',
-    'force_enable': '强制启用',
-    'quick_modify': '快速修改',
+    'forceEnable': '强制启用',
+    'quickModify': '快速修改',
    'active': '激活中',
-    'force_enabled_mfa': '强制启用多因子认证',
-    'reset_maf': '重置多因子认证',
+    'forceEnabledMFA': '强制启用多因子认证',
+    'resetMFA': '重置多因子认证',
    'reset': '重置',
-    'send_reset_password_mail': '发送重置密码邮件',
-    'send_reset_ssh_key_mail': '发送重置密钥邮件',
+    'sendResetPasswordMail': '发送重置密码邮件',
+    'sendResetSshKeyMail': '发送重置密钥邮件',
    'send': '发送',
-    'user_group': '用户组',
-    'join_user_groups': '添加到用户组',
+    'joinUserGroups': '添加到用户组',
    'join': '加入',
-    'login_confirm': '登录复核',
+    'loginConfirm': '登录复核',
    'reviewers': '审批人',
    'confirm': '确认',
-    'user_permissions': '用户授权',
-    'asset_granted': '资产的授权',
-    'asset_permission': '授权资产',
-    'remote_app_granted': '授权的远程应用',
-    'remote_app_permission': '远程应用授权',
-    'database_app_granted': '授权的数据库应用',
-    'database_app_permission': '数据库应用授权',
-    'Account': '账户',
-    'Authentication': '认证',
-    'Secure': '安全',
-    'Date last login': '最后登录日期',
-    'Date password updated': '更新密码日期',
+    'userPermissions': '用户授权',
+    'assetsGranted': '资产的授权',
+    'assetPermission': '授权资产',
+    'remoteAppsGranted': '授权的远程应用',
+    'remoteAppsPermission': '远程应用授权',
+    'databaseAppsGranted': '授权的数据库应用',
+    'databaseAppsPermission': '数据库应用授权',
+    'account': '账户',
+    'authentication': '认证',
+    'secure': '安全',
+    'dateLastLogin': '最后登录日期',
+    'datePasswordUpdated': '更新密码日期',
    'MFA': '多因子认证',
-    'Source': '用户来源',
    'resetMFATitle': '重置多因子认证',
-    'Send reset password mail': '发送重置密码邮件',
    'resetPublicKeyTitle': '发送重置密钥邮件',
    'resetPasswordTitle': '发送重置密码邮件',
-    'Unblock user': '解除登录限制',
-    'Force enabled MFA': '强制启用多因子认证',
+    'unblockUser': '解除登录限制',
    'resetPasswordWarningMsg': '将失效用户当前密码，并发送重设密码邮件到用户邮箱',
    'resetPasswordSuccessMsg': '已发送邮件到用户邮箱',
    'resetPublicKeyWarningMsg': '将会失效用户当前密钥，并发送重置邮件到用户邮箱',
--- a/src/i18n/langs/en.js
+++ b/src/i18n/langs/en.js
@@ -126,7 +126,7 @@ const en = {
    'delete': 'Delete',
    'search': 'Search',
    'delete_selected': 'Delete selected',
-    'update_selected': 'Update selected',
+    'update_selected': 'updateSelected',
    'remove_from_this_node': 'Remove from this node',
    'deactive_selected': 'Deactive selected',
    'active_selected': 'Active selected',
--- a/src/layout/components/GenericCreateUpdateForm/index.vue
+++ b/src/layout/components/GenericCreateUpdateForm/index.vue
@@ -58,7 +58,7 @@ export default {
    updateSuccessMsg: {
      type: String,
      default: function() {
-        return this.$tco('Update success')
+        return this.$ttc('updateSuccessMsg')
      }
    },
    createSuccessNextRoute: {
--- a/src/layout/components/GenericDetailPage/index.vue
+++ b/src/layout/components/GenericDetailPage/index.vue
@@ -90,13 +90,13 @@ export default {
      return [
        {
          name: 'update',
-          title: this.$tco('Update'),
+          title: this.$ttc('update'),
          can: this.validActions.canUpdate,
          callback: this.validActions.updateCallback.bind(this)
        },
        {
          name: 'delete',
-          title: this.$tco('Delete'),
+          title: this.$ttc('delete'),
          can: this.validActions.canDelete,
          callback: this.validActions.deleteCallback.bind(this)
        }
@@ -125,7 +125,7 @@ export default {
  methods: {
    defaultDelete() {
      const msg = this.$tco('Are you sure to delete') + ' ' + this.iTitle + ' ?'
-      const title = this.$tco('Info')
+      const title = this.$ttc('info')
      const performDelete = async function() {
        const url = this.validActions.deleteApiUrl
        this.$log.debug('Start perform delete: ', url)
--- a/src/layout/components/NavHeader/AccountDropdown.vue
+++ b/src/layout/components/NavHeader/AccountDropdown.vue
@@ -7,10 +7,10 @@
        <i class="el-icon-arrow-down el-icon--right" />
      </span>
      <el-dropdown-menu slot="dropdown">
-        <el-dropdown-item icon="el-icon-user" command="profile">{{ $t('Profile') }}</el-dropdown-item>
-        <el-dropdown-item icon="el-icon-guide" command="changePage">{{ $t('User page') }}</el-dropdown-item>
-        <el-dropdown-item icon="el-icon-key" command="apiKey">{{ $t('API Key') }}</el-dropdown-item>
-        <el-dropdown-item divided command="logout">{{ $t('Logout') }}</el-dropdown-item>
+        <el-dropdown-item icon="el-icon-user" command="profile">{{ $ttc('profile') }}</el-dropdown-item>
+        <el-dropdown-item icon="el-icon-guide" command="changePage">{{ $ttc('userPage') }}</el-dropdown-item>
+        <el-dropdown-item icon="el-icon-key" command="apiKey">{{ $ttc('apiKey') }}</el-dropdown-item>
+        <el-dropdown-item divided command="logout">{{ $ttc('logout') }}</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
--- a/src/layout/components/NavHeader/index.vue
+++ b/src/layout/components/NavHeader/index.vue
@@ -7,18 +7,18 @@
      <div class="header-item">
        <el-dropdown>
          <span class="el-dropdown-link">
-            {{ $t('common.Help') }}<i class="el-icon-arrow-down el-icon--right" />
+            {{ $ttc('help') }}<i class="el-icon-arrow-down el-icon--right" />
          </span>
          <el-dropdown-menu slot="dropdown">
-            <el-dropdown-item icon="el-icon-plus">{{ $t('Docs') }}</el-dropdown-item>
-            <el-dropdown-item icon="el-icon-circle-plus">{{ $t('Support') }}</el-dropdown-item>
+            <el-dropdown-item icon="el-icon-plus">{{ $ttc('docs') }}</el-dropdown-item>
+            <el-dropdown-item icon="el-icon-circle-plus">{{ $ttc('support') }}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div class="header-item">
        <el-dropdown>
          <span class="el-dropdown-link">
-            {{ $t('common.Language') }}<i class="el-icon-arrow-down el-icon--right" />
+            {{ $ttc('language') }}<i class="el-icon-arrow-down el-icon--right" />
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="changeLangToZH">中文(简体)</el-dropdown-item>
--- a/src/views/assets/SystemUser/SystemUserCreateUpdate.vue
+++ b/src/views/assets/SystemUser/SystemUserCreateUpdate.vue
@@ -23,7 +23,7 @@ export default {

      },
      fields: [
-        [this.$tic('basicInfoTitle'), ['name', 'login_mode', 'username', 'username_same_with_user', 'priority', 'protocol']],
+        [this.$ttc('basicInfo'), ['name', 'login_mode', 'username', 'username_same_with_user', 'priority', 'protocol']],
        [this.$tco('Auth'), ['auto_generate_key', 'password', 'auto_push']],
        [this.$tco('Command filter'), ['cmd_filters']],
        [this.$tco('Others'), ['sftp_root', 'sudo', 'shell', 'comment']]
--- a/src/views/assets/SystemUser/SystemUserDetail/AutoPushCard.vue
+++ b/src/views/assets/SystemUser/SystemUserDetail/AutoPushCard.vue
@@ -47,9 +47,9 @@ export default {
    HandleChangeAction(index, row) {
      this.$axios.patch(this.url, { auto_push: row.auto_push }
      ).then(res => {
-        this.$message.success(this.$tco('Update success'))
+        this.$message.success(this.$ttc('updateSuccessMsg'))
      }).catch(err => {
-        this.$message.error(this.$tco('Update failed' + ' ' + err))
+        this.$message.error(this.$ttc('updateFailedMsg' + ' ' + err))
      })
    }
  }
--- a/src/views/users/groups/UserGroupDetail/index.vue
+++ b/src/views/users/groups/UserGroupDetail/index.vue
@@ -25,7 +25,7 @@ export default {
        activeMenu: 'GroupInfo',
        submenu: [
          {
-            title: this.$tic('basicInfoTitle'),
+            title: this.$ttc('basicInfo'),
            name: 'GroupInfo'
          },
          {
--- a/src/views/users/users/UserDetail/UserInfo.vue
+++ b/src/views/users/users/UserDetail/UserInfo.vue
@@ -31,7 +31,7 @@ export default {
    return {
      quickActions: [
        {
-          title: this.$tco('Active'),
+          title: this.$ttc('active'),
          type: 'switcher',
          attrs: {
            model: this.object.is_active
@@ -50,12 +50,12 @@ export default {
          title: this.$t('users.resetMFATitle'),
          attrs: {
            type: 'primary',
-            label: this.$tco('Reset')
+            label: this.$ttc('reset')
          },
          callbacks: {
            click: function() {
              const warnMsg = vm.$t('users.resetMFAWarningMsg')
-              const warnTitle = vm.$tco('Info')
+              const warnTitle = vm.$ttc('info')
              const url = `/api/v1/users/users/${vm.object.id}/otp/reset/`
              const successMsg = vm.$t('users.resetMFAdSuccessMsg')
              vm.$confirm(warnMsg, warnTitle, {
@@ -81,12 +81,12 @@ export default {
          title: this.$t('users.resetPasswordTitle'),
          attrs: {
            type: 'primary',
-            label: this.$tco('Send')
+            label: this.$ttc('send')
          },
          callbacks: {
            click: function() {
              const warnMsg = vm.$t('users.resetPasswordWarningMsg')
-              const warnTitle = vm.$tco('Info')
+              const warnTitle = vm.$ttc('Info')
              const url = `/api/v1/users/users/${vm.object.id}/password/reset/`
              const successMsg = vm.$t('users.resetPasswordSuccessMsg')
              vm.$confirm(warnMsg, warnTitle, {
@@ -112,12 +112,12 @@ export default {
          title: this.$t('users.resetPublicKeyTitle'),
          attrs: {
            type: 'primary',
-            label: this.$tco('Send')
+            label: this.$ttc('send')
          },
          callbacks: {
            click: function() {
              const warnMsg = vm.$t('users.resetPublicKeyWarningMsg')
-              const warnTitle = vm.$tco('Info')
+              const warnTitle = vm.$ttc('info')
              const url = `/api/v1/users/users/${vm.object.id}/pubkey/reset/`
              const successMsg = vm.$t('users.resetPasswordSuccessMsg')
              vm.$confirm(warnMsg, warnTitle, {
@@ -140,10 +140,10 @@ export default {
          }
        },
        {
-          title: this.$t('users.Unblock user'),
+          title: this.$tt('users.unblockUser'),
          attrs: {
            type: 'primary',
-            label: this.$tco('Unblock'),
+            label: this.$ttc('unblock'),
            disabled: !this.object.login_blocked
          },
          callbacks: {
@@ -160,7 +160,7 @@ export default {
      ],
      relationConfig: {
        icon: 'fa-user',
-        title: this.$t('users.User groups'),
+        title: this.$tt('users.userGroups'),
        objectsAjax: {
          url: '/api/v1/users/groups/?fields_size=mini&order=name'
        },
@@ -189,51 +189,51 @@ export default {
    detailItems() {
      return [
        {
-          key: this.$tco('Name'),
+          key: this.$ttc('name'),
          value: this.object.name
        },
        {
-          key: this.$tco('Username'),
+          key: this.$ttc('username'),
          value: this.object.username
        },
        {
-          key: this.$tco('Email'),
+          key: this.$ttc('email'),
          value: this.object.email
        },
        {
-          key: this.$tco('Role'),
+          key: this.$ttc('role'),
          value: this.object.role_display
        },
        {
-          key: this.$t('users.MFA'),
+          key: this.$tt('users.MFA'),
          value: this.object.mfa_level_display
        },
        {
-          key: this.$t('users.Source'),
+          key: this.$tt('users.source'),
          value: this.object.source_display
        },
        {
-          key: this.$tco('Date expired'),
+          key: this.$ttc('dateExpired'),
          value: this.object.date_expired
        },
        {
-          key: this.$tco('Created by'),
+          key: this.$ttc('createdBy'),
          value: this.object.created_by
        },
        {
-          key: this.$tco('Date Created'),
+          key: this.$ttc('dateCreated'),
          value: this.object.date_joined
        },
        {
-          key: this.$t('users.Date last login'),
+          key: this.$tt('users.dateLastLogin'),
          value: this.object.last_login
        },
        {
-          key: this.$t('users.Date password updated'),
+          key: this.$tt('users.datePasswordUpdated'),
          value: this.object.date_password_last_updated
        },
        {
-          key: this.$tco('Comment'),
+          key: this.$ttc('comment'),
          value: this.object.comment
        }
      ]
--- a/src/views/users/users/UserDetail/index.vue
+++ b/src/views/users/users/UserDetail/index.vue
@@ -25,11 +25,11 @@ export default {
        activeMenu: 'UserInfo',
        submenu: [
          {
-            title: this.$tt('common.basicInfoTitle'),
+            title: this.$ttc('basicInfo'),
            name: 'UserInfo'
          },
          {
-            title: this.$tt('perms.grantedAssetsTitle'),
+            title: this.$tt('perms.grantedAssets'),
            name: 'UserAssetPermission'
          }
        ],