diff --git a/pages/assistant/assistant.vue b/pages/assistant/assistant.vue index 4e03a55..90c4268 100644 --- a/pages/assistant/assistant.vue +++ b/pages/assistant/assistant.vue @@ -40,7 +40,9 @@ - {{ message.content }} + + + @@ -55,7 +57,9 @@ - {{ message.content }} + + + {{ message.time }} @@ -120,7 +124,7 @@ export default { messageList: [ { type: 'ai', - content: '您好!我是您的宠物AI助手🐾\n\n我可以为您解答关于宠物饲养、健康、训练、营养等方面的问题。有什么可以帮助您的吗?', + content: '您好!我是您的宠物AI助手🐾\n\n我可以为您解答关于宠物饲养、健康、训练、营养等方面的问题。\n\n**我能帮你做什么:**\n- 🍖 **饮食建议**:营养搭配、食物选择\n- 🏥 **健康咨询**:症状分析、预防措施 \n- 🎾 **训练指导**:行为纠正、技能训练\n- 💡 **日常护理**:清洁、美容、环境\n\n有什么想了解的吗?', time: this.getCurrentTime() } ], @@ -572,10 +576,101 @@ export default { color: #333333; } +/* Markdown样式优化 */ +.message-text .u-markdown { + font-size: 26rpx; + line-height: 1.5; +} + +/* 重置Markdown内部样式 */ +.message-text .u-markdown :deep(p) { + margin: 0; + padding: 0; + font-size: 26rpx; + line-height: 1.5; + color: #333333; +} + +.message-text .u-markdown :deep(h1), +.message-text .u-markdown :deep(h2), +.message-text .u-markdown :deep(h3), +.message-text .u-markdown :deep(h4), +.message-text .u-markdown :deep(h5), +.message-text .u-markdown :deep(h6) { + margin: 8rpx 0 4rpx 0; + font-weight: 600; + color: #FF8A80; +} + +.message-text .u-markdown :deep(ul), +.message-text .u-markdown :deep(ol) { + margin: 8rpx 0; + padding-left: 32rpx; +} + +.message-text .u-markdown :deep(li) { + margin: 4rpx 0; + font-size: 26rpx; + line-height: 1.5; +} + +.message-text .u-markdown :deep(code) { + background: rgba(255, 138, 128, 0.1); + padding: 2rpx 8rpx; + border-radius: 6rpx; + font-size: 24rpx; + color: #FF8A80; +} + +.message-text .u-markdown :deep(pre) { + background: rgba(255, 138, 128, 0.05); + padding: 16rpx; + border-radius: 12rpx; + margin: 8rpx 0; + overflow-x: auto; +} + +.message-text .u-markdown :deep(blockquote) { + border-left: 6rpx solid #FF8A80; + padding-left: 16rpx; + margin: 8rpx 0; + color: #666; + font-style: italic; +} + .message-bubble.user .message-text { color: #ffffff; } +/* 用户消息的Markdown样式 */ +.message-bubble.user .message-text .u-markdown :deep(p), +.message-bubble.user .message-text .u-markdown :deep(li) { + color: #ffffff; +} + +.message-bubble.user .message-text .u-markdown :deep(h1), +.message-bubble.user .message-text .u-markdown :deep(h2), +.message-bubble.user .message-text .u-markdown :deep(h3), +.message-bubble.user .message-text .u-markdown :deep(h4), +.message-bubble.user .message-text .u-markdown :deep(h5), +.message-bubble.user .message-text .u-markdown :deep(h6) { + color: #ffffff; +} + +.message-bubble.user .message-text .u-markdown :deep(code) { + background: rgba(255, 255, 255, 0.2); + color: #ffffff; +} + +.message-bubble.user .message-text .u-markdown :deep(pre) { + background: rgba(255, 255, 255, 0.1); +} + +.message-bubble.user .message-text .u-markdown :deep(blockquote) { + border-left-color: #ffffff; + color: rgba(255, 255, 255, 0.8); +} + .message-time { margin-top: 8rpx; font-size: 20rpx;