feat(platform): paginate quality issues

vehicle-data-platform/apps/api/internal/platform/production_store.go

@@ -313,12 +313,17 @@ func (s *ProductionStore) QualityIssues(ctx context.Context, query url.Values) (
 		like := "%" + keyword + "%"
 		args = append(args, like, like, like)
 	}
+	countArgs := append([]any(nil), args...)
 	args = append(args, limit, offset)
+	fromSQL := `FROM jt808_registration r LEFT JOIN vehicle_identity_binding b ON b.phone = r.phone WHERE ` + strings.Join(where, " AND ")
+	total := 0
+	if err := s.db.QueryRowContext(ctx, `SELECT COUNT(*) `+fromSQL, countArgs...).Scan(&total); err != nil {
+		return Page[QualityIssueRow]{}, err
+	}
 	rows, err := s.db.QueryContext(ctx, `SELECT COALESCE(b.vin, 'unknown') AS vin, COALESCE(b.plate, '') AS plate, r.phone, COALESCE(r.source_endpoint, ''), COALESCE(DATE_FORMAT(r.latest_seen_at, '%Y-%m-%d %H:%i:%s'), '') `+
-		`FROM jt808_registration r LEFT JOIN vehicle_identity_binding b ON b.phone = r.phone `+
-		`WHERE `+strings.Join(where, " AND ")+` ORDER BY r.latest_seen_at DESC LIMIT ? OFFSET ?`, args...)
+		fromSQL+` ORDER BY r.latest_seen_at DESC, r.phone ASC LIMIT ? OFFSET ?`, args...)
 	if err != nil {
-		return Page[QualityIssueRow]{}, nil
+		return Page[QualityIssueRow]{}, err
 	}
 	defer rows.Close()
 	items := make([]QualityIssueRow, 0)
@@ -337,7 +342,7 @@ func (s *ProductionStore) QualityIssues(ctx context.Context, query url.Values) (
 			Detail:    fmt.Sprintf("phone %s 未命中 binding 表，来源 %s", phone, source),
 		})
 	}
-	return Page[QualityIssueRow]{Items: items, Total: len(items), Limit: limit, Offset: offset}, rows.Err()
+	return Page[QualityIssueRow]{Items: items, Total: total, Limit: limit, Offset: offset}, rows.Err()
 }
 
 func (s *ProductionStore) OpsHealth(ctx context.Context) (OpsHealth, error) {

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

@@ -7,18 +7,26 @@ import { PageHeader } from '../components/PageHeader';
 export function Quality() {
   const [issues, setIssues] = useState<QualityIssueRow[]>([]);
   const [health, setHealth] = useState<OpsHealth | null>(null);
+  const [loadingIssues, setLoadingIssues] = useState(true);
+  const [filters, setFilters] = useState<Record<string, string>>({});
+  const [pagination, setPagination] = useState({ currentPage: 1, pageSize: 20, total: 0 });
 
-  const loadIssues = (values?: Record<string, string>) => {
-    const params = new URLSearchParams({ limit: '20' });
+  const loadIssues = (values: Record<string, string> = filters, page = pagination.currentPage, pageSize = pagination.pageSize) => {
+    setLoadingIssues(true);
+    const params = new URLSearchParams({ limit: String(pageSize), offset: String((page - 1) * pageSize) });
     if (values?.keyword) params.set('keyword', values.keyword);
     if (values?.protocol) params.set('protocol', values.protocol);
     api.qualityIssues(params)
-      .then((page) => setIssues(page.items))
-      .catch((error: Error) => Toast.error(error.message));
+      .then((nextPage) => {
+        setIssues(nextPage.items);
+        setPagination({ currentPage: page, pageSize, total: nextPage.total });
+      })
+      .catch((error: Error) => Toast.error(error.message))
+      .finally(() => setLoadingIssues(false));
   };
 
   useEffect(() => {
-    loadIssues();
+    loadIssues({}, 1, pagination.pageSize);
     api.opsHealth()
       .then(setHealth)
       .catch((error: Error) => Toast.error(error.message));
@@ -33,20 +41,35 @@ export function Quality() {
         <Col span={8}><Card bordered title="存储写入">{health?.tdengineWritable && health.mysqlWritable ? '正常' : '异常'}</Card></Col>
       </Row>
       <Card bordered title="质量问题" style={{ marginTop: 16 }}>
-        <Form layout="horizontal" onSubmit={(values) => loadIssues(values as Record<string, string>)} style={{ marginBottom: 12 }}>
+        <Form layout="horizontal" onSubmit={(values) => {
+          const nextFilters = values as Record<string, string>;
+          setFilters(nextFilters);
+          loadIssues(nextFilters, 1, pagination.pageSize);
+        }} style={{ marginBottom: 12 }}>
           <Form.Input field="keyword" label="关键词" placeholder="手机号 / 来源地址 / 车牌" style={{ width: 240 }} />
           <Form.Select field="protocol" label="协议" placeholder="全部协议" style={{ width: 160 }}>
             <Select.Option value="JT808">JT808</Select.Option>
           </Form.Select>
           <Space>
             <Button htmlType="submit" theme="solid" type="primary">筛选</Button>
-            <Button onClick={() => loadIssues()}>重置</Button>
+            <Button onClick={() => {
+              setFilters({});
+              loadIssues({}, 1, pagination.pageSize);
+            }}>重置</Button>
           </Space>
         </Form>
         <Table
-          rowKey="vin"
+          loading={loadingIssues}
+          rowKey={(row?: QualityIssueRow) => `${row?.protocol ?? ''}-${row?.issueType ?? ''}-${row?.lastSeen ?? ''}-${row?.detail ?? ''}`}
           dataSource={issues}
-          pagination={false}
+          pagination={{
+            currentPage: pagination.currentPage,
+            pageSize: pagination.pageSize,
+            total: pagination.total,
+            showSizeChanger: true,
+            onPageChange: (page) => loadIssues(filters, page, pagination.pageSize),
+            onPageSizeChange: (pageSize) => loadIssues(filters, 1, pageSize)
+          }}
           columns={[
             { title: 'VIN', dataIndex: 'vin' },
             { title: '车牌', dataIndex: 'plate' },