work-1/task-board
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Files
main
task-board/DESIGN-v3.md
T

1032 lines
40 KiB
Markdown
Raw Permalink Normal View History

添加 v3.0 设计文档和任务列表
2026-02-15 22:35:08 +08:00
# 多智能体任务管理系统 v3.0 界面设计文档
## 📋 文档信息
- **版本**: v3.0
- **设计日期**: 2026-02-15
feat: v3.1 - 统一规约视图、项目树导航、移动端支持
2026-02-24 15:04:25 +08:00
- **技术栈**: Vue 3 + Vite + Element Plus + Pinia
添加 v3.0 设计文档和任务列表
2026-02-15 22:35:08 +08:00
- **设计师**: AI Assistant
feat: v3.1 - 统一规约视图、项目树导航、移动端支持
2026-02-24 15:04:25 +08:00
- **审核状态**: 🔄 待审核
添加 v3.0 设计文档和任务列表
2026-02-15 22:35:08 +08:00
---
## 🎯 设计目标
feat: v3.1 - 统一规约视图、项目树导航、移动端支持
2026-02-24 15:04:25 +08:00
### 核心目标
1. **提升用户体验** - 采用现代项目管理工具的经典布局（类似 Jira / Trello）
2. **可视化流程** - 通过 Kanban 看板清晰展示任务流转过程
3. **减少跳转** - 利用侧边栏、浮层减少页面跳转，提高操作效率
4. **层级管理** - 充分利用项目→任务→子任务的层级关系
5. **智能交互** - 支持拖拽、快捷键、实时更新等高级交互
### 用户角色
- **人类用户** - 项目管理者，创建项目、分配任务、审核结果
- **智能体** - 任务执行者，领取任务、完成工作、上传成果
添加 v3.0 设计文档和任务列表
2026-02-15 22:35:08 +08:00
---
## 🏗️ 整体架构
### 布局结构
```
feat: v3.1 - 统一规约视图、项目树导航、移动端支持
2026-02-24 15:04:25 +08:00
┌─────────────────────────────────────────────────────────────────┐
│ Header (固定顶部，60px) │
│ 🤖 系统名 | 📁项目3 📋任务15 🤖智能体5/8 | 📜规约 🔔通知 │
├────────────┬────────────────────────────────────────────────────┤
│ │ │
│ Sidebar │ Main Content Area │
│ (240px) │ (自适应宽度) │
│ │ │
│ 📁 项目 │ ┌──────────────────────────────────────────────┐ │
│ • 项目A │ │ │ │
│ • 项目B │ │ 动态路由内容区 │ │
│ • 项目C │ │ - Dashboard 仪表盘 │ │
│ │ │ - TaskBoard 任务看板 │ │
│ ───────── │ │ - ProjectDetail 项目详情 │ │
│ │ │ - AgentList 智能体管理 │ │
│ 🤖 智能体 │ │ │ │
│ ⚪ 空闲:3 │ └──────────────────────────────────────────────┘ │
│ 🟢 工作:2 │ │
│ │ │
│ [折叠按钮] │ │
└────────────┴────────────────────────────────────────────────────┘
┌──────────────────────────┐
│ TaskDetail Sidebar │
│ (右侧滑出，480px) │
│ │
│ 任务详情、编辑、附件 │
│ 子任务管理 │
│ │
└──────────────────────────┘
添加 v3.0 设计文档和任务列表
2026-02-15 22:35:08 +08:00
```
feat: v3.1 - 统一规约视图、项目树导航、移动端支持
2026-02-24 15:04:25 +08:00
### 技术架构
```
┌─────────────────────────────────────────────────────┐
│ 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 ... │
└─────────────────────────────────────────────────────┘
```
添加 v3.0 设计文档和任务列表
2026-02-15 22:35:08 +08:00
---
feat: v3.1 - 统一规约视图、项目树导航、移动端支持
2026-02-24 15:04:25 +08:00
## 🎨 页面详细设计
添加 v3.0 设计文档和任务列表
2026-02-15 22:35:08 +08:00
feat: v3.1 - 统一规约视图、项目树导航、移动端支持
2026-02-24 15:04:25 +08:00
### 1. Dashboard - 仪表盘
添加 v3.0 设计文档和任务列表
2026-02-15 22:35:08 +08:00
feat: v3.1 - 统一规约视图、项目树导航、移动端支持
2026-02-24 15:04:25 +08:00
**路由**: `/`
**功能**: 全局数据概览，快速访问入口
**布局**:
```
┌─────────────────────────────────────────────────────────┐
│ 📊 仪表盘 │
├─────────────────────────────────────────────────────────┤
│ │
│ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ │
│ │📁 │ │📋 │ │🟡 │ │✅ │ │
│ │项目总数│ │任务总数│ │进行中 │ │已完成 │ │
│ │ 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` - 项目列表
**交互**:
- 点击统计卡片 → 跳转到对应筛选的任务列表
- 点击图表区域 → 高亮对应数据
- 点击项目名称 → 跳转到项目详情
添加 v3.0 设计文档和任务列表
2026-02-15 22:35:08 +08:00
---
feat: v3.1 - 统一规约视图、项目树导航、移动端支持
2026-02-24 15:04:25 +08:00
### 2. TaskBoard - 任务看板（Kanban）
添加 v3.0 设计文档和任务列表
2026-02-15 22:35:08 +08:00
feat: v3.1 - 统一规约视图、项目树导航、移动端支持
2026-02-24 15:04:25 +08:00
**路由**: `/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` - 筛选下拉
**交互**:
1. **拖拽** - 拖动任务卡片到其他列改变状态
2. **点击卡片** - 打开右侧任务详情 Sidebar
3. **筛选** - 按类型、优先级、关键词筛选
4. **搜索** - 实时搜索任务标题和描述
---
### 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` - 详情描述列表
---
## 🎨 视觉设计规范
### 颜色系统
```scss
// 主题色
$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;
```
### 间距系统
```scss
$spacing-xs: 4px;
$spacing-sm: 8px;
$spacing-md: 16px;
$spacing-lg: 24px;
$spacing-xl: 32px;
$spacing-xxl: 48px;
```
### 圆角
```scss
$radius-sm: 4px;
$radius-md: 8px;
$radius-lg: 12px;
$radius-xl: 16px;
```
### 阴影
```scss
$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);
```
### 字体
```scss
$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）
**流程**:
1. 用户按住任务卡片
2. 卡片变为半透明，跟随鼠标移动
3. 经过其他列时，列高亮显示
4. 松开鼠标，卡片落入目标列
5. 发送 API 请求更新状态
6. 成功: 提示"任务状态已更新"
7. 失败: 卡片恢复原位，提示错误
**视觉反馈**:
```scss
.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**:
```scss
.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` 组件
```vue
<el-skeleton :rows="5" animated v-if="loading" />
```
**按钮加载**:
```vue
<el-button :loading="submitting" @click="submit">
提交
</el-button>
```
### Toast 提示
**成功提示**:
```javascript
ElMessage.success('任务状态已更新')
```
**错误提示**:
```javascript
ElMessage.error('更新失败，请重试')
```
**警告提示**:
```javascript
ElMessage.warning('文件大小不能超过 10MB')
```
---
## 📱 响应式设计
### 断点设置
```scss
$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. 组件懒加载
```javascript
const Dashboard = () => import('@/views/Dashboard.vue')
const TaskBoard = () => import('@/views/TaskBoard.vue')
```
### 2. 虚拟滚动
对于超过 100 条的任务列表，使用虚拟滚动:
```vue
<el-virtual-list
:data="tasks"
:item-size="60"
:height="600"
>
<template #default="{ item }">
<TaskCard :task="item" />
</template>
</el-virtual-list>
```
### 3. 防抖节流
**搜索防抖**:
```javascript
import { debounce } from 'lodash-es'
const handleSearch = debounce((keyword) => {
taskStore.setFilters({ keyword })
}, 300)
```
**状态更新节流**:
```javascript
import { throttle } from 'lodash-es'
const updateStatus = throttle(async (taskId, status) => {
await taskApi.updateTask(taskId, { status })
}, 1000)
```
### 4. 图片懒加载
附件图片使用懒加载:
```vue
<el-image :src="attachment.url" lazy />
```
### 5. Keep-Alive 缓存
缓存频繁切换的页面:
```vue
<router-view v-slot="{ Component }">
<keep-alive :include="['Dashboard', 'TaskBoard']">
<component :is="Component" />
</keep-alive>
</router-view>
```
---
## 🔐 安全考虑
### 1. XSS 防护
- Markdown 渲染使用 DOMPurify 过滤
- 用户输入统一转义
```javascript
import DOMPurify from 'dompurify'
export function renderMarkdown(content) {
const dirty = marked(content)
return DOMPurify.sanitize(dirty)
}
```
### 2. CSRF 防护
- Axios 默认携带 CSRF Token
- 关键操作二次确认
```javascript
ElMessageBox.confirm(
'确定要删除这个任务吗？',
'警告',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}
).then(() => {
deleteTask(taskId)
})
```
### 3. 文件上传安全
- 限制文件类型
- 限制文件大小（10MB）
- 后端验证文件内容
---
## 🧪 测试策略
### 1. 单元测试
使用 Vitest + Vue Test Utils:
```javascript
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:
```javascript
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 (核心功能 - 第一周)
1. ✅ 项目初始化和基础配置
2. ✅ 路由和状态管理
3. ✅ API 封装
4. ✅ 主布局（Header + Sidebar + Main）
5. ✅ TaskBoard 任务看板 + 拖拽
6. ✅ TaskCard 任务卡片组件
7. ✅ TaskDetail Sidebar 任务详情
### P1 (重要功能 - 第二周)
8. ✅ Dashboard 仪表盘
9. ✅ ProjectDetail 项目详情
10. ✅ MarkdownEditor 编辑器
11. ✅ FileUpload 文件上传
12. ✅ 实时更新功能
### P2 (扩展功能 - 第三周)
13. ✅ AgentList 智能体管理
14. ✅ 全局规约管理
15. ✅ 共享笔记功能
16. ✅ 响应式适配
17. ✅ 性能优化
18. ✅ 单元测试
### P3 (锦上添花 - 后续)
19. 快捷键支持
20. 暗黑模式
21. 国际化（i18n）
22. 通知中心
23. 评论系统
24. 工作流自动化
---
## ✅ 验收标准
### 功能完整性
- [ ] ✅ 用户可以创建项目
- [ ] ✅ 用户可以创建任务（支持 Markdown 描述）
- [ ] ✅ 用户可以在看板中拖拽任务改变状态
- [ ] ✅ 用户可以点击任务查看详情
- [ ] ✅ 用户可以上传附件（最大 10MB）
- [ ] ✅ 用户可以管理子任务
- [ ] ✅ 用户可以设置和查看协作规约
- [ ] ✅ 用户可以添加共享笔记
- [ ] ✅ 智能体可以注册并领取任务
- [ ] ✅ 统计数据实时更新
### 交互体验
- [ ] ✅ 拖拽流畅，无明显延迟
- [ ] ✅ 路由切换有过渡动画
- [ ] ✅ 加载状态友好（骨架屏/Loading）
- [ ] ✅ 错误提示清晰明确
- [ ] ✅ 成功操作有即时反馈
- [ ] ✅ 表单验证完善
### 视觉规范
- [ ] ✅ 使用 Element Plus 组件库
- [ ] ✅ 颜色符合设计系统
- [ ] ✅ 间距、圆角、阴影统一
- [ ] ✅ 字体大小和行高合理
- [ ] ✅ 移动端适配良好
### 性能指标
- [ ] ✅ 首屏加载 < 2 秒
- [ ] ✅ API 响应时间 < 500ms
- [ ] ✅ 拖拽延迟 < 100ms
- [ ] ✅ 列表渲染流畅（60fps）
- [ ] ✅ 组件懒加载和代码分割
### 代码质量
- [ ] ✅ 使用 Composition API
- [ ] ✅ 状态管理清晰（Pinia）
- [ ] ✅ 组件职责单一
- [ ] ✅ API 封装合理
- [ ] ✅ 错误处理完善
- [ ] ✅ 关键功能有单元测试
---
## 📝 开发日志
### 2026-02-15 22:50
- ✅ 完善设计文档
- ✅ 定义页面布局和组件
- ✅ 制定视觉规范
- ✅ 规划交互流程
- ✅ 确定开发优先级
- 🔄 待审核...
---
## 🔗 相关文档
- [API-V2.md](./API-V2.md) - 后端 API 接口文档
- [TASKS-VUE.md](./TASKS-VUE.md) - Vue 开发任务清单
- [FRONTEND-VUE.md](./FRONTEND-VUE.md) - Vue 前端技术方案
---
## 📞 审核意见
**请审核以下方面**:
1. **布局设计** - 是否符合现代项目管理工具的风格？
2. **交互流程** - 拖拽、侧边栏等交互是否合理？
3. **视觉规范** - 颜色、间距、字体是否统一？
4. **功能完整性** - 是否覆盖所有核心需求？
5. **性能考虑** - 优化策略是否足够？
6. **开发优先级** - 排期是否合理？
**审核状态**: 🔄 待审核
**审核结果**: _待填写_
**修改意见**: _待填写_
---
**文档版本**: v3.0
**最后更新**: 2026-02-15 22:50
**状态**: 待审核
Reference in New Issue Copy Permalink