refactor(ckbox): 优化侧边栏菜单组件和联系人列表
- 将群组图标和文字替换为朋友圈 - 移除未使用的response变量 - 重构联系人列表组件,使用Collapse的items属性替代Panel组件 - 添加CollapseProps类型导入
This commit is contained in:
@@ -1,5 +1,6 @@
|
||||
import React, { useState, useCallback, useEffect } from "react";
|
||||
import { List, Avatar, Collapse, Button } from "antd";
|
||||
import type { CollapseProps } from "antd";
|
||||
import { ContractData } from "@/pages/pc/ckbox/data";
|
||||
import styles from "./WechatFriends.module.scss";
|
||||
import { useCkChatStore } from "@/store/module/ckchat";
|
||||
@@ -10,8 +11,6 @@ interface WechatFriendsProps {
|
||||
selectedContactId?: ContractData;
|
||||
}
|
||||
|
||||
const { Panel } = Collapse;
|
||||
|
||||
const ContactListSimple: React.FC<WechatFriendsProps> = ({
|
||||
contracts,
|
||||
onContactClick,
|
||||
@@ -130,6 +129,39 @@ const ContactListSimple: React.FC<WechatFriendsProps> = ({
|
||||
);
|
||||
};
|
||||
|
||||
// 构建Collapse的items属性
|
||||
const getCollapseItems = (): CollapseProps['items'] => {
|
||||
if (!newContractList || newContractList.length === 0) return [];
|
||||
|
||||
return newContractList.map((group, index) => {
|
||||
const groupKey = index.toString();
|
||||
const isActive = activeKey.includes(groupKey);
|
||||
|
||||
return {
|
||||
key: groupKey,
|
||||
label: (
|
||||
<div className={styles.groupHeader}>
|
||||
<span>{group.groupName}</span>
|
||||
<span className={styles.contactCount}>
|
||||
{group.contacts.length}
|
||||
</span>
|
||||
</div>
|
||||
),
|
||||
className: styles.groupPanel,
|
||||
children: isActive ? (
|
||||
<>
|
||||
<List
|
||||
className={styles.list}
|
||||
dataSource={visibleContacts[groupKey] || []}
|
||||
renderItem={renderContactItem}
|
||||
/>
|
||||
{renderLoadMoreButton(groupKey)}
|
||||
</>
|
||||
) : null
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={styles.contractListSimple}>
|
||||
{newContractList && newContractList.length > 0 ? (
|
||||
@@ -137,38 +169,8 @@ const ContactListSimple: React.FC<WechatFriendsProps> = ({
|
||||
className={styles.groupCollapse}
|
||||
activeKey={activeKey}
|
||||
onChange={keys => setActiveKey(keys as string[])}
|
||||
>
|
||||
{newContractList.map((group, index) => {
|
||||
const groupKey = index.toString();
|
||||
const isActive = activeKey.includes(groupKey);
|
||||
|
||||
return (
|
||||
<Panel
|
||||
header={
|
||||
<div className={styles.groupHeader}>
|
||||
<span>{group.groupName}</span>
|
||||
<span className={styles.contactCount}>
|
||||
{group.contacts.length}
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
key={groupKey}
|
||||
className={styles.groupPanel}
|
||||
>
|
||||
{isActive && (
|
||||
<>
|
||||
<List
|
||||
className={styles.list}
|
||||
dataSource={visibleContacts[groupKey] || []}
|
||||
renderItem={renderContactItem}
|
||||
/>
|
||||
{renderLoadMoreButton(groupKey)}
|
||||
</>
|
||||
)}
|
||||
</Panel>
|
||||
);
|
||||
})}
|
||||
</Collapse>
|
||||
items={getCollapseItems()}
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<div className={styles.header}>全部好友</div>
|
||||
|
||||
@@ -3,7 +3,7 @@ import { Input, Skeleton } from "antd";
|
||||
import {
|
||||
SearchOutlined,
|
||||
UserOutlined,
|
||||
TeamOutlined,
|
||||
ChromeOutlined,
|
||||
MessageOutlined,
|
||||
} from "@ant-design/icons";
|
||||
import { ContractData } from "@/pages/pc/ckbox/data";
|
||||
@@ -131,8 +131,8 @@ const SidebarMenu: React.FC<SidebarMenuProps> = ({
|
||||
className={`${styles.tabItem} ${activeTab === "groups" ? styles.active : ""}`}
|
||||
onClick={() => setActiveTab("groups")}
|
||||
>
|
||||
<TeamOutlined />
|
||||
<span>群组</span>
|
||||
<ChromeOutlined />
|
||||
<span>朋友圈</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -160,7 +160,7 @@ const SidebarMenu: React.FC<SidebarMenuProps> = ({
|
||||
case "groups":
|
||||
return (
|
||||
<div className={styles.emptyState}>
|
||||
<TeamOutlined style={{ fontSize: 48, color: "#ccc" }} />
|
||||
<ChromeOutlined style={{ fontSize: 48, color: "#ccc" }} />
|
||||
<p>暂无群组</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -34,7 +34,6 @@ const CkboxPage: React.FC = () => {
|
||||
newContractList: { groupName: string; contacts: any[] }[];
|
||||
};
|
||||
const { contractList, groupList, kfUserList, newContractList } = data;
|
||||
response;
|
||||
|
||||
console.log(contractList, groupList, kfUserList, newContractList);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user