read_book/.trae/documents/plan_20260124_170009.md

# i18n集成和语言配置功能实现计划

## 1. 依赖安装

| 任务ID | 任务名称 | 技术栈 | 详细描述 |
|--------|----------|--------|----------|
| I18N-001 | 安装Vue I18n依赖 | Vue I18n | 使用pnpm安装Vue I18n库 |

## 2. 配置服务扩展

| 任务ID | 任务名称 | 技术栈 | 详细描述 |
|--------|----------|--------|----------|
| I18N-002 | 更新配置类型定义 | TypeScript | 在IConfig.ts中添加语言配置类型 |
| I18N-003 | 扩展配置服务 | TypeScript | 在ConfigService中添加语言配置的读写方法 |

## 3. i18n配置实现

| 任务ID | 任务名称 | 技术栈 | 详细描述 |
|--------|----------|--------|----------|
| I18N-004 | 创建i18n配置文件 | Vue I18n | 创建i18n配置文件和初始化逻辑 |
| I18N-005 | 创建语言包 | JSON | 创建中英文语言包文件 |
| I18N-006 | 集成i18n到Vue应用 | Vue 3 | 在main.ts中注册i18n插件 |

## 4. 语言设置页面实现

| 任务ID | 任务名称 | 技术栈 | 详细描述 |
|--------|----------|--------|----------|
| I18N-007 | 添加语言设置组件 | Vue 3 | 在setting页面添加语言选择组件 |
| I18N-008 | 实现语言切换逻辑 | Vue 3 | 实现语言切换功能和配置保存 |

## 5. 前端页面i18n集成

| 任务ID | 任务名称 | 技术栈 | 详细描述 |
|--------|----------|--------|----------|
| I18N-009 | 翻译任务管理页面 | Vue I18n | 将任务管理页面的文本替换为i18n翻译 |
| I18N-010 | 翻译阅读心得页面 | Vue I18n | 将阅读心得页面的文本替换为i18n翻译 |
| I18N-011 | 翻译设置页面 | Vue I18n | 将设置页面的文本替换为i18n翻译 |
| I18N-012 | 翻译其他页面 | Vue I18n | 将其他页面的文本替换为i18n翻译 |

## 6. 测试和优化

| 任务ID | 任务名称 | 技术栈 | 详细描述 |
|--------|----------|--------|----------|
| I18N-013 | 测试语言切换功能 | Vue I18n | 测试语言切换是否正常工作 |
| I18N-014 | 测试配置持久化 | Electron Store | 测试语言配置是否持久化保存 |
| I18N-015 | 优化i18n性能 | Vue I18n | 优化i18n加载性能和使用体验 |

## 技术实现细节

### 1. 配置服务扩展

1. **更新IConfig.ts**：
   - 添加语言配置类型定义
   - 添加语言配置Schema验证

2. **扩展ConfigService**：
   - 添加LANGUAGE_KEY常量
   - 添加getLanguageConfig方法
   - 添加saveLanguageConfig方法
   - 在schema中添加语言配置定义

### 2. i18n配置实现

1. **创建i18n配置文件**：
   ```typescript
   // src/renderer/plugins/i18n.ts
   import { createI18n } from 'vue-i18n'
   import zh from '@renderer/locales/zh.json'
   import en from '@renderer/locales/en.json'

   const i18n = createI18n({
     legacy: false,
     locale: 'zh',
     messages: {
       zh,
       en
     }
   })

   export default i18n
   ```

2. **创建语言包**：
   - src/renderer/locales/zh.json（中文语言包）
   - src/renderer/locales/en.json（英文语言包）

3. **集成到Vue应用**：
   ```typescript
   // src/renderer/main.ts
   import i18n from '@renderer/plugins/i18n'
   
   app.use(i18n)
   ```

### 3. 语言设置页面实现

1. **添加语言设置组件**：
   ```vue
   <!-- src/renderer/src/pages/setting/components/LanguageSetting.vue -->
   <template>
     <div class="language-setting">
       <h3>语言设置</h3>
       <a-radio-group v-model="selectedLanguage" @change="handleLanguageChange">
         <a-radio value="zh">中文</a-radio>
         <a-radio value="en">English</a-radio>
       </a-radio-group>
     </div>
   </template>
   ```

2. **实现语言切换逻辑**：
   ```typescript
   // src/renderer/src/pages/setting/components/LanguageSetting.vue
   <script setup lang="ts">
   import { ref, onMounted } from 'vue'
   import { trpc } from '@renderer/lib/trpc'
   import { useI18n } from 'vue-i18n'
   
   const { locale } = useI18n()
   const selectedLanguage = ref('zh')
   
   onMounted(async () => {
     // 从配置中获取当前语言
     const languageConfig = await trpc.config.getLanguageConfig.query()
     selectedLanguage.value = languageConfig?.language || 'zh'
     locale.value = selectedLanguage.value
   })
   
   const handleLanguageChange = async () => {
     // 更新i18n语言
     locale.value = selectedLanguage.value
     // 保存到配置
     await trpc.config.saveLanguageConfig.mutate({ language: selectedLanguage.value })
   }
   </script>
   ```

### 4. 前端页面i18n集成

1. **在组件中使用i18n**：
   ```vue
   <template>
     <div>{{ t('common.title') }}</div>
   </template>
   
   <script setup lang="ts">
   import { useI18n } from 'vue-i18n'
   
   const { t } = useI18n()
   </script>
   ```

2. **批量替换文本**：
   - 逐个页面替换硬编码文本为i18n翻译
   - 确保所有动态文本都能正确翻译
   - 添加必要的语言包条目

## 预期效果

1. **语言切换功能**：用户可以在设置页面切换中文和英文
2. **配置持久化**：语言设置会保存到electron-store中，应用重启后保持不变
3. **全页面翻译**：所有前端页面的文本都会根据当前语言显示对应的翻译
4. **平滑切换**：语言切换时页面会实时更新，无需刷新

## 技术栈

- Vue 3
- Vue I18n
- TypeScript
- Electron Store
- tRPC

## 实现时间

计划在1-2小时内完成所有任务，包括依赖安装、配置扩展、i18n集成和页面翻译。