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

feat(chat): 为消息添加发送者名称显示并调整布局 

- 在消息内容上方显示发送者名称（AI 或用户）
- 调整消息容器布局，使用 flex 列布局确保名称和内容正确对齐
- 将 AI 消息的默认头像替换为专用 AI 头像
- 移除消息容器的换行设置，保持整体左右布局
This commit is contained in:
yangzhe 2026-03-20 17:18:42 +08:00
parent 731989eaac
commit e73c2a9826
1 changed files with 72 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

113
pages/chat/index.vue
View File

@ -153,60 +153,77 @@
:id="'msg-' + message.id"
>
<image
v-if="message.sendName === 'AI'"
class="ai-avatar"
src="/static/common/images/avatar_ai.png"
mode="scaleToFill"
/>
<image
v-else
class="ai-avatar"
:src="receiverHeadSculptureUrl"
mode="scaleToFill"
/>
<view
class="message-content"
:class="{
'message-content-structured':
getStructuredMessageBlocks(message).length,
}"
>
<view class="message-content-wrapper">
<view class="message-sender-name">{{
message.sendName || vuex_msgUser.name
}}</view>
<view
v-if="getStructuredMessageBlocks(message).length"
class="structured-message"
class="message-content"
:class="{
'message-content-structured':
getStructuredMessageBlocks(message).length,
}"
>
<view
v-for="(block, blockIndex) in getStructuredMessageBlocks(
message,
)"
:key="`${message.id || index}-block-${blockIndex}`"
class="structured-item"
:class="`structured-item-${block.type}`"
v-if="getStructuredMessageBlocks(message).length"
class="structured-message"
>
<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)"
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
class="structured-file-icon"
src="/static/common/images/icon-file.png"
mode="scaleToFill"
v-else-if="block.type === 'image'"
class="structured-image"
:src="block.url"
mode="widthFix"
@click="previewMessageImage(block.url)"
></image>
<text class="structured-file-name">{{ block.name }}</text>
<u-icon
name="download"
size="36"
color="#666666"
class="structured-file-download"
></u-icon>
<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>
<markdown-viewer v-else :content="message.message" />
</view>
</view>
</view>
@ -675,7 +692,7 @@ export default {
.message-left {
justify-content: flex-start;
flex-wrap: wrap; /* 允许反馈区换行到消息下方 */
flex-wrap: nowrap; /* 不换行，整体左右排布 */
.ai-avatar {
width: 64rpx;
@ -686,13 +703,27 @@ export default {
flex-shrink: 0;
}
.message-content-wrapper {
display: flex;
flex-direction: column;
align-items: flex-start;
max-width: 70%;
}
.message-sender-name {
font-size: 24rpx;
color: #999999;
margin-bottom: 8rpx;
}
.message-content {
background-color: #ffffff;
max-width: 70%;
padding: 20rpx 24rpx;
border-radius: 0 16rpx 16rpx 16rpx;
font-size: 28rpx;
line-height: 1.5;
width: 100%;
box-sizing: border-box;
&.message-content-structured {
background-color: transparent;