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

src/screens/message/GroupMembersScreen.tsx

@@ -664,19 +664,21 @@ function createGroupMembersStyles(colors: AppColors) {
       flex: 1,
       backgroundColor: colors.background.default,
     },
-    // Header 样式
+    // Header 样式 - 扁平化
     pageHeader: {
       flexDirection: 'row',
       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: '800',
+      fontSize: fontSizes.xl + 1,
+      letterSpacing: 0.5,
     },
     pageHeaderPlaceholder: {
       width: 40,
@@ -688,18 +690,20 @@ function createGroupMembersStyles(colors: AppColors) {
       flexDirection: 'row',
       justifyContent: 'space-between',
       alignItems: 'center',
-      paddingHorizontal: spacing.md,
-      paddingVertical: spacing.sm,
+      paddingHorizontal: spacing.lg,
+      paddingVertical: spacing.md,
       backgroundColor: colors.background.default,
+      borderTopWidth: 0.5,
+      borderTopColor: colors.divider + '40',
     },
     memberItem: {
       flexDirection: 'row',
       alignItems: 'center',
-      paddingHorizontal: spacing.md,
+      paddingHorizontal: spacing.lg,
       paddingVertical: spacing.md,
       backgroundColor: colors.background.paper,
-      borderBottomWidth: 1,
-      borderBottomColor: colors.divider,
+      borderBottomWidth: 0.5,
+      borderBottomColor: colors.divider + '40',
     },
     memberInfo: {
       flex: 1,
@@ -711,63 +715,81 @@ function createGroupMembersStyles(colors: AppColors) {
       marginBottom: 2,
     },
     memberName: {
-      fontWeight: '500',
+      fontWeight: '700',
+      fontSize: fontSizes.md + 1,
+      letterSpacing: 0.3,
     },
     roleBadge: {
-      paddingHorizontal: spacing.xs,
+      paddingHorizontal: spacing.sm,
       paddingVertical: 2,
       borderRadius: borderRadius.sm,
       marginLeft: spacing.sm,
+      fontWeight: '800',
+      fontSize: fontSizes.xs,
+      color: colors.background.paper,
     },
     mutedBadge: {
       flexDirection: 'row',
       alignItems: 'center',
       marginTop: 2,
     },
-    // 模态框样式
+    // 模态框样式 - 更现代
     modalOverlay: {
       flex: 1,
-      backgroundColor: 'rgba(0, 0, 0, 0.5)',
+      backgroundColor: 'rgba(0, 0, 0, 0.45)',
       justifyContent: 'flex-end',
     },
     modalContent: {
       backgroundColor: colors.background.paper,
-      borderTopLeftRadius: borderRadius.lg,
-      borderTopRightRadius: borderRadius.lg,
+      borderTopLeftRadius: borderRadius['2xl'],
+      borderTopRightRadius: borderRadius['2xl'],
       padding: spacing.lg,
       maxHeight: '80%',
     },
     modalHeader: {
       alignItems: 'center',
-      marginBottom: spacing.md,
+      marginBottom: spacing.lg,
+      paddingBottom: spacing.md,
+      borderBottomWidth: 0.5,
+      borderBottomColor: colors.divider + '60',
     },
     modalTitle: {
-      fontWeight: '700',
+      fontWeight: '800',
+      fontSize: fontSizes.xl + 1,
       marginTop: spacing.sm,
       marginBottom: spacing.xs,
+      letterSpacing: 0.5,
     },
     actionItem: {
       flexDirection: 'row',
       alignItems: 'center',
       paddingVertical: spacing.md,
-      borderBottomWidth: 1,
-      borderBottomColor: colors.divider,
+      paddingHorizontal: spacing.sm,
+      marginLeft: -spacing.sm,
+      marginRight: -spacing.sm,
+      borderRadius: borderRadius.md,
+      borderBottomWidth: 0.5,
+      borderBottomColor: colors.divider + '40',
     },
     actionText: {
       marginLeft: spacing.md,
+      fontWeight: '600',
+      fontSize: fontSizes.md,
     },
     inputLabel: {
       marginBottom: spacing.xs,
+      fontWeight: '700',
+      fontSize: fontSizes.sm + 1,
     },
     input: {
       backgroundColor: colors.background.default,
-      borderRadius: borderRadius.md,
+      borderRadius: borderRadius.lg,
       paddingHorizontal: spacing.md,
       paddingVertical: spacing.md,
       fontSize: fontSizes.md,
       color: colors.text.primary,
-      borderWidth: 1,
-      borderColor: colors.divider,
+      borderWidth: 1.5,
+      borderColor: colors.divider + '80',
       marginBottom: spacing.md,
     },
     modalButtons: {
@@ -791,6 +813,8 @@ function createGroupMembersStyles(colors: AppColors) {
     noMoreText: {
       textAlign: 'center',
       paddingVertical: spacing.md,
+      fontWeight: '500',
+      color: colors.text.hint,
     },
   });
 }