'commit'

dsLightRag/XingJun/move.html

@@ -5,143 +5,26 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>箭头动画</title>
     <style>
-        body {
+        body { margin: 0; padding: 0; height: 100vh; display: flex; overflow: hidden; }
-            margin: 0;
+        .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; }
-            padding: 0;
+        .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; }
-            height: 100vh;
+        .control-section { margin-bottom: 30px; }
-            display: flex;
+        .control-section h3 { margin-top: 0; padding-bottom: 10px; border-bottom: 1px solid #eee; }
-            background-color: #f0f0f0;
+        .image-selector { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 15px; }
-            overflow: hidden;
+        .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); }
-        .background-container {
+        .arrow-container { position: absolute; pointer-events: auto; }
-            position: relative;
+        .arrow-image { width: 155px; height: 173px; background-size: contain; background-repeat: no-repeat; cursor: move; }
-            flex: 1;
+        .save-btn { width: 100%; padding: 10px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; margin-top: 20px; }
-            height: 100vh;
+        .save-btn:hover { background-color: #45a049; }
-            background-image: url('D:\\dsWork\\dsProject\\dsLightRag\\XingJun\\background.png');
+        .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; }
-            background-position: center;
+        #contextMenu { position: absolute; display: none; background: white; border: 1px solid #ccc; padding: 5px; z-index: 9999; }
-            background-repeat: no-repeat;
+        #deleteArrow { padding: 3px 10px; cursor: pointer; }
-            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;
-        }
     </style>
 </head>
 <body>
-    <div class="background-container">
+    <div class="background-container"></div>
-    </div>
-
-    <!-- 右侧控制面板 -->
     <div class="control-panel">
         <div class="control-section">
             <h3>增加箭头</h3>
@@ -153,25 +36,25 @@
                 <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元素
+        // 修复核心：整理所有JS代码到单个script标签内
+        document.addEventListener('DOMContentLoaded', function() {
             const backgroundContainer = document.querySelector('.background-container');
             const imageButtons = document.querySelectorAll('.image-btn');
             const saveBtn = document.getElementById('savePositionsBtn');
-        const addTextBtn = document.getElementById('addTextBtn'); // 新增文字按钮
+            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');
@@ -179,112 +62,125 @@
                 });
             });
 
-        // 新增：文字按钮点击事件
+            // 保存按钮事件
-        addTextBtn.addEventListener('click', () => {
+            saveBtn.addEventListener('click', saveAllElements);
-            const textContent = prompt('请输入文字说明内容:');
+
-            if (textContent && textContent.trim() !== '') {
+            // 右键菜单事件
-                addTextToContainer(textContent);
+            deleteArrow.addEventListener('click', function() {
+                if (selectedArrow) {
+                    selectedArrow.remove();
+                    saveAllElements();
+                    contextMenu.style.display = 'none';
+                    selectedArrow = null;
                 }
             });
 
-        // 保存按钮点击事件
+            // 点击空白处关闭菜单
-        saveBtn.addEventListener('click', saveAllElements);
+            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.style.position = 'absolute';
                 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.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 x = Math.random() * (backgroundContainer.offsetWidth - 155);
-                const containerRect = backgroundContainer.getBoundingClientRect();
+                    const y = Math.random() * (backgroundContainer.offsetHeight - 173);
-                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';
+                            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;
-                        textElement.style.display = 'block';
                             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;
             }
 
-        // 保存所有元素到localStorage
+            // 拖拽实现
+            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',
@@ -294,115 +190,23 @@
                         top: container.style.top
                     });
                 });
-
                 localStorage.setItem('mapElements', JSON.stringify(elements));
-            alert('所有元素位置已保存！');
+                alert('保存成功！');
             }
 
-        // 加载所有元素
             function loadAllElements() {
                 const savedData = localStorage.getItem('mapElements');
                 if (savedData) {
                     try {
-                    const elements = JSON.parse(savedData);
+                        JSON.parse(savedData).forEach(element => {
-                    elements.forEach(element => {
                             if (element.type === 'arrow') {
-                            addImageToContainer(
+                                addImageToContainer(element.imagePath, {left: element.left, top: element.top}, element.text);
-                                element.imagePath,
-                                { left: element.left, top: element.top },
-                                element.text
-                            );
                             }
                         });
-                } catch (e) {
+                    } catch (e) { console.error('加载失败:', e); }
-                    console.error('加载元素失败:', e);
-                    localStorage.removeItem('mapElements');
-                }
-            }
-        }
-
-        // 新增：添加文字到主区域
-        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>