refactor(组件): 优化微信好友列表和聊天窗口菜单代码结构

重构微信好友列表组件中的getCollapseItems方法,简化代码格式
将聊天窗口的菜单从JSX改为items数组配置方式,提高可维护性
This commit is contained in:
超级老白兔
2025-08-29 10:49:13 +08:00
parent 190f2df15e
commit bdc94d853d
2 changed files with 42 additions and 28 deletions

View File

@@ -780,26 +780,42 @@ const ChatWindow: React.FC<ChatWindowProps> = ({
);
};
const chatMenu = (
<Menu>
<Menu.Item key="profile" icon={<UserOutlined />}>
</Menu.Item>
<Menu.Item key="call" icon={<PhoneOutlined />}>
</Menu.Item>
<Menu.Item key="video" icon={<VideoCameraOutlined />}>
</Menu.Item>
<Menu.Divider />
<Menu.Item key="pin"></Menu.Item>
<Menu.Item key="mute"></Menu.Item>
<Menu.Divider />
<Menu.Item key="clear" danger>
</Menu.Item>
</Menu>
);
const chatMenuItems = [
{
key: "profile",
icon: <UserOutlined />,
label: "查看资料",
},
{
key: "call",
icon: <PhoneOutlined />,
label: "语音通话",
},
{
key: "video",
icon: <VideoCameraOutlined />,
label: "视频通话",
},
{
type: "divider",
},
{
key: "pin",
label: "置顶聊天",
},
{
key: "mute",
label: "消息免打扰",
},
{
type: "divider",
},
{
key: "clear",
danger: true,
label: "清空聊天记录",
},
];
// 模拟联系人详细信息
const contractInfo = {
@@ -861,7 +877,7 @@ const ChatWindow: React.FC<ChatWindowProps> = ({
className={styles.headerButton}
/>
</Tooltip>
<Dropdown overlay={chatMenu} trigger={["click"]}>
<Dropdown menu={{ items: chatMenuItems }} trigger={["click"]}>
<Button
type="text"
icon={<MoreOutlined />}

View File

@@ -130,21 +130,19 @@ const ContactListSimple: React.FC<WechatFriendsProps> = ({
};
// 构建Collapse的items属性
const getCollapseItems = (): CollapseProps['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>
<span className={styles.contactCount}>{group.contacts.length}</span>
</div>
),
className: styles.groupPanel,
@@ -157,7 +155,7 @@ const ContactListSimple: React.FC<WechatFriendsProps> = ({
/>
{renderLoadMoreButton(groupKey)}
</>
) : null
) : null,
};
});
};