feat(weChat): 优化聊天消息加载逻辑并移除无用按钮

添加 isLoadingData 状态控制滚动行为
修改 loadChatMessages 方法支持分页加载
移除聊天窗口的语音和视频通话按钮
更新构建产物文件引用
This commit is contained in:
超级老白兔
2025-09-08 09:45:10 +08:00
parent b2db8e8f5a
commit 2033faff08
6 changed files with 56 additions and 43 deletions

View File

@@ -1,18 +1,14 @@
{ {
"_charts-DmoeDXY2.js": { "_charts-B9_ggjgM.js": {
"file": "assets/charts-DmoeDXY2.js", "file": "assets/charts-B9_ggjgM.js",
"name": "charts", "name": "charts",
"imports": [ "imports": [
"_ui-D66ihimQ.js", "_ui-CdpU1706.js",
"_vendor-2vc8h_ct.js" "_vendor-2vc8h_ct.js"
] ]
}, },
"_ui-D0C0OGrH.css": { "_ui-CdpU1706.js": {
"file": "assets/ui-D0C0OGrH.css", "file": "assets/ui-CdpU1706.js",
"src": "_ui-D0C0OGrH.css"
},
"_ui-D66ihimQ.js": {
"file": "assets/ui-D66ihimQ.js",
"name": "ui", "name": "ui",
"imports": [ "imports": [
"_vendor-2vc8h_ct.js" "_vendor-2vc8h_ct.js"
@@ -21,6 +17,10 @@
"assets/ui-D0C0OGrH.css" "assets/ui-D0C0OGrH.css"
] ]
}, },
"_ui-D0C0OGrH.css": {
"file": "assets/ui-D0C0OGrH.css",
"src": "_ui-D0C0OGrH.css"
},
"_utils-6WF66_dS.js": { "_utils-6WF66_dS.js": {
"file": "assets/utils-6WF66_dS.js", "file": "assets/utils-6WF66_dS.js",
"name": "utils", "name": "utils",
@@ -33,18 +33,18 @@
"name": "vendor" "name": "vendor"
}, },
"index.html": { "index.html": {
"file": "assets/index-bW2KwNBi.js", "file": "assets/index-BZQSHOtN.js",
"name": "index", "name": "index",
"src": "index.html", "src": "index.html",
"isEntry": true, "isEntry": true,
"imports": [ "imports": [
"_vendor-2vc8h_ct.js", "_vendor-2vc8h_ct.js",
"_utils-6WF66_dS.js", "_utils-6WF66_dS.js",
"_ui-D66ihimQ.js", "_ui-CdpU1706.js",
"_charts-DmoeDXY2.js" "_charts-B9_ggjgM.js"
], ],
"css": [ "css": [
"assets/index-BeKt58rz.css" "assets/index-CciB7EKw.css"
] ]
} }
} }

View File

@@ -11,13 +11,13 @@
</style> </style>
<!-- 引入 uni-app web-view SDK必须 --> <!-- 引入 uni-app web-view SDK必须 -->
<script type="text/javascript" src="/websdk.js"></script> <script type="text/javascript" src="/websdk.js"></script>
<script type="module" crossorigin src="/assets/index-bW2KwNBi.js"></script> <script type="module" crossorigin src="/assets/index-BZQSHOtN.js"></script>
<link rel="modulepreload" crossorigin href="/assets/vendor-2vc8h_ct.js"> <link rel="modulepreload" crossorigin href="/assets/vendor-2vc8h_ct.js">
<link rel="modulepreload" crossorigin href="/assets/utils-6WF66_dS.js"> <link rel="modulepreload" crossorigin href="/assets/utils-6WF66_dS.js">
<link rel="modulepreload" crossorigin href="/assets/ui-D66ihimQ.js"> <link rel="modulepreload" crossorigin href="/assets/ui-CdpU1706.js">
<link rel="modulepreload" crossorigin href="/assets/charts-DmoeDXY2.js"> <link rel="modulepreload" crossorigin href="/assets/charts-B9_ggjgM.js">
<link rel="stylesheet" crossorigin href="/assets/ui-D0C0OGrH.css"> <link rel="stylesheet" crossorigin href="/assets/ui-D0C0OGrH.css">
<link rel="stylesheet" crossorigin href="/assets/index-BeKt58rz.css"> <link rel="stylesheet" crossorigin href="/assets/index-CciB7EKw.css">
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

View File

