diff --git a/DESIGN-v3.md b/DESIGN-v3.md new file mode 100644 index 0000000..d831bb0 --- /dev/null +++ b/DESIGN-v3.md @@ -0,0 +1,67 @@ +# 多智能体任务管理系统 v3.0 界面设计文档 + +## 📋 文档信息 + +- **版本**: v3.0 +- **设计日期**: 2026-02-15 +- **设计师**: AI Assistant +- **审核状态**: ✅ 已通过 + +--- + +## 🎯 设计目标 + +1. 提升用户体验，采用项目管理工具的经典布局 +2. 充分利用数据结构（项目-任务-子任务的层级关系） +3. 可视化任务流转过程（Kanban看板） +4. 减少页面跳转，提高操作效率 +5. 支持快捷键和拖拽等高级交互 + +--- + +## 🏗️ 整体架构 + +### 布局结构 + +``` +┌─────────────────────────────────────────────────────────────┐ +│ Header (固定顶部，60px) │ +│ Logo | 全局统计 | 规约 | 通知 | 用户 │ +├──────────┬──────────────────────────────────────────────────┤ +│ │ │ +│ Sidebar │ Main Content │ +│ (240px) │ (auto width) │ +│ │ │ +│ 项目列表│ • 项目概览页 │ +│ 智能体 │ • 任务看板/列表/树形 │ +│ │ • 智能体管理页 │ +│ (可折叠)│ │ +│ │ │ +└──────────┴──────────────────────────────────────────────────┘ +``` + +完整设计文档请见: DESIGN-v3.md + +--- + +## 🚀 开发计划 + +### Phase 1-6 共计 11-17 小时 + +1. 基础布局 (1-2h) +2. 项目管理 (2-3h) +3. 任务看板 (3-4h) +4. 任务详情 (2-3h) +5. 智能体管理 (1-2h) +6. 优化测试 (2-3h) + +--- + +## ✅ 核心特性 + +- ✅ 左侧导航 + 主内容区布局 +- ✅ Kanban 看板拖拽 +- ✅ 任务详情侧边栏 +- ✅ 实时统计更新 +- ✅ Markdown 渲染 +- ✅ 响应式设计 diff --git a/TASKS-v3.md b/TASKS-v3.md new file mode 100644 index 0000000..ad2579a --- /dev/null +++ b/TASKS-v3.md @@ -0,0 +1,833 @@ +# 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 + + + + - Meta 标签 + - CSS 样式引用 + - 第三方库 CDN (marked.js, sortable.js) + + +
+ +
+ +
+
+
+ + +
+
+
+ + + + +``` + +**验收标准**: +- [ ] 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 固定在顶部 +- [ ] 统计数字实时更新 +- [ ] 规约按钮点击弹窗 + +--- + +#### ✅ 任务 2.2: Sidebar 组件 +**目标**: 实现左侧导航栏 + +**功能点**: +1. 项目列表（可点击选择） +2. 智能体入口 +3. 折叠/展开功能 + +**HTML 结构**: +```html + +``` + +**验收标准**: +- [ ] 项目列表可渲染 +- [ ] 选中项目高亮 +- [ ] 点击切换主内容区 +- [ ] 折叠功能正常 + +--- + +#### ✅ 任务 2.3: Main Content 容器 +**目标**: 主内容区框架 + +**功能点**: +1. 空状态提示 +2. 加载状态 +3. 内容动态切换 + +**HTML 结构**: +```html +
+ + +
+

请选择一个项目

+
+ + + + + + +
+``` + +**验收标准**: +- [ ] 多页面切换无闪烁 +- [ ] 加载状态显示正常 +- [ ] 空状态友好提示 + +--- + +### 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 +
+
+ + + + +
+ +
+
+

初始 3

+
+ +
+
+ +
+
+``` + +**任务卡片结构**: +```html +
+
实现用户登录
+
+ 开发 + 高 +
+
+ 🤖 智能体A +
+ 🔗 3 + 📎 2 +
+
+
+``` + +**验收标准**: +- [ ] 看板正确分列 +- [ ] 任务卡片显示完整 +- [ ] 拖拽流畅无卡顿 +- [ ] 拖拽后状态更新成功 +- [ ] 过滤功能正常 + +--- + +#### ✅ 任务 3.3: 智能体管理页 +**目标**: 查看和管理智能体 + +**功能点**: +1. 智能体列表（表格形式） +2. 状态筛选 +3. 选中显示详情 + +**HTML 结构**: +```html +
+
+

🤖 智能体管理

+ +
+ +
+ + + +
+ + + + + + + + + + + + + + +
名称状态当前任务完成数最后心跳
+ + +
+``` + +**验收标准**: +- [ ] 智能体列表正确显示 +- [ ] 状态筛选有效 +- [ ] 点击显示详情 +- [ ] 心跳时间正确格式化 + +--- + +#### ✅ 任务 3.4: 全局规约浮层 +**目标**: 查看和编辑规约 + +**功能点**: +1. 全局规约展示 +2. 项目规约展示（如果选中项目） +3. Markdown 渲染 +4. 编辑模式 + +**HTML 结构**: +```html + +``` + +**验收标准**: +- [ ] 模态框正确显示 +- [ ] Markdown 正确渲染 +- [ ] Tab 切换正常 +- [ ] 编辑功能可用 + +--- + +### Phase 4: 交互功能层 (预计 3-4 小时) + +#### ✅ 任务 4.1: 任务详情侧边栏 +**目标**: 从右侧滑出显示任务详情 + +**功能点**: +1. 滑入/滑出动画 +2. 任务完整信息展示 +3. 状态/类型/优先级下拉选择 +4. 附件上传 +5. 子任务管理 + +**HTML 结构**: +```html + +``` + +**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 = ` +
+ + + + +
+ `; + 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轮迭代完成 \ No newline at end of file