feat: refactor aggregate card to avoid re-render

2026-02-16 13:14:43 +08:00 · 2025-08-17 16:45:34 +08:00
parent 963d163186
commit ad9fe27637
4 changed files with 397 additions and 196 deletions
--- a/src/lib/downstream.ts
+++ b/src/lib/downstream.ts
@@ -1,6 +1,7 @@
 import { API_CONFIG, ApiSite, getConfig } from '@/lib/config';
 import { SearchResult } from '@/lib/types';
 import { cleanHtmlTags } from '@/lib/utils';
+import { getCachedSearchPage, setCachedSearchPage } from '@/lib/search-cache';

 interface ApiSearchItem {
  vod_id: string;
@@ -15,21 +16,35 @@ interface ApiSearchItem {
  type_name?: string;
 }

-export async function searchFromApi(
+/**
+ * 通用的带缓存搜索函数
+ */
+async function searchWithCache(
  apiSite: ApiSite,
-  query: string
-): Promise<SearchResult[]> {
+  query: string,
+  page: number,
+  url: string,
+  timeoutMs: number = 5000
+): Promise<{ results: SearchResult[]; pageCount?: number }> {
+  // 先查缓存
+  const cached = getCachedSearchPage(apiSite.key, query, page);
+  if (cached) {
+    if (cached.status === 'ok') {
+      console.log(`🎯 缓存命中 [${apiSite.key}] query="${query}" page=${page} status=ok results=${cached.data.length}`);
+      return { results: cached.data, pageCount: cached.pageCount };
+    } else {
+      console.log(`🚫 缓存命中 [${apiSite.key}] query="${query}" page=${page} status=${cached.status} - 返回空结果`);
+      // timeout / forbidden 命中缓存，直接返回空
+      return { results: [] };
+    }
+  }
+
+  // 缓存未命中，发起网络请求
+  const controller = new AbortController();
+  const timeoutId = setTimeout(() => controller.abort(), timeoutMs);
+
  try {
-    const apiBaseUrl = apiSite.api;
-    const apiUrl =
-      apiBaseUrl + API_CONFIG.search.path + encodeURIComponent(query);
-    const apiName = apiSite.name;
-
-    // 添加超时处理
-    const controller = new AbortController();
-    const timeoutId = setTimeout(() => controller.abort(), 8000);
-
-    const response = await fetch(apiUrl, {
+    const response = await fetch(url, {
      headers: API_CONFIG.search.headers,
      signal: controller.signal,
    });
@@ -37,7 +52,10 @@ export async function searchFromApi(
    clearTimeout(timeoutId);

    if (!response.ok) {
-      return [];
+      if (response.status === 403) {
+        setCachedSearchPage(apiSite.key, query, page, 'forbidden', []);
+      }
+      return { results: [] };
    }

    const data = await response.json();
@@ -47,9 +65,11 @@ export async function searchFromApi(
      !Array.isArray(data.list) ||
      data.list.length === 0
    ) {
-      return [];
+      // 空结果不做负缓存要求，这里不写入缓存
+      return { results: [] };
    }
-    // 处理第一页结果
+
+    // 处理结果数据
    const results = data.list.map((item: ApiSearchItem) => {
      let episodes: string[] = [];
      let titles: string[] = [];
@@ -87,7 +107,7 @@ export async function searchFromApi(
        episodes,
        episodes_titles: titles,
        source: apiSite.key,
-        source_name: apiName,
+        source_name: apiSite.name,
        class: item.vod_class,
        year: item.vod_year
          ? item.vod_year.match(/\d{4}/)?.[0] || ''
@@ -98,11 +118,40 @@ export async function searchFromApi(
      };
    });

+    const pageCount = page === 1 ? data.pagecount || 1 : undefined;
+    // 写入缓存（成功）
+    setCachedSearchPage(apiSite.key, query, page, 'ok', results, pageCount);
+    return { results, pageCount };
+  } catch (error: any) {
+    clearTimeout(timeoutId);
+    // 识别被 AbortController 中止（超时）
+    const aborted = error?.name === 'AbortError' || error?.code === 20 || error?.message?.includes('aborted');
+    if (aborted) {
+      setCachedSearchPage(apiSite.key, query, page, 'timeout', []);
+    }
+    return { results: [] };
+  }
+}
+
+export async function searchFromApi(
+  apiSite: ApiSite,
+  query: string
+): Promise<SearchResult[]> {
+  try {
+    const apiBaseUrl = apiSite.api;
+    const apiUrl =
+      apiBaseUrl + API_CONFIG.search.path + encodeURIComponent(query);
+
+    // 使用新的缓存搜索函数处理第一页
+    const firstPageResult = await searchWithCache(apiSite, query, 1, apiUrl, 5000);
+    let results = firstPageResult.results;
+    const pageCountFromFirst = firstPageResult.pageCount;
+
    const config = await getConfig();
    const MAX_SEARCH_PAGES: number = config.SiteConfig.SearchDownstreamMaxPage;

    // 获取总页数
-    const pageCount = data.pagecount || 1;
+    const pageCount = pageCountFromFirst || 1;
    // 确定需要获取的额外页数
    const pagesToFetch = Math.min(pageCount - 1, MAX_SEARCH_PAGES - 1);

@@ -118,77 +167,9 @@ export async function searchFromApi(
            .replace('{page}', page.toString());

        const pagePromise = (async () => {
-          try {
-            const pageController = new AbortController();
-            const pageTimeoutId = setTimeout(
-              () => pageController.abort(),
-              8000
-            );
-
-            const pageResponse = await fetch(pageUrl, {
-              headers: API_CONFIG.search.headers,
-              signal: pageController.signal,
-            });
-
-            clearTimeout(pageTimeoutId);
-
-            if (!pageResponse.ok) return [];
-
-            const pageData = await pageResponse.json();
-
-            if (!pageData || !pageData.list || !Array.isArray(pageData.list))
-              return [];
-
-            return pageData.list.map((item: ApiSearchItem) => {
-              let episodes: string[] = [];
-              let titles: string[] = [];
-
-              // 使用正则表达式从 vod_play_url 提取 m3u8 链接
-              if (item.vod_play_url) {
-                // 先用 $$$ 分割
-                const vod_play_url_array = item.vod_play_url.split('$$$');
-                // 分集之间#分割，标题和播放链接 $ 分割
-                vod_play_url_array.forEach((url: string) => {
-                  const matchEpisodes: string[] = [];
-                  const matchTitles: string[] = [];
-                  const title_url_array = url.split('#');
-                  title_url_array.forEach((title_url: string) => {
-                    const episode_title_url = title_url.split('$');
-                    if (
-                      episode_title_url.length === 2 &&
-                      episode_title_url[1].endsWith('.m3u8')
-                    ) {
-                      matchTitles.push(episode_title_url[0]);
-                      matchEpisodes.push(episode_title_url[1]);
-                    }
-                  });
-                  if (matchEpisodes.length > episodes.length) {
-                    episodes = matchEpisodes;
-                    titles = matchTitles;
-                  }
-                });
-              }
-
-              return {
-                id: item.vod_id.toString(),
-                title: item.vod_name.trim().replace(/\s+/g, ' '),
-                poster: item.vod_pic,
-                episodes,
-                episodes_titles: titles,
-                source: apiSite.key,
-                source_name: apiName,
-                class: item.vod_class,
-                year: item.vod_year
-                  ? item.vod_year.match(/\d{4}/)?.[0] || ''
-                  : 'unknown',
-                desc: cleanHtmlTags(item.vod_content || ''),
-                type_name: item.type_name,
-                douban_id: item.vod_douban_id,
-              };
-            });
-          } catch (error) {
-            return [];
-          }
+          // 使用新的缓存搜索函数处理分页
+          const pageResult = await searchWithCache(apiSite, query, page, pageUrl, 5000);
+          return pageResult.results;
        })();

        additionalPagePromises.push(pagePromise);
--- a/src/lib/search-cache.ts
+++ b/src/lib/search-cache.ts
@@ -0,0 +1,151 @@
+import { SearchResult } from '@/lib/types';
+
+// 缓存状态类型
+export type CachedPageStatus = 'ok' | 'timeout' | 'forbidden';
+
+// 缓存条目接口
+export interface CachedPageEntry {
+  expiresAt: number;
+  status: CachedPageStatus;
+  data: SearchResult[];
+  pageCount?: number; // 仅第一页可选存储
+}
+
+// 缓存配置
+const SEARCH_CACHE_TTL_MS = 10 * 60 * 1000; // 10分钟
+const CACHE_CLEANUP_INTERVAL_MS = 5 * 60 * 1000; // 5分钟清理一次
+const MAX_CACHE_SIZE = 1000; // 最大缓存条目数量
+const SEARCH_CACHE: Map<string, CachedPageEntry> = new Map();
+
+// 自动清理定时器
+let cleanupTimer: NodeJS.Timeout | null = null;
+let lastCleanupTime = 0;
+
+/**
+ * 生成搜索缓存键：source + query + page
+ */
+function makeSearchCacheKey(sourceKey: string, query: string, page: number): string {
+  return `${sourceKey}::${query.trim()}::${page}`;
+}
+
+/**
+ * 获取缓存的搜索页面数据
+ */
+export function getCachedSearchPage(
+  sourceKey: string,
+  query: string,
+  page: number
+): CachedPageEntry | null {
+  const key = makeSearchCacheKey(sourceKey, query, page);
+  const entry = SEARCH_CACHE.get(key);
+  if (!entry) return null;
+
+  // 检查是否过期
+  if (entry.expiresAt <= Date.now()) {
+    SEARCH_CACHE.delete(key);
+    return null;
+  }
+
+  return entry;
+}
+
+/**
+ * 设置缓存的搜索页面数据
+ */
+export function setCachedSearchPage(
+  sourceKey: string,
+  query: string,
+  page: number,
+  status: CachedPageStatus,
+  data: SearchResult[],
+  pageCount?: number
+): void {
+  // 惰性启动自动清理
+  ensureAutoCleanupStarted();
+
+  // 惰性清理：每次写入时检查是否需要清理
+  const now = Date.now();
+  if (now - lastCleanupTime > CACHE_CLEANUP_INTERVAL_MS) {
+    const stats = performCacheCleanup();
+    if (stats.expired > 0 || stats.sizeLimited > 0) {
+      console.log(`🧹 惰性缓存清理: 删除过期${stats.expired}项，删除超限${stats.sizeLimited}项，剩余${stats.total}项`);
+    }
+  }
+
+  const key = makeSearchCacheKey(sourceKey, query, page);
+  SEARCH_CACHE.set(key, {
+    expiresAt: now + SEARCH_CACHE_TTL_MS,
+    status,
+    data,
+    pageCount,
+  });
+}
+
+/**
+ * 确保自动清理已启动（惰性初始化）
+ */
+function ensureAutoCleanupStarted(): void {
+  if (!cleanupTimer) {
+    startAutoCleanup();
+    console.log(`🚀 启动自动缓存清理，间隔${CACHE_CLEANUP_INTERVAL_MS / 1000}秒，最大缓存${MAX_CACHE_SIZE}项`);
+  }
+}
+
+/**
+ * 智能清理过期的缓存条目
+ */
+function performCacheCleanup(): { expired: number; total: number; sizeLimited: number } {
+  const now = Date.now();
+  const keysToDelete: string[] = [];
+  let sizeLimitedDeleted = 0;
+
+  // 1. 清理过期条目
+  SEARCH_CACHE.forEach((entry, key) => {
+    if (entry.expiresAt <= now) {
+      keysToDelete.push(key);
+    }
+  });
+
+  const expiredCount = keysToDelete.length;
+  keysToDelete.forEach(key => SEARCH_CACHE.delete(key));
+
+  // 2. 如果缓存大小超限，清理最老的条目（LRU策略）
+  if (SEARCH_CACHE.size > MAX_CACHE_SIZE) {
+    const entries = Array.from(SEARCH_CACHE.entries());
+    // 按照过期时间排序，最早过期的在前面
+    entries.sort((a, b) => a[1].expiresAt - b[1].expiresAt);
+
+    const toRemove = SEARCH_CACHE.size - MAX_CACHE_SIZE;
+    for (let i = 0; i < toRemove; i++) {
+      SEARCH_CACHE.delete(entries[i][0]);
+      sizeLimitedDeleted++;
+    }
+  }
+
+  lastCleanupTime = now;
+
+  return {
+    expired: expiredCount,
+    total: SEARCH_CACHE.size,
+    sizeLimited: sizeLimitedDeleted
+  };
+}
+
+/**
+ * 启动自动清理定时器
+ */
+function startAutoCleanup(): void {
+  if (cleanupTimer) return; // 避免重复启动
+
+  cleanupTimer = setInterval(() => {
+    const stats = performCacheCleanup();
+    if (stats.expired > 0 || stats.sizeLimited > 0) {
+      console.log(`🧹 自动缓存清理: 删除过期${stats.expired}项，删除超限${stats.sizeLimited}项，剩余${stats.total}项`);
+    }
+  }, CACHE_CLEANUP_INTERVAL_MS);
+
+  // 在 Node.js 环境中避免阻止程序退出
+  if (typeof process !== 'undefined' && cleanupTimer.unref) {
+    cleanupTimer.unref();
+  }
+}