From 6b4555346d0769ea70cec77eb4a40148101e68b9 Mon Sep 17 00:00:00 2001
From: mtvpls <mtvpls@redaaa.ip-ddns.com>
Date: Thu, 9 Apr 2026 21:44:15 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8Dplay=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E7=85=A7=E7=89=87=E5=A2=99=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/DetailPanel.tsx | 176 ++++++++++++++++++---------------
 1 file changed, 95 insertions(+), 81 deletions(-)

diff --git a/src/components/DetailPanel.tsx b/src/components/DetailPanel.tsx
index 545dcc4..97335c1 100644
--- a/src/components/DetailPanel.tsx
+++ b/src/components/DetailPanel.tsx
@@ -1045,95 +1045,109 @@ const DetailPanel: React.FC<DetailPanelProps> = ({
     return { visibleItems, totalHeight, usedWidth };
   }, [galleryImages, galleryScrollTop, galleryViewportHeight, galleryViewportWidth]);
 
-  const galleryModal = showGallery ? (
+  const galleryBody = (
+    <div ref={galleryScrollRef} className="flex-1 overflow-y-auto overflow-x-hidden p-4">
+      {galleryLoading && (
+        <div className="flex items-center justify-center py-20">
+          <div className="animate-spin rounded-full h-10 w-10 border-b-2 border-green-500"></div>
+        </div>
+      )}
+
+      {!galleryLoading && galleryError && (
+        <div className="text-center py-12 text-red-500 dark:text-red-400">{galleryError}</div>
+      )}
+
+      {!galleryLoading && !galleryError && galleryImages.length === 0 && (
+        <div className="text-center py-12 text-gray-500 dark:text-gray-400">暂无图片</div>
+      )}
+
+      {!galleryLoading && !galleryError && galleryImages.length > 0 && (
+        <div
+          className="relative mx-auto"
+          style={{ height: virtualGalleryLayout.totalHeight, width: virtualGalleryLayout.usedWidth || '100%' }}
+        >
+          {virtualGalleryLayout.visibleItems.map((image) => {
+            const imageUrl = getTMDBImageUrl(
+              image.file_path,
+              image.imageType === 'poster' ? 'w500' : 'original'
+            );
+            const thumbUrl = getTMDBImageUrl(
+              image.file_path,
+              image.imageType === 'poster' ? 'w342' : 'w780'
+            );
+
+            return (
+              <div
+                key={`${image.imageType}-${image.file_path}-${image.index}`}
+                className="group absolute"
+                style={{
+                  top: image.top,
+                  left: image.left,
+                  width: image.renderWidth,
+                  height: image.renderHeight,
+                }}
+              >
+                <div
+                  className="relative w-full h-full overflow-hidden rounded-md bg-gray-100 dark:bg-gray-800 cursor-pointer hover:opacity-90 transition-opacity"
+                  onClick={() => handleImageClick(imageUrl)}
+                >
+                  <ProxyImage
+                    originalSrc={thumbUrl}
+                    alt={`${detailData?.title || title}-gallery-${image.index + 1}`}
+                    className="absolute inset-0 w-full h-full object-cover"
+                    draggable={false}
+                  />
+                  <div className="absolute left-2 top-2 px-2 py-0.5 rounded-full text-xs bg-black/60 text-white">
+                    {image.imageType === 'poster' ? '海报' : '剧照'}
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+
+  const galleryHeader = (
+    <div className="flex items-center justify-between p-4 border-b border-gray-100 dark:border-gray-800">
+      <div>
+        <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100">照片墙</h3>
+        {!galleryLoading && (
+          <p className="text-sm text-gray-500 dark:text-gray-400">
+            共 {galleryTotal} 张
+          </p>
+        )}
+      </div>
+      <button
+        onClick={() => setShowGallery(false)}
+        className="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+        aria-label="关闭照片墙"
+      >
+        <X size={20} className="text-gray-500 dark:text-gray-400" />
+      </button>
+    </div>
+  );
+
+  const galleryModal = showGallery ? (useDrawer ? (
+    <div className="fixed inset-0 z-[10000] flex items-center justify-end pointer-events-none">
+      <div className={`relative ${drawerWidth} h-full bg-white dark:bg-gray-900 shadow-2xl overflow-hidden flex flex-col pointer-events-auto`}>
+        {galleryHeader}
+        {galleryBody}
+      </div>
+    </div>
+  ) : (
     <div className="fixed inset-0 z-[10000] flex items-center justify-center p-4">
       <div
         className="absolute inset-0 bg-black/60"
         onClick={() => setShowGallery(false)}
       />
       <div className="relative w-full max-w-6xl max-h-[90vh] bg-white dark:bg-gray-900 rounded-2xl shadow-2xl overflow-hidden flex flex-col">
-        <div className="flex items-center justify-between p-4 border-b border-gray-100 dark:border-gray-800">
-          <div>
-            <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100">照片墙</h3>
-            {!galleryLoading && (
-              <p className="text-sm text-gray-500 dark:text-gray-400">
-                共 {galleryTotal} 张
-              </p>
-            )}
-          </div>
-          <button
-            onClick={() => setShowGallery(false)}
-            className="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
-            aria-label="关闭照片墙"
-          >
-            <X size={20} className="text-gray-500 dark:text-gray-400" />
-          </button>
-        </div>
-
-        <div ref={galleryScrollRef} className="flex-1 overflow-y-auto overflow-x-hidden p-4">
-          {galleryLoading && (
-            <div className="flex items-center justify-center py-20">
-              <div className="animate-spin rounded-full h-10 w-10 border-b-2 border-green-500"></div>
-            </div>
-          )}
-
-          {!galleryLoading && galleryError && (
-            <div className="text-center py-12 text-red-500 dark:text-red-400">{galleryError}</div>
-          )}
-
-          {!galleryLoading && !galleryError && galleryImages.length === 0 && (
-            <div className="text-center py-12 text-gray-500 dark:text-gray-400">暂无图片</div>
-          )}
-
-          {!galleryLoading && !galleryError && galleryImages.length > 0 && (
-            <div
-              className="relative mx-auto"
-              style={{ height: virtualGalleryLayout.totalHeight, width: virtualGalleryLayout.usedWidth || '100%' }}
-            >
-              {virtualGalleryLayout.visibleItems.map((image) => {
-                const imageUrl = getTMDBImageUrl(
-                  image.file_path,
-                  image.imageType === 'poster' ? 'w500' : 'original'
-                );
-                const thumbUrl = getTMDBImageUrl(
-                  image.file_path,
-                  image.imageType === 'poster' ? 'w342' : 'w780'
-                );
-
-                return (
-                  <div
-                    key={`${image.imageType}-${image.file_path}-${image.index}`}
-                    className="group absolute"
-                    style={{
-                      top: image.top,
-                      left: image.left,
-                      width: image.renderWidth,
-                      height: image.renderHeight,
-                    }}
-                  >
-                    <div
-                      className="relative w-full h-full overflow-hidden rounded-md bg-gray-100 dark:bg-gray-800 cursor-pointer hover:opacity-90 transition-opacity"
-                      onClick={() => handleImageClick(imageUrl)}
-                    >
-                      <ProxyImage
-                        originalSrc={thumbUrl}
-                        alt={`${detailData?.title || title}-gallery-${image.index + 1}`}
-                        className="absolute inset-0 w-full h-full object-cover"
-                        draggable={false}
-                      />
-                      <div className="absolute left-2 top-2 px-2 py-0.5 rounded-full text-xs bg-black/60 text-white">
-                        {image.imageType === 'poster' ? '海报' : '剧照'}
-                      </div>
-                    </div>
-                  </div>
-                );
-              })}
-            </div>
-          )}
-        </div>
+        {galleryHeader}
+        {galleryBody}
       </div>
     </div>
-  ) : null;
+  )) : null;
 
   if (!isVisible || !mounted) return null;