feat: 优化性能

pages/posts/index.vue

@@ -6,7 +6,7 @@
             </header>
             <p class="post-summary">{{ post.summary }}...</p>
             <footer class="post-footer">
-                <div class="post-date">{{ post.date }}</div>
+                <div class="post-date">{{ formatDate(post.date, 'yy-MM-dd HH:mm:ss') }}</div>
                 <div class="post-tags">
                     <div v-for="tag in post.tags">{{ tag }}</div>
                 </div>
@@ -22,18 +22,28 @@
 </template>
 
 <script setup lang="ts">
+import useDefaultStore from '~/hooks/pinia/useDefaultStore';
 import type { postItem } from '~/types/post';
 
-
-// const router = useRouter()
+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 res = await $fetch('/api/posts/getPostList')
+    store.setCache('posts', res)
+    return res
+}
+
 onMounted(async () => {
     // router.push('/posts/temp')
     // await sleep(1000)
-    postsData.value = await $fetch('/api/posts/getPostList')
+    postsData.value = await getData()
     isInit.value = true
     // console.log(postsData.value)
 })
@@ -45,6 +55,7 @@ onMounted(async () => {
     // height: 50vh;
     width: 100%;
     padding-top: 10px;
+
     // background-color: #15aa87;
     .posts-item {
         margin: 10px 20px;
@@ -102,6 +113,7 @@ onMounted(async () => {
                 &>div {
                     cursor: pointer;
                     transition: color .2s linear;
+
                     &:hover {
                         color: #15aa87;
                     }

pages/posts/post-[id].vue

@@ -1,6 +1,10 @@
 <template>
-    <div class="md-render">
-        <div v-if="isInit" v-html="renderedData"></div>
+    <div class="md-wrapper">
+        <div class="md" v-if="isInit">
+            <div class="md-title">{{ title }}</div>
+            <n-divider />
+            <div v-html="renderedData"></div>
+        </div>
         <div v-else class="md-skeleton-item">
             <n-skeleton text style="height: 40px; width: 60%" />
             <n-skeleton text :repeat="2" />
@@ -12,20 +16,39 @@
 
 <script setup lang="ts">
 import useMarkdownit from '~/hooks/useMarkdownit';
+import usePostStore from '~/hooks/pinia/usePostStore';
+import type { postContent } from '~/types/post';
+
+const postStore = usePostStore()
 
 const route = useRoute()
 
 const isInit = ref(false)
 
+const title = ref('')
+
 const renderedData = ref('')
 
 onMounted(async () => {
-    const id = route.params.id
+    const id = route.params.id as string
 
-    const _p = $fetch('/api/posts/getPostContent', {
-        method: 'POST',
-        body: {
-            id
+    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)
         }
     })
 
@@ -35,6 +58,8 @@ onMounted(async () => {
 
     renderedData.value = markdownIt.render(postsData.data)
 
+    title.value = postsData.title
+
     isInit.value = true
 
 })
@@ -42,7 +67,7 @@ onMounted(async () => {
 </script>
 
 <style scoped>
-.md-render {
+.md-wrapper {
     width: 100%;
     padding: 10px 20px 30px;
 
@@ -55,4 +80,15 @@ onMounted(async () => {
     gap: 30px;
     padding-top: 30px;
 }
+
+.md {
+    font-family: fangsong;
+}
+
+.md-title {
+    display: flex;
+    justify-content: center;
+    font-size: 42px;
+    margin-bottom: -10px;
+}
 </style>