重构GroupContextMenu组件:调整上下文菜单的样式并增强组处理逻辑,以禁用默认组或未分组组的编辑/删除操作。更新联系人组的排序逻辑,以区分默认组和未分组组的优先级。

This commit is contained in:
乘风
2025-12-16 16:42:00 +08:00
parent 631e8d00e2
commit bde1d36005
3 changed files with 35 additions and 10 deletions

View File

@@ -9,10 +9,9 @@
}
.contextMenu {
min-width: 180px;
padding: 4px 0;
min-width: 120px;
padding: 2px 0;
background: #ffffff;
border-radius: 6px;
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.25);
border: 1px solid rgba(148, 163, 184, 0.5);
border: 1px solid rgba(148, 163, 184, 0.4);
}

View File

@@ -49,6 +49,12 @@ export const GroupContextMenu: React.FC<GroupContextMenuProps> = ({
onEditClick,
onDeleteClick,
}) => {
// 默认群分组 / 未分组id 为 0且 groupType 为 1 或 2
const isDefaultOrUngrouped =
!!group &&
group.id === 0 &&
(group.groupType === 1 || group.groupType === 2);
// 处理新增分组
const handleAdd = () => {
onClose();
@@ -57,14 +63,14 @@ export const GroupContextMenu: React.FC<GroupContextMenuProps> = ({
// 处理编辑分组
const handleEdit = () => {
if (!group) return;
if (!group || isDefaultOrUngrouped) return;
onClose();
onEditClick?.(group);
};
// 处理删除分组
const handleDelete = () => {
if (!group) return;
if (!group || isDefaultOrUngrouped) return;
onClose();
onDeleteClick?.(group);
};
@@ -84,6 +90,7 @@ export const GroupContextMenu: React.FC<GroupContextMenuProps> = ({
label: "编辑分组",
icon: <EditOutlined />,
onClick: handleEdit,
disabled: isDefaultOrUngrouped,
},
{
key: "delete",
@@ -91,6 +98,7 @@ export const GroupContextMenu: React.FC<GroupContextMenuProps> = ({
icon: <DeleteOutlined />,
danger: true,
onClick: handleDelete,
disabled: isDefaultOrUngrouped,
},
]
: []),
@@ -112,6 +120,7 @@ export const GroupContextMenu: React.FC<GroupContextMenuProps> = ({
left: x,
top: y,
zIndex: 1000,
boxShadow: "0 12px 32px rgba(15, 23, 42, 0.32)",
}}
items={menuItems}
onClick={onClose}

View File

@@ -81,10 +81,27 @@ export const useContactStoreNew = createPersistStore<ContactStoreState>(
* 设置分组列表
*/
setGroups: async (groups: ContactGroup[]) => {
// 按sort排序
const sortedGroups = [...groups].sort(
(a, b) => (a.sort || 0) - (b.sort || 0),
);
// 按自定义规则排序
// 1. 默认群分组groupType=2 且 id=0始终在最前
// 2. 未分组groupType=1 且 id=99999999始终在最后
// 3. 其他分组按 sort 升序
const sortedGroups = [...groups].sort((a, b) => {
const isDefaultGroupA = a.groupType === 2 && a.id === 0;
const isDefaultGroupB = b.groupType === 2 && b.id === 0;
const isUngroupedA = a.groupType === 1 && a.id === 99999999;
const isUngroupedB = b.groupType === 1 && b.id === 99999999;
// 默认群分组始终最前
if (isDefaultGroupA && !isDefaultGroupB) return -1;
if (!isDefaultGroupA && isDefaultGroupB) return 1;
// 未分组始终最后
if (isUngroupedA && !isUngroupedB) return 1;
if (!isUngroupedA && isUngroupedB) return -1;
// 其他按 sort 排序
return (a.sort || 0) - (b.sort || 0);
});
set({ groups: sortedGroups });
// 缓存分组列表