From c4be0e1886d95a5a1d09f2d3716af374e34cbcda Mon Sep 17 00:00:00 2001
From: mtvpls <247332661+mtvpls@users.noreply.github.com>
Date: Sun, 26 Jul 2026 15:29:03 +0800
Subject: [PATCH] =?UTF-8?q?VideoCard=E6=93=8D=E4=BD=9C=E8=8F=9C=E5=8D=95?=
 =?UTF-8?q?=E9=99=90=E5=88=B6=E9=AB=98=E5=BA=A6=E5=B9=B6=E5=8F=AF=E6=BB=91?=
 =?UTF-8?q?=E5=8A=A8=EF=BC=9A=E6=9C=89=E6=BA=90=E6=9C=80=E5=A4=9A4?=
 =?UTF-8?q?=E9=A1=B9=E3=80=81=E6=97=A0=E6=BA=90=E6=9C=80=E5=A4=9A6?=
 =?UTF-8?q?=E9=A1=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/MobileActionSheet.tsx | 149 +++++++++++++++++----------
 1 file changed, 97 insertions(+), 52 deletions(-)

diff --git a/src/components/MobileActionSheet.tsx b/src/components/MobileActionSheet.tsx
index 6127b1d..d1903ce 100644
--- a/src/components/MobileActionSheet.tsx
+++ b/src/components/MobileActionSheet.tsx
@@ -51,6 +51,13 @@ const MobileActionSheet: React.FC<MobileActionSheetProps> = ({
   const [isTitleOverflowing, setIsTitleOverflowing] = useState(false);
   const backdropPressStarted = useRef(false);
   const titleRef = useRef<HTMLHeadingElement>(null);
+  const actionsListRef = useRef<HTMLDivElement>(null);
+
+  // 操作区可滚动：有可用播放源最多显示 4 项，否则最多 6 项
+  const hasPlaySources = Boolean(isAggregate && sources && sources.length > 0);
+  // 单项 py-4(2rem) + 内容 h-6(1.5rem) = 3.5rem
+  const actionsMaxVisible = hasPlaySources ? 4 : 6;
+  const actionsMaxHeight = `calc(3.5rem * ${actionsMaxVisible})`;
 
   // 确保组件在客户端挂载后才渲染 Portal
   useEffect(() => {
@@ -166,6 +173,31 @@ const MobileActionSheet: React.FC<MobileActionSheetProps> = ({
     };
   }, [isVisible, title]);
 
+  // 操作列表：用非 passive 的 wheel 监听，保证鼠标滚轮可滚动且不穿透到背景
+  useEffect(() => {
+    if (!isVisible) return;
+    const el = actionsListRef.current;
+    if (!el) return;
+
+    const handleWheel = (e: WheelEvent) => {
+      e.stopPropagation();
+      const { scrollTop, scrollHeight, clientHeight } = el;
+      if (scrollHeight <= clientHeight) {
+        e.preventDefault();
+        return;
+      }
+      const maxScrollTop = scrollHeight - clientHeight;
+      const next = Math.min(maxScrollTop, Math.max(0, scrollTop + e.deltaY));
+      if (next !== scrollTop) {
+        el.scrollTop = next;
+      }
+      e.preventDefault();
+    };
+
+    el.addEventListener('wheel', handleWheel, { passive: false });
+    return () => el.removeEventListener('wheel', handleWheel);
+  }, [isVisible, actionsMaxVisible]);
+
   // ESC键关闭
   useEffect(() => {
     const handleEsc = (e: KeyboardEvent) => {
@@ -337,62 +369,75 @@ const MobileActionSheet: React.FC<MobileActionSheetProps> = ({
           </button>
         </div>
 
-        {/* 操作列表 */}
+        {/* 操作列表：有源最多 4 项 / 无源最多 6 项，超出可滑动（支持触控与鼠标滚轮） */}
         <div className="px-4 py-2">
-          {actions.map((action, index) => (
-            <div key={action.id}>
-              <button
-                onClick={() => {
-                  action.onClick();
-                  onClose();
-                }}
-                disabled={action.disabled}
-                className={`
-                  w-full flex items-center gap-4 py-4 px-2 transition-all duration-150 ease-out
-                  ${action.disabled
-                    ? 'opacity-50 cursor-not-allowed'
-                    : `${getActionHoverColor(action.color)} active:scale-[0.98]`
-                  }
-                `}
-                style={{ willChange: 'transform, background-color' }}
-              >
-                {/* 图标 - 使用线条风格 */}
-                <div className="w-6 h-6 flex items-center justify-center flex-shrink-0">
-                  <span className={`transition-colors duration-150 ${action.disabled
-                    ? 'text-gray-400 dark:text-gray-600'
-                    : getActionColor(action.color)
-                    }`}>
-                    {action.icon}
-                  </span>
-                </div>
+          <div
+            ref={actionsListRef}
+            className="overflow-y-auto overscroll-contain"
+            style={{
+              maxHeight: actionsMaxHeight,
+              WebkitOverflowScrolling: 'touch',
+            }}
+            onTouchMove={(e) => {
+              // 允许操作列表内部滑动，阻止冒泡到外层遮罩
+              e.stopPropagation();
+            }}
+          >
+            {actions.map((action, index) => (
+              <div key={action.id}>
+                <button
+                  onClick={() => {
+                    action.onClick();
+                    onClose();
+                  }}
+                  disabled={action.disabled}
+                  className={`
+                    w-full flex items-center gap-4 py-4 px-2 transition-all duration-150 ease-out
+                    ${action.disabled
+                      ? 'opacity-50 cursor-not-allowed'
+                      : `${getActionHoverColor(action.color)} active:scale-[0.98]`
+                    }
+                  `}
+                  style={{ willChange: 'transform, background-color' }}
+                >
+                  {/* 图标 - 使用线条风格 */}
+                  <div className="w-6 h-6 flex items-center justify-center flex-shrink-0">
+                    <span className={`transition-colors duration-150 ${action.disabled
+                      ? 'text-gray-400 dark:text-gray-600'
+                      : getActionColor(action.color)
+                      }`}>
+                      {action.icon}
+                    </span>
+                  </div>
 
-                {/* 文字 */}
-                <span className={`
-                  text-left font-medium text-base flex-1
-                  ${action.disabled
-                    ? 'text-gray-400 dark:text-gray-600'
-                    : 'text-gray-900 dark:text-gray-100'
-                  }
-                `}>
-                  {action.label}
-                </span>
-
-                {/* 播放进度 - 只在播放按钮且有播放记录时显示 */}
-                {action.id === 'play' && currentEpisode && totalEpisodes && (
-                  <span className="text-sm text-gray-500 dark:text-gray-400 font-medium">
-                    {currentEpisode}/{totalEpisodes}
+                  {/* 文字 */}
+                  <span className={`
+                    text-left font-medium text-base flex-1
+                    ${action.disabled
+                      ? 'text-gray-400 dark:text-gray-600'
+                      : 'text-gray-900 dark:text-gray-100'
+                    }
+                  `}>
+                    {action.label}
                   </span>
+
+                  {/* 播放进度 - 只在播放按钮且有播放记录时显示 */}
+                  {action.id === 'play' && currentEpisode && totalEpisodes && (
+                    <span className="text-sm text-gray-500 dark:text-gray-400 font-medium">
+                      {currentEpisode}/{totalEpisodes}
+                    </span>
+                  )}
+
+
+                </button>
+
+                {/* 分割线 - 最后一项不显示 */}
+                {index < actions.length - 1 && (
+                  <div className="border-b border-gray-100 dark:border-gray-800 ml-10"></div>
                 )}
-
-
-              </button>
-
-              {/* 分割线 - 最后一项不显示 */}
-              {index < actions.length - 1 && (
-                <div className="border-b border-gray-100 dark:border-gray-800 ml-10"></div>
-              )}
-            </div>
-          ))}
+              </div>
+            ))}
+          </div>
         </div>
 
         {/* 播放源信息展示区域 */}