feat(web): emoji picker

Plain system-emoji grid (README §3.3's mockup itself has no custom emoji asset list, just gray placeholder tiles captioned "use system emoji or a branded pack" -- matches the old app's own reasoning, no WeChat/QQ-style sticker art available). Recent-emoji tab persists via localStorage, capped at 30, same as the old app's send-message.jsx. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-09-08 02:45:55 +08:00
parent 59d1033a92
commit aa3e464b35
2 changed files with 94 additions and 2 deletions
@@ -0,0 +1,74 @@
+import { useState } from 'react';
+
+// README §3.3: "表情图位（使用系统 Emoji 或品牌表情包）" -- the design mockup itself has no
+// specific emoji asset list, just gray placeholder tiles captioned "use system emoji or a branded
+// pack." This is a plain Unicode emoji grid (no custom art), same call the old app made (per its own
+// comment: no WeChat/QQ-style sticker assets available, system emoji is the fallback).
+const EMOJI = [
+  '😀', '😁', '😂', '🤣', '😊', '😍', '😘', '😜', '🤔', '😐', '😴', '😭', '😡', '🥳', '😱', '🤯', '🥰', '😇', '🙃', '😉',
+  '👍', '👎', '👏', '🙏', '💪', '🤝', '✌️', '👌', '🤞', '👋', '❤️', '💔', '💯', '🔥', '✨', '🎉', '🎂', '☕', '🍺', '🌹',
+];
+
+interface EmojiPanelProps {
+  onPick: (emoji: string) => void;
+}
+
+export function EmojiPanel({ onPick }: EmojiPanelProps) {
+  const [tab, setTab] = useState<'recent' | 'all'>('all');
+  const recent = (() => {
+    try {
+      return JSON.parse(localStorage.getItem('im-recent-emoji') || '[]') as string[];
+    } catch {
+      return [];
+    }
+  })();
+
+  const pick = (emoji: string) => {
+    const next = [emoji, ...recent.filter((e) => e !== emoji)].slice(0, 30);
+    try {
+      localStorage.setItem('im-recent-emoji', JSON.stringify(next));
+    } catch {
+      /* storage unavailable -- recents just won't persist */
+    }
+    onPick(emoji);
+  };
+
+  const list = tab === 'recent' ? recent : EMOJI;
+
+  return (
+    <div className="w-[320px] rounded-xl border border-border-panel bg-white p-2 shadow-menu">
+      <div className="mb-1 flex gap-1 px-1">
+        <button
+          type="button"
+          onClick={() => setTab('recent')}
+          className={`rounded-lg px-2.5 py-1 text-xs ${tab === 'recent' ? 'bg-accent-soft-bg text-accent' : 'text-text-tertiary-2'}`}
+        >
+          最近
+        </button>
+        <button
+          type="button"
+          onClick={() => setTab('all')}
+          className={`rounded-lg px-2.5 py-1 text-xs ${tab === 'all' ? 'bg-accent-soft-bg text-accent' : 'text-text-tertiary-2'}`}
+        >
+          表情
+        </button>
+      </div>
+      {list.length === 0 ? (
+        <div className="py-6 text-center text-xs text-text-tertiary-4">暂无最近使用</div>
+      ) : (
+        <div className="grid grid-cols-8 gap-1">
+          {list.map((emoji, i) => (
+            <button
+              key={`${emoji}-${i}`}
+              type="button"
+              onClick={() => pick(emoji)}
+              className="grid h-9 w-9 place-items-center rounded-lg text-xl hover:bg-surface-rail"
+            >
+              {emoji}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}