From bb760e2aa446c815c73cb63f7d9a094976605850 Mon Sep 17 00:00:00 2001
From: huxuejian <huxuejian@youkang.com>
Date: Tue, 25 Aug 2026 18:43:33 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E9=97=AE=E9=A2=98=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../chat-history-drawer/chat-history-drawer.vue        | 10 ++++++++--
 src/components/chat-history-drawer/message-me.vue      |  2 +-
 src/components/chat-history-drawer/message-other.vue   |  2 +-
 src/utils/im-image.js                                  |  5 +++++
 .../history-chat-room/history-chat-room.vue            | 10 ++++++++--
 .../hlw-hospital/history-chat-room/message-me.vue      |  2 +-
 .../hlw-hospital/history-chat-room/message-other.vue   |  2 +-
 7 files changed, 25 insertions(+), 8 deletions(-)
 create mode 100644 src/utils/im-image.js

diff --git a/src/components/chat-history-drawer/chat-history-drawer.vue b/src/components/chat-history-drawer/chat-history-drawer.vue
index 006cfbd..d8117f7 100644
--- a/src/components/chat-history-drawer/chat-history-drawer.vue
+++ b/src/components/chat-history-drawer/chat-history-drawer.vue
@@ -10,13 +10,18 @@
             <div class="text-gray-400 text-12px leading-4 py-10px text-center mx-auto w-4/5">
               {{formatTime(i.EventTime) }}
             </div>
-            <div v-for="item in i.MsgBody">
+            <div v-for="(item, index) in i.MsgBody" :key="`${i.MsgId || i._id}-${index}`">
               <system-message v-if="item.MsgType === 'TIMCustomElem'"
                 :messageItem="transformCustomMessage(item.MsgContent)"></system-message>
-              <div v-if="item.MsgType === 'TIMTextElem'">
+              <div v-else-if="item.MsgType === 'TIMTextElem'">
                 <message-me v-if="i.From_Account == doctorCode" :name="doctorName" :text="item.MsgContent.Text" />
                 <message-other v-else :text="item.MsgContent.Text" :name="patientName" />
               </div>
+              <div v-else-if="item.MsgType === 'TIMImageElem'">
+                <message-me v-if="i.From_Account == doctorCode" :name="doctorName"
+                  :img-src="getArchivedImImageUrl(i.MsgId)" />
+                <message-other v-else :name="patientName" :img-src="getArchivedImImageUrl(i.MsgId)" />
+              </div>
             </div>
           </template>
         </div>
@@ -42,6 +47,7 @@ import MyLayout, { LayoutMain, LayoutItem } from "@/components/layout";
 import systemMessage from './system-message.vue'
 import messageMe from "./message-me.vue";
 import messageOther from "./message-other.vue";
