feat(web): improve zone domain list and detail navigation

合并 Zone 域名与路由展示，上游地址多行显示并支持路由详情跳转；
域名列表对齐用户管理页样式；Zone 页支持 ?tab= 定位；反代详情返回
使用浏览器历史上一级。

frontend/app/(main)/websites/[zoneId]/components/zone-domains-table.tsx

@@ -1,8 +1,9 @@
 'use client';
 
-import {useState} from 'react';
+import Link from 'next/link';
+import {useMemo, useState} from 'react';
 import {useMutation} from '@tanstack/react-query';
-import {MoreHorizontal, Pencil, Plus, Trash2} from 'lucide-react';
+import {Eye, Pencil, Plus, Trash2} from 'lucide-react';
 import {toast} from 'sonner';
 
 import {
@@ -16,27 +17,32 @@ import {
   AlertDialogTitle,
 } from '@/components/ui/alert-dialog';
 import {Button} from '@/components/ui/button';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
 import {EmptyStateWithBorder} from '@/components/layout/empty';
 import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow} from '@/components/ui/table';
-import {ZoneDomainService, type TlsCertificateItem, type ZoneDomainItem} from '@/lib/services/openflare';
+import {Tooltip, TooltipContent, TooltipProvider, TooltipTrigger} from '@/components/ui/tooltip';
+import {
+  ZoneDomainService,
+  type ProxyRouteItem,
+  type TlsCertificateItem,
+  type ZoneDomainItem,
+} from '@/lib/services/openflare';
 
