From ea99a31248a43ea07876932291159c677e05d6f1 Mon Sep 17 00:00:00 2001
From: hanxuanyu <2252193204@qq.com>
Date: Thu, 29 Jan 2026 12:37:15 +0800
Subject: [PATCH] =?UTF-8?q?=E9=99=90=E5=88=B6=E6=97=A5=E5=8E=86=E9=9D=A2?=
 =?UTF-8?q?=E6=9D=BF=E5=9C=A8=E5=9B=BE=E7=89=87=E6=98=BE=E7=A4=BA=E5=8C=BA?=
 =?UTF-8?q?=E5=9F=9F=E5=86=85=E6=8B=96=E5=8A=A8=EF=BC=8C=E5=B9=B6=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E5=88=9D=E5=A7=8B=E4=BD=8D=E7=BD=AE=E8=AE=A1=E7=AE=97?=
 =?UTF-8?q?=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/ui/calendar/Calendar.vue   | 75 ++++++++++++++-----
 1 file changed, 58 insertions(+), 17 deletions(-)

diff --git a/webapp/src/components/ui/calendar/Calendar.vue b/webapp/src/components/ui/calendar/Calendar.vue
index a5c7279..f34eeb8 100644
--- a/webapp/src/components/ui/calendar/Calendar.vue
+++ b/webapp/src/components/ui/calendar/Calendar.vue
@@ -229,28 +229,65 @@ const panelPos = ref({ x: 0, y: 0 })
 const isDragging = ref(false)
 const dragStart = ref({ x: 0, y: 0 })
 
-// 初始化面板位置（移动端居中，桌面端右上角）
+// 计算图片实际显示区域（与ImageView保持一致）
+const getImageDisplayBounds = () => {
+  const windowWidth = window.innerWidth
+  const windowHeight = window.innerHeight
+  
+  // 必应图片通常是16:9或类似宽高比
+  const imageAspectRatio = 16 / 9
+  const windowAspectRatio = windowWidth / windowHeight
+  
+  let displayWidth: number
+  let displayHeight: number
+  let offsetX: number
+  let offsetY: number
+  
+  if (windowAspectRatio > imageAspectRatio) {
+    // 窗口更宽，图片上下占满，左右留黑边
+    displayHeight = windowHeight
+    displayWidth = displayHeight * imageAspectRatio
+    offsetX = (windowWidth - displayWidth) / 2
+    offsetY = 0
+  } else {
+    // 窗口更高，图片左右占满，上下留黑边
+    displayWidth = windowWidth
+    displayHeight = displayWidth / imageAspectRatio
+    offsetX = 0
+    offsetY = (windowHeight - displayHeight) / 2
+  }
+  
+  return {
+    left: offsetX,
+    top: offsetY,
+    right: offsetX + displayWidth,
+    bottom: offsetY + displayHeight,
+    width: displayWidth,
+    height: displayHeight
+  }
+}
+
+// 初始化面板位置（移动端居中，桌面端右上角，限制在图片显示区域内）
 const initPanelPosition = () => {
   if (typeof window !== 'undefined') {
-    const windowWidth = window.innerWidth
-    const windowHeight = window.innerHeight
-    const isMobile = windowWidth < 640 // sm breakpoint
+    const bounds = getImageDisplayBounds()
+    const isMobile = window.innerWidth < 640 // sm breakpoint
     
     if (isMobile) {
-      // 移动端：居中显示
-      const panelWidth = windowWidth - 16 // 左右各8px边距
+      // 移动端：在图片区域内居中显示
+      const panelWidth = Math.min(bounds.width - 16, window.innerWidth - 16)
       const panelHeight = 580 // 估计高度
       panelPos.value = {
-        x: 8,
-        y: Math.max(8, (windowHeight - panelHeight) / 2)
+        x: Math.max(bounds.left, bounds.left + (bounds.width - panelWidth) / 2),
+        y: Math.max(bounds.top + 8, bounds.top + (bounds.height - panelHeight) / 2)
       }
     } else {
-      // 桌面端：右上角
-      const panelWidth = Math.min(420, windowWidth * 0.9)
+      // 桌面端：在图片区域右上角
+      const panelWidth = Math.min(420, bounds.width * 0.9)
       const panelHeight = 600
       panelPos.value = {
-        x: windowWidth - panelWidth - 40,
-        y: Math.min(80, (windowHeight - panelHeight) / 2)
+        x: bounds.right - panelWidth - 40,
+        y: Math.max(bounds.top + 80, bounds.top + (bounds.height - panelHeight) / 2)
       }
     }
   }
@@ -398,15 +435,19 @@ const onDrag = (e: MouseEvent | TouchEvent) => {
   const newX = clientX - dragStart.value.x
   const newY = clientY - dragStart.value.y
   
-  // 限制在视口内
+  // 限制在图片实际显示区域内
   if (calendarPanel.value) {
     const rect = calendarPanel.value.getBoundingClientRect()
-    const maxX = window.innerWidth - rect.width
-    const maxY = window.innerHeight - rect.height
+    const bounds = getImageDisplayBounds()
+    
+    const minX = bounds.left
+    const maxX = bounds.right - rect.width
+    const minY = bounds.top
+    const maxY = bounds.bottom - rect.height
     
     panelPos.value = {
-      x: Math.max(0, Math.min(newX, maxX)),
-      y: Math.max(0, Math.min(newY, maxY))
+      x: Math.max(minX, Math.min(newX, maxX)),
+      y: Math.max(minY, Math.min(newY, maxY))
     }
   }
 }