[新增] 添加转换上传的 TLS 证书为 ACME 管理证书的功能

2026-10-04 15:06:37 +08:00 · 2026-05-26 21:06:50 +08:00
parent 112694f860
commit e3c84c017a
14 changed files with 2821 additions and 572 deletions
@@ -158,15 +158,15 @@ function DnsAccountCreateModal({ isOpen, onClose, onCreated }: { isOpen: boolean
      <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: '请输入名称' })} />
+          <ResourceInput placeholder="Cloudlfare 邮箱账号" {...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 label="API Token" hint="请勿使用 Global API Key">
+          <ResourceInput {...register('authorization', { required: '请输入 Token' })} />
        </ResourceField>
        <PrimaryButton type="submit" disabled={createMutation.isPending}>
          {createMutation.isPending ? '提交中...' : '提交'}
@@ -25,7 +25,9 @@ export function getTlsCertificate(id: number) {
 }

 export function getTlsCertificateContent(id: number) {
-  return apiRequest<TlsCertificateContentItem>(`/tls-certificates/${id}/content`);
+  return apiRequest<TlsCertificateContentItem>(
+    `/tls-certificates/${id}/content`,
+  );
 }

 export function updateTlsCertificate(
@@ -38,7 +40,9 @@ export function updateTlsCertificate(
  });
 }

