im-ui-mobile 0.1.0 → 0.1.2

package/components/im-emoji-picker/im-emoji-picker.vue

@@ -0,0 +1,1143 @@
+<template>
+    <view class="im-emoji-picker" :class="[
+        `im-emoji-picker--${theme}`,
+        `im-emoji-picker--${size}`,
+        {
+            'im-emoji-picker--visible': visible,
+            'im-emoji-picker--recent': showRecent,
+            'im-emoji-picker--search': enableSearch
+        }
+    ]" :style="pickerStyle">
+        <!-- 搜索框 -->
+        <view v-if="enableSearch" class="im-emoji-picker__search">
+            <view class="im-emoji-picker__search-box">
+                <im-icon name="search" :size="searchIconSize" :color="searchIconColor" />
+                <input class="im-emoji-picker__search-input" v-model="searchKeyword" :placeholder="searchPlaceholder"
+                    :placeholder-style="placeholderStyle" :focus="autoFocus" @input="handleSearch"
+                    @confirm="handleSearchConfirm" />
+                <view v-if="searchKeyword" class="im-emoji-picker__search-clear" @click="clearSearch">
+                    <im-icon name="close" :size="16" :color="searchIconColor" />
+                </view>
+            </view>
+        </view>
+
+        <!-- 分类标签 -->
+        <view v-if="showTabs && !isSearching" class="im-emoji-picker__tabs">
+            <scroll-view class="im-emoji-picker__tabs-scroll" scroll-x :show-scrollbar="false">
+                <view class="im-emoji-picker__tabs-list">
+                    <!-- 最近使用 -->
+                    <view v-if="showRecent" class="im-emoji-picker__tab"
+                        :class="{ 'im-emoji-picker__tab--active': activeTab === 'recent' }"
+                        @click="switchTab('recent')">
+                        <im-icon name="time" :size="tabIconSize" />
+                        <text v-if="showTabText" class="im-emoji-picker__tab-text">最近</text>
+                    </view>
+
+                    <!-- 表情分类 -->
+                    <view v-for="category in filteredCategories" :key="category.id" class="im-emoji-picker__tab"
+                        :class="{ 'im-emoji-picker__tab--active': activeTab === category.id }"
+                        @click="switchTab(category.id)">
+                        <text class="im-emoji-picker__tab-emoji">{{ category.icon }}</text>
+                        <text v-if="showTabText" class="im-emoji-picker__tab-text">{{ category.name }}</text>
+                    </view>
+                </view>
+            </scroll-view>
+        </view>
+
+        <!-- 表情列表 -->
+        <scroll-view class="im-emoji-picker__content" scroll-y :scroll-into-view="scrollToId"
+            :scroll-with-animation="true" :show-scrollbar="showScrollbar" @scroll="handleScroll">
+            <!-- 搜索结果显示 -->
+            <template v-if="isSearching">
+                <view v-if="searchResults.length > 0" class="im-emoji-picker__search-results">
+                    <view class="im-emoji-picker__category">
+                        <text class="im-emoji-picker__category-title">搜索结果 ({{ searchResults.length }})</text>
+                    </view>
+                    <view class="im-emoji-picker__emoji-grid">
+                        <view v-for="emoji in searchResults" :key="emoji.key" class="im-emoji-picker__emoji-item"
+                            :class="{ 'im-emoji-picker__emoji-item--selected': isSelected(emoji) }"
+                            @click="handleEmojiClick(emoji)" @longpress="handleEmojiLongPress(emoji)">
+                            <image v-if="emoji.type === 'image'" class="im-emoji-picker__emoji-image" :src="emoji.url"
+                                mode="aspectFit" lazy-load />
+                            <text v-else class="im-emoji-picker__emoji-char">{{ emoji.char }}</text>
+
+                            <!-- 表情名称提示 -->
+                            <view v-if="showEmojiName" class="im-emoji-picker__emoji-name">
+                                <text>{{ emoji.name || emoji.key }}</text>
+                            </view>
+                        </view>
+                    </view>
+                </view>
+
+                <!-- 空状态 -->
+                <view v-else class="im-emoji-picker__empty">
+                    <im-icon name="emoji" :size="emptyIconSize" :color="emptyIconColor" />
+                    <text class="im-emoji-picker__empty-text">未找到相关表情</text>
+                </view>
+            </template>
+
+            <!-- 正常分类显示 -->
+            <template v-else>
+                <!-- 最近使用 -->
+                <view v-if="showRecent && recentEmojis.length > 0 && activeTab === 'recent'"
+                    class="im-emoji-picker__category">
+                    <view class="im-emoji-picker__category-header">
+                        <text class="im-emoji-picker__category-title">最近使用</text>
+                        <view v-if="showRecentClear" class="im-emoji-picker__category-action"
+                            @click="clearRecentEmojis">
+                            <text class="im-emoji-picker__category-action-text">清空</text>
+                        </view>
+                    </view>
+                    <view class="im-emoji-picker__emoji-grid">
+                        <view v-for="emoji in recentEmojis" :key="emoji.key" class="im-emoji-picker__emoji-item"
+                            :class="{ 'im-emoji-picker__emoji-item--selected': isSelected(emoji) }"
+                            @click="handleEmojiClick(emoji)" @longpress="handleEmojiLongPress(emoji)">
+                            <image v-if="emoji.type === 'image'" class="im-emoji-picker__emoji-image" :src="emoji.url"
+                                mode="aspectFit" lazy-load />
+                            <text v-else class="im-emoji-picker__emoji-char">{{ emoji.char }}</text>
+                        </view>
+                    </view>
+                </view>
+
+                <!-- 分类表情 -->
+                <view v-for="category in filteredCategories" :key="category.id" class="im-emoji-picker__category"
+                    :id="`category-${category.id}`" v-show="activeTab === 'all' || activeTab === category.id">
+                    <view class="im-emoji-picker__category-header">
+                        <text class="im-emoji-picker__category-title">{{ category.name }}</text>
+                        <text v-if="showCategoryCount" class="im-emoji-picker__category-count">
+                            {{ getCategoryEmojis(category.id).length }}
+                        </text>
+                    </view>
+                    <view class="im-emoji-picker__emoji-grid">
+                        <view v-for="emoji in getCategoryEmojis(category.id)" :key="emoji.key"
+                            class="im-emoji-picker__emoji-item"
+                            :class="{ 'im-emoji-picker__emoji-item--selected': isSelected(emoji) }"
+                            @click="handleEmojiClick(emoji)" @longpress="handleEmojiLongPress(emoji)">
+                            <image v-if="emoji.type === 'image'" class="im-emoji-picker__emoji-image" :src="emoji.url"
+                                mode="aspectFit" lazy-load />
+                            <text v-else class="im-emoji-picker__emoji-char">{{ emoji.char }}</text>
+
+                            <!-- 表情名称提示 -->
+                            <view v-if="showEmojiName" class="im-emoji-picker__emoji-name">
+                                <text>{{ emoji.name || emoji.key }}</text>
+                            </view>
+                        </view>
+                    </view>
+                </view>
+            </template>
+
+            <!-- 底部填充 -->
+            <view class="im-emoji-picker__footer-spacer"></view>
+        </scroll-view>
+
+        <!-- 底部操作栏 -->
+        <view v-if="showFooter" class="im-emoji-picker__footer">
+            <!-- 自定义插槽 -->
+            <slot name="footer">
+                <view class="im-emoji-picker__footer-default">
+                    <view class="im-emoji-picker__preview" v-if="selectedEmoji && showPreview">
+                        <view class="im-emoji-picker__preview-emoji">
+                            <text v-if="selectedEmoji.type === 'unicode'">{{ selectedEmoji.char }}</text>
+                            <image v-else :src="selectedEmoji.url" mode="aspectFit" />
+                        </view>
+                        <text class="im-emoji-picker__preview-name">{{ selectedEmoji.name || selectedEmoji.key }}</text>
+                    </view>
+
+                    <view class="im-emoji-picker__actions">
+                        <im-button v-if="showDeleteButton" size="small" type="default" :disabled="!selectedEmoji"
+                            @click="handleDelete">
+                            <im-icon name="delete" size="16" />
+                        </im-button>
+
+                        <im-button v-if="showSendButton" size="small" type="primary" :disabled="!selectedEmoji"
+                            @click="handleSend">
+                            发送
+                        </im-button>
+                    </view>
+                </view>
+            </slot>
+        </view>
+
+        <!-- 大表情预览 -->
+        <view v-if="showPreviewPopup && previewEmoji" class="im-emoji-picker__preview-popup" @click="closePreview">
+            <view class="im-emoji-picker__preview-content" @click.stop>
+                <view class="im-emoji-picker__preview-large">
+                    <text v-if="previewEmoji.type === 'unicode'">{{ previewEmoji.char }}</text>
+                    <image v-else :src="previewEmoji.url" mode="aspectFit" />
+                </view>
+                <text class="im-emoji-picker__preview-desc">{{ previewEmoji.name || previewEmoji.key }}</text>
+                <text class="im-emoji-picker__preview-code">{{ previewEmoji.code || previewEmoji.key }}</text>
+
+                <view class="im-emoji-picker__preview-actions">
+                    <im-button size="mini" @click="handlePreviewSelect(previewEmoji)">选择</im-button>
+                    <im-button size="mini" type="default" @click="closePreview">关闭</im-button>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, onMounted } from 'vue'
+
+// 类型定义
+interface Emoji {
+    key: string
+    char: string
+    name: string
+    category: string
+    url?: string
+    type: 'unicode' | 'image'
+    code?: string
+    keywords?: string[]
+}
+
+interface EmojiCategory {
+    id: string
+    name: string
+    icon: string
+    order: number
+}
+
+interface Props {
+    // 显示控制
+    visible?: boolean
+    theme?: 'light' | 'dark' | 'card'
+    size?: 'small' | 'medium' | 'large'
+
+    // 数据源
+    emojis?: Emoji[]
+    categories?: EmojiCategory[]
+    recentEmojis?: Emoji[]
+
+    // 配置选项
+    showRecent?: boolean
+    showTabs?: boolean
+    showTabText?: boolean
+    showFooter?: boolean
+    showPreview?: boolean
+    showEmojiName?: boolean
+    showCategoryCount?: boolean
+    showRecentClear?: boolean
+    showDeleteButton?: boolean
+    showSendButton?: boolean
+    showScrollbar?: boolean
+
+    // 搜索功能
+    enableSearch?: boolean
+    searchPlaceholder?: string
+    searchIconSize?: number
+    searchIconColor?: string
+    autoFocus?: boolean
+
+    // 布局配置
+    columns?: number
+    emojiSize?: string | number
+    spacing?: string | number
+    borderRadius?: string | number
+
+    // 样式控制
+    height?: string | number
+    backgroundColor?: string
+    categoryColor?: string
+
+    // 交互配置
+    maxRecentCount?: number
+    allowMultiple?: boolean
+    selectedEmojis?: Emoji[]
+
+    // 空状态
+    emptyIconSize?: number
+    emptyIconColor?: string
+    emptyText?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    visible: false,
+    theme: 'light',
+    size: 'medium',
+
+    // emojis: () => getDefaultEmojis(),
+    emojis: (): Emoji[] => {
+        return [
+            // 笑脸和情感
+            { key: 'grinning', char: '😀', name: '大笑', category: 'smileys', type: 'unicode' },
+            { key: 'smiley', char: '😃', name: '微笑', category: 'smileys', type: 'unicode' },
+            { key: 'smile', char: '😄', name: '开心', category: 'smileys', type: 'unicode' },
+            { key: 'grin', char: '😁', name: '咧嘴笑', category: 'smileys', type: 'unicode' },
+            { key: 'laughing', char: '😆', name: '大笑', category: 'smileys', type: 'unicode' },
+
+            // 手势
+            { key: 'thumbsup', char: '👍', name: '点赞', category: 'gestures', type: 'unicode' },
+            { key: 'thumbsdown', char: '👎', name: '点踩', category: 'gestures', type: 'unicode' },
+            { key: 'clap', char: '👏', name: '鼓掌', category: 'gestures', type: 'unicode' },
+            { key: 'pray', char: '🙏', name: '祈祷', category: 'gestures', type: 'unicode' },
+
+            // 物品
+            { key: 'heart', char: '❤️', name: '红心', category: 'objects', type: 'unicode' },
+            { key: 'star', char: '⭐', name: '星星', category: 'objects', type: 'unicode' },
+            { key: 'fire', char: '🔥', name: '火焰', category: 'objects', type: 'unicode' },
+            { key: 'rocket', char: '🚀', name: '火箭', category: 'objects', type: 'unicode' },
+
+            // 自然
+            { key: 'sun', char: '☀️', name: '太阳', category: 'nature', type: 'unicode' },
+            { key: 'moon', char: '🌙', name: '月亮', category: 'nature', type: 'unicode' },
+            { key: 'star2', char: '🌟', name: '闪星', category: 'nature', type: 'unicode' },
+            { key: 'cloud', char: '☁️', name: '云', category: 'nature', type: 'unicode' },
+
+            // 食物
+            { key: 'pizza', char: '🍕', name: '披萨', category: 'food', type: 'unicode' },
+            { key: 'hamburger', char: '🍔', name: '汉堡', category: 'food', type: 'unicode' },
+            { key: 'coffee', char: '☕', name: '咖啡', category: 'food', type: 'unicode' },
+            { key: 'beer', char: '🍺', name: '啤酒', category: 'food', type: 'unicode' },
+
+            // 活动
+            { key: 'soccer', char: '⚽', name: '足球', category: 'activities', type: 'unicode' },
+            { key: 'basketball', char: '🏀', name: '篮球', category: 'activities', type: 'unicode' },
+            { key: 'tennis', char: '🎾', name: '网球', category: 'activities', type: 'unicode' },
+            { key: 'music', char: '🎵', name: '音乐', category: 'activities', type: 'unicode' },
+        ]
+    },
+    // categories: () => getDefaultCategories(),
+    categories: (): EmojiCategory[] => {
+        return [
+            { id: 'recent', name: '最近', icon: '🕒', order: 0 },
+            { id: 'smileys', name: '表情', icon: '😀', order: 1 },
+            { id: 'gestures', name: '手势', icon: '👋', order: 2 },
+            { id: 'objects', name: '物品', icon: '💡', order: 3 },
+            { id: 'nature', name: '自然', icon: '🌳', order: 4 },
+            { id: 'food', name: '食物', icon: '🍎', order: 5 },
+            { id: 'activities', name: '活动', icon: '⚽', order: 6 },
+            { id: 'flags', name: '旗帜', icon: '🇨🇳', order: 7 },
+        ]
+    },
+    recentEmojis: () => [],
+
+    showRecent: true,
+    showTabs: true,
+    showTabText: true,
+    showFooter: true,
+    showPreview: true,
+    showEmojiName: false,
+    showCategoryCount: false,
+    showRecentClear: true,
+    showDeleteButton: false,
+    showSendButton: false,
+    showScrollbar: false,
+
+    enableSearch: true,
+    searchPlaceholder: '搜索表情',
+    searchIconSize: 20,
+    searchIconColor: '#909399',
+    autoFocus: false,
+
+    columns: 8,
+    emojiSize: '48rpx',
+    spacing: '8rpx',
+    borderRadius: '8rpx',
+
+    height: '600rpx',
+    backgroundColor: '',
+    categoryColor: '',
+
+    maxRecentCount: 36,
+    allowMultiple: false,
+    selectedEmojis: () => [],
+
+    emptyIconSize: 48,
+    emptyIconColor: '#C0C4CC',
+    emptyText: '未找到相关表情'
+})
+
+// Emits
+const emit = defineEmits<{
+    // 基础事件
+    'update:visible': [visible: boolean]
+    'open': []
+    'close': []
+
+    // 表情事件
+    'select': [emoji: Emoji]
+    'delete': [emoji: Emoji]
+    'send': [emoji: Emoji]
+    'longpress': [emoji: Emoji]
+
+    // 搜索事件
+    'search': [keyword: string]
+    'search-clear': []
+
+    // 最近使用
+    'recent-clear': []
+
+    // 分类切换
+    'tab-change': [tabId: string]
+}>()
+
+// 响应式数据
+const activeTab = ref('recent')
+const searchKeyword = ref('')
+const scrollToId = ref('')
+const selectedEmoji = ref<Emoji | null>(null)
+const previewEmoji = ref<Emoji | null>(null)
+const showPreviewPopup = ref(false)
+const recentEmojisLocal = ref<Emoji[]>([])
+const currentScrollTop = ref(0)
+
+// 计算属性
+const isSearching = computed(() => searchKeyword.value.trim().length > 0)
+
+const filteredCategories = computed(() => {
+    return props.categories.filter(category => {
+        const emojis = getCategoryEmojis(category.id)
+        return emojis.length > 0
+    }).sort((a, b) => a.order - b.order)
+})
+
+const searchResults = computed(() => {
+    if (!searchKeyword.value.trim()) return []
+
+    const keyword = searchKeyword.value.toLowerCase().trim()
+    return props.emojis.filter(emoji => {
+        // 搜索名称
+        if (emoji.name?.toLowerCase().includes(keyword)) return true
+
+        // 搜索关键词
+        if (emoji.keywords?.some(kw => kw.toLowerCase().includes(keyword))) return true
+
+        // 搜索 key
+        if (emoji.key?.toLowerCase().includes(keyword)) return true
+
+        // 搜索 code
+        if (emoji.code?.toLowerCase().includes(keyword)) return true
+
+        return false
+    })
+})
+
+const pickerStyle = computed(() => {
+    const style: Record<string, string> = {
+        '--emoji-size': typeof props.emojiSize === 'number' ? `${props.emojiSize}px` : props.emojiSize,
+        '--spacing': typeof props.spacing === 'number' ? `${props.spacing}px` : props.spacing,
+        '--border-radius': typeof props.borderRadius === 'number' ? `${props.borderRadius}px` : props.borderRadius,
+        '--columns': props.columns.toString()
+    }
+
+    if (props.height) {
+        style.height = typeof props.height === 'number' ? `${props.height}px` : props.height
+    }
+
+    if (props.backgroundColor) {
+        style.backgroundColor = props.backgroundColor
+    }
+
+    return style
+})
+
+const placeholderStyle = computed(() => {
+    return `color: ${props.theme === 'dark' ? '#888' : '#999'}; font-size: 28rpx;`
+})
+
+const tabIconSize = computed(() => {
+    switch (props.size) {
+        case 'small': return 16
+        case 'large': return 24
+        default: return 20
+    }
+})
+
+// 方法
+const getDefaultEmojis = (): Emoji[] => {
+    // 这里可以返回默认的表情数据
+    // 实际项目中可以从外部导入
+    return [
+        // 笑脸和情感
+        { key: 'grinning', char: '😀', name: '大笑', category: 'smileys', type: 'unicode' },
+        { key: 'smiley', char: '😃', name: '微笑', category: 'smileys', type: 'unicode' },
+        { key: 'smile', char: '😄', name: '开心', category: 'smileys', type: 'unicode' },
+        { key: 'grin', char: '😁', name: '咧嘴笑', category: 'smileys', type: 'unicode' },
+        { key: 'laughing', char: '😆', name: '大笑', category: 'smileys', type: 'unicode' },
+
+        // 手势
+        { key: 'thumbsup', char: '👍', name: '点赞', category: 'gestures', type: 'unicode' },
+        { key: 'thumbsdown', char: '👎', name: '点踩', category: 'gestures', type: 'unicode' },
+        { key: 'clap', char: '👏', name: '鼓掌', category: 'gestures', type: 'unicode' },
+        { key: 'pray', char: '🙏', name: '祈祷', category: 'gestures', type: 'unicode' },
+
+        // 物品
+        { key: 'heart', char: '❤️', name: '红心', category: 'objects', type: 'unicode' },
+        { key: 'star', char: '⭐', name: '星星', category: 'objects', type: 'unicode' },
+        { key: 'fire', char: '🔥', name: '火焰', category: 'objects', type: 'unicode' },
+        { key: 'rocket', char: '🚀', name: '火箭', category: 'objects', type: 'unicode' },
+
+        // 自然
+        { key: 'sun', char: '☀️', name: '太阳', category: 'nature', type: 'unicode' },
+        { key: 'moon', char: '🌙', name: '月亮', category: 'nature', type: 'unicode' },
+        { key: 'star2', char: '🌟', name: '闪星', category: 'nature', type: 'unicode' },
+        { key: 'cloud', char: '☁️', name: '云', category: 'nature', type: 'unicode' },
+
+        // 食物
+        { key: 'pizza', char: '🍕', name: '披萨', category: 'food', type: 'unicode' },
+        { key: 'hamburger', char: '🍔', name: '汉堡', category: 'food', type: 'unicode' },
+        { key: 'coffee', char: '☕', name: '咖啡', category: 'food', type: 'unicode' },
+        { key: 'beer', char: '🍺', name: '啤酒', category: 'food', type: 'unicode' },
+
+        // 活动
+        { key: 'soccer', char: '⚽', name: '足球', category: 'activities', type: 'unicode' },
+        { key: 'basketball', char: '🏀', name: '篮球', category: 'activities', type: 'unicode' },
+        { key: 'tennis', char: '🎾', name: '网球', category: 'activities', type: 'unicode' },
+        { key: 'music', char: '🎵', name: '音乐', category: 'activities', type: 'unicode' },
+    ]
+}
+
+const getDefaultCategories = (): EmojiCategory[] => {
+    return [
+        { id: 'recent', name: '最近', icon: '🕒', order: 0 },
+        { id: 'smileys', name: '表情', icon: '😀', order: 1 },
+        { id: 'gestures', name: '手势', icon: '👋', order: 2 },
+        { id: 'objects', name: '物品', icon: '💡', order: 3 },
+        { id: 'nature', name: '自然', icon: '🌳', order: 4 },
+        { id: 'food', name: '食物', icon: '🍎', order: 5 },
+        { id: 'activities', name: '活动', icon: '⚽', order: 6 },
+        { id: 'flags', name: '旗帜', icon: '🇨🇳', order: 7 },
+    ]
+}
+
+const getCategoryEmojis = (categoryId: string): Emoji[] => {
+    return props.emojis.filter(emoji => emoji.category === categoryId)
+}
+
+const switchTab = (tabId: string) => {
+    activeTab.value = tabId
+
+    if (tabId !== 'recent') {
+        scrollToId.value = `category-${tabId}`
+    }
+
+    emit('tab-change', tabId)
+}
+
+const handleEmojiClick = (emoji: Emoji) => {
+    selectedEmoji.value = emoji
+
+    // 添加到最近使用
+    addToRecent(emoji)
+
+    // 触发选择事件
+    emit('select', emoji)
+}
+
+const handleEmojiLongPress = (emoji: Emoji) => {
+    previewEmoji.value = emoji
+    showPreviewPopup.value = true
+    emit('longpress', emoji)
+}
+
+const handlePreviewSelect = (emoji: Emoji) => {
+    handleEmojiClick(emoji)
+    closePreview()
+}
+
+const closePreview = () => {
+    showPreviewPopup.value = false
+    previewEmoji.value = null
+}
+
+const handleSearch = () => {
+    emit('search', searchKeyword.value)
+}
+
+const handleSearchConfirm = () => {
+    if (searchResults.value.length > 0) {
+        handleEmojiClick(searchResults.value[0])
+    }
+}
+
+const clearSearch = () => {
+    searchKeyword.value = ''
+    emit('search-clear')
+}
+
+const handleDelete = () => {
+    if (selectedEmoji.value) {
+        emit('delete', selectedEmoji.value)
+        selectedEmoji.value = null
+    }
+}
+
+const handleSend = () => {
+    if (selectedEmoji.value) {
+        emit('send', selectedEmoji.value)
+    }
+}
+
+const addToRecent = (emoji: Emoji) => {
+    // 移除重复项
+    const index = recentEmojisLocal.value.findIndex(item => item.key === emoji.key)
+    if (index > -1) {
+        recentEmojisLocal.value.splice(index, 1)
+    }
+
+    // 添加到开头
+    recentEmojisLocal.value.unshift({ ...emoji })
+
+    // 限制数量
+    if (recentEmojisLocal.value.length > props.maxRecentCount) {
+        recentEmojisLocal.value = recentEmojisLocal.value.slice(0, props.maxRecentCount)
+    }
+
+    // 保存到本地存储（如果需要）
+    saveRecentEmojis()
+}
+
+const clearRecentEmojis = () => {
+    recentEmojisLocal.value = []
+    emit('recent-clear')
+    // 清除本地存储
+    uni.removeStorageSync('im_emoji_recent')
+}
+
+const saveRecentEmojis = () => {
+    try {
+        const data = JSON.stringify(recentEmojisLocal.value.slice(0, props.maxRecentCount))
+        uni.setStorageSync('im_emoji_recent', data)
+    } catch (error) {
+        console.error('保存最近表情失败:', error)
+    }
+}
+
+const loadRecentEmojis = () => {
+    try {
+        const data = uni.getStorageSync('im_emoji_recent')
+        if (data) {
+            recentEmojisLocal.value = JSON.parse(data)
+        }
+    } catch (error) {
+        console.error('加载最近表情失败:', error)
+        recentEmojisLocal.value = []
+    }
+}
+
+const isSelected = (emoji: Emoji): boolean => {
+    if (props.allowMultiple) {
+        return props.selectedEmojis.some(item => item.key === emoji.key)
+    }
+    return selectedEmoji.value?.key === emoji.key
+}
+
+const handleScroll = (event: any) => {
+    currentScrollTop.value = event.detail.scrollTop
+
+    // 自动切换分类标签（如果需要）
+    if (!isSearching.value && activeTab.value !== 'all') {
+        // 可以在这里实现滚动时自动切换分类
+    }
+}
+
+const open = () => {
+    if (!props.visible) {
+        emit('update:visible', true)
+        emit('open')
+    }
+}
+
+const close = () => {
+    if (props.visible) {
+        emit('update:visible', false)
+        emit('close')
+    }
+}
+
+const insertEmoji = (emoji: Emoji) => {
+    handleEmojiClick(emoji)
+}
+
+// 初始化
+onMounted(() => {
+    loadRecentEmojis()
+})
+
+// 监听可见性变化
+watch(() => props.visible, (newVal) => {
+    if (newVal) {
+        // 打开时重置搜索
+        searchKeyword.value = ''
+    }
+})
+
+// 监听最近表情变化
+watch(() => props.recentEmojis, (newVal) => {
+    if (newVal && newVal.length > 0) {
+        recentEmojisLocal.value = [...newVal]
+    }
+}, { deep: true })
+
+// 暴露给父组件的方法
+defineExpose({
+    open,
+    close,
+    insertEmoji,
+    clearRecentEmojis,
+    getRecentEmojis: () => recentEmojisLocal.value,
+    searchEmoji: (keyword: string) => {
+        searchKeyword.value = keyword
+        return searchResults.value
+    }
+})
+</script>
+
+<style scoped lang="scss">
+.im-emoji-picker {
+    position: relative;
+    width: 100%;
+    background-color: #ffffff;
+    border-radius: 16rpx;
+    overflow: hidden;
+    box-shadow: 0 -4rpx 24rpx rgba(0, 0, 0, 0.1);
+    transition: transform 0.3s ease, opacity 0.3s ease;
+    transform: translateY(100%);
+    opacity: 0;
+
+    // 主题变体
+    &--light {
+        background-color: #ffffff;
+        color: #333333;
+    }
+
+    &--dark {
+        background-color: #1a1a1a;
+        color: #ffffff;
+    }
+
+    &--card {
+        background-color: #ffffff;
+        border: 1rpx solid #e4e7ed;
+        box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
+    }
+
+    // 尺寸变体
+    &--small {
+        .im-emoji-picker__emoji-item {
+            width: calc((100% - var(--spacing) * (var(--columns) + 1)) / var(--columns));
+            height: calc((100% - var(--spacing) * (var(--columns) + 1)) / var(--columns));
+        }
+    }
+
+    &--medium {
+        .im-emoji-picker__emoji-item {
+            width: calc((100% - var(--spacing) * (var(--columns) + 1)) / var(--columns));
+            height: calc((100% - var(--spacing) * (var(--columns) + 1)) / var(--columns));
+        }
+    }
+
+    &--large {
+        .im-emoji-picker__emoji-item {
+            width: calc((100% - var(--spacing) * (var(--columns) + 1)) / var(--columns));
+            height: calc((100% - var(--spacing) * (var(--columns) + 1)) / var(--columns));
+        }
+    }
+
+    // 可见状态
+    &--visible {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}
+
+// 搜索框
+.im-emoji-picker__search {
+    padding: 20rpx 24rpx;
+    border-bottom: 1rpx solid #f0f0f0;
+
+    .im-emoji-picker--dark & {
+        border-bottom-color: rgba(255, 255, 255, 0.1);
+    }
+}
+
+.im-emoji-picker__search-box {
+    display: flex;
+    align-items: center;
+    background-color: #f5f7fa;
+    border-radius: 20rpx;
+    padding: 0 24rpx;
+    height: 64rpx;
+
+    .im-emoji-picker--dark & {
+        background-color: rgba(255, 255, 255, 0.1);
+    }
+}
+
+.im-emoji-picker__search-input {
+    flex: 1;
+    height: 100%;
+    padding: 0 16rpx;
+    font-size: 28rpx;
+    color: inherit;
+    background-color: transparent;
+
+    &::placeholder {
+        color: #999999;
+
+        .im-emoji-picker--dark & {
+            color: #888888;
+        }
+    }
+}
+
+.im-emoji-picker__search-clear {
+    padding: 4rpx;
+    border-radius: 50%;
+    background-color: rgba(0, 0, 0, 0.1);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+
+    .im-emoji-picker--dark & {
+        background-color: rgba(255, 255, 255, 0.2);
+    }
+}
+
+// 分类标签
+.im-emoji-picker__tabs {
+    border-bottom: 1rpx solid #f0f0f0;
+
+    .im-emoji-picker--dark & {
+        border-bottom-color: rgba(255, 255, 255, 0.1);
+    }
+}
+
+.im-emoji-picker__tabs-scroll {
+    white-space: nowrap;
+}
+
+.im-emoji-picker__tabs-list {
+    display: inline-flex;
+    padding: 0 24rpx;
+}
+
+.im-emoji-picker__tab {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 16rpx 12rpx;
+    min-width: 80rpx;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    position: relative;
+
+    &:active {
+        opacity: 0.7;
+    }
+
+    &--active {
+        color: #409eff;
+
+        &::after {
+            content: '';
+            position: absolute;
+            bottom: 0;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 40rpx;
+            height: 4rpx;
+            background-color: #409eff;
+            border-radius: 2rpx;
+        }
+    }
+}
+
+.im-emoji-picker__tab-emoji {
+    font-size: 32rpx;
+    line-height: 1;
+    margin-bottom: 4rpx;
+}
+
+.im-emoji-picker__tab-text {
+    font-size: 22rpx;
+    white-space: nowrap;
+}
+
+// 内容区域
+.im-emoji-picker__content {
+    height: calc(100% - 120rpx);
+    box-sizing: border-box;
+}
+
+// 分类
+.im-emoji-picker__category {
+    padding: 24rpx 24rpx 0;
+}
+
+.im-emoji-picker__category-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 20rpx;
+}
+
+.im-emoji-picker__category-title {
+    font-size: 28rpx;
+    font-weight: 600;
+    color: inherit;
+}
+
+.im-emoji-picker__category-count {
+    font-size: 24rpx;
+    color: #909399;
+
+    .im-emoji-picker--dark & {
+        color: #888888;
+    }
+}
+
+.im-emoji-picker__category-action {
+    cursor: pointer;
+
+    &:active {
+        opacity: 0.7;
+    }
+}
+
+.im-emoji-picker__category-action-text {
+    font-size: 24rpx;
+    color: #909399;
+
+    .im-emoji-picker--dark & {
+        color: #888888;
+    }
+}
+
+// 表情网格
+.im-emoji-picker__emoji-grid {
+    display: grid;
+    grid-template-columns: repeat(var(--columns), 1fr);
+    gap: var(--spacing);
+    justify-items: center;
+}
+
+.im-emoji-picker__emoji-item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: calc((100% - var(--spacing) * (var(--columns) - 1)) / var(--columns));
+    height: 0;
+    padding-bottom: calc((100% - var(--spacing) * (var(--columns) - 1)) / var(--columns));
+    position: relative;
+    cursor: pointer;
+    border-radius: var(--border-radius);
+    transition: all 0.2s ease;
+
+    &:active {
+        background-color: rgba(0, 0, 0, 0.05);
+        transform: scale(0.95);
+
+        .im-emoji-picker--dark & {
+            background-color: rgba(255, 255, 255, 0.1);
+        }
+    }
+
+    &--selected {
+        background-color: rgba(64, 158, 255, 0.1);
+        border: 2rpx solid #409eff;
+    }
+}
+
+.im-emoji-picker__emoji-char {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: var(--emoji-size);
+    line-height: 1;
+    user-select: none;
+}
+
+.im-emoji-picker__emoji-image {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: calc(var(--emoji-size) * 1.2);
+    height: calc(var(--emoji-size) * 1.2);
+    object-fit: contain;
+}
+
+.im-emoji-picker__emoji-name {
+    position: absolute;
+    bottom: -30rpx;
+    left: 50%;
+    transform: translateX(-50%);
+    font-size: 20rpx;
+    color: #909399;
+    white-space: nowrap;
+    max-width: 120%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    .im-emoji-picker--dark & {
+        color: #888888;
+    }
+}
+
+// 搜索结果
+.im-emoji-picker__search-results {
+    padding: 24rpx;
+}
+
+// 空状态
+.im-emoji-picker__empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 80rpx 0;
+    color: #c0c4cc;
+
+    .im-emoji-picker--dark & {
+        color: #666666;
+    }
+}
+
+.im-emoji-picker__empty-text {
+    margin-top: 20rpx;
+    font-size: 28rpx;
+}
+
+// 底部填充
+.im-emoji-picker__footer-spacer {
+    height: 40rpx;
+}
+
+// 底部操作栏
+.im-emoji-picker__footer {
+    border-top: 1rpx solid #f0f0f0;
+    padding: 20rpx 24rpx;
+
+    .im-emoji-picker--dark & {
+        border-top-color: rgba(255, 255, 255, 0.1);
+    }
+}
+
+.im-emoji-picker__footer-default {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.im-emoji-picker__preview {
+    display: flex;
+    align-items: center;
+    gap: 16rpx;
+}
+
+.im-emoji-picker__preview-emoji {
+    font-size: 40rpx;
+    line-height: 1;
+
+    image {
+        width: 40rpx;
+        height: 40rpx;
+    }
+}
+
+.im-emoji-picker__preview-name {
+    font-size: 28rpx;
+    color: #606266;
+
+    .im-emoji-picker--dark & {
+        color: #cccccc;
+    }
+}
+
+.im-emoji-picker__actions {
+    display: flex;
+    gap: 16rpx;
+}
+
+// 大表情预览
+.im-emoji-picker__preview-popup {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 10000;
+}
+
+.im-emoji-picker__preview-content {
+    background-color: #ffffff;
+    border-radius: 24rpx;
+    padding: 48rpx;
+    text-align: center;
+    min-width: 300rpx;
+    max-width: 80vw;
+
+    .im-emoji-picker--dark & {
+        background-color: #2a2a2a;
+    }
+}
+
+.im-emoji-picker__preview-large {
+    font-size: 80rpx;
+    line-height: 1;
+    margin-bottom: 32rpx;
+
+    image {
+        width: 80rpx;
+        height: 80rpx;
+    }
+}
+
+.im-emoji-picker__preview-desc {
+    display: block;
+    font-size: 32rpx;
+    font-weight: 600;
+    margin-bottom: 8rpx;
+    color: inherit;
+}
+
+.im-emoji-picker__preview-code {
+    display: block;
+    font-size: 24rpx;
+    color: #909399;
+    margin-bottom: 32rpx;
+
+    .im-emoji-picker--dark & {
+        color: #888888;
+    }
+}
+
+.im-emoji-picker__preview-actions {
+    display: flex;
+    gap: 24rpx;
+    justify-content: center;
+}
+
+// 响应式调整
+@media (max-width: 768px) {
+    .im-emoji-picker {
+        --columns: 7;
+    }
+
+    .im-emoji-picker--small {
+        --columns: 6;
+    }
+
+    .im-emoji-picker--large {
+        --columns: 5;
+    }
+}
+
+// 暗色模式适配
+@media (prefers-color-scheme: dark) {
+    .im-emoji-picker--light {
+        background-color: #2a2a2a;
+        color: #ffffff;
+        box-shadow: 0 -4rpx 24rpx rgba(0, 0, 0, 0.3);
+    }
+}
+</style>