更新消息类型适配

This commit is contained in:
xuncha
2026-02-25 17:07:47 +08:00
parent 1a07c3970f
commit bc0671440c
4 changed files with 999 additions and 22 deletions

View File

@@ -84,9 +84,25 @@ export interface Message {
appMsgLocationLabel?: string
finderNickname?: string
finderUsername?: string
finderCoverUrl?: string
finderAvatar?: string
finderDuration?: number
// 位置消息
locationLat?: number
locationLng?: number
locationPoiname?: string
locationLabel?: string
// 音乐消息
musicAlbumUrl?: string
musicUrl?: string
// 礼物消息
giftImageUrl?: string
giftWish?: string
giftPrice?: string
// 名片消息
cardUsername?: string // 名片的微信ID
cardNickname?: string // 名片的昵称
cardAvatarUrl?: string // 名片头像 URL
// 转账消息
transferPayerUsername?: string // 转账付款人
transferReceiverUsername?: string // 转账收款人
@@ -744,15 +760,15 @@ class ChatService {
}
const batchSize = Math.max(1, limit || this.messageBatchDefault)
// 使用互斥锁保护游标状态访问
while (this.messageCursorMutex) {
await new Promise(resolve => setTimeout(resolve, 1))
}
this.messageCursorMutex = true
let state = this.messageCursors.get(sessionId)
// 只在以下情况重新创建游标:
// 1. 没有游标状态
// 2. offset 为 0 (重新加载会话)
@@ -789,7 +805,7 @@ class ChatService {
state = { cursor: cursorResult.cursor, fetched: 0, batchSize, startTime, endTime, ascending }
this.messageCursors.set(sessionId, state)
this.messageCursorMutex = false
// 如果需要跳过消息(offset > 0),逐批获取但不返回
// 注意:仅在 offset === 0 时重建游标最安全;
// 当 startTime/endTime 变化导致重建时offset 应由前端重置为 0
@@ -890,7 +906,7 @@ class ChatService {
// 群聊消息senderUsername 是群成员,需要检查 _db_path 或上下文
// 单聊消息senderUsername 应该是 sessionId 或自己
const isGroupChat = sessionId.includes('@chatroom')
if (isGroupChat) {
// 群聊消息暂不验证(因为 senderUsername 是群成员,不是 sessionId
return true
@@ -927,7 +943,7 @@ class ChatService {
state.fetched += rows.length
this.messageCursorMutex = false
this.messageCacheService.set(sessionId, filtered)
return { success: true, messages: filtered, hasMore }
} catch (e) {
@@ -1246,9 +1262,22 @@ class ChatService {
let appMsgLocationLabel: string | undefined
let finderNickname: string | undefined
let finderUsername: string | undefined
let finderCoverUrl: string | undefined
let finderAvatar: string | undefined
let finderDuration: number | undefined
let locationLat: number | undefined
let locationLng: number | undefined
let locationPoiname: string | undefined
let locationLabel: string | undefined
let musicAlbumUrl: string | undefined
let musicUrl: string | undefined
let giftImageUrl: string | undefined
let giftWish: string | undefined
let giftPrice: string | undefined
// 名片消息
let cardUsername: string | undefined
let cardNickname: string | undefined
let cardAvatarUrl: string | undefined
// 转账消息
let transferPayerUsername: string | undefined
let transferReceiverUsername: string | undefined
@@ -1286,6 +1315,15 @@ class ChatService {
const cardInfo = this.parseCardInfo(content)
cardUsername = cardInfo.username
cardNickname = cardInfo.nickname
cardAvatarUrl = cardInfo.avatarUrl
} else if (localType === 48 && content) {
// 位置消息
const latStr = this.extractXmlAttribute(content, 'location', 'x') || this.extractXmlAttribute(content, 'location', 'latitude')
const lngStr = this.extractXmlAttribute(content, 'location', 'y') || this.extractXmlAttribute(content, 'location', 'longitude')
if (latStr) { const v = parseFloat(latStr); if (Number.isFinite(v)) locationLat = v }
if (lngStr) { const v = parseFloat(lngStr); if (Number.isFinite(v)) locationLng = v }
locationLabel = this.extractXmlAttribute(content, 'location', 'label') || this.extractXmlValue(content, 'label') || undefined
locationPoiname = this.extractXmlAttribute(content, 'location', 'poiname') || this.extractXmlValue(content, 'poiname') || undefined
} else if ((localType === 49 || localType === 8589934592049) && content) {
// Type 49 消息链接、文件、小程序、转账等8589934592049 也是转账类型
const type49Info = this.parseType49Message(content)
@@ -1327,6 +1365,18 @@ class ChatService {
appMsgLocationLabel = appMsgLocationLabel || type49Info.appMsgLocationLabel
finderNickname = finderNickname || type49Info.finderNickname
finderUsername = finderUsername || type49Info.finderUsername
finderCoverUrl = finderCoverUrl || type49Info.finderCoverUrl
finderAvatar = finderAvatar || type49Info.finderAvatar
finderDuration = finderDuration ?? type49Info.finderDuration
locationLat = locationLat ?? type49Info.locationLat
locationLng = locationLng ?? type49Info.locationLng
locationPoiname = locationPoiname || type49Info.locationPoiname
locationLabel = locationLabel || type49Info.locationLabel
musicAlbumUrl = musicAlbumUrl || type49Info.musicAlbumUrl
musicUrl = musicUrl || type49Info.musicUrl
giftImageUrl = giftImageUrl || type49Info.giftImageUrl
giftWish = giftWish || type49Info.giftWish
giftPrice = giftPrice || type49Info.giftPrice
chatRecordTitle = chatRecordTitle || type49Info.chatRecordTitle
chatRecordList = chatRecordList || type49Info.chatRecordList
transferPayerUsername = transferPayerUsername || type49Info.transferPayerUsername
@@ -1372,8 +1422,21 @@ class ChatService {
appMsgLocationLabel,
finderNickname,
finderUsername,
finderCoverUrl,
finderAvatar,
finderDuration,
locationLat,
locationLng,
locationPoiname,
locationLabel,
musicAlbumUrl,
musicUrl,
giftImageUrl,
giftWish,
giftPrice,
cardUsername,
cardNickname,
cardAvatarUrl,
transferPayerUsername,
transferReceiverUsername,
chatRecordTitle,
@@ -1874,7 +1937,7 @@ class ChatService {
* 解析名片消息
* 格式: <msg username="wxid_xxx" nickname="昵称" ... />
*/
private parseCardInfo(content: string): { username?: string; nickname?: string } {
private parseCardInfo(content: string): { username?: string; nickname?: string; avatarUrl?: string } {
try {
if (!content) return {}
@@ -1884,7 +1947,11 @@ class ChatService {
// 提取 nickname
const nickname = this.extractXmlAttribute(content, 'msg', 'nickname') || undefined
return { username, nickname }
// 提取头像
const avatarUrl = this.extractXmlAttribute(content, 'msg', 'bigheadimgurl') ||
this.extractXmlAttribute(content, 'msg', 'smallheadimgurl') || undefined
return { username, nickname, avatarUrl }
} catch (e) {
console.error('[ChatService] 名片解析失败:', e)
return {}
@@ -1911,6 +1978,19 @@ class ChatService {
appMsgLocationLabel?: string
finderNickname?: string
finderUsername?: string
finderCoverUrl?: string
finderAvatar?: string
finderDuration?: number
locationLat?: number
locationLng?: number
locationPoiname?: string
locationLabel?: string
musicAlbumUrl?: string
musicUrl?: string
giftImageUrl?: string
giftWish?: string
giftPrice?: string
cardAvatarUrl?: string
fileName?: string
fileSize?: number
fileExt?: string
@@ -1965,14 +2045,10 @@ class ChatService {
this.extractXmlValue(content, 'findernickname') ||
this.extractXmlValue(content, 'finder_nickname')
const normalized = content.toLowerCase()
const isFinder =
xmlType === '51' ||
normalized.includes('<finder') ||
normalized.includes('finderusername') ||
normalized.includes('finderobjectid')
const isRedPacket = xmlType === '2001' || normalized.includes('hongbao')
const isMusic = xmlType === '3' || Boolean(musicUrl || dataUrl)
const isLocation = Boolean(locationLabel) || normalized.includes('<location')
const isFinder = xmlType === '51'
const isRedPacket = xmlType === '2001'
const isMusic = xmlType === '3'
const isLocation = Boolean(locationLabel)
result.linkTitle = title || undefined
result.linkUrl = url || undefined
@@ -1988,10 +2064,54 @@ class ChatService {
result.finderUsername = finderUsername || undefined
result.finderNickname = finderNickname || undefined
// 视频号封面/头像/时长
if (isFinder) {
const finderCover =
this.extractXmlValue(content, 'thumbUrl') ||
this.extractXmlValue(content, 'coverUrl') ||
this.extractXmlValue(content, 'thumburl') ||
this.extractXmlValue(content, 'coverurl')
if (finderCover) result.finderCoverUrl = finderCover
const finderAvatar = this.extractXmlValue(content, 'avatar')
if (finderAvatar) result.finderAvatar = finderAvatar
const durationStr = this.extractXmlValue(content, 'videoPlayDuration') || this.extractXmlValue(content, 'duration')
if (durationStr) {
const d = parseInt(durationStr, 10)
if (Number.isFinite(d) && d > 0) result.finderDuration = d
}
}
// 位置经纬度
if (isLocation) {
const latAttr = this.extractXmlAttribute(content, 'location', 'x') || this.extractXmlAttribute(content, 'location', 'latitude')
const lngAttr = this.extractXmlAttribute(content, 'location', 'y') || this.extractXmlAttribute(content, 'location', 'longitude')
if (latAttr) { const v = parseFloat(latAttr); if (Number.isFinite(v)) result.locationLat = v }
if (lngAttr) { const v = parseFloat(lngAttr); if (Number.isFinite(v)) result.locationLng = v }
result.locationPoiname = this.extractXmlAttribute(content, 'location', 'poiname') || locationLabel || undefined
result.locationLabel = this.extractXmlAttribute(content, 'location', 'label') || undefined
}
// 音乐专辑封面
if (isMusic) {
const albumUrl = this.extractXmlValue(content, 'songalbumurl')
if (albumUrl) result.musicAlbumUrl = albumUrl
result.musicUrl = musicUrl || dataUrl || url || undefined
}
// 礼物消息
const isGift = xmlType === '115'
if (isGift) {
result.giftWish = this.extractXmlValue(content, 'wishmessage') || undefined
result.giftImageUrl = this.extractXmlValue(content, 'skuimgurl') || undefined
result.giftPrice = this.extractXmlValue(content, 'skuprice') || undefined
}
if (isFinder) {
result.appMsgKind = 'finder'
} else if (isRedPacket) {
result.appMsgKind = 'red-packet'
} else if (isGift) {
result.appMsgKind = 'gift'
} else if (isLocation) {
result.appMsgKind = 'location'
} else if (isMusic) {
@@ -4286,6 +4406,7 @@ class ChatService {
const cardInfo = this.parseCardInfo(rawContent)
msg.cardUsername = cardInfo.username
msg.cardNickname = cardInfo.nickname
msg.cardAvatarUrl = cardInfo.avatarUrl
}
if (rawContent && (rawContent.includes('<appmsg') || rawContent.includes('&lt;appmsg'))) {

View File

@@ -1157,6 +1157,7 @@
}
[data-mode="dark"] {
.link-thumb.theme-adaptive,
.miniapp-thumb.theme-adaptive {
filter: invert(1) hue-rotate(180deg);
@@ -1177,6 +1178,292 @@
}
}
// ============= 专属消息卡片 =============
// 红包卡片
.hongbao-message {
width: 240px;
background: linear-gradient(135deg, #e25b4a 0%, #c94535 100%);
border-radius: 12px;
padding: 14px 16px;
display: flex;
gap: 12px;
align-items: center;
cursor: default;
.hongbao-icon {
flex-shrink: 0;
svg {
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}
}
.hongbao-info {
flex: 1;
color: white;
.hongbao-greeting {
font-size: 15px;
font-weight: 500;
margin-bottom: 6px;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.hongbao-label {
font-size: 12px;
opacity: 0.8;
}
}
}
// 礼物卡片
.gift-message {
width: 240px;
background: linear-gradient(135deg, #f7a8b8 0%, #e88fa0 100%);
border-radius: 12px;
padding: 14px 16px;
cursor: default;
.gift-img {
width: 100%;
border-radius: 8px;
margin-bottom: 10px;
object-fit: cover;
}
.gift-info {
color: white;
.gift-wish {
font-size: 15px;
font-weight: 500;
margin-bottom: 4px;
}
.gift-price {
font-size: 13px;
font-weight: 600;
margin-bottom: 4px;
}
.gift-label {
font-size: 12px;
opacity: 0.7;
}
}
}
// 视频号卡片
.channel-video-card {
width: 200px;
background: var(--card-bg);
border-radius: 8px;
overflow: hidden;
border: 1px solid var(--border-color);
position: relative;
cursor: pointer;
transition: all 0.2s ease;
&:hover {
border-color: var(--primary);
}
.channel-video-cover {
position: relative;
width: 100%;
height: 160px;
background: #000;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
.channel-video-cover-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: #666;
}
.channel-video-duration {
position: absolute;
bottom: 6px;
right: 6px;
background: rgba(0, 0, 0, 0.6);
color: white;
font-size: 11px;
padding: 1px 5px;
border-radius: 3px;
}
}
.channel-video-info {
padding: 8px 10px;
.channel-video-title {
font-size: 13px;
color: var(--text-primary);
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin-bottom: 4px;
}
.channel-video-author {
display: flex;
align-items: center;
gap: 4px;
font-size: 11px;
color: var(--text-secondary);
.channel-video-avatar {
width: 16px;
height: 16px;
border-radius: 50%;
}
}
}
}
// 音乐卡片
.music-message {
width: 240px;
background: var(--card-bg);
border: 1px solid var(--border-color);
border-radius: 12px;
display: flex;
overflow: hidden;
cursor: pointer;
transition: all 0.2s ease;
&:hover {
opacity: 0.85;
border-color: var(--primary);
}
.music-cover {
width: 80px;
align-self: stretch;
flex-shrink: 0;
background: var(--bg-tertiary);
display: flex;
align-items: center;
justify-content: center;
color: var(--text-secondary);
img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
}
.music-info {
flex: 1;
min-width: 0;
overflow: hidden;
padding: 10px;
.music-title {
font-size: 14px;
font-weight: 500;
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.music-artist {
font-size: 12px;
color: var(--text-secondary);
margin-top: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.music-source {
font-size: 11px;
color: var(--text-tertiary);
margin-top: 2px;
}
}
}
// 位置消息卡片
.location-message {
width: 240px;
background: var(--card-bg);
border: 1px solid var(--border-color);
border-radius: 12px;
overflow: hidden;
cursor: pointer;
transition: all 0.2s ease;
&:hover {
border-color: var(--primary);
}
.location-text {
padding: 12px;
display: flex;
gap: 8px;
}
.location-icon {
flex-shrink: 0;
color: #e25b4a;
margin-top: 2px;
}
.location-info {
flex: 1;
min-width: 0;
.location-name {
font-size: 14px;
font-weight: 500;
margin-bottom: 2px;
color: var(--text-primary);
}
.location-label {
font-size: 11px;
color: var(--text-tertiary);
line-height: 1.4;
}
}
.location-map {
position: relative;
height: 100px;
overflow: hidden;
img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
}
}
// 暗色模式下地图瓦片反色
[data-mode="dark"] {
.location-map img {
filter: invert(1) hue-rotate(180deg) brightness(0.9) contrast(0.9);
}
}
.message-area {
flex: 1 1 70%;
display: flex;
@@ -2534,10 +2821,17 @@
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
background: var(--bg-tertiary);
padding: 12px 14px;
background: var(--card-bg);
border: 1px solid var(--border-color);
border-radius: 8px;
min-width: 200px;
transition: opacity 0.2s ease;
cursor: pointer;
&:hover {
opacity: 0.85;
}
.card-icon {
flex-shrink: 0;
@@ -2562,6 +2856,18 @@
}
}
// 聊天记录消息 (合并转发)
.chat-record-message {
background: var(--card-bg) !important;
border: 1px solid var(--border-color) !important;
transition: opacity 0.2s ease;
cursor: pointer;
&:hover {
opacity: 0.85;
}
}
// 通话消息
.call-message {
display: flex;
@@ -3305,3 +3611,217 @@
flex-shrink: 0;
}
}
// 名片消息样式
.card-message {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
background: var(--bg-primary); // 添加底色
border: 1px solid var(--border-color);
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease;
&:hover {
background: var(--bg-hover);
}
.card-icon {
width: 40px;
height: 40px;
border-radius: 8px;
overflow: hidden;
background: var(--bg-secondary);
display: flex;
align-items: center;
justify-content: center;
color: var(--text-tertiary);
}
.card-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.card-name {
font-size: 15px;
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.card-wxid {
font-size: 12px;
color: var(--text-tertiary);
}
.card-label {
font-size: 11px;
color: var(--text-tertiary);
margin-top: 4px;
padding-top: 4px;
border-top: 1px solid var(--border-color);
}
}
// 聊天记录消息外观
.chat-record-message {
background: var(--bg-primary); // 添加底色
border: 1px solid var(--border-color);
border-radius: 8px;
&:hover {
background: var(--bg-hover);
}
.chat-record-list {
font-size: 13px;
color: var(--text-tertiary);
line-height: 1.6;
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid var(--border-color);
.chat-record-item {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
.source-name {
color: var(--text-secondary);
}
}
}
.chat-record-more {
font-size: 12px;
color: var(--text-tertiary);
margin-top: 4px;
}
}
// 公众号文章图文消息外观 (大图模式)
.official-message {
display: flex;
flex-direction: column;
background: var(--bg-primary);
border: 1px solid var(--border-color);
border-radius: 8px;
overflow: hidden;
cursor: pointer;
transition: all 0.2s ease;
max-width: 320px;
&:hover {
background: var(--bg-hover);
}
.official-header {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
.official-avatar {
width: 20px;
height: 20px;
border-radius: 50%;
object-fit: cover;
}
.official-avatar-placeholder {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--bg-secondary);
display: flex;
align-items: center;
justify-content: center;
color: var(--text-tertiary);
svg {
width: 14px;
height: 14px;
}
}
.official-name {
font-size: 13px;
color: var(--text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
.official-body {
display: flex;
flex-direction: column;
.official-cover-wrapper {
position: relative;
width: 100%;
padding-top: 42.5%; // ~2.35:1 aspectRatio standard for WeChat article covers
background: var(--bg-secondary);
overflow: hidden;
.official-cover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.official-title-overlay {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 24px 12px 10px;
background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.7));
color: #fff;
font-size: 15px;
font-weight: 500;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
}
.official-title-text {
padding: 0 12px 10px;
font-size: 15px;
font-weight: 500;
color: var(--text-primary);
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.official-digest {
font-size: 13px;
color: var(--text-tertiary);
padding: 0 12px 12px;
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
}
}

View File

@@ -3944,16 +3944,24 @@ function MessageBubble({
// 名片消息
if (isCard) {
const cardName = message.cardNickname || message.cardUsername || '未知联系人'
const cardAvatar = message.cardAvatarUrl
return (
<div className="card-message">
<div className="card-icon">
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
<circle cx="12" cy="7" r="4" />
</svg>
{cardAvatar ? (
<img src={cardAvatar} alt="" style={{ width: '40px', height: '40px', objectFit: 'cover', borderRadius: '8px' }} referrerPolicy="no-referrer" />
) : (
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
<circle cx="12" cy="7" r="4" />
</svg>
)}
</div>
<div className="card-info">
<div className="card-name">{cardName}</div>
{message.cardUsername && message.cardUsername !== message.cardNickname && (
<div className="card-wxid">: {message.cardUsername}</div>
)}
<div className="card-label"></div>
</div>
</div>
@@ -3972,7 +3980,319 @@ function MessageBubble({
)
}
// 位置消息
if (message.localType === 48) {
const raw = message.rawContent || ''
const poiname = raw.match(/poiname="([^"]*)"/)?.[1] || message.locationPoiname || '位置'
const label = raw.match(/label="([^"]*)"/)?.[1] || message.locationLabel || ''
const lat = parseFloat(raw.match(/x="([^"]*)"/)?.[1] || String(message.locationLat || 0))
const lng = parseFloat(raw.match(/y="([^"]*)"/)?.[1] || String(message.locationLng || 0))
const mapTileUrl = (lat && lng)
? `https://restapi.amap.com/v3/staticmap?location=${lng},${lat}&zoom=15&size=280*100&markers=mid,,A:${lng},${lat}&key=e1dedc6bfbb8413ab2185e7a0e21f0a1`
: ''
return (
<div className="location-message" onClick={() => window.electronAPI.shell.openExternal(`https://uri.amap.com/marker?position=${lng},${lat}&name=${encodeURIComponent(poiname || label)}`)}>
<div className="location-text">
<div className="location-icon">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" />
<circle cx="12" cy="10" r="3" />
</svg>
</div>
<div className="location-info">
{poiname && <div className="location-name">{poiname}</div>}
{label && <div className="location-label">{label}</div>}
</div>
</div>
{mapTileUrl && (
<div className="location-map">
<img src={mapTileUrl} alt="地图" referrerPolicy="no-referrer" />
</div>
)}
</div>
)
}
// 链接消息 (AppMessage)
const appMsgRichPreview = (() => {
const rawXml = message.rawContent || ''
if (!rawXml || (!rawXml.includes('<appmsg') && !rawXml.includes('&lt;appmsg'))) return null
let doc: Document | null = null
const getDoc = () => {
if (doc) return doc
try {
const start = rawXml.indexOf('<msg>')
const xml = start >= 0 ? rawXml.slice(start) : rawXml
doc = new DOMParser().parseFromString(xml, 'text/xml')
} catch {
doc = null
}
return doc
}
const q = (selector: string) => getDoc()?.querySelector(selector)?.textContent?.trim() || ''
const xmlType = message.xmlType || q('appmsg > type') || q('type')
const title = message.linkTitle || q('title') || cleanMessageContent(message.parsedContent) || 'Card'
const desc = message.appMsgDesc || q('des')
const url = message.linkUrl || q('url')
const thumbUrl = message.linkThumb || message.appMsgThumbUrl || q('thumburl') || q('cdnthumburl') || q('cover') || q('coverurl')
const musicUrl = message.appMsgMusicUrl || message.appMsgDataUrl || q('musicurl') || q('playurl') || q('dataurl') || q('lowurl')
const sourceName = message.appMsgSourceName || q('sourcename')
const appName = message.appMsgAppName || q('appname')
const sourceUsername = message.appMsgSourceUsername || q('sourceusername')
const finderName =
message.finderNickname ||
message.finderUsername ||
q('findernickname') ||
q('finder_nickname') ||
q('finderusername') ||
q('finder_username')
const lower = rawXml.toLowerCase()
const kind = message.appMsgKind || (
(xmlType === '2001' || lower.includes('hongbao')) ? 'red-packet'
: (xmlType === '115' ? 'gift'
: ((xmlType === '33' || xmlType === '36') ? 'miniapp'
: (((xmlType === '5' || xmlType === '49') && (sourceUsername.startsWith('gh_') || !!sourceName || appName.includes('公众号'))) ? 'official-link'
: (xmlType === '51' ? 'finder'
: (xmlType === '3' ? 'music'
: ((xmlType === '5' || xmlType === '49') ? 'link' // Fallback for standard links
: (!!musicUrl ? 'music' : '')))))))
)
if (!kind) return null
// 对视频号提取真实标题,避免出现 "当前版本不支持该内容"
let displayTitle = title
if (kind === 'finder' && title.includes('不支持')) {
displayTitle = desc || ''
}
const openExternal = (e: React.MouseEvent, nextUrl?: string) => {
if (!nextUrl) return
e.stopPropagation()
if (window.electronAPI?.shell?.openExternal) {
window.electronAPI.shell.openExternal(nextUrl)
} else {
window.open(nextUrl, '_blank')
}
}
const metaLabel =
kind === 'red-packet' ? '红包'
: kind === 'finder' ? (finderName || '视频号')
: kind === 'location' ? '位置'
: kind === 'music' ? (sourceName || appName || '音乐')
: (sourceName || appName || (sourceUsername.startsWith('gh_') ? '公众号' : ''))
const renderCard = (cardKind: string, clickableUrl?: string) => (
<div
className={`link-message appmsg-rich-card ${cardKind}`}
onClick={clickableUrl ? (e) => openExternal(e, clickableUrl) : undefined}
title={clickableUrl}
>
<div className="link-header">
<div className="link-title" title={title}>{title}</div>
{metaLabel ? <div className="appmsg-meta-badge">{metaLabel}</div> : null}
</div>
<div className="link-body">
<div className="link-desc-block">
{desc ? <div className="link-desc" title={desc}>{desc}</div> : null}
</div>
{thumbUrl ? (
<img
src={thumbUrl}
alt=""
className={`link-thumb${((cardKind === 'miniapp') || /\.svg(?:$|\?)/i.test(thumbUrl)) ? ' theme-adaptive' : ''}`}
loading="lazy"
referrerPolicy="no-referrer"
/>
) : (
<div className={`link-thumb-placeholder ${cardKind}`}>{cardKind.slice(0, 2).toUpperCase()}</div>
)}
</div>
</div>
)
if (kind === 'red-packet') {
// 专属红包卡片
const greeting = (() => {
try {
const d = getDoc()
if (!d) return ''
return d.querySelector('receivertitle')?.textContent?.trim() ||
d.querySelector('sendertitle')?.textContent?.trim() || ''
} catch { return '' }
})()
return (
<div className="hongbao-message">
<div className="hongbao-icon">
<svg width="32" height="32" viewBox="0 0 40 40" fill="none">
<rect x="4" y="6" width="32" height="28" rx="4" fill="white" fillOpacity="0.3" />
<rect x="4" y="6" width="32" height="14" rx="4" fill="white" fillOpacity="0.2" />
<circle cx="20" cy="20" r="6" fill="white" fillOpacity="0.4" />
<text x="20" y="24" textAnchor="middle" fill="white" fontSize="12" fontWeight="bold">¥</text>
</svg>
</div>
<div className="hongbao-info">
<div className="hongbao-greeting">{greeting || '恭喜发财,大吉大利'}</div>
<div className="hongbao-label"></div>
</div>
</div>
)
}
if (kind === 'gift') {
// 礼物卡片
const giftImg = message.giftImageUrl || thumbUrl
const giftWish = message.giftWish || title || '送你一份心意'
const giftPriceRaw = message.giftPrice
const giftPriceYuan = giftPriceRaw ? (parseInt(giftPriceRaw) / 100).toFixed(2) : ''
return (
<div className="gift-message">
{giftImg && <img className="gift-img" src={giftImg} alt="" referrerPolicy="no-referrer" />}
<div className="gift-info">
<div className="gift-wish">{giftWish}</div>
{giftPriceYuan && <div className="gift-price">¥{giftPriceYuan}</div>}
<div className="gift-label"></div>
</div>
</div>
)
}
if (kind === 'finder') {
// 视频号专属卡片
const coverUrl = message.finderCoverUrl || thumbUrl
const duration = message.finderDuration
const authorName = finderName || ''
const authorAvatar = message.finderAvatar
const fmtDuration = duration ? `${Math.floor(duration / 60)}:${String(duration % 60).padStart(2, '0')}` : ''
return (
<div className="channel-video-card" onClick={url ? (e) => openExternal(e, url) : undefined}>
<div className="channel-video-cover">
{coverUrl ? (
<img src={coverUrl} alt="" referrerPolicy="no-referrer" />
) : (
<div className="channel-video-cover-placeholder">
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
<polygon points="5 3 19 12 5 21 5 3" />
</svg>
</div>
)}
{fmtDuration && <span className="channel-video-duration">{fmtDuration}</span>}
</div>
<div className="channel-video-info">
<div className="channel-video-title">{displayTitle || '视频号视频'}</div>
<div className="channel-video-author">
{authorAvatar && <img className="channel-video-avatar" src={authorAvatar} alt="" referrerPolicy="no-referrer" />}
<span>{authorName || '视频号'}</span>
</div>
</div>
</div>
)
}
if (kind === 'music') {
// 音乐专属卡片
const albumUrl = message.musicAlbumUrl || thumbUrl
const playUrl = message.musicUrl || musicUrl || url
const songTitle = title || '未知歌曲'
const artist = desc || ''
const appLabel = sourceName || appName || ''
return (
<div className="music-message" onClick={playUrl ? (e) => openExternal(e, playUrl) : undefined}>
<div className="music-cover">
{albumUrl ? (
<img src={albumUrl} alt="" referrerPolicy="no-referrer" />
) : (
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<polygon points="5 3 19 12 5 21 5 3" />
</svg>
)}
</div>
<div className="music-info">
<div className="music-title">{songTitle}</div>
{artist && <div className="music-artist">{artist}</div>}
{appLabel && <div className="music-source">{appLabel}</div>}
</div>
</div>
)
}
if (kind === 'official-link') {
const authorAvatar = q('publisher > headimg') || q('brand_info > headimgurl') || q('appmsg > avatar') || message.cardAvatarUrl
const authorName = q('publisher > nickname') || sourceName || appName || '公众号'
const coverPic = q('mmreader > category > item > cover') || thumbUrl
const digest = q('mmreader > category > item > digest') || desc
const articleTitle = q('mmreader > category > item > title') || title
return (
<div className="official-message" onClick={url ? (e) => openExternal(e, url) : undefined}>
<div className="official-header">
{authorAvatar ? (
<img src={authorAvatar} alt="" className="official-avatar" referrerPolicy="no-referrer" />
) : (
<div className="official-avatar-placeholder">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
<circle cx="12" cy="7" r="4" />
</svg>
</div>
)}
<span className="official-name">{authorName}</span>
</div>
<div className="official-body">
{coverPic ? (
<div className="official-cover-wrapper">
<img src={coverPic} alt="" className="official-cover" referrerPolicy="no-referrer" />
<div className="official-title-overlay">{articleTitle}</div>
</div>
) : (
<div className="official-title-text">{articleTitle}</div>
)}
{digest && <div className="official-digest">{digest}</div>}
</div>
</div>
)
}
if (kind === 'link') return renderCard('link', url || undefined)
if (kind === 'card') return renderCard('card', url || undefined)
if (kind === 'miniapp') {
return (
<div className="miniapp-message miniapp-message-rich">
<div className="miniapp-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
</svg>
</div>
<div className="miniapp-info">
<div className="miniapp-title">{title}</div>
<div className="miniapp-label">{metaLabel || '小程序'}</div>
</div>
{thumbUrl ? (
<img
src={thumbUrl}
alt=""
className={`miniapp-thumb${/\.svg(?:$|\?)/i.test(thumbUrl) ? ' theme-adaptive' : ''}`}
loading="lazy"
referrerPolicy="no-referrer"
/>
) : null}
</div>
)
}
return null
})()
if (appMsgRichPreview) {
return appMsgRichPreview
}
const isAppMsg = message.rawContent?.includes('<appmsg') || (message.parsedContent && message.parsedContent.includes('<appmsg'))
if (isAppMsg) {

View File

@@ -75,12 +75,28 @@ export interface Message {
appMsgLocationLabel?: string
finderNickname?: string
finderUsername?: string
finderCoverUrl?: string // 视频号封面图
finderAvatar?: string // 视频号作者头像
finderDuration?: number // 视频号时长(秒)
// 位置消息
locationLat?: number // 纬度
locationLng?: number // 经度
locationPoiname?: string // 地点名称
locationLabel?: string // 详细地址
// 音乐消息
musicAlbumUrl?: string // 专辑封面
musicUrl?: string // 播放链接
// 礼物消息
giftImageUrl?: string // 礼物商品图
giftWish?: string // 祝福语
giftPrice?: string // 价格(分)
// 转账消息
transferPayerUsername?: string // 转账付款方 wxid
transferReceiverUsername?: string // 转账收款方 wxid
// 名片消息
cardUsername?: string // 名片的微信ID
cardNickname?: string // 名片的昵称
cardAvatarUrl?: string // 名片头像 URL
// 聊天记录
chatRecordTitle?: string // 聊天记录标题
chatRecordList?: ChatRecordItem[] // 聊天记录列表