diff --git a/packages/origine2/src/hooks/useGlobalEffectEditor.ts b/packages/origine2/src/hooks/useGlobalEffectEditor.ts
new file mode 100644
index 000000000..0c41d6774
--- /dev/null
+++ b/packages/origine2/src/hooks/useGlobalEffectEditor.ts
@@ -0,0 +1,25 @@
+import { useEffect, useRef } from 'react';
+import {
+  eventBus,
+  GlobalEffectEditorEvent,
+  GlobalEffectEditorPayload,
+} from '@/utils/eventBus';
+
+export function useGlobalEffectEditor(handler: (event: GlobalEffectEditorEvent) => void) {
+  const editorId = useRef('');
+  const handlerRef = useRef(handler);
+  handlerRef.current = handler;
+
+  useEffect(() => {
+    const handleEvent = (event: GlobalEffectEditorEvent) => {
+      if (event.editorId === editorId.current) handlerRef.current(event);
+    };
+    eventBus.on('editor:global-effect-editor-event', handleEvent);
+    return () => eventBus.off('editor:global-effect-editor-event', handleEvent);
+  }, []);
+
+  return (payload: Omit<GlobalEffectEditorPayload, 'editorId'>) => {
+    editorId.current = Math.random().toString(36).slice(2);
+    eventBus.emit('editor:open-global-effect-editor', { ...payload, editorId: editorId.current });
+  };
+}
diff --git a/packages/origine2/src/locales/en.po b/packages/origine2/src/locales/en.po
index fa2959dfc..0f4e47ae4 100644
--- a/packages/origine2/src/locales/en.po
+++ b/packages/origine2/src/locales/en.po
@@ -1037,6 +1037,9 @@ msgstr "Clear role name after execution"
 msgid "扩展名"
 msgstr "Extension name"
 
+msgid "拖拽调整变换（建议打开快速预览效果）"
+msgstr "Drag and resize to adjust the transformation (It is recommended to turn on \"Fast preview effects\")"
+
 msgid "拼接先前文本框内的语句"
 msgstr "Concat the sentences with previous text"
 
diff --git a/packages/origine2/src/locales/ja.po b/packages/origine2/src/locales/ja.po
index 7fe0b3cff..3473bdc53 100644
--- a/packages/origine2/src/locales/ja.po
+++ b/packages/origine2/src/locales/ja.po
@@ -1037,6 +1037,9 @@ msgstr "実行後にキャラクター名を消去"
 msgid "扩展名"
 msgstr "拡張子"
 
+msgid "拖拽调整变换（建议打开快速预览效果）"
+msgstr "ドラッグ調整変換（「高速プレビューエフェクト」のオンをお勧めします）"
+
 msgid "拼接先前文本框内的语句"
 msgstr "前のテキストボックスの内容をつなげる"
 
diff --git a/packages/origine2/src/locales/zhCn.po b/packages/origine2/src/locales/zhCn.po
index 8f70e3bb4..bb1fd6460 100644
--- a/packages/origine2/src/locales/zhCn.po
+++ b/packages/origine2/src/locales/zhCn.po
@@ -1037,6 +1037,9 @@ msgstr "执行后清除角色名"
 msgid "扩展名"
 msgstr "扩展名"
 
+msgid "拖拽调整变换（建议打开快速预览效果）"
+msgstr "拖拽调整变换（建议打开快速预览效果）"
+
 msgid "拼接先前文本框内的语句"
 msgstr "拼接先前文本框内的语句"
 
diff --git a/packages/origine2/src/pages/editor/EditorSidebar/EditorSidebar.tsx b/packages/origine2/src/pages/editor/EditorSidebar/EditorSidebar.tsx
index 1495a0d58..0c9501e25 100644
--- a/packages/origine2/src/pages/editor/EditorSidebar/EditorSidebar.tsx
+++ b/packages/origine2/src/pages/editor/EditorSidebar/EditorSidebar.tsx
@@ -10,7 +10,6 @@ import { t } from "@lingui/macro";
 import { ArrowClockwiseFilled, ArrowClockwiseRegular, LiveFilled, LiveOffFilled, LiveOffRegular, LiveRegular, OpenFilled, OpenRegular, bundleIcon } from "@fluentui/react-icons";
 import { EditorPreviewClient } from "@/utils/editorPreviewClient";
 import { createPreviewBootstrapProvide, isPreviewBootstrapRequest } from "@/utils/editorPreviewBootstrap";
-import TransformableBox from '@/pages/editor/TransformableBox/TransformableBox';
 import { createId } from '@/utils/createId';
 
 let startX = 0;
