From 64783e018ffa9bb99b4e21df76de9b91138de2ce Mon Sep 17 00:00:00 2001
From: bridge <wangxin4qiao@163.com>
Date: Mon, 26 Jan 2026 23:22:14 +0800
Subject: [PATCH] fix: map location

---
 web/src/App.vue                        |  1 +
 web/src/components/game/GameCanvas.vue |  5 +++++
 web/src/components/game/Viewport.vue   | 11 ++++++++++-
 3 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/web/src/App.vue b/web/src/App.vue
index 41cc203..ac2a595 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -246,6 +246,7 @@ onUnmounted(() => {
             </div>
 
             <GameCanvas
+              :sidebar-width="sidebarWidth"
               @avatarSelected="handleSelection"
               @regionSelected="handleSelection"
             />
diff --git a/web/src/components/game/GameCanvas.vue b/web/src/components/game/GameCanvas.vue
index c6ccf3c..6e5e716 100644
--- a/web/src/components/game/GameCanvas.vue
+++ b/web/src/components/game/GameCanvas.vue
@@ -18,6 +18,10 @@ const { loadBaseTextures, isLoaded } = useTextures()
 
 const mapSize = ref({ width: 2000, height: 2000 })
 
+defineProps<{
+  sidebarWidth?: number
+}>()
+
 const emit = defineEmits<{
   (e: 'avatarSelected', payload: { type: 'avatar'; id: string; name?: string }): void
   (e: 'regionSelected', payload: { type: 'region'; id: string; name?: string }): void
@@ -64,6 +68,7 @@ onMounted(() => {
         :screen-height="height"
         :world-width="mapSize.width"
         :world-height="mapSize.height"
+        :padding-right="sidebarWidth"
       >
         <!-- 
           注意：之前使用的 store.worldVersion 已移除。
diff --git a/web/src/components/game/Viewport.vue b/web/src/components/game/Viewport.vue
index e7a2e11..b659b71 100644
--- a/web/src/components/game/Viewport.vue
+++ b/web/src/components/game/Viewport.vue
@@ -9,6 +9,7 @@ const props = defineProps<{
   screenHeight: number
   worldWidth: number
   worldHeight: number
+  paddingRight?: number
 }>()
 
 const app = useApplication()
@@ -51,7 +52,8 @@ function fitMap() {
     if (worldWidth < 100) return 
 
     // 1. 先计算新的缩放限制
-    const fitScale = Math.min(props.screenWidth / worldWidth, props.screenHeight / worldHeight)
+    const availWidth = props.screenWidth - (props.paddingRight || 0)
+    const fitScale = Math.min(availWidth / worldWidth, props.screenHeight / worldHeight)
     
     // 2. 重要：在 fit() 之前先设置新的 clampZoom，或者先暂时移除旧的限制
     // 这里我们直接设置新的宽松限制
@@ -64,6 +66,13 @@ function fitMap() {
     viewport.fit(true, worldWidth, worldHeight)
     viewport.moveCenter(worldWidth / 2, worldHeight / 2)
     
+    // 修正偏移：将地图向左平移，以抵消 Sidebar 的占用
+    // 屏幕中心在 screenWidth/2，我们希望视觉中心在 (screenWidth - padding)/2
+    // 偏移量 = padding / 2
+    if (props.paddingRight) {
+        viewport.x -= props.paddingRight / 2
+    }
+    
     // 5. 如果当前缩放比预期的还要大（虽然 fit 应该已经处理了，但双保险），强制设置
     if (viewport.scaled > fitScale * 1.1) { // 允许一点误差
        viewport.setZoom(fitScale)