feat(练习): 添加 Ctrl+H 快捷键显示答案

- ProcessPracticePage: 按住 Ctrl+H 显示答案,松开隐藏
- ProcessDetailPage: 按住 Ctrl+H 显示答案,松开隐藏
- 解决手在键盘上时不方便点击屏幕查看答案的问题

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

Co-Authored-By: HAPI <noreply@hapi.run>
This commit is contained in:
ittoview
2026-03-09 14:16:48 +00:00
parent bece501657
commit a7229e40f0
2 changed files with 61 additions and 0 deletions

View File

@@ -177,6 +177,39 @@ export function ProcessDetailPage() {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [id])
// Ctrl+H 快捷键显示/隐藏答案
useEffect(() => {
if (!isPracticeMode) return
const handleKeyDown = (e: KeyboardEvent) => {
if (e.ctrlKey && e.key === 'h') {
e.preventDefault()
if (!showAnswer) {
setShowAnswer(true)
setInputLocked(true)
}
}
}
const handleKeyUp = (e: KeyboardEvent) => {
if (e.key === 'Control' || e.key === 'h') {
if (showAnswer) {
setShowAnswer(false)
setInputLocked(false)
}
}
}
window.addEventListener('keydown', handleKeyDown)
window.addEventListener('keyup', handleKeyUp)
return () => {
window.removeEventListener('keydown', handleKeyDown)
window.removeEventListener('keyup', handleKeyUp)
}
}, [isPracticeMode, showAnswer])
// ── 验证逻辑 ──────────────────────────────────────────────────────────────
const validateInput = useCallback(
(input: string[]) => {

View File

@@ -319,6 +319,34 @@ export default function ProcessPracticePage() {
return () => clearTimeout(timer)
}, [showAnswerForCell, restoreFocus])
// Ctrl+H 快捷键显示/隐藏答案
useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => {
if (e.ctrlKey && e.key === 'h') {
e.preventDefault()
if (currentCellId && !showAnswerForCell) {
handleLongPress(currentCellId)
}
}
}
const handleKeyUp = (e: KeyboardEvent) => {
if (e.key === 'Control' || e.key === 'h') {
if (showAnswerForCell) {
handleLongPressEnd()
}
}
}
window.addEventListener('keydown', handleKeyDown)
window.addEventListener('keyup', handleKeyUp)
return () => {
window.removeEventListener('keydown', handleKeyDown)
window.removeEventListener('keyup', handleKeyUp)
}
}, [currentCellId, showAnswerForCell, handleLongPress, handleLongPressEnd])
// 点击格子切换(允许回顾已答对的格子)
const handleCellClick = useCallback(
(cellId: string) => {