perf: 页面切换零延迟渲染、消除动态 chunk 加载白屏与二次 loading 闪烁、重构微滑淡入过渡

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tallynote",
-  "version": "1.1.36",
+  "version": "1.1.38",
   "private": true,
   "type": "module",
   "packageManager": "pnpm@9.0.6",

web-next/src/main.tsx

@@ -11,12 +11,12 @@ import { setAppTimezone } from "./utils/date";
 import { AppLayout } from "./layouts";
 import { DEFAULT_ROUTE_ID, isRouteId, routeIdFromPath, routePath, routeTitle, type RouteId } from "./router";
 import { LoginPage, ChangePasswordPage } from "./pages/auth";
-const ExpensesPage = lazy(() => import("./pages/expenses"));
-const DashboardPage = lazy(() => import("./pages/dashboard"));
-const TrashPage = lazy(() => import("./pages/trash").then(module => ({ default: module.TrashPage })));
-const AdminsPage = lazy(() => import("./pages/admins").then(module => ({ default: module.AdminsPage })));
-const AuditPage = lazy(() => import("./pages/audit").then(module => ({ default: module.AuditPage })));
-const UpdatePage = lazy(() => import("./pages/update").then(module => ({ default: module.UpdatePage })));
+import ExpensesPage from "./pages/expenses";
+import DashboardPage from "./pages/dashboard";
+import { TrashPage } from "./pages/trash";
+import { AdminsPage } from "./pages/admins";
+import { AuditPage } from "./pages/audit";
+import { UpdatePage } from "./pages/update";
 import { UnsavedChangesProvider, useUnsavedActions } from "./contexts/UnsavedChanges";
 import { useDialogAccessibility } from "./hooks/useDialogAccessibility";
 import "./styles/theme.css";

web-next/src/pages/dashboard/DashboardPage.tsx

