From 068de37dd0686dbdb281c882ff8bb2a7b11b51a2 Mon Sep 17 00:00:00 2001
From: XcantloadX <3188996979@qq.com>
Date: Fri, 10 Jan 2025 17:41:15 +0800
Subject: [PATCH] =?UTF-8?q?feat(core):=20=E5=8F=AF=E8=A7=86=E5=8C=96?=
 =?UTF-8?q?=E8=B0=83=E8=AF=95=E9=A1=B5=E9=9D=A2=E5=A2=9E=E5=8A=A0=E9=94=81?=
 =?UTF-8?q?=E5=AE=9A=E8=A7=86=E5=9B=BE=E4=B8=8E=E6=BB=91=E5=9D=97=E7=BF=BB?=
 =?UTF-8?q?=E9=A1=B5=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 kotonebot/backend/debug/ui.html | 66 +++++++++++++++++++++++++++++++--
 1 file changed, 63 insertions(+), 3 deletions(-)

diff --git a/kotonebot/backend/debug/ui.html b/kotonebot/backend/debug/ui.html
index 28e64ca..fa95744 100644
--- a/kotonebot/backend/debug/ui.html
+++ b/kotonebot/backend/debug/ui.html
@@ -231,6 +231,13 @@
                         <button class="btn btn-sm btn-outline-secondary" id="downloadBtn" alt="下载图片">
                             <i class="bi bi-download"></i>
                         </button>
+                        <div class="form-check form-check-inline ms-2">
+                            <input class="form-check-input" type="checkbox" id="lockViewCheckbox">
+                            <label class="form-check-label" for="lockViewCheckbox">锁定视图</label>
+                        </div>
+                    </div>
+                    <div class="slider-container mb-2">
+                        <input type="range" class="form-range" id="pageSlider" value="0" min="0" max="0">
                     </div>
                     <div class="navigation-buttons">
                         <button class="btn btn-sm btn-outline-secondary" id="firstBtn" alt="第一张">
@@ -287,6 +294,10 @@
             let startWidth = 0;
             let minWidth = 200;  // 最小宽度
             let maxWidth = 800;  // 最大宽度
+            let isViewLocked = false;  // 视图锁定状态
+            let lastScale = 1.0;  // 上一次的缩放值
+            let lastTranslateX = 0;  // 上一次的X位移
+            let lastTranslateY = 0;  // 上一次的Y位移
 
             // 显示/隐藏连接状态
             function showConnectionStatus(show) {
@@ -319,6 +330,10 @@
                 $('#prevBtn').prop('disabled', currentImageIndex <= 0);
                 $('#nextBtn').prop('disabled', currentImageIndex >= imageHistory.length - 1);
                 $('#lastBtn').prop('disabled', currentImageIndex >= imageHistory.length - 1);
+                
+                // 更新滑块最大值
+                const slider = $('#pageSlider');
+                slider.attr('max', Math.max(0, imageHistory.length - 1));
             }
 
             // 显示历史图片
@@ -341,6 +356,31 @@
                 $('h4').text(imageData.name);
                 $('#customMessage').html(imageData.details);
                 
+                // 根据锁定状态决定是否保持视图
+                if (isViewLocked) {
+                    currentScale = lastScale;
+                    translateX = lastTranslateX;
+                    translateY = lastTranslateY;
+                } else {
+                    // 重置位移
+                    translateX = 0;
+                    translateY = 0;
+                    // 图片加载完成后调整缩放以适应容器
+                    img.on('load', function() {
+                        const container = imageContainer;
+                        const containerRatio = container.width() / container.height();
+                        const imageRatio = this.width / this.height;
+                        
+                        if (imageRatio > containerRatio) {
+                            currentScale = container.width() / this.width * 0.9;
+                        } else {
+                            currentScale = container.height() / this.height * 0.9;
+                        }
+                        updateImageTransform(img);
+                        updateZoomLevel();
+                    });
+                }
+                
                 // 应用当前的缩放和位移
                 updateImageTransform(img);
                 updateZoomLevel();
@@ -348,8 +388,9 @@
                 // 初始化拖拽事件
                 initDragEvents();
                 
-                // 更新计数
+                // 更新计数和滑块
                 updateImageCount();
+                $('#pageSlider').val(currentImageIndex);
             }
 
             // 连接 WebSocket
@@ -415,6 +456,10 @@
             // 更新图片变换
             function updateImageTransform(img) {
                 img.css('transform', `translate(${translateX}px, ${translateY}px) scale(${currentScale})`);
+                // 保存当前视图状态
+                lastScale = currentScale;
+                lastTranslateX = translateX;
+                lastTranslateY = translateY;
             }
 
             // 设置图片缩放
@@ -584,8 +629,23 @@
             $('#downloadBtn').click(downloadCurrentImage);
 
             // 初始化所有功能
-            connectWebSocket();
-            initResizeHandle();
+            function initializeUI() {
+                connectWebSocket();
+                initResizeHandle();
+                
+                // 初始化滑块事件
+                $('#pageSlider').on('input', function() {
+                    showHistoryImage(parseInt($(this).val()));
+                });
+                
+                // 初始化锁定视图复选框事件
+                $('#lockViewCheckbox').on('change', function() {
+                    isViewLocked = $(this).prop('checked');
+                });
+            }
+
+            // 修改初始化调用
+            initializeUI();
         });
     </script>