@@ -13,13 +13,18 @@ interface MessageRecordProps {
const MessageRecord: React.FC<MessageRecordProps> = ({ contract }) => { const MessageRecord: React.FC<MessageRecordProps> = ({ contract }) => {
const messagesEndRef = useRef<HTMLDivElement>(null); const messagesEndRef = useRef<HTMLDivElement>(null);
const currentMessages = useWeChatStore(state => state.currentMessages); const currentMessages = useWeChatStore(state => state.currentMessages);
const loadChatMessages = useWeChatStore(state => state.loadChatMessages);
const messagesLoading = useWeChatStore(state => state.messagesLoading);
const isLoadingData = useWeChatStore(state => state.isLoadingData);
const currentGroupMembers = useWeChatStore( const currentGroupMembers = useWeChatStore(
state => state.currentGroupMembers, state => state.currentGroupMembers,
); );
useEffect(() => { useEffect(() => {
scrollToBottom(); if (isLoadingData) {
}, [currentMessages]); scrollToBottom();
}
}, [currentMessages, isLoadingData]);
const scrollToBottom = () => { const scrollToBottom = () => {
messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }); messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
@@ -192,7 +197,9 @@ const MessageRecord: React.FC<MessageRecordProps> = ({ contract }) => {
return ( return (
<div className={styles.messagesContainer}> <div className={styles.messagesContainer}>
<div className={styles.loadMore}></div> <div className={styles.loadMore} onClick={() => loadChatMessages(false)}>
{messagesLoading ? "中" : "1"}
</div>
{groupMessagesByTime(currentMessages).map((group, groupIndex) => ( {groupMessagesByTime(currentMessages).map((group, groupIndex) => (
<React.Fragment key={`group-${groupIndex}`}> <React.Fragment key={`group-${groupIndex}`}>
<Divider> <Divider>

View File

@@ -68,21 +68,6 @@ const ChatWindow: React.FC<ChatWindowProps> = ({ contract }) => {
</div> </div>
</div> </div>
<Space> <Space>
<Tooltip title="语音通话">
<Button
type="text"
icon={<PhoneOutlined />}
className={styles.headerButton}
/>
</Tooltip>
<Tooltip title="视频通话">
<Button
type="text"
icon={<VideoCameraOutlined />}
className={styles.headerButton}
/>
</Tooltip>
<Tooltip title="个人资料"> <Tooltip title="个人资料">
<Button <Button
onClick={onToggleProfile} onClick={onToggleProfile}

View File

@@ -9,6 +9,7 @@ export interface WeChatState {
// 消息加载状态 // 消息加载状态
messagesLoading: boolean; messagesLoading: boolean;
isLoadingData: boolean;
currentGroupMembers: any[]; currentGroupMembers: any[];
// Actions // Actions
@@ -16,7 +17,7 @@ export interface WeChatState {
contract: ContractData | weChatGroup, contract: ContractData | weChatGroup,
isExist?: boolean, isExist?: boolean,
) => void; ) => void;
loadChatMessages: (contact: ContractData | weChatGroup) => Promise<void>; loadChatMessages: (Init: boolean, To?: number) => Promise<void>;
// 视频消息处理方法 // 视频消息处理方法
setVideoLoading: (messageId: number, isLoading: boolean) => void; setVideoLoading: (messageId: number, isLoading: boolean) => void;

View File

@@ -22,6 +22,7 @@ export const useWeChatStore = create<WeChatState>()(
currentContract: null, currentContract: null,
currentMessages: [], currentMessages: [],
messagesLoading: false, messagesLoading: false,
isLoadingData: false,
currentGroupMembers: [], currentGroupMembers: [],
// Actions // Actions
@@ -43,18 +44,19 @@ export const useWeChatStore = create<WeChatState>()(
id: contract.id, id: contract.id,
config: { chat: true }, config: { chat: true },
}); });
state.loadChatMessages(contract); state.loadChatMessages(true, 4704624000000);
}); });
}, },
loadChatMessages: async (Init: boolean, To?: number) => {
loadChatMessages: async contact => { const state = useWeChatStore.getState();
const contact = state.currentContract;
set({ messagesLoading: true }); set({ messagesLoading: true });
set({ isLoadingData: Init });
try { try {
const params: any = { const params: any = {
wechatAccountId: contact.wechatAccountId, wechatAccountId: contact.wechatAccountId,
From: 1, From: 1,
To: 4704624000000, To: To || +new Date(),
Count: 5, Count: 5,
olderData: true, olderData: true,
}; };
@@ -65,11 +67,29 @@ export const useWeChatStore = create<WeChatState>()(
const currentGroupMembers = await getGroupMembers({ const currentGroupMembers = await getGroupMembers({
id: contact.id, id: contact.id,
}); });
set({ currentMessages: messages || [], currentGroupMembers }); if (Init) {
set({ currentMessages: messages || [], currentGroupMembers });
} else {
set({
currentMessages: [
...state.currentMessages,
...(messages || []),
],
});
}
} else { } else {
params.wechatFriendId = contact.id; params.wechatFriendId = contact.id;
const messages = await getChatMessages(params); const messages = await getChatMessages(params);
set({ currentMessages: messages || [] }); if (Init) {
set({ currentMessages: messages || [] });
} else {
set({
currentMessages: [
...state.currentMessages,
...(messages || []),
],
});
}
} }
} catch (error) { } catch (error) {
console.error("获取聊天消息失败:", error); console.error("获取聊天消息失败:", error);