From 543cf8e9b68fba9d7149d1c0697e1d9203930c90 Mon Sep 17 00:00:00 2001
From: ruotongyu <yuruotong@ceshiren.com>
Date: Sun, 16 Jun 2024 12:29:34 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=9D=20=E6=9B=B4=E6=96=B0(category.scss?=
 =?UTF-8?q?)=EF=BC=9A=E4=BC=98=E5=8C=96=E9=93=BE=E6=8E=A5=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=EF=BC=8C=E6=B7=BB=E5=8A=A0=E6=B4=BB=E5=8A=A8=E7=8A=B6?=
 =?UTF-8?q?=E6=80=81=E6=A0=B7=E5=BC=8F=20=20=20=E2=9C=A8=20=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD(index.tsx)=EF=BC=9A=E6=9B=BF=E6=8D=A2Link=E4=B8=BANav?=
 =?UTF-8?q?Link=E7=BB=84=E4=BB=B6=EF=BC=8C=E6=94=AF=E6=8C=81=E6=B4=BB?=
 =?UTF-8?q?=E5=8A=A8=E7=8A=B6=E6=80=81=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/autoMate/src/renderer/src/pages/Category/category.scss | 8 +++++++-
 ui/autoMate/src/renderer/src/pages/Category/index.tsx     | 8 ++++++--
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/ui/autoMate/src/renderer/src/pages/Category/category.scss b/ui/autoMate/src/renderer/src/pages/Category/category.scss
index 85f368e..412e01b 100644
--- a/ui/autoMate/src/renderer/src/pages/Category/category.scss
+++ b/ui/autoMate/src/renderer/src/pages/Category/category.scss
@@ -9,9 +9,15 @@
     .categories{
         @apply border-r bg-slate-100 text-xs text-slate-700 overflow-y-auto;
         grid-area: categories;
-        .item{
+        // link 编译完是 a 标题
+        a{
             @apply p-1 py-1 truncate cursor-pointer block;
+            &.active{
+                // mx-1 外边距
+                @apply bg-blue-700 text-white mx-1 rounded-md;
+            }
         }
+       
     }
 
     .nav {
diff --git a/ui/autoMate/src/renderer/src/pages/Category/index.tsx b/ui/autoMate/src/renderer/src/pages/Category/index.tsx
index a035de9..ca8c80c 100644
--- a/ui/autoMate/src/renderer/src/pages/Category/index.tsx
+++ b/ui/autoMate/src/renderer/src/pages/Category/index.tsx
@@ -1,4 +1,4 @@
-import { Link, Outlet, useLoaderData } from "react-router-dom"
+import { Link, NavLink, Outlet, useLoaderData } from "react-router-dom"
 import "./category.scss"
 import { Add, DatabaseConfig } from "@icon-park/react"
 
@@ -8,7 +8,11 @@ export const Category = () => {
     <main className="category-page">
         <div className="categories">
             {categories.map((category) => (
-                <Link to={`/config/category/contentList/${category.id}`} key={category.id} className="item" >{category.name}</Link>
+                <NavLink 
+                to={`/config/category/contentList/${category.id}`} 
+                key={category.id} 
+                className={({isActive}) => (isActive ? 'active' : '')}
+                >{category.name}</NavLink>
             ))}
         </div>