[修改] 文本优化

This commit is contained in:
ryan
2026-03-30 15:46:54 +08:00
parent 25fe178cb2
commit 4b1e75f86b
3 changed files with 25 additions and 81 deletions
@@ -221,7 +221,7 @@ function ConfigSectionShell({
description={description} description={description}
action={ action={
<PrimaryButton type="submit" form={formId} disabled={saving}> <PrimaryButton type="submit" form={formId} disabled={saving}>
{saving ? '保存中...' : '保存当前分区'} {saving ? '保存中...' : '保存'}
</PrimaryButton> </PrimaryButton>
} }
> >
@@ -259,7 +259,7 @@ function DomainSettingsSection({
return ( return (
<ConfigSectionShell <ConfigSectionShell
title="域名设置" title="域名设置"
description="站点标识在这里维护;域名列表第一行永远视为主域名。" description="配置站点。"
formId="proxy-route-domains-form" formId="proxy-route-domains-form"
saving={saving} saving={saving}
> >
@@ -282,6 +282,14 @@ function DomainSettingsSection({
); );
})} })}
> >
<ToggleField
label="启用站点"
description="关闭后站点会保留配置,但不会被纳入发布渲染。"
checked={form.watch('enabled')}
onChange={(checked) =>
form.setValue('enabled', checked, { shouldDirty: true })
}
/>
<ResourceField <ResourceField
label="站点标识" label="站点标识"
hint="建议使用稳定、可读的业务标识,不必与域名完全一致。" hint="建议使用稳定、可读的业务标识,不必与域名完全一致。"
@@ -305,14 +313,6 @@ function DomainSettingsSection({
/> />
</ResourceField> </ResourceField>
<ToggleField
label="启用站点"
description="关闭后站点会保留配置,但不会被纳入发布渲染。"
checked={form.watch('enabled')}
onChange={(checked) =>
form.setValue('enabled', checked, { shouldDirty: true })
}
/>
</form> </form>
</ConfigSectionShell> </ConfigSectionShell>
); );
@@ -355,7 +355,7 @@ function RateLimitSection({
return ( return (
<ConfigSectionShell <ConfigSectionShell
title="流量限制" title="流量限制"
description="使用结构化字段生成 OpenResty 限制指令,空值或 0 表示关闭。" description="网站限流, 空值或 0 表示关闭。"
formId="proxy-route-limits-form" formId="proxy-route-limits-form"
saving={saving} saving={saving}
> >
@@ -376,8 +376,8 @@ function RateLimitSection({
})} })}
> >
<ResourceField <ResourceField
label="每站点最大连接数" label="并发限制"
hint="例如 120。0 表示关闭。" hint="限制当前站点最大并发数"
error={form.formState.errors.limit_conn_per_server?.message} error={form.formState.errors.limit_conn_per_server?.message}
> >
<ResourceInput <ResourceInput
@@ -387,8 +387,8 @@ function RateLimitSection({
</ResourceField> </ResourceField>
<ResourceField <ResourceField
label="每 IP 最大连接数" label="单IP限制"
hint="例如 12。0 表示关闭。" hint="限制单个IP访问最大并发数"
error={form.formState.errors.limit_conn_per_ip?.message} error={form.formState.errors.limit_conn_per_ip?.message}
> >
<ResourceInput <ResourceInput
@@ -398,12 +398,12 @@ function RateLimitSection({
</ResourceField> </ResourceField>
<ResourceField <ResourceField
label="下载限速" label="流量限制"
hint="支持 512k、1m 或纯数字字节速率。留空表示关闭。" hint="限制每个请求的流量上限。"
error={form.formState.errors.limit_rate?.message} error={form.formState.errors.limit_rate?.message}
className="md:col-span-2" className="md:col-span-2"
> >
<ResourceInput placeholder="512k" {...form.register('limit_rate')} /> <ResourceInput placeholder="512k/1m" {...form.register('limit_rate')} />
</ResourceField> </ResourceField>
</form> </form>
</ConfigSectionShell> </ConfigSectionShell>
@@ -854,7 +854,7 @@ export function ProxyRouteConfigPage({
<div className="grid gap-6 xl:grid-cols-[280px_minmax(0,1fr)]"> <div className="grid gap-6 xl:grid-cols-[280px_minmax(0,1fr)]">
<aside className="space-y-4"> <aside className="space-y-4">
<AppCard title="配置分区" description="每个分区独立保存,切换时不会自动提交。"> <AppCard title="配置分区" >
<div className="space-y-2"> <div className="space-y-2">
{websiteConfigSections.map((section) => { {websiteConfigSections.map((section) => {
const active = section.key === currentSection; const active = section.key === currentSection;
@@ -880,35 +880,6 @@ export function ProxyRouteConfigPage({
})} })}
</div> </div>
</AppCard> </AppCard>
<AppCard title="站点摘要">
<div className="space-y-3">
<div className="flex flex-wrap gap-2">
{getWebsiteStatusBadges(route).map((badge) => (
<StatusBadge
key={badge.label}
label={badge.label}
variant={badge.variant}
/>
))}
</div>
<div className="space-y-2 text-sm text-[var(--foreground-secondary)]">
<p>站点标识:{route.site_name}</p>
<p>主域名:{route.primary_domain}</p>
<p>上游数量:{route.upstream_list.length}</p>
<p>最近更新:{formatDateTime(route.updated_at)}</p>
</div>
</div>
</AppCard>
<AppCard title="当前分区">
<p className="text-sm font-medium text-[var(--foreground-primary)]">
{currentSectionMeta.label}
</p>
<p className="mt-2 text-sm leading-6 text-[var(--foreground-secondary)]">
{currentSectionMeta.description}
</p>
</AppCard>
</aside> </aside>
<div className="min-w-0 space-y-6"> <div className="min-w-0 space-y-6">
@@ -189,7 +189,6 @@ export function ProxyRoutesPage() {
<div className="space-y-6"> <div className="space-y-6">
<PageHeader <PageHeader
title="网站配置" title="网站配置"
description="以站点为单位维护域名、回源、HTTPS、缓存和限流,并直接发布当前草稿。"
action={ action={
<div className="flex flex-wrap gap-3"> <div className="flex flex-wrap gap-3">
<SecondaryButton <SecondaryButton
@@ -268,7 +267,6 @@ export function ProxyRoutesPage() {
<AppCard <AppCard
title="网站列表" title="网站列表"
description="点击“配置”进入独立子页面,按分区维护当前站点设置。"
> >
<div className="space-y-4"> <div className="space-y-4">
<div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between"> <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
@@ -276,7 +274,7 @@ export function ProxyRoutesPage() {
<ResourceInput <ResourceInput
value={keyword} value={keyword}
onChange={(event) => setKeyword(event.target.value)} onChange={(event) => setKeyword(event.target.value)}
placeholder="搜索站点标识、域名、上游或备注" placeholder="搜索站点"
/> />
</div> </div>
{diff && hasConfigChanges(diff) ? ( {diff && hasConfigChanges(diff) ? (
@@ -335,9 +333,6 @@ export function ProxyRoutesPage() {
/> />
))} ))}
</div> </div>
<p className="text-sm text-[var(--foreground-secondary)]">
主域名 {route.primary_domain},共 {route.domain_count} 个域名
</p>
</div> </div>
</div> </div>
@@ -376,28 +371,6 @@ export function ProxyRoutesPage() {
{getUpstreamSummary(route)} {getUpstreamSummary(route)}
</p> </p>
</div> </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)]">
HTTPS / 证书
</p>
<p className="mt-2 text-sm text-[var(--foreground-primary)]">
{route.enable_https
? route.redirect_http
? 'HTTPS 开启,HTTP 自动跳转'
: 'HTTPS 开启'
: '仅 HTTP'}
</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(route.updated_at)}
</p>
</div>
</div> </div>
<p className="text-sm text-[var(--foreground-secondary)]"> <p className="text-sm text-[var(--foreground-secondary)]">
@@ -8,27 +8,27 @@ export const websiteConfigSections = [
{ {
key: 'domains', key: 'domains',
label: '域名设置', label: '域名设置',
description: '维护站点标识、主域名顺序和启用状态。', description: '维护站点标识。',
}, },
{ {
key: 'limits', key: 'limits',
label: '流量限制', label: '流量限制',
description: '设置连接数和限速,0 或空值表示关闭。', description: '设置连接数和限速。',
}, },
{ {
key: 'proxy', key: 'proxy',
label: '反向代理', label: '反向代理',
description: '配置主回源、多上游、Host 头和自定义请求头。', description: '配置主回源、上游。',
}, },
{ {
key: 'https', key: 'https',
label: 'HTTPS', label: 'HTTPS',
description: '选择证书并控制 HTTP 到 HTTPS 的跳转策略。', description: '证书设置。',
}, },
{ {
key: 'cache', key: 'cache',
label: '缓存', label: '缓存',
description: '按 URL、后缀或路径规则启用站点级缓存。', description: '页面缓存。',
}, },
] as const; ] as const;