Files

1. 实现任务暂停功能

2. 实现页面的国际化功能

3.优化项目的结构以及BUG

4. 优化系统架构

5. 实现一大堆的功能

2026-01-25 03:30:23 +08:00

10 KiB

Raw Permalink Blame History

优化任务列表和技术实现文档

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

安装依赖
```
npm install vue-i18n@next
```

创建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

在main.ts中注册

// src/renderer/main.ts
import i18n from '@renderer/plugins/i18n'

app.use(i18n)

2.1.2 提取文本资源

创建语言包文件

// src/renderer/locales/zh.json
{
  "task": {
    "title": "任务管理",
    "status": {
      "pending": "任务排队中",
      "writing": "运行中",
      "completed": "任务完成",
      "failed": "任务失败"
    }
  }
}

在组件中使用

<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 数据库模型扩展

修改实体类

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

运行数据库迁移

npm run typeorm migration:generate -- -n AddPauseFields
npm run typeorm migration:run

2.2.2 实现暂停/恢复API

添加RPC方法

// 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 任务执行器改进

添加暂停检查逻辑

// 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 前端暂停按钮功能

添加按钮点击事件

<!-- 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 国际化支持学习

Vue I18n官方文档
- 地址：https://vue-i18n.intlify.dev/
- 内容：详细的API文档和使用示例
国际化最佳实践
- 地址：https://www.smashingmagazine.com/2018/09/internationalization-vue-apps/)
- 内容：国际化的设计原则和最佳实践

3.2 暂停功能学习

TypeORM官方文档
- 地址：https://typeorm.io/
- 内容：数据库模型设计和迁移
tRPC官方文档
- 地址：https://trpc.io/
- 内容：API设计和实现
任务队列管理
- 地址：https://www.alexdebrie.com/posts/nodejs-task-queues/)
- 内容：任务队列的设计和实现

4. 测试指南

4.1 国际化支持测试

功能测试
- 验证所有文本都能正确显示
- 验证语言切换功能正常
- 验证动态文本（如任务状态）能正确翻译
性能测试
- 检查语言切换时的页面响应时间
- 验证语言包加载性能

4.2 暂停功能测试

功能测试
- 验证暂停按钮能正常触发暂停操作
- 验证恢复按钮能正常恢复任务
- 验证暂停状态能正确持久化
- 验证任务执行过程中能被暂停
边界测试
- 测试同时暂停多个任务
- 测试应用重启后暂停状态是否保持
- 测试暂停状态下的任务进度更新
性能测试
- 测试大量任务时的暂停/恢复响应时间
- 验证暂停状态下的系统资源占用

5. 部署指南

5.1 国际化支持部署

构建生产版本
```
npm run build:renderer
```
验证构建产物
- 检查语言包是否正确包含在构建产物中
- 验证国际化功能在生产环境中正常工作

5.2 暂停功能部署

数据库迁移
- 在生产环境运行数据库迁移
- 验证数据库字段添加成功

部署应用

npm run build:main
npm run build:renderer
npm run package

验证部署
- 验证暂停/恢复功能在生产环境中正常工作
- 监控系统性能和稳定性

6. 维护指南

6.1 国际化支持维护

添加新语言
- 复制现有语言包文件
- 翻译所有文本
- 在i18n配置中添加新语言
更新文本
- 修改对应语言包中的文本
- 重新构建应用

6.2 暂停功能维护

监控暂停状态
- 添加暂停状态的日志记录
- 监控长时间暂停的任务
优化暂停逻辑
- 根据实际使用情况调整暂停检查频率
- 优化暂停状态的数据库查询性能
添加新功能
- 支持批量暂停/恢复
- 添加暂停原因记录
- 实现自动恢复功能

7. 总结

通过本技术文档，您可以学习到：

国际化支持的完整实现流程
- 从库的选择到最终部署
- 最佳实践和性能优化
暂停功能的设计和实现
- 数据库模型扩展
- API设计和实现
- 前端交互逻辑
- 任务执行器改进
完整的技术文档编写规范
- 任务列表优化
- 实现指南
- 学习资源
- 测试指南
- 部署和维护指南

希望本技术文档能够帮助您学习和掌握相关技术，顺利完成项目优化任务。

10 KiB Raw Permalink Blame History Unescape Escape

优化任务列表和技术实现文档

1. 任务列表优化

1.1 国际化支持优化

1.2 暂停功能优化

2. 技术实现文档

2.1 国际化支持实现指南

2.1.1 集成Vue I18n

2.1.2 提取文本资源

2.2 暂停功能实现指南

2.2.1 数据库模型扩展

2.2.2 实现暂停/恢复API

2.2.3 任务执行器改进

2.2.4 前端暂停按钮功能

3. 学习资源

3.1 国际化支持学习

3.2 暂停功能学习

4. 测试指南

4.1 国际化支持测试

4.2 暂停功能测试

5. 部署指南

5.1 国际化支持部署

5.2 暂停功能部署

6. 维护指南

6.1 国际化支持维护

6.2 暂停功能维护

7. 总结

10 KiB

Raw Permalink Blame History