feat(面板): 实现浮动面板拖拽功能并优化样式
添加面板拖拽功能,允许用户通过标题栏拖动面板。重构面板样式,移除固定位置属性,改为居中显示并支持动态调整。同时添加语言面板状态管理,优化面板动画效果。
This commit is contained in:
@@ -121,9 +121,65 @@ const fullscreenState = {
|
||||
const panelState = {
|
||||
configPanel: false,
|
||||
captionPanel: false,
|
||||
languagePanel: false,
|
||||
logPanel: false
|
||||
};
|
||||
|
||||
let panelDragState = {
|
||||
isDragging: false,
|
||||
currentPanel: null,
|
||||
offsetX: 0,
|
||||
offsetY: 0,
|
||||
originalHeight: null
|
||||
};
|
||||
|
||||
function initPanelDrag() {
|
||||
document.querySelectorAll('.floating-panel').forEach(panel => {
|
||||
const header = panel.querySelector('.panel-header');
|
||||
if (!header) return;
|
||||
|
||||
header.style.cursor = 'move';
|
||||
|
||||
header.addEventListener('mousedown', (e) => {
|
||||
if (e.target.tagName === 'BUTTON') return;
|
||||
|
||||
panelDragState.isDragging = true;
|
||||
panelDragState.currentPanel = panel;
|
||||
|
||||
const rect = panel.getBoundingClientRect();
|
||||
panelDragState.offsetX = e.clientX - rect.left;
|
||||
panelDragState.offsetY = e.clientY - rect.top;
|
||||
panelDragState.originalHeight = panel.offsetHeight;
|
||||
|
||||
panel.style.transform = 'none';
|
||||
panel.style.height = panelDragState.originalHeight + 'px';
|
||||
});
|
||||
|
||||
document.addEventListener('mousemove', (e) => {
|
||||
if (!panelDragState.isDragging || !panelDragState.currentPanel) return;
|
||||
|
||||
const x = e.clientX - panelDragState.offsetX;
|
||||
const y = e.clientY - panelDragState.offsetY;
|
||||
|
||||
const maxX = window.innerWidth - panelDragState.currentPanel.offsetWidth;
|
||||
const maxY = window.innerHeight - panelDragState.currentPanel.offsetHeight;
|
||||
|
||||
panelDragState.currentPanel.style.left = Math.max(0, Math.min(x, maxX)) + 'px';
|
||||
panelDragState.currentPanel.style.top = Math.max(0, Math.min(y, maxY)) + 'px';
|
||||
});
|
||||
|
||||
document.addEventListener('mouseup', () => {
|
||||
if (panelDragState.isDragging) {
|
||||
panelDragState.isDragging = false;
|
||||
if (panelDragState.currentPanel) {
|
||||
panelDragState.currentPanel.style.height = '';
|
||||
}
|
||||
panelDragState.currentPanel = null;
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
const logger = {
|
||||
log(level, message, data = null) {
|
||||
const timestamp = new Date().toLocaleTimeString('zh-CN', { hour12: false });
|
||||
@@ -1248,6 +1304,7 @@ function init() {
|
||||
bindEvents();
|
||||
updateUIState();
|
||||
initScaling();
|
||||
initPanelDrag();
|
||||
watchCaptionContainer();
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user