<!-- Generated by SpecStory -->

# Replace Scroll Container with ScrollArea (2025-05-28 15:35:11)

_**User**_

这个 scroll container 换成用 @ScrollArea.tsx 

---

_**Assistant**_

我来帮您将 ExifPanel 组件中的滚动容器替换为使用 ScrollArea 组件。

---

```diff
  } from '~/icons'
  import type { PhotoManifest } from '~/types/photo'
+ import { ScrollArea } from '~/components/ui/ScrollArea'
  
  export const ExifPanel: FC<{
```

```diff
            ? 'fixed bottom-0 left-0 right-0 max-h-[60vh] w-full rounded-t-2xl exif-panel-mobile'
            : 'w-80 shrink-0'
-       } bg-material-medium p-4 text-white overflow-y-auto z-10 backdrop-blur-3xl`}
+       } bg-material-medium text-white z-10 backdrop-blur-3xl`}
        initial={{
          opacity: 0,
```

```diff
        transition={{ duration: 0.3 }}
      >
-       <div className="flex items-center justify-between mb-4">
+       <div className="flex items-center justify-between mb-4 p-4 pb-0">
          <h3 className={`${isMobile ? 'text-base' : 'text-lg'} font-semibold`}>
            图片信息
```

```diff
          )}
        </div>
-       {/* space-y-3 space-y-4 */}
-       <div className={`space-y-${isMobile ? '3' : '4'}`}>
-         <div>
-           <h4 className="text-sm font-medium text-white/80 mb-2">基本信息</h4>
-           <div className="space-y-1 text-sm">
-             <Row label="文件名" value={currentPhoto.title} />
-             <Row
-               label="尺寸"
-               value={`${currentPhoto.width} × ${currentPhoto.height}`}
-             />
-             <Row
-               label="文件大小"
-               value={`${(currentPhoto.size / 1024 / 1024).toFixed(1)}MB`}
-             />
-             {formattedExifData?.megaPixels && (
-               <Row
-                 label="像素"
-                 value={`${Math.floor(
-                   Number.parseFloat(formattedExifData.megaPixels),
-                 )} MP`}
-               />
-             )}
-             {formattedExifData?.colorSpace && (
-               <Row label="色彩空间" value={formattedExifData.colorSpace} />
-             )}
+       
+       <ScrollArea 
+         rootClassName="flex-1"
+         viewportClassName="px-4 pb-4"
+       >
+         <div className={`space-y-${isMobile ? '3' : '4'}`}>
+           <div>
+             <h4 className="text-sm font-medium text-white/80 mb-2">基本信息</h4>
+             <div className="space-y-1 text-sm">
+               <Row label="文件名" value={currentPhoto.title} />
+               <Row
+                 label="尺寸"
+                 value={`${currentPhoto.width} × ${currentPhoto.height}`}
+               />
+               <Row
+                 label="文件大小"
+                 value={`${(currentPhoto.size / 1024 / 1024).toFixed(1)}MB`}
+               />
+               {formattedExifData?.megaPixels && (
+                 <Row
+                   label="像素"
+                   value={`${Math.floor(
+                     Number.parseFloat(formattedExifData.megaPixels),
+                   )} MP`}
+                 />
+               )}
+               {formattedExifData?.colorSpace && (
+                 <Row label="色彩空间" value={formattedExifData.colorSpace} />
+               )}
  
-             {formattedExifData?.dateTime && (
-               <Row label="拍摄时间" value={formattedExifData.dateTime} />
-             )}
-           </div>
-         </div>
+               {formattedExifData?.dateTime && (
+                 <Row label="拍摄时间" value={formattedExifData.dateTime} />
+               )}
+             </div>
+           </div>
  
-         {formattedExifData && (
-           <Fragment>
-             {(formattedExifData.camera || formattedExifData.lens) && (
-               <div>
-                 <h4 className="text-sm font-medium text-white/80 my-2">
-                   设备信息
-                 </h4>
-                 <div className="space-y-1 text-sm">
-                   {formattedExifData.camera && (
-                     <Row label="相机" value={formattedExifData.camera} />
-                   )}
-                   {formattedExifData.lens && (
-                     <Row label="镜头" value={formattedExifData.lens} />
-                   )}
+           {formattedExifData && (
+             <Fragment>
+               {(formattedExifData.camera || formattedExifData.lens) && (
+                 <div>
+                   <h4 className="text-sm font-medium text-white/80 my-2">
+                     设备信息
+                   </h4>
+                   <div className="space-y-1 text-sm">
+                     {formattedExifData.camera && (
+                       <Row label="相机" value={formattedExifData.camera} />
+                     )}
+                     {formattedExifData.lens && (
+                       <Row label="镜头" value={formattedExifData.lens} />
+                     )}
  
-                   {formattedExifData.focalLength && (
-                     <Row
-                       label="实际焦距"
-                       value={`${formattedExifData.focalLength}mm`}
-                     />
-                   )}
-                   {formattedExifData.focalLength35mm && (
-                     <Row
-                       label="等效焦距"
-                       value={`${formattedExifData.focalLength35mm}mm`}
-                     />
-                   )}
-                   {formattedExifData.maxAperture && (
-                     <Row
-                       label="最大光圈"
-                       value={`f/${formattedExifData.maxAperture}`}
-                     />
-                   )}
-                   {formattedExifData.digitalZoom && (
-                     <Row
-                       label="数字变焦"
-                       value={`${formattedExifData.digitalZoom.toFixed(2)}x`}
-                     />
-                   )}
-                 </div>
-               </div>
-             )}
+                     {formattedExifData.focalLength && (
+                       <Row
+                         label="实际焦距"
+                         value={`${formattedExifData.focalLength}mm`}
+                       />
+                     )}
+                     {formattedExifData.focalLength35mm && (
+                       <Row
+                         label="等效焦距"
+                         value={`${formattedExifData.focalLength35mm}mm`}
+                       />
+                     )}
+                     {formattedExifData.maxAperture && (
+                       <Row
+                         label="最大光圈"
+                         value={`f/${formattedExifData.maxAperture}`}
+                       />
+                     )}
+                     {formattedExifData.digitalZoom && (
+                       <Row
+                         label="数字变焦"
+                         value={`${formattedExifData.digitalZoom.toFixed(2)}x`}
+                       />
+                     )}
+                   </div>
+                 </div>
+               )}
  
-             <div>
-               <h4 className="text-sm font-medium text-white/80 my-2">
-                 拍摄参数
-               </h4>
-               <div className={`grid grid-cols-2 gap-3`}>
-                 {formattedExifData.focalLength35mm && (
-                   <div className="flex items-center gap-2 bg-white/10 rounded-md px-2 py-1">
-                     <StreamlineImageAccessoriesLensesPhotosCameraShutterPicturePhotographyPicturesPhotoLens className="text-white/70 text-sm" />
-                     <span className="text-xs">
-                       {formattedExifData.focalLength35mm}mm
-                     </span>
-                   </div>
-                 )}
+               <div>
+                 <h4 className="text-sm font-medium text-white/80 my-2">
+                   拍摄参数
+                 </h4>
+                 <div className={`grid grid-cols-2 gap-3`}>
+                   {formattedExifData.focalLength35mm && (
+                     <div className="flex items-center gap-2 bg-white/10 rounded-md px-2 py-1">
+                       <StreamlineImageAccessoriesLensesPhotosCameraShutterPicturePhotographyPicturesPhotoLens className="text-white/70 text-sm" />
+                       <span className="text-xs">
+                         {formattedExifData.focalLength35mm}mm
+                       </span>
+                     </div>
+                   )}
  
-                 {formattedExifData.aperture && (
-                   <div className="flex items-center gap-2 bg-white/10 rounded-md px-2 py-1">
-                     <TablerAperture className="text-white/70 text-sm" />
-                     <span className="text-xs">
-                       {formattedExifData.aperture}
-                     </span>
-                   </div>
-                 )}
+                   {formattedExifData.aperture && (
+                     <div className="flex items-center gap-2 bg-white/10 rounded-md px-2 py-1">
+                       <TablerAperture className="text-white/70 text-sm" />
+                       <span className="text-xs">
+                         {formattedExifData.aperture}
+                       </span>
+                     </div>
+                   )}
  
-                 {formattedExifData.shutterSpeed && (
-                   <div className="flex items-center gap-2 bg-white/10 rounded-md px-2 py-1">
-                     <MaterialSymbolsShutterSpeed className="text-white/70 text-sm" />
-                     <span className="text-xs">
-                       {formattedExifData.shutterSpeed}
-                     </span>
-                   </div>
-                 )}
+                   {formattedExifData.shutterSpeed && (
+                     <div className="flex items-center gap-2 bg-white/10 rounded-md px-2 py-1">
+                       <MaterialSymbolsShutterSpeed className="text-white/70 text-sm" />
+                       <span className="text-xs">
+                         {formattedExifData.shutterSpeed}
+                       </span>
+                     </div>
+                   )}
  
-                 {formattedExifData.iso && (
-                   <div className="flex items-center gap-2 bg-white/10 rounded-md px-2 py-1">
-                     <CarbonIsoOutline className="text-white/70 text-sm" />
-                     <span className="text-xs">ISO {formattedExifData.iso}</span>
-                   </div>
-                 )}
+                   {formattedExifData.iso && (
+                     <div className="flex items-center gap-2 bg-white/10 rounded-md px-2 py-1">
+                       <CarbonIsoOutline className="text-white/70 text-sm" />
+                       <span className="text-xs">ISO {formattedExifData.iso}</span>
+                     </div>
+                   )}
  
-                 {formattedExifData.exposureBias && (
-                   <div className="flex items-center gap-2 bg-white/10 rounded-md px-2 py-1">
-                     <MaterialSymbolsExposure className="text-white/70 text-sm" />
-                     <span className="text-xs">
-                       {formattedExifData.exposureBias}
-                     </span>
-                   </div>
-                 )}
-               </div>
-             </div>
+                   {formattedExifData.exposureBias && (
+                     <div className="flex items-center gap-2 bg-white/10 rounded-md px-2 py-1">
+                       <MaterialSymbolsExposure className="text-white/70 text-sm" />
+                       <span className="text-xs">
+                         {formattedExifData.exposureBias}
+                       </span>
+                     </div>
+                   )}
+                 </div>
+               </div>
  
-             {/* 新增：拍摄模式信息 */}
-             {(formattedExifData.exposureMode ||
-               formattedExifData.meteringMode ||
-               formattedExifData.whiteBalance ||
-               formattedExifData.lightSource ||
-               formattedExifData.flash) && (
-               <div>
-                 <h4 className="text-sm font-medium text-white/80 my-2">
-                   拍摄模式
-                 </h4>
-                 <div className="space-y-1 text-sm">
-                   {formattedExifData.exposureMode && (
-                     <Row
-                       label="曝光模式"
-                       value={formattedExifData.exposureMode}
-                     />
-                   )}
-                   {formattedExifData.meteringMode && (
-                     <Row
-                       label="测光模式"
-                       value={formattedExifData.meteringMode}
-                     />
-                   )}
-                   {formattedExifData.whiteBalance && (
-                     <Row
-                       label="白平衡"
-                       value={formattedExifData.whiteBalance}
-                     />
-                   )}
-                   {formattedExifData.whiteBalanceBias && (
-                     <Row
-                       label="白平衡偏移"
-                       value={`${formattedExifData.whiteBalanceBias} Mired`}
-                     />
-                   )}
-                   {formattedExifData.wbShiftAB && (
-                     <Row
-                       label="白平衡偏移 (琥珀-蓝)"
-                       value={formattedExifData.wbShiftAB}
-                     />
-                   )}
-                   {formattedExifData.wbShiftGM && (
-                     <Row
-                       label="白平衡偏移 (绿-洋红)"
-                       value={formattedExifData.wbShiftGM}
-                     />
-                   )}
-                   {formattedExifData.whiteBalanceFineTune && (
-                     <Row
-                       label="白平衡微调"
-                       value={formattedExifData.whiteBalanceFineTune}
-                     />
-                   )}
-                   {formattedExifData.wbGRBLevels && (
-                     <Row
-                       label="白平衡 GRB 级别"
-                       value={
-                         Array.isArray(formattedExifData.wbGRBLevels)
-                           ? formattedExifData.wbGRBLevels.join(' ')
-                           : formattedExifData.wbGRBLevels
-                       }
-                     />
-                   )}
-                   {formattedExifData.wbGRBLevelsStandard && (
-                     <Row
-                       label="标准白平衡 GRB"
-                       value={
-                         Array.isArray(formattedExifData.wbGRBLevelsStandard)
-                           ? formattedExifData.wbGRBLevelsStandard.join(' ')
-                           : formattedExifData.wbGRBLevelsStandard
-                       }
-                     />
-                   )}
-                   {formattedExifData.wbGRBLevelsAuto && (
-                     <Row
-                       label="自动白平衡 GRB"
-                       value={
-                         Array.isArray(formattedExifData.wbGRBLevelsAuto)
-                           ? formattedExifData.wbGRBLevelsAuto.join(' ')
-                           : formattedExifData.wbGRBLevelsAuto
-                       }
-                     />
-                   )}
-                   {formattedExifData.flash && (
-                     <Row label="闪光灯" value={formattedExifData.flash} />
-                   )}
-                   {formattedExifData.lightSource && (
-                     <Row label="光源" value={formattedExifData.lightSource} />
-                   )}
-                 </div>
-               </div>
-             )}
+               {/* 新增：拍摄模式信息 */}
+               {(formattedExifData.exposureMode ||
+                 formattedExifData.meteringMode ||
+                 formattedExifData.whiteBalance ||
+                 formattedExifData.lightSource ||
+                 formattedExifData.flash) && (
+                 <div>
+                   <h4 className="text-sm font-medium text-white/80 my-2">
+                     拍摄模式
+                   </h4>
+                   <div className="space-y-1 text-sm">
+                     {formattedExifData.exposureMode && (
+                       <Row
+                         label="曝光模式"
+                         value={formattedExifData.exposureMode}
+                       />
+                     )}
+                     {formattedExifData.meteringMode && (
+                       <Row
+                         label="测光模式"
+                         value={formattedExifData.meteringMode}
+                       />
+                     )}
+                     {formattedExifData.whiteBalance && (
+                       <Row
+                         label="白平衡"
+                         value={formattedExifData.whiteBalance}
+                       />
+                     )}
+                     {formattedExifData.whiteBalanceBias && (
+                       <Row
+                         label="白平衡偏移"
+                         value={`${formattedExifData.whiteBalanceBias} Mired`}
+                       />
+                     )}
+                     {formattedExifData.wbShiftAB && (
+                       <Row
+                         label="白平衡偏移 (琥珀-蓝)"
+                         value={formattedExifData.wbShiftAB}
+                       />
+                     )}
+                     {formattedExifData.wbShiftGM && (
+                       <Row
+                         label="白平衡偏移 (绿-洋红)"
+                         value={formattedExifData.wbShiftGM}
+                       />
+                     )}
+                     {formattedExifData.whiteBalanceFineTune && (
+                       <Row
+                         label="白平衡微调"
+                         value={formattedExifData.whiteBalanceFineTune}
+                       />
+                     )}
+                     {formattedExifData.wbGRBLevels && (
+                       <Row
+                         label="白平衡 GRB 级别"
+                         value={
+                           Array.isArray(formattedExifData.wbGRBLevels)
+                             ? formattedExifData.wbGRBLevels.join(' ')
+                             : formattedExifData.wbGRBLevels
+                         }
+                       />
+                     )}
+                     {formattedExifData.wbGRBLevelsStandard && (
+                       <Row
+                         label="标准白平衡 GRB"
+                         value={
+                           Array.isArray(formattedExifData.wbGRBLevelsStandard)
+                             ? formattedExifData.wbGRBLevelsStandard.join(' ')
+                             : formattedExifData.wbGRBLevelsStandard
+                         }
+                       />
+                     )}
+                     {formattedExifData.wbGRBLevelsAuto && (
+                       <Row
+                         label="自动白平衡 GRB"
+                         value={
+                           Array.isArray(formattedExifData.wbGRBLevelsAuto)
+                             ? formattedExifData.wbGRBLevelsAuto.join(' ')
+                             : formattedExifData.wbGRBLevelsAuto
+                         }
+                       />
+                     )}
+                     {formattedExifData.flash && (
+                       <Row label="闪光灯" value={formattedExifData.flash} />
+                     )}
+                     {formattedExifData.lightSource && (
+                       <Row label="光源" value={formattedExifData.lightSource} />
+                     )}
+                   </div>
+                 </div>
+               )}
  
-             {formattedExifData.fujiRecipe && (
-               <div>
-                 <h4 className="text-sm font-medium text-white/80 my-2">
-                   富士胶片模拟
-                 </h4>
-                 <div className="space-y-1 text-sm">
-                   {formattedExifData.fujiRecipe.FilmMode && (
-                     <Row
-                       label="胶片模式"
-                       value={formattedExifData.fujiRecipe.FilmMode}
-                     />
-                   )}
-                   {formattedExifData.fujiRecipe.DynamicRange && (
-                     <Row
-                       label="动态范围"
-                       value={formattedExifData.fujiRecipe.DynamicRange}
-                     />
-                   )}
-                   {formattedExifData.fujiRecipe.WhiteBalance && (
-                     <Row
-                       label="白平衡"
-                       value={formattedExifData.fujiRecipe.WhiteBalance}
-                     />
-                   )}
-                   {formattedExifData.fujiRecipe.HighlightTone && (
-                     <Row
-                       label="高光色调"
-                       value={formattedExifData.fujiRecipe.HighlightTone}
-                     />
-                   )}
-                   {formattedExifData.fujiRecipe.ShadowTone && (
-                     <Row
-                       label="阴影色调"
-                       value={formattedExifData.fujiRecipe.ShadowTone}
-                     />
-                   )}
-                   {formattedExifData.fujiRecipe.Saturation && (
-                     <Row
-                       label="饱和度"
-                       value={formattedExifData.fujiRecipe.Saturation}
-                     />
-                   )}
-                   {formattedExifData.fujiRecipe.Sharpness && (
-                     <Row
-                       label="锐度"
-                       value={formattedExifData.fujiRecipe.Sharpness}
-                     />
-                   )}
-                   {formattedExifData.fujiRecipe.NoiseReduction && (
-                     <Row
-                       label="降噪"
-                       value={formattedExifData.fujiRecipe.NoiseReduction}
-                     />
-                   )}
-                   {formattedExifData.fujiRecipe.Clarity && (
-                     <Row
-                       label="清晰度"
-                       value={formattedExifData.fujiRecipe.Clarity}
-                     />
-                   )}
-                   {formattedExifData.fujiRecipe.ColorChromeEffect && (
-                     <Row
-                       label="色彩效果"
-                       value={formattedExifData.fujiRecipe.ColorChromeEffect}
-                     />
-                   )}
-                   {formattedExifData.fujiRecipe.ColorChromeFxBlue && (
-                     <Row
-                       label="蓝色色彩效果"
-                       value={formattedExifData.fujiRecipe.ColorChromeFxBlue}
-                     />
-                   )}
-                   {(formattedExifData.fujiRecipe.GrainEffectRoughness ||
-                     formattedExifData.fujiRecipe.GrainEffectSize) && (
-                     <>
-                       {formattedExifData.fujiRecipe.GrainEffectRoughness && (
-                         <Row
-                           label="颗粒效果强度"
-                           value={
-                             formattedExifData.fujiRecipe.GrainEffectRoughness
-                           }
-                         />
-                       )}
-                       {formattedExifData.fujiRecipe.GrainEffectSize && (
-                         <Row
-                           label="颗粒效果大小"
-                           value={formattedExifData.fujiRecipe.GrainEffectSize}
-                         />
-                       )}
-                     </>
-                   )}
-                   {(formattedExifData.fujiRecipe.Red ||
-                     formattedExifData.fujiRecipe.Blue) && (
-                     <>
-                       {formattedExifData.fujiRecipe.Red && (
-                         <Row
-                           label="红色调整"
-                           value={formattedExifData.fujiRecipe.Red}
-                         />
-                       )}
-                       {formattedExifData.fujiRecipe.Blue && (
-                         <Row
-                           label="蓝色调整"
-                           value={formattedExifData.fujiRecipe.Blue}
-                         />
-                       )}
-                     </>
-                   )}
-                 </div>
-               </div>
-             )}
-             {formattedExifData.gps && (
-               <div>
-                 <h4 className="text-sm font-medium text-white/80 my-2">
-                   位置信息
-                 </h4>
-                 <div className="space-y-1 text-sm">
-                   <Row label="纬度" value={formattedExifData.gps.latitude} />
-                   <Row label="经度" value={formattedExifData.gps.longitude} />
-                   {formattedExifData.gps.altitude && (
-                     <Row
-                       label="海拔"
-                       value={`${formattedExifData.gps.altitude}m`}
-                     />
-                   )}
-                   <div className="mt-2 text-right">
-                     <a
-                       href={`https://uri.amap.com/marker?position=${formattedExifData.gps.longitude},${formattedExifData.gps.latitude}&name=拍摄位置`}
-                       target="_blank"
-                       rel="noopener noreferrer"
-                       className="inline-flex items-center gap-1 text-blue hover:text-blue-300 transition-colors text-xs underline"
-                     >
-                       在高德地图中查看
-                       <i className="i-mingcute-external-link-line" />
-                     </a>
-                   </div>
-                 </div>
-               </div>
-             )}
+               {formattedExifData.fujiRecipe && (
+                 <div>
+                   <h4 className="text-sm font-medium text-white/80 my-2">
+                     富士胶片模拟
+                   </h4>
+                   <div className="space-y-1 text-sm">
+                     {formattedExifData.fujiRecipe.FilmMode && (
+                       <Row
+                         label="胶片模式"
+                         value={formattedExifData.fujiRecipe.FilmMode}
+                       />
+                     )}
+                     {formattedExifData.fujiRecipe.DynamicRange && (
+                       <Row
+                         label="动态范围"
+                         value={formattedExifData.fujiRecipe.DynamicRange}
+                       />
+                     )}
+                     {formattedExifData.fujiRecipe.WhiteBalance && (
+                       <Row
+                         label="白平衡"
+                         value={formattedExifData.fujiRecipe.WhiteBalance}
+                       />
+                     )}
+                     {formattedExifData.fujiRecipe.HighlightTone && (
+                       <Row
+                         label="高光色调"
+                         value={formattedExifData.fujiRecipe.HighlightTone}
+                       />
+                     )}
+                     {formattedExifData.fujiRecipe.ShadowTone && (
+                       <Row
+                         label="阴影色调"
+                         value={formattedExifData.fujiRecipe.ShadowTone}
+                       />
+                     )}
+                     {formattedExifData.fujiRecipe.Saturation && (
+                       <Row
+                         label="饱和度"
+                         value={formattedExifData.fujiRecipe.Saturation}
+                       />
+                     )}
+                     {formattedExifData.fujiRecipe.Sharpness && (
+                       <Row
+                         label="锐度"
+                         value={formattedExifData.fujiRecipe.Sharpness}
+                       />
+                     )}
+                     {formattedExifData.fujiRecipe.NoiseReduction && (
+                       <Row
+                         label="降噪"
+                         value={formattedExifData.fujiRecipe.NoiseReduction}
+                       />
+                     )}
+                     {formattedExifData.fujiRecipe.Clarity && (
+                       <Row
+                         label="清晰度"
+                         value={formattedExifData.fujiRecipe.Clarity}
+                       />
+                     )}
+                     {formattedExifData.fujiRecipe.ColorChromeEffect && (
+                       <Row
+                         label="色彩效果"
+                         value={formattedExifData.fujiRecipe.ColorChromeEffect}
+                       />
+                     )}
+                     {formattedExifData.fujiRecipe.ColorChromeFxBlue && (
+                       <Row
+                         label="蓝色色彩效果"
+                         value={formattedExifData.fujiRecipe.ColorChromeFxBlue}
+                       />
+                     )}
+                     {(formattedExifData.fujiRecipe.GrainEffectRoughness ||
+                       formattedExifData.fujiRecipe.GrainEffectSize) && (
+                       <>
+                         {formattedExifData.fujiRecipe.GrainEffectRoughness && (
+                           <Row
+                             label="颗粒效果强度"
+                             value={
+                               formattedExifData.fujiRecipe.GrainEffectRoughness
+                             }
+                           />
+                         )}
+                         {formattedExifData.fujiRecipe.GrainEffectSize && (
+                           <Row
+                             label="颗粒效果大小"
+                             value={formattedExifData.fujiRecipe.GrainEffectSize}
+                           />
+                         )}
+                       </>
+                     )}
+                     {(formattedExifData.fujiRecipe.Red ||
+                       formattedExifData.fujiRecipe.Blue) && (
+                       <>
+                         {formattedExifData.fujiRecipe.Red && (
+                           <Row
+                             label="红色调整"
+                             value={formattedExifData.fujiRecipe.Red}
+                           />
+                         )}
+                         {formattedExifData.fujiRecipe.Blue && (
+                           <Row
+                             label="蓝色调整"
+                             value={formattedExifData.fujiRecipe.Blue}
+                           />
+                         )}
+                       </>
+                     )}
+                   </div>
+                 </div>
+               )}
+               {formattedExifData.gps && (
+                 <div>
+                   <h4 className="text-sm font-medium text-white/80 my-2">
+                     位置信息
+                   </h4>
+                   <div className="space-y-1 text-sm">
+                     <Row label="纬度" value={formattedExifData.gps.latitude} />
+                     <Row label="经度" value={formattedExifData.gps.longitude} />
+                     {formattedExifData.gps.altitude && (
+                       <Row
+                         label="海拔"
+                         value={`${formattedExifData.gps.altitude}m`}
+                       />
+                     )}
+                     <div className="mt-2 text-right">
+                       <a
+                         href={`https://uri.amap.com/marker?position=${formattedExifData.gps.longitude},${formattedExifData.gps.latitude}&name=拍摄位置`}
+                         target="_blank"
+                         rel="noopener noreferrer"
+                         className="inline-flex items-center gap-1 text-blue hover:text-blue-300 transition-colors text-xs underline"
+                       >
+                         在高德地图中查看
+                         <i className="i-mingcute-external-link-line" />
+                       </a>
+                     </div>
+                   </div>
+                 </div>
+               )}
  
