tcjlj/OpenFlare
1
0
Fork 0
mirror of https://github.com/Rain-kl/OpenFlare.git synced 2026-10-09 09:06:36 +08:00
Code Issues Packages Projects Releases Wiki Activity

Refactor code structure for improved readability and maintainability

Browse Source
This commit is contained in:
ryan
2026-03-11 22:58:24 +08:00
parent ca1c147dfe
commit 27f96fa353
15 changed files with 2594 additions and 1745 deletions
Download Patch File Download Diff File Expand all files Collapse all files
atsf_server/web/features/tls-certificates/components/tls-certificates-page.tsx
+318 -197
View File
@@ -38,7 +38,11 @@ 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 个字符'),
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 个字符'),
@@ -92,7 +96,9 @@ function getCertificateStatus(certificate: TlsCertificateItem) {
return { label: '有效', variant: 'success' as const };
}
function toManualPayload(values: ManualImportFormValues): TlsCertificateMutationPayload {
function toManualPayload(
values: ManualImportFormValues,
): TlsCertificateMutationPayload {
return {
name: values.name.trim(),
cert_pem: values.cert_pem.trim(),
@@ -122,7 +128,9 @@ export function TlsCertificatesPage() {
const queryClient = useQueryClient();
const [feedback, setFeedback] = useState<FeedbackState | null>(null);
const [isImportModalOpen, setIsImportModalOpen] = useState(false);
const [fileForm, setFileForm] = useState<FileImportFormValues>(defaultFileValues);
const [importMode, setImportMode] = useState<'manual' | 'file'>('manual');
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);
@@ -138,12 +146,16 @@ export function TlsCertificatesPage() {
});
const manualImportMutation = useMutation({
mutationFn: async (values: ManualImportFormValues) => createTlsCertificate(toManualPayload(values)),
mutationFn: async (values: ManualImportFormValues) =>
createTlsCertificate(toManualPayload(values)),
onSuccess: async () => {
setFeedback({ tone: 'success', message: '证书已导入。' });
setImportMode('manual');
setIsImportModalOpen(false);
manualForm.reset(defaultManualValues);
await queryClient.invalidateQueries({ queryKey: tlsCertificatesQueryKey });
await queryClient.invalidateQueries({
queryKey: tlsCertificatesQueryKey,
});
},
onError: (error) => {
setFeedback({ tone: 'danger', message: getErrorMessage(error) });
@@ -155,12 +167,15 @@ export function TlsCertificatesPage() {
importTlsCertificateFiles(toFilePayload(values, certFile, keyFile)),
onSuccess: async () => {
setFeedback({ tone: 'success', message: '证书文件已导入。' });
setImportMode('manual');
setIsImportModalOpen(false);
setFileForm(defaultFileValues);
setCertFile(null);
setKeyFile(null);
setFileInputNonce((value) => value + 1);
await queryClient.invalidateQueries({ queryKey: tlsCertificatesQueryKey });
await queryClient.invalidateQueries({
queryKey: tlsCertificatesQueryKey,
});
},
onError: (error) => {
setFeedback({ tone: 'danger', message: getErrorMessage(error) });
@@ -171,14 +186,19 @@ export function TlsCertificatesPage() {
mutationFn: deleteTlsCertificate,
onSuccess: async () => {
setFeedback({ tone: 'success', message: '证书已删除。' });
await queryClient.invalidateQueries({ queryKey: tlsCertificatesQueryKey });
await queryClient.invalidateQueries({
queryKey: tlsCertificatesQueryKey,
});
},
onError: (error) => {
setFeedback({ tone: 'danger', message: getErrorMessage(error) });
},
});
const certificates = useMemo(() => certificatesQuery.data ?? [], [certificatesQuery.data]);
const certificates = useMemo(
() => certificatesQuery.data ?? [],
[certificatesQuery.data],
);
const handleManualSubmit = manualForm.handleSubmit((values) => {
setFeedback(null);
@@ -201,207 +221,308 @@ export function TlsCertificatesPage() {
};
const handleCloseImportModal = () => {
setImportMode('manual');
setIsImportModalOpen(false);
};
return (
<>
<div className='space-y-6'>
<PageHeader
title='TLS 证书'
description='支持手动粘贴 PEM 导入和文件上传导入，并展示证书有效期与到期风险。'
action={
<PrimaryButton type='button' onClick={() => setIsImportModalOpen(true)}>
导入证书
</PrimaryButton>
}
/>
{feedback ? <InlineMessage tone={feedback.tone} message={feedback.message} /> : null}
<AppCard
title='证书列表'
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>
<AppModal
isOpen={isImportModalOpen}
onClose={handleCloseImportModal}
title='导入证书'
description='手动粘贴和文件导入都保留在同一个弹窗中，避免压缩主列表空间。'
size='xl'
>
<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 ? '导入中...' : '导入证书'}
<div className="space-y-6">
<PageHeader
title="TLS 证书"
description="支持手动粘贴 PEM 导入和文件上传导入，并展示证书有效期与到期风险。"
action={
<PrimaryButton
type="button"
onClick={() => {
setImportMode('manual');
setIsImportModalOpen(true);
}}
>
导入证书
</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>
{feedback ? (
<InlineMessage tone={feedback.tone} message={feedback.message} />
) : null}
<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>
<AppCard
title="证书列表"
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);
<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>
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>
</form>
)}
</AppCard>
</div>
</AppModal>
<AppModal
isOpen={isImportModalOpen}
onClose={handleCloseImportModal}
title="导入证书"
description="手动导入和文档导入通过标签切换，避免在同一层同时堆叠两套表单。"
size="xl"
>
<div className="space-y-6">
<div className="inline-flex rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] p-1">
<button
type="button"
onClick={() => setImportMode('manual')}
className={`rounded-xl px-4 py-2 text-sm font-medium transition ${
importMode === 'manual'
? 'bg-[var(--brand-primary)] text-[var(--foreground-inverse)]'
: 'text-[var(--foreground-secondary)] hover:text-[var(--foreground-primary)]'
}`}
>
手动导入
</button>
<button
type="button"
onClick={() => setImportMode('file')}
className={`rounded-xl px-4 py-2 text-sm font-medium transition ${
importMode === 'file'
? 'bg-[var(--brand-primary)] text-[var(--foreground-inverse)]'
: 'text-[var(--foreground-secondary)] hover:text-[var(--foreground-primary)]'
}`}
>
文档导入
</button>
</div>
{importMode === 'manual' ? (
<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>
</AppModal>
</>
);
}