JiXinHui
/
YingXingAI
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(chat): AI回复支持结构化消息渲染，包括文本、图片和文件

This commit is contained in:
yangzhe 2026-03-19 11:06:30 +08:00
parent 3c4aaa0f77
commit 8e9c57a6f9
2 changed files with 285 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

289
pages/home/index/index.vue
View File

@ -258,6 +258,8 @@
class="message-content"
:class="{
'message-content-width': !message.isLoading,
'message-content-structured':
getStructuredMessageBlocks(message).length,
}"
>
<!-- 加载动画 -->
@ -266,7 +268,47 @@
<view class="dot"></view>
<view class="dot"></view>
</view>
<!-- 正常消息内容 -->
<view
v-else-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)"
>
<u-icon
name="download"
size="28"
color="#4370fe"
></u-icon>
<text class="structured-file-name">{{
block.name
}}</text>
</view>
</view>
</view>
<markdown-viewer v-else :content="message.message" />
</view>
</view>
@ -322,6 +364,8 @@
class="message-content"
:class="{
'message-content-width': !message.isLoading,
'message-content-structured':
getStructuredMessageBlocks(message).length,
}"
>
<view v-if="message.isLoading" class="loading-dots">
@ -329,6 +373,47 @@
<view class="dot"></view>
<view class="dot"></view>
</view>
<view
v-else-if="getStructuredMessageBlocks(message).length"
class="structured-message"
>
<view
v-for="(block, blockIndex) in getStructuredMessageBlocks(
message,
)"
:key="`${message.id || index}-teacher-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)"
>
<u-icon
name="download"
size="28"
color="#4370fe"
></u-icon>
<text class="structured-file-name">{{
block.name
}}</text>
</view>
</view>
</view>
<markdown-viewer v-else :content="message.message" />
</view>
</view>
@ -1087,12 +1172,20 @@ export default {
(msg) => !msg.isLoading,
);
const answerTypeLabel = data.detailedExplanation; // 文字
const imageUrl = data.imageUrl; // 图片
const nearbyPaths = data.nearbyPaths; // 文件
const message = `{\r\n "answerTypeLabel": ${JSON.stringify(
answerTypeLabel || "",
)},\r\n "imageUrl": ${JSON.stringify(
imageUrl || "",
)},\r\n "nearbyPaths": ${JSON.stringify(nearbyPaths || "")}\r\n}`;
// 创建AI回复消息对象
const aiMessage = {
id:
data.conversationId ||
Math.random().toString(36).substring(2, 15),
message: data.detailedExplanation,
this.currentDMid || Math.random().toString(36).substring(2, 15),
message: message,
sendDate: "",
isSend: true,
isRead: false,
@ -1160,6 +1253,107 @@ export default {
this.handleGetConversationDetail();
},
// 解析结构化消息块
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;
}
},
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,
});
},
// 处理消息内容，如果是JSON格式则解析并格式化
processMessageContent(message) {
return processChatMessageContent(message);
@ -1307,7 +1501,14 @@ export default {
// 回答反馈：点赞/点踩（统一调用刷新&上一页回退逻辑）
handleFeedback(message, isHelp) {
this.$u.api.ModifyStatus({ id: message.id, isHelp }).then((res) => {
if (!res.succeed) return;
if (!res.succeed) {
uni.showToast({
title: res.error || "操作失败",
icon: "none",
});
return;
}
this.$u.toast("操作成功");
// 刷新当前页；若空则自动回退上一页并刷新
this.refreshPageWithFallback();
@ -1720,6 +1921,12 @@ export default {
font-size: 28rpx;
line-height: 1.5;
&.message-content-structured {
background-color: transparent;
padding: 0;
border-radius: 0;
}
/* 加载动画样式 */
.loading-dots {
display: flex;
@ -1792,6 +1999,78 @@ export default {
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: inline-flex;
align-items: center;
max-width: 100%;
padding: 16rpx 20rpx;
background-color: #ffffff;
border-radius: 12rpx;
}
}
.structured-file {
display: inline-flex;
align-items: center;
max-width: 100%;
padding: 8rpx 0;
}
.structured-file-name {
margin-left: 8rpx;
font-size: 26rpx;
color: #4370fe;
word-break: break-all;
}
}
}
.message-content-width {

1
utils/chat.js
View File

@ -164,6 +164,7 @@ export function processChatMessageContent(message) {
export function sortChatMessages(list = []) {
const processedList = (list || []).map((item) => ({
...item,
rawMessage: item && item.message,
message: processChatMessageContent(item && item.message),
}));