通知界面UI调整

修复BUG：通知界面系统栏空白区域调整合适长度，统一点赞/粉丝/评论3个页面的消息长宽和大小
2025-11-26 18:45:17 +08:00
parent 0a1601c16c
commit cfe5ce8102
7 changed files with 227 additions and 197 deletions
--- a/app/src/main/java/com/aiosman/ravenow/ui/comment/notice/CommentNotice.kt
+++ b/app/src/main/java/com/aiosman/ravenow/ui/comment/notice/CommentNotice.kt
@@ -41,9 +41,8 @@ import com.aiosman.ravenow.R
 import com.aiosman.ravenow.entity.CommentEntity
 import com.aiosman.ravenow.exp.timeAgo
 import com.aiosman.ravenow.ui.NavigationRoute
-import com.aiosman.ravenow.ui.comment.NoticeScreenHeader
 import com.aiosman.ravenow.ui.composables.CustomAsyncImage
-import com.aiosman.ravenow.ui.composables.StatusBarSpacer
+import com.aiosman.ravenow.ui.composables.StatusBarMaskLayout
 import com.aiosman.ravenow.ui.modifiers.noRippleClickable
 import com.aiosman.ravenow.ui.navigateToPost
 import kotlinx.coroutines.launch
@@ -68,10 +67,14 @@ fun CommentNoticeScreen(includeStatusBarPadding: Boolean = true){
    val navController = LocalNavController.current
    val AppColors = LocalAppTheme.current

-    Column(
-        modifier = Modifier.fillMaxSize().background(color = AppColors.background)
+    StatusBarMaskLayout(
+        modifier = Modifier
+            .background(color = AppColors.background)
+            .padding(horizontal = 16.dp),
+        darkIcons = !AppState.darkMode,
+        maskBoxBackgroundColor = AppColors.background,
+        includeStatusBarPadding = includeStatusBarPadding
    ) {
-        StatusBarSpacer()
        val isNetworkAvailable = NetworkUtils.isNetworkAvailable(LocalContext.current)

        if (!isNetworkAvailable) {
@@ -109,7 +112,8 @@ fun CommentNoticeScreen(includeStatusBarPadding: Boolean = true){
        } else {
            LazyColumn(
                modifier = Modifier
-                    .fillMaxSize().padding(horizontal = 16.dp)
+                    .weight(1f)
+                    .background(color = AppColors.background)
            ) {
                items(comments.itemCount) { index ->
                    comments[index]?.let { comment ->
@@ -183,55 +187,58 @@ fun CommentNoticeItem(
    val navController = LocalNavController.current
    val context = LocalContext.current
    val AppColors = LocalAppTheme.current
+    val commentPrefix = stringResource(R.string.comment_notice)

    Row(
-        modifier = Modifier.padding(vertical = 20.dp, horizontal = 16.dp)
+        modifier = Modifier.padding(vertical = 12.dp)
    ) {
-        Box {
-            CustomAsyncImage(
-                context = context,
-                imageUrl = commentItem.avatar,
-                contentDescription = commentItem.name,
-                modifier = Modifier
-                    .size(48.dp)
-                    .clip(CircleShape)
-                    .noRippleClickable {
-                        navController.navigate(
-                            NavigationRoute.AccountProfile.route.replace(
-                                "{id}",
-                                commentItem.author.toString()
-                            )
+        // 左侧头像区域
+        CustomAsyncImage(
+            context = context,
+            imageUrl = commentItem.avatar,
+            contentDescription = commentItem.name,
+            modifier = Modifier
+                .size(40.dp)
+                .clip(CircleShape)
+                .noRippleClickable {
+                    navController.navigate(
+                        NavigationRoute.AccountProfile.route.replace(
+                            "{id}",
+                            commentItem.author.toString()
                        )
-                    }
-            )
-        }
+                    )
+                }
+        )
+        
+        // 右侧内容区域
        Row(
            modifier = Modifier
                .weight(1f)
-                .padding(start = 12.dp)
+                .padding(start = 8.dp)
                .noRippleClickable {
                    onPostClick()
                }
        ) {
+            // 主要信息列
            Column(
                modifier = Modifier.weight(1f)
            ) {
                Text(
                    text = commentItem.name,
-                    fontSize = 18.sp,
-                    modifier = Modifier,
+                    fontSize = 14.sp,
                    color = AppColors.text,
                    maxLines = 1,
                    overflow = TextOverflow.Ellipsis
                )
                Spacer(modifier = Modifier.height(4.dp))
+                // 评论内容行
                Row {
                    var text = commentItem.comment
                    if (commentItem.parentCommentId != null) {
                        text = "Reply you: $text"
                    }
                    Text(
-                        text = text,
+                        text = "$commentPrefix $text",
                        fontSize = 14.sp,
                        maxLines = 1,
                        color = AppColors.secondaryText,
@@ -245,25 +252,20 @@ fun CommentNoticeItem(
                        color = AppColors.secondaryText,
                    )
                }
-
            }
-            Spacer(modifier = Modifier.width(24.dp))
+            Spacer(modifier = Modifier.width(4.dp))
+            // 右侧帖子图片
            commentItem.post?.let {
                Box {
-                    Box(
-                        modifier = Modifier.padding(4.dp)
-                    ) {
-                        CustomAsyncImage(
-                            context = context,
-                            imageUrl = it.images[0].thumbnail,
-                            contentDescription = "Post Image",
-                            modifier = Modifier
-                                .size(48.dp).clip(RoundedCornerShape(8.dp))
-                        )
-                        // unread indicator
-
-                    }
-
+                    CustomAsyncImage(
+                        context = context,
+                        imageUrl = it.images[0].thumbnail,
+                        contentDescription = "Post Image",
+                        modifier = Modifier
+                            .size(40.dp)
+                            .clip(RoundedCornerShape(8.dp))
+                    )
+                    // 未读指示器
                    if (commentItem.unread) {
                        Box(
                            modifier = Modifier
@@ -273,11 +275,7 @@ fun CommentNoticeItem(
                        )
                    }
                }
-
-
            }
        }
-
-
    }
 }
--- a/app/src/main/java/com/aiosman/ravenow/ui/follower/FollowerNotice.kt
+++ b/app/src/main/java/com/aiosman/ravenow/ui/follower/FollowerNotice.kt
@@ -141,42 +141,57 @@ fun FollowItem(
    val AppColors = LocalAppTheme.current
    val context = LocalContext.current
    val navController = LocalNavController.current
-    Box(
+    val followText = stringResource(R.string.followed_you)
+
+    Row(
        modifier = Modifier
-            .padding(vertical = 16.dp)
-            .noRippleClickable {
-                navController.navigate(
-                    NavigationRoute.AccountProfile.route.replace(
-                        "{id}",
-                        userId.toString()
-                    )
-                )
-            }
+            .fillMaxWidth()
+            .padding(vertical = 12.dp),
+        verticalAlignment = Alignment.CenterVertically
    ) {
+        // 左侧头像区域
+        CustomAsyncImage(
+            context = context,
+            imageUrl = avatar,
+            contentDescription = nickname,
+            modifier = Modifier
+                .size(40.dp)
+                .clip(CircleShape)
+                .noRippleClickable {
+                    navController.navigate(
+                        NavigationRoute.AccountProfile.route.replace(
+                            "{id}",
+                            userId.toString()
+                        )
+                    )
+                }
+        )
+        // 右侧内容区域
        Row(
-            modifier = Modifier.fillMaxWidth(),
-            verticalAlignment = Alignment.CenterVertically,
+            modifier = Modifier
+                .weight(1f)
+                .padding(start = 8.dp),
+            verticalAlignment = Alignment.CenterVertically
        ) {
-            CustomAsyncImage(
-                context = context,
-                imageUrl = avatar,
-                contentDescription = nickname,
-                modifier = Modifier
-                    .size(40.dp)
-                    .clip(CircleShape)
-            )
-            Spacer(modifier = Modifier.width(12.dp))
            Column(
                modifier = Modifier.weight(1f)
            ) {
                Text(
                    text = nickname,
                    fontWeight = FontWeight.Bold,
-                    fontSize = 16.sp,
+                    fontSize = 14.sp,
                    color = AppColors.text,
                    maxLines = 1,
                    overflow = TextOverflow.Ellipsis
                )
+                Spacer(modifier = Modifier.height(4.dp))
+                Text(
+                    text = followText,
+                    fontSize = 14.sp,
+                    color = AppColors.secondaryText,
+                    maxLines = 1,
+                    overflow = TextOverflow.Ellipsis
+                )
            }
            if (!isFollowing && userId != AppState.UserId) {
                FollowButton(
--- a/app/src/main/java/com/aiosman/ravenow/ui/like/LikePage.kt
+++ b/app/src/main/java/com/aiosman/ravenow/ui/like/LikePage.kt
@@ -155,64 +155,83 @@ fun ActionPostNoticeItem(
    val navController = LocalNavController.current
    val AppColors = LocalAppTheme.current

-    Box(
-        modifier = Modifier.padding(vertical = 16.dp)
+    val actionLabel = when (action) {
+        "favourite" -> stringResource(R.string.favourite_your_post)
+        else -> stringResource(R.string.like_your_post)
+    }
+
+    Row(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(vertical = 12.dp, horizontal = 0.dp),
+        verticalAlignment = Alignment.CenterVertically
    ) {
+        CustomAsyncImage(
+            context = context,
+            imageUrl = avatar,
+            modifier = Modifier
+                .size(40.dp)
+                .clip(CircleShape)
+                .noRippleClickable {
+                    navController.navigate(
+                        NavigationRoute.AccountProfile.route.replace(
+                            "{id}",
+                            userId.toString()
+                        )
+                    )
+                },
+            contentDescription = action,
+        )
        Row(
-            modifier = Modifier.fillMaxWidth(),
-            verticalAlignment = Alignment.Top,
+            modifier = Modifier
+                .weight(1f)
+                .padding(start = 8.dp)
+                .noRippleClickable {
+                    navController.navigateToPost(
+                        id = postId,
+                        highlightCommentId = 0,
+                        initImagePagerIndex = 0
+                    )
+                },
+            verticalAlignment = Alignment.CenterVertically
        ) {
-            CustomAsyncImage(
-                context,
-                imageUrl = avatar,
-                modifier = Modifier
-                    .size(48.dp)
-                    .clip(CircleShape)
-                    .noRippleClickable {
-                        navController.navigate(
-                            NavigationRoute.AccountProfile.route.replace(
-                                "{id}",
-                                userId.toString()
-                            )
-                        )
-                    },
-                contentDescription = action,
-            )
-            Spacer(modifier = Modifier.width(12.dp))
            Column(
-                modifier = Modifier
-                    .weight(1f)
-                    .noRippleClickable {
-                        navController.navigateToPost(
-                            id = postId,
-                            highlightCommentId = 0,
-                            initImagePagerIndex = 0
-                        )
-                    }
+                modifier = Modifier.weight(1f)
            ) {
                Text(
                    text = nickName,
                    fontWeight = FontWeight.Bold,
-                    fontSize = 16.sp,
+                    fontSize = 14.sp,
                    color = AppColors.text,
                    maxLines = 1,
                    overflow = TextOverflow.Ellipsis
                )
-                Spacer(modifier = Modifier.height(2.dp))
-                when (action) {
-                    "like" -> Text(stringResource(R.string.like_your_post), color = AppColors.text)
-                    "favourite" -> Text(stringResource(R.string.favourite_your_post), color = AppColors.text)
-                }
-                Spacer(modifier = Modifier.height(2.dp))
-                Row {
-                    Text(likeTime.timeAgo(context), fontSize = 12.sp, color = AppColors.secondaryText)
+                Spacer(modifier = Modifier.height(4.dp))
+                Row(
+                    verticalAlignment = Alignment.CenterVertically
+                ) {
+                    Text(
+                        text = actionLabel,
+                        fontSize = 14.sp,
+                        color = AppColors.secondaryText,
+                        modifier = Modifier.weight(1f),
+                        maxLines = 1,
+                        overflow = TextOverflow.Ellipsis
+                    )
+                    Spacer(modifier = Modifier.width(4.dp))
+                    Text(
+                        text = likeTime.timeAgo(context),
+                        fontSize = 14.sp,
+                        color = AppColors.secondaryText
+                    )
                }
            }
+            Spacer(modifier = Modifier.width(4.dp))
            CustomAsyncImage(
-                context,
+                context = context,
                imageUrl = thumbnail,
                modifier = Modifier
-                    .size(48.dp)
+                    .size(40.dp)
                    .clip(RoundedCornerShape(8.dp)),
                contentDescription = action,
            )
@@ -227,10 +246,11 @@ fun LikeCommentNoticeItem(
    val navController = LocalNavController.current
    val context = LocalContext.current
    val AppColors = LocalAppTheme.current
+    val previewPost = item.comment?.replyComment?.post ?: item.comment?.post

-    Box(
+    Column(
        modifier = Modifier
-            .padding(vertical = 16.dp)
+            .padding(vertical = 12.dp)
            .noRippleClickable {
                item.comment?.postId.let {
                    navController.navigateToPost(
@@ -241,112 +261,103 @@ fun LikeCommentNoticeItem(
                }
            }
    ) {
-        Row {
-            Column(
-                modifier = Modifier.weight(1f)
+        Row(
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+            CustomAsyncImage(
+                imageUrl = item.user.avatar,
+                modifier = Modifier
+                    .size(40.dp)
+                    .clip(CircleShape),
+                contentDescription = stringResource(R.string.like_your_comment)
+            )
+            Row(
+                modifier = Modifier
+                    .weight(1f)
+                    .padding(start = 8.dp),
+                verticalAlignment = Alignment.CenterVertically
            ) {
-                Row(
-                    modifier = Modifier.fillMaxWidth(),
-                    verticalAlignment = Alignment.Top,
+                Column(
+                    modifier = Modifier.weight(1f)
                ) {
-                    CustomAsyncImage(
-                        imageUrl = item.user.avatar,
-                        modifier = Modifier
-                            .size(48.dp)
-                            .clip(CircleShape),
-                        contentDescription = stringResource(R.string.like_your_comment)
+                    Text(
+                        text = item.user.nickName,
+                        fontWeight = FontWeight.Bold,
+                        fontSize = 14.sp,
+                        color = AppColors.text,
+                        maxLines = 1,
+                        overflow = TextOverflow.Ellipsis
                    )
-                    Spacer(modifier = Modifier.width(12.dp))
-                    Column(
-                        modifier = Modifier
-                            .weight(1f)
+                    Spacer(modifier = Modifier.height(4.dp))
+                    Row(
+                        verticalAlignment = Alignment.CenterVertically
                    ) {
                        Text(
-                            text = item.user.nickName,
-                            fontWeight = FontWeight.Bold,
-                            fontSize = 16.sp,
-                            color = AppColors.text,
+                            text = stringResource(R.string.like_your_comment),
+                            fontSize = 14.sp,
+                            color = AppColors.secondaryText,
+                            modifier = Modifier.weight(1f),
                            maxLines = 1,
                            overflow = TextOverflow.Ellipsis
                        )
-                        Spacer(modifier = Modifier.height(2.dp))
-                        Text(stringResource(R.string.like_your_comment), color = AppColors.text)
-                        Spacer(modifier = Modifier.height(2.dp))
-                        Row {
-                            Text(
-                                item.likeTime.timeAgo(context),
-                                fontSize = 12.sp,
-                                color = AppColors.secondaryText
-                            )
-                        }
-                    }
-                }
-                Spacer(modifier = Modifier.height(12.dp))
-                Row(
-                    modifier = Modifier.padding(start = 48.dp)
-                ) {
-                    Box(
-                        modifier = Modifier
-                            .size(24.dp)
-                            .background(Color.Gray.copy(alpha = 0.1f))
-                    ) {
-                        CustomAsyncImage(
-                            context = context,
-                            imageUrl = AppState.profile?.avatar ?: "",
-                            contentDescription = "Comment Profile Picture",
-                            modifier = Modifier
-                                .size(24.dp)
-                                .clip(RoundedCornerShape(24.dp)),
-                            contentScale = ContentScale.Crop
-                        )
-                    }
-                    Spacer(modifier = Modifier.width(8.dp))
-                    Column(
-                        modifier = Modifier.weight(1f)
-                    ) {
+                        Spacer(modifier = Modifier.width(4.dp))
                        Text(
-                            text = AppState.profile?.nickName ?: "",
-                            fontWeight = FontWeight.W600,
+                            text = item.likeTime.timeAgo(context),
                            fontSize = 14.sp,
-                            color = AppColors.text
-                        )
-                        Text(
-                            text = item.comment?.content ?: "",
-                            fontSize = 12.sp,
-                            color = AppColors.secondaryText,
-                            maxLines = 2
+                            color = AppColors.secondaryText
                        )
                    }
                }
-            }
-            Spacer(modifier = Modifier.width(16.dp))
-            if (item.comment?.replyComment?.post != null) {
-                item.comment.replyComment.post.let {
+                Spacer(modifier = Modifier.width(4.dp))
+                previewPost?.let {
                    CustomAsyncImage(
                        context = context,
                        imageUrl = it.images[0].thumbnail,
                        contentDescription = "Post Thumbnail",
                        modifier = Modifier
-                            .size(48.dp)
-                            .clip(RoundedCornerShape(8.dp)),
-                        contentScale = ContentScale.Crop
-                    )
-                }
-            } else {
-                item.comment?.post?.let {
-                    CustomAsyncImage(
-                        context = context,
-                        imageUrl = it.images[0].thumbnail,
-                        contentDescription = "Post Thumbnail",
-                        modifier = Modifier
-                            .size(48.dp)
+                            .size(40.dp)
                            .clip(RoundedCornerShape(8.dp)),
                        contentScale = ContentScale.Crop
                    )
                }
            }
-
-
+        }
+        Spacer(modifier = Modifier.height(8.dp))
+        Row(
+            modifier = Modifier.padding(start = 48.dp)
+        ) {
+            Box(
+                modifier = Modifier
+                    .size(24.dp)
+                    .background(Color.Gray.copy(alpha = 0.1f))
+            ) {
+                CustomAsyncImage(
+                    context = context,
+                    imageUrl = AppState.profile?.avatar ?: "",
+                    contentDescription = "Comment Profile Picture",
+                    modifier = Modifier
+                        .size(24.dp)
+                        .clip(RoundedCornerShape(24.dp)),
+                    contentScale = ContentScale.Crop
+                )
+            }
+            Spacer(modifier = Modifier.width(8.dp))
+            Column(
+                modifier = Modifier.weight(1f)
+            ) {
+                Text(
+                    text = AppState.profile?.nickName ?: "",
+                    fontWeight = FontWeight.W600,
+                    fontSize = 14.sp,
+                    color = AppColors.text
+                )
+                Text(
+                    text = item.comment?.content ?: "",
+                    fontSize = 12.sp,
+                    color = AppColors.secondaryText,
+                    maxLines = 2
+                )
+            }
        }
    }
 }
--- a/app/src/main/java/com/aiosman/ravenow/ui/notification/Notification.kt
+++ b/app/src/main/java/com/aiosman/ravenow/ui/notification/Notification.kt
@@ -107,7 +107,7 @@ fun NotificationScreen() {
            TabSpacer()

            TabItem(
-                text = stringResource(R.string.followers_upper),
+                text = stringResource(R.string.follow_upper),
                isSelected = pagerState.currentPage == 1,
                onClick = {
                    scope.launch {
--- a/app/src/main/res/values-ja/strings.xml
+++ b/app/src/main/res/values-ja/strings.xml
@@ -75,6 +75,7 @@
    <string name="bio">署名</string>
    <string name="nickname">名前</string>
    <string name="comment">コメント</string>
+    <string name="comment_notice">コメント:</string>
    <string name="order_comment_default">デフォルト</string>
    <string name="order_comment_latest">最新</string>
    <string name="order_comment_earliest">最も古い</string>
@@ -102,6 +103,7 @@
    <string name="private_policy_keyword">Rave Nowのプライバシーポリシー</string>
    <string name="gallery">ギャラリー</string>
    <string name="chat_upper">チャット</string>
+    <string name="followed_you">フォローしました</string>
    <string name="like_your_post">あなたの投稿にいいねしました</string>
    <string name="favourite_your_post">あなたの投稿をお気に入りにしました</string>
    <string name="like_your_comment">あなたのコメントにいいねしました</string>
--- a/app/src/main/res/values-zh/strings.xml
+++ b/app/src/main/res/values-zh/strings.xml
@@ -80,6 +80,7 @@
    <string name="bio">个性签名</string>
    <string name="nickname">昵称</string>
    <string name="comment">评论</string>
+    <string name="comment_notice">评论:</string>
    <string name="order_comment_default">默认</string>
    <string name="order_comment_latest">最新</string>
    <string name="order_comment_earliest">最早</string>
@@ -107,6 +108,7 @@
    <string name="private_policy_keyword">用户协议</string>
    <string name="gallery">图片</string>
    <string name="chat_upper">私信</string>
+    <string name="followed_you">关注了你</string>
    <string name="like_your_post">喜欢了你的动态</string>
    <string name="favourite_your_post">收藏了你的动态</string>
    <string name="like_your_comment">喜欢了你的评论</string>
--- a/app/src/main/res/values/strings.xml
+++ b/app/src/main/res/values/strings.xml
@@ -74,6 +74,7 @@
    <string name="bio">Signature</string>
    <string name="nickname">Name</string>
    <string name="comment">COMMENTS</string>
+    <string name="comment_notice">commented:</string>
    <string name="order_comment_default">Default</string>
    <string name="order_comment_latest">Latest</string>
    <string name="order_comment_earliest">Earliest</string>
@@ -101,6 +102,7 @@
    <string name="private_policy_keyword">Rave Now’s Privacy Policy</string>
    <string name="gallery">Gallery</string>
    <string name="chat_upper">CHAT</string>
+    <string name="followed_you">followed you</string>
    <string name="like_your_post">Like your post</string>
    <string name="favourite_your_post">Favourite your post</string>
    <string name="like_your_comment">Like your comment</string>