74 lines
2.7 KiB
TypeScript
74 lines
2.7 KiB
TypeScript
import type { QuickActionType } from '../../data/mockData';
|
|
import { Button } from '../ui';
|
|
import { cls } from '../../utils/cls';
|
|
|
|
export type SectionKey = 'home' | 'exam' | 'booking' | 'support';
|
|
|
|
interface SidebarProps {
|
|
active: SectionKey;
|
|
onNavigate: (key: SectionKey) => void;
|
|
onQuickAction: (action: Exclude<QuickActionType, 'none'>) => void;
|
|
}
|
|
|
|
const IconHome = () => <span className='text-xs'>🏠</span>;
|
|
const IconHospital = () => <span className='text-xs'>🏥</span>;
|
|
const IconCalendar = () => <span className='text-xs'>📅</span>;
|
|
const IconSupport = () => <span className='text-xs'>💬</span>;
|
|
|
|
const NAV_ITEMS = [
|
|
{ key: 'home', icon: IconHome, label: '首页' },
|
|
{ key: 'exam', icon: IconHospital, label: '体检中心' },
|
|
{ key: 'booking', icon: IconCalendar, label: '预约中心' },
|
|
{ key: 'support', icon: IconSupport, label: '客服咨询' },
|
|
] as const;
|
|
|
|
export const Sidebar = ({ active, onNavigate, onQuickAction }: SidebarProps) => (
|
|
<aside className='bg-white border-r p-4 flex flex-col gap-4'>
|
|
<div>
|
|
<div className='text-base font-semibold'>圆和医疗 · 体检中心</div>
|
|
<div className='text-xs text-gray-500 mt-1'>iPad 首页驾驶舱预览</div>
|
|
</div>
|
|
|
|
<nav className='space-y-1'>
|
|
{NAV_ITEMS.map((item) => (
|
|
<Button
|
|
key={item.key}
|
|
onClick={() => onNavigate(item.key as SectionKey)}
|
|
className={cls('w-full justify-start', active === item.key && 'bg-gray-100 border-gray-900 text-gray-900')}
|
|
>
|
|
<item.icon />
|
|
<span>{item.label}</span>
|
|
</Button>
|
|
))}
|
|
</nav>
|
|
|
|
<section className='mt-2 p-3 rounded-2xl border bg-gray-50/50'>
|
|
<div className='text-sm text-gray-700 mb-2'>快捷操作</div>
|
|
<div className='grid grid-cols-2 gap-2 text-xs'>
|
|
<Button className='justify-center py-1.5' onClick={() => onQuickAction('meal')}>
|
|
用餐登记
|
|
</Button>
|
|
<Button className='justify-center py-1.5' onClick={() => onQuickAction('vip')}>
|
|
太平VIP认证
|
|
</Button>
|
|
<Button className='justify-center py-1.5' onClick={() => onQuickAction('delivery')}>
|
|
报告寄送
|
|
</Button>
|
|
<Button className='justify-center py-1.5' onClick={() => onQuickAction('note')}>
|
|
备注窗
|
|
</Button>
|
|
</div>
|
|
</section>
|
|
|
|
<section className='mt-auto p-3 rounded-2xl border bg-gray-50/70 text-xs flex flex-col gap-2'>
|
|
<div className='text-sm font-medium flex items-center gap-2'>
|
|
<span>💻</span>
|
|
<span>客服 / IT 支持</span>
|
|
</div>
|
|
<div className='text-gray-600'>遇到系统问题可一键联系 IT / 运营支持。</div>
|
|
</section>
|
|
</aside>
|
|
);
|
|
|
|
|