diff --git a/apps/web/src/pages/editing-planner/components/sticker/StickerPreview.tsx b/apps/web/src/pages/editing-planner/components/sticker/StickerPreview.tsx
new file mode 100755
index 000000000..d14132b24
--- /dev/null
+++ b/apps/web/src/pages/editing-planner/components/sticker/StickerPreview.tsx
@@ -0,0 +1,39 @@
+import React from "react"
+import type { StickerItem } from "@/pages/editing-planner/types"
+import { TEXT_PRESET_STYLES } from "@/pages/editing-planner/constants/sticker"
+
+interface StickerPreviewProps {
+  sticker: StickerItem
+}
+
+export const StickerPreview: React.FC<StickerPreviewProps> = ({ sticker }) => (
+  <div className="sticker-preview-box">
+    <div
+      className="sticker-preview-item"
+      style={{
+        left: `${sticker.x}%`,
+        top: `${sticker.y}%`,
+        width: `${sticker.width}%`,
+        height: `${sticker.height}%`,
+        transform: `translate(-50%, -50%) rotate(${sticker.rotation}deg)`,
+        opacity: sticker.opacity / 100,
+        fontSize: sticker.type === "text" ? `${sticker.font_size}px` : undefined,
+        ...TEXT_PRESET_STYLES[sticker.text_preset],
+      }}
+    >
+      {sticker.type === "emoji" && sticker.content}
+      {sticker.type === "text" && sticker.content}
+      {sticker.type === "image" && (
+        <img
+          src={sticker.content}
+          alt="sticker"
+          style={{
+            width: "100%",
+            height: "100%",
+            objectFit: "contain",
+          }}
+        />
+      )}
+    </div>
+  </div>
+)
diff --git a/apps/web/src/pages/editing-planner/components/sticker/StickerPropsEditor.tsx b/apps/web/src/pages/editing-planner/components/sticker/StickerPropsEditor.tsx
old mode 100644
new mode 100755
index 4612d6476..871b401ff
--- a/apps/web/src/pages/editing-planner/components/sticker/StickerPropsEditor.tsx
+++ b/apps/web/src/pages/editing-planner/components/sticker/StickerPropsEditor.tsx
@@ -2,11 +2,9 @@
  * 选中贴纸的属性编辑器
  */
 import React from "react"
