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

---
 dsLightRag/XingJun/move.html | 357 +++++++++++++++++------------------
 1 file changed, 178 insertions(+), 179 deletions(-)
diff --git a/dsLightRag/XingJun/move.html b/dsLightRag/XingJun/move.html
index b0d1c3ff..5ba18e07 100644
--- a/dsLightRag/XingJun/move.html
+++ b/dsLightRag/XingJun/move.html
@@ -1,37 +1,52 @@
 <!DOCTYPE html>
-<html lang="zh-CN">
+<html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>箭头移动动画</title>
+    <title>箭头动画</title>
     <style>
         body {
             margin: 0;
             padding: 0;
             height: 100vh;
             display: flex;
-            justify-content: center;
+            flex-direction: column;
             align-items: center;
+            justify-content: center;
             background-color: #f0f0f0;
         }
+
         .background-container {
             position: relative;
             width: 100%;
             height: 100vh;
-            background-image: url('background.png');
+            background-image: url('D:\\dsWork\\dsProject\\dsLightRag\\XingJun\\background.png');
             background-position: center;
             background-repeat: no-repeat;
             background-size: contain;
+            z-index: 1;
         }
+
         .arrow-container {
             position: absolute;
+            width: 600px;
+            height: 200px;
             top: 50%;
             left: 50%;
             transform: translate(-50%, -50%);
-            width: 600px;
-            height: 200px;
             z-index: 999;
+            border: 2px solid transparent;
         }
+
+        .arrow {
+            cursor: grab;
+            transition: transform 0s;
+        }
+
+        .arrow:active {
+            cursor: grabbing;
+        }
+
         .control-panel {
             position: absolute;
             bottom: 20px;
@@ -41,21 +56,34 @@
             gap: 10px;
             z-index: 1000;
         }
+
         button {
             padding: 10px 20px;
             font-size: 16px;
             cursor: pointer;
+            background-color: #4CAF50;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            transition: background-color 0.3s;
         }
-        .param-display {
+
+        button:hover:not(:disabled) {
+            background-color: #45a049;
+        }
+
+        button:disabled {
+            background-color: #cccccc;
+            cursor: not-allowed;
+        }
+
+        .position-controls {
             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;
+            display: flex;
+            gap: 10px;
             z-index: 1000;
         }
     </style>
@@ -63,227 +91,198 @@
 <body>
     <div class="background-container">
         <div class="arrow-container">
-            <svg width="600" height="200" viewBox="0 0 600 200" xmlns="http://www.w3.org/2000/svg">
-            <!-- 左侧箭头 -->
-            <path id="outlineArrowLeft" 
-                  d="M 0 8.1 L 174 18 L 164 0 L 240 30 L 164 60 L 174 42 L 0 51.9 L 0 30 Z" 
-                  fill="red" 
-                  stroke="black" 
-                  stroke-width="2"/>
-            
-            <!-- 右侧箭头 -->
-            <path id="outlineArrowRight" 
-                  d="M 0 8.1 L 174 18 L 164 0 L 240 30 L 164 60 L 174 42 L 0 51.9 L 0 30 Z" 
-                  fill="red" 
-                  stroke="black" 
-                  stroke-width="2"/>
+            <!-- 左侧箭头 - 使用fill.html中的原始路径数据 -->
+            <svg id="outlineArrowLeft" class="arrow" width="240" height="61" viewBox="0 0 240 61" style="transform: translate(-100px, 70px);">
+                <path d="M 0 8.1 L 174 18 L 164 0 L 240 30 L 164 60 L 174 42 L 0 51.9 L 0 30 Z" fill="red" stroke="black" stroke-width="2"></path>
+            </svg>
+            <!-- 右侧箭头 - 使用fill.html中的原始路径数据并水平翻转 -->
+            <svg id="outlineArrowRight" class="arrow" width="240" height="61" viewBox="0 0 240 61" style="transform: translate(350px, 70px) scale(-1, 1);">
+                <path d="M 0 8.1 L 174 18 L 164 0 L 240 30 L 164 60 L 174 42 L 0 51.9 L 0 30 Z" fill="red" stroke="black" stroke-width="2"></path>
             </svg>
         </div>
-        <div class="param-display" id="paramDisplay"></div>
         <div class="control-panel">
-            <button id="startButton">开始移动</button>
-            <button id="saveButton">保存位置</button>
-            <button id="resetButton">重置默认</button>
+            <button id="startBtn">开始移动</button>
+        </div>
+        <div class="position-controls">
+            <button id="saveBtn">保存位置</button>
+            <button id="resetBtn">重置默认</button>
         </div>
     </div>
 
     <script>
-        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;
+        const leftArrow = document.getElementById('outlineArrowLeft');
+        const rightArrow = document.getElementById('outlineArrowRight');
+        const startBtn = document.getElementById('startBtn');
+        const saveBtn = document.getElementById('saveBtn');
+        const resetBtn = document.getElementById('resetBtn');
         let isAnimating = false;
-        let isDraggingLeft = false;
-        let isDraggingRight = false;
+        let draggedElement = null;
         let initialX = 0;
-        let initialLeftPos = 0;
-        let initialRightPos = 0;
-
-        // 默认位置配置
-        const DEFAULT_POSITIONS = {
-            left: 'translate(-100px, 0)',
-            right: 'translate(350px, 0) scale(-1, 1)'
-        };
+        let initialY = 0;
+        let currentX = 0;
+        let currentY = 0;
+        let translateX = 0;
+        let translateY = 0;
 
         // 从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;
+
+                if (savedLeft) {
+                    const { x, y } = JSON.parse(savedLeft);
+                    leftArrow.style.transform = `translate(${x}px, ${y}px)`;
+                }
+
+                if (savedRight) {
+                    const { x, y } = JSON.parse(savedRight);
+                    rightArrow.style.transform = `translate(${x}px, ${y}px) scale(-1, 1)`;
                 }
             } catch (e) {
-                console.error('加载保存位置失败:', e);
+                console.error('加载保存的位置失败:', e);
+                alert('加载保存的位置失败，请重试');
             }
