feat: improve quoted message rendering in dashboard

This commit is contained in:
liuwei
2026-04-07 17:35:03 +08:00
parent 3d56b3895a
commit 867f00435c
3 changed files with 115 additions and 28 deletions

View File

@@ -3,7 +3,7 @@ from .auth import login_required
from loguru import logger
import xml.etree.ElementTree as ET
from datetime import datetime
from utils.message_formatter import format_quote_message
from utils.message_formatter import format_quote_message, parse_quote_message
# 创建消息管理蓝图
messages_bp = Blueprint('messages', __name__)
@@ -68,7 +68,11 @@ def get_messages():
# 检查是否为引用消息
if '<refermsg>' in msg['content']:
# 使用格式化工具处理引用消息
msg['content'] = format_quote_message(msg['content'])
quote_data = parse_quote_message(msg['content'])
msg['content'] = quote_data['formatted_message']
msg['quoted_type'] = quote_data['reference_type']
msg['quoted_preview_image'] = quote_data['preview_image']
msg['quoted_preview_video_thumb'] = quote_data['preview_video_thumb']
else:
# 其他类型的应用消息,解析 XML 提取标题
root = ET.fromstring(msg['content'])

View File

@@ -94,6 +94,14 @@
<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' && scope.row.quoted_preview_image" class="quoted-media-preview">
<div class="message-media-label">【引用图片】</div>
<img :src="scope.row.quoted_preview_image" class="message-thumb" @click="showQuotedImage(scope.row.quoted_preview_image)">
</div>
<div v-else-if="scope.row.quoted_type === 'video' && scope.row.quoted_preview_video_thumb" class="quoted-media-preview">
<div class="message-media-label">【引用视频】</div>
<img :src="scope.row.quoted_preview_video_thumb" class="message-thumb">
</div>
</div>
</div>
</template>
@@ -198,7 +206,8 @@
},
detailDialogVisible: false,
imageDialogVisible: false,
selectedMessage: null
selectedMessage: null,
quotedPreviewUrl: ''
}
},
mounted() {
@@ -309,6 +318,10 @@
this.selectedMessage = message;
this.imageDialogVisible = true;
},
showQuotedImage(url) {
this.selectedMessage = { image_path: '', message_thumb: url };
this.imageDialogVisible = true;
},
showVideo(message) {
this.selectedMessage = message;
this.detailDialogVisible = true;
@@ -444,6 +457,13 @@
gap: 8px;
}
.quoted-media-preview {
margin-top: 8px;
display: flex;
flex-direction: column;
gap: 8px;
}
.message-media-label {
font-size: 12px;
color: #64748b;