shiyue/ittoview
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: stabilize answer option highlights

Browse Source
This commit is contained in:
ittoview
2026-05-13 19:12:06 +01:00
parent 77183cb340
commit ea2413cb24
1 changed files with 17 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/pages/PerformanceDomainPracticePage.tsx
View File

@@ -339,14 +339,14 @@ export default function PerformanceDomainPracticePage() {
onClick={() => handleSelect(domain.id)} onClick={() => handleSelect(domain.id)}
disabled={optionDisabled} disabled={optionDisabled}
className={clsx( className={clsx(
'relative flex min-h-[128px] flex-col gap-3 rounded-xl border bg-white p-3 text-left shadow-sm transition-colors dark:bg-gray-800', 'relative flex h-[128px] flex-col gap-3 overflow-hidden rounded-xl border bg-white p-3 text-left shadow-sm transition-colors dark:bg-gray-800',
'border-gray-100 hover:border-indigo-200 hover:bg-indigo-50/40 dark:border-gray-700 dark:hover:border-indigo-700 dark:hover:bg-indigo-950/20', 'border-gray-100 hover:border-indigo-200 hover:bg-indigo-50/40 dark:border-gray-700 dark:hover:border-indigo-700 dark:hover:bg-indigo-950/20',
optionDisabled && 'cursor-default hover:bg-white dark:hover:bg-gray-800', optionDisabled && 'cursor-default hover:bg-white dark:hover:bg-gray-800',
currentKindDone && !isAnswerShown && 'bg-gray-50 opacity-55 dark:bg-gray-800/70', currentKindDone && !isAnswerShown && 'bg-gray-50 opacity-55 dark:bg-gray-800/70',
shouldHighlightCorrect && shouldHighlightCorrect &&
'border-emerald-400 bg-emerald-50 shadow-[inset_0_0_0_2px_rgba(52,211,153,0.65)] dark:border-emerald-500 dark:bg-emerald-950/30 dark:shadow-[inset_0_0_0_2px_rgba(16,185,129,0.45)]', 'border-emerald-400 bg-emerald-50 dark:border-emerald-500 dark:bg-emerald-950/30',
isWrongSelected && isWrongSelected &&
'border-rose-300 bg-rose-50 shadow-[inset_0_0_0_2px_rgba(251,113,133,0.65)] dark:border-rose-600 dark:bg-rose-950/30 dark:shadow-[inset_0_0_0_2px_rgba(244,63,94,0.45)]' 'border-rose-300 bg-rose-50 dark:border-rose-600 dark:bg-rose-950/30'
)} )}
> >
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
@@ -395,17 +395,19 @@ export default function PerformanceDomainPracticePage() {
})} })}
</div> </div>
{isCorrectSelected && ( <div className="pointer-events-none absolute right-3 top-3 flex h-5 w-12 items-center justify-end">
<CheckCircle2 className="absolute right-3 top-3 text-emerald-500" size={18} /> {isCorrectSelected && (
)} <CheckCircle2 className="text-emerald-500" size={18} />
{isWrongSelected && ( )}
<XCircle className="absolute right-3 top-3 text-rose-500" size={18} /> {isWrongSelected && (
)} <XCircle className="text-rose-500" size={18} />
{shouldHighlightCorrect && !isCorrectSelected && ( )}
<span className="absolute right-3 top-3 rounded-full bg-emerald-100 px-2 py-0.5 text-xs font-medium text-emerald-700 dark:bg-emerald-900/50 dark:text-emerald-300"> {shouldHighlightCorrect && !isCorrectSelected && (
正确 <span className="rounded-full bg-emerald-100 px-2 py-0.5 text-xs font-medium text-emerald-700 dark:bg-emerald-900/50 dark:text-emerald-300">
</span> 正确
)} </span>
)}
</div>
</motion.button> </motion.button>
) )
} }
@@ -553,7 +555,7 @@ export default function PerformanceDomainPracticePage() {
<div <div
className={clsx( className={clsx(
'min-h-[104px] rounded-xl border px-4 py-3 transition-colors', 'h-[132px] overflow-hidden rounded-xl border px-4 py-3 transition-colors',
answerState?.isCorrect answerState?.isCorrect
? 'border-emerald-200 bg-emerald-50 dark:border-emerald-800 dark:bg-emerald-950/30' ? 'border-emerald-200 bg-emerald-50 dark:border-emerald-800 dark:bg-emerald-950/30'
: answerState : answerState