-export function importTlsCertificateFiles(payload: TlsCertificateFileImportPayload) {
+export function importTlsCertificateFiles(
+  payload: TlsCertificateFileImportPayload,
+) {
  const formData = new FormData();
  formData.append('name', payload.name);
  formData.append('remark', payload.remark);
@@ -53,7 +57,7 @@ export function importTlsCertificateFiles(payload: TlsCertificateFileImportPaylo

 export function deleteTlsCertificate(id: number) {
  return apiRequest<void>(`/tls-certificates/${id}/delete`, {
-	method: 'POST',
+    method: 'POST',
  });
 }

@@ -70,9 +74,25 @@ export function renewTlsCertificate(id: number) {
  });
 }

-export function updateAcmeCertificate(id: number, payload: TlsCertificateApplyPayload) {
+export function updateAcmeCertificate(
+  id: number,
+  payload: TlsCertificateApplyPayload,
+) {
  return apiRequest<TlsCertificateItem>(`/tls-certificates/${id}/update-acme`, {
    method: 'POST',
    body: JSON.stringify(payload),
  });
 }
+
+export function convertTlsCertificateToAcme(
+  id: number,
+  payload: TlsCertificateApplyPayload,
+) {
+  return apiRequest<TlsCertificateItem>(
+    `/tls-certificates/${id}/convert-acme`,
+    {
+      method: 'POST',
+      body: JSON.stringify(payload),
+    },
+  );
+}
@@ -21,7 +21,10 @@ import { CertificateDetailModal } from '@/features/websites/components/certifica
 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 {
+  getCertificateStatus,
+  getErrorMessage,
+} from '@/features/websites/utils';
 import {
  DangerButton,
  PrimaryButton,
@@ -35,6 +38,7 @@ type FeedbackState = {
 };

 const certificatesQueryKey = ['tls-certificates', 'list'] as const;
+type CertificateApplyMode = 'edit-acme' | 'convert-upload';

 export function TlsCertificatesPage() {
  const queryClient = useQueryClient();
@@ -46,7 +50,9 @@ export function TlsCertificatesPage() {
  >(null);
  const [isDetailOpen, setIsDetailOpen] = useState(false);
  const [isEditorOpen, setIsEditorOpen] = useState(false);
-  const [editAcmeCertificate, setEditAcmeCertificate] = useState<TlsCertificateItem | null>(null);
+  const [applyCertificate, setApplyCertificate] =
+    useState<TlsCertificateItem | null>(null);
+  const [applyMode, setApplyMode] = useState<CertificateApplyMode>('edit-acme');

  const certificatesQuery = useQuery({
    queryKey: certificatesQueryKey,
@@ -67,7 +73,10 @@ export function TlsCertificatesPage() {
  const renewCertificateMutation = useMutation({
    mutationFn: renewTlsCertificate,
    onSuccess: async (cert) => {
-      setFeedback({ tone: 'success', message: `证书 ${cert.name} 续期任务已提交。` });
+      setFeedback({
+        tone: 'success',
+        message: `证书 ${cert.name} 续期任务已提交。`,
+      });
      await queryClient.invalidateQueries({ queryKey: ['tls-certificates'] });
    },
    onError: (error) => {
@@ -105,7 +114,8 @@ export function TlsCertificatesPage() {

  const handleOpenCertificateEditor = (certificate: TlsCertificateItem) => {
    if (certificate.provider === 'acme') {
-      setEditAcmeCertificate(certificate);
+      setApplyMode('edit-acme');
+      setApplyCertificate(certificate);
    } else {
      setSelectedCertificateId(certificate.id);
      setIsEditorOpen(true);
@@ -142,7 +152,10 @@ export function TlsCertificatesPage() {
              >
                DNS 账号
              </Link>
-              <PrimaryButton type="button" onClick={() => setIsImportOpen(true)}>
+              <PrimaryButton
+                type="button"
+                onClick={() => setIsImportOpen(true)}
+              >
                导入证书
              </PrimaryButton>
              <PrimaryButton type="button" onClick={() => setIsApplyOpen(true)}>
@@ -196,9 +209,28 @@ 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.provider === 'acme'
+                              ? 'ACME 申请'
+                              : '手动上传'}
+                          </p>
+                          {certificate.provider === 'upload' &&
+                          certificate.apply_status === 'applying' ? (
+                            <p className="text-blue-500">状态：转换申请中...</p>
+                          ) : certificate.apply_status === 'applying' ? (
+                            <p className="text-blue-500">状态：申请中...</p>
+                          ) : null}
+                          {certificate.provider === 'upload' &&
+                          certificate.apply_status === 'error' ? (
+                            <p className="text-red-500">
+                              状态：转换失败 ({certificate.apply_message})
+                            </p>
+                          ) : certificate.apply_status === 'error' ? (
+                            <p className="text-red-500">
+                              状态：申请失败 ({certificate.apply_message})
+                            </p>
+                          ) : null}
                          <p>备注：{certificate.remark || '暂无备注'}</p>
                        </div>
                      </div>
@@ -206,14 +238,18 @@ export function TlsCertificatesPage() {
                      <div className="flex flex-wrap gap-2">
                        <SecondaryButton
                          type="button"
-                          onClick={() => handleOpenCertificateDetail(certificate)}
+                          onClick={() =>
+                            handleOpenCertificateDetail(certificate)
+                          }
                          className="px-3 py-2 text-xs"
                        >
                          查看
                        </SecondaryButton>
                        <SecondaryButton
                          type="button"
-                          onClick={() => handleOpenCertificateEditor(certificate)}
+                          onClick={() =>
+                            handleOpenCertificateEditor(certificate)
+                          }
                          className="px-3 py-2 text-xs"
                        >
                          编辑
@@ -272,15 +308,19 @@ export function TlsCertificatesPage() {
        />
      ) : null}

-      {editAcmeCertificate ? (
+      {applyCertificate ? (
        <CertificateApplyModal
          isOpen={true}
-          onClose={() => setEditAcmeCertificate(null)}
-          editCertificate={editAcmeCertificate}
+          onClose={() => setApplyCertificate(null)}
+          mode={applyMode}
+          certificate={applyCertificate}
          onApplied={(certificate) => {
            setFeedback({
              tone: 'success',
-              message: `证书 ${certificate.name} 配置已更新，重新申请中...`,
+              message:
+                applyMode === 'convert-upload'
+                  ? `证书 ${certificate.name} 转换申请已提交。`
+                  : `证书 ${certificate.name} 配置已更新，重新申请中...`,
            });
          }}
        />
@@ -324,6 +364,11 @@ export function TlsCertificatesPage() {
              message: `证书 ${certificate.name} 已更新。`,
            });
          }}
+          onConvert={(certificate) => {
+            setIsEditorOpen(false);
+            setApplyMode('convert-upload');
+            setApplyCertificate(certificate);
+          }}
        />
      ) : null}
    </>
@@ -7,7 +7,11 @@ 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 {
+  applyTlsCertificate,
+  convertTlsCertificateToAcme,
+  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';
@@ -29,17 +33,22 @@ interface CertificateApplyModalProps {
  isOpen: boolean;
  onClose: () => void;
  onApplied?: (certificate: TlsCertificateItem) => void;
-  editCertificate?: TlsCertificateItem | null;
+  mode?: 'create' | 'edit-acme' | 'convert-upload';
+  certificate?: TlsCertificateItem | null;
 }

 export function CertificateApplyModal({
  isOpen,
  onClose,
  onApplied,
-  editCertificate,
+  mode = 'create',
+  certificate,
 }: CertificateApplyModalProps) {
  const queryClient = useQueryClient();
-  const [feedback, setFeedback] = useState<{ tone: 'success' | 'danger'; message: string } | null>(null);
+  const [feedback, setFeedback] = useState<{
+    tone: 'success' | 'danger';
+    message: string;
+  } | null>(null);
  const [showAdvanced, setShowAdvanced] = useState(false);

  const dnsAccountsQuery = useQuery({
@@ -63,41 +72,59 @@ export function CertificateApplyModal({
    if (!isOpen) return;
    setFeedback(null);
    setShowAdvanced(false);
-    
-    if (editCertificate) {
+
+    if (certificate) {
      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,
+        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: 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 (editCertificate.dns1 || editCertificate.dns2 || editCertificate.disable_cname || editCertificate.skip_dns) {
+      if (
+        mode !== 'convert-upload' &&
+        (certificate.dns1 ||
+          certificate.dns2 ||
+          certificate.disable_cname ||
+          certificate.skip_dns)
+      ) {
        setShowAdvanced(true);
      }
    } else {
      form.reset(defaultAcmeApplyValues);
    }
-  }, [isOpen, form, editCertificate]);
+  }, [isOpen, form, mode, certificate]);

  useEffect(() => {
-    if (defaultAcmeAccountQuery.data) {
+    if (
+      defaultAcmeAccountQuery.data &&
+      form.getValues('acme_account_id') === 0
+    ) {
      form.setValue('acme_account_id', defaultAcmeAccountQuery.data.id);
    }
-  }, [defaultAcmeAccountQuery.data, form]);
+  }, [defaultAcmeAccountQuery.data, form, isOpen]);

  const applyMutation = useMutation({
-    mutationFn: (values: AcmeApplyFormValues) => 
-      editCertificate 
-        ? updateAcmeCertificate(editCertificate.id, values)
-        : applyTlsCertificate(values),
+    mutationFn: (values: AcmeApplyFormValues) => {
+      if (mode === 'edit-acme' && certificate) {
+        return updateAcmeCertificate(certificate.id, values);
+      }
+      if (mode === 'convert-upload' && certificate) {
+        return convertTlsCertificateToAcme(certificate.id, values);
+      }
+      return applyTlsCertificate(values);
+    },
    onSuccess: async (certificate) => {
      await queryClient.invalidateQueries({ queryKey: ['tls-certificates'] });
      onApplied?.(certificate);
@@ -117,8 +144,20 @@ export function CertificateApplyModal({
    <AppModal
      isOpen={isOpen}
      onClose={onClose}
-      title={editCertificate ? "编辑并重新申请证书" : "申请证书"}
-      description={editCertificate ? "修改 ACME 证书配置。保存后将使用新配置重新申请证书。" : "使用 ACME (Let's Encrypt 等) 自动申请和续期证书，支持通配符域名。"}
+      title={
+        mode === 'edit-acme'
+          ? '编辑并重新申请证书'
+          : mode === 'convert-upload'
+            ? '转换为申请证书'
+            : '申请证书'
+      }
+      description={
+        mode === 'edit-acme'
+          ? '修改 ACME 证书配置。保存后将使用新配置重新申请证书。'
+          : mode === 'convert-upload'
+            ? '填写 ACME 申请资料。申请成功后，当前手动证书会原地转换为可自动续签的申请证书。'
+            : "使用 ACME (Let's Encrypt 等) 自动申请和续期证书，支持通配符域名。"
+      }
      size="xl"
    >
      <form className="space-y-5" onSubmit={onSubmit}>
@@ -131,13 +170,19 @@ export function CertificateApplyModal({
            label="证书名称"
            error={form.formState.errors.name?.message}
          >
-            <ResourceInput placeholder="例如：主站证书" {...form.register('name')} />
+            <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')} />
+            <ResourceInput
+              placeholder="example.com 或 *.example.com"
+              {...form.register('primary_domain')}
+            />
          </ResourceField>
        </div>

@@ -147,7 +192,7 @@ export function CertificateApplyModal({
          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)]"
+            className="w-full rounded-xl border border-[var(--border-default)] bg-[var(--control-background)] px-4 py-3 text-sm text-[var(--foreground-primary)] transition outline-none focus:border-[var(--brand-primary)]"
            rows={3}
            placeholder="example.net"
            {...form.register('other_domains')}
@@ -187,7 +232,10 @@ export function CertificateApplyModal({
            label="备注"
            error={form.formState.errors.remark?.message}
          >
-            <ResourceInput placeholder="可选，用于记录证书用途。" {...form.register('remark')} />
+            <ResourceInput
+              placeholder="可选，用于记录证书用途。"
+              {...form.register('remark')}
+            />
          </ResourceField>

          <ToggleField
@@ -198,7 +246,7 @@ export function CertificateApplyModal({
          />
        </div>

-        <div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] overflow-hidden">
+        <div className="overflow-hidden rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)]">
          <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)]"
@@ -211,7 +259,12 @@ export function CertificateApplyModal({
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M19 9l-7 7-7-7"
+              />
            </svg>
          </button>
          {showAdvanced && (
@@ -222,14 +275,20 @@ export function CertificateApplyModal({
                  hint="可选，如 8.8.8.8"
                  error={form.formState.errors.dns1?.message}
                >
-                  <ResourceInput placeholder="为空则使用默认权威 DNS" {...form.register('dns1')} />
+                  <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')} />
+                  <ResourceInput
+                    placeholder="为空则使用默认权威 DNS"
+                    {...form.register('dns2')}
+                  />
                </ResourceField>
              </div>
              <div className="grid gap-4 md:grid-cols-2">
@@ -237,7 +296,9 @@ export function CertificateApplyModal({
                  label="跳过 CNAME 检查"
                  description="在执行 DNS-01 验证时不追踪 CNAME 记录。"
                  checked={form.watch('disable_cname')}
-                  onChange={(checked) => form.setValue('disable_cname', checked)}
+                  onChange={(checked) =>
+                    form.setValue('disable_cname', checked)
+                  }
                />
                <ToggleField
                  label="跳过 DNS 前置检查"
@@ -251,7 +312,13 @@ export function CertificateApplyModal({
        </div>

        <PrimaryButton type="submit" disabled={applyMutation.isPending}>
-          {applyMutation.isPending ? '提交中...' : (editCertificate ? '保存并申请' : '开始申请')}
+          {applyMutation.isPending
+            ? '提交中...'
+            : mode === 'edit-acme'
+              ? '保存并申请'
+              : mode === 'convert-upload'
+                ? '开始转换'
+                : '开始申请'}
        </PrimaryButton>
      </form>
    </AppModal>
@@ -34,6 +34,7 @@ interface CertificateEditorModalProps {
  isOpen: boolean;
  onClose: () => void;
  onSaved?: (certificate: TlsCertificateItem) => void;
+  onConvert?: (certificate: TlsCertificateItem) => void;
 }

 export function CertificateEditorModal({
@@ -41,6 +42,7 @@ export function CertificateEditorModal({
  isOpen,
  onClose,
  onSaved,
+  onConvert,
 }: CertificateEditorModalProps) {
  const queryClient = useQueryClient();
  const form = useForm<ManualImportFormValues>({
@@ -90,6 +92,10 @@ export function CertificateEditorModal({
    onClose();
  };

+  const canConvert =
+    certificateQuery.data?.provider === 'upload' &&
+    certificateQuery.data.apply_status !== 'applying';
+
  return (
    <AppModal
      isOpen={isOpen}
@@ -98,21 +104,38 @@ export function CertificateEditorModal({
      description="可以修改证书名称、备注，以及重新上传 PEM 证书和私钥内容。"
      size="xl"
      footer={
-        <div className="flex flex-wrap justify-end gap-3">
-          <SecondaryButton
-            type="button"
-            onClick={handleClose}
-            disabled={updateMutation.isPending}
-          >
-            取消
-          </SecondaryButton>
-          <PrimaryButton
-            type="submit"
-            form="certificate-editor-form"
-            disabled={updateMutation.isPending || certificateQuery.isLoading}
-          >
-            {updateMutation.isPending ? '保存中...' : '保存证书'}
-          </PrimaryButton>
+        <div className="flex flex-wrap items-center justify-between gap-3">
+          <div>
+            {canConvert ? (
+              <SecondaryButton
+                type="button"
+                onClick={() => {
+                  if (certificateQuery.data) {
+                    onConvert?.(certificateQuery.data);
+                  }
+                }}
+                disabled={updateMutation.isPending}
+              >
+                转换来源
+              </SecondaryButton>
+            ) : null}
+          </div>
+          <div className="flex flex-wrap justify-end gap-3">
+            <SecondaryButton
+              type="button"
+              onClick={handleClose}
+              disabled={updateMutation.isPending}
+            >
+              取消
+            </SecondaryButton>
+            <PrimaryButton
+              type="submit"
+              form="certificate-editor-form"
+              disabled={updateMutation.isPending || certificateQuery.isLoading}
+            >
+              {updateMutation.isPending ? '保存中...' : '保存证书'}
+            </PrimaryButton>
+          </div>
        </div>
      }
    >
@@ -124,10 +147,7 @@ export function CertificateEditorModal({
          description={getErrorMessage(certificateQuery.error)}
        />
      ) : !certificateQuery.data ? (
-        <EmptyState
-          title="证书不存在"
-          description="当前证书可能已被删除。"
-        />
+        <EmptyState title="证书不存在" description="当前证书可能已被删除。" />
      ) : (
        <form
          id="certificate-editor-form"