优化填空题答案显示:直接在横线位置显示答案

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

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

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
yanlongqi 2025-11-05 13:53:05 +08:00
parent f2b5e623b0
commit 201ddf5857
2 changed files with 28 additions and 20 deletions

View File

@ -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 {

View File

@ -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,7 +262,8 @@ const QuestionList: React.FC = () => {
{/* 选项 */}
{renderOptions(question)}
{/* 答案 */}
{/* 答案 - 填空题不显示答案区域,因为答案已经在横线上方 */}
{question.type !== 'fill-in-blank' && (
<div className={styles.answerSection}>
<Space size="small">
<CheckCircleOutlined style={{ color: '#52c41a' }} />
@ -269,6 +273,7 @@ const QuestionList: React.FC = () => {
{formatAnswer(question)}
</Paragraph>
</div>
)}
</Card>
)
}}