From e379459820fc873a7964f310ee8f4d54f709bc73 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 11:05:58 +0800
Subject: [PATCH] =?UTF-8?q?=E9=99=8D=E4=BD=8E=20UI=20=E7=BC=96=E8=BE=91?=
 =?UTF-8?q?=E5=99=A8=E9=A2=9C=E8=89=B2=E9=80=89=E6=8B=A9=E5=99=A8=E6=8F=90?=
 =?UTF-8?q?=E4=BA=A4=E9=A2=91=E7=8E=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

颜色拖动期间使用本地草稿预览

指针释放时一次提交最终颜色 State
---
 .../Inspector/Components/TextPanel.tsx        | 28 +++++++++++--------
 1 file changed, 17 insertions(+), 11 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 9285614f4..b3b9f0d9c 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 { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { type RgbaColor, RgbaColorPicker } from 'react-colorful';
 
 import type { FontSizing } from '../../../../../features/ui-editor/types/FontSizing';
@@ -21,19 +21,25 @@ export function TextPanel({
   onChange,
 }: TextEditorProps) {
   const [colorOpen, setColorOpen] = useState(false);
-  const rgba: RgbaColor = {
+  const [colorDraft, setColorDraft] = useState<RgbaColor | null>(null);
+  const committedRgba: RgbaColor = {
     r: component.color[0] ?? 255,
     g: component.color[1] ?? 255,
     b: component.color[2] ?? 255,
     a: (component.color[3] ?? 255) / 255,
   };
+  const rgba = colorDraft ?? committedRgba;
+  useEffect(() => setColorDraft(null), [component.color]);
   const bestFit =
     'BestFit' in component.font_sizing ? component.font_sizing.BestFit : null;
-  const updateColor = (next: RgbaColor) =>
+  const commitColor = (next: RgbaColor = rgba) => {
+    if (!colorDraft) return;
+    setColorDraft(null);
     onChange({
       ...component,
       color: [next.r, next.g, next.b, Math.round(next.a * 255)],
     });
+  };
 
   return (
     <div className="space-y-3">
@@ -172,22 +178,22 @@ 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">
-            <RgbaColorPicker color={rgba} onChange={updateColor} />
+            <div
+              onPointerUp={() => commitColor()}
+              onPointerCancel={() => setColorDraft(null)}
+            >
+              <RgbaColorPicker color={rgba} onChange={setColorDraft} />
+            </div>
             <ComponentNumberInput
               label="Alpha"
               min={0}
               max={255}
               step={1}
-              value={component.color[3]}
+              value={Math.round(rgba.a * 255)}
               onChange={(event) =>
                 onChange({
                   ...component,
-                  color: [
-                    component.color[0],
-                    component.color[1],
-                    component.color[2],
-                    Number(event.target.value),
-                  ],
+                  color: [rgba.r, rgba.g, rgba.b, Number(event.target.value)],
                 })
               }
             />