发送的图片可以点击预览

This commit is contained in:
bob
2025-01-20 21:14:34 +08:00
parent 05aed8f816
commit 28faacf620
6 changed files with 192 additions and 191 deletions

View File

@@ -1,174 +1,105 @@
export const emojis = {
'[微笑]':
"<img class='emoji' alt='[微笑]' title='微笑' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/0.gif'>",
'[撇嘴]':
"<img class='emoji' alt='[撇嘴]' title='撇嘴' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/1.gif'>",
'[]':
"<img class='emoji' alt='[色]' title='色' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/2.gif'>",
'[发呆]':
"<img class='emoji' alt='[发呆]' title='发呆' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/3.gif'>",
'[得意]':
"<img class='emoji' alt='[得意]' title='得意' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/4.gif'>",
'[流泪]':
"<img class='emoji' alt='[流泪]' title='流泪' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/5.gif'>",
'[害羞]':
"<img class='emoji' alt='[害羞]' title='害羞' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/6.gif'>",
'[闭嘴]':
"<img class='emoji' alt='[闭嘴]' title='闭嘴' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/7.gif'>",
'[]':
"<img class='emoji' alt='[睡]' title='睡' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/8.gif'>",
'[大哭]':
"<img class='emoji' alt='[大哭]' title='大哭' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/9.gif'>",
'[尴尬]':
"<img class='emoji' alt='[尴尬]' title='尴尬' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/10.gif'>",
'[发怒]':
"<img class='emoji' alt='[发怒]' title='发怒' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/11.gif'>",
'[调皮]':
"<img class='emoji' alt='[调皮]' title='调皮' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/12.gif'>",
'[呲牙]':
"<img class='emoji' alt='[呲牙]' title='呲牙' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/13.gif'>",
'[惊讶]':
"<img class='emoji' alt='[惊讶]' title='惊讶' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/14.gif'>",
'[难过]':
"<img class='emoji' alt='[难过]' title='难过' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/15.gif'>",
'[]':
"<img class='emoji' alt='[]' title='酷' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/16.gif'>",
'[冷汗]':
"<img class='emoji' alt='[冷汗]' title='冷汗' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/17.gif'>",
'[抓狂]':
"<img class='emoji' alt='[抓狂]' title='抓狂' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/18.gif'>",
'[]':
"<img class='emoji' alt='[吐]' title='吐' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/19.gif'>",
'[偷笑]':
"<img class='emoji' alt='[偷笑]' title='偷笑' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/20.gif'>",
'[可爱]':
"<img class='emoji' alt='[可爱]' title='可爱' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/21.gif'>",
'[白眼]':
"<img class='emoji' alt='[白眼]' title='白眼' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/22.gif'>",
'[傲慢]':
"<img class='emoji' alt='[傲慢]' title='傲慢' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/23.gif'>",
'[饥饿]':
"<img class='emoji' alt='[饥饿]' title='饥饿' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/24.gif'>",
'[]':
"<img class='emoji' alt='[困]':' title='困' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/25.gif'>",
'[惊恐]':
"<img class='emoji' alt='[惊恐]' title='惊恐' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/26.gif'>",
'[流汗]':
"<img class='emoji' alt='[流汗]' title='流汗' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/27.gif'>",
'[憨笑]':
"<img class='emoji' alt='[憨笑]' title='憨笑' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/28.gif'>",
'[大兵]':
"<img class='emoji' alt='[大兵]' title='大兵' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/29.gif'>",
'[奋斗]':
"<img class='emoji' alt='[奋斗]' title='奋斗' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/30.gif'>",
'[咒骂]':
"<img class='emoji' alt='[咒骂]' title='咒骂' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/31.gif'>",
'[疑问]':
"<img class='emoji' alt='[疑问]' title='疑问' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/32.gif'>",
'[]':
"<img class='emoji' alt='[嘘]' title='嘘' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/33.gif'>",
'[]':
"<img class='emoji' alt='[晕]' title='晕' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/34.gif'>",
'[折磨]':
"<img class='emoji' alt='[折磨]' title='折磨' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/35.gif'>",
'[]':
"<img class='emoji' alt='[]' title='衰' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/36.gif'>",
'[骷髅]':
"<img class='emoji' alt='[骷髅]' title='骷髅' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/37.gif'>",
'[敲打]':
"<img class='emoji' alt='[敲打]' title='敲打' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/38.gif'>",
'[再见]':
"<img class='emoji' alt='[再见]' title='再见' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/39.gif'>",
'[擦汗]':
"<img class='emoji' alt='[擦汗]' title='擦汗' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/40.gif'>",
'[抠鼻]':
"<img class='emoji' alt='[抠鼻]' title='抠鼻' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/41.gif'>",
'[鼓掌]':
"<img class='emoji' alt='[鼓掌]' title='鼓掌' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/42.gif'>",
'[糗大了]':
"<img class='emoji' alt='[糗大了]' title='糗大了' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/43.gif'>",
'[坏笑]':
"<img class='emoji' alt='[坏笑]' title='坏笑' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/44.gif'>",
'[左哼哼]':
"<img class='emoji' alt='[左哼哼]' title='左哼哼' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/45.gif'>",
'[右哼哼]':
"<img class='emoji' alt='[右哼哼]' title='右哼哼' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/46.gif'>",
'[哈欠]':
"<img class='emoji' alt='[哈欠]' title='哈欠' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/47.gif'>",
'[鄙视]':
"<img class='emoji' alt='[鄙视]' title='鄙视' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/48.gif'>",
'[委屈]':
"<img class='emoji' alt='[委屈]' title='委屈' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/49.gif'>",
'[快哭了]':
"<img class='emoji' alt='[快哭了]' title='快哭了' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/50.gif'>",
'[阴险]':
"<img class='emoji' alt='[阴险]' title='阴险' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/51.gif'>",
'[亲亲]':
"<img class='emoji' alt='[亲亲]' title='亲亲' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/52.gif'>",
'[吓]':
"<img class='emoji' alt='[吓]' title='吓' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/53.gif'>",
'[可怜]':
"<img class='emoji' alt='[可怜]' title='可怜' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/54.gif'>",
'[菜刀]':
"<img class='emoji' alt='[菜刀]' title='菜刀' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/55.gif'>",
'[西瓜]':
"<img class='emoji' alt='[西瓜]' title='西瓜' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/56.gif'>",
'[啤酒]':
"<img class='emoji' alt='[啤酒]' title='啤酒' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/57.gif'>",
'[篮球]':
"<img class='emoji' alt='[篮球]' title='篮球' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/58.gif'>",
'[咖啡]':
"<img class='emoji' alt='[咖啡]' title='咖啡' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/60.gif'>",
'[饭]':
"<img class='emoji' alt='[饭]' title='饭' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/61.gif'>",
'[玫瑰]':
"<img class='emoji' alt='[玫瑰]' title='玫瑰' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/63.gif'>",
'[凋谢]':
"<img class='emoji' alt='[凋谢]' title='凋谢' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/64.gif'>",
'[示爱]':
"<img class='emoji' alt='[示爱]' title='示爱' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/65.gif'>",
'[爱心]':
"<img class='emoji' alt='[爱心]' title='爱心' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/66.gif'>",
'[心碎]':
"<img class='emoji' alt='[心碎]' title='心碎' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/67.gif'>",
'[蛋糕]':
"<img class='emoji' alt='[蛋糕]' title='蛋糕' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/68.gif'>",
'[炸弹]':
"<img class='emoji' alt='[炸弹]' title='炸弹' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/70.gif'>",
'[刀]':
"<img class='emoji' alt='[刀]' title='刀' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/71.gif'>",
'[足球]':
"<img class='emoji' alt='[足球]' title='足球' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/72.gif'>",
'[礼物]':
"<img class='emoji' alt='[礼物]' title='礼物' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/77.gif'>",
'[拥抱]':
"<img class='emoji' alt='[拥抱]' title='拥抱' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/78.gif'>",
'[强]':
"<img class='emoji' alt='[强]' title='强' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/79.gif'>",
'[弱]':
"<img class='emoji' alt='[弱]' title='弱' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/80.gif'>",
'[握手]':
"<img class='emoji' alt='[握手]' title='握手' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/81.gif'>",
'[胜利]':
"<img class='emoji' alt='[胜利]' title='胜利' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/82.gif'>",
'[抱拳]':
"<img class='emoji' alt='[抱拳]' title='抱拳' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/83.gif'>",
'[勾引]':
"<img class='emoji' alt='[勾引]' title='勾引' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/84.gif'>",
'[拳头]':
"<img class='emoji' alt='[拳头]' title='拳头' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/85.gif'>",
'[差劲]':
"<img class='emoji' alt='[差劲]' title='差劲' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/86.gif'>",
'[爱你]':
"<img class='emoji' alt='[爱你]' title='爱你' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/87.gif'>",
'[NO]':
"<img class='emoji' alt='[NO]' title='NO' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/88.gif'>",
'[OK]':
"<img class='emoji' alt='[OK]' title='OK' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/89.gif'>"
'[微笑]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/0.gif',
'[撇嘴]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/1.gif',
'[]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/2.gif',
'[发呆]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/3.gif',
'[得意]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/4.gif',
'[流泪]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/5.gif',
'[害羞]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/6.gif',
'[闭嘴]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/7.gif',
'[]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/8.gif',
'[大哭]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/9.gif',
'[尴尬]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/10.gif',
'[发怒]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/11.gif',
'[调皮]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/12.gif',
'[呲牙]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/13.gif',
'[惊讶]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/14.gif',
'[难过]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/15.gif',
'[]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/16.gif',
'[冷汗]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/17.gif',
'[抓狂]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/18.gif',
'[吐]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/19.gif',
'[偷笑]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/20.gif',
'[可爱]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/21.gif',
'[白眼]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/22.gif',
'[傲慢]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/23.gif',
'[饥饿]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/24.gif',
'[困]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/25.gif',
'[惊恐]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/26.gif',
'[流汗]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/27.gif',
'[憨笑]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/28.gif',
'[大兵]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/29.gif',
'[奋斗]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/30.gif',
'[咒骂]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/31.gif',
'[疑问]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/32.gif',
'[]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/33.gif',
'[]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/34.gif',
'[折磨]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/35.gif',
'[]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/36.gif',
'[骷髅]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/37.gif',
'[敲打]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/38.gif',
'[再见]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/39.gif',
'[擦汗]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/40.gif',
'[抠鼻]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/41.gif',
'[鼓掌]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/42.gif',
'[糗大了]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/43.gif',
'[坏笑]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/44.gif',
'[左哼哼]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/45.gif',
'[右哼哼]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/46.gif',
'[哈欠]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/47.gif',
'[鄙视]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/48.gif',
'[委屈]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/49.gif',
'[快哭了]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/50.gif',
'[阴险]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/51.gif',
'[亲亲]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/52.gif',
'[吓]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/53.gif',
'[可怜]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/54.gif',
'[菜刀]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/55.gif',
'[西瓜]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/56.gif',
'[啤酒]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/57.gif',
'[篮球]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/58.gif',
'[咖啡]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/60.gif',
'[]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/61.gif',
'[玫瑰]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/63.gif',
'[凋谢]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/64.gif',
'[示爱]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/65.gif',
'[爱心]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/66.gif',
'[心碎]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/67.gif',
'[蛋糕]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/68.gif',
'[炸弹]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/70.gif',
'[]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/71.gif',
'[足球]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/72.gif',
'[礼物]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/77.gif',
'[拥抱]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/78.gif',
'[]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/79.gif',
'[]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/80.gif',
'[握手]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/81.gif',
'[胜利]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/82.gif',
'[抱拳]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/83.gif',
'[勾引]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/84.gif',
'[拳头]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/85.gif',
'[差劲]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/86.gif',
'[爱你]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/87.gif',
'[NO]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/88.gif',
'[OK]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/89.gif'
}
/**
* 把消息内容中的"[xxx]"替换为img标签
* 组装一个emoji的img元素
* @param {*} emojiId
* @returns
*/
export const getEmojiHtml = (emojiId) => {
const url = emojis[emojiId]
if (url) {
return `<img class='emoji' alt='${emojiId}':' title='${emojiId.slice(1, -1)}' src='${url}'>`
} else {
return emojiId
}
}
/**
* 把消息内容中的"[xxx]"替换为img html元素
* @param {*} content 消息内容
*/
export const emojiTrans = (content) => {
@@ -179,8 +110,11 @@ export const emojiTrans = (content) => {
}
new Set(matches).forEach((item) => {
const emoji = emojis[item]
content = emoji ? content.replaceAll(item, emoji) : content
const url = emojis[item]
if (url) {
const emojiHtml = `<img class='emoji' alt='${item}':' title='${item.slice(1, -1)}' src='${url}'>`
content = content.replaceAll(item, emojiHtml)
}
})
return content

View File

@@ -14,8 +14,17 @@ export const imageStore = defineStore('anyim-image', () => {
*/
const image = ref({})
const setImage = (obj) => {
/**
* 在同一个session中的imageid集合
*/
const imageInSession = ref({})
const setImage = (sessionId, obj) => {
image.value[obj.objectId] = obj
if (!imageInSession.value[sessionId]) {
imageInSession.value[sessionId] = []
}
imageInSession.value[sessionId].push(obj.objectId)
}
const imageTrans = (content, maxWidth = 400, maxHeight = 300) => {
@@ -29,9 +38,10 @@ export const imageStore = defineStore('anyim-image', () => {
let endIndex = item.indexOf('}')
const objectId = item.slice(startIndex + 1, endIndex)
const thumbUrl = image.value[objectId]?.thumbUrl
const originUrl = image.value[objectId]?.originUrl
if (thumbUrl) {
const imageHtml =
`<img class="image" alt="{${objectId}}" src="${thumbUrl}" ` +
`<img class="image" alt="{${objectId}}" src="${thumbUrl}" data-origin-url="${originUrl}" ` +
`style="max-width: ${maxWidth}px; max-height: ${maxHeight}px; width: auto; height: auto;cursor: pointer;">`
content = content.replaceAll(item, imageHtml)
}
@@ -63,6 +73,7 @@ export const imageStore = defineStore('anyim-image', () => {
return {
image,
imageInSession,
setImage,
imageTrans,
getImageFromContent

View File

@@ -157,7 +157,7 @@ export const messageStore = defineStore('anyim-message', () => {
if (imageIds.size > 0) {
mtsImageService({ objectIds: [...imageIds].join(',') }).then((res) => {
res.data.data.forEach((item) => {
imageStore().setImage(item) // 缓存image数据
imageStore().setImage(sessionId, item) // 缓存image数据
})
})
}

View File

@@ -1,6 +1,6 @@
<script setup>
import { ref, watch } from 'vue'
import { emojis } from '@/js/utils/emojis'
import { emojis, getEmojiHtml } from '@/js/utils/emojis'
const props = defineProps(['isShow'])
const emit = defineEmits(['close', 'sendEmoji'])
@@ -44,14 +44,14 @@ const onSelectEmoji = (key) => {
</script>
<template>
<div class="emoji" v-show="isShowDialog" ref="elementRef" @click.self="close">
<div class="emoji-box" v-show="isShowDialog" ref="elementRef" @click.self="close">
<el-tabs v-model="tabOption">
<el-tab-pane class="emoji-container my-scrollbar" label="系统表情" name="system">
<div
v-for="(item, key) in emojis"
v-for="key in Object.keys(emojis)"
:key="key"
class="emoji-item"
v-html="item"
v-html="getEmojiHtml(key)"
@click="onSelectEmoji(key)"
></div>
</el-tab-pane>
@@ -62,8 +62,8 @@ const onSelectEmoji = (key) => {
</template>
<style lang="scss" scoped>
.emoji {
width: 465px;
.emoji-box {
width: 472px;
height: 240px;
padding: 0 5px 0 5px;
position: absolute;

View File

@@ -5,7 +5,7 @@ import { onMounted, onUnmounted, ref, watch } from 'vue'
import { v4 as uuidv4 } from 'uuid'
import { messageStore, imageStore } from '@/stores'
import { ElMessage, ElLoading } from 'element-plus'
import { emojis, emojiTrans } from '@/js/utils/emojis'
import { emojiTrans, getEmojiHtml } from '@/js/utils/emojis'
import { base64ToFile } from '@/js/utils/common'
import { mtsUploadService } from '@/api/mts'
import { el_loading_options } from '@/const/commonConst'
@@ -70,7 +70,7 @@ const getContent = async () => {
const loadingInstance = ElLoading.service(el_loading_options)
const res = await mtsUploadService({ file: file }) //上传图片至服务端
loadingInstance.close()
imageData.setImage(res.data.data) // 缓存image数据
imageData.setImage(props.sessionId, res.data.data) // 缓存image数据
content = content + `{${res.data.data.objectId}}`
}
}
@@ -168,7 +168,7 @@ const addEmoji = (key) => {
index = 0
}
quill.clipboard.dangerouslyPasteHTML(index, emojis[key])
quill.clipboard.dangerouslyPasteHTML(index, getEmojiHtml(key))
quill.setSelection(index + 1, 0, 'user')
}

View File

@@ -1,11 +1,12 @@
<script setup>
import { computed } from 'vue'
import { computed, onMounted, h, createApp } from 'vue'
import { ElImage } from 'element-plus'
import { WarningFilled } from '@element-plus/icons-vue'
import { MsgType } from '@/proto/msg'
import { userStore, messageStore, groupStore, groupCardStore, imageStore } from '@/stores'
import { messageSysShowTime, messageBoxShowTime, jsonParseSafe } from '@/js/utils/common'
import UserAvatarIcon from '@/components/common/UserAvatarIcon.vue'
import { emojiTrans } from '@/js/utils/emojis'
import { emojis } from '@/js/utils/emojis'
const props = defineProps([
'sessionId',
@@ -26,6 +27,67 @@ const groupData = groupStore()
const groupCardData = groupCardStore()
const imageData = imageStore()
onMounted(() => {
const msgContent = document.querySelector(`#div-content-${msg.value.msgId}`)
if (msgContent) {
const vnode = renderComponent(msg.value.content)
const app = createApp({
render: () => vnode
})
app.mount(msgContent)
}
})
const renderComponent = (content) => {
if (!content) return h('div', [])
let contentArray = []
//匹配内容中的图片
content.split(/(\{.*?\})/).forEach((item) => {
//匹配内容中的表情
item.split(/(\[.*?\])/).forEach((item) => {
if (item) {
contentArray.push(item)
}
})
})
const elements = contentArray.map((item) => {
if (item.startsWith('{') && item.endsWith('}')) {
const imgId = item.slice(1, -1)
const url = imageData.image[imgId]?.originUrl
if (url) {
const srcList = imageData.imageInSession[props.sessionId].map(
(item) => imageData.image[item].originUrl
)
return h(ElImage, {
src: url,
alt: `{${imgId}}`,
fit: 'cover',
previewSrcList: srcList
})
} else {
return h('span', item)
}
} else if (item.startsWith('[') && item.endsWith(']')) {
const emojiId = `[${item.slice(1, -1)}]`
const url = emojis[emojiId]
if (url) {
return h('img', {
class: 'emoji',
src: url,
alt: emojiId,
title: item.slice(1, -1)
})
} else {
return h('span', item)
}
} else {
return h('span', item)
}
})
return elements
}
const msg = computed(() => {
return messageData.getMsg(props.sessionId, props.msgId)
})
@@ -402,12 +464,6 @@ const onClickSystemMsg = (e) => {
const onResendMsg = () => {
emit('resendMsg', msg.value)
}
const formatContent = (content) => {
let html = emojiTrans(content)
html = imageData.imageTrans(html)
return html
}
</script>
<template>
@@ -460,7 +516,7 @@ const formatContent = (content) => {
<div v-if="myMsgIsRead" class="remote_read"></div>
<div v-else class="remote_unread"></div>
</div>
<div class="div-content" v-html="formatContent(msg.content)"></div>
<div class="div-content" :id="`div-content-${msg.msgId}`"></div>
</el-main>
</el-container>
</el-main>
@@ -492,7 +548,7 @@ const formatContent = (content) => {
<span>{{ msgTime }}</span>
</el-header>
<el-main class="message-content">
<div class="div-content" v-html="formatContent(msg.content)"></div>
<div class="div-content"></div>
</el-main>
</el-container>
</el-main>