work-1
01f43d8da5
主要更新: - 统一规约管理视图(全局/项目规约共享表格) - 项目树形导航(看板/项目规约子菜单) - 智能高亮与状态持久化 - 移动端响应式支持(汉堡菜单) - 规约类型更新为7个专业分类 - 文件清理(85→15文件,减少82%) 修复问题: - 修复创建项目功能(JavaScript语法错误) - 修复协作规约错误高亮 - 修复看板需要点击2次才高亮 - 修复项目树自动收起问题 新增工具: - debug.html(项目创建测试) - test.html(移动端测试) - status.html(系统诊断) 技术改进: - 上下文状态管理(currentRuleContext) - 展开状态持久化(projectExpandedState) - 触摸事件支持 - 移除console.log提升兼容性
1032 lines
40 KiB
Markdown
1032 lines
40 KiB
Markdown
# 多智能体任务管理系统 v3.0 界面设计文档
|
||
|
||
## 📋 文档信息
|
||
|
||
- **版本**: v3.0
|
||
- **设计日期**: 2026-02-15
|
||
- **技术栈**: Vue 3 + Vite + Element Plus + Pinia
|
||
- **设计师**: AI Assistant
|
||
- **审核状态**: 🔄 待审核
|
||
|
||
---
|
||
|
||
## 🎯 设计目标
|
||
|
||
### 核心目标
|
||
1. **提升用户体验** - 采用现代项目管理工具的经典布局（类似 Jira / Trello）
|
||
2. **可视化流程** - 通过 Kanban 看板清晰展示任务流转过程
|
||
3. **减少跳转** - 利用侧边栏、浮层减少页面跳转，提高操作效率
|
||
4. **层级管理** - 充分利用项目→任务→子任务的层级关系
|
||
5. **智能交互** - 支持拖拽、快捷键、实时更新等高级交互
|
||
|
||
### 用户角色
|
||
- **人类用户** - 项目管理者，创建项目、分配任务、审核结果
|
||
- **智能体** - 任务执行者，领取任务、完成工作、上传成果
|
||
|
||
---
|
||
|
||
## 🏗️ 整体架构
|
||
|
||
### 布局结构
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────────────┐
|
||
│ 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` - 筛选下拉
|
||
|
||
**交互**:
|
||
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
|
||
**状态**: 待审核 |