国际化

Trix Admin 使用 Vue I18n 11.x 实现国际化，内置中英文支持。

语言文件

语言文件位于 src/locales/langs/：

locales/
├── langs/
│   ├── zh-cn.ts    # 中文
│   └── en-us.ts    # 英文
├── dayjs.ts        # dayjs 国际化
├── naive.ts        # NaiveUI 国际化
└── index.ts        # 入口文件

语言文件结构

// src/locales/langs/zh-cn.ts
export default {
  // 系统
  system: {
    title: 'Trix Admin'
  },
  // 通用
  common: {
    add: '新增',
    edit: '编辑',
    delete: '删除',
    search: '搜索',
    reset: '重置',
    confirm: '确认',
    cancel: '取消',
    save: '保存',
    loading: '加载中...',
    success: '操作成功',
    failed: '操作失败'
  },
  // 路由/菜单
  route: {
    home: '首页',
    login: '登录',
    system: '系统管理',
    'system-user': '用户管理',
    'system-role': '角色管理',
    'system-menu': '菜单管理'
  },
  // 主题配置
  theme: {
    themeSchema: {
      title: '主题模式',
      light: '亮色',
      dark: '暗色',
      auto: '跟随系统'
    },
    layoutMode: {
      title: '布局模式',
      vertical: '左侧菜单',
      horizontal: '顶部菜单'
    }
  },
  // 页面
  page: {
    login: {
      title: '登录',
      username: '用户名',
      password: '密码',
      rememberMe: '记住我',
      forgotPassword: '忘记密码？',
      login: '登录'
    }
  }
}

使用方式

在 Vue 组件中

<script setup lang="ts">
import { useI18n } from 'vue-i18n'

const { t } = useI18n()
</script>

<template>
  <NButton>{{ t('common.add') }}</NButton>
</template>

在 JSON Schema 中

使用 $t 函数：

{
  "com": "NButton",
  "children": "{{ $t('common.add') }}"
}

使用 i18nKey：

{
  "com": "NButton",
  "props": {
    "i18nKey": "common.add"
  }
}

在路由中

{
  path: 'user',
  name: 'system-user',
  meta: {
    title: '用户管理',
    i18nKey: 'route.system-user'  // 优先使用 i18nKey
  }
}

切换语言

使用组件

{
  "com": "LangSwitch"
}

编程方式

import { useAppStore } from '@/store/modules/app'

const appStore = useAppStore()

// 切换语言
appStore.setLocale('en-US')

在 JSON Schema 中

{
  "com": "NSelect",
  "model": "$app.locale",
  "props": {
    "options": [
      { "label": "简体中文", "value": "zh-CN" },
      { "label": "English", "value": "en-US" }
    ]
  },
  "events": {
    "update:value": {
      "call": "$methods.setLocale",
      "args": ["{{ $args[0] }}"]
    }
  }
}

添加新语言

1. 创建语言文件

// src/locales/langs/ja-jp.ts
export default {
  system: {
    title: 'Trix Admin'
  },
  common: {
    add: '追加',
    edit: '編集',
    delete: '削除'
    // ...
  }
}

2. 注册语言

// src/locales/index.ts
import zhCN from './langs/zh-cn'
import enUS from './langs/en-us'
import jaJP from './langs/ja-jp'

const messages = {
  'zh-CN': zhCN,
  'en-US': enUS,
  'ja-JP': jaJP
}

3. 添加语言选项

// src/typings/app.d.ts
type LangType = 'zh-CN' | 'en-US' | 'ja-JP'

NaiveUI 国际化

NaiveUI 组件的国际化在 src/locales/naive.ts 中配置：

import { zhCN, enUS, jaJP, dateZhCN, dateEnUS, dateJaJP } from 'naive-ui'

export const naiveLocales = {
  'zh-CN': zhCN,
  'en-US': enUS,
  'ja-JP': jaJP
}

export const naiveDateLocales = {
  'zh-CN': dateZhCN,
  'en-US': dateEnUS,
  'ja-JP': dateJaJP
}

dayjs 国际化

dayjs 的国际化在 src/locales/dayjs.ts 中配置：

import 'dayjs/locale/zh-cn'
import 'dayjs/locale/en'
import 'dayjs/locale/ja'

export const dayjsLocales = {
  'zh-CN': 'zh-cn',
  'en-US': 'en',
  'ja-JP': 'ja'
}

最佳实践

1. 按模块组织

export default {
  // 按功能模块组织
  user: {
    list: '用户列表',
    add: '添加用户',
    edit: '编辑用户'
  },
  role: {
    list: '角色列表',
    add: '添加角色'
  }
}

2. 使用占位符

export default {
  message: {
    deleteConfirm: '确定要删除 {name} 吗？',
    total: '共 {count} 条记录'
  }
}

使用：

{
  "com": "NText",
  "children": "{{ $t('message.total', { count: pagination.total }) }}"
}

3. 复数形式

export default {
  item: '{count} 个项目 | {count} 个项目'
}