fix(练习): 修复答案隐藏后焦点恢复逻辑

feat(知识领域): 添加敏捷裁剪因素数据

- 修复答案隐藏后聚焦到第一个空输入框而非第一个输入框
- 添加 restoreFocus 辅助函数统一处理焦点恢复
- 更新知识领域裁剪因素数据

via [HAPI](https://hapi.run)

Co-Authored-By: HAPI <noreply@hapi.run>
This commit is contained in:
ittoview
2026-03-01 16:57:16 +00:00
parent 8f96865ebf
commit 713c11b382
2 changed files with 45 additions and 27 deletions

View File

@@ -90,6 +90,23 @@ export default function ProcessPracticePage() {
}
}, [answeredCells, currentCellId])
// 恢复焦点到第一个空输入框
const restoreFocus = useCallback(() => {
setTimeout(() => {
const inputs = document.querySelectorAll('.practice-input-area input')
const firstEmptyInput = Array.from(inputs).find(
(input) => !(input as HTMLInputElement).value
) as HTMLInputElement
if (firstEmptyInput) {
firstEmptyInput.focus()
} else {
// 如果所有输入框都有值,聚焦到第一个
(inputs[0] as HTMLInputElement)?.focus()
}
}, 100)
}, [])
// 切换到指定格子
const switchToCell = useCallback(
(cell: CellInfo) => {
@@ -251,16 +268,9 @@ export default function ProcessPracticePage() {
setShowAnswerForCell(null)
setInputLocked(false)
announceToScreenReader('答案已隐藏')
// 恢复焦点到第一个输入框
setTimeout(() => {
const firstInput = document.querySelector(
'.practice-input-area input'
) as HTMLInputElement
firstInput?.focus()
}, 100)
restoreFocus()
}
}, [showAnswerForCell])
}, [showAnswerForCell, restoreFocus])
// 自动过期检查
useEffect(() => {
@@ -270,14 +280,7 @@ export default function ProcessPracticePage() {
if (remainingTime <= 0) {
setShowAnswerForCell(null)
setInputLocked(false)
// 恢复焦点
setTimeout(() => {
const firstInput = document.querySelector(
'.practice-input-area input'
) as HTMLInputElement
firstInput?.focus()
}, 100)
restoreFocus()
return
}
@@ -285,18 +288,11 @@ export default function ProcessPracticePage() {
setShowAnswerForCell(null)
setInputLocked(false)
announceToScreenReader('答案已自动隐藏')
// 恢复焦点
setTimeout(() => {
const firstInput = document.querySelector(
'.practice-input-area input'
) as HTMLInputElement
firstInput?.focus()
}, 100)
restoreFocus()
}, remainingTime)
return () => clearTimeout(timer)
}, [showAnswerForCell])
}, [showAnswerForCell, restoreFocus])
// 点击格子切换(允许回顾已答对的格子)
const handleCellClick = useCallback(