From bd89ebb6205ee9b0704a328824a2ba5e405a9b6a Mon Sep 17 00:00:00 2001
From: wuming230 <1819845645@qq.com>
Date: Thu, 20 Mar 2025 19:07:56 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E5=9B=BE=E7=89=87?=
 =?UTF-8?q?=E7=BC=A9=E6=94=BE=E6=A3=80=E8=A7=86=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../.vitepress/src/components/ImgZoomDrag.vue | 133 +++++++++++++-----
 docs/.vitepress/src/layouts/LayoutDoc.vue     |  11 +-
 2 files changed, 106 insertions(+), 38 deletions(-)

diff --git a/docs/.vitepress/src/components/ImgZoomDrag.vue b/docs/.vitepress/src/components/ImgZoomDrag.vue
index 7b8eb26..f1b076e 100644
--- a/docs/.vitepress/src/components/ImgZoomDrag.vue
+++ b/docs/.vitepress/src/components/ImgZoomDrag.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, reactive, onMounted, onUnmounted } from 'vue';
+import { ref, reactive, onMounted, onUnmounted, nextTick } from 'vue';
 
 const props = defineProps({
   // 图片url
@@ -15,12 +15,17 @@ const props = defineProps({
     type: Number,
     default: 0,
   },
+  zoom: {
+    type: Number,
+    default: 1.1,
+  },
 });
 
 const minScale = 1;
 const maxScale = 3;
 const wheelRatio = 0.1;
-const scale = ref<number>(1.5);
+const scale = ref<number>(1.1);
+scale.value = props.zoom;
 
 const left = ref<number>(0);
 const top = ref<number>(0);
@@ -38,18 +43,23 @@ const state = reactive({
   isDown: false, // 鼠标是否长按中
   moveX: 0, // 长按移动坐标x
   moveY: 0, // 长按移动坐标y
+
+  startDiffLeft: 0, // 鼠标按下的间距
+  startDiffTop: 0,
+  startDiffRight: 0,
+  startDiffBottom: 0,
 });
 
 const zoomBoxStyle = ref({
-  width: Math.round(props.width * scale.value),
-  height: Math.round(props.height * scale.value),
+  width: props.width * scale.value,
+  height: props.height * scale.value,
   left: 0,
   top: 0,
 });
 
 const targetBoxStyle = ref({
-  width: 0,
-  height: 0,
+  width: props.width * scale.value,
+  height: props.height * scale.value,
   left: 0,
   top: 0,
   zoom: 1,
@@ -59,29 +69,14 @@ const targetBoxStyle = ref({
 async function getSize(ele: HTMLElement | undefined): Promise<[number, number, number, number]> {
   function inner(resolve: (res: [number, number, number, number]) => void) {
     if (ele) {
-      const { left, top } = ele.getBoundingClientRect();
-      const [width, height] = [ele.clientWidth, ele.clientHeight];
-      resolve([Math.round(width), Math.round(height), Math.round(left), Math.round(top)]);
+      const { left, top, width, height } = ele.getBoundingClientRect();
+      resolve([width, height, left, top]);
     } else {
       resolve([0, 0, 0, 0]);
     }
   }
   return new Promise((resolve) => {
-    if (ele) {
-      if (ele instanceof HTMLImageElement) {
-        if (ele.complete) {
-          inner(resolve);
-        } else {
-          ele.onload = () => {
-            inner(resolve);
-          };
-        }
-      } else {
-        inner(resolve);
-      }
-    } else {
-      resolve([0, 0, 0, 0]);
-    }
+    inner(resolve);
   });
 }
 
@@ -89,13 +84,35 @@ const changeZoom = async (val: number) => {
   scale.value += val;
   scale.value = Math.round(scale.value * 1000) / 1000;
 
-  const [targetWidth, targetHeight, targetLeft, targetTop] = await getSize(targetRef.value);
+  targetBoxStyle.value.width = props.width * scale.value;
+  targetBoxStyle.value.height = props.height * scale.value;
+
+  zoomBoxStyle.value.width = props.width * scale.value;
+  zoomBoxStyle.value.height = props.height * scale.value;
+
+  nextTick(async () => {
+    const [tWidth, tHeight, tLeft, tTop] = await getSize(targetRef.value);
+    const [zWidth, zHeight, zLeft, zTop] = await getSize(zoomRef.value);
+    targetBoxStyle.value = {
+      width: tWidth,
+      height: tHeight,
+      left: tLeft,
+      top: tTop,
+      zoom: scale.value,
+    };
+    zoomBoxStyle.value = {
+      width: zWidth,
+      height: zHeight,
+      left: zLeft,
+      top: zTop,
+    };
 
-  targetBoxStyle.value.width = Math.round(targetWidth * scale.value);
-  targetBoxStyle.value.height = Math.round(targetHeight * scale.value);
+    top.value = (zoomBoxStyle.value.height - targetBoxStyle.value.height) / 2;
+    left.value = (zoomBoxStyle.value.width - targetBoxStyle.value.width) / 2;
 
-  zoomBoxStyle.value.width = Math.round(targetWidth * scale.value);
-  zoomBoxStyle.value.height = Math.round(targetHeight * scale.value);
+    state.lastLeft = left.value;
+    state.lastTop = top.value;
+  });
 };
 const onWheel = (el: WheelEvent) => {
   // 放大
@@ -116,15 +133,58 @@ const onMouseStart = async (e: MouseEvent) => {
     state.startX = e.clientX;
     state.startY = e.clientY;
     state.isDown = true;
+
+    const [tWidth, tHeight, tLeft, tTop] = await getSize(targetRef.value);
+    const [zWidth, zHeight, zLeft, zTop] = await getSize(zoomRef.value);
+
+    const widthDiff = tWidth - zWidth;
+    const heightDiff = tHeight - zHeight;
+
+    state.startDiffLeft = tLeft - zLeft;
+    state.startDiffTop = tTop - zTop;
+    state.startDiffRight = widthDiff - Math.abs(state.startDiffLeft);
+    state.startDiffBottom = heightDiff - Math.abs(state.startDiffTop);
   }
 };
 const onMousemove = async (e: MouseEvent) => {
   if (state.isDown) {
-    state.moveX = e.clientX;
-    state.moveY = e.clientY;
+    const [tWidth, tHeight, tLeft, tTop] = await getSize(targetRef.value);
+    const [zWidth, zHeight, zLeft, zTop] = await getSize(zoomRef.value);
+
+    const widthDiff = tWidth - zWidth;
+    const heightDiff = tHeight - zHeight;
+
+    const diffLeft = tLeft - zLeft;
+    const diffTop = tTop - zTop;
+    const diffRight = widthDiff - Math.abs(diffLeft);
+    const diffBottom = heightDiff - Math.abs(diffTop);
+
+    // 鼠标移动距离
+    let moveX = e.clientX - state.startX;
+    let moveY = e.clientY - state.startY;
+
+    // 左移到侧边
+    if (moveX < 0 && diffRight <= 0) {
+      moveX = -state.startDiffRight;
+    }
+
+    // 上移到侧边
+    if (moveY < 0 && diffBottom <= 0) {
+      moveY = -state.startDiffBottom;
+    }
+
+    // 右移到侧边
+    if (moveX > 0 && diffLeft >= 0) {
+      moveX = -state.startDiffLeft;
+    }
+
+    // 下移到侧边
+    if (moveY > 0 && diffTop >= 0) {
+      moveY = -state.startDiffTop;
+    }
 
-    left.value = Math.round(state.lastLeft + state.moveX - state.startX);
-    top.value = Math.round(state.lastTop + state.moveY - state.startY);
+    top.value = state.lastTop + moveY;
+    left.value = state.lastLeft + moveX;
   }
 };
 const onMouseEnd = () => {
@@ -159,7 +219,11 @@ onUnmounted(() => {
 </script>
 <template>
   <div ref="zoomRef" class="zoom-box" :style="{ width: `${zoomBoxStyle.width}px`, height: `${zoomBoxStyle.height}px` }">
-    <div ref="targetRef" class="target-box" :style="{ transform: `scale(${scale}) translate(${left}px, ${top}px)` }">
+    <div
+      ref="targetRef"
+      class="target-box"
+      :style="{ width: `${targetBoxStyle.width}px`, height: `${targetBoxStyle.height}px`, top: `${top}px`, left: `${left}px` }"
+    >
       <img :src="src" alt="" @dragstart.prevent />
     </div>
   </div>
@@ -181,6 +245,7 @@ onUnmounted(() => {
 
 .target-box {
   position: absolute;
+  transform-origin: 50% 50%;
   user-select: none;
   -webkit-user-drag: none;
 }
diff --git a/docs/.vitepress/src/layouts/LayoutDoc.vue b/docs/.vitepress/src/layouts/LayoutDoc.vue
index f45b84c..66526d8 100644
--- a/docs/.vitepress/src/layouts/LayoutDoc.vue
+++ b/docs/.vitepress/src/layouts/LayoutDoc.vue
@@ -50,7 +50,7 @@ import { scrollIntoView } from '@/utils/scroll-to';
 import { useDebounceFn } from '@vueuse/core';
 
 const { hash } = useData();
-const { lePad, isPhone, gtPadV, size } = useScreen();
+const { lePad, isPhone, gtPadV, size, gtLaptop } = useScreen();
 const route = useRoute();
 const router = useRouter();
 const { t, locale } = useLocale();
@@ -420,14 +420,16 @@ const zoomVisible = ref(false);
 const zoomWidth = ref(0);
 const zoomHeight = ref(0);
 
+const zoom = ref<number>(0);
+
 const bindImageZoom = (img: HTMLImageElement) => {
   if (img.naturalWidth < 200) {
     img.parentElement?.classList.add('img-expand-not');
   } else {
     const btn = img.parentElement?.querySelector<HTMLElement>('.img-mask');
     btn?.addEventListener('click', () => {
-      zoomWidth.value = img.naturalWidth;
-      zoomHeight.value = img.naturalHeight;
+      zoomWidth.value = img.offsetWidth;
+      zoomHeight.value = img.offsetHeight;
 
       imgUrl.value = img.src;
       zoomVisible.value = true;
@@ -436,6 +438,7 @@ const bindImageZoom = (img: HTMLImageElement) => {
 };
 
 const imgInit = () => {
+  zoom.value = gtLaptop.value ? 1.5 : 1.1;
   const imgDom = document.querySelectorAll<HTMLImageElement>('.markdown-body img');
   imgDom.forEach((img) => {
     if (img.naturalWidth === 0 || img.naturalHeight === 0) {
@@ -615,7 +618,7 @@ const readyVisible = ref(false);
             <OIcon class="icon"><IconExitFullScreen /></OIcon>
           </div>
           <div class="zoom">
-            <ImgZoomDrag :src="imgUrl" :width="zoomWidth" :height="zoomHeight" />
+            <ImgZoomDrag :src="imgUrl" :width="zoomWidth" :height="zoomHeight" :zoom="zoom" />
           </div>
         </div>
       </OLayer>
-- 
Gitee