markdown文本显示

src/components/chat/ChatMessage.vue

@@ -1,15 +1,18 @@
 <template>
   <div class="chat-message" :class="{ 'user-message': isUser, 'ai-message': !isUser }">
     <div class="message-content">
-      <div class="message-text">{{ message.content }}</div>
+      <div class="message-text" v-html="parsedContent"></div>
       <div class="message-time">{{ formattedTime }}</div>
     </div>
   </div>
 </template>
 
 <script>
+import MarkdownIt from 'markdown-it';
 import { computed } from 'vue';
 
+const md = new MarkdownIt();
+
 export default {
   name: 'ChatMessage',
   
@@ -32,10 +35,18 @@ export default {
       const date = new Date(props.message.timestamp);
       return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
     });
-    
+
+    const parsedContent = computed(() => {
+      if (props.message.sender === 'user') {
+        return props.message.content;
+      }
+      return md.render(props.message.content);
+    });
+
     return {
       isUser,
-      formattedTime
+      formattedTime,
+      parsedContent
     };
   }
 };