Initial frontend repository commit.
Include app source and update .gitignore to exclude local release artifacts and signing files. Made-with: Cursor
This commit is contained in:
369
src/components/business/SystemMessageItem.tsx
Normal file
369
src/components/business/SystemMessageItem.tsx
Normal file
@@ -0,0 +1,369 @@
|
||||
/**
|
||||
* SystemMessageItem 系统消息项组件
|
||||
* 根据系统消息类型显示不同图标和内容
|
||||
* 参考 QQ 10000 系统消息和微信服务通知样式
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { View, TouchableOpacity, StyleSheet } from 'react-native';
|
||||
import { MaterialCommunityIcons } from '@expo/vector-icons';
|
||||
import { formatDistanceToNow } from 'date-fns';
|
||||
import { zhCN } from 'date-fns/locale';
|
||||
import { colors, spacing, borderRadius } 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;
|
||||
}
|
||||
|
||||
// 系统消息类型到图标和颜色的映射
|
||||
const getSystemMessageIcon = (
|
||||
systemType: SystemMessageType
|
||||
): { icon: keyof typeof MaterialCommunityIcons.glyphMap; color: string; bgColor: string } => {
|
||||
switch (systemType) {
|
||||
case 'like_post':
|
||||
case 'like_comment':
|
||||
case 'like_reply':
|
||||
case 'favorite_post':
|
||||
return {
|
||||
icon: 'heart',
|
||||
color: colors.error.main,
|
||||
bgColor: colors.error.light + '20',
|
||||
};
|
||||
case 'comment':
|
||||
return {
|
||||
icon: 'comment',
|
||||
color: colors.info.main,
|
||||
bgColor: colors.info.light + '20',
|
||||
};
|
||||
case 'reply':
|
||||
return {
|
||||
icon: 'reply',
|
||||
color: colors.success.main,
|
||||
bgColor: colors.success.light + '20',
|
||||
};
|
||||
case 'follow':
|
||||
return {
|
||||
icon: 'account-plus',
|
||||
color: '#9C27B0', // 紫色
|
||||
bgColor: '#9C27B020',
|
||||
};
|
||||
case 'mention':
|
||||
return {
|
||||
icon: 'at',
|
||||
color: colors.warning.main,
|
||||
bgColor: colors.warning.light + '20',
|
||||
};
|
||||
case 'system':
|
||||
return {
|
||||
icon: 'cog',
|
||||
color: colors.text.secondary,
|
||||
bgColor: colors.background.disabled,
|
||||
};
|
||||
case 'announcement':
|
||||
case 'announce':
|
||||
return {
|
||||
icon: 'bullhorn',
|
||||
color: colors.primary.main,
|
||||
bgColor: colors.primary.light + '20',
|
||||
};
|
||||
case 'group_invite':
|
||||
return {
|
||||
icon: 'account-multiple-plus',
|
||||
color: colors.primary.main,
|
||||
bgColor: colors.primary.light + '20',
|
||||
};
|
||||
case 'group_join_apply':
|
||||
return {
|
||||
icon: 'account-clock',
|
||||
color: colors.warning.main,
|
||||
bgColor: colors.warning.light + '20',
|
||||
};
|
||||
case 'group_join_approved':
|
||||
return {
|
||||
icon: 'check-circle',
|
||||
color: colors.success.main,
|
||||
bgColor: colors.success.light + '20',
|
||||
};
|
||||
case 'group_join_rejected':
|
||||
return {
|
||||
icon: 'close-circle',
|
||||
color: colors.error.main,
|
||||
bgColor: colors.error.light + '20',
|
||||
};
|
||||
default:
|
||||
return {
|
||||
icon: 'bell',
|
||||
color: colors.text.secondary,
|
||||
bgColor: colors.background.disabled,
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
// 获取系统消息标题
|
||||
const getSystemMessageTitle = (message: SystemMessageResponse): string => {
|
||||
const { system_type, extra_data } = message;
|
||||
// 兼容后端返回的 actor_name 和 operator_name
|
||||
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,
|
||||
}) => {
|
||||
// 格式化时间
|
||||
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;
|
||||
// 兼容后端返回的 actor_name 和 operator_name
|
||||
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 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';
|
||||
|
||||
return (
|
||||
<TouchableOpacity
|
||||
style={styles.container}
|
||||
onPress={onPress}
|
||||
activeOpacity={onPress ? 0.7 : 1}
|
||||
disabled={!onPress}
|
||||
>
|
||||
{/* 图标/头像区域 */}
|
||||
<View style={styles.iconContainer}>
|
||||
{showGroupAvatar ? (
|
||||
<Avatar
|
||||
source={groupAvatar || ''}
|
||||
size={44}
|
||||
name={extra_data?.group_name || '群聊'}
|
||||
/>
|
||||
) : showOperatorAvatar ? (
|
||||
<Avatar
|
||||
source={operatorAvatar || ''}
|
||||
size={44}
|
||||
name={operatorName}
|
||||
onPress={onAvatarPress}
|
||||
/>
|
||||
) : (
|
||||
<View style={[styles.iconWrapper, { backgroundColor: bgColor }]}>
|
||||
<MaterialCommunityIcons name={icon} size={22} color={color} />
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
|
||||
{/* 内容区域 */}
|
||||
<View style={styles.content}>
|
||||
{/* 标题行 */}
|
||||
<View style={styles.titleRow}>
|
||||
<Text variant="body" style={styles.title} numberOfLines={1}>
|
||||
{title}
|
||||
</Text>
|
||||
<Text variant="caption" color={colors.text.secondary}>
|
||||
{formatTime(message.created_at)}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
{/* 消息内容 */}
|
||||
<Text variant="caption" color={colors.text.secondary} numberOfLines={2} style={styles.messageContent}>
|
||||
{message.content}
|
||||
</Text>
|
||||
|
||||
{/* 附加信息 - 优先显示 target_title，图标根据 target_type 区分 */}
|
||||
{(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-outline' : 'file-document-outline';
|
||||
return (
|
||||
<View style={styles.extraInfo}>
|
||||
<MaterialCommunityIcons name={iconName} size={12} color={colors.text.hint} />
|
||||
<Text variant="caption" color={colors.text.hint} numberOfLines={1} style={styles.extraText}>
|
||||
{previewText}
|
||||
</Text>
|
||||
</View>
|
||||
);
|
||||
})()}
|
||||
|
||||
{isActionable && (
|
||||
<View style={styles.actionsRow}>
|
||||
<TouchableOpacity
|
||||
style={[styles.actionBtn, styles.rejectBtn]}
|
||||
onPress={() => onRequestAction?.(false)}
|
||||
disabled={requestActionLoading}
|
||||
>
|
||||
<Text variant="caption" color={colors.error.main}>拒绝</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
style={[styles.actionBtn, styles.approveBtn]}
|
||||
onPress={() => onRequestAction?.(true)}
|
||||
disabled={requestActionLoading}
|
||||
>
|
||||
<Text variant="caption" color={colors.success.main}>同意</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.lg,
|
||||
backgroundColor: colors.background.paper,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: colors.divider,
|
||||
},
|
||||
iconContainer: {
|
||||
marginRight: spacing.md,
|
||||
},
|
||||
iconWrapper: {
|
||||
width: 44,
|
||||
height: 44,
|
||||
borderRadius: 22,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
content: {
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
},
|
||||
titleRow: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
marginBottom: spacing.xs,
|
||||
},
|
||||
title: {
|
||||
fontWeight: '600',
|
||||
flex: 1,
|
||||
marginRight: spacing.sm,
|
||||
},
|
||||
messageContent: {
|
||||
lineHeight: 18,
|
||||
},
|
||||
extraInfo: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
marginTop: spacing.xs,
|
||||
backgroundColor: colors.background.default,
|
||||
paddingHorizontal: spacing.sm,
|
||||
paddingVertical: spacing.xs,
|
||||
borderRadius: borderRadius.sm,
|
||||
alignSelf: 'flex-start',
|
||||
},
|
||||
extraText: {
|
||||
marginLeft: spacing.xs,
|
||||
flex: 1,
|
||||
},
|
||||
actionsRow: {
|
||||
flexDirection: 'row',
|
||||
marginTop: spacing.sm,
|
||||
},
|
||||
actionBtn: {
|
||||
paddingVertical: spacing.xs,
|
||||
paddingHorizontal: spacing.md,
|
||||
borderRadius: borderRadius.sm,
|
||||
borderWidth: 1,
|
||||
marginRight: spacing.sm,
|
||||
},
|
||||
rejectBtn: {
|
||||
borderColor: colors.error.light,
|
||||
backgroundColor: colors.error.light + '18',
|
||||
},
|
||||
approveBtn: {
|
||||
borderColor: colors.success.light,
|
||||
backgroundColor: colors.success.light + '18',
|
||||
},
|
||||
arrowContainer: {
|
||||
marginLeft: spacing.sm,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
height: 20,
|
||||
},
|
||||
});
|
||||
|
||||
export default SystemMessageItem;
|
||||
Reference in New Issue
Block a user