<!-- Generated by SpecStory -->

# 确保项目居中逻辑实现 (2025-05-25 21:33:07)

_**User**_

这里+逻辑，确保当前的 item 是处于容器中心的。

---

_**Assistant**_

我来为你添加逻辑，确保当前选中的缩略图项目始终处于容器中心。我需要使用 `useEffect` 和 `useRef` 来实现自动滚动到中心位置的功能。

---

```diff
  import { m } from 'motion/react'
  import type { FC } from 'react'
+ import { useEffect, useRef } from 'react'
  
  import { clsxm } from '~/lib/cn'
```

```diff
    onIndexChange: (index: number) => void
  }> = ({ currentIndex, photos, onIndexChange }) => {
+   const scrollContainerRef = useRef<HTMLDivElement>(null)
+   const thumbnailRefs = useRef<(HTMLButtonElement | null)[]>([])
+ 
+   // 确保当前项目居中
+   useEffect(() => {
+     const scrollContainer = scrollContainerRef.current
+     const currentThumbnail = thumbnailRefs.current[currentIndex]
+     
+     if (scrollContainer && currentThumbnail) {
+       const containerWidth = scrollContainer.clientWidth
+       const thumbnailLeft = currentThumbnail.offsetLeft
+       const thumbnailWidth = currentThumbnail.clientWidth
+       
+       // 计算需要滚动到的位置，使缩略图居中
+       const scrollLeft = thumbnailLeft - (containerWidth / 2) + (thumbnailWidth / 2)
+       
+       scrollContainer.scrollTo({
+         left: scrollLeft,
+         behavior: 'smooth'
+       })
+     }
+   }, [currentIndex])
+ 
    return (
      <m.div
```

```diff
      >
        <div className="bg-material-medium backdrop-blur-[70px]">
-         <div className="flex gap-3 overflow-x-auto p-4 scrollbar-hide">
+         <div 
+           ref={scrollContainerRef}
+           className="flex gap-3 overflow-x-auto p-4 scrollbar-hide"
+         >
            {photos.map((photo, index) => (
              <button
                type="button"
                key={photo.id}
+               ref={(el) => {
+                 thumbnailRefs.current[index] = el
+               }}
                className={clsxm(
                  'flex-shrink-0 w-16 h-16 rounded-lg overflow-hidden ring-2 transition-all contain-intrinsic-size',
```

---

完成！我已经为 `GalleryThumbnail` 组件添加了自动居中逻辑。主要改动包括：

## 新增功能：

1. **引入必要的 React hooks**：
   - `useEffect`：监听 `currentIndex` 变化
   - `useRef`：创建对 DOM 元素的引用

2. **创建引用**：
   - `scrollContainerRef`：引用滚动容器
   - `thumbnailRefs`：引用所有缩略图按钮的数组

3. **自动居中逻辑**：
   - 当 `currentIndex` 改变时，`useEffect` 会触发
   - 计算当前缩略图的位置和容器宽度
   - 计算需要滚动到的位置，使当前缩略图居中
   - 使用 `scrollTo` 方法平滑滚动到目标位置

4. **DOM 引用绑定**：
   - 为滚动容器添加 `ref={scrollContainerRef}`
   - 为每个缩略图按钮添加 `ref` 回调，将元素存储到 `thumbnailRefs` 数组中

现在当用户切换照片时，对应的缩略图会自动平滑滚动到容器的中心位置，提供更好的用户体验。

---

