feat(旋转控制): 为旋转滑块添加吸附功能并固定数值显示宽度

在旋转滑块附近0°、-90°、90°时添加5度的吸附阈值，使操作更精准
为旋转度数和百分比数值显示元素设置固定宽度，保持布局稳定

css/style.css

@@ -241,6 +241,20 @@ html, body {
     margin: 0;
 }
 
+/* 旋转度数显示固定宽度 */
+#rotateValue {
+    display: inline-block;
+    min-width: 40px;
+    text-align: center;
+}
+
+/* 百分比显示固定宽度 */
+#opacityValue, #bgScaleValue, #bgOpacityValue {
+    display: inline-block;
+    min-width: 40px;
+    text-align: center;
+}
+
 /* 字号滚轮选择器 */
 .roller-picker {
     display: flex;

js/script.js

@@ -130,7 +130,21 @@
         // 旋转滑块
         rotateSlider.addEventListener('input', (e) => {
             if (selectedOverlay) {
-                const rotateDeg = e.target.value;
+                let rotateDeg = parseInt(e.target.value);
+                
+                // 吸附功能：在 0°、-90°、90° 附近吸附
+                const snapAngles = [0, -90, 90];
+                const snapThreshold = 5; // 吸附阈值 5 度
+                
+                for (const snapAngle of snapAngles) {
+                    if (Math.abs(rotateDeg - snapAngle) < snapThreshold) {
+                        rotateDeg = snapAngle;
+                        // 更新滑动条位置
+                        rotateSlider.value = rotateDeg;
+                        break;
+                    }
+                }
+                
                 selectedOverlay.style.transform = `rotate(${rotateDeg}deg)`;
                 rotateValue.textContent = rotateDeg + '°';
             }