diff --git a/src/modules/mileage/MonitoringView.tsx b/src/modules/mileage/MonitoringView.tsx index 98d6319..b26ae05 100644 --- a/src/modules/mileage/MonitoringView.tsx +++ b/src/modules/mileage/MonitoringView.tsx @@ -209,29 +209,26 @@ export default function MonitoringView() { }, []); const scrollToTop = () => { - topSentinelRef.current?.scrollIntoView({ behavior: 'smooth' }); + window.scrollTo({ top: 0, behavior: 'smooth' }); + document.documentElement.scrollTop = 0; }; const filteredVehicles = vehicles; - const toggleFullscreen = async () => { - if (!isFullscreen) { - try { - const elem = document.documentElement; - if (elem.requestFullscreen) await elem.requestFullscreen(); - // 尝试锁定横屏 - try { await (screen.orientation as any).lock('landscape'); } catch {} - } catch {} - } else { - try { - // 解除横屏锁定 - try { (screen.orientation as any).unlock(); } catch {} - if (document.exitFullscreen) await document.exitFullscreen(); - } catch {} - } + const toggleFullscreen = () => { setIsFullscreen(!isFullscreen); }; + // 全屏时禁止背景滚动 + useEffect(() => { + if (isFullscreen) { + document.body.style.overflow = 'hidden'; + } else { + document.body.style.overflow = ''; + } + return () => { document.body.style.overflow = ''; }; + }, [isFullscreen]); + return ( <> {/* 顶部哨兵:离开视口时显示回到顶部按钮 */} @@ -244,10 +241,15 @@ export default function MonitoringView() { initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} - className="fixed inset-0 z-[100] bg-slate-950 flex flex-col p-4 landscape:flex-row gap-4 overflow-hidden" + className="fixed inset-0 z-[100] bg-slate-950 flex flex-row p-4 gap-4 overflow-hidden portrait:origin-top-left" + style={{ + ...(typeof window !== 'undefined' && window.innerHeight > window.innerWidth + ? { transform: 'rotate(90deg) translateY(-100%)', width: window.innerHeight, height: window.innerWidth, transformOrigin: 'top left' } + : {}), + }} > - {/* Sidebar / Top Stats in Landscape */} -