Uniapp/lucky_shop
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

chore：智能客服加了表情

Browse Source
This commit is contained in:
jinhhanhan
2026-04-25 14:15:03 +08:00
parent dc4f2769f9
commit 3489b89a0b
1 changed files with 367 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

373
pages_tool/ai-chat/ai-chat-message.vue
View File

@@ -211,12 +211,17 @@
@confirm="sendMessage"
@input="onInput" />
<!-- Emoji按钮 -->
<button class="emoji-btn" @click="toggleEmojiPanel">
<text class="iconfont icon-smile">😊</text>
</button>
<!-- 发送按钮 -->
<button
class="send-btn"
:class="{ disabled: !inputText.trim() }"
:class="{ disabled: !canSendMessage }"
@click="sendMessage"
:disabled="!inputText.trim()">
:disabled="!canSendMessage">
<text>发送</text>
</button>
</view>
@@ -261,6 +266,28 @@
</view>
</view>
<!-- Emoji面板 -->
<view v-if="showEmojiPanel" class="emoji-popup">
<view class="emoji-mask" @click="hideEmojiPanel"></view>
<view class="emoji-panel">
<view class="emoji-header">
<text>选择表情</text>
<button class="close-btn" @click="hideEmojiPanel">
<text class="iconfont icon-close"></text>
</button>
</view>
<scroll-view class="emoji-grid" scroll-y>
<view
v-for="(emoji, index) in emojiList"
:key="index"
class="emoji-item"
@click="insertEmoji(emoji)">
<text class="emoji-text">{{ emoji }}</text>
</view>
</scroll-view>
</view>
</view>
<!-- 语音输入面板 -->
<view v-if="enalbeVoicePanelShow" class="voice-popup">
<view class="voice-mask" @click="hideVoicePanel"></view>
@@ -411,6 +438,8 @@ export default {
messageId: 0,
showToolsPanel: false,
enalbeVoicePanelShow: false,
showEmojiPanel: false,
emojiList: ['😀','😃','😄','😁','😆','😅','🤣','😂','🙂','🙃','😉','😊','😇','🥰','😍','🤩','😘','😗','😚','😋','😛','😜','🤪','😝','🤑','🤗','🤭','🤫','🤔','🤐','🤨','😐','😑','😶','😏','😒','🙄','😬','🤥','😌','😔','😪','🤤','😴','😷','🤒','🤕','🤢','🤮','🤧','🥵','🥶','🥴','😵','🤯','🤠','🥳','😎','🤓','🧐','😕','😟','🙁','😮','😯','😲','😳','🥺','😦','😧','😨','😰','😥','😢','😭','😱','😖','😣','😞','😓','😩','😫','🥱','😤','😡','😠','🤬','😈','👿','💀','💩','👻','👽','🤖','🎃','😺','😸','😹','😻','😼','😽','🙀','😿','😾','👋','🤚','🖐','✋','🖖','👌','🤏','✌','🤞','🤟','🤘','🤙','👈','👉','👆','🖕','👇','☝','👍','👎','✊','👊','🤛','🤜','👏','🙌','👐','🤲','🤝','🙏','✍','💅','🤳','💪','💗','💓','💕','💖','💝','💞','💘','💌','💟','💛','💙','💜','🖤','💔','💢','💣','💥','💫','💦','💨','👁','👀','👅','👄','👂','👃','👶','👦','👧','👨','👩','👴','👵','👱','👲','👳','👴','👵','👶','👼','👸','🎅','🤶','🦸','🦹','🧙','🧚','🧛','🧜','🧝','🧞','🧟','🦄','🐶','🐱','🐭','🐹','🐰','🦊','🐻','🐼','🐨','🐯','🦁','🐮','🐷','🐸','🐵','🙈','🙉','🙊','🐒','🐔','🐧','🐦','🐤','🐣','🐥','🦆','🦅','🦉','🦇','🐺','🐗','🐴','🦄','🐝','🐛','🦋','🐌','🐞','🐜','🦟','🦗','🕷','🦂','🐢','🐍','🦎','🦖','🦕','🐙','🦑','🦐','🦞','🦀','🐡','🐠','🐟','🐬','🐳','🐋','🦈','🐊','🐅','🐆','🦓','🦍','🦧','🐘','🦛','🦏','🐪','🐫','🦒','🦘','🐃','🐂','🐄','🐎','🐖','🐏','🐑','🐐','🐓','🦃','🦚','🦜','🦢','🦩','🕊','🐕','🐩','🐈','🐓','🐇','🐁','🐀','🐿','🦔','🐾','🐉','🐲'],
streamingMessage: null,
streamInterval: null,
streamContent: '',
@@ -461,6 +490,11 @@ export default {
return {
bottom: this.keyboardHeight > 0 ? this.keyboardHeight + 'px' : '0px'
};
},
canSendMessage() {
const hasContent = this.inputText && this.inputText.trim() !== ''
const hasEmoji = this.containsEmoji(this.inputText)
return hasContent || hasEmoji
}
},
onShow() {
@@ -812,13 +846,17 @@ async loadChatHistoryIfExist() {
// 发送消息
async sendMessage() {
if (!this.inputText.trim()) return
// 确保有内容或表情
const hasContent = this.inputText && this.inputText.trim() !== ''
const hasEmoji = this.containsEmoji(this.inputText)
if (!hasContent && !hasEmoji) return
const userMessage = {
id: ++this.messageId,
role: 'user',
type: 'text',
content: this.inputText.trim(),
content: this.inputText,
timestamp: Date.now()
}
this.shouldScrollToBottom = true
@@ -846,10 +884,11 @@ async loadChatHistoryIfExist() {
}
// 使用AI服务获取回复
const enhancedMessage = this.enhanceEmojiMessage(userMessage.content)
if (this.enableStreaming) {
await this.sendStreamMessage(userMessage.content)
await this.sendStreamMessage(enhancedMessage)
} else {
await this.sendNormalMessage(userMessage.content)
await this.sendNormalMessage(enhancedMessage)
}
} catch (error) {
@@ -1251,6 +1290,22 @@ async loadChatHistoryIfExist() {
this.showToolsPanel = false
},
// 切换Emoji面板
toggleEmojiPanel() {
this.showEmojiPanel = !this.showEmojiPanel
},
// 隐藏Emoji面板
hideEmojiPanel() {
this.showEmojiPanel = false
},
// 插入Emoji
insertEmoji(emoji) {
this.inputText += emoji
this.hideEmojiPanel()
},
// 显示语音面板
showVoicePanel() {
this.enalbeVoicePanelShow = true
@@ -1641,6 +1696,193 @@ async loadChatHistoryIfExist() {
this.historyOffset = 0
// 触发清空事件
this.$emit('messages-cleared')
},
// 检测字符串中是否包含表情
containsEmoji(str) {
const emojiReg = /[\u{1f300}-\u{1f9ff}\u{1f1e0}-\u{1f1ff}\u{2600}-\u{26ff}\u{2700}-\u{27bf}\u{1f900}-\u{1f9ff}\u{1f600}-\u{1f64f}\u{1f680}-\u{1f6ff}\u{200d}\u{2640}-\u{2642}\u{2300}-\u{23ff}\u{2b50}-\u{2bff}]/gu
return emojiReg.test(str)
},
// 根据表情生成适当的提示文本，帮助 AI 更好地理解
enhanceEmojiMessage(content) {
// 常见表情的含义映射
const emojiResponses = {
'😀': '[开心]',
'😂': '[大笑]',
'😊': '[微笑]',
'❤️': '[爱心]',
'👍': '[点赞]',
'😭': '[哭泣]',
'🙏': '[感谢/拜托]',
'😍': '[喜欢]',
'🎉': '[庆祝]',
'🤔': '[思考]',
'😅': '[尴尬]',
'😁': '[开心]',
'🥰': '[喜爱]',
'😘': '[飞吻]',
'😏': '[坏笑]',
'🥳': '[庆祝]',
'😔': '[难过]',
'😢': '[哭泣]',
'😤': '[生气]',
'😴': '[困]',
'🤗': '[拥抱]',
'🙂': '[微笑]',
'😃': '[开心]',
'😄': '[大笑]',
'😆': '[开心]',
'😇': '[天使]',
'🤩': '[惊喜]',
'😋': '[好吃]',
'😛': '[调皮]',
'😜': '[调皮]',
'🤪': '[搞怪]',
'😝': '[开心]',
'🤑': '[发财]',
'🤭': '[害羞]',
'🤫': '[嘘]',
'🤐': '[闭嘴]',
'🤨': '[疑惑]',
'😐': '[无语]',
'😑': '[无语]',
'😶': '[沉默]',
'😒': '[不屑]',
'🙄': '[白眼]',
'😬': '[尴尬]',
'🤥': '[说谎]',
'😌': '[安心]',
'😪': '[困]',
'🤤': '[流口水]',
'😷': '[生病]',
'🤒': '[发烧]',
'🤕': '[受伤]',
'🤢': '[恶心]',
'🤮': '[呕吐]',
'🤧': '[感冒]',
'🥵': '[热]',
'🥶': '[冷]',
'🥴': '[头晕]',
'😵': '[晕]',
'🤯': '[爆炸]',
'🤠': '[酷]',
'😎': '[酷]',
'🤓': '[书呆子]',
'🧐': '[疑惑]',
'😕': '[困惑]',
'😟': '[担心]',
'🙁': '[难过]',
'😮': '[惊讶]',
'😯': '[惊讶]',
'😲': '[震惊]',
'😳': '[脸红]',
'🥺': '[恳求]',
'😦': '[惊讶]',
'😧': '[惊讶]',
'😨': '[害怕]',
'😰': '[紧张]',
'😥': '[失望]',
'😱': '[恐惧]',
'😖': '[困扰]',
'😣': '[痛苦]',
'😞': '[难过]',
'😓': '[汗]',
'😩': '[累]',
'😫': '[累]',
'🥱': '[困]',
'😡': '[愤怒]',
'😠': '[生气]',
'🤬': '[咒骂]',
'😈': '[恶魔]',
'👿': '[生气]',
'💀': '[骷髅]',
'💩': '[便便]',
'👻': '[鬼]',
'👽': '[外星人]',
'🤖': '[机器人]',
'🎃': '[万圣节]',
'😺': '[开心猫]',
'😸': '[微笑猫]',
'😹': '[大笑猫]',
'😻': '[花痴猫]',
'😼': '[得意猫]',
'😽': '[亲亲猫]',
'🙀': '[惊讶猫]',
'😿': '[哭泣猫]',
'😾': '[生气猫]',
'👋': '[挥手]',
'🤚': '[举手]',
'🖐': '[手掌]',
'✋': '[手掌]',
'🖖': '[V]',
'👌': '[OK]',
'🤏': '[捏]',
'✌️': '[耶]',
'🤞': '[好运]',
'🤟': '[爱你]',
'🤘': '[摇滚]',
'🤙': '[打电话]',
'👈': '[左边]',
'👉': '[右边]',
'👆': '[上边]',
'🖕': '[竖中指]',
'👇': '[下边]',
'☝': '[向上]',
'👎': '[鄙视]',
'✊': '[拳头]',
'👊': '[拳头]',
'🤛': '[左拳]',
'🤜': '[右拳]',
'👏': '[鼓掌]',
'🙌': '[举手庆祝]',
'👐': '[张开手]',
'🤲': '[摊手]',
'🤝': '[握手]',
'✍️': '[写字]',
'💅': '[美甲]',
'🤳': '[自拍]',
'💪': '[肌肉]',
'💗': '[爱心]',
'💓': '[心跳]',
'💕': '[两颗心]',
'💖': '[闪亮心]',
'💝': '[礼物心]',
'💞': '[旋转心]',
'💘': '[丘比特]',
'💌': '[情书]',
'💟': '[心形]',
'💛': '[黄心]',
'💙': '[蓝心]',
'💜': '[紫心]',
'🖤': '[黑心]',
'💔': '[心碎]',
'💢': '[愤怒]',
'💣': '[炸弹]',
'💥': '[爆炸]',
'💫': '[头晕]',
'💦': '[汗]',
'💨': '[风]',
'👁️': '[眼睛]',
'👀': '[看]',
'👅': '[舌头]',
'👄': '[嘴巴]',
'👂': '[耳朵]',
'👃': '[鼻子]'
}
// 如果是纯表情消息，添加一些提示
if (this.containsEmoji(content) && !content.match(/[\u4e00-\u9fa5a-zA-Z]/)) {
let enhancedMessage = content
// 为表情添加描述
for (let emoji in emojiResponses) {
if (content.includes(emoji)) {
enhancedMessage += ` (${emojiResponses[emoji]})`
}
}
return enhancedMessage
}
return content
}
}
}
@@ -2382,6 +2624,25 @@ $radius-lg: 36rpx;
}
}
/* Emoji按钮 */
.emoji-btn {
width: 72rpx;
height: 72rpx;
border-radius: 12rpx;
background-color: #f2f2f2;
margin-left: 12rpx;
display: flex;
align-items: center;
justify-content: center;
border: none;
padding: 0;
.iconfont {
font-size: 36rpx;
line-height: 1;
}
}
/* 发送按钮 - 微信聊天样式 */
.send-btn {
width: 120rpx;
@@ -3232,4 +3493,104 @@ $radius-lg: 36rpx;
}
}
}
/* Emoji面板 */
.emoji-popup {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 999;
.emoji-mask {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(6rpx);
}
.emoji-panel {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: white;
border-radius: $radius-lg $radius-lg 0 0;
padding: 32rpx;
box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.08);
max-height: 60vh;
.emoji-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24rpx;
border-bottom: 2rpx solid #f0f4f8;
padding-bottom: 16rpx;
text {
font-size: 34rpx;
font-weight: 600;
color: $color-text;
}
.close-btn {
width: 56rpx;
height: 56rpx;
border-radius: 50%;
background-color: $bg-main;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
border: none;
&:hover {
background-color: #e8edf3;
}
.iconfont {
font-size: 28rpx;
color: $color-text-light;
}
}
}
.emoji-grid {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 16rpx;
max-height: 40vh;
.emoji-item {
display: flex;
align-items: center;
justify-content: center;
width: 64rpx;
height: 64rpx;
border-radius: 12rpx;
background-color: #f8f8f8;
transition: all 0.2s ease;
&:hover {
background-color: #e8edf3;
transform: scale(1.1);
}
&:active {
background-color: #d8dde3;
}
.emoji-text {
font-size: 36rpx;
line-height: 1;
}
}
}
}
}
</style>