Skip to content

C
corporate-culture-qd
Commit 7f921885 by 王立鹏
Options

Merge branch 'feature/21133-企业微信和同事吧回复同步上线亚声形象的表情包' into 'master' 

Feature/21133 企业微信和同事吧回复同步上线亚声形象的表情包

See merge request !18
parents 7c1cf367 bd1edfc9
Showing with 408 additions and 217 deletions
src/components/common/UploadEmojiIcon/index.vue
<script setup lang="ts"> <script setup lang="ts">
import { computed, ref } from 'vue'
import emojis from '@/utils/emoji/face.json' import emojis from '@/utils/emoji/face.json'
import yayas from '@/utils/emoji/yaya.json'
import type { IEmoji } from '@/utils/emoji/type' import type { IEmoji } from '@/utils/emoji/type'
const emit = defineEmits<{ const emit = defineEmits<{
selectEmoji: [emoji: IEmoji] selectEmoji: [emoji: IEmoji]
}>() }>()
type EmojiTab = 'face' | 'yaya'
const activeTab = ref<EmojiTab>('face')
const transitionName = ref('emoji-slide-left')
const emojiTabs: Array<{
key: EmojiTab
label: string
list: Array<Pick<IEmoji, 'name' | 'url' | 'group'>>
}> = [
{
key: 'face',
label: '默认表情',
list: emojis,
},
{
key: 'yaya',
label: 'YAYA表情',
list: yayas,
},
]
const currentEmojiList = computed(() => {
return emojiTabs.find((tab) => tab.key === activeTab.value)?.list ?? []
})
const switchTab = (nextTab: EmojiTab) => {
if (nextTab === activeTab.value) return
const currentIndex = emojiTabs.findIndex((tab) => tab.key === activeTab.value)
const nextIndex = emojiTabs.findIndex((tab) => tab.key === nextTab)
transitionName.value = nextIndex > currentIndex ? 'emoji-slide-left' : 'emoji-slide-right'
activeTab.value = nextTab
}
</script> </script>
<template> <template>
<div <div
class="w-8 h-8 text-gray-500 hover:bg-gray-100 hover:text-gray-700 rounded-lg flex items-center justify-center" class="flex h-8 w-8 items-center justify-center rounded-lg text-gray-500 transition-all hover:bg-orange-50 hover:text-orange-500"
> >
<el-popover placement="bottom" trigger="click" width="384"> <el-popover placement="bottom" trigger="click" :width="384" popper-class="emoji-popover">
<template #reference> <template #reference>
<el-icon size="20" @mousedown.prevent> <el-icon size="20" @mousedown.prevent>
<svg-icon name="icon_face" class="cursor-pointer" <svg-icon name="icon_face" class="cursor-pointer" />
/></el-icon> </el-icon>
</template> </template>
<!-- 表情面板 -->
<el-scrollbar class="h-50"> <div class="emoji-panel">
<div class="flex flex-wrap"> <div class="emoji-tabs">
<span <button
v-for="item in emojis" v-for="tab in emojiTabs"
:key="item.name" :key="tab.key"
class="cursor-pointer hover:bg-gray-100 rounded p-1 flex items-center justify-center" type="button"
@click="emit('selectEmoji', item)" class="emoji-tab"
:class="{ 'emoji-tab--active': activeTab === tab.key }"
@click="switchTab(tab.key)"
> >
<img :src="item.url" alt="" class="w-6 h-6" /> {{ tab.label }}
</span> </button>
</div> </div>
<el-scrollbar class="emoji-scrollbar">
<transition :name="transitionName" mode="out-in">
<div :key="activeTab" class="emoji-grid">
<div v-for="item in currentEmojiList" :key="item.name">
<el-popover
v-if="item.group === 'yaya'"
placement="top"
trigger="hover"
:offset="10"
:show-arrow="false"
:popper-style="{
height: '150px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}"
>
<el-image :src="item.url" :alt="item.name" class="h-full w-full object-contain" />
<template #reference>
<button
type="button"
class="emoji-item"
:title="item.name"
@click="emit('selectEmoji', item as IEmoji)"
>
<img
:src="item.url"
:alt="item.name"
class="h-6 w-6 object-contain"
:class="{ 'h-8 w-8': item.group === 'yaya' }"
/>
</button>
</template>
</el-popover>
<button
v-else
type="button"
class="emoji-item"
:title="item.name"
@click="emit('selectEmoji', item as IEmoji)"
>
<img
:src="item.url"
:alt="item.name"
class="h-6 w-6 object-contain"
:class="{ 'h-8 w-8': item.group === 'yaya' }"
/>
</button>
</div>
</div>
</transition>
</el-scrollbar> </el-scrollbar>
</div>
</el-popover> </el-popover>
</div> </div>
</template> </template>
<style scoped></style> <style scoped>
.emoji-tabs {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 8px;
padding: 0 6px 8px;
border-bottom: 1px solid #f5f5f5;
}
.emoji-tab {
position: relative;
border: 0;
background: transparent;
color: #9ca3af;
border-radius: 0;
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition:
color 0.18s ease,
transform 0.18s ease;
}
.emoji-tab:hover {
color: #f97316;
}
.emoji-tab--active {
color: #ea580c;
transform: none;
}
.emoji-tab--active::after {
content: '';
position: absolute;
left: 0;
bottom: -9px;
width: 100%;
height: 2px;
border-radius: 999px;
background: linear-gradient(90deg, #fb923c 0%, #f97316 100%);
}
.emoji-scrollbar {
height: 188px;
}
.emoji-grid {
display: grid;
grid-template-columns: repeat(8, minmax(0, 1fr));
gap: 6px;
padding: 2px 4px 10px;
}
.emoji-slide-left-enter-active,
.emoji-slide-left-leave-active,
.emoji-slide-right-enter-active,
.emoji-slide-right-leave-active {
transition:
opacity 0.22s ease,
transform 0.22s ease;
}
.emoji-slide-left-enter-from,
.emoji-slide-right-leave-to {
opacity: 0;
transform: translateX(18px);
}
.emoji-slide-left-leave-to,
.emoji-slide-right-enter-from {
opacity: 0;
transform: translateX(-18px);
}
.emoji-slide-left-enter-to,
.emoji-slide-left-leave-from,
.emoji-slide-right-enter-to,
.emoji-slide-right-leave-from {
opacity: 1;
transform: translateX(0);
}
.emoji-item {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 34px;
border: 0;
border-radius: 10px;
background: #fff;
cursor: pointer;
transition:
transform 0.18s ease,
background-color 0.18s ease,
box-shadow 0.18s ease;
}
.emoji-item:hover {
background: linear-gradient(180deg, #fff7ed 0%, #ffedd5 100%);
box-shadow: 0 6px 14px rgb(251 146 60 / 16%);
transform: translateY(-1px);
}
</style>
src/utils/emoji/face.json
...@@ -2,601 +2,501 @@ ...@@ -2,601 +2,501 @@
{ {
"url": "https://www.emojiall.com/images/60/skype/1f600.png", "url": "https://www.emojiall.com/images/60/skype/1f600.png",
"name": "[face_嘿嘿]", "name": "[face_嘿嘿]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f603.png", "url": "https://www.emojiall.com/images/60/skype/1f603.png",
"name": "[face_哈哈]", "name": "[face_哈哈]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f604.png", "url": "https://www.emojiall.com/images/60/skype/1f604.png",
"name": "[face_大笑]", "name": "[face_大笑]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f601.png", "url": "https://www.emojiall.com/images/60/skype/1f601.png",
"name": "[face_嘻嘻]", "name": "[face_嘻嘻]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f606.png", "url": "https://www.emojiall.com/images/60/skype/1f606.png",
"name": "[face_斜眼笑]", "name": "[face_斜眼笑]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f605.png", "url": "https://www.emojiall.com/images/60/skype/1f605.png",
"name": "[face_苦笑]", "name": "[face_苦笑]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f923.png", "url": "https://www.emojiall.com/images/60/skype/1f923.png",
"name": "[face_笑得满地打滚]", "name": "[face_笑得满地打滚]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f602.png", "url": "https://www.emojiall.com/images/60/skype/1f602.png",
"name": "[face_笑哭了]", "name": "[face_笑哭了]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f642.png", "url": "https://www.emojiall.com/images/60/skype/1f642.png",
"name": "[face_呵呵]", "name": "[face_呵呵]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f643.png", "url": "https://www.emojiall.com/images/60/skype/1f643.png",
"name": "[face_倒脸]", "name": "[face_倒脸]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f609.png", "url": "https://www.emojiall.com/images/60/skype/1f609.png",
"name": "[face_眨眼]", "name": "[face_眨眼]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f60a.png", "url": "https://www.emojiall.com/images/60/skype/1f60a.png",
"name": "[face_羞涩微笑]", "name": "[face_羞涩微笑]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f607.png", "url": "https://www.emojiall.com/images/60/skype/1f607.png",
"name": "[face_微笑天使]", "name": "[face_微笑天使]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f970.png", "url": "https://www.emojiall.com/images/60/skype/1f970.png",
"name": "[face_喜笑颜开]", "name": "[face_喜笑颜开]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f60d.png", "url": "https://www.emojiall.com/images/60/skype/1f60d.png",
"name": "[face_花痴]", "name": "[face_花痴]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f929.png", "url": "https://www.emojiall.com/images/60/skype/1f929.png",
"name": "[face_好崇拜哦]", "name": "[face_好崇拜哦]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f617.png", "url": "https://www.emojiall.com/images/60/skype/1f617.png",
"name": "[face_亲亲]", "name": "[face_亲亲]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f61a.png", "url": "https://www.emojiall.com/images/60/skype/1f61a.png",
"name": "[face_羞涩亲亲]", "name": "[face_羞涩亲亲]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f619.png", "url": "https://www.emojiall.com/images/60/skype/1f619.png",
"name": "[face_微笑亲亲]", "name": "[face_微笑亲亲]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f60b.png", "url": "https://www.emojiall.com/images/60/skype/1f60b.png",
"name": "[face_好吃]", "name": "[face_好吃]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f61b.png", "url": "https://www.emojiall.com/images/60/skype/1f61b.png",
"name": "[face_吐舌]", "name": "[face_吐舌]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f61c.png", "url": "https://www.emojiall.com/images/60/skype/1f61c.png",
"name": "[face_单眼吐舌]", "name": "[face_单眼吐舌]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f92a.png", "url": "https://www.emojiall.com/images/60/skype/1f92a.png",
"name": "[face_滑稽]", "name": "[face_滑稽]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f911.png", "url": "https://www.emojiall.com/images/60/skype/1f911.png",
"name": "[face_发财]", "name": "[face_发财]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f917.png", "url": "https://www.emojiall.com/images/60/skype/1f917.png",
"name": "[face_抱抱]", "name": "[face_抱抱]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f92d.png", "url": "https://www.emojiall.com/images/60/skype/1f92d.png",
"name": "[face_不说]", "name": "[face_不说]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f92b.png", "url": "https://www.emojiall.com/images/60/skype/1f92b.png",
"name": "[face_安静的脸]", "name": "[face_安静的脸]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f914.png", "url": "https://www.emojiall.com/images/60/skype/1f914.png",
"name": "[face_想一想]", "name": "[face_想一想]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f910.png", "url": "https://www.emojiall.com/images/60/skype/1f910.png",
"name": "[face_闭嘴]", "name": "[face_闭嘴]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f928.png", "url": "https://www.emojiall.com/images/60/skype/1f928.png",
"name": "[face_挑眉]", "name": "[face_挑眉]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f610.png", "url": "https://www.emojiall.com/images/60/skype/1f610.png",
"name": "[face_冷漠]", "name": "[face_冷漠]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f611.png", "url": "https://www.emojiall.com/images/60/skype/1f611.png",
"name": "[face_无语]", "name": "[face_无语]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f636.png", "url": "https://www.emojiall.com/images/60/skype/1f636.png",
"name": "[face_沉默]", "name": "[face_沉默]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f60f.png", "url": "https://www.emojiall.com/images/60/skype/1f60f.png",
"name": "[face_得意]", "name": "[face_得意]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f612.png", "url": "https://www.emojiall.com/images/60/skype/1f612.png",
"name": "[face_不高兴]", "name": "[face_不高兴]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f644.png", "url": "https://www.emojiall.com/images/60/skype/1f644.png",
"name": "[face_翻白眼]", "name": "[face_翻白眼]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f62c.png", "url": "https://www.emojiall.com/images/60/skype/1f62c.png",
"name": "[face_龇牙咧嘴]", "name": "[face_龇牙咧嘴]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f925.png", "url": "https://www.emojiall.com/images/60/skype/1f925.png",
"name": "[face_说谎]", "name": "[face_说谎]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f60c.png", "url": "https://www.emojiall.com/images/60/skype/1f60c.png",
"name": "[face_松了口气]", "name": "[face_松了口气]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f614.png", "url": "https://www.emojiall.com/images/60/skype/1f614.png",
"name": "[face_沉思]", "name": "[face_沉思]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f62a.png", "url": "https://www.emojiall.com/images/60/skype/1f62a.png",
"name": "[face_困]", "name": "[face_困]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f634.png", "url": "https://www.emojiall.com/images/60/skype/1f634.png",
"name": "[face_睡着了]", "name": "[face_睡着了]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f637.png", "url": "https://www.emojiall.com/images/60/skype/1f637.png",
"name": "[face_感冒]", "name": "[face_感冒]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f912.png", "url": "https://www.emojiall.com/images/60/skype/1f912.png",
"name": "[face_发烧]", "name": "[face_发烧]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f915.png", "url": "https://www.emojiall.com/images/60/skype/1f915.png",
"name": "[face_受伤]", "name": "[face_受伤]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f922.png", "url": "https://www.emojiall.com/images/60/skype/1f922.png",
"name": "[face_恶心]", "name": "[face_恶心]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f92e.png", "url": "https://www.emojiall.com/images/60/skype/1f92e.png",
"name": "[face_呕吐]", "name": "[face_呕吐]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f975.png", "url": "https://www.emojiall.com/images/60/skype/1f975.png",
"name": "[face_脸发烧]", "name": "[face_脸发烧]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f976.png", "url": "https://www.emojiall.com/images/60/skype/1f976.png",
"name": "[face_冷脸]", "name": "[face_冷脸]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f974.png", "url": "https://www.emojiall.com/images/60/skype/1f974.png",
"name": "[face_头昏眼花]", "name": "[face_头昏眼花]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f92f.png", "url": "https://www.emojiall.com/images/60/skype/1f92f.png",
"name": "[face_爆炸头]", "name": "[face_爆炸头]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f920.png", "url": "https://www.emojiall.com/images/60/skype/1f920.png",
"name": "[face_牛仔帽脸]", "name": "[face_牛仔帽脸]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f973.png", "url": "https://www.emojiall.com/images/60/skype/1f973.png",
"name": "[face_聚会笑脸]", "name": "[face_聚会笑脸]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f60e.png", "url": "https://www.emojiall.com/images/60/skype/1f60e.png",
"name": "[face_墨镜笑脸]", "name": "[face_墨镜笑脸]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f913.png", "url": "https://www.emojiall.com/images/60/skype/1f913.png",
"name": "[face_书呆子脸]", "name": "[face_书呆子脸]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f9d0.png", "url": "https://www.emojiall.com/images/60/skype/1f9d0.png",
"name": "[face_带单片眼镜的脸]", "name": "[face_带单片眼镜的脸]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f615.png", "url": "https://www.emojiall.com/images/60/skype/1f615.png",
"name": "[face_困扰]", "name": "[face_困扰]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f641.png", "url": "https://www.emojiall.com/images/60/skype/1f641.png",
"name": "[face_微微不满]", "name": "[face_微微不满]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/2639-fe0f.png", "url": "https://www.emojiall.com/images/60/skype/2639-fe0f.png",
"name": "[face_不满]", "name": "[face_不满]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f62f.png", "url": "https://www.emojiall.com/images/60/skype/1f62f.png",
"name": "[face_缄默]", "name": "[face_缄默]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f632.png", "url": "https://www.emojiall.com/images/60/skype/1f632.png",
"name": "[face_震惊]", "name": "[face_震惊]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f633.png", "url": "https://www.emojiall.com/images/60/skype/1f633.png",
"name": "[face_脸红]", "name": "[face_脸红]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f97a.png", "url": "https://www.emojiall.com/images/60/skype/1f97a.png",
"name": "[face_恳求的脸]", "name": "[face_恳求的脸]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f626.png", "url": "https://www.emojiall.com/images/60/skype/1f626.png",
"name": "[face_啊]", "name": "[face_啊]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f627.png", "url": "https://www.emojiall.com/images/60/skype/1f627.png",
"name": "[face_极度痛苦]", "name": "[face_极度痛苦]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f628.png", "url": "https://www.emojiall.com/images/60/skype/1f628.png",
"name": "[face_害怕]", "name": "[face_害怕]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f630.png", "url": "https://www.emojiall.com/images/60/skype/1f630.png",
"name": "[face_冷汗]", "name": "[face_冷汗]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f625.png", "url": "https://www.emojiall.com/images/60/skype/1f625.png",
"name": "[face_失望但如释重负]", "name": "[face_失望但如释重负]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f622.png", "url": "https://www.emojiall.com/images/60/skype/1f622.png",
"name": "[face_哭]", "name": "[face_哭]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f62d.png", "url": "https://www.emojiall.com/images/60/skype/1f62d.png",
"name": "[face_放声大哭]", "name": "[face_放声大哭]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f631.png", "url": "https://www.emojiall.com/images/60/skype/1f631.png",
"name": "[face_吓死了]", "name": "[face_吓死了]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f616.png", "url": "https://www.emojiall.com/images/60/skype/1f616.png",
"name": "[face_困惑]", "name": "[face_困惑]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f61e.png", "url": "https://www.emojiall.com/images/60/skype/1f61e.png",
"name": "[face_失望]", "name": "[face_失望]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f613.png", "url": "https://www.emojiall.com/images/60/skype/1f613.png",
"name": "[face_汗]", "name": "[face_汗]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f629.png", "url": "https://www.emojiall.com/images/60/skype/1f629.png",
"name": "[face_累死了]", "name": "[face_累死了]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f62b.png", "url": "https://www.emojiall.com/images/60/skype/1f62b.png",
"name": "[face_累]", "name": "[face_累]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f971.png", "url": "https://www.emojiall.com/images/60/skype/1f971.png",
"name": "[face_打呵欠]", "name": "[face_打呵欠]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f624.png", "url": "https://www.emojiall.com/images/60/skype/1f624.png",
"name": "[face_傲慢]", "name": "[face_傲慢]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f621.png", "url": "https://www.emojiall.com/images/60/skype/1f621.png",
"name": "[face_怒火中烧]", "name": "[face_怒火中烧]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f620.png", "url": "https://www.emojiall.com/images/60/skype/1f620.png",
"name": "[face_生气]", "name": "[face_生气]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f92c.png", "url": "https://www.emojiall.com/images/60/skype/1f92c.png",
"name": "[face_嘴上有符号的脸]", "name": "[face_嘴上有符号的脸]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f608.png", "url": "https://www.emojiall.com/images/60/skype/1f608.png",
"name": "[face_恶魔微笑]", "name": "[face_恶魔微笑]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f47f.png", "url": "https://www.emojiall.com/images/60/skype/1f47f.png",
"name": "[face_生气的恶魔]", "name": "[face_生气的恶魔]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f480.png", "url": "https://www.emojiall.com/images/60/skype/1f480.png",
"name": "[face_头骨]", "name": "[face_头骨]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/2620-fe0f.png", "url": "https://www.emojiall.com/images/60/skype/2620-fe0f.png",
"name": "[face_骷髅]", "name": "[face_骷髅]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f4a9.png", "url": "https://www.emojiall.com/images/60/skype/1f4a9.png",
"name": "[face_大便]", "name": "[face_大便]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f921.png", "url": "https://www.emojiall.com/images/60/skype/1f921.png",
"name": "[face_小丑脸]", "name": "[face_小丑脸]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f479.png", "url": "https://www.emojiall.com/images/60/skype/1f479.png",
"name": "[face_食人魔]", "name": "[face_食人魔]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f47a.png", "url": "https://www.emojiall.com/images/60/skype/1f47a.png",
"name": "[face_小妖精]", "name": "[face_小妖精]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f47b.png", "url": "https://www.emojiall.com/images/60/skype/1f47b.png",
"name": "[face_鬼]", "name": "[face_鬼]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f47d.png", "url": "https://www.emojiall.com/images/60/skype/1f47d.png",
"name": "[face_外星人]", "name": "[face_外星人]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f47e.png", "url": "https://www.emojiall.com/images/60/skype/1f47e.png",
"name": "[face_外星怪物]", "name": "[face_外星怪物]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f916.png", "url": "https://www.emojiall.com/images/60/skype/1f916.png",
"name": "[face_机器人]", "name": "[face_机器人]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f63a.png", "url": "https://www.emojiall.com/images/60/skype/1f63a.png",
"name": "[face_大笑的猫]", "name": "[face_大笑的猫]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f639.png", "url": "https://www.emojiall.com/images/60/skype/1f639.png",
"name": "[face_笑出眼泪的猫]", "name": "[face_笑出眼泪的猫]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f63b.png", "url": "https://www.emojiall.com/images/60/skype/1f63b.png",
"name": "[face_花痴的猫]", "name": "[face_花痴的猫]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f63c.png", "url": "https://www.emojiall.com/images/60/skype/1f63c.png",
"name": "[face_奸笑的猫]", "name": "[face_奸笑的猫]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f63d.png", "url": "https://www.emojiall.com/images/60/skype/1f63d.png",
"name": "[face_亲亲猫]", "name": "[face_亲亲猫]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f640.png", "url": "https://www.emojiall.com/images/60/skype/1f640.png",
"name": "[face_疲倦的猫]", "name": "[face_疲倦的猫]",
"group": "face", "group": "face"
"className": "emoji_small"
}, },
{ {
"url": "https://www.emojiall.com/images/60/skype/1f63f.png", "url": "https://www.emojiall.com/images/60/skype/1f63f.png",
"name": "[face_哭泣的猫]", "name": "[face_哭泣的猫]",
"group": "face", "group": "face"
"className": "emoji_small"
} }
] ]
src/utils/emoji/index.ts
import emojis from './face.json' import emojis from './face.json'
import yayas from './yaya.json'
type EmojiAsset = {
name: string
url: string
group: string
}
const emojiList: EmojiAsset[] = [...emojis, ...yayas]
function escapeHTML(str: string) { function escapeHTML(str: string) {
return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;') return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
...@@ -9,17 +18,18 @@ export const parseEmoji = (content: string) => { ...@@ -9,17 +18,18 @@ export const parseEmoji = (content: string) => {
let html = escapeHTML(content) let html = escapeHTML(content)
emojis.forEach((item) => { emojiList.forEach((item) => {
const escapedName = item.name.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') const escapedName = item.name.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
const reg = new RegExp(escapedName, 'g') const reg = new RegExp(escapedName, 'g')
console.log(item.group)
html = html.replace( html = html.replace(
reg, reg,
`<img `<img
src="${item.url}" src="${item.url}"
alt="${item.name}" alt="${item.name}"
class="${item.className || 'emoji_small'} inline-block align-text-bottom w-6 h-6" class="${item.group === 'yaya' ? 'w-8 h-8' : 'w-6 h-6'}"
/>`, />`,
) )
}) })
......
src/utils/emoji/yaya.json 0 → 100644
[
{
"name": "[YAYA_OK]",
"url": "https://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/png/2026/03/30/Common/1774842153149.png",
"group": "yaya"
},
{
"name": "[YAYA_OK1]",
"url": "https://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/png/2026/03/30/Common/1774842183051.png",
"group": "yaya"
},
{
"name": "[YAYA_OKK]",
"url": "https://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/png/2026/03/30/Common/1774842204358.png",
"group": "yaya"
},
{
"name": "[YAYA_拜托]",
"url": "https://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/png/2026/03/30/Common/1774842337245.png",
"group": "yaya"
},
{
"name": "[YAYA_点赞]",
"url": "https://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/png/2026/03/30/Common/1774842370496.png",
"group": "yaya"
},
{
"name": "[YAYA_非常感谢]",
"url": "https://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/png/2026/03/30/Common/1774842403468.png",
"group": "yaya"
},
{
"name": "[YAYA_恭喜]",
"url": "https://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/png/2026/03/30/Common/1774842433720.png",
"group": "yaya"
},
{
"name": "[YAYA_恭喜1]",
"url": "https://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/png/2026/03/30/Common/1774842456906.png",
"group": "yaya"
},
{
"name": "[YAYA_好滴]",
"url": "https://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/png/2026/03/30/Common/1774842482423.png",
"group": "yaya"
},
{
"name": "[YAYA_加油]",
"url": "https://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/png/2026/03/30/Common/1774842512339.png",
"group": "yaya"
},
{
"name": "[YAYA_焦急]",
"url": "https://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/png/2026/03/30/Common/1774842540763.png",
"group": "yaya"
},
{
"name": "[YAYA_开心]",
"url": "https://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/png/2026/03/30/Common/1774842564724.png",
"group": "yaya"
},
{
"name": "[YAYA_哭泣]",
"url": "https://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/png/2026/03/30/Common/1774842593525.png",
"group": "yaya"
},
{
"name": "[YAYA_努力]",
"url": "https://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/png/2026/03/30/Common/1774842629597.png",
"group": "yaya"
},
{
"name": "[YAYA_谢谢]",
"url": "https://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/png/2026/03/30/Common/1774842649971.png",
"group": "yaya"
},
{
"name": "[YAYA_亚声人]",
"url": "https://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/png/2026/03/30/Common/1774842693166.png",
"group": "yaya"
}
]
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment