fix(maotu): 优化拓扑预览页手机端横屏展示

src/components/mt-preview/index.vue

@@ -3,7 +3,7 @@
     <el-scrollbar
       ref="elScrollbarRef"
       class="w-1/1 h-1/1"
-      max-height="100vh"
+      max-height="100%"
       @scroll="onScroll">
       <div
         class="canvasStage">
@@ -120,12 +120,15 @@ const fitCanvasToScreen = () => {
     return
   }
 
-  const rootRect = previewRootRef.value?.getBoundingClientRect()
-  if (!rootRect?.width || !rootRect?.height || !canvas_cfg.value.width || !canvas_cfg.value.height) {
+  const root = previewRootRef.value
+  if (!root?.clientWidth || !root?.clientHeight || !canvas_cfg.value.width || !canvas_cfg.value.height) {
     return
   }
 
-  const scale = Math.min(rootRect.width / canvas_cfg.value.width, rootRect.height / canvas_cfg.value.height)
+  const scale = Math.min(
+    root.clientWidth / canvas_cfg.value.width,
+    root.clientHeight / canvas_cfg.value.height
+  )
   canvas_cfg.value.scale = Number(Math.max(scale, 0.01).toFixed(4))
 }
 const fitCanvasToScreenAfterRender = async () => {
@@ -204,16 +207,16 @@ defineExpose({
 </script>
 <style scoped>
 .mt-preview-root {
-  width: 100vw;
-  height: 100vh;
+  width: 100%;
+  height: 100%;
   overflow: hidden;
   background-color: v-bind('canvas_cfg.color || "#fff"');
 }
 
 .mt-preview-root :deep(.el-scrollbar__view) {
-  min-width: 100%;
-  min-height: 100vh;
   display: flex;
+  min-width: 100%;
+  min-height: 100%;
   align-items: center;
   justify-content: center;
 }
@@ -227,8 +230,8 @@ defineExpose({
 
 .canvasArea {
   position: absolute;
-  left: 0;
   top: 0;
+  left: 0;
   width: v-bind('canvas_cfg.width + "px"');
   height: v-bind('canvas_cfg.height + "px"');
   background-color: v-bind('canvas_cfg.color');

src/views/maotu/preview.vue

@@ -1,5 +1,7 @@
 <template>
-  <mt-preview ref="MtPreviewRef" @on-event-call-back="onEventCallBack" />
+  <div class="preview-page">
+    <mt-preview ref="MtPreviewRef" @on-event-call-back="onEventCallBack" />
+  </div>
 </template>
 <script setup lang="ts">
 import { WebtopoProjectApi, parseWebtopoDataModel } from '@/api/pms/maotu'
@@ -169,3 +171,29 @@ onUnmounted(() => {
   stopDeviceBindPolling()
 })
 </script>
+
+<style scoped>
+.preview-page {
+  width: 100vw;
+  width: 100dvw;
+  height: 100vh;
+  height: 100dvh;
+  overflow: hidden;
+}
+
+/* 手机竖屏时模拟横屏，横屏状态和桌面端保持原方向 */
+/* stylelint-disable-next-line order/order -- 基础视口样式需要位于移动端覆盖样式之前 */
+@media screen and (width <= 767px) and (orientation: portrait) {
+  .preview-page {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vh;
+    width: 100dvh;
+    height: 100vw;
+    height: 100dvw;
+    transform: rotate(90deg) translateY(-100%);
+    transform-origin: left top;
+  }
+}
+</style>