refactor(repo): consolidate openflare-server to root and move subprojects to internal/apps

- Merge all files inside openflare-server to the repository root directory. - Relocate agent, relay, and flared subprojects from internal/ to internal/apps/. - Combine docker-compose files and update build context paths to root. - Update GitHub workflows and Dockerfiles to refer to new directories and package names. - Rewrite Go package imports across all files. - Resolve database renew test race condition and clean up docs.
2026-10-12 02:06:37 +08:00 · 2026-06-19 14:23:29 +08:00
parent 19d476ed7f
commit 63cd906cfc
1064 changed files with 366 additions and 1397 deletions
@@ -0,0 +1,314 @@
+'use client';
+
+import {zodResolver} from '@hookform/resolvers/zod';
+import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query';
+import {useEffect, useState} from 'react';
+import {useForm} from 'react-hook-form';
+import {ChevronDown, Loader2} from 'lucide-react';
+
+import {Button} from '@/components/ui/button';
+import {Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle,} from '@/components/ui/dialog';
+import {Input} from '@/components/ui/input';
+import {Label} from '@/components/ui/label';
+import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue,} from '@/components/ui/select';
+import {Switch} from '@/components/ui/switch';
+import {Textarea} from '@/components/ui/textarea';
+import type {TlsCertificateItem} from '@/lib/services/openflare';
+import {DnsAccountService, TlsCertificateService} from '@/lib/services/openflare';
+
+import {type AcmeApplyFormValues, acmeApplySchema, defaultAcmeApplyValues,} from './schemas';
+import {getErrorMessage} from './website-utils';
+
+const certificatesQueryKey = ['openflare', 'tls-certificates'];
+
+type CertificateApplyMode = 'create' | 'edit-acme' | 'convert-upload';
+
+interface CertificateApplyDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onApplied?: (certificate: TlsCertificateItem) => void;
+  mode?: CertificateApplyMode;
+  certificate?: TlsCertificateItem | null;
+}
+
+export function CertificateApplyDialog({
+  open,
+  onOpenChange,
+  onApplied,
+  mode = 'create',
+  certificate,
+}: CertificateApplyDialogProps) {
+  const queryClient = useQueryClient();
+  const [error, setError] = useState('');
+  const [showAdvanced, setShowAdvanced] = useState(false);
+
+  const dnsAccountsQuery = useQuery({
+    queryKey: ['openflare', 'dns-accounts'],
+    queryFn: () => DnsAccountService.list(),
+    enabled: open,
+  });
+
+  const defaultAcmeAccountQuery = useQuery({
+    queryKey: ['openflare', 'acme-accounts', 'default'],
+    queryFn: () => TlsCertificateService.getDefaultAcmeAccount(),
+    enabled: open,
+  });
+
+  const form = useForm<AcmeApplyFormValues>({
+    resolver: zodResolver(acmeApplySchema),
+    defaultValues: defaultAcmeApplyValues,
+  });
+
+  useEffect(() => {
+    if (!open) return;
+    setError('');
+    setShowAdvanced(false);
+
+    if (certificate) {
+      form.reset({
+        name: certificate.name,
+        primary_domain:
+          mode === 'convert-upload' ? '' : certificate.primary_domain || '',
+        other_domains:
+          mode === 'convert-upload' ? '' : certificate.other_domains || '',
+        remark: certificate.remark || '',
+        acme_account_id:
+          mode === 'convert-upload' ? 0 : certificate.acme_account_id,
+        dns_account_id:
+          mode === 'convert-upload' ? 0 : certificate.dns_account_id,
+        key_algorithm: certificate.key_algorithm || 'EC256',
+        auto_renew: mode === 'convert-upload' ? true : certificate.auto_renew,
+        dns1: mode === 'convert-upload' ? '' : certificate.dns1 || '',
+        dns2: mode === 'convert-upload' ? '' : certificate.dns2 || '',
+        disable_cname:
+          mode === 'convert-upload' ? false : certificate.disable_cname,
+        skip_dns: mode === 'convert-upload' ? false : certificate.skip_dns,
+      });
+      if (
+        mode !== 'convert-upload' &&
+        (certificate.dns1 ||
+          certificate.dns2 ||
+          certificate.disable_cname ||
+          certificate.skip_dns)
+      ) {
+        setShowAdvanced(true);
+      }
+    } else {
+      form.reset(defaultAcmeApplyValues);
+    }
+  }, [certificate, form, mode, open]);
+
+  useEffect(() => {
+    if (defaultAcmeAccountQuery.data && form.getValues('acme_account_id') === 0) {
+      form.setValue('acme_account_id', defaultAcmeAccountQuery.data.id);
+    }
+  }, [defaultAcmeAccountQuery.data, form, open]);
+
+  const applyMutation = useMutation({
+    mutationFn: (values: AcmeApplyFormValues) => {
+      if (mode === 'edit-acme' && certificate) {
+        return TlsCertificateService.updateAcme(certificate.id, values);
+      }
+      if (mode === 'convert-upload' && certificate) {
+        return TlsCertificateService.convertToAcme(certificate.id, values);
+      }
+      return TlsCertificateService.apply(values);
+    },
+    onSuccess: async (result) => {
+      await queryClient.invalidateQueries({queryKey: certificatesQueryKey});
+      onApplied?.(result);
+      onOpenChange(false);
+    },
+    onError: (err) => setError(getErrorMessage(err)),
+  });
+
+  const title =
+    mode === 'edit-acme'
+      ? '编辑并重新申请证书'
+      : mode === 'convert-upload'
+        ? '转换为申请证书'
+        : '申请证书';
+
+  const description =
+    mode === 'edit-acme'
+      ? '修改 ACME 证书配置。保存后将使用新配置重新申请证书。'
+      : mode === 'convert-upload'
+        ? '填写 ACME 申请资料。申请成功后，当前手动证书会原地转换为可自动续签的申请证书。'
+        : "使用 ACME (Let's Encrypt 等) 自动申请和续期证书，支持通配符域名。";
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          <DialogDescription>{description}</DialogDescription>
+        </DialogHeader>
+
+        <form
+          className="space-y-4"
+          onSubmit={form.handleSubmit((values) => {
+            setError('');
+            applyMutation.mutate(values);
+          })}
+        >
+          {error ? <p className="text-sm text-destructive">{error}</p> : null}
+
+          <div className="grid gap-4 md:grid-cols-2">
+            <div className="space-y-2">
+              <Label>证书名称</Label>
+              <Input placeholder="例如：主站证书" {...form.register('name')} />
+            </div>
+            <div className="space-y-2">
+              <Label>主域名</Label>
+              <Input
+                placeholder="example.com 或 *.example.com"
+                {...form.register('primary_domain')}
+              />
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <Label>其他域名</Label>
+            <Textarea
+              rows={3}
+              placeholder="example.net"
+              {...form.register('other_domains')}
+            />
+            <p className="text-xs text-muted-foreground">
+              每行一个域名。如申请通配符证书，请填写对应的根域名以便一并签发。
+            </p>
+          </div>
+
+          <div className="grid gap-4 md:grid-cols-2">
+            <div className="space-y-2">
+              <Label>DNS 服务商账号</Label>
+              <Select
+                value={String(form.watch('dns_account_id') || 0)}
+                onValueChange={(value) =>
+                  form.setValue('dns_account_id', Number(value), {shouldValidate: true})
+                }
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="请选择 DNS 账号" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="0">请选择 DNS 账号</SelectItem>
+                  {dnsAccountsQuery.data?.map((account) => (
+                    <SelectItem key={account.id} value={String(account.id)}>
+                      {account.name} ({account.type})
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="space-y-2">
+              <Label>密钥算法</Label>
+              <Select
+                value={form.watch('key_algorithm')}
+                onValueChange={(value) => form.setValue('key_algorithm', value)}
+              >
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="RSA2048">RSA 2048</SelectItem>
+                  <SelectItem value="RSA4096">RSA 4096</SelectItem>
+                  <SelectItem value="EC256">ECC 256</SelectItem>
+                  <SelectItem value="EC384">ECC 384</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <Label>备注</Label>
+            <Input placeholder="可选，用于记录证书用途。" {...form.register('remark')} />
+          </div>
+
+          <div className="flex items-center justify-between rounded-lg border px-3 py-2">
+            <div>
+              <p className="text-sm font-medium">开启自动续签</p>
+              <p className="text-xs text-muted-foreground">
+                开启后，将在证书过期前 7 天自动续期。
+              </p>
+            </div>
+            <Switch
+              checked={form.watch('auto_renew')}
+              onCheckedChange={(checked) => form.setValue('auto_renew', checked)}
+            />
+          </div>
+
+          <div className="overflow-hidden rounded-lg border">
+            <Button
+              type="button"
+              variant="ghost"
+              className="w-full justify-between rounded-none"
+              onClick={() => setShowAdvanced((current) => !current)}
+            >
+              高级选项
+              <ChevronDown
+                className={`size-4 transition-transform ${showAdvanced ? 'rotate-180' : ''}`}
+              />
+            </Button>
+            {showAdvanced ? (
+              <div className="space-y-4 border-t p-3">
+                <div className="grid gap-4 md:grid-cols-2">
+                  <div className="space-y-2">
+                    <Label>DNS 验证服务器 1</Label>
+                    <Input placeholder="为空则使用默认权威 DNS" {...form.register('dns1')} />
+                  </div>
+                  <div className="space-y-2">
+                    <Label>DNS 验证服务器 2</Label>
+                    <Input placeholder="为空则使用默认权威 DNS" {...form.register('dns2')} />
+                  </div>
+                </div>
+                <div className="grid gap-4 md:grid-cols-2">
+                  <div className="flex items-center justify-between rounded-lg border px-3 py-2">
+                    <div>
+                      <p className="text-sm font-medium">跳过 CNAME 检查</p>
+                      <p className="text-xs text-muted-foreground">
+                        在执行 DNS-01 验证时不追踪 CNAME 记录。
+                      </p>
+                    </div>
+                    <Switch
+                      checked={form.watch('disable_cname')}
+                      onCheckedChange={(checked) => form.setValue('disable_cname', checked)}
+                    />
+                  </div>
+                  <div className="flex items-center justify-between rounded-lg border px-3 py-2">
+                    <div>
+                      <p className="text-sm font-medium">跳过 DNS 前置检查</p>
+                      <p className="text-xs text-muted-foreground">
+                        直接请求 Let&apos;s Encrypt 验证而不做本地校验。
+                      </p>
+                    </div>
+                    <Switch
+                      checked={form.watch('skip_dns')}
+                      onCheckedChange={(checked) => form.setValue('skip_dns', checked)}
+                    />
+                  </div>
+                </div>
+              </div>
+            ) : null}
+          </div>
+
+          <Button type="submit" disabled={applyMutation.isPending}>
+            {applyMutation.isPending ? (
+              <>
+                <Loader2 className="mr-1 size-3.5 animate-spin" />
+                提交中...
+              </>
+            ) : mode === 'edit-acme' ? (
+              '保存并申请'
+            ) : mode === 'convert-upload' ? (
+              '开始转换'
+            ) : (
+              '开始申请'
+            )}
+          </Button>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
@@ -0,0 +1,189 @@
+'use client';
+
+import {useQuery} from '@tanstack/react-query';
+import {Copy, Loader2} from 'lucide-react';
+import {toast} from 'sonner';
+
+import {Button} from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import {EmptyStateWithBorder} from '@/components/layout/empty';
+import {ErrorInline} from '@/components/layout/error';
+import {LoadingStateWithBorder} from '@/components/layout/loading';
+import {TlsCertificateService} from '@/lib/services/openflare';
+import {formatDateTime} from '@/lib/utils';
+
+import {WebsiteStatusBadge} from './status-badge';
+import {getCertificateStatus, getErrorMessage} from './website-utils';
+
+interface CertificateDetailDialogProps {
+  certificateId: number | null;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onEdit: () => void;
+  onDelete: () => void;
+  deleting?: boolean;
+}
+
+export function CertificateDetailDialog({
+  certificateId,
+  open,
+  onOpenChange,
+  onEdit,
+  onDelete,
+  deleting = false,
+}: CertificateDetailDialogProps) {
+  const certificateQuery = useQuery({
+    queryKey: ['openflare', 'tls-certificates', 'detail', certificateId],
+    queryFn: () => TlsCertificateService.getById(certificateId as number),
+    enabled: open && certificateId !== null,
+  });
+
+  const contentQuery = useQuery({
+    queryKey: ['openflare', 'tls-certificates', 'content', certificateId],
+    queryFn: () => TlsCertificateService.getContent(certificateId as number),
+    enabled: open && certificateId !== null,
+  });
+
+  const certificate = certificateQuery.data;
+  const content = contentQuery.data;
+  const status = certificate ? getCertificateStatus(certificate) : null;
+  const loading = certificateQuery.isLoading || contentQuery.isLoading;
+  const hasError = certificateQuery.isError || contentQuery.isError;
+
+  const handleCopy = async (value: string, message: string) => {
+    try {
+      await navigator.clipboard.writeText(value);
+      toast.success(message);
+    } catch (error) {
+      toast.error(getErrorMessage(error));
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-3xl max-h-[90vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle>证书详情</DialogTitle>
+          <DialogDescription>
+            查看证书元信息、备注以及当前保存的 PEM 内容。
+          </DialogDescription>
+        </DialogHeader>
+
+        {loading ? (
+          <LoadingStateWithBorder description="加载证书详情中..." />
+        ) : hasError ? (
+          <ErrorInline
+            message={getErrorMessage(certificateQuery.error ?? contentQuery.error)}
+            className="justify-center"
+          />
+        ) : !certificate || !content ? (
+          <EmptyStateWithBorder description="证书不存在，可能已被删除。" />
+        ) : (
+          <div className="space-y-4">
+            <div className="grid gap-3 md:grid-cols-2">
+              <div className="rounded-lg border p-3">
+                <p className="text-[10px] uppercase tracking-wider text-muted-foreground">
+                  证书名称
+                </p>
+                <p className="mt-1 text-sm">{certificate.name}</p>
+              </div>
+              <div className="rounded-lg border p-3">
+                <p className="text-[10px] uppercase tracking-wider text-muted-foreground">状态</p>
+                <div className="mt-1">
+                  {status ? <WebsiteStatusBadge label={status.label} tone={status.tone} /> : null}
+                </div>
+              </div>
+              <div className="rounded-lg border p-3">
+                <p className="text-[10px] uppercase tracking-wider text-muted-foreground">
+                  生效时间
+                </p>
+                <p className="mt-1 text-sm">{formatDateTime(certificate.not_before)}</p>
+              </div>
+              <div className="rounded-lg border p-3">
+                <p className="text-[10px] uppercase tracking-wider text-muted-foreground">
+                  到期时间
+                </p>
+                <p className="mt-1 text-sm">{formatDateTime(certificate.not_after)}</p>
+              </div>
+            </div>
+
+            <div className="rounded-lg border p-3">
+              <p className="text-[10px] uppercase tracking-wider text-muted-foreground">备注</p>
+              <p className="mt-1 text-sm">{certificate.remark || '暂无备注'}</p>
+            </div>
+
+            <div className="space-y-3">
+              <div>
+                <div className="mb-2 flex items-center justify-between">
+                  <p className="text-sm font-medium">证书 PEM</p>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    className="h-7 text-xs"
+                    onClick={() => void handleCopy(content.cert_pem, '证书 PEM 已复制')}
+                  >
+                    <Copy className="mr-1 size-3" />
+                    复制
+                  </Button>
+                </div>
+                <pre className="max-h-48 overflow-auto rounded-lg border bg-muted/40 p-3 text-xs break-all whitespace-pre-wrap">
+                  {content.cert_pem}
+                </pre>
+              </div>
+              <div>
+                <div className="mb-2 flex items-center justify-between">
+                  <p className="text-sm font-medium">私钥 PEM</p>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    className="h-7 text-xs"
+                    onClick={() => void handleCopy(content.key_pem, '私钥 PEM 已复制')}
+                  >
+                    <Copy className="mr-1 size-3" />
+                    复制
+                  </Button>
+                </div>
+                <pre className="max-h-48 overflow-auto rounded-lg border bg-muted/40 p-3 text-xs break-all whitespace-pre-wrap">
+                  {content.key_pem}
+                </pre>
+              </div>
+            </div>
+          </div>
+        )}
+
+        <DialogFooter>
+          <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
+            关闭
+          </Button>
+          <Button type="button" onClick={onEdit} disabled={!certificate}>
+            编辑证书
+          </Button>
+          <Button
+            type="button"
+            variant="destructive"
+            onClick={onDelete}
+            disabled={!certificate || deleting}
+          >
+            {deleting ? (
+              <>
+                <Loader2 className="mr-1 size-3.5 animate-spin" />
+                删除中...
+              </>
+            ) : (
+              '删除证书'
+            )}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
@@ -0,0 +1,182 @@
+'use client';
+
+import {zodResolver} from '@hookform/resolvers/zod';
+import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query';
+import {useEffect} from 'react';
+import {useForm} from 'react-hook-form';
+import {Loader2} from 'lucide-react';
+
+import {Button} from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import {EmptyStateWithBorder} from '@/components/layout/empty';
+import {ErrorInline} from '@/components/layout/error';
+import {LoadingStateWithBorder} from '@/components/layout/loading';
+import {Input} from '@/components/ui/input';
+import {Label} from '@/components/ui/label';
+import {Textarea} from '@/components/ui/textarea';
+import type {TlsCertificateItem} from '@/lib/services/openflare';
+import {TlsCertificateService} from '@/lib/services/openflare';
+
+import {defaultManualImportValues, type ManualImportFormValues, manualImportSchema,} from './schemas';
+import {getErrorMessage, toManualPayload} from './website-utils';
+
+const certificatesQueryKey = ['openflare', 'tls-certificates'];
+
+interface CertificateEditorDialogProps {
+  certificateId: number | null;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSaved?: (certificate: TlsCertificateItem) => void;
+  onConvert?: (certificate: TlsCertificateItem) => void;
+}
+
+export function CertificateEditorDialog({
+  certificateId,
+  open,
+  onOpenChange,
+  onSaved,
+  onConvert,
+}: CertificateEditorDialogProps) {
+  const queryClient = useQueryClient();
+  const form = useForm<ManualImportFormValues>({
+    resolver: zodResolver(manualImportSchema),
+    defaultValues: defaultManualImportValues,
+  });
+
+  const certificateQuery = useQuery({
+    queryKey: ['openflare', 'tls-certificates', 'content', certificateId],
+    queryFn: () => TlsCertificateService.getContent(certificateId as number),
+    enabled: open && certificateId !== null,
+  });
+
+  const updateMutation = useMutation({
+    mutationFn: (values: ManualImportFormValues) =>
+      TlsCertificateService.update(certificateId as number, toManualPayload(values)),
+    onSuccess: async (certificate) => {
+      await Promise.all([
+        queryClient.invalidateQueries({queryKey: certificatesQueryKey}),
+        queryClient.invalidateQueries({queryKey: ['openflare', 'managed-domains']}),
+      ]);
+      onSaved?.(certificate);
+      handleClose();
+    },
+  });
+
+  useEffect(() => {
+    if (!open || !certificateQuery.data) return;
+    form.reset({
+      name: certificateQuery.data.name,
+      cert_pem: certificateQuery.data.cert_pem,
+      key_pem: certificateQuery.data.key_pem,
+      remark: certificateQuery.data.remark || '',
+    });
+  }, [certificateQuery.data, form, open]);
+
+  const handleSubmit = form.handleSubmit((values) => {
+    updateMutation.mutate(values);
+  });
+
+  const handleClose = () => {
+    updateMutation.reset();
+    form.reset(defaultManualImportValues);
+    onOpenChange(false);
+  };
+
+  const canConvert =
+    certificateQuery.data?.provider === 'upload' &&
+    certificateQuery.data.apply_status !== 'applying';
+
+  return (
+    <Dialog open={open} onOpenChange={(next) => !next && handleClose()}>
+      <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle>编辑证书</DialogTitle>
+          <DialogDescription>
+            可以修改证书名称、备注，以及重新上传 PEM 证书和私钥内容。
+          </DialogDescription>
+        </DialogHeader>
+
+        {certificateQuery.isLoading ? (
+          <LoadingStateWithBorder description="加载证书内容中..." />
+        ) : certificateQuery.isError ? (
+          <ErrorInline
+            message={getErrorMessage(certificateQuery.error)}
+            className="justify-center"
+          />
+        ) : !certificateQuery.data ? (
+          <EmptyStateWithBorder description="证书不存在，可能已被删除。" />
+        ) : (
+          <form id="certificate-editor-form" className="space-y-4" onSubmit={handleSubmit}>
+            {updateMutation.isError ? (
+              <p className="text-sm text-destructive">
+                {getErrorMessage(updateMutation.error)}
+              </p>
+            ) : null}
+
+            <div className="grid gap-4 md:grid-cols-2">
+              <div className="space-y-2">
+                <Label>证书名称</Label>
+                <Input {...form.register('name')} />
+              </div>
+              <div className="space-y-2">
+                <Label>备注</Label>
+                <Input {...form.register('remark')} />
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <Label>证书 PEM</Label>
+              <Textarea className="min-h-32 font-mono text-xs" {...form.register('cert_pem')} />
+            </div>
+
+            <div className="space-y-2">
+              <Label>私钥 PEM</Label>
+              <Textarea className="min-h-32 font-mono text-xs" {...form.register('key_pem')} />
+            </div>
+
+            <DialogFooter className="sm:justify-between">
+              <div>
+                {canConvert ? (
+                  <Button
+                    type="button"
+                    variant="outline"
+                    onClick={() => {
+                      if (certificateQuery.data) {
+                        onConvert?.(certificateQuery.data);
+                      }
+                    }}
+                    disabled={updateMutation.isPending}
+                  >
+                    转换来源
+                  </Button>
+                ) : null}
+              </div>
+              <div className="flex gap-2">
+                <Button type="button" variant="outline" onClick={handleClose}>
+                  取消
+                </Button>
+                <Button type="submit" disabled={updateMutation.isPending}>
+                  {updateMutation.isPending ? (
+                    <>
+                      <Loader2 className="mr-1 size-3.5 animate-spin" />
+                      保存中...
+                    </>
+                  ) : (
+                    '保存证书'
+                  )}
+                </Button>
+              </div>
+            </DialogFooter>
+          </form>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}
@@ -0,0 +1,264 @@
+'use client';
+
+import {zodResolver} from '@hookform/resolvers/zod';
+import {useMutation, useQueryClient} from '@tanstack/react-query';
+import {type FormEvent, useEffect, useState} from 'react';
+import {useForm} from 'react-hook-form';
+import {Loader2} from 'lucide-react';
+
+import {Button} from '@/components/ui/button';
+import {Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle,} from '@/components/ui/dialog';
+import {Input} from '@/components/ui/input';
+import {Label} from '@/components/ui/label';
+import {Tabs, TabsContent, TabsList, TabsTrigger} from '@/components/ui/tabs';
+import {Textarea} from '@/components/ui/textarea';
+import type {TlsCertificateItem} from '@/lib/services/openflare';
+import {TlsCertificateService} from '@/lib/services/openflare';
+
+import {
+  defaultFileImportValues,
+  defaultManualImportValues,
+  type FileImportFormValues,
+  type ManualImportFormValues,
+  manualImportSchema,
+} from './schemas';
+import {getErrorMessage, toFilePayload, toManualPayload} from './website-utils';
+
+const certificatesQueryKey = ['openflare', 'tls-certificates'];
+
+interface CertificateImportDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onImported?: (certificate: TlsCertificateItem) => void;
+}
+
+export function CertificateImportDialog({
+  open,
+  onOpenChange,
+  onImported,
+}: CertificateImportDialogProps) {
+  const queryClient = useQueryClient();
+  const [importMode, setImportMode] = useState<'manual' | 'file'>('manual');
+  const [error, setError] = useState('');
+  const [fileForm, setFileForm] = useState<FileImportFormValues>(defaultFileImportValues);
+  const [certFile, setCertFile] = useState<File | null>(null);
+  const [keyFile, setKeyFile] = useState<File | null>(null);
+  const [fileInputNonce, setFileInputNonce] = useState(0);
+
+  const manualForm = useForm<ManualImportFormValues>({
+    resolver: zodResolver(manualImportSchema),
+    defaultValues: defaultManualImportValues,
+  });
+
+  useEffect(() => {
+    if (!open) return;
+    setError('');
+  }, [open]);
+
+  const invalidateQueries = async () => {
+    await Promise.all([
+      queryClient.invalidateQueries({queryKey: certificatesQueryKey}),
+      queryClient.invalidateQueries({queryKey: ['openflare', 'managed-domains']}),
+    ]);
+  };
+
+  const resetFileForm = () => {
+    setFileForm(defaultFileImportValues);
+    setCertFile(null);
+    setKeyFile(null);
+    setFileInputNonce((value) => value + 1);
+  };
+
+  const resetAll = () => {
+    setImportMode('manual');
+    setError('');
+    manualForm.reset(defaultManualImportValues);
+    resetFileForm();
+  };
+
+  const handleClose = () => {
+    resetAll();
+    onOpenChange(false);
+  };
+
+  const manualImportMutation = useMutation({
+    mutationFn: (values: ManualImportFormValues) =>
+      TlsCertificateService.create(toManualPayload(values)),
+    onSuccess: async (certificate) => {
+      await invalidateQueries();
+      onImported?.(certificate);
+      handleClose();
+    },
+    onError: (err) => setError(getErrorMessage(err)),
+  });
+
+  const fileImportMutation = useMutation({
+    mutationFn: (values: FileImportFormValues) =>
+      TlsCertificateService.importFile(toFilePayload(values, certFile, keyFile)),
+    onSuccess: async (certificate) => {
+      await invalidateQueries();
+      onImported?.(certificate);
+      handleClose();
+    },
+    onError: (err) => setError(getErrorMessage(err)),
+  });
+
+  const handleManualSubmit = manualForm.handleSubmit((values) => {
+    setError('');
+    manualImportMutation.mutate(values);
+  });
+
+  const handleFileSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setError('');
+    fileImportMutation.mutate(fileForm);
+  };
+
+  const pending = manualImportMutation.isPending || fileImportMutation.isPending;
+
+  return (
+    <Dialog open={open} onOpenChange={(next) => !next && handleClose()}>
+      <DialogContent className="max-w-2xl">
+        <DialogHeader>
+          <DialogTitle>添加证书</DialogTitle>
+          <DialogDescription>
+            支持手动粘贴 PEM 或上传证书文件。导入成功后可立即在网站表单里选择。
+          </DialogDescription>
+        </DialogHeader>
+
+        {error ? <p className="text-sm text-destructive">{error}</p> : null}
+
+        <Tabs value={importMode} onValueChange={(value) => setImportMode(value as 'manual' | 'file')}>
+          <TabsList className="grid w-full grid-cols-2">
+            <TabsTrigger value="manual">手动导入</TabsTrigger>
+            <TabsTrigger value="file">文件导入</TabsTrigger>
+          </TabsList>
+
+          <TabsContent value="manual" className="space-y-4">
+            <form className="space-y-4" onSubmit={handleManualSubmit}>
+              <div className="grid gap-4 md:grid-cols-2">
+                <div className="space-y-2">
+                  <Label>证书名称</Label>
+                  <Input placeholder="example-com" {...manualForm.register('name')} />
+                  {manualForm.formState.errors.name ? (
+                    <p className="text-xs text-destructive">
+                      {manualForm.formState.errors.name.message}
+                    </p>
+                  ) : null}
+                </div>
+                <div className="space-y-2">
+                  <Label>备注</Label>
+                  <Input placeholder="例如：主站生产证书" {...manualForm.register('remark')} />
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <Label>证书 PEM</Label>
+                <Textarea
+                  className="min-h-32 font-mono text-xs"
+                  placeholder="-----BEGIN CERTIFICATE-----"
+                  {...manualForm.register('cert_pem')}
+                />
+              </div>
+
+              <div className="space-y-2">
+                <Label>私钥 PEM</Label>
+                <Textarea
+                  className="min-h-32 font-mono text-xs"
+                  placeholder="-----BEGIN PRIVATE KEY-----"
+                  {...manualForm.register('key_pem')}
+                />
+              </div>
+
+              <Button type="submit" disabled={pending}>
+                {pending ? (
+                  <>
+                    <Loader2 className="mr-1 size-3.5 animate-spin" />
+                    导入中...
+                  </>
+                ) : (
+                  '导入证书'
+                )}
+              </Button>
+            </form>
+          </TabsContent>
+
+          <TabsContent value="file" className="space-y-4">
+            <form className="space-y-4" onSubmit={handleFileSubmit}>
+              <div className="grid gap-4 md:grid-cols-2">
+                <div className="space-y-2">
+                  <Label>证书名称</Label>
+                  <Input
+                    value={fileForm.name}
+                    onChange={(event) =>
+                      setFileForm((current) => ({...current, name: event.target.value}))
+                    }
+                    placeholder="wildcard-example"
+                  />
+                </div>
+                <div className="space-y-2">
+                  <Label>备注</Label>
+                  <Input
+                    value={fileForm.remark}
+                    onChange={(event) =>
+                      setFileForm((current) => ({...current, remark: event.target.value}))
+                    }
+                    placeholder="例如：泛域名生产证书"
+                  />
+                </div>
+              </div>
+
+              <div className="grid gap-4 md:grid-cols-2">
+                <div className="space-y-2">
+                  <Label>证书文件</Label>
+                  <Input
+                    key={`cert-${fileInputNonce}`}
+                    type="file"
+                    accept=".pem,.crt,.cer"
+                    onChange={(event) => setCertFile(event.target.files?.[0] ?? null)}
+                  />
+                  <p className="text-xs text-muted-foreground">
+                    {certFile ? `已选择：${certFile.name}` : '请选择 PEM/CRT 文件'}
+                  </p>
+                </div>
+                <div className="space-y-2">
+                  <Label>私钥文件</Label>
+                  <Input
+                    key={`key-${fileInputNonce}`}
+                    type="file"
+                    accept=".key,.pem"
+                    onChange={(event) => setKeyFile(event.target.files?.[0] ?? null)}
+                  />
+                  <p className="text-xs text-muted-foreground">
+                    {keyFile ? `已选择：${keyFile.name}` : '请选择 KEY/PEM 文件'}
+                  </p>
+                </div>
+              </div>
+
+              <div className="flex gap-2">
+                <Button type="submit" disabled={pending}>
+                  {pending ? (
+                    <>
+                      <Loader2 className="mr-1 size-3.5 animate-spin" />
+                      上传中...
+                    </>
+                  ) : (
+                    '上传文件'
+                  )}
+                </Button>
+                <Button
+                  type="button"
+                  variant="outline"
+                  disabled={pending}
+                  onClick={resetFileForm}
+                >
+                  清空文件
+                </Button>
+              </div>
+            </form>
+          </TabsContent>
+        </Tabs>
+      </DialogContent>
+    </Dialog>
+  );
+}
@@ -0,0 +1,152 @@
+'use client';
+
+import {useMutation, useQueryClient} from '@tanstack/react-query';
+import {zodResolver} from '@hookform/resolvers/zod';
+import {useState} from 'react';
+import {useForm} from 'react-hook-form';
+import {Loader2} from 'lucide-react';
+import {z} from 'zod';
+
+import {Button} from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import {Input} from '@/components/ui/input';
+import {Label} from '@/components/ui/label';
+import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue,} from '@/components/ui/select';
+import {DnsAccountService} from '@/lib/services/openflare';
+
+import {getErrorMessage} from './website-utils';
+
+const dnsAccountsQueryKey = ['openflare', 'dns-accounts'];
+
+const dnsAccountSchema = z.object({
+  name: z.string().trim().min(1, '请输入名称').max(255),
+  type: z.string().min(1),
+  authorization: z.string().trim().min(1, '请输入 Token'),
+});
+
+type DnsAccountFormValues = z.infer<typeof dnsAccountSchema>;
+
+interface DnsAccountCreateDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onCreated?: () => void;
+}
+
+export function DnsAccountCreateDialog({
+  open,
+  onOpenChange,
+  onCreated,
+}: DnsAccountCreateDialogProps) {
+  const queryClient = useQueryClient();
+  const [error, setError] = useState('');
+  const form = useForm<DnsAccountFormValues>({
+    resolver: zodResolver(dnsAccountSchema),
+    defaultValues: {name: '', type: 'cloudflare', authorization: ''},
+  });
+
+  const createMutation = useMutation({
+    mutationFn: DnsAccountService.create,
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({queryKey: dnsAccountsQueryKey});
+      form.reset();
+      setError('');
+      onCreated?.();
+      onOpenChange(false);
+    },
+    onError: (err) => setError(getErrorMessage(err)),
+  });
+
+  const onSubmit = form.handleSubmit((values) => {
+    setError('');
+    let auth = values.authorization.trim();
+    if (!auth.startsWith('{')) {
+      auth = JSON.stringify({api_token: values.authorization});
+    }
+    createMutation.mutate({...values, authorization: auth});
+  });
+
+  const handleClose = () => {
+    form.reset();
+    setError('');
+    onOpenChange(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={(next) => !next && handleClose()}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>添加 DNS 账号</DialogTitle>
+          <DialogDescription>
+            统一管理 DNS 服务商账号，用于 ACME 证书的 DNS 验证申请。
+          </DialogDescription>
+        </DialogHeader>
+
+        <form className="space-y-4" onSubmit={onSubmit}>
+          {error ? <p className="text-sm text-destructive">{error}</p> : null}
+
+          <div className="space-y-2">
+            <Label>账号名称</Label>
+            <Input
+              placeholder="Cloudflare 邮箱账号"
+              {...form.register('name')}
+            />
+            {form.formState.errors.name ? (
+              <p className="text-xs text-destructive">{form.formState.errors.name.message}</p>
+            ) : null}
+          </div>
+
+          <div className="space-y-2">
+            <Label>DNS 服务商</Label>
+            <Select
+              value={form.watch('type')}
+              onValueChange={(value) => form.setValue('type', value)}
+            >
+              <SelectTrigger>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="cloudflare">Cloudflare</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="space-y-2">
+            <Label>API Token</Label>
+            <Input
+              {...form.register('authorization')}
+              placeholder="请勿使用 Global API Key"
+            />
+            {form.formState.errors.authorization ? (
+              <p className="text-xs text-destructive">
+                {form.formState.errors.authorization.message}
+              </p>
+            ) : null}
+          </div>
+
+          <DialogFooter>
+            <Button type="button" variant="outline" onClick={handleClose}>
+              取消
+            </Button>
+            <Button type="submit" disabled={createMutation.isPending}>
+              {createMutation.isPending ? (
+                <>
+                  <Loader2 className="mr-1 size-3.5 animate-spin" />
+                  提交中...
+                </>
+              ) : (
+                '提交'
+              )}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
@@ -0,0 +1,99 @@
+import {z} from 'zod';
+
+export const managedDomainSchema = z.object({
+  domain: z
+    .string()
+    .trim()
+    .min(1, '请输入域名')
+    .max(255, '域名不能超过 255 个字符')
+    .refine(
+      (value) => !value.includes('://') && !value.includes('/'),
+      '域名格式不合法',
+    )
+    .refine(
+      (value) =>
+        /^(?:\*\.)?(?=.{1,253}$)(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,63}$/.test(
+          value,
+        ),
+      '域名格式不合法',
+    )
+    .refine(
+      (value) =>
+        !value.includes('*') ||
+        (value.startsWith('*.') && value.indexOf('*', 1) === -1),
+      '通配符域名仅支持 *.example.com 格式',
+    ),
+  cert_id: z.string(),
+  enabled: z.boolean(),
+  remark: z.string().max(255, '备注不能超过 255 个字符'),
+});
+
+export const manualImportSchema = z.object({
+  name: z
+    .string()
+    .trim()
+    .min(1, '请输入证书名称')
+    .max(255, '证书名称不能超过 255 个字符'),
+  cert_pem: z.string().trim().min(1, '请输入证书 PEM 内容'),
+  key_pem: z.string().trim().min(1, '请输入私钥 PEM 内容'),
+  remark: z.string().max(255, '备注不能超过 255 个字符'),
+});
+
+export type ManagedDomainFormValues = z.infer<typeof managedDomainSchema>;
+export type ManualImportFormValues = z.infer<typeof manualImportSchema>;
+
+export type FileImportFormValues = {
+  name: string;
+  remark: string;
+};
+
+export const defaultManagedDomainValues: ManagedDomainFormValues = {
+  domain: '',
+  cert_id: '',
+  enabled: true,
+  remark: '',
+};
+
+export const defaultManualImportValues: ManualImportFormValues = {
+  name: '',
+  cert_pem: '',
+  key_pem: '',
+  remark: '',
+};
+
+export const defaultFileImportValues: FileImportFormValues = {
+  name: '',
+  remark: '',
+};
+
+export const acmeApplySchema = z.object({
+  name: z.string().trim().min(1, '请输入证书名称').max(255),
+  primary_domain: z.string().trim().min(1, '请输入主域名'),
+  other_domains: z.string(),
+  dns_account_id: z.number().min(1, '请选择 DNS 账号'),
+  acme_account_id: z.number(),
+  key_algorithm: z.string(),
+  auto_renew: z.boolean(),
+  disable_cname: z.boolean(),
+  skip_dns: z.boolean(),
+  dns1: z.string(),
+  dns2: z.string(),
+  remark: z.string().max(255),
+});
+
+export type AcmeApplyFormValues = z.infer<typeof acmeApplySchema>;
+
+export const defaultAcmeApplyValues: AcmeApplyFormValues = {
+  name: '',
+  primary_domain: '',
+  other_domains: '',
+  dns_account_id: 0,
+  acme_account_id: 0,
+  key_algorithm: 'RSA2048',
+  auto_renew: true,
+  disable_cname: false,
+  skip_dns: false,
+  dns1: '',
+  dns2: '',
+  remark: '',
+};
@@ -0,0 +1,30 @@
+import {Badge} from '@/components/ui/badge';
+import {cn} from '@/lib/utils';
+
+import type {StatusTone} from './website-utils';
+
+const toneClassName: Record<StatusTone, string> = {
+  success: 'bg-emerald-500/10 border-emerald-500/20 text-emerald-600',
+  warning: 'bg-amber-500/10 border-amber-500/20 text-amber-600',
+  danger: 'bg-destructive/10 border-destructive/20 text-destructive',
+  info: 'bg-blue-500/10 border-blue-500/20 text-blue-600',
+};
+
+export function WebsiteStatusBadge({
+  label,
+  tone,
+  className,
+}: {
+  label: string;
+  tone: StatusTone;
+  className?: string;
+}) {
+  return (
+    <Badge
+      variant="outline"
+      className={cn('text-[10px] rounded-full py-0 px-2 font-medium', toneClassName[tone], className)}
+    >
+      {label}
+    </Badge>
+  );
+}
@@ -0,0 +1,250 @@
+'use client';
+
+import {zodResolver} from '@hookform/resolvers/zod';
+import {useMutation, useQueryClient} from '@tanstack/react-query';
+import {useEffect} from 'react';
+import {useForm, useWatch} from 'react-hook-form';
+import {Loader2} from 'lucide-react';
+
+import {Button} from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import {Input} from '@/components/ui/input';
+import {Label} from '@/components/ui/label';
+import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue,} from '@/components/ui/select';
+import {Switch} from '@/components/ui/switch';
+import type {ManagedDomainItem, TlsCertificateItem} from '@/lib/services/openflare';
+import {WebsiteService} from '@/lib/services/openflare';
+
+import {defaultManagedDomainValues, type ManagedDomainFormValues, managedDomainSchema,} from './schemas';
+import {WebsiteStatusBadge} from './status-badge';
+import {
+  buildCertificateLabel,
+  getErrorMessage,
+  getMatchTypeMeta,
+  toManagedDomainFormValues,
+  toManagedDomainPayload,
+} from './website-utils';
+
+const domainsQueryKey = ['openflare', 'managed-domains'];
+
+interface WebsiteEditorDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSaved?: (domain: ManagedDomainItem, mode: 'create' | 'update') => void;
+  onRequestImportCertificate: () => void;
+  certificates: TlsCertificateItem[];
+  certificatesLoading?: boolean;
+  initialDomain?: ManagedDomainItem | null;
+  preferredCertificateId?: number | null;
+}
+
+export function WebsiteEditorDialog({
+  open,
+  onOpenChange,
+  onSaved,
+  onRequestImportCertificate,
+  certificates,
+  certificatesLoading = false,
+  initialDomain = null,
+  preferredCertificateId = null,
+}: WebsiteEditorDialogProps) {
+  const queryClient = useQueryClient();
+  const form = useForm<ManagedDomainFormValues>({
+    resolver: zodResolver(managedDomainSchema),
+    defaultValues: defaultManagedDomainValues,
+  });
+
+  const watchedDomain = useWatch({control: form.control, name: 'domain'});
+  const watchedCertId = useWatch({control: form.control, name: 'cert_id'});
+  const watchedEnabled = useWatch({control: form.control, name: 'enabled'});
+
+  const saveMutation = useMutation({
+    mutationFn: async (values: ManagedDomainFormValues) => {
+      const payload = toManagedDomainPayload(values);
+      return initialDomain
+        ? WebsiteService.update(initialDomain.id, payload)
+        : WebsiteService.create(payload);
+    },
+    onSuccess: async (domain) => {
+      await queryClient.invalidateQueries({queryKey: domainsQueryKey});
+      onSaved?.(domain, initialDomain ? 'update' : 'create');
+      handleClose();
+    },
+  });
+
+  const currentCertificate = watchedCertId
+    ? (certificates.find((item) => item.id === Number(watchedCertId)) ?? null)
+    : null;
+
+  const handleSubmit = form.handleSubmit((values) => {
+    saveMutation.mutate(values);
+  });
+
+  const handleClose = () => {
+    saveMutation.reset();
+    form.reset(defaultManagedDomainValues);
+    onOpenChange(false);
+  };
+
+  useEffect(() => {
+    if (!open) return;
+    form.reset(
+      initialDomain
+        ? toManagedDomainFormValues(initialDomain)
+        : defaultManagedDomainValues,
+    );
+  }, [form, initialDomain, open]);
+
+  useEffect(() => {
+    if (!open || !preferredCertificateId) return;
+    form.setValue('cert_id', String(preferredCertificateId), {
+      shouldDirty: true,
+      shouldValidate: true,
+    });
+  }, [form, open, preferredCertificateId]);
+
+  return (
+    <Dialog open={open} onOpenChange={(next) => !next && handleClose()}>
+      <DialogContent className="max-w-2xl">
+        <DialogHeader>
+          <DialogTitle>{initialDomain ? '编辑网站' : '新增网站'}</DialogTitle>
+          <DialogDescription>
+            录入域名并选择绑定证书。证书可在弹窗内直接新增，导入成功后会自动回填。
+          </DialogDescription>
+        </DialogHeader>
+
+        <form className="space-y-4" onSubmit={handleSubmit}>
+          {saveMutation.isError ? (
+            <p className="text-sm text-destructive">{getErrorMessage(saveMutation.error)}</p>
+          ) : null}
+
+          <div className="grid gap-4 md:grid-cols-2">
+            <div className="space-y-2">
+              <Label htmlFor="domain">域名</Label>
+              <Input
+                id="domain"
+                placeholder="example.com 或 *.example.com"
+                {...form.register('domain')}
+              />
+              {form.formState.errors.domain ? (
+                <p className="text-xs text-destructive">
+                  {form.formState.errors.domain.message}
+                </p>
+              ) : null}
+            </div>
+
+            <div className="space-y-2">
+              <Label>绑定证书</Label>
+              <Select
+                value={watchedCertId || 'none'}
+                disabled={certificatesLoading}
+                onValueChange={(value) =>
+                  form.setValue('cert_id', value === 'none' ? '' : value, {
+                    shouldDirty: true,
+                    shouldValidate: true,
+                  })
+                }
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="不绑定证书" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="none">不绑定证书</SelectItem>
+                  {certificates.map((certificate) => (
+                    <SelectItem key={certificate.id} value={String(certificate.id)}>
+                      {buildCertificateLabel(certificate)}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                className="h-7 text-xs"
+                onClick={onRequestImportCertificate}
+              >
+                添加证书
+              </Button>
+            </div>
+          </div>
+
+          <div className="grid gap-3 rounded-lg border border-dashed p-3 md:grid-cols-3">
+            <div>
+              <p className="text-[10px] uppercase tracking-wider text-muted-foreground">当前域名</p>
+              <p className="mt-1 text-sm">{watchedDomain?.trim() || '未填写域名'}</p>
+            </div>
+            <div>
+              <p className="text-[10px] uppercase tracking-wider text-muted-foreground">匹配类型</p>
+              <div className="mt-1">
+                {watchedDomain?.trim() ? (
+                  <WebsiteStatusBadge {...getMatchTypeMeta(watchedDomain.trim())} />
+                ) : (
+                  <WebsiteStatusBadge label="等待输入" tone="warning" />
+                )}
+              </div>
+            </div>
+            <div>
+              <p className="text-[10px] uppercase tracking-wider text-muted-foreground">当前证书</p>
+              <div className="mt-1">
+                <WebsiteStatusBadge
+                  label={currentCertificate ? currentCertificate.name : '未绑定证书'}
+                  tone={currentCertificate ? 'success' : 'warning'}
+                />
+              </div>
+            </div>
+          </div>
+
+          <div className="flex items-center justify-between rounded-lg border px-3 py-2">
+            <div>
+              <p className="text-sm font-medium">启用网站</p>
+              <p className="text-xs text-muted-foreground">
+                停用后该网站不会参与自动匹配，但记录会保留。
+              </p>
+            </div>
+            <Switch
+              checked={watchedEnabled}
+              onCheckedChange={(checked) =>
+                form.setValue('enabled', checked, {shouldDirty: true, shouldValidate: true})
+              }
+            />
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="remark">备注</Label>
+            <Input
+              id="remark"
+              placeholder="例如：主站 / 泛域名 / 生产"
+              {...form.register('remark')}
+            />
+          </div>
+
+          <DialogFooter>
+            <Button type="button" variant="outline" onClick={handleClose}>
+              取消
+            </Button>
+            <Button type="submit" disabled={saveMutation.isPending}>
+              {saveMutation.isPending ? (
+                <>
+                  <Loader2 className="mr-1 size-3.5 animate-spin" />
+                  保存中...
+                </>
+              ) : initialDomain ? (
+                '保存网站'
+              ) : (
+                '创建网站'
+              )}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
@@ -0,0 +1,119 @@
+import type {
+  ManagedDomainItem,
+  ManagedDomainMutationPayload,
+  ProxyRouteItem,
+  TlsCertificateFileImportPayload,
+  TlsCertificateItem,
+  TlsCertificateMutationPayload,
+} from '@/lib/services/openflare';
+import {formatDateTime} from '@/lib/utils';
+
+import type {FileImportFormValues, ManagedDomainFormValues, ManualImportFormValues,} from './schemas';
+
+export type StatusTone = 'success' | 'warning' | 'danger' | 'info';
+
+export function getErrorMessage(error: unknown) {
+  return error instanceof Error ? error.message : '请求失败，请稍后重试。';
+}
+
+export function getMatchTypeMeta(domain: string): {label: string; tone: StatusTone} {
+  return domain.startsWith('*.')
+    ? {label: '通配符', tone: 'warning'}
+    : {label: '精确匹配', tone: 'info'};
+}
+
+export function getCertificateStatus(certificate: TlsCertificateItem): {
+  label: string;
+  tone: StatusTone;
+} {
+  const expiresAt = new Date(certificate.not_after).getTime();
+  const diffMs = expiresAt - Date.now();
+  const days = Math.ceil(diffMs / (1000 * 60 * 60 * 24));
+
+  if (Number.isNaN(expiresAt)) {
+    return {label: '有效期未知', tone: 'warning'};
+  }
+
+  if (days < 0) {
+    return {label: '已过期', tone: 'danger'};
+  }
+
+  if (days <= 30) {
+    return {label: `${days} 天内到期`, tone: 'warning'};
+  }
+
+  return {label: '有效', tone: 'success'};
+}
+
+export function buildCertificateLabel(certificate: TlsCertificateItem) {
+  return certificate.not_after
+    ? `${certificate.name}（到期：${formatDateTime(certificate.not_after)}）`
+    : certificate.name;
+}
+
+export function toManagedDomainPayload(
+  values: ManagedDomainFormValues,
+): ManagedDomainMutationPayload {
+  return {
+    domain: values.domain.trim().toLowerCase(),
+    cert_id: values.cert_id ? Number(values.cert_id) : null,
+    enabled: values.enabled,
+    remark: values.remark.trim(),
+  };
+}
+
+export function toManagedDomainFormValues(
+  domain: ManagedDomainItem,
+): ManagedDomainFormValues {
+  return {
+    domain: domain.domain,
+    cert_id: domain.cert_id ? String(domain.cert_id) : '',
+    enabled: domain.enabled,
+    remark: domain.remark || '',
+  };
+}
+
+export function toManualPayload(
+  values: ManualImportFormValues,
+): TlsCertificateMutationPayload {
+  return {
+    name: values.name.trim(),
+    cert_pem: values.cert_pem.trim(),
+    key_pem: values.key_pem.trim(),
+    remark: values.remark.trim(),
+  };
+}
+
+export function toFilePayload(
+  values: FileImportFormValues,
+  certFile: File | null,
+  keyFile: File | null,
+): TlsCertificateFileImportPayload {
+  if (!certFile || !keyFile) {
+    throw new Error('请选择证书文件和私钥文件。');
+  }
+
+  return {
+    name: values.name.trim(),
+    remark: values.remark.trim(),
+    certFile,
+    keyFile,
+  };
+}
+
+export function isRouteRelatedToManagedDomain(
+  managedDomain: string,
+  route: ProxyRouteItem,
+) {
+  const domains = route.domains.length > 0 ? route.domains : [route.primary_domain];
+  return domains.some((routeDomain) => {
+    if (managedDomain === routeDomain) {
+      return true;
+    }
+    if (!managedDomain.startsWith('*.')) {
+      return false;
+    }
+    const suffix = managedDomain.slice(2);
+    return routeDomain.endsWith(`.${suffix}`);
+  });
+}