diff --git a/apps/web/src/pages/editing-planner/components/StickerPanel/components/StickerList.tsx b/apps/web/src/pages/editing-planner/components/StickerPanel/components/StickerList.tsx
new file mode 100644
index 000000000..9fc6f6dca
--- /dev/null
+++ b/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>
+  )
+}