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配置文件：

   // 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应用：

   // src/renderer/main.ts
   import i18n from '@renderer/plugins/i18n'
   
   app.use(i18n)
   

3. 语言设置页面实现

1. 添加语言设置组件：

   <!-- 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. 实现语言切换逻辑：

   // 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：

   <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集成和页面翻译。