53 lines
1.1 KiB
Vue
53 lines
1.1 KiB
Vue
|
<template>
|
||
|
|
<div class="chat" :class="isSelf ? 'chat-end' : 'chat-start'">
|
||
|
|
<!-- 头像 -->
|
||
|
|
<div v-if="avatar" class="chat-image avatar">
|
||
|
|
<div class="w-10 rounded-full">
|
||
|
|
<img :alt="avatar" :src="avatar" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 消息气泡 -->
|
||
|
|
<div class="chat-header mb-1">
|
||
|
|
<time v-if="time" class="text-xs opacity-50">{{ time }}</time>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div
|
||
|
|
class="chat-bubble"
|
||
|
|
:class="isSelf ? 'chat-bubble-primary' : 'chat-bubble-neutral'"
|
||
|
|
>
|
||
|
|
{{ content }}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div v-if="showFooter" class="chat-footer mt-1">
|
||
|
|
<slot name="footer"></slot>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
defineProps<{
|
||
|
|
// 消息内容
|
||
|
|
content: string
|
||
|
|
// 是否为自已发送的消息
|
||
|
|
isSelf?: boolean
|
||
|
|
// 显示时间
|
||
|
|
time?: string
|
||
|
|
// 头像 URL
|
||
|
|
avatar?: string
|
||
|
|
// 是否显示底部区域（用于插槽）
|
||
|
|
showFooter?: boolean
|
||
|
|
}>()
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.chat {
|
||
|
|
margin-bottom: 0.75rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.chat-bubble {
|
||
|
|
max-width: 70%;
|
||
|
|
word-wrap: break-word;
|
||
|
|
}
|
||
|
|
</style>
|