From 8b95e5309871db8fc810575507068db47049ca2c Mon Sep 17 00:00:00 2001
From: kkfluous <kkfluous@kdemacbook-air.local>
Date: Thu, 2 Apr 2026 00:32:35 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=9B=9E=E5=88=B0=E9=A1=B6=E9=83=A8?=
 =?UTF-8?q?=E6=94=B9=E4=B8=BA=20scrollTo(0)=20=E7=A1=AE=E4=BF=9D=E5=AE=8C?=
 =?UTF-8?q?=E5=85=A8=E5=9B=9E=E5=88=B0=E9=A1=B5=E9=9D=A2=E9=A1=B6=E7=AB=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

用 window.scrollTo + documentElement.scrollTop 双重保险，
替代 scrollIntoView 避免只滚动到哨兵位置。
全屏模式改为 CSS transform 旋转实现移动端横屏。

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/modules/mileage/MonitoringView.tsx | 40 ++++++++++++++------------
 1 file changed, 21 insertions(+), 19 deletions(-)

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 */}
-            <div className="flex flex-col gap-4 w-full landscape:w-72 flex-shrink-0">
+            {/* Sidebar Stats */}
+            <div className="flex flex-col gap-4 w-72 flex-shrink-0">
               <div className="flex items-center justify-between">
                 <div className="flex items-center gap-3">
                   <div className="w-1 h-6 bg-blue-500 rounded-full"></div>