支持聊天记录转发解析与嵌套聊天记录解析；优化聊天记录转发窗口样式

2026-03-25 07:16:51 +00:00 · 2026-03-20 00:02:49 +08:00
parent 7590623d26
commit 60dc911228
12 changed files with 1237 additions and 399 deletions
--- a/src/pages/ChatHistoryPage.scss
+++ b/src/pages/ChatHistoryPage.scss
@@ -2,15 +2,16 @@
  display: flex;
  flex-direction: column;
  height: 100vh;
-  background: var(--bg-primary);
+  background:
+    linear-gradient(180deg, color-mix(in srgb, var(--bg-primary) 96%, white) 0%, var(--bg-primary) 100%);

  .history-list {
    flex: 1;
    overflow-y: auto;
-    padding: 16px;
+    padding: 18px 18px 28px;
    display: flex;
    flex-direction: column;
-    gap: 12px;
+    gap: 0;

    .status-msg {
      text-align: center;
@@ -30,8 +31,9 @@

  .history-item {
    display: flex;
-    gap: 12px;
+    gap: 14px;
    align-items: flex-start;
+    padding: 14px 0 0;

    &.error-item {
      padding: 12px;
@@ -43,65 +45,70 @@
      justify-content: center;
    }

-    .avatar {
-      width: 40px;
-      height: 40px;
-      border-radius: 4px;
+    .history-avatar {
+      width: 36px;
+      height: 36px;
+      border-radius: 8px;
      overflow: hidden;
      flex-shrink: 0;
-      background: var(--bg-tertiary);
+      border: none;
+      box-shadow: none;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      display: flex;
+      align-items: center;
+      justify-content: center;

-      img {
+      .avatar-component.avatar-inner {
        width: 100%;
        height: 100%;
-        object-fit: cover;
-      }
+        border-radius: inherit;
+        background: transparent;

-      .avatar-placeholder {
-        width: 100%;
-        height: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        color: var(--text-tertiary);
-        font-size: 16px;
-        font-weight: 500;
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        color: white;
+        img.avatar-image {
+          // Forwarded record head images may include a light matte edge.
+          // Slightly zoom in to crop that edge and align with normal chat avatars.
+          transform: scale(1.12);
+          transform-origin: center;
+        }
      }
    }

    .content-wrapper {
      flex: 1;
      min-width: 0;
+      padding-bottom: 18px;
+      border-bottom: 1px solid color-mix(in srgb, var(--border-color) 82%, transparent);

      .header {
        display: flex;
        justify-content: space-between;
-        align-items: center;
-        margin-bottom: 6px;
+        align-items: flex-start;
+        gap: 12px;
+        margin-bottom: 4px;

        .sender {
-          font-size: 14px;
-          font-weight: 500;
-          color: var(--text-primary);
+          font-size: 13px;
+          font-weight: 400;
+          color: color-mix(in srgb, var(--text-secondary) 82%, transparent);
+          line-height: 1.3;
        }

        .time {
          font-size: 12px;
-          color: var(--text-tertiary);
+          color: color-mix(in srgb, var(--text-tertiary) 92%, transparent);
          flex-shrink: 0;
          margin-left: 8px;
+          line-height: 1.3;
        }
      }

      .bubble {
-        background: var(--bg-secondary);
-        padding: 10px 14px;
-        border-radius: 18px 18px 18px 4px;
+        background: transparent;
+        padding: 0;
+        border-radius: 0;
        word-wrap: break-word;
        max-width: 100%;
-        display: inline-block;
+        display: block;

        &.image-bubble {
          padding: 0;
@@ -109,8 +116,8 @@
        }

        .text-content {
-          font-size: 14px;
-          line-height: 1.6;
+          font-size: 15px;
+          line-height: 1.7;
          color: var(--text-primary);
          white-space: pre-wrap;
          word-break: break-word;
@@ -118,23 +125,84 @@

        .media-content {
          img {
-            max-width: 100%;
-            max-height: 300px;
-            border-radius: 8px;
+            max-width: min(100%, 420px);
+            max-height: 320px;
+            border-radius: 12px;
            display: block;
+            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
+            background: color-mix(in srgb, var(--bg-secondary) 88%, transparent);
          }

          .media-tip {
-            padding: 8px 12px;
+            padding: 6px 0;
            color: var(--text-tertiary);
            font-size: 13px;
          }
        }

        .media-placeholder {
-          font-size: 14px;
+          font-size: 13px;
          color: var(--text-secondary);
-          padding: 4px 0;
+          padding: 4px 0 0;
+        }
+
+        .nested-chat-record-card {
+          min-width: 220px;
+          max-width: 320px;
+          background: color-mix(in srgb, var(--bg-secondary) 97%, #f5f7fb);
+          border: 1px solid var(--border-color);
+          border-radius: 14px;
+          overflow: hidden;
+          padding: 0;
+          text-align: left;
+          cursor: default;
+          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
+
+          &.clickable {
+            cursor: pointer;
+            transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
+
+            &:hover {
+              transform: translateY(-1px);
+              box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
+              border-color: color-mix(in srgb, var(--primary) 28%, var(--border-color));
+            }
+          }
+
+          &:disabled {
+            border: 1px solid var(--border-color);
+            opacity: 1;
+          }
+        }
+
+        .nested-chat-record-title {
+          padding: 13px 15px 9px;
+          font-size: 14px;
+          font-weight: 600;
+          color: var(--text-primary);
+        }
+
+        .nested-chat-record-list {
+          padding: 0 15px 11px;
+          display: flex;
+          flex-direction: column;
+          gap: 4px;
+          border-bottom: 1px solid var(--border-color);
+        }
+
+        .nested-chat-record-line {
+          font-size: 13px;
+          line-height: 1.45;
+          color: var(--text-secondary);
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+
+        .nested-chat-record-footer {
+          padding: 8px 15px 11px;
+          font-size: 12px;
+          color: var(--text-tertiary);
        }
      }
    }
--- a/src/pages/ChatHistoryPage.tsx
+++ b/src/pages/ChatHistoryPage.tsx
@@ -3,10 +3,13 @@ import { useParams, useLocation } from 'react-router-dom'
 import { ChatRecordItem } from '../types/models'
 import TitleBar from '../components/TitleBar'
 import { ErrorBoundary } from '../components/ErrorBoundary'
+import { Avatar } from '../components/Avatar'
 import './ChatHistoryPage.scss'

+const forwardedImageCache = new Map<string, string>()
+
 export default function ChatHistoryPage() {
-  const params = useParams<{ sessionId: string; messageId: string }>()
+  const params = useParams<{ sessionId: string; messageId: string; payloadId: string }>()
  const location = useLocation()
  const [recordList, setRecordList] = useState<ChatRecordItem[]>([])
  const [loading, setLoading] = useState(true)
@@ -30,64 +33,212 @@ export default function ChatHistoryPage() {
      .replace(/&#39;/g, "'")
  }

+  const extractTopLevelXmlElements = (source: string, tagName: string): Array<{ attrs: string; inner: string }> => {
+    const xml = source || ''
+    if (!xml) return []
+
+    const pattern = new RegExp(`<(/?)${tagName}\\b([^>]*)>`, 'gi')
+    const result: Array<{ attrs: string; inner: string }> = []
+    let match: RegExpExecArray | null
+    let depth = 0
+    let openEnd = -1
+    let openStart = -1
+    let openAttrs = ''
+
+    while ((match = pattern.exec(xml)) !== null) {
+      const isClosing = match[1] === '/'
+      const attrs = match[2] || ''
+      const rawTag = match[0] || ''
+      const selfClosing = !isClosing && /\/\s*>$/.test(rawTag)
+
+      if (!isClosing) {
+        if (depth === 0) {
+          openStart = match.index
+          openEnd = pattern.lastIndex
+          openAttrs = attrs
+        }
+        if (!selfClosing) {
+          depth += 1
+        } else if (depth === 0 && openEnd >= 0) {
+          result.push({ attrs: openAttrs, inner: '' })
+          openStart = -1
+          openEnd = -1
+          openAttrs = ''
+        }
+        continue
+      }
+
+      if (depth <= 0) continue
+      depth -= 1
+      if (depth === 0 && openEnd >= 0 && openStart >= 0) {
+        result.push({
+          attrs: openAttrs,
+          inner: xml.slice(openEnd, match.index)
+        })
+        openStart = -1
+        openEnd = -1
+        openAttrs = ''
+      }
+    }
+
+    return result
+  }
+
+  const parseChatRecordDataItem = (body: string, attrs = ''): ChatRecordItem | null => {
+    const datatypeMatch = /datatype\s*=\s*["']?(\d+)["']?/i.exec(attrs || '')
+    const datatype = datatypeMatch ? parseInt(datatypeMatch[1], 10) : parseInt(extractXmlValue(body, 'datatype') || '0', 10)
+
+    const sourcename = decodeHtmlEntities(extractXmlValue(body, 'sourcename')) || ''
+    const sourcetime = extractXmlValue(body, 'sourcetime') || ''
+    const sourceheadurl = extractXmlValue(body, 'sourceheadurl') || undefined
+    const datadesc = decodeHtmlEntities(extractXmlValue(body, 'datadesc') || extractXmlValue(body, 'content')) || undefined
+    const datatitle = decodeHtmlEntities(extractXmlValue(body, 'datatitle')) || undefined
+    const fileext = extractXmlValue(body, 'fileext') || undefined
+    const datasize = parseInt(extractXmlValue(body, 'datasize') || '0', 10) || undefined
+    const messageuuid = extractXmlValue(body, 'messageuuid') || undefined
+
+    const dataurl = decodeHtmlEntities(extractXmlValue(body, 'dataurl')) || undefined
+    const datathumburl = decodeHtmlEntities(
+      extractXmlValue(body, 'datathumburl') ||
+      extractXmlValue(body, 'thumburl') ||
+      extractXmlValue(body, 'cdnthumburl')
+    ) || undefined
+    const datacdnurl = decodeHtmlEntities(
+      extractXmlValue(body, 'datacdnurl') ||
+      extractXmlValue(body, 'cdnurl') ||
+      extractXmlValue(body, 'cdndataurl')
+    ) || undefined
+    const cdndatakey = decodeHtmlEntities(extractXmlValue(body, 'cdndatakey')) || undefined
+    const cdnthumbkey = decodeHtmlEntities(extractXmlValue(body, 'cdnthumbkey')) || undefined
+    const aeskey = decodeHtmlEntities(extractXmlValue(body, 'aeskey') || extractXmlValue(body, 'qaeskey')) || undefined
+    const md5 = extractXmlValue(body, 'md5') || extractXmlValue(body, 'datamd5') || undefined
+    const fullmd5 = extractXmlValue(body, 'fullmd5') || undefined
+    const thumbfullmd5 = extractXmlValue(body, 'thumbfullmd5') || undefined
+    const srcMsgLocalid = parseInt(extractXmlValue(body, 'srcMsgLocalid') || '0', 10) || undefined
+    const imgheight = parseInt(extractXmlValue(body, 'imgheight') || '0', 10) || undefined
+    const imgwidth = parseInt(extractXmlValue(body, 'imgwidth') || '0', 10) || undefined
+    const duration = parseInt(extractXmlValue(body, 'duration') || '0', 10) || undefined
+    const nestedRecordXml = extractXmlValue(body, 'recordxml') || undefined
+    const chatRecordTitle = decodeHtmlEntities(
+      (nestedRecordXml && extractXmlValue(nestedRecordXml, 'title')) ||
+      datatitle ||
+      ''
+    ) || undefined
+    const chatRecordDesc = decodeHtmlEntities(
+      (nestedRecordXml && extractXmlValue(nestedRecordXml, 'desc')) ||
+      datadesc ||
+      ''
+    ) || undefined
+    const chatRecordList =
+      datatype === 17 && nestedRecordXml
+        ? parseChatRecordContainer(nestedRecordXml)
+        : undefined
+
+    if (!(datatype || sourcename || datadesc || datatitle || messageuuid || srcMsgLocalid)) return null
+
+    return {
+      datatype: Number.isFinite(datatype) ? datatype : 0,
+      sourcename,
+      sourcetime,
+      sourceheadurl,
+      datadesc,
+      datatitle,
+      fileext,
+      datasize,
+      messageuuid,
+      dataurl,
+      datathumburl,
+      datacdnurl,
+      cdndatakey,
+      cdnthumbkey,
+      aeskey,
+      md5,
+      fullmd5,
+      thumbfullmd5,
+      srcMsgLocalid,
+      imgheight,
+      imgwidth,
+      duration,
+      chatRecordTitle,
+      chatRecordDesc,
+      chatRecordList
+    }
+  }
+
+  const parseChatRecordContainer = (containerXml: string): ChatRecordItem[] => {
+    const source = containerXml || ''
+    if (!source) return []
+
+    const segments: string[] = [source]
+    const decodedContainer = decodeHtmlEntities(source)
+    if (decodedContainer && decodedContainer !== source) {
+      segments.push(decodedContainer)
+    }
+
+    const cdataRegex = /<!\[CDATA\[([\s\S]*?)\]\]>/g
+    let cdataMatch: RegExpExecArray | null
+    while ((cdataMatch = cdataRegex.exec(source)) !== null) {
+      const cdataInner = cdataMatch[1] || ''
+      if (!cdataInner) continue
+      segments.push(cdataInner)
+      const decodedInner = decodeHtmlEntities(cdataInner)
+      if (decodedInner && decodedInner !== cdataInner) {
+        segments.push(decodedInner)
+      }
+    }
+
+    const items: ChatRecordItem[] = []
+    const dedupe = new Set<string>()
+    for (const segment of segments) {
+      if (!segment) continue
+      const dataItems = extractTopLevelXmlElements(segment, 'dataitem')
+      for (const dataItem of dataItems) {
+        const item = parseChatRecordDataItem(dataItem.inner || '', dataItem.attrs || '')
+        if (!item) continue
+        const key = `${item.datatype}|${item.sourcename}|${item.sourcetime}|${item.datadesc || ''}|${item.datatitle || ''}|${item.messageuuid || ''}`
+        if (!dedupe.has(key)) {
+          dedupe.add(key)
+          items.push(item)
+        }
+      }
+    }
+
+    if (items.length > 0) return items
+    const fallback = parseChatRecordDataItem(source, '')
+    return fallback ? [fallback] : []
+  }
+
  // 前端兜底解析合并转发聊天记录
  const parseChatHistory = (content: string): ChatRecordItem[] | undefined => {
    try {
-      const type = extractXmlValue(content, 'type')
-      if (type !== '19') return undefined
+      const decodedContent = decodeHtmlEntities(content) || content
+      const type = extractXmlValue(decodedContent, 'type')
+      if (type !== '19' && !decodedContent.includes('<recorditem')) return undefined

-      const match = /<recorditem>[\s\S]*?<!\[CDATA\[([\s\S]*?)\]\]>[\s\S]*?<\/recorditem>/.exec(content)
-      if (!match) return undefined
-
-      const innerXml = match[1]
      const items: ChatRecordItem[] = []
-      const itemRegex = /<dataitem\s+(.*?)>([\s\S]*?)<\/dataitem>/g
-      let itemMatch: RegExpExecArray | null
+      const dedupe = new Set<string>()
+      const recordItemRegex = /<recorditem>([\s\S]*?)<\/recorditem>/gi
+      let recordItemMatch: RegExpExecArray | null
+      while ((recordItemMatch = recordItemRegex.exec(decodedContent)) !== null) {
+        const parsedItems = parseChatRecordContainer(recordItemMatch[1] || '')
+        for (const item of parsedItems) {
+          const key = `${item.datatype}|${item.sourcename}|${item.sourcetime}|${item.datadesc || ''}|${item.datatitle || ''}|${item.messageuuid || ''}`
+          if (!dedupe.has(key)) {
+            dedupe.add(key)
+            items.push(item)
+          }
+        }
+      }

-      while ((itemMatch = itemRegex.exec(innerXml)) !== null) {
-        const attrs = itemMatch[1]
-        const body = itemMatch[2]
-
-        const datatypeMatch = /datatype="(\d+)"/.exec(attrs)
-        const datatype = datatypeMatch ? parseInt(datatypeMatch[1]) : 0
-
-        const sourcename = extractXmlValue(body, 'sourcename')
-        const sourcetime = extractXmlValue(body, 'sourcetime')
-        const sourceheadurl = extractXmlValue(body, 'sourceheadurl')
-        const datadesc = extractXmlValue(body, 'datadesc')
-        const datatitle = extractXmlValue(body, 'datatitle')
-        const fileext = extractXmlValue(body, 'fileext')
-        const datasize = parseInt(extractXmlValue(body, 'datasize') || '0')
-        const messageuuid = extractXmlValue(body, 'messageuuid')
-
-        const dataurl = extractXmlValue(body, 'dataurl')
-        const datathumburl = extractXmlValue(body, 'datathumburl') || extractXmlValue(body, 'thumburl')
-        const datacdnurl = extractXmlValue(body, 'datacdnurl') || extractXmlValue(body, 'cdnurl')
-        const aeskey = extractXmlValue(body, 'aeskey') || extractXmlValue(body, 'qaeskey')
-        const md5 = extractXmlValue(body, 'md5') || extractXmlValue(body, 'datamd5')
-        const imgheight = parseInt(extractXmlValue(body, 'imgheight') || '0')
-        const imgwidth = parseInt(extractXmlValue(body, 'imgwidth') || '0')
-        const duration = parseInt(extractXmlValue(body, 'duration') || '0')
-
-        items.push({
-          datatype,
-          sourcename,
-          sourcetime,
-          sourceheadurl,
-          datadesc: decodeHtmlEntities(datadesc),
-          datatitle: decodeHtmlEntities(datatitle),
-          fileext,
-          datasize,
-          messageuuid,
-          dataurl: decodeHtmlEntities(dataurl),
-          datathumburl: decodeHtmlEntities(datathumburl),
-          datacdnurl: decodeHtmlEntities(datacdnurl),
-          aeskey: decodeHtmlEntities(aeskey),
-          md5,
-          imgheight,
-          imgwidth,
-          duration
-        })
+      if (items.length === 0 && decodedContent.includes('<dataitem')) {
+        const parsedItems = parseChatRecordContainer(decodedContent)
+        for (const item of parsedItems) {
+          const key = `${item.datatype}|${item.sourcename}|${item.sourcetime}|${item.datadesc || ''}|${item.datatitle || ''}|${item.messageuuid || ''}`
+          if (!dedupe.has(key)) {
+            dedupe.add(key)
+            items.push(item)
+          }
+        }
      }

      return items.length > 0 ? items : undefined
@@ -115,9 +266,34 @@ export default function ChatHistoryPage() {
    return { sid: '', mid: '' }
  }

+  const ids = getIds()
+  const payloadId = params.payloadId || (() => {
+    const match = /^\/chat-history-inline\/([^/]+)/.exec(location.pathname)
+    return match ? match[1] : ''
+  })()
+
  useEffect(() => {
    const loadData = async () => {
-      const { sid, mid } = getIds()
+      if (payloadId) {
+        try {
+          const result = await window.electronAPI.window.getChatHistoryPayload(payloadId)
+          if (result.success && result.payload) {
+            setRecordList(Array.isArray(result.payload.recordList) ? result.payload.recordList : [])
+            setTitle(result.payload.title || '聊天记录')
+            setError('')
+          } else {
+            setError(result.error || '聊天记录载荷不存在')
+          }
+        } catch (e) {
+          console.error(e)
+          setError('加载详情失败')
+        } finally {
+          setLoading(false)
+        }
+        return
+      }
+
+      const { sid, mid } = ids
      if (!sid || !mid) {
        setError('无效的聊天记录链接')
        setLoading(false)
@@ -153,7 +329,7 @@ export default function ChatHistoryPage() {
      }
    }
    loadData()
-  }, [params.sessionId, params.messageId, location.pathname])
+  }, [ids.mid, ids.sid, location.pathname, payloadId])

  return (
    <div className="chat-history-page">
@@ -168,7 +344,7 @@ export default function ChatHistoryPage() {
        ) : (
          recordList.map((item, i) => (
            <ErrorBoundary key={i} fallback={<div className="history-item error-item">消息解析失败</div>}>
-              <HistoryItem item={item} />
+              <HistoryItem item={item} sessionId={ids.sid} />
            </ErrorBoundary>
          ))
        )}
@@ -177,9 +353,198 @@ export default function ChatHistoryPage() {
  )
 }

-function HistoryItem({ item }: { item: ChatRecordItem }) {
-  const [imageError, setImageError] = useState(false)
-  
+function detectImageMimeFromBase64(base64: string): string {
+  try {
+    const head = window.atob(base64.slice(0, 48))
+    const bytes = new Uint8Array(head.length)
+    for (let i = 0; i < head.length; i++) {
+      bytes[i] = head.charCodeAt(i)
+    }
+    if (bytes[0] === 0x47 && bytes[1] === 0x49 && bytes[2] === 0x46) return 'image/gif'
+    if (bytes[0] === 0x89 && bytes[1] === 0x50 && bytes[2] === 0x4E && bytes[3] === 0x47) return 'image/png'
+    if (bytes[0] === 0xFF && bytes[1] === 0xD8 && bytes[2] === 0xFF) return 'image/jpeg'
+    if (
+      bytes[0] === 0x52 && bytes[1] === 0x49 && bytes[2] === 0x46 && bytes[3] === 0x46 &&
+      bytes[8] === 0x57 && bytes[9] === 0x45 && bytes[10] === 0x42 && bytes[11] === 0x50
+    ) {
+      return 'image/webp'
+    }
+  } catch { }
+  return 'image/jpeg'
+}
+
+function normalizeChatRecordText(value?: string): string {
+  return String(value || '')
+    .replace(/\u00a0/g, ' ')
+    .replace(/\s+/g, ' ')
+    .trim()
+}
+
+function getChatRecordPreviewText(item: ChatRecordItem): string {
+  const text = normalizeChatRecordText(item.datadesc) || normalizeChatRecordText(item.datatitle)
+  if (item.datatype === 17) {
+    return normalizeChatRecordText(item.chatRecordTitle) || normalizeChatRecordText(item.datatitle) || '聊天记录'
+  }
+  if (item.datatype === 2 || item.datatype === 3) return '[图片]'
+  if (item.datatype === 43) return '[视频]'
+  if (item.datatype === 34) return '[语音]'
+  if (item.datatype === 47) return '[表情]'
+  return text || '[媒体消息]'
+}
+
+function ForwardedImage({ item, sessionId }: { item: ChatRecordItem; sessionId: string }) {
+  const cacheKey =
+    item.thumbfullmd5 ||
+    item.fullmd5 ||
+    item.md5 ||
+    item.messageuuid ||
+    item.datathumburl ||
+    item.datacdnurl ||
+    item.dataurl ||
+    `local:${item.srcMsgLocalid || 0}`
+  const [localPath, setLocalPath] = useState<string | undefined>(() => forwardedImageCache.get(cacheKey))
+  const [loading, setLoading] = useState(!forwardedImageCache.has(cacheKey))
+  const [error, setError] = useState(false)
+
+  useEffect(() => {
+    if (localPath || error) return
+
+    let cancelled = false
+    const candidateMd5s = Array.from(new Set([
+      item.thumbfullmd5,
+      item.fullmd5,
+      item.md5
+    ].filter(Boolean) as string[]))
+
+    const load = async () => {
+      setLoading(true)
+
+      for (const imageMd5 of candidateMd5s) {
+        const cached = await window.electronAPI.image.resolveCache({ imageMd5 })
+        if (cached.success && cached.localPath) {
+          if (!cancelled) {
+            forwardedImageCache.set(cacheKey, cached.localPath)
+            setLocalPath(cached.localPath)
+            setLoading(false)
+          }
+          return
+        }
+      }
+
+      for (const imageMd5 of candidateMd5s) {
+        const decrypted = await window.electronAPI.image.decrypt({ imageMd5 })
+        if (decrypted.success && decrypted.localPath) {
+          if (!cancelled) {
+            forwardedImageCache.set(cacheKey, decrypted.localPath)
+            setLocalPath(decrypted.localPath)
+            setLoading(false)
+          }
+          return
+        }
+      }
+
+      if (sessionId && item.srcMsgLocalid) {
+        const fallback = await window.electronAPI.chat.getImageData(sessionId, String(item.srcMsgLocalid))
+        if (fallback.success && fallback.data) {
+          const dataUrl = `data:${detectImageMimeFromBase64(fallback.data)};base64,${fallback.data}`
+          if (!cancelled) {
+            forwardedImageCache.set(cacheKey, dataUrl)
+            setLocalPath(dataUrl)
+            setLoading(false)
+          }
+          return
+        }
+      }
+
+      const remoteSrc = item.dataurl || item.datathumburl || item.datacdnurl
+      if (remoteSrc && /^https?:\/\//i.test(remoteSrc)) {
+        if (!cancelled) {
+          setLocalPath(remoteSrc)
+          setLoading(false)
+        }
+        return
+      }
+
+      if (!cancelled) {
+        setError(true)
+        setLoading(false)
+      }
+    }
+
+    load().catch(() => {
+      if (!cancelled) {
+        setError(true)
+        setLoading(false)
+      }
+    })
+
+    return () => {
+      cancelled = true
+    }
+  }, [cacheKey, error, item.dataurl, item.datacdnurl, item.datathumburl, item.fullmd5, item.md5, item.messageuuid, item.srcMsgLocalid, item.thumbfullmd5, localPath, sessionId])
+
+  if (localPath) {
+    return (
+      <div className="media-content">
+        <img src={localPath} alt="图片" referrerPolicy="no-referrer" />
+      </div>
+    )
+  }
+
+  if (loading) {
+    return <div className="media-tip">图片加载中...</div>
+  }
+
+  if (error) {
+    return <div className="media-tip">图片未索引到本地缓存</div>
+  }
+
+  return <div className="media-placeholder">[图片]</div>
+}
+
+function NestedChatRecordCard({ item, sessionId }: { item: ChatRecordItem; sessionId: string }) {
+  const previewItems = (item.chatRecordList || []).slice(0, 3)
+  const title = normalizeChatRecordText(item.chatRecordTitle) || normalizeChatRecordText(item.datatitle) || '聊天记录'
+  const description = normalizeChatRecordText(item.chatRecordDesc) || normalizeChatRecordText(item.datadesc)
+  const canOpen = Boolean(sessionId && item.chatRecordList && item.chatRecordList.length > 0)
+
+  const handleOpen = () => {
+    if (!canOpen) return
+    window.electronAPI.window.openChatHistoryPayloadWindow({
+      sessionId,
+      title,
+      recordList: item.chatRecordList || []
+    }).catch(() => { })
+  }
+
+  return (
+    <button
+      type="button"
+      className={`nested-chat-record-card${canOpen ? ' clickable' : ''}`}
+      onClick={handleOpen}
+      disabled={!canOpen}
+      title={canOpen ? '点击打开聊天记录' : undefined}
+    >
+      <div className="nested-chat-record-title">{title}</div>
+      {previewItems.length > 0 ? (
+        <div className="nested-chat-record-list">
+          {previewItems.map((previewItem, index) => (
+            <div key={`${previewItem.messageuuid || previewItem.srcMsgLocalid || index}`} className="nested-chat-record-line">
+              {getChatRecordPreviewText(previewItem)}
+            </div>
+          ))}
+        </div>
+      ) : description ? (
+        <div className="nested-chat-record-list">
+          <div className="nested-chat-record-line">{description}</div>
+        </div>
+      ) : null}
+      <div className="nested-chat-record-footer">聊天记录</div>
+    </button>
+  )
+}
+
+function HistoryItem({ item, sessionId }: { item: ChatRecordItem; sessionId: string }) {
  // sourcetime 在合并转发里有两种格式：
  // 1) 时间戳（秒） 2) 已格式化的字符串 "2026-01-21 09:56:46"
  let time = ''
@@ -191,31 +556,18 @@ function HistoryItem({ item }: { item: ChatRecordItem }) {
    }
  }

+  const senderDisplayName = item.sourcename ?? '未知发送者'
+
  const renderContent = () => {
    if (item.datatype === 1) {
      // 文本消息
      return <div className="text-content">{item.datadesc || ''}</div>
    }
-    if (item.datatype === 3) {
-      // 图片
-      const src = item.datathumburl || item.datacdnurl
-      if (src) {
-        return (
-          <div className="media-content">
-            {imageError ? (
-              <div className="media-tip">图片无法加载</div>
-            ) : (
-              <img 
-                src={src} 
-                alt="图片" 
-                referrerPolicy="no-referrer" 
-                onError={() => setImageError(true)} 
-              />
-            )}
-          </div>
-        )
-      }
-      return <div className="media-placeholder">[图片]</div>
+    if (item.datatype === 2 || item.datatype === 3) {
+      return <ForwardedImage item={item} sessionId={sessionId} />
+    }
+    if (item.datatype === 17) {
+      return <NestedChatRecordCard item={item} sessionId={sessionId} />
    }
    if (item.datatype === 43) {
      return <div className="media-placeholder">[视频] {item.datatitle}</div>
@@ -229,21 +581,20 @@ function HistoryItem({ item }: { item: ChatRecordItem }) {

  return (
    <div className="history-item">
-      <div className="avatar">
-        {item.sourceheadurl ? (
-          <img src={item.sourceheadurl} alt="" referrerPolicy="no-referrer" />
-        ) : (
-          <div className="avatar-placeholder">
-            {item.sourcename?.slice(0, 1)}
-          </div>
-        )}
+      <div className="history-avatar">
+        <Avatar
+          src={item.sourceheadurl}
+          name={senderDisplayName}
+          size={36}
+          className="avatar-inner"
+        />
      </div>
      <div className="content-wrapper">
        <div className="header">
-          <span className="sender">{item.sourcename || '未知发送者'}</span>
+          <span className="sender">{senderDisplayName}</span>
          <span className="time">{time}</span>
        </div>
-        <div className={`bubble ${item.datatype === 3 ? 'image-bubble' : ''}`}>
+        <div className={`bubble ${(item.datatype === 2 || item.datatype === 3) ? 'image-bubble' : ''}`}>
          {renderContent()}
        </div>
      </div>
--- a/src/pages/ChatPage.scss
+++ b/src/pages/ChatPage.scss
@@ -3307,13 +3307,89 @@

 // 聊天记录消息 (合并转发)
 .chat-record-message {
-  background: var(--card-inner-bg) !important;
-  border: 1px solid var(--border-color) !important;
-  transition: opacity 0.2s ease;
+  width: 300px;
+  min-width: 240px;
+  max-width: 336px;
+  background: color-mix(in srgb, var(--bg-secondary) 97%, #f5f7fb);
+  border: 1px solid var(--border-color);
+  border-radius: 16px;
+  overflow: hidden;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
+  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  cursor: pointer;
+  padding: 0;

  &:hover {
-    opacity: 0.85;
+    transform: translateY(-1px);
+    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
+    border-color: color-mix(in srgb, var(--primary) 28%, var(--border-color));
+  }
+
+  .chat-record-title {
+    padding: 13px 16px 6px;
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--text-primary);
+    line-height: 1.45;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  .chat-record-meta-line {
+    padding: 0 16px 10px;
+    font-size: 11px;
+    color: var(--text-tertiary);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .chat-record-list {
+    padding: 0 16px 11px;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    max-height: 92px;
+    overflow: hidden;
+    border-bottom: 1px solid var(--border-color);
+  }
+
+  .chat-record-item {
+    font-size: 12px;
+    line-height: 1.45;
+    color: var(--text-secondary);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .source-name {
+    color: currentColor;
+    opacity: 0.92;
+    font-weight: 500;
+    margin-right: 4px;
+  }
+
+  .chat-record-more {
+    font-size: 11px;
+    color: var(--text-tertiary);
+  }
+
+  .chat-record-desc {
+    padding: 0 16px 11px;
+    font-size: 12px;
+    line-height: 1.45;
+    color: var(--text-secondary);
+    border-bottom: 1px solid var(--border-color);
+  }
+
+  .chat-record-footer {
+    padding: 8px 16px 10px;
+    font-size: 11px;
+    color: var(--text-tertiary);
  }
 }

@@ -3387,75 +3463,6 @@
  }
 }

-// 聊天记录消息 - 复用 link-message 基础样式
-.chat-record-message {
-  cursor: pointer;
-
-  .link-header {
-    padding-bottom: 4px;
-  }
-
-  .chat-record-preview {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-    flex: 1;
-    min-width: 0;
-  }
-
-  .chat-record-meta-line {
-    font-size: 11px;
-    color: var(--text-tertiary);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .chat-record-list {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-    max-height: 70px;
-    overflow: hidden;
-  }
-
-  .chat-record-item {
-    font-size: 12px;
-    color: var(--text-secondary);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .source-name {
-    color: var(--text-primary);
-    font-weight: 500;
-    margin-right: 4px;
-  }
-
-  .chat-record-more {
-    font-size: 12px;
-    color: var(--primary);
-  }
-
-  .chat-record-desc {
-    font-size: 12px;
-    color: var(--text-secondary);
-  }
-
-  .chat-record-icon {
-    width: 40px;
-    height: 40px;
-    border-radius: 10px;
-    background: var(--primary-gradient);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: #fff;
-    flex-shrink: 0;
-  }
-}
-
 // 小程序消息
 .miniapp-message {
  display: flex;
@@ -3552,23 +3559,18 @@
 .message-bubble.sent {

  .card-message,
-  .chat-record-message,
  .miniapp-message,
  .appmsg-rich-card {
    background: var(--sent-card-bg);

    .card-name,
    .miniapp-title,
-    .source-name,
    .link-title {
      color: white;
    }

    .card-label,
    .miniapp-label,
-    .chat-record-item,
-    .chat-record-meta-line,
-    .chat-record-desc,
    .link-desc,
    .appmsg-url-line {
      color: rgba(255, 255, 255, 0.8);
@@ -3576,14 +3578,10 @@

    .card-icon,
    .miniapp-icon,
-    .chat-record-icon {
+    .link-thumb-placeholder {
      color: white;
    }

-    .chat-record-more {
-      color: rgba(255, 255, 255, 0.9);
-    }
-
    .appmsg-meta-badge {
      color: rgba(255, 255, 255, 0.92);
      background: rgba(255, 255, 255, 0.12);
@@ -4225,43 +4223,6 @@
  }
 }

-// 聊天记录消息外观
-.chat-record-message {
-  background: var(--card-inner-bg) !important;
-  border: 1px solid var(--border-color);
-  border-radius: 8px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
-
-  &:hover {
-    background: var(--bg-hover) !important;
-  }
-
-  .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;
--- a/src/pages/ChatPage.tsx
+++ b/src/pages/ChatPage.tsx
@@ -7,7 +7,7 @@ import { useShallow } from 'zustand/react/shallow'
 import { useChatStore } from '../stores/chatStore'
 import { useBatchTranscribeStore, type BatchVoiceTaskType } from '../stores/batchTranscribeStore'
 import { useBatchImageDecryptStore } from '../stores/batchImageDecryptStore'
-import type { ChatSession, Message } from '../types/models'
+import type { ChatRecordItem, ChatSession, Message } from '../types/models'
 import { getEmojiPath } from 'wechat-emojis'
 import { VoiceTranscribeDialog } from '../components/VoiceTranscribeDialog'
 import { LivePhotoIcon } from '../components/LivePhotoIcon'
@@ -114,6 +114,44 @@ function flattenGlobalMsgSearchSessionMap(map: Map<string, GlobalMsgSearchResult
  return sortMessagesByCreateTimeDesc(all)
 }

+function normalizeChatRecordText(value?: string): string {
+  return String(value || '')
+    .replace(/\u00a0/g, ' ')
+    .replace(/\s+/g, ' ')
+    .trim()
+}
+
+function hasRenderableChatRecordName(value?: string): boolean {
+  return value !== undefined && value !== null && String(value).length > 0
+}
+
+function getChatRecordPreviewText(item: ChatRecordItem): string {
+  const text = normalizeChatRecordText(item.datadesc) || normalizeChatRecordText(item.datatitle)
+  if (item.datatype === 17) {
+    return normalizeChatRecordText(item.chatRecordTitle) || normalizeChatRecordText(item.datatitle) || '聊天记录'
+  }
+  if (item.datatype === 2 || item.datatype === 3) return '[媒体消息]'
+  if (item.datatype === 43) return '[视频]'
+  if (item.datatype === 34) return '[语音]'
+  if (item.datatype === 47) return '[表情]'
+  return text || '[媒体消息]'
+}
+
+function buildChatRecordPreviewItems(recordList: ChatRecordItem[], maxVisible = 3): ChatRecordItem[] {
+  if (recordList.length <= maxVisible) return recordList.slice(0, maxVisible)
+  const firstNestedIndex = recordList.findIndex(item => item.datatype === 17)
+  if (firstNestedIndex < 0 || firstNestedIndex < maxVisible) {
+    return recordList.slice(0, maxVisible)
+  }
+  if (maxVisible <= 1) {
+    return [recordList[firstNestedIndex]]
+  }
+  return [
+    ...recordList.slice(0, maxVisible - 1),
+    recordList[firstNestedIndex]
+  ]
+}
+
 function composeGlobalMsgSearchResults(
  seedMap: Map<string, GlobalMsgSearchResult[]>,
  authoritativeMap: Map<string, GlobalMsgSearchResult[]>
@@ -9000,11 +9038,12 @@ function MessageBubble({
            ? `共 ${recordList.length} 条聊天记录`
            : desc || '聊天记录'

-        const previewItems = recordList.slice(0, 4)
+        const previewItems = buildChatRecordPreviewItems(recordList, 3)
+        const remainingCount = Math.max(0, recordList.length - previewItems.length)

        return (
          <div
-            className="link-message chat-record-message"
+            className="chat-record-message"
            onClick={(e) => {
              e.stopPropagation()
              // 打开聊天记录窗口
@@ -9012,42 +9051,32 @@ function MessageBubble({
            }}
            title="点击查看详细聊天记录"
          >
-            <div className="link-header">
-              <div className="link-title" title={displayTitle}>
-                {displayTitle}
-              </div>
+            <div className="chat-record-title" title={displayTitle}>
+              {displayTitle}
            </div>
-            <div className="link-body">
-              <div className="chat-record-preview">
-                {previewItems.length > 0 ? (
-                  <>
-                    <div className="chat-record-meta-line" title={metaText}>
-                      {metaText}
-                    </div>
-                    <div className="chat-record-list">
-                      {previewItems.map((item, i) => (
-                        <div key={i} className="chat-record-item">
-                          <span className="source-name">
-                            {item.sourcename ? `${item.sourcename}: ` : ''}
-                          </span>
-                          {item.datadesc || item.datatitle || '[媒体消息]'}
-                        </div>
-                      ))}
-                      {recordList.length > previewItems.length && (
-                        <div className="chat-record-more">还有 {recordList.length - previewItems.length} 条…</div>
-                      )}
-                    </div>
-                  </>
-                ) : (
-                  <div className="chat-record-desc">
-                    {desc || '点击打开查看完整聊天记录'}
+            <div className="chat-record-meta-line" title={metaText}>
+              {metaText}
+            </div>
+            {previewItems.length > 0 ? (
+              <div className="chat-record-list">
+                {previewItems.map((item, i) => (
+                  <div key={i} className="chat-record-item">
+                    <span className="source-name">
+                      {hasRenderableChatRecordName(item.sourcename) ? `${item.sourcename}: ` : ''}
+                    </span>
+                    {getChatRecordPreviewText(item)}
                  </div>
+                ))}
+                {remainingCount > 0 && (
+                  <div className="chat-record-more">还有 {remainingCount} 条…</div>
                )}
              </div>
-              <div className="chat-record-icon">
-                <MessageSquare size={18} />
+            ) : (
+              <div className="chat-record-desc">
+                {desc || '点击打开查看完整聊天记录'}
              </div>
-            </div>
+            )}
+            <div className="chat-record-footer">聊天记录</div>
          </div>
        )
      }