调整DockIndicator上区指示器位置,将其移至中心区域容器内部并设置正确的相对定位

This commit is contained in:
zqm
2025-11-14 08:40:25 +08:00
parent 2a6906ae06
commit 0bc966d9d0
2 changed files with 24 additions and 24 deletions

View File

@@ -243,6 +243,27 @@
<!-- 中心区域容器包装中心指示区和中心指示器 --> <!-- 中心区域容器包装中心指示区和中心指示器 -->
<div class="center-dock-container"> <div class="center-dock-container">
<!-- 中心指示区一直可见 -->
<svg
width="215"
height="215"
viewBox="0 0 215 215"
aria-hidden="true"
class="indicator-center-area"
:class="{ 'active': activeDockZone === 'center' }"
>
<path
fill="#636873"
fill-rule="evenodd"
clip-rule="evenodd"
d="M0 67 L58 67 L67 58 L67 0 L118 0 L118 58 L128 67 L185 67 L185 118 L128 118 L118 128 L118 185 L67 185 L67 128 L58 118 L0 118 Z" />
<path
fill="#D5DCF0"
fill-rule="evenodd"
clip-rule="evenodd"
d="M1 68 L59 68 L68 59 L68 1 L117 1 L117 59 L127 68 L184 68 L184 117 L127 117 L117 127 L117 184 L68 184 L68 127 L59 117 L1 117 Z" />
</svg>
<!-- 上区指示 --> <!-- 上区指示 -->
<svg <svg
width="41" width="41"
@@ -269,27 +290,6 @@
clip-rule="evenodd" clip-rule="evenodd"
d="M10 21 L30 21 L30 30 L10 30 Z" /> d="M10 21 L30 21 L30 30 L10 30 Z" />
</svg> </svg>
<!-- 中心指示区一直可见 -->
<svg
width="185"
height="185"
viewBox="0 0 185 185"
aria-hidden="true"
class="indicator-center-area"
:class="{ 'active': activeDockZone === 'center' }"
>
<path
fill="#636873"
fill-rule="evenodd"
clip-rule="evenodd"
d="M0 67 L58 67 L67 58 L67 0 L118 0 L118 58 L128 67 L185 67 L185 118 L128 118 L118 128 L118 185 L67 185 L67 128 L58 118 L0 118 Z" />
<path
fill="#D5DCF0"
fill-rule="evenodd"
clip-rule="evenodd"
d="M1 68 L59 68 L68 59 L68 1 L117 1 L117 59 L127 68 L184 68 L184 117 L127 117 L117 127 L117 184 L68 184 L68 127 L59 117 L1 117 Z" />
</svg>
<!-- 中心指示区上方指示器位于中心指示区上边缘距离上边框5像素 --> <!-- 中心指示区上方指示器位于中心指示区上边缘距离上边框5像素 -->
<svg <svg
width="41" width="41"
@@ -646,8 +646,8 @@ watch(activeDockZone, (newZone) => {
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
z-index: 9999; /* 确保在预览区域上方 */ z-index: 9999; /* 确保在预览区域上方 */
width: 185px; width: 215px;
height: 185px; height: 215px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;

View File

@@ -3,7 +3,7 @@
<!-- 停靠指示器组件 - 设置高z-index确保显示在最顶层 --> <!-- 停靠指示器组件 - 设置高z-index确保显示在最顶层 -->
<!-- :visible="showDockIndicator" :visible="true" --> <!-- :visible="showDockIndicator" :visible="true" -->
<DockIndicator <DockIndicator
:visible="showDockIndicator" :visible="true"
:target-rect="targetAreaRect" :target-rect="targetAreaRect"
:mouse-position="currentMousePosition" :mouse-position="currentMousePosition"
@zone-active="onDockZoneActive" @zone-active="onDockZoneActive"