85 lines
1.9 KiB
Vue
85 lines
1.9 KiB
Vue
<script lang="ts" setup>
|
||
import { computed, ref } from 'vue'
|
||
import ForwardRecord from '../ForwardRecord.vue'
|
||
import { ITalkRecordExtraForward, ITalkRecord } from '@/types/chat'
|
||
|
||
const props = defineProps<{
|
||
extra: ITalkRecordExtraForward
|
||
data: ITalkRecord
|
||
maxWidth?: Boolean
|
||
}>()
|
||
|
||
const isShowRecord = ref(false)
|
||
|
||
const title = computed(() => {
|
||
return [...new Set(props.extra.records.map((v) => v.nickname))].join('、')
|
||
})
|
||
|
||
const onClick = () => {
|
||
isShowRecord.value = true
|
||
}
|
||
</script>
|
||
<template>
|
||
<section class="im-message-forward pointer" @click="onClick">
|
||
<div class="title">{{ title }} 的会话记录</div>
|
||
<div class="list" v-for="(record, index) in extra.records" :key="index">
|
||
<p>
|
||
<span>{{ record.nickname }}: </span>
|
||
<span>{{ record.text }}</span>
|
||
</p>
|
||
</div>
|
||
|
||
<div class="tips">
|
||
<span>转发：聊天会话记录 ({{ extra.msg_ids.length }}条)</span>
|
||
</div>
|
||
|
||
<ForwardRecord v-model:show="isShowRecord" :msg-id="data.msg_id" @close="isShowRecord = false" />
|
||
</section>
|
||
</template>
|
||
|
||
<style lang="less" scoped>
|
||
.im-message-forward {
|
||
width: 250px;
|
||
min-height: 95px;
|
||
max-height: 150px;
|
||
border-radius: 10px;
|
||
padding: 8px 10px;
|
||
border: 1px solid var(--im-message-border-color);
|
||
user-select: none;
|
||
|
||
.title {
|
||
height: 30px;
|
||
line-height: 30px;
|
||
font-size: 15px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
font-weight: 400;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.list p {
|
||
height: 18px;
|
||
line-height: 18px;
|
||
font-size: 12px;
|
||
color: #a8a8a8;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.tips {
|
||
height: 32px;
|
||
line-height: 35px;
|
||
color: #8a8888;
|
||
border-top: 1px solid var(--border-color);
|
||
font-size: 12px;
|
||
margin-top: 12px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
</style>
|