fix(nav): use ListItemButton as drag handle for navigation items

Changelog.md

@@ -25,6 +25,7 @@
 - 修复更新时加载进度条异常
 - 升级内核失败导致内核不可用问题
 - 修复 macOS 在安装和卸载服务时提示与操作不匹配
+- 修复菜单排序模式拖拽异常
 
 <details>
 <summary><strong> ✨ 新增功能 </strong></summary>

src/components/layout/layout-item.tsx

@@ -37,9 +37,14 @@ export const LayoutItem = (props: Props) => {
   const match = useMatch({ path: resolved.pathname, end: true });
   const navigate = useNavigate();
 
-  const { setNodeRef, attributes, listeners, style, isDragging } =
+  const { setNodeRef, attributes, listeners, style, isDragging, disabled } =
     sortable ?? {};
 
+  const draggable = Boolean(sortable) && !disabled;
+  const dragHandleProps = draggable
+    ? { ...(attributes ?? {}), ...(listeners ?? {}) }
+    : undefined;
+
   return (
     <ListItem
       ref={setNodeRef}
@@ -51,6 +56,7 @@ export const LayoutItem = (props: Props) => {
     >
       <ListItemButton
         selected={!!match}
+        {...(dragHandleProps ?? {})}
         sx={[
           {
             borderRadius: 2,
@@ -58,7 +64,8 @@ export const LayoutItem = (props: Props) => {
             paddingLeft: 1,
             paddingRight: 1,
             marginRight: 1.25,
-            cursor: "pointer",
+            cursor: draggable ? "grab" : "pointer",
+            "&:active": draggable ? { cursor: "grabbing" } : {},
             "& .MuiListItemText-primary": {
               color: "text.primary",
               fontWeight: "700",
@@ -84,20 +91,14 @@ export const LayoutItem = (props: Props) => {
             sx={{
               color: "text.primary",
               marginLeft: "6px",
-              cursor: sortable && !sortable.disabled ? "grab" : "inherit",
+              cursor: draggable ? "grab" : "inherit",
             }}
-            {...(attributes ?? {})}
-            {...(listeners ?? {})}
           >
             {icon[0]}
           </ListItemIcon>
         )}
         {menu_icon === "colorful" && (
-          <ListItemIcon
-            sx={{ cursor: sortable && !sortable.disabled ? "grab" : "inherit" }}
-            {...(attributes ?? {})}
-            {...(listeners ?? {})}
-          >
+          <ListItemIcon sx={{ cursor: draggable ? "grab" : "inherit" }}>
             {icon[1]}
           </ListItemIcon>
         )}