refactor(组件): 优化微信好友列表和聊天窗口菜单代码结构
重构微信好友列表组件中的getCollapseItems方法,简化代码格式 将聊天窗口的菜单从JSX改为items数组配置方式,提高可维护性
This commit is contained in:
@@ -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 />}
|
||||
|
||||
@@ -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,
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user