From 57dbb3de52e39d4fc17387f98d156dd866810d9f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=BE=B7=E5=AE=87?= <kvtodev@outlook.com>
Date: Fri, 11 Sep 2026 19:07:12 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=BF=E6=8D=A2=E5=B7=B2=E6=9C=89=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E5=89=8D=E5=A2=9E=E5=8A=A0=E7=A1=AE=E8=AE=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

使用独立确认弹窗避免一次点击覆盖已配置组件。
---
 .../Inspector/Components/ComponentPanel.tsx   | 38 +++++++++++++++++++
 1 file changed, 38 insertions(+)

diff --git a/apps/ai-game-creator-shell/src/view/ui-editor/components/Inspector/Components/ComponentPanel.tsx b/apps/ai-game-creator-shell/src/view/ui-editor/components/Inspector/Components/ComponentPanel.tsx
index 30089990f..c4fa25f93 100644
--- a/apps/ai-game-creator-shell/src/view/ui-editor/components/Inspector/Components/ComponentPanel.tsx
+++ b/apps/ai-game-creator-shell/src/view/ui-editor/components/Inspector/Components/ComponentPanel.tsx
@@ -1,6 +1,7 @@
 import { ChevronDown, ChevronRight, Plus, Trash2 } from 'lucide-react';
 import { useEffect, useState } from 'react';
 
+import { ThemedModal } from '../../../../../components/modal/ThemedModal';
 import type { Component } from '../../../../../features/ui-editor/types/Component';
 import type { UiEditorOperationResult } from '../../../../../features/ui-editor/useUiEditorState';
 import { useInspectorReadOnly } from '../InspectorReadOnlyContext';
@@ -17,6 +18,7 @@ export function ComponentPanel(props: ComponentPanelProps) {
   const [addKind, setAddKind] = useState<'Image' | 'Text'>('Image');
   const [expanded, setExpanded] = useState(Boolean(component));
   const [error, setError] = useState<string | null>(null);
+  const [replaceConfirmationOpen, setReplaceConfirmationOpen] = useState(false);
 
   useEffect(() => {
     setExpanded(Boolean(component));
@@ -37,8 +39,17 @@ export function ComponentPanel(props: ComponentPanelProps) {
   }
 
   function replaceComponent() {
+    if (component) {
+      setReplaceConfirmationOpen(true);
+      return;
+    }
+    applyReplacement();
+  }
+
+  function applyReplacement() {
     const result = setComponent(createComponent());
     if (result?.ok) setExpanded(true);
+    setReplaceConfirmationOpen(false);
   }
 
   return (
@@ -115,6 +126,33 @@ export function ComponentPanel(props: ComponentPanelProps) {
         </p>
       )}
       {error && <p className="m-0 text-[10px] text-red-600">{error}</p>}
+      <ThemedModal
+        open={replaceConfirmationOpen}
+        ariaLabel="确认替换组件"
+        onClose={() => setReplaceConfirmationOpen(false)}
+        panelClassName="w-full max-w-sm rounded-2xl p-5"
+      >
+        <h2 className="m-0 text-base font-semibold">确认替换组件？</h2>
+        <p className="mt-3 text-sm text-(--platform-text-soft)">
+          当前组件的配置将被新的默认组件覆盖。
+        </p>
+        <div className="mt-5 flex justify-end gap-2">
+          <button
+            type="button"
+            className="rounded-lg border border-(--platform-subpanel-border) px-3 py-2 text-xs"
+            onClick={() => setReplaceConfirmationOpen(false)}
+          >
+            取消
+          </button>
+          <button
+            type="button"
+            className="rounded-lg bg-blue-600 px-3 py-2 text-xs font-semibold text-white"
+            onClick={applyReplacement}
+          >
+            替换
+          </button>
+        </div>
+      </ThemedModal>
     </section>
   );
 }