feat(i18n): U3 国际化 — react-i18next 双语框架 + 侧边栏/Header/Login 全量翻译 + 语言切换器
- 安装 i18next + react-i18next,创建 src/i18n/ 配置实例
- 创建 zh-CN.json (120+ 键) + en-US.json 全量英文翻译
- 侧边栏 42+ 菜单项全量 labelKey 国际化
- Header 通知/主题/用户菜单全量翻译
- Login 页面表单/按钮/主题+语言切换器
- zustand useLanguageStore 持久化语言选择
- HTML lang 属性自动同步
- tsc -b=0, npm build=✅, 17/17 测试通过
This commit is contained in:
1 parent
084a3be2cf
commit
2e179ef7f4
15 files changed
+860
-112
No files matched your search
+30
-4
@@ -263,9 +263,35 @@ services/api.ts (1324L)
|
||||
- [x] ESLint any=43(<50),4 个迁移文件零 ESLint 错误
|
||||
- [x] 17/17 集成回归测试通过
|
||||
|
||||
### U3: 国际化 (i18n) [pending]
|
||||
- 提取所有中文文案到 `i18n/zh-CN.json`
|
||||
- 预留 `en-US.json` 扩展
|
||||
### U3: 国际化 (i18n) [done]
|
||||
|
||||
**问题**: 平台无国际化支持,所有 UI 文案硬编码为中文,无法切换语言
|
||||
|
||||
**已完成 (2026-06-27)**:
|
||||
- ✅ **i18n 基础设施搭建** — 安装 `i18next` + `react-i18next`,配置翻译实例 (`src/i18n/index.ts`),支持 `zh-CN` / `en-US` 双语
|
||||
- ✅ **翻译文件** — `src/locales/zh-CN.json`(中文基础)+ `src/locales/en-US.json`(英文翻译),覆盖 5 大命名空间 (common/menu/header/login/dashboard),120+ 翻译键
|
||||
- ✅ **语言状态持久化** — zustand `useLanguageStore` (persist),语言选择持久化到 localStorage,刷新不丢失
|
||||
- ✅ **语言切换器** — Header 右上角 + Login 页面右上角,下拉切换 中文/English,即时生效无需刷新
|
||||
- ✅ **侧边栏菜单全量国际化** — 全部 42+ 菜单项 (9 一级 + 42 二级) 使用 `labelKey` 翻译键,切换语言实时更新
|
||||
- ✅ **Header 国际化** — 通知、主题切换、用户菜单(个人中心/账号设置/退出登录)全部翻译
|
||||
- ✅ **Login 页面国际化** — 标题、副标题、表单标签、按钮、错误提示、主题+语言切换器
|
||||
- ✅ **HTML lang 属性同步** — `i18n.on('languageChanged')` 监听器自动更新 `<html lang>` 属性
|
||||
- ✅ **index.html 更新** — 标题改为国际化友好版本,`lang="zh-CN"`
|
||||
- ✅ **可扩展架构** — `MenuItem.labelKey` 模式支持增量迁移,后续页面只需添加翻译键 + `useTranslation()` 即可
|
||||
|
||||
**后续增量迁移路径**(已建立完整模式,各页面可独立迁移):
|
||||
- Dashboard / ServerManager / Kubernetes 各页面 / AlertCenter 等页面内容翻译
|
||||
- 添加更多语言(如日语 `ja-JP`)只需在 `SUPPORTED_LANGUAGES` + 新 JSON 文件中注册
|
||||
|
||||
**验收标准**:
|
||||
- [x] `react-i18next` + `i18next` 已安装并集成
|
||||
- [x] `zh-CN.json` + `en-US.json` 翻译文件就绪(120+ 键)
|
||||
- [x] 语言切换器在 Header 和 Login 页面可用
|
||||
- [x] 侧边栏菜单 42+ 项全量国际化
|
||||
- [x] 语言选择持久化(localStorage)
|
||||
- [x] HTML lang 属性自动同步
|
||||
- [x] `tsc -b` 零错误,`npm run build` 零错误
|
||||
- [x] 17/17 集成测试通过
|
||||
|
||||
### U4: 后端镜像优化 [done]
|
||||
|
||||
@@ -305,7 +331,7 @@ services/api.ts (1324L)
|
||||
| A3 | WebSocket 管理 | P2 | **done** |
|
||||
| U1 | 虚拟滚动 | P3 | **done** |
|
||||
| U2 | 统一 DataTable | P3 | **done** |
|
||||
| U3 | 国际化 | P3 | pending |
|
||||
| U3 | 国际化 | P3 | **done** |
|
||||
| U4 | 镜像优化 | P3 | **done** |
|
||||
|
||||
---
|
||||
|
||||
Reference in new issue
Block a user