From 201ddf585716281d2a5531b005caca421927b1e1 Mon Sep 17 00:00:00 2001
From: yanlongqi <lqyan@jhinno.com>
Date: Wed, 5 Nov 2025 13:53:05 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=A1=AB=E7=A9=BA=E9=A2=98?=
 =?UTF-8?q?=E7=AD=94=E6=A1=88=E6=98=BE=E7=A4=BA=EF=BC=9A=E7=9B=B4=E6=8E=A5?=
 =?UTF-8?q?=E5=9C=A8=E6=A8=AA=E7=BA=BF=E4=BD=8D=E7=BD=AE=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=E7=AD=94=E6=A1=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

改进内容：
- 答案直接替换横线位置，不使用上方标签形式
- 答案文字显示为绿色加粗，带下划线突出显示
- 填空题不再显示底部答案区域，避免重复
- 视觉效果更简洁直观

样式调整：
- 答案颜色：#52c41a（绿色）
- 字体加粗：font-weight 600
- 底部边框：2px实线绿色下划线
- 最小宽度60px，文字居中对齐

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 web/src/pages/QuestionList.module.less | 13 ++++++----
 web/src/pages/QuestionList.tsx         | 35 +++++++++++++++-----------
 2 files changed, 28 insertions(+), 20 deletions(-)

diff --git a/web/src/pages/QuestionList.module.less b/web/src/pages/QuestionList.module.less
index 2880851..fe61904 100644
--- a/web/src/pages/QuestionList.module.less
+++ b/web/src/pages/QuestionList.module.less
@@ -74,13 +74,16 @@
   color: #262626;
 }
 
-.blank {
+.blankAnswer {
   display: inline-block;
-  border-bottom: 2px solid #1677ff;
-  min-width: 60px;
+  font-size: 15px;
+  font-weight: 600;
+  color: #52c41a;
+  border-bottom: 2px solid #52c41a;
+  padding: 0 4px 2px 4px;
   margin: 0 4px;
-  color: transparent;
-  user-select: none;
+  min-width: 60px;
+  text-align: center;
 }
 
 .options {
diff --git a/web/src/pages/QuestionList.tsx b/web/src/pages/QuestionList.tsx
index f9ea977..7b9d2b6 100644
--- a/web/src/pages/QuestionList.tsx
+++ b/web/src/pages/QuestionList.tsx
@@ -87,9 +87,9 @@ const QuestionList: React.FC = () => {
     setFilteredQuestions(filtered)
   }, [selectedType, searchKeyword, questions])
 
-  // 渲染填空题内容，将****替换为下划线
-  const renderFillInBlankContent = (content: string): React.ReactNode => {
-    // 将 **** 替换为下划线样式
+  // 渲染填空题内容，将****替换为答案（带下划线样式）
+  const renderFillInBlankContent = (content: string, answers: string[]): React.ReactNode => {
+    // 将 **** 替换为答案
     const parts = content.split('****')
     return (
       <>
@@ -97,7 +97,7 @@ const QuestionList: React.FC = () => {
           <React.Fragment key={index}>
             {part}
             {index < parts.length - 1 && (
-              <span className={styles.blank}>______</span>
+              <span className={styles.blankAnswer}>{answers[index] || '______'}</span>
             )}
           </React.Fragment>
         ))}
@@ -250,7 +250,10 @@ const QuestionList: React.FC = () => {
                 <div className={styles.questionContent}>
                   <Paragraph className={styles.contentText}>
                     {question.type === 'fill-in-blank'
-                      ? renderFillInBlankContent(question.content)
+                      ? renderFillInBlankContent(
+                          question.content,
+                          Array.isArray(question.answer) ? question.answer : []
+                        )
                       : question.content
                     }
                   </Paragraph>
@@ -259,16 +262,18 @@ const QuestionList: React.FC = () => {
                 {/* 选项 */}
                 {renderOptions(question)}
 
-                {/* 答案 */}
-                <div className={styles.answerSection}>
-                  <Space size="small">
-                    <CheckCircleOutlined style={{ color: '#52c41a' }} />
-                    <Text strong>正确答案：</Text>
-                  </Space>
-                  <Paragraph className={styles.answerText}>
-                    {formatAnswer(question)}
-                  </Paragraph>
-                </div>
+                {/* 答案 - 填空题不显示答案区域，因为答案已经在横线上方 */}
+                {question.type !== 'fill-in-blank' && (
+                  <div className={styles.answerSection}>
+                    <Space size="small">
+                      <CheckCircleOutlined style={{ color: '#52c41a' }} />
+                      <Text strong>正确答案：</Text>
+                    </Space>
+                    <Paragraph className={styles.answerText}>
+                      {formatAnswer(question)}
+                    </Paragraph>
+                  </div>
+                )}
               </Card>
             )
           }}