<template>
|
<div class="flex flex-col py-6 gap-2">
|
<!-- #region ====================== 附件展示 ======================-->
|
<div class="flex px-4 rounded-lg relative flex-row-reverse items-center" :key="`${msg.historyId}_${msg.role}`">
|
<img class="rounded-full size-12 flex-0 ml-4 invisible" :src="roleImageMap[msg.role]" alt="" srcset="" />
|
<div class="flex-auto flex justify-end">
|
<div class="inline-flex flex-col">
|
<div class="rounded-[6px] leading-relaxed group">
|
<div v-if="msg.attachList?.length > 0" class="flex gap-3.5 w-full overflow-x-auto">
|
<div
|
v-for="(item, index) in msg.attachList"
|
:key="index"
|
class="flex items-center gap-2 bg-[#e9e9e9] px-2 py-3 rounded-lg w-[220px] relative group"
|
@click="openAttachPreview(item)"
|
:class="{ 'cursor-pointer': item.type === 'table' }"
|
>
|
<template v-if="item.type === 'file'">
|
<el-image
|
:zoom-rate="1.2"
|
fit="cover"
|
class="w-[24px] rounded cursor-pointer"
|
v-if="item.model.groupType === 'image'"
|
:src="item.model.previewUrl"
|
:preview-src-list="[item.model.previewUrl]"
|
/>
|
<div v-else class="ywifont !text-[24px] flex-0" :class="[`ywicon-${item.icon}`, item.iconClass]"></div>
|
<div class="flex flex-col gap-0.5 w-full flex-auto justify-between">
|
<div class="font-bold over-ellipsis w-full">{{ item.title }}</div>
|
<div v-if="item.model.type" class="text-info text-sm over-ellipsis w-full">
|
{{ `${item.model.type ?? ''}，${item.model.size ?? ''}` }}
|
</div>
|
</div>
|
</template>
|
<template v-if="item.type === 'table'">
|
<div class="ywifont !text-[24px] flex-0" :class="[`ywicon-${item.icon}`, item.iconClass]"></div>
|
<div class="flex flex-col gap-0.5 w-full flex-auto">
|
<div class="font-bold over-ellipsis w-full">{{ item.title }}</div>
|
<div class="text-info text-sm over-ellipsis w-full">{{ `业务表格，${item.model.values?.length} 条记录` }}</div>
|
</div>
|
</template>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<BusinessTablePreview :data="attachPreviewData" v-model="attachPreviewIsShow" />
|
<!-- #endregion -->
|
|
<div class="flex px-4 rounded-lg relative flex-row-reverse items-center" :key="`${msg.historyId}_${msg.role}`">
|
<img class="rounded-full size-12 flex-0 ml-4" :src="roleImageMap[msg.role]" alt="" srcset="" />
|
<div class="flex-auto flex justify-end">
|
<div class="inline-flex flex-col">
|
<div class="rounded-[6px] p-4 leading-relaxed group" :style="{ backgroundColor: 'rgb(197 224 255)' }">
|
<!-- #region ====================== 用户操作按钮 ======================-->
|
<div v-if="msg.content?.values && !isSharePage" class="absolute flex items-center bottom-0 group invisible">
|
<div class="bg-[#fff] flex items-center relative mr-4 space-x-2 flex-nowrap rounded-[6px] py-2 px-2 group-hover:visible">
|
<el-tooltip effect="dark" content="复制" placement="top">
|
<div class="flex items-center justify-center size-[20px]">
|
<i
|
class="p-2 ywifont ywicon-copy cursor-pointer hover:text-[#0284ff] font-medium !text-[15px] hover:!text-[18px]"
|
@click="copyUserClick(msg)"
|
/>
|
</div>
|
</el-tooltip>
|
<el-tooltip effect="dark" content="设为常用语" placement="top">
|
<div class="flex items-center justify-center size-[20px]">
|
<i
|
class="p-2 ywifont ywicon-cubelifangti cursor-pointer hover:text-[#0284ff] text-[#000] font-[590] !text-[15px] hover:!text-[18px]"
|
@click="setCommonQuestionClick(msg)"
|
/>
|
</div>
|
</el-tooltip>
|
<el-tooltip effect="dark" content="分享" placement="top">
|
<div class="flex items-center justify-center size-[15px]">
|
<i
|
:class="{ 'text-[#0284ff]': msg.state === AnswerState.Unlike }"
|
class="p-2 ywifont ywicon-fenxiang cursor-pointer hover:text-[#0284ff] !text-[15px] hover:!text-[18px]"
|
@click="shareClick(msg)"
|
/>
|
</div>
|
</el-tooltip>
|
</div>
|
</div>
|
|
<!-- #endregion -->
|
<!-- #region ====================== 消息内容 ======================-->
|
<template v-if="msg.content?.values">
|
<!-- #region ====================== 回答组件 ======================-->
|
<component
|
:conclusion="msg.conclusion"
|
:is="answerTypeMapCom[msg.content.type]"
|
:data="msg.content.values"
|
:originData="msg"
|
/>
|
|
<!-- #endregion -->
|
</template>
|
|
<!-- #endregion -->
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts" name="UserMsg">
|
import { useClipboard } from '@vueuse/core';
|
import { ElMessage } from 'element-plus';
|
import { AnswerState, answerTypeMapCom, roleImageMap, type ChatMessage } from '../model/types';
|
import { isSharePage } from '/@/stores/chatRoom';
|
import { ref } from 'vue';
|
import BusinessTablePreview from '../components/playBar/businessTablePreview/index.vue';
|
import { Attach } from '../components/playBar/hook/useAttach';
|
|
const emit = defineEmits<{
|
(event: 'copyMsg', msgObj: ChatMessage): void;
|
(event: 'shareClick', msgObj: ChatMessage): void;
|
(event: 'setCommonQuestion', msgObj: ChatMessage): void;
|
}>();
|
const props = defineProps({
|
/** @description 当前消息 */
|
msg: {
|
type: Object,
|
},
|
});
|
const { copy } = useClipboard();
|
|
//用户复制问题
|
const copyUserClick = (item) => {
|
const text = item.content.values;
|
copy(text);
|
ElMessage.success('复制成功');
|
};
|
//用户问题设置为常用语
|
const setCommonQuestionClick = (item) => {
|
emit('setCommonQuestion', item);
|
};
|
|
const shareClick = (msg) => {
|
emit('shareClick', msg);
|
};
|
|
//#region ====================== 附件预览 ======================
|
const attachPreviewIsShow = ref(false);
|
const attachPreviewData = ref<Attach>();
|
const openAttachPreview = (item: Attach) => {
|
if (item.type === 'file') return;
|
attachPreviewIsShow.value = true;
|
attachPreviewData.value = item;
|
};
|
//#endregion
|
</script>
|
<style scoped lang="scss"></style>
|
