feat(cloudflare): add DNS pointing integration

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

@@ -0,0 +1,106 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import {
+  act,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import CloudflareGroupDetailPage from '@/app/(main)/cloudflare/groups/[id]/page';
+import { CloudflareService, NodeService } from '@/lib/services/openflare';
+
+vi.mock('next/navigation', () => ({
+  useParams: () => ({ id: '7' }),
+}));
+
+vi.mock('@/lib/services/openflare', async (importOriginal) => {
+  const actual =
+    await importOriginal<typeof import('@/lib/services/openflare')>();
+  return {
+    ...actual,
+    CloudflareService: {
+      ...actual.CloudflareService,
+      getGroup: vi.fn(),
+      listAvailableDomains: vi.fn(),
+      updateGroup: vi.fn(),
+      createMember: vi.fn(),
+      updateMember: vi.fn(),
+      syncMember: vi.fn(),
+      removeMember: vi.fn(),
+    },
+    NodeService: { ...actual.NodeService, listNodes: vi.fn() },
+  };
+});
+
+function renderPage() {
+  const client = new QueryClient({
+    defaultOptions: { queries: { retry: false, gcTime: 0 } },
+  });
+  render(
+    <QueryClientProvider client={client}>
+      <CloudflareGroupDetailPage />
+    </QueryClientProvider>,
+  );
+}
+
+describe('Cloudflare group detail refresh', () => {
+  beforeEach(() => {
+    vi.mocked(CloudflareService.getGroup).mockReset();
+    vi.mocked(CloudflareService.listAvailableDomains).mockReset();
+    vi.mocked(NodeService.listNodes).mockReset();
+    vi.mocked(CloudflareService.getGroup).mockResolvedValue({
+      group: {
+        id: 7,
+        name: '生产节点',
+        primary_node: { id: 1, name: '主节点', ip: '192.0.2.1' },
+        backup_node: null,
+        active_node: { id: 1, name: '主节点', ip: '192.0.2.1' },
+        default_proxied: true,
+        enabled: true,
+        member_count: 0,
+        created_at: '',
+        updated_at: '',
+      },
+      members: [],
+    });
+    vi.mocked(CloudflareService.listAvailableDomains).mockResolvedValue([]);
+    vi.mocked(NodeService.listNodes).mockResolvedValue([]);
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('refreshes detail data when the refresh button is clicked', async () => {
+    renderPage();
+
+    expect(
+      await screen.findByRole('heading', { name: '生产节点' }),
+    ).toBeVisible();
+    fireEvent.click(screen.getByRole('button', { name: '刷新' }));
+
+    await waitFor(() => {
+      expect(CloudflareService.getGroup).toHaveBeenCalledTimes(2);
+    });
+  });
+
+  it('automatically refreshes detail data every five seconds', async () => {
+    vi.useFakeTimers({ shouldAdvanceTime: true });
+    renderPage();
+
+    expect(
+      await screen.findByRole('heading', { name: '生产节点' }),
+    ).toBeVisible();
+    expect(CloudflareService.getGroup).toHaveBeenCalledTimes(1);
+
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(5000);
+    });
+
+    await waitFor(() => {
+      expect(CloudflareService.getGroup).toHaveBeenCalledTimes(2);
+    });
+  });
+});

frontend/tests/cloudflare/cloudflare-overview.test.tsx

@@ -4,19 +4,62 @@ import { createElement } from 'react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
 import CloudflarePage from '@/app/(main)/cloudflare/page';
-import { CloudflareService } from '@/lib/services/openflare';
+import { AdminTaskService } from '@/lib/services/admin';
+import { CloudflareService, NodeService } from '@/lib/services/openflare';
 
 vi.mock('@/lib/services/openflare', async (importOriginal) => {
   const actual =
     await importOriginal<typeof import('@/lib/services/openflare')>();
   return {
     ...actual,
-    CloudflareService: { ...actual.CloudflareService, getOverview: vi.fn() },
+    CloudflareService: {
+      ...actual.CloudflareService,
+      getOverview: vi.fn(),
+      listGroups: vi.fn(),
+      createGroup: vi.fn(),
+      syncGroup: vi.fn(),
+      deleteGroup: vi.fn(),
+    },
+    NodeService: { ...actual.NodeService, listNodes: vi.fn() },
   };
 });
 
+vi.mock('@/lib/services/admin', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/lib/services/admin')>();
+  return {
+    ...actual,
+    AdminTaskService: {
+      ...actual.AdminTaskService,
+      listTaskExecutions: vi.fn(),
+      getTaskExecution: vi.fn(),
+      retryTaskExecution: vi.fn(),
+    },
+  };
+});
+
+function renderPage() {
+  const client = new QueryClient({
+    defaultOptions: { queries: { retry: false, gcTime: 0 } },
+  });
+  render(
+    createElement(
+      QueryClientProvider,
+      { client },
+      createElement(CloudflarePage),
+    ),
+  );
+}
+
 describe('Cloudflare overview', () => {
   beforeEach(() => {
+    vi.mocked(CloudflareService.listGroups).mockResolvedValue([]);
+    vi.mocked(NodeService.listNodes).mockResolvedValue([]);
+    vi.mocked(AdminTaskService.listTaskExecutions).mockResolvedValue({
+      items: [],
+      total: 0,
+      page: 1,
+      page_size: 10,
+    });
     vi.mocked(CloudflareService.getOverview).mockResolvedValue({
       connection: {
         configured: false,
@@ -34,19 +77,51 @@ describe('Cloudflare overview', () => {
     });
   });
 
-  it('shows the token readiness gate and phase-one limitation', async () => {
-    const client = new QueryClient({
-      defaultOptions: { queries: { retry: false, gcTime: 0 } },
-    });
-    render(
-      createElement(
-        QueryClientProvider,
-        { client },
-        createElement(CloudflarePage),
-      ),
-    );
+  it('shows the token readiness gate without the synchronization boundary card', async () => {
+    renderPage();
 
     expect(await screen.findByText('Cloudflare 连接尚未就绪')).toBeVisible();
-    expect(screen.getByText(/一期不提供自动故障切换/)).toBeVisible();
+    expect(screen.queryByText('同步边界')).not.toBeInTheDocument();
+  });
+
+  it('renders pointing groups directly on the overview page', async () => {
+    vi.mocked(CloudflareService.getOverview).mockResolvedValue({
+      connection: {
+        configured: true,
+        ready: true,
+        source: 'standalone',
+        dns_account_id: null,
+        status: 'ready',
+        verified_at: null,
+      },
+      group_count: 1,
+      member_count: 2,
+      ok_count: 1,
+      pending_count: 1,
+      error_count: 0,
+    });
+    vi.mocked(CloudflareService.listGroups).mockResolvedValue([
+      {
+        id: 7,
+        name: '生产节点',
+        primary_node: { id: 1, name: '主节点', ip: '192.0.2.1' },
+        backup_node: null,
+        active_node: { id: 1, name: '主节点', ip: '192.0.2.1' },
+        default_proxied: true,
+        enabled: true,
+        member_count: 2,
+        created_at: '',
+        updated_at: '',
+      },
+    ]);
+
+    renderPage();
+
+    expect(await screen.findByText('生产节点')).toBeVisible();
+    expect(screen.getByRole('link', { name: '管理' })).toHaveAttribute(
+      'href',
+      '/cloudflare/groups/7',
+    );
+    expect(await screen.findByText('同步任务')).toBeVisible();
   });
 });

frontend/tests/cloudflare/member-add-dialog.test.tsx

@@ -0,0 +1,127 @@
+import { fireEvent, render, screen, within } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
+import { MemberAddDialog } from '@/app/(main)/cloudflare/components/member-add-dialog';
+import type { CloudflareAvailableDomain } from '@/lib/services/openflare';
+
+const domains: CloudflareAvailableDomain[] = [
+  {
+    id: 1,
+    zone_id: 10,
+    domain: 'example.com',
+    zone_domain: 'example.com',
+  },
+  {
+    id: 2,
+    zone_id: 10,
+    domain: 'www.example.com',
+    zone_domain: 'example.com',
+  },
+  {
+    id: 3,
+    zone_id: 10,
+    domain: 'api.example.com',
+    zone_domain: 'example.com',
+  },
+  {
+    id: 4,
+    zone_id: 20,
+    domain: 'app.other.io',
+    zone_domain: 'other.io',
+  },
+];
+
+describe('MemberAddDialog advanced domain picker', () => {
+  it('groups domains under top-level zone roots and supports batch select', () => {
+    const onSubmit = vi.fn();
+    render(
+      <MemberAddDialog
+        open
+        onOpenChange={vi.fn()}
+        domains={domains}
+        defaultProxied
+        pending={false}
+        onSubmit={onSubmit}
+      />,
+    );
+
+    expect(screen.getAllByText('example.com').length).toBeGreaterThan(0);
+    expect(screen.getAllByText('other.io').length).toBeGreaterThan(0);
+    expect(screen.getByText('www.example.com')).toBeVisible();
+    expect(screen.getByText('api.example.com')).toBeVisible();
+
+    fireEvent.click(screen.getByRole('button', { name: '全选可见' }));
+    fireEvent.click(screen.getByRole('button', { name: '添加并同步（4）' }));
+
+    expect(onSubmit).toHaveBeenCalledTimes(1);
+    const [ids, proxied] = onSubmit.mock.calls[0] as [number[], boolean];
+    expect([...ids].sort((a, b) => a - b)).toEqual([1, 2, 3, 4]);
+    expect(proxied).toBe(true);
+  });
+
+  it('filters by keyword across domain and zone root', () => {
+    render(
+      <MemberAddDialog
+        open
+        onOpenChange={vi.fn()}
+        domains={domains}
+        defaultProxied={false}
+        pending={false}
+        onSubmit={vi.fn()}
+      />,
+    );
+
+    fireEvent.change(screen.getByPlaceholderText('搜索域名或顶级域…'), {
+      target: { value: 'other' },
+    });
+
+    expect(screen.queryByText('www.example.com')).not.toBeInTheDocument();
+    expect(screen.getByText('app.other.io')).toBeVisible();
+    expect(screen.getByText('other.io')).toBeVisible();
+  });
+
+  it('selects an entire top-level domain group', () => {
+    const onSubmit = vi.fn();
+    render(
+      <MemberAddDialog
+        open
+        onOpenChange={vi.fn()}
+        domains={domains}
+        defaultProxied
+        pending={false}
+        onSubmit={onSubmit}
+      />,
+    );
+
+    fireEvent.click(
+      screen.getByRole('checkbox', { name: '选择顶级域 example.com' }),
+    );
+    fireEvent.click(screen.getByRole('button', { name: '添加并同步（3）' }));
+
+    expect(onSubmit).toHaveBeenCalledTimes(1);
+    const [ids, proxied] = onSubmit.mock.calls[0] as [number[], boolean];
+    expect([...ids].sort((a, b) => a - b)).toEqual([1, 2, 3]);
+    expect(proxied).toBe(true);
+  });
+
+  it('toggles individual domains within a group', () => {
+    const onSubmit = vi.fn();
+    render(
+      <MemberAddDialog
+        open
+        onOpenChange={vi.fn()}
+        domains={domains}
+        defaultProxied={false}
+        pending={false}
+        onSubmit={onSubmit}
+      />,
+    );
+
+    const wwwLabel = screen.getByText('www.example.com').closest('label');
+    expect(wwwLabel).toBeTruthy();
+    fireEvent.click(within(wwwLabel as HTMLElement).getByRole('checkbox'));
+
+    fireEvent.click(screen.getByRole('button', { name: '添加并同步' }));
+    expect(onSubmit).toHaveBeenCalledWith([2], false);
+  });
+});

frontend/tests/cloudflare/sync-tasks-panel.test.tsx

@@ -0,0 +1,145 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { render, screen, waitFor } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { SyncTasksPanel } from '@/app/(main)/cloudflare/components/sync-tasks-panel';
+import { AdminTaskService } from '@/lib/services/admin';
+import type { TaskExecution } from '@/lib/services/admin';
+
+vi.mock('@/lib/services/admin', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/lib/services/admin')>();
+  return {
+    ...actual,
+    AdminTaskService: {
+      ...actual.AdminTaskService,
+      listTaskExecutions: vi.fn(),
+      getTaskExecution: vi.fn(),
+      retryTaskExecution: vi.fn(),
+    },
+  };
+});
+
+function renderPanel() {
+  const client = new QueryClient({
+    defaultOptions: { queries: { retry: false, gcTime: 0 } },
+  });
+  render(
+    <QueryClientProvider client={client}>
+      <SyncTasksPanel />
+    </QueryClientProvider>,
+  );
+}
+
+function execution(
+  partial: Partial<TaskExecution> &
+    Pick<TaskExecution, 'id' | 'task_type' | 'task_name'>,
+): TaskExecution {
+  return {
+    task_id: `task_${partial.id}`,
+    status: 'succeeded',
+    retryable: true,
+    max_retry: 2,
+    retry_count: 0,
+    log: '',
+    error_message: '',
+    result: 'ok',
+    started_at: null,
+    finished_at: null,
+    duration: 100,
+    payload: '{}',
+    triggered_by: 'manual',
+    created_at: '2026-08-04T10:00:00Z',
+    updated_at: '2026-08-04T10:00:01Z',
+    ...partial,
+  };
+}
+
+describe('Cloudflare sync tasks panel', () => {
+  beforeEach(() => {
+    vi.mocked(AdminTaskService.listTaskExecutions).mockReset();
+  });
+
+  it('queries only sync_member and sync_group and hides other tasks', async () => {
+    vi.mocked(AdminTaskService.listTaskExecutions).mockImplementation(
+      async (request) => {
+        if (request.task_type === 'cloudflare:sync_member') {
+          return {
+            items: [
+              execution({
+                id: '1',
+                task_type: 'cloudflare:sync_member',
+                task_name: 'Cloudflare 域名同步',
+                created_at: '2026-08-04T12:00:00Z',
+              }),
+            ],
+            total: 1,
+            page: 1,
+            page_size: 50,
+          };
+        }
+        if (request.task_type === 'cloudflare:sync_group') {
+          return {
+            items: [
+              execution({
+                id: '2',
+                task_type: 'cloudflare:sync_group',
+                task_name: 'Cloudflare 分组同步',
+                created_at: '2026-08-04T11:00:00Z',
+              }),
+              // Defensive: even if API returns unrelated rows, panel must drop them.
+              execution({
+                id: '99',
+                task_type: 'system:cleanup',
+                task_name: '系统垃圾清理',
+                triggered_by: 'schedule',
+                created_at: '2026-08-04T13:00:00Z',
+              }),
+            ],
+            total: 2,
+            page: 1,
+            page_size: 50,
+          };
+        }
+        return { items: [], total: 0, page: 1, page_size: 50 };
+      },
+    );
+
+    renderPanel();
+
+    expect(await screen.findByText('Cloudflare 域名同步')).toBeVisible();
+    expect(screen.getByText('Cloudflare 分组同步')).toBeVisible();
+    expect(screen.queryByText('系统垃圾清理')).not.toBeInTheDocument();
+    expect(screen.queryByText('system:cleanup')).not.toBeInTheDocument();
+
+    await waitFor(() => {
+      expect(AdminTaskService.listTaskExecutions).toHaveBeenCalledWith(
+        expect.objectContaining({
+          task_type: 'cloudflare:sync_member',
+          page: 1,
+          page_size: 50,
+        }),
+      );
+      expect(AdminTaskService.listTaskExecutions).toHaveBeenCalledWith(
+        expect.objectContaining({
+          task_type: 'cloudflare:sync_group',
+          page: 1,
+          page_size: 50,
+        }),
+      );
+    });
+    expect(AdminTaskService.listTaskExecutions).toHaveBeenCalledTimes(2);
+  });
+
+  it('shows empty state when no cloudflare tasks exist', async () => {
+    vi.mocked(AdminTaskService.listTaskExecutions).mockResolvedValue({
+      items: [],
+      total: 0,
+      page: 1,
+      page_size: 50,
+    });
+
+    renderPanel();
+
+    expect(await screen.findByText('暂无同步任务')).toBeVisible();
+  });
+});