Files

T

设计文档 (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

18 KiB

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

内容:

<!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 变量和基础样式

内容:

: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 核心类

目标: 创建核心管理类

内容:

// 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 组件

目标: 实现顶部导航栏

功能点:

Logo 和标题
全局统计卡片 (3-4个小卡片)
全局规约按钮
通知按钮（占位）

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 组件

目标: 实现左侧导航栏

功能点:

项目列表（可点击选择）
智能体入口
折叠/展开功能

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 容器

目标: 主内容区框架

功能点:

空状态提示
加载状态
内容动态切换

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: 项目概览页

目标: 展示项目详情和统计

功能点:

项目标题和描述
任务统计卡片
最近任务列表
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)

目标: 可视化任务流转

功能点:

5列看板（初始/进行中/待测试/测试中/完成）
任务卡片渲染
拖拽改变状态
过滤和排序

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>

任务卡片结构:

<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: 智能体管理页

目标: 查看和管理智能体

功能点:

智能体列表（表格形式）
状态筛选
选中显示详情

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: 全局规约浮层

目标: 查看和编辑规约

功能点:

全局规约展示
项目规约展示（如果选中项目）
Markdown 渲染
编辑模式

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: 任务详情侧边栏

目标: 从右侧滑出显示任务详情

功能点:

滑入/滑出动画
任务完整信息展示
状态/类型/优先级下拉选择
附件上传
子任务管理

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 动画:

.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

实现代码:

// 初始化拖拽
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: 表单处理

目标: 创建/编辑项目和任务

功能点:

创建项目表单
创建任务表单
表单验证
提交反馈

实现:

// 创建项目
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: 实时更新

目标: 定期刷新数据

实现:

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.3: 基础架构
任务 2.1-2.3: 布局组件
任务 3.2: 任务看板
任务 4.1: 任务详情侧边栏
任务 4.2: 拖拽功能

P1 (重要)

任务 3.1: 项目概览
任务 3.3: 智能体管理
任务 4.3: 表单处理

P2 (可选)

任务 3.4: 全局规约浮层
任务 4.4: 实时更新
任务 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轮迭代完成

18 KiB Raw Blame History

v3.0 界面开发任务列表

📋 模块化拆分

🏗️ 架构层级

✅ 详细任务清单

Phase 1: 基础架构层 (预计 1-2 小时)

✅ 任务 1.1: HTML 骨架搭建

✅ 任务 1.2: CSS 设计系统

✅ 任务 1.3: JavaScript 核心类

Phase 2: 布局组件层 (预计 2-3 小时)

✅ 任务 2.1: Header 组件

✅ 任务 2.2: Sidebar 组件

✅ 任务 2.3: Main Content 容器

Phase 3: 页面模块层 (预计 4-5 小时)

✅ 任务 3.1: 项目概览页

✅ 任务 3.2: 任务看板页 (Kanban)

✅ 任务 3.3: 智能体管理页

✅ 任务 3.4: 全局规约浮层

Phase 4: 交互功能层 (预计 3-4 小时)

✅ 任务 4.1: 任务详情侧边栏

✅ 任务 4.2: 拖拽功能

✅ 任务 4.3: 表单处理

✅ 任务 4.4: 实时更新

Phase 5: 优化与测试 (预计 2-3 小时)

✅ 任务 5.1: 性能优化

✅ 任务 5.2: 错误处理

✅ 任务 5.3: 加载状态

✅ 任务 5.4: 响应式适配

✅ 任务 5.5: 浏览器兼容

📊 任务优先级

P0 (必须完成)

P1 (重要)

P2 (可选)

🚀 实施计划

第一轮迭代 (今晚完成)

第二轮迭代 (明天)

✅ 验收清单

功能完整性

交互体验

视觉规范

性能指标

📝 开发日志

2026-02-15 22:33

18 KiB

Raw Blame History