fix(过程详情): 修复练习模式输入框无法输入及查看答案问题
- 切换练习项后延迟聚焦第一个输入框,修复横线不能输入问题 - 查看答案改为点击图标按钮,3秒后自动隐藏,参照process-practice实现 via [HAPI](https://hapi.run) Co-Authored-By: HAPI <noreply@hapi.run>
This commit is contained in:
@@ -124,7 +124,7 @@ export function ProcessDetailPage() {
|
||||
return () => { clearLongPressTimer(); clearAutoAdvanceTimer() }
|
||||
}, [clearLongPressTimer, clearAutoAdvanceTimer])
|
||||
|
||||
// 切换到某个练习项时重置输入状态
|
||||
// 切换到某个练习项时重置输入状态,并聚焦第一个输入框
|
||||
useEffect(() => {
|
||||
if (!isPracticeMode || !currentPracticeItem) return
|
||||
setUserInput(new Array(currentPracticeItem.name.length).fill(''))
|
||||
@@ -132,6 +132,13 @@ export function ProcessDetailPage() {
|
||||
setLastErrorTimestamp(null)
|
||||
setShowAnswer(false)
|
||||
setInputLocked(false)
|
||||
// 延迟聚焦,等 DOM 更新后再聚焦第一个输入框
|
||||
setTimeout(() => {
|
||||
const firstInput = document.querySelector(
|
||||
'.practice-input-area input'
|
||||
) as HTMLInputElement
|
||||
firstInput?.focus()
|
||||
}, 150)
|
||||
}, [isPracticeMode, currentPracticeItem])
|
||||
|
||||
useEffect(() => { latestInputRef.current = userInput }, [userInput])
|
||||
@@ -643,13 +650,23 @@ export function ProcessDetailPage() {
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onPointerDown={(e) => { e.preventDefault(); handleLongPressStart() }}
|
||||
onPointerUp={handleLongPressEnd}
|
||||
onPointerLeave={handleLongPressEnd}
|
||||
onPointerCancel={handleLongPressEnd}
|
||||
className="shrink-0 px-3 py-2 rounded-lg text-xs font-medium text-gray-500 dark:text-gray-400 border border-gray-200 dark:border-gray-600 hover:border-indigo-400 hover:text-indigo-600 dark:hover:text-indigo-300 transition-colors select-none"
|
||||
onClick={() => {
|
||||
setShowAnswer(true)
|
||||
setInputLocked(true)
|
||||
// 3秒后自动隐藏
|
||||
setTimeout(() => {
|
||||
setShowAnswer(false)
|
||||
setInputLocked(false)
|
||||
const firstInput = document.querySelector('.practice-input-area input') as HTMLInputElement
|
||||
firstInput?.focus()
|
||||
}, 3000)
|
||||
}}
|
||||
title="查看答案"
|
||||
className="shrink-0 p-2 text-gray-500 dark:text-gray-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors"
|
||||
>
|
||||
按住看答案
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user