From 47ca55dd42b7d5ac6248ccca279b11b9b13671f2 Mon Sep 17 00:00:00 2001
From: zqm <zqm@example.com>
Date: Thu, 13 Nov 2025 10:58:25 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=8B=96=E6=8B=BD=E6=8C=87?=
 =?UTF-8?q?=E7=A4=BA=E5=8C=BA=E5=9F=9F=E5=8D=8A=E9=80=8F=E6=98=8E=E9=A2=84?=
 =?UTF-8?q?=E8=A7=88=E6=A1=86=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Web/src/DockLayout/DockIndicator.vue      | 69 +++++++++++++++++++
 1 file changed, 69 insertions(+)

diff --git a/AutoRobot/Windows/Robot/Web/src/DockLayout/DockIndicator.vue b/AutoRobot/Windows/Robot/Web/src/DockLayout/DockIndicator.vue
index 8b403b2..1e410c1 100644
--- a/AutoRobot/Windows/Robot/Web/src/DockLayout/DockIndicator.vue
+++ b/AutoRobot/Windows/Robot/Web/src/DockLayout/DockIndicator.vue
@@ -1,5 +1,11 @@
 <template>
   <div v-if="visible" class="dock-indicator" :style="indicatorStyle">
+    <!-- 半透明区域框：根据活动区域显示 -->
+    <div 
+      v-if="activeDockZone" 
+      class="dock-preview-area" 
+      :style="previewAreaStyle"
+    ></div>
     <!-- 1. 定义可复用组件（symbol）：封装所有渐变和路径（只写一次） -->
     <svg width="0" height="0" viewBox="0 0 40 40" aria-hidden="true">
       <defs>
@@ -245,6 +251,60 @@ const activeDockZone = computed(() => {
   return 'center'
 })
 
+// 计算半透明区域框的样式
+const previewAreaStyle = computed(() => {
+  if (!activeDockZone.value) return {};
+  
+  const { left, top, width, height } = props.targetRect;
+  const threshold = 0.25;
+  
+  // 根据不同的活动区域计算预览区域的样式
+  switch (activeDockZone.value) {
+    case 'top':
+      return {
+        position: 'absolute',
+        left: `${left}px`,
+        top: `${top}px`,
+        width: `${width}px`,
+        height: `${height * threshold}px`
+      };
+    case 'bottom':
+      return {
+        position: 'absolute',
+        left: `${left}px`,
+        top: `${top + height * (1 - threshold)}px`,
+        width: `${width}px`,
+        height: `${height * threshold}px`
+      };
+    case 'left':
+      return {
+        position: 'absolute',
+        left: `${left}px`,
+        top: `${top}px`,
+        width: `${width * threshold}px`,
+        height: `${height}px`
+      };
+    case 'right':
+      return {
+        position: 'absolute',
+        left: `${left + width * (1 - threshold)}px`,
+        top: `${top}px`,
+        width: `${width * threshold}px`,
+        height: `${height}px`
+      };
+    case 'center':
+      return {
+        position: 'absolute',
+        left: `${left + width * threshold}px`,
+        top: `${top + height * threshold}px`,
+        width: `${width * (1 - 2 * threshold)}px`,
+        height: `${height * (1 - 2 * threshold)}px`
+      };
+    default:
+      return {};
+  }
+})
+
 // 定义事件
 const emit = defineEmits(['zone-active'])
 
@@ -260,6 +320,15 @@ watch(activeDockZone, (newZone) => {
   box-sizing: border-box;
 }
 
+/* 半透明区域框样式 */
+.dock-preview-area {
+  background-color: rgba(161, 169, 196, 0.3); /* 半透明背景 */
+  border: 2px dashed #61697E; /* 虚线边框 */
+  box-sizing: border-box;
+  z-index: 9998; /* 确保在指示器下方 */
+  transition: all 0.2s ease; /* 平滑过渡效果 */
+}
+
 /* 上指示器：定位在目标区域的顶端中间，上边缘距dock-layout上边缘5像素 */
 .indicator-top {
   position: absolute;