-import type { StickerItem, TextStickerPreset } from "@/pages/editing-planner/types"
-import {
-  TEXT_PRESET_STYLES,
-  TEXT_STICKER_PRESET_LABELS,
-} from "@/pages/editing-planner/constants/sticker"
+import type { StickerItem } from "@/pages/editing-planner/types"
+import { StickerPreview } from "./StickerPreview"
+import { TextStickerPropsEditor } from "./TextStickerPropsEditor"
 
 interface StickerPropsEditorProps {
   sticker: StickerItem
@@ -121,78 +119,10 @@ const StickerPropsEditor: React.FC<StickerPropsEditorProps> = ({
       </div>
 
       {/* 文字贴纸特有属性 */}
-      {sticker.type === "text" && (
-        <>
-          <div className="sticker-prop-row">
-            <span className="sticker-prop-label">花字</span>
-            <select
-              className="sticker-prop-select"
-              value={sticker.text_preset}
-              onChange={(e) =>
-                onUpdate(sticker.id, { text_preset: e.target.value as TextStickerPreset })
-              }
-            >
-              {(Object.keys(TEXT_STICKER_PRESET_LABELS) as TextStickerPreset[]).map((p) => (
-                <option key={p} value={p}>
-                  {TEXT_STICKER_PRESET_LABELS[p]}
-                </option>
-              ))}
-            </select>
-          </div>
-          <div className="sticker-prop-row">
-            <span className="sticker-prop-label">字号</span>
-            <input
-              type="range"
-              className="sticker-prop-slider"
-              min={12}
-              max={72}
-              value={sticker.font_size}
-              onChange={(e) => onUpdate(sticker.id, { font_size: Number(e.target.value) })}
-            />
-            <span className="sticker-prop-value">{sticker.font_size}px</span>
-          </div>
-          <div className="sticker-prop-row">
-            <span className="sticker-prop-label">颜色</span>
-            <input
-              type="color"
-              className="sticker-prop-color"
-              value={sticker.text_color}
-              onChange={(e) => onUpdate(sticker.id, { text_color: e.target.value })}
-            />
-          </div>
-        </>
-      )}
+      <TextStickerPropsEditor sticker={sticker} onUpdate={onUpdate} />
 
       {/* 预览 */}
-      <div className="sticker-preview-box">
-        <div
-          className="sticker-preview-item"
-          style={{
-            left: `${sticker.x}%`,
-            top: `${sticker.y}%`,
-            width: `${sticker.width}%`,
-            height: `${sticker.width}%`,
-            transform: `translate(-50%, -50%) rotate(${sticker.rotation}deg)`,
-            opacity: sticker.opacity / 100,
-            fontSize: sticker.type === "text" ? `${sticker.font_size}px` : undefined,
-            ...TEXT_PRESET_STYLES[sticker.text_preset],
-          }}
-        >
-          {sticker.type === "emoji" && sticker.content}
-          {sticker.type === "text" && sticker.content}
-          {sticker.type === "image" && (
-            <img
-              src={sticker.content}
-              alt="sticker"
-              style={{
-                width: "100%",
-                height: "100%",
-                objectFit: "contain",
-              }}
-            />
-          )}
-        </div>
-      </div>
+      <StickerPreview sticker={sticker} />
     </div>
   )
 }
diff --git a/apps/web/src/pages/editing-planner/components/sticker/TextStickerPropsEditor.tsx b/apps/web/src/pages/editing-planner/components/sticker/TextStickerPropsEditor.tsx
new file mode 100755
index 000000000..2dd8bdebe
--- /dev/null
+++ b/apps/web/src/pages/editing-planner/components/sticker/TextStickerPropsEditor.tsx
@@ -0,0 +1,57 @@
+import React from "react"
+import type { StickerItem, TextStickerPreset } from "@/pages/editing-planner/types"
+import { TEXT_STICKER_PRESET_LABELS } from "@/pages/editing-planner/constants/sticker"
+
+interface TextStickerPropsEditorProps {
+  sticker: StickerItem
+  onUpdate: (id: string, partial: Partial<StickerItem>) => void
+}
+
+export const TextStickerPropsEditor: React.FC<TextStickerPropsEditorProps> = ({
+  sticker,
+  onUpdate,
+}) => {
+  if (sticker.type !== "text") return null
+
+  return (
+    <>
+      <div className="sticker-prop-row">
+        <span className="sticker-prop-label">花字</span>
+        <select
+          className="sticker-prop-select"
+          value={sticker.text_preset}
+          onChange={(e) =>
+            onUpdate(sticker.id, { text_preset: e.target.value as TextStickerPreset })
+          }
+        >
+          {(Object.keys(TEXT_STICKER_PRESET_LABELS) as TextStickerPreset[]).map((p) => (
+            <option key={p} value={p}>
+              {TEXT_STICKER_PRESET_LABELS[p]}
+            </option>
+          ))}
+        </select>
+      </div>
+      <div className="sticker-prop-row">
+        <span className="sticker-prop-label">字号</span>
+        <input
+          type="range"
+          className="sticker-prop-slider"
+          min={12}
+          max={72}
+          value={sticker.font_size}
+          onChange={(e) => onUpdate(sticker.id, { font_size: Number(e.target.value) })}
+        />
+        <span className="sticker-prop-value">{sticker.font_size}px</span>
+      </div>
+      <div className="sticker-prop-row">
+        <span className="sticker-prop-label">颜色</span>
+        <input
+          type="color"
+          className="sticker-prop-color"
+          value={sticker.text_color}
+          onChange={(e) => onUpdate(sticker.id, { text_color: e.target.value })}
+        />
+      </div>
+    </>
+  )
+}
diff --git a/apps/web/src/test/pages/editing-planner/smoke.test.tsx b/apps/web/src/test/pages/editing-planner/smoke.test.tsx
old mode 100644
new mode 100755
index c4d3f267c..76557af8b
--- a/apps/web/src/test/pages/editing-planner/smoke.test.tsx
+++ b/apps/web/src/test/pages/editing-planner/smoke.test.tsx
@@ -61,6 +61,8 @@ import "@/pages/editing-planner/components/pip-config/LayerConfig"
 import "@/pages/editing-planner/components/sticker/StickerLibrary"
 import "@/pages/editing-planner/components/sticker/StickerList"
 import "@/pages/editing-planner/components/sticker/StickerPropsEditor"
+import "@/pages/editing-planner/components/sticker/StickerPreview"
+import "@/pages/editing-planner/components/sticker/TextStickerPropsEditor"
 import "@/pages/editing-planner/components/filter/FilterPresetGrid"
 import "@/pages/editing-planner/components/filter/FilterManualAdjust"
 import "@/pages/editing-planner/components/intro-outro/IntroOutroBlock"