shishengliang/lingniu-vehicle-ingest
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(platform): streamline vehicle operations shell

Browse Source
This commit is contained in:
lingniu
2026-07-05 01:04:08 +08:00
parent b824289cf6
commit bb18a5075c
3 changed files with 75 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
vehicle-data-platform/apps/web/src/layout/AppShell.tsx
View File

@@ -20,21 +20,21 @@ export type PageKey = 'dashboard' | 'vehicles' | 'map' | 'realtime' | 'detail' |
const navGroups = [
{
title: '车辆工作台',
title: '车辆运营',
items: [
{ itemKey: 'dashboard', text: '运营驾驶舱', icon: <IconHome /> },
{ itemKey: 'map', text: '实时地图', icon: <IconMapPin /> },
{ itemKey: 'vehicles', text: '车辆中心', icon: <IconServer /> },
{ itemKey: 'realtime', text: '实时监控', icon: <IconActivity /> },
{ itemKey: 'vehicles', text: '车辆中心', icon: <IconServer /> },
{ itemKey: 'detail', text: '车辆档案', icon: <IconSetting /> }
]
},
{
title: '轨迹与统计',
title: '轨迹报表',
items: [
{ itemKey: 'history', text: '轨迹回放', icon: <IconMapPin /> },
{ itemKey: 'history-query', text: '数据导出', icon: <IconHistogram /> },
{ itemKey: 'mileage', text: '里程统计', icon: <IconBarChartHStroked /> }
{ itemKey: 'mileage', text: '里程统计', icon: <IconBarChartHStroked /> },
{ itemKey: 'history-query', text: '数据导出', icon: <IconHistogram /> }
]
},
{
@@ -45,7 +45,7 @@ const navGroups = [
]
},
{
title: '系统运维',
title: '平台运维',
items: [
{ itemKey: 'ops-quality', text: '运维质量', icon: <IconPulse /> }
]
@@ -125,6 +125,14 @@ export function AppShell({
Promise.resolve(onVehicleSearch(value)).finally(() => setSearching(false));
};
const quickActions = [
{ label: '地图', ariaLabel: '顶部地图态势', page: 'map' as const },
{ label: '监控', ariaLabel: '顶部实时监控', page: 'realtime' as const },
{ label: '轨迹', ariaLabel: '顶部轨迹回放', page: 'history' as const },
{ label: '里程', ariaLabel: '顶部里程统计', page: 'mileage' as const },
{ label: '导出', ariaLabel: '顶部数据导出', page: 'history-query' as const }
];
return (
<div className="vp-app">
<div className="vp-shell">
@@ -152,7 +160,7 @@ export function AppShell({
</aside>
<main className="vp-main">
<header className="vp-topbar">
<Space spacing={12}>
<Space spacing={12} className="vp-topbar-search">
<Input
prefix={<IconSearch />}
placeholder="搜索 VIN / 车牌 / 手机号"
@@ -163,7 +171,7 @@ export function AppShell({
/>
<Button theme="solid" type="primary" loading={searching} onClick={search}>查询车辆</Button>
</Space>
<Space spacing={12}>
<div className="vp-topbar-context">
{currentVehicleLabel ? <Tag color="grey">{currentVehicleLabel}</Tag> : null}
{currentVehicleStatus ? (
<Tag color={currentVehicleStatus.severity === 'ok' ? 'green' : currentVehicleStatus.severity === 'error' ? 'red' : 'orange'}>
@@ -175,13 +183,14 @@ export function AppShell({
一致性：{currentVehicleConsistency.title || `${currentVehicleConsistency.onlineSourceCount}/${currentVehicleConsistency.sourceCount} 来源`}
</Tag>
) : null}
<Tag color="blue">车辆运营</Tag>
<Tag color={amapConfigured ? 'green' : 'orange'}>{amapConfigured ? '地图就绪' : '地图待配置'}</Tag>
<Button size="small" aria-label="顶部地图态势" onClick={() => onChange('map')}>实时地图</Button>
<Button size="small" aria-label="顶部实时监控" onClick={() => onChange('realtime')}>实时监控</Button>
<Button size="small" aria-label="顶部轨迹回放" onClick={() => onChange('history')}>轨迹回放</Button>
<Button size="small" aria-label="顶部数据导出" onClick={() => onChange('history-query')}>数据导出</Button>
<Button size="small" aria-label="顶部里程统计" onClick={() => onChange('mileage')}>里程统计</Button>
<div className="vp-topbar-quick-actions" aria-label="车辆服务快捷入口">
{quickActions.map((item) => (
<Button key={item.page} size="small" aria-label={item.ariaLabel} onClick={() => onChange(item.page)}>
{item.label}
</Button>
))}
</div>
<Button
size="small"
aria-label={`顶部${alertLabel}`}
@@ -190,8 +199,8 @@ export function AppShell({
>
{alertLabel}
</Button>
{platformRelease ? <Tag color="grey">版本 {platformRelease}</Tag> : null}
</Space>
{platformRelease ? <span className="vp-topbar-release">版本 {platformRelease}</span> : null}
</div>
</header>
{children}
</main>