[Pref 0000] 添加自适应缩放功能对异形分辨率的处理

src/components/Container/src/AdaptiveContainer.vue

@@ -19,6 +19,8 @@
     minScale?: number; // 最小缩放比例
     maxScale?: number; // 最大缩放比例
     debounceTime?: number; // 防抖时间(ms)
+    ratio?: number; // 宽高比
+    tolerance?: number; // 宽高比容忍度
   }
 
   interface ScaleInfo {
@@ -42,12 +44,14 @@
 
       // 默认配置
       const defaultOptions = ref<Required<AdaptiveOptions>>({
-        width: 1920,
-        height: 1080,
+        width: 1912,
+        height: 948,
         baseWidth: 1920,
         minScale: 0.5,
         maxScale: 2,
         debounceTime: 100,
+        ratio: 16 / 9,
+        tolerance: 0.1,
       });
 
       // 合并配置
@@ -127,7 +131,7 @@
 
         // 应用缩放
         container.style.transform = `scale(${widthScale}, ${heightScale})`;
-        container.style.transformOrigin = 'left top';
+        // container.style.transformOrigin = 'top left';
 
         // 更新store中的比例信息（如果需要）
         appStore.setWidthScale(widthScale);
@@ -151,9 +155,13 @@
             throw new Error('容器元素未找到');
           }
           const container = containerRef.value;
+          const { ratio, tolerance } = config.value;
+          const normalRatio = Math.abs(ratio - container.clientWidth / container.clientHeight) < ratio * tolerance;
           // const container = document.getElementById('app')!;
-          defaultOptions.value.width = container.clientWidth;
-          defaultOptions.value.height = container.clientHeight;
+          if (normalRatio) {
+            defaultOptions.value.width = container.clientWidth;
+            defaultOptions.value.height = container.clientHeight;
+          }
 
           const { width, height } = designSize.value;
           container.style.width = `${width}px`;
@@ -188,7 +196,7 @@
     overflow: hidden;
     height: 100%;
     width: 100%;
-    // transform-origin: left top;
+    transform-origin: left top;
     // z-index: 0;
     // 防止缩放导致的模糊（开启GPU加速）
     backface-visibility: hidden;