✨ 添加(CategoryItem): 使用新的useCategory钩子来替换旧的useContextMenu使用

📝 文档(useCategory): 添加用于CategoryItem组件上下文菜单的contextMenu功能
🚀 部署(ContentItem): 添加拖拽事件处理程序到ContentItem组件
🔧 配置文件(useCategory): 新增创建useCategory钩子，用于处理Category相关的操作

ui/autoMate/src/renderer/src/components/CategoryItem/index.tsx

@@ -1,8 +1,8 @@
-import { Delete, FolderClose } from "@icon-park/react"
+import { FolderClose } from "@icon-park/react"
 import { NavLink, useFetcher, useSubmit } from "react-router-dom"
 import styles from "./styles.module.scss"
-import { useContextMenu } from "mantine-contextmenu"
 import { useStore } from "@renderer/store/useStore"
+import useCategory from "@renderer/hooks/useCategory"
 interface Props {
   category: CategoryType
 }
@@ -10,9 +10,9 @@ interface Props {
 export const CategoryItem = ({ category }: Props) => {
   // fetcher 不会刷新路由
   const fetcher = useFetcher()
-  const { showContextMenu } = useContextMenu()
   const setEditCategoryId = useStore(state => state.setEditCategoryId)
   const editCategoryId = useStore(state => state.editCategoryId)
+  const { contextMenu } = useCategory()
   return (
     <>
       {editCategoryId == category.id ? (
@@ -43,17 +43,7 @@ export const CategoryItem = ({ category }: Props) => {
           className={({ isActive }) => {
             return isActive ? styles.active : styles.link
           }}
-          onContextMenu={showContextMenu([
-            {
-              key: 'remove',
-              icon: <Delete theme="outline" size="18" strokeWidth={3} />,
-              title: '删除动作',
-              onClick: () => {
-                submit({ id: category.id }, { method: 'DELETE' })
-              },
-            }
-          ],
-            { className: 'contextMenu' })}
+          onContextMenu={contextMenu(category)}
         >
           <div className="flex items-center gap-1">
             <FolderClose theme="outline" size="12" strokeWidth={3}></FolderClose>

ui/autoMate/src/renderer/src/components/ContentItem/index.tsx

@@ -16,6 +16,9 @@ const { showContextMenu } = useContextMenu();
         className={({isActive})=>{
             return [isActive ? styles.active : '', styles.link].join(' ')
         }}
+        onDragStart={(_e)=>{
+          console.log("drag")
+        }}
         onContextMenu={showContextMenu([
         {
             key: 'remove',

ui/autoMate/src/renderer/src/hooks/useCategory.tsx

@@ -0,0 +1,23 @@
+import { Delete } from "@icon-park/react"
+import { useContextMenu } from "mantine-contextmenu"
+import { useSubmit } from "react-router-dom"
+
+export default ()=>{
+    const submit = useSubmit()
+    const { showContextMenu } = useContextMenu()
+
+    const contextMenu = (category: CategoryType) => {
+        return showContextMenu([
+            {
+              key: 'remove',
+              icon: <Delete theme="outline" size="18" strokeWidth={3} />,
+              title: '删除动作',
+              onClick: () => {
+                submit({ id: category.id }, { method: 'DELETE' })
+              },
+            }
+          ],
+            { className: 'contextMenu' })
+        }
+    return {contextMenu}
+}