Merge pull request #613 from H3CoF6/dev

feat: 公众号服务号内容单独解析
2026-04-02 23:15:59 +00:00 · 2026-04-03 06:00:43 +08:00
parent cdd17d919e ea4fff5b10
commit c421ca7f2f
9 changed files with 974 additions and 31 deletions
--- a/electron/main.ts
+++ b/electron/main.ts
@@ -30,7 +30,7 @@ import { cloudControlService } from './services/cloudControlService'
 import { destroyNotificationWindow, registerNotificationHandlers, showNotification } from './windows/notificationWindow'
 import { httpService } from './services/httpService'
 import { messagePushService } from './services/messagePushService'
-
+import { bizService } from './services/bizService'

 // 配置自动更新
 autoUpdater.autoDownload = false
@@ -1152,6 +1152,7 @@ const removeMatchedEntriesInDir = async (
 // 注册 IPC 处理器
 function registerIpcHandlers() {
  registerNotificationHandlers()
+  bizService.registerHandlers()
  // 配置相关
  ipcMain.handle('config:get', async (_, key: string) => {
    return configService?.get(key as any)
--- a/electron/preload.ts
+++ b/electron/preload.ts
@@ -413,6 +413,14 @@ contextBridge.exposeInMainWorld('electronAPI', {
    downloadEmoji: (params: { url: string; encryptUrl?: string; aesKey?: string }) => ipcRenderer.invoke('sns:downloadEmoji', params)
  },

+  biz: {
+    listAccounts: (account?: string) => ipcRenderer.invoke('biz:listAccounts', account),
+    listMessages: (username: string, account?: string, limit?: number, offset?: number) =>
+        ipcRenderer.invoke('biz:listMessages', username, account, limit, offset),
+    listPayRecords: (account?: string, limit?: number, offset?: number) =>
+        ipcRenderer.invoke('biz:listPayRecords', account, limit, offset)
+  },
+

  // 数据收集
  cloud: {
--- a/electron/services/bizService.ts
+++ b/electron/services/bizService.ts
@@ -0,0 +1,221 @@
+import { join } from 'path'
+import { readdirSync, existsSync } from 'fs'
+import { wcdbService } from './wcdbService'
+import { ConfigService } from './config'
+import { chatService, Message } from './chatService'
+import { ipcMain } from 'electron'
+import { createHash } from 'crypto'
+
+export interface BizAccount {
+  username: string
+  name: string
+  avatar: string
+  type: number
+  last_time: number
+  formatted_last_time: string
+}
+
+export interface BizMessage {
+  local_id: number
+  create_time: number
+  title: string
+  des: string
+  url: string
+  cover: string
+  content_list: any[]
+}
+
+export interface BizPayRecord {
+  local_id: number
+  create_time: number
+  title: string
+  description: string
+  merchant_name: string
+  merchant_icon: string
+  timestamp: number
+  formatted_time: string
+}
+
+export class BizService {
+  private configService: ConfigService
+
+  constructor() {
+    this.configService = new ConfigService()
+  }
+
+  private extractXmlValue(xml: string, tagName: string): string {
+    const regex = new RegExp(`<${tagName}>([\\s\\S]*?)</${tagName}>`, 'i')
+    const match = regex.exec(xml)
+    if (match) {
+      return match[1].replace(/<!\[CDATA\[/g, '').replace(/\]\]>/g, '').trim()
+    }
+    return ''
+  }
+
+  private parseBizContentList(xmlStr: string): any[] {
+    if (!xmlStr) return []
+    const contentList: any[] = []
+    try {
+      const itemRegex = /<item>([\s\S]*?)<\/item>/gi
+      let match: RegExpExecArray | null
+      while ((match = itemRegex.exec(xmlStr)) !== null) {
+        const itemXml = match[1]
+        const itemStruct = {
+          title: this.extractXmlValue(itemXml, 'title'),
+          url: this.extractXmlValue(itemXml, 'url'),
+          cover: this.extractXmlValue(itemXml, 'cover') || this.extractXmlValue(itemXml, 'thumburl'),
+          summary: this.extractXmlValue(itemXml, 'summary') || this.extractXmlValue(itemXml, 'digest')
+        }
+        if (itemStruct.title) contentList.push(itemStruct)
+      }
+    } catch (e) { }
+    return contentList
+  }
+
+  private parsePayXml(xmlStr: string): any {
+    if (!xmlStr) return null
+    try {
+      const title = this.extractXmlValue(xmlStr, 'title')
+      const description = this.extractXmlValue(xmlStr, 'des')
+      const merchantName = this.extractXmlValue(xmlStr, 'display_name') || '微信支付'
+      const merchantIcon = this.extractXmlValue(xmlStr, 'icon_url')
+      const pubTime = parseInt(this.extractXmlValue(xmlStr, 'pub_time') || '0')
+      if (!title && !description) return null
+      return { title, description, merchant_name: merchantName, merchant_icon: merchantIcon, timestamp: pubTime }
+    } catch (e) { return null }
+  }
+
+  async listAccounts(account?: string): Promise<BizAccount[]> {
+    try {
+      const contactsResult = await chatService.getContacts({ lite: true })
+      if (!contactsResult.success || !contactsResult.contacts) return []
+
+      const officialContacts = contactsResult.contacts.filter(c => c.type === 'official')
+      const usernames = officialContacts.map(c => c.username)
+      const enrichment = await chatService.enrichSessionsContactInfo(usernames)
+      const contactInfoMap = enrichment.success && enrichment.contacts ? enrichment.contacts : {}
+
+      const root = this.configService.get('dbPath')
+      const myWxid = this.configService.get('myWxid')
+      const accountWxid = account || myWxid
+      if (!root || !accountWxid) return []
+
+      const dbDir = join(root, accountWxid, 'db_storage', 'message')
+      const bizLatestTime: Record<string, number> = {}
+
+      if (existsSync(dbDir)) {
+        const bizDbFiles = readdirSync(dbDir).filter(f => f.startsWith('biz_message') && f.endsWith('.db'))
+        for (const file of bizDbFiles) {
+          const dbPath = join(dbDir, file)
+          const name2idRes = await wcdbService.execQuery('message', dbPath, 'SELECT username FROM Name2Id')
+          if (name2idRes.success && name2idRes.rows) {
+            for (const row of name2idRes.rows) {
+              const uname = row.username || row.user_name
+              if (uname) {
+                const md5 = createHash('md5').update(uname).digest('hex').toLowerCase()
+                const tName = `Msg_${md5}`
+                const timeRes = await wcdbService.execQuery('message', dbPath, `SELECT MAX(create_time) as max_time FROM ${tName}`)
+                if (timeRes.success && timeRes.rows && timeRes.rows[0]?.max_time) {
+                  const t = parseInt(timeRes.rows[0].max_time)
+                  if (!isNaN(t)) bizLatestTime[uname] = Math.max(bizLatestTime[uname] || 0, t)
+                }
+              }
+            }
+          }
+        }
+      }
+
+      const result: BizAccount[] = officialContacts.map(contact => {
+        const uname = contact.username
+        const info = contactInfoMap[uname]
+        const lastTime = bizLatestTime[uname] || 0
+        return {
+          username: uname,
+          name: info?.displayName || contact.displayName || uname,
+          avatar: info?.avatarUrl || '',
+          type: 0,
+          last_time: lastTime,
+          formatted_last_time: lastTime ? new Date(lastTime * 1000).toISOString().split('T')[0] : ''
+        }
+      })
+
+      const contactDbPath = join(root, accountWxid, 'contact.db')
+      if (existsSync(contactDbPath)) {
+        const bizInfoRes = await wcdbService.execQuery('contact', contactDbPath, 'SELECT username, type FROM biz_info')
+        if (bizInfoRes.success && bizInfoRes.rows) {
+          const typeMap: Record<string, number> = {}
+          for (const r of bizInfoRes.rows) typeMap[r.username] = r.type
+          for (const acc of result) if (typeMap[acc.username] !== undefined) acc.type = typeMap[acc.username]
+        }
+      }
+
+      return result
+        .filter(acc => !acc.name.includes('朋友圈广告'))
+        .sort((a, b) => {
+          if (a.username === 'gh_3dfda90e39d6') return -1
+          if (b.username === 'gh_3dfda90e39d6') return 1
+          return b.last_time - a.last_time
+        })
+    } catch (e) { return [] }
+  }
+
+  async listMessages(username: string, account?: string, limit: number = 20, offset: number = 0): Promise<BizMessage[]> {
+    try {
+      // 仅保留核心路径：利用 chatService 的自动路由能力
+      const res = await chatService.getMessages(username, offset, limit)
+      if (!res.success || !res.messages) return []
+
+      return res.messages.map(msg => {
+        const bizMsg: BizMessage = {
+          local_id: msg.localId,
+          create_time: msg.createTime,
+          title: msg.linkTitle || msg.parsedContent || '',
+          des: msg.appMsgDesc || '',
+          url: msg.linkUrl || '',
+          cover: msg.linkThumb || msg.appMsgThumbUrl || '',
+          content_list: []
+        }
+        if (msg.rawContent) {
+          bizMsg.content_list = this.parseBizContentList(msg.rawContent)
+          if (bizMsg.content_list.length > 0 && !bizMsg.title) {
+            bizMsg.title = bizMsg.content_list[0].title
+            bizMsg.cover = bizMsg.cover || bizMsg.content_list[0].cover
+          }
+        }
+        return bizMsg
+      })
+    } catch (e) { return [] }
+  }
+
+  async listPayRecords(account?: string, limit: number = 20, offset: number = 0): Promise<BizPayRecord[]> {
+    const username = 'gh_3dfda90e39d6'
+    try {
+      const res = await chatService.getMessages(username, offset, limit)
+      if (!res.success || !res.messages) return []
+
+      const records: BizPayRecord[] = []
+      for (const msg of res.messages) {
+        if (!msg.rawContent) continue
+        const parsedData = this.parsePayXml(msg.rawContent)
+        if (parsedData) {
+          records.push({
+            local_id: msg.localId,
+            create_time: msg.createTime,
+            ...parsedData,
+            timestamp: parsedData.timestamp || msg.createTime,
+            formatted_time: new Date((parsedData.timestamp || msg.createTime) * 1000).toLocaleString()
+          })
+        }
+      }
+      return records
+    } catch (e) { return [] }
+  }
+
+  registerHandlers() {
+    ipcMain.handle('biz:listAccounts', (_, account) => this.listAccounts(account))
+    ipcMain.handle('biz:listMessages', (_, username, account, limit, offset) => this.listMessages(username, account, limit, offset))
+    ipcMain.handle('biz:listPayRecords', (_, account, limit, offset) => this.listPayRecords(account, limit, offset))
+  }
+}
+
+export const bizService = new BizService()
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -20,6 +20,7 @@ import ExportPage from './pages/ExportPage'
 import VideoWindow from './pages/VideoWindow'
 import ImageWindow from './pages/ImageWindow'
 import SnsPage from './pages/SnsPage'
+import BizPage from './pages/BizPage'
 import ContactsPage from './pages/ContactsPage'
 import ChatHistoryPage from './pages/ChatHistoryPage'
 import NotificationWindow from './pages/NotificationWindow'
@@ -736,6 +737,7 @@ function App() {

              <Route path="/export" element={<div className="export-route-anchor" aria-hidden="true" />} />
              <Route path="/sns" element={<SnsPage />} />
+              <Route path="/biz" element={<BizPage />} />
              <Route path="/contacts" element={<ContactsPage />} />
              <Route path="/chat-history/:sessionId/:messageId" element={<ChatHistoryPage />} />
              <Route path="/chat-history-inline/:payloadId" element={<ChatHistoryPage />} />
--- a/src/pages/BizPage.scss
+++ b/src/pages/BizPage.scss
@@ -0,0 +1,345 @@
+.biz-account-list {
+  flex: 1;
+  overflow-y: auto;
+  background-color: var(--bg-secondary); // 对齐会话列表背景
+
+  .biz-loading {
+    padding: 20px;
+    text-align: center;
+    font-size: 12px;
+    color: var(--text-tertiary);
+  }
+
+  .biz-account-item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px 16px;
+    cursor: pointer;
+    transition: all 0.2s;
+    border-bottom: 1px solid var(--border-color);
+
+    &:hover {
+      background-color: var(--bg-hover);
+    }
+
+    &.active {
+      background-color: var(--primary-light) !important;
+      border-left: 3px solid var(--primary);
+      padding-left: 13px; // 补偿 border-left
+    }
+
+    &.pay-account {
+      background-color: var(--bg-primary);
+      &.active { 
+        background-color: var(--primary-light) !important;
+        border-left: 3px solid var(--primary);
+      }
+    }
+
+    .biz-avatar {
+      width: 48px;
+      height: 48px;
+      border-radius: 8px; // 对齐会话列表头像圆角
+      object-fit: cover;
+      flex-shrink: 0;
+      background-color: var(--bg-tertiary);
+    }
+
+    .biz-info {
+      flex: 1;
+      min-width: 0;
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+
+      .biz-info-top {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .biz-name {
+          font-size: 14px;
+          font-weight: 500;
+          color: var(--text-primary);
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+
+        .biz-time {
+          font-size: 11px;
+          color: var(--text-tertiary);
+          flex-shrink: 0;
+        }
+      }
+
+      .biz-badge {
+        font-size: 10px;
+        padding: 1px 6px;
+        border-radius: 4px;
+        width: fit-content;
+        margin-top: 2px;
+
+        &.type-service { color: #07c160; background: rgba(7, 193, 96, 0.1); }
+        &.type-sub { color: var(--primary); background: var(--primary-light); }
+        &.type-enterprise { color: #f5222d; background: rgba(245, 34, 45, 0.1); }
+        &.type-unknown { color: var(--text-tertiary); background: var(--bg-tertiary); }
+      }
+    }
+  }
+}
+
+.biz-main {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--bg-secondary); // 对齐聊天页背景
+
+  .main-header {
+    height: 56px;
+    padding: 0 20px;
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid var(--border-color);
+    background-color: var(--card-bg);
+    flex-shrink: 0;
+
+    h2 {
+      font-size: 16px;
+      font-weight: 600;
+      color: var(--text-primary);
+    }
+  }
+
+  .message-container {
+    flex: 1;
+    overflow-y: auto;
+    padding: 24px 16px;
+    background: var(--chat-pattern);
+    background-color: var(--bg-tertiary); // 对齐聊天背景色
+
+    .messages-wrapper {
+      width: 100%;
+      max-width: 600px;
+      margin: 0 auto;
+      display: flex;
+      flex-direction: column;
+      gap: 24px;
+    }
+  }
+
+  // 占位状态：对齐 Chat 页面风格
+  .biz-no-record-container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 60px 20px;
+    text-align: center;
+    background: var(--bg-tertiary);
+
+    .no-record-icon {
+      width: 64px;
+      height: 64px;
+      border-radius: 50%;
+      background-color: var(--bg-secondary);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 20px;
+      color: var(--text-tertiary);
+      opacity: 0.5;
+
+      svg { width: 32px; height: 32px; }
+    }
+
+    h3 {
+      font-size: 16px;
+      font-weight: 500;
+      color: var(--text-primary);
+      margin-bottom: 8px;
+    }
+
+    p {
+      font-size: 13px;
+      color: var(--text-secondary);
+      max-width: 280px;
+      line-height: 1.5;
+    }
+  }
+
+  .biz-loading-more {
+    text-align: center;
+    padding: 20px;
+    font-size: 12px;
+    color: var(--text-tertiary);
+  }
+
+  .pay-card {
+    background-color: var(--card-bg);
+    border: 1px solid var(--border-color);
+    border-radius: 12px;
+    padding: 20px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+
+    .pay-header {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 13px;
+      color: var(--text-tertiary);
+      margin-bottom: 20px;
+
+      .pay-icon {
+        width: 24px;
+        height: 24px;
+        border-radius: 50%;
+        object-fit: cover;
+      }
+      .pay-icon-placeholder {
+        width: 24px;
+        height: 24px;
+        border-radius: 50%;
+        background-color: #07c160;
+        color: white;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 12px;
+      }
+    }
+
+    .pay-title {
+      text-align: center;
+      font-size: 22px;
+      font-weight: 500;
+      color: var(--text-primary);
+      margin-bottom: 24px;
+    }
+
+    .pay-desc {
+      font-size: 13px;
+      line-height: 1.6;
+      color: var(--text-secondary);
+      white-space: pre-wrap;
+    }
+
+    .pay-footer {
+      margin-top: 16px;
+      padding-top: 12px;
+      border-top: 1px solid var(--border-color);
+      font-size: 12px;
+      color: var(--text-tertiary);
+      text-align: right;
+    }
+  }
+
+  .article-card {
+    background-color: var(--card-bg);
+    border: 1px solid var(--border-color);
+    border-radius: 12px;
+    overflow: hidden;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+
+    .main-article {
+      position: relative;
+      cursor: pointer;
+
+      .article-cover {
+        width: 100%;
+        height: 220px;
+        object-fit: cover;
+        background-color: var(--bg-tertiary);
+      }
+
+      .article-overlay {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        padding: 16px;
+        background: linear-gradient(transparent, rgba(0,0,0,0.8));
+
+        .article-title {
+          color: white;
+          font-size: 17px;
+          font-weight: 500;
+          line-height: 1.4;
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+          overflow: hidden;
+        }
+      }
+    }
+
+    .article-digest {
+      padding: 12px 16px;
+      font-size: 14px;
+      color: var(--text-secondary);
+      border-bottom: 1px solid var(--border-color);
+    }
+
+    .sub-articles {
+      .sub-item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 16px;
+        border-top: 1px solid var(--border-color);
+        cursor: pointer;
+        
+        &:hover { background-color: var(--bg-hover); }
+
+        .sub-title {
+          flex: 1;
+          font-size: 15px;
+          color: var(--text-primary);
+          padding-right: 12px;
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+          overflow: hidden;
+        }
+
+        .sub-cover {
+          width: 48px;
+          height: 48px;
+          border-radius: 4px;
+          object-fit: cover;
+          flex-shrink: 0;
+          border: 1px solid var(--border-color);
+        }
+      }
+    }
+  }
+}
+
+.biz-empty-state {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  height: 100%;
+  background: var(--bg-tertiary); // 对齐 Chat 页面空白背景
+
+  .empty-icon {
+    width: 80px;
+    height: 80px;
+    margin-bottom: 20px;
+    border-radius: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--bg-secondary);
+    color: var(--text-tertiary);
+
+    svg { width: 40px; height: 40px; }
+  }
+
+  p { color: var(--text-tertiary); font-size: 14px; }
+}
--- a/src/pages/BizPage.tsx
+++ b/src/pages/BizPage.tsx
@@ -0,0 +1,261 @@
+import React, { useState, useEffect, useMemo, useRef } from 'react';
+import { useThemeStore } from '../stores/themeStore';
+import { Newspaper, MessageSquareOff } from 'lucide-react';
+import './BizPage.scss';
+
+export interface BizAccount {
+  username: string;
+  name: string;
+  avatar: string;
+  type: number;
+  last_time: number;
+  formatted_last_time: string;
+}
+
+export const BizAccountList: React.FC<{
+  onSelect: (account: BizAccount) => void;
+  selectedUsername?: string;
+  searchKeyword?: string;
+}> = ({ onSelect, selectedUsername, searchKeyword }) => {
+  const [accounts, setAccounts] = useState<BizAccount[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  const [myWxid, setMyWxid] = useState<string>('');
+
+  useEffect(() => {
+    const initWxid = async () => {
+      try {
+        const wxid = await window.electronAPI.config.get('myWxid');
+        if (wxid) {
+          setMyWxid(wxid as string);
+        }
+      } catch (e) {
+        console.error("获取 myWxid 失败:", e);
+      }
+    };
+    initWxid().then(_r => { });
+  }, []);
+
+  useEffect(() => {
+    const fetch = async () => {
+      if (!myWxid) {
+        return;
+      }
+
+      setLoading(true);
+      try {
+        const res = await window.electronAPI.biz.listAccounts(myWxid)
+        setAccounts(res || []);
+      } catch (err) {
+        console.error('获取服务号列表失败:', err);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetch().then(_r => { } );
+  }, [myWxid]);
+
+  const filtered = useMemo(() => {
+    if (!searchKeyword) return accounts;
+    const q = searchKeyword.toLowerCase();
+    return accounts.filter(a =>
+        (a.name && a.name.toLowerCase().includes(q)) ||
+        (a.username && a.username.toLowerCase().includes(q))
+    );
+  }, [accounts, searchKeyword]);
+
+  if (loading) return <div className="biz-loading">加载中...</div>;
+
+  return (
+      <div className="biz-account-list">
+        {filtered.map(item => (
+            <div
+                key={item.username}
+                onClick={() => onSelect(item)}
+                className={`biz-account-item ${selectedUsername === item.username ? 'active' : ''} ${item.username === 'gh_3dfda90e39d6' ? 'pay-account' : ''}`}
+            >
+              <img
+                  src={item.avatar}
+                  className="biz-avatar"
+                  alt=""
+              />
+              <div className="biz-info">
+                <div className="biz-info-top">
+                  <span className="biz-name">{item.name || item.username}</span>
+                  <span className="biz-time">{item.formatted_last_time}</span>
+                </div>
+                {item.username === 'gh_3dfda90e39d6' && (
+                    <div className="biz-badge type-service">服务号</div>
+                )}
+
+                {/* 我看了下没有接口获取相关type，如果exec没法用的话确实无能为力，后面再适配吧 */}
+                {/*<div className={`biz-badge ${*/}
+                {/*    item.type === 1 ? 'type-service' :*/}
+                {/*        item.type === 0 ? 'type-sub' :*/}
+                {/*            item.type === 2 ? 'type-enterprise' : 'type-unknown'*/}
+                {/*}`}>*/}
+                {/*  {item.type === 1 ? '服务号' : item.type === 0 ? '订阅号' : item.type === 2 ? '企业号' : '未知'}*/}
+                {/*</div>*/}
+
+              </div>
+            </div>
+        ))}
+      </div>
+  );
+};
+
+// 2. 公众号消息区域组件
+export const BizMessageArea: React.FC<{
+  account: BizAccount | null;
+}> = ({ account }) => {
+  const themeMode = useThemeStore((state) => state.themeMode);
+  const [messages, setMessages] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [offset, setOffset] = useState(0);
+  const [hasMore, setHasMore] = useState(true);
+  const limit = 20;
+  const messageListRef = useRef<HTMLDivElement>(null);
+
+  const [myWxid, setMyWxid] = useState<string>('');
+
+  useEffect(() => {
+    const initWxid = async () => {
+      try {
+        const wxid = await window.electronAPI.config.get('myWxid');
+        if (wxid) {
+          setMyWxid(wxid as string);
+        }
+      } catch (e) { }
+    };
+    initWxid();
+  }, []);
+
+  const isDark = useMemo(() => {
+    if (themeMode === 'dark') return true;
+    if (themeMode === 'system') {
+      return window.matchMedia('(prefers-color-scheme: dark)').matches;
+    }
+    return false;
+  }, [themeMode]);
+
+  useEffect(() => {
+    if (account && myWxid) {
+      setMessages([]);
+      setOffset(0);
+      setHasMore(true);
+      loadMessages(account.username, 0);
+    }
+  }, [account, myWxid]);
+
+  const loadMessages = async (username: string, currentOffset: number) => {
+    if (loading || !myWxid) return;
+
+    setLoading(true);
+    try {
+      let res;
+      if (username === 'gh_3dfda90e39d6') {
+        res = await window.electronAPI.biz.listPayRecords(myWxid, limit, currentOffset);
+      } else {
+        res = await window.electronAPI.biz.listMessages(username, myWxid, limit, currentOffset);
+      }
+      if (res) {
+        if (res.length < limit) setHasMore(false);
+        setMessages(prev => currentOffset === 0 ? res : [...prev, ...res]);
+        setOffset(currentOffset + limit);
+      }
+    } catch (err) {
+      console.error('加载消息失败:', err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
+    const target = e.currentTarget;
+    if (target.scrollHeight - Math.abs(target.scrollTop) - target.clientHeight < 50) {
+      if (!loading && hasMore && account) {
+        loadMessages(account.username, offset);
+      }
+    }
+  };
+
+  if (!account) {
+    return (
+        <div className="biz-empty-state">
+          <div className="empty-icon"><Newspaper size={40} /></div>
+          <p>请选择一个服务号查看消息</p>
+        </div>
+    );
+  }
+
+  const defaultImage = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MDAiIGhlaWdodD0iMTgwIj48cmVjdCB3aWR0aD0iNDAwIiBoZWlnaHQ9IjE4MCIgZmlsbD0iI2Y1ZjVmNSIvPjwvc3ZnPg==';
+
+  return (
+      <div className={`biz-main ${isDark ? 'dark' : ''}`}>
+        <div className="main-header">
+          <h2>{account.name}</h2>
+        </div>
+        <div className="message-container" onScroll={handleScroll} ref={messageListRef}>
+          <div className="messages-wrapper">
+            {!loading && messages.length === 0 && (
+              <div className="biz-no-record-container">
+                <div className="no-record-icon">
+                  <MessageSquareOff size={48} />
+                </div>
+                <h3>暂无本地记录</h3>
+                <p>该公众号在当前数据库中没有可显示的聊天历史</p>
+              </div>
+            )}
+            {messages.map((msg) => (
+                <div key={msg.local_id}>
+                  {account.username === 'gh_3dfda90e39d6' ? (
+                      <div className="pay-card">
+                        <div className="pay-header">
+                          {msg.merchant_icon ? <img src={msg.merchant_icon} className="pay-icon" alt=""/> : <div className="pay-icon-placeholder">¥</div>}
+                          <span>{msg.merchant_name || '微信支付'}</span>
+                        </div>
+                        <div className="pay-title">{msg.title}</div>
+                        <div className="pay-desc">{msg.description}</div>
+                        <div className="pay-footer">{msg.formatted_time}</div>
+                      </div>
+                  ) : (
+                      <div className="article-card">
+                        <div onClick={() => window.electronAPI.shell.openExternal(msg.url)} className="main-article">
+                          <img src={msg.cover || defaultImage} className="article-cover" alt=""/>
+                          <div className="article-overlay"><h3 className="article-title">{msg.title}</h3></div>
+                        </div>
+                        {msg.des && <div className="article-digest">{msg.des}</div>}
+                        {msg.content_list && msg.content_list.length > 1 && (
+                            <div className="sub-articles">
+                              {msg.content_list.slice(1).map((item: any, idx: number) => (
+                                  <div key={idx} onClick={() => window.electronAPI.shell.openExternal(item.url)} className="sub-item">
+                                    <span className="sub-title">{item.title}</span>
+                                    {item.cover && <img src={item.cover} className="sub-cover" alt=""/>}
+                                  </div>
+                              ))}
+                            </div>
+                        )}
+                      </div>
+                  )}
+                </div>
+            ))}
+            {loading && <div className="biz-loading-more">加载中...</div>}
+          </div>
+        </div>
+      </div>
+  );
+};
+
+const BizPage: React.FC = () => {
+  const [selectedAccount, setSelectedAccount] = useState<BizAccount | null>(null);
+  return (
+      <div className="biz-page">
+        <div className="biz-sidebar">
+          <BizAccountList onSelect={setSelectedAccount} selectedUsername={selectedAccount?.username} />
+        </div>
+        <BizMessageArea account={selectedAccount} />
+      </div>
+  );
+}
+
+export default BizPage;
--- a/src/pages/ChatPage.scss
+++ b/src/pages/ChatPage.scss
@@ -4487,6 +4487,32 @@
    font-weight: 500;
  }
 }
+
+// 公众号入口样式
+.session-item.biz-entry {
+  cursor: pointer;
+  transition: background-color 0.2s;
+
+  &:hover {
+    background: var(--hover-bg, rgba(0,0,0,0.05));
+  }
+
+  .biz-entry-avatar {
+    width: 48px;
+    height: 48px;
+    border-radius: 8px;
+    background: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    color: #07c160;
+  }
+
+  .session-name {
+    font-weight: 500;
+  }
+}
 // 消息信息弹窗
 .message-info-overlay {
  position: fixed;
--- a/src/pages/ChatPage.tsx
+++ b/src/pages/ChatPage.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react'
-import { Search, MessageSquare, AlertCircle, Loader2, RefreshCw, X, ChevronDown, ChevronLeft, Info, Calendar, Database, Hash, Play, Pause, Image as ImageIcon, Link, Mic, CheckCircle, Copy, Check, CheckSquare, Download, BarChart3, Edit2, Trash2, BellOff, Users, FolderClosed, UserCheck, Crown, Aperture } from 'lucide-react'
+import { Search, MessageSquare, AlertCircle, Loader2, RefreshCw, X, ChevronDown, ChevronLeft, Info, Calendar, Database, Hash, Play, Pause, Image as ImageIcon, Link, Mic, CheckCircle, Copy, Check, CheckSquare, Download, BarChart3, Edit2, Trash2, BellOff, Users, FolderClosed, UserCheck, Crown, Aperture, Newspaper } from 'lucide-react'
 import { useNavigate } from 'react-router-dom'
 import { createPortal } from 'react-dom'
 import { Virtuoso, type VirtuosoHandle } from 'react-virtuoso'
@@ -16,6 +16,7 @@ import JumpToDatePopover from '../components/JumpToDatePopover'
 import { ContactSnsTimelineDialog } from '../components/Sns/ContactSnsTimelineDialog'
 import { type ContactSnsTimelineTarget, isSingleContactSession } from '../components/Sns/contactSnsTimeline'
 import * as configService from '../services/config'
+import BizPage, { BizAccountList, BizMessageArea, BizAccount } from './BizPage'
 import {
  finishBackgroundTask,
  isBackgroundTaskCancelRequested,
@@ -36,6 +37,8 @@ const SYSTEM_MESSAGE_TYPES = [
  266287972401, // 拍一拍
 ]

+const OFFICIAL_ACCOUNTS_VIRTUAL_ID = 'official_accounts_virtual'
+
 interface PendingInSessionSearchPayload {
  sessionId: string
  keyword: string
@@ -983,6 +986,7 @@ const SessionItem = React.memo(function SessionItem({
  )

  const isFoldEntry = session.username.toLowerCase().includes('placeholder_foldgroup')
+  const isBizEntry = session.username === OFFICIAL_ACCOUNTS_VIRTUAL_ID

  // 折叠入口：专属名称和图标
  if (isFoldEntry) {
@@ -1007,6 +1011,29 @@ const SessionItem = React.memo(function SessionItem({
    )
  }

+  // 公众号入口：专属名称和图标
+  if (isBizEntry) {
+    return (
+      <div
+        className={`session-item biz-entry ${isActive ? 'active' : ''}`}
+        onClick={() => onSelect(session)}
+      >
+        <div className="biz-entry-avatar">
+          <Newspaper size={22} />
+        </div>
+        <div className="session-info">
+          <div className="session-top">
+            <span className="session-name">订阅号/服务号</span>
+            <span className="session-time">{timeText}</span>
+          </div>
+          <div className="session-bottom">
+            <span className="session-summary">{session.summary || '查看公众号历史消息'}</span>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
  // 根据匹配字段显示不同的 summary
  const summaryContent = useMemo(() => {
    if (session.matchedField === 'wxid') {
@@ -1204,6 +1231,8 @@ function ChatPage(props: ChatPageProps) {
  const [highlightedMessageKeys, setHighlightedMessageKeys] = useState<string[]>([])
  const [isRefreshingSessions, setIsRefreshingSessions] = useState(false)
  const [foldedView, setFoldedView] = useState(false) // 是否在"折叠的群聊"视图
+  const [bizView, setBizView] = useState(false) // 是否在"公众号"视图
+  const [selectedBizAccount, setSelectedBizAccount] = useState<BizAccount | null>(null)
  const [hasInitialMessages, setHasInitialMessages] = useState(false)
  const [isSessionSwitching, setIsSessionSwitching] = useState(false)
  const [noMessageTable, setNoMessageTable] = useState(false)
@@ -2691,6 +2720,9 @@ function ChatPage(props: ChatPageProps) {
    setConnected(false)
    setConnecting(false)
    setHasMoreMessages(true)
+    setFoldedView(false)
+    setBizView(false)
+    setSelectedBizAccount(null)
    setHasMoreLater(false)
    const scope = await resolveChatCacheScope()
    hydrateSessionListCache(scope)
@@ -3964,6 +3996,12 @@ function ChatPage(props: ChatPageProps) {
      setFoldedView(true)
      return
    }
+    // 点击公众号入口，切换到公众号视图
+    if (session.username === OFFICIAL_ACCOUNTS_VIRTUAL_ID) {
+      setBizView(true)
+      setSelectedBizAccount(null) // 切入时默认不选中任何公众号
+      return
+    }
    selectSessionById(session.username)
  }

@@ -4946,14 +4984,30 @@ function ChatPage(props: ChatPageProps) {
    const foldedGroups = sessions.filter(s => s.isFolded && !s.username.toLowerCase().includes('placeholder_foldgroup'))
    const hasFoldedGroups = foldedGroups.length > 0

-    const visible = sessions.filter(s => {
+    let visible = sessions.filter(s => {
      if (s.isFolded && !s.username.toLowerCase().includes('placeholder_foldgroup')) return false
      return true
    })

-    // 如果有折叠的群聊，但列表中没有入口，则插入入口
+    const bizEntry: ChatSession = {
+      username: OFFICIAL_ACCOUNTS_VIRTUAL_ID,
+      displayName: '公众号',
+      summary: '查看公众号历史消息',
+      type: 0,
+      sortTimestamp: 9999999999,  // 放到最前面？  目前还没有严格的对时间进行排序，  后面可以改一下
+      lastTimestamp: 0,
+      lastMsgType: 0,
+      unreadCount: 0,
+      isMuted: false,
+      isFolded: false
+    }
+
+    if (!visible.some(s => s.username === OFFICIAL_ACCOUNTS_VIRTUAL_ID)) {
+      visible.unshift(bizEntry)
+    }
+
    if (hasFoldedGroups && !visible.some(s => s.username.toLowerCase().includes('placeholder_foldgroup'))) {
-      // 找到最新的折叠消息
+
      const latestFolded = foldedGroups.reduce((latest, current) => {
        const latestTime = latest.sortTimestamp || latest.lastTimestamp
        const currentTime = current.sortTimestamp || current.lastTimestamp
@@ -6031,7 +6085,7 @@ function ChatPage(props: ChatPageProps) {
        ref={sidebarRef}
        style={{ width: sidebarWidth, minWidth: sidebarWidth, maxWidth: sidebarWidth }}
      >
-        <div className={`session-header session-header-viewport ${foldedView ? 'folded' : ''}`}>
+        <div className={`session-header session-header-viewport ${foldedView || bizView ? 'folded' : ''}`}>
          {/* 普通 header */}
          <div className="session-header-panel main-header">
            <div className="search-row">
@@ -6061,12 +6115,18 @@ function ChatPage(props: ChatPageProps) {
          {/* 折叠群 header */}
          <div className="session-header-panel folded-header">
            <div className="folded-view-header">
-              <button className="icon-btn back-btn" onClick={() => setFoldedView(false)}>
+              <button className="icon-btn back-btn" onClick={() => {
+                setFoldedView(false)
+                setBizView(false)
+              }}>
                <ChevronLeft size={18} />
              </button>
              <span className="folded-view-title">
-                <Users size={14} />
-                折叠的群聊
+                {foldedView ? (
+                    <><Users size={14} /> 折叠的群聊</>
+                ) : bizView ? (
+                    <><Newspaper size={14} /> 订阅号/服务号</>
+                ) : null}
              </span>
            </div>
          </div>
@@ -6173,7 +6233,7 @@ function ChatPage(props: ChatPageProps) {
            ))}
          </div>
        ) : (
-          <div className={`session-list-viewport ${foldedView ? 'folded' : ''}`}>
+          <div className={`session-list-viewport ${foldedView || bizView ? 'folded' : ''}`}>
            {/* 普通会话列表 */}
            <div className="session-list-panel main-panel">
              {Array.isArray(filteredSessions) && filteredSessions.length > 0 ? (
@@ -6199,7 +6259,7 @@ function ChatPage(props: ChatPageProps) {
                    <SessionItem
                      key={session.username}
                      session={session}
-                      isActive={currentSessionId === session.username}
+                      isActive={currentSessionId === session.username || (bizView && session.username === OFFICIAL_ACCOUNTS_VIRTUAL_ID)}
                      onSelect={handleSelectSession}
                      formatTime={formatSessionTime}
                      searchKeyword={searchKeyword}
@@ -6218,24 +6278,36 @@ function ChatPage(props: ChatPageProps) {

            {/* 折叠群列表 */}
            <div className="session-list-panel folded-panel">
-              {foldedSessions.length > 0 ? (
-                <div className="session-list">
-                  {foldedSessions.map(session => (
-                    <SessionItem
-                      key={session.username}
-                      session={session}
-                      isActive={currentSessionId === session.username}
-                      onSelect={handleSelectSession}
-                      formatTime={formatSessionTime}
-                      searchKeyword={searchKeyword}
+              {foldedView && (
+                  foldedSessions.length > 0 ? (
+                      <div className="session-list">
+                        {foldedSessions.map(session => (
+                            <SessionItem
+                                key={session.username}
+                                session={session}
+                                isActive={currentSessionId === session.username || (bizView && session.username === OFFICIAL_ACCOUNTS_VIRTUAL_ID)}
+                                onSelect={handleSelectSession}
+                                formatTime={formatSessionTime}
+                                searchKeyword={searchKeyword}
+                            />
+                        ))}
+                      </div>
+                  ) : (
+                      <div className="empty-sessions">
+                        <Users size={32} />
+                        <p>没有折叠的群聊</p>
+                      </div>
+                  )
+              )}
+
+              {bizView && (
+                  <div style={{ height: '100%', overflowY: 'auto' }}>
+                    <BizAccountList
+                        onSelect={setSelectedBizAccount}
+                        selectedUsername={selectedBizAccount?.username}
+                        searchKeyword={searchKeyword}
                    />
-                  ))}
-                </div>
-              ) : (
-                <div className="empty-sessions">
-                  <Users size={32} />
-                  <p>没有折叠的群聊</p>
-                </div>
+                  </div>
              )}
            </div>
          </div>
@@ -6247,9 +6319,11 @@ function ChatPage(props: ChatPageProps) {

      {/* 右侧消息区域 */}
      <div className="message-area">
-        {currentSession ? (
-          <>
-            <div className="message-header">
+        {bizView ? (
+            <BizMessageArea account={selectedBizAccount} />
+        ) : currentSession ? (
+            <>
+              <div className="message-header">
              <Avatar
                src={currentSession.avatarUrl}
                name={currentSession.displayName || currentSession.username}
--- a/src/types/electron.d.ts
+++ b/src/types/electron.d.ts
@@ -326,6 +326,11 @@ export interface ElectronAPI {
    getMessage: (sessionId: string, localId: number) => Promise<{ success: boolean; message?: Message; error?: string }>
    onWcdbChange: (callback: (event: any, data: { type: string; json: string }) => void) => () => void
  }
+  biz: {
+    listAccounts: (account?: string) => Promise<any[]>
+    listMessages: (username: string, account?: string, limit?: number, offset?: number) => Promise<any[]>
+    listPayRecords: (account?: string, limit?: number, offset?: number) => Promise<any[]>
+  }

  image: {
    decrypt: (payload: { sessionId?: string; imageMd5?: string; imageDatName?: string; force?: boolean }) => Promise<{ success: boolean; localPath?: string; liveVideoPath?: string; error?: string }>