fix:修复放大情况下下拉偏移的情况

frontend/src/components/base/tooltip.tsx

@@ -66,9 +66,10 @@ export default defineComponent({
     )
 
     const dropdownStyle = computed<CSSProperties>(() => {
+      const zoom = parseFloat(getComputedStyle(document.body).zoom) || 1
       return {
-        left: `${dropdownPosition.x}px`,
+        left: `${dropdownPosition.x / zoom}px`,
-        top: `${dropdownPosition.y}px`,
+        top: `${dropdownPosition.y / zoom}px`,
         visibility: isShow.value ? 'visible' : 'hidden',
       }
     })

frontend/src/components/calc/autocomplete/index.vue

@@ -55,10 +55,11 @@ export default defineComponent({
     function onResize() {
       if (triggerRef.value) {
         const { width, height, left, top } = triggerRef.value.getBoundingClientRect()
+        const zoom = parseFloat(getComputedStyle(document.body).zoom) || 1
         dropdownPosition.value = {
-          w: width,
+          w: width / zoom,
-          x: left,
+          x: left / zoom,
-          y: top + height + 2,
+          y: top / zoom + height / zoom + 2,
         }
       }
     }

frontend/src/components/calc/cascader/index.vue

@@ -56,17 +56,18 @@ export default defineComponent({
     const dropdownPosition = ref({ x: 0, y: 0, w: 0, z: 0 })
     // 下拉框位置
     const dropdownStyle = computed<CSSProperties>(() => {
+      const zoom = parseFloat(getComputedStyle(document.body).zoom) || 1
       if (dropdownPosition.value.z == 0) {
         return {
-          left: `${dropdownPosition.value.x}px`,
+          left: `${dropdownPosition.value.x / zoom}px`,
-          top: `${dropdownPosition.value.y}px`,
+          top: `${dropdownPosition.value.y / zoom}px`,
-          width: `${dropdownPosition.value.w}px`,
+          width: `${dropdownPosition.value.w / zoom}px`,
         }
       } else {
         return {
-          left: `${dropdownPosition.value.x}px`,
+          left: `${dropdownPosition.value.x / zoom}px`,
-          bottom: `${dropdownPosition.value.z}px`,
+          bottom: `${dropdownPosition.value.z / zoom}px`,
-          width: `${dropdownPosition.value.w}px`,
+          width: `${dropdownPosition.value.w / zoom}px`,
         }
       }
     })

frontend/src/components/calc/iconselect/index.vue

@@ -82,10 +82,11 @@ export default defineComponent({
     function onResize() {
       if (triggerRef.value) {
         const { width, height, left, top } = triggerRef.value.getBoundingClientRect()
+        const zoom = parseFloat(getComputedStyle(document.body).zoom) || 1
         dropdownPosition.value = {
-          w: width,
+          w: width / zoom,
-          x: left - 2,
+          x: left / zoom - 2,
-          y: top + height + 2,
+          y: (top + height + 2) / zoom,
         }
       }
     }

frontend/src/components/calc/select/index.vue

@@ -80,17 +80,18 @@ export default defineComponent({
     const dropdownPosition = ref({ x: 0, y: 0, w: 0, z: 0 })
     // 下拉框位置
     const dropdownStyle = computed<CSSProperties>(() => {
+      const zoom = parseFloat(getComputedStyle(document.body).zoom) || 1
       if (dropdownPosition.value.z == 0) {
         return {
-          left: `${dropdownPosition.value.x}px`,
+          left: `${dropdownPosition.value.x / zoom}px`,
-          top: `${dropdownPosition.value.y}px`,
+          top: `${dropdownPosition.value.y / zoom}px`,
-          width: `${dropdownPosition.value.w}px`,
+          width: `${dropdownPosition.value.w / zoom}px`,
         }
       } else {
         return {
-          left: `${dropdownPosition.value.x}px`,
+          left: `${dropdownPosition.value.x / zoom}px`,
-          bottom: `${dropdownPosition.value.z}px`,
+          bottom: `${dropdownPosition.value.z / zoom}px`,
-          width: `${dropdownPosition.value.w}px`,
+          width: `${dropdownPosition.value.w / zoom}px`,
         }
       }
     })
@@ -102,14 +103,14 @@ export default defineComponent({
           dropdownPosition.value = {
             w: width,
             x: left,
-            y: top + height + 2,
+            y: (top + height + 2),
             z: 0,
           }
         } else {
           dropdownPosition.value = {
             w: width,
             x: left,
-            z: window.innerHeight - top + 2,
+            z: (window.innerHeight - top  + 2),
             y: 0,
           }
         }

frontend/src/pages/IndexView.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full mt-0 h-100% overflow-y-auto" :style="`zoom:${zoom}`">
+  <div class="w-full mt-0 h-100% overflow-y-auto">
     <Suspense>
       <RouterView></RouterView>
     </Suspense>
@@ -15,4 +15,9 @@ const zoom = computed(() => {
 import { useDialog } from '@/components/hooks/dialog'
 
 const { render } = useDialog()
+
+onMounted(() => {
+  document.body.style.overflow = 'hidden'
+  document.body.style.zoom = zoom.value.toString()
+})
 </script>