diff --git a/vehicle-data-platform/apps/web/src/layout/AppShell.tsx b/vehicle-data-platform/apps/web/src/layout/AppShell.tsx
index 5c7f8201..45cf6ee9 100644
--- a/vehicle-data-platform/apps/web/src/layout/AppShell.tsx
+++ b/vehicle-data-platform/apps/web/src/layout/AppShell.tsx
@@ -20,21 +20,21 @@ export type PageKey = 'dashboard' | 'vehicles' | 'map' | 'realtime' | 'detail' |
const navGroups = [
{
- title: '车辆工作台',
+ title: '车辆运营',
items: [
{ itemKey: 'dashboard', text: '运营驾驶舱', icon: },
{ itemKey: 'map', text: '实时地图', icon: },
- { itemKey: 'vehicles', text: '车辆中心', icon: },
{ itemKey: 'realtime', text: '实时监控', icon: },
+ { itemKey: 'vehicles', text: '车辆中心', icon: },
{ itemKey: 'detail', text: '车辆档案', icon: }
]
},
{
- title: '轨迹与统计',
+ title: '轨迹报表',
items: [
{ itemKey: 'history', text: '轨迹回放', icon: },
- { itemKey: 'history-query', text: '数据导出', icon: },
- { itemKey: 'mileage', text: '里程统计', icon: }
+ { itemKey: 'mileage', text: '里程统计', icon: },
+ { itemKey: 'history-query', text: '数据导出', icon: }
]
},
{
@@ -45,7 +45,7 @@ const navGroups = [
]
},
{
- title: '系统运维',
+ title: '平台运维',
items: [
{ itemKey: 'ops-quality', text: '运维质量', icon: }
]
@@ -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 (
@@ -152,7 +160,7 @@ export function AppShell({
-
+
}
placeholder="搜索 VIN / 车牌 / 手机号"
@@ -163,7 +171,7 @@ export function AppShell({
/>
-
+
{currentVehicleLabel ?
{currentVehicleLabel} : null}
{currentVehicleStatus ? (
@@ -175,13 +183,14 @@ export function AppShell({
一致性:{currentVehicleConsistency.title || `${currentVehicleConsistency.onlineSourceCount}/${currentVehicleConsistency.sourceCount} 来源`}
) : null}
-
车辆运营
{amapConfigured ? '地图就绪' : '地图待配置'}
-
-
-
-
-
+
+ {quickActions.map((item) => (
+
+ ))}
+
- {platformRelease ?
版本 {platformRelease} : null}
-
+ {platformRelease ?
版本 {platformRelease} : null}
+
{children}
diff --git a/vehicle-data-platform/apps/web/src/styles/global.css b/vehicle-data-platform/apps/web/src/styles/global.css
index b9da688d..c8ce1135 100644
--- a/vehicle-data-platform/apps/web/src/styles/global.css
+++ b/vehicle-data-platform/apps/web/src/styles/global.css
@@ -92,9 +92,10 @@ body {
.vp-topbar {
height: var(--vp-shell-header);
- display: flex;
+ display: grid;
+ grid-template-columns: minmax(380px, 0.8fr) minmax(0, 1.2fr);
align-items: center;
- justify-content: space-between;
+ gap: 16px;
padding: 0 24px;
background: rgba(255, 255, 255, 0.9);
border-bottom: 1px solid var(--vp-border);
@@ -104,6 +105,50 @@ body {
z-index: 10;
}
+.vp-topbar-search {
+ min-width: 0;
+}
+
+.vp-topbar-context {
+ min-width: 0;
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ gap: 8px;
+ white-space: nowrap;
+}
+
+.vp-topbar-quick-actions {
+ height: 32px;
+ display: inline-flex;
+ align-items: center;
+ padding: 2px;
+ border: 1px solid var(--vp-border);
+ border-radius: 8px;
+ background: #f8fafc;
+}
+
+.vp-topbar-quick-actions .semi-button {
+ min-width: 44px;
+ border: 0;
+ background: transparent;
+ color: var(--vp-text-muted);
+ font-size: 13px;
+ font-weight: 600;
+}
+
+.vp-topbar-quick-actions .semi-button:hover,
+.vp-topbar-quick-actions .semi-button:focus-visible {
+ background: #ffffff;
+ color: var(--vp-primary);
+}
+
+.vp-topbar-release {
+ color: var(--vp-text-subtle);
+ font-size: 12px;
+ line-height: 18px;
+}
+
.vp-link-health-button-warning {
color: var(--vp-warning);
border-color: rgba(247, 144, 9, 0.45);
diff --git a/vehicle-data-platform/apps/web/src/test/App.test.tsx b/vehicle-data-platform/apps/web/src/test/App.test.tsx
index c28098fb..d9b09de6 100644
--- a/vehicle-data-platform/apps/web/src/test/App.test.tsx
+++ b/vehicle-data-platform/apps/web/src/test/App.test.tsx
@@ -22,10 +22,10 @@ test('renders vehicle platform shell', () => {
render(
);
expect(screen.getByText('车辆服务中台')).toBeInTheDocument();
expect(screen.getByText('地图监控 / 轨迹回放 / 里程统计')).toBeInTheDocument();
- expect(screen.getByText('车辆工作台')).toBeInTheDocument();
- expect(screen.getByText('轨迹与统计')).toBeInTheDocument();
+ expect(screen.getByText('车辆运营')).toBeInTheDocument();
+ expect(screen.getByText('轨迹报表')).toBeInTheDocument();
expect(screen.getAllByText('告警通知').length).toBeGreaterThanOrEqual(1);
- expect(screen.getByText('系统运维')).toBeInTheDocument();
+ expect(screen.getByText('平台运维')).toBeInTheDocument();
expect(screen.getAllByText('运营驾驶舱').length).toBeGreaterThanOrEqual(1);
});