From a0ae672b5ee262f8c66435c11af9e2ffb6b626da Mon Sep 17 00:00:00 2001
From: yuruo <yuruotong1@163.com>
Date: Thu, 20 Jun 2024 09:01:44 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20=E6=B7=BB=E5=8A=A0=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD(db/query.ts)=EF=BC=9A=E4=BF=AE=E6=94=B9del=E5=87=BD?=
 =?UTF-8?q?=E6=95=B0=EF=BC=8C=E6=94=AF=E6=8C=81=E4=BC=A0=E5=85=A5=E5=8F=82?=
 =?UTF-8?q?=E6=95=B0=E6=9D=A5=E6=89=A7=E8=A1=8C=E5=88=A0=E9=99=A4=E6=93=8D?=
 =?UTF-8?q?=E4=BD=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

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

📝 更新文档(Category/index.tsx)：修正CategoryItem组件标签格式$error
---
 ui/autoMate/src/main/db/query.ts              |  4 +--
 .../src/components/CategoryItem/index.tsx     | 18 ++++++++++--
 .../src/pages/Category/CategoryAction.ts      | 28 ++++++++++++++-----
 .../src/renderer/src/pages/Category/index.tsx |  2 +-
 4 files changed, 40 insertions(+), 12 deletions(-)

diff --git a/ui/autoMate/src/main/db/query.ts b/ui/autoMate/src/main/db/query.ts
index 75afbfe..2f8aab8 100644
--- a/ui/autoMate/src/main/db/query.ts
+++ b/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;
 }
\ No newline at end of file
diff --git a/ui/autoMate/src/renderer/src/components/CategoryItem/index.tsx b/ui/autoMate/src/renderer/src/components/CategoryItem/index.tsx
index 362d4fc..bcf5adb 100644
--- a/ui/autoMate/src/renderer/src/components/CategoryItem/index.tsx
+++ b/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>
diff --git a/ui/autoMate/src/renderer/src/pages/Category/CategoryAction.ts b/ui/autoMate/src/renderer/src/pages/Category/CategoryAction.ts
index 55d4a05..cefc019 100644
--- a/ui/autoMate/src/renderer/src/pages/Category/CategoryAction.ts
+++ b/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 {}
+}   
diff --git a/ui/autoMate/src/renderer/src/pages/Category/index.tsx b/ui/autoMate/src/renderer/src/pages/Category/index.tsx
index 9f43b0a..ede64d6 100644
--- a/ui/autoMate/src/renderer/src/pages/Category/index.tsx
+++ b/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/>