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

This commit is contained in:
zqm
2025-11-13 17:08:21 +08:00
parent 05a7972ddf
commit 2a6906ae06
2 changed files with 41 additions and 27 deletions

View File

@@ -65,31 +65,7 @@
</symbol>
</svg>
<!-- 上区指示 -->
<svg
width="41"
height="41"
viewBox="0 0 40 40"
aria-hidden="false"
>
<use xlink:href="#shared-area" />
<path
fill="url(#Area)"
fill-rule="evenodd"
clip-rule="evenodd"
d="M10 13 L30 13 L30 20 L10 20 Z" />
<path
d="M10 20 L30 20"
stroke="#4C5E83"
stroke-dasharray="2,2"
stroke-width="1"
fill="none" />
<path
fill="#F0F2F6"
fill-rule="evenodd"
clip-rule="evenodd"
d="M10 21 L30 21 L30 30 L10 30 Z" />
</svg>
<!-- 右区指示 -->
<svg
@@ -267,6 +243,32 @@
<!-- 中心区域容器包装中心指示区和中心指示器 -->
<div class="center-dock-container">
<!-- 上区指示 -->
<svg
width="41"
height="41"
viewBox="0 0 40 40"
aria-hidden="false"
class="dock-top-area"
>
<use xlink:href="#shared-area" />
<path
fill="url(#Area)"
fill-rule="evenodd"
clip-rule="evenodd"
d="M10 13 L30 13 L30 20 L10 20 Z" />
<path
d="M10 20 L30 20"
stroke="#4C5E83"
stroke-dasharray="2,2"
stroke-width="1"
fill="none" />
<path
fill="#F0F2F6"
fill-rule="evenodd"
clip-rule="evenodd"
d="M10 21 L30 21 L30 30 L10 30 Z" />
</svg>
<!-- 中心指示区一直可见 -->
<svg
width="185"
@@ -280,12 +282,12 @@
fill="#636873"
fill-rule="evenodd"
clip-rule="evenodd"
d="M0 72 L63 72 L72 63 L72 0 L113 0 L113 63 L123 72 L185 72 L185 113 L123 113 L113 123 L113 185 L72 185 L72 123 L63 113 L0 113 Z" />
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 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" />
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像素 -->
@@ -663,6 +665,17 @@ watch(activeDockZone, (newZone) => {
z-index: 1; /* 中心指示区在下层 */
}
/* 上区指示器位于中心指示区上方指示器的上方4个像素处 */
.dock-top-area {
position: absolute;
top: -45px; /* 向上偏移确保距离中心指示区上方指示器上边缘4个像素 */
left: 50%;
transform: translateX(-50%);
opacity: 0.7; /* 默认半透明 */
transition: opacity 0.2s;
z-index: 2; /* 确保在中心指示区上方 */
}
/* 中心指示区上方指示器位于中心指示区上边缘距离上边框5像素 */
.indicator-center-top {
position: absolute;

View File

@@ -1,6 +1,7 @@
<template>
<div class="dock-layout" ref="dockLayoutRef" style="display: flex; flex-direction: column; position: relative;">
<!-- 停靠指示器组件 - 设置高z-index确保显示在最顶层 -->
<!-- :visible="showDockIndicator" :visible="true" -->
<DockIndicator
:visible="showDockIndicator"
:target-rect="targetAreaRect"