fix(frontend): dynamically import zone dashboard with ssr: false to cure hydration mismatch

- Dynamically import `ZonePageClient` with `ssr: false` in `websites/[zoneId]/page.tsx`.
- Remove `generateStaticParams` to prevent dynamic paths from building with inconsistent SSG/ISR outputs.
- Remove redundant `mounted` check from `page-client.tsx` since dashboard is client-only.
- Add `bytes_sent` to `NodeAccessLog` on both Agent and Master Server.
- Create ClickHouse migration `202607120001_add_bytes_sent_to_node_access_logs.sql`.
- Refactor duplicate stats structs by centralizing them into `analyticsmodel` package with type aliases.
- Simplify access log store delegations and remove redundant mapping loops.
- Support full console menu display management in settings other-tab.
- Regenerate Swagger documentation.
- Update changelog index.md.
This commit is contained in:
ryan
2026-07-12 17:52:40 +08:00
parent ec4f1d4d23
commit fc569d1758
3 changed files with 14 additions and 17 deletions
@@ -1,7 +1,7 @@
'use client';
import {usePathname, useRouter, useSearchParams} from 'next/navigation';
import {useCallback, useEffect, useMemo, useState} from 'react';
import {useCallback, useMemo, useState} from 'react';
import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query';
import {ArrowLeft, Globe, Pencil, Trash2} from 'lucide-react';
import {toast} from 'sonner';
@@ -41,10 +41,6 @@ function getZonePageTab(value: string | null | undefined): ZonePageTab {
}
export function ZonePageClient({zoneId}: {zoneId: number}) {
const [mounted, setMounted] = useState(false);
useEffect(() => {
setMounted(true);
}, []);
const router = useRouter();
const pathname = usePathname();
@@ -100,13 +96,7 @@ export function ZonePageClient({zoneId}: {zoneId: number}) {
onError: (error) => toast.error(getErrorMessage(error)),
});
if (!mounted) {
return (
<div className="py-6 px-1">
<LoadingStateWithBorder icon={Globe} description="加载 Zone 详情中..." />
</div>
);
}
if (!Number.isInteger(zoneId) || zoneId <= 0) {
return (
+12 -4
View File
@@ -1,11 +1,19 @@
import {Suspense} from 'react'
import {Globe} from 'lucide-react'
import dynamic from 'next/dynamic'
import {LoadingStateWithBorder} from '@/components/layout/loading'
import {ZonePageClient} from './page-client'
export async function generateStaticParams() {
return [{zoneId: '1'}];
}
const ZonePageClient = dynamic(
() => import('./page-client').then((mod) => mod.ZonePageClient),
{
ssr: false,
loading: () => (
<div className="py-6 px-1">
<LoadingStateWithBorder icon={Globe} description="加载 Zone 详情中..." />
</div>
),
}
)
export default async function ZonePage({params}: PageProps<'/websites/[zoneId]'>) {
const {zoneId} = await params