-            // 加载失败或无保存数据时使用默认位置
-            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;
+                const leftTransform = getTransformValues(leftArrow);
+                const rightTransform = getTransformValues(rightArrow);
+
+                localStorage.setItem('arrowLeftPosition', JSON.stringify({
+                    x: leftTransform.x,
+                    y: leftTransform.y
+                }));
+                localStorage.setItem('arrowRightPosition', JSON.stringify({
+                    x: rightTransform.x,
+                    y: rightTransform.y
+                }));
+                alert('位置已保存');
             } catch (e) {
                 console.error('保存位置失败:', e);
-                alert('保存失败，请重试');
-                return false;
+                alert('保存位置失败，请重试');
             }
         }
 
-        // 重置为默认位置
+        // 重置到默认位置
         function resetToDefaultPositions() {
-            if (confirm('确定要重置为默认位置吗？')) {
-                localStorage.removeItem('arrowLeftPosition');
-                localStorage.removeItem('arrowRightPosition');
-                arrowLeft.style.transform = DEFAULT_POSITIONS.left;
-                arrowRight.style.transform = DEFAULT_POSITIONS.right;
-                updateParamDisplay();
-            }
+            localStorage.removeItem('arrowLeftPosition');
+            localStorage.removeItem('arrowRightPosition');
+            leftArrow.style.transform = 'translate(-100px, 70px)';
+            rightArrow.style.transform = 'translate(350px, 70px) scale(-1, 1)';
+            alert('已重置为默认位置');
         }
 
