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)',
  },
  
  // 输入框