96 lines
3.5 KiB
Vue
96 lines
3.5 KiB
Vue
|
<!-- 完全复制的textMessage组件，没有用处，仅兜底真有14类型时的场景。后续会单独做制作分享卡片功能，到时再根据分享卡片样式重做本页面 -->
|
|||
|
|
<!-- 完全复制的textMessage组件，没有用处，仅兜底真有14类型时的场景。后续会单独做制作分享卡片功能，到时再根据分享卡片样式重做本页面 -->
|
|||
|
|
<!-- 完全复制的textMessage组件，没有用处，仅兜底真有14类型时的场景。后续会单独做制作分享卡片功能，到时再根据分享卡片样式重做本页面 -->
|
|||
|
|
<!-- 完全复制的textMessage组件，没有用处，仅兜底真有14类型时的场景。后续会单独做制作分享卡片功能，到时再根据分享卡片样式重做本页面 -->
|
|||
|
|
<!-- 完全复制的textMessage组件，没有用处，仅兜底真有14类型时的场景。后续会单独做制作分享卡片功能，到时再根据分享卡片样式重做本页面 -->
|
|||
|
|
<!-- 完全复制的textMessage组件，没有用处，仅兜底真有14类型时的场景。后续会单独做制作分享卡片功能，到时再根据分享卡片样式重做本页面 -->
|
|||
|
|
<!-- 完全复制的textMessage组件，没有用处，仅兜底真有14类型时的场景。后续会单独做制作分享卡片功能，到时再根据分享卡片样式重做本页面 -->
|
|||
|
|
<!-- 完全复制的textMessage组件，没有用处，仅兜底真有14类型时的场景。后续会单独做制作分享卡片功能，到时再根据分享卡片样式重做本页面 -->
|
|||
|
|
<!-- 完全复制的textMessage组件，没有用处，仅兜底真有14类型时的场景。后续会单独做制作分享卡片功能，到时再根据分享卡片样式重做本页面 -->
|
|||
|
|
<!-- 完全复制的textMessage组件，没有用处，仅兜底真有14类型时的场景。后续会单独做制作分享卡片功能，到时再根据分享卡片样式重做本页面 -->
|
|||
|
|
<script lang="ts" setup>
|
|||
|
|
import { textReplaceEmoji } from '@/utils/emojis'
|
|||
|
|
import { textReplaceLink, textReplaceMention } from '@/utils/strings'
|
|||
|
|
import { ITalkRecordExtraText, ITalkRecord } from '@/types/chat'
|
|||
|
|
|
|||
|
|
const props = defineProps<{
|
|||
|
|
extra: ITalkRecordExtraText
|
|||
|
|
data: ITalkRecord
|
|||
|
|
maxWidth?: boolean
|
|||
|
|
source?: 'panel' | 'forward' | 'history'
|
|||
|
|
}>()
|
|||
|
|
|
|||
|
|
const float = props.data.float
|
|||
|
|
|
|||
|
|
let textContent = props.extra?.content || ''
|
|||
|
|
|
|||
|
|
textContent = textReplaceLink(textContent)
|
|||
|
|
|
|||
|
|
if (props.data.talk_type == 2) {
|
|||
|
|
textContent = textReplaceMention(textContent, '#1890ff')
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
textContent = textReplaceEmoji(textContent)
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<div
|
|||
|
|
class="im-message-text"
|
|||
|
|
:class="{
|
|||
|
|
left: float == 'left',
|
|||
|
|
right: float == 'right',
|
|||
|
|
maxwidth: maxWidth,
|
|||
|
|
'radius-reset': source != 'panel',
|
|||
|
|
}"
|
|||
|
|
>
|
|||
|
|
<pre v-html="textContent" />
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<style lang="less" scoped>
|
|||
|
|
.im-message-text {
|
|||
|
|
min-width: 40rpx;
|
|||
|
|
min-height: 40rpx;
|
|||
|
|
padding: 22rpx 30rpx;
|
|||
|
|
color: #1a1a1a;
|
|||
|
|
background: #ffffff;
|
|||
|
|
border-radius: 0 16rpx 16rpx 16rpx;
|
|||
|
|
|
|||
|
|
&.right {
|
|||
|
|
background-color: #46299d;
|
|||
|
|
color: #ffffff;
|
|||
|
|
border-radius: 16rpx 0 16rpx 16rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.maxwidth {
|
|||
|
|
max-width: 486rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.radius-reset {
|
|||
|
|
border-radius: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
pre {
|
|||
|
|
white-space: pre-wrap;
|
|||
|
|
overflow: hidden;
|
|||
|
|
word-break: break-word;
|
|||
|
|
word-wrap: break-word;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
font-family: 'PingFang SC', 'Microsoft YaHei', 'Alibaba PuHuiTi 2.0 45';
|
|||
|
|
line-height: 44rpx;
|
|||
|
|
|
|||
|
|
:deep(.emoji) {
|
|||
|
|
vertical-align: text-bottom;
|
|||
|
|
margin: 0 10rpx;
|
|||
|
|
width: 44rpx;
|
|||
|
|
height: 44rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
:deep(a) {
|
|||
|
|
color: #2196f3;
|
|||
|
|
text-decoration: revert;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|