i18n 国际化系统
模块概述
版本: v1.0.0 状态: ✅ 已实现 IPC处理器: 0个 (纯前端实现) 最后更新: 2026-03-05
基于 vue-i18n 9.x Composition API 的双层国际化系统。支持 7 种语言、主进程与渲染进程独立翻译、localStorage 持久化和动态语言切换。
核心特性
- 7 种语言: zh-CN, en-US, zh-TW, ja-JP, ko-KR, fr-FR, es-ES
- 双层架构: 主进程 4 语言 + 渲染进程 7 语言
- Composition API: vue-i18n 9.x
useI18n()组合式 API - 持久化: localStorage 自动保存语言偏好
- 26+ 翻译分区: 按功能模块组织翻译键
- 多媒体国际化: 独立的多媒体模块翻译
1. 架构设计
1.1 整体架构图
┌──────────────────────────────────────────────────────────────────┐
│ 前端 (Vue3) │
├──────────────────────────────────────────────────────────────────┤
│ 渲染进程 i18n (7种语言, 26+分区) │
│ ┌────────────┐ ┌────────────┐ ┌──────────────────────────────┐ │
│ │ vue-i18n │ │ 语言切换器 │ │ localStorage 持久化 │ │
│ │ 9.x │ │ 2个组件 │ │ app-locale / skill-tool-locale│ │
│ └────────────┘ └────────────┘ └──────────────────────────────┘ │
│ ┌──────────────────────────────────────────────────────────────┐ │
│ │ locales/: zh-CN, en-US, zh-TW, ja-JP, ko-KR, fr-FR, es-ES │ │
│ │ 每语言 ~435行, 26+翻译分区 │ │
│ └──────────────────────────────────────────────────────────────┘ │
│ ┌──────────────────────────────────────────────────────────────┐ │
│ │ multimedia/: en-US.ts, zh-CN.ts (各~307行) │ │
│ └──────────────────────────────────────────────────────────────┘ │
└──────────────────────────────────────────────────────────────────┘
(无IPC, 纯前端)
┌──────────────────────────────────────────────────────────────────┐
│ 主进程 (Electron) │
├──────────────────────────────────────────────────────────────────┤
│ 主进程 i18n (4种语言) │
│ ┌──────────────────────────────────────────────────────────────┐ │
│ │ main/i18n/index.js (120行) │ │
│ │ 支持: zh-CN, en-US, ja-JP, ko-KR │ │
│ │ 用途: 系统通知、错误消息、日志 │ │
│ └──────────────────────────────────────────────────────────────┘ │
└──────────────────────────────────────────────────────────────────┘1.2 语言切换流程
用户选择语言 → LanguageSwitcher 组件
↓
i18n.global.locale.value = newLocale
↓
localStorage.setItem('app-locale', newLocale)
↓
Vue 响应式更新所有 {{ $t('key') }} 模板
↓
页面刷新后从 localStorage 恢复语言偏好1.3 核心组件
| 组件 | 文件 | 行数 | 说明 |
|---|---|---|---|
| 主进程 i18n | main/i18n/index.js | 120 | 主进程翻译 (4语言) |
| 渲染进程 i18n | renderer/i18n/index.ts | 425 | vue-i18n 配置 |
| 类型定义 | renderer/locales/types.ts | 471 | TypeScript 翻译键类型 |
| 语言文件 (×7) | renderer/locales/*.ts | 各~435 | 7种语言翻译 |
| 多媒体翻译 | renderer/locales/multimedia/*.ts | 各~307 | 多媒体模块翻译 |
| 语言切换器 | LanguageSwitcher.vue | 82+48 | 2个切换组件 |
2. 核心模块
2.1 主进程 i18n
javascript
// main/i18n/index.js
const messages = {
'zh-CN': { /* 中文简体 */ },
'en-US': { /* English */ },
'ja-JP': { /* 日本語 */ },
'ko-KR': { /* 한국어 */ },
}
function t(key, locale?) // 翻译函数
function setLocale(locale) // 设置语言
function getLocale() // 获取当前语言2.2 渲染进程 i18n
typescript
// renderer/i18n/index.ts
import { createI18n } from 'vue-i18n'
const i18n = createI18n({
legacy: false, // Composition API 模式
locale: savedLocale, // 从 localStorage 恢复
fallbackLocale: 'zh-CN', // 回退语言
messages: { ... }, // 7种语言
})2.3 支持语言
| 语言代码 | 语言 | 主进程 | 渲染进程 |
|---|---|---|---|
| zh-CN | 简体中文 | ✅ | ✅ |
| en-US | English | ✅ | ✅ |
| zh-TW | 繁體中文 | ❌ | ✅ |
| ja-JP | 日本語 | ✅ | ✅ |
| ko-KR | 한국어 | ✅ | ✅ |
| fr-FR | Français | ❌ | ✅ |
| es-ES | Español | ❌ | ✅ |
2.4 翻译分区 (26+)
common # 通用 (确认/取消/保存等)
nav # 导航菜单
knowledge # 知识库
social # 社交
trading # 交易
project # 项目管理
ai # AI助手
settings # 设置
security # 安全
auth # 认证
browser # 浏览器自动化
mcp # MCP协议
hooks # 钩子系统
skills # 技能系统
agents # 多代理
plan # 计划模式
remote # 远程控制
audit # 审计
marketplace # 插件市场
sso # SSO认证
enterprise # 企业管理
collab # 实时协作
ipfs # IPFS存储
analytics # 分析面板
performance # 性能监控
quantization # 量化2.5 持久化机制
localStorage 键:
app-locale → 主应用语言偏好
skill-tool-locale → 技能工具语言偏好
恢复优先级:
1. localStorage 已保存的偏好
2. navigator.language (浏览器语言)
3. 'zh-CN' (默认回退)3. 数据模型
本模块无数据库表，所有语言偏好通过 localStorage 持久化。
4. IPC接口
本模块无 IPC 接口，国际化完全在前端实现。主进程的 i18n 模块独立运行，不通过 IPC 通信。
5. 前端页面
5.1 LanguageSwitcher 组件
vue
<!-- 主语言切换器 (82行) -->
<template>
<a-select v-model:value="currentLocale" @change="changeLocale">
<a-select-option v-for="lang in languages" :key="lang.value">
{{ lang.label }}
</a-select-option>
</a-select>
</template>
<!-- 紧凑版切换器 (48行) -->
<template>
<a-dropdown>
<GlobalOutlined />
<template #overlay>
<a-menu @click="changeLocale">...</a-menu>
</template>
</a-dropdown>
</template>5.2 使用方式
vue
<script setup>
import { useI18n } from "vue-i18n";
const { t } = useI18n();
</script>
<template>
<h1>{{ t("knowledge.title") }}</h1>
<p>{{ t("common.save") }}</p>
</template>6. 文件结构
desktop-app-vue/src/main/i18n/
└── index.js # 主进程翻译 (120行)
desktop-app-vue/src/renderer/
├── i18n/
│ └── index.ts # vue-i18n 配置 (425行)
├── locales/
│ ├── types.ts # 翻译键类型定义 (471行)
│ ├── zh-CN.ts # 简体中文 (~435行)
│ ├── en-US.ts # English (~435行)
│ ├── zh-TW.ts # 繁體中文 (~435行)
│ ├── ja-JP.ts # 日本語 (~435行)
│ ├── ko-KR.ts # 한국어 (~435行)
│ ├── fr-FR.ts # Français (~435行)
│ ├── es-ES.ts # Español (~435行)
│ └── multimedia/
│ ├── en-US.ts # 多媒体英文 (~307行)
│ └── zh-CN.ts # 多媒体中文 (~307行)
└── components/
└── LanguageSwitcher.vue # 语言切换组件 (82+48行)7. 相关文档
文档版本: 1.0 最后更新: 2026-03-05