368 lines
15 KiB
TypeScript
368 lines
15 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useEffect, useCallback } from 'react'
|
|
import { Navigation } from '@/components/shared/Navigation'
|
|
import { ReviewRunner } from '@/components/review/core/ReviewRunner'
|
|
import { ProgressTracker } from '@/components/review/ui/ProgressTracker'
|
|
|
|
// Store imports
|
|
import { useReviewSessionStore } from '@/store/review/useReviewSessionStore'
|
|
import { useTestQueueStore } from '@/store/review/useTestQueueStore'
|
|
import { useTestResultStore } from '@/store/review/useTestResultStore'
|
|
import { useReviewDataStore } from '@/store/review/useReviewDataStore'
|
|
import exampleData from './example-data.json'
|
|
|
|
// 動態測試資料集配置
|
|
const TEST_DATASETS = {
|
|
empty: {
|
|
id: 'empty',
|
|
name: '清空測試',
|
|
description: '測試空資料狀態和錯誤處理',
|
|
flashcards: []
|
|
},
|
|
sample: {
|
|
id: 'sample',
|
|
name: `快速測試 (前5張卡)`,
|
|
description: '使用前5張詞卡進行快速測試',
|
|
flashcards: exampleData.data.slice(0, 5).map(card => ({
|
|
...card,
|
|
cefr: card.difficultyLevel || 'A1',
|
|
hasExampleImage: false,
|
|
primaryImageUrl: undefined,
|
|
exampleImages: []
|
|
}))
|
|
},
|
|
full: {
|
|
id: 'full',
|
|
name: `完整資料集 (${exampleData.data.length}張卡)`,
|
|
description: '使用 example-data.json 的完整真實資料',
|
|
flashcards: exampleData.data.map(card => ({
|
|
...card,
|
|
cefr: card.difficultyLevel || 'A1',
|
|
hasExampleImage: false,
|
|
primaryImageUrl: undefined,
|
|
exampleImages: []
|
|
}))
|
|
}
|
|
}
|
|
|
|
export default function ReviewDesignPage() {
|
|
const [currentDataset, setCurrentDataset] = useState<string>('')
|
|
const [isSimulating, setIsSimulating] = useState(false)
|
|
const [debugLogs, setDebugLogs] = useState<string[]>([])
|
|
|
|
// Store 狀態監控
|
|
const sessionStore = useReviewSessionStore()
|
|
const queueStore = useTestQueueStore()
|
|
const resultStore = useTestResultStore()
|
|
const dataStore = useReviewDataStore()
|
|
|
|
// 重置所有 Store
|
|
const resetAllStores = useCallback(() => {
|
|
sessionStore.resetSession()
|
|
queueStore.resetQueue()
|
|
resultStore.resetScore()
|
|
dataStore.resetData()
|
|
|
|
addLog('🔄 所有 Store 已重置')
|
|
setIsSimulating(false)
|
|
}, [])
|
|
|
|
// 匯入測試資料集
|
|
const importDataset = useCallback(async (datasetId: string) => {
|
|
const dataset = TEST_DATASETS[datasetId as keyof typeof TEST_DATASETS]
|
|
if (!dataset) return
|
|
|
|
addLog(`📁 開始匯入資料集: ${dataset.name}`)
|
|
|
|
// 重置 Store
|
|
resetAllStores()
|
|
|
|
// 模擬真實的資料載入流程
|
|
dataStore.setLoadingCards(true)
|
|
await new Promise(resolve => setTimeout(resolve, 500)) // 模擬網路延遲
|
|
|
|
// 載入資料到 ReviewDataStore
|
|
dataStore.setDueCards(dataset.flashcards)
|
|
dataStore.setLoadingCards(false)
|
|
|
|
// 觸發測試佇列初始化
|
|
queueStore.initializeTestQueue(dataset.flashcards, [])
|
|
|
|
// 設置第一張卡片
|
|
if (dataset.flashcards.length > 0) {
|
|
sessionStore.setCurrentCard(dataset.flashcards[0])
|
|
sessionStore.setMounted(true)
|
|
}
|
|
|
|
setCurrentDataset(datasetId)
|
|
addLog(`✅ 已匯入 ${dataset.flashcards.length} 張詞卡`)
|
|
addLog(`📋 產生 ${queueStore.testItems.length} 個測驗項目`)
|
|
}, [resetAllStores, dataStore, queueStore, sessionStore])
|
|
|
|
// 開始模擬
|
|
const startSimulation = useCallback(() => {
|
|
if (!currentDataset) {
|
|
addLog('❌ 請先匯入測試資料')
|
|
return
|
|
}
|
|
|
|
setIsSimulating(true)
|
|
addLog('🎮 開始複習模擬')
|
|
}, [currentDataset])
|
|
|
|
// 新增日誌
|
|
const addLog = useCallback((message: string) => {
|
|
const timestamp = new Date().toLocaleTimeString()
|
|
setDebugLogs(prev => [...prev.slice(-9), `[${timestamp}] ${message}`])
|
|
}, [])
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-50">
|
|
<Navigation />
|
|
|
|
<div className="max-w-7xl mx-auto px-4 py-8">
|
|
<h1 className="text-3xl font-bold text-gray-900 mb-8">複習系統設計工具</h1>
|
|
|
|
<div className="grid grid-cols-1 xl:grid-cols-3 gap-8">
|
|
{/* 左側：控制面板 */}
|
|
<div className="xl:col-span-1">
|
|
<div className="bg-white rounded-lg shadow-lg p-6">
|
|
<h2 className="text-xl font-semibold mb-6">控制面板</h2>
|
|
|
|
{/* 資料管理區 */}
|
|
<div className="mb-6">
|
|
<h3 className="font-medium text-gray-900 mb-3">📁 測試資料管理</h3>
|
|
<div className="space-y-3">
|
|
<select
|
|
value={currentDataset}
|
|
onChange={(e) => setCurrentDataset(e.target.value)}
|
|
className="w-full p-2 border rounded-lg"
|
|
>
|
|
<option value="">選擇測試資料集...</option>
|
|
{Object.entries(TEST_DATASETS).map(([key, dataset]) => (
|
|
<option key={key} value={key}>
|
|
{dataset.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
|
|
<div className="flex gap-2">
|
|
<button
|
|
onClick={() => importDataset(currentDataset)}
|
|
disabled={!currentDataset}
|
|
className="flex-1 px-3 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:opacity-50"
|
|
>
|
|
匯入資料
|
|
</button>
|
|
<button
|
|
onClick={resetAllStores}
|
|
className="px-3 py-2 bg-gray-500 text-white rounded hover:bg-gray-600"
|
|
>
|
|
重置
|
|
</button>
|
|
</div>
|
|
|
|
{currentDataset && (
|
|
<div className="p-3 bg-blue-50 rounded-lg border border-blue-200">
|
|
<p className="text-sm text-blue-700">
|
|
{TEST_DATASETS[currentDataset as keyof typeof TEST_DATASETS].description}
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 模擬控制區 */}
|
|
<div className="mb-6">
|
|
<h3 className="font-medium text-gray-900 mb-3">🎮 模擬控制</h3>
|
|
<div className="space-y-2">
|
|
<button
|
|
onClick={startSimulation}
|
|
disabled={!currentDataset || isSimulating}
|
|
className="w-full px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700 disabled:opacity-50"
|
|
>
|
|
{isSimulating ? '模擬進行中...' : '開始複習模擬'}
|
|
</button>
|
|
|
|
{isSimulating && (
|
|
<button
|
|
onClick={() => {
|
|
setIsSimulating(false)
|
|
addLog('⏸️ 模擬已暫停')
|
|
}}
|
|
className="w-full px-4 py-2 bg-yellow-600 text-white rounded hover:bg-yellow-700"
|
|
>
|
|
暫停模擬
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Store 狀態監控 */}
|
|
<div className="mb-6">
|
|
<h3 className="font-medium text-gray-900 mb-3">📊 Store 狀態</h3>
|
|
<div className="space-y-2 text-sm">
|
|
<div className="p-2 bg-gray-50 rounded">
|
|
<strong>Session:</strong>
|
|
<span className="ml-2">
|
|
{sessionStore.currentCard ? `卡片: ${sessionStore.currentCard.word}` : '無卡片'}
|
|
</span>
|
|
</div>
|
|
<div className="p-2 bg-gray-50 rounded">
|
|
<strong>Queue:</strong>
|
|
<span className="ml-2">
|
|
{queueStore.testItems.length}個測驗 | 當前: {queueStore.currentTestIndex}
|
|
</span>
|
|
</div>
|
|
<div className="p-2 bg-gray-50 rounded">
|
|
<strong>Result:</strong>
|
|
<span className="ml-2">
|
|
{resultStore.score.correct}✓ / {resultStore.score.total}
|
|
</span>
|
|
</div>
|
|
<div className="p-2 bg-gray-50 rounded">
|
|
<strong>Data:</strong>
|
|
<span className="ml-2">
|
|
{dataStore.dueCards.length}張詞卡
|
|
{dataStore.isLoadingCards && ' (載入中...)'}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 調試日誌 */}
|
|
<div>
|
|
<h3 className="font-medium text-gray-900 mb-3">🐛 調試日誌</h3>
|
|
<div className="bg-gray-900 text-green-400 p-3 rounded-lg text-xs font-mono h-40 overflow-y-auto">
|
|
{debugLogs.length === 0 ? (
|
|
<div className="text-gray-500">等待操作...</div>
|
|
) : (
|
|
debugLogs.map((log, index) => (
|
|
<div key={index} className="mb-1">
|
|
{log}
|
|
</div>
|
|
))
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 右側：複習模擬器 */}
|
|
<div className="xl:col-span-2">
|
|
<div className="bg-white rounded-lg shadow-lg">
|
|
<div className="p-6 border-b">
|
|
<h2 className="text-xl font-semibold">複習模擬器</h2>
|
|
<p className="text-gray-600 mt-1">
|
|
使用真實的 ReviewRunner 組件和 Store 狀態
|
|
</p>
|
|
</div>
|
|
|
|
<div className="p-6">
|
|
{!currentDataset ? (
|
|
<div className="text-center py-12">
|
|
<div className="text-gray-400 text-6xl mb-4">📚</div>
|
|
<h3 className="text-lg font-medium text-gray-900 mb-2">開始設計測試</h3>
|
|
<p className="text-gray-600">請先從左側控制面板匯入測試資料</p>
|
|
</div>
|
|
) : !isSimulating ? (
|
|
<div className="text-center py-12">
|
|
<div className="text-blue-400 text-6xl mb-4">🎮</div>
|
|
<h3 className="text-lg font-medium text-gray-900 mb-2">準備開始模擬</h3>
|
|
<p className="text-gray-600 mb-4">
|
|
已載入 {TEST_DATASETS[currentDataset as keyof typeof TEST_DATASETS].name}
|
|
</p>
|
|
<button
|
|
onClick={startSimulation}
|
|
className="px-6 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700"
|
|
>
|
|
開始複習模擬
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<div>
|
|
{/* 真實進度條 */}
|
|
<div className="mb-6">
|
|
<ProgressTracker
|
|
completedTests={queueStore.completedTests}
|
|
totalTests={queueStore.totalTests}
|
|
onShowTaskList={() => addLog('📋 顯示任務清單')}
|
|
/>
|
|
</div>
|
|
|
|
{/* 真實 ReviewRunner 組件 */}
|
|
<ReviewRunner />
|
|
|
|
{/* 模擬控制 */}
|
|
<div className="mt-6 pt-6 border-t">
|
|
<div className="flex justify-center gap-3">
|
|
<button
|
|
onClick={() => {
|
|
setIsSimulating(false)
|
|
addLog('⏸️ 模擬已暫停')
|
|
}}
|
|
className="px-4 py-2 bg-yellow-600 text-white rounded hover:bg-yellow-700"
|
|
>
|
|
暫停模擬
|
|
</button>
|
|
<button
|
|
onClick={resetAllStores}
|
|
className="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700"
|
|
>
|
|
結束模擬
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 測驗佇列視覺化 */}
|
|
{isSimulating && queueStore.testItems.length > 0 && (
|
|
<div className="bg-white rounded-lg shadow-lg mt-6 p-6">
|
|
<h3 className="font-medium text-gray-900 mb-4">📋 測驗佇列視覺化</h3>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
|
|
{queueStore.testItems.map((test, index) => (
|
|
<div
|
|
key={test.id}
|
|
className={`p-3 rounded-lg border ${
|
|
index === queueStore.currentTestIndex
|
|
? 'border-blue-500 bg-blue-50'
|
|
: test.isCompleted
|
|
? 'border-green-500 bg-green-50'
|
|
: test.isSkipped
|
|
? 'border-yellow-500 bg-yellow-50'
|
|
: test.isIncorrect
|
|
? 'border-red-500 bg-red-50'
|
|
: 'border-gray-200 bg-gray-50'
|
|
}`}
|
|
>
|
|
<div className="flex justify-between items-start">
|
|
<div>
|
|
<div className="font-medium text-sm">{test.word}</div>
|
|
<div className="text-xs text-gray-600">{test.testType}</div>
|
|
</div>
|
|
<div className="text-xs">
|
|
{index === queueStore.currentTestIndex && '👆'}
|
|
{test.isCompleted && '✅'}
|
|
{test.isSkipped && '⏭️'}
|
|
{test.isIncorrect && '❌'}
|
|
{!test.isCompleted && !test.isSkipped && !test.isIncorrect && index !== queueStore.currentTestIndex && '⏳'}
|
|
</div>
|
|
</div>
|
|
<div className="mt-1 text-xs text-gray-500">
|
|
優先級: {test.priority || 100}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
} |