feat(platform): add export template library

2026-07-06 00:01:00 +08:00
parent 6d18e5a017
commit 0c33648b26
3 changed files with 149 additions and 0 deletions
--- a/vehicle-data-platform/apps/web/src/pages/History.tsx
+++ b/vehicle-data-platform/apps/web/src/pages/History.tsx
@@ -1330,6 +1330,44 @@ export function History({
      onClick: () => openQueryTab('fields')
    }
  ];
+  const customerExportTemplateLibraryItems = [
+    {
+      title: '日报运营包',
+      value: '运营早会',
+      detail: '每天交付车辆位置覆盖、轨迹断点、字段证据和质量提示，适合早会复盘。',
+      action: '导出日报',
+      color: locations.total > 0 ? 'green' as const : 'orange' as const,
+      disabled: locations.items.length === 0,
+      onClick: () => exportLocations()
+    },
+    {
+      title: '周报对账包',
+      value: '客户对账',
+      detail: '按固定车辆范围沉淀周报计划，交付轨迹、统计查询链接和异常说明。',
+      action: '复制周报计划',
+      color: 'blue' as const,
+      disabled: false,
+      onClick: () => copyScheduledHistoryReportPlan()
+    },
+    {
+      title: '问题解释包',
+      value: '客户问询',
+      detail: '客户质疑定位、里程或断链时，复制一份包含证据链接的说明。',
+      action: '复制说明',
+      color: deliveryStateColor,
+      disabled: false,
+      onClick: () => copyDeliveryPackage()
+    },
+    {
+      title: '字段稳定包',
+      value: '数据对接',
+      detail: '把客户固定字段保存成模板，后续导出保持字段口径和顺序稳定。',
+      action: '字段配置',
+      color: selectedFieldCount > 0 || rawFieldRows.length > 0 ? 'green' as const : 'orange' as const,
+      disabled: false,
+      onClick: () => openQueryTab('fields')
+    }
+  ];
  const customerReportPurposeItems = [
    {
      title: '日报复盘',
@@ -2227,6 +2265,38 @@ export function History({
              ))}
            </div>
          </div>
+          <div className="vp-history-export-template-library">
+            <div className="vp-history-export-template-library-summary">
+              <Space wrap>
+                <Tag color="blue">客户导出包模板库</Tag>
+                <Tag color={deliveryStateColor}>{deliveryState}</Tag>
+                <Tag color={selectedFieldCount > 0 || rawFieldRows.length > 0 ? 'green' : 'orange'}>
+                  {fieldEvidenceCount.toLocaleString()} 字段
+                </Tag>
+              </Space>
+              <Typography.Title heading={5} style={{ margin: 0 }}>把一次性 CSV 下载变成客户可复用的报表模板：日报看运营、周报做对账、临时解释处理质疑、字段模板保持口径稳定。</Typography.Title>
+              <Typography.Text type="secondary">
+                每个模板都绑定同一辆车、同一时间窗和同一套证据口径，客户后续拿到的是稳定报表，而不是临时拼出来的查询结果。
+              </Typography.Text>
+            </div>
+            <div className="vp-history-export-template-library-grid">
+              {customerExportTemplateLibraryItems.map((item) => (
+                <button
+                  key={item.title}
+                  type="button"
+                  className="vp-history-export-template-library-item"
+                  disabled={item.disabled}
+                  onClick={item.onClick}
+                  aria-label={`客户导出包模板库 ${item.title} ${item.value} ${item.action}`}
+                >
+                  <Tag color={item.color}>{item.title}</Tag>
+                  <strong>{item.value}</strong>
+                  <span>{item.detail}</span>
+                  <em>{item.action}</em>
+                </button>
+              ))}
+            </div>
+          </div>
        </Card>
      ) : null}
      {mode === 'query' ? (
--- a/vehicle-data-platform/apps/web/src/styles/global.css
+++ b/vehicle-data-platform/apps/web/src/styles/global.css
@@ -10111,6 +10111,77 @@ button.vp-realtime-command-item:focus-visible {
  font-weight: 700;
 }

+.vp-history-export-template-library {
+  margin-top: 14px;
+  display: grid;
+  grid-template-columns: minmax(300px, 0.7fr) minmax(0, 1.3fr);
+  gap: 14px;
+}
+
+.vp-history-export-template-library-summary {
+  padding: 14px;
+  border: 1px solid rgba(0, 174, 116, 0.2);
+  border-radius: var(--vp-radius);
+  background: #f6fffb;
+  display: grid;
+  gap: 10px;
+  align-content: start;
+}
+
+.vp-history-export-template-library-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.vp-history-export-template-library-item {
+  min-height: 158px;
+  padding: 12px;
+  border: 1px solid rgba(0, 174, 116, 0.18);
+  border-radius: var(--vp-radius);
+  background: #fbfffd;
+  color: inherit;
+  text-align: left;
+  font: inherit;
+  cursor: pointer;
+  display: grid;
+  gap: 8px;
+  align-content: start;
+}
+
+.vp-history-export-template-library-item:hover,
+.vp-history-export-template-library-item:focus-visible {
+  border-color: rgba(0, 174, 116, 0.42);
+  box-shadow: 0 10px 24px rgba(24, 39, 75, 0.08);
+  outline: none;
+}
+
+.vp-history-export-template-library-item:disabled {
+  cursor: not-allowed;
+  opacity: 0.62;
+}
+
+.vp-history-export-template-library-item strong {
+  color: var(--vp-text);
+  font-size: 18px;
+  line-height: 24px;
+  font-weight: 700;
+  word-break: break-word;
+}
+
+.vp-history-export-template-library-item span {
+  color: var(--vp-text-muted);
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.vp-history-export-template-library-item em {
+  color: #008f5f;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 700;
+}
+
 .vp-history-saved-report {
  display: grid;
  grid-template-columns: minmax(300px, 0.7fr) minmax(0, 1.3fr);
@@ -12225,6 +12296,8 @@ button.vp-realtime-command-item:focus-visible {
  .vp-history-report-purpose-grid,
  .vp-history-report-cadence,
  .vp-history-report-cadence-grid,
+  .vp-history-export-template-library,
+  .vp-history-export-template-library-grid,
  .vp-history-saved-report,
  .vp-history-saved-report-grid,
  .vp-history-question-board,
--- a/vehicle-data-platform/apps/web/src/test/App.test.tsx
+++ b/vehicle-data-platform/apps/web/src/test/App.test.tsx
@@ -7610,6 +7610,12 @@ test('shows parsed field history as a flattened evidence table', async () => {
  expect(screen.getByRole('button', { name: '客户报表交付节奏 每周客户对账 周报计划' })).toBeInTheDocument();
  expect(screen.getByRole('button', { name: '客户报表交付节奏 临时问题解释 复制说明' })).toBeInTheDocument();
  expect(screen.getByRole('button', { name: '客户报表交付节奏 字段模板复用 字段配置' })).toBeInTheDocument();
+  expect(screen.getByText('客户导出包模板库')).toBeInTheDocument();
+  expect(screen.getByText('把一次性 CSV 下载变成客户可复用的报表模板：日报看运营、周报做对账、临时解释处理质疑、字段模板保持口径稳定。')).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: '客户导出包模板库 日报运营包 运营早会 导出日报' })).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: '客户导出包模板库 周报对账包 客户对账 复制周报计划' })).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: '客户导出包模板库 问题解释包 客户问询 复制说明' })).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: '客户导出包模板库 字段稳定包 数据对接 字段配置' })).toBeInTheDocument();
  expect(screen.getByText('保存报表视图')).toBeInTheDocument();
  expect(screen.getByText('把当前车辆、时间窗、数据通道、字段裁剪和交付节奏保存成客户可复用视图，后续不用重新拼查询条件。')).toBeInTheDocument();
  expect(screen.getByRole('button', { name: '保存报表视图 当前筛选 VIN-FIELDS-001 保存视图' })).toBeInTheDocument();