车辆服务闭环
diff --git a/vehicle-data-platform/apps/web/src/styles/global.css b/vehicle-data-platform/apps/web/src/styles/global.css
index 92888f0a..a0df9714 100644
--- a/vehicle-data-platform/apps/web/src/styles/global.css
+++ b/vehicle-data-platform/apps/web/src/styles/global.css
@@ -2081,6 +2081,88 @@ body {
line-height: 18px;
}
+.vp-ten-second-triage {
+ margin-bottom: 16px;
+ padding: 14px;
+ border: 1px solid rgba(245, 135, 0, 0.18);
+ border-radius: 8px;
+ background: #ffffff;
+ display: grid;
+ grid-template-columns: minmax(300px, 0.5fr) minmax(0, 1.5fr);
+ gap: 14px;
+ align-items: stretch;
+}
+
+.vp-ten-second-triage-copy {
+ padding: 16px;
+ border: 1px solid rgba(245, 135, 0, 0.14);
+ border-radius: 8px;
+ background: #fffaf2;
+ display: grid;
+ gap: 10px;
+ align-content: center;
+}
+
+.vp-ten-second-triage-copy .semi-typography {
+ line-height: 25px;
+}
+
+.vp-ten-second-triage-grid {
+ min-width: 0;
+ display: grid;
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ gap: 10px;
+}
+
+.vp-ten-second-triage-item {
+ min-width: 0;
+ min-height: 128px;
+ padding: 12px;
+ border: 1px solid rgba(245, 135, 0, 0.16);
+ border-radius: 8px;
+ background: #fffdfa;
+ color: inherit;
+ cursor: pointer;
+ font: inherit;
+ text-align: left;
+ display: grid;
+ gap: 8px;
+ align-content: start;
+ transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
+}
+
+.vp-ten-second-triage-item:hover,
+.vp-ten-second-triage-item:focus-visible {
+ border-color: rgba(245, 135, 0, 0.42);
+ background: #fff8ec;
+ box-shadow: 0 0 0 3px rgba(245, 135, 0, 0.08);
+ outline: none;
+}
+
+.vp-ten-second-triage-item strong {
+ color: var(--vp-text);
+ font-size: 18px;
+ line-height: 24px;
+ font-weight: 800;
+ word-break: break-word;
+}
+
+.vp-ten-second-triage-item span {
+ color: var(--vp-text-muted);
+ font-size: 12px;
+ line-height: 18px;
+ word-break: break-word;
+}
+
+.vp-ten-second-triage-item em {
+ align-self: end;
+ color: #d25f00;
+ font-size: 12px;
+ font-style: normal;
+ font-weight: 800;
+ line-height: 18px;
+}
+
.vp-customer-service-journey {
margin-bottom: 16px;
padding: 14px;
@@ -12363,6 +12445,8 @@ button.vp-realtime-command-item:focus-visible {
.vp-customer-platform-blueprint-grid,
.vp-customer-saved-view-library,
.vp-customer-saved-view-library-grid,
+ .vp-ten-second-triage,
+ .vp-ten-second-triage-grid,
.vp-customer-service-separation,
.vp-customer-primary-flow-grid,
.vp-source-readiness-grid,
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 f5452729..58d9385f 100644
--- a/vehicle-data-platform/apps/web/src/test/App.test.tsx
+++ b/vehicle-data-platform/apps/web/src/test/App.test.tsx
@@ -1369,6 +1369,11 @@ test('dashboard exposes vehicle data center capability matrix', async () => {
expect(screen.getByRole('button', { name: '客户常用视图库 轨迹日报模板 4 活跃 历史导出' })).toBeInTheDocument();
expect(screen.getByRole('button', { name: '客户常用视图库 里程周报模板 1,033 车辆 统计查询' })).toBeInTheDocument();
expect(screen.getByRole('button', { name: '客户常用视图库 告警订阅视图 7 告警 通知闭环' })).toBeInTheDocument();
+ expect(screen.getByRole('region', { name: '十秒车辆处置台' })).toBeInTheDocument();
+ expect(screen.getByText('登录后先知道哪三类车辆最需要处理,再进入地图、车辆中心或告警通知。')).toBeInTheDocument();
+ expect(screen.getByRole('button', { name: '十秒车辆处置台 告警车辆 7 辆 处理告警' })).toBeInTheDocument();
+ expect(screen.getByRole('button', { name: '十秒车辆处置台 无数据车辆 461 辆 查车辆' })).toBeInTheDocument();
+ expect(screen.getByRole('button', { name: '十秒车辆处置台 身份未绑定 9 辆 维护绑定' })).toBeInTheDocument();
expect(screen.getByText('现代车队运营台')).toBeInTheDocument();
expect(screen.getByText('一屏完成车辆地图、轨迹回放、里程统计、数据导出和告警闭环。')).toBeInTheDocument();
expect(screen.getByRole('button', { name: '现代车队运营台 Live Map 208 在线 打开地图' })).toBeInTheDocument();