[新增] 添加 ACME 和 DNS 账号管理功能，支持证书申请与续期

2026-10-03 23:06:36 +08:00 · 2026-05-25 14:02:05 +08:00
parent c6a055d5d3
commit 7afe4e5d78
32 changed files with 1796 additions and 76 deletions
@@ -0,0 +1,6 @@
+import { apiRequest } from '@/lib/api/client';
+import type { AcmeAccountItem } from '@/features/acme-accounts/types';
+
+export function getDefaultAcmeAccount() {
+  return apiRequest<AcmeAccountItem>('/acme-accounts/default');
+}
@@ -0,0 +1,7 @@
+export interface AcmeAccountItem {
+  id: number;
+  email: string;
+  url: string;
+  created_at: string;
+  updated_at: string;
+}
@@ -0,0 +1,29 @@
+import { apiRequest } from '@/lib/api/client';
+import type {
+  DnsAccountItem,
+  DnsAccountMutationPayload,
+} from '@/features/dns-accounts/types';
+
+export function getDnsAccounts() {
+  return apiRequest<DnsAccountItem[]>('/dns-accounts/');
+}
+
+export function createDnsAccount(payload: DnsAccountMutationPayload) {
+  return apiRequest<DnsAccountItem>('/dns-accounts/', {
+    method: 'POST',
+    body: JSON.stringify(payload),
+  });
+}
+
+export function updateDnsAccount(id: number, payload: DnsAccountMutationPayload) {
+  return apiRequest<DnsAccountItem>(`/dns-accounts/${id}/update`, {
+    method: 'POST',
+    body: JSON.stringify(payload),
+  });
+}
+
+export function deleteDnsAccount(id: number) {
+  return apiRequest<void>(`/dns-accounts/${id}/delete`, {
+    method: 'POST',
+  });
+}
@@ -0,0 +1,177 @@
+'use client';
+
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useMemo, useState } from 'react';
+import Link from 'next/link';
+import { useForm } from 'react-hook-form';
+
+import { EmptyState } from '@/components/feedback/empty-state';
+import { ErrorState } from '@/components/feedback/error-state';
+import { InlineMessage } from '@/components/feedback/inline-message';
+import { LoadingState } from '@/components/feedback/loading-state';
+import { PageHeader } from '@/components/layout/page-header';
+import { AppCard } from '@/components/ui/app-card';
+import { AppModal } from '@/components/ui/app-modal';
+import {
+  deleteDnsAccount,
+  getDnsAccounts,
+  createDnsAccount,
+} from '@/features/dns-accounts/api/dns-accounts';
+import type { DnsAccountItem } from '@/features/dns-accounts/types';
+import { getErrorMessage } from '@/features/websites/utils';
+import {
+  DangerButton,
+  PrimaryButton,
+  ResourceField,
+  ResourceInput,
+  ResourceSelect,
+} from '@/features/shared/components/resource-primitives';
+import { formatDateTime } from '@/lib/utils/date';
+
+export function DnsAccountsPage() {
+  const queryClient = useQueryClient();
+  const [feedback, setFeedback] = useState<{ tone: 'info' | 'success' | 'danger'; message: string } | null>(null);
+  const [isCreateOpen, setIsCreateOpen] = useState(false);
+
+  const dnsAccountsQuery = useQuery({
+    queryKey: ['dns-accounts'],
+    queryFn: getDnsAccounts,
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: deleteDnsAccount,
+    onSuccess: async () => {
+      setFeedback({ tone: 'success', message: 'DNS 账号已删除。' });
+      await queryClient.invalidateQueries({ queryKey: ['dns-accounts'] });
+    },
+    onError: (error) => {
+      setFeedback({ tone: 'danger', message: getErrorMessage(error) });
+    },
+  });
+
+  const handleDelete = (account: DnsAccountItem) => {
+    if (!window.confirm(`确认删除 DNS 账号 ${account.name} 吗？`)) {
+      return;
+    }
+    setFeedback(null);
+    deleteMutation.mutate(account.id);
+  };
+
+  const accounts = useMemo(() => dnsAccountsQuery.data ?? [], [dnsAccountsQuery.data]);
+
+  return (
+    <>
+      <div className="space-y-6">
+        <PageHeader
+          title="DNS 账号"
+          description="统一管理 DNS 服务商账号，用于 ACME 证书的 DNS 验证申请。"
+          action={
+            <div className="flex flex-wrap gap-3">
+              <Link
+                href="/website"
+                className="inline-flex min-h-[46px] items-center justify-center rounded-2xl border border-[var(--border-default)] bg-[var(--control-background)] px-4 py-3 text-sm font-medium text-[var(--foreground-primary)] transition hover:bg-[var(--control-background-hover)]"
+              >
+                返回网站
+              </Link>
+              <PrimaryButton type="button" onClick={() => setIsCreateOpen(true)}>
+                添加账号
+              </PrimaryButton>
+            </div>
+          }
+        />
+
+        {feedback ? <InlineMessage tone={feedback.tone} message={feedback.message} /> : null}
+
+        <AppCard title="DNS 账号列表">
+          {dnsAccountsQuery.isLoading ? (
+            <LoadingState />
+          ) : dnsAccountsQuery.isError ? (
+            <ErrorState title="加载失败" description={getErrorMessage(dnsAccountsQuery.error)} />
+          ) : accounts.length === 0 ? (
+            <EmptyState title="暂无 DNS 账号" description="点击右上角“添加账号”开始录入。" />
+          ) : (
+            <div className="space-y-3">
+              {accounts.map((account) => (
+                <div key={account.id} className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4">
+                  <div className="flex items-start justify-between gap-4">
+                    <div className="space-y-2">
+                      <p className="text-sm font-semibold text-[var(--foreground-primary)]">
+                        {account.name} <span className="ml-2 text-xs font-normal text-[var(--foreground-secondary)]">({account.type})</span>
+                      </p>
+                      <div className="text-xs leading-5 text-[var(--foreground-secondary)]">
+                        <p>创建于：{formatDateTime(account.created_at)}</p>
+                      </div>
+                    </div>
+                    <div className="flex flex-wrap gap-2">
+                      <DangerButton
+                        type="button"
+                        onClick={() => handleDelete(account)}
+                        disabled={deleteMutation.isPending}
+                        className="px-3 py-2 text-xs"
+                      >
+                        删除
+                      </DangerButton>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </AppCard>
+      </div>
+      
+      {isCreateOpen && (
+        <DnsAccountCreateModal isOpen={isCreateOpen} onClose={() => setIsCreateOpen(false)} onCreated={() => {
+          setFeedback({ tone: 'success', message: 'DNS 账号已添加。' });
+          setIsCreateOpen(false);
+          queryClient.invalidateQueries({ queryKey: ['dns-accounts'] });
+        }} />
+      )}
+    </>
+  );
+}
+
+function DnsAccountCreateModal({ isOpen, onClose, onCreated }: { isOpen: boolean; onClose: () => void; onCreated: () => void }) {
+  const [error, setError] = useState('');
+  const { register, handleSubmit, formState } = useForm({
+    defaultValues: { name: '', type: 'cloudflare', authorization: '' },
+  });
+
+  const createMutation = useMutation({
+    mutationFn: createDnsAccount,
+    onSuccess: onCreated,
+    onError: (err) => setError(getErrorMessage(err)),
+  });
+
+  const onSubmit = handleSubmit((values) => {
+    setError('');
+    // for cloudflare we wrap the token in JSON if it isn't already (the backend expects JSON)
+    let auth = values.authorization;
+    if (!auth.startsWith('{')) {
+      auth = JSON.stringify({ api_token: values.authorization });
+    }
+    createMutation.mutate({ ...values, authorization: auth });
+  });
+
+  return (
+    <AppModal isOpen={isOpen} onClose={onClose} title="添加 DNS 账号">
+      <form onSubmit={onSubmit} className="space-y-5">
+        {error && <InlineMessage tone="danger" message={error} />}
+        <ResourceField label="账号名称" error={formState.errors.name?.message as string}>
+          <ResourceInput placeholder="例如：我的 Cloudflare" {...register('name', { required: '请输入名称' })} />
+        </ResourceField>
+        <ResourceField label="DNS 服务商">
+          <ResourceSelect {...register('type')}>
+            <option value="cloudflare">Cloudflare</option>
+          </ResourceSelect>
+        </ResourceField>
+        <ResourceField label="API Token (Authorization)" hint="输入对应 DNS 平台提供的 API Token。">
+          <ResourceInput placeholder="xxxxxxxxxxxxxxxxxxxxxxxxxxx" {...register('authorization', { required: '请输入 Token' })} />
+        </ResourceField>
+        <PrimaryButton type="submit" disabled={createMutation.isPending}>
+          {createMutation.isPending ? '提交中...' : '提交'}
+        </PrimaryButton>
+      </form>
+    </AppModal>
+  );
+}
@@ -0,0 +1,13 @@
+export interface DnsAccountItem {
+  id: number;
+  name: string;
+  type: string;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface DnsAccountMutationPayload {
+  name: string;
+  type: string;
+  authorization: string;
+}
@@ -9,8 +9,8 @@ import type {
 import { cn } from '@/lib/utils/cn';

 interface ResourceFieldProps {
-  label: string;
-  hint?: string;
+  label: ReactNode;
+  hint?: ReactNode;
  error?: string;
  className?: string;
  tooltip?: string;
@@ -6,6 +6,7 @@ import type {
  TlsCertificateFileImportPayload,
  TlsCertificateItem,
  TlsCertificateMutationPayload,
+  TlsCertificateApplyPayload,
 } from '@/features/tls-certificates/types';

 export function getTlsCertificates() {
@@ -52,6 +53,26 @@ export function importTlsCertificateFiles(payload: TlsCertificateFileImportPaylo

 export function deleteTlsCertificate(id: number) {
  return apiRequest<void>(`/tls-certificates/${id}/delete`, {
+	method: 'POST',
+  });
+}
+
+export function applyTlsCertificate(payload: TlsCertificateApplyPayload) {
+  return apiRequest<TlsCertificateItem>('/tls-certificates/apply', {
+    method: 'POST',
+    body: JSON.stringify(payload),
+  });
+}
+
+export function renewTlsCertificate(id: number) {
+  return apiRequest<TlsCertificateItem>(`/tls-certificates/${id}/renew`, {
    method: 'POST',
  });
 }
+
+export function updateAcmeCertificate(id: number, payload: TlsCertificateApplyPayload) {
+  return apiRequest<TlsCertificateItem>(`/tls-certificates/${id}/update-acme`, {
+    method: 'POST',
+    body: JSON.stringify(payload),
+  });
+}
@@ -14,11 +14,13 @@ import { StatusBadge } from '@/components/ui/status-badge';
 import {
  deleteTlsCertificate,
  getTlsCertificates,
+  renewTlsCertificate,
 } from '@/features/tls-certificates/api/tls-certificates';
 import type { TlsCertificateItem } from '@/features/tls-certificates/types';
 import { CertificateDetailModal } from '@/features/websites/components/certificate-detail-modal';
 import { CertificateEditorModal } from '@/features/websites/components/certificate-editor-modal';
 import { CertificateImportModal } from '@/features/websites/components/certificate-import-modal';
+import { CertificateApplyModal } from '@/features/websites/components/certificate-apply-modal';
 import { getCertificateStatus, getErrorMessage } from '@/features/websites/utils';
 import {
  DangerButton,
@@ -38,11 +40,13 @@ export function TlsCertificatesPage() {
  const queryClient = useQueryClient();
  const [feedback, setFeedback] = useState<FeedbackState | null>(null);
  const [isImportOpen, setIsImportOpen] = useState(false);
+  const [isApplyOpen, setIsApplyOpen] = useState(false);
  const [selectedCertificateId, setSelectedCertificateId] = useState<
    number | null
  >(null);
  const [isDetailOpen, setIsDetailOpen] = useState(false);
  const [isEditorOpen, setIsEditorOpen] = useState(false);
+  const [editAcmeCertificate, setEditAcmeCertificate] = useState<TlsCertificateItem | null>(null);

  const certificatesQuery = useQuery({
    queryKey: certificatesQueryKey,
@@ -60,6 +64,17 @@ export function TlsCertificatesPage() {
    },
  });

+  const renewCertificateMutation = useMutation({
+    mutationFn: renewTlsCertificate,
+    onSuccess: async (cert) => {
+      setFeedback({ tone: 'success', message: `证书 ${cert.name} 续期任务已提交。` });
+      await queryClient.invalidateQueries({ queryKey: ['tls-certificates'] });
+    },
+    onError: (error) => {
+      setFeedback({ tone: 'danger', message: getErrorMessage(error) });
+    },
+  });
+
  const certificates = useMemo(
    () => certificatesQuery.data ?? [],
    [certificatesQuery.data],
@@ -74,14 +89,27 @@ export function TlsCertificatesPage() {
    deleteCertificateMutation.mutate(certificate.id);
  };

+  const handleRenewCertificate = (certificate: TlsCertificateItem) => {
+    if (!window.confirm(`确认提交证书 ${certificate.name} 的续期申请吗？`)) {
+      return;
+    }
+
+    setFeedback(null);
+    renewCertificateMutation.mutate(certificate.id);
+  };
+
  const handleOpenCertificateDetail = (certificate: TlsCertificateItem) => {
    setSelectedCertificateId(certificate.id);
    setIsDetailOpen(true);
  };

  const handleOpenCertificateEditor = (certificate: TlsCertificateItem) => {
-    setSelectedCertificateId(certificate.id);
-    setIsEditorOpen(true);
+    if (certificate.provider === 'acme') {
+      setEditAcmeCertificate(certificate);
+    } else {
+      setSelectedCertificateId(certificate.id);
+      setIsEditorOpen(true);
+    }
  };

  return (
@@ -108,8 +136,17 @@ export function TlsCertificatesPage() {
              >
                刷新证书
              </SecondaryButton>
+              <Link
+                href="/dns-account"
+                className="inline-flex min-h-[46px] items-center justify-center rounded-2xl border border-[var(--border-default)] bg-[var(--control-background)] px-4 py-3 text-sm font-medium text-[var(--foreground-primary)] transition hover:bg-[var(--control-background-hover)]"
+              >
+                DNS 账号
+              </Link>
              <PrimaryButton type="button" onClick={() => setIsImportOpen(true)}>
-                添加证书
+                导入证书
+              </PrimaryButton>
+              <PrimaryButton type="button" onClick={() => setIsApplyOpen(true)}>
+                申请证书
              </PrimaryButton>
            </div>
          }
@@ -159,6 +196,9 @@ export function TlsCertificatesPage() {
                        <div className="text-xs leading-5 text-[var(--foreground-secondary)]">
                          <p>生效：{formatDateTime(certificate.not_before)}</p>
                          <p>到期：{formatDateTime(certificate.not_after)}</p>
+                          <p>来源：{certificate.provider === 'acme' ? 'ACME 申请' : '手动上传'}</p>
+                          {certificate.apply_status === 'applying' && <p className="text-blue-500">状态：申请中...</p>}
+                          {certificate.apply_status === 'error' && <p className="text-red-500">状态：申请失败 ({certificate.apply_message})</p>}
                          <p>备注：{certificate.remark || '暂无备注'}</p>
                        </div>
                      </div>
@@ -178,6 +218,16 @@ export function TlsCertificatesPage() {
                        >
                          编辑
                        </SecondaryButton>
+                        {certificate.provider === 'acme' && (
+                          <SecondaryButton
+                            type="button"
+                            onClick={() => handleRenewCertificate(certificate)}
+                            disabled={renewCertificateMutation.isPending}
+                            className="px-3 py-2 text-xs"
+                          >
+                            续期
+                          </SecondaryButton>
+                        )}
                        <DangerButton
                          type="button"
                          onClick={() => handleDeleteCertificate(certificate)}
@@ -209,6 +259,33 @@ export function TlsCertificatesPage() {
        />
      ) : null}

+      {isApplyOpen ? (
+        <CertificateApplyModal
+          isOpen={isApplyOpen}
+          onClose={() => setIsApplyOpen(false)}
+          onApplied={(certificate) => {
+            setFeedback({
+              tone: 'success',
+              message: `证书 ${certificate.name} 申请任务已提交。`,
+            });
+          }}
+        />
+      ) : null}
+
+      {editAcmeCertificate ? (
+        <CertificateApplyModal
+          isOpen={true}
+          onClose={() => setEditAcmeCertificate(null)}
+          editCertificate={editAcmeCertificate}
+          onApplied={(certificate) => {
+            setFeedback({
+              tone: 'success',
+              message: `证书 ${certificate.name} 配置已更新，重新申请中...`,
+            });
+          }}
+        />
+      ) : null}
+
      {isDetailOpen ? (
        <CertificateDetailModal
          certificateId={selectedCertificateId}
@@ -216,7 +293,12 @@ export function TlsCertificatesPage() {
          onClose={() => setIsDetailOpen(false)}
          onEdit={() => {
            setIsDetailOpen(false);
-            setIsEditorOpen(true);
+            const certificate = certificates.find(
+              (item) => item.id === selectedCertificateId,
+            );
+            if (certificate) {
+              handleOpenCertificateEditor(certificate);
+            }
          }}
          onDelete={() => {
            const certificate = certificates.find(
@@ -3,6 +3,19 @@ export interface TlsCertificateItem {
  name: string;
  cert_pem?: string;
  key_pem?: string;
+  provider: string;
+  acme_account_id: number;
+  dns_account_id: number;
+  key_algorithm: string;
+  auto_renew: boolean;
+  primary_domain: string;
+  other_domains: string;
+  disable_cname: boolean;
+  skip_dns: boolean;
+  dns1: string;
+  dns2: string;
+  apply_status: string;
+  apply_message: string;
  not_before: string;
  not_after: string;
  remark: string;
@@ -27,6 +40,21 @@ export interface TlsCertificateMutationPayload {
  remark: string;
 }

+export interface TlsCertificateApplyPayload {
+  name: string;
+  remark: string;
+  acme_account_id: number;
+  dns_account_id: number;
+  key_algorithm: string;
+  auto_renew: boolean;
+  primary_domain: string;
+  other_domains: string;
+  disable_cname: boolean;
+  skip_dns: boolean;
+  dns1: string;
+  dns2: string;
+}
+
 export interface TlsCertificateFileImportPayload {
  name: string;
  remark: string;
@@ -0,0 +1,250 @@
+'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 { InlineMessage } from '@/components/feedback/inline-message';
+import { AppModal } from '@/components/ui/app-modal';
+import { applyTlsCertificate, updateAcmeCertificate } from '@/features/tls-certificates/api/tls-certificates';
+import type { TlsCertificateItem } from '@/features/tls-certificates/types';
+import { getDnsAccounts } from '@/features/dns-accounts/api/dns-accounts';
+import { getDefaultAcmeAccount } from '@/features/acme-accounts/api/acme-accounts';
+import {
+  acmeApplySchema,
+  defaultAcmeApplyValues,
+  type AcmeApplyFormValues,
+} from '@/features/websites/schemas';
+import { getErrorMessage } from '@/features/websites/utils';
+import {
+  PrimaryButton,
+  ResourceField,
+  ResourceInput,
+  ResourceSelect,
+  ToggleField,
+} from '@/features/shared/components/resource-primitives';
+
+interface CertificateApplyModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onApplied?: (certificate: TlsCertificateItem) => void;
+  editCertificate?: TlsCertificateItem | null;
+}
+
+export function CertificateApplyModal({
+  isOpen,
+  onClose,
+  onApplied,
+  editCertificate,
+}: CertificateApplyModalProps) {
+  const queryClient = useQueryClient();
+  const [feedback, setFeedback] = useState<{ tone: 'success' | 'danger'; message: string } | null>(null);
+  const [showAdvanced, setShowAdvanced] = useState(false);
+
+  const dnsAccountsQuery = useQuery({
+    queryKey: ['dns-accounts'],
+    queryFn: getDnsAccounts,
+    enabled: isOpen,
+  });
+
+  const defaultAcmeAccountQuery = useQuery({
+    queryKey: ['acme-accounts', 'default'],
+    queryFn: getDefaultAcmeAccount,
+    enabled: isOpen,
+  });
+
+  const form = useForm<AcmeApplyFormValues>({
+    resolver: zodResolver(acmeApplySchema),
+    defaultValues: defaultAcmeApplyValues,
+  });
+
+  useEffect(() => {
+    if (!isOpen) return;
+    setFeedback(null);
+    setShowAdvanced(false);
+    
+    if (editCertificate) {
+      form.reset({
+        name: editCertificate.name,
+        primary_domain: editCertificate.primary_domain || '',
+        other_domains: editCertificate.other_domains || '',
+        remark: editCertificate.remark || '',
+        acme_account_id: editCertificate.acme_account_id,
+        dns_account_id: editCertificate.dns_account_id,
+        key_algorithm: editCertificate.key_algorithm as any || 'EC256',
+        auto_renew: editCertificate.auto_renew,
+        dns1: editCertificate.dns1 || '',
+        dns2: editCertificate.dns2 || '',
+        disable_cname: editCertificate.disable_cname,
+        skip_dns: editCertificate.skip_dns,
+      });
+      if (editCertificate.dns1 || editCertificate.dns2 || editCertificate.disable_cname || editCertificate.skip_dns) {
+        setShowAdvanced(true);
+      }
+    } else {
+      form.reset(defaultAcmeApplyValues);
+    }
+  }, [isOpen, form, editCertificate]);
+
+  useEffect(() => {
+    if (defaultAcmeAccountQuery.data) {
+      form.setValue('acme_account_id', defaultAcmeAccountQuery.data.id);
+    }
+  }, [defaultAcmeAccountQuery.data, form]);
+
+  const applyMutation = useMutation({
+    mutationFn: (values: AcmeApplyFormValues) => 
+      editCertificate 
+        ? updateAcmeCertificate(editCertificate.id, values)
+        : applyTlsCertificate(values),
+    onSuccess: async (certificate) => {
+      await queryClient.invalidateQueries({ queryKey: ['tls-certificates'] });
+      onApplied?.(certificate);
+      onClose();
+    },
+    onError: (error) => {
+      setFeedback({ tone: 'danger', message: getErrorMessage(error) });
+    },
+  });
+
+  const onSubmit = form.handleSubmit((values) => {
+    setFeedback(null);
+    applyMutation.mutate(values);
+  });
+
+  return (
+    <AppModal
+      isOpen={isOpen}
+      onClose={onClose}
+      title={editCertificate ? "编辑并重新申请证书" : "申请证书"}
+      description={editCertificate ? "修改 ACME 证书配置。保存后将使用新配置重新申请证书。" : "使用 ACME (Let's Encrypt 等) 自动申请和续期证书，支持通配符域名。"}
+      size="xl"
+    >
+      <form className="space-y-5" onSubmit={onSubmit}>
+        {feedback ? (
+          <InlineMessage tone={feedback.tone} message={feedback.message} />
+        ) : null}
+
+        <div className="grid gap-4 md:grid-cols-2">
+          <ResourceField
+            label="证书名称"
+            error={form.formState.errors.name?.message}
+          >
+            <ResourceInput placeholder="例如：主站证书" {...form.register('name')} />
+          </ResourceField>
+          <ResourceField
+            label="主域名"
+            error={form.formState.errors.primary_domain?.message}
+          >
+            <ResourceInput placeholder="example.com 或 *.example.com" {...form.register('primary_domain')} />
+          </ResourceField>
+        </div>
+
+        <ResourceField
+          label="其他域名"
+          hint="每行一个域名。如申请通配符证书，请填写对应的根域名以便一并签发。"
+          error={form.formState.errors.other_domains?.message}
+        >
+          <textarea
+            className="w-full rounded-xl border border-[var(--border-default)] bg-[var(--control-background)] px-4 py-3 text-sm text-[var(--foreground-primary)] outline-none transition focus:border-[var(--brand-primary)]"
+            rows={3}
+            placeholder="example.net"
+            {...form.register('other_domains')}
+          />
+        </ResourceField>
+
+        <div className="grid gap-4 md:grid-cols-2">
+          <ResourceField
+            label="DNS 服务商账号"
+            error={form.formState.errors.dns_account_id?.message}
+          >
+            <ResourceSelect {...form.register('dns_account_id')}>
+              <option value={0}>请选择 DNS 账号</option>
+              {dnsAccountsQuery.data?.map((acc) => (
+                <option key={acc.id} value={acc.id}>
+                  {acc.name} ({acc.type})
+                </option>
+              ))}
+            </ResourceSelect>
+          </ResourceField>
+
+          <ResourceField
+            label="密钥算法"
+            error={form.formState.errors.key_algorithm?.message}
+          >
+            <ResourceSelect {...form.register('key_algorithm')}>
+              <option value="RSA2048">RSA 2048</option>
+              <option value="RSA4096">RSA 4096</option>
+              <option value="EC256">ECC 256</option>
+              <option value="EC384">ECC 384</option>
+            </ResourceSelect>
+          </ResourceField>
+        </div>
+
+        <ResourceField
+          label="备注"
+          error={form.formState.errors.remark?.message}
+        >
+          <ResourceInput placeholder="可选，用于记录证书用途。" {...form.register('remark')} />
+        </ResourceField>
+
+        <div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] overflow-hidden">
+          <button
+            type="button"
+            className="flex w-full items-center justify-between px-4 py-3 text-sm font-medium text-[var(--foreground-primary)] transition hover:bg-[var(--surface-muted)]"
+            onClick={() => setShowAdvanced(!showAdvanced)}
+          >
+            <span>高级选项</span>
+            <svg
+              className={`h-4 w-4 transition-transform duration-200 ${showAdvanced ? 'rotate-180' : ''}`}
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+            </svg>
+          </button>
+          {showAdvanced && (
+            <div className="space-y-4 border-t border-[var(--border-default)] px-4 py-4">
+              <div className="grid gap-4 md:grid-cols-2">
+                <ResourceField
+                  label="DNS 验证服务器 1"
+                  hint="可选，如 8.8.8.8"
+                  error={form.formState.errors.dns1?.message}
+                >
+                  <ResourceInput placeholder="为空则使用默认权威 DNS" {...form.register('dns1')} />
+                </ResourceField>
+                <ResourceField
+                  label="DNS 验证服务器 2"
+                  hint="可选，如 1.1.1.1"
+                  error={form.formState.errors.dns2?.message}
+                >
+                  <ResourceInput placeholder="为空则使用默认权威 DNS" {...form.register('dns2')} />
+                </ResourceField>
+              </div>
+              <div className="grid gap-4 md:grid-cols-2">
+                <ToggleField
+                  label="跳过 CNAME 检查"
+                  description="在执行 DNS-01 验证时不追踪 CNAME 记录。"
+                  checked={form.watch('disable_cname')}
+                  onChange={(checked) => form.setValue('disable_cname', checked)}
+                />
+                <ToggleField
+                  label="跳过 DNS 前置检查"
+                  description="直接请求 Let's Encrypt 验证而不做本地校验。"
+                  checked={form.watch('skip_dns')}
+                  onChange={(checked) => form.setValue('skip_dns', checked)}
+                />
+              </div>
+            </div>
+          )}
+        </div>
+
+        <PrimaryButton type="submit" disabled={applyMutation.isPending}>
+          {applyMutation.isPending ? '提交中...' : (editCertificate ? '保存并申请' : '开始申请')}
+        </PrimaryButton>
+      </form>
+    </AppModal>
+  );
+}
@@ -65,3 +65,36 @@ 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.coerce.number().min(1, '请选择 DNS 账号'),
+  acme_account_id: z.coerce.number(),
+  key_algorithm: z.string(),
+  auto_renew: z.boolean(),
+  disable_cname: z.boolean().default(false),
+  skip_dns: z.boolean().default(false),
+  dns1: z.string().default(''),
+  dns2: z.string().default(''),
+  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: '',
+};
+