work-1/task-board
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Files
b32ebb017aee9d03e4cf63efde6bb79b36b2643d
task-board/TASKS-v3.md
T
work-1 b32ebb017a 添加 v3.0 设计文档和任务列表 
设计文档 (DESIGN-v3.md):
- 整体架构设计
- 页面详细设计
- 设计系统规范
- 技术实现方案

任务列表 (TASKS-v3.md):
- 模块化拆分（4个 Phase，20+任务）
- 每个任务的详细说明和验收标准
- HTML/CSS/JS 代码示例
- 优先级划分 (P0/P1/P2)
- 两轮迭代计划

预计总工时: 11-17 小时
第一轮: 基础架构 + 看板 + 拖拽 (6-8h)
第二轮: 详情页 + 优化测试 (5-9h)
2026-02-15 22:35:08 +08:00

833 lines
18 KiB
Markdown
Raw Blame History

# v3.0 界面开发任务列表
## 📋 模块化拆分
### 🏗️ 架构层级
```
v3.0 界面
├── 1. 基础架构层
│ ├── 1.1 HTML 骨架
│ ├── 1.2 CSS 设计系统
│ └── 1.3 JavaScript 核心类
├── 2. 布局组件层
│ ├── 2.1 Header 组件
│ ├── 2.2 Sidebar 组件
│ └── 2.3 Main Content 容器
├── 3. 页面模块层
│ ├── 3.1 项目概览页
│ ├── 3.2 任务看板页
│ ├── 3.3 智能体管理页
│ └── 3.4 全局规约浮层
└── 4. 交互功能层
├── 4.1 任务详情侧边栏
├── 4.2 拖拽功能
├── 4.3 表单处理
└── 4.4 实时更新
```
---
## ✅ 详细任务清单
### Phase 1: 基础架构层 (预计 1-2 小时)
#### ✅ 任务 1.1: HTML 骨架搭建
**目标**: 创建基本的 HTML 结构
**文件**: `public/index-v3.html`
**内容**:
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
- Meta 标签
- CSS 样式引用
- 第三方库 CDN (marked.js, sortable.js)
</head>
<body>
<div id="app">
<header id="header"></header>
<div class="app-body">
<aside id="sidebar"></aside>
<main id="main-content"></main>
</div>
</div>
<!-- 浮层 -->
<div id="task-detail-sidebar"></div>
<div id="overlay"></div>
<div id="global-rules-modal"></div>
<script src="app.js"></script>
</body>
</html>
```
**验收标准**:
- [ ] HTML 结构完整
- [ ] 基本布局可见
- [ ] 无控制台错误
---
#### ✅ 任务 1.2: CSS 设计系统
**目标**: 定义 CSS 变量和基础样式
**内容**:
```css
:root {
/* 主题色 */
--primary: #667eea;
--primary-dark: #764ba2;
/* 状态色 */
--status-initial: #3498db;
--status-in-progress: #f39c12;
--status-testing-pending: #9b59b6;
--status-testing: #e67e22;
--status-completed: #27ae60;
/* 间距 */
--spacing-xs: 4px;
--spacing-sm: 8px;
--spacing-md: 16px;
--spacing-lg: 24px;
--spacing-xl: 32px;
/* 其他变量... */
}
/* Reset & Base Styles */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', sans-serif; }
/* 布局样式 */
#app { display: flex; flex-direction: column; height: 100vh; }
.app-body { display: flex; flex: 1; overflow: hidden; }
```
**验收标准**:
- [ ] CSS 变量定义完整
- [ ] 基础样式无冲突
- [ ] 布局正常显示
---
#### ✅ 任务 1.3: JavaScript 核心类
**目标**: 创建核心管理类
**内容**:
```javascript
// API 管理类
class API {
constructor(baseURL = '/api') {
this.baseURL = baseURL;
}
async get(endpoint) { /* ... */ }
async post(endpoint, data) { /* ... */ }
async put(endpoint, data) { /* ... */ }
async delete(endpoint) { /* ... */ }
}
// 状态管理类
class AppState {
constructor() {
this.currentProject = null;
this.projects = [];
this.agents = [];
this.stats = {};
}
setCurrentProject(project) { /* ... */ }
updateStats(stats) { /* ... */ }
}
// 路由管理类
class Router {
constructor() {
this.routes = new Map();
}
register(name, handler) { /* ... */ }
navigate(name, params) { /* ... */ }
}
```
**验收标准**:
- [ ] API 类可正常调用
- [ ] 状态管理可读写
- [ ] 路由切换无误
---
### Phase 2: 布局组件层 (预计 2-3 小时)
#### ✅ 任务 2.1: Header 组件
**目标**: 实现顶部导航栏
**功能点**:
1. Logo 和标题
2. 全局统计卡片 (3-4个小卡片)
3. 全局规约按钮
4. 通知按钮（占位）
**HTML 结构**:
```html
<header id="header">
<div class="header-left">
<h1>🤖 任务管理系统 v3.0</h1>
</div>
<div class="header-center">
<div class="stat-mini">📁 项目: <span id="stat-projects">0</span></div>
<div class="stat-mini">📋 任务: <span id="stat-tasks">0</span></div>
<div class="stat-mini">🤖 智能体: <span id="stat-agents">0</span></div>
</div>
<div class="header-right">
<button id="btn-global-rules">📜 规约</button>
</div>
</header>
```
**验收标准**:
- [ ] Header 固定在顶部
- [ ] 统计数字实时更新
- [ ] 规约按钮点击弹窗
---
#### ✅ 任务 2.2: Sidebar 组件
**目标**: 实现左侧导航栏
**功能点**:
1. 项目列表（可点击选择）
2. 智能体入口
3. 折叠/展开功能
**HTML 结构**:
```html
<aside id="sidebar">
<div class="sidebar-header">
<button id="btn-collapse">☰</button>
</div>
<div class="sidebar-section">
<div class="section-title">
📁 项目
<button id="btn-new-project">+</button>
</div>
<ul id="project-list">
<!-- 动态渲染 -->
</ul>
</div>
<div class="sidebar-section">
<div class="section-title">🤖 智能体</div>
<div class="agent-summary">
<div>⚪ 空闲: <span id="agents-idle">0</span></div>
<div>🟢 工作: <span id="agents-busy">0</span></div>
</div>
</div>
</aside>
```
**验收标准**:
- [ ] 项目列表可渲染
- [ ] 选中项目高亮
- [ ] 点击切换主内容区
- [ ] 折叠功能正常
---
#### ✅ 任务 2.3: Main Content 容器
**目标**: 主内容区框架
**功能点**:
1. 空状态提示
2. 加载状态
3. 内容动态切换
**HTML 结构**:
```html
<main id="main-content">
<div id="content-loading" class="hidden">
<div class="spinner">加载中...</div>
</div>
<div id="content-empty" class="empty-state">
<p>请选择一个项目</p>
</div>
<div id="content-project-overview" class="hidden">
<!-- 项目概览页内容 -->
</div>
<div id="content-task-board" class="hidden">
<!-- 任务看板页内容 -->
</div>
<div id="content-agents" class="hidden">
<!-- 智能体管理页内容 -->
</div>
</main>
```
**验收标准**:
- [ ] 多页面切换无闪烁
- [ ] 加载状态显示正常
- [ ] 空状态友好提示
---
### Phase 3: 页面模块层 (预计 4-5 小时)
#### ✅ 任务 3.1: 项目概览页
**目标**: 展示项目详情和统计
**功能点**:
1. 项目标题和描述
2. 任务统计卡片
3. 最近任务列表
4. Tab 切换（概览/任务/规约/共享清单）
**数据来源**:
- `GET /api/projects/:id`
- `GET /api/tasks?project_id=xxx`
- `GET /api/projects/:id/rules`
- `GET /api/projects/:id/notes`
**验收标准**:
- [ ] 项目信息正确显示
- [ ] 任务统计准确
- [ ] 最近任务可点击
- [ ] Tab 切换流畅
---
#### ✅ 任务 3.2: 任务看板页 (Kanban)
**目标**: 可视化任务流转
**功能点**:
1. 5列看板（初始/进行中/待测试/测试中/完成）
2. 任务卡片渲染
3. 拖拽改变状态
4. 过滤和排序
**HTML 结构**:
```html
<div id="kanban-board">
<div class="kanban-header">
<button id="btn-new-task">+ 新建任务</button>
<input type="text" id="task-search" placeholder="🔍 搜索...">
<select id="task-filter-type"><!-- 任务类型 --></select>
<select id="task-filter-priority"><!-- 优先级 --></select>
</div>
<div class="kanban-columns">
<div class="kanban-column" data-status="initial">
<h3>初始 <span class="count">3</span></h3>
<div class="task-list" id="tasks-initial">
<!-- 任务卡片 -->
</div>
</div>
<!-- 其他列... -->
</div>
</div>
```
**任务卡片结构**:
```html
<div class="task-card" data-task-id="xxx">
<div class="task-title">实现用户登录</div>
<div class="task-meta">
<span class="badge type-development">开发</span>
<span class="badge priority-high">高</span>
</div>
<div class="task-footer">
<span class="assignee">🤖 智能体A</span>
<div class="task-icons">
<span>🔗 3</span> <!-- 子任务数 -->
<span>📎 2</span> <!-- 附件数 -->
</div>
</div>
</div>
```
**验收标准**:
- [ ] 看板正确分列
- [ ] 任务卡片显示完整
- [ ] 拖拽流畅无卡顿
- [ ] 拖拽后状态更新成功
- [ ] 过滤功能正常
---
#### ✅ 任务 3.3: 智能体管理页
**目标**: 查看和管理智能体
**功能点**:
1. 智能体列表（表格形式）
2. 状态筛选
3. 选中显示详情
**HTML 结构**:
```html
<div id="agents-page">
<div class="page-header">
<h2>🤖 智能体管理</h2>
<button id="btn-register-agent">注册新智能体</button>
</div>
<div class="filter-tabs">
<button class="active" data-filter="all">全部</button>
<button data-filter="idle">空闲</button>
<button data-filter="busy">工作中</button>
</div>
<table class="agents-table">
<thead>
<tr>
<th>名称</th>
<th>状态</th>
<th>当前任务</th>
<th>完成数</th>
<th>最后心跳</th>
</tr>
</thead>
<tbody id="agents-table-body">
<!-- 动态渲染 -->
</tbody>
</table>
<div id="agent-detail-panel" class="hidden">
<!-- 选中智能体的详情 -->
</div>
</div>
```
**验收标准**:
- [ ] 智能体列表正确显示
- [ ] 状态筛选有效
- [ ] 点击显示详情
- [ ] 心跳时间正确格式化
---
#### ✅ 任务 3.4: 全局规约浮层
**目标**: 查看和编辑规约
**功能点**:
1. 全局规约展示
2. 项目规约展示（如果选中项目）
3. Markdown 渲染
4. 编辑模式
**HTML 结构**:
```html
<div id="global-rules-modal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h2>📜 协作规约</h2>
<button class="btn-close">&times;</button>
</div>
<div class="modal-tabs">
<button class="active" data-tab="global">全局规约</button>
<button data-tab="project">项目规约</button>
</div>
<div id="tab-global-rules" class="tab-content">
<div id="global-rules-display" class="markdown-content">
<!-- Markdown 渲染 -->
</div>
<button id="btn-edit-global-rules">编辑</button>
</div>
<div id="tab-project-rules" class="tab-content hidden">
<!-- 同上 -->
</div>
</div>
</div>
```
**验收标准**:
- [ ] 模态框正确显示
- [ ] Markdown 正确渲染
- [ ] Tab 切换正常
- [ ] 编辑功能可用
---
### Phase 4: 交互功能层 (预计 3-4 小时)
#### ✅ 任务 4.1: 任务详情侧边栏
**目标**: 从右侧滑出显示任务详情
**功能点**:
1. 滑入/滑出动画
2. 任务完整信息展示
3. 状态/类型/优先级下拉选择
4. 附件上传
5. 子任务管理
**HTML 结构**:
```html
<div id="task-detail-sidebar" class="sidebar-right">
<div class="sidebar-header">
<button class="btn-close">&times;</button>
</div>
<div class="sidebar-content">
<h2 id="task-detail-title">任务标题</h2>
<div class="task-actions">
<button id="btn-edit-task">编辑</button>
<button id="btn-delete-task" class="danger">删除</button>
</div>
<div class="detail-section">
<label>状态</label>
<select id="task-status-select">
<option value="initial">初始</option>
<option value="in_progress">进行中</option>
<option value="testing_pending">待测试</option>
<option value="testing">测试中</option>
<option value="completed">完成</option>
</select>
</div>
<div class="detail-section">
<label>描述</label>
<div id="task-description" class="markdown-content">
<!-- Markdown 渲染 -->
</div>
</div>
<div class="detail-section">
<label>📎 附件 (<span id="attachment-count">0</span>)</label>
<ul id="attachment-list"></ul>
<input type="file" id="file-upload" hidden>
<button id="btn-upload">上传附件</button>
</div>
<div class="detail-section">
<label>🔀 子任务 (<span id="subtask-progress">0/0</span>)</label>
<ul id="subtask-list"></ul>
<button id="btn-add-subtask">+ 添加子任务</button>
</div>
</div>
</div>
```
**CSS 动画**:
```css
.sidebar-right {
position: fixed;
right: 0;
top: 60px;
width: 480px;
height: calc(100vh - 60px);
background: white;
box-shadow: -4px 0 16px rgba(0,0,0,0.15);
transform: translateX(100%);
transition: transform 0.3s ease;
z-index: 1000;
}
.sidebar-right.active {
transform: translateX(0);
}
```
**验收标准**:
- [ ] 点击任务卡片弹出侧边栏
- [ ] 动画流畅
- [ ] 所有信息正确显示
- [ ] 状态修改即时生效
- [ ] 附件上传成功
- [ ] 子任务可添加
---
#### ✅ 任务 4.2: 拖拽功能
**目标**: 实现任务卡片拖拽
**技术选型**: Sortable.js
**实现代码**:
```javascript
// 初始化拖拽
function initKanbanDrag() {
const columns = document.querySelectorAll('.task-list');
columns.forEach(column => {
new Sortable(column, {
group: 'tasks',
animation: 150,
ghostClass: 'task-ghost',
chosenClass: 'task-chosen',
dragClass: 'task-drag',
onEnd: async function(evt) {
const taskId = evt.item.dataset.taskId;
const oldStatus = evt.from.parentElement.dataset.status;
const newStatus = evt.to.parentElement.dataset.status;
if (oldStatus !== newStatus) {
await updateTaskStatus(taskId, newStatus);
}
}
});
});
}
async function updateTaskStatus(taskId, newStatus) {
try {
await api.put(`/tasks/${taskId}`, { status: newStatus });
showToast('任务状态已更新', 'success');
} catch (error) {
showToast('更新失败: ' + error.message, 'error');
// 刷新看板恢复原状
loadKanbanBoard();
}
}
```
**验收标准**:
- [ ] 可以拖拽任务卡片
- [ ] 拖拽有视觉反馈
- [ ] 放下后API调用成功
- [ ] 失败时有错误提示
---
#### ✅ 任务 4.3: 表单处理
**目标**: 创建/编辑项目和任务
**功能点**:
1. 创建项目表单
2. 创建任务表单
3. 表单验证
4. 提交反馈
**实现**:
```javascript
// 创建项目
async function showCreateProjectForm() {
const formHTML = `
<form id="form-create-project">
<input type="text" name="name" placeholder="项目名称" required>
<textarea name="description" placeholder="项目描述"></textarea>
<button type="submit">创建</button>
<button type="button" onclick="closeModal()">取消</button>
</form>
`;
showModal('创建项目', formHTML);
document.getElementById('form-create-project').addEventListener('submit', async (e) => {
e.preventDefault();
const data = new FormData(e.target);
const project = {
name: data.get('name'),
description: data.get('description'),
created_by: 'human'
};
try {
const result = await api.post('/projects', project);
showToast('项目创建成功', 'success');
closeModal();
await loadProjects();
} catch (error) {
showToast('创建失败: ' + error.message, 'error');
}
});
}
```
**验收标准**:
- [ ] 表单可正常提交
- [ ] 验证错误有提示
- [ ] 成功后刷新列表
- [ ] 失败有错误提示
---
#### ✅ 任务 4.4: 实时更新
**目标**: 定期刷新数据
**实现**:
```javascript
class RealtimeUpdater {
constructor(interval = 30000) { // 30秒
this.interval = interval;
this.timerId = null;
}
start() {
this.timerId = setInterval(async () => {
await this.update();
}, this.interval);
}
stop() {
if (this.timerId) {
clearInterval(this.timerId);
this.timerId = null;
}
}
async update() {
// 更新统计
const stats = await api.get('/stats');
appState.updateStats(stats);
updateHeaderStats(stats);
// 如果在看板页面，刷新看板
if (router.currentRoute === 'kanban') {
await loadKanbanBoard();
}
}
}
const updater = new RealtimeUpdater();
updater.start();
```
**验收标准**:
- [ ] 统计数字定期更新
- [ ] 看板数据自动刷新
- [ ] 不影响用户操作
- [ ] 页面卸载时停止
---
### Phase 5: 优化与测试 (预计 2-3 小时)
#### ✅ 任务 5.1: 性能优化
**检查项**:
- [ ] 减少不必要的 API 调用
- [ ] 使用防抖/节流
- [ ] 虚拟滚动（如果任务数量巨大）
- [ ] 图片懒加载
#### ✅ 任务 5.2: 错误处理
**检查项**:
- [ ] 网络错误提示
- [ ] API 错误提示
- [ ] 404 页面
- [ ] 权限错误处理
#### ✅ 任务 5.3: 加载状态
**检查项**:
- [ ] Skeleton 骨架屏
- [ ] Loading 转圈
- [ ] 按钮禁用状态
- [ ] 进度条
#### ✅ 任务 5.4: 响应式适配
**检查项**:
- [ ] 移动端布局
- [ ] 平板适配
- [ ] 触摸事件支持
- [ ] 横屏适配
#### ✅ 任务 5.5: 浏览器兼容
**检查项**:
- [ ] Chrome 测试
- [ ] Firefox 测试
- [ ] Safari 测试
- [ ] Edge 测试
---
## 📊 任务优先级
### P0 (必须完成)
1. 任务 1.1-1.3: 基础架构
2. 任务 2.1-2.3: 布局组件
3. 任务 3.2: 任务看板
4. 任务 4.1: 任务详情侧边栏
5. 任务 4.2: 拖拽功能
### P1 (重要)
6. 任务 3.1: 项目概览
7. 任务 3.3: 智能体管理
8. 任务 4.3: 表单处理
### P2 (可选)
9. 任务 3.4: 全局规约浮层
10. 任务 4.4: 实时更新
11. 任务 5.1-5.5: 优化与测试
---
## 🚀 实施计划
### 第一轮迭代 (今晚完成)
- ✅ Phase 1: 基础架构 (1-2h)
- ✅ Phase 2: 布局组件 (2-3h)
- ✅ 任务 3.2: 看板页面 (2-3h)
- ✅ 任务 4.2: 拖拽功能 (1h)
**目标**: 实现核心功能，可以查看和拖拽任务
### 第二轮迭代 (明天)
- ✅ 任务 4.1: 任务详情侧边栏 (2-3h)
- ✅ 任务 3.1: 项目概览 (1-2h)
- ✅ 任务 3.3: 智能体管理 (1-2h)
- ✅ Phase 5: 优化与测试 (2-3h)
**目标**: 完整功能和优化
---
## ✅ 验收清单
### 功能完整性
- [ ] 可以查看项目列表
- [ ] 可以选择项目查看详情
- [ ] 可以看到任务看板
- [ ] 可以拖拽改变任务状态
- [ ] 可以点击任务查看详情
- [ ] 可以创建项目
- [ ] 可以创建任务
- [ ] 可以上传附件
- [ ] 可以管理子任务
- [ ] 可以查看智能体列表
- [ ] 可以查看规约
### 交互体验
- [ ] 拖拽流畅无卡顿
- [ ] 侧边栏动画平滑
- [ ] 加载状态友好
- [ ] 错误提示清晰
- [ ] 操作有即时反馈
### 视觉规范
- [ ] 颜色符合设计系统
- [ ] 间距统一
- [ ] 字体大小一致
- [ ] 阴影效果合理
### 性能指标
- [ ] 首屏加载 < 2秒
- [ ] API 响应 < 500ms
- [ ] 拖拽延迟 < 100ms
- [ ] 动画帧率 > 30fps
---
## 📝 开发日志
### 2026-02-15 22:33
- ✅ 完成设计文档
- ✅ 完成模块化拆分
- ✅ 生成任务列表
- ⏳ 等待开始实施...
---
**总预计时间**: 11-17 小时
**分阶段实施**: 2轮迭代完成
Reference in New Issue View Git Blame Copy Permalink