lan
3968660048
Include app source and update .gitignore to exclude local release artifacts and signing files. Made-with: Cursor
1168 lines
25 KiB
TypeScript
1168 lines
25 KiB
TypeScript
/**
|
||
* ChatScreen 样式定义
|
||
* 支持响应式布局
|
||
*/
|
||
|
||
import { StyleSheet, Dimensions } from 'react-native';
|
||
import { colors, spacing, shadows } from '../../../../theme';
|
||
|
||
const { width: SCREEN_WIDTH } = Dimensions.get('window');
|
||
|
||
// 响应式断点
|
||
const BREAKPOINTS = {
|
||
tablet: 768,
|
||
desktop: 1024,
|
||
};
|
||
|
||
// 判断是否为宽屏
|
||
const isWideScreen = SCREEN_WIDTH >= BREAKPOINTS.desktop;
|
||
const isTablet = SCREEN_WIDTH >= BREAKPOINTS.tablet;
|
||
|
||
export const chatScreenStyles = StyleSheet.create({
|
||
// 容器
|
||
container: {
|
||
flex: 1,
|
||
backgroundColor: '#F0F2F5',
|
||
},
|
||
|
||
// 头部
|
||
headerContainer: {
|
||
backgroundColor: '#FFFFFF',
|
||
borderBottomWidth: 1,
|
||
borderBottomColor: 'rgba(255, 107, 53, 0.12)',
|
||
shadowColor: '#000',
|
||
shadowOffset: { width: 0, height: 3 },
|
||
shadowOpacity: 0.06,
|
||
shadowRadius: 10,
|
||
elevation: 5,
|
||
},
|
||
header: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
justifyContent: 'space-between',
|
||
paddingHorizontal: spacing.md,
|
||
paddingVertical: spacing.sm + 2,
|
||
backgroundColor: '#FFFFFF',
|
||
},
|
||
backButton: {
|
||
width: 38,
|
||
height: 38,
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
borderRadius: 19,
|
||
backgroundColor: `${colors.primary.main}12`,
|
||
borderWidth: 1,
|
||
borderColor: `${colors.primary.main}26`,
|
||
},
|
||
headerCenter: {
|
||
alignItems: 'stretch',
|
||
flex: 1,
|
||
marginHorizontal: spacing.sm,
|
||
},
|
||
titleRow: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
borderRadius: 14,
|
||
paddingHorizontal: spacing.sm,
|
||
paddingVertical: spacing.xs + 1,
|
||
gap: spacing.xs + 2,
|
||
flex: 1,
|
||
},
|
||
titleLeading: {
|
||
width: 34,
|
||
height: 34,
|
||
borderRadius: 17,
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
backgroundColor: `${colors.primary.main}14`,
|
||
},
|
||
titleContent: {
|
||
flex: 1,
|
||
minWidth: 0,
|
||
},
|
||
subtitleRow: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
marginTop: 2,
|
||
gap: spacing.xs,
|
||
minHeight: 16,
|
||
},
|
||
headerName: {
|
||
fontWeight: '700',
|
||
color: colors.text.primary,
|
||
fontSize: 17,
|
||
letterSpacing: -0.3,
|
||
},
|
||
memberCount: {
|
||
fontSize: 12,
|
||
color: colors.text.secondary,
|
||
fontWeight: '500',
|
||
},
|
||
typingHint: {
|
||
fontSize: 12,
|
||
color: colors.primary.dark,
|
||
backgroundColor: `${colors.primary.main}14`,
|
||
borderRadius: 10,
|
||
paddingHorizontal: 6,
|
||
paddingVertical: 1,
|
||
},
|
||
moreButton: {
|
||
width: 38,
|
||
height: 38,
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
borderRadius: 19,
|
||
backgroundColor: '#F7F8FA',
|
||
borderWidth: 1,
|
||
borderColor: '#ECEFF3',
|
||
},
|
||
|
||
// 消息列表
|
||
messageListContainer: {
|
||
flex: 1,
|
||
},
|
||
listContent: {
|
||
paddingHorizontal: spacing.md,
|
||
paddingTop: spacing.md,
|
||
paddingBottom: spacing.xl,
|
||
},
|
||
|
||
// 时间分隔 - QQ风格：更明显的时间标签
|
||
timeContainer: {
|
||
alignItems: 'center',
|
||
marginVertical: spacing.lg,
|
||
},
|
||
timeText: {
|
||
color: '#8E8E93',
|
||
fontSize: 12,
|
||
backgroundColor: 'rgba(142, 142, 147, 0.12)',
|
||
paddingHorizontal: spacing.md,
|
||
paddingVertical: 6,
|
||
borderRadius: 14,
|
||
fontWeight: '600',
|
||
overflow: 'hidden',
|
||
letterSpacing: 0.3,
|
||
},
|
||
|
||
// 系统通知
|
||
systemNoticeContainer: {
|
||
alignItems: 'center',
|
||
marginVertical: spacing.sm,
|
||
paddingHorizontal: spacing.md,
|
||
},
|
||
systemNoticeText: {
|
||
fontSize: 12,
|
||
color: '#8E8E93',
|
||
backgroundColor: 'rgba(142, 142, 147, 0.12)',
|
||
paddingHorizontal: spacing.md,
|
||
paddingVertical: spacing.xs,
|
||
borderRadius: 12,
|
||
overflow: 'hidden',
|
||
},
|
||
|
||
// 消息行
|
||
messageRow: {
|
||
flexDirection: 'row',
|
||
marginBottom: spacing.md,
|
||
alignItems: 'flex-end',
|
||
},
|
||
myMessageRow: {
|
||
justifyContent: 'flex-end',
|
||
},
|
||
theirMessageRow: {
|
||
justifyContent: 'flex-start',
|
||
alignItems: 'flex-start',
|
||
},
|
||
|
||
// 头像
|
||
avatarWrapper: {
|
||
marginHorizontal: 2,
|
||
shadowColor: '#000',
|
||
shadowOffset: { width: 0, height: 1 },
|
||
shadowOpacity: 0.08,
|
||
shadowRadius: 2,
|
||
elevation: 2,
|
||
},
|
||
groupAvatarWrapper: {
|
||
marginHorizontal: 2,
|
||
shadowColor: '#000',
|
||
shadowOffset: { width: 0, height: 1 },
|
||
shadowOpacity: 0.08,
|
||
shadowRadius: 2,
|
||
elevation: 2,
|
||
},
|
||
|
||
// 消息内容 - 自适应宽度，限制最大宽度
|
||
messageContent: {
|
||
maxWidth: '75%',
|
||
marginHorizontal: spacing.xs,
|
||
alignItems: 'flex-start',
|
||
},
|
||
senderName: {
|
||
fontSize: 13,
|
||
color: '#1976D2',
|
||
marginBottom: 4,
|
||
marginLeft: 4,
|
||
fontWeight: '600',
|
||
},
|
||
|
||
// 消息气泡 - Telegram风格：浅色背景，统一字体颜色
|
||
messageBubble: {
|
||
paddingHorizontal: spacing.md,
|
||
paddingVertical: spacing.sm + 4,
|
||
borderRadius: 16,
|
||
// 自适应内容宽度
|
||
minWidth: 60,
|
||
},
|
||
myBubble: {
|
||
backgroundColor: '#E3F2FD', // Telegram风格的浅蓝色
|
||
borderBottomRightRadius: 4, // 右下角尖，箭头在右下
|
||
shadowColor: '#000',
|
||
shadowOffset: { width: 0, height: 1 },
|
||
shadowOpacity: 0.08,
|
||
shadowRadius: 2,
|
||
elevation: 2,
|
||
},
|
||
theirBubble: {
|
||
backgroundColor: '#FFFFFF',
|
||
borderTopLeftRadius: 4, // 左上角尖，箭头在左上
|
||
shadowColor: '#000',
|
||
shadowOffset: { width: 0, height: 1 },
|
||
shadowOpacity: 0.08,
|
||
shadowRadius: 2,
|
||
elevation: 2,
|
||
},
|
||
recalledBubble: {
|
||
backgroundColor: '#F5F7FA',
|
||
borderWidth: 1,
|
||
borderColor: '#E8E8E8',
|
||
borderStyle: 'dashed',
|
||
},
|
||
myBubbleText: {
|
||
color: '#1A1A1A', // 统一使用深色字体
|
||
fontSize: 16,
|
||
lineHeight: 23,
|
||
letterSpacing: 0.2,
|
||
fontWeight: '400',
|
||
},
|
||
theirBubbleText: {
|
||
color: '#1A1A1A', // 统一使用深色字体
|
||
fontSize: 16,
|
||
lineHeight: 23,
|
||
letterSpacing: 0.2,
|
||
fontWeight: '400',
|
||
},
|
||
// 选中状态
|
||
selectedBubble: {
|
||
borderWidth: 2,
|
||
borderColor: '#007AFF',
|
||
},
|
||
mySelectedBubble: {
|
||
backgroundColor: '#0051D5',
|
||
borderWidth: 2,
|
||
borderColor: 'rgba(255,255,255,0.5)',
|
||
},
|
||
theirSelectedBubble: {
|
||
backgroundColor: '#E8F1FF',
|
||
borderWidth: 2,
|
||
borderColor: '#007AFF',
|
||
},
|
||
selectedText: {
|
||
// 文本选中时的样式
|
||
},
|
||
recalledText: {
|
||
color: '#8E8E93',
|
||
fontStyle: 'italic',
|
||
},
|
||
|
||
// 图片消息 - QQ风格：更大的图片，更明显的圆角
|
||
imageBubble: {
|
||
borderRadius: 18,
|
||
overflow: 'hidden',
|
||
shadowColor: '#000',
|
||
shadowOffset: { width: 0, height: 3 },
|
||
shadowOpacity: 0.15,
|
||
shadowRadius: 6,
|
||
elevation: 5,
|
||
},
|
||
myImageBubble: {
|
||
borderBottomRightRadius: 6, // 右下角尖，箭头在右下
|
||
},
|
||
theirImageBubble: {
|
||
borderTopLeftRadius: 6, // 左上角尖，箭头在左上
|
||
},
|
||
messageImage: {
|
||
width: 220,
|
||
height: 220,
|
||
borderRadius: 18,
|
||
},
|
||
|
||
// 已读状态
|
||
readStatusContainer: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
alignSelf: 'flex-end',
|
||
marginTop: 2,
|
||
marginRight: 2,
|
||
gap: 2,
|
||
},
|
||
readStatusText: {
|
||
fontSize: 10,
|
||
color: '#8E8E93',
|
||
fontWeight: '500',
|
||
},
|
||
readStatusTextRead: {
|
||
color: '#34C759',
|
||
},
|
||
|
||
// 输入框区域
|
||
inputWrapper: {
|
||
backgroundColor: 'transparent',
|
||
},
|
||
inputContainer: {
|
||
backgroundColor: colors.background.paper,
|
||
borderWidth: 1,
|
||
borderColor: `${colors.divider}88`,
|
||
borderRadius: 24,
|
||
marginHorizontal: 14,
|
||
marginBottom: 12,
|
||
paddingHorizontal: spacing.sm,
|
||
paddingVertical: spacing.sm,
|
||
...shadows.lg,
|
||
},
|
||
inputInner: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
backgroundColor: '#F7F8FA',
|
||
borderRadius: 20,
|
||
paddingHorizontal: spacing.xs,
|
||
paddingVertical: 4,
|
||
minHeight: 44,
|
||
},
|
||
inputInnerMuted: {
|
||
backgroundColor: '#F0F0F0',
|
||
opacity: 0.7,
|
||
},
|
||
|
||
// 禁言提示
|
||
mutedBanner: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
backgroundColor: '#FFF5F5',
|
||
paddingVertical: spacing.xs,
|
||
paddingHorizontal: spacing.md,
|
||
marginBottom: spacing.xs,
|
||
borderRadius: 8,
|
||
gap: 6,
|
||
},
|
||
mutedBannerText: {
|
||
fontSize: 13,
|
||
color: '#FF3B30',
|
||
fontWeight: '500',
|
||
},
|
||
|
||
// 图标按钮
|
||
iconButton: {
|
||
width: 38,
|
||
height: 30,
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
borderRadius: 15,
|
||
},
|
||
iconButtonActive: {
|
||
backgroundColor: `${colors.primary.main}20`,
|
||
transform: [{ translateY: -1 }],
|
||
},
|
||
|
||
// 发送按钮
|
||
sendButtonActive: {
|
||
width: 38,
|
||
height: 30,
|
||
borderRadius: 15,
|
||
backgroundColor: colors.primary.main,
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
...shadows.md,
|
||
},
|
||
sendButtonDisabled: {
|
||
opacity: 0.6,
|
||
},
|
||
|
||
// 输入框
|
||
inputBox: {
|
||
flex: 1,
|
||
paddingHorizontal: spacing.xs,
|
||
maxHeight: 100,
|
||
justifyContent: 'center',
|
||
},
|
||
input: {
|
||
fontSize: 16,
|
||
color: '#1A1A1A',
|
||
paddingTop: 8,
|
||
paddingBottom: 8,
|
||
maxHeight: 100,
|
||
lineHeight: 20,
|
||
},
|
||
inputMuted: {
|
||
color: '#CCC',
|
||
},
|
||
inputTransparent: {
|
||
color: 'transparent',
|
||
},
|
||
|
||
// 输入框@高亮
|
||
inputHighlightOverlay: {
|
||
...StyleSheet.absoluteFillObject,
|
||
flexDirection: 'row',
|
||
flexWrap: 'wrap',
|
||
paddingTop: 8,
|
||
paddingBottom: 8,
|
||
},
|
||
inputHighlightText: {
|
||
fontSize: 16,
|
||
color: '#1A1A1A',
|
||
lineHeight: 20,
|
||
},
|
||
inputHighlightMention: {
|
||
color: colors.primary.main,
|
||
fontWeight: '600',
|
||
},
|
||
|
||
// 加载状态
|
||
loadingContainer: {
|
||
flex: 1,
|
||
justifyContent: 'center',
|
||
alignItems: 'center',
|
||
paddingVertical: spacing.xl * 2,
|
||
},
|
||
|
||
// 面板
|
||
panelWrapper: {
|
||
backgroundColor: '#F5F7FA',
|
||
borderTopWidth: 1,
|
||
borderTopColor: '#E8E8E8',
|
||
shadowColor: '#000',
|
||
shadowOffset: { width: 0, height: -2 },
|
||
shadowOpacity: 0.1,
|
||
shadowRadius: 8,
|
||
elevation: 8,
|
||
},
|
||
// 表情面板包装器 - 底部 tab 栏是白色，安全区域也用白色填充
|
||
emojiPanelWrapper: {
|
||
backgroundColor: '#FFFFFF',
|
||
},
|
||
panelContainer: {
|
||
flex: 1,
|
||
backgroundColor: '#F5F7FA',
|
||
},
|
||
|
||
// 表情面板
|
||
emojiGrid: {
|
||
flexDirection: 'row',
|
||
flexWrap: 'wrap',
|
||
paddingHorizontal: spacing.md,
|
||
paddingTop: spacing.md,
|
||
paddingBottom: spacing.xl,
|
||
alignItems: 'flex-start',
|
||
},
|
||
emojiItem: {
|
||
width: '12.5%',
|
||
height: 52,
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
},
|
||
emojiText: {
|
||
fontSize: 28,
|
||
lineHeight: 34,
|
||
},
|
||
panelFooter: {
|
||
flexDirection: 'row',
|
||
justifyContent: 'flex-end',
|
||
paddingHorizontal: spacing.md,
|
||
paddingVertical: spacing.sm,
|
||
borderTopWidth: 1,
|
||
borderTopColor: '#E8E8E8',
|
||
},
|
||
panelCloseButton: {
|
||
width: 40,
|
||
height: 40,
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
backgroundColor: '#FFFFFF',
|
||
borderRadius: 8,
|
||
shadowColor: '#000',
|
||
shadowOffset: { width: 0, height: 1 },
|
||
shadowOpacity: 0.1,
|
||
shadowRadius: 2,
|
||
elevation: 2,
|
||
},
|
||
|
||
// 面板内容区域
|
||
panelContent: {
|
||
flex: 1,
|
||
},
|
||
|
||
// Tab 栏
|
||
panelTabBar: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
paddingHorizontal: spacing.sm,
|
||
paddingVertical: spacing.xs,
|
||
borderTopWidth: 1,
|
||
borderTopColor: '#E8E8E8',
|
||
backgroundColor: '#FFFFFF',
|
||
},
|
||
panelTab: {
|
||
width: 44,
|
||
height: 44,
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
borderRadius: 8,
|
||
marginRight: spacing.xs,
|
||
},
|
||
panelTabActive: {
|
||
backgroundColor: '#E3F2FD',
|
||
},
|
||
panelTabEmoji: {
|
||
fontSize: 24,
|
||
},
|
||
panelTabDivider: {
|
||
width: 1,
|
||
height: 24,
|
||
backgroundColor: '#E8E8E8',
|
||
marginHorizontal: spacing.sm,
|
||
},
|
||
|
||
// 自定义表情面板
|
||
stickerLoadingContainer: {
|
||
flex: 1,
|
||
justifyContent: 'center',
|
||
alignItems: 'center',
|
||
},
|
||
stickerEmptyContainer: {
|
||
flex: 1,
|
||
justifyContent: 'center',
|
||
alignItems: 'center',
|
||
padding: spacing.xl,
|
||
},
|
||
stickerEmptyText: {
|
||
fontSize: 16,
|
||
color: '#666',
|
||
marginTop: spacing.md,
|
||
fontWeight: '500',
|
||
},
|
||
stickerEmptySubText: {
|
||
fontSize: 13,
|
||
color: '#999',
|
||
marginTop: spacing.xs,
|
||
},
|
||
stickerGrid: {
|
||
flexDirection: 'row',
|
||
flexWrap: 'wrap',
|
||
paddingHorizontal: spacing.md,
|
||
paddingTop: spacing.md,
|
||
paddingBottom: spacing.xl,
|
||
},
|
||
stickerItem: {
|
||
width: (SCREEN_WIDTH - spacing.md * 2) / 4 - 8,
|
||
height: (SCREEN_WIDTH - spacing.md * 2) / 4 - 8,
|
||
margin: 4,
|
||
borderRadius: 8,
|
||
overflow: 'hidden',
|
||
backgroundColor: '#F5F5F5',
|
||
},
|
||
stickerImage: {
|
||
width: '100%',
|
||
height: '100%',
|
||
},
|
||
|
||
// 更多功能面板
|
||
moreGrid: {
|
||
flexDirection: 'row',
|
||
flexWrap: 'wrap',
|
||
padding: spacing.lg,
|
||
},
|
||
moreItem: {
|
||
width: (SCREEN_WIDTH - spacing.lg * 2) / 4,
|
||
alignItems: 'center',
|
||
marginBottom: spacing.lg,
|
||
},
|
||
moreIconContainer: {
|
||
width: 60,
|
||
height: 60,
|
||
borderRadius: 16,
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
marginBottom: spacing.sm,
|
||
backgroundColor: '#FFFFFF',
|
||
shadowColor: '#000',
|
||
shadowOffset: { width: 0, height: 2 },
|
||
shadowOpacity: 0.08,
|
||
shadowRadius: 4,
|
||
elevation: 2,
|
||
},
|
||
moreItemText: {
|
||
fontSize: 13,
|
||
color: '#666',
|
||
fontWeight: '500',
|
||
},
|
||
|
||
// @成员选择浮层 - 绝对定位浮在输入框上方
|
||
mentionPanelFloat: {
|
||
position: 'absolute',
|
||
left: 12,
|
||
right: 12,
|
||
backgroundColor: '#FFFFFF',
|
||
borderRadius: 18,
|
||
shadowColor: colors.primary.main,
|
||
shadowOffset: { width: 0, height: -3 },
|
||
shadowOpacity: 0.12,
|
||
shadowRadius: 16,
|
||
elevation: 24,
|
||
zIndex: 100,
|
||
borderWidth: 1,
|
||
borderColor: 'rgba(255, 107, 53, 0.08)',
|
||
},
|
||
|
||
// @成员选择面板
|
||
mentionPanelContainer: {
|
||
flex: 1,
|
||
backgroundColor: '#FFFFFF',
|
||
borderRadius: 18,
|
||
},
|
||
mentionPanelDragHandle: {
|
||
alignItems: 'center',
|
||
paddingTop: 8,
|
||
paddingBottom: 2,
|
||
},
|
||
mentionPanelDragBar: {
|
||
width: 32,
|
||
height: 3,
|
||
borderRadius: 2,
|
||
backgroundColor: '#E0E0E0',
|
||
},
|
||
mentionPanelHeader: {
|
||
flexDirection: 'row',
|
||
justifyContent: 'space-between',
|
||
alignItems: 'center',
|
||
paddingHorizontal: spacing.md,
|
||
paddingTop: 4,
|
||
paddingBottom: 8,
|
||
borderBottomWidth: StyleSheet.hairlineWidth,
|
||
borderBottomColor: '#F0F0F0',
|
||
},
|
||
mentionPanelTitle: {
|
||
fontSize: 12,
|
||
fontWeight: '600',
|
||
color: '#AAAAAA',
|
||
letterSpacing: 0.5,
|
||
textTransform: 'uppercase',
|
||
},
|
||
mentionPanelCloseBtn: {
|
||
width: 26,
|
||
height: 26,
|
||
borderRadius: 13,
|
||
backgroundColor: '#F5F5F5',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
},
|
||
mentionList: {
|
||
flex: 1,
|
||
},
|
||
mentionItem: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
paddingHorizontal: spacing.md,
|
||
paddingVertical: 9,
|
||
},
|
||
mentionItemAll: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
paddingHorizontal: spacing.md,
|
||
paddingVertical: 9,
|
||
backgroundColor: 'rgba(255, 107, 53, 0.04)',
|
||
borderBottomWidth: StyleSheet.hairlineWidth,
|
||
borderBottomColor: 'rgba(255, 107, 53, 0.12)',
|
||
},
|
||
mentionAllIcon: {
|
||
width: 38,
|
||
height: 38,
|
||
borderRadius: 19,
|
||
backgroundColor: colors.primary.main,
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
shadowColor: colors.primary.main,
|
||
shadowOffset: { width: 0, height: 2 },
|
||
shadowOpacity: 0.3,
|
||
shadowRadius: 4,
|
||
elevation: 3,
|
||
},
|
||
mentionItemInfo: {
|
||
marginLeft: 10,
|
||
flex: 1,
|
||
},
|
||
mentionItemName: {
|
||
fontSize: 15,
|
||
fontWeight: '500',
|
||
color: '#1A1A1A',
|
||
},
|
||
mentionItemNameAll: {
|
||
fontSize: 15,
|
||
fontWeight: '600',
|
||
color: colors.primary.main,
|
||
},
|
||
mentionItemSub: {
|
||
fontSize: 12,
|
||
color: '#BBBBBB',
|
||
marginTop: 1,
|
||
},
|
||
mentionItemRole: {
|
||
fontSize: 11,
|
||
color: colors.primary.main,
|
||
marginTop: 2,
|
||
fontWeight: '500',
|
||
},
|
||
mentionEmpty: {
|
||
paddingVertical: spacing.xl,
|
||
alignItems: 'center',
|
||
},
|
||
mentionEmptyText: {
|
||
fontSize: 14,
|
||
color: '#C8C8C8',
|
||
},
|
||
|
||
// 长按菜单 - 底部横条形式（类似QQ）
|
||
menuOverlay: {
|
||
flex: 1,
|
||
backgroundColor: 'rgba(0, 0, 0, 0.4)',
|
||
justifyContent: 'flex-end',
|
||
},
|
||
// 旧版菜单样式（保留兼容）
|
||
menuContainer: {
|
||
backgroundColor: '#FFFFFF',
|
||
borderRadius: 12,
|
||
minWidth: 160,
|
||
shadowColor: '#000',
|
||
shadowOffset: { width: 0, height: 4 },
|
||
shadowOpacity: 0.15,
|
||
shadowRadius: 12,
|
||
elevation: 8,
|
||
},
|
||
menuItem: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
paddingHorizontal: 16,
|
||
paddingVertical: 12,
|
||
gap: 12,
|
||
},
|
||
menuItemBorder: {
|
||
borderBottomWidth: 1,
|
||
borderBottomColor: '#F0F0F0',
|
||
},
|
||
menuItemText: {
|
||
fontSize: 15,
|
||
color: '#333',
|
||
fontWeight: '500',
|
||
},
|
||
// 底部菜单容器
|
||
bottomMenuContainer: {
|
||
backgroundColor: '#FFFFFF',
|
||
borderTopLeftRadius: 20,
|
||
borderTopRightRadius: 20,
|
||
paddingTop: spacing.md,
|
||
paddingBottom: spacing.xl,
|
||
shadowColor: '#000',
|
||
shadowOffset: { width: 0, height: -4 },
|
||
shadowOpacity: 0.1,
|
||
shadowRadius: 8,
|
||
elevation: 16,
|
||
},
|
||
// 消息预览区域
|
||
messagePreviewContainer: {
|
||
backgroundColor: '#F5F7FA',
|
||
marginHorizontal: spacing.md,
|
||
marginBottom: spacing.md,
|
||
paddingHorizontal: spacing.md,
|
||
paddingVertical: spacing.sm,
|
||
borderRadius: 12,
|
||
maxHeight: 80,
|
||
},
|
||
messagePreviewText: {
|
||
fontSize: 14,
|
||
color: '#666',
|
||
lineHeight: 20,
|
||
},
|
||
// 操作按钮横条
|
||
menuActionsRow: {
|
||
flexDirection: 'row',
|
||
justifyContent: 'space-around',
|
||
alignItems: 'flex-start',
|
||
paddingHorizontal: spacing.sm,
|
||
paddingVertical: spacing.md,
|
||
borderBottomWidth: 1,
|
||
borderBottomColor: '#F0F0F0',
|
||
marginBottom: spacing.md,
|
||
},
|
||
menuActionItem: {
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
minWidth: 64,
|
||
},
|
||
menuActionItemLast: {
|
||
marginRight: 0,
|
||
},
|
||
menuActionIconContainer: {
|
||
width: 56,
|
||
height: 56,
|
||
borderRadius: 16,
|
||
backgroundColor: '#F0F7FF',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
marginBottom: 8,
|
||
},
|
||
menuActionLabel: {
|
||
fontSize: 13,
|
||
color: '#333',
|
||
fontWeight: '500',
|
||
},
|
||
// 取消按钮
|
||
menuCancelButton: {
|
||
backgroundColor: '#F5F7FA',
|
||
marginHorizontal: spacing.md,
|
||
paddingVertical: spacing.md,
|
||
borderRadius: 12,
|
||
alignItems: 'center',
|
||
},
|
||
menuCancelText: {
|
||
fontSize: 16,
|
||
color: '#333',
|
||
fontWeight: '600',
|
||
},
|
||
|
||
// QQ风格长按菜单
|
||
qqMenuOverlay: {
|
||
flex: 1,
|
||
backgroundColor: 'transparent',
|
||
},
|
||
qqMenuContainer: {
|
||
position: 'absolute',
|
||
backgroundColor: 'rgba(0, 0, 0, 0.9)',
|
||
borderRadius: 6,
|
||
paddingVertical: 6,
|
||
paddingHorizontal: 2,
|
||
shadowColor: '#000',
|
||
shadowOffset: { width: 0, height: 2 },
|
||
shadowOpacity: 0.3,
|
||
shadowRadius: 4,
|
||
elevation: 10,
|
||
},
|
||
qqMenuItemsRow: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
},
|
||
qqMenuItem: {
|
||
flexDirection: 'column',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
paddingHorizontal: 10,
|
||
paddingVertical: 2,
|
||
minWidth: 52,
|
||
},
|
||
qqMenuItemWithBorder: {
|
||
borderRightWidth: 1,
|
||
borderRightColor: 'rgba(255, 255, 255, 0.15)',
|
||
},
|
||
qqMenuItemLabelContainer: {
|
||
marginTop: 4,
|
||
},
|
||
qqMenuItemLabel: {
|
||
fontSize: 11,
|
||
color: '#FFFFFF',
|
||
fontWeight: '500',
|
||
},
|
||
|
||
// 回复预览
|
||
replyPreviewContainer: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
backgroundColor: '#F5F7FA',
|
||
paddingHorizontal: spacing.md,
|
||
paddingVertical: spacing.sm,
|
||
borderLeftWidth: 3,
|
||
borderLeftColor: colors.primary.main,
|
||
marginBottom: spacing.xs,
|
||
},
|
||
replyPreviewContent: {
|
||
flex: 1,
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
gap: 8,
|
||
},
|
||
replyPreviewText: {
|
||
flex: 1,
|
||
},
|
||
replyPreviewName: {
|
||
fontSize: 13,
|
||
color: colors.primary.main,
|
||
fontWeight: '600',
|
||
},
|
||
replyPreviewMessage: {
|
||
fontSize: 12,
|
||
color: '#8E8E93',
|
||
marginTop: 2,
|
||
},
|
||
replyPreviewClose: {
|
||
padding: 4,
|
||
},
|
||
|
||
// 遮罩层
|
||
overlay: {
|
||
...StyleSheet.absoluteFillObject,
|
||
backgroundColor: 'rgba(0, 0, 0, 0.5)',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
zIndex: 1000,
|
||
},
|
||
overlayContent: {
|
||
backgroundColor: '#FFFFFF',
|
||
padding: spacing.xl,
|
||
borderRadius: 16,
|
||
alignItems: 'center',
|
||
shadowColor: '#000',
|
||
shadowOffset: { width: 0, height: 4 },
|
||
shadowOpacity: 0.15,
|
||
shadowRadius: 12,
|
||
elevation: 8,
|
||
},
|
||
overlayText: {
|
||
marginTop: spacing.md,
|
||
fontSize: 15,
|
||
color: '#666',
|
||
fontWeight: '500',
|
||
},
|
||
|
||
// 表情包添加按钮（管理界面第一位）
|
||
stickerAddButton: {
|
||
backgroundColor: '#FFFFFF',
|
||
borderWidth: 1.5,
|
||
borderColor: colors.primary.main,
|
||
borderStyle: 'dashed',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
},
|
||
stickerAddContent: {
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
},
|
||
stickerAddText: {
|
||
fontSize: 11,
|
||
marginTop: 4,
|
||
fontWeight: '500',
|
||
},
|
||
|
||
// 表情包管理按钮（表情面板第一位）
|
||
stickerManageButton: {
|
||
backgroundColor: '#FFFFFF',
|
||
borderWidth: 1,
|
||
borderColor: '#E8E8E8',
|
||
borderStyle: 'dashed',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
},
|
||
stickerManageContent: {
|
||
flex: 1,
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
},
|
||
stickerManageText: {
|
||
fontSize: 12,
|
||
color: '#666',
|
||
marginTop: 4,
|
||
fontWeight: '500',
|
||
},
|
||
|
||
// 表情管理模态框（2/3高度）
|
||
manageModalOverlay: {
|
||
flex: 1,
|
||
justifyContent: 'flex-end',
|
||
},
|
||
manageModalBackdrop: {
|
||
...StyleSheet.absoluteFillObject,
|
||
backgroundColor: 'rgba(0, 0, 0, 0.4)',
|
||
},
|
||
manageModalHandle: {
|
||
width: 36,
|
||
height: 5,
|
||
borderRadius: 3,
|
||
backgroundColor: '#E0E0E0',
|
||
alignSelf: 'center',
|
||
marginTop: 8,
|
||
marginBottom: 4,
|
||
},
|
||
manageHeaderDivider: {
|
||
height: StyleSheet.hairlineWidth,
|
||
backgroundColor: '#F0F0F0',
|
||
},
|
||
|
||
// 表情包选择状态
|
||
stickerItemSelected: {
|
||
borderWidth: 2,
|
||
borderColor: '#007AFF',
|
||
},
|
||
stickerCheckOverlay: {
|
||
...StyleSheet.absoluteFillObject,
|
||
backgroundColor: 'rgba(0, 122, 255, 0.1)',
|
||
alignItems: 'flex-end',
|
||
justifyContent: 'flex-start',
|
||
padding: 4,
|
||
},
|
||
stickerCheckBox: {
|
||
width: 22,
|
||
height: 22,
|
||
borderRadius: 11,
|
||
borderWidth: 2,
|
||
borderColor: '#FFF',
|
||
backgroundColor: 'rgba(255, 255, 255, 0.8)',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
},
|
||
stickerCheckBoxSelected: {
|
||
backgroundColor: '#007AFF',
|
||
borderColor: '#007AFF',
|
||
},
|
||
|
||
// 表情管理模态框
|
||
manageModalContainer: {
|
||
backgroundColor: '#F5F7FA',
|
||
borderTopLeftRadius: 20,
|
||
borderTopRightRadius: 20,
|
||
overflow: 'hidden',
|
||
},
|
||
manageModalHeader: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
justifyContent: 'space-between',
|
||
paddingHorizontal: spacing.md,
|
||
paddingVertical: spacing.md,
|
||
backgroundColor: '#FFFFFF',
|
||
borderBottomWidth: 1,
|
||
borderBottomColor: '#E8E8E8',
|
||
},
|
||
manageHeaderButton: {
|
||
minWidth: 60,
|
||
alignItems: 'center',
|
||
},
|
||
manageModalTitle: {
|
||
fontSize: 17,
|
||
fontWeight: '600',
|
||
color: '#1A1A1A',
|
||
},
|
||
manageDoneText: {
|
||
fontSize: 16,
|
||
color: '#007AFF',
|
||
fontWeight: '500',
|
||
},
|
||
manageSelectText: {
|
||
fontSize: 16,
|
||
color: '#007AFF',
|
||
fontWeight: '500',
|
||
},
|
||
manageInfoBar: {
|
||
paddingHorizontal: spacing.md,
|
||
paddingVertical: spacing.sm,
|
||
backgroundColor: '#FFFFFF',
|
||
borderBottomWidth: 1,
|
||
borderBottomColor: '#E8E8E8',
|
||
},
|
||
manageInfoText: {
|
||
fontSize: 13,
|
||
color: '#8E8E93',
|
||
},
|
||
manageStickerGrid: {
|
||
flexDirection: 'row',
|
||
flexWrap: 'wrap',
|
||
paddingHorizontal: spacing.md,
|
||
paddingTop: spacing.md,
|
||
paddingBottom: spacing.xl,
|
||
},
|
||
manageBottomBar: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
justifyContent: 'space-between',
|
||
paddingHorizontal: spacing.md,
|
||
paddingVertical: spacing.md,
|
||
backgroundColor: '#FFFFFF',
|
||
borderTopWidth: 1,
|
||
borderTopColor: '#E8E8E8',
|
||
paddingBottom: 34, // 安全区域
|
||
},
|
||
manageSelectAllButton: {
|
||
paddingHorizontal: spacing.md,
|
||
paddingVertical: spacing.sm,
|
||
},
|
||
manageSelectAllText: {
|
||
fontSize: 15,
|
||
color: '#007AFF',
|
||
fontWeight: '500',
|
||
},
|
||
manageDeleteButton: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
backgroundColor: '#FF3B30',
|
||
paddingHorizontal: spacing.lg,
|
||
paddingVertical: spacing.sm + 2,
|
||
borderRadius: 20,
|
||
gap: 6,
|
||
},
|
||
manageDeleteButtonDisabled: {
|
||
backgroundColor: '#CCC',
|
||
},
|
||
manageDeleteText: {
|
||
fontSize: 15,
|
||
color: '#FFFFFF',
|
||
fontWeight: '600',
|
||
},
|
||
manageTipBar: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
paddingHorizontal: spacing.md,
|
||
paddingVertical: spacing.sm,
|
||
backgroundColor: '#FFF9E6',
|
||
gap: 6,
|
||
},
|
||
manageTipText: {
|
||
fontSize: 12,
|
||
color: '#999',
|
||
},
|
||
|
||
// 管理界面空状态
|
||
manageEmptyContainer: {
|
||
flex: 1,
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
paddingHorizontal: spacing.xl,
|
||
paddingVertical: spacing['4xl'],
|
||
},
|
||
manageEmptyIconBg: {
|
||
width: 88,
|
||
height: 88,
|
||
borderRadius: 44,
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
marginBottom: spacing.lg,
|
||
},
|
||
manageEmptyTitle: {
|
||
fontSize: 17,
|
||
fontWeight: '600',
|
||
marginBottom: spacing.sm,
|
||
},
|
||
manageEmptyDesc: {
|
||
fontSize: 14,
|
||
textAlign: 'center',
|
||
},
|
||
});
|
||
|
||
export default chatScreenStyles;
|