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

---
 dsLightRag/XingJun/move.html | 542 +++++++++++------------------------
 1 file changed, 173 insertions(+), 369 deletions(-)

diff --git a/dsLightRag/XingJun/move.html b/dsLightRag/XingJun/move.html
index 5dc9a76f..1debbc72 100644
--- a/dsLightRag/XingJun/move.html
+++ b/dsLightRag/XingJun/move.html
@@ -5,143 +5,26 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>箭头动画</title>
     <style>
-        body {
-            margin: 0;
-            padding: 0;
-            height: 100vh;
-            display: flex;
-            background-color: #f0f0f0;
-            overflow: hidden;
-        }
-
-        .background-container {
-            position: relative;
-            flex: 1;
-            height: 100vh;
-            background-image: url('D:\\dsWork\\dsProject\\dsLightRag\\XingJun\\background.png');
-            background-position: center;
-            background-repeat: no-repeat;
-            background-size: contain;
-            z-index: 1;
-        }
-
-        /* 控制面板样式 */
-        .control-panel {
-            width: 200px;
-            background-color: #fff;
-            border-left: 1px solid #ccc;
-            padding: 20px;
-            height: 100vh;
-            box-sizing: border-box;
-            z-index: 2;
-            overflow-y: auto;
-        }
-
-        .control-section {
-            margin-bottom: 30px;
-        }
-
-        .control-section h3 {
-            margin-top: 0;
-            padding-bottom: 10px;
-            border-bottom: 1px solid #eee;
-        }
-
-        /* 图片选择按钮样式 */
-        .image-selector {
-            display: grid;
-            grid-template-columns: repeat(2, 1fr);
-            gap: 10px;
-            margin-top: 15px;
-        }
-
-        .image-btn {
-            width: 70px;
-            height: 70px;
-            border: 2px solid #ddd;
-            border-radius: 4px;
-            cursor: pointer;
-            overflow: hidden;
-            transition: all 0.2s;
-            background-size: contain;
-            background-repeat: no-repeat;
-            background-position: center;
-        }
-
-        .image-btn:hover {
-            border-color: #4CAF50;
-            transform: scale(1.05);
-        }
-
-        .image-btn:active {
-            transform: scale(0.98);
-        }
-
-        /* 箭头图片样式 */
-        .arrow-image {
-            position: absolute;
-            width: 155px;
-            height: 173px;
-            background-size: contain;
-            background-repeat: no-repeat;
-            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;
-        }
-
-        /* 文字说明样式 */
-        .text-label {
-            position: absolute;
-            padding: 5px 10px;
-            background-color: rgba(255, 255, 255, 0.8);
-            border: 1px solid #ccc;
-            border-radius: 4px;
-            font-size: 14px;
-            cursor: move;
-            z-index: 3;
-            max-width: 200px;
-            word-wrap: break-word;
-        }
-
-        /* 新增按钮样式 */
-        .text-btn {
-            width: 100%;
-            padding: 10px;
-            background-color: #2196F3;
-            color: white;
-            border: none;
-            border-radius: 4px;
-            cursor: pointer;
-            font-size: 16px;
-            margin-top: 10px;
-        }
-
-        .text-btn:hover {
-            background-color: #0b7dda;
-        }
+        body { margin: 0; padding: 0; height: 100vh; display: flex; overflow: hidden; }
+        .background-container { position: relative; flex: 1; height: 100vh; background-image: url('D:\\dsWork\\dsProject\\dsLightRag\\XingJun\\background.png'); background-position: center; background-repeat: no-repeat; background-size: contain; z-index: 1; }
+        .control-panel { width: 200px; background-color: #fff; border-left: 1px solid #ccc; padding: 20px; height: 100vh; box-sizing: border-box; z-index: 2; overflow-y: auto; }
+        .control-section { margin-bottom: 30px; }
+        .control-section h3 { margin-top: 0; padding-bottom: 10px; border-bottom: 1px solid #eee; }
+        .image-selector { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 15px; }
+        .image-btn { width: 70px; height: 70px; border: 2px solid #ddd; border-radius: 4px; cursor: pointer; background-size: contain; background-repeat: no-repeat; background-position: center; transition: all 0.2s; }
+        .image-btn:hover { border-color: #4CAF50; transform: scale(1.05); }
+        .image-btn:active { transform: scale(0.98); }
+        .arrow-container { position: absolute; pointer-events: auto; }
+        .arrow-image { width: 155px; height: 173px; background-size: contain; background-repeat: no-repeat; 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; }
+        .arrow-text { position: absolute; top: '100%'; left: '50%'; transform: translateX(-50%); margin-top: '-5px'; font-weight: bold; color: red; font-size: 16px; white-space: nowrap; text-align: center; width: 100%; background-color: rgba(255, 255, 255, 0.8); padding: 3px 8px; border-radius: 4px; }
+        #contextMenu { position: absolute; display: none; background: white; border: 1px solid #ccc; padding: 5px; z-index: 9999; }
+        #deleteArrow { padding: 3px 10px; cursor: pointer; }
     </style>
 </head>
 <body>
-    <div class="background-container">
-    </div>
-
-    <!-- 右侧控制面板 -->
+    <div class="background-container"></div>
     <div class="control-panel">
         <div class="control-section">
             <h3>增加箭头</h3>
@@ -153,256 +36,177 @@
                 <div class="image-btn" data-image="./5.png" style="background-image: url('./5.png');"></div>
                 <div class="image-btn" data-image="./6.png" style="background-image: url('./6.png');"></div>
             </div>
-            
-            <!-- 移除文字按钮 -->
             <button class="save-btn" id="savePositionsBtn">保存位置</button>
         </div>
     </div>
+    <div id="contextMenu"><div id="deleteArrow">删除箭头</div></div>
 
     <script>
-        // 获取DOM元素
-        const backgroundContainer = document.querySelector('.background-container');
-        const imageButtons = document.querySelectorAll('.image-btn');
-        const saveBtn = document.getElementById('savePositionsBtn');
-        const addTextBtn = document.getElementById('addTextBtn'); // 新增文字按钮
+        // 修复核心：整理所有JS代码到单个script标签内
+        document.addEventListener('DOMContentLoaded', function() {
+            const backgroundContainer = document.querySelector('.background-container');
+            const imageButtons = document.querySelectorAll('.image-btn');
+            const saveBtn = document.getElementById('savePositionsBtn');
+            const contextMenu = document.getElementById('contextMenu');
+            const deleteArrow = document.getElementById('deleteArrow');
+            let selectedArrow = null;
 
-        // 页面加载时从localStorage读取并恢复箭头位置
-        document.addEventListener('DOMContentLoaded', () => {
-            loadAllElements(); // 重命名函数，支持多种元素
-        });
+            // 加载保存的元素
+            loadAllElements();
 
-        // 为每个图片按钮添加点击事件
-        imageButtons.forEach(button => {
-            button.addEventListener('click', () => {
-                const imagePath = button.getAttribute('data-image');
-                addImageToContainer(imagePath);
-            });
-        });
-
-        // 新增：文字按钮点击事件
-        addTextBtn.addEventListener('click', () => {
-            const textContent = prompt('请输入文字说明内容:');
-            if (textContent && textContent.trim() !== '') {
-                addTextToContainer(textContent);
-            }
-        });
-
-        // 保存按钮点击事件
-        saveBtn.addEventListener('click', saveAllElements);
-
-        // 添加图片到主区域
-        function addImageToContainer(imagePath, position = null, textContent = '') {
-            // 创建新的图片元素容器
-            const container = document.createElement('div');
-            container.className = 'arrow-container';
-            container.style.position = 'absolute';
-            container.dataset.imagePath = imagePath;
-
-            // 创建箭头图片元素
-            const newImage = document.createElement('div');
-            newImage.className = 'arrow-image';
-            newImage.style.backgroundImage = `url('${imagePath}')`;
-
-            // 创建文字元素
-            const textElement = document.createElement('div');
-            textElement.className = 'arrow-text';
-            textElement.style.position = 'absolute';
-            textElement.style.top = '100%';
-            textElement.style.left = '50%';
-            textElement.style.transform = 'translateX(-50%)';
-            textElement.style.marginTop = '-5px';
-            textElement.style.fontWeight = 'bold'; // 文字加粗
-            textElement.style.color = 'red'; // 文字颜色设为红色
-            textElement.style.fontSize = '16px'; // 增大字号
-            textElement.style.whiteSpace = 'nowrap';
-            textElement.style.textAlign = 'center';
-            textElement.style.width = '100%'; // 确保文字宽度与箭头一致
-            textElement.style.marginBottom = '-85px'; // 箭头与文字间距
-            textElement.style.textAlign = 'center';
-            textElement.style.marginTop = '-5px'; // 减少箭头与文字间距
-            textElement.style.left = '50%';
-            textElement.style.transform = 'translateX(-50%)'; // 水平居中对齐
-            // 使用负边距向上拉近距离
-            textElement.style.marginBottom = '-30px';
-            textElement.style.whiteSpace = 'nowrap';
-            textElement.style.padding = '3px 8px';
-            textElement.style.backgroundColor = 'rgba(255, 255, 255, 0.8)';
-            textElement.style.borderRadius = '4px';
-            // 确保文字在箭头上方
-            textElement.style.zIndex = '1';
-            // 如果有文字内容则显示
-            if (textContent) {
-                textElement.textContent = textContent;
-                container.dataset.text = textContent;
-            } else {
-                textElement.style.display = 'none';
-            }
-
-            // 将元素组合
-            container.appendChild(newImage);
-            container.appendChild(textElement);
-
-            // 设置位置
-            if (position) {
-                container.style.left = position.left;
-                container.style.top = position.top;
-            } else {
-                // 随机位置
-                const containerRect = backgroundContainer.getBoundingClientRect();
-                const x = Math.random() * (containerRect.width - 155);
-                const y = Math.random() * (containerRect.height - 173);
-                container.style.left = `${x}px`;
-                container.style.top = `${y}px`;
-            }
-
-            // 添加到容器
-            backgroundContainer.appendChild(container);
-
-            // 添加双击事件 - 用于添加/修改文字
-            container.addEventListener('dblclick', (e) => {
-                // 防止冒泡影响拖拽
-                e.stopPropagation();
-                const currentText = container.dataset.text || '';
-                const textContent = prompt('请输入文字:', currentText);
-                if (textContent !== null) {
-                    if (textContent.trim() === '') {
-                        textElement.style.display = 'none';
-                        delete container.dataset.text;
-                    } else {
-                        textElement.textContent = textContent;
-                        textElement.style.display = 'block';
-                        container.dataset.text = textContent;
-                    }
-                }
-            });
-
-            // 添加拖拽功能
-            makeElementDraggable(container);
-        }
-
-        // 保存所有元素到localStorage
-        function saveAllElements() {
-            const elements = [];
-
-            // 收集箭头容器元素
-            document.querySelectorAll('.arrow-container').forEach(container => {
-                elements.push({
-                    type: 'arrow',
-                    imagePath: container.dataset.imagePath,
-                    text: container.dataset.text || '',
-                    left: container.style.left,
-                    top: container.style.top
+            // 绑定箭头按钮事件
+            imageButtons.forEach(button => {
+                button.addEventListener('click', () => {
+                    const imagePath = button.getAttribute('data-image');
+                    addImageToContainer(imagePath);
                 });
             });
 
-            localStorage.setItem('mapElements', JSON.stringify(elements));
-            alert('所有元素位置已保存！');
-        }
+            // 保存按钮事件
+            saveBtn.addEventListener('click', saveAllElements);
 
-        // 加载所有元素
-        function loadAllElements() {
-            const savedData = localStorage.getItem('mapElements');
-            if (savedData) {
-                try {
-                    const elements = JSON.parse(savedData);
-                    elements.forEach(element => {
-                        if (element.type === 'arrow') {
-                            addImageToContainer(
-                                element.imagePath,
-                                { left: element.left, top: element.top },
-                                element.text
-                            );
+            // 右键菜单事件
+            deleteArrow.addEventListener('click', function() {
+                if (selectedArrow) {
+                    selectedArrow.remove();
+                    saveAllElements();
+                    contextMenu.style.display = 'none';
+                    selectedArrow = null;
+                }
+            });
+
+            // 点击空白处关闭菜单
+            document.addEventListener('click', function() {
+                contextMenu.style.display = 'none';
+                selectedArrow = null;
+            });
+
+            // 添加箭头函数
+            function addImageToContainer(imagePath, position = null, textContent = '') {
+                const container = document.createElement('div');
+                container.className = 'arrow-container';
+                container.dataset.imagePath = imagePath;
+
+                const newImage = document.createElement('div');
+                newImage.className = 'arrow-image';
+                newImage.style.backgroundImage = `url('${imagePath}')`;
+
+                container.appendChild(newImage);
+
+                // 添加文字元素
+                if (textContent) {
+                    const textElement = document.createElement('div');
+                    textElement.className = 'arrow-text';
+                    textElement.textContent = textContent;
+                    container.dataset.text = textContent;
+                    container.appendChild(textElement);
+                }
+
+                // 设置位置
+                if (position) {
+                    container.style.left = position.left;
+                    container.style.top = position.top;
+                } else {
+                    const x = Math.random() * (backgroundContainer.offsetWidth - 155);
+                    const y = Math.random() * (backgroundContainer.offsetHeight - 173);
+                    container.style.left = `${x}px`;
+                    container.style.top = `${y}px`;
+                }
+
+                // 双击编辑文字
+                container.addEventListener('dblclick', (e) => {
+                    e.stopPropagation();
+                    const currentText = container.dataset.text || '';
+                    const textContent = prompt('请输入文字:', currentText);
+                    if (textContent !== null) {
+                        if (textContent.trim() === '') {
+                            container.querySelector('.arrow-text')?.remove();
+                            delete container.dataset.text;
+                        } else {
+                            let textElement = container.querySelector('.arrow-text');
+                            if (!textElement) {
+                                textElement = document.createElement('div');
+                                textElement.className = 'arrow-text';
+                                container.appendChild(textElement);
+                            }
+                            textElement.textContent = textContent;
+                            container.dataset.text = textContent;
                         }
+                    }
+                });
+
+                // 右键菜单支持
+                container.addEventListener('contextmenu', function(e) {
+                    e.preventDefault();
+                    selectedArrow = this;
+                    contextMenu.style.left = `${e.clientX}px`;
+                    contextMenu.style.top = `${e.clientY}px`;
+                    contextMenu.style.display = 'block';
+                });
+
+                // 拖拽功能
+                makeElementDraggable(container);
+                backgroundContainer.appendChild(container);
+                return container;
+            }
+
+            // 拖拽实现
+            function makeElementDraggable(element) {
+                let isDragging = false, offsetX, offsetY;
+                element.addEventListener('mousedown', (e) => {
+                    if (e.button === 2) return; // 忽略右键
+                    isDragging = true;
+                    const rect = element.getBoundingClientRect();
+                    offsetX = e.clientX - rect.left;
+                    offsetY = e.clientY - rect.top;
+                    element.style.zIndex = '10';
+                });
+
+                document.addEventListener('mousemove', (e) => {
+                    if (!isDragging) return;
+                    const x = e.clientX - offsetX;
+                    const y = e.clientY - offsetY;
+                    element.style.left = `${x}px`;
+                    element.style.top = `${y}px`;
+                });
+
+                document.addEventListener('mouseup', () => {
+                    if (isDragging) {
+                        isDragging = false;
+                        element.style.zIndex = '2';
+                    }
+                });
+            }
+
+            // 保存/加载功能
+            function saveAllElements() {
+                const elements = [];
+                document.querySelectorAll('.arrow-container').forEach(container => {
+                    elements.push({
+                        type: 'arrow',
+                        imagePath: container.dataset.imagePath,
+                        text: container.dataset.text || '',
+                        left: container.style.left,
+                        top: container.style.top
                     });
-                } catch (e) {
-                    console.error('加载元素失败:', e);
-                    localStorage.removeItem('mapElements');
+                });
+                localStorage.setItem('mapElements', JSON.stringify(elements));
+                alert('保存成功！');
+            }
+
+            function loadAllElements() {
+                const savedData = localStorage.getItem('mapElements');
+                if (savedData) {
+                    try {
+                        JSON.parse(savedData).forEach(element => {
+                            if (element.type === 'arrow') {
+                                addImageToContainer(element.imagePath, {left: element.left, top: element.top}, element.text);
+                            }
+                        });
+                    } catch (e) { console.error('加载失败:', e); }
                 }
             }
-        }
-
-        // 新增：添加文字到主区域
-        function addTextToContainer(text, position = null) {
-            // 创建文字元素
-            const textElement = document.createElement('div');
-            textElement.className = 'text-label';
-            textElement.textContent = text;
-            textElement.dataset.type = 'text'; // 标记元素类型
-
-            // 设置位置
-            if (position) {
-                textElement.style.left = position.left;
-                textElement.style.top = position.top;
-            } else {
-                // 默认位置：中央偏上
-                textElement.style.left = '50%';
-                textElement.style.top = '30%';
-                textElement.style.transform = 'translate(-50%, -50%)';
-            }
-
-            // 添加到容器
-            backgroundContainer.appendChild(textElement);
-
-            // 添加拖拽功能
-            makeElementDraggable(textElement);
-        }
-
-        // 使元素可拖拽
-        function makeElementDraggable(element) {
-            let isDragging = false;
-            let offsetX, offsetY;
-
-            element.addEventListener('mousedown', startDrag);
-
-            function startDrag(e) {
-                // 忽略右键点击
-                if (e.button === 2) return;
-
-                isDragging = true;
-                const rect = element.getBoundingClientRect();
-                const containerRect = backgroundContainer.getBoundingClientRect();
-                
-                // 计算相对于容器的偏移量
-                offsetX = e.clientX - rect.left;
-                offsetY = e.clientY - rect.top;
-                
-                element.style.zIndex = '10';
-                
-                // 添加document事件监听
-                document.addEventListener('mousemove', drag);
-                document.addEventListener('mouseup', endDrag);
-                document.addEventListener('mouseleave', endDrag);
-            }
-
-            function drag(e) {
-                if (!isDragging) return;
-                e.preventDefault();
-                
-                // 计算相对于容器的位置
-                const containerRect = backgroundContainer.getBoundingClientRect();
-                const x = e.clientX - containerRect.left - offsetX;
-                const y = e.clientY - containerRect.top - offsetY;
-                
-                // 限制在容器内
-                const maxX = containerRect.width - element.offsetWidth;
-                const maxY = containerRect.height - element.offsetHeight;
-                const boundedX = Math.max(0, Math.min(x, maxX));
-                const boundedY = Math.max(0, Math.min(y, maxY));
-                
-                element.style.left = `${boundedX}px`;
-                element.style.top = `${boundedY}px`;
-            }
-
-            function endDrag() {
-                isDragging = false;
-                element.style.zIndex = '2';
-                
-                // 移除document事件监听
-                document.removeEventListener('mousemove', drag);
-                document.removeEventListener('mouseup', endDrag);
-                document.removeEventListener('mouseleave', endDrag);
-            }
-        }
+        });
     </script>
 </body>
 </html>