fixed fetch

修复了fetch不到数据的问题，但保留了无法第一时间渲染的问题、篇幅过长无法正常载入以及部分格式无法统一的问题

components/FileIndex.vue

@@ -21,11 +21,9 @@ function clickHandler(index: number) {
     <ul v-if="isLoaded">
       <li v-for="(item, index) in ids" :key="index" flex cursor-pointer @click="clickHandler(index)">
         <div i-carbon-document text-1xl inline-block />
-        <!--  <NuxtLink :to="`/posts/${item}`"> -->
         <div text-1xl inline-block>
           {{ item }}
-        </div><!--
-            </NuxtLink> -->
+        </div>
       </li>
     </ul>
     <div v-else>

components/RichEditor.vue

@@ -72,7 +72,7 @@ function handleCreated(editor) {
 async function update() {
   const editor = editorRef.value
   const markdown = turndownService.turndown(editor.getHtml())
-  await useFetch('/api/post/setNew', {
+  const { data, pending, error, refresh } = await useFetch('/api/post/setNew', {
     method: 'POST',
     body: JSON.stringify({
       id: editState.currentEditFileName,

layouts/default.vue

@@ -1,12 +1,15 @@
 <template>
   <main class="px-10 py-20 text-center">
+    <div relative z-10>
+      <slot />
+      <Footer />
+      <div class="z-1 mx-auto mt-5 text-center text-sm opacity-25">
+        [Default Layout]
+      </div>
+    </div>
+
     <ClientOnly>
       <DrawTree fixed left-0 top-0 />
     </ClientOnly>
-    <slot fixed z-1 />
-    <Footer />
-    <div class="z-1 mx-auto mt-5 text-center text-sm opacity-25">
-      [Default Layout]
-    </div>
   </main>
 </template>

nuxt.config.ts

@@ -66,4 +66,4 @@ export default defineNuxtConfig({
       enabled: true,
     },
   },
-})
+})

pages/editor.vue

@@ -7,12 +7,12 @@ interface Text {
 }
 const text = ref<Text>({ markdown: '', html: '' })
 editState.$subscribe(async (state) => {
-  const data = await useFetch(`/api/post/${editState.currentEditFileName}`, {
+  const { data, pending, error, refresh } = await useFetch(`/api/post/${editState.currentEditFileName}`, {
     options: {
       method: 'GET',
       lazy: true,
     },
-  }).data.value
+  })
 
   text.value.markdown = data?.fileContent
   text.value.html = data?.contentHtml
@@ -26,7 +26,7 @@ function changeHtml(value: any) {
 </script>
 
 <template>
-  <div flex>
+  <div relative z-1>
     <div class="main" w-200 style="margin: 0 auto;" flex>
       <FileIndex w-100 />
       <ClientOnly w-100>

pages/list.vue

@@ -1,24 +1,24 @@
 <script setup lang="ts">
-const titles = useFetch('/api/post/postDirs').data.value
+let ids: string[] = []
+const { data, pending, error, refresh } = await useFetch('/api/post/postDirs')
 
-const ids = titles?.map((title) => {
+ids = data.value?.map((title: string) => {
   return title.replace(/\.md$/, '')
-})
+}) as string[]
 </script>
 
 <template>
   <div relative z-1>
     <h1>List of Items</h1>
-    <ul>
+    <ul v-if="!pending">
       <li v-for="(item, index) in ids" :key="index">
         <NuxtLink :to="`/posts/${item}`">
           {{ item }}
         </NuxtLink>
       </li>
     </ul>
+    <div v-else>
+      Loading...
+    </div>
   </div>
 </template>
-
-<style>
-/* Your CSS styles here */
-</style>

pages/posts/[id].vue

@@ -2,17 +2,18 @@
 const route = useRoute()
 const id = route.params.id
 
-const data = await useFetch(`/api/post/${id}`, {
-  method: 'GET',
-  body: JSON.stringify({
-    id,
-  }),
-}).data?.value
-console.log(data?.contentHtml)
+const { data, pending, error, refresh } = await useFetch(`/api/post/${id}`)
 </script>
 
 <template>
-  <div v-html="data!.contentHtml" />
+  <div v-if="pending">
+    Loading...
+  </div>
+  <div v-if="!pending" w-100 justify-center class="text" v-html="data!.contentHtml" />
 </template>
 
-<style scoped lang='less'></style>
+<style scoped>
+.text{
+  margin: 0 auto;
+}
+</style>