Commit 230b53ca authored by Andy-bubu's avatar Andy-bubu

feat: add collapsible sidebar navigation groups

parent 34a0ef70
...@@ -2,8 +2,8 @@ import xyLogoWhite from '@/assets/xy-logo-white.png'; ...@@ -2,8 +2,8 @@ import xyLogoWhite from '@/assets/xy-logo-white.png';
import { APPLICATION_DISPLAY_NAME } from '@/config/application'; import { APPLICATION_DISPLAY_NAME } from '@/config/application';
import { Sheet } from '@heroui-pro/react'; import { Sheet } from '@heroui-pro/react';
import { Sidebar, useSidebar } from '@heroui-pro/react/sidebar'; import { Sidebar, useSidebar } from '@heroui-pro/react/sidebar';
import { Avatar, Button, Dropdown, Label } from '@heroui/react'; import { Avatar, Button, Disclosure, Dropdown, Label } from '@heroui/react';
import { AppGrid, LogOut } from './AppIcons'; import { AppGrid, ChevronDown, LogOut } from './AppIcons';
function getUserDisplay(userInfo) { function getUserDisplay(userInfo) {
const displayName = userInfo?.display_name || userInfo?.username || '当前用户'; const displayName = userInfo?.display_name || userInfo?.username || '当前用户';
...@@ -65,6 +65,54 @@ function SidebarContents({ ...@@ -65,6 +65,54 @@ function SidebarContents({
pathname, pathname,
userInfo, userInfo,
}) { }) {
const renderMenu = (group) => (
<Sidebar.Menu aria-label={group.title}>
{group.items.map((item) => {
const Icon = item.icon;
return (
<Sidebar.MenuItem
href={item.path}
isCurrent={pathname === item.path}
key={item.path}
textValue={item.name}
tooltip={item.name}
>
<Sidebar.MenuIcon>
<Icon size={16} />
</Sidebar.MenuIcon>
<Sidebar.MenuLabel>{item.name}</Sidebar.MenuLabel>
</Sidebar.MenuItem>
);
})}
</Sidebar.Menu>
);
const renderGroup = (group) => {
const hasCurrentItem = group.items.some((item) => pathname === item.path);
const GroupIcon = group.icon;
return (
<Sidebar.Group key={group.title}>
<Disclosure defaultExpanded={hasCurrentItem}>
<Disclosure.Heading>
<Sidebar.GroupLabel>
<Disclosure.Trigger className="flex w-full min-w-0 items-center gap-2 text-left">
{GroupIcon ? <GroupIcon size={16} /> : null}
<span className="min-w-0 flex-1 truncate">{group.title}</span>
<Disclosure.Indicator>
<ChevronDown size={14} />
</Disclosure.Indicator>
</Disclosure.Trigger>
</Sidebar.GroupLabel>
</Disclosure.Heading>
<Disclosure.Content>
<Disclosure.Body>{renderMenu(group)}</Disclosure.Body>
</Disclosure.Content>
</Disclosure>
</Sidebar.Group>
);
};
return ( return (
<> <>
<Sidebar.Header> <Sidebar.Header>
...@@ -104,30 +152,9 @@ function SidebarContents({ ...@@ -104,30 +152,9 @@ function SidebarContents({
<Sidebar.Content> <Sidebar.Content>
{menuGroups.map((group) => ( {menuGroups.map((group) => (
<Sidebar.Group key={group.title}> group.showLabel === false ? (
{group.showLabel !== false ? ( <Sidebar.Group key={group.title}>{renderMenu(group)}</Sidebar.Group>
<Sidebar.GroupLabel>{group.title}</Sidebar.GroupLabel> ) : renderGroup(group)
) : null}
<Sidebar.Menu aria-label={group.title}>
{group.items.map((item) => {
const Icon = item.icon;
return (
<Sidebar.MenuItem
href={item.path}
isCurrent={pathname === item.path}
key={item.path}
textValue={item.name}
tooltip={item.name}
>
<Sidebar.MenuIcon>
<Icon size={16} />
</Sidebar.MenuIcon>
<Sidebar.MenuLabel>{item.name}</Sidebar.MenuLabel>
</Sidebar.MenuItem>
);
})}
</Sidebar.Menu>
</Sidebar.Group>
))} ))}
</Sidebar.Content> </Sidebar.Content>
......
...@@ -7,6 +7,8 @@ import { ...@@ -7,6 +7,8 @@ import {
Archive, Archive,
BarChart, BarChart,
FileText, FileText,
Folder,
Group,
Project, Project,
} from '@/components/AppIcons'; } from '@/components/AppIcons';
import ApplicationSwitcherDialog from './ApplicationSwitcherDialog'; import ApplicationSwitcherDialog from './ApplicationSwitcherDialog';
...@@ -21,7 +23,7 @@ import { Outlet, useLocation } from 'umi'; ...@@ -21,7 +23,7 @@ import { Outlet, useLocation } from 'umi';
const MENU_GROUPS = [ const MENU_GROUPS = [
{ {
title: APPLICATION_DISPLAY_NAME, title: '基础导航',
showLabel: false, showLabel: false,
items: [ items: [
{ {
...@@ -29,6 +31,12 @@ const MENU_GROUPS = [ ...@@ -29,6 +31,12 @@ const MENU_GROUPS = [
path: '/audit_project_table/dashboard', path: '/audit_project_table/dashboard',
icon: BarChart, icon: BarChart,
}, },
],
},
{
title: '开展审计工作',
icon: Group,
items: [
{ {
name: '审计项目管理', name: '审计项目管理',
path: '/audit_project', path: '/audit_project',
...@@ -39,6 +47,12 @@ const MENU_GROUPS = [ ...@@ -39,6 +47,12 @@ const MENU_GROUPS = [
path: '/audit_project_archive', path: '/audit_project_archive',
icon: Archive, icon: Archive,
}, },
],
},
{
title: '表单配置及维护',
icon: Folder,
items: [
{ {
name: '项目表单', name: '项目表单',
path: '/project_form', path: '/project_form',
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment