diff --git a/vehicle-data-platform/apps/web/src/styles/global.css b/vehicle-data-platform/apps/web/src/styles/global.css
index 1563a75c..2c5b342c 100644
--- a/vehicle-data-platform/apps/web/src/styles/global.css
+++ b/vehicle-data-platform/apps/web/src/styles/global.css
@@ -6204,6 +6204,92 @@ button.vp-realtime-command-item:focus-visible {
line-height: 18px;
}
+.vp-history-export-center {
+ margin-top: 16px;
+ border: 1px solid rgba(22, 100, 255, 0.16);
+ border-radius: var(--vp-radius);
+ background: #fff;
+ display: grid;
+ grid-template-columns: minmax(300px, 0.64fr) minmax(0, 1.36fr);
+ overflow: hidden;
+ box-shadow: var(--vp-shadow-sm);
+}
+
+.vp-history-export-center-summary {
+ padding: 18px;
+ border-right: 1px solid var(--vp-border);
+ background: #f8fbff;
+ display: grid;
+ gap: 10px;
+ align-content: start;
+}
+
+.vp-history-export-center-summary strong {
+ color: var(--vp-text);
+ font-size: 18px;
+ line-height: 26px;
+ font-weight: 700;
+}
+
+.vp-history-export-center-summary span {
+ color: var(--vp-text-muted);
+ font-size: 13px;
+ line-height: 20px;
+}
+
+.vp-history-export-center-grid {
+ padding: 16px;
+ display: grid;
+ grid-template-columns: repeat(4, minmax(0, 1fr));
+ gap: 10px;
+}
+
+.vp-history-export-center-item {
+ min-height: 136px;
+ padding: 12px;
+ border: 1px solid var(--vp-border);
+ border-radius: 8px;
+ background: #fbfcff;
+ text-align: left;
+ cursor: pointer;
+ font: inherit;
+ display: grid;
+ gap: 8px;
+ align-content: start;
+}
+
+.vp-history-export-center-item:hover,
+.vp-history-export-center-item:focus-visible {
+ border-color: rgba(22, 100, 255, 0.45);
+ box-shadow: var(--vp-shadow-sm);
+ outline: none;
+}
+
+.vp-history-export-center-item:disabled {
+ cursor: not-allowed;
+ opacity: 0.62;
+}
+
+.vp-history-export-center-item strong {
+ color: var(--vp-text);
+ font-size: 20px;
+ line-height: 26px;
+}
+
+.vp-history-export-center-item span {
+ color: var(--vp-text-muted);
+ font-size: 12px;
+ line-height: 18px;
+}
+
+.vp-history-export-center-item em {
+ color: #1664ff;
+ font-style: normal;
+ font-size: 12px;
+ font-weight: 700;
+ line-height: 18px;
+}
+
.vp-history-customer-export-board {
margin-top: 16px;
overflow: hidden;
@@ -8280,6 +8366,8 @@ button.vp-realtime-command-item:focus-visible {
.vp-trajectory-impact-grid,
.vp-history-time-window-board,
.vp-history-time-window-grid,
+ .vp-history-export-center,
+ .vp-history-export-center-grid,
.vp-history-customer-export-board .semi-card-body,
.vp-history-customer-export-steps,
.vp-history-report-templates,
@@ -8317,6 +8405,11 @@ button.vp-realtime-command-item:focus-visible {
border-bottom: 1px solid var(--vp-border);
}
+ .vp-history-export-center-summary {
+ border-right: 0;
+ border-bottom: 1px solid var(--vp-border);
+ }
+
.vp-customer-vehicle-monitor-copy {
border-right: 0;
border-bottom: 1px solid var(--vp-border);
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 9cffc627..dec9052f 100644
--- a/vehicle-data-platform/apps/web/src/test/App.test.tsx
+++ b/vehicle-data-platform/apps/web/src/test/App.test.tsx
@@ -6615,6 +6615,12 @@ test('shows parsed field history as a flattened evidence table', async () => {
render(
);
expect(await screen.findByRole('heading', { name: '历史查询导出' })).toBeInTheDocument();
+ expect(screen.getByText('客户导出中心')).toBeInTheDocument();
+ expect(screen.getByText('按客户用途选择报表:行程历史、里程对账、字段证据和告警说明。')).toBeInTheDocument();
+ expect(screen.getByRole('button', { name: '客户导出中心 行程历史 0 点 导出轨迹' })).toBeInTheDocument();
+ expect(screen.getByRole('button', { name: '客户导出中心 里程对账 - 统计查询' })).toBeInTheDocument();
+ expect(screen.getByRole('button', { name: '客户导出中心 字段证据 2 字段 导出字段' })).toBeInTheDocument();
+ expect(screen.getByRole('button', { name: '客户导出中心 告警说明 无明显异常 复制说明' })).toBeInTheDocument();
expect(screen.getByText('自定义时间窗监控台')).toBeInTheDocument();
expect(screen.getByText('客户选定车辆和时间范围后,直接判断这个窗口能否用于轨迹复盘、统计核对、历史证据导出和告警说明。')).toBeInTheDocument();
expect(screen.getByRole('button', { name: '自定义时间窗监控 轨迹复盘 位置历史' })).toBeInTheDocument();