夺宝奇兵大模型用户信息添加发送时间

src/views/AIchat.vue

@@ -4411,23 +4411,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>
 
@@ -4712,18 +4719,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;
 }