197 lines
5.9 KiB
Markdown
197 lines
5.9 KiB
Markdown
# 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. **不同設備**: 在桌面端和手機端都進行測試
|
||
|
||
---
|
||
|
||
## 結論
|
||
|
||
我承認之前的判斷可能不準確，因為我無法實際看到瀏覽器渲染效果。通過程式碼分析，確實存在一些可能導致視覺差異的技術細節。需要進行實際的程式碼修正和測試來確保兩者完全一致。 |