From 774b5c4b47f618902015dbbc438abccb4b076446 Mon Sep 17 00:00:00 2001 From: lafay <2021211506@stu.hit.edu.cn> Date: Mon, 30 Mar 2026 17:53:30 +0800 Subject: [PATCH] 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/components/business/CommentItem.tsx | 26 + .../business/ReportDialog/ReportDialog.tsx | 451 ++++++++++++------ src/components/business/ReportDialog/index.ts | 2 +- src/screens/home/PostDetailScreen.tsx | 56 ++- src/screens/message/CreateGroupScreen.tsx | 55 ++- src/screens/message/GroupInfoScreen.tsx | 193 +++++--- .../message/GroupInviteDetailScreen.tsx | 32 +- src/screens/message/GroupMembersScreen.tsx | 70 ++- src/screens/message/JoinGroupScreen.tsx | 64 ++- .../components/ChatScreen/ChatInput.tsx | 6 +- .../ChatScreen/GroupInfoPanel.web.tsx | 119 +++-- .../message/components/ChatScreen/styles.ts | 28 +- .../components/ConversationListRow.tsx | 37 +- .../message/components/GroupRequestShared.tsx | 27 +- 14 files changed, 793 insertions(+), 373 deletions(-) diff --git a/src/components/business/CommentItem.tsx b/src/components/business/CommentItem.tsx index 41c8f4e..7ac2302 100644 --- a/src/components/business/CommentItem.tsx +++ b/src/components/business/CommentItem.tsx @@ -215,6 +215,7 @@ const CommentItem: React.FC = ({ onDelete, onImagePress, currentUserId, + onReport, }) => { const colors = useAppColors(); const styles = useMemo(() => createCommentItemStyles(colors), [colors]); @@ -541,6 +542,18 @@ const CommentItem: React.FC = ({ )} + {/* 举报按钮 - 对非子评论作者显示 */} + {!isSubReplyAuthor && onReport && ( + onReport(reply)} + > + + + 举报 + + + )} @@ -635,6 +648,19 @@ const CommentItem: React.FC = ({ + {/* 举报按钮 - 只对非评论作者显示 */} + {!isCommentAuthor && onReport && ( + onReport(comment)} + > + + + 举报 + + + )} + {/* 删除按钮 - 只对评论作者显示 */} {isCommentAuthor && ( void; } -// 目标类型中文名称映射 -const TARGET_TYPE_LABELS: Record = { - post: '帖子', - comment: '评论', - message: '消息', +// 目标类型配置 +const TARGET_CONFIG: Record = { + post: { label: '帖子', icon: 'file-document-outline', color: '#FF6B35' }, + comment: { label: '评论', icon: 'comment-text-outline', color: '#4CAF50' }, + message: { label: '消息', icon: 'message-text-outline', color: '#2196F3' }, }; -export const ReportDialog: React.FC = ({ +// 举报原因详细配置（带图标和说明） +const REPORT_REASONS_DETAILED = [ + { value: 'spam' as ReportReason, label: '垃圾广告', icon: 'email-newsletter', description: '包含广告、推广或重复内容' }, + { value: 'inappropriate' as ReportReason, label: '违规内容', icon: 'alert-circle-outline', description: '包含违法、色情或暴力内容' }, + { value: 'harassment' as ReportReason, label: '辱骂攻击', icon: 'account-off-outline', description: '包含人身攻击、骚扰或歧视' }, + { value: 'misinformation' as ReportReason, label: '虚假信息', icon: 'alert-outline', description: '包含谣言、诈骗或误导信息' }, + { value: 'other' as ReportReason, label: '其他原因', icon: 'dots-horizontal-circle-outline', description: '其他需要举报的情况' }, +]; + +const ReportDialog: React.FC = ({ visible, targetType, targetId, @@ -48,10 +60,23 @@ export const ReportDialog: React.FC = ({ const [description, setDescription] = useState(''); const [submitting, setSubmitting] = useState(false); + const targetConfig = TARGET_CONFIG[targetType]; + + // 判断补充说明是否必填（选择"其他原因"时必填） + const isDescriptionRequired = selectedReason === 'other'; + const descriptionPlaceholder = isDescriptionRequired + ? '请详细描述您举报的原因（必填）...' + : '请提供更多详细信息（选填）...'; + // 提交举报 const handleSubmit = useCallback(async () => { if (!selectedReason) { - Alert.alert('提示', '请选择举报原因'); + Alert.alert('提示', '请选择举报原因', [{ text: '确定' }]); + return; + } + + if (isDescriptionRequired && !description.trim()) { + Alert.alert('提示', '请选择"其他原因"时，请详细描述举报原因', [{ text: '确定' }]); return; } @@ -75,11 +100,11 @@ export const ReportDialog: React.FC = ({ }, ]); } else { - Alert.alert('举报失败', '请稍后重试'); + Alert.alert('举报失败', '请稍后重试', [{ text: '确定' }]); } } catch (error) { console.error('Submit report error:', error); - Alert.alert('举报失败', '网络错误，请稍后重试'); + Alert.alert('举报失败', '网络错误，请稍后重试', [{ text: '确定' }]); } finally { setSubmitting(false); } @@ -92,6 +117,11 @@ export const ReportDialog: React.FC = ({ onClose(); }, [onClose]); + const selectedReasonData = useMemo( + () => REPORT_REASONS_DETAILED.find(r => r.value === selectedReason), + [selectedReason] + ); + return ( = ({ animationType="fade" onRequestClose={handleClose} > - - - {/* 头部 */} - - - 举报{TARGET_TYPE_LABELS[targetType]} - - - - - - - {/* 内容 */} - - {/* 举报原因选择 */} - 请选择举报原因 - - {REPORT_REASONS.map((item) => ( - setSelectedReason(item.value)} - disabled={submitting} - > - - - {selectedReason === item.value && ( - - )} - - {item.label} - - - ))} + + + + {/* 头部 */} + + + + + + + 举报{targetConfig.label} + 请选择合适的举报原因 + + + + + - {/* 补充说明 */} - 补充说明（选填） - - {description.length}/500 - + {/* 内容 */} + + {/* 举报原因选择 */} + + 举报原因 + + {REPORT_REASONS_DETAILED.map((item) => ( + setSelectedReason(item.value)} + disabled={submitting} + activeOpacity={0.7} + > + + + + + + + {item.label} + + {item.description} + + + + {selectedReason === item.value && ( + + )} + + + ))} + + - {/* 底部按钮 */} - - - 取消 - - - {submitting ? ( - - ) : ( - 提交举报 - )} - + {/* 补充说明 */} + + + + 补充说明{isDescriptionRequired ? ' *' : ''} + + {description.length}/500 + + + + + + {/* 底部按钮 */} + + + 取消 + + + {submitting ? ( + + ) : ( + 提交举报 + )} + + - + ); }; @@ -199,6 +283,9 @@ export const ReportDialog: React.FC = ({ // 创建样式 const useStyles = (colors: ReturnType) => StyleSheet.create({ + keyboardView: { + flex: 1, + }, overlay: { flex: 1, backgroundColor: 'rgba(0, 0, 0, 0.5)', @@ -207,129 +294,193 @@ const useStyles = (colors: ReturnType) => padding: spacing.lg, }, container: { - backgroundColor: colors.backgroundPrimary, - borderRadius: borderRadius.lg, + backgroundColor: colors.chat.card, + borderRadius: borderRadius.xl, width: '100%', - maxWidth: 400, - maxHeight: '80%', + maxWidth: 420, + maxHeight: '85%', + ...shadows.lg, }, header: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', padding: spacing.lg, - borderBottomWidth: 1, - borderBottomColor: colors.borderLight, + paddingBottom: spacing.md, + }, + headerContent: { + flexDirection: 'row', + alignItems: 'center', + gap: spacing.md, + }, + headerIcon: { + width: 40, + height: 40, + borderRadius: borderRadius.md, + justifyContent: 'center', + alignItems: 'center', + }, + headerText: { + flex: 1, }, title: { - fontSize: fontSizes.lg, + fontSize: fontSizes.xl, fontWeight: '600', - color: colors.textPrimary, + color: colors.chat.textPrimary, + }, + subtitle: { + fontSize: fontSizes.sm, + color: colors.chat.textSecondary, + marginTop: 2, }, closeButton: { padding: spacing.xs, + borderRadius: borderRadius.full, }, content: { padding: spacing.lg, + paddingTop: 0, maxHeight: 400, }, + section: { + marginBottom: spacing.lg, + }, + sectionHeader: { + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center', + marginBottom: spacing.sm, + }, sectionTitle: { fontSize: fontSizes.md, - fontWeight: '500', - color: colors.textPrimary, - marginBottom: spacing.sm, + fontWeight: '600', + color: colors.chat.textPrimary, }, reasonList: { - marginBottom: spacing.lg, + gap: spacing.sm, }, reasonItem: { - paddingVertical: spacing.sm, - borderBottomWidth: 1, - borderBottomColor: colors.borderLight, + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center', + padding: spacing.md, + borderRadius: borderRadius.md, + borderWidth: 1, + borderColor: 'transparent', + backgroundColor: colors.chat.surfaceMuted, }, reasonItemSelected: { - backgroundColor: colors.backgroundSecondary, - marginHorizontal: -spacing.sm, - paddingHorizontal: spacing.sm, - borderRadius: borderRadius.sm, + backgroundColor: colors.primary.main + '08', + borderWidth: 1, }, - radioContainer: { + reasonLeft: { flexDirection: 'row', alignItems: 'center', + flex: 1, + gap: spacing.md, }, - radio: { - width: 20, - height: 20, - borderRadius: 10, - borderWidth: 2, - borderColor: colors.border, + reasonIcon: { + width: 36, + height: 36, + borderRadius: borderRadius.md, + backgroundColor: colors.chat.surfaceRaised, justifyContent: 'center', alignItems: 'center', - marginRight: spacing.sm, + }, + reasonIconSelected: { + backgroundColor: colors.primary.main + '15', + }, + reasonTextContainer: { + flex: 1, + }, + reasonLabel: { + fontSize: fontSizes.md, + fontWeight: '500', + color: colors.chat.textPrimary, + }, + reasonLabelSelected: { + color: colors.primary.main, + fontWeight: '600', + }, + reasonDescription: { + fontSize: fontSizes.sm, + color: colors.chat.textSecondary, + marginTop: 2, + }, + radio: { + width: 22, + height: 22, + borderRadius: 11, + borderWidth: 2, + borderColor: colors.chat.border, + justifyContent: 'center', + alignItems: 'center', + marginLeft: spacing.sm, }, radioSelected: { - borderColor: colors.primary, + borderColor: colors.primary.main, + backgroundColor: colors.primary.main, }, radioDot: { width: 10, height: 10, borderRadius: 5, - backgroundColor: colors.primary, - }, - reasonLabel: { - fontSize: fontSizes.md, - color: colors.textPrimary, + backgroundColor: '#FFFFFF', }, textInput: { borderWidth: 1, - borderColor: colors.border, + borderColor: colors.chat.border, borderRadius: borderRadius.md, - padding: spacing.sm, + padding: spacing.md, fontSize: fontSizes.md, - color: colors.textPrimary, + color: colors.chat.textPrimary, minHeight: 100, - textAlignVertical: 'top', + backgroundColor: colors.chat.surfaceMuted, + }, + textInputError: { + borderColor: colors.error.main, + backgroundColor: colors.error.main + '08', }, charCount: { fontSize: fontSizes.sm, - color: colors.textTertiary, - textAlign: 'right', - marginTop: spacing.xs, + color: colors.chat.textSecondary, }, footer: { flexDirection: 'row', padding: spacing.lg, + gap: spacing.md, borderTopWidth: 1, - borderTopColor: colors.borderLight, - gap: spacing.sm, + borderTopColor: colors.chat.borderLight, }, cancelButton: { flex: 1, - paddingVertical: spacing.sm, + paddingVertical: spacing.md, borderRadius: borderRadius.md, borderWidth: 1, - borderColor: colors.border, + borderColor: colors.chat.border, alignItems: 'center', + backgroundColor: colors.chat.surfaceMuted, }, cancelButtonText: { fontSize: fontSizes.md, - color: colors.textSecondary, + fontWeight: '500', + color: colors.chat.textSecondary, }, submitButton: { flex: 1, - paddingVertical: spacing.sm, + paddingVertical: spacing.md, borderRadius: borderRadius.md, - backgroundColor: colors.primary, + backgroundColor: colors.primary.main, alignItems: 'center', }, submitButtonDisabled: { - backgroundColor: colors.primary + '60', + backgroundColor: colors.background.disabled, }, submitButtonText: { fontSize: fontSizes.md, color: '#FFFFFF', - fontWeight: '500', + fontWeight: '600', }, }); -export default ReportDialog; \ No newline at end of file +export default ReportDialog; diff --git a/src/components/business/ReportDialog/index.ts b/src/components/business/ReportDialog/index.ts index 1dcc04a..8bb0584 100644 --- a/src/components/business/ReportDialog/index.ts +++ b/src/components/business/ReportDialog/index.ts @@ -1,2 +1,2 @@ -export { ReportDialog } from './ReportDialog'; +export { default } from './ReportDialog'; export type { ReportDialogProps } from './ReportDialog'; \ No newline at end of file diff --git a/src/screens/home/PostDetailScreen.tsx b/src/screens/home/PostDetailScreen.tsx index 960b7d4..9c4eb43 100644 --- a/src/screens/home/PostDetailScreen.tsx +++ b/src/screens/home/PostDetailScreen.tsx @@ -39,7 +39,7 @@ import { useCurrentUser } from '../../stores/authStore'; import { postService, commentService, uploadService, authService, showPrompt, voteService } from '../../services'; import { processPostUseCase } from '../../core/usecases/ProcessPostUseCase'; import { useCursorPagination } from '../../hooks/useCursorPagination'; -import { CommentItem, VoteCard } from '../../components/business'; +import { CommentItem, VoteCard, ReportDialog } from '../../components/business'; import { Avatar, Button, Loading, EmptyState, Text, ImageGallery, ImageGrid, ImageGridItem, AdaptiveLayout, AppBackButton } from '../../components/common'; import { useResponsive, useResponsiveValue, useResponsiveSpacing } from '../../hooks/useResponsive'; import * as hrefs from '../../navigation/hrefs'; @@ -177,6 +177,10 @@ export const PostDetailScreen: React.FC = () => { const flatListRef = useRef(null); const hasRecordedView = useRef(false); // 是否已记录浏览量 + // 举报相关状态 + const [reportDialogVisible, setReportDialogVisible] = useState(false); + const [reportTarget, setReportTarget] = useState<{ type: 'post' | 'comment'; id: string } | null>(null); + // 投票相关状态 const [voteResult, setVoteResult] = useState(null); const [isVoteLoading, setIsVoteLoading] = useState(false); @@ -1243,6 +1247,25 @@ export const PostDetailScreen: React.FC = () => { )} + {/* 举报按钮 - 只对非帖子作者显示 */} + {currentUser?.id !== post.author?.id && ( + { + setReportTarget({ type: 'post', id: post.id }); + setReportDialogVisible(true); + }} + > + + + 举报 + + + )} {/* 底部操作栏 - QQ频道风格 */} @@ -1347,6 +1370,12 @@ export const PostDetailScreen: React.FC = () => { } }; + // 处理举报评论 + const handleReportComment = useCallback((comment: Comment) => { + setReportTarget({ type: 'comment', id: comment.id }); + setReportDialogVisible(true); + }, []); + // 渲染评论 - 带楼层号 const commentKeyExtractor = useCallback((item: Comment) => item.id, []); @@ -1372,9 +1401,10 @@ export const PostDetailScreen: React.FC = () => { onDelete={handleDeleteComment} onImagePress={handleImagePress} currentUserId={currentUser?.id} + onReport={handleReportComment} /> ); - }, [currentUser?.id, handleDeleteComment, handleImagePress, handleLikeComment, handleLoadMoreReplies, post?.user_id]); + }, [currentUser?.id, handleDeleteComment, handleImagePress, handleLikeComment, handleLoadMoreReplies, post?.user_id, handleReportComment]); // 渲染空评论 - 现代化设计 const renderEmptyComments = useCallback(() => ( @@ -1696,6 +1726,20 @@ export const PostDetailScreen: React.FC = () => { onClose={() => setShowImageModal(false)} enableSave /> + + {/* 举报对话框 */} + { + setReportDialogVisible(false); + setReportTarget(null); + }} + onSuccess={() => { + setReportTarget(null); + }} + /> ); }; @@ -1858,7 +1902,13 @@ function createPostDetailStyles(colors: AppColors) { alignItems: 'center', padding: spacing.xs, }, - editButtonText: { + reportButtonInline: { + flexDirection: 'row', + alignItems: 'center', + marginLeft: spacing.sm, + padding: spacing.xs, + }, + reportButtonText: { marginLeft: 2, fontSize: fontSizes.sm, }, diff --git a/src/screens/message/CreateGroupScreen.tsx b/src/screens/message/CreateGroupScreen.tsx index c755ed3..1e764c9 100644 --- a/src/screens/message/CreateGroupScreen.tsx +++ b/src/screens/message/CreateGroupScreen.tsx @@ -322,10 +322,10 @@ function createCreateGroupStyles(colors: AppColors) { flex: 1, }, scrollContent: { - padding: spacing.lg, - paddingBottom: spacing.xl, + padding: spacing.md, + paddingBottom: spacing.xl * 2, }, - // 头部区域样式 + // 头部区域样式 - 扁平化 headerSection: { flexDirection: 'row', alignItems: 'flex-start', @@ -341,12 +341,17 @@ function createCreateGroupStyles(colors: AppColors) { width: 80, height: 80, borderRadius: 40, + borderWidth: 3, + borderColor: colors.primary.light + '40', }, avatarPlaceholder: { justifyContent: 'center', alignItems: 'center', backgroundColor: colors.background.default, borderRadius: 40, + borderWidth: 2, + borderColor: colors.divider, + borderStyle: 'dashed', }, avatarBadge: { position: 'absolute', @@ -358,7 +363,7 @@ function createCreateGroupStyles(colors: AppColors) { borderRadius: 14, justifyContent: 'center', alignItems: 'center', - borderWidth: 2, + borderWidth: 3, borderColor: colors.background.paper, }, nameInputContainer: { @@ -367,7 +372,9 @@ function createCreateGroupStyles(colors: AppColors) { }, inputLabel: { marginBottom: spacing.sm, - fontWeight: '600', + fontWeight: '700', + fontSize: fontSizes.sm + 1, + letterSpacing: 0.3, }, nameInput: { backgroundColor: colors.background.paper, @@ -376,12 +383,15 @@ function createCreateGroupStyles(colors: AppColors) { paddingVertical: spacing.md, fontSize: fontSizes.lg, color: colors.text.primary, - borderWidth: 1, - borderColor: colors.divider, + borderWidth: 1.5, + borderColor: colors.divider + '80', + fontWeight: '600', }, charCount: { textAlign: 'right', marginTop: spacing.xs, + fontWeight: '500', + fontSize: fontSizes.sm, }, // 区域样式 section: { @@ -391,18 +401,20 @@ function createCreateGroupStyles(colors: AppColors) { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', - marginBottom: spacing.sm, + marginBottom: spacing.md, }, sectionTitle: { - fontWeight: '600', + fontWeight: '800', + fontSize: fontSizes.md + 1, marginBottom: spacing.sm, + letterSpacing: 0.3, }, - // 文本域样式 + // 文本域样式 - 更现代 textAreaContainer: { backgroundColor: colors.background.paper, borderRadius: borderRadius.lg, - borderWidth: 1, - borderColor: colors.divider, + borderWidth: 1.5, + borderColor: colors.divider + '80', padding: spacing.md, }, textArea: { @@ -414,6 +426,8 @@ function createCreateGroupStyles(colors: AppColors) { textAreaCharCount: { textAlign: 'right', marginTop: spacing.sm, + fontWeight: '500', + fontSize: fontSizes.sm, }, // 已选成员样式 selectedMembersList: { @@ -443,8 +457,10 @@ function createCreateGroupStyles(colors: AppColors) { marginTop: spacing.xs, textAlign: 'center', width: '100%', + fontWeight: '600', + fontSize: fontSizes.sm, }, - // 邀请按钮样式 + // 邀请按钮样式 - 扁平化 inviteButton: { flexDirection: 'row', alignItems: 'center', @@ -452,13 +468,14 @@ function createCreateGroupStyles(colors: AppColors) { borderRadius: borderRadius.lg, padding: spacing.md, marginBottom: spacing.xl, - ...shadows.sm, + borderWidth: 0.5, + borderColor: colors.divider + '40', }, inviteIconContainer: { width: 48, height: 48, borderRadius: borderRadius.lg, - backgroundColor: colors.primary.light + '20', + backgroundColor: colors.primary.light + '15', justifyContent: 'center', alignItems: 'center', marginRight: spacing.md, @@ -467,16 +484,18 @@ function createCreateGroupStyles(colors: AppColors) { flex: 1, }, inviteTitle: { - fontWeight: '600', + fontWeight: '700', + fontSize: fontSizes.md + 1, marginBottom: 2, + letterSpacing: 0.3, }, // 底部按钮样式 footer: { padding: spacing.lg, paddingBottom: spacing.xl, backgroundColor: colors.background.paper, - borderTopWidth: 1, - borderTopColor: colors.divider, + borderTopWidth: 0.5, + borderTopColor: colors.divider + '60', }, }); } diff --git a/src/screens/message/GroupInfoScreen.tsx b/src/screens/message/GroupInfoScreen.tsx index 206fff5..c97ab65 100644 --- a/src/screens/message/GroupInfoScreen.tsx +++ b/src/screens/message/GroupInfoScreen.tsx @@ -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, diff --git a/src/screens/message/GroupInviteDetailScreen.tsx b/src/screens/message/GroupInviteDetailScreen.tsx index c0fffbd..eb36ef2 100644 --- a/src/screens/message/GroupInviteDetailScreen.tsx +++ b/src/screens/message/GroupInviteDetailScreen.tsx @@ -3,7 +3,7 @@ import { View, StyleSheet, ActivityIndicator, Alert, ScrollView, TouchableOpacit import { useRouter, useLocalSearchParams } from 'expo-router'; import { SafeAreaView } from 'react-native-safe-area-context'; import { MaterialCommunityIcons } from '@expo/vector-icons'; -import { spacing, borderRadius, shadows, useAppColors, type AppColors } from '../../theme'; +import { spacing, borderRadius, fontSizes, useAppColors, type AppColors } from '../../theme'; import { Avatar, Text } from '../../components/common'; import { routePayloadCache } from '../../stores/routePayloadCache'; import { groupService } from '../../services/groupService'; @@ -196,14 +196,15 @@ function createGroupInviteDetailStyles(colors: AppColors) { flex: 1, }, scrollContent: { - padding: spacing.lg, - paddingBottom: spacing.xl, + padding: spacing.md, + paddingBottom: spacing.xl * 2, }, card: { backgroundColor: colors.background.paper, - borderRadius: borderRadius.lg, + borderRadius: borderRadius.xl, padding: spacing.lg, - ...shadows.sm, + borderWidth: 0.5, + borderColor: colors.divider + '40', }, cardHeader: { flexDirection: 'row', @@ -211,20 +212,23 @@ function createGroupInviteDetailStyles(colors: AppColors) { marginBottom: spacing.md, }, cardIconContainer: { - width: 30, - height: 30, - borderRadius: 15, - backgroundColor: colors.info.light + '30', + width: 36, + height: 36, + borderRadius: borderRadius.md, + backgroundColor: colors.info.light + '15', alignItems: 'center', justifyContent: 'center', marginRight: spacing.sm, }, cardTitle: { - fontWeight: '600', + fontWeight: '700', + fontSize: fontSizes.md + 1, flex: 1, + letterSpacing: 0.3, }, memberCount: { marginRight: spacing.xs, + fontWeight: '600', }, loadingWrap: { paddingVertical: spacing.md, @@ -247,13 +251,15 @@ function createGroupInviteDetailStyles(colors: AppColors) { bottom: -2, right: -2, backgroundColor: colors.warning.main, - borderRadius: 8, + borderRadius: borderRadius.sm, paddingHorizontal: 4, paddingVertical: 1, + borderWidth: 1.5, + borderColor: colors.background.paper, }, ownerBadgeText: { - fontSize: 10, - fontWeight: '700', + fontSize: 8, + fontWeight: '800', }, }); } diff --git a/src/screens/message/GroupMembersScreen.tsx b/src/screens/message/GroupMembersScreen.tsx index 8daf454..2359288 100644 --- a/src/screens/message/GroupMembersScreen.tsx +++ b/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, }, }); } diff --git a/src/screens/message/JoinGroupScreen.tsx b/src/screens/message/JoinGroupScreen.tsx index be4d3b1..c8fba59 100644 --- a/src/screens/message/JoinGroupScreen.tsx +++ b/src/screens/message/JoinGroupScreen.tsx @@ -13,7 +13,7 @@ import { import { useRouter } from 'expo-router'; import { MaterialCommunityIcons } from '@expo/vector-icons'; -import { spacing, borderRadius, useAppColors, type AppColors } from '../../theme'; +import { spacing, borderRadius, fontSizes, useAppColors, type AppColors } from '../../theme'; import Avatar from '../../components/common/Avatar'; import Text from '../../components/common/Text'; import { groupService } from '../../services/groupService'; @@ -27,47 +27,58 @@ function createJoinGroupStyles(colors: AppColors) { container: { flex: 1, backgroundColor: colors.background.default, - padding: spacing.lg, + padding: spacing.md, }, heroCard: { backgroundColor: colors.background.paper, - borderRadius: borderRadius.lg, + borderRadius: borderRadius.xl, padding: spacing.lg, - marginBottom: spacing.lg, + marginBottom: spacing.md, + borderWidth: 0.5, + borderColor: colors.divider + '40', }, heroIconWrap: { width: 48, height: 48, borderRadius: 24, - backgroundColor: colors.primary.light + '26', + backgroundColor: colors.primary.light + '15', alignItems: 'center', justifyContent: 'center', marginBottom: spacing.md, }, heroTitle: { marginBottom: spacing.xs, + fontWeight: '800', + fontSize: fontSizes.xl + 1, + letterSpacing: 0.3, }, tip: { - lineHeight: 20, + lineHeight: 22, + fontWeight: '400', }, formCard: { backgroundColor: colors.background.paper, - borderRadius: borderRadius.lg, + borderRadius: borderRadius.xl, padding: spacing.lg, flex: 1, + borderWidth: 0.5, + borderColor: colors.divider + '40', }, label: { marginBottom: spacing.xs, + fontWeight: '700', + fontSize: fontSizes.sm + 1, }, input: { flex: 1, - borderWidth: 1, - borderColor: colors.divider, - borderRadius: borderRadius.md, - backgroundColor: colors.background.paper, + borderWidth: 1.5, + borderColor: colors.divider + '80', + borderRadius: borderRadius.lg, + backgroundColor: colors.background.default, paddingHorizontal: spacing.md, paddingVertical: spacing.md, color: colors.text.primary, + fontSize: fontSizes.md, }, searchRow: { flexDirection: 'row', @@ -77,26 +88,28 @@ function createJoinGroupStyles(colors: AppColors) { searchBtn: { width: 46, height: 46, - borderRadius: borderRadius.md, + borderRadius: borderRadius.lg, backgroundColor: colors.primary.main, alignItems: 'center', justifyContent: 'center', marginLeft: spacing.sm, }, searchResultSection: { - marginBottom: spacing.lg, + marginBottom: spacing.md, }, sectionTitle: { marginBottom: spacing.sm, - fontWeight: '600', + fontWeight: '800', + fontSize: fontSizes.md + 1, + letterSpacing: 0.3, }, listSection: { flex: 1, }, groupCard: { - borderWidth: 1, - borderColor: colors.divider, - borderRadius: borderRadius.md, + borderWidth: 0.5, + borderColor: colors.divider + '40', + borderRadius: borderRadius.lg, padding: spacing.md, backgroundColor: colors.background.default, marginBottom: spacing.md, @@ -111,11 +124,14 @@ function createJoinGroupStyles(colors: AppColors) { }, groupName: { marginBottom: spacing.xs, - fontWeight: '600', + fontWeight: '700', + fontSize: fontSizes.md + 1, + letterSpacing: 0.3, }, groupDesc: { marginTop: spacing.sm, - lineHeight: 18, + lineHeight: 20, + fontWeight: '400', }, groupInfoRow: { marginTop: spacing.sm, @@ -135,16 +151,17 @@ function createJoinGroupStyles(colors: AppColors) { paddingHorizontal: spacing.sm, paddingVertical: 4, borderRadius: borderRadius.sm, - backgroundColor: colors.primary.light + '22', + backgroundColor: colors.primary.light + '15', }, copyBtnText: { marginLeft: 4, + fontWeight: '600', }, submitBtn: { flexDirection: 'row', alignItems: 'center', justifyContent: 'center', - borderRadius: borderRadius.md, + borderRadius: borderRadius.lg, backgroundColor: colors.primary.main, minHeight: 46, }, @@ -153,10 +170,13 @@ function createJoinGroupStyles(colors: AppColors) { }, submitText: { marginLeft: spacing.xs, + fontWeight: '700', + fontSize: fontSizes.md, }, emptyText: { marginTop: spacing.sm, textAlign: 'center', + fontWeight: '500', }, loadingFooter: { paddingVertical: spacing.md, @@ -169,6 +189,8 @@ function createJoinGroupStyles(colors: AppColors) { noMoreText: { textAlign: 'center', paddingVertical: spacing.md, + fontWeight: '500', + color: colors.text.hint, }, }); } diff --git a/src/screens/message/components/ChatScreen/ChatInput.tsx b/src/screens/message/components/ChatScreen/ChatInput.tsx index f48d46d..2fececd 100644 --- 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 - + {/* 光泽层 - 模拟渐变效果 */} + + ) : isComposerBusy && !isDisabled ? (