🔧 更新：更新页面组件引入和样式排版

🔧 更新：更新提交按钮的触发方式
🔧 更新：更新布局样式，删除不必要的grid行
🔧 更新：更新页面跳转
✨ 添加：添加欢迎页面组件

ui/autoMate/src/renderer/src/pages/Category/index.tsx

@@ -1,25 +1,21 @@
-import { Link, NavLink, Outlet, useLoaderData, useNavigate } from "react-router-dom"
+import { NavLink, Outlet, useLoaderData } from "react-router-dom"
 import "./category.scss"
-import { Add, DatabaseConfig, FolderClose } from "@icon-park/react"
-import { useEffect } from "react"
+import { Add, AllApplication, DatabaseConfig, FolderClose } from "@icon-park/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">
+            {/* 加 end 是避免子路由被选中时，父路由也被选中 */}
+            <NavLink to={`/config/category/contentList`} end>
+                <AllApplication theme="outline" size="22" strokeWidth={3}/>
+                <div className="truncate">所有内容</div>
+            </NavLink>
             {categories.map((category) => (
                 <NavLink 
                 to={`/config/category/contentList/${category.id}`} 
-                key={category.id} 
-                className={({isActive}) => (isActive ? 'active' : '')}
-                >
+                key={category.id} >
                     <FolderClose theme="outline" size="12" strokeWidth={3}></FolderClose>
                     <div className="truncate">{category.name}</div>
                     </NavLink>

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

@@ -1,15 +1,17 @@
-import { Form, useLoaderData } from "react-router-dom"
+import { Form, useLoaderData, useSubmit } from "react-router-dom"
 import "./content.scss"
 export const Content = () => {
     const content = useLoaderData() as ContentType
+    const submit = useSubmit()
     return (
     <Form method="PUT">
     <main className="content-page" key={content.id}>
-        <input defaultValue={content.title} name="title"/>
-        <textarea defaultValue={content.content} name="content"/>
-        <div className="border-t flex items-center justify-center">
-            <button>保存</button>
-        </div>
+        <input defaultValue={content.title} name="title" onChange={(e) => {
+            submit(e.target.form)
+        }}/>
+        <textarea defaultValue={content.content} name="content" onChange={(e) => {
+            submit(e.target.form)
+        }}/>
     </main>
     </Form>
     )

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

@@ -1,7 +1,7 @@
 .content-page{
     @apply h-screen;
     display: grid;
-    grid-template-rows: 50px 1fr 40px;
+    grid-template-rows: 50px 1fr;
     input{
         @apply text-lg outline-none bg-slate-50 p-3;
     }

ui/autoMate/src/renderer/src/pages/ContentList/index.tsx

@@ -5,12 +5,12 @@ import dayjs from "dayjs"
 
 export const ContentList = () => {
     const contentList = useLoaderData() as ContentType[]
-    const navigate = useNavigate()
-    useEffect(() => {
-        if (contentList) {
-            navigate(`/config/category/contentList/${contentList[0].category_id}/content/${contentList[0].id}`)
-        }
-    }, [contentList])
+    // const navigate = useNavigate()
+    // useEffect(() => {
+    //     if (contentList) {
+    //         navigate(`/config/category/contentList/${contentList[0].category_id}/content/${contentList[0].id}`)
+    //     }
+    // }, [contentList])
     return (<main className="contentList-page">
         <div className="list">
             {contentList.map(content => (

ui/autoMate/src/renderer/src/pages/Welcome/index.tsx

@@ -0,0 +1,11 @@
+import { Code } from "@icon-park/react"
+
+export const Welcome = () =>{
+    return (
+        
+        <div className="h-screen flex flex-col items-center justify-center text-sm text-slate-600 opacity-80">
+            <Code theme="outline" size='48' fill="#0a0707ab" strokeWidth={3}></Code>
+            autoMate让生活更简单
+        </div>
+    )
+}

ui/autoMate/src/renderer/src/router/index.tsx

@@ -8,6 +8,7 @@ import ContentListLoader from "@renderer/pages/ContentList/ContentListLoader";
 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";
 
 const router = createHashRouter([
   {
@@ -24,6 +25,10 @@ const router = createHashRouter([
         element: <Category />,
         loader: CategoryLoader,
         children: [
+          {
+            index: true,
+            element: <Welcome />
+          },
           {
             path: "contentList/:cid",
             loader: ContentListLoader,