修改内容区显示逻辑,改为配置驱动

This commit is contained in:
zqm
2025-12-26 17:12:36 +08:00
parent e89d3254e8
commit 09e4076635
5 changed files with 213 additions and 210 deletions

View File

@@ -397,22 +397,40 @@ const onDragStart = (e) => {
console.log(`[Panel:${props.id}] 开始拖拽, dragId: ${currentDragId}`)
// 2. 使用事件总线触发拖拽开始事件,包含统一的 dragId 和标准化数据格式
const areaId = getCurrentAreaId();
// 2. 使用事件总线触发面板拖拽开始事件,包含统一的 dragId 和标准化数据格式
emitEvent(EVENT_TYPES.PANEL_DRAG_START, {
dragId: currentDragId,
panelId: props.id,
areaId: getCurrentAreaId(),
areaId: areaId,
position: { x: e.clientX, y: e.clientY },
timestamp: Date.now()
}, {
source: { component: 'Panel', panelId: props.id, dragId: currentDragId }
})
// 3. 防止文本选择和默认行为
// 3. 同时触发Area拖拽开始事件实现通过Panel标题栏拖拽Area
emitEvent(EVENT_TYPES.AREA_DRAG_START, {
dragId: currentDragId,
areaId: areaId,
event: e,
element: null,
position: { x: e.clientX, y: e.clientY },
clientX: e.clientX,
clientY: e.clientY,
startLeft: 0,
startTop: 0,
timestamp: Date.now()
}, {
source: { component: 'Panel', panelId: props.id, dragId: currentDragId }
})
// 4. 防止文本选择和默认行为
e.preventDefault()
e.stopPropagation()
// 4. 添加Document事件监听器使用一次性变量避免内存泄漏
// 5. 添加Document事件监听器使用一次性变量避免内存泄漏
addDocumentDragListeners()
}
};
@@ -424,16 +442,31 @@ const onDragMove = (e) => {
e.preventDefault();
e.stopPropagation();
// 使用事件总线触发拖拽移动事件,包含 dragId
const areaId = getCurrentAreaId();
// 1. 使用事件总线触发面板拖拽移动事件,包含 dragId
emitEvent(EVENT_TYPES.PANEL_DRAG_MOVE, {
dragId: currentDragId,
panelId: props.id,
areaId: getCurrentAreaId(),
areaId: areaId,
position: { x: e.clientX, y: e.clientY },
timestamp: Date.now()
}, {
source: { component: 'Panel', panelId: props.id, dragId: currentDragId }
})
// 2. 同时触发Area拖拽移动事件实现通过Panel标题栏拖拽Area
emitEvent(EVENT_TYPES.AREA_DRAG_MOVE, {
dragId: currentDragId,
areaId: areaId,
event: e,
position: { x: e.clientX, y: e.clientY },
clientX: e.clientX,
clientY: e.clientY,
timestamp: Date.now()
}, {
source: { component: 'Panel', panelId: props.id, dragId: currentDragId }
})
}
};
@@ -444,20 +477,33 @@ const onDragEnd = () => {
console.log(`[Panel:${props.id}] 结束拖拽, dragId: ${currentDragId}`)
// 使用事件总线触发拖拽结束事件,包含 dragId
const areaId = getCurrentAreaId();
// 1. 使用事件总线触发面板拖拽结束事件,包含 dragId
emitEvent(EVENT_TYPES.PANEL_DRAG_END, {
dragId: currentDragId,
panelId: props.id,
areaId: getCurrentAreaId(),
areaId: areaId,
timestamp: Date.now()
}, {
source: { component: 'Panel', panelId: props.id, dragId: currentDragId }
})
// 使用统一的清理方法,确保一致性和完整性
// 2. 同时触发Area拖拽结束事件实现通过Panel标题栏拖拽Area
emitEvent(EVENT_TYPES.AREA_DRAG_END, {
dragId: currentDragId,
areaId: areaId,
event: null,
position: null,
timestamp: Date.now()
}, {
source: { component: 'Panel', panelId: props.id, dragId: currentDragId }
})
// 3. 使用统一的清理方法,确保一致性和完整性
cleanupDragEventListeners()
// 重置 dragId
// 4. 重置 dragId
currentDragId = null
}
};