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.

docs/changelog/index.md

@@ -14,6 +14,7 @@ sidebar: false
 - 控制台接入中英双语（next-intl，无 URL 语言前缀）：默认中文，可在顶栏或「外观设置」切换；选择写入 cookie 后刷新生效。
 
 ### 🛠 修复
+- 修复静态导出部署下访问 Cloudflare 指向分组详情（`/cloudflare/groups/{id}`，id 不为 1）会跳回首页并触发 React hydration 报错的问题。
 - 修复在网站列表中删除已加入 Cloudflare 指向分组的域名后，访问 Cloudflare 指向分组详情报错「Cloudflare 资源不存在」的问题。
 - 修复自定义 Webhook 推送在企业微信/钉钉返回 HTTP 200 但 `errcode` 非零时仍记为成功的问题；任务日志会记录上游响应体。
 - 修复 OpenTelemetry Resource 绑定 semconv schema 版本导致 SDK 升级后可能无法启动的问题。

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 { usePathname } from 'next/navigation';
-import { useState } from 'react';
+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 [mounted, setMounted] = useState(false);
-  const groupID = Number(params.id);
+  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();

internal/router/root/frontend_static.go

@@ -8,27 +8,49 @@ import (
 	"strings"
 )
 
+//nolint:unused // Used by frontend.go in embed_frontend builds; default lint runs without that tag.
+var nextExportDynamicPrefixes = []string{"websites", "cloudflare/groups"}
+
 //nolint:unused // Used by frontend.go in embed_frontend builds; default lint runs without that tag.
 func resolveNextExportDynamicFallback(subFS fs.FS, cleanPath string) (string, bool) {
-	parts := strings.Split(cleanPath, "/")
+	templatePath, ok := nextExportDynamicTemplate(cleanPath)
-	if len(parts) < 2 || parts[0] != "websites" || parts[1] == "" {
+	if !ok {
 		return "", false
 	}
-
-	var templatePath string
-	switch {
-	case len(parts) == 2 && !strings.Contains(parts[1], "."):
-		templatePath = "websites/1.html"
-	case len(parts) == 2 && strings.HasSuffix(parts[1], ".txt"):
-		templatePath = "websites/1.txt"
-	case len(parts) == 3 && parts[2] != "" && strings.HasPrefix(parts[2], "__next.") && strings.HasSuffix(parts[2], ".txt"):
-		templatePath = "websites/1/" + parts[2]
-	default:
-		return "", false
-	}
-
 	if _, err := fs.Stat(subFS, templatePath); err != nil {
 		return "", false
 	}
 	return templatePath, true
 }
+
+//nolint:unused // Used by frontend.go in embed_frontend builds; default lint runs without that tag.
+func nextExportDynamicTemplate(cleanPath string) (string, bool) {
+	for _, prefix := range nextExportDynamicPrefixes {
+		if path, ok := nextExportIDTemplate(cleanPath, prefix); ok {
+			return path, true
+		}
+	}
+	return "", false
+}
+
+//nolint:unused // Used by frontend.go in embed_frontend builds; default lint runs without that tag.
+func nextExportIDTemplate(cleanPath, prefix string) (string, bool) {
+	if cleanPath == prefix || !strings.HasPrefix(cleanPath, prefix+"/") {
+		return "", false
+	}
+	rest := strings.TrimPrefix(cleanPath, prefix+"/")
+	if rest == "" {
+		return "", false
+	}
+	parts := strings.Split(rest, "/")
+	switch {
+	case len(parts) == 1 && !strings.Contains(parts[0], "."):
+		return prefix + "/1.html", true
+	case len(parts) == 1 && strings.HasSuffix(parts[0], ".txt"):
+		return prefix + "/1.txt", true
+	case len(parts) == 2 && parts[1] != "" && strings.HasPrefix(parts[1], "__next.") && strings.HasSuffix(parts[1], ".txt"):
+		return prefix + "/1/" + parts[1], true
+	default:
+		return "", false
+	}
+}

internal/router/root/frontend_static_test.go

@@ -14,6 +14,10 @@ func TestResolveNextExportDynamicFallbackUsesZoneTemplate(t *testing.T) {
 		"websites/1.html": &fstest.MapFile{Data: []byte("zone detail")},
 		"websites/1.txt":  &fstest.MapFile{Data: []byte("zone flight")},
 		"websites/1/__next.!KG1haW4p.websites.$d$zoneId.__PAGE__.txt": &fstest.MapFile{Data: []byte("zone segment")},
+		"cloudflare/groups.html":   &fstest.MapFile{Data: []byte("groups list redirect")},
+		"cloudflare/groups/1.html": &fstest.MapFile{Data: []byte("group detail")},
+		"cloudflare/groups/1.txt":  &fstest.MapFile{Data: []byte("group flight")},
+		"cloudflare/groups/1/__next.!KG1haW4p.cloudflare.groups.$d$id.__PAGE__.txt": &fstest.MapFile{Data: []byte("group segment")},
 	}
 
 	tests := []struct {
@@ -28,15 +32,22 @@ func TestResolveNextExportDynamicFallbackUsesZoneTemplate(t *testing.T) {
 			input: "websites/3/__next.!KG1haW4p.websites.$d$zoneId.__PAGE__.txt",
 			want:  "websites/1/__next.!KG1haW4p.websites.$d$zoneId.__PAGE__.txt",
 		},
+		{name: "cloudflare group html", input: "cloudflare/groups/2", want: "cloudflare/groups/1.html"},
+		{name: "cloudflare group route payload", input: "cloudflare/groups/2.txt", want: "cloudflare/groups/1.txt"},
+		{
+			name:  "cloudflare group segment payload",
+			input: "cloudflare/groups/3/__next.!KG1haW4p.cloudflare.groups.$d$id.__PAGE__.txt",
+			want:  "cloudflare/groups/1/__next.!KG1haW4p.cloudflare.groups.$d$id.__PAGE__.txt",
+		},
 	}
 	for _, tt := range tests {
 		t.Run(tt.name, func(t *testing.T) {
 			got, ok := resolveNextExportDynamicFallback(subFS, tt.input)
 			if !ok {
-				t.Fatal("expected dynamic websites route fallback")
+				t.Fatalf("resolveNextExportDynamicFallback(%q) ok = false, want true", tt.input)
 			}
 			if got != tt.want {
-				t.Fatalf("expected %q fallback, got %q", tt.want, got)
+				t.Fatalf("resolveNextExportDynamicFallback(%q) = %q, want %q", tt.input, got, tt.want)
 			}
 		})
 	}
@@ -53,6 +64,13 @@ func TestResolveNextExportDynamicFallbackRejectsNestedOrAssetPath(t *testing.T)
 		"websites/3.js",
 		"websites/3/",
 		"websites/3/missing.txt",
+		"cloudflare",
+		"cloudflare/groups",
+		"cloudflare/groups.html",
+		"cloudflare/groups/2/settings",
+		"cloudflare/groups/2.js",
+		"cloudflare/groups/2/",
+		"cloudflare/groups/2/missing.txt",
 	}
 	for _, tt := range tests {
 		t.Run(tt, func(t *testing.T) {
@@ -69,6 +87,9 @@ func TestResolveNextExportDynamicFallbackRequiresGeneratedTemplate(t *testing.T)
 	}
 
 	if got, ok := resolveNextExportDynamicFallback(subFS, "websites/3"); ok {
-		t.Fatalf("expected no fallback without generated template, got %q", got)
+		t.Fatalf("resolveNextExportDynamicFallback(%q) = %q, want no fallback", "websites/3", got)
+	}
+	if got, ok := resolveNextExportDynamicFallback(subFS, "cloudflare/groups/2"); ok {
+		t.Fatalf("resolveNextExportDynamicFallback(%q) = %q, want no fallback", "cloudflare/groups/2", got)
 	}
 }