starter\magzine\gitbook 主题dashboard元素

components/ui/dashboard/DashboardMenuList.js

@@ -1,34 +1,57 @@
 import Link from 'next/link'
 
+/**
+ * 仪表盘菜单
+ * @returns
+ */
+import { useRouter } from 'next/router'
+
 /**
  * 仪表盘菜单
  * @returns
  */
 export default function DashboardMenuList() {
+  const { asPath } = useRouter() // 获取当前路径
   const dashBoardMenus = [
-    { title: '控制台', href: '/dashboard' },
-    { title: '基础资料', href: '/dashboard/user-profile' },
-    { title: '我的会员', href: '/dashboard/membership' },
-    { title: '我的订单', href: '/dashboard/order' },
-    { title: '我的收藏', href: '/dashboard/favorite' }
+    { title: '仪表盘', icon: 'fas fa-gauge', href: '/dashboard' },
+    { title: '基础资料', icon: 'fas fa-user', href: '/dashboard/user-profile' },
+    { title: '我的余额', icon: 'fas fa-coins', href: '/dashboard/balance' },
+    { title: '我的会员', icon: 'fas fa-gem', href: '/dashboard/membership' },
+    {
+      title: '我的订单',
+      icon: 'fas fa-cart-shopping',
+      href: '/dashboard/order'
+    },
+    {
+      title: '推广中心',
+      icon: 'fas fa-hand-holding-usd',
+      href: '/dashboard/affiliate'
+    }
   ]
+
   return (
     <ul
       role='menu'
-      className='side-tabs-list bg-white border rounded-lg shadow-lg p-2 space-y-2'>
-      {dashBoardMenus?.map((item, index) => (
-        <li
-          role='menuitem'
-          key={index}
-          className='hover:bg-gray-100 rounded-lg cursor-pointer block'>
-          <Link
-            href={item.href}
-            className='block py-2 px-4 w-full' // 让 Link 填充整个 li
-          >
-            {item.title}
-          </Link>
-        </li>
-      ))}
+      className='side-tabs-list bg-white border rounded-lg shadow-lg p-2 space-y-2 mb-6'>
+      {dashBoardMenus.map((item, index) => {
+        // 判断当前菜单是否高亮
+        const isActive = asPath === item.href
+        return (
+          <li
+            role='menuitem'
+            key={index}
+            className={`rounded-lg cursor-pointer block ${
+              isActive ? 'bg-blue-100 text-blue-600' : 'hover:bg-gray-100'
+            }`}>
+            <Link
+              href={item.href}
+              className='block py-2 px-4 w-full items-center justify-center'>
+              <i className={`${item.icon} w-6 mr-2`}></i>
+              <span className='whitespace-nowrap'>{item.title}</span>
+            </Link>
+          </li>
+        )
+      })}
     </ul>
   )
 }