jiuyiUniapp/jiuyi/TUIKit/components/TUISearch/search-result/search-result-item/message-abstract/message-abstract-file.vue

153 lines
3.4 KiB
Vue
Raw Normal View History

2024-12-18 15:46:27 +08:00
<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>