📝 更新(category.scss)：优化链接样式，添加活动状态样式

✨ 功能(index.tsx)：替换Link为NavLink组件，支持活动状态样式

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 {

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>