99 lines
3.6 KiB
TypeScript
99 lines
3.6 KiB
TypeScript
import React from 'react'
|
||
import { TestItem } from '@/store/useTestQueueStore'
|
||
import { TestStatusIndicator, TestStats, TestProgressBar, TestStatusList } from './TestStatusIndicator'
|
||
|
||
interface TaskListModalProps {
|
||
isOpen: boolean
|
||
onClose: () => void
|
||
testItems: TestItem[]
|
||
completedTests: number
|
||
totalTests: number
|
||
}
|
||
|
||
export const TaskListModal: React.FC<TaskListModalProps> = ({
|
||
isOpen,
|
||
onClose,
|
||
testItems,
|
||
completedTests,
|
||
totalTests
|
||
}) => {
|
||
if (!isOpen) return null
|
||
|
||
// 使用新的統計邏輯
|
||
const stats = {
|
||
total: totalTests,
|
||
completed: testItems.filter(item => item.isCompleted).length,
|
||
skipped: testItems.filter(item => item.isSkipped && !item.isCompleted).length,
|
||
incorrect: testItems.filter(item => item.isIncorrect && !item.isCompleted).length,
|
||
remaining: testItems.filter(item => !item.isCompleted).length
|
||
}
|
||
|
||
return (
|
||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
||
<div className="bg-white rounded-xl shadow-2xl max-w-4xl w-full mx-4 max-h-[80vh] overflow-hidden">
|
||
{/* Header */}
|
||
<div className="flex items-center justify-between p-6 border-b border-gray-200">
|
||
<h2 className="text-2xl font-bold text-gray-900 flex items-center gap-2">
|
||
📚 學習任務清單
|
||
</h2>
|
||
<button
|
||
onClick={onClose}
|
||
className="text-gray-400 hover:text-gray-600 text-2xl"
|
||
>
|
||
✕
|
||
</button>
|
||
</div>
|
||
|
||
{/* Content */}
|
||
<div className="p-6 overflow-y-auto max-h-[60vh]">
|
||
{/* 智能進度統計 */}
|
||
<div className="mb-6 bg-blue-50 rounded-lg p-4">
|
||
<div className="mb-4">
|
||
<h3 className="text-lg font-semibold text-blue-900 mb-2">學習進度</h3>
|
||
<TestStats stats={stats} />
|
||
</div>
|
||
<TestProgressBar stats={stats} />
|
||
</div>
|
||
|
||
{/* 智能測驗狀態列表 */}
|
||
<div className="space-y-4">
|
||
{testItems.length > 0 ? (
|
||
<TestStatusList
|
||
tests={testItems}
|
||
groupByCard={true}
|
||
/>
|
||
) : (
|
||
<div className="text-center py-8 text-gray-500">
|
||
<div className="text-4xl mb-2">📚</div>
|
||
<p>還沒有生成任務清單</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* 隊列優先級說明 */}
|
||
{stats.total > 0 && (
|
||
<div className="mt-6 p-4 bg-gray-50 rounded-lg">
|
||
<h4 className="font-semibold text-gray-900 mb-2">智能隊列說明</h4>
|
||
<div className="text-sm text-gray-600 space-y-1">
|
||
<div>• <span className="font-medium">未完成測驗</span>：優先處理，保持學習動機</div>
|
||
<div>• <span className="font-medium">答錯測驗</span>：移到隊列後方重複練習</div>
|
||
<div>• <span className="font-medium">跳過測驗</span>：暫時跳過，稍後自動回歸</div>
|
||
<div>• <span className="font-medium">已完成測驗</span>：永久從當日清單移除</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Footer */}
|
||
<div className="px-6 py-4 border-t border-gray-200 bg-gray-50">
|
||
<button
|
||
onClick={onClose}
|
||
className="w-full py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
|
||
>
|
||
關閉
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
} |