mirror of
https://github.com/Rain-kl/OpenFlare.git
synced 2026-10-08 00:26:37 +08:00
[优化] 在 PublishPreviewCard 组件中添加当前活动主配置与待处理主配置的比较,增强用户对配置变更的理解;在 ProxyRoutesPage 中提取 hasConfigChanges 函数以简化变更检查逻辑
This commit is contained in:
@@ -168,12 +168,14 @@ function OptionDiffTable({ items }: { items: ConfigOptionDiffItem[] }) {
|
|||||||
function PublishPreviewCard({
|
function PublishPreviewCard({
|
||||||
preview,
|
preview,
|
||||||
diff,
|
diff,
|
||||||
|
activeVersion,
|
||||||
isPublishing,
|
isPublishing,
|
||||||
onConfirm,
|
onConfirm,
|
||||||
onCancel,
|
onCancel,
|
||||||
}: {
|
}: {
|
||||||
preview: ConfigPreviewResult;
|
preview: ConfigPreviewResult;
|
||||||
diff: ConfigDiffResult;
|
diff: ConfigDiffResult;
|
||||||
|
activeVersion: ConfigVersionItem | null;
|
||||||
isPublishing: boolean;
|
isPublishing: boolean;
|
||||||
onConfirm: () => void;
|
onConfirm: () => void;
|
||||||
onCancel: () => void;
|
onCancel: () => void;
|
||||||
@@ -261,6 +263,67 @@ function PublishPreviewCard({
|
|||||||
<OptionDiffTable items={diff.changed_option_details} />
|
<OptionDiffTable items={diff.changed_option_details} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{diff.main_config_changed && activeVersion ? (
|
||||||
|
<div className="grid gap-5 xl:grid-cols-2">
|
||||||
|
<div>
|
||||||
|
<div className="mb-2 flex flex-wrap items-center justify-between gap-3">
|
||||||
|
<p className="text-sm font-semibold text-[var(--foreground-primary)]">
|
||||||
|
Current Active Main Config
|
||||||
|
</p>
|
||||||
|
<StatusBadge label={activeVersion.version} variant="info" />
|
||||||
|
</div>
|
||||||
|
<CodeBlock className="max-h-[32rem] whitespace-pre-wrap">
|
||||||
|
{activeVersion.main_config}
|
||||||
|
</CodeBlock>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="mb-2 flex flex-wrap items-center justify-between gap-3">
|
||||||
|
<p className="text-sm font-semibold text-[var(--foreground-primary)]">
|
||||||
|
Pending Main Config
|
||||||
|
</p>
|
||||||
|
<p className="text-xs text-[var(--foreground-secondary)]">
|
||||||
|
{`Checksum: ${preview.checksum}`}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<CodeBlock className="max-h-[32rem] whitespace-pre-wrap">
|
||||||
|
{preview.main_config}
|
||||||
|
</CodeBlock>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
{/* Legacy duplicated main config preview block kept commented out while
|
||||||
|
we replace it with an explicit active-vs-pending comparison above.
|
||||||
|
{diff.main_config_changed && activeVersion ? (
|
||||||
|
<div className="grid gap-5 xl:grid-cols-2">
|
||||||
|
<div>
|
||||||
|
<div className="mb-2 flex flex-wrap items-center justify-between gap-3">
|
||||||
|
<p className="text-sm font-semibold text-[var(--foreground-primary)]">
|
||||||
|
褰撳墠婵€娲讳富閰嶇疆
|
||||||
|
</p>
|
||||||
|
<StatusBadge label={activeVersion.version} variant="info" />
|
||||||
|
</div>
|
||||||
|
<CodeBlock className="max-h-[32rem] whitespace-pre-wrap">
|
||||||
|
{activeVersion.main_config}
|
||||||
|
</CodeBlock>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="mb-2 flex flex-wrap items-center justify-between gap-3">
|
||||||
|
<p className="text-sm font-semibold text-[var(--foreground-primary)]">
|
||||||
|
寰呭彂甯冧富閰嶇疆
|
||||||
|
</p>
|
||||||
|
<p className="text-xs text-[var(--foreground-secondary)]">
|
||||||
|
Checksum锛歿preview.checksum}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<CodeBlock className="max-h-[32rem] whitespace-pre-wrap">
|
||||||
|
{preview.main_config}
|
||||||
|
</CodeBlock>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
*/}
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<div className="mb-2 flex flex-wrap items-center justify-between gap-3">
|
<div className="mb-2 flex flex-wrap items-center justify-between gap-3">
|
||||||
<p className="text-sm font-semibold text-[var(--foreground-primary)]">
|
<p className="text-sm font-semibold text-[var(--foreground-primary)]">
|
||||||
@@ -335,6 +398,10 @@ export function ConfigVersionsPage() {
|
|||||||
() => versionsQuery.data ?? [],
|
() => versionsQuery.data ?? [],
|
||||||
[versionsQuery.data],
|
[versionsQuery.data],
|
||||||
);
|
);
|
||||||
|
const activeVersion = useMemo(
|
||||||
|
() => versions.find((item) => item.is_active) ?? null,
|
||||||
|
[versions],
|
||||||
|
);
|
||||||
const selectedVersion = useMemo(
|
const selectedVersion = useMemo(
|
||||||
() => versions.find((item) => item.id === selectedVersionId) ?? null,
|
() => versions.find((item) => item.id === selectedVersionId) ?? null,
|
||||||
[selectedVersionId, versions],
|
[selectedVersionId, versions],
|
||||||
@@ -426,6 +493,7 @@ export function ConfigVersionsPage() {
|
|||||||
<PublishPreviewCard
|
<PublishPreviewCard
|
||||||
preview={publishPreview.preview}
|
preview={publishPreview.preview}
|
||||||
diff={publishPreview.diff}
|
diff={publishPreview.diff}
|
||||||
|
activeVersion={activeVersion}
|
||||||
isPublishing={publishMutation.isPending}
|
isPublishing={publishMutation.isPending}
|
||||||
onConfirm={() => publishMutation.mutate()}
|
onConfirm={() => publishMutation.mutate()}
|
||||||
onCancel={() => setPublishPreview(null)}
|
onCancel={() => setPublishPreview(null)}
|
||||||
|
|||||||
@@ -879,7 +879,7 @@ export function PerformancePage() {
|
|||||||
</div>
|
</div>
|
||||||
</AppCard>
|
</AppCard>
|
||||||
|
|
||||||
<div className="grid gap-6 xl:grid-cols-[1fr_1fr]">
|
<div className="grid items-start gap-6 xl:grid-cols-[minmax(0,1fr)_minmax(0,1fr)]">
|
||||||
<AppCard
|
<AppCard
|
||||||
title="OpenResty 反代缓冲与超时"
|
title="OpenResty 反代缓冲与超时"
|
||||||
description="用于控制 upstream 连接、发送、读取超时,以及常用代理缓冲参数。"
|
description="用于控制 upstream 连接、发送、读取超时,以及常用代理缓冲参数。"
|
||||||
@@ -1013,7 +1013,7 @@ export function PerformancePage() {
|
|||||||
</div>
|
</div>
|
||||||
</AppCard>
|
</AppCard>
|
||||||
|
|
||||||
<div className="space-y-6">
|
<div className="grid content-start gap-6">
|
||||||
|
|
||||||
<AppCard
|
<AppCard
|
||||||
title="OpenResty 缓存"
|
title="OpenResty 缓存"
|
||||||
|
|||||||
@@ -141,6 +141,24 @@ const routesQueryKey = ['proxy-routes'];
|
|||||||
const certificatesQueryKey = ['tls-certificates'];
|
const certificatesQueryKey = ['tls-certificates'];
|
||||||
const versionsQueryKey = ['config-versions'];
|
const versionsQueryKey = ['config-versions'];
|
||||||
|
|
||||||
|
function hasConfigChanges(diff: {
|
||||||
|
active_version?: string;
|
||||||
|
added_domains: string[];
|
||||||
|
removed_domains: string[];
|
||||||
|
modified_domains: string[];
|
||||||
|
main_config_changed: boolean;
|
||||||
|
changed_option_keys: string[];
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
diff.added_domains.length > 0 ||
|
||||||
|
diff.removed_domains.length > 0 ||
|
||||||
|
diff.modified_domains.length > 0 ||
|
||||||
|
diff.main_config_changed ||
|
||||||
|
diff.changed_option_keys.length > 0 ||
|
||||||
|
!diff.active_version
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
function getErrorMessage(error: unknown) {
|
function getErrorMessage(error: unknown) {
|
||||||
return error instanceof Error ? error.message : '请求失败,请稍后重试。';
|
return error instanceof Error ? error.message : '请求失败,请稍后重试。';
|
||||||
}
|
}
|
||||||
@@ -314,13 +332,7 @@ export function ProxyRoutesPage() {
|
|||||||
|
|
||||||
try {
|
try {
|
||||||
const diff = await getConfigVersionDiff();
|
const diff = await getConfigVersionDiff();
|
||||||
const hasChanges =
|
if (!hasConfigChanges(diff)) {
|
||||||
diff.added_domains.length > 0 ||
|
|
||||||
diff.removed_domains.length > 0 ||
|
|
||||||
diff.modified_domains.length > 0 ||
|
|
||||||
!diff.active_version;
|
|
||||||
|
|
||||||
if (!hasChanges) {
|
|
||||||
setFeedback({
|
setFeedback({
|
||||||
tone: 'info',
|
tone: 'info',
|
||||||
message: '当前规则没有变更,已阻止重复发布。',
|
message: '当前规则没有变更,已阻止重复发布。',
|
||||||
|
|||||||
Reference in New Issue
Block a user