feat(platform): surface vehicle quality issues

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

@@ -1,4 +1,4 @@
-import { Card, Col, Row, Table, Tag, Toast } from '@douyinfe/semi-ui';
+import { Button, Card, Col, Form, Row, Select, Space, Table, Tag, Toast } from '@douyinfe/semi-ui';
 import { useEffect, useState } from 'react';
 import { api } from '../api/client';
 import type { OpsHealth, QualityIssueRow } from '../api/types';
@@ -8,10 +8,17 @@ export function Quality() {
   const [issues, setIssues] = useState<QualityIssueRow[]>([]);
   const [health, setHealth] = useState<OpsHealth | null>(null);
 
-  useEffect(() => {
-    api.qualityIssues(new URLSearchParams({ limit: '20' }))
+  const loadIssues = (values?: Record<string, string>) => {
+    const params = new URLSearchParams({ limit: '20' });
+    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));
+  };
+
+  useEffect(() => {
+    loadIssues();
     api.opsHealth()
       .then(setHealth)
       .catch((error: Error) => Toast.error(error.message));
@@ -26,6 +33,16 @@ 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.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>
+          </Space>
+        </Form>
         <Table
           rowKey="vin"
           dataSource={issues}