feat(gallery): 引入共享元素过渡效果并优化图片预览逻辑

- 在 `GalleryTabPager` 和 `ImagePreviewDialog` 中添加共享元素过渡功能
- 优化 `ZoomableImage` 的参数传递，增强动画支持
- 新增 `sharedBoundsBy` 和 `animatedVisibilityScope` 配置，提高用户交互体验

Author: KAMO030

composeApp/src/commonMain/kotlin/presentation/screens/gallery/GalleryTabPager.kt

@@ -1,5 +1,7 @@
 package io.github.vrcmteam.vrcm.presentation.screens.gallery
 
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.ExperimentalSharedTransitionApi
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.lazy.grid.GridCells
@@ -26,9 +28,7 @@ import com.skydoves.landscapist.coil3.CoilImage
 import io.github.vrcmteam.vrcm.network.api.files.FileApi
 import io.github.vrcmteam.vrcm.network.api.files.data.FileData
 import io.github.vrcmteam.vrcm.network.api.files.data.FileTagType
-import io.github.vrcmteam.vrcm.presentation.compoments.EmptyContent
-import io.github.vrcmteam.vrcm.presentation.compoments.LocationDialogContent
-import io.github.vrcmteam.vrcm.presentation.compoments.RefreshBox
+import io.github.vrcmteam.vrcm.presentation.compoments.*
 import io.github.vrcmteam.vrcm.presentation.settings.locale.strings
 import io.github.vrcmteam.vrcm.presentation.supports.Pager
 import org.koin.compose.koinInject
@@ -154,14 +154,15 @@ sealed class GalleryTabPager(private val tagType: FileTagType) : Pager {
         }
     }
 
+    @OptIn(ExperimentalSharedTransitionApi::class)
     @Composable
     private fun GalleryItem(
         file: FileData,
         tagType: FileTagType,
         aspectRatio: Float = 1f,
         shape: Shape = MaterialTheme.shapes.medium
     ) {
-        val (_, setDialogContent) = LocationDialogContent.current
+        val (dialogContent, setDialogContent) = LocationDialogContent.current
 
 
 
@@ -177,42 +178,50 @@ sealed class GalleryTabPager(private val tagType: FileTagType) : Pager {
             } else {
                 ""
             }
-            CoilImage(
-                imageModel = { imageUrl },
-                imageOptions = ImageOptions(
-                    contentScale = ContentScale.Crop,
-                    alignment = Alignment.Center
-                ),
-                imageLoader = { koinInject() },
-                modifier = Modifier
-                    .fillMaxSize()
-                    .clip(shape)
-                    .clickable {
-                        // 点击图片时，打开全屏预览
-                        setDialogContent(ImagePreviewDialog(file.id, file.name, file.extension))
-                    },
-                loading = {
-                    Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
-                        CircularProgressIndicator(
-                            modifier = Modifier.size(24.dp),
-                            strokeWidth = 2.dp
-                        )
-                    }
-                },
-                failure = {
-                    Column(
-                        modifier = Modifier.fillMaxSize(),
-                        horizontalAlignment = Alignment.CenterHorizontally,
-                        verticalArrangement = Arrangement.Center
-                    ) {
-                        Text(
-                            text = strings.galleryTabLoadFailed,
-                            style = MaterialTheme.typography.bodySmall,
-                            color = MaterialTheme.colorScheme.error
+            AnimatedVisibility(dialogContent == null || (dialogContent as ImagePreviewDialog).fileId != file.id) {
+                CoilImage(
+                    imageModel = { imageUrl },
+                    imageOptions = ImageOptions(
+                        contentScale = ContentScale.Crop,
+                        alignment = Alignment.Center
+                    ),
+                    imageLoader = { koinInject() },
+                    modifier = Modifier
+                        .fillMaxSize()
+                        .clip(shape)
+                        .sharedBoundsBy(
+                            file.id,
+                            sharedTransitionScope = LocalSharedTransitionDialogScope.current,
+                            animatedVisibilityScope = this@AnimatedVisibility
                         )
+                        .clickable {
+                            // 点击图片时，打开全屏预览
+                            setDialogContent(ImagePreviewDialog(file.id, file.name, file.extension))
+                        },
+                    loading = {
+                        Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
+                            CircularProgressIndicator(
+                                modifier = Modifier.size(24.dp),
+                                strokeWidth = 2.dp
+                            )
+                        }
+                    },
+                    failure = {
+                        Column(
+                            modifier = Modifier.fillMaxSize(),
+                            horizontalAlignment = Alignment.CenterHorizontally,
+                            verticalArrangement = Arrangement.Center
+                        ) {
+                            Text(
+                                text = strings.galleryTabLoadFailed,
+                                style = MaterialTheme.typography.bodySmall,
+                                color = MaterialTheme.colorScheme.error
+                            )
+                        }
                     }
-                }
-            )
+                )
+            }
+
         }
 
     }

