diff --git a/AutoRobot/Windows/Robot/Web/src/DockLayout/DockIndicator.vue b/AutoRobot/Windows/Robot/Web/src/DockLayout/DockIndicator.vue index f55e7de..c63c556 100644 --- a/AutoRobot/Windows/Robot/Web/src/DockLayout/DockIndicator.vue +++ b/AutoRobot/Windows/Robot/Web/src/DockLayout/DockIndicator.vue @@ -176,6 +176,102 @@ d="M1 73 L64 73 L73 64 L73 1 L112 1 L112 64 L122 73 L184 73 L184 112 L122 112 L112 122 L112 184 L73 184 L73 122 L64 112 L1 112 Z" /> + + + + + + + + + + + + { // 根据不同的活动区域计算预览区域的样式 switch (activeDockZone.value) { case 'top': + case 'center-top': // 中心指示区上方指示器使用与top相同的预览区域 return { position: 'absolute', left: `${left}px`, @@ -320,6 +417,7 @@ const previewAreaStyle = computed(() => { height: `${height * threshold}px` }; case 'bottom': + case 'center-bottom': // 中心指示区下方指示器使用与bottom相同的预览区域 return { position: 'absolute', left: `${left}px`, @@ -328,6 +426,7 @@ const previewAreaStyle = computed(() => { height: `${height * threshold}px` }; case 'left': + case 'center-left': // 中心指示区左侧指示器使用与left相同的预览区域 return { position: 'absolute', left: `${left}px`, @@ -336,6 +435,7 @@ const previewAreaStyle = computed(() => { height: `${height}px` }; case 'right': + case 'center-right': // 中心指示区右侧指示器使用与right相同的预览区域 return { position: 'absolute', left: `${left + width * (1 - threshold)}px`, @@ -451,6 +551,50 @@ watch(activeDockZone, (newZone) => { z-index: 1; /* 中心指示区在下层 */ } +/* 中心指示区上方指示器:位于中心指示区上边缘,距离上边框5像素 */ +.indicator-center-top { + position: absolute; + top: 5px; + left: 50%; + transform: translateX(-50%); + opacity: 0.7; /* 默认半透明 */ + transition: opacity 0.2s; + z-index: 2; /* 确保在中心指示区上方 */ +} + +/* 中心指示区右侧指示器:位于中心指示区右边缘,距离右边框5像素 */ +.indicator-center-right { + position: absolute; + top: 50%; + right: 5px; + transform: translateY(-50%); + opacity: 0.7; /* 默认半透明 */ + transition: opacity 0.2s; + z-index: 2; /* 确保在中心指示区上方 */ +} + +/* 中心指示区下方指示器:位于中心指示区下边缘,距离下边框5像素 */ +.indicator-center-bottom { + position: absolute; + bottom: 5px; + left: 50%; + transform: translateX(-50%); + opacity: 0.7; /* 默认半透明 */ + transition: opacity 0.2s; + z-index: 2; /* 确保在中心指示区上方 */ +} + +/* 中心指示区左侧指示器:位于中心指示区左边缘,距离左边框5像素 */ +.indicator-center-left { + position: absolute; + top: 50%; + left: 5px; + transform: translateY(-50%); + opacity: 0.7; /* 默认半透明 */ + transition: opacity 0.2s; + z-index: 2; /* 确保在中心指示区上方 */ +} + /* 中心指示器:较小的图标,显示在中心指示区上层 */ .indicator-center { position: relative; @@ -480,6 +624,23 @@ watch(activeDockZone, (newZone) => { opacity: 1; /* 完全不透明 */ transform: scale(1.1); /* 只放大,不改变位置 */ } +/* 中心指示区内部指示器的活动状态样式 */ +.indicator-center-top.active { + opacity: 1; /* 完全不透明 */ + transform: translateX(-50%) scale(1.1); /* 保持水平居中的同时放大 */ +} +.indicator-center-right.active { + opacity: 1; /* 完全不透明 */ + transform: translateY(-50%) scale(1.1); /* 保持垂直居中的同时放大 */ +} +.indicator-center-bottom.active { + opacity: 1; /* 完全不透明 */ + transform: translateX(-50%) scale(1.1); /* 保持水平居中的同时放大 */ +} +.indicator-center-left.active { + opacity: 1; /* 完全不透明 */ + transform: translateY(-50%) scale(1.1); /* 保持垂直居中的同时放大 */ +} .indicator-center-area.active { opacity: 1; /* 完全不透明 */