添加 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
parent f229b0cd97
commit b32ebb017a
2 changed files with 900 additions and 0 deletions
@@ -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
+<!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轮迭代完成