From 731989eaac6dab08af6dc70d7d967196dcea8dbb Mon Sep 17 00:00:00 2001
From: yangzhe <yangzhe@qq.com>
Date: Fri, 20 Mar 2026 17:09:23 +0800
Subject: [PATCH] =?UTF-8?q?feat(chat):=20=E5=B0=86=E7=BB=93=E6=9E=84?=
 =?UTF-8?q?=E5=8C=96=E6=B6=88=E6=81=AF=E8=A7=A3=E6=9E=90=E9=80=BB=E8=BE=91?=
 =?UTF-8?q?=E4=BB=8E=E9=A1=B5=E9=9D=A2=E7=BB=84=E4=BB=B6=E6=8F=90=E5=8F=96?=
 =?UTF-8?q?=E5=88=B0=E5=B7=A5=E5=85=B7=E5=87=BD=E6=95=B0=E4=B8=AD=EF=BC=8C?=
 =?UTF-8?q?=E6=8F=90=E9=AB=98=E4=BB=A3=E7=A0=81=E5=A4=8D=E7=94=A8=E6=80=A7?=
 =?UTF-8?q?=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/chat/index.vue       | 191 ++++++++++++++++++++++++++++++++++++-
 pages/home/index/index.vue |  82 +---------------
 utils/chat.js              | 106 ++++++++++++++++++++
 3 files changed, 295 insertions(+), 84 deletions(-)

diff --git a/pages/chat/index.vue b/pages/chat/index.vue
index e1c078c..3643007 100644
--- a/pages/chat/index.vue
+++ b/pages/chat/index.vue
@@ -157,8 +157,56 @@
                 :src="receiverHeadSculptureUrl"
                 mode="scaleToFill"
               />
-              <view class="message-content">
-                <text>{{ message.message }}</text>
+              <view
+                class="message-content"
+                :class="{
+                  'message-content-structured':
+                    getStructuredMessageBlocks(message).length,
+                }"
+              >
+                <view
+                  v-if="getStructuredMessageBlocks(message).length"
+                  class="structured-message"
+                >
+                  <view
+                    v-for="(block, blockIndex) in getStructuredMessageBlocks(
+                      message,
+                    )"
+                    :key="`${message.id || index}-block-${blockIndex}`"
+                    class="structured-item"
+                    :class="`structured-item-${block.type}`"
+                  >
+                    <text v-if="block.type === 'text'" class="structured-text">
+                      {{ block.value }}
+                    </text>
+                    <image
+                      v-else-if="block.type === 'image'"
+                      class="structured-image"
+                      :src="block.url"
+                      mode="widthFix"
+                      @click="previewMessageImage(block.url)"
+                    ></image>
+                    <view
+                      v-else-if="block.type === 'file'"
+                      class="structured-file"
+                      @click="downloadMessageFile(block.url)"
+                    >
+                      <image
+                        class="structured-file-icon"
+                        src="/static/common/images/icon-file.png"
+                        mode="scaleToFill"
+                      ></image>
+                      <text class="structured-file-name">{{ block.name }}</text>
+                      <u-icon
+                        name="download"
+                        size="36"
+                        color="#666666"
+                        class="structured-file-download"
+                      ></u-icon>
+                    </view>
+                  </view>
+                </view>
+                <markdown-viewer v-else :content="message.message" />
               </view>
             </view>
           </view>
@@ -194,9 +242,11 @@
 </template>
 
 <script>
-import HeaderBar from "@/components/HeaderBar.vue"; // 导入头部组件
+import HeaderBar from "@/components/HeaderBar.vue";
+import MarkdownViewer from "@/components/markdown-viewer/markdown-viewer";
 import {
   formatChatShowTime,
+  parseStructuredMessageBlocks,
   scrollToBottomByContentHeight,
   shouldShowTime,
 } from "@/utils/chat.js";
