mirror of
https://github.com/handsomezhuzhu/QQuiz.git
synced 2026-02-20 12:00:14 +00:00
第一阶段bug修复完毕
This commit is contained in:
@@ -11,6 +11,7 @@ import os
|
|||||||
import aiofiles
|
import aiofiles
|
||||||
import json
|
import json
|
||||||
import magic
|
import magic
|
||||||
|
import random
|
||||||
|
|
||||||
from database import get_db
|
from database import get_db
|
||||||
from models import User, Exam, Question, ExamStatus, SystemConfig
|
from models import User, Exam, Question, ExamStatus, SystemConfig
|
||||||
@@ -142,9 +143,8 @@ async def generate_ai_reference_answer(
|
|||||||
# Build prompt based on question type
|
# Build prompt based on question type
|
||||||
if question_type in ["single", "multiple"] and options:
|
if question_type in ["single", "multiple"] and options:
|
||||||
options_text = "\n".join(options)
|
options_text = "\n".join(options)
|
||||||
prompt = f"""这是一道{
|
q_type_text = '单选题' if question_type == 'single' else '多选题'
|
||||||
'单选题' if question_type == 'single' else '多选题'
|
prompt = f"""这是一道{q_type_text},但文档中没有提供答案。请根据题目内容,推理出最可能的正确答案。
|
||||||
},但文档中没有提供答案。请根据题目内容,推理出最可能的正确答案。
|
|
||||||
|
|
||||||
题目:{question_content}
|
题目:{question_content}
|
||||||
|
|
||||||
@@ -205,7 +205,8 @@ async def process_questions_with_dedup(
|
|||||||
exam_id: int,
|
exam_id: int,
|
||||||
questions_data: List[dict],
|
questions_data: List[dict],
|
||||||
db: AsyncSession,
|
db: AsyncSession,
|
||||||
llm_service=None
|
llm_service=None,
|
||||||
|
is_random: bool = False
|
||||||
) -> ParseResult:
|
) -> ParseResult:
|
||||||
"""
|
"""
|
||||||
Process parsed questions with fuzzy deduplication logic.
|
Process parsed questions with fuzzy deduplication logic.
|
||||||
@@ -238,6 +239,11 @@ async def process_questions_with_dedup(
|
|||||||
|
|
||||||
print(f"[Dedup] Checking against {len(existing_questions)} existing questions in database")
|
print(f"[Dedup] Checking against {len(existing_questions)} existing questions in database")
|
||||||
|
|
||||||
|
# Shuffle questions if random mode is enabled
|
||||||
|
if is_random:
|
||||||
|
print(f"[Dedup] Random mode enabled - shuffling {len(questions_data)} questions before saving")
|
||||||
|
random.shuffle(questions_data)
|
||||||
|
|
||||||
# Insert only new questions
|
# Insert only new questions
|
||||||
for q_data in questions_data:
|
for q_data in questions_data:
|
||||||
content_hash = q_data.get("content_hash")
|
content_hash = q_data.get("content_hash")
|
||||||
@@ -313,7 +319,8 @@ async def async_parse_and_save(
|
|||||||
exam_id: int,
|
exam_id: int,
|
||||||
file_content: bytes,
|
file_content: bytes,
|
||||||
filename: str,
|
filename: str,
|
||||||
db_url: str
|
db_url: str,
|
||||||
|
is_random: bool = False
|
||||||
):
|
):
|
||||||
"""
|
"""
|
||||||
Background task to parse document and save questions with deduplication.
|
Background task to parse document and save questions with deduplication.
|
||||||
@@ -487,7 +494,7 @@ async def async_parse_and_save(
|
|||||||
))
|
))
|
||||||
|
|
||||||
print(f"[Exam {exam_id}] Processing questions with deduplication...")
|
print(f"[Exam {exam_id}] Processing questions with deduplication...")
|
||||||
parse_result = await process_questions_with_dedup(exam_id, questions_data, db, llm_service)
|
parse_result = await process_questions_with_dedup(exam_id, questions_data, db, llm_service, is_random)
|
||||||
|
|
||||||
# Update exam status and total questions
|
# Update exam status and total questions
|
||||||
result = await db.execute(select(Exam).where(Exam.id == exam_id))
|
result = await db.execute(select(Exam).where(Exam.id == exam_id))
|
||||||
@@ -540,6 +547,7 @@ async def create_exam_with_upload(
|
|||||||
request: Request,
|
request: Request,
|
||||||
background_tasks: BackgroundTasks,
|
background_tasks: BackgroundTasks,
|
||||||
title: str = Form(...),
|
title: str = Form(...),
|
||||||
|
is_random: bool = Form(False),
|
||||||
file: UploadFile = File(...),
|
file: UploadFile = File(...),
|
||||||
current_user: User = Depends(get_current_user),
|
current_user: User = Depends(get_current_user),
|
||||||
db: AsyncSession = Depends(get_db)
|
db: AsyncSession = Depends(get_db)
|
||||||
@@ -574,7 +582,8 @@ async def create_exam_with_upload(
|
|||||||
new_exam.id,
|
new_exam.id,
|
||||||
file_content,
|
file_content,
|
||||||
file.filename,
|
file.filename,
|
||||||
os.getenv("DATABASE_URL")
|
os.getenv("DATABASE_URL"),
|
||||||
|
is_random
|
||||||
)
|
)
|
||||||
|
|
||||||
return ExamUploadResponse(
|
return ExamUploadResponse(
|
||||||
|
|||||||
@@ -19,6 +19,53 @@ from services.config_service import load_llm_config
|
|||||||
router = APIRouter()
|
router = APIRouter()
|
||||||
|
|
||||||
|
|
||||||
|
@router.get("/", response_model=QuestionListResponse)
|
||||||
|
async def get_all_questions(
|
||||||
|
skip: int = 0,
|
||||||
|
limit: int = 50,
|
||||||
|
exam_id: Optional[int] = None,
|
||||||
|
current_user: User = Depends(get_current_user),
|
||||||
|
db: AsyncSession = Depends(get_db)
|
||||||
|
):
|
||||||
|
"""Get all questions with optional exam filter"""
|
||||||
|
|
||||||
|
# Build query
|
||||||
|
query = select(Question).order_by(Question.id)
|
||||||
|
count_query = select(func.count(Question.id))
|
||||||
|
|
||||||
|
# Apply exam filter if provided
|
||||||
|
if exam_id is not None:
|
||||||
|
# Verify exam ownership/access
|
||||||
|
result = await db.execute(
|
||||||
|
select(Exam).where(
|
||||||
|
and_(Exam.id == exam_id, Exam.user_id == current_user.id)
|
||||||
|
)
|
||||||
|
)
|
||||||
|
exam = result.scalar_one_or_none()
|
||||||
|
if not exam:
|
||||||
|
raise HTTPException(
|
||||||
|
status_code=status.HTTP_404_NOT_FOUND,
|
||||||
|
detail="Exam not found"
|
||||||
|
)
|
||||||
|
|
||||||
|
query = query.where(Question.exam_id == exam_id)
|
||||||
|
count_query = count_query.where(Question.exam_id == exam_id)
|
||||||
|
else:
|
||||||
|
# If no exam filter, only show questions from exams owned by user
|
||||||
|
query = query.join(Exam).where(Exam.user_id == current_user.id)
|
||||||
|
count_query = count_query.join(Exam).where(Exam.user_id == current_user.id)
|
||||||
|
|
||||||
|
# Get total count
|
||||||
|
result = await db.execute(count_query)
|
||||||
|
total = result.scalar()
|
||||||
|
|
||||||
|
# Get questions
|
||||||
|
result = await db.execute(query.offset(skip).limit(limit))
|
||||||
|
questions = result.scalars().all()
|
||||||
|
|
||||||
|
return QuestionListResponse(questions=questions, total=total)
|
||||||
|
|
||||||
|
|
||||||
@router.get("/exam/{exam_id}/questions", response_model=QuestionListResponse)
|
@router.get("/exam/{exam_id}/questions", response_model=QuestionListResponse)
|
||||||
async def get_exam_questions(
|
async def get_exam_questions(
|
||||||
exam_id: int,
|
exam_id: int,
|
||||||
|
|||||||
@@ -14,6 +14,8 @@ import ExamList from './pages/ExamList'
|
|||||||
import ExamDetail from './pages/ExamDetail'
|
import ExamDetail from './pages/ExamDetail'
|
||||||
import QuizPlayer from './pages/QuizPlayer'
|
import QuizPlayer from './pages/QuizPlayer'
|
||||||
import MistakeList from './pages/MistakeList'
|
import MistakeList from './pages/MistakeList'
|
||||||
|
import MistakePlayer from './pages/MistakePlayer'
|
||||||
|
import QuestionBank from './pages/QuestionBank'
|
||||||
|
|
||||||
// Admin Pages
|
// Admin Pages
|
||||||
import AdminPanel from './pages/AdminPanel'
|
import AdminPanel from './pages/AdminPanel'
|
||||||
@@ -100,6 +102,24 @@ function App() {
|
|||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
<Route
|
||||||
|
path="/mistake-quiz"
|
||||||
|
element={
|
||||||
|
<ProtectedRoute>
|
||||||
|
<MistakePlayer />
|
||||||
|
</ProtectedRoute>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Route
|
||||||
|
path="/questions"
|
||||||
|
element={
|
||||||
|
<ProtectedRoute>
|
||||||
|
<QuestionBank />
|
||||||
|
</ProtectedRoute>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
|
||||||
{/* Admin Only Routes */}
|
{/* Admin Only Routes */}
|
||||||
<Route
|
<Route
|
||||||
path="/admin"
|
path="/admin"
|
||||||
|
|||||||
@@ -73,10 +73,11 @@ export const authAPI = {
|
|||||||
// ============ Exam APIs ============
|
// ============ Exam APIs ============
|
||||||
export const examAPI = {
|
export const examAPI = {
|
||||||
// Create exam with first document
|
// Create exam with first document
|
||||||
create: (title, file) => {
|
create: (title, file, isRandom = false) => {
|
||||||
const formData = new FormData()
|
const formData = new FormData()
|
||||||
formData.append('title', title)
|
formData.append('title', title)
|
||||||
formData.append('file', file)
|
formData.append('file', file)
|
||||||
|
formData.append('is_random', isRandom)
|
||||||
return api.post('/exams/create', formData, {
|
return api.post('/exams/create', formData, {
|
||||||
headers: { 'Content-Type': 'multipart/form-data' }
|
headers: { 'Content-Type': 'multipart/form-data' }
|
||||||
})
|
})
|
||||||
@@ -110,6 +111,13 @@ export const examAPI = {
|
|||||||
|
|
||||||
// ============ Question APIs ============
|
// ============ Question APIs ============
|
||||||
export const questionAPI = {
|
export const questionAPI = {
|
||||||
|
// Get all questions (Question Bank)
|
||||||
|
getAll: (skip = 0, limit = 50, examId = null) => {
|
||||||
|
const params = { skip, limit }
|
||||||
|
if (examId) params.exam_id = examId
|
||||||
|
return api.get('/questions/', { params })
|
||||||
|
},
|
||||||
|
|
||||||
// Get all questions for an exam
|
// Get all questions for an exam
|
||||||
getExamQuestions: (examId, skip = 0, limit = 50) =>
|
getExamQuestions: (examId, skip = 0, limit = 50) =>
|
||||||
api.get(`/questions/exam/${examId}/questions`, { params: { skip, limit } }),
|
api.get(`/questions/exam/${examId}/questions`, { params: { skip, limit } }),
|
||||||
|
|||||||
@@ -83,14 +83,17 @@ export const Dashboard = () => {
|
|||||||
<p className="text-sm text-gray-600">题库总数</p>
|
<p className="text-sm text-gray-600">题库总数</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="bg-white rounded-xl shadow-sm p-6">
|
<div
|
||||||
|
className="bg-white rounded-xl shadow-sm p-6 cursor-pointer hover:shadow-md transition-shadow"
|
||||||
|
onClick={() => navigate('/questions')}
|
||||||
|
>
|
||||||
<div className="flex items-center gap-3 mb-2">
|
<div className="flex items-center gap-3 mb-2">
|
||||||
<div className="bg-blue-100 p-2 rounded-lg">
|
<div className="bg-blue-100 p-2 rounded-lg">
|
||||||
<BookOpen className="h-5 w-5 text-blue-600" />
|
<BookOpen className="h-5 w-5 text-blue-600" />
|
||||||
</div>
|
</div>
|
||||||
<span className="text-2xl font-bold text-gray-900">{stats.totalQuestions}</span>
|
<span className="text-2xl font-bold text-gray-900">{stats.totalQuestions}</span>
|
||||||
</div>
|
</div>
|
||||||
<p className="text-sm text-gray-600">题目总数</p>
|
<p className="text-sm text-gray-600">题目总数 (点击查看)</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="bg-white rounded-xl shadow-sm p-6">
|
<div className="bg-white rounded-xl shadow-sm p-6">
|
||||||
@@ -158,12 +161,17 @@ export const Dashboard = () => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{exam.total_questions > 0 && (
|
{exam.total_questions > 0 && (
|
||||||
<div className="w-full bg-gray-200 rounded-full h-2 mt-3">
|
<>
|
||||||
<div
|
<div className="w-full bg-gray-200 rounded-full h-2 mt-3">
|
||||||
className="bg-primary-600 h-2 rounded-full transition-all"
|
<div
|
||||||
style={{ width: `${calculateProgress(exam.current_index, exam.total_questions)}%` }}
|
className="bg-primary-600 h-2 rounded-full transition-all"
|
||||||
></div>
|
style={{ width: `${calculateProgress(exam.current_index, exam.total_questions)}%` }}
|
||||||
</div>
|
></div>
|
||||||
|
</div>
|
||||||
|
<span className="text-xs text-gray-500 mt-1 block text-right">
|
||||||
|
{calculateProgress(exam.current_index, exam.total_questions)}%
|
||||||
|
</span>
|
||||||
|
</>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
|
|||||||
@@ -7,7 +7,7 @@ import { examAPI, questionAPI } from '../api/client'
|
|||||||
import Layout from '../components/Layout'
|
import Layout from '../components/Layout'
|
||||||
import ParsingProgress from '../components/ParsingProgress'
|
import ParsingProgress from '../components/ParsingProgress'
|
||||||
import {
|
import {
|
||||||
ArrowLeft, Upload, Play, Loader, FileText, AlertCircle, RefreshCw
|
ArrowLeft, Upload, Play, Loader, FileText, AlertCircle, RefreshCw, ArrowRight
|
||||||
} from 'lucide-react'
|
} from 'lucide-react'
|
||||||
import toast from 'react-hot-toast'
|
import toast from 'react-hot-toast'
|
||||||
import {
|
import {
|
||||||
@@ -24,7 +24,6 @@ export const ExamDetail = () => {
|
|||||||
const navigate = useNavigate()
|
const navigate = useNavigate()
|
||||||
|
|
||||||
const [exam, setExam] = useState(null)
|
const [exam, setExam] = useState(null)
|
||||||
const [questions, setQuestions] = useState([])
|
|
||||||
const [loading, setLoading] = useState(true)
|
const [loading, setLoading] = useState(true)
|
||||||
const [uploading, setUploading] = useState(false)
|
const [uploading, setUploading] = useState(false)
|
||||||
const [showUploadModal, setShowUploadModal] = useState(false)
|
const [showUploadModal, setShowUploadModal] = useState(false)
|
||||||
@@ -47,13 +46,8 @@ export const ExamDetail = () => {
|
|||||||
|
|
||||||
const loadExamDetail = async () => {
|
const loadExamDetail = async () => {
|
||||||
try {
|
try {
|
||||||
const [examRes, questionsRes] = await Promise.all([
|
const examRes = await examAPI.getDetail(examId)
|
||||||
examAPI.getDetail(examId),
|
|
||||||
questionAPI.getExamQuestions(examId, 0, 10) // Load first 10 for preview
|
|
||||||
])
|
|
||||||
|
|
||||||
setExam(examRes.data)
|
setExam(examRes.data)
|
||||||
setQuestions(questionsRes.data.questions)
|
|
||||||
|
|
||||||
// Connect to SSE if exam is processing
|
// Connect to SSE if exam is processing
|
||||||
if (examRes.data.status === 'processing') {
|
if (examRes.data.status === 'processing') {
|
||||||
@@ -263,7 +257,7 @@ export const ExamDetail = () => {
|
|||||||
</div>
|
</div>
|
||||||
<div className="bg-gray-50 rounded-lg p-4">
|
<div className="bg-gray-50 rounded-lg p-4">
|
||||||
<p className="text-sm text-gray-600 mb-1">完成度</p>
|
<p className="text-sm text-gray-600 mb-1">完成度</p>
|
||||||
<p className="text-2xl font-bold text-green-600">{progress}%</p>
|
<p className="text-2xl font-bold text-green-600">{isProcessing ? progress : quizProgress}%</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -301,47 +295,23 @@ export const ExamDetail = () => {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Questions Preview */}
|
{/* View All Questions Link */}
|
||||||
<div className="bg-white rounded-xl shadow-sm p-6">
|
<div
|
||||||
<h2 className="text-xl font-bold text-gray-900 mb-4">
|
className="bg-white rounded-xl shadow-sm p-6 cursor-pointer hover:shadow-md transition-shadow flex items-center justify-between group"
|
||||||
题目预览 {questions.length > 0 && `(前 ${questions.length} 题)`}
|
onClick={() => navigate(`/questions?examId=${examId}`)}
|
||||||
</h2>
|
>
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
{questions.length === 0 ? (
|
<div className="bg-blue-100 p-3 rounded-full text-blue-600 group-hover:bg-blue-600 group-hover:text-white transition-colors">
|
||||||
<div className="text-center py-12">
|
<FileText className="h-6 w-6" />
|
||||||
<FileText className="h-16 w-16 text-gray-300 mx-auto mb-4" />
|
|
||||||
<p className="text-gray-500">
|
|
||||||
{isProcessing ? '正在解析文档,请稍候...' : '暂无题目'}
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
) : (
|
<div>
|
||||||
<div className="space-y-4">
|
<h2 className="text-lg font-bold text-gray-900">查看题库所有题目</h2>
|
||||||
{questions.map((q, index) => (
|
<p className="text-gray-600">浏览、搜索和查看该题库中的所有题目详情</p>
|
||||||
<div key={q.id} className="border border-gray-200 rounded-lg p-4">
|
|
||||||
<div className="flex items-start gap-3">
|
|
||||||
<span className="flex-shrink-0 w-8 h-8 bg-primary-100 text-primary-600 rounded-full flex items-center justify-center font-medium">
|
|
||||||
{index + 1}
|
|
||||||
</span>
|
|
||||||
<div className="flex-1">
|
|
||||||
<div className="flex items-center gap-2 mb-2">
|
|
||||||
<span className="text-xs px-2 py-1 bg-gray-100 text-gray-600 rounded">
|
|
||||||
{getQuestionTypeText(q.type)}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<p className="text-gray-900">{q.content}</p>
|
|
||||||
{q.options && q.options.length > 0 && (
|
|
||||||
<ul className="mt-2 space-y-1 text-sm text-gray-600">
|
|
||||||
{q.options.map((opt, i) => (
|
|
||||||
<li key={i}>{opt}</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
</div>
|
||||||
|
<div className="bg-gray-100 p-2 rounded-full text-gray-400 group-hover:bg-blue-100 group-hover:text-blue-600 transition-colors">
|
||||||
|
<ArrowRight className="h-5 w-5" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -27,7 +27,8 @@ export const ExamList = () => {
|
|||||||
|
|
||||||
const [formData, setFormData] = useState({
|
const [formData, setFormData] = useState({
|
||||||
title: '',
|
title: '',
|
||||||
file: null
|
file: null,
|
||||||
|
isRandom: false
|
||||||
})
|
})
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@@ -94,10 +95,10 @@ export const ExamList = () => {
|
|||||||
setCreating(true)
|
setCreating(true)
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const response = await examAPI.create(formData.title, formData.file)
|
const response = await examAPI.create(formData.title, formData.file, formData.isRandom)
|
||||||
toast.success('题库创建成功,正在解析文档...')
|
toast.success('题库创建成功,正在解析文档...')
|
||||||
setShowCreateModal(false)
|
setShowCreateModal(false)
|
||||||
setFormData({ title: '', file: null })
|
setFormData({ title: '', file: null, isRandom: false })
|
||||||
|
|
||||||
// 跳转到新创建的试卷详情页
|
// 跳转到新创建的试卷详情页
|
||||||
if (response.data && response.data.exam_id) {
|
if (response.data && response.data.exam_id) {
|
||||||
@@ -274,13 +275,44 @@ export const ExamList = () => {
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Order Selection */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||||
|
题目顺序
|
||||||
|
</label>
|
||||||
|
<div className="flex gap-4">
|
||||||
|
<label className="flex items-center gap-2 cursor-pointer">
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
checked={!formData.isRandom}
|
||||||
|
onChange={() => setFormData({ ...formData, isRandom: false })}
|
||||||
|
className="text-primary-600 focus:ring-primary-500"
|
||||||
|
/>
|
||||||
|
<span className="text-sm text-gray-700">顺序(按文档原序)</span>
|
||||||
|
</label>
|
||||||
|
<label className="flex items-center gap-2 cursor-pointer">
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
checked={formData.isRandom}
|
||||||
|
onChange={() => setFormData({ ...formData, isRandom: true })}
|
||||||
|
className="text-primary-600 focus:ring-primary-500"
|
||||||
|
/>
|
||||||
|
<span className="text-sm text-gray-700">乱序(随机打乱)</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<p className="text-xs text-gray-500 mt-1">
|
||||||
|
注意:创建后题目顺序将固定,无法再次更改。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Buttons */}
|
{/* Buttons */}
|
||||||
<div className="flex gap-3 pt-4">
|
<div className="flex gap-3 pt-4">
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setShowCreateModal(false)
|
setShowCreateModal(false)
|
||||||
setFormData({ title: '', file: null })
|
setShowCreateModal(false)
|
||||||
|
setFormData({ title: '', file: null, isRandom: false })
|
||||||
}}
|
}}
|
||||||
className="flex-1 px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
|
className="flex-1 px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -2,9 +2,10 @@
|
|||||||
* Mistake List Page (错题本)
|
* Mistake List Page (错题本)
|
||||||
*/
|
*/
|
||||||
import React, { useState, useEffect } from 'react'
|
import React, { useState, useEffect } from 'react'
|
||||||
|
import { useNavigate } from 'react-router-dom'
|
||||||
import { mistakeAPI } from '../api/client'
|
import { mistakeAPI } from '../api/client'
|
||||||
import Layout from '../components/Layout'
|
import Layout from '../components/Layout'
|
||||||
import { XCircle, Loader, Trash2, BookOpen } from 'lucide-react'
|
import { XCircle, Loader, Trash2, BookOpen, Play, ChevronLeft, ChevronRight } from 'lucide-react'
|
||||||
import toast from 'react-hot-toast'
|
import toast from 'react-hot-toast'
|
||||||
import { getQuestionTypeText, formatRelativeTime } from '../utils/helpers'
|
import { getQuestionTypeText, formatRelativeTime } from '../utils/helpers'
|
||||||
|
|
||||||
@@ -12,15 +13,25 @@ export const MistakeList = () => {
|
|||||||
const [mistakes, setMistakes] = useState([])
|
const [mistakes, setMistakes] = useState([])
|
||||||
const [loading, setLoading] = useState(true)
|
const [loading, setLoading] = useState(true)
|
||||||
const [expandedId, setExpandedId] = useState(null)
|
const [expandedId, setExpandedId] = useState(null)
|
||||||
|
const [showModeModal, setShowModeModal] = useState(false)
|
||||||
|
|
||||||
|
// Pagination
|
||||||
|
const [page, setPage] = useState(1)
|
||||||
|
const [limit, setLimit] = useState(10)
|
||||||
|
const [total, setTotal] = useState(0)
|
||||||
|
const navigate = useNavigate()
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
loadMistakes()
|
loadMistakes()
|
||||||
}, [])
|
}, [page, limit])
|
||||||
|
|
||||||
const loadMistakes = async () => {
|
const loadMistakes = async () => {
|
||||||
try {
|
try {
|
||||||
const response = await mistakeAPI.getList()
|
setLoading(true)
|
||||||
|
const skip = (page - 1) * limit
|
||||||
|
const response = await mistakeAPI.getList(skip, limit)
|
||||||
setMistakes(response.data.mistakes)
|
setMistakes(response.data.mistakes)
|
||||||
|
setTotal(response.data.total)
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Failed to load mistakes:', error)
|
console.error('Failed to load mistakes:', error)
|
||||||
toast.error('加载错题本失败')
|
toast.error('加载错题本失败')
|
||||||
@@ -62,9 +73,21 @@ export const MistakeList = () => {
|
|||||||
<Layout>
|
<Layout>
|
||||||
<div className="p-4 md:p-8">
|
<div className="p-4 md:p-8">
|
||||||
{/* Header */}
|
{/* Header */}
|
||||||
<div className="mb-6">
|
<div className="flex flex-col md:flex-row md:items-center justify-between mb-6 gap-4">
|
||||||
<h1 className="text-2xl md:text-3xl font-bold text-gray-900">错题本</h1>
|
<div>
|
||||||
<p className="text-gray-600 mt-1">共 {mistakes.length} 道错题</p>
|
<h1 className="text-2xl md:text-3xl font-bold text-gray-900">错题本</h1>
|
||||||
|
<p className="text-gray-600 mt-1">共 {total} 道错题</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{mistakes.length > 0 && (
|
||||||
|
<button
|
||||||
|
onClick={() => setShowModeModal(true)}
|
||||||
|
className="bg-primary-600 text-white px-6 py-2 rounded-lg font-medium hover:bg-primary-700 transition-colors flex items-center justify-center gap-2"
|
||||||
|
>
|
||||||
|
<Play className="h-5 w-5" />
|
||||||
|
开始刷错题
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Empty State */}
|
{/* Empty State */}
|
||||||
@@ -160,9 +183,91 @@ export const MistakeList = () => {
|
|||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
})}
|
})}
|
||||||
|
|
||||||
|
{/* Pagination */}
|
||||||
|
{total > limit && (
|
||||||
|
<div className="flex items-center justify-between pt-4">
|
||||||
|
<div className="text-sm text-gray-600">
|
||||||
|
显示 {Math.min((page - 1) * limit + 1, total)} - {Math.min(page * limit, total)} 共 {total} 条
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<button
|
||||||
|
onClick={() => setPage(p => Math.max(1, p - 1))}
|
||||||
|
disabled={page === 1}
|
||||||
|
className="p-2 border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||||
|
>
|
||||||
|
<ChevronLeft className="h-5 w-5" />
|
||||||
|
</button>
|
||||||
|
<span className="flex items-center px-4 border border-gray-300 rounded-lg bg-white">
|
||||||
|
{page}
|
||||||
|
</span>
|
||||||
|
<button
|
||||||
|
onClick={() => setPage(p => (p * limit < total ? p + 1 : p))}
|
||||||
|
disabled={page * limit >= total}
|
||||||
|
className="p-2 border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||||
|
>
|
||||||
|
<ChevronRight className="h-5 w-5" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Limit Selector */}
|
||||||
|
<div className="flex justify-end pt-2">
|
||||||
|
<select
|
||||||
|
value={limit}
|
||||||
|
onChange={(e) => {
|
||||||
|
setLimit(Number(e.target.value))
|
||||||
|
setPage(1)
|
||||||
|
}}
|
||||||
|
className="text-sm border-gray-300 rounded-lg focus:ring-primary-500 focus:border-primary-500"
|
||||||
|
>
|
||||||
|
<option value={10}>10 条/页</option>
|
||||||
|
<option value={20}>20 条/页</option>
|
||||||
|
<option value={50}>50 条/页</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Mode Selection Modal */}
|
||||||
|
{showModeModal && (
|
||||||
|
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
|
||||||
|
<div className="bg-white rounded-xl max-w-sm w-full p-6">
|
||||||
|
<h2 className="text-xl font-bold mb-4 text-center">选择刷题模式</h2>
|
||||||
|
<div className="space-y-3">
|
||||||
|
<button
|
||||||
|
onClick={() => navigate('/mistake-quiz?mode=sequential')}
|
||||||
|
className="w-full p-4 border-2 border-primary-100 bg-primary-50 rounded-xl hover:bg-primary-100 transition-colors flex items-center justify-between group"
|
||||||
|
>
|
||||||
|
<div className="text-left">
|
||||||
|
<p className="font-bold text-primary-900">顺序刷题</p>
|
||||||
|
<p className="text-sm text-primary-700">按照加入错题本的时间顺序</p>
|
||||||
|
</div>
|
||||||
|
<ChevronRight className="h-5 w-5 text-primary-400 group-hover:text-primary-600" />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={() => navigate('/mistake-quiz?mode=random')}
|
||||||
|
className="w-full p-4 border-2 border-purple-100 bg-purple-50 rounded-xl hover:bg-purple-100 transition-colors flex items-center justify-between group"
|
||||||
|
>
|
||||||
|
<div className="text-left">
|
||||||
|
<p className="font-bold text-purple-900">随机刷题</p>
|
||||||
|
<p className="text-sm text-purple-700">打乱顺序进行练习</p>
|
||||||
|
</div>
|
||||||
|
<ChevronRight className="h-5 w-5 text-purple-400 group-hover:text-purple-600" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={() => setShowModeModal(false)}
|
||||||
|
className="mt-4 w-full py-2 text-gray-500 hover:text-gray-700"
|
||||||
|
>
|
||||||
|
取消
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</Layout>
|
</Layout>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
428
frontend/src/pages/MistakePlayer.jsx
Normal file
428
frontend/src/pages/MistakePlayer.jsx
Normal file
@@ -0,0 +1,428 @@
|
|||||||
|
/**
|
||||||
|
* Mistake Player Page - Re-do wrong questions
|
||||||
|
*/
|
||||||
|
import React, { useState, useEffect } from 'react'
|
||||||
|
import { useNavigate, useLocation } from 'react-router-dom'
|
||||||
|
import { mistakeAPI, questionAPI } from '../api/client'
|
||||||
|
import Layout from '../components/Layout'
|
||||||
|
import {
|
||||||
|
ArrowLeft, ArrowRight, Check, X, Loader, Trash2, AlertCircle
|
||||||
|
} from 'lucide-react'
|
||||||
|
import toast from 'react-hot-toast'
|
||||||
|
import { getQuestionTypeText } from '../utils/helpers'
|
||||||
|
|
||||||
|
export const MistakePlayer = () => {
|
||||||
|
const navigate = useNavigate()
|
||||||
|
|
||||||
|
const location = useLocation()
|
||||||
|
const searchParams = new URLSearchParams(location.search)
|
||||||
|
const mode = searchParams.get('mode') || 'sequential'
|
||||||
|
|
||||||
|
const [loading, setLoading] = useState(true)
|
||||||
|
const [mistake, setMistake] = useState(null)
|
||||||
|
const [currentIndex, setCurrentIndex] = useState(0)
|
||||||
|
const [total, setTotal] = useState(0)
|
||||||
|
const [randomIds, setRandomIds] = useState([]) // For random mode
|
||||||
|
|
||||||
|
const [submitting, setSubmitting] = useState(false)
|
||||||
|
const [userAnswer, setUserAnswer] = useState('')
|
||||||
|
const [multipleAnswers, setMultipleAnswers] = useState([])
|
||||||
|
const [result, setResult] = useState(null)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
loadMistake()
|
||||||
|
}, [currentIndex])
|
||||||
|
|
||||||
|
const loadMistake = async () => {
|
||||||
|
try {
|
||||||
|
setLoading(true)
|
||||||
|
|
||||||
|
let currentMistake = null
|
||||||
|
|
||||||
|
if (mode === 'random') {
|
||||||
|
// Random Mode Logic
|
||||||
|
if (randomIds.length === 0) {
|
||||||
|
// First load: fetch all mistakes to get IDs
|
||||||
|
// Note: fetching up to 1000 for now. For larger datasets, we need a specific API to get just IDs.
|
||||||
|
const response = await mistakeAPI.getList(0, 1000)
|
||||||
|
const allMistakes = response.data.mistakes
|
||||||
|
setTotal(response.data.total)
|
||||||
|
|
||||||
|
if (allMistakes.length > 0) {
|
||||||
|
// Shuffle IDs
|
||||||
|
const ids = allMistakes.map(m => m.id)
|
||||||
|
for (let i = ids.length - 1; i > 0; i--) {
|
||||||
|
const j = Math.floor(Math.random() * (i + 1));
|
||||||
|
[ids[i], ids[j]] = [ids[j], ids[i]];
|
||||||
|
}
|
||||||
|
setRandomIds(ids)
|
||||||
|
|
||||||
|
// Get first mistake from shuffled list
|
||||||
|
// We need to find the full mistake object from our initial fetch
|
||||||
|
// (Since we fetched all, we have it)
|
||||||
|
const firstId = ids[0]
|
||||||
|
currentMistake = allMistakes.find(m => m.id === firstId)
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// Subsequent loads: use stored random IDs
|
||||||
|
// We need to fetch the specific mistake details if we don't have them cached
|
||||||
|
// But wait, mistakeAPI.getList is pagination based.
|
||||||
|
// We can't easily "get mistake by ID" using getList without knowing its index.
|
||||||
|
// However, we have `mistakeAPI.remove` but not `getById`.
|
||||||
|
// Actually, the `mistake` object contains the `question`.
|
||||||
|
// If we only have the ID, we might need an API to get mistake by ID.
|
||||||
|
// But since we fetched ALL mistakes initially (up to 1000), we can just store the whole objects in randomIds?
|
||||||
|
// No, that's too much memory if many.
|
||||||
|
|
||||||
|
// Let's assume for now we fetched all and stored them in a "cache" or just store the list of objects if < 1000.
|
||||||
|
// For simplicity and performance on small datasets:
|
||||||
|
// If randomIds contains objects, use them.
|
||||||
|
|
||||||
|
// REVISION: Let's just store the full shuffled list of mistakes in state if < 1000.
|
||||||
|
// If > 1000, this approach needs backend support for "random fetch".
|
||||||
|
// Given the user requirements, let's assume < 1000 for now.
|
||||||
|
|
||||||
|
if (currentIndex < randomIds.length) {
|
||||||
|
currentMistake = randomIds[currentIndex]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// Sequential Mode Logic
|
||||||
|
const response = await mistakeAPI.getList(currentIndex, 1)
|
||||||
|
setTotal(response.data.total)
|
||||||
|
if (response.data.mistakes.length > 0) {
|
||||||
|
currentMistake = response.data.mistakes[0]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (currentMistake) {
|
||||||
|
// Ensure options exist for judge type
|
||||||
|
if (currentMistake.question.type === 'judge' && (!currentMistake.question.options || currentMistake.question.options.length === 0)) {
|
||||||
|
currentMistake.question.options = ['A. 正确', 'B. 错误']
|
||||||
|
}
|
||||||
|
setMistake(currentMistake)
|
||||||
|
setResult(null)
|
||||||
|
setUserAnswer('')
|
||||||
|
setMultipleAnswers([])
|
||||||
|
|
||||||
|
// If we just initialized random mode, update state
|
||||||
|
if (mode === 'random' && randomIds.length === 0) {
|
||||||
|
// This part is tricky because state updates are async.
|
||||||
|
// We handled the initialization above.
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
setMistake(null)
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to load mistake:', error)
|
||||||
|
toast.error('加载错题失败')
|
||||||
|
} finally {
|
||||||
|
setLoading(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSubmitAnswer = async () => {
|
||||||
|
let answer = userAnswer
|
||||||
|
|
||||||
|
if (mistake.question.type === 'multiple') {
|
||||||
|
if (multipleAnswers.length === 0) {
|
||||||
|
toast.error('请至少选择一个选项')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
answer = multipleAnswers.sort().join('')
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!answer.trim()) {
|
||||||
|
toast.error('请输入答案')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
setSubmitting(true)
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await questionAPI.checkAnswer(mistake.question.id, answer)
|
||||||
|
setResult(response.data)
|
||||||
|
|
||||||
|
if (response.data.correct) {
|
||||||
|
toast.success('回答正确!')
|
||||||
|
} else {
|
||||||
|
toast.error('回答错误')
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to check answer:', error)
|
||||||
|
toast.error('提交答案失败')
|
||||||
|
} finally {
|
||||||
|
setSubmitting(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleNext = () => {
|
||||||
|
if (currentIndex < total - 1) {
|
||||||
|
setCurrentIndex(prev => prev + 1)
|
||||||
|
} else {
|
||||||
|
toast.success('已完成所有错题!')
|
||||||
|
navigate('/mistakes')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleRemove = async () => {
|
||||||
|
if (!window.confirm('确定要从错题本中移除这道题吗?')) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
await mistakeAPI.remove(mistake.id)
|
||||||
|
toast.success('已移除')
|
||||||
|
// Reload current index (which will now be the next item or empty)
|
||||||
|
// If we remove the last item, we need to go back one step or show empty
|
||||||
|
if (mode === 'random') {
|
||||||
|
// Remove from random list
|
||||||
|
const newRandomList = randomIds.filter(m => m.id !== mistake.id)
|
||||||
|
setRandomIds(newRandomList)
|
||||||
|
setTotal(newRandomList.length)
|
||||||
|
|
||||||
|
if (currentIndex >= newRandomList.length && newRandomList.length > 0) {
|
||||||
|
setCurrentIndex(prev => prev - 1)
|
||||||
|
} else if (newRandomList.length === 0) {
|
||||||
|
setMistake(null)
|
||||||
|
} else {
|
||||||
|
// Force reload with new list
|
||||||
|
const nextMistake = newRandomList[currentIndex]
|
||||||
|
if (nextMistake.question.type === 'judge' && (!nextMistake.question.options || nextMistake.question.options.length === 0)) {
|
||||||
|
nextMistake.question.options = ['A. 正确', 'B. 错误']
|
||||||
|
}
|
||||||
|
setMistake(nextMistake)
|
||||||
|
setResult(null)
|
||||||
|
setUserAnswer('')
|
||||||
|
setMultipleAnswers([])
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (currentIndex >= total - 1 && total > 1) {
|
||||||
|
setCurrentIndex(prev => prev - 1)
|
||||||
|
} else {
|
||||||
|
loadMistake()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to remove mistake:', error)
|
||||||
|
toast.error('移除失败')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleMultipleChoice = (option) => {
|
||||||
|
const letter = option.charAt(0)
|
||||||
|
if (multipleAnswers.includes(letter)) {
|
||||||
|
setMultipleAnswers(multipleAnswers.filter(a => a !== letter))
|
||||||
|
} else {
|
||||||
|
setMultipleAnswers([...multipleAnswers, letter])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (loading && !mistake) {
|
||||||
|
return (
|
||||||
|
<Layout>
|
||||||
|
<div className="flex items-center justify-center h-screen">
|
||||||
|
<Loader className="h-8 w-8 animate-spin text-primary-600" />
|
||||||
|
</div>
|
||||||
|
</Layout>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!mistake) {
|
||||||
|
return (
|
||||||
|
<Layout>
|
||||||
|
<div className="flex flex-col items-center justify-center h-screen">
|
||||||
|
<AlertCircle className="h-16 w-16 text-gray-300 mb-4" />
|
||||||
|
<p className="text-gray-600">错题本为空</p>
|
||||||
|
<button
|
||||||
|
onClick={() => navigate('/mistakes')}
|
||||||
|
className="mt-4 text-primary-600 hover:text-primary-700 font-medium"
|
||||||
|
>
|
||||||
|
返回错题列表
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</Layout>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const question = mistake.question
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Layout>
|
||||||
|
<div className="max-w-4xl mx-auto p-4 md:p-8">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="flex items-center justify-between mb-6">
|
||||||
|
<button
|
||||||
|
onClick={() => navigate('/mistakes')}
|
||||||
|
className="flex items-center gap-2 text-gray-600 hover:text-gray-900 transition-colors"
|
||||||
|
>
|
||||||
|
<ArrowLeft className="h-5 w-5" />
|
||||||
|
返回错题列表
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div className="text-sm text-gray-600">
|
||||||
|
进度: {currentIndex + 1} / {total}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Question Card */}
|
||||||
|
<div className="bg-white rounded-xl shadow-md p-6 md:p-8 mb-6">
|
||||||
|
{/* Question Header */}
|
||||||
|
<div className="flex items-start justify-between mb-6">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<span className="flex-shrink-0 w-10 h-10 bg-red-100 text-red-600 rounded-full flex items-center justify-center font-bold">
|
||||||
|
{currentIndex + 1}
|
||||||
|
</span>
|
||||||
|
<span className="px-3 py-1 bg-gray-100 text-gray-700 rounded-lg text-sm font-medium">
|
||||||
|
{getQuestionTypeText(question.type)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={handleRemove}
|
||||||
|
className="flex items-center gap-2 px-3 py-2 rounded-lg bg-red-50 text-red-600 hover:bg-red-100 transition-colors"
|
||||||
|
>
|
||||||
|
<Trash2 className="h-5 w-5" />
|
||||||
|
<span className="hidden sm:inline">移除此题</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Question Content */}
|
||||||
|
<div className="mb-6">
|
||||||
|
<p className="text-lg md:text-xl text-gray-900 leading-relaxed">
|
||||||
|
{question.content}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Options */}
|
||||||
|
{question.options && question.options.length > 0 && (
|
||||||
|
<div className="space-y-3 mb-6">
|
||||||
|
{question.options.map((option, index) => {
|
||||||
|
const letter = option.charAt(0)
|
||||||
|
const isSelected = question.type === 'multiple'
|
||||||
|
? multipleAnswers.includes(letter)
|
||||||
|
: userAnswer === letter
|
||||||
|
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
key={index}
|
||||||
|
onClick={() => {
|
||||||
|
if (!result) {
|
||||||
|
if (question.type === 'multiple') {
|
||||||
|
handleMultipleChoice(option)
|
||||||
|
} else {
|
||||||
|
setUserAnswer(letter)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
disabled={!!result}
|
||||||
|
className={`w-full text-left p-4 rounded-lg border-2 transition-all ${isSelected
|
||||||
|
? 'border-primary-500 bg-primary-50'
|
||||||
|
: 'border-gray-200 hover:border-gray-300'
|
||||||
|
} ${result ? 'cursor-not-allowed opacity-75' : 'cursor-pointer'}`}
|
||||||
|
>
|
||||||
|
<span className="text-gray-900">{option}</span>
|
||||||
|
</button>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Short Answer Input */}
|
||||||
|
{question.type === 'short' && !result && (
|
||||||
|
<div className="mb-6">
|
||||||
|
<textarea
|
||||||
|
value={userAnswer}
|
||||||
|
onChange={(e) => setUserAnswer(e.target.value)}
|
||||||
|
rows={4}
|
||||||
|
className="w-full px-4 py-3 border-2 border-gray-200 rounded-lg focus:border-primary-500 focus:outline-none"
|
||||||
|
placeholder="请输入你的答案..."
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Submit Button */}
|
||||||
|
{!result && (
|
||||||
|
<button
|
||||||
|
onClick={handleSubmitAnswer}
|
||||||
|
disabled={submitting}
|
||||||
|
className="w-full bg-primary-600 text-white py-3 rounded-lg font-medium hover:bg-primary-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
|
||||||
|
>
|
||||||
|
{submitting ? (
|
||||||
|
<>
|
||||||
|
<Loader className="h-5 w-5 animate-spin" />
|
||||||
|
提交中...
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<Check className="h-5 w-5" />
|
||||||
|
提交答案
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Result */}
|
||||||
|
{result && (
|
||||||
|
<div className={`rounded-xl p-6 mb-6 ${result.correct ? 'bg-green-50 border-2 border-green-200' : 'bg-red-50 border-2 border-red-200'
|
||||||
|
}`}>
|
||||||
|
<div className="flex items-start gap-3 mb-4">
|
||||||
|
{result.correct ? (
|
||||||
|
<Check className="h-6 w-6 text-green-600 mt-0.5" />
|
||||||
|
) : (
|
||||||
|
<X className="h-6 w-6 text-red-600 mt-0.5" />
|
||||||
|
)}
|
||||||
|
<div className="flex-1">
|
||||||
|
<h3 className={`font-bold text-lg mb-2 ${result.correct ? 'text-green-900' : 'text-red-900'}`}>
|
||||||
|
{result.correct ? '回答正确!' : '回答错误'}
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
{!result.correct && (
|
||||||
|
<div className="space-y-2 text-sm">
|
||||||
|
<p className="text-gray-700">
|
||||||
|
<span className="font-medium">你的答案:</span>{result.user_answer}
|
||||||
|
</p>
|
||||||
|
<p className="text-gray-700">
|
||||||
|
<span className="font-medium">正确答案:</span>{result.correct_answer}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* AI Score */}
|
||||||
|
{result.ai_score !== null && result.ai_score !== undefined && (
|
||||||
|
<div className="mt-3 p-3 bg-white rounded-lg">
|
||||||
|
<p className="text-sm font-medium text-gray-700 mb-1">
|
||||||
|
AI 评分:{(result.ai_score * 100).toFixed(0)}%
|
||||||
|
</p>
|
||||||
|
{result.ai_feedback && (
|
||||||
|
<p className="text-sm text-gray-600">{result.ai_feedback}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Analysis */}
|
||||||
|
{result.analysis && (
|
||||||
|
<div className="mt-3 p-3 bg-white rounded-lg">
|
||||||
|
<p className="text-sm font-medium text-gray-700 mb-1">解析:</p>
|
||||||
|
<p className="text-sm text-gray-600">{result.analysis}</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Next Button */}
|
||||||
|
<button
|
||||||
|
onClick={handleNext}
|
||||||
|
className="w-full bg-primary-600 text-white py-3 rounded-lg font-medium hover:bg-primary-700 transition-colors flex items-center justify-center gap-2"
|
||||||
|
>
|
||||||
|
{currentIndex < total - 1 ? '下一题' : '完成复习'}
|
||||||
|
<ArrowRight className="h-5 w-5" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</Layout>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default MistakePlayer
|
||||||
190
frontend/src/pages/QuestionBank.jsx
Normal file
190
frontend/src/pages/QuestionBank.jsx
Normal file
@@ -0,0 +1,190 @@
|
|||||||
|
/**
|
||||||
|
* Question Bank Page - View all questions
|
||||||
|
*/
|
||||||
|
import React, { useState, useEffect } from 'react'
|
||||||
|
import { questionAPI } from '../api/client'
|
||||||
|
import Layout from '../components/Layout'
|
||||||
|
import { FileText, Loader, ChevronLeft, ChevronRight, Search } from 'lucide-react'
|
||||||
|
import toast from 'react-hot-toast'
|
||||||
|
import { getQuestionTypeText, formatRelativeTime } from '../utils/helpers'
|
||||||
|
|
||||||
|
export const QuestionBank = () => {
|
||||||
|
const [questions, setQuestions] = useState([])
|
||||||
|
const [loading, setLoading] = useState(true)
|
||||||
|
const [expandedId, setExpandedId] = useState(null)
|
||||||
|
|
||||||
|
// Pagination
|
||||||
|
const [page, setPage] = useState(1)
|
||||||
|
const [limit, setLimit] = useState(10)
|
||||||
|
const [total, setTotal] = useState(0)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
loadQuestions()
|
||||||
|
}, [page, limit])
|
||||||
|
|
||||||
|
const loadQuestions = async () => {
|
||||||
|
try {
|
||||||
|
setLoading(true)
|
||||||
|
const skip = (page - 1) * limit
|
||||||
|
const response = await questionAPI.getAll(skip, limit)
|
||||||
|
setQuestions(response.data.questions)
|
||||||
|
setTotal(response.data.total)
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to load questions:', error)
|
||||||
|
toast.error('加载题库失败')
|
||||||
|
} finally {
|
||||||
|
setLoading(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const toggleExpand = (id) => {
|
||||||
|
setExpandedId(expandedId === id ? null : id)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (loading && questions.length === 0) {
|
||||||
|
return (
|
||||||
|
<Layout>
|
||||||
|
<div className="flex items-center justify-center h-screen">
|
||||||
|
<Loader className="h-8 w-8 animate-spin text-primary-600" />
|
||||||
|
</div>
|
||||||
|
</Layout>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Layout>
|
||||||
|
<div className="p-4 md:p-8">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="mb-6">
|
||||||
|
<h1 className="text-2xl md:text-3xl font-bold text-gray-900">全站题库</h1>
|
||||||
|
<p className="text-gray-600 mt-1">共 {total} 道题目</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* List */}
|
||||||
|
<div className="space-y-4">
|
||||||
|
{questions.map((q) => {
|
||||||
|
const isExpanded = expandedId === q.id
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={q.id}
|
||||||
|
className="bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="p-4 md:p-6 cursor-pointer"
|
||||||
|
onClick={() => toggleExpand(q.id)}
|
||||||
|
>
|
||||||
|
<div className="flex items-start gap-3">
|
||||||
|
<span className="flex-shrink-0 w-10 h-10 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center">
|
||||||
|
<FileText className="h-5 w-5" />
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<div className="flex items-center gap-2 mb-2">
|
||||||
|
<span className="text-xs px-2 py-1 bg-gray-100 text-gray-600 rounded">
|
||||||
|
{getQuestionTypeText(q.type)}
|
||||||
|
</span>
|
||||||
|
<span className="text-xs text-gray-500">
|
||||||
|
ID: {q.id}
|
||||||
|
</span>
|
||||||
|
<span className="text-xs text-gray-500">
|
||||||
|
{formatRelativeTime(q.created_at)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className={`text-gray-900 ${!isExpanded ? 'line-clamp-2' : ''}`}>
|
||||||
|
{q.content}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{isExpanded && (
|
||||||
|
<div className="mt-4 space-y-3">
|
||||||
|
{/* Options */}
|
||||||
|
{q.options && q.options.length > 0 && (
|
||||||
|
<div className="space-y-2">
|
||||||
|
{q.options.map((opt, i) => (
|
||||||
|
<div
|
||||||
|
key={i}
|
||||||
|
className="p-3 bg-gray-50 rounded-lg text-sm text-gray-700"
|
||||||
|
>
|
||||||
|
{opt}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Answer */}
|
||||||
|
<div className="p-3 bg-green-50 rounded-lg">
|
||||||
|
<p className="text-sm font-medium text-green-900 mb-1">
|
||||||
|
正确答案
|
||||||
|
</p>
|
||||||
|
<p className="text-sm text-green-700">{q.answer}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Analysis */}
|
||||||
|
{q.analysis && (
|
||||||
|
<div className="p-3 bg-blue-50 rounded-lg">
|
||||||
|
<p className="text-sm font-medium text-blue-900 mb-1">
|
||||||
|
解析
|
||||||
|
</p>
|
||||||
|
<p className="text-sm text-blue-700">{q.analysis}</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Pagination */}
|
||||||
|
{total > limit && (
|
||||||
|
<div className="flex items-center justify-between pt-4">
|
||||||
|
<div className="text-sm text-gray-600">
|
||||||
|
显示 {Math.min((page - 1) * limit + 1, total)} - {Math.min(page * limit, total)} 共 {total} 条
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<button
|
||||||
|
onClick={() => setPage(p => Math.max(1, p - 1))}
|
||||||
|
disabled={page === 1}
|
||||||
|
className="p-2 border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||||
|
>
|
||||||
|
<ChevronLeft className="h-5 w-5" />
|
||||||
|
</button>
|
||||||
|
<span className="flex items-center px-4 border border-gray-300 rounded-lg bg-white">
|
||||||
|
{page}
|
||||||
|
</span>
|
||||||
|
<button
|
||||||
|
onClick={() => setPage(p => (p * limit < total ? p + 1 : p))}
|
||||||
|
disabled={page * limit >= total}
|
||||||
|
className="p-2 border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||||
|
>
|
||||||
|
<ChevronRight className="h-5 w-5" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Limit Selector */}
|
||||||
|
<div className="flex justify-end pt-2">
|
||||||
|
<select
|
||||||
|
value={limit}
|
||||||
|
onChange={(e) => {
|
||||||
|
setLimit(Number(e.target.value))
|
||||||
|
setPage(1)
|
||||||
|
}}
|
||||||
|
className="text-sm border-gray-300 rounded-lg focus:ring-primary-500 focus:border-primary-500"
|
||||||
|
>
|
||||||
|
<option value={10}>10 条/页</option>
|
||||||
|
<option value={20}>20 条/页</option>
|
||||||
|
<option value={50}>50 条/页</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Layout>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default QuestionBank
|
||||||
@@ -52,6 +52,10 @@ export const QuizPlayer = () => {
|
|||||||
const loadCurrentQuestion = async () => {
|
const loadCurrentQuestion = async () => {
|
||||||
try {
|
try {
|
||||||
const response = await questionAPI.getCurrentQuestion(examId)
|
const response = await questionAPI.getCurrentQuestion(examId)
|
||||||
|
// For judge questions, ensure options exist
|
||||||
|
if (response.data.type === 'judge' && (!response.data.options || response.data.options.length === 0)) {
|
||||||
|
response.data.options = ['A. 正确', 'B. 错误']
|
||||||
|
}
|
||||||
setQuestion(response.data)
|
setQuestion(response.data)
|
||||||
setResult(null)
|
setResult(null)
|
||||||
setUserAnswer('')
|
setUserAnswer('')
|
||||||
@@ -207,11 +211,10 @@ export const QuizPlayer = () => {
|
|||||||
|
|
||||||
<button
|
<button
|
||||||
onClick={handleToggleMistake}
|
onClick={handleToggleMistake}
|
||||||
className={`flex items-center gap-2 px-3 py-2 rounded-lg transition-colors ${
|
className={`flex items-center gap-2 px-3 py-2 rounded-lg transition-colors ${inMistakeBook
|
||||||
inMistakeBook
|
|
||||||
? 'bg-yellow-100 text-yellow-700 hover:bg-yellow-200'
|
? 'bg-yellow-100 text-yellow-700 hover:bg-yellow-200'
|
||||||
: 'bg-gray-100 text-gray-600 hover:bg-gray-200'
|
: 'bg-gray-100 text-gray-600 hover:bg-gray-200'
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
{inMistakeBook ? (
|
{inMistakeBook ? (
|
||||||
<>
|
<>
|
||||||
@@ -256,11 +259,10 @@ export const QuizPlayer = () => {
|
|||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
disabled={!!result}
|
disabled={!!result}
|
||||||
className={`w-full text-left p-4 rounded-lg border-2 transition-all ${
|
className={`w-full text-left p-4 rounded-lg border-2 transition-all ${isSelected
|
||||||
isSelected
|
|
||||||
? 'border-primary-500 bg-primary-50'
|
? 'border-primary-500 bg-primary-50'
|
||||||
: 'border-gray-200 hover:border-gray-300'
|
: 'border-gray-200 hover:border-gray-300'
|
||||||
} ${result ? 'cursor-not-allowed opacity-75' : 'cursor-pointer'}`}
|
} ${result ? 'cursor-not-allowed opacity-75' : 'cursor-pointer'}`}
|
||||||
>
|
>
|
||||||
<span className="text-gray-900">{option}</span>
|
<span className="text-gray-900">{option}</span>
|
||||||
</button>
|
</button>
|
||||||
@@ -282,31 +284,7 @@ export const QuizPlayer = () => {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Judge Input */}
|
|
||||||
{question.type === 'judge' && !result && (
|
|
||||||
<div className="flex gap-4 mb-6">
|
|
||||||
<button
|
|
||||||
onClick={() => setUserAnswer('A')}
|
|
||||||
className={`flex-1 py-3 rounded-lg border-2 transition-all ${
|
|
||||||
userAnswer === 'A'
|
|
||||||
? 'border-green-500 bg-green-50 text-green-700'
|
|
||||||
: 'border-gray-200 hover:border-gray-300'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
正确
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() => setUserAnswer('B')}
|
|
||||||
className={`flex-1 py-3 rounded-lg border-2 transition-all ${
|
|
||||||
userAnswer === 'B'
|
|
||||||
? 'border-red-500 bg-red-50 text-red-700'
|
|
||||||
: 'border-gray-200 hover:border-gray-300'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
错误
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Submit Button */}
|
{/* Submit Button */}
|
||||||
{!result && (
|
{!result && (
|
||||||
@@ -332,9 +310,8 @@ export const QuizPlayer = () => {
|
|||||||
|
|
||||||
{/* Result */}
|
{/* Result */}
|
||||||
{result && (
|
{result && (
|
||||||
<div className={`rounded-xl p-6 mb-6 ${
|
<div className={`rounded-xl p-6 mb-6 ${result.correct ? 'bg-green-50 border-2 border-green-200' : 'bg-red-50 border-2 border-red-200'
|
||||||
result.correct ? 'bg-green-50 border-2 border-green-200' : 'bg-red-50 border-2 border-red-200'
|
}`}>
|
||||||
}`}>
|
|
||||||
<div className="flex items-start gap-3 mb-4">
|
<div className="flex items-start gap-3 mb-4">
|
||||||
{result.correct ? (
|
{result.correct ? (
|
||||||
<Check className="h-6 w-6 text-green-600 mt-0.5" />
|
<Check className="h-6 w-6 text-green-600 mt-0.5" />
|
||||||
|
|||||||
@@ -74,7 +74,7 @@ export const getQuestionTypeText = (type) => {
|
|||||||
const texts = {
|
const texts = {
|
||||||
single: '单选题',
|
single: '单选题',
|
||||||
multiple: '多选题',
|
multiple: '多选题',
|
||||||
judge: '判断题',
|
judge: '判断题 (单选)',
|
||||||
short: '简答题'
|
short: '简答题'
|
||||||
}
|
}
|
||||||
return texts[type] || type
|
return texts[type] || type
|
||||||
|
|||||||
Reference in New Issue
Block a user