数据页显示最近刷新时间；修复 PWA 离线壳缓存清单 (v2.0.2)

- 新增 LastRefreshed 组件：总览/中转站/我的站点/用量统计/经营分析
  五个轮询页在 PageContainer extra 显示「最近刷新 HH:mm:ss」，
  仅在数据拉取成功时更新（失败/缓存命中语义各页按实际处理）
- sw.js 壳清单去掉 v1 遗留的 /app.js、/styles.css（已不存在，
  addAll 会静默失败导致离线壳缓存失效）；缓存名升级 shell-v2

Author: lettimepassby

app/(dashboard)/analytics/page.tsx

@@ -9,6 +9,7 @@ import { Col, Empty, Row, Segmented, Statistic, Typography, theme } from "antd";
 import { Bar, Column, DualAxes, Heatmap, Line, Pie } from "@ant-design/plots";
 import { api, cny } from "../../../lib/client";
 import ChartBox from "../chart-box";
+import LastRefreshed from "../last-refreshed";
 import { useThemeMode } from "../../providers";
 
 const { Text } = Typography;
@@ -50,11 +51,13 @@ export default function AnalyticsPage() {
   const [data, setData] = useState<any>(null);
   const [own, setOwn] = useState<any>(null); // /api/own/analytics 响应（无自有站/拉取失败为 null）
   const [loading, setLoading] = useState(true);
+  const [refreshedAt, setRefreshedAt] = useState<number | null>(null);
 
   const load = useCallback(async (d: number) => {
     try {
       const resp = await api(`/api/analytics?days=${d}`);
       setData(resp);
+      setRefreshedAt(Date.now());
     } catch {
       /* 顶层错误交给下次轮询重试，页面保留旧数据 */
     }
@@ -193,17 +196,19 @@ export default function AnalyticsPage() {
     <PageContainer
       title="经营分析"
       subTitle="上游成本 · 下游收入 · 余额跑道"
-      extra={
+      extra={[
+        <LastRefreshed key="last-refreshed" at={refreshedAt} />,
         <Segmented
+          key="days"
           value={days}
           onChange={(v) => setDays(Number(v))}
           options={[
             { label: "7 天", value: 7 },
             { label: "14 天", value: 14 },
             { label: "30 天", value: 30 },
           ]}
-        />
-      }
+        />,
+      ]}
     >
       {/* KPI 行：总成本 / 日均 / 峰值日 / 预计月化 */}
       <Row gutter={[16, 16]}>

app/(dashboard)/last-refreshed.tsx

@@ -0,0 +1,25 @@
+"use client";
+// 页面级「最近刷新时间」：数据页每次轮询成功后更新。
+// 显示的是本页最近一次成功拉取数据的时刻；上游余额的实际查询节奏
+// 由服务端按「设置 → 自动刷新间隔」执行，两者不是一回事。
+import { Typography, theme } from "antd";
+import { SyncOutlined } from "@ant-design/icons";
+
+const { Text } = Typography;
+
+function fmt(ts: number) {
+  const d = new Date(ts);
+  const p = (n: number) => String(n).padStart(2, "0");
+  return `${p(d.getHours())}:${p(d.getMinutes())}:${p(d.getSeconds())}`;
+}
+
+export default function LastRefreshed({ at }: { at: number | null }) {
+  const { token } = theme.useToken();
+  if (!at) return null;
+  return (
+    <Text type="secondary" style={{ fontSize: token.fontSizeSM, whiteSpace: "nowrap" }}>
+      <SyncOutlined style={{ marginRight: 4 }} />
+      最近刷新 {fmt(at)}
+    </Text>
+  );
+}

app/(dashboard)/my/page.tsx

@@ -23,6 +23,7 @@ import {
 import { PlusOutlined, ReloadOutlined } from "@ant-design/icons";
 import { Bar, Column, Line } from "@ant-design/plots";
 import ChartBox from "../chart-box";
+import LastRefreshed from "../last-refreshed";
 import { api, cny, cny4, fmtTokens, rateOf } from "../../../lib/client";
 import { useThemeMode } from "../../providers";
 
@@ -149,6 +150,7 @@ export default function MyStationPage() {
   const [data, setData] = useState<any>(null);
   const [error, setError] = useState<string | null>(null);
   const [refreshing, setRefreshing] = useState(false);
+  const [refreshedAt, setRefreshedAt] = useState<number | null>(null);
 
   // 转售 Key 管理器状态
   const [mgrOpen, setMgrOpen] = useState(false);
@@ -168,6 +170,7 @@ export default function MyStationPage() {
     if (!force && cached && Date.now() - cached.at < 60000) {
       setData(cached.data);
       setError(null);
+      setRefreshedAt(cached.at);
       return;
     }
     try {
@@ -178,6 +181,7 @@ export default function MyStationPage() {
       if (rangeRef.current !== r) return;
       setData(res);
       setError(null);
+      setRefreshedAt(Date.now());
     } catch (e: any) {
       if (rangeRef.current !== r) return;
       setError(e.message || String(e));
@@ -273,6 +277,7 @@ export default function MyStationPage() {
 
   // ---- 页面头部：范围切换 + 手动刷新（v1 #ownRange / #ownRefresh）----
   const headerExtra = [
+    <LastRefreshed key="refreshed" at={refreshedAt} />,
     <Segmented key="range" options={OWN_RANGES} value={range} onChange={(v) => setRange(String(v))} />,
     <Button key="refresh" icon={<ReloadOutlined />} loading={refreshing} onClick={onRefresh}>
       刷新

app/(dashboard)/page.tsx

@@ -3,6 +3,7 @@
 // 功能与口径逐条对照 v1 app.js：renderDashboard / drawTotalChart / drawBurnBars / stationRow
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { PageContainer, ProCard } from "@ant-design/pro-components";
+import LastRefreshed from "./last-refreshed";
 import { App, Button, Col, Empty, Row, Segmented, Tag, Tooltip, Typography, theme } from "antd";
 import { ReloadOutlined } from "@ant-design/icons";
 import { Line, Bar } from "@ant-design/plots";
@@ -149,6 +150,7 @@ export default function OverviewPage() {
   const [overview, setOverview] = useState<{ hours: number; series: any[] } | null>(null);
   const [overviewErr, setOverviewErr] = useState<string | null>(null);
   const [refreshingId, setRefreshingId] = useState<string | null>(null);
+  const [refreshedAt, setRefreshedAt] = useState<number | null>(null);
   const hoursRef = useRef(trendHours);
   hoursRef.current = trendHours;
 
@@ -161,6 +163,7 @@ export default function OverviewPage() {
       setStations(r.stations);
       setSettings(r.settings);
       setLoaded(true);
+      setRefreshedAt(Date.now());
     } catch {
       /* 401 已由 api() 跳登录，其余错误静默等下轮 */
     }
@@ -528,7 +531,7 @@ export default function OverviewPage() {
   }
 
   return (
-    <PageContainer title="总览">
+    <PageContainer title="总览" extra={<LastRefreshed at={refreshedAt} />}>
       {/* 5 张 KPI（renderDashboard stats 区，口径逐项一致） */}
       <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(190px, 1fr))", gap: 16 }}>
         <StatCard

app/(dashboard)/stations/page.tsx

@@ -32,6 +32,7 @@ import {
 } from "@ant-design/icons";
 import { Line } from "@ant-design/plots";
 import ChartBox from "../chart-box";
+import LastRefreshed from "../last-refreshed";
 import dayjs from "dayjs";
 import { api, cny, usd, rateOf, fmtTokens, fmtEta, statusOf } from "../../../lib/client";
 import { useThemeMode } from "../../providers";
@@ -388,6 +389,7 @@ export default function StationsPage() {
   const [loaded, setLoaded] = useState(false);
   const [refreshingAll, setRefreshingAll] = useState(false);
   const [refreshingIds, setRefreshingIds] = useState<Record<string, boolean>>({});
+  const [refreshedAt, setRefreshedAt] = useState<number | null>(null);
 
   // 添加/编辑弹窗
   const [modalOpen, setModalOpen] = useState(false);
@@ -410,6 +412,7 @@ export default function StationsPage() {
     setStations(r.stations);
     setSettings(r.settings);
     setLoaded(true);
+    setRefreshedAt(Date.now());
   }, []);
 
   useEffect(() => {
@@ -594,6 +597,7 @@ export default function StationsPage() {
       title="中转站"
       subTitle="管理你的 sub2api / new-api 中转站"
       extra={[
+        <LastRefreshed key="last-refreshed" at={refreshedAt} />,
         <Button key="refresh" icon={<ReloadOutlined />} loading={refreshingAll} onClick={onRefreshAll}>刷新</Button>,
         <Button key="add" type="primary" icon={<PlusOutlined />} onClick={() => openModal(null)}>添加中转站</Button>,
       ]}

app/(dashboard)/usage/page.tsx

@@ -9,6 +9,7 @@ import { ReloadOutlined } from "@ant-design/icons";
 import { Bar, Column } from "@ant-design/plots";
 import { api, cny4, fmtTokens, rateOf } from "../../../lib/client";
 import ChartBox from "../chart-box";
+import LastRefreshed from "../last-refreshed";
 import { useThemeMode } from "../../providers";
 
 // 时间档位（照抄 v1 USAGE_RANGES）
@@ -69,6 +70,7 @@ export default function UsagePage() {
   const [data, setData] = useState<any>(null); // /api/usage 响应
   const [err, setErr] = useState<string>("");
   const [refreshing, setRefreshing] = useState(false);
+  const [refreshedAt, setRefreshedAt] = useState<number | null>(null);
   // 与 v1 loadUsage 相同的 30 秒前端缓存（单槽，按 range 记）
   const cacheRef = useRef<{ range: string; at: number; data: any } | null>(null);
   const rangeRef = useRef(range);
@@ -93,6 +95,7 @@ export default function UsagePage() {
       const tz = Intl.DateTimeFormat().resolvedOptions().timeZone;
       const resp = await api(`/api/usage?range=${r}&tz=${encodeURIComponent(tz)}`);
       cacheRef.current = { range: r, at: Date.now(), data: resp };
+      setRefreshedAt(Date.now());
       if (rangeRef.current === r) {
         setData(resp);
         setErr("");
@@ -253,6 +256,7 @@ export default function UsagePage() {
       title="用量统计"
       subTitle="分站点、分模型、分时段的 Token 消耗"
       extra={[
+        <LastRefreshed key="last-refreshed" at={refreshedAt} />,
         <Button key="refresh" icon={<ReloadOutlined />} loading={refreshing} onClick={onRefresh}>
           刷新
         </Button>,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "relay-monitor",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "private": true,
   "type": "module",
   "description": "中转站余额监控面板 v2：Next.js 全栈 + Ant Design Pro (antd 6) + MySQL",

public/sw.js

@@ -1,7 +1,9 @@
 // PWA Service Worker：静态资源网络优先（面板由 Watchtower 自动更新，
 // 不能让旧版本粘在缓存里），断网时回退缓存壳；API 请求不拦截（数据必须新鲜）。
-const CACHE = "relay-monitor-shell-v1";
-const SHELL = ["/", "/styles.css", "/app.js", "/manifest.webmanifest", "/icons/icon-192.png"];
+const CACHE = "relay-monitor-shell-v2";
+// v2（Next.js）：JS/CSS 均为带哈希的 /_next/static 资源，运行时按 fetch 缓存即可，
+// 壳清单只预缓存入口与图标（v1 的 /app.js /styles.css 已不存在）
+const SHELL = ["/", "/manifest.webmanifest", "/icons/icon-192.png"];
 
 self.addEventListener("install", (e) => {
   e.waitUntil(caches.open(CACHE).then((c) => c.addAll(SHELL)).catch(() => {}));