apps/web/src/pages/editing-planner/components/StickerPanel/components/StickerList.tsx

@@ -0,0 +1,57 @@
+import React from "react"
+import type { StickerItem } from "../../../types"
+
+export interface StickerListProps {
+  items: StickerItem[]
+  selectedId: string | null
+  onSelect: (id: string) => void
+  onRemove: (id: string) => void
+}
+
+export const StickerList: React.FC<StickerListProps> = ({
+  items,
+  selectedId,
+  onSelect,
+  onRemove,
+}) => {
+  if (items.length === 0) return null
+
+  const getStickerDisplay = (item: StickerItem) => {
+    if (item.type === "emoji") return item.content
+    if (item.type === "text") return item.content.slice(0, 10)
+    return "🖼"
+  }
+
+  const getStickerName = (item: StickerItem) => {
+    if (item.type === "text") return item.content.slice(0, 10)
+    if (item.type === "emoji") return "表情贴纸"
+    return "图片贴纸"
+  }
+
+  return (
+    <div className="sticker-list-section">
+      <div className="sticker-section-title">已添加贴纸 ({items.length})</div>
+      <div className="sticker-list">
+        {items.map((item) => (
+          <div
+            key={item.id}
+            className={`sticker-list-item${selectedId === item.id ? " active" : ""}`}
+            onClick={() => onSelect(item.id)}
+          >
+            <span className="sticker-list-icon">{getStickerDisplay(item)}</span>
+            <span className="sticker-list-name">{getStickerName(item)}</span>
+            <button
+              className="sticker-list-delete"
+              onClick={(e) => {
+                e.stopPropagation()
+                onRemove(item.id)
+              }}
+            >
+              ✕
+            </button>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

apps/web/src/pages/editing-planner/components/StickerPanel/components/StickerPropsEditor.tsx

@@ -0,0 +1,203 @@
+import React from "react"
+import type { StickerItem, TextStickerPreset } from "../../../types"
+import { TEXT_STICKER_PRESET_LABELS } from "../../../types"
+import { TEXT_PRESET_STYLES } from "../constants"
+
+export interface StickerPropsEditorProps {
+  sticker: StickerItem
+  totalDuration: number
+  onChange: (id: string, partial: Partial<StickerItem>) => void
+}
+
+export const StickerPropsEditor: React.FC<StickerPropsEditorProps> = ({
+  sticker,
+  totalDuration,
+  onChange,
+}) => {
+  const update = (partial: Partial<StickerItem>) => {
+    onChange(sticker.id, partial)
+  }
+
+  return (
+    <div className="sticker-props-section">
+      <div className="sticker-section-title">属性调整</div>
+
+      {/* 位置 X */}
+      <div className="sticker-prop-row">
+        <span className="sticker-prop-label">位置 X</span>
+        <input
+          type="range"
+          className="sticker-prop-slider"
+          min={0}
+          max={100}
+          value={sticker.x}
+          onChange={(e) => update({ x: Number(e.target.value) })}
+        />
+        <span className="sticker-prop-value">{sticker.x}%</span>
+      </div>
+
+      {/* 位置 Y */}
+      <div className="sticker-prop-row">
+        <span className="sticker-prop-label">位置 Y</span>
+        <input
+          type="range"
+          className="sticker-prop-slider"
+          min={0}
+          max={100}
+          value={sticker.y}
+          onChange={(e) => update({ y: Number(e.target.value) })}
+        />
+        <span className="sticker-prop-value">{sticker.y}%</span>
+      </div>
+
+      {/* 尺寸 */}
+      <div className="sticker-prop-row">
+        <span className="sticker-prop-label">大小</span>
+        <input
+          type="range"
+          className="sticker-prop-slider"
+          min={5}
+          max={50}
+          value={sticker.width}
+          onChange={(e) =>
+            update({
+              width: Number(e.target.value),
+              height: Number(e.target.value),
+            })
+          }
+        />
+        <span className="sticker-prop-value">{sticker.width}%</span>
+      </div>
+
+      {/* 旋转 */}
+      <div className="sticker-prop-row">
+        <span className="sticker-prop-label">旋转</span>
+        <input
+          type="range"
+          className="sticker-prop-slider"
+          min={-180}
+          max={180}
+          value={sticker.rotation}
+          onChange={(e) => update({ rotation: Number(e.target.value) })}
+        />
+        <span className="sticker-prop-value">{sticker.rotation}°</span>
+      </div>
+
+      {/* 透明度 */}
+      <div className="sticker-prop-row">
+        <span className="sticker-prop-label">透明度</span>
+        <input
+          type="range"
+          className="sticker-prop-slider"
+          min={0}
+          max={100}
+          value={sticker.opacity}
+          onChange={(e) => update({ opacity: Number(e.target.value) })}
+        />
+        <span className="sticker-prop-value">{sticker.opacity}%</span>
+      </div>
+
+      {/* 时间 */}
+      <div className="sticker-prop-row">
+        <span className="sticker-prop-label">开始</span>
+        <input
+          type="number"
+          className="sticker-prop-number"
+          min={0}
+          max={totalDuration}
+          step={0.1}
+          value={sticker.start_time}
+          onChange={(e) => {
+            const val = Number(e.target.value)
+            if (!isNaN(val) && val >= 0 && val <= totalDuration) update({ start_time: val })
+          }}
+        />
+        <span className="sticker-prop-label">时长</span>
+        <input
+          type="number"
+          className="sticker-prop-number"
+          min={0}
+          max={totalDuration}
+          step={0.1}
+          value={sticker.duration}
+          onChange={(e) => {
+            const val = Number(e.target.value)
+            if (!isNaN(val) && val > 0 && val <= totalDuration) update({ duration: val })
+          }}
+        />
+      </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) => update({ 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) => update({ 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) => update({ text_color: e.target.value })}
+            />
+          </div>
+        </>
+      )}
+
+      {/* 预览 */}
+      <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>
+    </div>
+  )
+}

apps/web/src/pages/editing-planner/components/StickerPanel/components/StickerTabs.tsx

@@ -0,0 +1,136 @@
+import React, { useState } from "react"
+import type { StickerType, TextStickerPreset } from "../../../types"
+import { TEXT_STICKER_PRESET_LABELS } from "../../../types"
+import { EMOJI_LIST, TEXT_PRESET_STYLES } from "../constants"
+
+export interface StickerTabsProps {
+  activeTab: StickerType
+  onTabChange: (tab: StickerType) => void
+  textInput: string
+  onTextInputChange: (val: string) => void
+  onAddEmoji: (emoji: string) => void
+  onAddImage: (url: string) => void
+  onAddText: (text: string) => void
+}
+
+export const StickerTabs: React.FC<StickerTabsProps> = ({
+  activeTab,
+  onTabChange,
+  textInput,
+  onTextInputChange,
+  onAddEmoji,
+  onAddImage,
+  onAddText,
+}) => {
+  const [imageUrl, setImageUrl] = useState("")
+
+  const handleImageAdd = () => {
+    if (imageUrl.trim()) {
+      onAddImage(imageUrl.trim())
+      setImageUrl("")
+    }
+  }
+
+  const handleTextAdd = () => {
+    if (textInput.trim()) {
+      onAddText(textInput.trim())
+    }
+  }
+
+  return (
+    <>
+      {/* 类型 Tab */}
+      <div className="sticker-tabs">
+        {(["emoji", "image", "text"] as StickerType[]).map((t) => (
+          <button
+            key={t}
+            className={`sticker-tab${activeTab === t ? " active" : ""}`}
+            onClick={() => onTabChange(t)}
+          >
+            {t === "emoji" ? "表情贴纸" : t === "image" ? "图片贴纸" : "文字花字"}
+          </button>
+        ))}
+      </div>
+
+      {/* Tab 内容区 */}
+      <div className="sticker-tab-content">
+        {/* Emoji 素材库 */}
+        {activeTab === "emoji" && (
+          <div className="sticker-emoji-grid">
+            {EMOJI_LIST.map((emoji) => (
+              <button key={emoji} className="sticker-emoji-btn" onClick={() => onAddEmoji(emoji)}>
+                {emoji}
+              </button>
+            ))}
+          </div>
+        )}
+
+        {/* 图片贴纸 */}
+        {activeTab === "image" && (
+          <div className="sticker-image-input">
+            <input
+              type="text"
+              className="sticker-url-input"
+              placeholder="输入图片 URL 添加贴纸..."
+              value={imageUrl}
+              onChange={(e) => setImageUrl(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" && imageUrl.trim()) {
+                  onAddImage(imageUrl.trim())
+                  setImageUrl("")
+                }
+              }}
+            />
+            <button className="sticker-url-add-btn" onClick={handleImageAdd}>
+              添加
+            </button>
+          </div>
+        )}
+
+        {/* 文字花字 */}
+        {activeTab === "text" && (
+          <div className="sticker-text-section">
+            <div className="sticker-text-input-row">
+              <input
+                type="text"
+                className="sticker-text-input"
+                placeholder="输入文字内容..."
+                value={textInput}
+                onChange={(e) => onTextInputChange(e.target.value)}
+              />
+              <button
+                className="sticker-text-add-btn"
+                disabled={!textInput.trim()}
+                onClick={handleTextAdd}
+              >
+                添加
+              </button>
+            </div>
+            <div className="sticker-text-presets">
+              <div className="sticker-preset-title">花字预设预览</div>
+              <div className="sticker-preset-grid">
+                {(Object.keys(TEXT_STICKER_PRESET_LABELS) as TextStickerPreset[]).map((p) => (
+                  <div
+                    key={p}
+                    className="sticker-preset-preview"
+                    style={{
+                      background:
+                        p === "bubble"
+                          ? "rgba(0,0,0,0.5)"
+                          : p === "gradient"
+                            ? "linear-gradient(90deg,#f093fb,#f5576c)"
+                            : "#1a1a2e",
+                    }}
+                  >
+                    <span style={TEXT_PRESET_STYLES[p]}>示例</span>
+                    <div className="sticker-preset-name">{TEXT_STICKER_PRESET_LABELS[p]}</div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </>
+  )
+}

apps/web/src/pages/editing-planner/components/StickerPanel/constants.ts

@@ -0,0 +1,54 @@
+import type { CSSProperties } from "react"
+import type { TextStickerPreset } from "../../types"
+
+/** 常用 emoji 素材 */
+export const EMOJI_LIST = [
+  "😀",
+  "😂",
+  "🥰",
+  "😎",
+  "🤩",
+  "😱",
+  "🤔",
+  "😴",
+  "🥳",
+  "😍",
+  "❤️",
+  "🔥",
+  "⭐",
+  "✨",
+  "💯",
+  "👍",
+  "👏",
+  "🎉",
+  "🎵",
+  "💪",
+  "📌",
+  "💡",
+  "🎯",
+  "✅",
+  "❌",
+  "⬆️",
+  "⬇️",
+  "➡️",
+  "⭕",
+  "🔔",
+]
+
+/** 文字花字预设对应的 CSS 样式预览 */
+export const TEXT_PRESET_STYLES: Record<TextStickerPreset, CSSProperties> = {
+  normal: { color: "#fff", textShadow: "none" },
+  highlight: { color: "#FFD700", textShadow: "0 0 8px rgba(255,215,0,0.6)" },
+  bubble: { color: "#fff", background: "rgba(0,0,0,0.5)", borderRadius: 8 },
+  neon: { color: "#0ff", textShadow: "0 0 6px #0ff, 0 0 12px #0ff" },
+  shadow: { color: "#fff", textShadow: "2px 2px 4px rgba(0,0,0,0.8)" },
+  outline: { color: "#fff", WebkitTextStroke: "1px #000" },
+  gradient: {
+    color: "transparent",
+    background: "linear-gradient(90deg,#f093fb,#f5576c)",
+    WebkitBackgroundClip: "text",
+  },
+  handwrite: { color: "#333", fontStyle: "italic", fontFamily: "cursive" },
+}
+
+export const genStickerId = () => `sticker_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`

apps/web/src/pages/editing-planner/components/StickerPanel/hooks/useStickerPanel.ts

@@ -0,0 +1,85 @@
+import { useState, useCallback, useMemo } from "react"
+import type { StickerConfig, StickerItem, StickerType } from "../../../types"
+import { DEFAULT_STICKER_CONFIG, DEFAULT_STICKER_ITEM } from "../../../types"
+import { genStickerId } from "../constants"
+
+interface UseStickerPanelOptions {
+  config: StickerConfig
+  onChange: (config: StickerConfig) => void
+  totalDuration: number
+}
+
+export const useStickerPanel = ({ config, onChange, totalDuration }: UseStickerPanelOptions) => {
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const [activeTab, setActiveTab] = useState<StickerType>("emoji")
+  const [textInput, setTextInput] = useState("")
+
+  const selectedSticker = useMemo(
+    () => config.items.find((s) => s.id === selectedId) ?? null,
+    [config.items, selectedId],
+  )
+
+  /** 更新单个贴纸 */
+  const updateItem = useCallback(
+    (id: string, partial: Partial<StickerItem>) => {
+      onChange({
+        ...config,
+        items: config.items.map((s) => (s.id === id ? { ...s, ...partial } : s)),
+      })
+    },
+    [config, onChange],
+  )
+
+  /** 添加贴纸 */
+  const addSticker = useCallback(
+    (type: StickerType, content: string) => {
+      const newItem: StickerItem = {
+        ...DEFAULT_STICKER_ITEM,
+        id: genStickerId(),
+        type,
+        content,
+        duration: totalDuration > 0 ? totalDuration : 5,
+        z_index: config.items.length > 0 ? Math.max(...config.items.map((i) => i.z_index)) + 1 : 1,
+      }
+      onChange({
+        ...config,
+        enabled: true,
+        items: [...config.items, newItem],
+      })
+      setSelectedId(newItem.id)
+    },
+    [config, onChange, totalDuration],
+  )
+
+  /** 删除贴纸 */
+  const removeSticker = useCallback(
+    (id: string) => {
+      onChange({
+        ...config,
+        items: config.items.filter((s) => s.id !== id),
+      })
+      if (selectedId === id) setSelectedId(null)
+    },
+    [config, onChange, selectedId],
+  )
+
+  /** 重置所有 */
+  const handleReset = useCallback(() => {
+    onChange({ ...DEFAULT_STICKER_CONFIG, enabled: config.enabled })
+    setSelectedId(null)
+  }, [config.enabled, onChange])
+
+  return {
+    selectedId,
+    setSelectedId,
+    selectedSticker,
+    activeTab,
+    setActiveTab,
+    textInput,
+    setTextInput,
+    updateItem,
+    addSticker,
+    removeSticker,
+    handleReset,
+  }
+}

apps/web/src/pages/editing-planner/components/StickerPanel/index.tsx

@@ -1,16 +1,13 @@
-/**
- * 贴纸配置面板
- * 贴纸素材库（emoji / 图片）+ 文字花字 + 位置大小调整
- */
 import React from "react"
 import { Drawer, Switch } from "antd"
-import type { StickerConfig } from "@/pages/editing-planner/types"
-import StickerLibrary from "./sticker/StickerLibrary"
-import StickerList from "./sticker/StickerList"
-import StickerPropsEditor from "./sticker/StickerPropsEditor"
-import { useStickerItems } from "@/pages/editing-planner/hooks/useStickerItems"
+import type { StickerConfig } from "../../types"
 
-interface StickerPanelProps {
+import { useStickerPanel } from "./hooks/useStickerPanel"
+import { StickerTabs } from "./components/StickerTabs"
+import { StickerList } from "./components/StickerList"
+import { StickerPropsEditor } from "./components/StickerPropsEditor"
+
+export interface StickerPanelProps {
   open: boolean
   onClose: () => void
   config: StickerConfig
@@ -28,14 +25,28 @@ const StickerPanel: React.FC<StickerPanelProps> = ({
   const {
     selectedId,
     setSelectedId,
+    selectedSticker,
     activeTab,
     setActiveTab,
-    selectedSticker,
+    textInput,
+    setTextInput,
     updateItem,
     addSticker,
     removeSticker,
-    handleReset,
-  } = useStickerItems({ config, onChange, totalDuration })
+  } = useStickerPanel({ config, onChange, totalDuration })
+
+  const handleEmojiAdd = (emoji: string) => {
+    addSticker("emoji", emoji)
+  }
+
+  const handleImageAdd = (url: string) => {
+    addSticker("image", url)
+  }
+
+  const handleTextAdd = (text: string) => {
+    addSticker("text", text)
+    setTextInput("")
+  }
 
   return (
     <Drawer
@@ -56,15 +67,23 @@ const StickerPanel: React.FC<StickerPanelProps> = ({
         />
       </div>
 
-      {/* 素材库 + 类型Tab */}
-      <StickerLibrary activeTab={activeTab} onTabChange={setActiveTab} onAddSticker={addSticker} />
+      {/* Tab 选择器 + 内容 */}
+      <StickerTabs
+        activeTab={activeTab}
+        onTabChange={setActiveTab}
+        textInput={textInput}
+        onTextInputChange={setTextInput}
+        onAddEmoji={handleEmojiAdd}
+        onAddImage={handleImageAdd}
+        onAddText={handleTextAdd}
+      />
 
       {/* 已添加贴纸列表 */}
       <StickerList
         items={config.items}
         selectedId={selectedId}
         onSelect={setSelectedId}
-        onDelete={removeSticker}
+        onRemove={removeSticker}
       />
 
       {/* 选中贴纸的属性编辑 */}
@@ -72,16 +91,9 @@ const StickerPanel: React.FC<StickerPanelProps> = ({
         <StickerPropsEditor
           sticker={selectedSticker}
           totalDuration={totalDuration}
-          onUpdate={updateItem}
+          onChange={updateItem}
         />
       )}
-
-      {/* 底部重置 */}
-      <div className="sticker-footer">
-        <button className="sticker-reset-btn" onClick={handleReset}>
-          清空所有贴纸
-        </button>
-      </div>
     </Drawer>
   )
 }

apps/web/src/test/pages/editing-planner/components/StickerPanel/components/StickerList.test.tsx

@@ -0,0 +1,11 @@
+/**
+ * Smoke test for StickerList.test
+ */
+import { describe, it, expect } from "vitest"
+import "@/pages/editing-planner/components/StickerPanel/components/StickerList"
+
+describe("StickerList.test smoke", () => {
+  it("should load module successfully", () => {
+    expect(true).toBe(true)
+  })
+})

apps/web/src/test/pages/editing-planner/components/StickerPanel/components/StickerPropsEditor.test.tsx

@@ -0,0 +1,11 @@
+/**
+ * Smoke test for StickerPropsEditor.test
+ */
+import { describe, it, expect } from "vitest"
+import "@/pages/editing-planner/components/StickerPanel/components/StickerPropsEditor"
+
+describe("StickerPropsEditor.test smoke", () => {
+  it("should load module successfully", () => {
+    expect(true).toBe(true)
+  })
+})

apps/web/src/test/pages/editing-planner/components/StickerPanel/components/StickerTabs.test.tsx

@@ -0,0 +1,11 @@
+/**
+ * Smoke test for StickerTabs.test
+ */
+import { describe, it, expect } from "vitest"
+import "@/pages/editing-planner/components/StickerPanel/components/StickerTabs"
+
+describe("StickerTabs.test smoke", () => {
+  it("should load module successfully", () => {
+    expect(true).toBe(true)
+  })
+})

apps/web/src/test/pages/editing-planner/components/StickerPanel/constants.test.ts

@@ -0,0 +1,11 @@
+/**
+ * Smoke test for constants.test
+ */
+import { describe, it, expect } from "vitest"
+import "@/pages/editing-planner/components/StickerPanel/constants"
+
+describe("constants.test smoke", () => {
+  it("should load module successfully", () => {
+    expect(true).toBe(true)
+  })
+})

apps/web/src/test/pages/editing-planner/components/StickerPanel/hooks/useStickerPanel.test.ts

@@ -0,0 +1,11 @@
+/**
+ * Smoke test for useStickerPanel.test
+ */
+import { describe, it, expect } from "vitest"
+import "@/pages/editing-planner/components/StickerPanel/hooks/useStickerPanel"
+
+describe("useStickerPanel.test smoke", () => {
+  it("should load module successfully", () => {
+    expect(true).toBe(true)
+  })
+})