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

feat: unify website and certificate management

Browse Source
This commit is contained in:
ryan
2026-03-13 00:01:33 +08:00
parent 238546b358
commit e736bcd51a
12 changed files with 1064 additions and 994 deletions
Download Patch File Download Diff File Expand all files Collapse all files
atsf_server/web/app/(dashboard)/managed-domain/page.tsx
-5
View File
@@ -1,5 +0,0 @@
import { ManagedDomainsPage as ManagedDomainsFeaturePage } from '@/features/managed-domains/components/managed-domains-page';
export default function ManagedDomainsPage() {
return <ManagedDomainsFeaturePage />;
}
atsf_server/web/app/(dashboard)/tls-certificate/page.tsx
-5
View File
@@ -1,5 +0,0 @@
import { TlsCertificatesPage as TlsCertificatesFeaturePage } from '@/features/tls-certificates/components/tls-certificates-page';
export default function TlsCertificatesPage() {
return <TlsCertificatesFeaturePage />;
}
atsf_server/web/app/(dashboard)/website/page.tsx
+5
View File
@@ -0,0 +1,5 @@
import { WebsitesPage } from '@/features/websites/components/websites-page';
export default function WebsiteRoute() {
return <WebsitesPage />;
}
atsf_server/web/features/dashboard/components/dashboard-overview.tsx
+97 -29
View File
@@ -59,7 +59,7 @@ function SummaryCard({
action={
<Link
href={href}
className='inline-flex items-center rounded-full border border-[var(--border-default)] px-3 py-1.5 text-xs text-[var(--foreground-primary)] transition hover:bg-[var(--control-background-hover)]'
className="inline-flex items-center rounded-full border border-[var(--border-default)] px-3 py-1.5 text-xs text-[var(--foreground-primary)] transition hover:bg-[var(--control-background-hover)]"
>
进入模块
</Link>
@@ -68,18 +68,23 @@ function SummaryCard({
{status === 'pending' ? (
<LoadingState />
) : status === 'error' ? (
<ErrorState title={`${title}加载失败`} description={getErrorMessage(error)} />
<ErrorState
title={`${title}加载失败`}
description={getErrorMessage(error)}
/>
) : (
<div className='grid gap-3 sm:grid-cols-2'>
<div className="grid gap-3 sm:grid-cols-2">
{items.map((item) => (
<div
key={item.label}
className='rounded-2xl border border-[var(--border-default)] bg-[var(--surface-muted)] px-4 py-4'
className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-muted)] 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">
{item.label}
</p>
<p className='mt-2 text-lg font-semibold text-[var(--foreground-primary)]'>{item.value}</p>
<p className="mt-2 text-lg font-semibold text-[var(--foreground-primary)]">
{item.value}
</p>
</div>
))}
</div>
@@ -99,9 +104,18 @@ export function DashboardOverview() {
] = useQueries({
queries: [
{ queryKey: ['dashboard', 'nodes'], queryFn: getNodes },
{ queryKey: ['dashboard', 'config-versions'], queryFn: getConfigVersions },
{ queryKey: ['dashboard', 'managed-domains'], queryFn: getManagedDomains },
{ queryKey: ['dashboard', 'tls-certificates'], queryFn: getTlsCertificates },
{
queryKey: ['dashboard', 'config-versions'],
queryFn: getConfigVersions,
},
{
queryKey: ['dashboard', 'managed-domains'],
queryFn: getManagedDomains,
},
{
queryKey: ['dashboard', 'tls-certificates'],
queryFn: getTlsCertificates,
},
{ queryKey: ['dashboard', 'proxy-routes'], queryFn: getProxyRoutes },
{
queryKey: ['dashboard', 'users'],
@@ -125,7 +139,11 @@ export function DashboardOverview() {
const expiringCertificates = certificates.filter((item) => {
const expiresAt = new Date(item.not_after).getTime();
return !Number.isNaN(expiresAt) && expiresAt >= Date.now() && expiresAt - Date.now() <= 30 * 24 * 60 * 60 * 1000;
return (
!Number.isNaN(expiresAt) &&
expiresAt >= Date.now() &&
expiresAt - Date.now() <= 30 * 24 * 60 * 60 * 1000
);
}).length;
const expiredCertificates = certificates.filter((item) => {
@@ -142,9 +160,18 @@ export function DashboardOverview() {
error: nodesQuery.error,
items: [
{ label: '节点总数', value: nodes.length },
{ label: '在线节点', value: nodes.filter((item) => item.status === 'online').length },
{ label: '待接入节点', value: nodes.filter((item) => item.status === 'pending').length },
{ label: '自动更新', value: nodes.filter((item) => item.auto_update_enabled).length },
{
label: '在线节点',
value: nodes.filter((item) => item.status === 'online').length,
},
{
label: '待接入节点',
value: nodes.filter((item) => item.status === 'pending').length,
},
{
label: '自动更新',
value: nodes.filter((item) => item.auto_update_enabled).length,
},
],
},
{
@@ -155,34 +182,56 @@ export function DashboardOverview() {
error: versionsQuery.error,
items: [
{ label: '版本总数', value: versions.length },
{ label: '激活版本', value: versions.filter((item) => item.is_active).length },
{ label: '最近创建', value: versions[0]?.created_at ? formatDateTime(versions[0].created_at) : '—' },
{
label: '激活版本',
value: versions.filter((item) => item.is_active).length,
},
{
label: '最近创建',
value: versions[0]?.created_at
? formatDateTime(versions[0].created_at)
: '—',
},
],
},
{
title: '规则摘要',
description: '查看域名规则启用状态、通配符覆盖和证书绑定规模。',
href: '/managed-domain',
href: '/website',
status: managedDomainsQuery.status,
error: managedDomainsQuery.error,
items: [
{ label: '域名规则', value: domains.length },
{ label: '已启用', value: domains.filter((item) => item.enabled).length },
{ label: '通配符规则', value: domains.filter((item) => item.domain.startsWith('*.')).length },
{ label: '已绑证书', value: domains.filter((item) => item.cert_id).length },
{
label: '已启用',
value: domains.filter((item) => item.enabled).length,
},
{
label: '通配符规则',
value: domains.filter((item) => item.domain.startsWith('*.')).length,
},
{
label: '已绑证书',
value: domains.filter((item) => item.cert_id).length,
},
],
},
{
title: '证书概览',
description: '快速识别证书存量、近 30 天到期风险和过期情况。',
href: '/tls-certificate',
href: '/website',
status: certificatesQuery.status,
error: certificatesQuery.error,
items: [
{ label: '证书总数', value: certificates.length },
{ label: '30 天内到期', value: expiringCertificates },
{ label: '已过期', value: expiredCertificates },
{ label: '最近更新', value: certificates[0]?.updated_at ? formatDateTime(certificates[0].updated_at) : '—' },
{
label: '最近更新',
value: certificates[0]?.updated_at
? formatDateTime(certificates[0].updated_at)
: '—',
},
],
},
{
@@ -193,11 +242,21 @@ export function DashboardOverview() {
error: proxyRoutesQuery.error,
items: [
{ label: '规则总数', value: routes.length },
{ label: '已启用', value: routes.filter((item) => item.enabled).length },
{ label: 'HTTPS 规则', value: routes.filter((item) => item.enable_https).length },
{
label: '已启用',
value: routes.filter((item) => item.enabled).length,
},
{
label: 'HTTPS 规则',
value: routes.filter((item) => item.enable_https).length,
},
{
label: '自定义请求头',
value: routes.reduce((count, route) => count + parseCustomHeaders(route.custom_headers).length, 0),
value: routes.reduce(
(count, route) =>
count + parseCustomHeaders(route.custom_headers).length,
0,
),
},
],
},
@@ -209,16 +268,25 @@ export function DashboardOverview() {
error: usersQuery.error,
items: [
{ label: '用户总数', value: users.length },
{ label: '管理员', value: users.filter((item) => item.role >= 10).length },
{ label: '已激活', value: users.filter((item) => item.status === 1).length },
{ label: '已封禁', value: users.filter((item) => item.status !== 1).length },
{
label: '管理员',
value: users.filter((item) => item.role >= 10).length,
},
{
label: '已激活',
value: users.filter((item) => item.status === 1).length,
},
{
label: '已封禁',
value: users.filter((item) => item.status !== 1).length,
},
],
},
] as const;
return (
<div className='space-y-6'>
<div className='grid gap-6 xl:grid-cols-2'>
<div className="space-y-6">
<div className="grid gap-6 xl:grid-cols-2">
{dashboardCards.map((card) => (
<SummaryCard key={card.title} {...card} />
))}
atsf_server/web/features/managed-domains/components/managed-domains-page.tsx
-411
View File
@@ -1,411 +0,0 @@
'use client';
import { zodResolver } from '@hookform/resolvers/zod';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { useMemo, useState } from 'react';
import { useForm, useWatch } 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 { AppModal } from '@/components/ui/app-modal';
import { AppCard } from '@/components/ui/app-card';
import { StatusBadge } from '@/components/ui/status-badge';
import {
createManagedDomain,
deleteManagedDomain,
getManagedDomainCertificates,
getManagedDomains,
updateManagedDomain,
} from '@/features/managed-domains/api/managed-domains';
import type {
ManagedDomainCertificateOption,
ManagedDomainItem,
ManagedDomainMutationPayload,
} from '@/features/managed-domains/types';
import {
DangerButton,
PrimaryButton,
ResourceField,
ResourceInput,
ResourceSelect,
SecondaryButton,
ToggleField,
} from '@/features/shared/components/resource-primitives';
import { formatDateTime } from '@/lib/utils/date';
const managedDomainsQueryKey = ['managed-domains'] as const;
const managedDomainCertificatesQueryKey = ['managed-domains', 'certificates'] as const;
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 个字符'),
});
type ManagedDomainFormValues = z.infer<typeof managedDomainSchema>;
type FeedbackState = {
tone: 'info' | 'success' | 'danger';
message: string;
};
const defaultValues: ManagedDomainFormValues = {
domain: '',
cert_id: '',
enabled: true,
remark: '',
};
function getErrorMessage(error: unknown) {
return error instanceof Error ? error.message : '请求失败，请稍后重试。';
}
function getMatchTypeMeta(domain: string) {
return domain.startsWith('*.')
? { label: '通配符', variant: 'warning' as const }
: { label: '精确匹配', variant: 'info' as const };
}
function buildCertificateLabel(certificate: ManagedDomainCertificateOption) {
return certificate.not_after
? `${certificate.name}（到期：${formatDateTime(certificate.not_after)}）`
: certificate.name;
}
function toPayload(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(),
};
}
function toFormValues(domain: ManagedDomainItem): ManagedDomainFormValues {
return {
domain: domain.domain,
cert_id: domain.cert_id ? String(domain.cert_id) : '',
enabled: domain.enabled,
remark: domain.remark || '',
};
}
export function ManagedDomainsPage() {
const queryClient = useQueryClient();
const [editingDomainId, setEditingDomainId] = useState<number | null>(null);
const [isEditorOpen, setIsEditorOpen] = useState(false);
const [feedback, setFeedback] = useState<FeedbackState | null>(null);
const form = useForm<ManagedDomainFormValues>({
resolver: zodResolver(managedDomainSchema),
defaultValues,
});
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 managedDomainsQuery = useQuery({
queryKey: managedDomainsQueryKey,
queryFn: getManagedDomains,
});
const certificatesQuery = useQuery({
queryKey: managedDomainCertificatesQueryKey,
queryFn: getManagedDomainCertificates,
});
const saveMutation = useMutation({
mutationFn: async (values: ManagedDomainFormValues) => {
const payload = toPayload(values);
return editingDomainId
? updateManagedDomain(editingDomainId, payload)
: createManagedDomain(payload);
},
onSuccess: async () => {
setFeedback({
tone: 'success',
message: editingDomainId ? '域名规则已更新。' : '域名规则已创建。',
});
setEditingDomainId(null);
setIsEditorOpen(false);
form.reset(defaultValues);
await queryClient.invalidateQueries({ queryKey: managedDomainsQueryKey });
},
onError: (error) => {
setFeedback({ tone: 'danger', message: getErrorMessage(error) });
},
});
const deleteMutation = useMutation({
mutationFn: deleteManagedDomain,
onSuccess: async () => {
setFeedback({ tone: 'success', message: '域名规则已删除。' });
await queryClient.invalidateQueries({ queryKey: managedDomainsQueryKey });
},
onError: (error) => {
setFeedback({ tone: 'danger', message: getErrorMessage(error) });
},
});
const certificates = useMemo(() => certificatesQuery.data ?? [], [certificatesQuery.data]);
const domains = useMemo(() => managedDomainsQuery.data ?? [], [managedDomainsQuery.data]);
const certificateMap = useMemo(
() => new Map(certificates.map((item) => [item.id, item])),
[certificates],
);
const currentCertificate = watchedCertId ? certificateMap.get(Number(watchedCertId)) : null;
const handleReset = () => {
setEditingDomainId(null);
setIsEditorOpen(false);
setFeedback(null);
form.reset(defaultValues);
};
const handleCreate = () => {
setEditingDomainId(null);
setFeedback(null);
form.reset(defaultValues);
setIsEditorOpen(true);
};
const handleEdit = (domain: ManagedDomainItem) => {
setEditingDomainId(domain.id);
setFeedback(null);
form.reset(toFormValues(domain));
setIsEditorOpen(true);
};
const handleDelete = (domain: ManagedDomainItem) => {
if (!window.confirm(`确认删除域名规则 ${domain.domain} 吗？`)) {
return;
}
setFeedback(null);
deleteMutation.mutate(domain.id);
};
const handleSubmit = form.handleSubmit((values) => {
setFeedback(null);
saveMutation.mutate(values);
});
return (
<>
<div className='space-y-6'>
<PageHeader
title='域名管理'
description='维护精确域名与通配符域名，为其绑定默认证书，并控制是否参与自动匹配与发布。'
action={
<PrimaryButton type='button' onClick={handleCreate}>
新增域名
</PrimaryButton>
}
/>
{feedback ? <InlineMessage tone={feedback.tone} message={feedback.message} /> : null}
<AppCard
title='域名规则列表'
action={
<SecondaryButton
type='button'
onClick={() => void queryClient.invalidateQueries({ queryKey: managedDomainsQueryKey })}
>
刷新
</SecondaryButton>
}
>
{managedDomainsQuery.isLoading ? (
<LoadingState />
) : managedDomainsQuery.isError ? (
<ErrorState title='域名规则加载失败' description={getErrorMessage(managedDomainsQuery.error)} />
) : domains.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'>绑定证书</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)]'>
{domains.map((domain) => {
const certificate = domain.cert_id ? certificateMap.get(domain.cert_id) : null;
const matchType = getMatchTypeMeta(domain.domain);
return (
<tr key={domain.id} className='align-top'>
<td className='px-3 py-4 font-medium text-[var(--foreground-primary)]'>{domain.domain}</td>
<td className='px-3 py-4'>
<StatusBadge label={matchType.label} variant={matchType.variant} />
</td>
<td className='px-3 py-4 text-[var(--foreground-secondary)]'>
{certificate ? certificate.name : '未绑定'}
</td>
<td className='px-3 py-4'>
<StatusBadge
label={domain.enabled ? '启用' : '停用'}
variant={domain.enabled ? 'success' : 'warning'}
/>
</td>
<td className='px-3 py-4 text-[var(--foreground-secondary)]'>{domain.remark || '—'}</td>
<td className='px-3 py-4 text-[var(--foreground-secondary)]'>
{formatDateTime(domain.updated_at)}
</td>
<td className='px-3 py-4'>
<div className='flex flex-wrap gap-2'>
<SecondaryButton
type='button'
onClick={() => handleEdit(domain)}
className='px-3 py-2 text-xs'
>
编辑
</SecondaryButton>
<DangerButton
type='button'
onClick={() => handleDelete(domain)}
disabled={deleteMutation.isPending}
className='px-3 py-2 text-xs'
>
删除
</DangerButton>
</div>
</td>
</tr>
);
})}
</tbody>
</table>
</div>
)}
</AppCard>
</div>
<AppModal
isOpen={isEditorOpen}
onClose={handleReset}
title={editingDomainId ? '编辑域名规则' : '新增域名规则'}
description='支持精确域名与单层通配符域名，证书可留空以仅维护资产关系。'
footer={
<div className='flex flex-wrap justify-end gap-3'>
<SecondaryButton type='button' onClick={handleReset} disabled={saveMutation.isPending}>
取消
</SecondaryButton>
<PrimaryButton type='submit' form='managed-domain-editor-form' disabled={saveMutation.isPending}>
{saveMutation.isPending ? '保存中...' : editingDomainId ? '保存修改' : '新增域名'}
</PrimaryButton>
</div>
}
>
<form id='managed-domain-editor-form' className='space-y-5' onSubmit={handleSubmit}>
<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}
>
<ResourceSelect
value={watchedCertId}
disabled={certificatesQuery.isLoading}
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>
</ResourceField>
</div>
<ToggleField
label='启用规则'
description='停用后该域名不会参与证书自动匹配，但记录会保留。'
checked={watchedEnabled}
onChange={(checked) =>
form.setValue('enabled', checked, {
shouldDirty: true,
shouldValidate: true,
})
}
/>
<AppCard title='匹配提示' description='自动证书推荐时，精确域名优先级高于通配符域名。'>
<div className='space-y-3 text-sm leading-6 text-[var(--foreground-secondary)]'>
<p>
当前输入：
<span className='ml-2 font-medium text-[var(--foreground-primary)]'>
{watchedDomain.trim() || '未填写域名'}
</span>
</p>
<div className='flex flex-wrap gap-2'>
{watchedDomain.trim() ? (
<StatusBadge {...getMatchTypeMeta(watchedDomain.trim())} />
) : (
<StatusBadge label='等待输入' variant='warning' />
)}
<StatusBadge
label={currentCertificate ? `证书：${currentCertificate.name}` : '未绑定证书'}
variant={currentCertificate ? 'success' : 'warning'}
/>
</div>
<p>
建议只为真正需要默认推荐的域名绑定证书；如果同一 hostname 同时命中精确和通配符规则，
系统会优先使用精确匹配。
</p>
</div>
</AppCard>
<ResourceField
label='备注'
hint='可选，用于记录归属、用途或生效说明。'
error={form.formState.errors.remark?.message}
>
<ResourceInput placeholder='例如：主站泛域名证书' {...form.register('remark')} />
</ResourceField>
</form>
</AppModal>
</>
);
}
atsf_server/web/features/performance/components/performance-page.tsx
+1 -2
View File
@@ -569,7 +569,6 @@ export function PerformancePage() {
<AppCard
title="OpenResty 连接与事件"
description="第五版第一批结构化性能项。保存后进入统一发布链路，不会在节点即时生效。"
action={
<PrimaryButton
type="button"
@@ -638,7 +637,7 @@ export function PerformancePage() {
</ResourceField>
<ToggleField
label="multi_accept"
description="是否启用 multi_accept on。"
description=""
checked={performanceFields.OpenRestyEventsMultiAcceptEnabled}
onChange={(checked) =>
setPerformanceFields((previous) => ({
atsf_server/web/features/tls-certificates/components/tls-certificates-page.tsx
-525
View File
@@ -1,525 +0,0 @@
'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 { AppModal } from '@/components/ui/app-modal';
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 [isImportModalOpen, setIsImportModalOpen] = useState(false);
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);
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: '证书已导入。' });
setImportMode('manual');
setIsImportModalOpen(false);
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: '证书文件已导入。' });
setImportMode('manual');
setIsImportModalOpen(false);
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 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);
};
const handleCloseImportModal = () => {
setImportMode('manual');
setIsImportModalOpen(false);
};
return (
<>
<div className="space-y-6">
<PageHeader
title="TLS 证书"
description="支持手动粘贴 PEM 导入和文件上传导入，并展示证书有效期与到期风险。"
action={
<PrimaryButton
type="button"
onClick={() => {
setImportMode('manual');
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="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
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={() => {
setFileForm(defaultFileValues);
setCertFile(null);
setKeyFile(null);
setFileInputNonce((value) => value + 1);
}}
disabled={fileImportMutation.isPending}
>
清空文件
</SecondaryButton>
</div>
</form>
</AppCard>
)}
</div>
</AppModal>
</>
);
}
atsf_server/web/features/websites/components/websites-page.tsx
+934
View File
@@ -0,0 +1,934 @@
'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, useWatch } 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 { AppModal } from '@/components/ui/app-modal';
import { StatusBadge } from '@/components/ui/status-badge';
import {
createManagedDomain,
deleteManagedDomain,
getManagedDomains,
updateManagedDomain,
} from '@/features/managed-domains/api/managed-domains';
import type {
ManagedDomainItem,
ManagedDomainMutationPayload,
} from '@/features/managed-domains/types';
import {
DangerButton,
PrimaryButton,
ResourceField,
ResourceInput,
ResourceSelect,
ResourceTextarea,
SecondaryButton,
ToggleField,
} from '@/features/shared/components/resource-primitives';
import {
createTlsCertificate,
deleteTlsCertificate,
getTlsCertificates,
importTlsCertificateFiles,
} from '@/features/tls-certificates/api/tls-certificates';
import type {
TlsCertificateFileImportPayload,
TlsCertificateItem,
TlsCertificateMutationPayload,
} from '@/features/tls-certificates/types';
import { formatDateTime } from '@/lib/utils/date';
const managedDomainsQueryKey = ['managed-domains'] as const;
const managedDomainCertificatesQueryKey = [
'managed-domains',
'certificates',
] as const;
const tlsCertificatesQueryKey = ['tls-certificates', 'list'] as const;
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 个字符'),
});
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 ManagedDomainFormValues = z.infer<typeof managedDomainSchema>;
type ManualImportFormValues = z.infer<typeof manualImportSchema>;
type FileImportFormValues = {
name: string;
remark: string;
};
type FeedbackState = {
tone: 'info' | 'success' | 'danger';
message: string;
};
const defaultDomainValues: ManagedDomainFormValues = {
domain: '',
cert_id: '',
enabled: true,
remark: '',
};
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 getMatchTypeMeta(domain: string) {
return domain.startsWith('*.')
? { label: '通配符', variant: 'warning' as const }
: { label: '精确匹配', variant: 'info' as const };
}
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 buildCertificateLabel(certificate: TlsCertificateItem) {
return certificate.not_after
? `${certificate.name}（到期：${formatDateTime(certificate.not_after)}）`
: certificate.name;
}
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(),
};
}
function toManagedDomainFormValues(
domain: ManagedDomainItem,
): ManagedDomainFormValues {
return {
domain: domain.domain,
cert_id: domain.cert_id ? String(domain.cert_id) : '',
enabled: domain.enabled,
remark: domain.remark || '',
};
}
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 WebsitesPage() {
const queryClient = useQueryClient();
const [editingDomainId, setEditingDomainId] = useState<number | null>(null);
const [feedback, setFeedback] = useState<FeedbackState | null>(null);
const [isImportModalOpen, setIsImportModalOpen] = useState(false);
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);
const domainForm = useForm<ManagedDomainFormValues>({
resolver: zodResolver(managedDomainSchema),
defaultValues: defaultDomainValues,
});
const manualForm = useForm<ManualImportFormValues>({
resolver: zodResolver(manualImportSchema),
defaultValues: defaultManualValues,
});
const watchedDomain = useWatch({
control: domainForm.control,
name: 'domain',
});
const watchedCertId = useWatch({
control: domainForm.control,
name: 'cert_id',
});
const watchedEnabled = useWatch({
control: domainForm.control,
name: 'enabled',
});
const managedDomainsQuery = useQuery({
queryKey: managedDomainsQueryKey,
queryFn: getManagedDomains,
});
const certificatesQuery = useQuery({
queryKey: managedDomainCertificatesQueryKey,
queryFn: getTlsCertificates,
});
const saveDomainMutation = useMutation({
mutationFn: async (values: ManagedDomainFormValues) => {
const payload = toManagedDomainPayload(values);
return editingDomainId
? updateManagedDomain(editingDomainId, payload)
: createManagedDomain(payload);
},
onSuccess: async () => {
setFeedback({
tone: 'success',
message: editingDomainId ? '网站已更新。' : '网站已创建。',
});
setEditingDomainId(null);
domainForm.reset(defaultDomainValues);
await queryClient.invalidateQueries({ queryKey: managedDomainsQueryKey });
},
onError: (error) => {
setFeedback({ tone: 'danger', message: getErrorMessage(error) });
},
});
const deleteDomainMutation = useMutation({
mutationFn: deleteManagedDomain,
onSuccess: async () => {
setFeedback({ tone: 'success', message: '网站已删除。' });
await queryClient.invalidateQueries({ queryKey: managedDomainsQueryKey });
},
onError: (error) => {
setFeedback({ tone: 'danger', message: getErrorMessage(error) });
},
});
const manualImportMutation = useMutation({
mutationFn: async (values: ManualImportFormValues) =>
createTlsCertificate(toManualPayload(values)),
onSuccess: async () => {
setFeedback({ tone: 'success', message: '证书已导入。' });
setImportMode('manual');
setIsImportModalOpen(false);
manualForm.reset(defaultManualValues);
await Promise.all([
queryClient.invalidateQueries({
queryKey: managedDomainCertificatesQueryKey,
}),
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: '证书文件已导入。' });
setImportMode('manual');
setIsImportModalOpen(false);
setFileForm(defaultFileValues);
setCertFile(null);
setKeyFile(null);
setFileInputNonce((value) => value + 1);
await Promise.all([
queryClient.invalidateQueries({
queryKey: managedDomainCertificatesQueryKey,
}),
queryClient.invalidateQueries({
queryKey: tlsCertificatesQueryKey,
}),
]);
},
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: managedDomainCertificatesQueryKey,
}),
queryClient.invalidateQueries({
queryKey: tlsCertificatesQueryKey,
}),
queryClient.invalidateQueries({ queryKey: managedDomainsQueryKey }),
]);
},
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 currentCertificate = watchedCertId
? certificateMap.get(Number(watchedCertId))
: null;
const handleDomainSubmit = domainForm.handleSubmit((values) => {
setFeedback(null);
saveDomainMutation.mutate(values);
});
const handleDomainReset = () => {
setEditingDomainId(null);
domainForm.reset(defaultDomainValues);
};
const handleEditDomain = (domain: ManagedDomainItem) => {
setEditingDomainId(domain.id);
setFeedback(null);
domainForm.reset(toManagedDomainFormValues(domain));
window.scrollTo({ top: 0, behavior: 'smooth' });
};
const handleDeleteDomain = (domain: ManagedDomainItem) => {
if (!window.confirm(`确认删除网站 ${domain.domain} 吗？`)) {
return;
}
setFeedback(null);
deleteDomainMutation.mutate(domain.id);
};
const handleManualSubmit = manualForm.handleSubmit((values) => {
setFeedback(null);
manualImportMutation.mutate(values);
});
const handleFileSubmit = (event: FormEvent<HTMLFormElement>) => {
event.preventDefault();
setFeedback(null);
fileImportMutation.mutate(fileForm);
};
const handleDeleteCertificate = (certificate: TlsCertificateItem) => {
if (!window.confirm(`确认删除证书 ${certificate.name} 吗？`)) {
return;
}
setFeedback(null);
deleteCertificateMutation.mutate(certificate.id);
};
const handleCloseImportModal = () => {
setImportMode('manual');
setIsImportModalOpen(false);
};
return (
<>
<div className="space-y-6">
<PageHeader
title="网站"
description="在同一页完成网站录入、默认证书绑定、证书导入和资产巡检，减少域名页与证书页之间的来回切换。"
/>
{feedback ? (
<InlineMessage tone={feedback.tone} message={feedback.message} />
) : null}
<div className="grid gap-6 xl:grid-cols-[1.2fr_0.8fr]">
<AppCard
title={editingDomainId ? '编辑网站' : '快速添加网站'}
description="录入域名后即可直接绑定默认证书。若证书尚未导入，可在右侧先导入再回到这里选择。"
action={
<div className="flex flex-wrap gap-2">
{editingDomainId ? (
<SecondaryButton type="button" onClick={handleDomainReset}>
取消编辑
</SecondaryButton>
) : null}
<PrimaryButton
type="button"
onClick={() => void handleDomainSubmit()}
disabled={saveDomainMutation.isPending}
>
{saveDomainMutation.isPending
? '保存中...'
: editingDomainId
? '保存网站'
: '创建网站'}
</PrimaryButton>
</div>
}
>
<form className="space-y-5" onSubmit={handleDomainSubmit}>
<div className="grid gap-4 md:grid-cols-2">
<ResourceField
label="域名"
hint="示例：example.com 或 *.example.com"
error={domainForm.formState.errors.domain?.message}
>
<ResourceInput
placeholder="example.com 或 *.example.com"
{...domainForm.register('domain')}
/>
</ResourceField>
<ResourceField
label="默认证书"
hint="证书用于域名自动匹配与规则推荐，可不选择。"
error={domainForm.formState.errors.cert_id?.message}
>
<ResourceSelect
value={watchedCertId}
disabled={certificatesQuery.isLoading}
onChange={(event) =>
domainForm.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>
</ResourceField>
</div>
<ToggleField
label="启用网站"
description="停用后该域名不会参与自动匹配，但记录会保留。"
checked={watchedEnabled}
onChange={(checked) =>
domainForm.setValue('enabled', checked, {
shouldDirty: true,
shouldValidate: true,
})
}
/>
<ResourceField
label="备注"
hint="可选，用于记录归属、用途或生效说明。"
error={domainForm.formState.errors.remark?.message}
>
<ResourceInput
placeholder="例如：主站 / 泛域名 / 生产"
{...domainForm.register('remark')}
/>
</ResourceField>
</form>
</AppCard>
<AppCard
title="证书快捷入口"
description="先导入证书，再回到左侧立即绑定到网站。无需跳转到单独页面。"
action={
<div className="flex flex-wrap gap-2">
<SecondaryButton
type="button"
onClick={() =>
void queryClient.invalidateQueries({
queryKey: managedDomainCertificatesQueryKey,
})
}
>
刷新证书
</SecondaryButton>
<PrimaryButton
type="button"
onClick={() => {
setImportMode('manual');
setIsImportModalOpen(true);
}}
>
导入证书
</PrimaryButton>
</div>
}
>
<div className="space-y-4">
<div className="grid gap-4 md:grid-cols-3 xl:grid-cols-1">
<div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4">
<p className="text-xs tracking-[0.2em] text-[var(--foreground-muted)] uppercase">
当前网站输入
</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 tracking-[0.2em] text-[var(--foreground-muted)] uppercase">
匹配类型
</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 tracking-[0.2em] text-[var(--foreground-muted)] uppercase">
当前证书
</p>
<div className="mt-2">
<StatusBadge
label={
currentCertificate
? currentCertificate.name
: '未绑定证书'
}
variant={currentCertificate ? 'success' : 'warning'}
/>
</div>
</div>
</div>
<div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4 text-sm leading-6 text-[var(--foreground-secondary)]">
<p>
建议流程：先导入证书，再在左侧创建网站并直接绑定。若同一
hostname 同时命中精确和通配符， 系统会优先使用精确匹配。
</p>
</div>
</div>
</AppCard>
</div>
<div className="grid gap-6 xl:grid-cols-[1.15fr_0.85fr]">
<AppCard
title="网站列表"
description="维护精确域名与通配符域名，并查看当前绑定的默认证书。"
>
{managedDomainsQuery.isLoading ? (
<LoadingState />
) : managedDomainsQuery.isError ? (
<ErrorState
title="网站列表加载失败"
description={getErrorMessage(managedDomainsQuery.error)}
/>
) : domains.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">绑定证书</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)]">
{domains.map((domain) => {
const certificate = domain.cert_id
? certificateMap.get(domain.cert_id)
: null;
const matchType = getMatchTypeMeta(domain.domain);
return (
<tr key={domain.id} className="align-top">
<td className="px-3 py-4 font-medium text-[var(--foreground-primary)]">
<div className="space-y-1">
<p>{domain.domain}</p>
<p className="text-xs text-[var(--foreground-secondary)]">
{domain.remark || '—'}
</p>
</div>
</td>
<td className="px-3 py-4">
<StatusBadge
label={matchType.label}
variant={matchType.variant}
/>
</td>
<td className="px-3 py-4 text-[var(--foreground-secondary)]">
{certificate ? certificate.name : '未绑定'}
</td>
<td className="px-3 py-4">
<StatusBadge
label={domain.enabled ? '启用' : '停用'}
variant={domain.enabled ? 'success' : 'warning'}
/>
</td>
<td className="px-3 py-4 text-[var(--foreground-secondary)]">
{formatDateTime(domain.updated_at)}
</td>
<td className="px-3 py-4">
<div className="flex flex-wrap gap-2">
<SecondaryButton
type="button"
onClick={() => handleEditDomain(domain)}
className="px-3 py-2 text-xs"
>
编辑
</SecondaryButton>
<DangerButton
type="button"
onClick={() => handleDeleteDomain(domain)}
disabled={deleteDomainMutation.isPending}
className="px-3 py-2 text-xs"
>
删除
</DangerButton>
</div>
</td>
</tr>
);
})}
</tbody>
</table>
</div>
)}
</AppCard>
<AppCard
title="证书列表"
description="查看有效期和到期风险，并直接删除不再使用的证书。"
>
{certificatesQuery.isLoading ? (
<LoadingState />
) : certificatesQuery.isError ? (
<ErrorState
title="证书列表加载失败"
description={getErrorMessage(certificatesQuery.error)}
/>
) : certificates.length === 0 ? (
<EmptyState
title="暂无证书"
description="点击上方“导入证书”即可开始录入。"
/>
) : (
<div className="space-y-3">
{certificates.map((certificate) => {
const status = getCertificateStatus(certificate);
return (
<div
key={certificate.id}
className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4"
>
<div className="flex items-start justify-between gap-3">
<div className="space-y-2">
<p className="text-sm font-semibold text-[var(--foreground-primary)]">
{certificate.name}
</p>
<div className="flex flex-wrap gap-2">
<StatusBadge
label={status.label}
variant={status.variant}
/>
</div>
<div className="text-xs leading-5 text-[var(--foreground-secondary)]">
<p>
生效：{formatDateTime(certificate.not_before)}
</p>
<p>到期：{formatDateTime(certificate.not_after)}</p>
<p>备注：{certificate.remark || '—'}</p>
</div>
</div>
<DangerButton
type="button"
onClick={() => handleDeleteCertificate(certificate)}
disabled={deleteCertificateMutation.isPending}
className="px-3 py-2 text-xs"
>
删除
</DangerButton>
</div>
</div>
);
})}
</div>
)}
</AppCard>
</div>
</div>
<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 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={() => {
setFileForm(defaultFileValues);
setCertFile(null);
setKeyFile(null);
setFileInputNonce((value) => value + 1);
}}
disabled={fileImportMutation.isPending}
>
清空文件
</SecondaryButton>
</div>
</form>
</AppCard>
)}
</div>
</AppModal>
</>
);
}
atsf_server/web/lib/constants/navigation.ts
+3 -8
View File
@@ -22,14 +22,9 @@ export const dashboardNavigation: NavigationItem[] = [
icon: 'release',
},
{
href: '/managed-domain',
label: '域名',
icon: 'domain',
},
{
href: '/tls-certificate',
label: '证书',
icon: 'certificate',
href: '/website',
label: '网站',
icon: 'website',
},
{
href: '/user',
atsf_server/web/lib/utils/navigation.ts
+22 -6
View File
@@ -16,18 +16,34 @@ export function isPathActive(pathname: string, href: string) {
return normalizedPathname === '/';
}
return normalizedPathname === href || normalizedPathname.startsWith(`${href}/`);
return (
normalizedPathname === href || normalizedPathname.startsWith(`${href}/`)
);
}
export function isNavigationItemActive(pathname: string, item: NavigationItem): boolean {
return isPathActive(pathname, item.href) || item.children?.some((child) => isNavigationItemActive(pathname, child)) || false;
export function isNavigationItemActive(
pathname: string,
item: NavigationItem,
): boolean {
return (
isPathActive(pathname, item.href) ||
item.children?.some((child) => isNavigationItemActive(pathname, child)) ||
false
);
}
export function flattenNavigationItems(items: NavigationItem[]): NavigationItem[] {
return items.flatMap((item) => [item, ...(item.children ? flattenNavigationItems(item.children) : [])]);
export function flattenNavigationItems(
items: NavigationItem[],
): NavigationItem[] {
return items.flatMap((item) => [
item,
...(item.children ? flattenNavigationItems(item.children) : []),
]);
}
export function getCurrentNavigationItem(pathname: string): NavigationItem | undefined {
export function getCurrentNavigationItem(
pathname: string,
): NavigationItem | undefined {
const findMatch = (items: NavigationItem[]): NavigationItem | undefined => {
for (const item of items) {
if (item.children) {
atsf_server/web/tests/unit/navigation-utils.test.ts
+1 -1
View File
@@ -10,7 +10,7 @@ describe('navigation utils', () => {
it('resolves current navigation item for nested paths', () => {
expect(getCurrentNavigationItem('/node/abc')?.label).toBe('节点');
expect(getCurrentNavigationItem('/managed-domain')?.label).toBe('域名');
expect(getCurrentNavigationItem('/website')?.label).toBe('网站');
expect(getCurrentNavigationItem('/performance')?.label).toBe('性能');
expect(getCurrentNavigationItem('/setting')?.label).toBe('设置');
});
docs/frontend-revamp-plan.md
+1 -2
View File
@@ -51,8 +51,7 @@
* 配置版本
* 节点管理
* 应用记录
* 域名管理
* TLS 证书
* 网站
* 用户管理
* 设置
* 性能