# 🎯 快速功能测试指南

## ✅ 验证 v3.0 功能已更新

**访问地址：** http://localhost:9999

**⚠️ 重要：清除浏览器缓存**
- Chrome: `Ctrl+Shift+Delete` 或 `F12` → Network → Disable cache
- 或使用无痕模式打开

---

## 📋 功能测试清单

### 1️⃣ 添加任务（3 种方式）

**方法一：工具栏**
1. 点击顶部紫色按钮"➕ 添加任务"
2. 填写任务名称（如："测试任务 1"）
3. 点击"💾 保存"
4. ✅ 看到新任务出现在看板中

**方法二：列底部**
1. 找到任意列（待办/进行中/已完成）
2. 点击列底部的"+ 添加任务"按钮
3. 填写任务名称
4. ✅ 看到新任务出现在该列

**方法三：泳道头部**
1. 找到任意泳道（如：功能开发）
2. 点击泳道头部的"➕ 任务"按钮
3. 填写任务名称
4. ✅ 看到新任务出现在该泳道

---

### 2️⃣ 编辑任务（2 种方式）

**方法一：双击编辑**
1. 找到任意任务卡片
2. **双击**卡片
3. 修改任务名称或其他信息
4. 点击"💾 保存"
5. ✅ 看到任务信息已更新

**方法二：悬停编辑**
1. 鼠标悬停在任务卡片上
2. 点击右上角出现的 ✏️ 按钮
3. 修改任务信息
4. ✅ 看到任务信息已更新

---

### 3️⃣ 删除任务（2 种方式）

**方法一：悬停删除**
1. 鼠标悬停在任务卡片上
2. 点击右上角出现的 🗑️ 按钮
3. 确认删除
4. ✅ 看到任务消失

**方法二：编辑模式删除**
1. 双击任务卡片打开编辑
2. 点击左下角"🗑️ 删除"按钮
3. 确认删除
4. ✅ 看到任务消失

---

### 4️⃣ 添加泳道

1. 点击顶部工具栏"➕ 添加泳道"
2. 填写：
   - 泳道 ID: `testing`
   - 泳道名称: `测试`
   - 颜色：选择任意颜色
   - 图标：`🧪`
3. 点击"➕ 添加"
4. ✅ 看到新泳道出现在看板上

---

### 5️⃣ 删除泳道

1. 确保泳道中没有任务（如有先移走）
2. 点击泳道头部的 🗑️ 按钮
3. 确认删除
4. ✅ 看到泳道消失

---

### 6️⃣ 拖拽移动

1. 鼠标左键按住任意任务卡片
2. 拖拽到另一个列（如：从"待办"到"进行中"）
3. 松开鼠标
4. ✅ 看到任务移动到新列

---

## 🎨 界面元素说明

### 工具栏（顶部）
```
┌────────────────────────────────────────────────────┐
│ [➕ 添加任务] [➕ 添加泳道] [🔄 刷新] [👁️ 切换视图] │
└────────────────────────────────────────────────────┘
```

### 泳道头部
```
┌───────────────────────────────────────────┐
│ 🚀 功能开发    3 个任务      [➕ 任务] [🗑️] │
└───────────────────────────────────────────┘
```

### 任务卡片（悬停时）
```
┌─────────────────────────┐
│ 任务名称         [✏️][🗑️] │  ← 悬停显示按钮
│ 👤 张三        🔴 高     │
│ 📝 3/5                  │
└─────────────────────────┘
```

### 列底部
```
┌─────────────────────────┐
│     + 添加任务          │  ← 点击添加
└─────────────────────────┘
```

---

## ⚠️ 常见问题

### Q1: 看不到添加/编辑按钮？
**A:** 浏览器缓存问题，解决方法：
1. 硬刷新：`Ctrl+F5` 或 `Ctrl+Shift+R`
2. 清除缓存：`Ctrl+Shift+Delete`
3. 使用无痕模式打开

### Q2: 双击没反应？
**A:** 确保点击的是任务卡片主体，不是按钮

### Q3: 删除泳道按钮是灰色？
**A:** 泳道中还有任务，需要先移走或删除这些任务

### Q4: 拖拽没效果？
**A:** 确保拖拽到列内，看到蓝色高亮后松开

---

## ✅ 功能验证清单

打印此清单逐项测试：

```
□ 1. 访问 http://localhost:9999
□ 2. 清除浏览器缓存
□ 3. 看到版本显示"v3.0.0 - 完整功能版"
□ 4. 工具栏有"➕ 添加任务"按钮
□ 5. 工具栏有"➕ 添加泳道"按钮
□ 6. 列底部有"+ 添加任务"按钮
□ 7. 泳道头部有"➕ 任务"按钮
□ 8. 泳道头部有"🗑️"删除按钮
□ 9. 悬停任务卡片显示✏️和🗑️按钮
□ 10. 双击任务卡片打开编辑框
□ 11. 可以添加任务
□ 12. 可以编辑任务
□ 13. 可以删除任务
□ 14. 可以添加泳道
□ 15. 可以删除空泳道
□ 16. 可以拖拽任务移动
□ 17. 可以切换视图
```

---

## 🎯 快速测试脚本

打开浏览器控制台（F12），粘贴运行：

```javascript
// 自动测试所有功能
console.log("=== MVP 看板 v3.0 功能测试 ===");
console.log("1. 检查版本...");
const version = document.querySelector('.version');
console.log(version ? `✅ 版本：${version.textContent}` : "❌ 版本未找到");

console.log("2. 检查添加任务按钮...");
const addBtn = document.querySelector('.btn-primary');
console.log(addBtn ? "✅ 添加任务按钮存在" : "❌ 按钮未找到");

console.log("3. 检查任务卡片...");
const cards = document.querySelectorAll('.task-card');
console.log(`✅ 任务卡片：${cards.length}个`);

console.log("4. 检查泳道...");
const lanes = document.querySelectorAll('.lane-section');
console.log(`✅ 泳道数：${lanes.length}个`);

console.log("\n=== 测试完成 ===");
console.log("提示：双击任务卡片测试编辑功能");
```

---

## 📞 需要帮助？

如果以上测试有任何问题，请截图说明：
1. 访问的 URL
2. 浏览器版本
3. 具体问题描述
4. 浏览器控制台错误（F12）

---

**v3.0 - 完整功能版 | 2026-03-21**