feat(chat): 为消息添加发送者名称显示并调整布局
- 在消息内容上方显示发送者名称(AI 或用户) - 调整消息容器布局,使用 flex 列布局确保名称和内容正确对齐 - 将 AI 消息的默认头像替换为专用 AI 头像 - 移除消息容器的换行设置,保持整体左右布局
This commit is contained in:
parent
731989eaac
commit
e73c2a9826
|
|
@ -153,10 +153,21 @@
|
||||||
:id="'msg-' + message.id"
|
:id="'msg-' + message.id"
|
||||||
>
|
>
|
||||||
<image
|
<image
|
||||||
|
v-if="message.sendName === 'AI'"
|
||||||
|
class="ai-avatar"
|
||||||
|
src="/static/common/images/avatar_ai.png"
|
||||||
|
mode="scaleToFill"
|
||||||
|
/>
|
||||||
|
<image
|
||||||
|
v-else
|
||||||
class="ai-avatar"
|
class="ai-avatar"
|
||||||
:src="receiverHeadSculptureUrl"
|
:src="receiverHeadSculptureUrl"
|
||||||
mode="scaleToFill"
|
mode="scaleToFill"
|
||||||
/>
|
/>
|
||||||
|
<view class="message-content-wrapper">
|
||||||
|
<view class="message-sender-name">{{
|
||||||
|
message.sendName || vuex_msgUser.name
|
||||||
|
}}</view>
|
||||||
<view
|
<view
|
||||||
class="message-content"
|
class="message-content"
|
||||||
:class="{
|
:class="{
|
||||||
|
|
@ -176,7 +187,10 @@
|
||||||
class="structured-item"
|
class="structured-item"
|
||||||
:class="`structured-item-${block.type}`"
|
:class="`structured-item-${block.type}`"
|
||||||
>
|
>
|
||||||
<text v-if="block.type === 'text'" class="structured-text">
|
<text
|
||||||
|
v-if="block.type === 'text'"
|
||||||
|
class="structured-text"
|
||||||
|
>
|
||||||
{{ block.value }}
|
{{ block.value }}
|
||||||
</text>
|
</text>
|
||||||
<image
|
<image
|
||||||
|
|
@ -196,7 +210,9 @@
|
||||||
src="/static/common/images/icon-file.png"
|
src="/static/common/images/icon-file.png"
|
||||||
mode="scaleToFill"
|
mode="scaleToFill"
|
||||||
></image>
|
></image>
|
||||||
<text class="structured-file-name">{{ block.name }}</text>
|
<text class="structured-file-name">{{
|
||||||
|
block.name
|
||||||
|
}}</text>
|
||||||
<u-icon
|
<u-icon
|
||||||
name="download"
|
name="download"
|
||||||
size="36"
|
size="36"
|
||||||
|
|
@ -210,6 +226,7 @@
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
<!-- 底部间距 滚动锚点 -->
|
<!-- 底部间距 滚动锚点 -->
|
||||||
<view id="bottom-anchor" class="bottom-anchor"></view>
|
<view id="bottom-anchor" class="bottom-anchor"></view>
|
||||||
|
|
@ -675,7 +692,7 @@ export default {
|
||||||
|
|
||||||
.message-left {
|
.message-left {
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
flex-wrap: wrap; /* 允许反馈区换行到消息下方 */
|
flex-wrap: nowrap; /* 不换行,整体左右排布 */
|
||||||
|
|
||||||
.ai-avatar {
|
.ai-avatar {
|
||||||
width: 64rpx;
|
width: 64rpx;
|
||||||
|
|
@ -686,13 +703,27 @@ export default {
|
||||||
flex-shrink: 0;
|
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 {
|
.message-content {
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
max-width: 70%;
|
|
||||||
padding: 20rpx 24rpx;
|
padding: 20rpx 24rpx;
|
||||||
border-radius: 0 16rpx 16rpx 16rpx;
|
border-radius: 0 16rpx 16rpx 16rpx;
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
&.message-content-structured {
|
&.message-content-structured {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue