This commit is contained in:
Baobhan Sith
2025-04-17 21:42:58 +08:00
parent 1c4ae3a3e1
commit 75b6f428c9
3 changed files with 40 additions and 30 deletions
@@ -86,7 +86,7 @@ watch(() => props.isVisible, (newValue) => {
window.removeEventListener('mousemove', handleMouseMove);
window.removeEventListener('mouseup', handleMouseUp);
}
}, { immediate: true }); // immediate: true 可能导致初始计算问题,先去掉试试
}, /*{ immediate: true }*/); // 移除 immediate: true 解决初始化顺序问题
// 监听本地布局树的变化,标记有未保存更改
watch(localLayoutTree, (newValue, oldValue) => {
@@ -175,33 +175,7 @@ const resetToDefault = () => {
};
// --- Resizing Methods ---
const handleMouseDown = (event: MouseEvent, handle: string) => {
if (!dialogRef.value) return;
event.preventDefault(); // 阻止默认行为,如文本选择
event.stopPropagation();
isResizing.value = true;
resizeHandle.value = handle;
startDragPos.x = event.clientX;
startDragPos.y = event.clientY;
// 解析当前的 px 值
const currentWidth = parseFloat(dialogStyle.width);
const currentHeight = parseFloat(dialogStyle.height);
const currentTop = parseFloat(dialogStyle.top);
const currentLeft = parseFloat(dialogStyle.left);
startDialogRect.width = isNaN(currentWidth) ? initialDialogState.width : currentWidth;
startDialogRect.height = isNaN(currentHeight) ? initialDialogState.height : currentHeight;
startDialogRect.top = isNaN(currentTop) ? (window.innerHeight - startDialogRect.height) / 2 : currentTop;
startDialogRect.left = isNaN(currentLeft) ? (window.innerWidth - startDialogRect.width) / 2 : currentLeft;
console.log(`[LayoutConfigurator] MouseDown on handle ${handle}. Start rect:`, { ...startDialogRect });
window.addEventListener('mousemove', handleMouseMove);
window.addEventListener('mouseup', handleMouseUp);
};
// 将 handleMouseMove 和 handleMouseUp 定义移到 watch 之前
const handleMouseMove = (event: MouseEvent) => {
if (!isResizing.value || !resizeHandle.value) return;
@@ -261,11 +235,43 @@ const handleMouseUp = () => {
console.log(`[LayoutConfigurator] MouseUp. Final rect:`, { width: dialogStyle.width, height: dialogStyle.height, top: dialogStyle.top, left: dialogStyle.left });
isResizing.value = false;
resizeHandle.value = null;
// 确保移除监听器
window.removeEventListener('mousemove', handleMouseMove);
window.removeEventListener('mouseup', handleMouseUp);
}
};
const handleMouseDown = (event: MouseEvent, handle: string) => {
if (!dialogRef.value) return;
event.preventDefault(); // 阻止默认行为,如文本选择
event.stopPropagation();
isResizing.value = true;
resizeHandle.value = handle;
startDragPos.x = event.clientX;
startDragPos.y = event.clientY;
// 解析当前的 px 值
const currentWidth = parseFloat(dialogStyle.width);
const currentHeight = parseFloat(dialogStyle.height);
const currentTop = parseFloat(dialogStyle.top);
const currentLeft = parseFloat(dialogStyle.left);
startDialogRect.width = isNaN(currentWidth) ? initialDialogState.width : currentWidth;
startDialogRect.height = isNaN(currentHeight) ? initialDialogState.height : currentHeight;
startDialogRect.top = isNaN(currentTop) ? (window.innerHeight - startDialogRect.height) / 2 : currentTop;
startDialogRect.left = isNaN(currentLeft) ? (window.innerWidth - startDialogRect.width) / 2 : currentLeft;
console.log(`[LayoutConfigurator] MouseDown on handle ${handle}. Start rect:`, { ...startDialogRect });
// 添加监听器
window.addEventListener('mousemove', handleMouseMove);
window.addEventListener('mouseup', handleMouseUp);
};
// --- Drag & Drop Methods (for panes, unchanged) ---
// 克隆函数:当从可用列表拖拽时,创建新的 LayoutNode 对象
const clonePane = (paneName: PaneName): LayoutNode => {
+3 -1
View File
@@ -570,7 +570,9 @@
"title": "Layout Configurator",
"availablePanes": "Available Panes",
"layoutPreview": "Layout Preview",
"resetDefault": "Reset to Default Layout"
"resetDefault": "Reset to Default",
"noAvailablePanes": "All panes are already in the layout",
"emptyLayout": "Layout is empty. Drag panes from the left or add a container."
},
"auditLog": {
"title": "Audit Logs",
+3 -1
View File
@@ -575,7 +575,9 @@
"title": "布局配置器",
"availablePanes": "可用面板",
"layoutPreview": "布局预览",
"resetDefault": "重置为默认布局"
"resetDefault": "重置为默认布局",
"noAvailablePanes": "所有面板都已在布局中",
"emptyLayout": "布局为空,请从左侧拖拽面板或添加容器。"
},
"auditLog": {
"title": "审计日志",