tcjlj/OpenFlare
1
0
Fork 0
mirror of https://github.com/Rain-kl/OpenFlare.git synced 2026-10-12 02:06:37 +08:00
Code Issues Packages Projects Releases Wiki Activity

[优化] 界面优化

Browse Source
This commit is contained in:
ryan
2026-03-13 09:21:36 +08:00
parent e34446bce8
commit 8a46a66bf5
3 changed files with 1348 additions and 1372 deletions
Download Patch File Download Diff File Expand all files Collapse all files
atsf_server/web/features/performance/components/performance-page.tsx
+94 -86
View File
@@ -608,7 +608,7 @@ export function PerformancePage() {
<div className="space-y-6"> <div className="space-y-6">
<PageHeader <PageHeader
title="性能" title="性能"
description="从设置页拆出的 OpenResty 专属工作台。这里统一维护结构化性能参数和主配置模板。" description="统一维护Nginx结构化性能参数和主配置模板。"
/> />
{feedback ? ( {feedback ? (
@@ -650,7 +650,8 @@ export function PerformancePage() {
{activeTab === 'settings' ? ( {activeTab === 'settings' ? (
<div className="space-y-6"> <div className="space-y-6">
<div className="grid gap-4 md:grid-cols-3"> <div className="grid gap-4 md:grid-cols-3">
<div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4"> <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 className="text-xs tracking-[0.2em] text-[var(--foreground-muted)] uppercase">
主配置校验 主配置校验
</p> </p>
@@ -658,7 +659,8 @@ export function PerformancePage() {
<StatusBadge label="发布链路受管" variant="info"/> <StatusBadge label="发布链路受管" variant="info"/>
</div> </div>
</div> </div>
<div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4"> <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 className="text-xs tracking-[0.2em] text-[var(--foreground-muted)] uppercase">
当前预览规则数 当前预览规则数
</p> </p>
@@ -666,7 +668,8 @@ export function PerformancePage() {
{preview.route_count} 条 {preview.route_count} 条
</p> </p>
</div> </div>
<div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4"> <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 className="text-xs tracking-[0.2em] text-[var(--foreground-muted)] uppercase">
当前模板 当前模板
</p> </p>
@@ -955,7 +958,6 @@ export function PerformancePage() {
/> />
<ToggleField <ToggleField
label="proxy_buffering" label="proxy_buffering"
description="是否启用 proxy_buffering。"
tooltip={performanceFieldTooltips.proxy_buffering} tooltip={performanceFieldTooltips.proxy_buffering}
checked={performanceFields.OpenRestyProxyBufferingEnabled} checked={performanceFields.OpenRestyProxyBufferingEnabled}
onChange={(checked) => onChange={(checked) =>
@@ -1014,84 +1016,6 @@ export function PerformancePage() {
</AppCard> </AppCard>
<div className="space-y-6"> <div className="space-y-6">
<AppCard
title="OpenResty 压缩"
description="单独维护 gzip 相关参数，避免与缓存配置混在一起。"
action={
<PrimaryButton
type="button"
onClick={handleGzipSave}
disabled={busyKey === 'performance-gzip'}
>
{busyKey === 'performance-gzip'
? '保存中...'
: '保存压缩设置'}
</PrimaryButton>
}
>
<div className="space-y-5">
<div className="grid gap-5 md:grid-cols-2">
<ToggleField
label="gzip"
description="是否启用 gzip on。"
tooltip={performanceFieldTooltips.gzip}
checked={performanceFields.OpenRestyGzipEnabled}
onChange={(checked) =>
setPerformanceFields((previous) => ({
...previous,
OpenRestyGzipEnabled: checked,
}))
}
/>
<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>
{gzipPreviewLines.length > 0 ? (
<CodeBlock className="mt-3 text-xs leading-6 whitespace-pre-wrap">
{gzipPreviewLines.join('\n')}
</CodeBlock>
) : (
<p className="mt-3 text-sm leading-6 text-[var(--foreground-secondary)]">
当前主配置预览中没有压缩指令。
</p>
)}
</div>
<ResourceField
label="gzip_min_length"
tooltip={performanceFieldTooltips.gzip_min_length}
>
<ResourceInput
type="number"
value={performanceFields.OpenRestyGzipMinLength}
onChange={(event) =>
setPerformanceFields((previous) => ({
...previous,
OpenRestyGzipMinLength: event.target.value,
}))
}
/>
</ResourceField>
<ResourceField
label="gzip_comp_level"
tooltip={performanceFieldTooltips.gzip_comp_level}
>
<ResourceInput
type="number"
min="1"
max="9"
value={performanceFields.OpenRestyGzipCompLevel}
onChange={(event) =>
setPerformanceFields((previous) => ({
...previous,
OpenRestyGzipCompLevel: event.target.value,
}))
}
/>
</ResourceField>
</div>
</div>
</AppCard>
<AppCard <AppCard
title="OpenResty 缓存" title="OpenResty 缓存"
@@ -1128,7 +1052,8 @@ export function PerformancePage() {
> >
<div className="space-y-5"> <div className="space-y-5">
<div className="grid gap-4 md:grid-cols-2"> <div className="grid gap-4 md:grid-cols-2">
<div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4"> <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 className="text-xs tracking-[0.2em] text-[var(--foreground-muted)] uppercase">
缓存状态 缓存状态
</p> </p>
@@ -1172,7 +1097,8 @@ export function PerformancePage() {
</p> </p>
</div> </div>
<div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4"> <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 className="text-xs tracking-[0.2em] text-[var(--foreground-muted)] uppercase">
当前缓存预览 当前缓存预览
</p> </p>
@@ -1330,7 +1256,88 @@ export function PerformancePage() {
</div> </div>
</div> </div>
</AppCard> </AppCard>
<AppCard
title="OpenResty 压缩"
description="单独维护 gzip 相关参数，避免与缓存配置混在一起。"
action={
<PrimaryButton
type="button"
onClick={handleGzipSave}
disabled={busyKey === 'performance-gzip'}
>
{busyKey === 'performance-gzip'
? '保存中...'
: '保存压缩设置'}
</PrimaryButton>
}
>
<div className="space-y-5">
<div className="grid gap-5 md:grid-cols-2">
<ToggleField
label="gzip"
description="是否启用 gzip on。"
tooltip={performanceFieldTooltips.gzip}
checked={performanceFields.OpenRestyGzipEnabled}
onChange={(checked) =>
setPerformanceFields((previous) => ({
...previous,
OpenRestyGzipEnabled: checked,
}))
}
/>
<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>
{gzipPreviewLines.length > 0 ? (
<CodeBlock className="mt-3 text-xs leading-6 whitespace-pre-wrap">
{gzipPreviewLines.join('\n')}
</CodeBlock>
) : (
<p className="mt-3 text-sm leading-6 text-[var(--foreground-secondary)]">
当前主配置预览中没有压缩指令。
</p>
)}
</div> </div>
<ResourceField
label="gzip_min_length"
tooltip={performanceFieldTooltips.gzip_min_length}
>
<ResourceInput
type="number"
value={performanceFields.OpenRestyGzipMinLength}
onChange={(event) =>
setPerformanceFields((previous) => ({
...previous,
OpenRestyGzipMinLength: event.target.value,
}))
}
/>
</ResourceField>
<ResourceField
label="gzip_comp_level"
tooltip={performanceFieldTooltips.gzip_comp_level}
>
<ResourceInput
type="number"
min="1"
max="9"
value={performanceFields.OpenRestyGzipCompLevel}
onChange={(event) =>
setPerformanceFields((previous) => ({
...previous,
OpenRestyGzipCompLevel: event.target.value,
}))
}
/>
</ResourceField>
</div>
</div>
</AppCard>
</div>
</div> </div>
</div> </div>
) : ( ) : (
@@ -1392,7 +1399,8 @@ export function PerformancePage() {
variant="info" variant="info"
/> />
</div> </div>
<CodeBlock className="max-h-[560px] overflow-auto text-xs leading-6 whitespace-pre-wrap"> <CodeBlock
className="max-h-[560px] overflow-auto text-xs leading-6 whitespace-pre-wrap">
{preview.main_config} {preview.main_config}
</CodeBlock> </CodeBlock>
</div> </div>
atsf_server/web/features/settings/components/settings-page.tsx
-34
View File
@@ -1064,23 +1064,6 @@ export function SettingsPage() {
/> />
</ResourceField> </ResourceField>
</AppCard> </AppCard>
<AppCard
title="性能页入口"
description="OpenResty 连接、缓冲、压缩、缓存以及主配置模板编辑已迁移到侧边栏“性能”页面。"
action={
<PrimaryButton
type="button"
onClick={() => window.location.assign('/performance')}
>
打开性能页
</PrimaryButton>
}
>
<p className="text-sm leading-6 text-[var(--foreground-secondary)]">
设置页保留 Agent、系统、限流和品牌配置；OpenResty
相关项已拆分为独立工作台，支持“设置 / 编辑”双 Tab 操作。
</p>
</AppCard>
<AppCard <AppCard
title="Discovery Token 与部署命令" title="Discovery Token 与部署命令"
description="适用于新节点首次接入。可直接复制一键安装命令。" description="适用于新节点首次接入。可直接复制一键安装命令。"
@@ -1527,23 +1510,6 @@ export function SettingsPage() {
</div> </div>
</AppCard> </AppCard>
</div> </div>
<AppCard
title="性能页说明"
description="OpenResty 反代缓冲、压缩、缓存和主配置模板编辑已迁移到独立“性能”页面。"
action={
<PrimaryButton
type="button"
onClick={() => window.location.assign('/performance')}
>
前往性能页
</PrimaryButton>
}
>
<p className="text-sm leading-6 text-[var(--foreground-secondary)]">
这样可以把 Agent 运行参数、系统开关与 OpenResty
专项配置拆开，减少设置页的混杂信息量。
</p>
</AppCard>
<AppCard <AppCard
title="请求限流设置" title="请求限流设置"
description="按来源 IP 生效，保存后立即影响 Web、API、上传下载及登录注册等敏感接口。时间单位均为秒。" description="按来源 IP 生效，保存后立即影响 Web、API、上传下载及登录注册等敏感接口。时间单位均为秒。"
atsf_server/web/features/shared/components/resource-primitives.tsx
+3 -1
View File
@@ -156,7 +156,7 @@ export function DangerButton({
interface ToggleFieldProps { interface ToggleFieldProps {
label: string; label: string;
description: string; description?: string;
checked: boolean; checked: boolean;
disabled?: boolean; disabled?: boolean;
tooltip?: string; tooltip?: string;
@@ -185,9 +185,11 @@ export function ToggleField({
<span>{label}</span> <span>{label}</span>
{tooltip ? <FieldTooltip content={tooltip} /> : null} {tooltip ? <FieldTooltip content={tooltip} /> : null}
</span> </span>
{description ? (
<span className="block text-xs leading-5 text-[var(--foreground-secondary)]"> <span className="block text-xs leading-5 text-[var(--foreground-secondary)]">
{description} {description}
</span> </span>
) : null}
</span> </span>
</label> </label>
); );