fix: 回到顶部改为 scrollTo(0) 确保完全回到页面顶端
用 window.scrollTo + documentElement.scrollTop 双重保险, 替代 scrollIntoView 避免只滚动到哨兵位置。 全屏模式改为 CSS transform 旋转实现移动端横屏。 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -209,29 +209,26 @@ export default function MonitoringView() {
|
|||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const scrollToTop = () => {
|
const scrollToTop = () => {
|
||||||
topSentinelRef.current?.scrollIntoView({ behavior: 'smooth' });
|
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||||
|
document.documentElement.scrollTop = 0;
|
||||||
};
|
};
|
||||||
|
|
||||||
const filteredVehicles = vehicles;
|
const filteredVehicles = vehicles;
|
||||||
|
|
||||||
const toggleFullscreen = async () => {
|
const toggleFullscreen = () => {
|
||||||
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 {}
|
|
||||||
}
|
|
||||||
setIsFullscreen(!isFullscreen);
|
setIsFullscreen(!isFullscreen);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 全屏时禁止背景滚动
|
||||||
|
useEffect(() => {
|
||||||
|
if (isFullscreen) {
|
||||||
|
document.body.style.overflow = 'hidden';
|
||||||
|
} else {
|
||||||
|
document.body.style.overflow = '';
|
||||||
|
}
|
||||||
|
return () => { document.body.style.overflow = ''; };
|
||||||
|
}, [isFullscreen]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{/* 顶部哨兵:离开视口时显示回到顶部按钮 */}
|
{/* 顶部哨兵:离开视口时显示回到顶部按钮 */}
|
||||||
@@ -244,10 +241,15 @@ export default function MonitoringView() {
|
|||||||
initial={{ opacity: 0 }}
|
initial={{ opacity: 0 }}
|
||||||
animate={{ opacity: 1 }}
|
animate={{ opacity: 1 }}
|
||||||
exit={{ opacity: 0 }}
|
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 */}
|
{/* Sidebar Stats */}
|
||||||
<div className="flex flex-col gap-4 w-full landscape:w-72 flex-shrink-0">
|
<div className="flex flex-col gap-4 w-72 flex-shrink-0">
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
<div className="flex items-center gap-3">
|
<div className="flex items-center gap-3">
|
||||||
<div className="w-1 h-6 bg-blue-500 rounded-full"></div>
|
<div className="w-1 h-6 bg-blue-500 rounded-full"></div>
|
||||||
|
|||||||
Reference in New Issue
Block a user