feat: add mermaid support to markdown

解决文章和草稿长度不够的问题

README.md

@@ -1,9 +1,9 @@
 <p align="center">
-  <BaseImage alt="OpenIsle" src="https://openisle-1307107697.cos.ap-guangzhou.myqcloud.com/assert/image.png" width="200">
+  <img alt="OpenIsle" src="https://openisle-1307107697.cos.ap-guangzhou.myqcloud.com/assert/image.png" width="200">
   <br>
   高效的开源社区前后端平台
   <br><br><br>
-  <BaseImage alt="Image" src="https://openisle-1307107697.cos.accelerate.myqcloud.com/dynamic_assert/22752cfac5a04a9c90c41995b9f55fed.png" width="1200">
+  <img alt="Image" src="https://openisle-1307107697.cos.accelerate.myqcloud.com/dynamic_assert/22752cfac5a04a9c90c41995b9f55fed.png" width="1200">
 </p>
 
 ## 💡 简介

backend/src/main/java/com/openisle/model/Draft.java

@@ -22,7 +22,7 @@ public class Draft {
 
     private String title;
 
-    @Column(columnDefinition = "TEXT")
+    @Column(columnDefinition = "LONGTEXT")
     private String content;
 
     @ManyToOne(fetch = FetchType.LAZY, optional = false)

backend/src/main/java/com/openisle/model/Post.java

@@ -31,7 +31,7 @@ public class Post {
     @Column(nullable = false)
     private String title;
 
-    @Column(nullable = false, columnDefinition = "TEXT")
+    @Column(nullable = false, columnDefinition = "LONGTEXT")
     private String content;
 
     @CreationTimestamp

frontend_nuxt/app.vue

@@ -138,7 +138,7 @@ const goToNewPost = () => {
   height: 60px;
   border-radius: 50%;
   position: fixed;
-  bottom: 40px;
+  bottom: 70px;
   right: 20px;
   font-size: 20px;
   cursor: pointer;

frontend_nuxt/assets/global.css

@@ -162,6 +162,7 @@ body {
   border-radius: 4px;
   line-height: 1.5;
   position: relative;
+  white-space: break-spaces;
 }
 
 .info-content-text pre .line-numbers {
@@ -188,7 +189,6 @@ body {
   font-family: 'Maple Mono', monospace;
   font-size: 13px;
   border-radius: 4px;
-  white-space: break-spaces;
   background-color: var(--code-highlight-background-color);
   color: var(--text-color);
 }

frontend_nuxt/components/AvatarCropper.vue

@@ -2,7 +2,7 @@
   <div v-if="show" class="cropper-modal">
     <div class="cropper-body">
       <div class="cropper-wrapper">
-        <BaseImage ref="image" :src="src" alt="to crop" />
+        <img ref="image" :src="src" alt="to crop" />
       </div>
       <div class="cropper-actions">
         <button class="cropper-btn" @click="$emit('close')">取消</button>

frontend_nuxt/components/HeaderComponent.vue

@@ -63,7 +63,7 @@
           <DropdownMenu v-if="isLogin" ref="userMenu" :items="headerMenuItems">
             <template #trigger>
               <div class="avatar-container">
-                <BaseImage class="avatar-img" :src="avatar" alt="avatar" />
+                <img class="avatar-img" :src="avatar" alt="avatar" />
                 <i class="fas fa-caret-down dropdown-icon"></i>
               </div>
             </template>

frontend_nuxt/components/MessageFloatWindow.vue

@@ -16,6 +16,7 @@
         @click="reboundToDefault"
       ></i>
       <i class="fas fa-expand" title="在页面中打开" @click="expand"></i>
+      <i class="fas fa-times" title="关闭" @click="close"></i>
     </div>
   </div>
 </template>
@@ -48,6 +49,10 @@ function expand() {
   navigateTo(target)
 }
 
+function close() {
+  floatRoute.value = null
+}
+
 function injectBaseTag() {
   if (!iframeRef.value) return
 

frontend_nuxt/package.json

@@ -17,6 +17,7 @@
     "highlight.js": "^11.11.1",
     "ldrs": "^1.0.0",
     "markdown-it": "^14.1.0",
+    "mermaid": "^10.9.4",
     "nprogress": "^0.2.0",
     "nuxt": "latest",
     "sanitize-html": "^2.17.0",

frontend_nuxt/utils/markdown.js

@@ -96,6 +96,9 @@ const md = new MarkdownIt({
   linkify: true,
   breaks: true,
   highlight: (str, lang) => {
+    if (lang === 'mermaid') {
+      return `<pre class="mermaid">${str}</pre>`
+    }
     let code = ''
     if (lang && hljs.getLanguage(lang)) {
       code = hljs.highlight(str, { language: lang, ignoreIllegals: true }).value
@@ -182,7 +185,7 @@ const SANITIZE_CFG = {
   allowedClasses: {
     a: ['mention-link'],
     img: ['emoji'],
-    pre: ['code-block'],
+    pre: ['code-block', 'mermaid'],
     div: ['line-numbers', 'line-number'],
     code: ['hljs', /^language-/],
     button: ['copy-code-btn'],
@@ -208,8 +211,15 @@ const SANITIZE_CFG = {
 /** @section 渲染 & 事件 */
 export function renderMarkdown(text) {
   const raw = md.render(text || '')
-  // ⭐ 核心：对最终 HTML 进行一次净化
-  return sanitizeHtml(raw, SANITIZE_CFG)
+  const html = sanitizeHtml(raw, SANITIZE_CFG)
+  if (typeof window !== 'undefined') {
+    setTimeout(async () => {
+      const mermaid = await import('mermaid')
+      mermaid.default.initialize({ startOnLoad: false })
+      mermaid.default.run({ nodes: document.querySelectorAll('.mermaid') })
+    })
+  }
+  return html
 }
 
 export function handleMarkdownClick(e) {