通知界面UI调整

修复BUG：通知界面系统栏空白区域调整合适长度，统一点赞/粉丝/评论3个页面的消息长宽和大小

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(
+    StatusBarMaskLayout(
-        modifier = Modifier.fillMaxSize().background(color = AppColors.background)
+        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,
+                    fontSize = 14.sp,
-                    modifier = Modifier,
                     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(
                         )
                     }
                 }
-
-
             }
         }
-
-
     }
 }

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(

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(
+    val actionLabel = when (action) {
-        modifier = Modifier.padding(vertical = 16.dp)
+        "favourite" -> stringResource(R.string.favourite_your_post)
-    ) {
+        else -> stringResource(R.string.like_your_post)
+    }
+
     Row(
-            modifier = Modifier.fillMaxWidth(),
+        modifier = Modifier
-            verticalAlignment = Alignment.Top,
+            .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))
+        Row(
-            Column(
             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))
+                Spacer(modifier = Modifier.height(4.dp))
-                when (action) {
+                Row(
-                    "like" -> Text(stringResource(R.string.like_your_post), color = AppColors.text)
+                    verticalAlignment = Alignment.CenterVertically
-                    "favourite" -> Text(stringResource(R.string.favourite_your_post), color = AppColors.text)
+                ) {
-                }
+                    Text(
-                Spacer(modifier = Modifier.height(2.dp))
+                        text = actionLabel,
-                Row {
+                        fontSize = 14.sp,
-                    Text(likeTime.timeAgo(context), fontSize = 12.sp, color = AppColors.secondaryText)
+                        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.CenterVertically
-                    verticalAlignment = Alignment.Top,
         ) {
             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))
+            Row(
-                    Column(
                 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))
+                    Spacer(modifier = Modifier.height(4.dp))
-                        Text(stringResource(R.string.like_your_comment), color = AppColors.text)
+                    Row(
-                        Spacer(modifier = Modifier.height(2.dp))
+                        verticalAlignment = Alignment.CenterVertically
-                        Row {
+                    ) {
                         Text(
-                                item.likeTime.timeAgo(context),
+                            text = stringResource(R.string.like_your_comment),
-                                fontSize = 12.sp,
+                            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
-                    )
-                }
-            }
-
-
-        }
-    }
 }

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 {

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>

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>

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>