42 lines
1.6 KiB
TypeScript
42 lines
1.6 KiB
TypeScript
import { LayoutDashboard, CalendarDays } from 'lucide-react';
|
|
import { AnimatePresence } from 'motion/react';
|
|
import HydrogenView, { type HydrogenSubTab } from './HydrogenView';
|
|
import SubTabs from './SubTabs';
|
|
import { useHashSubTab } from './useHashSubTab';
|
|
import { FadeIn, PageFrame } from '../../components/ui/surface';
|
|
import BiHeaderActions from '../../components/BiHeaderActions';
|
|
|
|
const SUB_TABS = [
|
|
{ id: 'daily', label: '每日', icon: CalendarDays },
|
|
{ id: 'overview', label: '总览', icon: LayoutDashboard },
|
|
] as const satisfies readonly { id: HydrogenSubTab; label: string; icon: typeof CalendarDays }[];
|
|
|
|
const SUB_IDS: readonly HydrogenSubTab[] = ['daily', 'overview'];
|
|
|
|
export default function HydrogenModule() {
|
|
const [sub, setSub] = useHashSubTab<HydrogenSubTab>('hydrogen', SUB_IDS);
|
|
return (
|
|
<PageFrame
|
|
title="氢能经营看板"
|
|
subtitle="按时间、车辆归属、加氢站和区域统一展示加氢量、费用、收入与异常波动。"
|
|
icon={CalendarDays}
|
|
eyebrow="ENERGY BI"
|
|
meta="数据单位清晰标注 · 支持日/总览切换"
|
|
actions={<BiHeaderActions domain="hydrogen" />}
|
|
>
|
|
<SubTabs tabs={SUB_TABS} active={sub} onChange={setSub} idPrefix="hydrogen-view" ariaLabel="氢能分析视图" />
|
|
<AnimatePresence mode="wait">
|
|
<FadeIn key={sub}>
|
|
<div
|
|
id={`hydrogen-view-panel-${sub}`}
|
|
role="tabpanel"
|
|
aria-labelledby={`hydrogen-view-tab-${sub}`}
|
|
>
|
|
<HydrogenView sub={sub} />
|
|
</div>
|
|
</FadeIn>
|
|
</AnimatePresence>
|
|
</PageFrame>
|
|
);
|
|
}
|