快捷键设置（点击输入框后按任意快捷键捕获）
说明：按输入框后可按任意快捷键设置，支持 Ctrl、Alt、Shift，区分大小写。
`;
// -------------- 功能封装 --------------
// 位置拖动存储（与入口按钮的拖动逻辑类似，用于面板）
(function dragElement(el, saveKey){ // 定义一个用于拖动元素的匿名立即执行函数
let isDown = false, offsetX=0, offsetY=0; // 记录鼠标是否按下、鼠标相对于元素左上角的偏移量
el.addEventListener('mousedown', e => { // 监听面板的鼠标按下事件
// 如果点击目标是按钮、文本域或输入框，则不进行拖动（允许这些元素内部的操作）
if(e.target.tagName==='BUTTON' || e.target.tagName==='TEXTAREA' || e.target.tagName==='INPUT') return;
if(e.button!==0) return; // 如果不是左键点击，则不进行拖动
isDown=true; // 标记鼠标已按下
const rect=el.getBoundingClientRect(); // 获取面板的尺寸和位置
offsetX=e.clientX-rect.left; // 计算鼠标点击位置与面板左边缘的距离
offsetY=e.clientY-rect.top; // 计算鼠标点击位置与面板上边缘的距离
document.body.style.userSelect='none'; // 拖动时禁止页面文本选择
});
window.addEventListener('mousemove', e=> { // 监听窗口的鼠标移动事件
if(!isDown) return; // 如果鼠标未按下，则不执行
let left = e.clientX - offsetX; // 计算元素的新 left 位置
let top = e.clientY - offsetY; // 计算元素的新 top 位置
// 限制边界，确保元素不会拖出可视区域
left=Math.min(Math.max(0,left), window.innerWidth - el.offsetWidth);
top=Math.min(Math.max(0,top), window.innerHeight - el.offsetHeight);
el.style.left=left+'px'; el.style.top=top+'px'; // 更新元素的 left 和 top 样式
el.style.right='auto'; el.style.bottom='auto'; // 清除 right 和 bottom 样式
});
window.addEventListener('mouseup', e => { // 监听窗口的鼠标松开事件
if(isDown){ isDown=false; document.body.style.userSelect='';} // 标记鼠标已松开，恢复页面文本选择
// 位置存储：将元素当前的位置保存到 localStorage
localStorage.setItem(saveKey, JSON.stringify({top:el.style.top, left:el.style.left, right:el.style.right, bottom:el.style.bottom}));
});
})(panel, 'mouseRecPanelPos'); // 立即执行拖动函数，传入面板和其位置的 localStorage 键名
// -------------- 控件绑定 ----------------
// 通过 ID 获取面板中的各个交互元素
const btnBackEntry = document.querySelector('#btnBackEntry'); // 返回入口按钮
const btnClearRecord = document.querySelector('#btnClearRecord'); // 清空录制按钮
const btnStartRec = document.querySelector('#btnStartRec'); // 开始录制按钮
const btnPauseRec = document.querySelector('#btnPauseRec'); // 暂停录制按钮
const btnResumeRec = document.querySelector('#btnResumeRec'); // 继续录制按钮
const btnStopRec = document.querySelector('#btnStopRec'); // 停止录制按钮
const btnPlay = document.querySelector('#btnPlay'); // 开始回放按钮
const btnStopPlay = document.querySelector('#btnStopPlay'); // 停止回放按钮
const btnSaveFile = document.querySelector('#btnSaveFile'); // 保存文件按钮
const btnLoadFile = document.querySelector('#btnLoadFile'); // 导入文件按钮
const fileInput = document.querySelector('#fileInput'); // 文件输入框（隐藏的）
const recData = document.querySelector('#recData'); // 录制数据显示文本域
const statusArea = document.querySelector('#statusArea'); // 状态显示区域
const btnSetHotkeys = document.querySelector('#btnSetHotkeys'); // 设置快捷键按钮
const hotkeySettingsPanel = document.querySelector('#hotkeySettingsPanel'); // 快捷键设置面板
const hotkeyForm = document.querySelector('#hotkeyForm'); // 快捷键设置表单
const btnSaveHotkeys = document.querySelector('#btnSaveHotkeys'); // 保存快捷键按钮
const btnCancelHotkeys = document.querySelector('#btnCancelHotkeys'); // 取消快捷键设置按钮
const chkPreventClicks = document.querySelector('#chkPreventClicks'); // 阻止点击事件复选框
// 复选框初始化
chkPreventClicks.checked = preventClicksDuringRecord; // 根据当前配置初始化复选框状态
chkPreventClicks.onchange = e => { // 监听复选框的改变事件
preventClicksDuringRecord=e.target.checked; // 更新阻止点击事件的配置
updateStatusAndUI(); // 更新状态和UI显示
debugLog(`阻止点击事件设置：${preventClicksDuringRecord}`); // 输出调试信息
};
// -------------- 快捷键配置 ----------------
// 将快捷键对象转换为字符串，例如 { ctrlKey: true, key: 'w' } -> "Ctrl+W"
function hotkeyObjToStr(hk) {
if(!hk.key) return ''; // 如果没有 key，返回空字符串
const parts = []; // 用于存储快捷键组合的数组
if(hk.ctrlKey) parts.push('Ctrl'); // 如果 Ctrl 键被按下，添加 'Ctrl'
if(hk.altKey) parts.push('Alt'); // 如果 Alt 键被按下，添加 'Alt'
if(hk.shiftKey) parts.push('Shift'); // 如果 Shift 键被按下，添加 'Shift'
parts.push(hk.key.length===1 ? hk.key.toUpperCase() : hk.key); // 添加按键本身，如果是单个字母则转为大写
return parts.join('+'); // 用 '+' 连接所有部分
}
// 将快捷键字符串转换为对象，例如 "Ctrl+W" -> { ctrlKey: true, key: 'w' }
function hotkeyStrToObj(str) {
// 分割字符串，并转换为小写，去除空格
const parts = str.trim().split(/[\+\-\s]+/).map(s=>s.trim());
let hk = { ctrlKey:false, altKey:false, shiftKey:false, key:'' }; // 初始化快捷键对象
for(const p of parts) { // 遍历分割后的部分
const pp=p.toLowerCase(); // 转换为小写进行判断
if(pp==='ctrl') hk.ctrlKey=true; // 如果是 'ctrl'，设置 ctrlKey 为 true
else if(pp==='alt') hk.altKey=true; // 如果是 'alt'，设置 altKey 为 true
else if(pp==='shift') hk.shiftKey=true; // 如果是 'shift'，设置 shiftKey 为 true
else if(p.length>0) hk.key=p.toLowerCase(); // 如果是按键本身，设置 key（转为小写）
}
if(!hk.key) return null; // 如果没有按键，返回 null
return hk; // 返回转换后的快捷键对象
}
// 更新快捷键设置面板中的输入框显示（此函数代码略有冗余，直接赋值即可）
function updateHotkeyInputs() {
// 这段代码是尝试遍历更新，但hotkeyForm不是一个直接的DOM元素，它只是ID。
// hotkeyForm[id] = ... 这行实际上是无效的。
// 正确的做法是直接通过querySelector获取元素并赋值。
['startRecord','pauseRecord','resumeRecord','stopRecord','startPlayback','stopPlayback']
.forEach(id => {
const hk=hotkeys[id];
// 这里的hotkeyForm[id] = ... 实际上是无效的，因为hotkeyForm不是一个map或object，而是一个DOM元素。
// 这导致了后续需要单独赋值。
// hotkeyForm[id]=({}) => {
// return hotkeyObjToStr(hk);
// }
// hotkeyForm[`#${id}`].value= hotkeyObjToStr(hk);
});
//单独赋值：确保每个输入框显示正确的快捷键字符串
document.querySelector('#hkStart').value=hotkeyObjToStr(hotkeys.startRecord);
document.querySelector('#hkPause').value=hotkeyObjToStr(hotkeys.pauseRecord);
document.querySelector('#hkResume').value=hotkeyObjToStr(hotkeys.resumeRecord);
document.querySelector('#hkStop').value=hotkeyObjToStr(hotkeys.stopRecord);
document.querySelector('#hkPlay').value=hotkeyObjToStr(hotkeys.startPlayback);
document.querySelector('#hkStopPlay').value=hotkeyObjToStr(hotkeys.stopPlayback);
}
// 更新状态显示区域的文本内容
function updateStatus(text) {
statusArea.innerHTML = text.replace(/\n/g,'