feat(configuratePage):响应式页面

ui/src/utils/dcs/usePageScale.js

@@ -0,0 +1,64 @@
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+
+export function usePageScale(w, h) {
+    const windowWidth = ref(0)
+    const windowHeight = ref(0)
+    const pageWidth = ref(0)
+    const pageHeight = ref(0)
+    const pageRef = ref()
+    const currentScale = ref(1)
+
+    function debounce(func, wait) {
+        let timeout
+        return function executedFunction(...args) {
+            const later = () => {
+                clearTimeout(timeout)
+                func(...args)
+            }
+            clearTimeout(timeout)
+            timeout = setTimeout(later, wait)
+        }
+    }
+
+    function updateSize() {
+        if (!pageRef.value) return
+
+        windowWidth.value = window.innerWidth
+        windowHeight.value = window.innerHeight
+
+        const designWidth = w || 1920
+        const designHeight = h || 1080
+
+        const scaleX = windowWidth.value / designWidth
+        const scaleY = windowHeight.value / designHeight
+
+        let scale = Math.min(scaleX, scaleY)
+        scale = Math.max(0.2, Math.min(5, scale))
+
+        pageWidth.value = designWidth * scale
+        pageHeight.value = designHeight * scale
+        currentScale.value = scale
+
+        pageRef.value.style.transform = `scale(${scale}, ${scale})`
+    }
+
+    const debouncedUpdateSize = debounce(updateSize, 150)
+
+    onMounted(() => {
+        updateSize()
+        window.addEventListener('resize', debouncedUpdateSize)
+    })
+
+    onBeforeUnmount(() => {
+        window.removeEventListener('resize', debouncedUpdateSize)
+    })
+
+    return {
+        windowWidth,
+        windowHeight,
+        pageWidth,
+        pageHeight,
+        pageRef,
+        currentScale
+    }
+}