fix: 恢復詞卡管理頁面的例句圖片顯示功能

- 在重構過程中遺失的例句圖片功能已恢復
- 添加 getExampleImage 函數到新架構中
- 更新組件 props 以支援例句圖片傳遞
- 在 FlashcardItem 組件中重新實現例句圖片顯示

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

frontend/app/flashcards/page.tsx

@@ -23,6 +23,38 @@ function FlashcardsContent() {
   // 使用新的搜尋Hook
   const [searchState, searchActions] = useFlashcardSearch(activeTab)
 
+  // 例句圖片邏輯
+  const getExampleImage = (word: string): string => {
+    const availableImages = [
+      '/images/examples/bring_up.png',
+      '/images/examples/instinct.png',
+      '/images/examples/warrant.png'
+    ]
+
+    const imageMap: {[key: string]: string} = {
+      'brought': '/images/examples/bring_up.png',
+      'instincts': '/images/examples/instinct.png',
+      'warrants': '/images/examples/warrant.png',
+      'hello': '/images/examples/bring_up.png',
+      'beautiful': '/images/examples/instinct.png',
+      'understand': '/images/examples/warrant.png',
+      'elaborate': '/images/examples/bring_up.png',
+      'sophisticated': '/images/examples/instinct.png',
+      'ubiquitous': '/images/examples/warrant.png'
+    }
+
+    // 根據詞彙返回對應圖片，如果沒有則根據字母分配
+    const mappedImage = imageMap[word?.toLowerCase()]
+    if (mappedImage) return mappedImage
+
+    // 根據首字母分配圖片
+    const firstChar = (word || 'a')[0].toLowerCase()
+    const charCode = firstChar.charCodeAt(0) - 97 // a=0, b=1, c=2...
+    const imageIndex = charCode % availableImages.length
+
+    return availableImages[imageIndex]
+  }
+
   // 初始化數據載入
   useEffect(() => {
     loadTotalCounts()
@@ -213,6 +245,7 @@ function FlashcardsContent() {
           onToggleFavorite={handleToggleFavorite}
           getCEFRColor={getCEFRColor}
           highlightSearchTerm={highlightSearchTerm}
+          getExampleImage={getExampleImage}
           router={router}
         />
 
@@ -427,6 +460,7 @@ interface SearchResultsProps {
   onToggleFavorite: (card: Flashcard) => void
   getCEFRColor: (level: string) => string
   highlightSearchTerm: (text: string, term: string) => React.ReactNode
+  getExampleImage: (word: string) => string
   router: any
 }
 
@@ -438,6 +472,7 @@ function SearchResults({
   onToggleFavorite,
   getCEFRColor,
   highlightSearchTerm,
+  getExampleImage,
   router
 }: SearchResultsProps) {
   if (searchState.flashcards.length === 0) {
@@ -476,6 +511,7 @@ function SearchResults({
           onToggleFavorite={() => onToggleFavorite(card)}
           getCEFRColor={getCEFRColor}
           highlightSearchTerm={highlightSearchTerm}
+          getExampleImage={getExampleImage}
           router={router}
         />
       ))}
@@ -492,10 +528,11 @@ interface FlashcardItemProps {
   onToggleFavorite: () => void
   getCEFRColor: (level: string) => string
   highlightSearchTerm: (text: string, term: string) => React.ReactNode
+  getExampleImage: (word: string) => string
   router: any
 }
 
-function FlashcardItem({ card, searchTerm, onEdit, onDelete, onToggleFavorite, getCEFRColor, highlightSearchTerm, router }: FlashcardItemProps) {
+function FlashcardItem({ card, searchTerm, onEdit, onDelete, onToggleFavorite, getCEFRColor, highlightSearchTerm, getExampleImage, router }: FlashcardItemProps) {
   return (
     <div className="bg-white border border-gray-200 rounded-lg hover:shadow-md transition-all duration-200 relative">
       <div className="p-4">
@@ -508,6 +545,27 @@ function FlashcardItem({ card, searchTerm, onEdit, onDelete, onToggleFavorite, g
           </div>
 
           <div className="flex items-center gap-4 flex-1">
+            {/* 例句圖片 */}
+            <div className="w-54 h-36 bg-gray-100 rounded-lg overflow-hidden border border-gray-200 flex items-center justify-center">
+              <img
+                src={getExampleImage(card.word)}
+                alt={`${card.word} example`}
+                className="w-full h-full object-cover"
+                onError={(e) => {
+                  const target = e.target as HTMLImageElement
+                  target.style.display = 'none'
+                  target.parentElement!.innerHTML = `
+                    <div class="text-gray-400 text-xs text-center">
+                      <svg class="w-6 h-6 mx-auto mb-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                      </svg>
+                      例句圖
+                    </div>
+                  `
+                }}
+              />
+            </div>
+
             {/* 詞卡信息 */}
             <div className="flex-1">
               <div className="flex items-center gap-3">