降低 UI 编辑器颜色选择器提交频率

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

指针释放时一次提交最终颜色 State

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)],
                 })
               }
             />