改进后台错误报告列表交互

防止列表请求过期响应覆盖当前筛选结果

为报告行增加键盘打开详情支持

截断详情事件预览并延迟回收下载对象 URL

apps/admin-web/src/pages/AdminErrorReportsPage.tsx

@@ -24,15 +24,18 @@ export function AdminErrorReportsPage({ token, onUnauthorized }: Props) {
   const [busy, setBusy] = useState(false);
   const [filterStatus, setFilterStatus] = useState('');
   const openReportRequestId = useRef(0);
+  const loadRequestId = useRef(0);
 
   const load = useCallback(async () => {
+    const requestId = ++loadRequestId.current;
     setStatus('');
     try {
       const response = await listAdminErrorReports(token, {
         status: filterStatus || undefined,
       });
-      setReports(response.reports);
+      if (requestId === loadRequestId.current) setReports(response.reports);
     } catch (error) {
+      if (requestId !== loadRequestId.current) return;
       if (isAdminApiError(error) && error.status === 401)
         return onUnauthorized();
       setStatus(formatAdminApiError(error));
@@ -88,7 +91,7 @@ export function AdminErrorReportsPage({ token, onUnauthorized }: Props) {
       document.body.appendChild(anchor);
       anchor.click();
       anchor.remove();
-      URL.revokeObjectURL(url);
+      setTimeout(() => URL.revokeObjectURL(url), 1000);
     } catch (error) {
       if (isAdminApiError(error) && error.status === 401) onUnauthorized();
       else setStatus(formatAdminApiError(error));
@@ -139,6 +142,14 @@ export function AdminErrorReportsPage({ token, onUnauthorized }: Props) {
               <tr
                 key={report.batchId}
                 onClick={() => void openReport(report.batchId)}
+                role="button"
+                tabIndex={0}
+                onKeyDown={(event) => {
+                  if (event.key === 'Enter' || event.key === ' ') {
+                    event.preventDefault();
+                    void openReport(report.batchId);
+                  }
+                }}
               >
                 <td>{report.batchId}</td>
                 <td>{report.eventCount}</td>
@@ -168,7 +179,7 @@ export function AdminErrorReportsPage({ token, onUnauthorized }: Props) {
               用户：{selected.userId} · 事件：{selected.eventCount} · 日志：
               {selected.logCount}
             </p>
-            <pre>{JSON.stringify(selected.events, null, 2)}</pre>
+            <pre>{JSON.stringify(selected.events.slice(0, 20), null, 2)}</pre>
             {selected.userDescription ? (
               <p>用户描述：{selected.userDescription}</p>
             ) : null}