PC端的部分适配

src/screens/message/components/EmbeddedChat.tsx

@@ -14,26 +14,40 @@ import {
   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 } from '../../../types/dto';
-import { Avatar, Text } from '../../../components/common';
+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;
 }
 
-const { width: screenWidth } = Dimensions.get('window');
-
 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);
@@ -42,6 +56,61 @@ export const EmbeddedChat: React.FC<EmbeddedChatProps> = ({ conversation, onBack
   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 
@@ -88,6 +157,18 @@ export const EmbeddedChat: React.FC<EmbeddedChatProps> = ({ conversation, onBack
     };
   }, [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;
@@ -127,32 +208,193 @@ export const EmbeddedChat: React.FC<EmbeddedChatProps> = ({ conversation, onBack
     }
   };
   
+  // 处理图片点击预览
+  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]}>
+      <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} 
+          <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>
           )}
-          <Text style={[styles.messageText, isMe ? styles.messageTextMe : styles.messageTextOther]}>
-            {item.status === 'recalled' ? '消息已撤回' : extractTextFromSegments(item.segments)}
-          </Text>
+          {renderMessageContent(item)}
         </View>
         {isMe && (
-          <Avatar 
-            source={currentUser?.avatar} 
-            size={36} 
-            name={currentUser?.nickname || currentUser?.username} 
+          <Avatar
+            source={currentUser?.avatar}
+            size={36}
+            name={currentUser?.nickname || currentUser?.username}
           />
         )}
       </View>
@@ -163,9 +405,14 @@ export const EmbeddedChat: React.FC<EmbeddedChatProps> = ({ conversation, onBack
     <View style={styles.container}>
       {/* 头部 */}
       <View style={styles.header}>
-        <TouchableOpacity onPress={onBack} style={styles.headerButton}>
-          <MaterialCommunityIcons name="arrow-left" size={24} color="#666" />
-        </TouchableOpacity>
+        {/* 大屏幕（>= 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} />
@@ -174,9 +421,16 @@ export const EmbeddedChat: React.FC<EmbeddedChatProps> = ({ conversation, onBack
           </Text>
         </View>
         
-        <TouchableOpacity onPress={handleNavigateToFullChat} style={styles.headerButton}>
-          <MaterialCommunityIcons name="arrow-expand" size={22} color="#666" />
-        </TouchableOpacity>
+        {/* 大屏幕 + 群聊时显示群信息按钮，否则显示放大按钮 */}
+        {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>
       
       {/* 消息列表 */}
@@ -231,6 +485,9 @@ export const EmbeddedChat: React.FC<EmbeddedChatProps> = ({ conversation, onBack
                 returnKeyType="send"
                 onSubmitEditing={handleSend}
                 blurOnSubmit={false}
+                // 确保光标可见
+                cursorColor={colors.primary.main}
+                selectionColor={`${colors.primary.main}40`}
               />
             </View>
             
@@ -252,6 +509,96 @@ export const EmbeddedChat: React.FC<EmbeddedChatProps> = ({ conversation, onBack
           </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>
   );
 };
@@ -328,7 +675,7 @@ const styles = StyleSheet.create({
   },
   messageRowRight: {
     alignSelf: 'flex-end',
-    flexDirection: 'row-reverse',
+    justifyContent: 'flex-end',
   },
   messageBubble: {
     maxWidth: screenWidth * 0.5,
@@ -387,6 +734,12 @@ const styles = StyleSheet.create({
     paddingHorizontal: spacing.md,
     minHeight: 40,
     justifyContent: 'center',
+    // 移除阴影
+    shadowColor: 'transparent',
+    shadowOffset: { width: 0, height: 0 },
+    shadowOpacity: 0,
+    shadowRadius: 0,
+    elevation: 0,
   },
   textInput: {
     fontSize: 15,
@@ -406,4 +759,33 @@ const styles = StyleSheet.create({
   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,
+  },
 });