[优化] 界面优化

This commit is contained in:
ryan
2026-03-13 16:13:26 +08:00
parent b8488785f8
commit 23df162eda
5 changed files with 26 additions and 35 deletions
@@ -1,24 +1,26 @@
import type { ReactNode } from 'react';
import type {ReactNode} from 'react';
interface PageHeaderProps {
title: string;
description: string;
action?: ReactNode;
title: string;
description?: string;
action?: ReactNode;
}
export function PageHeader({ title, description, action }: PageHeaderProps) {
return (
<div className='flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between'>
<div className='space-y-3'>
<p className='text-sm font-medium uppercase tracking-[0.24em] text-[var(--brand-primary)]'>ATSFlare</p>
<div className='space-y-2'>
<h1 className='text-3xl font-semibold tracking-tight text-[var(--foreground-primary)]'>{title}</h1>
<p className='max-w-3xl text-sm leading-7 text-[var(--foreground-secondary)]'>
{description}
</p>
export function PageHeader({title, description, action}: PageHeaderProps) {
return (
<div className='flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between'>
<div className='space-y-3'>
<p className='text-sm font-medium uppercase tracking-[0.24em] text-[var(--brand-primary)]'>ATSFlare</p>
<div className='space-y-2'>
<h1 className='text-3xl font-semibold tracking-tight text-[var(--foreground-primary)]'>{title}</h1>
{description ? (
<p className='max-w-3xl text-sm leading-7 text-[var(--foreground-secondary)]'>
{description}
</p>
) : null}
</div>
</div>
{action ? <div className='flex flex-wrap gap-3'>{action}</div> : null}
</div>
</div>
{action ? <div className='flex flex-wrap gap-3'>{action}</div> : null}
</div>
);
);
}
@@ -1872,7 +1872,6 @@ export function SettingsPage() {
<div className="space-y-6">
<PageHeader
title="设置"
description="集中维护账号、Agent、系统、限流与品牌配置。OpenResty 专项能力已迁移到侧边栏“性能”页面。"
/>
{feedback ? (
@@ -325,7 +325,7 @@ export function WebsiteDetailPage({ websiteId }: { websiteId: string }) {
type="button"
onClick={() => setIsCertificateImportOpen(true)}
>
添加证书
添加
</PrimaryButton>
}
>
@@ -348,13 +348,13 @@ export function WebsiteDetailPage({ websiteId }: { websiteId: string }) {
type="button"
onClick={() => setIsCertificateDetailOpen(true)}
>
查看证书
查看
</SecondaryButton>
<SecondaryButton
type="button"
onClick={() => setIsCertificateEditorOpen(true)}
>
编辑证书
编辑
</SecondaryButton>
</div>
<DangerButton
@@ -362,7 +362,7 @@ export function WebsiteDetailPage({ websiteId }: { websiteId: string }) {
onClick={handleDeleteCertificate}
disabled={deleteCertificateMutation.isPending}
>
删除证书
删除
</DangerButton>
</div>
) : (
@@ -376,8 +376,7 @@ export function WebsiteDetailPage({ websiteId }: { websiteId: string }) {
<AppCard
title="关联规则"
description="参考节点详情页,这里集中展示该网站命中的规则以及 HTTPS、源站、证书等关键信息。"
>
>
{relatedRoutes.length === 0 ? (
<EmptyState
title="暂无关联规则"
@@ -262,7 +262,6 @@ export function WebsiteEditorModal({
<ResourceField
label="备注"
hint="可选,用于记录归属、用途或生效说明。"
error={form.formState.errors.remark?.message}
>
<ResourceInput
@@ -167,7 +167,7 @@ export function WebsitesPage() {
</p>
</div>
<div className="grid gap-3 md:grid-cols-2">
<div className="grid gap-3 md:grid-cols-1">
<div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-panel)] px-4 py-3">
<p className="text-xs uppercase tracking-[0.18em] text-[var(--foreground-muted)]">
绑定证书
@@ -178,14 +178,6 @@ export function WebsitesPage() {
: '未绑定证书'}
</p>
</div>
<div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-panel)] px-4 py-3">
<p className="text-xs uppercase tracking-[0.18em] text-[var(--foreground-muted)]">
更新时间
</p>
<p className="mt-2 text-sm text-[var(--foreground-primary)]">
{formatDateTime(domain.updated_at)}
</p>
</div>
</div>
</div>