通知界面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,17 +187,18 @@ 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)
+                .size(40.dp)
                .clip(CircleShape)
                .noRippleClickable {
                    navController.navigate(
@@ -204,34 +209,36 @@ fun CommentNoticeItem(
                    )
                }
        )
-        }
+        
+        // 右侧内容区域
        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))
+                            .size(40.dp)
+                            .clip(RoundedCornerShape(8.dp))
                    )
-                        // unread indicator
-
-                    }
-
+                    // 未读指示器
                    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,9 +141,22 @@ 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)
+            .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(
@@ -152,31 +165,33 @@ fun FollowItem(
                        )
                    )
                }
-    ) {
-        Row(
-            modifier = Modifier.fillMaxWidth(),
-            verticalAlignment = Alignment.CenterVertically,
-        ) {
-            CustomAsyncImage(
-                context = context,
-                imageUrl = avatar,
-                contentDescription = nickname,
-                modifier = Modifier
-                    .size(40.dp)
-                    .clip(CircleShape)
        )
-            Spacer(modifier = Modifier.width(12.dp))
+        // 右侧内容区域
+        Row(
+            modifier = Modifier
+                .weight(1f)
+                .padding(start = 8.dp),
+            verticalAlignment = Alignment.CenterVertically
+        ) {
            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,18 +155,22 @@ 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(),
-            verticalAlignment = Alignment.Top,
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(vertical = 12.dp, horizontal = 0.dp),
+        verticalAlignment = Alignment.CenterVertically
    ) {
        CustomAsyncImage(
-                context,
+            context = context,
            imageUrl = avatar,
            modifier = Modifier
-                    .size(48.dp)
+                .size(40.dp)
                .clip(CircleShape)
                .noRippleClickable {
                    navController.navigate(
@@ -178,41 +182,56 @@ fun ActionPostNoticeItem(
                },
            contentDescription = action,
        )
-            Spacer(modifier = Modifier.width(12.dp))
-            Column(
+        Row(
            modifier = Modifier
                .weight(1f)
+                .padding(start = 8.dp)
                .noRippleClickable {
                    navController.navigateToPost(
                        id = postId,
                        highlightCommentId = 0,
                        initImagePagerIndex = 0
                    )
-                    }
+                },
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+            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(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(
@@ -240,48 +260,69 @@ fun LikeCommentNoticeItem(
                    )
                }
            }
-    ) {
-        Row {
-            Column(
-                modifier = Modifier.weight(1f)
    ) {
        Row(
-                    modifier = Modifier.fillMaxWidth(),
-                    verticalAlignment = Alignment.Top,
+            verticalAlignment = Alignment.CenterVertically
        ) {
            CustomAsyncImage(
                imageUrl = item.user.avatar,
                modifier = Modifier
-                            .size(48.dp)
+                    .size(40.dp)
                    .clip(CircleShape),
                contentDescription = stringResource(R.string.like_your_comment)
            )
-                    Spacer(modifier = Modifier.width(12.dp))
-                    Column(
+            Row(
                modifier = Modifier
                    .weight(1f)
+                    .padding(start = 8.dp),
+                verticalAlignment = Alignment.CenterVertically
+            ) {
+                Column(
+                    modifier = Modifier.weight(1f)
                ) {
                    Text(
                        text = item.user.nickName,
                        fontWeight = FontWeight.Bold,
-                            fontSize = 16.sp,
+                        fontSize = 14.sp,
                        color = AppColors.text,
                        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 {
+                    Spacer(modifier = Modifier.height(4.dp))
+                    Row(
+                        verticalAlignment = Alignment.CenterVertically
+                    ) {
                        Text(
-                                item.likeTime.timeAgo(context),
-                                fontSize = 12.sp,
+                            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.width(4.dp))
+                        Text(
+                            text = item.likeTime.timeAgo(context),
+                            fontSize = 14.sp,
                            color = AppColors.secondaryText
                        )
                    }
                }
+                Spacer(modifier = Modifier.width(4.dp))
+                previewPost?.let {
+                    CustomAsyncImage(
+                        context = context,
+                        imageUrl = it.images[0].thumbnail,
+                        contentDescription = "Post Thumbnail",
+                        modifier = Modifier
+                            .size(40.dp)
+                            .clip(RoundedCornerShape(8.dp)),
+                        contentScale = ContentScale.Crop
+                    )
                }
-                Spacer(modifier = Modifier.height(12.dp))
+            }
+        }
+        Spacer(modifier = Modifier.height(8.dp))
        Row(
            modifier = Modifier.padding(start = 48.dp)
        ) {
@@ -319,34 +360,4 @@ fun LikeCommentNoticeItem(
            }
        }
    }
-            Spacer(modifier = Modifier.width(16.dp))
-            if (item.comment?.replyComment?.post != null) {
-                item.comment.replyComment.post.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)
-                            .clip(RoundedCornerShape(8.dp)),
-                        contentScale = ContentScale.Crop
-                    )
-                }
-            }
-
-
-        }
-    }
 }
--- 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>