fix: sources panel mobile optimize

src/app/search/page.tsx

@@ -66,22 +66,8 @@ function SearchPageClient() {
       });
       return res;
     })();
-    const douban_id = (() => {
-      const idMap = new Map<number, number>();
-      group.forEach((g) => {
-        if (g.douban_id && g.douban_id !== 0) {
-          idMap.set(g.douban_id, (idMap.get(g.douban_id) || 0) + 1);
-        }
-      });
-      let max = 0;
-      let res: number | undefined = undefined;
-      idMap.forEach((v, 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[];
-    return { episodes, douban_id, source_names };
+    return { episodes, source_names };
   };
   // 过滤器：非聚合与聚合
   const [filterAll, setFilterAll] = useState<{ source: string; title: string; year: string; yearOrder: 'none' | 'asc' | 'desc' }>({
@@ -189,9 +175,6 @@ function SearchPageClient() {
       // 对比变化并调用对应的 set 方法
       const ref = groupRefs.current.get(mapKey);
       if (ref && ref.current) {
-        if (prev.douban_id !== stats.douban_id) {
-          ref.current.setDoubanId(stats.douban_id);
-        }
         if (prev.episodes !== stats.episodes) {
           ref.current.setEpisodes(stats.episodes);
         }
@@ -680,12 +663,12 @@ function SearchPageClient() {
                       const title = group[0]?.title || '';
                       const poster = group[0]?.poster || '';
                       const year = group[0]?.year || 'unknown';
-                      const { episodes, douban_id, source_names } = computeGroupStats(group);
+                      const { episodes, source_names } = computeGroupStats(group);
                       const type = episodes === 1 ? 'movie' : 'tv';
 
                       // 如果该聚合第一次出现，写入初始统计
                       if (!groupStatsRef.current.has(mapKey)) {
-                        groupStatsRef.current.set(mapKey, { episodes, douban_id, source_names });
+                        groupStatsRef.current.set(mapKey, { episodes, source_names });
                       }
 
                       return (
@@ -698,7 +681,6 @@ function SearchPageClient() {
                             poster={poster}
                             year={year}
                             episodes={episodes}
-                            douban_id={douban_id}
                             source_names={source_names}
                             query={
                               searchQuery.trim() !== title

src/components/VideoCard.tsx

@@ -47,7 +47,6 @@ export interface VideoCardProps {
 }
 
 export type VideoCardHandle = {
-  setDoubanId: (id?: number) => void;
   setEpisodes: (episodes?: number) => void;
   setSourceNames: (names?: string[]) => void;
 };
@@ -80,9 +79,6 @@ const VideoCard = forwardRef<VideoCardHandle, VideoCardProps>(function VideoCard
   const [isLoading, setIsLoading] = useState(false);
 
   // 可外部修改的可控字段
-  const [dynamicDoubanId, setDynamicDoubanId] = useState<number | undefined>(
-    douban_id
-  );
   const [dynamicEpisodes, setDynamicEpisodes] = useState<number | undefined>(
     episodes
   );
@@ -90,10 +86,6 @@ const VideoCard = forwardRef<VideoCardHandle, VideoCardProps>(function VideoCard
     source_names
   );
 
-  useEffect(() => {
-    setDynamicDoubanId(douban_id);
-  }, [douban_id]);
-
   useEffect(() => {
     setDynamicEpisodes(episodes);
   }, [episodes]);
@@ -103,7 +95,6 @@ const VideoCard = forwardRef<VideoCardHandle, VideoCardProps>(function VideoCard
   }, [source_names]);
 
   useImperativeHandle(ref, () => ({
-    setDoubanId: (id?: number) => setDynamicDoubanId(id),
     setEpisodes: (eps?: number) => setDynamicEpisodes(eps),
     setSourceNames: (names?: string[]) => setDynamicSourceNames(names),
   }));
@@ -112,7 +103,7 @@ const VideoCard = forwardRef<VideoCardHandle, VideoCardProps>(function VideoCard
   const actualPoster = poster;
   const actualSource = source;
   const actualId = id;
-  const actualDoubanId = dynamicDoubanId;
+  const actualDoubanId = douban_id;
   const actualEpisodes = dynamicEpisodes;
   const actualYear = year;
   const actualQuery = query || '';
@@ -274,7 +265,7 @@ const VideoCard = forwardRef<VideoCardHandle, VideoCardProps>(function VideoCard
       },
     };
     return configs[from] || configs.search;
-  }, [from, isAggregate, actualDoubanId, rate]);
+  }, [from, isAggregate, douban_id, rate]);
 
   return (
     <div
@@ -395,7 +386,7 @@ const VideoCard = forwardRef<VideoCardHandle, VideoCardProps>(function VideoCard
           return (
             <div className='absolute bottom-2 right-2 opacity-0 transition-all duration-300 ease-in-out delay-75 group-hover:opacity-100'>
               <div className='relative group/sources'>
-                <div className='bg-gray-700 text-white text-xs font-bold w-7 h-7 rounded-full flex items-center justify-center shadow-md hover:bg-gray-600 hover:scale-[1.1] transition-all duration-300 ease-out cursor-pointer'>
+                <div className='bg-gray-700 text-white text-xs font-bold w-6 h-6 sm:w-7 sm:h-7 rounded-full flex items-center justify-center shadow-md hover:bg-gray-600 hover:scale-[1.1] transition-all duration-300 ease-out cursor-pointer'>
                   {sourceCount}
                 </div>
 
@@ -420,14 +411,14 @@ const VideoCard = forwardRef<VideoCardHandle, VideoCardProps>(function VideoCard
                   const remainingCount = sortedSources.length - maxDisplayCount;
 
                   return (
-                    <div className='absolute bottom-full right-0 mb-2 opacity-0 invisible group-hover/sources:opacity-100 group-hover/sources:visible transition-all duration-200 ease-out delay-100 pointer-events-none z-50'>
+                    <div className='absolute bottom-full mb-2 opacity-0 invisible group-hover/sources:opacity-100 group-hover/sources:visible transition-all duration-200 ease-out delay-100 pointer-events-none z-50 right-0 sm:right-0 -translate-x-0 sm:translate-x-0'>
-                      <div className='bg-gray-800/90 backdrop-blur-sm text-white text-xs rounded-lg shadow-xl border border-white/10 p-2 min-w-[120px] max-w-[200px]'>
+                      <div className='bg-gray-800/90 backdrop-blur-sm text-white text-xs sm:text-xs rounded-lg shadow-xl border border-white/10 p-1.5 sm:p-2 min-w-[100px] sm:min-w-[120px] max-w-[140px] sm:max-w-[200px] overflow-hidden'>
                         {/* 单列布局 */}
-                        <div className='space-y-1'>
+                        <div className='space-y-0.5 sm:space-y-1'>
                           {displaySources.map((sourceName, index) => (
-                            <div key={index} className='flex items-center gap-1.5'>
+                            <div key={index} className='flex items-center gap-1 sm:gap-1.5'>
-                              <div className='w-1 h-1 bg-blue-400 rounded-full flex-shrink-0'></div>
+                              <div className='w-0.5 h-0.5 sm:w-1 sm:h-1 bg-blue-400 rounded-full flex-shrink-0'></div>
-                              <span className='truncate text-xs' title={sourceName}>
+                              <span className='truncate text-[10px] sm:text-xs leading-tight' title={sourceName}>
                                 {sourceName}
                               </span>
                             </div>
@@ -436,15 +427,15 @@ const VideoCard = forwardRef<VideoCardHandle, VideoCardProps>(function VideoCard
 
                         {/* 显示更多提示 */}
                         {hasMore && (
-                          <div className='mt-2 pt-1.5 border-t border-gray-700/50'>
+                          <div className='mt-1 sm:mt-2 pt-1 sm:pt-1.5 border-t border-gray-700/50'>
                             <div className='flex items-center justify-center text-gray-400'>
-                              <span className='text-xs font-medium'>+{remainingCount} 播放源</span>
+                              <span className='text-[10px] sm:text-xs font-medium'>+{remainingCount} 播放源</span>
                             </div>
                           </div>
                         )}
 
                         {/* 小箭头 */}
-                        <div className='absolute top-full right-3 w-0 h-0 border-l-[6px] border-r-[6px] border-t-[6px] border-transparent border-t-gray-800/90'></div>
+                        <div className='absolute top-full right-2 sm:right-3 w-0 h-0 border-l-[4px] border-r-[4px] border-t-[4px] sm:border-l-[6px] sm:border-r-[6px] sm:border-t-[6px] border-transparent border-t-gray-800/90'></div>
                       </div>
                     </div>
                   );