diff --git a/src/components/business/CommentItem.tsx b/src/components/business/CommentItem.tsx index adf1d62..e24d40a 100644 --- a/src/components/business/CommentItem.tsx +++ b/src/components/business/CommentItem.tsx @@ -40,8 +40,6 @@ function createCommentItemStyles(colors: AppColors) { paddingBottom: spacing.md, paddingHorizontal: spacing.md, backgroundColor: colors.background.paper, - borderBottomWidth: StyleSheet.hairlineWidth, - borderBottomColor: colors.divider, }, content: { flex: 1, diff --git a/src/screens/message/GroupInfoScreen.tsx b/src/screens/message/GroupInfoScreen.tsx index 9586ab6..674352d 100644 --- a/src/screens/message/GroupInfoScreen.tsx +++ b/src/screens/message/GroupInfoScreen.tsx @@ -2,6 +2,7 @@ * GroupInfoScreen 群组信息/设置界面 * 显示群组详细信息,提供群组管理功能 * 支持响应式布局 + * QQ 风格:移除装饰性图标,使用简洁的文字列表 */ import React, { useState, useEffect, useCallback, useMemo } from 'react'; @@ -23,13 +24,11 @@ import { import { SafeAreaView } from 'react-native-safe-area-context'; import { useFocusEffect } from "expo-router/react-navigation"; import { useLocalSearchParams, useRouter } from 'expo-router'; -import { MaterialCommunityIcons } from '@expo/vector-icons'; import * as ImagePicker from 'expo-image-picker'; import { spacing, fontSizes, borderRadius, - shadows, useAppColors, type AppColors, } from '../../theme'; @@ -38,7 +37,7 @@ import { groupService } from '@/services/message'; import { uploadService } from '@/services/upload'; import { messageService } from '@/services/message'; import { Avatar, Text, Button, Loading, Divider } from '../../components/common'; -import { useResponsive, useBreakpointGTE } from '../../hooks'; +import { useResponsive } from '../../hooks'; import { GroupResponse, GroupMemberResponse, @@ -58,10 +57,10 @@ import { AppBackButton } from '../../components/common'; const { width: SCREEN_WIDTH } = Dimensions.get('window'); // 加群方式选项 -const JOIN_TYPE_OPTIONS: { value: JoinType; label: string; icon: string; desc: string }[] = [ - { value: 0, label: '允许任何人加入', icon: 'earth', desc: '任何人都可以直接加入群聊' }, - { value: 1, label: '需要管理员审批', icon: 'shield-check', desc: '新成员需要管理员审核' }, - { value: 2, label: '不允许任何人加入', icon: 'lock', desc: '只能通过邀请加入群聊' }, +const JOIN_TYPE_OPTIONS: { value: JoinType; label: string; desc: string }[] = [ + { value: 0, label: '允许任何人加入', desc: '任何人都可以直接加入群聊' }, + { value: 1, label: '需要管理员审批', desc: '新成员需要管理员审核' }, + { value: 2, label: '不允许任何人加入', desc: '只能通过邀请加入群聊' }, ]; const GroupInfoScreen: React.FC = () => { @@ -77,16 +76,7 @@ const GroupInfoScreen: React.FC = () => { const { currentUser } = useAuthStore(); // 响应式布局 - const { isDesktop, isTablet, width } = useResponsive(); - const isWideScreen = useBreakpointGTE('lg'); - - // 计算成员网格列数 - const memberColumns = useMemo(() => { - if (width >= 1200) return 6; - if (width >= 900) return 5; - if (width >= 768) return 4; - return 5; // 移动端默认 - }, [width]); + const { width } = useResponsive(); // 群组信息状态 const [group, setGroup] = useState(null); @@ -512,12 +502,6 @@ const GroupInfoScreen: React.FC = () => { return option?.label || '未知'; }; - // 获取加群方式图标 - const getJoinTypeIcon = (joinType: JoinType): string => { - const option = JOIN_TYPE_OPTIONS.find(o => o.value === joinType); - return option?.icon || 'help-circle'; - }; - const handleCopyGroupNo = () => { if (!group) return; Clipboard.setString(String(group.id)); @@ -530,47 +514,64 @@ const GroupInfoScreen: React.FC = () => { return `${raw.slice(0, 6)}...${raw.slice(-4)}`; }; - // 渲染设置项 + // 渲染设置项:QQ 风格,左侧标题,右侧值/箭头 const renderSettingItem = ( - icon: string, title: string, value?: string, onPress?: () => void, - danger: boolean = false + danger: boolean = false, + subtitle?: string ) => ( - - - - - + + {title} - {value && ( - - {value} + {subtitle && ( + + {subtitle} + + )} + + + {value && ( + + {value} + + )} + {onPress && ( + + › )} - {onPress && ( - - )} ); + // 渲染带开关的设置项 + const renderSwitchItem = ( + title: string, + value: boolean, + onValueChange: () => void, + disabled?: boolean + ) => ( + + {title} + + + ); + if (loading) { return ( @@ -618,7 +619,7 @@ const GroupInfoScreen: React.FC = () => { @@ -626,12 +627,10 @@ const GroupInfoScreen: React.FC = () => { {group.name} - {group.member_count} 人 · - {getJoinTypeText(group.join_type)} @@ -641,7 +640,6 @@ const GroupInfoScreen: React.FC = () => { 群号:{formatGroupNo(group.id)} - 复制 @@ -651,14 +649,12 @@ const GroupInfoScreen: React.FC = () => { {group.description ? ( - {group.description} ) : ( - 暂无群描述 @@ -669,37 +665,32 @@ const GroupInfoScreen: React.FC = () => { {/* 群公告 */} {announcements.length > 0 && ( - - - + setAnnouncementModalVisible(true)} + activeOpacity={0.7} + > + + 群公告 + - 群公告 - - - + {announcements[0].content} - - {(() => { - const d = new Date(announcements[0].created_at); - return Number.isNaN(d.getTime()) ? '' : d.toLocaleDateString(); - })()} - - + )} {/* 成员预览 */} - - + 群成员 + + + {group.member_count}人 + + - 群成员 - - {group.member_count}人 - - @@ -740,108 +731,42 @@ const GroupInfoScreen: React.FC = () => { {/* 邀请成员按钮 */} - - - - 邀请新成员 + + 邀请新成员 - + {/* 群名称 / 群描述 */} + + + {isAdmin && renderSettingItem('群名称', group.name, openEditModal)} + {isAdmin && } + {isOwner && renderSettingItem('加群方式', getJoinTypeText(group.join_type), () => setJoinTypeModalVisible(true))} + {isOwner && } + {isAdmin && renderSettingItem('群描述', group.description || '未设置', openEditModal)} + + + {/* 管理员设置 */} {isAdmin && ( - - - - - 群管理 - - {renderSettingItem('pencil-outline', '修改群信息', undefined, openEditModal)} - - {isOwner && renderSettingItem('earth', '加群方式', getJoinTypeText(group.join_type), () => setJoinTypeModalVisible(true))} + {renderSettingItem('发布群公告', undefined, () => setAnnouncementModalVisible(true))} {isOwner && } - {isOwner && ( - - - - - - 全员禁言 - - {group.mute_all ? '已开启' : '已关闭'} - - - - - )} - - {renderSettingItem('bullhorn-outline', '发布群公告', undefined, () => setAnnouncementModalVisible(true))} + {isOwner && renderSwitchItem('全员禁言', group.mute_all, handleToggleMuteAll)} {isOwner && } - {isOwner && renderSettingItem('account-switch', '转让群主', undefined, () => setTransferModalVisible(true))} + {isOwner && renderSettingItem('转让群主', undefined, () => setTransferModalVisible(true))} )} {/* 聊天设置 */} - - - - - 聊天设置 - - - - - - - 置顶群聊 - - {conversationId ? (isPinned ? '已置顶' : '未置顶') : '请从聊天页面进入后设置'} - - - - - - - - - - - 消息免打扰 - - {conversationId ? (isNotificationMuted ? '已开启' : '未开启') : '请从聊天页面进入后设置'} - - - - - {renderSettingItem( - 'magnify', '查找聊天记录', - undefined, + '图片、视频、文件等', conversationId ? () => router.push(hrefs.hrefMessageSearch({ conversationId, @@ -850,6 +775,10 @@ const GroupInfoScreen: React.FC = () => { })) : undefined, )} + + {renderSwitchItem('设为置顶', isPinned, handleTogglePinned, !conversationId || pinLoading)} + + {renderSwitchItem('消息免打扰', isNotificationMuted, handleToggleNotificationMuted, !conversationId)} @@ -861,7 +790,6 @@ const GroupInfoScreen: React.FC = () => { onPress={handleDissolveGroup} activeOpacity={0.7} > - 解散群组 @@ -872,7 +800,6 @@ const GroupInfoScreen: React.FC = () => { onPress={handleLeaveGroup} activeOpacity={0.7} > - 退出群聊 @@ -919,7 +846,7 @@ const GroupInfoScreen: React.FC = () => { )} - + 更换 @@ -1032,13 +959,6 @@ const GroupInfoScreen: React.FC = () => { onPress={() => handleSetJoinType(option.value)} activeOpacity={0.7} > - - - { {group.join_type === option.value && ( - + )} ))} @@ -1109,7 +1029,7 @@ const GroupInfoScreen: React.FC = () => { {transferUserId === member.user_id && ( - + )} @@ -1145,16 +1065,17 @@ function createGroupInfoStyles(colors: AppColors) { return StyleSheet.create({ container: { flex: 1, - backgroundColor: colors.background.paper, + backgroundColor: colors.background.default, }, pageHeader: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', - paddingHorizontal: spacing.lg, - paddingVertical: spacing.md, + paddingHorizontal: spacing.md, + paddingVertical: spacing.sm, backgroundColor: colors.background.paper, - borderBottomWidth: 0, + borderBottomWidth: 0.5, + borderBottomColor: colors.divider + '60', }, pageTitle: { fontWeight: '600', @@ -1168,7 +1089,6 @@ function createGroupInfoStyles(colors: AppColors) { flex: 1, }, scrollContent: { - paddingHorizontal: spacing.lg, paddingBottom: spacing.xl * 2, }, errorContainer: { @@ -1177,16 +1097,17 @@ function createGroupInfoStyles(colors: AppColors) { alignItems: 'center', }, - // 头部区域 - 扁平化无卡片 + // 头部区域 - QQ 风格简洁白底 headerCard: { backgroundColor: colors.background.paper, + paddingHorizontal: spacing.lg, paddingVertical: spacing.lg, marginBottom: spacing.md, }, groupHeader: { flexDirection: 'row', alignItems: 'center', - marginBottom: spacing.lg, + marginBottom: spacing.md, }, groupInfo: { marginLeft: spacing.lg, @@ -1194,7 +1115,7 @@ function createGroupInfoStyles(colors: AppColors) { }, groupName: { fontWeight: '700', - fontSize: fontSizes['2xl'], + fontSize: fontSizes.xl, marginBottom: spacing.xs, }, groupMeta: { @@ -1209,86 +1130,68 @@ function createGroupInfoStyles(colors: AppColors) { gap: spacing.sm, }, copyGroupNoBtn: { - flexDirection: 'row', - alignItems: 'center', paddingHorizontal: spacing.sm, - paddingVertical: 4, - borderRadius: borderRadius.md, - backgroundColor: colors.primary.light + '15', + paddingVertical: 2, + borderRadius: borderRadius.sm, + backgroundColor: colors.background.default, }, copyGroupNoBtnText: { - marginLeft: 4, fontWeight: '500', }, descriptionContainer: { - flexDirection: 'row', - alignItems: 'flex-start', backgroundColor: colors.background.default, - borderRadius: borderRadius.lg, + borderRadius: borderRadius.md, padding: spacing.md, }, groupDesc: { - marginLeft: spacing.sm, flex: 1, lineHeight: 22, fontWeight: '400', }, - // 通用卡片样式 - 扁平化:无阴影无圆角,使用分割线 + // 通用卡片样式 - 白底分隔(QQ 风格) card: { backgroundColor: colors.background.paper, marginBottom: spacing.md, + paddingHorizontal: spacing.lg, + paddingVertical: spacing.sm, }, cardHeader: { flexDirection: 'row', alignItems: 'center', - marginBottom: spacing.md, - paddingTop: spacing.sm, + justifyContent: 'space-between', + paddingVertical: spacing.md, }, - cardIconContainer: { - width: 36, - height: 36, - borderRadius: borderRadius.md, - backgroundColor: colors.info.light + '15', - justifyContent: 'center', + cardValueRow: { + flexDirection: 'row', alignItems: 'center', - marginRight: spacing.sm, - }, - cardTitle: { - fontWeight: '600', - fontSize: fontSizes.md, - flex: 1, }, - // 公告样式 - 扁平化 - announcementContent: { - backgroundColor: colors.warning.light + '08', - borderRadius: borderRadius.lg, - padding: spacing.md, - borderLeftWidth: 3, - borderLeftColor: colors.warning.main, + // 公告样式 - QQ 风格:标题行 + 内容预览 + announcementRow: { + paddingVertical: spacing.md, }, - announcementText: { - lineHeight: 22, + announcementHeader: { + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', marginBottom: spacing.sm, - fontWeight: '400', }, - announcementTime: { - textAlign: 'right', - fontWeight: '500', + announcementPreviewText: { + lineHeight: 22, + fontWeight: '400', }, // 成员预览样式 memberCount: { marginRight: spacing.xs, - fontWeight: '600', - color: colors.text.secondary, + fontWeight: '500', }, memberPreview: { flexDirection: 'row', alignItems: 'center', flexWrap: 'nowrap', - marginBottom: spacing.md, + paddingVertical: spacing.md, paddingLeft: spacing.xs, }, memberAvatar: { @@ -1320,8 +1223,6 @@ function createGroupInfoStyles(colors: AppColors) { backgroundColor: colors.background.default, justifyContent: 'center', alignItems: 'center', - borderWidth: 1, - borderColor: colors.divider + '60', marginLeft: -8, paddingHorizontal: spacing.xs, }, @@ -1331,88 +1232,81 @@ function createGroupInfoStyles(colors: AppColors) { fontSize: fontSizes.sm, }, - // 邀请按钮样式 - 扁平化 + // 邀请按钮样式 inviteButton: { - flexDirection: 'row', alignItems: 'center', justifyContent: 'center', paddingVertical: spacing.md, - borderRadius: borderRadius.lg, - backgroundColor: colors.primary.light + '10', - borderWidth: 1.5, - borderColor: colors.primary.light + '60', - borderStyle: 'dashed', - }, - inviteIconContainer: { - width: 32, - height: 32, - borderRadius: 16, - backgroundColor: colors.primary.light + '20', - justifyContent: 'center', - alignItems: 'center', - marginRight: spacing.sm, + borderRadius: borderRadius.md, + backgroundColor: colors.background.default, + marginTop: spacing.sm, }, inviteButtonText: { - fontWeight: '700', - marginRight: spacing.xs, + fontWeight: '600', }, - // 设置项样式 - 扁平化:无圆角背景,简洁分割线 + // 设置项样式 - QQ 风格:无图标,标题在左,值/箭头在右 settingsList: { marginTop: 0, }, settingItem: { flexDirection: 'row', alignItems: 'center', + justifyContent: 'space-between', paddingVertical: spacing.md, - paddingHorizontal: 0, - marginLeft: 0, - marginRight: 0, }, - settingIconContainer: { - width: 36, - height: 36, - borderRadius: borderRadius.md, - backgroundColor: colors.background.default, - justifyContent: 'center', - alignItems: 'center', - marginRight: spacing.md, - }, - settingIconDanger: { - backgroundColor: colors.error.light + '15', - }, - settingContent: { + settingItemLeft: { flex: 1, + justifyContent: 'center', + }, + settingItemTitle: { + fontSize: fontSizes.md, + fontWeight: '500', + color: colors.text.primary, + }, + settingItemSubtitle: { + marginTop: spacing.xs, + fontWeight: '400', + lineHeight: 20, + }, + settingValueRow: { + flexDirection: 'row', + alignItems: 'center', + marginLeft: spacing.md, + }, + settingValueText: { + maxWidth: 180, + }, + settingChevron: { + fontSize: fontSizes.xl, + marginLeft: spacing.xs, + fontWeight: '300', }, dangerText: { color: colors.error.main, fontWeight: '600', }, settingDivider: { - marginLeft: 52, - width: 'auto', marginVertical: 0, opacity: 0.5, }, - // 危险操作区域 - 扁平化 + // 危险操作区域 dangerCard: { padding: 0, overflow: 'hidden', - marginTop: spacing.sm, + marginTop: 0, }, dangerButton: { - flexDirection: 'row', alignItems: 'center', justifyContent: 'center', paddingVertical: spacing.lg, - gap: spacing.sm, }, dangerButtonText: { fontWeight: '600', }, - // 模态框样式 - 扁平化 + // 模态框样式 modalOverlay: { flex: 1, backgroundColor: 'rgba(0, 0, 0, 0.45)', @@ -1436,10 +1330,6 @@ function createGroupInfoStyles(colors: AppColors) { borderBottomWidth: 0.5, borderBottomColor: colors.divider + '60', }, - modalHeaderButton: { - paddingVertical: spacing.sm, - minWidth: 60, - }, modalTitle: { fontWeight: '700', fontSize: fontSizes.xl, @@ -1447,12 +1337,8 @@ function createGroupInfoStyles(colors: AppColors) { saveButton: { fontWeight: '600', }, - confirmButton: { - fontWeight: '600', - textAlign: 'right', - }, - // 编辑表单样式 - 扁平化 + // 编辑表单样式 editForm: { alignItems: 'center', }, @@ -1481,11 +1367,9 @@ function createGroupInfoStyles(colors: AppColors) { bottom: 0, right: 0, backgroundColor: colors.primary.main, - width: 32, - height: 32, - borderRadius: 16, - justifyContent: 'center', - alignItems: 'center', + paddingHorizontal: spacing.sm, + paddingVertical: 4, + borderRadius: borderRadius.md, borderWidth: 3, borderColor: colors.background.paper, }, @@ -1542,36 +1426,25 @@ function createGroupInfoStyles(colors: AppColors) { fontWeight: '500', }, - // 加群方式样式 - 更现代的选中状态 + // 加群方式样式 joinTypeList: { gap: spacing.md, }, joinTypeItem: { - flexDirection: 'row', - alignItems: 'center', padding: spacing.md, borderRadius: borderRadius.lg, borderWidth: 1, borderColor: colors.divider + '80', backgroundColor: colors.background.default, + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', }, joinTypeItemSelected: { borderColor: colors.primary.main, backgroundColor: colors.primary.light + '12', borderWidth: 1.5, }, - joinTypeIcon: { - width: 48, - height: 48, - borderRadius: borderRadius.lg, - backgroundColor: colors.background.paper, - justifyContent: 'center', - alignItems: 'center', - marginRight: spacing.md, - }, - joinTypeIconSelected: { - backgroundColor: colors.primary.light + '25', - }, joinTypeInfo: { flex: 1, }, @@ -1579,6 +1452,10 @@ function createGroupInfoStyles(colors: AppColors) { fontWeight: '700', color: colors.primary.main, }, + joinTypeCheck: { + fontSize: fontSizes.lg, + fontWeight: '700', + }, // 转让群主样式 transferDesc: { @@ -1632,79 +1509,6 @@ function createGroupInfoStyles(colors: AppColors) { transferButton: { marginTop: spacing.sm, }, - - // 邀请成员模态框样式 - tabContainer: { - flexDirection: 'row', - backgroundColor: colors.background.default, - borderRadius: borderRadius.lg, - padding: spacing.xs, - marginBottom: spacing.md, - borderWidth: 1, - borderColor: colors.divider + '60', - }, - tab: { - flex: 1, - paddingVertical: spacing.sm, - alignItems: 'center', - borderRadius: borderRadius.md, - }, - tabActive: { - backgroundColor: colors.background.paper, - borderWidth: 1, - borderColor: colors.divider + '60', - }, - tabTextActive: { - fontWeight: '700', - }, - selectedBadge: { - backgroundColor: colors.primary.light + '20', - paddingHorizontal: spacing.md, - paddingVertical: spacing.xs, - borderRadius: borderRadius.sm, - alignSelf: 'flex-start', - marginBottom: spacing.md, - }, - friendListContent: { - paddingBottom: spacing.xl, - }, - friendItem: { - flexDirection: 'row', - alignItems: 'center', - paddingVertical: spacing.md, - paddingHorizontal: spacing.sm, - borderRadius: borderRadius.lg, - marginBottom: spacing.sm, - backgroundColor: colors.background.default, - }, - friendItemSelected: { - backgroundColor: colors.primary.light + '12', - borderWidth: 1, - borderColor: colors.primary.light + '60', - }, - friendInfo: { - flex: 1, - marginLeft: spacing.md, - marginRight: spacing.sm, - }, - nickname: { - fontWeight: '600', - marginBottom: 2, - }, - checkbox: { - width: 26, - height: 26, - borderRadius: 13, - borderWidth: 2, - borderColor: colors.divider, - justifyContent: 'center', - alignItems: 'center', - backgroundColor: colors.background.paper, - }, - checkboxSelected: { - backgroundColor: colors.primary.main, - borderColor: colors.primary.main, - }, }); } diff --git a/src/screens/message/GroupMembersScreen.tsx b/src/screens/message/GroupMembersScreen.tsx index 956aff4..b2a33f7 100644 --- a/src/screens/message/GroupMembersScreen.tsx +++ b/src/screens/message/GroupMembersScreen.tsx @@ -3,9 +3,10 @@ * 显示群成员列表,支持管理员管理成员 * 支持响应式网格布局 * 使用游标分页 + * QQ 风格:移除装饰性图标,使用简洁的文字列表 */ -import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react'; +import React, { useState, useEffect, useCallback, useMemo } from 'react'; import { View, StyleSheet, @@ -22,7 +23,6 @@ import { import { SafeAreaView } from 'react-native-safe-area-context'; import { useLocalSearchParams, useRouter } from 'expo-router'; import { hrefUserProfile } from '../../navigation/hrefs'; -import { MaterialCommunityIcons } from '@expo/vector-icons'; import { blurActiveElement } from '../../infrastructure/platform'; import { spacing, fontSizes, borderRadius, useAppColors, type AppColors } from '../../theme'; import { useAuthStore } from '../../stores'; @@ -33,8 +33,8 @@ import { ICursorGroupMemberListPagedSource, } from '../../stores/group'; import { enrichGroupMembersWithUserProfiles } from '../../stores/group'; -import { Avatar, Text, Button, Loading, EmptyState, Divider, ResponsiveContainer, AppBackButton } from '../../components/common'; -import { useResponsive, useBreakpointGTE } from '../../hooks'; +import { Avatar, Text, Button, Loading, EmptyState, Divider, AppBackButton } from '../../components/common'; +import { useResponsive } from '../../hooks'; import { useCursorPagination } from '../../hooks/useCursorPagination'; import { GroupMemberResponse, @@ -44,13 +44,6 @@ import { firstRouteParam } from '../../navigation/paramUtils'; const { width: SCREEN_WIDTH } = Dimensions.get('window'); const GROUP_MEMBER_REMOTE_LIST_KIND: GroupMemberListSourceKind = 'cursor'; -// 网格布局配置 -const GRID_CONFIG = { - mobile: { columns: 1, itemWidth: '100%' }, - tablet: { columns: 2, itemWidth: '48%' }, - desktop: { columns: 3, itemWidth: '31%' }, -}; - // 成员分组 interface MemberGroup { title: string; @@ -66,15 +59,7 @@ const GroupMembersScreen: React.FC = () => { const { currentUser } = useAuthStore(); // 响应式布局 - const { isDesktop, isTablet, width } = useResponsive(); - const isWideScreen = useBreakpointGTE('lg'); - - // 计算网格列数 - const gridConfig = useMemo(() => { - if (width >= 1024) return GRID_CONFIG.desktop; - if (width >= 768) return GRID_CONFIG.tablet; - return GRID_CONFIG.mobile; - }, [width]); + const { width } = useResponsive(); const memberListSource = useMemo(() => { return createCursorGroupMemberListSource(GROUP_MEMBER_REMOTE_LIST_KIND, groupId, 50); @@ -431,17 +416,17 @@ const GroupMembersScreen: React.FC = () => { {item.muted && ( - - 禁言中 + 禁言中 )} {canManage && ( openActionModal(item)} hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }} > - + ··· )} @@ -468,7 +453,6 @@ const GroupMembersScreen: React.FC = () => { ); }; @@ -509,11 +493,6 @@ const GroupMembersScreen: React.FC = () => { onPress={handleToggleAdmin} disabled={actionLoading} > - {selectedMember.role === 'admin' ? '取消管理员' : '设为管理员'} @@ -526,11 +505,6 @@ const GroupMembersScreen: React.FC = () => { onPress={handleToggleMute} disabled={actionLoading} > - { onPress={handleRemoveMember} disabled={actionLoading} > - 移除成员 @@ -690,21 +663,20 @@ 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.md, + paddingVertical: spacing.sm, backgroundColor: colors.background.paper, borderBottomWidth: 0.5, borderBottomColor: colors.divider + '60', }, pageTitle: { - fontWeight: '800', - fontSize: fontSizes.xl + 1, - letterSpacing: 0.5, + fontWeight: '600', + fontSize: fontSizes.xl, }, pageHeaderPlaceholder: { width: 40, @@ -712,6 +684,7 @@ function createGroupMembersStyles(colors: AppColors) { }, section: { marginBottom: spacing.md, + backgroundColor: colors.background.paper, }, sectionHeader: { flexDirection: 'row', @@ -720,8 +693,6 @@ function createGroupMembersStyles(colors: AppColors) { paddingHorizontal: spacing.lg, paddingVertical: spacing.md, backgroundColor: colors.background.default, - borderTopWidth: 0.5, - borderTopColor: colors.divider + '40', }, memberItem: { flexDirection: 'row', @@ -742,25 +713,31 @@ function createGroupMembersStyles(colors: AppColors) { marginBottom: 2, }, memberName: { - fontWeight: '700', - fontSize: fontSizes.md + 1, - letterSpacing: 0.3, + fontWeight: '500', + fontSize: fontSizes.md, }, roleBadge: { 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, }, - // 模态框样式 - 更现代 + moreButton: { + paddingHorizontal: spacing.sm, + paddingVertical: spacing.xs, + minWidth: 36, + alignItems: 'center', + }, + moreButtonText: { + fontSize: fontSizes['2xl'], + fontWeight: '700', + lineHeight: fontSizes['2xl'], + color: colors.text.hint, + }, + // 模态框样式 modalOverlay: { flex: 1, backgroundColor: 'rgba(0, 0, 0, 0.45)', @@ -781,32 +758,25 @@ function createGroupMembersStyles(colors: AppColors) { borderBottomColor: colors.divider + '60', }, modalTitle: { - fontWeight: '800', - fontSize: fontSizes.xl + 1, + fontWeight: '700', + fontSize: fontSizes.xl, marginTop: spacing.sm, marginBottom: spacing.xs, - letterSpacing: 0.5, }, actionItem: { - flexDirection: 'row', alignItems: 'center', paddingVertical: spacing.md, - 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, + fontWeight: '600', + fontSize: fontSizes.sm, }, input: { backgroundColor: colors.background.default, @@ -815,7 +785,7 @@ function createGroupMembersStyles(colors: AppColors) { paddingVertical: spacing.md, fontSize: fontSizes.md, color: colors.text.primary, - borderWidth: 1.5, + borderWidth: 1, borderColor: colors.divider + '80', marginBottom: spacing.md, }, diff --git a/src/screens/message/PrivateChatInfoScreen.tsx b/src/screens/message/PrivateChatInfoScreen.tsx index bb97db1..1930ede 100644 --- a/src/screens/message/PrivateChatInfoScreen.tsx +++ b/src/screens/message/PrivateChatInfoScreen.tsx @@ -15,8 +15,7 @@ import { } from 'react-native'; import { SafeAreaView } from 'react-native-safe-area-context'; import { useRouter, useLocalSearchParams } from 'expo-router'; -import { MaterialCommunityIcons } from '@expo/vector-icons'; -import { spacing, borderRadius, shadows, fontSizes, useAppColors, type AppColors } from '../../theme'; +import { spacing, fontSizes, useAppColors, type AppColors } from '../../theme'; import { useAuthStore } from '../../stores'; import { authService } from '@/services/auth'; import { messageService } from '@/services/message'; @@ -262,34 +261,28 @@ const PrivateChatInfoScreen: React.FC = () => { ); }; - // 渲染设置项(带开关) + // 渲染开关设置项 - QQ 风格:左侧标题,右侧开关 const renderSwitchItem = ( - icon: string, title: string, value: boolean, onValueChange: () => void ) => ( - - - - - {title} - + {title} ); - // 渲染设置项(带箭头) + // 渲染操作项 - QQ 风格:左侧标题,右侧值/箭头 const renderActionItem = ( - icon: string, title: string, onPress: () => void, + value?: string, danger: boolean = false ) => ( { onPress={onPress} activeOpacity={0.7} > - - - - + {title} - + + {value && ( + + {value} + + )} + + ); @@ -351,7 +344,7 @@ const PrivateChatInfoScreen: React.FC = () => { > @@ -364,59 +357,53 @@ const PrivateChatInfoScreen: React.FC = () => { )} - + {/* 聊天设置 */} - - - 聊天设置 - - - {renderSwitchItem('bell-off-outline', '消息免打扰', isMuted, toggleMute)} + + + {renderSwitchItem('消息免打扰', isMuted, toggleMute)} - {renderSwitchItem('pin-outline', '置顶聊天', isPinned, togglePin)} + {renderSwitchItem('置顶聊天', isPinned, togglePin)} {/* 聊天记录管理 */} - - - 聊天记录 - - - {renderActionItem('magnify', '查找聊天记录', handleSearchMessages)} + + + {renderActionItem('查找聊天记录', handleSearchMessages)} - {renderActionItem('delete-sweep-outline', '清空聊天记录', handleClearHistory, true)} + {renderActionItem('清空聊天记录', handleClearHistory, undefined, true)} {/* 其他操作 */} - - - 其他 - - - {renderActionItem('shield-alert-outline', '投诉', handleReport, true)} + + + {renderActionItem('投诉', handleReport, undefined, true)} {renderActionItem( - isBlocked ? 'account-check-outline' : 'account-cancel-outline', isBlocked ? '取消拉黑' : '拉黑用户', handleBlockUser, + undefined, true )} {/* 删除聊天按钮 */} - -