fix: keep preview in card flow

src/pages/ProcessPurposePracticePage.tsx

@@ -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">