增强弹幕选集面板，并且修复手动选择弹幕因缓存问题无法变更弹幕集数

src/app/play/page.tsx

@@ -4299,6 +4299,7 @@ function PlayPageClient() {
     episodeTitle?: string;
     searchKeyword?: string;
     danmakuCount?: number;
+    bypassCache?: boolean;
   }) => {
     if (!danmakuPluginRef.current) {
       console.warn('弹幕插件未初始化');
@@ -4328,7 +4329,13 @@ function PlayPageClient() {
 
       console.log(`[弹幕加载] episodeId=${episodeId}, title="${title}", episodeIndex=${episodeIndex}`);
 
-      const comments = await getDanmakuById(episodeId, title, episodeIndex, metadata);
+      const comments = await getDanmakuById(
+        episodeId,
+        title,
+        episodeIndex,
+        { bypassCache: metadata?.bypassCache === true },
+        metadata
+      );
 
       if (comments.length === 0) {
         console.warn('未获取到弹幕数据');
@@ -4491,6 +4498,7 @@ function PlayPageClient() {
                 episode.episodeId,
                 title,
                 nextEpisodeIndex,
+                undefined,
                 {
                   animeId: savedAnimeId,
                   animeTitle: episodesResult.bangumi.animeTitle,
@@ -4542,6 +4550,7 @@ function PlayPageClient() {
             episode.episodeId,
             title,
             nextEpisodeIndex,
+            undefined,
             {
               animeId: selectedAnime.animeId,
               animeTitle: selectedAnime.animeTitle,
@@ -4683,6 +4692,7 @@ function PlayPageClient() {
       episodeTitle: selection.episodeTitle,
       searchKeyword: selection.searchKeyword,
       danmakuCount: selection.danmakuCount,
+      bypassCache: isManual,
     });
   };
 

src/components/DanmakuPanel.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { getEpisodes, searchAnime } from '@/lib/danmaku/api';
 import type {
@@ -35,6 +35,10 @@ export default function DanmakuPanel({
   const [searchError, setSearchError] = useState<string | null>(null);
   const initializedRef = useRef(false); // 标记是否已初始化过
   const fileInputRef = useRef<HTMLInputElement>(null);
+  const [episodeGroupIndex, setEpisodeGroupIndex] = useState(0);
+  const [episodeDescending, setEpisodeDescending] = useState(false);
+  const [episodeViewMode, setEpisodeViewMode] = useState<'list' | 'grid'>('list');
+  const episodesPerGroup = 50;
 
   // 搜索弹幕
   const handleSearch = useCallback(async (keyword: string) => {
@@ -112,6 +116,7 @@ export default function DanmakuPanel({
   const handleBackToResults = useCallback(() => {
     setSelectedAnime(null);
     setEpisodes([]);
+    setEpisodeGroupIndex(0);
   }, []);
 
   // 判断当前剧集是否已选中
@@ -162,6 +167,69 @@ export default function DanmakuPanel({
     }
   }, [videoTitle]);
 
+  useEffect(() => {
+    if (episodes.length > 0) {
+      setEpisodeGroupIndex(Math.floor(currentEpisodeIndex / episodesPerGroup));
+    } else {
+      setEpisodeGroupIndex(0);
+    }
+  }, [episodes, currentEpisodeIndex]);
+
+  const episodeGroupCount = Math.ceil(episodes.length / episodesPerGroup);
+
+  const episodeGroups = useMemo(() => {
+    return Array.from({ length: episodeGroupCount }, (_, idx) => {
+      const start = idx * episodesPerGroup + 1;
+      const end = Math.min((idx + 1) * episodesPerGroup, episodes.length);
+      return `${start}-${end}`;
+    });
+  }, [episodeGroupCount, episodes.length]);
+
+  const displayEpisodeGroupIndex = useMemo(() => {
+    if (episodeDescending) {
+      return episodeGroupCount - 1 - episodeGroupIndex;
+    }
+    return episodeGroupIndex;
+  }, [episodeDescending, episodeGroupCount, episodeGroupIndex]);
+
+  const currentGroupEpisodes = useMemo(() => {
+    if (episodes.length === 0) return [];
+
+    const start = episodeGroupIndex * episodesPerGroup;
+    const end = Math.min(start + episodesPerGroup, episodes.length);
+    const groupEpisodes = episodes.slice(start, end);
+    const withEpisodeNumber = groupEpisodes.map((episode, index) => ({
+      ...episode,
+      episodeNumber: start + index + 1,
+    }));
+
+    return episodeDescending ? [...withEpisodeNumber].reverse() : withEpisodeNumber;
+  }, [episodes, episodeDescending, episodeGroupIndex]);
+
+  const getEpisodeDisplayLabel = useCallback((episodeTitle: string, episodeNumber: number) => {
+    if (!episodeTitle) {
+      return String(episodeNumber);
+    }
+
+    if (episodeTitle.match(/^OVA\s+\d+/i)) {
+      return episodeTitle;
+    }
+
+    const sxxexxMatch = episodeTitle.match(/[Ss](\d+)[Ee](\d{1,4}(?:\.\d+)?)/);
+    if (sxxexxMatch) {
+      const season = sxxexxMatch[1].padStart(2, '0');
+      const episode = sxxexxMatch[2];
+      return `S${season}E${episode}`;
+    }
+
+    const match = episodeTitle.match(/(?:第)?(\d+(?:\.\d+)?)(?:集|话)/);
+    if (match) {
+      return match[1];
+    }
+
+    return String(episodeNumber);
+  }, []);
+
   return (
     <div className='flex h-full flex-col overflow-hidden'>
       {/* 搜索区域 - 固定在顶部 */}
@@ -278,72 +346,151 @@ export default function DanmakuPanel({
 
             {/* 剧集列表 */}
             {!isLoadingEpisodes && episodes.length > 0 && (
-              <div className='space-y-2 pb-4'>
-                {episodes.map((episode, index) => {
-                  const isSelected = isEpisodeSelected(episode.episodeId);
-                  return (
-                    <button
-                      key={episode.episodeId}
-                      onClick={() => handleEpisodeSelect(episode)}
-                      className={`w-full flex items-center gap-3 p-3 rounded-lg text-left
-                                transition-all duration-200 group border
-                        ${
-                          isSelected
-                            ? 'bg-green-500 text-white border-green-600 shadow-md'
-                            : 'bg-gray-100 hover:bg-gray-200 border-gray-200 ' +
-                              'dark:bg-gray-800 dark:hover:bg-gray-700 dark:border-gray-700 ' +
-                              'hover:border-green-500/50 hover:shadow-sm'
-                        }`}
-                    >
-                      {/* 序号徽章 */}
-                      <div className={`flex-shrink-0 w-10 h-10 rounded-full flex items-center justify-center font-bold text-sm
-                        ${
-                          isSelected
-                            ? 'bg-white/20 text-white'
-                            : 'bg-green-500 text-white group-hover:bg-green-600'
-                        }`}
-                      >
-                        {index + 1}
-                      </div>
-
-                      {/* 标题和信息 */}
-                      <div className='flex-1 min-w-0'>
-                        <div className='font-semibold text-sm mb-1 truncate'>
-                          {episode.episodeTitle}
-                        </div>
-                        <div className={`flex items-center gap-2 text-xs
-                          ${
-                            isSelected
-                              ? 'text-white/80'
-                              : 'text-gray-500 dark:text-gray-400'
+              <div className='pb-4'>
+                <div className='mb-4 border-b border-gray-300 dark:border-gray-700'>
+                  <div className='flex items-center gap-4 overflow-x-auto pb-3'>
+                    {episodeGroups.map((label, idx) => {
+                      const isActive = idx === displayEpisodeGroupIndex;
+                      return (
+                        <button
+                          key={label}
+                          onClick={() =>
+                            setEpisodeGroupIndex(
+                              episodeDescending ? episodeGroupCount - 1 - idx : idx
+                            )
+                          }
+                          className={`relative w-20 py-2 text-sm font-medium transition-colors whitespace-nowrap flex-shrink-0 text-center ${
+                            isActive
+                              ? 'text-green-500 dark:text-green-400'
+                              : 'text-gray-700 hover:text-green-600 dark:text-gray-300 dark:hover:text-green-400'
                           }`}
                         >
-                          <span className='flex items-center gap-1'>
-                            🆔 ID: {episode.episodeId}
-                          </span>
-                        </div>
-                      </div>
-
-                      {/* 选中标记 */}
-                      {isSelected && (
-                        <div className='flex-shrink-0'>
-                          <svg className='w-6 h-6 text-white' fill='currentColor' viewBox='0 0 20 20'>
-                            <path fillRule='evenodd' d='M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z' clipRule='evenodd' />
-                          </svg>
-                        </div>
-                      )}
-
-                      {/* 未选中时的箭头 */}
-                      {!isSelected && (
-                        <div className='flex-shrink-0'>
-                          <svg className='w-5 h-5 text-gray-400 group-hover:text-green-500 transition-colors' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
-                            <path strokeLinecap='round' strokeLinejoin='round' strokeWidth='2' d='M9 5l7 7-7 7' />
-                          </svg>
-                        </div>
-                      )}
+                          {label}
+                          {isActive && (
+                            <div className='absolute bottom-0 left-0 right-0 h-0.5 bg-green-500 dark:bg-green-400' />
+                          )}
+                        </button>
+                      );
+                    })}
+                    <button
+                      onClick={() => setEpisodeDescending((prev) => !prev)}
+                      className='flex-shrink-0 rounded-md p-2 text-gray-700 hover:bg-gray-100 hover:text-green-600 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-green-400'
+                      title={episodeDescending ? '切换正序' : '切换倒序'}
+                    >
+                      <svg className='h-4 w-4' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
+                        <path strokeLinecap='round' strokeLinejoin='round' strokeWidth='2' d='M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4' />
+                      </svg>
                     </button>
-                  );
-                })}
+                    <div className='ml-auto flex items-center gap-1 rounded-md bg-gray-100 p-1 dark:bg-gray-800'>
+                      <button
+                        onClick={() => setEpisodeViewMode('list')}
+                        title='列表视图'
+                        className={`rounded px-2 py-1 text-xs font-medium transition-colors ${
+                          episodeViewMode === 'list'
+                            ? 'bg-white text-green-600 shadow-sm dark:bg-gray-700 dark:text-green-400'
+                            : 'text-gray-600 dark:text-gray-400'
+                        }`}
+                      >
+                        <svg className='h-4 w-4' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
+                          <path strokeLinecap='round' strokeLinejoin='round' strokeWidth='2' d='M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01' />
+                        </svg>
+                      </button>
+                      <button
+                        onClick={() => setEpisodeViewMode('grid')}
+                        title='格子视图'
+                        className={`rounded px-2 py-1 text-xs font-medium transition-colors ${
+                          episodeViewMode === 'grid'
+                            ? 'bg-white text-green-600 shadow-sm dark:bg-gray-700 dark:text-green-400'
+                            : 'text-gray-600 dark:text-gray-400'
+                        }`}
+                      >
+                        <svg className='h-4 w-4' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
+                          <path strokeLinecap='round' strokeLinejoin='round' strokeWidth='2' d='M4 4h6v6H4V4zm10 0h6v6h-6V4zM4 14h6v6H4v-6zm10 0h6v6h-6v-6z' />
+                        </svg>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+
+                {episodeViewMode === 'grid' ? (
+                  <div className='grid grid-cols-3 gap-2 sm:grid-cols-4'>
+                    {currentGroupEpisodes.map((episode) => {
+                      const isSelected = isEpisodeSelected(episode.episodeId);
+                      return (
+                        <button
+                          key={episode.episodeId}
+                          onClick={() => handleEpisodeSelect(episode)}
+                          className={`rounded-lg px-3 py-2 text-sm font-medium transition-all ${
+                            isSelected
+                              ? 'bg-green-500 text-white shadow-md'
+                              : 'bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700'
+                          }`}
+                          title={episode.episodeTitle}
+                        >
+                          <div className='truncate'>
+                            {getEpisodeDisplayLabel(episode.episodeTitle, episode.episodeNumber)}
+                          </div>
+                        </button>
+                      );
+                    })}
+                  </div>
+                ) : (
+                  <div className='space-y-2'>
+                    {currentGroupEpisodes.map((episode) => {
+                      const isSelected = isEpisodeSelected(episode.episodeId);
+                      return (
+                        <button
+                          key={episode.episodeId}
+                          onClick={() => handleEpisodeSelect(episode)}
+                          className={`w-full flex items-center gap-3 p-3 rounded-lg text-left transition-all duration-200 group border ${
+                            isSelected
+                              ? 'bg-green-500 text-white border-green-600 shadow-md'
+                              : 'bg-gray-100 hover:bg-gray-200 border-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 dark:border-gray-700 hover:border-green-500/50 hover:shadow-sm'
+                          }`}
+                        >
+                          <div
+                            className={`flex-shrink-0 w-10 h-10 rounded-full flex items-center justify-center font-bold text-sm ${
+                              isSelected
+                                ? 'bg-white/20 text-white'
+                                : 'bg-green-500 text-white group-hover:bg-green-600'
+                            }`}
+                          >
+                            {episode.episodeNumber}
+                          </div>
+
+                          <div className='flex-1 min-w-0'>
+                            <div className='font-semibold text-sm mb-1 truncate'>
+                              {episode.episodeTitle}
+                            </div>
+                            <div
+                              className={`flex items-center gap-2 text-xs ${
+                                isSelected ? 'text-white/80' : 'text-gray-500 dark:text-gray-400'
+                              }`}
+                            >
+                              <span className='flex items-center gap-1'>
+                                🆔 ID: {episode.episodeId}
+                              </span>
+                            </div>
+                          </div>
+
+                          {isSelected ? (
+                            <div className='flex-shrink-0'>
+                              <svg className='w-6 h-6 text-white' fill='currentColor' viewBox='0 0 20 20'>
+                                <path fillRule='evenodd' d='M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z' clipRule='evenodd' />
+                              </svg>
+                            </div>
+                          ) : (
+                            <div className='flex-shrink-0'>
+                              <svg className='w-5 h-5 text-gray-400 group-hover:text-green-500 transition-colors' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
+                                <path strokeLinecap='round' strokeLinejoin='round' strokeWidth='2' d='M9 5l7 7-7 7' />
+                              </svg>
+                            </div>
+                          )}
+                        </button>
+                      );
+                    })}
+                  </div>
+                )}
               </div>
             )}
 

src/lib/danmaku/api.ts

@@ -142,6 +142,9 @@ export async function getDanmakuById(
   episodeId: number,
   title?: string,
   episodeIndex?: number,
+  options?: {
+    bypassCache?: boolean;
+  },
   metadata?: {
     animeId?: number;
     animeTitle?: string;
@@ -152,13 +155,15 @@ export async function getDanmakuById(
 ): Promise<DanmakuComment[]> {
   try {
     // 1. 如果提供了 title 和 episodeIndex，先尝试从缓存读取
-    if (title && episodeIndex !== undefined) {
+    if (title && episodeIndex !== undefined && !options?.bypassCache) {
       const cachedData = await getDanmakuFromCache(title, episodeIndex);
       if (cachedData) {
         console.log(`[弹幕缓存] 使用缓存: title=${title}, episodeIndex=${episodeIndex}, 数量=${cachedData.comments.length}`);
         return cachedData.comments;
       }
       console.log(`[弹幕缓存] 缓存未命中，从 API 获取: title=${title}, episodeIndex=${episodeIndex}`);
+    } else if (title && episodeIndex !== undefined && options?.bypassCache) {
+      console.log(`[弹幕缓存] 手动选择，跳过缓存读取: title=${title}, episodeIndex=${episodeIndex}, episodeId=${episodeId}`);
     } else {
       console.log(`[弹幕缓存] 未提供 title/episodeIndex，跳过缓存: episodeId=${episodeId}`);
     }