feat: 优化md渲染相关逻辑，优化文章页面

pages/posts/index.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="posts-wrapper">
-        <article class="posts-item" v-for="post in postsData" :key="post.id">
+        <article class="posts-item" v-for="post in posts" :key="post.id">
             <header class="post-title">
                 <nuxt-link :to="`/posts/post-${post.id}`">{{ post.title }}</nuxt-link>
             </header>
@@ -18,7 +18,7 @@
                 </div>
             </footer>
         </article>
-        <div class="posts-skeleton" v-if="!isInit">
+        <div class="posts-skeleton" v-if="pending">
             <div class="posts-skeleton-item" v-for="_ in range(5)">
                 <el-skeleton :rows="3" />
             </div>
@@ -33,29 +33,26 @@ import bookmark from '~/components/icons/tag.vue'
 import type { postItem } from '~/types/post';
 
 const store = useDefaultStore()
-const isInit = ref(false)
 
-const postsData = ref<postItem[]>([])
-
-const getData = async () => {
-    const cache = store.getCache('posts')
-    if (cache) {
-        return cache as postItem[]
-    }
-    const response = await $fetch('/api/posts/getPostList')
-    const res = response.data
-    store.setCache('posts', res)
-    return res
-}
-
-onMounted(async () => {
-    // router.push('/posts/temp')
-    // await sleep(1000)
-    postsData.value = await getData()
-    isInit.value = true;
-    // console.log(postsData.value)
+// 使用useFetch在服务器端获取数据
+const { data, pending } = await useFetch<{ code: number, data: postItem[] }>('/api/posts/getPostList', {
+    // 如果缓存中已有数据，优先使用缓存
+    key: 'posts-list',
+    transform: (response) => {
+        if (response && response.data) {
+            store.setCache('posts', response.data)
+            return response
+        }
+        return { code: 0, data: [] }
+    },
+    // 添加以下选项
+    lazy: true, // 避免客户端自动重新获取
+    server: true, // 仅在服务器端获取数据
+    // cache: 'force-cache', // 强制使用缓存
+    // dedupe: 'force', // 强制使用缓存的数据
 })
-
+// 从响应中提取文章列表
+const posts = computed(() => data.value?.data || []) as ComputedRef<postItem[]>
 </script>
 
 <style lang="scss" scoped>

pages/posts/post-[id].vue

@@ -1,9 +1,9 @@
 <template>
     <div class="md-wrapper">
-        <div class="md" v-if="isInit">
-            <div class="md-title">{{ title }}</div>
+        <div class="md" v-if="postData">
+            <div class="md-title">{{ postData.title }}</div>
             <div class="md-divider"></div>
-            <markdown-render :data="content"></markdown-render>
+            <markdown-render :data="postData.content"></markdown-render>
         </div>
         <div v-else class="md-skeleton-item">
             <el-skeleton :rows="12" />
@@ -18,55 +18,43 @@ import markdownRender from '~/components/markdownRender.vue';
 import type { postContent } from '~/types/post';
 
 const postStore = usePostStore()
-
 const route = useRoute()
-
-const isInit = ref(false)
-
-const title = ref('')
-
-const content = ref('')
-
-const renderedData = ref('')
-
 const id = route.params.id as string
 
-onMounted(async () => {
-
-    const _p = new Promise<postContent>(async (resolve, reject) => {
-        try {
-            const cache = postStore.getPostCache(id)
-            if (cache) {
-                resolve(cache)
-                return
-            }
-            const res = await $fetch('/api/posts/getPostContent', {
-                method: 'POST',
-                body: {
-                    id
-                }
-            }) as postContent
-            postStore.setPostCache(id, res)
-            resolve(res)
-        } catch (error) {
-            reject(error)
+// 使用useFetch来获取文章内容，支持SSR
+const { data: fetchedPost } = await useFetch('/api/posts/getPostContent', {
+    method: 'POST',
+    body: {
+        id
+    },
+    transform: async (response: postContent) => {
+        // 缓存数据
+        postStore.setPostCache(id, response)
+        
+        // 渲染Markdown
+        const markdownIt = await useMarkdownit()
+        
+        return {
+            title: response.title,
+            content: response.data,
+            rendered: markdownIt.render(response.data)
         }
-    })
-
-    const markdownIt = await useMarkdownit()
-
-    const postsData = await _p
-
-    content.value = postsData.data
-
-    renderedData.value = markdownIt.render(postsData.data)
-
-    title.value = postsData.title
-
-    isInit.value = true
-
+    },
+    // 使用缓存
+    async onRequest({ options }) {
+        const cache = postStore.getPostCache(id)
+        if (cache) {
+            return { 
+                title: cache.title, 
+                content: cache.data,
+                rendered: (await useMarkdownit()).render(cache.data)
+            }
+        }
+    }
 })
 
+// 响应式数据
+const postData = computed(() => fetchedPost.value)
 </script>
 
 <style scoped>