消息
This commit is contained in:
pengxiaolong
@@ -0,0 +1,211 @@
|
||||
<!-- Used to display the search results of [Contacts]/[Groups]/[All Conversations], which is a display of user/group/conversation dimensions -->
|
||||
<template>
|
||||
<div
|
||||
:class="[
|
||||
'search-result-list-item',
|
||||
!isPC && 'search-result-list-item-h5',
|
||||
'search-result-list-item-' + displayType,
|
||||
isHovering && 'hover-' + displayType,
|
||||
]"
|
||||
@click="onResultItemClicked"
|
||||
@mouseenter="setHoverStatus(true)"
|
||||
@mouseleave="setHoverStatus(false)"
|
||||
>
|
||||
<div
|
||||
v-if="displayType === 'info' || displayType === 'bubble'"
|
||||
:class="[displayType]"
|
||||
>
|
||||
<div :class="displayType + '-left'">
|
||||
<img
|
||||
:class="displayType + '-left-avatar'"
|
||||
:src="avatarForShow || ''"
|
||||
onerror="this.onerror=null;this.src='https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'"
|
||||
>
|
||||
</div>
|
||||
<div :class="[displayType + '-main']">
|
||||
<div :class="[displayType + '-main-name']">
|
||||
{{ nameForShow }}
|
||||
</div>
|
||||
<div :class="[displayType + '-main-content']">
|
||||
<MessageAbstractText
|
||||
v-if="displayType === 'info' || listItem.type === TYPES.MSG_TEXT"
|
||||
:content="contentForShow"
|
||||
:highlightType="displayType === 'info' ? 'font' : 'background'"
|
||||
:displayType="displayType"
|
||||
/>
|
||||
<MessageAbstractFile
|
||||
v-else-if="listItem.type === TYPES.MSG_FILE"
|
||||
:contentText="contentForShow"
|
||||
:messageContent="listItemContent"
|
||||
:displayType="displayType"
|
||||
/>
|
||||
<div v-else-if="listItem.type === TYPES.MSG_IMAGE" />
|
||||
<div v-else-if="listItem.type === TYPES.MSG_VIDEO" />
|
||||
<MessageAbstractCustom
|
||||
v-else-if="listItem.type === TYPES.MSG_CUSTOM"
|
||||
:contentText="contentForShow"
|
||||
:message="listItem"
|
||||
:messageContent="listItemContent"
|
||||
/>
|
||||
<div v-else>
|
||||
{{ getMessageAbstractType(listItem) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="displayType + '-right'">
|
||||
<div :class="displayType + '-right-time'">
|
||||
{{ timeForShow }}
|
||||
</div>
|
||||
<div
|
||||
v-if="displayType === 'bubble' && isHovering"
|
||||
:class="displayType + '-right-to'"
|
||||
@click.stop="navigateToChatPosition"
|
||||
>
|
||||
{{ TUITranslateService.t("TUISearch.定位到聊天位置") }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-else-if="displayType === 'file'"
|
||||
:class="[displayType]"
|
||||
>
|
||||
<div :class="[displayType + '-header']">
|
||||
<img
|
||||
:class="displayType + '-header-avatar'"
|
||||
:src="avatarForShow"
|
||||
onerror="this.onerror=null;this.src='https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'"
|
||||
>
|
||||
<div :class="[displayType + '-header-name']">
|
||||
{{ nameForShow }}
|
||||
</div>
|
||||
<div
|
||||
v-if="isHovering"
|
||||
:class="displayType + '-header-to'"
|
||||
@click.stop="navigateToChatPosition"
|
||||
>
|
||||
{{ TUITranslateService.t("TUISearch.定位到聊天位置") }}
|
||||
</div>
|
||||
<div :class="displayType + '-header-time'">
|
||||
{{ timeForShow }}
|
||||
</div>
|
||||
</div>
|
||||
<div :class="[displayType + '-main-content']">
|
||||
<MessageAbstractFile
|
||||
:contentText="contentForShow"
|
||||
:messageContent="listItemContent"
|
||||
displayType="bubble"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-else-if="displayType === 'image'"
|
||||
:class="[displayType]"
|
||||
>
|
||||
<div
|
||||
class="image-container"
|
||||
@click.stop="navigateToChatPosition"
|
||||
>
|
||||
<MessageAbstractImage
|
||||
v-if="listItem.type === TYPES.MSG_IMAGE"
|
||||
:messageContent="listItemContent"
|
||||
/>
|
||||
<MessageAbstractVideo
|
||||
v-else-if="listItem.type === TYPES.MSG_VIDEO"
|
||||
:messageContent="listItemContent"
|
||||
/>
|
||||
<div
|
||||
v-if="isHovering"
|
||||
class="image-container-hover"
|
||||
>
|
||||
<div class="image-container-hover-text">
|
||||
{{ TUITranslateService.t("TUISearch.定位到聊天位置") }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import TUIChatEngine, { TUITranslateService, IMessageModel } from '@tencentcloud/chat-uikit-engine';
|
||||
import { ref, watchEffect, withDefaults } from '../../../../adapter-vue';
|
||||
import MessageAbstractText from './message-abstract/message-abstract-text.vue';
|
||||
import MessageAbstractFile from './message-abstract/message-abstract-file.vue';
|
||||
import MessageAbstractCustom from './message-abstract/message-abstract-custom.vue';
|
||||
import MessageAbstractImage from './message-abstract/message-abstract-image.vue';
|
||||
import MessageAbstractVideo from './message-abstract/message-abstract-video.vue';
|
||||
import {
|
||||
generateSearchResultShowName,
|
||||
generateSearchResultAvatar,
|
||||
generateSearchResultShowContent,
|
||||
generateSearchResultTime,
|
||||
enterConversation,
|
||||
} from '../../utils';
|
||||
import { messageTypeAbstractMap, searchResultItemDisplayTypeValues, searchMessageTypeValues, IHighlightContent } from '../../type';
|
||||
import { ISearchResultListItem } from '../../../../interface';
|
||||
import { isPC } from '../../../../utils/env';
|
||||
interface IProps {
|
||||
listItem: IMessageModel | ISearchResultListItem;
|
||||
listItemContent?: Record<string, unknown>;
|
||||
type: searchMessageTypeValues;
|
||||
displayType: searchResultItemDisplayTypeValues;
|
||||
keywordList: string[];
|
||||
}
|
||||
const props = withDefaults(defineProps<IProps>(), {
|
||||
listItem: () => ({}) as IMessageModel | ISearchResultListItem,
|
||||
listItemContent: () => ({}) as Record<string, unknown>,
|
||||
type: 'allMessage',
|
||||
displayType: 'info',
|
||||
keywordList: () => ([]) as string[],
|
||||
});
|
||||
|
||||
const emits = defineEmits(['showResultDetail', 'navigateToChatPosition']);
|
||||
const TYPES = ref(TUIChatEngine.TYPES);
|
||||
|
||||
const avatarForShow = ref<string>('');
|
||||
const nameForShow = ref<string>('');
|
||||
const contentForShow = ref<IHighlightContent[]>([]);
|
||||
const timeForShow = ref<string>('');
|
||||
|
||||
const isHovering = ref<boolean>(false);
|
||||
|
||||
watchEffect(() => {
|
||||
avatarForShow.value = generateSearchResultAvatar(props.listItem);
|
||||
nameForShow.value = generateSearchResultShowName(props.listItem, props?.listItemContent);
|
||||
contentForShow.value = generateSearchResultShowContent(
|
||||
props.listItem,
|
||||
props.type,
|
||||
props.keywordList as string[],
|
||||
props?.displayType === 'info',
|
||||
);
|
||||
timeForShow.value = (props.listItem as IMessageModel)?.time
|
||||
? generateSearchResultTime((props.listItem as IMessageModel)?.time * 1000)
|
||||
: '';
|
||||
});
|
||||
|
||||
const onResultItemClicked = () => {
|
||||
if (props.type === 'contact' || props.type === 'group') {
|
||||
enterConversation(props.listItem as IMessageModel);
|
||||
} else {
|
||||
if (props.displayType === 'info' && !(props.listItem as IMessageModel)?.ID) {
|
||||
emits('showResultDetail', true, props.type, props.listItem);
|
||||
} else {
|
||||
navigateToChatPosition();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const setHoverStatus = (status: boolean) => {
|
||||
isHovering.value = status;
|
||||
};
|
||||
|
||||
const navigateToChatPosition = () => {
|
||||
emits('navigateToChatPosition', props.listItem);
|
||||
};
|
||||
|
||||
const getMessageAbstractType = (message: IMessageModel | ISearchResultListItem) => {
|
||||
return message?.type
|
||||
? TUITranslateService.t(`TUISearch.${messageTypeAbstractMap[message.type]}`)
|
||||
: TUITranslateService.t(`TUISearch.[合并消息]`);
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped src="./style/index.scss"></style>
|
||||
@@ -0,0 +1,237 @@
|
||||
<template>
|
||||
<!-- Custom message keyword keyword search description, so here only a few custom messages that need to display highlighted description type are parsed -->
|
||||
<div
|
||||
:class="['message-abstract-custom']"
|
||||
@click.capture.stop
|
||||
>
|
||||
<template v-if="businessID === CHAT_MSG_CUSTOM_TYPE.SERVICE">
|
||||
<div :class="['service']">
|
||||
<h1 :class="['service-header']">
|
||||
<label :class="['service-header-title']">{{ extensionJSON.title }}</label>
|
||||
<a
|
||||
v-if="extensionJSON.hyperlinks_text"
|
||||
:class="['service-header-link', 'link']"
|
||||
:href="extensionJSON.hyperlinks_text.value"
|
||||
target="view_window"
|
||||
>
|
||||
{{ extensionJSON.hyperlinks_text.key }}
|
||||
</a>
|
||||
</h1>
|
||||
<ul
|
||||
v-if="extensionJSON.item && extensionJSON.item.length > 0"
|
||||
:class="['service-list']"
|
||||
>
|
||||
<li
|
||||
v-for="(item, index) in extensionJSON.item"
|
||||
:key="index"
|
||||
:class="['service-list-item']"
|
||||
>
|
||||
<a
|
||||
v-if="isUrl(item.value)"
|
||||
:class="['service-list-item-link', 'link']"
|
||||
:href="item.value"
|
||||
target="view_window"
|
||||
>{{ item.key }}</a>
|
||||
<p
|
||||
v-else
|
||||
:class="['service-list-item-key']"
|
||||
>
|
||||
{{ item.key }}
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
<div :class="['service-description', 'description']">
|
||||
<span
|
||||
v-for="(contentItem, index) in descriptionForShow"
|
||||
:key="index"
|
||||
:class="[(contentItem && contentItem.isHighlight) ? 'highlight' : 'normal']"
|
||||
>
|
||||
{{ contentItem.text }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="businessID === CHAT_MSG_CUSTOM_TYPE.EVALUATE">
|
||||
<div class="evaluate">
|
||||
<div :class="['evaluate-description', 'description']">
|
||||
<span
|
||||
v-for="(contentItem, index) in descriptionForShow"
|
||||
:key="index"
|
||||
:class="[(contentItem && contentItem.isHighlight) ? 'highlight' : 'normal']"
|
||||
>
|
||||
{{ contentItem.text }}
|
||||
</span>
|
||||
</div>
|
||||
<ul
|
||||
v-if="extensionJSON.score"
|
||||
class="evaluate-list"
|
||||
>
|
||||
<li
|
||||
v-for="(item, index) in Math.max(extensionJSON.score, 0)"
|
||||
:key="index"
|
||||
class="evaluate-list-item"
|
||||
>
|
||||
<Icon
|
||||
:file="star"
|
||||
class="file-icon"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
<article>{{ extensionJSON.comment }}</article>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="businessID === CHAT_MSG_CUSTOM_TYPE.ORDER">
|
||||
<div class="order">
|
||||
<img
|
||||
class="order-image"
|
||||
:src="extensionJSON.imageUrl"
|
||||
alt=""
|
||||
>
|
||||
<main class="order-main">
|
||||
<h1 class="order-main-title">
|
||||
{{ extensionJSON.title }}
|
||||
</h1>
|
||||
<div :class="['order-main-description', 'description']">
|
||||
<span
|
||||
v-for="(contentItem, index) in descriptionForShow"
|
||||
:key="index"
|
||||
:class="[(contentItem && contentItem.isHighlight) ? 'highlight' : 'normal']"
|
||||
>
|
||||
{{ contentItem.text }}
|
||||
</span>
|
||||
</div>
|
||||
<span class="order-main-price">{{ extensionJSON.price }}</span>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="businessID === CHAT_MSG_CUSTOM_TYPE.LINK">
|
||||
<div class="text-link">
|
||||
<div :class="['text-link-description', 'description']">
|
||||
<p>{{ extensionJSON.text }}</p>
|
||||
</div>
|
||||
<a
|
||||
:class="['link']"
|
||||
:href="extensionJSON.link"
|
||||
target="view_window"
|
||||
>{{
|
||||
TUITranslateService.t("message.custom.查看详情>>")
|
||||
}}</a>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span>{{ defaultMessageContent }}</span>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { TUITranslateService, IMessageModel } from '@tencentcloud/chat-uikit-engine';
|
||||
import { ref, computed, withDefaults } from '../../../../../adapter-vue';
|
||||
import { CHAT_MSG_CUSTOM_TYPE } from '../../../../../constant';
|
||||
import { JSONToObject, isUrl } from '../../../../../utils/index';
|
||||
import Icon from '../../../../common/Icon.vue';
|
||||
import star from '../../../../../assets/icon/star-light.png';
|
||||
import { IHighlightContent } from '../../../type';
|
||||
import { ISearchResultListItem } from '../../../../../interface';
|
||||
interface IProps {
|
||||
contentText: IHighlightContent[];
|
||||
message: IMessageModel | ISearchResultListItem;
|
||||
messageContent: Record<string, unknown> | undefined;
|
||||
}
|
||||
const props = withDefaults(defineProps<IProps>(), {
|
||||
contentText: () => ([]) as IHighlightContent[],
|
||||
message: () => ({}) as IMessageModel,
|
||||
messageContent: () => ({}) as Record<string, unknown>,
|
||||
});
|
||||
|
||||
const custom = ref<{ data?: string; description?: string; extension?: string }>(
|
||||
(props?.message as IMessageModel)?.payload,
|
||||
);
|
||||
const extensionJSON = computed(() => custom?.value?.data ? JSONToObject(custom.value.data) : custom?.value?.data);
|
||||
const businessID = computed(() => extensionJSON?.value?.businessID);
|
||||
const descriptionForShow = ref<Array<{ text: string; isHighlight: boolean }>>(props?.contentText);
|
||||
const defaultMessageContent = ref<string>(props?.messageContent?.custom as string || '[自定义消息]');
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
@import "../../../../../assets/styles/common";
|
||||
|
||||
.message-abstract-custom {
|
||||
.service {
|
||||
.service-header {
|
||||
font-size: 14px;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.service-list {
|
||||
.service-list-item {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.evaluate {
|
||||
.evaluate-list {
|
||||
padding: 5px 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
.evaluate-item {
|
||||
padding: 0 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.order {
|
||||
display: flex;
|
||||
|
||||
.order-main {
|
||||
padding-left: 5px;
|
||||
|
||||
.order-main-title {
|
||||
font-size: 14px;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.order-main-description {
|
||||
font-family: PingFangSC-Regular, sans-serif;
|
||||
width: 145px;
|
||||
line-height: 17px;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
letter-spacing: 0;
|
||||
margin-bottom: 6px;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.order-main-price {
|
||||
font-family: PingFangSC-Regular, sans-serif;
|
||||
line-height: 25px;
|
||||
color: #ff7201;
|
||||
}
|
||||
}
|
||||
|
||||
.order-img {
|
||||
width: 67px;
|
||||
height: 67px;
|
||||
}
|
||||
}
|
||||
|
||||
.link {
|
||||
font-size: 14px;
|
||||
color: #679ce1;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 14px;
|
||||
color: #000;
|
||||
|
||||
.highlight {
|
||||
background-color: #007aff33;
|
||||
}
|
||||
|
||||
.normal {
|
||||
font-size: 14px;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,152 @@
|
||||
<template>
|
||||
<div :class="['message-abstract-file', `message-abstract-file-${displayType}`]">
|
||||
<div :class="['message-abstract-file-left']">
|
||||
<img
|
||||
:class="['message-abstract-file-left-icon']"
|
||||
:src="typeIcon.iconSrc"
|
||||
>
|
||||
</div>
|
||||
<div :class="['message-abstract-file-main']">
|
||||
<div :class="['message-abstract-file-main-name']">
|
||||
<span
|
||||
v-for="(contentItem, index) in contentText"
|
||||
:key="index"
|
||||
:class="[(contentItem && contentItem.isHighlight) ? 'highlight' : 'normal']"
|
||||
>
|
||||
{{ contentItem.text }}
|
||||
</span>
|
||||
</div>
|
||||
<div :class="['message-abstract-file-main-size']">
|
||||
{{ fileSize }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, withDefaults } from '../../../../../adapter-vue';
|
||||
import { IHighlightContent } from '../../../type';
|
||||
interface IProps {
|
||||
contentText: Array<IHighlightContent>;
|
||||
messageContent: Record<string, unknown> | undefined;
|
||||
displayType: 'bubble' | 'info';
|
||||
}
|
||||
const props = withDefaults(defineProps<IProps>(), {
|
||||
contentText: () => ([]) as Array<IHighlightContent>,
|
||||
messageContent: () => ({}) as Record<string, unknown>,
|
||||
displayType: 'bubble',
|
||||
});
|
||||
|
||||
const contentText = ref<Array<{ text: string; isHighlight: boolean }>>(props.contentText);
|
||||
const typeIcon = computed(() => {
|
||||
const fileUrl = props?.messageContent?.url as string;
|
||||
const index = fileUrl?.lastIndexOf('.');
|
||||
const type = fileUrl?.substring(index + 1);
|
||||
return handleFileIconForShow(type);
|
||||
});
|
||||
const fileSize = computed(() => props?.messageContent?.size);
|
||||
const handleFileIconForShow = (type: string) => {
|
||||
const urlBase = 'https://web.sdk.qcloud.com/component/TUIKit/assets/file-';
|
||||
const fileTypes = [
|
||||
'image',
|
||||
'pdf',
|
||||
'text',
|
||||
'ppt',
|
||||
'presentation',
|
||||
'sheet',
|
||||
'zip',
|
||||
'word',
|
||||
'video',
|
||||
'unknown',
|
||||
];
|
||||
let url = '';
|
||||
let iconType = '';
|
||||
fileTypes?.forEach((typeName: string) => {
|
||||
if (type?.includes(typeName)) {
|
||||
url = urlBase + typeName + '.svg';
|
||||
iconType = typeName;
|
||||
}
|
||||
});
|
||||
return {
|
||||
iconSrc: url ? url : urlBase + 'unknown.svg',
|
||||
iconType: iconType ? iconType : 'unknown',
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "../../../../../assets/styles/common";
|
||||
|
||||
.message-abstract-file {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&-left {
|
||||
width: 42px;
|
||||
height: 32px;
|
||||
|
||||
&-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-right: 10px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
&-main {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
|
||||
&-name {
|
||||
width: 100%;
|
||||
color: #000;
|
||||
font-size: 14px;
|
||||
height: 20px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
.highlight {
|
||||
background-color: #007aff33;
|
||||
}
|
||||
|
||||
.normal {
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
&-size {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: #888;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
&-bubble {
|
||||
background-color: #f1f1f1;
|
||||
|
||||
.message-abstract-file-main {
|
||||
.message-abstract-file-main-name {
|
||||
color: #1f2329;
|
||||
|
||||
.normal {
|
||||
color: #1f2329;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-file {
|
||||
margin: 8px 10px 5px;
|
||||
padding: 10px;
|
||||
background-color: #f1f1f1;
|
||||
height: 51px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<div :class="['message-abstract-image-container']">
|
||||
<img
|
||||
:class="['message-abstract-image']"
|
||||
:src="imageUrl"
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { withDefaults, computed } from '../../../../../adapter-vue';
|
||||
import { IImageMessageContent } from '../../../../../interface';
|
||||
interface IProps {
|
||||
messageContent: Record<string, unknown> | IImageMessageContent | undefined;
|
||||
}
|
||||
const props = withDefaults(defineProps<IProps>(), {
|
||||
messageContent: () => ({}) as IImageMessageContent,
|
||||
});
|
||||
|
||||
const imageUrl = computed<string>(() => (props.messageContent as IImageMessageContent).url || '');
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
@import "../../../../../assets/styles/common";
|
||||
|
||||
.message-abstract-image-container {
|
||||
max-width: 100px;
|
||||
max-height: 100px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
overflow: hidden;
|
||||
background-color: #fff;
|
||||
|
||||
.message-abstract-image {
|
||||
max-width: 100px;
|
||||
max-height: 100px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<div
|
||||
:class="[
|
||||
'message-abstract-text',
|
||||
`message-abstract-text-${highlightType}`,
|
||||
`message-abstract-text-${displayType}`,
|
||||
]"
|
||||
>
|
||||
<span
|
||||
v-for="(contentItem, index) in contentText"
|
||||
:key="index"
|
||||
:class="[(contentItem && contentItem.isHighlight) ? 'highlight' : 'normal']"
|
||||
>
|
||||
{{ transformTextWithKeysToEmojiNames(contentItem.text) }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, withDefaults } from '../../../../../adapter-vue';
|
||||
import { transformTextWithKeysToEmojiNames } from '../../../../TUIChat/emoji-config';
|
||||
import { IHighlightContent } from '../../../type';
|
||||
|
||||
interface IProps {
|
||||
content: IHighlightContent[];
|
||||
highlightType: 'font' | 'background';
|
||||
displayType: 'info' | 'bubble';
|
||||
}
|
||||
const props = withDefaults(defineProps<IProps>(), {
|
||||
content: () => ([]) as IHighlightContent[],
|
||||
highlightType: 'font',
|
||||
displayType: 'info',
|
||||
});
|
||||
|
||||
const contentText = ref<Array<{ text: string; isHighlight: boolean }>>(props.content);
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
@import "../../../../../assets/styles/common";
|
||||
|
||||
.message-abstract-text {
|
||||
justify-content: flex-start;
|
||||
|
||||
&-font {
|
||||
color: #999;
|
||||
|
||||
.highlight {
|
||||
color: #007aff;
|
||||
}
|
||||
|
||||
.normal {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
&-background {
|
||||
color: #1f2329;
|
||||
|
||||
.highlight {
|
||||
background-color: #007aff33;
|
||||
}
|
||||
|
||||
.normal {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
&-info {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 12px;
|
||||
|
||||
.highlight {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.normal {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
&-bubble {
|
||||
font-size: 14px;
|
||||
|
||||
.highlight {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.normal {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<div :class="['message-abstract-video']">
|
||||
<div class="message-abstract-video-box">
|
||||
<img
|
||||
:src="videoUrl"
|
||||
:class="['video-snapshot']"
|
||||
>
|
||||
<Icon
|
||||
:file="playIcon"
|
||||
class="video-play"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { computed } from '../../../../../adapter-vue';
|
||||
import Icon from '../../../../common/Icon.vue';
|
||||
import playIcon from '../../../../../assets/icon/video-play.png';
|
||||
import { IVideoMessageContent } from '../../../../../interface';
|
||||
interface IProps {
|
||||
messageContent: Record<string, unknown> | IVideoMessageContent | undefined;
|
||||
}
|
||||
const props = withDefaults(defineProps<IProps>(), {
|
||||
messageContent: () => ({}) as IVideoMessageContent,
|
||||
});
|
||||
const videoUrl = computed<string>(() => {
|
||||
return (props.messageContent as IVideoMessageContent).snapshotUrl || (props.messageContent as IVideoMessageContent).url;
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
@import "../../../../../assets/styles/common";
|
||||
|
||||
.message-abstract-video {
|
||||
max-width: 100px;
|
||||
max-height: 100px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
overflow: hidden;
|
||||
background-color: #fff;
|
||||
|
||||
&-box {
|
||||
max-width: 100px;
|
||||
max-height: 100px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
overflow: hidden;
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
|
||||
.video-snapshot {
|
||||
max-width: 100px;
|
||||
max-height: 100px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.video-play {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 3;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
}</style>
|
||||
@@ -0,0 +1,24 @@
|
||||
.search-result-list-item-h5 {
|
||||
padding: 10px 0;
|
||||
border-radius: 0;
|
||||
|
||||
.bubble {
|
||||
.bubble-left {
|
||||
.bubble-left-avatar {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.bubble-main {
|
||||
.bubble-main-name {
|
||||
color: #333;
|
||||
font-family: "PingFang SC", sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
@import '../../../../../assets/styles/common';
|
||||
@import './web';
|
||||
@import './h5';
|
||||
@@ -0,0 +1,262 @@
|
||||
.search-result-list-item {
|
||||
padding: 8px 10px;
|
||||
border-bottom: 1px solid rgba(0,0,0,0.1);
|
||||
cursor: pointer;
|
||||
|
||||
&-image {
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
max-width: 100px;
|
||||
max-height: 100px;
|
||||
overflow: hidden;
|
||||
box-sizing: content-box;
|
||||
border: 1px solid #f1f1f1;
|
||||
padding: 0;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
&-file {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.info {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
|
||||
&-left {
|
||||
&-avatar {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
&-main {
|
||||
flex: 1;
|
||||
padding: 0 10px;
|
||||
overflow: hidden;
|
||||
|
||||
&-name,
|
||||
&-content {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&-name {
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
&-content {
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
|
||||
.highlight {
|
||||
color: #007aff;
|
||||
}
|
||||
|
||||
.normal {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-right {
|
||||
width: fit-content;
|
||||
|
||||
&-time {
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
letter-spacing: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bubble {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
|
||||
&-left {
|
||||
&-avatar {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
&-main {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 8px;
|
||||
|
||||
&-name {
|
||||
max-width: 100%;
|
||||
width: fit-content;
|
||||
padding-bottom: 4px;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
letter-spacing: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&-content {
|
||||
max-width: 100%;
|
||||
width: fit-content;
|
||||
box-sizing: border-box;
|
||||
padding: 12px;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #000;
|
||||
letter-spacing: 0;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
overflow: hidden;
|
||||
background: #eff0f1;
|
||||
border-radius: 0 10px 10px;
|
||||
|
||||
.highlight {
|
||||
background-color: #007aff33;
|
||||
}
|
||||
|
||||
.normal {
|
||||
color: #1f2329;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
|
||||
&-time {
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
letter-spacing: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&-to {
|
||||
cursor: pointer;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #007aff;
|
||||
letter-spacing: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.file {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
&-header {
|
||||
flex: 1;
|
||||
padding: 10px 0;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&-avatar {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 4px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
&-name {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&-name,
|
||||
&-time,
|
||||
&-to {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
height: 24px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&-to {
|
||||
cursor: pointer;
|
||||
font-weight: 400;
|
||||
color: #007aff;
|
||||
letter-spacing: 0;
|
||||
white-space: nowrap;
|
||||
padding-right: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
&-main-content {
|
||||
padding: 10px;
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
max-width: 100px;
|
||||
max-height: 100px;
|
||||
overflow: hidden;
|
||||
box-sizing: content-box;
|
||||
|
||||
.image-container {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
max-width: 100px;
|
||||
max-height: 100px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
.image-container-hover {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
background-color: rgba(0,0,0,0.3);
|
||||
|
||||
.image-container-hover-text {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hover-info {
|
||||
border-radius: 5px;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.hover-bubble {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
Reference in New Issue
Block a user