优化图片查看器功能：修复旋转后显示问题和缩放功能

Reject.html

@@ -317,8 +317,10 @@
         }
 
         .image-viewer img {
-            max-width: 100%;
+            max-width: none;
-            max-height: 100vh;
+            max-height: none;
+            width: auto;
+            height: auto;
             object-fit: contain;
             transition: transform 0.1s ease;
             cursor: grab;
@@ -351,7 +353,8 @@
         }
 
         .image-viewer-prev,
-        .image-viewer-next {
+        .image-viewer-next,
+        .image-viewer-rotate {
             position: absolute;
             top: 50%;
             transform: translateY(-50%);
@@ -368,6 +371,17 @@
             justify-content: center;
             transition: background-color 0.3s ease;
         }
+        
+        .image-viewer-rotate {
+            top: auto;
+            bottom: 20px;
+            right: 80px;
+            transform: none;
+        }
+        
+        .image-viewer-rotate:hover {
+            background-color: rgba(255, 255, 255, 0.4);
+        }
 
         .image-viewer-prev {
             left: 20px;
@@ -3469,6 +3483,7 @@ function showImageViewer(imgElement) {
         </div>
         <button class="image-viewer-next" onclick="showNextImage(event)">&gt;</button>
         <button class="image-viewer-close" onclick="closeImageViewer()">&times;</button>
+        <button class="image-viewer-rotate" onclick="rotateImage()">↻</button>
     </div>
 
     <script>
@@ -3479,6 +3494,7 @@ function showImageViewer(imgElement) {
         
         // 缩放和拖动相关变量
         let scale = 1;
+        let rotation = 0; // 旋转角度变量
         
         // showImageViewer函数已在下面正确定义，这里删除重复定义
         let lastScale = 1;
@@ -3587,7 +3603,7 @@ function showImageViewer(imgElement) {
                 currentImageIndex = (currentImageIndex - 1 + currentImageUrls.length) % currentImageUrls.length;
                 document.getElementById('viewerImage').src = currentImageUrls[currentImageIndex];
                 document.getElementById('imageCounter').textContent = `${currentImageIndex + 1}/${currentImageUrls.length}`;
-                // 重置缩放和拖动状态
+                // 重置缩放、拖动和旋转状态
                 resetImageTransform();
             }
         }
@@ -3598,7 +3614,7 @@ function showImageViewer(imgElement) {
                 currentImageIndex = (currentImageIndex + 1) % currentImageUrls.length;
                 document.getElementById('viewerImage').src = currentImageUrls[currentImageIndex];
                 document.getElementById('imageCounter').textContent = `${currentImageIndex + 1}/${currentImageUrls.length}`;
-                // 重置缩放和拖动状态
+                // 重置缩放、拖动和旋转状态
                 resetImageTransform();
             }
         }
@@ -3607,6 +3623,7 @@ function showImageViewer(imgElement) {
         function resetImageTransform() {
             const viewerImage = document.getElementById('viewerImage');
             scale = 1;
+            rotation = 0; // 重置旋转角度
             lastScale = 1;
             pointX = 0;
             pointY = 0;
@@ -3617,7 +3634,56 @@ function showImageViewer(imgElement) {
         // 更新图片变换
         function updateImageTransform() {
             const viewerImage = document.getElementById('viewerImage');
-            viewerImage.style.transform = `translate(${pointX}px, ${pointY}px) scale(${scale})`;
+            viewerImage.style.transform = `translate(${pointX}px, ${pointY}px) scale(${scale}) rotate(${rotation}deg)`;
+        }
+        
+        // 旋转图片函数
+        function rotateImage() {
+            rotation += 90; // 每次旋转90度
+            updateImageTransform();
+            // 旋转后重新计算位置，确保图片完全显示
+            adjustImagePosition();
+        }
+        
+        // 调整图片位置和缩放，确保完全显示
+        function adjustImagePosition() {
+            const viewerImage = document.getElementById('viewerImage');
+            const viewerContent = document.querySelector('.image-viewer-content');
+            
+            // 重置缩放和位置
+            scale = 1;
+            pointX = 0;
+            pointY = 0;
+            updateImageTransform();
+            
+            // 获取图片原始尺寸
+            const imgNaturalWidth = viewerImage.naturalWidth;
+            const imgNaturalHeight = viewerImage.naturalHeight;
+            
+            // 获取容器尺寸
+            const containerWidth = viewerContent.clientWidth;
+            const containerHeight = viewerContent.clientHeight;
+            
+            // 计算旋转后的宽高（90度倍数旋转）
+            let rotatedWidth, rotatedHeight;
+            if ([90, 270].includes(rotation % 360)) {
+                // 旋转90度或270度，宽高互换
+                rotatedWidth = imgNaturalHeight;
+                rotatedHeight = imgNaturalWidth;
+            } else {
+                // 0度或180度，宽高不变
+                rotatedWidth = imgNaturalWidth;
+                rotatedHeight = imgNaturalHeight;
+            }
+            
+            // 计算适合容器的缩放比例
+            const scaleX = containerWidth / rotatedWidth;
+            const scaleY = containerHeight / rotatedHeight;
+            const fitScale = Math.min(scaleX, scaleY, 1); // 不超过原始大小
+            
+            // 应用缩放
+            scale = fitScale;
+            updateImageTransform();
         }
         
         // 设置图片查看器事件
@@ -3721,21 +3787,22 @@ function showImageViewer(imgElement) {
             const wheelDelta = delta > 0 ? 0.9 : 1.1;
             scale *= wheelDelta;
             
-            // 限制缩放范围，最小为照片原始大小
+            // 限制缩放范围，最小为0.1倍，最大为10倍
-            scale = Math.min(Math.max(scale, 1), 10);
+            scale = Math.min(Math.max(scale, 0.1), 10);
             
             // 当缩放到接近原始大小时，平滑调整位置偏移，确保照片始终可见
             if (scale <= 1.1) {
-                // 根据当前缩放比例计算位置偏移的衰减因子
+                // 仅在缩放比例接近1时才调整位置，小于0.9时不调整
-                const decayFactor = (scale - 1) / 0.1;
+                if (scale >= 0.9) {
-                // 当缩放到原始大小时，位置偏移完全重置
+                    // 根据当前缩放比例计算位置偏移的衰减因子
-                if (scale === 1) {
+                    const decayFactor = (scale - 0.9) / 0.2;
-                    pointX = 0;
-                    pointY = 0;
-                } else {
                     // 平滑过渡，避免照片在缩小过程中消失
                     pointX *= decayFactor;
                     pointY *= decayFactor;
+                } else if (scale === 1) {
+                    // 当精确缩放到原始大小时，位置偏移完全重置
+                    pointX = 0;
+                    pointY = 0;
                 }
             }