hicccc77/WeFlow
1
0
Fork 0
mirror of https://github.com/hicccc77/WeFlow.git synced 2026-04-03 07:25:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: 以chat的方式实现biz的解析

Browse Source
This commit is contained in:
H3CoF6
2026-04-03 04:40:34 +08:00
parent 5b56b2e0be
commit 617b400884
2 changed files with 267 additions and 358 deletions
Download Patch File Download Diff File Expand all files Collapse all files

183
src/pages/BizPage.tsx
View File

@@ -1,7 +1,6 @@
import React, { useState, useEffect, useMemo, useRef } from 'react';
import { useThemeStore } from '../stores/themeStore';
import { useAppStore } from '../stores/appStore';
import { ChevronLeft, Newspaper } from 'lucide-react';
import { Newspaper } from 'lucide-react';
import './BizPage.scss';
export interface BizAccount {
@@ -60,42 +59,42 @@ export const BizAccountList: React.FC<{
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))
(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 || 'https://res.wx.qq.com/a/wx_fed/assets/res/NTI4MWU5.png'}
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 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>
<div className={`biz-badge ${
item.type === 1 ? 'type-service' :
item.type === 0 ? 'type-sub' :
item.type === 2 ? 'type-enterprise' : 'type-unknown'
}`}>
{item.type === 0 ? '服务号' : item.type === 1 ? '订阅号' : item.type === 2 ? '企业号' : '未知'}
</div>
</div>
</div>
<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>
))}
</div>
);
};
@@ -110,7 +109,24 @@ export const BizMessageArea: React.FC<{
const [hasMore, setHasMore] = useState(true);
const limit = 20;
const messageListRef = useRef<HTMLDivElement>(null);
const myWxid = useAppStore((state) => state.myWxid);
// ======== 修改开始：独立从底层获取 myWxid ========
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();
}, []);
// ======== 修改结束 ========
const isDark = useMemo(() => {
if (themeMode === 'dark') return true;
@@ -120,14 +136,17 @@ export const BizMessageArea: React.FC<{
return false;
}, [themeMode]);
// ======== 补充修改：添加 myWxid 依赖 ========
// 必须加上 myWxid 作为依赖项，否则第一次点击左侧账号时，如果 wxid 还没异步拿回来，就不会触发加载
useEffect(() => {
if (account) {
if (account && myWxid) {
setMessages([]);
setOffset(0);
setHasMore(true);
loadMessages(account.username, 0);
}
}, [account]);
}, [account, myWxid]);
// ======== 补充修改结束 ========
const loadMessages = async (username: string, currentOffset: number) => {
if (loading || !myWxid) return; // 没账号直接 return
@@ -165,59 +184,59 @@ export const BizMessageArea: React.FC<{
if (!account) {
return (
<div className="biz-empty-state">
<div className="empty-icon"><Newspaper size={40} /></div>
<p>请选择一个服务号查看消息</p>
</div>
<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">
{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 > 0 && (
<div className="sub-articles">
{msg.content_list.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 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">
{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>
<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 > 0 && (
<div className="sub-articles">
{msg.content_list.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>
)}
</div>
))}
{loading && <div className="biz-loading-more">加载中...</div>}
))}
{loading && <div className="biz-loading-more">加载中...</div>}
</div>
</div>
</div>
</div>
);
};
@@ -225,13 +244,13 @@ export const BizMessageArea: React.FC<{
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 className="biz-page">
<div className="biz-sidebar">
<BizAccountList onSelect={setSelectedAccount} selectedUsername={selectedAccount?.username} />
</div>
<BizMessageArea account={selectedAccount} />
</div>
<BizMessageArea account={selectedAccount} />
</div>
);
}
export default BizPage;
export default BizPage;