+import {getUpstreamLabels} from '../../../proxy-routes/components/helpers';
 import {ZoneDomainDialog} from './zone-domain-dialog';
 
 export function ZoneDomainsTable({
   zoneId,
   domains,
   certificates,
+  routes,
+  routesLoading = false,
   onChanged,
 }: {
   zoneId: number;
   domains: ZoneDomainItem[];
   certificates: TlsCertificateItem[];
+  routes: ProxyRouteItem[];
+  routesLoading?: boolean;
   onChanged(): Promise<unknown> | void;
 }) {
   const [editing, setEditing] = useState<ZoneDomainItem | null | undefined>(undefined);
@@ -52,12 +58,24 @@ export function ZoneDomainsTable({
     onError: (error) => toast.error(error instanceof Error ? error.message : '删除失败'),
   });
 
-  const certificateMap = new Map(certificates.map((certificate) => [certificate.id, certificate]));
+  const certificateMap = useMemo(
+    () => new Map(certificates.map((certificate) => [certificate.id, certificate])),
+    [certificates],
+  );
+  const routeMap = useMemo(
+    () => new Map(routes.map((route) => [route.id, route])),
+    [routes],
+  );
 
   return (
     <>
-      <div className="mb-4 flex justify-end">
-        <Button size="sm" className="h-7 text-xs" onClick={() => setEditing(null)}>
+      <div className="mb-3 flex justify-end">
+        <Button
+          variant="secondary"
+          size="sm"
+          className="h-7 text-xs"
+          onClick={() => setEditing(null)}
+        >
           <Plus className="mr-1 size-3.5" />
           添加域名
         </Button>
@@ -66,62 +84,151 @@ export function ZoneDomainsTable({
       {domains.length === 0 ? (
         <EmptyStateWithBorder description="暂无已添加域名" />
       ) : (
-        <div className="rounded-lg border">
-          <Table>
-            <TableHeader>
-              <TableRow>
-                <TableHead>FQDN</TableHead>
-                <TableHead>证书</TableHead>
-                <TableHead>关联路由</TableHead>
-                <TableHead>备注</TableHead>
-                <TableHead className="w-12" />
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {domains.map((domain) => (
-                <TableRow key={domain.id}>
-                  <TableCell className="font-medium">{domain.domain}</TableCell>
-                  <TableCell className="text-muted-foreground">
-                    {domain.cert_id
-                      ? (certificateMap.get(domain.cert_id)?.name ?? `证书 #${domain.cert_id}`)
-                      : '未绑定'}
-                  </TableCell>
-                  <TableCell>
-                    {domain.proxy_route_id ? `#${domain.proxy_route_id}` : '未关联'}
-                  </TableCell>
-                  <TableCell className="max-w-48 truncate text-muted-foreground">
-                    {domain.remark || '—'}
-                  </TableCell>
-                  <TableCell>
-                    <DropdownMenu>
-                      <DropdownMenuTrigger asChild>
-                        <Button
-                          variant="ghost"
-                          size="icon-sm"
-                          aria-label={`操作 ${domain.domain}`}
-                        >
-                          <MoreHorizontal />
-                        </Button>
-                      </DropdownMenuTrigger>
-                      <DropdownMenuContent align="end">
-                        <DropdownMenuItem onClick={() => setEditing(domain)}>
-                          <Pencil />
-                          编辑
-                        </DropdownMenuItem>
-                        <DropdownMenuItem
-                          variant="destructive"
-                          onClick={() => setDeleting(domain)}
-                        >
-                          <Trash2 />
-                          删除
-                        </DropdownMenuItem>
-                      </DropdownMenuContent>
-                    </DropdownMenu>
-                  </TableCell>
+        <div className="overflow-hidden rounded-lg border border-dashed shadow-none">
+          <TooltipProvider delayDuration={0}>
+            <Table className="w-full min-w-full caption-bottom text-sm">
+              <TableHeader className="sticky top-0 z-20 bg-background">
+                <TableRow className="border-b border-dashed hover:bg-transparent">
+                  <TableHead className="h-8 whitespace-nowrap py-2 min-w-[160px]">
+                    FQDN
+                  </TableHead>
+                  <TableHead className="h-8 whitespace-nowrap py-2 min-w-[120px]">
+                    证书
+                  </TableHead>
+                  <TableHead className="h-8 whitespace-nowrap py-2 min-w-[200px]">
+                    上游
+                  </TableHead>
+                  <TableHead className="h-8 whitespace-nowrap py-2 min-w-[120px]">
+                    备注
+                  </TableHead>
+                  <TableHead className="sticky right-0 z-10 h-8 w-[110px] bg-background py-2 text-center">
+                    操作
+                  </TableHead>
                 </TableRow>
-              ))}
-            </TableBody>
-          </Table>
+              </TableHeader>
+              <TableBody>
+                {domains.map((domain) => {
+                  const route =
+                    domain.proxy_route_id != null
+                      ? routeMap.get(domain.proxy_route_id)
+                      : undefined;
+                  const upstreams = route ? getUpstreamLabels(route) : [];
+                  const certLabel = domain.cert_id
+                    ? (certificateMap.get(domain.cert_id)?.name ?? `证书 #${domain.cert_id}`)
+                    : '未绑定';
+
+                  return (
+                    <TableRow
+                      key={domain.id}
+                      className="group border-dashed hover:bg-muted/30"
+                    >
+                      <TableCell className="py-1">
+                        <span
+                          className="max-w-[220px] truncate text-[11px] font-medium leading-tight"
+                          title={domain.domain}
+                        >
+                          {domain.domain}
+                        </span>
+                      </TableCell>
+                      <TableCell className="py-1 font-mono text-[10px] whitespace-nowrap text-muted-foreground">
+                        {certLabel}
+                      </TableCell>
+                      <TableCell className="max-w-[280px] py-1">
+                        {!domain.proxy_route_id ? (
+                          <span className="font-mono text-[10px] text-muted-foreground">
+                            未关联路由
+                          </span>
+                        ) : routesLoading && !route ? (
+                          <span className="font-mono text-[10px] text-muted-foreground">
+                            加载中…
+                          </span>
+                        ) : upstreams.length === 0 ? (
+                          <span className="font-mono text-[10px] text-muted-foreground">
+                            未配置上游
+                          </span>
+                        ) : (
+                          <div className="flex flex-col gap-0">
+                            {upstreams.map((upstream) => (
+                              <span
+                                key={upstream}
+                                className="truncate font-mono text-[10px] leading-tight text-muted-foreground"
+                                title={upstream}
+                              >
+                                {upstream}
+                              </span>
+                            ))}
+                          </div>
+                        )}
+                      </TableCell>
+                      <TableCell className="max-w-[160px] truncate py-1 font-mono text-[10px] text-muted-foreground">
+                        {domain.remark || '—'}
+                      </TableCell>
+                      <TableCell
+                        className="sticky right-0 z-10 bg-background py-1 text-center"
+                        onClick={(event) => event.stopPropagation()}
+                      >
+                        <div className="flex items-center justify-center gap-0.5">
+                          {domain.proxy_route_id ? (
+                            <Tooltip>
+                              <TooltipTrigger asChild>
+                                <Button
+                                  variant="ghost"
+                                  size="icon"
+                                  className="h-6 w-6 text-muted-foreground hover:text-foreground"
+                                  asChild
+                                >
+                                  <Link
+                                    href={`/proxy-routes/detail?id=${domain.proxy_route_id}`}
+                                  >
+                                    <Eye className="size-3" />
+                                  </Link>
+                                </Button>
+                              </TooltipTrigger>
+                              <TooltipContent side="top" className="text-xs">
+                                查看路由详情
+                              </TooltipContent>
+                            </Tooltip>
+                          ) : null}
+
+                          <Tooltip>
+                            <TooltipTrigger asChild>
+                              <Button
+                                variant="ghost"
+                                size="icon"
+                                className="h-6 w-6 text-muted-foreground hover:text-foreground"
+                                onClick={() => setEditing(domain)}
+                              >
+                                <Pencil className="size-3" />
+                              </Button>
+                            </TooltipTrigger>
+                            <TooltipContent side="top" className="text-xs">
+                              编辑域名
+                            </TooltipContent>
+                          </Tooltip>
+
+                          <Tooltip>
+                            <TooltipTrigger asChild>
+                              <Button
+                                variant="ghost"
+                                size="icon"
+                                className="h-6 w-6 text-muted-foreground hover:text-destructive"
+                                onClick={() => setDeleting(domain)}
+                              >
+                                <Trash2 className="size-3" />
+                              </Button>
+                            </TooltipTrigger>
+                            <TooltipContent side="top" className="text-xs">
+                              删除域名
+                            </TooltipContent>
+                          </Tooltip>
+                        </div>
+                      </TableCell>
+                    </TableRow>
+                  );
+                })}
+              </TableBody>
+            </Table>
+          </TooltipProvider>
         </div>
       )}
 

frontend/app/(main)/websites/[zoneId]/components/zone-route-summary.tsx

@@ -1,9 +0,0 @@
-import {EmptyStateWithBorder} from '@/components/layout/empty'
-import {Card, CardContent, CardDescription, CardHeader, CardTitle} from '@/components/ui/card'
-import type {ZoneDomainItem} from '@/lib/services/openflare'
-import {Route} from 'lucide-react'
-
-export function ZoneRouteSummary({domains}: {domains: ZoneDomainItem[]}) {
-  const groups = Map.groupBy(domains.filter((domain) => domain.proxy_route_id !== null), (domain) => domain.proxy_route_id!)
-  return <Card className="shadow-none"><CardHeader><CardTitle className="text-base">路由关联</CardTitle><CardDescription>域名只能关联一个反代路由；路由可关联多个 Zone 域名。</CardDescription></CardHeader><CardContent>{groups.size === 0 ? <EmptyStateWithBorder icon={Route} description="暂无关联反代路由。" /> : <div className="space-y-3">{[...groups].map(([routeID, items]) => <div key={routeID} className="rounded-lg border p-3"><p className="text-sm font-semibold">路由 #{routeID}</p><p className="mt-1 text-xs text-muted-foreground">{items.map((item) => item.domain).join(' · ')}</p></div>)}</div>}</CardContent></Card>
-}