fix: correct operational statistics and form interactions

src/apps/admin/sending-monitor/MonitorDetails.tsx

@@ -1,4 +1,4 @@
-import { lazy, Suspense, useCallback, useEffect, useMemo, useState } from 'react';
+import { lazy, Suspense, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import type { EChartsOption } from 'echarts';
 import { Link } from 'react-router-dom';
 import { Button, Modal, Select, Table, Tag, type TableColumn } from '@/components/ui';
@@ -212,31 +212,37 @@ export function MonitorAlerts() {
   const [data, setData] = useState<Page<Alert>>({ items: [], total: 0, page: 1, pageSize: 20 }),
     [page, setPage] = useState(1),
     [state, setState] = useState(''),
+    [readStatus, setReadStatus] = useState(''),
     [error, setError] = useState('');
   const [detail, setDetail] = useState<Alert | null>(null),
     [busy, setBusy] = useState(false);
-  const load = useCallback(
-    () =>
-      monitorApi
-        .alerts(page, state)
-        .then((r) => {
-          setData(r);
-          setError('');
-        })
-        .catch((e) => setError(e.message)),
-    [page, state],
-  );
+  const requestSequence = useRef(0);
+  const load = useCallback(async () => {
+    const sequence = ++requestSequence.current;
+    try {
+      const result = await monitorApi.alerts(page, state, readStatus);
+      if (sequence !== requestSequence.current) return;
+      setData(result);
+      setError('');
+    } catch (failure) {
+      if (sequence === requestSequence.current) setError(failure instanceof Error ? failure.message : '告警加载失败');
+    }
+  }, [page, state, readStatus]);
   useEffect(() => {
     void load();
     const timer = setInterval(() => {
       if (!document.hidden) void load();
     }, 30000);
-    return () => clearInterval(timer);
+    return () => {
+      clearInterval(timer);
+      requestSequence.current += 1;
+    };
   }, [load]);
   async function read(row: Alert) {
     setBusy(true);
     try {
       await monitorApi.read(row.id);
+      setDetail((current) => (current?.id === row.id ? { ...current, unread: false } : current));
       window.dispatchEvent(new Event('cmpp-monitor-alert-refresh'));
       await load();
     } catch (e) {
@@ -312,6 +318,19 @@ export function MonitorAlerts() {
   ];
   return (
     <div className="page-stack">
+      <Select
+        label="阅读状态"
+        value={readStatus}
+        options={[
+          { value: '', label: '全部' },
+          { value: 'unread', label: '未读' },
+          { value: 'read', label: '已读' },
+        ]}
+        onChange={(event) => {
+          setReadStatus(event.target.value);
+          setPage(1);
+        }}
+      />
       <Select
         label="告警状态"
         value={state}