[优化] 界面优化

This commit is contained in:
ryan
2026-03-19 21:00:43 +08:00
parent 9eeccb5fc6
commit dc72c78b7f
@@ -1326,7 +1326,7 @@ export function SettingsPage() {
if (activeTab === 'database') { if (activeTab === 'database') {
return ( return (
<div className="space-y-6"> <div className="grid gap-6 xl:grid-cols-2 xl:items-start">
<AppCard <AppCard
title="自动数据清理" title="自动数据清理"
description="每天凌晨 3 点自动清理超出保留期的观测数据,统一作用于访问日志、性能快照和请求聚合。" description="每天凌晨 3 点自动清理超出保留期的观测数据,统一作用于访问日志、性能快照和请求聚合。"
@@ -1365,60 +1365,62 @@ export function SettingsPage() {
</PrimaryButton> </PrimaryButton>
} }
> >
<div className="grid gap-6 xl:grid-cols-[0.9fr_1.1fr]"> <div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] p-5">
<ToggleField <div className="space-y-5">
label="启用每日自动清理" <ToggleField
description="开启后,服务端每天自动删除保留天数之外的观测数据。" label="启用每日自动清理"
checked={databaseFields.DatabaseAutoCleanupEnabled} description="开启后,服务端每天自动删除保留天数之外的观测数据。"
onChange={(checked) => checked={databaseFields.DatabaseAutoCleanupEnabled}
setDatabaseFields((previous) => ({ onChange={(checked) =>
...previous, setDatabaseFields((previous) => ({
DatabaseAutoCleanupEnabled: checked, ...previous,
})) DatabaseAutoCleanupEnabled: checked,
} }))
/> }
<div className="space-y-4 rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] p-5"> />
<ResourceField <div className="border-t border-[var(--border-default)] pt-5">
label="自动清理保留天数" <ResourceField
hint="必须至少保留 1 天,服务端不允许配置为 24 小时以内。" label="自动清理保留天数"
> hint="必须至少保留 1 天,服务端不允许配置为 24 小时以内。"
<ResourceInput >
type="number" <ResourceInput
min={1} type="number"
value={databaseFields.DatabaseAutoCleanupRetentionDays} min={1}
onChange={(event) => value={databaseFields.DatabaseAutoCleanupRetentionDays}
setDatabaseFields((previous) => ({ onChange={(event) =>
...previous, setDatabaseFields((previous) => ({
DatabaseAutoCleanupRetentionDays: event.target.value, ...previous,
})) DatabaseAutoCleanupRetentionDays: event.target.value,
} }))
placeholder="例如 30" }
/> placeholder="例如 30"
</ResourceField> />
<div className="grid gap-4 md:grid-cols-3"> </ResourceField>
<div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-base)] px-4 py-4"> <div className="mt-4 grid gap-4 md:grid-cols-3">
<p className="text-xs tracking-[0.2em] uppercase text-[var(--foreground-muted)]"> <div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-base)] px-4 py-4">
触发频率 <p className="text-xs tracking-[0.2em] uppercase text-[var(--foreground-muted)]">
</p> 触发频率
<p className="mt-2 text-sm font-semibold text-[var(--foreground-primary)]"> </p>
每天一次 <p className="mt-2 text-sm font-semibold text-[var(--foreground-primary)]">
</p> 每天一次
</div> </p>
<div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-base)] px-4 py-4"> </div>
<p className="text-xs tracking-[0.2em] uppercase text-[var(--foreground-muted)]"> <div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-base)] px-4 py-4">
默认执行时间 <p className="text-xs tracking-[0.2em] uppercase text-[var(--foreground-muted)]">
</p> 默认执行时间
<p className="mt-2 text-sm font-semibold text-[var(--foreground-primary)]"> </p>
凌晨 3:00 <p className="mt-2 text-sm font-semibold text-[var(--foreground-primary)]">
</p> 凌晨 3:00
</div> </p>
<div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-base)] px-4 py-4"> </div>
<p className="text-xs tracking-[0.2em] uppercase text-[var(--foreground-muted)]"> <div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-base)] px-4 py-4">
生效范围 <p className="text-xs tracking-[0.2em] uppercase text-[var(--foreground-muted)]">
</p> 生效范围
<p className="mt-2 text-sm font-semibold text-[var(--foreground-primary)]"> </p>
三类观测表 <p className="mt-2 text-sm font-semibold text-[var(--foreground-primary)]">
</p> 三类观测表
</p>
</div>
</div> </div>
</div> </div>
</div> </div>