69 lines
2.2 KiB
TypeScript
69 lines
2.2 KiB
TypeScript
import { Badge, Button, Input, Nav, Space, Tag, Typography } from '@douyinfe/semi-ui';
|
|
import {
|
|
IconActivity,
|
|
IconBarChartHStroked,
|
|
IconHistogram,
|
|
IconHome,
|
|
IconMapPin,
|
|
IconSearch,
|
|
IconServer,
|
|
IconSetting
|
|
} from '@douyinfe/semi-icons';
|
|
import type { ReactNode } from 'react';
|
|
|
|
export type PageKey = 'dashboard' | 'vehicles' | 'realtime' | 'detail' | 'history' | 'mileage' | 'quality';
|
|
|
|
const navItems = [
|
|
{ itemKey: 'dashboard', text: '总览工作台', icon: <IconHome /> },
|
|
{ itemKey: 'vehicles', text: '车辆台账', icon: <IconServer /> },
|
|
{ itemKey: 'realtime', text: '实时状态', icon: <IconActivity /> },
|
|
{ itemKey: 'detail', text: '车辆详情', icon: <IconSetting /> },
|
|
{ itemKey: 'history', text: '历史查询', icon: <IconMapPin /> },
|
|
{ itemKey: 'mileage', text: '里程分析', icon: <IconBarChartHStroked /> },
|
|
{ itemKey: 'quality', text: '数据质量', icon: <IconHistogram /> }
|
|
];
|
|
|
|
export function AppShell({
|
|
activePage,
|
|
onChange,
|
|
children
|
|
}: {
|
|
activePage: PageKey;
|
|
onChange: (page: PageKey) => void;
|
|
children: ReactNode;
|
|
}) {
|
|
return (
|
|
<div className="vp-app">
|
|
<div className="vp-shell">
|
|
<aside className="vp-sidebar">
|
|
<div className="vp-brand">
|
|
<span className="vp-brand-mark" />
|
|
<span>车辆数据中台</span>
|
|
</div>
|
|
<Nav
|
|
selectedKeys={[activePage]}
|
|
items={navItems}
|
|
onSelect={({ itemKey }) => onChange(itemKey as PageKey)}
|
|
style={{ maxWidth: '100%' }}
|
|
/>
|
|
</aside>
|
|
<main className="vp-main">
|
|
<header className="vp-topbar">
|
|
<Space spacing={12}>
|
|
<Input prefix={<IconSearch />} placeholder="搜索 VIN / 车牌 / 手机号" style={{ width: 320 }} />
|
|
<Button theme="solid" type="primary">查询车辆</Button>
|
|
</Space>
|
|
<Space spacing={12}>
|
|
<Tag color="blue">生产环境</Tag>
|
|
<Badge count={0} type="success">
|
|
<Typography.Text>链路正常</Typography.Text>
|
|
</Badge>
|
|
</Space>
|
|
</header>
|
|
{children}
|
|
</main>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|