feat: 重構 review-design 為真實複習系統模擬器
🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
b9b007b4b5
commit
f042da5848
|
|
@ -1,269 +1,245 @@
|
|||
'use client'
|
||||
|
||||
import { useState, useEffect } from 'react'
|
||||
import { useState, useEffect, useCallback } from 'react'
|
||||
import { Navigation } from '@/components/shared/Navigation'
|
||||
import {
|
||||
FlipMemoryTest,
|
||||
VocabChoiceTest,
|
||||
SentenceFillTest,
|
||||
SentenceReorderTest,
|
||||
VocabListeningTest,
|
||||
SentenceListeningTest,
|
||||
SentenceSpeakingTest
|
||||
} from '@/components/review/review-tests'
|
||||
import { ReviewRunner } from '@/components/review/ReviewRunner'
|
||||
import { ProgressTracker } from '@/components/review/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'
|
||||
|
||||
export default function ReviewTestsPage() {
|
||||
const [logs, setLogs] = useState<string[]>([])
|
||||
const [activeTab, setActiveTab] = useState('FlipMemoryTest')
|
||||
const [currentCardIndex, setCurrentCardIndex] = useState(0)
|
||||
// 動態測試資料集配置
|
||||
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: []
|
||||
}))
|
||||
}
|
||||
}
|
||||
|
||||
// 測驗組件清單
|
||||
const testComponents = [
|
||||
{ id: 'FlipMemoryTest', name: '翻卡記憶測試', color: 'bg-blue-50' },
|
||||
{ id: 'VocabChoiceTest', name: '詞彙選擇測試', color: 'bg-green-50' },
|
||||
{ id: 'SentenceFillTest', name: '句子填空測試', color: 'bg-yellow-50' },
|
||||
{ id: 'SentenceReorderTest', name: '句子重排測試', color: 'bg-purple-50' },
|
||||
{ id: 'VocabListeningTest', name: '詞彙聽力測試', color: 'bg-red-50' },
|
||||
{ id: 'SentenceListeningTest', name: '句子聽力測試', color: 'bg-indigo-50' },
|
||||
{ id: 'SentenceSpeakingTest', name: '句子口說測試', color: 'bg-pink-50' }
|
||||
]
|
||||
export default function ReviewDesignPage() {
|
||||
const [currentDataset, setCurrentDataset] = useState<string>('')
|
||||
const [isSimulating, setIsSimulating] = useState(false)
|
||||
const [debugLogs, setDebugLogs] = useState<string[]>([])
|
||||
|
||||
// 添加日誌函數
|
||||
const addLog = (message: 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()
|
||||
setLogs(prev => [`[${activeTab}] [${timestamp}] ${message}`, ...prev.slice(0, 9)])
|
||||
}
|
||||
|
||||
// 從 API 響應格式獲取當前卡片資料
|
||||
const flashcardsData = exampleData.data || []
|
||||
const currentCard = flashcardsData[currentCardIndex] || flashcardsData[0]
|
||||
|
||||
// 轉換為組件所需格式
|
||||
const mockCardData = currentCard ? {
|
||||
word: currentCard.word,
|
||||
definition: currentCard.definition,
|
||||
example: currentCard.example,
|
||||
filledQuestionText: currentCard.filledQuestionText,
|
||||
exampleTranslation: currentCard.exampleTranslation,
|
||||
pronunciation: currentCard.pronunciation,
|
||||
synonyms: currentCard.synonyms || [],
|
||||
cefr: currentCard.difficultyLevel || 'A1',
|
||||
translation: currentCard.translation,
|
||||
// 從 flashcardExampleImages 提取圖片URL
|
||||
exampleImage: currentCard.flashcardExampleImages?.[0]?.exampleImage ?
|
||||
`http://localhost:5008/images/examples/${currentCard.flashcardExampleImages[0].exampleImage.relativePath}` :
|
||||
undefined
|
||||
} : {
|
||||
word: "loading...",
|
||||
definition: "Loading...",
|
||||
example: "Loading...",
|
||||
filledQuestionText: undefined,
|
||||
exampleTranslation: "載入中...",
|
||||
pronunciation: "",
|
||||
synonyms: [],
|
||||
cefr: "A1",
|
||||
translation: "載入中",
|
||||
exampleImage: undefined
|
||||
}
|
||||
|
||||
// 選項題選項 - 從資料中生成
|
||||
const generateVocabChoiceOptions = () => {
|
||||
if (!currentCard) return ["loading"]
|
||||
const correctAnswer = currentCard.word
|
||||
const otherWords = flashcardsData
|
||||
.filter(card => card.word !== correctAnswer)
|
||||
.slice(0, 3)
|
||||
.map(card => card.word)
|
||||
return [correctAnswer, ...otherWords].sort(() => Math.random() - 0.5)
|
||||
}
|
||||
|
||||
const vocabChoiceOptions = generateVocabChoiceOptions()
|
||||
|
||||
// 回調函數
|
||||
const handleConfidenceSubmit = (level: number) => {
|
||||
addLog(`FlipMemoryTest: 信心等級 ${level}`)
|
||||
}
|
||||
|
||||
const handleAnswer = (answer: string) => {
|
||||
addLog(`答案提交: ${answer}`)
|
||||
}
|
||||
|
||||
const handleReportError = () => {
|
||||
addLog('回報錯誤')
|
||||
}
|
||||
|
||||
const handleImageClick = (image: string) => {
|
||||
addLog(`圖片點擊: ${image}`)
|
||||
}
|
||||
setDebugLogs(prev => [...prev.slice(-9), `[${timestamp}] ${message}`])
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<Navigation />
|
||||
|
||||
<div className="max-w-4xl mx-auto px-4 py-8">
|
||||
{/* 頁面標題 */}
|
||||
<div className="mb-8">
|
||||
<h1 className="text-3xl font-bold text-gray-900 mb-2">Review 組件設計</h1>
|
||||
<p className="text-gray-600">所有 review-tests 組件的 UI 設計頁面</p>
|
||||
<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="mt-4 flex items-center gap-4">
|
||||
<button
|
||||
onClick={() => setCurrentCardIndex(Math.max(0, currentCardIndex - 1))}
|
||||
disabled={currentCardIndex === 0}
|
||||
className="px-3 py-1 bg-gray-500 text-white rounded disabled:opacity-50"
|
||||
>
|
||||
上一張
|
||||
</button>
|
||||
<span className="text-sm text-gray-600">
|
||||
卡片 {currentCardIndex + 1} / {flashcardsData.length} - {currentCard?.word || 'loading'}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => setCurrentCardIndex(Math.min(flashcardsData.length - 1, currentCardIndex + 1))}
|
||||
disabled={currentCardIndex >= flashcardsData.length - 1}
|
||||
className="px-3 py-1 bg-gray-500 text-white rounded disabled:opacity-50"
|
||||
>
|
||||
下一張
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
{/* Tab 導航 */}
|
||||
<div className="mb-8">
|
||||
<div className="border-b border-gray-200">
|
||||
<div className="flex space-x-8 overflow-x-auto">
|
||||
{testComponents.map((component) => (
|
||||
<button
|
||||
key={component.id}
|
||||
onClick={() => setActiveTab(component.id)}
|
||||
className={`py-4 px-1 border-b-2 font-medium text-sm whitespace-nowrap transition-colors ${
|
||||
activeTab === component.id
|
||||
? 'border-blue-500 text-blue-600'
|
||||
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
|
||||
}`}
|
||||
>
|
||||
{component.name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{/* 當前測驗組件展示 */}
|
||||
<div className="mb-8">
|
||||
{/* 資料管理區 */}
|
||||
<div className="mb-6">
|
||||
<h2 className="text-2xl font-semibold text-gray-900">{activeTab}</h2>
|
||||
<p className="text-sm text-gray-600 mt-1">{testComponents.find(c => c.id === activeTab)?.name}</p>
|
||||
<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>
|
||||
{/* 條件渲染當前選中的測驗組件 */}
|
||||
{activeTab === 'FlipMemoryTest' && (
|
||||
<FlipMemoryTest
|
||||
cardData={{
|
||||
...mockCardData,
|
||||
id: currentCard?.id || `card-${currentCardIndex}`,
|
||||
synonyms: mockCardData.synonyms || []
|
||||
}}
|
||||
onAnswer={handleAnswer}
|
||||
onConfidenceSubmit={handleConfidenceSubmit}
|
||||
onReportError={handleReportError}
|
||||
/>
|
||||
)}
|
||||
|
||||
{activeTab === 'VocabChoiceTest' && (
|
||||
<VocabChoiceTest
|
||||
cardData={{
|
||||
...mockCardData,
|
||||
id: currentCard?.id || `card-${currentCardIndex}`,
|
||||
synonyms: mockCardData.synonyms || []
|
||||
}}
|
||||
options={vocabChoiceOptions}
|
||||
onAnswer={handleAnswer}
|
||||
onReportError={handleReportError}
|
||||
/>
|
||||
)}
|
||||
|
||||
{activeTab === 'SentenceFillTest' && (
|
||||
<SentenceFillTest
|
||||
cardData={{
|
||||
...mockCardData,
|
||||
id: currentCard?.id || `card-${currentCardIndex}`,
|
||||
synonyms: mockCardData.synonyms || []
|
||||
}}
|
||||
onAnswer={handleAnswer}
|
||||
onReportError={handleReportError}
|
||||
/>
|
||||
)}
|
||||
|
||||
{activeTab === 'SentenceReorderTest' && (
|
||||
<SentenceReorderTest
|
||||
cardData={{
|
||||
...mockCardData,
|
||||
id: currentCard?.id || `card-${currentCardIndex}`,
|
||||
synonyms: mockCardData.synonyms || []
|
||||
}}
|
||||
exampleImage={mockCardData.exampleImage}
|
||||
onAnswer={handleAnswer}
|
||||
onReportError={handleReportError}
|
||||
onImageClick={handleImageClick}
|
||||
/>
|
||||
)}
|
||||
|
||||
{activeTab === 'VocabListeningTest' && (
|
||||
<VocabListeningTest
|
||||
cardData={{
|
||||
...mockCardData,
|
||||
id: currentCard?.id || `card-${currentCardIndex}`,
|
||||
synonyms: mockCardData.synonyms || []
|
||||
}}
|
||||
options={vocabChoiceOptions}
|
||||
onAnswer={handleAnswer}
|
||||
onReportError={handleReportError}
|
||||
/>
|
||||
)}
|
||||
|
||||
{activeTab === 'SentenceListeningTest' && (
|
||||
<SentenceListeningTest
|
||||
cardData={{
|
||||
...mockCardData,
|
||||
id: currentCard?.id || `card-${currentCardIndex}`,
|
||||
synonyms: mockCardData.synonyms || []
|
||||
}}
|
||||
options={vocabChoiceOptions}
|
||||
exampleImage={mockCardData.exampleImage}
|
||||
onAnswer={handleAnswer}
|
||||
onReportError={handleReportError}
|
||||
onImageClick={handleImageClick}
|
||||
/>
|
||||
)}
|
||||
|
||||
{activeTab === 'SentenceSpeakingTest' && (
|
||||
<SentenceSpeakingTest
|
||||
cardData={{
|
||||
...mockCardData,
|
||||
id: currentCard?.id || `card-${currentCardIndex}`,
|
||||
synonyms: mockCardData.synonyms || []
|
||||
}}
|
||||
exampleImage={mockCardData.exampleImage}
|
||||
onAnswer={handleAnswer}
|
||||
onReportError={handleReportError}
|
||||
onImageClick={handleImageClick}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 操作日誌區域 */}
|
||||
<div className="mt-8 bg-white rounded-lg shadow p-4">
|
||||
<h3 className="font-semibold text-gray-900 mb-3">操作日誌</h3>
|
||||
<div className="space-y-1 max-h-32 overflow-y-auto">
|
||||
{logs.length === 0 ? (
|
||||
<p className="text-gray-500 text-sm">無操作記錄</p>
|
||||
<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>
|
||||
) : (
|
||||
logs.map((log, index) => (
|
||||
<div key={index} className="text-sm text-gray-600 font-mono">
|
||||
debugLogs.map((log, index) => (
|
||||
<div key={index} className="mb-1">
|
||||
{log}
|
||||
</div>
|
||||
))
|
||||
|
|
@ -272,5 +248,121 @@ export default function ReviewTestsPage() {
|
|||
</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>
|
||||
)
|
||||
}
|
||||
Loading…
Reference in New Issue