37ddfa8ed6
- Refactor SystemMessageItem with modern card design, gradient colors, and improved visual hierarchy - Add unread indicator, status badges, and enhanced avatar badges for message types - Update CreatePostScreen to require title input and improve placeholder text - Add Android back button handling for notification screens in embedded mode - Replace manual shadow styles with theme shadow utilities across message screens
504 lines
15 KiB
TypeScript
504 lines
15 KiB
TypeScript
/**
|
||
* SystemMessageItem 系统消息项组件 - 美化版
|
||
* 根据系统消息类型显示不同图标和内容
|
||
* 采用卡片式设计，符合胡萝卜BBS整体风格
|
||
*/
|
||
|
||
import React from 'react';
|
||
import { View, TouchableOpacity, StyleSheet, Animated } from 'react-native';
|
||
import { MaterialCommunityIcons } from '@expo/vector-icons';
|
||
import { formatDistanceToNow } from 'date-fns';
|
||
import { zhCN } from 'date-fns/locale';
|
||
import { colors, spacing, borderRadius, shadows, fontSizes } from '../../theme';
|
||
import { SystemMessageResponse, SystemMessageType } from '../../types/dto';
|
||
import Text from '../common/Text';
|
||
import Avatar from '../common/Avatar';
|
||
|
||
interface SystemMessageItemProps {
|
||
message: SystemMessageResponse;
|
||
onPress?: () => void;
|
||
onAvatarPress?: () => void;
|
||
onRequestAction?: (approve: boolean) => void;
|
||
requestActionLoading?: boolean;
|
||
index?: number; // 用于交错动画
|
||
}
|
||
|
||
// 系统消息类型到图标和颜色的映射
|
||
const getSystemMessageIcon = (
|
||
systemType: SystemMessageType
|
||
): { icon: keyof typeof MaterialCommunityIcons.glyphMap; color: string; bgColor: string; gradient: string[] } => {
|
||
switch (systemType) {
|
||
case 'like_post':
|
||
case 'like_comment':
|
||
case 'like_reply':
|
||
case 'favorite_post':
|
||
return {
|
||
icon: 'heart',
|
||
color: '#FF4757',
|
||
bgColor: '#FFE4E6',
|
||
gradient: ['#FF4757', '#FF6B7A'],
|
||
};
|
||
case 'comment':
|
||
return {
|
||
icon: 'comment-text',
|
||
color: '#2196F3',
|
||
bgColor: '#E3F2FD',
|
||
gradient: ['#2196F3', '#64B5F6'],
|
||
};
|
||
case 'reply':
|
||
return {
|
||
icon: 'reply',
|
||
color: '#4CAF50',
|
||
bgColor: '#E8F5E9',
|
||
gradient: ['#4CAF50', '#81C784'],
|
||
};
|
||
case 'follow':
|
||
return {
|
||
icon: 'account-plus',
|
||
color: '#9C27B0',
|
||
bgColor: '#F3E5F5',
|
||
gradient: ['#9C27B0', '#BA68C8'],
|
||
};
|
||
case 'mention':
|
||
return {
|
||
icon: 'at',
|
||
color: '#FF9800',
|
||
bgColor: '#FFF3E0',
|
||
gradient: ['#FF9800', '#FFB74D'],
|
||
};
|
||
case 'system':
|
||
return {
|
||
icon: 'cog',
|
||
color: '#607D8B',
|
||
bgColor: '#ECEFF1',
|
||
gradient: ['#607D8B', '#90A4AE'],
|
||
};
|
||
case 'announcement':
|
||
case 'announce':
|
||
return {
|
||
icon: 'bullhorn',
|
||
color: colors.primary.main,
|
||
bgColor: colors.primary.light + '30',
|
||
gradient: [colors.primary.main, colors.primary.light],
|
||
};
|
||
case 'group_invite':
|
||
return {
|
||
icon: 'account-multiple-plus',
|
||
color: '#00BCD4',
|
||
bgColor: '#E0F7FA',
|
||
gradient: ['#00BCD4', '#4DD0E1'],
|
||
};
|
||
case 'group_join_apply':
|
||
return {
|
||
icon: 'account-clock',
|
||
color: '#FF9800',
|
||
bgColor: '#FFF3E0',
|
||
gradient: ['#FF9800', '#FFB74D'],
|
||
};
|
||
case 'group_join_approved':
|
||
return {
|
||
icon: 'check-circle',
|
||
color: '#4CAF50',
|
||
bgColor: '#E8F5E9',
|
||
gradient: ['#4CAF50', '#81C784'],
|
||
};
|
||
case 'group_join_rejected':
|
||
return {
|
||
icon: 'close-circle',
|
||
color: '#F44336',
|
||
bgColor: '#FFEBEE',
|
||
gradient: ['#F44336', '#E57373'],
|
||
};
|
||
default:
|
||
return {
|
||
icon: 'bell',
|
||
color: '#757575',
|
||
bgColor: '#F5F5F5',
|
||
gradient: ['#757575', '#9E9E9E'],
|
||
};
|
||
}
|
||
};
|
||
|
||
// 获取系统消息标题
|
||
const getSystemMessageTitle = (message: SystemMessageResponse): string => {
|
||
const { system_type, extra_data } = message;
|
||
const operatorName = extra_data?.actor_name || extra_data?.operator_name;
|
||
const groupName = extra_data?.group_name || extra_data?.target_title;
|
||
|
||
switch (system_type) {
|
||
case 'like_post':
|
||
return operatorName ? `${operatorName} 赞了你的帖子` : '有人赞了你的帖子';
|
||
case 'like_comment':
|
||
return operatorName ? `${operatorName} 赞了你的评论` : '有人赞了你的评论';
|
||
case 'like_reply':
|
||
return operatorName ? `${operatorName} 赞了你的回复` : '有人赞了你的回复';
|
||
case 'favorite_post':
|
||
return operatorName ? `${operatorName} 收藏了你的帖子` : '有人收藏了你的帖子';
|
||
case 'comment':
|
||
return operatorName ? `${operatorName} 评论了你的帖子` : '有人评论了你的帖子';
|
||
case 'reply':
|
||
return operatorName ? `${operatorName} 回复了你` : '有人回复了你';
|
||
case 'follow':
|
||
return operatorName ? `${operatorName} 关注了你` : '有人关注了你';
|
||
case 'mention':
|
||
return operatorName ? `${operatorName} @提到了你` : '有人@提到了你';
|
||
case 'system':
|
||
return '系统通知';
|
||
case 'announcement':
|
||
return '公告';
|
||
case 'group_invite':
|
||
return operatorName
|
||
? `${operatorName} 邀请加入群聊 ${groupName || ''}`.trim()
|
||
: `收到群邀请${groupName ? `：${groupName}` : ''}`;
|
||
case 'group_join_apply':
|
||
if (extra_data?.request_status === 'accepted') {
|
||
return operatorName ? `${operatorName} 已同意` : '该请求已同意';
|
||
}
|
||
if (extra_data?.request_status === 'rejected') {
|
||
return operatorName ? `${operatorName} 已拒绝` : '该请求已拒绝';
|
||
}
|
||
return operatorName
|
||
? `${operatorName} 申请加入群聊 ${groupName || ''}`.trim()
|
||
: `收到加群申请${groupName ? `：${groupName}` : ''}`;
|
||
case 'group_join_approved':
|
||
return '加群申请已通过';
|
||
case 'group_join_rejected':
|
||
return '加群申请被拒绝';
|
||
default:
|
||
return '通知';
|
||
}
|
||
};
|
||
|
||
const SystemMessageItem: React.FC<SystemMessageItemProps> = ({
|
||
message,
|
||
onPress,
|
||
onAvatarPress,
|
||
onRequestAction,
|
||
requestActionLoading = false,
|
||
index = 0,
|
||
}) => {
|
||
// 格式化时间
|
||
const formatTime = (dateString: string): string => {
|
||
try {
|
||
return formatDistanceToNow(new Date(dateString), {
|
||
addSuffix: true,
|
||
locale: zhCN,
|
||
});
|
||
} catch {
|
||
return '';
|
||
}
|
||
};
|
||
|
||
const { icon, color, bgColor } = getSystemMessageIcon(message.system_type);
|
||
const title = getSystemMessageTitle(message);
|
||
const { extra_data } = message;
|
||
const operatorName = extra_data?.actor_name || extra_data?.operator_name;
|
||
const operatorAvatar = extra_data?.avatar_url || extra_data?.operator_avatar;
|
||
const groupAvatar = extra_data?.group_avatar;
|
||
const requestStatus = extra_data?.request_status;
|
||
const isActionable =
|
||
(message.system_type === 'group_invite' || message.system_type === 'group_join_apply') &&
|
||
requestStatus === 'pending' &&
|
||
!!onRequestAction;
|
||
const isUnread = message.is_read !== true;
|
||
|
||
// 判断是否显示操作者头像
|
||
const showOperatorAvatar = ['follow', 'like_post', 'like_comment', 'like_reply', 'favorite_post', 'comment', 'reply', 'mention', 'group_join_apply'].includes(
|
||
message.system_type
|
||
);
|
||
const showGroupAvatar = message.system_type === 'group_invite';
|
||
|
||
// 获取状态标签
|
||
const getStatusBadge = () => {
|
||
if (requestStatus === 'accepted') {
|
||
return (
|
||
<View style={[styles.statusBadge, { backgroundColor: '#E8F5E9' }]}>
|
||
<MaterialCommunityIcons name="check" size={10} color="#4CAF50" />
|
||
<Text variant="caption" color="#4CAF50" style={styles.statusText}>已同意</Text>
|
||
</View>
|
||
);
|
||
}
|
||
if (requestStatus === 'rejected') {
|
||
return (
|
||
<View style={[styles.statusBadge, { backgroundColor: '#FFEBEE' }]}>
|
||
<MaterialCommunityIcons name="close" size={10} color="#F44336" />
|
||
<Text variant="caption" color="#F44336" style={styles.statusText}>已拒绝</Text>
|
||
</View>
|
||
);
|
||
}
|
||
return null;
|
||
};
|
||
|
||
return (
|
||
<TouchableOpacity
|
||
style={[
|
||
styles.container,
|
||
isUnread && styles.unreadContainer,
|
||
]}
|
||
onPress={onPress}
|
||
activeOpacity={onPress ? 0.85 : 1}
|
||
disabled={!onPress}
|
||
>
|
||
{/* 左侧未读指示器 */}
|
||
{isUnread && <View style={styles.unreadIndicator} />}
|
||
|
||
{/* 图标/头像区域 */}
|
||
<View style={styles.iconContainer}>
|
||
{showGroupAvatar ? (
|
||
<View style={styles.avatarWrapper}>
|
||
<Avatar
|
||
source={groupAvatar || ''}
|
||
size={48}
|
||
name={extra_data?.group_name || '群聊'}
|
||
/>
|
||
<View style={[styles.typeIconBadge, { backgroundColor: bgColor }]}>
|
||
<MaterialCommunityIcons name={icon} size={12} color={color} />
|
||
</View>
|
||
</View>
|
||
) : showOperatorAvatar ? (
|
||
<View style={styles.avatarWrapper}>
|
||
<Avatar
|
||
source={operatorAvatar || ''}
|
||
size={48}
|
||
name={operatorName}
|
||
onPress={onAvatarPress}
|
||
/>
|
||
<View style={[styles.typeIconBadge, { backgroundColor: bgColor }]}>
|
||
<MaterialCommunityIcons name={icon} size={12} color={color} />
|
||
</View>
|
||
</View>
|
||
) : (
|
||
<View style={[styles.iconWrapper, { backgroundColor: bgColor }]}>
|
||
<MaterialCommunityIcons name={icon} size={24} color={color} />
|
||
</View>
|
||
)}
|
||
</View>
|
||
|
||
{/* 内容区域 */}
|
||
<View style={styles.content}>
|
||
{/* 标题行 */}
|
||
<View style={styles.titleRow}>
|
||
<View style={styles.titleLeft}>
|
||
<Text
|
||
variant="body"
|
||
style={[styles.title, ...(isUnread ? [styles.unreadTitle] : [])]}
|
||
numberOfLines={1}
|
||
>
|
||
{title}
|
||
</Text>
|
||
{getStatusBadge()}
|
||
</View>
|
||
<Text variant="caption" color={colors.text.hint} style={styles.time}>
|
||
{formatTime(message.created_at)}
|
||
</Text>
|
||
</View>
|
||
|
||
{/* 消息内容 */}
|
||
<Text
|
||
variant="caption"
|
||
color={colors.text.secondary}
|
||
numberOfLines={2}
|
||
style={styles.messageContent}
|
||
>
|
||
{message.content}
|
||
</Text>
|
||
|
||
{/* 附加信息 */}
|
||
{(extra_data?.target_title || extra_data?.post_title || extra_data?.comment_preview) &&
|
||
!['group_invite', 'group_join_apply', 'group_join_approved', 'group_join_rejected'].includes(message.system_type) &&
|
||
(() => {
|
||
const isCommentType = ['comment', 'reply'].includes(extra_data?.target_type ?? '');
|
||
const previewText = extra_data?.target_title || extra_data?.post_title || extra_data?.comment_preview;
|
||
const iconName = isCommentType ? 'comment-text-outline' : 'file-document-outline';
|
||
return (
|
||
<View style={styles.extraInfo}>
|
||
<MaterialCommunityIcons name={iconName} size={12} color={colors.primary.main} />
|
||
<Text variant="caption" color={colors.primary.main} numberOfLines={1} style={styles.extraText}>
|
||
{previewText}
|
||
</Text>
|
||
</View>
|
||
);
|
||
})()}
|
||
|
||
{/* 操作按钮 */}
|
||
{isActionable && (
|
||
<View style={styles.actionsRow}>
|
||
<TouchableOpacity
|
||
style={[styles.actionBtn, styles.rejectBtn]}
|
||
onPress={() => onRequestAction?.(false)}
|
||
disabled={requestActionLoading}
|
||
>
|
||
<MaterialCommunityIcons name="close" size={14} color="#F44336" />
|
||
<Text variant="caption" color="#F44336" style={styles.actionBtnText}>拒绝</Text>
|
||
</TouchableOpacity>
|
||
<TouchableOpacity
|
||
style={[styles.actionBtn, styles.approveBtn]}
|
||
onPress={() => onRequestAction?.(true)}
|
||
disabled={requestActionLoading}
|
||
>
|
||
<MaterialCommunityIcons name="check" size={14} color="#4CAF50" />
|
||
<Text variant="caption" color="#4CAF50" style={styles.actionBtnText}>同意</Text>
|
||
</TouchableOpacity>
|
||
</View>
|
||
)}
|
||
</View>
|
||
|
||
{/* 右侧箭头 */}
|
||
{onPress && (
|
||
<View style={styles.arrowContainer}>
|
||
<MaterialCommunityIcons name="chevron-right" size={20} color={colors.text.hint} />
|
||
</View>
|
||
)}
|
||
</TouchableOpacity>
|
||
);
|
||
};
|
||
|
||
const styles = StyleSheet.create({
|
||
container: {
|
||
flexDirection: 'row',
|
||
alignItems: 'flex-start',
|
||
padding: spacing.md,
|
||
backgroundColor: colors.background.paper,
|
||
borderRadius: borderRadius.lg,
|
||
marginHorizontal: spacing.md,
|
||
marginBottom: spacing.sm,
|
||
...shadows.sm,
|
||
},
|
||
unreadContainer: {
|
||
backgroundColor: colors.primary.light + '08',
|
||
borderLeftWidth: 3,
|
||
borderLeftColor: colors.primary.main,
|
||
},
|
||
unreadIndicator: {
|
||
position: 'absolute',
|
||
left: 6,
|
||
top: '50%',
|
||
marginTop: -4,
|
||
width: 8,
|
||
height: 8,
|
||
borderRadius: borderRadius.full,
|
||
backgroundColor: colors.primary.main,
|
||
},
|
||
iconContainer: {
|
||
marginRight: spacing.md,
|
||
},
|
||
avatarWrapper: {
|
||
position: 'relative',
|
||
},
|
||
iconWrapper: {
|
||
width: 48,
|
||
height: 48,
|
||
borderRadius: borderRadius.lg,
|
||
justifyContent: 'center',
|
||
alignItems: 'center',
|
||
},
|
||
typeIconBadge: {
|
||
position: 'absolute',
|
||
bottom: -2,
|
||
right: -2,
|
||
width: 20,
|
||
height: 20,
|
||
borderRadius: borderRadius.full,
|
||
justifyContent: 'center',
|
||
alignItems: 'center',
|
||
borderWidth: 2,
|
||
borderColor: colors.background.paper,
|
||
},
|
||
content: {
|
||
flex: 1,
|
||
justifyContent: 'center',
|
||
minWidth: 0,
|
||
},
|
||
titleRow: {
|
||
flexDirection: 'row',
|
||
justifyContent: 'space-between',
|
||
alignItems: 'center',
|
||
marginBottom: spacing.xs,
|
||
},
|
||
titleLeft: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
flex: 1,
|
||
marginRight: spacing.sm,
|
||
},
|
||
title: {
|
||
fontWeight: '500',
|
||
fontSize: fontSizes.md,
|
||
color: colors.text.primary,
|
||
},
|
||
unreadTitle: {
|
||
fontWeight: '600',
|
||
color: colors.text.primary,
|
||
},
|
||
statusBadge: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
paddingHorizontal: spacing.xs,
|
||
paddingVertical: 2,
|
||
borderRadius: borderRadius.sm,
|
||
marginLeft: spacing.xs,
|
||
},
|
||
statusText: {
|
||
fontSize: 10,
|
||
fontWeight: '500',
|
||
marginLeft: 2,
|
||
},
|
||
time: {
|
||
fontSize: fontSizes.sm,
|
||
flexShrink: 0,
|
||
},
|
||
messageContent: {
|
||
lineHeight: 20,
|
||
fontSize: fontSizes.sm,
|
||
},
|
||
extraInfo: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
marginTop: spacing.xs,
|
||
backgroundColor: colors.primary.light + '12',
|
||
paddingHorizontal: spacing.sm,
|
||
paddingVertical: spacing.xs,
|
||
borderRadius: borderRadius.md,
|
||
alignSelf: 'flex-start',
|
||
},
|
||
extraText: {
|
||
marginLeft: spacing.xs,
|
||
flex: 1,
|
||
fontWeight: '500',
|
||
},
|
||
actionsRow: {
|
||
flexDirection: 'row',
|
||
marginTop: spacing.sm,
|
||
gap: spacing.sm,
|
||
},
|
||
actionBtn: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
paddingVertical: spacing.xs,
|
||
paddingHorizontal: spacing.md,
|
||
borderRadius: borderRadius.md,
|
||
borderWidth: 1,
|
||
gap: spacing.xs,
|
||
},
|
||
rejectBtn: {
|
||
borderColor: '#FFCDD2',
|
||
backgroundColor: '#FFEBEE',
|
||
},
|
||
approveBtn: {
|
||
borderColor: '#C8E6C9',
|
||
backgroundColor: '#E8F5E9',
|
||
},
|
||
actionBtnText: {
|
||
fontWeight: '500',
|
||
},
|
||
arrowContainer: {
|
||
marginLeft: spacing.sm,
|
||
justifyContent: 'center',
|
||
alignItems: 'center',
|
||
height: 20,
|
||
width: 20,
|
||
},
|
||
});
|
||
|
||
export default SystemMessageItem;
|