feat(weChat): 优化聊天消息加载逻辑并移除无用按钮
添加 isLoadingData 状态控制滚动行为 修改 loadChatMessages 方法支持分页加载 移除聊天窗口的语音和视频通话按钮 更新构建产物文件引用
This commit is contained in:
26
Cunkebao/dist/.vite/manifest.json
vendored
26
Cunkebao/dist/.vite/manifest.json
vendored
@@ -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"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
8
Cunkebao/dist/index.html
vendored
8
Cunkebao/dist/index.html
vendored
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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}
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -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);
|
||||||
|
|||||||
Reference in New Issue
Block a user