feat(desktop): ✨ 实现一些功能
1. 实现任务暂停功能 2. 实现页面的国际化功能 3.优化项目的结构以及BUG 4. 优化系统架构 5. 实现一大堆的功能
This commit is contained in:
380
.trae/documents/优化任务列表和添加技术文档.md
Normal file
380
.trae/documents/优化任务列表和添加技术文档.md
Normal file
@@ -0,0 +1,380 @@
|
||||
# 优化任务列表和技术实现文档
|
||||
|
||||
## 1. 任务列表优化
|
||||
|
||||
### 1.1 国际化支持优化
|
||||
|
||||
| 任务ID | 任务名称 | 优先级 | 技术栈 | 详细描述 |
|
||||
|--------|----------|--------|--------|----------|
|
||||
| I18N-001 | 选择并集成i18n库 | P1 | Vue I18n | 选择合适的i18n库并集成到项目中，配置基本的国际化环境 |
|
||||
| I18N-002 | 提取前端文本资源 | P1 | Vue I18n | 将所有前端组件中的硬编码文本提取到国际化资源文件中 |
|
||||
| I18N-003 | 实现语言切换功能 | P2 | Vue I18n | 添加语言切换组件，支持中英文切换 |
|
||||
| I18N-004 | 优化i18n性能 | P3 | Vue I18n | 实现按需加载语言包，优化国际化性能 |
|
||||
|
||||
### 1.2 暂停功能优化
|
||||
|
||||
| 任务ID | 任务名称 | 优先级 | 技术栈 | 详细描述 |
|
||||
|--------|----------|--------|--------|----------|
|
||||
| PAUSE-001 | 数据库模型扩展 | P0 | TypeORM | 为ReadingReflectionTaskBatch添加isPaused和pausedAt字段 |
|
||||
| PAUSE-002 | 实现暂停/恢复API | P0 | tRPC | 添加暂停和恢复任务的RPC方法 |
|
||||
| PAUSE-003 | 任务执行器改进 | P0 | TypeScript | 在TaskExecutor中实现任务状态检查和暂停逻辑 |
|
||||
| PAUSE-004 | 前端暂停按钮功能 | P0 | Vue 3 | 为暂停按钮添加点击事件和状态切换逻辑 |
|
||||
| PAUSE-005 | 暂停状态视觉反馈 | P1 | Vue 3 | 添加暂停状态的视觉提示，包括按钮样式变化和状态文字 |
|
||||
| PAUSE-006 | 任务队列管理 | P1 | TypeScript | 实现任务队列管理，支持暂停/恢复整个队列 |
|
||||
| PAUSE-007 | 持久化暂停状态 | P2 | TypeORM | 确保任务暂停状态在应用重启后保持 |
|
||||
|
||||
## 2. 技术实现文档
|
||||
|
||||
### 2.1 国际化支持实现指南
|
||||
|
||||
#### 2.1.1 集成Vue I18n
|
||||
|
||||
1. **安装依赖**
|
||||
```bash
|
||||
npm install vue-i18n@next
|
||||
```
|
||||
|
||||
2. **创建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
|
||||
```
|
||||
|
||||
3. **在main.ts中注册**
|
||||
```typescript
|
||||
// src/renderer/main.ts
|
||||
import i18n from '@renderer/plugins/i18n'
|
||||
|
||||
app.use(i18n)
|
||||
```
|
||||
|
||||
#### 2.1.2 提取文本资源
|
||||
|
||||
1. **创建语言包文件**
|
||||
```json
|
||||
// src/renderer/locales/zh.json
|
||||
{
|
||||
"task": {
|
||||
"title": "任务管理",
|
||||
"status": {
|
||||
"pending": "任务排队中",
|
||||
"writing": "运行中",
|
||||
"completed": "任务完成",
|
||||
"failed": "任务失败"
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
2. **在组件中使用**
|
||||
```vue
|
||||
<template>
|
||||
<div>{{ t('task.title') }}</div>
|
||||
<div>{{ t(`task.status.${task.status}`) }}</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
const { t } = useI18n()
|
||||
</script>
|
||||
```
|
||||
|
||||
### 2.2 暂停功能实现指南
|
||||
|
||||
#### 2.2.1 数据库模型扩展
|
||||
|
||||
1. **修改实体类**
|
||||
```typescript
|
||||
// src/main/db/entities/ReadingReflectionTaskBatch.ts
|
||||
import { Column, CreateDateColumn, Entity, OneToMany, PrimaryColumn } from 'typeorm'
|
||||
|
||||
@Entity('reading_reflection_task_batches')
|
||||
export class ReadingReflectionTaskBatch {
|
||||
// 现有字段...
|
||||
|
||||
@Column({ type: 'boolean', default: false })
|
||||
isPaused!: boolean
|
||||
|
||||
@CreateDateColumn({ type: 'datetime', nullable: true })
|
||||
pausedAt!: Date | null
|
||||
}
|
||||
```
|
||||
|
||||
2. **运行数据库迁移**
|
||||
```bash
|
||||
npm run typeorm migration:generate -- -n AddPauseFields
|
||||
npm run typeorm migration:run
|
||||
```
|
||||
|
||||
#### 2.2.2 实现暂停/恢复API
|
||||
|
||||
1. **添加RPC方法**
|
||||
```typescript
|
||||
// src/rpc/router/task.router.ts
|
||||
export const taskRouter = router({
|
||||
// 现有方法...
|
||||
|
||||
/**
|
||||
* 暂停任务批次
|
||||
*/
|
||||
pauseBatch: publicProcedure
|
||||
.input(z.object({ batchId: z.string() }))
|
||||
.mutation(async ({ input }) => {
|
||||
const batchRepo = AppDataSource.getRepository(ReadingReflectionTaskBatch)
|
||||
await batchRepo.update(input.batchId, {
|
||||
isPaused: true,
|
||||
pausedAt: new Date()
|
||||
})
|
||||
return { success: true }
|
||||
}),
|
||||
|
||||
/**
|
||||
* 恢复任务批次
|
||||
*/
|
||||
resumeBatch: publicProcedure
|
||||
.input(z.object({ batchId: z.string() }))
|
||||
.mutation(async ({ input }) => {
|
||||
const batchRepo = AppDataSource.getRepository(ReadingReflectionTaskBatch)
|
||||
await batchRepo.update(input.batchId, {
|
||||
isPaused: false,
|
||||
pausedAt: null
|
||||
})
|
||||
return { success: true }
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
#### 2.2.3 任务执行器改进
|
||||
|
||||
1. **添加暂停检查逻辑**
|
||||
```typescript
|
||||
// src/main/manager/taskExecutor.ts
|
||||
export class TaskExecutor {
|
||||
// 现有方法...
|
||||
|
||||
private async checkPauseStatus(taskId: string): Promise<boolean> {
|
||||
const batch = await this.batchRepo.findOne({ where: { id: taskId } })
|
||||
return batch?.isPaused || false
|
||||
}
|
||||
|
||||
private async executeSubTask(taskId: string, subTaskId: string, task: any, index: number, total: number): Promise<void> {
|
||||
// 现有代码...
|
||||
|
||||
for await (const chunk of stream) {
|
||||
// 检查暂停状态
|
||||
if (await this.checkPauseStatus(taskId)) {
|
||||
await this.itemRepo.update(subTaskId, {
|
||||
status: 'PAUSED'
|
||||
})
|
||||
await this.taskStatusManager.updateBatchStatus(taskId)
|
||||
return // 退出执行
|
||||
}
|
||||
|
||||
// 现有处理逻辑...
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### 2.2.4 前端暂停按钮功能
|
||||
|
||||
1. **添加按钮点击事件**
|
||||
```vue
|
||||
<!-- src/renderer/src/pages/task/index.vue -->
|
||||
<template>
|
||||
<a-button
|
||||
size="mini"
|
||||
type="primary"
|
||||
class="bg-[#7816ff] border-none shadow-sm shadow-purple-200"
|
||||
@click="handlePauseResume"
|
||||
>
|
||||
<template #icon>
|
||||
<pause v-if="!isPaused" theme="outline" size="12" />
|
||||
<play v-else theme="outline" size="12" />
|
||||
</template>
|
||||
{{ isPaused ? '恢复队列' : '暂停队列' }}
|
||||
</a-button>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Pause, Play } from '@icon-park/vue-next'
|
||||
import { ref, computed } from 'vue'
|
||||
import { trpc } from '@renderer/lib/trpc'
|
||||
|
||||
const activeTaskId = computed(() => getQuery('id') as string)
|
||||
const isPaused = ref(false)
|
||||
|
||||
// 监听任务状态
|
||||
const batchSub = trpc.task.onBatchProgressUpdate.subscribe(undefined, {
|
||||
onData(data) {
|
||||
if (data.batchId === activeTaskId.value) {
|
||||
// 更新暂停状态
|
||||
isPaused.value = data.isPaused || false
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const handlePauseResume = async () => {
|
||||
try {
|
||||
if (isPaused.value) {
|
||||
await trpc.task.resumeBatch.mutate({ batchId: activeTaskId.value })
|
||||
} else {
|
||||
await trpc.task.pauseBatch.mutate({ batchId: activeTaskId.value })
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('暂停/恢复失败:', err)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 3. 学习资源
|
||||
|
||||
### 3.1 国际化支持学习
|
||||
|
||||
1. **Vue I18n官方文档**
|
||||
- 地址：https://vue-i18n.intlify.dev/
|
||||
- 内容：详细的API文档和使用示例
|
||||
|
||||
2. **国际化最佳实践**
|
||||
- 地址：https://www.smashingmagazine.com/2018/09/internationalization-vue-apps/)
|
||||
- 内容：国际化的设计原则和最佳实践
|
||||
|
||||
### 3.2 暂停功能学习
|
||||
|
||||
1. **TypeORM官方文档**
|
||||
- 地址：https://typeorm.io/
|
||||
- 内容：数据库模型设计和迁移
|
||||
|
||||
2. **tRPC官方文档**
|
||||
- 地址：https://trpc.io/
|
||||
- 内容：API设计和实现
|
||||
|
||||
3. **任务队列管理**
|
||||
- 地址：https://www.alexdebrie.com/posts/nodejs-task-queues/)
|
||||
- 内容：任务队列的设计和实现
|
||||
|
||||
## 4. 测试指南
|
||||
|
||||
### 4.1 国际化支持测试
|
||||
|
||||
1. **功能测试**
|
||||
- 验证所有文本都能正确显示
|
||||
- 验证语言切换功能正常
|
||||
- 验证动态文本（如任务状态）能正确翻译
|
||||
|
||||
2. **性能测试**
|
||||
- 检查语言切换时的页面响应时间
|
||||
- 验证语言包加载性能
|
||||
|
||||
### 4.2 暂停功能测试
|
||||
|
||||
1. **功能测试**
|
||||
- 验证暂停按钮能正常触发暂停操作
|
||||
- 验证恢复按钮能正常恢复任务
|
||||
- 验证暂停状态能正确持久化
|
||||
- 验证任务执行过程中能被暂停
|
||||
|
||||
2. **边界测试**
|
||||
- 测试同时暂停多个任务
|
||||
- 测试应用重启后暂停状态是否保持
|
||||
- 测试暂停状态下的任务进度更新
|
||||
|
||||
3. **性能测试**
|
||||
- 测试大量任务时的暂停/恢复响应时间
|
||||
- 验证暂停状态下的系统资源占用
|
||||
|
||||
## 5. 部署指南
|
||||
|
||||
### 5.1 国际化支持部署
|
||||
|
||||
1. **构建生产版本**
|
||||
```bash
|
||||
npm run build:renderer
|
||||
```
|
||||
|
||||
2. **验证构建产物**
|
||||
- 检查语言包是否正确包含在构建产物中
|
||||
- 验证国际化功能在生产环境中正常工作
|
||||
|
||||
### 5.2 暂停功能部署
|
||||
|
||||
1. **数据库迁移**
|
||||
- 在生产环境运行数据库迁移
|
||||
- 验证数据库字段添加成功
|
||||
|
||||
2. **部署应用**
|
||||
```bash
|
||||
npm run build:main
|
||||
npm run build:renderer
|
||||
npm run package
|
||||
```
|
||||
|
||||
3. **验证部署**
|
||||
- 验证暂停/恢复功能在生产环境中正常工作
|
||||
- 监控系统性能和稳定性
|
||||
|
||||
## 6. 维护指南
|
||||
|
||||
### 6.1 国际化支持维护
|
||||
|
||||
1. **添加新语言**
|
||||
- 复制现有语言包文件
|
||||
- 翻译所有文本
|
||||
- 在i18n配置中添加新语言
|
||||
|
||||
2. **更新文本**
|
||||
- 修改对应语言包中的文本
|
||||
- 重新构建应用
|
||||
|
||||
### 6.2 暂停功能维护
|
||||
|
||||
1. **监控暂停状态**
|
||||
- 添加暂停状态的日志记录
|
||||
- 监控长时间暂停的任务
|
||||
|
||||
2. **优化暂停逻辑**
|
||||
- 根据实际使用情况调整暂停检查频率
|
||||
- 优化暂停状态的数据库查询性能
|
||||
|
||||
3. **添加新功能**
|
||||
- 支持批量暂停/恢复
|
||||
- 添加暂停原因记录
|
||||
- 实现自动恢复功能
|
||||
|
||||
## 7. 总结
|
||||
|
||||
通过本技术文档，您可以学习到：
|
||||
|
||||
1. **国际化支持的完整实现流程**
|
||||
- 从库的选择到最终部署
|
||||
- 最佳实践和性能优化
|
||||
|
||||
2. **暂停功能的设计和实现**
|
||||
- 数据库模型扩展
|
||||
- API设计和实现
|
||||
- 前端交互逻辑
|
||||
- 任务执行器改进
|
||||
|
||||
3. **完整的技术文档编写规范**
|
||||
- 任务列表优化
|
||||
- 实现指南
|
||||
- 学习资源
|
||||
- 测试指南
|
||||
- 部署和维护指南
|
||||
|
||||
希望本技术文档能够帮助您学习和掌握相关技术，顺利完成项目优化任务。
|
||||
Reference in New Issue
Block a user