77 lines
2.8 KiB
TypeScript
77 lines
2.8 KiB
TypeScript
import { CardState } from '../data'
|
|
|
|
interface SimpleProgressProps {
|
|
current: number
|
|
total: number
|
|
score: { correct: number; total: number }
|
|
cards?: CardState[] // 可選：用於顯示延遲統計
|
|
}
|
|
|
|
export function SimpleProgress({ current, total, score, cards }: SimpleProgressProps) {
|
|
const progress = (current - 1) / total * 100
|
|
const accuracy = score.total > 0 ? Math.round((score.correct / score.total) * 100) : 0
|
|
|
|
// 延遲統計計算
|
|
const delayStats = cards ? {
|
|
totalSkips: cards.reduce((sum, card) => sum + card.skipCount, 0),
|
|
totalWrongs: cards.reduce((sum, card) => sum + card.wrongCount, 0),
|
|
delayedCards: cards.filter(card => card.skipCount + card.wrongCount > 0).length
|
|
} : null
|
|
|
|
return (
|
|
<div className="mb-8">
|
|
<div className="flex justify-between items-center mb-3">
|
|
<span className="text-sm font-medium text-gray-600">學習進度</span>
|
|
<div className="flex items-center gap-4 text-sm">
|
|
<span className="text-gray-600">
|
|
{current}/{total}
|
|
</span>
|
|
{score.total > 0 && (
|
|
<span className="text-green-600 font-medium">
|
|
準確率 {accuracy}%
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 進度條 */}
|
|
<div className="w-full bg-gray-200 rounded-full h-3">
|
|
<div
|
|
className="bg-blue-500 h-3 rounded-full transition-all duration-300"
|
|
style={{ width: `${progress}%` }}
|
|
/>
|
|
</div>
|
|
|
|
{/* 詳細統計 */}
|
|
<div className="flex justify-center gap-4 mt-3 text-sm">
|
|
{score.total > 0 && (
|
|
<>
|
|
<div className="flex items-center gap-1">
|
|
<span className="w-2 h-2 bg-green-500 rounded-full"></span>
|
|
<span className="text-green-700">答對 {score.correct}</span>
|
|
</div>
|
|
<div className="flex items-center gap-1">
|
|
<span className="w-2 h-2 bg-red-500 rounded-full"></span>
|
|
<span className="text-red-700">答錯 {score.total - score.correct}</span>
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
{/* 延遲統計 */}
|
|
{delayStats && (delayStats.totalSkips > 0 || delayStats.totalWrongs > 0) && (
|
|
<>
|
|
{score.total > 0 && <span className="text-gray-400">|</span>}
|
|
<div className="flex items-center gap-1">
|
|
<span className="w-2 h-2 bg-yellow-500 rounded-full"></span>
|
|
<span className="text-yellow-700">跳過 {delayStats.totalSkips}</span>
|
|
</div>
|
|
<div className="flex items-center gap-1">
|
|
<span className="w-2 h-2 bg-blue-500 rounded-full"></span>
|
|
<span className="text-blue-700">困難卡片 {delayStats.delayedCards}</span>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
} |