From 69a2ee316241d48c37378fed3d6761cbc8340779 Mon Sep 17 00:00:00 2001
From: ruotongyu <yuruotong@ceshiren.com>
Date: Sun, 16 Jun 2024 16:26:23 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20=E6=9B=B4=E6=96=B0(ui/autoMate):=20?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0Content=E9=A1=B5=E9=9D=A2=E5=8F=8A=E7=9B=B8?=
 =?UTF-8?q?=E5=85=B3=E5=8A=A0=E8=BD=BD=E7=BB=84=E4=BB=B6=20=F0=9F=9A=80=20?=
 =?UTF-8?q?=E9=83=A8=E7=BD=B2(ui/autoMate):=20=E4=BF=AE=E6=94=B9=E8=B7=AF?=
 =?UTF-8?q?=E7=94=B1=E9=85=8D=E7=BD=AE=EF=BC=8C=E5=AE=9E=E7=8E=B0Content?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E5=AF=BC=E8=88=AA=20=F0=9F=94=A7=20=E6=9B=B4?=
 =?UTF-8?q?=E6=96=B0(ui/autoMate):=20=E6=9B=B4=E6=96=B0=E7=B1=BB=E5=9E=8B?=
 =?UTF-8?q?=E5=AE=9A=E4=B9=89=E6=96=87=E4=BB=B6=E4=BB=A5=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?ContentType?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/autoMate/src/main/db/tables.ts                 |  6 ++++++
 .../src/renderer/src/pages/Category/index.tsx     |  9 ++++++++-
 .../src/renderer/src/pages/Content/Content.tsx    |  6 ++++++
 .../renderer/src/pages/Content/ContentLoader.ts   |  3 +++
 .../src/pages/ContentList/ContentListLoader.ts    |  4 ++++
 .../renderer/src/pages/ContentList/content.scss   |  5 ++++-
 .../src/renderer/src/pages/ContentList/index.tsx  | 15 +++++++++++++--
 ui/autoMate/src/renderer/src/router/index.tsx     | 13 ++++++++++++-
 ui/autoMate/types.d.ts                            | 10 +++++++++-
 9 files changed, 65 insertions(+), 6 deletions(-)
 create mode 100644 ui/autoMate/src/renderer/src/pages/Content/Content.tsx
 create mode 100644 ui/autoMate/src/renderer/src/pages/Content/ContentLoader.ts
 create mode 100644 ui/autoMate/src/renderer/src/pages/ContentList/ContentListLoader.ts

