ZengQingming/JoyD
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修复停靠指示器定位问题：调整所有指示器与容器边缘保持5像素距离

Browse Source
This commit is contained in:
zqm
2025-11-13 10:50:22 +08:00
parent 9b4746dcbe
commit 29c4e75819
2 changed files with 239 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

221
AutoRobot/Windows/Robot/Web/src/DockLayout/DockIndicator.vue
View File

@@ -1,6 +1,5 @@
<template>
<div v-if="visible" class="dock-indicator" :style="indicatorStyle">
<!-- 停靠指示器已移除 -->
<!-- 1. 定义可复用组件（symbol）：封装所有渐变和路径（只写一次） -->
<svg width="0" height="0" viewBox="0 0 40 40" aria-hidden="true">
<defs>
@@ -51,36 +50,60 @@
d="M16 30 L20 26 L23 30 Z" />
</symbol>
</svg>
<!-- 2. 第一个 SVG：不旋转，直接调用共用组件 -->
<svg width="41" height="41" viewBox="0 0 40 40" aria-hidden="true">
<!-- 上指示：根据activeDockZone状态显示和高亮 -->
<svg
width="41"
height="41"
viewBox="0 0 40 40"
aria-hidden="true"
class="indicator-top"
:class="{ 'active': activeDockZone === 'top' }"
>
<use xlink:href="#shared-icon" />
<path
fill="#4C5E83"
fill-rule="evenodd"
clip-rule="evenodd"
d="M8 8 L32 8 L32 20 L31 21 L9 21 L8 20 Z" />
<path
fill="url(#Area)"
fill-rule="evenodd"
clip-rule="evenodd"
d="M10 13 L30 13 L30 19 L10 19 Z" />
<path
fill="#4C5E83"
fill-rule="evenodd"
clip-rule="evenodd"
d="M8 8 L32 8 L32 20 L31 21 L9 21 L8 20 Z" />
<path
fill="url(#Area)"
fill-rule="evenodd"
clip-rule="evenodd"
d="M10 13 L30 13 L30 19 L10 19 Z" />
</svg>
<!-- 3. 第二个 SVG：旋转90度，调用同一共用组件 -->
<svg width="41" height="41" viewBox="0 0 40 40" aria-hidden="true">
<!-- 右指示：根据activeDockZone状态显示和高亮 -->
<svg
width="41"
height="41"
viewBox="0 0 40 40"
aria-hidden="true"
class="indicator-right"
:class="{ 'active': activeDockZone === 'right' }"
>
<use xlink:href="#shared-icon" transform="rotate(90 20 20)" />
<path
fill="#4C5E83"
fill-rule="evenodd"
clip-rule="evenodd"
d="M19 8 L32 8 L32 31 L31 32 L20 32 L19 31 Z" />
<path
fill="url(#Area)"
fill-rule="evenodd"
clip-rule="evenodd"
d="M21 14 L30 14 L30 30 L21 30 Z" />
<path
fill="#4C5E83"
fill-rule="evenodd"
clip-rule="evenodd"
d="M19 8 L32 8 L32 31 L31 32 L20 32 L19 31 Z" />
<path
fill="url(#Area)"
fill-rule="evenodd"
clip-rule="evenodd"
d="M21 14 L30 14 L30 30 L21 30 Z" />
</svg>
<!-- 4. 第三个 SVG：旋转180度，调用同一共用组件 -->
<svg width="41" height="41" viewBox="0 0 40 40" aria-hidden="true">
<!-- 下指示：根据activeDockZone状态显示和高亮 -->
<svg
width="41"
height="41"
viewBox="0 0 40 40"
aria-hidden="true"
class="indicator-bottom"
:class="{ 'active': activeDockZone === 'bottom' }"
>
<use xlink:href="#shared-icon" transform="rotate(180 20 20)" />
<path
fill="#4C5E83"
@@ -93,8 +116,16 @@
clip-rule="evenodd"
d="M10 24 L30 24 L30 30 L10 30 Z" />
</svg>
<!-- 5. 第四个 SVG：旋转270度，调用同一共用组件 -->
<svg width="41" height="41" viewBox="0 0 40 40" aria-hidden="true">
<!-- 左指示：根据activeDockZone状态显示和高亮 -->
<svg
width="41"
height="41"
viewBox="0 0 40 40"
aria-hidden="true"
class="indicator-left"
:class="{ 'active': activeDockZone === 'left' }"
>
<use xlink:href="#shared-icon" transform="rotate(270 20 20)" />
<path
fill="#4C5E83"
@@ -107,9 +138,17 @@
clip-rule="evenodd"
d="M10 14 L19 14 L19 30 L10 30 Z" />
</svg>
<!-- 6. 第五个 SVG：正中的按钮，调用同一共用组件 -->
<svg width="41" height="41" viewBox="0 0 40 40" aria-hidden="true">
<use xlink:href="#shared-border" transform="rotate(270 20 20)" />
<!-- 中心指示器：根据activeDockZone状态显示和高亮 -->
<svg
width="41"
height="41"
viewBox="0 0 40 40"
aria-hidden="true"
class="indicator-center"
:class="{ 'active': activeDockZone === 'center' }"
>
<use xlink:href="#shared-border" />
<path
fill="#4C5E83"
fill-rule="evenodd"
@@ -125,7 +164,7 @@
</template>
<script setup>
import { computed } from 'vue'
import { computed, watch, ref } from 'vue'
// Props定义
const props = defineProps({
@@ -143,6 +182,14 @@ const props = defineProps({
width: 0,
height: 0
})
},
// 鼠标位置
mousePosition: {
type: Object,
default: () => ({
x: 0,
y: 0
})
}
})
@@ -158,6 +205,53 @@ const indicatorStyle = computed(() => {
zIndex: 9999
}
})
// 计算活动的停靠区域
const activeDockZone = computed(() => {
if (!props.visible) return null
// 计算各个区域的位置和大小
const { left, top, width, height } = props.targetRect
const { x, y } = props.mousePosition
// 计算相对位置
const relativeX = x - left
const relativeY = y - top
// 定义区域的阈值（25%）
const threshold = 0.25
// 判断是否在顶部区域
if (relativeY < height * threshold) {
return 'top'
}
// 判断是否在底部区域
if (relativeY > height * (1 - threshold)) {
return 'bottom'
}
// 判断是否在左侧区域
if (relativeX < width * threshold) {
return 'left'
}
// 判断是否在右侧区域
if (relativeX > width * (1 - threshold)) {
return 'right'
}
// 默认在中心区域
return 'center'
})
// 定义事件
const emit = defineEmits(['zone-active'])
// 监听activeDockZone变化，触发事件
watch(activeDockZone, (newZone) => {
emit('zone-active', newZone)
})
</script>
<style scoped>
@@ -165,4 +259,65 @@ const indicatorStyle = computed(() => {
position: absolute;
box-sizing: border-box;
}
/* 上指示器：定位在目标区域的顶端中间，上边缘距dock-layout上边缘5像素 */
.indicator-top {
position: absolute;
top: 5px;
left: 50%;
transform: translateX(-50%);
opacity: 0.7; /* 默认半透明 */
transition: opacity 0.2s;
}
/* 右指示器：定位在目标区域的右侧中间，右边缘距dock-layout右边缘5像素 */
.indicator-right {
position: absolute;
top: 50%;
right: 5px;
transform: translateY(-50%);
opacity: 0.7; /* 默认半透明 */
transition: opacity 0.2s;
}
/* 下指示器：定位在目标区域的底部中间，下边缘距dock-layout下边缘5像素 */
.indicator-bottom {
position: absolute;
bottom: 5px;
left: 50%;
transform: translateX(-50%);
opacity: 0.7; /* 默认半透明 */
transition: opacity 0.2s;
}
/* 左指示器：定位在目标区域的左侧中间，左边缘距dock-layout左边缘5像素 */
.indicator-left {
position: absolute;
top: 50%;
left: 5px;
transform: translateY(-50%);
opacity: 0.7; /* 默认半透明 */
transition: opacity 0.2s;
}
/* 中心指示器：定位在目标区域的中心 */
.indicator-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0.7; /* 默认半透明 */
transition: opacity 0.2s;
}
/* 活动状态样式 */
.indicator-top.active,
.indicator-right.active,
.indicator-bottom.active,
.indicator-left.active,
.indicator-center.active {
opacity: 1; /* 完全不透明 */
transform: scale(1.1); /* 稍微放大 */
transition: all 0.2s;
}
</style>