新功能(ContentListAction.ts):添加内容列表动作处理函数

 新功能(index.tsx):添加“添加”按钮及相关逻辑处理
   新功能(router/index.tsx):将内容列表动作处理函数与路由关联
This commit is contained in:
ruotongyu
2024-06-18 21:43:28 +08:00
parent d41bb24a72
commit 00d071c084
3 changed files with 27 additions and 1 deletions

View File

@@ -0,0 +1,13 @@
export default async ({request}) => {
const formData = await request.formData()
switch(formData.get("action")){
case "add":
await window.api.sql(
`insert into contents (title, content, created_at) values ('未命名', '', datetime())`,
"create")
break
}
return {}
}

View File

@@ -1,12 +1,14 @@
import { Form, NavLink, Outlet, useLoaderData, useSubmit} from "react-router-dom"
import "./contentList.scss"
import dayjs from "dayjs"
import { Add } from "@icon-park/react"
export const ContentList = () => {
const contentList = useLoaderData() as ContentType[]
const submit = useSubmit()
return (<main className="contentList-page">
<div className="list">
<Form>
<div className="border-b px-3 flex justify-between items-center">
<input
@@ -18,7 +20,17 @@ export const ContentList = () => {
submit(e.target.form)
}}
/>
<Add
theme="outline"
size="18"
fill="#000000"
strokeWidth={2}
onClick={()=>{
submit({action: 'add'}, {method: 'post'})
}}
/>
</div>
</Form>
{contentList.map(content => (
<NavLink
key={content.id}
@@ -28,7 +40,6 @@ export const ContentList = () => {
<div className="text-[10px] opacity-80 ">{dayjs(content.created_at).format("YYYY/MM/DD")}</div>
</NavLink>
))}
</Form>
</div>
<div className="content">
<Outlet />

View File

@@ -9,6 +9,7 @@ import ContentLoader from "@renderer/pages/Content/ContentLoader";
import { Content } from "@renderer/pages/Content/Content";
import ContentAction from "@renderer/pages/Content/ContentAction";
import { Welcome } from "@renderer/pages/Welcome";
import ContentListAction from "@renderer/pages/ContentList/ContentListAction";
const router = createHashRouter([
{
@@ -28,6 +29,7 @@ const router = createHashRouter([
{
path: "contentList/:cid?",
loader: ContentListLoader,
action: ContentListAction,
element: <ContentList />,
children: [
{