2026-03-09 21:29:03 +08:00
|
|
|
|
/**
|
|
|
|
|
|
* 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,
|
2026-03-16 17:47:10 +08:00
|
|
|
|
borderColor: colors.divider,
|
2026-03-09 21:29:03 +08:00
|
|
|
|
borderRadius: 24,
|
|
|
|
|
|
marginHorizontal: 14,
|
|
|
|
|
|
marginBottom: 12,
|
|
|
|
|
|
paddingHorizontal: spacing.sm,
|
|
|
|
|
|
paddingVertical: spacing.sm,
|
2026-03-16 17:47:10 +08:00
|
|
|
|
// 移除明显的阴影效果，改用更微妙的边框
|
|
|
|
|
|
shadowColor: 'transparent',
|
|
|
|
|
|
shadowOffset: { width: 0, height: 0 },
|
|
|
|
|
|
shadowOpacity: 0,
|
|
|
|
|
|
shadowRadius: 0,
|
|
|
|
|
|
elevation: 0,
|
2026-03-09 21:29:03 +08:00
|
|
|
|
},
|
|
|
|
|
|
inputInner: {
|
|
|
|
|
|
flexDirection: 'row',
|
|
|
|
|
|
alignItems: 'center',
|
|
|
|
|
|
backgroundColor: '#F7F8FA',
|
|
|
|
|
|
borderRadius: 20,
|
|
|
|
|
|
paddingHorizontal: spacing.xs,
|
|
|
|
|
|
paddingVertical: 4,
|
|
|
|
|
|
minHeight: 44,
|
2026-03-16 17:47:10 +08:00
|
|
|
|
// 移除阴影效果
|
|
|
|
|
|
shadowColor: 'transparent',
|
|
|
|
|
|
shadowOffset: { width: 0, height: 0 },
|
|
|
|
|
|
shadowOpacity: 0,
|
|
|
|
|
|
shadowRadius: 0,
|
|
|
|
|
|
elevation: 0,
|
2026-03-09 21:29:03 +08:00
|
|
|
|
},
|
|
|
|
|
|
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',
|
2026-03-16 17:47:10 +08:00
|
|
|
|
// 移除阴影
|
|
|
|
|
|
shadowColor: 'transparent',
|
|
|
|
|
|
shadowOffset: { width: 0, height: 0 },
|
|
|
|
|
|
shadowOpacity: 0,
|
|
|
|
|
|
shadowRadius: 0,
|
|
|
|
|
|
elevation: 0,
|
2026-03-09 21:29:03 +08:00
|
|
|
|
},
|
|
|
|
|
|
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;
|
