# TaskBreakDown

**Repository Path**: lvwanwan/task-break-down

## Basic Information

- **Project Name**: TaskBreakDown
- **Description**: 用于任务拆分与任务编排
- **Primary Language**: JavaScript
- **License**: GPL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-05-10
- **Last Updated**: 2025-05-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# AI任务拆分与管理系统

这是一个基于AI的任务拆分和管理系统，可以将复杂任务拆分为可执行的小任务，并跟踪任务执行进度。系统支持任务依赖管理、进度追踪和AI执行等功能，适用于软件开发、项目管理等场景。

## 系统架构

系统采用前后端分离架构：

- **后端**：基于Python + Flask的RESTful API服务
- **前端**：基于Vue.js + Element Plus的单页面应用
- **数据库**：PostgreSQL关系型数据库

## 核心功能

1. **AI任务拆分**：使用AI将复杂任务拆分为层级结构的子任务，直到原子级任务
2. **任务依赖管理**：设置和管理任务之间的依赖关系
3. **AI辅助执行**：支持AI自动执行或人工执行任务
4. **进度追踪**：记录和展示任务执行进度和状态变更
5. **测试评估**：AI自动测试任务执行结果
6. **版本控制**：支持任务拆分的多版本管理和回退
7. **状态通知**：提供任务状态变更通知

## 实时AI对话功能

最近添加了实时AI任务拆分对话功能，使用户可以实时看到AI的思考过程和任务拆分结果。

### 功能特点

- **实时流式响应**: 通过流式响应技术，实时显示AI的思考过程和生成结果
- **思考进度可视化**: 显示AI思考过程中的进度条，让用户了解处理状态
- **多种显示模式**: 支持JSON视图和格式化的Markdown视图，方便用户查看结果
- **交互式操作**: 用户可以接受、拒绝或修改AI生成的任务拆分结果

### 技术实现

1. **前端组件**: 
   - `AIStreamChat.vue`: 一个可复用的Vue组件，处理实时对话流、消息显示和用户交互
   - 使用Fetch API的ReadableStream接口处理流式数据
   - 支持实时渲染和自动滚动

2. **后端实现**:
   - 使用Flask的流式响应功能（`stream_with_context`）
   - AI服务中实现生成器函数，模拟AI思考过程并分段返回结果
   - 支持不同的AI提供商（OpenAI和DeepSeek）

### 使用示例

在任务详情页面中使用实时对话组件：

```html
<AIStreamChat 
  :taskId="taskId" 
  :initialPrompt="prompt"
  @accept-result="handleAcceptResult"
  @error="handleStreamError"
  @update:completed="streamCompleted = $event"
/>
```

### 数据格式

流式响应的JSON格式如下：

```json
// 开始消息
{"type": "start", "data": {"message": "开始处理任务拆分", "timestamp": "2023-06-01T12:00:00Z"}}

// 思考过程
{"type": "thinking", "data": {"message": "分析任务需求和复杂度...", "progress": 25, "timestamp": "2023-06-01T12:00:05Z"}}

// 内容片段
{"type": "chunk", "data": {"content": "{\"tasks\": [{\"title\": \"任务1\",", "timestamp": "2023-06-01T12:00:10Z"}}

// 完成消息
{"type": "complete", "data": {"total_tasks": 5, "execution_time": 12.5, "breakdown_version": 1, "tasks": [...], "timestamp": "2023-06-01T12:00:15Z"}}

// 错误消息
{"type": "error", "data": {"message": "处理任务时出错", "timestamp": "2023-06-01T12:00:20Z"}}
```

### 使用建议

1. 对于复杂的任务，建议提供详细的任务描述，以帮助AI更好地理解和拆分任务
2. 任务拆分完成后，可以通过子任务视图查看拆分结果，并进行必要的编辑和调整
3. 如果对AI拆分结果不满意，可以点击"重新拆分"按钮，提供更详细的提示

## 项目结构

```
.
├── backend/                  # 后端服务
│   ├── app.py               # 主应用入口
│   ├── init_database.py     # 数据库初始化脚本
│   ├── requirements.txt     # Python依赖列表
│   ├── db_design.md         # 数据库设计文档
│   └── config/              # 配置文件目录
│       └── ...
│
└── frontend/                # 前端应用
    ├── src/                 # 源代码
    │   ├── components/      # Vue组件
    │   ├── router/          # 路由配置
    │   ├── App.vue          # 主应用组件
    │   └── main.js          # 入口文件
    ├── public/              # 静态资源
    └── package.json         # NPM配置文件
```

## 数据模型

系统主要数据模型包括：

- **项目**：管理多个主任务的集合
- **主任务**：需要被拆分的原始任务
- **任务拆分版本**：支持同一任务的多次拆分版本
- **子任务**：拆分后的任务层级结构
- **任务执行记录**：记录任务执行的过程和结果
- **文件变更记录**：追踪任务执行导致的文件变化
- **任务依赖关系**：管理任务间的前置依赖
- **任务进度日志**：记录任务状态变更历史

## 快速开始

### 后端服务

1. 安装依赖：
   ```
   cd backend
   pip install -r requirements.txt
   ```

2. 初始化数据库：
   ```
   python init_database.py
   ```

3. 启动服务：
   ```
   python app.py
   ```

### 前端应用

1. 安装依赖：
   ```
   cd frontend
   npm install
   ```

2. 启动开发服务器：
   ```
   npm run serve
   ```

3. 访问应用：
   ```
   http://localhost:8181
   ```

## 使用场景

1. **软件开发管理**：自动拆分和追踪软件开发任务
2. **项目管理**：将大型项目分解为小的可执行任务
3. **AI辅助开发**：用AI自动执行和测试部分任务
4. **敏捷开发流程**：支持迭代式任务管理和进度追踪

## 技术栈

- **后端**：Python, Flask, SQLAlchemy, OpenAI API
- **前端**：Vue.js, Element Plus, Axios, Vuex
- **数据库**：PostgreSQL
- **API文档**：Swagger/OpenAPI

## 贡献者

- 项目负责人
- 后端开发团队
- 前端开发团队
- AI工程师

## 许可证

MIT