diff --git a/src/screens/message/components/ChatScreen/MessageBubble.tsx b/src/screens/message/components/ChatScreen/MessageBubble.tsx index 8f39a5b..fb96c44 100644 --- a/src/screens/message/components/ChatScreen/MessageBubble.tsx +++ b/src/screens/message/components/ChatScreen/MessageBubble.tsx @@ -408,7 +408,7 @@ export const MessageBubble: React.FC = ({ )} - {/* 群聊模式:显示发送者昵称 */} + {/* 群聊模式:显示发送者昵称 - 放在气泡上方 */} {isGroupChat && !isMe && senderInfo && ( {senderInfo.nickname} )} diff --git a/src/screens/message/components/EmbeddedChat.tsx b/src/screens/message/components/EmbeddedChat.tsx index 8f7eecf..9aa2fe3 100644 --- a/src/screens/message/components/EmbeddedChat.tsx +++ b/src/screens/message/components/EmbeddedChat.tsx @@ -266,6 +266,43 @@ export const EmbeddedChat: React.FC = ({ conversation, onBack } }; + // 格式化时间 + const formatTime = (dateString: string) => { + const date = new Date(dateString); + const now = new Date(); + const isToday = date.toDateString() === now.toDateString(); + + if (isToday) { + return date.toLocaleTimeString('zh-CN', { + hour: '2-digit', + minute: '2-digit', + hour12: false + }); + } else { + return date.toLocaleString('zh-CN', { + month: '2-digit', + day: '2-digit', + hour: '2-digit', + minute: '2-digit', + hour12: false + }); + } + }; + + // 判断是否需要显示时间(与上一条消息间隔超过5分钟) + const shouldShowTime = (index: number) => { + if (index === 0) return true; + const currentMsg = messages[index]; + const prevMsg = messages[index - 1]; + if (!currentMsg || !prevMsg) return true; + + const currentTime = new Date(currentMsg.created_at).getTime(); + const prevTime = new Date(prevMsg.created_at).getTime(); + const diffMinutes = (currentTime - prevTime) / (1000 * 60); + + return diffMinutes >= 5; + }; + // 渲染消息内容 const renderMessageContent = (item: MessageResponse) => { // 撤回消息 @@ -356,8 +393,9 @@ export const EmbeddedChat: React.FC = ({ conversation, onBack }; // 渲染消息 - const renderMessage = ({ item }: { item: MessageResponse }) => { + const renderMessage = ({ item, index }: { item: MessageResponse; index: number }) => { const isMe = String(item.sender_id) === String(currentUser?.id); + const showTime = shouldShowTime(index); // 处理指针事件(鼠标右键)- 使用 onPointerDown 检测鼠标右键 const handlePointerDown = (e: any) => { @@ -372,31 +410,46 @@ export const EmbeddedChat: React.FC = ({ conversation, onBack }; return ( - - {!isMe && ( - + + {/* 时间分隔 */} + {showTime && ( + + {formatTime(item.created_at)} + )} - - {isGroupChat && !isMe && ( - {item.sender?.nickname || item.sender?.username} + + {!isMe && ( + + + + )} + + {/* 群聊模式:显示发送者昵称 - 顶部与头像对齐 */} + {isGroupChat && !isMe && ( + {item.sender?.nickname || item.sender?.username} + )} + + {renderMessageContent(item)} + + + {isMe && ( + + + )} - {renderMessageContent(item)} - {isMe && ( - - )} ); }; @@ -664,9 +717,24 @@ const styles = StyleSheet.create({ padding: spacing.md, paddingBottom: spacing.xl, }, + timeContainer: { + alignItems: 'center', + marginVertical: spacing.md, + }, + timeText: { + color: '#8E8E93', + fontSize: 12, + backgroundColor: 'rgba(142, 142, 147, 0.12)', + paddingHorizontal: spacing.md, + paddingVertical: 6, + borderRadius: 14, + fontWeight: '600', + overflow: 'hidden', + letterSpacing: 0.3, + }, messageRow: { flexDirection: 'row', - alignItems: 'flex-end', + alignItems: 'flex-start', marginBottom: spacing.md, maxWidth: screenWidth * 0.7, }, @@ -677,6 +745,9 @@ const styles = StyleSheet.create({ alignSelf: 'flex-end', justifyContent: 'flex-end', }, + avatarContainer: { + marginTop: 0, + }, messageBubble: { maxWidth: screenWidth * 0.5, paddingHorizontal: spacing.md, @@ -693,10 +764,15 @@ const styles = StyleSheet.create({ borderBottomLeftRadius: 4, ...shadows.sm, }, + messageContent: { + maxWidth: screenWidth * 0.5, + alignItems: 'flex-start', + }, senderName: { fontSize: 12, color: '#999', marginBottom: 2, + marginLeft: 4, }, messageText: { fontSize: 15,