重构主导航栏父子菜单选中态与树形分支样式

2026-08-04 11:25:27 +08:00
parent e6f09eaf14
commit aa2eac8d51
3 changed files with 33 additions and 90 deletions
@@ -258,10 +258,12 @@ export default function MainLayout() {
            const isOpen = openKeys.includes(section.key)
            const isSelected = selectedKey === section.key
            const hasSelectedChild = section.children?.some((child) => child.key === selectedKey)
+            const isParentActive = hasSelectedChild
+            const isSingleActive = isSelected && !section.children?.length
            return (
              <div className="app-sidebar__group" key={section.key}>
                <button
-                  className={`app-sidebar__item${isSelected || hasSelectedChild ? ' app-sidebar__item--active' : ''}${section.disabled ? ' app-sidebar__item--disabled' : ''}`}
+                  className={`app-sidebar__item${isSingleActive ? ' app-sidebar__item--active' : ''}${isParentActive ? ' app-sidebar__item--parent-active' : ''}${section.disabled ? ' app-sidebar__item--disabled' : ''}`}
                  type="button"
                  onClick={() => toggleSection(section)}
                  title={collapsed ? section.label : undefined}