From c6c8088414b6e2ea54922190e842771d5a87bdec Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=84=AD=E6=B2=9B=E8=BB=92?= Date: Sat, 4 Oct 2025 20:36:58 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=8C=E5=96=84=E5=BB=B6=E9=81=B2?= =?UTF-8?q?=E8=A8=88=E6=95=B8=E7=B3=BB=E7=B5=B1=E5=8F=AF=E8=A6=96=E5=8C=96?= =?UTF-8?q?=20+=20Skip=E7=BF=BB=E5=8D=A1=E9=87=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## 用戶體驗優化 - ⚡ 信心度選擇直接提交 (無需確認，更流暢) - 🔄 Skip功能也會重置翻卡狀態 (統一行為) - 🎯 當前卡片不強制藍色 (保持真實延遲狀態) ## 延遲計數可視化 - 📊 詞彙順序區域：一目了然的排序狀態 - 🎨 完整狀態顏色系統：🟢完成 🟡跳過 🟠答錯 🔴混合 ⚪初始 - 📍 第1個位置 = 當前練習 (位置指示 + 顏色狀態) - 🔍 便於驗證延遲計數系統工作效果 ## 技術改善 - 統一的 resetCardState 函數 (DRY原則) - Skip和信心度選擇行為一致 - updateCardState 函數簽名修正 - 移除未使用變數的警告 ## 驗證功能完善 - 可視化排序：跳過/答錯的卡片排序變化立即可見 - 狀態追蹤：每張卡片的延遲分數清楚標示 - 一鍵操作：選擇即提交，跳過即重置 完美的延遲計數系統 + 直觀的驗證界面！ 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- .../components/SimpleFlipCard.tsx | 55 ++++++++-------- .../components/SimpleProgress.tsx | 64 ++++++++++++++++++- .../review-simple/components/api_seeds.json | 12 ++-- frontend/app/review-simple/data.ts | 23 ++----- frontend/app/review-simple/page.tsx | 21 +++--- 5 files changed, 111 insertions(+), 64 deletions(-) diff --git a/frontend/app/review-simple/components/SimpleFlipCard.tsx b/frontend/app/review-simple/components/SimpleFlipCard.tsx index b691fc7..0803a71 100644 --- a/frontend/app/review-simple/components/SimpleFlipCard.tsx +++ b/frontend/app/review-simple/components/SimpleFlipCard.tsx @@ -50,19 +50,28 @@ export function SimpleFlipCard({ card, onAnswer, onSkip }: SimpleFlipCardProps) setIsFlipped(!isFlipped) }, [isFlipped]) + // 統一的卡片狀態重置函數 + const resetCardState = useCallback(() => { + setIsFlipped(false) + setSelectedConfidence(null) + }, []) + const handleConfidenceSelect = useCallback((level: number) => { if (hasAnswered) return - setSelectedConfidence(level) - }, [hasAnswered]) - const handleSubmit = () => { - if (selectedConfidence) { - onAnswer(selectedConfidence) - // 重置狀態為下一張卡片準備 - setIsFlipped(false) - setSelectedConfidence(null) - } - } + // 直接提交，不需要確認步驟 + setSelectedConfidence(level) + onAnswer(level) + + // 重置狀態為下一張卡片準備 + setTimeout(resetCardState, 300) // 短暫延遲讓用戶看到選擇效果 + }, [hasAnswered, onAnswer, resetCardState]) + + const handleSkipClick = useCallback(() => { + onSkip() + // 跳過後也重置卡片狀態 + setTimeout(resetCardState, 100) // 較短延遲，因為沒有選擇效果需要顯示 + }, [onSkip, resetCardState]) return (
@@ -175,7 +184,7 @@ export function SimpleFlipCard({ card, onAnswer, onSkip }: SimpleFlipCardProps)

- 請選擇您對這個詞彙的熟悉程度： + 選擇熟悉程度：