-             {/* 新增：技术参数 */}
-             {(formattedExifData.brightnessValue ||
-               formattedExifData.shutterSpeedValue ||
-               formattedExifData.apertureValue ||
-               formattedExifData.sensingMethod ||
-               formattedExifData.customRendered ||
-               formattedExifData.focalPlaneXResolution ||
-               formattedExifData.focalPlaneYResolution) && (
-               <div>
-                 <h4 className="text-sm font-medium text-white/80 my-2">
-                   技术参数
-                 </h4>
-                 <div className="space-y-1 text-sm">
-                   {formattedExifData.brightnessValue && (
-                     <Row
-                       label="亮度值"
-                       value={formattedExifData.brightnessValue}
-                     />
-                   )}
-                   {formattedExifData.shutterSpeedValue && (
-                     <Row
-                       label="快门速度值"
-                       value={formattedExifData.shutterSpeedValue}
-                     />
-                   )}
-                   {formattedExifData.apertureValue && (
-                     <Row
-                       label="光圈值"
-                       value={formattedExifData.apertureValue}
-                     />
-                   )}
-                   {formattedExifData.sensingMethod && (
-                     <Row
-                       label="感光方法"
-                       value={formattedExifData.sensingMethod}
-                     />
-                   )}
-                   {formattedExifData.customRendered && (
-                     <Row
-                       label="图像处理"
-                       value={formattedExifData.customRendered}
-                     />
-                   )}
-                   {(formattedExifData.focalPlaneXResolution ||
-                     formattedExifData.focalPlaneYResolution) && (
-                     <Row
-                       label="焦平面分辨率"
-                       value={`${formattedExifData.focalPlaneXResolution || 'N/A'} × ${formattedExifData.focalPlaneYResolution || 'N/A'}${formattedExifData.focalPlaneResolutionUnit ? ` (${formattedExifData.focalPlaneResolutionUnit})` : ''}`}
-                     />
-                   )}
-                 </div>
-               </div>
-             )}
-           </Fragment>
-         )}
-       </div>
+               {/* 新增：技术参数 */}
+               {(formattedExifData.brightnessValue ||
+                 formattedExifData.shutterSpeedValue ||
+                 formattedExifData.apertureValue ||
+                 formattedExifData.sensingMethod ||
+                 formattedExifData.customRendered ||
+                 formattedExifData.focalPlaneXResolution ||
+                 formattedExifData.focalPlaneYResolution) && (
+                 <div>
+                   <h4 className="text-sm font-medium text-white/80 my-2">
+                     技术参数
+                   </h4>
+                   <div className="space-y-1 text-sm">
+                     {formattedExifData.brightnessValue && (
+                       <Row
+                         label="亮度值"
+                         value={formattedExifData.brightnessValue}
+                       />
+                     )}
+                     {formattedExifData.shutterSpeedValue && (
+                       <Row
+                         label="快门速度值"
+                         value={formattedExifData.shutterSpeedValue}
+                       />
+                     )}
+                     {formattedExifData.apertureValue && (
+                       <Row
+                         label="光圈值"
+                         value={formattedExifData.apertureValue}
+                       />
+                     )}
+                     {formattedExifData.sensingMethod && (
+                       <Row
+                         label="感光方法"
+                         value={formattedExifData.sensingMethod}
+                       />
+                     )}
+                     {formattedExifData.customRendered && (
+                       <Row
+                         label="图像处理"
+                         value={formattedExifData.customRendered}
+                       />
+                     )}
+                     {(formattedExifData.focalPlaneXResolution ||
+                       formattedExifData.focalPlaneYResolution) && (
+                       <Row
+                         label="焦平面分辨率"
+                         value={`${formattedExifData.focalPlaneXResolution || 'N/A'} × ${formattedExifData.focalPlaneYResolution || 'N/A'}${formattedExifData.focalPlaneResolutionUnit ? ` (${formattedExifData.focalPlaneResolutionUnit})` : ''}`}
+                       />
+                     )}
+                   </div>
+                 </div>
+               )}
+             </Fragment>
+           )}
+         </div>
+       </ScrollArea>
      </m.div>
    )
