feat(web/miniapp): 高发病天气预警展示（#12）

web/src/dal/weather.ts

@@ -0,0 +1,12 @@
+import { get } from '../api/http';
+
+export interface WeatherAlert {
+  id: string;
+  disease: string;
+  level: string;
+  reason: string;
+  createdAt?: string;
+}
+
+export const listWeatherAlerts = (limit = 5) =>
+  get<WeatherAlert[]>('/weather/alerts', { params: { limit } });

web/src/pages/Alert.tsx

@@ -1,9 +1,10 @@
-import { Button, Tag, message } from 'antd';
+import { Button, Card, Space, Tag, message } from 'antd';
 import { CheckOutlined } from '@ant-design/icons';
 import { ProTable, type ProColumns } from '@ant-design/pro-components';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import dayjs from 'dayjs';
 import { getAlertClip, listAlerts, markAlertRead, markAllRead, type Alert } from '../dal/alert';
+import { listWeatherAlerts, type WeatherAlert } from '../dal/weather';
 
 const LEVEL_MAP: Record<string, { color: string; text: string }> = {
   info: { color: 'blue', text: '提示' },
@@ -19,6 +20,37 @@ const LEVEL_MAP: Record<string, { color: string; text: string }> = {
 const levelOf = (alert: Alert) => alert.level || alert.severity || 'info';
 const isRead = (alert: Alert) => alert.read ?? alert.acknowledged ?? false;
 
+const WEATHER_LEVEL_COLORS: Record<string, string> = {
+  yellow: 'gold',
+  orange: 'orange',
+  red: 'red',
+};
+
+function WeatherAlertsBlock() {
+  const [alerts, setAlerts] = useState<WeatherAlert[]>([]);
+  useEffect(() => {
+    listWeatherAlerts(5)
+      .then(setAlerts)
+      .catch(() => {});
+  }, []);
+  if (alerts.length === 0) return null;
+  return (
+    <Card title="高发病天气预警" size="small" style={{ marginBottom: 16 }}>
+      <Space direction="vertical" style={{ width: '100%' }}>
+        {alerts.map((a) => (
+          <div key={a.id}>
+            <Tag color={WEATHER_LEVEL_COLORS[a.level] || 'gold'}>
+              {a.level === 'orange' ? '高风险' : a.level === 'red' ? '极高风险' : '注意'}
+            </Tag>
+            <b>{a.disease}</b>
+            <span style={{ marginLeft: 8, color: '#666' }}>{a.reason}</span>
+          </div>
+        ))}
+      </Space>
+    </Card>
+  );
+}
+
 export default function AlertPage() {
   const [, setTick] = useState(0);
 
@@ -89,7 +121,9 @@ export default function AlertPage() {
   ];
 
   return (
-    <ProTable<Alert>
+    <>
+      <WeatherAlertsBlock />
+      <ProTable<Alert>
       rowKey="id"
       columns={columns}
       request={async (p) => {
@@ -109,6 +143,7 @@ export default function AlertPage() {
           全部标为已读
         </Button>,
       ]}
-    />
+      />
+    </>
   );
 }