@@ -204,7 +254,8 @@ import {
 export default {
   name: "ChatDetail",
   components: {
-    HeaderBar, // 注册头部组件
+    HeaderBar,
+    MarkdownViewer,
   },
   data() {
     return {
@@ -292,6 +343,27 @@ export default {
   },
 
   methods: {
+    // 解析结构化消息块
+    getStructuredMessageBlocks(message) {
+      return parseStructuredMessageBlocks(message, this.baseUrl);
+    },
+    previewMessageImage(url) {
+      if (!url) return;
+      uni.previewImage({
+        current: url,
+        urls: [url],
+      });
+    },
+    downloadMessageFile(url) {
+      if (!url) return;
+      if (typeof window !== "undefined" && window.open) {
+        window.open(url, "_blank");
+        return;
+      }
+      uni.downloadFile({
+        url,
+      });
+    },
     // 返回
     handleLeftClick() {
       uni.navigateBack();
@@ -621,6 +693,117 @@ export default {
           border-radius: 0 16rpx 16rpx 16rpx;
           font-size: 28rpx;
           line-height: 1.5;
+
+          &.message-content-structured {
+            background-color: transparent;
+            padding: 0;
+            border-radius: 0;
+          }
+
+          /deep/ .markdown-container {
+            padding: 0;
+
+            p {
+              margin: 0;
+              padding: 0;
+            }
+
+            pre {
+              max-width: 100%;
+              overflow-x: auto;
+            }
+
+            img {
+              max-width: 100%;
+            }
+
+            table {
+              font-size: 24rpx;
+            }
+          }
+
+          .structured-message {
+            .structured-item + .structured-item {
+              margin-top: 16rpx;
+            }
+
+            .structured-item {
+              max-width: 100%;
+            }
+
+            .structured-item-text {
+              .structured-text {
+                display: inline-block;
+                background-color: #ffffff;
+                color: #333333;
+                font-size: 28rpx;
+                line-height: 1.5;
+                white-space: pre-wrap;
+                word-break: break-word;
+                padding: 20rpx 24rpx;
+                border-radius: 0 16rpx 16rpx 16rpx;
+              }
+            }
+
+            .structured-text {
+              display: inline-block;
+              color: #333333;
+              font-size: 28rpx;
+              line-height: 1.5;
+              white-space: pre-wrap;
+              word-break: break-word;
+            }
+
+            .structured-item-image {
+              .structured-image {
+                display: block;
+                max-width: 240rpx;
+                border-radius: 12rpx;
+              }
+            }
+
+            .structured-image {
+              display: block;
+              max-width: 240rpx;
+              border-radius: 12rpx;
+            }
+
+            .structured-item-file {
+              .structured-file {
+                display: flex;
+                align-items: center;
+                width: 500rpx;
+                max-width: 100%;
+                padding: 24rpx;
+                background-color: #ffffff;
+                border-radius: 16rpx;
+                box-sizing: border-box;
+
+                .structured-file-icon {
+                  width: 48rpx;
+                  height: 62rpx;
+                  flex-shrink: 0;
+                  margin-right: 20rpx;
+                }
+
+                .structured-file-name {
+                  flex: 1;
+                  font-size: 28rpx;
+                  color: #333333;
+                  word-break: break-all;
+                  display: -webkit-box;
+                  -webkit-box-orient: vertical;
+                  -webkit-line-clamp: 1;
+                  overflow: hidden;
+                }
+
+                .structured-file-download {
+                  flex-shrink: 0;
+                  margin-left: 20rpx;
+                }
+              }
+            }
+          }
         }
       }
 
diff --git a/pages/home/index/index.vue b/pages/home/index/index.vue
index 0e10573..67491a8 100644
--- a/pages/home/index/index.vue
+++ b/pages/home/index/index.vue
@@ -514,6 +514,7 @@ import PerfectInfo from "@/components/PerfectInfo.vue";
 import ChatHistory from "@/components/ChatHistory.vue"; // 导入新组件
 import HeaderBar from "@/components/HeaderBar.vue"; // 导入头部组件
 import {
+  parseStructuredMessageBlocks,
   processChatMessageContent,
   scrollToBottomByContentHeight,
   sortChatMessages,
@@ -1299,86 +1300,7 @@ export default {
 
     // 解析结构化消息块
     getStructuredMessageBlocks(message) {
-      const rawMessage =
-        (message && (message.rawMessage || message.message)) || "";
-      if (!rawMessage || typeof rawMessage !== "string") return [];
-
-      let parsed = null;
-      try {
-        parsed = JSON.parse(rawMessage);
-      } catch (error) {
-        return [];
-      }
-      if (!parsed || typeof parsed !== "object") return [];
-
-      const answerTypeLabel = (parsed.answerTypeLabel || "").trim();
-      const imageUrl = parsed.imageUrl || "";
-      const nearbyPaths = parsed.nearbyPaths || "";
-
-      if (!answerTypeLabel && !imageUrl && !nearbyPaths) return [];
-
-      const blocks = [];
-      if (answerTypeLabel) {
-        blocks.push({ type: "text", value: answerTypeLabel });
-      }
-
-      this.normalizeResourceList(imageUrl).forEach((item) => {
-        const url = this.formatMessageResourceUrl(item);
-        if (url) blocks.push({ type: "image", url });
-      });
-
-      this.normalizeResourceList(nearbyPaths).forEach((item) => {
-        const url = this.formatMessageResourceUrl(item);
-        if (!url) return;
-        blocks.push({
-          type: "file",
-          url,
-          name: this.getFileNameFromPath(item),
-        });
-      });
-
-      return blocks;
-    },
-    normalizeResourceList(value) {
-      if (!value) return [];
-      if (Array.isArray(value)) {
-        return value.map((item) => String(item || "").trim()).filter(Boolean);
-      }
-      return String(value)
-        .split(/[\n,|]/)
-        .map((item) => item.trim())
-        .filter(Boolean);
-    },
-    formatMessageResourceUrl(path) {
-      if (!path) return "";
-      const currentPath = String(path).trim();
-      if (!currentPath) return "";
-      if (
-        currentPath.startsWith("http://") ||
-        currentPath.startsWith("https://") ||
-        currentPath.startsWith("blob:")
-      ) {
-        return currentPath;
-      }
-      const cleanPath = currentPath.replace(/\\/g, "/");
-      const cleanBaseUrl = (this.baseUrl || "")
-        .replace(/\\/g, "/")
-        .replace(/\/$/, "");
-      if (!cleanBaseUrl) return cleanPath;
-      if (cleanPath.startsWith("/")) return `${cleanBaseUrl}${cleanPath}`;
-      return `${cleanBaseUrl}/${cleanPath}`;
-    },
-    getFileNameFromPath(path) {
-      const cleanPath = String(path || "")
-        .replace(/\\/g, "/")
-        .split("?")[0];
-      const segments = cleanPath.split("/");
-      const fileName = segments[segments.length - 1] || "下载文件";
-      try {
-        return decodeURIComponent(fileName);
-      } catch (error) {
-        return fileName;
-      }
+      return parseStructuredMessageBlocks(message, this.baseUrl);
     },
     previewMessageImage(url) {
       if (!url) return;
diff --git a/utils/chat.js b/utils/chat.js
index 89b70e8..0bc1d19 100644
--- a/utils/chat.js
+++ b/utils/chat.js
@@ -214,3 +214,109 @@ export function formatHHmm(date) {
   const minutes = date.getMinutes().toString().padStart(2, "0");
   return `${hours}:${minutes}`;
 }
+
+/**
+ * 规范资源列表：将字符串或数组转换为trimmed、非空字符串数组。
+ *
+ * @param {string|Array<string>} value - 原始资源列表
+ * @returns {Array<string>} - 规范后的资源数组
+ */
+function normalizeResourceList(value) {
+  if (!value) return [];
+  if (Array.isArray(value)) {
+    return value.map((item) => String(item || "").trim()).filter(Boolean);
+  }
+  return String(value)
+    .split(/[\n,|]/)
+    .map((item) => item.trim())
+    .filter(Boolean);
+}
+
+/**
+ * 格式化消息资源URL：若URL已完整包含协议头或blob URI，则直接返回；否则，拼接基础URL。
+ *
+ * @param {string} path - 原始资源路径
+ * @param {string} baseUrl - 基础URL（可选）
+ * @returns {string} - 格式化后的URL
+ */
+function formatMessageResourceUrl(path, baseUrl) {
+  if (!path) return "";
+  const currentPath = String(path).trim();
+  if (!currentPath) return "";
+  if (
+    currentPath.startsWith("http://") ||
+    currentPath.startsWith("https://") ||
+    currentPath.startsWith("blob:")
+  ) {
+    return currentPath;
+  }
+  const cleanPath = currentPath.replace(/\\/g, "/");
+  const cleanBaseUrl = String(baseUrl || "")
+    .replace(/\\/g, "/")
+    .replace(/\/$/, "");
+  if (!cleanBaseUrl) return cleanPath;
+  if (cleanPath.startsWith("/")) return `${cleanBaseUrl}${cleanPath}`;
+  return `${cleanBaseUrl}/${cleanPath}`;
+}
+
+function getFileNameFromPath(path) {
+  const cleanPath = String(path || "")
+    .replace(/\\/g, "/")
+    .split("?")[0];
+  const segments = cleanPath.split("/");
+  const fileName = segments[segments.length - 1] || "下载文件";
+  try {
+    return decodeURIComponent(fileName);
+  } catch (error) {
+    return fileName;
+  }
+}
+
+/**
+ * 解析结构化消息块：从JSON字符串中提取文本、图片、文件资源。
+ *
+ * @param {string} message - 原始消息字符串（包含JSON格式）
+ * @param {string} baseUrl - 基础URL（可选，用于格式化资源URL）
+ * @returns {Array<{type: string, value?: string, url?: string, name?: string}>} - 解析后的消息块数组
+ */
+export function parseStructuredMessageBlocks(message, baseUrl) {
+  const rawMessage =
+    (message && (message.rawMessage || message.message)) || "";
+  if (!rawMessage || typeof rawMessage !== "string") return [];
+
+  let parsed = null;
+  try {
+    parsed = JSON.parse(rawMessage);
+  } catch (error) {
+    return [];
+  }
+  if (!parsed || typeof parsed !== "object") return [];
+
+  const answerTypeLabel = (parsed.answerTypeLabel || "").trim();
+  const imageUrl = parsed.imageUrl || "";
+  const nearbyPaths = parsed.nearbyPaths || "";
+
+  if (!answerTypeLabel && !imageUrl && !nearbyPaths) return [];
+
+  const blocks = [];
+  if (answerTypeLabel) {
+    blocks.push({ type: "text", value: answerTypeLabel });
+  }
+
+  normalizeResourceList(imageUrl).forEach((item) => {
+    const url = formatMessageResourceUrl(item, baseUrl);
+    if (url) blocks.push({ type: "image", url });
+  });
+
+  normalizeResourceList(nearbyPaths).forEach((item) => {
+    const url = formatMessageResourceUrl(item, baseUrl);
+    if (!url) return;
+    blocks.push({
+      type: "file",
+      url,
+      name: getFileNameFromPath(item),
+    });
+  });
+
+  return blocks;
+}