feat: 错误监控面板、生成通知、社区搜索、任务队列优化

- AdminMonitor: admin用户可见的客户端错误实时监控面板，右下角浮窗 - generationNotifier: 生成完成浏览器通知 + 站内Toast - CommunityPage: 新增搜索框，标题/描述/标签模糊匹配，防抖300ms - App.tsx: 全局unhandled error/rejection监听上报 - WorkbenchPage: 任务并发提示改为显示当前任务数 - serverConnection: 后端client-errors路由注册 - WelcomeSplash: 欢迎按钮全程显示 Co-Authored-By: Claude Code <noreply@anthropic.com>
2026-06-03 02:01:21 +08:00
parent 468d1d27dd
commit 4ed02aaad5
9 changed files with 411 additions and 6 deletions
@@ -0,0 +1,110 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { keyServerClient } from "../api/keyServerClient";
+
+interface ClientErrorItem {
+  id: number;
+  message: string;
+  stack?: string;
+  source: string;
+  url: string;
+  user_agent?: string;
+  user_id?: number;
+  count: number;
+  first_seen: string;
+  last_seen: string;
+}
+
+const STORAGE_KEY = "omniai:admin-monitor-open";
+const POLL_INTERVAL = 30000;
+
+function formatTime(iso: string) {
+  const d = new Date(iso);
+  return d.toLocaleString("zh-CN", { month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit", second: "2-digit" });
+}
+
+function AdminMonitor() {
+  const [open, setOpen] = useState(() => {
+    try { return sessionStorage.getItem(STORAGE_KEY) === "1"; } catch { return false; }
+  });
+  const [errors, setErrors] = useState<ClientErrorItem[]>([]);
+  const [total, setTotal] = useState(0);
+  const [page, setPage] = useState(1);
+  const [loading, setLoading] = useState(false);
+  const intervalRef = useRef<ReturnType<typeof setInterval>>();
+
+  const fetchErrors = useCallback(async (p = 1) => {
+    setLoading(true);
+    try {
+      const data = await keyServerClient.getClientErrors(p);
+      setErrors(data.items);
+      setTotal(data.total);
+      setPage(p);
+    } catch { /* silent */ }
+    setLoading(false);
+  }, []);
+
+  useEffect(() => {
+    if (!open) return;
+    void fetchErrors(1);
+    intervalRef.current = setInterval(() => fetchErrors(1), POLL_INTERVAL);
+    return () => clearInterval(intervalRef.current);
+  }, [open, fetchErrors]);
+
+  useEffect(() => {
+    try { sessionStorage.setItem(STORAGE_KEY, open ? "1" : "0"); } catch { /* */ }
+  }, [open]);
+
+  const maxPage = Math.max(1, Math.ceil(total / 50));
+
+  if (!open) {
+    return (
+      <button type="button" className="admin-monitor-trigger" onClick={() => setOpen(true)} title="错误监控">
+        <span className="admin-monitor-trigger__dot" aria-hidden="true" />
+      </button>
+    );
+  }
+
+  return (
+    <div className="admin-monitor" role="dialog" aria-label="客户端错误监控">
+      <header className="admin-monitor__header">
+        <strong>客户端错误 ({total})</strong>
+        <div className="admin-monitor__actions">
+          <button type="button" onClick={() => void fetchErrors(1)} disabled={loading}>
+            {loading ? "刷新中..." : "刷新"}
+          </button>
+          <button type="button" onClick={() => setOpen(false)}>关闭</button>
+        </div>
+      </header>
+      <section className="admin-monitor__list">
+        {errors.length === 0 ? (
+          <div className="admin-monitor__empty">暂无错误</div>
+        ) : (
+          errors.map((err) => (
+            <details key={err.id} className="admin-monitor__item">
+              <summary>
+                <span className="admin-monitor__source">{err.source}</span>
+                <span className="admin-monitor__msg">{err.message.slice(0, 120)}</span>
+                <span className="admin-monitor__count">{err.count}</span>
+                <time>{formatTime(err.last_seen)}</time>
+              </summary>
+              <div className="admin-monitor__detail">
+                <div><b>URL:</b> {err.url}</div>
+                <div><b>User:</b> {err.user_id || "匿名"}</div>
+                {err.stack ? <pre>{err.stack.slice(0, 1000)}</pre> : null}
+              </div>
+            </details>
+          ))
+        )}
+      </section>
+      {maxPage > 1 ? (
+        <footer className="admin-monitor__pager">
+          <button type="button" disabled={page <= 1} onClick={() => fetchErrors(page - 1)}>上一页</button>
+          <span>{page} / {maxPage}</span>
+          <button type="button" disabled={page >= maxPage} onClick={() => fetchErrors(page + 1)}>下一页</button>
+        </footer>
+      ) : null}
+    </div>
+  );
+}
+
+export default AdminMonitor;