国际化

结构

src/locales/
├─ index.ts              # createI18n + setLocale + elementLocales 映射
└─ lang/
   ├─ zh-CN.ts
   └─ en-US.ts

使用 Composition API 模式（legacy: false），因此必须用 useI18n()，不能再用全局 $t（模板里除外）。

<script setup lang="ts">
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
</script>

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

在非组件代码（如 store、utils）里用导出的 t：

import { t } from '@/locales'
ElMessage.success(t('login.success'))

与 Element Plus 联动

切换语言时同时替换 Element Plus 的语言包，否则表格、分页、日期选择器仍是英文：

elementLocales = { 'zh-CN': zhCn, 'en-US': en }
// setLocale() 内部：i18n.global.locale.value = locale; 并更新 ElConfigProvider 的 locale

运行时切换

import { setLocale, getNextLocale } from '@/locales'

setLocale(getNextLocale())   // 中 → 英 → 中

当前语言写入 localStorage，刷新保持；同时通过 Accept-Language 请求头告知后端。

菜单标题的多语言

菜单的 title 字段存的是 i18n key（如 menu.user），不是中文原文。utils/page.ts 的 resolveTitle 会先查 i18n，查不到再回退到最后一段路径。

resolveTitle('menu.user')      // → '用户管理'
resolveTitle('随便一个字符串')  // → '随便一个字符串'

加一门新语言

1. 复制 src/locales/lang/zh-CN.ts 为 fr-FR.ts 并翻译。
2. 在 src/locales/index.ts 里注册：语言包 + Element Plus 语言包。
3. 完事，语言切换按钮会自动多出一项。

约定

• key 用点分命名 + 模块前缀：user.name role.dataScope monitor.online。
• 英文文案的占位符统一用 {n}：t('login.resendIn', { n: countdown })。
• 不要在业务代码里写死中文，也不要把翻译散落在各个 .vue 里。