You've already forked DataMate
refactor(Sidebar): 优化侧边栏菜单激活项初始化逻辑
- 添加 useCallback 包装 initActiveItem 函数以提升性能 - 引入 isPathMatch 工具函数替代简单的路径匹配逻辑 - 重构菜单项遍历逻辑,使用 for...of 循环替代 forEach - 修复路径匹配逻辑,统一处理 /data/ 路径前缀 - 移除未使用的 Sparkles 图标导入 - 更新 useEffect 依赖数组以
This commit is contained in:
@@ -1,11 +1,11 @@
|
|||||||
import { memo, useEffect, useState } from "react";
|
import { memo, useCallback, useEffect, useState } from "react";
|
||||||
import { Button, Drawer, Menu, Popover } from "antd";
|
import { Button, Drawer, Menu, Popover } from "antd";
|
||||||
import {
|
import {
|
||||||
CloseOutlined,
|
CloseOutlined,
|
||||||
MenuOutlined,
|
MenuOutlined,
|
||||||
SettingOutlined,
|
SettingOutlined,
|
||||||
} from "@ant-design/icons";
|
} from "@ant-design/icons";
|
||||||
import { ClipboardList, Sparkles, X } from "lucide-react";
|
import { ClipboardList, X } from "lucide-react";
|
||||||
import { menuItems } from "@/pages/Layout/menu";
|
import { menuItems } from "@/pages/Layout/menu";
|
||||||
import { NavLink, useLocation, useNavigate } from "react-router";
|
import { NavLink, useLocation, useNavigate } from "react-router";
|
||||||
import TaskUpload from "./TaskUpload";
|
import TaskUpload from "./TaskUpload";
|
||||||
@@ -13,6 +13,9 @@ import SettingsPage from "../SettingsPage/SettingsPage";
|
|||||||
import { useAppSelector, useAppDispatch } from "@/store/hooks";
|
import { useAppSelector, useAppDispatch } from "@/store/hooks";
|
||||||
import { showSettings, hideSettings } from "@/store/slices/settingsSlice";
|
import { showSettings, hideSettings } from "@/store/slices/settingsSlice";
|
||||||
|
|
||||||
|
const isPathMatch = (currentPath: string, targetPath: string) =>
|
||||||
|
currentPath === targetPath || currentPath.startsWith(`${targetPath}/`);
|
||||||
|
|
||||||
const AsiderAndHeaderLayout = () => {
|
const AsiderAndHeaderLayout = () => {
|
||||||
const { pathname } = useLocation();
|
const { pathname } = useLocation();
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
@@ -23,27 +26,27 @@ const AsiderAndHeaderLayout = () => {
|
|||||||
const dispatch = useAppDispatch();
|
const dispatch = useAppDispatch();
|
||||||
|
|
||||||
// Initialize active item based on current pathname
|
// Initialize active item based on current pathname
|
||||||
const initActiveItem = () => {
|
const initActiveItem = useCallback(() => {
|
||||||
|
const dataPath = pathname.startsWith("/data/") ? pathname.slice(6) : pathname;
|
||||||
for (let index = 0; index < menuItems.length; index++) {
|
for (let index = 0; index < menuItems.length; index++) {
|
||||||
const element = menuItems[index];
|
const element = menuItems[index];
|
||||||
if (element.children) {
|
if (element.children) {
|
||||||
element.children.forEach((subItem) => {
|
for (const subItem of element.children) {
|
||||||
if (pathname.includes(subItem.id)) {
|
if (isPathMatch(dataPath, subItem.id)) {
|
||||||
setActiveItem(subItem.id);
|
setActiveItem(subItem.id);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
});
|
}
|
||||||
} else if (pathname.includes(element.id)) {
|
} else if (isPathMatch(dataPath, element.id)) {
|
||||||
setActiveItem(element.id);
|
setActiveItem(element.id);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
console.log(pathname);
|
}, [pathname]);
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
initActiveItem();
|
initActiveItem();
|
||||||
}, [pathname]);
|
}, [initActiveItem]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const handleShowTaskPopover = (event: CustomEvent) => {
|
const handleShowTaskPopover = (event: CustomEvent) => {
|
||||||
|
|||||||
Reference in New Issue
Block a user