cavin/smart-crop-ui
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

生产管理系统前端 - 1.修改了左侧菜单的icon 2. 顶部菜单的绿色显示 test版本

Browse Source
This commit is contained in:
peng
2025-10-24 14:34:32 +08:00
parent e784e68404
commit 7615ca9895
6 changed files with 216 additions and 214 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
crop-x/src/components/layouts/SideBar/SideBarOld.tsx
View File

@@ -180,7 +180,7 @@ export function SideBarOld({
const menus = sidebarData.navMain.map(item => ({
id: item.url.replace(/\/[^\/]+/g, '').replace('/', '') || item.title.replace(/\s+/g, '-').toLowerCase(),
label: item.title,
icon: <span className="text-lg">{item.icon}</span>,
icon: item.icon,
children: item.items?.map(child => ({
id: child.url.split('/').pop() || child.title.replace(/\s+/g, '-').toLowerCase(),
label: child.title,

37
crop-x/src/components/layouts/SideBar/components/LeftSidebar.tsx
View File

@@ -44,6 +44,19 @@ export function LeftSidebar({
return new Set<string>();
};
// 检查菜单是否有子菜单被选中或是否应该高亮
const isMenuActive = (menu: MenuItem) => {
// 检查是否有子菜单被选中
if (menu.children?.some(child => child.path === activePath)) {
return true;
}
// 如果当前路径匹配菜单的URL（无子菜单的情况）
if (activePath && activePath.includes(menu.id)) {
return true;
}
return false;
};
const [expandedMenus, setExpandedMenus] = useState<Set<string>>(getInitialExpandedMenus());
// 不自动展开菜单，由用户手动控制
@@ -121,14 +134,18 @@ export function LeftSidebar({
<Button
variant="ghost"
className={cn(
"w-full justify-between text-sm font-normal",
isCollapsed ? "justify-center px-2 py-3" : "px-3 py-2"
"w-full justify-between text-sm font-normal group",
isCollapsed ? "justify-center px-2 py-3" : "px-3 py-2",
isMenuActive(menu) && "text-primary"
)}
title={isCollapsed ? menu.label : undefined}
>
<div className="flex items-center gap-2">
{menu.icon && (
<span className="flex-shrink-0">
<span className={cn(
"flex-shrink-0",
isMenuActive(menu) ? "text-primary" : "text-muted-foreground group-hover:text-primary"
)}>
{menu.icon}
</span>
)}
@@ -159,8 +176,8 @@ export function LeftSidebar({
className={cn(
"w-full justify-start text-xs font-normal h-8",
activePath === child.path
? "bg-green-50 text-green-700 font-medium hover:bg-green-50"
: "hover:bg-gray-100 hover:text-gray-900"
? "bg-primary/10 text-primary font-medium hover:bg-primary/10"
: "hover:bg-accent hover:text-foreground"
)}
onClick={() => child.path && onNavigate(child.path)}
>
@@ -175,14 +192,18 @@ export function LeftSidebar({
<Button
variant="ghost"
className={cn(
"w-full justify-start text-sm font-normal",
isCollapsed ? "justify-center px-2 py-3" : "px-3 py-2"
"w-full justify-start text-sm font-normal group",
isCollapsed ? "justify-center px-2 py-3" : "px-3 py-2",
isMenuActive(menu) && "text-primary"
)}
title={isCollapsed ? menu.label : undefined}
>
<div className="flex items-center gap-2">
{menu.icon && (
<span className="flex-shrink-0">
<span className={cn(
"flex-shrink-0",
isMenuActive(menu) ? "text-primary" : "text-muted-foreground group-hover:text-primary"
)}>
{menu.icon}
</span>
)}