From 0f8f27d844627fc94fbc991244174a54d3e78bce Mon Sep 17 00:00:00 2001
From: xiaoxia <dev@xiaoxiajianji.com>
Date: Thu, 30 Jul 2026 09:06:10 +0800
Subject: [PATCH] =?UTF-8?q?refactor(StickerPanel):=20=E6=8F=90=E5=8F=96?=
 =?UTF-8?q?=E8=B4=B4=E7=BA=B8=E5=88=97=E8=A1=A8=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../StickerPanel/components/StickerList.tsx   | 57 +++++++++++++++++++
 1 file changed, 57 insertions(+)
 create mode 100644 apps/web/src/pages/editing-planner/components/StickerPanel/components/StickerList.tsx

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>
+  )
+}