历史显示附件

wujingjing

2025-03-04 129e4b98811106fbf7964e8fec547350f2875e5c

 src/components/chat/user/index.vue

@@ -1,55 +1,101 @@
<template>
   <div class="flex px-4 py-6 rounded-lg relative flex-row-reverse" :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 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"
                     >
                        <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>
                     </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 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>
      <!-- #endregion -->

               <!-- #endregion -->
               <!-- #region ====================== 消息内容 ======================-->
               <template v-if="msg.content?.values">
                  <!-- #region ====================== 回答组件 ======================-->
                  <component
                     :conclusion="msg.conclusion"
                     :is="answerTypeMapCom[msg.content.type]"
                     :data="msg.content.values"
                     :originData="msg"
                  />
      <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 -->
               </template>
                  <!-- #region ====================== 消息内容 ======================-->
                  <template v-if="msg.content?.values">
                     <!-- #region ====================== 回答组件 ======================-->
                     <component
                        :conclusion="msg.conclusion"
                        :is="answerTypeMapCom[msg.content.type]"
                        :data="msg.content.values"
                        :originData="msg"
                     />

               <!-- #endregion -->
                     <!-- #endregion -->
                  </template>

                  <!-- #endregion -->
               </div>
            </div>
         </div>
      </div>