73 lines
2.2 KiB
TypeScript
73 lines
2.2 KiB
TypeScript
import IconFont from "@/components/IconFont";
|
|
import MenuRender from "@/layout/MenuRender.tsx";
|
|
import {useLayoutContext} from "@/layout/LayoutContext.tsx";
|
|
import {useTranslation} from "react-i18next";
|
|
import {theme} from "antd";
|
|
import useGlobalStore from "@/stores/global";
|
|
import React from "react";
|
|
import type {IMenus} from "@/domain/iSysRule.ts";
|
|
import {useNavigate} from "react-router";
|
|
|
|
const {useToken} = theme;
|
|
|
|
const ColumnsMenu: React.FC = () => {
|
|
const {t} = useTranslation();
|
|
const {token} = useToken();
|
|
const navigate = useNavigate();
|
|
const {menus, parentKey, collapsed, setParentKey, setSelectKey} = useLayoutContext();
|
|
const themeConfig = useGlobalStore(state => state.themeConfig);
|
|
|
|
const onMenuChange = (menu: IMenus) => {
|
|
if(!menu.key) return;
|
|
setParentKey(menu.key);
|
|
if(menu.type === 'menu') {
|
|
return;
|
|
}
|
|
setSelectKey([menu.key]);
|
|
// 外链路由
|
|
if(menu.type === 'route' && menu.link) {
|
|
window.open(menu.path, '_blank');
|
|
return;
|
|
}
|
|
if(menu.type === 'route' && menu.path) {
|
|
navigate(menu.path);
|
|
return;
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className={'flex h-full'}>
|
|
<div
|
|
className={'box-border shrink-0 h-full overflow-auto'}
|
|
style={{
|
|
borderRight: !collapsed ? "1px solid " + themeConfig.colorBorder : 'none',
|
|
width: 79
|
|
}}
|
|
>
|
|
{/* 侧栏一级菜单 */}
|
|
{menus.filter(item => item.hidden).map(rule => (
|
|
<div
|
|
key={rule.key}
|
|
style={{
|
|
backgroundColor: parentKey === rule.key ? token.colorPrimaryBg : 'transparent',
|
|
color: parentKey === rule.key ? token.colorPrimary : themeConfig.siderColor,
|
|
}}
|
|
className={"flex items-center justify-center flex-col p-2 mb-2 pt-3 pb-3 cursor-pointer"}
|
|
onClick={() => onMenuChange(rule)}
|
|
>
|
|
<IconFont name={rule.icon} style={{ fontSize: 18 }}/>
|
|
<span className={"mt-1 truncate w-full text-center"}>{rule.local ? t(rule.local) : rule.name}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
{ !collapsed && (
|
|
<div className={'flex-1 h-full overflow-y-auto'}>
|
|
<MenuRender />
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default ColumnsMenu;
|