From f7c662d9ac04f01ab2e2b493a6fe936f95416f45 Mon Sep 17 00:00:00 2001
From: yanlongqi <lqyan@jhinno.com>
Date: Mon, 10 Nov 2025 13:27:57 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E5=A1=AB=E7=A9=BA?=
 =?UTF-8?q?=E9=A2=98=E6=98=BE=E7=A4=BA=EF=BC=8C=E5=B0=86=20****=20?=
 =?UTF-8?q?=E6=B8=B2=E6=9F=93=E4=B8=BA=E4=B8=8B=E5=88=92=E7=BA=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 题库管理：填空题题目内容中的 **** 显示为带下划线的正确答案
- 答题抽屉：填空题题目内容中的 **** 显示为下划线占位符
- 提升填空题的可读性和用户体验

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 web/src/components/QuestionDrawer.tsx | 32 ++++++++++++++++++++-
 web/src/pages/QuestionManagement.tsx  | 41 +++++++++++++++++++++++++++
 2 files changed, 72 insertions(+), 1 deletion(-)

diff --git a/web/src/components/QuestionDrawer.tsx b/web/src/components/QuestionDrawer.tsx
index f2a605a..8c5ecbc 100644
--- a/web/src/components/QuestionDrawer.tsx
+++ b/web/src/components/QuestionDrawer.tsx
@@ -40,6 +40,36 @@ const QuestionDrawer: React.FC<QuestionDrawerProps> = ({
     return { icon: <CloseCircleOutlined />, color: '#ff4d4f', text: '错误' }
   }
 
+  // 渲染填空题内容：将 **** 替换为下划线
+  const renderQuestionContent = (question: Question) => {
+    if (question.type === 'fill-in-blank') {
+      const parts = question.content.split('****')
+      return (
+        <span>
+          {parts.map((part, index) => (
+            <React.Fragment key={index}>
+              {part}
+              {index < parts.length - 1 && (
+                <span
+                  style={{
+                    display: 'inline-block',
+                    minWidth: '40px',
+                    borderBottom: '2px solid #d9d9d9',
+                    margin: '0 4px',
+                    textAlign: 'center',
+                  }}
+                >
+                  &nbsp;&nbsp;&nbsp;&nbsp;
+                </span>
+              )}
+            </React.Fragment>
+          ))}
+        </span>
+      )
+    }
+    return question.content
+  }
+
   return (
     <Drawer
       title={
@@ -86,7 +116,7 @@ const QuestionDrawer: React.FC<QuestionDrawerProps> = ({
                 {/* 题目内容 */}
                 <div className={styles.questionContent}>
                   <Text ellipsis={{ tooltip: question.content }} style={{ fontSize: 14, color: '#262626' }}>
-                    {question.content}
+                    {renderQuestionContent(question)}
                   </Text>
                 </div>
 
diff --git a/web/src/pages/QuestionManagement.tsx b/web/src/pages/QuestionManagement.tsx
index 4149fc5..9b9c1ab 100644
--- a/web/src/pages/QuestionManagement.tsx
+++ b/web/src/pages/QuestionManagement.tsx
@@ -211,6 +211,40 @@ const QuestionManagement: React.FC = () => {
     }
   }
 
+  // 渲染填空题题目内容：将 **** 替换为带下划线的正确答案
+  const renderFillInBlankContent = (content: string, answer: string[] | any): React.ReactNode => {
+    // 确保答案是数组
+    const answers: string[] = Array.isArray(answer) ? answer : []
+
+    if (answers.length === 0) {
+      return content
+    }
+
+    // 找到所有的 **** 并替换为对应的答案
+    let answerIndex = 0
+    const parts = content.split('****')
+
+    return (
+      <span>
+        {parts.map((part, index) => (
+          <React.Fragment key={index}>
+            {part}
+            {index < parts.length - 1 && (
+              <span style={{
+                textDecoration: 'underline',
+                color: '#1890ff',
+                fontWeight: 500,
+                padding: '0 4px'
+              }}>
+                {answers[answerIndex++] || '____'}
+              </span>
+            )}
+          </React.Fragment>
+        ))}
+      </span>
+    )
+  }
+
   // 表格列定义
   const columns = [
     {
@@ -243,6 +277,13 @@ const QuestionManagement: React.FC = () => {
       dataIndex: 'content',
       key: 'content',
       ellipsis: true,
+      render: (content: string, record: Question) => {
+        // 如果是填空题，使用特殊渲染
+        if (record.type === 'fill-in-blank') {
+          return renderFillInBlankContent(content, record.answer)
+        }
+        return content
+      },
     },
     {
       title: '操作',