@@ -29,7 +28,6 @@ export default function EditorSideBar() {
   const isUseFontOptimization = useEditorStore.use.isUseFontOptimization();
   const isShowPreview = useEditorStore.use.isShowPreview();
   const updateIsShowPreview = useEditorStore.use.updateIsShowPreview();
-  const isWindowAdjustment = useEditorStore.use.isWindowAdjustment();
 
   const isShowSidebar = useGameEditorContext((state) => state.isShowSidebar);
   const currentSidebarTab = useGameEditorContext((state) => state.currentSidebarTab);
@@ -246,6 +244,7 @@ export default function EditorSideBar() {
           </div>
           <div
             ref={PreviewControlRef}
+            id="gamePreviewControl"
             className={styles.previewWindow}
             style={{
               position: 'absolute',
@@ -253,13 +252,9 @@ export default function EditorSideBar() {
               bottom: 0,
               overflow: 'hidden',
               pointerEvents: 'none',
-              display: isShowPreview && isWindowAdjustment ? 'block' : 'none',
+              display: isShowPreview ? 'block' : 'none',
             }}
-          >
-            <TransformableBox
-              parents={PreviewControlRef}
-            />
-          </div>
+          />
           {/* eslint-disable-next-line react/iframe-missing-sandbox */}
           {isShowPreview && <iframe
             ref={ifRef}
diff --git a/packages/origine2/src/pages/editor/GraphicalEditor/SentenceEditor/ChangeBg.tsx b/packages/origine2/src/pages/editor/GraphicalEditor/SentenceEditor/ChangeBg.tsx
index f389d3106..930385daa 100644
--- a/packages/origine2/src/pages/editor/GraphicalEditor/SentenceEditor/ChangeBg.tsx
+++ b/packages/origine2/src/pages/editor/GraphicalEditor/SentenceEditor/ChangeBg.tsx
@@ -5,17 +5,13 @@ import ChooseFile from "../../ChooseFile/ChooseFile";
 import {useValue} from "../../../../hooks/useValue";
 import {getArgByKey} from "../utils/getArgByKey";
 import TerreToggle from "../../../../components/terreToggle/TerreToggle";
-import CommonTips from "@/pages/editor/GraphicalEditor/components/CommonTips";
-import {EffectEditor} from "@/pages/editor/GraphicalEditor/components/EffectEditor";
-import { Button, Input } from "@fluentui/react-components";
+import { Button } from "@fluentui/react-components";
 import { t } from "@lingui/macro";
 import { combineSubmitString } from "@/utils/combineSubmitString";
 import { extNameMap } from "../../ChooseFile/chooseFileConfig";
-import WheelDropdown from "../components/WheelDropdown";
-import { useEaseTypeOptions } from "@/hooks/useEaseTypeOptions";
 import { EditorPreviewClient } from "@/utils/editorPreviewClient";
-import { eventBus } from "@/utils/eventBus";
 import { AssetPreview } from "../components/AssetPreview";
+import { useGlobalEffectEditor } from "@/hooks/useGlobalEffectEditor";
 
 export default function ChangeBg(props: ISentenceEditorProps) {
   const isNoFile = props.sentence.content === "";
@@ -30,14 +26,6 @@ export default function ChangeBg(props: ISentenceEditorProps) {
   const enterAnimation = useValue(getArgByKey(props.sentence, 'enter').toString() ?? "");
   const exitAnimation = useValue(getArgByKey(props.sentence, 'exit').toString() ?? "");
   const ease = useValue(getArgByKey(props.sentence, 'ease').toString() ?? '');
-  const easeTypeOptions = useEaseTypeOptions();
-
-  const normalizeAnimationName = (name: string) => name.replace(/\.json$/i, "");
-  const toAnimationFilePath = (name: string) => {
-    const normalized = normalizeAnimationName(name);
-    return normalized ? `${normalized}.json` : "";
-  };
-  
   const submit = () => {
     const submitString = combineSubmitString(
       props.sentence.commandRaw,
@@ -67,120 +55,35 @@ export default function ChangeBg(props: ISentenceEditorProps) {
     props.onSubmit(submitString);
   };
 
-  const openEffectEditor = () => {
-    eventBus.emit('editor:open-global-terre-panel', {
-      title: t`效果编辑器`,
-      bottomBarChildren: <>
-        <CommonOptions key="enterAnimation" title={t`选择进入动画`}>
-          <>
-            {enterAnimation.value}{"\u00a0"}
-            <ChooseFile
-              title={t`选择进入动画文件`}
-              basePath={['animation']}
-              selectedFilePath={toAnimationFilePath(enterAnimation.value)}
-              onChange={(file) => {
-                enterAnimation.set(normalizeAnimationName(file?.name ?? ""));
-                submit();
-              }}
-              extNames={extNameMap.get('json')}
-              hiddenFiles={['animationTable.json']}
-            />
-          </>
-        </CommonOptions>
-        <CommonOptions key="exitAnimation" title={t`选择退出动画`}>
-          <>
-            {exitAnimation.value}{"\u00a0"}
-            <ChooseFile
-              title={t`选择退出动画文件`}
-              basePath={['animation']}
-              selectedFilePath={toAnimationFilePath(exitAnimation.value)}
-              onChange={(file) => {
-                exitAnimation.set(normalizeAnimationName(file?.name ?? ""));
-                submit();
-              }}
-              extNames={extNameMap.get('json')}
-              hiddenFiles={['animationTable.json']}
-            />
-          </>
-        </CommonOptions>
-        <CommonOptions key="10" title={t`过渡时间（单位为毫秒）`}>
-          <div>
-            <Input
-              placeholder={t`过渡时间（单位为毫秒）`}
-              value={duration.value.toString()}
-              onChange={(_, data) => {
-                const newDuration = Number(data.value);
-                if (isNaN(newDuration) || data.value === '')
-                  duration.set("");
+  const openEffectEditor = useGlobalEffectEditor((event) => {
+    if (event.action === 'change') {
+      json.set(event.value);
+      submit();
+    } else if (event.action === 'preview') {
+      EditorPreviewClient.setEffect({ target: 'bg-main', transform: event.value });
+    } else {
+      const values = { enterAnimation, exitAnimation, duration, enterDuration, exitDuration, ease };
+      if (event.key in values) values[event.key as keyof typeof values].set(event.value as never);
+      if (event.submit) submit();
+    }
+  });
 
-                else
-                  duration.set(newDuration);
-              } }
-              onBlur={submit} />
-          </div>
-        </CommonOptions>
-        <CommonOptions key="enterDuration" title={t`入场时长（单位为毫秒）`}>
-          <div>
-            <Input
-              placeholder={t`入场时长（单位为毫秒）`}
-              value={enterDuration.value.toString()}
-              onChange={(_, data) => {
-                const newDuration = Number(data.value);
-                if (isNaN(newDuration) || data.value === '') {
-                  enterDuration.set("");
-                } else {
-                  enterDuration.set(newDuration);
-                }
-              }}
-              onBlur={submit}
-            />
-          </div>
-        </CommonOptions>
-        <CommonOptions key="exitDuration" title={t`退场时长（单位为毫秒）`}>
-          <div>
-            <Input
-              placeholder={t`退场时长（单位为毫秒）`}
-              value={exitDuration.value.toString()}
-              onChange={(_, data) => {
-                const newDuration = Number(data.value);
-                if (isNaN(newDuration) || data.value === '') {
-                  exitDuration.set("");
-                } else {
-                  exitDuration.set(newDuration);
-                }
-              }}
-              onBlur={submit}
-            />
-          </div>
-        </CommonOptions>
-        <CommonOptions key="5" title={t`缓动类型`}>
-          <WheelDropdown
-            options={easeTypeOptions}
-            value={ease.value}
-            onValueChange={(newValue) => {
-              ease.set(newValue?.toString() ?? "");
-              submit();
-            }}
-          />
-        </CommonOptions>
-      </>,
-      children: <div>
-        <CommonTips
-          text={t`提示：效果只有在切换到不同背景或关闭之前的背景再重新添加时生效。如果你要为现有的背景设置效果，请使用单独的设置效果命令`}/>
-        <EffectEditor
-          json={json.value.toString()}
-          onChange={(newJson) => {
-            json.set(newJson);
-            submit();
-          }}
-          onUpdate={(transform) => {
-            EditorPreviewClient.setEffect({ target: 'bg-main', transform });
-          }}
-          sentence={props.sentence}
-          index={props.index}
-          targetPath={props.targetPath}
-        />
-      </div>,
+  const showEffectEditor = () => {
+    openEffectEditor({
+      title: t`效果编辑器`,
+      json: json.value.toString(),
+      sentence: props.sentence,
+      index: props.index,
+      targetPath: props.targetPath,
+      tip: t`提示：效果只有在切换到不同背景或关闭之前的背景再重新添加时生效。如果你要为现有的背景设置效果，请使用单独的设置效果命令`,
+      options: {
+        enterAnimation: enterAnimation.value,
+        exitAnimation: exitAnimation.value,
+        duration: duration.value,
+        enterDuration: enterDuration.value,
+        exitDuration: exitDuration.value,
+        ease: ease.value,
+      },
     });
   };
 
@@ -231,7 +134,7 @@ export default function ChangeBg(props: ISentenceEditorProps) {
         />
       </CommonOptions>}
       <CommonOptions key="23" title={t`显示效果`}>
-        <Button onClick={openEffectEditor}>{t`打开效果编辑器`}</Button>
+        <Button onClick={showEffectEditor}>{t`打开效果编辑器`}</Button>
       </CommonOptions>
     </div>
     <div className={styles.commonArgItem}>
diff --git a/packages/origine2/src/pages/editor/GraphicalEditor/SentenceEditor/ChangeFigure.tsx b/packages/origine2/src/pages/editor/GraphicalEditor/SentenceEditor/ChangeFigure.tsx
index 7a6510ef2..682faff54 100644
--- a/packages/origine2/src/pages/editor/GraphicalEditor/SentenceEditor/ChangeFigure.tsx
+++ b/packages/origine2/src/pages/editor/GraphicalEditor/SentenceEditor/ChangeFigure.tsx
@@ -6,8 +6,6 @@ import { useValue } from "../../../../hooks/useValue";
 import { getArgByKey } from "../utils/getArgByKey";
 import TerreToggle from "../../../../components/terreToggle/TerreToggle";
 import { useEffect, useMemo, useState } from "react";
-import { EffectEditor } from "@/pages/editor/GraphicalEditor/components/EffectEditor";
-import CommonTips from "@/pages/editor/GraphicalEditor/components/CommonTips";
 import axios from "axios";
 import { TerrePanel } from "@/pages/editor/GraphicalEditor/components/TerrePanel";
 import { Button, Input } from "@fluentui/react-components";
@@ -20,8 +18,8 @@ import SearchableCascader from "@/pages/editor/GraphicalEditor/components/Search
 import { useEaseTypeOptions } from "@/hooks/useEaseTypeOptions";
 import { EditorPreviewClient } from "@/utils/editorPreviewClient";
 import { OptionCategory } from "../components/OptionCategory";
-import { eventBus } from "@/utils/eventBus";
 import { AssetPreview } from "../components/AssetPreview";
+import { useGlobalEffectEditor } from "@/hooks/useGlobalEffectEditor";
 
 type FigurePosition = "" | "left" | "right";
 type AnimationFlag = "" | "on";
@@ -61,7 +59,6 @@ export default function ChangeFigure(props: ISentenceEditorProps) {
   const [l2dExpressionsList, setL2dExpressionsList] = useState<string[]>([]);
   const [spineSkinsList, setSpineSkinsList] = useState<string[]>([]);
   const [isSpineJsonFormat, setIsSpineJsonFormat] = useState(false);
-  const isWindowAdjustment = useEditorStore.use.isWindowAdjustment();
 
   const currentMotion = useValue(getArgByKey(props.sentence, "motion").toString() ?? "");
   const currentExpression = useValue(
@@ -80,21 +77,8 @@ export default function ChangeFigure(props: ISentenceEditorProps) {
     ["on", "ON"],
   ]);
 
-  const blendModeOptions = useMemo(() => new Map<string, string>([
-    ["", t`默认`],
-    ["normal", t`正常`],
-    ["add", t`线性减淡`],
-    ["multiply", t`正片叠底`],
-    ["screen", t`滤色`],
-  ]), []);
-
   const ease = useValue(getArgByKey(props.sentence, 'ease').toString() ?? '');
   const easeTypeOptions = useEaseTypeOptions();
-  const normalizeAnimationName = (name: string) => name.replace(/\.json$/i, "");
-  const toAnimationFilePath = (name: string) => {
-    const normalized = normalizeAnimationName(name);
-    return normalized ? `${normalized}.json` : "";
-  };
 
   // Blink
   const blinkParam = useMemo(() => {
@@ -308,137 +292,37 @@ export default function ChangeFigure(props: ISentenceEditorProps) {
     props.onSubmit(submitString);
   };
 
-  const renderEffectEditor = () => {
-    return <>
-      <CommonTips
-        text={t`提示：效果只有在切换到不同立绘或关闭之前的立绘再重新添加时生效。如果你要为现有的立绘设置效果，请使用单独的设置效果命令`}
-      />
-      <EffectEditor
-        json={json.value.toString()}
-        onChange={(newJson) => {
-          json.set(newJson);
-          submit();
-        }}
-        onUpdate={(transform) => {
-          let target = id.value;
-          if (target === "") {
-            // 根据位置确定目标
-            if (figurePosition.value === "left") {
-              target = "fig-left";
-            } else if (figurePosition.value === "right") {
-              target = "fig-right";
-            } else {
-              target = "fig-center";
-            }
-          }
-          EditorPreviewClient.setEffect({ target, transform });
-        }}
-        sentence={props.sentence}
-        index={props.index}
-        targetPath={props.targetPath}
-      />
-    </>;
-  };
+  const openEffectEditor = useGlobalEffectEditor((event) => {
+    if (event.action === 'change') {
+      json.set(event.value);
+      submit();
+    } else if (event.action === 'preview') {
+      const target = id.value || `fig-${figurePosition.value || 'center'}`;
+      EditorPreviewClient.setEffect({ target, transform: event.value });
+    } else {
+      const values = { enterAnimation, exitAnimation, duration, enterDuration, exitDuration, ease, blendMode };
+      values[event.key].set(event.value as never);
+      if (event.submit) submit();
+    }
+  });
 
-  const renderEffectEditorBottomBar = () => {
-    return <>
-      <CommonOptions key="enterAnimation" title={t`选择进入动画`}>
-        <>
-          {enterAnimation.value}{"\u00a0"}
-          <ChooseFile
-            title={t`选择进入动画文件`}
-            basePath={['animation']}
-            selectedFilePath={toAnimationFilePath(enterAnimation.value)}
-            onChange={(file) => {
-              enterAnimation.set(normalizeAnimationName(file?.name ?? ""));
-              submit();
-            }}
-            extNames={extNameMap.get('json')}
-            hiddenFiles={['animationTable.json']}
-          />
-        </>
-      </CommonOptions>
-      <CommonOptions key="exitAnimation" title={t`选择退出动画`}>
-        <>
-          {exitAnimation.value}{"\u00a0"}
-          <ChooseFile
-            title={t`选择退出动画文件`}
-            basePath={['animation']}
-            selectedFilePath={toAnimationFilePath(exitAnimation.value)}
-            onChange={(file) => {
-              exitAnimation.set(normalizeAnimationName(file?.name ?? ""));
-              submit();
-            }}
-            extNames={extNameMap.get('json')}
-            hiddenFiles={['animationTable.json']}
-          />
-        </>
-      </CommonOptions>
-      <CommonOptions key="11" title={t`过渡时间（单位为毫秒）`}>
-        <div>
-          <Input placeholder={t`过渡时间（单位为毫秒）`} value={duration.value.toString()} onChange={(_, data) => {
-            const newDuration = Number(data.value);
-            if (isNaN(newDuration) || data.value === '')
-              duration.set("");
-            else
-              duration.set(newDuration);
-          }} onBlur={submit}/>
-        </div>
-      </CommonOptions>
-      <CommonOptions key="enterDuration" title={t`入场时长（单位为毫秒）`}>
-        <div>
-          <Input
-            placeholder={t`入场时长（单位为毫秒）`}
-            value={enterDuration.value.toString()}
-            onChange={(_, data) => {
-              const newDuration = Number(data.value);
-              if (isNaN(newDuration) || data.value === '')
-                enterDuration.set("");
-              else
-                enterDuration.set(newDuration);
-            }}
-            onBlur={submit}
-          />
-        </div>
-      </CommonOptions>
-      <CommonOptions key="exitDuration" title={t`退场时长（单位为毫秒）`}>
-        <div>
-          <Input
-            placeholder={t`退场时长（单位为毫秒）`}
-            value={exitDuration.value.toString()}
-            onChange={(_, data) => {
-              const newDuration = Number(data.value);
-              if (isNaN(newDuration) || data.value === '')
-                exitDuration.set("");
-              else
-                exitDuration.set(newDuration);
-            }}
-            onBlur={submit}
-          />
-        </div>
-      </CommonOptions>
-      <CommonOptions key="5" title={t`缓动类型`}>
-        <WheelDropdown
-          options={easeTypeOptions}
-          value={ease.value}
-          onValueChange={(newValue) => {
-            ease.set(newValue?.toString() ?? "");
-            submit();
-          }}
-        />
-      </CommonOptions>
-      <CommonOptions title={t`混合模式`} key="blendMode">
-        <WheelDropdown
-          options={blendModeOptions}
-          value={blendMode.value}
-          onValueChange={(newValue) => {
-            blendMode.set(newValue?.toString() ?? "");
-            submit();
-          }}
-        />
-      </CommonOptions>
-    </>;
-  };
+  const showEffectEditor = () => openEffectEditor({
+    title: t`效果编辑器`,
+    json: json.value.toString(),
+    sentence: props.sentence,
+    index: props.index,
+    targetPath: props.targetPath,
+    tip: t`提示：效果只有在切换到不同立绘或关闭之前的立绘再重新添加时生效。如果你要为现有的立绘设置效果，请使用单独的设置效果命令`,
+    options: {
+      enterAnimation: enterAnimation.value,
+      exitAnimation: exitAnimation.value,
+      duration: duration.value,
+      enterDuration: enterDuration.value,
+      exitDuration: exitDuration.value,
+      ease: ease.value,
+      blendMode: blendMode.value,
+    },
+  });
 
   const shouldRenderMoreOptions = useMemo(() => {
     if (!figureFile.value) {
@@ -741,13 +625,7 @@ export default function ChangeFigure(props: ISentenceEditorProps) {
         />
       </CommonOptions>
       <CommonOptions key="23" title={t`显示效果`}>
-        <Button onClick={() => {
-          eventBus.emit('editor:open-global-terre-panel', {
-            title: t`效果编辑器`,
-            children: renderEffectEditor(),
-            bottomBarChildren: renderEffectEditorBottomBar(),
-          });
-        }}>{t`打开效果编辑器`}</Button>
+        <Button onClick={showEffectEditor}>{t`打开效果编辑器`}</Button>
       </CommonOptions>
       {shouldRenderMoreOptions && (
         <CommonOptions key="moreOptions" title={t`更多选项`}>
diff --git a/packages/origine2/src/pages/editor/GraphicalEditor/SentenceEditor/SetTempAnimation.tsx b/packages/origine2/src/pages/editor/GraphicalEditor/SentenceEditor/SetTempAnimation.tsx
index b04182ed7..683f5ef21 100644
--- a/packages/origine2/src/pages/editor/GraphicalEditor/SentenceEditor/SetTempAnimation.tsx
+++ b/packages/origine2/src/pages/editor/GraphicalEditor/SentenceEditor/SetTempAnimation.tsx
@@ -7,12 +7,12 @@ import TerreToggle from "../../../../components/terreToggle/TerreToggle";
 import { t } from "@lingui/macro";
 import WheelDropdown from "@/pages/editor/GraphicalEditor/components/WheelDropdown";
 import { combineSubmitString } from "@/utils/combineSubmitString";
-import { EffectEditor } from "../components/EffectEditor";
 import { EditorPreviewClient } from "@/utils/editorPreviewClient";
 import { Button, Menu, MenuItem, MenuList, MenuPopover, MenuTrigger, Text } from "@fluentui/react-components";
 import { useEaseTypeOptions } from "@/hooks/useEaseTypeOptions";
 import { CloseSmall, Down, More, Plus, Up } from "@icon-park/react";
-import { eventBus } from "@/utils/eventBus";
+import { useGlobalEffectEditor } from "@/hooks/useGlobalEffectEditor";
+import { useRef } from "react";
 
 type PresetTarget = "fig-left" | "fig-center" | "fig-right" | "bg-main" | "stage-main";
 
@@ -109,6 +109,16 @@ export default function SetTempAnimation(props: ISentenceEditorProps) {
     animationFrameArray.set(newArray);
     joinFrameString();
   };
+  const effectFrameIndex = useRef(-1);
+  const openEffectEditor = useGlobalEffectEditor((event) => {
+    const index = effectFrameIndex.current;
+    if (event.action === 'change' && animationFrameArray.value[index]) {
+      updateFrame(index, { ...animationFrameArray.value[index], transform: event.value || "{}" });
+      submit();
+    } else if (event.action === 'preview') {
+      EditorPreviewClient.setEffect({ target: target.value, transform: event.value });
+    }
+  });
 
   const animationFrameElement = (index: number) => {
     if (index < 0 || index >= animationFrameArray.value.length) {
@@ -165,21 +175,13 @@ export default function SetTempAnimation(props: ISentenceEditorProps) {
         </CommonOptions>
         <CommonOptions key={`effect-button-${index}`} title={t`效果编辑`}>
           <Button onClick={() => {
-            eventBus.emit('editor:open-global-terre-panel', {
+            effectFrameIndex.current = index;
+            openEffectEditor({
               title: t`效果编辑器`,
-              children: <EffectEditor
-                json={animationFrameArray.value[index]?.transform ?? "{}"}
-                onChange={(newJson)=>{
-                  updateFrame(index, { ...animationFrameArray.value[index], transform: newJson || "{}" });
-                  submit();
-                }}
-                onUpdate={(transform)=>{
-                  EditorPreviewClient.setEffect({ target: target.value, transform });
-                }}
-                sentence={props.sentence}
-                index={props.index}
-                targetPath={props.targetPath}
-              />,
+              json: animationFrameArray.value[index]?.transform ?? "{}",
+              sentence: props.sentence,
+              index: props.index,
+              targetPath: props.targetPath,
             });
           }}>
             {t`打开效果编辑器`}
diff --git a/packages/origine2/src/pages/editor/GraphicalEditor/SentenceEditor/SetTransform.tsx b/packages/origine2/src/pages/editor/GraphicalEditor/SentenceEditor/SetTransform.tsx
index 1109074cf..a8b4f29c2 100644
--- a/packages/origine2/src/pages/editor/GraphicalEditor/SentenceEditor/SetTransform.tsx
+++ b/packages/origine2/src/pages/editor/GraphicalEditor/SentenceEditor/SetTransform.tsx
@@ -3,7 +3,6 @@ import { ISentenceEditorProps } from "./index";
 import styles from "./sentenceEditor.module.scss";
 import { getArgByKey } from "@/pages/editor/GraphicalEditor/utils/getArgByKey";
 import { useValue } from "@/hooks/useValue";
-import { EffectEditor } from "@/pages/editor/GraphicalEditor/components/EffectEditor";
 import TerreToggle from "@/components/terreToggle/TerreToggle";
 import WheelDropdown from "@/pages/editor/GraphicalEditor/components/WheelDropdown";
 import { Button } from "@fluentui/react-components";
@@ -11,7 +10,7 @@ import { t } from "@lingui/macro";
 import { combineSubmitString } from "@/utils/combineSubmitString";
 import { useEaseTypeOptions } from "@/hooks/useEaseTypeOptions";
 import { EditorPreviewClient } from "@/utils/editorPreviewClient";
-import { eventBus } from "@/utils/eventBus";
+import { useGlobalEffectEditor } from "@/hooks/useGlobalEffectEditor";
 
 type PresetTarget = "fig-left" | "fig-center" | "fig-right" | "bg-main" | "stage-main";
 
@@ -57,25 +56,24 @@ export default function SetTransform(props: ISentenceEditorProps) {
     );
     props.onSubmit(submitString);
   };
+  const openEffectEditor = useGlobalEffectEditor((event) => {
+    if (event.action === 'change') {
+      transform.set(event.value);
+      submit();
+    } else if (event.action === 'preview') {
+      EditorPreviewClient.setEffect({ target: target.value, transform: event.value });
+    }
+  });
 
   return <div className={styles.sentenceEditorContent}>
     <div className={styles.editItem}>
       <CommonOptions title={t`效果编辑`}>
-        <Button onClick={() => eventBus.emit('editor:open-global-terre-panel', {
+        <Button onClick={() => openEffectEditor({
           title: t`效果编辑器`,
-          children: <EffectEditor
-            json={transform.value}
-            onChange={(newJson) => {
-              transform.set(newJson);
-              submit();
-            }}
-            onUpdate={(transform) => {
-              EditorPreviewClient.setEffect({ target: target.value, transform });
-            }}
-            sentence={props.sentence}
-            index={props.index}
-            targetPath={props.targetPath}
-          />,
+          json: transform.value,
+          sentence: props.sentence,
+          index: props.index,
+          targetPath: props.targetPath,
         })}>
           {t`打开效果编辑器`}
         </Button>
diff --git a/packages/origine2/src/pages/editor/GraphicalEditor/components/EffectEditor.tsx b/packages/origine2/src/pages/editor/GraphicalEditor/components/EffectEditor.tsx
index 5f6c2c0af..09892bc0e 100644
--- a/packages/origine2/src/pages/editor/GraphicalEditor/components/EffectEditor.tsx
+++ b/packages/origine2/src/pages/editor/GraphicalEditor/components/EffectEditor.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useMemo, useCallback, memo } from 'react';
 import { ColorPicker, IColor } from '@fluentui/react';
-import { Button, Checkbox, Input, Slider } from '@fluentui/react-components';
+import { Button, Checkbox, Input, Slider, Switch } from '@fluentui/react-components';
 import { t } from '@lingui/macro';
 import { debounce } from 'lodash';
 import { useValue } from '@/hooks/useValue';
@@ -20,6 +20,8 @@ import useEditorStore from '@/store/useEditorStore';
 import { EditorPreviewClient } from '@/utils/editorPreviewClient';
 import { eventBus } from '@/utils/eventBus';
 import { ISentence } from 'webgal-parser/src/interface/sceneInterface';
+import { createPortal } from 'react-dom';
+import TransformableBox from '@/pages/editor/TransformableBox/TransformableBox';
 
 /**
  * 根据对象路径获取值（支持嵌套路径，如"position.x"）
@@ -104,6 +106,9 @@ const EffectInputField = memo(
     const { effectConfig } = useEffectEditorConfig();
     const val = effectFields[fieldKey];
     let [innerVal, setInnerVal] = useState((val ?? '').toString());
+    useEffect(() => {
+      setInnerVal((val ?? '').toString());
+    }, [val]);
     const config = effectConfig[fieldKey];
     const handleChange = useCallback(
       (value: string) => {
@@ -428,8 +433,7 @@ export function EffectEditor(props: {
 
   const isWindowAdjustment = useEditorStore.use.isWindowAdjustment();
   const updateIsWindowAdjustment = useEditorStore.use.updateIsWindowAdjustment();
-  const updateIsEnableLivePreview = useEditorStore.use.updateIsEnableLivePreview();
-  const updateIsShowPreview = useEditorStore.use.updateIsShowPreview();
+  const [isDragSupported, setIsDragSupported] = useState(false);
 
   // 将 sentence 对象转换回原始命令行字符串
   const sentenceToRawLine = useCallback((sentence: ISentence): string => {
@@ -449,14 +453,9 @@ export function EffectEditor(props: {
     return base;
   }, []);
 
-  // 挂载时启用窗口调整，卸载时关闭
+  // 挂载时关闭拖拽框，卸载时也关闭
   useEffect(() => {
-    const lineContent = sentenceToRawLine(props.sentence);
-    if (lineContent.startsWith("changeFigure") || lineContent.startsWith("setTransform")) {
-      updateIsWindowAdjustment(true);
-      updateIsShowPreview(true);
-      updateIsEnableLivePreview(true);
-    }
+    updateIsWindowAdjustment(false);
     return () => {
       updateIsWindowAdjustment(false);
     };
@@ -465,7 +464,7 @@ export function EffectEditor(props: {
   // 当 sentence 变化时，同步拖拽框状态
   useEffect(() => {
     const lineContent = sentenceToRawLine(props.sentence);
-    if (lineContent.startsWith("changeFigure") || lineContent.startsWith("setTransform")) {
+    if (lineContent.startsWith('changeFigure') || lineContent.startsWith('setTransform')) {
       EditorPreviewClient.sendSyncScene({
         scenePath: props.targetPath,
         lineNumber: props.index,
@@ -479,8 +478,61 @@ export function EffectEditor(props: {
       });
     }
   }, [props.sentence, props.index, props.targetPath]);
+  // // 当立绘变换改变时，同步拖拽框与 input
+  useEffect(() => {
+    eventBus.emit('editor:sync-dragger', {
+      x: effectFields.value.x ?? 0,
+      y: effectFields.value.y ?? 0,
+      scaleX: effectFields.value.scaleX ?? 1,
+      scaleY: effectFields.value.scaleY ?? 1,
+      rotation: effectFields.value.rotation ?? 0,
+    });
+  }, [
+    effectFields.value.x,
+    effectFields.value.y,
+    effectFields.value.scaleX,
+    effectFields.value.scaleY,
+    effectFields.value.rotation,
+  ]);
+  const previewControl = document.getElementById('gamePreviewControl');
   return (
     <>
+      <Switch
+        checked={isWindowAdjustment}
+        disabled={!isDragSupported}
+        onChange={(_, checked) => {
+          updateIsWindowAdjustment(checked.checked);
+        }}
+        label={t`拖拽调整变换（建议打开快速预览效果）`}
+      />
+      {previewControl && createPortal(
+        <TransformableBox
+          parent={previewControl}
+          sentenceInfo={{
+            scenePath: props.targetPath,
+            lineNumber: props.index,
+            lineContent: sentenceToRawLine(props.sentence),
+            lineSentence: props.sentence,
+            transform: props.json,
+          }}
+          onSupportChange={(supported) => {
+            setIsDragSupported(supported);
+            if (!supported) updateIsWindowAdjustment(false);
+          }}
+          onDragging={(transform) => {
+            updateField('x', transform.position?.x);
+            updateField('y', transform.position?.y);
+            updateField('scaleX', transform.scale?.x);
+            updateField('scaleY', transform.scale?.y);
+            updateField('rotation', transform.rotation);
+            update();
+          }}
+          onDragEnd={() => {
+            submit();
+          }}
+        />,
+        previewControl,
+      )}
       {fieldGroups.map((group, index) => (
         <OptionCategory key={index + 1} title={group.title}>
           {index === 2 || index === 4 ? ( // 有拾色器的组
diff --git a/packages/origine2/src/pages/editor/GraphicalEditor/components/TerrePanel.tsx b/packages/origine2/src/pages/editor/GraphicalEditor/components/TerrePanel.tsx
index 07dfd7a52..c558975f7 100644
--- a/packages/origine2/src/pages/editor/GraphicalEditor/components/TerrePanel.tsx
+++ b/packages/origine2/src/pages/editor/GraphicalEditor/components/TerrePanel.tsx
@@ -1,9 +1,17 @@
-import React, {ReactNode, useEffect, useState} from "react";
-import { Button, DrawerBody, DrawerHeader, DrawerHeaderTitle, OverlayDrawer} from "@fluentui/react-components";
+import React, {ReactNode, useEffect, useMemo, useState} from "react";
+import { Button, DrawerBody, DrawerHeader, DrawerHeaderTitle, Input, OverlayDrawer} from "@fluentui/react-components";
 import { Dismiss24Filled, Dismiss24Regular, bundleIcon } from "@fluentui/react-icons";
 import useEditorStore from "@/store/useEditorStore";
 import styles from "./terrePanel.module.scss";
-import { eventBus } from "@/utils/eventBus";
+import { EffectEditorOptionKey, eventBus, GlobalEffectEditorPayload } from "@/utils/eventBus";
+import { EffectEditor } from "./EffectEditor";
+import CommonTips from "./CommonTips";
+import CommonOptions from "./CommonOption";
+import ChooseFile from "../../ChooseFile/ChooseFile";
+import { extNameMap } from "../../ChooseFile/chooseFileConfig";
+import WheelDropdown from "./WheelDropdown";
+import { useEaseTypeOptions } from "@/hooks/useEaseTypeOptions";
+import { t } from "@lingui/macro";
 
 export function TerrePanel(props: {
   children: ReactNode,
@@ -57,7 +65,7 @@ export function GlobalTerrePanel() {
     children: ReactNode;
     bottomBarChildren?: ReactNode;
     width?: number;
-  } | null>(null);
+  } | GlobalEffectEditorPayload | null>(null);
 
   useEffect(() => {
     const handleOpen = (payload: {
@@ -66,19 +74,24 @@ export function GlobalTerrePanel() {
       bottomBarChildren?: ReactNode;
       width?: number;
     }) => setPanel(payload);
+    const handleOpenEffectEditor = (payload: GlobalEffectEditorPayload) => setPanel(payload);
     eventBus.on('editor:open-global-terre-panel', handleOpen);
+    eventBus.on('editor:open-global-effect-editor', handleOpenEffectEditor);
     return () => {
       eventBus.off('editor:open-global-terre-panel', handleOpen);
+      eventBus.off('editor:open-global-effect-editor', handleOpenEffectEditor);
     };
   }, []);
 
+  const effectEditor = panel && 'editorId' in panel ? panel : null;
+  const genericPanel = panel && 'children' in panel ? panel : null;
   return (
     <OverlayDrawer
       open={!!panel}
       onOpenChange={(_, data) => !data.open && setPanel(null)}
       position="end"
       className={styles.overlayDrawer}
-      style={{ width: `${panel?.width ?? 750}px` }}
+      style={{ width: `${panel && 'width' in panel ? panel.width ?? 750 : 750}px` }}
       backdrop={null}
     >
       <DrawerHeader>
@@ -96,11 +109,100 @@ export function GlobalTerrePanel() {
         </DrawerHeaderTitle>
       </DrawerHeader>
       <DrawerBody>
-        {panel?.children}
+        {effectEditor
+          ? <>
+            {effectEditor.tip && <CommonTips text={effectEditor.tip}/>}
+            <EffectEditor
+              key={effectEditor.editorId}
+              json={effectEditor.json}
+              sentence={effectEditor.sentence}
+              index={effectEditor.index}
+              targetPath={effectEditor.targetPath}
+              onChange={(value) => eventBus.emit('editor:global-effect-editor-event', {
+                editorId: effectEditor.editorId,
+                action: 'change',
+                value,
+              })}
+              onUpdate={(value) => eventBus.emit('editor:global-effect-editor-event', {
+                editorId: effectEditor.editorId,
+                action: 'preview',
+                value,
+              })}
+            />
+          </>
+          : genericPanel?.children}
       </DrawerBody>
-      <div className={styles.bottomBar} style={{display: panel?.bottomBarChildren ? 'inherit' : 'none'}}>
-        {panel?.bottomBarChildren}
+      <div className={styles.bottomBar} style={{display: effectEditor?.options || panel && 'bottomBarChildren' in panel && panel.bottomBarChildren ? 'inherit' : 'none'}}>
+        {effectEditor?.options
+          ? <EffectEditorOptions panel={effectEditor} setPanel={setPanel}/>
+          : genericPanel?.bottomBarChildren}
       </div>
     </OverlayDrawer>
   );
 }
+
+function EffectEditorOptions({ panel, setPanel }: {
+  panel: GlobalEffectEditorPayload;
+  setPanel: React.Dispatch<React.SetStateAction<GlobalEffectEditorPayload | {
+    title: string;
+    children: ReactNode;
+    bottomBarChildren?: ReactNode;
+    width?: number;
+  } | null>>;
+}) {
+  const easeOptions = useEaseTypeOptions();
+  const blendModeOptions = useMemo(() => new Map([
+    ['', t`默认`],
+    ['normal', t`正常`],
+    ['add', t`线性减淡`],
+    ['multiply', t`正片叠底`],
+    ['screen', t`滤色`],
+  ]), []);
+  const update = (key: EffectEditorOptionKey, value: string | number, submit = false) => {
+    setPanel({ ...panel, options: { ...panel.options, [key]: value } });
+    eventBus.emit('editor:global-effect-editor-event', { editorId: panel.editorId, action: 'option', key, value, submit });
+  };
+  const options = panel.options!;
+  const animation = (key: 'enterAnimation' | 'exitAnimation', title: string) => key in options && (
+    <CommonOptions title={title}>
+      <>{options[key]}{"\u00a0"}<ChooseFile
+        title={title}
+        basePath={['animation']}
+        selectedFilePath={options[key] ? `${String(options[key])}.json` : ''}
+        onChange={(file) => update(key, file?.name.replace(/\.json$/i, '') ?? '', true)}
+        extNames={extNameMap.get('json')}
+        hiddenFiles={['animationTable.json']}
+      /></>
+    </CommonOptions>
+  );
+  const input = (key: 'duration' | 'enterDuration' | 'exitDuration', title: string) => key in options && (
+    <CommonOptions title={title}>
+      <Input
+        value={options[key]?.toString()}
+        placeholder={title}
+        onChange={(_, data) => {
+          const value = Number(data.value);
+          update(key, data.value === '' || isNaN(value) ? '' : value);
+        }}
+        onBlur={() => update(key, options[key] ?? '', true)}
+      />
+    </CommonOptions>
+  );
+  return <>
+    {animation('enterAnimation', t`选择进入动画文件`)}
+    {animation('exitAnimation', t`选择退出动画文件`)}
+    {input('duration', t`过渡时间（单位为毫秒）`)}
+    {input('enterDuration', t`入场时长（单位为毫秒）`)}
+    {input('exitDuration', t`退场时长（单位为毫秒）`)}
+    {'ease' in options && <CommonOptions title={t`缓动类型`}><WheelDropdown
+      options={easeOptions}
+      value={String(options.ease ?? '')}
+      onValueChange={(value) => update('ease', value?.toString() ?? '', true)}
+    /></CommonOptions>}
+    {'blendMode' in options && <CommonOptions title={t`混合模式`}><WheelDropdown
+      options={blendModeOptions}
+      value={String(options.blendMode ?? '')}
+      onValueChange={(value) => update('blendMode', value?.toString() ?? '', true)}
+    /></CommonOptions>}
+  </>;
+}
diff --git a/packages/origine2/src/pages/editor/TransformableBox/TransformableBox.tsx b/packages/origine2/src/pages/editor/TransformableBox/TransformableBox.tsx
index a9f63ca0e..a113f6d15 100644
--- a/packages/origine2/src/pages/editor/TransformableBox/TransformableBox.tsx
+++ b/packages/origine2/src/pages/editor/TransformableBox/TransformableBox.tsx
@@ -1,33 +1,63 @@
-import React, { useRef, useState, useEffect, MutableRefObject } from 'react';
+import React, { useRef, useState, useEffect, useCallback } from 'react';
 import Moveable from 'react-moveable';
 import { eventBus } from '@/utils/eventBus';
 import { api } from '@/api';
 import {
   calculateScaledImageSize,
   convertPreviewToControl,
-  convertControlToPreview,
   radiansToDegrees,
-  degreesToRadians,
   convertCommandPathToFilePath,
   getLive2dSize,
 } from './baseUtils';
-import {
-  parseFigureCommand,
-  updateFrameState,
-  // parseSetTransformCommand,
-  GetImgPathAndDirection,
-} from './dragStartUtils';
-import { syncCommandToFile, generateMergeTransform } from './dragEndUtils';
+import { parseFigureCommand, GetImgPathAndDirection } from './dragStartUtils';
+import { getFigureTransformFromFrameInfo } from './dragEndUtils';
 import { ISentence } from 'webgal-parser/src/interface/sceneInterface';
+import { useValue } from '@/hooks/useValue';
+import { ToXOffset } from './baseUtils';
+import useEditorStore from '@/store/useEditorStore';
 
 interface TransformableBoxProps {
-  parents?: MutableRefObject<HTMLElement | null> | null;
-  onChange?: (state: { x: number; y: number; width: number; height: number; rotation: number }) => void;
+  parent: HTMLElement;
+  sentenceInfo: {
+    scenePath: string;
+    lineNumber: number;
+    lineContent: string;
+    lineSentence: ISentence;
+    transform: string;
+  };
+  onSupportChange?: (supported: boolean) => void;
+  onDragging?: (transform: {
+    position?: {
+      x?: number;
+      y?: number;
+    };
+    scale?: {
+      x?: number;
+      y?: number;
+    };
+    rotation?: number;
+  }) => void;
+  onDragEnd?: () => void;
 }
 
-const TransformableBox: React.FC<TransformableBoxProps> = ({ parents = null, onChange }) => {
-  // 组件状态
-  const [frame, setFrame] = useState({
+const TransformableBox: React.FC<TransformableBoxProps> = ({
+  parent,
+  sentenceInfo,
+  onSupportChange,
+  onDragging,
+  onDragEnd,
+}) => {
+  const moveableRef = useRef<Moveable>(null);
+  // 拖拽框状态
+  const frameState = useValue({
+    translate: [0, 0] as [number, number],
+    rotate: 0,
+    scale: [1, 1] as [number, number],
+    width: 200,
+    height: 200,
+  });
+  // 临时状态
+  const tempState = useValue({
     translate: [0, 0] as [number, number],
     rotate: 0,
     scale: [1, 1] as [number, number],
@@ -36,262 +66,277 @@ const TransformableBox: React.FC<TransformableBoxProps> = ({ parents = null, onC
   });
   const targetRef = useRef<HTMLDivElement | null>(null);
   const [keepRatio, setKeepRatio] = useState(true); // 是否保持宽高比
-  const [isDisplay, setIsDisplay] = useState(false); // 控制框是否显示
+  const [isReady, setIsReady] = useState(false);
   const [remountKey, setRemountKey] = useState(0); // 用于强制重新挂载 Moveable,一个刷新的作用。
-  const commandContextRef = useRef<{
-    targetPath: string;
-    lineNumber: number;
-    lineContent: string;
-    lineSentence: ISentence | null;
-    direction: string;
+  const lastParentSize = useRef<{ width: number; height: number } | null>(null); // 记录这个，当父元素宽度变化时使用
+  const isWindowAdjustment = useEditorStore.use.isWindowAdjustment();
+  const infoRef = useRef<{
+    sentence: { scenePath: string; lineNumber: number; lineContent: string; lineSentence: ISentence | null };
+    transformObj: {
+      position?: { x?: number; y?: number };
+      rotation?: number;
+      scale?: { x?: number; y?: number };
+    };
+    figure: { fileName: string; type: string; direction: string; width: number; height: number };
   } | null>(null);
-  const lastParentSize = useRef<{ width: number; height: number } | null>(null);
+  // 计算出拖拽框的位置并更新
+  const updateFrame = useCallback(() => {
+    const position = infoRef.current?.transformObj.position
+      ? convertPreviewToControl({
+        x: infoRef.current.transformObj.position.x ?? 0,
+        y: infoRef.current.transformObj.position.y ?? 0,
+      }, parent)
+      : { x: 0, y: 0 };
+
+    const scaledSize = calculateScaledImageSize(
+      infoRef.current?.figure.width ?? 0,
+      infoRef.current?.figure.height ?? 0,
+    );
+    const size = convertPreviewToControl({ x: scaledSize.width, y: scaledSize.height }, parent);
+
+    frameState.set({
+      ...frameState.value,
+      translate: [
+        position.x + ToXOffset(infoRef.current!.figure.direction ?? '', parent, size.x ?? frameState.value.width),
+        position.y,
+      ],
+      scale: [infoRef.current!.transformObj.scale?.x ?? 1, infoRef.current!.transformObj.scale?.y ?? 1],
+      rotate: radiansToDegrees(infoRef.current!.transformObj.rotation ?? 0),
+      width: size.x,
+      height: size.y,
+    });
+    tempState.set(frameState.value);
+  }, []);
 
-  // 监听 点击事件
+  // 信息录入与初始位置设置
   useEffect(() => {
-    function handlePixiSyncCommand(event: {
-      targetPath: string;
-      lineNumber: number;
-      lineContent: string;
-      lineSentence: ISentence | null;
-    }) {
-      if (event.lineContent.startsWith('changeFigure') && !/changeFigure:\s*none\b/.test(event.lineContent)) {
-        ChangeFigure(event);
-      } else if (event.lineContent.startsWith('setTransform')) {
-        SetTransform(event);
-      } else {
-        setIsDisplay(false);
-        return;
-      }
+    let transformObj;
+    try {
+      transformObj = JSON.parse(sentenceInfo.transform || '{}');
+      if (!transformObj || typeof transformObj !== 'object' || Array.isArray(transformObj)) throw new Error();
+    } catch {
+      onSupportChange?.(false);
+      return;
     }
-    eventBus.on('editor:pixi-sync-command', handlePixiSyncCommand);
-    return () => {
-      eventBus.off('editor:pixi-sync-command', handlePixiSyncCommand);
+    infoRef.current = {
+      sentence: sentenceInfo,
+      transformObj,
+      figure: {
+        fileName: '',
+        type: '',
+        direction: '',
+        width: 0,
+        height: 0,
+      },
     };
+    getFileNameAndDirection(sentenceInfo)
+      .then(({ fileName, direction, directory }) => {
+        return getSize(directory, fileName, sentenceInfo.scenePath).then(([width, height]) => {
+          infoRef.current!.figure = {
+            fileName,
+            type: fileName.endsWith('.json') ? 'json' : 'image',
+            direction,
+            width,
+            height,
+          };
+          updateFrame();
+          setIsReady(true);
+          onSupportChange?.(true);
+        });
+      })
+      .catch(() => {
+        onSupportChange?.(false);
+      });
   }, []);
-  // 主要逻辑
-  const ChangeFigure = (event: {
-    targetPath: string;
-    lineNumber: number;
-    lineContent: string;
-    lineSentence: ISentence | null;
-  }) => {
-    let fileName = event.lineSentence?.content || '';
-    if (fileName === 'none' || fileName === '') {
-      return;
+  // 刷新
+  const refresh = useCallback(() => {
+    if (moveableRef.current) {
+      moveableRef.current.updateRect();
     }
+  }, []);
 
-    if (!fileName.endsWith('.json')) {
-      const filePath = convertCommandPathToFilePath(event.lineSentence!.content, event.targetPath) || ''; // 提取图片路径
-      api.assetsControllerGetImageDimensions(filePath).then((res) => {
-        const scaledSize = calculateScaledImageSize(res.data.width, res.data.height); // 为了适配游戏引擎里面原本的逻辑，让图片能够完整地被容纳。
-        const size = convertPreviewToControl({ x: scaledSize.width, y: scaledSize.height }, parents);
-        const { direction, transformObj } = parseFigureCommand(event.lineContent);
-        commandContextRef.current = { ...event, direction };
-        setIsDisplay(true);
-        updateFrame(direction, transformObj, size.x, size.y); // !!!注意，这里不管高和宽怎么变都不影响最终的变换结果，因为最终影响图形高宽的元素是缩放。
-        setRemountKey((prevKey) => prevKey + 1); // 强制重新挂载 Moveable 以更新位置
-      });
-    } else {
-      getLive2dSize().then(({ width, height }) => {
-        const scaledSize = { width, height }; // 为了适配游戏引擎里面原本的逻辑，让图片能够完整地被容纳。
-        const size = convertPreviewToControl({ x: scaledSize.width, y: scaledSize.height }, parents);
-        const { direction, transformObj } = parseFigureCommand(event.lineContent);
-        commandContextRef.current = { ...event, direction };
-        setIsDisplay(true);
-        updateFrame(direction, transformObj, size.x, size.y); // !!!注意，这里不管高和宽怎么变都不影响最终的变换结果，因为最终影响图形高宽的元素是缩放。
-        setRemountKey((prevKey) => prevKey + 1); // 强制重新挂载 Moveable 以更新位置
-      });
+  useEffect(() => {
+    if (isWindowAdjustment) {
+      updateFrame();
+      setRemountKey((prev) => prev + 1); // 强制重新挂载 Moveable 以适应新的窗口调整
     }
-  };
+  }, [isWindowAdjustment]);
 
-  const SetTransform = (event: {
-    targetPath: string;
-    lineNumber: number;
-    lineContent: string;
-    lineSentence: ISentence | null;
-  }) => {
-    if (!event.lineSentence) {
-      return;
-    }
-    let transformObj: any = {};
-    try {
-      transformObj = JSON.parse(event.lineSentence.content === '' ? '{}' : event.lineSentence.content);
-    } catch (e) {
-      console.error('Failed to parse setTransform content:', event.lineSentence.content, e);
-      return;
-    }
-    const target = event.lineSentence.args.find((arg) => arg.key === 'target')?.value;
-    GetImgPathAndDirection(target as string, event.targetPath).then(({ imgPath, direction }) => {
-      if (imgPath !== '' && !imgPath.endsWith('.json')) {
-        api.assetsControllerGetImageDimensions(imgPath).then((imgRes) => {
-          const scaledSize = calculateScaledImageSize(imgRes.data.width, imgRes.data.height);
-          const size = convertPreviewToControl({ x: scaledSize.width, y: scaledSize.height }, parents);
-          commandContextRef.current = { ...event, direction };
-          setIsDisplay(true);
-          updateFrame(direction, transformObj, size.x, size.y);
-          setRemountKey((prevKey) => prevKey + 1); // 强制重新挂载 Moveable 以更新位置
-        });
-      } else if (imgPath !== '' && imgPath.endsWith('.json')) {
-        getLive2dSize().then(({ width, height }) => {
-          const scaledSize = { width, height };
-          const size = convertPreviewToControl({ x: scaledSize.width, y: scaledSize.height }, parents);
-          commandContextRef.current = { ...event, direction };
-          setIsDisplay(true);
-          updateFrame(direction, transformObj, size.x, size.y);
-          setRemountKey((prevKey) => prevKey + 1); // 强制重新挂载 Moveable 以更新位置
-        });
+  // 拖拽框移动
+  useEffect(() => {
+    const handleSyncDragger = (transform: {
+      x: number;
+      y: number;
+      scaleX: number;
+      scaleY: number;
+      rotation: number;
+    }) => {
+      if (!infoRef.current) {
+        return;
       }
-    });
-  };
+      infoRef.current.transformObj = {
+        position: {
+          x: transform.x,
+          y: transform.y,
+        },
+        scale: {
+          x: transform.scaleX,
+          y: transform.scaleY,
+        },
+        rotation: transform.rotation,
+      };
+      updateFrame();
+      refresh();
+    };
+    eventBus.on('editor:sync-dragger', handleSyncDragger);
+    return () => {
+      eventBus.off('editor:sync-dragger', handleSyncDragger);
+    };
+  }, []);
 
   // 监听父元素宽度变化，按比例自动刷新
   useEffect(() => {
-    if (!parents?.current || !isDisplay) return;
-    const parentEl = parents.current;
     const resizeObserver = new ResizeObserver(() => {
       const prev = lastParentSize.current;
-      const newSize = { width: parentEl.clientWidth, height: parentEl.clientHeight };
+      const newSize = { width: parent.clientWidth, height: parent.clientHeight };
 
       if (prev && prev.width > 0 && prev.height > 0) {
         const scaleX = newSize.width / prev.width;
         const scaleY = newSize.height / prev.height;
         // 按比例更新 frame 状态，包括位置和尺寸
-        setFrame((f) => ({
-          ...f,
-          translate: [f.translate[0] * scaleX, f.translate[1] * scaleY],
-          width: f.width * scaleX,
-          height: f.height * scaleY,
-        }));
-        setRemountKey((k) => k + 1); // 强制刷新 Moveable
+        frameState.set({
+          ...frameState.value,
+          translate: [frameState.value.translate[0] * scaleX, frameState.value.translate[1] * scaleY],
+          width: frameState.value.width * scaleX,
+          height: frameState.value.height * scaleY,
+        });
+        refresh();
       }
       lastParentSize.current = newSize;
     });
 
     // 初始记录
-    lastParentSize.current = { width: parentEl.clientWidth, height: parentEl.clientHeight };
-    resizeObserver.observe(parentEl);
+    lastParentSize.current = { width: parent.clientWidth, height: parent.clientHeight };
+    resizeObserver.observe(parent);
 
     return () => resizeObserver.disconnect();
-  }, [isDisplay]);
-
-  // 将字符串解析出来的数据应用到拖拽框上
-  // eslint-disable-next-line max-params
-  function updateFrame(direction: string, transformObj: any, width?: number, height?: number) {
-    updateFrameState(direction, transformObj, width, height, parents, setFrame);
-  }
-
-  // 将当前控制框的数据转换回ChangeFigure
-  function FrameToChangeFigure(LineContent: string | undefined): string {
-    const baseCommand = LineContent?.replace(/\s*-transform=\{[\s\S]*\};?/, '').trim() || '';
-    const { direction, transformObj } = parseFigureCommand(LineContent || '');
-    const transformString = JSON.stringify(generateMergeTransform(transformObj, direction, frame, parents));
-    if (transformString) {
-      return `${baseCommand} -transform=${transformString}`;
-    }
-    return baseCommand;
-  }
+  }, []);
 
-  // 将当前控制框的数据转换回setTransform
-  function FrameToSetTransform(
-    LineContent: string | undefined,
-    direction: string,
-    lineSentence: ISentence | null | undefined,
-  ): string {
-    const tailCommand = lineSentence?.args.map(({ key, value }) => ` -${key}=${value}`).join('') || '';
-    const transformObj = JSON.parse(!lineSentence || lineSentence?.content === '' ? '{}' : lineSentence.content);
-    const mergedTransformObj = generateMergeTransform(transformObj, direction, frame, parents);
-    return 'setTransform:' + JSON.stringify(mergedTransformObj) + (tailCommand ? ` ${tailCommand}` : '');
-  }
+  if (!isReady) return null;
 
   return (
-    <div style={{ pointerEvents: isDisplay ? 'auto' : 'none' }}>
+    <div
+      style={{
+        display: isWindowAdjustment ? 'block' : 'none',
+        pointerEvents: isWindowAdjustment ? 'auto' : 'none',
+      }}
+    >
       {/* 占位的div */}
       <div
         ref={targetRef}
         style={{
-          width: `${frame.width}px`,
-          height: `${frame.height}px`,
-          transform: `translate(${frame.translate[0]}px, ${frame.translate[1]}px) rotate(${frame.rotate}deg) scale(${frame.scale[0]}, ${frame.scale[1]})`,
+          width: `${frameState.value.width}px`,
+          height: `${frameState.value.height}px`,
+          transform: `translate(${frameState.value.translate[0]}px, ${frameState.value.translate[1]}px) rotate(${frameState.value.rotate}deg) scale(${frameState.value.scale[0]}, ${frameState.value.scale[1]})`,
         }}
       >
         <div />
       </div>
-      {isDisplay && (
-        <Moveable
-          key={remountKey}
-          target={targetRef}
-          origin={false}
-          draggable={true}
-          scalable={true}
-          rotatable={true}
-          throttleDrag={0}
-          throttleScale={0}
-          throttleRotate={0}
-          keepRatio={keepRatio}
-          rotationPosition="right"
-          // 缩放开始时，根据拖动方向动态设置 keepRatio
-          onScaleStart={({ direction }) => {
-            const isCorner = Math.abs(direction[0]) === 1 && Math.abs(direction[1]) === 1;
-            setKeepRatio(isCorner);
-          }}
-          // 拖拽事件
-          onDrag={({ beforeTranslate }) => {
-            const translate = [beforeTranslate[0], beforeTranslate[1]] as [number, number];
-            setFrame((f) => ({ ...f, translate }));
-            onChange?.({
-              x: translate[0],
-              y: translate[1],
-              width: frame.width,
-              height: frame.height,
-              rotation: frame.rotate,
-            });
-          }}
-          // 缩放事件
-          onScale={({ scale, drag }) => {
-            const translate = drag.beforeTranslate as [number, number];
-            const scaleArray = [scale[0], scale[1]] as [number, number];
-            setFrame((f) => ({ ...f, scale: scaleArray, translate }));
-            const actualWidth = frame.width * scale[0];
-            const actualHeight = frame.height * scale[1];
-            onChange?.({
-              x: translate[0],
-              y: translate[1],
-              width: actualWidth,
-              height: actualHeight,
-              rotation: frame.rotate,
-            });
-          }}
-          // 旋转事件 - 同步旋转时的位置变化
-          onRotate={({ beforeRotate, drag }) => {
-            const translate = drag.beforeTranslate as [number, number];
-            setFrame((f) => ({ ...f, rotate: beforeRotate, translate }));
-            onChange?.({
-              x: translate[0],
-              y: translate[1],
-              width: frame.width,
-              height: frame.height,
-              rotation: beforeRotate,
-            });
-          }}
-          onRenderEnd={() => {
-            if (commandContextRef.current?.lineContent.startsWith('changeFigure')) {
-              syncCommandToFile(commandContextRef.current, FrameToChangeFigure(commandContextRef.current?.lineContent));
-            } else if (commandContextRef.current?.lineContent.startsWith('setTransform')) {
-              syncCommandToFile(
-                commandContextRef.current,
-                FrameToSetTransform(
-                  commandContextRef.current?.lineContent,
-                  commandContextRef.current.direction,
-                  commandContextRef.current.lineSentence,
-                ),
-              );
-            }
-          }}
-        />
-      )}
+      <Moveable
+        ref={moveableRef}
+        key={remountKey}
+        target={targetRef}
+        origin={false}
+        draggable={true}
+        scalable={true}
+        rotatable={true}
+        throttleDrag={0}
+        throttleScale={0}
+        throttleRotate={0}
+        keepRatio={keepRatio}
+        rotationPosition="right"
+        // 拖拽事件
+        onDrag={({ beforeTranslate }) => {
+          const translate = [beforeTranslate[0], beforeTranslate[1]] as [number, number];
+          tempState.set({ ...tempState.value, translate });
+          onDragging?.(
+            getFigureTransformFromFrameInfo(infoRef.current?.figure.direction ?? '', tempState.value, parent),
+          );
+        }}
+        // 缩放开始时，根据拖动方向动态设置 keepRatio
+        onScaleStart={({ direction }) => {
+          const isCorner = Math.abs(direction[0]) === 1 && Math.abs(direction[1]) === 1;
+          setKeepRatio(isCorner);
+        }}
+        onScale={({ scale, drag }) => {
+          const translate = drag.beforeTranslate as [number, number];
+          const scaleArray = [scale[0], scale[1]] as [number, number];
+          tempState.set({ ...tempState.value, scale: scaleArray, translate });
+          onDragging?.(
+            getFigureTransformFromFrameInfo(infoRef.current?.figure.direction ?? '', tempState.value, parent),
+          );
+        }}
+        // 旋转事件 - 同步旋转时的位置变化
+        onRotate={({ beforeRotation, drag }) => {
+          const translate = drag.beforeTranslate as [number, number];
+          tempState.set({ ...tempState.value, rotate: beforeRotation, translate });
+          onDragging?.(
+            getFigureTransformFromFrameInfo(infoRef.current?.figure.direction ?? '', tempState.value, parent),
+          );
+        }}
+        // 渲染结束事件
+        onRenderEnd={() => {
+          onDragEnd?.();
+        }}
+      />
     </div>
   );
 };
 
 export default TransformableBox;
+
+const getFileNameAndDirection = async (event: {
+  scenePath: string;
+  lineNumber: number;
+  lineContent: string;
+  lineSentence: ISentence;
+}) => {
+  if (event.lineContent.startsWith('changeFigure') && !/changeFigure:\s*none/.test(event.lineContent)) {
+    const fileName = event.lineSentence?.content || '';
+    const direction = parseFigureCommand(event.lineContent).direction;
+    return { fileName, direction, directory: 'figure' };
+  }
+  if (event.lineContent.startsWith('changeBg') && !/changeBg:\s*none/.test(event.lineContent)) {
+    const fileName = event.lineSentence?.content || '';
+    const direction = parseFigureCommand(event.lineContent).direction;
+    return { fileName, direction, directory: 'background' };
+  }
+  if (event.lineContent.startsWith('setTransform')) {
+    const target = event.lineSentence?.args.find((arg) => arg.key === 'target')?.value;
+    const res = await GetImgPathAndDirection(target as string, event.scenePath, event.lineNumber);
+    return res;
+  }
+  if (event.lineContent.startsWith('setTempAnimation')) {
+    const target = event.lineSentence?.args.find((arg) => arg.key === 'target')?.value;
+    const res = await GetImgPathAndDirection(target as string, event.scenePath, event.lineNumber);
+    return res;
+  }
+  return { fileName: '', direction: '', directory: '' };
+};
+
+const getSize = async (directory: string, fileName: string, scenePath: string) => {
+  if (fileName === 'none' || fileName === '') {
+    throw new Error('Empty image resource');
+  }
+  let size: [number, number];
+  if (!fileName.endsWith('.json')) {
+    const filePath = convertCommandPathToFilePath(directory, fileName, scenePath) || ''; // 提取图片路径
+    const res = await api.assetsControllerGetImageDimensions(filePath);
+    size = [res.data.width, res.data.height];
+  } else {
+    const { width, height } = await getLive2dSize();
+    size = [width, height];
+  }
+  if (size.some((value) => !Number.isFinite(value) || value <= 0)) throw new Error('Invalid image dimensions');
+  return size;
+};
diff --git a/packages/origine2/src/pages/editor/TransformableBox/baseUtils.ts b/packages/origine2/src/pages/editor/TransformableBox/baseUtils.ts
index e572846c9..a17bf10d6 100644
--- a/packages/origine2/src/pages/editor/TransformableBox/baseUtils.ts
+++ b/packages/origine2/src/pages/editor/TransformableBox/baseUtils.ts
@@ -1,5 +1,4 @@
 // 基础工具函数集合
-import { MutableRefObject } from 'react';
 import axios from 'axios';
 
 // 预览窗口的默认尺寸（游戏引擎的标准分辨率）
@@ -13,11 +12,11 @@ const previewWindow = {
  * @param parents - 父元素的 ref
  * @returns 窗口尺寸对象 { width, height }
  */
-export const getParentWindowSize = (parents?: MutableRefObject<HTMLElement | null> | null) => {
-  if (parents?.current instanceof HTMLElement) {
+export const getParentWindowSize = (parent?: HTMLElement | null) => {
+  if (parent instanceof HTMLElement) {
     return {
-      width: parents.current.clientWidth,
-      height: parents.current.clientHeight,
+      width: parent.clientWidth,
+      height: parent.clientHeight,
     };
   }
   // 如果没有父元素，使用默认预览窗口尺寸作为父窗口尺寸
@@ -27,14 +26,11 @@ export const getParentWindowSize = (parents?: MutableRefObject<HTMLElement | nul
 /**
  * 将预览窗口的像素坐标转换为操控窗口的像素坐标（保持视觉比例）
  * @param previewPixel - 预览窗口中的坐标 { x, y }
- * @param parents - 父元素的 ref
+ * @param parent - 父元素
  * @returns 操控窗口中的坐标 { x, y }
  */
-export const convertPreviewToControl = (
-  previewPixel: { x: number; y: number },
-  parents?: MutableRefObject<HTMLElement | null> | null,
-) => {
-  const parentWindow = getParentWindowSize(parents);
+export const convertPreviewToControl = (previewPixel: { x: number; y: number }, parent?: HTMLElement | null) => {
+  const parentWindow = getParentWindowSize(parent);
   return {
     x: (previewPixel.x / previewWindow.width) * parentWindow.width,
     y: (previewPixel.y / previewWindow.height) * parentWindow.height,
@@ -44,14 +40,11 @@ export const convertPreviewToControl = (
 /**
  * 将操控窗口的像素坐标转换为预览窗口的像素坐标（保持视觉比例）
  * @param parentPixel - 操控窗口中的坐标 { x, y }
- * @param parents - 父元素的 ref
+ * @param parent - 父元素
  * @returns 预览窗口中的坐标 { x, y }
  */
-export const convertControlToPreview = (
-  parentPixel: { x: number; y: number },
-  parents?: MutableRefObject<HTMLElement | null> | null,
-) => {
-  const parentWindow = getParentWindowSize(parents);
+export const convertControlToPreview = (parentPixel: { x: number; y: number }, parent?: HTMLElement | null) => {
+  const parentWindow = getParentWindowSize(parent);
   return {
     x: (parentPixel.x / parentWindow.width) * previewWindow.width,
     y: (parentPixel.y / parentWindow.height) * previewWindow.height,
@@ -99,11 +92,12 @@ export function calculateScaledImageSize(
  * 将编辑器语句中的图片路径转换为实际的文件路径
  * @param command - 命令字符串（如 "changeFigure:image.png"）
  * @param targetPath - 目标路径
+ * @param directory - 图片所在目录
  * @returns 文件路径或 null
  */
-export function convertCommandPathToFilePath(fileName: string, targetPath: string): string {
+export function convertCommandPathToFilePath(directory: string, fileName: string, targetPath: string): string {
   const gamePath = targetPath.match(/(games\/[^/]+)/)?.[1]; // 提取游戏目录路径
-  return fileName && gamePath ? `${gamePath}/game/figure/${fileName}` : '';
+  return fileName && gamePath ? `${gamePath}/game/${directory}/${fileName}` : '';
 }
 
 /**
@@ -117,18 +111,14 @@ export async function GetSceneTXT(path: string): Promise<string> {
 /**
  * 根据方向计算 X 轴偏移量（用于定位图形）
  * @param direction - 方向 ('center', 'right', 'left')
- * @param parents - 父元素的 ref
+ * @param parent - 父元素
  * @param imageWidth - 图片宽度
  * @returns X 轴偏移量
  */
-export function ToXOffset(
-  direction: string,
-  parents?: MutableRefObject<HTMLElement | null> | null,
-  imageWidth = 0,
-): number {
-  const parentWindow = getParentWindowSize(parents);
+export function ToXOffset(direction: string, parent?: HTMLElement | null, imageWidth = 0): number {
+  const parentWindow = getParentWindowSize(parent);
   let xOffset = 0;
-  if (direction === 'center') {
+  if (direction === 'center' || direction === '') {
     xOffset = parentWindow.width / 2 - imageWidth / 2;
   } else if (direction === 'right') {
     xOffset = parentWindow.width - imageWidth;
diff --git a/packages/origine2/src/pages/editor/TransformableBox/dragEndUtils.ts b/packages/origine2/src/pages/editor/TransformableBox/dragEndUtils.ts
index 3e8f861a8..3520a2f96 100644
--- a/packages/origine2/src/pages/editor/TransformableBox/dragEndUtils.ts
+++ b/packages/origine2/src/pages/editor/TransformableBox/dragEndUtils.ts
@@ -1,35 +1,32 @@
 // 鼠标松开触发相关函数
-import axios from 'axios';
-import { api } from '@/api';
-import { eventBus } from '@/utils/eventBus';
-import { MutableRefObject } from 'react';
 import { convertControlToPreview, ToXOffset, degreesToRadians } from './baseUtils';
 
 /**
  * 生成合并后的 Transform 对象
- * @param TransformObj - 原变换对象
  * @param direction - 初始位置
  * @param frame - 组件状态
- * @param parents - 父亲
+ * @param parent - 父元素
  * @returns
  */
-// eslint-disable-next-line max-params
-export function generateMergeTransform(
-  TransformObj: any,
+export function getFigureTransformFromFrameInfo(
   direction: string,
   frame: { translate: [number, number]; rotate: number; scale: [number, number]; width: number; height: number },
-  parents?: MutableRefObject<HTMLElement | null> | null,
-): any {
+  parent?: HTMLElement | null,
+): { position?: { x?: number; y?: number }; rotation?: number; scale?: { x?: number; y?: number } } {
   // 1. 构建新的 transform 对象
-  const newTransformObj: any = {};
+  const newTransformObj: {
+    position?: { x?: number; y?: number };
+    rotation?: number;
+    scale?: { x?: number; y?: number };
+  } = {};
 
   // 2. 将当前控制框的 translate（控制窗口像素）减去偏移后，转换回预览窗口的绝对坐标
   const temPosition = convertControlToPreview(
     {
-      x: frame.translate[0] - ToXOffset(direction, parents, frame.width),
+      x: frame.translate[0] - ToXOffset(direction, parent, frame.width),
       y: frame.translate[1],
     },
-    parents,
+    parent,
   );
   if (temPosition.x !== 0 || temPosition.y !== 0) {
     newTransformObj.position = {
@@ -39,67 +36,65 @@ export function generateMergeTransform(
   }
 
   // 3. 转换旋转和缩放（保持不变）
-  const rotationInRadians = Number(degreesToRadians(frame.rotate).toFixed(2));
+  const rotationInRadians = Number(degreesToRadians(frame.rotate).toFixed(3));
   if (rotationInRadians !== 0) {
     newTransformObj.rotation = rotationInRadians;
   }
   if (frame.scale[0] !== 1 || frame.scale[1] !== 1) {
     newTransformObj.scale = {
-      x: Number(frame.scale[0].toFixed(1)),
-      y: Number(frame.scale[1].toFixed(1)),
+      x: Number(frame.scale[0].toFixed(3)),
+      y: Number(frame.scale[1].toFixed(3)),
     };
   }
 
-  // 4. 合并新的 transform 对象到原有的 TransformObj
-  const mergedObj = { ...(TransformObj || {}), ...newTransformObj };
-  if (Object.keys(mergedObj).length === 0) {
-    return null;
+  if (Object.keys(newTransformObj).length === 0) {
+    return {};
   }
-  return mergedObj;
+  return newTransformObj;
 }
 
-/**
- *
- * @param commandContext - 包含 targetPath 和 lineNumber 的上下文对象
- * @param newCommand - 新的命令字符串
- * @returns
- */
-export async function syncCommandToFile(commandContext: any, newCommand: string) {
-  if (!commandContext) {
-    console.warn('No command context available for sync');
-    return;
-  }
+// /**
+//  *
+//  * @param commandContext - 包含 targetPath 和 lineNumber 的上下文对象
+//  * @param newCommand - 新的命令字符串
+//  * @returns
+//  */
+// export async function syncCommandToFile(commandContext: any, newCommand: string) {
+//   if (!commandContext) {
+//     console.warn('No command context available for sync');
+//     return;
+//   }
 
-  try {
-    // 1. 读取文件内容 - 使用 targetPath (完整路径)
-    const response = await axios.get(commandContext.targetPath);
-    const fileContent = response.data.toString();
-    const lines = fileContent.split('\n');
+//   try {
+//     // 1. 读取文件内容 - 使用 targetPath (完整路径)
+//     const response = await axios.get(commandContext.targetPath);
+//     const fileContent = response.data.toString();
+//     const lines = fileContent.split('\n');
 
-    // 2. 替换指定行 (lineNumber 是从 1 开始的,所以需要 -1)
-    const lineIndex = commandContext.lineNumber - 1;
-    if (lineIndex >= 0 && lineIndex < lines.length) {
-      lines[lineIndex] = newCommand;
-      const newFileContent = lines.join('\n');
+//     // 2. 替换指定行 (lineNumber 是从 1 开始的,所以需要 -1)
+//     const lineIndex = commandContext.lineNumber - 1;
+//     if (lineIndex >= 0 && lineIndex < lines.length) {
+//       lines[lineIndex] = newCommand;
+//       const newFileContent = lines.join('\n');
 
-      // 3. 保存文件 - 使用 targetPath (完整路径) 传给后端 API
-      await api.assetsControllerEditTextFile({
-        path: commandContext.targetPath, // ✅ 使用完整路径
-        textFile: newFileContent,
-      });
+//       // 3. 保存文件 - 使用 targetPath (完整路径) 传给后端 API
+//       await api.assetsControllerEditTextFile({
+//         path: commandContext.targetPath, // ✅ 使用完整路径
+//         textFile: newFileContent,
+//       });
 
-      // 通知其他组件文件已更新
-      eventBus.emit('editor:drag-update-scene', {
-        targetPath: commandContext.targetPath,
-        lineNumber: commandContext.lineNumber,
-        newCommand: newCommand,
-      });
+//       // 通知其他组件文件已更新
+//       eventBus.emit('editor:drag-update-scene', {
+//         targetPath: commandContext.targetPath,
+//         lineNumber: commandContext.lineNumber,
+//         newCommand: newCommand,
+//       });
 
-      console.log('Command synced successfully:', newCommand);
-    } else {
-      console.error('Line number out of range:', commandContext.lineNumber, 'Total lines:', lines.length);
-    }
-  } catch (error) {
-    console.error('Failed to sync command to file:', error);
-  }
-}
+//       console.log('Command synced successfully:', newCommand);
+//     } else {
+//       console.error('Line number out of range:', commandContext.lineNumber, 'Total lines:', lines.length);
+//     }
+//   } catch (error) {
+//     console.error('Failed to sync command to file:', error);
+//   }
+// }
diff --git a/packages/origine2/src/pages/editor/TransformableBox/dragStartUtils.ts b/packages/origine2/src/pages/editor/TransformableBox/dragStartUtils.ts
index 53b1e9ea6..127a1ff5e 100644
--- a/packages/origine2/src/pages/editor/TransformableBox/dragStartUtils.ts
+++ b/packages/origine2/src/pages/editor/TransformableBox/dragStartUtils.ts
@@ -8,7 +8,6 @@ import {
   convertPreviewToControl,
   radiansToDegrees,
   GetSceneTXT,
-  convertCommandPathToFilePath,
 } from './baseUtils';
 import { ISentence } from 'webgal-parser/src/interface/sceneInterface';
 
@@ -66,39 +65,51 @@ export function parseFigureCommand(line: string) {
 /**
  * 根据 setTransform 寻找到对应的 changeFigure 语句
  * @param target - 目标值
- * @param targetPath - 目标文件路径
+ * @param scenePath - 场景文件路径
  * @returns changeFigure 语句
  */
-export async function SetFtoChangeF(target: string, targetPath: string): Promise<string> {
-  const sceneTXT = await GetSceneTXT(targetPath);
-  const lines = sceneTXT.split('\n');
-  for (const line of lines) {
-    const match = line.match(/-id=([^\s;]+)/);
-    if (match && match[1] === target) {
-      return line.trim();
+export async function SetFtoChangeF(target: string, scenePath: string, lineNumber: number): Promise<string> {
+  const sceneTXT = await GetSceneTXT(scenePath);
+  const lines = sceneTXT.split('\n').slice(0, lineNumber - 1).reverse();
+  const direction = target.replace('fig-', '');
+  const line = lines.find((item) => {
+    if (!item.trim().startsWith('changeFigure:')) return false;
+    if (target.startsWith('fig-')) {
+      return !/-id=/.test(item) && parseFigureCommand(item).direction === direction;
     }
-  }
-  throw new Error('未找到对应的 changeFigure 语句');
+    return item.match(/-id=([^\s;]+)/)?.[1] === target;
+  });
+  if (!line) throw new Error('未找到对应的 changeFigure 语句');
+  return line.trim();
 }
 
 /**
- * 根据 setTransform 语句获取图片路径和方位
+ * 根据目标获取素材信息和方位
  * @param target - 目标值
- * @param targetPath - 目标文件路径
- * @returns 图片路径和方位
+ * @param scenePath - 场景文件路径
+ * @param lineNumber - 行号
+ * @returns 素材信息和方位
  */
 export async function GetImgPathAndDirection(
   target: string,
-  targetPath: string,
-): Promise<{ imgPath: string; direction: string }> {
-  const ChangeF = await SetFtoChangeF(target, targetPath);
+  scenePath: string,
+  lineNumber: number,
+): Promise<{ fileName: string; directory: string; direction: string }> {
+  if (target === 'stage-main') throw new Error('舞台没有单一素材');
+  if (target === 'bg-main') {
+    const sceneTXT = await GetSceneTXT(scenePath);
+    const line = sceneTXT.split('\n').slice(0, lineNumber - 1).reverse()
+      .find((item) => item.trim().startsWith('changeBg:'));
+    if (!line) throw new Error('未找到对应的 changeBg 语句');
+    return { fileName: line.trim().replace(/^changeBg:/, '').split(' -')[0].split(';')[0].trim(), directory: 'background', direction: 'center' };
+  }
+  const ChangeF = await SetFtoChangeF(target, scenePath, lineNumber);
   const { direction } = parseFigureCommand(ChangeF);
   const fileName = ChangeF.replace(/changeFigure:/, '')
     .split(' -')[0]
     .split(';')[0]
     .trim(); // 提取文件名部分
-  const imgPath = convertCommandPathToFilePath(fileName, targetPath);
-  return { imgPath, direction };
+  return { fileName, directory: 'figure', direction };
 }
 
 /**
@@ -107,7 +118,7 @@ export async function GetImgPathAndDirection(
  * @param transformObj - 变换对象
  * @param width - 可选宽度
  * @param height - 可选高度
- * @param parents - 父元素的 ref
+ * @param parent - 父元素
  * @param setFrame - setFrame 函数
  */
 // eslint-disable-next-line max-params
@@ -116,16 +127,16 @@ export function updateFrameState(
   transformObj: any,
   width?: number,
   height?: number,
-  parents?: MutableRefObject<HTMLElement | null> | null,
+  parent?: HTMLElement | null,
   setFrame?: (updater: (prev: any) => any) => void,
 ) {
   if (!setFrame) return;
 
-  const position = transformObj?.position ? convertPreviewToControl(transformObj.position, parents) : { x: 0, y: 0 };
+  const position = transformObj?.position ? convertPreviewToControl(transformObj.position, parent) : { x: 0, y: 0 };
 
   setFrame((prev) => ({
     ...prev,
-    translate: [position.x + ToXOffset(direction, parents, width || prev.width), position.y],
+    translate: [position.x + ToXOffset(direction, parent, width || prev.width), position.y],
     scale: [transformObj?.scale?.x ?? 1, transformObj?.scale?.y ?? 1],
     rotate: radiansToDegrees(transformObj?.rotation ?? 0),
     width: width || prev.width,
diff --git a/packages/origine2/src/utils/eventBus.ts b/packages/origine2/src/utils/eventBus.ts
index 1c187dc5c..50706f14a 100644
--- a/packages/origine2/src/utils/eventBus.ts
+++ b/packages/origine2/src/utils/eventBus.ts
@@ -5,6 +5,38 @@ import type {
   PreviewReadyUpdatedPayload,
   StageSnapshotUpdatedPayload,
 } from '@webgal/editor-preview-protocol';
+import type { ISentence } from 'webgal-parser/src/interface/sceneInterface';
+
+export type EffectEditorOptionKey =
+  | 'enterAnimation'
+  | 'exitAnimation'
+  | 'duration'
+  | 'enterDuration'
+  | 'exitDuration'
+  | 'ease'
+  | 'blendMode';
+
+export interface GlobalEffectEditorPayload {
+  editorId: string;
+  title: string;
+  json: string;
+  sentence: ISentence;
+  index: number;
+  targetPath: string;
+  tip?: string;
+  options?: Partial<Record<EffectEditorOptionKey, string | number>>;
+}
+
+export type GlobalEffectEditorEvent =
+  | { editorId: string; action: 'change'; value: string }
+  | { editorId: string; action: 'preview'; value: any }
+  | {
+    editorId: string;
+    action: 'option';
+    key: EffectEditorOptionKey;
+    value: string | number;
+    submit?: boolean;
+  };
 
 // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
 type IframeEvents = {
@@ -21,14 +53,17 @@ type EditorEvents = {
     bottomBarChildren?: ReactNode;
     width?: number;
   };
+  'editor:open-global-effect-editor': GlobalEffectEditorPayload;
+  'editor:global-effect-editor-event': GlobalEffectEditorEvent;
   'editor:pixi-sync-command': {
     targetPath: string;
     lineNumber: number;
     lineContent: string;
-    lineSentence: import('webgal-parser/src/interface/sceneInterface').ISentence | null;
+    lineSentence: ISentence | null;
   };
   'editor:sync-current-line': null;
   'editor:drag-update-scene': { targetPath: string; lineNumber: number; newCommand: string };
+  'editor:sync-dragger': { x: number; y: number; scaleX: number; scaleY: number; rotation: number };
 };
 
 interface EditorPreviewEvents {
@@ -37,9 +72,6 @@ interface EditorPreviewEvents {
   'editor-preview:fast-preview-timeout': { payload: FastPreviewTimeoutPayload };
 }
 
-type Events = Record<PropertyKey, unknown> &
-  IframeEvents &
-  EditorEvents &
-  EditorPreviewEvents;
+type Events = Record<PropertyKey, unknown> & IframeEvents & EditorEvents & EditorPreviewEvents;
 
 export const eventBus = mitt<Events>();
diff --git a/packages/terre2/src/Modules/assets/assets.service.ts b/packages/terre2/src/Modules/assets/assets.service.ts
index 6c4571b4c..34d958a90 100644
--- a/packages/terre2/src/Modules/assets/assets.service.ts
+++ b/packages/terre2/src/Modules/assets/assets.service.ts
@@ -1,4 +1,4 @@
-import { Injectable } from '@nestjs/common';
+import { BadRequestException, Injectable } from '@nestjs/common';
 import sizeOf from 'image-size';
 import { readFile } from 'fs/promises';
 import { WebgalFsService } from '../webgal-fs/webgal-fs.service';
@@ -26,8 +26,8 @@ export class AssetsService {
         height: dimensions.height,
         type: dimensions.type,
       };
-    } catch (error) {
-      throw new Error(`Failed to get image dimensions: ${error.message}`);
+    } catch {
+      throw new BadRequestException('Unsupported image resource');
     }
   }
 }