mirror of
https://github.com/Rain-kl/OpenFlare.git
synced 2026-10-07 16:16:37 +08:00
feat: add managed domains and TLS certificates management features
- Implemented ApplyLogItem interface for logging purposes. - Created API functions for managing domains including CRUD operations. - Developed ManagedDomainsPage component for domain management UI with form handling and state management. - Defined ManagedDomainItem and related types for domain data structure. - Added API functions for managing TLS certificates including creation, deletion, and file import. - Built TlsCertificatesPage component for certificate management with manual and file import options. - Introduced types for TLS certificate items and mutation payloads.
This commit is contained in:
ryan
@@ -0,0 +1,426 @@
|
||||
'use client';
|
||||
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import { useMemo, useState, type FormEvent } from 'react';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { z } from 'zod';
|
||||
|
||||
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 { StatusBadge } from '@/components/ui/status-badge';
|
||||
import {
|
||||
createTlsCertificate,
|
||||
deleteTlsCertificate,
|
||||
getTlsCertificates,
|
||||
importTlsCertificateFiles,
|
||||
} from '@/features/tls-certificates/api/tls-certificates';
|
||||
import type {
|
||||
TlsCertificateFileImportPayload,
|
||||
TlsCertificateItem,
|
||||
TlsCertificateMutationPayload,
|
||||
} from '@/features/tls-certificates/types';
|
||||
import {
|
||||
DangerButton,
|
||||
PrimaryButton,
|
||||
ResourceField,
|
||||
ResourceInput,
|
||||
ResourceTextarea,
|
||||
SecondaryButton,
|
||||
} from '@/features/shared/components/resource-primitives';
|
||||
import { formatDateTime } from '@/lib/utils/date';
|
||||
|
||||
const tlsCertificatesQueryKey = ['tls-certificates', 'list'] as const;
|
||||
|
||||
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 个字符'),
|
||||
});
|
||||
|
||||
type ManualImportFormValues = z.infer<typeof manualImportSchema>;
|
||||
|
||||
type FileImportFormValues = {
|
||||
name: string;
|
||||
remark: string;
|
||||
};
|
||||
|
||||
type FeedbackState = {
|
||||
tone: 'info' | 'success' | 'danger';
|
||||
message: string;
|
||||
};
|
||||
|
||||
const defaultManualValues: ManualImportFormValues = {
|
||||
name: '',
|
||||
cert_pem: '',
|
||||
key_pem: '',
|
||||
remark: '',
|
||||
};
|
||||
|
||||
const defaultFileValues: FileImportFormValues = {
|
||||
name: '',
|
||||
remark: '',
|
||||
};
|
||||
|
||||
function getErrorMessage(error: unknown) {
|
||||
return error instanceof Error ? error.message : '请求失败，请稍后重试。';
|
||||
}
|
||||
|
||||
function getCertificateStatus(certificate: TlsCertificateItem) {
|
||||
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: '有效期未知', variant: 'warning' as const };
|
||||
}
|
||||
|
||||
if (days < 0) {
|
||||
return { label: '已过期', variant: 'danger' as const };
|
||||
}
|
||||
|
||||
if (days <= 30) {
|
||||
return { label: `${days} 天内到期`, variant: 'warning' as const };
|
||||
}
|
||||
|
||||
return { label: '有效', variant: 'success' as const };
|
||||
}
|
||||
|
||||
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(),
|
||||
};
|
||||
}
|
||||
|
||||
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 TlsCertificatesPage() {
|
||||
const queryClient = useQueryClient();
|
||||
const [feedback, setFeedback] = useState<FeedbackState | null>(null);
|
||||
const [fileForm, setFileForm] = useState<FileImportFormValues>(defaultFileValues);
|
||||
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: defaultManualValues,
|
||||
});
|
||||
|
||||
const certificatesQuery = useQuery({
|
||||
queryKey: tlsCertificatesQueryKey,
|
||||
queryFn: getTlsCertificates,
|
||||
});
|
||||
|
||||
const manualImportMutation = useMutation({
|
||||
mutationFn: async (values: ManualImportFormValues) => createTlsCertificate(toManualPayload(values)),
|
||||
onSuccess: async () => {
|
||||
setFeedback({ tone: 'success', message: '证书已导入。' });
|
||||
manualForm.reset(defaultManualValues);
|
||||
await queryClient.invalidateQueries({ queryKey: tlsCertificatesQueryKey });
|
||||
},
|
||||
onError: (error) => {
|
||||
setFeedback({ tone: 'danger', message: getErrorMessage(error) });
|
||||
},
|
||||
});
|
||||
|
||||
const fileImportMutation = useMutation({
|
||||
mutationFn: async (values: FileImportFormValues) =>
|
||||
importTlsCertificateFiles(toFilePayload(values, certFile, keyFile)),
|
||||
onSuccess: async () => {
|
||||
setFeedback({ tone: 'success', message: '证书文件已导入。' });
|
||||
setFileForm(defaultFileValues);
|
||||
setCertFile(null);
|
||||
setKeyFile(null);
|
||||
setFileInputNonce((value) => value + 1);
|
||||
await queryClient.invalidateQueries({ queryKey: tlsCertificatesQueryKey });
|
||||
},
|
||||
onError: (error) => {
|
||||
setFeedback({ tone: 'danger', message: getErrorMessage(error) });
|
||||
},
|
||||
});
|
||||
|
||||
const deleteMutation = useMutation({
|
||||
mutationFn: deleteTlsCertificate,
|
||||
onSuccess: async () => {
|
||||
setFeedback({ tone: 'success', message: '证书已删除。' });
|
||||
await queryClient.invalidateQueries({ queryKey: tlsCertificatesQueryKey });
|
||||
},
|
||||
onError: (error) => {
|
||||
setFeedback({ tone: 'danger', message: getErrorMessage(error) });
|
||||
},
|
||||
});
|
||||
|
||||
const certificates = useMemo(() => certificatesQuery.data ?? [], [certificatesQuery.data]);
|
||||
const summary = useMemo(
|
||||
() => [
|
||||
{ label: '证书总数', value: certificates.length },
|
||||
{
|
||||
label: '30 天内到期',
|
||||
value: certificates.filter((item) => {
|
||||
const expiresAt = new Date(item.not_after).getTime();
|
||||
if (Number.isNaN(expiresAt)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const diffMs = expiresAt - Date.now();
|
||||
return diffMs >= 0 && diffMs <= 30 * 24 * 60 * 60 * 1000;
|
||||
}).length,
|
||||
},
|
||||
{
|
||||
label: '已过期',
|
||||
value: certificates.filter((item) => {
|
||||
const expiresAt = new Date(item.not_after).getTime();
|
||||
return !Number.isNaN(expiresAt) && expiresAt < Date.now();
|
||||
}).length,
|
||||
},
|
||||
{ label: '最近更新', value: certificates[0] ? formatDateTime(certificates[0].updated_at) : '—' },
|
||||
],
|
||||
[certificates],
|
||||
);
|
||||
|
||||
const handleManualSubmit = manualForm.handleSubmit((values) => {
|
||||
setFeedback(null);
|
||||
manualImportMutation.mutate(values);
|
||||
});
|
||||
|
||||
const handleFileSubmit = (event: FormEvent<HTMLFormElement>) => {
|
||||
event.preventDefault();
|
||||
setFeedback(null);
|
||||
fileImportMutation.mutate(fileForm);
|
||||
};
|
||||
|
||||
const handleDelete = (certificate: TlsCertificateItem) => {
|
||||
if (!window.confirm(`确认删除证书 ${certificate.name} 吗？`)) {
|
||||
return;
|
||||
}
|
||||
|
||||
setFeedback(null);
|
||||
deleteMutation.mutate(certificate.id);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className='space-y-6'>
|
||||
<PageHeader
|
||||
title='TLS 证书'
|
||||
description='支持手动粘贴 PEM 导入和文件上传导入，并展示证书有效期与到期风险。'
|
||||
/>
|
||||
|
||||
{feedback ? <InlineMessage tone={feedback.tone} message={feedback.message} /> : null}
|
||||
|
||||
<AppCard title='证书概览' description='上线前可先检查证书存量、过期风险与最近更新时间。'>
|
||||
<div className='grid gap-4 md:grid-cols-2 xl:grid-cols-4'>
|
||||
{summary.map((item) => (
|
||||
<div
|
||||
key={item.label}
|
||||
className='rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4'
|
||||
>
|
||||
<p className='text-xs uppercase tracking-[0.2em] text-[var(--foreground-muted)]'>{item.label}</p>
|
||||
<p className='mt-2 text-lg font-semibold text-[var(--foreground-primary)]'>{item.value}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</AppCard>
|
||||
|
||||
<div className='grid gap-6 xl:grid-cols-2'>
|
||||
<AppCard title='手动导入' description='直接粘贴 PEM 证书和私钥内容，适合快速录入已有证书。'>
|
||||
<form className='space-y-5' onSubmit={handleManualSubmit}>
|
||||
<div className='grid gap-4 md:grid-cols-2'>
|
||||
<ResourceField label='证书名称' error={manualForm.formState.errors.name?.message}>
|
||||
<ResourceInput placeholder='example-com' {...manualForm.register('name')} />
|
||||
</ResourceField>
|
||||
<ResourceField
|
||||
label='备注'
|
||||
hint='可选，用于记录证书用途或来源。'
|
||||
error={manualForm.formState.errors.remark?.message}
|
||||
>
|
||||
<ResourceInput placeholder='例如：主站生产证书' {...manualForm.register('remark')} />
|
||||
</ResourceField>
|
||||
</div>
|
||||
|
||||
<ResourceField label='证书 PEM' error={manualForm.formState.errors.cert_pem?.message}>
|
||||
<ResourceTextarea
|
||||
placeholder='-----BEGIN CERTIFICATE-----'
|
||||
className='min-h-40 font-mono text-xs'
|
||||
{...manualForm.register('cert_pem')}
|
||||
/>
|
||||
</ResourceField>
|
||||
|
||||
<ResourceField label='私钥 PEM' error={manualForm.formState.errors.key_pem?.message}>
|
||||
<ResourceTextarea
|
||||
placeholder='-----BEGIN PRIVATE KEY-----'
|
||||
className='min-h-40 font-mono text-xs'
|
||||
{...manualForm.register('key_pem')}
|
||||
/>
|
||||
</ResourceField>
|
||||
|
||||
<PrimaryButton type='submit' disabled={manualImportMutation.isPending}>
|
||||
{manualImportMutation.isPending ? '导入中...' : '导入证书'}
|
||||
</PrimaryButton>
|
||||
</form>
|
||||
</AppCard>
|
||||
|
||||
<AppCard title='文件导入' description='上传证书文件和私钥文件，适合直接复用现有 PEM 文件。'>
|
||||
<form className='space-y-5' onSubmit={handleFileSubmit}>
|
||||
<div className='grid gap-4 md:grid-cols-2'>
|
||||
<ResourceField label='证书名称'>
|
||||
<ResourceInput
|
||||
value={fileForm.name}
|
||||
onChange={(event) =>
|
||||
setFileForm((current) => ({ ...current, name: event.target.value }))
|
||||
}
|
||||
placeholder='wildcard-example'
|
||||
/>
|
||||
</ResourceField>
|
||||
<ResourceField label='备注' hint='可选，用于记录部署环境或域名范围。'>
|
||||
<ResourceInput
|
||||
value={fileForm.remark}
|
||||
onChange={(event) =>
|
||||
setFileForm((current) => ({ ...current, remark: event.target.value }))
|
||||
}
|
||||
placeholder='例如：泛域名生产证书'
|
||||
/>
|
||||
</ResourceField>
|
||||
</div>
|
||||
|
||||
<div className='grid gap-4 md:grid-cols-2'>
|
||||
<ResourceField
|
||||
label='证书文件'
|
||||
hint={certFile ? `已选择：${certFile.name}` : '请选择 PEM/CRT 文件'}
|
||||
>
|
||||
<ResourceInput
|
||||
key={`cert-${fileInputNonce}`}
|
||||
type='file'
|
||||
accept='.pem,.crt,.cer'
|
||||
onChange={(event) => setCertFile(event.target.files?.[0] ?? null)}
|
||||
/>
|
||||
</ResourceField>
|
||||
<ResourceField
|
||||
label='私钥文件'
|
||||
hint={keyFile ? `已选择：${keyFile.name}` : '请选择 KEY/PEM 文件'}
|
||||
>
|
||||
<ResourceInput
|
||||
key={`key-${fileInputNonce}`}
|
||||
type='file'
|
||||
accept='.key,.pem'
|
||||
onChange={(event) => setKeyFile(event.target.files?.[0] ?? null)}
|
||||
/>
|
||||
</ResourceField>
|
||||
</div>
|
||||
|
||||
<div className='flex flex-wrap gap-3'>
|
||||
<PrimaryButton type='submit' disabled={fileImportMutation.isPending}>
|
||||
{fileImportMutation.isPending ? '上传中...' : '上传文件'}
|
||||
</PrimaryButton>
|
||||
<SecondaryButton
|
||||
type='button'
|
||||
onClick={() => {
|
||||
setFileForm(defaultFileValues);
|
||||
setCertFile(null);
|
||||
setKeyFile(null);
|
||||
setFileInputNonce((value) => value + 1);
|
||||
}}
|
||||
disabled={fileImportMutation.isPending}
|
||||
>
|
||||
清空文件
|
||||
</SecondaryButton>
|
||||
</div>
|
||||
</form>
|
||||
</AppCard>
|
||||
</div>
|
||||
|
||||
<AppCard
|
||||
title='证书列表'
|
||||
description='展示证书有效期、到期状态与最近更新时间。删除前会提示确认。'
|
||||
action={
|
||||
<SecondaryButton
|
||||
type='button'
|
||||
onClick={() => void queryClient.invalidateQueries({ queryKey: tlsCertificatesQueryKey })}
|
||||
>
|
||||
刷新
|
||||
</SecondaryButton>
|
||||
}
|
||||
>
|
||||
{certificatesQuery.isLoading ? (
|
||||
<LoadingState />
|
||||
) : certificatesQuery.isError ? (
|
||||
<ErrorState title='证书列表加载失败' description={getErrorMessage(certificatesQuery.error)} />
|
||||
) : certificates.length === 0 ? (
|
||||
<EmptyState title='暂无证书' description='请先导入至少一张证书，再为 HTTPS 规则或域名绑定使用。' />
|
||||
) : (
|
||||
<div className='overflow-x-auto'>
|
||||
<table className='min-w-full divide-y divide-[var(--border-default)] text-left text-sm'>
|
||||
<thead>
|
||||
<tr className='text-[var(--foreground-secondary)]'>
|
||||
<th className='px-3 py-3 font-medium'>名称</th>
|
||||
<th className='px-3 py-3 font-medium'>状态</th>
|
||||
<th className='px-3 py-3 font-medium'>有效期</th>
|
||||
<th className='px-3 py-3 font-medium'>备注</th>
|
||||
<th className='px-3 py-3 font-medium'>更新时间</th>
|
||||
<th className='px-3 py-3 font-medium'>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className='divide-y divide-[var(--border-default)]'>
|
||||
{certificates.map((certificate) => {
|
||||
const status = getCertificateStatus(certificate);
|
||||
|
||||
return (
|
||||
<tr key={certificate.id} className='align-top'>
|
||||
<td className='px-3 py-4 font-medium text-[var(--foreground-primary)]'>{certificate.name}</td>
|
||||
<td className='px-3 py-4'>
|
||||
<StatusBadge label={status.label} variant={status.variant} />
|
||||
</td>
|
||||
<td className='px-3 py-4 text-[var(--foreground-secondary)]'>
|
||||
<div className='space-y-1'>
|
||||
<p>{formatDateTime(certificate.not_before)}</p>
|
||||
<p>{formatDateTime(certificate.not_after)}</p>
|
||||
</div>
|
||||
</td>
|
||||
<td className='px-3 py-4 text-[var(--foreground-secondary)]'>{certificate.remark || '—'}</td>
|
||||
<td className='px-3 py-4 text-[var(--foreground-secondary)]'>
|
||||
{formatDateTime(certificate.updated_at)}
|
||||
</td>
|
||||
<td className='px-3 py-4'>
|
||||
<DangerButton
|
||||
type='button'
|
||||
onClick={() => handleDelete(certificate)}
|
||||
disabled={deleteMutation.isPending}
|
||||
className='px-3 py-2 text-xs'
|
||||
>
|
||||
删除
|
||||
</DangerButton>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</AppCard>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user