+import { getArchivedImImageUrl } from "@/utils/im-image";
 const emits = defineEmits(["close"]);
 const props = defineProps({
   orderId: {
diff --git a/src/components/chat-history-drawer/message-me.vue b/src/components/chat-history-drawer/message-me.vue
index 23ed2d1..897cf5a 100644
--- a/src/components/chat-history-drawer/message-me.vue
+++ b/src/components/chat-history-drawer/message-me.vue
@@ -7,7 +7,7 @@
           class="inline-block max-w-full p-12px bg-[#dceafd] rounded-10px rounded-tr-none text-14px text-dark-500 leading-21px">
           {{ text }}
         </div>
-        <img v-if="imgSrc" class="max-w-200px" :src="imgSrc">
+        <img v-if="imgSrc" class="max-w-200px rounded-8px" :src="imgSrc" alt="聊天图片">
       </div>
     </div>
     <div class="rounded">
diff --git a/src/components/chat-history-drawer/message-other.vue b/src/components/chat-history-drawer/message-other.vue
index 78b6c43..c2fc728 100644
--- a/src/components/chat-history-drawer/message-other.vue
+++ b/src/components/chat-history-drawer/message-other.vue
@@ -9,7 +9,7 @@
         class="inline-block max-w-full p-12px bg-gray-100 rounded-10px rounded-tl-none text-14px text-dark-500 leading-21px">
         {{ text }}
       </div>
-      <img v-if="imgSrc" class="max-w-200px" :src="imgSrc">
+      <img v-if="imgSrc" class="max-w-200px rounded-8px" :src="imgSrc" alt="聊天图片">
     </div>
   </div>
 </template>
diff --git a/src/utils/im-image.js b/src/utils/im-image.js
new file mode 100644
index 0000000..0b4a2da
--- /dev/null
+++ b/src/utils/im-image.js
@@ -0,0 +1,5 @@
+export function getArchivedImImageUrl(msgId) {
+  if (!msgId) return "";
+  const apiBase = String(import.meta.env.VITE_API_URL || "").replace(/\/$/, "");
+  return `${apiBase}/im-chat/image/${encodeURIComponent(msgId)}`;
+}
diff --git a/src/views/hlw-hospital/history-chat-room/history-chat-room.vue b/src/views/hlw-hospital/history-chat-room/history-chat-room.vue
index 73da05c..faa6a6d 100644
--- a/src/views/hlw-hospital/history-chat-room/history-chat-room.vue
+++ b/src/views/hlw-hospital/history-chat-room/history-chat-room.vue
@@ -27,14 +27,19 @@
           <template v-for="i in messageList" :key="i._id">
             <div class="text-gray-400 text-12px leading-4 py-10px text-center mx-auto w-4/5" v-if="showTime(i)">{{
               formatTime(i.EventTime) }}</div>
-            <div v-for="item in i.MsgBody">
+            <div v-for="(item, index) in i.MsgBody" :key="`${i.MsgId || i._id}-${index}`">
               <customeMessageCustom v-if="item.MsgType === 'TIMCustomElem'"
                 :messageItem="transformCustomMessage(item.MsgContent)"></customeMessageCustom>
-              <div v-if="item.MsgType === 'TIMTextElem'">
+              <div v-else-if="item.MsgType === 'TIMTextElem'">
                 <message-me v-if="i.From_Account === doctorCode" :name="selectHistoryUser.doctorName"
                   :text="item.MsgContent.Text" />
                 <message-other v-else :text="item.MsgContent.Text" :name="selectHistoryUser.name" />
               </div>
+              <div v-else-if="item.MsgType === 'TIMImageElem'">
+                <message-me v-if="i.From_Account === doctorCode" :name="selectHistoryUser.doctorName"
+                  :img-src="getArchivedImImageUrl(i.MsgId)" />
+                <message-other v-else :name="selectHistoryUser.name" :img-src="getArchivedImImageUrl(i.MsgId)" />
+              </div>
             </div>
           </template>
         </div>
@@ -57,6 +62,7 @@ import dayjs from "dayjs";
 import messageMe from "./message-me.vue";
 import messageOther from "./message-other.vue";
 import { getChatRecord, orderHasDiagnosis } from "@/api/hlw";
+import { getArchivedImImageUrl } from "@/utils/im-image";
 const doctorCode = sessionStorage.getItem("doctorNo");
 const summaryVisible = ref(false);
 const visible = ref(false);
diff --git a/src/views/hlw-hospital/history-chat-room/message-me.vue b/src/views/hlw-hospital/history-chat-room/message-me.vue
index 23ed2d1..897cf5a 100644
--- a/src/views/hlw-hospital/history-chat-room/message-me.vue
+++ b/src/views/hlw-hospital/history-chat-room/message-me.vue
@@ -7,7 +7,7 @@
           class="inline-block max-w-full p-12px bg-[#dceafd] rounded-10px rounded-tr-none text-14px text-dark-500 leading-21px">
           {{ text }}
         </div>
-        <img v-if="imgSrc" class="max-w-200px" :src="imgSrc">
+        <img v-if="imgSrc" class="max-w-200px rounded-8px" :src="imgSrc" alt="聊天图片">
       </div>
     </div>
     <div class="rounded">
diff --git a/src/views/hlw-hospital/history-chat-room/message-other.vue b/src/views/hlw-hospital/history-chat-room/message-other.vue
index 78b6c43..c2fc728 100644
--- a/src/views/hlw-hospital/history-chat-room/message-other.vue
+++ b/src/views/hlw-hospital/history-chat-room/message-other.vue
@@ -9,7 +9,7 @@
         class="inline-block max-w-full p-12px bg-gray-100 rounded-10px rounded-tl-none text-14px text-dark-500 leading-21px">
         {{ text }}
       </div>
-      <img v-if="imgSrc" class="max-w-200px" :src="imgSrc">
+      <img v-if="imgSrc" class="max-w-200px rounded-8px" :src="imgSrc" alt="聊天图片">
     </div>
   </div>
 </template>