refactor(EmojiPicker): 优化表情选择器样式并移除未使用的代码

- 将默认触发器从 button 改为 span 以简化结构
- 调整触发器样式使其更紧凑
- 移除未使用的 getAllEmojis 导入
- 删除不再使用的 EmojiPickerDemo 组件

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

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<EmojiPickerProps> = ({
   };
 
   // 默认触发器
-  const defaultTrigger = <button className="emoji-picker-trigger">😊</button>;
+  const defaultTrigger = <span className="emoji-picker-trigger">😊</span>;
 
   return (
     <div className={`emoji-picker-container ${className}`} ref={pickerRef}>

Cunkebao/src/components/EmojiSeclection/EmojiPickerDemo.tsx

@@ -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<EmojiInfo[]>([]);
-  const [message, setMessage] = useState("");
-
-  // 处理表情选择
-  const handleEmojiSelect = (emoji: EmojiInfo) => {
-    setSelectedEmojis(prev => [...prev, emoji]);
-    // 模拟发送表情
-    console.log("发送表情:", emoji.name);
-    alert(`发送了表情: ${emoji.name}`);
-  };
-
-  // 清空选择的表情
-  const clearEmojis = () => {
-    setSelectedEmojis([]);
-  };
-
-  return (
-    <div style={{ padding: "20px", maxWidth: "600px", margin: "0 auto" }}>
-      <h2>表情选择器演示</h2>
-
-      {/* 输入区域 */}
-      <div style={{ marginBottom: "20px" }}>
-        <textarea
-          value={message}
-          onChange={e => setMessage(e.target.value)}
-          placeholder="输入消息..."
-          style={{
-            width: "100%",
-            height: "100px",
-            padding: "10px",
-            border: "1px solid #ddd",
-            borderRadius: "4px",
-            resize: "vertical",
-          }}
-        />
-      </div>
-
-      {/* 表情选择器 */}
-      <div style={{ marginBottom: "20px" }}>
-        <label
-          style={{ display: "block", marginBottom: "8px", fontWeight: "bold" }}
-        >
-          选择表情:
-        </label>
-        <EmojiPicker onEmojiSelect={handleEmojiSelect} />
-      </div>
-
-      {/* 已选择的表情 */}
-      {selectedEmojis.length > 0 && (
-        <div style={{ marginBottom: "20px" }}>
-          <h3>已选择的表情:</h3>
-          <div
-            style={{
-              display: "flex",
-              flexWrap: "wrap",
-              gap: "8px",
-              padding: "10px",
-              backgroundColor: "#f5f5f5",
-              borderRadius: "4px",
-            }}
-          >
-            {selectedEmojis.map((emoji, index) => (
-              <div
-                key={index}
-                style={{
-                  display: "flex",
-                  alignItems: "center",
-                  gap: "4px",
-                  padding: "4px 8px",
-                  backgroundColor: "white",
-                  borderRadius: "4px",
-                  fontSize: "12px",
-                }}
-              >
-                <img
-                  src={emoji.path}
-                  alt={emoji.name}
-                  style={{ width: "20px", height: "20px" }}
-                />
-                <span>{emoji.name}</span>
-              </div>
-            ))}
-          </div>
-          <button
-            onClick={clearEmojis}
-            style={{
-              marginTop: "10px",
-              padding: "6px 12px",
-              backgroundColor: "#dc3545",
-              color: "white",
-              border: "none",
-              borderRadius: "4px",
-              cursor: "pointer",
-            }}
-          >
-            清空
-          </button>
-        </div>
-      )}
-
-      {/* 使用说明 */}
-      <div
-        style={{
-          backgroundColor: "#e7f3ff",
-          padding: "15px",
-          borderRadius: "4px",
-          fontSize: "14px",
-        }}
-      >
-        <h4>使用说明:</h4>
-        <ul>
-          <li>点击表情按钮打开表情选择器</li>
-          <li>选择不同分类浏览表情</li>
-          <li>点击表情即可选择并&ldquo;发送&rdquo;</li>
-          <li>支持键盘和鼠标操作</li>
-        </ul>
-      </div>
-    </div>
-  );
-};
-
-export default EmojiPickerDemo;