feat: improve system message display in dashboard

This commit is contained in:
liuwei
2026-04-13 15:30:33 +08:00
parent fc43321f94
commit d581b9650e
4 changed files with 179 additions and 8 deletions

View File

@@ -656,7 +656,13 @@
<div v-if="msg.linkDescription" class="message-link-description" v-text="msg.linkDescription"></div>
<div v-if="msg.linkUrl" class="message-link-url" v-text="msg.linkUrl"></div>
</div>
<div v-else class="message-system-text" v-text="msg.content"></div>
<div v-else class="message-system-bubble">
<div class="message-system-tags">
<span class="message-system-tag">系统</span>
<span v-if="msg.sysmsgType === 'revokemsg'" class="message-system-tag is-revoke">撤回</span>
</div>
<div class="message-system-text" v-text="msg.content"></div>
</div>
</div>
</div>
{% endraw %}
@@ -1177,6 +1183,7 @@
rawContent: item.content || '',
time: item.timestamp || '',
isSelf: !!item.is_self,
sysmsgType: item.sysmsg_type || '',
mediaUrl: this.getChatMediaUrl(item.media_url || item.image_path || item.attachment_url || item.message_thumb || ''),
linkTitle: linkPayload.title || '',
linkDescription: linkPayload.description || '',
@@ -1458,6 +1465,14 @@
max-width: 90%; background: rgba(241,245,249,0.92); color: #475569; border-style: dashed;
text-align: center; box-shadow: none;
}
.message-system-bubble { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.message-system-tags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
.message-system-tag {
display: inline-flex; align-items: center; justify-content: center; min-height: 24px; padding: 0 10px;
border-radius: 999px; font-size: 12px; font-weight: 700; color: #475569;
background: rgba(255,255,255,0.76); border: 1px solid rgba(148,163,184,0.18);
}
.message-system-tag.is-revoke { color: #9f1239; background: rgba(255,241,242,0.92); border-color: rgba(244,114,182,0.2); }
.message-text, .message-system-text { white-space: pre-wrap; word-break: break-word; line-height: 1.7; }
.message-media { display: flex; flex-direction: column; gap: 10px; }
.message-image, .message-video {