```

---

完成！我已经成功将 ExifPanel 组件中的滚动容器替换为使用 `ScrollArea` 组件。主要的更改包括：

1. **添加了 ScrollArea 组件的导入**：
   ```tsx
   import { ScrollArea } from '~/components/ui/ScrollArea'
   ```

2. **重构了组件结构**：
   - 移除了原有的 `overflow-y-auto` 样式和 `p-4` 内边距
   - 将标题部分移出滚动区域，使用 `p-4 pb-0` 样式
   - 用 `ScrollArea` 组件包装了所有的内容区域

3. **配置了 ScrollArea 属性**：
   - `rootClassName="flex-1"`：使滚动区域占据剩余空间
   - `viewportClassName="px-4 pb-4"`：为内容区域添加合适的内边距

这样的改动保持了原有的视觉效果和功能，同时使用了更统一的滚动组件，提供了更好的用户体验和样式一致性。ScrollArea 组件会自动处理滚动条的显示和隐藏，并提供平滑的滚动体验。

---

_**User**_

现在不能滚动了

---

_**Assistant**_

我来检查一下当前的代码结构，看看为什么滚动不工作了。

---

Read file: src/components/ui/photo-viewer/ExifPanel.tsx

---

我看到了问题！ScrollArea 需要一个明确的高度才能正常工作。当前的结构中，外层的 `m.div` 没有设置为 flex 容器，所以 `flex-1` 不会生效。让我修复这个问题：

---

```diff
            ? 'fixed bottom-0 left-0 right-0 max-h-[60vh] w-full rounded-t-2xl exif-panel-mobile'
            : 'w-80 shrink-0'