composeApp/src/commonMain/kotlin/presentation/screens/gallery/ImagePreviewDialog.kt

@@ -1,6 +1,7 @@
 package io.github.vrcmteam.vrcm.presentation.screens.gallery
 
 import androidx.compose.animation.AnimatedVisibilityScope
+import androidx.compose.animation.ExperimentalSharedTransitionApi
 import androidx.compose.foundation.gestures.detectTapGestures
 import androidx.compose.foundation.gestures.detectTransformGestures
 import androidx.compose.foundation.layout.*
@@ -22,9 +23,7 @@ import io.github.vrcmteam.vrcm.core.extensions.saveImageToGallery
 import io.github.vrcmteam.vrcm.core.shared.SharedFlowCentre
 import io.github.vrcmteam.vrcm.getAppPlatform
 import io.github.vrcmteam.vrcm.network.api.files.FileApi
-import io.github.vrcmteam.vrcm.presentation.compoments.LocationDialogContent
-import io.github.vrcmteam.vrcm.presentation.compoments.SharedDialog
-import io.github.vrcmteam.vrcm.presentation.compoments.ToastText
+import io.github.vrcmteam.vrcm.presentation.compoments.*
 import io.github.vrcmteam.vrcm.presentation.extensions.getInsetPadding
 import io.github.vrcmteam.vrcm.presentation.settings.locale.strings
 import io.github.vrcmteam.vrcm.presentation.supports.AppIcons
@@ -39,7 +38,7 @@ import kotlin.math.min
  * 图片预览对话框
  */
 class ImagePreviewDialog(
-    private val fileId: String,
+    val fileId: String,
     private val fileName: String,
     private val fileExtension: String,
 ) : SharedDialog {
@@ -60,17 +59,18 @@ class ImagePreviewDialog(
         ) {
             // 显示原始大小的图片
             val imageUrl = FileApi.convertFileUrl(fileId, 2048)
-
             // 为了防止ZoomableImage拦截背景点击事件，单独放在一个Box中
             Box(
                 modifier = Modifier
                     .fillMaxSize()
             ) {
                 ZoomableImage(
+                    id = fileId,
                     imageUrl = imageUrl,
                     contentDescription = fileName,
                     maxScale = 5f,
-                    minScale = 0.5f
+                    minScale = 0.5f,
+                    animatedVisibilityScope = animatedVisibilityScope
                 )
             }
 
@@ -143,12 +143,15 @@ class ImagePreviewDialog(
 /**
  * 支持手势缩放和平移的图片组件
  */
+@OptIn(ExperimentalSharedTransitionApi::class)
 @Composable
 fun BoxScope.ZoomableImage(
+    id: String,
     imageUrl: String,
     contentDescription: String? = null,
     maxScale: Float = 3f,
-    minScale: Float = 0.8f
+    minScale: Float = 0.8f,
+    animatedVisibilityScope: AnimatedVisibilityScope
 ) {
     var scale by remember { mutableStateOf(1f) }
     var offset by remember { mutableStateOf(Offset.Zero) }
@@ -248,7 +251,11 @@ fun BoxScope.ZoomableImage(
                             }
                         }
                     )
-                },
+                }.sharedBoundsBy(
+                id,
+                sharedTransitionScope = LocalSharedTransitionDialogScope.current,
+                animatedVisibilityScope =  animatedVisibilityScope
+            ),
             loading = {
                 Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
                     CircularProgressIndicator()