2c1ae41c3e
统一修改多处UI组件的主色调，从蓝色(#1890ff)变更为紫色(#462AA0)，以保持视觉一致性。同时优化了文件上传逻辑和滚动到底部功能。 refactor(dom): 提取滚动相关操作为工具函数 将滚动到底部逻辑封装为可复用的工具函数，并在多处调用位置进行替换，提高代码复用性。 fix(upload): 修复上传中文件点击打开问题 增加上传状态判断，避免在上传过程中点击文件时打开新窗口。 chore(deps): 更新依赖包版本 升级@types/node和watchpack等依赖包版本。
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, '#462AA0')
|
||
}
|
||
|
||
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>
|