fix

src/components/PropSidebar.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useMemo } from 'react';
+import React, { useState, useEffect, useMemo, useRef } from 'react';
 import { LabelTemplate, TemplateElement, PaperConfig, VisibilityRule } from '../types';
 import {
   extractTemplateVariables,
@@ -101,14 +101,35 @@ interface PropTextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAr
 
 const PropTextarea: React.FC<PropTextareaProps> = ({ value, onCommit, ...props }) => {
   const [localVal, setLocalVal] = useState<string>(value);
+  const focusedRef = useRef(false);
+  const localValRef = useRef(localVal);
+  const valueRef = useRef(value);
+  const onCommitRef = useRef(onCommit);
+  localValRef.current = localVal;
+  valueRef.current = value;
+  onCommitRef.current = onCommit;
 
   useEffect(() => {
-    setLocalVal(value);
+    if (!focusedRef.current) {
+      setLocalVal(value);
+    }
   }, [value]);
 
+  useEffect(() => {
+    return () => {
+      if (
+        focusedRef.current &&
+        localValRef.current !== valueRef.current
+      ) {
+        onCommitRef.current(localValRef.current);
+      }
+    };
+  }, []);
+
   const handleBlur = () => {
-    if (localVal !== value) {
-      onCommit(localVal);
+    focusedRef.current = false;
+    if (localValRef.current !== valueRef.current) {
+      onCommitRef.current(localValRef.current);
     }
   };
 
@@ -117,6 +138,9 @@ const PropTextarea: React.FC<PropTextareaProps> = ({ value, onCommit, ...props }
       {...props}
       value={localVal}
       onChange={(e) => setLocalVal(e.target.value)}
+      onFocus={() => {
+        focusedRef.current = true;
+      }}
       onBlur={handleBlur}
     />
   );
@@ -722,7 +746,7 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({
                   </div>
                   <p className="text-[10px] text-[#777] leading-normal flex items-center gap-1 bg-[#1e1e1e] p-2 border border-[#3a3a3a]">
                     <HelpCircle className="w-3.5 h-3.5 text-[#31a8ff] shrink-0" />
-                    <span>点击画布元素以编辑属性，或在下方图层面板中选择。</span>
+                    <span>选中元素以编辑属性</span>
                   </p>
                 </div>
               </div>