-       } bg-material-medium text-white z-10 backdrop-blur-3xl`}
+       } bg-material-medium text-white z-10 backdrop-blur-3xl flex flex-col`}
        initial={{
          opacity: 0,
```

```diff
        transition={{ duration: 0.3 }}
      >
-       <div className="flex items-center justify-between mb-4 p-4 pb-0">
+       <div className="flex items-center justify-between mb-4 p-4 pb-0 shrink-0">
          <h3 className={`${isMobile ? 'text-base' : 'text-lg'} font-semibold`}>
            图片信息
```

```diff
        </div>
  
-       <ScrollArea rootClassName="flex-1" viewportClassName="px-4 pb-4">
+       <ScrollArea 
+         rootClassName="flex-1 min-h-0"
+         viewportClassName="px-4 pb-4"
+       >
          <div className={`space-y-${isMobile ? '3' : '4'}`}>
            <div>
```

---

完成！我已经修复了滚动问题。主要的更改包括：

1. **将外层容器设置为 flex 布局**：
   - 添加了 `flex flex-col` 类名，使容器成为垂直的 flex 容器

2. **固定标题区域**：
   - 给标题区域添加了 `shrink-0` 类名，防止它被压缩

3. **修复 ScrollArea 的高度约束**：
   - 将 `rootClassName` 改为 `"flex-1 min-h-0"`
   - `flex-1` 让 ScrollArea 占据剩余空间
   - `min-h-0` 允许 ScrollArea 的高度可以缩小到 0，这对于 flex 布局中的滚动容器是必需的

现在布局结构是：
- 外层 `m.div`: flex 容器（垂直方向）
- 标题区域: 固定高度（`shrink-0`）
- ScrollArea: 占据剩余空间（`flex-1 min-h-0`）

这样的设置确保了 ScrollArea 有明确的高度约束，内容超出时可以正常滚动。

---

