work-1
01f43d8da5
主要更新: - 统一规约管理视图(全局/项目规约共享表格) - 项目树形导航(看板/项目规约子菜单) - 智能高亮与状态持久化 - 移动端响应式支持(汉堡菜单) - 规约类型更新为7个专业分类 - 文件清理(85→15文件,减少82%) 修复问题: - 修复创建项目功能(JavaScript语法错误) - 修复协作规约错误高亮 - 修复看板需要点击2次才高亮 - 修复项目树自动收起问题 新增工具: - debug.html(项目创建测试) - test.html(移动端测试) - status.html(系统诊断) 技术改进: - 上下文状态管理(currentRuleContext) - 展开状态持久化(projectExpandedState) - 触摸事件支持 - 移除console.log提升兼容性
40 KiB
40 KiB
多智能体任务管理系统 v3.0 界面设计文档
📋 文档信息
- 版本: v3.0
- 设计日期: 2026-02-15
- 技术栈: Vue 3 + Vite + Element Plus + Pinia
- 设计师: AI Assistant
- 审核状态: 🔄 待审核
🎯 设计目标
核心目标
- 提升用户体验 - 采用现代项目管理工具的经典布局（类似 Jira / Trello）
- 可视化流程 - 通过 Kanban 看板清晰展示任务流转过程
- 减少跳转 - 利用侧边栏、浮层减少页面跳转，提高操作效率
- 层级管理 - 充分利用项目→任务→子任务的层级关系
- 智能交互 - 支持拖拽、快捷键、实时更新等高级交互
用户角色
- 人类用户 - 项目管理者，创建项目、分配任务、审核结果
- 智能体 - 任务执行者，领取任务、完成工作、上传成果
🏗️ 整体架构
布局结构
┌─────────────────────────────────────────────────────────────────┐
│ Header (固定顶部，60px) │
│ 🤖 系统名 | 📁项目3 📋任务15 🤖智能体5/8 | 📜规约 🔔通知 │
├────────────┬────────────────────────────────────────────────────┤
│ │ │
│ Sidebar │ Main Content Area │
│ (240px) │ (自适应宽度) │
│ │ │
│ 📁 项目 │ ┌──────────────────────────────────────────────┐ │
│ • 项目A │ │ │ │
│ • 项目B │ │ 动态路由内容区 │ │
│ • 项目C │ │ - Dashboard 仪表盘 │ │
│ │ │ - TaskBoard 任务看板 │ │
│ ───────── │ │ - ProjectDetail 项目详情 │ │
│ │ │ - AgentList 智能体管理 │ │
│ 🤖 智能体 │ │ │ │
│ ⚪ 空闲:3 │ └──────────────────────────────────────────────┘ │
│ 🟢 工作:2 │ │
│ │ │
│ [折叠按钮] │ │
└────────────┴────────────────────────────────────────────────────┘
┌──────────────────────────┐
│ TaskDetail Sidebar │
│ (右侧滑出，480px) │
│ │
│ 任务详情、编辑、附件 │
│ 子任务管理 │
│ │
└──────────────────────────┘
技术架构
┌─────────────────────────────────────────────────────┐
│ Vue 3 Application │
├─────────────────────────────────────────────────────┤
│ │
│ Presentation Layer (视图层) │
│ ┌─────────────┬─────────────┬──────────────┐ │
│ │ Layouts │ Views │ Components │ │
│ │ MainLayout │ Dashboard │ TaskCard │ │
│ │ │ TaskBoard │ MarkdownEd │ │
│ │ │ AgentList │ FileUpload │ │
│ └─────────────┴─────────────┴──────────────┘ │
│ │
├─────────────────────────────────────────────────────┤
│ │
│ State Management (状态管理 - Pinia) │
│ ┌──────────┬──────────┬──────────┬──────────┐ │
│ │ project │ task │ agent │ stats │ │
│ │ store │ store │ store │ store │ │
│ └──────────┴──────────┴──────────┴──────────┘ │
│ │
├─────────────────────────────────────────────────────┤
│ │
│ API Layer (接口层) │
│ ┌──────────────────────────────────────────┐ │
│ │ axios instance + interceptors │ │
│ │ project.js task.js agent.js ... │ │
│ └──────────────────────────────────────────┘ │
│ │
├─────────────────────────────────────────────────────┤
│ │
│ Utilities (工具层) │
│ ┌──────────────────────────────────────────┐ │
│ │ constants date markdown helpers │ │
│ └──────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────┘
↓ HTTP
┌─────────────────────────────────────────────────────┐
│ Backend API (Node.js) │
│ /api/projects /api/tasks ... │
└─────────────────────────────────────────────────────┘
🎨 页面详细设计
1. Dashboard - 仪表盘
路由: /
功能: 全局数据概览，快速访问入口
布局:
┌─────────────────────────────────────────────────────────┐
│ 📊 仪表盘 │
├─────────────────────────────────────────────────────────┤
│ │
│ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ │
│ │📁 │ │📋 │ │🟡 │ │✅ │ │
│ │项目总数│ │任务总数│ │进行中 │ │已完成 │ │
│ │ 8 │ │ 45 │ │ 12 │ │ 28 │ │
│ └────────┘ └────────┘ └────────┘ └────────┘ │
│ │
├──────────────────────────┬──────────────────────────────┤
│ │ │
│ 📊 任务状态分布 │ 📈 任务类型分布 │
│ ┌────────────────────┐ │ ┌────────────────────┐ │
│ │ │ │ │ │ │
│ │ 饼图 (ECharts) │ │ │ 饼图 (ECharts) │ │
│ │ │ │ │ │ │
│ │ • 初始 5 │ │ │ • 需求 8 │ │
│ │ • 进行中 12 │ │ │ • 设计 6 │ │
│ │ • 待测试 3 │ │ │ • 开发 18 │ │
│ │ • 测试中 2 │ │ │ • 测试 7 │ │
│ │ • 完成 28 │ │ │ • 部署 6 │ │
│ └────────────────────┘ │ └────────────────────┘ │
│ │ │
└──────────────────────────┴──────────────────────────────┘
│ │
│ 📁 最近活跃项目 │
│ ┌───────────────────────────────────────────────────┐ │
│ │ 项目名称 │ 描述 │ 创建时间 │ │
│ ├───────────────────────────────────────────────────┤ │
│ │ 智能客服系统 │ AI客服... │ 2天前 [查看]│ │
│ │ 数据分析平台 │ 大数据... │ 5天前 [查看]│ │
│ │ 用户画像系统 │ 用户标签... │ 1周前 [查看]│ │
│ └───────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────┘
组件:
el-statistic- 统计卡片v-chart(ECharts) - 饼图el-table- 项目列表
交互:
- 点击统计卡片 → 跳转到对应筛选的任务列表
- 点击图表区域 → 高亮对应数据
- 点击项目名称 → 跳转到项目详情
2. TaskBoard - 任务看板（Kanban）
路由: /tasks/board/:projectId
功能: 可视化任务流转，拖拽改变状态
布局:
┌─────────────────────────────────────────────────────────────────┐
│ 📋 任务看板 - 智能客服系统 │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ [+ 新建任务] [🔍 搜索...] [类型▼] [优先级▼] [筛选▼] │ │
│ └──────────────────────────────────────────────────────────┘ │
├─────────────────────────────────────────────────────────────────┤
│ │
│ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ │
│ │ 初始 │ │进行中 │ │待测试 │ │测试中 │ │ 完成 │ │
│ │ (5) │ │ (12) │ │ (3) │ │ (2) │ │ (28) │ │
│ ├────────┤ ├────────┤ ├────────┤ ├────────┤ ├────────┤ │
│ │ │ │ │ │ │ │ │ │ │ │
│ │ ┌────┐ │ │ ┌────┐ │ │ ┌────┐ │ │ ┌────┐ │ │ ┌────┐ │ │
│ │ │任务│ │ │ │任务│ │ │ │任务│ │ │ │任务│ │ │ │任务│ │ │
│ │ │卡片│ │ │ │卡片│ │ │ │卡片│ │ │ │卡片│ │ │ │卡片│ │ │
│ │ │ 1 │ │ │ │ 3 │ │ │ │ 7 │ │ │ │ 9 │ │ │ │10 │ │ │
│ │ └────┘ │ │ └────┘ │ │ └────┘ │ │ └────┘ │ │ └────┘ │ │
│ │ │ │ │ │ │ │ │ │ │ │
│ │ ┌────┐ │ │ ┌────┐ │ │ ┌────┐ │ │ ┌────┐ │ │ ┌────┐ │ │
│ │ │任务│ │ │ │任务│ │ │ │任务│ │ │ │任务│ │ │ │任务│ │ │
│ │ │卡片│ │ │ │卡片│ │ │ │卡片│ │ │ │卡片│ │ │ │卡片│ │ │
│ │ │ 2 │ │ │ │ 4 │ │ │ │ 8 │ │ │ │ │ │ │ │11 │ │ │
│ │ └────┘ │ │ └────┘ │ │ └────┘ │ │ └────┘ │ │ └────┘ │ │
│ │ ... │ │ ... │ │ │ │ │ │ ... │ │
│ │ │ │ │ │ │ │ │ │ │ │
│ └────────┘ └────────┘ └────────┘ └────────┘ └────────┘ │
│ 可拖拽 ──────────→ │
│ │
└─────────────────────────────────────────────────────────────────┘
任务卡片设计:
┌──────────────────────────────────────┐
│ 实现用户登录功能 │ ← 标题 (14px, 加粗)
│ ───────────────────────────────── │
│ [开发] [高优先级] │ ← 徽章 (类型 + 优先级)
│ ───────────────────────────────── │
│ 🤖 Agent-001 🔗 3/5 📎 2 │ ← 底部信息
└──────────────────────────────────────┘
↑ 分配的智能体 ↑子任务 ↑附件数
卡片颜色规范:
-
任务类型徽章:
- 需求: 紫色
#9C27B0 - 设计: 蓝色
#2196F3 - 开发: 绿色
#4CAF50 - 测试: 橙色
#FF9800 - 部署: 红色
#F44336
- 需求: 紫色
-
优先级徽章:
- 高: 红色背景
- 普通: 默认
- 低: 灰色背景
组件:
draggable(vuedraggable) - 拖拽容器TaskCard- 自定义任务卡片组件el-input- 搜索框el-select- 筛选下拉
交互:
- 拖拽 - 拖动任务卡片到其他列改变状态
- 点击卡片 - 打开右侧任务详情 Sidebar
- 筛选 - 按类型、优先级、关键词筛选
- 搜索 - 实时搜索任务标题和描述
3. TaskDetail Sidebar - 任务详情侧边栏
触发方式: 点击任务卡片
位置: 从右侧滑入，覆盖在主内容区上方
宽度: 480px
布局:
┌──────────────────────────────┐
│ × │
│ 实现用户登录功能 │
│ ───────────────────────── │
│ [编辑] [删除] │
├──────────────────────────────┤
│ │
│ 📊 基本信息 │
│ 状态: [进行中 ▼] │
│ 类型: [开发 ▼] │
│ 优先级: [高 ▼] │
│ 创建者: 人类 │
│ 分配给: Agent-001 │
│ 创建时间: 2天前 │
│ │
│ ───────────────────────── │
│ │
│ 📝 描述 │
│ ┌──────────────────────┐ │
│ │ │ │
│ │ ## 需求 │ │
│ │ 实现用户登录... │ │
│ │ │ │
│ │ ## 技术要求 │ │
│ │ - JWT认证 │ │
│ │ - 密码加密 │ │
│ │ │ │
│ └──────────────────────┘ │
│ [编辑描述] │
│ │
│ ───────────────────────── │
│ │
│ 📎 附件 (2) │
│ [设计图.png] [下载] ✕ │
│ [API文档.pdf] [下载] ✕ │
│ [+ 上传附件] │
│ │
│ ───────────────────────── │
│ │
│ 🔀 子任务 (3/5 完成) │
│ ✓ 前端登录页面 │
│ ✓ 后端API接口 │
│ ☐ 单元测试 │
│ ☐ 集成测试 │
│ ☐ 文档更新 │
│ [+ 添加子任务] │
│ │
│ ───────────────────────── │
│ │
│ 💬 评论 (即将上线) │
│ │
└──────────────────────────────┘
组件:
el-drawer- 抽屉组件el-select- 下拉选择器MarkdownEditor- 自定义 Markdown 编辑器FileUpload- 自定义文件上传组件SubtaskList- 自定义子任务列表
交互:
- 点击
×或点击遮罩层关闭 - 下拉选择器即时更新（带防抖）
- 附件拖拽上传
- 子任务点击切换状态
4. ProjectDetail - 项目详情
路由: /projects/:id
功能: 查看项目详情、规约、共享笔记
布局:
┌─────────────────────────────────────────────────────────┐
│ 📁 智能客服系统 [编辑] [归档] │
│ 一个基于AI的智能客服系统... │
├─────────────────────────────────────────────────────────┤
│ [概览] [任务列表] [协作规约] [共享笔记] [统计] │
├─────────────────────────────────────────────────────────┤
│ │
│ Tab 1 - 概览 │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │ 总任务 │ │ 进行中 │ │ 已完成 │ │
│ │ 45 │ │ 12 │ │ 28 │ │
│ └──────────┘ └──────────┘ └──────────┘ │
│ │
│ 最近任务 │
│ • [开发] 实现用户登录 Agent-001 进行中 │
│ • [设计] 数据库设计 Agent-002 待测试 │
│ • [测试] 单元测试 Agent-003 完成 │
│ │
│ [查看完整看板] │
│ │
├─────────────────────────────────────────────────────────┤
│ │
│ Tab 2 - 协作规约 (Markdown) │
│ ┌───────────────────────────────────────────────────┐ │
│ │ # 协作规约 │ │
│ │ │ │
│ │ ## 代码规范 │ │
│ │ - 遵循 PEP 8 │ │
│ │ - 提交前必须通过 lint │ │
│ │ │ │
│ │ ## 提交规范 │ │
│ │ - 使用 conventional commits │ │
│ │ │ │
│ └───────────────────────────────────────────────────┘ │
│ [编辑规约] │
│ │
├─────────────────────────────────────────────────────────┤
│ │
│ Tab 3 - 共享笔记 │
│ ┌───────────────────────────────────────────────────┐ │
│ │ 📝 数据库选型确定 Agent-001 │ │
│ │ PostgreSQL 15 + Redis 2天前 │ │
│ ├───────────────────────────────────────────────────┤ │
│ │ 📝 API设计完成 人类 │ │
│ │ RESTful API设计文档已上传 3天前 │ │
│ └───────────────────────────────────────────────────┘ │
│ [+ 新建笔记] │
│ │
└─────────────────────────────────────────────────────────┘
组件:
el-tabs- 选项卡el-statistic- 统计卡片MarkdownViewer- Markdown 渲染器el-timeline- 时间线（笔记列表）
5. AgentList - 智能体管理
路由: /agents
功能: 查看智能体状态、注册新智能体
布局:
┌─────────────────────────────────────────────────────────┐
│ 🤖 智能体管理 [注册新智能体] │
├─────────────────────────────────────────────────────────┤
│ [全部(8)] [空闲(3)] [工作中(5)] │
├─────────────────────────────────────────────────────────┤
│ │
│ 名称 状态 当前任务 完成数 最后心跳│
│ ──────────────────────────────────────────────────── │
│ Agent-001 🟢工作 实现登录 12 1分钟前│
│ Agent-002 🟢工作 数据库设计 8 2分钟前│
│ Agent-003 ⚪空闲 - 15 5分钟前│
│ Agent-004 🟢工作 单元测试 6 1分钟前│
│ Agent-005 ⚪空闲 - 9 3分钟前│
│ Agent-006 🟢工作 前端开发 11 1分钟前│
│ Agent-007 ⚪空闲 - 13 4分钟前│
│ Agent-008 🟢工作 API开发 7 2分钟前│
│ │
└─────────────────────────────────────────────────────────┘
选中某个智能体后，右侧显示详情:
┌────────────────────────────┐
│ Agent-001 │
│ ─────────────────────────│
│ 类型: 开发 │
│ 能力: │
│ • backend │
│ • python │
│ • database │
│ │
│ 当前任务: │
│ 实现用户登录功能 │
│ │
│ 历史统计: │
│ • 总完成: 12 │
│ • 平均用时: 2.3小时 │
│ • 成功率: 95% │
│ │
│ 最后心跳: 1分钟前 │
│ 注册时间: 2周前 │
└────────────────────────────┘
组件:
el-table- 智能体列表表格el-tag- 状态标签el-descriptions- 详情描述列表
🎨 视觉设计规范
颜色系统
// 主题色
$primary: #667eea; // 主色（渐变起点）
$primary-dark: #764ba2; // 主色（渐变终点）
// 状态色
$success: #67C23A; // 成功/完成
$warning: #E6A23C; // 警告/进行中
$danger: #F56C6C; // 危险/删除
$info: #909399; // 信息/初始
// 任务状态色
$status-initial: #3498db; // 初始 - 蓝色
$status-in-progress: #f39c12; // 进行中 - 橙色
$status-testing-pending: #9b59b6; // 待测试 - 紫色
$status-testing: #e67e22; // 测试中 - 深橙
$status-completed: #27ae60; // 完成 - 绿色
// 任务类型色
$type-requirement: #9C27B0; // 需求 - 紫色
$type-design: #2196F3; // 设计 - 蓝色
$type-development: #4CAF50; // 开发 - 绿色
$type-testing: #FF9800; // 测试 - 橙色
$type-deployment: #F44336; // 部署 - 红色
// 灰度色
$text-primary: #303133;
$text-regular: #606266;
$text-secondary: #909399;
$text-placeholder: #C0C4CC;
$border-base: #DCDFE6;
$border-light: #E4E7ED;
$border-lighter: #EBEEF5;
$border-extra-light: #F2F6FC;
$bg-base: #FFFFFF;
$bg-light: #F5F7FA;
$bg-dark: #F0F2F5;
间距系统
$spacing-xs: 4px;
$spacing-sm: 8px;
$spacing-md: 16px;
$spacing-lg: 24px;
$spacing-xl: 32px;
$spacing-xxl: 48px;
圆角
$radius-sm: 4px;
$radius-md: 8px;
$radius-lg: 12px;
$radius-xl: 16px;
阴影
$shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
$shadow-md: 0 4px 8px rgba(0, 0, 0, 0.12);
$shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.15);
字体
$font-family-base: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
$font-family-mono: 'Consolas', 'Monaco', 'Courier New', monospace;
$font-size-xs: 12px;
$font-size-sm: 13px;
$font-size-md: 14px;
$font-size-lg: 16px;
$font-size-xl: 18px;
$font-size-xxl: 20px;
🔄 交互设计
拖拽交互（Kanban）
流程:
- 用户按住任务卡片
- 卡片变为半透明，跟随鼠标移动
- 经过其他列时，列高亮显示
- 松开鼠标，卡片落入目标列
- 发送 API 请求更新状态
- 成功: 提示"任务状态已更新"
- 失败: 卡片恢复原位，提示错误
视觉反馈:
.task-card {
transition: transform 0.2s, box-shadow 0.2s;
&.dragging {
opacity: 0.5;
transform: rotate(3deg);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
&:hover {
transform: translateY(-2px);
box-shadow: $shadow-md;
}
}
.kanban-column {
transition: background-color 0.2s, border 0.2s;
&.drag-over {
background: rgba(102, 126, 234, 0.05);
border: 2px dashed $primary;
}
}
侧边栏动画
TaskDetail Sidebar:
.task-detail-sidebar {
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 cubic-bezier(0.4, 0, 0.2, 1);
z-index: 1000;
&.active {
transform: translateX(0);
}
}
.overlay {
position: fixed;
top: 60px;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
opacity: 0;
pointer-events: none;
transition: opacity 0.3s;
&.active {
opacity: 1;
pointer-events: auto;
}
}
加载状态
Skeleton 骨架屏:
- 列表加载时显示骨架屏，避免白屏
- 使用
el-skeleton组件
<el-skeleton :rows="5" animated v-if="loading" />
按钮加载:
<el-button :loading="submitting" @click="submit">
提交
</el-button>
Toast 提示
成功提示:
ElMessage.success('任务状态已更新')
错误提示:
ElMessage.error('更新失败，请重试')
警告提示:
ElMessage.warning('文件大小不能超过 10MB')
📱 响应式设计
断点设置
$breakpoint-xs: 480px; // 手机
$breakpoint-sm: 768px; // 平板竖屏
$breakpoint-md: 992px; // 平板横屏
$breakpoint-lg: 1200px; // 桌面
$breakpoint-xl: 1920px; // 大屏
适配策略
移动端 (< 768px):
- Sidebar 自动收起，通过汉堡菜单展开
- TaskDetail Sidebar 全屏显示
- Kanban 看板横向滚动
- 统计卡片 2列布局
平板 (768px - 992px):
- Sidebar 保持展开
- TaskDetail Sidebar 占 50% 宽度
- Kanban 看板可视化 3 列
- 统计卡片 4列布局
桌面 (> 992px):
- 完整布局
- 所有功能正常使用
⚡ 性能优化
1. 组件懒加载
const Dashboard = () => import('@/views/Dashboard.vue')
const TaskBoard = () => import('@/views/TaskBoard.vue')
2. 虚拟滚动
对于超过 100 条的任务列表，使用虚拟滚动:
<el-virtual-list
:data="tasks"
:item-size="60"
:height="600"
>
<template #default="{ item }">
<TaskCard :task="item" />
</template>
</el-virtual-list>
3. 防抖节流
搜索防抖:
import { debounce } from 'lodash-es'
const handleSearch = debounce((keyword) => {
taskStore.setFilters({ keyword })
}, 300)
状态更新节流:
import { throttle } from 'lodash-es'
const updateStatus = throttle(async (taskId, status) => {
await taskApi.updateTask(taskId, { status })
}, 1000)
4. 图片懒加载
附件图片使用懒加载:
<el-image :src="attachment.url" lazy />
5. Keep-Alive 缓存
缓存频繁切换的页面:
<router-view v-slot="{ Component }">
<keep-alive :include="['Dashboard', 'TaskBoard']">
<component :is="Component" />
</keep-alive>
</router-view>
🔐 安全考虑
1. XSS 防护
- Markdown 渲染使用 DOMPurify 过滤
- 用户输入统一转义
import DOMPurify from 'dompurify'
export function renderMarkdown(content) {
const dirty = marked(content)
return DOMPurify.sanitize(dirty)
}
2. CSRF 防护
- Axios 默认携带 CSRF Token
- 关键操作二次确认
ElMessageBox.confirm(
'确定要删除这个任务吗？',
'警告',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}
).then(() => {
deleteTask(taskId)
})
3. 文件上传安全
- 限制文件类型
- 限制文件大小（10MB）
- 后端验证文件内容
🧪 测试策略
1. 单元测试
使用 Vitest + Vue Test Utils:
import { mount } from '@vue/test-utils'
import TaskCard from '@/components/TaskCard.vue'
describe('TaskCard', () => {
it('renders task title', () => {
const wrapper = mount(TaskCard, {
props: {
task: {
id: '1',
title: '测试任务',
status: 'initial'
}
}
})
expect(wrapper.text()).toContain('测试任务')
})
})
2. 集成测试
测试关键用户流程:
- 创建项目 → 创建任务 → 拖拽任务 → 查看详情
3. E2E 测试
使用 Playwright 或 Cypress:
describe('Task Board', () => {
it('can drag and drop tasks', () => {
cy.visit('/tasks/board/1')
cy.get('[data-task-id="task-1"]')
.drag('[data-status="in_progress"]')
cy.contains('任务状态已更新')
})
})
📊 数据流示例
创建任务流程
用户点击 [+ 新建任务]
↓
打开 TaskFormDialog
↓
填写表单（标题、描述、类型、优先级）
↓
点击 [提交]
↓
taskStore.createTask(formData)
↓
POST /api/tasks
↓
后端验证 → 插入数据库
↓
返回新任务对象
↓
taskStore.tasks.push(newTask)
↓
关闭对话框 + 成功提示
↓
看板自动刷新显示新任务
拖拽更新任务状态流程
用户拖动任务卡片
↓
onDragEnd 事件触发
↓
获取 taskId 和 newStatus
↓
taskStore.updateTask(taskId, { status: newStatus })
↓
PUT /api/tasks/:id { status: 'in_progress' }
↓
后端验证状态流转规则
↓
更新数据库
↓
返回更新后的任务
↓
taskStore 更新本地状态
↓
UI 重新渲染（任务移动到新列）
↓
显示成功提示
🎯 开发优先级
P0 (核心功能 - 第一周)
- ✅ 项目初始化和基础配置
- ✅ 路由和状态管理
- ✅ API 封装
- ✅ 主布局（Header + Sidebar + Main）
- ✅ TaskBoard 任务看板 + 拖拽
- ✅ TaskCard 任务卡片组件
- ✅ TaskDetail Sidebar 任务详情
P1 (重要功能 - 第二周)
- ✅ Dashboard 仪表盘
- ✅ ProjectDetail 项目详情
- ✅ MarkdownEditor 编辑器
- ✅ FileUpload 文件上传
- ✅ 实时更新功能
P2 (扩展功能 - 第三周)
- ✅ AgentList 智能体管理
- ✅ 全局规约管理
- ✅ 共享笔记功能
- ✅ 响应式适配
- ✅ 性能优化
- ✅ 单元测试
P3 (锦上添花 - 后续)
- 快捷键支持
- 暗黑模式
- 国际化（i18n）
- 通知中心
- 评论系统
- 工作流自动化
✅ 验收标准
功能完整性
- ✅ 用户可以创建项目
- ✅ 用户可以创建任务（支持 Markdown 描述）
- ✅ 用户可以在看板中拖拽任务改变状态
- ✅ 用户可以点击任务查看详情
- ✅ 用户可以上传附件（最大 10MB）
- ✅ 用户可以管理子任务
- ✅ 用户可以设置和查看协作规约
- ✅ 用户可以添加共享笔记
- ✅ 智能体可以注册并领取任务
- ✅ 统计数据实时更新
交互体验
- ✅ 拖拽流畅，无明显延迟
- ✅ 路由切换有过渡动画
- ✅ 加载状态友好（骨架屏/Loading）
- ✅ 错误提示清晰明确
- ✅ 成功操作有即时反馈
- ✅ 表单验证完善
视觉规范
- ✅ 使用 Element Plus 组件库
- ✅ 颜色符合设计系统
- ✅ 间距、圆角、阴影统一
- ✅ 字体大小和行高合理
- ✅ 移动端适配良好
性能指标
- ✅ 首屏加载 < 2 秒
- ✅ API 响应时间 < 500ms
- ✅ 拖拽延迟 < 100ms
- ✅ 列表渲染流畅（60fps）
- ✅ 组件懒加载和代码分割
代码质量
- ✅ 使用 Composition API
- ✅ 状态管理清晰（Pinia）
- ✅ 组件职责单一
- ✅ API 封装合理
- ✅ 错误处理完善
- ✅ 关键功能有单元测试
📝 开发日志
2026-02-15 22:50
- ✅ 完善设计文档
- ✅ 定义页面布局和组件
- ✅ 制定视觉规范
- ✅ 规划交互流程
- ✅ 确定开发优先级
- 🔄 待审核...
🔗 相关文档
- API-V2.md - 后端 API 接口文档
- TASKS-VUE.md - Vue 开发任务清单
- FRONTEND-VUE.md - Vue 前端技术方案
📞 审核意见
请审核以下方面:
- 布局设计 - 是否符合现代项目管理工具的风格？
- 交互流程 - 拖拽、侧边栏等交互是否合理？
- 视觉规范 - 颜色、间距、字体是否统一？
- 功能完整性 - 是否覆盖所有核心需求？
- 性能考虑 - 优化策略是否足够？
- 开发优先级 - 排期是否合理？
审核状态: 🔄 待审核
审核结果: 待填写
修改意见: 待填写
文档版本: v3.0
最后更新: 2026-02-15 22:50
状态: 待审核