128 lines
2.3 KiB
Vue
128 lines
2.3 KiB
Vue
<template>
|
||
<div class="robot-message">
|
||
<div class="avatar">智</div>
|
||
<div class="msg-body">
|
||
<!-- 头部：客服名 + 标签 + 时间 -->
|
||
<div class="msg-header">
|
||
<span class="name">智能客服 小智</span>
|
||
<span class="tag robot-tag">机器人</span>
|
||
<span class="time">{{ time }}</span>
|
||
</div>
|
||
<!-- 气泡 -->
|
||
<div class="bubble" v-html="content"></div>
|
||
<!-- 快捷按钮 -->
|
||
<div v-if="quickActions?.length" class="quick-actions">
|
||
<button
|
||
v-for="btn in quickActions"
|
||
:key="btn.action"
|
||
:class="{ primary: btn.primary }"
|
||
class="action-btn"
|
||
@click="$emit('quickAction', btn.action)"
|
||
>
|
||
{{ btn.label }}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
interface QuickAction {
|
||
label: string
|
||
action: string
|
||
primary?: boolean
|
||
}
|
||
|
||
defineProps({
|
||
name: {type: String, default: '智能客服'},
|
||
avatar: {type: String, default: ''},
|
||
content: {type: String, required: true},
|
||
time: {type: String, default: ''},
|
||
quickActions: {type: Array as () => QuickAction[], default: () => []}
|
||
})
|
||
defineEmits(['quickAction'])
|
||
</script>
|
||
|
||
<style scoped>
|
||
.robot-message {
|
||
display: flex;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.avatar {
|
||
width: 32px;
|
||
height: 32px;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
font-size: 12px;
|
||
background-color: rgba(15, 118, 110, 1);
|
||
}
|
||
|
||
.msg-body {
|
||
margin-left: 8px;
|
||
max-width: 75%;
|
||
}
|
||
|
||
.msg-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.name {
|
||
font-size: 12px;
|
||
color: rgba(156, 163, 175, 1);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.robot-tag {
|
||
background: #f3f0ff;
|
||
color: #8b50ef;
|
||
font-weight: bold;
|
||
font-size: 11px;
|
||
padding: 1px 6px;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.time {
|
||
font-size: 11px;
|
||
color: #999;
|
||
}
|
||
|
||
.bubble {
|
||
background: #fff;
|
||
border-radius: 12px 12px 12px 2px;
|
||
padding: 10px 14px;
|
||
font-size: 14px;
|
||
line-height: 1.6;
|
||
color: #333;
|
||
white-space: pre-wrap;
|
||
}
|
||
|
||
|
||
.quick-actions {
|
||
display: flex;
|
||
gap: 8px;
|
||
margin-top: 8px;
|
||
}
|
||
|
||
.action-btn {
|
||
padding: 4px 14px;
|
||
border: 1px solid #2563eb;
|
||
border-radius: 14px;
|
||
background: #fff;
|
||
color: #2563eb;
|
||
font-size: 12px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.action-btn.primary {
|
||
background: #2563eb;
|
||
color: #fff;
|
||
}
|
||
</style>
|