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

pages/iframe/[url].vue

@@ -1,11 +1,16 @@
 <template>
     <div class="iframe-wrapper">
-        <iframe src="/iframe-source/genshin-gacha/index.html" frameborder="0"></iframe>
+        <iframe :src="decodeURIComponent(route.params.url as string)" frameborder="0"></iframe>
     </div>
 </template>
 
 <script setup lang="ts">
 
+const route = useRoute();
+
+// onMounted(() => {
+//     console.log(route.params.url);
+// })
 </script>
 
 <style scoped>

pages/index.vue

@@ -105,7 +105,17 @@ const PageContent = reactive<PageContent[]>([
         nuxtLinks: [
           {
             name: 'demo',
-            to: 'tool/genshin-gacha'
+            to: `/iframe/${encodeURIComponent('/iframe-source/genshin-gacha/index.html')}`
+          }
+        ]
+      },
+      {
+        name: 'miaoTracker',
+        description: '仅仅是个接口而已，用来查询开发者的位置记录',
+        nuxtLinks: [
+          {
+            name: 'demo',
+            to: `/iframe/${encodeURIComponent('https://nj.miaospring.top:17582/api/getAllPositions')}`
           }
         ]
       },
@@ -115,12 +125,11 @@ const PageContent = reactive<PageContent[]>([
     show: true,
     content: [
       {
-        name: 'vue3',
+        name: 'VUE',
         description: 'vue3官方文档',
         links: [
           {
             name: 'vue3',
-
             url: 'https://cn.vuejs.org/'
           }
         ]

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>