Merge branch 'main' of https://git.deploy.top/wyh/yunsan-pc

src/views/home/components/ModuleTen.vue

@@ -30,12 +30,12 @@ let hlsInstance = null
 
 const videoWrapper = ref(null)
 
-const scale = ref(1)
+const savedScale = parseFloat(localStorage.getItem('videoScale') || '1')
+const scale = ref(savedScale)
 const scrollLeft = ref(0)
 const scrollTop = ref(0)
 
 const minScale = 1
-const maxScale = 3
 const scaleStep = 0.2
 
 const showScrollbar = computed(() => scale.value > 1)
@@ -90,29 +90,39 @@ const scrollbarYStyle = computed(() => {
 })
 
 const zoomIn = () => {
-  if (scale.value < maxScale) {
+  scale.value += scaleStep
-    scale.value = Math.min(maxScale, scale.value + scaleStep)
+  localStorage.setItem('videoScale', scale.value.toString())
-    updateScrollBounds()
+  centerVideo()
-  }
 }
 
 const zoomOut = () => {
   if (scale.value > minScale) {
     scale.value = Math.max(minScale, scale.value - scaleStep)
-    updateScrollBounds()
+    localStorage.setItem('videoScale', scale.value.toString())
+    centerVideo()
   }
 }
 
-const updateScrollBounds = () => {
+const centerVideo = () => {
   if (!videoWrapper.value) return
-  
+
-  const wrapperWidth = videoWrapper.value.clientWidth
+  const wrapper = videoWrapper.value
-  const wrapperHeight = videoWrapper.value.clientHeight
+  // clientWidth/clientHeight 不包含滚动条和边框，但包含 padding
-  const maxScrollLeft = Math.max(0, wrapperWidth * (scale.value - 1))
+  // 直接使用 clientWidth/clientHeight 作为可视区域尺寸
-  const maxScrollTop = Math.max(0, wrapperHeight * (scale.value - 1))
+  const contentWidth = wrapper.clientWidth
-  
+  const contentHeight = wrapper.clientHeight
-  scrollLeft.value = Math.min(scrollLeft.value, maxScrollLeft)
+
-  scrollTop.value = Math.min(scrollTop.value, maxScrollTop)
+  if (scale.value <= 1) {
+    scrollLeft.value = 0
+    scrollTop.value = 0
+    return
+  }
+
+  const scaledWidth = contentWidth * scale.value
+  const scaledHeight = contentHeight * scale.value
+
+  scrollLeft.value = (scaledWidth - contentWidth) / 2
+  scrollTop.value = (scaledHeight - contentHeight) / 2
 }
 
 let isDraggingX = false
@@ -246,6 +256,16 @@ const initVideo = async () => {
 
 onMounted(() => {
   initVideo()
+  // 多次尝试居中，确保 DOM 渲染完成后生效
+  nextTick(() => {
+    centerVideo()
+    setTimeout(() => {
+      centerVideo()
+    }, 100)
+    setTimeout(() => {
+      centerVideo()
+    }, 300)
+  })
 })
 
 onBeforeUnmount(() => {
@@ -291,11 +311,14 @@ onBeforeUnmount(() => {
         width: 100%;
         height: 100%;
         transition: width 0.1s ease, height 0.1s ease;
+        display: flex;
+        align-items: center;
+        justify-content: center;
 
         .video-ats {
           width: 100%;
           height: 100%;
-          object-fit: fill;
+          object-fit: contain;
           display: block;
         }
       }