refactor(web): select route domains from zones

反代路由创建/域名配置改为绑定 zone_domain_ids，移除手写域名列表与
旧证书字段；列表与 WAF/UptimeKuma 消费端同步读取 zone_domains。

frontend/app/(main)/proxy-routes/detail/components/domain-list-input.tsx

@@ -1,262 +0,0 @@
-'use client';
-
-import {useId, useMemo} from 'react';
-import {Link2, Minus, Plus} from 'lucide-react';
-
-import {Badge} from '@/components/ui/badge';
-import {Button} from '@/components/ui/button';
-import {Input} from '@/components/ui/input';
-import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue,} from '@/components/ui/select';
-import type {TlsCertificateItem} from '@/lib/services/openflare';
-import {WebsiteService} from '@/lib/services/openflare';
-import {validateDomain} from '../../components/helpers';
-import type {DomainListRow} from '../helpers';
-
-function ensureRows(rows: DomainListRow[]) {
-  return rows.length > 0 ? rows : [{ domain: '', certificateId: '' }];
-}
-
-function buildSuggestionSources(domains: string[]) {
-  const values = new Set<string>();
-
-  for (const domain of domains) {
-    const normalized = domain.trim().toLowerCase().replace(/^\*\./, '');
-    if (!normalized) {
-      continue;
-    }
-
-    values.add(normalized);
-
-    const segments = normalized.split('.');
-    for (let index = 1; index < segments.length - 1; index += 1) {
-      values.add(segments.slice(index).join('.'));
-    }
-  }
-
-  return Array.from(values);
-}
-
-function buildDomainSuggestions(input: string, sources: string[], rows: DomainListRow[]) {
-  const normalizedInput = input.trim().toLowerCase();
-  if (!normalizedInput) {
-    return [];
-  }
-
-  const existingDomains = new Set(
-    rows
-      .map((row) => row.domain.trim().toLowerCase())
-      .filter((row) => row && row !== normalizedInput),
-  );
-  const suggestions: string[] = [];
-
-  for (const source of sources) {
-    if (source.startsWith(normalizedInput) && source !== normalizedInput) {
-      suggestions.push(source);
-    }
-
-    const separatorIndex = normalizedInput.lastIndexOf('.');
-    if (separatorIndex <= 0) {
-      continue;
-    }
-
-    const prefix = normalizedInput.slice(0, separatorIndex);
-    const suffixInput = normalizedInput.slice(separatorIndex + 1);
-
-    if (!suffixInput || source.startsWith(suffixInput)) {
-      suggestions.push(`${prefix}.${source}`);
-    }
-  }
-
-  return suggestions.filter((suggestion, index) => {
-    return (
-      suggestion !== normalizedInput &&
-      !existingDomains.has(suggestion) &&
-      suggestions.indexOf(suggestion) === index
-    );
-  });
-}
-
-interface DomainListInputProps {
-  rows: DomainListRow[];
-  onChange: (rows: DomainListRow[]) => void;
-  onBlur?: () => void;
-  suggestionSources?: string[];
-  certificates?: TlsCertificateItem[];
-  domainPlaceholder?: string;
-}
-
-export function DomainListInput({
-  rows,
-  onChange,
-  onBlur,
-  suggestionSources = [],
-  certificates = [],
-  domainPlaceholder = 'app.example.com',
-}: DomainListInputProps) {
-  const listId = useId();
-  const safeRows = ensureRows(rows);
-  const normalizedSources = useMemo(
-    () => buildSuggestionSources(suggestionSources),
-    [suggestionSources],
-  );
-
-  const updateRows = (nextRows: DomainListRow[]) => {
-    onChange(ensureRows(nextRows));
-  };
-
-  const applyManagedDomainCertificate = async (index: number, domain: string) => {
-    const normalized = domain.trim().toLowerCase();
-    if (!normalized || validateDomain(normalized)) {
-      return;
-    }
-
-    try {
-      const result = await WebsiteService.match(normalized);
-      if (!result.matched || !result.candidate?.certificate_id) {
-        return;
-      }
-
-      const nextRows = safeRows.slice();
-      if (!nextRows[index].certificateId) {
-        nextRows[index] = {
-          ...nextRows[index],
-          certificateId: String(result.candidate.certificate_id),
-        };
-        updateRows(nextRows);
-      }
-    } catch {
-      // Ignore match failures; user can still pick a certificate manually.
-    }
-  };
-
-  return (
-    <div className="space-y-4">
-      {safeRows.map((row, index) => {
-        const suggestions = buildDomainSuggestions(row.domain, normalizedSources, safeRows).slice(
-          0,
-          4,
-        );
-
-        return (
-          <div key={`${index}-${safeRows.length}`} className="space-y-2">
-            <div className="grid gap-3 md:grid-cols-[40px_minmax(0,1fr)_220px] md:items-start">
-              <Button
-                type="button"
-                variant="outline"
-                size="icon"
-                className="size-9 shrink-0"
-                disabled={safeRows.length === 1}
-                aria-label={`删除域名输入框 ${index + 1}`}
-                onClick={() => {
-                  if (safeRows.length === 1) {
-                    updateRows([{ domain: '', certificateId: '' }]);
-                    return;
-                  }
-                  updateRows(safeRows.filter((_, rowIndex) => rowIndex !== index));
-                }}
-              >
-                <Minus className="size-3.5" />
-              </Button>
-
-              <div className="min-w-0 space-y-2">
-                <Input
-                  value={row.domain}
-                  list={`${listId}-${index}`}
-                  aria-label={`域名 ${index + 1}`}
-                  placeholder={index === 0 ? domainPlaceholder : 'www.example.com'}
-                  onBlur={() => {
-                    onBlur?.();
-                    void applyManagedDomainCertificate(index, row.domain);
-                  }}
-                  onChange={(event) => {
-                    const nextRows = safeRows.slice();
-                    nextRows[index] = {
-                      ...nextRows[index],
-                      domain: event.target.value,
-                    };
-                    updateRows(nextRows);
-                  }}
-                />
-                <datalist id={`${listId}-${index}`}>
-                  {suggestions.map((suggestion) => (
-                    <option key={suggestion} value={suggestion} />
-                  ))}
-                </datalist>
-
-                {suggestions.length > 0 ? (
-                  <div className="flex flex-wrap gap-1.5">
-                    {suggestions.map((suggestion) => (
-                      <button
-                        key={suggestion}
-                        type="button"
-                        className="rounded-full border px-2.5 py-0.5 text-[11px] text-muted-foreground transition hover:border-primary hover:text-foreground"
-                        onClick={() => {
-                          const nextRows = safeRows.slice();
-                          nextRows[index] = {
-                            ...nextRows[index],
-                            domain: suggestion,
-                          };
-                          updateRows(nextRows);
-                          void applyManagedDomainCertificate(index, suggestion);
-                        }}
-                      >
-                        {suggestion}
-                      </button>
-                    ))}
-                  </div>
-                ) : null}
-              </div>
-
-              <Select
-                value={row.certificateId || 'none'}
-                onValueChange={(value) => {
-                  const nextRows = safeRows.slice();
-                  nextRows[index] = {
-                    ...nextRows[index],
-                    certificateId: value === 'none' ? '' : value,
-                  };
-                  updateRows(nextRows);
-                }}
-              >
-                <SelectTrigger className="h-9 w-full">
-                  <SelectValue
-                    placeholder={certificates.length === 0 ? '暂无可选证书' : '选择证书'}
-                  />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="none">
-                    {certificates.length === 0 ? '暂无可选证书' : '不绑定证书'}
-                  </SelectItem>
-                  {certificates.map((certificate) => (
-                    <SelectItem key={certificate.id} value={String(certificate.id)}>
-                      {certificate.name}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
-          </div>
-        );
-      })}
-
-      <div className="flex flex-wrap items-center gap-2">
-        <Button
-          type="button"
-          variant="outline"
-          size="sm"
-          className="h-8 gap-1.5 text-xs"
-          onClick={() => {
-            updateRows([...safeRows, { domain: '', certificateId: '' }]);
-          }}
-        >
-          <Plus className="size-3.5" />
-          添加域名
-        </Button>
-        <Badge variant="outline" className="gap-1 text-[10px] font-normal">
-          <Link2 className="size-3" />
-          输入域名后将自动匹配托管域名证书
-        </Badge>
-      </div>
-    </div>
-  );
-}

frontend/app/(main)/proxy-routes/detail/components/domain-section.tsx

@@ -10,17 +10,12 @@ import {Form, FormControl, FormDescription, FormField, FormItem, FormLabel, Form
 import {Input} from '@/components/ui/input';
 import {Switch} from '@/components/ui/switch';
 import type {ProxyRouteItem} from '@/lib/services/openflare';
-import {TlsCertificateService, WebsiteService} from '@/lib/services/openflare';
+import {ZoneService, zoneQueryKey} from '@/lib/services/openflare';
 
-import {validateDomains} from '../../components/helpers';
-import {
-  buildDomainCertificateIDs,
-  buildDomainRows,
-  normalizeSelectedCertificateIDs,
-  proxyRouteFormIds,
-} from '../helpers';
+import {listAllZoneDomains} from '../../components/helpers';
+import {ZoneDomainSelector} from '../../components/zone-domain-selector';
+import {proxyRouteFormIds} from '../helpers';
 import {useRouteSectionSave} from '../hooks/use-route-section-save';
-import {DomainListInput} from './domain-list-input';
 import {SectionShell} from './section-shell';
 
 const domainSettingsSchema = z
@@ -30,42 +25,9 @@ const domainSettingsSchema = z
       .trim()
       .min(1, '请输入站点标识')
       .max(255, '站点标识不能超过 255 个字符'),
-    domain_rows: z
-      .array(
-        z.object({
-          domain: z.string(),
-          certificateId: z.string(),
-        }),
-      )
-      .min(1),
+    zone_domain_ids: z.array(z.number().int().positive()).min(1, '请至少选择一个域名'),
     enabled: z.boolean(),
     redirect_http: z.boolean(),
-  })
-  .superRefine((value, context) => {
-    const domains = value.domain_rows
-      .map((item) => item.domain.trim().toLowerCase())
-      .filter(Boolean);
-    const error = validateDomains(domains);
-    if (error) {
-      context.addIssue({
-        code: z.ZodIssueCode.custom,
-        path: ['domain_rows'],
-        message: error,
-      });
-    }
-
-    const selectedCertificateCount = new Set(
-      value.domain_rows
-        .map((item) => Number(item.certificateId))
-        .filter((item) => Number.isFinite(item) && item > 0),
-    ).size;
-    if (value.redirect_http && selectedCertificateCount === 0) {
-      context.addIssue({
-        code: z.ZodIssueCode.custom,
-        path: ['redirect_http'],
-        message: '启用 HTTP 跳转前，请先为域名选择证书',
-      });
-    }
   });
 
 type DomainSettingsValues = z.infer<typeof domainSettingsSchema>;
@@ -79,21 +41,21 @@ interface DomainSectionProps {
 export function DomainSection({ route, onRouteUpdate, onSavingChange }: DomainSectionProps) {
   const { saving, save } = useRouteSectionSave(route, onRouteUpdate, onSavingChange);
 
-  const certificatesQuery = useQuery({
-    queryKey: ['openflare', 'tls-certificates'],
-    queryFn: () => TlsCertificateService.list(),
+  const zonesQuery = useQuery({
+    queryKey: zoneQueryKey,
+    queryFn: () => ZoneService.list(),
   });
 
-  const managedDomainsQuery = useQuery({
-    queryKey: ['openflare', 'managed-domains'],
-    queryFn: () => WebsiteService.list(),
+  const domainsQuery = useQuery({
+    queryKey: [...zoneQueryKey, 'all-domains'],
+    queryFn: () => listAllZoneDomains(),
   });
 
   const form = useForm<DomainSettingsValues>({
     resolver: zodResolver(domainSettingsSchema),
     defaultValues: {
       site_name: route.site_name,
-      domain_rows: buildDomainRows(route),
+      zone_domain_ids: route.zone_domain_ids ?? [],
       enabled: route.enabled,
       redirect_http: route.redirect_http,
     },
@@ -102,26 +64,47 @@ export function DomainSection({ route, onRouteUpdate, onSavingChange }: DomainSe
   useEffect(() => {
     form.reset({
       site_name: route.site_name,
-      domain_rows: buildDomainRows(route),
+      zone_domain_ids: route.zone_domain_ids ?? [],
       enabled: route.enabled,
       redirect_http: route.redirect_http,
     });
   }, [form, route]);
 
-  const domainSuggestionSources = useMemo(
-    () => [
-      ...(route.domains ?? []),
-      ...(managedDomainsQuery.data?.map((item) => item.domain) ?? []),
-    ],
-    [managedDomainsQuery.data, route.domains],
-  );
+  const selectedIDs = form.watch('zone_domain_ids');
+  const selectedDomains = useMemo(() => {
+    const fromApi = domainsQuery.data ?? [];
+    const byId = new Map(fromApi.map((domain) => [domain.id, domain]));
+    // Prefer live catalog; fall back to route-bound domains for display before catalog loads.
+    return selectedIDs
+      .map((id) => {
+        const catalog = byId.get(id);
+        if (catalog) {
+          return catalog;
+        }
+        const bound = (route.zone_domains ?? []).find((item) => item.id === id);
+        if (!bound) {
+          return null;
+        }
+        return {
+          id: bound.id,
+          zone_id: bound.zone_id,
+          proxy_route_id: route.id,
+          domain: bound.domain,
+          cert_id: bound.cert_id,
+          remark: '',
+          created_at: '',
+          updated_at: '',
+        };
+      })
+      .filter((item): item is NonNullable<typeof item> => item != null);
+  }, [domainsQuery.data, route.id, route.zone_domains, selectedIDs]);
 
-  const selectedCertificateIDs = normalizeSelectedCertificateIDs(form.watch('domain_rows'));
+  const hasCertificate = selectedDomains.some((domain) => domain.cert_id != null);
 
   return (
     <SectionShell
       title="域名设置"
-      description="在一个列表里同时维护域名、证书和 HTTPS 跳转。保存时会自动汇总站点证书集合。"
+      description="绑定已在 Zone 中注册的 FQDN。证书请在 Zone 域名管理中维护。"
       formId={proxyRouteFormIds.domains}
       saving={saving}
     >
@@ -130,23 +113,20 @@ export function DomainSection({ route, onRouteUpdate, onSavingChange }: DomainSe
           id={proxyRouteFormIds.domains}
           className="space-y-5"
           onSubmit={form.handleSubmit(async (values) => {
-            const domains = values.domain_rows
-              .map((item) => item.domain.trim().toLowerCase())
-              .filter(Boolean);
-            const domainCertIDs = buildDomainCertificateIDs(values.domain_rows);
-            const certIDs = normalizeSelectedCertificateIDs(values.domain_rows);
+            if (values.redirect_http && !hasCertificate) {
+              form.setError('redirect_http', {
+                message: '启用 HTTP 跳转前，请先为所选域名绑定证书（在 Zone 中配置）',
+              });
+              return;
+            }
 
             await save(
               {
                 site_name: values.site_name.trim(),
-                domain: domains[0],
-                domains,
+                zone_domain_ids: values.zone_domain_ids,
                 enabled: values.enabled,
-                enable_https: certIDs.length > 0,
-                cert_id: certIDs[0] ?? null,
-                cert_ids: certIDs,
-                domain_cert_ids: domainCertIDs,
-                redirect_http: certIDs.length > 0 ? values.redirect_http : false,
+                enable_https: hasCertificate,
+                redirect_http: hasCertificate ? values.redirect_http : false,
               },
               '域名设置已保存',
             );
@@ -185,21 +165,22 @@ export function DomainSection({ route, onRouteUpdate, onSavingChange }: DomainSe
 
           <FormField
             control={form.control}
-            name="domain_rows"
+            name="zone_domain_ids"
             render={({ field }) => (
               <FormItem>
-                <FormLabel>域名列表</FormLabel>
+                <FormLabel>绑定域名</FormLabel>
                 <FormControl>
-                  <DomainListInput
-                    rows={field.value}
+                  <ZoneDomainSelector
+                    value={field.value}
                     onChange={field.onChange}
-                    onBlur={field.onBlur}
-                    suggestionSources={domainSuggestionSources}
-                    certificates={certificatesQuery.data ?? []}
+                    domains={domainsQuery.data ?? []}
+                    zones={zonesQuery.data ?? []}
+                    currentRouteId={route.id}
+                    disabled={domainsQuery.isLoading}
                   />
                 </FormControl>
                 <FormDescription>
-                  每行配置一个域名。可为不同域名选择不同证书，托管域名将自动匹配证书。
+                  仅选择绑定关系；证书与 FQDN 请到对应 Zone 详情页管理。
                 </FormDescription>
                 <FormMessage />
               </FormItem>
@@ -214,15 +195,15 @@ export function DomainSection({ route, onRouteUpdate, onSavingChange }: DomainSe
                 <div className="space-y-0.5">
                   <FormLabel>HTTP 自动跳转到 HTTPS</FormLabel>
                   <FormDescription>
-                    {selectedCertificateIDs.length > 0
+                    {hasCertificate
                       ? '开启后会额外生成 80 端口重定向规则。'
-                      : '至少为一个域名选择证书后才能启用。'}
+                      : '所选域名至少绑定一张证书后才能启用。'}
                   </FormDescription>
                 </div>
                 <FormControl>
                   <Switch
                     checked={field.value}
-                    disabled={selectedCertificateIDs.length === 0}
+                    disabled={!hasCertificate}
                     onCheckedChange={field.onChange}
                   />
                 </FormControl>