新增影视搜索列表视图

src/app/search/page.tsx

@@ -1,9 +1,26 @@
 /* eslint-disable react-hooks/exhaustive-deps, @typescript-eslint/no-explicit-any,@typescript-eslint/no-non-null-assertion,no-empty */
 'use client';
 
-import { ChevronUp, Film, HardDrive, Magnet,RefreshCw, Search, X } from 'lucide-react';
+import {
+  ChevronUp,
+  Film,
+  Grid2x2,
+  HardDrive,
+  List,
+  Magnet,
+  RefreshCw,
+  Search,
+  X,
+} from 'lucide-react';
 import { useRouter, useSearchParams } from 'next/navigation';
-import React, { startTransition, Suspense, useEffect, useMemo, useRef, useState } from 'react';
+import React, {
+  startTransition,
+  Suspense,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 
 import { getAuthInfoFromBrowserCookie } from '@/lib/auth';
 import {
@@ -14,12 +31,16 @@ import {
   subscribeToDataUpdates,
 } from '@/lib/db.client';
 import { SearchResult } from '@/lib/types';
+import { processImageUrl } from '@/lib/utils';
 
 import AcgSearch from '@/components/AcgSearch';
 import CapsuleSwitch from '@/components/CapsuleSwitch';
+import ImageViewer from '@/components/ImageViewer';
 import PageLayout from '@/components/PageLayout';
 import PansouSearch from '@/components/PansouSearch';
-import SearchResultFilter, { SearchFilterCategory } from '@/components/SearchResultFilter';
+import SearchResultFilter, {
+  SearchFilterCategory,
+} from '@/components/SearchResultFilter';
 import SearchSuggestions from '@/components/SearchSuggestions';
 import VideoCard, { VideoCardHandle } from '@/components/VideoCard';
 import VirtualScrollableGrid from '@/components/VirtualScrollableGrid';
@@ -30,13 +51,17 @@ function SearchPageClient() {
   // 返回顶部按钮显示状态
   const [showBackToTop, setShowBackToTop] = useState(false);
   // 选项卡状态: 'video' 或 'pansou' 或 'acg'
-  const [activeTab, setActiveTab] = useState<'video' | 'pansou' | 'acg'>('video');
+  const [activeTab, setActiveTab] = useState<'video' | 'pansou' | 'acg'>(
+    'video'
+  );
   // Pansou 搜索触发标志
   const [triggerPansouSearch, setTriggerPansouSearch] = useState(false);
   // ACG 搜索触发标志
   const [triggerAcgSearch, setTriggerAcgSearch] = useState(false);
   // 用户权限
-  const [userRole, setUserRole] = useState<'owner' | 'admin' | 'user' | null>(null);
+  const [userRole, setUserRole] = useState<'owner' | 'admin' | 'user' | null>(
+    null
+  );
   // 繁体转简体转换器
   const converterRef = useRef<((text: string) => string) | null>(null);
   // 转换器是否已初始化
@@ -57,8 +82,15 @@ function SearchPageClient() {
   const flushTimerRef = useRef<number | null>(null);
   const [useFluidSearch, setUseFluidSearch] = useState(true);
   // 聚合卡片 refs 与聚合统计缓存
-  const groupRefs = useRef<Map<string, React.RefObject<VideoCardHandle>>>(new Map());
+  const groupRefs = useRef<Map<string, React.RefObject<VideoCardHandle>>>(
-  const groupStatsRef = useRef<Map<string, { douban_id?: number; episodes?: number; source_names: string[] }>>(new Map());
+    new Map()
+  );
+  const groupStatsRef = useRef<
+    Map<
+      string,
+      { douban_id?: number; episodes?: number; source_names: string[] }
+    >
+  >(new Map());
   // 强制刷新状态
   const [forceRefresh, setForceRefresh] = useState(false);
   // 是否使用了缓存结果
@@ -127,11 +159,16 @@ function SearchPageClient() {
       let max = 0;
       let res = 0;
       countMap.forEach((v, k) => {
-        if (v > max) { max = v; res = k; }
+        if (v > max) {
+          max = v;
+          res = k;
+        }
       });
       return res;
     })();
-    const source_names = Array.from(new Set(group.map((g) => g.source_name).filter(Boolean))) as string[];
+    const source_names = Array.from(
+      new Set(group.map((g) => g.source_name).filter(Boolean))
+    ) as string[];
 
     const douban_id = (() => {
       const countMap = new Map<number, number>();
@@ -143,7 +180,10 @@ function SearchPageClient() {
       let max = 0;
       let res: number | undefined;
       countMap.forEach((v, k) => {
-        if (v > max) { max = v; res = k; }
+        if (v > max) {
+          max = v;
+          res = k;
+        }
       });
       return res;
     })();
@@ -151,13 +191,23 @@ function SearchPageClient() {
     return { episodes, source_names, douban_id };
   };
   // 过滤器：非聚合与聚合
-  const [filterAll, setFilterAll] = useState<{ source: string; title: string; year: string; yearOrder: 'none' | 'asc' | 'desc' }>({
+  const [filterAll, setFilterAll] = useState<{
+    source: string;
+    title: string;
+    year: string;
+    yearOrder: 'none' | 'asc' | 'desc';
+  }>({
     source: 'all',
     title: 'all',
     year: 'all',
     yearOrder: 'none',
   });
-  const [filterAgg, setFilterAgg] = useState<{ source: string; title: string; year: string; yearOrder: 'none' | 'asc' | 'desc' }>({
+  const [filterAgg, setFilterAgg] = useState<{
+    source: string;
+    title: string;
+    year: string;
+    yearOrder: 'none' | 'asc' | 'desc';
+  }>({
     source: 'all',
     title: 'all',
     year: 'all',
@@ -178,6 +228,24 @@ function SearchPageClient() {
   const [viewMode, setViewMode] = useState<'agg' | 'all'>(() => {
     return getDefaultAggregate() ? 'agg' : 'all';
   });
+  const [resultDisplayMode, setResultDisplayMode] = useState<'card' | 'list'>(
+    () => {
+      if (typeof window !== 'undefined') {
+        const saved = localStorage.getItem('searchResultDisplayMode');
+        if (saved === 'card' || saved === 'list') {
+          return saved;
+        }
+      }
+      return 'card';
+    }
+  );
+  const [expandedSourceTags, setExpandedSourceTags] = useState<
+    Record<string, boolean>
+  >({});
+  const [previewImage, setPreviewImage] = useState<{
+    url: string;
+    alt: string;
+  } | null>(null);
 
   // 在“无排序”场景用于每个源批次的预排序：完全匹配标题优先，其次年份倒序，未知年份最后
   const sortBatchForNoOrder = (items: SearchResult[]) => {
@@ -200,7 +268,11 @@ function SearchPageClient() {
   };
 
   // 简化的年份排序：unknown/空值始终在最后
-  const compareYear = (aYear: string, bYear: string, order: 'none' | 'asc' | 'desc') => {
+  const compareYear = (
+    aYear: string,
+    bYear: string,
+    order: 'none' | 'asc' | 'desc'
+  ) => {
     // 如果是无排序状态，返回0（保持原顺序）
     if (order === 'none') return 0;
 
@@ -230,7 +302,11 @@ function SearchPageClient() {
   // 辅助函数：获取视频类型
   const getType = (item: SearchResult): 'movie' | 'tv' => {
     // 1. Emby 和 OpenList 源：使用 type_name（基于 TMDB，最可靠）
-    if (item.source === 'emby' || item.source?.startsWith('emby_') || item.source === 'openlist') {
+    if (
+      item.source === 'emby' ||
+      item.source?.startsWith('emby_') ||
+      item.source === 'openlist'
+    ) {
       return item.type_name === '电影' ? 'movie' : 'tv';
     }
 
@@ -238,14 +314,21 @@ function SearchPageClient() {
     const typeName = item.type_name?.toLowerCase() || '';
 
     // 2.1 明确包含"电影"或"movie"或"片"的，判断为电影
-    if (typeName.includes('电影') || typeName.includes('movie') ||
+    if (
-        typeName.endsWith('片') && !typeName.includes('动漫')) {
+      typeName.includes('电影') ||
+      typeName.includes('movie') ||
+      (typeName.endsWith('片') && !typeName.includes('动漫'))
+    ) {
       return 'movie';
     }
 
     // 2.2 包含"剧"、"动漫"、"综艺"等关键词的，判断为剧集
-    if (typeName.includes('剧') || typeName.includes('动漫') ||
+    if (
-        typeName.includes('综艺') || typeName.includes('anime')) {
+      typeName.includes('剧') ||
+      typeName.includes('动漫') ||
+      typeName.includes('综艺') ||
+      typeName.includes('anime')
+    ) {
       return 'tv';
     }
 
@@ -275,7 +358,9 @@ function SearchPageClient() {
   const aggregatedResults = useMemo(() => {
     // 首先应用精确搜索过滤
     const filteredResults = exactSearch
-      ? searchResults.filter(item => titleContainsQuery(item.title, currentQueryRef.current))
+      ? searchResults.filter((item) =>
+          titleContainsQuery(item.title, currentQueryRef.current)
+        )
       : searchResults;
 
     //===== 阶段1：按 normalizedTitle-type 初步分组 =====
@@ -297,16 +382,21 @@ function SearchPageClient() {
 
     preliminaryMap.forEach((group, preliminaryKey) => {
       // 分离有年份和无年份的结果
-  const withYear = new Map<string, SearchResult[]>();
+      const withYear = new Map<string, SearchResult[]>();
       const withoutYear: SearchResult[] = [];
 
       group.forEach((item) => {
         const year = item.year;
 
         // 判断是否为有效年份：必须是4位数字，且不能是空字符串或'unknown'
-        if (year && year.trim() !== '' && year !== 'unknown' && /^\d{4}$/.test(year)) {
+        if (
+          year &&
+          year.trim() !== '' &&
+          year !== 'unknown' &&
+          /^\d{4}$/.test(year)
+        ) {
           // 有有效年份
-        const arr = withYear.get(year) || [];
+          const arr = withYear.get(year) || [];
           arr.push(item);
           withYear.set(year, arr);
         } else {
@@ -334,7 +424,9 @@ function SearchPageClient() {
     });
 
     // 按出现顺序返回聚合结果
-    return keyOrder.map(key => [key, finalMap.get(key)!] as [string, SearchResult[]]);
+    return keyOrder.map(
+      (key) => [key, finalMap.get(key)!] as [string, SearchResult[]]
+    );
   }, [searchResults, exactSearch]);
 
   // 当聚合结果变化时，如果某个聚合已存在，则调用其卡片 ref 的 set 方法增量更新
@@ -373,7 +465,12 @@ function SearchPageClient() {
     const yearsSet = new Set<string>();
 
     searchResults.forEach((item) => {
-      if (item.source && item.source_name && item.source.trim() !== '' && item.source_name.trim() !== '') {
+      if (
+        item.source &&
+        item.source_name &&
+        item.source.trim() !== '' &&
+        item.source_name.trim() !== ''
+      ) {
         sourcesSet.set(item.source, item.source_name);
       }
       if (item.title && item.title.trim() !== '') titlesSet.add(item.title);
@@ -415,7 +512,9 @@ function SearchPageClient() {
 
     // 年份: 将 unknown 放末尾
     const years = Array.from(yearsSet.values());
-    const knownYears = years.filter((y) => y !== 'unknown').sort((a, b) => parseInt(b) - parseInt(a));
+    const knownYears = years
+      .filter((y) => y !== 'unknown')
+      .sort((a, b) => parseInt(b) - parseInt(a));
     const hasUnknown = years.includes('unknown');
     const yearOptions: { label: string; value: string }[] = [
       { label: '全部年份', value: 'all' },
@@ -444,7 +543,9 @@ function SearchPageClient() {
 
     // 首先应用精确搜索过滤
     const exactSearchFiltered = exactSearch
-      ? searchResults.filter(item => titleContainsQuery(item.title, currentQueryRef.current))
+      ? searchResults.filter((item) =>
+          titleContainsQuery(item.title, currentQueryRef.current)
+        )
       : searchResults;
 
     const filtered = exactSearchFiltered.filter((item) => {
@@ -472,9 +573,9 @@ function SearchPageClient() {
       if (!aExactMatch && bExactMatch) return 1;
 
       // 最后按标题排序，正序时字母序，倒序时反字母序
-      return yearOrder === 'asc' ?
+      return yearOrder === 'asc'
-        a.title.localeCompare(b.title) :
+        ? a.title.localeCompare(b.title)
-        b.title.localeCompare(a.title);
+        : b.title.localeCompare(a.title);
     });
   }, [searchResults, filterAll, searchQuery, exactSearch]);
 
@@ -484,7 +585,8 @@ function SearchPageClient() {
     const filtered = aggregatedResults.filter(([_, group]) => {
       const gTitle = group[0]?.title ?? '';
       const gYear = group[0]?.year ?? 'unknown';
-      const hasSource = source === 'all' ? true : group.some((item) => item.source === source);
+      const hasSource =
+        source === 'all' ? true : group.some((item) => item.source === source);
       if (!hasSource) return false;
       if (title !== 'all' && gTitle !== title) return false;
       if (year !== 'all' && gYear !== year) return false;
@@ -513,26 +615,228 @@ function SearchPageClient() {
       // 最后按标题排序，正序时字母序，倒序时反字母序
       const aTitle = a[1][0].title;
       const bTitle = b[1][0].title;
-      return yearOrder === 'asc' ?
+      return yearOrder === 'asc'
-        aTitle.localeCompare(bTitle) :
+        ? aTitle.localeCompare(bTitle)
-        bTitle.localeCompare(aTitle);
+        : bTitle.localeCompare(aTitle);
     });
   }, [aggregatedResults, filterAgg, searchQuery]);
 
   const useVirtualGrid = useMemo(() => {
-    const cardCount = viewMode === 'agg' ? filteredAggResults.length : filteredAllResults.length;
+    const cardCount =
-    return cardCount >= 100;
+      viewMode === 'agg'
-  }, [viewMode, filteredAggResults.length, filteredAllResults.length]);
+        ? filteredAggResults.length
+        : filteredAllResults.length;
+    return resultDisplayMode === 'card' && cardCount >= 100;
+  }, [
+    viewMode,
+    resultDisplayMode,
+    filteredAggResults.length,
+    filteredAllResults.length,
+  ]);
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      localStorage.setItem('searchResultDisplayMode', resultDisplayMode);
+    }
+  }, [resultDisplayMode]);
+
+  const getSearchResultUrl = (params: {
+    title: string;
+    year?: string;
+    type?: string;
+    source?: string;
+    id?: string;
+    query?: string;
+    isAggregate?: boolean;
+  }) => {
+    const yearParam =
+      params.year && params.year !== 'unknown' ? `&year=${params.year}` : '';
+    const queryParam = params.query
+      ? `&stitle=${encodeURIComponent(params.query.trim())}`
+      : '';
+    const typeParam = params.type ? `&stype=${params.type}` : '';
+    const preferParam = params.isAggregate ? '&prefer=true' : '';
+
+    if (params.isAggregate || !params.source || !params.id) {
+      return `/play?title=${encodeURIComponent(
+        params.title.trim()
+      )}${yearParam}${typeParam}${preferParam}${queryParam}`;
+    }
+
+    return `/play?source=${params.source}&id=${
+      params.id
+    }&title=${encodeURIComponent(
+      params.title.trim()
+    )}${yearParam}${preferParam}${queryParam}${typeParam}`;
+  };
+
+  const renderTag = (label: string, className: string) => (
+    <span
+      className={`inline-flex items-center rounded-full px-2 py-1 text-[11px] font-medium ${className}`}
+    >
+      {label}
+    </span>
+  );
+
+  const renderListItem = (item: {
+    key: string;
+    title: string;
+    poster: string;
+    year?: string;
+    type: 'movie' | 'tv';
+    episodes?: number;
+    sourceName?: string;
+    sourceNames?: string[];
+    doubanId?: number;
+    desc?: string;
+    vodRemarks?: string;
+    isAggregate?: boolean;
+    source?: string;
+    id?: string;
+    query?: string;
+  }) => {
+    const yearText = item.year && item.year !== 'unknown' ? item.year : '';
+    const sourceTags = item.isAggregate
+      ? Array.from(new Set(item.sourceNames || []))
+      : item.sourceName
+      ? [item.sourceName]
+      : [];
+    const isExpanded = !!expandedSourceTags[item.key];
+    const maxVisibleSourceTags = 3;
+    const visibleSourceTags = isExpanded
+      ? sourceTags
+      : sourceTags.slice(0, maxVisibleSourceTags);
+    const hiddenSourceCount = Math.max(
+      0,
+      sourceTags.length - visibleSourceTags.length
+    );
+    const description = (item.desc || '').trim();
+    const itemUrl = getSearchResultUrl({
+      title: item.title,
+      year: item.year,
+      type: item.type,
+      source: item.source,
+      id: item.id,
+      query: item.query,
+      isAggregate: item.isAggregate,
+    });
+
+    return (
+      <button
+        key={item.key}
+        type='button'
+        onClick={() => router.push(itemUrl)}
+        className='group w-full rounded-2xl border border-gray-200/80 bg-white/90 p-3 text-left shadow-sm transition-all hover:border-green-300 hover:shadow-md dark:border-gray-700 dark:bg-gray-900/70 dark:hover:border-green-700'
+      >
+        <div className='flex items-start gap-4'>
+          <div className='relative h-32 w-24 shrink-0 overflow-hidden rounded-xl bg-gray-100 dark:bg-gray-800'>
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img
+              src={processImageUrl(item.poster)}
+              alt={item.title}
+              className='h-full w-full object-cover transition-transform duration-300 group-hover:scale-[1.04]'
+              loading='lazy'
+              onClick={(e) => {
+                e.stopPropagation();
+                setPreviewImage({
+                  url: processImageUrl(item.poster),
+                  alt: item.title,
+                });
+              }}
+            />
+          </div>
+
+          <div className='min-w-0 flex-1'>
+            <div className='flex items-start justify-between gap-3'>
+              <div className='min-w-0'>
+                <h3 className='line-clamp-2 text-base font-semibold text-gray-900 dark:text-gray-100'>
+                  {item.title}
+                </h3>
+                <div className='mt-2 flex flex-wrap gap-2'>
+                  {renderTag(
+                    item.type === 'movie' ? '电影' : '剧集',
+                    'bg-green-50 text-green-700 dark:bg-green-900/30 dark:text-green-300'
+                  )}
+                  {yearText &&
+                    renderTag(
+                      yearText,
+                      'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300'
+                    )}
+                  {item.episodes &&
+                    item.episodes > 0 &&
+                    renderTag(
+                      `${item.episodes}集`,
+                      'bg-blue-50 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300'
+                    )}
+                  {item.vodRemarks &&
+                    renderTag(
+                      item.vodRemarks,
+                      'bg-amber-50 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300'
+                    )}
+                  {item.doubanId &&
+                    item.doubanId > 0 &&
+                    renderTag(
+                      '豆瓣',
+                      'bg-emerald-50 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300'
+                    )}
+                </div>
+              </div>
+            </div>
+
+            {description && (
+              <p className='mt-3 line-clamp-3 text-sm leading-6 text-gray-600 dark:text-gray-400'>
+                {description}
+              </p>
+            )}
+          </div>
+        </div>
+
+        {sourceTags.length > 0 && (
+          <div
+            className={`mt-3 flex gap-2 ${
+              isExpanded ? 'flex-wrap' : 'flex-nowrap overflow-hidden'
+            }`}
+          >
+            {visibleSourceTags.map((sourceName) => (
+              <span
+                key={`${item.key}-${sourceName}`}
+                className='inline-flex max-w-full shrink-0 items-center truncate rounded-full border border-gray-200 bg-gray-50 px-2.5 py-1 text-xs text-gray-600 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300'
+                title={sourceName}
+              >
+                {sourceName}
+              </span>
+            ))}
+            {hiddenSourceCount > 0 && (
+              <button
+                type='button'
+                onClick={(e) => {
+                  e.stopPropagation();
+                  setExpandedSourceTags((prev) => ({
+                    ...prev,
+                    [item.key]: true,
+                  }));
+                }}
+                className='inline-flex shrink-0 items-center rounded-full border border-green-200 bg-green-50 px-2.5 py-1 text-xs font-medium text-green-700 transition-colors hover:bg-green-100 dark:border-green-800 dark:bg-green-900/30 dark:text-green-300 dark:hover:bg-green-900/50'
+                aria-label={`展开剩余${hiddenSourceCount}个来源`}
+              >
+                +{hiddenSourceCount}
+              </button>
+            )}
+          </div>
+        )}
+      </button>
+    );
+  };
 
   // 监听选项卡切换，自动执行搜索
   useEffect(() => {
     // 如果切换到网盘搜索选项卡，且有搜索关键词，且已显示结果，则触发搜索
     if (activeTab === 'pansou' && searchQuery.trim() && showResults) {
-      setTriggerPansouSearch(prev => !prev);
+      setTriggerPansouSearch((prev) => !prev);
     }
     // 如果切换到 ACG 磁力搜索选项卡，且有搜索关键词，且已显示结果，则触发搜索
     if (activeTab === 'acg' && searchQuery.trim() && showResults) {
-      setTriggerAcgSearch(prev => !prev);
+      setTriggerAcgSearch((prev) => !prev);
     }
   }, [activeTab]);
 
@@ -552,9 +856,9 @@ function SearchPageClient() {
         // 延迟触发搜索，确保组件已经切换到正确的标签页
         setTimeout(() => {
           if (typeParam === 'pansou') {
-            setTriggerPansouSearch(prev => !prev);
+            setTriggerPansouSearch((prev) => !prev);
           } else if (typeParam === 'acg') {
-            setTriggerAcgSearch(prev => !prev);
+            setTriggerAcgSearch((prev) => !prev);
           }
         }, 100);
       }
@@ -574,20 +878,22 @@ function SearchPageClient() {
 
     // 初始化繁体转简体转换器
     if (typeof window !== 'undefined') {
-      import('opencc-js').then((module) => {
+      import('opencc-js')
-        try {
+        .then((module) => {
-          const OpenCC = module.default || module;
+          try {
-          const converter = OpenCC.Converter({ from: 'hk', to: 'cn' });
+            const OpenCC = module.default || module;
-          converterRef.current = converter;
+            const converter = OpenCC.Converter({ from: 'hk', to: 'cn' });
-          setConverterReady(true);
+            converterRef.current = converter;
-        } catch (error) {
+            setConverterReady(true);
-          console.error('初始化繁体转简体转换器失败:', error);
+          } catch (error) {
+            console.error('初始化繁体转简体转换器失败:', error);
+            setConverterReady(true); // 即使失败也设置为 true，避免阻塞
+          }
+        })
+        .catch((error) => {
+          console.error('加载 opencc-js 失败:', error);
           setConverterReady(true); // 即使失败也设置为 true，避免阻塞
-        }
+        });
-      }).catch((error) => {
-        console.error('加载 opencc-js 失败:', error);
-        setConverterReady(true); // 即使失败也设置为 true，避免阻塞
-      });
     } else {
       setConverterReady(true);
     }
@@ -670,7 +976,9 @@ function SearchPageClient() {
 
     // 如果开启了繁体转简体，进行转换
     if (query && typeof window !== 'undefined') {
-      const searchTraditionalToSimplified = localStorage.getItem('searchTraditionalToSimplified');
+      const searchTraditionalToSimplified = localStorage.getItem(
+        'searchTraditionalToSimplified'
+      );
 
       if (searchTraditionalToSimplified === 'true' && converterRef.current) {
         try {
@@ -681,7 +989,13 @@ function SearchPageClient() {
           if (originalQuery !== query) {
             const trimmedConverted = query.trim();
             // 使用 replace 而不是 push，避免在历史记录中留下繁体版本
-            router.replace(`/search?q=${encodeURIComponent(trimmedConverted)}${searchParams.get('type') ? `&type=${searchParams.get('type')}` : ''}`);
+            router.replace(
+              `/search?q=${encodeURIComponent(trimmedConverted)}${
+                searchParams.get('type')
+                  ? `&type=${searchParams.get('type')}`
+                  : ''
+              }`
+            );
             return; // 等待 URL 更新后重新触发此 effect
           }
         } catch (error) {
@@ -696,7 +1010,7 @@ function SearchPageClient() {
       setSearchQuery(query);
 
       const trimmed = query.trim();
-      
+
       // 检查是否有缓存且不是强制刷新
       if (!forceRefresh) {
         const cachedResults = getCachedResults(trimmed);
@@ -714,19 +1028,21 @@ function SearchPageClient() {
           return;
         }
       }
-      
+
       // 如果是强制刷新，清除缓存
       if (forceRefresh) {
         clearCachedResults(trimmed);
         setForceRefresh(false);
       }
-      
+
       // 开始新搜索时，重置缓存标记
       setIsFromCache(false);
-      
+
       // 新搜索：关闭旧连接并清空结果
       if (eventSourceRef.current) {
-        try { eventSourceRef.current.close(); } catch { }
+        try {
+          eventSourceRef.current.close();
+        } catch {}
         eventSourceRef.current = null;
       }
       // 先设置加载状态，再清空结果，避免短暂显示"暂无搜索结果"
@@ -749,7 +1065,8 @@ function SearchPageClient() {
         if (savedFluidSearch !== null) {
           currentFluidSearch = JSON.parse(savedFluidSearch);
         } else {
-          const defaultFluidSearch = (window as any).RUNTIME_CONFIG?.FLUID_SEARCH !== false;
+          const defaultFluidSearch =
+            (window as any).RUNTIME_CONFIG?.FLUID_SEARCH !== false;
           currentFluidSearch = defaultFluidSearch;
         }
       }
@@ -761,7 +1078,9 @@ function SearchPageClient() {
 
       if (currentFluidSearch) {
         // 流式搜索：打开新的流式连接
-        const es = new EventSource(`/api/search/ws?q=${encodeURIComponent(trimmed)}`);
+        const es = new EventSource(
+          `/api/search/ws?q=${encodeURIComponent(trimmed)}`
+        );
         eventSourceRef.current = es;
 
         es.onmessage = (event) => {
@@ -776,9 +1095,15 @@ function SearchPageClient() {
                 break;
               case 'source_result': {
                 setCompletedSources((prev) => prev + 1);
-                if (Array.isArray(payload.results) && payload.results.length > 0) {
+                if (
+                  Array.isArray(payload.results) &&
+                  payload.results.length > 0
+                ) {
                   // 缓冲新增结果，节流刷入，避免频繁重渲染导致闪烁
-                  const activeYearOrder = (viewMode === 'agg' ? (filterAgg.yearOrder) : (filterAll.yearOrder));
+                  const activeYearOrder =
+                    viewMode === 'agg'
+                      ? filterAgg.yearOrder
+                      : filterAll.yearOrder;
                   const incoming: SearchResult[] =
                     activeYearOrder === 'none'
                       ? sortBatchForNoOrder(payload.results as SearchResult[])
@@ -826,13 +1151,15 @@ function SearchPageClient() {
                   });
                 }
                 setIsLoading(false);
-                try { es.close(); } catch { }
+                try {
+                  es.close();
+                } catch {}
                 if (eventSourceRef.current === es) {
                   eventSourceRef.current = null;
                 }
                 break;
             }
-          } catch { }
+          } catch {}
         };
 
         es.onerror = () => {
@@ -849,7 +1176,9 @@ function SearchPageClient() {
               setSearchResults((prev) => prev.concat(toAppend));
             });
           }
-          try { es.close(); } catch { }
+          try {
+            es.close();
+          } catch {}
           if (eventSourceRef.current === es) {
             eventSourceRef.current = null;
           }
@@ -857,12 +1186,13 @@ function SearchPageClient() {
       } else {
         // 传统搜索：使用普通接口
         fetch(`/api/search?q=${encodeURIComponent(trimmed)}`)
-          .then(response => response.json())
+          .then((response) => response.json())
-          .then(data => {
+          .then((data) => {
             if (currentQueryRef.current !== trimmed) return;
 
             if (data.results && Array.isArray(data.results)) {
-              const activeYearOrder = (viewMode === 'agg' ? (filterAgg.yearOrder) : (filterAll.yearOrder));
+              const activeYearOrder =
+                viewMode === 'agg' ? filterAgg.yearOrder : filterAll.yearOrder;
               const results: SearchResult[] =
                 activeYearOrder === 'none'
                   ? sortBatchForNoOrder(data.results as SearchResult[])
@@ -894,7 +1224,9 @@ function SearchPageClient() {
   useEffect(() => {
     return () => {
       if (eventSourceRef.current) {
-        try { eventSourceRef.current.close(); } catch { }
+        try {
+          eventSourceRef.current.close();
+        } catch {}
         eventSourceRef.current = null;
       }
       if (flushTimerRef.current) {
@@ -932,7 +1264,9 @@ function SearchPageClient() {
 
     // 如果开启了繁体转简体，进行转换
     if (typeof window !== 'undefined') {
-      const searchTraditionalToSimplified = localStorage.getItem('searchTraditionalToSimplified');
+      const searchTraditionalToSimplified = localStorage.getItem(
+        'searchTraditionalToSimplified'
+      );
       if (searchTraditionalToSimplified === 'true' && converterRef.current) {
         try {
           trimmed = converterRef.current(trimmed);
@@ -957,11 +1291,11 @@ function SearchPageClient() {
     } else if (activeTab === 'pansou') {
       // 网盘搜索 - 触发搜索
       router.push(`/search?q=${encodeURIComponent(trimmed)}&type=pansou`);
-      setTriggerPansouSearch(prev => !prev); // 切换状态来触发搜索
+      setTriggerPansouSearch((prev) => !prev); // 切换状态来触发搜索
     } else if (activeTab === 'acg') {
       // ACG 磁力搜索 - 触发搜索
       router.push(`/search?q=${encodeURIComponent(trimmed)}&type=acg`);
-      setTriggerAcgSearch(prev => !prev);
+      setTriggerAcgSearch((prev) => !prev);
     }
   };
 
@@ -970,7 +1304,9 @@ function SearchPageClient() {
 
     // 如果开启了繁体转简体，进行转换
     if (typeof window !== 'undefined') {
-      const searchTraditionalToSimplified = localStorage.getItem('searchTraditionalToSimplified');
+      const searchTraditionalToSimplified = localStorage.getItem(
+        'searchTraditionalToSimplified'
+      );
       if (searchTraditionalToSimplified === 'true' && converterRef.current) {
         try {
           processedSuggestion = converterRef.current(suggestion);
@@ -991,16 +1327,22 @@ function SearchPageClient() {
     // 根据当前选项卡执行不同的搜索
     if (activeTab === 'video') {
       // 影视搜索
-      router.push(`/search?q=${encodeURIComponent(processedSuggestion)}&type=video`);
+      router.push(
+        `/search?q=${encodeURIComponent(processedSuggestion)}&type=video`
+      );
       // 其余由 searchParams 变化的 effect 处理
     } else if (activeTab === 'pansou') {
       // 网盘搜索 - 触发搜索
-      router.push(`/search?q=${encodeURIComponent(processedSuggestion)}&type=pansou`);
+      router.push(
-      setTriggerPansouSearch(prev => !prev);
+        `/search?q=${encodeURIComponent(processedSuggestion)}&type=pansou`
+      );
+      setTriggerPansouSearch((prev) => !prev);
     } else if (activeTab === 'acg') {
       // ACG 磁力搜索 - 触发搜索
-      router.push(`/search?q=${encodeURIComponent(processedSuggestion)}&type=acg`);
+      router.push(
-      setTriggerAcgSearch(prev => !prev);
+        `/search?q=${encodeURIComponent(processedSuggestion)}&type=acg`
+      );
+      setTriggerAcgSearch((prev) => !prev);
     }
   };
 
@@ -1025,7 +1367,9 @@ function SearchPageClient() {
     // 如果有搜索关键词，更新 URL
     const currentQuery = searchParams.get('q');
     if (currentQuery) {
-      router.push(`/search?q=${encodeURIComponent(currentQuery)}&type=${newTab}`);
+      router.push(
+        `/search?q=${encodeURIComponent(currentQuery)}&type=${newTab}`
+      );
     }
   };
 
@@ -1044,7 +1388,7 @@ function SearchPageClient() {
                 onChange={handleInputChange}
                 onFocus={handleInputFocus}
                 placeholder='搜索电影、电视剧...'
-                autoComplete="off"
+                autoComplete='off'
                 className='w-full h-12 rounded-lg bg-gray-50/80 py-3 pl-10 pr-12 text-sm text-gray-700 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-green-400 focus:bg-white border border-gray-200/50 shadow-sm dark:bg-gray-800 dark:text-gray-300 dark:placeholder-gray-500 dark:focus:bg-gray-700 dark:border-gray-700'
               />
 
@@ -1112,7 +1456,9 @@ function SearchPageClient() {
                   : []),
               ]}
               active={activeTab}
-              onChange={(value) => handleTabChange(value as 'video' | 'pansou' | 'acg')}
+              onChange={(value) =>
+                handleTabChange(value as 'video' | 'pansou' | 'acg')
+              }
             />
           </div>
         </div>
@@ -1126,178 +1472,284 @@ function SearchPageClient() {
                   {/* 影视搜索结果 */}
                   {/* 标题 */}
                   <div className='mb-4 flex items-center justify-between'>
-                <h2 className='text-xl font-bold text-gray-800 dark:text-gray-200'>
+                    <h2 className='text-xl font-bold text-gray-800 dark:text-gray-200'>
-                  搜索结果
+                      搜索结果
-                  {isFromCache ? (
+                      {isFromCache ? (
-                    <span className='ml-2 px-2 py-0.5 text-xs font-medium text-green-600 bg-green-50 rounded-md dark:text-green-400 dark:bg-green-900/30'>
+                        <span className='ml-2 rounded-md bg-green-50 px-2 py-0.5 text-xs font-medium text-green-600 dark:bg-green-900/30 dark:text-green-400'>
-                      缓存
+                          缓存
-                    </span>
-                  ) : (
-                    <>
-                      {totalSources > 0 && useFluidSearch && (
-                        <span className='ml-2 text-sm font-normal text-gray-500 dark:text-gray-400'>
-                          {completedSources}/{totalSources}
                         </span>
+                      ) : (
+                        <>
+                          {totalSources > 0 && useFluidSearch && (
+                            <span className='ml-2 text-sm font-normal text-gray-500 dark:text-gray-400'>
+                              {completedSources}/{totalSources}
+                            </span>
+                          )}
+                          {isLoading && useFluidSearch && (
+                            <span className='ml-2 inline-block align-middle'>
+                              <span className='inline-block h-3 w-3 animate-spin rounded-full border-2 border-gray-300 border-t-green-500'></span>
+                            </span>
+                          )}
+                        </>
                       )}
-                      {isLoading && useFluidSearch && (
+                    </h2>
-                        <span className='ml-2 inline-block align-middle'>
+                    {searchQuery && (
-                          <span className='inline-block h-3 w-3 border-2 border-gray-300 border-t-green-500 rounded-full animate-spin'></span>
+                      <button
-                        </span>
+                        onClick={() => {
-                      )}
+                          setForceRefresh(true);
-                    </>
+                        }}
-                  )}
+                        disabled={isLoading}
-                </h2>
+                        className='flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm text-gray-600 transition-colors hover:bg-green-50 hover:text-green-600 disabled:cursor-not-allowed disabled:opacity-50 dark:text-gray-400 dark:hover:bg-gray-700/50 dark:hover:text-green-400'
-                {/* 强制刷新按钮 */}
+                        aria-label='强制刷新搜索结果'
-                {searchQuery && (
-                  <button
-                    onClick={() => {
-                      setForceRefresh(true);
-                    }}
-                    disabled={isLoading}
-                    className='flex items-center gap-1.5 px-3 py-1.5 text-sm text-gray-600 hover:text-green-600 hover:bg-green-50 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed dark:text-gray-400 dark:hover:text-green-400 dark:hover:bg-gray-700/50'
-                    aria-label='强制刷新搜索结果'
-                  >
-                    <RefreshCw className={`h-4 w-4 ${isLoading ? 'animate-spin' : ''}`} />
-                    <span>刷新</span>
-                  </button>
-                )}
-              </div>
-              {/* 筛选器 + 聚合开关 同行 */}
-              <div className='mb-8 flex items-center justify-between gap-3'>
-                <div className='flex-1 min-w-0'>
-                  {viewMode === 'agg' ? (
-                    <SearchResultFilter
-                      categories={filterOptions.categoriesAgg}
-                      values={filterAgg}
-                      onChange={(v) => setFilterAgg(v as any)}
-                    />
-                  ) : (
-                    <SearchResultFilter
-                      categories={filterOptions.categoriesAll}
-                      values={filterAll}
-                      onChange={(v) => setFilterAll(v as any)}
-                    />
-                  )}
-                </div>
-                {/* 聚合开关 */}
-                <label className='flex items-center gap-2 cursor-pointer select-none shrink-0'>
-                  <span className='text-xs sm:text-sm text-gray-700 dark:text-gray-300'>聚合</span>
-                  <div className='relative'>
-                    <input
-                      type='checkbox'
-                      className='sr-only peer'
-                      checked={viewMode === 'agg'}
-                      onChange={() => setViewMode(viewMode === 'agg' ? 'all' : 'agg')}
-                    />
-                    <div className='w-9 h-5 bg-gray-300 rounded-full peer-checked:bg-green-500 transition-colors dark:bg-gray-600'></div>
-                    <div className='absolute top-0.5 left-0.5 w-4 h-4 bg-white rounded-full transition-transform peer-checked:translate-x-4'></div>
-                  </div>
-                </label>
-              </div>
-              {searchResults.length === 0 ? (
-                isLoading ? (
-                  <div className='flex justify-center items-center h-40'>
-                    <div className='animate-spin rounded-full h-8 w-8 border-b-2 border-green-500'></div>
-                  </div>
-                ) : (
-                  <div className='text-center text-gray-500 py-8 dark:text-gray-400'>
-                    未找到相关结果
-                  </div>
-                )
-              ) : (
-                (() => {
-                  const gridClassName =
-                    'justify-start grid grid-cols-3 gap-x-2 gap-y-14 sm:gap-y-20 px-0 sm:px-2 sm:grid-cols-[repeat(auto-fill,_minmax(11rem,_1fr))] sm:gap-x-8';
-
-                  const gridChildren =
-                    viewMode === 'agg'
-                      ? filteredAggResults.map(([mapKey, group]) => {
-                        const title = group[0]?.title || '';
-                        const poster = group[0]?.poster || '';
-                        const year = group[0]?.year || 'unknown';
-                        const { episodes, source_names, douban_id } = computeGroupStats(group);
-
-                        // 从 mapKey 中提取类型（mapKey 格式：normalizedTitle-type-year）
-                        // 找到最后一个 '-' 之前的部分，再找倒数第二个 '-'
-                        const lastDashIndex = mapKey.lastIndexOf('-');
-                        const secondLastDashIndex = mapKey.lastIndexOf('-', lastDashIndex - 1);
-                        const type = secondLastDashIndex > 0
-                          ? mapKey.substring(secondLastDashIndex + 1, lastDashIndex) as 'movie' | 'tv'
-                          : (episodes === 1 ? 'movie' : 'tv'); // 兜底
-
-                        // 如果该聚合第一次出现，写入初始统计
-                        if (!groupStatsRef.current.has(mapKey)) {
-                          groupStatsRef.current.set(mapKey, { episodes, source_names, douban_id });
-                        }
-
-                        return (
-                          <div key={`agg-${mapKey}`} className='w-full'>
-                            <VideoCard
-                              ref={getGroupRef(mapKey)}
-                              from='search'
-                              isAggregate={true}
-                              title={title}
-                              poster={poster}
-                              year={year}
-                              episodes={episodes}
-                              source_names={source_names}
-                              douban_id={douban_id}
-                              query={
-                                searchQuery.trim() !== title
-                                  ? searchQuery.trim()
-                                  : ''
-                              }
-                              type={type}
-                            />
-                          </div>
-                        );
-                      })
-                      : filteredAllResults.map((item) => (
-                        <div
-                          key={`all-${item.source}-${item.id}`}
-                          className='w-full'
-                        >
-                          <VideoCard
-                            id={item.id}
-                            title={item.title}
-                            poster={item.poster}
-                            episodes={item.episodes.length}
-                            source={item.source}
-                            source_name={item.source_name}
-                            douban_id={item.douban_id}
-                            query={
-                              searchQuery.trim() !== item.title
-                                ? searchQuery.trim()
-                                : ''
-                            }
-                            year={item.year}
-                            from='search'
-                            type={item.episodes.length > 1 ? 'tv' : 'movie'}
-                          />
-                        </div>
-                      ));
-
-                  if (useVirtualGrid) {
-                    return (
-                      <VirtualScrollableGrid
-                        key={`search-results-virtual-${viewMode}`}
-                        gridClassName={gridClassName}
                       >
-                        {gridChildren}
+                        <RefreshCw
-                      </VirtualScrollableGrid>
+                          className={`h-4 w-4 ${
-                    );
+                            isLoading ? 'animate-spin' : ''
-                  }
+                          }`}
-
+                        />
-                  return (
+                        <span>刷新</span>
-                    <div
+                      </button>
-                      key={`search-results-${viewMode}`}
+                    )}
-                      className={gridClassName}
+                  </div>
-                    >
+                  <div className='mb-4 flex items-center gap-3'>
-                      {gridChildren}
+                    <div className='min-w-0 flex-1'>
+                      {viewMode === 'agg' ? (
+                        <SearchResultFilter
+                          categories={filterOptions.categoriesAgg}
+                          values={filterAgg}
+                          onChange={(v) => setFilterAgg(v as any)}
+                        />
+                      ) : (
+                        <SearchResultFilter
+                          categories={filterOptions.categoriesAll}
+                          values={filterAll}
+                          onChange={(v) => setFilterAll(v as any)}
+                        />
+                      )}
                     </div>
-                  );
+                    <div className='flex shrink-0 items-center justify-end self-center'>
-                })()
+                      <label className='flex shrink-0 cursor-pointer select-none items-center gap-2'>
-              )}
+                        <span className='text-xs text-gray-700 dark:text-gray-300 sm:text-sm'>
+                          聚合
+                        </span>
+                        <div className='relative'>
+                          <input
+                            type='checkbox'
+                            className='peer sr-only'
+                            checked={viewMode === 'agg'}
+                            onChange={() =>
+                              setViewMode(viewMode === 'agg' ? 'all' : 'agg')
+                            }
+                          />
+                          <div className='h-5 w-9 rounded-full bg-gray-300 transition-colors peer-checked:bg-green-500 dark:bg-gray-600'></div>
+                          <div className='absolute left-0.5 top-0.5 h-4 w-4 rounded-full bg-white transition-transform peer-checked:translate-x-4'></div>
+                        </div>
+                      </label>
+                    </div>
+                  </div>
+                  <div className='mb-8 flex justify-center'>
+                    <div className='inline-flex items-center rounded-xl border border-gray-200 bg-white p-1 shadow-sm dark:border-gray-700 dark:bg-gray-900'>
+                      <button
+                        type='button'
+                        onClick={() => setResultDisplayMode('card')}
+                        className={`inline-flex items-center gap-1 rounded-lg px-3 py-1.5 text-sm transition-colors ${
+                          resultDisplayMode === 'card'
+                            ? 'bg-green-500 text-white'
+                            : 'text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800'
+                        }`}
+                        aria-label='切换为卡片视图'
+                      >
+                        <Grid2x2 className='h-4 w-4' />
+                        <span>卡片</span>
+                      </button>
+                      <button
+                        type='button'
+                        onClick={() => setResultDisplayMode('list')}
+                        className={`inline-flex items-center gap-1 rounded-lg px-3 py-1.5 text-sm transition-colors ${
+                          resultDisplayMode === 'list'
+                            ? 'bg-green-500 text-white'
+                            : 'text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800'
+                        }`}
+                        aria-label='切换为列表视图'
+                      >
+                        <List className='h-4 w-4' />
+                        <span>列表</span>
+                      </button>
+                    </div>
+                  </div>
+                  {searchResults.length === 0 ? (
+                    isLoading ? (
+                      <div className='flex justify-center items-center h-40'>
+                        <div className='animate-spin rounded-full h-8 w-8 border-b-2 border-green-500'></div>
+                      </div>
+                    ) : (
+                      <div className='text-center text-gray-500 py-8 dark:text-gray-400'>
+                        未找到相关结果
+                      </div>
+                    )
+                  ) : (
+                    (() => {
+                      const gridClassName =
+                        'justify-start grid grid-cols-3 gap-x-2 gap-y-14 px-0 sm:grid-cols-[repeat(auto-fill,_minmax(11rem,_1fr))] sm:gap-x-8 sm:gap-y-20 sm:px-2';
+
+                      const listClassName = 'space-y-4';
+
+                      const resultChildren =
+                        viewMode === 'agg'
+                          ? filteredAggResults.map(([mapKey, group]) => {
+                              const title = group[0]?.title || '';
+                              const poster = group[0]?.poster || '';
+                              const year = group[0]?.year || 'unknown';
+                              const desc =
+                                group.find((entry) => entry.desc?.trim())
+                                  ?.desc || '';
+                              const vodRemarks =
+                                group.find((entry) => entry.vod_remarks?.trim())
+                                  ?.vod_remarks || '';
+                              const { episodes, source_names, douban_id } =
+                                computeGroupStats(group);
+
+                              const lastDashIndex = mapKey.lastIndexOf('-');
+                              const secondLastDashIndex = mapKey.lastIndexOf(
+                                '-',
+                                lastDashIndex - 1
+                              );
+                              const type =
+                                secondLastDashIndex > 0
+                                  ? (mapKey.substring(
+                                      secondLastDashIndex + 1,
+                                      lastDashIndex
+                                    ) as 'movie' | 'tv')
+                                  : episodes === 1
+                                  ? 'movie'
+                                  : 'tv';
+
+                              if (!groupStatsRef.current.has(mapKey)) {
+                                groupStatsRef.current.set(mapKey, {
+                                  episodes,
+                                  source_names,
+                                  douban_id,
+                                });
+                              }
+
+                              if (resultDisplayMode === 'list') {
+                                return renderListItem({
+                                  key: `agg-${mapKey}`,
+                                  title,
+                                  poster,
+                                  year,
+                                  type,
+                                  episodes,
+                                  sourceNames: source_names,
+                                  doubanId: douban_id,
+                                  desc,
+                                  vodRemarks,
+                                  isAggregate: true,
+                                  query:
+                                    searchQuery.trim() !== title
+                                      ? searchQuery.trim()
+                                      : '',
+                                });
+                              }
+
+                              return (
+                                <div key={`agg-${mapKey}`} className='w-full'>
+                                  <VideoCard
+                                    ref={getGroupRef(mapKey)}
+                                    from='search'
+                                    isAggregate={true}
+                                    title={title}
+                                    poster={poster}
+                                    year={year}
+                                    episodes={episodes}
+                                    source_names={source_names}
+                                    douban_id={douban_id}
+                                    query={
+                                      searchQuery.trim() !== title
+                                        ? searchQuery.trim()
+                                        : ''
+                                    }
+                                    type={type}
+                                  />
+                                </div>
+                              );
+                            })
+                          : filteredAllResults.map((item) => {
+                              const type =
+                                item.episodes.length > 1 ? 'tv' : 'movie';
+
+                              if (resultDisplayMode === 'list') {
+                                return renderListItem({
+                                  key: `all-${item.source}-${item.id}`,
+                                  id: item.id,
+                                  title: item.title,
+                                  poster: item.poster,
+                                  episodes: item.episodes.length,
+                                  source: item.source,
+                                  sourceName: item.source_name,
+                                  doubanId: item.douban_id,
+                                  query:
+                                    searchQuery.trim() !== item.title
+                                      ? searchQuery.trim()
+                                      : '',
+                                  year: item.year,
+                                  type,
+                                  desc: item.desc,
+                                  vodRemarks: item.vod_remarks,
+                                });
+                              }
+
+                              return (
+                                <div
+                                  key={`all-${item.source}-${item.id}`}
+                                  className='w-full'
+                                >
+                                  <VideoCard
+                                    id={item.id}
+                                    title={item.title}
+                                    poster={item.poster}
+                                    episodes={item.episodes.length}
+                                    source={item.source}
+                                    source_name={item.source_name}
+                                    douban_id={item.douban_id}
+                                    query={
+                                      searchQuery.trim() !== item.title
+                                        ? searchQuery.trim()
+                                        : ''
+                                    }
+                                    year={item.year}
+                                    from='search'
+                                    type={type}
+                                  />
+                                </div>
+                              );
+                            });
+
+                      if (useVirtualGrid) {
+                        return (
+                          <VirtualScrollableGrid
+                            key={`search-results-virtual-${viewMode}`}
+                            gridClassName={gridClassName}
+                          >
+                            {resultChildren}
+                          </VirtualScrollableGrid>
+                        );
+                      }
+
+                      return (
+                        <div
+                          key={`search-results-${viewMode}-${resultDisplayMode}`}
+                          className={
+                            resultDisplayMode === 'list'
+                              ? listClassName
+                              : gridClassName
+                          }
+                        >
+                          {resultChildren}
+                        </div>
+                      );
+                    })()
+                  )}
                 </>
               ) : activeTab === 'pansou' ? (
                 <>
@@ -1357,20 +1809,26 @@ function SearchPageClient() {
                         if (activeTab === 'video') {
                           // 影视搜索
                           router.push(
-                            `/search?q=${encodeURIComponent(item.trim())}&type=video`
+                            `/search?q=${encodeURIComponent(
+                              item.trim()
+                            )}&type=video`
                           );
                         } else if (activeTab === 'pansou') {
                           // 网盘搜索
                           router.push(
-                            `/search?q=${encodeURIComponent(item.trim())}&type=pansou`
+                            `/search?q=${encodeURIComponent(
+                              item.trim()
+                            )}&type=pansou`
                           );
-                          setTriggerPansouSearch(prev => !prev);
+                          setTriggerPansouSearch((prev) => !prev);
                         } else if (activeTab === 'acg') {
                           // ACG 磁力搜索
                           router.push(
-                            `/search?q=${encodeURIComponent(item.trim())}&type=acg`
+                            `/search?q=${encodeURIComponent(
+                              item.trim()
+                            )}&type=acg`
                           );
-                          setTriggerAcgSearch(prev => !prev);
+                          setTriggerAcgSearch((prev) => !prev);
                         }
                       }}
                       className='px-4 py-2 bg-gray-500/10 hover:bg-gray-300 rounded-full text-sm text-gray-700 transition-colors duration-200 dark:bg-gray-700/50 dark:hover:bg-gray-600 dark:text-gray-300'
@@ -1397,13 +1855,23 @@ function SearchPageClient() {
         </div>
       </div>
 
+      {previewImage && (
+        <ImageViewer
+          isOpen={!!previewImage}
+          onClose={() => setPreviewImage(null)}
+          imageUrl={previewImage.url}
+          alt={previewImage.alt}
+        />
+      )}
+
       {/* 返回顶部悬浮按钮 */}
       <button
         onClick={scrollToTop}
-        className={`fixed bottom-20 md:bottom-6 right-6 z-[500] w-12 h-12 bg-green-500/90 hover:bg-green-500 text-white rounded-full shadow-lg backdrop-blur-sm transition-all duration-300 ease-in-out flex items-center justify-center group ${showBackToTop
+        className={`fixed bottom-20 md:bottom-6 right-6 z-[500] w-12 h-12 bg-green-500/90 hover:bg-green-500 text-white rounded-full shadow-lg backdrop-blur-sm transition-all duration-300 ease-in-out flex items-center justify-center group ${
-          ? 'opacity-100 translate-y-0 pointer-events-auto'
+          showBackToTop
-          : 'opacity-0 translate-y-4 pointer-events-none'
+            ? 'opacity-100 translate-y-0 pointer-events-auto'
-          }`}
+            : 'opacity-0 translate-y-4 pointer-events-none'
+        }`}
         aria-label='返回顶部'
       >
         <ChevronUp className='w-6 h-6 transition-transform group-hover:scale-110' />