-136
@@ -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>
|
||||
</>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user