feat: 优化文章页面加载表现

components/markdownRender.vue

@@ -2,42 +2,40 @@
 
 <template>
     <div class="md-render-wrapper markdown-body">
-        <!-- <div v-html="renderedData" :key="_key"></div> -->
-        <VNodeArr></VNodeArr>
+        <VNodeMD v-if="VNodeMD && props.data"></VNodeMD>
+        <div v-else>
+            <el-skeleton :rows="12" />
+        </div>
     </div>
 </template>
 
 <script setup lang="ts">
 import useMarkdownit from '~/hooks/useMarkdownit';
 import Html2VNode from '~/utils/html2VNode';
-import codeMirror from './codeMirror.vue';
 
 const props = defineProps<{
     data: string
 }>()
 
-const _key = ref(Math.random())
+const VNodeMD = shallowRef<any>()
 
-const markdownIt = await useMarkdownit()
-
-const VNodeArr = computed(() => {
+watch(() => props.data, async () => {
     if (!props.data) {
         return () => []
     }
+    const markdownIt = await useMarkdownit()
     const renderedData = markdownIt.render(props.data)
-    console.log({
-        renderedData
-    })
     const h2v = new Html2VNode()
     h2v.use(
         {
             filter(tagName) {
                 return tagName === 'code'
             },
-            render({
+            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
@@ -53,12 +51,14 @@ const VNodeArr = computed(() => {
             },
         }
     )
-    const res = h2v.render(renderedData)
-    return {
+    const res = await h2v.render(renderedData)
+    VNodeMD.value = {
         setup: () => {
             return () => res
         },
     }
+}, {
+    immediate: true
 })
 
 // watch(() => renderedData.value, () => {
@@ -90,38 +90,43 @@ const VNodeArr = computed(() => {
     }
 
     /* 恢复标题样式 */
-    h1, h2, h3, h4, h5, h6 {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
         margin-top: 1em;
         margin-bottom: 0.5em;
         font-weight: bold;
         line-height: 1.25;
         color: #111;
     }
-    
+
     h1 {
         font-size: 2em;
         border-bottom: 1px solid #eaecef;
         padding-bottom: 0.3em;
     }
-    
+
     h2 {
         font-size: 1.5em;
         border-bottom: 1px solid #eaecef;
         padding-bottom: 0.3em;
     }
-    
+
     h3 {
         font-size: 1.25em;
     }
-    
+
     h4 {
         font-size: 1em;
     }
-    
+
     h5 {
         font-size: 0.875em;
     }
-    
+
     h6 {
         font-size: 0.85em;
         color: #6a737d;
@@ -135,25 +140,27 @@ const VNodeArr = computed(() => {
     }
 
     /* 恢复列表样式 */
-    ul, ol {
+    ul,
+    ol {
         margin-top: 0;
         margin-bottom: 1em;
         padding-left: 2em;
     }
-    
+
     ul {
         list-style-type: disc;
     }
-    
+
     ol {
         list-style-type: decimal;
     }
-    
+
     li {
         margin-bottom: 0.25em;
     }
-    
-    li > ul, li > ol {
+
+    li>ul,
+    li>ol {
         margin-top: 0.25em;
         margin-bottom: 0;
     }
@@ -162,7 +169,7 @@ const VNodeArr = computed(() => {
     a {
         color: #0366d6;
         text-decoration: none;
-        
+
         &:hover {
             text-decoration: underline;
         }
@@ -174,11 +181,11 @@ const VNodeArr = computed(() => {
         padding: 0 1em;
         color: #6a737d;
         border-left: 0.25em solid #dfe2e5;
-        
+
         > :first-child {
             margin-top: 0;
         }
-        
+
         > :last-child {
             margin-bottom: 0;
         }
@@ -194,22 +201,22 @@ const VNodeArr = computed(() => {
         border-spacing: 0;
         border-collapse: collapse;
     }
-    
+
     th {
         font-weight: 600;
         padding: 6px 13px;
         border: 1px solid #dfe2e5;
     }
-    
+
     td {
         padding: 6px 13px;
         border: 1px solid #dfe2e5;
     }
-    
+
     tr {
         background-color: #fff;
         border-top: 1px solid #c6cbd1;
-        
+
         &:nth-child(2n) {
             background-color: #f6f8fa;
         }