Browse Source

Merge branch 'hongxilin/feature-20250628153758-财神优化:字正确性,一致性等' into milestone-20250710-上线前优化

dev
no99 2 days ago
parent
commit
bd40aa2408
  1. 64
      src/views/AIchat.vue

64
src/views/AIchat.vue

@ -4412,23 +4412,30 @@ onUnmounted(() => {
<div v-for="(msg, index) in chatMsg" :key="index">
<!-- 用户消息容器包含喇叭按钮 -->
<div v-if="msg.sender === 'user'" class="user-message-container">
<img
:src="msg.audioStatus ? voice : voiceNoActive"
class="user-message-speaker"
:class="{
'speaker-active': msg.audioStatus,
}"
@click="toggleVoiceForUser(index)"
alt="喇叭"
/>
<div
:class="{
'message-bubble': true,
[msg.sender]: msg.sender,
[msg.class]: msg.class,
}"
>
<div v-html="msg.content"></div>
<div class="user-msg">
<div class="user-content">
<img
:src="msg.audioStatus ? voice : voiceNoActive"
class="user-message-speaker"
:class="{
'speaker-active': msg.audioStatus,
}"
@click="toggleVoiceForUser(index)"
alt="喇叭"
/>
<div
:class="{
'message-bubble': true,
[msg.sender]: msg.sender,
[msg.class]: msg.class,
}"
>
<div v-html="msg.content"></div>
</div>
</div>
<div class="user-sendTime">
{{moment(msg.timestamp).format("YYYY-MM-DD HH:mm:ss")}}
</div>
</div>
</div>
@ -4713,18 +4720,37 @@ p {
/* 用户消息容器样式 */
.user-message-container {
display: flex;
align-items: flex-start;
/* align-items: flex-start; */
margin: 10px 0px;
justify-content: flex-end;
gap: 10px;
/* align-items: center; */
flex-direction: column;
}
.user-msg {
margin-left: auto;
}
.user-content {
display: flex;
height: 100%;
align-items: center;
margin-right: 5px;
}
.user-sendTime{
width: 100%;
text-align: center;
color: rgba(255, 255, 255, 0.6);
font-size: 0.8rem;
}
.user-message-speaker {
width: 32px;
height: 32px;
object-fit: contain;
margin-top: 5px;
margin-right: 5px;
cursor: pointer;
transition: all 0.3s ease;
}

Loading…
Cancel
Save