重构加载更多功能,更新样式和逻辑,优化联系人列表组件的加载状态处理,提升用户体验和代码可读性。

This commit is contained in:
超级老白兔
2025-10-24 12:01:01 +08:00
parent 1b02666531
commit bb6453d3a2
2 changed files with 43 additions and 29 deletions

View File

@@ -157,24 +157,18 @@
padding: 10px;
}
// 加载更多按钮
.loadMoreBtn {
background: #fff;
border: 1px solid #d9d9d9;
border-radius: 4px;
padding: 6px 15px;
// 加载更多文字
.loadMoreText {
text-align: center;
padding: 10px 15px;
font-size: 14px;
color: #1890ff;
cursor: pointer;
transition: all 0.3s;
&:hover:not(:disabled) {
color: #1890ff;
border-color: #1890ff;
}
&:disabled {
cursor: not-allowed;
opacity: 0.6;
&:hover {
color: #40a9ff;
background-color: #f5f5f5;
}
}
}

View File

@@ -26,6 +26,7 @@ const ContactListSimple: React.FC<WechatFriendsProps> = ({
const [contactGroups, setContactGroups] = useState<ContactGroupByLabel[]>([]);
const [labels, setLabels] = useState<ContactGroupByLabel[]>([]);
const [loading, setLoading] = useState(false);
const [initializing, setInitializing] = useState(true); // 初始化状态
const [activeKey, setActiveKey] = useState<string[]>([]);
// 分页相关状态(合并为对象,减少状态数量)
@@ -119,14 +120,36 @@ const ContactListSimple: React.FC<WechatFriendsProps> = ({
if (!currentUser?.id || labels.length === 0) return;
try {
const groupStats = await getGroupStatistics(
// 先检查本地数据库是否有数据
const localContacts = await ContactManager.getUserContacts(
currentUser.id,
labels,
currentCustomer?.id,
);
setContactGroups(groupStats);
if (localContacts && localContacts.length > 0) {
// 有本地数据,直接加载分组统计(不显示骨架屏)
const groupStats = await getGroupStatistics(
currentUser.id,
labels,
currentCustomer?.id,
);
setContactGroups(groupStats);
setInitializing(false); // 初始化完成
} else {
// 没有本地数据,显示骨架屏
setLoading(true);
const groupStats = await getGroupStatistics(
currentUser.id,
labels,
currentCustomer?.id,
);
setContactGroups(groupStats);
setLoading(false);
setInitializing(false); // 初始化完成
}
} catch (error) {
console.error("获取分组统计失败:", error);
setLoading(false);
setInitializing(false); // 即使失败也标记为完成
}
};
@@ -358,21 +381,18 @@ const ContactListSimple: React.FC<WechatFriendsProps> = ({
setActiveKey(newKeys);
};
// 渲染加载更多按钮
// 渲染加载更多文字
const renderLoadMoreButton = (groupKey: string) => {
if (!groupData.hasMore[groupKey]) {
return <div className={styles.noMoreText}></div>;
}
return (
<div className={styles.loadMoreContainer}>
<button
className={styles.loadMoreBtn}
onClick={() => handleLoadMore(groupKey)}
disabled={groupData.loading[groupKey]}
>
{groupData.loading[groupKey] ? "加载中..." : "加载更多"}
</button>
<div
className={styles.loadMoreText}
onClick={() => !groupData.loading[groupKey] && handleLoadMore(groupKey)}
>
{groupData.loading[groupKey] ? "加载中..." : "加载更多"}
</div>
);
};
@@ -433,8 +453,8 @@ const ContactListSimple: React.FC<WechatFriendsProps> = ({
return (
<div className={styles.contractListSimple}>
{loading ? (
// 加载状态:显示骨架屏(只在首次无本地数据时显示)
{loading || initializing ? (
// 加载状态:显示骨架屏(初始化或首次无本地数据时显示)
renderSkeleton()
) : isSearchMode ? (
// 搜索模式:直接显示搜索结果列表