diff --git a/ui/autoMate/src/main/db/tables.ts b/ui/autoMate/src/main/db/tables.ts
index 32daa6d..0f2ebb7 100644
--- a/ui/autoMate/src/main/db/tables.ts
+++ b/ui/autoMate/src/main/db/tables.ts
@@ -23,4 +23,10 @@ CREATE TABLE IF NOT EXISTS contents (
 // for (let i = 0; i < 20; i++) {
 //     const name = Random.title(5, 10)
 //     db.exec(`insert into categories (name, created_at) values('${name}', datetime())`)
+// }
+
+// for (let i = 1; i < 20; i++) {
+//     const title = Random.title(5, 10)
+//     const content = Random.paragraph(5, 10)
+//     db.exec(`insert into contents (title, content, category_id, created_at) values('${title}', '${content}', ${i}, datetime())`)
 // }
\ No newline at end of file
diff --git a/ui/autoMate/src/renderer/src/pages/Category/index.tsx b/ui/autoMate/src/renderer/src/pages/Category/index.tsx
index ca8c80c..462ffbe 100644
--- a/ui/autoMate/src/renderer/src/pages/Category/index.tsx
+++ b/ui/autoMate/src/renderer/src/pages/Category/index.tsx
@@ -1,9 +1,16 @@
-import { Link, NavLink, Outlet, useLoaderData } from "react-router-dom"
+import { Link, NavLink, Outlet, useLoaderData, useNavigate } from "react-router-dom"
 import "./category.scss"
 import { Add, DatabaseConfig } from "@icon-park/react"
+import { useEffect } from "react"
 
 export const Category = () => {
     const categories = useLoaderData() as CategoryType[]
+    const navigate = useNavigate()
+    useEffect(() => {
+        if (categories) {
+            navigate(`/config/category/contentList/${categories[0].id}`)
+        }
+    }, [categories])
     return (
     <main className="category-page">
         <div className="categories">
diff --git a/ui/autoMate/src/renderer/src/pages/Content/Content.tsx b/ui/autoMate/src/renderer/src/pages/Content/Content.tsx
new file mode 100644
index 0000000..abab1fe
--- /dev/null
+++ b/ui/autoMate/src/renderer/src/pages/Content/Content.tsx
@@ -0,0 +1,6 @@
+import { useLoaderData } from "react-router-dom"
+
+export const Content = () => {
+    const content = useLoaderData() as ContentType
+    return <div>{content.content}</div>
+}
\ No newline at end of file
diff --git a/ui/autoMate/src/renderer/src/pages/Content/ContentLoader.ts b/ui/autoMate/src/renderer/src/pages/Content/ContentLoader.ts
new file mode 100644
index 0000000..1cce31f
--- /dev/null
+++ b/ui/autoMate/src/renderer/src/pages/Content/ContentLoader.ts
@@ -0,0 +1,3 @@
+export default async({params}) => {
+    return window.api.sql(`select * from contents where id = ${params.id}`, "findOne")
+}
diff --git a/ui/autoMate/src/renderer/src/pages/ContentList/ContentListLoader.ts b/ui/autoMate/src/renderer/src/pages/ContentList/ContentListLoader.ts
new file mode 100644
index 0000000..9963786
--- /dev/null
+++ b/ui/autoMate/src/renderer/src/pages/ContentList/ContentListLoader.ts
@@ -0,0 +1,4 @@
+export default async({params}) => {
+    const res = await window.api.sql(`select * from contents where category_id=${params.cid}`, "findAll")
+    return res
+}
\ No newline at end of file
diff --git a/ui/autoMate/src/renderer/src/pages/ContentList/content.scss b/ui/autoMate/src/renderer/src/pages/ContentList/content.scss
index 5f44145..65f348b 100644
--- a/ui/autoMate/src/renderer/src/pages/ContentList/content.scss
+++ b/ui/autoMate/src/renderer/src/pages/ContentList/content.scss
@@ -3,8 +3,11 @@
     display: grid;
     grid-template: "list content" auto / 150px auto;
     .list{
-        @apply bg-slate-50 border-r;
+        @apply bg-slate-50 border-r overflow-y-auto;
         grid-area: list;
+        a {
+            @apply block truncate py-1 px-1 cursor-pointer;
+        }
     }
     .content{
         grid-area: content;
diff --git a/ui/autoMate/src/renderer/src/pages/ContentList/index.tsx b/ui/autoMate/src/renderer/src/pages/ContentList/index.tsx
index 78d7bdd..1643167 100644
--- a/ui/autoMate/src/renderer/src/pages/ContentList/index.tsx
+++ b/ui/autoMate/src/renderer/src/pages/ContentList/index.tsx
@@ -1,8 +1,19 @@
+import { NavLink, Outlet, useLoaderData } from "react-router-dom"
 import "./content.scss"
 
 export const ContentList = () => {
+    const contentList = useLoaderData() as ContentType[]
     return (<main className="content-page">
-        <div className="list">list</div>
-        <div className="content">content</div>
+        <div className="list">
+            {contentList.map(content => (
+                <NavLink 
+                   key={content.id} 
+                   to={`/config/category/contentList/${content.category_id}/content/${content.id}`}
+                   className={({ isActive }) => `${isActive ? "active" : ""}`}> {content.title} </NavLink>
+            ))}
+        </div>
+        <div className="content">
+            <Outlet />
+        </div>
     </main>)
 }
\ No newline at end of file
diff --git a/ui/autoMate/src/renderer/src/router/index.tsx b/ui/autoMate/src/renderer/src/router/index.tsx
index 5c0bed0..8bdeb59 100644
--- a/ui/autoMate/src/renderer/src/router/index.tsx
+++ b/ui/autoMate/src/renderer/src/router/index.tsx
@@ -4,6 +4,9 @@ import { createHashRouter } from "react-router-dom";
 import {Category} from "@renderer/pages/Category";
 import { ContentList } from "@renderer/pages/ContentList";
 import CategoryLoader from "@renderer/pages/Category/CategoryLoader";
+import ContentListLoader from "@renderer/pages/ContentList/ContentListLoader";
+import ContentLoader from "@renderer/pages/Content/ContentLoader";
+import { Content } from "@renderer/pages/Content/Content";
 
 const router = createHashRouter([
   {
@@ -22,7 +25,15 @@ const router = createHashRouter([
         children: [
           {
             path: "contentList/:cid",
-            element: <ContentList />
+            loader: ContentListLoader,
+            element: <ContentList />,
+            children: [
+              {
+                path: "content/:id",
+                loader: ContentLoader,
+                element: <Content />
+              }
+            ]
           }
         ]
       }
diff --git a/ui/autoMate/types.d.ts b/ui/autoMate/types.d.ts
index d325c05..af8cfed 100644
--- a/ui/autoMate/types.d.ts
+++ b/ui/autoMate/types.d.ts
@@ -4,4 +4,12 @@ type CategoryType = {
     id: number
     name: string
     createdAt: string
-} 
\ No newline at end of file
+}
+
+type ContentType = {
+    id: number
+    title: string
+    content: string
+    category_id: string
+    createdAt: string
+}
\ No newline at end of file