feat(CommentItem, PostDetailScreen, ReportDialog): integrate report functionality
- Added report button to CommentItem for reporting comments and replies. - Integrated ReportDialog into PostDetailScreen for handling report submissions. - Enhanced ReportDialog with detailed report reasons and improved UI interactions. - Updated styles across various components for a more modern look and feel. Made-with: Cursor
This commit is contained in:
lafay
@@ -1091,13 +1091,15 @@ function createGroupInfoStyles(colors: AppColors) {
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
paddingHorizontal: spacing.md,
|
||||
paddingVertical: spacing.sm,
|
||||
paddingVertical: spacing.md,
|
||||
backgroundColor: colors.background.paper,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: colors.divider,
|
||||
borderBottomWidth: 0.5,
|
||||
borderBottomColor: colors.divider + '60',
|
||||
},
|
||||
pageTitle: {
|
||||
fontWeight: '600',
|
||||
fontWeight: '700',
|
||||
fontSize: fontSizes.xl,
|
||||
letterSpacing: 0.5,
|
||||
},
|
||||
pageHeaderPlaceholder: {
|
||||
width: 40,
|
||||
@@ -1107,8 +1109,8 @@ function createGroupInfoStyles(colors: AppColors) {
|
||||
flex: 1,
|
||||
},
|
||||
scrollContent: {
|
||||
padding: spacing.lg,
|
||||
paddingBottom: spacing.xl,
|
||||
padding: spacing.md,
|
||||
paddingBottom: spacing.xl * 2,
|
||||
},
|
||||
errorContainer: {
|
||||
flex: 1,
|
||||
@@ -1116,13 +1118,14 @@ function createGroupInfoStyles(colors: AppColors) {
|
||||
alignItems: 'center',
|
||||
},
|
||||
|
||||
// 头部卡片样式
|
||||
// 头部卡片样式 - 扁平化设计
|
||||
headerCard: {
|
||||
backgroundColor: colors.background.paper,
|
||||
borderRadius: borderRadius.xl,
|
||||
padding: spacing.lg,
|
||||
marginBottom: spacing.lg,
|
||||
...shadows.sm,
|
||||
marginBottom: spacing.md,
|
||||
borderWidth: 0.5,
|
||||
borderColor: colors.divider + '40',
|
||||
},
|
||||
groupHeader: {
|
||||
flexDirection: 'row',
|
||||
@@ -1134,30 +1137,33 @@ function createGroupInfoStyles(colors: AppColors) {
|
||||
flex: 1,
|
||||
},
|
||||
groupName: {
|
||||
fontWeight: '700',
|
||||
fontWeight: '800',
|
||||
fontSize: fontSizes.xl + 2,
|
||||
marginBottom: spacing.xs,
|
||||
letterSpacing: 0.3,
|
||||
},
|
||||
groupMeta: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: spacing.xs,
|
||||
marginBottom: spacing.xs,
|
||||
},
|
||||
groupNoRow: {
|
||||
marginTop: spacing.xs,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
gap: spacing.sm,
|
||||
},
|
||||
copyGroupNoBtn: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
paddingHorizontal: spacing.sm,
|
||||
paddingVertical: 4,
|
||||
borderRadius: borderRadius.sm,
|
||||
backgroundColor: colors.primary.light + '20',
|
||||
borderRadius: borderRadius.md,
|
||||
backgroundColor: colors.primary.light + '15',
|
||||
},
|
||||
copyGroupNoBtnText: {
|
||||
marginLeft: 4,
|
||||
fontWeight: '500',
|
||||
},
|
||||
descriptionContainer: {
|
||||
flexDirection: 'row',
|
||||
@@ -1165,20 +1171,24 @@ function createGroupInfoStyles(colors: AppColors) {
|
||||
backgroundColor: colors.background.default,
|
||||
borderRadius: borderRadius.lg,
|
||||
padding: spacing.md,
|
||||
borderWidth: 0.5,
|
||||
borderColor: colors.divider + '30',
|
||||
},
|
||||
groupDesc: {
|
||||
marginLeft: spacing.sm,
|
||||
flex: 1,
|
||||
lineHeight: 20,
|
||||
lineHeight: 22,
|
||||
fontWeight: '400',
|
||||
},
|
||||
|
||||
// 通用卡片样式
|
||||
// 通用卡片样式 - 扁平化
|
||||
card: {
|
||||
backgroundColor: colors.background.paper,
|
||||
borderRadius: borderRadius.xl,
|
||||
padding: spacing.lg,
|
||||
marginBottom: spacing.lg,
|
||||
...shadows.sm,
|
||||
marginBottom: spacing.md,
|
||||
borderWidth: 0.5,
|
||||
borderColor: colors.divider + '40',
|
||||
},
|
||||
cardHeader: {
|
||||
flexDirection: 'row',
|
||||
@@ -1189,33 +1199,41 @@ function createGroupInfoStyles(colors: AppColors) {
|
||||
width: 36,
|
||||
height: 36,
|
||||
borderRadius: borderRadius.md,
|
||||
backgroundColor: colors.info.light + '20',
|
||||
backgroundColor: colors.info.light + '15',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
marginRight: spacing.sm,
|
||||
},
|
||||
cardTitle: {
|
||||
fontWeight: '600',
|
||||
fontWeight: '700',
|
||||
fontSize: fontSizes.md + 1,
|
||||
flex: 1,
|
||||
letterSpacing: 0.3,
|
||||
},
|
||||
|
||||
// 公告样式
|
||||
// 公告样式 - 更现代的卡片
|
||||
announcementContent: {
|
||||
backgroundColor: colors.background.default,
|
||||
backgroundColor: colors.warning.light + '08',
|
||||
borderRadius: borderRadius.lg,
|
||||
padding: spacing.md,
|
||||
borderLeftWidth: 3,
|
||||
borderLeftColor: colors.warning.main,
|
||||
},
|
||||
announcementText: {
|
||||
lineHeight: 22,
|
||||
marginBottom: spacing.sm,
|
||||
fontWeight: '400',
|
||||
},
|
||||
announcementTime: {
|
||||
textAlign: 'right',
|
||||
fontWeight: '500',
|
||||
},
|
||||
|
||||
// 成员预览样式
|
||||
memberCount: {
|
||||
marginRight: spacing.xs,
|
||||
fontWeight: '600',
|
||||
color: colors.text.secondary,
|
||||
},
|
||||
memberPreview: {
|
||||
flexDirection: 'row',
|
||||
@@ -1226,7 +1244,7 @@ function createGroupInfoStyles(colors: AppColors) {
|
||||
},
|
||||
memberAvatar: {
|
||||
position: 'relative',
|
||||
marginLeft: -10,
|
||||
marginLeft: -8,
|
||||
},
|
||||
memberAvatarFirst: {
|
||||
marginLeft: 0,
|
||||
@@ -1239,12 +1257,12 @@ function createGroupInfoStyles(colors: AppColors) {
|
||||
borderRadius: borderRadius.sm,
|
||||
paddingHorizontal: 4,
|
||||
paddingVertical: 1,
|
||||
borderWidth: 1.5,
|
||||
borderWidth: 2,
|
||||
borderColor: colors.background.paper,
|
||||
},
|
||||
ownerBadgeText: {
|
||||
fontSize: 8,
|
||||
fontWeight: '700',
|
||||
fontWeight: '800',
|
||||
},
|
||||
moreMembers: {
|
||||
minWidth: 44,
|
||||
@@ -1254,49 +1272,55 @@ function createGroupInfoStyles(colors: AppColors) {
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
borderWidth: 1,
|
||||
borderColor: colors.divider,
|
||||
marginLeft: -10,
|
||||
borderColor: colors.divider + '60',
|
||||
marginLeft: -8,
|
||||
paddingHorizontal: spacing.xs,
|
||||
},
|
||||
moreMembersText: {
|
||||
fontWeight: '600',
|
||||
fontWeight: '700',
|
||||
includeFontPadding: false,
|
||||
fontSize: fontSizes.sm,
|
||||
},
|
||||
|
||||
// 邀请按钮样式
|
||||
// 邀请按钮样式 - 更加醒目
|
||||
inviteButton: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
paddingVertical: spacing.md,
|
||||
borderRadius: borderRadius.lg,
|
||||
backgroundColor: colors.primary.light + '15',
|
||||
borderWidth: 1,
|
||||
borderColor: colors.primary.light,
|
||||
backgroundColor: colors.primary.light + '10',
|
||||
borderWidth: 1.5,
|
||||
borderColor: colors.primary.light + '60',
|
||||
borderStyle: 'dashed',
|
||||
},
|
||||
inviteIconContainer: {
|
||||
width: 32,
|
||||
height: 32,
|
||||
borderRadius: 16,
|
||||
backgroundColor: colors.background.paper,
|
||||
backgroundColor: colors.primary.light + '20',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
marginRight: spacing.sm,
|
||||
},
|
||||
inviteButtonText: {
|
||||
fontWeight: '600',
|
||||
fontWeight: '700',
|
||||
marginRight: spacing.xs,
|
||||
letterSpacing: 0.3,
|
||||
},
|
||||
|
||||
// 设置项样式
|
||||
// 设置项样式 - 更加扁平
|
||||
settingsList: {
|
||||
marginTop: spacing.sm,
|
||||
},
|
||||
settingItem: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
paddingVertical: spacing.sm,
|
||||
paddingVertical: spacing.md,
|
||||
borderRadius: borderRadius.md,
|
||||
paddingHorizontal: spacing.sm,
|
||||
marginLeft: -spacing.sm,
|
||||
marginRight: -spacing.sm,
|
||||
},
|
||||
settingIconContainer: {
|
||||
width: 40,
|
||||
@@ -1308,24 +1332,29 @@ function createGroupInfoStyles(colors: AppColors) {
|
||||
marginRight: spacing.md,
|
||||
},
|
||||
settingIconDanger: {
|
||||
backgroundColor: colors.error.light + '20',
|
||||
backgroundColor: colors.error.light + '15',
|
||||
},
|
||||
settingContent: {
|
||||
flex: 1,
|
||||
},
|
||||
dangerText: {
|
||||
color: colors.error.main,
|
||||
fontWeight: '600',
|
||||
},
|
||||
settingDivider: {
|
||||
marginLeft: 56,
|
||||
width: 'auto',
|
||||
marginVertical: spacing.xs,
|
||||
opacity: 0.5,
|
||||
},
|
||||
|
||||
// 危险操作卡片
|
||||
// 危险操作卡片 - 更加醒目
|
||||
dangerCard: {
|
||||
padding: 0,
|
||||
overflow: 'hidden',
|
||||
borderTopWidth: 1,
|
||||
borderTopColor: colors.error.light + '30',
|
||||
marginTop: spacing.sm,
|
||||
},
|
||||
dangerButton: {
|
||||
flexDirection: 'row',
|
||||
@@ -1333,15 +1362,17 @@ function createGroupInfoStyles(colors: AppColors) {
|
||||
justifyContent: 'center',
|
||||
paddingVertical: spacing.lg,
|
||||
gap: spacing.sm,
|
||||
backgroundColor: colors.error.light + '08',
|
||||
},
|
||||
dangerButtonText: {
|
||||
fontWeight: '600',
|
||||
fontWeight: '700',
|
||||
letterSpacing: 0.3,
|
||||
},
|
||||
|
||||
// 模态框样式
|
||||
// 模态框样式 - 更现代
|
||||
modalOverlay: {
|
||||
flex: 1,
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.5)',
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.45)',
|
||||
justifyContent: 'flex-end',
|
||||
},
|
||||
modalContent: {
|
||||
@@ -1350,7 +1381,7 @@ function createGroupInfoStyles(colors: AppColors) {
|
||||
borderTopRightRadius: borderRadius['2xl'],
|
||||
height: '80%',
|
||||
paddingHorizontal: spacing.lg,
|
||||
paddingTop: spacing.lg,
|
||||
paddingTop: spacing.md,
|
||||
paddingBottom: spacing.xl,
|
||||
},
|
||||
modalHeader: {
|
||||
@@ -1358,24 +1389,29 @@ function createGroupInfoStyles(colors: AppColors) {
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
marginBottom: spacing.lg,
|
||||
paddingBottom: spacing.md,
|
||||
borderBottomWidth: 0.5,
|
||||
borderBottomColor: colors.divider + '60',
|
||||
},
|
||||
modalHeaderButton: {
|
||||
paddingVertical: spacing.sm,
|
||||
minWidth: 60,
|
||||
},
|
||||
modalTitle: {
|
||||
fontWeight: '700',
|
||||
fontSize: fontSizes.xl,
|
||||
fontWeight: '800',
|
||||
fontSize: fontSizes.xl + 1,
|
||||
letterSpacing: 0.5,
|
||||
},
|
||||
saveButton: {
|
||||
fontWeight: '600',
|
||||
fontWeight: '700',
|
||||
letterSpacing: 0.3,
|
||||
},
|
||||
confirmButton: {
|
||||
fontWeight: '600',
|
||||
fontWeight: '700',
|
||||
textAlign: 'right',
|
||||
},
|
||||
|
||||
// 编辑表单样式
|
||||
// 编辑表单样式 - 更现代
|
||||
editForm: {
|
||||
alignItems: 'center',
|
||||
},
|
||||
@@ -1387,12 +1423,17 @@ function createGroupInfoStyles(colors: AppColors) {
|
||||
width: 90,
|
||||
height: 90,
|
||||
borderRadius: 45,
|
||||
borderWidth: 3,
|
||||
borderColor: colors.primary.light + '40',
|
||||
},
|
||||
editAvatarPlaceholder: {
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
backgroundColor: colors.background.default,
|
||||
borderRadius: 45,
|
||||
borderWidth: 2,
|
||||
borderColor: colors.divider,
|
||||
borderStyle: 'dashed',
|
||||
},
|
||||
editAvatarButton: {
|
||||
position: 'absolute',
|
||||
@@ -1413,7 +1454,9 @@ function createGroupInfoStyles(colors: AppColors) {
|
||||
},
|
||||
editLabel: {
|
||||
marginBottom: spacing.sm,
|
||||
fontWeight: '600',
|
||||
fontWeight: '700',
|
||||
fontSize: fontSizes.sm + 1,
|
||||
letterSpacing: 0.3,
|
||||
},
|
||||
editInput: {
|
||||
backgroundColor: colors.background.default,
|
||||
@@ -1422,8 +1465,9 @@ function createGroupInfoStyles(colors: AppColors) {
|
||||
paddingVertical: spacing.md,
|
||||
fontSize: fontSizes.md,
|
||||
color: colors.text.primary,
|
||||
borderWidth: 1,
|
||||
borderColor: colors.divider,
|
||||
borderWidth: 1.5,
|
||||
borderColor: colors.divider + '80',
|
||||
fontWeight: '400',
|
||||
},
|
||||
editTextArea: {
|
||||
minHeight: 100,
|
||||
@@ -1433,6 +1477,7 @@ function createGroupInfoStyles(colors: AppColors) {
|
||||
editCharCount: {
|
||||
textAlign: 'right',
|
||||
marginTop: spacing.xs,
|
||||
fontWeight: '500',
|
||||
},
|
||||
|
||||
// 公告表单样式
|
||||
@@ -1446,17 +1491,18 @@ function createGroupInfoStyles(colors: AppColors) {
|
||||
padding: spacing.md,
|
||||
fontSize: fontSizes.md,
|
||||
color: colors.text.primary,
|
||||
borderWidth: 1,
|
||||
borderColor: colors.divider,
|
||||
borderWidth: 1.5,
|
||||
borderColor: colors.divider + '80',
|
||||
lineHeight: 22,
|
||||
textAlignVertical: 'top',
|
||||
},
|
||||
announcementCharCount: {
|
||||
textAlign: 'right',
|
||||
marginTop: spacing.sm,
|
||||
fontWeight: '500',
|
||||
},
|
||||
|
||||
// 加群方式样式
|
||||
// 加群方式样式 - 更现代的选中状态
|
||||
joinTypeList: {
|
||||
gap: spacing.md,
|
||||
},
|
||||
@@ -1465,36 +1511,39 @@ function createGroupInfoStyles(colors: AppColors) {
|
||||
alignItems: 'center',
|
||||
padding: spacing.md,
|
||||
borderRadius: borderRadius.lg,
|
||||
borderWidth: 1,
|
||||
borderColor: colors.divider,
|
||||
borderWidth: 1.5,
|
||||
borderColor: colors.divider + '80',
|
||||
backgroundColor: colors.background.default,
|
||||
},
|
||||
joinTypeItemSelected: {
|
||||
borderColor: colors.primary.main,
|
||||
backgroundColor: colors.primary.light + '10',
|
||||
backgroundColor: colors.primary.light + '12',
|
||||
borderWidth: 2,
|
||||
},
|
||||
joinTypeIcon: {
|
||||
width: 48,
|
||||
height: 48,
|
||||
borderRadius: borderRadius.lg,
|
||||
backgroundColor: colors.background.default,
|
||||
backgroundColor: colors.background.paper,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
marginRight: spacing.md,
|
||||
},
|
||||
joinTypeIconSelected: {
|
||||
backgroundColor: colors.primary.light + '20',
|
||||
backgroundColor: colors.primary.light + '25',
|
||||
},
|
||||
joinTypeInfo: {
|
||||
flex: 1,
|
||||
},
|
||||
joinTypeTextSelected: {
|
||||
fontWeight: '600',
|
||||
fontWeight: '700',
|
||||
color: colors.primary.main,
|
||||
},
|
||||
|
||||
// 转让群主样式
|
||||
transferDesc: {
|
||||
marginBottom: spacing.md,
|
||||
fontWeight: '500',
|
||||
},
|
||||
transferList: {
|
||||
flex: 1,
|
||||
@@ -1504,11 +1553,15 @@ function createGroupInfoStyles(colors: AppColors) {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
paddingVertical: spacing.md,
|
||||
paddingHorizontal: spacing.md,
|
||||
borderRadius: borderRadius.lg,
|
||||
marginBottom: spacing.xs,
|
||||
marginBottom: spacing.sm,
|
||||
backgroundColor: colors.background.default,
|
||||
},
|
||||
transferItemSelected: {
|
||||
backgroundColor: colors.primary.light + '15',
|
||||
backgroundColor: colors.primary.light + '12',
|
||||
borderWidth: 1.5,
|
||||
borderColor: colors.primary.light + '60',
|
||||
},
|
||||
transferItemInfo: {
|
||||
flex: 1,
|
||||
@@ -1530,6 +1583,7 @@ function createGroupInfoStyles(colors: AppColors) {
|
||||
borderColor: colors.divider,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
backgroundColor: colors.background.paper,
|
||||
},
|
||||
transferRadioSelected: {
|
||||
backgroundColor: colors.primary.main,
|
||||
@@ -1546,6 +1600,8 @@ function createGroupInfoStyles(colors: AppColors) {
|
||||
borderRadius: borderRadius.lg,
|
||||
padding: spacing.xs,
|
||||
marginBottom: spacing.md,
|
||||
borderWidth: 1,
|
||||
borderColor: colors.divider + '60',
|
||||
},
|
||||
tab: {
|
||||
flex: 1,
|
||||
@@ -1555,10 +1611,11 @@ function createGroupInfoStyles(colors: AppColors) {
|
||||
},
|
||||
tabActive: {
|
||||
backgroundColor: colors.background.paper,
|
||||
...shadows.sm,
|
||||
borderWidth: 1,
|
||||
borderColor: colors.divider + '60',
|
||||
},
|
||||
tabTextActive: {
|
||||
fontWeight: '600',
|
||||
fontWeight: '700',
|
||||
},
|
||||
selectedBadge: {
|
||||
backgroundColor: colors.primary.light + '20',
|
||||
@@ -1577,10 +1634,13 @@ function createGroupInfoStyles(colors: AppColors) {
|
||||
paddingVertical: spacing.md,
|
||||
paddingHorizontal: spacing.sm,
|
||||
borderRadius: borderRadius.lg,
|
||||
marginBottom: spacing.xs,
|
||||
marginBottom: spacing.sm,
|
||||
backgroundColor: colors.background.default,
|
||||
},
|
||||
friendItemSelected: {
|
||||
backgroundColor: colors.primary.light + '15',
|
||||
backgroundColor: colors.primary.light + '12',
|
||||
borderWidth: 1.5,
|
||||
borderColor: colors.primary.light + '60',
|
||||
},
|
||||
friendInfo: {
|
||||
flex: 1,
|
||||
@@ -1588,7 +1648,7 @@ function createGroupInfoStyles(colors: AppColors) {
|
||||
marginRight: spacing.sm,
|
||||
},
|
||||
nickname: {
|
||||
fontWeight: '500',
|
||||
fontWeight: '600',
|
||||
marginBottom: 2,
|
||||
},
|
||||
checkbox: {
|
||||
@@ -1599,6 +1659,7 @@ function createGroupInfoStyles(colors: AppColors) {
|
||||
borderColor: colors.divider,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
backgroundColor: colors.background.paper,
|
||||
},
|
||||
checkboxSelected: {
|
||||
backgroundColor: colors.primary.main,
|
||||
|
||||
Reference in New Issue
Block a user