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

@@ -102,6 +102,16 @@
<img v-if="scope.row.message_thumb" :src="scope.row.message_thumb" class="message-thumb" @click="showVideo(scope.row)">
</div>
<div v-else-if="isSystemXmlMessage(scope.row)" class="message-system-card">
<div class="message-system-tags">
<span class="message-type-badge">系统</span>
<span v-if="scope.row.sysmsg_type === 'revokemsg'" class="message-type-badge is-revoke">撤回</span>
</div>
<div class="message-system-summary">
{% raw %}{{ scope.row.sysmsg_summary || scope.row.content || '系统消息' }}{% endraw %}
</div>
</div>
<div v-else class="message-text-preview is-muted">
{% raw %}{{ scope.row.content || `【消息类型: ${scope.row.message_type}】` }}{% endraw %}
<div v-if="scope.row.quoted_type === 'image' && hasQuotedPreview(scope.row.quoted_preview_image)" class="quoted-media-preview">
@@ -147,6 +157,10 @@
<el-descriptions-item label="发送者">{% raw %}{{ selectedMessage.sender_name }}{% endraw %}</el-descriptions-item>
<el-descriptions-item label="消息类型">{% raw %}{{ getMessageTypeName(selectedMessage.message_type) }}{% endraw %}</el-descriptions-item>
<el-descriptions-item label="内容">{% raw %}{{ selectedMessage.content }}{% endraw %}</el-descriptions-item>
<el-descriptions-item v-if="selectedMessage.sysmsg_type" label="系统类型">{% raw %}{{ selectedMessage.sysmsg_type }}{% endraw %}</el-descriptions-item>
<el-descriptions-item v-if="selectedMessage.sysmsg_replace_msg" label="系统摘要">{% raw %}{{ selectedMessage.sysmsg_replace_msg }}{% endraw %}</el-descriptions-item>
<el-descriptions-item v-if="selectedMessage.sysmsg_msgid" label="原消息ID">{% raw %}{{ selectedMessage.sysmsg_msgid }}{% endraw %}</el-descriptions-item>
<el-descriptions-item v-if="selectedMessage.sysmsg_newmsgid" label="新消息ID">{% raw %}{{ selectedMessage.sysmsg_newmsgid }}{% endraw %}</el-descriptions-item>
<el-descriptions-item v-if="selectedMessage.message_type == 3 || selectedMessage.message_type == 43 || isEmojiMessage(selectedMessage)" label="媒体内容">
<img v-if="selectedMessage.message_type == 3 && selectedMessage.image_path" :src="getImageUrl(selectedMessage.image_path)" style="max-width: 100%; border-radius: 16px;">
@@ -353,10 +367,15 @@
3: '图片消息',
47: '表情消息',
43: '视频消息',
49: '链接消息'
49: '链接消息',
10000: '系统消息',
10002: '系统消息'
};
return typeMap[type] || `未知类型(${type})`;
},
isSystemXmlMessage(message) {
return !!(message && (message.sysmsg_type || '').length);
},
isEmojiMessage(message) {
if (!message) return false;
return ['47', '1048625', '1090519089'].includes(String(message.message_type));
@@ -529,6 +548,49 @@
gap: 8px;
}
.message-system-card {
display: flex;
flex-direction: column;
gap: 8px;
padding: 10px 12px;
border-radius: 14px;
background: linear-gradient(135deg, rgba(148,163,184,0.12), rgba(226,232,240,0.45));
border: 1px solid rgba(148,163,184,0.18);
}
.message-system-tags {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.message-type-badge {
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.72);
border: 1px solid rgba(148,163,184,0.2);
}
.message-type-badge.is-revoke {
color: #9f1239;
background: rgba(255,241,242,0.92);
border-color: rgba(244,114,182,0.2);
}
.message-system-summary {
color: #334155;
line-height: 1.6;
word-break: break-word;
}
.quoted-media-preview {
margin-top: 8px;
display: flex;