From 21828c7b0529f75b567880386e0b39cd879c8b8a Mon Sep 17 00:00:00 2001
From: lingniu <lingniu@lingnius-Mac-mini.local>
Date: Sun, 5 Jul 2026 02:44:34 +0800
Subject: [PATCH] feat(platform): reorganize customer navigation

---
 .../apps/web/src/layout/AppShell.tsx          | 21 ++++++++++++-------
 .../apps/web/src/styles/global.css            |  9 ++++++++
 .../apps/web/src/test/App.test.tsx            | 12 ++++++-----
 3 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/vehicle-data-platform/apps/web/src/layout/AppShell.tsx b/vehicle-data-platform/apps/web/src/layout/AppShell.tsx
index 45cf6ee9..b582aa8f 100644
--- a/vehicle-data-platform/apps/web/src/layout/AppShell.tsx
+++ b/vehicle-data-platform/apps/web/src/layout/AppShell.tsx
@@ -20,17 +20,19 @@ export type PageKey = 'dashboard' | 'vehicles' | 'map' | 'realtime' | 'detail' |
 
 const navGroups = [
   {
-    title: '车辆运营',
+    title: '车辆服务',
+    description: '以车辆为对象监控在线、位置和服务状态',
     items: [
       { itemKey: 'dashboard', text: '运营驾驶舱', icon: <IconHome /> },
+      { itemKey: 'vehicles', text: '车辆中心', icon: <IconServer /> },
       { itemKey: 'map', text: '实时地图', icon: <IconMapPin /> },
       { itemKey: 'realtime', text: '实时监控', icon: <IconActivity /> },
-      { itemKey: 'vehicles', text: '车辆中心', icon: <IconServer /> },
       { itemKey: 'detail', text: '车辆档案', icon: <IconSetting /> }
     ]
   },
   {
-    title: '轨迹报表',
+    title: '数据交付',
+    description: '轨迹、里程、历史数据和客户导出',
     items: [
       { itemKey: 'history', text: '轨迹回放', icon: <IconMapPin /> },
       { itemKey: 'mileage', text: '里程统计', icon: <IconBarChartHStroked /> },
@@ -38,14 +40,16 @@ const navGroups = [
     ]
   },
   {
-    title: '告警通知',
+    title: '告警闭环',
+    description: '断链、离线、定位异常和通知升级',
     items: [
       { itemKey: 'alert-events', text: '告警事件', icon: <IconHistogram /> },
       { itemKey: 'notification-rules', text: '通知规则', icon: <IconBell /> }
     ]
   },
   {
-    title: '平台运维',
+    title: '运维后台',
+    description: '接入链路和平台运行质量单独查看',
     items: [
       { itemKey: 'ops-quality', text: '运维质量', icon: <IconPulse /> }
     ]
@@ -141,13 +145,16 @@ export function AppShell({
             <span className="vp-brand-mark" />
             <span className="vp-brand-copy">
               <span>车辆服务中台</span>
-              <span>地图监控 / 轨迹回放 / 里程统计</span>
+              <span>车辆地图 / 里程统计 / 数据交付</span>
             </span>
           </div>
           <div className="vp-nav-groups">
             {navGroups.map((group) => (
               <div key={group.title} className="vp-nav-group">
-                <div className="vp-nav-section-title">{group.title}</div>
+                <div className="vp-nav-section-title">
+                  <span>{group.title}</span>
+                  <small>{group.description}</small>
+                </div>
                 <Nav
                   selectedKeys={[selectedPage]}
                   items={group.items}
diff --git a/vehicle-data-platform/apps/web/src/styles/global.css b/vehicle-data-platform/apps/web/src/styles/global.css
index a50c70c2..8235deef 100644
--- a/vehicle-data-platform/apps/web/src/styles/global.css
+++ b/vehicle-data-platform/apps/web/src/styles/global.css
@@ -84,6 +84,15 @@ body {
   font-size: 12px;
   font-weight: 600;
   line-height: 18px;
+  display: grid;
+  gap: 2px;
+}
+
+.vp-nav-section-title small {
+  color: var(--vp-text-muted);
+  font-size: 10px;
+  font-weight: 500;
+  line-height: 14px;
 }
 
 .vp-main {
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 22e95d82..48bee18f 100644
--- a/vehicle-data-platform/apps/web/src/test/App.test.tsx
+++ b/vehicle-data-platform/apps/web/src/test/App.test.tsx
@@ -21,11 +21,13 @@ test('renders vehicle platform shell', () => {
 
   render(<App />);
   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);
+  expect(screen.getByText('以车辆为对象监控在线、位置和服务状态')).toBeInTheDocument();
+  expect(screen.getAllByText('数据交付').length).toBeGreaterThanOrEqual(1);
+  expect(screen.getByText('轨迹、里程、历史数据和客户导出')).toBeInTheDocument();
+  expect(screen.getByText('告警闭环')).toBeInTheDocument();
+  expect(screen.getByText('运维后台')).toBeInTheDocument();
   expect(screen.getAllByText('运营驾驶舱').length).toBeGreaterThanOrEqual(1);
 });