-        // 初始化箭头位置
-        function initArrowPositions() {
-            const hasSaved = loadSavedPositions();
-            updateParamDisplay();
-            // 显示加载状态
-            if (hasSaved) {
-                console.log('已加载保存的位置');
-            } else {
-                console.log('使用默认位置');
-            }
-        }
+        // 获取元素的transform translate值
+        function getTransformValues(element) {
+            const transform = window.getComputedStyle(element).getPropertyValue('transform');
+            if (transform === 'none') return { x: 0, y: 0 };
 
-        // 解析translateX值
-        function parseTranslateX(transform) {
             const matrix = new DOMMatrix(transform);
-            return matrix.e;
+            return { x: matrix.e, y: matrix.f };
         }
 
-        // 更新参数显示
-        function updateParamDisplay() {
-            const leftTransform = arrowLeft.style.transform;
-            const rightTransform = arrowRight.style.transform;
-            document.getElementById('paramDisplay').textContent = 
-                `左侧箭头: ${leftTransform} | 右侧箭头: ${rightTransform}`;
+        // 开始拖动
+        function startDrag(e) {
+            if (isAnimating) return;
+
+            draggedElement = e.target.closest('.arrow');
+            if (!draggedElement) return;
+
+            const transform = getTransformValues(draggedElement);
+            translateX = transform.x;
+            translateY = transform.y;
+
+            initialX = e.clientX - translateX;
+            initialY = e.clientY - translateY;
+
+            draggedElement.style.zIndex = '1001';
+            draggedElement.style.transition = 'transform 0s';
+
+            document.addEventListener('mousemove', drag);
+            document.addEventListener('mouseup', stopDrag);
         }
 
-        // 动画控制函数
-        function startAnimation() {
+        // 拖动中
+        function drag(e) {
+            if (!draggedElement) return;
+
+            e.preventDefault();
+
+            currentX = e.clientX - initialX;
+            currentY = e.clientY - initialY;
+
+            // 保持右侧箭头的翻转效果
+            if (draggedElement.id === 'outlineArrowRight') {
+                draggedElement.style.transform = `translate(${currentX}px, ${currentY}px) scale(-1, 1)`;
+            } else {
+                draggedElement.style.transform = `translate(${currentX}px, ${currentY}px)`;
+            }
+        }
+
+        // 停止拖动
+        function stopDrag() {
+            if (draggedElement) {
+                draggedElement.style.zIndex = '';
+                draggedElement = null;
+            }
+
+            document.removeEventListener('mousemove', drag);
+            document.removeEventListener('mouseup', stopDrag);
+        }
+
+        // 箭头动画
+        function animateArrows() {
             if (isAnimating) return;
 
             isAnimating = true;
-            startButton.disabled = true;
-            startButton.textContent = "移动中...";
-            saveButton.disabled = true;
+            startBtn.disabled = true;
+            startBtn.textContent = '移动中...';
+            saveBtn.disabled = true;
 
-            const duration = 2000;
+            const leftStart = getTransformValues(leftArrow);
+            const rightStart = getTransformValues(rightArrow);
+            const duration = 2000; // 2秒
             const startTime = performance.now();
-            const startLeft = parseTranslateX(getComputedStyle(arrowLeft).transform);
-            const startRight = parseTranslateX(getComputedStyle(arrowRight).transform);
-            const endLeft = 0;
-            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;
+            function updateAnimation(currentTime) {
+                const elapsed = currentTime - startTime;
+                const progress = Math.min(elapsed / duration, 1);
 
-                arrowLeft.style.transform = `translate(${currentLeft}px, 0)`;
-                arrowRight.style.transform = `translate(${currentRight}px, 0) scale(-1, 1)`;
-                updateParamDisplay();
+                // 左侧箭头从当前位置移动到(0, 70)
+                const leftX = leftStart.x + (0 - leftStart.x) * progress;
+                const leftY = leftStart.y + (70 - leftStart.y) * progress;
+                leftArrow.style.transform = `translate(${leftX}px, ${leftY}px)`;
+
+                // 右侧箭头从当前位置移动到(250, 70)，保持翻转
+                const rightX = rightStart.x + (250 - rightStart.x) * progress;
+                const rightY = rightStart.y + (70 - rightStart.y) * progress;
+                rightArrow.style.transform = `translate(${rightX}px, ${rightY}px) scale(-1, 1)`;
 
                 if (progress < 1) {
-                    animationId = requestAnimationFrame(animate);
+                    requestAnimationFrame(updateAnimation);
                 } else {
                     isAnimating = false;
-                    startButton.disabled = false;
-                    startButton.textContent = "重新开始";
-                    saveButton.disabled = false;
+                    startBtn.disabled = false;
+                    startBtn.textContent = '重新开始';
+                    saveBtn.disabled = false;
                 }
             }
 
-            animationId = requestAnimationFrame(animate);
+            requestAnimationFrame(updateAnimation);
         }
 
-        // 绑定拖动事件
-        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();
-            });
+        // 事件监听
+        leftArrow.addEventListener('mousedown', startDrag);
+        rightArrow.addEventListener('mousedown', startDrag);
+        startBtn.addEventListener('click', animateArrows);
+        saveBtn.addEventListener('click', saveCurrentPositions);
+        resetBtn.addEventListener('click', resetToDefaultPositions);
 
-            // 右侧箭头拖动
-            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();
+        // 页面加载时加载保存的位置
+        window.addEventListener('load', loadSavedPositions);
     </script>
 </body>
 </html>
\ No newline at end of file
