feat(platform): focus unresolved vehicle detail on binding

vehicle-data-platform/apps/web/src/pages/VehicleDetail.tsx

@@ -83,6 +83,21 @@ export function VehicleDetail({
   const online = summary?.online || identity?.online || false;
   const lastSeen = summary?.lastSeen || latest?.lastSeen || '-';
   const formKey = `${query.keyword}-${query.protocol ?? ''}`;
+  const qualityTable = (
+    <Table
+      loading={loading}
+      pagination={false}
+      rowKey={(row?: QualityIssueRow) => `${row?.protocol ?? ''}-${row?.issueType ?? ''}-${row?.lastSeen ?? ''}`}
+      dataSource={detail?.quality.items ?? []}
+      columns={[
+        { title: '来源', dataIndex: 'protocol', width: 130 },
+        { title: '问题', dataIndex: 'issueType', width: 150 },
+        { title: '级别', width: 110, render: (_: unknown, row: QualityIssueRow) => <Tag color={row.severity === 'error' ? 'red' : 'orange'}>{row.severity}</Tag> },
+        { title: '最后时间', dataIndex: 'lastSeen', width: 190 },
+        { title: '说明', dataIndex: 'detail' }
+      ]}
+    />
+  );
 
   return (
     <div className="vp-page">
@@ -142,53 +157,66 @@ export function VehicleDetail({
         ) : null}
       </Card>
 
-      <Card bordered title="数据来源覆盖" style={{ marginTop: 16 }}>
-        {detail?.sourceStatus?.length ? (
-          <div className="vp-source-grid">
-            {detail.sourceStatus.map((source) => (
-              <div key={source.protocol} className="vp-source-card">
-                <div className="vp-source-card-head">
-                  <Space>
-                    <Tag color={source.protocol === summary?.primaryProtocol ? 'blue' : 'grey'}>{source.protocol}</Tag>
-                    <StatusTag status={source.online ? 'ok' : 'offline'} />
-                  </Space>
-                  <Typography.Text type="tertiary">{source.lastSeen || '无上报'}</Typography.Text>
-                </div>
-                <Space spacing={4} wrap>
-                  {sourceCapabilities.map((item) => (
-                    <Tag key={item.key} color={source[item.key] ? 'green' : 'grey'}>
-                      {item.label}{source[item.key] ? '有' : '无'}
-                    </Tag>
-                  ))}
-                </Space>
+      {hasResolvedVIN ? (
+        <>
+          <Card bordered title="数据来源覆盖" style={{ marginTop: 16 }}>
+            {detail?.sourceStatus?.length ? (
+              <div className="vp-source-grid">
+                {detail.sourceStatus.map((source) => (
+                  <div key={source.protocol} className="vp-source-card">
+                    <div className="vp-source-card-head">
+                      <Space>
+                        <Tag color={source.protocol === summary?.primaryProtocol ? 'blue' : 'grey'}>{source.protocol}</Tag>
+                        <StatusTag status={source.online ? 'ok' : 'offline'} />
+                      </Space>
+                      <Typography.Text type="tertiary">{source.lastSeen || '无上报'}</Typography.Text>
+                    </div>
+                    <Space spacing={4} wrap>
+                      {sourceCapabilities.map((item) => (
+                        <Tag key={item.key} color={source[item.key] ? 'green' : 'grey'}>
+                          {item.label}{source[item.key] ? '有' : '无'}
+                        </Tag>
+                      ))}
+                    </Space>
+                  </div>
+                ))}
               </div>
-            ))}
-          </div>
-        ) : (
-          <Typography.Text type="secondary">暂未查询到该车辆的数据来源覆盖。</Typography.Text>
-        )}
-      </Card>
+            ) : (
+              <Typography.Text type="secondary">暂未查询到该车辆的数据来源覆盖。</Typography.Text>
+            )}
+          </Card>
 
-      <Card bordered title="来源诊断明细" style={{ marginTop: 16 }}>
-        <Table
-          loading={loading}
-          pagination={false}
-          rowKey="protocol"
-          dataSource={detail?.sourceStatus ?? []}
-          columns={[
-            { title: '来源', dataIndex: 'protocol', width: 130 },
-            { title: '在线', width: 100, render: (_: unknown, row: VehicleSourceStatus) => <StatusTag status={row.online ? 'ok' : 'offline'} /> },
-            { title: '最后时间', dataIndex: 'lastSeen', width: 190 },
-            { title: '实时', width: 90, render: (_: unknown, row: VehicleSourceStatus) => <Tag color={row.hasRealtime ? 'green' : 'grey'}>{row.hasRealtime ? '有' : '无'}</Tag> },
-            { title: '历史', width: 90, render: (_: unknown, row: VehicleSourceStatus) => <Tag color={row.hasHistory ? 'green' : 'grey'}>{row.hasHistory ? '有' : '无'}</Tag> },
-            { title: 'RAW', width: 90, render: (_: unknown, row: VehicleSourceStatus) => <Tag color={row.hasRaw ? 'green' : 'grey'}>{row.hasRaw ? '有' : '无'}</Tag> },
-            { title: '里程', width: 90, render: (_: unknown, row: VehicleSourceStatus) => <Tag color={row.hasMileage ? 'green' : 'grey'}>{row.hasMileage ? '有' : '无'}</Tag> }
-          ]}
-        />
-      </Card>
+          <Card bordered title="来源诊断明细" style={{ marginTop: 16 }}>
+            <Table
+              loading={loading}
+              pagination={false}
+              rowKey="protocol"
+              dataSource={detail?.sourceStatus ?? []}
+              columns={[
+                { title: '来源', dataIndex: 'protocol', width: 130 },
+                { title: '在线', width: 100, render: (_: unknown, row: VehicleSourceStatus) => <StatusTag status={row.online ? 'ok' : 'offline'} /> },
+                { title: '最后时间', dataIndex: 'lastSeen', width: 190 },
+                { title: '实时', width: 90, render: (_: unknown, row: VehicleSourceStatus) => <Tag color={row.hasRealtime ? 'green' : 'grey'}>{row.hasRealtime ? '有' : '无'}</Tag> },
+                { title: '历史', width: 90, render: (_: unknown, row: VehicleSourceStatus) => <Tag color={row.hasHistory ? 'green' : 'grey'}>{row.hasHistory ? '有' : '无'}</Tag> },
+                { title: 'RAW', width: 90, render: (_: unknown, row: VehicleSourceStatus) => <Tag color={row.hasRaw ? 'green' : 'grey'}>{row.hasRaw ? '有' : '无'}</Tag> },
+                { title: '里程', width: 90, render: (_: unknown, row: VehicleSourceStatus) => <Tag color={row.hasMileage ? 'green' : 'grey'}>{row.hasMileage ? '有' : '无'}</Tag> }
+              ]}
+            />
+          </Card>
+        </>
+      ) : null}
 
-      <Card bordered style={{ marginTop: 16 }}>
-        <Tabs>
+      {!hasResolvedVIN ? (
+        <Card bordered style={{ marginTop: 16 }}>
+          <Tabs>
+            <Tabs.TabPane tab="质量问题" itemKey="quality">
+              {qualityTable}
+            </Tabs.TabPane>
+          </Tabs>
+        </Card>
+      ) : (
+        <Card bordered style={{ marginTop: 16 }}>
+          <Tabs>
           <Tabs.TabPane tab="实时状态" itemKey="realtime">
             <div className="vp-realtime-strip">
               {[
@@ -271,22 +299,11 @@ export function VehicleDetail({
             />
           </Tabs.TabPane>
           <Tabs.TabPane tab="质量问题" itemKey="quality">
-            <Table
-              loading={loading}
-              pagination={false}
-              rowKey={(row?: QualityIssueRow) => `${row?.protocol ?? ''}-${row?.issueType ?? ''}-${row?.lastSeen ?? ''}`}
-              dataSource={detail?.quality.items ?? []}
-              columns={[
-                { title: '来源', dataIndex: 'protocol', width: 130 },
-                { title: '问题', dataIndex: 'issueType', width: 150 },
-                { title: '级别', width: 110, render: (_: unknown, row: QualityIssueRow) => <Tag color={row.severity === 'error' ? 'red' : 'orange'}>{row.severity}</Tag> },
-                { title: '最后时间', dataIndex: 'lastSeen', width: 190 },
-                { title: '说明', dataIndex: 'detail' }
-              ]}
-            />
+            {qualityTable}
           </Tabs.TabPane>
-        </Tabs>
-      </Card>
+          </Tabs>
+        </Card>
+      )}
     </div>
   );
 }