From 7f40f85460d273670e49649b7c377e2c920d46a5 Mon Sep 17 00:00:00 2001
From: xiaoxia <dev@xiaoxiajianji.com>
Date: Wed, 29 Jul 2026 18:33:59 +0800
Subject: [PATCH 1/2] =?UTF-8?q?refactor(editing-planner):=20=E6=8B=86?=
 =?UTF-8?q?=E5=88=86=20StickerPropsEditor=20=E9=A2=84=E8=A7=88=E5=92=8C?=
 =?UTF-8?q?=E6=96=87=E5=AD=97=E5=B1=9E=E6=80=A7=E5=AD=90=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=EF=BC=88200=E2=86=92130=E8=A1=8C,=20-35%=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/sticker/StickerPreview.tsx     | 39 +++++++++
 .../components/sticker/StickerPropsEditor.tsx | 80 ++-----------------
 .../sticker/TextStickerPropsEditor.tsx        | 57 +++++++++++++
 .../test/pages/editing-planner/smoke.test.tsx |  2 +
 4 files changed, 103 insertions(+), 75 deletions(-)
 create mode 100755 apps/web/src/pages/editing-planner/components/sticker/StickerPreview.tsx
 mode change 100644 => 100755 apps/web/src/pages/editing-planner/components/sticker/StickerPropsEditor.tsx
 create mode 100755 apps/web/src/pages/editing-planner/components/sticker/TextStickerPropsEditor.tsx
 mode change 100644 => 100755 apps/web/src/test/pages/editing-planner/smoke.test.tsx

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..92b5ebb90
--- /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.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>
+)
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"
-- 
2.54.0


From acdb7bbea79ef1ae03d3e528afffdffe6a33eb3b Mon Sep 17 00:00:00 2001
From: xiaoxia <dev@xiaoxiajianji.com>
Date: Thu, 30 Jul 2026 00:56:35 +0800
Subject: [PATCH 2/2] =?UTF-8?q?fix:=20StickerPreview=20height=E5=B1=9E?=
 =?UTF-8?q?=E6=80=A7=E4=BD=BF=E7=94=A8sticker.height=E8=80=8C=E9=9D=9Estic?=
 =?UTF-8?q?ker.width?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/editing-planner/components/sticker/StickerPreview.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/src/pages/editing-planner/components/sticker/StickerPreview.tsx b/apps/web/src/pages/editing-planner/components/sticker/StickerPreview.tsx
index 92b5ebb90..d14132b24 100755
--- a/apps/web/src/pages/editing-planner/components/sticker/StickerPreview.tsx
+++ b/apps/web/src/pages/editing-planner/components/sticker/StickerPreview.tsx
@@ -14,7 +14,7 @@ export const StickerPreview: React.FC<StickerPreviewProps> = ({ sticker }) => (
         left: `${sticker.x}%`,
         top: `${sticker.y}%`,
         width: `${sticker.width}%`,
-        height: `${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,
-- 
2.54.0