替换已有组件前增加确认

使用独立确认弹窗避免一次点击覆盖已配置组件。

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>
   );
 }