From 79d3e5e6deac0338ffbbc98550f836174e231cb2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=BE=B7=E5=AE=87?= <kvtodev@outlook.com>
Date: Thu, 3 Sep 2026 13:17:15 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=9D=E7=95=99=E9=A2=9C=E8=89=B2=E8=8D=89?=
 =?UTF-8?q?=E7=A8=BF=E5=8D=B8=E8=BD=BD=E6=97=B6=E7=9A=84=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

组件卸载前提交仍未关闭的颜色草稿，避免切换面板或删除组件导致颜色丢失
---
 .../Inspector/Components/TextPanel.tsx        | 39 ++++++++++++++++---
 1 file changed, 34 insertions(+), 5 deletions(-)

diff --git a/apps/ai-game-creator-shell/src/view/ui-editor/components/Inspector/Components/TextPanel.tsx b/apps/ai-game-creator-shell/src/view/ui-editor/components/Inspector/Components/TextPanel.tsx
index d6321de42..d576a7ccb 100644
--- a/apps/ai-game-creator-shell/src/view/ui-editor/components/Inspector/Components/TextPanel.tsx
+++ b/apps/ai-game-creator-shell/src/view/ui-editor/components/Inspector/Components/TextPanel.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { type RgbaColor, RgbaColorPicker } from 'react-colorful';
 
 import type { FontSizing } from '../../../../../features/ui-editor/types/FontSizing';
@@ -22,6 +22,11 @@ export function TextPanel({
 }: TextEditorProps) {
   const [colorOpen, setColorOpen] = useState(false);
   const [colorDraft, setColorDraft] = useState<RgbaColor | null>(null);
+  const colorDraftRef = useRef<RgbaColor | null>(null);
+  const componentRef = useRef(component);
+  const onChangeRef = useRef(onChange);
+  componentRef.current = component;
+  onChangeRef.current = onChange;
   const committedRgba: RgbaColor = {
     r: component.color[0] ?? 255,
     g: component.color[1] ?? 255,
@@ -29,11 +34,26 @@ export function TextPanel({
     a: (component.color[3] ?? 255) / 255,
   };
   const rgba = colorDraft ?? committedRgba;
-  useEffect(() => setColorDraft(null), [component.color]);
+  useEffect(() => {
+    colorDraftRef.current = null;
+    setColorDraft(null);
+  }, [component.color]);
+  useEffect(
+    () => () => {
+      const draft = colorDraftRef.current;
+      if (!draft) return;
+      onChangeRef.current({
+        ...componentRef.current,
+        color: [draft.r, draft.g, draft.b, Math.round(draft.a * 255)],
+      });
+    },
+    [],
+  );
   const bestFit =
     'BestFit' in component.font_sizing ? component.font_sizing.BestFit : null;
   const commitColor = (next: RgbaColor = rgba) => {
-    if (!colorDraft) return;
+    if (!colorDraftRef.current) return;
+    colorDraftRef.current = null;
     setColorDraft(null);
     onChange({
       ...component,
@@ -182,10 +202,18 @@ export function TextPanel({
         </ComponentField>
         {colorOpen && !readOnly ? (
           <div className="absolute right-0 top-full z-20 mt-2 w-64 rounded-xl border border-(--platform-subpanel-border) bg-white p-3 shadow-xl">
-            <div onPointerCancel={() => setColorDraft(null)}>
+            <div
+              onPointerCancel={() => {
+                colorDraftRef.current = null;
+                setColorDraft(null);
+              }}
+            >
               <RgbaColorPicker
                 color={rgba}
-                onChange={setColorDraft}
+                onChange={(next) => {
+                  colorDraftRef.current = next;
+                  setColorDraft(next);
+                }}
                 onChangeEnd={commitColor}
               />
             </div>
@@ -196,6 +224,7 @@ export function TextPanel({
               step={1}
               value={Math.round(rgba.a * 255)}
               onChange={(event) => {
+                colorDraftRef.current = null;
                 setColorDraft(null);
                 onChange({
                   ...component,