792 lines
24 KiB
TypeScript
792 lines
24 KiB
TypeScript
/**
|
||
* EmbeddedChat.tsx
|
||
* 嵌入式聊天组件 - 用于桌面端双栏布局右侧
|
||
*/
|
||
|
||
import React, { useState, useEffect, useCallback, useRef } from 'react';
|
||
import {
|
||
View,
|
||
FlatList,
|
||
StyleSheet,
|
||
TouchableOpacity,
|
||
ActivityIndicator,
|
||
KeyboardAvoidingView,
|
||
Platform,
|
||
TextInput,
|
||
Dimensions,
|
||
Animated,
|
||
} from 'react-native';
|
||
import { useNavigation } from '@react-navigation/native';
|
||
import { MaterialCommunityIcons } from '@expo/vector-icons';
|
||
import { Image as ExpoImage } from 'expo-image';
|
||
import { colors, spacing, fontSizes, shadows } from '../../../theme';
|
||
import { ConversationResponse, MessageResponse, MessageSegment, GroupMemberResponse, ImageSegmentData } from '../../../types/dto';
|
||
import { Avatar, Text, ImageGallery } from '../../../components/common';
|
||
import { useAuthStore, messageManager, MessageEvent, MessageSubscriber } from '../../../stores';
|
||
import { extractTextFromSegments } from '../../../types/dto';
|
||
import { useBreakpointGTE } from '../../../hooks/useResponsive';
|
||
import { useMarkAsRead } from '../../../stores/messageManagerHooks';
|
||
import { messageService } from '../../../services';
|
||
import { GroupInfoPanel } from './ChatScreen/GroupInfoPanel';
|
||
import { LongPressMenu, MenuPosition, GroupMessage } from './ChatScreen';
|
||
|
||
const { width: screenWidth } = Dimensions.get('window');
|
||
const PANEL_WIDTH = 360;
|
||
|
||
interface EmbeddedChatProps {
|
||
conversation: ConversationResponse;
|
||
onBack: () => void;
|
||
}
|
||
|
||
export const EmbeddedChat: React.FC<EmbeddedChatProps> = ({ conversation, onBack }) => {
|
||
const navigation = useNavigation();
|
||
const currentUser = useAuthStore(state => state.currentUser);
|
||
|
||
// 响应式布局 - 使用 768px 作为大屏幕和小屏幕的分界线
|
||
const isWideScreen = useBreakpointGTE('lg');
|
||
|
||
// 使用 markAsRead hook
|
||
const { markAsRead } = useMarkAsRead(String(conversation.id));
|
||
|
||
// 状态
|
||
const [messages, setMessages] = useState<MessageResponse[]>([]);
|
||
const [loading, setLoading] = useState(true);
|
||
const [sending, setSending] = useState(false);
|
||
const [inputText, setInputText] = useState('');
|
||
const flatListRef = useRef<FlatList>(null);
|
||
const inputRef = useRef<TextInput>(null);
|
||
|
||
// 图片预览状态
|
||
const [imageGalleryVisible, setImageGalleryVisible] = useState(false);
|
||
const [currentImageIndex, setCurrentImageIndex] = useState(0);
|
||
const [galleryImages, setGalleryImages] = useState<{ url: string }[]>([]);
|
||
|
||
// 右键菜单状态
|
||
const [contextMenuVisible, setContextMenuVisible] = useState(false);
|
||
const [contextMenuPosition, setContextMenuPosition] = useState<MenuPosition | undefined>();
|
||
const [selectedMessageForMenu, setSelectedMessageForMenu] = useState<GroupMessage | null>(null);
|
||
|
||
// 回复状态
|
||
const [replyingToMessage, setReplyingToMessage] = useState<GroupMessage | null>(null);
|
||
|
||
// 群信息面板动画
|
||
const slideAnim = useRef(new Animated.Value(PANEL_WIDTH)).current;
|
||
const fadeAnim = useRef(new Animated.Value(0)).current;
|
||
const [showGroupInfoPanel, setShowGroupInfoPanel] = useState(false);
|
||
|
||
// 群成员列表
|
||
const [groupMembers, setGroupMembers] = useState<GroupMemberResponse[]>([]);
|
||
|
||
// 打开/关闭群信息面板
|
||
const toggleGroupInfoPanel = useCallback(() => {
|
||
if (showGroupInfoPanel) {
|
||
Animated.parallel([
|
||
Animated.timing(slideAnim, {
|
||
toValue: PANEL_WIDTH,
|
||
duration: 300,
|
||
useNativeDriver: true,
|
||
}),
|
||
Animated.timing(fadeAnim, {
|
||
toValue: 0,
|
||
duration: 300,
|
||
useNativeDriver: true,
|
||
}),
|
||
]).start(() => {
|
||
setShowGroupInfoPanel(false);
|
||
});
|
||
} else {
|
||
setShowGroupInfoPanel(true);
|
||
Animated.parallel([
|
||
Animated.timing(slideAnim, {
|
||
toValue: 0,
|
||
duration: 300,
|
||
useNativeDriver: true,
|
||
}),
|
||
Animated.timing(fadeAnim, {
|
||
toValue: 1,
|
||
duration: 300,
|
||
useNativeDriver: true,
|
||
}),
|
||
]).start();
|
||
}
|
||
}, [showGroupInfoPanel, slideAnim, fadeAnim]);
|
||
|
||
// 获取会话信息
|
||
const isGroupChat = conversation.type === 'group';
|
||
const chatTitle = isGroupChat
|
||
? conversation.group?.name || '群聊'
|
||
: conversation.participants?.[0]?.nickname || conversation.participants?.[0]?.username || '聊天';
|
||
const chatAvatar = isGroupChat
|
||
? conversation.group?.avatar
|
||
: conversation.participants?.[0]?.avatar;
|
||
|
||
// 加载消息
|
||
const loadMessages = useCallback(async () => {
|
||
try {
|
||
setLoading(true);
|
||
await messageManager.fetchMessages(String(conversation.id));
|
||
setMessages(messageManager.getMessages(String(conversation.id)));
|
||
} catch (error) {
|
||
console.error('[EmbeddedChat] 加载消息失败:', error);
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
}, [conversation.id]);
|
||
|
||
// 初始加载
|
||
useEffect(() => {
|
||
loadMessages();
|
||
|
||
// 订阅消息事件
|
||
const subscriber: MessageSubscriber = (event: MessageEvent) => {
|
||
if (
|
||
event.type === 'messages_updated' &&
|
||
String(event.payload?.conversationId) === String(conversation.id)
|
||
) {
|
||
setMessages(event.payload.messages || []);
|
||
setTimeout(() => {
|
||
flatListRef.current?.scrollToEnd({ animated: true });
|
||
}, 100);
|
||
}
|
||
};
|
||
|
||
const unsubscribe = messageManager.subscribe(subscriber);
|
||
|
||
return () => {
|
||
unsubscribe();
|
||
};
|
||
}, [conversation.id, loadMessages]);
|
||
|
||
// 自动标记已读 - 当有新消息时
|
||
useEffect(() => {
|
||
if (messages.length === 0) return;
|
||
|
||
const maxSeq = Math.max(...messages.map(m => m.seq), 0);
|
||
if (maxSeq > 0) {
|
||
markAsRead(maxSeq).catch(error => {
|
||
console.error('[EmbeddedChat] 自动标记已读失败:', error);
|
||
});
|
||
}
|
||
}, [messages, markAsRead]);
|
||
|
||
// 发送消息
|
||
const handleSend = useCallback(async () => {
|
||
if (!inputText.trim() || sending) return;
|
||
|
||
const text = inputText.trim();
|
||
setInputText('');
|
||
|
||
try {
|
||
setSending(true);
|
||
const segments: MessageSegment[] = [{ type: 'text', data: { text } }];
|
||
await messageManager.sendMessage(String(conversation.id), segments);
|
||
} catch (error) {
|
||
console.error('[EmbeddedChat] 发送消息失败:', error);
|
||
} finally {
|
||
setSending(false);
|
||
}
|
||
}, [inputText, sending, conversation.id]);
|
||
|
||
// 导航到完整聊天页面
|
||
const handleNavigateToFullChat = () => {
|
||
if (isGroupChat && conversation.group) {
|
||
(navigation as any).navigate('Chat', {
|
||
conversationId: String(conversation.id),
|
||
groupId: String(conversation.group.id),
|
||
groupName: conversation.group.name,
|
||
isGroupChat: true,
|
||
});
|
||
} else {
|
||
const currentUserId = currentUser?.id;
|
||
const otherUser = conversation.participants?.find(p => String(p.id) !== String(currentUserId));
|
||
(navigation as any).navigate('Chat', {
|
||
conversationId: String(conversation.id),
|
||
userId: otherUser ? String(otherUser.id) : undefined,
|
||
userName: otherUser?.nickname || otherUser?.username,
|
||
isGroupChat: false,
|
||
});
|
||
}
|
||
};
|
||
|
||
// 处理图片点击预览
|
||
const handleImagePress = (images: { url: string }[], index: number) => {
|
||
setGalleryImages(images);
|
||
setCurrentImageIndex(index);
|
||
setImageGalleryVisible(true);
|
||
};
|
||
|
||
// 处理右键点击消息
|
||
const handleMessageRightPress = (message: MessageResponse, event: any) => {
|
||
// 获取鼠标右键位置
|
||
const pageX = event?.nativeEvent?.pageX || 0;
|
||
const pageY = event?.nativeEvent?.pageY || 0;
|
||
|
||
setSelectedMessageForMenu(message as GroupMessage);
|
||
setContextMenuPosition({
|
||
x: pageX,
|
||
y: pageY,
|
||
width: 0,
|
||
height: 0,
|
||
pressX: pageX,
|
||
pressY: pageY,
|
||
});
|
||
setContextMenuVisible(true);
|
||
};
|
||
|
||
// 关闭右键菜单
|
||
const handleContextMenuClose = () => {
|
||
setContextMenuVisible(false);
|
||
setSelectedMessageForMenu(null);
|
||
setContextMenuPosition(undefined);
|
||
};
|
||
|
||
// 处理回复消息
|
||
const handleReply = (message: GroupMessage) => {
|
||
setReplyingToMessage(message);
|
||
handleContextMenuClose();
|
||
};
|
||
|
||
// 处理撤回消息
|
||
const handleRecall = async (messageId: string) => {
|
||
try {
|
||
await messageService.recallMessage(messageId);
|
||
handleContextMenuClose();
|
||
} catch (error) {
|
||
console.error('[EmbeddedChat] 撤回消息失败:', error);
|
||
}
|
||
};
|
||
|
||
// 处理删除消息
|
||
const handleDeleteMessage = async (messageId: string) => {
|
||
try {
|
||
await messageService.deleteMessage(messageId);
|
||
handleContextMenuClose();
|
||
} catch (error) {
|
||
console.error('[EmbeddedChat] 删除消息失败:', error);
|
||
}
|
||
};
|
||
|
||
// 渲染消息内容
|
||
const renderMessageContent = (item: MessageResponse) => {
|
||
// 撤回消息
|
||
if (item.status === 'recalled') {
|
||
return (
|
||
<Text style={[styles.messageText, styles.messageTextRecalled]}>
|
||
消息已撤回
|
||
</Text>
|
||
);
|
||
}
|
||
|
||
// 获取消息 segments
|
||
const segments = item.segments || [];
|
||
|
||
// 检查是否有图片消息
|
||
const imageSegments = segments
|
||
.filter(s => s.type === 'image')
|
||
.map(s => s.data as ImageSegmentData);
|
||
|
||
// 提取文本内容
|
||
const textContent = extractTextFromSegments(segments);
|
||
|
||
// 渲染多个内容（文本 + 图片）
|
||
return (
|
||
<View>
|
||
{/* 文本内容 */}
|
||
{textContent && textContent !== '[图片]' && (
|
||
<Text style={[styles.messageText, item.sender_id === String(currentUser?.id) ? styles.messageTextMe : styles.messageTextOther]}>
|
||
{textContent}
|
||
</Text>
|
||
)}
|
||
|
||
{/* 图片内容 */}
|
||
{imageSegments.length > 0 && (
|
||
<View style={styles.imageGrid}>
|
||
{imageSegments.map((imgData, idx) => {
|
||
const imageUrl = imgData.thumbnail_url || imgData.url;
|
||
const hasValidUrl = !!imageUrl && imageUrl.trim() !== '';
|
||
|
||
if (!hasValidUrl) {
|
||
// 无效URL显示占位符
|
||
return (
|
||
<View key={`img-${item.id}-${idx}`} style={styles.imagePlaceholder}>
|
||
<MaterialCommunityIcons name="image" size={24} color="#999" />
|
||
<Text style={styles.imagePlaceholderText}>图片</Text>
|
||
</View>
|
||
);
|
||
}
|
||
|
||
// 计算图片尺寸
|
||
let width = 180;
|
||
let height = 180;
|
||
if (imgData.width && imgData.height) {
|
||
const aspectRatio = imgData.width / imgData.height;
|
||
if (aspectRatio > 1) {
|
||
height = width / aspectRatio;
|
||
} else {
|
||
width = height * aspectRatio;
|
||
}
|
||
}
|
||
|
||
return (
|
||
<TouchableOpacity
|
||
key={`img-${item.id}-${idx}`}
|
||
onPress={() => handleImagePress(imageSegments.map(s => ({ url: s.thumbnail_url || s.url || '' })), idx)}
|
||
activeOpacity={0.8}
|
||
>
|
||
<ExpoImage
|
||
source={{ uri: imageUrl }}
|
||
style={[styles.messageImage, { width, height: Math.round(height) }]}
|
||
contentFit="cover"
|
||
cachePolicy="disk"
|
||
/>
|
||
</TouchableOpacity>
|
||
);
|
||
})}
|
||
</View>
|
||
)}
|
||
|
||
{/* 如果没有文本也没有图片，显示空消息提示 */}
|
||
{!textContent && imageSegments.length === 0 && (
|
||
<Text style={[styles.messageText, styles.messageTextRecalled, { opacity: 0.5 }]}>
|
||
[消息格式错误]
|
||
</Text>
|
||
)}
|
||
</View>
|
||
);
|
||
};
|
||
|
||
// 渲染消息
|
||
const renderMessage = ({ item }: { item: MessageResponse }) => {
|
||
const isMe = String(item.sender_id) === String(currentUser?.id);
|
||
|
||
// 处理指针事件（鼠标右键）- 使用 onPointerDown 检测鼠标右键
|
||
const handlePointerDown = (e: any) => {
|
||
// e.nativeEvent.button: 0=左键, 1=中键, 2=右键
|
||
const isRightClick = e.nativeEvent?.button === 2;
|
||
if (isRightClick) {
|
||
// 阻止默认右键菜单
|
||
e.preventDefault?.();
|
||
e.stopPropagation?.();
|
||
handleMessageRightPress(item, e);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<View
|
||
style={[styles.messageRow, isMe ? styles.messageRowRight : styles.messageRowLeft]}
|
||
// @ts-ignore - React Native for Web 支持 pointer events
|
||
onPointerDown={handlePointerDown}
|
||
>
|
||
{!isMe && (
|
||
<Avatar
|
||
source={item.sender?.avatar}
|
||
size={36}
|
||
name={item.sender?.nickname || item.sender?.username}
|
||
/>
|
||
)}
|
||
<View style={[styles.messageBubble, isMe ? styles.messageBubbleMe : styles.messageBubbleOther]}>
|
||
{isGroupChat && !isMe && (
|
||
<Text style={styles.senderName}>{item.sender?.nickname || item.sender?.username}</Text>
|
||
)}
|
||
{renderMessageContent(item)}
|
||
</View>
|
||
{isMe && (
|
||
<Avatar
|
||
source={currentUser?.avatar}
|
||
size={36}
|
||
name={currentUser?.nickname || currentUser?.username}
|
||
/>
|
||
)}
|
||
</View>
|
||
);
|
||
};
|
||
|
||
return (
|
||
<View style={styles.container}>
|
||
{/* 头部 */}
|
||
<View style={styles.header}>
|
||
{/* 大屏幕（>= 768px）时隐藏返回按钮 */}
|
||
{!isWideScreen ? (
|
||
<TouchableOpacity onPress={onBack} style={styles.headerButton}>
|
||
<MaterialCommunityIcons name="arrow-left" size={24} color="#666" />
|
||
</TouchableOpacity>
|
||
) : (
|
||
<View style={styles.headerButton} />
|
||
)}
|
||
|
||
<View style={styles.headerCenter}>
|
||
<Avatar source={chatAvatar} size={36} name={chatTitle} />
|
||
<Text style={styles.headerTitle} numberOfLines={1}>
|
||
{chatTitle}
|
||
</Text>
|
||
</View>
|
||
|
||
{/* 大屏幕 + 群聊时显示群信息按钮，否则显示放大按钮 */}
|
||
{isWideScreen && isGroupChat ? (
|
||
<TouchableOpacity onPress={toggleGroupInfoPanel} style={styles.headerButton}>
|
||
<MaterialCommunityIcons name="dots-horizontal" size={22} color="#666" />
|
||
</TouchableOpacity>
|
||
) : (
|
||
<TouchableOpacity onPress={handleNavigateToFullChat} style={styles.headerButton}>
|
||
<MaterialCommunityIcons name="arrow-expand" size={22} color="#666" />
|
||
</TouchableOpacity>
|
||
)}
|
||
</View>
|
||
|
||
{/* 消息列表 */}
|
||
<View style={styles.messageList}>
|
||
{loading ? (
|
||
<View style={styles.centerContainer}>
|
||
<ActivityIndicator size="large" color={colors.primary.main} />
|
||
</View>
|
||
) : messages.length === 0 ? (
|
||
<View style={styles.centerContainer}>
|
||
<MaterialCommunityIcons name="message-text-outline" size={48} color="#DDD" />
|
||
<Text style={styles.emptyText}>暂无消息</Text>
|
||
<Text style={styles.emptySubtext}>发送第一条消息开始聊天</Text>
|
||
</View>
|
||
) : (
|
||
<FlatList
|
||
ref={flatListRef}
|
||
data={messages}
|
||
renderItem={renderMessage}
|
||
keyExtractor={(item) => String(item.id)}
|
||
contentContainerStyle={styles.listContent}
|
||
showsVerticalScrollIndicator={true}
|
||
onLayout={() => {
|
||
if (messages.length > 0) {
|
||
flatListRef.current?.scrollToEnd({ animated: false });
|
||
}
|
||
}}
|
||
/>
|
||
)}
|
||
</View>
|
||
|
||
{/* 输入框区域 */}
|
||
<KeyboardAvoidingView
|
||
behavior={Platform.OS === 'ios' ? 'padding' : undefined}
|
||
keyboardVerticalOffset={Platform.OS === 'ios' ? 90 : 0}
|
||
>
|
||
<View style={styles.inputArea}>
|
||
<View style={styles.inputRow}>
|
||
<TouchableOpacity style={styles.iconButton}>
|
||
<MaterialCommunityIcons name="plus-circle-outline" size={28} color="#666" />
|
||
</TouchableOpacity>
|
||
|
||
<View style={styles.inputContainer}>
|
||
<TextInput
|
||
ref={inputRef}
|
||
style={styles.textInput}
|
||
placeholder="发送消息..."
|
||
placeholderTextColor="#999"
|
||
value={inputText}
|
||
onChangeText={setInputText}
|
||
multiline={false}
|
||
returnKeyType="send"
|
||
onSubmitEditing={handleSend}
|
||
blurOnSubmit={false}
|
||
// 确保光标可见
|
||
cursorColor={colors.primary.main}
|
||
selectionColor={`${colors.primary.main}40`}
|
||
/>
|
||
</View>
|
||
|
||
<TouchableOpacity style={styles.iconButton}>
|
||
<MaterialCommunityIcons name="emoticon-outline" size={28} color="#666" />
|
||
</TouchableOpacity>
|
||
|
||
<TouchableOpacity
|
||
style={[styles.sendButton, (!inputText.trim() || sending) && styles.sendButtonDisabled]}
|
||
onPress={handleSend}
|
||
disabled={!inputText.trim() || sending}
|
||
>
|
||
{sending ? (
|
||
<ActivityIndicator size="small" color="#FFF" />
|
||
) : (
|
||
<MaterialCommunityIcons name="send" size={20} color="#FFF" />
|
||
)}
|
||
</TouchableOpacity>
|
||
</View>
|
||
</View>
|
||
</KeyboardAvoidingView>
|
||
|
||
{/* 群信息侧边栏面板 - 仅大屏幕显示 */}
|
||
{isWideScreen && isGroupChat && (
|
||
<>
|
||
{/* 遮罩层 */}
|
||
{showGroupInfoPanel && (
|
||
<Animated.View
|
||
style={[
|
||
StyleSheet.absoluteFillObject,
|
||
{
|
||
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||
opacity: fadeAnim,
|
||
zIndex: 100,
|
||
},
|
||
]}
|
||
>
|
||
<TouchableOpacity
|
||
style={StyleSheet.absoluteFillObject}
|
||
onPress={toggleGroupInfoPanel}
|
||
activeOpacity={1}
|
||
/>
|
||
</Animated.View>
|
||
)}
|
||
|
||
{/* 侧边栏面板 */}
|
||
<Animated.View
|
||
style={[
|
||
{
|
||
position: 'absolute',
|
||
right: 0,
|
||
top: 0,
|
||
bottom: 0,
|
||
width: PANEL_WIDTH,
|
||
backgroundColor: '#FFF',
|
||
zIndex: 101,
|
||
...shadows.lg,
|
||
transform: [{ translateX: slideAnim }],
|
||
},
|
||
]}
|
||
>
|
||
<GroupInfoPanel
|
||
visible={showGroupInfoPanel}
|
||
groupId={conversation.group ? String(conversation.group.id) : undefined}
|
||
groupInfo={conversation.group || null}
|
||
currentUserId={currentUser?.id}
|
||
onClose={toggleGroupInfoPanel}
|
||
onTogglePin={(pinned) => {
|
||
// TODO: 实现置顶功能
|
||
console.log('Toggle pin:', pinned);
|
||
}}
|
||
onLeaveGroup={() => {
|
||
// TODO: 实现退出群聊功能
|
||
console.log('Leave group');
|
||
}}
|
||
onInviteMembers={() => {
|
||
// TODO: 实现邀请新成员功能
|
||
console.log('Invite members');
|
||
}}
|
||
onViewAllMembers={() => {
|
||
// TODO: 实现查看全部成员功能
|
||
console.log('View all members');
|
||
}}
|
||
/>
|
||
</Animated.View>
|
||
</>
|
||
)}
|
||
|
||
{/* 右键菜单 */}
|
||
<LongPressMenu
|
||
visible={contextMenuVisible}
|
||
message={selectedMessageForMenu}
|
||
currentUserId={currentUser?.id || ''}
|
||
position={contextMenuPosition}
|
||
onClose={handleContextMenuClose}
|
||
onReply={handleReply}
|
||
onRecall={handleRecall}
|
||
onDelete={handleDeleteMessage}
|
||
/>
|
||
|
||
{/* 图片查看器 */}
|
||
<ImageGallery
|
||
visible={imageGalleryVisible}
|
||
images={galleryImages.map((img, idx) => ({
|
||
id: String(idx),
|
||
url: img.url || ''
|
||
}))}
|
||
initialIndex={currentImageIndex}
|
||
onClose={() => setImageGalleryVisible(false)}
|
||
enableSave
|
||
/>
|
||
</View>
|
||
);
|
||
};
|
||
|
||
const styles = StyleSheet.create({
|
||
container: {
|
||
flex: 1,
|
||
backgroundColor: '#F5F7FA',
|
||
},
|
||
header: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
justifyContent: 'space-between',
|
||
paddingHorizontal: spacing.md,
|
||
paddingVertical: spacing.sm,
|
||
backgroundColor: '#FFF',
|
||
borderBottomWidth: 1,
|
||
borderBottomColor: '#E8E8E8',
|
||
...shadows.sm,
|
||
height: 56,
|
||
},
|
||
headerButton: {
|
||
padding: spacing.xs,
|
||
width: 40,
|
||
height: 40,
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
},
|
||
headerCenter: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
flex: 1,
|
||
justifyContent: 'center',
|
||
},
|
||
headerTitle: {
|
||
fontSize: fontSizes.lg,
|
||
fontWeight: '600',
|
||
color: '#333',
|
||
marginLeft: spacing.sm,
|
||
maxWidth: 200,
|
||
},
|
||
messageList: {
|
||
flex: 1,
|
||
backgroundColor: '#F5F7FA',
|
||
},
|
||
centerContainer: {
|
||
flex: 1,
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
padding: spacing.xl,
|
||
},
|
||
emptyText: {
|
||
marginTop: spacing.md,
|
||
fontSize: 16,
|
||
color: '#999',
|
||
},
|
||
emptySubtext: {
|
||
marginTop: spacing.xs,
|
||
fontSize: 14,
|
||
color: '#BBB',
|
||
},
|
||
listContent: {
|
||
padding: spacing.md,
|
||
paddingBottom: spacing.xl,
|
||
},
|
||
messageRow: {
|
||
flexDirection: 'row',
|
||
alignItems: 'flex-end',
|
||
marginBottom: spacing.md,
|
||
maxWidth: screenWidth * 0.7,
|
||
},
|
||
messageRowLeft: {
|
||
alignSelf: 'flex-start',
|
||
},
|
||
messageRowRight: {
|
||
alignSelf: 'flex-end',
|
||
justifyContent: 'flex-end',
|
||
},
|
||
messageBubble: {
|
||
maxWidth: screenWidth * 0.5,
|
||
paddingHorizontal: spacing.md,
|
||
paddingVertical: spacing.sm,
|
||
borderRadius: 18,
|
||
marginHorizontal: spacing.sm,
|
||
},
|
||
messageBubbleMe: {
|
||
backgroundColor: colors.primary.main,
|
||
borderBottomRightRadius: 4,
|
||
},
|
||
messageBubbleOther: {
|
||
backgroundColor: '#FFF',
|
||
borderBottomLeftRadius: 4,
|
||
...shadows.sm,
|
||
},
|
||
senderName: {
|
||
fontSize: 12,
|
||
color: '#999',
|
||
marginBottom: 2,
|
||
},
|
||
messageText: {
|
||
fontSize: 15,
|
||
lineHeight: 20,
|
||
},
|
||
messageTextMe: {
|
||
color: '#FFF',
|
||
},
|
||
messageTextOther: {
|
||
color: '#333',
|
||
},
|
||
inputArea: {
|
||
backgroundColor: '#FFF',
|
||
borderTopWidth: 1,
|
||
borderTopColor: '#E8E8E8',
|
||
paddingHorizontal: spacing.md,
|
||
paddingVertical: spacing.sm,
|
||
paddingBottom: Platform.OS === 'ios' ? spacing.md : spacing.sm,
|
||
},
|
||
inputRow: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
},
|
||
iconButton: {
|
||
padding: spacing.xs,
|
||
width: 44,
|
||
height: 44,
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
},
|
||
inputContainer: {
|
||
flex: 1,
|
||
backgroundColor: '#F5F5F5',
|
||
borderRadius: 20,
|
||
paddingHorizontal: spacing.md,
|
||
minHeight: 40,
|
||
justifyContent: 'center',
|
||
// 移除阴影
|
||
shadowColor: 'transparent',
|
||
shadowOffset: { width: 0, height: 0 },
|
||
shadowOpacity: 0,
|
||
shadowRadius: 0,
|
||
elevation: 0,
|
||
},
|
||
textInput: {
|
||
fontSize: 15,
|
||
color: '#333',
|
||
padding: 0,
|
||
maxHeight: 100,
|
||
},
|
||
sendButton: {
|
||
width: 40,
|
||
height: 40,
|
||
borderRadius: 20,
|
||
backgroundColor: colors.primary.main,
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
marginLeft: spacing.xs,
|
||
},
|
||
sendButtonDisabled: {
|
||
backgroundColor: '#E0E0E0',
|
||
},
|
||
messageTextRecalled: {
|
||
fontStyle: 'italic',
|
||
color: '#999',
|
||
},
|
||
imageGrid: {
|
||
flexDirection: 'row',
|
||
flexWrap: 'wrap',
|
||
marginTop: 4,
|
||
},
|
||
messageImage: {
|
||
borderRadius: 8,
|
||
marginRight: 4,
|
||
marginBottom: 4,
|
||
},
|
||
imagePlaceholder: {
|
||
width: 120,
|
||
height: 120,
|
||
borderRadius: 8,
|
||
backgroundColor: 'rgba(0,0,0,0.1)',
|
||
justifyContent: 'center',
|
||
alignItems: 'center',
|
||
marginRight: 4,
|
||
marginBottom: 4,
|
||
},
|
||
imagePlaceholderText: {
|
||
color: '#999',
|
||
fontSize: 12,
|
||
marginTop: 4,
|
||
},
|
||
});
|