fix(cloudflare): restore group detail pages for ids other than 1

Static export only generates /cloudflare/groups/1.html. Unknown ids fell
through to the dashboard index, bouncing the browser home and triggering
React hydration error #418. Serve the generated group shell and resolve
the real id from the pathname, matching the websites detail fallback.

frontend/app/(main)/cloudflare/groups/[id]/page-client.tsx

@@ -12,8 +12,8 @@ import {
 } from 'lucide-react';
 import Link from 'next/link';
 import { useTranslations } from 'next-intl';
-import { useParams } from 'next/navigation';
-import { useState } from 'react';
+import { usePathname } from 'next/navigation';
+import { useEffect, useMemo, useState } from 'react';
 import { toast } from 'sonner';
 
 import { Badge } from '@/components/ui/badge';
@@ -46,10 +46,20 @@ import { getErrorMessage } from '../../../websites/components/website-utils';
 import { GroupDialog } from '../../components/group-dialog';
 import { MemberAddDialog } from '../../components/member-add-dialog';
 
+function getGroupIdFromPathname(pathname: string | null): number {
+  const match = pathname?.match(/^\/cloudflare\/groups\/([^/]+)$/);
+  return Number(match?.[1]);
+}
+
 export function CloudflareGroupDetailPageClient() {
   const t = useTranslations('cloudflare');
-  const params = useParams<{ id: string }>();
-  const groupID = Number(params.id);
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  const pathname = usePathname();
+  const groupID = useMemo(() => getGroupIdFromPathname(pathname), [pathname]);
   const queryClient = useQueryClient();
   const [editOpen, setEditOpen] = useState(false);
   const [addOpen, setAddOpen] = useState(false);
@@ -147,7 +157,7 @@ export function CloudflareGroupDetailPageClient() {
     onError: (error) => toast.error(getErrorMessage(error)),
   });
 
-  if (detailQuery.isLoading)
+  if (!mounted || detailQuery.isLoading)
     return (
       <div className='w-full py-6 px-1'>
         <LoadingStateWithBorder icon={Cloud} description={t('loadingDetail')} />

frontend/app/(main)/cloudflare/groups/[id]/page.tsx

@@ -6,7 +6,7 @@ import { LoadingStateWithBorder } from '@/components/layout/loading';
 
 import { CloudflareGroupDetailPageClient } from './page-client';
 
-/** Placeholder for static export; real ids resolve client-side via useParams. */
+/** Placeholder for static export; real ids resolve client-side from the pathname. */
 export async function generateStaticParams() {
   return [{ id: '1' }];
 }

frontend/tests/cloudflare/cloudflare-group-detail.test.tsx

@@ -13,8 +13,22 @@ import { CloudflareService, NodeService } from '@/lib/services/openflare';
 import { NextIntlClientProvider } from 'next-intl';
 import zhCN from '@/messages/zh-CN.json';
 
+let mockGroupId = '7';
+let mockParamId = '7';
+
+vi.mock('next/link', () => ({
+  default: ({
+    children,
+    href,
+  }: {
+    children: React.ReactNode;
+    href: string;
+  }) => <a href={href}>{children}</a>,
+}));
+
 vi.mock('next/navigation', () => ({
-  useParams: () => ({ id: '7' }),
+  useParams: () => ({ id: mockParamId }),
+  usePathname: () => `/cloudflare/groups/${mockGroupId}`,
 }));
 
 vi.mock('@/lib/services/openflare', async (importOriginal) => {
@@ -55,6 +69,8 @@ function renderPage() {
 
 describe('Cloudflare group detail refresh', () => {
   beforeEach(() => {
+    mockGroupId = '7';
+    mockParamId = '7';
     vi.mocked(CloudflareService.getGroup).mockReset();
     vi.mocked(CloudflareService.listAvailableDomains).mockReset();
     vi.mocked(NodeService.listNodes).mockReset();
@@ -94,6 +110,19 @@ describe('Cloudflare group detail refresh', () => {
     });
   });
 
+  it('uses the browser pathname ID when serving a static-export fallback shell', async () => {
+    mockParamId = '1';
+    renderPage();
+
+    await waitFor(() => {
+      expect(CloudflareService.getGroup).toHaveBeenCalledWith(7);
+    });
+    expect(CloudflareService.getGroup).not.toHaveBeenCalledWith(1);
+    expect(
+      await screen.findByRole('heading', { name: '生产节点' }),
+    ).toBeVisible();
+  });
+
   it('automatically refreshes detail data every five seconds', async () => {
     vi.useFakeTimers({ shouldAdvanceTime: true });
     renderPage();