113 lines
4.0 KiB
TypeScript
113 lines
4.0 KiB
TypeScript
import React, { useState } from 'react'
|
|
import { useTestQueueStore } from '@/store/review/useTestQueueStore'
|
|
import { useTestResultStore } from '@/store/review/useTestResultStore'
|
|
import { mockFlashcards, getTestStatistics, generateTestQueue } from '@/data/mockTestData'
|
|
|
|
interface TestDebugPanelProps {
|
|
className?: string
|
|
}
|
|
|
|
export const TestDebugPanel: React.FC<TestDebugPanelProps> = ({ className }) => {
|
|
const [isVisible, setIsVisible] = useState(false)
|
|
const { testItems, currentTestIndex, initializeTestQueue, resetQueue } = useTestQueueStore()
|
|
const { score, resetScore } = useTestResultStore()
|
|
|
|
const stats = getTestStatistics(mockFlashcards)
|
|
|
|
const handleLoadMockData = () => {
|
|
// 使用 initializeTestQueue 期望的參數格式
|
|
initializeTestQueue(mockFlashcards, [])
|
|
}
|
|
|
|
const handleResetAll = () => {
|
|
resetQueue()
|
|
resetScore()
|
|
}
|
|
|
|
if (!isVisible) {
|
|
return (
|
|
<button
|
|
onClick={() => setIsVisible(true)}
|
|
className="fixed bottom-4 right-4 bg-blue-600 text-white px-3 py-2 rounded-lg shadow-lg text-sm z-50"
|
|
>
|
|
🔧 調試
|
|
</button>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className={`fixed bottom-4 right-4 bg-white border border-gray-200 rounded-lg shadow-xl p-4 z-50 w-80 ${className}`}>
|
|
<div className="flex justify-between items-center mb-4">
|
|
<h3 className="font-semibold text-gray-800">測試調試面板</h3>
|
|
<button
|
|
onClick={() => setIsVisible(false)}
|
|
className="text-gray-500 hover:text-gray-700"
|
|
>
|
|
✕
|
|
</button>
|
|
</div>
|
|
|
|
{/* 當前進度 */}
|
|
<div className="mb-4 p-3 bg-gray-50 rounded">
|
|
<h4 className="font-medium text-sm mb-2">當前進度</h4>
|
|
<div className="text-xs space-y-1">
|
|
<div>隊列長度: {testItems.length}</div>
|
|
<div>當前位置: {currentTestIndex + 1}/{testItems.length}</div>
|
|
<div>正確: {score.correct} | 錯誤: {score.total - score.correct}</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 測試數據統計 */}
|
|
<div className="mb-4 p-3 bg-blue-50 rounded">
|
|
<h4 className="font-medium text-sm mb-2">模擬數據統計</h4>
|
|
<div className="text-xs space-y-1">
|
|
<div>總卡片: {stats.total}</div>
|
|
<div>未測試: {stats.untested}</div>
|
|
<div>答錯: {stats.incorrect}</div>
|
|
<div>跳過: {stats.skipped}</div>
|
|
<div className="mt-2 text-gray-600">
|
|
優先級 - 高:{stats.priorities.high} 中:{stats.priorities.medium} 低:{stats.priorities.low}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 操作按鈕 */}
|
|
<div className="space-y-2">
|
|
<button
|
|
onClick={handleLoadMockData}
|
|
className="w-full bg-green-600 text-white py-2 px-3 rounded text-sm hover:bg-green-700"
|
|
>
|
|
載入真實測試數據 ({mockFlashcards.length} 卡片)
|
|
</button>
|
|
|
|
<button
|
|
onClick={handleResetAll}
|
|
className="w-full bg-red-600 text-white py-2 px-3 rounded text-sm hover:bg-red-700"
|
|
>
|
|
重置所有數據
|
|
</button>
|
|
</div>
|
|
|
|
{/* 隊列預覽 */}
|
|
{testItems.length > 0 && (
|
|
<div className="mt-4 p-3 bg-yellow-50 rounded">
|
|
<h4 className="font-medium text-sm mb-2">當前隊列預覽</h4>
|
|
<div className="text-xs max-h-32 overflow-y-auto">
|
|
{testItems.slice(0, 10).map((item, index) => (
|
|
<div
|
|
key={index}
|
|
className={`flex justify-between ${index === currentTestIndex ? 'font-bold text-blue-600' : ''}`}
|
|
>
|
|
<span>{item.testName}</span>
|
|
<span>#{item.order}</span>
|
|
</div>
|
|
))}
|
|
{testItems.length > 10 && (
|
|
<div className="text-gray-500">...還有 {testItems.length - 10} 項</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
} |