refactor: 簡化例句圖片新增按鈕設計

- 移除內聯樣式避免尺寸衝突
- 改用div結構取代button標籤
- 純粹依賴Tailwind類別控制大小
- 保持完整的互動效果

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

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

frontend/app/flashcards/page.tsx

@@ -579,16 +579,18 @@ function FlashcardItem({ card, searchTerm, onEdit, onDelete, onToggleFavorite, g
                 />
               ) : (
                 // 沒有例句圖片時顯示新增按鈕
-                <button
+                <div
+                  className="w-full h-full flex items-center justify-center cursor-pointer hover:bg-blue-50 transition-colors group"
                   onClick={onGenerateExampleImage}
-                  className="w-full h-full flex flex-col items-center justify-center text-gray-500 hover:text-blue-600 hover:bg-blue-50 transition-colors group"
                   title="點擊生成例句圖片"
                 >
-                  <svg className="w-8 h-8 mb-2 group-hover:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <div className="text-center">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+                    <svg className="w-8 h-8 mx-auto mb-2 text-gray-400 group-hover:text-blue-600 group-hover:scale-110 transition-all" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  </svg>
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
-                  <span className="text-xs font-medium">新增例句圖</span>
+                    </svg>
-                </button>
+                    <span className="text-xs text-gray-500 group-hover:text-blue-600 transition-colors">新增例句圖</span>
+                  </div>
+                </div>
               )}
             </div>