改为使用下划线字符填充而不是CSS样式

1. 将填空题从CSS边框样式改为传统的下划线字符(____)
2. 移除像素计算,使用纯文本下划线字符
3. 保持最少8个下划线字符的最小长度
4. 根据答案长度动态调整下划线数量

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
燕陇琪 2025-11-18 02:45:15 +08:00
parent 78413e98d7
commit 0464223d00

View File

@ -151,33 +151,33 @@ const ExamPrint: React.FC = () => {
? [String(question.answer)]
: []
// 计算下划线宽度,根据答案长度自动调整
const calculateUnderscoreWidth = (blankIndex: number, totalBlanks: number) => {
// 计算下划线字符数量
const calculateUnderscoreCount = (blankIndex: number, totalBlanks: number) => {
// 优先使用 answer_lengths 字段(在 show_answer=false 时也会返回)
if (question.answer_lengths && question.answer_lengths[blankIndex] !== undefined) {
const answerLength = question.answer_lengths[blankIndex]
// 每个字符对应约4px宽度最少8个字符=32px最多60px
return Math.max(Math.max(answerLength, 8) * 4, 32)
// 最少8个下划线字符
return Math.max(answerLength, 8)
}
// 如果有实际的答案数据,使用答案长度
if (answers[blankIndex]) {
const answerText = String(answers[blankIndex])
// 每个字符对应约4px宽度最少8个字符=32px
return Math.max(Math.max(answerText.length, 8) * 4, 32)
// 最少8个下划线字符
return Math.max(answerText.length, 8)
}
// 如果没有任何答案数据,使用默认策略
if (totalBlanks === 1) {
return 32 // 单个填空32px约8个字符
return 8 // 单个填空8个下划线字符
} else {
// 多个填空:30-40px循环约8-10个字符
const widths = [32, 36, 40, 34, 38]
return widths[blankIndex % widths.length]
// 多个填空:8-12个下划线字符循环
const counts = [8, 10, 12, 9, 11]
return counts[blankIndex % counts.length]
}
}
// 处理题目内容,将 **** 替换为下划线
// 处理题目内容,将 **** 替换为下划线字符
const renderQuestionContent = (content: string) => {
if (!content) return content
@ -187,11 +187,11 @@ const ExamPrint: React.FC = () => {
// 先计算出总共有多少个填空
const totalBlanks = (content.match(/\*{4,}/g) || []).length
// 将所有的 **** 替换为连续的下划线
// 将所有的 **** 替换为下划线字符
processedContent = processedContent.replace(/\*{4,}/g, () => {
const width = calculateUnderscoreWidth(blankIndex, totalBlanks)
const underscoreCount = calculateUnderscoreCount(blankIndex, totalBlanks)
blankIndex++
return `<span style="border-bottom: 1px solid #000; margin: 0 1px 1px 1px; display: inline-block; width: ${width}px; height: 0; vertical-align: text-bottom;"></span>`
return '_'.repeat(underscoreCount)
})
return processedContent