style: 调整pad端横屏竖屏的问题

统一鼠标、触摸和触控笔的画布坐标转换。修复 autofit 及浏览器缩放下的信息窗偏移，并支持平板点击机器人显示详情、点击空白隐藏。

src/App.vue

@@ -18,6 +18,7 @@ const autoFitOptions = {
 }
 
 let viewportWidth = document.documentElement.clientWidth
+let autoFitResetTimer: ReturnType<typeof setTimeout> | undefined
 
 const initAutoFit = () => {
   autofit.init(autoFitOptions, false)
@@ -29,29 +30,36 @@ const resetAutoFit = () => {
   viewportWidth = document.documentElement.clientWidth
 }
 
+const scheduleAutoFitReset = () => {
+  clearTimeout(autoFitResetTimer)
+  // 等待旋转动画和视口尺寸稳定，避免 resize 期间反复重建 autofit。
+  autoFitResetTimer = setTimeout(resetAutoFit, 50)
+}
+
 const handleResize = () => {
   const nextWidth = document.documentElement.clientWidth
 
   // 软键盘通常只改变可视高度；宽度不变时保持原缩放比例。
   if (Math.abs(nextWidth - viewportWidth) <= 2) return
 
-  resetAutoFit()
+  scheduleAutoFitReset()
 }
 
 onMounted(() => {
   initAutoFit()
   window.addEventListener('resize', handleResize)
-  window.addEventListener('orientationchange', resetAutoFit)
-  document.addEventListener('fullscreenchange', resetAutoFit)
-  document.addEventListener('webkitfullscreenchange', resetAutoFit)
+  window.addEventListener('orientationchange', scheduleAutoFitReset)
+  document.addEventListener('fullscreenchange', scheduleAutoFitReset)
+  document.addEventListener('webkitfullscreenchange', scheduleAutoFitReset)
 })
 
 onUnmounted(() => {
   autofit.off('#app')
+  clearTimeout(autoFitResetTimer)
   window.removeEventListener('resize', handleResize)
-  window.removeEventListener('orientationchange', resetAutoFit)
-  document.removeEventListener('fullscreenchange', resetAutoFit)
-  document.removeEventListener('webkitfullscreenchange', resetAutoFit)
+  window.removeEventListener('orientationchange', scheduleAutoFitReset)
+  document.removeEventListener('fullscreenchange', scheduleAutoFitReset)
+  document.removeEventListener('webkitfullscreenchange', scheduleAutoFitReset)
 })
 </script>
 

src/components/LandscapeGuard.vue

@@ -25,6 +25,8 @@ import { onBeforeUnmount, onMounted, ref } from 'vue'
 const isPortraitTablet = ref(false)
 
 let portraitMediaQuery
+let orientationFrame
+const orientationTimers = new Set()
 
 const isTablet = () => {
   const userAgent = navigator.userAgent
@@ -40,11 +42,32 @@ const isTablet = () => {
 }
 
 const updateOrientation = () => {
-  const isPortrait = portraitMediaQuery?.matches ?? window.innerHeight > window.innerWidth
+  const viewport = window.visualViewport
+  const viewportWidth = viewport?.width || window.innerWidth
+  const viewportHeight = viewport?.height || window.innerHeight
+  const isPortrait = viewportHeight > viewportWidth
   isPortraitTablet.value = isTablet() && isPortrait
   document.documentElement.classList.toggle('is-portrait-tablet', isPortraitTablet.value)
 }
 
+const scheduleOrientationUpdate = () => {
+  updateOrientation()
+
+  cancelAnimationFrame(orientationFrame)
+  orientationFrame = requestAnimationFrame(updateOrientation)
+
+  orientationTimers.forEach(clearTimeout)
+  orientationTimers.clear()
+  // iPad 旋转动画期间视口尺寸会分阶段更新，短时间复检避免停留在旧方向。
+  for (const delay of [80, 180, 350]) {
+    const timer = setTimeout(() => {
+      orientationTimers.delete(timer)
+      updateOrientation()
+    }, delay)
+    orientationTimers.add(timer)
+  }
+}
+
 const tryLockLandscape = async () => {
   if (!isTablet() || !screen.orientation?.lock) return
 
@@ -60,17 +83,22 @@ onMounted(() => {
   updateOrientation()
   tryLockLandscape()
 
-  portraitMediaQuery.addEventListener?.('change', updateOrientation)
-  window.addEventListener('resize', updateOrientation)
-  window.addEventListener('orientationchange', updateOrientation)
+  portraitMediaQuery.addEventListener?.('change', scheduleOrientationUpdate)
+  window.addEventListener('resize', scheduleOrientationUpdate)
+  window.addEventListener('orientationchange', scheduleOrientationUpdate)
+  window.visualViewport?.addEventListener('resize', scheduleOrientationUpdate)
   document.addEventListener('fullscreenchange', tryLockLandscape)
 })
 
 onBeforeUnmount(() => {
   document.documentElement.classList.remove('is-portrait-tablet')
-  portraitMediaQuery?.removeEventListener?.('change', updateOrientation)
-  window.removeEventListener('resize', updateOrientation)
-  window.removeEventListener('orientationchange', updateOrientation)
+  cancelAnimationFrame(orientationFrame)
+  orientationTimers.forEach(clearTimeout)
+  orientationTimers.clear()
+  portraitMediaQuery?.removeEventListener?.('change', scheduleOrientationUpdate)
+  window.removeEventListener('resize', scheduleOrientationUpdate)
+  window.removeEventListener('orientationchange', scheduleOrientationUpdate)
+  window.visualViewport?.removeEventListener('resize', scheduleOrientationUpdate)
   document.removeEventListener('fullscreenchange', tryLockLandscape)
 })
 </script>

src/views/chassis/MapCanvas.vue

@@ -94,6 +94,9 @@ const containerRef = ref(null)
 const mapCanvasRef = ref(null)
 let resizeObserver
 let eventsBound = false
+let orientationObserver
+let animationFrameId = null
+let isRendering = false
 
 const init = () => {
     mapCanvas = mapCanvasRef.value;
@@ -106,11 +109,14 @@ const init = () => {
  */
 function resizeCanvasToContainer() {
     if (!mapCanvas || !containerRef.value) return;
-    const containerRect = containerRef.value.getBoundingClientRect(); // 获取容器实际尺寸
-    if (!containerRect.width || !containerRect.height) return;
+    // clientWidth/clientHeight 是布局坐标，不受 autofit.js 的 CSS transform 影响。
+    // getBoundingClientRect() 返回的是缩放后的屏幕尺寸，不能用于 Canvas 逻辑尺寸。
+    const containerWidth = containerRef.value.clientWidth;
+    const containerHeight = containerRef.value.clientHeight;
+    if (!containerWidth || !containerHeight) return;
     applicationState.devicePixelRatio = window.devicePixelRatio || 1; // 获取设备像素比
-    applicationState.canvasWidthPx = containerRect.width;                        // 更新逻辑宽度
-    applicationState.canvasHeightPx = containerRect.height;                  // 逻辑高度 = 容器高度 - 状态栏高度
+    applicationState.canvasWidthPx = containerWidth;                        // 更新逻辑宽度
+    applicationState.canvasHeightPx = containerHeight;                  // 逻辑高度 = 容器高度 - 状态栏高度
     mapCanvas.width = applicationState.canvasWidthPx * applicationState.devicePixelRatio; // Canvas 物理像素宽
     mapCanvas.height = applicationState.canvasHeightPx * applicationState.devicePixelRatio; // Canvas 物理像素高
     mapCanvas.style.width = applicationState.canvasWidthPx + 'px';               // CSS 显示宽度
@@ -211,6 +217,8 @@ async function loadMapIntoApplication(parsedMap) {
  * @param {number} timestamp - requestAnimationFrame 提供的时间戳（毫秒）
  */
 function renderFrame(timestamp) {
+    if (!isRendering || !canvasCtx) return;
+
     // 更新动画时间
     applicationState.animationTimeSeconds = (timestamp || 0) / 1000;
 
@@ -220,7 +228,7 @@ function renderFrame(timestamp) {
 
     // 如果地图未加载，跳过绘制
     if (!applicationState.isMapLoaded) {
-        requestAnimationFrame(renderFrame);                         // 继续请求下一帧
+        animationFrameId = requestAnimationFrame(renderFrame);      // 继续请求下一帧
         return;
     }
 
@@ -270,7 +278,36 @@ function renderFrame(timestamp) {
     drawMapBoundary(canvasCtx, map, applicationState);
 
     // 请求下一帧渲染
-    requestAnimationFrame(renderFrame);
+    animationFrameId = requestAnimationFrame(renderFrame);
+}
+
+const stopRendering = () => {
+    isRendering = false
+    if (animationFrameId !== null) {
+        cancelAnimationFrame(animationFrameId)
+        animationFrameId = null
+    }
+}
+
+const startRendering = () => {
+    if (isRendering || !applicationState.isMapLoaded || document.documentElement.classList.contains('is-portrait-tablet')) return
+    isRendering = true
+    animationFrameId = requestAnimationFrame(renderFrame)
+}
+
+const handleOrientationVisibility = () => {
+    if (document.documentElement.classList.contains('is-portrait-tablet')) {
+        stopRendering()
+        return
+    }
+
+    // v-show 恢复后等待 Vue 和浏览器完成布局，再重设画布并恢复渲染。
+    nextTick(() => {
+        requestAnimationFrame(() => {
+            resizeCanvasToContainer()
+            startRendering()
+        })
+    })
 }
 
 const drawAllRobots = (ctx) => {
@@ -292,12 +329,25 @@ const bindEvent = () => {
     let activePointerId = null
     let lastPointerX = 0
     let lastPointerY = 0
+    let pointerStartX = 0
+    let pointerStartY = 0
+    let hasDragged = false
+
+    const getCanvasPointerPosition = (pointerEvent) => {
+        const canvasRect = mapCanvas.getBoundingClientRect()
+        const scaleX = applicationState.canvasWidthPx / canvasRect.width
+        const scaleY = applicationState.canvasHeightPx / canvasRect.height
+        return {
+            x: (pointerEvent.clientX - canvasRect.left) * scaleX,
+            y: (pointerEvent.clientY - canvasRect.top) * scaleY
+        }
+    }
 
     // Pointer Events 同时支持鼠标、触控笔和 Pad 触摸。
     mapCanvas.addEventListener('pointermove', (pointerEvent) => {
-        const canvasRect = mapCanvas.getBoundingClientRect();        // Canvas 在页面中的位置
-        applicationState.mouseState.screenX = pointerEvent.clientX - canvasRect.left;
-        applicationState.mouseState.screenY = pointerEvent.clientY - canvasRect.top;
+        const pointerPosition = getCanvasPointerPosition(pointerEvent)
+        applicationState.mouseState.screenX = pointerPosition.x;
+        applicationState.mouseState.screenY = pointerPosition.y;
         // 反算世界坐标
         const worldPos = screenToWorld(applicationState.mouseState.screenX, applicationState.mouseState.screenY, applicationState);
         applicationState.mouseState.worldX = worldPos.x;
@@ -305,12 +355,15 @@ const bindEvent = () => {
 
         if (applicationState.mouseState.isDragging && pointerEvent.pointerId === activePointerId) {
             pointerEvent.preventDefault()
-            const movementX = pointerEvent.clientX - lastPointerX
-            const movementY = pointerEvent.clientY - lastPointerY
+            const movementX = pointerPosition.x - lastPointerX
+            const movementY = pointerPosition.y - lastPointerY
+            if (Math.hypot(pointerPosition.x - pointerStartX, pointerPosition.y - pointerStartY) > 6) {
+                hasDragged = true
+            }
             applicationState.camera.centerX -= movementX / applicationState.camera.pixelsPerMeter;
             applicationState.camera.centerY += movementY / applicationState.camera.pixelsPerMeter;
-            lastPointerX = pointerEvent.clientX
-            lastPointerY = pointerEvent.clientY
+            lastPointerX = pointerPosition.x
+            lastPointerY = pointerPosition.y
         }
 
         if (pointerEvent.pointerType === 'mouse') {
@@ -319,9 +372,7 @@ const bindEvent = () => {
     });
 
     mapCanvas.addEventListener('click', (mouseEvent) => {
-        const canvasRect = mapCanvas.getBoundingClientRect(); // Canvas 在页面中的位置
-        const screenX = mouseEvent.clientX - canvasRect.left; // 鼠标在 Canvas 上的 X
-        const screenY = mouseEvent.clientY - canvasRect.top;  // 鼠标在 Canvas 上的 Y
+        const { x: screenX, y: screenY } = getCanvasPointerPosition(mouseEvent)
         const worldPos = screenToWorld(screenX, screenY, applicationState);
     })
 
@@ -331,15 +382,33 @@ const bindEvent = () => {
             return
         }
         pointerEvent.preventDefault()
+        const pointerPosition = getCanvasPointerPosition(pointerEvent)
         activePointerId = pointerEvent.pointerId
-        lastPointerX = pointerEvent.clientX
-        lastPointerY = pointerEvent.clientY
+        lastPointerX = pointerPosition.x
+        lastPointerY = pointerPosition.y
+        pointerStartX = pointerPosition.x
+        pointerStartY = pointerPosition.y
+        hasDragged = false
         applicationState.mouseState.isDragging = true;
         mapCanvas.setPointerCapture(pointerEvent.pointerId)
     });
 
-    const endPointerDrag = (pointerEvent) => {
+    const endPointerDrag = (pointerEvent, cancelled = false) => {
         if (pointerEvent.pointerId !== activePointerId) return
+
+        // Pad/触控笔轻点时执行命中检测；轻点空白区域会隐藏信息窗。
+        if (!cancelled && !hasDragged && pointerEvent.pointerType !== 'mouse') {
+            const pointerPosition = getCanvasPointerPosition(pointerEvent)
+            applicationState.mouseState.screenX = pointerPosition.x
+            applicationState.mouseState.screenY = pointerPosition.y
+            const worldPos = screenToWorld(
+                applicationState.mouseState.screenX,
+                applicationState.mouseState.screenY,
+                applicationState
+            )
+            updateTooltipDisplay(hitTestRobots(worldPos.x, worldPos.y, applicationState))
+        }
+
         applicationState.mouseState.isDragging = false;
         if (mapCanvas.hasPointerCapture(pointerEvent.pointerId)) {
             mapCanvas.releasePointerCapture(pointerEvent.pointerId)
@@ -347,8 +416,8 @@ const bindEvent = () => {
         activePointerId = null
     }
 
-    mapCanvas.addEventListener('pointerup', endPointerDrag);
-    mapCanvas.addEventListener('pointercancel', endPointerDrag);
+    mapCanvas.addEventListener('pointerup', (pointerEvent) => endPointerDrag(pointerEvent));
+    mapCanvas.addEventListener('pointercancel', (pointerEvent) => endPointerDrag(pointerEvent, true));
 
     // ── 滚轮：缩放（向鼠标位置缩放）──
     mapCanvas.addEventListener('wheel', (wheelEvent) => {
@@ -460,6 +529,11 @@ onMounted(() => {
     resizeObserver = new ResizeObserver(resizeCanvasToContainer)
     resizeObserver.observe(containerRef.value)
     window.addEventListener('resize', resizeCanvasToContainer)
+    orientationObserver = new MutationObserver(handleOrientationVisibility)
+    orientationObserver.observe(document.documentElement, {
+        attributes: true,
+        attributeFilter: ['class']
+    })
 })
 
 watch(() => props.mapName,
@@ -467,7 +541,7 @@ watch(() => props.mapName,
         if (newVal) {
             await loadSourceMap(newVal)
             addRobot(robotStore.ip, robotStore.ip, robotStore.position.x, robotStore.position.y, robotStore.position.theta, getThemeColor('--color-canvas-robot'))
-            requestAnimationFrame(renderFrame);
+            startRendering()
         }
     }, {
         immediate: true
@@ -480,8 +554,10 @@ defineExpose({
 })
 
 onUnmounted(() => {
+    stopRendering()
     window.removeEventListener('resize', resizeCanvasToContainer)
     resizeObserver?.disconnect()
+    orientationObserver?.disconnect()
     canvasCtx = null
 })
 </script>