From c4c07fdb03f20103367933b66f43ec81506355b5 Mon Sep 17 00:00:00 2001
From: zihanjian <zihanjian@bytedance.com>
Date: Sat, 7 Jun 2025 19:32:59 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=8E=A8=E8=8D=90=E4=BD=8D?=
 =?UTF-8?q?=E7=BD=AE=E5=B1=85=E4=B8=AD=E6=98=BE=E7=A4=BA=E9=80=BB=E8=BE=91?=
 =?UTF-8?q?=EF=BC=8C=E7=AE=80=E5=8C=96=E8=AE=A1=E7=AE=97=E8=BF=87=E7=A8=8B?=
 =?UTF-8?q?=EF=BC=8C=E6=8F=90=E5=8D=87=E4=BB=A3=E7=A0=81=E5=8F=AF=E8=AF=BB?=
 =?UTF-8?q?=E6=80=A7=E5=92=8C=E7=94=A8=E6=88=B7=E4=BA=A4=E4=BA=92=E4=BD=93?=
 =?UTF-8?q?=E9=AA=8C=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/focus/page.tsx | 71 ++++++++++++++++++++----------------------
 1 file changed, 33 insertions(+), 38 deletions(-)

diff --git a/src/app/focus/page.tsx b/src/app/focus/page.tsx
index f1c20ff..9a52cc9 100644
--- a/src/app/focus/page.tsx
+++ b/src/app/focus/page.tsx
@@ -264,44 +264,39 @@ export default function FocusMode() {
 
   // 处理定位到推荐位置
   const handleLocateRecommended = useCallback(() => {
-    if (focusState.recommendedCell && gridDimensions) {
-      const { row, col } = focusState.recommendedCell;
-      
-      // 计算格子大小（与FocusCanvas中的计算保持一致）
-      const cellSize = Math.max(15, Math.min(40, 300 / Math.max(gridDimensions.N, gridDimensions.M)));
-      
-      // 计算推荐格子在画布上的像素位置（格子中心）
-      const targetX = (col + 0.5) * cellSize;
-      const targetY = (row + 0.5) * cellSize;
-      
-      // 计算画布总尺寸
-      const canvasWidth = gridDimensions.N * cellSize;
-      const canvasHeight = gridDimensions.M * cellSize;
-      
-      // 假设可视区域的尺寸（减去UI元素的空间）
-      const viewportWidth = window.innerWidth;
-      const viewportHeight = window.innerHeight - 200; // 减去顶部和底部UI的高度
-      
-      // 计算需要的偏移量，使目标位置居中显示
-      // 考虑到transform: scale() translate()的顺序，offset是在缩放后应用的
-      // 我们需要让画布中心对齐到视口中心，然后再偏移到目标位置
-      const canvasCenterX = canvasWidth / 2;
-      const canvasCenterY = canvasHeight / 2;
-      
-      // 目标位置相对画布中心的偏移
-      const targetOffsetX = targetX - canvasCenterX;
-      const targetOffsetY = targetY - canvasCenterY;
-      
-      // 最终偏移量：让画布中心对齐视口中心，然后减去目标偏移
-      const offsetX = (viewportWidth / 2) / focusState.canvasScale - canvasCenterX - targetOffsetX;
-      const offsetY = (viewportHeight / 2) / focusState.canvasScale - canvasCenterY - targetOffsetY;
-      
-      setFocusState(prev => ({
-        ...prev,
-        canvasOffset: { x: offsetX, y: offsetY }
-      }));
-    }
-  }, [focusState.recommendedCell, focusState.canvasScale, gridDimensions]);
+    if (!focusState.recommendedCell || !gridDimensions) return;
+    
+    const { row, col } = focusState.recommendedCell;
+    
+    // 计算格子大小（与FocusCanvas中的计算保持一致）
+    const cellSize = Math.max(15, Math.min(40, 300 / Math.max(gridDimensions.N, gridDimensions.M)));
+    
+    // 计算目标格子在画布上的中心位置（像素坐标）
+    const targetX = (col + 0.5) * cellSize;
+    const targetY = (row + 0.5) * cellSize;
+    
+    // 计算画布总尺寸
+    const canvasWidth = gridDimensions.N * cellSize;
+    const canvasHeight = gridDimensions.M * cellSize;
+    
+    // 简单的定位逻辑：
+    // 1. 将目标位置移到画布的中心位置
+    // 2. 考虑缩放的影响
+    
+    // 画布中心位置
+    const canvasCenterX = canvasWidth / 2;
+    const canvasCenterY = canvasHeight / 2;
+    
+    // 计算从目标位置到画布中心的偏移量
+    const offsetX = canvasCenterX - targetX;
+    const offsetY = canvasCenterY - targetY;
+    
+    // 更新状态
+    setFocusState(prev => ({
+      ...prev,
+      canvasOffset: { x: offsetX, y: offsetY }
+    }));
+  }, [focusState.recommendedCell, gridDimensions]);
 
   if (!mappedPixelData || !gridDimensions) {
     return (