refactor(ckbox): 优化侧边栏菜单组件和联系人列表

- 将群组图标和文字替换为朋友圈
- 移除未使用的response变量
- 重构联系人列表组件,使用Collapse的items属性替代Panel组件
- 添加CollapseProps类型导入
This commit is contained in:
超级老白兔
2025-08-29 09:43:39 +08:00
parent 519f66f46d
commit faefefe186
3 changed files with 40 additions and 39 deletions

View File

@@ -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>

View File

@@ -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>
);

View File

@@ -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);