基本功能完成，下一步开始美化UI

src/pages/QuizPage.tsx

@@ -4,6 +4,7 @@ import { useNavigate, useLocation } from 'react-router-dom';
 import { useUser, useQuiz } from '../contexts';
 import { quizAPI } from '../services/api';
 import { questionTypeMap } from '../utils/validation';
+import { UserLayout } from '../layouts/UserLayout';
 
 const { TextArea } = Input;
 
@@ -204,7 +205,7 @@ const QuizPage = () => {
             className="w-full"
           >
             {question.options?.map((option, index) => (
-              <Radio key={index} value={option} className="block mb-3 p-3 rounded-lg border border-gray-200 hover:bg-gray-50 transition-colors">
+              <Radio key={index} value={option} className="block mb-3 p-4 rounded-lg border border-gray-200 hover:bg-gray-50 hover:border-mars-200 transition-colors">
                 {String.fromCharCode(65 + index)}. {option}
               </Radio>
             ))}
@@ -219,7 +220,7 @@ const QuizPage = () => {
             className="w-full"
           >
             {question.options?.map((option, index) => (
-              <Checkbox key={index} value={option} className="block mb-3 p-3 rounded-lg border border-gray-200 hover:bg-gray-50 transition-colors w-full">
+              <Checkbox key={index} value={option} className="block mb-3 p-4 rounded-lg border border-gray-200 hover:bg-gray-50 hover:border-mars-200 transition-colors w-full">
                 {String.fromCharCode(65 + index)}. {option}
               </Checkbox>
             ))}
@@ -233,10 +234,10 @@ const QuizPage = () => {
             onChange={(e) => handleAnswerChange(question.id, e.target.value)}
             className="w-full"
           >
-            <Radio value="正确" className="block mb-3 p-3 rounded-lg border border-gray-200 hover:bg-gray-50 transition-colors">
+            <Radio value="正确" className="block mb-3 p-4 rounded-lg border border-gray-200 hover:bg-gray-50 hover:border-mars-200 transition-colors">
               正确
             </Radio>
-            <Radio value="错误" className="block mb-3 p-3 rounded-lg border border-gray-200 hover:bg-gray-50 transition-colors">
+            <Radio value="错误" className="block mb-3 p-4 rounded-lg border border-gray-200 hover:bg-gray-50 hover:border-mars-200 transition-colors">
               错误
             </Radio>
           </Radio.Group>
@@ -249,7 +250,7 @@ const QuizPage = () => {
             value={currentAnswer as string || ''}
             onChange={(e) => handleAnswerChange(question.id, e.target.value)}
             placeholder="请输入您的答案..."
-            className="rounded-lg border-gray-300 focus:border-blue-500 focus:ring-blue-500"
+            className="rounded-lg border-gray-300 focus:border-mars-500 focus:ring-mars-500"
           />
         );
 
@@ -260,12 +261,14 @@ const QuizPage = () => {
 
   if (loading || !questions.length) {
     return (
-      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
-        <div className="text-center">
-          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
-          <p className="text-gray-600">正在生成试卷...</p>
+      <UserLayout>
+        <div className="flex items-center justify-center h-full min-h-[500px]">
+          <div className="text-center">
+            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-mars-600 mx-auto mb-4"></div>
+            <p className="text-gray-600">正在生成试卷...</p>
+          </div>
         </div>
-      </div>
+      </UserLayout>
     );
   }
 
@@ -273,22 +276,22 @@ const QuizPage = () => {
   const progress = ((currentQuestionIndex + 1) / questions.length) * 100;
 
   return (
-    <div className="min-h-screen bg-gray-50 py-8">
-      <div className="max-w-4xl mx-auto px-4">
+    <UserLayout>
+      <div className="max-w-4xl mx-auto">
         {/* 头部信息 */}
-        <div className="bg-white rounded-lg shadow-sm p-6 mb-6">
-          <div className="flex justify-between items-center">
+        <div className="bg-white rounded-xl shadow-sm p-6 mb-6 border border-gray-100">
+          <div className="flex justify-between items-center mb-4">
             <div>
               <h1 className="text-2xl font-bold text-gray-900">在线答题</h1>
-              <p className="text-gray-600 mt-1">
+              <p className="text-gray-500 mt-1">
                 第 {currentQuestionIndex + 1} 题 / 共 {questions.length} 题
               </p>
             </div>
             {timeLeft !== null && (
               <div className="text-right">
-                <div className="text-sm text-gray-600">剩余时间</div>
-                <div className={`text-2xl font-bold ${
-                  timeLeft < 300 ? 'text-red-600' : 'text-green-600'
+                <div className="text-sm text-gray-500">剩余时间</div>
+                <div className={`text-2xl font-bold tabular-nums ${
+                  timeLeft < 300 ? 'text-red-600' : 'text-mars-600'
                 }`}>
                   {formatTime(timeLeft)}
                 </div>
@@ -298,31 +301,32 @@ const QuizPage = () => {
           
           <Progress
             percent={Math.round(progress)}
-            strokeColor="#3b82f6"
+            strokeColor="#008C8C"
+            trailColor="#f0fcfc"
             showInfo={false}
-            className="mt-4"
+            className="mt-2"
           />
         </div>
 
         {/* 题目卡片 */}
-        <Card className="shadow-sm">
-          <div className="mb-6">
+        <Card className="shadow-sm border border-gray-100 rounded-xl">
+          <div className="mb-8">
             <div className="flex items-center justify-between mb-4">
               <span className={`inline-block px-3 py-1 rounded-full text-sm font-medium ${getTagColor(currentQuestion.type)}`}>
                 {questionTypeMap[currentQuestion.type]}
               </span>
-              <span className="text-sm text-gray-600">
+              <span className="text-sm text-gray-500 font-medium">
                 {currentQuestion.score} 分
               </span>
             </div>
             {currentQuestion.category && (
               <div className="mb-3">
-                <span className="inline-block px-2 py-1 bg-gray-100 text-gray-700 text-xs rounded">
+                <span className="inline-block px-2 py-1 bg-gray-50 text-gray-500 text-xs rounded border border-gray-100">
                   {currentQuestion.category}
                 </span>
               </div>
             )}
-            <h2 className="text-lg font-medium text-gray-900 leading-relaxed">
+            <h2 className="text-xl font-medium text-gray-800 leading-relaxed">
               {currentQuestion.content}
             </h2>
           </div>
@@ -332,11 +336,12 @@ const QuizPage = () => {
           </div>
 
           {/* 操作按钮 */}
-          <div className="flex justify-between items-center">
+          <div className="flex justify-between items-center pt-6 border-t border-gray-100">
             <Button
               onClick={handlePrevious}
               disabled={currentQuestionIndex === 0}
-              className="px-6"
+              size="large"
+              className="px-6 h-10 hover:border-mars-500 hover:text-mars-500"
             >
               上一题
             </Button>
@@ -347,7 +352,8 @@ const QuizPage = () => {
                   type="primary"
                   onClick={() => handleSubmit()}
                   loading={submitting}
-                  className="px-8 bg-blue-600 hover:bg-blue-700 border-none"
+                  size="large"
+                  className="px-8 h-10 bg-mars-600 hover:bg-mars-700 border-none shadow-md"
                 >
                   提交答案
                 </Button>
@@ -355,7 +361,8 @@ const QuizPage = () => {
                 <Button
                   type="primary"
                   onClick={handleNext}
-                  className="px-8 bg-blue-600 hover:bg-blue-700 border-none"
+                  size="large"
+                  className="px-8 h-10 bg-mars-500 hover:bg-mars-600 border-none shadow-md"
                 >
                   下一题
                 </Button>
@@ -364,8 +371,8 @@ const QuizPage = () => {
           </div>
         </Card>
       </div>
-    </div>
+    </UserLayout>
   );
 };
 
-export default QuizPage;
+export default QuizPage;