diff --git a/src/shared/ui/DataTable.jsx b/src/shared/ui/DataTable.jsx
index 3936c89..129eda2 100644
--- a/src/shared/ui/DataTable.jsx
+++ b/src/shared/ui/DataTable.jsx
@@ -6,6 +6,7 @@ import Popover from "@mui/material/Popover";
import TextField from "@mui/material/TextField";
import Tooltip from "@mui/material/Tooltip";
import { useEffect, useMemo, useRef, useState } from "react";
+import { useTimeZone } from "@/app/timezone/TimeZoneProvider.jsx";
import { Button } from "@/shared/ui/Button.jsx";
import { IconButton } from "@/shared/ui/IconButton.jsx";
import { PaginationBar } from "@/shared/ui/PaginationBar.jsx";
@@ -31,6 +32,7 @@ export function DataTable({
title,
total
}) {
+ const { timeZone } = useTimeZone();
const [columnWidths, setColumnWidths] = useState({});
const [filterMenu, setFilterMenu] = useState({ anchorEl: null, columnKey: "" });
const [filterQuery, setFilterQuery] = useState("");
@@ -38,6 +40,7 @@ export function DataTable({
const [resizeSession, setResizeSession] = useState(null);
const scrollRef = useRef(null);
const safeItems = Array.isArray(items) ? items : [];
+ const renderContext = useMemo(() => (context ? { ...context, timeZone } : { timeZone }), [context, timeZone]);
const preparedColumns = useMemo(
() =>
@@ -252,7 +255,7 @@ export function DataTable({
{preparedColumns.map((column) => (
- {column.render ? column.render(item, index, context) : displayValue(item[column.key])}
+ {column.render ? column.render(item, index, renderContext) : displayValue(item[column.key])}
))}
diff --git a/src/shared/ui/DataTable.timezone.test.jsx b/src/shared/ui/DataTable.timezone.test.jsx
new file mode 100644
index 0000000..8af4fe2
--- /dev/null
+++ b/src/shared/ui/DataTable.timezone.test.jsx
@@ -0,0 +1,48 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { beforeEach, expect, test } from "vitest";
+import { TimeZoneProvider, useTimeZone } from "@/app/timezone/TimeZoneProvider.jsx";
+import { formatMillis } from "@/shared/utils/time.js";
+import { DataTable } from "./DataTable.jsx";
+
+const epochMillis = Date.UTC(2026, 4, 9, 19, 21, 0);
+
+beforeEach(() => {
+ window.localStorage.clear();
+});
+
+test("rerenders table timestamp cells when display timezone changes", async () => {
+ const user = userEvent.setup();
+
+ render(
+
+
+
+ );
+
+ expect(screen.getByText("2026-05-10 03:21:00")).toBeInTheDocument();
+
+ await user.click(screen.getByRole("button", { name: "UTC" }));
+
+ expect(screen.getByText("2026-05-09 19:21:00")).toBeInTheDocument();
+});
+
+function TimezoneTableFixture() {
+ const { setTimeZone } = useTimeZone();
+ const columns = [
+ {
+ key: "createdAtMs",
+ label: "创建时间",
+ render: (item) => formatMillis(item.createdAtMs)
+ }
+ ];
+
+ return (
+ <>
+
+
item.id} />
+
+ );
+}
diff --git a/src/shared/ui/PageLoadBoundary.jsx b/src/shared/ui/PageLoadBoundary.jsx
new file mode 100644
index 0000000..32f521b
--- /dev/null
+++ b/src/shared/ui/PageLoadBoundary.jsx
@@ -0,0 +1,80 @@
+import { createContext, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useState } from "react";
+import { PageSkeleton } from "./PageSkeleton.jsx";
+
+const PageLoadContext = createContext(null);
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+
+export function PageLoadBoundary({ children, pageKey }) {
+ const [loaders, setLoaders] = useState(() => new Map());
+ const [released, setReleased] = useState(false);
+
+ useEffect(() => {
+ setLoaders(new Map());
+ setReleased(false);
+ }, [pageKey]);
+
+ const reportLoading = useCallback((id, loading) => {
+ setLoaders((current) => {
+ if (loading === null) {
+ if (!current.has(id)) {
+ return current;
+ }
+ const next = new Map(current);
+ next.delete(id);
+ return next;
+ }
+
+ if (current.get(id) === loading) {
+ return current;
+ }
+
+ const next = new Map(current);
+ next.set(id, loading);
+ return next;
+ });
+ }, []);
+
+ const hasPendingLoader = useMemo(() => Array.from(loaders.values()).some(Boolean), [loaders]);
+ const showSkeleton = !released && hasPendingLoader;
+
+ useIsomorphicLayoutEffect(() => {
+ if (!released && loaders.size > 0 && !hasPendingLoader) {
+ setReleased(true);
+ }
+ }, [hasPendingLoader, loaders.size, released]);
+
+ const contextValue = useMemo(() => ({ reportLoading }), [reportLoading]);
+
+ return (
+
+
+ {showSkeleton ?
: null}
+
+ {children}
+
+