feat(platform): sharpen customer vehicle workspace

2026-07-05 04:30:20 +08:00
parent 84a1f70284
commit f5cfc86d63
3 changed files with 153 additions and 26 deletions
--- a/vehicle-data-platform/apps/web/src/pages/Dashboard.tsx
+++ b/vehicle-data-platform/apps/web/src/pages/Dashboard.tsx
@@ -397,7 +397,7 @@ export function Dashboard({
  }));
  const customerHeroActions = [
    {
-      title: '实时车辆地图',
+      title: '车辆地图',
      value: `${commandLocatedCount.toLocaleString()} 辆有定位`,
      detail: '按车查看实时位置、在线状态、速度和最新上报时间。',
      action: '进入地图',
@@ -418,13 +418,50 @@ export function Dashboard({
      onClick: () => onOpenMileage({})
    },
    {
-      title: '历史数据导出',
+      title: '数据导出',
      value: `${formatCount(summary?.frameToday)} 今日数据`,
      detail: '按车辆、时间和字段裁剪查询历史位置与原始记录。',
      action: '查询导出',
      onClick: () => onOpenHistory({ tab: 'raw', includeFields: 'true' })
    }
  ];
+  const customerJourneySteps = [
+    {
+      step: '01',
+      title: '定位车辆',
+      detail: '先在地图上确认车辆是否在线、坐标是否可信。',
+      action: '车辆地图',
+      onClick: () => onOpenMap({ online: 'online' })
+    },
+    {
+      step: '02',
+      title: '查看状态',
+      detail: '进入实时监控查看速度、SOC、里程和最新上报。',
+      action: '实时监控',
+      onClick: () => onOpenRealtime({ online: 'online' })
+    },
+    {
+      step: '03',
+      title: '复盘轨迹',
+      detail: '按自定义时间窗回放位置、速度和里程断点。',
+      action: '轨迹回放',
+      onClick: () => onOpenHistory()
+    },
+    {
+      step: '04',
+      title: '统计里程',
+      detail: '用同一时间窗核对区间里程和每日统计。',
+      action: '里程统计',
+      onClick: () => onOpenMileage({})
+    },
+    {
+      step: '05',
+      title: '导出交付',
+      detail: '导出历史位置、原始记录、字段明细和告警证据。',
+      action: '数据导出',
+      onClick: () => openTimeMonitorRaw()
+    }
+  ];
  const customerHealthItems = [
    {
      label: '在线车辆',
@@ -1285,20 +1322,26 @@ export function Dashboard({

  return (
    <div className="vp-page">
-      <PageHeader title="车辆运营监控台" description="面向客户的车辆地图、实时状态、轨迹回放、里程统计、历史查询和数据导出入口" />
+      <PageHeader title="车辆服务工作台" description="面向客户的车辆地图、实时监控、轨迹回放、里程统计、自定义时间监控、历史查询、告警通知和数据导出" />
      <Spin spinning={loading}>
        <Card bordered className="vp-customer-hero" bodyStyle={{ padding: 0 }}>
          <div className="vp-customer-hero-map">
            <div className="vp-customer-hero-copy">
-              <Typography.Title heading={3} style={{ margin: 0 }}>先看车辆服务</Typography.Title>
+              <Space wrap>
+                <Tag color="blue">客户工作台</Tag>
+                <Tag color={amapConfigured ? 'green' : 'orange'}>{amapConfigured ? '地图可用' : '地图待配置'}</Tag>
+                <Tag color={(summary?.issueVehicles ?? 0) > 0 ? 'orange' : 'green'}>{formatCount(summary?.issueVehicles)} 告警车辆</Tag>
+              </Space>
+              <Typography.Title heading={3} style={{ margin: 0 }}>先看车在哪里，再看车发生了什么</Typography.Title>
              <Typography.Text type="secondary">
-                车辆是主对象。32960、808 和宇通 MQTT 只是数据来源，客户每天需要先确认车辆在哪里、是否在线、今天跑了多少、异常能否追溯和导出。
+                32960、808 和宇通 MQTT 只是车辆服务证据。客户每天要直接完成车辆地图监控、轨迹回放、里程统计、时间窗复盘、告警闭环和数据导出。
              </Typography.Text>
              <Space wrap>
                <Button theme="solid" type="primary" onClick={() => onOpenMap({ online: 'online' })}>打开实时地图</Button>
                <Button theme="light" type="primary" onClick={() => onOpenHistory()}>轨迹回放</Button>
                <Button theme="light" type="primary" onClick={() => onOpenMileage({})}>里程统计</Button>
-                <Button theme="light" onClick={exportDashboardSnapshot}>导出概览</Button>
+                <Button theme="light" type="primary" onClick={openTimeMonitorRaw}>历史导出</Button>
+                <Button theme="light" onClick={copyCustomerServiceGuide}>复制客户说明</Button>
              </Space>
            </div>
            <VehicleMap
@@ -1310,8 +1353,24 @@ export function Dashboard({
          </div>
          <div className="vp-customer-hero-side">
            <div className="vp-customer-hero-side-head">
-              <Tag color={amapConfigured ? 'green' : 'orange'}>{amapConfigured ? '地图可用' : '地图待配置'}</Tag>
-              <Tag color={(summary?.issueVehicles ?? 0) > 0 ? 'orange' : 'green'}>{formatCount(summary?.issueVehicles)} 个告警</Tag>
+              <Typography.Text strong>车辆服务路径</Typography.Text>
+              <Button size="small" theme="light" type="primary" onClick={copyCustomerServiceGuide}>复制说明</Button>
+            </div>
+            <div className="vp-customer-journey">
+              {customerJourneySteps.map((item) => (
+                <button
+                  key={item.step}
+                  type="button"
+                  className="vp-customer-journey-item"
+                  onClick={item.onClick}
+                  aria-label={`车辆服务路径 ${item.title} ${item.action}`}
+                >
+                  <span>{item.step}</span>
+                  <strong>{item.title}</strong>
+                  <em>{item.action}</em>
+                  <small>{item.detail}</small>
+                </button>
+              ))}
            </div>
            <div className="vp-customer-health-grid">
              {customerHealthItems.map((item) => (
@@ -1324,7 +1383,7 @@ export function Dashboard({
            </div>
          </div>
        </Card>
-        <Card bordered title="车辆监控指挥台" style={{ marginBottom: 16 }}>
+        <Card bordered title="车辆服务指挥台" style={{ marginBottom: 16 }}>
          <div className="vp-command-center-grid">
            {commandCenterItems.map((item) => (
              <div key={item.title} className="vp-command-center-item">
@@ -1338,7 +1397,7 @@ export function Dashboard({
                    size="small"
                    theme="solid"
                    type="primary"
-                    aria-label={`车辆监控指挥台 ${item.title} ${item.primaryAction}`}
+                    aria-label={`车辆服务指挥台 ${item.title} ${item.primaryAction}`}
                    onClick={item.onPrimary}
                  >
                    {item.primaryAction}
@@ -1347,7 +1406,7 @@ export function Dashboard({
                    size="small"
                    theme="light"
                    type="primary"
-                    aria-label={`车辆监控指挥台 ${item.title} ${item.secondaryAction}`}
+                    aria-label={`车辆服务指挥台 ${item.title} ${item.secondaryAction}`}
                    onClick={item.onSecondary}
                  >
                    {item.secondaryAction}
@@ -1357,7 +1416,7 @@ export function Dashboard({
            ))}
          </div>
        </Card>
-        <Card bordered title="客户常用工作流" style={{ marginBottom: 16 }}>
+        <Card bordered title="客户常用服务" style={{ marginBottom: 16 }}>
          <div className="vp-customer-workflow-grid">
            {customerHeroActions.map((item) => (
              <button key={item.title} type="button" className="vp-customer-workflow-item" onClick={item.onClick} aria-label={`客户工作流 ${item.title}`}>
--- a/vehicle-data-platform/apps/web/src/styles/global.css
+++ b/vehicle-data-platform/apps/web/src/styles/global.css
@@ -360,6 +360,67 @@ body {
  gap: 8px;
 }

+.vp-customer-journey {
+  display: grid;
+  gap: 8px;
+}
+
+.vp-customer-journey-item {
+  min-height: 74px;
+  padding: 10px 12px;
+  border: 1px solid var(--vp-border);
+  border-radius: 8px;
+  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
+  text-align: left;
+  cursor: pointer;
+  font: inherit;
+  display: grid;
+  grid-template-columns: 36px 1fr auto;
+  gap: 4px 10px;
+  align-items: center;
+}
+
+.vp-customer-journey-item:hover,
+.vp-customer-journey-item:focus-visible {
+  border-color: rgba(22, 100, 255, 0.45);
+  box-shadow: var(--vp-shadow-sm);
+  outline: none;
+}
+
+.vp-customer-journey-item span {
+  grid-row: span 2;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: #1664ff;
+  color: #fff;
+  font-size: 12px;
+  font-weight: 700;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.vp-customer-journey-item strong {
+  color: var(--vp-text);
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.vp-customer-journey-item em {
+  color: #1664ff;
+  font-style: normal;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.vp-customer-journey-item small {
+  grid-column: 2 / -1;
+  color: var(--vp-text-muted);
+  font-size: 12px;
+  line-height: 17px;
+}
+
 .vp-customer-health-grid {
  display: grid;
  gap: 10px;
--- a/vehicle-data-platform/apps/web/src/test/App.test.tsx
+++ b/vehicle-data-platform/apps/web/src/test/App.test.tsx
@@ -597,7 +597,8 @@ test('dashboard presents one vehicle service operating posture', async () => {

  expect(await screen.findByText('车辆服务入口')).toBeInTheDocument();
  expect(screen.getAllByText('208 / 1,033 在线').length).toBeGreaterThanOrEqual(1);
-  expect(screen.getByText('今日活跃 4')).toBeInTheDocument();
+  expect(screen.getByText('今日活跃')).toBeInTheDocument();
+  expect(screen.getAllByText('4').length).toBeGreaterThanOrEqual(1);
  expect(screen.getByText('7 告警事件')).toBeInTheDocument();
 });

@@ -793,20 +794,26 @@ test('dashboard exposes vehicle data center capability matrix', async () => {
  };

  await renderDashboard();
-  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.getByText('全域车辆监控')).toBeInTheDocument();
  expect(screen.getByText('异常车辆闭环')).toBeInTheDocument();
  expect(screen.getByText('自定义时间复盘')).toBeInTheDocument();
  expect(screen.getByText('数据交付与导出')).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.getByText('历史数据导出')).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.getAllByText('车辆地图').length).toBeGreaterThanOrEqual(1);
+  expect(screen.getAllByText('数据导出').length).toBeGreaterThanOrEqual(1);
+  expect(screen.getByText('车辆服务路径')).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.getByRole('button', { name: '车辆服务路径 导出交付 数据导出' })).toBeInTheDocument();
  expect(screen.getByText('今日车辆服务任务板')).toBeInTheDocument();
  expect(screen.getByText('先看全域在线')).toBeInTheDocument();
  expect(screen.getByText('再看重点车辆')).toBeInTheDocument();
@@ -843,7 +850,7 @@ test('dashboard exposes vehicle data center capability matrix', async () => {
  expect(screen.getByRole('button', { name: '复制复盘包' })).toBeInTheDocument();
  expect(screen.getByText('这个范围会同步带入轨迹、里程、历史证据和告警复盘，适合客户问询、BI 核对和异常解释。')).toBeInTheDocument();
  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();
@@ -893,7 +900,7 @@ test('dashboard exposes vehicle data center capability matrix', async () => {
  expect(writeText).toHaveBeenCalledWith(expect.stringContaining('1. 实时监控'));
  expect(writeText).toHaveBeenCalledWith(expect.stringContaining('SLA：目标 0-1 秒内进入实时视图'));

-  fireEvent.click(screen.getByRole('button', { name: '客户工作流 实时车辆地图' }));
+  fireEvent.click(screen.getByRole('button', { name: '客户工作流 车辆地图' }));
  expect(window.location.hash).toBe('#/map?online=online');
  cleanup();

@@ -915,7 +922,7 @@ test('dashboard exposes vehicle data center capability matrix', async () => {
  cleanup();

  await renderDashboard();
-  fireEvent.click(screen.getByRole('button', { name: '客户工作流 历史数据导出' }));
+  fireEvent.click(screen.getByRole('button', { name: '客户工作流 数据导出' }));
  expect(window.location.hash.startsWith('#/history-query')).toBe(true);
  expect(new URLSearchParams(window.location.hash.split('?')[1] ?? '').get('tab')).toBe('raw');
  expect(new URLSearchParams(window.location.hash.split('?')[1] ?? '').get('includeFields')).toBe('true');