diff --git a/Cunkebao/src/components/EmojiSeclection/EmojiPicker.css b/Cunkebao/src/components/EmojiSeclection/EmojiPicker.css index def7ee82..cd70ffe3 100644 --- a/Cunkebao/src/components/EmojiSeclection/EmojiPicker.css +++ b/Cunkebao/src/components/EmojiSeclection/EmojiPicker.css @@ -7,16 +7,15 @@ /* 默认触发器按钮 */ .emoji-picker-trigger { background: none; - border: 1px solid #e0e0e0; - border-radius: 6px; - padding: 8px 12px; - font-size: 18px; + font-size: 16px; + padding: 5px; cursor: pointer; transition: all 0.2s ease; + border-radius: 5px; } .emoji-picker-trigger:hover { - background-color: #f5f5f5; + background-color: #e9e9e9; border-color: #d0d0d0; } @@ -130,7 +129,7 @@ .emoji-picker-panel { width: 280px; } - + .emoji-grid { grid-template-columns: repeat(7, 1fr); } @@ -143,26 +142,26 @@ border-color: #4a5568; color: white; } - + .emoji-categories { background-color: #1a202c; border-bottom-color: #4a5568; } - + .category-btn:hover { background-color: #4a5568; } - + .emoji-item:hover { background-color: #4a5568; } - + .emoji-picker-trigger { border-color: #4a5568; color: white; } - + .emoji-picker-trigger:hover { background-color: #4a5568; } -} \ No newline at end of file +} diff --git a/Cunkebao/src/components/EmojiSeclection/EmojiPicker.tsx b/Cunkebao/src/components/EmojiSeclection/EmojiPicker.tsx index 446d0d2d..6b5f4932 100644 --- a/Cunkebao/src/components/EmojiSeclection/EmojiPicker.tsx +++ b/Cunkebao/src/components/EmojiSeclection/EmojiPicker.tsx @@ -1,10 +1,5 @@ import React, { useState, useRef, useEffect } from "react"; -import { - EmojiCategory, - EmojiInfo, - getAllEmojis, - getEmojisByCategory, -} from "./wechatEmoji"; +import { EmojiCategory, EmojiInfo, getEmojisByCategory } from "./wechatEmoji"; import "./EmojiPicker.css"; interface EmojiPickerProps { @@ -63,7 +58,7 @@ const EmojiPicker: React.FC = ({ }; // 默认触发器 - const defaultTrigger = ; + const defaultTrigger = 😊; return (
diff --git a/Cunkebao/src/components/EmojiSeclection/EmojiPickerDemo.tsx b/Cunkebao/src/components/EmojiSeclection/EmojiPickerDemo.tsx deleted file mode 100644 index 47311513..00000000 --- a/Cunkebao/src/components/EmojiSeclection/EmojiPickerDemo.tsx +++ /dev/null @@ -1,127 +0,0 @@ -import React, { useState } from "react"; -import EmojiPicker from "./EmojiPicker"; -import { EmojiInfo } from "./wechatEmoji"; - -const EmojiPickerDemo: React.FC = () => { - const [selectedEmojis, setSelectedEmojis] = useState([]); - const [message, setMessage] = useState(""); - - // 处理表情选择 - const handleEmojiSelect = (emoji: EmojiInfo) => { - setSelectedEmojis(prev => [...prev, emoji]); - // 模拟发送表情 - console.log("发送表情:", emoji.name); - alert(`发送了表情: ${emoji.name}`); - }; - - // 清空选择的表情 - const clearEmojis = () => { - setSelectedEmojis([]); - }; - - return ( -
-

表情选择器演示

- - {/* 输入区域 */} -
-