From d20dc84d9da870250cbcc02df0a3c2242afb6a89 Mon Sep 17 00:00:00 2001
From: Miao_Spring <539943419@qq.com>
Date: Tue, 25 Mar 2025 13:38:56 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96md=E6=B8=B2=E6=9F=93?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=80=A7=E8=83=BD=E8=A1=A8=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/markdownRender.vue     | 34 ++++---------------------------
 components/user/postEditor.vue    |  2 +-
 hooks/h2v/codemirrorMiddleware.ts | 28 +++++++++++++++++++++++++
 utils/cachedPromise.ts            | 11 ++++++++++
 4 files changed, 44 insertions(+), 31 deletions(-)
 create mode 100644 hooks/h2v/codemirrorMiddleware.ts
 create mode 100644 utils/cachedPromise.ts

diff --git a/components/markdownRender.vue b/components/markdownRender.vue
index 5b68490..9e107f0 100644
--- a/components/markdownRender.vue
+++ b/components/markdownRender.vue
@@ -4,17 +4,19 @@
     <div class="md-render-wrapper markdown-body">
         <VNodeMD v-if="VNodeMD && props.data"></VNodeMD>
         <div v-else>
-            <el-skeleton :rows="12" />
+            <el-skeleton v-if="!props.disableSkeleton" :rows="12" />
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
+import codemirrorMiddleware from '~/hooks/h2v/codemirrorMiddleware';
 import useMarkdownit from '~/hooks/useMarkdownit';
 import Html2VNode from '~/utils/html2VNode';
 
 const props = defineProps<{
     data: string
+    disableSkeleton?: boolean
 }>()
 
 const VNodeMD = shallowRef<any>()
@@ -26,31 +28,7 @@ watch(() => props.data, async () => {
     const markdownIt = await useMarkdownit()
     const renderedData = markdownIt.render(props.data)
     const h2v = new Html2VNode()
-    h2v.use(
-        {
-            filter(tagName) {
-                return tagName === 'code'
-            },
-            async render({
-                item,
-                tagAttrs,
-            }) {
-                const codeMirror = (await import('./codeMirror.vue')).default
-                const codeType = tagAttrs?.class?.slice(1, -1)?.split('-')?.[1] ?? ''
-                // @ts-ignore
-                const inline = (item.children[0].children.trim() as string).includes('\n') ? false : true
-                return h(
-                    codeMirror,
-                    {
-                        // @ts-ignore
-                        data: item.children[0].children.trim(),
-                        type: codeType,
-                        inline,
-                    },
-                )
-            },
-        }
-    )
+    h2v.use(codemirrorMiddleware)
     const res = await h2v.render(renderedData)
     VNodeMD.value = {
         setup: () => {
@@ -61,10 +39,6 @@ watch(() => props.data, async () => {
     immediate: true
 })
 
-// watch(() => renderedData.value, () => {
-//     _key.value = Math.random()
-// })
-
 </script>
 
 <style lang="scss">
diff --git a/components/user/postEditor.vue b/components/user/postEditor.vue
index de82b50..6f7610a 100644
--- a/components/user/postEditor.vue
+++ b/components/user/postEditor.vue
@@ -39,7 +39,7 @@
                 <el-input v-if="isEditing" type="textarea" v-model:model-value="content" placeholder="content"
                     :autosize="{ minRows: 15 }" :disabled="disabled" />
                 <div class=" border-1 border-gray-300 rounded-sm p-2" v-else>
-                    <markdown-render :data="content ?? ''" />
+                    <markdown-render :data="content ?? ''" :disable-skeleton="true" />
                 </div>
             </el-col>
         </el-row>
diff --git a/hooks/h2v/codemirrorMiddleware.ts b/hooks/h2v/codemirrorMiddleware.ts
new file mode 100644
index 0000000..42d6b83
--- /dev/null
+++ b/hooks/h2v/codemirrorMiddleware.ts
@@ -0,0 +1,28 @@
+const codemirrorMiddleware: middlewareType = {
+    filter(tagName: string) {
+        return tagName === 'code'
+    },
+    async render({
+        item,
+        tagAttrs,
+    }) {
+        const codeMirror = await cachedPromise('component:codeMirror', async () => {
+            const codeMirror = (await import('~/components/codeMirror.vue')).default
+            return codeMirror
+        })
+        const codeType = tagAttrs?.class?.slice(1, -1)?.split('-')?.[1] ?? ''
+        // @ts-ignore
+        const inline = (item.children[0].children.trim() as string).includes('\n') ? false : true
+        return h(
+            codeMirror,
+            {
+                // @ts-ignore
+                data: item.children[0].children.trim(),
+                type: codeType,
+                inline,
+            },
+        )
+    },
+}
+
+export default codemirrorMiddleware
\ No newline at end of file
diff --git a/utils/cachedPromise.ts b/utils/cachedPromise.ts
new file mode 100644
index 0000000..e1efcbd
--- /dev/null
+++ b/utils/cachedPromise.ts
@@ -0,0 +1,11 @@
+import useDefaultStore from "~/hooks/pinia/useDefaultStore"
+
+export default async function cachedPromise<T>(key: string, promise: () =>Promise<T>): Promise<T> {
+    const cache = useDefaultStore().getCache(key)
+    if (cache) {
+        return cache
+    }
+    const res = await promise()
+    useDefaultStore().setCache(key, res)
+    return res
+}
\ No newline at end of file