feat: update vue-renderer-markdown to version 0.0.63-beta.2 and integrate theme support in NodeRenderer components

package.json

@@ -172,7 +172,7 @@
     "vitest": "^3.2.4",
     "vue": "^3.5.24",
     "vue-i18n": "^11.1.12",
-    "vue-renderer-markdown": "0.0.63-beta.0",
+    "vue-renderer-markdown": "0.0.63-beta.2",
     "vue-router": "4",
     "vue-sonner": "^2.0.9",
     "vue-tsc": "^2.2.12",

src/renderer/settings/components/AboutUsSettings.vue

@@ -150,6 +150,7 @@
         <DialogDescription>
           <NodeRenderer
             class="max-h-[300px] overflow-y-auto"
+            :isDark="themeStore.isDark"
             :content="t('searchDisclaimer')"
           ></NodeRenderer>
         </DialogDescription>
@@ -186,8 +187,10 @@ import NodeRenderer from 'vue-renderer-markdown'
 import { useUpgradeStore } from '@/stores/upgrade'
 import { useLanguageStore } from '@/stores/language'
 import type { AcceptableValue } from 'reka-ui'
+import { useThemeStore } from '@/stores/theme'
 
 const { t } = useI18n()
+const themeStore = useThemeStore()
 const languageStore = useLanguageStore()
 const devicePresenter = usePresenter('devicePresenter')
 const configPresenter = usePresenter('configPresenter')

src/renderer/src/components/markdown/MarkdownRenderer.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="prose prose-zinc prose-sm dark:prose-invert w-full max-w-none break-all">
-    <NodeRenderer :content="debouncedContent" @copy="$emit('copy', $event)" />
+    <NodeRenderer
+      :content="debouncedContent"
+      :isDark="themeStore.isDark"
+      @copy="$emit('copy', $event)"
+    />
   </div>
 </template>
 
@@ -17,15 +21,18 @@ import NodeRenderer, {
   setCustomComponents,
   setKaTeXWorker,
   setMermaidWorker,
-  getUseMonaco
+  getUseMonaco,
+  MermaidBlockNode
 } from 'vue-renderer-markdown'
 import KatexWorker from 'vue-renderer-markdown/workers/katexRenderer.worker?worker&inline'
 import MermaidWorker from 'vue-renderer-markdown/workers/mermaidParser.worker?worker&inline'
+import { useThemeStore } from '@/stores/theme'
 
 const props = defineProps<{
   content: string
   debug?: boolean
 }>()
+const themeStore = useThemeStore()
 getUseMonaco()
 setKaTeXWorker(new KatexWorker())
 setMermaidWorker(new MermaidWorker())
@@ -86,8 +93,15 @@ setCustomComponents({
         referenceStore.hideReference()
       }
     }),
-  code_block: (_props) =>
-    h(CodeBlockNode, {
+  code_block: (_props) => {
+    const isMermaid = _props.node.language === 'mermaid'
+    if (isMermaid) {
+      // 对于 Mermaid 代码块，直接返回 MermaidNode 组件
+      return h(MermaidBlockNode, {
+        ..._props
+      })
+    }
+    return h(CodeBlockNode, {
       ..._props,
       onPreviewCode(v) {
         artifactStore.showArtifact(
@@ -105,6 +119,7 @@ setCustomComponents({
         )
       }
     })
+  }
 })
 
 defineEmits(['copy'])

src/renderer/src/components/think-content/ThinkContent.vue

@@ -30,6 +30,7 @@
       <NodeRenderer
         v-if="content"
         class="think-prose w-full max-w-full"
+        :isDark="themeStore.isDark"
         :content="content"
         :customId="customId"
       />
@@ -44,6 +45,7 @@
 </template>
 
 <script setup lang="ts">
+import { useThemeStore } from '@/stores/theme'
 import { Icon } from '@iconify/vue'
 import { h } from 'vue'
 import NodeRenderer, {
@@ -63,9 +65,17 @@ defineEmits<{
   (e: 'toggle'): void
 }>()
 const customId = 'thinking-content'
+const themeStore = useThemeStore()
 setCustomComponents(customId, {
-  code_block: (_props) =>
-    h(
+  code_block: (_props) => {
+    const isMermaid = _props.node.language === 'mermaid'
+    if (isMermaid) {
+      // 对于 Mermaid 代码块，直接返回 MermaidNode 组件
+      return h(PreCodeNode.vue, {
+        ..._props
+      })
+    }
+    return h(
       CodeBlockNode,
       {
         ..._props,
@@ -76,7 +86,8 @@ setCustomComponents(customId, {
         showFontSizeButtons: false
       },
       undefined
-    ),
+    )
+  },
   mermaid: (_props) =>
     h(PreCodeNode.vue, {
       ..._props

src/renderer/src/components/ui/UpdateDialog.vue

@@ -10,7 +10,7 @@
               <p>{{ t('update.releaseDate') }}: {{ upgrade.updateInfo?.releaseDate }}</p>
               <p>{{ t('update.releaseNotes') }}:</p>
               <p class="whitespace-pre-line">
-                <NodeRenderer :content="upgrade.updateInfo?.releaseNotes"></NodeRenderer>
+                <NodeRenderer :isDark="themeStore.isDark" :content="upgrade.updateInfo?.releaseNotes"></NodeRenderer>
               </p>
               <!-- 显示下载进度 -->
               <div v-if="upgrade.isDownloading && upgrade.updateProgress" class="mt-4">
@@ -66,9 +66,11 @@ import {
 } from '@shadcn/components/ui/dialog'
 import { useUpgradeStore } from '@/stores/upgrade'
 import NodeRenderer from 'vue-renderer-markdown'
+import { useThemeStore } from '@/stores/theme'
 
 const { t } = useI18n()
 const upgrade = useUpgradeStore()
+const themeStore = useThemeStore()
 
 const handleUpdate = async (type: 'github' | 'netdisk' | 'auto') => {
   await upgrade.handleUpdate(type)