'commit'

dsLightRag/static/XingJun/js/script.js

@@ -2,6 +2,8 @@
 const ARROW_WIDTH = 155;
 const ARROW_HEIGHT = 173;
 const STOP_DISTANCE = 50;
+// 添加全局变量声明
+let centerDot = null;
 document.addEventListener('DOMContentLoaded', function() {
     const backgroundContainer = document.querySelector('.background-container');
     const imageButtons = document.querySelectorAll('.image-btn');
@@ -11,7 +13,7 @@ document.addEventListener('DOMContentLoaded', function() {
     const contextMenu = document.getElementById('contextMenu');
     const deleteArrow = document.getElementById('deleteArrow');
     let selectedArrow = null;
-    let centerDot = null;
+    centerDot = null; // 修改为直接赋值
     
     // 添加重置按钮事件监听器
     resetBtn.addEventListener('click', function() {
@@ -43,25 +45,6 @@ document.addEventListener('DOMContentLoaded', function() {
             animateArrow(arrow, centerX, centerY);
         });
     }
-    
-
-    // 修改全局偏移量输入框事件监听
-    // 删除以下全局停止距离相关代码
-    // const globalStopDistanceInput = document.getElementById('global-stop-distance');
-    // 
-    // // 初始化全局偏移量(从localStorage加载或使用默认值)
-    // const savedGlobalStopDistance = localStorage.getItem('globalStopDistance');
-    // if (savedGlobalStopDistance) {
-    //     globalStopDistanceInput.value = savedGlobalStopDistance;
-    // }
-    // 
-    // // 全局偏移量变更事件 - 保存到localStorage无需选中箭头
-    // globalStopDistanceInput.addEventListener('input', function() {
-    //     const globalValue = this.value;
-    //     localStorage.setItem('globalStopDistance', globalValue);
-    //     console.log(`[全局设置] 箭头停止距离: ${globalValue}px`);
-    // });
-    
 
     
     // 单个箭头动画函数
@@ -429,4 +412,119 @@ document.addEventListener('DOMContentLoaded', function() {
     contextMenu.addEventListener('click', function(e) {
         e.stopPropagation();
     });
-});
+    // 替换原导入按钮事件为文件选择模式
+    document.addEventListener('DOMContentLoaded', function() {
+        // 导入数据按钮事件 - 全新实现
+        const importDataBtn = document.getElementById('importDataBtn');
+        if (importDataBtn) {
+            importDataBtn.addEventListener('click', function() {
+                // 创建隐藏的文件选择输入
+                const fileInput = document.createElement('input');
+                fileInput.type = 'file';
+                fileInput.accept = '.json';
+                fileInput.style.display = 'none';
+    
+                // 触发文件选择对话框
+                fileInput.click();
+    
+                // 文件选择处理
+                fileInput.onchange = function(e) {
+                    const file = e.target.files[0];
+                    if (!file) return;
+    
+                    console.log('已选择文件:', file.name);
+                    const loadIndex = layer.load(2, {shade: [0.3, '#333']});
+    
+                    const reader = new FileReader();
+                    reader.onload = function(event) {
+                        try {
+                            const data = JSON.parse(event.target.result);
+                            console.log('JSON文件解析成功:', data);
+    
+                            // 保存数据到localStorage
+                            if (data.elements) {
+                                localStorage.setItem('savedElements', JSON.stringify(data.elements));
+                            }
+                            if (data.centerPoint) {
+                                localStorage.setItem('centerPoint', JSON.stringify(data.centerPoint));
+                            }
+    
+                            layer.close(loadIndex);
+                            layer.msg('数据导入成功，页面将刷新', {icon: 1, time: 1500}, function() {
+                                location.reload();
+                            });
+                        } catch (error) {
+                            layer.close(loadIndex);
+                            console.error('JSON解析失败:', error);
+                            layer.msg('文件格式错误，请选择有效的JSON文件', {icon: 5});
+                        }
+                    };
+    
+                    reader.onerror = function() {
+                        layer.close(loadIndex);
+                        layer.msg('文件读取失败', {icon: 5});
+                    };
+    
+                    reader.readAsText(file);
+                };
+            });
+        }
+    });
+});
+
+
+// 保存数据到JSON文件并下载
+function saveDataToFile() {
+    // 获取所有箭头元素数据
+    const arrows = document.querySelectorAll('.arrow-container');
+    const elements = Array.from(arrows).map(arrow => ({
+        imagePath: arrow.dataset.imagePath,
+        left: arrow.style.left,
+        top: arrow.style.top,
+        text: arrow.dataset.text || '',
+        referencePoint: arrow.dataset.referencePoint || 'top-left',
+        stopDistance: parseInt(arrow.dataset.stopDistance) || 50
+    }));
+
+    // 获取中心点数据
+    const centerPoint = centerDot ? {
+        left: centerDot.style.left,
+        top: centerDot.style.top
+    } : null;
+
+    // 创建完整的导出数据对象
+    const exportData = {
+        elements: elements,
+        centerPoint: centerPoint,
+        exportTime: new Date().toISOString()
+    };
+
+    try {
+        // 生成JSON字符串，确保正确处理特殊字符
+        const jsonData = JSON.stringify(exportData, null, 2);
+        const blob = new Blob([jsonData], { type: 'application/json;charset=utf-8' });
+        const url = URL.createObjectURL(blob);
+
+        // 创建下载链接
+        const a = document.createElement('a');
+        a.href = url;
+        const dateStr = new Date().toISOString().slice(0, 10);
+        a.download = `arrow_data_${dateStr}.json`;
+        document.body.appendChild(a);
+        a.click();
+
+        // 清理
+        setTimeout(() => {
+            document.body.removeChild(a);
+            URL.revokeObjectURL(url);
+        }, 0);
+
+        console.log('数据已成功导出');
+    } catch (error) {
+        console.error('导出数据失败:', error);
+        layer.msg('导出失败: ' + error.message, {icon: 2});
+    }
+}
+
+// 为保存数据按钮添加点击事件
+document.getElementById('saveDataBtn').addEventListener('click', saveDataToFile);