mirror of
https://github.com/Rain-kl/OpenFlare.git
synced 2026-10-09 09:06:36 +08:00
feat: add website detail page and certificate import functionality
- Implemented `WebsiteDetailRoute` to handle website details based on search parameters. - Created `WebsiteDetailPage` component to display detailed information about a website, including associated certificates and managed domains. - Added `CertificateImportModal` for importing TLS certificates either manually or via file upload. - Developed `WebsiteEditorModal` for editing website details and binding certificates. - Introduced schemas for managing domain and certificate imports using Zod for validation. - Added utility functions for handling domain and certificate operations, including error handling and payload transformations.
This commit is contained in:
ryan
@@ -0,0 +1,11 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useSearchParams } from 'next/navigation';
|
||||||
|
|
||||||
|
import { WebsiteDetailPage } from '@/features/websites/components/website-detail-page';
|
||||||
|
|
||||||
|
export default function WebsiteDetailRoute() {
|
||||||
|
const searchParams = useSearchParams();
|
||||||
|
|
||||||
|
return <WebsiteDetailPage websiteId={searchParams.get('id') ?? ''} />;
|
||||||
|
}
|
||||||
@@ -0,0 +1,320 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { zodResolver } from '@hookform/resolvers/zod';
|
||||||
|
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
||||||
|
import { useEffect, useState, type FormEvent } from 'react';
|
||||||
|
import { useForm } from 'react-hook-form';
|
||||||
|
|
||||||
|
import { InlineMessage } from '@/components/feedback/inline-message';
|
||||||
|
import { AppCard } from '@/components/ui/app-card';
|
||||||
|
import { AppModal } from '@/components/ui/app-modal';
|
||||||
|
import {
|
||||||
|
createTlsCertificate,
|
||||||
|
importTlsCertificateFiles,
|
||||||
|
} from '@/features/tls-certificates/api/tls-certificates';
|
||||||
|
import type { TlsCertificateItem } from '@/features/tls-certificates/types';
|
||||||
|
import {
|
||||||
|
defaultFileImportValues,
|
||||||
|
defaultManualImportValues,
|
||||||
|
type FileImportFormValues,
|
||||||
|
manualImportSchema,
|
||||||
|
type ManualImportFormValues,
|
||||||
|
} from '@/features/websites/schemas';
|
||||||
|
import {
|
||||||
|
getErrorMessage,
|
||||||
|
toFilePayload,
|
||||||
|
toManualPayload,
|
||||||
|
} from '@/features/websites/utils';
|
||||||
|
import {
|
||||||
|
PrimaryButton,
|
||||||
|
ResourceField,
|
||||||
|
ResourceInput,
|
||||||
|
ResourceTextarea,
|
||||||
|
SecondaryButton,
|
||||||
|
} from '@/features/shared/components/resource-primitives';
|
||||||
|
|
||||||
|
type FeedbackState = {
|
||||||
|
tone: 'success' | 'danger';
|
||||||
|
message: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
interface CertificateImportModalProps {
|
||||||
|
isOpen: boolean;
|
||||||
|
onClose: () => void;
|
||||||
|
onImported?: (certificate: TlsCertificateItem) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function CertificateImportModal({
|
||||||
|
isOpen,
|
||||||
|
onClose,
|
||||||
|
onImported,
|
||||||
|
}: CertificateImportModalProps) {
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
const [importMode, setImportMode] = useState<'manual' | 'file'>('manual');
|
||||||
|
const [feedback, setFeedback] = useState<FeedbackState | null>(null);
|
||||||
|
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);
|
||||||
|
|
||||||
|
const manualForm = useForm<ManualImportFormValues>({
|
||||||
|
resolver: zodResolver(manualImportSchema),
|
||||||
|
defaultValues: defaultManualImportValues,
|
||||||
|
});
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!isOpen) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setFeedback(null);
|
||||||
|
}, [isOpen]);
|
||||||
|
|
||||||
|
const resetFileForm = () => {
|
||||||
|
setFileForm(defaultFileImportValues);
|
||||||
|
setCertFile(null);
|
||||||
|
setKeyFile(null);
|
||||||
|
setFileInputNonce((value) => value + 1);
|
||||||
|
};
|
||||||
|
|
||||||
|
const resetAll = () => {
|
||||||
|
setImportMode('manual');
|
||||||
|
setFeedback(null);
|
||||||
|
manualForm.reset(defaultManualImportValues);
|
||||||
|
resetFileForm();
|
||||||
|
};
|
||||||
|
|
||||||
|
const invalidateCertificateQueries = async () => {
|
||||||
|
await Promise.all([
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['tls-certificates'] }),
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['managed-domains'] }),
|
||||||
|
]);
|
||||||
|
};
|
||||||
|
|
||||||
|
const manualImportMutation = useMutation({
|
||||||
|
mutationFn: async (values: ManualImportFormValues) =>
|
||||||
|
createTlsCertificate(toManualPayload(values)),
|
||||||
|
onSuccess: async (certificate) => {
|
||||||
|
await invalidateCertificateQueries();
|
||||||
|
onImported?.(certificate);
|
||||||
|
resetAll();
|
||||||
|
onClose();
|
||||||
|
},
|
||||||
|
onError: (error) => {
|
||||||
|
setFeedback({ tone: 'danger', message: getErrorMessage(error) });
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const fileImportMutation = useMutation({
|
||||||
|
mutationFn: async (values: FileImportFormValues) =>
|
||||||
|
importTlsCertificateFiles(toFilePayload(values, certFile, keyFile)),
|
||||||
|
onSuccess: async (certificate) => {
|
||||||
|
await invalidateCertificateQueries();
|
||||||
|
onImported?.(certificate);
|
||||||
|
resetAll();
|
||||||
|
onClose();
|
||||||
|
},
|
||||||
|
onError: (error) => {
|
||||||
|
setFeedback({ tone: 'danger', message: getErrorMessage(error) });
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleManualSubmit = manualForm.handleSubmit((values) => {
|
||||||
|
setFeedback(null);
|
||||||
|
manualImportMutation.mutate(values);
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleFileSubmit = (event: FormEvent<HTMLFormElement>) => {
|
||||||
|
event.preventDefault();
|
||||||
|
setFeedback(null);
|
||||||
|
fileImportMutation.mutate(fileForm);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleClose = () => {
|
||||||
|
resetAll();
|
||||||
|
onClose();
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AppModal
|
||||||
|
isOpen={isOpen}
|
||||||
|
onClose={handleClose}
|
||||||
|
title="添加证书"
|
||||||
|
description="支持手动粘贴 PEM 或上传证书文件。导入成功后可立即在网站表单里选择。"
|
||||||
|
size="xl"
|
||||||
|
>
|
||||||
|
<div className="space-y-6">
|
||||||
|
{feedback ? (
|
||||||
|
<InlineMessage tone={feedback.tone} message={feedback.message} />
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
<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 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 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="备注">
|
||||||
|
<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={resetFileForm}
|
||||||
|
disabled={fileImportMutation.isPending}
|
||||||
|
>
|
||||||
|
清空文件
|
||||||
|
</SecondaryButton>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</AppCard>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</AppModal>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,475 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import Link from 'next/link';
|
||||||
|
import { useRouter } from 'next/navigation';
|
||||||
|
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||||||
|
import { useMemo, useState } from 'react';
|
||||||
|
|
||||||
|
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 {
|
||||||
|
deleteManagedDomain,
|
||||||
|
getManagedDomains,
|
||||||
|
} from '@/features/managed-domains/api/managed-domains';
|
||||||
|
import {
|
||||||
|
getProxyRoutes,
|
||||||
|
} from '@/features/proxy-routes/api/proxy-routes';
|
||||||
|
import {
|
||||||
|
deleteTlsCertificate,
|
||||||
|
getTlsCertificates,
|
||||||
|
} from '@/features/tls-certificates/api/tls-certificates';
|
||||||
|
import { CertificateImportModal } from '@/features/websites/components/certificate-import-modal';
|
||||||
|
import { WebsiteEditorModal } from '@/features/websites/components/website-editor-modal';
|
||||||
|
import {
|
||||||
|
buildCertificateLabel,
|
||||||
|
getCertificateStatus,
|
||||||
|
getErrorMessage,
|
||||||
|
getMatchTypeMeta,
|
||||||
|
isRouteRelatedToManagedDomain,
|
||||||
|
} from '@/features/websites/utils';
|
||||||
|
import {
|
||||||
|
DangerButton,
|
||||||
|
PrimaryButton,
|
||||||
|
SecondaryButton,
|
||||||
|
} from '@/features/shared/components/resource-primitives';
|
||||||
|
import { formatDateTime } from '@/lib/utils/date';
|
||||||
|
|
||||||
|
type FeedbackState = {
|
||||||
|
tone: 'success' | 'danger';
|
||||||
|
message: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function WebsiteDetailPage({ websiteId }: { websiteId: string }) {
|
||||||
|
const router = useRouter();
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
const [feedback, setFeedback] = useState<FeedbackState | null>(null);
|
||||||
|
const [isEditorOpen, setIsEditorOpen] = useState(false);
|
||||||
|
const [isCertificateImportOpen, setIsCertificateImportOpen] = useState(false);
|
||||||
|
const [preferredCertificateId, setPreferredCertificateId] = useState<
|
||||||
|
number | null
|
||||||
|
>(null);
|
||||||
|
|
||||||
|
const managedDomainsQuery = useQuery({
|
||||||
|
queryKey: ['managed-domains'],
|
||||||
|
queryFn: getManagedDomains,
|
||||||
|
});
|
||||||
|
const certificatesQuery = useQuery({
|
||||||
|
queryKey: ['tls-certificates', 'list'],
|
||||||
|
queryFn: getTlsCertificates,
|
||||||
|
});
|
||||||
|
const proxyRoutesQuery = useQuery({
|
||||||
|
queryKey: ['proxy-routes'],
|
||||||
|
queryFn: getProxyRoutes,
|
||||||
|
});
|
||||||
|
|
||||||
|
const deleteDomainMutation = useMutation({
|
||||||
|
mutationFn: deleteManagedDomain,
|
||||||
|
onSuccess: async () => {
|
||||||
|
await queryClient.invalidateQueries({ queryKey: ['managed-domains'] });
|
||||||
|
router.push('/website');
|
||||||
|
},
|
||||||
|
onError: (error) => {
|
||||||
|
setFeedback({ tone: 'danger', message: getErrorMessage(error) });
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const deleteCertificateMutation = useMutation({
|
||||||
|
mutationFn: deleteTlsCertificate,
|
||||||
|
onSuccess: async () => {
|
||||||
|
setFeedback({ tone: 'success', message: '证书已删除。' });
|
||||||
|
await Promise.all([
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['tls-certificates'] }),
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['managed-domains'] }),
|
||||||
|
]);
|
||||||
|
},
|
||||||
|
onError: (error) => {
|
||||||
|
setFeedback({ tone: 'danger', message: getErrorMessage(error) });
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const website = useMemo(() => {
|
||||||
|
return (
|
||||||
|
(managedDomainsQuery.data ?? []).find(
|
||||||
|
(item) => String(item.id) === websiteId,
|
||||||
|
) ?? null
|
||||||
|
);
|
||||||
|
}, [managedDomainsQuery.data, websiteId]);
|
||||||
|
|
||||||
|
const certificates = useMemo(
|
||||||
|
() => certificatesQuery.data ?? [],
|
||||||
|
[certificatesQuery.data],
|
||||||
|
);
|
||||||
|
const certificateMap = useMemo(
|
||||||
|
() => new Map(certificates.map((item) => [item.id, item])),
|
||||||
|
[certificates],
|
||||||
|
);
|
||||||
|
const relatedRoutes = useMemo(() => {
|
||||||
|
if (!website) {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
|
||||||
|
return (proxyRoutesQuery.data ?? []).filter((route) =>
|
||||||
|
isRouteRelatedToManagedDomain(website.domain, route.domain),
|
||||||
|
);
|
||||||
|
}, [proxyRoutesQuery.data, website]);
|
||||||
|
|
||||||
|
const certificate = website?.cert_id
|
||||||
|
? certificateMap.get(website.cert_id) ?? null
|
||||||
|
: null;
|
||||||
|
const enabledRoutesCount = relatedRoutes.filter((route) => route.enabled).length;
|
||||||
|
|
||||||
|
const handleDeleteWebsite = () => {
|
||||||
|
if (!website) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!window.confirm(`确认删除网站 ${website.domain} 吗？`)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setFeedback(null);
|
||||||
|
deleteDomainMutation.mutate(website.id);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDeleteCertificate = () => {
|
||||||
|
if (!certificate) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!window.confirm(`确认删除证书 ${certificate.name} 吗？`)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setFeedback(null);
|
||||||
|
deleteCertificateMutation.mutate(certificate.id);
|
||||||
|
};
|
||||||
|
|
||||||
|
if (
|
||||||
|
managedDomainsQuery.isLoading ||
|
||||||
|
certificatesQuery.isLoading ||
|
||||||
|
proxyRoutesQuery.isLoading
|
||||||
|
) {
|
||||||
|
return <LoadingState />;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (managedDomainsQuery.isError) {
|
||||||
|
return (
|
||||||
|
<ErrorState
|
||||||
|
title="网站详情加载失败"
|
||||||
|
description={getErrorMessage(managedDomainsQuery.error)}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (certificatesQuery.isError) {
|
||||||
|
return (
|
||||||
|
<ErrorState
|
||||||
|
title="证书信息加载失败"
|
||||||
|
description={getErrorMessage(certificatesQuery.error)}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (proxyRoutesQuery.isError) {
|
||||||
|
return (
|
||||||
|
<ErrorState
|
||||||
|
title="关联规则加载失败"
|
||||||
|
description={getErrorMessage(proxyRoutesQuery.error)}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!website) {
|
||||||
|
return (
|
||||||
|
<EmptyState
|
||||||
|
title="网站不存在"
|
||||||
|
description="该网站可能已被删除，或当前 ID 无法匹配到网站记录。"
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const matchType = getMatchTypeMeta(website.domain);
|
||||||
|
const certificateStatus = certificate ? getCertificateStatus(certificate) : null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="space-y-6">
|
||||||
|
<PageHeader
|
||||||
|
title={website.domain}
|
||||||
|
description="网站详情"
|
||||||
|
action={
|
||||||
|
<>
|
||||||
|
<Link
|
||||||
|
href="/website"
|
||||||
|
className="inline-flex 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>
|
||||||
|
<SecondaryButton
|
||||||
|
type="button"
|
||||||
|
onClick={() => setIsEditorOpen(true)}
|
||||||
|
>
|
||||||
|
编辑网站
|
||||||
|
</SecondaryButton>
|
||||||
|
<PrimaryButton
|
||||||
|
type="button"
|
||||||
|
onClick={() => setIsCertificateImportOpen(true)}
|
||||||
|
>
|
||||||
|
添加证书
|
||||||
|
</PrimaryButton>
|
||||||
|
<DangerButton
|
||||||
|
type="button"
|
||||||
|
onClick={handleDeleteWebsite}
|
||||||
|
disabled={deleteDomainMutation.isPending}
|
||||||
|
>
|
||||||
|
删除网站
|
||||||
|
</DangerButton>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{feedback ? (
|
||||||
|
<InlineMessage tone={feedback.tone} message={feedback.message} />
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
<div className="grid gap-4 xl:grid-cols-4">
|
||||||
|
<AppCard title="匹配类型">
|
||||||
|
<div className="space-y-3">
|
||||||
|
<StatusBadge label={matchType.label} variant={matchType.variant} />
|
||||||
|
<p className="text-sm text-[var(--foreground-secondary)]">
|
||||||
|
{website.domain.startsWith('*.')
|
||||||
|
? '当前网站会覆盖该后缀下的子域名规则。'
|
||||||
|
: '当前网站只匹配同名精确域名。'}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</AppCard>
|
||||||
|
|
||||||
|
<AppCard title="网站状态">
|
||||||
|
<div className="space-y-3">
|
||||||
|
<StatusBadge
|
||||||
|
label={website.enabled ? '启用' : '停用'}
|
||||||
|
variant={website.enabled ? 'success' : 'warning'}
|
||||||
|
/>
|
||||||
|
<p className="text-sm text-[var(--foreground-secondary)]">
|
||||||
|
更新时间：{formatDateTime(website.updated_at)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</AppCard>
|
||||||
|
|
||||||
|
<AppCard title="关联规则">
|
||||||
|
<div className="space-y-2 text-sm text-[var(--foreground-secondary)]">
|
||||||
|
<p>规则总数：{relatedRoutes.length}</p>
|
||||||
|
<p>已启用规则：{enabledRoutesCount}</p>
|
||||||
|
</div>
|
||||||
|
</AppCard>
|
||||||
|
|
||||||
|
<AppCard title="绑定证书">
|
||||||
|
<div className="space-y-3">
|
||||||
|
<StatusBadge
|
||||||
|
label={certificate ? certificate.name : '未绑定证书'}
|
||||||
|
variant={certificate ? 'success' : 'warning'}
|
||||||
|
/>
|
||||||
|
<p className="text-sm text-[var(--foreground-secondary)]">
|
||||||
|
{certificateStatus
|
||||||
|
? `证书状态：${certificateStatus.label}`
|
||||||
|
: '当前网站未设置默认证书。'}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</AppCard>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid gap-6 xl:grid-cols-[1.05fr_0.95fr]">
|
||||||
|
<AppCard title="网站信息" description="当前网站的基础配置与托管信息。">
|
||||||
|
<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>
|
||||||
|
<p className="mt-2 text-sm text-[var(--foreground-primary)]">
|
||||||
|
{website.domain}
|
||||||
|
</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>
|
||||||
|
<p className="mt-2 text-sm text-[var(--foreground-primary)]">
|
||||||
|
{formatDateTime(website.created_at)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4 md:col-span-2">
|
||||||
|
<p className="text-xs uppercase tracking-[0.18em] text-[var(--foreground-muted)]">
|
||||||
|
备注
|
||||||
|
</p>
|
||||||
|
<p className="mt-2 text-sm leading-6 text-[var(--foreground-primary)]">
|
||||||
|
{website.remark || '暂无备注'}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</AppCard>
|
||||||
|
|
||||||
|
<AppCard
|
||||||
|
title="证书信息"
|
||||||
|
description="当前网站绑定的默认证书信息。若还没有证书，可直接添加后回填。"
|
||||||
|
action={
|
||||||
|
<PrimaryButton
|
||||||
|
type="button"
|
||||||
|
onClick={() => setIsCertificateImportOpen(true)}
|
||||||
|
>
|
||||||
|
添加证书
|
||||||
|
</PrimaryButton>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{certificate ? (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="flex flex-wrap items-center gap-2">
|
||||||
|
<StatusBadge
|
||||||
|
label={certificateStatus?.label ?? '有效'}
|
||||||
|
variant={certificateStatus?.variant ?? 'success'}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2 text-sm text-[var(--foreground-secondary)]">
|
||||||
|
<p>证书名称：{buildCertificateLabel(certificate)}</p>
|
||||||
|
<p>生效时间：{formatDateTime(certificate.not_before)}</p>
|
||||||
|
<p>到期时间：{formatDateTime(certificate.not_after)}</p>
|
||||||
|
<p>备注：{certificate.remark || '暂无备注'}</p>
|
||||||
|
</div>
|
||||||
|
<DangerButton
|
||||||
|
type="button"
|
||||||
|
onClick={handleDeleteCertificate}
|
||||||
|
disabled={deleteCertificateMutation.isPending}
|
||||||
|
>
|
||||||
|
删除证书
|
||||||
|
</DangerButton>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<EmptyState
|
||||||
|
title="未绑定证书"
|
||||||
|
description="点击右上角“添加证书”后，可以在编辑网站时直接选择并应用。"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</AppCard>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<AppCard
|
||||||
|
title="关联规则"
|
||||||
|
description="参考节点详情页，这里集中展示该网站命中的规则以及 HTTPS、源站、证书等关键信息。"
|
||||||
|
>
|
||||||
|
{relatedRoutes.length === 0 ? (
|
||||||
|
<EmptyState
|
||||||
|
title="暂无关联规则"
|
||||||
|
description="当前网站还没有命中任何代理规则。创建或调整规则后，这里会自动展示。"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<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">HTTPS</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)]">
|
||||||
|
{relatedRoutes.map((route) => {
|
||||||
|
const routeCertificate = route.cert_id
|
||||||
|
? certificateMap.get(route.cert_id) ?? null
|
||||||
|
: null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<tr key={route.id} className="align-top">
|
||||||
|
<td className="px-3 py-4 text-[var(--foreground-primary)]">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<p>{route.domain}</p>
|
||||||
|
<StatusBadge
|
||||||
|
label={
|
||||||
|
route.domain === website.domain
|
||||||
|
? '直接关联'
|
||||||
|
: '被网站覆盖'
|
||||||
|
}
|
||||||
|
variant={
|
||||||
|
route.domain === website.domain
|
||||||
|
? 'info'
|
||||||
|
: 'warning'
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td className="px-3 py-4 text-[var(--foreground-secondary)]">
|
||||||
|
<p className="max-w-72 break-all">{route.origin_url}</p>
|
||||||
|
</td>
|
||||||
|
<td className="px-3 py-4">
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
<StatusBadge
|
||||||
|
label={route.enable_https ? '启用 HTTPS' : 'HTTP'}
|
||||||
|
variant={route.enable_https ? 'success' : 'warning'}
|
||||||
|
/>
|
||||||
|
{route.redirect_http ? (
|
||||||
|
<StatusBadge label="HTTP 跳转" variant="info" />
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td className="px-3 py-4 text-[var(--foreground-secondary)]">
|
||||||
|
{routeCertificate
|
||||||
|
? routeCertificate.name
|
||||||
|
: '未绑定证书'}
|
||||||
|
</td>
|
||||||
|
<td className="px-3 py-4">
|
||||||
|
<StatusBadge
|
||||||
|
label={route.enabled ? '启用' : '停用'}
|
||||||
|
variant={route.enabled ? 'success' : 'warning'}
|
||||||
|
/>
|
||||||
|
</td>
|
||||||
|
<td className="px-3 py-4 text-[var(--foreground-secondary)]">
|
||||||
|
{route.remark || '暂无备注'}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</AppCard>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<WebsiteEditorModal
|
||||||
|
isOpen={isEditorOpen}
|
||||||
|
onClose={() => {
|
||||||
|
setIsEditorOpen(false);
|
||||||
|
setPreferredCertificateId(null);
|
||||||
|
}}
|
||||||
|
initialDomain={website}
|
||||||
|
certificates={certificates}
|
||||||
|
certificatesLoading={certificatesQuery.isLoading}
|
||||||
|
preferredCertificateId={preferredCertificateId}
|
||||||
|
onRequestImportCertificate={() => setIsCertificateImportOpen(true)}
|
||||||
|
onSaved={() => {
|
||||||
|
setPreferredCertificateId(null);
|
||||||
|
setFeedback({ tone: 'success', message: '网站已更新。' });
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<CertificateImportModal
|
||||||
|
isOpen={isCertificateImportOpen}
|
||||||
|
onClose={() => setIsCertificateImportOpen(false)}
|
||||||
|
onImported={(importedCertificate) => {
|
||||||
|
setPreferredCertificateId(importedCertificate.id);
|
||||||
|
setFeedback({
|
||||||
|
tone: 'success',
|
||||||
|
message: `证书 ${importedCertificate.name} 已导入，可在编辑网站时直接应用。`,
|
||||||
|
});
|
||||||
|
setIsEditorOpen(true);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,276 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { zodResolver } from '@hookform/resolvers/zod';
|
||||||
|
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
||||||
|
import { useEffect } from 'react';
|
||||||
|
import { useForm, useWatch } from 'react-hook-form';
|
||||||
|
|
||||||
|
import { InlineMessage } from '@/components/feedback/inline-message';
|
||||||
|
import { AppModal } from '@/components/ui/app-modal';
|
||||||
|
import { StatusBadge } from '@/components/ui/status-badge';
|
||||||
|
import {
|
||||||
|
createManagedDomain,
|
||||||
|
updateManagedDomain,
|
||||||
|
} from '@/features/managed-domains/api/managed-domains';
|
||||||
|
import type { ManagedDomainItem } from '@/features/managed-domains/types';
|
||||||
|
import type { TlsCertificateItem } from '@/features/tls-certificates/types';
|
||||||
|
import {
|
||||||
|
defaultManagedDomainValues,
|
||||||
|
managedDomainSchema,
|
||||||
|
type ManagedDomainFormValues,
|
||||||
|
} from '@/features/websites/schemas';
|
||||||
|
import {
|
||||||
|
buildCertificateLabel,
|
||||||
|
getErrorMessage,
|
||||||
|
getMatchTypeMeta,
|
||||||
|
toManagedDomainFormValues,
|
||||||
|
toManagedDomainPayload,
|
||||||
|
} from '@/features/websites/utils';
|
||||||
|
import {
|
||||||
|
PrimaryButton,
|
||||||
|
ResourceField,
|
||||||
|
ResourceInput,
|
||||||
|
ResourceSelect,
|
||||||
|
SecondaryButton,
|
||||||
|
ToggleField,
|
||||||
|
} from '@/features/shared/components/resource-primitives';
|
||||||
|
|
||||||
|
interface WebsiteEditorModalProps {
|
||||||
|
isOpen: boolean;
|
||||||
|
onClose: () => void;
|
||||||
|
onSaved?: (domain: ManagedDomainItem, mode: 'create' | 'update') => void;
|
||||||
|
onRequestImportCertificate: () => void;
|
||||||
|
certificates: TlsCertificateItem[];
|
||||||
|
certificatesLoading?: boolean;
|
||||||
|
initialDomain?: ManagedDomainItem | null;
|
||||||
|
preferredCertificateId?: number | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function WebsiteEditorModal({
|
||||||
|
isOpen,
|
||||||
|
onClose,
|
||||||
|
onSaved,
|
||||||
|
onRequestImportCertificate,
|
||||||
|
certificates,
|
||||||
|
certificatesLoading = false,
|
||||||
|
initialDomain = null,
|
||||||
|
preferredCertificateId = null,
|
||||||
|
}: WebsiteEditorModalProps) {
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
const form = useForm<ManagedDomainFormValues>({
|
||||||
|
resolver: zodResolver(managedDomainSchema),
|
||||||
|
defaultValues: defaultManagedDomainValues,
|
||||||
|
});
|
||||||
|
|
||||||
|
const watchedDomain = useWatch({
|
||||||
|
control: form.control,
|
||||||
|
name: 'domain',
|
||||||
|
});
|
||||||
|
const watchedCertId = useWatch({
|
||||||
|
control: form.control,
|
||||||
|
name: 'cert_id',
|
||||||
|
});
|
||||||
|
const watchedEnabled = useWatch({
|
||||||
|
control: form.control,
|
||||||
|
name: 'enabled',
|
||||||
|
});
|
||||||
|
|
||||||
|
const saveMutation = useMutation({
|
||||||
|
mutationFn: async (values: ManagedDomainFormValues) => {
|
||||||
|
const payload = toManagedDomainPayload(values);
|
||||||
|
return initialDomain
|
||||||
|
? updateManagedDomain(initialDomain.id, payload)
|
||||||
|
: createManagedDomain(payload);
|
||||||
|
},
|
||||||
|
onSuccess: async (domain) => {
|
||||||
|
await queryClient.invalidateQueries({ queryKey: ['managed-domains'] });
|
||||||
|
onSaved?.(domain, initialDomain ? 'update' : 'create');
|
||||||
|
handleClose();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const currentCertificate = watchedCertId
|
||||||
|
? certificates.find((item) => item.id === Number(watchedCertId)) ?? null
|
||||||
|
: null;
|
||||||
|
|
||||||
|
const handleSubmit = form.handleSubmit((values) => {
|
||||||
|
saveMutation.mutate(values);
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleClose = () => {
|
||||||
|
saveMutation.reset();
|
||||||
|
form.reset(defaultManagedDomainValues);
|
||||||
|
onClose();
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!isOpen) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
saveMutation.reset();
|
||||||
|
form.reset(
|
||||||
|
initialDomain
|
||||||
|
? toManagedDomainFormValues(initialDomain)
|
||||||
|
: defaultManagedDomainValues,
|
||||||
|
);
|
||||||
|
}, [form, initialDomain, isOpen]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!isOpen || !preferredCertificateId) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
form.setValue('cert_id', String(preferredCertificateId), {
|
||||||
|
shouldDirty: true,
|
||||||
|
shouldValidate: true,
|
||||||
|
});
|
||||||
|
}, [form, isOpen, preferredCertificateId]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AppModal
|
||||||
|
isOpen={isOpen}
|
||||||
|
onClose={handleClose}
|
||||||
|
title={initialDomain ? '编辑网站' : '新增网站'}
|
||||||
|
description="录入域名并选择绑定证书。证书可在弹窗内直接新增，导入成功后会自动回填。"
|
||||||
|
footer={
|
||||||
|
<div className="flex flex-wrap justify-end gap-3">
|
||||||
|
<SecondaryButton
|
||||||
|
type="button"
|
||||||
|
onClick={handleClose}
|
||||||
|
disabled={saveMutation.isPending}
|
||||||
|
>
|
||||||
|
取消
|
||||||
|
</SecondaryButton>
|
||||||
|
<PrimaryButton
|
||||||
|
type="submit"
|
||||||
|
form="website-editor-form"
|
||||||
|
disabled={saveMutation.isPending}
|
||||||
|
>
|
||||||
|
{saveMutation.isPending
|
||||||
|
? '保存中...'
|
||||||
|
: initialDomain
|
||||||
|
? '保存网站'
|
||||||
|
: '创建网站'}
|
||||||
|
</PrimaryButton>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<form
|
||||||
|
id="website-editor-form"
|
||||||
|
className="space-y-5"
|
||||||
|
onSubmit={handleSubmit}
|
||||||
|
>
|
||||||
|
{saveMutation.isError ? (
|
||||||
|
<InlineMessage
|
||||||
|
tone="danger"
|
||||||
|
message={getErrorMessage(saveMutation.error)}
|
||||||
|
/>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
<div className="grid gap-4 md:grid-cols-2">
|
||||||
|
<ResourceField
|
||||||
|
label="域名"
|
||||||
|
hint="示例：example.com 或 *.example.com"
|
||||||
|
error={form.formState.errors.domain?.message}
|
||||||
|
>
|
||||||
|
<ResourceInput
|
||||||
|
placeholder="example.com 或 *.example.com"
|
||||||
|
{...form.register('domain')}
|
||||||
|
/>
|
||||||
|
</ResourceField>
|
||||||
|
|
||||||
|
<ResourceField
|
||||||
|
label="绑定证书"
|
||||||
|
hint="默认证书会用于该网站的自动匹配与规则推荐。"
|
||||||
|
error={form.formState.errors.cert_id?.message}
|
||||||
|
>
|
||||||
|
<div className="space-y-3">
|
||||||
|
<ResourceSelect
|
||||||
|
value={watchedCertId}
|
||||||
|
disabled={certificatesLoading}
|
||||||
|
onChange={(event) =>
|
||||||
|
form.setValue('cert_id', event.target.value, {
|
||||||
|
shouldDirty: true,
|
||||||
|
shouldValidate: true,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<option value="">不绑定证书</option>
|
||||||
|
{certificates.map((certificate) => (
|
||||||
|
<option key={certificate.id} value={certificate.id}>
|
||||||
|
{buildCertificateLabel(certificate)}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</ResourceSelect>
|
||||||
|
<SecondaryButton
|
||||||
|
type="button"
|
||||||
|
onClick={onRequestImportCertificate}
|
||||||
|
className="w-full sm:w-auto"
|
||||||
|
>
|
||||||
|
添加证书
|
||||||
|
</SecondaryButton>
|
||||||
|
</div>
|
||||||
|
</ResourceField>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
<p className="mt-2 text-sm text-[var(--foreground-primary)]">
|
||||||
|
{watchedDomain?.trim() || '未填写域名'}
|
||||||
|
</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>
|
||||||
|
<div className="mt-2">
|
||||||
|
{watchedDomain?.trim() ? (
|
||||||
|
<StatusBadge {...getMatchTypeMeta(watchedDomain.trim())} />
|
||||||
|
) : (
|
||||||
|
<StatusBadge label="等待输入" variant="warning" />
|
||||||
|
)}
|
||||||
|
</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>
|
||||||
|
<div className="mt-2">
|
||||||
|
<StatusBadge
|
||||||
|
label={currentCertificate ? currentCertificate.name : '未绑定证书'}
|
||||||
|
variant={currentCertificate ? 'success' : 'warning'}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ToggleField
|
||||||
|
label="启用网站"
|
||||||
|
description="停用后该网站不会参与自动匹配，但记录会保留。"
|
||||||
|
checked={watchedEnabled}
|
||||||
|
onChange={(checked) =>
|
||||||
|
form.setValue('enabled', checked, {
|
||||||
|
shouldDirty: true,
|
||||||
|
shouldValidate: true,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<ResourceField
|
||||||
|
label="备注"
|
||||||
|
hint="可选，用于记录归属、用途或生效说明。"
|
||||||
|
error={form.formState.errors.remark?.message}
|
||||||
|
>
|
||||||
|
<ResourceInput
|
||||||
|
placeholder="例如：主站 / 泛域名 / 生产"
|
||||||
|
{...form.register('remark')}
|
||||||
|
/>
|
||||||
|
</ResourceField>
|
||||||
|
</form>
|
||||||
|
</AppModal>
|
||||||
|
);
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,67 @@
|
|||||||
|
import { z } from 'zod';
|
||||||
|
|
||||||
|
export const managedDomainSchema = z.object({
|
||||||
|
domain: z
|
||||||
|
.string()
|
||||||
|
.trim()
|
||||||
|
.min(1, '请输入域名')
|
||||||
|
.max(255, '域名不能超过 255 个字符')
|
||||||
|
.refine(
|
||||||
|
(value) => !value.includes('://') && !value.includes('/'),
|
||||||
|
'域名格式不合法',
|
||||||
|
)
|
||||||
|
.refine(
|
||||||
|
(value) =>
|
||||||
|
/^(?:\*\.)?(?=.{1,253}$)(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,63}$/.test(
|
||||||
|
value,
|
||||||
|
),
|
||||||
|
'域名格式不合法',
|
||||||
|
)
|
||||||
|
.refine(
|
||||||
|
(value) =>
|
||||||
|
!value.includes('*') ||
|
||||||
|
(value.startsWith('*.') && value.indexOf('*', 1) === -1),
|
||||||
|
'通配符域名仅支持 *.example.com 格式',
|
||||||
|
),
|
||||||
|
cert_id: z.string(),
|
||||||
|
enabled: z.boolean(),
|
||||||
|
remark: z.string().max(255, '备注不能超过 255 个字符'),
|
||||||
|
});
|
||||||
|
|
||||||
|
export 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 个字符'),
|
||||||
|
});
|
||||||
|
|
||||||
|
export type ManagedDomainFormValues = z.infer<typeof managedDomainSchema>;
|
||||||
|
export type ManualImportFormValues = z.infer<typeof manualImportSchema>;
|
||||||
|
|
||||||
|
export type FileImportFormValues = {
|
||||||
|
name: string;
|
||||||
|
remark: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const defaultManagedDomainValues: ManagedDomainFormValues = {
|
||||||
|
domain: '',
|
||||||
|
cert_id: '',
|
||||||
|
enabled: true,
|
||||||
|
remark: '',
|
||||||
|
};
|
||||||
|
|
||||||
|
export const defaultManualImportValues: ManualImportFormValues = {
|
||||||
|
name: '',
|
||||||
|
cert_pem: '',
|
||||||
|
key_pem: '',
|
||||||
|
remark: '',
|
||||||
|
};
|
||||||
|
|
||||||
|
export const defaultFileImportValues: FileImportFormValues = {
|
||||||
|
name: '',
|
||||||
|
remark: '',
|
||||||
|
};
|
||||||
@@ -0,0 +1,119 @@
|
|||||||
|
import type {
|
||||||
|
ManagedDomainItem,
|
||||||
|
ManagedDomainMutationPayload,
|
||||||
|
} from '@/features/managed-domains/types';
|
||||||
|
import type { ProxyRouteItem } from '@/features/proxy-routes/types';
|
||||||
|
import type {
|
||||||
|
TlsCertificateFileImportPayload,
|
||||||
|
TlsCertificateItem,
|
||||||
|
TlsCertificateMutationPayload,
|
||||||
|
} from '@/features/tls-certificates/types';
|
||||||
|
|
||||||
|
import type {
|
||||||
|
FileImportFormValues,
|
||||||
|
ManagedDomainFormValues,
|
||||||
|
ManualImportFormValues,
|
||||||
|
} from '@/features/websites/schemas';
|
||||||
|
import { formatDateTime } from '@/lib/utils/date';
|
||||||
|
|
||||||
|
export function getErrorMessage(error: unknown) {
|
||||||
|
return error instanceof Error ? error.message : '请求失败，请稍后重试。';
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getMatchTypeMeta(domain: string) {
|
||||||
|
return domain.startsWith('*.')
|
||||||
|
? { label: '通配符', variant: 'warning' as const }
|
||||||
|
: { label: '精确匹配', variant: 'info' as const };
|
||||||
|
}
|
||||||
|
|
||||||
|
export 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 };
|
||||||
|
}
|
||||||
|
|
||||||
|
export function buildCertificateLabel(certificate: TlsCertificateItem) {
|
||||||
|
return certificate.not_after
|
||||||
|
? `${certificate.name}（到期：${formatDateTime(certificate.not_after)}）`
|
||||||
|
: certificate.name;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function toManagedDomainPayload(
|
||||||
|
values: ManagedDomainFormValues,
|
||||||
|
): ManagedDomainMutationPayload {
|
||||||
|
return {
|
||||||
|
domain: values.domain.trim().toLowerCase(),
|
||||||
|
cert_id: values.cert_id ? Number(values.cert_id) : null,
|
||||||
|
enabled: values.enabled,
|
||||||
|
remark: values.remark.trim(),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export function toManagedDomainFormValues(
|
||||||
|
domain: ManagedDomainItem,
|
||||||
|
): ManagedDomainFormValues {
|
||||||
|
return {
|
||||||
|
domain: domain.domain,
|
||||||
|
cert_id: domain.cert_id ? String(domain.cert_id) : '',
|
||||||
|
enabled: domain.enabled,
|
||||||
|
remark: domain.remark || '',
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export 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(),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export 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 isRouteRelatedToManagedDomain(
|
||||||
|
managedDomain: string,
|
||||||
|
routeDomain: string,
|
||||||
|
) {
|
||||||
|
if (managedDomain === routeDomain) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!managedDomain.startsWith('*.')) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
const suffix = managedDomain.slice(2);
|
||||||
|
return routeDomain.endsWith(`.${suffix}`);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user