✨ 添加功能(db/query.ts)：修改del函数，支持传入参数来执行删除操作

✨ 添加功能(CategoryItem/index.tsx)：添加右键菜单功能，支持删除操作

✨ 添加功能(CategoryAction.ts)：根据请求方法执行不同的SQL操作

📝 更新文档(Category/index.tsx)：修正CategoryItem组件标签格式$error

ui/autoMate/src/main/db/query.ts

@@ -18,6 +18,6 @@ export const update = (sql: string, params: Record<string, any>) => {
     return db.prepare(sql).run(params).changes;
 }
 
-export const del = (sql: string) => {
-    return db.prepare(sql).run().changes;
+export const del = (sql: string, params={}) => {
+    return db.prepare(sql).run(params).changes;
 }

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

@@ -1,11 +1,14 @@
-import { FolderClose } from "@icon-park/react"
-import { NavLink } from "react-router-dom"
+import { Delete, FolderClose } from "@icon-park/react"
+import { NavLink, useSubmit } from "react-router-dom"
 import styles from "./styles.module.scss"
+import { useContextMenu } from "mantine-contextmenu"
 interface Props {
     category: CategoryType
 }
 
 export const CategoryItem = ({category}: Props) => {
+  const submit = useSubmit()
+  const { showContextMenu } = useContextMenu()
   return (
     <NavLink 
         to={`/config/category/contentList/${category.id}`} 
@@ -13,6 +16,17 @@ 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'})}
     >
         <div className="flex items-center gap-1">
         <FolderClose theme="outline" size="12" strokeWidth={3}></FolderClose>

ui/autoMate/src/renderer/src/pages/Category/CategoryAction.ts

@@ -1,7 +1,21 @@
-export default async({request}) =>{
-    await window.api.sql(
-        "insert into categories (name, created_at) values('未命名', datetime())",
-        "create",
-    )
-  return {}
-}
+export default async ({ request }) => {
+    const formData = await request.formData()
+    const data = Object.fromEntries(formData)
+    switch (request.method) {
+        case "POST": {
+            return await window.api.sql(
+                "insert into categories (name, created_at) values('未命名', datetime())",
+                "create",
+            )
+        }
+        case "DELETE": {
+            return await window.api.sql(
+                `delete from categories where id = @id`,
+                "del",
+                {
+                    id: data.id
+                })
+        }
+    }
+    return {}
+}   

ui/autoMate/src/renderer/src/pages/Category/index.tsx

@@ -11,7 +11,7 @@ export const Category = () => {
         <div className="categories">
             <QuickNav/>
             {categories.map((category) => (
-                <CategoryItem category={category} key={category.id}/>
+                <CategoryItem category={category} key={category.id} />
             ))}
         </div>
         <FooterMenu/>