feat(web): add zone-based website management

以稳定 Zone ID 替换旧托管域名详情页：列表展示根域与域名计数，详情提供概览/域名/路由/证书/设置 Tabs，并补齐 ZoneService 与 vitest 行为测试。 Zone 列表 API 返回 domain_count；同步 Swagger 与重构计划进度。
2026-10-09 00:56:37 +08:00 · 2026-07-12 15:23:43 +08:00
parent d4d9bad74d
commit 350b433cc1
30 changed files with 2369 additions and 1178 deletions
@@ -0,0 +1,64 @@
+import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
+import {fireEvent, render, screen} from '@testing-library/react';
+import {describe, expect, it, vi} from 'vitest';
+
+import WebsitesPage from '@/app/(main)/websites/page';
+import {ZoneService} from '@/lib/services/openflare';
+
+vi.mock('next/link', () => ({
+  default: ({children, href}: {children: React.ReactNode; href: string}) => (
+    <a href={href}>{children}</a>
+  ),
+}));
+
+vi.mock('@/lib/services/openflare', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/lib/services/openflare')>();
+  return {...actual, ZoneService: {list: vi.fn()}};
+});
+
+function renderPage() {
+  const client = new QueryClient({defaultOptions: {queries: {retry: false}}});
+  return render(
+    <QueryClientProvider client={client}>
+      <WebsitesPage />
+    </QueryClientProvider>,
+  );
+}
+
+describe('WebsitesPage', () => {
+  it('filters zones, shows domain counts, and links to stable ID routes', async () => {
+    vi.mocked(ZoneService.list).mockResolvedValue([
+      {
+        id: 42,
+        domain: 'arctel.de',
+        remark: '生产站点',
+        domain_count: 3,
+        created_at: '',
+        updated_at: '',
+      },
+      {
+        id: 43,
+        domain: 'example.com',
+        remark: '',
+        domain_count: 0,
+        created_at: '',
+        updated_at: '',
+      },
+    ]);
+
+    renderPage();
+
+    expect(await screen.findByRole('heading', {name: 'arctel.de'})).toBeVisible();
+    expect(screen.getByText(/3 个域名/)).toBeVisible();
+    expect(screen.getByText(/0 个域名/)).toBeVisible();
+
+    fireEvent.change(screen.getByPlaceholderText('搜索 Zone 根域'), {
+      target: {value: 'arctel'},
+    });
+    expect(screen.getByRole('link', {name: '管理'})).toHaveAttribute(
+      'href',
+      '/websites/42',
+    );
+    expect(screen.queryByText('example.com')).not.toBeInTheDocument();
+  });
+});
@@ -0,0 +1,85 @@
+import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
+import {render, screen, waitFor} from '@testing-library/react';
+import {beforeEach, describe, expect, it, vi} from 'vitest';
+
+import {ZonePageClient} from '@/app/(main)/websites/[zoneId]/page-client';
+import {TlsCertificateService, ZoneService} from '@/lib/services/openflare';
+
+vi.mock('next/link', () => ({
+  default: ({children, href}: {children: React.ReactNode; href: string}) => (
+    <a href={href}>{children}</a>
+  ),
+}));
+
+vi.mock('@/lib/services/openflare', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/lib/services/openflare')>();
+  return {
+    ...actual,
+    ZoneService: {
+      getOverview: vi.fn(),
+      deleteById: vi.fn(),
+      list: vi.fn(),
+    },
+    TlsCertificateService: {
+      list: vi.fn(),
+    },
+  };
+});
+
+function renderPage(zoneId: number) {
+  const client = new QueryClient({
+    defaultOptions: {
+      queries: {retry: false, gcTime: 0},
+    },
+  });
+  return render(
+    <QueryClientProvider client={client}>
+      <ZonePageClient zoneId={zoneId} />
+    </QueryClientProvider>,
+  );
+}
+
+describe('ZonePageClient', () => {
+  beforeEach(() => {
+    vi.mocked(ZoneService.getOverview).mockReset();
+    vi.mocked(ZoneService.deleteById).mockReset();
+    vi.mocked(TlsCertificateService.list).mockReset();
+    vi.mocked(TlsCertificateService.list).mockResolvedValue([]);
+  });
+
+  it('loads the overview by stable ID and exposes all tabs including empty domains', async () => {
+    vi.mocked(ZoneService.getOverview).mockImplementation(async () => ({
+      zone: {id: 42, domain: 'arctel.de', remark: '', created_at: '', updated_at: ''},
+      domains: [],
+    }));
+
+    renderPage(42);
+
+    await waitFor(() => {
+      expect(ZoneService.getOverview).toHaveBeenCalledWith(42);
+    });
+    expect(await screen.findByRole('heading', {name: 'arctel.de'})).toBeVisible();
+    expect(screen.getByRole('tab', {name: '域名 (0)'})).toBeVisible();
+    expect(screen.getByRole('tab', {name: '证书 (0)'})).toBeVisible();
+    expect(screen.getByRole('tab', {name: '路由'})).toBeVisible();
+    expect(screen.getByRole('tab', {name: '设置'})).toBeVisible();
+  });
+
+  it('renders a not-found state for a missing Zone', async () => {
+    vi.mocked(ZoneService.getOverview).mockRejectedValue(new Error('Zone 不存在'));
+
+    renderPage(42);
+
+    expect(
+      await screen.findByText('网站不存在，可能已被删除或 ID 无效。'),
+    ).toBeVisible();
+  });
+
+  it('renders invalid ID empty state without calling the API', async () => {
+    renderPage(0);
+    expect(
+      await screen.findByText('无效的网站 ID，请从网站列表进入详情页。'),
+    ).toBeVisible();
+    expect(ZoneService.getOverview).not.toHaveBeenCalled();
+  });
+});