'commit'

2025-09-09 14:09:02 +08:00
parent 016dbbb63d
commit 8dc98fa6d3
1 changed files with 76 additions and 9 deletions
--- a/dsLightRag/XingJun/move.html
+++ b/dsLightRag/XingJun/move.html
@@ -87,6 +87,23 @@
            z-index: 2;
            cursor: move;
        }
+
+        /* 保存按钮样式 */
+        .save-btn {
+            width: 100%;
+            padding: 10px;
+            background-color: #4CAF50;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 16px;
+            margin-top: 20px;
+        }
+
+        .save-btn:hover {
+            background-color: #45a049;
+        }
    </style>
 </head>
 <body>
@@ -104,6 +121,9 @@
                <div class="image-btn" data-image="./4.png" style="background-image: url('./4.png');"></div>
                <div class="image-btn" data-image="./5.png" style="background-image: url('./5.png');"></div>
            </div>
+            
+            <!-- 新增保存按钮 -->
+            <button class="save-btn" id="savePositionsBtn">保存位置</button>
        </div>
    </div>

@@ -111,6 +131,12 @@
        // 获取DOM元素
        const backgroundContainer = document.querySelector('.background-container');
        const imageButtons = document.querySelectorAll('.image-btn');
+        const saveBtn = document.getElementById('savePositionsBtn');
+
+        // 页面加载时从localStorage读取并恢复箭头位置
+        document.addEventListener('DOMContentLoaded', () => {
+            loadArrowPositions();
+        });

        // 为每个图片按钮添加点击事件
        imageButtons.forEach(button => {
@@ -120,28 +146,69 @@
            });
        });

+        // 保存按钮点击事件
+        saveBtn.addEventListener('click', saveArrowPositions);
+
        // 添加图片到主区域
-        function addImageToContainer(imagePath) {
+        function addImageToContainer(imagePath, position = null) {
            // 创建新的图片元素
            const newImage = document.createElement('div');
            newImage.className = 'arrow-image';
            newImage.style.backgroundImage = `url('${imagePath}')`;

-            // 设置初始位置（随机位置）
-            const containerRect = backgroundContainer.getBoundingClientRect();
-            const x = Math.random() * (containerRect.width - 155);
-            const y = Math.random() * (containerRect.height - 173);
-
-            newImage.style.left = `${x}px`;
-            newImage.style.top = `${y}px`;
+            // 设置位置
+            if (position) {
+                // 从保存的数据加载位置
+                newImage.style.left = position.left;
+                newImage.style.top = position.top;
+            } else {
+                // 随机位置
+                const containerRect = backgroundContainer.getBoundingClientRect();
+                const x = Math.random() * (containerRect.width - 155);
+                const y = Math.random() * (containerRect.height - 173);
+                newImage.style.left = `${x}px`;
+                newImage.style.top = `${y}px`;
+            }

            // 添加到容器
            backgroundContainer.appendChild(newImage);

-            // 可选：添加拖拽功能
+            // 添加拖拽功能
            makeElementDraggable(newImage);
        }

+        // 保存所有箭头位置到localStorage
+        function saveArrowPositions() {
+            const arrows = document.querySelectorAll('.arrow-image');
+            const arrowData = Array.from(arrows).map(arrow => ({
+                imagePath: arrow.style.backgroundImage.match(/url\('?"?(.*?)'?"?\)/)[1],
+                left: arrow.style.left,
+                top: arrow.style.top
+            }));
+
+            localStorage.setItem('arrowPositions', JSON.stringify(arrowData));
+            alert('位置已保存！');
+        }
+
+        // 从localStorage加载箭头位置
+        function loadArrowPositions() {
+            const savedData = localStorage.getItem('arrowPositions');
+            if (savedData) {
+                try {
+                    const arrowData = JSON.parse(savedData);
+                    arrowData.forEach(data => {
+                        addImageToContainer(data.imagePath, {
+                            left: data.left,
+                            top: data.top
+                        });
+                    });
+                } catch (e) {
+                    console.error('加载保存的箭头位置失败:', e);
+                    localStorage.removeItem('arrowPositions'); // 移除损坏的数据
+                }
+            }
+        }
+
        // 使元素可拖拽
        function makeElementDraggable(element) {
            let isDragging = false;