看不到指示器

This commit is contained in:
zqm
2026-01-20 14:42:23 +08:00
parent e879a24afe
commit 4d563a9088

View File

@@ -7,7 +7,7 @@
:target-rect="targetAreaRect" :target-rect="targetAreaRect"
:mouse-position="currentMousePosition" :mouse-position="currentMousePosition"
:hide-edge-indicators="hideEdgeIndicators" :hide-edge-indicators="hideEdgeIndicators"
:target-area-id="targetAreaId" <!-- 新增: 传递最上层的目标Area ID --> :target-area-id="targetAreaId"
@zone-active="onDockZoneActive" @zone-active="onDockZoneActive"
style="z-index: 9999;" style="z-index: 9999;"
></DockIndicator> ></DockIndicator>
@@ -98,8 +98,11 @@ const dockLayoutRef = ref(null)
// 主区域引用 // 主区域引用
const mainAreaRef = ref(null) const mainAreaRef = ref(null)
// 调试模式开关 // 调试模式开关 - 设置为true以查看详细日志
const debugMode = ref(false) const debugMode = ref(true)
// 组件卸载状态跟踪
const isUnmounted = ref(false)
// 停靠指示器相关状态 // 停靠指示器相关状态
const showDockIndicator = ref(false) const showDockIndicator = ref(false)
@@ -1101,6 +1104,9 @@ const findOrCreateMainAreaTabPage = () => {
// 处理上升事件(用户触发的原始事件)- 从GlobalEventManager.js迁移 // 处理上升事件(用户触发的原始事件)- 从GlobalEventManager.js迁移
const handleRisingEvent = async (data, event) => { const handleRisingEvent = async (data, event) => {
// 检查组件是否已卸载
if (isUnmounted.value) return;
// 从事件对象中获取事件类型 // 从事件对象中获取事件类型
const eventType = event.type; const eventType = event.type;
@@ -1289,6 +1295,9 @@ const handlePanelDragCancel = async (data) => {
// 区域拖拽开始处理 // 区域拖拽开始处理
const handleAreaDragStart = async (data) => { const handleAreaDragStart = async (data) => {
// 检查组件是否已卸载
if (isUnmounted.value) return;
if (debugMode.value) { if (debugMode.value) {
console.log('👋 处理区域拖拽开始:', data); console.log('👋 处理区域拖拽开始:', data);
} }
@@ -1297,6 +1306,9 @@ const handleAreaDragStart = async (data) => {
targetAreaId.value = null; targetAreaId.value = null;
targetAreaRect.value = { left: 0, top: 0, width: 0, height: 0 }; targetAreaRect.value = { left: 0, top: 0, width: 0, height: 0 };
// ✅ 修复:显示指示器
showDockIndicator.value = true;
// 发送区域拖拽状态更新事件(下降事件) // 发送区域拖拽状态更新事件(下降事件)
eventBus.emit('area.drag.state.update', { eventBus.emit('area.drag.state.update', {
...data, ...data,
@@ -1306,6 +1318,12 @@ const handleAreaDragStart = async (data) => {
// 防抖的区域检测函数,移到外部以便清理 // 防抖的区域检测函数,移到外部以便清理
const debouncedDetectMouseArea = debounce((position, areaId) => { const debouncedDetectMouseArea = debounce((position, areaId) => {
// 检查组件是否已卸载,避免更新已销毁的组件
if (isUnmounted.value) {
console.log('⚠️ 组件已卸载跳过debouncedDetectMouseArea执行');
return;
}
const detectedAreaId = _getTopAreaAtPosition(position, areaId); const detectedAreaId = _getTopAreaAtPosition(position, areaId);
// 调试日志 // 调试日志
@@ -1325,6 +1343,9 @@ const debouncedDetectMouseArea = debounce((position, areaId) => {
console.log('📐 更新指示器位置:', detectedAreaRect); console.log('📐 更新指示器位置:', detectedAreaRect);
} }
// 检查组件是否已卸载(双重保险)
if (isUnmounted.value) return;
// 更新指示器的目标Area和位置 // 更新指示器的目标Area和位置
targetAreaId.value = detectedAreaId; targetAreaId.value = detectedAreaId;
targetAreaRect.value = detectedAreaRect; targetAreaRect.value = detectedAreaRect;
@@ -1334,6 +1355,9 @@ const debouncedDetectMouseArea = debounce((position, areaId) => {
console.log('❌ 未检测到有效目标Area隐藏指示器'); console.log('❌ 未检测到有效目标Area隐藏指示器');
} }
// 检查组件是否已卸载(双重保险)
if (isUnmounted.value) return;
// 清空指示器状态 // 清空指示器状态
targetAreaId.value = null; targetAreaId.value = null;
targetAreaRect.value = { left: 0, top: 0, width: 0, height: 0 }; targetAreaRect.value = { left: 0, top: 0, width: 0, height: 0 };
@@ -1342,6 +1366,9 @@ const debouncedDetectMouseArea = debounce((position, areaId) => {
// 区域拖拽移动处理 // 区域拖拽移动处理
const handleAreaDragMove = async (data) => { const handleAreaDragMove = async (data) => {
// 检查组件是否已卸载
if (isUnmounted.value) return;
if (debugMode.value) { if (debugMode.value) {
console.log('✋ 处理区域拖拽移动:', data); console.log('✋ 处理区域拖拽移动:', data);
} }
@@ -1353,6 +1380,9 @@ const handleAreaDragMove = async (data) => {
// 新增:更新当前鼠标位置 // 新增:更新当前鼠标位置
currentMousePosition.value = data.position; currentMousePosition.value = data.position;
// ✅ 修复:确保指示器可见
showDockIndicator.value = true;
// 发送区域拖拽状态更新事件(下降事件) // 发送区域拖拽状态更新事件(下降事件)
eventBus.emit('area.drag.state.update', { eventBus.emit('area.drag.state.update', {
...data, ...data,
@@ -1374,6 +1404,9 @@ const handleAreaDragMove = async (data) => {
// 区域拖拽结束处理 // 区域拖拽结束处理
const handleAreaDragEnd = async (data) => { const handleAreaDragEnd = async (data) => {
// 检查组件是否已卸载
if (isUnmounted.value) return;
if (debugMode.value) { if (debugMode.value) {
console.log('✋ 处理区域拖拽结束:', data); console.log('✋ 处理区域拖拽结束:', data);
} }
@@ -1396,6 +1429,9 @@ const handleAreaDragEnd = async (data) => {
// 区域拖拽取消处理 // 区域拖拽取消处理
const handleAreaDragCancel = async (data) => { const handleAreaDragCancel = async (data) => {
// 检查组件是否已卸载
if (isUnmounted.value) return;
if (debugMode.value) { if (debugMode.value) {
console.log('✋ 处理区域拖拽取消:', data); console.log('✋ 处理区域拖拽取消:', data);
} }
@@ -1418,6 +1454,9 @@ const handleAreaDragCancel = async (data) => {
// 面板resize处理 // 面板resize处理
const handlePanelResizeStart = async (data) => { const handlePanelResizeStart = async (data) => {
// 检查组件是否已卸载
if (isUnmounted.value) return;
if (debugMode.value) { if (debugMode.value) {
console.log('✋ 处理面板resize开始:', data); console.log('✋ 处理面板resize开始:', data);
} }
@@ -1647,11 +1686,16 @@ onMounted(() => {
// 组件卸载时清理资源 // 组件卸载时清理资源
onUnmounted(() => { onUnmounted(() => {
// 标记组件为已卸载
isUnmounted.value = true;
// 清理事件监听器和其他资源 // 清理事件监听器和其他资源
console.log('DockLayout component unmounted'); console.log('DockLayout component unmounted');
cleanup(); cleanup();
// 清理防抖函数 // 清理防抖函数
debouncedDetectMouseArea.cancel(); debouncedDetectMouseArea.cancel();
// 逐个移除事件监听器 // 逐个移除事件监听器
unsubscribeFunctions.value.forEach(unsubscribe => unsubscribe()); unsubscribeFunctions.value.forEach(unsubscribe => unsubscribe());
unsubscribeFunctions.value = []; unsubscribeFunctions.value = [];