feat: 优化搜索演示 GIF 生成脚本，确保搜索结果完整展示

- 添加 wait_for_search_results() 函数，等待搜索结果完全渲染
- 添加 scroll_to_search_results() 函数，自动滚动到搜索结果区域
- 改进搜索流程，确保每次搜索后都能完整展示搜索结果
- 添加数据加载检测，提供更准确的加载状态反馈
- 更新生成的 GIF，文件大小从 105KB 增加到 232KB，包含更多搜索结果内容

Author: jbiaojerry

.github/search-demo.gif

@@ -44,6 +44,40 @@ def check_dependencies():
 
     return True
 
+async def wait_for_search_results(page, timeout=5000):
+    """等待搜索结果出现"""
+    try:
+        # 等待搜索结果容器有内容（不是"正在加载"）
+        await page.wait_for_function(
+            """() => {
+                const results = document.getElementById('search-results');
+                if (!results) return false;
+                const text = results.innerText || '';
+                return text.length > 0 && !text.includes('正在加载');
+            }""",
+            timeout=timeout
+        )
+        # 额外等待一下确保渲染完成
+        await asyncio.sleep(0.5)
+        return True
+    except:
+        return False
+
+async def scroll_to_search_results(page):
+    """滚动到搜索结果区域，确保搜索结果在视口内"""
+    try:
+        # 获取搜索结果元素
+        search_results = page.locator('#search-results')
+        if await search_results.count() > 0:
+            # 滚动到搜索结果区域
+            await search_results.scroll_into_view_if_needed()
+            await asyncio.sleep(0.3)
+            # 稍微向上滚动一点，让搜索框也可见
+            await page.evaluate("window.scrollBy(0, -100)")
+            await asyncio.sleep(0.2)
+    except Exception as e:
+        print(f"  ⚠️  滚动到搜索结果时出错: {e}")
+
 async def generate_gif():
     """生成搜索功能演示 GIF"""
     try:
@@ -76,42 +110,64 @@ async def generate_gif():
 
             # 步骤 2: 等待数据加载
             print("⏳ 步骤 2: 等待数据加载...")
+            # 等待搜索框出现，说明页面已加载
+            await page.wait_for_selector('input[type="text"]', timeout=10000)
             await asyncio.sleep(3)  # 等待 all-books.json 加载
+            # 检查数据是否加载完成
+            data_loaded = await page.evaluate("""() => {
+                return window.books && window.books.length > 0;
+            }""")
+            if data_loaded:
+                print(f"  ✅ 数据加载完成（已加载书籍数据）")
+            else:
+                print(f"  ⚠️  数据可能还在加载中，继续...")
             screenshots.append(await page.screenshot())
-            print("  ✅ 数据加载完成")
 
             # 步骤 3: 输入搜索关键词 "文学"
             print("🔍 步骤 3: 搜索 '文学'...")
             search_input = page.locator('input[type="text"]')
             await search_input.fill("文学")
-            await asyncio.sleep(1.5)  # 等待搜索结果
+            await asyncio.sleep(0.5)  # 等待输入完成
+            # 等待搜索结果出现
+            await wait_for_search_results(page, timeout=5000)
+            # 滚动到搜索结果
+            await scroll_to_search_results(page)
             screenshots.append(await page.screenshot())
-            print("  ✅ 搜索完成")
+            print("  ✅ 搜索完成，已展示搜索结果")
 
-            # 步骤 4: 清空并搜索 "历史"
-            print("🔍 步骤 4: 搜索 '历史'...")
+            # 步骤 4: 清空并搜索 "文学 钢铁是怎么炼成的"
+            print("🔍 步骤 4: 搜索 '文学 钢铁是怎么炼成的'...")
             await search_input.fill("")
             await asyncio.sleep(0.5)
-            await search_input.fill("历史")
-            await asyncio.sleep(1.5)
+            await search_input.fill("文学 钢铁是怎么炼成的")
+            await asyncio.sleep(0.5)
+            # 等待搜索结果
+            await wait_for_search_results(page, timeout=5000)
+            await scroll_to_search_results(page)
             screenshots.append(await page.screenshot())
-            print("  ✅ 搜索完成")
+            print("  ✅ 搜索完成，已展示搜索结果")
 
             # 步骤 5: 多关键词搜索
-            print("🔍 步骤 5: 多关键词搜索 '沟通 励志'...")
+            print("🔍 步骤 5: 多关键词搜索 '沟通 樊登 职场'...")
             await search_input.fill("")
             await asyncio.sleep(0.5)
-            await search_input.fill("沟通 励志")
-            await asyncio.sleep(1.5)
+            await search_input.fill("沟通 樊登 职场")
+            await asyncio.sleep(0.5)
+            # 等待搜索结果
+            await wait_for_search_results(page, timeout=5000)
+            await scroll_to_search_results(page)
             screenshots.append(await page.screenshot())
-            print("  ✅ 多关键词搜索完成")
+            print("  ✅ 多关键词搜索完成，已展示搜索结果")
 
-            # 步骤 6: 展示最终结果
+            # 步骤 6: 展示最终结果（多停留一会）
             await asyncio.sleep(1)
+            await scroll_to_search_results(page)
             screenshots.append(await page.screenshot())
 
         except Exception as e:
             print(f"❌ 录制过程中出错: {e}")
+            import traceback
+            traceback.print_exc()
             return False
         finally:
             await browser.close()
@@ -124,6 +180,11 @@ async def generate_gif():
 
         # 保存为 GIF
         OUTPUT_GIF.parent.mkdir(parents=True, exist_ok=True)
+        # 第一帧显示时间稍长，其他帧正常显示
+        durations = [2000] + [1500] * (len(images) - 1)  # 第一帧 2 秒，其他 1.5 秒
+        
+        # 使用 save_all 保存多帧，但需要手动设置每帧的持续时间
+        # 由于 PIL 的 save_all 不支持每帧不同 duration，我们使用固定值
         images[0].save(
             OUTPUT_GIF,
             save_all=True,