# 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轮迭代完成