修复play页面照片墙的问题

src/components/DetailPanel.tsx

@@ -1045,31 +1045,7 @@ const DetailPanel: React.FC<DetailPanelProps> = ({
     return { visibleItems, totalHeight, usedWidth };
   }, [galleryImages, galleryScrollTop, galleryViewportHeight, galleryViewportWidth]);
 
-  const galleryModal = showGallery ? (
+  const galleryBody = (
-    <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">
@@ -1131,9 +1107,47 @@ const DetailPanel: React.FC<DetailPanelProps> = ({
         </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>
-  ) : null;
+  ) : (
+    <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">
+        {galleryHeader}
+        {galleryBody}
+      </div>
+    </div>
+  )) : null;
 
   if (!isVisible || !mounted) return null;