'commit'

dsLightRag/XingJun/move.html

@@ -151,11 +151,10 @@
                 <div class="image-btn" data-image="./3.png" style="background-image: url('./3.png');"></div>
                 <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 class="image-btn" data-image="./6.png" style="background-image: url('./6.png');"></div>
             </div>
             
-            <!-- 新增保存按钮 -->
+            <!-- 移除文字按钮 -->
-            <!-- 新增文字说明按钮 -->
-            <button class="text-btn" id="addTextBtn">添加文字说明</button>
             <button class="save-btn" id="savePositionsBtn">保存位置</button>
         </div>
     </div>
@@ -192,55 +191,107 @@
         saveBtn.addEventListener('click', saveAllElements);
 
         // 添加图片到主区域
-        function addImageToContainer(imagePath, position = 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}')`;
 
+            // 创建文字元素
+            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;
-                newImage.style.left = position.left;
+                container.style.top = position.top;
-                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`;
+                container.style.left = `${x}px`;
-                newImage.style.top = `${y}px`;
+                container.style.top = `${y}px`;
             }
 
             // 添加到容器
-            backgroundContainer.appendChild(newImage);
+            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(newImage);
+            makeElementDraggable(container);
         }
 
-        // 保存所有箭头位置到localStorage
+        // 保存所有元素到localStorage
-        // 修改：保存所有元素（箭头和文字）
         function saveAllElements() {
             const elements = [];
 
-            // 收集箭头元素
+            // 收集箭头容器元素
-            document.querySelectorAll('.arrow-image').forEach(arrow => {
+            document.querySelectorAll('.arrow-container').forEach(container => {
                 elements.push({
                     type: 'arrow',
-                    imagePath: arrow.style.backgroundImage.match(/url\('?"?(.*?)'?"?\)/)[1],
+                    imagePath: container.dataset.imagePath,
-                    left: arrow.style.left,
+                    text: container.dataset.text || '',
-                    top: arrow.style.top
+                    left: container.style.left,
-                });
+                    top: container.style.top
-            });
-
-            // 新增：收集文字元素
-            document.querySelectorAll('.text-label').forEach(text => {
-                elements.push({
-                    type: 'text',
-                    content: text.textContent,
-                    left: text.style.left,
-                    top: text.style.top
                 });
             });
 
@@ -248,7 +299,7 @@
             alert('所有元素位置已保存！');
         }
 
-        // 修改：加载所有元素（箭头和文字）
+        // 加载所有元素
         function loadAllElements() {
             const savedData = localStorage.getItem('mapElements');
             if (savedData) {
@@ -256,15 +307,11 @@
                     const elements = JSON.parse(savedData);
                     elements.forEach(element => {
                         if (element.type === 'arrow') {
-                            addImageToContainer(element.imagePath, {
+                            addImageToContainer(
-                                left: element.left,
+                                element.imagePath,
-                                top: element.top
+                                { left: element.left, top: element.top },
-                            });
+                                element.text
-                        } else if (element.type === 'text') {
+                            );
-                            addTextToContainer(element.content, {
-                                left: element.left,
-                                top: element.top
-                            });
                         }
                     });
                 } catch (e) {
@@ -305,10 +352,12 @@
             let isDragging = false;
             let offsetX, offsetY;
 
-            // 修改事件绑定，将mousemove和mouseup绑定到document
             element.addEventListener('mousedown', startDrag);
 
             function startDrag(e) {
+                // 忽略右键点击
+                if (e.button === 2) return;
+
                 isDragging = true;
                 const rect = element.getBoundingClientRect();
                 const containerRect = backgroundContainer.getBoundingClientRect();
@@ -317,8 +366,6 @@
                 offsetX = e.clientX - rect.left;
                 offsetY = e.clientY - rect.top;
                 
-                // 移除transform影响
-                element.style.transform = 'none';
                 element.style.zIndex = '10';
                 
                 // 添加document事件监听