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

fix: keep preview in card flow

Browse Source
This commit is contained in:
ittoview
2026-05-11 09:56:02 +01:00
parent d986932e85
commit 2d8ee406f5
1 changed files with 13 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/pages/ProcessPurposePracticePage.tsx
View File

@@ -108,6 +108,12 @@ export default function ProcessPurposePracticePage() {
.map((id, index) => ({ item: itemMap.get(id), index }))
.filter((card): card is { item: NonNullable<typeof currentItem>; index: number } => Boolean(card.item))
const nextPreviewItem = itemMap.get(progress.order[progress.currentIndex + 1])
const deckCards = [
...visibleQuestionCards.map((card) => ({ ...card, isPreview: false })),
...(nextPreviewItem
? [{ item: nextPreviewItem, index: progress.currentIndex + 1, isPreview: true }]
: []),
]
const focusFirstEmptyInput = useCallback(() => {
setTimeout(() => {
@@ -229,7 +235,7 @@ export default function ProcessPurposePracticePage() {
const deckTop = deck.getBoundingClientRect().top
const cardTop = currentCard.getBoundingClientRect().top
const targetTop = Math.max(deck.scrollTop + cardTop - deckTop - 8, 0)
const targetTop = Math.max(deck.scrollTop + cardTop - deckTop - 12, 0)
deck.scrollTo({ top: targetTop, behavior: 'smooth' })
})
}, [progress.currentIndex])
@@ -476,7 +482,7 @@ export default function ProcessPurposePracticePage() {
className="min-h-0 flex-1 space-y-3 overflow-y-auto overscroll-contain pr-1 scroll-smooth"
>
<AnimatePresence initial={false}>
{visibleQuestionCards.map(({ item, index }) => {
{deckCards.map(({ item, index, isPreview }) => {
const isCurrent = index === progress.currentIndex
const isAnsweredHistory = index < progress.currentIndex
@@ -485,7 +491,7 @@ export default function ProcessPurposePracticePage() {
key={item.id}
initial={{ opacity: 0, y: 24, scale: 0.98 }}
animate={{
opacity: isCurrent ? 1 : 0.62,
opacity: isCurrent ? 1 : isPreview ? 0.52 : 0.62,
y: 0,
scale: isCurrent ? 1 : 0.975,
}}
@@ -497,7 +503,9 @@ export default function ProcessPurposePracticePage() {
? 'border-green-300 shadow-lg shadow-green-100/70 ring-2 ring-green-100 dark:border-green-700 dark:shadow-none dark:ring-green-900/40'
: isCurrent
? 'border-blue-200 shadow-xl shadow-blue-100/80 ring-2 ring-blue-100 dark:border-blue-800 dark:shadow-none dark:ring-blue-900/30'
: 'border-gray-100 shadow-sm dark:border-gray-800'
: isPreview
? 'pointer-events-none border-dashed border-gray-200 bg-white/60 shadow-sm blur-[0.4px] dark:border-gray-700 dark:bg-gray-800/50'
: 'border-gray-100 shadow-sm dark:border-gray-800'
}`}
>
<div className="mb-4 flex min-h-9 flex-wrap items-center justify-between gap-3">
@@ -538,7 +546,7 @@ export default function ProcessPurposePracticePage() {
<p
className={`leading-9 text-gray-900 dark:text-gray-100 ${
isCurrent ? 'text-xl' : 'text-base'
isCurrent ? 'text-xl' : isPreview ? 'line-clamp-2 select-none text-base text-gray-500 blur-[1.5px] dark:text-gray-400' : 'text-base'
}`}
>
{item.purpose}
@@ -549,22 +557,6 @@ export default function ProcessPurposePracticePage() {
</AnimatePresence>
</div>
{!isFinished && nextPreviewItem && (
<motion.section
key={nextPreviewItem.id}
initial={{ opacity: 0, y: 12 }}
animate={{ opacity: 0.58, y: 0 }}
transition={{ duration: 0.25 }}
className="pointer-events-none shrink-0 rounded-2xl border border-dashed border-gray-200 bg-white/60 p-4 shadow-sm blur-[0.4px] dark:border-gray-700 dark:bg-gray-800/50"
>
<div className="mb-3 inline-flex rounded-full bg-gray-100 px-3 py-1 text-sm font-medium text-gray-500 dark:bg-gray-700/70 dark:text-gray-300">
第 {progress.currentIndex + 2} / {totalCount} 题
</div>
<p className="line-clamp-2 select-none text-base leading-8 text-gray-500 blur-[1.5px] dark:text-gray-400">
{nextPreviewItem.purpose}
</p>
</motion.section>
)}
{isFinished && (
<section className="shrink-0 rounded-2xl border border-gray-200 bg-white p-10 text-center shadow-sm dark:border-gray-700 dark:bg-gray-800">