feat(desktop): ✨ 实现一些功能
1. 实现任务暂停功能 2. 实现页面的国际化功能 3.优化项目的结构以及BUG 4. 优化系统架构 5. 实现一大堆的功能
This commit is contained in:
175
.trae/documents/plan_20260124_170009.md
Normal file
175
.trae/documents/plan_20260124_170009.md
Normal file
@@ -0,0 +1,175 @@
|
||||
# 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集成和页面翻译。
|
||||
Reference in New Issue
Block a user