⭐
- 重點提示：
- 標有星星的詞彙和慣用語是
- 常用、高頻詞彙
- ，建議優先學習和保存到詞卡庫！
+ ⭐ 為常用高頻詞彙，建議優先學習！
@@ -469,6 +481,7 @@ function GenerateContent() {
{(() => {
// 只有當慣用語為常用且不是簡單慣用語時才顯示星星
// 簡單慣用語定義：學習者CEFR > 慣用語CEFR
+ const userLevel = localStorage.getItem('userEnglishLevel') || 'A2'
const isHighFrequency = idiom?.frequency === 'high'
const idiomCefr = idiom?.cefrLevel || 'A1'
const isNotSimpleIdiom = !compareCEFRLevels(userLevel, idiomCefr, '>')
diff --git a/詞卡管理功能產品需求規格.md b/詞卡管理功能產品需求規格.md
new file mode 100644
index 0000000..5f8c043
--- /dev/null
+++ b/詞卡管理功能產品需求規格.md
@@ -0,0 +1,450 @@
+# DramaLing 詞卡管理功能產品需求規格書
+
+## 1. 概述
+
+### 1.1 文檔目的
+本文檔定義了 DramaLing 詞卡管理功能的詳細產品需求規格，涵蓋詞卡的創建、編輯、組織、搜尋、篩選和管理等核心功能。
+
+### 1.2 功能簡介
+詞卡管理是 DramaLing 的核心功能之一，為用戶提供完整的詞卡生命週期管理，包括：
+- 📝 詞卡新增與編輯
+- 🔍 智能搜尋與篩選
+- ⭐ 收藏與分類管理
+- 📊 學習進度追蹤
+- 🔄 批量操作功能
+
+## 2. 功能需求分析
+
+### 2.1 核心功能模組
+
+#### 2.1.1 詞卡展示頁面 (FlashcardsPage)
+- **位置**: `/flashcards`
+- **主要功能**: 集中管理和展示所有詞卡
+
+##### 頁面佈局設計
+1. **頁面標題區域**
+ - 顯示 "我的詞卡" 標題
+ - 新增詞卡按鈕 (手動創建)
+ - AI 生成詞卡按鈕 (跳轉至 `/generate`)
+
+2. **分頁標籤系統**
+ - **所有詞卡**: 顯示用戶全部詞卡 (顯示詞卡總數)
+ - **收藏詞卡**: 顯示已收藏的詞卡 (顯示收藏總數，⭐ 圖標)
+
+3. **搜尋與篩選區域**
+ - 主要搜尋框：支援詞彙、翻譯、定義的全文搜尋
+ - 進階篩選選項 (可展開/收起)
+ - 快速篩選按鈕組
+ - 搜尋結果統計
+
+#### 2.1.2 詞卡顯示格式
+每個詞卡採用橫向卡片佈局，包含：
+
+##### 左側區域
+- **例句圖片**: 54x36 像素，展示詞彙使用情境
+- **詞彙信息**:
+ - 詞彙本身 (大字體粗體顯示)
+ - 詞性標籤 (noun, verb, adjective 等)
+ - 中文翻譯 (中等字體)
+ - 發音符號與播放按鈕
+
+##### 右上角
+- **CEFR 難度標籤**: A1-C2 等級，使用顏色區分
+ - A1: 綠色 (基礎)
+ - A2: 藍色 (基礎)
+ - B1: 黃色 (中級)
+ - B2: 橙色 (中高級)
+ - C1: 紅色 (高級)
+ - C2: 紫色 (精通)
+
+##### 右側操作區域
+- **收藏按鈕**: 星星圖標，已收藏顯示黃色實心
+- **編輯按鈕**: 編輯圖標，開啟編輯表單
+- **刪除按鈕**: 垃圾桶圖標，需二次確認
+- **詳細按鈕**: 箭頭圖標，導航至詞卡詳細頁面
+
+##### 底部統計信息
+- 創建日期
+- 掌握度百分比
+
+### 2.2 搜尋與篩選功能
+
+#### 2.2.1 主要搜尋功能
+```typescript
+// 搜尋範圍
+- 詞彙本身 (word)
+- 中文翻譯 (translation)
+- 英文定義 (definition)
+- 例句內容 (example)
+```
+
+##### 搜尋增強功能
+- **即時搜尋**: 輸入時即時過濾結果
+- **高亮顯示**: 搜尋關鍵字在結果中高亮標示
+- **清除功能**: 一鍵清除搜尋條件 (ESC 鍵或 X 按鈕)
+- **結果統計**: 顯示找到的詞卡數量
+
+#### 2.2.2 進階篩選選項
+
+##### CEFR 等級篩選
+```typescript
+enum CEFRLevel {
+ A1 = "A1 - 基礎",
+ A2 = "A2 - 基礎",
+ B1 = "B1 - 中級",
+ B2 = "B2 - 中高級",
+ C1 = "C1 - 高級",
+ C2 = "C2 - 精通"
+}
+```
+
+##### 詞性篩選
+```typescript
+enum PartOfSpeech {
+ noun = "名詞 (noun)",
+ verb = "動詞 (verb)",
+ adjective = "形容詞 (adjective)",
+ adverb = "副詞 (adverb)",
+ preposition = "介詞 (preposition)",
+ interjection = "感嘆詞 (interjection)"
+}
+```
+
+##### 掌握程度篩選
+```typescript
+enum MasteryLevel {
+ high = "已熟練 (80%+)", // >= 80%
+ medium = "學習中 (60-79%)", // 60-79%
+ low = "需加強 (<60%)" // < 60%
+}
+```
+
+##### 收藏狀態篩選
+- 檢查框選項："僅顯示收藏詞卡"
+- 與星星圖標配合顯示
+
+#### 2.2.3 快速篩選按鈕
+提供常用篩選組合的快速按鈕：
+- **需加強詞卡**: 自動設定掌握度 < 60%
+- **收藏詞卡**: 自動篩選收藏項目
+- **高級詞彙**: 自動設定 CEFR 等級為 C1/C2
+- **清除全部**: 重置所有篩選條件
+
+### 2.3 詞卡操作功能
+
+#### 2.3.1 CRUD 操作
+
+##### 新增詞卡
+- **觸發方式**:
+ - 手動新增按鈕 (開啟表單)
+ - AI 生成詞卡 (從 `/generate` 頁面)
+ - 批量導入 (未來功能)
+
+##### 編輯詞卡
+- **可編輯欄位**:
+ ```typescript
+ interface EditableFlashcard {
+ word: string; // 詞彙
+ translation: string; // 中文翻譯
+ definition: string; // 英文定義
+ pronunciation: string; // 發音符號
+ partOfSpeech: string; // 詞性
+ example: string; // 例句
+ difficultyLevel: string; // CEFR 等級
+ }
+ ```
+
+##### 刪除詞卡
+- **安全機制**:
+ - 二次確認對話框
+ - 顯示詞彙名稱確認
+ - 軟刪除機制 (可恢復，未來功能)
+
+#### 2.3.2 收藏功能
+- **收藏狀態切換**: 點擊星星圖標
+- **視覺反饋**:
+ - 未收藏: 灰色空心星星
+ - 已收藏: 黃色實心星星
+- **操作反饋**: 顯示操作成功/失敗訊息
+- **收藏統計**: 在收藏分頁顯示總數
+
+#### 2.3.3 詞卡詳細頁面
+- **導航路徑**: `/flashcards/[id]`
+- **顯示內容**:
+ - 完整詞卡信息
+ - 學習記錄統計
+ - 複習歷史
+ - 錯誤回報記錄
+
+### 2.4 學習進度管理
+
+#### 2.4.1 掌握度系統
+```typescript
+interface MasteryTracking {
+ masteryLevel: number; // 0-100% 掌握度
+ timesReviewed: number; // 複習次數
+ nextReviewDate: string; // 下次複習日期
+ lastReviewDate?: string; // 上次複習日期
+ consecutiveCorrect: number; // 連續答對次數
+}
+```
+
+#### 2.4.2 學習狀態指示
+- **掌握度顏色編碼**:
+ - < 60%: 紅色 (需加強)
+ - 60-79%: 黃色 (學習中)
+ - >= 80%: 綠色 (已熟練)
+
+### 2.5 資料結構定義
+
+#### 2.5.1 詞卡核心資料結構
+```typescript
+interface Flashcard {
+ // 基本識別信息
+ id: string; // 唯一識別碼
+ createdAt: string; // 創建時間
+ updatedAt?: string; // 更新時間
+
+ // 詞彙基本信息
+ word: string; // 詞彙本身
+ translation: string; // 中文翻譯
+ definition: string; // 英文定義
+ pronunciation: string; // 發音符號 (IPA)
+ partOfSpeech: string; // 詞性
+
+ // 學習相關
+ example: string; // 例句
+ exampleTranslation?: string; // 例句翻譯
+ difficultyLevel: string; // CEFR 難度等級
+
+ // 學習追蹤
+ masteryLevel: number; // 掌握度 (0-100)
+ timesReviewed: number; // 複習次數
+ nextReviewDate: string; // 下次複習日期
+
+ // 用戶偏好
+ isFavorite: boolean; // 是否收藏
+}
+```
+
+#### 2.5.2 API 服務結構
+```typescript
+class FlashcardsService {
+ // 查詢操作
+ getFlashcards(search?: string, favoritesOnly?: boolean): Promise