92 lines
2.0 KiB
TypeScript
92 lines
2.0 KiB
TypeScript
import React from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { NavBar, TabBar, Badge } from 'antd-mobile';
|
|
import {
|
|
AppOutline,
|
|
SearchOutline,
|
|
AddCircleOutline,
|
|
SetOutline,
|
|
BellOutline
|
|
} from 'antd-mobile-icons';
|
|
import { useNotificationStore } from '../../stores';
|
|
import './index.css';
|
|
|
|
interface LayoutProps {
|
|
children: React.ReactNode;
|
|
title?: string;
|
|
showBack?: boolean;
|
|
showTabBar?: boolean;
|
|
}
|
|
|
|
const Layout: React.FC<LayoutProps> = ({
|
|
children,
|
|
title = '药箱',
|
|
showBack = false,
|
|
showTabBar = true
|
|
}) => {
|
|
const navigate = useNavigate();
|
|
const { unreadCount } = useNotificationStore();
|
|
|
|
const tabs = [
|
|
{
|
|
key: '/',
|
|
title: '首页',
|
|
icon: <AppOutline />
|
|
},
|
|
{
|
|
key: '/medicines',
|
|
title: '药品',
|
|
icon: <SearchOutline />
|
|
},
|
|
{
|
|
key: '/quick-dispense',
|
|
title: '取药',
|
|
icon: <AddCircleOutline />
|
|
},
|
|
{
|
|
key: '/notifications',
|
|
title: '通知',
|
|
icon: <Badge content={unreadCount > 0 ? unreadCount : null}>
|
|
<BellOutline />
|
|
</Badge>
|
|
},
|
|
{
|
|
key: '/settings',
|
|
title: '设置',
|
|
icon: <SetOutline />
|
|
}
|
|
];
|
|
|
|
const handleTabChange = (key: string) => {
|
|
navigate(key);
|
|
};
|
|
|
|
return (
|
|
<div className="layout">
|
|
<div className="layout-header">
|
|
<NavBar
|
|
onBack={showBack ? () => navigate(-1) : undefined}
|
|
backArrow={showBack}
|
|
>
|
|
{title}
|
|
</NavBar>
|
|
</div>
|
|
|
|
<div className="layout-content">
|
|
{children}
|
|
</div>
|
|
|
|
{showTabBar && (
|
|
<div className="layout-tabbar">
|
|
<TabBar activeKey={tabs.find(t => window.location.pathname.startsWith(t.key))?.key || '/'} onChange={handleTabChange}>
|
|
{tabs.map(item => (
|
|
<TabBar.Item key={item.key} icon={item.icon} title={item.title} />
|
|
))}
|
|
</TabBar>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Layout; |