refactor(home): 为AI和老师消息内容添加容器包装层

重构消息列表布局,将AI和老师消息的avatar和内容区域分别包裹在独立的容器元素中。
This commit is contained in:
yangzhe 2026-03-18 13:57:41 +08:00
parent 86b3a51206
commit 227b836d93
1 changed files with 53 additions and 40 deletions

View File

@ -248,6 +248,7 @@
"
:id="'msg-' + message.id"
>
<view class="message-content-container-AI">
<image
class="ai-avatar"
src="/static/common/images/avatar_ai.png"
@ -268,6 +269,7 @@
<!-- 正常消息内容 -->
<markdown-viewer v-else :content="message.message" />
</view>
</view>
<!-- 回答反馈点赞/点踩 -->
<view v-if="!message.isLoading" class="feedback-container">
@ -310,6 +312,7 @@
v-else-if="message.interactMode === 8"
:id="'msg-' + message.id"
>
<view class="message-content-container-Teacher">
<image
class="ai-avatar"
:src="receiverHeadSculptureUrl"
@ -329,6 +332,7 @@
<markdown-viewer v-else :content="message.message" />
</view>
</view>
</view>
</block>
</view>
</scroll-view>
@ -702,10 +706,12 @@ export default {
//
handleFeatureClick(item) {
const actions = {
"首页": () => this.resetChatState({ isChat: false }),
"转人工": () => this.handleTransferEntryClick(),
"结束会话": () => this.handleEndConversation(),
"电话咨询": () => { this.advicePhoneShow = true; }
首页: () => this.resetChatState({ isChat: false }),
转人工: () => this.handleTransferEntryClick(),
结束会话: () => this.handleEndConversation(),
电话咨询: () => {
this.advicePhoneShow = true;
},
};
const action = actions[item.title];
@ -1688,8 +1694,14 @@ export default {
}
.message-left {
flex-direction: column;
.message-content-container-AI,
.message-content-container-Teacher {
display: flex;
justify-content: flex-start;
flex-wrap: wrap; /* 允许反馈区换行到消息下方 */
}
.ai-avatar {
width: 64rpx;
@ -1785,6 +1797,7 @@ export default {
.message-content-width {
max-width: 70%;
}
// }
/* 回答反馈容器,跟随左侧消息,右下角对齐 */
.feedback-container {