From e76e5629bd18719b66da11cb1d10924f491179c4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B6=85=E7=BA=A7=E8=80=81=E7=99=BD=E5=85=94?= Date: Tue, 9 Sep 2025 14:59:54 +0800 Subject: [PATCH] =?UTF-8?q?refactor(MessageRecord):=20=E9=87=8D=E6=9E=84?= =?UTF-8?q?=E5=B0=8F=E7=A8=8B=E5=BA=8F=E6=B6=88=E6=81=AF=E8=A7=A3=E6=9E=90?= =?UTF-8?q?=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 移除冗余的小程序消息解析代码，统一使用 parseWeappMsgStr 方法处理 简化缩略图获取逻辑，直接使用 parsedData.previewImage --- .../components/MessageRecord/index.tsx | 253 +++++------------- 1 file changed, 69 insertions(+), 184 deletions(-) diff --git a/Cunkebao/src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/index.tsx b/Cunkebao/src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/index.tsx index f427b8fb..5cf356cb 100644 --- a/Cunkebao/src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/index.tsx +++ b/Cunkebao/src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/index.tsx @@ -341,103 +341,6 @@ const MessageRecord: React.FC = ({ contract }) => { // 尝试解析JSON格式的消息 if (trimmedContent.startsWith("{") && trimmedContent.endsWith("}")) { - // 首先尝试使用parseWeappMsgStr解析小程序消息 - try { - const parsedData = parseWeappMsgStr(trimmedContent); - - // 检查是否为小程序消息 - if (parsedData.type === "miniprogram" && parsedData.appmsg) { - console.log(parsedData); - - const { appmsg } = parsedData; - const title = appmsg.title || "小程序消息"; - const appName = - appmsg.sourcedisplayname || appmsg.appname || "小程序"; - - // 获取缩略图URL - let thumbUrl = ""; - if (appmsg.weappinfo && appmsg.weappinfo.thumburl) { - thumbUrl = appmsg.weappinfo.thumburl - .replace(/[`"']/g, "") - .replace(/&/g, "&"); - } - - // 获取小程序类型 - const miniProgramType = - appmsg.weappinfo && appmsg.weappinfo.type - ? parseInt(appmsg.weappinfo.type) - : 1; - - // 根据type类型渲染不同布局 - if (miniProgramType === 2) { - // 类型2：图片区域布局 - return ( -
-
-
- {appName} -
-
{title}
- {thumbUrl && ( -
- 小程序图片 { - const target = e.target as HTMLImageElement; - target.style.display = "none"; - }} - /> -
- )} -
-
- 小程序 -
-
-
-
- ); - } else { - // 默认类型：横向布局 - return ( -
-
- {thumbUrl && ( - 小程序缩略图 { - const target = e.target as HTMLImageElement; - target.style.display = "none"; - }} - /> - )} -
-
{title}
-
-
-
{appName}
-
- ); - } - } - } catch (parseError) { - console.warn( - "parseWeappMsgStr解析失败，使用备用解析方法:", - parseError, - ); - } - - // 备用解析方法：处理其他格式的消息 const messageData = JSON.parse(trimmedContent); // 处理文章类型消息 @@ -488,104 +391,86 @@ const MessageRecord: React.FC = ({ contract }) => { ); } - // 处理包含contentXml的小程序消息格式 - if (messageData.contentXml && messageData.type === "miniprogram") { - const xmlContent = messageData.contentXml; + // 处理小程序消息 - 统一使用parseWeappMsgStr解析 + if (messageData.type === "miniprogram" && messageData.contentXml) { + try { + const parsedData = parseWeappMsgStr(trimmedContent); - // 从XML中提取title - const titleMatch = xmlContent.match(/([^<]*)<\/title>/); - const title = titleMatch ? titleMatch[1] : "小程序消息"; + if (parsedData.appmsg) { + const { appmsg } = parsedData; + const title = appmsg.title || "小程序消息"; + const appName = + appmsg.sourcedisplayname || appmsg.appname || "小程序"; - // 从XML中提取type字段 - const typeMatch = xmlContent.match( - /<weappinfo>[\s\S]*?<type>(\d+)<\/type>[\s\S]*?<\/weappinfo>/, - ); - const miniProgramType = typeMatch ? parseInt(typeMatch[1]) : 1; + // 获取小程序类型 + const miniProgramType = + appmsg.weappinfo && appmsg.weappinfo.type + ? parseInt(appmsg.weappinfo.type) + : 1; - // 从XML中提取thumburl或使用previewImage - const thumbUrlMatch = xmlContent.match( - /<thumburl>\s*([^<]*?)\s*<\/thumburl>/, - ); - let thumbUrl = thumbUrlMatch ? thumbUrlMatch[1].trim() : ""; - - // 如果thumburl为空或无效，使用previewImage - if (!thumbUrl || thumbUrl === "`" || thumbUrl.includes("`")) { - thumbUrl = messageData.previewImage || ""; - } - - // 清理URL中的特殊字符 - thumbUrl = thumbUrl.replace(/[`"']/g, "").replace(/&/g, "&"); - - // 从XML中提取appname或使用默认值 - const appNameMatch = - xmlContent.match(/<appname\s*\/?>[^<]*<\/appname>/) || - xmlContent.match( - /<sourcedisplayname>([^<]*)<\/sourcedisplayname>/, - ); - const appName = appNameMatch ? appNameMatch[1] : "小程序"; - - // 根据type类型渲染不同布局 - if (miniProgramType === 2) { - // 类型2：图片区域布局（小程序昵称、图片、标题、小程序标识） - return ( - <div - className={`${styles.miniProgramMessage} ${styles.miniProgramType2}`} - > - <div - className={`${styles.miniProgramCard} ${styles.miniProgramCardType2}`} - > - {/* 小程序昵称 */} - <div className={styles.miniProgramAppTop}>{appName}</div> - {/* 标题 */} - <div className={styles.miniProgramTitle}>{title}</div> - {/* 图片 */} - {thumbUrl && ( - <div className={styles.miniProgramImageArea}> + // 根据type类型渲染不同布局 + if (miniProgramType === 2) { + // 类型2：图片区域布局 + return ( + <div + className={`${styles.miniProgramMessage} ${styles.miniProgramType2}`} + > + <div + className={`${styles.miniProgramCard} ${styles.miniProgramCardType2}`} + > + <div className={styles.miniProgramAppTop}> + {appName} + </div> + <div className={styles.miniProgramTitle}>{title}</div> + <div className={styles.miniProgramImageArea}> + <img + src={parsedData.previewImage} + alt="小程序图片" + className={styles.miniProgramImage} + onError={e => { + const target = e.target as HTMLImageElement; + target.style.display = "none"; + }} + /> + </div> + <div className={styles.miniProgramContent}> + <div className={styles.miniProgramIdentifier}> + 小程序 + </div> + </div> + </div> + </div> + ); + } else { + // 默认类型：横向布局 + return ( + <div + className={`${styles.miniProgramMessage} ${styles.miniProgramType1}`} + > + <div className={styles.miniProgramCard}> <img - src={thumbUrl} - alt="小程序图片" - className={styles.miniProgramImage} + src={parsedData.previewImage} + alt="小程序缩略图" + className={styles.miniProgramThumb} onError={e => { const target = e.target as HTMLImageElement; target.style.display = "none"; }} /> + <div className={styles.miniProgramInfo}> + <div className={styles.miniProgramTitle}> + {title} + </div> + </div> </div> - )} - <div className={styles.miniProgramContent}> - {/* 小程序标识 */} - <div className={styles.miniProgramIdentifier}> - 小程序 - </div> + <div className={styles.miniProgramApp}>{appName}</div> </div> - </div> - </div> - ); - } else { - // 默认类型：横向布局 - return ( - <div - className={`${styles.miniProgramMessage} ${styles.miniProgramType1}`} - > - <div className={styles.miniProgramCard}> - {thumbUrl && ( - <img - src={thumbUrl} - alt="小程序缩略图" - className={styles.miniProgramThumb} - onError={e => { - const target = e.target as HTMLImageElement; - target.style.display = "none"; - }} - /> - )} - <div className={styles.miniProgramInfo}> - <div className={styles.miniProgramTitle}>{title}</div> - </div> - </div> - <div className={styles.miniProgramApp}>{appName}</div> - </div> - ); + ); + } + } + } catch (parseError) { + console.error("parseWeappMsgStr解析失败:", parseError); + return renderErrorMessage("[小程序消息 - 解析失败]"); } }