新增录制轨迹文件记录

main/Javascript/record.js

@@ -12,12 +12,153 @@ window.addEventListener('DOMContentLoaded', function() {
     const recordBtn = document.getElementById('recordBtn');
     const playbackBtn = document.getElementById('playbackBtn');
     const status = document.getElementById('status');
+    
+    // 获取轨迹管理相关元素
+    const pathNameInput = document.getElementById('pathName');
+    const savePathBtn = document.getElementById('savePathBtn');
+    const pathList = document.getElementById('pathList');
 
     // 调试信息
     console.log('Record.js loaded');
     console.log('recordBtn:', recordBtn);
     console.log('playbackBtn:', playbackBtn);
     console.log('status:', status);
+    console.log('pathNameInput:', pathNameInput);
+    console.log('savePathBtn:', savePathBtn);
+    console.log('pathList:', pathList);
+    
+    // 列出已保存的轨迹
+    function listPaths() {
+        fetch('/list_paths')
+            .then(response => response.json())
+            .then(data => {
+                if (data.status === 'success') {
+                    // 清空路径列表
+                    pathList.innerHTML = '';
+                    
+                    // 添加路径到列表
+                    data.paths.forEach(path => {
+                        const li = document.createElement('li');
+                        li.innerHTML = `
+                            <span>${path}</span>
+                            <div>
+                                <button class="load-btn" data-path="${path}">加载</button>
+                                <button class="delete-btn" data-path="${path}">删除</button>
+                            </div>
+                        `;
+                        pathList.appendChild(li);
+                    });
+                    
+                    // 添加加载和删除按钮的事件监听器
+                    document.querySelectorAll('.load-btn').forEach(btn => {
+                        btn.addEventListener('click', function() {
+                            const pathName = this.getAttribute('data-path');
+                            loadPath(pathName);
+                        });
+                    });
+                    
+                    document.querySelectorAll('.delete-btn').forEach(btn => {
+                        btn.addEventListener('click', function() {
+                            const pathName = this.getAttribute('data-path');
+                            deletePath(pathName);
+                        });
+                    });
+                } else {
+                    status.innerHTML = `<p>错误: ${data.message}</p>`;
+                }
+            })
+            .catch(error => {
+                status.innerHTML = `<p>通信错误: ${error.message}</p>`;
+            });
+    }
+    
+    // 保存轨迹
+    function savePath() {
+        const pathName = pathNameInput.value.trim();
+        if (!pathName) {
+            status.innerHTML = '<p>请输入轨迹名称</p>';
+            return;
+        }
+        
+        if (window.recordedActions.length === 0) {
+            status.innerHTML = '<p>没有可保存的轨迹</p>';
+            return;
+        }
+        
+        fetch('/save_path', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({ name: pathName, actions: window.recordedActions })
+        })
+        .then(response => response.json())
+        .then(data => {
+            if (data.status === 'success') {
+                status.innerHTML = `<p>${data.message}</p>`;
+                // 清空输入框
+                pathNameInput.value = '';
+                // 更新轨迹列表
+                listPaths();
+            } else {
+                status.innerHTML = `<p>错误: ${data.message}</p>`;
+            }
+        })
+        .catch(error => {
+            status.innerHTML = `<p>通信错误: ${error.message}</p>`;
+        });
+    }
+    
+    // 加载轨迹
+    function loadPath(pathName) {
+        fetch(`/load_path?name=${pathName}`)
+            .then(response => response.json())
+            .then(data => {
+                if (data.status === 'success') {
+                    window.recordedActions = data.data.actions;
+                    status.innerHTML = `<p>轨迹 ${pathName} 加载成功，共 ${window.recordedActions.length} 个操作</p>`;
+                } else {
+                    status.innerHTML = `<p>错误: ${data.message}</p>`;
+                }
+            })
+            .catch(error => {
+                status.innerHTML = `<p>通信错误: ${error.message}</p>`;
+            });
+    }
+    
+    // 删除轨迹
+    function deletePath(pathName) {
+        if (confirm(`确定要删除轨迹 ${pathName} 吗？`)) {
+            fetch('/delete_path', {
+                method: 'DELETE',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({ name: pathName })
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.status === 'success') {
+                    status.innerHTML = `<p>${data.message}</p>`;
+                    // 更新轨迹列表
+                    listPaths();
+                } else {
+                    status.innerHTML = `<p>错误: ${data.message}</p>`;
+                }
+            })
+            .catch(error => {
+                status.innerHTML = `<p>通信错误: ${error.message}</p>`;
+            });
+        }
+    }
+    
+    // 保存轨迹按钮点击事件
+    if (savePathBtn) {
+        savePathBtn.addEventListener('click', savePath);
+    }
+    
+    // 页面加载时列出已保存的轨迹
+    listPaths();
 
     // 录制按钮点击事件 - 支持鼠标和触摸事件
     function toggleRecording() {