✨ 添加(components): 添加新的useContent钩子以支持更新内容分类

🚀 部署(components): 更新CategoryItem和ContentItem组件以支持拖动操作

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

@@ -1,8 +1,9 @@
 import { FolderClose } from "@icon-park/react"
-import { NavLink, useFetcher, useSubmit } from "react-router-dom"
+import { NavLink, useFetcher} from "react-router-dom"
 import styles from "./styles.module.scss"
 import { useStore } from "@renderer/store/useStore"
 import useCategory from "@renderer/hooks/useCategory"
+import useContent from "@renderer/hooks/useContent"
 interface Props {
   category: CategoryType
 }
@@ -13,22 +14,23 @@ export const CategoryItem = ({ category }: Props) => {
   const setEditCategoryId = useStore(state => state.setEditCategoryId)
   const editCategoryId = useStore(state => state.editCategoryId)
   const { contextMenu } = useCategory()
+  const { updateContentCategory } = useContent()
   return (
     <>
       {editCategoryId == category.id ? (
         <div className={styles.input}>
-          <input 
-          defaultValue={category.name} 
-          name="name" 
-          autoFocus 
-          onKeyDown={
-            (e) => {
-              if (e.key === 'Enter') {
-                fetcher.submit({ id: category.id, name: e.currentTarget.value }, { method: 'PUT' })
-                setEditCategoryId(0)
+          <input
+            defaultValue={category.name}
+            name="name"
+            autoFocus
+            onKeyDown={
+              (e) => {
+                if (e.key === 'Enter') {
+                  fetcher.submit({ id: category.id, name: e.currentTarget.value }, { method: 'PUT' })
+                  setEditCategoryId(0)
+                }
               }
             }
-          }
           />
         </div>
       ) :
@@ -44,6 +46,18 @@ export const CategoryItem = ({ category }: Props) => {
             return isActive ? styles.active : styles.link
           }}
           onContextMenu={contextMenu(category)}
+          onDragOver={(e)=>{
+            e.preventDefault()
+            e.currentTarget.classList.add(styles.draging)
+          }}
+          onDragLeave={(e)=>{
+            e.currentTarget.classList.remove(styles.draging)
+          }}
+          onDrop={(e)=>{
+            e.currentTarget.classList.remove(styles.draging)
+            const id = e.dataTransfer.getData("id")
+            updateContentCategory(Number(id), category.id)
+          }}
         >
           <div className="flex items-center gap-1">
             <FolderClose theme="outline" size="12" strokeWidth={3}></FolderClose>

ui/autoMate/src/renderer/src/components/CategoryItem/styles.module.scss

@@ -24,4 +24,8 @@ $height: 32px;
     input {
         @apply h-full w-full rounded-md px-2 border outline-none;
     }
+}
+
+.draging{
+    @apply bg-slate-400 text-white;
 }

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

@@ -16,8 +16,8 @@ const { showContextMenu } = useContextMenu();
         className={({isActive})=>{
             return [isActive ? styles.active : '', styles.link].join(' ')
         }}
-        onDragStart={(_e)=>{
-          console.log("drag")
+        onDragStart={(e)=>{
+          e.dataTransfer.setData('id', String(content.id))
         }}
         onContextMenu={showContextMenu([
         {

ui/autoMate/src/renderer/src/hooks/useContent.ts

@@ -0,0 +1,15 @@
+import { useNavigate } from "react-router-dom"
+
+export default  () => {
+    const navigate = useNavigate()
+    const updateContentCategory = async(id: number, category_id: number) => {
+        await window.api.sql(
+            `UPDATE contents set category_id=@category_id WHERE id=@id`,
+            "update",
+            {category_id, id}
+        )
+        navigate(`/config/category/contentList/${category_id}/content/${id}`)
+
+    }
+    return {updateContentCategory}
+}