mirror of
https://github.com/Rain-kl/OpenFlare.git
synced 2026-09-28 05:46:36 +08:00
[优化] 界面优化
This commit is contained in:
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user