From 8630e9ff7f4b9fa5b7296d472b2ea62a1f89fb57 Mon Sep 17 00:00:00 2001
From: zihanjian <zihanjian@bytedance.com>
Date: Fri, 6 Jun 2025 19:02:20 +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=E8=AE=A1=E7=AE=97=E7=94=BB=E5=B8=83=E5=81=8F=E7=A7=BB?=
 =?UTF-8?q?=E9=87=8F=E4=BB=A5=E6=8F=90=E5=8D=87=E7=94=A8=E6=88=B7=E4=BA=A4?=
 =?UTF-8?q?=E4=BA=92=E4=BD=93=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 | 38 +++++++++++++++++++++++++++++++++-----
 1 file changed, 33 insertions(+), 5 deletions(-)

diff --git a/src/app/focus/page.tsx b/src/app/focus/page.tsx
index c27d4b2..f1c20ff 100644
--- a/src/app/focus/page.tsx
+++ b/src/app/focus/page.tsx
@@ -264,16 +264,44 @@ export default function FocusMode() {
 
   // 处理定位到推荐位置
   const handleLocateRecommended = useCallback(() => {
-    if (focusState.recommendedCell) {
-      // 计算需要的偏移量使推荐格子居中
+    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: -col * 20, y: -row * 20 } // 假设每个格子20px
+        canvasOffset: { x: offsetX, y: offsetY }
       }));
     }
-  }, [focusState.recommendedCell]);
+  }, [focusState.recommendedCell, focusState.canvasScale, gridDimensions]);
 
   if (!mappedPixelData || !gridDimensions) {
     return (