feat: 新增短视频功能

- 新增短视频信息流页面，支持上下滑动切换视频。 - 实现视频播放、暂停、加载、空状态及错误处理等基础功能。 - 在视频页面中集成点赞、评论、收藏等互动操作。 - 后端接口新增 `videoFilter` 参数，用于仅获取包含视频的动态。 - 扩展了 `MomentEntity` 和相关数据模型，以支持视频数据。 - 将短视频页面集成到动态（Moment）Tab中。
2025-11-10 17:55:33 +08:00
parent 513897499d
commit 2ed5639cbc
8 changed files with 598 additions and 82 deletions
--- a/app/src/main/java/com/aiosman/ravenow/ui/index/tabs/moment/Moment.kt
+++ b/app/src/main/java/com/aiosman/ravenow/ui/index/tabs/moment/Moment.kt
@@ -59,6 +59,7 @@ import androidx.compose.ui.graphics.ColorFilter
 import com.aiosman.ravenow.ui.composables.TabItem
 import com.aiosman.ravenow.ui.composables.UnderlineTabItem
 import com.aiosman.ravenow.ui.composables.rememberDebouncer
+import com.aiosman.ravenow.ui.index.tabs.moment.tabs.shorts.ShortVideoScreen

 /**
 * 动态列表
@@ -234,6 +235,7 @@ fun MomentsList() {
                }
                1 -> {
                    // 短视频页面
+                    ShortVideoScreen()
                }
                2 -> {
                    // 动态页面 - 暂时显示时间线内容
--- a/app/src/main/java/com/aiosman/ravenow/ui/index/tabs/moment/tabs/shorts/ShortVideoScreen.kt
+++ b/app/src/main/java/com/aiosman/ravenow/ui/index/tabs/moment/tabs/shorts/ShortVideoScreen.kt
@@ -0,0 +1,185 @@
+package com.aiosman.ravenow.ui.index.tabs.moment.tabs.shorts
+
+import android.util.Log
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.aiosman.ravenow.GuestLoginCheckOut
+import com.aiosman.ravenow.GuestLoginCheckOutScene
+import com.aiosman.ravenow.LocalAppTheme
+import com.aiosman.ravenow.LocalNavController
+import com.aiosman.ravenow.entity.MomentEntity
+import com.aiosman.ravenow.ui.NavigationRoute
+import com.aiosman.ravenow.ui.index.tabs.shorts.ShortViewCompose
+import kotlinx.coroutines.launch
+
+/**
+ * 短视频页面
+ */
+@Composable
+fun ShortVideoScreen() {
+    val viewModel = ShortVideoViewModel
+    val allMoments = viewModel.moments
+    val navController = LocalNavController.current
+    val scope = rememberCoroutineScope()
+    val AppColors = LocalAppTheme.current
+    val momentLoader = viewModel.momentLoader
+    // 记录当前播放的短视频索引，切换 Tab 返回时恢复
+    val currentIndex = rememberSaveable { androidx.compose.runtime.mutableStateOf(0) }
+    
+    // 过滤出包含视频的动态
+    val videoMoments = remember(allMoments) {
+        val filtered = allMoments.filter { it.videos != null && it.videos.isNotEmpty() }
+        Log.d("ShortVideoScreen", "过滤视频动态 - 总动态数: ${allMoments.size}, 包含视频的动态数: ${filtered.size}")
+        filtered.forEach { moment ->
+            Log.d("ShortVideoScreen", "视频动态 ID: ${moment.id}, 视频数: ${moment.videos?.size}, 第一个视频URL: ${moment.videos?.firstOrNull()?.url}")
+        }
+        filtered
+    }
+    
+    // 初始加载数据
+    LaunchedEffect(Unit) {
+        Log.d("ShortVideoScreen", "开始加载数据")
+        viewModel.refreshPager()
+    }
+    
+    // 加载更多数据
+    LaunchedEffect(allMoments.size, videoMoments.size) {
+        Log.d("ShortVideoScreen", "检查是否需要加载更多 - allMoments: ${allMoments.size}, videoMoments: ${videoMoments.size}, hasNext: ${momentLoader.hasNext}, isLoading: ${momentLoader.isLoading}")
+        if (allMoments.isNotEmpty() && videoMoments.size < 10 && momentLoader.hasNext && !momentLoader.isLoading) {
+            // 如果视频数量少于10个，尝试加载更多
+            Log.d("ShortVideoScreen", "开始加载更多数据")
+            viewModel.loadMore()
+        }
+    }
+    
+    // 加载状态
+    if (momentLoader.isLoading && videoMoments.isEmpty()) {
+        Box(
+            modifier = Modifier
+                .fillMaxSize()
+                .background(AppColors.background),
+            contentAlignment = Alignment.Center
+        ) {
+            Column(
+                modifier = Modifier.padding(16.dp),
+                horizontalAlignment = Alignment.CenterHorizontally,
+                verticalArrangement = androidx.compose.foundation.layout.Arrangement.Center
+            ) {
+                CircularProgressIndicator(color = AppColors.main)
+                Text(
+                    text = "加载中...",
+                    modifier = Modifier.padding(top = 16.dp),
+                    color = AppColors.text,
+                    fontSize = 14.sp
+                )
+            }
+        }
+    }
+    // 错误状态
+    else if (momentLoader.error != null && videoMoments.isEmpty()) {
+        Box(
+            modifier = Modifier
+                .fillMaxSize()
+                .background(AppColors.background),
+            contentAlignment = Alignment.Center
+        ) {
+            Text(
+                text = "加载失败: ${momentLoader.error}",
+                color = AppColors.error,
+                fontSize = 14.sp
+            )
+        }
+    }
+    // 空状态 - 已加载但无视频
+    else if (!momentLoader.isLoading && videoMoments.isEmpty() && allMoments.isNotEmpty()) {
+        Box(
+            modifier = Modifier
+                .fillMaxSize()
+                .background(AppColors.background),
+            contentAlignment = Alignment.Center
+        ) {
+            Text(
+                text = "暂无短视频\n已加载 ${allMoments.size} 条动态，但都不包含视频",
+                color = AppColors.text,
+                fontSize = 16.sp
+            )
+        }
+    }
+    // 初始状态 - 还没有加载过数据
+    else if (!momentLoader.isLoading && videoMoments.isEmpty() && allMoments.isEmpty() && momentLoader.error == null) {
+        Box(
+            modifier = Modifier
+                .fillMaxSize()
+                .background(AppColors.background),
+            contentAlignment = Alignment.Center
+        ) {
+            Text(
+                text = "准备加载...",
+                color = AppColors.text,
+                fontSize = 16.sp
+            )
+        }
+    }
+    // 显示视频列表
+    else if (videoMoments.isNotEmpty()) {
+        ShortViewCompose(
+            videoMoments = videoMoments,
+            clickItemPosition = currentIndex.value,
+            onLikeClick = { moment ->
+                if (GuestLoginCheckOut.needLogin(GuestLoginCheckOutScene.LIKE_MOMENT)) {
+                    navController.navigate(NavigationRoute.Login.route)
+                } else {
+                    scope.launch {
+                        if (moment.liked) {
+                            viewModel.dislikeMoment(moment.id)
+                        } else {
+                            viewModel.likeMoment(moment.id)
+                        }
+                    }
+                }
+            },
+            onCommentClick = { moment ->
+                if (GuestLoginCheckOut.needLogin(GuestLoginCheckOutScene.COMMENT_MOMENT)) {
+                    navController.navigate(NavigationRoute.Login.route)
+                } else {
+                    scope.launch {
+                        viewModel.onAddComment(moment.id)
+                    }
+                }
+            },
+            onFavoriteClick = { moment ->
+                if (GuestLoginCheckOut.needLogin(GuestLoginCheckOutScene.LIKE_MOMENT)) {
+                    navController.navigate(NavigationRoute.Login.route)
+                } else {
+                    scope.launch {
+                        if (moment.isFavorite) {
+                            viewModel.unfavoriteMoment(moment.id)
+                        } else {
+                            viewModel.favoriteMoment(moment.id)
+                        }
+                    }
+                }
+            },
+            onShareClick = { moment ->
+                // TODO: 实现分享功能
+            },
+            onPageChanged = { idx -> currentIndex.value = idx }
+        )
+    }
+}
+
--- a/app/src/main/java/com/aiosman/ravenow/ui/index/tabs/moment/tabs/shorts/ShortVideoViewModel.kt
+++ b/app/src/main/java/com/aiosman/ravenow/ui/index/tabs/moment/tabs/shorts/ShortVideoViewModel.kt
@@ -0,0 +1,21 @@
+package com.aiosman.ravenow.ui.index.tabs.moment.tabs.shorts
+
+import com.aiosman.ravenow.entity.MomentLoaderExtraArgs
+import com.aiosman.ravenow.ui.index.tabs.moment.BaseMomentModel
+import org.greenrobot.eventbus.EventBus
+
+object ShortVideoViewModel : BaseMomentModel() {
+    init {
+        EventBus.getDefault().register(this)
+    }
+    
+    override fun extraArgs(): MomentLoaderExtraArgs {
+        return MomentLoaderExtraArgs(explore = true, videoOnly = true)
+    }
+    
+    // 获取包含视频的动态列表
+    fun getVideoMoments(): List<com.aiosman.ravenow.entity.MomentEntity> {
+        return moments.filter { it.videos != null && it.videos.isNotEmpty() }
+    }
+}
+
--- a/app/src/main/java/com/aiosman/ravenow/ui/index/tabs/profile/composable/GalleryItem.kt
+++ b/app/src/main/java/com/aiosman/ravenow/ui/index/tabs/profile/composable/GalleryItem.kt
@@ -221,7 +221,7 @@ fun GalleryGrid(
            modifier = Modifier.fillMaxSize().padding(bottom = 8.dp),
        ) {
            itemsIndexed(moments) { idx, moment ->
-                if (moment != null) {
+                if (moment != null && moment.images.isNotEmpty()) {
                    val itemDebouncer = rememberDebouncer()
                    Box(
                        modifier = Modifier
--- a/app/src/main/java/com/aiosman/ravenow/ui/index/tabs/shorts/ShortViewCompose.kt
+++ b/app/src/main/java/com/aiosman/ravenow/ui/index/tabs/shorts/ShortViewCompose.kt
@@ -22,6 +22,7 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.ui.graphics.RectangleShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.PlayArrow
 import androidx.compose.material3.ExperimentalMaterial3Api
@@ -61,27 +62,65 @@ import androidx.media3.common.util.UnstableApi
 import androidx.media3.common.util.Util
 import androidx.media3.datasource.DataSource
 import androidx.media3.datasource.DefaultDataSourceFactory
+import androidx.media3.datasource.DefaultHttpDataSource
 import androidx.media3.exoplayer.ExoPlayer
 import androidx.media3.exoplayer.source.ProgressiveMediaSource
 import androidx.media3.ui.AspectRatioFrameLayout
 import androidx.media3.ui.PlayerView
 import com.aiosman.ravenow.R
+import com.aiosman.ravenow.entity.MomentEntity
 import com.aiosman.ravenow.ui.comment.CommentModalContent
+import com.aiosman.ravenow.ui.composables.CustomAsyncImage
 import com.aiosman.ravenow.ui.modifiers.noRippleClickable
 import kotlinx.coroutines.delay
 import kotlinx.coroutines.launch

@Composable
 fun ShortViewCompose(
-    videoItemsUrl: List<String>,
+    videoItemsUrl: List<String> = emptyList(),
+    videoMoments: List<MomentEntity> = emptyList(),
    clickItemPosition: Int = 0,
    videoHeader: @Composable () -> Unit = {},
-    videoBottom: @Composable () -> Unit = {}
+    videoBottom: @Composable ((MomentEntity) -> Unit)? = null,
+    onLikeClick: ((MomentEntity) -> Unit)? = null,
+    onCommentClick: ((MomentEntity) -> Unit)? = null,
+    onFavoriteClick: ((MomentEntity) -> Unit)? = null,
+    onShareClick: ((MomentEntity) -> Unit)? = null,
+    onPageChanged: ((Int) -> Unit)? = null
 ) {
-    val pagerState: PagerState = run {
-        remember {
-            PagerState(clickItemPosition, 0, videoItemsUrl.size - 1)
+    // 优先使用 videoMoments，如果没有则使用 videoItemsUrl
+    val items = if (videoMoments.isNotEmpty()) {
+        videoMoments.mapNotNull { moment ->
+            // MomentVideoEntity 的 url 已经在 toMomentItem() 中添加了 BASE_SERVER 前缀
+            moment.videos?.firstOrNull()?.url
        }
+    } else {
+        videoItemsUrl
+    }
+    
+    // 如果视频列表为空，显示空状态
+    if (items.isEmpty()) {
+        Box(
+            modifier = Modifier.fillMaxSize(),
+            contentAlignment = Alignment.Center
+        ) {
+            Text(
+                text = "暂无视频",
+                color = Color.White,
+                fontSize = 16.sp
+            )
+        }
+        return
+    }
+    
+    // 确保 items 不为空后再创建 PagerState
+    val pagerState: PagerState = remember(items.size) {
+        val maxPage = maxOf(0, items.size - 1)
+        PagerState(
+            currentPage = clickItemPosition.coerceIn(0, maxPage),
+            minPage = 0,
+            maxPage = maxPage
+        )
    }
    val initialLayout = remember {
        mutableStateOf(true)
@@ -89,20 +128,39 @@ fun ShortViewCompose(
    val pauseIconVisibleState = remember {
        mutableStateOf(false)
    }
+    
    Pager(
+        modifier = Modifier
+            .fillMaxSize()
+            .clip(RectangleShape),
        state = pagerState,
        orientation = Orientation.Vertical,
        offscreenLimit = 1
    ) {
        pauseIconVisibleState.value = false
+        val currentMoment = if (videoMoments.isNotEmpty() && page < videoMoments.size) {
+            videoMoments[page]
+        } else {
+            null
+        }
+        
+        // 同步页码到外部（用于返回时恢复进度）
+        LaunchedEffect(pagerState.currentPage) {
+            onPageChanged?.invoke(pagerState.currentPage)
+        }
        SingleVideoItemContent(
-            videoItemsUrl[page],
-            pagerState,
-            page,
-            initialLayout,
-            pauseIconVisibleState,
-            videoHeader,
-            videoBottom
+            videoUrl = items[page],
+            moment = currentMoment,
+            pagerState = pagerState,
+            pager = page,
+            initialLayout = initialLayout,
+            pauseIconVisibleState = pauseIconVisibleState,
+            VideoHeader = videoHeader,
+            VideoBottom = videoBottom,
+            onLikeClick = onLikeClick,
+            onCommentClick = onCommentClick,
+            onFavoriteClick = onFavoriteClick,
+            onShareClick = onShareClick
        )
    }

@@ -116,18 +174,39 @@ fun ShortViewCompose(
@Composable
 private fun SingleVideoItemContent(
    videoUrl: String,
+    moment: MomentEntity?,
    pagerState: PagerState,
    pager: Int,
    initialLayout: MutableState<Boolean>,
    pauseIconVisibleState: MutableState<Boolean>,
-    VideoHeader: @Composable() () -> Unit,
-    VideoBottom: @Composable() () -> Unit,
+    VideoHeader: @Composable() () -> Unit = {},
+    VideoBottom: @Composable ((MomentEntity) -> Unit)? = null,
+    onLikeClick: ((MomentEntity) -> Unit)? = null,
+    onCommentClick: ((MomentEntity) -> Unit)? = null,
+    onFavoriteClick: ((MomentEntity) -> Unit)? = null,
+    onShareClick: ((MomentEntity) -> Unit)? = null
 ) {
-    Box(modifier = Modifier.fillMaxSize()) {
-        VideoPlayer(videoUrl, pagerState, pager, pauseIconVisibleState)
+    Box(
+        modifier = Modifier
+            .fillMaxSize()
+            .clip(RectangleShape) // 确保内容不会溢出到box外
+    ) {
+        VideoPlayer(
+            videoUrl = videoUrl,
+            moment = moment,
+            pagerState = pagerState,
+            pager = pager,
+            pauseIconVisibleState = pauseIconVisibleState,
+            onLikeClick = onLikeClick,
+            onCommentClick = onCommentClick,
+            onFavoriteClick = onFavoriteClick,
+            onShareClick = onShareClick
+        )
        VideoHeader.invoke()
-        Box(modifier = Modifier.align(Alignment.BottomStart)) {
-            VideoBottom.invoke()
+        if (moment != null && VideoBottom != null) {
+            Box(modifier = Modifier.align(Alignment.BottomStart)) {
+                VideoBottom.invoke(moment)
+            }
        }
        if (initialLayout.value) {
            Box(
@@ -143,9 +222,14 @@ private fun SingleVideoItemContent(
@Composable
 fun VideoPlayer(
    videoUrl: String,
+    moment: MomentEntity?,
    pagerState: PagerState,
    pager: Int,
    pauseIconVisibleState: MutableState<Boolean>,
+    onLikeClick: ((MomentEntity) -> Unit)? = null,
+    onCommentClick: ((MomentEntity) -> Unit)? = null,
+    onFavoriteClick: ((MomentEntity) -> Unit)? = null,
+    onShareClick: ((MomentEntity) -> Unit)? = null,
 ) {
    val context = LocalContext.current
    val scope = rememberCoroutineScope()
@@ -158,9 +242,20 @@ fun VideoPlayer(
        ExoPlayer.Builder(context)
            .build()
            .apply {
+                // 创建带有认证头的 HttpDataSource.Factory
+                val httpDataSourceFactory = DefaultHttpDataSource.Factory()
+                    .setUserAgent(Util.getUserAgent(context, context.packageName))
+                    .setDefaultRequestProperties(
+                        mapOf(
+                            "Authorization" to "Bearer ${com.aiosman.ravenow.AppStore.token ?: ""}",
+                            "DEVICE-OS" to "Android"
+                        )
+                    )
+                
+                // 创建 DataSource.Factory，使用自定义的 HttpDataSource.Factory
                val dataSourceFactory: DataSource.Factory = DefaultDataSourceFactory(
                    context,
-                    Util.getUserAgent(context, context.packageName)
+                    httpDataSourceFactory
                )
                val source = ProgressiveMediaSource.Factory(dataSourceFactory)
                    .createMediaSource(MediaItem.fromUri(Uri.parse(videoUrl)))
@@ -275,70 +370,107 @@ fun VideoPlayer(
            modifier = Modifier.padding(bottom = 72.dp, end = 12.dp),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
-            UserAvatar()
-            VideoBtn(icon = R.drawable.rider_pro_video_like, text = "975.9k")
-            VideoBtn(icon = R.drawable.rider_pro_video_comment, text = "1896") {
-                showCommentModal = true
+            if (moment != null) {
+                UserAvatar(avatarUrl = moment.avatar)
+                VideoBtn(
+                    icon = R.drawable.rider_pro_video_like,
+                    text = formatCount(moment.likeCount)
+                ) {
+                    moment?.let { onLikeClick?.invoke(it) }
+                }
+                VideoBtn(
+                    icon = R.drawable.rider_pro_video_comment,
+                    text = formatCount(moment.commentCount)
+                ) {
+                    moment?.let {
+                        showCommentModal = true
+                        onCommentClick?.invoke(it)
+                    }
+                }
+                VideoBtn(
+                    icon = R.drawable.rider_pro_video_favor,
+                    text = formatCount(moment.favoriteCount)
+                ) {
+                    moment?.let { onFavoriteClick?.invoke(it) }
+                }
+                VideoBtn(
+                    icon = R.drawable.rider_pro_video_share,
+                    text = formatCount(moment.shareCount)
+                ) {
+                    moment?.let { onShareClick?.invoke(it) }
+                }
+            } else {
+                UserAvatar()
+                VideoBtn(icon = R.drawable.rider_pro_video_like, text = "0")
+                VideoBtn(icon = R.drawable.rider_pro_video_comment, text = "0") {
+                    showCommentModal = true
+                }
+                VideoBtn(icon = R.drawable.rider_pro_video_favor, text = "0")
+                VideoBtn(icon = R.drawable.rider_pro_video_share, text = "0")
            }
-            VideoBtn(icon = R.drawable.rider_pro_video_favor, text = "234")
-            VideoBtn(icon = R.drawable.rider_pro_video_share, text = "677k")
        }
    }
    // info
-    Box(
-        modifier = Modifier.fillMaxSize(),
-        contentAlignment = Alignment.BottomStart
-    ) {
-        Column(modifier = Modifier.padding(start = 16.dp, bottom = 16.dp)) {
-            Row(
-                modifier = Modifier
-                    .padding(bottom = 8.dp)
-                    .background(color = Color.Gray),
-                verticalAlignment = Alignment.CenterVertically,
-                horizontalArrangement = Arrangement.Start,
-            ) {
-                Image(
-                    modifier = Modifier
-                        .size(20.dp)
-                        .padding(start = 4.dp, end = 6.dp),
-                    painter = painterResource(id = R.drawable.rider_pro_video_location),
-                    contentDescription = ""
-                )
+    if (moment != null) {
+        Box(
+            modifier = Modifier.fillMaxSize(),
+            contentAlignment = Alignment.BottomStart
+        ) {
+            Column(modifier = Modifier.padding(start = 16.dp, bottom = 16.dp)) {
+                if (moment.location.isNotEmpty() && moment.location != "Worldwide") {
+                    Row(
+                        modifier = Modifier
+                            .padding(bottom = 8.dp)
+                            .background(color = Color.Gray),
+                        verticalAlignment = Alignment.CenterVertically,
+                        horizontalArrangement = Arrangement.Start,
+                    ) {
+                        Image(
+                            modifier = Modifier
+                                .size(20.dp)
+                                .padding(start = 4.dp, end = 6.dp),
+                            painter = painterResource(id = R.drawable.rider_pro_video_location),
+                            contentDescription = ""
+                        )
+                        Text(
+                            modifier = Modifier.padding(end = 4.dp),
+                            text = moment.location,
+                            fontSize = 12.sp,
+                            color = Color.White,
+                            style = TextStyle(fontWeight = FontWeight.Bold)
+                        )
+                    }
+                }
                Text(
-                    modifier = Modifier.padding(end = 4.dp),
-                    text = "USA",
-                    fontSize = 12.sp,
+                    text = "@${moment.nickname}",
+                    fontSize = 16.sp,
                    color = Color.White,
                    style = TextStyle(fontWeight = FontWeight.Bold)
                )
+                if (moment.momentTextContent.isNotEmpty()) {
+                    Text(
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .padding(top = 4.dp),
+                        text = moment.momentTextContent,
+                        fontSize = 16.sp,
+                        color = Color.White,
+                        style = TextStyle(fontWeight = FontWeight.Bold),
+                        overflow = TextOverflow.Ellipsis,
+                        maxLines = 2
+                    )
+                }
            }
-            Text(
-                text = "@Kevinlinpr",
-                fontSize = 16.sp,
-                color = Color.White,
-                style = TextStyle(fontWeight = FontWeight.Bold)
-            )
-            Text(
-                modifier = Modifier
-                    .fillMaxWidth()
-                    .padding(top = 4.dp), // 确保Text占用可用宽度
-                text = "Pedro Acosta to join KTM in 2025 on a multi-year deal! \uD83D\uDFE0",
-                fontSize = 16.sp,
-                color = Color.White,
-                style = TextStyle(fontWeight = FontWeight.Bold),
-                overflow = TextOverflow.Ellipsis,  // 超出范围时显示省略号
-                maxLines = 2 // 最多显示两行
-            )
        }
    }

-    if (showCommentModal) {
+    if (showCommentModal && moment != null) {
        ModalBottomSheet(
            onDismissRequest = { showCommentModal = false },
            containerColor = Color.White,
            sheetState = sheetState
        ) {
-            CommentModalContent() {
+            CommentModalContent(postId = moment.id) {

            }
        }
@@ -346,16 +478,37 @@ fun VideoPlayer(
 }

@Composable
-fun UserAvatar() {
-    Image(
+fun UserAvatar(avatarUrl: String? = null) {
+    Box(
        modifier = Modifier
            .padding(bottom = 16.dp)
            .size(40.dp)
            .border(width = 3.dp, color = Color.White, shape = RoundedCornerShape(40.dp))
-            .clip(
-                RoundedCornerShape(40.dp)
-            ), painter = painterResource(id = R.drawable.default_avatar), contentDescription = ""
-    )
+            .clip(RoundedCornerShape(40.dp))
+    ) {
+        if (avatarUrl != null && avatarUrl.isNotEmpty()) {
+            CustomAsyncImage(
+                imageUrl = avatarUrl,
+                contentDescription = "用户头像",
+                modifier = Modifier.fillMaxSize(),
+                defaultRes = R.drawable.default_avatar
+            )
+        } else {
+            Image(
+                painter = painterResource(id = R.drawable.default_avatar),
+                contentDescription = "用户头像"
+            )
+        }
+    }
+}
+
+// 格式化数字显示
+private fun formatCount(count: Int): String {
+    return when {
+        count >= 1_000_000 -> String.format("%.1fM", count / 1_000_000.0)
+        count >= 1_000 -> String.format("%.1fK", count / 1_000.0)
+        else -> count.toString()
+    }
 }

@Composable