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); });