✨ 添加(category.scss)：更新页面布局样式

📝 添加(index.tsx)：添加内容页面组件
📝 添加(content.scss)：添加内容页面样式
📝 添加(index.tsx)：添加内容页面组件
🔧 添加(router/index.tsx)：更新路由配置，将内容页面添加到分类页面中

ui/autoMate/src/renderer/src/pages/Category/category.scss

@@ -3,16 +3,16 @@
     display: grid;
     grid-template:
         "categories content" auto
-        "nav content" 30px/120px auto;
+        "nav content" 30px/100px auto;
     
 
     .categories{
-        @apply border-r;
+        @apply border-r bg-slate-100 text-xs text-slate-700;
         grid-area: categories;
     }
 
     .nav {
-        @apply border-t border-r;
+        @apply border-t border-r bg-slate-100 flex justify-center items-center gap-2;
         grid-area: nav;
     }
 

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

@@ -1,11 +1,18 @@
+import { Outlet } from "react-router-dom"
 import "./category.scss"
+import { Add, DatabaseConfig } from "@icon-park/react"
 
 export const Category = () => {
     return (
     <main className="category-page">
-        <div className="categories">categories</div>
-        <div className="nav">nav</div>
-        <div className="content">content</div>
+        <div className="categories">vue.js</div>
+        <div className="nav">
+        <Add theme="outline" size="20" fill="#333"/>
+        <DatabaseConfig theme="outline" size="20" fill="#333"/>
+        </div>
+        <div className="content">
+            <Outlet></Outlet>
+        </div>
     </main>
  )
 }

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

@@ -0,0 +1,12 @@
+.content-page{
+    @apply h-screen  text-xs text-slate-700;
+    display: grid;
+    grid-template: "list content" auto / 150px auto;
+    .list{
+        @apply bg-slate-50 border-r;
+        grid-area: list;
+    }
+    .content{
+        grid-area: content;
+    }
+}

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

@@ -0,0 +1,8 @@
+import "./content.scss"
+
+export const Content = () => {
+    return (<main className="content-page">
+        <div className="list">list</div>
+        <div className="content">content</div>
+    </main>)
+}

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

@@ -2,6 +2,7 @@ import Config from "@renderer/pages/Config";
 import Home from "@renderer/pages/Home";
 import { createHashRouter } from "react-router-dom";
 import {Category} from "@renderer/pages/Category";
+import { Content } from "@renderer/pages/Content";
 
 const router = createHashRouter([
   {
@@ -13,9 +14,15 @@ const router = createHashRouter([
     element: <Config />,
     children: [
       {
+        path: "",
         // 界面第一次打开时，默认显示的页面
-        index: true,
-        element: <Category />
+        element: <Category />,
+        children: [
+          {
+            index: true,
+            element: <Content />
+          }
+        ]
       }
     ]
   }