fix(admin): 避免徽标刷新响应乱序

src/app/(main)/comparison-records/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import type { CSSProperties, ReactNode } from 'react';
 import {
   App, Button, Card, Col, Collapse, DatePicker, Descriptions, Divider, Drawer, Input, InputNumber,
@@ -9,13 +9,8 @@ import {
 import type { ColumnsType } from 'antd/es/table';
 import dayjs, { type Dayjs } from 'dayjs';
 import { api, errMsg } from '@/lib/api';
-import { formatWallTime, yuan } from '@/lib/format';
+import { formatWallTime, percentile, yuan } from '@/lib/format';
-import type {
+import type { ComparisonRecordDetail, ComparisonRecordListItem, CursorPage } from '@/lib/types';
-  ComparisonRecordDetail,
-  ComparisonRecordListItem,
-  ComparisonRecordsSummary,
-  CursorPage,
-} from '@/lib/types';
 
 const { RangePicker } = DatePicker;
 
@@ -110,11 +105,8 @@ export default function ComparisonRecordsPage() {
     date_from: dayjs().subtract(1, 'day').format('YYYY-MM-DD'),
     date_to: dayjs().subtract(1, 'day').format('YYYY-MM-DD'),
   });
-  const [items, setItems] = useState<ComparisonRecordListItem[]>([]);
+  const [allItems, setAllItems] = useState<ComparisonRecordListItem[]>([]);
-  const [total, setTotal] = useState(0);
+  const [loading, setLoading] = useState(false);
-  const [overview, setOverview] = useState<ComparisonRecordsSummary | null>(null);
-  const [listLoading, setListLoading] = useState(false);
-  const [summaryLoading, setSummaryLoading] = useState(false);
   const [page, setPage] = useState(1);
   const [pageSize, setPageSize] = useState(20);
   // LLM 单价(元/百万 token),本地持久化;仅用于前端估算成本,不入库、不影响其它页面
@@ -133,8 +125,7 @@ export default function ComparisonRecordsPage() {
   const [detail, setDetail] = useState<ComparisonRecordDetail | null>(null);
   const [detailLoading, setDetailLoading] = useState(false);
 
-  const search = () => {
+  const search = () =>
-    setPage(1);
     setApplied({
       date_from: range[0].format('YYYY-MM-DD'),
       date_to: range[1].format('YYYY-MM-DD'),
@@ -144,7 +135,6 @@ export default function ComparisonRecordsPage() {
       store: store.trim() || undefined,
       product: product.trim() || undefined,
     });
-  };
 
   const reset = () => {
     setUserId(null);
@@ -153,7 +143,6 @@ export default function ComparisonRecordsPage() {
     setStore('');
     setProduct('');
     const yesterday = dayjs().subtract(1, 'day');
-    setPage(1);
     setRange([yesterday, yesterday]);
     setApplied({
       date_from: yesterday.format('YYYY-MM-DD'),
@@ -163,50 +152,49 @@ export default function ComparisonRecordsPage() {
 
   useEffect(() => {
     let alive = true;
-    const loadPage = async () => {
+    const loadAll = async () => {
-      setListLoading(true);
+      setLoading(true);
       try {
-        const { data } = await api.get<CursorPage<ComparisonRecordListItem>>(
+        const serverFilters = { ...applied };
-          '/admin/api/comparison-records',
+        delete serverFilters.date_from;
-          { params: { ...applied, limit: pageSize, cursor: (page - 1) * pageSize } },
+        delete serverFilters.date_to;
-        );
+        const rows: ComparisonRecordListItem[] = [];
+        let cursor = 0;
+        for (let pageIndex = 0; pageIndex < 200; pageIndex += 1) {
+          const { data } = await api.get<CursorPage<ComparisonRecordListItem>>(
+            '/admin/api/comparison-records',
+            { params: { ...serverFilters, limit: 100, cursor } },
+          );
+          rows.push(...data.items);
+          if (data.next_cursor == null || data.items.length === 0) break;
+          cursor = data.next_cursor;
+        }
         if (alive) {
-          setItems(data.items);
+          setAllItems(rows);
-          setTotal(data.total ?? 0);
+          setPage(1);
         }
       } catch (e) {
         if (alive) message.error(errMsg(e));
       } finally {
-        if (alive) setListLoading(false);
+        if (alive) setLoading(false);
       }
     };
-    loadPage();
+    loadAll();
-    return () => {
-      alive = false;
-    };
-  }, [applied, message, page, pageSize]);
-
-  useEffect(() => {
-    let alive = true;
-    const loadSummary = async () => {
-      setSummaryLoading(true);
-      try {
-        const { data } = await api.get<ComparisonRecordsSummary>(
-          '/admin/api/comparison-records/summary',
-          { params: applied },
-        );
-        if (alive) setOverview(data);
-      } catch (e) {
-        if (alive) message.error(errMsg(e));
-      } finally {
-        if (alive) setSummaryLoading(false);
-      }
-    };
-    loadSummary();
     return () => {
       alive = false;
     };
   }, [applied, message]);
+
+  const filteredItems = useMemo(() => {
+    const from = String(applied.date_from ?? '');
+    const to = String(applied.date_to ?? '');
+    return allItems.filter((item) => {
+      const date = dayjs(item.created_at).format('YYYY-MM-DD');
+      return (!from || date >= from) && (!to || date <= to);
+    });
+  }, [allItems, applied]);
+  const total = filteredItems.length;
+  const items = filteredItems.slice((page - 1) * pageSize, page * pageSize);
   const onChange = (nextPage: number, nextPageSize: number) => {
     setPageSize(nextPageSize);
     setPage(nextPageSize === pageSize ? nextPage : 1);
@@ -230,6 +218,46 @@ export default function ComparisonRecordsPage() {
     setDetailLoading(false);
   };
 
+  const overview = useMemo(() => {
+    const completed = filteredItems.filter(
+      (item) => item.status === 'success' || item.status === 'failed',
+    );
+    const cancelled = filteredItems.filter((item) => item.status === 'cancelled');
+    const success = filteredItems.filter((item) => item.status === 'success');
+    const successRateDenominator = filteredItems.length - cancelled.length;
+    const completedDurations = completed
+      .map((item) => item.total_ms)
+      .filter((value): value is number => value != null);
+    const cancelledDurations = cancelled
+      .map((item) => item.total_ms)
+      .filter((value): value is number => value != null);
+    const costs = filteredItems
+      .map((item) => item.llm_cost_yuan)
+      .filter((value): value is number => value != null);
+    const avg = (values: number[]) =>
+      values.length ? values.reduce((sum, value) => sum + value, 0) / values.length : null;
+    return {
+      started: filteredItems.length,
+      completed: completed.length,
+      success: success.length,
+      successRate: successRateDenominator ? success.length / successRateDenominator : null,
+      avgTokenCost: avg(costs),
+      lowerPriceRate: success.length
+        ? success.filter((item) => (item.saved_amount_cents ?? 0) > 0).length / success.length
+        : null,
+      avgMs: avg(completedDurations),
+      p5Ms: percentile(completedDurations, 0.05),
+      p50Ms: percentile(completedDurations, 0.5),
+      p95Ms: percentile(completedDurations, 0.95),
+      p99Ms: percentile(completedDurations, 0.99),
+      cancelled: cancelled.length,
+      cancelledRate: filteredItems.length ? cancelled.length / filteredItems.length : null,
+      cancelledP5Ms: percentile(cancelledDurations, 0.05),
+      cancelledP50Ms: percentile(cancelledDurations, 0.5),
+      cancelledP95Ms: percentile(cancelledDurations, 0.95),
+    };
+  }, [filteredItems]);
+
   const columns: ColumnsType<ComparisonRecordListItem> = [
     { title: '时间', dataIndex: 'created_at', width: 150, render: (v: string) => formatWallTime(v) },
     {
@@ -396,28 +424,28 @@ export default function ComparisonRecordsPage() {
         </Space>
       </Card>
 
-      <Card size="small" style={{ marginBottom: 16 }} loading={summaryLoading}>
+      <Card size="small" style={{ marginBottom: 16 }} loading={loading}>
         <Divider orientation="left" plain style={{ marginTop: 0 }}>数据概览</Divider>
         <Row gutter={[16, 16]}>
-          <Col xs={12} md={6}><Statistic title="比价发起数" value={overview?.started ?? 0} /></Col>
+          <Col xs={12} md={6}><Statistic title="比价发起数" value={overview.started} /></Col>
-          <Col xs={12} md={6}><Statistic title="比价完成数" value={overview?.completed ?? 0} /></Col>
+          <Col xs={12} md={6}><Statistic title="比价完成数" value={overview.completed} /></Col>
-          <Col xs={12} md={6}><Statistic title="比价成功次数" value={overview?.success ?? 0} /></Col>
+          <Col xs={12} md={6}><Statistic title="比价成功次数" value={overview.success} /></Col>
-          <Col xs={12} md={6}><Statistic title="比价成功率" value={fmtRate(overview?.success_rate ?? null)} /></Col>
+          <Col xs={12} md={6}><Statistic title="比价成功率" value={fmtRate(overview.successRate)} /></Col>
-          <Col xs={12} md={6}><Statistic title="平均 TOKEN 成本" value={overview?.avg_token_cost ?? '-'} precision={4} prefix="¥" /></Col>
+          <Col xs={12} md={6}><Statistic title="平均 TOKEN 成本" value={overview.avgTokenCost ?? '-'} precision={4} prefix="¥" /></Col>
-          <Col xs={12} md={6}><Statistic title="比出更低价率" value={fmtRate(overview?.lower_price_rate ?? null)} /></Col>
+          <Col xs={12} md={6}><Statistic title="比出更低价率" value={fmtRate(overview.lowerPriceRate)} /></Col>
-          <Col xs={12} md={6}><Statistic title="耗时平均数" value={fmtMs(overview?.avg_duration_ms ?? null)} /></Col>
+          <Col xs={12} md={6}><Statistic title="耗时平均数" value={fmtMs(overview.avgMs)} /></Col>
-          <Col xs={12} md={6}><Statistic title="耗时 5 分位" value={fmtMs(overview?.p5_duration_ms ?? null)} /></Col>
+          <Col xs={12} md={6}><Statistic title="耗时 5 分位" value={fmtMs(overview.p5Ms)} /></Col>
-          <Col xs={12} md={6}><Statistic title="耗时 50 分位" value={fmtMs(overview?.p50_duration_ms ?? null)} /></Col>
+          <Col xs={12} md={6}><Statistic title="耗时 50 分位" value={fmtMs(overview.p50Ms)} /></Col>
-          <Col xs={12} md={6}><Statistic title="耗时 95 分位" value={fmtMs(overview?.p95_duration_ms ?? null)} /></Col>
+          <Col xs={12} md={6}><Statistic title="耗时 95 分位" value={fmtMs(overview.p95Ms)} /></Col>
-          <Col xs={12} md={6}><Statistic title="耗时 99 分位" value={fmtMs(overview?.p99_duration_ms ?? null)} /></Col>
+          <Col xs={12} md={6}><Statistic title="耗时 99 分位" value={fmtMs(overview.p99Ms)} /></Col>
         </Row>
         <Divider orientation="left" plain>中途退出</Divider>
         <Row gutter={[16, 16]}>
-          <Col flex="1 1 180px"><Statistic title="中途退出次数" value={overview?.cancelled ?? 0} /></Col>
+          <Col xs={12} md={6}><Statistic title="中途退出次数" value={overview.cancelled} /></Col>
-          <Col flex="1 1 180px"><Statistic title="中途退出率" value={fmtRate(overview?.cancelled_rate ?? null)} /></Col>
+          <Col xs={12} md={6}><Statistic title="中途退出率" value={fmtRate(overview.cancelledRate)} /></Col>
-          <Col flex="1 1 180px"><Statistic title="退出耗时 5 分位" value={fmtMs(overview?.cancelled_p5_ms ?? null)} /></Col>
+          <Col xs={12} md={6}><Statistic title="退出耗时 5 分位" value={fmtMs(overview.cancelledP5Ms)} /></Col>
-          <Col flex="1 1 180px"><Statistic title="退出耗时 50 分位" value={fmtMs(overview?.cancelled_p50_ms ?? null)} /></Col>
+          <Col xs={12} md={6}><Statistic title="退出耗时 50 分位" value={fmtMs(overview.cancelledP50Ms)} /></Col>
-          <Col flex="1 1 180px"><Statistic title="退出耗时 95 分位" value={fmtMs(overview?.cancelled_p95_ms ?? null)} /></Col>
+          <Col xs={12} md={6}><Statistic title="退出耗时 95 分位" value={fmtMs(overview.cancelledP95Ms)} /></Col>
         </Row>
       </Card>
 
@@ -425,7 +453,7 @@ export default function ComparisonRecordsPage() {
         rowKey="id"
         columns={columns}
         dataSource={items}
-        loading={listLoading}
+        loading={loading}
         pagination={{
           current: page,
           pageSize,

src/app/(main)/feedbacks/page.tsx

@@ -20,6 +20,7 @@ import type { Dayjs } from 'dayjs';
 import { api } from '@/lib/api';
 import { canDo } from '@/lib/auth';
 import { formatWallTime } from '@/lib/format';
+import { refreshReviewBadge } from '@/lib/reviewBadge';
 import { usePagedList } from '@/lib/usePagedList';
 import type { Feedback, FeedbackSummary } from '@/lib/types';
 import FeedbackHandleDrawer from './FeedbackHandleDrawer';
@@ -431,7 +432,11 @@ export default function FeedbacksPage() {
         feedback={drawerFb}
         open={drawerOpen}
         onClose={() => setDrawerOpen(false)}
-        onDone={() => { reload(); loadSummary(); }}
+        onDone={() => {
+          reload();
+          loadSummary();
+          refreshReviewBadge('/feedbacks');
+        }}
       />
 
       <UserRecordsDrawer<Feedback>

src/app/(main)/layout.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { usePathname, useRouter } from 'next/navigation';
 import {
   BarChartOutlined,
@@ -25,7 +25,16 @@ import {
 import { Avatar, Dropdown, Layout, Tooltip } from 'antd';
 import { api } from '@/lib/api';
 import { clearAuth, getAdmin, getToken, setAuth } from '@/lib/auth';
-import type { AdminInfo } from '@/lib/types';
+import {
+  REVIEW_BADGE_REFRESH_EVENT,
+  type ReviewBadgeKey,
+} from '@/lib/reviewBadge';
+import type {
+  AdminInfo,
+  FeedbackSummary,
+  PriceReportSummary,
+  WithdrawSummary,
+} from '@/lib/types';
 
 const { Sider, Header, Content } = Layout;
 
@@ -96,6 +105,8 @@ export default function MainLayout({ children }: { children: React.ReactNode })
   const pathname = usePathname();
   const [admin, setAdmin] = useState<AdminInfo | null>(null);
   const [collapsed, setCollapsed] = useState(false);
+  const [pendingReviewCounts, setPendingReviewCounts] = useState<Partial<Record<ReviewBadgeKey, number>>>({});
+  const reviewRefreshVersion = useRef<Partial<Record<ReviewBadgeKey, number>>>({});
 
   useEffect(() => {
     const token = getToken();
@@ -114,6 +125,44 @@ export default function MainLayout({ children }: { children: React.ReactNode })
       .catch(() => {});
   }, [router]);
 
+  useEffect(() => {
+    if (!admin) return;
+    const canAccess = (page: string) =>
+      admin.role === 'super_admin' || !admin.pages || admin.pages.includes(page);
+
+    const refresh = async (key: ReviewBadgeKey) => {
+      if (!canAccess(key.slice(1))) return;
+      const version = (reviewRefreshVersion.current[key] ?? 0) + 1;
+      reviewRefreshVersion.current[key] = version;
+      let count: number;
+      if (key === '/withdraws') {
+        count = (await api.get<WithdrawSummary>('/admin/api/withdraws/summary')).data.reviewing_count;
+      } else if (key === '/price-reports') {
+        count = (await api.get<PriceReportSummary>('/admin/api/price-reports/summary')).data.pending;
+      } else {
+        count = (await api.get<FeedbackSummary>('/admin/api/feedbacks/summary')).data.pending;
+      }
+      if (reviewRefreshVersion.current[key] !== version) return;
+      setPendingReviewCounts((current) => ({ ...current, [key]: count }));
+    };
+
+    const refreshSafely = (key: ReviewBadgeKey) => refresh(key).catch(() => {});
+    void Promise.all([
+      refreshSafely('/withdraws'),
+      refreshSafely('/price-reports'),
+      refreshSafely('/feedbacks'),
+    ]);
+
+    const onReviewCompleted = (event: Event) => {
+      const key = (event as CustomEvent<ReviewBadgeKey>).detail;
+      if (key) void refreshSafely(key);
+    };
+    window.addEventListener(REVIEW_BADGE_REFRESH_EVENT, onReviewCompleted);
+    return () => {
+      window.removeEventListener(REVIEW_BADGE_REFRESH_EVENT, onReviewCompleted);
+    };
+  }, [admin]);
+
   if (!admin) return null; // 守卫期间不闪烁内容
 
   // 选中态:取路径一级(/users/123 -> /users)
@@ -132,6 +181,20 @@ export default function MainLayout({ children }: { children: React.ReactNode })
     hasChildren(group) ? group.children : [group],
   );
 
+  const reviewBadge = (key: string) => {
+    const count = pendingReviewCounts[key as ReviewBadgeKey] ?? 0;
+    if (count <= 0) return null;
+    return (
+      <span
+        className="nav-review-badge"
+        aria-label={`${count} 条未审核`}
+        title={`${count} 条未审核`}
+      >
+        {count}
+      </span>
+    );
+  };
+
   const logout = () => {
     clearAuth();
     router.replace('/login');
@@ -166,6 +229,7 @@ export default function MainLayout({ children }: { children: React.ReactNode })
                     aria-label={item.label}
                   >
                     {item.icon}
+                    {reviewBadge(item.key)}
                   </button>
                 </Tooltip>
               ))
@@ -183,7 +247,8 @@ export default function MainLayout({ children }: { children: React.ReactNode })
                       onClick={() => router.push(group.key)}
                     >
                       <span className="nav-primary-icon">{group.icon}</span>
-                      <span>{group.label}</span>
+                      <span className="nav-item-label">{group.label}</span>
+                      {reviewBadge(group.key)}
                     </button>
                   );
                 }
@@ -202,7 +267,8 @@ export default function MainLayout({ children }: { children: React.ReactNode })
                           onClick={() => router.push(child.key)}
                         >
                           <span className="nav-child-icon">{child.icon}</span>
-                          <span>{child.label}</span>
+                          <span className="nav-item-label">{child.label}</span>
+                          {reviewBadge(child.key)}
                         </button>
                       ))}
                     </div>
@@ -269,6 +335,29 @@ export default function MainLayout({ children }: { children: React.ReactNode })
           color: rgba(255, 255, 255, 0.72);
           font-size: 16px;
         }
+        .nav-item-label {
+          min-width: 0;
+          flex: 1;
+        }
+        .nav-review-badge {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          box-sizing: border-box;
+          flex: 0 0 auto;
+          min-width: 18px;
+          height: 18px;
+          padding: 0 5px;
+          border-radius: 9px;
+          background: #ff4d4f;
+          color: #fff;
+          font-size: 11px;
+          font-weight: 600;
+          line-height: 18px;
+          white-space: nowrap;
+          font-variant-numeric: tabular-nums;
+          box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
+        }
         .nav-direct,
         .nav-child,
         .nav-icon-button {
@@ -332,6 +421,7 @@ export default function MainLayout({ children }: { children: React.ReactNode })
           padding: 0 8px 14px;
         }
         .nav-icon-button {
+          position: relative;
           display: inline-flex;
           align-items: center;
           justify-content: center;
@@ -342,6 +432,11 @@ export default function MainLayout({ children }: { children: React.ReactNode })
           color: rgba(255, 255, 255, 0.72);
           font-size: 17px;
         }
+        .nav-icon-button .nav-review-badge {
+          position: absolute;
+          top: 1px;
+          right: -6px;
+        }
         .nav-icon-button:hover,
         .nav-icon-button.is-selected {
           background: #1677ff;

src/app/(main)/price-reports/page.tsx

@@ -22,6 +22,7 @@ import dayjs from 'dayjs';
 import { api, errMsg } from '@/lib/api';
 import { canDo } from '@/lib/auth';
 import { mediaUrl } from '@/lib/media';
+import { refreshReviewBadge } from '@/lib/reviewBadge';
 import { usePagedList } from '@/lib/usePagedList';
 import type { PriceReport, PriceReportSummary } from '@/lib/types';
 import UserRecordsDrawer from '@/components/UserRecordsDrawer';
@@ -202,6 +203,7 @@ export default function PriceReportsPage() {
       onOk: async () => {
         try {
           await api.post(`/admin/api/price-reports/${r.id}/approve`);
+          refreshReviewBadge('/price-reports');
           message.success('已通过，已发放 1000 金币');
           refreshAfterChange();
         } catch (e) {
@@ -220,6 +222,7 @@ export default function PriceReportsPage() {
     }
     try {
       await api.post(`/admin/api/price-reports/${rejecting.id}/reject`, { reason });
+      refreshReviewBadge('/price-reports');
       message.success('已拒绝');
       setRejecting(null);
       setRejectReason('');

src/app/(main)/withdraws/page.tsx

@@ -39,6 +39,7 @@ import dayjs, { type Dayjs } from 'dayjs';
 import { api, errMsg } from '@/lib/api';
 import { canDo } from '@/lib/auth';
 import { formatUtcTime, utcDayjs, utcFromNow, yuan } from '@/lib/format';
+import { refreshReviewBadge } from '@/lib/reviewBadge';
 import { usePagedList } from '@/lib/usePagedList';
 import type {
   AuditLog,
@@ -332,6 +333,7 @@ export default function WithdrawsPage() {
       onOk: async () => {
         try {
           await api.post(`/admin/api/withdraws/${o.out_bill_no}/approve`);
+          refreshReviewBadge('/withdraws');
           message.success('已通过审核并发起打款');
           await refreshAfterChange(o.out_bill_no);
         } catch (e) {
@@ -362,6 +364,7 @@ export default function WithdrawsPage() {
         await api.post(`/admin/api/withdraws/${targets[0].out_bill_no}/reject`, { reason: trimmed });
         message.success('已拒绝并退回余额');
       }
+      refreshReviewBadge('/withdraws');
       setRejecting(null);
       setBulkRejecting([]);
       setRejectReason('');
@@ -400,6 +403,7 @@ export default function WithdrawsPage() {
           const { data } = await api.post<WithdrawBulkResult>('/admin/api/withdraws/bulk/approve', {
             out_bill_nos: selectedReviewing.map((item) => item.out_bill_no),
           });
+          refreshReviewBadge('/withdraws');
           const text = bulkResultText('批量通过完成', data);
           if (data.failed) message.warning(text);
           else message.success(text);

src/lib/reviewBadge.ts

@@ -0,0 +1,10 @@
+export type ReviewBadgeKey = '/withdraws' | '/price-reports' | '/feedbacks';
+
+export const REVIEW_BADGE_REFRESH_EVENT = 'review-badge-refresh';
+
+export function refreshReviewBadge(key: ReviewBadgeKey) {
+  if (typeof window === 'undefined') return;
+  window.dispatchEvent(
+    new CustomEvent<ReviewBadgeKey>(REVIEW_BADGE_REFRESH_EVENT, { detail: key }),
+  );
+}

src/lib/types.ts

@@ -364,25 +364,6 @@ export interface ComparisonRecordListItem {
   created_at: string;
 }
 
-export interface ComparisonRecordsSummary {
-  started: number;
-  completed: number;
-  success: number;
-  success_rate: number | null;
-  avg_token_cost: number | null;
-  lower_price_rate: number | null;
-  avg_duration_ms: number | null;
-  p5_duration_ms: number | null;
-  p50_duration_ms: number | null;
-  p95_duration_ms: number | null;
-  p99_duration_ms: number | null;
-  cancelled: number;
-  cancelled_rate: number | null;
-  cancelled_p5_ms: number | null;
-  cancelled_p50_ms: number | null;
-  cancelled_p95_ms: number | null;
-}
-
 // 单次 LLM 调用明细(pricebot chat() 收口落盘,server 按 trace 拉来)
 export interface LlmCall {
   ts?: number;