From ef04a19d5aeec898ba36cc579d286571fa9ade36 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=BE=B7=E5=AE=87?= <kvtodev@outlook.com>
Date: Sat, 12 Sep 2026 13:19:59 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8A=BD=E5=8F=96=E7=BB=84=E4=BB=B6=E7=A1=AE?=
 =?UTF-8?q?=E8=AE=A4=E5=BC=B9=E7=AA=97=E5=85=AC=E5=85=B1=E7=BB=93=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

统一替换与移除操作的确认弹窗布局

保留各操作独立文案与按钮样式
---
 .../Inspector/Components/ComponentPanel.tsx   | 112 ++++++++++--------
 1 file changed, 63 insertions(+), 49 deletions(-)

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 c8ba9afad..abf81c924 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,5 +1,5 @@
 import { ChevronDown, ChevronRight, Plus, Trash2 } from 'lucide-react';
-import { useEffect, useRef, useState } from 'react';
+import { type ReactNode, useEffect, useRef, useState } from 'react';
 
 import { ThemedModal } from '../../../../../components/modal/ThemedModal';
 import type { Component } from '../../../../../features/ui-editor/types/Component';
@@ -139,64 +139,78 @@ export function ComponentPanel(props: ComponentPanelProps) {
         </p>
       )}
       {error && <p className="m-0 text-[10px] text-red-600">{error}</p>}
-      <ThemedModal
+      <ConfirmationModal
         open={replaceConfirmationOpen}
         ariaLabel="确认替换组件"
+        title="确认替换组件？"
+        description="当前组件的配置将被新的默认组件覆盖。"
+        confirmLabel="替换"
+        confirmClassName="bg-blue-600"
         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>
-      <ThemedModal
+        onConfirm={applyReplacement}
+      />
+      <ConfirmationModal
         open={removeConfirmationOpen}
         ariaLabel="确认移除组件"
+        title="确认移除组件？"
+        description="当前组件配置将被移除。"
+        confirmLabel="移除"
+        confirmClassName="bg-red-600"
         onClose={() => setRemoveConfirmationOpen(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={() => setRemoveConfirmationOpen(false)}
-          >
-            取消
-          </button>
-          <button
-            type="button"
-            className="rounded-lg bg-red-600 px-3 py-2 text-xs font-semibold text-white"
-            onClick={removeComponent}
-          >
-            移除
-          </button>
-        </div>
-      </ThemedModal>
+        onConfirm={removeComponent}
+      />
     </section>
   );
 }
 
+function ConfirmationModal({
+  open,
+  ariaLabel,
+  title,
+  description,
+  confirmLabel,
+  confirmClassName,
+  onClose,
+  onConfirm,
+}: {
+  open: boolean;
+  ariaLabel: string;
+  title: string;
+  description: ReactNode;
+  confirmLabel: string;
+  confirmClassName: string;
+  onClose: () => void;
+  onConfirm: () => void;
+}) {
+  return (
+    <ThemedModal
+      open={open}
+      ariaLabel={ariaLabel}
+      onClose={onClose}
+      panelClassName="w-full max-w-sm rounded-2xl p-5"
+    >
+      <h2 className="m-0 text-base font-semibold">{title}</h2>
+      <p className="mt-3 text-sm text-(--platform-text-soft)">{description}</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={onClose}
+        >
+          取消
+        </button>
+        <button
+          type="button"
+          className={`rounded-lg ${confirmClassName} px-3 py-2 text-xs font-semibold text-white`}
+          onClick={onConfirm}
+        >
+          {confirmLabel}
+        </button>
+      </div>
+    </ThemedModal>
+  );
+}
+
 function componentKind(component: Component): string {
   if ('Image' in component) return '图片';
   if ('Text' in component) return '文本';