From c5c79d2e675da9186fa61b563cfb84e6c8177b62 Mon Sep 17 00:00:00 2001
From: HuangHai <10402852@qq.com>
Date: Tue, 9 Sep 2025 07:39:54 +0800
Subject: [PATCH] 'commit'

---
 dsLightRag/XingJun/move.html | 219 ++++++++++++++++++++++++++++++-----
 1 file changed, 188 insertions(+), 31 deletions(-)
diff --git a/dsLightRag/XingJun/move.html b/dsLightRag/XingJun/move.html
index 21f4842f..b0d1c3ff 100644
--- a/dsLightRag/XingJun/move.html
+++ b/dsLightRag/XingJun/move.html
@@ -32,14 +32,30 @@
             height: 200px;
             z-index: 999;
         }
-        button {
+        .control-panel {
             position: absolute;
             bottom: 20px;
             left: 50%;
             transform: translateX(-50%);
+            display: flex;
+            gap: 10px;
+            z-index: 1000;
+        }
+        button {
             padding: 10px 20px;
             font-size: 16px;
             cursor: pointer;
+        }
+        .param-display {
+            position: absolute;
+            bottom: 80px;
+            left: 50%;
+            transform: translateX(-50%);
+            background-color: rgba(255, 255, 255, 0.8);
+            padding: 8px 15px;
+            border-radius: 4px;
+            font-family: Arial, sans-serif;
+            font-size: 14px;
             z-index: 1000;
         }
     </style>
@@ -47,7 +63,6 @@
 <body>
     <div class="background-container">
         <div class="arrow-container">
-            <!-- 简化的箭头SVG，确保可见 -->
             <svg width="600" height="200" viewBox="0 0 600 200" xmlns="http://www.w3.org/2000/svg">
             <!-- 左侧箭头 -->
             <path id="outlineArrowLeft" 
@@ -64,69 +79,211 @@
                   stroke-width="2"/>
             </svg>
         </div>
-        <button id="startButton">开始移动</button>
+        <div class="param-display" id="paramDisplay"></div>
+        <div class="control-panel">
+            <button id="startButton">开始移动</button>
+            <button id="saveButton">保存位置</button>
+            <button id="resetButton">重置默认</button>
+        </div>
     </div>
 
     <script>
-        // 简化的动画逻辑
-        // 获取DOM元素（确保只获取新箭头）
         const arrowLeft = document.getElementById('outlineArrowLeft');
         const arrowRight = document.getElementById('outlineArrowRight');
         const startButton = document.getElementById('startButton');
+        const saveButton = document.getElementById('saveButton');
+        const resetButton = document.getElementById('resetButton');
         let animationId = null;
         let isAnimating = false;
-    
+        let isDraggingLeft = false;
+        let isDraggingRight = false;
+        let initialX = 0;
+        let initialLeftPos = 0;
+        let initialRightPos = 0;
+
+        // 默认位置配置
+        const DEFAULT_POSITIONS = {
+            left: 'translate(-100px, 0)',
+            right: 'translate(350px, 0) scale(-1, 1)'
+        };
+
+        // 从localStorage加载保存的位置
+        function loadSavedPositions() {
+            try {
+                const savedLeft = localStorage.getItem('arrowLeftPosition');
+                const savedRight = localStorage.getItem('arrowRightPosition');
+                if (savedLeft && savedRight) {
+                    arrowLeft.style.transform = savedLeft;
+                    arrowRight.style.transform = savedRight;
+                    return true;
+                }
+            } catch (e) {
+                console.error('加载保存位置失败:', e);
+            }
+            // 加载失败或无保存数据时使用默认位置
+            arrowLeft.style.transform = DEFAULT_POSITIONS.left;
+            arrowRight.style.transform = DEFAULT_POSITIONS.right;
+            return false;
+        }
+
+        // 保存当前位置到localStorage
+        function saveCurrentPositions() {
+            try {
+                const leftTransform = arrowLeft.style.transform;
+                const rightTransform = arrowRight.style.transform;
+                localStorage.setItem('arrowLeftPosition', leftTransform);
+                localStorage.setItem('arrowRightPosition', rightTransform);
+                alert('位置已保存！下次打开将自动应用当前位置');
+                return true;
+            } catch (e) {
+                console.error('保存位置失败:', e);
+                alert('保存失败，请重试');
+                return false;
+            }
+        }
+
+        // 重置为默认位置
+        function resetToDefaultPositions() {
+            if (confirm('确定要重置为默认位置吗？')) {
+                localStorage.removeItem('arrowLeftPosition');
+                localStorage.removeItem('arrowRightPosition');
+                arrowLeft.style.transform = DEFAULT_POSITIONS.left;
+                arrowRight.style.transform = DEFAULT_POSITIONS.right;
+                updateParamDisplay();
+            }
+        }
+
         // 初始化箭头位置
-        arrowLeft.style.transform = 'translate(-100px, 0)';
-        // 调整右侧箭头初始位置，使其在SVG可见区域内
-        arrowRight.style.transform = 'translate(350px, 0) scale(-1, 1)';
-    
-        // 开始动画
+        function initArrowPositions() {
+            const hasSaved = loadSavedPositions();
+            updateParamDisplay();
+            // 显示加载状态
+            if (hasSaved) {
+                console.log('已加载保存的位置');
+            } else {
+                console.log('使用默认位置');
+            }
+        }
+
+        // 解析translateX值
+        function parseTranslateX(transform) {
+            const matrix = new DOMMatrix(transform);
+            return matrix.e;
+        }
+
+        // 更新参数显示
+        function updateParamDisplay() {
+            const leftTransform = arrowLeft.style.transform;
+            const rightTransform = arrowRight.style.transform;
+            document.getElementById('paramDisplay').textContent = 
+                `左侧箭头: ${leftTransform} | 右侧箭头: ${rightTransform}`;
+        }
+
+        // 动画控制函数
         function startAnimation() {
             if (isAnimating) return;
-    
+
             isAnimating = true;
             startButton.disabled = true;
             startButton.textContent = "移动中...";
-    
-            const duration = 2000; // 动画持续时间（毫秒）
+            saveButton.disabled = true;
+
+            const duration = 2000;
             const startTime = performance.now();
-            // 初始位置
-            const startLeft = -100;
-            // 右侧箭头初始位置调整为350px（原600px超出可见区域）
-            const startRight = 350;
-            // 目标位置
+            const startLeft = parseTranslateX(getComputedStyle(arrowLeft).transform);
+            const startRight = parseTranslateX(getComputedStyle(arrowRight).transform);
             const endLeft = 0;
-            // 右侧箭头目标位置调整为250px
             const endRight = 250;
-    
+
             function animate(currentTime) {
                 const elapsedTime = currentTime - startTime;
                 const progress = Math.min(elapsedTime / duration, 1);
-    
-                // 计算当前位置
                 const currentLeft = startLeft + (endLeft - startLeft) * progress;
                 const currentRight = startRight + (endRight - startRight) * progress;
-    
-                // 更新箭头位置
+
                 arrowLeft.style.transform = `translate(${currentLeft}px, 0)`;
                 arrowRight.style.transform = `translate(${currentRight}px, 0) scale(-1, 1)`;
-    
+                updateParamDisplay();
+
                 if (progress < 1) {
                     animationId = requestAnimationFrame(animate);
                 } else {
-                    // 动画完成
                     isAnimating = false;
                     startButton.disabled = false;
                     startButton.textContent = "重新开始";
+                    saveButton.disabled = false;
                 }
             }
-    
+
             animationId = requestAnimationFrame(animate);
         }
-    
-        // 绑定按钮点击事件
-        startButton.addEventListener('click', startAnimation);
+
+        // 绑定拖动事件
+        function bindDragEvents() {
+            // 左侧箭头拖动
+            arrowLeft.style.cursor = 'grab';
+            arrowLeft.addEventListener('mousedown', (e) => {
+                if (isAnimating) return;
+                isDraggingLeft = true;
+                initialX = e.clientX;
+                initialLeftPos = parseTranslateX(getComputedStyle(arrowLeft).transform);
+                arrowLeft.style.cursor = 'grabbing';
+                e.preventDefault();
+            });
+
+            // 右侧箭头拖动
+            arrowRight.style.cursor = 'grab';
+            arrowRight.addEventListener('mousedown', (e) => {
+                if (isAnimating) return;
+                isDraggingRight = true;
+                initialX = e.clientX;
+                initialRightPos = parseTranslateX(getComputedStyle(arrowRight).transform);
+                arrowRight.style.cursor = 'grabbing';
+                e.preventDefault();
+            });
+
+            // 鼠标移动
+            document.addEventListener('mousemove', (e) => {
+                if (isDraggingLeft) {
+                    const deltaX = e.clientX - initialX;
+                    const newPos = initialLeftPos + deltaX;
+                    arrowLeft.style.transform = `translate(${newPos}px, 0)`;
+                    updateParamDisplay();
+                } else if (isDraggingRight) {
+                    const deltaX = e.clientX - initialX;
+                    const newPos = initialRightPos + deltaX;
+                    arrowRight.style.transform = `translate(${newPos}px, 0) scale(-1, 1)`;
+                    updateParamDisplay();
+                }
+            });
+
+            // 鼠标释放
+            document.addEventListener('mouseup', () => {
+                if (isDraggingLeft || isDraggingRight) {
+                    isDraggingLeft = false;
+                    isDraggingRight = false;
+                    arrowLeft.style.cursor = 'grab';
+                    arrowRight.style.cursor = 'grab';
+                }
+            });
+        }
+
+        // 绑定按钮事件
+        function bindButtonEvents() {
+            startButton.addEventListener('click', startAnimation);
+            saveButton.addEventListener('click', saveCurrentPositions);
+            resetButton.addEventListener('click', resetToDefaultPositions);
+        }
+
+        // 初始化
+        function init() {
+            initArrowPositions();
+            bindDragEvents();
+            bindButtonEvents();
+        }
+
+        // 启动应用
+        init();
     </script>
 </body>
 </html>
\ No newline at end of file
