# Web 界面 v3.0 使用指南
## 🎉 新功能概览
v3.0 前端现在支持**完整的增删改查**功能！
---
## 📋 功能清单
### ✅ 任务管理
| 功能 | 操作方式 | 说明 |
|------|----------|------|
| **添加任务** | 1. 点击工具栏"➕ 添加任务"
2. 点击列底部"+ 添加任务"按钮
3. 点击泳道头部"➕ 任务"按钮 | 三种方式添加任务 |
| **编辑任务** | 1. **双击**任务卡片
2. 悬停点击 ✏️ 按钮 | 双击或点击编辑按钮 |
| **删除任务** | 1. 悬停点击 🗑️ 按钮
2. 编辑模式点击"🗑️ 删除" | 两种删除方式 |
| **移动任务** | 拖拽任务卡片到目标列 | 支持跨泳道移动 |
### ✅ 泳道管理
| 功能 | 操作方式 | 说明 |
|------|----------|------|
| **添加泳道** | 点击工具栏"➕ 添加泳道" | 打开添加泳道模态框 |
| **删除泳道** | 点击泳道头部 🗑️ 按钮 | 仅当泳道为空时可删除 |
| **添加任务到泳道** | 点击泳道头部"➕ 任务"按钮 | 快速添加任务到该泳道 |
---
## 🎯 使用教程
### 1️⃣ 添加任务
**方法一：工具栏添加**
1. 点击顶部工具栏的"➕ 添加任务"按钮
2. 填写任务信息：
- 任务名称（必填）
- 选择泳道
- 选择状态
- 选择优先级
- 负责人
- 任务数
3. 点击"💾 保存"
**方法二：列底部添加**
1. 找到目标列（待办/进行中/已完成）
2. 点击列底部的"+ 添加任务"按钮
3. 填写任务信息并保存
**方法三：泳道头部添加**
1. 找到目标泳道
2. 点击泳道头部的"➕ 任务"按钮
3. 填写任务信息并保存
---
### 2️⃣ 编辑任务
**方法一：双击编辑**
1. **双击**任意任务卡片
2. 修改任务信息
3. 点击"💾 保存"
**方法二：按钮编辑**
1. 鼠标悬停在任务卡片上
2. 点击右上角的 ✏️ 按钮
3. 修改任务信息并保存
---
### 3️⃣ 删除任务
**方法一：悬停删除**
1. 鼠标悬停在任务卡片上
2. 点击右上角的 🗑️ 按钮
3. 确认删除
**方法二：编辑模式删除**
1. 双击打开任务编辑
2. 点击左下角的"🗑️ 删除"按钮
3. 确认删除
---
### 4️⃣ 添加泳道
1. 点击工具栏的"➕ 添加泳道"按钮
2. 填写泳道信息：
- 泳道 ID（英文标识，如：testing）
- 泳道名称（如：测试）
- 颜色（选择器）
- 图标（emoji）
3. 点击"➕ 添加"
---
### 5️⃣ 删除泳道
1. 确保泳道中没有任务（如有任务需先移走或删除）
2. 点击泳道头部的 🗑️ 按钮
3. 确认删除
**注意：** 如果泳道中有任务，系统会提示无法删除。
---
### 6️⃣ 移动任务
**拖拽移动**
1. 鼠标左键按住任务卡片
2. 拖拽到目标列
3. 松开鼠标
**支持：**
- 同一泳道内跨状态移动
- 跨泳道移动
- 跨列移动
---
## 🎨 界面说明
### 工具栏
```
┌────────────────────────────────────────────────┐
│ [➕ 添加任务] [➕ 添加泳道] [🔄 刷新] [👁️ 切换视图] │
└────────────────────────────────────────────────┘
```
### 泳道头部
```
┌─────────────────────────────────────────────┐
│ 🚀 功能开发 3 个任务 [➕ 任务] [🗑️] │
└─────────────────────────────────────────────┘
```
### 任务卡片
```
┌─────────────────────────────┐
│ 任务名称 [✏️][🗑️] │
│ 👤 张三 🔴 高 │
│ 📝 3/5 │
└─────────────────────────────┘
```
### 列底部
```
┌─────────────────────────────┐
│ + 添加任务 │
└─────────────────────────────┘
```
---
## ⌨️ 快捷键
| 快捷键 | 功能 |
|--------|------|
| `双击` | 编辑任务 |
| `拖拽` | 移动任务 |
| `Esc` | 关闭模态框 |
---
## 📊 指标卡片
顶部显示 4 个指标：
- **总任务数** - 所有任务总数
- **已完成** - 状态为"已完成"的任务数
- **进行中** - 状态为"进行中"的任务数
- **待办** - 状态为"待办"的任务数
---
## 🔄 视图切换
点击"👁️ 切换视图"按钮可在两种视图间切换：
**泳道视图**（默认）
- 按泳道分组显示
- 每个泳道独立显示
- 适合多泳道场景
**状态视图**
- 按状态分组显示
- 所有泳道混合显示
- 适合查看整体进度
---
## 💡 使用技巧
1. **快速添加** - 使用列底部的"+ 添加任务"最快捷
2. **批量移动** - 拖拽比编辑更快
3. **悬停操作** - 鼠标悬停显示编辑/删除按钮
4. **双击编辑** - 最直观的编辑方式
5. **定期刷新** - 点击"🔄 刷新"获取最新数据
---
## ⚠️ 注意事项
1. **删除泳道** - 必须先清空泳道中的任务
2. **任务名称** - 必填字段
3. **泳道 ID** - 必须是英文标识（如：feature, testing）
4. **拖拽移动** - 会自动更新任务状态和泳道
5. **数据保存** - 所有操作实时保存到数据库
---
## 🌐 访问地址
**本地访问：** http://localhost:9999
**Docker 部署：** http://<服务器IP>:9999
---
## 🆘 常见问题
**Q: 无法删除泳道？**
A: 泳道中还有任务，需要先移走或删除这些任务。
**Q: 双击没有反应？**
A: 确保点击的是任务卡片，不是按钮。
**Q: 拖拽没效果？**
A: 确保拖拽到列内，看到高亮提示后松开。
**Q: 数据没有保存？**
A: 检查网络连接，查看浏览器控制台错误信息。
---
**v3.0 - 完整功能版 | 2026-03-21**