${Math.round(config.buttonOpacity * 100)}%
`;
document.body.appendChild(settingsPanel);
bindSettingsEvents();
updatePresetList();
initSettingsDrag();
return settingsPanel;
}
// ==================== 设置面板拖拽 ====================
function initSettingsDrag() {
const header = settingsPanel.querySelector('.settings-header');
let isDragging = false;
let dragOffsetX = 0;
let dragOffsetY = 0;
header.addEventListener('mousedown', (e) => {
// 点击关闭按钮时不启动拖拽
if (e.target.closest('.settings-close')) return;
e.preventDefault();
isDragging = true;
dragOffsetX = e.clientX - settingsPanel.offsetLeft;
dragOffsetY = e.clientY - settingsPanel.offsetTop;
settingsPanel.style.transition = 'none';
});
document.addEventListener('mousemove', (e) => {
if (!isDragging) return;
const x = e.clientX - dragOffsetX;
const y = e.clientY - dragOffsetY;
settingsPanel.style.left = x + 'px';
settingsPanel.style.top = y + 'px';
});
document.addEventListener('mouseup', () => {
if (isDragging) {
isDragging = false;
settingsPanel.style.transition = '';
}
});
}
function bindSettingsEvents() {
// 关闭按钮
settingsPanel.querySelector('.settings-close').addEventListener('click', (e) => {
e.stopPropagation();
hideSettingsPanel();
});
// 透明度滑块
const opacitySlider = settingsPanel.querySelector('#opacity-slider');
const opacityValue = settingsPanel.querySelector('#opacity-value');
opacitySlider.addEventListener('input', () => {
opacityValue.textContent = `${opacitySlider.value}%`;
});
opacitySlider.addEventListener('click', (e) => {
e.stopPropagation();
});
// 切换模式单选按钮
settingsPanel.querySelectorAll('input[name="switchMode"]').forEach(radio => {
radio.addEventListener('click', (e) => {
e.stopPropagation();
});
});
// 添加预设
settingsPanel.querySelector('#add-preset').addEventListener('click', (e) => {
e.stopPropagation();
config.presetVolumes.push(50);
updatePresetList();
});
// 升序 / 降序排序
settingsPanel.querySelector('#sort-asc').addEventListener('click', (e) => {
e.stopPropagation();
config.presetVolumes.sort((a, b) => a - b);
updatePresetList();
});
settingsPanel.querySelector('#sort-desc').addEventListener('click', (e) => {
e.stopPropagation();
config.presetVolumes.sort((a, b) => b - a);
updatePresetList();
});
// 保存设置
settingsPanel.querySelector('#save-settings').addEventListener('click', (e) => {
e.stopPropagation();
const newConfig = { ...config };
newConfig.switchMode = settingsPanel.querySelector('input[name="switchMode"]:checked').value;
newConfig.buttonOpacity = parseInt(opacitySlider.value) / 100;
// 收集预设值（保留用户拖拽排序）
const presetInputs = settingsPanel.querySelectorAll('.preset-item input');
newConfig.presetVolumes = Array.from(presetInputs)
.map(input => parseInt(input.value) || 0)
.filter(v => v >= 0 && v <= 100);
saveConfig(newConfig);
hideSettingsPanel();
alert('设置已保存！');
});
// 恢复默认
settingsPanel.querySelector('#reset-settings').addEventListener('click', (e) => {
e.stopPropagation();
if (confirm('确定要恢复默认设置吗？')) {
saveConfig({ ...DEFAULT_CONFIG });
updatePresetList();
opacitySlider.value = DEFAULT_CONFIG.buttonOpacity * 100;
opacityValue.textContent = `${DEFAULT_CONFIG.buttonOpacity * 100}%`;
settingsPanel.querySelector(`input[name="switchMode"][value="${DEFAULT_CONFIG.switchMode}"]`).checked = true;
}
});
}
// ==================== 拖拽排序系统 ====================
let dragState = null;
const ongoingAnims = new Map(); // el → number (累计 transformY 偏移)
function startItemDrag(e, vol) {
e.preventDefault();
const presetList = settingsPanel.querySelector('#preset-list');
const srcEl = presetList.querySelector(`.preset-item[data-vol="${vol}"]`);
if (!srcEl) return;
const clone = srcEl.cloneNode(true);
clone.className = 'preset-drag-clone';
const rect = srcEl.getBoundingClientRect();
clone.style.left = rect.left + 'px';
clone.style.top = rect.top + 'px';
clone.style.width = rect.width + 'px';
document.body.appendChild(clone);
srcEl.classList.add('drag-item-hidden');
// 末尾占位 spacer
const spacer = document.createElement('div');
spacer.className = 'drag-spacer';
presetList.parentNode.insertBefore(spacer, presetList.nextSibling);
dragState = {
vol,
clone,
spacer,
offsetX: e.clientX - rect.left,
offsetY: e.clientY - rect.top,
lastDropIndex: config.presetVolumes.indexOf(vol),
};
document.addEventListener('mousemove', onDragMove);
document.addEventListener('mouseup', onDragEnd);
}
/** FLIP 动画：记录旧位置（补偿 ongoingAnims），应用新状态后从旧视觉位置飞到新位置 */
function flipAnimate(presetList) {
// 1. 记录当前视觉位置（layout + ongoing offset）
const oldPositions = new Map();
presetList.querySelectorAll('.preset-item').forEach(el => {
oldPositions.set(el.dataset.vol, el.getBoundingClientRect().top);
});
// 2. 清除所有 ongoing transform → 回到纯 layout 位置
presetList.querySelectorAll('.preset-item').forEach(el => {
el.style.transform = 'none';
el.style.transition = 'none';
});
// 3. 记录纯 layout 位置
const layoutPositions = new Map();
presetList.querySelectorAll('.preset-item').forEach(el => {
layoutPositions.set(el.dataset.vol, el.getBoundingClientRect().top);
});
// 4. 计算 delta 并启动动画
presetList.querySelectorAll('.preset-item').forEach(el => {
const vol = el.dataset.vol;
const oldTop = oldPositions.get(vol);
const layoutTop = layoutPositions.get(vol);
if (oldTop === undefined || layoutTop === undefined) return;
const dy = oldTop - layoutTop;
ongoingAnims.set(el, dy);
if (Math.abs(dy) < 1) { el.style.transform = ''; return; }
el.style.transform = `translateY(${dy}px)`;
requestAnimationFrame(() => {
requestAnimationFrame(() => {
el.style.transform = '';
el.style.transition = 'transform 0.22s ease';
el.addEventListener('transitionend', function handler() {
el.style.transition = '';
ongoingAnims.delete(el);
el.removeEventListener('transitionend', handler);
});
});
});
});
}
function onDragMove(e) {
if (!dragState) return;
const { clone, offsetX, offsetY, vol, lastDropIndex } = dragState;
clone.style.left = (e.clientX - offsetX) + 'px';
clone.style.top = (e.clientY - offsetY) + 'px';
const presetList = settingsPanel.querySelector('#preset-list');
const items = [...presetList.querySelectorAll('.preset-item:not(.drag-item-hidden)')];
const cloneMidY = e.clientY;
let newDropIndex = items.length;
for (let i = 0; i < items.length; i++) {
const rect = items[i].getBoundingClientRect();
if (cloneMidY < rect.top + rect.height / 2) {
newDropIndex = i;
break;
}
}
if (newDropIndex === lastDropIndex) return;
const oldGapVol = lastDropIndex < config.presetVolumes.length
? config.presetVolumes[lastDropIndex] : null;
const needsReorder = config.presetVolumes.indexOf(vol) !== newDropIndex;
const draggingDown = newDropIndex > lastDropIndex;
// 更新数据（仅在真正需要重排时）
if (needsReorder) {
const curIdx = config.presetVolumes.indexOf(vol);
const [moved] = config.presetVolumes.splice(curIdx, 1);
config.presetVolumes.splice(newDropIndex, 0, moved);
updatePresetList();
const draggedEl = presetList.querySelector(`.preset-item[data-vol="${vol}"]`);
if (draggedEl) draggedEl.classList.add('drag-item-hidden');
}
// 更新 gap 类
if (oldGapVol) {
const oldEl = presetList.querySelector(`.preset-item[data-vol="${oldGapVol}"]`);
if (oldEl) oldEl.classList.remove('drag-gap');
}
// 向下拖：gap 放在 newDropIndex+1（被拖项下方）
// 向上拖：gap 放在 newDropIndex（被拖项上方）
let gapIdx = draggingDown ? newDropIndex + 1 : newDropIndex;
// 如果 gap 目标是被拖拽的隐藏元素，跳到下一个
if (gapIdx < config.presetVolumes.length && config.presetVolumes[gapIdx] === vol) {
gapIdx++;
}
if (gapIdx >= config.presetVolumes.length) {
// 拖到末尾：gap 放在 spacer 上（列表最后一个元素之后）
dragState.spacer.classList.add('drag-gap');
} else if (gapIdx >= 0) {
const gapEl = presetList.querySelector(`.preset-item[data-vol="${config.presetVolumes[gapIdx]}"]`);
if (gapEl) gapEl.classList.add('drag-gap');
}
// FLIP 动画（无论是 gap 位移还是重排都执行）
flipAnimate(presetList);
dragState.lastDropIndex = newDropIndex;
}
function onDragEnd() {
if (!dragState) return;
document.removeEventListener('mousemove', onDragMove);
document.removeEventListener('mouseup', onDragEnd);
const { clone, vol, spacer } = dragState;
const presetList = settingsPanel.querySelector('#preset-list');
const draggedEl = presetList.querySelector(`.preset-item[data-vol="${vol}"]`);
// 移除 spacer
if (spacer) spacer.remove();
if (draggedEl) {
const placeholderRect = draggedEl.getBoundingClientRect();
clone.style.transition = 'all 0.22s ease';
clone.style.left = placeholderRect.left + 'px';
clone.style.top = placeholderRect.top + 'px';
clone.style.transform = 'scale(1)';
clone.style.opacity = '0';
draggedEl.classList.remove('drag-item-hidden');
// 移除 gap
presetList.querySelectorAll('.drag-gap').forEach(el => el.classList.remove('drag-gap'));
setTimeout(() => {
clone.remove();
presetList.querySelectorAll('.preset-item').forEach(el => {
el.style.transform = '';
el.style.transition = '';
});
ongoingAnims.clear();
}, 230);
} else {
clone.remove();
}
dragState = null;
}
function updatePresetList() {
const presetList = settingsPanel.querySelector('#preset-list');
presetList.innerHTML = '';
config.presetVolumes.forEach((vol) => {
const item = document.createElement('div');
item.className = 'preset-item';
item.dataset.vol = vol;
// 拖拽手柄
const handle = document.createElement('div');
handle.className = 'drag-handle';
handle.innerHTML = `