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
2026-03-30 17:53:30 +08:00
parent e0ee29caf8
commit 774b5c4b47
14 changed files with 793 additions and 373 deletions
--- a/src/screens/message/components/ChatScreen/ChatInput.tsx
+++ b/src/screens/message/components/ChatScreen/ChatInput.tsx
@@ -185,9 +185,11 @@ export const ChatInput: React.FC<ChatInputProps & {
          <TouchableOpacity
            style={styles.sendButtonActive}
            onPress={onSend}
-            activeOpacity={0.8}
+            activeOpacity={0.85}
          >
-            <MaterialCommunityIcons name="send" size={20} color="#FFF" />
+            {/* 光泽层 - 模拟渐变效果 */}
+            <View style={styles.sendButtonShine} pointerEvents="none" />
+            <MaterialCommunityIcons name="send" size={18} color="#FFF" />
          </TouchableOpacity>
        ) : isComposerBusy && !isDisabled ? (
          <TouchableOpacity
--- a/src/screens/message/components/ChatScreen/GroupInfoPanel.web.tsx
+++ b/src/screens/message/components/ChatScreen/GroupInfoPanel.web.tsx
@@ -374,7 +374,7 @@ function createGroupInfoPanelStyles(colors: AppColors) {
  return StyleSheet.create({
  overlay: {
    ...StyleSheet.absoluteFillObject,
-    backgroundColor: 'rgba(0, 0, 0, 0.3)',
+    backgroundColor: 'rgba(0, 0, 0, 0.35)',
    zIndex: 100,
  },
  overlayTouchable: {
@@ -388,24 +388,28 @@ function createGroupInfoPanelStyles(colors: AppColors) {
    width: PANEL_WIDTH,
    backgroundColor: colors.background.paper,
    zIndex: 101,
-    ...shadows.lg,
+    borderLeftWidth: 0.5,
+    borderLeftColor: colors.divider + '60',
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
-    paddingHorizontal: spacing.md,
+    paddingHorizontal: spacing.lg,
    paddingVertical: spacing.md,
-    borderBottomWidth: 1,
-    borderBottomColor: colors.divider,
+    borderBottomWidth: 0.5,
+    borderBottomColor: colors.divider + '60',
+    backgroundColor: colors.background.paper,
  },
  headerTitle: {
-    fontSize: fontSizes.xl,
-    fontWeight: '600',
+    fontSize: fontSizes.xl + 1,
+    fontWeight: '800',
    color: colors.text.primary,
+    letterSpacing: 0.5,
  },
  closeButton: {
    padding: spacing.xs,
+    borderRadius: borderRadius.md,
  },
  content: {
    flex: 1,
@@ -413,22 +417,26 @@ function createGroupInfoPanelStyles(colors: AppColors) {
  groupInfoSection: {
    alignItems: 'center',
    paddingVertical: spacing.xl,
+    paddingHorizontal: spacing.md,
  },
  groupName: {
-    fontSize: fontSizes.xl,
-    fontWeight: '600',
+    fontSize: fontSizes.xl + 1,
+    fontWeight: '800',
    color: colors.text.primary,
    marginTop: spacing.md,
+    letterSpacing: 0.3,
  },
  memberCount: {
    fontSize: fontSizes.md,
    color: colors.text.secondary,
    marginTop: spacing.xs,
+    fontWeight: '500',
  },
  joinType: {
    fontSize: fontSizes.sm,
    color: colors.primary.main,
    marginTop: spacing.xs,
+    fontWeight: '600',
  },
  inviteButton: {
    flexDirection: 'row',
@@ -436,25 +444,27 @@ function createGroupInfoPanelStyles(colors: AppColors) {
    justifyContent: 'center',
    paddingVertical: spacing.sm,
    paddingHorizontal: spacing.md,
-    backgroundColor: colors.primary.light + '15',
-    borderRadius: 20,
+    backgroundColor: colors.primary.light + '12',
+    borderRadius: borderRadius.lg,
    marginTop: spacing.md,
-    borderWidth: 1,
-    borderColor: colors.primary.light,
+    borderWidth: 1.5,
+    borderColor: colors.primary.light + '60',
+    borderStyle: 'dashed',
  },
  inviteButtonText: {
    fontSize: fontSizes.sm,
    color: colors.primary.main,
    marginLeft: spacing.xs,
-    fontWeight: '500',
+    fontWeight: '700',
+    letterSpacing: 0.3,
  },
  divider: {
-    height: 1,
-    backgroundColor: colors.divider,
-    marginHorizontal: spacing.md,
+    height: 0.5,
+    backgroundColor: colors.divider + '60',
+    marginHorizontal: spacing.lg,
  },
  section: {
-    padding: spacing.md,
+    padding: spacing.lg,
  },
  sectionHeader: {
    flexDirection: 'row',
@@ -462,38 +472,44 @@ function createGroupInfoPanelStyles(colors: AppColors) {
    marginBottom: spacing.sm,
  },
  sectionTitle: {
-    fontSize: fontSizes.md,
-    fontWeight: '600',
+    fontSize: fontSizes.md + 1,
+    fontWeight: '700',
    color: colors.text.primary,
    marginLeft: spacing.xs,
+    letterSpacing: 0.3,
  },
  noticeBox: {
-    backgroundColor: colors.chat.tipBg,
+    backgroundColor: colors.warning.light + '08',
    padding: spacing.md,
-    borderRadius: 8,
+    borderRadius: borderRadius.lg,
    borderLeftWidth: 3,
    borderLeftColor: colors.warning.main,
  },
  noticeText: {
    fontSize: fontSizes.sm,
    color: colors.text.secondary,
-    lineHeight: 20,
+    lineHeight: 22,
+    fontWeight: '400',
  },
  noticeTime: {
    fontSize: fontSizes.xs,
    color: colors.text.hint,
    marginTop: spacing.xs,
    textAlign: 'right',
+    fontWeight: '500',
  },
  descriptionBox: {
-    backgroundColor: colors.chat.surfaceMuted,
+    backgroundColor: colors.background.default,
    padding: spacing.md,
-    borderRadius: 8,
+    borderRadius: borderRadius.lg,
+    borderWidth: 0.5,
+    borderColor: colors.divider + '30',
  },
  description: {
    fontSize: fontSizes.sm,
    color: colors.text.secondary,
-    lineHeight: 20,
+    lineHeight: 22,
+    fontWeight: '400',
  },
  memberList: {
    gap: spacing.sm,
@@ -511,15 +527,20 @@ function createGroupInfoPanelStyles(colors: AppColors) {
  viewAllText: {
    fontSize: fontSizes.sm,
    color: colors.primary.main,
+    fontWeight: '600',
  },
  memberItem: {
    flexDirection: 'row',
    alignItems: 'center',
-    paddingVertical: spacing.xs,
+    paddingVertical: spacing.sm,
+    paddingHorizontal: spacing.sm,
+    borderRadius: borderRadius.md,
+    marginLeft: -spacing.sm,
+    marginRight: -spacing.sm,
  },
  memberInfo: {
    flex: 1,
-    marginLeft: spacing.sm,
+    marginLeft: spacing.md,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
@@ -528,48 +549,55 @@ function createGroupInfoPanelStyles(colors: AppColors) {
    fontSize: fontSizes.md,
    color: colors.text.primary,
    flex: 1,
+    fontWeight: '600',
  },
  ownerBadge: {
    fontSize: fontSizes.xs,
-    color: colors.warning.main,
+    color: colors.background.paper,
    marginLeft: spacing.xs,
-    backgroundColor: colors.warning.light + '30',
+    backgroundColor: colors.warning.main,
    paddingHorizontal: 6,
    paddingVertical: 2,
-    borderRadius: 4,
+    borderRadius: borderRadius.sm,
+    fontWeight: '800',
  },
  adminBadge: {
    fontSize: fontSizes.xs,
    color: colors.primary.main,
    marginLeft: spacing.xs,
-    backgroundColor: colors.primary.light + '30',
+    backgroundColor: colors.primary.light + '20',
    paddingHorizontal: 6,
    paddingVertical: 2,
-    borderRadius: 4,
+    borderRadius: borderRadius.sm,
+    fontWeight: '700',
  },
  moreMembers: {
    fontSize: fontSizes.sm,
    color: colors.text.secondary,
    textAlign: 'center',
    paddingVertical: spacing.sm,
+    fontWeight: '500',
  },
  infoRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
-    paddingVertical: spacing.sm,
-    borderBottomWidth: 1,
-    borderBottomColor: colors.chat.borderHairline,
+    paddingVertical: spacing.md,
+    borderBottomWidth: 0.5,
+    borderBottomColor: colors.divider + '40',
  },
  infoLabel: {
    fontSize: fontSizes.sm,
    color: colors.text.secondary,
+    fontWeight: '500',
  },
  infoValue: {
    fontSize: fontSizes.sm,
    color: colors.text.primary,
+    fontWeight: '600',
+    textAlign: 'right',
  },
  actionSection: {
-    padding: spacing.md,
+    padding: spacing.lg,
    paddingBottom: spacing.xl,
  },
  actionButton: {
@@ -577,24 +605,27 @@ function createGroupInfoPanelStyles(colors: AppColors) {
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: spacing.md,
-    backgroundColor: colors.primary.light + '15',
-    borderRadius: 12,
+    backgroundColor: colors.primary.light + '10',
+    borderRadius: borderRadius.lg,
    marginBottom: spacing.sm,
-    borderWidth: 1,
-    borderColor: colors.primary.light,
+    borderWidth: 1.5,
+    borderColor: colors.primary.light + '50',
  },
  actionButtonText: {
    fontSize: fontSizes.md,
-    fontWeight: '600',
+    fontWeight: '700',
    color: colors.primary.main,
    marginLeft: spacing.sm,
+    letterSpacing: 0.3,
  },
  leaveButton: {
-    backgroundColor: colors.error.light + '15',
-    borderColor: colors.error.light,
+    backgroundColor: colors.error.light + '08',
+    borderColor: colors.error.light + '50',
+    borderWidth: 1.5,
  },
  leaveButtonText: {
    color: colors.error.main,
+    fontWeight: '700',
  },
  });
 }
--- a/src/screens/message/components/ChatScreen/styles.ts
+++ b/src/screens/message/components/ChatScreen/styles.ts
@@ -432,18 +432,34 @@ export function createChatScreenStyles(colors: AppColors) {
    transform: [{ translateY: -1 }],
  },
  
-  // 发送按钮
+  // 发送按钮 - QQ/微信风格
  sendButtonActive: {
-    width: 38,
-    height: 30,
-    borderRadius: 15,
+    width: 36,
+    height: 36,
+    borderRadius: 18,  // 正圆形
    backgroundColor: colors.primary.main,
    alignItems: 'center',
    justifyContent: 'center',
-    ...shadows.md,
+    // 微信风格：轻微阴影，不夸张
+    shadowColor: colors.primary.main,
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.2,
+    shadowRadius: 3,
+    elevation: 2,
  },
  sendButtonDisabled: {
-    opacity: 0.6,
+    opacity: 0.4,
+  },
+  // 发送按钮光泽层（叠加在按钮上模拟渐变）
+  sendButtonShine: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    height: '50%',
+    borderTopLeftRadius: 18,
+    borderTopRightRadius: 18,
+    backgroundColor: 'rgba(255, 255, 255, 0.08)',
  },
  
  // 输入框
--- a/src/screens/message/components/ConversationListRow.tsx
+++ b/src/screens/message/components/ConversationListRow.tsx
@@ -6,7 +6,7 @@
 import React, { memo, useEffect, useMemo, useRef, useState } from 'react';
 import { Animated, StyleSheet, TouchableOpacity, View } from 'react-native';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
-import { spacing, shadows, useAppColors, type AppColors } from '../../../theme';
+import { spacing, shadows, borderRadius, useAppColors, type AppColors } from '../../../theme';
 import {
  ConversationResponse,
  extractTextFromSegments,
@@ -160,13 +160,14 @@ function createConversationRowStyles(colors: AppColors) {
      backgroundColor: colors.background.paper,
      marginHorizontal: spacing.md,
      marginTop: spacing.sm,
-      borderRadius: 12,
-      ...shadows.sm,
+      borderRadius: borderRadius.lg,
+      borderWidth: 0.5,
+      borderColor: colors.divider + '40',
    },
    conversationItemSelected: {
-      backgroundColor: colors.primary.light + '20',
-      borderColor: colors.primary.main,
-      borderWidth: 1,
+      backgroundColor: colors.primary.light + '12',
+      borderColor: colors.primary.main + '60',
+      borderWidth: 1.5,
    },
    avatarContainer: {
      position: 'relative',
@@ -174,7 +175,7 @@ function createConversationRowStyles(colors: AppColors) {
    systemAvatar: {
      width: 50,
      height: 50,
-      borderRadius: 12,
+      borderRadius: borderRadius.md,
      alignItems: 'center',
      justifyContent: 'center',
      backgroundColor: colors.primary.main,
@@ -195,7 +196,7 @@ function createConversationRowStyles(colors: AppColors) {
    },
    officialBadge: {
      backgroundColor: colors.primary.main,
-      borderRadius: 4,
+      borderRadius: borderRadius.sm,
      paddingHorizontal: 6,
      paddingVertical: 2,
      marginRight: spacing.xs,
@@ -203,12 +204,13 @@ function createConversationRowStyles(colors: AppColors) {
    officialBadgeText: {
      color: colors.primary.contrast,
      fontSize: 10,
-      fontWeight: '600',
+      fontWeight: '800',
    },
    userName: {
-      fontWeight: '600',
+      fontWeight: '700',
      color: colors.text.primary,
      fontSize: 16,
+      letterSpacing: 0.3,
    },
    groupIcon: {
      marginRight: 4,
@@ -217,6 +219,7 @@ function createConversationRowStyles(colors: AppColors) {
      fontSize: 12,
      color: colors.text.secondary,
      marginLeft: 2,
+      fontWeight: '500',
    },
    pinnedIcon: {
      marginLeft: 6,
@@ -228,7 +231,7 @@ function createConversationRowStyles(colors: AppColors) {
    groupAvatarPlaceholder: {
      width: 50,
      height: 50,
-      borderRadius: 12,
+      borderRadius: borderRadius.md,
      backgroundColor: colors.primary.main,
      alignItems: 'center',
      justifyContent: 'center',
@@ -236,6 +239,7 @@ function createConversationRowStyles(colors: AppColors) {
    timeText: {
      color: colors.text.secondary,
      fontSize: 12,
+      fontWeight: '500',
    },
    messageRow: {
      flexDirection: 'row',
@@ -245,15 +249,16 @@ function createConversationRowStyles(colors: AppColors) {
      flex: 1,
      color: colors.text.secondary,
      fontSize: 14,
+      fontWeight: '400',
    },
    unreadMessageText: {
      color: colors.text.primary,
-      fontWeight: '500',
+      fontWeight: '600',
    },
    unreadBadge: {
-      minWidth: 20,
-      height: 20,
-      borderRadius: 10,
+      minWidth: 22,
+      height: 22,
+      borderRadius: 11,
      backgroundColor: colors.primary.main,
      alignItems: 'center',
      justifyContent: 'center',
@@ -263,7 +268,7 @@ function createConversationRowStyles(colors: AppColors) {
    unreadBadgeText: {
      color: colors.primary.contrast,
      fontSize: 12,
-      fontWeight: '600',
+      fontWeight: '800',
    },
  });
 }
--- a/src/screens/message/components/GroupRequestShared.tsx
+++ b/src/screens/message/components/GroupRequestShared.tsx
@@ -4,7 +4,7 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { MaterialCommunityIcons } from '@expo/vector-icons';

 import { Avatar, Text } from '../../../components/common';
-import { spacing, borderRadius, shadows, useAppColors, type AppColors } from '../../../theme';
+import { spacing, borderRadius, fontSizes, useAppColors, type AppColors } from '../../../theme';

 interface GroupInfoSummaryCardProps {
  groupName?: string;
@@ -18,10 +18,11 @@ function createGroupRequestSharedStyles(colors: AppColors) {
  return StyleSheet.create({
    headerCard: {
      backgroundColor: colors.background.paper,
-      borderRadius: borderRadius.lg,
+      borderRadius: borderRadius.xl,
      padding: spacing.lg,
      marginBottom: spacing.md,
-      ...shadows.sm,
+      borderWidth: 0.5,
+      borderColor: colors.divider + '40',
    },
    groupHeader: {
      flexDirection: 'row',
@@ -33,7 +34,9 @@ function createGroupRequestSharedStyles(colors: AppColors) {
    },
    groupName: {
      marginBottom: spacing.xs,
-      fontWeight: '700',
+      fontWeight: '800',
+      fontSize: fontSizes.xl + 1,
+      letterSpacing: 0.3,
    },
    groupMeta: {
      flexDirection: 'row',
@@ -42,6 +45,7 @@ function createGroupRequestSharedStyles(colors: AppColors) {
    },
    groupNoText: {
      marginTop: spacing.xs,
+      fontWeight: '500',
    },
    descriptionContainer: {
      flexDirection: 'row',
@@ -50,11 +54,14 @@ function createGroupRequestSharedStyles(colors: AppColors) {
      borderRadius: borderRadius.lg,
      padding: spacing.md,
      marginTop: spacing.md,
+      borderWidth: 0.5,
+      borderColor: colors.divider + '30',
    },
    groupDesc: {
      marginLeft: spacing.sm,
      flex: 1,
-      lineHeight: 20,
+      lineHeight: 22,
+      fontWeight: '400',
    },
    footer: {
      paddingHorizontal: spacing.lg,
@@ -64,16 +71,16 @@ function createGroupRequestSharedStyles(colors: AppColors) {
    },
    btn: {
      flex: 1,
-      height: 42,
-      borderRadius: borderRadius.md,
+      height: 46,
+      borderRadius: borderRadius.lg,
      alignItems: 'center',
      justifyContent: 'center',
    },
    reject: {
      marginRight: spacing.sm,
-      backgroundColor: colors.error.light + '25',
-      borderWidth: 1,
-      borderColor: colors.error.light,
+      backgroundColor: colors.error.light + '12',
+      borderWidth: 1.5,
+      borderColor: colors.error.light + '60',
    },
    approve: {
      marginLeft: spacing.sm,