@@ -18,6 +18,8 @@ echarts.use([LineChart, GridComponent, LegendComponent, TooltipComponent, Canvas
 type Props = { timezone?: string; onNavigate?: (id: RouteId, search?: string) => void };
 type ExpenseResult = { items: Expense[]; summary: { count: number; amountCents: number } };
 
+let dashboardCache: { month: string; unreimbursed: ExpenseResult; reimbursed: ExpenseResult } | null = null;
+
 function prefersReducedMotion(): boolean {
   return typeof window !== "undefined" && typeof window.matchMedia === "function"
     ? window.matchMedia("(prefers-reduced-motion: reduce)").matches
@@ -29,11 +31,12 @@ export default function DashboardPage({ timezone = "Asia/Shanghai", onNavigate }
   const rawMonthParam = searchParams.get("month");
   const defaultMonth = monthNow(timezone);
   const month = rawMonthParam && /^\d{4}-(0[1-9]|1[0-2])$/.test(rawMonthParam) ? rawMonthParam : defaultMonth;
-  const [unreimbursed, setUnreimbursed] = useState<ExpenseResult>({ items: [], summary: { count: 0, amountCents: 0 } });
-  const [reimbursed, setReimbursed] = useState<ExpenseResult>({ items: [], summary: { count: 0, amountCents: 0 } });
-  const [loading, setLoading] = useState(true);
+  const isCached = dashboardCache?.month === month;
+  const [unreimbursed, setUnreimbursed] = useState<ExpenseResult>(() => (isCached ? dashboardCache!.unreimbursed : { items: [], summary: { count: 0, amountCents: 0 } }));
+  const [reimbursed, setReimbursed] = useState<ExpenseResult>(() => (isCached ? dashboardCache!.reimbursed : { items: [], summary: { count: 0, amountCents: 0 } }));
+  const [loading, setLoading] = useState(() => !isCached);
   const [error, setError] = useState("");
-  const [loadedMonth, setLoadedMonth] = useState<string | null>(null);
+  const [loadedMonth, setLoadedMonth] = useState<string | null>(() => (isCached ? month : null));
   const requestSequence = useRef(0);
   const [reducedMotion, setReducedMotion] = useState(prefersReducedMotion);
 
@@ -75,6 +78,7 @@ export default function DashboardPage({ timezone = "Asia/Shanghai", onNavigate }
       setUnreimbursed(pending);
       setReimbursed(done);
       setLoadedMonth(month);
+      dashboardCache = { month, unreimbursed: pending, reimbursed: done };
     } catch (caught) {
       if (sequence === requestSequence.current) setError((caught as Error).message);
     } finally {
@@ -141,7 +145,7 @@ export default function DashboardPage({ timezone = "Asia/Shanghai", onNavigate }
       <div className="tn-page-actions"><div className="tn-dashboard-actions"><div className="tn-dashboard-month-control"><Tooltip content="上个月"><Button variant="outline" shape="square" onClick={() => shiftMonth(-1)} aria-label="上个月" icon={<ChevronLeft size={16} />} /></Tooltip><DatePicker className="tn-dashboard-month" mode="month" format="YYYY-MM" value={month} onChange={(value: any) => { const next = String(value || "").slice(0, 7); if (/^\d{4}-\d{2}$/.test(next)) setDashboardMonth(next); }} inputProps={{ "aria-label": "仪表盘月份" } as any} /><Tooltip content="下个月"><Button variant="outline" shape="square" onClick={() => shiftMonth(1)} aria-label="下个月" icon={<ChevronRight size={16} />} /></Tooltip></div><div className="tn-dashboard-secondary-actions"><Button className="tn-dashboard-refresh" variant="outline" onClick={() => void load()} disabled={loading} icon={<RefreshCw size={15} />}>刷新</Button><Button className="tn-dashboard-view" theme="primary" onClick={() => onNavigate?.("expenses", expensesSearch)}>查看账目</Button></div></div></div>
     </div>
     {error && hasCurrentSnapshot && <Alert theme="error" icon={<AlertCircle size={16} />} message={`刷新失败：${error}。当前展示的是本月最近一次成功加载的数据。`} />}
-    {loading ? <div className="tn-empty" role="status" aria-live="polite"><BeamLoading text="正在汇总本月数据…" /></div> : !hasCurrentSnapshot ? <div className="tn-empty" role="alert"><Alert theme="error" icon={<AlertCircle size={16} />} message={error || "暂时无法读取仪表盘数据"} /><Button variant="outline" onClick={() => void load()} icon={<RefreshCw size={15} />}>重新加载</Button></div> : <>
+    {loading && !hasCurrentSnapshot ? <div className="tn-empty" role="status" aria-live="polite"><BeamLoading text="正在汇总本月数据…" /></div> : !hasCurrentSnapshot ? <div className="tn-empty" role="alert"><Alert theme="error" icon={<AlertCircle size={16} />} message={error || "暂时无法读取仪表盘数据"} /><Button variant="outline" onClick={() => void load()} icon={<RefreshCw size={15} />}>重新加载</Button></div> : <>
       <div className="tn-dashboard-stats">
         <Card bordered className="tn-dashboard-stat tn-dashboard-stat-total"><Statistic title="本月总额" value={totalCents / 100} prefix="¥" decimalPlaces={2} /></Card>
         <Card bordered className="tn-dashboard-stat tn-dashboard-stat-count"><Statistic title="账目笔数" value={totalCount} suffix="笔" /></Card>

web-next/src/pages/expenses/ExpensesPage.tsx

@@ -10,6 +10,8 @@ import AccessibleInput from "../../components/AccessibleInput";
 import { dateText, money, monthNow } from "./date";
 import type { Expense, Notify } from "./types";
 
+let expensesCache: { key: string; items: Expense[]; summary: { count: number; amountCents: number } } | null = null;
+
 type Props = { timezone?: string; notify?: Notify; sessionKey?: string };
 const EXPORT_JOB_STORAGE_KEY = "tallynote.exportJobId";
 
@@ -30,9 +32,14 @@ export default function ExpensesPage({ timezone: timezoneProp = "Asia/Shanghai",
   const query = rawQuery.slice(0, 200);
   const rawMissingInvoice = searchParams.get("missingInvoice");
   const missingInvoice = searchParams.get("missingInvoice") === "true";
-  const [queryDraft, setQueryDraft] = useState(query);
-  const [items, setItems] = useState<Expense[]>([]); const [summary, setSummary] = useState({ count: 0, amountCents: 0 }); const [loading, setLoading] = useState(false); const [error, setError] = useState(""); const [loadedFilterKey, setLoadedFilterKey] = useState<string | null>(null); const [selectedKeys, setSelectedKeys] = useState<string[]>([]); const [drawer, setDrawer] = useState<"new" | "detail" | "edit" | null>(null); const [selected, setSelected] = useState<Expense | null>(null); const [includeManifest, setIncludeManifest] = useState(false); const [exporting, setExporting] = useState<string | null>(() => savedExportJob(exportStorageKey)); const [exportIssue, setExportIssue] = useState(""); const [trashTarget, setTrashTarget] = useState<Expense | null>(null); const [trashing, setTrashing] = useState(false); const sequence = useRef(0); const exportStarting = useRef(false);
   const filterKey = `${month}|${status}|${query}|${missingInvoice ? "1" : "0"}`;
+  const isCached = expensesCache?.key === filterKey;
+  const [queryDraft, setQueryDraft] = useState(query);
+  const [items, setItems] = useState<Expense[]>(() => (isCached ? expensesCache!.items : []));
+  const [summary, setSummary] = useState(() => (isCached ? expensesCache!.summary : { count: 0, amountCents: 0 }));
+  const [loading, setLoading] = useState(() => !isCached);
+  const [error, setError] = useState("");
+  const [loadedFilterKey, setLoadedFilterKey] = useState<string | null>(() => (isCached ? filterKey : null)); const [selectedKeys, setSelectedKeys] = useState<string[]>([]); const [drawer, setDrawer] = useState<"new" | "detail" | "edit" | null>(null); const [selected, setSelected] = useState<Expense | null>(null); const [includeManifest, setIncludeManifest] = useState(false); const [exporting, setExporting] = useState<string | null>(() => savedExportJob(exportStorageKey)); const [exportIssue, setExportIssue] = useState(""); const [trashTarget, setTrashTarget] = useState<Expense | null>(null); const [trashing, setTrashing] = useState(false); const sequence = useRef(0); const exportStarting = useRef(false);
   useEffect(() => {
     const params = new URLSearchParams(searchParams);
     let changed = false;
@@ -55,8 +62,8 @@ export default function ExpensesPage({ timezone: timezoneProp = "Asia/Shanghai",
     if (next.missingInvoice ?? missingInvoice) params.set("missingInvoice", "true"); else params.delete("missingInvoice");
     setSearchParams(params);
   };
-  const load = async () => { const s = ++sequence.current; const requestedKey = filterKey; setLoading(true); setError(""); try { const result = await api<{ items: Expense[]; summary: typeof summary }>(`/api/expenses?month=${month}&status=${status}&query=${encodeURIComponent(query)}&missingInvoice=${missingInvoice}`); if (s === sequence.current) { setItems(result.items); setSummary(result.summary); setLoadedFilterKey(requestedKey); setSelectedKeys(keys => keys.filter(k => result.items.some(x => x.id === k))); } } catch (e) { if (s === sequence.current) { setItems([]); setSummary({ count: 0, amountCents: 0 }); setLoadedFilterKey(null); setError((e as Error).message); } } finally { if (s === sequence.current) setLoading(false); } };
-  useEffect(() => { setSelectedKeys([]); setItems([]); setSummary({ count: 0, amountCents: 0 }); setLoadedFilterKey(null); void load(); }, [filterKey]);
+  const load = async () => { const s = ++sequence.current; const requestedKey = filterKey; setLoading(true); setError(""); try { const result = await api<{ items: Expense[]; summary: typeof summary }>(`/api/expenses?month=${month}&status=${status}&query=${encodeURIComponent(query)}&missingInvoice=${missingInvoice}`); if (s === sequence.current) { setItems(result.items); setSummary(result.summary); setLoadedFilterKey(requestedKey); setSelectedKeys(keys => keys.filter(k => result.items.some(x => x.id === k))); expensesCache = { key: requestedKey, items: result.items, summary: result.summary }; } } catch (e) { if (s === sequence.current) { setItems([]); setSummary({ count: 0, amountCents: 0 }); setLoadedFilterKey(null); setError((e as Error).message); } } finally { if (s === sequence.current) setLoading(false); } };
+  useEffect(() => { setSelectedKeys([]); if (expensesCache?.key !== filterKey) { setItems([]); setSummary({ count: 0, amountCents: 0 }); setLoadedFilterKey(null); } void load(); }, [filterKey]);
   const selectedTotal = useMemo(() => items.filter(i => selectedKeys.includes(i.id)).reduce((sum, i) => sum + i.amountCents, 0), [items, selectedKeys]);
   const shiftMonth = (delta: number) => { const [rawYear, rawMonthNumber] = month.split("-").map(Number); const y = rawYear || new Date().getFullYear(); const m = rawMonthNumber || 1; const d = new Date(y, m - 1 + delta, 1); updateFilters({ month: `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}` }); };
   const rememberExportJob = (jobId: string | null) => {
@@ -125,7 +132,7 @@ export default function ExpensesPage({ timezone: timezoneProp = "Asia/Shanghai",
     <div className="tn-summary expenses-summary"><span>{summary.count} 笔</span><strong>{money(summary.amountCents)}</strong>{selectedKeys.length > 0 && <><span>已选 {selectedKeys.length} 笔，共 {money(selectedTotal)}</span><Button variant="text" onClick={() => setSelectedKeys([])}>清除选择</Button></>}</div>
     {exportIssue && <div className="tn-export-status" role="status"><RefreshCw size={15} className="spin" /><span>{exportIssue}</span><Button variant="text" onClick={() => { setExportIssue(""); rememberExportJob(null); }}>关闭提示</Button></div>}
     {error && <div className="expense-error" role="alert"><AlertCircle size={16} />{error}<Button variant="text" onClick={() => void load()}>重试</Button></div>}
-    {error ? null : !dataReady || (loading && !items.length) ? <div className="tn-empty" role="status" aria-live="polite"><BeamLoading text="正在加载账目列表…" /></div> : !items.length ? emptyState : <div className="tn-table-wrap" role="region" aria-label="账目列表，可横向滚动查看更多列"><Table rowKey="id" data={items} columns={columns as any} selectedRowKeys={selectedKeys} onSelectChange={(keys: any[]) => setSelectedKeys(keys as string[])} hover stripe /></div>}
+    {error ? null : (!items.length && (loading || !dataReady)) ? <div className="tn-empty" role="status" aria-live="polite"><BeamLoading text="正在加载账目列表…" /></div> : !items.length ? emptyState : <div className="tn-table-wrap" role="region" aria-label="账目列表，可横向滚动查看更多列"><Table rowKey="id" data={items} columns={columns as any} selectedRowKeys={selectedKeys} onSelectChange={(keys: any[]) => setSelectedKeys(keys as string[])} hover stripe /></div>}
     {drawer === "new" && <ExpenseDrawer timezone={timezone} onClose={() => setDrawer(null)} onSaved={load} notify={notify} />}{drawer === "edit" && selected && <ExpenseDrawer timezone={timezone} expense={selected} onClose={() => setDrawer(null)} onSaved={load} notify={notify} />}{drawer === "detail" && selected && <ExpenseDetail timezone={timezone} expense={selected} onClose={() => setDrawer(null)} onUpdated={load} onRequestEdit={e => { setSelected(e); setDrawer("edit"); }} notify={notify} />}
     {trashTarget && <Dialog width="540px" visible header="移入回收站？" confirmBtn={{ content: "移入回收站", theme: "danger", loading: trashing, disabled: trashing }} cancelBtn="取消" onClose={() => { if (!trashing) setTrashTarget(null); }} onConfirm={() => void moveToTrash()} onCancel={() => { if (!trashing) setTrashTarget(null); }}>确认将“{trashTarget.note || `${dateText(trashTarget.paidAt, timezone)}的账目`}”移入回收站？移入后将不在正常列表中展示，关联附件将完整保留，可随时恢复。</Dialog>}
   </div>;

web-next/src/pages/update/UpdatePage.tsx

@@ -1,3 +1,6 @@
+// In-memory cache across page transitions for zero-latency instant rendering
+let updateInfoCache: any = null;
+
 import { BeamLoading, BeamBar } from "../../components/BeamLoading";
 import { useState, useEffect, useRef, useMemo, type ReactNode } from "react";
 import {
@@ -302,7 +305,9 @@ export default function UpdatePage({
     setLoading(true);
     setError("");
     try {
-      setLiveInfo(await api<UpdateInfo>("/api/update/status"));
+      const res = await api<UpdateInfo>("/api/update/status");
+      setLiveInfo(res);
+      updateInfoCache = res;
     } catch (e) {
       setError((e as Error).message);
     } finally {

web-next/src/styles/theme.css

@@ -501,7 +501,7 @@ input:focus-visible, textarea:focus-visible, select:focus-visible {
 .tn-dashboard-month-control .tn-dashboard-month { width: 148px; flex: 0 1 148px; }
 .tn-dashboard-secondary-actions .tn-dashboard-refresh, .tn-dashboard-secondary-actions .tn-dashboard-view { flex: 0 0 auto; }
 .tn-layout { animation: tn-app-enter .24s ease-out both; }
-.tn-page-transition { animation: tn-page-in .18s ease-out both; }
+.tn-page-transition { animation: tn-page-in .14s cubic-bezier(0.16, 1, 0.3, 1) both; will-change: opacity, transform; }
 .tn-page-actions .t-button { min-height: 36px; }
 .expenses-toolbar { display: flex; align-items: center; gap: 8px; }
 .expenses-toolbar .t-button--shape-square { width: 36px; height: 36px; min-width: 36px; min-height: 36px; }
@@ -568,7 +568,7 @@ input:focus-visible, textarea:focus-visible, select:focus-visible {
 .tn-spin, .spin { animation: tn-spin .9s linear infinite; }
 @keyframes tn-spin { to { transform: rotate(360deg); } }
 
-@keyframes tn-page-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
+@keyframes tn-page-in { from { opacity: 0.88; transform: translateY(2px); } to { opacity: 1; transform: translateY(0); } }
 @keyframes tn-app-enter { from { opacity: 0; } to { opacity: 1; } }
 @keyframes tn-auth-page-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
 .t-dialog {
@@ -766,6 +766,8 @@ input:focus-visible, textarea:focus-visible, select:focus-visible {
 }
 @media (prefers-reduced-motion: reduce) {
   *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
+  /* Active loading indicators must retain continuous movement so users know tasks are progressing */
+  .tn-beam-bar::after, .tn-spin { animation-duration: 2s !important; animation-iteration-count: infinite !important; }
 }
 
 /* ==========================================================================
@@ -1647,7 +1649,7 @@ input:focus-visible, textarea:focus-visible, select:focus-visible {
   flex-direction: column !important;
   align-items: center !important;
   justify-content: center !important;
-  gap: 16px !important;
+  gap: 14px !important;
   padding: 40px 20px !important;
   width: 100% !important;
   height: 100% !important;
@@ -1657,49 +1659,51 @@ input:focus-visible, textarea:focus-visible, select:focus-visible {
 }
 .tn-beam-bar {
   width: 140px;
-  height: 4px;
-  background: #e2e8f0;
-  border-radius: 4px;
+  height: 5px;
+  background: var(--td-brand-color-1, #e8f0ff);
+  border-radius: 9999px;
   overflow: hidden;
   position: relative;
+  display: block;
+  margin: 0 auto;
+  box-shadow: inset 0 1px 2px rgba(23, 92, 211, 0.08);
 }
 .tn-beam-bar::after {
   content: "";
   position: absolute;
   top: 0;
-  left: -60px;
-  width: 60px;
+  left: 0;
+  width: 50%;
   height: 100%;
-  background: linear-gradient(90deg, transparent, var(--tn-blue-600), transparent);
-  border-radius: 4px;
-  animation: tn-beam-flow 1.3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+  background: linear-gradient(90deg, rgba(23, 92, 211, 0) 0%, rgba(61, 123, 229, 0.95) 45%, var(--td-brand-color, #175cd3) 70%, rgba(23, 92, 211, 0) 100%);
+  box-shadow: 0 0 10px rgba(23, 92, 211, 0.55), 0 0 4px rgba(61, 123, 229, 0.9);
+  border-radius: 9999px;
+  animation: tn-beam-flow 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+  will-change: transform;
 }
 
 .tn-beam-bar-sm {
   width: 60px !important;
-  height: 3px !important;
-  display: inline-block;
+  height: 3.5px !important;
+  display: inline-block !important;
   vertical-align: middle;
+  margin: 0 6px !important;
 }
 .tn-beam-bar-sm::after {
-  width: 30px;
-  animation: tn-beam-flow-sm 1.1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+  width: 50%;
+  animation: tn-beam-flow 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
 }
 
 @keyframes tn-beam-flow {
-  0% { left: -60px; }
-  100% { left: 140px; }
-}
-
-@keyframes tn-beam-flow-sm {
-  0% { left: -30px; }
-  100% { left: 60px; }
+  0% { transform: translateX(-150%); }
+  100% { transform: translateX(280%); }
 }
 
 .tn-beam-text {
   font-size: 13.5px;
-  color: var(--tn-text-secondary);
-  letter-spacing: 0.4px;
+  color: var(--tn-navy-700, #344054);
+  font-weight: 500;
+  letter-spacing: 0.3px;
 }
 
 /* 彻底隐去 TDesign 默认圆环旋转圈圈，统一切换为沉稳光流 */