feat: 添加 Markdown 渲染组件，支持代码高亮和格式化

components/ChatBotMessage.vue

@@ -26,7 +26,10 @@ const props = defineProps({
       <span class="text-sm font-medium">{{ name }}</span>
     </div>
     <div class="rounded-lg bg-white/50 p-2 text-sm dark:bg-neutral-800/50">
-      <span v-if="message">{{ message }}</span>
+      <span v-if="message">
+        <Markdown :source="message" />
+        <!-- {{ message }} -->
+      </span>
       <span v-else class="flex items-center gap-1.5">
         <UIcon name="svg-spinners:3-dots-scale" class="text-lg -mt-0.5" />
         <p class="text-xs">思考中</p>

components/ChatMessage.vue

@@ -38,7 +38,8 @@ defineProps({
       class="rounded-lg bg-white/50 p-2 text-sm dark:bg-neutral-800/50 break-all text-justify"
     >
       <div v-if="message.message" class="prose prose-sm">
-        {{ message.message }}
+        <!-- {{ message.message }} -->
+        <Markdown :source="message.message" />
       </div>
       <span v-else class="flex items-center gap-1.5">
         <UIcon name="svg-spinners:3-dots-scale" class="text-lg -mt-0.5" />

components/Markdown.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import md from "markdown-it";
+import hljs from "highlight.js";
+import "highlight.js/styles/github-dark-dimmed.min.css";
+
+const renderer = md({
+  html: true,
+  linkify: true,
+  typographer: true,
+  breaks: true,
+  highlight: function (str, lang) {
+    if (lang && hljs.getLanguage(lang)) {
+      try {
+        return `<pre class="hljs" style="overflow-x: auto"><code>${
+          hljs.highlight(str, { language: lang, ignoreIllegals: true }).value
+        }</code></pre>`;
+      } catch (_) {}
+    }
+
+    return (
+      '<pre class="hljs"><code>' + md().utils.escapeHtml(str) + "</code></pre>"
+    );
+  },
+});
+
+const props = defineProps({
+  source: {
+    type: String,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <article
+    class="prose dark:prose-invert max-w-none prose-sm prose-neutral"
+    v-html="
+      renderer.render(source.replaceAll('\t', '&nbsp;&nbsp;&nbsp;&nbsp;'))
+    "
+  ></article>
+</template>
+
+<style scoped></style>