mirror of
https://github.com/Rain-kl/OpenFlare.git
synced 2026-10-03 15:06:36 +08:00
[优化] 格式化
This commit is contained in:
@@ -13,7 +13,10 @@ import {
|
||||
getTlsCertificate,
|
||||
getTlsCertificateContent,
|
||||
} from '@/features/tls-certificates/api/tls-certificates';
|
||||
import { getCertificateStatus, getErrorMessage } from '@/features/websites/utils';
|
||||
import {
|
||||
getCertificateStatus,
|
||||
getErrorMessage,
|
||||
} from '@/features/websites/utils';
|
||||
import {
|
||||
CodeBlock,
|
||||
DangerButton,
|
||||
@@ -81,11 +84,7 @@ export function CertificateDetailModal({
|
||||
<SecondaryButton type="button" onClick={onClose}>
|
||||
关闭
|
||||
</SecondaryButton>
|
||||
<PrimaryButton
|
||||
type="button"
|
||||
onClick={onEdit}
|
||||
disabled={!certificate}
|
||||
>
|
||||
<PrimaryButton type="button" onClick={onEdit} disabled={!certificate}>
|
||||
编辑证书
|
||||
</PrimaryButton>
|
||||
<DangerButton
|
||||
@@ -112,15 +111,12 @@ export function CertificateDetailModal({
|
||||
)}
|
||||
/>
|
||||
) : !certificate || !content ? (
|
||||
<EmptyState
|
||||
title="证书不存在"
|
||||
description="当前证书可能已被删除。"
|
||||
/>
|
||||
<EmptyState title="证书不存在" description="当前证书可能已被删除。" />
|
||||
) : (
|
||||
<div className="space-y-6">
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4">
|
||||
<p className="text-xs uppercase tracking-[0.18em] text-[var(--foreground-muted)]">
|
||||
<p className="text-xs tracking-[0.18em] text-[var(--foreground-muted)] uppercase">
|
||||
证书名称
|
||||
</p>
|
||||
<p className="mt-2 text-sm text-[var(--foreground-primary)]">
|
||||
@@ -128,7 +124,7 @@ export function CertificateDetailModal({
|
||||
</p>
|
||||
</div>
|
||||
<div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4">
|
||||
<p className="text-xs uppercase tracking-[0.18em] text-[var(--foreground-muted)]">
|
||||
<p className="text-xs tracking-[0.18em] text-[var(--foreground-muted)] uppercase">
|
||||
状态
|
||||
</p>
|
||||
<div className="mt-2">
|
||||
@@ -138,7 +134,7 @@ export function CertificateDetailModal({
|
||||
</div>
|
||||
</div>
|
||||
<div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4">
|
||||
<p className="text-xs uppercase tracking-[0.18em] text-[var(--foreground-muted)]">
|
||||
<p className="text-xs tracking-[0.18em] text-[var(--foreground-muted)] uppercase">
|
||||
生效时间
|
||||
</p>
|
||||
<p className="mt-2 text-sm text-[var(--foreground-primary)]">
|
||||
@@ -146,7 +142,7 @@ export function CertificateDetailModal({
|
||||
</p>
|
||||
</div>
|
||||
<div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4">
|
||||
<p className="text-xs uppercase tracking-[0.18em] text-[var(--foreground-muted)]">
|
||||
<p className="text-xs tracking-[0.18em] text-[var(--foreground-muted)] uppercase">
|
||||
到期时间
|
||||
</p>
|
||||
<p className="mt-2 text-sm text-[var(--foreground-primary)]">
|
||||
@@ -156,7 +152,7 @@ export function CertificateDetailModal({
|
||||
</div>
|
||||
|
||||
<div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4">
|
||||
<p className="text-xs uppercase tracking-[0.18em] text-[var(--foreground-muted)]">
|
||||
<p className="text-xs tracking-[0.18em] text-[var(--foreground-muted)] uppercase">
|
||||
备注
|
||||
</p>
|
||||
<p className="mt-2 text-sm leading-6 text-[var(--foreground-primary)]">
|
||||
@@ -180,7 +176,7 @@ export function CertificateDetailModal({
|
||||
复制
|
||||
</SecondaryButton>
|
||||
</div>
|
||||
<CodeBlock className="max-h-56 overflow-y-auto whitespace-pre-wrap break-all">
|
||||
<CodeBlock className="max-h-56 overflow-y-auto break-all whitespace-pre-wrap">
|
||||
{content.cert_pem}
|
||||
</CodeBlock>
|
||||
</div>
|
||||
@@ -199,7 +195,7 @@ export function CertificateDetailModal({
|
||||
复制
|
||||
</SecondaryButton>
|
||||
</div>
|
||||
<CodeBlock className="max-h-56 overflow-y-auto whitespace-pre-wrap break-all">
|
||||
<CodeBlock className="max-h-56 overflow-y-auto break-all whitespace-pre-wrap">
|
||||
{content.key_pem}
|
||||
</CodeBlock>
|
||||
</div>
|
||||
|
||||
@@ -52,8 +52,9 @@ export function CertificateImportModal({
|
||||
const queryClient = useQueryClient();
|
||||
const [importMode, setImportMode] = useState<'manual' | 'file'>('manual');
|
||||
const [feedback, setFeedback] = useState<FeedbackState | null>(null);
|
||||
const [fileForm, setFileForm] =
|
||||
useState<FileImportFormValues>(defaultFileImportValues);
|
||||
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);
|
||||
@@ -280,9 +281,7 @@ export function CertificateImportModal({
|
||||
<ResourceField
|
||||
label="私钥文件"
|
||||
hint={
|
||||
keyFile
|
||||
? `已选择:${keyFile.name}`
|
||||
: '请选择 KEY/PEM 文件'
|
||||
keyFile ? `已选择:${keyFile.name}` : '请选择 KEY/PEM 文件'
|
||||
}
|
||||
>
|
||||
<ResourceInput
|
||||
|
||||
@@ -143,13 +143,16 @@ export function WebsiteDetailPage({ websiteId }: { websiteId: string }) {
|
||||
enabled: Boolean(wafRouteID),
|
||||
});
|
||||
const wafMutation = useMutation({
|
||||
mutationFn: (ids: number[]) => replaceWAFSiteRuleGroups(wafRouteID ?? 0, ids),
|
||||
mutationFn: (ids: number[]) =>
|
||||
replaceWAFSiteRuleGroups(wafRouteID ?? 0, ids),
|
||||
onSuccess: async (view) => {
|
||||
setWafSelectedIDs(view.applied_ids);
|
||||
setFeedback({ tone: 'success', message: '网站 WAF 规则组已更新。' });
|
||||
await Promise.all([
|
||||
queryClient.invalidateQueries({ queryKey: ['waf'] }),
|
||||
queryClient.invalidateQueries({ queryKey: ['config-versions', 'diff'] }),
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: ['config-versions', 'diff'],
|
||||
}),
|
||||
]);
|
||||
},
|
||||
onError: (error) => {
|
||||
|
||||
@@ -90,7 +90,7 @@ export function WebsiteEditorModal({
|
||||
});
|
||||
|
||||
const currentCertificate = watchedCertId
|
||||
? certificates.find((item) => item.id === Number(watchedCertId)) ?? null
|
||||
? (certificates.find((item) => item.id === Number(watchedCertId)) ?? null)
|
||||
: null;
|
||||
|
||||
const handleSubmit = form.handleSubmit((values) => {
|
||||
@@ -215,7 +215,7 @@ export function WebsiteEditorModal({
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-3">
|
||||
<div 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)]">
|
||||
<p className="text-xs tracking-[0.2em] text-[var(--foreground-muted)] uppercase">
|
||||
当前域名
|
||||
</p>
|
||||
<p className="mt-2 text-sm text-[var(--foreground-primary)]">
|
||||
@@ -223,7 +223,7 @@ export function WebsiteEditorModal({
|
||||
</p>
|
||||
</div>
|
||||
<div 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)]">
|
||||
<p className="text-xs tracking-[0.2em] text-[var(--foreground-muted)] uppercase">
|
||||
匹配类型
|
||||
</p>
|
||||
<div className="mt-2">
|
||||
@@ -235,12 +235,14 @@ export function WebsiteEditorModal({
|
||||
</div>
|
||||
</div>
|
||||
<div 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)]">
|
||||
<p className="text-xs tracking-[0.2em] text-[var(--foreground-muted)] uppercase">
|
||||
当前证书
|
||||
</p>
|
||||
<div className="mt-2">
|
||||
<StatusBadge
|
||||
label={currentCertificate ? currentCertificate.name : '未绑定证书'}
|
||||
label={
|
||||
currentCertificate ? currentCertificate.name : '未绑定证书'
|
||||
}
|
||||
variant={currentCertificate ? 'success' : 'warning'}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -136,7 +136,7 @@ export function WebsitesPage() {
|
||||
<div className="grid gap-4 lg:grid-cols-2">
|
||||
{domains.map((domain) => {
|
||||
const certificate = domain.cert_id
|
||||
? certificateMap.get(domain.cert_id) ?? null
|
||||
? (certificateMap.get(domain.cert_id) ?? null)
|
||||
: null;
|
||||
const matchType = getMatchTypeMeta(domain.domain);
|
||||
|
||||
@@ -168,7 +168,7 @@ export function WebsitesPage() {
|
||||
|
||||
<div className="grid gap-3 md:grid-cols-1">
|
||||
<div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-panel)] px-4 py-3">
|
||||
<p className="text-xs uppercase tracking-[0.18em] text-[var(--foreground-muted)]">
|
||||
<p className="text-xs tracking-[0.18em] text-[var(--foreground-muted)] uppercase">
|
||||
绑定证书
|
||||
</p>
|
||||
<p className="mt-2 text-sm text-[var(--foreground-primary)]">
|
||||
|
||||
Reference in New Issue
Block a user