feat: 實現FlipMemoryTest動態高度自適應

- 移除固定600px高度限制，改為根據背面內容動態計算 - 新增useEffect監聽內容變化並自動調整卡片高度 - 實現響應式設計，不同屏幕尺寸有對應的最小高度 - 移除背面滾動條，改為完全展示所有內容 - 優化CSS動畫過渡效果，提升翻卡體驗 - 新增底部留白避免內容貼邊 - 清理舊的備份測試文件 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-09-27 21:57:47 +08:00 · 2025-09-27 21:57:47 +08:00 · ceaf61c89b
parent a1cf784805
commit ceaf61c89b
6 changed files with 65 additions and 171 deletions
--- a/frontend/components/review/review-tests/FlipMemoryTest.tsx
+++ b/frontend/components/review/review-tests/FlipMemoryTest.tsx
@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useState, useRef, useEffect } from 'react'
 import AudioPlayer from '@/components/AudioPlayer'

 interface FlipMemoryTestProps {
@ -28,6 +28,34 @@ export const FlipMemoryTest: React.FC<FlipMemoryTestProps> = ({
 }) => {
  const [isFlipped, setIsFlipped] = useState(false)
  const [selectedConfidence, setSelectedConfidence] = useState<number | null>(null)
+  const [cardHeight, setCardHeight] = useState<number>(400)
+  const frontRef = useRef<HTMLDivElement>(null)
+  const backRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const updateCardHeight = () => {
+      if (backRef.current) {
+        const backHeight = backRef.current.scrollHeight
+
+        // 響應式最小高度設定
+        const minHeightByScreen = window.innerWidth <= 480 ? 300 :
+                                  window.innerWidth <= 768 ? 350 : 400
+
+        // 以背面內容高度為準，不設最大高度限制
+        const finalHeight = Math.max(minHeightByScreen, backHeight)
+        setCardHeight(finalHeight)
+      }
+    }
+
+    // 延遲執行以確保內容已渲染
+    const timer = setTimeout(updateCardHeight, 100)
+
+    window.addEventListener('resize', updateCardHeight)
+    return () => {
+      clearTimeout(timer)
+      window.removeEventListener('resize', updateCardHeight)
+    }
+  }, [word, definition, example, synonyms])

  const handleFlip = () => {
    if (!disabled) setIsFlipped(!isFlipped)
@ -63,14 +91,15 @@ export const FlipMemoryTest: React.FC<FlipMemoryTestProps> = ({
      <div
        className={`card-container ${disabled ? 'pointer-events-none opacity-75' : 'cursor-pointer'}`}
        onClick={handleFlip}
-        style={{ perspective: '1000px', minHeight: '600px' }}
+        style={{ perspective: '1000px', height: `${cardHeight}px` }}
      >
        <div
          className={`card bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-600 ${isFlipped ? 'rotate-y-180' : ''}`}
-          style={{ transformStyle: 'preserve-3d', minHeight: '600px' }}
+          style={{ transformStyle: 'preserve-3d', height: '100%' }}
        >
          {/* 正面 */}
          <div
+            ref={frontRef}
            className="card-face card-front absolute w-full h-full"
            style={{ backfaceVisibility: 'hidden' }}
          >
@ -106,10 +135,11 @@ export const FlipMemoryTest: React.FC<FlipMemoryTestProps> = ({

          {/* 背面 */}
          <div
+            ref={backRef}
            className="card-face card-back absolute w-full h-full"
            style={{ backfaceVisibility: 'hidden', transform: 'rotateY(180deg)' }}
          >
-            <div className="p-8 h-full overflow-y-auto">
+            <div className="p-8 h-full">
              <div className="flex justify-between items-start mb-6">
                <h2 className="text-2xl font-bold text-gray-900">翻卡記憶</h2>
                <span className="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">
@ -117,7 +147,7 @@ export const FlipMemoryTest: React.FC<FlipMemoryTestProps> = ({
                </span>
              </div>

-              <div className="space-y-4">
+              <div className="space-y-4 pb-6">
                {/* 定義區塊 */}
                <div className="bg-gray-50 rounded-lg p-4">
                  <h3 className="font-semibold text-gray-900 mb-2 text-left">定義</h3>
@ -186,7 +216,8 @@ export const FlipMemoryTest: React.FC<FlipMemoryTestProps> = ({
      <style jsx>{`
        .card-container {
          perspective: 1000px;
-          transition: height 0.3s ease;
+          transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+          min-height: 400px;
        }

        .card {
@ -194,6 +225,7 @@ export const FlipMemoryTest: React.FC<FlipMemoryTestProps> = ({
          width: 100%;
          height: 100%;
          transform-style: preserve-3d;
+          transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .rotate-y-180 {
@ -205,6 +237,33 @@ export const FlipMemoryTest: React.FC<FlipMemoryTestProps> = ({
          width: 100%;
          height: 100%;
          backface-visibility: hidden;
+          overflow: hidden;
+        }
+
+        .card-front .p-8 {
+          display: flex;
+          flex-direction: column;
+          min-height: 100%;
+        }
+
+        .card-back .p-8 {
+          overflow: visible;
+        }
+
+        @media (max-width: 768px) {
+          .card-container {
+            min-height: 350px;
+          }
+        }
+
+        @media (max-width: 480px) {
+          .card-container {
+            min-height: 300px;
+          }
+
+          .card-face .p-8 {
+            padding: 1rem;
+          }
        }
      `}</style>
    </div>
--- a/note/learn-backup/learn-backup/learn/tests/FlipMemoryTest.tsx
+++ b/note/learn-backup/learn-backup/learn/tests/FlipMemoryTest.tsx
@ -1,25 +0,0 @@
-interface FlipMemoryTestProps {
-  currentCard: any
-  cardHeight: number
-  isFlipped: boolean
-  onFlip: () => void
-  onReportError: () => void
-  onNavigate: (direction: string) => void
-  currentCardIndex: number
-  totalCards: number
-  cardContainerRef: any
-  cardFrontRef: any
-  cardBackRef: any
-}
-
-export const FlipMemoryTest: React.FC<FlipMemoryTestProps> = (props) => {
-  return (
-    <div className="text-center py-8">
-      <p>FlipMemoryTest 測驗組件</p>
-      <p>詞卡: {props.currentCard?.word}</p>
-      <button onClick={props.onFlip} className="bg-blue-500 text-white px-4 py-2 rounded">
-        翻轉
-      </button>
-    </div>
-  )
-}
--- a/note/learn-backup/learn-backup/learn/tests/SentenceFillTest.tsx
+++ b/note/learn-backup/learn-backup/learn/tests/SentenceFillTest.tsx
@ -1,36 +0,0 @@
-interface SentenceFillTestProps {
-  currentCard: any
-  fillAnswer: string
-  showHint: boolean
-  showResult: boolean
-  onAnswerChange: (answer: string) => void
-  onSubmit: () => void
-  onToggleHint: () => void
-  onReportError: () => void
-  onNavigate: (direction: string) => void
-  currentCardIndex: number
-  totalCards: number
-  setModalImage: (image: string | null) => void
-}
-
-export const SentenceFillTest: React.FC<SentenceFillTestProps> = (props) => {
-  return (
-    <div className="text-center py-8">
-      <p>SentenceFillTest 測驗組件</p>
-      <p>詞卡: {props.currentCard?.word}</p>
-      <input
-        type="text"
-        value={props.fillAnswer}
-        onChange={(e) => props.onAnswerChange(e.target.value)}
-        className="border px-3 py-2 rounded mx-2"
-        placeholder="輸入答案"
-      />
-      <button
-        onClick={props.onSubmit}
-        className="bg-blue-500 text-white px-4 py-2 rounded ml-2"
-      >
-        提交
-      </button>
-    </div>
-  )
-}
--- a/note/learn-backup/learn-backup/learn/tests/SentenceReorderTest.tsx
+++ b/note/learn-backup/learn-backup/learn/tests/SentenceReorderTest.tsx
@ -1,69 +0,0 @@
-interface SentenceReorderTestProps {
-  currentCard: any
-  shuffledWords: string[]
-  arrangedWords: string[]
-  reorderResult: boolean | null
-  onWordClick: (word: string) => void
-  onRemoveFromArranged: (word: string) => void
-  onCheckAnswer: () => void
-  onReset: () => void
-  onReportError: () => void
-  onNavigate: (direction: string) => void
-  currentCardIndex: number
-  totalCards: number
-  setModalImage: (image: string | null) => void
-}
-
-export const SentenceReorderTest: React.FC<SentenceReorderTestProps> = (props) => {
-  return (
-    <div className="text-center py-8">
-      <p>SentenceReorderTest 測驗組件</p>
-      <p>詞卡: {props.currentCard?.word}</p>
-
-      <div className="mb-4">
-        <p>可用詞語:</p>
-        <div className="flex flex-wrap gap-2 justify-center">
-          {props.shuffledWords.map((word, index) => (
-            <button
-              key={index}
-              onClick={() => props.onWordClick(word)}
-              className="bg-gray-200 hover:bg-gray-300 px-3 py-1 rounded"
-            >
-              {word}
-            </button>
-          ))}
-        </div>
-      </div>
-
-      <div className="mb-4">
-        <p>你的句子:</p>
-        <div className="flex flex-wrap gap-2 justify-center">
-          {props.arrangedWords.map((word, index) => (
-            <button
-              key={index}
-              onClick={() => props.onRemoveFromArranged(word)}
-              className="bg-blue-200 hover:bg-blue-300 px-3 py-1 rounded"
-            >
-              {word}
-            </button>
-          ))}
-        </div>
-      </div>
-
-      <div className="space-x-2">
-        <button
-          onClick={props.onCheckAnswer}
-          className="bg-green-500 text-white px-4 py-2 rounded"
-        >
-          檢查答案
-        </button>
-        <button
-          onClick={props.onReset}
-          className="bg-gray-500 text-white px-4 py-2 rounded"
-        >
-          重置
-        </button>
-      </div>
-    </div>
-  )
-}
--- a/note/learn-backup/learn-backup/learn/tests/VocabChoiceTest.tsx
+++ b/note/learn-backup/learn-backup/learn/tests/VocabChoiceTest.tsx
@ -1,31 +0,0 @@
-interface VocabChoiceTestProps {
-  currentCard: any
-  quizOptions: string[]
-  selectedAnswer: string | null
-  showResult: boolean
-  onAnswer: (answer: string) => void
-  onReportError: () => void
-  onNavigate: (direction: string) => void
-  currentCardIndex: number
-  totalCards: number
-}
-
-export const VocabChoiceTest: React.FC<VocabChoiceTestProps> = (props) => {
-  return (
-    <div className="text-center py-8">
-      <p>VocabChoiceTest 測驗組件</p>
-      <p>詞卡: {props.currentCard?.word}</p>
-      <div className="space-y-2">
-        {props.quizOptions.map((option, index) => (
-          <button
-            key={index}
-            onClick={() => props.onAnswer(option)}
-            className="block w-full bg-gray-100 hover:bg-gray-200 px-4 py-2 rounded"
-          >
-            {option}
-          </button>
-        ))}
-      </div>
-    </div>
-  )
-}
--- a/note/learn-backup/learn-backup/learn/tests/index.ts
+++ b/note/learn-backup/learn-backup/learn/tests/index.ts
@ -1,4 +0,0 @@
-export { FlipMemoryTest } from './FlipMemoryTest'
-export { VocabChoiceTest } from './VocabChoiceTest'
-export { SentenceFillTest } from './SentenceFillTest'
-export { SentenceReorderTest } from './SentenceReorderTest'