问题列表选项的优化

web/src/pages/QuestionList.module.less

@@ -2,13 +2,14 @@
   min-height: 100vh;
   background-color: #f5f5f5;
   padding: 16px;
+  padding-bottom: 24px;
 }
 
 .header {
   display: flex;
   align-items: center;
   gap: 12px;
-  margin-bottom: 16px;
+  margin-bottom: 12px;
 }
 
 .backButton {
@@ -21,7 +22,13 @@
 }
 
 .filterCard {
-  margin-bottom: 16px;
+  margin-bottom: 12px;
+
+  :global {
+    .ant-card-body {
+      padding: 12px 16px;
+    }
+  }
 }
 
 .searchInput {
@@ -29,9 +36,13 @@
 }
 
 .tabsCard {
-  margin-bottom: 16px;
+  margin-bottom: 12px;
 
   :global {
+    .ant-card-body {
+      padding: 12px 16px 16px 16px;
+    }
+
     .ant-tabs-nav {
       margin-bottom: 0;
     }
@@ -39,20 +50,27 @@
 }
 
 .questionCard {
-  margin-bottom: 16px;
+  margin-bottom: 8px;
   border-radius: 8px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  transition: all 0.2s ease;
 
   &:hover {
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   }
+
+  :global {
+    .ant-card-body {
+      padding: 16px;
+    }
+  }
 }
 
 .questionHeader {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 12px;
+  margin-bottom: 10px;
 }
 
 .questionId {
@@ -64,14 +82,40 @@
 }
 
 .questionContent {
-  margin-bottom: 16px;
+  margin-bottom: 8px;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 12px;
 }
 
 .contentText {
   font-size: 15px;
   line-height: 1.6;
-  margin: 0;
+  margin: 0 !important;
+  margin-bottom: 0 !important;
   color: #262626;
+  flex: 1;
+
+  :global(.ant-typography) {
+    margin-bottom: 0 !important;
+  }
+}
+
+.trueFalseAnswer {
+  display: flex;
+  align-items: flex-start;
+  padding-top: 4px;
+}
+
+.trueFalseTag {
+  font-size: 14px;
+  padding: 4px 12px;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-weight: 500;
 }
 
 .blankAnswer {
@@ -89,33 +133,61 @@
 .options {
   background-color: #fafafa;
   border-radius: 6px;
-  padding: 12px;
+  padding: 10px 12px;
-  margin-bottom: 16px;
+  margin-bottom: 12px;
 }
 
 .option {
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   gap: 8px;
-  padding: 6px 0;
+  padding: 8px 0;
 
   &:not(:last-child) {
+    padding-bottom: 8px;
+    margin-bottom: 8px;
     border-bottom: 1px solid #f0f0f0;
   }
 }
 
+.correctOption {
+  background-color: #f6ffed;
+  padding: 8px;
+  margin: 0 -12px;
+  padding-left: 11px;  // 精确补偿：12(容器) - 12(margin) + 1(border) + 11 = 12px，与普通选项对齐
+  padding-right: 12px;
+  border-radius: 4px;
+  border: 1px solid #b7eb8f;
+  border-bottom: 1px solid #b7eb8f !important;
+
+  &:not(:last-child) {
+    // 保持与父元素的 border-bottom 和 margin-bottom
+  }
+}
+
+.correctTag {
+  margin-left: auto;
+  font-weight: 500;
+}
+
 .answerSection {
   background-color: #f6ffed;
   border: 1px solid #b7eb8f;
   border-radius: 6px;
-  padding: 12px;
+  padding: 10px 12px;
 }
 
 .answerText {
-  margin: 8px 0 0 0;
+  margin: 6px 0 0 0 !important;
+  margin-bottom: 0 !important;
   font-size: 14px;
   color: #262626;
   white-space: pre-wrap;
+  line-height: 1.5;
+
+  :global(.ant-typography) {
+    margin-bottom: 0 !important;
+  }
 }
 
 // 悬浮按钮组样式美化
@@ -169,19 +241,83 @@
 /* 响应式设计 */
 @media (max-width: 768px) {
   .container {
-    padding: 12px;
+    padding: 10px;
+    padding-bottom: 20px;
+  }
+
+  .header {
+    margin-bottom: 10px;
+  }
+
+  .filterCard {
+    margin-bottom: 10px;
+
+    :global {
+      .ant-card-body {
+        padding: 10px 12px;
+      }
+    }
+  }
+
+  .tabsCard {
+    margin-bottom: 10px;
+
+    :global {
+      .ant-card-body {
+        padding: 10px 12px 12px 12px;
+      }
+    }
+  }
+
+  .questionCard {
+    margin-bottom: 8px;
+
+    :global {
+      .ant-card-body {
+        padding: 12px;
+      }
+    }
   }
 
   .questionHeader {
     flex-direction: column;
     align-items: flex-start;
-    gap: 8px;
+    gap: 6px;
+    margin-bottom: 8px;
   }
 
   .questionNumber {
     align-self: flex-end;
   }
 
+  .questionContent {
+    flex-direction: column;
+    gap: 8px;
+    margin-bottom: 8px;
+  }
+
+  .trueFalseAnswer {
+    align-self: flex-end;
+  }
+
+  .options {
+    padding: 8px 10px;
+    margin-bottom: 10px;
+  }
+
+  .option {
+    padding: 6px 0;
+  }
+
+  .correctOption {
+    margin: 0 -10px;  // 匹配移动端容器的padding
+    padding-left: 9px;  // 精确补偿：10(容器) - 10(margin) + 1(border) + 9 = 10px
+  }
+
+  .answerSection {
+    padding: 8px 10px;
+  }
+
   // 移动端悬浮按钮适配
   :global {
     .ant-float-btn-group {

web/src/pages/QuestionList.tsx

@@ -149,7 +149,7 @@ const QuestionList: React.FC = () => {
     }
   }
 
-  // 渲染选项
+  // 渲染选项（选择题和多选题）
   const renderOptions = (question: Question) => {
     // 判断题不显示选项
     if (question.type === 'true-false') {
@@ -160,14 +160,33 @@ const QuestionList: React.FC = () => {
       return null
     }
 
+    // 判断选项是否为正确答案
+    const isCorrectOption = (key: string): boolean => {
+      if (question.type === 'multiple-selection' && Array.isArray(question.answer)) {
+        return question.answer.includes(key)
+      }
+      return question.answer === key
+    }
+
     return (
       <div className={styles.options}>
-        {question.options.map(opt => (
+        {question.options.map(opt => {
-          <div key={opt.key} className={styles.option}>
+          const isCorrect = isCorrectOption(opt.key)
-            <Tag color="blue">{opt.key}</Tag>
+          return (
-            <Text>{opt.value}</Text>
+            <div
-          </div>
+              key={opt.key}
-        ))}
+              className={`${styles.option} ${isCorrect ? styles.correctOption : ''}`}
+            >
+              <Tag color={isCorrect ? 'success' : 'blue'}>{opt.key}</Tag>
+              <Text>{opt.value}</Text>
+              {isCorrect && (
+                <Tag color="success" className={styles.correctTag}>
+                  <CheckCircleOutlined /> 正确答案
+                </Tag>
+              )}
+            </div>
+          )
+        })}
       </div>
     )
   }
@@ -293,17 +312,34 @@ const QuestionList: React.FC = () => {
                       : question.content
                     }
                   </Paragraph>
+
+                  {/* 判断题：在题目右侧显示答案标签 */}
+                  {question.type === 'true-false' && (
+                    <div className={styles.trueFalseAnswer}>
+                      <Tag
+                        color={question.answer === true ? 'success' : 'error'}
+                        className={styles.trueFalseTag}
+                      >
+                        <CheckCircleOutlined /> {question.answer === true ? '正确' : '错误'}
+                      </Tag>
+                    </div>
+                  )}
                 </div>
 
                 {/* 选项 */}
                 {renderOptions(question)}
 
-                {/* 答案 - 填空题不显示答案区域，因为答案已经在横线上方 */}
+                {/* 答案区域 */}
-                {question.type !== 'fill-in-blank' && (
+                {/* 填空题：答案已经在横线上方，不需要显示 */}
+                {/* 选择题和多选题：答案已经标注在选项上，不需要显示 */}
+                {/* 判断题：答案已经在题目右侧，不需要显示 */}
+                {/* 论述题：不展示答案 */}
+                {/* 简答题：需要显示答案 */}
+                {question.type === 'short-answer' && (
                   <div className={styles.answerSection}>
                     <Space size="small">
                       <CheckCircleOutlined style={{ color: '#52c41a' }} />
-                      <Text strong>正确答案：</Text>
+                      <Text strong>参考答案：</Text>
                     </Space>
                     <Paragraph className={styles.answerText}>
                       {formatAnswer(question)}