feat(ChatScreen): 优化聊天界面 UI 和交互体验

Made-with: Cursor

src/screens/message/components/ChatScreen/styles.ts

@@ -30,13 +30,8 @@ export function createChatScreenStyles(colors: AppColors) {
   // 头部
   headerContainer: {
     backgroundColor: colors.chat.card,
-    borderBottomWidth: 1,
-    borderBottomColor: 'rgba(255, 107, 53, 0.12)',
-    shadowColor: colors.chat.shadow,
-    shadowOffset: { width: 0, height: 3 },
-    shadowOpacity: 0.06,
-    shadowRadius: 10,
-    elevation: 5,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: colors.chat.border,
   },
   header: {
     flexDirection: 'row',
@@ -45,42 +40,47 @@ export function createChatScreenStyles(colors: AppColors) {
     paddingHorizontal: spacing.md,
     paddingVertical: spacing.sm + 2,
     backgroundColor: colors.chat.card,
+    height: 56,
   },
   backButton: {
-    width: 38,
-    height: 38,
+    width: 36,
+    height: 36,
     alignItems: 'center',
     justifyContent: 'center',
-    borderRadius: 19,
-    backgroundColor: `${colors.primary.main}12`,
-    borderWidth: 1,
-    borderColor: `${colors.primary.main}26`,
+    borderRadius: 10,
+    backgroundColor: 'transparent',
   },
   headerCenter: {
-    alignItems: 'stretch',
     flex: 1,
+    alignItems: 'center',
     marginHorizontal: spacing.sm,
   },
   titleRow: {
     flexDirection: 'row',
     alignItems: 'center',
-    borderRadius: 14,
+    gap: spacing.sm,
     paddingHorizontal: spacing.sm,
-    paddingVertical: spacing.xs + 1,
-    gap: spacing.xs + 2,
-    flex: 1,
+    paddingVertical: spacing.xs,
+    borderRadius: 8,
   },
   titleLeading: {
-    width: 34,
-    height: 34,
-    borderRadius: 17,
+    width: 36,
+    height: 36,
+    borderRadius: 10,
     alignItems: 'center',
     justifyContent: 'center',
-    backgroundColor: `${colors.primary.main}14`,
+    backgroundColor: colors.chat.surfaceMuted,
+    overflow: 'hidden',
+  },
+  groupAvatar: {
+    width: 36,
+    height: 36,
+    borderRadius: 10,
   },
   titleContent: {
     flex: 1,
     minWidth: 0,
+    alignItems: 'center',
   },
   subtitleRow: {
     flexDirection: 'row',
@@ -90,30 +90,27 @@ export function createChatScreenStyles(colors: AppColors) {
     minHeight: 16,
   },
   headerName: {
-    fontWeight: '700',
+    fontWeight: '600',
     color: colors.text.primary,
-    fontSize: 17,
+    fontSize: 16,
     letterSpacing: -0.3,
   },
   memberCount: {
     fontSize: 12,
     color: colors.text.secondary,
-    fontWeight: '500',
+    fontWeight: '400',
   },
   typingHint: {
     fontSize: 12,
-    color: colors.primary.dark,
-    backgroundColor: `${colors.primary.main}14`,
-    borderRadius: 10,
-    paddingHorizontal: 6,
-    paddingVertical: 1,
+    color: colors.primary.main,
+    fontWeight: '500',
   },
   moreButton: {
-    width: 38,
-    height: 38,
+    width: 36,
+    height: 36,
     alignItems: 'center',
     justifyContent: 'center',
-    borderRadius: 19,
+    borderRadius: 10,
     backgroundColor: 'transparent',
   },
   headerActions: {
@@ -550,55 +547,62 @@ export function createChatScreenStyles(colors: AppColors) {
     borderTopWidth: 1,
     borderTopColor: colors.chat.border,
   },
-  panelCloseButton: {
-    width: 40,
-    height: 40,
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: colors.chat.card,
-    borderRadius: 8,
-    shadowColor: colors.chat.shadow,
-    shadowOffset: { width: 0, height: 1 },
-    shadowOpacity: 0.1,
-    shadowRadius: 2,
-    elevation: 2,
-  },
 
   // 面板内容区域
   panelContent: {
     flex: 1,
   },
 
-  // Tab 栏
+  // Tab 栏 - 现代胶囊式设计
   panelTabBar: {
     flexDirection: 'row',
     alignItems: 'center',
-    paddingHorizontal: spacing.sm,
-    paddingVertical: spacing.xs,
-    borderTopWidth: 1,
-    borderTopColor: colors.chat.border,
+    justifyContent: 'space-between',
+    paddingHorizontal: spacing.md,
+    paddingVertical: spacing.sm + 2,
+    borderTopWidth: StyleSheet.hairlineWidth,
+    borderTopColor: colors.chat.borderHairline,
     backgroundColor: colors.chat.card,
   },
+  panelTabContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: colors.chat.surfaceMuted,
+    borderRadius: 12,
+    padding: 3,
+  },
   panelTab: {
-    width: 44,
-    height: 44,
+    width: 42,
+    height: 36,
     alignItems: 'center',
     justifyContent: 'center',
-    borderRadius: 8,
-    marginRight: spacing.xs,
+    borderRadius: 10,
   },
   panelTabActive: {
-    backgroundColor: colors.chat.replyTint,
+    backgroundColor: colors.chat.card,
+    shadowColor: colors.chat.shadow,
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.08,
+    shadowRadius: 2,
+    elevation: 1,
   },
   panelTabEmoji: {
-    fontSize: 24,
+    fontSize: 22,
   },
   panelTabDivider: {
     width: 1,
-    height: 24,
-    backgroundColor: colors.chat.bubbleOutgoing,
+    height: 20,
+    backgroundColor: colors.chat.border,
     marginHorizontal: spacing.sm,
   },
+  panelCloseButton: {
+    width: 36,
+    height: 36,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 10,
+    backgroundColor: colors.chat.surfaceMuted,
+  },
 
   // 自定义表情面板
   stickerLoadingContainer: {
@@ -643,35 +647,60 @@ export function createChatScreenStyles(colors: AppColors) {
     height: '100%',
   },
 
-  // 更多功能面板
+  // 更多功能面板 - 现代扁平化设计
   moreGrid: {
     flexDirection: 'row',
     flexWrap: 'wrap',
-    padding: spacing.lg,
+    paddingHorizontal: spacing.lg + 4,
+    paddingTop: spacing.lg,
+    paddingBottom: spacing.xl,
+    justifyContent: 'flex-start',
   },
   moreItem: {
-    width: (SCREEN_WIDTH - spacing.lg * 2) / 4,
+    width: (SCREEN_WIDTH - spacing.lg * 2 - 8) / 4,
     alignItems: 'center',
-    marginBottom: spacing.lg,
+    marginBottom: spacing.lg + 4,
   },
   moreIconContainer: {
-    width: 60,
-    height: 60,
-    borderRadius: 16,
+    width: 56,
+    height: 56,
+    borderRadius: 18,
     alignItems: 'center',
     justifyContent: 'center',
-    marginBottom: spacing.sm,
+    marginBottom: spacing.sm + 2,
     backgroundColor: colors.chat.card,
     shadowColor: colors.chat.shadow,
     shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.08,
-    shadowRadius: 4,
+    shadowOpacity: 0.06,
+    shadowRadius: 6,
     elevation: 2,
   },
+  moreIconGradient: {
+    width: 56,
+    height: 56,
+    borderRadius: 18,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: spacing.sm + 2,
+    overflow: 'hidden',
+  },
+  moreIconInner: {
+    width: 56,
+    height: 56,
+    borderRadius: 18,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
   moreItemText: {
-    fontSize: 13,
-    color: colors.chat.textTertiary,
+    fontSize: 12,
+    color: colors.chat.textSecondary,
     fontWeight: '500',
+    letterSpacing: 0.3,
+  },
+  // MorePanel 整体背景
+  morePanelBackground: {
+    flex: 1,
+    backgroundColor: colors.chat.surfaceMuted,
   },
   
   // @成员选择浮层 - 绝对定位浮在输入框上方