feat: 重构部分代码，略微完成文章md渲染部分

pages/posts/index.vue

@@ -2,7 +2,7 @@
     <div class="posts-wrapper">
         <article class="posts-item" v-for="post in postsData" :key="post.id">
             <header class="post-title">
-                <a href="">{{ post.title }}</a>
+                <nuxt-link :to="`/posts/post-${post.id}`">{{ post.title }}</nuxt-link>
             </header>
             <p class="post-summary">{{ post.summary }}...</p>
             <footer class="post-footer">
@@ -32,10 +32,10 @@ const postsData = ref<postItem[]>([])
 
 onMounted(async () => {
     // router.push('/posts/temp')
-    await sleep(1000)
-    postsData.value = await $fetch('/api/posts/getPosts')
+    // await sleep(1000)
+    postsData.value = await $fetch('/api/posts/getPostList')
     isInit.value = true
-    console.log(postsData.value)
+    // console.log(postsData.value)
 })
 
 </script>

pages/posts/post-[id].vue

@@ -0,0 +1,58 @@
+<template>
+    <div class="md-render">
+        <div v-if="isInit" v-html="renderedData"></div>
+        <div v-else class="md-skeleton-item">
+            <n-skeleton text style="height: 40px; width: 60%" />
+            <n-skeleton text :repeat="2" />
+            <n-skeleton text style="height: 40px; width: 60%" />
+            <n-skeleton text :repeat="6" />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import useMarkdownit from '~/hooks/useMarkdownit';
+
+const route = useRoute()
+
+const isInit = ref(false)
+
+const renderedData = ref('')
+
+onMounted(async () => {
+    const id = route.params.id
+
+    const _p = $fetch('/api/posts/getPostContent', {
+        method: 'POST',
+        body: {
+            id
+        }
+    })
+
+    const markdownIt = await useMarkdownit()
+
+    const postsData = await _p
+
+    renderedData.value = markdownIt.render(postsData.data)
+
+    isInit.value = true
+
+})
+
+</script>
+
+<style scoped>
+.md-render {
+    width: 100%;
+    padding: 10px 20px 30px;
+
+    box-sizing: border-box;
+}
+
+.md-skeleton-item {
+    display: flex;
+    flex-direction: column;
+    gap: 30px;
+    padding-top: 30px;
+}
+</style>