# Popup樣式一致性測試案例

## 測試目標
驗證展示頁面的"詞卡風格"popup與AI生成頁面的實際詞彙popup樣式是否完全一致。

---

## 測試環境
- **瀏覽器**: Chrome/Safari/Firefox
- **屏幕尺寸**: 桌面端(>1024px)、平板端(768-1024px)、手機端(<768px)
- **展示頁面**: http://localhost:3000/vocab-designs
- **實際功能**: http://localhost:3000/generate

---

## 詳細測試案例

### TC-001: 視覺外觀對比

#### TC-001-01: 整體尺寸檢查
**測試步驟**:
1. 打開展示頁面，選擇"詞卡風格"，點擊預覽按鈕
2. 打開AI生成頁面，輸入"Hello world"，點擊分析，點擊任意詞彙
3. 使用瀏覽器開發者工具測量popup尺寸

**檢查項目**:
- [ ] popup寬度是否相同
- [ ] popup高度是否相似
- [ ] 圓角半徑是否一致 (`rounded-xl`)
- [ ] 陰影效果是否相同 (`shadow-lg`)

**預期結果**: 兩個popup的外觀尺寸應該完全相同

#### TC-001-02: 標題區對比
**檢查項目**:
- [ ] 漸層背景是否相同 (`bg-gradient-to-br from-blue-50 to-indigo-50`)
- [ ] 內邊距是否一致 (`p-5`)
- [ ] 邊框是否相同 (`border-b border-blue-200`)

**測試方法**: 使用瀏覽器檢查元素工具對比CSS類別

#### TC-001-03: 關閉按鈕檢查
**檢查項目**:
- [ ] 按鈕位置: 右上角
- [ ] 按鈕尺寸: `w-6 h-6`
- [ ] 背景色: `bg-white bg-opacity-80`
- [ ] 懸停效果是否相同

### TC-002: 內容佈局對比

#### TC-002-01: 詞彙標題行
**展示頁面**: `elaborate` + `[B2]`在同一行
**實際popup**: `{word}` + `{difficultyLevel}`

**檢查項目**:
- [ ] 詞彙名稱字體大小 (`text-2xl font-bold`)
- [ ] CEFR標籤位置 (最右邊)
- [ ] 行間距是否一致 (`mb-3`)

#### TC-002-02: 詞性發音行
**展示頁面**: `[verb] /pronunciation/ ▶️` + `[B2]`
**實際popup**: `[partOfSpeech] /pronunciation/ ▶️` + `[difficultyLevel]`

**檢查項目**:
- [ ] 詞性標籤樣式 (`bg-gray-100 text-gray-700 px-3 py-1 rounded-full`)
- [ ] 發音字體大小 (`text-base text-gray-600`)
- [ ] 播放按鈕尺寸 (`w-8 h-8 bg-blue-600 rounded-full`)
- [ ] 元素間距 (`gap-3`)

### TC-003: 彩色區塊對比

#### TC-003-01: 翻譯區塊
**檢查項目**:
- [ ] 背景色: `bg-green-50`
- [ ] 邊框: `border border-green-200`
- [ ] 內邊距: `p-3`
- [ ] 標題樣式: `font-semibold text-green-900 mb-2 text-left text-sm`
- [ ] 內容樣式: `text-green-800 font-medium text-left`

#### TC-003-02: 定義區塊
**檢查項目**:
- [ ] 背景色: `bg-gray-50`
- [ ] 邊框: `border border-gray-200`
- [ ] 標題: `font-semibold text-gray-900 mb-2 text-left text-sm`
- [ ] 內容: `text-gray-700 text-left text-sm leading-relaxed`

#### TC-003-03: 同義詞區塊
**檢查項目**:
- [ ] 背景色: `bg-purple-50`
- [ ] 邊框: `border border-purple-200`
- [ ] 標籤樣式: `bg-white text-purple-700 px-2 py-1 rounded-full text-xs`

### TC-004: CEFR顏色測試

#### TC-004-01: 六個等級顏色檢查
**測試數據**: A1, A2, B1, B2, C1, C2

**檢查項目**:
- [ ] A1: `bg-green-100 text-green-700 border-green-200`
- [ ] A2: `bg-blue-100 text-blue-700 border-blue-200`
- [ ] B1: `bg-yellow-100 text-yellow-700 border-yellow-200`
- [ ] B2: `bg-orange-100 text-orange-700 border-orange-200`
- [ ] C1: `bg-red-100 text-red-700 border-red-200`
- [ ] C2: `bg-purple-100 text-purple-700 border-purple-200`

**測試方法**:
1. 在展示頁面修改mock數據的difficultyLevel
2. 在實際頁面測試不同CEFR等級的詞彙
3. 對比顏色是否完全相同

### TC-005: 按鈕樣式對比

#### TC-005-01: 保存按鈕檢查
**檢查項目**:
- [ ] 寬度: `w-full`
- [ ] 背景: `bg-primary`
- [ ] 內邊距: `py-3`
- [ ] 圓角: `rounded-lg`
- [ ] 字體: `font-medium`
- [ ] 圖標尺寸: `w-4 h-4`

### TC-006: 響應式測試

#### TC-006-01: 手機端對比
**測試步驟**:
1. 將瀏覽器調整為手機尺寸 (375px寬度)
2. 分別測試兩個popup
3. 檢查是否都能完整顯示

**檢查項目**:
- [ ] 寬度自動調整
- [ ] 不會超出屏幕邊界
- [ ] 內容不會被截掉
- [ ] 觸控操作友好

---

## 實際差異分析

### 🔍 **程式碼層面的差異**

#### **1. CEFR顏色實現方式**
**展示頁面** (正確):
```typescript
const getCEFRColor = (level: string) => {
  switch (level) {
    case 'A1': return 'bg-green-100 text-green-700 border-green-200'
    // ... 完整的6個等級
  }
}
```

**實際popup** (簡化版):
```typescript
difficulty === 'A1' || difficulty === 'A2' ? 'bg-green-100 text-green-700' :
difficulty === 'B1' || difficulty === 'B2' ? 'bg-yellow-100 text-yellow-700' :
// ... 只有3-4個分組
```

#### **2. 容器尺寸差異**
**展示頁面**:
```typescript
className="bg-white rounded-xl shadow-lg w-96 max-w-md overflow-hidden"
// 固定寬度 w-96 = 384px
```

**實際popup**:
```typescript
width: 'min(384px, calc(100vw - 32px))'
// 響應式寬度
```

#### **3. 可能的其他差異**
- 字體載入狀態
- CSS優先級問題
- 瀏覽器快取問題
- 假資料vs真實資料的處理差異

---

## 修正建議

### 高優先級修正:
1. **統一CEFR顏色函數**: 在ClickableTextV2中實現完整的getCEFRColor
2. **統一容器樣式**: 確保所有CSS類別完全相同
3. **統一寬度處理**: 在保持響應式的前提下統一寬度邏輯

### 測試驗證:
1. **並排對比**: 同時打開兩個頁面進行視覺對比
2. **開發者工具**: 使用瀏覽器工具檢查computed styles
3. **不同設備**: 在桌面端和手機端都進行測試

---

## 結論

我承認之前的判斷可能不準確，因為我無法實際看到瀏覽器渲染效果。通過程式碼分析，確實存在一些可能導致視覺差異的技術細節。需要進行實際的程式碼修正和測試來確保兩者完全一致。