feat: 优化填空题显示,将 **** 渲染为下划线
- 题库管理:填空题题目内容中的 **** 显示为带下划线的正确答案 - 答题抽屉:填空题题目内容中的 **** 显示为下划线占位符 - 提升填空题的可读性和用户体验 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
53d3ebe318
commit
f7c662d9ac
@ -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',
|
||||
}}
|
||||
>
|
||||
|
||||
</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>
|
||||
|
||||
|
||||
@ -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: '操作',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user