refactor: 重构导航栏路由，修复跳转失败的问题

app/home/main/components/infoCard.tsx

@@ -31,7 +31,7 @@ export function InfoCard(props: InfoCardProps) {
   const progressPercent =
     props.value !== 0 ? Math.round((props.value / props.total) * 100) : 0;
   // 使用线性渐变设置背景色
-  // 这里我们使用绿色表示进度，你可以根据需要更改颜色
+  // 可以根据需要更改颜色
   const backgroundColor = `linear-gradient(90deg, ${props.backgroundFillColor} ${progressPercent}%, ${props.backgroundColor} ${progressPercent}%)`;
   return (
     <Card

app/home/utils/leftSide.tsx

@@ -1,24 +1,21 @@
-import {
-  IconHome,
-  IconSemiLogo,
-  IconServer,
-  IconUserGroup,
-} from "@douyinfe/semi-icons";
+import { IconSemiLogo } from "@douyinfe/semi-icons";
+import { IconBanner, IconList, IconToken } from "@douyinfe/semi-icons-lab";
 import { Nav } from "@douyinfe/semi-ui";
-import Link from "next/link";
+import { useRouter } from "next/navigation";
 import { usePathname } from "next/navigation";
 import { useCallback, useEffect, useMemo } from "react";
 
 import { useSSEContext } from "@/app/home/utils/sseContext";
 
 const routerMap: Record<string, string> = {
-  Home: "/home/main",
-  Network: "/home/xui",
-  Service: "/home/service",
+  home: "/home/main",
+  network: "/home/xui",
+  service: "/home/service",
 };
 
 function LeftSide() {
   const pathname = usePathname();
+  const router = useRouter();
 
   const selectedKeys = useMemo(() => {
     const keys = Object.keys(routerMap);
@@ -58,29 +55,19 @@ function LeftSide() {
         isCollapsed={isNavCollapsed}
         onCollapseChange={(isCollapse) => toggleNav(isCollapse)}
         style={{ height: "100vh", width: navWidth }}
-        renderWrapper={({ itemElement, props }) => {
-          const itemKey = props.itemKey as string;
-          const href = routerMap[itemKey] as string;
-          return (
-            <div style={{ marginBottom: "15px" }}>
-              <Link style={{ textDecoration: "none" }} href={href} prefetch={true} replace={true} passHref={true} shallow={true}>
-                <div>{itemElement}</div>
-              </Link>
-            </div>
-          );
-        }}
         footer={{ collapseButton: true }}
-        items={[
-          { itemKey: "Home", text: "概览", icon: <IconHome /> },
-          { itemKey: "Service", text: "服务监控", icon: <IconServer /> },
-          { itemKey: "Network", text: "用户列表", icon: <IconUserGroup /> },
-        ]}
-        defaultSelectedKeys={selectedKeys}
+        onClick={(data) => {
+          router.push(routerMap[data.itemKey as string]!);
+        }}
+        selectedKeys={selectedKeys}
       >
         <Nav.Header
           logo={<IconSemiLogo style={{ height: "36px", fontSize: 36 }} />}
           text={"Hamster's Home"}
         />
+        <Nav.Item itemKey={"home"} text={"概览"} icon={<IconBanner />} />
+        <Nav.Item itemKey={"service"} text={"服务监控"} icon={<IconToken />} />
+        <Nav.Item itemKey={"network"} text={"用户列表"} icon={<IconList />} />
       </Nav>
     </div>
   );

package.json

@@ -10,14 +10,15 @@
   },
   "dependencies": {
     "@douyinfe/semi-icons": "^2.48.0",
+    "@douyinfe/semi-icons-lab": "^2.48.0",
     "@douyinfe/semi-ui": "^2.48.0",
-    "@types/node": "20.10.1",
-    "@types/react": "18.2.39",
+    "@types/node": "20.10.3",
+    "@types/react": "18.2.41",
     "@types/react-dom": "18.2.17",
     "@typescript-eslint/eslint-plugin": "^6.13.1",
     "@typescript-eslint/parser": "^6.13.1",
     "@vercel/analytics": "^1.1.1",
-    "eslint": "8.54.0",
+    "eslint": "8.55.0",
     "eslint-config-next": "14.0.3",
     "eslint-config-turbo": "^1.10.16",
     "eslint-plugin-prettier": "^5.0.1",