refactor: delete StickerTabs.tsx (#1899 #1900)

This commit is contained in:
2026-09-14 20:43:58 +08:00
parent 6c12e0d847
commit dcc100d646
@@ -1,136 +0,0 @@
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>
</>
)
}