mirror of
https://github.com/Rain-kl/OpenFlare.git
synced 2026-10-11 01:36:37 +08:00
[优化] go 引用调整
This commit is contained in:
ryan
@@ -0,0 +1,247 @@
|
||||
'use client';
|
||||
|
||||
import Link from 'next/link';
|
||||
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 type { ManagedDomainItem } from '@/features/managed-domains/types';
|
||||
import { 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,
|
||||
getErrorMessage,
|
||||
getMatchTypeMeta,
|
||||
} from '@/features/websites/utils';
|
||||
import {
|
||||
DangerButton,
|
||||
PrimaryButton,
|
||||
} from '@/features/shared/components/resource-primitives';
|
||||
|
||||
type FeedbackState = {
|
||||
tone: 'info' | 'success' | 'danger';
|
||||
message: string;
|
||||
};
|
||||
|
||||
export function WebsitesPage() {
|
||||
const queryClient = useQueryClient();
|
||||
const [feedback, setFeedback] = useState<FeedbackState | null>(null);
|
||||
const [isWebsiteModalOpen, setIsWebsiteModalOpen] = 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 deleteDomainMutation = useMutation({
|
||||
mutationFn: deleteManagedDomain,
|
||||
onSuccess: async () => {
|
||||
setFeedback({ tone: 'success', message: '网站已删除。' });
|
||||
await queryClient.invalidateQueries({ queryKey: ['managed-domains'] });
|
||||
},
|
||||
onError: (error) => {
|
||||
setFeedback({ tone: 'danger', message: getErrorMessage(error) });
|
||||
},
|
||||
});
|
||||
|
||||
const domains = useMemo(
|
||||
() => managedDomainsQuery.data ?? [],
|
||||
[managedDomainsQuery.data],
|
||||
);
|
||||
const certificates = useMemo(
|
||||
() => certificatesQuery.data ?? [],
|
||||
[certificatesQuery.data],
|
||||
);
|
||||
const certificateMap = useMemo(
|
||||
() => new Map(certificates.map((item) => [item.id, item])),
|
||||
[certificates],
|
||||
);
|
||||
|
||||
const handleOpenWebsiteModal = () => {
|
||||
setPreferredCertificateId(null);
|
||||
setFeedback(null);
|
||||
setIsWebsiteModalOpen(true);
|
||||
};
|
||||
|
||||
const handleDeleteDomain = (domain: ManagedDomainItem) => {
|
||||
if (!window.confirm(`确认删除网站 ${domain.domain} 吗？`)) {
|
||||
return;
|
||||
}
|
||||
|
||||
setFeedback(null);
|
||||
deleteDomainMutation.mutate(domain.id);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="space-y-6">
|
||||
<PageHeader
|
||||
title="网站"
|
||||
description="新增网站和添加证书。"
|
||||
action={
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<Link
|
||||
href="/website/certificate"
|
||||
className="inline-flex min-h-[46px] 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>
|
||||
<PrimaryButton type="button" onClick={handleOpenWebsiteModal}>
|
||||
新增网站
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
|
||||
{feedback ? (
|
||||
<InlineMessage
|
||||
tone={feedback.tone}
|
||||
message={feedback.message}
|
||||
onClear={() => setFeedback(null)}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
<AppCard
|
||||
title="网站列表"
|
||||
description="查看网站绑定的证书、启用状态和更新时间。"
|
||||
>
|
||||
{managedDomainsQuery.isLoading ? (
|
||||
<LoadingState />
|
||||
) : managedDomainsQuery.isError ? (
|
||||
<ErrorState
|
||||
title="网站列表加载失败"
|
||||
description={getErrorMessage(managedDomainsQuery.error)}
|
||||
/>
|
||||
) : domains.length === 0 ? (
|
||||
<EmptyState
|
||||
title="暂无网站"
|
||||
description="点击右上角“新增网站”开始录入。录入时如还没有证书，也可以直接在弹窗里添加。"
|
||||
/>
|
||||
) : (
|
||||
<div className="grid gap-4 lg:grid-cols-2">
|
||||
{domains.map((domain) => {
|
||||
const certificate = domain.cert_id
|
||||
? (certificateMap.get(domain.cert_id) ?? null)
|
||||
: null;
|
||||
const matchType = getMatchTypeMeta(domain.domain);
|
||||
|
||||
return (
|
||||
<article
|
||||
key={domain.id}
|
||||
className="rounded-[28px] border border-[var(--border-default)] bg-[var(--surface-elevated)] p-5"
|
||||
>
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div className="space-y-3">
|
||||
<div className="space-y-2">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<h2 className="text-lg font-semibold text-[var(--foreground-primary)]">
|
||||
{domain.domain}
|
||||
</h2>
|
||||
<StatusBadge
|
||||
label={matchType.label}
|
||||
variant={matchType.variant}
|
||||
/>
|
||||
<StatusBadge
|
||||
label={domain.enabled ? '启用' : '停用'}
|
||||
variant={domain.enabled ? 'success' : 'warning'}
|
||||
/>
|
||||
</div>
|
||||
<p className="text-sm text-[var(--foreground-secondary)]">
|
||||
{domain.remark || '暂无备注'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<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 tracking-[0.18em] text-[var(--foreground-muted)] uppercase">
|
||||
绑定证书
|
||||
</p>
|
||||
<p className="mt-2 text-sm text-[var(--foreground-primary)]">
|
||||
{certificate
|
||||
? buildCertificateLabel(certificate)
|
||||
: '未绑定证书'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-row gap-2">
|
||||
<Link
|
||||
href={`/website/detail?id=${domain.id}`}
|
||||
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>
|
||||
<DangerButton
|
||||
type="button"
|
||||
onClick={() => handleDeleteDomain(domain)}
|
||||
disabled={deleteDomainMutation.isPending}
|
||||
>
|
||||
删除
|
||||
</DangerButton>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</AppCard>
|
||||
</div>
|
||||
|
||||
{isWebsiteModalOpen ? (
|
||||
<WebsiteEditorModal
|
||||
isOpen={isWebsiteModalOpen}
|
||||
onClose={() => {
|
||||
setIsWebsiteModalOpen(false);
|
||||
setPreferredCertificateId(null);
|
||||
}}
|
||||
certificates={certificates}
|
||||
certificatesLoading={certificatesQuery.isLoading}
|
||||
preferredCertificateId={preferredCertificateId}
|
||||
onRequestImportCertificate={() => setIsCertificateImportOpen(true)}
|
||||
onSaved={(_, mode) => {
|
||||
setPreferredCertificateId(null);
|
||||
setFeedback({
|
||||
tone: 'success',
|
||||
message: mode === 'create' ? '网站已创建。' : '网站已更新。',
|
||||
});
|
||||
}}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
{isCertificateImportOpen ? (
|
||||
<CertificateImportModal
|
||||
isOpen={isCertificateImportOpen}
|
||||
onClose={() => setIsCertificateImportOpen(false)}
|
||||
onImported={(certificate) => {
|
||||
setPreferredCertificateId(certificate.id);
|
||||
setFeedback({
|
||||
tone: 'success',
|
||||
message: `证书 ${certificate.name} 已导入，可直接用于当前网站。`,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
) : null}
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user