+ 
openInNewTab(src))}
+ onError={event => handleImageError(event, fallbackText)}
+ />
+
+ );
+
+ if (withBubble) {
+ return {imageNode}
;
+ }
+
+ return imageNode;
+};
+
+const renderEmojiContent = (src: string) =>
+ renderImageContent({
+ src,
+ alt: "表情包",
+ fallbackText: "[表情包加载失败]",
+ style: {
+ maxWidth: "120px",
+ maxHeight: "120px",
+ },
+ wrapperClassName: styles.emojiMessage,
+ });
+
+const renderFileContent = (url: string) => {
+ const fileName = url.split("/").pop()?.split("?")[0] || "文件";
+ const displayName =
+ fileName.length > 20 ? `${fileName.substring(0, 20)}...` : fileName;
+
+ return (
+
+
+ );
+};
+
+const isHttpUrl = (value: string) => /^https?:\/\//i.test(value);
+const isHttpImageUrl = (value: string) =>
+ isHttpUrl(value) && IMAGE_EXT_REGEX.test(value);
+const isFileUrl = (value: string) =>
+ isHttpUrl(value) && FILE_EXT_REGEX.test(value);
+
+const isLegacyEmojiContent = (content: string) =>
+ IMAGE_EXT_REGEX.test(content) ||
+ content.includes("emoji") ||
+ content.includes("sticker");
+
+const tryParseContentJson = (content: string): Record
+
+ 📄
+
+
+ {displayName}
+ openInNewTab(url)}>
+ 点击查看
+
+
+
+ );
+ }
+
+ if (
+ jsonData.previewImage &&
+ (jsonData.tencentUrl || jsonData.videoUrl)
+ ) {
+ const previewImageUrl = String(jsonData.previewImage).replace(
+ /[`"']/g,
+ "",
+ );
+ return (
+ openInNewTab(url)}
+ >
+ {thumbPath && (
+ 
{
+ const target = event.target as HTMLImageElement;
+ target.style.display = "none";
+ }}
+ />
+ )}
+
+
+
+ {title}
+ {desc && {desc}
}
+ 链接
+
+
+ );
+ }
+ }
+
+ if (isHttpImageUrl(trimmedContent)) {
+ return renderImageContent({
+ src: rawContent,
+ alt: "图片消息",
+ fallbackText: "[图片加载失败]",
+ });
+ }
+
+ if (isFileUrl(trimmedContent)) {
+ return renderFileContent(trimmedContent);
+ }
+
+ return (
+
+ 
{
+ const videoUrl = jsonData.videoUrl || jsonData.tencentUrl;
+ if (videoUrl) {
+ openInNewTab(videoUrl);
+ }
+ }}
+ onError={event => {
+ const target = event.target as HTMLImageElement;
+ const parent = target.parentElement?.parentElement;
+ if (parent) {
+ parent.innerHTML = ``;
+ }
+ }}
+ />
+
+
+
+
+ {parseEmojiText(rawContent)}
+ );
+ },
+ [parseEmojiText],
+ );
+
+ // 解析消息内容，根据msgType判断消息类型并返回对应的渲染内容
+ const parseMessageContent = useCallback(
+ (
+ content: string | null | undefined,
+ msg: ChatRecord,
+ msgType?: number,
+ ): React.ReactNode => {
+ // 处理null或undefined的内容
+ if (content === null || content === undefined) {
+ return 消息内容不可用
;
+ }
+
+ // 统一的错误消息渲染函数
+ const renderErrorMessage = (fallbackText: string) => (
+ {fallbackText}
+ );
+
+ const isStringValue = typeof content === "string";
+ const rawContent = isStringValue ? content : "";
+ const trimmedContent = rawContent.trim();
+
+ switch (msgType) {
+ case 1: // 文本消息
+ return (
+
+
+ );
+
+ case 3: // 图片消息
+ if (!isStringValue || !trimmedContent) {
+ return renderErrorMessage("[图片消息 - 无效链接]");
+ }
+ return renderImageContent({
+ src: rawContent,
+ alt: "图片消息",
+ fallbackText: "[图片加载失败]",
+ withBubble: true,
+ });
+
+ case 34: // 语音消息
+ if (!isStringValue || !trimmedContent) {
+ return renderErrorMessage("[语音消息 - 无效内容]");
+ }
+
+ return
+ {parseEmojiText(rawContent)}
+
+
-
- );
- }
-
- if (
- jsonData.previewImage &&
- (jsonData.tencentUrl || jsonData.videoUrl)
- ) {
- const previewImageUrl = String(jsonData.previewImage).replace(
- /[`"']/g,
- "",
- );
- return (
- openInNewTab(url)}
- >
- {thumbPath && (
- {
- const target = event.target as HTMLImageElement;
- target.style.display = "none";
- }}
- />
- )}
-
-
-
- {title}
- {desc && {desc}
}
- 链接
-
-
- );
- }
- }
-
- if (isHttpImageUrl(trimmedContent)) {
- return renderImageContent({
- src: rawContent,
- alt: "图片消息",
- fallbackText: "[图片加载失败]",
- });
- }
-
- if (isFileUrl(trimmedContent)) {
- return renderFileContent(trimmedContent);
- }
-
- return (
-
- {
- const videoUrl = jsonData.videoUrl || jsonData.tencentUrl;
- if (videoUrl) {
- openInNewTab(videoUrl);
- }
- }}
- onError={event => {
- const target = event.target as HTMLImageElement;
- const parent = target.parentElement?.parentElement;
- if (parent) {
- parent.innerHTML = ``;
- }
- }}
- />
-
-
-
-
- {parseEmojiText(rawContent)}
- );
- },
- [parseEmojiText],
- );
+ // ✅ 使用 useMessageGrouping Hook（消息分组，使用 useMemo 缓存）
+ const groupedMessages = useMessageGrouping(currentMessages);
useEffect(() => {
const fetchGroupMembers = async () => {
@@ -607,10 +415,20 @@ const MessageRecord: React.FC消息内容不可用
;
- }
-
- // 统一的错误消息渲染函数
- const renderErrorMessage = (fallbackText: string) => (
- {fallbackText}
- );
-
- const isStringValue = typeof content === "string";
- const rawContent = isStringValue ? content : "";
- const trimmedContent = rawContent.trim();
-
- switch (msgType) {
- case 1: // 文本消息
- return (
-
-
- );
-
- case 3: // 图片消息
- if (!isStringValue || !trimmedContent) {
- return renderErrorMessage("[图片消息 - 无效链接]");
- }
- return renderImageContent({
- src: rawContent,
- alt: "图片消息",
- fallbackText: "[图片加载失败]",
- withBubble: true,
- });
-
- case 34: // 语音消息
- if (!isStringValue || !trimmedContent) {
- return renderErrorMessage("[语音消息 - 无效内容]");
- }
-
- return
- {parseEmojiText(rawContent)}
-
-
-
- {group.messages
- .filter(v => [10000, -10001].includes(v.msgType))
- .map(msg => {
- // 解析系统消息，提取纯文本（移除img标签和_wc_custom_link_标签）
- const parsedText = parseSystemMessage(msg.content);
- return (
- {
+ // ✅ 使用 Sentry 监控组件渲染性能
+ if (actualDuration > 100) {
+ addPerformanceBreadcrumb("MessageRecord 慢渲染", {
+ duration: actualDuration,
+ phase,
+ messageCount: currentMessages.length,
+ contractId: contract.id,
+ });
+ }
+ }}
+ >
+
+ ))}
+
+ {/* 右键菜单组件 */}
+
+
);
};
diff --git a/Touchkebao/src/pages/pc/ckbox/weChat/components/ChatWindow/components/ProfileCard/components/FriendsCicle/components/friendCard.tsx b/Touchkebao/src/pages/pc/ckbox/weChat/components/ChatWindow/components/ProfileCard/components/FriendsCicle/components/friendCard.tsx
index ada75633..a222df9a 100644
--- a/Touchkebao/src/pages/pc/ckbox/weChat/components/ChatWindow/components/ProfileCard/components/FriendsCicle/components/friendCard.tsx
+++ b/Touchkebao/src/pages/pc/ckbox/weChat/components/ChatWindow/components/ProfileCard/components/FriendsCicle/components/friendCard.tsx
@@ -24,6 +24,7 @@ import {
import { comfirm } from "@/utils/common";
import { useWeChatStore } from "@/store/module/weChat/weChat";
+import { useShallow } from "zustand/react/shallow";
// 单个朋友圈项目组件
export const FriendCard: React.FC
- {currentMessagesHasMore ? "点击加载更早的信息" : "已经没有更早的消息了"}
- {messagesLoading ?
- {groupedMessages.map((group, groupIndex) => (
-
- {parsedText}
-
- );
- })}
+
+
+ {group.messages
+ .filter(v => [10000, -10001].includes(v.msgType))
+ .map(msg => {
+ // 解析系统消息，提取纯文本（移除img标签和_wc_custom_link_标签）
+ const parsedText = parseSystemMessage(msg.content);
+ return (
+
- ))}
-
- {/* 右键菜单组件 */}
-
+ return (
+
+ {currentMessagesHasMore
+ ? "点击加载更早的信息"
+ : "已经没有更早的消息了"}
+ {messagesLoading ?
+ {groupedMessages.map((group, groupIndex) => (
+
+ {parsedText}
+
+ );
+ })}
- {group.messages
- .filter(v => [570425393, 90000].includes(v.msgType))
- .map(msg => {
- // 解析JSON字符串
- let displayContent = msg.content;
- try {
- const parsedContent = JSON.parse(msg.content);
- if (
- parsedContent &&
- typeof parsedContent === "object" &&
- parsedContent.content
- ) {
- displayContent = parsedContent.content;
+ {group.messages
+ .filter(v => [570425393, 90000].includes(v.msgType))
+ .map(msg => {
+ // 解析JSON字符串
+ let displayContent = msg.content;
+ try {
+ const parsedContent = JSON.parse(msg.content);
+ if (
+ parsedContent &&
+ typeof parsedContent === "object" &&
+ parsedContent.content
+ ) {
+ displayContent = parsedContent.content;
+ }
+ } catch (error) {
+ // 如果解析失败，使用原始内容
+ displayContent = msg.content;
}
- } catch (error) {
- // 如果解析失败，使用原始内容
- displayContent = msg.content;
- }
- return (
-
- {displayContent}
-
- );
- })}
- {group.time}
- {group.messages
- .filter(v => ![10000, 570425393, 90000, -10001].includes(v.msgType))
- .map(msg => {
- if (!msg) return null;
- return (
-
+ {displayContent}
+
+ );
+ })}
+ {group.time}
+ {group.messages
+ .filter(
+ v => ![10000, 570425393, 90000, -10001].includes(v.msgType),
+ )
+ .map(msg => {
+ if (!msg) return null;
+ return (
+
+
+ )}
+
+
+);
+
+function App() {
+ return (
+ 出现了一些问题
+我们已经记录了这个问题，正在修复中...
+ +
+
+);
+
+function App() {
+ return (
+ 出现了一些问题
+我们已经记录了这个问题，正在修复中...
+ +消息内容不可用
;
+ }
+
+ const isStringValue = typeof content === "string";
+ const rawContent = isStringValue ? content : "";
+ const trimmedContent = rawContent.trim();
+
+ switch (msgType) {
+ case 1: // 文本消息
+ return (
+
+
+ );
+
+ case 3: // 图片消息
+ if (!isStringValue || !trimmedContent) {
+ return
+ {parseEmojiText(rawContent)}
+
+ [图片消息 - 无效链接]
;
+ }
+ return (
+
+ 
window.open(rawContent, "_blank")}
+ />
+
+ );
+
+ case 34: // 语音消息
+ return
+
+
+ );
+
+ case 48: // 定位消息
+ return
+
+ );
+ }
+ }
+ },
+ [contract, parseEmojiText],
+ );
+
+ return {
+ parseMessageContent,
+ parseEmojiText,
+ };
+};
+```
+
+#### 步骤 1.2.2：提取消息分组 Hook
+
+**文件**: `src/hooks/weChat/useMessageGrouping.ts`
+
+```typescript
+import { useMemo } from "react";
+import { ChatRecord } from "@/pages/pc/ckbox/data";
+import { formatWechatTime } from "@/utils/common";
+
+export interface MessageGroup {
+ time: string;
+ messages: ChatRecord[];
+}
+
+/**
+ * 消息分组 Hook
+ * 使用 useMemo 缓存分组结果
+ */
+export const useMessageGrouping = (
+ messages: ChatRecord[] | null | undefined,
+): MessageGroup[] => {
+ return useMemo(() => {
+ const safeMessages = Array.isArray(messages)
+ ? messages
+ : Array.isArray((messages as any)?.list)
+ ? ((messages as any).list as ChatRecord[])
+ : [];
+
+ return safeMessages
+ .filter(msg => msg !== null && msg !== undefined)
+ .map(msg => ({
+ time: formatWechatTime(String(msg?.wechatTime)),
+ messages: [msg],
+ }));
+ }, [messages]);
+};
+```
+
+#### 步骤 1.2.3：提取右键菜单组件
+
+**文件**: `src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/components/MessageContextMenu/index.tsx`
+
+```typescript
+import React, { useCallback, useState } from "react";
+import { ChatRecord } from "@/pages/pc/ckbox/data";
+import ClickMenu from "../ClickMeau";
+import { useWeChatActions } from "@/hooks/weChat/useWeChatSelectors";
+import { useContactStore } from "@/store/module/weChat/contacts";
+import { fetchReCallApi, fetchVoiceToTextApi } from "../../api";
+
+interface MessageContextMenuProps {
+ onQuote?: (messageData: ChatRecord) => void;
+}
+
+export const MessageContextMenu: React.FC
+ {parseEmojiText(rawContent)}
+
+
+ {/* 加载更多按钮 */}
+ {hasNextPage && (
+
+ {/* 消息渲染逻辑 */}
+
+ ))}
+
+
+
+
+ {isFetchingNextPage ? (
+
+ )}
+
+ {/* 消息列表渲染 */}
+ {groupedMessages.map((group, groupIndex) => (
+
+
+ );
+ },
+);
+
+AiLoadingIndicator.displayName = "AiLoadingIndicator";
+```
+
+#### 步骤 1.3.2：提取消息发送 Hook（使用 TanStack Query + Sentry）
+
+**文件**: `src/hooks/weChat/useMessageSend.ts`
+
+```typescript
+import { useCallback, useRef } from "react";
+import { message } from "antd";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { ContractData, weChatGroup, ChatRecord } from "@/pages/pc/ckbox/data";
+import { useWebSocketStore } from "@/store/module/websocket/websocket";
+import { useWeChatActions } from "./useWeChatSelectors";
+import { clearAiRequestQueue } from "@/store/module/weChat/weChat";
+import { captureError, addPerformanceBreadcrumb } from "@/utils/sentry";
+
+interface UseMessageSendProps {
+ contract: ContractData | weChatGroup;
+ isLoadingAiChat: boolean;
+ updateIsLoadingAiChat: (loading: boolean) => void;
+ updateQuoteMessageContent: (content: string) => void;
+}
+
+/**
+ * 消息发送 Hook
+ * 使用 TanStack Query Mutation 实现乐观更新和错误处理
+ * 使用 Sentry 监控发送性能和错误
+ */
+export const useMessageSend = ({
+ contract,
+ isLoadingAiChat,
+ updateIsLoadingAiChat,
+ updateQuoteMessageContent,
+}: UseMessageSendProps) => {
+ const queryClient = useQueryClient();
+ const { sendCommand } = useWebSocketStore.getState();
+ const contractRef = useRef(contract);
+ contractRef.current = contract;
+
+ // ✅ 使用 TanStack Query Mutation
+ const sendMessageMutation = useMutation({
+ mutationFn: async (content: string) => {
+ const startTime = performance.now();
+ const messageId = +Date.now();
+ const currentContract = contractRef.current;
+
+ const params = {
+ wechatAccountId: currentContract.wechatAccountId,
+ wechatChatroomId: currentContract?.chatroomId ? currentContract.id : 0,
+ wechatFriendId: currentContract?.chatroomId ? 0 : currentContract.id,
+ msgSubType: 0,
+ msgType: 1,
+ content,
+ seq: messageId,
+ };
+
+ sendCommand("CmdSendMessage", params);
+
+ const duration = performance.now() - startTime;
+ addPerformanceBreadcrumb("消息发送", {
+ duration,
+ contactId: currentContract.id,
+ messageLength: content.length,
+ });
+
+ return { messageId, content, params };
+ },
+ // ✅ 乐观更新：立即更新 UI
+ onMutate: async content => {
+ // 取消正在进行的查询
+ await queryClient.cancelQueries({
+ queryKey: ["chatMessages", contract.id],
+ });
+
+ // 保存当前数据快照
+ const previousMessages = queryClient.getQueryData([
+ "chatMessages",
+ contract.id,
+ ]);
+
+ // 乐观更新：立即添加消息
+ const messageId = +Date.now();
+ const newMessage: ChatRecord = {
+ id: messageId,
+ wechatAccountId: contract.wechatAccountId,
+ wechatFriendId: contract?.chatroomId ? 0 : contract.id,
+ wechatChatroomId: contract?.chatroomId ? contract.id : 0,
+ tenantId: 0,
+ accountId: 0,
+ synergyAccountId: 0,
+ content,
+ msgType: 1,
+ msgSubType: 0,
+ msgSvrId: "",
+ isSend: true,
+ createTime: new Date().toISOString(),
+ isDeleted: false,
+ deleteTime: "",
+ sendStatus: 1, // 发送中
+ wechatTime: Date.now(),
+ origin: 0,
+ msgId: 0,
+ recalled: false,
+ seq: messageId,
+ };
+
+ queryClient.setQueryData(["chatMessages", contract.id], (old: any) => {
+ if (!old?.pages) return old;
+ return {
+ ...old,
+ pages: [
+ {
+ ...old.pages[0],
+ list: [newMessage, ...(old.pages[0]?.list || [])],
+ },
+ ...old.pages.slice(1),
+ ],
+ };
+ });
+
+ return { previousMessages };
+ },
+ // ✅ 错误处理：回滚乐观更新并上报错误
+ onError: (error, variables, context) => {
+ captureError(error as Error, {
+ tags: { action: "sendMessage" },
+ extra: {
+ contactId: contract.id,
+ content: variables,
+ },
+ });
+
+ // 回滚乐观更新
+ if (context?.previousMessages) {
+ queryClient.setQueryData(
+ ["chatMessages", contract.id],
+ context.previousMessages,
+ );
+ }
+
+ message.error("消息发送失败，请重试");
+ },
+ // ✅ 成功后使缓存失效，重新获取最新数据
+ onSuccess: () => {
+ queryClient.invalidateQueries({
+ queryKey: ["chatMessages", contract.id],
+ });
+ },
+ });
+
+ const handleSend = useCallback(
+ async (content?: string) => {
+ const messageContent = content || "";
+
+ if (!messageContent || !messageContent.trim()) {
+ console.warn("消息内容为空，取消发送");
+ return;
+ }
+
+ // 用户主动发送消息时，取消AI请求
+ if (!content && isLoadingAiChat) {
+ console.log("👤 用户主动发送消息，取消AI生成");
+ clearAiRequestQueue("用户主动发送");
+ updateIsLoadingAiChat(false);
+ }
+
+ // ✅ 使用 TanStack Query Mutation
+ sendMessageMutation.mutate(messageContent, {
+ onSuccess: () => {
+ updateQuoteMessageContent("");
+ },
+ });
+ },
+ [
+ isLoadingAiChat,
+ updateIsLoadingAiChat,
+ updateQuoteMessageContent,
+ sendMessageMutation,
+ ],
+ );
+
+ return {
+ handleSend,
+ isSending: sendMessageMutation.isLoading,
+ };
+};
+```
+
+#### 步骤 1.3.3：提取文件上传 Hook
+
+**文件**: `src/hooks/weChat/useFileUpload.ts`
+
+```typescript
+import { useCallback, useRef } from "react";
+import { ContractData, weChatGroup, ChatRecord } from "@/pages/pc/ckbox/data";
+import { useWebSocketStore } from "@/store/module/websocket/websocket";
+import { useWeChatActions } from "./useWeChatSelectors";
+
+const FileType = {
+ TEXT: 1,
+ IMAGE: 2,
+ VIDEO: 3,
+ AUDIO: 4,
+ FILE: 5,
+};
+
+const IMAGE_FORMATS = [
+ "jpg",
+ "jpeg",
+ "png",
+ "gif",
+ "bmp",
+ "webp",
+ "svg",
+ "ico",
+];
+const VIDEO_FORMATS = [
+ "mp4",
+ "avi",
+ "mov",
+ "wmv",
+ "flv",
+ "mkv",
+ "webm",
+ "3gp",
+ "rmvb",
+];
+
+const getMsgTypeByFileFormat = (filePath: string): number => {
+ const extension = filePath.toLowerCase().split(".").pop() || "";
+ if (IMAGE_FORMATS.includes(extension)) return 3;
+ if (VIDEO_FORMATS.includes(extension)) return 43;
+ return 49;
+};
+
+interface UseFileUploadProps {
+ contract: ContractData | weChatGroup;
+}
+
+export const useFileUpload = ({ contract }: UseFileUploadProps) => {
+ const { addMessage } = useWeChatActions();
+ const { sendCommand } = useWebSocketStore.getState();
+ const contractRef = useRef(contract);
+ contractRef.current = contract;
+
+ const handleFileUploaded = useCallback(
+ (
+ filePath: { url: string; name: string; durationMs?: number },
+ fileType: number,
+ ) => {
+ const currentContract = contractRef.current;
+ let msgType = 1;
+ let content: any = "";
+
+ if ([FileType.TEXT].includes(fileType)) {
+ msgType = getMsgTypeByFileFormat(filePath.url);
+ } else if ([FileType.IMAGE].includes(fileType)) {
+ msgType = 3;
+ content = filePath.url;
+ } else if ([FileType.AUDIO].includes(fileType)) {
+ msgType = 34;
+ content = JSON.stringify({
+ url: filePath.url,
+ durationMs: filePath.durationMs,
+ });
+ } else if ([FileType.FILE].includes(fileType)) {
+ msgType = getMsgTypeByFileFormat(filePath.url);
+ if (msgType === 3) {
+ content = filePath.url;
+ }
+ if (msgType === 43) {
+ content = filePath.url;
+ }
+ if (msgType === 49) {
+ content = JSON.stringify({
+ type: "file",
+ title: filePath.name,
+ url: filePath.url,
+ });
+ }
+ }
+
+ const messageId = +Date.now();
+ const params = {
+ wechatAccountId: currentContract.wechatAccountId,
+ wechatChatroomId: currentContract?.chatroomId ? currentContract.id : 0,
+ wechatFriendId: currentContract?.chatroomId ? 0 : currentContract.id,
+ msgSubType: 0,
+ msgType,
+ content: content,
+ seq: messageId,
+ };
+
+ const localMessage: ChatRecord = {
+ id: messageId,
+ wechatAccountId: currentContract.wechatAccountId,
+ wechatFriendId: currentContract?.chatroomId ? 0 : currentContract.id,
+ wechatChatroomId: currentContract?.chatroomId ? currentContract.id : 0,
+ tenantId: 0,
+ accountId: 0,
+ synergyAccountId: 0,
+ content: params.content,
+ msgType: msgType,
+ msgSubType: 0,
+ msgSvrId: "",
+ isSend: true,
+ createTime: new Date().toISOString(),
+ isDeleted: false,
+ deleteTime: "",
+ sendStatus: 1,
+ wechatTime: Date.now(),
+ origin: 0,
+ msgId: 0,
+ recalled: false,
+ seq: messageId,
+ };
+
+ addMessage(localMessage);
+ sendCommand("CmdSendMessage", params);
+ },
+ [addMessage],
+ );
+
+ return {
+ handleFileUploaded,
+ };
+};
+```
+
+#### 步骤 1.3.4：重构 MessageEnter 主组件
+
+**文件**: `src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageEnter/index.tsx`
+
+**重构后结构**（简化版）:
+
+```typescript
+import React, { useState, useEffect, useCallback } from "react";
+import { Layout, Button } from "antd";
+import { SendOutlined } from "@ant-design/icons";
+import { ContractData, weChatGroup } from "@/pages/pc/ckbox/data";
+import { useUIStateSelectors, useAISelectors } from "@/hooks/weChat/useWeChatSelectors";
+import { useWeChatActions } from "@/hooks/weChat/useWeChatSelectors";
+import { useMessageSend } from "@/hooks/weChat/useMessageSend";
+import { useFileUpload } from "@/hooks/weChat/useFileUpload";
+import { AiLoadingIndicator } from "./components/AiLoadingIndicator";
+import { InputToolbar } from "./components/InputToolbar";
+import styles from "./MessageEnter.module.scss";
+
+const { Footer } = Layout;
+
+interface MessageEnterProps {
+ contract: ContractData | weChatGroup;
+}
+
+const MessageEnter: React.FC
+
+
+
+
+
+
+
+
+ 🧠
+
+
+
+
+
+
+
+
+ AI 正在思考
+
+ .
+ .
+ .
+
+
+ }
+ >
+ 取消生成
+
+
+ 正在分析消息内容，为您生成智能回复
+
+
+ {/* 时间分隔符 */}
+ {group.messages
+ .filter(v => [10000, -10001].includes(v.msgType))
+ .map(msg => {
+ const parsedText = parseSystemMessage(msg.content);
+ return (
+
+ );
+};
+
+/**
+ * 虚拟滚动消息列表
+ */
+export const VirtualizedMessageList: React.FC
+ {parsedText}
+
+ );
+ })}
+
+ {/* 其他系统消息 */}
+ {group.messages
+ .filter(v => [570425393, 90000].includes(v.msgType))
+ .map(msg => {
+ let displayContent = msg.content;
+ try {
+ const parsedContent = JSON.parse(msg.content);
+ if (
+ parsedContent &&
+ typeof parsedContent === "object" &&
+ parsedContent.content
+ ) {
+ displayContent = parsedContent.content;
+ }
+ } catch (error) {
+ // 忽略解析错误
+ }
+ return (
+
+ {displayContent}
+
+ );
+ })}
+
+ {/* 时间标签 */}
+ {group.time}
+
+ {/* 消息项 */}
+ {group.messages
+ .filter(v => ![10000, 570425393, 90000, -10001].includes(v.msgType))
+ .map(msg => {
+ if (!msg) return null;
+ return (
+
+ {shouldUseVirtualization ? (
+
+ );
+};
+```
+
+**验收标准**:
+
+- [ ] 100+ 条消息滚动流畅（FPS > 30）
+- [ ] 1000+ 条消息可以正常加载
+- [ ] 内存占用明显降低（< 100MB for 1000 messages）
+- [ ] Sentry 记录滚动性能数据
+- [ ] 配合 TanStack Query 分页加载正常
+- [ ] 功能正常
+
+**性能监控**:
+
+```typescript
+// 在虚拟滚动组件中添加性能监控
+useEffect(() => {
+ const observer = new PerformanceObserver(list => {
+ for (const entry of list.getEntries()) {
+ if (entry.entryType === "measure" && entry.name === "scroll") {
+ addPerformanceBreadcrumb("虚拟滚动性能", {
+ duration: entry.duration,
+ messageCount: groupedMessages.length,
+ });
+ }
+ }
+ });
+ observer.observe({ entryTypes: ["measure"] });
+ return () => observer.disconnect();
+}, [groupedMessages.length]);
+```
+
+---
+
+### 任务 2.2：useMemo/useCallback 优化（优先级：🔥🔥）
+
+**预计时间**: 1天
+
+#### 步骤 2.2.1：优化 groupedMessages
+
+已在 `useMessageGrouping.ts` 中使用 `useMemo`，无需额外优化。
+
+#### 步骤 2.2.2：优化 renderGroupUser
+
+**文件**: `src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/index.tsx`
+
+```typescript
+const renderGroupUser = useCallback(
+ (msg: ChatRecord) => {
+ if (!msg) {
+ return { avatar: "", nickname: "" };
+ }
+
+ const member = msg.senderWechatId
+ ? groupMemberMap.get(msg.senderWechatId)
+ : undefined;
+
+ return {
+ avatar: member?.avatar || msg?.avatar,
+ nickname: member?.nickname || msg?.senderNickname,
+ };
+ },
+ [groupMemberMap], // 依赖 groupMemberMap
+);
+```
+
+#### 步骤 2.2.3：优化其他回调函数
+
+检查所有 `useCallback` 的依赖项，确保正确。
+
+**验收标准**:
+
+- [ ] 所有回调函数都使用 useCallback
+- [ ] 依赖项正确
+- [ ] 无性能警告
+
+---
+
+## 第三阶段：高级优化（第3-4周）
+
+### 任务 3.1：图片懒加载（优先级：⚠️）
+
+**预计时间**: 1天
+
+#### 步骤 3.1.1：创建图片懒加载组件
+
+**文件**: `src/components/LazyImage/index.tsx`
+
+```typescript
+import React, { useState, useEffect, useRef } from "react";
+
+interface LazyImageProps {
+ src: string;
+ alt: string;
+ style?: React.CSSProperties;
+ className?: string;
+ onClick?: () => void;
+ fallbackText?: string;
+}
+
+export const LazyImage: React.FC
+ {isInView ? (
+ setIsLoaded(true)}
+ onError={() => {
+ if (fallbackText) {
+ // 显示错误文本
+ }
+ }}
+ />
+ ) : (
+
+ );
+};
+```
+
+#### 步骤 3.1.2：在消息渲染中使用
+
+更新 `useMessageParser.ts` 中的图片渲染逻辑。
+
+**验收标准**:
+
+- [ ] 图片按需加载
+- [ ] 滚动性能提升
+- [ ] 内存占用降低
+
+---
+
+### 任务 3.2：代码分割（优先级：⚠️）
+
+**预计时间**: 0.5天
+
+#### 步骤 3.2.1：路由懒加载
+
+**文件**: `src/router/index.tsx`
+
+```typescript
+import { lazy, Suspense } from "react";
+import { Spin } from "antd";
+
+const ChatWindow = lazy(
+ () => import("@/pages/pc/ckbox/weChat/components/ChatWindow"),
+);
+
+const LoadingFallback = () => (
+ 加载中...
+ )}
+
+
+);
+
+// 在路由中使用
+