✨ 更新(ui/autoMate): 添加Content页面及相关加载组件

🚀 部署(ui/autoMate): 修改路由配置，实现Content页面导航
🔧 更新(ui/autoMate): 更新类型定义文件以支持ContentType

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())`)
 // }

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">

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>
+}

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")
+}

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
+}

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;

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>)
 }

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 />
+              }
+            ]
           }
         ]
       }

ui/autoMate/types.d.ts

@@ -4,4 +4,12 @@ type CategoryType = {
     id: number
     name: string
     createdAt: string
-} 
+}
+
+type ContentType = {
+    id: number
+    title: string
+    content: string
+    category_id: string
+    createdAt: string
+}