{[ @@ -208,31 +217,17 @@ export function SimpleFlipCard({ card, onAnswer, onSkip }: SimpleFlipCardProps) })}
- {/* 操作按鈕區 */} -
- {/* 跳過按鈕 */} + {/* 跳過按鈕 */} +
- - {/* 提交按鈕 - 選擇信心度後顯示 */} - {hasAnswered && ( - - )}
diff --git a/frontend/app/review-simple/components/SimpleProgress.tsx b/frontend/app/review-simple/components/SimpleProgress.tsx index c8056a0..017f7b6 100644 --- a/frontend/app/review-simple/components/SimpleProgress.tsx +++ b/frontend/app/review-simple/components/SimpleProgress.tsx @@ -5,9 +5,11 @@ interface SimpleProgressProps { total: number score: { correct: number; total: number } cards?: CardState[] // 可選：用於顯示延遲統計 + sortedCards?: CardState[] // 智能排序後的卡片 + currentCard?: CardState // 當前正在練習的卡片 } -export function SimpleProgress({ current, total, score, cards }: SimpleProgressProps) { +export function SimpleProgress({ current, total, score, cards, sortedCards, currentCard }: SimpleProgressProps) { const progress = (current - 1) / total * 100 const accuracy = score.total > 0 ? Math.round((score.correct / score.total) * 100) : 0 @@ -63,15 +65,71 @@ export function SimpleProgress({ current, total, score, cards }: SimpleProgressP {score.total > 0 && |}
- 跳過 {delayStats.totalSkips} + 跳過次數 {delayStats.totalSkips}
- 困難卡片 {delayStats.delayedCards} + 跳過卡片 {delayStats.delayedCards}
)}
+ + {/* 詞彙順序可視化 - 便於驗證延遲計數系統 */} + {sortedCards && currentCard && ( +
+
+

詞彙順序 (按延遲分數排序):

+
+ {sortedCards.map((card, index) => { + const isCompleted = card.isCompleted + const delayScore = card.skipCount + card.wrongCount + + // 狀態顏色 + let cardStyle = '' + let statusText = '' + + if (isCompleted) { + cardStyle = 'bg-green-100 text-green-700 border-green-300' + statusText = '✓' + } else if (delayScore > 0) { + if (card.skipCount > 0 && card.wrongCount > 0) { + cardStyle = 'bg-red-100 text-red-700 border-red-300' + statusText = `跳${card.skipCount}錯${card.wrongCount}` + } else if (card.skipCount > 0) { + cardStyle = 'bg-yellow-100 text-yellow-700 border-yellow-300' + statusText = `跳${card.skipCount}` + } else { + cardStyle = 'bg-orange-100 text-orange-700 border-orange-300' + statusText = `錯${card.wrongCount}` + } + } else { + cardStyle = 'bg-gray-100 text-gray-600 border-gray-300' + statusText = '' + } + + return ( +
+
+ {index + 1}. + {card.word} + {statusText && ( + ({statusText}) + )} +
+
+ ) + })} +
+

+ 🟢完成、🟡跳過、🟠答錯、🔴跳過+答錯、⚪未開始 +

+
+
+ )}
) } \ No newline at end of file diff --git a/frontend/app/review-simple/components/api_seeds.json b/frontend/app/review-simple/components/api_seeds.json index 9d17ab8..cd95ffe 100644 --- a/frontend/app/review-simple/components/api_seeds.json +++ b/frontend/app/review-simple/components/api_seeds.json @@ -17,7 +17,8 @@ "createdAt": "2025-10-01T12:48:11.850357", "updatedAt": "2025-10-01T13:37:22.91802", "hasExampleImage": false, - "primaryImageUrl": null + "primaryImageUrl": null, + "synonyms":["proof", "testimony", "documentation"] }, { "id": "5b854991-c64b-464f-b69b-f8946a165257", @@ -34,7 +35,8 @@ "createdAt": "2025-10-01T12:48:10.161318", "updatedAt": "2025-10-01T12:48:10.161318", "hasExampleImage": false, - "primaryImageUrl": null + "primaryImageUrl": null, + "synonyms":["proof", "testimony", "documentation"] }, { "id": "d6f4227f-bdc9-4f13-a532-aa47f802cf8d", @@ -51,7 +53,8 @@ "createdAt": "2025-10-01T12:48:07.640078", "updatedAt": "2025-10-01T12:48:07.640111", "hasExampleImage": true, - "primaryImageUrl": "/images/examples/d6f4227f-bdc9-4f13-a532-aa47f802cf8d_078eabb9-3630-4461-b9ea-98a677625d22.png" + "primaryImageUrl": "/images/examples/d6f4227f-bdc9-4f13-a532-aa47f802cf8d_078eabb9-3630-4461-b9ea-98a677625d22.png", + "synonyms": ["acquired", "gained", "secured"] }, { "id": "26e2e99c-124f-4bfe-859e-8819c68e72b8", @@ -68,7 +71,8 @@ "createdAt": "2025-09-30T18:02:36.316465", "updatedAt": "2025-10-01T15:49:08.525139", "hasExampleImage": true, - "primaryImageUrl": "/images/examples/26e2e99c-124f-4bfe-859e-8819c68e72b8_a7923c26-fefd-4705-9921-dc81f44e47c0.png" + "primaryImageUrl": "/images/examples/26e2e99c-124f-4bfe-859e-8819c68e72b8_a7923c26-fefd-4705-9921-dc81f44e47c0.png", + "synonyms": ["rank", "organize", "arrange"] } ], "count": 4 diff --git a/frontend/app/review-simple/data.ts b/frontend/app/review-simple/data.ts index dc6625b..a262b17 100644 --- a/frontend/app/review-simple/data.ts +++ b/frontend/app/review-simple/data.ts @@ -48,21 +48,6 @@ export interface ApiResponse { // 模擬API響應數據 (直接使用真實API格式) export const MOCK_API_RESPONSE: ApiResponse = apiSeeds as ApiResponse -// 為API數據添加同義詞 (模擬完整數據) -const addSynonyms = (flashcards: any[]): ApiFlashcard[] => { - const synonymsMap: Record = { - 'evidence': ['proof', 'testimony', 'documentation'], - 'warrants': ['authorizations', 'permits', 'orders'], - 'obtained': ['acquired', 'gained', 'secured'], - 'prioritize': ['rank', 'organize', 'arrange'] - } - - return flashcards.map(card => ({ - ...card, - synonyms: synonymsMap[card.word] || [] - })) -} - // 為詞卡添加延遲計數狀態 const addStateFields = (flashcard: ApiFlashcard, index: number): CardState => ({ ...flashcard, @@ -75,7 +60,7 @@ const addStateFields = (flashcard: ApiFlashcard, index: number): CardState => ({ }) // 提取詞卡數據 (方便組件使用) -export const SIMPLE_CARDS = addSynonyms(MOCK_API_RESPONSE.data.flashcards).map(addStateFields) +export const SIMPLE_CARDS = MOCK_API_RESPONSE.data.flashcards.map(addStateFields) // 延遲計數處理函數 export const sortCardsByPriority = (cards: CardState[]): CardState[] => { @@ -100,14 +85,14 @@ export const sortCardsByPriority = (cards: CardState[]): CardState[] => { export const updateCardState = ( cards: CardState[], currentIndex: number, - updateFn: (card: CardState) => Partial + updates: Partial ): CardState[] => { return cards.map((card, index) => index === currentIndex ? { ...card, - ...updateFn(card), - delayScore: (updateFn(card).skipCount ?? card.skipCount) + (updateFn(card).wrongCount ?? card.wrongCount), + ...updates, + delayScore: (updates.skipCount ?? card.skipCount) + (updates.wrongCount ?? card.wrongCount), lastAttemptAt: new Date() } : card diff --git a/frontend/app/review-simple/page.tsx b/frontend/app/review-simple/page.tsx index 750914e..d982e5f 100644 --- a/frontend/app/review-simple/page.tsx +++ b/frontend/app/review-simple/page.tsx @@ -11,6 +11,7 @@ import { SIMPLE_CARDS, CardState, sortCardsByPriority, updateCardState } from '. export default function SimpleReviewPage() { // 延遲計數狀態管理 const [cards, setCards] = useState(SIMPLE_CARDS) + const [currentCardIndex, setCurrentCardIndex] = useState(0) const [score, setScore] = useState({ correct: 0, total: 0 }) const [isComplete, setIsComplete] = useState(false) @@ -18,6 +19,7 @@ export default function SimpleReviewPage() { const sortedCards = sortCardsByPriority(cards) const incompleteCards = sortedCards.filter(card => !card.isCompleted) const currentCard = incompleteCards[0] // 總是選擇優先級最高的未完成卡片 + const isLastCard = incompleteCards.length <= 1 // localStorage進度保存和載入 useEffect(() => { @@ -65,15 +67,15 @@ export default function SimpleReviewPage() { if (isCorrect) { // 答對：標記為完成 - const updatedCards = updateCardState(cards, originalIndex, () => ({ + const updatedCards = updateCardState(cards, originalIndex, { isCompleted: true - })) + }) setCards(updatedCards) } else { // 答錯：增加答錯次數 - const updatedCards = updateCardState(cards, originalIndex, (card) => ({ - wrongCount: card.wrongCount + 1 - })) + const updatedCards = updateCardState(cards, originalIndex, { + wrongCount: currentCard.wrongCount + 1 + }) setCards(updatedCards) } @@ -101,9 +103,9 @@ export default function SimpleReviewPage() { const originalIndex = cards.findIndex(card => card.id === currentCard.id) // 增加跳過次數 - const updatedCards = updateCardState(cards, originalIndex, (card) => ({ - skipCount: card.skipCount + 1 - })) + const updatedCards = updateCardState(cards, originalIndex, { + skipCount: currentCard.skipCount + 1 + }) setCards(updatedCards) // 保存進度 @@ -119,6 +121,7 @@ export default function SimpleReviewPage() { // 重新開始 - 重置所有狀態 const handleRestart = () => { setCards(SIMPLE_CARDS) // 重置為初始狀態 + setCurrentCardIndex(0) setScore({ correct: 0, total: 0 }) setIsComplete(false) localStorage.removeItem('review-progress') // 清除保存的進度 @@ -154,6 +157,8 @@ export default function SimpleReviewPage() { total={cards.length} score={score} cards={cards} + sortedCards={sortedCards} + currentCard={currentCard} /> {/* 翻卡組件 */}