✨ 添加(Content.tsx): 更新页面以支持内容类别选择功能

✨ 添加(ContentAction.ts): 更新内容更新操作，添加类别ID支持
  ✨ 添加(ContentLoader.ts): 通过API获取内容和类别信息
  🔧 更新(content.scss): 样式更新以支持下拉框选择功能

ui/autoMate/src/renderer/src/pages/Content/Content.tsx

@@ -1,7 +1,10 @@
 import { Form, useLoaderData, useSubmit } from "react-router-dom"
 import "./content.scss"
 export const Content = () => {
-    const content = useLoaderData() as ContentType
+    const {content, categories} = useLoaderData() as {
+        content: ContentType
+        categories: CategoryType[]
+    }
     const submit = useSubmit()
     return (
     <Form method="PUT">
@@ -9,6 +12,14 @@ export const Content = () => {
         <input autoFocus defaultValue={content.title} name="title" onChange={(e) => {
             submit(e.target.form)
         }}/>
+        <select name="category_id" value={content.category_id} onChange={(e)=>
+            submit(e.target.form)
+        }>
+            <option value="0">未分类</option>
+            {categories.map((category) => (
+                <option key={category.id} value={category.id}>{category.name}</option>
+            ))}
+        </select>
         <textarea placeholder="请输入内容..." defaultValue={content.content} name="content" onChange={(e) => {
             submit(e.target.form)
         }}/>

ui/autoMate/src/renderer/src/pages/Content/ContentAction.ts

@@ -2,10 +2,11 @@ export default async({request, params}) => {
     // params 接收路由中传递过来的数据
     const data = await request.formData()
     const res = window.api.sql(
-        `update contents set title=@title, content=@content where id=@id`, 
+        `update contents set title=@title, content=@content, category_id=@category_id where id=@id`, 
         "update",
         {title: data.get("title"), 
         content: data.get("content"), 
+        category_id: data.get("category_id"),
         id: params.id}
     )
     return res

ui/autoMate/src/renderer/src/pages/Content/ContentLoader.ts

@@ -1,3 +1,8 @@
 export default async({params}) => {
-    return window.api.sql(`select * from contents where id = ${params.id}`, "findOne")
+    const content = await window.api.sql(`select * from contents where id = ${params.id}`, "findOne")
+    const categories = await window.api.sql(`select * from categories order by id desc`, "findAll")
+    return {
+        content,
+        categories
+    }
 }

ui/autoMate/src/renderer/src/pages/Content/content.scss

@@ -1,12 +1,22 @@
 .content-page{
     @apply h-screen;
     display: grid;
-    grid-template-rows: 50px 1fr;
+    grid-template-rows: 50px 30px 1fr;
+    @mixin common {
+        @apply outline-none bg-slate-50;
+    }
     input{
-        @apply text-lg outline-none bg-slate-50 p-3;
+        @include common();
+        @apply text-lg p-3;
+    }
+
+    select{
+        @include common();
+        @apply w-full;
     }
 
     textarea{
-        @apply border-t pt-5 outline-none text-sm opacity-90 bg-slate-50 p-3;
+        @include common();
+        @apply border-t pt-5  text-sm opacity-90 p-3;
     }
 }