重构GroupContextMenu组件:调整上下文菜单的样式并增强组处理逻辑,以禁用默认组或未分组组的编辑/删除操作。更新联系人组的排序逻辑,以区分默认组和未分组组的优先级。
This commit is contained in:
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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 });
|
||||
|
||||
// 缓存分组列表
|
||||
|
||||
Reference in New Issue
Block a user