新增功能 - 优化 Markdown 中 Mermaid 图表的展示

liyupi · liyupi · commit 9b31f83d0524 · 2025-09-23T20:18:41.000+08:00
diff --git a/coder-test-frontend/package.json b/coder-test-frontend/package.json
@@ -8,10 +8,12 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@bytemd/plugin-gfm": "^1.22.0",
+    "@bytemd/plugin-mermaid": "^1.22.0",
+    "@bytemd/vue-next": "^1.22.0",
     "@element-plus/icons-vue": "^2.3.1",
     "axios": "^1.6.2",
     "element-plus": "^2.4.4",
-    "markdown-it": "^14.1.0",
     "pinia": "^2.1.7",
     "vue": "^3.4.0",
     "vue-router": "^4.2.5"
diff --git a/coder-test-frontend/src/views/Result.vue b/coder-test-frontend/src/views/Result.vue
@@ -119,7 +119,9 @@
             </template>
             
             <div class="analysis-content">
-              <div class="markdown-content" v-html="formattedStandardAnswer"></div>
+              <div class="markdown-content">
+                <Viewer :value="standardAnswerContent" :plugins="plugins" />
+              </div>
             </div>
           </el-card>
         </div>
@@ -142,7 +144,9 @@ import { useRoute, useRouter } from 'vue-router'
 import { useUserStore } from '../stores/user'
 import { getUserLevelDetail } from '../api/userLevel'
 import { ElMessage } from 'element-plus'
-import MarkdownIt from 'markdown-it'
+import { Viewer } from '@bytemd/vue-next'
+import gfm from '@bytemd/plugin-gfm'
+import mermaid from '@bytemd/plugin-mermaid'
 import {
   KnifeFork,
   Clock,
@@ -154,18 +158,18 @@ import {
 } from '@element-plus/icons-vue'
 import GlobalNavbar from '../components/GlobalNavbar.vue'
 
+// &#23548;&#20837; ByteMD &#26679;&#24335;
+import 'bytemd/dist/index.css'
+
 const route = useRoute()
 const router = useRouter()
 const userStore = useUserStore()
 
-// &#21021;&#22987;&#21270; Markdown &#28210;&#26579;&#22120;
-const md = new MarkdownIt({
-  html: false,        // &#31105;&#29992; HTML &#26631;&#31614;
-  xhtmlOut: false,    // &#20351;&#29992; HTML &#26631;&#31614;&#32780;&#19981;&#26159; XHTML
-  breaks: true,       // &#33258;&#21160;&#25442;&#34892;
-  linkify: true,      // &#33258;&#21160;&#35782;&#21035;&#38142;&#25509;
-  typographer: true   // &#21551;&#29992;&#26234;&#33021;&#24341;&#21495;&#21644;&#20854;&#20182;&#21360;&#21047;&#31526;&#21495;
-})
+// &#37197;&#32622; ByteMD &#25554;&#20214;
+const plugins = [
+  gfm(),
+  mermaid()
+]
 
 const user = computed(() => userStore.user)
 const loading = ref(false)
@@ -186,17 +190,9 @@ const trueOptionsList = computed(() => {
   }
 })
 
-// &#26684;&#24335;&#21270;&#26631;&#20934;&#31572;&#26696;&#65288;&#20351;&#29992; markdown-it &#28210;&#26579;&#65289;
-const formattedStandardAnswer = computed(() => {
-  if (!resultData.value?.standardAnswer) return ''
-  
-  try {
-    return md.render(resultData.value.standardAnswer)
-  } catch (error) {
-    console.error('Markdown &#28210;&#26579;&#22833;&#36133;:', error)
-    // &#22914;&#26524;&#28210;&#26579;&#22833;&#36133;&#65292;&#22238;&#36864;&#21040;&#21407;&#22987;&#25991;&#26412;
-    return resultData.value.standardAnswer.replace(/\n/g, '<br>')
-  }
+// &#33719;&#21462;&#26631;&#20934;&#31572;&#26696;&#20869;&#23481;
+const standardAnswerContent = computed(() => {
+  return resultData.value?.standardAnswer || ''
 })
 
 // &#33719;&#21462;&#20998;&#25968;&#26679;&#24335;&#31867;
@@ -483,6 +479,29 @@ onMounted(() => {
   color: var(--text-secondary);
 }
 
+/* ByteMD Viewer &#26679;&#24335;&#35206;&#30422; */
+.markdown-content :deep(.bytemd-viewer) {
+  background: transparent;
+  font-family: inherit;
+}
+
+/* Mermaid &#22270;&#34920;&#26679;&#24335; */
+.markdown-content :deep(.mermaid) {
+  display: flex;
+  justify-content: center;
+  margin: 20px 0;
+  background: var(--bg-card);
+  border-radius: 8px;
+  padding: 16px;
+  border: 1px solid var(--border-light);
+  box-shadow: 0 2px 8px var(--shadow-light);
+}
+
+.markdown-content :deep(.mermaid svg) {
+  max-width: 100%;
+  height: auto;
+}
+
 /* &#26631;&#39064;&#26679;&#24335; */
 .markdown-content :deep(h1),
 .markdown-content :deep(h2),
