feat: 修改markdown格式化&实时对话sketch

src/views/home/agent/components/Item.vue

@@ -19,8 +19,17 @@
 						class="img-item"
 					/>
 				</div>
-				<div class="message-txt markdown-body">
-					<div v-html="formatMessage"></div>
+				<div class="message-txt markdown-body flex flex-col">
+					<!-- <div v-html="formatMessage"></div> -->
+					<VueMarkdown
+						:custom-attrs="customAttrs"
+						:markdown="content.text"
+						:rehype-plugins="[rehypeRaw]"
+					>
+						<template v-slot:s-ReportCard="" {children:children,...attrs}>
+							<ReportCard :report="{ title: attrs.title, content: attrs.content }" />
+						</template>
+					</VueMarkdown>
 				</div>
 				<div class="operate flex" :class="{ 'is-user': content.isUser }">
 					<template v-if="content.isUser">
@@ -59,11 +68,6 @@
 					</div>
 				</div>
 			</div>
-			<div class="message-context" v-show="content.streaming">
-				<div class="message-txt">
-					<div v-html="formatMessage"></div>
-				</div>
-			</div>
 		</div>
 	</div>
 </template>
@@ -74,9 +78,11 @@
 	import gsap from 'gsap'
 	import userThumb from '@/assets/images/user-thumb.jpg'
 	import agentThumb from '@/assets/images/agent-thumb.jpg'
-	import markdownIt from 'markdown-it'
-
-	const md = new markdownIt()
+	import ReportCard from './ReportCard.vue'
+	import UrlCard from './UrlCard.vue'
+	import { VueMarkdown } from '@crazydos/vue-markdown'
+	import type { CustomAttrs } from '@crazydos/vue-markdown'
+	import rehypeRaw from 'rehype-raw'
 
 	const { t } = useI18n()
 
@@ -85,6 +91,8 @@
 		isLast: Boolean
 	}>()
 
+	const emit = defineEmits(['regenerate'])
+	
 	const imageList = computed(() => {
 		const { imageUrls } = props.content
 		const list = []
@@ -99,12 +107,18 @@
 		return list
 	})
 
-	const formatMessage = computed(() => {
-		const str = md.render(props.content.text)
-		return str
-	})
-
-	const emit = defineEmits(['regenerate'])
+	const customAttrs: CustomAttrs = {
+		img: {
+			style: 'max-width: 100%;'
+		},
+		a: (node, combinedAttrs) => {
+			if (typeof node.properties.href === 'string') {
+				return { target: '_blank', rel: 'noopener noreferrer' }
+			} else {
+				return {}
+			}
+		}
+	}
 
 	const operateList = ref([
 		{
@@ -219,7 +233,7 @@
 			.message-context {
 				line-height: 2rem;
 				font-size: 1.4rem;
-				max-width: 82%;
+				width: 82%;
 			}
 		}
 		.operate {
@@ -278,5 +292,8 @@
 		code {
 			white-space: pre-wrap;
 		}
+		img {
+			max-width: 100%;
+		}
 	}
 </style>