|
|
@@ -266,9 +266,13 @@ const processMessageContent = (message) => {
|
|
|
|
|
|
// 确保有时间显示,如果没有date字段则显示当前时间或默认值
|
|
|
const messageTime = message.date || '未知时间'
|
|
|
+
|
|
|
+ // 添加发送者信息
|
|
|
+ const senderInfo = message.senderName ? `<div class="message-sender">${escapeHtml(message.senderName)}</div>` : ''
|
|
|
|
|
|
if (message.mediaType === 'Photo' && message.imagePath) {
|
|
|
content += `
|
|
|
+ ${senderInfo}
|
|
|
<div class="message-text" style="margin-bottom: 1rem;">${escapeHtml(message.text)}</div>
|
|
|
<div class="message-image-container">
|
|
|
<img class="message-image" data-image-path="${message.imagePath}" alt="图片" loading="lazy">
|
|
|
@@ -281,6 +285,7 @@ const processMessageContent = (message) => {
|
|
|
const url = urlMatch ? urlMatch[0] : message.text
|
|
|
|
|
|
content += `
|
|
|
+ ${senderInfo}
|
|
|
<div class="message-text" style="margin-bottom: 1rem;">${escapeHtml(message.text)}</div>
|
|
|
<div class="message-web-page">
|
|
|
<a href="${url}" target="_blank" rel="noopener noreferrer">${escapeHtml(url)}</a>
|
|
|
@@ -289,6 +294,7 @@ const processMessageContent = (message) => {
|
|
|
`
|
|
|
} else {
|
|
|
content += `
|
|
|
+ ${senderInfo}
|
|
|
<div class="message-text" style="margin-bottom: 1rem;">${escapeHtml(message.text)}</div>
|
|
|
<div class="message-time" style="font-size: 0.75rem; color: #dc2626; margin-top: 1rem; text-align: right; font-style: italic; opacity: 0.9; display: block; width: 100%;">${messageTime}</div>
|
|
|
`
|
|
|
@@ -420,7 +426,11 @@ const handleImagesAfterUpdate = async () => {
|
|
|
<div
|
|
|
v-for="message in getCurrentMessages()"
|
|
|
:key="message.id"
|
|
|
- class="message message-incoming"
|
|
|
+ class="message"
|
|
|
+ :class="{
|
|
|
+ 'message-outgoing': message.isFromMe,
|
|
|
+ 'message-incoming': !message.isFromMe
|
|
|
+ }"
|
|
|
v-html="processMessageContent(message)"
|
|
|
></div>
|
|
|
</div>
|
|
|
@@ -540,12 +550,46 @@ const handleImagesAfterUpdate = async () => {
|
|
|
margin-bottom: 1rem;
|
|
|
padding: 1rem;
|
|
|
border-radius: 8px;
|
|
|
- background-color: #f3f4f6;
|
|
|
max-width: 80%;
|
|
|
+ position: relative;
|
|
|
}
|
|
|
|
|
|
.message-incoming {
|
|
|
margin-right: auto;
|
|
|
+ background-color: #f3f4f6;
|
|
|
+ border: 1px solid #e5e7eb;
|
|
|
+}
|
|
|
+
|
|
|
+.message-outgoing {
|
|
|
+ margin-left: auto;
|
|
|
+ background-color: #3b82f6;
|
|
|
+ color: white;
|
|
|
+ border: 1px solid #2563eb;
|
|
|
+}
|
|
|
+
|
|
|
+.message-outgoing .message-sender {
|
|
|
+ color: #dbeafe;
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
+
|
|
|
+.message-outgoing .message-time {
|
|
|
+ color: #dbeafe !important;
|
|
|
+}
|
|
|
+
|
|
|
+.message-outgoing .message-web-page {
|
|
|
+ background-color: #1d4ed8;
|
|
|
+ border-color: #1e40af;
|
|
|
+}
|
|
|
+
|
|
|
+.message-outgoing .message-web-page a {
|
|
|
+ color: #dbeafe;
|
|
|
+}
|
|
|
+
|
|
|
+.message-sender {
|
|
|
+ font-size: 0.875rem;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #374151;
|
|
|
+ margin-bottom: 0.5rem;
|
|
|
}
|
|
|
|
|
|
.message-text {
|