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

[优化] 界面优化

Browse Source
This commit is contained in:
ryan
2026-03-13 00:10:55 +08:00
parent b05bd608f2
commit 2ad6e9a2d0
1 changed files with 321 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files
atsf_server/web/features/performance/components/performance-page.tsx
+321 -168
View File
@@ -111,6 +111,13 @@ function isCacheLevelsValue(value: string) {
return /^\d{1,2}(?::\d{1,2}){0,2}$/.test(value.trim()); return /^\d{1,2}(?::\d{1,2}){0,2}$/.test(value.trim());
} }
function extractMainConfigLines(content: string, matcher: RegExp) {
return content
.split('\n')
.map((line) => line.trim())
.filter((line) => line && matcher.test(line));
}
export function PerformancePage() { export function PerformancePage() {
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const { user } = useAuth(); const { user } = useAuth();
@@ -357,16 +364,6 @@ export function PerformancePage() {
const handleCacheSave = () => { const handleCacheSave = () => {
void runBusyAction('performance-cache', async () => { void runBusyAction('performance-cache', async () => {
if (!isPositiveInteger(performanceFields.OpenRestyGzipMinLength)) {
throw new Error('gzip_min_length 必须为大于 0 的整数。');
}
const gzipLevel = Number.parseInt(
performanceFields.OpenRestyGzipCompLevel,
10,
);
if (Number.isNaN(gzipLevel) || gzipLevel < 1 || gzipLevel > 9) {
throw new Error('gzip_comp_level 必须在 1 到 9 之间。');
}
if (performanceFields.OpenRestyCacheEnabled) { if (performanceFields.OpenRestyCacheEnabled) {
if (!performanceFields.OpenRestyCachePath.trim()) { if (!performanceFields.OpenRestyCachePath.trim()) {
throw new Error('启用缓存时必须填写 proxy_cache_path 目录。'); throw new Error('启用缓存时必须填写 proxy_cache_path 目录。');
@@ -388,18 +385,6 @@ export function PerformancePage() {
await saveOptionEntries( await saveOptionEntries(
[ [
[
'OpenRestyGzipEnabled',
String(performanceFields.OpenRestyGzipEnabled),
],
[
'OpenRestyGzipMinLength',
performanceFields.OpenRestyGzipMinLength.trim(),
],
[
'OpenRestyGzipCompLevel',
performanceFields.OpenRestyGzipCompLevel.trim(),
],
['OpenRestyCachePath', performanceFields.OpenRestyCachePath.trim()], ['OpenRestyCachePath', performanceFields.OpenRestyCachePath.trim()],
[ [
'OpenRestyCacheLevels', 'OpenRestyCacheLevels',
@@ -439,6 +424,39 @@ export function PerformancePage() {
}); });
}; };
const handleGzipSave = () => {
void runBusyAction('performance-gzip', async () => {
if (!isPositiveInteger(performanceFields.OpenRestyGzipMinLength)) {
throw new Error('gzip_min_length 必须为大于 0 的整数。');
}
const gzipLevel = Number.parseInt(
performanceFields.OpenRestyGzipCompLevel,
10,
);
if (Number.isNaN(gzipLevel) || gzipLevel < 1 || gzipLevel > 9) {
throw new Error('gzip_comp_level 必须在 1 到 9 之间。');
}
await saveOptionEntries(
[
[
'OpenRestyGzipEnabled',
String(performanceFields.OpenRestyGzipEnabled),
],
[
'OpenRestyGzipMinLength',
performanceFields.OpenRestyGzipMinLength.trim(),
],
[
'OpenRestyGzipCompLevel',
performanceFields.OpenRestyGzipCompLevel.trim(),
],
],
'OpenResty 压缩参数已保存。',
);
});
};
const handleTemplateSave = () => { const handleTemplateSave = () => {
void runBusyAction('performance-template', async () => { void runBusyAction('performance-template', async () => {
await saveOptionEntries( await saveOptionEntries(
@@ -495,6 +513,15 @@ export function PerformancePage() {
); );
} }
const cachePreviewLines = extractMainConfigLines(
preview.main_config,
/proxy_cache_path|proxy_cache_key|proxy_cache_lock(?:_timeout)?|proxy_cache_use_stale/,
);
const gzipPreviewLines = extractMainConfigLines(
preview.main_config,
/gzip(?:_| )/,
);
return ( return (
<div className="space-y-6"> <div className="space-y-6">
<PageHeader <PageHeader
@@ -812,169 +839,295 @@ export function PerformancePage() {
</div> </div>
</AppCard> </AppCard>
<AppCard <div className="space-y-6">
title="OpenResty 压缩与缓存" <AppCard
description="缓存能力仍限定在单节点反代优化场景，不扩展为独立缓存产品。" title="OpenResty 压缩"
action={ description="单独维护 gzip 相关参数，避免与缓存配置混在一起。"
<PrimaryButton action={
type="button" <PrimaryButton
onClick={handleCacheSave} type="button"
disabled={busyKey === 'performance-cache'} onClick={handleGzipSave}
> disabled={busyKey === 'performance-gzip'}
{busyKey === 'performance-cache' >
? '保存中...' {busyKey === 'performance-gzip'
: '保存压缩与缓存'} ? '保存中...'
</PrimaryButton> : '保存压缩设置'}
} </PrimaryButton>
> }
<div className="space-y-5"> >
<div className="grid gap-5 md:grid-cols-2"> <div className="space-y-5">
<ToggleField <div className="grid gap-5 md:grid-cols-2">
label="gzip" <ToggleField
description="是否启用 gzip on。" label="gzip"
checked={performanceFields.OpenRestyGzipEnabled} description="是否启用 gzip on。"
onChange={(checked) => checked={performanceFields.OpenRestyGzipEnabled}
setPerformanceFields((previous) => ({ onChange={(checked) =>
...previous,
OpenRestyGzipEnabled: checked,
}))
}
/>
<ToggleField
label="proxy cache"
description="是否启用单节点代理缓存。"
checked={performanceFields.OpenRestyCacheEnabled}
onChange={(checked) =>
setPerformanceFields((previous) => ({
...previous,
OpenRestyCacheEnabled: checked,
}))
}
/>
<ResourceField label="gzip_min_length">
<ResourceInput
type="number"
value={performanceFields.OpenRestyGzipMinLength}
onChange={(event) =>
setPerformanceFields((previous) => ({ setPerformanceFields((previous) => ({
...previous, ...previous,
OpenRestyGzipMinLength: event.target.value, OpenRestyGzipEnabled: checked,
})) }))
} }
/> />
</ResourceField> <div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4">
<ResourceField label="gzip_comp_level"> <p className="text-xs tracking-[0.2em] text-[var(--foreground-muted)] uppercase">
<ResourceInput 当前压缩预览
type="number" </p>
min="1" {gzipPreviewLines.length > 0 ? (
max="9" <CodeBlock className="mt-3 text-xs leading-6 whitespace-pre-wrap">
value={performanceFields.OpenRestyGzipCompLevel} {gzipPreviewLines.join('\n')}
onChange={(event) => </CodeBlock>
setPerformanceFields((previous) => ({ ) : (
...previous, <p className="mt-3 text-sm leading-6 text-[var(--foreground-secondary)]">
OpenRestyGzipCompLevel: event.target.value, 当前主配置预览中没有压缩指令。
})) </p>
} )}
/> </div>
</ResourceField> <ResourceField label="gzip_min_length">
<ResourceInput
type="number"
value={performanceFields.OpenRestyGzipMinLength}
onChange={(event) =>
setPerformanceFields((previous) => ({
...previous,
OpenRestyGzipMinLength: event.target.value,
}))
}
/>
</ResourceField>
<ResourceField label="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> </div>
<div className="grid gap-5 md:grid-cols-2"> </AppCard>
<ResourceField label="proxy_cache_path">
<ResourceInput <AppCard
value={performanceFields.OpenRestyCachePath} title="OpenResty 缓存"
onChange={(event) => description="缓存能力仍限定在单节点反代优化场景，不扩展为独立缓存产品。"
action={
<div className="flex flex-wrap gap-2">
<SecondaryButton
type="button"
onClick={() =>
setPerformanceFields((previous) => ({ setPerformanceFields((previous) => ({
...previous, ...previous,
OpenRestyCachePath: event.target.value, OpenRestyCacheEnabled:
!previous.OpenRestyCacheEnabled,
})) }))
} }
placeholder="/var/cache/openresty/atsflare" >
/> {performanceFields.OpenRestyCacheEnabled
</ResourceField> ? '先关闭缓存'
<ResourceField label="levels"> : '先启用缓存'}
<ResourceInput </SecondaryButton>
value={performanceFields.OpenRestyCacheLevels} <PrimaryButton
onChange={(event) => type="button"
setPerformanceFields((previous) => ({ onClick={handleCacheSave}
...previous, disabled={busyKey === 'performance-cache'}
OpenRestyCacheLevels: event.target.value, >
})) {busyKey === 'performance-cache'
? '保存中...'
: performanceFields.OpenRestyCacheEnabled
? '保存缓存设置'
: '保存为关闭状态'}
</PrimaryButton>
</div>
}
>
<div className="space-y-5">
<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">
<p className="text-xs tracking-[0.2em] text-[var(--foreground-muted)] uppercase">
缓存状态
</p>
<div className="mt-3 flex flex-wrap items-center gap-3">
<StatusBadge
label={
performanceFields.OpenRestyCacheEnabled
? '已启用，主配置会渲染缓存指令'
: '已关闭，主配置不会渲染缓存指令'
}
variant={
performanceFields.OpenRestyCacheEnabled
? 'success'
: 'warning'
}
/>
<button
type="button"
onClick={() =>
setPerformanceFields((previous) => ({
...previous,
OpenRestyCacheEnabled:
!previous.OpenRestyCacheEnabled,
}))
}
className={[
'inline-flex items-center rounded-full px-3 py-1.5 text-xs font-medium transition',
performanceFields.OpenRestyCacheEnabled
? 'bg-[var(--status-danger-soft)] text-[var(--status-danger-foreground)]'
: 'bg-[var(--brand-primary-soft)] text-[var(--brand-primary)]',
].join(' ')}
>
{performanceFields.OpenRestyCacheEnabled
? '点击关闭'
: '点击启用'}
</button>
</div>
<p className="mt-3 text-xs leading-5 text-[var(--foreground-secondary)]">
`max_size` 会跟随 `proxy_cache_path`
一起渲染，不会单独占一行。
</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>
{cachePreviewLines.length > 0 ? (
<CodeBlock className="mt-3 text-xs leading-6 whitespace-pre-wrap">
{cachePreviewLines.join('\n')}
</CodeBlock>
) : (
<p className="mt-3 text-sm leading-6 text-[var(--foreground-secondary)]">
当前主配置预览中没有缓存指令。启用缓存并保存后，会出现
`proxy_cache_path ... max_size=...;` 这一行。
</p>
)}
</div>
</div>
<div
className={[
'grid gap-5 transition md:grid-cols-2',
performanceFields.OpenRestyCacheEnabled
? 'opacity-100'
: 'opacity-60',
].join(' ')}
>
<ResourceField
label="proxy_cache_path"
hint={
performanceFields.OpenRestyCacheEnabled
? '缓存目录，启用缓存时必填。'
: '缓存关闭时暂不生效。'
} }
placeholder="1:2" >
/> <ResourceInput
</ResourceField> value={performanceFields.OpenRestyCachePath}
<ResourceField label="inactive"> disabled={!performanceFields.OpenRestyCacheEnabled}
<ResourceInput onChange={(event) =>
value={performanceFields.OpenRestyCacheInactive} setPerformanceFields((previous) => ({
onChange={(event) => ...previous,
OpenRestyCachePath: event.target.value,
}))
}
placeholder="/var/cache/openresty/atsflare"
/>
</ResourceField>
<ResourceField label="levels">
<ResourceInput
value={performanceFields.OpenRestyCacheLevels}
disabled={!performanceFields.OpenRestyCacheEnabled}
onChange={(event) =>
setPerformanceFields((previous) => ({
...previous,
OpenRestyCacheLevels: event.target.value,
}))
}
placeholder="1:2"
/>
</ResourceField>
<ResourceField label="inactive">
<ResourceInput
value={performanceFields.OpenRestyCacheInactive}
disabled={!performanceFields.OpenRestyCacheEnabled}
onChange={(event) =>
setPerformanceFields((previous) => ({
...previous,
OpenRestyCacheInactive: event.target.value,
}))
}
placeholder="30m"
/>
</ResourceField>
<ResourceField label="max_size">
<ResourceInput
value={performanceFields.OpenRestyCacheMaxSize}
disabled={!performanceFields.OpenRestyCacheEnabled}
onChange={(event) =>
setPerformanceFields((previous) => ({
...previous,
OpenRestyCacheMaxSize: event.target.value,
}))
}
placeholder="1g"
/>
</ResourceField>
<ResourceField label="cache key template">
<ResourceInput
value={performanceFields.OpenRestyCacheKeyTemplate}
disabled={!performanceFields.OpenRestyCacheEnabled}
onChange={(event) =>
setPerformanceFields((previous) => ({
...previous,
OpenRestyCacheKeyTemplate: event.target.value,
}))
}
/>
</ResourceField>
<ToggleField
label="proxy_cache_lock"
description="是否启用 proxy_cache_lock。"
checked={performanceFields.OpenRestyCacheLockEnabled}
disabled={!performanceFields.OpenRestyCacheEnabled}
onChange={(checked) =>
setPerformanceFields((previous) => ({ setPerformanceFields((previous) => ({
...previous, ...previous,
OpenRestyCacheInactive: event.target.value, OpenRestyCacheLockEnabled: checked,
}))
}
placeholder="30m"
/>
</ResourceField>
<ResourceField label="max_size">
<ResourceInput
value={performanceFields.OpenRestyCacheMaxSize}
onChange={(event) =>
setPerformanceFields((previous) => ({
...previous,
OpenRestyCacheMaxSize: event.target.value,
}))
}
placeholder="1g"
/>
</ResourceField>
<ResourceField label="cache key template">
<ResourceInput
value={performanceFields.OpenRestyCacheKeyTemplate}
onChange={(event) =>
setPerformanceFields((previous) => ({
...previous,
OpenRestyCacheKeyTemplate: event.target.value,
})) }))
} }
/> />
</ResourceField> <ResourceField label="proxy_cache_lock_timeout">
<ToggleField <ResourceInput
label="proxy_cache_lock" value={performanceFields.OpenRestyCacheLockTimeout}
description="是否启用 proxy_cache_lock。" disabled={!performanceFields.OpenRestyCacheEnabled}
checked={performanceFields.OpenRestyCacheLockEnabled} onChange={(event) =>
onChange={(checked) => setPerformanceFields((previous) => ({
setPerformanceFields((previous) => ({ ...previous,
...previous, OpenRestyCacheLockTimeout: event.target.value,
OpenRestyCacheLockEnabled: checked, }))
})) }
} placeholder="5s"
/> />
<ResourceField label="proxy_cache_lock_timeout"> </ResourceField>
<ResourceInput <ResourceField label="proxy_cache_use_stale">
value={performanceFields.OpenRestyCacheLockTimeout} <ResourceInput
onChange={(event) => value={performanceFields.OpenRestyCacheUseStale}
setPerformanceFields((previous) => ({ disabled={!performanceFields.OpenRestyCacheEnabled}
...previous, onChange={(event) =>
OpenRestyCacheLockTimeout: event.target.value, setPerformanceFields((previous) => ({
})) ...previous,
} OpenRestyCacheUseStale: event.target.value,
placeholder="5s" }))
/> }
</ResourceField> />
<ResourceField label="proxy_cache_use_stale"> </ResourceField>
<ResourceInput </div>
value={performanceFields.OpenRestyCacheUseStale}
onChange={(event) =>
setPerformanceFields((previous) => ({
...previous,
OpenRestyCacheUseStale: event.target.value,
}))
}
/>
</ResourceField>
</div> </div>
</div> </AppCard>
</AppCard> </div>
</div> </div>
</div> </div>
) : ( ) : (