From 74932e58ff3baf807b9c878faf93e8c07c63ab1f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=84=AD=E6=B2=9B=E8=BB=92?= <jettcheng1018@gmail.com>
Date: Sat, 27 Sep 2025 18:50:41 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=BE=A9Flashcards=E9=A0=81?=
 =?UTF-8?q?=E9=9D=A2TypeScript=E9=A1=9E=E5=9E=8B=E9=8C=AF=E8=AA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加imageGenerationService導入修復未定義錯誤
- 修正getExampleImage和hasExampleImage函數類型簽名
- 添加缺失的generatingCards和generationProgress屬性
- 移除未使用的hasExampleImage函數
- 為status參數添加類型註解

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 frontend/app/flashcards/[id]/page.tsx |  7 ++-----
 frontend/app/flashcards/page.tsx      | 18 +++++++++++++-----
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/frontend/app/flashcards/[id]/page.tsx b/frontend/app/flashcards/[id]/page.tsx
index a1673f1..de4a6d4 100644
--- a/frontend/app/flashcards/[id]/page.tsx
+++ b/frontend/app/flashcards/[id]/page.tsx
@@ -6,6 +6,7 @@ import { Navigation } from '@/components/Navigation'
 import { ProtectedRoute } from '@/components/ProtectedRoute'
 import { useToast } from '@/components/Toast'
 import { flashcardsService, type Flashcard } from '@/lib/services/flashcards'
+import { imageGenerationService } from '@/lib/services/imageGeneration'
 
 interface FlashcardDetailPageProps {
   params: Promise<{
@@ -214,10 +215,6 @@ function FlashcardDetailContent({ cardId }: { cardId: string }) {
     return card.primaryImageUrl || null
   }
 
-  // 檢查詞彙是否有例句圖片 - 使用 API 資料
-  const hasExampleImage = (card: Flashcard): boolean => {
-    return card.hasExampleImage
-  }
 
   // 詞性簡寫轉換
   const getPartOfSpeechDisplay = (partOfSpeech: string): string => {
@@ -349,7 +346,7 @@ function FlashcardDetailContent({ cardId }: { cardId: string }) {
 
       const finalStatus = await imageGenerationService.pollUntilComplete(
         requestId,
-        (status) => {
+        (status: any) => {
           const stage = status.stages.gemini.status === 'completed'
             ? 'Replicate 生成圖片中...' : 'Gemini 生成描述中...'
           setGenerationProgress(stage)
diff --git a/frontend/app/flashcards/page.tsx b/frontend/app/flashcards/page.tsx
index ba5f572..60c9731 100644
--- a/frontend/app/flashcards/page.tsx
+++ b/frontend/app/flashcards/page.tsx
@@ -515,9 +515,11 @@ interface SearchResultsProps {
   onToggleFavorite: (card: Flashcard) => void
   getCEFRColor: (level: string) => string
   highlightSearchTerm: (text: string, term: string) => React.ReactNode
-  getExampleImage: (word: string) => string | null
-  hasExampleImage: (word: string) => boolean
+  getExampleImage: (card: Flashcard) => string | null
+  hasExampleImage: (card: Flashcard) => boolean
   onGenerateExampleImage: (card: Flashcard) => void
+  generatingCards: Set<string>
+  generationProgress: {[cardId: string]: string}
   router: any
 }
 
@@ -532,6 +534,8 @@ function SearchResults({
   getExampleImage,
   hasExampleImage,
   onGenerateExampleImage,
+  generatingCards,
+  generationProgress,
   router
 }: SearchResultsProps) {
   if (searchState.flashcards.length === 0) {
@@ -573,6 +577,8 @@ function SearchResults({
           getExampleImage={getExampleImage}
           hasExampleImage={hasExampleImage}
           onGenerateExampleImage={() => onGenerateExampleImage(card)}
+          generatingCards={generatingCards}
+          generationProgress={generationProgress}
           router={router}
         />
       ))}
@@ -589,13 +595,15 @@ interface FlashcardItemProps {
   onToggleFavorite: () => void
   getCEFRColor: (level: string) => string
   highlightSearchTerm: (text: string, term: string) => React.ReactNode
-  getExampleImage: (word: string) => string | null
-  hasExampleImage: (word: string) => boolean
+  getExampleImage: (card: Flashcard) => string | null
+  hasExampleImage: (card: Flashcard) => boolean
   onGenerateExampleImage: () => void
+  generatingCards: Set<string>
+  generationProgress: {[cardId: string]: string}
   router: any
 }
 
-function FlashcardItem({ card, searchTerm, onEdit, onDelete, onToggleFavorite, getCEFRColor, highlightSearchTerm, getExampleImage, hasExampleImage, onGenerateExampleImage, router }: FlashcardItemProps) {
+function FlashcardItem({ card, searchTerm, onEdit, onDelete, onToggleFavorite, getCEFRColor, highlightSearchTerm, getExampleImage, hasExampleImage, onGenerateExampleImage, generatingCards, generationProgress, 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">