From d41bb24a72d0db9d420d2b34a144f4458fff6dba Mon Sep 17 00:00:00 2001
From: ruotongyu <yuruotong@ceshiren.com>
Date: Tue, 18 Jun 2024 21:09:43 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20=E4=BF=AE=E5=A4=8D(db/query.ts)?=
 =?UTF-8?q?=EF=BC=9A=E6=9B=B4=E6=96=B0findAll=E5=87=BD=E6=95=B0=EF=BC=8C?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81=E4=BC=A0=E5=85=A5=E5=8F=82=E6=95=B0=20?=
 =?UTF-8?q?=F0=9F=90=9B=20=E4=BF=AE=E5=A4=8D(ContentListLoader.ts)?=
 =?UTF-8?q?=EF=BC=9A=E6=9B=B4=E6=96=B0ContentListLoader=EF=BC=8C=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E6=A0=B9=E6=8D=AE=E6=90=9C=E7=B4=A2=E8=AF=8D=E7=AD=9B?=
 =?UTF-8?q?=E9=80=89=E5=86=85=E5=AE=B9=20=F0=9F=8E=A8=20=E6=9B=B4=E6=96=B0?=
 =?UTF-8?q?(contentList.scss)=EF=BC=9A=E8=B0=83=E6=95=B4=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=EF=BC=8C=E5=A2=9E=E5=8A=A0=E6=90=9C=E7=B4=A2=E6=A0=8F=E5=AE=BD?=
 =?UTF-8?q?=E5=BA=A6=20=F0=9F=90=9B=20=E4=BF=AE=E5=A4=8D(index.tsx)?=
 =?UTF-8?q?=EF=BC=9A=E6=B7=BB=E5=8A=A0Form=E7=BB=84=E4=BB=B6=EF=BC=8C?=
 =?UTF-8?q?=E5=A4=84=E7=90=86=E6=90=9C=E7=B4=A2=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/autoMate/src/main/db/query.ts                  |  4 ++--
 .../src/pages/ContentList/ContentListLoader.ts    | 12 +++++++++---
 .../src/pages/ContentList/contentList.scss        |  2 +-
 .../src/renderer/src/pages/ContentList/index.tsx  | 15 +++++++++++----
 4 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/ui/autoMate/src/main/db/query.ts b/ui/autoMate/src/main/db/query.ts
index faf1e42..75afbfe 100644
--- a/ui/autoMate/src/main/db/query.ts
+++ b/ui/autoMate/src/main/db/query.ts
@@ -1,7 +1,7 @@
 import {db} from './connect'
 
-export const findAll = (sql: string) => {
-    return db.prepare(sql).all();
+export const findAll = (sql: string, params={}) => {
+    return db.prepare(sql).all(params);
 }
 
 export const findOne = (sql: string) => {
diff --git a/ui/autoMate/src/renderer/src/pages/ContentList/ContentListLoader.ts b/ui/autoMate/src/renderer/src/pages/ContentList/ContentListLoader.ts
index 1746dcc..7299c88 100644
--- a/ui/autoMate/src/renderer/src/pages/ContentList/ContentListLoader.ts
+++ b/ui/autoMate/src/renderer/src/pages/ContentList/ContentListLoader.ts
@@ -1,9 +1,15 @@
-export default async({params}) => {
+export default async({params, request}) => {
+    const url = new URL(request.url)
+    const searchWord = url.searchParams.get("searchWord")
     let sql = "select * from contents"
+    if (searchWord) {
+        sql += ` where title like @searchWord order by id desc`
+        console.log("hello")
+        return window.api.sql(sql, "findAll", {searchWord: `%${searchWord}%`})
+    }
     if (params.cid) {
         sql += ` where category_id=${params.cid}`
     }
     sql += " order by id desc"
-    const res = await window.api.sql(sql, "findAll")
-    return res
+    return  window.api.sql(sql, "findAll")
 }
\ No newline at end of file
diff --git a/ui/autoMate/src/renderer/src/pages/ContentList/contentList.scss b/ui/autoMate/src/renderer/src/pages/ContentList/contentList.scss
index 8c143dc..4fab0f1 100644
--- a/ui/autoMate/src/renderer/src/pages/ContentList/contentList.scss
+++ b/ui/autoMate/src/renderer/src/pages/ContentList/contentList.scss
@@ -1,7 +1,7 @@
 .contentList-page{
     @apply h-screen  text-xs text-slate-700;
     display: grid;
-    grid-template: "list content" auto / 150px auto;
+    grid-template: "list content" auto / 220px auto;
     .list{
         @apply border-r overflow-y-auto;
         grid-area: list;
diff --git a/ui/autoMate/src/renderer/src/pages/ContentList/index.tsx b/ui/autoMate/src/renderer/src/pages/ContentList/index.tsx
index b902260..371a750 100644
--- a/ui/autoMate/src/renderer/src/pages/ContentList/index.tsx
+++ b/ui/autoMate/src/renderer/src/pages/ContentList/index.tsx
@@ -1,18 +1,24 @@
-import { NavLink, Outlet, useLoaderData} from "react-router-dom"
+import { Form, NavLink, Outlet, useLoaderData, useSubmit} from "react-router-dom"
 import "./contentList.scss"
 import dayjs from "dayjs"
 
 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 
+                name="searchWord"
                 type="text" 
                 placeholder="搜索..." 
-                className="outline-none text-sm font-bold py-2 px-3 border-b
-                w-full"
-                
+                className="outline-none text-sm font-bold py-2 w-full"
+                onChange={(e) => {
+                    submit(e.target.form)
+                }}
             />
+            </div>
             {contentList.map(content => (
                 <NavLink 
                    key={content.id} 
@@ -22,6 +28,7 @@ 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 />