diff --git a/src/components/MobileActionSheet.tsx b/src/components/MobileActionSheet.tsx index 667c480..10174e6 100644 --- a/src/components/MobileActionSheet.tsx +++ b/src/components/MobileActionSheet.tsx @@ -46,7 +46,9 @@ const MobileActionSheet: React.FC = ({ const [isVisible, setIsVisible] = useState(false); const [isAnimating, setIsAnimating] = useState(false); const [mounted, setMounted] = useState(false); + const [isTitleOverflowing, setIsTitleOverflowing] = useState(false); const backdropPressStarted = useRef(false); + const titleRef = useRef(null); // 确保组件在客户端挂载后才渲染 Portal useEffect(() => { @@ -136,6 +138,32 @@ const MobileActionSheet: React.FC = ({ } }, [isVisible]); + useEffect(() => { + const element = titleRef.current; + if (!element || !isVisible) { + setIsTitleOverflowing(false); + return; + } + + const checkOverflow = () => { + setIsTitleOverflowing(element.scrollWidth > element.clientWidth + 1); + }; + + checkOverflow(); + + if (typeof ResizeObserver === 'undefined') { + window.addEventListener('resize', checkOverflow); + return () => window.removeEventListener('resize', checkOverflow); + } + + const observer = new ResizeObserver(checkOverflow); + observer.observe(element); + + return () => { + observer.disconnect(); + }; + }, [isVisible, title]); + // ESC键关闭 useEffect(() => { const handleEsc = (e: KeyboardEvent) => { @@ -264,10 +292,21 @@ const MobileActionSheet: React.FC = ({ )}
-
-

- {title} -

+
+
+

+ {title} +

+ {isTitleOverflowing && ( +
+ {title} +
+
+ )} +
{sourceName && ( {origin === 'live' && (