feat(web): polish zone list and settings layout

Show Zone list as a table, align detail back navigation with proxy
route detail, and move edit/delete actions into the settings tab.

frontend/app/(main)/websites/[zoneId]/page-client.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import Link from 'next/link';
 import {usePathname, useRouter, useSearchParams} from 'next/navigation';
 import {useCallback, useMemo, useState} from 'react';
 import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query';
@@ -118,11 +117,14 @@ export function ZonePageClient({zoneId}: {zoneId: number}) {
   if (overviewQuery.isError || !overviewQuery.data) {
     return (
       <div className="space-y-4 py-6 px-1">
-        <Button variant="ghost" size="sm" className="h-8 px-2" asChild>
+        <Button
-          <Link href="/websites">
+          variant="ghost"
-            <ArrowLeft className="mr-1 size-4" />
+          size="sm"
-            返回网站列表
+          className="h-8 gap-1.5 px-0 text-xs"
-          </Link>
+          onClick={() => router.back()}
+        >
+          <ArrowLeft className="size-3.5" />
+          返回
         </Button>
         <EmptyStateWithBorder
           icon={Globe}
@@ -141,7 +143,17 @@ export function ZonePageClient({zoneId}: {zoneId: number}) {
 
   return (
     <div className="space-y-6 py-6 px-1">
-      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+      <div className="space-y-4">
+        <Button
+          variant="ghost"
+          size="sm"
+          className="h-8 gap-1.5 px-0 text-xs"
+          onClick={() => router.back()}
+        >
+          <ArrowLeft className="size-3.5" />
+          返回
+        </Button>
+
         <div className="flex items-center gap-2">
           <Globe className="size-5 text-primary" />
           <div>
@@ -149,32 +161,6 @@ export function ZonePageClient({zoneId}: {zoneId: number}) {
             <p className="text-sm text-muted-foreground">Zone 网站管理</p>
           </div>
         </div>
-        <div className="flex flex-wrap gap-2">
-          <Button variant="outline" size="sm" className="h-7 text-xs" asChild>
-            <Link href="/websites">
-              <ArrowLeft className="mr-1 size-3.5" />
-              返回
-            </Link>
-          </Button>
-          <Button
-            variant="outline"
-            size="sm"
-            className="h-7 text-xs"
-            onClick={() => setEditZone(true)}
-          >
-            <Pencil className="mr-1 size-3.5" />
-            编辑 Zone
-          </Button>
-          <Button
-            variant="destructive"
-            size="sm"
-            className="h-7 text-xs"
-            onClick={() => setConfirmDelete(true)}
-          >
-            <Trash2 className="mr-1 size-3.5" />
-            删除 Zone
-          </Button>
-        </div>
       </div>
 
       <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
@@ -211,20 +197,48 @@ export function ZonePageClient({zoneId}: {zoneId: number}) {
           <ZoneCertificatesPanel domains={overview.domains} certificates={certificates} />
         </TabsContent>
         <TabsContent value="settings">
-          <div className="rounded-lg border p-4">
+          <div className="space-y-4">
-            <p className="text-sm font-semibold">Zone 设置</p>
+            <div className="rounded-lg border p-4">
-            <p className="mt-1 text-sm text-muted-foreground">
+              <p className="text-sm font-semibold">基本信息</p>
-              根域和备注可在此 Zone 的编辑操作中维护。
+              <p className="mt-1 text-sm text-muted-foreground">
-            </p>
+                维护 Zone 的可注册根域。根域变更后，请确认其下域名仍归属该根域。
-            <Button
+              </p>
-              variant="outline"
+              <div className="mt-3 grid gap-2 text-sm sm:grid-cols-2">
-              size="sm"
+                <div>
-              className="mt-4 h-7 text-xs"
+                  <p className="text-xs text-muted-foreground">当前根域</p>
-              onClick={() => setEditZone(true)}
+                  <p className="mt-1 font-mono text-[13px] font-medium">{overview.zone.domain}</p>
-            >
+                </div>
-              <Pencil className="mr-1 size-3.5" />
+                <div>
-              编辑根域与备注
+                  <p className="text-xs text-muted-foreground">域名数量</p>
-            </Button>
+                  <p className="mt-1 font-mono text-[13px] font-medium">{overview.domains.length}</p>
+                </div>
+              </div>
+              <Button
+                variant="outline"
+                size="sm"
+                className="mt-4 h-7 text-xs"
+                onClick={() => setEditZone(true)}
+              >
+                <Pencil className="mr-1 size-3.5" />
+                编辑根域
+              </Button>
+            </div>
+
+            <div className="rounded-lg border border-destructive/30 p-4">
+              <p className="text-sm font-semibold text-destructive">危险操作</p>
+              <p className="mt-1 text-sm text-muted-foreground">
+                删除 Zone 前须清空其下全部域名；删除后不可恢复。
+              </p>
+              <Button
+                variant="destructive"
+                size="sm"
+                className="mt-4 h-7 text-xs"
+                onClick={() => setConfirmDelete(true)}
+              >
+                <Trash2 className="mr-1 size-3.5" />
+                删除 Zone
+              </Button>
+            </div>
           </div>
         </TabsContent>
       </Tabs>

frontend/app/(main)/websites/page.tsx

@@ -3,20 +3,24 @@
 import Link from 'next/link';
 import {useMemo, useState} from 'react';
 import {useQuery} from '@tanstack/react-query';
-import {Globe, Plus, Search} from 'lucide-react';
+import {useRouter} from 'next/navigation';
+import {Eye, Globe, Plus, Search} from 'lucide-react';
 
 import {Button} from '@/components/ui/button';
-import {Card, CardContent, CardDescription, CardHeader, CardTitle} from '@/components/ui/card';
 import {EmptyStateWithBorder} from '@/components/layout/empty';
 import {ErrorInline} from '@/components/layout/error';
 import {Input} from '@/components/ui/input';
 import {LoadingStateWithBorder} from '@/components/layout/loading';
+import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow} from '@/components/ui/table';
+import {Tooltip, TooltipContent, TooltipProvider, TooltipTrigger} from '@/components/ui/tooltip';
 import {ZoneService, zoneQueryKey} from '@/lib/services/openflare';
+import {formatDateTime} from '@/lib/utils';
 
 import {ZoneEditorDialog} from './[zoneId]/components/zone-editor-dialog';
 import {getErrorMessage} from './components/website-utils';
 
 export default function WebsitesPage() {
+  const router = useRouter();
   const [search, setSearch] = useState('');
   const [editorOpen, setEditorOpen] = useState(false);
   const zonesQuery = useQuery({
@@ -34,83 +38,133 @@ export default function WebsitesPage() {
   }, [search, zonesQuery.data]);
 
   return (
-    <div className="space-y-6 py-6 px-1">
+    <div className="space-y-4 py-6 px-1">
-      <div className="flex items-center justify-between gap-3">
+      <div className="flex items-center justify-between gap-3 pb-2">
         <div className="flex items-center gap-2">
           <Globe className="size-5 text-primary" />
           <h1 className="text-2xl font-semibold tracking-tight">网站</h1>
         </div>
-        <Button size="sm" className="h-7 text-xs" onClick={() => setEditorOpen(true)}>
+        <Button
+          variant="secondary"
+          size="sm"
+          className="h-7 text-xs"
+          onClick={() => setEditorOpen(true)}
+        >
           <Plus className="mr-1 size-3.5" />
           新增 Zone
         </Button>
       </div>
 
-      <Card className="border-dashed shadow-none">
+      <div className="relative w-full sm:w-64">
-        <CardHeader className="gap-3 pb-3 sm:flex-row sm:items-end sm:justify-between">
+        <Search className="pointer-events-none absolute left-2.5 top-2.5 size-3.5 text-muted-foreground" />
-          <div>
+        <Input
-            <CardTitle className="text-base font-semibold">Zone 列表</CardTitle>
+          aria-label="搜索 Zone 根域"
-            <CardDescription>
+          placeholder="搜索 Zone 根域"
-              以可注册根域组织网站，并在详情中维护明确 FQDN、证书与路由关联。
+          value={search}
-            </CardDescription>
+          onChange={(event) => setSearch(event.target.value)}
-          </div>
+          className="h-8 pl-8 text-xs"
-          <div className="relative w-full sm:w-64">
+        />
-            <Search className="pointer-events-none absolute left-2.5 top-2.5 size-3.5 text-muted-foreground" />
+      </div>
-            <Input
+
-              aria-label="搜索 Zone 根域"
+      {zonesQuery.isLoading ? (
-              placeholder="搜索 Zone 根域"
+        <LoadingStateWithBorder icon={Globe} description="加载 Zone 列表中..." />
-              value={search}
+      ) : zonesQuery.isError ? (
-              onChange={(event) => setSearch(event.target.value)}
+        <div className="rounded-lg border border-dashed p-8">
-              className="h-8 pl-8 text-xs"
+          <ErrorInline
-            />
+            className="justify-center"
-          </div>
+            message={getErrorMessage(zonesQuery.error)}
-        </CardHeader>
+            onRetry={() => void zonesQuery.refetch()}
-        <CardContent>
+          />
-          {zonesQuery.isLoading ? (
+        </div>
-            <LoadingStateWithBorder icon={Globe} description="加载 Zone 列表中..." />
+      ) : zones.length === 0 ? (
-          ) : zonesQuery.isError ? (
+        <EmptyStateWithBorder
-            <div className="rounded-lg border border-dashed p-8">
+          icon={Globe}
-              <ErrorInline
+          description={
-                className="justify-center"
+            search
-                message={getErrorMessage(zonesQuery.error)}
+              ? '未找到匹配的 Zone。'
-                onRetry={() => void zonesQuery.refetch()}
+              : '暂无 Zone，点击右上角「新增 Zone」开始录入。'
-              />
+          }
-            </div>
+        />
-          ) : zones.length === 0 ? (
+      ) : (
-            <EmptyStateWithBorder
+        <div className="overflow-hidden rounded-lg border border-dashed shadow-none">
-              icon={Globe}
+          <TooltipProvider delayDuration={0}>
-              description={
+            <Table className="w-full min-w-full caption-bottom text-sm">
-                search
+              <TableHeader className="sticky top-0 z-20 bg-background">
-                  ? '未找到匹配的 Zone。'
+                <TableRow className="border-b border-dashed hover:bg-transparent">
-                  : '暂无 Zone，点击右上角「新增 Zone」开始录入。'
+                  <TableHead className="h-8 w-[90px] whitespace-nowrap py-2">
-              }
+                    ID
-            />
+                  </TableHead>
-          ) : (
+                  <TableHead className="h-8 min-w-[180px] whitespace-nowrap py-2">
-            <div className="grid gap-3 lg:grid-cols-2">
+                    根域
-              {zones.map((zone) => (
+                  </TableHead>
-                <div key={zone.id} className="rounded-lg border bg-card p-4">
+                  <TableHead className="h-8 min-w-[100px] whitespace-nowrap py-2">
-                  <div className="flex items-start justify-between gap-3">
+                    域名数
-                    <div className="min-w-0">
+                  </TableHead>
-                      <h2 className="truncate text-sm font-semibold">{zone.domain}</h2>
+                  <TableHead className="h-8 min-w-[140px] whitespace-nowrap py-2">
-                      <p className="mt-2 text-xs text-muted-foreground">
+                    创建时间
-                        {zone.domain_count ?? 0} 个域名
+                  </TableHead>
-                      </p>
+                  <TableHead className="h-8 min-w-[140px] whitespace-nowrap py-2">
-                    </div>
+                    更新时间
-                    <Button
+                  </TableHead>
-                      variant="outline"
+                  <TableHead className="sticky right-0 z-10 h-8 w-[90px] bg-background py-2 text-center">
-                      size="sm"
+                    操作
-                      className="h-7 shrink-0 text-xs"
+                  </TableHead>
-                      asChild
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {zones.map((zone) => (
+                  <TableRow
+                    key={zone.id}
+                    className="group cursor-pointer border-dashed hover:bg-muted/30"
+                    onClick={() => router.push(`/websites/${zone.id}`)}
+                  >
+                    <TableCell className="py-1 font-mono text-[11px] text-muted-foreground">
+                      {zone.id}
+                    </TableCell>
+                    <TableCell className="py-1 font-mono text-[11px] font-medium">
+                      {zone.domain}
+                    </TableCell>
+                    <TableCell className="py-1 font-mono text-[11px] text-muted-foreground">
+                      {zone.domain_count ?? 0}
+                    </TableCell>
+                    <TableCell className="py-1 font-mono text-[10px] whitespace-nowrap text-muted-foreground">
+                      {formatDateTime(zone.created_at)}
+                    </TableCell>
+                    <TableCell className="py-1 font-mono text-[10px] whitespace-nowrap text-muted-foreground">
+                      {formatDateTime(zone.updated_at)}
+                    </TableCell>
+                    <TableCell
+                      className="sticky right-0 z-10 bg-background py-1 text-center"
+                      onClick={(event) => event.stopPropagation()}
                     >
-                      <Link href={`/websites/${zone.id}`}>管理</Link>
+                      <div className="flex items-center justify-center gap-0.5">
-                    </Button>
+                        <Tooltip>
-                  </div>
+                          <TooltipTrigger asChild>
-                </div>
+                            <Button
-              ))}
+                              variant="ghost"
-            </div>
+                              size="icon"
-          )}
+                              className="h-6 w-6 text-muted-foreground hover:text-foreground"
-        </CardContent>
+                              asChild
-      </Card>
+                            >
+                              <Link href={`/websites/${zone.id}`}>
+                                <Eye className="size-3" />
+                                <span className="sr-only">管理</span>
+                              </Link>
+                            </Button>
+                          </TooltipTrigger>
+                          <TooltipContent side="top" className="text-xs">
+                            管理 Zone
+                          </TooltipContent>
+                        </Tooltip>
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </TooltipProvider>
+        </div>
+      )}
 
       <ZoneEditorDialog open={editorOpen} onOpenChange={setEditorOpen} />
     </div>

frontend/tests/zone/websites-page.test.tsx

@@ -11,6 +11,10 @@ vi.mock('next/link', () => ({
   ),
 }));
 
+vi.mock('next/navigation', () => ({
+  useRouter: () => ({push: vi.fn()}),
+}));
+
 vi.mock('@/lib/services/openflare', async (importOriginal) => {
   const actual = await importOriginal<typeof import('@/lib/services/openflare')>();
   return {...actual, ZoneService: {list: vi.fn()}};
@@ -46,9 +50,10 @@ describe('WebsitesPage', () => {
 
     renderPage();
 
-    expect(await screen.findByRole('heading', {name: 'arctel.de'})).toBeVisible();
+    expect(await screen.findByText('arctel.de')).toBeVisible();
-    expect(screen.getByText(/3 个域名/)).toBeVisible();
+    expect(screen.getByText('3')).toBeVisible();
-    expect(screen.getByText(/0 个域名/)).toBeVisible();
+    expect(screen.getByText('0')).toBeVisible();
+    expect(screen.getByRole('columnheader', {name: '根域'})).toBeVisible();
 
     fireEvent.change(screen.getByPlaceholderText('搜索 Zone 根域'), {
       target: {value: 'arctel'},

frontend/tests/zone/zone-page.test.tsx

@@ -14,7 +14,7 @@ vi.mock('next/link', () => ({
 }));
 
 vi.mock('next/navigation', () => ({
-  useRouter: () => ({replace: replaceMock}),
+  useRouter: () => ({replace: replaceMock, back: vi.fn()}),
   usePathname: () => '/websites/42',
   useSearchParams: () => new URLSearchParams(),
 }));